/* ============================================================
   news-article.css — trang chi tiết một bài (tin-tuc-chi-tiet.html)

   MỘT trang dùng chung cho cả 8 bài; nội dung do news-article.js điền từ
   ?bai=<slug> (nguồn: news-data.js + i18n.js). Cùng khuôn với
   san-pham-chi-tiet.html / product.css.

   NHỊP: bìa tràn viền có scrim → rail dính | cột chữ 72ch → bài trước/sau
   → bài liên quan → CTA band.

   CỘT CHỮ HẸP LÀ CHỦ Ý, KHÔNG PHẢI LỖI LỀ. Khách vừa báo "thân trang bị bóp
   nhỏ so với lề" ở trang danh sách, nên nói rõ để lần sau khỏi sửa nhầm:
   thứ phải thẳng hàng với header là MÉP NGOÀI của khối (.container ở đây đã
   opt-in --maxw-wide), còn bề rộng DÒNG CHỮ thì phải hẹp, nếu không mắt mất
   dấu khi nhảy dòng. Rail bên trái chính là thứ dùng hết phần lề rộng đó.

   .ntag / .ndate khai lại ở đây: chúng sống trong news-list.css, mà mỗi
   trang chỉ nạp file CSS của mình. Thông số để trùng nhau nên hai trang vẫn
   đọc ra một ngôn ngữ.
   ============================================================ */

/* ---- Lề: nối đúng nhịp header/footer, như news-list.css ------------ */
/* .na-hero__body vào chung danh sách này từ 2026-09-07: khách chốt tiêu đề bài
   phải "canh sát lề trái", tức thẳng hàng với logo/menu của header — mà header
   chạy nhịp --maxw-wide/--pad-wide, không phải --maxw của .container. */
.na-hero__body,
.na-body .container,
.na-more .container{max-width:var(--maxw-wide);padding-inline:var(--pad-wide);}


/* ============================================================
   THANH TIẾN ĐỘ ĐỌC
   ============================================================
   z-index 80 nằm đúng khe trống của thang đã có trong common.css:
   header 70 < 80 < overlay menu mobile 90. Trên header để khi header trượt
   đi (.is-hidden) thanh vẫn còn; dưới overlay để menu mở thì nó không đâm
   xuyên qua lớp phủ. */
.na-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:80;
  background:transparent;pointer-events:none;
}
.na-progress__bar{
  display:block;height:100%;width:100%;
  /* Thanh tiến độ là DẤU TRANG TRÍ, không phải chữ → được dùng sắc vàng. */
  background:var(--gold);
  transform:scaleX(0);transform-origin:left center;
}
/* Không có GSAP thì effects.js §12 không chạy và thanh đứng yên ở 0 —
   một vạch cụt nằm im còn khó hiểu hơn là không có gì, nên giấu hẳn.
   .is-live do effects.js gắn khi nó thực sự dựng được scrub. */
.na-progress{opacity:0;transition:opacity .3s var(--ease);}
.na-progress.is-live{opacity:1;}


/* ============================================================
   BÌA TRÀN VIỀN + TIÊU ĐỀ ĐÈ LÊN
   ============================================================ */
.na-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--dark);}
/* Khung cao cố định + ảnh cao 112% thò đều hai đầu 6%: ĐÚNG cặp số mà
   .fb--* và .plist-card đang dùng, để cú trôi thị sai ±4.5% trong
   effects.js §15 không bao giờ kéo lộ mép. Sửa một bên phải sửa bên kia. */
.na-hero__media{position:relative;overflow:hidden;height:clamp(420px,56vw,760px);}
.na-hero__media img{
  position:absolute;left:0;top:-6%;width:100%;height:112%;
  display:block;object-fit:cover;background:var(--gray-100);
}
/* Scrim: ĐÚNG thông số đã đo trên .fb--overlay của ve-huu-tin.html. Đây là
   con số đã kiểm tương phản cho chữ trắng đè ảnh — đừng làm nhạt đi cho
   "thoáng", vì ảnh bìa mỗi bài một sáng tối khác nhau. */
.na-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(34,44,96,.24) 0%,rgba(34,44,96,.66) 100%);
}
.na-hero__body{
  position:absolute;inset:auto 0 0 0;z-index:2;
  padding-bottom:clamp(32px,5vw,72px);
}
.na-hero h1{
  font-size:var(--fs-h1);line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);color:var(--white);
  margin:0;max-width:26ch;
}
.na-hero__dek{
  margin:clamp(12px,1.6vw,22px) 0 0;max-width:68ch;
  font-size:var(--fs-lead);line-height:var(--lh-body);color:rgba(255,255,255,.9);
}
.na-hero__meta{
  display:flex;align-items:center;gap:clamp(10px,1.2vw,18px);flex-wrap:wrap;
  margin:0 0 clamp(12px,1.4vw,20px);
}
/* CHIP VÀNG như nhãn trên thẻ tin (khách chốt 2026-09-07: "label định dạng
   giống ở card tin tức"). Bản trước huỷ nền chip và để nhãn thành chữ trắng
   trơn — nay trả lại đúng khuôn chip, chỉ bỏ phần position:absolute vì ở đây
   nó nằm trong hàng meta chứ không đè góc ảnh.
   Chữ ĐEN trên chip: trắng trên đầu sáng của gradient chỉ 1.96:1. */
.na-hero__meta .ntag{
  position:static;
  padding:6px 12px;line-height:1;
  background:var(--gold-grad);color:var(--btn-ink);
  border-radius:var(--radius-sm);
}
.na-hero__meta .ndate{color:rgba(255,255,255,.82);}
/* ICON LỊCH VÀNG kể cả trên nền tối (khách 2026-09-07: đồng bộ toàn web).
   --gold trên scrim tối được 4.4:1 — vẫn đọc rõ, và đây là icon chứ không
   phải chữ nên ngưỡng 3:1 mới là ngưỡng phải qua. */
.na-hero__meta .ndate .icon{color:var(--gold);}

/* Nhãn + ngày dùng chung (bản sao của news-list.css, xem đầu file) */
.ntag{
  font-family:var(--font-display);font-size:var(--fs-micro);
  font-weight:var(--fw-medium);letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-deep);
}
.ndate{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-meta);letter-spacing:.04em;color:var(--gray-500);
}
.ndate .icon{width:15px;height:15px;color:var(--gold);}


/* ============================================================
   THÂN BÀI — rail dính | cột chữ
   ============================================================
   HAI cột: bài SÁT LỀ TRÁI, cột phụ (mục lục + bài mới nhất) bên phải và
   dính khi cuộn. Khách chốt 2026-09-07 — bản trước là ba cột với rail meta ở
   lề trái và cột chữ canh giữa. */
.na-body{padding-block:clamp(48px,6.5vw,104px);background:var(--bg);}
/* Khách chỉnh ba lượt trong ngày 2026-09-07, lượt cuối nói rõ nhất: cột trái
   giảm 10%, cột phải GIỮ NGUYÊN, phần dôi ra dồn hết vào KHE GIỮA.
   ⚠️ Không làm được bằng cách đổi tỉ lệ fr: fr chia phần còn lại SAU khe, nên
   thu cột trái bằng fr là cột phải tự phình ra — đúng cái lượt trước làm sai.
   Cách đúng: ghim bề rộng cột phải theo % khung (23.8% ≈ 305px ở khổ 1440,
   bằng đúng bề rộng nó đang có), rồi cho khe co giãn theo % để nuốt phần dôi.
   Khe % trong grid tính theo bề ngang khung chứa, nên tỉ lệ giữ nguyên ở mọi
   khổ màn. Kết quả ở 1440: trái 823 (trước 913, đúng −10%), phải 305, khe 154. */
.na-body__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(230px,23.8%,320px);
  column-gap:clamp(36px,12%,160px);
  row-gap:clamp(28px,3.4vw,44px);
  align-items:start;
}
.na-prose{grid-column:1;}

/* ---- Cột phụ bên phải ---------------------------------------------- */
/* MỤC LỤC BÁM THEO SUỐT BÀI (khách chốt 2026-09-07 "cho mục lục follow theo
   khi scroll"). Bản trước dính CẢ CỘT: cột cao ~700px, cao hơn khung nhìn còn
   lại, nên khi cuộn xuống thì chính mục lục trôi lên khỏi màn hình — dính mà
   vẫn không thấy.
   Nay cột KHÔNG dính, chỉ khối mục lục dính. Để làm được vậy cột phải cao bằng
   cả hàng (align-self:stretch, đè align-items:start của lưới) — sticky chỉ có
   tác dụng trong phạm vi phần tử cha, cha lùn thì mục lục nhả ra sớm.
   Khối "bài viết mới nhất" trôi đi bình thường, đúng ý: nó là thứ đọc một lần. */
/* GHIM CẢ CỘT — mục lục VÀ bài viết mới nhất (khách chốt 2026-09-07: "pin luôn
   bài viết mới nhất"). Bản trước chỉ ghim riêng khối mục lục, khối bài mới nhất
   trôi đi mất.
   max-height + overflow-y là phần bắt buộc đi kèm: cột dính mà cao hơn khung
   nhìn thì phần dưới của nó không bao giờ tới lượt được nhìn thấy. Kẹp chiều
   cao lại thì cột tự cuộn trong lòng nó khi cần, còn khi vừa (phần lớn khổ
   desktop) thì không có thanh cuộn nào hiện ra.
   align-self:start chứ KHÔNG stretch: sticky cần phần tử cao đúng bằng nội
   dung, stretch sẽ kéo nó cao bằng cả bài và cột đứng im tại chỗ. */
.na-side{
  grid-column:2;align-self:start;display:block;
  position:sticky;top:calc(var(--header-h) + 28px);
  max-height:calc(100dvh - var(--header-h) - 56px);
  overflow-y:auto;
  scrollbar-width:thin;
}
.na-side .na-side__block + .na-side__block{margin-top:clamp(28px,3.4vw,44px);}
.na-side__head{
  margin:0 0 14px;padding-bottom:10px;
  border-bottom:1px solid var(--gray-200);
  font-family:var(--font-display);font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--gray-500);
}
/* Mục lục: đánh số bằng ::before chứ không list-style, để số dùng đúng màu
   vàng và không lệch khi mục xuống hai dòng. */
.na-toc__list{margin:0;padding:0;list-style:none;display:grid;gap:10px;counter-reset:toc;}
.na-toc__list li{counter-increment:toc;}
.na-toc__list a{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--gray-700);
  text-decoration:none;transition:color .25s var(--ease);
}
.na-toc__list a::before{content:counter(toc,decimal-leading-zero);color:var(--gold);}
.na-toc__list a:hover,
.na-toc__list a:focus-visible{color:var(--heading);}
/* MỤC ĐANG ĐỌC (news-article.js gắn .is-active theo vị trí cuộn). Đánh dấu
   bằng nét đậm + màu đậm chứ không bằng nền: cột này hẹp, một mảng nền sẽ
   thành khối nặng nhất trang. */
.na-toc__list a.is-active{color:var(--heading);font-weight:var(--fw-bold);}
.na-toc__list a.is-active::before{color:var(--gold);font-weight:var(--fw-bold);}

.na-latest__list{margin:0;padding:0;list-style:none;display:grid;gap:clamp(14px,1.6vw,20px);}
.na-mini{display:flex;gap:12px;text-decoration:none;align-items:flex-start;}
.na-mini__media{
  flex:0 0 64px;aspect-ratio:1/1;overflow:hidden;
  background:var(--greige);border-radius:var(--radius-lg);
}
.na-mini__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease);}
.na-mini:hover .na-mini__media img{transform:scale(1.06);}
.na-mini__txt{min-width:0;display:grid;gap:4px;}
.na-mini__title{
  font-family:var(--font-body);font-weight:var(--fw-bold);
  font-size:var(--fs-sm);line-height:var(--lh-tight);color:var(--heading);
  transition:color .25s var(--ease);
}
.na-mini:hover .na-mini__title{color:var(--dark);}
.na-mini__date{font-size:var(--fs-meta);letter-spacing:.04em;color:var(--gray-500);}

/* (CSS cột trái .na-rail__* đã gỡ 2026-09-07 cùng lúc với markup.) */


/* ============================================================
   CHỮ TRONG BÀI
   ============================================================
   Thứ bậc CHỈ bằng cỡ chữ: h1 --fs-h1 → h2 --fs-h2 → chữ thường --fs-body.
   Toàn site đã chốt tiêu đề một nét (--fw-heading 500) từ 2026-08-05, nên
   đừng nghĩ tới việc phân cấp bằng độ đậm — không có file font cho nó. */
.na-prose > * + *{margin-top:clamp(16px,1.8vw,24px);}
.na-prose p{
  font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--gray-700);margin:0;
}
/* Đoạn đầu tiên hơi lớn hơn: mở bài rõ ràng là một đoạn dẫn. */
.na-prose > p:first-child{font-size:var(--fs-lead);color:var(--ink);}

/* FONT CHỮ CHẠY NÉT BOLD, không còn Beautique (khách chốt 2026-09-07 "tiêu đề
   đổi font"). Cùng một quyết định với tiêu đề thẻ tin — xem .ncard h3 trong
   news-list.css; giờ mọi tiêu đề thuộc mạch tin tức đọc ra một giọng. */
.na-prose h2{
  font-family:var(--font-body);font-weight:var(--fw-bold);
  /* NHỎ LẠI 8px so với --fs-h2 (khách chốt 2026-09-07): ở nét Bold của font
     chữ chạy, cùng một cỡ đọc ra nặng hơn hẳn tiêu đề nét Medium của Beautique,
     nên thang cỡ chung không còn hợp cho riêng chỗ này. */
  font-size:calc(var(--fs-h2) - 8px);line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);color:var(--heading);
  margin:clamp(34px,4vw,56px) 0 0;
}
/* Khoảng cách trên tiêu đề phụ vẫn LỚN HƠN khoảng cách dưới nó (tiêu đề phải
   dính vào đoạn nó mở đầu), nhưng khe dưới đã NỚI RA: khách 2026-09-07 báo
   "tiêu đề Chọn khổ bản quá sát với cụm text bên dưới". Khối ngay dưới tiêu
   đề có thể là p HOẶC ul — bản trước chỉ khai cho p, nên đúng cái ảnh khách
   gửi (tiêu đề + danh sách) lại rơi vào khe mặc định. */
.na-prose h2 + p,
.na-prose h2 + ul,
.na-prose h2 + blockquote,
.na-prose h2 + figure{margin-top:clamp(12px,1.4vw,18px);}

.na-prose ul{margin:0;padding:0;list-style:none;display:grid;gap:10px;}
.na-prose li{
  position:relative;padding-left:22px;
  font-size:var(--fs-body);line-height:var(--lh-body);color:var(--gray-700);
}
/* Dấu đầu dòng vuông, cùng ngôn ngữ với --radius-lg:0 của toàn site. */
.na-prose li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;background:var(--gold);
}

/* Khối ý chính. KHÔNG nghiêng: chữ Việt cỡ lớn mà nghiêng thì dấu thanh
   chồng lên nhau ở các dòng sát nhau (đã đo, xem ghi chú sàn line-height
   trong common.css). Nhấn bằng cỡ chữ + gạch trái là đủ. */
/* Gạch trái VÀNG và DÀY 4px (khách 2026-09-07: "line thành màu vàng tăng
   border"), thêm nền kem để khối nhấn tách hẳn khỏi dòng chảy chứ không chỉ
   là một đoạn thụt lề. --gold-deep cũ đọc ra nâu xỉn cạnh chip vàng ở trên. */
.na-prose blockquote{
  margin:clamp(28px,3.4vw,44px) 0 0;
  padding:clamp(16px,1.8vw,24px) clamp(18px,2vw,28px);
  border-left:4px solid var(--gold);
  background:var(--gray-100);
  font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--heading);
  /* Trần 61ch ĐÃ GỠ (khách 2026-09-07 "tăng width cụm highlight"): từ khi cột
     chữ chuyển sang tỉ lệ 3fr, trần đó làm khối nhấn hụt hẳn so với đoạn văn
     bên trên và đọc ra như bị thụt lề. Nay rộng bằng cột. */
}
.na-prose blockquote p{font-size:inherit;line-height:inherit;color:inherit;}

.na-prose figure{margin:clamp(28px,3.4vw,48px) 0 0;}
.na-prose figure img{
  display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  background:var(--gray-100);border-radius:var(--radius-lg);
}
.na-prose figcaption{
  margin-top:10px;font-size:var(--fs-meta);line-height:var(--lh-tight);
  color:var(--gray-500);
}

/* Ghi chú "đang chờ dữ liệu thật" — cùng khuôn .pd-note của trang sản phẩm.
   Nói thẳng ra thay vì để trang trông như đã đầy đủ. */
.na-prose .na-tbd{
  margin-top:clamp(24px,3vw,40px);
  border-top:1px solid var(--gray-200);padding-top:16px;
  font-size:var(--fs-meta);line-height:var(--lh-body);
  color:var(--gray-500);
}


/* (Khối BÀI TRƯỚC / BÀI SAU .na-nav/.na-step đã gỡ 2026-09-07 theo yêu cầu
   của khách — markup lẫn CSS.) */


/* ============================================================
   BÀI LIÊN QUAN — CÙNG KHUÔN THẺ VỚI TRANG DANH SÁCH
   ============================================================
   Thẻ do news-article.js dựng với đúng lớp .ncard/.ncard__media/.ntag/
   .ncard__meta/h3, và news-list.css (đã nạp trên trang này) lo toàn bộ hình
   thức. Ở đây CHỈ khai lưới và tiêu đề khối.
   Khách chốt 2026-09-07: bản trước cố ý dùng thẻ hàng ngang cho khác trang
   danh sách; nay hai trang dùng chung một khuôn. Lớp .na-row đã gỡ. */
.na-more{background:var(--bg);padding-block:clamp(56px,7.5vw,112px);}
.na-more__head{
  font-size:var(--fs-h2);
  line-height:var(--lh-heading);letter-spacing:var(--ls-heading);
  color:var(--heading);margin:0 0 clamp(24px,3vw,44px);
}
.na-more__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.6vw,44px);
}

/* ⚠️ BẢN SAO CÓ CHỦ Ý của khuôn thẻ trong news-list.css. Trang này KHÔNG nạp
   news-list.css (chỉ common.css + news-article.css), nên không chép thì thẻ
   do JS dựng ra sẽ trần trụi — chip chuyên mục rơi xuống dưới ảnh thay vì đè
   góc trên.
   Chép chứ không nạp cả file: news-list.css còn mang theo dải kiến thức ghim
   màn hình và lưới bài viết, toàn thứ trang này không có markup.
   ⚠️ SỬA KHUÔN THẺ thì sửa CẢ HAI CHỖ — .ncard trong news-list.css và khối
   này. Đó là cái giá của bản sao, đã cân nhắc. */
.na-more .ncard{position:relative;display:flex;flex-direction:column;text-decoration:none;}
.na-more .ncard__media{
  display:block;position:relative;overflow:hidden;
  aspect-ratio:4/3;background:var(--greige);border-radius:var(--radius-lg);
}
.na-more .ncard__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease);
}
.na-more .ncard:hover .ncard__media img,
.na-more .ncard:focus-visible .ncard__media img{transform:scale(1.05);}
.na-more .ntag{
  position:absolute;top:14px;left:14px;z-index:4;
  padding:6px 12px;line-height:1;
  background:var(--gold-grad);color:var(--btn-ink);
  border-radius:var(--radius-sm);
}
.na-more .ncard__meta{
  display:flex;align-items:center;gap:clamp(10px,1.2vw,18px);flex-wrap:wrap;
  margin:clamp(14px,1.6vw,20px) 0 clamp(8px,1vw,12px);
}
.na-more .ncard h3{
  font-family:var(--font-body);font-weight:var(--fw-bold);
  font-size:var(--fs-h3);line-height:var(--lh-heading);
  color:var(--heading);margin:0;transition:color .25s var(--ease);
}
.na-more .ncard:hover h3,
.na-more .ncard:focus-visible h3{color:var(--dark);}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  /* Cột phụ hết dính, xuống DƯỚI bài. Ở khổ này ép nó thành cột riêng thì cả
     mục lục lẫn tiêu đề bài mới nhất đều vỡ 3-4 dòng. */
  .na-body__grid{grid-template-columns:minmax(0,1fr);}
  .na-prose,
  .na-side{grid-column:1;}
  /* Trần 85ch giữ cho khổ 1025-1100 (ở đó cột phụ vẫn còn, chỉ là xuống dưới).
     Từ 1024 trở xuống cột phụ ẨN HẲN nên bài phải ăn trọn bề ngang trang —
     xem media query 1024 bên dưới (khách chốt 2026-09-08 "tablet dọc cho nội
     dung full trang"). */
  .na-prose{max-width:85ch;}
  /* Dưới 1100px cột phụ nằm NGANG dưới bài — không còn chỗ để ghim, và cũng
     không được kẹp chiều cao. */
  .na-side{
    position:static;max-height:none;overflow:visible;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(28px,3.4vw,44px);
    margin-top:clamp(28px,3.4vw,44px);
  }
  .na-side .na-side__block + .na-side__block{margin-top:0;}
}

@media (max-width:768px){
  .na-more__grid{grid-template-columns:1fr;gap:clamp(18px,4vw,26px);}
}

/* TABLET DỌC & ĐIỆN THOẠI: ẨN HẲN cột phụ (khách chốt 2026-09-08). Ở khổ này
   nó nằm ngang bên dưới bài, mục lục thì trùng với chính các tiêu đề người đọc
   vừa lướt qua, còn "bài viết mới nhất" thì lặp lại khối bài liên quan ở cuối
   trang. 1024px là mốc "tablet trở xuống" dùng chung của site (cùng mốc bật
   nút menu ba gạch). */
@media (max-width:1024px){
  .na-side{display:none;}
  /* Cột phụ đã ẩn → bài chiếm trọn bề ngang, bỏ luôn trần khổ đọc. */
  .na-prose{max-width:none;}
}
@media (max-width:640px){
  .na-hero__media{height:clamp(320px,72vw,440px);}
  .na-hero h1{max-width:none;}
  .na-side{grid-template-columns:1fr;}
}

/* Máy cảm ứng: :hover dính lại sau khi chạm, ảnh sẽ đứng ở trạng thái phóng
   to mãi. .ncard đã có rule tương ứng trong news-list.css. */
@media (hover:none){
  .na-mini:hover .na-mini__media img{transform:none;}
}