html{font-size:clamp(16px, 0.45vw + 10.4px, 26px)}
body{padding:0; font-size:.92rem;}
.layout{display:flex; min-height:100vh;}
.sidebar{width:19rem; position:fixed; inset:0 auto 0 0; z-index:60; overflow-y:auto;
  background:linear-gradient(180deg,#F8F1E0,#F4ECD8); border-right:1px solid #D6C8A8;
  padding:1rem .8rem 2rem; transition:transform .25s ease;}
.sidebar .sb-brand{display:block; text-decoration:none; color:#2E2A22; padding:.4rem .5rem .8rem;
  border-bottom:2px solid #C7553A; margin-bottom:.7rem;}
.sidebar .sb-brand .t1{font-family:"Noto Serif JP",serif; font-weight:900; font-size:1rem; color:#C7553A;}
.sidebar .sb-brand .t2{font-size:.7rem; color:#6B6354; letter-spacing:.06em;}
.sb-home{display:block; padding:.45rem .55rem; border-radius:.6rem; text-decoration:none;
  color:#2E2A22; font-size:.8rem; border:1px solid transparent; margin-bottom:.3rem;}
.sb-home:hover{background:#FBF6E9; border-color:#D6C8A8;}
.sb-home.active{background:#C7553A;color:#fff;}
details.sb-group{margin:.25rem 0; border-radius:.7rem; overflow:hidden; border:1px solid #E6DCC2; background:#FBF6E9;}
details.sb-group summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:.5rem;
  padding:.55rem .6rem; font-weight:700; font-size:.78rem; color:#fff;}
details.sb-group summary::-webkit-details-marker{display:none;}
details.sb-group summary .gjp{font-family:"Noto Serif JP",serif; font-size:.85rem;}
details.sb-group summary .gpct{margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:.64rem; opacity:.85;}
.sb-item{display:flex; align-items:center; gap:.45rem; padding:.42rem .6rem .42rem .8rem;
  text-decoration:none; color:#2E2A22; font-size:.74rem; line-height:1.35; border-left:3px solid transparent;}
.sb-item:hover{background:#F4ECD8;}
.sb-item.active{background:#EDE2CC; border-left-color:#C7553A; font-weight:600;}
.sb-item .sb-pct{margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:.62rem; color:#8A6D3B;}
.main-wrap{margin-left:19rem; flex:1; min-width:0; padding:0 1rem 3rem;}
.page-shell{margin-top:1rem;}
.topbar{position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:.55rem;
  background:rgba(251,246,233,.92); backdrop-filter:blur(8px); border-bottom:1px solid #D6C8A8;
  padding:.55rem .9rem; margin:0 -1rem;}
.topbar .tb-title{font-family:"Noto Serif JP",serif; font-weight:700; color:#A8432C; font-size:.82rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tb-spacer{flex:1;}
.tb-btn{border:1px solid #D6C8A8; background:#FBF6E9; color:#2E2A22; border-radius:.55rem;
  padding:.3rem .55rem; cursor:pointer; font-size:.76rem; line-height:1; font-family:inherit;}
.tb-btn:hover{border-color:#C7553A; color:#C7553A;}
.tb-prog{font-family:"JetBrains Mono",monospace; font-size:.66rem; color:#6B6354; white-space:nowrap;}
.tb-prog b{color:#C7553A;}
.tb-search{position:relative;}
.tb-search input{border:1px solid #D6C8A8; background:#fff; border-radius:.55rem;
  padding:.34rem .6rem; font-size:.76rem; width:12rem; color:#2E2A22; font-family:inherit;}
.tb-search input:focus{outline:2px solid #D9A441;}
.search-pop{position:absolute; top:110%; right:0; width:24rem; max-width:80vw; max-height:60vh; overflow-y:auto;
  background:#FBF6E9; border:1px solid #D6C8A8; border-radius:.8rem;
  box-shadow:0 18px 40px rgba(46,42,34,.18); display:none; padding:.4rem;}
.search-pop.show{display:block;}
.search-pop a{display:block; padding:.45rem .6rem; border-radius:.5rem; text-decoration:none; color:#2E2A22; font-size:.76rem;}
.search-pop a:hover{background:#F4ECD8;}
.search-pop a .sk{display:inline-block; font-size:.6rem; color:#fff; background:#B89568; border-radius:.4rem;
  padding:.05rem .4rem; margin-right:.4rem; vertical-align:middle;}
.search-pop .nores{padding:.6rem; color:#6B6354; font-size:.73rem;}
.tb-menu{display:none;}
.sb-overlay{display:none;}
@media (max-width:1100px){
  .sidebar{transform:translateX(-105%);}
  .sidebar.open{transform:none; box-shadow:0 0 60px rgba(0,0,0,.3);}
  .main-wrap{margin-left:0;}
  .tb-menu{display:inline-block;}
  .sb-overlay.show{display:block; position:fixed; inset:0; background:rgba(46,42,34,.35); z-index:55;}
  .tb-search input{width:8rem;}
}
/* ===== quiz trắc nghiệm ===== */
li.quiz-q .options span{cursor:pointer; border:1.5px solid #D6C8A8; border-radius:.55rem;
  padding:.22rem .55rem; margin:.15rem .25rem .15rem 0; display:inline-block; transition:all .12s ease; background:#FBF6E9;}
li.quiz-q .options span:hover{border-color:#C7553A;}
li.quiz-q .options span.sel-right{background:#4A6741; border-color:#4A6741; color:#fff; font-weight:700;}
li.quiz-q .options span.sel-wrong{background:#B13E3E; border-color:#B13E3E; color:#fff;}
li.quiz-q .options span.reveal-right{outline:2px dashed #4A6741;}
li.quiz-q .q-state{font-size:.7rem; margin-left:.4rem; font-weight:700;}
li.quiz-q .q-state.ok{color:#4A6741;} li.quiz-q .q-state.no{color:#B13E3E;}
/* đề thi thật + câu luyện AI */
.q-year{display:inline-block; background:#1B3A6B; color:#fff; border-radius:.45rem;
  padding:.08rem .5rem; font-size:.62rem; font-family:"JetBrains Mono",monospace;
  vertical-align:middle; margin-right:.35rem; white-space:nowrap;}
.q-year.q-ai{background:#8A6D3B;}
.q-fig{color:#B89568; font-size:.72rem;}
.q-expl{display:none; margin:.5rem 0 .2rem; padding:.5rem .8rem; border-left:3px solid #D9A441;
  background:#F8F1E0; border-radius:0 .5rem .5rem 0; font-size:.76rem; color:#6B6354; line-height:1.6;}
li.quiz-q.answered .q-expl{display:block;}
.dethi-block h4{background:linear-gradient(90deg,#1B3A6B,#3E7C82) !important;}
.luyen-block h4{background:linear-gradient(90deg,#8A6D3B,#B89568) !important;}
html.dark .q-expl{background:#2B2619; color:#B5AA92;}
/* đã học */
.doc-done{margin:1.2rem 0 .4rem; text-align:right;}
.doc-done button{border:1.5px solid #B89568; background:#FBF6E9; color:#8A6D3B; border-radius:.6rem;
  padding:.42rem .9rem; cursor:pointer; font-size:.76rem; font-family:inherit;}
.doc-done button.done{background:#4A6741; border-color:#4A6741; color:#fff;}
/* FAB */
.fab-wrap{position:fixed; right:1rem; bottom:1.1rem; z-index:70; display:flex; flex-direction:column; gap:.5rem;}
.fab{width:2.7rem; height:2.7rem; border-radius:50%; border:none; cursor:pointer; font-size:1.05rem;
  background:#C7553A; color:#fff; box-shadow:0 10px 24px rgba(46,42,34,.3);
  display:flex; align-items:center; justify-content:center; text-decoration:none;}
.fab.alt{background:#B89568;}
.fab:hover{filter:brightness(1.08);}
/* pager */
.pager{display:flex; gap:.8rem; margin:2rem 0 0;}
.pager a{flex:1; text-decoration:none; border:1.5px solid #D6C8A8; border-radius:.9rem;
  padding:.8rem 1rem; color:#2E2A22; background:#FBF6E9;}
.pager a:hover{border-color:#C7553A;}
.pager .dir{font-size:.66rem; color:#B89568; letter-spacing:.1em; text-transform:uppercase;}
.pager .pt{font-weight:600; font-size:.82rem; color:#A8432C;}
.pager a.next{text-align:right;}
/* nguyên văn sách (bản JA) */
.genbun{background:var(--paper,#FBF6E9); border:1px solid #D6C8A8; border-radius:1rem;
  padding:1.2rem 1.4rem; margin:1rem 0; line-height:1.95;}
.genbun .gb-page{display:inline-block; background:#B89568; color:#fff; border-radius:.5rem;
  padding:.15rem .6rem; font-size:.66rem; font-family:"JetBrains Mono",monospace; margin-bottom:.6rem;}
.genbun h3{font-family:"Noto Serif JP",serif; color:#A8432C; border-bottom:2px solid #D9A441;
  padding-bottom:.3rem; margin:1rem 0 .6rem;}
.genbun h4{color:#8A6D3B; margin:.8rem 0 .3rem;}
.genbun .fig-note{color:#6B6354; font-style:italic; font-size:.8rem;}
.genbun-note{margin:.8rem 0; padding:.6rem .9rem; border-left:4px solid #D9A441;
  background:#F8F1E0; border-radius:0 .6rem .6rem 0; font-size:.76rem; color:#6B6354;}
html.dark .genbun{background:#262217; border-color:#4A4234; color:#E2D8C2;}
html.dark .genbun-note{background:#2B2619; color:#B5AA92;}
/* gallery biểu đồ */
.bd-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)); gap:1rem; padding:1rem;}
.bd-item{margin:0; background:#fff; border:1px solid #E6DCC2; border-radius:.8rem; overflow:hidden;}
.bd-item img{width:100%; display:block; cursor:zoom-in;}
.bd-item figcaption{padding:.5rem .7rem; font-size:.7rem; color:#6B6354; line-height:1.5;}
.bd-zoom{position:fixed; inset:0; z-index:90; background:rgba(20,17,12,.9); display:none;
  align-items:center; justify-content:center; cursor:zoom-out; padding:2rem;}
.bd-zoom.show{display:flex;}
.bd-zoom img{max-width:96%; max-height:92vh; border-radius:.5rem; box-shadow:0 30px 80px rgba(0,0,0,.5);}
/* ===== index ===== */
.cover-part{border-radius:1.1rem; overflow:hidden; border:1px solid #D6C8A8; margin:1rem 0; background:#FBF6E9;}
.cover-part .cp-head{display:flex; align-items:center; gap:.8rem; padding:.9rem 1.2rem; color:#fff;}
.cover-part .cp-head .cjp{font-family:"Noto Serif JP",serif; font-weight:900; font-size:1.4rem;}
.cover-part .cp-head h3{margin:0; font-size:1rem; font-family:"Noto Serif JP",serif;}
.cover-part .cp-head .cp-pct{margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:.72rem;}
.cover-part .cp-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)); gap:.4rem; padding:.8rem 1rem 1rem;}
.cover-part .cp-list a{display:flex; gap:.5rem; align-items:center; text-decoration:none; color:#2E2A22;
  font-size:.76rem; padding:.45rem .6rem; border-radius:.55rem; border:1px solid transparent; line-height:1.4;}
.cover-part .cp-list a:hover{background:#F4ECD8; border-color:#D6C8A8;}
.cover-part .cp-list .cpct{margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:.62rem; color:#8A6D3B;}
.cover-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); gap:.8rem; margin:1.2rem 0 0;}
.cover-stats .st{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  border-radius:.9rem; padding:.7rem .5rem; text-align:center;}
.cover-stats .st b{display:block; font-family:"Cormorant Garamond",serif; font-size:1.6rem; line-height:1.1; color:#F2D9A8;}
.cover-stats .st span{font-size:.64rem; letter-spacing:.06em; color:#F7E6C4;}
.continue-box{margin:1.3rem 0 0; text-align:center;}
.continue-box a{display:inline-block; background:linear-gradient(90deg,#C7553A,#D9A441); color:#fff;
  text-decoration:none; font-weight:700; border-radius:99px; padding:.7rem 1.8rem; font-size:.86rem;
  box-shadow:0 12px 28px rgba(199,85,58,.35);}
/* ===== DARK ===== */
html.dark{--paper:#211D15; --paper-2:#262217; --surface:#2B2619; --surface-2:#332D1E;
  --ink:#EDE4D0; --muted:#B5AA92; --line:#4A4234; --line-2:#3A3428; --callout:#262217;}
html.dark body{background:linear-gradient(180deg,#1A1712,#14110C); color:#EDE4D0;}
html.dark .page-shell{background:#211D15; border-color:#3A3428;}
html.dark .topbar{background:rgba(26,23,18,.92); border-color:#3A3428;}
html.dark .tb-btn,html.dark .tb-search input{background:#2B2619; color:#EDE4D0; border-color:#4A4234;}
html.dark .topbar .tb-title{color:#D9A441;}
html.dark .sidebar{background:linear-gradient(180deg,#211D15,#1A1712); border-color:#3A3428;}
html.dark .sb-home,html.dark .sb-item{color:#EDE4D0;}
html.dark .sb-item:hover{background:#2B2619;}
html.dark .sb-item.active{background:#332D1E;}
html.dark details.sb-group{background:#262217; border-color:#3A3428;}
html.dark .search-pop{background:#211D15; border-color:#4A4234;}
html.dark .search-pop a{color:#EDE4D0;} html.dark .search-pop a:hover{background:#2B2619;}
html.dark :is(.document,.chapter-card,.toc,.footer-card,.country-card,.table-shell,.kv-item,.intro-text){
  background:#262217 !important; border-color:#4A4234 !important; color:#E2D8C2;}
html.dark .doc-body, html.dark body{color:#E2D8C2;}
html.dark .doc-body :is(td,th){background:#262217 !important; border-color:#4A4234 !important; color:#E2D8C2;}
html.dark .doc-body div[style*="background"]{background:#262217 !important; color:#E2D8C2;}
html.dark .answer-box{background:#2B2619 !important; border-color:#4A4234 !important; color:#E2D8C2;}
html.dark li.quiz-q .options span:not(.sel-right):not(.sel-wrong){background:#2B2619; border-color:#4A4234; color:#E2D8C2;}
html.dark .doc-done button:not(.done){background:#262217; border-color:#4A4234; color:#EDE4D0;}
html.dark .pager a{background:#262217; border-color:#4A4234; color:#EDE4D0;}
html.dark .cover-part{background:#262217; border-color:#4A4234;}
html.dark .cover-part .cp-list a{color:#EDE4D0;}
html.dark .cover-part .cp-list a:hover{background:#2B2619;}
html.dark .bd-item{background:#262217; border-color:#4A4234;}
html.dark .hl{background:linear-gradient(transparent 55%, #5A4520 55%) !important; color:#F2D9A8;}
html.dark .kw{background:#3A3220 !important; color:#D9A441;}
html.dark :is(.explain,.term,.cdesc,.kv-v,.kv-k,.desc,.ans-exp){color:#E2D8C2 !important;}
/* chữ nhấn & thuật ngữ bị hardcode màu tối */
html.dark .doc-body :is(strong,em,b){color:#F2D9A8;}
html.dark .doc-body :is(li,tr,p,dd,dt){color:#E2D8C2;}
html.dark :is(.subsection-head,.jp-term,.hanviet,.ttl,.cname,.ans-key,.tl-year){color:#D9A441 !important;}
html.dark :is(.compare-card,.vocab-table,.data-table,.country-card,.kv-grid,.diagram-desc,.intro-text,.tl-item){
  background:#262217 !important; border-color:#4A4234 !important; color:#E2D8C2;}
html.dark .doc-body table :is(thead,thead th,thead td){background:#332D1E !important; color:#D9A441 !important;}
html.dark .doc-body tr:nth-child(even) :is(td,th){background:#2B2619 !important;}
html.dark .tip-box{background:#202B1D !important; border-color:#3C5438 !important; color:#C8E0C2 !important;}
html.dark .tip-box *{color:#C8E0C2 !important;}
html.dark .warning-box{background:#2E1D1D !important; border-color:#5A3535 !important; color:#E8C4C4 !important;}
html.dark .warning-box *{color:#E8C4C4 !important;}
html.dark .note-box{background:#262031 !important; border-color:#4A3D5C !important; color:#D8CCE8 !important;}
@media print{.sidebar,.topbar,.fab-wrap,.doc-done,.pager{display:none !important}.main-wrap{margin:0}}