* {
            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%;
            background: #35100d;
        }

        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;
        }

        .qua1 {
            position: absolute;
            left: 0%;
            width: 300px;
        }

        .qua2 {
            position: absolute;
            right: 0%;
            width: 300px;
        }

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

        .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: 0 auto;
            text-align: center;
        }

        .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: #FFFFFF;
            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: #F82602;
            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, #E11401 0%, #A90300 100%);
        }

            .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 { color: white; border: none; padding: 6px 0px; border-radius: 4px; cursor: pointer; background: linear-gradient(180deg, #DD4812 0%, #A8051D 100%); font-size: 16px; width: 180px;
        }

        .hdpc {
            display: none;
        }

        .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) {
            .popup-content .table-wrapper{max-height: 410px;}
            .popup-content{max-height: 530px;}
            .code-btn{font-size: 14px; width: 110px;}
            .popup-content table tr td{font-size: 14px; padding: 2px 5px;}
            .popup-content table tr th{font-size: 14px;}
            .popup-content .close-btn{width: 25px;height:25px; top: -35px; right: 22px;}
            .container {
                height: 100%;
            }

            .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: 36px;
            }

            .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;
            }

            .w50:nth-child(2) {
                justify-content: flex-end;
            }
        }