/* ==========================================================================
   XX88BL.COM - HỆ THỐNG GIAO DIỆN CHUYÊN NGHIỆP PRO MAX (2026)
   Phong cách: Cyber Luxury Sports Broadcast & Interactive 3D Arena
   Màu sắc: Electric Cyan (#00d2ff), Deep Obsidian (#040814), Cyber Gold (#ffd700)
   Font chữ: Chakra Petch, Russo One, Be Vietnam Pro, Inter
   ========================================================================== */

:root {
    /* Bảng màu chủ đạo (Color Tokens) */
    --bg-main: #040814;
    --bg-surface: #070e20;
    --bg-card: rgba(10, 20, 44, 0.75);
    --bg-card-hover: rgba(14, 28, 62, 0.9);
    --bg-glass: rgba(6, 14, 32, 0.82);

    --primary-cyan: #00d2ff;
    --primary-blue: #0077ff;
    --primary-glow: rgba(0, 210, 255, 0.45);
    
    --accent-gold: #ffd700;
    --accent-gold-dark: #ff9900;
    --accent-gold-glow: rgba(255, 215, 0, 0.45);

    --live-red: #ff1e46;
    --live-green: #00ff88;

    --border-subtle: rgba(0, 210, 255, 0.15);
    --border-glow: rgba(0, 210, 255, 0.4);
    --border-gold: rgba(255, 215, 0, 0.35);

    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    /* Typography */
    --font-heading: 'Chakra Petch', 'Russo One', sans-serif;
    --font-body: 'Be Vietnam Pro', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Hiệu ứng chuyển động (Micro-interactions) */
    --transition-fast: 180ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-normal: 300ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow: 500ms cubic-bezier(0.16, 1, 0.3, 1);

    /* Độ bo góc */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    /* Layout */
    --container-max: 1280px;
    --header-height: 74px;
}

/* 1. RESET & BASE STYLES */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

button {
    font-family: inherit;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
}

/* 2. TOP MATCH TICKER & LATENCY TELEMETRY */
.top-ticker-bar {
    background: linear-gradient(90deg, #02040a 0%, #061126 50%, #02040a 100%);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.82rem;
    padding: 7px 0;
    position: relative;
    z-index: 100;
}

.top-ticker-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.ticker-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 30, 70, 0.15);
    border: 1px solid rgba(255, 30, 70, 0.4);
    color: #ff3366;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    text-transform: uppercase;
}

.pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--live-red);
    box-shadow: 0 0 8px var(--live-red);
    animation: livePulse 1.4s infinite;
}

@keyframes livePulse {
    0% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.7; }
}

.ticker-marquee-wrap {
    overflow: hidden;
    white-space: nowrap;
    flex: 1;
}

.ticker-track {
    display: inline-block;
    padding-left: 100%;
    animation: marqueeScroll 32s linear infinite;
}

.ticker-track:hover {
    animation-play-state: paused;
}

@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.ticker-match-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 36px;
    color: var(--text-secondary);
}

.ticker-match-item strong {
    color: #ffffff;
    font-weight: 600;
}

.ticker-match-item .odds {
    color: var(--accent-gold);
    font-weight: 700;
    background: rgba(255, 215, 0, 0.1);
    padding: 1px 6px;
    border-radius: 4px;
}

.top-telemetry-status {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    white-space: nowrap;
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--live-green);
    font-weight: 600;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--live-green);
    box-shadow: 0 0 6px var(--live-green);
}

/* 3. SITE HEADER (CYBER GLASS NAVBAR) */
.site-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background: var(--bg-glass);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border-subtle);
    z-index: 999;
    transition: background var(--transition-normal), box-shadow var(--transition-normal);
}

.site-header.scrolled {
    background: rgba(4, 10, 24, 0.94);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 210, 255, 0.12);
    border-bottom-color: var(--border-glow);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.brand-logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.brand-logo-img {
    height: 48px;
    width: auto;
    filter: drop-shadow(0 2px 8px rgba(0, 210, 255, 0.4));
    transition: transform var(--transition-fast);
}

.brand-logo-link:hover .brand-logo-img {
    transform: scale(1.03);
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-link {
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: relative;
    padding: 6px 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-cyan), var(--accent-gold));
    box-shadow: 0 0 8px var(--primary-cyan);
    transition: width var(--transition-normal);
}

.nav-link:hover, .nav-link.active {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
}

.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
}

.nav-link.badge-live::before {
    content: 'LIVE';
    position: absolute;
    top: -8px;
    right: -24px;
    background: var(--live-red);
    color: #ffffff;
    font-size: 0.6rem;
    font-weight: 900;
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1.2;
    animation: livePulse 1.2s infinite;
}

.header-cta-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ================================================================ */
/* PRO MAX EXTRAORDINARY CYBER BUTTON ARCHITECTURE                 */
/* ================================================================ */

/* Base Cyber Button */
.btn-cyber {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: 0.8px;
    padding: 12px 26px;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
    position: relative;
    user-select: none;
    box-sizing: border-box;
    border-radius: 12px;
}

.btn-cyber > *:not(.btn-sheen-sweep) {
    position: relative;
    z-index: 3;
}

/* 8-Sided Chamfered Diamond Sci-Fi Cutout */
.btn-cyber-special {
    clip-path: polygon(
        12px 0%,
        calc(100% - 12px) 0%,
        100% 12px,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        12px 100%,
        0% calc(100% - 12px),
        0% 12px
    );
    border-radius: 0 !important;
    overflow: hidden;
}

/* 3D Physical Extrusions conforming to Chamfered Polygons via drop-shadow */
.btn-cyber-special.btn-cyber-primary {
    filter: drop-shadow(0 6px 0 #003880) drop-shadow(0 12px 24px rgba(0, 180, 255, 0.55));
}
.btn-cyber-special.btn-cyber-primary:hover {
    filter: drop-shadow(0 8px 0 #003880) drop-shadow(0 16px 32px rgba(0, 210, 255, 0.75));
}
.btn-cyber-special.btn-cyber-primary:active {
    filter: drop-shadow(0 2px 0 #003880) drop-shadow(0 4px 10px rgba(0, 180, 255, 0.4));
}

.btn-cyber-special.btn-cyber-gold {
    filter: drop-shadow(0 6px 0 #734500) drop-shadow(0 12px 24px rgba(255, 170, 0, 0.6));
}
.btn-cyber-special.btn-cyber-gold:hover {
    filter: drop-shadow(0 8px 0 #734500) drop-shadow(0 16px 32px rgba(255, 200, 0, 0.8));
}
.btn-cyber-special.btn-cyber-gold:active {
    filter: drop-shadow(0 2px 0 #734500) drop-shadow(0 4px 10px rgba(255, 170, 0, 0.4));
}

.btn-cyber-special.btn-cyber-emerald {
    filter: drop-shadow(0 6px 0 #004d22) drop-shadow(0 12px 24px rgba(0, 255, 136, 0.6));
}
.btn-cyber-special.btn-cyber-emerald:hover {
    filter: drop-shadow(0 8px 0 #004d22) drop-shadow(0 16px 32px rgba(0, 255, 136, 0.8));
}
.btn-cyber-special.btn-cyber-emerald:active {
    filter: drop-shadow(0 2px 0 #004d22) drop-shadow(0 4px 10px rgba(0, 255, 136, 0.4));
}

.btn-cyber-special.btn-cyber-ghost {
    filter: drop-shadow(0 6px 0 #021a38) drop-shadow(0 8px 20px rgba(0, 210, 255, 0.35));
}
.btn-cyber-special.btn-cyber-ghost:hover {
    filter: drop-shadow(0 8px 0 #021a38) drop-shadow(0 12px 26px rgba(0, 210, 255, 0.55));
}
.btn-cyber-special.btn-cyber-ghost:active {
    filter: drop-shadow(0 2px 0 #021a38) drop-shadow(0 2px 8px rgba(0, 210, 255, 0.25));
}

/* 1. BUTTON CYAN QUANTUM CORE (LÕI LẠNH ĐIỆN TỬ - 3D HYDRAULIC CHASSIS) */
.btn-cyber-primary {
    background: 
        linear-gradient(180deg, rgba(100, 240, 255, 0.35) 0%, rgba(0, 15, 40, 0.6) 100%),
        url('../images/btn-cyan-ai.jpg') center / cover no-repeat,
        linear-gradient(135deg, #00d2ff 0%, #0055dd 100%);
    color: #ffffff;
    border: 1.5px solid #3de3ff;
    box-shadow: 
        0 6px 0 #004499,
        0 12px 28px rgba(0, 180, 255, 0.6),
        0 0 22px rgba(0, 210, 255, 0.4),
        inset 0 2px 2px rgba(255, 255, 255, 0.8),
        inset 0 -2px 6px rgba(0, 0, 0, 0.8);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 14px rgba(0, 210, 255, 0.9);
}

.btn-cyber-primary:hover {
    transform: translateY(-2px);
    border-color: #ffffff;
    box-shadow: 
        0 8px 0 #004499,
        0 16px 36px rgba(0, 180, 255, 0.8),
        0 0 32px rgba(0, 210, 255, 0.65),
        inset 0 2px 3px rgba(255, 255, 255, 0.95);
}

.btn-cyber-primary:active {
    transform: translateY(4px);
    box-shadow: 
        0 2px 0 #004499,
        0 4px 12px rgba(0, 180, 255, 0.5),
        inset 0 3px 6px rgba(0, 0, 0, 0.8);
}

/* 2. BUTTON GOLD ULTRA VIP (CHÚA TỂ VÀNG KIM - 3D HYDRAULIC REACTOR) */
.btn-cyber-gold {
    background: 
        linear-gradient(180deg, rgba(255, 230, 100, 0.35) 0%, rgba(20, 10, 0, 0.6) 100%),
        url('../images/btn-gold-ai.jpg') center / cover no-repeat,
        linear-gradient(135deg, #ffd700 0%, #ff8800 100%);
    color: #ffffff;
    border: 1.5px solid #ffe24a;
    box-shadow: 
        0 6px 0 #8c5700,
        0 12px 28px rgba(255, 170, 0, 0.6),
        0 0 22px rgba(255, 215, 0, 0.4),
        inset 0 2px 2px rgba(255, 255, 255, 0.8),
        inset 0 -2px 6px rgba(0, 0, 0, 0.8);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 14px rgba(255, 215, 0, 0.9);
}

.btn-cyber-gold:hover {
    transform: translateY(-2px);
    border-color: #ffffff;
    box-shadow: 
        0 8px 0 #8c5700,
        0 16px 36px rgba(255, 170, 0, 0.8),
        0 0 32px rgba(255, 215, 0, 0.65),
        inset 0 2px 3px rgba(255, 255, 255, 0.95);
}

.btn-cyber-gold:active {
    transform: translateY(4px);
    box-shadow: 
        0 2px 0 #8c5700,
        0 4px 12px rgba(255, 170, 0, 0.5),
        inset 0 3px 6px rgba(0, 0, 0, 0.8);
}

/* 3. BUTTON GHOST (CYBER BRUSHED TITANIUM) */
.btn-cyber-ghost {
    background: 
        linear-gradient(180deg, rgba(20, 50, 100, 0.45) 0%, rgba(4, 14, 34, 0.9) 100%),
        url('../images/btn-cyan-ai.jpg') center / cover no-repeat,
        linear-gradient(135deg, #051430 0%, #0b224c 100%);
    border: 1.5px solid rgba(0, 210, 255, 0.65);
    color: #ffffff;
    backdrop-filter: blur(12px);
    box-shadow: 
        0 6px 0 #021a38,
        0 8px 20px rgba(0, 0, 0, 0.6),
        0 0 16px rgba(0, 210, 255, 0.25),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 210, 255, 0.8);
}

.btn-cyber-ghost:hover {
    background: 
        linear-gradient(180deg, rgba(0, 210, 255, 0.35) 0%, rgba(10, 30, 70, 0.8) 100%),
        url('../images/btn-cyan-ai.jpg') center / cover no-repeat,
        linear-gradient(135deg, #0a2558 0%, #004499 100%);
    border-color: #ffffff;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 
        0 8px 0 #021a38,
        0 14px 30px rgba(0, 210, 255, 0.5),
        0 0 24px rgba(0, 210, 255, 0.4),
        inset 0 1px 3px rgba(255, 255, 255, 0.7);
}

.btn-cyber-ghost:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #021a38, 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* 4. BUTTON EMERALD CASH REACTOR (NGỌC LỤC BẢO TIỀN TÀI 3D) */
.btn-cyber-emerald {
    background: 
        linear-gradient(180deg, rgba(0, 255, 136, 0.4) 0%, rgba(0, 30, 15, 0.75) 100%),
        url('../images/btn-gold-ai.jpg') center / cover no-repeat,
        linear-gradient(135deg, #00ff88 0%, #008844 100%);
    color: #ffffff;
    border: 1.5px solid #00ff88;
    box-shadow: 
        0 6px 0 #004d22,
        0 12px 28px rgba(0, 255, 136, 0.6),
        0 0 22px rgba(0, 255, 136, 0.4),
        inset 0 2px 2px rgba(255, 255, 255, 0.8),
        inset 0 -2px 6px rgba(0, 0, 0, 0.8);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 14px rgba(0, 255, 136, 0.9);
}

.btn-cyber-emerald:hover {
    transform: translateY(-2px);
    border-color: #ffffff;
    box-shadow: 
        0 8px 0 #004d22,
        0 16px 36px rgba(0, 255, 136, 0.8),
        0 0 32px rgba(0, 255, 136, 0.65),
        inset 0 2px 3px rgba(255, 255, 255, 0.95);
}

.btn-cyber-emerald:active {
    transform: translateY(4px);
    box-shadow: 
        0 2px 0 #004d22,
        0 4px 12px rgba(0, 255, 136, 0.5),
        inset 0 3px 6px rgba(0, 0, 0, 0.8);
}

/* QUÉT TIA LASER HOLOGRAPHIC (PRISMATIC SHEEN SWEEP) */
.btn-sheen-sweep {
    position: absolute;
    top: -50%;
    left: -120%;
    width: 80%;
    height: 200%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.75) 45%,
        rgba(0, 240, 255, 0.9) 50%,
        rgba(255, 215, 0, 0.8) 55%,
        transparent 70%
    );
    transform: skewX(-25deg);
    animation: cyberLaserSweep 3.4s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes cyberLaserSweep {
    0% { left: -120%; opacity: 0; }
    25% { opacity: 0.9; }
    55% { left: 160%; opacity: 0; }
    100% { left: 160%; opacity: 0; }
}

.btn-cyber:hover .btn-sheen-sweep {
    animation-duration: 1.6s !important;
}

/* HUY HIỆU KIM CƯƠNG +58K GẮN TRONG NÚT */
.btn-diamond-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #fff3a8 0%, #ffd700 50%, #ff8800 100%);
    color: #040814;
    font-size: 0.74rem;
    font-weight: 900;
    padding: 3px 9px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.9), inset 0 1px 1px #ffffff;
    border: 1px solid #ffffff;
    text-shadow: none;
    animation: diamondPulse 2s infinite ease-in-out;
}

@keyframes diamondPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.7); transform: scale(1); }
    50% { box-shadow: 0 0 18px rgba(255, 215, 0, 1), 0 0 28px rgba(255, 170, 0, 0.8); transform: scale(1.04); }
}

/* MŨI TÊN CHỈ BÁO KINETIC CYBER */
.btn-arrow-icon {
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
    margin-left: 2px;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-block;
}

.btn-cyber:hover .btn-arrow-icon {
    transform: translateX(4px);
}

/* ICON SẤM SÉT VÀNG PHÁT ĐIỆN */
.gold-icon-pulse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: lightningVibrate 2.4s infinite;
}

@keyframes lightningVibrate {
    0%, 90%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px #ffd700); }
    92% { transform: scale(1.15) rotate(-3deg); filter: drop-shadow(0 0 14px #ffffff); }
    94% { transform: scale(1.2) rotate(3deg); filter: drop-shadow(0 0 18px #ffd700); }
    96% { transform: scale(1.1) rotate(-1deg); filter: drop-shadow(0 0 12px #ffaa00); }
}

/* NÚT ĐĂNG KÝ TRÊN HEADER CŨNG THÀNH SIÊU PHẨM */
.btn-header-register {
    padding: 8px 18px !important;
    font-size: 0.86rem !important;
}

.btn-bonus-tag {
    background: linear-gradient(135deg, #ff1e46, #d9002c);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 900;
    padding: 3px 7px;
    border-radius: 8px;
    margin-left: 4px;
    box-shadow: 0 0 8px rgba(255, 30, 70, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Nút toggle mở menu mobile */
.mobile-toggle-btn {
    display: none;
    width: 42px;
    height: 42px;
    background: rgba(0, 210, 255, 0.1);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-md);
    color: var(--primary-cyan);
    align-items: center;
    justify-content: center;
}

/* 4. HERO SECTION WITH 3D WEBGL ARENA */
.hero-stage-section {
    position: relative;
    min-height: 640px;
    padding: 40px 0 60px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: radial-gradient(circle at 65% 40%, rgba(0, 119, 255, 0.15) 0%, rgba(4, 8, 20, 0.95) 70%);
}

/* 3D WebGL Canvas Layer */
.webgl-canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.hero-content-grid {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 40px;
    align-items: center;
}

.hero-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 210, 255, 0.1);
    border: 1px solid var(--border-glow);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-cyan);
    margin-bottom: 20px;
    backdrop-filter: blur(8px);
}

.hero-main-title {
    font-family: var(--font-heading);
    font-size: 3.2rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.hero-main-title .gradient-text {
    background: linear-gradient(135deg, #00d2ff 0%, #ffffff 50%, #ffd700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 25px rgba(0, 210, 255, 0.35);
}

.hero-subdesc {
    color: var(--text-secondary);
    font-size: 1.05rem;
    max-width: 580px;
    margin-bottom: 30px;
    line-height: 1.65;
}

.hero-subdesc strong {
    color: #ffffff;
}

.hero-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 36px;
}

.hero-action-row .btn-cyber {
    padding: 14px 28px;
    font-size: 1rem;
}

/* TRẠM ĐIỀU KHIỂN ÂM THANH BLV (CYBER ACOUSTIC CONSOLE) */
.audio-preview-dock {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(8, 20, 48, 0.95) 0%, rgba(3, 8, 22, 0.98) 100%);
    border: 1.5px solid rgba(0, 210, 255, 0.5);
    padding: 10px 18px;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 
        0 6px 0 #021a38,
        0 10px 24px rgba(0, 0, 0, 0.6),
        0 0 18px rgba(0, 210, 255, 0.25),
        inset 0 1px 1px rgba(255, 255, 255, 0.3);
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease;
    user-select: none;
    position: relative;
    overflow: hidden;
}

.audio-preview-dock:hover {
    transform: translateY(-2px);
    border-color: #00f0ff;
    box-shadow: 
        0 8px 0 #021a38,
        0 14px 30px rgba(0, 210, 255, 0.4),
        0 0 25px rgba(0, 210, 255, 0.5);
}

.audio-preview-dock:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #021a38, 0 4px 10px rgba(0, 0, 0, 0.5);
}

.audio-preview-dock.playing {
    border-color: #00ff88;
    box-shadow: 
        0 6px 0 #004d26,
        0 12px 28px rgba(0, 255, 136, 0.45),
        0 0 25px rgba(0, 255, 136, 0.4);
}

.audio-mic-icon {
    color: var(--primary-cyan);
    display: inline-flex;
    align-items: center;
    filter: drop-shadow(0 0 6px rgba(0, 210, 255, 0.8));
}

.audio-preview-dock.playing .audio-mic-icon {
    color: #00ff88;
    filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.9));
}

.sound-wave-bars {
    display: flex;
    align-items: flex-end;
    gap: 3.5px;
    height: 18px;
    padding-bottom: 1px;
}

.sound-wave-bar {
    width: 3.5px;
    height: 5px;
    background: linear-gradient(180deg, #00f0ff, #0077ff);
    border-radius: 2px;
    transition: height 0.2s ease, background 0.2s ease;
}

.sound-wave-bar.wave-active:nth-child(1) { animation: wavePulse 0.7s infinite 0.1s; background: linear-gradient(180deg, #00ff88, #00a3ff); }
.sound-wave-bar.wave-active:nth-child(2) { animation: wavePulse 0.65s infinite 0.3s; background: linear-gradient(180deg, #ffd700, #ff8800); }
.sound-wave-bar.wave-active:nth-child(3) { animation: wavePulse 0.8s infinite 0.2s; background: linear-gradient(180deg, #00f0ff, #00ff88); }
.sound-wave-bar.wave-active:nth-child(4) { animation: wavePulse 0.6s infinite 0.4s; background: linear-gradient(180deg, #ffd700, #00ff88); }
.sound-wave-bar.wave-active:nth-child(5) { animation: wavePulse 0.75s infinite 0.15s; background: linear-gradient(180deg, #00f0ff, #0088ff); }
.sound-wave-bar.wave-active:nth-child(6) { animation: wavePulse 0.7s infinite 0.25s; background: linear-gradient(180deg, #00ff88, #ffd700); }

@keyframes wavePulse {
    0%, 100% { height: 5px; }
    50% { height: 18px; }
}

.audio-label {
    font-size: 0.82rem;
    font-weight: 800;
    color: #e2e8f0;
    letter-spacing: 0.5px;
    font-family: var(--font-heading);
}

.audio-preview-dock.playing .audio-label {
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.7);
}

/* Hero Right Column: Official XX88 Video Cyber Showcase */
.hero-video-card-cyber {
    position: relative;
    border-radius: 20px;
    padding: 2.5px;
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.7) 0%, rgba(255, 215, 0, 0.6) 50%, rgba(0, 102, 235, 0.7) 100%);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 210, 255, 0.35);
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.hero-video-card-cyber:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.9), 0 0 45px rgba(0, 210, 255, 0.5);
}

.video-card-inner {
    position: relative;
    background: #030816;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.video-verified-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    background: rgba(3, 8, 22, 0.88);
    border: 1px solid rgba(0, 210, 255, 0.45);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    padding: 5px 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

.verified-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 8px #00ff88;
    animation: pulseDot 1.5s infinite;
}

.video-player-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

.hero-official-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    background: linear-gradient(180deg, rgba(8, 18, 42, 0.98) 0%, rgba(4, 9, 22, 1) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.video-pique-info h4 {
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--accent-gold);
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.video-pique-info p {
    font-size: 0.74rem;
    color: #94a3b8;
}

.btn-video-sound {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 210, 255, 0.15);
    border: 1px solid rgba(0, 210, 255, 0.45);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.btn-video-sound:hover {
    background: rgba(0, 210, 255, 0.3);
    border-color: #00f0ff;
    box-shadow: 0 0 14px rgba(0, 210, 255, 0.5);
    transform: scale(1.04);
}

/* ==========================================================================
   5. HỆ THỐNG HẠ TẦNG SERVER PING TOÀN CẦU (3D GLOBE FLAG SERVERS)
   Quả cầu 3D lơ lửng, vòng viền neon xoay tròn phía sau, đo ping thời gian thực
   ========================================================================== */
.section-servers-global {
    padding: 70px 0 80px;
    position: relative;
    background: radial-gradient(circle at 50% 30%, rgba(0, 163, 255, 0.12) 0%, var(--bg-main) 75%);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.tech-hud-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 210, 255, 0.1);
    border: 1px solid var(--border-glow);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--primary-cyan);
    letter-spacing: 1px;
    margin-bottom: 14px;
    backdrop-filter: blur(8px);
}

.tech-radar-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--live-green);
    box-shadow: 0 0 10px var(--live-green);
    animation: livePulse 1.4s infinite;
}

.section-head-servers {
    text-align: center;
    margin-bottom: 35px;
}

/* A. SHOWCASE 3 ĐẠI TRUNG TÂM QUẢ CẦU 3D ĐÓNG TRONG HỘP KÍNH (VIP CORE NODES) */
.vip-pods-showcase {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 25px;
}

.vip-pod-card {
    position: relative;
    border-radius: 20px;
    padding: 2.2px;
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

.vip-pod-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.85), 0 0 35px rgba(0, 210, 255, 0.45);
    z-index: 10;
}

/* ĐIỀU CHỈNH TIA NEON QUAY TRÒN KHÔNG BỊ CẮT VỤN TRÊN CARD CHỮ NHẬT */
.vip-pod-card .neon-running-track {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 680px;
    height: 680px;
    margin-top: -340px;
    margin-left: -340px;
    border-radius: 50%;
    transform-origin: center center;
    animation: spinNeonBeamCenter 3.4s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.vip-pod-card:hover .neon-running-track {
    animation-duration: 1.8s !important;
}

@keyframes spinNeonBeamCenter {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.vip-pod-inner {
    position: relative;
    background: linear-gradient(150deg, rgba(8, 20, 48, 0.98) 0%, rgba(4, 10, 24, 0.99) 100%);
    border-radius: 18px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1;
    height: 100%;
    box-sizing: border-box;
}

/* 1. HEADER CARD VIP */
.vip-pod-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
    padding-bottom: 8px;
}

.vip-pod-badge {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--accent-gold);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.3px;
    font-family: var(--font-heading);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    white-space: nowrap;
}

.vip-pod-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 255, 136, 0.12);
    border: 1px solid rgba(0, 255, 136, 0.35);
    padding: 2px 8px;
    border-radius: 12px;
}

.vip-pod-status-pill .radar-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 6px #00ff88;
    animation: livePulse 1.2s infinite;
}

.vip-pod-status-pill .ping-text {
    font-family: 'SF Mono', Consolas, Monaco, monospace;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--live-green);
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
}

/* 2. BODY CARD VIP (CHAMBER + DETAILS) */
.vip-pod-body {
    display: flex;
    align-items: center;
    gap: 16px;
}

.vip-pod-chamber {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
}

.vip-pod-chamber .sphere-3d-wrapper {
    width: 54px;
    height: 54px;
}

.vip-pod-chamber .sphere-3d-ball {
    width: 42px;
    height: 42px;
}

.vip-pod-details {
    flex: 1;
    min-width: 0;
}

.vip-pod-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    font-family: var(--font-heading);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vip-pod-desc {
    font-size: 0.76rem;
    color: #94a3b8;
    line-height: 1.35;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vip-pod-specs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.spec-item {
    font-size: 0.68rem;
    font-weight: 600;
    color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.spec-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}
.spec-dot.green { background: #00ff88; box-shadow: 0 0 6px #00ff88; }
.spec-dot.cyan { background: #00d2ff; box-shadow: 0 0 6px #00d2ff; }

/* 3. FOOTER CARD VIP (SIGNAL BARS + CONNECT BUTTON) */
.vip-pod-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.vip-signal-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.signal-label {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 600;
}

.btn-vip-connect {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap !important;
    flex-shrink: 0;
    color: #ffffff;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 60%, #0369a1 100%);
    padding: 6px 13px;
    border-radius: 8px;
    text-transform: uppercase;
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
    border: 1px solid rgba(125, 211, 252, 0.6);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.btn-vip-connect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -130%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.85),
        transparent
    );
    transform: skewX(-25deg);
    animation: cyberLaserSweep 2.8s ease-in-out infinite;
    pointer-events: none;
}

.vip-pod-card:hover .btn-vip-connect {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 210, 255, 0.55), inset 0 1px 1px #ffffff;
}

.vip-pod-card:active .btn-vip-connect {
    transform: translateY(1px);
}

/* NÚT DUBAI ROYAL VIP - VÀNG 24K HOÀNG GIA TRUNG ĐÔNG SIÊU ĐẲNG */
.vip-pod-card.royal-dubai-vip .btn-vip-connect,
.btn-vip-connect.btn-dubai-connect {
    background: linear-gradient(135deg, #fff385 0%, #ffd700 35%, #ff9d00 75%, #e68200 100%) !important;
    color: #0b1528 !important;
    font-weight: 900 !important;
    border: 1.5px solid #fff59d !important;
    box-shadow: 
        0 4px 16px rgba(255, 180, 0, 0.55),
        0 0 18px rgba(255, 215, 0, 0.35),
        inset 0 1px 1px #ffffff,
        inset 0 -2px 3px rgba(180, 90, 0, 0.35) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

.vip-pod-card.royal-dubai-vip .btn-vip-connect span,
.btn-vip-connect.btn-dubai-connect span {
    color: #0b1528 !important;
    font-weight: 900 !important;
}

.vip-pod-card.royal-dubai-vip .btn-vip-connect .btn-arrow-icon,
.btn-vip-connect.btn-dubai-connect .btn-arrow-icon {
    color: #0b1528 !important;
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    transition: transform 0.25s ease;
}

.vip-pod-card.royal-dubai-vip:hover .btn-vip-connect,
.vip-pod-card.royal-dubai-vip .btn-vip-connect:hover {
    background: linear-gradient(135deg, #ffffff 0%, #fff066 30%, #ffb300 70%, #ff8800 100%) !important;
    box-shadow: 
        0 6px 24px rgba(255, 200, 0, 0.95),
        0 0 30px rgba(255, 215, 0, 0.8),
        inset 0 1px 2px #ffffff !important;
    transform: translateY(-2px) scale(1.04);
}

.vip-pod-card.royal-dubai-vip:hover .btn-arrow-icon {
    transform: translateX(3px);
}

/* B. LƯỚI MÁY CHỦ QUẢ CẦU 3D TRONG HỘP KÍNH */
.flag-section {
    width: 100%;
    position: relative;
    margin-top: 15px;
}

.flag-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 14px;
    position: relative;
}

/* CARD CHỨA VIỀN NEON CYBER CHẠY QUANH */
.flag-card-neon {
    position: relative;
    border-radius: 16px;
    padding: 1.8px;
    background: rgba(255, 255, 255, 0.04);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.flag-card-neon:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8), 0 0 28px rgba(0, 210, 255, 0.4);
    z-index: 10;
}

/* ================================================================ */
/* TIA NEON CYBER CHẠY QUANH VIỀN CARD (CONIC NEON RUNNER)          */
/* ================================================================ */
.neon-running-track {
    position: absolute;
    top: -65%;
    left: -65%;
    width: 230%;
    height: 230%;
    background: conic-gradient(
        transparent 0deg,
        transparent 165deg,
        rgba(0, 210, 255, 0.15) 200deg,
        rgba(0, 210, 255, 0.75) 235deg,
        #38d9ff 250deg,
        #ffffff 270deg,              /* TIA NEON TRẮNG SÁNG */
        #00a3ff 285deg,              /* ÁNH XANH CYBER */
        rgba(0, 210, 255, 0.75) 305deg,
        rgba(0, 210, 255, 0.15) 335deg,
        transparent 360deg
    );
    animation: spinNeonBeam 3.6s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.flag-card-neon.fiery-vip .neon-running-track,
.vip-pod-card.fiery-vip .neon-running-track {
    background: conic-gradient(
        transparent 0deg,
        transparent 150deg,
        rgba(255, 215, 0, 0.35) 195deg,
        rgba(0, 210, 255, 0.85) 235deg,
        #ffffff 265deg,
        #ffd700 275deg,              /* ÁNH VÀNG KIM VIP */
        #00d2ff 295deg,              /* ÁNH CYAN RỰC RỠ */
        rgba(255, 215, 0, 0.35) 330deg,
        transparent 360deg
    );
    animation-duration: 2.8s;
}

.flag-card-neon:hover .neon-running-track,
.vip-pod-card:hover .neon-running-track {
    animation-duration: 1.5s !important;
}

@keyframes spinNeonBeam {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* THÂN TRONG CỦA CARD (GLASS BODY) */
.card-glass-body {
    position: relative;
    background: linear-gradient(155deg, rgba(8, 18, 42, 0.96) 0%, rgba(4, 9, 22, 0.98) 100%);
    border-radius: 14.5px;
    padding: 12px 6px 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

/* ================================================================ */
/* HỘP KÍNH 3D (GLASS CHAMBER BOX ENCLOSURE)                        */
/* ================================================================ */
.glass-chamber {
    position: relative;
    width: 66px;
    height: 66px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(0, 210, 255, 0.08) 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.06), 0 6px 16px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px 0;
    backdrop-filter: blur(4px);
    overflow: hidden;
    transition: all 0.3s ease;
}

.flag-card-neon:hover .glass-chamber,
.vip-pod-card:hover .glass-chamber {
    border-color: rgba(0, 210, 255, 0.6);
    box-shadow: inset 0 0 16px rgba(0, 210, 255, 0.25), 0 8px 22px rgba(0, 0, 0, 0.7);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(0, 210, 255, 0.12) 100%);
}

.flag-card-neon.fiery-vip .glass-chamber,
.vip-pod-card.fiery-vip .glass-chamber {
    border-color: rgba(255, 215, 0, 0.45);
    box-shadow: inset 0 0 14px rgba(255, 215, 0, 0.18), 0 6px 18px rgba(0, 0, 0, 0.6);
}

/* VỆT SÁNG PHẢN CHIẾU MẶT KÍNH */
.glass-glare-reflection {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 25%, transparent 50%);
    pointer-events: none;
    z-index: 5;
}

/* GÓC NẸP KIM LOẠI CỦA HỘP KÍNH */
.glass-corner {
    position: absolute;
    width: 5px;
    height: 5px;
    border-color: rgba(255, 255, 255, 0.6);
    pointer-events: none;
    z-index: 6;
}

.glass-corner.tl { top: 2px; left: 2px; border-top: 1.5px solid; border-left: 1.5px solid; }
.glass-corner.tr { top: 2px; right: 2px; border-top: 1.5px solid; border-right: 1.5px solid; }
.glass-corner.bl { bottom: 2px; left: 2px; border-bottom: 1.5px solid; border-left: 1.5px solid; }
.glass-corner.br { bottom: 2px; right: 2px; border-bottom: 1.5px solid; border-right: 1.5px solid; }

.flag-card-neon.fiery-vip .glass-corner,
.vip-pod-card.fiery-vip .glass-corner {
    border-color: #ffd700;
}

/* ================================================================ */
/* QUẢ CẦU DẠNG 3D FLOATING (3D SPHERE ORB)                         */
/* ================================================================ */
.sphere-3d-wrapper {
    position: relative;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    animation: levitateSphere 3.2s ease-in-out infinite;
}

@keyframes levitateSphere {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* VÒNG XOAY QUỸ ĐẠO QUANH QUẢ CẦU TRONG HỘP KÍNH */
.sphere-orbit-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px dashed rgba(0, 210, 255, 0.75);
    animation: spinOrbit 4s linear infinite;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.35);
    pointer-events: none;
    z-index: 2;
}

.flag-card-neon.fiery-vip .sphere-orbit-ring,
.vip-pod-card.fiery-vip .sphere-orbit-ring {
    border-color: #ffd700;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.55);
    animation-duration: 2.8s;
}

.sphere-orbit-ring::after {
    content: '';
    position: absolute;
    top: -3.5px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 6px #ffffff, 0 0 10px var(--primary-cyan);
}

.flag-card-neon.fiery-vip .sphere-orbit-ring::after,
.vip-pod-card.fiery-vip .sphere-orbit-ring::after {
    background: #ffffff;
    box-shadow: 0 0 6px #ffffff, 0 0 10px #ffd700;
}

@keyframes spinOrbit {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.sphere-glow-ring {
    position: absolute;
    inset: 1px;
    border-radius: 50%;
    border: 1px dotted rgba(255, 255, 255, 0.3);
    animation: spinOrbitReverse 6s linear infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes spinOrbitReverse {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

/* QUẢ CẦU 3D NỔI KHỐI CHUẨN ĐẸP */
.sphere-3d-ball {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    z-index: 3;
    background: #000;
    box-shadow: 
        inset -5px -5px 12px rgba(0, 0, 0, 0.9),
        inset 4px 4px 10px rgba(255, 255, 255, 0.8),
        0 4px 12px rgba(0, 0, 0, 0.7),
        0 0 14px rgba(0, 210, 255, 0.3);
    transition: transform 0.25s ease;
}

.flag-card-neon:hover .sphere-3d-ball,
.vip-pod-card:hover .sphere-3d-ball {
    transform: scale(1.08);
    box-shadow: 
        inset -5px -5px 12px rgba(0, 0, 0, 0.9),
        inset 4px 4px 10px rgba(255, 255, 255, 0.95),
        0 6px 16px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(0, 210, 255, 0.6);
}

.flag-card-neon.fiery-vip .sphere-3d-ball,
.vip-pod-card.fiery-vip .sphere-3d-ball {
    box-shadow: 
        inset -5px -5px 12px rgba(0, 0, 0, 0.9),
        inset 4px 4px 10px rgba(255, 255, 255, 0.85),
        0 4px 12px rgba(0, 0, 0, 0.7),
        0 0 16px rgba(255, 215, 0, 0.45);
}

.sphere-texture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 50%;
}

/* ĐỔ BÓNG NỔI KHỐI 3D CỦA HÌNH CẦU */
.sphere-lighting-shade {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, transparent 40%, rgba(0, 0, 0, 0.5) 75%, rgba(0, 0, 0, 0.88) 100%);
    pointer-events: none;
    z-index: 4;
}

/* VỆT SÁNG BÓNG GƯƠNG 3D (SPECULAR HIGHLIGHT) */
.sphere-specular-highlight {
    position: absolute;
    top: 3px;
    left: 6px;
    width: 16px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.3) 55%, transparent 100%);
    transform: rotate(-25deg);
    pointer-events: none;
    z-index: 5;
}

.sphere-pedestal-shadow {
    position: absolute;
    bottom: -4px;
    width: 24px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7) 0%, transparent 80%);
    z-index: 1;
}

.country-name {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.flag-ping-info {
    display: flex;
    align-items: center;
    gap: 5px;
}

.signal-bars {
    display: flex;
    align-items: flex-end;
    gap: 1.5px;
    height: 10px;
}

.signal-bars .bar {
    width: 2.2px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1px;
}

.signal-bars .bar:nth-child(1) { height: 3px; }
.signal-bars .bar:nth-child(2) { height: 5px; }
.signal-bars .bar:nth-child(3) { height: 7.5px; }
.signal-bars .bar:nth-child(4) { height: 10px; }

.signal-bars.level-4 .bar {
    background: var(--live-green);
    box-shadow: 0 0 4px rgba(0, 255, 136, 0.5);
}

.ping-text {
    font-family: 'SF Mono', Consolas, Monaco, monospace;
    font-size: 0.78rem;
    font-weight: 800;
}

.ping-fast {
    color: var(--live-green);
    text-shadow: 0 0 6px rgba(0, 255, 136, 0.5);
}

.flag-status-pill {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 255, 136, 0.12);
    color: var(--live-green);
    border: 1px solid rgba(0, 255, 136, 0.3);
    font-family: var(--font-heading);
    letter-spacing: 0.3px;
}

.flag-card-neon.fiery-vip .flag-status-pill {
    background: rgba(255, 215, 0, 0.15);
    color: var(--accent-gold);
    border-color: rgba(255, 215, 0, 0.4);
}

/* ==========================================================================
   SUPREME GOD-TIER SERVERS: DUBAI & BRAZIL (TIME VORTEX / VÒNG XOÁY THỜI GIAN)
   ========================================================================== */

/* 1. CHASSIS ĐEN OBSIDIAN TINH THỂ SÂU THẲM */
.flag-card-neon.dubai-royal-gold,
.flag-card-neon.brazil-samba-godtier {
    position: relative;
    border-radius: 18px;
    padding: 2.4px;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
    overflow: hidden;
}

.flag-card-neon.dubai-royal-gold {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.4) 0%, rgba(255, 140, 0, 0.15) 100%);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.85), 0 0 20px rgba(255, 215, 0, 0.2);
}

.flag-card-neon.brazil-samba-godtier {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.4) 0%, rgba(0, 210, 255, 0.15) 100%);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.85), 0 0 20px rgba(0, 255, 136, 0.2);
}

/* THÂN KÍNH ĐEN SÂU HUYỀN BÍ (CHUẨN OBSIDIAN TƯƠNG PHẢN CAO RÕ NÉT) */
.flag-card-neon.dubai-royal-gold .card-glass-body,
.flag-card-neon.brazil-samba-godtier .card-glass-body {
    background: linear-gradient(160deg, rgba(8, 20, 48, 0.98) 0%, rgba(4, 10, 24, 0.99) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    position: relative;
    z-index: 2;
    padding: 8px 6px 12px 6px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flag-card-neon.dubai-royal-gold .card-glass-body {
    border-color: rgba(255, 215, 0, 0.35) !important;
}

.flag-card-neon.brazil-samba-godtier .card-glass-body {
    border-color: rgba(0, 255, 136, 0.35) !important;
}

/* 2. NEON RUNNING TRACK (VIỀN TIA SÁNG CHẠY QUANH CARD) */
.flag-card-neon.dubai-royal-gold .neon-running-track {
    background: conic-gradient(
        from 0deg,
        #ffd700,
        #ffffff,
        #ff9900,
        #ffd700,
        #ffffff,
        #ffd700
    ) !important;
    animation: spinTrack 2.6s linear infinite;
    filter: drop-shadow(0 0 8px #ffd700);
    transition: filter 0.3s ease;
}

.flag-card-neon.brazil-samba-godtier .neon-running-track {
    background: conic-gradient(
        from 0deg,
        #00ff88,
        #00ffff,
        #ffd700,
        #ff007f,
        #00ff88
    ) !important;
    animation: spinTrack 2.6s linear infinite;
    filter: drop-shadow(0 0 8px #00ff88);
    transition: filter 0.3s ease;
}

.flag-card-neon.dubai-royal-gold:hover .neon-running-track {
    animation: spinTrack 0.65s linear infinite !important;
    filter: drop-shadow(0 0 16px #ffd700) drop-shadow(0 0 32px #ff9900) !important;
}

.flag-card-neon.brazil-samba-godtier:hover .neon-running-track {
    animation: spinTrack 0.65s linear infinite !important;
    filter: drop-shadow(0 0 16px #00ff88) drop-shadow(0 0 32px #00ffff) !important;
}

/* 3. TIME VORTEX CREST (THAY THẾ TOÀN BỘ TAG BẰNG HIỆU ỨNG ĐỒ HOẠ ĐỘNG VÒNG XOÁY) */
.chrono-vortex-crest {
    position: relative;
    width: 94%;
    height: 22px;
    margin: 0 auto 6px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 6px;
    background: rgba(3, 8, 20, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    z-index: 5;
    transition: all 0.35s ease;
}

.chrono-vortex-crest.gold-vortex {
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: inset 0 0 8px rgba(255, 215, 0, 0.15), 0 0 8px rgba(255, 215, 0, 0.2);
}

.chrono-vortex-crest.emerald-vortex {
    border-color: rgba(0, 255, 136, 0.4);
    box-shadow: inset 0 0 8px rgba(0, 255, 136, 0.15), 0 0 8px rgba(0, 255, 136, 0.2);
}

/* MINI PORTAL EYE CỦA CREST */
.vortex-portal-eye {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vortex-spiral-disc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        currentColor 30%,
        #ffffff 50%,
        transparent 80%,
        currentColor 100%
    );
    animation: vortexTunnelSpin 2s linear infinite;
}

.vortex-singularity-core {
    position: relative;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 8px currentColor, 0 0 14px #ffffff;
    z-index: 2;
    animation: singularityPulse 1.2s ease-in-out infinite alternate;
}

@keyframes singularityPulse {
    0% { transform: scale(0.8); opacity: 0.7; }
    100% { transform: scale(1.3); opacity: 1; }
}

/* DẢI TIA SÁNG LƯỢNG TỬ CHẠY DỌC CREST */
.vortex-quantum-beam {
    flex: 1;
    height: 1px;
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.vortex-quantum-beam::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -100%;
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, currentColor, #ffffff, transparent);
    animation: beamSweep 1.8s ease-in-out infinite;
}

.vortex-quantum-beam.right::after {
    animation-delay: 0.9s;
}

@keyframes beamSweep {
    0% { left: -100%; }
    100% { left: 200%; }
}

.vortex-title-hud {
    font-family: var(--font-heading);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}

.chrono-vortex-crest.gold-vortex {
    color: #ffd700;
}

.chrono-vortex-crest.emerald-vortex {
    color: #00ff88;
}

/* ⚡ HOVER ACCELERATION CỦA TOP CREST ⚡ */
.flag-card-neon.dubai-royal-gold:hover .chrono-vortex-crest {
    background: rgba(20, 16, 4, 0.92);
    border-color: #ffd700;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.7), inset 0 0 10px rgba(255, 215, 0, 0.4);
    transform: scale(1.03);
}

.flag-card-neon.brazil-samba-godtier:hover .chrono-vortex-crest {
    background: rgba(3, 20, 12, 0.92);
    border-color: #00ff88;
    box-shadow: 0 0 16px rgba(0, 255, 136, 0.7), inset 0 0 10px rgba(0, 255, 136, 0.4);
    transform: scale(1.03);
}

.flag-card-neon.dubai-royal-gold:hover .vortex-spiral-disc,
.flag-card-neon.brazil-samba-godtier:hover .vortex-spiral-disc {
    animation-duration: 0.4s !important;
}

/* 4. TIME VORTEX CHAMBER (HỐ XOÁY KHÔNG GIAN ĐẰNG SAU QUẢ CẦU 3D) */
.glass-chamber {
    position: relative;
    perspective: 500px;
}

.time-vortex-chamber-bg {
    position: absolute;
    inset: -6px;
    border-radius: 12px;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* HỐ ĐEN TRUNG TÂM (DEEP SINGULARITY ABYSS) */
.vortex-abyss-core {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle, #000000 50%, rgba(0, 0, 0, 0.8) 80%, transparent 100%);
    z-index: 2;
}

/* PHỄU XOÁY VORTEX CONIC GRADIENT (SWIRLING ACCRETION TUNNEL) */
.vortex-spiral-tunnel {
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(255, 215, 0, 0.0) 0deg,
        rgba(255, 215, 0, 0.55) 60deg,
        rgba(255, 255, 255, 0.95) 90deg,
        rgba(255, 140, 0, 0.2) 130deg,
        rgba(255, 215, 0, 0.0) 180deg,
        rgba(255, 215, 0, 0.5) 240deg,
        rgba(255, 255, 255, 0.9) 270deg,
        rgba(255, 215, 0, 0.0) 360deg
    );
    opacity: 0.45;
    filter: blur(1.5px);
    animation: vortexTunnelSpin 5s linear infinite;
    mix-blend-mode: screen;
    transform-origin: center center;
    transition: opacity 0.4s ease, filter 0.4s ease;
}

.brazil-samba-godtier .vortex-spiral-tunnel {
    background: conic-gradient(
        from 0deg,
        rgba(0, 255, 136, 0.0) 0deg,
        rgba(0, 255, 136, 0.6) 60deg,
        rgba(0, 255, 255, 0.95) 90deg,
        rgba(255, 215, 0, 0.35) 140deg,
        rgba(0, 255, 136, 0.0) 180deg,
        rgba(0, 255, 136, 0.55) 240deg,
        rgba(0, 210, 255, 0.9) 270deg,
        rgba(0, 255, 136, 0.0) 360deg
    );
}

.vortex-spiral-tunnel.counter {
    width: 105px;
    height: 105px;
    opacity: 0.3;
    animation: vortexTunnelSpinCounter 7s linear infinite;
}

@keyframes vortexTunnelSpin {
    0% { transform: rotate(0deg) scale(0.95); }
    50% { transform: rotate(180deg) scale(1.05); }
    100% { transform: rotate(360deg) scale(0.95); }
}

@keyframes vortexTunnelSpinCounter {
    0% { transform: rotate(360deg) scale(1.05); }
    50% { transform: rotate(180deg) scale(0.95); }
    100% { transform: rotate(0deg) scale(1.05); }
}

/* CÁC VÀNH ĐAI KHÔNG THỜI GIAN ĐA CHIỀU (3D DEPTH RINGS) */
.vortex-depth-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px dashed;
    pointer-events: none;
    opacity: 0.5;
    transition: all 0.4s ease;
}

.dubai-royal-gold .vortex-depth-ring {
    border-color: rgba(255, 215, 0, 0.65);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.brazil-samba-godtier .vortex-depth-ring {
    border-color: rgba(0, 255, 136, 0.65);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

.vortex-depth-ring.r1 {
    width: 68px;
    height: 68px;
    animation: ringSpinCW 4s linear infinite;
}

.vortex-depth-ring.r2 {
    width: 86px;
    height: 86px;
    border-style: dotted;
    border-width: 2px;
    animation: ringSpinCCW 6s linear infinite;
}

.vortex-depth-ring.r3 {
    width: 104px;
    height: 104px;
    border-style: double;
    border-width: 2px;
    opacity: 0.35;
    animation: ringSpinCW 9s linear infinite;
}

@keyframes ringSpinCW {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes ringSpinCCW {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

/* SÓNG HẤP DẪN PHÁT QUANG TỪ SINGULARITY (GRAVITATIONAL WAVE PULSES) */
.vortex-gravitational-wave {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid transparent;
    opacity: 0;
    pointer-events: none;
}

/* =====================================================================
   ⚡ HOVER KÍCH HOẠT VÒNG XOÁY THỜI GIAN TĂNG TỐC WARP-DRIVE SIÊU KHỦNG ⚡
   ===================================================================== */
.flag-card-neon.dubai-royal-gold:hover .vortex-spiral-tunnel {
    animation: vortexWarpDrive 0.65s linear infinite !important;
    opacity: 0.95;
    filter: blur(0.5px) drop-shadow(0 0 16px #ffd700);
}

.flag-card-neon.brazil-samba-godtier:hover .vortex-spiral-tunnel {
    animation: vortexWarpDrive 0.65s linear infinite !important;
    opacity: 0.95;
    filter: blur(0.5px) drop-shadow(0 0 16px #00ff88);
}

.flag-card-neon.dubai-royal-gold:hover .vortex-spiral-tunnel.counter,
.flag-card-neon.brazil-samba-godtier:hover .vortex-spiral-tunnel.counter {
    animation: vortexWarpDriveCounter 0.75s linear infinite !important;
    opacity: 0.75;
}

@keyframes vortexWarpDrive {
    0% { transform: rotate(0deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1.2); }
}

@keyframes vortexWarpDriveCounter {
    0% { transform: rotate(360deg) scale(1.15); }
    100% { transform: rotate(0deg) scale(1.05); }
}

/* Vành đai không thời gian xoay cực tốc khi hover */
.flag-card-neon.dubai-royal-gold:hover .vortex-depth-ring.r1,
.flag-card-neon.brazil-samba-godtier:hover .vortex-depth-ring.r1 {
    animation-duration: 0.6s !important;
    opacity: 1;
    transform: scale(1.1);
}

.flag-card-neon.dubai-royal-gold:hover .vortex-depth-ring.r2,
.flag-card-neon.brazil-samba-godtier:hover .vortex-depth-ring.r2 {
    animation-duration: 0.8s !important;
    opacity: 0.9;
    transform: scale(1.15);
}

.flag-card-neon.dubai-royal-gold:hover .vortex-depth-ring.r3,
.flag-card-neon.brazil-samba-godtier:hover .vortex-depth-ring.r3 {
    animation-duration: 1.1s !important;
    opacity: 0.8;
}

/* Sóng hấp dẫn bùng nổ liên tục khi hover */
.flag-card-neon.dubai-royal-gold:hover .vortex-gravitational-wave {
    border-color: #ffd700;
    animation: gravWaveExplodeGold 1.1s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}

.flag-card-neon.brazil-samba-godtier:hover .vortex-gravitational-wave {
    border-color: #00ff88;
    animation: gravWaveExplodeEmerald 1.1s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}

@keyframes gravWaveExplodeGold {
    0% { transform: scale(0.65); opacity: 1; box-shadow: 0 0 10px #ffd700, inset 0 0 10px #ff9900; }
    100% { transform: scale(2.8); opacity: 0; box-shadow: 0 0 35px #ffd700, inset 0 0 20px #ffffff; }
}

@keyframes gravWaveExplodeEmerald {
    0% { transform: scale(0.65); opacity: 1; box-shadow: 0 0 10px #00ff88, inset 0 0 10px #00ffff; }
    100% { transform: scale(2.8); opacity: 0; box-shadow: 0 0 35px #00ff88, inset 0 0 20px #ffffff; }
}

/* Quả cầu 3D bay bổng giữa tâm hố xoáy thời gian */
.flag-card-neon.dubai-royal-gold .sphere-3d-wrapper,
.flag-card-neon.brazil-samba-godtier .sphere-3d-wrapper {
    z-index: 4;
}

.flag-card-neon.dubai-royal-gold:hover .sphere-3d-ball {
    transform: scale(1.18) rotate(15deg);
    box-shadow: 
        inset -5px -5px 12px rgba(0, 0, 0, 0.9),
        inset 4px 4px 10px rgba(255, 255, 255, 0.95),
        0 8px 24px rgba(0, 0, 0, 0.9),
        0 0 30px #ffd700,
        0 0 50px rgba(255, 140, 0, 0.5) !important;
}

.flag-card-neon.brazil-samba-godtier:hover .sphere-3d-ball {
    transform: scale(1.18) rotate(-15deg);
    box-shadow: 
        inset -5px -5px 12px rgba(0, 0, 0, 0.9),
        inset 4px 4px 10px rgba(255, 255, 255, 0.95),
        0 8px 24px rgba(0, 0, 0, 0.9),
        0 0 30px #00ff88,
        0 0 50px rgba(0, 210, 255, 0.5) !important;
}

/* VÀNH ĐAI 3D TĂNG TỐC KHI DI CHUỘT */
.sphere-dubai-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-top: 1.5px solid #ffd700;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.7);
    animation: spinOrbit 2.4s linear infinite;
    pointer-events: none;
    z-index: 5;
    transition: filter 0.3s ease;
}

.sphere-samba-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-top: 1.5px solid #00ff88;
    border-bottom: 1.5px solid #00d2ff;
    animation: spinOrbit 2.4s linear infinite;
    pointer-events: none;
    z-index: 5;
    transition: filter 0.3s ease;
}

.flag-card-neon.dubai-royal-gold:hover .sphere-dubai-ring {
    animation-duration: 0.6s;
    filter: drop-shadow(0 0 10px #ffd700);
}

.flag-card-neon.brazil-samba-godtier:hover .sphere-samba-ring {
    animation-duration: 0.6s;
    filter: drop-shadow(0 0 10px #00ff88);
}

/* GÓC HUD KÍNH PHÁT QUANG ĐỒNG BỘ */
.flag-card-neon.dubai-royal-gold .glass-corner {
    border-color: #ffd700 !important;
}

.flag-card-neon.brazil-samba-godtier .glass-corner {
    border-color: #00ff88 !important;
}

/* 7. TEXT PHẢN QUANG ÁNH KIM (TEXT GLEAM) */
@keyframes textGleam {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.country-gold-shimmer {
    background: linear-gradient(90deg, #ffd700 0%, #ffffff 35%, #ffd700 70%, #ff8c00 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: textGleam 2.2s linear infinite !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}

.country-samba-shimmer {
    background: linear-gradient(90deg, #00ff88 0%, #ffd700 25%, #00ffff 50%, #ff007f 75%, #00ff88 100%) !important;
    background-size: 300% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: textGleam 2.6s linear infinite !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}

/* 8. TÍN HIỆU RADAR & PING */
.signal-gold .bar {
    background: #ffd700 !important;
    box-shadow: 0 0 6px #ffd700 !important;
}

.signal-emerald .bar {
    background: #00ff88 !important;
    box-shadow: 0 0 6px #00ff88 !important;
}

.gold-dot {
    background: #ffd700 !important;
    box-shadow: 0 0 8px #ffd700 !important;
}

.emerald-dot {
    background: #00ff88 !important;
    box-shadow: 0 0 8px #00ff88 !important;
}

.ping-text.ping-dubai {
    color: #ffd700 !important;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8) !important;
}

.ping-text.ping-godtier {
    color: #00ff88 !important;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.8) !important;
}

.flag-status-pill.dubai-pill {
    background: rgba(255, 215, 0, 0.15) !important;
    border-color: rgba(255, 215, 0, 0.6) !important;
    color: #ffd700 !important;
}

.flag-status-pill.brazil-pill {
    background: rgba(0, 255, 136, 0.15) !important;
    border-color: rgba(0, 255, 136, 0.6) !important;
    color: #00ff88 !important;
}

/* 9. HOVER PHYSICS SIÊU MƯỢT */
.flag-card-neon.dubai-royal-gold:hover {
    transform: translateY(-8px) scale(1.08) !important;
    box-shadow: 
        0 18px 45px rgba(0, 0, 0, 0.95),
        0 0 40px rgba(255, 215, 0, 0.65),
        0 0 70px rgba(255, 140, 0, 0.35) !important;
    z-index: 10 !important;
}

.flag-card-neon.brazil-samba-godtier:hover {
    transform: translateY(-8px) scale(1.08) !important;
    box-shadow: 
        0 18px 45px rgba(0, 0, 0, 0.95),
        0 0 40px rgba(0, 255, 136, 0.65),
        0 0 70px rgba(0, 210, 255, 0.35) !important;
    z-index: 10 !important;
}

/* 10. CARD POD ĐẦU TRANG */
.vip-pod-card.royal-dubai-vip {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.75), 0 0 25px rgba(255, 215, 0, 0.35);
}

.vip-pod-card.royal-dubai-vip .neon-running-track {
    background: conic-gradient(
        from 0deg,
        #ffd700,
        #ff9900,
        #fff1b8,
        #ffd700,
        #ff8000,
        #ffd700
    ) !important;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.85));
}

.vip-pod-card.royal-dubai-vip .vip-pod-badge {
    color: #ffd700;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.8);
}

.vip-pod-card.royal-dubai-vip .ping-text.ping-dubai-gold {
    color: #ffd700 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.85) !important;
    font-weight: 800;
}

.vip-pod-card.royal-dubai-vip .btn-vip-connect {
    background: linear-gradient(135deg, #fff385 0%, #ffd700 35%, #ff9d00 75%, #e68200 100%) !important;
    color: #0b1528 !important;
    font-weight: 900 !important;
    border: 1.5px solid #fff59d !important;
    box-shadow: 
        0 4px 16px rgba(255, 180, 0, 0.6),
        0 0 18px rgba(255, 215, 0, 0.35),
        inset 0 1px 1px #ffffff,
        inset 0 -2px 3px rgba(180, 90, 0, 0.35) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.vip-pod-card.royal-dubai-vip .btn-vip-connect span {
    color: #0b1528 !important;
    font-weight: 900 !important;
}

.vip-pod-card.royal-dubai-vip .btn-vip-connect .btn-arrow-icon {
    color: #0b1528 !important;
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    transition: transform 0.25s ease;
}

.vip-pod-card.royal-dubai-vip:hover .btn-vip-connect {
    background: linear-gradient(135deg, #ffffff 0%, #fff066 30%, #ffb300 70%, #ff8800 100%) !important;
    box-shadow: 
        0 6px 24px rgba(255, 200, 0, 0.95),
        0 0 30px rgba(255, 215, 0, 0.8),
        inset 0 1px 2px #ffffff !important;
    transform: translateY(-2px) scale(1.04);
}

.vip-pod-card.royal-dubai-vip:hover .btn-arrow-icon {
    transform: translateX(3px);
}

/* C. NÚT ĐIỀU KHIỂN & KIỂM TRA ĐỘ TRỄ CHUNG */
.server-action-bar-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 35px;
    flex-wrap: wrap;
}

/* Responsive cho Grid Quốc gia & VIP Pods */
@media (max-width: 1200px) {
    .vip-pods-showcase { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .flag-grid { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 900px) {
    .vip-pods-showcase { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .flag-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ⚡ TỐI ƯU MOBILE: CÁC CARD ĐỘC QUYỀN GỌN GÀNG, SANG TRỌNG, KHÔNG BỊ TRÀN ⚡ */
@media (max-width: 768px) {
    .vip-pods-showcase {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-bottom: 18px;
    }

    .vip-pod-card {
        border-radius: 14px;
        padding: 1.6px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
    }

    .vip-pod-inner {
        border-radius: 13px;
        padding: 9px 8px 8px 8px;
        gap: 6px;
    }

    /* 1. Header Card */
    .vip-pod-header {
        padding-bottom: 5px;
        gap: 4px;
        border-bottom: 1px solid rgba(255, 215, 0, 0.12);
    }

    .vip-pod-badge {
        font-size: 0.58rem;
        letter-spacing: 0.1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - 46px);
        text-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
    }

    .vip-pod-status-pill {
        padding: 1.5px 5px;
        border-radius: 8px;
        gap: 3px;
        flex-shrink: 0;
    }

    .vip-pod-status-pill .radar-dot {
        width: 4px;
        height: 4px;
    }

    .vip-pod-status-pill .ping-text {
        font-size: 0.62rem;
    }

    /* 2. Body Card */
    .vip-pod-body {
        gap: 7px;
        align-items: center;
    }

    .vip-pod-chamber {
        width: 44px;
        height: 44px;
        min-width: 44px;
        flex-shrink: 0;
        border-radius: 10px;
    }

    .vip-pod-chamber .sphere-3d-wrapper {
        width: 36px;
        height: 36px;
    }

    .vip-pod-chamber .sphere-3d-ball {
        width: 28px;
        height: 28px;
    }

    .vip-pod-details {
        min-width: 0;
        flex: 1;
        overflow: hidden;
    }

    .vip-pod-title {
        font-size: 0.76rem;
        line-height: 1.2;
        margin-bottom: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Ẩn mô tả dài để card thanh thoát, giảm chiều cao */
    .vip-pod-desc {
        display: none !important;
    }

    .vip-pod-specs {
        display: flex;
        flex-direction: column;
        gap: 1.5px;
        margin-top: 1px;
    }

    .spec-item {
        font-size: 0.58rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        gap: 3px;
        color: #94a3b8;
    }

    .spec-dot {
        width: 3.5px;
        height: 3.5px;
    }

    /* 3. Footer Card */
    .vip-pod-footer {
        padding-top: 5px;
        gap: 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        align-items: center;
        justify-content: space-between;
    }

    /* Ẩn nhãn chữ gây gãy 4 dòng trên mobile */
    .signal-label {
        display: none !important;
    }

    .vip-signal-row {
        gap: 3px;
        flex-shrink: 0;
    }

    .vip-signal-row .signal-bars {
        height: 9px;
    }

    .vip-signal-row .signal-bars .bar {
        width: 2px;
    }

    /* Nút bấm co giãn chuẩn Cyber, không bị tràn mép card */
    .btn-vip-connect {
        padding: 4px 7px;
        font-size: 0.62rem;
        gap: 3px;
        border-radius: 6px;
        flex-shrink: 0;
        letter-spacing: 0.2px;
        white-space: nowrap !important;
    }

    .btn-vip-connect .btn-arrow-icon {
        font-size: 0.75rem !important;
        margin-left: 1px;
    }
}

@media (max-width: 600px) {
    .flag-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .glass-chamber { width: 56px; height: 56px; }
    .sphere-3d-wrapper { width: 42px; height: 42px; }
    .sphere-3d-ball { width: 32px; height: 32px; }
    .country-name { font-size: 0.75rem; }
    .ping-text { font-size: 0.72rem; }
}

@media (max-width: 420px) {
    .vip-pods-showcase {
        gap: 6px;
    }

    .vip-pod-inner {
        padding: 7px 6px 7px 6px;
        gap: 4px;
    }

    .vip-pod-chamber {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }

    .vip-pod-chamber .sphere-3d-wrapper {
        width: 30px;
        height: 30px;
    }

    .vip-pod-chamber .sphere-3d-ball {
        width: 24px;
        height: 24px;
    }

    .vip-pod-title {
        font-size: 0.70rem;
    }

    /* Ẩn chữ SERVER trên màn hình hẹp để nút thành [⚡ KẾT NỐI »] siêu gọn */
    .btn-word-server {
        display: none !important;
    }

    .btn-vip-connect {
        padding: 3.5px 6px;
        font-size: 0.58rem;
    }
}

@media (max-width: 400px) {
    .flag-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 7. ECOSYSTEM 8 FLAGSHIP PORTALS (8 SẢNH ĐỈNH CAO) */
.section-ecosystem {
    padding: 70px 0;
    position: relative;
    background: var(--bg-main);
}

.ecosystem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.portal-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 26px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-normal);
    backdrop-filter: blur(12px);
    cursor: pointer;
}

.portal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary-cyan), transparent);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.portal-card:hover {
    border-color: var(--border-glow);
    background: var(--bg-card-hover);
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 24px rgba(0, 210, 255, 0.2);
}

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

.portal-icon-box {
    width: 82px;
    height: 82px;
    border-radius: 22px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    background: #020714;
    border: 1.5px solid rgba(0, 210, 255, 0.4);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.7),
        0 0 16px rgba(0, 210, 255, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

/* Glass specular glare overlay */
.portal-icon-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 48%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 22px 22px 0 0;
    pointer-events: none;
    z-index: 3;
}

/* 3D Icon Image */
.portal-icon-3d-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    position: relative;
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}

.portal-card:hover .portal-icon-box {
    transform: translateY(-4px) scale(1.08);
    border-color: #ffd700;
    box-shadow: 
        0 14px 32px rgba(0, 0, 0, 0.8),
        0 0 28px rgba(255, 215, 0, 0.5),
        inset 0 1px 3px rgba(255, 255, 255, 0.6);
}

.portal-card:hover .portal-icon-3d-img {
    transform: scale(1.12);
    filter: brightness(1.12) drop-shadow(0 6px 18px rgba(255, 215, 0, 0.4));
}

.portal-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
}

.portal-desc {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 18px;
}

.portal-partners-tag {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 18px;
}

.partner-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.btn-portal-enter {
    margin-top: auto;
    color: var(--primary-cyan);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap var(--transition-fast);
}

.portal-card:hover .btn-portal-enter {
    color: var(--accent-gold);
    gap: 10px;
}

/* 8. AMBASSADOR GERARD PIQUÉ SECTION */
.section-ambassador {
    padding: 80px 0;
    position: relative;
    background: radial-gradient(circle at 75% 50%, rgba(0, 119, 255, 0.18) 0%, var(--bg-main) 70%);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.ambassador-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.ambassador-photo-wrap {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-glow);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 163, 255, 0.25);
}

.ambassador-img {
    width: 100%;
    height: auto;
    display: block;
}

.ambassador-content-col h3 {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 12px;
}

.ambassador-content-col .honor-quote {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--primary-cyan);
    border-left: 3px solid var(--accent-gold);
    padding-left: 16px;
    margin: 20px 0 24px;
    line-height: 1.6;
}

.ambassador-badges-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 28px 0;
}

.honor-badge-item {
    background: rgba(10, 22, 48, 0.7);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 14px;
}

.honor-badge-item h5 {
    font-family: var(--font-heading);
    color: var(--accent-gold);
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 2px;
}

.honor-badge-item p {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* 9. EXCLUSIVE PROMOTIONS SECTION */
.section-promos {
    padding: 70px 0;
    background: linear-gradient(180deg, var(--bg-main) 0%, #071024 50%, var(--bg-main) 100%);
}

.promos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.promo-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 24px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all var(--transition-normal);
}

.promo-card:hover {
    border-color: var(--accent-gold);
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.25);
}

.promo-badge-corner {
    position: absolute;
    top: 14px;
    right: 14px;
    background: linear-gradient(135deg, #ff1e46, #ff6b00);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(255, 30, 70, 0.5);
}

.promo-value {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--accent-gold);
    margin: 12px 0 6px;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
}

.promo-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
}

.promo-desc {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.promo-card .btn-cyber {
    margin-top: auto;
    width: 100%;
}

/* 10. APP DOWNLOAD HUB */
.section-app {
    padding: 70px 0;
    position: relative;
    background: radial-gradient(circle at 30% 50%, rgba(0, 210, 255, 0.12) 0%, var(--bg-main) 70%);
}

.app-box-card {
    background: linear-gradient(135deg, rgba(8, 20, 48, 0.9) 0%, rgba(4, 10, 24, 0.95) 100%);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-lg);
    padding: 44px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: center;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

.app-features-list {
    list-style: none;
    margin: 20px 0 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.app-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e2e8f0;
    font-size: 0.95rem;
}

.app-feature-icon {
    color: var(--live-green);
    font-size: 1.1rem;
}

.app-download-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.qr-frame-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(4, 10, 24, 0.8);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 24px;
}

.qr-code-canvas {
    width: 160px;
    height: 160px;
    background: #ffffff;
    padding: 10px;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    margin-bottom: 12px;
}

.qr-desc {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* 11. FAQ ACCORDION SECTION */
.section-faq {
    padding: 70px 0;
    background: var(--bg-main);
}

.faq-list {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition-fast);
}

.faq-item.active {
    border-color: var(--border-glow);
}

.faq-question {
    padding: 18px 24px;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.faq-question:hover {
    color: var(--primary-cyan);
}

.faq-chevron {
    transition: transform var(--transition-fast);
    font-size: 1.2rem;
    color: var(--primary-cyan);
}

.faq-item.active .faq-chevron {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    padding: 0 24px;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.7;
}

.faq-item.active .faq-answer {
    padding-bottom: 20px;
}

/* 12. VIP FOOTER (CLEAN WITHOUT ANY GAP) */
.site-footer {
    background: #02050e;
    border-top: 1px solid var(--border-subtle);
    padding: 50px 0 24px;
    position: relative;
    z-index: 10;
}

.footer-top-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 36px;
    margin-bottom: 40px;
}

.footer-brand-col p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 16px 0 20px;
    max-width: 320px;
    line-height: 1.6;
}

.footer-license-seals {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.seal-tag {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
}

.footer-heading {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 18px;
    letter-spacing: 0.5px;
}

.footer-links-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-link {
    color: var(--text-secondary);
    font-size: 0.85rem;
    transition: color var(--transition-fast);
}

.footer-link:hover {
    color: var(--primary-cyan);
    padding-left: 4px;
}

.footer-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* 13. MOBILE FLOATING BOTTOM DOCK (PRO MAX CYBER DOCK) */
.mobile-bottom-dock {
    display: none;
    position: fixed;
    bottom: 10px;
    left: 12px;
    right: 12px;
    background: rgba(6, 14, 32, 0.95);
    border: 1px solid rgba(0, 210, 255, 0.35);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 210, 255, 0.2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 24px;
    z-index: 1000;
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
}

.dock-items-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 8px;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.dock-item.active, .dock-item:hover {
    color: var(--primary-cyan);
}

.dock-svg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: inherit;
    transition: transform 0.25s ease, color 0.25s ease;
}

.dock-item.active .dock-svg-icon {
    transform: translateY(-2px);
    color: #00d2ff;
    filter: drop-shadow(0 0 6px rgba(0, 210, 255, 0.8));
}

.live-pulse-icon {
    color: #00ff88 !important;
}

/* NÚT COIN 3D VIP CHÍNH GIỮA DOCK */
.dock-cta-ai {
    position: relative;
    top: -16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    z-index: 10;
}

.dock-coin-wrapper {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(255, 170, 0, 0.6), 0 0 20px rgba(0, 210, 255, 0.4);
    animation: floatCoin 3s ease-in-out infinite;
}

.dock-coin-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid #ffd700;
}

.dock-coin-ring {
    position: absolute;
    inset: -3.5px;
    border-radius: 50%;
    border: 1.5px dashed #00d2ff;
    animation: spinOrbit 4s linear infinite;
    pointer-events: none;
}

.dock-coin-label {
    margin-top: 2px;
    font-size: 0.65rem;
    font-weight: 900;
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
    font-family: var(--font-heading);
}

@keyframes floatCoin {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* 14. MOBILE DRAWER MENU */
.mobile-drawer {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100vh;
    background: #060e22;
    border-left: 1px solid var(--border-glow);
    z-index: 10001;
    padding: 24px;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.8);
    transition: right var(--transition-normal);
}

.mobile-drawer.open {
    right: 0;
}

.mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 16px;
}

.mobile-drawer-close {
    font-size: 1.6rem;
    color: var(--text-secondary);
}

.mobile-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 30px;
}

.mobile-nav-link {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-nav-link:hover {
    color: var(--primary-cyan);
}

.mobile-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
}

.mobile-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

/* 15. RESPONSIVE BREAKPOINTS (MOBILE & TABLET ADAPTATION) */
@media (max-width: 1024px) {
    .header-nav { display: none; }
    .mobile-toggle-btn { display: inline-flex; }
    .hero-content-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; }
    .hero-subdesc { margin: 0 auto 24px; }
    .hero-action-row { justify-content: center; }
    .ambassador-grid { grid-template-columns: 1fr; gap: 36px; text-align: center; }
    .ambassador-badges-row { max-width: 440px; margin: 24px auto; }
    .app-box-card { grid-template-columns: 1fr; gap: 30px; text-align: center; }
    .app-features-list { align-items: center; }
    .app-download-buttons { justify-content: center; }
    .footer-top-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    body { padding-bottom: 65px; /* Tránh bị che bởi bottom dock */ }
    .top-telemetry-status { display: none; }
    .hero-main-title { font-size: 2.2rem; }
    .hero-stage-section { min-height: auto; padding: 30px 0 40px; }
    .matches-grid { grid-template-columns: 1fr; }
    .server-controls-bar {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        padding: 16px;
    }
    .server-cluster-stats {
        flex-direction: column;
        gap: 6px;
    }
    .server-grid { grid-template-columns: 1fr; }
    .ecosystem-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .promos-grid { grid-template-columns: 1fr; }
    .footer-top-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-bottom-bar { flex-direction: column; gap: 10px; text-align: center; }
    .mobile-bottom-dock { display: block; }
    .header-cta-group .btn-cyber-ghost { display: none; }
}

@media (max-width: 480px) {
    .hero-main-title { font-size: 1.85rem; }
    .ecosystem-grid { grid-template-columns: 1fr; }
}