/* ============================================================
   news-page.css — Dùng cho tin-tuc.html và bai-viet.html
   Section: n-feature · n-filter · n-list  (trang Tin tức)
            a-head · a-hero · a-body · a-gallery (trang Bài viết)
   Nạp SAU common.css.
   Card (.news-card), .tag, .pill, .pagination, .band-grey nằm trong
   common.css §15 — ở đây chỉ thêm phần riêng của hai trang này.
   ============================================================ */

/* ===== 0 · TAB PANEL =====
   main.js ẩn panel bằng thuộc tính [hidden]. UA style `[hidden]{display:none}`
   bị `.grid-2{display:grid}` (cùng độ đặc hiệu, nhưng là author style) đè mất,
   nên phải khai báo lại ở tầng author. */
[data-tab-panel][hidden] { display: none; }

/* ============================================================
   ===== A · TRANG TIN TỨC
   ============================================================ */

/* ===== 1 · BÀI NỔI BẬT ===== */
.n-feature { position: relative; margin-bottom: clamp(34px, 4.4vw, 56px); }

.n-feature__media {
  display: block; aspect-ratio: 21 / 9; border-radius: var(--r-md);
  overflow: hidden; background: var(--c-grey-light);
}
.n-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-media) var(--ease); }
.n-feature__card:hover .n-feature__media img { transform: scale(1.03); }

.n-feature__body {
  /* chừa chỗ cho cặp nút tròn nằm đè bên phải */
  padding: 18px 108px 0 0;
}
.n-feature__body .tag { margin-bottom: 12px; }
.n-feature__body h2 {
  font-size: clamp(21px, 2.3vw, 27px); font-weight: var(--fw-title); line-height: 1.4;
}
.n-feature__body h2 a { transition: color var(--dur) var(--ease); }
.n-feature__body h2 a:hover { color: var(--c-primary); }
.n-feature__body time { display: block; margin-top: 8px; font-size: var(--fs-xs); color: var(--c-muted); }

/* `z-index` KHÔNG được bỏ: Swiper tự đặt z-index:1 cho .swiper và
   .swiper-wrapper, còn khối nút này chỉ `position:absolute` với z-index:auto
   (=0) nên cả slider nằm ĐÈ LÊN nút — .n-feature__body ăn hết cú bấm và người
   dùng thấy "nút lùi/tiếp ở tin tức không dùng được" (client báo 30/07/2026).
   Đã đo bằng elementFromPoint tại tâm nút: trả về .n-feature__body. */
.n-feature__nav { position: absolute; right: 0; bottom: 10px; z-index: 2; }

/* ===== 2 · HÀNG PILL LỌC CHUYÊN MỤC =====
   Dáng lấy từ .pill-group (common.css §6) — nay là các NÚT RỜI, không còn khung
   xám bọc (phản hồi MONA R1 tr.10). Ở đây chỉ thêm khoảng cách xuống danh sách
   bài viết. */
.n-filter { margin-bottom: clamp(26px, 3.4vw, 40px); }

/* ===== 3 · DANH SÁCH BÀI VIẾT ===== */
.n-list { padding-bottom: var(--sp-section); }

/* ============================================================
   ===== B · TRANG BÀI VIẾT
   ============================================================ */

/* ===== 4 · TIÊU ĐỀ BÀI VIẾT ===== */
.a-head .tag { margin-bottom: 14px; }
.a-head h1 { max-width: 26ch; margin-inline: auto; }
.a-head .page-head__meta { margin-top: 14px; }

/* ===== 5 · ẢNH LỚN ĐẦU BÀI ===== */
.a-hero {
  display: block; aspect-ratio: 16 / 9; border-radius: var(--r-md);
  overflow: hidden; background: var(--c-grey-light);
}
.a-hero img { width: 100%; height: 100%; object-fit: cover; }

/* ===== 6 · THÂN BÀI 2 CỘT ===== */
.a-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 60px);
  align-items: center;
  padding-block: clamp(40px, 6vw, 76px);
}
.a-body__text p { font-size: var(--fs-body); line-height: 1.85; text-align: justify; }
.a-body__text p + p { margin-top: 18px; }

.a-body__media {
  aspect-ratio: 6 / 5; border-radius: var(--r-md);
  overflow: hidden; background: var(--c-grey-light);
}
.a-body__media img { width: 100%; height: 100%; object-fit: cover; }

/* ===== 7 · DẢI ẢNH CUỐI BÀI (trong .band-grey) ===== */
.a-gallery__swiper { overflow: hidden; }
/* <button> chứ không <div> — xem ghi chú ở .gallery__thumb (common.css §15).
   `width: 100%` để nút phủ đúng bề rộng slide như <div> vẫn làm. */
.a-gallery__item {
  display: block; width: 100%; padding: 0;
  aspect-ratio: 16 / 10; border-radius: var(--r-md);
  overflow: hidden; background: var(--c-grey-light); cursor: zoom-in;
}
.a-gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.a-gallery .nav-group { margin-top: clamp(18px, 2.4vw, 26px); }
/* Nút trên dải nền xám (--c-grey = #c9c9c9) — DẠNG VIỀN, không tô đặc.
   Client báo (30/07): nút ở đây "là dạng filled" trong khi mọi nơi khác của site
   là dạng viền. Nguyên nhân: `background: #fff` + viền --c-line-strong (#c4c4c4)
   đọc ra hai kiểu khác nhau tuỳ nền — trên nền TRẮNG (mặc định .nav-btn) thì
   phần tô trùng nền nên chỉ còn thấy đường viền; trên dải xám #c9c9c9 thì chính
   phần tô trắng nổi lên thành một đĩa đặc, còn viền #c4c4c4 gần trùng nền nên
   mất hút. Cùng một khai báo, hai hình dáng.

   Nền trong suốt + viền rgba(0,0,0,.45): composite trên #c9c9c9 ra ~#6f6f6f
   (~2.8:1), đọc rõ ra đường tròn. KHÔNG lùi về .22 như bản đầu 2026 — mức đó
   composite ra ~#9d9d9d, sát nền, đúng lần client báo "thiếu mũi tên".

   PHẢI khai đủ CẢ BA thuộc tính ở cả hai trạng thái. `.a-gallery .nav-btn` là
   (0,2,0), đúng BẰNG `.nav-btn:hover` của common.css — hoà đặc thù thì file nạp
   sau thắng, nhưng CHỈ ở những thuộc tính có mặt. Bản trước hover chỉ khai
   background + border-color, nên `color: #fff` của common.css còn nguyên →
   mũi tên trắng trên nền trắng, biến mất đúng lúc rê chuột vào.

   BỐN chỗ dùng chung công thức này, sửa một là soi cả bốn: .a-gallery (đây),
   .p-gallery__nav (project-page.css), .m-project (home.css §5) và .job-card
   (common.css §15.6). Hai chỗ sau mới nhập vào từ phản hồi MONA R1 tr.9. */
.a-gallery .nav-btn {
  background: transparent; border-color: rgba(0, 0, 0, .45); color: var(--c-ink);
}
.a-gallery .nav-btn:hover {
  background: var(--c-primary); border-color: var(--c-primary); color: #fff;
}

/* ===== 8 · RESPONSIVE (1024 / 720 / 640) ===== */
@media (max-width: 1024px) {
  .n-feature__media { aspect-ratio: 16 / 8; }
}

@media (max-width: 720px) {
  .a-body { grid-template-columns: 1fr; }
  .a-body__media { order: -1; }
}

@media (max-width: 640px) {
  .n-feature__media { aspect-ratio: 4 / 3; }
  /* `padding-right: 0` thu lại khoảng chừa cho cặp nút tròn ở rule gốc (108px).
     KHÔNG đổi nó thành `padding-bottom: 58px` như bản trước: từ 720px trở xuống
     common.css §16 đã `display: none` CẢ .nav-group, mà 640 < 720 nên ở đây cặp
     nút chắc chắn không còn tồn tại — 58px ấy chỉ là một khoảng trắng rỗng nằm
     giữa ngày đăng và dãy chấm trang, đo được 72px từ chữ tới chấm (phản hồi
     30/07/2026 "giảm khoảng cách giữa card và dot"). Khe 10px của .swiper-dots
     là đủ. Vì cùng lý do, .n-feature__nav không cần dời xuống góc dưới nữa. */
  .n-feature__body { padding-right: 0; }
  /* 3px là số của thời .pill-group còn là MỘT khung xám bọc — khe hẹp lúc đó
     đúng, vì bốn viên thuốc nằm chung một nền nên khe chỉ là đường phân cách.
     Từ phản hồi MONA R1 tr.10/tr.15, mỗi pill là một nút RỜI có nền riêng: khe
     3px làm bốn nút đọc ra như một khối bị nứt. 8px vừa tách bạch vừa còn đủ chỗ
     cho hai nút một dòng trên máy 320px. */
  .n-filter { --pill-gap: 8px; }
  .n-filter .pill { height: 36px; padding: 0 16px; font-size: var(--fs-xs); }
  .a-hero { aspect-ratio: 4 / 3; }
}