/* 
 * =========================================================================
 * 🏸 HỆ THỐNG THIẾT KẾ CẦU LÔNG THỂ THAO CÔNG NGHỆ CAO (HIGH-TECH SPORTS HUD)
 * Dự án: TUYENVANGLAI.IO.VN - MÔN CẦU LÔNG VIỆT NAM
 * Tác giả: Antigravity IDE Engine 2026
 * Hỗ trợ: Thiết kế đơn trang (SPA), Giao diện Sáng/Tối, và Tương tác mượt mà 60fps+
 * =========================================================================
 */

/* =========================================================================
   1. ĐỊNH NGHĨA BIẾN TOKENS & HỆ MÀU SÂN CỎ ĐIỆN TỬ
   ========================================================================= */
:root {
    /* Fonts */
    --font-display: 'Lexend', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;

    /* Base Core Colors (Dương Liễu Mộc - Xanh ngọc lục bảo cát tường) */
    --background: 155 24% 4%;           /* Slate Jade tối sẫm sân cỏ đêm */
    --foreground: 150 15% 98%;          /* Trắng ngọc trai */
    
    --card: 155 20% 6.5%;               /* Thẻ kính ngọc lục bảo sẫm */
    --card-foreground: 150 15% 98%;
    
    --popover: 155 20% 5.5%;
    --popover-foreground: 150 15% 98%;
    
    /* Neon Accents & Colors (Sports Aura phong thủy cát tường) */
    --neon-mint: 157 100% 50%;          /* #00ff9d - Xanh mint bản mệnh Mộc cực sinh động */
    --neon-gold: 47 100% 50%;           /* #ffd700 - Vàng Cup vô địch hoàng gia */
    --neon-cyan: 190 100% 50%;          /* #00e5ff - Xanh dương Thủy tương sinh đại cát */
    --neon-pink: 325 100% 50%;          /* #ff007f - Hồng đột phá */
    
    --neon-mint-glow: rgba(0, 255, 157, 0.22);
    --neon-gold-glow: rgba(255, 215, 0, 0.22);
    --neon-cyan-glow: rgba(0, 229, 255, 0.22);
    
    /* Functional Status */
    --success: 142 76% 45%;             /* Xanh lá đạt chuẩn */
    --warning: 47 100% 50%;             /* Vàng cảnh báo */
    --danger: 346 84% 50%;              /* Đỏ lỗi/Khóa */
    --muted: 150 10% 70%;               /* Chữ nhạt */
    --muted-foreground: 150 10% 70%;
    
    /* Borders & Inputs */
    --border: 155 18% 12%;
    --border-glow: rgba(0, 255, 157, 0.08);
    --border-hover: rgba(0, 255, 157, 0.25);
    
    --input: 155 18% 8%;
    --ring: 157 100% 50%;
    
    /* Radius */
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 9px;
    
    /* Transition */
    --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ═══════════════════════════════════════════════════════
   🌿 CHẾ ĐỘ SÁNG - PREMIUM SAGE MATCHA (MỆNH MỘC PHONG THỦY)
   Tông màu Matcha Cream: mềm mại, đủ contrast, cực dễ đọc
   ═══════════════════════════════════════════════════════ */
[data-theme="light"] {
    /* === NỀN & CHỮ === */
    --background: 150 18% 93%;           /* #EAF0EC - Cream Sage mịn nhẹ */
    --foreground: 160 40% 8%;            /* #0B1F14 - Đen rêu đậm, tương phản cao */

    --card: 0 0% 100%;                   /* Trắng tinh khiết cho card */
    --card-foreground: 160 40% 8%;

    --popover: 0 0% 99%;
    --popover-foreground: 160 40% 8%;

    /* === CHỮ PHỤ === */
    --muted: 160 20% 35%;               /* #3D6B52 - Rêu trung tính dễ đọc */
    --muted-foreground: 160 20% 35%;

    /* === VIỀN & INPUT === */
    --border: 150 20% 78%;              /* Viền xanh rêu nhạt */
    --border-glow: rgba(0, 150, 90, 0.08);
    --border-hover: rgba(0, 150, 90, 0.30);

    --input: 0 0% 97%;                  /* Input nền trắng sáng */
    --ring: 157 70% 32%;

    /* === ACCENT NEON (điều chỉnh cho nền sáng) === */
    --neon-mint: 157 80% 32%;           /* #0F9B58 - Xanh mint đậm đủ tương phản */
    --neon-gold: 38 85% 42%;            /* #C47F0D - Vàng đất ấm */
    --neon-cyan: 200 80% 38%;           /* #0D7EA8 - Xanh dương đậm */
    --neon-pink: 340 70% 42%;           /* #B82057 - Hồng đậm */

    --neon-mint-glow: rgba(15, 155, 88, 0.15);
    --neon-gold-glow: rgba(196, 127, 13, 0.15);
    --neon-cyan-glow: rgba(13, 126, 168, 0.15);

    /* === STATUS === */
    --success: 142 65% 30%;
    --warning: 38 85% 42%;
    --danger: 0 72% 45%;
}

/* === SELECTOR DROPDOWN LIGHT MODE === */
[data-theme="light"] select option {
    background-color: #ffffff !important;
    color: #0B1F14 !important;
}
[data-theme="light"] select {
    background-color: #ffffff !important;
    color: #0B1F14 !important;
    border: 1.5px solid #7aaa8a !important;
}
[data-theme="light"] select:focus {
    border-color: #0F9B58 !important;
    box-shadow: 0 0 0 3px rgba(15, 155, 88, 0.12) !important;
    outline: none !important;
}

/* === SELECTOR DROPDOWN DARK MODE (giữ nguyên) === */
[data-theme="dark"] select option {
    background-color: #0b111e !important;
    color: #ffffff !important;
}
[data-theme="dark"] select {
    background-color: rgba(15, 23, 42, 0.85) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
[data-theme="dark"] select:focus {
    border-color: hsl(157 100% 50%) !important;
    box-shadow: 0 0 10px rgba(0, 255, 157, 0.2) !important;
}




/* =========================================================================
   2. THIẾT LẬP CƠ BẢN & RESET CSS
   ========================================================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: var(--font-body);
    line-height: 1.6;
    overflow: hidden; /* Khóa cuộn toàn trang */
    height: 100vh;
    height: 100dvh; /* Chiều cao động trên thiết bị di động */
    display: flex;
    flex-direction: column;
    transition: var(--transition-smooth);
    background-image: 
        radial-gradient(circle at 5% 5%, rgba(0, 255, 157, 0.04) 0%, transparent 45%),
        radial-gradient(circle at 95% 95%, rgba(255, 215, 0, 0.03) 0%, transparent 45%);
    background-attachment: fixed;
}

[data-theme="light"] body {
    background-color: hsl(150 18% 93%);
    background-image: 
        radial-gradient(ellipse at 0% 0%, rgba(15, 155, 88, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 100% 100%, rgba(196, 127, 13, 0.06) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 100%, rgba(13, 126, 168, 0.04) 0%, transparent 40%),
        linear-gradient(160deg, #ecf2ee 0%, #f5f8f6 45%, #f8f5ee 100%);
    background-attachment: fixed;
}

/* Grid chìm tinh tế ở light mode */
[data-theme="light"] body::before {
    background-image: 
        linear-gradient(rgba(15, 155, 88, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 155, 88, 0.025) 1px, transparent 1px);
    opacity: 0.5;
}

/* Ẩn sơ đồ sân cầu lông ở light mode (không cần) */
[data-theme="light"] body::after {
    display: none;
}


body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: 
        linear-gradient(rgba(0, 255, 157, 0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 157, 0.012) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center;
    mask-image: radial-gradient(circle at 50% 50%, black 20%, transparent 85%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 20%, transparent 85%);
    pointer-events: none;
    z-index: 2;
}

[data-theme="light"] body::before {
    background-image: 
        linear-gradient(rgba(0, 180, 100, 0.01) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 180, 100, 0.01) 1px, transparent 1px);
    opacity: 0.8;
}

/* Sơ đồ sân cầu lông vẽ chìm mờ ảo ở Light Mode tăng vibe */
[data-theme="light"] body::after {
    content: '';
    position: fixed;
    bottom: -10%;
    left: -10%;
    width: 450px;
    height: 450px;
    background-image: radial-gradient(circle, transparent 20%, #e4eee9 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M 10,10 L 90,10 L 90,90 L 10,90 Z M 10,25 L 90,25 M 10,75 L 90,75 M 50,10 L 50,90' fill='none' stroke='rgba(0,180,100,0.015)' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2;
    opacity: 0.6;
}

/* =========================================================================
   3. ĐỐM SÁNG MÔI TRƯỜNG DYNAMIC AMBIENT GLOWS
   ========================================================================= */
.ambient-glows {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.glow-sphere {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.15;
    mix-blend-mode: screen;
    animation: moveBg 30s infinite alternate ease-in-out;
}

.glow-1 {
    width: 45vw;
    height: 45vw;
    background: radial-gradient(circle, hsl(var(--neon-mint)) 0%, transparent 70%);
    top: -10%;
    left: -5%;
    animation-duration: 25s;
}

.glow-2 {
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, hsl(var(--neon-gold)) 0%, transparent 70%);
    bottom: -15%;
    right: -5%;
    animation-duration: 32s;
    animation-delay: -8s;
}

.glow-3 {
    width: 35vw;
    height: 35vw;
    background: radial-gradient(circle, hsl(var(--neon-cyan)) 0%, transparent 70%);
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: 28s;
    animation-delay: -15s;
}

[data-theme="light"] .glow-sphere {
    opacity: 0.05;
    mix-blend-mode: multiply;
}

/* Glow particles floating (Hạt phát sáng lơ lửng) */
.glow-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    filter: blur(0.5px);
    opacity: 0;
    pointer-events: none;
    animation: floatParticle 22s infinite linear;
}

.particle-1 { top: 20%; left: 10%; width: 5px; height: 5px; background: hsl(var(--neon-mint)); animation-duration: 20s; }
.particle-2 { top: 80%; left: 15%; width: 6px; height: 6px; background: hsl(var(--neon-gold)); animation-duration: 25s; animation-delay: -5s; }
.particle-3 { top: 50%; left: 85%; width: 5px; height: 5px; background: hsl(var(--neon-cyan)); animation-duration: 22s; animation-delay: -10s; }
.particle-4 { top: 15%; left: 75%; width: 4px; height: 4px; background: hsl(var(--neon-mint)); animation-duration: 28s; animation-delay: -12s; }
.particle-5 { top: 70%; left: 80%; width: 6px; height: 6px; background: hsl(var(--neon-gold)); animation-duration: 24s; animation-delay: -2s; }

@keyframes floatParticle {
    0% { transform: translateY(0) translateX(0) scale(0.8); opacity: 0; }
    15% { opacity: 0.4; }
    85% { opacity: 0.4; }
    100% { transform: translateY(-120px) translateX(60px) scale(1.2); opacity: 0; }
}

@keyframes moveBg {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    50% { transform: translate(8%, 10%) scale(1.1) rotate(180deg); }
    100% { transform: translate(-8%, -5%) scale(0.9) rotate(360deg); }
}

/* =========================================================================
   4. CẤU TRÚC HỆ THỐNG ĐƠN TRANG (SPA LAYOUT - SMOOTH SLIDE)
   ========================================================================= */
.gateway-wrapper {
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 5;
    width: 100%;
    overflow: hidden;
}

.gateway-header {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 50;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.6rem;
    text-decoration: none;
    background: linear-gradient(135deg, hsl(var(--neon-mint)), hsl(var(--neon-gold)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 15px rgba(0, 255, 157, 0.15);
    letter-spacing: -0.01em;
}

.brand-logo i {
    background: linear-gradient(135deg, hsl(var(--neon-mint)), hsl(var(--neon-gold)));
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    color: hsl(var(--neon-mint));
    background-clip: text;
    font-size: 1.7rem;
    animation: pulseLogo 3s infinite alternate ease-in-out;
}

@keyframes pulseLogo {
    0% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 2px hsl(var(--neon-mint))); }
    100% { transform: scale(1.08) rotate(15deg); filter: drop-shadow(0 0 8px hsl(var(--neon-gold))); }
}

.gateway-container {
    position: relative;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 10px 24px 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Tránh tràn ngang hoặc scroll trình duyệt */
}

/* Panels điều phối SPA ẩn hiện mượt mà */
.panel-view {
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(30px) scale(0.98);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    visibility: hidden;
    z-index: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-view.active {
    position: relative;
    left: 0;
    right: 0;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    visibility: visible;
    z-index: 10;
    height: 100%;
    flex-grow: 1;
}

/* Vùng cuộn dọc nội bộ cực mượt chuẩn app native */
.scrollable-y {
    overflow-y: auto;
    flex-grow: 1;
    padding-right: 4px;
    -webkit-overflow-scrolling: touch; /* Cuộn mượt trên iOS Safari */
}

/* Tùy chỉnh thanh cuộn nội bộ tinh tế */
.scrollable-y::-webkit-scrollbar {
    width: 5px;
}
.scrollable-y::-webkit-scrollbar-track {
    background: transparent;
}
.scrollable-y::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 157, 0.15);
    border-radius: 99px;
}
[data-theme="light"] .scrollable-y::-webkit-scrollbar-thumb {
    background: rgba(0, 180, 100, 0.18);
}


/* =========================================================================
   🏠 TRANG CHỦ GATEWAY TRUNG TÂM (MAIN VIEW)
   ========================================================================= */
.main-panel {
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

.panel-tech-decor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.decor-line {
    height: 1px;
    width: 60px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 157, 0.2));
}

.decor-line.decor-r {
    background: linear-gradient(270deg, transparent, rgba(0, 255, 157, 0.2));
}

.decor-dot {
    width: 6px;
    height: 6px;
    background: hsl(var(--neon-mint));
    box-shadow: 0 0 10px hsl(var(--neon-mint));
    border-radius: 50%;
    animation: statusPulse 1.5s infinite;
}

[data-theme="light"] .decor-line { background: linear-gradient(90deg, transparent, rgba(0, 180, 100, 0.15)); }
[data-theme="light"] .decor-line.decor-r { background: linear-gradient(270deg, transparent, rgba(0, 180, 100, 0.15)); }
[data-theme="light"] .decor-dot { background: #00b464; box-shadow: none; }

/* Tiêu đề chính lấp lánh metallic thương hiệu */
.gateway-title-glow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
}

.gateway-title-glow .title-primary {
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.45em;
    color: #64748b;
    text-transform: uppercase;
    font-family: var(--font-display);
}

.gateway-title-glow .title-brand {
    font-size: clamp(1.6rem, 7.5vw, 3.4rem);
    font-weight: 900;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #ffffff 15%, hsl(var(--neon-mint)) 50%, hsl(var(--neon-gold)) 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 18px rgba(0, 255, 157, 0.25));
    animation: textShimmer 6s infinite alternate ease-in-out;
    line-height: 1.15;
    word-break: break-word;
}

[data-theme="light"] .gateway-title-glow .title-brand {
    background: linear-gradient(135deg, #0d3221 15%, #00b464 50%, #d97706 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: none;
}

@keyframes textShimmer {
    0% { filter: drop-shadow(0 2px 15px rgba(0, 255, 157, 0.2)); }
    100% { filter: drop-shadow(0 2px 25px rgba(255, 215, 0, 0.35)); }
}

.gateway-desc {
    color: #94a3b8;
    font-size: 1.05rem;
    margin-bottom: 36px;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

[data-theme="light"] .gateway-desc { color: #475569; }

/* 📊 Live Metrics HUD Bar */
.hud-metrics {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 10px 28px;
    background: rgba(10, 12, 18, 0.55);
    border: 1px solid rgba(0, 255, 157, 0.08);
    border-radius: 100px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    margin-bottom: 44px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #94a3b8;
    position: relative;
    z-index: 12;
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.01);
}

[data-theme="light"] .hud-metrics {
    background: rgba(240, 245, 242, 0.8);
    border: 1px solid rgba(0, 180, 100, 0.08);
    color: #1e293b;
    box-shadow: 
        0 8px 24px rgba(13, 50, 33, 0.02),
        inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.metric-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.metric-label { letter-spacing: 0.05em; font-size: 0.72rem; opacity: 0.7; }
.metric-value { font-family: var(--font-display); font-weight: 700; }
.metric-value.value-mint { color: hsl(var(--neon-mint)); text-shadow: 0 0 8px var(--neon-mint-glow); }
.metric-value.value-gold { color: hsl(var(--neon-gold)); text-shadow: 0 0 8px var(--neon-gold-glow); }
.metric-value.value-cyan { color: hsl(var(--neon-cyan)); text-shadow: 0 0 8px var(--neon-cyan-glow); }

.metric-value.value-mint i {
    font-size: 0.5rem;
    vertical-align: middle;
    animation: statusPulse 1.2s infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 0.4; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.15); }
}

.metric-divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .metric-divider { background: rgba(0, 180, 100, 0.12); }

/* =========================================================================
   🔮 THẺ THỜI THƯỢNG GLASSMORTIC TRONG SUỐT HOÀN MỸ
   ========================================================================= */
.gateway-button-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 36px;
    position: relative;
    z-index: 10;
}

.gateway-card {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    background: rgba(8, 10, 15, 0.45);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 34px;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 20px 45px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.01);
    transition: var(--transition-bounce);
    cursor: pointer;
    min-height: 350px;
    text-align: left;
}

/* Lực hút quầng sáng con trỏ chuột bám đuổi */
.card-glass-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(350px circle at var(--x, 0px) var(--y, 0px), rgba(0, 255, 157, 0.09), transparent 50%);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.card-cyan .card-glass-glow {
    background: radial-gradient(350px circle at var(--x, 0px) var(--y, 0px), rgba(255, 215, 0, 0.09), transparent 50%);
}

.gateway-card:hover .card-glass-glow {
    opacity: 1;
}

/* Tech Corners cơ khí tinh tế */
.card-corner {
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: rgba(255, 255, 255, 0.06);
    border-style: solid;
    pointer-events: none;
    z-index: 4;
    transition: var(--transition-smooth);
}

.corner-tl { top: 12px; left: 12px; border-width: 2px 0 0 2px; }
.corner-tr { top: 12px; right: 12px; border-width: 2px 2px 0 0; }
.corner-bl { bottom: 12px; left: 12px; border-width: 0 0 2px 2px; }
.corner-br { bottom: 12px; right: 12px; border-width: 0 2px 2px 0; }

.card-pink:hover .card-corner {
    border-color: hsl(var(--neon-mint));
    box-shadow: 0 0 6px var(--neon-mint-glow);
}

.card-cyan:hover .card-corner {
    border-color: hsl(var(--neon-gold));
    box-shadow: 0 0 6px var(--neon-gold-glow);
}

/* 🌈 CHẾ ĐỘ SÁNG KÍNH ĐỔI SẮC BẦY MÀU CAO CẤP */
[data-theme="light"] .gateway-card {
    background: rgba(240, 245, 242, 0.75);
    border: 1px solid rgba(0, 180, 100, 0.08);
    box-shadow: 
        0 15px 35px rgba(13, 50, 33, 0.03),
        inset 0 0 0 1px rgba(255, 255, 255, 0.8);
    color: #12221a;
}

[data-theme="light"] .gateway-card:hover {
    background: rgba(243, 247, 245, 0.9);
    border-color: transparent;
    /* Hiệu ứng viền bảy màu phát sáng lung linh */
    background: 
        linear-gradient(rgba(243, 247, 245, 0.92), rgba(243, 247, 245, 0.92)) padding-box,
        linear-gradient(135deg, #00b464 0%, #d97706 33%, #2563eb 66%, #db2777 100%) border-box;
    box-shadow: 
        0 20px 45px rgba(13, 50, 33, 0.06),
        0 0 15px rgba(0, 180, 100, 0.04);
}

[data-theme="light"] .card-corner { border-color: rgba(0, 180, 100, 0.1); }
[data-theme="light"] .card-pink:hover .card-corner { border-color: #00b464; box-shadow: none; }
[data-theme="light"] .card-cyan:hover .card-corner { border-color: #d97706; box-shadow: none; }

/* Nội dung thẻ điều phối */
.card-top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 5;
}

.card-badge {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    text-transform: uppercase;
}

.badge-mint {
    background: rgba(0, 255, 157, 0.05);
    color: hsl(var(--neon-mint));
    border: 1px solid rgba(0, 255, 157, 0.15);
}

.badge-gold {
    background: rgba(255, 215, 0, 0.05);
    color: hsl(var(--neon-gold));
    border: 1px solid rgba(255, 215, 0, 0.15);
}

[data-theme="light"] .badge-mint { background: rgba(0, 180, 100, 0.06); color: #008a4c; border-color: rgba(0, 180, 100, 0.15); }
[data-theme="light"] .badge-gold { background: rgba(217, 119, 6, 0.06); color: #b45309; border-color: rgba(217, 119, 6, 0.15); }

.card-status {
    font-size: 0.72rem;
    font-weight: 800;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-online i {
    color: hsl(var(--success));
    filter: drop-shadow(0 0 3px hsl(var(--success)));
    animation: statusPulse 1.8s infinite ease-in-out;
}

[data-theme="light"] .card-status { color: #475569; }

.card-main-content {
    position: relative;
    z-index: 5;
    flex-grow: 1;
}

.card-icon-wrapper {
    width: 58px;
    height: 58px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 1.6rem;
    transition: var(--transition-bounce);
}

.card-pink .card-icon-wrapper {
    background: rgba(0, 255, 157, 0.03);
    border: 1px solid rgba(0, 255, 157, 0.08);
    color: hsl(var(--neon-mint));
}

.card-cyan .card-icon-wrapper {
    background: rgba(255, 215, 0, 0.03);
    border: 1px solid rgba(255, 215, 0, 0.08);
    color: hsl(var(--neon-gold));
}

[data-theme="light"] .card-pink .card-icon-wrapper { background: rgba(0, 180, 100, 0.05); border-color: rgba(0, 180, 100, 0.1); color: #00b464; }
[data-theme="light"] .card-cyan .card-icon-wrapper { background: rgba(217, 119, 6, 0.05); border-color: rgba(217, 119, 6, 0.1); color: #d97706; }

.card-title {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    margin-bottom: 12px;
    transition: var(--transition-smooth);
}

.card-pink .card-title {
    background: linear-gradient(to right, #ffffff, #d1fae5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.card-cyan .card-title {
    background: linear-gradient(to right, #ffffff, #fef3c7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] .card-pink .card-title,
[data-theme="light"] .card-cyan .card-title {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    color: #0f172a;
}

.card-desc {
    font-size: 0.9rem;
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 24px;
}

[data-theme="light"] .card-desc { color: #475569; }

.card-action-bar {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 18px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.88rem;
    position: relative;
    z-index: 5;
    transition: var(--transition-smooth);
}

[data-theme="light"] .card-action-bar { border-top-color: rgba(0, 180, 100, 0.06); }

.card-pink .card-action-bar { color: hsl(var(--neon-mint)); }
.card-cyan .card-action-bar { color: hsl(var(--neon-gold)); }

[data-theme="light"] .card-pink .card-action-bar { color: #008a4c; }
[data-theme="light"] .card-cyan .card-action-bar { color: #b45309; }

.action-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-bounce);
    position: relative;
}

.card-pink .action-arrow {
    background: rgba(0, 255, 157, 0.06);
    border: 1px solid rgba(0, 255, 157, 0.12);
}

.card-cyan .action-arrow {
    background: rgba(255, 215, 0, 0.06);
    border: 1px solid rgba(255, 215, 0, 0.12);
}

/* Hiệu ứng radar phát sóng cho mũi tên */
.action-arrow::before {
    content: '';
    position: absolute;
    top: -3px; left: -3px; right: -3px; bottom: -3px;
    border-radius: 50%;
    border: 1px solid currentColor;
    opacity: 0;
    transition: var(--transition-smooth);
}

.gateway-card:hover .action-arrow::before {
    animation: radarWave 1.4s infinite ease-out;
}

@keyframes radarWave {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.4); opacity: 0; }
}

.gateway-card:hover {
    transform: translateY(-8px) scale(1.015);
    background: rgba(6, 8, 12, 0.55);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
}

.card-pink:hover { border-color: hsl(var(--neon-mint)); box-shadow: 0 15px 40px rgba(0, 255, 157, 0.12); }
.card-cyan:hover { border-color: hsl(var(--neon-gold)); box-shadow: 0 15px 40px rgba(255, 215, 0, 0.12); }

.gateway-card:hover .card-icon-wrapper { transform: scale(1.15) rotate(5deg); }

.card-pink:hover .card-icon-wrapper { background: hsl(var(--neon-mint)); color: #000; box-shadow: 0 0 15px hsl(var(--neon-mint)); border-color: transparent; }
.card-cyan:hover .card-icon-wrapper { background: hsl(var(--neon-gold)); color: #000; box-shadow: 0 0 15px hsl(var(--neon-gold)); border-color: transparent; }
.gateway-card:hover .action-arrow { transform: translateX(4px); }

/* =========================================================================
   🏢 THIẾT KẾ BẢNG ĐIỀU KHIỂN HUD TRẠM TƯƠNG TÁC (HUD WORKSTATION CORES)
   ========================================================================= */
.hud-panel {
    background: rgba(8, 10, 15, 0.55);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    padding: 34px;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(255, 255, 255, 0.01);
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
}

[data-theme="light"] .hud-panel {
    background: rgba(240, 245, 242, 0.75);
    border: 1px solid rgba(0, 180, 100, 0.08);
    box-shadow: 
        0 15px 40px rgba(13, 50, 33, 0.03),
        inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

/* Viền LED phía trên bảng điều khiển */
.hud-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, hsl(var(--neon-mint)), hsl(var(--neon-gold)), hsl(var(--neon-cyan)));
    opacity: 0.85;
}

.hud-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 20px;
    margin-bottom: 28px;
}

[data-theme="light"] .hud-panel-header { border-bottom-color: rgba(0, 180, 100, 0.06); }

.hud-panel-title {
    font-size: 1.6rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

[data-theme="light"] .hud-panel-title { color: #0f172a; }

.hud-panel-title i {
    color: hsl(var(--neon-mint));
    text-shadow: 0 0 8px var(--neon-mint-glow);
}

[data-theme="light"] .hud-panel-title i { color: #00b464; text-shadow: none; }

.btn-hud-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    transition: var(--transition-smooth);
}

.btn-hud-back:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #cbd5e1;
    color: #fff;
    transform: translateX(-3px);
}

[data-theme="light"] .btn-hud-back {
    background: rgba(0, 180, 100, 0.04);
    border-color: rgba(0, 180, 100, 0.12);
    color: #334155;
}

[data-theme="light"] .btn-hud-back:hover {
    background: rgba(0, 180, 100, 0.08);
    border-color: #00b464;
    color: #000;
}

/* 💻 Bố cục chia lưới HUD */
.hud-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

@media (max-width: 992px) {
    .hud-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

.hud-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hud-section-title {
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-left: 3px solid hsl(var(--neon-mint));
    padding-left: 12px;
    margin-bottom: 16px;
    color: #fff;
}

[data-theme="light"] .hud-section-title { color: #0d3221; border-left-color: #00b464; }

/* 🧾 Bảng thống kê dữ liệu HUD */
.hud-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .hud-table-wrapper { border-color: rgba(0, 180, 100, 0.08); }

.hud-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.88rem;
}

.hud-table th {
    background: rgba(255, 255, 255, 0.02);
    padding: 14px 16px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .hud-table th { background: rgba(0, 180, 100, 0.015); color: #334155; border-bottom-color: rgba(0, 180, 100, 0.06); }

.hud-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    color: #e2e8f0;
}

[data-theme="light"] .hud-table td { border-bottom-color: rgba(0, 180, 100, 0.03); color: #0f172a; }

.hud-table tr:last-child td { border-bottom: none; }

.hud-table tr:hover td {
    background: rgba(255, 255, 255, 0.01);
}

[data-theme="light"] .hud-table tr:hover td { background: rgba(0, 180, 100, 0.008); }

/* =========================================================================
   5. NÚT BẤM CYBER CUT CẮT GÓC & PHÁT SÁNG (CYBERPUNK NEON BUTTONS)
   ========================================================================= */
.btn-cyber {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    color: hsl(var(--foreground));
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--radius-sm);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
    border: 1px solid hsl(var(--neon-mint));
    box-shadow: 0 0 10px var(--neon-mint-glow);
    z-index: 1;
}

.btn-cyber::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: 0.5s;
    z-index: -1;
}

.btn-cyber::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 6px; height: 6px;
    background: hsl(var(--neon-mint));
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
    transition: var(--transition-smooth);
}

.btn-cyber:hover {
    color: #000;
    background: hsl(var(--neon-mint));
    box-shadow: 0 0 18px hsl(var(--neon-mint));
    transform: translateY(-2px);
}

.btn-cyber:hover::before { left: 100%; }

.btn-cyber-gold {
    border-color: hsl(var(--neon-gold));
    box-shadow: 0 0 10px var(--neon-gold-glow);
}

.btn-cyber-gold::after { background: hsl(var(--neon-gold)); }

.btn-cyber-gold:hover {
    color: #000;
    background: hsl(var(--neon-gold));
    box-shadow: 0 0 18px hsl(var(--neon-gold));
}

/* Light mode override cho btn-cyber */
[data-theme="light"] .btn-cyber {
    color: #0d3221;
    border-color: #00b464;
    box-shadow: 0 0 8px rgba(0,180,100,0.15);
}
[data-theme="light"] .btn-cyber:hover {
    background: #00b464;
    color: #fff;
    box-shadow: 0 0 15px rgba(0,180,100,0.35);
}
[data-theme="light"] .btn-cyber-gold {
    border-color: #d97706;
    box-shadow: 0 0 8px rgba(217,119,6,0.15);
    color: #7c2d12;
}
[data-theme="light"] .btn-cyber-gold:hover {
    background: #d97706;
    color: #fff;
    box-shadow: 0 0 15px rgba(217,119,6,0.35);
}

/* Nút Đăng Ký Kèo Ngay nổi bật */
.btn-register-slot {
    background: linear-gradient(135deg, hsl(var(--neon-mint)) 0%, hsl(var(--neon-cyan)) 100%) !important;
    border: none !important;
    color: #000 !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 15px rgba(0,255,157,0.25) !important;
}
.btn-register-slot:hover {
    background: linear-gradient(135deg, hsl(var(--neon-gold)) 0%, hsl(var(--neon-mint)) 100%) !important;
    box-shadow: 0 6px 20px rgba(0,255,157,0.45) !important;
    transform: translateY(-3px) !important;
}
[data-theme="light"] .btn-register-slot {
    background: linear-gradient(135deg, #00b464 0%, #0ea5e9 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(0,180,100,0.2) !important;
}

.btn-cyber-danger {
    border-color: hsl(var(--danger));
    box-shadow: none;
    color: hsl(var(--danger));
}

.btn-cyber-danger::after { background: hsl(var(--danger)); }

.btn-cyber-danger:hover {
    color: #fff;
    background: hsl(var(--danger));
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

.btn-cyber:disabled, .btn-cyber-gold:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #64748b !important;
    border-color: #475569 !important;
}

/* =========================================================================
   6. SHADCN INPUTS & CHECKBOXES CÔNG NGHỆ CAO
   ========================================================================= */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.form-label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
}

[data-theme="light"] .form-label { color: #475569; }

.form-label span.required {
    color: hsl(var(--neon-pink));
}

.form-control {
    width: 100%;
    padding: 11px 15px;
    background: hsl(var(--input));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-sm);
    color: hsl(var(--foreground));
    font-family: var(--font-body);
    font-size: 0.9rem;
    transition: var(--transition-smooth);
    outline: none;
}

[data-theme="light"] .form-control {
    background-color: #edf2ef !important;
    border: 1px solid #738a7c !important;
    color: #12221a !important;
}

[data-theme="light"] .form-control::placeholder {
    color: #64748b !important;
}


.form-control:focus {
    border-color: hsl(var(--neon-mint));
    background: rgba(0, 255, 157, 0.015);
    box-shadow: 0 0 8px var(--neon-mint-glow);
}

[data-theme="light"] .form-control:focus {
    border-color: #00b464;
    background: rgba(0, 180, 100, 0.01);
    box-shadow: 0 0 8px rgba(0, 180, 100, 0.15);
}

.form-control:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.02);
}

/* Checkbox dạng chip nút bấm công nghệ */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.checkbox-custom-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-sm);
    transition: var(--transition-smooth);
}

.checkbox-custom-label:hover {
    border-color: hsl(var(--neon-mint));
    background: rgba(0, 255, 157, 0.02);
}

[data-theme="light"] .checkbox-custom-label { background: rgba(255, 255, 255, 0.6); }
[data-theme="light"] .checkbox-custom-label:hover { border-color: #00b464; background: rgba(0, 180, 100, 0.02); }

.checkbox-custom-input {
    display: none;
}

.checkbox-custom-input:checked + .checkbox-custom-label {
    border-color: hsl(var(--neon-mint));
    background: rgba(0, 255, 157, 0.08);
    color: #fff;
    box-shadow: 0 0 8px rgba(0, 255, 157, 0.15);
}

[data-theme="light"] .checkbox-custom-input:checked + .checkbox-custom-label {
    border-color: #00b464;
    background: rgba(0, 180, 100, 0.05);
    color: #008a4c;
    box-shadow: none;
}

/* Cụm chọn giới tính và trình độ liên kết */
.gender-level-box {
    padding: 16px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px dashed rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
}

[data-theme="light"] .gender-level-box { background: rgba(0, 180, 100, 0.005); border-color: rgba(0, 180, 100, 0.06); }

/* =========================================================================
   7. CHIP VÀ CÁC THẺ PHÂN LOẠI CẦU LÔNG ĐỘC ĐÁO
   ========================================================================= */
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip-item {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

[data-theme="light"] .chip-item { background: rgba(0, 180, 100, 0.02); border-color: rgba(0, 180, 100, 0.08); color: #334155; }

.chip-item-mint {
    border-color: rgba(0, 255, 157, 0.15);
    color: hsl(var(--neon-mint));
    background: rgba(0, 255, 157, 0.02);
}

[data-theme="light"] .chip-item-mint { border-color: rgba(0, 180, 100, 0.2); color: #008a4c; }

/* =========================================================================
   8. BỘ MÁY TÍNH TOÁN KẾ TOÁN THÔNG MINH CỦA HOST (HOST PRICING ENGINE)
   ========================================================================= */
.pricing-engine-wrapper {
    background: rgba(0, 255, 157, 0.015);
    border: 1px solid rgba(0, 255, 157, 0.06);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-top: 10px;
}

[data-theme="light"] .pricing-engine-wrapper {
    background: rgba(0, 180, 100, 0.015);
    border-color: rgba(0, 180, 100, 0.06);
}

.shuttlecock-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.pricing-suggestions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 18px;
}

@media (max-width: 576px) {
    .pricing-suggestions {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.suggestion-box {
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    padding: 16px;
    background: rgba(10, 12, 18, 0.45);
    text-align: center;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.suggestion-box:hover {
    border-color: hsl(var(--neon-mint));
    transform: translateY(-2px);
}

[data-theme="light"] .suggestion-box { background: rgba(255, 255, 255, 0.5); border-color: rgba(0, 180, 100, 0.08); }
[data-theme="light"] .suggestion-box:hover { border-color: #00b464; background: rgba(0, 180, 100, 0.02); }

.suggestion-box.active {
    border-color: hsl(var(--neon-mint));
    background: rgba(0, 255, 157, 0.05);
    box-shadow: 0 0 10px var(--neon-mint-glow);
}

[data-theme="light"] .suggestion-box.active {
    border-color: #00b464;
    background: rgba(0, 180, 100, 0.03);
    box-shadow: none;
}

.suggestion-title {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 8px;
}

.suggestion-price {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    color: #fff;
    margin-bottom: 4px;
}

[data-theme="light"] .suggestion-price { color: #0f172a; }

.suggestion-profit {
    font-size: 0.7rem;
    font-weight: 700;
    color: hsl(var(--neon-mint));
}

.suggestion-box.active .suggestion-profit {
    color: #fff;
}

[data-theme="light"] .suggestion-profit { color: #008a4c; }
[data-theme="light"] .suggestion-box.active .suggestion-profit { color: #008a4c; }

/* =========================================================================
   9. DANH SÁCH LỌC KÈO CẦU LÔNG VÀ THẺ SÂN CHI TIẾT
   ========================================================================= */
.slot-filter-bar {
    background: rgba(10, 12, 18, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 32px;
}

[data-theme="light"] .slot-filter-bar { background: rgba(255, 255, 255, 0.6); border-color: rgba(0, 180, 100, 0.08); }

.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    gap: 0;
}

/* Card trong grid: bo góc nhỏ + border phân tách thay gap */
.slot-grid .card-keo-cauthi {
    border-radius: 4px;
    border-color: rgba(255, 255, 255, 0.07);
    margin: 1px;
}
.slot-grid .card-keo-cauthi:hover {
    transform: translateY(-2px);
    z-index: 1;
}

.card-keo-cauthi {
    background: rgba(10, 12, 18, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

[data-theme="light"] .card-keo-cauthi {
    background: rgba(240, 245, 242, 0.7);
    border-color: rgba(0, 180, 100, 0.05);
    color: #0f172a;
}
[data-theme="light"] .slot-grid .card-keo-cauthi {
    border-color: rgba(0, 180, 100, 0.12);
}

.card-keo-cauthi:hover {
    transform: translateY(-5px);
    border-color: hsl(var(--neon-mint));
    box-shadow: 0 12px 28px rgba(0, 255, 157, 0.06);
}

[data-theme="light"] .card-keo-cauthi:hover {
    background: rgba(243, 247, 245, 0.85);
    border-color: #00b464;
    box-shadow: 0 12px 28px rgba(13, 50, 33, 0.04);
}

.card-keo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
    padding-bottom: 12px;
}

[data-theme="light"] .card-keo-header { border-bottom-color: rgba(0, 180, 100, 0.06); }

.card-keo-price {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    color: hsl(var(--neon-gold));
}

[data-theme="light"] .card-keo-price { color: #b45309; }

.card-keo-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
}

[data-theme="light"] .card-keo-title { color: #0d3221; }

.card-keo-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.85rem;
    color: #94a3b8;
}

[data-theme="light"] .card-keo-meta { color: #475569; }

.card-keo-meta i {
    color: hsl(var(--neon-mint));
    width: 18px;
}

[data-theme="light"] .card-keo-meta i { color: #00b464; }

/* =========================================================================
   10. CHUYỂN ĐỔI THEME VÀ THỐNG NHẤT FOOTER
   ========================================================================= */
.btn-theme-toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(10, 12, 18, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--neon-mint));
    box-shadow: 
        0 4px 15px rgba(0,0,0,0.35), 
        inset 0 0 0 1px rgba(255,255,255,0.02);
    transition: var(--transition-smooth);
}

.btn-theme-toggle:hover {
    transform: rotate(45deg) scale(1.08);
    border-color: hsl(var(--neon-mint));
    color: #fff;
    box-shadow: 0 0 15px hsl(var(--neon-mint));
}

.btn-theme-toggle.light-active {
    color: hsl(var(--neon-gold));
    border-color: rgba(255, 215, 0, 0.2);
}

.btn-theme-toggle.light-active:hover {
    border-color: hsl(var(--neon-gold));
    box-shadow: 0 0 15px hsl(var(--neon-gold));
}

[data-theme="light"] .btn-theme-toggle {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 180, 100, 0.12);
    box-shadow: 0 4px 15px rgba(0, 180, 100, 0.03);
}

.gateway-footer {
    padding: 24px;
    text-align: center;
    font-size: 0.8rem;
    color: #475569;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    width: 100%;
    position: relative;
    z-index: 5;
    margin-top: 40px;
}

[data-theme="light"] .gateway-footer { border-top-color: rgba(0, 180, 100, 0.08); color: #64748b; }

.admin-secret-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    font-size: 0.82rem;
    color: #475569;
    text-decoration: none;
    transition: var(--transition-smooth);
    cursor: pointer;
    font-weight: 700;
}

.admin-secret-trigger:hover {
    color: hsl(var(--neon-mint));
    text-shadow: 0 0 8px var(--neon-mint-glow);
}

[data-theme="light"] .admin-secret-trigger:hover { color: #00b464; text-shadow: none; }

/* =========================================================================
   11. HỘP THOẠI HÀNH ĐỘNG MODAL & HỆ THỐNG TOAST
   ========================================================================= */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(4, 5, 8, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-smooth);
}

.modal-overlay.active { opacity: 1; pointer-events: auto; }

.modal {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 540px;
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(0, 255, 157, 0.04);
    position: relative;
    overflow: hidden;
    transform: scale(0.9) translateY(30px);
    transition: var(--transition-bounce);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.modal-overlay.active .modal { transform: scale(1) translateY(0); }

.modal::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, hsl(var(--neon-mint)), hsl(var(--neon-gold)));
}

[data-theme="light"] .modal {
    background: rgba(245, 248, 246, 0.95);
    border-color: rgba(0, 180, 100, 0.1);
    box-shadow: 0 20px 45px rgba(13, 50, 33, 0.06);
}

.modal-header { padding: 26px 28px 16px; position: relative; }
.modal-title { font-size: 1.4rem; font-weight: 800; color: #fff; }
[data-theme="light"] .modal-title { color: #0d3221; }
.modal-desc { font-size: 0.82rem; color: #64748b; margin-top: 4px; }
.modal-close {
    position: absolute; top: 24px; right: 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid hsl(var(--border));
    color: hsl(var(--foreground));
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--transition-smooth);
}

.modal-close:hover {
    background: hsl(var(--neon-mint));
    border-color: hsl(var(--neon-mint));
    color: #000;
    transform: rotate(90deg);
}

.modal-body { padding: 0 28px 28px; overflow-y: auto; flex-grow: 1; }

/* Toast Notification — z-index TỐI ĐA để LUÔN nổi trên mọi modal/overlay
   (modal khôi phục MK .qmk-overlay = 100000, modal donate/popup = 100000…)
   → toast phải cao hơn hẳn, nếu không sẽ bị chìm dưới lớp modal. */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2147483647; /* max int — đảm bảo trên cùng tuyệt đối */
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    background: rgba(8, 10, 15, 0.95);
    border-left: 4px solid hsl(var(--neon-mint));
    border-top: 1px solid hsl(var(--border));
    border-right: 1px solid hsl(var(--border));
    border-bottom: 1px solid hsl(var(--border));
    color: #fff;
    padding: 16px 24px;
    border-radius: var(--radius-md);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 320px;
    max-width: 400px;
    transform: translateX(120%);
    transition: var(--transition-bounce);
    backdrop-filter: blur(10px);
}

[data-theme="light"] .toast {
    background: #fff;
    border-color: rgba(0, 180, 100, 0.12);
    color: #0f172a;
    box-shadow: 0 12px 28px rgba(0, 180, 100, 0.05);
}

.toast.active { transform: translateX(0); }
.toast-success { border-left-color: hsl(var(--neon-mint)); }
.toast-success i { color: hsl(var(--neon-mint)); text-shadow: 0 0 8px var(--neon-mint-glow); }
[data-theme="light"] .toast-success i { color: #00b464; text-shadow: none; }

.toast-danger { border-left-color: hsl(var(--danger)); }
.toast-danger i { color: hsl(var(--danger)); }
.toast-icon { font-size: 1.25rem; }
.toast-content h4 { font-family: var(--font-display); font-size: 0.92rem; font-weight: 800; }
.toast-content p { font-size: 0.8rem; color: #94a3b8; margin-top: 2px; }
[data-theme="light"] .toast-content p { color: #475569; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: hsl(var(--background)); }
::-webkit-scrollbar-thumb { background: rgba(0, 255, 157, 0.2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--neon-mint)); }

/* =========================================================================
   12. TIỆN ÍCH HIỂN THỊ (UTILITIES)
   ========================================================================= */
.text-mint { color: hsl(var(--neon-mint)); }
.text-gold { color: hsl(var(--neon-gold)); }
.text-cyan { color: hsl(var(--neon-cyan)); }
[data-theme="light"] .text-mint { color: #00b464; }
[data-theme="light"] .text-gold { color: #d97706; }
[data-theme="light"] .text-cyan { color: #2563eb; }

.w-full { width: 100%; }
.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }
.d-none { display: none !important; }
.gap-2 { gap: 8px; }
.flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.stars-container { display: flex; gap: 4px; font-size: 1.2rem; color: #cbd5e1; }
.stars-container i { cursor: pointer; transition: var(--transition-smooth); }
.stars-container i.active, .stars-container i:hover { color: hsl(var(--neon-gold)); }

/* Card Kèo: nội dung text dùng biến CSS thay vì hardcode #fff */
.card-keo-body-text { color: hsl(var(--foreground)); }
.card-keo-address-text { font-size: 0.82rem; color: hsl(var(--muted-foreground)); margin-top: 4px; }
.card-keo-meta-row { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.card-keo-meta-row b { color: hsl(var(--foreground)); }
.card-keo-count-text { font-size: 0.85rem; font-weight: 800; color: hsl(var(--neon-gold)); }
[data-theme="light"] .card-keo-count-text { color: #b45309; }
.card-keo-meta-box {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    font-size: 0.85rem;
    background: rgba(0,0,0,0.015);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid hsl(var(--border));
    margin-bottom: 12px;
}
[data-theme="light"] .card-keo-meta-box {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,180,100,0.1);
}

/* Chip items trong card kèo */
.chip-group { display: flex; flex-wrap: wrap; gap: 4px; }
.chip-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid transparent;
    background: rgba(255,255,255,0.03);
}
.chip-item-mint {
    color: hsl(var(--neon-mint));
    border-color: rgba(0,255,157,0.15);
}
[data-theme="light"] .chip-item-mint { color: #00914d; border-color: rgba(0,180,100,0.2); }

/* Nút LỌC CA ĐẤU nổi bật */
.btn-filter-cyber {
    position: relative;
    height: 52px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, hsl(var(--neon-mint)) 0%, hsl(var(--neon-gold)) 100%) !important;
    color: #0b1a0f !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(0,255,157,0.3), 0 2px 8px rgba(255,215,0,0.2) !important;
    animation: filterBtnPulse 3s infinite alternate ease-in-out;
}
.btn-filter-cyber::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--radius-sm) + 2px);
    background: linear-gradient(135deg, hsl(var(--neon-mint)), hsl(var(--neon-gold)));
    z-index: -1;
    filter: blur(8px);
    opacity: 0.5;
    transition: var(--transition-smooth);
}
.btn-filter-cyber:hover::before { opacity: 0.8; filter: blur(12px); }
.btn-filter-cyber:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 10px 30px rgba(0,255,157,0.4), 0 4px 15px rgba(255,215,0,0.25) !important;
}
@keyframes filterBtnPulse {
    0% { box-shadow: 0 6px 20px rgba(0,255,157,0.25), 0 2px 8px rgba(255,215,0,0.15); }
    100% { box-shadow: 0 8px 28px rgba(0,255,157,0.4), 0 4px 15px rgba(255,215,0,0.3); }
}
[data-theme="light"] .btn-filter-cyber {
    background: linear-gradient(135deg, #00b464 0%, #d97706 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(0,180,100,0.25) !important;
}

/* Shake animation cho auth panel */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}
.shake-animation { animation: shake 0.5s ease-in-out; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .gateway-button-grid { grid-template-columns: 1fr; gap: 20px; }
    .gateway-title-glow .title-brand { font-size: 2.5rem; }
    .gateway-card { min-height: auto; padding: 24px; }
    .hud-metrics { padding: 8px 18px; flex-wrap: wrap; justify-content: center; gap: 10px; border-radius: var(--radius-md); }
    .metric-divider { display: none; }
    .hud-panel { padding: 24px 18px; }
}

/* 🌿 HOẠT ẢNH DƯƠNG LIỄU LAY ĐỘNG PHONG THỦY CÁT TƯỜNG (MỆNH MỘC Nhâm Ngọ 2002) */
.willow-decor {
    position: fixed;
    width: 220px;
    height: 220px;
    pointer-events: none;
    z-index: 3;
    opacity: 0.18;
    transform-origin: top center;
    animation: swayWillow 6s infinite alternate ease-in-out;
}
.willow-top-left {
    top: 0;
    left: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0,0 C30,10 50,40 40,70 C35,60 20,40 0,30 Z M10,0 C40,20 60,50 50,80 C45,70 30,50 10,40 Z' fill='%2300b464'/%3E%3C/svg%3E") no-repeat;
    background-size: contain;
}
.willow-top-right {
    top: 0;
    right: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100,0 C70,10 50,40 60,70 C65,60 80,40 100,30 Z M90,0 C60,20 40,50 50,80 C55,70 70,50 90,40 Z' fill='%2300b464'/%3E%3C/svg%3E") no-repeat;
    background-size: contain;
    transform-origin: top center;
}
@keyframes swayWillow {
    0% { transform: rotate(-5deg) translateY(0); }
    100% { transform: rotate(5deg) translateY(2px); }
}
[data-theme="dark"] .willow-decor {
    opacity: 0.08;
    filter: brightness(0.8) contrast(1.2);
}

/* ═══════════════════════════════════════════════════════════════
   🌿 LIGHT MODE MASTER OVERRIDE - GHI ĐÈ TOÀN DIỆN CHẾ ĐỘ SÁNG
   Tất cả element đều cần tương phản rõ ràng, dễ đọc trên nền sáng
   ═══════════════════════════════════════════════════════════════ */

/* === NỀN & LAYOUT === */
[data-theme="light"] .gateway-wrapper { background: transparent; }

/* === HEADER === */
[data-theme="light"] .gateway-header {
    border-bottom: 1px solid rgba(15, 155, 88, 0.08);
}

/* === BRAND LOGO CHẾ ĐỘ SÁNG === */
[data-theme="light"] .brand-logo {
    background: linear-gradient(135deg, #0F9B58, #C47F0D);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="light"] .brand-logo i {
    -webkit-text-fill-color: #0F9B58;
    background: none;
    color: #0F9B58;
    filter: drop-shadow(0 0 4px rgba(15, 155, 88, 0.3));
}

/* === TIÊU ĐỀ CHÍNH === */
[data-theme="light"] .gateway-title-glow .title-primary { color: #3D6B52; }
[data-theme="light"] .gateway-title-glow .title-brand {
    background: linear-gradient(135deg, #083D1F 15%, #0F9B58 50%, #C47F0D 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: none;
    animation: none;
}
[data-theme="light"] .gateway-desc { color: #3D6B52; }

/* === HUD METRICS BAR === */
[data-theme="light"] .hud-metrics {
    background: rgba(255, 255, 255, 0.9);
    border: 1.5px solid rgba(15, 155, 88, 0.15);
    color: #1a4030;
    box-shadow: 0 4px 20px rgba(15, 155, 88, 0.06);
}
[data-theme="light"] .metric-label { color: #3D6B52; opacity: 1; }
[data-theme="light"] .metric-value.value-mint { color: #0F9B58; text-shadow: none; }
[data-theme="light"] .metric-value.value-gold { color: #C47F0D; text-shadow: none; }
[data-theme="light"] .metric-value.value-cyan { color: #0D7EA8; text-shadow: none; }
[data-theme="light"] .metric-divider { background: rgba(15, 155, 88, 0.15); }

/* === GATEWAY CARDS - THẺ ĐIỀU PHỐI === */
[data-theme="light"] .gateway-card {
    background: rgba(255, 255, 255, 0.88);
    border: 1.5px solid rgba(15, 155, 88, 0.12);
    box-shadow: 0 8px 28px rgba(8, 61, 31, 0.06), 0 2px 8px rgba(15, 155, 88, 0.04);
    color: #0B1F14;
    backdrop-filter: blur(20px);
}
[data-theme="light"] .gateway-card:hover {
    background: rgba(255, 255, 255, 0.96);
    border-color: #0F9B58;
    box-shadow: 0 16px 40px rgba(15, 155, 88, 0.14), 0 4px 16px rgba(15, 155, 88, 0.06);
    transform: translateY(-8px) scale(1.01);
}
[data-theme="light"] .card-title { color: #0B1F14 !important; -webkit-text-fill-color: #0B1F14 !important; background: none !important; }
[data-theme="light"] .card-desc { color: #3D6B52; }
[data-theme="light"] .badge-mint { background: rgba(15, 155, 88, 0.1); color: #0F9B58; border-color: rgba(15, 155, 88, 0.2); }
[data-theme="light"] .badge-gold { background: rgba(196, 127, 13, 0.1); color: #C47F0D; border-color: rgba(196, 127, 13, 0.2); }
[data-theme="light"] .card-status { color: #3D6B52; }
[data-theme="light"] .card-action-bar { border-top-color: rgba(15, 155, 88, 0.1); }
[data-theme="light"] .card-pink .card-action-bar { color: #0F9B58; }
[data-theme="light"] .card-cyan .card-action-bar { color: #C47F0D; }
[data-theme="light"] .card-pink .card-icon-wrapper { background: rgba(15, 155, 88, 0.08); border-color: rgba(15, 155, 88, 0.15); color: #0F9B58; }
[data-theme="light"] .card-cyan .card-icon-wrapper { background: rgba(196, 127, 13, 0.08); border-color: rgba(196, 127, 13, 0.15); color: #C47F0D; }
[data-theme="light"] .card-pink:hover .card-icon-wrapper { background: #0F9B58; color: #fff; border-color: transparent; }
[data-theme="light"] .card-cyan:hover .card-icon-wrapper { background: #C47F0D; color: #fff; border-color: transparent; }
[data-theme="light"] .card-corner { border-color: rgba(15, 155, 88, 0.15); }
[data-theme="light"] .card-pink:hover .card-corner { border-color: #0F9B58; box-shadow: 0 0 5px rgba(15,155,88,0.2); }
[data-theme="light"] .card-cyan:hover .card-corner { border-color: #C47F0D; box-shadow: 0 0 5px rgba(196,127,13,0.2); }

/* === HUD PANEL (KHUNG LÀM VIỆC) === */
[data-theme="light"] .hud-panel {
    background: rgba(255, 255, 255, 0.92);
    border: 1.5px solid rgba(15, 155, 88, 0.12);
    box-shadow: 0 8px 32px rgba(8, 61, 31, 0.05);
    backdrop-filter: blur(20px);
}
[data-theme="light"] .hud-panel-header { border-bottom-color: rgba(15, 155, 88, 0.1); }
[data-theme="light"] .hud-panel-title { color: #0B1F14; }
[data-theme="light"] .hud-panel-title i { color: #0F9B58; text-shadow: none; }
[data-theme="light"] .hud-section-title { color: #0B1F14; border-left-color: #0F9B58; }
[data-theme="light"] .btn-hud-back { background: rgba(15,155,88,0.05); border-color: rgba(15,155,88,0.18); color: #1a4030; }
[data-theme="light"] .btn-hud-back:hover { background: #0F9B58; border-color: #0F9B58; color: #fff; transform: translateX(-3px); }

/* === FORM CONTROLS === */
[data-theme="light"] .form-control {
    background: #ffffff !important;
    border: 1.5px solid #b8d4c0 !important;
    color: #0B1F14 !important;
    box-shadow: 0 1px 4px rgba(15, 155, 88, 0.04);
}
[data-theme="light"] .form-control::placeholder { color: #7aaa8a !important; }
[data-theme="light"] .form-control:focus {
    border-color: #0F9B58 !important;
    box-shadow: 0 0 0 3px rgba(15, 155, 88, 0.12) !important;
    background: #fafffe !important;
    outline: none;
}
[data-theme="light"] .form-control:disabled { background: rgba(15, 155, 88, 0.03) !important; color: #7aaa8a !important; }
[data-theme="light"] .form-label { color: #1a4030; }
[data-theme="light"] .form-label .required { color: #B82057; }
[data-theme="light"] .checkbox-custom-label { background: rgba(255,255,255,0.85); border-color: #b8d4c0; color: #1a4030; }
[data-theme="light"] .checkbox-custom-label:hover { border-color: #0F9B58; background: rgba(15,155,88,0.04); }
[data-theme="light"] .checkbox-custom-input:checked + .checkbox-custom-label { 
    border-color: #0F9B58; background: rgba(15,155,88,0.1); color: #083D1F; box-shadow: none; font-weight: 800;
}
[data-theme="light"] .gender-level-box { background: rgba(15,155,88,0.02); border-color: rgba(15,155,88,0.1); }

/* === TABLE === */
[data-theme="light"] .hud-table-wrapper { border-color: rgba(15, 155, 88, 0.1); }
[data-theme="light"] .hud-table th { background: rgba(15, 155, 88, 0.04); color: #1a4030; border-bottom-color: rgba(15, 155, 88, 0.08); }
[data-theme="light"] .hud-table td { border-bottom-color: rgba(15, 155, 88, 0.05); color: #0B1F14; }
[data-theme="light"] .hud-table tr:hover td { background: rgba(15, 155, 88, 0.02); }

/* === BUTTONS === */
[data-theme="light"] .btn-cyber { color: #0B1F14; border-color: #0F9B58; box-shadow: 0 2px 8px rgba(15, 155, 88, 0.1); }
[data-theme="light"] .btn-cyber:hover { background: #0F9B58; color: #fff; box-shadow: 0 6px 20px rgba(15, 155, 88, 0.3); }
[data-theme="light"] .btn-cyber::after { background: #0F9B58; }

[data-theme="light"] .btn-cyber-gold { border-color: #C47F0D; color: #7A4F08; box-shadow: 0 2px 8px rgba(196, 127, 13, 0.1); }
[data-theme="light"] .btn-cyber-gold:hover { background: #C47F0D; color: #fff; box-shadow: 0 6px 20px rgba(196, 127, 13, 0.3); }
[data-theme="light"] .btn-cyber-gold::after { background: #C47F0D; }

[data-theme="light"] .btn-filter-cyber {
    background: linear-gradient(135deg, #0F9B58 0%, #C47F0D 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(15, 155, 88, 0.3) !important;
    animation: none;
}
[data-theme="light"] .btn-register-slot {
    background: linear-gradient(135deg, #0F9B58 0%, #0D7EA8 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(15, 155, 88, 0.25) !important;
}

/* === STATUS BADGES === */
[data-theme="light"] .status-active { background: rgba(15, 155, 88, 0.1); color: #0F9B58; border-color: rgba(15, 155, 88, 0.2); }
[data-theme="light"] .status-closed { background: rgba(100,116,139,0.08); color: #475569; border-color: rgba(100,116,139,0.15); }

/* === CARD KÈO (GUEST VIEW) === */
[data-theme="light"] .card-keo-cauthi {
    background: rgba(255, 255, 255, 0.94);
    border: 1.5px solid rgba(15, 155, 88, 0.1);
    box-shadow: 0 4px 20px rgba(8, 61, 31, 0.05);
    color: #0B1F14;
}
[data-theme="light"] .card-keo-cauthi:hover {
    background: #ffffff;
    border-color: #0F9B58;
    box-shadow: 0 12px 32px rgba(15, 155, 88, 0.12);
}
[data-theme="light"] .card-keo-header { border-bottom-color: rgba(15, 155, 88, 0.1); }
[data-theme="light"] .card-keo-title { color: #0B1F14; }
[data-theme="light"] .card-keo-price { color: #C47F0D; }
[data-theme="light"] .card-keo-meta { color: #3D6B52; }
[data-theme="light"] .card-keo-meta i { color: #0F9B58; }
[data-theme="light"] .card-keo-address-text { color: #3D6B52; }
[data-theme="light"] .card-keo-meta-row { color: #3D6B52; }
[data-theme="light"] .card-keo-meta-row b { color: #0B1F14; }
[data-theme="light"] .card-keo-count-text { color: #C47F0D; }
[data-theme="light"] .card-keo-meta-box { background: rgba(15, 155, 88, 0.03); border-color: rgba(15, 155, 88, 0.12); }
[data-theme="light"] .slot-filter-bar {
    background: rgba(255, 255, 255, 0.9);
    border: 1.5px solid rgba(15, 155, 88, 0.1);
    box-shadow: 0 4px 20px rgba(8, 61, 31, 0.04);
}

/* === CHIPS & TAGS === */
[data-theme="light"] .chip-item { background: rgba(15, 155, 88, 0.05); border-color: rgba(15, 155, 88, 0.15); color: #1a4030; }
[data-theme="light"] .chip-item-mint { color: #0F9B58; border-color: rgba(15, 155, 88, 0.25); background: rgba(15,155,88,0.06); }

/* === PRICING ENGINE HOST === */
[data-theme="light"] .pricing-engine-wrapper { background: rgba(15, 155, 88, 0.03); border-color: rgba(15, 155, 88, 0.1); }
[data-theme="light"] .suggestion-box { background: rgba(255,255,255,0.85); border-color: rgba(15, 155, 88, 0.12); }
[data-theme="light"] .suggestion-box:hover { border-color: #0F9B58; background: rgba(15,155,88,0.04); }
[data-theme="light"] .suggestion-price { color: #0B1F14; }
[data-theme="light"] .suggestion-title { color: #3D6B52; }
[data-theme="light"] .suggestion-profit { color: #0F9B58; }
[data-theme="light"] .suggestion-box.active { border-color: #0F9B58; background: rgba(15,155,88,0.08); box-shadow: 0 0 0 3px rgba(15,155,88,0.1); }

/* === MODAL === */
[data-theme="light"] .modal-overlay { background: rgba(8, 31, 20, 0.5); }
[data-theme="light"] .modal { background: #ffffff; border-color: rgba(15, 155, 88, 0.15); box-shadow: 0 24px 60px rgba(8, 31, 20, 0.15); }
[data-theme="light"] .modal-title { color: #0B1F14; }
[data-theme="light"] .modal-desc { color: #3D6B52; }
[data-theme="light"] .modal-close { background: rgba(15,155,88,0.05); border-color: rgba(15,155,88,0.15); color: #0B1F14; }
[data-theme="light"] .modal-close:hover { background: #0F9B58; color: #fff; border-color: #0F9B58; }

/* === TOAST === */
[data-theme="light"] .toast { background: #ffffff; border-color: rgba(15, 155, 88, 0.2); color: #0B1F14; box-shadow: 0 8px 32px rgba(8, 31, 20, 0.1); }
[data-theme="light"] .toast-content p { color: #3D6B52; }
[data-theme="light"] .toast-success i { color: #0F9B58; }
[data-theme="light"] .toast-warning i { color: #C47F0D; }
[data-theme="light"] .toast-danger i { color: #B82057; }

/* === TEXT UTILITIES === */
[data-theme="light"] .text-mint { color: #0F9B58 !important; }
[data-theme="light"] .text-gold { color: #C47F0D !important; }
[data-theme="light"] .text-cyan { color: #0D7EA8 !important; }

/* === SCROLLBAR === */
[data-theme="light"] ::-webkit-scrollbar-track { background: #ecf2ee; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(15, 155, 88, 0.3); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #0F9B58; }

/* === STARS === */
[data-theme="light"] .stars-container { color: #b8d4c0; }

/* === FOOTER === */
[data-theme="light"] .gateway-footer { border-top-color: rgba(15, 155, 88, 0.1); color: #3D6B52; }
[data-theme="light"] .admin-secret-trigger { color: #3D6B52; }
[data-theme="light"] .admin-secret-trigger:hover { color: #0F9B58; text-shadow: none; }

/* === THEME TOGGLE BUTTON === */
[data-theme="light"] .btn-theme-toggle {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(196, 127, 13, 0.25);
    color: #C47F0D;
    box-shadow: 0 4px 15px rgba(196, 127, 13, 0.1);
}
[data-theme="light"] .btn-theme-toggle:hover {
    border-color: #C47F0D;
    box-shadow: 0 0 14px rgba(196, 127, 13, 0.3);
}

/* === AMBIENT & DECOR LIGHT === */
[data-theme="light"] .glow-sphere { opacity: 0.04; mix-blend-mode: multiply; }
[data-theme="light"] .willow-decor { opacity: 0.1; filter: hue-rotate(0deg) saturate(0.8); }
[data-theme="light"] .decor-line { background: linear-gradient(90deg, transparent, rgba(15, 155, 88, 0.2)); }
[data-theme="light"] .decor-line.decor-r { background: linear-gradient(270deg, transparent, rgba(15, 155, 88, 0.2)); }
[data-theme="light"] .decor-dot { background: #0F9B58; box-shadow: 0 0 6px rgba(15, 155, 88, 0.35); }


/* ═══════════════════════════════════════════════════════════════
   📱 RESPONSIVE DESIGN - TỐI ƯU TOÀN BỘ MOBILE & TABLET
   ═══════════════════════════════════════════════════════════════ */

/* === TABLET LỚN (max 1024px) === */
@media (max-width: 1024px) {
    .gateway-container { padding: 8px 20px 48px; }
    .gateway-button-grid { gap: 22px; }
    .gateway-card { padding: 28px; }
    .slot-grid { grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); gap: 0; }

}

/* === TABLET (max 768px) === */
@media (max-width: 768px) {
    /* --- Layout cơ bản --- */
    .gateway-container { padding: 6px 14px 40px; }
    .gateway-header { padding: 12px 16px; }
    .gateway-header .brand-logo { font-size: 1.25rem; }

    /* --- Title --- */
    .gateway-title-glow .title-brand { font-size: 2.1rem; letter-spacing: -0.02em; }
    .gateway-title-glow .title-primary { font-size: 0.75rem; letter-spacing: 0.3em; }
    .gateway-desc { font-size: 0.92rem; margin-bottom: 22px; }

    /* --- Cards trang chủ --- */
    .gateway-button-grid { grid-template-columns: 1fr; gap: 16px; }
    .gateway-card { min-height: auto; padding: 24px 20px; }
    .card-title { font-size: 1.15rem; }
    .card-desc { font-size: 0.85rem; }

    /* --- HUD Metrics --- */
    .hud-metrics { 
        padding: 8px 12px; 
        flex-wrap: wrap; 
        justify-content: center; 
        gap: 8px 14px; 
        border-radius: 14px; 
        font-size: 0.75rem;
    }
    .metric-divider { display: none; }

    /* --- HUD Panel --- */
    .hud-panel { padding: 20px 16px; }
    .hud-panel-header { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 10px; 
        padding-bottom: 14px; 
        margin-bottom: 18px; 
    }
    .hud-panel-title { font-size: 1.15rem; gap: 8px; }
    .hud-section-title { font-size: 0.9rem; }
    .hud-grid { grid-template-columns: 1fr; gap: 20px; }

    /* --- Slot Grid --- */
    .slot-grid { grid-template-columns: 1fr; gap: 0; }
    .card-keo-cauthi { padding: 14px 13px; gap: 8px; }
    .card-keo-title { font-size: 1rem; }
    .card-keo-price { font-size: 0.92rem; }
    .card-keo-meta-box { padding: 8px 10px; font-size: 0.8rem; }

    /* --- Filter bar --- */
    .slot-filter-bar { padding: 16px; margin-bottom: 18px; }
    .btn-filter-cyber { height: 46px !important; font-size: 0.88rem !important; }

    /* --- Form --- */
    .form-control { padding: 10px 12px; font-size: 0.88rem; }
    .form-label { font-size: 0.68rem; }

    /* --- Shuttlecock row responsive --- */
    .shuttlecock-row { grid-template-columns: 1fr 1fr; gap: 8px; }

    /* --- Pricing suggestions grid --- */
    .pricing-suggestions { grid-template-columns: 1fr 1fr; gap: 10px; }

    /* --- Table --- */
    .hud-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .hud-table { font-size: 0.78rem; }
    .hud-table th, .hud-table td { padding: 10px 10px; }

    /* --- Modal --- */
    .modal { width: 96%; max-height: 95vh; margin: 10px; }
    .modal-header { padding: 18px 18px 12px; }
    .modal-body { padding: 0 18px 18px; }
    .modal-title { font-size: 1.15rem; }

    /* --- Toast --- */
    .toast-container { bottom: 14px; right: 10px; left: 10px; }
    .toast { min-width: auto; width: 100%; }

    /* --- Ẩn decoration trên mobile --- */
    .willow-decor { display: none; }
    .glow-particle { display: none; }
    
    /* --- Button size trên mobile --- */
    .btn-cyber, .btn-cyber-gold { padding: 10px 18px; font-size: 0.82rem; }
    .btn-hud-back { padding: 7px 12px; font-size: 0.76rem; }
}

/* === MOBILE (max 480px) === */
@media (max-width: 480px) {
    .gateway-container { padding: 4px 12px 32px; }
    .gateway-header { padding: 10px 14px; }
    .brand-logo { font-size: 1.1rem !important; gap: 8px !important; }

    .gateway-title-glow .title-brand { font-size: 1.8rem; }
    .gateway-title-glow .title-primary { display: none; }
    .gateway-desc { font-size: 0.85rem; margin-bottom: 18px; }

    .gateway-card { padding: 20px 15px; }
    .card-icon-wrapper { width: 46px; height: 46px; font-size: 1.3rem; }
    .card-title { font-size: 1rem; }

    .hud-panel { padding: 16px 13px; }
    .hud-panel-title { font-size: 1rem; }

    .gateway-button-grid { gap: 12px; }
    .slot-grid { gap: 6px; }
    .card-keo-cauthi { padding: 15px 13px; gap: 8px; }

    .btn-filter-cyber { height: 44px !important; font-size: 0.82rem !important; }
    .pricing-suggestions { grid-template-columns: 1fr; gap: 8px; }
    .shuttlecock-row { grid-template-columns: 1fr; gap: 6px; }

    .hud-metrics { gap: 6px 10px; padding: 6px 10px; font-size: 0.7rem; }
    
    /* Ẩn nhãn metric trên màn hình rất nhỏ */
    .metric-label { display: none; }
}

/* === MOBILE SIÊU NHỎ (max 360px) === */
@media (max-width: 360px) {
    .gateway-title-glow .title-brand { font-size: 1.55rem; }
    .gateway-card { padding: 16px 12px; }
    .hud-panel { padding: 13px 11px; }
    .form-control { padding: 8px 10px; font-size: 0.82rem; }
    .card-keo-cauthi { padding: 13px 11px; }
    .btn-cyber, .btn-cyber-gold { padding: 9px 14px; font-size: 0.78rem; }
}

/* === FIX IOS SAFARI === */
@supports (-webkit-touch-callout: none) {
    .form-control, select {
        -webkit-appearance: none;
        border-radius: var(--radius-sm);
    }
}

/* ══════════════════════════════════════════════════════════════
 * DATE / TIME PICKER — CYBERPUNK STYLE (F2)
 * Áp dụng cho tất cả input[type=date] và input[type=time]
 * trong toàn bộ dự án (host.html, khach.html)
 * ══════════════════════════════════════════════════════════════ */
.hs-picker-wrap {
    position: relative;
    display: block;
}
.hs-picker-wrap input[type="date"],
.hs-picker-wrap input[type="time"] {
    color-scheme: dark; /* Kích hoạt native dark UI cho picker popup */
    cursor: pointer;
    padding-right: 2.8rem; /* Nhường chỗ cho icon */
    width: 100%;
    box-sizing: border-box;
}
.hs-picker-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent-green, #00ff88);
    pointer-events: none; /* Không chặn click vào input */
    font-size: 1.05rem;
    line-height: 1;
}
/* Viền sáng khi focus */
.hs-picker-wrap:focus-within input[type="date"],
.hs-picker-wrap:focus-within input[type="time"] {
    border-color: var(--accent-green, #00ff88) !important;
    box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.15);
    outline: none;
}

/* ══════════════════════════════════════════════════════════════
 * NOMINATIM MAPS AUTOCOMPLETE DROPDOWN (F3)
 * ══════════════════════════════════════════════════════════════ */
.nominatim-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-card, #1a2844);
    border: 1px solid var(--accent-green, #00ff88);
    border-radius: var(--radius-sm, 8px);
    z-index: 1000;
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.nominatim-dropdown:empty { display: none !important; }

.nominatim-item {
    padding: 10px 14px;
    font-size: 0.85rem;
    color: var(--text-main, #e2e8f0);
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s;
    line-height: 1.4;
}
.nominatim-item:last-child { border-bottom: none; }
.nominatim-item:hover {
    background: rgba(0, 255, 136, 0.12);
    color: var(--accent-green, #00ff88);
}

/* Minimap preview (iframe OpenStreetMap) */
#minimapPreview {
    width: 100%;
    height: 180px;
    border-radius: var(--radius-sm, 8px);
    border: 1px solid var(--accent-green, #00ff88);
    margin-top: 8px;
    display: none; /* Hiện bằng JS sau khi chọn địa chỉ */
}

/* ══════════════════════════════════════════════════════════════
 * 1-CLICK AUTH FORM (MODULE 2) — CSS cho form đăng nhập/đăng ký
 * ══════════════════════════════════════════════════════════════ */
/* Radio pill gender selector */
.gender-pill-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.gender-pill-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: var(--bg-card, #1a2844);
    border: 1px solid var(--border, #1e3a5f);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-muted, #9ca3af);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    user-select: none;
}
.gender-pill-group input[type="radio"] { display: none; }
.gender-pill-group input[type="radio"]:checked + span,
.gender-pill-group label:has(input[type="radio"]:checked) {
    color: var(--accent-green, #00ff88);
    border-color: var(--accent-green, #00ff88);
    background: rgba(0, 255, 136, 0.08);
}

/* Slide-down animation cho form phụ đăng ký */
.auth-extra-fields {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease-out, opacity 0.3s;
    opacity: 0;
}
.auth-extra-fields.is-open {
    max-height: 800px;
    opacity: 1;
    transition: max-height 0.5s ease-in, opacity 0.3s 0.1s;
}
.auth-extra-fields .extra-divider {
    text-align: center;
    color: var(--text-muted, #9ca3af);
    font-size: 0.8rem;
    margin: 14px 0 12px;
    position: relative;
}
.auth-extra-fields .extra-divider::before,
.auth-extra-fields .extra-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 38%;
    height: 1px;
    background: var(--border, #1e3a5f);
}
.auth-extra-fields .extra-divider::before { left: 0; }
.auth-extra-fields .extra-divider::after  { right: 0; }

/* Input với class input-error */
.input-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}
.input-hint {
    display: block;
    font-size: 0.78rem;
    margin-top: 4px;
    min-height: 1.1em;
    color: #ef4444;
}

/* Profile upgrade box (MODULE 4) */
.profile-upgrade-box {
    background: var(--bg-card, #1a2844);
    border: 1px solid var(--accent-green, #00ff88);
    border-radius: var(--radius-md, 12px);
    padding: 18px 20px;
    margin-top: 16px;
}
.profile-upgrade-box .upgrade-header {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--accent-green, #00ff88);
    margin-bottom: 8px;
}
.profile-upgrade-box p {
    font-size: 0.88rem;
    color: var(--text-muted, #9ca3af);
    margin: 0 0 12px;
}
.upgrade-input-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.upgrade-input-row input {
    flex: 1;
    min-width: 180px;
    font-family: monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.profile-host-badge {
    background: linear-gradient(135deg, rgba(0,255,136,0.08), rgba(0,255,136,0.03));
    border: 1px solid var(--accent-green, #00ff88);
    border-radius: var(--radius-md, 12px);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.btn-go-host {
    margin-left: auto;
    padding: 8px 18px;
    background: var(--accent-green, #00ff88);
    color: #0a1628;
    border-radius: var(--radius-sm, 8px);
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s;
}
.btn-go-host:hover { opacity: 0.85; }

/* ══════════════════════════════════════════════════════════════
 * SHUTTLECOCK CARD LAYOUT 2 CỘT (F5)
 * ══════════════════════════════════════════════════════════════ */
.shuttlecock-card {
    background: var(--bg-card2, #162039);
    border: 1px solid var(--border, #1e3a5f);
    border-radius: var(--radius-sm, 8px);
    padding: 14px 16px;
    margin-bottom: 12px;
    position: relative;
}
.sc-row-full { margin-bottom: 10px; }
.sc-row-full label,
.sc-row-2col label { font-size: 0.82rem; color: var(--text-muted, #9ca3af); margin-bottom: 4px; display: block; }
.sc-row-full input { width: 100%; box-sizing: border-box; }
.sc-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
.sc-tong-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: rgba(0, 255, 136, 0.06);
    border-radius: var(--radius-sm, 8px);
    font-size: 0.9rem;
    margin-top: 6px;
}
.sc-tong-tien { color: var(--accent-green, #00ff88); font-size: 1.05rem; }
.btn-remove-sc {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-remove-sc:hover { background: rgba(239, 68, 68, 0.25); }

@media (max-width: 480px) {
    .sc-row-2col { grid-template-columns: 1fr; }
    .upgrade-input-row { flex-direction: column; }
    .upgrade-input-row input { width: 100%; min-width: unset; }
    .profile-host-badge { flex-direction: column; align-items: flex-start; }
    .btn-go-host { margin-left: 0; width: 100%; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════
 * FIX 1 — TABLE SCROLL WRAP (dùng trong admin.html + tương lai)
 * Bọc <table> để cuộn ngang nội bộ, không kéo giãn layout
 * ══════════════════════════════════════════════════════════════ */
.table-scroll-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Cuộn mượt iOS */
    border-radius: 8px;
}
/* Scrollbar mỏng cho bảng */
.table-scroll-wrap::-webkit-scrollbar { height: 4px; }
.table-scroll-wrap::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
.table-scroll-wrap::-webkit-scrollbar-thumb {
    background: var(--accent-green, #00ff88);
    border-radius: 2px;
}

/* ══════════════════════════════════════════════════════════════
 * FIX 9 — ẨN ICON LỊCH NATIVE CỦA TRÌNH DUYỆT TRONG .hs-picker-wrap
 * Giữ lại emoji 📅 làm icon duy nhất, native icon trong suốt
 * nhưng vẫn clickable để bật date picker
 * ══════════════════════════════════════════════════════════════ */
.hs-picker-wrap input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;        /* Trong suốt — không thấy nhưng vẫn clickable */
    cursor: pointer;
    width: 2.4rem;     /* Phủ khu vực icon emoji để click anywhere bật picker */
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

/* ══════════════════════════════════════════════════════════════
 * FIX 6 — NAVBAR LAYOUT (khach.html .ks-header)
 * Đảm bảo logo và phần phải không nhảy layout khi resize
 * ══════════════════════════════════════════════════════════════ */
.ks-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    gap: 12px;
}
.ks-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    text-decoration: none;
}
.ks-brand-text {
    font-size: 1rem !important;
    font-weight: 800 !important;
    white-space: nowrap;
}
.ks-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
 * FIX 7 — FILTER PANEL Z-INDEX (khach.html)
 * Filter sticky không đè lên card content
 * ══════════════════════════════════════════════════════════════ */
.kh-filter-bar,
.filter-section {
    position: relative;
    z-index: 10;
}
.kh-keo-list {
    position: relative;
    z-index: 1;
}
/* kh-sidebar KHÔNG được tạo stacking context — để #login-sheet (position:fixed) thoát ra ngoài */
.kh-sidebar {
    position: static;
    z-index: auto;
}

/* ══════════════════════════════════════════════════════════════
 * FIX 10A — MOBILE GRID ORDER (khach.html)
 * Trên mobile: danh sách kèo hiện trước, sidebar sau
 * ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .kh-layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important; /* Cho sidebar/right chiếm full width */
    }
    .kh-right  { order: 1; width: 100%; } /* Khu vực filter + kèo: hiện trước */
    .kh-sidebar { order: 2; width: 100%; } /* Sidebar: hiện sau — full width */
}

/* ══════════════════════════════════════════════════════════════
 * FIX 10B — NÚT "TÌM KÈO NGAY" MOBILE FIXED BOTTOM
 * Chỉ hiện trên mobile, ẩn trên desktop
 * ══════════════════════════════════════════════════════════════ */
#btnTimKeoMobile {
    display: none; /* Ẩn mặc định */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 500;
    background: linear-gradient(135deg, #00d97a, #00a855);
    color: #fff;
    padding: 12px 20px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 0.88rem;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0,212,122,0.4);
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: transform 0.2s, box-shadow 0.2s;
}
#btnTimKeoMobile:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 28px rgba(0,212,122,0.55);
}
@media (max-width: 900px) {
    #btnTimKeoMobile { display: flex; }
    #btnTimKeoMobile.hidden-by-tab { display: none !important; }
}
@media (min-width: 901px) {
    #btnTimKeoMobile { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
 * FIX 12 — ACCORDION CARDS (khach.html)
 * 4 card phụ thu gọn mặc định, click header để mở/đóng
 * ══════════════════════════════════════════════════════════════ */
.acc-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    -webkit-user-select: none;
}
.acc-header:hover { color: var(--accent-green, #00ff88); }
.acc-arrow {
    transition: transform 0.3s ease;
    font-size: 0.75rem;
    margin-left: 8px;
    flex-shrink: 0;
}
.acc-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.38s ease, opacity 0.3s;
    opacity: 0;
}
.acc-body.open {
    max-height: 2400px; /* Đủ lớn cho nội dung dài nhất */
    opacity: 1;
}
.acc-arrow.open { transform: rotate(180deg); }
/* ══════════════════════════════════════════════════════════════
 * FIX C — DATE RANGE KHÔNG TRÀN SIDEBAR (khach.html)
 * Đảm bảo 2 ô input ngày nằm gọn bên trong card sidebar trên PC
 * ══════════════════════════════════════════════════════════════ */
.kh-date-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;       /* Chặn con tràn ra ngoài */
}
.kh-date-range > div {
    min-width: 0;           /* Cho phép grid cell co lại khi cần */
    overflow: hidden;
}
.kh-date-range .hs-picker-wrap { width: 100%; }
.kh-date-range .hs-picker-wrap input[type="date"],
.kh-date-range .kh-input-sm[type="date"] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 0.75rem;    /* Thu nhỏ font để vừa ô hẹp */
}

/* ═══════════════════════════════════════════════════════════
 * ĐẠI TU — RESPONSIVE PC/MOBILE + BUG UI/UX
 * Thêm vào: 2026-05-24
 * ═══════════════════════════════════════════════════════════ */

/* ── 2A: Mobile overflow khach.html ── */
@media (max-width: 900px) {
    html, body { overflow-x: hidden; max-width: 100vw; }
    .kh-layout, .kh-right { max-width: 100%; overflow-x: hidden; }
    .kh-sidebar { max-width: 100%; /* KHÔNG dùng overflow-x:hidden — sẽ clip #login-sheet fixed trên iOS */ }
    .kh-filter-bar { max-width: 100%; overflow: visible; }
    .kh-keo-card, .slot-card {
        max-width: 100%;
        box-sizing: border-box;
        word-break: break-word;
    }
    .slot-card-inner, .slot-card-footer, .slot-price-row, .slot-details-row {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ── Fix 6: wrapper trình độ + badge — badge luôn dính đáy wrapper ── */
.slot-level-badge-wrap {
    min-height: 88px;        /* đủ chứa 2 dòng trình độ + badge */
    display: flex;
    flex-direction: column;
}
/* Phần trình độ chiếm hết không gian còn lại → đẩy badge xuống đáy */
.slot-level-badge-wrap .slot-details-row {
    flex: 1;
}
/* Badge luôn dính đáy nhờ margin-top: auto */
.slot-level-badge-wrap .kh-da-dang-ky-badge {
    margin-top: auto;
}

/* ── TASK 3.6: Trình độ tách dòng + badge đăng ký riêng ── */
.kh-trinh-do-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
}
.kh-trinh-do-line {
    font-size: 0.82rem;
    color: #d0dde8;
    line-height: 1.4;
    white-space: normal;
}
.kh-da-dang-ky-badge {
    display: block;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 6px;
    padding: 3px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* ── 2C: Badge "ĐÃ ĐẶT" — trạng thái xác nhận thành công ── */
.btn-da-dat {
    background: rgba(34,197,94,0.15);
    border: 1.5px solid rgba(34,197,94,0.55);
    color: #4ade80;
    cursor: default;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(34,197,94,0.1);
}

/* Bug 3B: badge "ĐÃ HỦY" — khách đã tự hủy slot ca này (không đặt lại được) */
.btn-da-huy {
    background: rgba(239,68,68,0.10);
    border: 1.5px solid rgba(239,68,68,0.45);
    color: #f87171;
    cursor: not-allowed;
    padding: 9px 10px;
    border-radius: 9px;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    pointer-events: none;
    text-transform: uppercase;
}

/* Nút "HỦY SLOT" trong modal Chi Tiết Ca (PHẦN 1) — đỏ, bấm được */
.btn-huy-slot-modal {
    background: rgba(239,68,68,0.12);
    border: 1.5px solid rgba(239,68,68,0.5);
    color: #f87171;
    cursor: pointer;
    padding: 11px 12px;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 800;
    font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    white-space: nowrap; text-transform: uppercase; letter-spacing: 0.02em;
    transition: background 0.16s, border-color 0.16s, box-shadow 0.16s, transform 0.1s;
}
.btn-huy-slot-modal:hover {
    background: rgba(239,68,68,0.22);
    border-color: rgba(239,68,68,0.8);
    box-shadow: 0 0 14px rgba(239,68,68,0.28);
    color: #fca5a5;
}
.btn-huy-slot-modal:active { transform: scale(0.98); }

/* ════════════════════════════════════════════════════════
   ✏️ FORM CHỈNH SỬA CA ĐẤU (modal-sua-ca) — section + label nhất quán
   ════════════════════════════════════════════════════════ */
.msc-section-title {
    font-size: 0.74rem; font-weight: 700; color: #fbbf24;
    text-transform: uppercase; letter-spacing: 0.05em;
    margin: 18px 0 11px; padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; gap: 7px;
}
.msc-field { margin-bottom: 12px; }
.msc-field-label { display: block; font-size: 0.74rem; font-weight: 600; color: #cbd5e1; margin-bottom: 5px; }
.msc-input {
    width: 100%; padding: 9px 12px; background: rgba(30,58,95,0.7);
    border: 1px solid #2d4a6e; border-radius: 8px; color: #e2e8f0;
    font-size: 0.85rem; box-sizing: border-box; font-family: inherit; outline: none;
    transition: border-color 0.15s;
}
.msc-input:focus { border-color: rgba(251,191,36,0.5); }
.msc-input[readonly] { background: rgba(30,58,95,0.35); color: #94a3b8; cursor: not-allowed; }
.msc-hint { font-size: 0.68rem; color: #64748b; margin-top: 3px; }
.msc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.msc-warn {
    font-size: 0.76rem; color: #fbbf24; padding: 8px 11px; line-height: 1.45;
    background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.25);
    border-radius: 8px; margin-bottom: 12px; display: flex; gap: 7px; align-items: flex-start;
}
.msc-textarea {
    width: 100%; min-height: 46px; resize: vertical; padding: 8px 12px;
    background: rgba(30,58,95,0.7); border: 1px solid #2d4a6e; border-radius: 8px;
    color: #e2e8f0; font-size: 0.82rem; box-sizing: border-box; font-family: inherit; outline: none; line-height: 1.4;
}
.msc-textarea:focus { border-color: rgba(251,191,36,0.5); }
@media (max-width: 460px) { .msc-row2 { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════
   📊 BỘ LỌC DOANH THU (host) — responsive 1 hàng PC / 2 hàng mobile
   ════════════════════════════════════════════════════════ */
.dt-filter-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px;
}
.dt-filter-period { display: flex; align-items: center; gap: 8px; }
.dt-filter-lbl { color: #94a3b8; font-size: 0.85rem; white-space: nowrap; }
.dt-filter-select { width: auto; min-width: 160px; font-size: 0.85rem; }
.dt-filter-or { color: #64748b; font-size: 0.78rem; }
.dt-filter-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dt-filter-date { width: auto; min-width: 145px; font-size: 0.85rem; }
.dt-filter-arrow { color: #64748b; font-size: 0.78rem; flex-shrink: 0; }
.dt-filter-btn { font-size: 0.82rem; white-space: nowrap; flex-shrink: 0; }

@media (max-width: 600px) {
    .dt-filter-bar { gap: 10px; }
    .dt-filter-period { width: 100%; }
    .dt-filter-select { flex: 1; min-width: 0; }     /* select full-width hàng 1 */
    .dt-filter-or { display: none; }                  /* ẩn "hoặc" trên mobile */
    .dt-filter-range { width: 100%; gap: 6px; }
    .dt-filter-date { flex: 1 1 0; min-width: 0; }     /* 2 input ngày chia đều hàng 2 */
    .dt-filter-btn { flex-shrink: 0; }
}

/* Cho phép chuỗi flex co lại để ghi chú dài TRUNCATE (mặc định flex item min-width:auto =
   không co dưới content → note nowrap kéo giãn card ra 875px). Thêm min-width:0 cả chuỗi. */
.slot-card-body, .slot-level-badge-wrap, .slot-details-row,
.slot-detail-item, .kh-trinh-do-row, .kh-trinh-do-line { min-width: 0; }

/* Ghi chú trình độ (free text) — TRUNCATE 1 dòng (chiếm dòng riêng) → card không cao bất thường.
   Selector .slot-card-body .kh-level-note để THẮNG `.slot-card-body *{white-space:normal}` (4499). */
.slot-card-body .kh-level-note {
    flex: 0 1 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
    font-size: 0.65rem;
    line-height: 1.4;
    color: #64748b;
    margin-top: 1px;
    /* GIỮ CHỖ 1 dòng cố định kể cả khi rỗng → card cùng cấu hình giới tính thẳng hàng */
    min-height: 15px;
}
/* Ghi chú rỗng: vẫn chiếm 1 dòng nhưng vô hình */
.slot-card-body .kh-level-note--empty { visibility: hidden; }

/* Badge "+N" pills trình độ (PHẦN 2B) — bấm xem hết trong Chi Tiết */
.kh-level-more {
    cursor: pointer;
    background: rgba(0,255,136,0.12) !important;
    border-color: rgba(0,255,136,0.4) !important;
    color: #00ff88 !important;
    font-weight: 800;
}
.kh-level-more:hover { background: rgba(0,255,136,0.22) !important; }

/* Cọc banner trong card — 1 DÒNG cố định (ca cọc = vàng; ca không cọc = dòng "không cọc") */
.coc-banner--1l { align-items: center; }
.coc-banner--1l .coc-1l-txt {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
/* Ca KHÔNG cọc — cùng box (height cân bằng) nhưng nhẹ nhàng: xanh nhạt mờ + checkmark */
.coc-banner--free {
    background: rgba(74, 222, 128, 0.06);
    border-color: rgba(74, 222, 128, 0.22);
    color: #4ade80;
    opacity: 0.7;
    font-weight: 600;
    font-size: var(--fs-xs, 0.72rem);
}

/* ── 2D: Card kèo (tablet+PC) — CÙNG CHIỀU CAO + phân vùng cố định ──
   Mọi vùng giữ height tự nhiên; HOST (hoặc spacer) hút khoảng trống dư
   → host + footer DÍNH ĐÁY card, khoảng trắng gom về 1 chỗ (trên host) đều nhau. */
@media (min-width: 601px) {
    #slotsSearchResultContainer { align-items: stretch; }
    .slot-card {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .slot-card-inner {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .slot-card-body { flex: 0 0 auto; }                  /* KHÔNG co giãn (tránh gap ở giữa) */
    .slot-host-banner, .slot-host-spacer { margin-top: auto; }  /* hút slack → đẩy host+footer xuống đáy */
    .slot-host-spacer { min-height: 0; }
    .slot-card-footer {
        padding-top: 10px;
        border-top: 1px solid rgba(255,255,255,0.06);
    }
}

/* ── 2E: Mobile card — trình độ + badge dòng riêng ── */
@media (max-width: 600px) {
    .kh-trinh-do-row {
        display: flex;
        flex-direction: column;
        gap: 2px;
        font-size: 0.75rem;
    }
    .kh-da-dang-ky-badge {
        display: block;
        margin-top: 6px;
        font-size: 0.75rem;
        color: #9ca3af;
    }
    .slot-details-row {
        flex-direction: column;
        gap: 4px;
    }
}

/* ── 3A: Mobile overflow host.html ── */
@media (max-width: 900px) {
    .hs-form-section, .hs-form-row, .shuttlecock-card {
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    .hs-form-row {
        flex-wrap: wrap;
    }
    .hs-form-row > div, .hs-form-row > label {
        min-width: 0;
        box-sizing: border-box;
    }
}

/* ── 3B: Ẩn icon native date/time picker, giữ emoji ── */
.hs-picker-wrap input[type="time"]::-webkit-calendar-picker-indicator,
.hs-picker-wrap input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
    width: 2.4rem;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

/* ── Căn giữa text trong select Tỉnh/Thành phố và Quận/Huyện ── */
#hostProvince,
#hostDistrict {
    text-align: center;
    text-align-last: center;
}

/* ── Ẩn mũi tên xổ xuống native trên date/time input trong .hs-picker-wrap ──
   (thêm display:none cho trình duyệt không hỗ trợ opacity:0) */
.hs-picker-wrap { position: relative; }
.hs-picker-wrap input[type="date"],
.hs-picker-wrap input[type="time"] { position: relative; }

/* ── 3E: Bảng cầu — header không bị cắt ── */
.shuttlecock-card .sc-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.shuttlecock-card label {
    font-size: 0.72rem;
    overflow: visible;
    /* TASK 4.5: Không cắt tiêu đề cột trên PC hẹp */
    white-space: nowrap;
}
@media (max-width: 480px) {
    .shuttlecock-card .sc-row-2col { grid-template-columns: 1fr; }
}

/* ── 4B: Dropdown hành động thành viên ── */
.ad-action-dropdown-wrap {
    position: relative;
    display: inline-block;
}
.ad-action-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 200;
    background: #1a2844;
    border: 1px solid #2d4a6e;
    border-radius: 8px;
    min-width: 190px;
    padding: 6px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.ad-action-dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    background: none;
    border: none;
    color: #e2e8f0;
    font-size: 0.82rem;
    cursor: pointer;
    font-family: inherit;
}
.ad-action-dropdown button:hover { background: rgba(255,255,255,0.07); }
.ad-action-dropdown button.danger { color: #ef4444; }

/* ── 4E: Badge sao + danh sách đánh giá ── */
.sao-badge {
    display: inline-block;
    background: rgba(251,191,36,0.15);
    border: 1px solid rgba(251,191,36,0.4);
    color: #fbbf24;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}
.dg-item {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: rgba(255,255,255,0.03);
}
.dg-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.dg-loai-badge {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 10px;
}
.dg-loai-badge.guest {
    background: rgba(99,102,241,0.15);
    color: #818cf8;
    border: 1px solid rgba(99,102,241,0.3);
}
.dg-loai-badge.host {
    background: rgba(0,255,136,0.1);
    color: #00ff88;
    border: 1px solid rgba(0,255,136,0.25);
}
.dg-item-noi-dung {
    font-size: 0.85rem;
    color: #e2e8f0;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════
   TASK 1.2 — Modal Quản Lý Thành Viên (mv-*)
   5 section xếp chồng, không dùng alert/confirm
   ═══════════════════════════════════════════════════ */

/* Nút "Quản lý" đơn trong cột Hành động bảng thành viên */
.mv-ql-btn {
    background: linear-gradient(135deg, rgba(0,212,255,0.12), rgba(0,255,136,0.1));
    border: 1px solid rgba(0,212,255,0.35);
    color: #00d4ff;
    padding: 5px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    font-family: inherit;
}
.mv-ql-btn:hover {
    background: linear-gradient(135deg, rgba(0,212,255,0.22), rgba(0,255,136,0.18));
    border-color: rgba(0,212,255,0.6);
}

/* Section block */
.mv-section {
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: rgba(255,255,255,0.02);
}
.mv-section:last-child { margin-bottom: 0; }
.mv-section-danger {
    border-color: rgba(239,68,68,0.25);
    background: rgba(239,68,68,0.04);
}

/* Section title */
.mv-section-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}

/* Form grid: label on top, input below */
.mv-form-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}
.mv-label {
    font-size: 0.72rem;
    color: #64748b;
    display: block;
    margin-bottom: 3px;
}
.mv-input {
    width: 100%;
    padding: 8px 11px;
    background: #0f1e35;
    border: 1px solid #2d4a6e;
    border-radius: 7px;
    color: #e2e8f0;
    font-size: 0.88rem;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.2s;
}
.mv-input:focus {
    outline: none;
    border-color: rgba(0,212,255,0.5);
}
.mv-input:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Vai trò buttons */
.mv-role-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* Generic button */
.mv-btn {
    padding: 7px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid #2d4a6e;
    border-radius: 7px;
    color: #94a3b8;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    font-family: inherit;
}
.mv-btn:hover { background: rgba(255,255,255,0.09); color: #e2e8f0; }

/* Button variants */
.mv-btn-primary {
    background: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(0,255,136,0.12));
    border-color: rgba(0,212,255,0.4);
    color: #00d4ff;
}
.mv-btn-primary:hover {
    background: linear-gradient(135deg, rgba(0,212,255,0.25), rgba(0,255,136,0.2));
    border-color: rgba(0,212,255,0.65);
    color: #00eeff;
}
.mv-btn-active {
    background: rgba(0,255,136,0.14);
    border-color: rgba(0,255,136,0.5);
    color: #00ff88;
}
.mv-btn-warn {
    background: rgba(251,146,60,0.12);
    border-color: rgba(251,146,60,0.4);
    color: #fb923c;
}
.mv-btn-warn:hover {
    background: rgba(251,146,60,0.22);
    border-color: rgba(251,146,60,0.65);
}
.mv-btn-danger {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.4);
    color: #ef4444;
}
.mv-btn-danger:hover {
    background: rgba(239,68,68,0.22);
    border-color: rgba(239,68,68,0.65);
}

/* Inline confirm box (cho đổi vai trò) */
.mv-confirm-box {
    background: rgba(251,191,36,0.07);
    border: 1px solid rgba(251,191,36,0.3);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.82rem;
    color: #e2e8f0;
}

/* Badge vai trò trong bảng */
.mv-role-badge-admin {
    display: inline-block;
    background: rgba(251,191,36,0.14);
    border: 1px solid rgba(251,191,36,0.4);
    color: #fbbf24;
    padding: 2px 9px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}
.mv-role-badge-host {
    display: inline-block;
    background: rgba(0,255,136,0.1);
    border: 1px solid rgba(0,255,136,0.35);
    color: #00ff88;
    padding: 2px 9px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}
.mv-role-badge-guest {
    display: inline-block;
    background: rgba(99,102,241,0.1);
    border: 1px solid rgba(99,102,241,0.3);
    color: #818cf8;
    padding: 2px 9px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════
   PHÂN HỆ A — Admin UI Polish
   ═══════════════════════════════════════════════════ */

/* A.2: Nút Quản lý — icon + gap */
.mv-ql-btn { gap: 6px; display: inline-flex; align-items: center; }

/* A.4: Input slate-800 + Button indigo-600 */
.mv-input {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    height: 40px;
    padding: 0 12px;
    font-size: 0.875rem;
    width: 100%;
    color: #e2e8f0;
    box-sizing: border-box;
    transition: border-color 0.2s;
    font-family: inherit;
}
.mv-input:focus { outline: none; border-color: #6366f1; }
.mv-btn-primary {
    background: #4f46e5 !important;
    border-color: #4f46e5 !important;
    color: #fff !important;
    height: 40px;
    padding: 0 16px;
    font-size: 0.875rem;
    font-weight: 500;
    text-shadow: none !important;
    border-radius: 8px;
}
.mv-btn-primary:hover { background: #6366f1 !important; border-color: #6366f1 !important; }

/* A.5: Role buttons — individual rounded style */
.mv-role-btns {
    gap: 6px;
    border: none;
    border-radius: 0;
    overflow: visible;
}
.mv-role-btns .mv-btn {
    border-radius: 6px;
    border: 1px solid #334155;
    background: transparent;
    color: #94a3b8;
    flex: 1;
    text-align: center;
    justify-content: center;
    font-size: 0.875rem;
    padding: 6px 16px;
}
.mv-role-btns .mv-btn:hover { background: rgba(255,255,255,0.05); color: #e2e8f0; }
.mv-role-btns .mv-btn:last-child { border-right: 1px solid #334155; }
.mv-role-btns .mv-btn.mv-btn-active {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #fff;
}

/* A.6: Delete zone + danger button solid red */
.mv-section-danger {
    border-color: rgba(239,68,68,0.4);
    background: rgba(239,68,68,0.06);
}
.mv-section-danger .mv-section-title { color: #f87171; }
.mv-btn-danger {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
    height: 40px;
    padding: 0 16px;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
}
.mv-btn-danger:hover { background: #dc2626; border-color: #dc2626; }

/* ═══════════════════════════════════════════════════
   PHÂN HỆ B — Key Form Polish
   ═══════════════════════════════════════════════════ */

/* B.2: Segmented button nhóm "Số ngày" */
.kf-day-btns {
    display: flex;
    gap: 0;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 4px;
}
.kf-day-btn {
    flex: 1;
    padding: 8px 4px;
    background: rgba(255,255,255,0.03);
    border: none;
    border-right: 1px solid rgba(255,255,255,0.08);
    color: #9ca3af;
    font-size: 0.8rem;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
    text-align: center;
}
.kf-day-btn:last-child { border-right: none; }
.kf-day-btn:hover { background: rgba(255,255,255,0.08); color: #e2e8f0; }
.kf-day-active {
    background: rgba(0,255,136,0.12) !important;
    color: #00ff88 !important;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════
   PHÂN HỆ HH — Host UI Polish
   ═══════════════════════════════════════════════════ */

/* HH2: Bảng cầu tiêu thụ mobile */
@media (max-width: 600px) {
    .sc-row-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .sc-row-grid > div:last-child {
        grid-column: 1 / -1;
        display: flex;
        justify-content: flex-end;
    }
}

/* HH4: Ẩn spin button trên ô number trong bảng cầu, căn phải */
#shuttlecockListContainer input[type="number"]::-webkit-inner-spin-button,
#shuttlecockListContainer input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#shuttlecockListContainer input[type="number"] {
    -moz-appearance: textfield;
    text-align: right;
}

/* HH6: Bộ lọc lịch trong tab Doanh Thu */
#doanhThuFilter {
    background: rgba(71,85,105,0.55);
    color: #e2e8f0;
    border-color: rgba(100,116,139,0.5);
}
#tabDoanhThu input[type="date"] {
    background: rgba(71,85,105,0.5);
    color: #e2e8f0;
    border-color: rgba(100,116,139,0.5);
}
#tabDoanhThu input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.5);
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════
   PHÂN HỆ H/J — Khách UI Polish
   ═══════════════════════════════════════════════════ */

/* H2: Gender pill — chặn tap-highlight */
.gender-pill-group label {
    -webkit-tap-highlight-color: transparent;
}

/* H3: Nút "ĐÃ ĐẶT" — badge xác nhận xanh lá */
.btn-da-dat {
    background: rgba(34,197,94,0.15);
    border: 1.5px solid rgba(34,197,94,0.55);
    color: #4ade80;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: default;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(34,197,94,0.1);
    transition: none;
}

/* H4a: Khung trình độ — tự co theo nội dung */
.kh-trinh-do-row { min-height: 0; height: auto; }

/* H8: Bottom Sheet login (mobile only) */
@media (max-width: 767px) {
    #login-sheet {
        position: fixed !important;  /* !important để ghi đè mọi thứ từ parent */
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        z-index: 999 !important;
        background: #132033 !important;   /* sáng hơn 0f1e35 một chút để form không bị tối */
        border-radius: 20px 20px 0 0;
        padding: 16px 20px 36px;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 -4px 32px rgba(0,0,0,0.55);
        border-top: 2px solid #2d6ab0;
        /* Giải phóng khỏi stacking context của .kh-sidebar */
        will-change: transform;
        isolation: auto;
    }
    #login-sheet.sheet-open { transform: translateY(0); }
    #login-overlay { display: none; }
    #login-overlay.sheet-open {
        display: block !important;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.55);
        z-index: 998;
    }
    #close-login-sheet { display: block !important; }
    /* Ẩn auth card trong sidebar khi mobile — dùng bottom sheet thay */
    .kh-sidebar > #login-sheet-placeholder { display: none; }

    /* Đảm bảo form bên trong sheet có thể tương tác được — pointer-events thông suốt */
    #login-sheet * { pointer-events: auto; }
    #login-sheet .kh-auth-card {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    /* Input và button trong sheet hiển thị rõ ràng */
    #login-sheet .kh-input {
        background: rgba(20,50,90,0.95) !important;   /* nền xanh đậm, không trong suốt */
        color: #f1f5f9 !important;
        border: 1.5px solid rgba(96,165,250,0.5) !important;
        -webkit-text-fill-color: #f1f5f9 !important;  /* iOS override autofill text */
        caret-color: #f1f5f9;
    }
    /* Chống iOS autofill đổi màu nền thành trắng */
    #login-sheet .kh-input:-webkit-autofill,
    #login-sheet .kh-input:-webkit-autofill:hover,
    #login-sheet .kh-input:-webkit-autofill:focus {
        -webkit-text-fill-color: #f1f5f9 !important;
        -webkit-box-shadow: 0 0 0px 1000px #0f2d52 inset !important;
        background-color: #0f2d52 !important;
        caret-color: #f1f5f9;
    }
    #login-sheet .kh-btn-primary,
    #login-sheet #btnXacNhan,
    #login-sheet #btnHoanTatDangKy {
        position: relative;
        z-index: 1000;
        pointer-events: auto !important;
        touch-action: manipulation;
    }
}
@media (min-width: 768px) {
    #login-sheet {
        position: static;
        transform: none;
        background: transparent;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
        border-top: none;
        max-height: none;
        overflow-y: visible;
    }
    #login-overlay { display: none !important; }
    #close-login-sheet { display: none !important; }
}

/* FIX-3 (DEFINITIVE): Trên mobile, biến #lichSuDauSection thành
   một scrollable panel cố định nằm NGAY DƯỚI tab bar.
   Vì vậy content KHÔNG BAO GIỜ scroll lên sau tab bar (z-index: 100).
   Panel bắt đầu tại top = nav(60px) + tab-bar(~42px) = 102px.
   ── Desktop (>= 768px): position:static, không áp dụng. ── */
@media (max-width: 767px) {
    #lichSuDauSection {
        padding-top: 0 !important;
        position: fixed !important;
        top: 102px;   /* nav-height(60) + tab-bar-height(~42) */
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #0f1e35; /* = var(--bg-main) */
        z-index: 50;          /* Below tab bar (z:100) but above page content */
        /* Phần đệm trong panel */
    }
    #lichSuDauSection .kh-ls-outer {
        padding: 12px 1rem 4rem; /* Ghi đè padding mặc định cho mobile */
        min-height: 100%;
    }
}

/* ═══════════════════════════════════════════════════════
   LỊCH SỬ ĐẤU — Premium redesign (ls-*)
   ═══════════════════════════════════════════════════════ */

/* Section title */
.ls-section-title {
    font-size: 0.65rem; font-weight: 700;
    color: #475569; letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Stats 4-card grid */
.ls-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
@media (max-width: 540px) { .ls-stats-grid { grid-template-columns: repeat(2, 1fr); } }

.ls-stat-card {
    background: #181818;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 18px 10px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    overflow: visible;
}
.ls-stat-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.88rem;
    margin-bottom: 4px;
    background: rgba(255,255,255,0.06);
    color: #94a3b8;
}
.ls-stat-icon-mint   { background: rgba(0,230,118,0.12); color: #00e676; }
.ls-stat-icon-cyan   { background: rgba(0,229,255,0.12); color: #00e5ff; }
.ls-stat-icon-orange { background: rgba(255,122,0,0.12); color: #FF7A00; }
.ls-stat-icon-green  { background: rgba(105,240,174,0.12); color: #69f0ae; }
.ls-stat-val {
    font-size: 1.3rem; font-weight: 800;
    color: #e2e8f0; line-height: 1; letter-spacing: -0.02em;
}
.ls-stat-val-mint   { color: #00e676; }
.ls-stat-val-cyan   { color: #00e5ff; font-size: 0.95rem; }
.ls-stat-val-orange { color: #FF7A00; }
.ls-stat-val-green  { color: #69f0ae; }
.ls-stat-lbl {
    font-size: 0.62rem; color: #64748b;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
}
.ls-trust-badge {
    font-size: 0.58rem; padding: 2px 7px;
    border-radius: 10px; font-weight: 700; text-transform: uppercase;
}
.ls-trust-ok   { background: rgba(0,230,118,0.12); color: #00e676; border: 1px solid rgba(0,230,118,0.25); }
.ls-trust-warn { background: rgba(255,179,0,0.12);  color: #ffb300; border: 1px solid rgba(255,179,0,0.25); }
.ls-trust-bad  { background: rgba(244,67,54,0.12);  color: #f44336; border: 1px solid rgba(244,67,54,0.25); }

/* Filter bar — 2 cánh: trái=status tabs | phải=time+date */
.ls-filter-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
}
.ls-filter-left  { display: flex; align-items: center; }
.ls-filter-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.ls-quick-time-inline {
    display: flex; gap: 4px; align-items: center; flex-shrink: 0;
}
.ls-seg-ctrl {
    display: flex;
    background: #141414;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 3px; gap: 2px;
    flex-shrink: 0;
}
.ls-seg-btn {
    padding: 6px 11px;
    border: none; border-radius: 8px;
    background: transparent; color: #64748b;
    font-size: 0.73rem; font-weight: 600;
    font-family: inherit; cursor: pointer;
    transition: background 0.18s, color 0.18s;
    white-space: nowrap;
}
.ls-seg-btn.active {
    background: #FF7A00; color: #fff;
    box-shadow: 0 2px 8px rgba(255,122,0,0.35);
}
.ls-seg-btn:not(.active):hover { color: #e2e8f0; background: rgba(255,255,255,0.05); }

.ls-date-range {
    display: flex; align-items: center; gap: 5px;
}
.ls-date-inp-wrap {
    display: flex; align-items: center; gap: 5px;
    background: #141414; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 5px 9px;
    max-width: 148px;
}
.ls-date-inp-wrap i { color: #FF7A00; font-size: 0.72rem; flex-shrink: 0; }
.ls-date-inp {
    background: transparent; border: none;
    color: #e2e8f0; font-size: 0.73rem;
    font-family: inherit; width: 104px; outline: none;
    -webkit-user-select: text; user-select: text;
}
.ls-date-inp::-webkit-calendar-picker-indicator {
    filter: invert(0.4) sepia(1) saturate(4) hue-rotate(3deg); cursor: pointer;
}
.ls-date-sep { color: #475569; font-size: 0.8rem; flex-shrink: 0; }

/* Quick time filter */
.ls-time-filter { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.ls-time-btn {
    padding: 5px 14px; border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04); color: #94a3b8;
    font-size: 0.72rem; font-family: inherit; cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease; font-weight: 600;
}
.ls-time-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: #2a4a6a; color: #cbd5e1;
}
.ls-time-btn.active {
    background: rgba(255,122,0,0.14);
    border-color: rgba(255,122,0,0.4); color: #FF7A00; font-weight: 700;
}
/* kh-ls-filter-btn alias để locLichSuDau vẫn tìm được */
.kh-ls-filter-btn { padding: 5px 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: #94a3b8; font-size: 0.72rem; font-family: inherit; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease; font-weight: 600; }
.kh-ls-filter-btn.active, .kh-ls-filter-btn:hover { background: rgba(255,122,0,0.1); border-color: rgba(255,122,0,0.3); color: #FF7A00; }

/* Cards */
.ls-card {
    background: #161c28;
    border: 1px solid rgba(30,58,95,0.7);   /* viền nét rõ hơn → tách bạch từng ca */
    border-radius: 12px; overflow: hidden;
    margin-bottom: 14px;                     /* khe hở rộng hơn giữa các ca */
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ls-card:hover { border-color: rgba(255,122,0,0.35); }

/* Card ĐANG MỞ — viền accent + glow + đổ bóng → nổi hẳn khỏi 2 ca trên/dưới,
   không còn dính thành một mảng tối. */
.ls-card--open {
    border-color: rgba(0,255,136,0.55);
    box-shadow: 0 0 0 1px rgba(0,255,136,0.22), 0 10px 28px rgba(0,0,0,0.6);
}
.ls-card--open:hover { border-color: rgba(0,255,136,0.7); }

.ls-card-inner {
    display: flex; align-items: stretch;
    cursor: pointer; min-height: 66px;
    -webkit-user-select: none; user-select: none;
    transition: background 0.15s;
}
.ls-card-inner:hover { background: rgba(255,255,255,0.02); }

.ls-stripe { width: 4px; flex-shrink: 0; }

.ls-card-main {
    flex: 1; min-width: 0; padding: 11px 10px;
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
}
.ls-card-header { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ls-card-name {
    font-weight: 800; font-size: 0.86rem; color: #e2e8f0;
    letter-spacing: 0.02em;
    white-space: nowrap;   /* hiện NGUYÊN VĂN 1 dòng, KHÔNG cắt "..." (bỏ max-width/ellipsis) */
}
.ls-card-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.68rem; color: #64748b; }
.ls-card-meta span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ls-card-meta i { color: #475569; font-size: 0.6rem; }

.ls-card-right {
    display: flex; flex-direction: column;
    align-items: flex-end; justify-content: center;
    padding: 11px 12px 11px 8px; gap: 6px; flex-shrink: 0;
}
.ls-price { font-size: 0.86rem; font-weight: 800; color: #00e676; white-space: nowrap; }
.ls-price-wait { font-size: 0.68rem; color: #fbbf24; white-space: nowrap; }

.ls-chevron {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.05); color: #475569;
    font-size: 0.63rem; pointer-events: none;
    transition: transform 0.22s ease, background 0.18s, color 0.18s;
}
.ls-chevron.open { transform: rotate(180deg); background: rgba(255,122,0,0.12); color: #FF7A00; }

/* Status badges */
.ls-badge {
    font-size: 0.6rem; font-weight: 700; padding: 2px 8px;
    border-radius: 20px; white-space: nowrap;
    text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0;
}
.ls-badge-done   { background: rgba(0,230,118,0.12); color: #00e676; border: 1px solid rgba(0,230,118,0.22); }
.ls-badge-wait   { background: rgba(68,138,255,0.12); color: #448aff; border: 1px solid rgba(68,138,255,0.22); }
.ls-badge-review { background: rgba(255,152,0,0.12);  color: #ff9800; border: 1px solid rgba(255,152,0,0.22); }
.ls-badge-cancel { background: rgba(84,110,122,0.12); color: #90a4ae; border: 1px solid rgba(84,110,122,0.22); }
.ls-badge-bung   { background: rgba(244,67,54,0.12);  color: #ef5350; border: 1px solid rgba(244,67,54,0.22); }

/* Misc helpers */
.ls-stat-unit { font-size: 0.6rem; color: #475569; margin-top: 2px; text-align: center; }
.ls-stat-val-sub { font-size: 0.52rem; font-weight: 400; color: #475569; margin-left: 4px; vertical-align: middle; letter-spacing: 0; }
.ls-court-detail {
    font-size: 0.72rem; color: #64748b;
    display: flex; align-items: center; gap: 5px;
}
.ls-maps-link {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.72rem; color: #FF7A00; text-decoration: none;
    padding: 2px 0; transition: color 0.15s; margin-top: 2px;
}
.ls-maps-link:hover { color: #fff; }

.ls-detail-row {
    display: flex; align-items: flex-start; gap: 7px;
    font-size: 0.77rem; color: #94a3b8;
    margin-bottom: 10px; line-height: 1.4;
}
.ls-pin-icon { color: #FF7A00; margin-top: 2px; flex-shrink: 0; }
.ls-no-addr { color: #475569; letter-spacing: 0.04em; font-style: italic; font-size: 0.7rem; }

.ls-amenity-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ls-amenity-tag {
    font-size: 0.67rem; padding: 3px 9px; border-radius: 20px;
    font-weight: 600; display: inline-flex; align-items: center; gap: 4px;
}
.ls-amenity-tag.active { background: rgba(0,229,255,0.1); color: #00e5ff; border: 1px solid rgba(0,229,255,0.18); }
.ls-amenity-tag.dim    { background: rgba(255,255,255,0.03); color: #475569; border: 1px solid rgba(255,255,255,0.06); }

.ls-slot-row {
    display: flex; align-items: center; gap: 7px;
    flex-wrap: wrap; margin-bottom: 12px;
}
.ls-slot-label { font-size: 0.72rem; color: #64748b; }
.ls-slot-code {
    font-size: 0.95rem; font-weight: 700; color: #e2e8f0;
    background: rgba(255,255,255,0.08);
    padding: 3px 10px; border-radius: 6px;
    font-family: monospace; letter-spacing: 0.06em;
}
.ls-copy-btn {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: #94a3b8; border-radius: 5px; padding: 2px 9px;
    font-size: 0.68rem; cursor: pointer; font-family: inherit;
    transition: background 0.15s;
}
.ls-copy-btn:hover { background: rgba(255,255,255,0.1); color: #e2e8f0; }

/* Nút "Copy mã & lời nhắn xác nhận" (khách → host, gửi qua Zalo/FB) */
.ls-btn-xacnhan {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; margin-top: 8px; padding: 7px 10px;
    background: rgba(0,229,255,0.08); border: 1px solid rgba(0,229,255,0.3);
    color: #00e5ff; border-radius: 8px; cursor: pointer;
    font-family: inherit; font-size: 0.76rem; font-weight: 700;
    transition: background 0.15s;
}
.ls-btn-xacnhan:hover { background: rgba(0,229,255,0.16); }
.ls-xacnhan-hint {
    margin-top: 6px; font-size: 0.68rem; line-height: 1.4;
    color: #64748b;
}

/* Action buttons */
.ls-action-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ls-btn-cancel, .ls-btn-contact, .ls-btn-review-trigger, .ls-btn-rebook {
    flex: 1; min-width: 120px; padding: 9px 10px;
    border-radius: 9px; font-weight: 700; font-size: 0.77rem;
    font-family: inherit; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    transition: background 0.15s, opacity 0.15s;
}
.ls-btn-cancel {
    background: rgba(244,67,54,0.15); color: #ef5350;
    border: 1px solid rgba(244,67,54,0.3);
}
.ls-btn-cancel:hover { background: rgba(244,67,54,0.25); }
.ls-btn-contact {
    background: transparent; color: #94a3b8;
    border: 1px solid #1e3a5f;
}
.ls-btn-contact:hover { background: rgba(255,255,255,0.05); color: #e2e8f0; }
.ls-btn-review-trigger {
    background: rgba(255,179,0,0.08); color: #ffb300;
    border: 1px solid rgba(255,179,0,0.3);
}
.ls-btn-review-trigger:hover { background: rgba(255,179,0,0.16); }
.ls-btn-rebook {
    background: rgba(0,229,255,0.08); color: #00e5ff;
    border: 1px solid rgba(0,229,255,0.25);
}
.ls-btn-rebook:hover { background: rgba(0,229,255,0.16); }

/* Inline review form */
.ls-review-box {
    margin-top: 10px; padding: 12px;
    background: rgba(255,179,0,0.04);
    border: 1px solid rgba(255,179,0,0.16); border-radius: 10px;
}
.ls-review-title {
    font-size: 0.77rem; font-weight: 700; color: #ffb300;
    margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.ls-review-ta {
    width: 100%;
    background: rgba(255,255,255,0.04); border: 1px solid #1e3a5f;
    border-radius: 8px; padding: 8px 10px;
    color: #e2e8f0; font-size: 0.78rem;
    font-family: inherit; resize: vertical; min-height: 68px;
    box-sizing: border-box;
    -webkit-user-select: text; user-select: text;
}
.ls-review-ta:focus { outline: none; border-color: rgba(255,179,0,0.4); }
.ls-char-cnt { font-size: 0.68rem; color: #64748b; text-align: right; margin: 3px 0 8px; }
.ls-btn-review {
    background: linear-gradient(135deg,#ffb300,#e65100);
    border: none; color: #0f1e35; font-weight: 700;
    font-family: inherit; font-size: 0.78rem;
    padding: 7px 16px; border-radius: 8px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: opacity 0.2s;
}
.ls-btn-review:hover { opacity: 0.82; }

.ls-reviewed-badge {
    font-size: 0.78rem; color: #00e676;
    display: flex; align-items: center; gap: 6px; margin-top: 8px;
}
.ls-pending-note {
    font-size: 0.72rem; color: #fbbf24;
    display: flex; align-items: center; gap: 6px; margin-top: 8px;
}

/* Stars */
.kh-stars .kh-star { -webkit-user-select: none; user-select: none; transition: color 0.1s; }
.kh-stars .kh-star.filled { color: #ffb300; }
.kh-stars .kh-star:not(.filled) { color: #334155; }

/* Empty + loading */
.ls-loading { text-align: center; padding: 40px 20px; color: #64748b; font-size: 0.88rem; }
.ls-empty { text-align: center; padding: 50px 20px; color: #64748b; }
.ls-empty i { font-size: 2rem; display: block; margin-bottom: 12px; opacity: 0.4; }
.ls-empty p { font-size: 0.88rem; margin: 0; }
/* Backward-compat aliases */
.kh-loading { text-align: center; padding: 40px 20px; color: #64748b; font-size: 0.88rem; }
.kh-empty { text-align: center; padding: 50px 20px; color: #64748b; }
.kh-empty i { font-size: 2rem; display: block; margin-bottom: 12px; opacity: 0.4; }
.kh-empty p { font-size: 0.88rem; margin: 0; }

/* ── Empty-state CHUẨN (design-system) — icon + tiêu đề + lời nhắn + hành động ──
   Dùng chung cho mọi danh sách rỗng: <div class="tvl-empty"><i class="fa-..."></i>
   <h4>Tiêu đề</h4><p>Lời nhắn</p><button class="tvl-empty-act">...</button></div> */
.tvl-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: var(--space-12) var(--space-5);
    color: #64748b;
    gap: var(--space-2);
}
.tvl-empty > i { font-size: 2.4rem; opacity: 0.35; margin-bottom: var(--space-1); }
.tvl-empty h4 { font-size: var(--fs-md); color: #94a3b8; margin: 0; font-weight: 700; }
.tvl-empty p  { font-size: var(--fs-sm); margin: 0; max-width: 360px; line-height: 1.6; }
.tvl-empty .tvl-empty-act {
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-5);
    border-radius: 9999px;
    border: 1px solid hsl(var(--neon-mint) / 0.4);
    background: hsl(var(--neon-mint) / 0.12);
    color: hsl(var(--neon-mint));
    font-weight: 700; font-size: var(--fs-sm); cursor: pointer;
    transition: background-color 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
}
.tvl-empty .tvl-empty-act:hover { background: hsl(var(--neon-mint) / 0.2); transform: translateY(-1px); }

/* ── Gợi ý CUỘN NGANG cho bảng rộng (mobile) — bóng mờ 2 mép báo còn nội dung bên ngoài.
   Dùng background-attachment local/scroll: bóng tự ẩn khi cuộn tới đầu/cuối. Không cần JS,
   chỉ paint (không reflow). Áp cho div bọc bảng có overflow-x:auto. */
.tvl-xscroll {
    background:
        linear-gradient(to right, #0e0e12 30%, rgba(14,14,18,0)) left center,
        linear-gradient(to left,  #0e0e12 30%, rgba(14,14,18,0)) right center,
        radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.5), rgba(0,0,0,0)) left center,
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.5), rgba(0,0,0,0)) right center;
    background-repeat: no-repeat;
    background-size: 34px 100%, 34px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* ═══════════════════════════════════════════════════════
   LỊCH SỬ — Sub-tab nav: compact segmented control
   ═══════════════════════════════════════════════════════ */
#ls-nav-wrap .subtab-nav {
    position: relative !important;
    top: auto; left: auto; right: auto;
    max-width: none;
    margin: 0 0 20px;
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    gap: 0;
    box-shadow: none;
    display: flex;
}
#ls-nav-wrap .subtab-btn {
    padding: 10px 24px 11px;
    font-size: 0.86rem;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    border-radius: 0;
    letter-spacing: 0.01em;
    opacity: 1;
    background: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.18s, border-color 0.18s;
    white-space: nowrap;
}
#ls-nav-wrap .subtab-btn:hover:not(.active) {
    color: rgba(255,255,255,0.7);
    background: transparent;
}
#ls-nav-wrap .subtab-btn.active {
    color: #FF7A00;
    background: transparent;
    box-shadow: none;
    border-bottom: 2px solid #FF7A00;
}
#ls-nav-wrap .subtab-btn:not(.active) {
    border-bottom: 2px solid transparent;
}

/* ═══════════════════════════════════════════════════════
   LỊCH SỬ — Expanded card body: dual-zone layout
   ═══════════════════════════════════════════════════════ */
.ls-card-body {
    padding: 16px 18px 16px;
    border-top: 1px solid rgba(0,255,136,0.22);   /* đường ranh accent rõ giữa header ↔ nội dung */
    background: #1a2438;                            /* panel SÁNG hơn header → tương phản rõ vùng xổ ra */
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* Dual-zone grid — 1fr | 320px cố định */
.ls-body-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
}
.ls-zone-left {
    display: flex; flex-direction: column; gap: 9px;
    align-items: flex-start;
}
.ls-zone-right {
    display: flex; flex-direction: column; gap: 13px;
    align-items: stretch;
    border-left: 1px solid rgba(255,255,255,0.07);
    padding-left: 20px;
}
/* Slot card — nổi bật như vé xác nhận */
.ls-slot-card {
    width: 100%;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 10px;
    padding: 10px 13px;
}
.ls-slot-card-label {
    font-size: 0.58rem; font-weight: 700;
    color: #475569; letter-spacing: 0.12em;
    text-transform: uppercase; margin-bottom: 7px;
}
.ls-slot-card .ls-slot-row {
    background: none; border: none; padding: 0;
    border-radius: 0; width: 100%;
    justify-content: space-between;
}
/* Price + actions căn phải */
.ls-zone-right .ls-price-zone { justify-content: flex-end; }
.ls-zone-right .ls-action-row { justify-content: flex-end; margin-top: 8px; }
/* Buttons — không tự giãn, kích thước hợp lý */
.ls-zone-right .ls-btn-cancel,
.ls-zone-right .ls-btn-contact,
.ls-zone-right .ls-btn-rebook,
.ls-zone-right .ls-btn-review-trigger {
    flex: 0 0 auto !important;
    min-width: 128px !important;
    max-width: 200px !important;
}
/* Body info text */
.ls-body-court-name {
    font-weight: 800; font-size: 0.92rem; color: #e2e8f0;
    letter-spacing: 0.03em; line-height: 1.3; margin: 3px 0 2px;
}
.ls-body-meta {
    display: flex; gap: 8px; flex-wrap: wrap;
    font-size: 0.71rem; color: #64748b;
}
.ls-body-meta span { display: inline-flex; align-items: center; gap: 4px; }
.ls-body-meta i    { color: #475569; font-size: 0.62rem; }
.ls-price-zone {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ls-price-zone .ls-price { font-size: 1.05rem; font-weight: 900; }

/* Neon button effects */
.ls-btn-cancel {
    background: rgba(255,0,85,0.08) !important;
    color: #ff3366 !important;
    border: 1px solid #FF0055 !important;
    box-shadow: 0 0 6px rgba(255,0,85,0.1);
    transition: background 0.15s, box-shadow 0.15s, color 0.15s !important;
}
.ls-btn-cancel:hover {
    background: rgba(255,0,85,0.22) !important;
    box-shadow: 0 0 16px rgba(255,0,85,0.32) !important;
    color: #fff !important;
}
.ls-btn-contact {
    background: rgba(255,122,0,0.08) !important;
    color: #FF7A00 !important;
    border: 1px solid #FF7A00 !important;
    box-shadow: 0 0 6px rgba(255,122,0,0.1);
    transition: background 0.15s, box-shadow 0.15s, color 0.15s !important;
}
.ls-btn-contact:hover {
    background: rgba(255,122,0,0.2) !important;
    box-shadow: 0 0 14px rgba(255,122,0,0.3) !important;
    color: #fff !important;
}

/* Review section below dual-zone */
.ls-card-body > .ls-review-box,
.ls-card-body > .ls-reviewed-badge,
.ls-card-body > .ls-pending-note { margin-top: 12px; }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — Mobile (< 768px) cho trang Lịch Sử
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Stats 2×2 */
    .ls-stats-grid { grid-template-columns: repeat(2, 1fr); }

    /* Sub-tab nav full width on mobile */
    #ls-nav-wrap .subtab-nav { max-width: 100%; }
    #ls-nav-wrap .subtab-btn { padding: 10px 12px; font-size: 0.82rem; }

    /* Filter bar → xếp dọc trên mobile */
    .ls-filter-bar { flex-direction: column; align-items: stretch; gap: 8px; }
    .ls-filter-left  { width: 100%; }
    .ls-filter-right { width: 100%; justify-content: flex-start; gap: 6px; }
    .ls-seg-ctrl { width: 100%; }
    .ls-seg-btn { flex: 1; }
    .ls-quick-time-inline { justify-content: flex-start; }
    .ls-date-range { justify-content: stretch; }
    .ls-date-inp-wrap { flex: 1; max-width: none; }
    .ls-date-inp { width: 100%; }

    /* Time filter compact */
    .ls-time-filter { gap: 5px; }
    .ls-time-btn { padding: 4px 10px; font-size: 0.7rem; }

    /* Card sizing */
    .ls-card-name { font-size: 0.82rem; }   /* bỏ max-width → tên sân hiện đủ 1 dòng */
    .ls-card-meta { font-size: 0.65rem; gap: 7px; }
    .ls-card-body { padding: 12px 12px 10px; }

    /* Dual-zone → single column on mobile */
    .ls-body-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .ls-zone-right {
        border-left: none; padding-left: 0;
        border-top: 1px solid rgba(255,255,255,0.06);
        padding-top: 12px;
    }
    .ls-zone-right .ls-action-row { justify-content: flex-start; margin-top: 6px; }
    .ls-zone-right .ls-price-zone { justify-content: flex-start; }
    .ls-slot-card { padding: 8px 10px; }

    /* Action buttons stack */
    .ls-action-row { flex-direction: column; }

    /* Stats card compact */
    .ls-stat-card { padding: 14px 8px 12px; }
    .ls-stat-val { font-size: 1.1rem; }
    .ls-stat-val-cyan { font-size: 0.82rem; }
}

/* ═══════════════════════════════════════════════════════
   HOST TABLE — Hành động
   ═══════════════════════════════════════════════════════ */
.hs-actions-cell {
    display: flex; flex-direction: column;
    gap: 5px; min-width: 90px;
}

/* J4: Tab toggle mobile (3 tabs: Tìm Kèo / Cá Nhân / Lịch Sử) */
.kh-mobile-tab { display: none; }
@media (max-width: 767px) {
    .kh-mobile-tab {
        display: flex;
        gap: 0;
        background: rgba(26,40,68,0.97);
        border-bottom: 1px solid #1e3a5f;
        position: sticky;
        top: 60px;
        z-index: 180; /* Cao hơn mọi content (header=200, login-overlay=998) */
    }
    /* Đảm bảo layout content không tạo stacking context vượt qua tab bar */
    .kh-layout  { isolation: isolate; z-index: 0 !important; }
    .kh-right   { position: relative; z-index: 0; }
    .kh-filter-bar, .filter-section { z-index: 5 !important; }
    .kh-tab-btn {
        flex: 1;
        padding: 10px 4px;
        background: transparent;
        border: none;
        color: #94a3b8;
        font-size: 0.78rem;  /* Nhỏ hơn để 3 tab vừa màn hình hẹp */
        font-weight: 600;
        cursor: pointer;
        font-family: inherit;
        border-bottom: 2px solid transparent;
        transition: color 0.2s, border-color 0.2s, background 0.2s;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .kh-tab-active {
        color: #00ff88;
        border-bottom-color: #00ff88;
        background: rgba(0,255,136,0.06);
    }
}

/* =========================================================================
   REFACTOR THEME 2026 — Nâng cấp toàn diện UI/UX
   Áp dụng cho: index.html, khach.html, host.html, admin.html
   ========================================================================= */

/* ── 1A: CSS Variables bổ sung ── */
:root {
    --card-bg-dark:   #161b22;
    --card-border:    rgba(255,255,255,0.07);
    --shadow-card:    0 8px 32px rgba(0,0,0,0.35);
    --shadow-glow:    0 0 24px rgba(0,255,136,0.12);
    --section-py:     clamp(48px, 8vw, 96px);
    --card-px:        clamp(20px, 4vw, 32px);

    /* ── Thang SPACING dùng chung (nền 4px / 8pt) — căn lề & khoảng thở nhất quán ── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ── Thang FONT-SIZE theo cấp — phân cấp thị giác (phụ chú → nội dung → tiêu đề) ── */
    --fs-xs:   0.72rem;   /* phụ chú, nhãn nhỏ */
    --fs-sm:   0.82rem;   /* meta, caption */
    --fs-base: 0.92rem;   /* nội dung thân */
    --fs-md:   1.05rem;   /* nội dung nổi */
    --fs-lg:   1.25rem;   /* tiêu đề phụ */
    --fs-xl:   1.6rem;    /* tiêu đề mục */
    --fs-2xl:  2.1rem;    /* tiêu đề lớn */

    /* ── Thang SHADOW theo cấp (bổ sung cho --shadow-card/--shadow-glow) ── */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
    --shadow-md: 0 6px 20px rgba(0,0,0,0.32);
    --shadow-lg: 0 16px 48px rgba(0,0,0,0.45);
}

/* ── 1B: Scroll Reveal System ── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ── 1B2: Skeleton placeholder — giữ chỗ vùng động, chống layout shift khi tải ── */
@keyframes tvlSkelShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.tvl-skel {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04) 25%,
        rgba(255,255,255,0.09) 37%,
        rgba(255,255,255,0.04) 63%);
    background-size: 200% 100%;
    animation: tvlSkelShimmer 1.4s ease-in-out infinite;
    border-radius: 10px;
}
/* Thẻ kèo skeleton — khớp .keo-card để không nhảy khi data về */
.tvl-skel-card {
    height: 236px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.06);
}
/* Dòng skeleton (lịch sử) + khối skeleton (doanh thu) */
.tvl-skel-row   { height: 72px; margin-bottom: 12px; }
.tvl-skel-block { height: 96px; }
@media (prefers-reduced-motion: reduce) { .tvl-skel { animation: none; } }

/* ── 1C: Chuẩn hóa card border & shadow toàn trang ── */
.slot-card,
.kh-auth-card,
.kh-stat-badge,
.acc-card,
.hs-card,
.ad-metric-card,
.why-card,
.gateway-card {
    border-color: var(--card-border) !important;
    box-shadow: var(--shadow-card);
}
.slot-card:hover,
.hs-card:hover,
.why-card:hover,
.ad-metric-card:hover {
    border-color: rgba(255,255,255,0.13) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
    transform: translateY(-2px);
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease, opacity 0.22s ease;
}

/* ── 1D: User-select — cho phép copy text thông tin quan trọng ── */
.slot-card-body,
.kh-modal-info-val,
.kh-profile-phone,
.kh-profile-date,
.ad-table td:not(.ad-actions) {
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* ── 1E: Spacing nâng cấp — khoảng thở rộng rãi ── */
.why-choose-section  { padding: var(--section-py) 0; }
.sport-branches-section { padding: var(--section-py) 0; }
.gateway-button-grid { gap: clamp(16px, 3vw, 28px); padding-top: var(--section-py); padding-bottom: var(--section-py); }

/* ══════════════════════════════════════════════════════════════
   INDEX.HTML — Landing Page Nâng Cấp
   ══════════════════════════════════════════════════════════════ */
.title-brand {
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}
.gateway-desc {
    font-size: clamp(0.9rem, 2.5vw, 1.05rem) !important;
    line-height: 1.8 !important;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}
.btn-cta-hero {
    padding: 18px 52px !important;
    font-size: 1.05rem !important;
    border-radius: 14px !important;
    letter-spacing: 0.03em;
}
/* HUD Metrics nâng cấp */
.hud-metrics {
    padding: 20px 32px !important;
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(8px);
}
.metric-value {
    font-size: clamp(1.6rem, 4vw, 2.2rem) !important;
    font-weight: 800 !important;
}
.metric-label {
    font-size: 0.68rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
}
/* Gateway cards padding */
.gateway-card { padding: clamp(24px, 4vw, 40px) !important; }
.card-main-content { gap: 16px !important; }
/* Why choose cards */
.why-card { padding: 32px 28px !important; }

/* ══════════════════════════════════════════════════════════════
   KHACH.HTML — Sàn Kèo Nâng Cấp
   ══════════════════════════════════════════════════════════════ */
/* Card kèo: height đồng đều + breathing room */
#slotsSearchResultContainer { align-items: stretch !important; }
.kh-card-list { align-items: stretch; }
.slot-card {
    padding: 20px !important;
    border-radius: 16px !important;
    gap: 12px;
}
.slot-card-body { padding-bottom: 8px; }

/* Filter bar rộng rãi hơn */
.kh-filter-bar {
    padding: 20px 20px 16px !important;
    border-radius: 16px !important;
}
.kh-filter-grid { gap: 12px !important; }

/* Sidebar auth card */
.kh-auth-card {
    padding: 24px 20px !important;
    border-radius: 16px !important;
}

/* Trình độ Nam/Nữ: tách dòng trên mobile */
@media (max-width: 600px) {
    .kh-trinh-do-row {
        flex-direction: column !important;
        gap: 4px !important;
        align-items: flex-start !important;
    }
    .kh-trinh-do-line {
        display: flex !important;
        align-items: center;
        gap: 6px;
    }
}

/* White-space fix — bỏ nowrap ở nội dung card */
.slot-card-body * { white-space: normal; }
.kh-filter-bar label { white-space: normal; }
/* Giữ nowrap chỉ ở button và badge nhỏ */
.kh-tab-btn,
.btn-da-dat,
.btn-dat-slot,
.btn-dat-slot-disabled { white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════
   HOST.HTML — Trạm Chủ Sân Nâng Cấp
   ══════════════════════════════════════════════════════════════ */
.hs-card {
    padding: clamp(20px, 3vw, 32px) !important;
    border-radius: 16px !important;
    margin-bottom: 20px;
}
.hs-section-title {
    font-size: 0.7rem !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 20px !important;
}
/* Tab buttons nâng cấp */
.hs-tab-btn {
    padding: 10px 20px !important;
    border-radius: 10px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
}
.hs-tab-btn.active {
    background: rgba(0,255,136,0.15) !important;
    border-color: rgba(0,255,136,0.4) !important;
}
/* Bảng cầu readability */
.sc-row-grid .form-label {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
}
.sc-row-grid .form-control { font-size: 0.85rem !important; }

/* ══════════════════════════════════════════════════════════════
   ADMIN.HTML — Dashboard Quản Trị Nâng Cấp
   ══════════════════════════════════════════════════════════════ */
/* Bảng dữ liệu */
.ad-table thead th {
    background: rgba(0,255,136,0.05) !important;
    color: #00d97a !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}
.ad-table tbody tr:hover { background: rgba(255,255,255,0.04) !important; }
.ad-table td { padding: 12px 14px !important; }

/* Tab navigation: segmented pill */
.ad-tab-nav {
    background: rgba(255,255,255,0.03) !important;
    border-radius: 12px !important;
    padding: 4px !important;
    gap: 2px !important;
    border: 1px solid var(--card-border) !important;
}
.ad-tab-btn {
    border-radius: 9px !important;
    padding: 8px 18px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}
.ad-tab-btn.active {
    background: rgba(0,255,136,0.15) !important;
    color: #00ff88 !important;
    border: 1px solid rgba(0,255,136,0.3) !important;
}

/* Metric cards */
.ad-metric-card {
    padding: 24px 20px !important;
    border-radius: 16px !important;
}

/* Action dropdown: sang trọng hơn */
.ad-action-dropdown {
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
    padding: 6px !important;
}
.ad-action-dropdown button {
    border-radius: 8px !important;
    padding: 9px 14px !important;
    font-size: 0.82rem !important;
}
.ad-action-dropdown button:hover {
    background: rgba(255,255,255,0.08) !important;
}

/* ── Custom Confirm Modal (thay confirm() browser) ── */
#confirmModalOverlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
}
#confirmModalOverlay.show {
    opacity: 1; pointer-events: all;
}
#confirmModalBox {
    background: #1a2844;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    padding: 32px 28px;
    max-width: 420px; width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    text-align: center;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
#confirmModalOverlay.show #confirmModalBox {
    transform: scale(1) translateY(0);
}
#confirmModalIcon {
    font-size: 2.4rem;
    margin-bottom: 14px;
    display: block;
}
#confirmModalMsg {
    color: #e2e8f0;
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 24px;
}
.confirm-modal-btns {
    display: flex; gap: 10px; justify-content: center;
}
#confirmModalOk {
    padding: 10px 28px; border-radius: 10px; border: none;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff; font-size: 0.88rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: opacity 0.18s;
}
#confirmModalOk:hover { opacity: 0.85; }
#confirmModalCancel {
    padding: 10px 28px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.15);
    background: transparent;
    color: #94a3b8; font-size: 0.88rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: background 0.18s;
}
#confirmModalCancel:hover { background: rgba(255,255,255,0.06); }

/* ══════════════════════════════════════════════════
   SECURITY SYSTEM — Trust Score, Scam Banner, Phone Mask
   ══════════════════════════════════════════════════ */

/* ── Trust Score badge (hồ sơ khách) ── */
.trust-bar-wrap { margin:12px 0 4px; }
.trust-bar-track { background:rgba(255,255,255,0.07);border-radius:99px;height:10px;overflow:hidden; }
.trust-bar-fill  { height:100%;border-radius:99px;transition:width 0.4s ease; }
.trust-bar-fill.trust-ok      { background:linear-gradient(90deg,#16a34a,#00ff88); }
.trust-bar-fill.trust-warn    { background:linear-gradient(90deg,#d97706,#fbbf24); }
.trust-bar-fill.trust-risk    { background:linear-gradient(90deg,#dc2626,#f97316); }
.trust-bar-fill.trust-dead    { background:#6b0000; }
.trust-label { font-size:0.72rem;font-weight:700;letter-spacing:0.05em;margin-top:5px; }
.trust-label.trust-ok   { color:#00ff88; }
.trust-label.trust-warn { color:#fbbf24; }
.trust-label.trust-risk { color:#f97316; }
.trust-label.trust-dead { color:#ef4444; }

/* ── Scam warning banner (card + modal) ── */
.scam-banner {
    background:rgba(239,68,68,0.15);
    border:1.5px solid rgba(239,68,68,0.7);
    border-radius:10px;
    padding:10px 14px;
    font-size:0.78rem;
    font-weight:700;
    color:#fca5a5;
    line-height:1.45;
    margin-bottom:10px;
    display:flex;
    align-items:flex-start;
    gap:8px;
}
.scam-banner i { color:#ef4444;font-size:1rem;flex-shrink:0;margin-top:1px; }

/* ── Banner "Yêu cầu cọc trước" (ca.yeu_cau_coc) — thông báo, KHÔNG chặn đặt ── */
.coc-banner {
    background:rgba(245,158,11,0.12);
    border:1.5px solid rgba(245,158,11,0.55);
    border-radius:10px;
    padding:10px 14px;
    font-size:0.78rem;
    font-weight:700;
    color:#fbbf24;
    line-height:1.45;
    margin-bottom:10px;
    display:flex;
    align-items:flex-start;
    gap:8px;
}
.coc-banner i { color:#f59e0b;font-size:1rem;flex-shrink:0;margin-top:1px; }

/* Nhắc cọc nhỏ trong Lịch Sử khách (ls-card body) */
.ls-coc-reminder {
    display:flex; align-items:flex-start; gap:7px;
    background:rgba(245,158,11,0.10);
    border:1px solid rgba(245,158,11,0.30);
    border-radius:9px; padding:8px 11px; margin-top:8px;
    font-size:0.76rem; font-weight:600; color:#fbbf24; line-height:1.4;
}
.ls-coc-reminder i { color:#f59e0b; margin-top:1px; flex-shrink:0; }

/* ── Phone mask chip ── */
.shb-reveal-btn {
    background:none;border:none;cursor:pointer;
    color:#64748b;font-size:0.78rem;padding:0 4px;
    transition:color 0.15s;
    vertical-align:middle;
}
.shb-reveal-btn:hover { color:#00e5ff; }
.shb-sdt-masked { letter-spacing:0.04em; }

/* ── Pending approval badge ── */
.badge-pending-host {
    display:inline-block;
    background:rgba(251,191,36,0.15);
    border:1px solid rgba(251,191,36,0.5);
    color:#fbbf24;
    border-radius:6px;
    font-size:0.68rem;
    font-weight:700;
    padding:2px 7px;
    letter-spacing:0.04em;
    white-space:nowrap;
}

/* ── Tên sân link — card (kh-san-link) ── */
.kh-san-link {
    display: flex; align-items: baseline; gap: 5px;
    flex-wrap: nowrap;      /* giữ tên sân + khu vực trên 1 hàng */
    overflow: hidden;       /* cắt nếu quá dài — tránh tràn card */
    width: 100%;
    color: #00e5ff;
    text-shadow: 0 0 4px rgba(0,229,255,0.55);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s, text-shadow 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.kh-san-link:hover { color: #FF5500; text-shadow: 0 0 6px rgba(255,85,0,0.6); text-decoration: underline; }
.kh-san-link:active { color: #FF5500; transform: scale(0.98); }
@media (hover: none) {
    .kh-san-link { text-decoration: underline dotted rgba(0,229,255,0.4); text-underline-offset: 3px; }
}
/* Span tên sân bên trong link: co giãn, nhường chỗ cho khu vực, ellipsis nếu quá dài */
.kh-san-link > span:first-of-type {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex-shrink: 1;
    /* Font-render cao cấp cho tiếng Việt IN HOA trên Dark Mode */
    font-family: 'Inter', 'Be Vietnam Pro', 'Roboto', sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    padding-top: 2px;
    padding-bottom: 2px;
    letter-spacing: 0.03em !important;
    color: #22d3ee !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}
/* Span ↗ và — khu vực không co */
.kh-san-link > span:not(:first-of-type) {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Tên sân link — modal TÊN SÂN row (kmd-ten-san-link) ── */
.kmd-ten-san-link { -webkit-tap-highlight-color: transparent; transition: color 0.15s, transform 0.1s; }
.kmd-ten-san-link:hover { color: #FF5500 !important; text-decoration: underline !important; }
.kmd-ten-san-link:active { color: #FF5500 !important; transform: scale(0.98); }
@media (hover: none) {
    .kmd-ten-san-link { text-decoration: underline dotted rgba(0,229,255,0.4) !important; text-underline-offset: 3px !important; }
}

/* ── Tên sân link — modal title (kmd-title-link) ── */
.kmd-title-link {
    display: inline-flex; align-items: center; gap: 4px;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s, transform 0.1s;
}
.kmd-title-link:hover { color: #FF5500 !important; text-decoration: underline !important; }
.kmd-title-link:active { color: #FF5500 !important; transform: scale(0.98); }
@media (hover: none) {
    .kmd-title-link { text-decoration: underline dotted rgba(255,255,255,0.3) !important; text-underline-offset: 3px !important; }
}

/* ════════════════════════════════════════════════════════
   🔔 HỆ THỐNG THÔNG BÁO v1 — chuông + badge + drawer phải
   (palette cyberpunk hex — tự chứa, không phụ thuộc token)
   ════════════════════════════════════════════════════════ */
.tb-chuong {
    position: relative;
    display: inline-flex;         /* LUÔN hiện sẵn (static) → F5 không trễ/không shift */
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: rgba(0, 255, 136, 0.12);
    border: 1.5px solid rgba(0, 255, 136, 0.45);
    border-radius: 10px;
    color: #00ff88;               /* accent — nổi bật, không bị chìm trên nền tối */
    font-size: 1.1rem; cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.12);
    transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s, transform 0.1s;
    flex-shrink: 0;
}
.tb-chuong:hover {
    background: rgba(0, 255, 136, 0.22);
    border-color: rgba(0, 255, 136, 0.75);
    color: #00ff88;
    box-shadow: 0 0 16px rgba(0, 255, 136, 0.3);
}
.tb-chuong:active { transform: scale(0.94); }
/* Light mode: accent xanh đậm hơn để đủ tương phản trên nền sáng */
[data-theme="light"] .tb-chuong {
    background: rgba(0, 150, 90, 0.12);
    border-color: rgba(0, 150, 90, 0.5);
    color: #00965a;
    box-shadow: none;
}
[data-theme="light"] .tb-chuong:hover { background: rgba(0, 150, 90, 0.2); border-color: rgba(0, 150, 90, 0.8); color: #00794a; }

.tb-badge {
    position: absolute; top: -5px; right: -5px;
    min-width: 17px; height: 17px; padding: 0 4px;
    display: none; align-items: center; justify-content: center;
    background: #ef4444; color: #fff;
    font-size: 0.66rem; font-weight: 800; line-height: 1;
    border-radius: 9px; border: 2px solid #0d1525;
    box-sizing: border-box;
}

/* Overlay nền mờ */
.tb-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    z-index: 1390; opacity: 0; visibility: hidden;
    transition: opacity 0.22s, visibility 0.22s;
}
.tb-overlay.tb-open { opacity: 1; visibility: visible; }

/* Drawer trượt từ phải */
.tb-drawer {
    position: fixed; top: 0; right: -380px;
    width: 360px; max-width: 90vw; height: 100dvh;
    background: #0d1525;
    border-left: 1px solid #1e3a5f;
    box-shadow: -10px 0 38px rgba(0, 0, 0, 0.55);
    z-index: 1400;
    display: flex; flex-direction: column;
    transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.tb-drawer.tb-open { right: 0; }

.tb-drawer-head {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 16px 16px 13px;
    border-bottom: 1px solid #1e3a5f;
}
.tb-drawer-title {
    font-size: 1rem; font-weight: 800; color: #e2e8f0;
    display: inline-flex; align-items: center; gap: 8px;
}
.tb-drawer-title i { color: #00ff88; }
.tb-drawer-actions { display: flex; align-items: center; gap: 6px; }
.tb-mark-all {
    background: rgba(0, 255, 136, 0.08); border: 1px solid rgba(0, 255, 136, 0.25);
    color: #34d399; font-size: 0.72rem; font-weight: 700;
    padding: 5px 9px; border-radius: 7px; cursor: pointer; white-space: nowrap;
    transition: background 0.16s, border-color 0.16s;
}
.tb-mark-all:hover { background: rgba(0, 255, 136, 0.16); border-color: rgba(0, 255, 136, 0.45); }
.tb-close {
    background: transparent; border: none; color: #64748b;
    width: 30px; height: 30px; border-radius: 7px; cursor: pointer; font-size: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.16s, color 0.16s;
}
.tb-close:hover { background: rgba(239, 68, 68, 0.14); color: #ef4444; }

.tb-drawer-body {
    flex: 1; overflow-y: auto; padding: 0;
    -webkit-overflow-scrolling: touch;
}

/* 1 dòng thông báo — kiểu danh sách, KHÔNG icon/emoji.
   Mức độ = left-border accent (màu set inline theo loại) + chấm màu 8px.
   Chưa đọc: nền nhạt hơn + opacity 1 + chấm xanh góc trái. Đã đọc: opacity 0.72. */
.tb-item {
    width: 100%; text-align: left;
    display: flex; align-items: flex-start; gap: 11px;
    padding: 15px 16px 15px 15px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(30, 58, 95, 0.55);    /* divider giữa các thông báo */
    border-left: 3px solid transparent;                 /* màu set inline theo MỨC ĐỘ */
    border-radius: 0;
    cursor: pointer; font-family: inherit;
    opacity: 0.72;                                       /* đã đọc → mờ hơn */
    transition: background 0.16s, opacity 0.16s;
    position: relative;
}
.tb-item:last-child { border-bottom: none; }
.tb-item:hover { background: rgba(255, 255, 255, 0.04); opacity: 1; }
.tb-item.tb-unread { background: rgba(0, 255, 136, 0.05); opacity: 1; }
.tb-item.tb-unread:hover { background: rgba(0, 255, 136, 0.09); }
/* Chấm màu theo mức độ — thay icon/emoji, canh ngang dòng tiêu đề */
.tb-cat-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; }
.tb-item-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.tb-item-title {
    font-size: 0.84rem; font-weight: 700; color: #e2e8f0; line-height: 1.35;
}
.tb-item-desc {
    font-size: 0.78rem; color: #94a3b8; line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.tb-item-time { font-size: 0.68rem; color: #64748b; margin-top: 1px; }
/* ═══════════════════════════════════════════════════
 * XÁC THỰC EMAIL — Badge trạng thái + ô nhập đuôi @gmail.com + banner nhắc
 * ═══════════════════════════════════════════════════ */
.email-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 0.68rem; font-weight: 700; white-space: nowrap;
}
.email-badge--ok    { background: rgba(0, 230, 118, 0.12); color: #00e676; }   /* Đã xác thực — xanh mint */
.email-badge--no    { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }  /* Chưa xác thực — vàng hổ phách */
/* Badge NẰM TRONG ô input (góc phải, absolute) — khi đã xác thực */
.email-badge--inside {
    position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    z-index: 2; pointer-events: none;
}
/* Nút "[Thay đổi]" nhỏ cạnh nhãn — link cam */
.btn-thaydoi {
    border: none; background: none; cursor: pointer; padding: 0; font-family: inherit;
    color: #FF7A00; font-size: 0.72rem; font-weight: 700; text-decoration: underline;
    text-underline-offset: 2px; transition: opacity 0.15s;
}
.btn-thaydoi:hover { opacity: 0.78; }
.btn-thaydoi:disabled { color: var(--text-muted); cursor: not-allowed; text-decoration: none; opacity: 0.7; }
/* Ô nhập có đuôi @gmail.com cố định (addon phải) */
.email-input-wrap { display: flex; align-items: stretch; position: relative; }
.email-input-wrap .app-input {
    flex: 1; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none;
}
.email-suffix {
    display: flex; align-items: center; padding: 0 12px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-spa); border-left: none;
    border-top-right-radius: 10px; border-bottom-right-radius: 10px;
    color: var(--text-muted); font-size: 0.85rem; white-space: nowrap;
}
/* Ô đã xác thực (khóa) → đầy đủ bo góc + mờ nhẹ */
.email-input-wrap.is-locked .app-input {
    border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-right: 1px solid var(--border-spa);
    opacity: 0.8; cursor: not-allowed;
}
/* Nút "Xác thực ngay" — viên thuốc cam phát quang */
.btn-xacthuc-email {
    margin-top: 8px; padding: 8px 18px; border: none; border-radius: 9999px;
    background: linear-gradient(135deg, #FF5500 0%, #FF8C00 100%); color: #fff;
    font-weight: 700; font-size: 0.82rem; cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px;
    box-shadow: 0 4px 15px rgba(255, 115, 0, 0.4); transition: all 0.3s ease;
}
.btn-xacthuc-email:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(255, 115, 0, 0.5); }
.btn-xacthuc-email:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

/* Banner nhắc liên kết email — góc dưới-phải, tông đen/cam mờ */
.email-nhac-banner {
    position: fixed; right: 16px; bottom: 16px; z-index: 99990;
    max-width: 340px; width: calc(100% - 32px);
    background: rgba(17, 17, 24, 0.97); border: 1px solid rgba(255, 122, 0, 0.45);
    border-left: 3px solid #FF7A00; border-radius: 14px; padding: 14px 16px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px);
    animation: emailNhacIn 0.3s ease;
}
@keyframes emailNhacIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.email-nhac-banner p { margin: 0 0 12px; font-size: 0.82rem; line-height: 1.55; color: #e2e8f0; }
.email-nhac-actions { display: flex; gap: 8px; }
.email-nhac-btn {
    flex: 1; padding: 8px; border-radius: 9999px; border: none; cursor: pointer;
    font-family: inherit; font-size: 0.8rem; font-weight: 700; transition: all 0.2s ease;
}
.email-nhac-btn--go { background: linear-gradient(135deg, #FF5500, #FF8C00); color: #fff; box-shadow: 0 3px 12px rgba(255,115,0,0.4); }
.email-nhac-btn--go:hover { transform: translateY(-1px); }
.email-nhac-btn--skip { background: rgba(255, 255, 255, 0.06); color: #94a3b8; }
.email-nhac-btn--skip:hover { background: rgba(255, 255, 255, 0.12); color: #cbd5e1; }
@media (max-width: 480px) { .email-nhac-banner { right: 10px; left: 10px; bottom: 10px; max-width: none; } }

/* ═══════════════════════════════════════════════════
 * AUTH PANEL — 2 Tab Đăng nhập / Đăng ký + Google (no layout shift)
 * ═══════════════════════════════════════════════════ */
.gauth-panel {
    background: var(--bg-card); border: 1px solid var(--border-spa);
    border-radius: var(--radius); padding: 20px 20px 22px;
}
.gauth-panel, .gauth-panel * { box-sizing: border-box; }
/* Tab phẳng (flat) — nền trong suốt, active = chữ CAM + gạch chân 2px cam */
.gauth-tabs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    background: transparent; border: none;
    border-bottom: 1px solid var(--border-spa);
    border-radius: 0; padding: 0; margin-bottom: 18px;
}
.gauth-tab {
    padding: 11px 0; border: none; background: transparent;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    color: #888888; font-size: 0.92rem; font-weight: 700; cursor: pointer;
    font-family: inherit; transition: color 0.2s ease, border-color 0.2s ease;
}
.gauth-tab:hover { color: #bbbbbb; }
.gauth-tab.active { background: transparent; color: #FF7A00; border-bottom-color: #FF7A00; }
/* Vùng nội dung khóa min-height = chiều cao tab cao nhất → đổi tab KHÔNG giật khung */
.gauth-views { min-height: 580px; }
@media (max-width: 480px) { .gauth-views { min-height: 620px; } }
.gauth-label {
    font-size: 0.72rem; font-weight: 600; color: var(--text-sub);
    letter-spacing: 0.04em; display: block; margin-bottom: 5px; margin-top: 2px;
}
.gauth-req { color: #ef4444; }
/* Nút chính Auth — VIÊN THUỐC (capsule) + cam thương hiệu (đồng bộ nút Navbar) + glow */
.btn-auth {
    width: 100%; padding: 13px 24px; border: none; border-radius: 9999px;
    background: linear-gradient(135deg, #FF5500 0%, #FF8C00 100%); color: #ffffff;
    font-weight: 700; font-size: 0.95rem; cursor: pointer; font-family: inherit;
    letter-spacing: 0.03em; transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 115, 0, 0.4);
}
.btn-auth:hover { opacity: 0.96; transform: translateY(-1px); box-shadow: 0 6px 22px rgba(255, 115, 0, 0.5); }
.btn-auth:active { transform: translateY(0); }
.btn-auth:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
/* Gạch ngang mờ "hoặc" */
.gauth-or {
    display: flex; align-items: center; gap: 10px; margin: 16px 0 12px;
    color: var(--text-muted); font-size: 0.74rem;
}
.gauth-or::before, .gauth-or::after {
    content: ""; flex: 1; height: 1px; background: var(--border-spa);
}
/* Nút Google — trắng/xám sang, chữ tối dễ đọc, hover nhẹ */
.btn-google {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px; border: 1px solid #2a3a55; border-radius: 12px;
    background: #f8fafc; color: #1f2937; font-weight: 700; font-size: 0.9rem;
    cursor: pointer; font-family: inherit; transition: background-color 0.18s, transform 0.15s, box-shadow 0.18s;
}
.btn-google:hover { background: #ffffff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
.btn-google:active { transform: translateY(0); }
.btn-google svg { flex-shrink: 0; }
.gauth-gg-hello {
    font-size: 0.95rem; font-weight: 800; color: var(--accent);
    margin-bottom: 6px; display: flex; align-items: center; gap: 8px;
}

/* ═══════════════════════════════════════════════════
 * QUÊN MẬT KHẨU — modal khôi phục qua email (SVG icon, no layout shift)
 * ═══════════════════════════════════════════════════ */
.qmk-overlay {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(5, 10, 20, 0.78);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: 18px;
    animation: qmkFade 0.18s ease;
}
@keyframes qmkFade { from { opacity: 0; } to { opacity: 1; } }
.qmk-overlay, .qmk-overlay * { box-sizing: border-box; }
.qmk-box {
    position: relative; width: 100%; max-width: 380px;
    background: #1a2844; border: 1px solid #1e3a5f; border-radius: 18px;
    padding: 28px 24px 24px; text-align: center;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    animation: qmkPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes qmkPop { from { transform: translateY(14px) scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }
.qmk-x {
    position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
    border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.06);
    color: #94a3b8; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.qmk-x:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.qmk-ic {
    width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 255, 136, 0.1); color: #00ff88;
}
.qmk-title { margin: 0 0 6px; font-size: 1.1rem; font-weight: 800; color: #e2e8f0; }
.qmk-sub { margin: 0 0 18px; font-size: 0.82rem; line-height: 1.55; color: #94a3b8; }
/* Khử layout-shift khi đổi bước: vùng step cao tối thiểu cố định */
.qmk-step { min-height: 188px; text-align: left; }
.qmk-label {
    display: block; font-size: 0.72rem; font-weight: 600; color: var(--text-sub, #93a3b8);
    letter-spacing: 0.03em; margin: 10px 0 6px;
}
.qmk-input {
    width: 100%; padding: 11px 13px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid #1e3a5f;
    color: #fff; font-size: 0.9rem; font-family: inherit; outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.qmk-input:focus { border-color: #00ff88; box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.12); }
.qmk-input::placeholder { color: rgba(255, 255, 255, 0.28); }
.qmk-code { text-align: center; letter-spacing: 8px; font-size: 1.3rem; font-weight: 700; }
.qmk-btn {
    width: 100%; margin-top: 16px; padding: 12px 24px; border: none; border-radius: 9999px;
    background: linear-gradient(135deg, #FF5500 0%, #FF8C00 100%); color: #ffffff;
    font-weight: 700; font-size: 0.92rem; cursor: pointer; font-family: inherit;
    letter-spacing: 0.03em; transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 115, 0, 0.4);
}
.qmk-btn:hover { opacity: 0.96; transform: translateY(-1px); box-shadow: 0 6px 22px rgba(255, 115, 0, 0.5); }
.qmk-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.qmk-link {
    width: 100%; margin-top: 10px; padding: 6px; border: none; background: transparent;
    color: #64748b; font-size: 0.78rem; cursor: pointer; font-family: inherit;
    transition: color 0.15s;
}
.qmk-link:hover { color: #94a3b8; }
.qmk-mail-info {
    font-size: 0.82rem; line-height: 1.5; color: #cbd5e1;
    background: rgba(0, 255, 136, 0.06); border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: 10px; padding: 10px 12px; margin-bottom: 4px;
}
.qmk-mail-info b { color: #00ff88; word-break: break-all; }

/* Badge trạng thái góp ý — SVG phẳng + nền mờ 0.1 (thay emoji thô) */
.tb-status-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px; border-radius: 6px;
    font-size: 12px; font-weight: 500; line-height: 1;
    width: fit-content; align-self: flex-start; margin: 1px 0;
}
.tb-status-badge svg { flex-shrink: 0; }
/* Lời nhắn Admin — block thụt lề riêng, chỉ render khi có nội dung */
.tb-item-reply {
    font-size: 0.76rem; color: #a7f3d0; line-height: 1.45;
    margin-top: 2px; padding: 6px 10px;
    border-left: 2px solid rgba(0, 255, 136, 0.45);
    background: rgba(0, 255, 136, 0.06); border-radius: 0 7px 7px 0;
    white-space: pre-wrap; word-break: break-word;
}
/* Chấm xanh "chưa đọc" — góc trái trên */
.tb-dot {
    position: absolute; top: 8px; left: 7px;
    width: 7px; height: 7px; border-radius: 50%;
    background: #00ff88; box-shadow: 0 0 6px rgba(0, 255, 136, 0.7);
}

.tb-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 48px 20px; color: #64748b; font-size: 0.85rem; text-align: center;
}
.tb-empty-ico { font-size: 2rem; opacity: 0.6; }

@media (max-width: 767px) {
    .tb-chuong { width: 36px; height: 36px; font-size: 0.98rem; }
    .tb-drawer { width: 100vw; max-width: 100vw; right: -100vw; }
}

/* ════════════════════════════════════════════════════════
   ✋ VISUAL CUE — ELEMENT BẤM ĐƯỢC trong DS Khách (host)
   Dropdown trạng thái (.gl-cdd button) + badge Cọc (.gl-coc-badge)
   trông như text/pill tĩnh → thêm gợi ý tương tác:
   hover sáng nhẹ + viền/glow accent · press scale · ripple CSS-only.
   Lưu ý: nền/viền/màu được set INLINE → dùng box-shadow/filter/transform
   (không bị inline ghi đè, không cần !important). KHÔNG nhấp nháy liên tục.
   ════════════════════════════════════════════════════════ */
.gl-cdd > button[data-guest-id],
.gl-coc-badge {
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.16s, transform 0.1s, filter 0.16s;
}
.gl-cdd > button[data-guest-id]:hover,
.gl-coc-badge:hover {
    box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.4), 0 2px 10px rgba(0, 255, 136, 0.14);
    filter: brightness(1.1);
}
.gl-cdd > button[data-guest-id]:active,
.gl-coc-badge:active { transform: scale(0.97); }

/* Ripple nhẹ từ giữa khi click (CSS-only, không thư viện) */
.gl-cdd > button[data-guest-id]::after,
.gl-coc-badge::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at center, rgba(0, 255, 136, 0.32) 0%, transparent 62%);
    opacity: 0; transform: scale(0.4); pointer-events: none;
}
.gl-cdd > button[data-guest-id]:active::after,
.gl-coc-badge:active::after {
    opacity: 1; transform: scale(1);
    transition: transform 0.36s ease-out, opacity 0.42s;
}

/* Hint ✏️ cạnh badge "Chưa cọc" — gợi ý bấm được; ẩn khi đã xác nhận (badge ✓) */
.gl-coc-badge .coc-hint { font-size: 0.82em; opacity: 0.7; margin-left: 1px; line-height: 1; }
.gl-coc-badge:hover .coc-hint { opacity: 1; }

/* Cột Trạng Thái (DS Khách host): dropdown + nút "Từ chối" CÙNG HÀNG, căn giữa dọc.
   Hẹp (mobile) → tự xuống dòng: dropdown trên, nút Từ chối dưới (căn trái đều). */
.gl-tt-wrap {
    display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}
@media (max-width: 600px) {
    .gl-tt-wrap { flex-direction: column; align-items: center; gap: 6px; }
}
/* Căn GIỮA toàn bộ bảng DS Khách: header + mọi ô (gồm cột Trạng Thái khi "Từ chối") */
#modal-guest-list-table th,
#modal-guest-list-table td,
#modal-guest-list-table td.td-cdd { text-align: center; }

/* Nút "Từ chối khách" (Nhóm 3) — DS Khách host, chỉ pha "trước giờ" */
.gl-tu-choi-btn {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    padding: 4px 10px; background: rgba(251, 146, 60, 0.12);
    border: 1px solid rgba(251, 146, 60, 0.4); color: #fb923c;
    border-radius: 7px; cursor: pointer;
    font-size: 0.72rem; font-weight: 700; font-family: inherit; white-space: nowrap;
    transition: background 0.16s, border-color 0.16s, transform 0.1s;
}
.gl-tu-choi-btn:hover { background: rgba(251, 146, 60, 0.22); border-color: rgba(251, 146, 60, 0.7); }
.gl-tu-choi-btn:active { transform: scale(0.96); }

/* Badge "Đặt riêng" — khách host tự thêm (đặt ngoài app) trong DS Khách.
 * display:block + width:fit-content + margin auto → tách DÒNG RIÊNG & căn giữa
 * (tránh nằm chung dòng với tên làm tên lệch trái so với mã bên dưới). */
.gl-datrieng-badge {
    display: block; width: fit-content; margin: 3px auto 0;
    padding: 1px 7px; border-radius: 999px;
    background: rgba(96, 165, 250, 0.14); border: 1px solid rgba(96, 165, 250, 0.4);
    color: #60a5fa; font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.3px; white-space: nowrap;
}

/* ════════════════════════════════════════════════════════
   📜 LỊCH SỬ ĐIỂM UY TÍN (Nhóm 3) — timeline trong Hồ Sơ + popup admin
   ════════════════════════════════════════════════════════ */
.lsut-list { display: flex; flex-direction: column; gap: 0; }
.lsut-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 4px; border-bottom: 1px solid rgba(30, 58, 95, 0.5);
}
.lsut-row:last-child { border-bottom: none; }
.lsut-delta {
    flex-shrink: 0; min-width: 46px; text-align: center;
    font-weight: 800; font-size: 0.82rem; padding: 3px 6px; border-radius: 7px;
}
.lsut-delta.up   { color: #00ff88; background: rgba(0, 255, 136, 0.1); border: 1px solid rgba(0, 255, 136, 0.25); }
.lsut-delta.down { color: #ff6b6b; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.25); }
.lsut-main { flex: 1; min-width: 0; }
.lsut-reason { font-size: 0.83rem; font-weight: 600; color: #e2e8f0; line-height: 1.35; }
.lsut-meta { font-size: 0.72rem; color: #64748b; margin-top: 2px; }
.lsut-meta .lsut-san { color: #22d3ee; }
.lsut-after { flex-shrink: 0; font-size: 0.72rem; color: #94a3b8; align-self: center; white-space: nowrap; }
.lsut-empty { text-align: center; color: #64748b; font-size: 0.85rem; padding: 28px 12px; }

/* ════════════════════════════════════════════════════════
   ⭐ TAB ĐÁNH GIÁ NHẬN ĐƯỢC (PHẦN 3) — card dark theme + link host
   ════════════════════════════════════════════════════════ */
#danhGiaContainer {
    background: var(--bg-card, #1a2844);
    border: 1px solid var(--border, #1e3a5f);
    border-radius: 12px;
    padding: 2px 14px;
}
.kh-review-about {
    padding: 13px 2px;
    border-bottom: 1px solid rgba(30, 58, 95, 0.55);
}
.kh-review-about:last-child { border-bottom: none; }
.kh-review-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: wrap; margin-bottom: 6px;
}
.kh-review-stars { display: inline-flex; gap: 2px; flex-shrink: 0; }
.kh-review-meta { font-size: 0.74rem; color: #94a3b8; text-align: right; min-width: 0; }
.kh-review-meta .kh-review-san { color: #22d3ee; font-weight: 600; }
.kh-review-host { font-size: 0.76rem; color: #94a3b8; margin-bottom: 5px; }
.review-author-link {
    color: #00ff88; font-weight: 700; text-decoration: none; cursor: pointer;
    border-bottom: 1px dashed rgba(0, 255, 136, 0.45);
    transition: color 0.15s, border-color 0.15s;
}
.review-author-link:hover { color: #34d399; border-bottom-color: #34d399; }
.review-author-link i { font-size: 0.66rem; margin-right: 2px; }

/* ── ĐỒNG BỘ TÊN NGƯỜI DÙNG IN HOA TOÀN HỆ THỐNG ──
   Dù nhập hoa hay thường, mọi vị trí hiển thị TÊN đều render IN HOA.
   Phối hợp với uppercase ở tầng dữ liệu (đăng ký + lưu hồ sơ + thêm khách đặt riêng). */
#headerUserName,
#profileDisplayName,
#profileGuestName,
.host-name,
.review-author-link,
.gl-ten-khach,
.tvl-ten-hoa {
    text-transform: uppercase;
}
.kh-review-text { font-size: 0.83rem; color: #e2e8f0; line-height: 1.55; }
.kh-review-empty { color: #64748b; font-style: italic; }
@media (max-width: 460px) {
    .kh-review-top { flex-direction: column; align-items: flex-start; gap: 3px; }
    .kh-review-meta { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .gl-cdd > button[data-guest-id]::after,
    .gl-coc-badge::after { display: none; }
    .gl-cdd > button[data-guest-id]:active,
    .gl-coc-badge:active { transform: none; }
}