:root{--primary:#105FAD;--navy:#0B2540;--bg:#F4F7FB;--card:#fff;--line:#D5DEEA;--ink:#14202E;--muted:#5B6B7D;--amber:#C8741A;--red:#B03A2E}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 "Segoe UI","Be Vietnam Pro",system-ui,Arial,sans-serif}
a{color:var(--primary)}
img{max-width:100%;height:auto}
.btn{display:inline-block;background:var(--primary);color:#fff;border:0;border-radius:8px;padding:.7em 1.3em;font:600 1rem/1 inherit;cursor:pointer;text-decoration:none}
.btn:hover{background:#0c4d8e}.btn.alt{background:#fff;color:var(--primary);border:1px solid var(--primary)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--navy);color:#fff;padding:8px 18px;position:sticky;top:0;z-index:30}
.topbar a{color:#cfe3f8;text-decoration:none;margin-left:14px}.topbar a:hover{color:#fff}
.topbar .brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;margin:0}
.topbar .brand img{background:#fff;border-radius:4px;padding:1px}
.topbar .who{opacity:.85}
@media(max-width:700px){.topbar .who,.topbar nav a:nth-child(2){display:none}.brand span{font-size:.9rem}}
/* đăng nhập */
body.auth{display:grid;place-items:center;min-height:100vh;padding:20px;background:linear-gradient(160deg,#0B2540,#105FAD)}
.authbox{background:#fff;border-radius:14px;padding:30px 30px 24px;width:min(420px,100%);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.authbox img{display:block;margin:0 auto 6px}.authbox .org{text-align:center;font-size:.8rem;color:var(--muted)}
.authbox h1{font-size:1.3rem;margin:.6em 0 .2em;text-align:center;color:var(--navy)}.authbox .sub{text-align:center;color:var(--muted);margin:.2em 0 1em;font-size:.92rem}
.authbox label{display:block;font-weight:600;font-size:.9rem;margin:.8em 0 0}.authbox label small{font-weight:400;color:var(--muted)}
.authbox input{display:block;width:100%;margin-top:.3em;padding:.7em .8em;border:1px solid var(--line);border-radius:8px;font:inherit}
.authbox input:focus{outline:2px solid var(--primary);border-color:var(--primary)}
.authbox .btn{width:100%;margin-top:1.2em;padding:.85em}
.authbox .err{background:#FDF0F0;color:var(--red);border:1px solid #f0c4c0;border-radius:8px;padding:.6em .8em;font-size:.92rem}
.authbox .note{font-size:.78rem;color:var(--muted);margin:1.2em 0 0;text-align:center}
.pwshow{font:700 2rem/1.2 Consolas,monospace;letter-spacing:.12em;text-align:center;background:#EDF7F2;border:1px dashed #1F6B4A;border-radius:8px;padding:.5em}
/* trang chủ */
.wrap{max-width:1000px;margin:0 auto;padding:24px 18px 60px}.wrap.wide{max-width:1200px}
.hero{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-bottom:22px}
.hero h1{margin:.1em 0 .3em;font-size:1.6rem;color:var(--navy)}
.lst{font-size:1.1rem;color:var(--navy);margin:1.4em 0 .6em}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.card{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-decoration:none;color:var(--ink)}
.card:hover{border-color:var(--primary);box-shadow:0 4px 14px rgba(16,95,173,.15)}
.card .no{font-size:.78rem;font-weight:700;letter-spacing:.08em;color:var(--primary);text-transform:uppercase}
.card .tt{font-weight:700;margin:.2em 0 .4em;color:var(--navy)}.card .meta{font-size:.82rem;color:var(--muted)}
.bar{height:6px;background:#E5ECF5;border-radius:4px;margin-top:8px;overflow:hidden}.bar i{display:block;height:100%;background:var(--primary)}
.note{color:var(--muted);font-size:.85rem;margin-top:2em}
/* quản trị */
.stats{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0 18px}
.stats div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 16px;min-width:150px}
.stats b{display:block;font-size:1.4rem;color:var(--navy)}.stats span{font-size:.8rem;color:var(--muted)}
.filter{display:flex;gap:14px;align-items:center;margin:8px 0 12px}.filter select{padding:.4em .6em;border-radius:6px;border:1px solid var(--line)}
.filter .btn{padding:.55em 1em}
.actions{display:flex;gap:10px;margin:8px 0}.actions form{margin:0}
.tw{overflow-x:auto}
table.data{border-collapse:collapse;width:100%;background:#fff;border:1px solid var(--line);font-size:.92rem}
table.data th,table.data td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
table.data th{background:#E4E9F2;cursor:default;white-space:nowrap}table.data th[data-n]{cursor:pointer}
table.data tr.off{opacity:.5}table.data td.num{white-space:nowrap}table.data td.barcell{width:40%}
table.data td.ua{font-size:.78rem;color:var(--muted)}
.tag{background:#FFF8E8;color:#9A6206;border:1px solid #f0dca8;border-radius:5px;padding:0 5px;font-size:.72rem}
/* ===== trang đọc ===== */
body.reader{background:#fff}
#progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:40;background:transparent}#progress i{display:block;height:100%;width:0;background:#F5B83D}
.layout{display:grid;grid-template-columns:290px minmax(0,1fr);max-width:1180px;margin:0 auto}
#side{position:sticky;top:50px;align-self:start;max-height:calc(100vh - 56px);overflow:auto;padding:18px 14px 30px 18px;border-right:1px solid var(--line);font-size:.86rem}
#side .sidehead{font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);font-size:.78rem;margin-bottom:.6em}
#side ol.toc{list-style:none;margin:0;padding:0}#side .toc a{display:block;padding:5px 8px;border-radius:6px;color:#33475b;text-decoration:none;line-height:1.35}
#side .toc a:hover{background:#EEF3FA}#side .toc a.on{background:#E4ECF7;color:var(--primary);font-weight:700}
#side .allch{margin-top:1.2em}#side .allch ul{padding-left:16px}#side .allch a.cur{font-weight:700}
#content{padding:26px 36px 80px;font:19px/1.7 "Times New Roman",Times,"Liberation Serif",serif;color:#1b2430;max-width:860px}
#content *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#content img{-webkit-user-drag:none;pointer-events:none}
.ch-head{margin-bottom:1.2em;border-bottom:3px solid var(--primary);padding-bottom:.5em}
.ch-no{font:700 .9rem "Segoe UI",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--primary)}
#content h1{font:800 2rem/1.2 "Segoe UI",sans-serif;color:var(--navy);margin:.2em 0}
#content h2{font:700 1.45rem/1.3 "Segoe UI",sans-serif;color:var(--navy);margin:2em 0 .5em;padding-top:.4em;border-top:1px solid var(--line);scroll-margin-top:60px}
#content h3{font:700 1.15rem/1.35 "Segoe UI",sans-serif;color:#14395f;margin:1.6em 0 .4em;scroll-margin-top:60px}
#content h4{font:700 1rem "Segoe UI",sans-serif;font-style:italic;margin:1.3em 0 .3em;color:#33475b}
#content p{margin:.7em 0;text-align:justify;hyphens:auto}
#content ul{padding-left:1.4em}#content li{margin:.35em 0;text-align:justify}
#content sub,#content sup{line-height:0}
#content code{font:.88em Consolas,"Courier New",monospace;background:#F1F4F8;padding:0 .25em;border-radius:3px}
.obj{background:#F4F8FE;border-left:4px solid var(--primary);padding:.6em 1.1em;border-radius:0 8px 8px 0;margin:1em 0}.obj h4{margin:.2em 0}
figure{margin:1.4em 0}
figure.fig{text-align:center}figure.fig img{max-width:100%;height:auto;display:block;margin:0 auto}
figcaption{font:italic .92rem/1.4 "Segoe UI",sans-serif;color:#44566a;text-align:center;margin:.5em 0 0}
figure.tbl figcaption{margin:0 0 .5em}
figure.tbl .tw{overflow-x:auto}
figure.tbl table{border-collapse:collapse;margin:0 auto;font:.88rem/1.4 "Segoe UI",sans-serif}
figure.tbl th,figure.tbl td{border:1px solid #A9B6C6;padding:6px 9px;vertical-align:top;text-align:left}
figure.tbl th{background:#E4E9F2;text-align:center}
figure.code pre{margin:0;background:#F5F5F5;border:1px solid #CFCFCF;border-radius:6px;padding:12px 14px;overflow-x:auto;font:.84rem/1.45 Consolas,"Courier New",monospace}
figure.code code{background:none;padding:0}
.eq{display:flex;align-items:center;justify-content:center;gap:0;margin:1em 0;position:relative}
.eq img{display:block;max-width:calc(100% - 64px);width:auto;height:auto}.eq .eqn{position:absolute;right:0;font-size:1rem}
.callout{border-left:5px solid;border-radius:0 8px 8px 0;padding:.7em 1.1em;margin:1.3em 0;font:.95rem/1.55 "Segoe UI",sans-serif}
.callout .ct{font-weight:700;margin-bottom:.3em}.callout p{margin:.45em 0;text-align:left}
.callout.xanh-la{background:#EDF7F2;border-color:#1F6B4A}.callout.xanh-la .ct{color:#1F6B4A}
.callout.vang{background:#FFF8E8;border-color:#9A6206}.callout.vang .ct{color:#9A6206}
.callout.do{background:#FDF0F0;border-color:#B91C1C}.callout.do .ct{color:#B91C1C}
.callout.xanh-duong{background:#EFF3FB;border-color:#1F3864}.callout.xanh-duong .ct{color:#1F3864}
.callout.tim{background:#F1F3FF;border-color:#4338CA}.callout.tim .ct{color:#4338CA}
.pager{display:flex;justify-content:space-between;margin:3em 0 1em;font:600 1rem "Segoe UI",sans-serif}
.foot{font:.8rem "Segoe UI",sans-serif;color:var(--muted);text-align:center}
#wm{position:fixed;inset:0;z-index:50;pointer-events:none;background-repeat:repeat}
#shield{display:none;position:fixed;inset:0;z-index:60;background:#0B2540;color:#fff;place-items:center;font:700 1.4rem "Segoe UI",sans-serif}
#shield.on{display:grid}
@media(max-width:900px){.layout{display:block}#side{position:static;max-height:none;border:0;border-bottom:1px solid var(--line)}#side .toc{display:none}#content{padding:18px 16px 60px;font-size:17px}}
@media print{body{display:none!important}}

/* ô mật khẩu có nút hiện/ẩn */
.pwf{position:relative;display:block}
.authbox .pwf input{padding-right:2.9em}
.pwf .eye{position:absolute;right:4px;top:50%;transform:translateY(-38%);width:40px;height:40px;border:0;background:transparent;color:#5B6B7D;cursor:pointer;border-radius:8px;display:grid;place-items:center}
.pwf .eye:hover{color:var(--primary);background:#EEF3FA}
.pwf .eye .e-shut{display:none}.pwf .eye.on .e-open{display:none}.pwf .eye.on .e-shut{display:inline}

/* bìa giáo trình ở đầu trang chủ */
.cover-hero{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:28px;align-items:center;padding:20px}
.cover-hero .cover{width:100%;height:auto;border-radius:6px;box-shadow:0 10px 30px rgba(11,37,64,.35);pointer-events:none;-webkit-user-drag:none;user-select:none}
.cover-hero .hello h1{font-size:1.7rem}
@media(max-width:700px){.cover-hero{grid-template-columns:1fr;justify-items:center;text-align:center}.cover-hero .cover{width:min(78%,320px)}}

/* chương chưa mở: mờ đi, không bấm được */
.card.closed{opacity:.5;background:#F1F4F8;cursor:default}
.card.closed:hover{border-color:var(--line);box-shadow:none}
.card.closed .meta.upd{font-weight:600;color:#6B7A8C;font-style:italic}
#side .allch li.soon{color:#8794A3;font-size:.85rem;padding:3px 0}
.pager .soon{color:#8794A3;font-weight:400;font-style:italic}
.openbox{background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 16px 14px;margin:6px 0 16px}
.openbox .chk{display:flex;flex-wrap:wrap;gap:8px 18px;margin:8px 0 12px}.openbox .chk label{font-size:.92rem}
.openbox .note{display:block;margin-top:8px}

body.reader.adm #content *{user-select:text;-webkit-user-select:text}
body.reader.adm #content img{pointer-events:auto}

/* bài tập tính toán: ô điền đáp số */
.bt{border:1px solid var(--line);border-left:5px solid var(--primary);border-radius:8px;background:#F7FAFE;padding:10px 16px 14px;margin:.4em 0 1.4em;font:.95rem/1.5 "Segoe UI",sans-serif}
.bt-h{font-weight:700;color:var(--primary);margin-bottom:6px}
.bt label{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:6px 0}
.bt .l{flex:1 1 220px}
.bt input,.bt select{font:inherit;padding:6px 9px;border:1px solid #AEBBCB;border-radius:6px;background:#fff;min-width:0}
.bt input{width:9em}.bt select{max-width:100%}
.bt .u{color:var(--muted);min-width:3.5em}
.bt .mk{width:1.4em;font-weight:700;text-align:center}
.bt label.ok input,.bt label.ok select{background:#EDF7F2;border-color:#1F6B4A}
.bt label.ok .mk::before{content:"✓";color:#1F6B4A}
.bt label.no input,.bt label.no select{background:#FDF0F0;border-color:#B91C1C}
.bt label.no .mk::before{content:"✗";color:#B91C1C}
.bt-note{font:italic .88rem/1.45 "Segoe UI",sans-serif;color:var(--muted);text-align:left;margin:.4em 0}
.bt-act{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.bt-msg.good{color:#1F6B4A;font-weight:600}.bt-msg.bad{color:#B91C1C;font-weight:600}

/* chế độ nghe */
.nghe-btn{display:inline-flex;align-items:center;gap:7px;margin-left:12px;vertical-align:middle;font:600 .78rem "Segoe UI",sans-serif;color:var(--primary);background:#EEF3FA;border:1px solid #C9D6E8;border-radius:999px;padding:4px 12px;cursor:pointer;user-select:none;-webkit-user-select:none}
.nghe-btn:hover{background:#E1EBF8}
.nghe-btn .ic{width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.nghe-btn.on .ic{width:9px;height:11px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor}
.nghe-top{margin:14px 0 6px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.nghe-top .nghe-btn{margin:0;font-size:.9rem;padding:7px 16px}
.nghe-top small{color:var(--muted);font:.8rem "Segoe UI",sans-serif}
.dang-doc{background:#FFF6D6;box-shadow:-6px 0 0 #FFF6D6,6px 0 0 #FFF6D6;border-radius:3px;transition:background .2s}
#nghe{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;align-items:center;gap:10px;background:#0B2540;color:#fff;padding:8px 16px;font:.85rem "Segoe UI",sans-serif;box-shadow:0 -4px 16px rgba(11,37,64,.3)}
#nghe[hidden]{display:none}
#nghe button,#nghe select{font:inherit;color:#fff;background:#1F3C63;border:1px solid #35557F;border-radius:6px;padding:5px 9px;cursor:pointer}
#nghe .n-play{width:40px;height:36px;border-radius:50%;position:relative;padding:0}
#nghe .n-play::before{content:"";position:absolute;left:15px;top:10px;border-left:12px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
#nghe .n-play.on::before{left:13px;top:10px;width:4px;height:14px;border:0;border-left:4px solid #fff;border-right:4px solid #fff;box-sizing:content-box}
#nghe .n-mid{flex:1;min-width:0}
#nghe .n-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
#nghe .n-seek{width:100%;accent-color:#F5B301}
#nghe .n-time{min-width:5.6em;text-align:right;font-variant-numeric:tabular-nums}
#nghe .n-follow{white-space:nowrap}
body.co-nghe{padding-bottom:64px}
@media(max-width:700px){#nghe{flex-wrap:wrap;gap:6px}#nghe .n-mid{flex:1 0 100%;order:-1}#nghe .n-follow{display:none}}

/* menu tự ẩn khi cuộn xuống; chế độ tập trung */
.reader .topbar{transition:transform .25s ease}
body.bar-an .topbar{transform:translateY(-100%)}
body.bar-an #side{top:6px;max-height:calc(100vh - 12px)}
body.tap-trung .topbar,body.tap-trung #side{display:none}
body.tap-trung .layout{display:block;max-width:860px}
body.tap-trung #content{margin:0 auto}
#nghe .n-nen{white-space:nowrap}
#nghe .n-vol{width:70px;accent-color:#F5B301}
#nghe .n-tt{padding:5px 8px}
@media(max-width:700px){#nghe .n-nen{order:5}#nghe .n-vol{order:5;width:60px}}