/* =====================================================================
   PERSON · MAGAZINE (person-magazine.html) — BỐ CỤC TẠP CHÍ (magazine spread)
   ---------------------------------------------------------------------
   Khác hai bản trước ở CÁCH ĐỌC, không chỉ ở màu mè:
     • person.html   : vật thể bay ngang trên một nền phẳng
     • personV2.html : camera 3D bay qua cảnh núi
     • person-magazine.html : TRANG GIẤY. Bài báo được DÀN THẬT thành từng tờ
       đôi (spread) — trang trái + trang phải, có khe gáy ở giữa, chữ
       chảy theo cột, số trang ở góc ngoài. Người xem cuộn qua từng tờ
       như lật một cuốn tạp chí đặt trên mặt bàn xanh rêu.

   NGUỒN NỘI DUNG: y hệt hai bản kia — content/people/<id>.json.
   Bài dài nằm ở "scene_items"; assets/js/person-magazine.js dựng mỗi mục
   thành một khối rồi RÓT lần lượt vào các cột cho tới khi đầy tờ, đầy
   thì mở tờ mới. Vì thế số tờ tự co giãn theo độ dài bài, không phải
   đếm tay.

   MÀU (bản nền sáng): mặt bàn KHÔNG còn là xanh rêu tối mà là nền lá
   sen xanh nhạt, có hoa văn sen chìm ở hai mép. Giấy vẫn kem, mực vẫn
   xanh rêu, cam vẫn là màu chỉ dẫn. Tờ "nhấn" (.mag-spread--dark, tên
   class giữ nguyên cho khớp person-magazine.js) nay không đảo mực/giấy nữa —
   nó chỉ ngả sang giấy sắc lá sen và đổi màu chỉ dẫn sang hồng sen đậm.
   Toàn bộ tông nằm ở mấy biến --mag-* đặt ngay dưới đây.

   MUỐN CHỈNH:
     • khổ tờ đôi        -> --spread-w / aspect-ratio ở .mag-spread
     • số cột mỗi trang  -> --mag-cols  (JS tự đo lại, không phải sửa gì thêm)
     • cỡ chữ bài        -> .mag-flow (dưới mục "CHỮ TRONG CỘT")
   ===================================================================== */

.person-magazine {
  /* --- BẢNG MÀU RIÊNG CỦA V3 ---------------------------------------
     Cả trang chỉ còn MỘT sắc độ sáng: nền lá sen xanh nhạt, giấy kem,
     mực xanh rêu. Sửa bốn biến này là đổi được toàn bộ tông của trang,
     không phải lần từng rule. */
  --mag-field-1: #d9e7c8;   /* nền sáng ở giữa màn  */
  --mag-field-2: #bfd6aa;   /* nền đậm dần ra mép   */
  --mag-paper: var(--cream-2);  /* giấy của tờ thường          */
  --mag-paper-alt: #eaf1db;     /* giấy của tờ NHẤN (ngả lá sen) */
  --mag-ink: var(--green);      /* mực chính                    */
  --mag-ink-soft: #33473e;      /* mực thân bài, nhạt hơn tít   */
  /* Cam vẫn là màu chỉ dẫn của tờ thường; tờ nhấn dùng hồng sen ĐẬM —
     --rose gốc (#d8988b) quá nhạt, đặt lên giấy sáng là mất chữ. */
  --mag-accent-alt: #b8705f;

  /* MẶT BÀN. Trước đây là xanh rêu tối; nay là nền lá sen sáng, đậm dần
     ra bốn mép để tờ giấy kem ở giữa vẫn nổi lên mà không cần bóng nặng. */
  background:
    radial-gradient(118% 74% at 50% 6%, var(--mag-field-1) 0%, var(--mag-field-2) 100%);
  color: var(--mag-ink);
}

/* HOA VĂN NỀN — TẠM BỎ.
   Chỗ này từng là hai đám nét sen chìm ở hai mép màn hình, dựng bằng
   mask + assets/img/lotus-line.svg. Đã gỡ để thay bằng ảnh khác.

   Khi thêm ảnh mới, dựng lại trên .person-magazine::before / ::after và
   nhớ hai điều đã phải dò ra lần trước:
     • position: fixed + z-index: -1 là CẶP BẮT BUỘC. Âm một tầng thì hoa
       văn nằm trên nền trang nhưng dưới mọi khối nội dung, kể cả footer
       (footer không định vị nên z-index: 0 là nó chui xuống dưới).
     • pointer-events: none, nếu không hoa văn chắn chuột ở hai mép.
   Và nhớ tắt trên màn hẹp (@media max-width: 880px): nền rộng bằng cả
   màn thì hoa văn cạnh tranh trực tiếp với chữ.

   File cũ assets/img/lotus-line.svg vẫn còn, giờ không nơi nào dùng. */

/* =====================================================================
   1 · TỜ ĐÔI  (.mag-spread)
   ---------------------------------------------------------------------
   Khổ giấy là 1.55:1, RỘNG HƠN tờ A4 đôi thật (1.414:1). Cố ý: chiều cao
   mới là thứ bị màn hình chặn, nên tờ càng dẹt thì với CÙNG một chiều cao
   vừa màn hình, bề ngang trang — tức bề ngang cột chữ — càng lớn. Kéo
   1.414 lên 1.55 ăn thêm khoảng 13% bề ngang mà tờ giấy vẫn lọt một màn.

   Bề ngang kẹp bởi BA giá trị, cái nào nhỏ nhất thắng:
     94vw   -> luôn chừa lề hai bên
     1560px -> không phình ra vô tận trên màn siêu rộng
     150vh  -> QUAN TRỌNG NHẤT: giữ cho chiều CAO tờ giấy (= w / 1.55)
               không vượt quá ~97vh, tức một tờ đôi luôn lọt trong một
               màn hình. Bỏ mốc này thì trên laptop 13" tờ giấy cao hơn
               màn hình và người đọc phải cuộn giữa chừng một trang.

   MUỐN CHỮ RỘNG THÊM NỮA: nới 1560px trước (chỉ ăn trên màn lớn), rồi
   mới tới tỉ lệ. Đụng tới 94vw thì mất lề, tờ giấy dính mép màn hình.
   ===================================================================== */
.mag {
  padding: clamp(90px, 11vh, 150px) 0 clamp(60px, 8vh, 110px);
}
.mag-spread {
  /* MỘT cột mỗi trang. Tờ đôi vẫn là hai trang, nên cả tờ vẫn có hai dải
     chữ — chỉ là mỗi dải giờ rộng gấp đôi.
     Vì sao bỏ 2 cột: cột hẹp + column-fill:auto nghĩa là cột 1 phải đầy
     tràn thì cột 2 mới có chữ. Đoạn cuối của mỗi trang gần như không bao
     giờ đủ dài để làm việc đó, nên trang nào cũng hở một cột trắng bên
     phải. Một cột thì không còn chỗ nào để hở.
     Đặt lại 2 nếu muốn kiểu báo in dày đặc. */
  --mag-cols: 1;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(94vw, 1560px, 150vh);
  aspect-ratio: 1.55 / 1;
  margin: 0 auto clamp(38px, 5vw, 80px);
  background: var(--mag-paper);
  color: var(--mag-ink);
  /* Bóng đổ kép: một lớp rộng và mờ (tờ giấy nổi trên bàn) + một viền
     sát mép (độ dày của xấp giấy). Pha xanh rêu chứ không phải đen, và
     nhạt hơn hẳn bản nền tối — bóng đen trên nền sáng trông như vết bẩn. */
  box-shadow:
    0 30px 70px rgba(18, 53, 40, 0.2),
    0 2px 0 rgba(18, 53, 40, 0.16);
}

/* KHE GÁY. Hai vệt tối đối xứng quanh đường giữa — chỗ hai trang cụp
   xuống khi sách mở. Đặt pointer-events:none để không chắn chữ. */
.mag-spread::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: clamp(40px, 5%, 90px);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    90deg,
    rgba(18, 53, 40, 0) 0%,
    rgba(18, 53, 40, 0.13) 44%,
    rgba(18, 53, 40, 0.22) 50%,
    rgba(18, 53, 40, 0.13) 56%,
    rgba(18, 53, 40, 0) 100%
  );
}

/* TỜ NHẤN. Tên class vẫn là --dark vì person-magazine.js gắn theo nhịp
   darkEvery (mặc định cứ 3 tờ một), nhưng nó KHÔNG còn tối: cả cuốn nay
   cùng một tông sáng, tờ nhấn chỉ ngả sang sắc lá sen và đổi màu chỉ dẫn
   từ cam sang hồng sen. Đảo mực/giấy như bản cũ sẽ chọi với nền sáng.
   Dùng cho tờ mở đầu, tờ kết, và mọi tờ rơi đúng nhịp. */
.mag-spread--dark {
  background: var(--mag-paper-alt);
  color: var(--mag-ink);
}
.mag-spread--dark::after {
  background: linear-gradient(
    90deg,
    rgba(18, 53, 40, 0) 0%,
    rgba(18, 53, 40, 0.16) 50%,
    rgba(18, 53, 40, 0) 100%
  );
}

/* =====================================================================
   2 · TRANG  (.mag-page)
   Lề NGOÀI rộng hơn lề trong (phía gáy) — quy tắc dàn trang cơ bản:
   mắt cần chỗ nghỉ ở rìa, còn phía gáy hai cột chữ tự đỡ nhau.
   ===================================================================== */
.mag-page {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Lề trong (phía gáy) hẹp, lề NGOÀI rộng hơn — quy tắc dàn trang cơ
     bản. Cả hai đã gọt bớt so với bản đầu để trả bề ngang lại cho cột
     chữ; đây là chỗ chỉnh thứ hai nếu muốn chữ rộng thêm. */
  padding: clamp(20px, 2.4vw, 40px);
}
.mag-page--l { padding-left: clamp(26px, 3.2vw, 58px); }
.mag-page--r { padding-right: clamp(26px, 3.2vw, 58px); }

/* ---- Đầu trang: nhãn chuyên mục + gạch ngang mảnh ---- */
.mag-runhead {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  margin-bottom: clamp(14px, 1.8vw, 26px);
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(8px, 0.72vw, 10px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--orange);
}
.mag-runhead::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}
.mag-spread--dark .mag-runhead { color: var(--mag-accent-alt); }

/* ---- Chân trang: số trang ở góc NGOÀI ---- */
.mag-folio {
  flex: none;
  margin-top: clamp(10px, 1.4vw, 18px);
  font-family: var(--display);
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: 0.1em;
  color: rgba(18, 53, 40, 0.45);
}
.mag-page--l .mag-folio { text-align: left; }
.mag-page--r .mag-folio { text-align: right; }
.mag-spread--dark .mag-folio { color: rgba(18, 53, 40, 0.4); }

/* =====================================================================
   3 · CỘT CHỮ  (.mag-flow) — trái tim của trang này
   ---------------------------------------------------------------------
   `column-fill: auto` + chiều cao CHỐT CỨNG (person-magazine.js ghi height
   tính bằng px) = chữ đổ đầy cột 1 rồi mới tràn sang cột 2, đúng như
   nhà in. Khi tràn quá cột cuối, trình duyệt đẻ thêm cột ở BÊN PHẢI
   ngoài khung — đó chính là tín hiệu person-magazine.js dùng để biết "tờ này
   đầy rồi" (so sánh scrollWidth với clientWidth). Vì vậy:

     KHÔNG đổi overflow:hidden thành visible, và KHÔNG bỏ column-fill:auto
     — mất một trong hai là thuật toán rót chữ mù, mọi thứ dồn vào tờ đầu.
   ===================================================================== */
.mag-flow {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  columns: var(--mag-cols) auto;
  column-gap: clamp(16px, 1.9vw, 30px);
  column-fill: auto;
  /* Vạch mảnh giữa hai cột — chỉ thấy khi --mag-cols từ 2 trở lên. */
  column-rule: 1px solid rgba(18, 53, 40, 0.13);
  /* To hơn bản 2 cột: dòng dài ra thì chữ cũng phải lớn theo, nếu không
     mắt lần mãi mới về được đầu dòng sau. */
  font-size: clamp(13px, 1.16vw, 17px);
  line-height: 1.68;
  text-align: justify;
  hyphens: auto;
  color: #33473e;
}
.mag-spread--dark .mag-flow {
  color: var(--mag-ink-soft);
  column-rule-color: rgba(18, 53, 40, 0.13);
}

.mag-flow p {
  margin: 0 0 0.85em;
}
/* Thụt đầu dòng từ đoạn THỨ HAI trở đi (đoạn ngay sau tiêu đề/ảnh thì
   không thụt) — cách xuống dòng của báo in, đỡ tốn khoảng trắng. */
.mag-flow p + p {
  margin-top: -0.35em;
  text-indent: 1.5em;
}
/* Đoạn NỐI TIẾP của một đoạn bị cắt ngang sang trang sau (person-magazine.js:
   splitPara). Nó là phần giữa của một câu chuyện đang kể dở, không phải
   đoạn mới — nên tuyệt đối không thụt đầu dòng. */
.mag-flow p.is-cont {
  text-indent: 0;
}

/* CHỮ CÁI HOA MỞ BÀI. Chỉ đoạn đầu tiên của cả bài (person-magazine.js gắn
   class .is-lead cho đúng một khối). */
.mag-flow .is-lead::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 3.5em;
  line-height: 0.78;
  margin: 0.06em 0.1em 0 0;
  color: var(--orange);
}

/* ---- Tiêu đề lớn giữa bài (type: "title") — bắc ngang cả trang ---- */
.mag-title {
  column-span: all;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(20px, 2.5vw, 40px);
  line-height: 1.18;
  letter-spacing: 0.01em;
  text-align: left;
  margin: 0 0 0.5em;
  color: var(--green);
  break-inside: avoid;
}
.mag-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 0.42em;
  background: var(--orange);
}
.mag-spread--dark .mag-title { color: var(--mag-ink); }

/* ---- Đề mục (type: "head") — cái KHUNG như trong tạp chí mẫu ----
   Khung viền + nền hồng nhạt, nằm gọn trong MỘT cột, làm mốc "sang phần
   mới" mà không cắt mạch đọc như tiêu đề bắc ngang. */
.mag-head {
  margin: 0.3em 0 0.9em;
  padding: 0.72em 0.9em;
  border: 1px solid var(--orange);
  background: rgba(225, 113, 74, 0.08);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.22em;
  line-height: 1.25;
  text-align: left;
  text-indent: 0;
  color: var(--orange);
  break-inside: avoid;
}
.mag-spread--dark .mag-head {
  border-color: var(--mag-accent-alt);
  background: rgba(184, 112, 95, 0.09);
  color: var(--mag-accent-alt);
}

/* ---- Trích dẫn rời (type: "quote" + thẻ dựng sẵn) ----
   Bắc ngang cả trang, kẹp giữa hai gạch cam — nhịp nghỉ của bài. */
.mag-quote {
  column-span: all;
  margin: 0.6em 0 1.1em;
  padding: 0.85em 0;
  border-top: 2px solid var(--orange);
  border-bottom: 1px solid rgba(225, 113, 74, 0.45);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 24px);
  line-height: 1.34;
  text-align: center;
  text-indent: 0;
  hyphens: none;
  color: var(--green);
  break-inside: avoid;
}
.mag-quote cite {
  display: block;
  margin-top: 0.6em;
  font-family: var(--body);
  font-style: normal;
  font-size: 0.52em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.mag-spread--dark .mag-quote {
  color: var(--mag-ink);
  border-top-color: var(--mag-accent-alt);
  border-bottom-color: rgba(184, 112, 95, 0.42);
}
.mag-spread--dark .mag-quote cite { color: var(--mag-accent-alt); }

/* ---- Ảnh trong cột (type: "image", và thẻ ảnh dựng sẵn) ---- */
.mag-fig {
  margin: 0 0 1em;
  break-inside: avoid;
  text-indent: 0;
}
.mag-fig img {
  width: 100%;
  /* Kẹp chiều cao: một tấm dọc cao quá sẽ chiếm trọn cột và đẩy cả tờ
     thành trang trắng có mỗi cái ảnh. */
  /* Kẹp thấp hơn bản 2 cột: mỗi trang giờ chỉ có MỘT cột, một tấm ảnh
     cao quá nửa trang là gần như chắc chắn không vừa chỗ còn lại và đẩy
     cả nó lẫn khoảng trắng sang trang sau. */
  max-height: 38vh;
  object-fit: cover;
}
/* HIỆN VẬT CẮT NỀN dựng thành .mag-fig (person-magazine.js nhận ra qua
   đường dẫn). Khác ảnh chụp ở CHỖ CỐT LÕI: không được cắt.
     • contain, không phải cover — cover xén mất chính cái vật;
     • hẹp hơn cột và đứng giữa — trải hết bề ngang thì một tấm dáng cao
       sẽ cao hơn cả trang;
     • không viền, không nền — bản thân ảnh đã trong suốt. */
.mag-fig--cut img {
  width: 58%;
  height: auto;
  max-height: 30vh;
  object-fit: contain;
  margin-inline: auto;
}
.mag-fig--cut figcaption {
  text-align: center;
}

.mag-fig figcaption {
  margin-top: 0.5em;
  font-size: 0.78em;
  line-height: 1.45;
  text-align: left;
  color: rgba(18, 53, 40, 0.6);
}
.mag-spread--dark .mag-fig figcaption { color: rgba(18, 53, 40, 0.6); }

/* Ảnh hiện vật CẮT NỀN (mảng "objects" trong JSON, PNG/WEBP trong suốt).
   Không viền, không khung, không object-fit — để nguyên hình cắt và cho
   nghiêng nhẹ như dán vào trang. */
.mag-cut {
  margin: 0.2em 0 0.9em;
  break-inside: avoid;
  text-align: center;
}
.mag-cut img {
  width: 58%;
  height: auto;
  max-height: 24vh;
  object-fit: contain;
  margin: 0 auto;
  transform: rotate(-3deg);
  filter: drop-shadow(0 12px 22px rgba(18, 53, 40, 0.22));
}
.mag-cut:nth-of-type(even) img { transform: rotate(3deg); }

/* ---- Dải số liệu (thẻ dựng sẵn "stats") — bắc ngang cả trang ---- */
.mag-stats {
  column-span: all;
  display: flex;
  gap: clamp(10px, 1.4vw, 22px);
  margin: 0.5em 0 1.1em;
  padding: 0.9em 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-indent: 0;
  break-inside: avoid;
}
.mag-stats .stat { flex: 1; }
.mag-stats .stat b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 42px);
  line-height: 1;
  color: var(--green);
}
.mag-stats .stat b span { color: var(--orange); }
.mag-stats .stat small {
  display: block;
  margin-top: 0.5em;
  font-size: 0.76em;
  line-height: 1.35;
  text-align: left;
  color: rgba(18, 53, 40, 0.62);
}
.mag-spread--dark .mag-stats {
  border-color: rgba(18, 53, 40, 0.18);
}
.mag-spread--dark .mag-stats .stat b { color: var(--mag-ink); }
.mag-spread--dark .mag-stats .stat b span { color: var(--mag-accent-alt); }
.mag-spread--dark .mag-stats .stat small { color: rgba(18, 53, 40, 0.62); }

/* Trang cuối chỉ còn lác đác vài dòng -> dồn xuống giữa trang cho ra dáng
   một lời kết, thay vì dính mép trên (person-magazine.js: markTail). */
.mag-flow--sparse {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---- Dấu kết bài trên trang cuối bỏ trống (person-magazine.js: markTail) ---- */
.mag-flow--blank {
  columns: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mag-endmark {
  font-size: clamp(12px, 1.1vw, 16px);
  letter-spacing: 0.4em;
  color: var(--orange);
  opacity: 0.75;
}
/* Tranh nền trang kết: phủ TRÀN VIỀN nhưng rất mờ, và tẩy về phía gáy để
   không cắm thẳng một khối ảnh vào giữa cuốn sách. */
.mag-page--blank { overflow: hidden; }
.mag-tailart {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  opacity: 0.15;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 46%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 46%, #000 100%);
}
.mag-page--blank .mag-flow,
.mag-page--blank .mag-folio { position: relative; z-index: 2; }
/* (Trước đây tờ tối để 0.22, tờ sáng 0.15. Nay cả cuốn cùng giấy sáng
   nên chỉ còn một mức duy nhất, đặt thẳng ở .mag-tailart bên trên.) */

/* =====================================================================
   4 · TỜ MỞ ĐẦU  (.mag-spread--cover)
   Trang trái = một tấm ảnh tràn viền + tít đè lên; trang phải = nền tối,
   sapo hai cột, huy hiệu tròn. Đúng mô-típ tờ đôi mở bài của tạp chí.
   ===================================================================== */
.mag-spread--cover .mag-page--l {
  padding: 0;            /* ảnh TRÀN VIỀN, không chừa lề */
  justify-content: flex-end;
}
.mag-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Lớp phủ tối dưới chân ảnh để tít trắng luôn đọc được, bất kể ảnh sáng
   hay tối. Phủ từ 34% xuống chứ không phủ cả tấm — nửa trên vẫn rõ ảnh. */
.mag-cover-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 34, 25, 0.42) 0%,
    rgba(13, 34, 25, 0) 34%,
    rgba(13, 34, 25, 0.62) 74%,
    rgba(13, 34, 25, 0.9) 100%
  );
}
/* Ba thứ này nằm ĐÈ lên ảnh bìa + lớp phủ (cả hai đều position:absolute,
   nên không có z-index là bị phủ nuốt mất — số trang biến mất im lặng). */
.mag-cover-head,
.mag-cover-title,
.mag-spread--cover .mag-page--l .mag-folio {
  position: relative;
  z-index: 2;
}
.mag-spread--cover .mag-page--l .mag-folio {
  padding: 0 clamp(22px, 3vw, 46px) clamp(14px, 1.6vw, 22px);
  color: rgba(251, 239, 239, 0.55);
}
.mag-cover-head {
  position: absolute;
  top: clamp(20px, 2.6vw, 40px);
  left: clamp(24px, 3vw, 46px);
  font-weight: 700;
  font-size: clamp(8px, 0.72vw, 10px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cream);
}
.mag-cover-title {
  padding: clamp(22px, 3vw, 46px);
  color: var(--cream);
}
.mag-cover-title h1 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  /* line-height 1.16: tiếng Việt chồng dấu, xem chú thích .display trong
     base.css. Ở cỡ này 1.1 là dấu huyền dòng dưới chạm dấu sắc dòng trên. */
  font-size: clamp(26px, 3.5vw, 56px);
  line-height: 1.16;
  letter-spacing: 0.01em;
  margin: 0;
  text-shadow: 0 6px 26px rgba(0, 0, 0, 0.5);
}
.mag-cover-title .mag-byline {
  display: block;
  margin-top: clamp(10px, 1.2vw, 18px);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(13px, 1.2vw, 19px);
  color: var(--orange-2);
}

/* ---- Trang phải của tờ mở đầu ---- */
.mag-cover-r .mag-flow {
  /* BỎ HẲN chế độ nhiều cột ở riêng trang này. Sapo chỉ dài vài dòng:
     chia đôi thì cột hai trống trơn, nhìn như bài bị mất chữ. Bỏ cột đi
     thì ô lại thành một hộp flex bình thường, canh giữa được theo chiều
     dọc — nếu không, mấy dòng sapo dính lên mép trên và bỏ trống hai phần
     ba trang. */
  columns: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 44ch;
  /* Sapo đọc như một lời dẫn: to hơn, thoáng hơn, và KHÔNG căn đều (căn
     đều ở cỡ chữ lớn hay rơi rãnh trắng). */
  font-family: var(--serif);
  font-size: clamp(12.5px, 1.15vw, 17px);
  line-height: 1.66;
  text-align: left;
  hyphens: none;
}
.mag-badge {
  /* Huy hiệu TRÒN — vai trò như tấm ảnh tròn ở góc tờ mẫu. Ảnh nền lấy
     từ trường CMS "scene_bg"; thiếu thì rơi về tranh nền mặc định. */
  position: absolute;
  top: clamp(16px, 2.4vw, 38px);
  right: clamp(22px, 3.2vw, 56px);
  width: clamp(74px, 9vw, 140px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--orange);
  background: center / cover no-repeat url("../../pref/vietnam_theme1.png");
  box-shadow: 0 14px 34px rgba(18, 53, 40, 0.26);
  z-index: 4;
}
.mag-tag {
  flex: none;
  margin: clamp(10px, 1.4vw, 20px) 0 0;
  font-weight: 600;
  font-size: clamp(8.5px, 0.76vw, 11px);
  letter-spacing: 0.2em;
  color: rgba(18, 53, 40, 0.62);
}

/* =====================================================================
   5 · TỜ KẾT  (.mag-spread--end) — lời kết + nút quay về bản đồ
   ===================================================================== */
.mag-spread--end .mag-page {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.mag-end-eyebrow {
  font-weight: 700;
  font-size: clamp(9px, 0.78vw, 11px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--mag-accent-alt);
}
.mag-spread--end h2 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(28px, 4vw, 66px);
  line-height: 1.16;
  margin: clamp(10px, 1.2vw, 18px) 0 clamp(12px, 1.4vw, 22px);
  color: var(--mag-ink);
}
.mag-spread--end p {
  max-width: 34ch;
  margin: 0 auto clamp(18px, 2.2vw, 32px);
  font-size: clamp(12px, 1.05vw, 16px);
  line-height: 1.68;
  color: rgba(18, 53, 40, 0.74);
}
.mag-colophon {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(13px, 1.2vw, 19px);
  line-height: 1.6;
  max-width: 26ch;
  color: rgba(18, 53, 40, 0.7);
}
.mag-colophon strong {
  display: block;
  margin-bottom: 0.5em;
  font-family: var(--display);
  font-style: normal;
  font-weight: 400;
  font-size: 1.5em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mag-ink);
}

/* =====================================================================
   6 · GỢI Ý CUỘN
   ===================================================================== */
.mag-cue {
  display: block;
  margin: 0 auto clamp(26px, 4vh, 54px);
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(18, 53, 40, 0.48);
}

/* =====================================================================
   7 · CHẾ ĐỘ ĐỌC MỘT CỘT  (.mag--single)
   ---------------------------------------------------------------------
   Bật khi màn hẹp (điện thoại/tablet dọc) hoặc khi người dùng chọn giảm
   chuyển động. Lúc đó KHÔNG dàn trang nữa: person-magazine.js đổ thẳng mọi
   khối vào một cột chảy dài. Lý do phải bỏ hẳn thuật toán rót chữ chứ
   không chỉ đổi --mag-cols về 1: khổ giấy 1.414:1 co xuống bề ngang điện
   thoại thì mỗi trang chỉ còn chỗ cho dăm dòng, bài 26 mục sẽ nở thành
   gần trăm tờ giấy tí hon.
   ===================================================================== */
.mag--single .mag-reader {
  width: min(92vw, 620px);
  margin: 0 auto;
  padding: clamp(26px, 7vw, 46px) clamp(20px, 6vw, 38px);
  background: var(--mag-paper);
  color: var(--mag-ink);
  box-shadow: 0 24px 60px rgba(18, 53, 40, 0.18);
}
.mag--single .mag-flow {
  columns: 1;
  column-rule: none;
  height: auto !important;
  overflow: visible;
  font-size: 15px;
  line-height: 1.75;
}
.mag--single .mag-title,
.mag--single .mag-quote,
.mag--single .mag-stats {
  column-span: none;
}
.mag--single .mag-stats {
  flex-direction: column;
  gap: 14px;
}
.mag--single .mag-fig img,
.mag--single .mag-cut img {
  max-height: none;
}

/* Tờ mở đầu / tờ kết trên màn hẹp: bỏ khổ giấy đôi, xếp dọc hai trang. */
@media (max-width: 900px) {
  .mag-spread {
    grid-template-columns: 1fr;
    width: min(92vw, 620px);
    aspect-ratio: auto;
  }
  .mag-spread::after { display: none; }
  .mag-spread--cover .mag-page--l {
    aspect-ratio: 3 / 4;
    min-height: 62vh;
  }
  .mag-page { padding: clamp(22px, 6vw, 38px); }
  .mag-badge { width: 72px; }
  .mag-spread--end .mag-page { padding-block: clamp(40px, 9vw, 70px); }
}

/* Giảm chuyển động: reveal đã bị base.css vô hiệu, ở đây chỉ cần chắc
   chắn các tờ không còn hiệu ứng nâng. */
@media (prefers-reduced-motion: reduce) {
  .mag-spread { transition: none; }
}