/* Layout: full-bleed hero (key art + logo + 3 download buttons), then bands: server, classes, news, download, footer. Dark game world, single theme. */
:root{
  --bg:#0a0910; --bg2:#121019; --panel:#1a1722; --line:#2b2636; --fg:#efe8da; --muted:#a79e8e;
  --gold:#e8a23a; --gold2:#f6d27a; --ember:#ff6a1a; --steel:#c9d0d8; --ok:#4ad07a;
  --font-display:'Cinzel',Georgia,serif; --font-body:'Be Vietnam Pro',system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);line-height:1.55}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
a{color:var(--gold2)}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.inner{max-width:1120px;margin:0 auto}
h1,h2,h3{font-family:var(--font-display);letter-spacing:.06em;text-wrap:balance;margin:0}
h2{font-family:var(--font-body);font-size:clamp(20px,2.6vw,28px);font-weight:700;letter-spacing:.01em;color:var(--gold2)}
.eyebrow{font:600 11.5px var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
p{margin:0}
.demo-tag{display:inline-block;font:600 11px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:#1a1208;background:var(--gold);padding:3px 8px;border-radius:3px}

/* nav */
nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:rgba(10,9,16,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav .inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px}
nav .brand{font:700 15px var(--font-display);letter-spacing:.14em;color:var(--gold2);text-decoration:none}
nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0;flex-wrap:wrap}
nav li a{font:500 13px var(--font-body);color:var(--fg);text-decoration:none;opacity:.85}
nav li a:hover{color:var(--gold2);opacity:1}

/* hero */
.hero{position:relative;overflow:hidden;background:#07060b}
.hero .art{position:absolute;inset:0;background:url("../img/tmp/hero.jpg") center 28%/cover no-repeat;filter:saturate(1.12) contrast(1.06)}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,6,11,.12) 0%,rgba(7,6,11,0) 30%,rgba(7,6,11,.55) 68%,rgba(7,6,11,.92) 88%,var(--bg) 100%)}
.hero .inner{position:relative;display:grid;gap:18px;justify-items:center;text-align:center;padding-block:34px 56px}
.hero img.logo{width:min(640px,92%);height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.8))}
.hero .tag{font:600 clamp(13px,1.6vw,16px) var(--font-display);letter-spacing:.3em;text-transform:uppercase;color:var(--steel)}
.hero .lead{max-width:60ch;color:var(--fg);font-size:15px;text-shadow:0 1px 3px #000,0 2px 14px #000}
.dl{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:6px;text-decoration:none;font:600 14px var(--font-body);border:1px solid var(--gold);color:#1a1208;background:linear-gradient(180deg,var(--gold2),var(--gold));box-shadow:0 6px 18px rgba(0,0,0,.5)}
.btn svg{width:20px;height:20px;flex:none}
.btn.ghost{background:rgba(20,17,26,.85);color:var(--fg);border-color:var(--line)}
.btn.ghost small{color:var(--muted)}
.btn small{display:block;font-weight:500;font-size:11.5px;letter-spacing:.02em;opacity:.85}
.btn:focus-visible,nav a:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.status{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--steel);background:rgba(20,17,26,.8);border:1px solid var(--line);padding:6px 12px;border-radius:999px}
.status i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}

/* bands */
section.band{padding-block:48px}
section.band.alt{background:var(--bg2);border-block:1px solid var(--line)}
.head{display:grid;gap:6px;margin-bottom:22px}
.head p.sub{color:var(--muted);max-width:64ch}

/* server facts */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.fact{background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--gold);padding:14px 16px;display:grid;gap:4px;min-width:0}
.fact b{font:700 20px var(--font-body);color:var(--gold2);letter-spacing:0;font-variant-numeric:tabular-nums}
.fact span{font-size:13px;color:var(--muted)}
.fact .src{font-size:11px;color:var(--muted);opacity:.75}
.events{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{font-size:12.5px;padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--fg)}
.chip.hot{border-color:var(--ember);color:#ffb37a}

/* classes */
.classes{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.cls{position:relative;aspect-ratio:3/4;max-width:100%;border:1px solid var(--line);background:var(--panel) center/cover no-repeat;overflow:hidden;display:flex;align-items:flex-end}
.cls .cap{width:100%;padding:12px;background:linear-gradient(180deg,transparent,rgba(7,6,11,.95) 70%)}
.cls h3{font-family:var(--font-body);font-size:15px;font-weight:700;color:var(--gold2);letter-spacing:.01em}
.cls p{font-size:12.5px;color:var(--steel)}
.cls.soon{background:linear-gradient(160deg,#1e1a28,#0d0b13)}
.cls.soon .ph{position:absolute;inset:0;display:grid;place-items:center;font:900 56px var(--font-display);color:rgba(232,162,58,.18)}
.cls.soon .cap p{color:var(--muted)}

/* news */
.news{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
article{background:var(--panel);border:1px solid var(--line);padding:16px;display:grid;gap:8px;min-width:0}
article .meta{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--muted)}
article .kind{font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
article h3{font-size:16px;font-weight:700;color:var(--fg);letter-spacing:.02em;font-family:var(--font-body)}
article p{font-size:13.5px;color:var(--steel)}
article a{font-size:13px}

/* download */
.plat{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);padding:18px;display:grid;gap:10px;min-width:0}
.card h3{font-size:15px;color:var(--fg);font-family:var(--font-body);font-weight:700;display:flex;align-items:center;gap:10px}
.card h3 svg{width:22px;height:22px}
.card p{font-size:13.5px;color:var(--steel)}
.card .btn{justify-self:start}
.card .pend{color:var(--muted);font-size:12.5px;border:1px dashed var(--line);padding:8px 10px;border-radius:4px}
.card code{font-size:12px;color:var(--gold2);background:var(--bg);padding:2px 6px;border-radius:3px;word-break:break-all}
.req{font-size:12.5px;color:var(--muted);margin-top:14px}

/* guide cards */
.guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.guide{display:grid;gap:6px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);padding:14px 16px;text-decoration:none;color:var(--fg);min-width:0}
.guide b{font-size:15px}
.guide span{font-size:13px;color:var(--muted)}
.guide:hover{border-color:var(--gold2)}
/* in-page reader (hash: #tin-… / #hd-…) */
#reader{padding-block:36px 56px}
#reader .inner{max-width:760px;display:grid;gap:16px}
#reader .back{justify-self:start;font:600 13px var(--font-body);color:var(--gold2);text-decoration:none;border:1px solid var(--line);padding:6px 12px;border-radius:4px}
#reader h1{font-family:var(--font-body);font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:0;color:var(--fg)}
#reader .body{display:grid;gap:12px;font-size:15px;color:var(--fg)}
#reader .body h3{font-family:var(--font-body);font-size:16px;color:var(--gold2);margin-top:8px}
#reader .body ol,#reader .body ul{margin:0;padding-left:22px;display:grid;gap:6px}
#reader .body .warn{border:1px solid var(--line);border-left:3px solid var(--ember);padding:10px 12px;background:var(--panel);font-size:14px}
#reader .body .pend{color:var(--muted);font-size:13px}
footer{padding-block:28px 40px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px}
footer .inner{display:grid;gap:8px}
footer .links{display:flex;flex-wrap:wrap;gap:14px}
@media (prefers-reduced-motion:no-preference){ .hero img.logo{animation:rise .9s ease-out both} }
@keyframes rise{from{transform:translateY(10px);opacity:.6}to{transform:none;opacity:1}}

/* --- them cho ban trien khai (build_site.py) --- */
.hero .art{background-image:url("../img/tmp/hero.jpg");background-image:image-set(url("../img/tmp/hero.webp") type("image/webp"),url("../img/tmp/hero.jpg") type("image/jpeg"))}
.cls.c-phap-su{background-image:url("../img/tmp/classes/phap-su.jpg");background-image:image-set(url("../img/tmp/classes/phap-su.webp") type("image/webp"),url("../img/tmp/classes/phap-su.jpg") type("image/jpeg"))}
.cls.c-thanh-dao{background-image:url("../img/tmp/classes/thanh-dao.jpg");background-image:image-set(url("../img/tmp/classes/thanh-dao.webp") type("image/webp"),url("../img/tmp/classes/thanh-dao.jpg") type("image/jpeg"))}
.cls.c-trieu-hoi{background-image:url("../img/tmp/classes/trieu-hoi.jpg");background-image:image-set(url("../img/tmp/classes/trieu-hoi.webp") type("image/webp"),url("../img/tmp/classes/trieu-hoi.jpg") type("image/jpeg"))}
.hero picture{display:contents}
.btn.soon{cursor:default;filter:grayscale(.35);opacity:.8}
/* trang doc news/<slug>.html, guide/<slug>.html: dung lai style #reader cua demo */
#reader .body a{color:var(--gold2)}
#reader .body b{color:var(--gold2)}
#reader .more{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
#reader .more ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:14px}
#reader .more a[aria-current]{color:var(--fg);text-decoration:none}
.tbl{overflow-x:auto;border:1px solid var(--line)}
.tbl table{border-collapse:collapse;width:100%;font-size:13.5px;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.tbl th{background:var(--panel);color:var(--gold2);font-weight:600}
/* trang danh sach news/index.html, guide/index.html */
.listing{padding-block:28px 56px}
.listing .back{display:inline-block;font:600 13px var(--font-body);color:var(--gold2);text-decoration:none;border:1px solid var(--line);padding:6px 12px;border-radius:4px;margin-bottom:18px}
nav li a[aria-current]{color:var(--gold2);opacity:1}
.more-link{margin-top:16px;font-size:13.5px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.filt{font:500 13px var(--font-body);padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--fg);cursor:pointer}
.filt[aria-pressed="true"]{border-color:var(--gold);color:var(--gold2);background:var(--panel)}
.filt:focus-visible,.guide:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
footer .links a{color:var(--muted)}