/* ===== Toán Pro THPT – giao diện học thuật cao cấp (navy & vàng) ===== */
:root {
  --bg: #f6f7fb; --ink: #0f172a; --muted: #475569; --card: #ffffff; --line: #e2e8f0;
  --primary: #1e3a8a; --primary-d: #172554; --orange: #c2410c; --yellow: #c9a227; --green: #15803d; --red: #b91c1c; --blue: #1d4ed8; --pink: #9d174d;
  --gold: #c9a227; --radius: 12px; --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
  --font-h: 'Montserrat', 'Inter', system-ui, sans-serif; --font: 'Inter', system-ui, sans-serif;
  --grid: #e8ecf4; --shape-fill: #eef2ff; --shape-stroke: #1e3a8a;
}
body { background: var(--bg); font-size: 16px; }
body::before { background: linear-gradient(180deg, #eef2ff 0, var(--bg) 420px); }
.bg-shapes span { color: #1e3a8a; opacity: .04; font-family: 'Montserrat', serif; font-weight: 700; }
a { color: #1d4ed8; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.02em; }

.btn { border-radius: 10px; box-shadow: none; font-weight: 700; font-size: 16px; background: var(--primary); }
.btn:hover { filter: none; background: var(--primary-d); } .btn:active { transform: translateY(1px); box-shadow: none; }
.btn-primary { background: linear-gradient(135deg, #1e3a8a, #312e81); color: #fff; box-shadow: 0 6px 18px rgba(30, 58, 138, .25); }
.btn-primary:hover { background: #172554; }
.btn-white { background: #fff; color: var(--primary); box-shadow: inset 0 0 0 1.5px #c7d2fe; } .btn-white:hover { background: #eef2ff; }
.btn-ghost { background: transparent; color: var(--primary); }
.btn-lg { font-size: 17px; } .btn-xl { font-size: 20px; border-radius: 12px; }
.icon-btn { box-shadow: inset 0 0 0 1px var(--line); border-radius: 10px; }

.site-header { background: rgba(255, 255, 255, .92); border-bottom: 1px solid var(--line); }
.logo b { color: var(--primary); font-weight: 800; } .logo small { color: var(--gold); letter-spacing: .12em; font-weight: 700; }
.main-nav a { font-weight: 600; color: #334155; border-radius: 8px; } .main-nav a:hover, .main-nav a.active { background: #eef2ff; color: var(--primary); }
.user-chip { background: #f1f5f9; border-radius: 10px; }
.avatar { box-shadow: inset 0 0 0 1px var(--line); }
.announce { background: var(--primary); color: #e0e7ff; font-weight: 600; }

.hero { padding-top: 48px; }
.eyebrow { background: #fff7e0; color: #8a6d0b; box-shadow: inset 0 0 0 1px #f0d98a; border-radius: 6px; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.hero h1 { font-weight: 800; }
.hl { background: linear-gradient(90deg, #1e3a8a, #6d28d9); -webkit-background-clip: text; background-clip: text; }
.hero-stats li { border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); } .hero-stats b { color: var(--primary); }
.hero-art::before { background: radial-gradient(circle, #e0e7ff 0, #f6f7fb 65%, transparent 70%); }
.bubble { border-radius: 8px; font-family: 'Inter', serif; font-size: 18px; font-weight: 700; color: var(--primary) !important; box-shadow: var(--shadow); border-left: 3px solid var(--gold); }

.panel, .lesson-sec, .auth-card, .profile-head, .mindmap, .empty { border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); }
.game-card { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); border-left: 4px solid var(--c); }
.game-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(15, 23, 42, .1); }
.gc-icon { border-radius: 10px; background: color-mix(in srgb, var(--c) 10%, #fff); font-size: 32px; width: 60px; height: 60px; font-family: 'Montserrat'; font-weight: 800; color: var(--c); }
.gc-body strong { font-weight: 700; font-size: 18px; } .gc-play { border-radius: 8px; width: 34px; height: 34px; }
.gc-tags i { border-radius: 4px; }
.grade-grid.n3 { grid-template-columns: repeat(3, 1fr); }
.grade-card { border-radius: 14px; box-shadow: 0 10px 30px color-mix(in srgb, var(--c) 30%, transparent); background: linear-gradient(150deg, var(--c), color-mix(in srgb, var(--c) 60%, #0f172a)); padding: 26px; text-align: left; }
.grade-card .gr-emoji { font-family: 'Montserrat', serif; font-size: 54px; font-weight: 800; color: rgba(255, 255, 255, .9); line-height: 1; }
.grade-card b { font-size: 30px; margin-top: 8px; }
.grade-card:hover { transform: translateY(-3px); }
.feature { border-radius: var(--radius); box-shadow: var(--shadow); border-top: 3px solid var(--gold); }
.chip { border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.chip.on { background: var(--primary); box-shadow: none; }
.tour-card, .lesson-card { border-radius: var(--radius); box-shadow: var(--shadow); }
.lesson-head { border-radius: 14px; background: linear-gradient(135deg, #1e3a8a, #312e81) !important; }
.lesson-head .lc-topic { background: rgba(201, 162, 39, .25); color: #fde68a; }
.lesson-tabs a { border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.remember-list li { background: #f8fafc; border-left: 3px solid var(--gold); border-radius: 6px; font-size: 16.5px; }
.remember-list li::before { content: '▸'; color: var(--gold); }
.formula-card { background: #fff; border: 1px solid #c7d2fe; border-radius: 10px; } .formula-card h4 { color: var(--primary); font-size: 16px; }
.method { border: 1px solid #fde68a; background: #fffdf5; border-radius: 10px; } .method h4 { color: #8a6d0b; font-size: 18px; }
.anim { border-radius: 10px; } .anim-caption { color: var(--primary); } .anim-ctrl button { border-radius: 8px; background: #eef2ff; color: var(--primary); }
.cta-box { background: linear-gradient(90deg, #eef2ff, #fff7e0); border: 1px solid #c7d2fe; font-size: 19px; }
.grade-label { border-radius: 6px; }
.rank { border-radius: 6px; }
.site-footer { background: #0f172a; }
.form input, .form select, .form textarea { border-width: 1.5px; border-radius: 10px; }
.badge { border-radius: 10px; } .badge.got { border: 2px solid var(--gold); }
.xpbar span { background: linear-gradient(90deg, #1e3a8a, var(--gold)); }

/* Sân luyện tập: tối giản, chữ rõ */
.stage { border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(15, 23, 42, .1); }
.stage-start { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 8%, #fff), #fff 60%); }
.start-icon { font-family: 'Montserrat'; font-weight: 800; color: var(--c); }
.gp { border-radius: 8px; border-width: 1.5px; }
.choice { border-radius: 10px; box-shadow: 0 3px 0 rgba(0, 0, 0, .18); font-family: 'Inter', sans-serif; font-weight: 700; }
.choice:nth-child(1) { --cc: #1e3a8a; } .choice:nth-child(2) { --cc: #0f766e; } .choice:nth-child(3) { --cc: #7c2d12; } .choice:nth-child(4) { --cc: #6d28d9; }
.q-prompt { font-family: 'Inter', sans-serif; font-weight: 700; }
.keypad button { border-radius: 10px; box-shadow: 0 3px 0 #cbd5e1; } .keypad .ok { background: var(--primary); box-shadow: 0 3px 0 #172554; }
.answer-box { border-radius: 12px; border-width: 2px; }
.race-track { background: repeating-linear-gradient(90deg, #1e293b 0 50px, #334155 50px 100px); border-radius: 10px; }
.sky { background: linear-gradient(#dbeafe, #f8fafc); }
.balloon .bb { border-radius: 14px; background: linear-gradient(160deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .1)), var(--bc); border: 2px solid rgba(255, 255, 255, .7); }
.balloon::after { display: none; }
.mcard .f { background: linear-gradient(135deg, #1e3a8a, #312e81); border-radius: 10px; box-shadow: 0 4px 0 #0f172a; font-family: 'Montserrat'; }
.mcard .b { border-radius: 10px; }
.result .big-score { color: var(--primary); }