/* Nhật Quang — architectural model collection. */
:root {
  --paper:#F2F6FC; --card:#fff; --ink:#142B50; --ink-2:#435572;
  --muted:#65758D; --line:#D9E4F2; --blue:#214CC5; --blue-ink:#142B50;
  --blue-soft:#EAF0FC; --gold:#CEA04B; --gold-soft:#F8F1E2; --gold-ink:#805F20;
  --red:#B14D4D; --red-soft:#FAEDED; --green:#256C55; --green-soft:#E6F3ED;
  --rail-w:218px; --font-body:'Be Vietnam Pro','Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1); color-scheme:light;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:0; }
body { margin:0; background:#fff; color:var(--ink); font:16px/1.7 var(--font-body); -webkit-font-smoothing:antialiased; }
button { font:inherit; color:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
img { display:block; max-width:100%; height:auto; }
figure,p,h1,h2,h3 { margin:0; }
p+p { margin-top:12px; }
ul,ol { margin:0; padding-left:21px; }
li { margin-bottom:8px; }
a { color:var(--blue); text-underline-offset:4px; }
strong { font-weight:600; }
::selection { background:#DCE7FD; }
:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
.skip-link { position:fixed; top:8px; left:20px; z-index:100; padding:12px 20px; background:#fff; transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.progress { position:fixed; z-index:40; top:0; left:0; height:3px; background:var(--gold); width:0; transition:width .25s; }

/* Persistent table of contents. */
.rail { position:fixed; inset:0 auto 0 0; width:var(--rail-w); padding:30px 14px 20px; background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column; z-index:20; transition:width .3s var(--ease); }
.rail-logo { width:172px; height:auto; margin:0 8px 25px; }
.rail-mark { display:none; }
.rail-edition { font-size:11px; line-height:1.7; color:var(--ink-2); padding:0 10px 23px; }
.rail-edition span { color:var(--muted); }
.rail-head { color:var(--muted); font-size:10px; padding:15px 10px 11px; border-top:1px solid var(--line); margin:0; }
.floors { list-style:none; padding:0; margin:0; overflow-y:auto; flex:1; scrollbar-width:thin; }
.floors li { margin:0 0 3px; }
.floors a { display:grid; grid-template-columns:23px 1fr; gap:8px; align-items:baseline; padding:9px 10px; border-radius:6px; text-decoration:none; color:var(--muted); font-size:11px; line-height:1.5; transition:background .2s,color .2s; }
.floors .num { font-size:9px; font-variant-numeric:tabular-nums; opacity:.8; }
.floors a:hover { color:var(--blue); background:var(--paper); }
.floors a.active { color:var(--blue); background:var(--blue-soft); font-weight:600; }
.rail-foot { padding:16px 10px 0; margin-top:12px; border-top:1px solid var(--line); color:var(--muted); font-size:9px; line-height:1.8; }
.rail-toggle { position:fixed; left:calc(var(--rail-w) - 14px); top:86px; width:28px; height:28px; padding:7px; border:1px solid var(--line); border-radius:50%; background:#fff; cursor:pointer; z-index:25; transition:left .3s; }
.rail-toggle svg { width:100%; height:100%; fill:none; stroke:var(--ink); stroke-width:2; }
.pager { position:fixed; right:24px; bottom:22px; z-index:20; display:flex; align-items:center; gap:8px; padding:6px; background:rgba(255,255,255,.94); backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:40px; box-shadow:0 4px 18px #142B500D; }
.pager button { border:0; width:36px; height:36px; border-radius:50%; cursor:pointer; background:transparent; font-size:20px; }
.pager button:hover { background:var(--blue-soft); color:var(--blue); }
.pager button:disabled { opacity:.3; cursor:default; }
.count { font-variant-numeric:tabular-nums; font-size:11px; min-width:61px; text-align:center; color:var(--ink-2); }

/* Opening spread and page typography. */
main { margin-left:var(--rail-w); transition:margin-left .3s var(--ease); }
.slide { position:relative; padding:86px 5.2% 104px; min-height:100svh; display:flex; flex-direction:column; justify-content:center; border-bottom:1px solid var(--line); }
.wrap { width:100%; max-width:1220px; margin:auto; min-width:0; }
.eyebrow { color:var(--blue); font-size:11px; font-weight:500; margin:0 0 20px; line-height:1.7; }
h1 { font-size:clamp(40px,4.8vw,74px); line-height:1.14; letter-spacing:-.057em; font-weight:600; }
h1 .line { display:block; }
h2 { font-size:clamp(30px,3.15vw,49px); font-weight:600; line-height:1.25; letter-spacing:-.045em; max-width:29ch; margin-bottom:22px; text-wrap:balance; }
h3 { font-size:18px; font-weight:600; line-height:1.45; letter-spacing:-.022em; }
.lead { font-size:16px; line-height:1.9; color:var(--ink-2); max-width:76ch; margin:0 0 34px; }
.note { color:var(--ink-2); font-size:13px; line-height:1.8; padding:20px 24px; background:var(--paper); border-left:2px solid var(--gold); }
.sheet { position:absolute; bottom:30px; left:5.2%; display:flex; gap:20px; font-size:9px; color:var(--muted); align-items:center; }
.sheet .no { color:var(--blue); font-variant-numeric:tabular-nums; }
.cover { background:var(--paper); padding-top:56px; padding-bottom:78px; overflow:hidden; }
.cover .wrap { display:grid; grid-template-columns:.92fr 1.08fr; gap:26px; align-items:center; }
.cover-logo { width:230px; height:auto; margin-bottom:40px; }
.cover .eyebrow { margin-bottom:24px; }
.cover .lead { font-size:15px; max-width:47ch; margin:24px 0; }
.cover .meta { color:var(--muted); font-size:10px; line-height:1.8; max-width:48ch; padding-top:20px; border-top:1px solid #CFDBED; }
.cover .meta p+p { margin-top:9px; }
.cover .meta strong { color:var(--ink-2); }
.cover-principles { display:flex; gap:10px 20px; flex-wrap:wrap; margin-top:25px; font-size:10px; color:var(--ink); }
.cover-principles span::before { content:''; display:inline-block; width:4px; height:4px; background:var(--gold); margin-right:7px; vertical-align:3px; }
.hint { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:10px; margin-top:25px; }
.key { display:grid; place-items:center; width:28px; height:28px; border:1px solid #C4D3E8; border-radius:50%; }
.cover-art { position:relative; min-width:0; align-self:center; }
.cover-art .visual-stage { background:none; border-radius:14px; }
.cover-art .visual-stage img { mix-blend-mode:multiply; width:100%; max-height:720px; object-fit:contain; }
.cover-art figcaption { font-size:9px; text-align:center; margin-top:10px; color:var(--muted); }
.art-label { position:absolute; right:0; top:-10px; z-index:2; font-size:9px; color:var(--ink-2); display:flex; align-items:center; gap:7px; }
.art-label>span { width:6px; height:6px; border-radius:50%; background:var(--gold); }

/* Image-led visual studies with selectable Vietnamese keys. */
.visual-figure { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(230px,.85fr); background:var(--paper); margin:28px 0; border-radius:14px; overflow:hidden; min-width:0; }
.visual-stage { display:block; position:relative; margin:0; padding:0; width:100%; border:0; background:var(--paper); cursor:zoom-in; min-width:0; overflow:hidden; align-self:center; }
.visual-stage img { width:100%; height:auto; display:block; }
.zoom-hint { position:absolute; bottom:15px; right:15px; width:30px; height:30px; display:grid; place-items:center; color:var(--ink); background:#FFFFFFD9; border:1px solid #142B5017; border-radius:50%; font-size:16px; transition:background .2s; }
.visual-stage:hover .zoom-hint { color:#fff; background:var(--blue); }
.visual-copy { padding:30px 25px 28px 20px; align-self:center; min-width:0; }
.visual-copy h3 { font-size:20px; margin:0 0 22px; max-width:22ch; }
.visual-key { list-style:none; padding:0; margin:0; }
.visual-key li { margin:0; padding:12px 0; border-top:1px solid #D5E0EE; }
.visual-key strong { display:block; font-size:12px; color:var(--ink); margin-bottom:4px; line-height:1.6; }
.visual-key span { display:block; font-size:11px; color:var(--ink-2); line-height:1.8; }
figcaption { font-size:11px; color:var(--muted); line-height:1.75; }
.visual-figure>figcaption { grid-column:1/-1; padding:15px 24px; border-top:1px solid var(--line); background:#FFFFFF65; }
.concept-spread { display:grid; grid-template-columns:1.1fr 1fr; gap:52px; align-items:center; margin-top:30px; }
.tower-study { display:block; margin:0; }
.tower-study .visual-stage img { max-height:620px; object-fit:contain; mix-blend-mode:multiply; }
.concept-spread .callouts { display:flex; flex-direction:column; gap:0; }
.concept-spread .callouts li { padding:24px 0; }
.concept-spread .callouts strong { font-size:20px; margin-bottom:10px; }
.concept-spread .callouts p { font-size:13px; }
.architecture-gallery { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.architecture-study { display:block; margin:0; }
.architecture-study .visual-copy { padding:24px; }
.architecture-study .visual-copy h3 { max-width:none; }
.architecture-study .visual-stage img { aspect-ratio:3/2; object-fit:contain; }
.architecture-gallery .callouts { grid-column:1/-1; }
.architecture-gallery .visual-key strong { font-size:12px; }
.architecture-gallery .visual-key span { font-size:11px; }
.roadmap-study { display:block; }
.roadmap-study .visual-stage img { max-height:510px; object-fit:cover; object-position:center; }
.milestones { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; list-style:none; padding:25px 28px 30px; background:#fff; }
.milestones li { border-top:2px solid var(--blue); padding-top:16px; margin:0; }
.milestones li:nth-child(n+4) { border-color:var(--gold); }
.milestones li>span { color:var(--blue); font-size:10px; }
.milestones h3 { font-size:14px; margin:10px 0; }
.milestones p { font-size:11px; color:var(--ink-2); }
.milestones small { display:block; font-size:10px; line-height:1.7; color:var(--muted); margin-top:12px; }

/* Supporting content, arranged with rules and space. */
.cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px; row-gap:8px; margin-top:26px; }
.cards.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.card { padding:25px 0; border-top:1px solid var(--line); position:relative; min-width:0; }
.card h3 { font-size:16px; margin-bottom:11px; }
.card p,.card li { color:var(--ink-2); font-size:14px; line-height:1.85; }
.card .k { font-size:10px; color:var(--blue); margin-bottom:13px; }
.card.control .k { color:var(--red); }
.card.ai .k { color:var(--gold-ink); }
.card.rec { background:var(--blue-soft); padding:25px; border-top:2px solid var(--blue); border-radius:0 0 8px 8px; }
.card .big { font-size:40px; line-height:1.25; letter-spacing:-.05em; font-weight:600; color:var(--ink); margin:16px 0 20px; font-variant-numeric:tabular-nums; }
.card .ico { display:grid; place-items:center; width:36px; height:36px; color:var(--blue); margin-bottom:20px; }
.card .ico svg { width:28px; height:28px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.card.ai .ico { color:var(--gold-ink); }
.card .n { display:none; }
.cols,.cols.even { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.callouts { display:grid; list-style:none; padding:0; gap:16px; }
.callouts.two { grid-template-columns:1fr 1fr; }
.callouts.three { grid-template-columns:repeat(3,1fr); margin-top:12px; }
.callouts li { display:grid; grid-template-columns:32px 1fr; gap:16px; padding:23px 0; margin:0; border-top:1px solid var(--line); }
.callouts .dot { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:10px; background:var(--blue-soft); color:var(--blue); }
.dot.gold { background:var(--gold-soft); color:var(--gold-ink); }
.dot.ink { background:var(--ink); color:#fff; }
.dot.red { background:var(--red-soft); color:var(--red); }
.callouts p { font-size:13px; color:var(--ink-2); line-height:1.9; }
.callouts strong { display:block; color:var(--ink); font-size:14px; margin-bottom:8px; }
.rules { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin:24px 0; }
.rule { padding-top:20px; border-top:2px solid var(--gold); font-size:11px; color:var(--ink-2); }
.rule strong { display:block; margin-bottom:10px; color:var(--ink); font-size:12px; }
.benefit-banner { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; background:var(--paper); border-radius:12px; overflow:hidden; margin:26px 0; }
.benefit-banner>div { padding:38px; }
.benefit-banner p { font-size:14px; color:var(--ink-2); }
.benefit-banner h3 { font-size:32px; margin-top:7px; letter-spacing:-.04em; }
.benefit-banner img { width:100%; height:250px; object-fit:cover; mix-blend-mode:multiply; }
.next-session { display:grid; grid-template-columns:1.3fr 1fr; align-items:center; margin-top:35px; background:var(--paper); border-radius:12px; overflow:hidden; }
.next-session>div { padding:40px; }
.next-session h3 { font-size:32px; line-height:1.3; letter-spacing:-.045em; margin-bottom:18px; }
.next-session p:not(.eyebrow) { font-size:13px; color:var(--ink-2); }
.next-session img { width:100%; height:330px; object-fit:cover; object-position:50% 57%; mix-blend-mode:multiply; }
.print-deck { display:inline-flex; align-items:center; gap:25px; padding:11px 16px; background:var(--blue); color:white; border:0; border-radius:5px; font-size:11px; margin-top:24px; cursor:pointer; }
.print-deck:hover { background:var(--ink); }

/* Precise financial data stays native and accessible. */
.table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:9px; margin-top:28px; }
table { width:100%; border-collapse:collapse; min-width:760px; font-size:11px; line-height:1.9; }
th,td { text-align:left; vertical-align:top; padding:17px 16px; border-bottom:1px solid var(--line); }
th { font-size:10px; font-weight:600; background:var(--paper); color:var(--ink); }
td { color:var(--ink-2); }
td:first-child { width:20%; font-weight:600; color:var(--ink); }
tbody tr:last-child td { border-bottom:0; }
.rec { background:var(--blue-soft); }
th.rec { background:var(--blue); color:#fff; }
.sub { display:block; font-size:9px; font-weight:400; color:var(--muted); margin-top:4px; }
.badge { display:inline-block; padding:2px 7px; margin-top:8px; border-radius:3px; background:#FFFFFF24; font-size:9px; }
.mk { display:inline-grid; place-items:center; width:17px; height:17px; border-radius:50%; margin-right:5px; font-size:10px; font-weight:600; }
.mk.yes { color:var(--green); background:var(--green-soft); }
.mk.no { color:var(--red); background:var(--red-soft); }
.mk.mid { color:var(--gold-ink); background:var(--gold-soft); }
.cost-composition { padding:30px; background:var(--ink); border-radius:12px; color:#fff; margin:26px 0; }
.cost-heading { display:flex; justify-content:space-between; align-items:center; gap:30px; }
.cost-heading .eyebrow { color:#BDCEE7; margin-bottom:6px; }
.cost-heading h3 { font-size:18px; }
.cost-share { font-size:70px; line-height:1.2; font-weight:500; letter-spacing:-.06em; }
.cost-share>span { font-size:28px; }
.cost-bar { display:flex; gap:3px; height:14px; margin:25px 0; border-radius:3px; overflow:hidden; }
.cost-bar>span:first-child { background:#87A7EA; }
.cost-bar>span:last-child { background:var(--gold); }
.cost-legend { display:flex; justify-content:space-between; flex-wrap:wrap; gap:22px; }
.cost-legend p { display:grid; grid-template-columns:10px 1fr; column-gap:8px; margin:0; }
.cost-legend strong { font-size:15px; }
.cost-legend span { grid-column:2; font-size:10px; color:#BDCEE7; }
.cost-legend i { width:6px; height:6px; border-radius:50%; background:#87A7EA; margin-top:10px; }
.cost-legend p:last-child i { background:var(--gold); }
.cost-composition figcaption { color:#BDCEE7; border-top:1px solid #FFFFFF2B; padding-top:18px; margin-top:24px; }
.src { font-size:10px; color:var(--muted); line-height:1.9; margin-top:22px; }
.sources { padding:0; list-style:none; columns:2; column-gap:40px; font-size:11px; }
.sources li { break-inside:avoid; padding:14px 0; border-top:1px solid var(--line); color:var(--ink-2); }
.sources a { overflow-wrap:anywhere; font-size:10px; }
.footer { border-top:1px solid var(--line); display:flex; gap:22px; align-items:center; margin-top:35px; padding-top:25px; font-size:10px; color:var(--muted); }
.footer img { width:45px; height:45px; }
.footer strong { color:var(--ink); }
#noi-that .callouts { max-width:940px; }
#noi-that .callouts li { grid-template-columns:42px 1fr; padding:30px 0; }
#noi-that .dot { width:38px; height:38px; }
#noi-that .callouts strong { font-size:18px; }
#nguon { background:#F9FBFE; }

/* Native image dialog. */
.image-dialog { width:min(1240px,94vw); max-height:94svh; padding:0; border:0; border-radius:12px; background:var(--paper); box-shadow:0 30px 100px #0005; }
.image-dialog::backdrop { background:#0D2144B8; backdrop-filter:blur(6px); }
.image-dialog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 22px; background:#fff; position:sticky; top:0; z-index:1; }
.image-dialog-toolbar p { font-size:12px; }
.image-dialog-close { display:flex; gap:18px; align-items:center; cursor:pointer; border:0; background:var(--paper); border-radius:5px; padding:8px 14px; font-size:12px; }
.image-dialog-close span { font-size:22px; line-height:1; }
.image-dialog-image { width:100%; max-height:75svh; object-fit:contain; }
.image-dialog-caption { padding:14px 24px 20px; font-size:12px; color:var(--ink-2); margin:0; }
body:has(.image-dialog[open]) { overflow:hidden; }

@media(min-width:1100px) {
  :root[data-rail="collapsed"] { --rail-w:68px; }
  [data-rail="collapsed"] .rail { padding:26px 10px 16px; }
  [data-rail="collapsed"] .rail-logo,[data-rail="collapsed"] .rail-head,[data-rail="collapsed"] .rail-edition,[data-rail="collapsed"] .rail-foot { display:none; }
  [data-rail="collapsed"] .rail-mark { display:block; width:38px; height:38px; margin:0 auto 42px; }
  [data-rail="collapsed"] .floors a { grid-template-columns:1fr; text-align:center; padding:10px 4px; }
  [data-rail="collapsed"] .floors a>span:last-child { display:none; }
  [data-rail="collapsed"] .floors .num { font-size:10px; }
  [data-rail="collapsed"] .rail-toggle svg { transform:rotate(180deg); }
}
@media(min-width:1700px) {
  .slide { padding-left:7%; padding-right:7%; }
  .cover .lead,.lead { font-size:18px; }
  .card p,.card li,.callouts p { font-size:14px; }
  .visual-key strong { font-size:13px; }
  .visual-key span { font-size:12px; }
}
@media(max-width:1250px) {
  .slide { padding-left:4%; padding-right:4%; }
  .cover .wrap { gap:15px; }
  h1 { font-size:clamp(38px,4.6vw,60px); }
  .cover-logo { margin-bottom:28px; width:210px; }
  .visual-figure { grid-template-columns:1.55fr 1fr; }
  .visual-copy { padding:22px 20px; }
  .visual-copy h3 { font-size:18px; }
  .cards.three { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .concept-spread { gap:28px; }
  .milestones { gap:14px; padding:24px 20px; }
}
@media(max-width:1099px) {
  :root { --rail-w:0px; }
  html { scroll-padding-top:62px; }
  .rail { inset:0 0 auto; width:100%; height:62px; padding:0 16px; flex-direction:row; align-items:center; gap:22px; border-right:0; border-bottom:1px solid var(--line); }
  .rail-logo { width:120px; height:auto; margin:0; flex:none; }
  .rail-mark,.rail-edition,.rail-head,.rail-foot,.rail-toggle { display:none; }
  .floors { display:flex; gap:4px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; align-items:center; }
  .floors::-webkit-scrollbar { display:none; }
  .floors li { margin:0; flex:none; }
  .floors a { display:block; white-space:nowrap; padding:8px 12px; font-size:11px; }
  .floors .num { display:none; }
  main { margin:0; }
  .slide { padding:95px 6% 95px; min-height:auto; }
  .cover { padding-top:110px; min-height:100svh; }
  h1 { font-size:clamp(40px,5.7vw,64px); }
  .sheet { left:6%; bottom:28px; }
  .cards.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .concept-spread .callouts strong { font-size:18px; }
  .milestones { grid-template-columns:repeat(3,1fr); row-gap:28px; }
}
@media(max-width:760px) {
  .slide { padding:80px 24px 90px; }
  .cover { padding-top:102px; }
  .cover .wrap { grid-template-columns:1fr; gap:24px; }
  .cover .wrap>div { display:contents; }
  .cover .eyebrow { order:0; margin:0; }
  .cover h1 { order:1; }
  .cover .lead { order:2; margin:0; }
  .cover .cover-art { order:3; }
  .cover .meta { order:4; }
  .cover .cover-principles { order:5; margin:0; }
  .cover .hint { order:6; margin:0; }
  .cover-logo { display:none; }
  .cover h1 { font-size:clamp(45px,9vw,64px); }
  .cover h1 .line { display:inline; }
  .cover h1 .line+.line::before { content:' '; }
  .cover .lead { max-width:57ch; }
  .cover .meta { max-width:58ch; }
  .cover-art { max-width:480px; margin:auto; width:100%; }
  .cover-art .visual-stage img { max-height:560px; }
  .art-label { top:0; right:10px; }
  .cover-principles { margin-top:20px; }
  h2 { font-size:32px; max-width:28ch; }
  .lead { font-size:14px; line-height:1.85; margin-bottom:28px; }
  .visual-figure { display:block; margin:24px 0; }
  .visual-copy { padding:25px; }
  .visual-copy h3 { max-width:none; font-size:21px; }
  .visual-key { display:grid; grid-template-columns:1fr 1fr; column-gap:24px; }
  .visual-key strong { font-size:12px; }
  .visual-key span { font-size:11px; }
  .visual-figure>figcaption { padding:17px 25px; }
  .concept-spread { grid-template-columns:1fr; gap:5px; }
  .tower-study { margin:0; }
  .tower-study .visual-stage img { max-height:530px; }
  .concept-spread .callouts { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .concept-spread .callouts li { grid-template-columns:1fr; gap:12px; }
  .concept-spread .callouts strong { font-size:17px; }
  .concept-spread .callouts p { font-size:12px; }
  .architecture-gallery { grid-template-columns:1fr; gap:5px; }
  .architecture-gallery .callouts { grid-template-columns:1fr; }
  .architecture-study .visual-stage img { max-height:420px; }
  .cards.three,.cards,.cols,.cols.even { grid-template-columns:1fr 1fr; gap:10px 24px; }
  .rules { grid-template-columns:1fr; gap:22px; }
  .card p,.card li,.callouts p { font-size:13px; }
  .benefit-banner>div { padding:25px; }
  .benefit-banner h3 { font-size:23px; }
  .benefit-banner p { font-size:12px; }
  .benefit-banner img { height:220px; }
  .next-session>div { padding:26px; }
  .next-session h3 { font-size:25px; }
  .next-session img { height:330px; }
  .sources { columns:1; }
  .sheet { left:24px; bottom:30px; }
  .sheet span:first-child { display:none; }
  .pager { bottom:14px; right:14px; }
  .cost-heading { gap:20px; }
  .cost-share { font-size:56px; }
}
@media(max-width:480px) {
  .rail { padding:0 12px; gap:14px; }
  .rail-logo { width:100px; }
  .rail .floors a { font-size:10px; }
  .slide { padding-left:20px; padding-right:20px; }
  .cover h1 { font-size:44px; }
  .cover .eyebrow { font-size:10px; }
  h2 { font-size:29px; letter-spacing:-.04em; }
  .eyebrow { font-size:10px; margin-bottom:17px; }
  .cover .lead { font-size:14px; }
  .cover-principles { gap:8px 15px; font-size:9px; }
  .cover-art .visual-stage img { max-height:440px; }
  .visual-copy { padding:22px; }
  .visual-key { grid-template-columns:1fr; }
  .cards.three,.cards,.cols,.cols.even,.concept-spread .callouts,.callouts.two { grid-template-columns:1fr; }
  .concept-spread .callouts li { grid-template-columns:32px 1fr; gap:16px; }
  .milestones { grid-template-columns:1fr 1fr; gap:25px 20px; }
  .milestones li:last-child { grid-column:1/-1; }
  .benefit-banner { grid-template-columns:1fr; }
  .benefit-banner>div { padding-bottom:0; }
  .benefit-banner img { height:210px; object-fit:contain; }
  .next-session { grid-template-columns:1fr; }
  .next-session img { height:250px; object-fit:contain; }
  .next-session>div { padding-bottom:10px; }
  .cost-composition { padding:24px; }
  .cost-heading { align-items:flex-start; }
  .cost-heading h3 { font-size:13px; }
  .cost-heading .eyebrow { font-size:9px; }
  .cost-share { font-size:44px; }
  .cost-share>span { font-size:20px; }
  .footer { align-items:flex-start; gap:15px; }
  .footer img { width:35px; height:35px; }
  #noi-that .callouts li { grid-template-columns:30px 1fr; gap:14px; }
  #noi-that .dot { width:28px; height:28px; }
  #noi-that .callouts strong { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none !important; animation:none !important; }
}
@media print {
  @page { size:A4 landscape; margin:12mm; }
  :root { --rail-w:0px; }
  html { scroll-behavior:auto; }
  body { font-size:10px; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .rail,.rail-toggle,.progress,.pager,.hint,.sheet,.skip-link,.zoom-hint,.print-deck,.image-dialog { display:none !important; }
  main { margin:0; }
  .slide { display:block; min-height:0; padding:10px 0; break-before:page; border:0; }
  .slide:first-child { break-before:auto; }
  .wrap { max-width:none; }
  h1 { font-size:43px; }
  h2 { font-size:25px; max-width:none; margin-bottom:10px; }
  .eyebrow { margin-bottom:10px; font-size:9px; }
  .lead,.cover .lead { font-size:10px; line-height:1.65; margin:12px 0 16px; max-width:100ch; }
  .cover .wrap { display:grid; grid-template-columns:1fr 1fr; }
  .cover .wrap>div { display:block; }
  .cover-logo { display:block; width:180px; margin-bottom:20px; }
  .cover .visual-stage img { height:480px; }
  .cover .meta { font-size:8px; }
  .cover-principles { font-size:8px; }
  .art-label { font-size:8px; top:0; }
  .visual-figure { display:grid; grid-template-columns:1.7fr 1fr; margin:14px 0; break-inside:avoid; }
  .visual-stage { cursor:default; }
  .visual-stage img { max-height:200px; object-fit:contain; }
  .visual-copy { padding:16px; }
  .visual-copy h3 { font-size:14px; margin-bottom:10px; }
  .visual-key { display:block; }
  .visual-key li { padding:7px 0; }
  .visual-key strong { font-size:9px; }
  .visual-key span { font-size:8px; }
  .visual-figure>figcaption { padding:9px 16px; font-size:8px; }
  .concept-spread { grid-template-columns:1fr 1fr; gap:35px; }
  .tower-study { display:block; }
  .tower-study .visual-stage img { height:420px; max-height:420px; }
  .concept-spread .callouts { display:block; }
  .concept-spread .callouts li { padding:15px 0; }
  .concept-spread .callouts strong { font-size:14px; }
  .concept-spread .callouts p { font-size:10px; }
  .architecture-gallery { grid-template-columns:1fr 1fr; gap:18px; }
  .architecture-study { display:block; }
  .architecture-study .visual-stage img { height:150px; }
  .architecture-study .visual-copy { padding:12px; }
  #kien-truc .visual-stage img { height:120px; }
  #kien-truc .visual-copy { padding:8px; }
  #kien-truc .architecture-gallery { gap:12px; }
  #kien-truc .visual-key li { padding:5px 0; }
  .architecture-study .visual-key strong { font-size:9px; }
  .architecture-study .visual-key span { font-size:8px; }
  .cards,.cards.three { grid-template-columns:repeat(3,1fr); gap:15px; margin-top:14px; }
  #lop-ai .cards { grid-template-columns:repeat(4,1fr); }
  .cols.even { grid-template-columns:1fr 1fr; }
  .card { padding:10px 0; break-inside:avoid; }
  .card p,.card li,.callouts p { font-size:9px; line-height:1.6; }
  .card h3,.callouts strong { font-size:11px; margin-bottom:6px; }
  .card .k { font-size:8px; margin-bottom:6px; }
  .card .big { font-size:28px; }
  .callouts.three { grid-template-columns:repeat(3,1fr); }
  .callouts li { break-inside:avoid; padding:10px 0; }
  .rules { grid-template-columns:repeat(3,1fr); gap:18px; margin:12px 0; }
  .rule { padding-top:10px; }
  .rule,.rule strong,.note,.src { font-size:8px; }
  .note { padding:10px 12px; }
  .src { margin-top:10px; }
  .roadmap-study { display:block; }
  .roadmap-study .visual-stage img { max-height:220px; object-fit:contain; }
  .milestones { grid-template-columns:repeat(5,1fr); padding:16px; }
  .milestones li:last-child { grid-column:auto; }
  .milestones h3 { font-size:11px; }
  .milestones p,.milestones small,.milestones li>span { font-size:8px; }
  table { min-width:0; font-size:9px; }
  th { font-size:8px; }
  th,td { padding:7px 10px; }
  tr { break-inside:avoid; }
  .table-scroll { overflow:visible; }
  .cost-composition { break-inside:avoid; padding:20px; }
  #chi-phi>.wrap>h3 { break-before:page; padding-top:10px; }
  .benefit-banner { grid-template-columns:1fr 1fr; }
  .benefit-banner img { height:170px; }
  .next-session { grid-template-columns:1.3fr 1fr; break-inside:avoid; }
  .next-session img { height:210px; }
  .next-session h3 { font-size:25px; }
  .sources { columns:2; font-size:9px; }
  .sources li { padding:6px 0; margin-bottom:4px; }
  .sources a,.footer { font-size:8px; }
}