* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'SF Pro Display', sans-serif;
        }

        .container {
            background: url('../img/bg.png') no-repeat center bottom;
            background-size: 100%;
        }

        header {
            width: 100%;
            padding: 20px 0;
            height: 400px;
            background: url('../img/headerbg.png') no-repeat center center;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            flex-direction: row;
        }

        .qua1 {
            position: absolute;
            left: 0%;
        }

        .qua2 {
            position: absolute;
            right: 0%;
        }

        .noidung {
            display: flex;
            width: 1200px;
            max-width: 100%;
            justify-content: space-between;
            align-items: center;
        }

        .w100 {
            width: 100%;
        }

            .w100 img {
                width: 450px;
                max-width: 90%;
            }

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

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

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

        .clear {
            clear: both;
        }

        .khuyenmai {
            width: 100%;
            margin: 20px 0 0;
            padding-bottom: 20px;
        }

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

        .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 {
            width: 1200px;
            max-width: 100%;
            margin: 0px auto 0;
            text-align: center;
            z-index: 2
        }

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

        .form-container {
            width: 100%;
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background: #fff;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: linear-gradient(180deg, #FF1000 0%, #FF5400 100%);
            border-radius: 22px;
        }

        form {
            width: 100%;
        }

        .form-row {
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }

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

        label {
            font-weight: bold;
            margin-bottom: 5px;
            color: #fff;
            line-height: 35px;
        }

        .icon {
            width: 32px;
            float: left;
            margin-right: 10px;
        }

        input[type="text"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 10px;
            outline: none;
            background: #f8f8f8;
        }

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

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

        .add-btn {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            width: 24px;
            height: 24px;
            border: none;
            background: transparent;
            color: #F82702;
            font-size: 34px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .verify-code {
            display: flex;
            gap: 10px;
        }

            .verify-code input {
                width: 40px;
                height: 40px;
                text-align: center;
                font-size: 18px;
                border: 1px solid #ccc;
                border-radius: 10px;
                outline: none;
            }

        .submit-btn {
            width: 40%;
            background: linear-gradient(to right, #007bff, #0056b3);
            color: #fff;
            font-size: 18px;
            font-weight: bold;
            border: none;
            cursor: pointer;
            text-align: center;
            margin: 20px auto 0;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 10px;
            border-radius: 13.8309px;
            background: linear-gradient(90deg, #FD4500 0%, #F51601 100%);
            border: 2px solid #FFFFFF;
        }

            .submit-btn:hover {
                background: linear-gradient(90deg, #red 0%, #A90300 100%);
            }

        .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 .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: linear-gradient(180deg, #FF0000 0%, #CF1421 100%); color: #fff;font-weight: normal; font-size: 20px;}
        .popup-content table tr th:first-child{border-right: 1px solid #E40000;}
        .popup-content table tr th:last-child{border-left: 1px solid #E40000;}
        .popup-content table tr td{font-size: 16px; border: 1px solid #E40000; 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: 7px;
            text-align: center;
        }

        th {
            margin-bottom: 10px;
        }

        .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: linear-gradient(90deg, #FE4700 0%, #DC0000 100%);
            color: white;
            border: none;
            padding: 10px;
            border-radius: 15px;
            cursor: pointer;
            width: 100%;
        }

        .hdpc {
            display: none;
        }

        .header {
            text-align: center;
        }

        .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: 1138px) {
            .container {
                height: 100%;
                background: #35100d;
            }

            .form-container {
                width: 90%;
            }

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

            .banner-detail {
                width: 100%;
            }

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

            .submit-btn {
                width: 80%;
            }

            header {
                padding: 50px 30px 30px;
            }

            /* .qua1, .qua2 {
                display: none;
            } */

            .hdpc {
                display: block;
            }

            .hdmb {
                display: none;
            }

            header {
                height: auto;
            }

            .popup-content {
                padding: 10px;
            }

            tr td {
                font-size: 12px;
                line-height: 18px;
            }

            tr {
                margin-bottom: 5px;
            }

            .nutback {
                width: 30px;
            }
        }
		
		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; }
}