:root{--bg:#161009;--bg2:#20180d;--pan:#2a2011;--ln:#3b2d17;--am:#ff8c1a;--am2:#ffb35c;--gd:#ffd24a;--ink:#f4ead8;--mut:#c9b58f}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Krub',system-ui,sans-serif;line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.brandmark b{font-family:'Chonburi','Krub',serif;font-weight:400;line-height:1.25}
a{color:var(--am2);text-decoration:none}
.hold{width:min(1180px,92vw);margin:0 auto}
img{max-width:100%;display:block}
/* agebar */
.agebar{background:#0d0904;border-bottom:1px solid var(--ln);font-size:13px;color:var(--mut)}
.agebar .hold{display:flex;justify-content:space-between;align-items:center;height:38px}
.agebar b{color:var(--gd)}
/* masthead — logo TRÁI, nav dưới trên mobile; joinbtn phải */
.masthead{position:sticky;top:0;z-index:40;background:rgba(20,14,8,.94);backdrop-filter:blur(9px);border-bottom:1px solid var(--ln)}
.masthead .hold{display:flex;align-items:center;gap:18px;height:66px}
.brandmark{display:flex;align-items:center;gap:9px}
.brandmark img{height:40px;width:auto}
.topnav{display:flex;gap:20px;margin-left:6px}
.topnav a{color:var(--ink);font-size:15px;font-weight:500;opacity:.9}
.topnav a:hover{color:var(--am2)}
.joinbtn{margin-left:auto;background:linear-gradient(180deg,var(--am2),var(--am));color:#241403;font-weight:700;padding:11px 22px;border-radius:6px;font-size:15px}
.burger{display:none;margin-left:auto;background:var(--pan);border:1px solid var(--ln);color:var(--ink);width:44px;height:40px;border-radius:6px;font-size:20px}
/* hero panel — full width, KHÔNG tile bên cạnh (io có tile phải) */
.hero-x{background:radial-gradient(1000px 500px at 15% -10%,rgba(255,140,26,.16),transparent),linear-gradient(180deg,var(--bg2),var(--bg));border-bottom:1px solid var(--ln)}
.hero-x .hold{padding:64px 0 52px;max-width:min(1180px,92vw)}
.kick{color:var(--gd);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin-bottom:14px}
.hero-x h1{font-size:clamp(30px,5vw,52px);max-width:900px}
.hero-x h1 span{color:var(--am)}
.lede{color:var(--mut);font-size:18px;max-width:760px;margin:18px 0 26px}
.lede p{margin:0}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn1{background:linear-gradient(180deg,var(--am2),var(--am));color:#241403;font-weight:700;padding:14px 30px;border-radius:6px}
.btn2{border:1px solid var(--am);color:var(--am2);padding:14px 26px;border-radius:6px;font-weight:600}
.metrics{list-style:none;display:flex;gap:34px;flex-wrap:wrap;margin-top:34px}
.metrics li{border-left:3px solid var(--am);padding-left:12px}
.metrics b{display:block;font-size:26px;font-family:'Chonburi',serif;color:var(--gd)}
.metrics span{font-size:13px;color:var(--mut)}
/* strip: RAIL ngang cuộn (io = grid) */
.pane{padding:52px 0;border-bottom:1px solid var(--ln)}
.pane-h{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px}
.pane-h h2{font-size:clamp(22px,3vw,30px)}
.pane-h a{color:var(--am2);font-weight:600;font-size:14px;white-space:nowrap}
.rail{display:flex;gap:16px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
.rail::-webkit-scrollbar{height:8px}.rail::-webkit-scrollbar-thumb{background:var(--ln);border-radius:8px}
.railcard{flex:0 0 300px;scroll-snap-align:start;background:var(--pan);border:1px solid var(--ln);border-radius:10px;overflow:hidden}
.railcard img{width:100%;height:188px;object-fit:cover}
.railcard .cap{padding:12px 14px;display:flex;justify-content:space-between;align-items:center}
.railcard .nm{font-weight:600;font-size:15px}.railcard .rp{font-size:12px;color:var(--gd);border:1px solid var(--ln);border-radius:20px;padding:2px 9px}
.railcard .pv{font-size:12px;color:var(--mut);padding:0 14px 12px}
/* provider tags */
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tags span{background:var(--pan);border:1px solid var(--ln);border-radius:6px;padding:9px 16px;font-size:14px;color:var(--mut)}
/* reading: 2 cột TOC + doc (io = 1 cột giữa) */
.reading{display:grid;grid-template-columns:230px 1fr;gap:40px;align-items:start}
.toc{position:sticky;top:88px;border-left:2px solid var(--ln);padding-left:16px}
.toc p{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--gd);margin-bottom:10px}
.toc a{display:block;color:var(--mut);font-size:14px;padding:5px 0}
.toc a:hover{color:var(--am2)}
.doc h2{font-size:24px;margin:30px 0 12px;padding-top:8px}
.doc h2:first-child{margin-top:0}
.doc p{margin:0 0 15px}
.doc ul{margin:0 0 16px 20px}.doc li{margin:6px 0}
.doc a{color:var(--am2);border-bottom:1px solid rgba(255,179,92,.4)}
.doc a.home{color:var(--gd);font-weight:600}
.lead-x{font-size:18px;color:var(--mut);margin-bottom:8px}
/* FAQ native details */
.qa{border:1px solid var(--ln);border-radius:8px;margin-bottom:12px;background:var(--pan);overflow:hidden}
.qa summary{cursor:pointer;padding:16px 20px;font-weight:600;list-style:none;font-size:16px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';float:right;color:var(--am);font-size:22px;line-height:1}
.qa[open] summary::after{content:'–'}
.qa .ans{padding:0 20px 16px;color:var(--mut)}
/* cards3 guides */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gcard{background:var(--pan);border:1px solid var(--ln);border-radius:10px;padding:20px;display:block}
.gcard span{font-size:12px;color:var(--gd);text-transform:uppercase;letter-spacing:.05em}
.gcard h3{font-size:18px;margin:8px 0}
.gcard p{color:var(--mut);font-size:14px}
/* team */
.teamrow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tcard{background:var(--pan);border:1px solid var(--ln);border-radius:10px;padding:20px;text-align:center}
.tcard img{width:88px;height:88px;border-radius:12px;margin:0 auto 12px;border:2px solid var(--am)}
.tcard h3{font-size:17px}.tcard .rl{color:var(--gd);font-size:13px;font-weight:600;margin:3px 0 8px}
.tcard p{color:var(--mut);font-size:13px}
/* ctaband */
.ctaband{background:linear-gradient(120deg,var(--grad1,#a85e0c),var(--pan));text-align:center;padding:48px 0}
.ctaband h2{font-size:26px;margin-bottom:8px}
.ctaband p{color:var(--ink);opacity:.9;margin-bottom:20px}
/* colophon (footer) — 4 cột + author strip, KHÁC io foot */
.colophon{background:#0d0904;border-top:2px solid var(--am);padding:46px 0 24px;font-size:14px}
.colo-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;margin-bottom:26px}
.colophon h4{color:var(--gd);font-size:14px;margin-bottom:12px;font-family:'Krub'}
.colophon a{color:var(--mut);display:block;padding:4px 0}
.colophon .blurb{color:var(--mut)}
.colophon .disc{color:#8a7a5c;font-size:12.5px;border-top:1px solid var(--ln);padding-top:16px;line-height:1.6}
.crumbs{color:var(--mut);font-size:13px;padding:16px 0}
.crumbs a{color:var(--mut)}
/* breadcrumb + inner hero */
.ihead{background:var(--bg2);border-bottom:1px solid var(--ln);padding:34px 0}
.ihead h1{font-size:clamp(26px,4vw,40px);max-width:900px}
@media(max-width:900px){
 .topnav{display:none;flex-direction:column;position:absolute;top:66px;left:0;right:0;background:var(--pan);border-bottom:1px solid var(--ln);padding:10px 6vw;gap:2px} .topnav a{padding:11px 0;border-bottom:1px solid var(--ln)} .burger{display:flex;align-items:center;justify-content:center}
 .reading{grid-template-columns:1fr;gap:22px} .toc{position:static;border-left:0;border-top:2px solid var(--ln);padding:14px 0 0}
 .cards3,.teamrow{grid-template-columns:1fr} .colo-grid{grid-template-columns:1fr 1fr}
 .masthead .hold{flex-wrap:wrap} .joinbtn{padding:9px 16px;font-size:14px}
}
@media(max-width:560px){.colo-grid{grid-template-columns:1fr} .metrics{gap:20px}}