/* ═══════════════════════════════════════════════════════════════
   HUB SYSTEM — Namban Panorama
   Nạp SAU <style> inline của từng hub → override theo cascade.
   Gỡ 1 dòng <link> là quay về nguyên trạng.

   Gồm:  A khoảng trắng +20%  ·  B baseline grid 8  ·  C card magazine
         D hover 0.18s        ·  F type scale       ·  ① card dẫn đầu
         ② tông riêng từng hub (dossier · story · guide)
   Palette & font: KHÔNG đổi — chỉ đổi nhịp, cỡ và khoảng.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── B · BASELINE GRID 8 — mọi khoảng cách lấy từ đây, không số lẻ ── */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:96px;

  /* ── F · TYPE SCALE hai đầu: mobile đọc được → PC báo giấy ── */
  --fs-display:clamp(38px,6vw,64px);   /* hero trang chủ            */
  --fs-h1:clamp(32px,5vw,48px);        /* tiêu đề hub               */
  --fs-h2:clamp(23px,3vw,31px);        /* tiêu đề mục (hạ từ 36)    */
  --fs-h3:clamp(21px,2.6vw,28px);      /* card dẫn đầu              */
  --fs-body:clamp(17px,1.6vw,20px);    /* thân bài (mobile giữ 17)  */
  --fs-cap:clamp(14px,1.2vw,16px);     /* chú thích, mô tả card     */
  --fs-micro:11px;                     /* eyebrow, nhãn             */

  /* ── C/D · CARD & HOVER ── */
  --card-bd:rgba(225,217,200,.72);     /* --line mờ đi: viền mảnh hơn */
  --card-r:2px;                        /* radius nhỏ hơn: 3 → 2       */
  --ease:cubic-bezier(.22,1,.36,1);
  --t-hover:.18s;                      /* D · transition cực nhẹ      */
}

/* ═══ A · KHOẢNG TRẮNG +20% ═══════════════════════════════════ */
main{padding:var(--s2) 0 var(--s6);}
.hgroup{margin-bottom:var(--s5);}
.pick-sec{padding:var(--s4) 0 var(--s1);}
.hub-band{margin:var(--s6) 0;}
.facts{margin:var(--s6) 0;}
.breath{margin:var(--s6) 0;padding:0 var(--s1);}
.heye{margin-bottom:var(--s1);letter-spacing:2.5px;font-size:var(--fs-micro);}

/* ═══ F · TYPE SCALE ═══════════════════════════════════════════ */
.hero h1{font-size:var(--fs-h1);line-height:1.06;letter-spacing:-.6px;margin:0 0 var(--s2);}
.hero-lede{font-size:var(--fs-cap);line-height:1.6;}
.hub-band figcaption{font-size:var(--fs-cap);margin-top:var(--s2);}
.hub-band img{aspect-ratio:16/9;object-fit:cover;object-position:center;height:auto;}
.facts .fn{font-size:var(--fs-h3);}
.facts .fl{font-size:var(--fs-cap);margin-top:var(--s1);}
.breath .bq{font-size:var(--fs-h2);line-height:1.4;}
.breath .bsrc{font-size:var(--fs-micro);margin-top:var(--s2);}

/* ═══ C · CARD MAGAZINE — viền mảnh, padding lớn, radius nhỏ ═══ */
.pick-grid{gap:var(--s2);margin-top:var(--s2);}
.pick-grid a{
  background:var(--card);
  border:1px solid var(--card-bd);
  border-radius:var(--card-r);
  padding:var(--s4) var(--s4) calc(var(--s4) + var(--s1));
  box-shadow:none;
  /* D · hover cực nhẹ: KHÔNG transform, KHÔNG scale */
  transition:border-color var(--t-hover) ease, box-shadow var(--t-hover) ease, background var(--t-hover) ease;
}
.pick-grid a:hover{
  background:#fdfbf7;
  border-color:rgba(157,93,56,.34);
  box-shadow:0 1px 3px rgba(26,24,21,.05);
  transform:none;                       /* huỷ translateY cũ */
}
.pick-grid .pk-t{font-size:var(--fs-h3);line-height:1.2;margin-bottom:var(--s1);letter-spacing:-.2px;}
.pick-grid .pk-s{font-size:var(--fs-cap);line-height:1.58;}

.kb a{padding:var(--s3) 2px;transition:padding-left var(--t-hover) ease,color var(--t-hover) ease;}
.kb a:hover{padding-left:var(--s1);}
.kb .kb-t{font-size:var(--fs-h3);line-height:1.28;}
.kb .kb-s{font-size:var(--fs-cap);}

/* ═══ ① CARD DẪN ĐẦU — bất đối xứng ════════════════════════════
   eyebrow nhỏ · title lớn · description dài hơn · nhiều khoảng trắng */
.pick-grid a.lead{
  grid-column:1 / -1;
  padding:var(--s5) var(--s5) calc(var(--s5) - var(--s1));
  background:linear-gradient(180deg,#fdfbf6 0%,var(--card) 100%);
}
.pick-grid a.lead .pk-k{
  display:block;font-size:var(--fs-micro);letter-spacing:2.2px;
  text-transform:uppercase;color:var(--clay);margin-bottom:var(--s2);
}
.pick-grid a.lead .pk-t{
  font-size:var(--fs-h2);line-height:1.13;letter-spacing:-.5px;margin-bottom:var(--s2);
}
.pick-grid a.lead .pk-s{
  font-size:var(--fs-body);line-height:1.62;max-width:62ch;color:var(--muted);
}

/* ═══ ② TÔNG RIÊNG TỪNG HUB — chỉ đổi rhythm, không đổi màu ════ */

/* ── ĐẦU TƯ · tông HỒ SƠ (Financial Times) ────────────────────
   KHÔNG dùng card. Dùng DÒNG KẺ + SỐ TO — như mục lục báo cáo. */
.hub-dossier .pick-grid{
  display:block;                       /* huỷ lưới card         */
  border-top:2px solid var(--ink);
  margin-top:var(--s3);
}
.hub-dossier .pick-grid a{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:baseline;
  background:transparent;border:0;border-bottom:1px solid var(--line);
  border-radius:0;padding:var(--s3) 0;counter-increment:dx;
}
.hub-dossier .pick-grid a::before{
  content:counter(dx,decimal-leading-zero);
  font-family:'Fraunces',serif;font-size:26px;font-weight:300;
  color:var(--stone);line-height:1;min-width:2.2ch;
}
.hub-dossier .pick-grid a:hover{background:rgba(250,246,238,.7);box-shadow:none;border-bottom-color:var(--clay);}
.hub-dossier .pick-grid a:hover::before{color:var(--clay);}
.hub-dossier .pick-grid .pk-t{font-size:20px;line-height:1.28;margin-bottom:4px;}
.hub-dossier .pick-grid .pk-s{font-size:13.5px;grid-column:2;}
.hub-dossier .pick-sec{counter-reset:dx;padding:var(--s5) 0 var(--s1);}
.hub-dossier .pick-grid a.lead{
  display:block;border-bottom:2px solid var(--ink);
  background:transparent;padding:var(--s4) 0 var(--s5);
}
.hub-dossier .pick-grid a.lead::before{content:none;}   /* bỏ số ở bài dẫn → dãy bắt đầu từ 01 */
.hub-dossier .pick-grid a.lead .pk-s{grid-column:auto;max-width:58ch;}
.hub-dossier .heye{
  border-bottom:0;padding-bottom:0;margin-bottom:var(--s1);color:var(--ink);font-weight:500;
}
.hub-dossier .facts{border-radius:0;border-width:2px 0 1px;margin:var(--s5) 0;}
.hub-dossier .hub-band img{border-radius:0;}
.hub-dossier .kb a{padding:var(--s2) 2px;}

/* ── VỀ NAM BAN · tông PHÓNG SỰ (National Geographic) ─────────
   KHÔNG khung, KHÔNG kẻ. Chữ TO, thở rộng. Ảnh tràn mép màn.  */
.hub-story .pick-grid{display:block;margin-top:var(--s4);}
.hub-story .pick-grid a{
  display:block;background:transparent;border:0;border-radius:0;
  padding:0 0 var(--s5);margin-bottom:var(--s5);max-width:46ch;
  border-bottom:1px solid var(--card-bd);
}
.hub-story .pick-grid a:last-child{border-bottom:0;}
.hub-story .pick-grid a:hover{background:transparent;box-shadow:none;}
.hub-story .pick-grid a:hover .pk-t{color:var(--clay);}
.hub-story .pick-grid .pk-t{
  font-size:var(--fs-h2);line-height:1.16;letter-spacing:-.4px;
  margin-bottom:var(--s2);transition:color var(--t-hover) ease;
}
.hub-story .pick-grid .pk-s{
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:var(--fs-cap);line-height:1.6;color:var(--muted);
}
.hub-story .pick-grid a.lead{max-width:none;margin-bottom:var(--s6);padding-bottom:var(--s5);}
.hub-story .pick-grid a.lead .pk-t{font-size:var(--fs-h1);}
.hub-story .pick-sec{padding:var(--s6) 0 var(--s1);}
.hub-story .heye{text-align:center;letter-spacing:3.4px;margin-bottom:var(--s4);}
.hub-story .hub-band{margin:var(--s7) calc(50% - 50vw);width:100vw;max-width:100vw;}
.hub-story .hub-band img{padding:0;border:0;box-shadow:none;border-radius:0;}
.hub-story .hub-band figcaption{
  font-size:var(--fs-cap);margin-top:var(--s3);max-width:60ch;
  margin-left:auto;margin-right:auto;padding:0 var(--s3);
}
.hub-story .breath{margin:var(--s7) 0;}
.hub-story .breath .bq{font-size:var(--fs-h2);max-width:20ch;}
.hub-story .kb a{padding:var(--s3) 2px;}

/* ── ĐẤT · tông CẨM NANG (handbook) ───────────────────────────
   GIỮ lưới card — đây là hub duy nhất còn khung. Gọn, tra cứu. */
.hub-guide .pick-grid{gap:var(--s2);}
.hub-guide .pick-grid a{padding:var(--s3) var(--s3) var(--s4);position:relative;}
.hub-guide .pick-grid .pk-t{font-size:19px;line-height:1.24;}
.hub-guide .pick-grid .pk-s{font-size:13.5px;}
.hub-guide .pick-sec{padding:var(--s5) 0 var(--s1);counter-reset:pk;}
.hub-guide .pick-grid a::before{
  counter-increment:pk;content:counter(pk,decimal-leading-zero);
  position:absolute;top:var(--s2);right:var(--s3);
  font-family:'Fraunces',serif;font-style:italic;font-size:12px;color:var(--stone);
}
.hub-guide .heye{
  display:flex;align-items:baseline;gap:var(--s1);
  border-bottom:1px solid var(--card-bd);padding-bottom:var(--s1);margin-bottom:var(--s3);
}
.hub-guide .heye .gnum{
  font-family:'Fraunces',serif;font-style:italic;text-transform:none;
  letter-spacing:0;color:var(--stone);font-size:13px;margin-left:auto;
}
.hub-guide .pick-grid a.lead{padding:var(--s4) var(--s4) var(--s3);}
.hub-guide .pick-grid a.lead .pk-t{font-size:var(--fs-h3);}
.hub-guide .pick-grid a.lead .pk-s{font-size:var(--fs-cap);}
.hub-guide .pick-grid a.lead::before{content:none;}

/* ═══ MOBILE 640 ═══════════════════════════════════════════════ */
@media(max-width:640px){
  main{padding:var(--s1) 0 var(--s5);}
  .pick-grid{grid-template-columns:1fr;gap:var(--s2);}
  .pick-grid a{padding:var(--s3) var(--s3) var(--s4);}
  .pick-grid a.lead{padding:var(--s4) var(--s3) var(--s3);}
  .hub-band{margin:var(--s5) 0;}
  .hub-story .hub-band{margin:var(--s5) 0;}
  .facts{margin:var(--s5) 0;}
  .breath,.hub-story .breath{margin:var(--s5) 0;}
  .pick-sec,.hub-guide .pick-sec,.hub-story .pick-sec{padding:var(--s4) 0 var(--s1);}
  .hub-story .hub-band{margin:var(--s5) calc(50% - 50vw);}
  .hub-story .pick-grid a.lead{padding:0;}
  .hub-story .pick-grid a{max-width:none;margin-bottom:var(--s4);padding-bottom:var(--s4);}
  .hub-dossier .pick-grid a{gap:var(--s2);}
  .hub-dossier .pick-grid a::before{font-size:21px;}
  .kb a{padding:var(--s2) 2px;}
}

/* ═══ GIẢM CHUYỂN ĐỘNG ═════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  .pick-grid a,.kb a{transition:none;}
}