/* CHU Academy — shell: tokens, fonts, header, footer, login dialog.
   Loaded on every page (new pages and the carried-over feature pages). */
@font-face{font-family:'KaiXinSong';src:url('/assets/vi/KaiXinSong-ime.woff') format('woff');unicode-range:U+3400-4DBF,U+20000-323AF;font-display:swap}
:root{
  --bg:#F4F6F3;--surface:#FFFFFF;--ink:#13222B;--muted:#586971;--line:#D8DFDB;
  --teal:#0E6B66;--teal-soft:#DCEFEC;--ochre:#9A6410;--ochre-soft:#F6E8CB;--btn:#13222B;--btn-ink:#F4F6F3;--lock:#E9EDEA;
  --f-display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;--f-body:'Instrument Sans','Segoe UI',system-ui,sans-serif;
  --f-han:'KaiXinSong','Noto Serif SC','Songti SC','SimSun',serif;--f-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not(.chuLight){
  --bg:#0D1418;--surface:#151E24;--ink:#E8EFEC;--muted:#93A4AB;--line:#26343C;
  --teal:#55C2B8;--teal-soft:#12302F;--ochre:#E3B35C;--ochre-soft:#33280F;--btn:#E8EFEC;--btn-ink:#0D1418;--lock:#1C282F;}}
:root[data-theme="dark"]{
  --bg:#0D1418;--surface:#151E24;--ink:#E8EFEC;--muted:#93A4AB;--line:#26343C;
  --teal:#55C2B8;--teal-soft:#12302F;--ochre:#E3B35C;--ochre-soft:#33280F;--btn:#E8EFEC;--btn-ink:#0D1418;--lock:#1C282F;}

/* header */
.chuTop{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line);color:var(--ink);font-family:var(--f-body)}
.chuBar{max-width:1200px;margin-inline:auto;padding-inline:16px;display:flex;align-items:center;gap:18px;min-height:60px}
.chuLogo{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink);white-space:nowrap}
.chuLogo b{font:700 1.3rem var(--f-display);letter-spacing:-.02em}
.chuLogo span{font:500 .7rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.chuMain{display:flex;gap:2px;overflow-x:auto;flex:1;scrollbar-width:none}
.chuMain::-webkit-scrollbar{display:none}
.chuMain a{padding:8px 12px;border-radius:6px;white-space:nowrap;color:var(--muted);font-weight:500;text-decoration:none;font-size:.95rem}
.chuMain a:hover{color:var(--ink);background:var(--lock)}
.chuMain a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--teal);border-radius:0}
.chuAct{display:flex;align-items:center;gap:8px}
.chuAct .chuBtn{background:none;border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:7px 12px;font:600 .88rem var(--f-body);cursor:pointer;white-space:nowrap}
.chuAct .chuBtn:hover{border-color:var(--ink)}
.chuAct .chuBtn.solid{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.chuAct .chuBtn.solid:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.chuAct .langbox{position:relative}
.chuAct .langmenu{display:none;position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:4px;min-width:140px;box-shadow:0 8px 24px rgba(0,0,0,.14);z-index:60}
.chuAct .langmenu.open{display:block}
.chuAct .langmenu button{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 10px;border-radius:6px;font:500 .9rem var(--f-body);color:var(--ink);cursor:pointer}
.chuAct .langmenu button:hover{background:var(--lock)}
.chuAct .langmenu button[aria-current="true"]{color:var(--teal);font-weight:700}
@media (max-width:820px){.chuBar{flex-wrap:wrap;gap:2px 12px;padding-block:8px}.chuMain{order:3;flex-basis:100%}.chuAct{margin-left:auto}}

/* footer */
.chuFoot{border-top:1px solid var(--line);background:var(--bg);color:var(--muted);font:400 .9rem/1.6 var(--f-body);margin-top:72px}
.chuFoot .in{max-width:1200px;margin-inline:auto;padding:28px 16px 40px;display:grid;gap:18px}
.chuFoot .links{display:flex;flex-wrap:wrap;gap:6px 22px}
.chuFoot a{color:var(--ink);text-decoration:none}
.chuFoot a:hover{text-decoration:underline}
.chuFoot .small{font-size:.82rem}

/* login dialog (created by cs-account.js) */
.csModal{position:fixed;inset:0;z-index:90;background:rgba(10,18,22,.55);display:grid;place-items:center;padding:20px}
.csModalBox{position:relative;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:28px 26px 24px;width:100%;max-width:420px;box-shadow:0 18px 55px rgba(0,0,0,.25);font-family:var(--f-body)}
.csModalX{position:absolute;right:12px;top:8px;background:none;border:0;font-size:24px;line-height:1;color:var(--muted);cursor:pointer;padding:4px 8px}
.csModalX:hover{color:var(--ink)}
.csModalBox h3{margin:0 0 8px;font:700 1.25rem var(--f-display)}
.csModalSub{margin:0;color:var(--muted);font-size:.9rem;line-height:1.6}
.csModalBox input{width:100%;margin-top:16px;border:1px solid var(--line);border-radius:8px;padding:12px 14px;font:inherit;font-size:1rem;background:var(--bg);color:var(--ink)}
.csModalBox input:focus{outline:2px solid var(--teal);outline-offset:1px}
.csModalBox .csModalGo{width:100%;justify-content:center;margin-top:10px;display:inline-flex;align-items:center;background:var(--btn);color:var(--btn-ink);border:0;border-radius:8px;padding:12px 18px;font:600 1rem var(--f-body);cursor:pointer}
.csModalBox .csModalGo:hover{background:var(--teal);color:#fff}
.csModalBox .csModalGo:disabled{opacity:.6;cursor:default}
.csModalMsg{margin:12px 0 0;font-size:.85rem;min-height:1.2em}
.csModalMsg.ok{color:var(--teal)}
.csModalMsg.bad{color:#B3382C}