/* RAMOND · giao diện màn hình. Phông hệ thống, không tải từ mạng. */
:root{
  --ink:#191813;--ink2:#514a3a;--muted:#716750;--line:#e8e0cc;--line2:#d5c7a5;
  --paper:#ffffff;--bg:#f8f6ef;--terra:#c59a46;--terra-d:#76591f;--mint:#f4ebcf;--mint-d:#76591f;
  --a:#76591f;--a-bg:#f6efd9;--b:#675839;--b-bg:#f2eee4;--c:#292720;--c-bg:#efefeb;
  --sans:"Segoe UI","Noto Sans","Liberation Sans",Arial,sans-serif;
  --serif:Georgia,"Liberation Serif","DejaVu Serif","Times New Roman",serif;
  --nseg:3;--top:58px;
}
*{box-sizing:border-box}
html{scroll-padding-top:var(--top)}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--sans);-webkit-text-size-adjust:100%}
a{color:var(--terra-d)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
button,select,input{font:inherit;color:inherit}
button,select{border:1px solid var(--line2);background:#fff;border-radius:999px;padding:6px 14px;cursor:pointer}
button:hover{border-color:var(--terra)}
button.primary{background:var(--terra-d);border-color:var(--terra-d);color:#fff}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--mint-d);outline-offset:2px}

/* Thanh trên */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;min-height:var(--top);padding:8px 20px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--ink);white-space:nowrap}
.brand-mark{font:600 20px/1 var(--serif);letter-spacing:.28em;color:var(--terra-d)}
.brand-sub{font-size:12px;color:var(--ink2);letter-spacing:.04em}
.search{flex:1;min-width:160px;max-width:460px}
.search input{width:100%;border:1px solid var(--line2);border-radius:999px;padding:7px 14px 7px 34px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a7f76' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") 12px 50% no-repeat}
.seg-toggle{display:flex;align-items:center;gap:4px}
.seg-label{font-size:12px;color:var(--muted);margin-right:2px}
.seg-toggle button{width:34px;height:34px;padding:0;font-weight:700}
.seg-toggle button[aria-pressed=true].seg-A{background:var(--a);border-color:var(--a);color:#fff}
.seg-toggle button[aria-pressed=true].seg-B{background:var(--b);border-color:var(--b);color:#fff}
.seg-toggle button[aria-pressed=true].seg-C{background:var(--c);border-color:var(--c);color:#fff}
.print-actions{display:flex;gap:6px;margin-left:auto}
.nav-toggle{display:none}

.layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:0;max-width:1680px;margin:0 auto}
.toc{position:sticky;top:var(--top);align-self:start;height:calc(100vh - var(--top));overflow:auto;padding:18px 10px 40px 18px;font-size:13px}
.toc a{display:grid;grid-template-columns:34px 1fr auto;gap:4px;align-items:baseline;padding:5px 8px;border-radius:8px;text-decoration:none;color:var(--ink2)}
.toc a:hover{background:#fff}
.toc a.on{background:#fff;color:var(--ink);box-shadow:inset 3px 0 0 var(--terra)}
.toc a b{font:600 12px var(--serif);color:var(--terra-d)}
.toc a i{font-style:normal;font-size:11px;color:var(--muted)}
.toc a.dim{opacity:.35}
.toc-cover,.toc a[href="#overview"],.toc-source{display:block!important;font-weight:600}
.toc-part{margin:16px 8px 4px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
main{padding:22px 26px 80px;min-width:0}

/* Bìa trên màn hình: cùng tỷ lệ trang ngang */
.cover-frame{container-type:inline-size;aspect-ratio:297/210;max-width:1100px;margin:0 auto 26px;border-radius:6px;overflow:hidden;box-shadow:0 10px 30px rgba(75,61,30,.10)}
.cover{position:relative;width:100%;height:100%;isolation:isolate;overflow:hidden;color:var(--ink);background:#fff}
.cover-skyline{position:absolute;inset:44% 0 0;z-index:-1;opacity:.22;background:repeating-linear-gradient(90deg,transparent 0 .45cqw,#c59a46 .45cqw .62cqw);clip-path:polygon(0 83%,5% 69%,9% 62%,14% 8%,17% 61%,21% 48%,26% 70%,29% 58%,33% 80%,38% 35%,41% 72%,45% 75%,49% 53%,53% 65%,57% 43%,61% 69%,65% 52%,69% 76%,73% 86%,77% 91%,82% 69%,86% 52%,89% 61%,93% 27%,97% 58%,100% 71%,100% 100%,0 100%)}
.cover-grid{position:absolute;inset:4.2cqw;border:1px solid #d5c7a5;z-index:-1}
.cover-copy{position:absolute;left:0;right:0;top:25%;text-align:center}
.cover-kicker{margin:0 0 3.2cqw;font:500 1.25cqw/1.4 var(--sans);letter-spacing:.55em;text-transform:uppercase;opacity:.9}
.cover-wordmark{display:block;width:42cqw;height:auto;margin:0 auto 3.4cqw}
.cover h1{margin:0;font:500 1.9cqw/1.4 var(--sans);letter-spacing:.42em;color:inherit}
.cover-sub{margin:1.1cqw 0 0;font:400 1.1cqw/1.4 var(--sans);letter-spacing:.4em}
.cover-segs{display:flex;justify-content:center;gap:1.6cqw;margin-top:3cqw}
.cover-segs span{border:1px solid #d5c7a5;border-radius:99px;padding:.5cqw 1.8cqw;font:600 1.05cqw/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;background:#f4ebcf}
.cover-foot{position:absolute;left:6cqw;right:6cqw;bottom:5.6cqw;display:flex;justify-content:space-between;gap:2cqw;font:400 .95cqw/1.3 var(--sans);letter-spacing:.12em;opacity:.92}

/* Tổng quan */
.overview{max-width:1100px;margin:0 auto 28px;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:26px 30px;display:grid;grid-template-columns:1.4fr 1fr;gap:10px 30px}
.eyebrow{margin:0 0 4px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--terra-d)}
.overview h2,.part-head h2{margin:0 0 8px;font:500 26px/1.25 var(--serif)}
.overview p{margin:0 0 8px;color:var(--ink2)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}
.stats div{background:#fff;border:1px solid var(--line);border-radius:6px;padding:8px 12px}
.stats dt{font-size:11px;color:var(--muted)}
.stats dd{margin:0;font:500 24px/1.2 var(--serif);color:var(--ink)}
.legend{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 20px;margin:6px 0 0;padding:12px 0 0;border-top:1px solid var(--line);list-style:none;font-size:12.5px;color:var(--ink2)}
.exports{grid-column:1/-1;font-size:13px}
.search-status{max-width:1100px;margin:0 auto 12px;font-weight:600;color:var(--terra-d)}
.search-status:empty{display:none}

/* Phần & nhóm */
.part{max-width:1400px;margin:0 auto 34px}
.part-head{padding:8px 4px 14px}
.warn{margin:6px 0 0;padding:8px 12px;border-left:3px solid var(--terra);background:#faf5e5;font-size:13px;color:var(--ink2)}
.group{background:var(--paper);border:1px solid var(--line);border-radius:6px;margin:0 0 22px;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.group-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:16px 20px 12px;border-bottom:2px solid var(--ink)}
.group-head .roman{font:500 28px/1 var(--serif);color:var(--terra)}
.group-head h2{margin:0;font:600 19px/1.25 var(--sans);letter-spacing:.06em}
.part-tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.src-rows{margin-left:auto;font-size:12px;color:var(--muted)}

/* Lưới so sánh (dùng chung với trang in) */
.grid{font-size:13.5px}
.r{display:grid;grid-template-columns:minmax(150px,.95fr) repeat(var(--nseg),minmax(0,1.5fr));border-bottom:1px solid var(--line)}
.r>div{padding:7px 10px;min-width:0;overflow-wrap:anywhere}
.r .c{white-space:pre-line;border-left:1px solid var(--line)}
.r-cols{position:sticky;top:var(--top);z-index:5;background:var(--paper);border-bottom:1px solid var(--line2)}
.r-cols .lab,.r-cols .c{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:normal}
.r-cols .c b{display:block;font-size:13px;letter-spacing:.1em}
.r-cols .c small{display:block;text-transform:none;letter-spacing:0}
.r-cols .seg-A b{color:var(--a)}.r-cols .seg-B b{color:var(--b)}.r-cols .seg-C b{color:var(--c)}
.r-head{background:#fff;border-top:1px solid var(--line2)}
.item:first-of-type .r-head,.r-cols+.item .r-head{border-top:0}
.r-head .lab{display:flex;gap:8px;align-items:baseline}
.no{flex:none;min-width:24px;font:600 12px/1.4 var(--serif);color:var(--terra-d)}
.no.small{min-width:0;margin-right:6px;font-size:11px}
.name{font-weight:700}
.r-head .val.head,.r-variant .val.head{font-weight:600}
.r-head .seg-A{background:var(--a-bg)}.r-head .seg-B{background:var(--b-bg)}.r-head .seg-C{background:var(--c-bg)}
.lvl2 .r-head .lab,.item-unit.lvl2 .r-head .lab{padding-left:26px}
.r-variant{background:#ffffff}
.r-variant .c{border-top:1px dashed var(--line2)}
.branch{font-size:12px;color:var(--mint-d);font-style:italic}
.r-attr .lab{font-style:italic;color:var(--ink2);font-size:12.5px;padding-left:42px}
.r-attr .val{color:var(--ink)}
.empty{color:#c2b6a8}
.seg-badge{display:none}
.ref{display:inline-block;margin:3px 4px 0 0;padding:0 7px;border-radius:99px;background:var(--mint);color:#59461c;font-size:11px;line-height:1.7;white-space:normal;font-weight:500}
.c .ref{display:table;margin-top:4px}
.group-head .ref{font-size:11px}
.r-note{display:block}
.note,.lab.full{grid-column:1/-1}
.note{margin:0;padding:7px 12px 7px 42px!important;background:#faf5e5;border-left:3px solid var(--terra);font-size:12.5px}
.note b{margin-right:8px;color:var(--terra-d);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.note span{white-space:pre-line}
.note-chip{display:inline-block;padding:0 7px;border-left:3px solid var(--terra);background:#faf5e5;font-size:11px}
.src-red{position:relative}
.src-red::after{content:"●";position:absolute;top:5px;right:6px;font-size:9px;color:#d2352b}
.src-red .val{color:#a3261d}
.red-chip{color:#d2352b;font-size:10px}
.orphan .r-head{background:repeating-linear-gradient(135deg,#fff,#fff 8px,#f5f0e2 8px,#f5f0e2 16px)}
.orphan-tag{font-weight:600;color:var(--terra-d)}
.muted{color:var(--muted);font-weight:400}
.mono{font-family:"DejaVu Sans Mono","Liberation Mono",monospace;font-size:.9em;overflow-wrap:anywhere}
details.src{border-bottom:1px solid var(--line2);font-size:12px}
details.src summary{cursor:pointer;padding:4px 10px 6px 42px;color:var(--muted);list-style-position:inside}
details.src table{margin:0 10px 10px 42px;border-collapse:collapse;font-size:12px}
details.src th,details.src td,.cells th,.cells td{padding:2px 8px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;white-space:pre-line}
details.src th,.cells th{font:600 11px "DejaVu Sans Mono",monospace;color:var(--terra-d)}
body.hide-A main .seg-A,body.hide-B main .seg-B,body.hide-C main .seg-C{display:none!important}

/* Phụ lục nguồn */
.source{max-width:1400px;margin:0 auto}
.src-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:16px 20px;margin:0 0 16px}
.card h3{margin:0 0 8px;font:600 15px var(--sans)}
.kv{display:grid;grid-template-columns:130px 1fr;gap:4px 12px;margin:0;font-size:13px}
.kv dt{color:var(--muted)}.kv dd{margin:0;overflow-wrap:anywhere}
.notes{margin:0 0 12px;padding-left:18px;font-size:13px}.notes li{margin-bottom:6px;white-space:pre-line}
.anoms{margin:0;padding-left:22px;font-size:13px}.anoms li{margin-bottom:5px}
.table-wrap{overflow:auto;max-height:70vh}
.inv{border-collapse:collapse;font-size:13px;width:100%}
.inv th,.inv td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.inv tr.hidden{color:var(--muted)}
.all-cells summary{cursor:pointer;font-weight:600}
.noscript{padding:30px;text-align:center}

/* Xem bản in */
.preview-bar{position:sticky;top:0;z-index:30;display:flex;gap:10px;align-items:center;justify-content:center;padding:10px;background:var(--ink);color:#fff}
.preview-bar[hidden]{display:none}
.preview-bar button{color:var(--ink)}.preview-bar button.primary{color:#fff}
body.previewing .topbar,body.previewing .layout{display:none}

/* Điện thoại / máy tính bảng */
@media (max-width:1100px){
  .layout{grid-template-columns:1fr}
  .toc{display:none;position:fixed;inset:var(--top) auto 0 0;width:min(320px,86vw);z-index:25;background:var(--paper);border-right:1px solid var(--line);box-shadow:8px 0 30px rgba(0,0,0,.15)}
  body.nav-open .toc{display:block}
  .nav-toggle{display:inline-flex;gap:6px}
  .brand-sub{display:none}
  .topbar{flex-wrap:wrap}
}
@media (max-width:760px){
  :root{--top:150px}
  body{font-size:15px}
  .topbar{padding:8px 12px;gap:8px}
  .nav-toggle span{display:none}
  .search{order:5;flex-basis:100%;max-width:none}
  .print-actions{margin-left:auto}
  .print-actions #preview,.paper{display:none}
  main{padding:14px 10px 60px}
  .overview{grid-template-columns:1fr;padding:18px}
  .stats{grid-template-columns:repeat(3,1fr)}
  .stats dd{font-size:20px}
  .group-head{padding:12px 14px}
  .src-rows{margin-left:0}
  main .r-cols{display:none!important}
  main .r{display:block}
  main .r>div{padding:6px 12px}
  main .r .c{border-left:0;display:grid;grid-template-columns:26px 1fr;column-gap:6px}
  main .r .c .ref{grid-column:2}
  main .seg-badge{display:inline-block;grid-row:1/3;align-self:start;width:20px;height:20px;border-radius:50%;color:#fff;font:700 11px/20px var(--sans);text-align:center}
  main .seg-A .seg-badge{background:var(--a)}main .seg-B .seg-badge{background:var(--b)}main .seg-C .seg-badge{background:var(--c)}
  main .r-head .lab{padding-top:10px}
  main .r-attr .lab{padding-left:12px;padding-bottom:0;font-weight:600}
  main .lvl2 .r-head .lab{padding-left:12px}
  main .note{padding-left:12px!important}
  details.src summary{padding-left:12px}
  details.src table{margin-left:12px}
  .src-grid{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .cover-frame{border-radius:4px}
}

/* Trang mở đầu (trang nghỉ) mỗi nhóm; cùng nhận diện bìa Ramond.
   Trên màn hình là một trang riêng cao đúng khung nhìn, đứng trước bảng của nhóm;
   mục lục trỏ vào trang này (html scroll-padding-top = thanh trên). */
.group-block{scroll-margin-top:0}
.item,#source,#overview{scroll-margin-top:64px}
.section-divider{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:560px;padding:38px 44px;background:#fcfaf3;color:#76591f;overflow:hidden}
.screen-divider{min-height:calc(100vh - var(--top));min-height:calc(100dvh - var(--top));margin:0 0 22px;border-radius:6px;padding:clamp(26px,4vw,56px) clamp(22px,5vw,72px)}
.section-divider::after{content:"";position:absolute;right:0;bottom:0;width:30%;height:60%;background:repeating-linear-gradient(90deg,transparent 0 9px,#c59a4629 9px 10px);pointer-events:none}
.divider-top,.divider-foot{display:flex;justify-content:space-between;gap:18px;position:relative;z-index:1;font-size:11px;letter-spacing:.1em}
.divider-top{border-bottom:1px solid #d5c7a5;padding-bottom:18px}
.divider-top>span:first-child{font:600 22px var(--serif);letter-spacing:.28em}
.divider-main{position:relative;z-index:1;padding:30px 0;max-width:92%}
.divider-part{margin:0 0 16px;text-transform:uppercase;letter-spacing:.16em;font-size:14px}
.divider-number{display:block;font:400 clamp(110px,15vw,230px)/.95 var(--serif)}
.divider-main h2{font:600 clamp(36px,5.4vw,88px)/1.1 var(--sans);letter-spacing:.02em;margin:18px 0 0;overflow-wrap:anywhere}
.divider-foot{border-top:1px solid #d5c7a5;padding-top:18px;flex-wrap:wrap}
.divider-next{color:#76591f;text-decoration:none;font-weight:600;letter-spacing:.06em}
.divider-next:hover{text-decoration:underline}
#print-root .divider-next{display:none}
body.searching .screen-divider{display:none}
@media(max-width:760px){.section-divider{min-height:440px;padding:26px 22px}.screen-divider{min-height:calc(100vh - var(--top));min-height:calc(100dvh - var(--top))}.divider-top{flex-direction:column;font-size:9px}.divider-main{max-width:100%}.divider-part{font-size:11px}.divider-number{font-size:clamp(96px,30vw,150px)}.divider-main h2{font-size:clamp(32px,10vw,54px)}.divider-foot{font-size:10px}}