/* Bố cục bảy khối trên năm panel — Direction v2.
   Máy: tĩnh tuyệt đối. Bóng: vệt lệch kênh xanh (--bong), lớp giảm dần
   4→4→2→1→0. Khoáng chỉ sống trong ảnh B-05 (hồi III) + các dấu chủ ý. */

/* ============ 00 · POSTER — máy đứng, bóng tới muộn ============ */
#poster {
  align-items: center;
  padding-top: clamp(20px, 4vh, 48px);
  padding-bottom: 0;
}
#poster .eyebrow { align-self: flex-start; margin-bottom: 0.6rem; }

/* Sân khấu máy: bản vẽ TĨNH TUYỆT ĐỐI; mọi chuyển động thuộc về bóng */
.machine-stage {
  position: relative;
  height: 45vh;
  height: 45svh;
  aspect-ratio: 4 / 5;
  flex: none;
}
.machine-stage img,
.machine-stage picture,
.machine-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Bản vẽ máy: blend THƯỜNG + đã cắt nền (khâu asset) để thân máy CHE bóng —
   vật thể sạch, bóng chỉ ló ở mép như một bản in lệch kênh. */
.machine-stage .machine { position: absolute; inset: 0; z-index: 2; }
.shadow-layer {
  z-index: 1;
  opacity: 0.9;
  transform: translate(var(--sx, 0px), var(--sy, 0px));
  filter: none; /* không CSS filter trên ảnh lớn — xé bằng clip-path */
}

/* chữ tuyên bố dưới máy — lưới bất đối xứng */
.poster-copy {
  width: 100%;
  max-width: 1100px;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: end;
  margin-top: clamp(14px, 2.5vh, 28px);
}
.standalone {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 22px);
  max-width: 24em;
}
.poster-title {
  font-size: clamp(26px, 3.5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
  max-width: 17em;
}
/* hiệu ứng đặc biệt cho "narrative": nghiêng Fraunces + vệt lệch kênh xanh
   (đúng ngôn ngữ bóng của trang) + gạch chân hematite như nét bút người */
.fx-narrative {
  font-style: italic;
  position: relative;
  white-space: nowrap;
  display: inline-block;
  /* v3.21: KHÔNG perspective/transform ở đây. Safari (iOS) tách chữ có
     transform ra layer GPU riêng khi cuộn, để chữ trôi lệch khỏi bóng mint và
     gạch chân — đúng lỗi người dùng báo. Cú lật giờ chỉ là fade opacity. */
  text-shadow: 3px 3px 0 var(--bong);
  border-bottom: 3px solid var(--hematite);
  padding-bottom: 1px;
}
.poster-side { justify-self: end; text-align: right; }
/* khối thông tin: các dòng CHỦ Ý (\n trong copy, pre-line), không để dòng dài
   tự gãy lung tung; meta + speaker dính thành một cụm spec-line */
.poster-side .meta { color: var(--ink); white-space: pre-line; line-height: 1.75; margin-bottom: 0.35rem; }
.poster-side .speaker { color: var(--ink-soft); margin-bottom: 1.4rem; }
/* bộ đếm ghế bản poster — bám trục phải của cụm thông tin */
.poster-side .seats { justify-content: flex-end; margin: -0.9rem 0 1.4rem; }

.cta-block {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(18px, 2.5vw, 32px);
}
/* v2.7: chú thích QR ra NGOÀI luồng — tâm hình QR = tâm hàng flex, nút Giữ
   chỗ vì thế thẳng trục với mã, không còn bị caption kéo lệch */
.qr { position: relative; display: block; }
.qr img {
  width: 128px;
  height: 128px;
  display: block; /* nền = giấy của trang — vùng yên tĩnh, không ô trắng */
}
.qr figcaption {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 7px;
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

/* dải răng cưa xé — do code dựng, không phải ảnh */
.torn-strip {
  margin-top: clamp(18px, 3.5vh, 40px);
  width: min(680px, 92%);
  background: var(--stone);
  padding: 14px 28px 16px;
  clip-path: polygon(
    0% 18%, 4% 6%, 9% 16%, 14% 4%, 19% 14%, 24% 6%, 29% 15%, 34% 5%, 39% 13%,
    44% 4%, 50% 15%, 56% 6%, 61% 14%, 66% 4%, 71% 13%, 76% 6%, 81% 16%, 86% 5%,
    91% 14%, 96% 7%, 100% 17%,
    100% 84%, 96% 95%, 91% 85%, 86% 96%, 81% 86%, 76% 94%, 71% 85%, 66% 96%,
    61% 87%, 56% 95%, 50% 84%, 44% 95%, 39% 86%, 34% 96%, 29% 85%, 24% 94%,
    19% 86%, 14% 97%, 9% 85%, 4% 94%, 0% 83%
  );
}
.scroll-hint {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  text-align: center;
}

/* ============ E · vệt glitch phân cách ============ */
/* Một đường kẻ in LỆCH KÊNH: nét mực đứt làm ba đoạn so le + vệt xanh đổ
   dưới, cường độ giảm dần qua --sep-o. Dấu câu, không phải nội dung.
   (v2.1: bỏ ảnh kéo giãn — đọc ra như ảnh vỡ.) */
.sep {
  position: relative;
  height: 48px;
  opacity: var(--sep-o, 0.3);
}
.sep::before {
  /* nét mực gãy ba đoạn, mỗi đoạn lệch một chút */
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 22px;
  height: 2px;
  background: linear-gradient(
    to right,
    var(--ink) 0 31%, transparent 31% 34.5%,
    var(--ink) 34.5% 65%, transparent 65% 68.5%,
    var(--ink) 68.5% 100%
  );
}
.sep::after {
  /* bóng xanh của chính nét đó, tới lệch xuống dưới-phải */
  content: "";
  position: absolute;
  left: calc(8% + 9px);
  right: calc(8% - 9px);
  top: 27px;
  height: 2px;
  background: var(--bong);
}

/* ============ 01a · bốn con số ============ */
.panel { gap: 0; }
#chaos {
  display: block;
  padding: 0;
  min-height: 0;
}
.block { position: relative; padding: clamp(56px, 9vh, 110px) var(--gutter); }
.block-01a { overflow: hidden; }

/* dải tram halftone ở đỉnh (số hồi "01" rỗng đã bỏ 26/08 — gây rối) */
.tram-band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 26px;
  background-image: radial-gradient(circle at 3px 3px, var(--ink) 1px, transparent 1.4px);
  background-size: 9px 9px;
  opacity: 0.16;
  pointer-events: none;
}

.hammers-row { display: flex; justify-content: center; margin: 1rem 0 2rem; }
.stage-wide {
  aspect-ratio: 16 / 9;
  height: auto;
  width: min(720px, 100%);
}

/* bốn cú gõ — khung kẻ xoay lệch 1–2°, đóng dấu xuống, không fade */
.strikes {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
  max-width: 1100px;
}
.strike {
  position: relative;
  border: 1px solid var(--rule);
  padding: 16px 14px 14px;
  transform: rotate(var(--tilt, 0deg));
  background: color-mix(in srgb, var(--paper) 65%, transparent);
}
.strike-num {
  /* v3.4: HIGHLIGHT bốn con số — khoáng hematite của hồi I + bóng lệch kênh */
  color: var(--hematite);
  text-shadow: 3px 3px 0 var(--bong);
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(30px, 3.4vw, 46px);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.strike-text { display: block; font-size: 0.85em; color: var(--ink); }
.strike-src {
  display: block;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--rule); /* đường dẫn mảnh tới chú thích nguồn */
  font-size: 10px;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.strike-src:hover,
.strike-src:focus-visible { color: var(--ink); text-decoration-color: var(--ink); }
.strike-margin {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  color: var(--ink-soft);
  border-left: 2px solid var(--hematite); /* chi tiết đắt nhất — số đang chuyển động */
  padding-left: 8px;
}

/* dòng tự vạch giới hạn — không thu nhỏ, không footnote */
.honest {
  max-width: var(--measure);
  margin-top: 2.4rem;
  padding: 14px 18px;
  border: 1px solid var(--ink-soft);
  font-size: 0.92em;
}

/* ============ 01b · gương soi ============ */
.block-01b .panel-title { max-width: none; }
.mirror-stage {
  position: relative;
  max-width: 860px;
  margin-top: 1.6rem;
}
.keys-img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.9;
}
/* Ô nhập là MỘT TỜ GIẤY cắm vào máy: không viền bo, không nền xám, không
   placeholder mờ, không đếm ký tự. Chữ người đọc gõ hiện bằng Fraunces. */
.paper-form {
  position: relative;
  margin: -14vw auto 0;
  width: min(560px, 92%);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 26px 28px 20px;
  box-shadow: 6px 7px 0 var(--bong); /* bóng lệch kênh của tờ giấy */
}
.paper-form .question {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.35;
  margin-bottom: 14px;
}
.paper-form textarea {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  resize: vertical;
  padding: 2px 0 8px;
}
.paper-form textarea:focus { outline: none; border-bottom-color: var(--ink); }
.paper-form:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.paper-form-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}
.btn-small { padding: 0.6em 1.6em; font-size: 0.9rem; }
.hint { font-size: 11px; color: var(--ink-soft); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-error { margin-top: 10px; font-size: 11px; color: var(--hematite); }
/* lời xác nhận: nằm trong tờ giấy (dưới câu hỏi, sau khi ô nhập ẩn đi) */
.after-submit {
  margin-top: 4px;
  padding-left: 14px;
  border-left: 2px solid var(--bong);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
}
.after-submit[hidden] { display: none; }
.paper-form.is-sent textarea,
.paper-form.is-sent .paper-form-row { display: none; }

/* ============ 02 · PATTERNS + cột đôi chung ============ */
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.col-figure { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.beat-air { aspect-ratio: 1; max-height: 52vh; }
.roller-stage {
  aspect-ratio: 16 / 9;
  height: auto;
  width: 100%;
  margin-top: 8px;
  overflow: visible;
}
/* tờ giấy cuốn theo tốc độ cuộn — hiệu ứng scroll-linked DUY NHẤT của trang */
.roll-paper {
  position: absolute;
  left: 18%;
  width: 46%;
  top: -22%;
  z-index: 3;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 14px 16px;
  box-shadow: 5px 6px 0 var(--bong);
  will-change: transform;
}
.roll-paper .turn {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.45;
}

/* ============ 03 · NARRATIVES ============ */
.prompt {
  max-width: var(--measure);
  margin: 1.8rem 0 1rem;
  font-weight: 600;
}
/* hai tờ — máy đẩy ra theo hai hướng; đây là control thật */
.two-sheets {
  display: flex;
  gap: clamp(14px, 2vw, 26px);
  margin-bottom: 1.6rem;
}
.sheet {
  position: relative;
  width: min(230px, 44%);
  aspect-ratio: 5 / 6.5;
  background: var(--paper);
  border: 1px solid var(--ink-soft);
  transform: rotate(var(--lean, 0deg));
  cursor: pointer;
  padding: 30px 16px 14px;
  text-align: left;
  opacity: 0.82;
  transition: opacity 0.25s ease, border-color 0.25s ease;
  box-shadow: 5px 6px 0 var(--bong); /* bóng lệch — sẽ đứng im khi bị bỏ lại */
}
.sheet:hover,
.sheet:focus-visible,
.sheet.is-hot { opacity: 1; border-color: var(--ink); }
.sheet-tag {
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* dòng chữ máy gõ — nét trừu tượng do code vẽ, không phải chữ thật */
.typed-lines {
  display: block;
  height: 100%;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--ink-soft) 0 2px,
    transparent 2px 12px
  );
  background-size: var(--tl-w, 88%) 100%;
  background-repeat: no-repeat;
  opacity: 0.55;
}
.typed-lines.t-a { --tl-w: 88%; clip-path: polygon(0 0, 100% 0, 100% 34%, 62% 34%, 62% 46%, 100% 46%, 100% 100%, 0 100%); }
.typed-lines.t-b { --tl-w: 76%; clip-path: polygon(0 0, 100% 0, 100% 12%, 40% 12%, 40% 30%, 100% 30%, 100% 72%, 0 72%, 0 84%, 100% 84%, 100% 100%, 0 100%); }
/* chọn: tờ được chọn in đặc lại; tờ kia mờ đi nhưng KHÔNG biến mất,
   bóng của nó dừng chuyển động (JS gỡ wobble) */
.sheet.is-chosen { opacity: 1; border-width: 2px; border-color: var(--ink); }
.sheet.is-chosen .typed-lines { opacity: 0.95; }
.sheet.is-passed { opacity: 0.38; }
.after-choice {
  max-width: var(--measure);
  margin-bottom: 1.4rem;
  padding-left: 14px;
  border-left: 2px solid var(--bong);
}
.after-choice[hidden] { display: none; }

.ribbon-stage { max-width: 420px; margin-inline: auto; }
.ribbon-stage img { width: 100%; height: auto; display: block; }

/* lần duy nhất --ruby xuất hiện trên toàn trang */
.ruby-line {
  max-width: var(--measure);
  margin-top: 2.4rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.35;
  color: var(--ruby);
}
.me { margin-top: 1.8rem; max-width: var(--measure); font-size: 0.92em; color: var(--ink-soft); }

/* ============ 04 · CTA ============ */
#giu-cho { display: block; padding: 0; min-height: 0; }
/* ── 04a · NGƯỜI VIẾT — hồ sơ hai danh tính (v2.2) ─────────────────────────
   Khung chân dung là BẢN KẼM đăng ký sáng chế, không phải cái ô tròn:
   viền đôi hairline + bốn chữ thập canh bản + một lớp kẽm LỆCH xanh phía
   sau (đúng ngôn ngữ bóng). Chưa có ảnh: ô hatch chéo + nhãn mono. */
/* v3.6: tiêu đề khối này nhỏ lại + cân dòng (rớt chữ lộn xộn ở cỡ to) */
.block-04a .panel-title {
  font-size: clamp(24px, 2.7vw, 40px);
  max-width: 21em;
  text-wrap: balance;
}
/* v3.7: header chương III — hai cột: chữ trái · cần đẩy B-04 phải (lấp góc
   chết, neo nhịp bộ-phận-máy ngay đầu chương) */
.chapter-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
  margin-bottom: clamp(40px, 7vh, 80px);
}
.chapter-head .panel-title { margin-bottom: 0; }
.chapter-head .lever-stage { margin: 0 0 0 auto; }
/* #speaker (khối chương III) — KHÔNG dùng .speaker trần: p.speaker ở poster
   trùng tên class và từng bị flex hoá làm lệch hàng */
#speaker {
  display: flex;
  gap: clamp(28px, 4vw, 60px);
  align-items: center; /* khung chân dung cân giữa so với cột chữ cao */
}
.avatar-plate {
  position: relative;
  flex: 0 0 auto;
  width: clamp(150px, 16vw, 210px);
}
.avatar-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--ink);
  padding: 6px; /* viền đôi: khung ngoài + hairline của .avatar-slot */
  background: var(--paper-1);
}
.avatar-frame::before {
  /* lớp kẽm lệch — "bóng" xanh của chính cái khung */
  content: "";
  position: absolute;
  inset: -1px;
  border: 1.5px solid var(--bong);
  transform: translate(7px, 5px);
  pointer-events: none;
  z-index: -1;
}
/* chữ thập canh bản in, ló ra ngoài bốn góc khung */
.avatar-frame .reg {
  position: absolute;
  width: 11px;
  height: 11px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 100% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1px 100% no-repeat;
  opacity: 0.75;
}
.reg-tl { top: -16px; left: -16px; }
.reg-tr { top: -16px; right: -16px; }
.reg-bl { bottom: -16px; left: -16px; }
.reg-br { bottom: -16px; right: -16px; }
.avatar-slot {
  display: none;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid var(--rule);
  background: repeating-linear-gradient(45deg, transparent 0 7px, rgba(20, 18, 15, 0.07) 7px 8px);
}
.speaker[data-identity="a"] .slot-a { display: grid; }
.speaker[data-identity="b"] .slot-b { display: grid; }
.avatar-slot .mono {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  background: var(--paper-1);
  border: 1px solid var(--rule);
  padding: 3px 8px;
  white-space: nowrap;
}
.avatar-slot img { width: 100%; height: 100%; object-fit: cover; display: block; } /* sẵn cho ảnh thật */
.plate-caption {
  margin-top: 12px;
  font-size: 8.5px; /* v3.7: nhỏ lại để KHÔNG xuống dòng trong bề ngang khung */
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.speaker-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.1;
}
.speaker-role {
  margin-top: 0.4rem;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* dòng vai trò — format spec-line mono (v3.5), không còn là câu văn */
.speaker-tags {
  margin-top: 1.1rem;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  max-width: var(--measure);
}
.speaker-bio {
  margin-top: 1.3rem;
  max-width: var(--measure);
  text-align: justify; /* v3.6: căn đều hai bên */
}
.speaker-bio a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.speaker-bio a:hover { text-decoration-color: var(--ink); }
/* v3.6: khối "Nội dung webinar" — chữ nhỏ hơn, giãn dòng thoáng, ngắt hợp lý */
.speaker-agenda {
  margin-top: 1.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
  font-size: 0.84em;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}

/* cú "in lệch bản kẽm" lúc đổi danh tính — nhảy cứng steps(), không easing:
   glitch mượt là glitch trang trí */
.speaker.is-misprint .speaker-name,
.speaker.is-misprint .speaker-role {
  animation: misprint-text 360ms steps(1, end);
}
.speaker.is-misprint .avatar-frame { animation: misprint-frame 360ms steps(1, end); }
@keyframes misprint-text {
  0% { transform: translate(0, 0); text-shadow: none; }
  20% { transform: translate(-3px, 2px); text-shadow: 4px 3px 0 var(--bong); }
  55% { transform: translate(2px, -1px); text-shadow: -3px 2px 0 var(--bong); }
  100% { transform: none; text-shadow: none; }
}
@keyframes misprint-frame {
  0% { transform: none; }
  20% { transform: translate(-3px, 2px); }
  55% { transform: translate(3px, -2px); }
  100% { transform: none; }
}

/* ba tờ Substack — ba tờ giấy vừa xé khỏi máy, in lệch kênh xanh */
.speaker-reads { margin-top: clamp(44px, 8vh, 88px); }
.reads-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.post-cards {
  list-style: none;
  margin-top: 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 22px);
}
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 18px 16px 14px;
  border: 1px solid var(--ink);
  background: var(--paper-1);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--bong);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.post-card::before {
  /* đường đục lỗ — mép tờ giấy vừa xé */
  content: "";
  position: absolute;
  top: 6px;
  left: 10px;
  right: 10px;
  border-top: 1px dashed var(--rule);
}
.post-card::after {
  content: "↗";
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
}
.post-card:hover,
.post-card:focus-visible { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--bong); }
.post-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.25;
  padding-right: 16px;
}
.post-sub { font-size: 0.86em; color: var(--ink-soft); }
.post-meta {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* v2.5: cần đẩy cũng có BÓNG (S-B04, 1 lớp — cung 4/4/2/1 giữ đà giảm);
   ghi đè khung 45svh/4:5 của .machine-stage về khối vuông theo bề ngang */
.lever-stage {
  max-width: 340px;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin-inline: auto;
}

.block-04b {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  justify-content: center;
}
/* A-02: cùng góc, cùng cỡ, cùng vị trí như 00 */
/* KHÔNG đặt container-type ở stage: nó sinh stacking context, giết
   mix-blend-mode multiply của video (ô nền trắng lộ ra) — container nằm ở
   .paper-live bên trong */
#stage-coda { height: 45vh; height: 45svh; aspect-ratio: 1; }
/* video multiply: nền giấy của video hoà vào giấy trang, và bóng xanh phía
   sau còn nhìn thấy qua giấy trong 900ms trượt-về-khớp */
/* main{z-index:1} tạo stacking context → multiply KHÔNG nhìn thấy nền giấy
   của body; cho stage nền giấy riêng (đúng màu trang, liền mạch vô hình) để
   phép nhân có mặt giấy ngay trong nhóm blend — nền trắng của video tan hẳn */
.stage-video { background: var(--paper); }
.stage-video video.machine { mix-blend-mode: multiply; }
#stage-coda .shadow-layer { opacity: 0.7; } /* vệt ôm viền, không nhuộm thân */
/* tờ giấy SỐNG trong máy (v2.4): hộp chữ nằm TRONG tờ giấy của video —
   tọa độ đo từ frame gốc (mép giấy 29.4–77.1% ngang, 10.3% trên, trục lăn
   35.4%), chừa lề an toàn; JS dán cả hộp vào đường trượt carriage đo từng
   frame (data/carriage-track.js) nên chữ đi theo giấy, không bao giờ rơi ra
   ngoài. Nền trong suốt: chữ nằm thẳng trên tờ giấy của video. */
.paper-live {
  position: absolute;
  z-index: 3;
  left: 32.5%;
  right: 24%; /* v3.8: lề trái = lề phải so với tờ giấy (mép giấy 29,4–77,1%) */
  top: 13%;
  height: 21%;
  overflow: hidden;
  will-change: transform;
  container-type: inline-size; /* cqw = bề ngang cửa sổ giấy */
}
.paper-scroll {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4%;
}
.paper-line {
  font-family: var(--font-mono);
  /* cỡ chữ theo CHÍNH cái máy (cqw = bề ngang stage), không theo viewport —
     dòng fallback vw đứng trước cho trình duyệt chưa có container query */
  font-size: clamp(8px, 0.85vw, 12px);
  font-size: clamp(8px, 7.2cqw, 14px);
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  min-height: 1.6em;
}

.coda-copy {
  width: 100%;
  max-width: 1100px;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: start;
  margin-top: clamp(14px, 2.5vh, 28px);
  padding: 0 var(--gutter);
}
/* tiêu đề coda: mỗi câu MỘT dòng — \n trong copy quyết định chỗ gãy,
   cỡ chữ hạ vừa đủ để "Miễn phí nhưng giới hạn." lọt bề ngang cột */
.coda-copy .panel-title { white-space: pre-line; text-wrap: balance; font-size: clamp(26px, 3.2vw, 46px); }
.coda-copy .meta { margin: 1rem 0 1.4rem; color: var(--ink); }
/* dòng đếm ghế sống — chấm mint thở chậm, chữ mono cùng cỡ meta; nằm cùng ô
   lưới với meta (.coda-facts) nên luôn dính ngay dưới */
.coda-facts { grid-column: 1; }
.coda-facts .meta { margin-bottom: 0.55rem; }
.seats { display: flex; align-items: center; gap: 9px; margin: 0 0 1.4rem; color: var(--ink); }
.seats-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bong);
  box-shadow: 0 0 0 1px var(--ink) inset;
  animation: seats-breathe 2.6s ease-in-out infinite;
}
@keyframes seats-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .seats-dot { animation: none; } }
.coda-cta { grid-column: 2; grid-row: 1 / span 2; align-self: center; flex-direction: column; align-items: center; gap: 26px; }
.coda-copy .panel-title,
.coda-copy .body-block,
.coda-copy .meta,
.coda-copy .seats { grid-column: 1; }
.qr img[width="160"] { width: 160px; height: 160px; }
/* nút CTA hiện SAU khi bóng khớp xong — JS gắn .is-ready */
.js-motion .coda-cta { opacity: 0; transition: opacity 0.5s ease; }
.js-motion .coda-cta.is-ready { opacity: 1; }
.block-04b .torn-strip { margin-bottom: 40px; }

/* ── v3.3: chữ LẬT narrative ⟷ câu chuyện — gập theo trục ngang, nhẹ nhàng;
   bề ngang chuyển mềm để chữ đứng sau không giật ── */
/* Hộp rộng CỐ ĐỊNH bằng mặt chữ dài nhất (JS đo, đặt --fw): bề ngang không
   bao giờ đổi nên dòng chữ không dàn lại giữa chừng — hết cảnh chữ dài tràn
   ra đè lên dấu câu phía sau, và hết nhảy dòng khi đang cuộn (v3.21). */
.flip-word {
  display: inline-block;
  width: var(--fw, auto);
  white-space: nowrap;
  text-align: center;
  vertical-align: bottom;
  transform-origin: 50% 100%;
}
.flip-word.is-flip-out { animation: flip-out 0.3s ease-in forwards; }
.flip-word.is-flip-in { animation: flip-in 0.4s cubic-bezier(0.2, 0.8, 0.25, 1); }
/* CHỈ opacity — tuyệt đối không transform (v3.21). Chữ có animation transform
   bị đẩy lên layer GPU riêng, còn bóng mint (text-shadow) và gạch chân
   hematite vẫn nằm ở layer chính; lúc cuộn hai layer lệch nhau nên chữ trôi
   khỏi bóng của chính nó — đúng ảnh lỗi người dùng gửi từ iPhone. Fade thuần
   không đụng hình học nên không thể lệch. */
@keyframes flip-out {
  to { opacity: 0.08; }
}
@keyframes flip-in {
  from { opacity: 0.08; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .flip-word { transition: none; animation: none !important; }
}

/* ── v2.7: nút mời chia sẻ + pop-up postcard ─────────────────────────────── */
.share-open {
  margin-top: 6px;
  padding: 4px 2px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.share-open:hover { color: var(--ink); border-color: var(--ink); }
.share-dialog {
  border: none;
  background: none;
  padding: 20px;
  /* reset `* { margin: 0 }` của trang giết margin:auto mặc định của <dialog>
     → phải trả lại, không thì pop-up dạt góc trái */
  margin: auto;
  max-width: min(92vw, 840px); /* PC: to hơn 50% (560 → 840) */
  width: 100%;
}
.share-dialog::backdrop { background: rgba(20, 18, 15, 0.55); }
.share-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 7px 7px 0 var(--bong); /* tấm thiệp in lệch kênh */
  padding: 22px 22px 20px;
}
.share-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.25;
  padding-right: 30px;
  margin-bottom: 14px;
}
.share-postcard {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule);
}
.share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}
.share-link {
  flex: 1 1 220px;
  display: flex;
  border: 1px solid var(--ink);
  background: var(--paper-1);
}
.share-link input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  padding: 9px 10px;
  font-size: 11px;
  color: var(--ink-soft);
}
.share-link input:focus { outline: none; color: var(--ink); }
.share-copy {
  border: none;
  border-left: 1px solid var(--ink);
  background: var(--stone);
  padding: 0 14px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.share-copy:hover { background: var(--beryl-wash); }
.share-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}
.share-close:hover { color: var(--ink); }

/* ── tablet hẹp (769–1080px): cột đôi còn quá chật cho hình + tờ giấy trích
   dẫn (nó tràn ra ngoài trục lăn) — xếp chồng như mobile, giữ cỡ chữ desktop.
   Khối này phải đứng SAU mọi định nghĩa gốc (cùng specificity, thứ tự nguồn
   quyết định). */
@media (min-width: 769px) and (max-width: 1080px) {
  .two-col,
  .chapter-head { grid-template-columns: 1fr; gap: 20px; }
  .chapter-head .lever-stage { margin: 0 auto; }
  .col-figure { max-height: none; margin-top: 24px; }
  .beat-air { width: min(46vw, 400px); margin-inline: auto; }
  .roller-stage { width: min(64vw, 560px); margin-inline: auto; }
  .ribbon-stage,
  .lever-stage { max-width: min(44vw, 340px); }
}

/* mũi tên mời cuộn — chỉ mobile, NẰM TRONG khung màn đầu, nhún nhẹ */
.scroll-cue { display: none; }
@keyframes cue-bob {
  0%, 100% { transform: translate(-50%, 0) rotate(45deg); }
  50% { transform: translate(-50%, 8px) rotate(45deg); }
}

/* ============ Mobile ============ */
@media (max-width: 768px) {
  #poster { position: relative; padding-top: 16px; padding-bottom: 110px; }
  .scroll-cue {
    display: block;
    position: absolute;
    left: 50%;
    top: calc(100svh - 208px); /* trên dải rách + thanh CTA dính, trong màn đầu */
    width: 18px;
    height: 18px;
    border-right: 2.5px solid var(--ink-soft);
    border-bottom: 2.5px solid var(--ink-soft);
    transform: translateX(-50%) rotate(45deg);
    opacity: 0.75;
    animation: cue-bob 1.7s ease-in-out infinite;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .scroll-cue { animation: none; }
  }
  .machine-stage { height: 40vh; height: 40svh; max-width: 78vw; }
  .poster-copy, .coda-copy { grid-template-columns: 1fr; align-items: start; }
  .poster-side { justify-self: start; text-align: left; }
  .poster-side .seats { justify-content: flex-start; }
  #poster .cta-block { display: none; } /* QR + nút sống ở thanh dính đáy */

  .act-one { position: relative; }
  .mobile-cta {
    display: flex;
    position: sticky;
    bottom: 0;
    z-index: 3;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px var(--gutter);
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    border-top: 1px solid var(--rule);
  }
  .mobile-cta .btn { flex: 1; text-align: center; }
  /* §8: cạnh QR tối thiểu 128px trên MỌI breakpoint */
  .mobile-cta img { width: 128px; height: 128px; }

  #stage-coda { height: auto; width: min(78vw, 40svh); max-width: none; } /* giữ vuông — overlay giấy khớp video */
  .strikes { grid-template-columns: 1fr 1fr; }
  .stage-wide { width: 100%; }
  .paper-form { margin-top: -6vw; }

  .two-col { grid-template-columns: 1fr; }
  .col-figure { max-height: none; }
  .beat-air { width: min(78vw, 340px); margin-inline: auto; }
  .roll-paper { top: -12%; }
  .two-sheets { flex-wrap: wrap; }
  .sheet { width: min(220px, 47%); }
  .ribbon-stage, .lever-stage { max-width: 300px; }
  .chapter-head { grid-template-columns: 1fr; gap: 14px; }
  .chapter-head .lever-stage { margin: 0 auto; max-width: 230px; }
  #speaker { flex-direction: column; }
  /* màn hẹp: justify với token dài (Storytelling4GenZ) tạo lỗ hổng — căn trái */
  .speaker-bio { text-align: left; }
  .avatar-plate { width: min(52vw, 200px); }
  .post-cards { grid-template-columns: 1fr; }
  /* v2.6: nút + mã QR cân ĐÚNG TRUNG TÂM màn (feedback 26/08) */
  .coda-cta {
    grid-column: 1;
    grid-row: auto;
    align-items: center;
    justify-self: center;
    width: 100%;
    text-align: center;
  }
  .coda-cta .btn { min-width: min(70vw, 280px); text-align: center; }
  .scroll-hint { font-size: 13px; }
  .torn-strip { padding: 18px 22px 22px; }
}

/* Thanh CTA mobile ẩn trên desktop */
@media (min-width: 769px) {
  .mobile-cta { display: none; }
}