/* ==========================================================================
   STYLES BÁO CÁO THƯỜNG NIÊN TRI ÂN 20/11 (PHƯƠNG ÁN 19 - MODULE PRODUCTION)
   Chủ đề: Gieo mầm tri thức · Vững bước vươn xa
   Tuân thủ: Defensive CSS Box Containment (Mục 7.6 & AGENTS.md Rule 8)
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --red: #B3002D;
  --red-deep: #7E0020;
  --red-soft: #FFF0F3;
  --ink: #141414;
  --paper: #FFFFFF;
  --warm: #F3F0EC;
  --warm-2: #EAE4DC;
  --rule: #D6D0C9;
  --rule-strong: #141414;
  --muted: #59534E;
  --on-red: #FFE3E9;
  --gold: #8A6528;
  --focus: #141414;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --serif: 'Noto Serif Display', Georgia, 'Times New Roman', serif;
  --letter-scale: 1;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Defensive CSS Box Containment */
body, div, section, article, main, aside, header, footer, nav, figure, figcaption,
p, h1, h2, h3, h4, blockquote, span, a, button, label, input, textarea, select, form, details, summary {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

h1, h2, h3, h4, p, figure, blockquote {
  margin: 0;
}

a {
  color: inherit;
  text-underline-offset: 5px;
}

button, input, textarea, select {
  font: inherit;
}

button, a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

svg, img {
  display: block;
  max-width: 100%;
  height: auto;
}

button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus, #141414);
  outline-offset: 5px;
}

[hidden] {
  display: none !important;
}

.skip {
  display: block;
  padding: 8px 20px;
  background: #fff;
  color: #111;
  font-weight: 600;
}
.skip:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  clip-path: inset(50%);
}

.shell {
  width: min(1240px, calc(100% - 96px));
  margin-inline: auto;
}

.eyebrow {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 23px;
  text-decoration: none;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  min-height: 48px;
  line-height: 1.5;
  text-align: center;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* Mode visibility (F09: Chuyển sang chế độ lưu niệm sau 20/11) */
body[data-mode="archival"] .only-receiving { display: none !important; }
body[data-mode="receiving"] .only-archival { display: none !important; }
body[data-env="production"] .admin-preview-only { display: none !important; }

/* Top Edition & Mode Bar */
.studio {
  background: var(--ink);
  color: #E9E6E2;
  border-bottom: 1px solid #333;
  padding: 10px 24px;
  font-size: 12px;
  line-height: 1.55;
}
.studio-inner {
  width: min(1240px, 100%);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: space-between;
  align-items: center;
}
.studio-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.studio-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.studio nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.studio a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.mode-switch-btn {
  background: #262626;
  color: #FFE3E9;
  border: 1px solid #666;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mode-switch-btn:hover {
  background: var(--red);
  border-color: #fff;
  color: #fff;
}

/* Hero Cover (Annual Report Cover Spread) */
.hero {
  background: var(--red);
  color: #fff;
  --focus: #fff;
  padding-bottom: 68px;
  animation: wipe 1s cubic-bezier(.76,0,.24,1) both;
}
.top {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}
.mark {
  font-weight: 700;
  letter-spacing: -.01em;
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
}
.mark small {
  font-weight: 500;
  color: var(--on-red);
  font-size: 13px;
}
.top nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}
.top nav a {
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.top nav a:hover {
  text-decoration: underline;
}
.btn-line {
  border-color: #fff;
  color: #fff;
  min-height: 44px;
  padding: 9px 18px;
  font-weight: 600;
}
.btn-line:hover {
  background: rgb(255 255 255 / .12);
}
.meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgb(255 255 255 / .55);
  border-bottom: 1px solid rgb(255 255 255 / .25);
  font-size: 12px;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--on-red);
}
.meta span {
  padding: 12px 16px 12px 0;
  border-right: 1px solid rgb(255 255 255 / .25);
}
.meta span + span {
  padding-left: 16px;
}
.meta span:last-child {
  border-right: 0;
}
.numerals {
  margin: 14px 0 0;
}
.numerals svg {
  width: 100%;
}
.num-stroke {
  fill: rgb(255 255 255 / .06);
  stroke: #fff;
  stroke-width: 1.4;
  stroke-dasharray: 1400;
  stroke-dashoffset: 0;
  animation: draw 2s cubic-bezier(.6,0,.2,1) .35s both;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7.6fr) minmax(0, 4.4fr);
  gap: 44px;
  align-items: start;
  margin-top: 24px;
}
.kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-red);
}
h1 {
  font-size: clamp(36px, 5.2vw, 78px);
  line-height: 1.05;
  letter-spacing: -.04em;
  font-weight: 800;
  margin: 10px 0 18px;
}
h1 .line {
  display: block;
  overflow: hidden;
  padding-top: .16em;
  margin-top: -.12em;
  padding-bottom: .08em;
}
h1 .line > span {
  display: inline-block;
  animation: rise .9s cubic-bezier(.2,.8,.2,1) both;
}
h1 .line:nth-child(1) > span { animation-delay: .55s; }
h1 .line:nth-child(2) > span { animation-delay: .7s; }
h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.02em;
  display: inline-block;
}
.hero-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.45;
  color: var(--on-red);
  border-left: 2px solid #fff;
  padding-left: 16px;
  margin: 0 0 16px;
  max-width: 600px;
  animation: fade .8s ease 1s both;
}
.lead {
  font-size: 18px;
  line-height: 1.62;
  max-width: 640px;
  color: #fff;
  animation: fade .8s ease 1.1s both;
}
.hero .action-row {
  margin-top: 24px;
  animation: fade .8s ease 1.25s both;
}
.btn-solid {
  background: #fff;
  color: var(--red);
  border-color: #fff;
  font-weight: 700;
}
.btn-solid:hover {
  background: var(--on-red);
}
.hero-status {
  margin-top: 18px;
  padding: 10px 14px;
  background: rgb(0 0 0 / .22);
  border-left: 3px solid #fff;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--on-red);
  max-width: 640px;
}
.hero-status strong {
  color: #fff;
}

/* Figures Aside (616 Hours Specification Box) */
.figures {
  background: var(--red-deep);
  padding: 24px 26px;
  border: 1px solid rgb(255 255 255 / .22);
  animation: fade .8s ease .9s both;
}
.fig-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--on-red);
  border-bottom: 1px solid rgb(255 255 255 / .3);
  padding-bottom: 12px;
}
.fig-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 14px 0 8px;
}
.fig-total b {
  font-size: clamp(60px, 6vw, 92px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.fig-total > span {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}
.bar {
  display: grid;
  grid-template-columns: 192fr 400fr 24fr;
  gap: 3px;
  height: 12px;
  margin: 16px 0 18px;
}
.seg {
  background: #fff;
  transform-origin: left;
  animation: grow 1.4s cubic-bezier(.2,.8,.2,1) both;
}
.seg:nth-child(2) { background: #FF9DB1; animation-delay: .12s; }
.seg:nth-child(3) { background: #FFE3E9; animation-delay: .24s; }
.fig-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.fig-rows div {
  border-top: 1px solid rgb(255 255 255 / .28);
  padding: 9px 0;
  display: grid;
  grid-template-columns: minmax(0, 72px) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}
.fig-rows b {
  display: block;
  font-size: 26px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.fig-rows small {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--on-red);
}
.fig-rows i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  background: #fff;
}
.fig-rows div:nth-child(2) i { background: #FF9DB1; }
.fig-rows div:nth-child(3) i { background: #FFE3E9; }
.fig-meta-row {
  border-top: 1px solid rgb(255 255 255 / .28);
  padding-top: 10px;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--on-red);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
}
.fig-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--on-red);
}
#replay-figures {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid #fff;
  color: #fff;
  background: transparent;
  font-weight: 600;
  font-size: 13.5px;
}
#replay-figures:hover {
  background: #fff;
  color: var(--red-deep);
}
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}

/* Sticky Chapter Index (F01) */
.index {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgb(255 255 255 / .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.index ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.index li {
  border-left: 1px solid var(--rule);
}
.index li:last-child {
  border-right: 1px solid var(--rule);
}
.index a {
  display: block;
  padding: 14px 14px 16px;
  text-decoration: none;
  min-height: 44px;
  height: 100%;
  border-bottom: 3px solid transparent;
  transition: background .2s, border-color .2s;
}
.index a:hover {
  background: var(--warm);
}
.index a[aria-current="location"] {
  background: var(--red-soft);
  border-bottom-color: var(--red);
}
.index small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
}
.index span {
  display: block;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.32;
  margin-top: 4px;
}

/* Report Spreads */
.spread {
  padding: 92px 0;
  border-bottom: 1px solid var(--rule);
}
.spread.warm {
  background: var(--warm);
}
.grid12 {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 52px;
  align-items: start;
}
.chap {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
}
.chap-num {
  display: block;
  font-size: clamp(76px, 9.5vw, 138px);
  line-height: .9;
  font-weight: 800;
  letter-spacing: -.06em;
  color: var(--red);
  margin: 10px 0 16px;
  font-variant-numeric: tabular-nums;
}
h2 {
  text-wrap: balance;
  font-size: clamp(28px, 3.3vw, 44px);
  line-height: 1.14;
  letter-spacing: -.03em;
  font-weight: 700;
}
.side-note {
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 340px;
}

/* Chapter 01: Letter Reader Tools & Formatting (F02) */
.letter-tools {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 340px;
}
.letter-tools-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.size-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.size-btn {
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.size-btn[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.tool-btn {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tool-btn:hover {
  background: var(--warm);
}
.tool-status {
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
}

.letter-sheet {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--red);
  padding: clamp(24px, 4vw, 48px);
  max-width: 760px;
}
.letter-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--rule);
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.letter {
  font-size: calc(18px * var(--letter-scale));
  line-height: 1.75;
}
.letter p + p {
  margin-top: 18px;
}
.letter .salute {
  font-family: var(--serif);
  font-size: calc(26px * var(--letter-scale));
  line-height: 1.38;
  font-weight: 500;
  color: var(--ink);
}
.pull {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(23px, 2.3vw, 32px);
  line-height: 1.38;
  color: var(--red);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 22px 0;
  margin: 28px 0 !important;
}
.academy-tribute-box {
  background: var(--warm);
  border-left: 4px solid var(--red);
  padding: 18px 20px;
  margin: 24px 0;
  font-size: calc(16px * var(--letter-scale));
}
.academy-tribute-box strong {
  display: block;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
}
.sign-row {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
.sign {
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.5;
}
.sign span {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
}
.draft {
  display: inline-block;
  margin-top: 20px;
  font-size: 12.5px;
  color: var(--muted);
  border: 1px solid var(--rule);
  background: var(--warm);
  padding: 6px 12px;
}

/* Chapter 02: Messages & Recipient Filter (F03, F04, Section 6.2 & 9.2) */
.head-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  justify-content: space-between;
  align-items: end;
}
.head-row p {
  max-width: 500px;
  color: var(--muted);
  font-size: 16px;
}
.filter-bar {
  margin-top: 32px;
  padding: 16px 20px;
  background: var(--paper);
  border: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px 24px;
}
.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.filter-btn {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  background: var(--warm);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}
.filter-btn:hover {
  border-color: var(--ink);
}
.filter-btn[aria-pressed="true"] {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.filter-meta {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.messages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 28px;
  margin-top: 32px;
}
.msg {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ink);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.msg[data-recipient-type="hoc-vien"],
.msg[data-recipient-type="vtg"] {
  border-top-color: var(--red);
}
.msg-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 10px;
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.msg-head span:first-child {
  color: var(--muted);
}
.msg-head span:last-child {
  color: var(--red);
}
.msg-to {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}
.msg-to strong {
  color: var(--ink);
}
.msg blockquote {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.48;
  color: var(--ink);
}
.msg-promise {
  background: var(--warm);
  border-left: 3px solid var(--red);
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}
.msg-promise strong {
  font-weight: 700;
  color: var(--red);
}
.msg-author {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
}
.msg-author small {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.empty-state-box {
  margin-top: 32px;
  padding: 36px 28px;
  background: var(--paper);
  border: 2px dashed var(--rule);
  text-align: center;
}
.empty-state-box h3 {
  font-family: var(--serif);
  font-size: 24px;
  margin-bottom: 10px;
}
.empty-state-box p {
  max-width: 560px;
  margin: 0 auto 20px;
  color: var(--muted);
  font-size: 15.5px;
}
.contribute-strip {
  margin-top: 40px;
  padding: 24px 28px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--red);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px 32px;
}
.contribute-strip-copy h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}
.contribute-strip-copy p {
  font-size: 14.5px;
  color: var(--muted);
  max-width: 620px;
}
.btn-red {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  font-weight: 600;
}
.btn-red:hover {
  background: var(--red-deep);
}
.btn-ink {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper);
  font-weight: 600;
}
.btn-ink:hover {
  background: var(--warm);
}

/* Chapter 03: Stories (Section 5.1) & 8 Curriculum Topics Table (Section 2.2) */
.sub-kicker {
  margin-top: 48px;
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 10px;
}
.sub-kicker h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sub-kicker span {
  font-size: 13.5px;
  color: var(--muted);
}
.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.story-card {
  background: var(--warm);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--red);
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.story-card[data-course="vtaca-01"],
.story-card[data-course="vtaca-04"] {
  border-top-color: var(--ink);
}
.story-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
}
.story-card h4 {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.32;
  font-weight: 500;
  color: var(--ink);
}
.story-card p {
  font-size: 15.5px;
  line-height: 1.65;
  color: #2C2A28;
}
.story-tag {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  color: var(--muted);
}

.topics {
  margin-top: 12px;
  border-top: 1px solid var(--rule);
}
.topic-head, .topic {
  display: grid;
  grid-template-columns: minmax(0, .45fr) minmax(0, 2.7fr) minmax(0, 3fr) minmax(0, 2.4fr) minmax(0, 1.45fr);
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.topic-head {
  font-size: 11.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}
.topic b {
  font-size: 15px;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.topic h3 {
  font-size: 16.5px;
  line-height: 1.42;
  font-weight: 600;
  letter-spacing: -.01em;
}
.topic p {
  font-size: 15px;
  line-height: 1.55;
  color: #2c2a28;
}
.topic p + p {
  color: var(--muted);
}
.topic-prompt-btn {
  min-height: 44px;
  padding: 7px 12px;
  border: 1px solid var(--rule);
  background: var(--warm);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}
.topic-prompt-btn:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.source {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
}

/* Chapter 04: Documentary Gallery & Lightbox (F05, Section 7.5 & 8.5) */
.gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.frame {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--red);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
.frame[hidden] {
  display: none !important;
}
.frame[data-gallery-cat="giang-duong"],
.frame[data-gallery-cat="hoc-vien"] {
  border-top-color: var(--ink);
}
.frame-visual {
  margin: 14px 14px 0;
  border: 1px solid var(--rule);
  background: #F7F4F0;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.frame-visual svg, .frame-visual img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .35s ease;
}
.frame[data-orientation="landscape"] .frame-visual img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.frame[data-orientation="portrait"] .frame-visual img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.frame-visual:hover img {
  transform: scale(1.02);
}
.frame figcaption {
  padding: 14px 16px 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.fig-meta-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
}
.frame figcaption b {
  display: block;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.38;
}
.frame-foot {
  padding: 0 16px 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.privacy-tag {
  font-size: 12px;
  color: var(--muted);
  flex: 1 1 150px;
  min-width: 0;
}
.zoom-btn {
  min-height: 44px;
  padding: 7px 14px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  margin-left: auto;
  flex-shrink: 0;
}
.zoom-btn:hover {
  background: var(--ink);
  color: #fff;
}
.f1 { grid-column: span 7; }
.f2 { grid-column: span 5; }
.f3, .f4, .f5 { grid-column: span 4; }
.f6 { grid-column: span 12; }
.f-half { grid-column: span 6; }
.f-third { grid-column: span 4; }
.f-quarter { grid-column: span 3; }

/* Chapter 05: Collective Promise (Section 5.1 Part 6) */
.promise {
  background: var(--red);
  color: #fff;
  --focus: #fff;
  padding: 96px 0;
}
.promise .chap, .promise .chap-num {
  color: #fff;
}
.promise .side-note {
  color: var(--on-red);
}
.promise-text {
  font-family: var(--serif);
  font-size: clamp(24px, 2.7vw, 36px);
  line-height: 1.4;
}
.promise-pillars {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.pillar {
  background: rgb(0 0 0 / .2);
  border-top: 2px solid #fff;
  padding: 16px 18px;
}
.pillar strong {
  display: block;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-red);
  margin-bottom: 6px;
}
.pillar p {
  font-size: 14.5px;
  line-height: 1.55;
  color: #fff;
}
.promise-sign {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgb(255 255 255 / .45);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
  justify-content: space-between;
  font-size: 15px;
  color: var(--on-red);
}
.promise-sign b {
  color: #fff;
}
.promise .action-row {
  margin-top: 28px;
}

/* Chapter 06: QR Gift Card, Governance & Colophon Footer (F06, F07, Section 9 & 10) */
.qr-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr);
  gap: 36px;
  margin-top: 36px;
  align-items: stretch;
}
.gift-card-preview {
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
.gift-card-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 2px solid var(--red);
  padding-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
}
.gift-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 20px;
  align-items: center;
}
.gift-card-body h3 {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.25;
  margin-bottom: 8px;
}
.gift-card-body p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
.qr-box {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 8px;
  text-align: center;
}
.qr-box small {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 4px;
}
.gift-card-foot {
  border-top: 1px solid var(--rule);
  padding-top: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  font-size: 12.5px;
  color: var(--muted);
}

.share-panel {
  background: var(--warm);
  border: 1px solid var(--rule);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.share-panel h3 {
  font-size: 19px;
  font-weight: 700;
}
.share-panel p {
  font-size: 14.5px;
  color: var(--muted);
}
.url-box {
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--ink);
  user-select: all;
  -webkit-user-select: all;
  overflow-wrap: anywhere;
  word-break: break-all;
}
.workflow-grid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.wf-step {
  background: var(--warm);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--red);
  padding: 16px 18px;
}
.wf-step b {
  display: block;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
}
.wf-step h4 {
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 700;
}
.wf-step p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Colophon Footer */
.site-foot {
  background: var(--ink);
  color: #E9E6E2;
  border: 0;
  padding: 64px 0 44px;
  font-size: 13px;
  --focus: #fff;
}
.foot3 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
  border-top: 1px solid #444;
  padding-top: 24px;
}
.foot3 h3 {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #FF9DB1;
  margin-bottom: 10px;
}
.foot3 p {
  font-size: 14.5px;
  line-height: 1.6;
  color: #D8D3CD;
}
.foot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #333;
}
#copy-link {
  border-color: #fff;
  color: #fff;
  font-weight: 600;
}
#copy-link:hover {
  background: #fff;
  color: var(--ink);
}
#copy-status {
  font-size: 14px;
  color: #FFE3E9;
  font-weight: 600;
}
.foot-actions a, .foot-actions button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.site-foot .demo-note {
  margin-top: 24px;
  font-size: 12px;
  opacity: 1;
  color: #BDB7B0;
  max-width: 860px;
  line-height: 1.55;
}

/* Dialogs & Modals */
dialog {
  width: min(680px, calc(100% - 32px));
  max-height: calc(100dvh - 40px);
  border-radius: 0;
  border: 0;
  border-top: 6px solid var(--red);
  background: #fff;
  color: var(--ink);
  padding: 24px;
}
dialog::backdrop {
  background: rgb(0 0 0 / .72);
  backdrop-filter: blur(6px);
}
.dialog-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: start;
  gap: 18px;
  margin-bottom: 18px;
}
.dialog-head h2 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -.01em;
  font-size: 26px;
  line-height: 1.3;
}
.close-dialog {
  min-height: 44px;
  min-width: 44px;
  border: 1px solid #aaa;
  background: transparent;
  color: #242323;
  padding: 8px 12px;
  font-weight: 600;
}
.close-dialog:hover {
  background: var(--warm);
}
.dialog-copy p + p {
  margin-top: 16px;
}
.composer, .feedback-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 18px;
}
.composer label, .feedback-form label {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  font-size: 14px;
  font-weight: 650;
}
.composer input, .composer textarea, .feedback-form input, .feedback-form textarea {
  width: 100%;
  border: 1px solid #a49e95;
  border-radius: 4px;
  padding: 11px 12px;
  background: #fff;
  color: #242323;
  font-weight: 400;
}
.composer textarea {
  resize: vertical;
  min-height: 130px;
}
.composer button[type=submit], .feedback-form button[type=submit] {
  background: var(--red);
  color: #fff;
  border: 0;
  padding: 14px;
  font-weight: 600;
  min-height: 48px;
}
.composer button[type=submit]:hover, .feedback-form button[type=submit]:hover {
  background: var(--red-deep);
}
.local-preview {
  margin-top: 20px;
  border: 1px solid #a49e95;
  padding: 18px;
  background: #fff;
}
.local-preview h3 {
  font-size: 15px;
  margin-bottom: 10px;
}
.local-preview p {
  white-space: pre-wrap;
}
.local-preview small {
  display: block;
  margin-top: 10px;
}
.composer-guide {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--warm);
  border-left: 3px solid var(--red);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
#lightbox-dialog {
  width: min(920px, calc(100% - 32px));
  padding: 20px 24px;
}
#lightbox-dialog .dialog-head {
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}
#lightbox-dialog .dialog-head > div {
  flex: 1;
  min-width: 0;
}
#lightbox-dialog .dialog-head h2 {
  font-size: 21px;
  line-height: 1.3;
}
#lightbox-close {
  flex-shrink: 0;
}
.lightbox-stage {
  border: 1px solid var(--rule);
  background: #141414;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 55dvh;
  overflow: hidden;
}
.lightbox-stage svg, .lightbox-stage img {
  width: auto;
  max-width: 100%;
  max-height: 55dvh;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.lightbox-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

/* Reveal Animations */
.reveal-on .rv {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: opacity .85s ease, clip-path .95s cubic-bezier(.2,.8,.2,1);
}
.reveal-on .rv.in {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes draw { from { stroke-dashoffset: 1400; fill: rgb(255 255 255 / 0); } to { stroke-dashoffset: 0; fill: rgb(255 255 255 / .06); } }
@keyframes rise { from { transform: translateY(110%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: none; } }

/* Responsive Breakpoints (320px - 1440px) */
@media (max-width: 1023px) {
  .hero-grid, .grid12, .qr-card-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .index {
    position: static;
  }
  .index ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .index li {
    border-bottom: 1px solid var(--rule);
  }
  .messages, .stories-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .promise-pillars, .workflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .topic-head {
    display: none;
  }
  .topic {
    grid-template-columns: minmax(0, .35fr) minmax(0, 3fr);
    gap: 8px 16px;
  }
  .topic p, .topic .topic-action-cell {
    grid-column: 2;
  }
  .f1, .f2, .f6 {
    grid-column: span 12;
  }
  .f3, .f4, .f5, .f-half, .f-third, .f-quarter {
    grid-column: span 6;
  }
  .f5 {
    grid-column: span 12;
  }
  .side-note, .letter-tools {
    max-width: none;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 16px;
  }
  .shell {
    width: calc(100% - 40px);
  }
  .studio {
    padding: 10px 20px;
  }
  .meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .meta span:nth-child(2) {
    border-right: 0;
  }
  .meta span:nth-child(3) {
    padding-left: 0;
  }
  .meta span:nth-child(n+3) {
    border-top: 1px solid rgb(255 255 255 / .25);
  }
  .hero {
    padding-bottom: 44px;
  }
  .lead {
    font-size: 16.5px;
  }
  .figures {
    padding: 20px;
  }
  .index ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .spread {
    padding: 56px 0;
  }
  .messages, .stories-grid, .promise-pillars, .workflow-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .letter {
    font-size: calc(16.5px * var(--letter-scale));
  }
  .f3, .f4, .f5, .f6, .f-half, .f-third, .f-quarter {
    grid-column: span 12;
  }
  .gallery {
    gap: 16px;
    margin-top: 28px;
  }
  .gift-card-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .qr-box {
    max-width: 160px;
  }
  .promise {
    padding: 64px 0;
  }
  .foot3 {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .hero .action-row .action {
    width: 100%;
  }
  dialog {
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  .studio, .index, .filter-bar, .contribute-strip, .foot-actions, #replay-figures, .letter-tools, .zoom-btn, .topic-prompt-btn {
    display: none !important;
  }
  .hero, .promise, .site-foot {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .spread {
    padding: 36px 0;
    break-inside: avoid;
  }
}