/* HSK PRO - DEEP OCEAN DESIGN SYSTEM */

:root {
    /* Dark Theme - GIỮ NGUYÊN TỪNG MÃ MÀU CỦA BẠN */
    --bg-deep: #020617;
    --text-main: #e2e8f0; /* slate-200 */
    --text-title: #ffffff;
    --nav-bg: rgba(15, 23, 42, 0.6);
    --nav-border: #1e293b; /* slate-800 */
    --glass-bg: rgba(15, 23, 42, 0.6);
    --glass-border: rgba(51, 65, 85, 0.5);
    --glass-hover: rgba(15, 23, 42, 0.8);
    --ocean-blue: #3b82f6;
    --ocean-dark: #1e3a8a;
    --card-number: #334155; /* slate-700 */
}

[data-theme="light"] {
    /* Light Theme - PHIÊN BẢN SÁNG MỚI */
    --bg-deep: #ffffff;
    --text-main: #475569; /* slate-600 */
    --text-title: #0f172a; /* slate-900 */
    --nav-bg: rgba(255, 255, 255, 0.8);
    --nav-border: #e2e8f0;
    --glass-bg: rgba(248, 250, 252, 0.8);
    --glass-border: rgba(226, 232, 240, 1);
    --glass-hover: rgba(255, 255, 255, 1);
    --ocean-blue: #2563eb;
    --ocean-dark: #dbeafe;
    --card-number: #cbd5e1;
}

body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    background-color: var(--bg-deep);
    color: var(--text-main);
    background-image: 
        radial-gradient(circle at 0% 0%, rgba(30, 58, 138, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
    background-attachment: fixed;
    transition: background-color 0.3s ease;
}

.font-chinese { font-family: 'Noto Sans SC', sans-serif; }

.glass-dark {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-dark:hover {
    border-color: var(--ocean-blue);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
    background: var(--glass-hover);
}

.level-btn {
    color: #94a3b8;
    position: relative;
    overflow: hidden;
}

.level-btn.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
}

.icon-glow {
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.5));
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--ocean-blue); }

/* Ghi đè màu text động để hỗ trợ theme switch */
.text-white { color: var(--text-title) !important; }
.text-slate-200 { color: var(--text-main) !important; }
.text-slate-700 { color: var(--card-number) !important; }
nav { background: var(--nav-bg) !important; border-color: var(--nav-border) !important; }