/* An Quý — vòng 5 "Chữ chính là người": chữ là chất liệu trang trí chính (art typography).
   Noto Serif Display (dòng Bodoni, đủ dấu tiếng Việt) cho tít lớn, NVN Motherland Signature cho chữ ký, Montserrat cho thân bài và nhãn (UTM Avo bỏ 03/11: nét răng cưa trên Windows). Hướng thiết kế: DESIGN.md §Vòng 5 */
/* Font thương hiệu (tự lưu, tập con Latin + tiếng Việt): NVN Motherland Signature cho chữ ký.
   Noto Serif Display và Montserrat tải từ Google Fonts. */
@font-face { font-family: "NVN Motherland Signature"; src: url("/assets/fonts/motherland.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0000-002B, U+002D-FFFF; } /* dấu phẩy của font này vẽ như dấu chấm → để dấu phẩy rơi xuống Noto Serif Display */
:root {
  --white: #FFFFFF;
  --paper: #F3F5F1;        /* giấy trắng ngả xanh lạnh, không kem */
  --leaf: #E1ECE3;         /* xanh áo dài trong ảnh bìa */
  --ink: #101613;
  --ink-2: #49534D;
  --green: #0D3A2B;        /* xanh Sống Xanh */
  --green-2: #17573F;
  --son: #C9331C;          /* son — "bút sắt, lòng son"; cũng là màu đường nhịp */
  --son-2: #A82814;
  --sun: #F2C230;          /* vàng hoa, chỉ trên nền xanh */
  --line: rgba(16, 22, 19, .14);
  --line-on: rgba(255, 255, 255, .2);
  --w: 1320px;
  --g: clamp(16px, 3.4vw, 48px);
  --wrapw: min(100vw - 2 * var(--g), var(--w));
  --bleed: calc((100vw - var(--wrapw)) / 2);
  --bar: 64px;
  --serif: "Montserrat", system-ui, sans-serif;   /* thân bài (tên biến giữ nguyên cho gọn) */
  --sans: "Montserrat", system-ui, sans-serif;      /* nhãn, điều hướng, nút */
  --hand: "Patrick Hand", "Be Vietnam Pro", cursive;
  --disp: "Noto Serif Display", "Libre Bodoni", Georgia, serif;   /* thay Bodoni Moda: Bodoni Moda không có chữ tiếng Việt (thiếu ế ồ ậ ơ ư) */
  --pen: "NVN Motherland Signature", "Noto Serif Display", cursive;
  /* thang chữ co giãn */
  --f-0: clamp(.8125rem, .79rem + .1vw, .875rem);
  --f-1: clamp(1rem, .96rem + .2vw, 1.125rem);
  --f-2: clamp(1.2rem, 1.08rem + .55vw, 1.5rem);
  --f-3: clamp(1.5rem, 1.18rem + 1.4vw, 2.35rem);
  --f-4: clamp(2.1rem, 1.4rem + 3vw, 4rem);
  --f-5: clamp(2.9rem, 1.6rem + 5.6vw, 7rem);
  --f-6: clamp(5.4rem, 1.4rem + 16vw, 19rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 16px); }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 var(--f-1)/1.6 var(--serif); font-optical-sizing: auto; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--son); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.wrap { width: var(--wrapw); margin-inline: auto; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--white); padding: 10px 14px; z-index: 50; }
.skip:focus { left: 8px; }
.ico { width: 1.1em; height: 1.1em; flex: none; }

/* Mảnh dùng lại */
.kick { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font: 700 .78rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.pil { font: italic 700 1.9em/1 var(--disp); letter-spacing: 0; text-transform: none; margin-top: -.12em; }
.kick--son { color: var(--son); }
.kick--sun { color: var(--sun); }
.ref { margin-left: 1px; vertical-align: super; font: 600 .6em/1 var(--sans); color: var(--son); text-decoration: none; padding: 0 .15em; }
.ref:hover { text-decoration: underline; }
.cap { margin: 10px 0 0; font: 400 .8125rem/1.5 var(--sans); color: var(--ink-2); }
.cap__c { white-space: nowrap; }
.cap--on-dark, .cap--on-dark .ref { color: rgba(255, 255, 255, .74); }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 14px 24px; border: 0; border-radius: 2px; background: var(--son); color: var(--white); font: 700 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s; }
.btn:hover { background: var(--green); }
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--sun); }
.btn--ghost { min-height: 44px; padding: 10px 16px; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); font-size: .9375rem; }
.btn--ghost:hover { background: var(--ink); color: var(--white); }
.more { display: inline-flex; align-items: center; gap: 8px; font: 700 .9375rem/1.2 var(--sans); text-decoration: none; padding: 12px 0; border-bottom: 2px solid currentColor; }
.more:hover { color: var(--son); }
.sechead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(24px, 3.4vw, 44px); }
.sechead__t { margin: 0; font: 800 var(--f-4)/1 var(--serif); letter-spacing: -.035em; }
.seal { width: 100%; height: auto; font-family: var(--sans); }
.seal__mono { font-family: var(--serif); }

/* Thanh trên */
.bar { position: sticky; top: 0; z-index: 30; height: var(--bar); background: rgba(255, 255, 255, .95); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); }
.bar__in { height: 100%; width: var(--wrapw); margin-inline: auto; display: flex; align-items: center; gap: 24px; }
.bar__logo { display: inline-flex; align-items: center; font: 400 1.75rem/1 var(--pen); white-space: nowrap; text-decoration: none; color: var(--son); padding-top: .1em; }
.bar__nav { display: flex; gap: 4px 22px; margin-left: auto; font: 600 .9375rem/1 var(--sans); }
.bar__nav a { text-decoration: none; padding: 22px 0 20px; border-bottom: 2px solid transparent; }
.bar__nav a:hover { color: var(--son); }
.bar__nav a[aria-current="page"] { border-bottom-color: var(--son); }
.bar__cta { font: 700 .875rem/1 var(--sans); text-decoration: none; padding: 12px 16px; background: var(--son); color: var(--white); border-radius: 2px; white-space: nowrap; }
.bar__cta:hover { background: var(--son-2); }

/* ===== TRANG BÌA ===== */
.hero { --ph-w: 56vw; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--ph-w); grid-template-rows: auto 1fr auto auto; column-gap: clamp(20px, 3vw, 48px);
  min-height: calc(100svh - var(--bar)); padding: 22px var(--g) 0; background: var(--paper); overflow: hidden; }
.hero__issue { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; font: 700 .78rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.hero__issue span:first-child { color: var(--son); }
.hero__name { grid-column: 1 / -1; grid-row: 2; align-self: end; position: relative; z-index: 4; margin: 0 0 .22em; pointer-events: none;
  font: 800 clamp(5rem, 1rem + 10.2vw, 13rem)/.8 var(--serif); letter-spacing: -.045em; color: var(--green); }
.hero__an, .hero__quy { display: block; }
.hero__quy { margin-left: 1.55em; padding-bottom: .12em; }
.hero__ph { grid-column: 2; grid-row: 1 / 5; position: relative; z-index: 0; margin: -22px calc(-1 * var(--g)) 0 0; }
.hero__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero__ph .cap { position: absolute; right: 28px; bottom: 26px; z-index: 2; max-width: 30ch; margin: 0; padding: 8px 12px 8px 34px; background: rgba(255, 255, 255, .9); font-size: .72rem; line-height: 1.35; }
.hero__ph .cap::before { left: 10px !important; }
.hero__seal { position: absolute; left: -64px; top: 12%; width: 128px; color: var(--son); transform: rotate(-12deg); z-index: 3; }
.hero__lines { grid-column: 1; grid-row: 3; position: relative; z-index: 2; max-width: 26rem; padding-bottom: clamp(32px, 5vw, 64px); }
.hero__big { margin-bottom: 26px !important; }
.hero__big { margin: 0 0 10px; font: 500 var(--f-3)/1.15 var(--serif); letter-spacing: -.015em; }
.hero__big { font-family: var(--disp) !important; font-weight: 500 !important; letter-spacing: -.01em; }
.hero__big b { font-style: italic; font-weight: 800; color: var(--son); }
.hero__list { list-style: none; margin: 0 0 22px; padding: 0; font: 400 var(--f-0)/1.5 var(--sans); color: var(--ink-2); }
.hero__list li { padding: 7px 0; border-top: 1px solid var(--line); }
.hero__list b { color: var(--ink); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin: 0; }
/* Lời của cha */
.say { background: var(--green); color: var(--white); padding: clamp(80px, 12vw, 180px) 0 clamp(64px, 9vw, 130px); }
.say__t { margin: 0; font: 800 var(--f-5)/.95 var(--serif); font-size: clamp(3.4rem, 1.6rem + 8vw, 11rem); letter-spacing: -.045em; }
.say__t .w:last-child { color: var(--sun); }
.say__by { margin: .9em 0 0; padding-top: clamp(48px, 5vw, 72px); font: 600 var(--f-0)/1.5 var(--sans); color: rgba(255, 255, 255, .78); }
.say__cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px clamp(24px, 5vw, 80px); margin-top: clamp(48px, 7vw, 96px); padding-top: 28px; border-top: 1px solid var(--line-on); }
.say__cols p { margin: 0; color: rgba(255, 255, 255, .86); }
.say__cols .say__lead { font: italic 500 var(--f-3)/1.15 var(--disp); letter-spacing: -.02em; color: var(--white); }
.say .ref { color: var(--sun); }

/* Bài đặc biệt: lưới vỡ, ảnh tràn trái, thẻ chữ đè lên ảnh */
.feat { position: relative; display: grid; grid-template-columns: var(--bleed) minmax(0, 6fr) minmax(0, 5fr) var(--bleed); padding: clamp(64px, 9vw, 140px) 0 clamp(56px, 7vw, 100px); background: var(--leaf); }
.feat__ph { grid-column: 1 / 3; grid-row: 1; }
.feat__ph img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.feat__card { grid-column: 3; grid-row: 1 / 3; position: relative; z-index: 2; margin: clamp(80px, 12vw, 200px) 0 0 clamp(-140px, -8vw, -40px); padding: clamp(24px, 3.6vw, 56px); background: var(--white); align-self: start; }
.feat__t { margin: 0 0 18px; font: 800 var(--f-4)/1 var(--serif); letter-spacing: -.035em; }
.feat__s { margin: 0 0 24px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin: 0; }
.facts div { padding: 12px 0; border-top: 1px solid var(--line); }
.facts dt { font: 700 .72rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--son); }
.facts dd { margin: 4px 0 0; font: 500 .9375rem/1.45 var(--sans); }
.parts { margin: 20px 0 0; padding-left: 1.3em; font: 500 .9375rem/1.5 var(--sans); }
.feat__q { grid-column: 2; grid-row: 2; position: relative; z-index: 2; max-width: 600px; margin: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 64px) 0 0; }
.feat__q p { margin: 0; font: italic 500 var(--f-3)/1.2 var(--disp); letter-spacing: -.015em; color: var(--green); }
.feat__q p::before { content: "“"; display: block; font: 800 5rem/.6 var(--serif); color: var(--son); margin-bottom: 12px; }
.feat__q footer { margin-top: 14px; font: 600 var(--f-0) var(--sans); color: var(--ink-2); }
.feat__cap { grid-column: 2 / 4; grid-row: 3; margin: 32px 0 0; }

/* Trang đôi trích dẫn */
.vow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 28vw); gap: clamp(28px, 6vw, 110px); align-items: start; padding: clamp(72px, 10vw, 160px) var(--bleed) clamp(40px, 5vw, 80px); background: var(--white); }
.vow__q { margin: 0; }
.vow__q blockquote { margin: 0; }
.vow__q p { margin: 0; font: 500 var(--f-4)/1.1 var(--serif); font-size: clamp(1.6rem, 1.1rem + 2.4vw, 3.4rem); letter-spacing: -.025em; }
.vow__q p::before { content: "“"; display: block; font: 800 7rem/.55 var(--serif); color: var(--son); margin-bottom: 18px; }
.vow__q figcaption { margin-top: 22px; font: 600 var(--f-0) var(--sans); color: var(--ink-2); }
.vow__ph { margin-top: clamp(40px, 9vw, 150px); }
.vow__ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.vow--dark { background: var(--green); color: var(--white); }
.vow--dark figcaption { color: rgba(255, 255, 255, .74); }
.vow--dark .ref { color: var(--sun); }
.vow--dark .vow__q p::before { color: var(--sun); }

/* Con số — mỗi ô là một container, cỡ số theo bề rộng ô */
.nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 32px clamp(20px, 3vw, 40px); padding: clamp(64px, 8vw, 110px) 0; }
.num { container-type: inline-size; border-top: 4px solid var(--ink); padding-top: 14px; }
.num__n { margin: 0; font: 800 clamp(2.6rem, 21cqi, 5.6rem)/1 var(--serif); letter-spacing: -.04em; white-space: nowrap; }
.num__n a { text-decoration: none; }
.num__n a:hover { color: var(--son); }
.num__l { margin: 10px 0 0; font: 400 var(--f-0)/1.45 var(--sans); color: var(--ink-2); }

/* Bài chọn đọc: kiểu trang mục lục */
.index { padding-bottom: clamp(72px, 9vw, 130px); }
.index__l { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.index__l li { display: grid; grid-template-columns: 13rem minmax(0, 1fr) minmax(0, .8fr); gap: 8px clamp(20px, 3vw, 44px); align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.index__m { margin: 0; display: flex; flex-direction: column; gap: 2px; font: 700 .75rem/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--son); }
.index__m time { color: var(--ink-2); letter-spacing: .04em; }
.index__t { margin: 0; font: 700 var(--f-2)/1.2 var(--serif); letter-spacing: -.015em; }
.index__t a { text-decoration: none; }
.index__t a:hover { color: var(--son); text-decoration: underline; }
.index__s { margin: 0; font: 400 .875rem/1.5 var(--sans); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Lời mời */
.invite { background: var(--son); color: var(--white); padding: clamp(72px, 10vw, 150px) 0; }
.invite__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 6vw, 100px); align-items: end; }
.invite__t { margin: 0; font: 800 var(--f-4)/1 var(--serif); letter-spacing: -.04em; }
.invite__p { margin: 0 0 18px; }
.invite__list { list-style: none; margin: 0 0 28px; padding: 0; font: 600 .9375rem/1.4 var(--sans); }
.invite__list li { padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .32); }

/* Chân trang */
.foot { background: var(--green); color: var(--white); padding: 0 0 40px; }
.foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid var(--line-on); }
.foot__sign { display: grid; grid-template-columns: auto auto; gap: 0 18px; align-items: center; }
.foot__seal { grid-row: span 2; width: 84px; color: var(--sun); }
.foot__name { margin: 0; font: 800 2.6rem/1 var(--serif); letter-spacing: -.03em; }
.foot__motto { margin: 4px 0 0; font: 500 1.125rem var(--serif); color: rgba(255, 255, 255, .8); }
.foot__nav { display: flex; flex-wrap: wrap; gap: 0 24px; font: 600 .9375rem var(--sans); }
.foot__nav a { text-decoration: none; padding: 12px 0; }
.foot__nav a:hover { color: var(--sun); }
.foot__src { padding-top: 28px; }
.foot__h { margin: 0 0 10px; font: 700 .8125rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--sun); }
.src { margin: 0; padding-left: 1.4em; columns: 2 24rem; column-gap: 48px; font: 400 .875rem/1.45 var(--sans); }
.src li { break-inside: avoid; padding: 4px 0; }
.src span { color: rgba(255, 255, 255, .64); }
.src li:target { background: rgba(242, 194, 48, .16); }
.foot__meta { margin: 24px 0 0; font: 400 .8125rem/1.5 var(--sans); color: rgba(255, 255, 255, .64); }

/* ===== CÂU CHUYỆN ===== */
.opener { position: relative; min-height: min(88svh, 900px); display: grid; align-items: end; color: var(--white); background: var(--green); overflow: hidden; }
.opener__ph { position: absolute; inset: 0; }
.opener__ph img { width: 100%; height: 100%; object-fit: cover; }
.opener__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 30, 22, .9) 0%, rgba(8, 30, 22, .62) 42%, rgba(8, 30, 22, .08) 75%), linear-gradient(to top, rgba(8, 30, 22, .7), transparent 50%); }
.opener__in { position: relative; width: var(--wrapw); margin: 0 auto; padding-bottom: clamp(56px, 8vw, 110px); }
.opener__t { margin: 0; max-width: 11ch; font: 800 var(--f-5)/.92 var(--serif); letter-spacing: -.045em; }
.opener__s { margin: 22px 0 0; max-width: 36rem; font-size: var(--f-2); line-height: 1.4; color: rgba(255, 255, 255, .88); }
.opener__cap { position: absolute; right: var(--g); bottom: 16px; max-width: 34ch; text-align: right; }

.story { width: var(--wrapw); margin: 0 auto; padding: clamp(56px, 8vw, 120px) 0 0; }
.ch { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 20px clamp(28px, 5vw, 80px); padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--line); }
.ch__h { grid-column: 1; margin: 0; font: 800 var(--f-4)/1 var(--serif); letter-spacing: -.035em; align-self: start; position: sticky; top: calc(var(--bar) + 24px); }
.ch__text { grid-column: 2; max-width: 40rem; font-size: var(--f-2); line-height: 1.55; }
.ch__text p { margin: 0 0 1em; }
.ch__text p:first-child::first-letter { float: left; font: 800 4.4em/.8 var(--serif); margin: .06em .1em 0 0; color: var(--son); }
.ch__ph { grid-column: 2; margin-right: calc(-1 * var(--bleed)); }
.ch__ph img { width: 100%; max-height: 78vh; object-fit: cover; }
.ch__ph .cap { margin-right: var(--bleed); max-width: 46rem; }
.ch:nth-of-type(even) .ch__ph { grid-column: 1 / -1; margin: 12px 0 0 calc(-1 * var(--bleed)); width: calc(70% + var(--bleed)); }
.ch:nth-of-type(even) .ch__ph .cap { margin: 10px 0 0 var(--bleed); }
.midq { margin: clamp(40px, 6vw, 80px) calc(-1 * var(--bleed)); padding: clamp(64px, 9vw, 130px) var(--bleed); background: var(--green); color: var(--white); }
.midq blockquote { margin: 0; }
.midq p { margin: 0; max-width: 22ch; font: 800 var(--f-4)/1.05 var(--disp); letter-spacing: -.03em; color: var(--sun); }
.midq figcaption { margin-top: 20px; font: 600 var(--f-0) var(--sans); color: rgba(255, 255, 255, .8); }
.midq .ref { color: var(--sun); }

/* Lộ trình: dải kéo ngang, đường nhịp chạy qua các mốc */
.road { padding: clamp(72px, 9vw, 130px) 0; background: var(--leaf); }
.road__hint { margin: 0; display: inline-flex; gap: 8px; align-items: center; font: 600 .875rem var(--sans); color: var(--ink-2); }
.road__l { list-style: none; margin: 0; padding: 0 var(--bleed) 18px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 23vw); gap: 0;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bleed); scrollbar-width: thin; }
.road__l:focus-visible { outline-offset: -3px; }
.road__i { scroll-snap-align: start; position: relative; padding: 48px 28px 0 0; }
.road__i::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 2px; background: var(--green); }
.road__i::after { content: ""; position: absolute; left: 0; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--leaf); border: 3px solid var(--son); }
.road__d { display: block; font: 800 var(--f-3)/1.05 var(--serif); letter-spacing: -.02em; color: var(--green); }
.road__v { display: block; margin-top: 12px; font: 400 .9375rem/1.5 var(--sans); }

.quotes { padding: clamp(72px, 9vw, 130px) 0; }
.quotes__grid { columns: 3 18rem; column-gap: clamp(24px, 3vw, 44px); }
.qcard { break-inside: avoid; margin: 0 0 clamp(24px, 3vw, 44px); padding-top: 18px; border-top: 2px solid var(--ink); }
.qcard blockquote { margin: 0; }
.qcard p { margin: 0; font: 500 var(--f-2)/1.4 var(--serif); }
.qcard p::before { content: "“"; color: var(--son); font-weight: 900; }
.qcard figcaption { margin-top: 10px; font: 600 .8125rem var(--sans); color: var(--ink-2); }

/* ===== TÁC PHẨM ===== */
.pagehead { padding: clamp(56px, 8vw, 120px) 0 clamp(32px, 4vw, 56px); }
.pagehead__t { margin: 0; font: 800 var(--f-5)/.92 var(--serif); letter-spacing: -.045em; }
.pagehead__n { display: block; font-size: 1.9em; line-height: .8; color: var(--son); letter-spacing: -.045em; }
.pagehead__s { max-width: 46rem; margin: 22px 0 0; font: 400 var(--f-0)/1.55 var(--sans); color: var(--ink-2); }
.pagehead--dark { background: var(--green); color: var(--white); padding-bottom: 0; overflow: hidden; }
.pagehead--dark .pagehead__s { font: 400 var(--f-2)/1.45 var(--serif); color: rgba(255, 255, 255, .88); max-width: 40rem; }
.pagehead__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; }
.pagehead__seal { width: clamp(150px, 18vw, 250px); color: var(--sun); transform: rotate(-10deg); }

.archive { padding-bottom: clamp(64px, 8vw, 120px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip { min-height: 44px; padding: 10px 14px; border: 1.5px solid var(--ink); border-radius: 2px; background: transparent; color: var(--ink); font: 600 .875rem/1 var(--sans); cursor: pointer; transition: background-color .15s, color .15s; }
.chip b { margin-left: 6px; font-weight: 800; color: var(--son); }
.chip:hover { background: var(--paper); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.chip[aria-pressed="true"] b { color: var(--sun); }

.archive__n { margin: 0 0 8px; font: 600 .875rem var(--sans); color: var(--ink-2); }

.rows { list-style: none; margin: 0 0 24px; padding: 0; }
.row { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 11rem; gap: 6px 28px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); }
.row[hidden] { display: none; }
.row__d { font: 600 .8125rem var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.row__t { margin: 0; font: 700 var(--f-2)/1.25 var(--serif); font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }
.row__t a { text-decoration: none; }
.row__t a:hover { color: var(--son); text-decoration: underline; }
.row__s { margin: 6px 0 0; font: 400 .875rem/1.5 var(--sans); color: var(--ink-2); max-width: 60ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row__a { margin: 4px 0 0; font: 500 .8125rem var(--sans); color: var(--ink-2); }
.row__m { font: 700 .72rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--son); text-align: right; }

.gallery-wrap { background: var(--paper); padding: clamp(64px, 9vw, 120px) 0; }
.gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--g); align-items: start; }
.gallery .ph { grid-column: span 2; margin: 0; }
.gallery .g2, .gallery .g5 { grid-column: span 4; }
.gallery .g3 { margin-top: 12vw; }
.ph { margin: 0; }

/* ===== HỢP TÁC ===== */
.svc { padding: clamp(40px, 6vw, 80px) 0; }
.svc__i { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px clamp(24px, 5vw, 80px); align-items: baseline; padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--line); }
.svc__i:first-child { border-top: 2px solid var(--ink); }
.svc__t { margin: 0; font: 800 var(--f-4)/1 var(--serif); letter-spacing: -.035em; transition: color .15s; }
.svc__i:hover .svc__t { color: var(--son); }
.svc__p { margin: 0; font-size: var(--f-2); line-height: 1.45; color: var(--ink-2); }
.contact { padding: clamp(40px, 6vw, 80px) 0; }
.contact__l { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 32px; }
.contact__l div { padding: 14px 0; border-top: 1px solid var(--line); }
.contact__l dt { font: 700 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--son); }
.contact__l dd { margin: 4px 0 0; font: 600 var(--f-2) var(--serif); overflow-wrap: anywhere; }
.contact__none { margin: 0; font-size: var(--f-2); color: var(--ink-2); }
.kit { padding: clamp(40px, 6vw, 80px) 0 clamp(72px, 9vw, 130px); }
.kit__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(28px, 5vw, 72px); align-items: start; }
.kit__d { border-top: 2px solid var(--ink); }
.kit__d:last-child { border-bottom: 1px solid var(--line); }
.kit__d summary { display: flex; align-items: center; padding: 18px 0; cursor: pointer; list-style: none; font: 800 var(--f-3)/1.1 var(--serif); letter-spacing: -.02em; }
.kit__d summary::-webkit-details-marker { display: none; }
.kit__d summary::after { content: "+"; margin-left: auto; font: 400 2rem/1 var(--sans); color: var(--son); }
.kit__d[open] summary::after { content: "−"; }
.kit__body { padding-bottom: 24px; }
.kit__body p { margin: 0 0 16px; }
.kit__ok { margin-left: 12px; font: 600 .875rem var(--sans); color: var(--green-2); }
.kit__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kit__imgs a { display: grid; gap: 8px; text-decoration: none; font: 700 .875rem var(--sans); }
.kit__imgs a span { display: inline-flex; align-items: center; gap: 6px; }
.kit__imgs a:hover span { color: var(--son); }
.kit__imgs img { aspect-ratio: 4 / 5; object-fit: cover; }
.kit__imgs .cap { grid-column: 1 / -1; }

/* Dấu sửa ở bản nháp */
.cd { background: none; color: var(--son); font: 400 1.05em/1.3 var(--hand); padding: 0 .2em; border-bottom: 1.5px dashed var(--son); }
.cd__k { font: 700 .62em var(--sans); text-transform: uppercase; letter-spacing: .06em; }
.cd__k::before { content: "‸ "; }

/* ===== CHỮ NGHỆ THUẬT — chữ là chất liệu trang trí, vì đây là trang của người viết =====
   Noto Serif Display: nét thanh nét đậm tương phản mạnh (dòng Bodoni, đủ dấu tiếng Việt), như chữ khắc in báo cũ; nghiêng = nét tay người viết.
   NVN Motherland Signature: nét bút ký, chỉ dùng cho chữ ký và câu "Bút sắt, lòng son". */
.sechead__t, .feat__t, .invite__t, .opener__t, .ch__h, .svc__t, .kit__d summary, .road__d, .midq p, .pagehead__t, .yr__y {
  font-family: var(--disp); font-weight: 800; letter-spacing: -.02em; font-optical-sizing: auto; }
.sechead__t, .invite__t, .opener__t { font-weight: 900; }
.invite__t em, .opener__t em { font-style: italic; font-weight: 500; }
.hero__name { font-family: var(--disp); font-weight: 900; letter-spacing: -.03em; line-height: .86; }
.hero__quy { font-style: italic; font-weight: 700; }
.hero__sig { position: absolute; left: .2em; top: 4.45em; z-index: 5; font: 700 .2em/1 var(--pen); letter-spacing: 0; color: var(--son); white-space: nowrap; transform: rotate(-7deg); }

/* Dải đề tài: tường chữ */
.band { padding: clamp(56px, 8vw, 120px) var(--g); background: var(--white); text-align: center; border-bottom: 1px solid var(--line); }
.band__l { margin: 0 auto; max-width: 1280px; font: 900 clamp(1.6rem, .7rem + 3.6vw, 4.4rem)/1.18 var(--disp); letter-spacing: -.025em; text-wrap: balance; }
.band__w { text-decoration: none; white-space: nowrap; transition: color .15s; }
.band__w--1 { font-style: italic; font-weight: 500; color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.band__w--2 { font-style: italic; color: var(--son); }
.band__w:hover { color: var(--green); -webkit-text-stroke-color: var(--green); }
.band__w--1:hover { color: var(--green); }
.band__w sup { font: 700 .16em/1 var(--sans); letter-spacing: .06em; vertical-align: super; margin-left: .3em; color: var(--ink-2); -webkit-text-stroke: 0; }
.band__s { display: inline-block; margin: 0 .2em; font: italic 400 .8em/1 var(--disp); color: var(--son); }

/* "Chữ chính là người." — ba cỡ, ba nét */
.say__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .18em; font-family: var(--disp); letter-spacing: -.02em; font-size: clamp(3.4rem, 1rem + 11vw, 13rem); line-height: .9; }
.say__t .w--a { font-style: italic; font-weight: 900; }
.say__t .w--b { font: 500 .26em/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; align-self: center; }
.say__t .w--c { font: 700 1.2em/.8 var(--pen); letter-spacing: 0; color: var(--sun); padding: 0 .1em; }

/* Số lớn: chữ viền rỗng, rê chuột thì đổ mực */
.num__n { font-family: var(--disp); font-weight: 900; letter-spacing: -.02em; }
.num__n a:hover { color: var(--son); }

/* Dấu ngoặc, chữ hoa đầu đoạn */
.vow__q p::before, .feat__q p::before { font-family: var(--disp); font-style: normal; font-weight: 900; }
.vow__q p, .qcard p { font-family: var(--disp); font-weight: 500; letter-spacing: -.01em; }
.ch__text p:first-child::first-letter { font: italic 900 5.2em/.78 var(--disp); }

/* Trang Tác phẩm: con số lớn + chữ ký "bài viết" */
.pagehead__t--works { display: grid; }
.pagehead__t--works .pagehead__n { font: 900 clamp(8rem, 2rem + 24vw, 24rem)/.8 var(--disp); letter-spacing: -.04em; font-size: clamp(8rem, 2rem + 24vw, 24rem); }
.pagehead__w { justify-self: start; margin: -.42em 0 0 2.2em; font: 700 1.2em/1 var(--pen); letter-spacing: 0; color: var(--ink); transform: rotate(-5deg); }

/* Danh sách đánh số: số lớn là bài mới nhất, đếm lùi về số 1 */
.rows { border-top: 2px solid var(--ink); }
.row { grid-template-columns: 6.5rem minmax(0, 1fr) 11rem; }
.row__no { font: italic 600 clamp(2rem, 1.4rem + 1.6vw, 3rem)/1 var(--disp); color: var(--son); font-variant-numeric: lining-nums tabular-nums; }
.row__t { font-family: var(--serif); font-weight: 700; letter-spacing: -.01em; }
.index__m { gap: 6px; }
.index__no { font: italic 600 2.4rem/1 var(--disp); letter-spacing: 0; text-transform: none; color: var(--son); }
.index__t { font-family: var(--serif); font-weight: 700; }

/* Chữ ký bút ngòi */
.foot__name { font: 700 3.4rem/1 var(--pen); letter-spacing: 0; color: var(--sun); }
.foot__big { margin: 0; padding: clamp(48px, 7vw, 96px) var(--g) clamp(20px, 3vw, 36px); text-align: center; font: 700 clamp(3.6rem, 1rem + 10vw, 10rem)/1 var(--pen); color: var(--sun); }
.pagehead__sig { margin: 28px 0 0; padding: 0 var(--g) 32px; text-align: right; font: 700 clamp(3.4rem, 1rem + 8vw, 8.5rem)/1 var(--pen); color: var(--sun); }


/* Câu nói của An Quý — chữ lớn, cụm then chốt in nghiêng màu son */
.hl { font-style: italic; color: var(--son); }
.say .hl, .midq .hl, .vow--dark .hl { color: var(--sun); }
.say__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(28px, 5vw, 80px); align-items: center; margin-top: clamp(48px, 6vw, 88px); }
.say__ph .cap, .say__ph .cap .ref { color: rgba(255, 255, 255, .7); }
.say__q { margin: 0; }
.say__q blockquote { margin: 0; }
.say__q p { margin: 0; font: 500 clamp(1.5rem, 1rem + 1.9vw, 2.9rem)/1.22 var(--disp); letter-spacing: -.01em; }
.say__q p::before { content: "“"; display: block; font: 900 7rem/.55 var(--disp); color: var(--sun); margin-bottom: 14px; }
.say__q figcaption { margin-top: 18px; font: 600 var(--f-0) var(--sans); color: rgba(255, 255, 255, .78); }

.voices { padding: clamp(80px, 11vw, 170px) 0; background: var(--paper); overflow: hidden; }
.voices__t { margin: 0 0 clamp(40px, 6vw, 88px); font: 900 var(--f-5)/.95 var(--disp); letter-spacing: -.025em; }
.voices__t em { font-weight: 500; color: var(--son); }
.voices__l { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(56px, 8vw, 120px); }
.voice { position: relative; max-width: 30ch; font-size: clamp(1.9rem, 1rem + 3.6vw, 4.6rem); }
.voice blockquote { margin: 0; }
.voice blockquote p { margin: 0; font: 500 1em/1.12 var(--disp); letter-spacing: -.02em; }
.voice::before { content: "“"; position: absolute; left: -.12em; top: -.5em; z-index: -1; font: 900 4.6em/1 var(--disp); color: rgba(201, 51, 28, .14); pointer-events: none; }
.voice { isolation: isolate; }
.voice--1 { justify-self: end; text-align: right; }
.voice--1::before { left: auto; right: -.05em; }
.voice--2 { justify-self: center; font-size: clamp(1.6rem, 1rem + 2.6vw, 3.6rem); }
.voice--2 blockquote p { font-style: italic; }
.voice__by { margin: 18px 0 0; font: 700 .8125rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.invite__t em, .opener__t em { font-style: italic; font-weight: 500; }
@media (max-width: 960px) { .say__grid { grid-template-columns: minmax(0, 1fr); } .voice--1 { text-align: left; justify-self: start; } }

/* ===== CHI TIẾT ĐẠO DIỄN NGHỆ THUẬT =====
   Một ngôn ngữ: mặt báo. Khung chỉ mảnh trong ảnh, kẻ đôi tiêu đề mục, chú thích nghiêng có gạch son,
   mảng màu lệch như bản in lệch màu, đường kẻ đôi của mặt báo. */
::selection { background: var(--son); color: var(--white); }
html { scrollbar-color: var(--green) var(--paper); }
a:not(.btn):not(.bar__cta):not(.ref):not(.band__w) { text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color .15s, color .15s; }
a:not(.btn):not(.bar__cta):not(.ref):not(.band__w):hover { text-decoration-color: currentColor; }
.vow__q p, .say__q p, .voice blockquote p, .feat__q p { hanging-punctuation: first; }
.voice blockquote p::first-letter { initial-letter: auto; }
.hero__big, .num__n, .pagehead__n, .row__no, .index__no, .road__d { font-variant-numeric: lining-nums; }
.say__q p, .vow__q p, .voice blockquote p { font-variant-numeric: oldstyle-nums; }

/* Một cách xử lý ảnh duy nhất cho cả trang: khung chỉ trắng lồng trong, góc 2px.
   Ảnh (trừ ảnh bìa) cùng một lớp màu nhẹ để 8 ảnh từ nhiều buổi chụp đọc như một bộ. */
.ph-frame, .ph, .ch__ph, .kit__imgs a { position: relative; }
.ph-frame::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255, 255, 255, .72); pointer-events: none; z-index: 1; }
.ph-frame:has(> figure)::after { display: none; }
.ph-frame > figure, .ph { position: relative; }
.ph > img + .cap { position: static; }
img { border-radius: 2px; }
main img:not(.hero__ph img):not(.opener__ph img) { filter: saturate(.86) contrast(1.04) sepia(.06); }
.hero__ph::after { inset: 16px; }
/* Chú thích ảnh: gạch son ngắn + nghiêng */
.ph .cap, .feat__cap, .say__ph .cap { position: relative; }
.ph .cap, .feat__cap, .say__ph .cap, .hero__ph .cap { padding-left: 34px; font-style: italic; }
.ph .cap::before, .feat__cap::before, .say__ph .cap::before { content: ""; position: absolute; left: 0; top: .72em; width: 22px; height: 1px; background: var(--son); }
.say__ph .cap::before { background: var(--sun); }

/* Tiêu đề mục: kẻ đôi của mặt báo */
.sechead { position: relative; padding-top: 22px; border-top: 1px solid var(--ink); }
.sechead::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 3px; background: var(--ink); }
.road .sechead, .gallery-wrap .sechead { border-top-color: var(--green); }

/* Nút: nét chì trong khi rê */
.btn { box-shadow: inset 0 0 0 1px transparent; }
.btn:hover { box-shadow: inset 0 0 0 1px var(--sun); }
.bar { border-bottom: 0; box-shadow: 0 1px 0 var(--line), 0 4px 0 -3px var(--line); }

@media print { .ph-frame::after { display: none; } }

/* ===== CHUYỂN ĐỘNG — chỉ khi người xem không tắt chuyển động; không JS vẫn hiện đủ ===== */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .bar__logo { view-transition-name: logo; }
  .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .hero__an, .js .hero__quy { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .js .hero__quy { animation-delay: .12s; }
  .js .hero__ph img { animation: settle 1.6s cubic-bezier(.2, .7, .2, 1) both; }
  .js .hero__seal { animation: stamp .5s cubic-bezier(.3, 1.6, .5, 1) .9s both; }
  @keyframes rise { from { opacity: 0; transform: translateY(.18em); } }
  @keyframes settle { from { transform: scale(1.06); } }
  @keyframes stamp { from { opacity: 0; transform: rotate(-12deg) scale(1.5); } }
  /* "Chữ chính là người." — từng chữ sáng dần theo cuộn (CSS scroll-driven, trình duyệt chưa hỗ trợ thì hiện sẵn) */
  @supports (animation-timeline: view()) {
    .say__t .w { animation: lit linear both; animation-timeline: view(); animation-range: entry calc(20% + var(--i) * 15%) cover calc(30% + var(--i) * 6%); }
    @keyframes lit { from { color: rgba(255, 255, 255, .16); } }
    .feat__ph img { animation: drift linear both; animation-timeline: view(); }
    @keyframes drift { from { transform: scale(1.12) translateY(-3%); } to { transform: scale(1.02) translateY(2%); } }
    .feat__ph { overflow: hidden; }
  }
}

/* ===== Bề ngang hẹp ===== */
@media (max-width: 1080px) {
  .index__l li { grid-template-columns: 10rem minmax(0, 1fr); }
  .index__s { grid-column: 2; }
  .row { grid-template-columns: 5rem minmax(0, 1fr); }
  .row__m { grid-column: 2; text-align: left; }
}
@media (max-width: 960px) {
  .bar__nav { display: none; }
  .bar__cta { margin-left: auto; }
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; min-height: 0; padding-top: 18px; }
  .hero__issue, .hero__name, .hero__ph, .hero__lines { grid-column: 1; grid-row: auto; }
  .hero__name { font-size: clamp(5rem, 27vw, 13rem); margin: 18px 0 -.2em; }
  .hero__quy { margin-left: .9em; }
  .hero__ph { margin: 0 calc(-1 * var(--g)); }
  .hero__ph::after { display: none; }
  .hero__ph img { position: static; aspect-ratio: 4 / 4.4; height: auto; }
  .hero__seal { left: auto; right: 14px; top: auto; bottom: 20px; width: 96px; }
  .hero__ph .cap { position: static; max-width: none; padding: 8px var(--g) 0; background: none; font-size: .75rem; }
  .hero__lines { padding: 24px 0 8px; }
  .say__cols, .invite__in, .kit__grid, .svc__i, .pagehead__in { grid-template-columns: minmax(0, 1fr); }
  .feat { grid-template-columns: var(--g) minmax(0, 1fr) var(--g); }
  .feat__ph { grid-column: 1 / -1; grid-row: 1; }
  .feat__card { grid-column: 2; grid-row: 2; margin: -48px 0 0; }
  .feat__q { grid-column: 2; grid-row: 3; margin: 36px 0 0; }
  .feat__cap { grid-column: 2; grid-row: 4; }
  .vow { grid-template-columns: minmax(0, 1fr); }
  .vow__ph { margin-top: 0; width: min(72%, 360px); margin-left: auto; }
  .ch { grid-template-columns: minmax(0, 1fr); }
  .ch__h { position: static; }
  .ch__text, .ch__ph { grid-column: 1; }
  .ch__ph, .ch:nth-of-type(even) .ch__ph { width: auto; margin: 8px calc(-1 * var(--bleed)) 0; }
  .ch__ph .cap, .ch:nth-of-type(even) .ch__ph .cap { margin: 10px var(--bleed) 0; }
  .road__l { grid-auto-columns: minmax(240px, 72vw); }
  .gallery { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cap__c { white-space: normal; }
  .gallery .ph, .gallery .g2, .gallery .g5 { grid-column: span 1; }
  .gallery .g2, .gallery .g5 { grid-column: 1 / -1; }
  .gallery .g3 { margin-top: 0; }
  .pagehead__seal { display: none; }
  .opener__cap { position: relative; right: auto; bottom: auto; text-align: left; width: var(--wrapw); margin: -36px auto 16px; }
}
@media (max-width: 620px) {
  .index__l li { grid-template-columns: minmax(0, 1fr); }
  .index__s { grid-column: 1; }
  .facts { grid-template-columns: 1fr; }
  .row { grid-template-columns: 3.4rem minmax(0, 1fr); gap: 4px 12px; }
  .row__m { grid-column: 2; }
  .hero__sig { left: 8.7em; top: 2.6em; font-size: .15em; }
  .bar__logo { font-size: 1.5rem; }
  .kit__imgs { grid-template-columns: 1fr 1fr; }
  .foot__name { font-size: 2rem; }
}
@media print { .bar, .btn, .chips { display: none; } .say, .feat, .foot, .invite, .midq, .vow--dark, .pagehead--dark { background: #fff; color: #000; } }

/* Ảnh chia sẻ 1200×630 (trang /_og/, chup.mjs chụp thành og.png) */
.og { position: relative; width: 1200px; height: 630px; margin: 0; overflow: hidden; display: grid; grid-template-columns: 640px 560px; background: #0D3A2B; color: #fff; }
.og__l { padding: 52px 0 0 60px; position: relative; z-index: 2; }
.og__i { margin: 0; font: 700 18px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #F2C230; }
.og__n { margin: 14px 0 0; font: 800 210px/.78 var(--serif); letter-spacing: -.055em; }
.og__r { margin: 34px 0 0; font: 700 20px var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.og__a { margin: 12px 0 0; font: 600 26px var(--serif); color: #F2C230; }
.og__p { width: 560px; height: 630px; object-fit: cover; object-position: 50% 22%; }
.og__seal { position: absolute; left: 560px; bottom: 54px; width: 140px; color: #C9331C; transform: rotate(-12deg); z-index: 3; }