:root{--bg:#f6f8f7;--card:#fff;--ink:#14231c;--mute:#53675d;--accent:#10B981;--line:#d5e0da}
@media (prefers-color-scheme:dark){:root{--bg:#0e1713;--card:#15231c;--ink:#e6f1ea;--mute:#9bb2a6;--line:#2a3d33}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,"Segoe UI",sans-serif}
header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg)}
header b{color:var(--accent)}
button{font:inherit;border:1px solid var(--accent);background:none;color:var(--ink);border-radius:6px;padding:4px 12px;cursor:pointer}
button[aria-pressed=true]{background:var(--accent);color:#fff}
main{max-width:860px;margin:0 auto;padding:0 16px 48px}
section{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px 22px;margin:20px 0;page-break-inside:avoid}
h1{font-size:1.7rem;margin:28px 0 4px}h2{font-size:1.2rem;margin:0 0 10px;color:var(--accent)}
p.exo-sub{color:var(--mute);margin:0}
table{border-collapse:collapse;width:100%;font-size:.94rem}
th,td{text-align:left;border-bottom:1px solid var(--line);padding:7px 8px;vertical-align:top}
th{color:var(--mute);font-weight:600}
ul,ol{margin:6px 0;padding-left:22px}
.exo-note{border-left:4px solid var(--accent);padding:6px 12px;color:var(--mute);margin-top:10px}
[data-l=en]{display:none}
html[data-lang=en] [data-l=vi]{display:none}
html[data-lang=en] [data-l=en]{display:revert}
@media print{header{display:none}body{background:#fff}}

.exo-back{display:inline-block;margin-right:10px;padding:4px 12px;border-radius:999px;background:var(--accent);color:#fff;font-weight:700;text-decoration:none}

/* brand frame (same look as the app header): logo + name, click = back to the app or demo */
header{background:#065f46;color:#fff;border-bottom:0;box-shadow:0 2px 6px rgba(0,0,0,.25)}
header b{color:#fff}
.exo-brand-link{display:flex;align-items:center;gap:12px;padding:4px 18px 4px 12px;border:2px solid #fff;border-radius:10px;background:#022c22;color:#fff;font-size:26px;font-weight:800;text-decoration:none}
.exo-brand-link:hover{outline:2px solid var(--accent);outline-offset:2px}
.exo-logo{display:block;width:auto;height:46px}
.exo-orb{position:relative;display:block;flex:none}
.exo-orb-video{position:absolute;left:50%;top:50%;width:128%;height:auto;aspect-ratio:5/4;max-width:none;transform:translate(-50%,-50%);opacity:0;pointer-events:none;mix-blend-mode:screen;transition:opacity .8s;-webkit-mask-image:radial-gradient(ellipse closest-side,#000 86%,transparent 100%);mask-image:radial-gradient(ellipse closest-side,#000 86%,transparent 100%)}
.exo-orb.exo-has-video .exo-orb-video{opacity:1}
.exo-orb.exo-has-video>img{opacity:0}
header button{color:#fff;border-color:rgba(255,255,255,.6)}
header button[aria-pressed=true]{background:#fff;color:#065f46;border-color:#fff}
.exo-back{background:#fff;color:#065f46}
@media (max-width:520px){.exo-brand-link{font-size:18px}.exo-logo{height:34px}}