* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            /* font-family: 'SF Pro Display', sans-serif; */
            font-family: 'Mulish', sans-serif;
                                                
        }
body{
    background: url('../img/headerbg.png') no-repeat top center;
}
        header {
            width: 100%;
            padding: 60px 0px 40px 0px;
            background-size: cover;
        }
        .noidung.header{text-align: center;}
        .noidung.header img{max-width: 100%;}
        .noidung {
            width: 1200px;
            max-width: 100%;
        }


        .form-group .box-title{text-align: center;}
        .form-group .box-title img{height: 50px;}
        .form-group .box-title label{display: block;font-size: 18px;margin-bottom: 30px;}

        .w50 {
            width: 50%;
            display: flex;
        }

        .flex-end {
            justify-content: flex-end;
        }

        .w50 img {
            max-width: 80%;
            height: auto;
        }

        .clear {
            clear: both;
        }

        .khuyenmai {
            width: 100%;
            margin: 20px 0 0;
            background-size: 100%;
            padding-bottom: 20px;
            margin-top: 100px;

        }
        .khuyenmai .title-promo{font-size: 38px;text-transform: uppercase;color:#00A6F3;font-weight: bold;}
        .khuyenmai .title-promo{margin-bottom: 40px;}
        .khuyenmai .readmore{text-align: center;color:#00A6F3;font-size: 18px;margin-top: 10px;cursor: pointer;}
        .khuyenmai .readmore img{position: relative;top:-2px;}

        .banner {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
            padding: 10px;
        }

        .banner-detail:not(.active){display: none;}
        .banner-detail {
            width: calc(50% - 10px);
            display: flex;
            justify-content: center;
        }

            .banner-detail a {
                display: flex;
            }

            .banner-detail img {
                max-width: 100%;
                height: auto;
            }

        .title {
            
            max-width: 100%;
            margin: 0 auto;
            text-align: center;
        }

        .titlez {
            max-width: 90%;
            height: auto;
        }

        .form-container {
            width: 100%;
            max-width: 1200px;
            margin: 20px auto;
            padding: 40px 30px;
            background: #fff;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #FFFFFF;
            box-shadow: 0px 10.84px 22.51px -4.17px #32325D40;
            border-radius: 22px;
            
        }

        form {
            width: 100%;
        }

        .form-row {
            display: grid;
            grid-template-columns: auto auto auto auto auto;
            gap: 20px;
            align-items: end;
        }

        .form-group {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        label {
            font-weight: bold;
            margin-bottom: 5px;
        }

        input[type="text"] {
            width: 100%;
            padding: 6px 10px;
            border-radius: 10px;
            outline: none;
            background: #F5F5F5;
            font-size: 14px;
            color: #000000;
            border:0px;
        }

        .promo-wrapper {
            position: relative;
            width: 100%;
        }

        #promo-info {
            width: 100%;
            padding: 6px 40px 6px 10px; /* Chừa khoảng bên phải cho nút + */
            border-radius: 10px;
            
            outline: none;

            outline: none;
            background: #F5F5F5;
            font-size: 14px;
            color: #000000;
            border:0px;
        }

        .add-btn {
            position: absolute;
            right: 10px;
            top: 47%;
            transform: translateY(-50%);
            width: 24px;
            height: 24px;
            border: none;
            background: transparent;
            color: #007bff;
            font-size: 32px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            background: url('../img/icon_btn_plus.png') no-repeat center center;
        }

        .verify-code {
            display: flex;
            gap: 10px;
            text-align: center;
            margin: 0px auto;
        }

            .verify-code input {
                width: 38px;
                height: 38px;
                text-align: center;
                border-radius: 10px;
                
                outline: none;
                background: #F5F5F5;
                font-size: 14px;
                color: #000000;
                border:0px;
            }

        .submit-btn {
            
            color: #fff;
            font-size: 18px;
            font-weight: bold;
            border: none;
            cursor: pointer;
            text-align: center;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 10px;
            
            border-radius: 13.8309px;
            background: radial-gradient(142.42% 142.42% at 50% 0%, #00C2FF 0%, #0038FF 100%)

        }

            .submit-btn:hover {
                background: linear-gradient(to right, #0056b3, #003d80);
            }

        .popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
            padding: 20px;
            backdrop-filter: blur(10px);
        }

        .popup-content {
            background: #e3f2fd;
            background: url(../img/popup.png) no-repeat top center;
            background-size: cover;
            padding: 0px 15px;
            border-radius: 10px;
            width: 670px;
            max-width: 90%;
            text-align: center;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000;
            border: solid 2px #fff;
            
            max-height: 650px;
            overflow: hidden;
        }
        .popup-content .box-logo{ max-height: 178px; padding: 10px 0px;}
        .popup-content .box-logo img{max-width: 100%;max-height: 85px;}
        .popup-content .table-wrapper{max-height: 530px; overflow: auto; margin-bottom: 20px; border-radius: 8px;}
        .popup-content table{background: #fff;border-radius: 8px;border-spacing: 0px;}
        .popup-content table tr th{background: #00A6F3; color: #fff;font-weight: normal; font-size: 20px;}
        .popup-content table tr th:first-child{border-right: 1px solid #60BBC2;}
        .popup-content table tr th:last-child{border-left: 1px solid #60BBC2;}
        .popup-content table tr td{font-size: 16px; border: 1px solid #60BBC2; border-radius: 0px; padding: 8px 15px; text-align: center;}
        .popup-content table tbody{}

        .popup-content .close-btn {
                position: absolute;
                top: -25px;
                right: 30px;
                background: #fff;
                color: gray;
                border: none;
                width: 30px;
                height: 30px;
                font-size: 18px;
                border-radius: 50%;
                cursor: pointer;
                transform: translate(50%, 40px);
        }
        /* Bảng mã khuyến mãi */
        table {
            width: 100%;
        }

        th, td {
            padding: 10px;
            text-align: center;
        }

        th {
            font-weight: bold;
        }

        .km-noidung {
            background: #fff;
        }

        td {
            border-radius: 10px;
            text-align: left; /* Căn lề trái nội dung khuyến mãi */
            padding-left: 15px;
        }
        /* Nút mã */
        .code-btn {
            background: #00A6F3;
            color: white;
            border: none;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            width: 100%;
        }

        .nutback {
            position: absolute;
            top: 2%;
            left: 5%;
            width: 60px;
            z-index: 2;
        }

            .nutback button {
                background: none;
                border: none;
                cursor: pointer;
            }

            .nutback img {
                width: 100%;
            }

        @media screen and (max-width: 768px) {
            .form-container {
            }

            .noidung {
                width: 100%;
                margin: 0 auto;
            }

            .banner-detail {
                width: 100%;
            }

            .form-row {
                flex-direction: column;
            }

            .submit-btn {
            }

            header {
                padding: 36px;
            }

            .nutback {
                width: 30px;
            }

            .km-noidung {
                font-size: 12px;
            }

            th, td {
                padding: 5px;
            }
        }
		
		
		
body.noscroll { overflow: hidden; }


.welcome-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; /* cao hơn mọi thứ khác */
}


.welcome-box{
  position: relative;
  background: transparent; /* ảnh full box, không cần nền */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}


.welcome-img{
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

/* Nút đóng */
.welcome-close{
  position: absolute;
  top: 8px; right: 8px;
  width: 36px; height: 36px;
  line-height: 36px;
  border: 0; border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color: #fff; font-size: 18px; cursor: pointer;
  display: grid; place-items: center;
}

/* Mặc định (mobile) 400x400 */
.welcome-box{ width: 400px; height: 400px; }

/* Desktop 700x500 */
@media (min-width: 768px){
  .welcome-box{ width: 700px; height: 500px; }

  
}
@media (max-width: 767px){
    .w50 img{max-width: 100%;}
}
@media (max-width: 400px){
    .noidung.header .w50:first-child{width: 100%;}
    .noidung.header .w50:last-child{}
}

/* FOOTER */
footer.index-ui{background-image: linear-gradient(to bottom, #fff 0%, #c5edff);margin-top: 50px;}
footer .full-app{ min-height: 100px;}
footer .full-app .box-title{margin-top: 20px;margin-bottom: 65px;}
footer .full-app .box-title img{max-width: 100%;max-height: 110px;}
footer .full-app .box-intro{max-width: 750px;font-size: 16px;}
footer .full-app .box-banner img{max-width: 100%;}
footer .full-app .box-app{display: flex;padding: 0px 20px;}
footer .full-app .box-app .box-item{flex-basis: 50%; margin-top: 20px;}
footer .full-app .box-app .box-item a{display: inline-block;max-width: 200px;text-decoration: none;text-align: center;}
footer .full-app .box-app .box-item:last-child{text-align: right;background: url('../img/footer/bar_app.png') no-repeat left center;}
footer .full-app .box-app .box-item img{max-width: 100%;max-height: 200px;margin: 0px auto;}
footer .full-app .box-app .box-item p{font-size: 10px;color:#000;text-align: center;margin-top: 15px;}
footer .full-app .box-app .box-item p.title-app{color:#fff;margin: 15px auto;width: 121.5px; line-height: 30px; font-size: 13.5px; font-weight: bold; background: #00a6f3; border: 1.5px solid #fff; box-shadow: 0px 3.19px 3.19px 0px rgba(0, 0, 0, .2509803922); border-radius: 24px;}
footer .full-app .box-banner-app{text-align: right;padding-top: 30px;}
footer .full-app .box-banner-app img{max-width: 100%;max-height: 450px;display: inline-block;}

footer .full-intro-content div.section{margin-top: 50px;}
footer .full-intro-content .box-item{display: flex;gap:10px;font-size: 15px;color:#000;}
footer .full-intro-content .box-item .content img{margin:0px auto;margin-bottom: 10px;}
footer .full-intro-content .box-social{margin-top: 40px;}
footer .full-intro-content .box-desktop .box-item p{margin-bottom: 0px;} 
footer .full-intro-content .box-mobile .box-item p{margin-bottom: 10px;font-family: 'r_bold';}
footer .full-intro-content .box-mobile .box-item:nth-child(odd){text-align: right;}
footer .full-intro-content .box-mobile .box-item:nth-child(even){text-align: left;}

footer .full-menu-social{}
footer .footer-social {width:100%;padding:10px 0px;text-align: center;}
footer .footer-social a{display: inline-block;vertical-align: top;padding:0px 3px;}
footer .footer-social img{max-width:100%;}

footer .footer-menu {width: 100%;padding:20px 0px;text-align: center;padding-bottom: 0px;}
footer .footer-menu ul{margin:0px;padding:0px;list-style: none;}
footer .footer-menu ul li{display: inline-block;vertical-align: top;}
footer .footer-menu ul li a{text-decoration: none;font-size: 17px;color:#4a4a4a;display: block;border-right: 1px solid #4a4a4a;padding:0px 5px;font-family: 'r_regular';}
footer .footer-menu ul li:last-child a{border-right: 0px;}

footer .copyright{font-size: 19px;color:#000;padding-bottom: 10px;padding-top:10px;text-align: center;}
.full-intro-content .box-desktop{display: grid;grid-template-columns: auto auto auto auto;}

.full-intro-content .box-mobile .box-title{background: url('../img/footer/bg_title.png') no-repeat center /100% 100%;height: 22px; text-align: center; font-size: 3.3vw; line-height: 13px;color:#fff;}
.full-intro-content .box-mobile .content {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));padding:15px;}
.full-intro-content .box-mobile .content p{text-align: right;margin-bottom: 0px;color:#4a4a4a;font-size: 13px;}
.full-intro-content .box-mobile .content p:first-child{color:#000}
.full-intro-content .box-mobile .box-news{padding:15px;}
.full-intro-content .box-mobile .box-news ul{border-radius: 7px; background: #00a6f3;margin: 0px; padding: 0px; list-style: none;}
.full-intro-content .box-mobile .box-news ul li{color:#fff;padding:0px 10px;}
.full-intro-content .box-mobile .box-news ul li .box-li-inner{border-bottom: 1px solid #fff;display: grid;grid-template-columns: 150px auto;padding: 10px 0px;align-items: center;}
.full-intro-content .box-mobile .box-news ul li:last-child .box-li-inner{border-bottom: 0px;}
.full-intro-content .box-mobile .box-news ul li img{max-width: 150px;}
.full-intro-content .box-mobile .box-news ul li p.title{margin-bottom: 3.5px; color: #fffb00; font-size: 3vw;}
.full-intro-content .box-mobile .box-news ul li p.title-child{margin: 0; color: #fff; font-size: 2vw; line-height: 1.33;}
.full-intro-content .box-mobile .box-news ul li .box-news-inner{padding-left: 15px;}

.full-intro-content .box-mobile section.info{ display: grid;grid-template-columns: auto auto;}
.full-intro-content .box-mobile section.info div{display: block;}
.full-intro-content .box-mobile section.info div img{display: inline-block; vertical-align: top;margin:5px;max-width: 100%;}
@media (max-width: 992px) {

    .form-row { grid-template-columns: auto; }
        

  footer .full-intro-content .box-item{display: block;text-align: center;margin-bottom: 15px;padding: 0px 20px;}
  footer .full-intro-content .box-item >div{display: inline-block;}
  footer .full-intro-content .box-item div.content{padding-left: 10px;}
  footer .full-intro-content .box-social{padding:15px}

  footer .full-app .box-title{margin:0px;padding:0px;margin-top: 30px; width: 100%; text-align: center;}
  footer .full-app .box-title img{max-height: 80px;}
  footer .full-app .box-app{padding:0px;}
  footer .full-app .box-app .box-item img{max-height: 120px;}
  footer .full-app .box-banner-app img{max-width: 100%;}
  .full-app .row{display: flex;}
  .full-app .row .col-xs-4{flex-basis: 40%;}
  .full-app .row .col-xs-8{flex-basis: 60%;}

  footer .full-logo-content{padding-top:10px;}
  footer .full-logo-content img{max-width: 100%;}
  footer .full-logo-content .box-logo img{max-width: 100%;max-height: 100%;}
  footer .full-logo-content .footer-kevin{display: block;margin-top: 10px;text-align: center;}
  footer .full-logo-content .footer-kevin .box-item:first-child{display: none;}
  footer .footer-social{padding:0px;}
  footer .footer-menu ul{text-align: left;}
  footer .footer-menu ul li{min-width: 49%}
  footer .footer-menu ul li a{font-size: 14px;color: #000;border: 0px;}
  footer .footer-menu ul li { display: inline-block; vertical-align: top; position: relative; padding-left: 8px;}
  footer .footer-menu ul li:before { content: "»"; position: absolute; left: 0px; top: -1px; color: #fff; }
  footer .footer-menu{padding-bottom: 20px;}


  .form-group .box-title img{height: 28px;}
  .form-container{border-radius: 12px;padding: 20px;}
  .form-group .box-title { text-align: left; display: grid; grid-template-columns: 35px auto; }
  .form-group .box-title label{margin-bottom: 15px;}
  .verify-code{margin:0px 0px;}
  .khuyenmai{margin-top: 20px;}
  .khuyenmai .title-promo{margin-bottom: 20px;}

}