/* ========================================================================
   1. SETUP CƠ BẢN & GIAO DIỆN NỀN (KHÔI PHỤC TỶ LỆ CHUẨN)
   ======================================================================== */
html { box-sizing: border-box; scroll-behavior: smooth !important; }
*, *::after, *::before { box-sizing: border-box; }
* { padding: 0; margin: 0; }

body { 
    margin: 0; 
    font-family: "Montserrat", sans-serif; 
    background: #000; color: #fff; 
    font-size: 14px; 
    padding-left: 0 !important; 

	
}

ul, li, ol { list-style: none; padding: 0; margin: 0; }
a { color: #ff9c00; text-decoration: none; outline: none; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; position: relative; }

/* Tùy chỉnh thanh cuộn (Scrollbar) Vàng Kim */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a0705; border-left: 1px solid #332615; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #594821, #a68b42, #594821); border-radius: 10px; border: 1px solid #000; }
::-webkit-scrollbar-thumb:hover { background: #f2d588; box-shadow: 0 0 10px #f2d588; }

/* TRANG CHỦ & VIDEO NỀN - KHÔI PHỤC CHIỀU CAO 1020px CHỐNG PHÓNG TO */
.page-1 { min-height: 1020px; background: url(https://ss6-hnx.com/image/bg-page-1.html) no-repeat center top; position: relative; overflow: hidden; z-index: 1; }
.bg-video-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.bg-video-box video { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }


/* Hiệu ứng đom đóm & Chuột cuộn */
.firefly { position: fixed; left: 50%; top: 50%; width: 4px; height: 4px; background-color: #f2d588; border-radius: 50%; box-shadow: 0 0 10px #f2d588, 0 0 20px #f2d588; animation: move 15s infinite alternate; z-index: 0; opacity: 0.6; pointer-events: none; }
@keyframes move { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 50% { transform: translate(100px, -200px); } 80% { opacity: 0.8; } 100% { transform: translate(-200px, 100px); opacity: 0; } }
.firefly:nth-child(1) { top: 10%; left: 10%; animation-duration: 10s; }
.firefly:nth-child(2) { top: 80%; left: 20%; animation-duration: 12s; }
.firefly:nth-child(3) { top: 40%; left: 80%; animation-duration: 15s; }
.firefly:nth-child(4) { top: 90%; left: 90%; animation-duration: 18s; }

.icon-mouse { width: 44px; height: 65px; background: url(../image/icon-mouse.png) no-repeat; position: absolute; top: 868px; left: 50%; margin-left: -22px; opacity: 0.8;}
.icon-mouse i { position: absolute; left: 15px; width: 15px; height: 8px; background: url(../image/icon-down.png) no-repeat; opacity: 0; animation: down 0.9s infinite ease-in-out; }
.icon-mouse i:nth-child(1) { top: 70px; animation-delay: 0s; }
.icon-mouse i:nth-child(2) { top: 80px; animation-delay: 0.3s; }
.icon-mouse i:nth-child(3) { top: 90px; animation-delay: 0.6s; }
@keyframes down { 50% { opacity: 1; } }



/* ========================================================================
   2. THANH MENU BÊN TRÁI (KHÔI PHỤC VỊ TRÍ TOP 30%)
   ======================================================================== */
.side-nav-left {
    position: fixed; z-index: 99999; left: 20px; 
    top: 32%; /* Sửa từ 30% thành 45% hoặc 50% để cụm menu tụt xuống giữa màn hình */
    transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 12px;
    background: rgba(11, 7, 5, 0.85); padding: 25px 15px; 
    border-radius: 12px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.9); 
    backdrop-filter: blur(8px); border: 1px solid #594821; 
}
.sidebar-logo img { 
    width: 220px !important; 
    height: auto; 
    margin-top: 15px; /* Thêm dòng này để đẩy logo xuống */
    filter: drop-shadow(0px 0px 10px rgba(242, 213, 136, 0.4)); 
}

.side-nav-left .side-item i {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 16px !important;
    position: relative !important;
    z-index: 2 !important;
    flex-shrink: 0 !important;
    background-color: #110b08 !important;
    color: #f2d588 !important;
    border: 2px solid #a68b42 !important;
    transition: all 0.3s ease !important;
    overflow: visible !important;
}
.side-nav-left .side-item span {
    flex: 1 !important;
    width: auto !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Inter', "Montserrat", sans-serif !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0 12px 0 25px !important;
    border-radius: 0 20px 20px 0 !important;
    margin-left: -20px !important;
    position: relative !important;
    z-index: 1 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    background-color: #110b08 !important;
    color: #d1cbbd !important;
    border: 1px solid #594821 !important;
    border-left: none !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
}

/* Hiệu ứng Hover Vàng Kim */
.side-nav-left .side-item:hover { transform: translateX(8px); }
.side-nav-left .side-item:hover i { background:linear-gradient(90deg,#ff4e00,#ffb300);color: #000; border-color: #f2d588; box-shadow: 0 0 15px rgba(242, 213, 136, 0.8); }
.side-nav-left .side-item:hover span { background:linear-gradient(90deg,#ff4e00,#ffb300); color: #fff; border-color: #a68b42; }

#back-to-top { position: static !important; max-height: 0; margin: 0 !important; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(15px); transition: all 0.4s ease !important; overflow: hidden; }
#back-to-top.show { max-height: 60px; margin-top: 10px !important; opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); overflow: visible; }
#back-to-top i, #back-to-top span { border-color: #f2d588; color: #f2d588; }
.zalo-chat-widget { display: none !important; }

/* FOOTER */
.footer { 
    padding: 20px 0; /* Giảm độ cao khoảng trống trên dưới */
    border-top: 1px solid #332615; 
    display: flex; 
    flex-direction: row; /* Đổi thành hàng ngang */
    justify-content: center; /* Căn giữa cụm logo và text */
    align-items: center; /* Căn đều theo chiều dọc */
    gap: 30px; /* Tạo khoảng cách giữa logo và chữ */
    background: #050302; 
    position: relative; 
    z-index: 10; 
}
.footer .footer-logo img { 
    max-width: 140px; 
    margin-bottom: 0; /* Xóa khoảng trống thừa dưới logo */
    filter: grayscale(20%) drop-shadow(0 0 5px rgba(166,139,66,0.3)); 
}
.footer .copyright { 
    color: #888; 
    font-size: 13px; 
    line-height: 1.8; 
    margin: 0; 
    text-align: left; /* Chữ căn trái nhìn sẽ thuận mắt hơn khi đứng cạnh logo */
}

/* Tự động xếp dọc lại khi xem trên Màn hình điện thoại */
@media (max-width: 768px) {
    .footer {
        flex-direction: column;
        gap: 10px;
        padding: 25px 0;
    }
    .footer .copyright {
        text-align: center;
    }
}

/* ========================================================================
   3. MODAL ĐĂNG KÝ VÀ GIFTCODE
   ======================================================================== */
.reg-modal { display: none; position: fixed; z-index: 1000000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); backdrop-filter: blur(5px); }
.reg-modal-content { position: relative; margin: auto; top: 50%; transform: translateY(-50%); width: 460px; height: 750px; border-radius: 8px; overflow: hidden; animation: regPopAnim 0.3s ease-out; background: #0b0705; border: 2px solid #a68b42; box-shadow: 0 0 30px rgba(166,139,66,0.3); }
#regIframe, #giftIframe { width: 100%; height: 100%; border: none; background: transparent; }
.reg-modal .reg-close { position: absolute; right: 15px; top: 10px; color: #f2d588; font-size: 32px; cursor: pointer; z-index: 11; transition: 0.2s; font-family: Arial; text-shadow: 0 0 5px #000; }
.reg-modal .reg-close:hover { color: #fff; transform: scale(1.1); }
@keyframes regPopAnim { from {opacity: 0; transform: translateY(-45%) scale(0.95);} to {opacity: 1; transform: translateY(-50%) scale(1);} }
@media (max-width: 500px) { .reg-modal-content { width: 95%; height: 90vh; } }


/* ========================================================================
   4. POPUP THÔNG TIN EVENT & BẢNG XẾP HẠNG (GOLDEN PREMIUM)
   ======================================================================== */
.info-modal { display: none; position: fixed; z-index: 100000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); }
.info-modal-content { 
    position: relative; margin: auto; top: 50%; transform: translateY(-50%); 
    width: 95%; max-width: 950px; height: 82vh; border-radius: 8px; padding: 20px; overflow-y: auto; 
    background: linear-gradient(180deg, #110b08 0%, #000000 100%); 
    border: 2px solid #a68b42; box-shadow: inset 0 0 20px rgba(166, 139, 66, 0.1), 0 0 30px rgba(0,0,0,1); 
    animation: regPopAnim 0.3s ease-out;
}
.info-modal-content .reg-close { position: absolute; right: 20px; top: 10px; color: #a68b42; font-size: 35px; cursor: pointer; transition: 0.2s; z-index: 100; font-family: Arial; }
.info-modal-content .reg-close:hover { color: #f2d588; transform: rotate(90deg); text-shadow: 0 0 10px #f2d588; }

/* Menu Tabs */
.info-modal-content .buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px auto 25px; padding-bottom: 20px; border-bottom: 1px solid rgba(166, 139, 66, 0.3); }
.btn-tab-popup {
    display: inline-flex; width: auto; min-width: 170px; height: 42px; padding: 0 20px; align-items: center; justify-content: center; 
    background: rgba(166, 139, 66, 0.1); border: 1px solid rgba(166, 139, 66, 0.4); border-radius: 4px; 
    color: #d1cbbd; font-size: 13px; font-weight: bold; text-transform: uppercase; transition: all 0.3s ease; cursor: pointer;
}
.btn-tab-popup:hover, .btn-tab-popup.active { 
    background: linear-gradient(to bottom, #f2d588, #a68b42); color: #000; border-color: #f2d588; box-shadow: 0 0 15px rgba(242, 213, 136, 0.5); transform: translateY(-2px); 
}

/* Xử lý Tab */
.info-modal-content .event-tab { display: none !important; animation: fadeInTab 0.3s ease; }
.info-modal-content .event-tab.active { display: block !important; }
@keyframes fadeInTab { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Tiêu đề Sự kiện */
.info-modal-content .notice, .info-modal-content .time {
    color: #f2d588; font-size: 16px; font-weight: bold; text-transform: uppercase; text-align: center;
    text-shadow: 0 0 10px rgba(242, 213, 136, 0.3); margin-bottom: 20px;
}
.info-modal-content .time { font-size: 14px; color: #a68b42; font-weight: normal; margin-bottom: 30px;}
.info-modal-content .time strong { color: #f2d588; font-weight: bold; }

/* Bảng Xếp Hạng & Sự Kiện */
.info-modal-content table {
    width: 100%; border-collapse: collapse; border-radius: 5px; overflow: hidden;
    background: rgba(0, 0, 0, 0.4); border: 1px solid #a68b42; margin-bottom: 25px;
}
.info-modal-content table thead tr, .info-modal-content table thead th, .info-modal-content table thead td {
    background: linear-gradient(90deg, #2a1f18, #3b2c1f, #2a1f18);
    color: #f2d588; font-weight: bold; padding: 12px 10px; border: 1px solid #a68b42;
    text-align: center; text-transform: uppercase; font-size: 13px; letter-spacing: 0.5px;
}
.info-modal-content table tbody tr { border-bottom: 1px dashed rgba(166, 139, 66, 0.3); transition: background 0.2s; }
.info-modal-content table tbody tr:nth-child(even) { background: rgba(242, 213, 136, 0.02); }
.info-modal-content table tbody tr:hover { background: rgba(166, 139, 66, 0.15); }
.info-modal-content table tbody td {
    padding: 10px 8px; border: 1px solid rgba(166, 139, 66, 0.1); color: #d1cbbd; font-size: 13px; text-align: center; vertical-align: middle;
}
.info-modal-content table img { max-height: 40px; vertical-align: middle; filter: drop-shadow(0 0 3px rgba(255,255,255,0.2)); }

/* Fix thẻ HTML lộn xộn */
.info-modal-content font, .info-modal-content b, .info-modal-content strong { color: inherit; }
.info-modal-content table tbody td font, .info-modal-content table tbody td strong { color: #f2d588; }
.info-modal-content table tbody td span { color: #e74c3c; font-weight: bold;}

/* Danh sách list */
.info-modal-content ul.list-notice {
    background: rgba(0,0,0,0.3); border: 1px solid rgba(166, 139, 66, 0.3); border-radius: 4px;
    padding: 20px 20px 20px 35px; margin-bottom: 30px;
}
.info-modal-content ul.list-notice li {
    font-size: 13px; color: #d1cbbd; margin-bottom: 10px; position: relative; line-height: 1.6;
}
.info-modal-content ul.list-notice li::before {
    content: '❖'; color: #a68b42; position: absolute; left: -20px; top: 0; font-size: 12px;
}

/* Chia 2 cột Tab 1 */
.info-tab-1 { display: flex; flex-wrap: wrap; gap: 20px; }
.sv-info-left, .sv-info-right { flex: 1; min-width: 300px; }
/* ========================================================================
   FIX GIAO DIỆN CHO MÀN HÌNH FULL HD (1920x1080) TRỞ XUỐNG
   ======================================================================== */
@media screen and (max-height: 1080px), screen and (max-width: 1920px) {
    /* 1. Ép chiều cao trang vừa đúng 1 màn hình, hình nền tự động co giãn (Scale) */
    .page-1 { 
        min-height: 100vh !important; 
        height: 100vh;
        background-size: cover !important; 
        background-position: center top !important; 
    }
    
    /* Đẩy con chuột nháy nháy xuống sát đáy màn hình thay vì fix cứng 868px */
    .icon-mouse {
        top: auto !important;
        bottom: 40px !important;
    }

    /* 2. THU NHỎ THANH MENU BÊN TRÁI */
    .side-nav-left {
        top: 50% !important; 
        padding: 15px 12px !important;
        gap: 8px !important; /* Giảm khoảng cách các nút */
    }
    
    /* Thu nhỏ Logo */
    .sidebar-logo img {
        width: 160px !important;
        margin-top: 5px !important;
    }
    
    /* Thu nhỏ Icon tròn */
    .side-nav-left .side-item i {
        width: 32px !important; 
        height: 32px !important;
        font-size: 13px !important;
    }
    
    /* Thu nhỏ hộp chữ (span) bên trong nút */
    .side-nav-left .side-item span {
        font-size: 11px !important;
        padding: 8px 10px 8px 20px !important;
        width: 210px !important; /* Rút ngắn chiều dài nút */
    }
}
/* KHÓA CHẾT VỊ TRÍ THANH MENU BÊN TRÁI (NEO CỐ ĐỊNH VÀO MÉP TRÊN) */
.side-nav-left {
    top: 0px !important; /* Khóa cứng cách mép trên trình duyệt đúng 30px (có thể tăng giảm tùy ý) */
    transform: none !important; /* Tắt bỏ tính năng tự động căn giữa để chống di chuyển */
    bottom: auto !important; /* Hủy neo dưới */
    height: auto !important; /* Bắt buộc ôm sát nội dung */
    justify-content: flex-start !important; /* Dồn nội dung lên trên, không cho giãn */
    gap: 10px !important; /* Khóa khoảng cách các nút */
    padding: 20px 15px !important; /* Khóa độ dày viền */
}

/* Các đoạn khóa Logo và Nút bấm giữ nguyên như cũ */
.side-nav-left .sidebar-logo {
    margin: 0 0 10px 0 !important;
    display: flex !important;
    justify-content: center !important;
    flex: 0 0 auto !important; 
}

.side-nav-left .sidebar-logo img {
    width: 155px !important; 
    height: auto !important;
    margin-top: 0 !important;
}

.side-nav-left .side-item {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}






















/* ảnh thay cho intro */
.bg-video-box img{
width:100%;
height:100%;
object-fit:cover;
}



.logo-fire{
    width:130px !important;
    height:auto !important;
    display:block;
    margin:0 auto 8px;
    animation: fire 1.5s infinite alternate;
}

/* hiệu ứng lửa */
@keyframes fire{
    0%{
        filter: drop-shadow(0 0 5px #ff3300)
                drop-shadow(0 0 10px #ff6600)
                drop-shadow(0 0 20px #ffcc00);
    }
    100%{
        filter: drop-shadow(0 0 15px #ff3300)
                drop-shadow(0 0 30px #ff6600)
                drop-shadow(0 0 50px #ffff00);
    }
}

/* hover */
.logo-fire:hover{
    transform: scale(1.15);
}

.qr-box{
text-align:center;
background:#111;
padding:0px;
border-radius:8px;
color:white;
width:160px;
margin:auto;
box-shadow:0 0 60px gold;
border:1px solid gold;
}

.qr-box h3{
margin:5px 0 8px;
font-size:28px;
color:gold;
}

input{
padding:5px;
width:128px;
font-size:12px;
border-radius:4px;
border:none;
text-align:center;
margin-bottom:5px;
}

button{
padding:4px 10px;
font-size:12px;
background:orange;
border:none;
border-radius:4px;
cursor:pointer;
}

button:hover{
background:gold;
}

#page-2-tab-2 .event-group{
            margin-bottom:30px;
            padding:18px;
            border-radius:14px;
            background:rgba(0,0,0,0.35);
            border:1px solid rgba(255,215,0,0.25);
            box-shadow:0 0 18px rgba(255,215,0,0.08);
        }

        #page-2-tab-2 .event-group-title{
            font-size:24px;
            font-weight:bold;
            color:#FFD700;
            margin-bottom:14px;
            text-align:center;
            text-transform:uppercase;
            text-shadow:0 0 10px rgba(255,215,0,0.35);
        }

        #page-2-tab-2 .event-sub-note{
            text-align:center;
            color:#9fffcf;
            margin-bottom:18px;
            font-size:14px;
        }

        #page-2-tab-2 .sub-sv-info.event-table{
            width:100%;
            border-collapse:collapse;
            margin-bottom:10px;
        }

        #page-2-tab-2 .sub-sv-info.event-table th,
        #page-2-tab-2 .sub-sv-info.event-table td{
            padding:12px 10px;
            text-align:center;
            border-bottom:1px solid rgba(255,255,255,0.08);
        }

        #page-2-tab-2 .sub-sv-info.event-table th{
            background:rgba(255,215,0,0.12);
            color:#FFD700;
            font-size:15px;
        }

        #page-2-tab-2 .sub-sv-info.event-table tr:hover{
            background:rgba(255,255,255,0.04);
        }

        #page-2-tab-2 .event-name{
            color:#00ff7f;
            font-weight:bold;
        }

        #page-2-tab-2 .event-sub{
            color:#ff7b7b;
            font-weight:bold;
        }

        #page-2-tab-2 .event-time{
            color:#FFD700;
            font-weight:bold;
        }

        #page-2-tab-2 .countdown span{
            font-weight:bold;
            font-size:15px;
            display:inline-block;
            min-width:140px;
        }

        #page-2-tab-2 .event-highlight{
            color:#00ffcc;
        }

        #page-2-tab-2 .event-bubble{
            position:fixed;
            right:20px;
            bottom:20px;
            width:320px;
            max-width:calc(100vw - 30px);
            padding:16px 18px;
            border-radius:16px;
            background:linear-gradient(180deg, rgba(20,24,35,0.96), rgba(10,14,24,0.96));
            border:1px solid rgba(255,215,0,0.45);
            box-shadow:0 0 22px rgba(255,215,0,0.18);
            color:#fff;
            z-index:99999;
            opacity:0;
            visibility:hidden;
            transform:translateY(20px) scale(0.96);
            transition:all 0.35s ease;
            pointer-events:none;
        }

        #page-2-tab-2 .event-bubble.show{
            opacity:1;
            visibility:visible;
            transform:translateY(0) scale(1);
            animation:eventBubblePulse 1.2s infinite alternate;
        }

        #page-2-tab-2 .event-bubble-title{
            font-size:14px;
            color:#ffd700;
            font-weight:700;
            text-transform:uppercase;
            margin-bottom:8px;
            letter-spacing:1px;
        }

        #page-2-tab-2 .event-bubble-name{
            font-size:20px;
            font-weight:bold;
            color:#00ff99;
            margin-bottom:6px;
            line-height:1.35;
        }

        #page-2-tab-2 .event-bubble-time{
            font-size:16px;
            color:#ffffff;
            font-weight:700;
        }

        @keyframes eventBubblePulse{
            from{
                box-shadow:0 0 16px rgba(255,215,0,0.18);
            }
            to{
                box-shadow:0 0 28px rgba(255,80,80,0.28);
            }
        }

        @media (max-width:900px){
            #page-2-tab-2 .sub-sv-info.event-table{
                display:block;
                overflow-x:auto;
                white-space:nowrap;
            }

            #page-2-tab-2 .event-group-title{
                font-size:20px;
            }
        }

        @media (max-width:640px){
            #page-2-tab-2 .event-bubble{
                left:12px;
                right:12px;
                bottom:12px;
                width:auto;
            }

            #page-2-tab-2 .event-bubble-name{
                font-size:18px;
            }

            #page-2-tab-2 .event-bubble-time{
                font-size:15px;
            }
        }

.title{
font-size:40px;
text-align:center;
color:gold;
font-weight:bold;
letter-spacing:5px;
}

#timer{
display:flex;
gap:10px;
font-size:30px;
font-weight:bold;
justify-content:center;
text-align:center;
}

#timer div{
background:#F6FFA1;     /* khung màu tím */
color:red;           /* số đồng hồ màu đỏ */
padding:10px 20px;
border-radius:8px;
line-height:1.7;      /* số và chữ gần nhau */

}

#timer span{
display:block;
font-size:20px;
color:#00ff00;       /* chữ Ngày Giờ Phút Giây màu xanh */
line-height:1;        /* giảm khoảng cách dòng */

}

.reg-modal { display: none; position: fixed; z-index: 1000000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); }
        .reg-modal-content { position: relative; margin: auto; top: 50%; transform: translateY(-50%); width: 460px; height: 750px; border-radius: 8px; overflow: hidden; animation: regPopAnim 0.3s ease-out; background:#000; border: 2px solid #a68b42; box-shadow: 0 0 30px rgba(166,139,66,0.3); }
        #regIframe, #giftIframe { width: 100%; height: 100%; border: none; background: transparent; }
        .reg-modal .reg-close { position: absolute; right: 15px; top: 10px; color: #f2d588; font-size: 32px; cursor: pointer; z-index: 11; transition: 0.2s; font-family: Arial; }
        .reg-modal .reg-close:hover { color: #fff; transform: scale(1.1); }
        @keyframes regPopAnim { from {opacity: 0; transform: translateY(-45%) scale(0.95);} to {opacity: 1; transform: translateY(-50%) scale(1);} }
        @media (max-width: 500px) { .reg-modal-content { width: 95%; height: 90vh; } }
		
		.page-1 {
    position: relative;
    min-height: 100vh;
}

.bg-video-box {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.bg-video-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.hero-countdown {
    position: absolute;
    left: 50%;
    bottom: 108px;
    transform: translateX(-50%);
    width: min(980px, calc(100% - 260px));
    z-index: 30;
    text-align: center;
    padding: 18px 20px 14px;
    background: rgba(0, 0, 0, 0.78);
    border: 1px solid rgba(255, 196, 0, 0.18);
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,.45);
}

.hero-countdown .title {
    font-size: 40px;
    text-align: center;
    color: gold;
    font-weight: bold;
    letter-spacing: 5px;
    margin-bottom: 16px;
}

.hero-countdown-line {
    font-size: 20px;
    line-height: 1.5;
    margin: 12px 0 0;
    color: red;
}

#timer {
    display: flex;
    gap: 10px;
    font-size: 30px;
    font-weight: bold;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
}

#timer div {
    background: #F6FFA1;
    color: red;
    padding: 10px 20px;
    border-radius: 8px;
    line-height: 1.7;
    min-width: 92px;
}

#timer span {
    display: block;
    font-size: 20px;
    color: #00ff00;
    line-height: 1;
}

.footer .copyright .title,
.footer #timer {
    display: none;
}
.side-notice-box{
    margin-top:16px;
    padding:14px 12px;
    border:1px solid #d4a017;
    border-radius:16px;
    background:rgba(10,10,10,.92);
    box-shadow:0 0 18px rgba(255,200,0,.18);
    text-align:left;
}

.side-notice-box h3{
    margin:0 0 12px;
    text-align:center;
    font-size:15px;
    font-weight:800;
    color:#ffd700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.notice-line{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    margin-bottom:8px;
    border:1px solid rgba(255,215,0,.22);
    border-radius:10px;
    background:rgba(255,215,0,.05);
    font-size:13px;
    color:#f3e7c2;
}

.notice-line span{
    color:#d8c28a;
    font-weight:700;
}

.notice-line b{
    color:#ffd700;
    font-weight:800;
    text-transform:uppercase;
}

.notice-divider{
    height:1px;
    margin:12px 0;
    background:linear-gradient(to right, transparent, rgba(255,215,0,.65), transparent);
}

.notice-features{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap:8px;
}

.notice-features li{
    position:relative;
    padding:8px 10px 8px 28px;
    border-radius:10px;
    background:rgba(255,255,255,.03);
    color:#fff2c7;
    font-size:13px;
    font-weight:700;
}

.notice-features li::before{
    content:"✦";
    position:absolute;
    left:10px;
    top:50%;
    transform:translateY(-50%);
    color:#ffd700;
    font-size:12px;
}

/* ===== Split countdown hero ===== */
.hero-countdown.split-countdown{
    width:min(920px, calc(100% - 300px));
    background:transparent;
    border:none;
    box-shadow:none;
    padding:0;
    bottom:245px;
}

.countdown-headline{
    margin-bottom:22px;
    text-align:center;
    font-size:22px;
    font-weight:800;
    color:#2cff4f;
    text-shadow:0 0 14px rgba(44,255,79,.28);
}

.countdown-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(280px, 1fr));
    gap:38px;
    align-items:stretch;
}

.countdown-card{
    padding:26px 22px 24px;
    border-radius:16px;
    background:rgba(0,0,0,.78);
    border:2px solid rgba(212,160,23,.85);
    box-shadow:0 0 18px rgba(212,160,23,.25), inset 0 0 18px rgba(0,0,0,.35);
}

.countdown-card-title{
    margin-bottom:18px;
    color:#ecd792;
    font-size:18px;
    font-weight:800;
    letter-spacing:2px;
    text-align:center;
}

.countdown-timer{
    display:flex;
    justify-content:center;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:8px;
    text-align:center;
}

.countdown-timer .time-box{
    min-width:auto;
    padding:0;
    background:transparent;
    border:none;
    border-radius:0;
    box-shadow:none;
    color:#19ffe1;
    font-size:20px;
    font-weight:900;
    line-height:1.1;
    text-shadow:0 0 12px rgba(25,255,225,.65);
}

.countdown-timer .time-box .num{
    font-size:30px;
    margin-right:4px;
}

.countdown-timer .time-box .label{
    font-size:14px;
    color:#ffe8a3;
    text-shadow:none;
}

.countdown-timer .time-sep{
    color:#8adfd6;
    font-size:24px;
    font-weight:700;
    line-height:1;
    opacity:.8;
}

@media (max-width: 1024px){
    .hero-countdown.split-countdown{
        width:min(860px, calc(100% - 40px));
        bottom:56px;
    }
}

@media (max-width: 768px){
    .hero-countdown.split-countdown{
        width:calc(100% - 24px);
        bottom:32px;
    }

    .countdown-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .countdown-headline{
        font-size:18px;
        line-height:1.4;
        margin-bottom:16px;
    }

    .countdown-card{
        padding:20px 14px 18px;
    }

    .countdown-card-title{
        font-size:16px;
        margin-bottom:14px;
    }

    .countdown-timer .time-box .num{
        font-size:26px;
    }

    .countdown-timer .time-box .label{
        font-size:13px;
    }
}
.footer{
    background: transparent !important;
    border-top: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: fixed !important;
    left:   22px !important;
	right: auto !important;
    bottom: 18px  !important;
    width: auto !important;
    display: block !important;
    z-index: 9999 !important;
    pointer-events: none !important;
}

.footer .footer-logo,
.footer #timer{
    display: none !important;
}

.footer .copyright{
left: 24px !important;
right: auto !important;
text-align: left !important;
}

.footer .copyright p{
    margin: 0 !important;
    line-height: 1.35 !important;
}

.footer .copyright p:first-of-type{
    margin-bottom: 4px !important;
}

.footer .copyright span{
    color: #ff2a2a !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
    text-shadow:
        0 1px 0 rgba(0,0,0,0.95),
        0 0 6px rgba(0,0,0,0.9),
        0 0 14px rgba(0,0,0,0.75) !important;
}

@media (max-width: 768px){
    .footer{
        right: 5px !important;
        bottom: 5px !important;
        left: 5px !important;
    }

    .footer .copyright{
        text-align: center !important;
    }

    .footer .copyright span{
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1.4 !important;
    }
}
@keyframes menuIconPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(242, 213, 136, 0);
    }
    50% {
        transform: scale(1.12);
        box-shadow: 0 0 14px rgba(242, 213, 136, 0.35);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(242, 213, 136, 0);
    }
}

/* ===== FINAL FIX: menu ngang đều, icon pulse không phá khung ===== */
.side-nav-left .side-item{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    margin:0 !important;
    flex:0 0 auto !important;
}

.side-nav-left .side-item i{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    flex-shrink:0 !important;
    position:relative !important;
    overflow:visible !important;
}

.side-nav-left .side-item span{
    flex:1 !important;
    width:auto !important;
    min-height:42px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 12px 0 25px !important;
    margin-left:-20px !important;
    text-align:center !important;
    white-space:nowrap !important;
}

.side-nav-left .side-item i::after{
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:50%;
    border:2px solid rgba(242, 213, 136, 0.55);
    opacity:0;
    transform:scale(0.9);
    pointer-events:none;
}

.side-nav-left .side-item:hover i::after,
.side-nav-left .side-item.active i::after{
    animation:menuIconRing 1.5s ease-in-out infinite;
}

@keyframes menuIconRing{
    0%{opacity:0;transform:scale(0.9);}
    35%{opacity:0.9;transform:scale(1.08);}
    100%{opacity:0;transform:scale(1.28);}
}


/* ===== FIT SIDEBAR FULL VIEWPORT - FINAL ===== */
.side-nav-left{
    top: 8px !important;
    transform: none !important;
    bottom: auto !important;
    max-height: calc(100vh - 16px) !important;
    overflow-y: auto !important;
    justify-content: flex-start !important;
    padding: 12px 12px !important;
    gap: 8px !important;
}

.side-nav-left .sidebar-logo{
    margin: 0 0 8px 0 !important;
    display: flex !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
}

.side-nav-left .sidebar-logo img,
.logo-fire{
    width: 118px !important;
    max-width: 118px !important;
    height: auto !important;
    margin: 0 auto 6px !important;
}

.side-nav-left .side-item{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    margin:0 !important;
    flex:0 0 auto !important;
}

.side-nav-left .side-item i{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    font-size:13px !important;
    flex-shrink:0 !important;
    position:relative !important;
    overflow:visible !important;
}

.side-nav-left .side-item span{
    flex:1 !important;
    width:auto !important;
    min-height:34px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 10px 0 20px !important;
    margin-left:-16px !important;
    text-align:center !important;
    white-space:nowrap !important;
    font-size:11px !important;
}

.side-notice-box{
    margin-top:10px !important;
    padding:10px 10px !important;
    border-radius:14px !important;
}

.side-notice-box h3{
    font-size:13px !important;
    margin:0 0 10px !important;
}

.notice-line{
    font-size:11px !important;
    padding:6px 8px !important;
    margin-bottom:6px !important;
}

.notice-features{
    gap:6px !important;
}

.notice-features li{
    font-size:11px !important;
    padding:7px 8px 7px 24px !important;
}

@media (max-height: 920px){
    .side-nav-left{
        top: 6px !important;
        max-height: calc(100vh - 12px) !important;
        padding: 10px 10px !important;
        gap: 6px !important;
    }

    .side-nav-left .sidebar-logo img,
    .logo-fire{
        width: 104px !important;
        max-width: 104px !important;
    }

    .side-nav-left .side-item i{
        width:30px !important;
        height:30px !important;
        min-width:30px !important;
        font-size:12px !important;
    }

    .side-nav-left .side-item span{
        min-height:30px !important;
        font-size:10px !important;
        padding:0 8px 0 18px !important;
    }

    .side-notice-box{
        padding:8px 8px !important;
        border-radius:12px !important;
    }

    .side-notice-box h3{
        font-size:12px !important;
        margin-bottom:8px !important;
    }

    .notice-line{
        font-size:10px !important;
        padding:5px 7px !important;
        margin-bottom:5px !important;
    }

    .notice-features li{
        font-size:10px !important;
        padding:6px 7px 6px 22px !important;
    }
}
/* ===== TITLE COUNTDOWN: đổi màu + to hơn + nhấp nháy kiểu led ===== */
.countdown-card h3,
.countdown-box h3,
.countdown-title,
.split-countdown .countdown-card-title,
.split-countdown .countdown-box-title,
.split-countdown .box-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #ffda57 !important;
    text-shadow:
        0 0 4px rgba(255, 218, 87, 0.75),
        0 0 8px rgba(255, 218, 87, 0.55),
        0 0 14px rgba(255, 179, 0, 0.45);
    animation: ledBlinkTitle 1.2s ease-in-out infinite;
}

/* nếu tiêu đề của bạn đang là thẻ riêng trong box */
.countdown-grid > div h3,
.countdown-grid > div .title,
.countdown-grid > div strong:first-child {
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    color: #ffda57 !important;
    text-shadow:
        0 0 4px rgba(255, 218, 87, 0.75),
        0 0 8px rgba(255, 218, 87, 0.55),
        0 0 14px rgba(255, 179, 0, 0.45);
    animation: ledBlinkTitle 1.2s ease-in-out infinite;
}

@keyframes ledBlinkTitle{
    0%{
        opacity: 1;
        filter: brightness(1);
        text-shadow:
            0 0 4px rgba(255, 218, 87, 0.75),
            0 0 8px rgba(255, 218, 87, 0.55),
            0 0 14px rgba(255, 179, 0, 0.45);
    }
    50%{
        opacity: 0.7;
        filter: brightness(1.25);
        text-shadow:
            0 0 6px rgba(255, 255, 180, 0.95),
            0 0 12px rgba(255, 215, 0, 0.75),
            0 0 22px rgba(255, 170, 0, 0.65);
    }
    100%{
        opacity: 1;
        filter: brightness(1);
        text-shadow:
            0 0 4px rgba(255, 218, 87, 0.75),
            0 0 8px rgba(255, 218, 87, 0.55),
            0 0 14px rgba(255, 179, 0, 0.45);
    }
}
/* ===== ALPHA TEST / OPEN BETA: led 7 sắc cầu vồng ===== */
.countdown-card h3,
.countdown-box h3,
.countdown-title,
.split-countdown .countdown-card-title,
.split-countdown .countdown-box-title,
.split-countdown .box-title,
.countdown-grid > div h3,
.countdown-grid > div .title,
.countdown-grid > div strong:first-child{
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    animation: rainbowLedText 2.2s linear infinite !important;
}

@keyframes rainbowLedText{
    0%{
        color:#ff2b2b;
        text-shadow:0 0 4px #ff2b2b, 0 0 10px #ff2b2b, 0 0 18px rgba(255,43,43,.75);
    }
    14%{
        color:#ff7a00;
        text-shadow:0 0 4px #ff7a00, 0 0 10px #ff7a00, 0 0 18px rgba(255,122,0,.75);
    }
    28%{
        color:#ffe600;
        text-shadow:0 0 4px #ffe600, 0 0 10px #ffe600, 0 0 18px rgba(255,230,0,.75);
    }
    42%{
        color:#32ff5c;
        text-shadow:0 0 4px #32ff5c, 0 0 10px #32ff5c, 0 0 18px rgba(50,255,92,.75);
    }
    57%{
        color:#27d8ff;
        text-shadow:0 0 4px #27d8ff, 0 0 10px #27d8ff, 0 0 18px rgba(39,216,255,.75);
    }
    71%{
        color:#2f6bff;
        text-shadow:0 0 4px #2f6bff, 0 0 10px #2f6bff, 0 0 18px rgba(47,107,255,.75);
    }
    85%{
        color:#c44dff;
        text-shadow:0 0 4px #c44dff, 0 0 10px #c44dff, 0 0 18px rgba(196,77,255,.75);
    }
    100%{
        color:#ff2b2b;
        text-shadow:0 0 4px #ff2b2b, 0 0 10px #ff2b2b, 0 0 18px rgba(255,43,43,.75);
    }
}