/* --- 1. RESET CSS & BIẾN MÀU --- */
:root {
    --primary: #870016;    /* Đỏ đô */
    --secondary: #FFF7E0;  /* Kem */
    --accent: #0E99A6;     /* Xanh cổ vịt */
    --dark: #111;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    /* Đổi sang font Montserrat cao cấp, hỗ trợ Full Tiếng Việt */
    font-family: 'Mulish', sans-serif; 
    background-color: var(--secondary); 
    color: #333; 
    overflow-x: hidden; 
    
    /* 2 DÒNG THẦN THÁNH NÀY GIÚP FONT TRÊN WINDOWS MƯỢT NHƯ TRÊN MAC */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { text-decoration: none; }
ul { list-style: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* =========================================
   TIÊU ĐỀ TRANG CHUNG (PAGE TITLE CHUẨN VIP)
   ========================================= */

.page-title-wrapper {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

/* Nhãn nhỏ trên đỉnh (Bắt chước các section trước) */
.page-title-wrapper .badge-glow {
    background: rgba(135, 0, 22, 0.08);
    color: var(--primary);
    padding: 6px 20px;
    border-radius: 50px;
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 0.8rem;
    display: inline-block;
    margin-bottom: 15px;
    text-transform: uppercase;
}

/* Tiêu đề chính */
.page-title {
    color: var(--dark); /* Đổi màu gốc thành Đen quyền lực cho sang */
    font-size: clamp(2.2rem, 5vw, 3.5rem); /* Nới to ra một chút để có sức nặng */
    font-weight: 900;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.2;
    font-family: 'Montserrat', sans-serif !important;
}

/* Phần chữ nhấn mạnh màu Đỏ đô có hào quang */
.page-title .text-glow {
    color: var(--primary);
    text-shadow: 0 5px 20px rgba(135, 0, 22, 0.2); 
}

/* Dòng mô tả (Subtitle) */
.page-subtitle {
    color: #666;
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    font-weight: 500;
}

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
    .page-title {
        font-size: 2rem; /* Thu nhỏ tiêu đề trên điện thoại */
        letter-spacing: 1px;
    }
    .page-subtitle {
        font-size: 0.95rem;
        padding: 0 15px;
    }
    .page-title-wrapper {
        margin-bottom: 40px;
    }
}
/* =========================================
   2. HEADER & MENU (BẢN CHUẨN - NỀN TRẮNG KÍNH MỜ)
   ========================================= */

/* --- 2.1 KHUNG HEADER CHÍNH --- */
header {
    background-color: #ffffff; /* Mặc định ở đầu trang: Nền trắng 100% */
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%;
    z-index: 9999;
    box-shadow: none; /* Phẳng hoàn toàn khi ở đỉnh trang */
    transition: all 0.4s ease-in-out;
}

/* Kích hoạt kính mờ khi cuộn chuột (Được JS thêm class .scrolled) */
header.scrolled {
    background-color: rgba(255, 255, 255, 0.85); /* Trắng mờ 85% */
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); /* Hỗ trợ iPhone/Safari */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Đổ bóng tách biệt nội dung */
}

/* Ẩn header khi cuộn xuống nhanh */
header.hidden { 
    top: -100px; 
}

.header-container { 
    height: 80px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

/* --- 2.2 LOGO HÌNH ẢNH --- */
.logo { display: flex; align-items: center; }
.logo-img {
    height: 50px; 
    width: auto;  
    object-fit: contain; 
    transition: transform 0.3s ease; 
}
.logo a:hover .logo-img { transform: scale(1.05); }

/* --- 2.3 MENU CẤP 1 (DESKTOP) --- */
.nav-menu > ul { display: flex; align-items: center; }
.nav-menu > ul > li { margin-left: 30px; position: relative; } /* Neo cho menu con */

.nav-menu a { 
    color: #333333; /* Chữ tối màu trên nền trắng */
    font-weight: 600; 
    font-size: 0.95rem;
    text-transform: uppercase; 
    transition: 0.3s; 
    display: block; 
    padding: 10px 0; 
}
.nav-menu a:hover,
.nav-menu a.active { 
    color: var(--primary); /* Trỏ chuột đổi sang đỏ đô */
}

/* --- 2.4 MENU CON (SUBMENU) --- */
.submenu {
    display: none; 
    position: absolute; 
    top: 100%; 
    left: 0;
    background-color: #ffffff; /* Nền trắng mặc định */
    min-width: 220px; 
    border-radius: 0 0 6px 6px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    flex-direction: column; 
    text-align: left;
    border-top: 3px solid var(--primary); /* Vạch đỏ điểm nhấn */
    transition: background-color 0.4s ease-in-out, backdrop-filter 0.4s;
}

/* Submenu tự động thành kính mờ theo Header khi cuộn trang */
header.scrolled .submenu {
    background-color: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px); 
}

.dropdown:hover .submenu { display: block; }

.submenu li { margin: 0 !important; display: block; width: 100%; }

.submenu a { 
    color: #555 !important; 
    padding: 14px 20px; 
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); 
    white-space: nowrap; 
    text-transform: none; 
    font-weight: 500;
    transition: all 0.3s ease;
}

.submenu a:hover { 
    background-color: rgba(135, 0, 22, 0.05); /* Hover nền đỏ siêu nhạt */
    color: var(--primary) !important; 
    padding-left: 25px; /* Chữ trượt sang phải */
}

/* --- 2.5 NÚT HAMBURGER (MENU MOBILE) --- */
.menu-toggle { display: none; cursor: pointer; }
.bar { 
    display: block; 
    width: 25px; 
    height: 3px; 
    background-color: var(--primary); /* Màu đỏ đô để nổi trên Header trắng */
    margin: 5px auto; 
    transition: 0.3s;
}
.menu-toggle:hover .bar { background-color: #333333; }

/* --- 2.6 GIAO DIỆN ĐIỆN THOẠI (MOBILE RESPONSIVE) --- */
@media (max-width: 768px) {
    .logo-img { height: 40px; }
    .header-container { height: 70px; }
    .menu-toggle { display: block; }
    
    /* Khung menu thả xuống trên điện thoại */
    .nav-menu {
        position: fixed; 
        top: 70px; 
        left: -100%; 
        width: 100%; 
        background-color: #ffffff !important; /* Phủ nền trắng */
        text-align: center; 
        transition: 0.3s ease-in-out; 
        padding-bottom: 20px;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1); 
    }
    .nav-menu.active { left: 0; }
    
    .nav-menu > ul { flex-direction: column; }
    .nav-menu > ul > li { margin: 15px 0; width: 100%; margin-left: 0; }
    
    /* Chữ của menu trên điện thoại */
    .nav-menu a {
        color: #333333 !important; 
        font-size: 1.1rem;
        padding: 12px 0;
        display: block;
    }
    .nav-menu a:hover,
    .nav-menu a.active {
        color: var(--primary) !important; 
    }

    /* Menu con (Submenu) trên điện thoại */
    .submenu {
        position: static; 
        width: 100%;
        box-shadow: none;
        background-color: #f9f9f9 !important; /* Xám nhạt phân cách với menu cha */
        border-top: none;
        backdrop-filter: none; /* Tắt kính mờ cho máy yếu đỡ lag */
    }
    header.scrolled .submenu { background-color: #f9f9f9 !important; }

    .submenu a { 
        color: #555 !important; 
        padding-left: 0; 
        text-align: center;
        font-size: 1rem;
    }
    .submenu a:hover { 
        padding-left: 0; 
        background-color: transparent;
    }
}
/* =========================================
   FOOTER (LIGHT THEME - SÁNG SỦA, THANH LỊCH)
   ========================================= */
footer {
    background-color: var(--secondary); /* Dùng nền Kem nguyên bản cho ấm áp */
    color: var(--dark); /* Đổi toàn bộ chữ sang Đen */
    padding-top: 80px;
    margin-top: auto;
    font-family: 'Mulish', sans-serif !important;
    border-top: 1px solid rgba(135, 0, 22, 0.1); /* Viền đỏ đô siêu mờ phân cách với phần trên */
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 50px;
    padding-bottom: 50px;
}

/* Tiêu đề cột */
.footer-col h3 {
    color: var(--primary); /* Chữ Đỏ đô quyền lực */
    margin-bottom: 25px;
    font-size: 1.2rem;
    letter-spacing: 2px;
    font-weight: 900;
}

/* Chữ mô tả thông thường */
.footer-col p {
    color: #555; /* Xám đậm dễ đọc */
    line-height: 1.8;
    margin-bottom: 15px;
    font-size: 0.95rem;
    font-weight: 500;
}



/* Fix danh sách Link */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 15px;
}

.footer-links a {
    color: #555; /* Chữ xám đậm */
    text-decoration: none;
    transition: 0.3s ease;
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 600;
}

.footer-links a:hover {
    color: var(--accent); /* Hover ra Xanh cổ vịt */
    transform: translateX(8px); /* Trượt nhẹ sang phải */
}

/* Icon thông tin liên hệ */
.contact-col p {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.contact-col p i {
    color: var(--accent); /* Đổi icon liên hệ sang Xanh cổ vịt cho tươi sáng */
    font-size: 1.1rem;
    margin-top: 4px;
}

/* Nút Mạng xã hội */
.social-links {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.social-links a {
    width: 40px; 
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary); /* Icon Đỏ đô */
    background: #ffffff; /* Nền trắng tinh */
    border: 1px solid rgba(135, 0, 22, 0.2);
    border-radius: 50%; 
    font-size: 1rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-links a:hover {
    background: var(--primary); /* Hover biến thành nền Đỏ đô */
    color: white; /* Chữ trắng */
    border-color: var(--primary);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(135, 0, 22, 0.2);
}

/* Thanh Bản quyền (Bottom Bar) */
.footer-bottom {
    text-align: center;
    padding: 10px 0;
    font-size: 0.9rem;
    color: #666;
    background-color: #ffffff; /* Cho hẳn dải đáy bằng màu Trắng tinh */
    font-weight: 600;
    letter-spacing: 1px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}
/* =========================================
   3. HERO BANNER (FINAL - KHÔNG CẮT DÒNG TITLE)
   ========================================= */

/* --- 3.1 KHUNG HERO CHÍNH & NỀN --- */
.hero {
    height: 100vh; /* Tăng chiều cao full màn hình cho hoành tráng */
    min-height: 600px;
    background: url('/img/home/hero-banner.jpg') no-repeat center center/cover;
    position: relative;
    overflow: hidden; /* Ngăn hào quang tỏa ra làm xuất hiện thanh cuộn ngang */
    padding-top: 80px; /* Đẩy xuống tránh bị Header che */
}

/* Lớp phủ tối (Overlay) giữ nguyên */
.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); 
    z-index: 1;
}

/* Container chia bố cục Flex */
.hero-content-wrapper {
    position: relative; 
    z-index: 2; 
    display: flex;
    align-items: center;
    justify-content: space-between; /* Đẩy chữ sang trái, cờ sang phải */
    height: 100%;
}


/* --- 3.2 CỘT TRÁI: TEXT & BUTTON (ĐÃ NÂNG CẤP) --- */
.hero-text-col {
    flex: 1;
    text-align: left; /* Căn trái sang trọng */
    
    /* [CẬP NHẬT 1: Mở rộng max-width] 
       Tăng chiều ngang tối đa để cột trông đầy đủ và chữ có chỗ hiển thị */
    max-width: 750px; 
    
    color: var(--secondary);
    
    /* [CẬP NHẬT 2: Tăng khoảng cách] 
       Tăng padding để văn bản có thêm "không gian thở" */
    padding: 40px; 
}


.sub-title { 
    font-size: 1.25rem; 
    letter-spacing: 3px; 
    margin-bottom: 10px; 
    color: var(--accent);
}

.main-title { 
    font-size: 3.5rem; 
    font-weight: 900; 
    line-height: 1.1; 
    
    /* [CẬP NHẬT 4: Ép không xuống dòng] 
       Tùy chọn: Ép tiêu đề chính không bao giờ xuống dòng trên màn hình lớn. */
    white-space: nowrap; /* (Bật cái này nếu bạn tuyệt đối không muốn nó xuống dòng) */
    
    /* [CẬP NHẬT 5: Tăng khoảng cách thở cho h1] */
    margin-bottom: 25px; 
    
    text-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Bóng đổ cho chữ sắc nét */
}

.description { 
    font-size: 1.1rem; 
    
    /* [CẬP NHẬT 6: Tăng khoảng cách thở cho description] */
    margin-bottom: 40px; 
    
    opacity: 0.9;
}

/* Style nút bấm gốc của bạn giữ nguyên */
.hero-btn { 
    display: inline-block; 
    padding: 15px 40px; 
    background: var(--primary); 
    color: white; 
    border-radius: 50px; 
    font-weight: bold; 
    border: 2px solid var(--primary); 
    transition: 0.3s; 
}

.hero-btn:hover { 
    background: transparent; 
    color: var(--secondary); 
    border-color: var(--secondary); 
    transform: translateY(-2px);
}


/* --- 3.3 CỘT PHẢI: QUÂN TỐT BAY (Giữ nguyên hiệu ứng KV) --- */
.hero-pawn-col {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pawn-wrapper {
    position: relative;
    width: 100%;
    
    /* [CẬP NHẬT 7: Tăng kích thước KV lơ lửng] 
       Tăng max-width để quân cờ rõ và hoành tráng hơn */
    max-width: 420px; 
    
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Hào quang & Cấu hình bay gốc */
.pawn-floating-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    /* Hiệu ứng hào quang vàng */
    filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.6)) 
            drop-shadow(0 0 50px rgba(255, 215, 0, 0.3));
    /* Gọi hiệu ứng bay */
    animation: floatPawn 5s ease-in-out infinite alternate;
    will-change: transform;
}

/* Bóng đổ dưới sàn gốc */
.pawn-shadow {
    width: 200px;
    height: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    filter: blur(8px);
    margin-top: -15px;
    z-index: -1;
    /* Bóng to nhỏ theo nhịp bay của quân cờ */
    animation: shadowPawn 5s ease-in-out infinite alternate;
}

/* --- ANIMATION KEYFRAMES GỐC --- */
@keyframes floatPawn {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-25px) rotate(2deg); }
}

@keyframes shadowPawn {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(0.8); opacity: 0.2; }
}


/* --- 3.4 RESPONSIVE CHO ĐIỆN THOẠI (MOBILE FIX GỐC) --- */
@media (max-width: 992px) {
    .hero { height: auto; padding-bottom: 50px; }
    
    .hero-content-wrapper {
        flex-direction: column; /* Đổi về xếp dọc trên điện thoại */
        text-align: center;
        justify-content: center;
        padding-top: 120px;
    }
    
    .hero-text-col {
        text-align: center; /* Trả về căn giữa trên mobile */
        order: 2; /* Đẩy chữ xuống dưới */
        margin-top: 30px;
        max-width: 100%; /* Tận dụng tối đa 100% chiều ngang trên điện thoại */
        padding: 20px 10px; /* Ép lề hai bên nhỏ lại để chữ có thêm diện tích hiển thị */
        overflow: hidden; /* Chống thanh cuộn ngang mọc ra nếu chữ lỡ tràn ra mép */
    }
    
    /* Bỏ nhãn THE CONCEPT trên mobile cho đỡ rối */
    .sub-title::before { content: none; }
    
    .hero-pawn-col {
        order: 1; /* Đưa quân cờ lên trên */
        width: 100%;
    }
    
    .pawn-wrapper {
        max-width: 250px; /* Thu nhỏ quân cờ một chút cho cân đối với màn hình dọc */
    }
    
    /* 🌟 BÍ THUẬT ÉP CHỮ NẰM GỌN 1 DÒNG TRÊN MOBILE */
    .main-title { 
        white-space: nowrap !important; 
        /* Hạ mức min xuống 1rem và giảm tỷ lệ zoom xuống 6vw */
        font-size: clamp(1rem, 6vw, 2.5rem) !important; 
        letter-spacing: -0.5px !important; /* Ép khoảng cách giữa các chữ sát lại một xíu */
        margin-bottom: 15px; 
    }
}

/* =========================================
   4. COUNTDOWN BAR (Đã đổi nền trắng, giữ theme đỏ)
   ========================================= */
.countdown-section {
    background-color: #ffffff; /* Nền trắng sáng sủa đồng bộ với Header */
    padding: 30px 0; 
    position: relative; 
    z-index: 10;
    /* Bóng đổ nhẹ bên dưới để ngăn cách thanh này với phần dải hình trượt */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); 
}

.countdown-flex { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-wrap: wrap; 
    gap: 20px; 
}

.date-box { 
    text-align: left; 
    color: var(--primary); /* Chữ đổi sang màu đỏ đô của Theme */
}

.date-box .label { 
    display: block; 
    font-size: 0.95rem; 
    font-weight: 600;
    opacity: 0.8; 
    margin-bottom: 5px; 
    letter-spacing: 1px;
}

.date-box .date { 
    font-size: 2.2rem; 
    font-weight: 900; 
    line-height: 1; 
}

.timer-box { 
    display: flex; 
    gap: 15px; 
}

/* Hộp số đếm ngược */
.time-item {
    background: var(--primary); /* Đổi hộp nền đen thành nền đỏ đô */
    color: #ffffff; /* Chữ số màu trắng */
    padding: 12px 10px; 
    min-width: 75px; 
    border-radius: 8px; /* Bo góc to hơn cho hiện đại */
    text-align: center;
    border: none; /* Bỏ viền cũ đi */
    box-shadow: 0 6px 15px rgba(135, 0, 22, 0.25); /* Tỏa hào quang màu đỏ nhẹ */
}

.time-item span { 
    display: block; 
    font-size: 1.8rem; 
    font-weight: 900; 
}

.time-item small { 
    display: block; 
    font-size: 0.65rem; 
    color: rgba(255, 255, 255, 0.8); /* Chữ nhỏ (Ngày/Giờ) màu trắng mờ */
    margin-top: 5px; 
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* =========================================
   5. MARQUEE (Dải hình trượt nổi 3D trên nền trắng)
   ========================================= */
.marquee-section {
    background: #ffffff; /* Đổi nền kem thành nền trắng tinh */
    padding: 60px 0 80px 0; /* Cách điệu khoảng trống trên dưới */
    overflow: hidden;
}

.marquee-wrapper {
    display: flex;
    width: max-content;
    animation: scroll 40s linear infinite; 
}

.marquee-wrapper:hover { 
    animation-play-state: paused; 
}

.marquee-group { 
    display: flex; 
    gap: 30px; 
    margin-right: 30px; 
    padding: 20px 0; /* Tạo không gian cho hiệu ứng bóng đổ và scale không bị cắt viền */
}

.marquee-group img { 
    height: 400px; 
    width: 600px;  
    object-fit: cover; 
    border-radius: 12px; 
    opacity: 1; 
    transition: all 0.4s ease;
    
    /* ĐÂY LÀ ĐIỂM NHẤN: Nhờ cái bóng đổ này mà ảnh sẽ tách biệt hoàn toàn khỏi nền trắng */
    box-shadow: 0 15px 35px rgba(0,0,0,0.12); 
    border: 1px solid #f9f9f9; /* Viền siêu mờ giữ khung cho các ảnh có mảng màu trắng */
}

/* Hiệu ứng khi di chuột vào ảnh */
.marquee-group img:hover { 
    transform: scale(1.03) translateY(-10px); 
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
}

@keyframes scroll { 
    from { transform: translateX(0); } 
    to { transform: translateX(-50%); } 
}

/* =========================================
   6. INFO SECTION (Cập nhật tách lớp & video)
   ========================================= */
.info-section { 
    /* [CẬP NHẬT 1]: Tạo dải màu dốc nhẹ từ màu kem sang trắng 
       giúp tách biệt hoàn toàn với dải hình ảnh trắng ở trên */
    background: linear-gradient(to bottom, var(--secondary) 0%, #ffffff 30%); 
    padding: 100px 0; /* Tăng khoảng cách để section "thở" hơn */
    position: relative;
}

/* Thêm vạch đỏ nhỏ phía trên heading để định vị không gian */
.section-heading::before {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background: var(--primary);
    margin: 0 auto 15px;
    border-radius: 2px;
}

.section-heading { 
    text-align: center; 
    color: var(--primary); 
    font-size: 2.5rem; 
    margin-bottom: 50px; 
    text-transform: uppercase; 
    font-weight: 900;
}

.info-grid {
    display: grid; 
    grid-template-columns: 1.5fr 1fr; 
    gap: 60px; 
    align-items: center; /* Đổi sang center để video và box bên phải cân bằng hơn */
}

.info-desc { 
    text-align: justify; 
    line-height: 1.8; 
    margin-bottom: 25px; 
    color: #444;
}

/* --- XỬ LÝ VIDEO (BẢN FIX ĐEN MÀN HÌNH) --- */
.video-container {
    position: relative; 
    width: 100%; 
    /* Tỉ lệ 16:9 chuẩn */
    padding-bottom: 56.25%; 
    background: #000; 
    border-radius: 12px; 
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15); 
    /* Đảm bảo khung container có diện tích tối thiểu */
    min-height: 200px; 
}

/* Sửa lại selector để bao quát hơn, không chỉ mỗi iframe */
.video-container iframe, 
.video-container div, 
.video-container object {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100% !important; 
    height: 100% !important; 
    border: none;
    z-index: 1;
}

#player {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 200px; /* Bắt buộc theo yêu cầu API */
}

/* --- KHUNG CTA BÊN PHẢI --- */
.cta-card {
    background: #ffffff; /* Đổi sang nền trắng để nổi trên nền gradient kem */
    padding: 40px 30px; 
    border-radius: 15px;
    text-align: center; 
    border: 2px dashed var(--primary);
    /* Thêm hiệu ứng nổi cho card */
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: 0.3s ease;
}

.cta-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(135, 0, 22, 0.1);
}

.btn-cta { 
    display: inline-block; 
    margin-top: 20px; 
    padding: 15px 35px; 
    background: var(--primary); /* Đổi sang màu đỏ đô cho đồng bộ color theme */
    color: white; 
    border-radius: 50px; 
    font-weight: bold; 
    transition: 0.3s;
}

.btn-cta:hover {
    background: var(--accent);
    transform: scale(1.05);
}
/* --- HIỆU ỨNG CHUYỂN ĐỘNG CHO NÚT CTA --- */
.btn-cta { 
    display: inline-block; 
    padding: 15px 35px; 
    background: var(--primary); /* Giữ màu đỏ đô của bạn */
    color: white; 
    border-radius: 50px; 
    font-weight: bold; 
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid var(--primary);
}

.btn-cta:hover { 
    background: transparent; 
    color: var(--primary); 
    border-color: var(--primary);
}

/* Định dạng và chuyển động cho mũi tên */
.btn-cta .arrow {
    display: inline-block;
    transition: transform 0.3s ease;
    margin-left: 8px; /* Tạo khoảng cách nhỏ giữa chữ và mũi tên */
    animation: arrow-slide 1.5s infinite; /* Hiệu ứng rung nhẹ tự động */
}

/* Hiệu ứng trượt khi hover vào nút */
.btn-cta:hover .arrow {
    transform: translateX(10px); /* Mũi tên trượt sang phải */
    animation: none; /* Dừng hiệu ứng rung khi đang hover để trượt mượt */
}

/* Định nghĩa chuyển động rung nhẹ */
@keyframes arrow-slide {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .info-grid { grid-template-columns: 1fr; gap: 40px; }
    .section-heading { font-size: 2rem; }
    .cta-card { order: 2; }
    .video-container { order: 1; }
}

/* =========================================
   NHÀ TÀI TRỢ TRANG CHỦ (KIM TỰ THÁP 4 TẦNG)
   ========================================= */
.home-sponsor-section { 
    padding: 80px 0; 
    text-align: center; 
    background: #fcfcfc; /* Nền xám/kem cực nhạt tôn logo */
    font-family: 'Mulish', sans-serif;
}

.home-sponsor-section .section-heading {
    margin-bottom: 50px;
    color: var(--primary); /* Đỏ đô */
    font-weight: 900;
    font-size: 2.2rem;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}

/* --- CẤU TRÚC KIM TỰ THÁP --- */
.home-sponsor-pyramid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px; /* Khoảng cách giữa các tầng */
    max-width: 1100px;
    margin: 0 auto;
}

.home-sponsor-tier {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* Khoảng cách giữa các logo trong cùng 1 tầng */
    flex-wrap: wrap; 
    width: 100%;
}

/* Định dạng chung cho mọi Logo (Kính mờ, bo góc, đổ bóng) */
.home-sponsor-tier img {
    object-fit: contain;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.04);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.home-sponsor-tier img:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 15px 35px rgba(135, 0, 22, 0.15); /* Tỏa hào quang đỏ đô */
    opacity: 1 !important; /* Luôn sáng 100% khi hover */
}

/* --- PHÂN CẤP KÍCH THƯỚC CHI TIẾT --- */

/* 1. Kim Cương: Bự nhất, viền nhấn mạnh, sáng 100% */
.home-diamond-tier img {
    height: 140px; 
    padding: 20px 40px;
    border: 2px solid rgba(135, 0, 22, 0.2); 
}

/* 2. Vàng: Vừa phải, sáng 100% */
.home-gold-tier img {
    height: 100px;  
    padding: 15px 30px;
    border: 1px solid rgba(0,0,0,0.05);
}

/* 3. Bạc/Bạch Kim: Nhỏ hơn, mờ nhẹ 80% tạo chiều sâu */
.home-silver-tier img {
    height: 75px;  
    padding: 12px 25px;
    opacity: 0.8; 
    border: 1px solid rgba(0,0,0,0.05);
}

/* 4. Đồng hành: Nhỏ nhất ở đáy, mờ 60% nhường spotlight cho tier trên */
.home-companion-tier img {
    height: 55px;  
    padding: 10px 20px;
    opacity: 0.6; 
    border: 1px dashed rgba(0,0,0,0.1); 
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .home-sponsor-pyramid { gap: 25px; }
    .home-diamond-tier img { height: 100px; padding: 15px 25px; }
    .home-gold-tier img { height: 80px; padding: 10px 20px; }
    .home-silver-tier img { height: 60px; padding: 10px 15px; }
    .home-companion-tier img { height: 45px; padding: 8px 12px; }
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .menu-toggle { display: block; }
    .nav-menu {
        position: fixed; top: 70px; left: -100%; width: 100%; background: var(--primary);
        text-align: center; transition: 0.3s; padding-bottom: 20px;
    }
    .nav-menu.active { left: 0; }
    .nav-menu ul { flex-direction: column; }
    .nav-menu ul li { margin: 15px 0; }
    
    .hero-content .main-title { font-size: 2.5rem; }
    .countdown-flex { flex-direction: column; text-align: center; }
    .info-grid { grid-template-columns: 1fr; } /* Chuyển thành 1 cột */
    .timer-box { gap: 10px; }
    .time-item { min-width: 60px; }
}





/* =========================================
   THÔNG TIN: SECTION 1 (SÁNG / LIGHT THEME)
   ========================================= */

.info-overview-section {
    padding: 150px 0 100px; 
    /* Nền gradient pha trộn giữa Trắng và Kem (--secondary) */
    background: linear-gradient(135deg, #ffffff 0%, var(--secondary) 100%);
    font-family: 'Mulish', sans-serif !important;
    position: relative;
    overflow: hidden;
}

/* Ánh sáng trang trí nền nhẹ nhàng */
.info-overview-section::before {
    content: '';
    position: absolute;
    top: -10%; left: 50%;
    transform: translateX(-50%);
    width: 60vw; height: 60vw;
    background: radial-gradient(circle, rgba(14, 153, 166, 0.05) 0%, transparent 70%); /* Ánh xanh cổ vịt cực nhạt */
    z-index: 0;
    pointer-events: none;
}

.info-header-title {
    text-align: center;
    position: relative;
    z-index: 1;
    margin-bottom: 70px;
}

.badge-glow {
    background: rgba(135, 0, 22, 0.1); /* Đỏ mờ */
    color: var(--primary);
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 0.8rem;
    display: inline-block;
    margin-bottom: 20px;
}

.info-header-title h2 {
    color: var(--dark); /* Chữ tối màu */
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 900; 
    margin-bottom: 20px; 
    text-transform: uppercase;
}


.intro-desc {
    color: #555; /* Xám đậm dễ đọc */
    font-size: 1.15rem; 
    max-width: 800px;
    margin: 0 auto; 
    line-height: 1.8;
}

/* --- LƯỚI GRID ĐỘC ĐÁO (BENTO GRID STYLE) --- */
.overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 25px;
    position: relative;
    z-index: 1;
}

/* Thẻ Kính mờ (Glassmorphism nền trắng) */
.info-glass-card {
    background: rgba(255, 255, 255, 0.85); /* Nền trắng hơi trong suốt */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid #ffffff; /* Viền trắng tinh */
    border-radius: 24px;
    padding: 40px;
    transition: 0.4s ease;
    display: flex; flex-direction: column;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04); /* Đổ bóng đen siêu nhạt để tạo độ nổi */
}

.info-glass-card:hover {
    transform: translateY(-5px);
    border-color: rgba(135, 0, 22, 0.2);
    box-shadow: 0 25px 50px rgba(135, 0, 22, 0.08); /* Đổ bóng đỏ đô nhạt khi trỏ chuột */
}

/* Icon màu đỏ đô */
.card-icon {
    width: 50px; height: 50px;
    background: rgba(135, 0, 22, 0.1);
    color: var(--primary);
    border-radius: 12px;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.5rem; margin-bottom: 25px;
}

.info-glass-card h3 { 
    color: var(--dark); 
    font-size: 1.2rem; 
    font-weight: 800; 
    margin-bottom: 20px; 
    letter-spacing: 1px; 
}

/* Ép thẻ Sứ mệnh nằm dài ngang 2 cột */
.purpose-card { grid-column: span 2; }

/* Danh sách gạch đầu dòng cách điệu */
.info-list-styled { list-style: none; padding: 0; margin: 0; }
.info-list-styled li {
    color: #444; font-size: 1.05rem; line-height: 1.6;
    margin-bottom: 15px; position: relative; padding-left: 25px;
}
.info-list-styled li::before {
    content: '\f0da'; 
    font-family: 'Font Awesome 5 Free'; font-weight: 900;
    position: absolute; left: 0; top: 2px; color: var(--primary);
}
.info-list-styled strong { color: var(--dark); font-weight: 700; }

/* Thẻ Quy mô (Số to màu Xanh cổ vịt) */
.big-number { 
    font-size: 4.5rem; 
    font-weight: 900; 
    color: var(--accent); /* Dùng Xanh cổ vịt cho số */
    line-height: 1; 
    margin-bottom: 5px; 
}
.big-number span { color: var(--primary); }
.sub-number-text { color: #777; text-transform: uppercase; font-weight: 700; font-size: 0.9rem; margin-bottom: 25px; }

.audience-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tag { 
    background: var(--secondary); /* Nền tag màu kem */
    border: 1px solid rgba(135, 0, 22, 0.1); 
    color: var(--primary); 
    padding: 8px 15px; 
    border-radius: 50px; 
    font-size: 0.85rem; 
    font-weight: 600;
}

/* Thẻ Thời gian */
.time-box { display: flex; align-items: center; gap: 20px; margin-top: auto; }
.date { 
    font-size: 5rem; 
    font-weight: 900; 
    color: var(--accent); /* Xanh cổ vịt */
    line-height: 1; 
}
.month-year { display: flex; flex-direction: column; }
.month-year span:first-child { color: var(--dark); font-size: 1.2rem; font-weight: 800; text-transform: uppercase; }
.month-year span:last-child { color: #666; font-size: 1.5rem; font-weight: 700; }

/* Thẻ Địa điểm */
.venue-name { color: var(--primary); font-size: 1.5rem; font-weight: 900; margin-bottom: 10px; }
.venue-address { color: #555; line-height: 1.6; margin-bottom: 25px; font-weight: 500;}
.btn-map { 
    color: var(--accent); /* Nút Xem bản đồ xanh cổ vịt */
    text-decoration: none; 
    font-weight: 700; 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    transition: 0.3s; 
    border-bottom: 1px solid transparent; 
    padding-bottom: 3px;
}
.btn-map:hover { color: var(--primary); border-bottom-color: var(--primary); }

/* --- RESPONSIVE CHO ĐIỆN THOẠI --- */
@media (max-width: 992px) {
    .overview-grid { grid-template-columns: 1fr 1fr; }
    .purpose-card { grid-column: span 2; }
}

@media (max-width: 768px) {
    .overview-grid { grid-template-columns: 1fr; }
    .purpose-card { grid-column: span 1; }
    .info-overview-section { padding-top: 120px; }
}

/* =========================================
   THÔNG TIN: SECTION 2 (IDEA & CONCEPT)
   ========================================= */

.concept-section {
    padding: 100px 0;
    background: #ffffff; /* Nền trắng tinh khiết để tôn vinh tác phẩm nghệ thuật */
    font-family: 'Mulish', sans-serif !important;
}

/* --- 1. THÔNG ĐIỆP CHỦ ĐẠO (QUOTE) --- */
.concept-quote-wrapper {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 80px;
    position: relative;
}

.quote-icon {
    font-size: 3rem;
    color: var(--secondary); /* Dùng màu kem làm icon mờ nhạt chìm phía sau */
    margin-bottom: 20px;
}

.main-quote {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 900;
    color: var(--dark);
    line-height: 1.4;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.main-quote span {
    color: var(--primary); /* "Mọi phiên bản đều xứng đáng..." màu Đỏ đô */
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    display: block;
    margin-top: 10px;
}

.quote-desc {
    font-size: 1.15rem;
    color: #555;
    line-height: 1.8;
    font-weight: 500;
}

/* --- 2. HÀNH TRÌNH QUÂN TỐT (CSS Flexbox) --- */
.journey-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 120px;
    background: #fafafa;
    padding: 50px;
    border-radius: 30px;
    border: 1px solid #eee;
}

.journey-step {
    flex: 1;
    text-align: center;
    padding: 0 20px;
}

.step-icon {
    width: 80px; height: 80px;
    background: white;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    margin: 0 auto 20px;
    font-size: 2.5rem;
    color: var(--accent); /* Xanh cổ vịt cho sự khởi đầu/lý trí */
    box-shadow: 0 10px 25px rgba(14, 153, 166, 0.15);
}

.journey-step h3 { color: var(--dark); font-weight: 800; font-size: 1.2rem; margin-bottom: 15px; }
.journey-step p { color: #666; font-size: 0.95rem; line-height: 1.6; }

/* Mũi tên điều hướng */
.step-arrow { font-size: 2rem; color: #ccc; padding: 0 15px; }

/* Bước cuối cùng (Phong cấp) được nhấn mạnh bằng màu Đỏ đô & Gold */
.highlight-step .step-icon {
    background: var(--primary);
    color: #D4AF37; /* Icon Vương miện màu Gold trên nền Đỏ đô */
    box-shadow: 0 15px 30px rgba(135, 0, 22, 0.3);
    transform: scale(1.1);
}
.highlight-step h3 { color: var(--primary); }

/* --- 3. KEY VISUAL (CSS Grid Layout) --- */
.kv-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 120px;
}

.kv-image-col {
    background: var(--secondary); /* Lót nền màu Be (Kem) phía sau KV không nền */
    border-radius: 30px;
    padding: 40px;
    display: flex; justify-content: center; align-items: center;
    position: relative;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.02);
}

/* Vòng sáng hào quang giả lập phía sau KV */
.kv-image-col::before {
    content: ''; position: absolute;
    width: 60%; height: 60%;
    background: radial-gradient(circle, #D4AF37 0%, transparent 70%);
    opacity: 0.3; filter: blur(30px); z-index: 0;
}

.kv-img-main { width: 100%; max-width: 500px; height: auto; position: relative; z-index: 1; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.1)); }

.kv-text-col h3 { color: var(--dark); font-size: 2.5rem; font-weight: 900; margin-bottom: 30px; line-height: 1.3; }

.kv-details-list { list-style: none; padding: 0; }
.kv-details-list li { display: flex; gap: 20px; margin-bottom: 30px; }
.kv-icon { width: 60px; height: 60px; background: rgba(14, 153, 166, 0.1); color: var(--accent); border-radius: 15px; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; flex-shrink: 0; }
.kv-details-list h4 { color: var(--dark); font-size: 1.2rem; font-weight: 800; margin-bottom: 10px; }
.kv-details-list p { color: #555; line-height: 1.6; }

/* --- 4. BẢNG MÀU CHỦ ĐẠO (COLOR PALETTE) --- */
.theme-colors-wrapper { text-align: center; }
.theme-title { font-size: 1.8rem; font-weight: 900; color: var(--dark); margin-bottom: 50px; }

.palette-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.color-card {
    background: white;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 30px 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: 0.3s;
}
.color-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }

.color-swatch {
    width: 80px; height: 80px;
    border-radius: 50%;
    margin: 0 auto 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* Tạo bóng để các màu sáng không bị chìm vào nền trắng */
    border: 3px solid white;
}

.color-card h4 { font-weight: 900; font-size: 1.1rem; color: var(--dark); margin-bottom: 5px; }
.color-card span { display: block; font-weight: 700; color: var(--primary); font-size: 0.9rem; margin-bottom: 15px; text-transform: uppercase; }
.color-card p { font-size: 0.9rem; color: #666; line-height: 1.5; }

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .journey-grid { flex-direction: column; gap: 30px; padding: 30px; }
    .step-arrow { transform: rotate(90deg); padding: 10px 0; }
    .kv-wrapper { grid-template-columns: 1fr; gap: 40px; }
    .palette-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .palette-grid { grid-template-columns: 1fr; }
    .main-quote { font-size: 1.8rem; }
}


/* =========================================
   THÔNG TIN: SECTION 3 (TIMELINE LỊCH TRÌNH)
   ========================================= */

.timeline-section {
    padding: 100px 0;
    background: #ffffff; /* Nền trắng xuyên suốt */
    font-family: 'Mulish', sans-serif !important;
}

.timeline-wrapper {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding: 20px 0;
}

/* Đường kẻ dọc chính giữa (Màu kem) */
.timeline-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px; /* Cách lề trái 40px */
    width: 3px;
    background: var(--secondary);
    z-index: 1;
}

.timeline-item {
    position: relative;
    padding-left: 100px; /* Nhường chỗ cho mốc thời gian và chấm tròn */
    margin-bottom: 40px;
    z-index: 2;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

/* Chấm tròn mốc thời gian */
.timeline-dot {
    position: absolute;
    left: 31px; /* Canh giữa đường line */
    top: 0;
    width: 20px;
    height: 20px;
    background: var(--primary); /* Đỏ đô */
    border: 4px solid white;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(135, 0, 22, 0.3);
    display: flex; justify-content: center; align-items: center;
}

/* Các mốc thời gian đặc biệt (có icon) thì to hơn */
.highlight-item .timeline-dot {
    left: 21px;
    width: 40px; height: 40px;
    background: var(--accent); /* Xanh cổ vịt cho sự kiện đặc biệt */
    color: white;
    font-size: 1rem;
    border: 3px solid white;
}

/* Chữ hiển thị giờ */
.timeline-time {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--accent); /* Xanh cổ vịt */
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* Khối nội dung thẻ (Card) */
.timeline-content {
    background: white;
    border: 1px solid #f0f0f0;
    padding: 25px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    transition: 0.3s;
    position: relative;
}

.timeline-content:hover {
    transform: translateX(10px); /* Hiệu ứng trượt ngang nhẹ khi hover */
    box-shadow: 0 15px 40px rgba(135,0,22,0.08);
    border-color: rgba(135,0,22,0.1);
}

.timeline-content h3 {
    color: var(--dark);
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.timeline-content p {
    color: #666;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* Nhãn đánh dấu đặc biệt (Kỷ niệm, Guest Star) */
.special-tag {
    position: absolute;
    top: -12px;
    right: 20px;
    background: var(--primary);
    color: white;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(135,0,22,0.3);
}

/* Đổi màu tiêu đề cho các mục đặc biệt */
.highlight-item h3 { color: var(--primary); }

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .timeline-line { left: 20px; }
    .timeline-dot { left: 11px; }
    .highlight-item .timeline-dot { left: 1px; }
    .timeline-item { padding-left: 60px; }
    .timeline-content { padding: 20px; }
    .timeline-content h3 { font-size: 1.1rem; }
    .special-tag { position: relative; display: inline-block; top: 0; right: 0; margin-bottom: 10px; }
}


/* =========================================
   THÔNG TIN: SECTION 4 (FIX DANH HIỆU & ICON)
   ========================================= */

.award-system-section {
    padding: 120px 0;
    background: #ffffff; /* Nền trắng tinh khôi */
    font-family: 'Mulish', sans-serif !important;
}

.award-header {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 80px;
}

.award-header h2 {
    color: var(--dark); font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 900; margin-bottom: 25px; line-height: 1.3; text-transform: uppercase;
}

.award-header .intro-desc {
    font-size: 1.15rem; color: #555; line-height: 1.8; font-weight: 500;
}

/* --- LƯỚI 4 DANH HIỆU (GRID 4 CỘT) --- */
.award-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 80px;
}

.award-card {
    background: white;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 50px 25px 40px; /* Thêm padding top */
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.03);
    transition: 0.4s ease;
}

.award-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(135, 0, 22, 0.08);
    border-color: rgba(135, 0, 22, 0.15);
}

/* PHÓNG TO ICON CON CỜ (CHÈN ĐÚNG THEO YÊU CẦU CỦA BẠN) */
.award-icon {
    width: 100px; height: 100px; /* Nới rộng vòng tròn */
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 3rem; /* Phóng to icon con cờ lên 3 lần cho rõ */
    margin: 0 auto 30px;
    transition: 0.3s ease;
}

.award-card:hover .award-icon {
    transform: scale(1.1) rotate(10deg); /* Thêm hiệu ứng xoay nhẹ cho vui */
}

.queen-icon { background: rgba(135, 0, 22, 0.08); color: var(--primary); }
.rook-icon { background: rgba(14, 153, 166, 0.08); color: var(--accent); } 
.knight-icon { background: rgba(212, 175, 55, 0.08); color: #D4AF37; } 
.bishop-icon { background: rgba(17, 17, 17, 0.08); color: var(--dark); } 

.award-card h3 { color: var(--dark); font-size: 1.3rem; font-weight: 900; margin-bottom: 5px; text-transform: uppercase;white-space: nowrap;}
.award-subtitle { display: block; color: var(--primary); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; margin-bottom: 25px; letter-spacing: 1px; white-space: nowrap;}

/* --- BẮT ĐẦU FIX LỖI DẤU CHECK Ở ĐÂY --- */
.award-criteria { 
    list-style: none; padding: 0; text-align: left; 
    margin: 0;
}
.award-criteria li { 
    color: #555; font-size: 0.95rem; line-height: 1.6; 
    margin-bottom: 18px; position: relative; padding-left: 25px; 
}

/* Xóa bỏ icon FontAwesome lỗi cũ và thay bằng kỹ thuật CSS Dấu check */
.award-criteria li::before {
    content: ''; /* Không dùng Unicode nữa */
    position: absolute; left: 0; top: 6px; 
    width: 8px; height: 14px; /* Kích thước dấu check */
    border: 3px solid var(--accent); /* Viền màu xanh cổ vịt */
    border-width: 0 3px 3px 0; /* Chỉ vẽ viền dưới và phải */
    transform: rotate(40deg); /* Xoay 40 độ để tạo dấu check */
    display: block;
}

/* --- KHỐI VINH DANH QUÂN TỐT (THE PROMOTION HERO) --- */
.award-hero-pawn {
    position: relative;
    background: linear-gradient(135deg, var(--dark) 0%, #222 100%);
    border-radius: 30px;
    padding: 70px 40px;
    text-align: center;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}

.hero-icon {
    font-size: 5rem; /* Phóng to icon Tốt ở khối lớn */
    color: #D4AF37; margin-bottom: 20px;
    text-shadow: 0 0 40px rgba(212, 175, 55, 0.7);
}

.hero-badge {
    display: inline-block; background: var(--primary); color: white;
    padding: 8px 25px; border-radius: 50px; font-weight: 800; font-size: 0.85rem;
    margin-bottom: 25px; letter-spacing: 2px;
}

.pawn-content h2 { color: white; font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 900; margin-bottom: 30px; letter-spacing: 2px; text-transform: uppercase;}

.pawn-desc { color: #ccc; font-size: 1.15rem; line-height: 1.9; max-width: 850px; margin: 0 auto;}
.pawn-desc strong { color: #D4AF37; font-weight: 800; }

/* --- RESPONSIVE (UPDATE Grid chia 2 trên Tablet) --- */
@media (max-width: 1200px) {
    .award-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .award-card { padding: 40px 20px; }
}
@media (max-width: 768px) {
    .award-grid { grid-template-columns: 1fr; }
    .hero-icon { font-size: 4rem; }
    .award-system-section { padding: 80px 0; }
}


/* =========================================
   THÔNG TIN: SECTION 5 (NÚT CHỐT ĐƠN VIP)
   ========================================= */

.cta-promotion-section {
    padding: 120px 0 150px;
    background: var(--dark); /* Dùng nền đen để ánh sáng Gold nổ ra thật rực rỡ */
    font-family: 'Mulish', sans-serif !important;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.cta-container {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

/* Luồng sáng mờ ảo phập phồng phía sau chữ */
.cta-glow-bg {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 200%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 60%);
    z-index: -1;
    animation: pulse-glow 4s infinite alternate;
}

@keyframes pulse-glow {
    0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

.text-glow-gold {
    color: #D4AF37;
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.6);
    white-space: nowrap;
}

.cta-title { color: white; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900; margin-bottom: 25px; letter-spacing: 2px; }
.cta-desc { color: #ccc; font-size: 1.2rem; line-height: 1.8; margin-bottom: 60px; }

/* --- KHỐI NÚT BẤM (BUTTON WRAPPER) --- */
.promotion-btn-wrapper {
    position: relative;
    display: inline-block;
}

/* Thiết kế Nút gốc */
.btn-promotion {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(45deg, var(--primary), #b3001d); /* Đỏ đô */
    color: white;
    padding: 20px 50px;
    border-radius: 50px;
    font-size: 1.3rem;
    font-weight: 900;
    text-decoration: none;
    letter-spacing: 2px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(135, 0, 22, 0.5);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
    overflow: hidden;
}

/* Ánh sáng chạy ngang nút (Hiệu ứng Shine) */
.btn-promotion::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-25deg); transition: 0.5s;
}

.btn-text { position: relative; z-index: 2; }

/* --- ẢO THUẬT ĐỔI ICON (TỐT -> HẬU) --- */
.icon-transform {
    position: relative;
    width: 30px; height: 30px;
    display: flex; justify-content: center; align-items: center;
    z-index: 2;
}

.icon-pawn, .icon-queen {
    position: absolute;
    font-size: 1.8rem;
    transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.icon-queen {
    opacity: 0; transform: scale(0) translateY(20px);
    color: #D4AF37; /* Hậu màu Vàng Gold */
}

/* --- VỤ NỔ ÁNH SÁNG TRONG NÚT --- */
.light-burst {
    position: absolute; top: 50%; left: 85%;
    transform: translate(-50%, -50%) scale(0);
    width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.8) 0%, rgba(212, 175, 55, 0) 70%);
    border-radius: 50%; transition: 0.6s ease-out; z-index: 1; opacity: 0;
}

/* --- HIỆU ỨNG KHI RÊ CHUỘT VÀO (HOVER - THE MAGIC HAPPENS) --- */
.promotion-btn-wrapper:hover .btn-promotion {
    background: var(--dark);
    border-color: #D4AF37;
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.5), 0 0 60px rgba(212, 175, 55, 0.3);
    transform: translateY(-5px) scale(1.05);
    color: #D4AF37;
}

.promotion-btn-wrapper:hover .btn-promotion::before { left: 200%; transition: 0.7s; }

/* Biến mất Tốt, Xuất hiện Hậu */
.promotion-btn-wrapper:hover .icon-pawn { opacity: 0; transform: scale(0) translateY(-20px); }
.promotion-btn-wrapper:hover .icon-queen { opacity: 1; transform: scale(1.2) translateY(0); }

/* Kích nổ ánh sáng bên trong */
.promotion-btn-wrapper:hover .light-burst { transform: translate(-50%, -50%) scale(3); opacity: 1; }

/* --- CÁC TIA SÁNG BẮN RA NGOÀI NÚT (SPARKS) --- */
.sparks {
    position: absolute; top: 50%; left: 50%;
    width: 6px; height: 6px;
    background: #D4AF37;
    border-radius: 50%;
    box-shadow: 0 0 10px #D4AF37, 0 0 20px white;
    opacity: 0; z-index: 1; pointer-events: none;
}

.promotion-btn-wrapper:hover .spark-1 { animation: shoot1 0.6s ease-out forwards; }
.promotion-btn-wrapper:hover .spark-2 { animation: shoot2 0.6s ease-out 0.1s forwards; }
.promotion-btn-wrapper:hover .spark-3 { animation: shoot3 0.6s ease-out 0.2s forwards; }
.promotion-btn-wrapper:hover .spark-4 { animation: shoot4 0.6s ease-out 0.15s forwards; }
.promotion-btn-wrapper:hover .spark-5 { animation: shoot5 0.6s ease-out 0.05s forwards; }
.promotion-btn-wrapper:hover .spark-6 { animation: shoot6 0.6s ease-out 0.25s forwards; }

/* Quỹ đạo bắn của các tia sáng (Trái, Phải, Lên, Xuống) */
@keyframes shoot1 { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(-80px, -60px) scale(0); } }
@keyframes shoot2 { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(90px, -70px) scale(0); } }
@keyframes shoot3 { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(-100px, 40px) scale(0); } }
@keyframes shoot4 { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(80px, 60px) scale(0); } }
@keyframes shoot5 { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(0, -90px) scale(0); } }
@keyframes shoot6 { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(120px, 0) scale(0); } }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .cta-title { font-size: 2rem; }
    .btn-promotion { padding: 15px 35px; font-size: 1.1rem; }
}







/* =========================================
   TRANG BẢNG GIÁ VÉ (THIẾT KẾ UX THÔNG MINH)
   ========================================= */

.ticket-pricing-section {
    padding: 120px 0;
    background: linear-gradient(135deg, #ffffff 0%, var(--secondary) 100%);
    font-family: 'Mulish', sans-serif !important;
}

.ticket-header { text-align: center; max-width: 800px; margin: 0 auto 70px; }
.ticket-header h2 { color: var(--dark); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 900; margin-bottom: 20px; text-transform: uppercase; }
.ticket-header .intro-desc { font-size: 1.1rem; color: #555; line-height: 1.8; font-weight: 500; }

.ticket-grid { display: flex; justify-content: center; align-items: flex-start; gap: 40px; max-width: 1000px; margin: 0 auto; }

/* --- THIẾT KẾ THẺ VÉ TỐI GIẢN --- */
.ticket-card {
    background: #ffffff; border-radius: 24px; width: 100%; max-width: 420px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05); position: relative; border: 1px solid #eee;
    transition: 0.4s ease; display: flex; flex-direction: column;
}

.ticket-card:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0,0,0,0.1); }

/* Cuống vé */
.ticket-card::before, .ticket-card::after {
    content: ''; position: absolute; width: 30px; height: 30px; background: var(--secondary);
    border-radius: 50%; top: 220px; z-index: 2;
}
.ticket-card::before { left: -15px; border-right: 1px solid #eee; }
.ticket-card::after { right: -15px; border-left: 1px solid #eee; }

.ticket-top { padding: 40px 30px 20px; text-align: center; border-bottom: 2px dashed #eee; }
.ticket-icon { font-size: 2.5rem; margin-bottom: 15px; }
.ticket-top h3 { font-size: 1.8rem; font-weight: 900; color: var(--dark); letter-spacing: 2px; margin-bottom: 5px; }
.ticket-slogan { font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

.ticket-price { text-align: center; padding: 30px 0 20px; position: relative; }
.original-price { font-size: 0.95rem; color: #999; font-weight: 600; margin-bottom: 5px; }
.original-price span { text-decoration: line-through; color: #bbb; }
.currency { font-size: 1.2rem; font-weight: 700; color: #888; vertical-align: top; }
.price { font-size: 3.5rem; font-weight: 900; color: var(--dark); line-height: 1; }
.unit { font-size: 1rem; color: #888; font-weight: 500; }

.ticket-body { padding: 0 40px 40px; flex-grow: 1; display: flex; flex-direction: column; text-align: center;}

/* Mô tả ngắn gọn trong thẻ vé */
.ticket-summary-note { color: #666; font-size: 0.95rem; margin-bottom: 25px; line-height: 1.5; }
.save-tag { display: inline-block; background: rgba(135, 0, 22, 0.1); color: var(--primary); padding: 8px 15px; border-radius: 8px; font-weight: 800; font-size: 0.9rem; margin: 0 auto 25px; }

.btn-buy { width: 100%; text-align: center; padding: 18px; border-radius: 50px; font-weight: 800; font-size: 1.1rem; text-decoration: none; transition: 0.3s; font-family: 'Mulish', sans-serif !important; margin-top: auto;}

/* PHỐI MÀU */
.single-ticket .ticket-icon { color: var(--accent); }
.single-ticket .ticket-slogan { color: var(--accent); }
.single-btn { background: rgba(14, 153, 166, 0.1); color: var(--accent); border: 2px solid var(--accent); }
.single-btn:hover { background: var(--accent); color: white; box-shadow: 0 10px 20px rgba(14, 153, 166, 0.3); }

.highlight-ticket { border: 2px solid var(--primary); transform: scale(1.05); box-shadow: 0 20px 50px rgba(135, 0, 22, 0.15); z-index: 5; }
.highlight-ticket:hover { transform: scale(1.08) translateY(-10px); }
.popular-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, var(--primary), #b3001d); color: white; padding: 8px 25px; border-radius: 50px; font-weight: 800; font-size: 0.85rem; letter-spacing: 1px; box-shadow: 0 5px 15px rgba(135, 0, 22, 0.4); white-space: nowrap; }
.couple-ticket .ticket-icon { color: var(--primary); text-shadow: 0 0 20px rgba(135, 0, 22, 0.3); }
.couple-ticket .ticket-slogan { color: var(--primary); }
.couple-ticket .price { color: var(--primary); }
.couple-btn { background: var(--primary); color: white; border: 2px solid var(--primary); box-shadow: 0 10px 20px rgba(135, 0, 22, 0.3); }
.couple-btn:hover { background: #ffffff; color: var(--primary); box-shadow: 0 15px 30px rgba(135, 0, 22, 0.2); }


/* =========================================
   KHỐI ĐẶC QUYỀN CHUNG (NẰM DƯỚI 2 TẤM VÉ)
   ========================================= */
.shared-privileges-box {
    margin: 80px auto 0;
    max-width: 1000px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid #ffffff;
    border-radius: 24px;
    padding: 50px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
}

.privilege-title {
    text-align: center; color: var(--primary); font-weight: 900;
    font-size: 1.4rem; margin-bottom: 40px; text-transform: uppercase; letter-spacing: 1px;
}

.privilege-list {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Chia 2 cột cho dễ đọc */
    gap: 25px 40px;
    list-style: none; padding: 0; margin: 0;
}

.privilege-list li {
    position: relative; padding-left: 30px; color: #444;
    line-height: 1.6; font-size: 0.95rem; font-weight: 600;
}

.privilege-list li strong { color: var(--primary); font-weight: 800; }

.privilege-list li::before {
    content: ''; position: absolute; left: 0; top: 6px;
    width: 8px; height: 14px;
    border: 3px solid var(--accent); /* Dấu check Xanh cổ vịt */
    border-width: 0 3px 3px 0; transform: rotate(45deg); display: block;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 992px) {
    .ticket-grid { flex-direction: column; gap: 60px; }
    .highlight-ticket { transform: scale(1); }
    .highlight-ticket:hover { transform: translateY(-10px); }
    .ticket-card::before, .ticket-card::after { display: none; }
    .shared-privileges-box { padding: 40px 30px; }
}

@media (max-width: 768px) {
    .privilege-list { grid-template-columns: 1fr; /* Rớt xuống 1 cột trên điện thoại */ gap: 20px; }
}






/* =========================================
   TRANG MUA VÉ (GLASSMORPHISM & CHECKOUT POPUP)
   ========================================= */

/* --- 1. KHUNG NỀN TRANG MUA VÉ --- */
.page-content {
    padding: 140px 0 80px;
    background: linear-gradient(135deg, #ffffff 0%, var(--secondary) 100%);
    min-height: 100vh;
    font-family: 'Mulish', sans-serif !important;
}

/* --- 2. KHỐI FORM ĐĂNG KÝ (GLASS CARD) --- */
.booking-form {
    max-width: 700px;
    margin: 40px auto 0;
    background: rgba(255, 255, 255, 0.85); /* Kính mờ trắng sáng */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 50px;
    border-radius: 24px; 
    border: 1px solid #ffffff; 
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05); /* Bóng đổ xám nhạt */
    position: relative;
    overflow: hidden; 
}

/* Nhãn chéo ở góc phải form */
.booking-form::after {
    content: "REGISTRATION FORM";
    position: absolute;
    top: 50px;      
    right: -60px;   
    background: linear-gradient(90deg, var(--primary), #b3001d); 
    color: white;
    font-size: 0.7rem;
    padding: 8px 50px;
    transform: rotate(45deg);
    font-weight: 800;
    letter-spacing: 2px;
    box-shadow: 0 5px 15px rgba(135, 0, 22, 0.3);
    z-index: 10;
}

/* Tiêu đề từng phần trong Form */
.form-section-title {
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px dashed #eee;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- 3. INPUT & SELECT (THIẾT KẾ HIỆN ĐẠI CHỈ CÓ VIỀN DƯỚI) --- */
.form-group {
    margin-bottom: 30px;
    position: relative; 
    z-index: 1;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 800;
    color: var(--dark);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-group input, 
.form-group select {
    width: 100%;
    padding: 12px 0; /* Bỏ padding 2 bên để viền dưới ôm sát chữ */
    border: none;
    border-bottom: 2px solid #ddd; /* Viền xám nhạt */
    background: transparent; 
    border-radius: 0;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    color: var(--dark);
    font-family: 'Mulish', sans-serif;
    font-weight: 600;
}

.form-group input::placeholder {
    color: #aaa;
    font-weight: 500;
    font-size: 0.95rem;
}

/* Hiệu ứng tương tác khi User gõ phím */
.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-bottom-color: var(--primary); /* Đổi sang Đỏ đô */
    background: rgba(135, 0, 22, 0.02); 
    padding-left: 10px; /* Thụt lề nhẹ tạo cảm giác click */
}

/* --- 4. ANIMATION CHO FORM NGƯỜI SỐ 2 (JS BẬT/TẮT) --- */
@keyframes fadeSlideDown {
    0% { opacity: 0; transform: translateY(-30px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

#secondPersonSection {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 2px dashed #eee; /* Đường cắt ngang phân biệt 2 người */
    clear: both; 
    animation: fadeSlideDown 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

#secondPersonSection .form-section-title {
    color: var(--accent); /* Nhấn người số 2 bằng Xanh cổ vịt cho đỡ nhàm chán */
}

/* --- 5. TỔNG TIỀN VÀ NÚT SUBMIT --- */
.total-display {
    text-align: center;
    margin: 40px 0 25px;
    padding: 25px;
    background: rgba(212, 175, 55, 0.05); /* Lót nền vàng Gold mờ */
    border-radius: 15px;
    border: 2px dashed rgba(212, 175, 55, 0.4);
    transition: 0.3s;
}

.total-display:hover { background: rgba(212, 175, 55, 0.1); }

.total-display span {
    display: block; font-size: 0.9rem; color: #666; font-weight: 700;
    text-transform: uppercase; margin-bottom: 5px;
}

#totalAmount {
    font-size: 2.2rem; font-weight: 900; color: var(--primary);
}

.btn-submit-glow { 
    width: 100%; padding: 20px; background: var(--primary); color: white;
    border: 2px solid var(--primary); border-radius: 50px; font-size: 1.1rem;
    text-transform: uppercase; cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 25px rgba(135, 0, 22, 0.3);
    font-family: 'Mulish', sans-serif !important; font-weight: 900; letter-spacing: 2px;
}

.btn-submit-glow:hover {
    transform: translateY(-5px); box-shadow: 0 20px 40px rgba(135, 0, 22, 0.4);
    background: #ffffff; color: var(--primary);
}

/* --- 6. POPUP THANH TOÁN QR CODE --- */
.popup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.4); 
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    z-index: 10000; display: flex; justify-content: center; align-items: center;
}

.popup-content {
    background: #ffffff; padding: 40px 30px; border-radius: 24px; 
    text-align: center; max-width: 420px; width: 90%;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1); border: 1px solid #eee;
    position: relative;
}

.popup-content h3 { color: var(--dark); font-size: 1.4rem; font-weight: 900; margin-bottom: 15px; }

.timer-text {
    font-size: 1rem; color: #555; margin-bottom: 25px; padding: 10px 25px;
    background: rgba(14, 153, 166, 0.1); border-radius: 50px;
    display: inline-block; font-weight: 600;
}

.timer-text span { color: var(--accent); font-weight: 900; font-size: 1.1rem; }

.qr-container {
    padding: 15px; background: #ffffff; border-radius: 15px;
    margin-bottom: 25px; border: 2px dashed #ccc;
    display: flex; justify-content: center; align-items: center;
}

.qr-container img { border-radius: 10px; width: 100%; max-width: 250px; display: block; }

/* Lớp phủ khi QR hết hạn */
.expired-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.95); border-radius: 15px;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 5;
}

.expired-overlay p { color: var(--primary); font-size: 1.1rem; font-weight: 800; margin-bottom: 15px; }

/* Nút hủy giao dịch trong Popup */
.cancel-btn {
    font-family: 'Mulish', sans-serif !important; 
    background: transparent; border: none; color: #888;
    padding: 10px; transition: 0.3s; font-weight: 700; width: 100%;
    cursor: pointer; font-size: 0.95rem; text-decoration: underline;
}

.cancel-btn:hover { color: var(--primary); }

/* --- 7. RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .page-content { padding-top: 100px; }
    .booking-form { padding: 35px 20px; }
    .booking-form::after { top: 30px; right: -60px; font-size: 0.6rem; }
    #totalAmount { font-size: 1.8rem; }
}


/* =========================================
   TRANG ĐỐI TÁC (SPONSORS PAGE)
   ========================================= */

.partner-page {
    background: linear-gradient(135deg, #ffffff 0%, var(--secondary) 100%);
    text-align: center;
}

.partner-subtitle {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 60px;
}

/* KHUNG TỪNG CẤP BẬC */
.partner-tier {
    margin-bottom: 70px;
}

.tier-title {
    color: var(--primary);
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
}

/* Gạch chân điểm nhấn dưới tiêu đề cấp bậc */
.tier-title::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}

/* THẺ LOGO KÍNH MỜ (GLASSMORPHISM) */
.partner-card {
    width: 100%;
    aspect-ratio: 4 / 3; /* ÉP TỈ LỆ KHUNG LUÔN LÀ 4 CHÂN 3 CAO */
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    overflow: hidden; /* Cắt bỏ phần ảnh thừa khi zoom */
    padding: 0 !important; /* Để ảnh có thể chạm sát viền */
    transition: all 0.4s ease;
}

.partner-card img {
    width: 100%;       /* Ép chiều ngang ảnh bằng khung */
    height: 100%;      /* Ép chiều cao ảnh bằng khung */
    object-fit: cover; /* QUAN TRỌNG: Tự động zoom để lấp đầy khung mà không làm biến dạng ảnh */
    transition: transform 0.4s ease;
    border-radius: 20px; /* Đảm bảo góc ảnh bo tròn khớp với khung card */
}

/* Hiệu ứng Hover chung */
.partner-card:hover {
    transform: translateY(-10px);
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(135, 0, 22, 0.15);
    border-color: var(--primary);
}

.partner-card:hover img {
    transform: scale(1.1);
}

/* --- PHÂN BỔ KÍCH THƯỚC BẰNG GRID --- */
.partner-grid {
    display: grid;
    gap: 30px;
    justify-content: center;
    margin: 0 auto;
}

/* KIM CƯƠNG: 1 Cột to nhất */
.grid-1 { grid-template-columns: 1fr; max-width: 500px; }

/* VÀNG: 2 Cột */
.grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 850px; }

/* BẠCH KIM: 3 Cột */
.grid-3 { grid-template-columns: repeat(3, 1fr); max-width: 1000px; }

/* ĐỒNG: 4 Cột */
.grid-4 { grid-template-columns: repeat(4, 1fr); max-width: 1100px; }

/* --- HIỆU ỨNG HIỂN THỊ LOGO ĐỒNG HÀNH (GIỮ NGUYÊN MÀU GỐC) --- */
.bronze-tier .partner-card img {
    /* Mờ nhẹ 20% để tạo cảm giác chìm hơn so với Kim Cương/Vàng, nhưng vẫn giữ full màu */
    opacity: 0.8; 
    transition: all 0.3s ease;
}

/* Khi rê chuột vào: Sáng 100% và phóng to nhẹ */
.bronze-tier .partner-card:hover img {
    opacity: 1; 
    transform: scale(1.05); 
}

/* Đảm bảo các cấp cao (Kim Cương, Vàng, Bạch Kim) luôn sáng rõ 100% mặc định */
.diamond-tier .partner-card img,
.gold-tier .partner-card img,
.platinum-tier .partner-card img {
    opacity: 1;
}
/* KIM CƯƠNG: Đẳng cấp và Tỏa sáng */
.diamond-tier .partner-card {
    aspect-ratio: 4 / 3;
    padding: 20px !important; /* Tạo khoảng thở cho logo Techcombank */
    background: rgba(255, 255, 255, 0.8) !important; /* Kính mờ trắng sáng */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(135, 0, 22, 0.3) !important; /* Viền chỉ mỏng 1px cực thanh thoát */
    
    /* HIỆU ỨNG QUAN TRỌNG: Đổ bóng kép tạo độ sâu */
    box-shadow: 
        0 10px 30px rgba(135, 0, 22, 0.15), 
        0 0 0 5px rgba(135, 0, 22, 0.05) !important; 
    
    overflow: hidden;
    transition: all 0.5s ease;
}

.diamond-tier .partner-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Giữ nguyên vẹn logo nhà tài trợ lớn */
    
}

/* Hiệu ứng khi hover: Viền sáng rực lên */
.diamond-tier .partner-card:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 15px 40px rgba(135, 0, 22, 0.3) !important;
    transform: translateY(-8px) scale(1.02);
}

.gold-tier .partner-card,
.platinum-tier .partner-card,
.bronze-tier .partner-card {
    aspect-ratio: 4 / 3;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.4);
    overflow: hidden;
}

.gold-tier .partner-card img,
.platinum-tier .partner-card img,
.bronze-tier .partner-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Tràn viền cho các tier dưới */
}

/* Thêm lớp phủ tên khi hover */
.partner-card {
    position: relative;
}

.partner-card::after {
    content: attr(data-name); /* Lấy tên từ thuộc tính data-name trong HTML */
    position: absolute;
    bottom: -100%; /* Giấu đi */
    left: 0;
    width: 100%;
    padding: 10px 0;
    background: rgba(135, 0, 22, 0.85);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    transition: 0.4s;
    font-family: 'Mulish', sans-serif;
}

.partner-card:hover::after {
    bottom: 0; /* Trượt lên khi hover */
}

/* =========================================
   RESPONSIVE: PHÂN CẤP THỊ GIÁC TRÊN ĐIỆN THOẠI
   ========================================= */

@media (max-width: 992px) {
    /* Tablet: Ép Bạch Kim và Đồng rớt xuống còn 2 cột */
    .grid-3, .grid-4 { 
        grid-template-columns: repeat(2, 1fr); 
        max-width: 600px; /* Bóp khung lại cho đẹp trên Tablet */
    }
}

@media (max-width: 576px) {
    /* Ép tất cả các cấp về thành 1 cột xếp chồng lên nhau */
    .grid-1, .grid-2, .grid-3, .grid-4 { 
        grid-template-columns: 1fr; 
    }
    
    /* BÍ QUYẾT PHÂN CẤP: Bóp nhỏ dần max-width theo từng Tier */
    
    /* TIER 1: KIM CƯƠNG (Vua - To nhất, chiếm gần hết màn hình ngang) */
    .diamond-tier .partner-grid {
        max-width: 90%; 
        margin: 0 auto;
    }
    
    /* TIER 2: VÀNG (Nhỏ hơn Kim Cương một chút) */
    .gold-tier .partner-grid {
        max-width: 75%; 
        margin: 0 auto;
    }

    /* TIER 3: BẠCH KIM (Nhỏ hơn Vàng) */
    .platinum-tier .partner-grid {
        max-width: 60%; 
        margin: 0 auto;
    }

    /* TIER 4: ĐỒNG HÀNH (Bé nhất, khiêm tốn) */
    .bronze-tier .partner-grid {
        max-width: 45%; 
        margin: 0 auto;
    }
    
    /* Điều chỉnh lại Padding và Bo góc cho các card bé để không bị lẹm ảnh */
    .platinum-tier .partner-card,
    .bronze-tier .partner-card {
        border-radius: 12px;
    }
    
    .partner-card img {
        border-radius: inherit; /* Cho ảnh bo góc ăn theo thẻ cha */
    }
}

/* ĐIỆN THOẠI QUÁ NHỎ (iPhone 5/SE) */
@media (max-width: 400px) {
    /* Nới rộng ra 1 chút xíu xiu nếu màn hình quá hẹp để không bị móp logo */
    .gold-tier .partner-grid { max-width: 85%; }
    .platinum-tier .partner-grid { max-width: 70%; }
    .bronze-tier .partner-grid { max-width: 55%; }
}


/* =========================================
   1. BANNER CTA ĐẮT GIÁ & NỔI BẬT
   ========================================= */
.partner-cta-section {
    padding: 120px 20px;
    background: linear-gradient(135deg, #ffffff 0%, var(--secondary) 100%);
    display: flex;
    justify-content: center;
    font-family: 'Mulish', sans-serif !important;
}

.cta-glass-box {
    max-width: 1000px;
    width: 100%;
    background: linear-gradient(135deg, rgba(135, 0, 22, 0.15) 0%, rgba(255, 255, 255, 0.03) 100%);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    padding: 80px 40px;
    text-align: center;
    position: relative;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(135, 0, 22, 0.1);
}

.cta-badge {
    background: var(--primary) !important;
    color: #ffffff !important;
    padding: 8px 25px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 3px;
    margin-bottom: 25px;
    display: inline-block;
    box-shadow: 0 5px 15px rgba(135, 0, 22, 0.4);
}

.cta-content h2 {
    color: #ffffff !important;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    letter-spacing: 3px;
    margin-bottom: 20px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.cta-content p {
    color:  var(--dark) !important;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 45px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 500;
}

.btn-partner-glow {
    background: var(--primary) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 18px 50px;
    font-size: 1.05rem;
    font-weight: 800;
    font-family: 'Mulish', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(135, 0, 22, 0.5) !important;
}

.btn-partner-glow:hover {
    background: #ffffff !important;
    color: var(--primary) !important;
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(255, 255, 255, 0.3) !important;
}

/* =========================================
   2. POPUP LIÊN HỆ ĐỐI TÁC (ĐÃ VÁ LỖI)
   ========================================= */
.popup-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.partner-modal {
    position: relative !important; /* Mỏ neo để giữ nút X ở đúng vị trí */
    max-width: 500px !important;
    width: 90%;
    padding: 50px 40px !important;
    border-radius: 30px !important;
    border: 1px solid var(--primary) !important;
    background: #ffffff;
    font-family: 'Mulish', sans-serif !important;
    text-align: center;
    box-shadow: 0 50px 100px rgba(0,0,0,0.4);
}

.close-btn-x {
    position: absolute !important;
    top: 20px !important;
    right: 25px !important;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    color: #999;
    transition: 0.2s;
}

.close-btn-x:hover {
    color: var(--primary);
}

.modal-header i {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 15px;
}

.modal-header h3 {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 15px;
}

/* Fix lỗi tràn chữ ra khỏi khung */
.modal-desc {
    white-space: normal !important; 
    word-wrap: break-word !important; 
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6 !important;
    margin-bottom: 25px;
    padding: 0 10px;
}

.download-btn {
    background: var(--primary) !important;
    height: 65px;
    font-size: 1.1rem !important;
    border-radius: 15px !important;
    box-shadow: 0 15px 30px rgba(135, 0, 22, 0.2) !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: white !important;
    font-weight: 800;
    transition: 0.3s;
}

.download-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 20px 40px rgba(135, 0, 22, 0.5) !important;
}

.contact-divider {
    margin: 25px 0;
    position: relative;

    border-top: 1px solid #eee;
}

.contact-divider span {
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 0 15px;
    font-size: 0.75rem;
    color: #aaa;
    font-weight: 700;
    white-space: nowrap;
}

/* Nút gửi email gọi trực tiếp ứng dụng */
.btn-email-fast {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: #f8f8f8;
    color: #333 !important;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.btn-email-fast:hover {
    background: var(--primary);
    color: white !important;
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(135, 0, 22, 0.2);
}

.cancel-btn {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid #eee !important;
    color: #999 !important;
    font-family: 'Mulish', sans-serif !important;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.cancel-btn:hover {
    background: #f5f5f5;
    color: #333 !important;
    border-color: #bbb !important;
}



/* =========================================
   TRANG VINH DANH NHÀ TÀI TRỢ KIM CƯƠNG
   ========================================= */

/* --- 1. HERO BANNER (Giữ nền tối để tôn Logo trắng của nhà tài trợ) --- */
.sponsor-detail-hero {
    height: 70vh;
    min-height: 500px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Mulish', sans-serif !important;
}

.sponsor-detail-hero .glass-overlay {
    background: rgba(17, 17, 17, 0.7); /* Kính mờ đen để chữ trắng nổi bật */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 0 20px;
}

.badge-tier {
    padding: 8px 25px; border-radius: 50px; font-weight: 800; letter-spacing: 2px;
    font-size: 0.85rem; margin-bottom: 30px; border: 1px solid;
}

/* Đổi Neon Cyan thành Xanh cổ vịt (Accent) cho sang trọng */
.diamond-badge { 
    background: rgba(14, 153, 166, 0.2); 
    color: #ffffff; 
    border-color: var(--accent); 
    box-shadow: 0 0 20px rgba(14, 153, 166, 0.4); 
}

.sponsor-main-logo {
    max-width: 300px; max-height: 150px; object-fit: contain; margin-bottom: 30px;
    filter: drop-shadow(0 0 15px rgba(255,255,255,0.3));
}

.sponsor-detail-hero h1 { color: white; font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: 3px; }

/* --- 2. CÂU CHUYỆN THƯƠNG HIỆU (LIGHT THEME) --- */
.sponsor-story-section { 
    padding: 100px 0; 
    background: #ffffff; /* Nền trắng tinh khôi */
    font-family: 'Mulish', sans-serif !important;
}
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

.story-content h2 { color: var(--dark); font-size: 2.2rem; margin-bottom: 25px; line-height: 1.4; font-weight: 900; text-transform: uppercase;}
.story-content .text-glow { color: var(--primary); text-shadow: 0 5px 15px rgba(135, 0, 22, 0.2); }

.story-content p { font-size: 1.1rem; line-height: 1.8; margin-bottom: 20px; color: #555; font-weight: 500;}
.story-content strong { color: var(--primary); font-weight: 800; }

.story-image img {
    width: 100%; border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08); /* Bóng nhạt đi */
    border: 1px solid #eee;
}

/* --- 3. GÓC NHÌN THƯƠNG HIỆU (NỀN KEM SECONDARY) --- */
.sponsor-tvc-section {
    padding: 100px 0 120px;
    background: var(--secondary); /* Đổi màu nền luân phiên để tránh nhàm chán */
    text-align: center;
    font-family: 'Mulish', sans-serif !important;
}
.tvc-header { margin-bottom: 50px; }
.tvc-header .badge-tier { color: var(--accent); border-color: var(--accent); background: rgba(14, 153, 166, 0.1); box-shadow: none;}
.tvc-header h2 { color: var(--dark); font-size: 2.5rem; font-weight: 900; margin-bottom: 15px; margin-top: 15px; text-transform: uppercase;}
.tvc-header .text-glow { color: var(--accent); }
.tvc-header p { color: #666; font-size: 1.1rem; font-weight: 500;}

.video-glass-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.6); /* Kính mờ sáng */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid #ffffff;
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.05);
}

.video-glass-wrapper iframe {
    width: 100%;
    aspect-ratio: 16/9; 
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Viền Video nhấn màu Xanh cổ vịt thay vì Neon */
.diamond-video-border {
    border-color: rgba(14, 153, 166, 0.3) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.05), 0 0 30px rgba(14, 153, 166, 0.1) !important;
}

/* --- 4. SHOWCASE SẢN PHẨM (TRỞ LẠI NỀN TRẮNG) --- */
.sponsor-product-showcase { 
    padding: 100px 0 120px; 
    background: #ffffff; 
    font-family: 'Mulish', sans-serif !important;
}

.showcase-header { text-align: center; margin-bottom: 60px; }
.showcase-header h2 { color: var(--dark); font-size: 2.5rem; margin-bottom: 15px; font-weight: 900; text-transform: uppercase;}
.showcase-header .text-glow { color: var(--primary); }
.showcase-header p { color: #555; font-size: 1.1rem; font-weight: 500;}

.product-glass-card {
    display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 100%);
    backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
    border: 1px solid #eee;
    border-radius: 30px; padding: 60px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.04);
    align-items: center;
}

.product-img-col img { width: 100%; max-width: 400px; margin: 0 auto; display: block; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.1)); transition: 0.5s; }
.product-img-col img:hover { transform: scale(1.05) translateY(-10px); }

.promo-tag { background: rgba(135, 0, 22, 0.1); color: var(--primary); display: inline-block; padding: 8px 18px; border-radius: 50px; font-weight: 800; font-size: 0.85rem; margin-bottom: 20px; letter-spacing: 1px;}
.product-info-col h3 { color: var(--dark); font-size: 2rem; font-weight: 900; margin-bottom: 25px; line-height: 1.3; }

.product-features { list-style: none; padding: 0; margin-bottom: 30px; }
.product-features li { color: #555; margin-bottom: 15px; display: flex; align-items: flex-start; gap: 15px; font-size: 1.05rem; line-height: 1.5; font-weight: 600;}
.product-features i { color: var(--accent); font-size: 1.2rem; margin-top: 3px;}

.promo-code-box {
    background: #fafafa; border: 1px dashed #ccc;
    padding: 15px 25px; border-radius: 12px; display: inline-flex; align-items: center; gap: 15px; margin-bottom: 35px;
}
.promo-code-box span { color: #666; font-size: 0.95rem; font-weight: 600;}
.promo-code-box strong { color: var(--accent); font-size: 1.5rem; letter-spacing: 2px; font-weight: 900;}

.btn-product-buy {
    display: block; text-align: center; background: var(--primary); color: white;
    padding: 18px 30px; border-radius: 50px; font-weight: 800; font-size: 1.1rem;
    text-decoration: none; transition: 0.3s; box-shadow: 0 10px 20px rgba(135,0,22,0.2);
}
.btn-product-buy:hover { background: #ffffff; color: var(--primary); border: 2px solid var(--primary); box-shadow: 0 15px 30px rgba(135,0,22,0.3); }

/* --- 5. BOTTOM CTA --- */
.sponsor-bottom-cta { padding: 80px 20px; text-align: center; background:  white; border-top: 1px solid rgba(0,0,0,0.05); }
.sponsor-bottom-cta p { color: #555; margin-bottom: 25px; font-size: 1.1rem; font-weight: 600;}
.btn-visit-website {
    display: inline-block; border: 2px solid var(--primary); color: var(--primary); padding: 15px 40px;
    border-radius: 50px; text-decoration: none; font-weight: 800; transition: 0.3s; background: transparent;
}
.btn-visit-website:hover { border-color: var(--primary); background: var(--primary); color: white; box-shadow: 0 10px 20px rgba(135,0,22,0.2);}

/* =========================================
   RESPONSIVE (ĐẢM BẢO ĐẸP TRÊN ĐIỆN THOẠI)
   ========================================= */
@media (max-width: 992px) {
    .story-grid, .product-glass-card { grid-template-columns: 1fr; gap: 40px; }
    .product-glass-card { padding: 40px 20px; }
    .sponsor-detail-hero h1 { font-size: 2.2rem; }
}

@media (max-width: 768px) {
    .story-content h2 { font-size: 1.8rem; }
    .showcase-header h2 { font-size: 2rem; }
    .product-info-col h3 { font-size: 1.6rem; }
    .promo-code-box { flex-direction: column; align-items: flex-start; gap: 5px; }
}


/* =========================================
   HỆ THỐNG MÀU RIÊNG CHO CÁC TIER TÀI TRỢ
   (Dùng chung cấu trúc Layout của trang Kim Cương)
   ========================================= */

/* --- TONE MÀU VÀNG GOLD (CHO TRANG NHÀ TÀI TRỢ VÀNG) --- */

/* Màu nhãn (Badge) */
.gold-badge { 
    background: rgba(212, 175, 55, 0.15); /* Nền vàng trong suốt */
    color: #D4AF37; /* Chữ vàng Gold sang trọng */
    border-color: #D4AF37; 
    box-shadow: none; 
}

/* Chữ phát sáng (Glow Text) */
.text-glow-gold { 
    color: #D4AF37; 
    text-shadow: 0 5px 15px rgba(212, 175, 55, 0.2); 
}

/* Viền bao quanh Video TVC */
.gold-video-border {
    border-color: rgba(212, 175, 55, 0.4) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.05), 0 0 30px rgba(212, 175, 55, 0.15) !important;
}

/* Hình ảnh Câu chuyện thương hiệu */
.gold-tier-page .story-image img {
    border: 1px solid rgba(212, 175, 55, 0.3);
}

/* Nút CTA cuối trang */
.btn-visit-website.gold-btn { 
    border-color: #D4AF37; 
    color: #D4AF37; 
}

.btn-visit-website.gold-btn:hover {
    background: #D4AF37;
    color: white; /* Hover ra nền vàng, chữ trắng */
    border-color: #D4AF37;
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
}



/* =========================================
   TRANG VINH DANH - HẠNG BẠC (LIGHT THEME)
   ========================================= */

/* --- 1. MINIMAL HEADER (NỀN TRẮNG/KEM) --- */
.sponsor-minimal-header {
    padding: 180px 20px 100px; 
    /* Gradient ánh kim nhẹ nhàng */
    background: linear-gradient(135deg, #ffffff 0%, var(--secondary) 100%);
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); 
    font-family: 'Mulish', sans-serif !important;
}

.minimal-header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sponsor-minimal-header .sponsor-main-logo {
    max-width: 250px; 
    max-height: 120px;
    object-fit: contain;
    margin-bottom: 25px;
    /* Đổ bóng xám đen nhẹ để logo nổi khối trên nền sáng */
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.08));
}

.sponsor-minimal-header h1 {
    color: var(--dark); /* Ép về màu đen để dễ đọc */
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 10px;
}

/* --- 2. TONE MÀU BẠC (SLATE GRAY ACCENTS) --- */

/* Huy hiệu Bạc */
.silver-badge {
    background: rgba(100, 116, 139, 0.1); /* Slate Gray trong suốt */
    color: #64748b; 
    border-color: #64748b;
    box-shadow: none;
}

/* Chữ nhấn màu Bạc */
.text-glow-silver {
    color: #64748b;
    text-shadow: 0 5px 15px rgba(100, 116, 139, 0.15);
}

/* Viền ảnh bên trong Brand Story có ánh kim loại */
.silver-tier-page .story-image img {
    border: 1px solid rgba(100, 116, 139, 0.2); 
}

/* Nút bấm CTA phong cách Bạc */
.btn-visit-website.silver-btn { 
    border: 2px solid #64748b; 
    color: #64748b; 
    background: transparent;
}

.btn-visit-website.silver-btn:hover {
    background: #64748b;
    color: #ffffff; 
    border-color: #64748b;
    box-shadow: 0 10px 20px rgba(100, 116, 139, 0.2);
}









/* =========================================
   TRANG LIÊN HỆ
   ========================================= */


/* =========================================
   1. HERO BANNER (VIDEO BACKGROUND CHUẨN KÍNH MỜ)
   ========================================= */

.team-hero {
    height: 100vh;
    min-height: 450px;
    position: relative; /* Quan trọng: Để video và overlay bám vào khung này */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 200px; 
    box-sizing: border-box; 
    overflow: hidden; /* Cắt bỏ phần video bị thừa ra ngoài khung */
    margin-top: 70px; 
    
    /* ĐÃ XÓA thuộc tính background: url(...) ở đây */
}

/* --- VIDEO NỀN CỦA BANNER --- */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ép video tràn viền đầy đủ 100vh mà không bị méo tỷ lệ */
    z-index: 1; /* Lớp dưới cùng */
}


/* Các thuộc tính .team-hero-logo hay animation cũ bạn vẫn giữ nguyên không cần đổi nhé */

/* =========================================
   2. LOGO PAWNS TEAM & TYPOGRAPHY
   ========================================= */

.team-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.team-hero-logo {
    max-width: 360px; 
    max-height: 240px;
    object-fit: contain;
    
    /* Hào quang đỏ đô (Glow effect) bọc quanh logo trắng */
    filter: drop-shadow(0 0 25px rgba(135, 0, 22, 0.8)); 
    
    /* Hiệu ứng trượt mượt mà từ trên xuống */
    animation: fadeInDownLogo 1s ease-out forwards;
}

/* Keyframes cho hiệu ứng xuất hiện của Logo */
@keyframes fadeInDownLogo {
    0% {
        opacity: 0;
        transform: translateY(-40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.team-hero-content h1 {
    font-size: clamp(2.5rem, 5vw, 4rem); /* Tự động co giãn text theo màn hình */
    letter-spacing: 5px;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: 900;
    color: #ffffff; /* Đảm bảo chữ trắng sáng */
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Đổ bóng chữ tạo độ sâu */
}

.team-hero-content p {
    font-size: 1rem;
    font-weight: 500;
    color: #e0e0e0;
    letter-spacing: 1px;
    white-space: nowrap;
}





/* =========================================
   2. SƠ ĐỒ TỔ CHỨC (GLASSMORPHISM & TREE)
   ========================================= */
.org-chart-section {
    padding: 100px 0;
    /* Nền xám/kem cực sang để tôn các thẻ kính lên */
    background: linear-gradient(135deg, #fdfdfd 0%, #f0f0f0 100%);
    font-family: 'Mulish', sans-serif !important;
}

.org-chart-section .section-title {
    text-align: center; 
    color: var(--primary); 
    font-size: 2.5rem;
    margin-bottom: 70px; 
    text-transform: uppercase; 
    font-weight: 900;
    letter-spacing: 2px;
}

/* --- THIẾT KẾ THẺ THÀNH VIÊN (GLASS CARD) --- */
.member-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    padding: 30px 15px 25px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: auto; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Dải màu đỏ trên đỉnh thẻ (Ẩn hiện khi hover) */
.member-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--primary), #ff4d6d);
    opacity: 0;
    transition: 0.4s ease;
}

.member-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(135, 0, 22, 0.1);
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(135, 0, 22, 0.2);
}

.member-card:hover::before {
    opacity: 1;
}

/* --- ẢNH ĐẠI DIỆN (AURA EFFECT) --- */
.member-img {
    width: 120px; height: 120px;
    margin-bottom: 15px;
    border-radius: 50%;
    padding: 4px; 
    background: linear-gradient(135deg, var(--primary), #ff4d6d); /* Hào quang đỏ */
    box-shadow: 0 8px 20px rgba(135, 0, 22, 0.15);
    flex-shrink: 0;
    transition: 0.4s ease;
}

.member-img img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
    border-radius: 50%;
    border: 3px solid #ffffff; /* Viền trong trắng muốt */
    transition: 0.4s ease;
}

.member-card:hover .member-img {
    transform: scale(1.05);
}

/* TYPOGRAPHY */
.member-card h3, .member-card h4 {
    color: var(--dark); 
    margin-bottom: 5px; 
    font-weight: 800; 
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

.role {
    display: block; 
    font-size: 0.8rem; 
    color: var(--primary);
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 1px;
}

/* =========================================
   CẤU TRÚC NHÁNH CÂY (TREE BRANCHES)
   ========================================= */

/* Cấp 1: Boss */
.level-1 {
    display: flex; justify-content: center; margin-bottom: 60px; position: relative;
}

/* Cột trụ chính nối Boss xuống dưới */
.level-1::after {
    content: ''; position: absolute; bottom: -30px;
    width: 2px; height: 30px; 
    background: linear-gradient(to bottom, var(--primary), rgba(135, 0, 22, 0.2)); 
}

/* Thẻ Boss to hơn và rực rỡ hơn */
.boss-card {
    width: 100%; max-width: 320px; 
    border-top: 4px solid var(--primary);
}
.boss-card::before { opacity: 1; } /* Boss luôn hiện viền đỏ */
.boss-card .member-img { width: 150px; height: 150px; }
.boss-card h3 { font-size: 1.4rem; color: var(--primary); }

/* Cấp 2: Các Team (Grid) */
.level-2-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px; /* Nới rộng khoảng cách các team */
    /* Thanh ngang nối các nhánh (Đổi màu xám thành đỏ mờ sang trọng) */
    border-top: 2px solid rgba(135, 0, 22, 0.2); 
    padding-top: 40px;
    align-items: start; 
}

/* Cột của mỗi Team */
.team-column {
    display: flex; flex-direction: column; align-items: center;
    position: relative; justify-content: flex-start;
}

/* Nhánh thả xuống từng Team */
.team-column::before {
    content: ''; display: block; width: 2px; height: 30px;
    background: linear-gradient(to bottom, rgba(135, 0, 22, 0.2), var(--primary)); 
    margin-top: -40px; margin-bottom: 20px;
}

/* Tên Team (Huy hiệu) */
.team-name {
    background: var(--primary); 
    color: white; 
    padding: 8px 30px;
    border-radius: 50px; 
    margin-bottom: 30px; 
    font-weight: 800;
    white-space: nowrap; 
    box-shadow: 0 8px 20px rgba(135, 0, 22, 0.4);
    letter-spacing: 1px;
    font-size: 1rem;
}

/* Leader Card */
.leader-card {
    width: 100%; margin-bottom: 20px;
    border: 1px solid rgba(135, 0, 22, 0.15); /* Nhấn nhẹ Leader */
}

/* --- LƯỚI MEMBER BÊN TRONG (MEMBERS GRID) --- */
.team-members-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 15px;
    width: 100%;
    padding-top: 20px;
    border-top: 1px dashed rgba(135, 0, 22, 0.2); /* Đường phân cách Leader & Member */
    margin-top: 10px;
}

.team-members-grid .member-card {
    height: 100%; padding: 25px 10px 20px;
}

/* Member ảnh nhỏ hơn một chút */
.team-members-grid .member-img {
    width: 90px; height: 90px;
}

.team-members-grid h4 { font-size: 0.95rem; }
.team-members-grid .role { font-size: 0.7rem; color: #777; }




/* =========================================
   LIÊN HỆ & FORM (LIGHT GLASSMORPHISM THEME)
   ========================================= */
.contact-split-section { 
    padding: 120px 0; 
    /* Nền gradient pha trộn giữa Trắng và Kem (--secondary) */
    background: linear-gradient(135deg, #ffffff 0%, var(--secondary) 100%);
    font-family: 'Mulish', sans-serif !important;
}

/* Khối bao bọc 2 cột - Kính mờ trắng sang trọng */
.contact-glass-wrapper { 
    display: grid; 
    grid-template-columns: 1fr 1.2fr; 
    gap: 0; 
    background: rgba(255, 255, 255, 0.85); /* Kính mờ nền trắng */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid #ffffff; /* Viền trắng tinh */
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05); /* Đổ bóng xám nhạt */
}

/* --- CỘT THÔNG TIN (TRÁI) --- */
.contact-info {
    padding: 60px 50px;
    background: linear-gradient(135deg, rgba(135, 0, 22, 0.03) 0%, transparent 100%); /* Phủ một lớp đỏ cực nhạt */
    border-right: 1px solid rgba(0, 0, 0, 0.05); /* Viền xám mờ phân cách 2 cột */
}

.contact-info h2 { 
    color: var(--dark); /* Chữ đen quyền lực */
    font-size: 2.2rem; 
    margin-bottom: 20px; 
    font-weight: 900;
}

.text-glow { 
    color: var(--primary); 
    /* Trên nền sáng thì không nên dùng glow quá mạnh, chỉ cần đổ bóng nhẹ tạo khối */
    text-shadow: 0 5px 15px rgba(135, 0, 22, 0.2); 
    white-space: nowrap;
}
@media (max-width: 768px) {
    .text-glow {
        font-size: 2rem;
    }
}
    

.contact-info .desc { 
    color: #555; /* Chữ xám đậm dễ đọc */
    margin-bottom: 40px; 
    line-height: 1.6; 
    font-size: 0.95rem;
}

.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    gap: 20px;
}

.info-icon {
    width: 45px; height: 45px;
    background: rgba(135, 0, 22, 0.1);
    color: var(--primary); /* Icon màu đỏ đô */
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.2rem;
}

.info-text h4 { font-size: 0.8rem; color: #888; margin-bottom: 5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;}
.info-text p { font-size: 1rem; color: #444; font-weight: 500; line-height: 1.5; }
.info-text .highlight-text { font-size: 1.2rem; color: var(--accent); font-weight: 800; } /* Số điện thoại/Email màu Xanh cổ vịt cho nổi bật */

/* --- CỘT FORM (PHẢI) --- */
.contact-form-col {
    padding: 60px 50px;
    background: #ffffff; /* Cột form nền trắng tinh để dễ nhìn form */
}

.contact-form-col h3 { 
    font-size: 1.5rem; 
    margin-bottom: 30px; 
    color: var(--dark); 
    font-weight: 800;
}

.premium-form .split-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Kỹ thuật Floating Label (Nhãn bay lên) */
.input-group {
    position: relative;
    margin-bottom: 25px;
}

.input-group input, 
.input-group textarea {
    width: 100%;
    padding: 15px 20px;
    background: #ffffff; /* Nền input trắng */
    border: 1px solid #ddd; /* Viền xám nhạt */
    border-radius: 12px;
    color: var(--dark); /* Gõ chữ màu đen */
    font-size: 1rem;
    font-family: 'Mulish', sans-serif;
    transition: all 0.3s ease;
}

.input-group textarea { resize: vertical; min-height: 120px; }

.input-group label {
    position: absolute;
    top: 15px;
    left: 20px;
    color: #888;
    font-size: 1rem;
    pointer-events: none;
    transition: 0.3s ease;
    background: transparent;
}

/* Hiệu ứng khi focus hoặc có chữ */
.input-group input:focus, 
.input-group textarea:focus {
    border-color: var(--primary); /* Đổi viền sang Đỏ đô khi click */
    background: #fff;
    outline: none;
    box-shadow: 0 0 15px rgba(135, 0, 22, 0.08); /* Ánh sáng đỏ nhẹ xung quanh viền */
}

/* Khi chữ bay lên trên viền */
.input-group input:focus ~ label,
.input-group input:not(:placeholder-shown) ~ label,
.input-group textarea:focus ~ label,
.input-group textarea:not(:placeholder-shown) ~ label {
    top: -10px;
    left: 15px;
    font-size: 0.75rem;
    color: var(--primary);
    background: #ffffff; /* Lót nền trắng để che đường viền xám phía dưới */
    padding: 0 8px;
    font-weight: 700;
}

/* Checkbox */
.checkbox-row {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 30px;
}
.checkbox-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.checkbox-row label { color: #555; font-size: 0.9rem; cursor: pointer; font-weight: 500;}

/* Nút Submit Rực Rỡ */
.btn-submit-glow {
    width: 100%;
    background: var(--primary);
    color: white;
    padding: 18px;
    border: 2px solid var(--primary);
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: all 0.3s;
    box-shadow: 0 10px 20px rgba(135, 0, 22, 0.2);
    font-family: 'Mulish', sans-serif !important; 
}

/* Hover: Đổi thành nút Trắng, chữ Đỏ đô, viền Đỏ đô */
.btn-submit-glow:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(135, 0, 22, 0.3);
    background: #ffffff;
    color: var(--primary);
}

/* Box thông báo kết quả */
.form-result-msg {
    margin-top: 15px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
}
.text-success { color: var(--accent); } /* Đổi màu xanh lá thành xanh cổ vịt cho sang */
.text-error { color: #f87171; }

/* RESPONSIVE */
@media (max-width: 992px) {
    .contact-glass-wrapper { grid-template-columns: 1fr; }
    .contact-info { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.05); }
}
@media (max-width: 768px) {
    .premium-form .split-row { grid-template-columns: 1fr; }
    .contact-info, .contact-form-col { padding: 40px 20px; }
}



/* =========================================
   RESPONSIVE: XỬ LÝ GIAO DIỆN MOBILE & TABLET
   ========================================= */

/* --- ĐIỆN THOẠI (Dưới 768px) --- */
@media (max-width: 768px) {
    
    /* 1. XỬ LÝ VIDEO BANNER (ÉP VỀ 16:9) */
    .team-hero {
        height: auto; 
        aspect-ratio: 16/9; /* Ép khung chứa về đúng tỷ lệ chuẩn của video ngang */
        min-height: 220px; /* Đảm bảo không bị quá nát trên màn hình quá bé */
        padding-top: 70px !important; /* Giảm padding vì chiều cao banner giờ rất ngắn */
        margin-top: 70px; 
    
        position: relative; 
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    
    /* Vì đã có margin-top đẩy xuống rồi, bạn có thể giảm padding-top xuống 
       để logo Pawns không bị đẩy xuống quá sâu */
    
        box-sizing: border-box; 
        overflow: hidden;
    }


    /* 2. XỬ LÝ SƠ ĐỒ TỔ CHỨC (XẾP DỌC) */
    .org-chart-section {
        padding: 60px 0;
    }
    
    .org-chart-section .section-title {
        font-size: 1.8rem;
        margin-bottom: 40px;
    }

    .level-2-grid {
        grid-template-columns: 1fr; /* Ép tất cả các Team xếp thành 1 cột dọc */
        gap: 50px; /* Tăng khoảng cách giữa các Team cho dễ nhìn */
        padding-top: 0;
    }
    
    .boss-card {
        max-width: 260px; /* Thu nhỏ thẻ Boss một chút */
    }
    
    .level-1 {
        margin-bottom: 30px;
    }

    /* Giấu luôn cái đuôi rủ xuống của thẻ Boss vì bên dưới các team đã xếp dọc */
    .level-1::after {
        display: none;
    }
}

/* --- ĐIỆN THOẠI NHỎ (Dưới 480px) --- */
@media (max-width: 480px) {
    /* Nếu màn hình quá chật, ép các member bên trong team xếp thành 1 cột luôn */
    .team-members-grid {
        grid-template-columns: 1fr; 
    }
    
    /* Layout nằm ngang cho thẻ member để tiết kiệm chiều cao (Ảnh 1 bên, chữ 1 bên) */
    .team-members-grid .member-card {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        padding: 15px;
        gap: 15px;
    }
    
    .team-members-grid .member-img {
        width: 60px; height: 60px;
        margin-bottom: 0;
    }
}