/* Sơ Đồ Sách — phong cách "màu nước trên giấy": nền giấy sáng, chữ xám chàm, màu nhánh pha nhạt, nhiều khoảng trắng, ít khung viền. */
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/be-vietnam-pro-vietnamese-400-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/be-vietnam-pro-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/be-vietnam-pro-vietnamese-600-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/be-vietnam-pro-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lora";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/lora-vietnamese-400-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Lora";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/lora-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lora";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/lora-vietnamese-500-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Lora";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/lora-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lora";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/lora-vietnamese-400-italic.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Lora";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/lora-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#F8F7F4; --surface:#FFFFFF; --sunk:#F1EFEA; --ink:#2F3A50; --muted:#6C7385; --line:#E7E4DE;
  --accent:#5F78BF; --accent-soft:#E9EDF8; --mixto:#26304A; --focus:#5F78BF;
  --shadow:0 18px 48px -28px rgba(47,58,80,.28);
  --display:"Lora",Georgia,"Times New Roman",serif;
  --body:"Be Vietnam Pro","Segoe UI",Roboto,Arial,sans-serif;
  --wrap:1160px; --gut:clamp(18px,4.5vw,44px);
  color-scheme:light;
}
.b-tdnvc{--g1:#DB8A72;--g2:#62A0BA;--g3:#A48BC9;--g4:#CDA45A;--g5:#70B194}
.b-htlb{--g1:#DE8091;--g2:#69A3C4;--g3:#D0A15F;--g4:#9A88C7;--g5:#74B59A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#161B26;--surface:#1C2230;--sunk:#202737;--ink:#E5E8EF;--muted:#A3AABA;--line:#2B3242;
  --accent:#9AAEE8;--accent-soft:#273049;--mixto:#FFFFFF;--focus:#9AAEE8;--shadow:0 18px 48px -28px rgba(0,0,0,.6);color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#161B26;--surface:#1C2230;--sunk:#202737;--ink:#E5E8EF;--muted:#A3AABA;--line:#2B3242;
  --accent:#9AAEE8;--accent-soft:#273049;--mixto:#FFFFFF;--focus:#9AAEE8;--shadow:0 18px 48px -28px rgba(0,0,0,.6);color-scheme:dark}
.g1{--c:var(--g1)}.g2{--c:var(--g2)}.g3{--c:var(--g3)}.g4{--c:var(--g4)}.g5{--c:var(--g5)}
/* --ct: màu nhánh đậm lên một chút để chữ vẫn đủ tương phản */
*,:root{--ct:color-mix(in srgb,var(--c,var(--accent)) 58%,var(--mixto))}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:20px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16.5px/1.8 var(--body);overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .2s,color .2s}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
h1,h2,h3{line-height:1.25;margin:0;text-wrap:balance}
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:-.01em}
h2{font-size:clamp(25px,2.6vw,32px)}
h3{font-size:18px;font-weight:600}
b,strong{font-weight:600}
p{margin:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;background:var(--surface);color:var(--ink);padding:8px 14px;border-radius:10px;z-index:9;box-shadow:var(--shadow)}
.skip:focus{left:8px}

/* đầu và cuối trang */
.site-head{max-width:var(--wrap);margin:0 auto;padding:22px var(--gut);display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:500;font-size:20px;text-decoration:none}
.logo{width:28px;height:28px;flex:none}
.logo .lc{fill:var(--ink)}.logo .ll{stroke-width:1.6}
.logo .l1{fill:#DB8A72;stroke:#DB8A72}.logo .l2{fill:#62A0BA;stroke:#62A0BA}.logo .l3{fill:#CDA45A;stroke:#CDA45A}.logo .l4{fill:#A48BC9;stroke:#A48BC9}.logo .l5{fill:#70B194;stroke:#70B194}
.site-head nav{display:flex;flex-wrap:wrap;gap:4px 26px;font-size:15px}
.site-head nav a{text-decoration:none;color:var(--muted);padding:4px 0;border-bottom:1px solid transparent}
.site-head nav a:hover,.site-head nav a[aria-current]{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 40%,transparent)}
.site-foot{margin-top:120px;background:var(--sunk)}
.foot-in{max-width:var(--wrap);margin:0 auto;padding:48px var(--gut) 56px;display:grid;grid-template-columns:1.2fr 1fr;gap:20px 56px;color:var(--muted);font-size:15px}
.foot-in .brand{color:var(--ink);margin-bottom:8px}
.foot-in nav{display:flex;flex-direction:column;gap:6px}
.foot-in .small{grid-column:1/-1;font-size:13px;padding-top:12px}
@media (max-width:700px){.foot-in{grid-template-columns:1fr}}
@media (max-width:600px){.site-head{padding-bottom:6px}.site-head nav{gap:4px 14px;font-size:14px}}
@media (max-width:420px){.site-head nav{gap:4px 12px;font-size:13.5px}}

/* nút: viên thuốc màu nhạt, không khối đậm */
.btn{display:inline-flex;align-items:center;min-height:48px;padding:10px 24px;border-radius:999px;background:var(--accent-soft);color:var(--ink);font-weight:600;font-size:15.5px;text-decoration:none;border:1px solid transparent;transition:background .25s,border-color .25s}
@media (hover:hover){.btn:hover{background:color-mix(in srgb,var(--accent) 22%,var(--surface))}}
.btn.ghost{background:transparent;border-color:var(--line)}
@media (hover:hover){.btn.ghost:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));background:transparent}}
.hero-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* sơ đồ: nét mảnh, chấm nhỏ, chữ nhãn xám, chỉ rõ lên khi trỏ vào */
.map text{font-family:var(--body)}
.map .link{fill:none;stroke:var(--c);stroke-width:1.2;opacity:.5}
.map .trunk{fill:none;stroke:var(--c);stroke-width:3.5;stroke-linecap:round;opacity:.75}
.map .leaf circle{stroke:var(--c);stroke-width:1.8;fill:var(--surface);transform-box:fill-box;transform-origin:center;transition:transform .3s cubic-bezier(.3,.7,.3,1)}
.map .leaf{-webkit-tap-highlight-color:transparent}
.map .leaf.key circle{fill:var(--c)}
.map .leaf .num{font-size:10px;font-weight:600;fill:var(--ct);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.map .leaf.key .num{fill:color-mix(in srgb,var(--c) 30%,#1D2433)}
.map .leaf .lab{font-size:19.5px;fill:var(--muted);dominant-baseline:central;transition:fill .25s}
.map .leaf{cursor:pointer;outline:none}
.map .leaf:focus-visible .lab,.map .leaf.sel .lab{fill:var(--ct);font-weight:600}
.map .leaf:focus-visible circle,.map .leaf.sel circle{transform:scale(1.4)}
@media (hover:hover){.map .leaf:hover .lab{fill:var(--ct);font-weight:600}.map .leaf:hover circle{transform:scale(1.4)}}
.map .leaf:focus-visible circle{stroke:var(--focus);stroke-width:3}
.map .gnode rect{fill:color-mix(in srgb,var(--c) 22%,var(--surface));stroke:color-mix(in srgb,var(--c) 55%,transparent);stroke-width:1.2}
.map .gnode text{font-size:16px;font-weight:600;fill:var(--ct);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.map .gnode{cursor:pointer;outline:none}
.map .gnode:focus-visible rect,.map .gnode.on rect{fill:color-mix(in srgb,var(--c) 34%,var(--surface))}
.map .gnode:focus-visible rect{stroke:var(--focus);stroke-width:3}
.map .center circle{fill:var(--accent-soft);stroke:color-mix(in srgb,var(--accent) 30%,transparent);stroke-width:1.5}
.map .center text{font-family:var(--display);font-weight:500;font-size:21px;fill:var(--ink);text-anchor:middle}
.map .center text.sm{font-family:var(--display);font-style:italic;font-weight:400;font-size:14px;fill:var(--muted)}
.map :is(.link,.trunk,.leaf,.gnode){transition:opacity .4s}
.map[data-f="g1"] :is(.trunk,.link,.leaf,.gnode):not(.g1),
.map[data-f="g2"] :is(.trunk,.link,.leaf,.gnode):not(.g2),
.map[data-f="g3"] :is(.trunk,.link,.leaf,.gnode):not(.g3),
.map[data-f="g4"] :is(.trunk,.link,.leaf,.gnode):not(.g4),
.map[data-f="g5"] :is(.trunk,.link,.leaf,.gnode):not(.g5){opacity:.1}
.map:is(.shelf,.mini) .lab{display:none}
.map:is(.shelf,.mini) .gnode text{font-size:19px}
.map:is(.shelf,.mini) .leaf circle{transform:scale(1.25)}
.map:is(.shelf,.mini) .center text{font-size:25px}
.map:is(.shelf,.mini) .center text.sm{font-size:16px}
/* khoảnh khắc chuyển động duy nhất: sơ đồ tự vẽ chậm và êm khi mở trang */
@media (prefers-reduced-motion:no-preference){
  .map:is(.full,.shelf) :is(.link,.trunk){stroke-dasharray:1;animation:draw 1.8s cubic-bezier(.25,.6,.25,1) both}
  .map:is(.full,.shelf) .trunk{animation-duration:.9s}
  .map:is(.full,.shelf) .link{animation-delay:.5s}
  .map:is(.full,.shelf) .leaf{animation:pop .8s ease-out both;animation-delay:calc(.7s + var(--i) * 28ms)}
  .map:is(.full,.shelf) .center{animation:pop 1s ease-out both}
}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0}to{opacity:1}}

/* trang chủ */
.home,.book,.prose-page{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.hero{padding:clamp(56px,10vw,128px) 0 clamp(40px,6vw,72px);max-width:820px}
.hero h1{font-size:clamp(40px,6.2vw,74px);line-height:1.08;letter-spacing:-.02em}
.lead{font-size:clamp(17.5px,1.5vw,19.5px);color:var(--muted);max-width:60ch;margin-top:24px;line-height:1.8}
.shelf{display:flex;flex-direction:column;gap:clamp(40px,6vw,72px)}
.shelf>h2{font-style:italic}
.shelf-item{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.shelf-item:nth-of-type(even) .shelf-map{order:2}
.shelf-map{background:var(--surface);border-radius:50%;aspect-ratio:1/1;max-width:100%;display:grid;place-items:center;padding:3%;box-shadow:var(--shadow)}
.shelf-map svg{width:100%;height:auto;display:block}
.shelf-info{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.shelf-meta{color:var(--muted);font-size:14.5px}
.shelf-info h3{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.4vw,44px);line-height:1.12;letter-spacing:-.01em}
.shelf-info h3 a{text-decoration:none}
.shelf-info h3 a:hover{color:var(--accent)}
.orig{font-family:var(--display);font-style:italic;color:var(--muted);font-size:17px;margin-top:-6px}
.tip{font-size:14px;color:var(--muted)}
.checks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.checks li{position:relative;padding-left:24px}
.checks li::before{content:"";position:absolute;left:3px;top:.68em;width:9px;height:9px;border-radius:50%;background:var(--c,var(--accent));opacity:.85}
:is(.b-tdnvc,.b-htlb) :is(.checks,.quick-list) li:nth-child(5n+1){--c:var(--g1)}
:is(.b-tdnvc,.b-htlb) :is(.checks,.quick-list) li:nth-child(5n+2){--c:var(--g2)}
:is(.b-tdnvc,.b-htlb) :is(.checks,.quick-list) li:nth-child(5n+3){--c:var(--g3)}
:is(.b-tdnvc,.b-htlb) :is(.checks,.quick-list) li:nth-child(5n+4){--c:var(--g4)}
:is(.b-tdnvc,.b-htlb) :is(.checks,.quick-list) li:nth-child(5n+5){--c:var(--g5)}
@media (max-width:820px){.shelf-item{grid-template-columns:1fr}.shelf-item:nth-of-type(even) .shelf-map{order:0}.shelf-map{max-width:500px;width:100%;margin:0 auto}}

.howto,.about-strip{margin-top:clamp(72px,10vw,128px)}
.steps{list-style:none;counter-reset:s;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.steps li{counter-increment:s;padding-top:4px}
.steps li::before{content:counter(s);display:block;font-family:var(--display);font-style:italic;font-weight:400;font-size:46px;line-height:1;margin-bottom:12px;color:var(--accent)}
.steps p{color:var(--muted);margin-top:6px}
.steps.plain{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.steps,.steps.plain{grid-template-columns:1fr}}
.about-strip{background:var(--accent-soft);border-radius:36px;padding:clamp(28px,5vw,56px)}
.about-strip p{max-width:66ch;margin-top:14px;color:var(--muted)}
.about-strip a{color:var(--ink)}

/* trang sách */
.crumbs ol{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.5}
.hero-book{padding:clamp(32px,6vw,72px) 0 clamp(40px,5vw,64px);max-width:860px}
.hero-book h1{font-size:clamp(34px,4.6vw,56px);line-height:1.12}
.hero-book .orig{margin-top:14px}
.facts{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.facts li{background:var(--sunk);border-radius:999px;padding:4px 14px;font-size:14px;color:var(--muted)}
.updated{font-size:14px;color:var(--muted);margin-top:18px}
.quick{background:var(--surface);border-radius:32px;padding:clamp(24px,4vw,48px);margin-bottom:clamp(64px,8vw,104px);box-shadow:var(--shadow)}
.quick h2{font-style:italic}
.quick-list{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 48px}
.quick-list li{position:relative;padding-left:24px}
.quick-list li::before{content:"";position:absolute;left:3px;top:.68em;width:9px;height:9px;border-radius:50%;background:var(--c)}
@media (max-width:760px){.quick-list{grid-template-columns:1fr}}

.map-head{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:flex-end;justify-content:space-between;margin-bottom:20px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:400 14px var(--body);border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:7px 15px;min-height:38px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .25s,border-color .25s}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--c)}
@media (hover:hover){.chip:hover{background:var(--surface)}}
.chip[aria-pressed="true"]{background:color-mix(in srgb,var(--c,var(--accent)) 16%,var(--surface));border-color:transparent;font-weight:600}
.map-layout{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:28px;align-items:start}
.map-box{background:var(--surface);border-radius:36px;overflow-x:auto;overscroll-behavior-x:contain;box-shadow:var(--shadow)}
.map.full{display:block;width:100%;height:auto;aspect-ratio:1080/1144}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;padding:4px 28px 20px;font-size:13px;color:var(--muted);position:sticky;left:0}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend .hint{display:none}
.dot{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--muted);display:inline-block}
.dot.f{background:var(--muted)}
.peek{background:var(--surface);border-radius:32px;padding:28px;position:sticky;top:20px;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow:auto;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow)}
.peek h3{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.2}
.peek .toc{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:14px;font-size:15px}
.peek .toc li{padding-left:14px;border-left:2px solid color-mix(in srgb,var(--c) 60%,transparent)}
.peek .toc b{display:block}
.peek .toc a{text-decoration:none}
.peek .toc .nums{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.peek .toc .nums a{min-width:32px;height:32px;padding:0 6px;border-radius:999px;background:var(--sunk);color:var(--muted);display:inline-grid;place-items:center;font-size:13px;transition:background .25s,color .25s}
@media (hover:hover){.peek .toc .nums a:hover{background:color-mix(in srgb,var(--c) 20%,var(--surface));color:var(--ct)}}
.peek .eyebrow{font-size:14px;font-weight:600;color:var(--ct)}
.peek .peek-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.peek .peek-nav button,.peek .peek-nav a{font:400 14px var(--body);background:var(--sunk);color:var(--ink);border:0;border-radius:999px;padding:8px 15px;cursor:pointer;text-decoration:none;transition:background .25s}
@media (hover:hover){.peek .peek-nav :is(button,a):hover{background:color-mix(in srgb,var(--c,var(--accent)) 18%,var(--surface))}}
/* iPad dọc và nhỏ hơn: sơ đồ một cột, khung xem nhanh nằm dưới */
@media (max-width:1100px){
  .map-layout{grid-template-columns:1fr}
  .map-box{max-width:880px;width:100%;margin:0 auto}
  .peek{position:static;max-height:none;max-width:880px;width:100%;margin:0 auto}
}
.only-narrow{display:none!important}
@media (max-width:1100px){.only-narrow{display:inline-flex!important}}
/* điện thoại: sơ đồ rộng hơn màn hình để chữ đủ đọc, vuốt ngang để xem */
@media (max-width:700px){
  .map.full{width:720px;max-width:none}
  .map-box{border-radius:28px}
  .legend{max-width:calc(100vw - 2 * var(--gut));padding:4px 20px 18px}
  .legend .hint{display:inline}
  .peek{padding:22px;border-radius:28px}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);width:calc(100% + 2 * var(--gut));-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gut),#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--gut),#000 calc(100% - 40px),transparent)}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .map-head{flex-direction:column;align-items:stretch}
}

.band{margin-top:clamp(72px,9vw,120px)}
.band.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 64px;align-items:start}
@media (max-width:860px){.band.two{grid-template-columns:1fr}}
.section-lead{color:var(--muted);margin:12px 0 24px;max-width:62ch}
.table-wrap{overflow-x:auto;background:var(--surface);border-radius:28px;box-shadow:var(--shadow)}
.compare{border-collapse:collapse;width:100%;min-width:560px;font-size:15.5px}
.compare th,.compare td{padding:16px 22px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.compare thead th{border-top:0;font-family:var(--display);font-weight:500;font-size:19px;color:var(--ct)}
.compare thead th.g1,.compare thead th.g2{background:color-mix(in srgb,var(--c) 10%,var(--surface))}
.compare tbody th{color:var(--muted);font-weight:400;width:18%}
.key-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.key-grid a{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:999px;padding:7px 16px 7px 7px;text-decoration:none;transition:background .25s}
@media (hover:hover){.key-grid a:hover{background:color-mix(in srgb,var(--c) 14%,var(--surface))}}
.key-grid span{flex:none;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--c) 22%,var(--surface));color:var(--ct);display:grid;place-items:center;font-size:12.5px;font-weight:600}
.band.two .checks{margin-top:24px}
.caution{background:var(--sunk);border-radius:32px;padding:clamp(24px,4vw,40px);display:flex;flex-direction:column;gap:14px}
.caution h2{font-size:25px;font-style:italic}
.caution ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.phones{list-style:none;padding:0!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px!important;margin:6px 0!important}
.phones li{background:var(--surface);border-radius:20px;padding:14px 16px;font-size:14px;color:var(--muted)}
.phones b{display:block;font-family:var(--display);font-weight:400;font-size:32px;color:var(--ink);line-height:1.15}
@media (max-width:640px){.phones{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ledger{display:grid;grid-template-columns:1fr 1.4fr;gap:12px}
.ledger>div{background:var(--surface);border-radius:28px;padding:24px;box-shadow:var(--shadow)}
.ledger>div:first-child{background:var(--accent-soft);box-shadow:none}
.ledger h3{font-family:var(--display);font-weight:400;font-style:italic;font-size:25px;margin-bottom:8px}
.ledger ul{margin:0;padding-left:18px}
@media (max-width:480px){.ledger{grid-template-columns:1fr}}
.levels{margin:24px 0 0;display:flex;flex-direction:column;gap:10px}
.levels div{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:center;background:var(--surface);border-radius:24px;padding:12px 18px 12px 12px}
.levels dt{font-family:var(--display);font-style:italic;font-size:24px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.levels dd{margin:0}
.note{font-size:14px;color:var(--muted);margin-top:16px}

/* chương: không khung, chỉ giữ đường cây màu nhạt */
.chapters{margin-top:clamp(80px,10vw,128px);display:flex;flex-direction:column;gap:clamp(72px,9vw,112px)}
.part-head{margin-bottom:32px;max-width:720px}
.part-label{font-weight:600;color:var(--ct);font-size:14.5px;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.part-label::before{content:"";width:28px;height:3px;border-radius:3px;background:var(--c)}
.part-head h2{font-size:clamp(28px,3vw,38px)}
.part-head p:last-child{color:var(--muted);margin-top:10px}
.ch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}
@media (max-width:900px){.ch-grid{grid-template-columns:1fr}}
.ch{border-radius:28px;padding:24px 26px 16px;display:flex;flex-direction:column;gap:14px;scroll-margin-top:20px;transition:background .4s,box-shadow .4s}
@media (hover:hover){.ch:hover{background:color-mix(in srgb,var(--surface) 70%,transparent)}}
.ch:target{background:var(--surface);box-shadow:var(--shadow)}
.ch>header{display:flex;gap:14px;align-items:flex-start}
.ch-num{flex:none;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--c) 20%,var(--surface));color:var(--ct);display:grid;place-items:center;font-weight:600;font-size:13.5px;margin-top:2px}
.ch h3{font-family:var(--display);font-weight:500;font-size:21px;line-height:1.3;padding-top:3px}
.en{font-family:var(--display);font-style:italic;color:var(--muted);font-size:15px;margin-top:2px}
.badges{display:flex;flex-wrap:wrap;gap:6px}
.badge{font-size:12.5px;padding:2px 11px;border-radius:999px;background:color-mix(in srgb,var(--c) 14%,var(--surface));color:var(--ct)}
ul.tree{list-style:none;margin:0;padding:0 0 0 16px;border-left:1.5px solid color-mix(in srgb,var(--c) 55%,transparent);display:flex;flex-direction:column;gap:10px;font-size:15.5px;line-height:1.75}
ul.tree li{position:relative;padding-left:14px}
ul.tree li::before{content:"";position:absolute;left:-16px;top:.85em;width:20px;border-top:1.5px solid color-mix(in srgb,var(--c) 55%,transparent);border-radius:2px}
.apply{background:color-mix(in srgb,var(--c) 10%,var(--surface));border-radius:18px;padding:14px 18px;font-size:15.5px}
.apply b{color:var(--ct)}
.ch-nav{display:flex;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px;font-size:13.5px}
.ch-nav a{color:var(--muted);padding:4px 0;text-decoration:none}
.ch-nav a:hover{color:var(--ct)}
.sources ul{max-width:78ch;padding-left:20px;display:flex;flex-direction:column;gap:10px;color:var(--muted);margin:18px 0 0}
.next-book{margin-top:clamp(64px,8vw,96px)}
.next-card{display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:center;background:var(--surface);border-radius:32px;padding:24px;text-decoration:none;margin-top:18px;box-shadow:var(--shadow);transition:transform .35s cubic-bezier(.3,.7,.3,1)}
@media (hover:hover){.next-card:hover{transform:translateY(-2px)}}
.next-card>span:last-child{display:flex;flex-direction:column;gap:6px}
.next-card b{font-family:var(--display);font-weight:400;font-size:28px}
.next-card span span{color:var(--muted)}
.next-card .cta{color:var(--accent)!important;font-weight:600}
.next-map svg{display:block;width:100%;height:auto}
.next-map .lab{display:none}
@media (max-width:560px){.next-card{grid-template-columns:1fr}.next-map{max-width:180px}}

/* trang giới thiệu */
.prose-page{max-width:780px;padding-top:clamp(32px,6vw,72px)}
.prose-page h1{font-size:clamp(36px,5vw,56px)}
.prose-page h2{margin-top:56px}
.prose-page>ul{padding-left:20px;display:flex;flex-direction:column;gap:10px;margin-top:18px}
.prose-page>p:not(.lead){margin-top:16px}

@media (pointer:coarse){
  .site-head nav a{display:inline-flex;align-items:center;min-height:44px;padding:0}
  .chip{min-height:44px;padding:8px 16px}
  .ch-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
  .peek .peek-nav :is(button,a){min-height:44px;display:inline-flex;align-items:center;padding:8px 16px}
  .key-grid a{min-height:48px}
  .crumbs a,.foot-in nav a,.peek .toc a{display:inline-block;padding:6px 0}
  .peek .toc .nums a{min-width:42px;height:42px;font-size:14px}
}
@supports not (color:color-mix(in srgb,red,blue)){
  *{--ct:var(--ink)}
  .map .gnode rect{fill:var(--sunk)}
  .badge,.apply,.ch-num,.key-grid span,.compare thead th.g1,.compare thead th.g2,.chip[aria-pressed="true"]{background:var(--sunk)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.site-head nav,.map-section,.chips,.ch-nav,.next-book{display:none}.ch{break-inside:avoid}}