/* Tông theo game: tím than đậm viền, cam bí ngô, xanh nõn chuối, nút có bóng đổ đặc. */
:root { --bg:#2a1838; --bg2:#3a2250; --paper:#fff6e8; --ink:#2a1838; --orange:#ff8a1f; --orange-d:#c85f00; --green:#8bd43a; --green-d:#4f8f12; --red:#d6403f; --muted:#6d4f8a; --r:22px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font:17px/1.6 'Nunito',system-ui,sans-serif; color:#f4e9ff; background:radial-gradient(circle at 20% 0,#4b2a6b,var(--bg) 60%); }
a { color:inherit; }
img { max-width:100%; height:auto; display:block; }
h1,h2,h3,.btn,.brand { font-family:'Baloo 2',system-ui,sans-serif; }
.muted { color:#c9b2e6; } .small { font-size:14px; }
.nav { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px max(16px,calc((100% - 1120px)/2)); background:#2a1838ee; backdrop-filter:blur(6px); border-bottom:3px solid #4b2a6b; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; font-size:22px; }
.brand img { border-radius:12px; border:3px solid var(--orange); }
.nav nav { display:flex; gap:18px; font-weight:800; }
.nav nav a { text-decoration:none; white-space:nowrap; } .nav nav a:hover { color:var(--orange); }
main { max-width:1120px; margin:0 auto; padding:0 16px; }
section { margin:64px 0; scroll-margin-top:80px; }
.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; margin-top:36px; }
h1 { font-size:clamp(38px,5.4vw,60px); line-height:1.08; margin:0 0 16px; font-weight:800; }
h1 em { font-style:normal; color:var(--orange); }
.lead { font-size:19px; max-width:34em; margin:0 0 24px; }
.cta { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:14px; }
.cta.center { justify-content:center; margin-top:24px; }
.btn { display:inline-block; text-decoration:none; font-weight:800; font-size:19px; padding:11px 22px; border-radius:18px; color:var(--ink); background:var(--paper); border:3px solid var(--ink); box-shadow:0 5px 0 #130a1c; transition:transform .08s,box-shadow .08s; }
.btn:active { transform:translateY(4px); box-shadow:0 1px 0 #130a1c; }
.btn.go { background:var(--orange); border-color:var(--orange-d); box-shadow:0 5px 0 var(--orange-d); }
.hero-img { border:4px solid var(--orange); border-radius:26px; box-shadow:0 8px 0 var(--orange-d),0 30px 60px #0008; }
.bar { width:fit-content; margin:0 auto 26px; padding:4px 26px; background:var(--orange); color:var(--ink); border-radius:18px; font-size:clamp(24px,3.4vw,32px); font-weight:800; box-shadow:0 5px 0 var(--orange-d); }
.meet { display:grid; grid-template-columns:200px 1fr; gap:28px; align-items:center; }
.bub { background:var(--paper); color:var(--ink); border-radius:18px; padding:10px 16px; margin:0 0 10px; width:fit-content; max-width:100%; box-shadow:0 4px 0 #130a1c; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background:var(--paper); color:var(--ink); border:3px solid var(--ink); border-radius:var(--r); padding:18px 20px; box-shadow:0 5px 0 #130a1c; }
.card .ic { font-size:34px; line-height:1; margin-bottom:6px; }
.card h3 { margin:0 0 4px; font-size:22px; line-height:1.2; } .card p { margin:0; color:#5a3f73; font-size:16px; }
.tiers,.paths { display:grid; gap:14px; }
.tiers { grid-template-columns:repeat(5,1fr); } .paths { grid-template-columns:repeat(4,1fr); }
figure { margin:0; background:var(--paper); color:var(--ink); border:3px solid var(--ink); border-radius:var(--r); overflow:hidden; box-shadow:0 5px 0 #130a1c; }
figure img { aspect-ratio:8/5; object-fit:cover; width:100%; border-bottom:3px solid var(--ink); }
figcaption { padding:8px 12px 12px; font-weight:800; line-height:1.3; }
figcaption small { display:block; font-weight:600; color:var(--muted); font-size:14px; margin-top:2px; }
.lv { display:inline-block; background:var(--red); color:#fff; border-radius:10px; padding:0 8px; margin-right:4px; font-size:15px; font-family:'Baloo 2',sans-serif; }
.intro { text-align:center; max-width:700px; margin:-10px auto 26px; }
.facts { width:100%; max-width:760px; margin:18px auto 0; border-collapse:collapse; background:var(--paper); color:var(--ink); border-radius:var(--r); overflow:hidden; }
.facts th,.facts td { text-align:left; padding:9px 16px; border-bottom:2px dashed #e5d3f5; vertical-align:top; } .facts th { width:34%; white-space:nowrap; }
.about p { max-width:760px; margin:0 auto 12px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.faq { max-width:760px; margin:0 auto; background:var(--paper); color:var(--ink); border:3px solid var(--ink); border-radius:var(--r); padding:6px 22px; }
.faq details { border-bottom:2px dashed #e5d3f5; padding:12px 0; } .faq details:last-child { border:0; }
.faq summary { font-weight:800; cursor:pointer; font-size:18px; } .faq p { margin:6px 0 0; }
footer { text-align:center; padding:36px 16px 48px; border-top:3px solid #4b2a6b; display:grid; justify-items:center; gap:8px; background:#1d0f29; }
.links { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; font-weight:800; }
@media (max-width:900px) { .hero,.meet { grid-template-columns:1fr; } .meet img { margin:0 auto; } .cards { grid-template-columns:repeat(2,1fr); } .tiers { grid-template-columns:repeat(2,1fr); } .paths { grid-template-columns:repeat(2,1fr); } .nav nav a:not(:last-child) { display:none; } }
@media (max-width:560px) { .cards { grid-template-columns:1fr; } .facts th { white-space:normal; } }

.trailer-vid { display:block; width:100%; height:auto; aspect-ratio:16/9; background:#2a1838; border:4px solid var(--orange); border-radius:26px; box-shadow:0 10px 0 rgba(42,24,56,.25); }