/* ===== v3: công cụ (tìm kiếm, sáng/tối, cỡ chữ), truy cập, in ấn ===== */
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:#fff;color:#000;padding:8px 14px;border-radius:8px}.skip:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid #ffb703;outline-offset:2px;border-radius:6px}
.topbar .search{position:relative;margin-left:auto;flex:0 1 380px;min-width:0}
.search input{width:100%;padding:9px 14px 9px 38px;border-radius:99px;border:none;background:rgba(255,255,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 12px center;color:#fff;font:14px var(--sans)}
.search input::placeholder{color:rgba(255,255,255,.75)}.search input:focus{background-color:rgba(255,255,255,.28);outline:2px solid #ffd166}
.sr{position:absolute;top:calc(100% + 8px);left:0;right:0;max-height:70vh;overflow:auto;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.25);padding:6px;z-index:80}
.sr a{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:10px;color:var(--ink)}.sr a:hover,.sr a.on{background:var(--blue-l);text-decoration:none}.sr small{margin-left:auto;color:var(--mut);white-space:nowrap}.sr b{font-weight:600}.sr .k{flex:none;font:700 11px var(--sans);padding:2px 8px;border-radius:99px;background:var(--red-l);color:var(--red)}.sr .none{padding:14px;color:var(--mut)}
.icon-btn{flex:none;width:40px;height:40px;border-radius:12px;border:none;background:rgba(255,255,255,.18);color:#fff;font-size:18px;cursor:pointer;display:grid;place-items:center}.icon-btn:hover{background:rgba(255,255,255,.3)}
/* tiếp tục học */
.resume{display:flex;align-items:center;gap:14px;margin:16px 0 0;padding:14px 18px;border-radius:18px;background:var(--paper);border:1px solid var(--line);border-left:6px solid var(--red);box-shadow:var(--sh);color:var(--ink)}.resume:hover{text-decoration:none;border-color:var(--red)}
.resume small{display:block;color:var(--mut);font:700 11px var(--sans);letter-spacing:.14em}.resume b{font:700 18px var(--disp)}.resume .go{margin-left:auto;font-weight:700;color:var(--red)}
/* đọc: tiến độ + cỡ chữ */
.rd-prog{position:fixed;left:0;top:0;height:4px;width:100%;z-index:90;background:transparent;pointer-events:none}.rd-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd166,#e8532b);transition:width .1s}
.rd-tools{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:8px;font:13px var(--sans);color:var(--mut)}
.rd-tools button{width:34px;height:34px;border-radius:9px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;font-weight:700}.rd-tools button:hover{border-color:var(--blue)}
.reader{--fs:18px}.reader .rd-p{font-size:var(--fs)}.reader .poem{font-size:calc(var(--fs) + 1px)}
.rd-count{font:600 13px var(--sans)}
.more{display:block;margin:14px auto;min-width:200px}
/* sáng/tối */
:root[data-theme="dark"] .reader{background-color:#1c2033;background-image:linear-gradient(90deg,rgba(0,0,0,.3),transparent 28px)}
:root[data-theme="dark"] .n-warn{background:#3d3210!important;color:#ffe9a8}
:root[data-theme="dark"] .tok.sel{color:#222}
:root[data-theme="dark"] .goal{background:#2f1c17}
:root[data-theme="dark"] .ucard,:root[data-theme="dark"] .unit-hd{filter:saturate(.9) brightness(.92)}
:root[data-theme="dark"] .page-t{background:linear-gradient(transparent 62%,rgba(255,209,102,.3) 62%)}
:root[data-theme="dark"] body{background-image:none}
/* mobile */
@media(max-width:900px){.topbar .brand-tx small{display:none}.topbar .search{flex:1}.brand-tx b{font-size:16px}}
@media(max-width:560px){.brand-tx{display:none}.rd-tools{flex-wrap:wrap}}
/* in ấn */
@media print{.topbar,.side,.tabbar,.foot,.ex-actions,.rd-tools,.rd-prog,.skip,.hint-box button,.btn{display:none!important}body{background:#fff;color:#000}.reader{box-shadow:none;border:none;max-width:none}.main>*{animation:none}.prompt{break-inside:avoid;box-shadow:none}.hint-box[hidden]{display:none}}
/* tối: giữ nền thương hiệu đậm cho các mảng có chữ trắng */
:root[data-theme="dark"] .topbar{background:linear-gradient(90deg,#222a63,#35418a)}
:root[data-theme="dark"] .side a.active{background:linear-gradient(120deg,#35418a,#4b5bb0)}
:root[data-theme="dark"] .chips .on,:root[data-theme="dark"] .ord-n,:root[data-theme="dark"] .tbl th,:root[data-theme="dark"] .opt-k{background:#4b5bb0;color:#fff}
:root[data-theme="dark"] .hero{background:linear-gradient(135deg,#1d2260,#35418a)}
:root[data-theme="dark"] .chip.sel,:root[data-theme="dark"] .steps li.on b{color:#fff}
:root[data-theme="dark"] .chip.sel{background:#4b5bb0}
:root[data-theme="dark"] .lv .on{color:#fff}
:root[data-theme="dark"] .m-item.sel{box-shadow:0 0 0 3px rgba(232,83,43,.35)}
:root[data-theme="dark"] .hint-box,:root[data-theme="dark"] .ex-fb blockquote{background:#242a52}
