/* Sách lật online — khung đọc. Tờ A5 là của Bàn in (assets/ban_in.css); file này chỉ lo khung, nút, mục lục, ổ khoá. */
:root{--navy:#1a1f4d;--blue:#0040BE;--yellow:#F7C800;--orange:#FF7800;--bg:#dfe5f4;--ink:#1d2233;--mut:#5d6479;--line:#cfd6ea}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);font-family:'Be Vietnam Pro',system-ui,sans-serif;color:var(--ink);-webkit-text-size-adjust:100%}
body{display:flex;flex-direction:column}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer}

/* ổ khoá */
#khoa{flex:1;display:grid;place-items:center;padding:16px}
.khoa-card{width:min(420px,100%);background:#fff;border-radius:18px;padding:28px 24px 24px;box-shadow:0 10px 40px rgba(26,31,77,.14);text-align:center}
.khoa-ic{width:54px;height:54px;border-radius:50%;background:var(--navy);color:var(--yellow);display:grid;place-items:center;margin:0 auto 12px;font-size:24px}
.khoa-card h1{margin:0 0 4px;font-size:20px;color:var(--navy)}
.khoa-card p{margin:0 0 16px;font-size:14px;color:var(--mut);line-height:1.5}
.khoa-hang{display:flex;gap:8px}
.khoa-hang input{flex:1;min-width:0;font:700 17px/1 'Be Vietnam Pro',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:13px 10px;border:2px solid var(--line);border-radius:12px;outline:none}
.khoa-hang input:focus{border-color:var(--blue)}
.khoa-hang button{border:0;border-radius:12px;background:var(--blue);color:#fff;font-weight:800;padding:0 18px}
.khoa-hang button:disabled{opacity:.5}
#khoaBao{min-height:20px;margin-top:10px;font-size:13px;color:#c0262d}
#khoaBao.doi{color:var(--mut)}

/* khung đọc */
#app{flex:1;display:flex;flex-direction:column;min-height:0}
.bar{flex:none;display:flex;align-items:center;gap:10px;padding:8px max(14px,env(safe-area-inset-left));background:var(--navy);color:#fff}
.bar .ttl{font-weight:800;font-size:14px;letter-spacing:.02em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .pgn{font-weight:700;font-size:12.5px;color:#c9cfee;white-space:nowrap}
.bar button,.bar a{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:99px;padding:7px 13px;background:rgba(255,255,255,.14);color:#fff;font-weight:700;font-size:13px;text-decoration:none}
.bar button:hover,.bar a:hover{background:rgba(255,255,255,.26)}
.bar svg{width:15px;height:15px}
#stage{flex:1;position:relative;min-height:0;display:grid;place-items:center;overflow:hidden;touch-action:pan-y pinch-zoom}
#book{position:relative;width:calc(var(--pw)*2);height:var(--ph);perspective:2600px;transition:transform .6s cubic-bezier(.45,.05,.25,1)}
#book.solo{transform:translateX(calc(var(--pw)/-2))}
#book.solo-fin{transform:translateX(calc(var(--pw)/2))}
#book.uno{width:var(--pw)}
.slot{position:absolute;top:0;width:var(--pw);height:var(--ph)}
.slot.L{left:0}
.slot.R{left:var(--pw)}
#book.uno .slot.R{left:0}
.pgbox{position:relative;width:var(--pw);height:var(--ph);overflow:hidden;background:#fff}
.pgbox>.sheet{position:absolute;left:0;top:0;margin:0;transform:scale(var(--k));transform-origin:0 0;box-shadow:none}
#book .pgbox.trong{background:transparent;box-shadow:none!important}
#book:not(.uno) .slot.L .pgbox{box-shadow:-6px 8px 26px rgba(26,31,77,.22);border-radius:3px 0 0 3px}
#book:not(.uno) .slot.R .pgbox{box-shadow:6px 8px 26px rgba(26,31,77,.22);border-radius:0 3px 3px 0}
#book.uno .slot.R .pgbox{box-shadow:0 8px 28px rgba(26,31,77,.22);border-radius:3px}
#book:not(.uno)::after{content:"";position:absolute;left:calc(var(--pw) - 1px);top:0;bottom:0;width:2px;background:linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,.02));pointer-events:none;z-index:5}
.flip{position:absolute;top:0;width:var(--pw);height:var(--ph);transform-style:preserve-3d;z-index:6;transition:transform .7s cubic-bezier(.45,.05,.25,1)}
.flip.fwd{left:var(--pw);transform-origin:left center}
.flip.fwd.go{transform:rotateY(-180deg)}
.flip.bwd{left:0;transform-origin:right center}
.flip.bwd.go{transform:rotateY(180deg)}
.flip .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.flip .face.back{transform:rotateY(180deg)}
.flip .face::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.16),rgba(0,0,0,0) 28%);opacity:0;transition:opacity .7s}
.flip.fwd.go .face.front::after{opacity:1;background:linear-gradient(270deg,rgba(0,0,0,.2),rgba(0,0,0,0) 40%)}
.flip.bwd .face::after{background:linear-gradient(270deg,rgba(0,0,0,.16),rgba(0,0,0,0) 28%)}
.nav{position:absolute;top:50%;transform:translateY(-50%);z-index:8;width:44px;height:44px;border-radius:50%;border:0;background:rgba(26,31,77,.82);color:#fff;display:grid;place-items:center;box-shadow:0 4px 14px rgba(26,31,77,.3)}
.nav:hover{background:var(--blue)}
.nav:disabled{opacity:.25;cursor:default}
.nav svg{width:20px;height:20px}
.nav.prev{left:max(10px,env(safe-area-inset-left))}
.nav.next{right:max(10px,env(safe-area-inset-right))}
.foot{flex:none;display:flex;align-items:center;gap:12px;padding:8px max(16px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line)}
.foot input[type=range]{flex:1;min-width:0;accent-color:var(--blue)}
.foot .nhan{font-weight:700;font-size:12.5px;color:var(--mut);white-space:nowrap;min-width:92px;text-align:right}

/* nút Làm bài trên từng câu */
.qh .lam{margin-left:auto;display:inline-flex;align-items:center;gap:1mm;font:700 6.6pt/1 'Be Vietnam Pro',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--on);background:var(--c);border-radius:99px;padding:1.2mm 2.6mm;opacity:.92}
.qh .lam:hover{opacity:1}
[data-goto]{cursor:pointer}

/* mục lục kéo ra */
#muc{position:fixed;top:0;bottom:0;left:0;width:min(400px,92vw);z-index:30;background:#fff;box-shadow:8px 0 40px rgba(26,31,77,.28);transform:translateX(-102%);transition:transform .28s ease;display:flex;flex-direction:column}
#muc.mo{transform:none}
#mucNen{position:fixed;inset:0;z-index:29;background:rgba(26,31,77,.4);opacity:0;pointer-events:none;transition:opacity .28s}
#mucNen.mo{opacity:1;pointer-events:auto}
#muc header{flex:none;display:flex;align-items:center;gap:8px;padding:14px 16px;background:var(--navy);color:#fff}
#muc header b{flex:1;font-size:15px}
#muc header button{border:0;background:rgba(255,255,255,.16);color:#fff;border-radius:50%;width:32px;height:32px;font-size:18px}
#mucThan{flex:1;overflow:auto;padding:12px 16px 24px}
.mc-muc{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;padding:9px 6px;border-radius:10px;color:var(--ink);font-weight:600;font-size:14px}
.mc-muc:hover{background:#eef2fc}
.mc-muc em{margin-left:auto;font-style:normal;font-weight:800;font-size:12px;color:var(--mut)}
.mc-ch{margin:14px 0 4px;padding:12px 12px 10px;border-radius:14px;background:#f3f6fd;border:1px solid var(--line)}
.mc-ch h3{margin:0 0 2px;font-size:14px;color:var(--navy);display:flex;gap:8px;align-items:baseline}
.mc-ch h3 b{flex:none;background:var(--navy);color:var(--yellow);border-radius:8px;padding:2px 8px;font-size:12px}
.mc-ch .go{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.mc-ch .go button{border:1px solid var(--line);background:#fff;border-radius:99px;padding:5px 11px;font-weight:700;font-size:12px;color:var(--navy)}
.mc-ch .go button:hover{border-color:var(--blue);color:var(--blue)}
.mc-ch .cau{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.mc-ch .cau button{width:32px;height:28px;border:0;border-radius:8px;font-weight:800;font-size:12px;color:#fff;background:var(--blue)}
.mc-ch .cau button.p2{background:var(--yellow);color:var(--navy)}
.mc-ch .cau button.p3{background:var(--orange)}
.mc-ch .cau button.hien{outline:3px solid var(--navy);outline-offset:1px}

/* bìa và mục lục (trang 1, 2) — dựng bằng dung_sach.py, ăn theo biến màu của Bàn in */
.sheet.cover{padding:0;background:var(--navy)}
.cv{position:absolute;inset:0;overflow:hidden;color:#fff;font-family:var(--hf)}
.cv .dc{position:absolute;border-radius:50%}
.cv .dc.a{width:132mm;height:132mm;right:-42mm;top:-26mm;background:var(--c1)}
.cv .dc.b{width:62mm;height:62mm;left:-20mm;bottom:78mm;background:#1E85EB;opacity:.4}
.cv .br{position:absolute;left:12mm;top:11mm;z-index:3;display:flex;align-items:center;gap:2.6mm;font:800 9pt var(--hf)}
.cv .br img{height:9mm;width:auto;background:#fff;border-radius:2mm;padding:1mm 1.8mm}
.cv .tt{position:absolute;left:12mm;right:12mm;bottom:20mm;z-index:2}
.cv .tt small{display:block;font:800 8.5pt var(--hf);letter-spacing:.34em;text-transform:uppercase;color:var(--y);margin-bottom:4mm}
.cv h1{margin:0 0 5mm;font:800 40pt/1.02 var(--hf);letter-spacing:-.01em;color:#fff}
.cv .tt p{margin:0;max-width:82mm;text-align:left;font:500 10pt/1.5 var(--hf);color:#d5d9f5}
.cv .mas{position:absolute;right:-6mm;top:30mm;width:118mm;height:auto;z-index:1}
.mucluc .mlh{font:800 22pt/1 var(--hf);color:var(--navy);margin:6mm 0 6mm}
.ml-ch{display:grid;grid-template-columns:auto 1fr auto;gap:4mm;align-items:start;padding:4mm;margin:0 0 4mm;border-radius:3mm;background:var(--c1t);border:.7pt solid var(--c1p)}
.ml-ch>b{background:var(--navy);color:var(--y);font:800 15pt/1 var(--hf);width:11mm;height:11mm;border-radius:2.6mm;display:grid;place-items:center}
.ml-ch h3{margin:0 0 1mm;font:800 10.5pt/1.25 var(--hf);color:var(--navy)}
.ml-ch p{margin:0 0 2.2mm;text-align:left;font:500 8pt/1.45 var(--hf);color:var(--mut)}
.ml-p{display:flex;flex-wrap:wrap;gap:1.6mm}
.ml-p span{font:700 6.8pt var(--hf);color:var(--c1d);background:#fff;border:.7pt solid var(--c1p);border-radius:99px;padding:1mm 2.6mm}
.ml-p span.dp{background:var(--gt);color:var(--gd);border-color:#b7e5c9}
.ml-ch>em{font:800 10pt var(--hf);font-style:normal;color:var(--mut)}
.ml-note{margin:6mm 0 0;font:500 7.6pt/1.5 var(--hf);color:var(--mut);text-align:left}

@media (max-width:640px){
  .bar .ttl{display:none}.bar .pgn{margin-left:auto}
  .nav{width:38px;height:38px}
  .foot .nhan{min-width:74px}
}
@media print{#app{display:none}}

:root{--navy:#1a1f4d;--hf:'Unbounded','Manrope',sans-serif;--c1:#0040BE;--c1t:#E8EEFB;--c1p:#B9CBEF;--c1d:#003B99;--y:#F7C800}.cv .mas{width:82mm;top:14mm;right:-4mm}.cv h1{font-size:37pt}.cv .tt{bottom:17mm}.cv .tt small{font-size:8pt}.bar a{white-space:nowrap}.sheet.cover .cv .br{font-family:'Manrope',sans-serif}.pgbox .mc li{cursor:default;border-color:transparent}.pgbox .response{min-height:8mm}.pgbox .q{position:relative}.pgbox .q .qh{width:100%;display:block}.pgbox .q .qh .lam{position:absolute;right:4mm;top:1mm;z-index:2;background:var(--c);padding:1mm 2mm;font-size:5.2pt}.cv .tt p{font-family:'Manrope',sans-serif}@media(max-width:640px){.bar a[aria-label="Về thư viện"]{display:none}.bar button,.bar a{min-height:30px}.bar #lamTrang{background:#0040BE}}.formhead{background:#0040BE;color:white;border-radius:3mm;padding:4mm 5mm;margin-bottom:4mm;font-family:Manrope,sans-serif}.formhead small{font-size:8pt;display:block}.formhead h2{font-size:15pt;line-height:1.3;margin:1.5mm 0}.formhead p{font-size:7.5pt;margin:1mm 0 0}.q .formname{display:none}.part .nm,.solp .nm{font-size:12pt!important}.part .no,.solp .no{font-size:9pt!important}
.cv h1{font-size:32pt}.cv .tt p{max-width:90mm}.ml-ch{padding:2.5mm 0!important}.ml-ch h3{font-size:10pt!important}.ml-ch p{font-size:7pt!important}.ml-ch>b{font-size:14pt!important}.ml-note{font-size:7pt!important}.bar #khoaLai{font:600 12px Manrope,sans-serif}.khoa-card h1{font:800 26px/1.3 Manrope,sans-serif}.khoa-card p{font:500 15px/1.6 Manrope,sans-serif}.khoa-hang input{font-family:Manrope,sans-serif;text-transform:none}.khoa-card a{color:#0040BE}.khoa-hang button{font-family:Manrope,sans-serif}@media(max-width:640px){.bar .ttl{display:none}.bar #khoaLai{padding:5px 8px}.khoa-hang{flex-wrap:wrap}.khoa-hang input{min-width:0;width:100%}.khoa-hang button{width:100%}}

.khoa-card h1,.khoa-card p,.khoa-card a,.khoa-hang input,.khoa-hang button{font-family:system-ui,sans-serif!important}