/* Lớp Học Vui — kiểu chung cho các trang web (không áp cho trang game) */
:root{
  --bg:#dff3ff; --panel:#ffffff; --fg:#1f2a44; --muted:#6b7a99;
  --accent:#ff9f1c; --accent-dk:#d97e00; --sky:#2ec4ff; --sky-dk:#1296cc;
  --ok:#2bc48a; --ok-dk:#1a9a68; --line:#c9e6f5; --violet:#8c6cff;
  --font-display:"Baloo 2","Nunito",system-ui,sans-serif; --font-body:"Nunito",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#13203a;--panel:#1d2c4d;--fg:#f1f5ff;--muted:#9fb0d0;--line:#2e4066;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#13203a;--panel:#1d2c4d;--fg:#f1f5ff;--muted:#9fb0d0;--line:#2e4066;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:17px;line-height:1.55;
  background-image:radial-gradient(circle at 10% 10%,rgba(255,255,255,.4) 0 70px,transparent 71px),radial-gradient(circle at 90% 30%,rgba(255,255,255,.35) 0 50px,transparent 51px)}
h1,h2,h3{font-family:var(--font-display);margin:0;line-height:1.15;text-wrap:balance}
h1{font-size:clamp(32px,6vw,48px);color:var(--sky-dk)}
h2{font-size:clamp(24px,4vw,32px);margin-top:48px}
h3{font-size:20px}
p{margin:10px 0;max-width:66ch}
a{color:var(--sky-dk)}
.wrap{max-width:860px;margin:0 auto;padding-inline:16px;padding-block:0 48px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-block:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--sky-dk);font-family:var(--font-display);font-weight:800;font-size:22px}
.brand img{width:40px;height:40px;border-radius:12px}
.nav ul{list-style:none;display:flex;gap:6px;margin:0;padding:0;flex-wrap:wrap}
.nav a.l{text-decoration:none;color:var(--fg);font-weight:800;padding:8px 12px;border-radius:12px;background:var(--panel);box-shadow:0 3px 0 var(--line)}
.nav a.l[aria-current]{background:var(--accent);color:#1f2a44;box-shadow:0 3px 0 var(--accent-dk)}
.btn{display:inline-block;border:0;border-radius:18px;padding:14px 22px;font:800 19px var(--font-display);color:#fff;background:var(--sky);box-shadow:0 5px 0 var(--sky-dk);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--sky-dk)}
.btn.accent{background:var(--accent);box-shadow:0 5px 0 var(--accent-dk);color:#1f2a44}
.btn.ghost{background:var(--panel);color:var(--fg);box-shadow:0 5px 0 var(--line)}
.btn[hidden]{display:none}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;padding-block:24px 8px}
@media (max-width:640px){.hero{grid-template-columns:1fr}}
.hero p.lead{font-size:19px;color:var(--muted);font-weight:700}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.hero img{width:100%;max-width:360px;border-radius:28px;display:block;margin:0 auto}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.badge{background:var(--panel);border-radius:999px;padding:6px 12px;font-weight:800;font-size:14px;box-shadow:0 3px 0 var(--line)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:16px}
.card{background:var(--panel);border-radius:22px;padding:16px;box-shadow:0 6px 0 var(--line);min-width:0}
.card .ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:30px;margin-bottom:10px}
.ico.m1{background:#ffe9c7}.ico.m4{background:#ffdbe3}.ico.m2{background:#d6f5e8}.ico.m3{background:#e4ddff}
.card p{color:var(--muted);font-weight:700;font-size:15px;margin:4px 0 0}
.steps{display:grid;gap:10px;margin-top:14px;padding:0;list-style:none;counter-reset:s}
.steps li{background:var(--panel);border-radius:18px;padding:14px 14px 14px 58px;position:relative;box-shadow:0 5px 0 var(--line);counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:14px;top:12px;width:32px;height:32px;border-radius:50%;background:var(--accent);color:#1f2a44;font:800 18px var(--font-display);display:grid;place-items:center}
.box{background:var(--panel);border-radius:22px;padding:20px;box-shadow:0 6px 0 var(--line);margin-top:16px}
.box.accent{background:var(--accent);color:#1f2a44;box-shadow:0 6px 0 var(--accent-dk)}
.box.accent h2{margin-top:0;color:#1f2a44}
.box.accent p{color:#1f2a44}
.box.accent .btn{background:#1f2a44;color:#fff;box-shadow:0 5px 0 #0d1324}
.faq details{background:var(--panel);border-radius:16px;padding:12px 16px;margin-top:10px;box-shadow:0 4px 0 var(--line)}
.faq summary{font-weight:900;cursor:pointer}
.foot{margin-top:48px;padding-top:16px;border-top:2px solid var(--line);color:var(--muted);font-size:14px;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between}
.foot a{color:var(--muted)}
.ymyl{font-size:14px;color:var(--muted);margin-top:8px}
.social{display:flex;gap:8px;flex-wrap:wrap}
.social a{text-decoration:none;font-weight:800;background:var(--panel);padding:8px 12px;border-radius:12px;box-shadow:0 3px 0 var(--line);color:var(--fg)}
.social a[hidden]{display:none}
.preview{width:100%;max-width:420px;border-radius:16px;box-shadow:0 8px 0 var(--line);display:block}