/* ========================================================================
   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: none; 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 { display: flex; align-items: center; text-decoration: none; transition: all 0.3s ease; }
.side-nav-left .side-item i {
    width: 42px; height: 42px; border-radius: 50%; display: flex; justify-content: center; align-items: center; 
    font-size: 16px; position: relative; z-index: 2; flex-shrink: 0;
    background-color: #110b08; color: #f2d588; border: 2px solid #a68b42; transition: all 0.3s ease;
}
.side-nav-left .side-item span {
    font-family: 'Inter', "Montserrat", sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 10px 10px 10px 25px; border-radius: 0 20px 20px 0; margin-left: -20px; 
    position: relative; z-index: 1; width: 175px; text-align: center; box-sizing: border-box;
    background-color: #110b08; color: #d1cbbd; border: 1px solid #594821; border-left: none; transition: all 0.3s ease;
}

/* 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: 150px !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 {
    margin: 0 !important;
    flex: 0 0 auto !important; 
}






















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