/* ===== Toán Hay THCS – giao diện "vũ trụ" hiện đại cho tuổi teen ===== */
:root {
  --bg: #0b1120; --ink: #e2e8f0; --muted: #94a3b8; --card: rgba(17, 25, 45, .82); --line: rgba(148, 163, 184, .18);
  --primary: #22d3ee; --primary-d: #0891b2; --orange: #f97316; --yellow: #facc15; --green: #22c55e; --red: #f43f5e; --blue: #6366f1; --pink: #ec4899;
  --radius: 18px; --shadow: 0 10px 40px rgba(0, 0, 0, .45); --font-h: 'Lexend', 'Be Vietnam Pro', system-ui, sans-serif; --font: 'Be Vietnam Pro', system-ui, sans-serif;
  --glow: 0 0 0 1px rgba(34, 211, 238, .25), 0 10px 30px rgba(8, 145, 178, .25);
  --grid: #1e293b; --shape-fill: #0e2a3a; --shape-stroke: #22d3ee;
}
body { background: var(--bg); color: var(--ink); }
body::before { background:
  radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, .35), transparent 60%),
  radial-gradient(900px 500px at 100% 0%, rgba(34, 211, 238, .25), transparent 60%),
  radial-gradient(800px 600px at 50% 120%, rgba(236, 72, 153, .18), transparent 60%); }
body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 80%, #cbd5e1, transparent),
    radial-gradient(1px 1px at 85% 60%, #fff, transparent), radial-gradient(1px 1px at 10% 70%, #e2e8f0, transparent), radial-gradient(1.5px 1.5px at 60% 50%, #fff, transparent); background-size: 600px 600px; }
.bg-shapes span { color: #38bdf8; opacity: .06; font-family: var(--font-h); }
a { color: #67e8f9; }
h1, h2, h3, h4 { letter-spacing: -.01em; }

/* Nút: viên thuốc gradient phát sáng */
.btn { border-radius: 999px; box-shadow: var(--glow); font-weight: 700; background: linear-gradient(135deg, #22d3ee, #6366f1); color: #04111d; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn-primary { background: linear-gradient(135deg, #f97316, #ec4899); color: #fff; box-shadow: 0 8px 24px rgba(236, 72, 153, .35); }
.btn-white { background: rgba(255, 255, 255, .06); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .35); }
.btn-ghost { background: transparent; color: #67e8f9; box-shadow: none; }
.icon-btn { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }

.site-header { background: rgba(11, 17, 32, .75); border-bottom: 1px solid var(--line); }
.logo b { color: #67e8f9; } .logo small { color: #f9a8d4; }
.main-nav a { color: #cbd5e1; } .main-nav a:hover, .main-nav a.active { background: rgba(34, 211, 238, .12); color: #67e8f9; }
.user-chip { background: rgba(255, 255, 255, .06); } .user-chip small { color: var(--muted); }
.avatar { background: #1e293b; box-shadow: inset 0 0 0 1px var(--line); }
.menu-pop { background: #111827; border: 1px solid var(--line); } .menu-pop a, .menu-pop button { color: var(--ink); } .menu-pop a:hover, .menu-pop button:hover { background: #1f2937; }
.announce { background: linear-gradient(90deg, #6366f1, #22d3ee); color: #04111d; }

.eyebrow { background: rgba(34, 211, 238, .12); color: #67e8f9; box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .35); }
.hl { background: linear-gradient(90deg, #22d3ee, #a78bfa, #f472b6); -webkit-background-clip: text; background-clip: text; }
.lead, .muted, .seo-text { color: var(--muted); }
.hero-stats li { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); } .hero-stats b { color: #67e8f9; } .hero-stats span { color: var(--muted); }
.hero-art::before { background: radial-gradient(circle, rgba(34, 211, 238, .35) 0, rgba(99, 102, 241, .15) 45%, transparent 70%); }
.bubble { background: rgba(15, 23, 42, .85); color: #e2e8f0 !important; box-shadow: var(--glow); font-family: var(--font-h); }

/* Thẻ kính mờ */
.panel, .game-card, .lesson-card, .feature, .tour-card, .lesson-sec, .auth-card, .profile-head, .badge, .empty, .mindmap, .stage, .board td, .formula-card, .anim, .method {
  background: var(--card) !important; color: var(--ink); backdrop-filter: blur(10px); }
.game-card { border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.game-card:hover { box-shadow: 0 0 0 1px var(--c), 0 14px 40px color-mix(in srgb, var(--c) 35%, transparent); }
.gc-icon { background: color-mix(in srgb, var(--c) 22%, #0f172a); } .gc-body small { color: var(--muted); }
.gc-tags i { background: color-mix(in srgb, var(--c) 25%, #0f172a); color: #e2e8f0; }
.grade-card { box-shadow: 0 0 0 1px rgba(255, 255, 255, .15), 0 14px 36px color-mix(in srgb, var(--c) 40%, transparent); background: linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 55%, #0b1120)); }
.feature { border-top: 3px solid var(--c); box-shadow: none; border: 1px solid var(--line); } .feature p { color: var(--muted); }
.chip { background: rgba(255, 255, 255, .06); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.chip.on { background: linear-gradient(135deg, #22d3ee, #6366f1); color: #04111d; box-shadow: var(--glow); }
.sticky-chips, .lesson-tabs { background: transparent; }
.lesson-tabs a { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.tour-row { background: color-mix(in srgb, var(--c) 14%, #0f172a); color: var(--ink); } .tour-row small, .mini-board small { color: var(--muted); }
.mini-board li, .recent li { border-color: var(--line); } .mini-board em, .recent em { color: #67e8f9; }
.rank { background: #1e293b; color: #e2e8f0; } .rank.r1 { background: #facc15; color: #1f2937; } .rank.r2 { background: #cbd5e1; color: #1f2937; } .rank.r3 { background: #fdba74; color: #1f2937; }
.board tr.me td { background: rgba(34, 211, 238, .18) !important; }
.lesson-head { background: linear-gradient(135deg, #0891b2, #6366f1) !important; }
.remember-list li { background: rgba(250, 204, 21, .08); border-left: 3px solid #facc15; }
.formula-card { border: 1px solid rgba(34, 211, 238, .35); } .formula-card h4 { color: #67e8f9; } .formula-card p { color: var(--muted); }
.method { border: 1px dashed rgba(249, 115, 22, .5); } .method h4 { color: #fdba74; }
.anim { border: 1px solid var(--line); } .anim-caption { color: #67e8f9; } .anim-ctrl button { background: rgba(34, 211, 238, .12); color: #67e8f9; }
.anim svg text { fill: #e2e8f0; } .anim-steps li { background: rgba(255, 255, 255, .05); }
.col-calc .line { border-color: #e2e8f0; } .unit-ladder .step { background: #6366f1; }
.cta-box { background: linear-gradient(90deg, rgba(99, 102, 241, .35), rgba(236, 72, 153, .3)); }
.form input, .form select, .form textarea, .game-filter select { background: #0f172a; color: var(--ink); border-color: #334155; }
.alert-error { background: rgba(244, 63, 94, .15); color: #fda4af; } .alert-ok { background: rgba(34, 197, 94, .15); color: #86efac; }
.avatar-pick span { background: #1e293b; } .avatar-pick input:checked + span { background: #0e2a3a; border-color: #22d3ee; }
.ph-stats div, .result-stats div, .hud-item, .start-rules li { background: rgba(255, 255, 255, .05); }
.xpbar { background: #1e293b; } .xpbar span { background: linear-gradient(90deg, #22d3ee, #a78bfa); }
.site-footer { background: #060a14; border-top: 1px solid var(--line); }
.pod-base { color: #1f2937; } .me-rank { background: rgba(34, 211, 238, .12); }
.mm-tools button { background: #1e293b; color: var(--ink); }
.mindmap .mm-node text { fill: #0f172a; }

/* Sân chơi */
.stage { border: 1px solid rgba(34, 211, 238, .35); box-shadow: var(--glow); }
.stage-start { background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--c) 30%, transparent), transparent 60%); }
.gp { background: rgba(255, 255, 255, .05); color: var(--ink); border-color: #334155; } .gp.on { background: var(--c); color: #04111d; }
.hud-item b { color: #67e8f9; } .timer { background: #1e293b; } .progress-dots i { background: #334155; }
.choice { border-radius: 16px; box-shadow: 0 6px 0 rgba(0, 0, 0, .35); }
.choice:nth-child(1) { --cc: #0891b2; } .choice:nth-child(2) { --cc: #7c3aed; } .choice:nth-child(3) { --cc: #db2777; } .choice:nth-child(4) { --cc: #ea580c; }
.answer-box { background: #0f172a; } .keypad button { background: #1e293b; color: var(--ink); border-color: #334155; box-shadow: 0 4px 0 #0f172a; }
.keypad .del { background: #3f1d2b; } .feedback.ok { background: rgba(34, 197, 94, .15); color: #86efac; } .feedback.no { background: rgba(244, 63, 94, .15); color: #fda4af; }
.q-visual svg { background: #f8fafc; border-radius: 14px; padding: 6px; }
.v-compare .side { background: rgba(255, 255, 255, .06); }
.race-track { background: repeating-linear-gradient(90deg, #111827 0 40px, #1f2937 40px 80px); box-shadow: inset 0 0 0 1px #334155; }
.car { transform: translateY(-50%) rotate(45deg); }
.car .name { transform: translateX(-50%) rotate(-45deg); }
.sky { background: radial-gradient(circle at 70% 20%, #312e81, #0b1120 70%); }
.cloud { filter: grayscale(1) brightness(.4); }
.balloon .bb { border-radius: 46% 54% 50% 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .35), transparent 35%), radial-gradient(circle at 70% 70%, rgba(0, 0, 0, .35), transparent 50%), var(--bc); box-shadow: 0 0 22px color-mix(in srgb, var(--bc) 60%, transparent); }
.balloon::after { width: 3px; height: 30px; background: linear-gradient(#f97316, transparent); }
.mcard .f { background: linear-gradient(135deg, #0891b2, #6366f1); box-shadow: 0 5px 0 #1e1b4b; }
.mcard .b { background: #f8fafc; color: #0f172a; }
.review li { background: rgba(255, 255, 255, .05); }
.result .big-score { color: #67e8f9; } .levelup { background: linear-gradient(90deg, rgba(99, 102, 241, .35), rgba(34, 211, 238, .3)); }
.guest-note { background: rgba(250, 204, 21, .12); }