/* ══════════════════════════════════════════════════════════════════════════
   _page-news-detail.css — FILE TẠM, gộp vào _screens.css sau
   (19/09/2026: _screens.css đang có phiên khác sửa, nên màn Chi tiết tin tức đặt
   CSS riêng ở đây; nạp SAU _screens.css. Gộp thì chép nguyên khối này xuống cuối
   _screens.css dưới tiêu đề "CHI TIẾT TIN TỨC — tct-", rồi bỏ thẻ <link>.)

   Màn: news-detail.html · mọi lớp mang tiền tố `tct-`.
   Chỉ dùng token của _common.css — không đặt mã màu mới (CLAUDE.md §3).

   BỐ CỤC — vì sao như vậy
   · Hai cột ở ≥ 1024: trái để ĐỌC (người đăng · ảnh bìa · bài), phải là
     NGƯỜI ĐĂNG + TIN CÙNG LOẠI, dính theo người đọc. Cùng khuôn "trái đọc,
     phải làm" của Sự kiện chi tiết và Giải pháp chi tiết — người dùng học
     một lần.
   · Bài đọc cần dòng chữ HẸP (≤ ~80 ký tự), mà cột trái ở khổ 1880 rộng gần
     1200px → chữ bó hẹp sẽ để lại mảng trắng lớn giữa hàng — đúng lỗi KH bắt
     16/09 (CLAUDE.md §4). Nên từ app ≥ 1360 bài có thêm CỘT LỀ bên trái
     (chia sẻ + thẻ bài, dính) ăn phần bề ngang dư; ảnh bìa vẫn trải hết cột.
     Dưới 1360 cột lề rơi xuống cuối bài thành một hàng ngang.
   · "Tin mới nhất" là một khối RIÊNG, trải ngang dưới bài, dùng lại đúng
     thẻ `.st-card` của màn Tin tức — không nhét vào cột phải: cột phải dài ra
     mà bài thì dài hơn nhiều, nửa dưới trang lại trống một bên (bài học
     "cột phải cao 600, cột trái 2000" của Sự kiện chi tiết).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Đầu màn: đường dẫn (Breadcrumb) ────────────────────────────────────
   20/09: đã GỘP vào `.breadcrumb` ở cuối _common.css — màn này chỉ còn khai
   thêm lớp `breadcrumb` trên thẻ <nav>. Giữ lại đúng một luật riêng dưới
   đây vì ngưỡng khác: tên BÀI dài hơn tên một văn bản pháp lý nhiều, nên
   mục cuối phải ẩn sớm hơn (639px thay vì 559px của luật chung). */

/* ── Thân ─────────────────────────────────────────────────────────────── */
.newsd-block{padding-block:clamp(28px,3vw,44px) clamp(48px,5vw,80px)}
.newsd{display:grid;grid-template-columns:minmax(0,1fr) clamp(21rem,24vw,28rem);
  gap:clamp(28px,3vw,56px);align-items:stretch}
.newsd>*{min-width:0}

/* Dòng người đăng — CÁ NHÂN trước, doanh nghiệp là phụ (biên bản 18/09). */
.newsd-dur{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding-bottom:22px;
  border-bottom:1px solid var(--border)}
.newsd-dur-img{width:52px;height:52px;flex:0 0 52px;border-radius:50%;object-fit:cover;background:var(--white);
  box-shadow:0 0 0 3px var(--white),0 0 0 5px var(--green-pale)}
.newsd-dur-text{flex:1 1 15rem;min-width:0}
.newsd-dur-name{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:16.5px;line-height:1.4;
  font-weight:700;color:var(--ink)}
.newsd-dur-name a{color:inherit;text-decoration:none}
.newsd-dur-name a:hover{color:var(--green);text-decoration:underline}
.newsd-dur-role{padding:2px 10px;border-radius:999px;background:var(--green-pale);color:var(--green);
  font-size:12.5px;font-weight:600;line-height:1.6}
.newsd-dur-sub{margin-top:2px;font-size:14.5px;line-height:1.45;color:var(--gray)}
.newsd-dur-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14.5px;color:var(--gray)}
.newsd-dur-meta span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-variant-numeric:tabular-nums}
.newsd-dur-meta .ic{width:17px;height:17px;flex:0 0 17px;margin:0;color:var(--green)}

/* Ảnh bìa — 19/09 khuya: ĐỒNG NHẤT với ảnh đầu bài của Sự kiện chi tiết
   (.det-img trong _screens.css): dải cao clamp(200px,22vw,320px), bo --r-card.
   Bản trước 16:9 trần 36rem — ở khổ 1440 cao ~370px, 1880 chạm 576px, một
   mình chiếm gần trọn màn; người dùng: "ảnh bìa quá to, mất cân đối". Dùng
   chung ở tin-tuc-chi-tiet và dich-vu-chi-tiet.
   `width:100%` BẮT BUỘC (không thì khối co theo nội dung, hụt mép phải). */
.newsd-cover{position:relative;margin:26px 0 0;width:100%;height:clamp(200px,22vw,320px);border-radius:var(--r-card);overflow:hidden;
  background:var(--green-pale)}
.newsd-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Thân bài + cột lề. Điện thoại/khổ vừa: bài trước, chia sẻ + thẻ xuống cuối. */
.newsd-body{margin-top:clamp(28px,3vw,44px);display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"place" "edge";gap:32px}
.newsd-place{grid-area:place;max-width:48rem;font-family:var(--font-article);font-size:17.5px;line-height:1.85;color:var(--ink)}
.newsd-edge{grid-area:edge}

/* Đoạn dẫn (sapo) — đúng câu tóm tắt đang hiện trên trang chủ và màn Tin tức. */
.newsd-sapo{font-family:var(--font-ui);font-size:clamp(18.5px,1.4vw,20.5px);line-height:1.65;font-weight:500;
  color:var(--ink);text-wrap:pretty}
.newsd-place>p{margin-top:16px}
.newsd-place .newsd-sapo{margin-top:0}
.newsd-place h2{margin-top:40px;font-family:var(--font-ui);font-size:clamp(21px,1.6vw,24px);line-height:1.3;
  font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.newsd-place a:not(.btn){color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.newsd-place a:not(.btn):hover{text-decoration-thickness:2px}
.newsd-place ul:not([class]){margin-top:14px;padding-left:22px}
.newsd-place ul:not([class]) li+li{margin-top:8px}
.newsd-place ul:not([class]) li::marker{color:var(--green)}

/* Danh sách số (ô soạn: "danh sách số"): số bằng counter, vòng số nền --green chữ trắng (7.17). */
.newsd-step{list-style:none;margin:18px 0 0;padding:0;counter-reset:newsd-step;display:flex;flex-direction:column;gap:14px}
.newsd-step li{counter-increment:newsd-step;position:relative;padding-left:46px}
.newsd-step li::before{content:counter(newsd-step);position:absolute;left:0;top:.15em;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:var(--green);color:var(--white);
  font-family:var(--font-ui);font-size:14px;font-weight:700;line-height:1}

/* Cột lề: chia sẻ + thẻ bài. */
.newsd-edge{display:flex;flex-wrap:wrap;gap:22px 44px;padding-top:24px;border-top:1px solid var(--border);font-family:var(--font-ui)}
.newsd-edge-label{margin-bottom:10px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gray)}
.newsd-split-list{display:flex;flex-wrap:wrap;gap:8px}
.newsd-split-btn{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 15px;border:1px solid var(--border);
  border-radius:12px;background:var(--white);font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);
  text-decoration:none;transition:border-color var(--dur-btn) var(--ease-btn),color var(--dur-btn) var(--ease-btn)}
.newsd-split-btn:hover{border-color:var(--green);color:var(--green)}
.newsd-split-btn .ic{width:18px;height:18px;flex:0 0 18px;margin:0;color:var(--green)}
.newsd-split-logo{width:20px;height:20px;flex:0 0 20px;border-radius:5px}
.newsd-card-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
/* Thẻ bài là LIÊN KẾT (→ Tin tức lọc sẵn theo thẻ): viên cao 36px cho dễ
   bấm trên điện thoại, rê chuột thì đậm lên — không chỉ đổi con trỏ (§6B). */
.newsd-card-list a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;
  background:var(--green-pale);color:var(--green);font-size:13.5px;font-weight:600;line-height:1.3;text-decoration:none;
  transition:background var(--dur-btn) var(--ease-btn),color var(--dur-btn) var(--ease-btn)}
.newsd-card-list a:hover{background:var(--green);color:var(--white)}

/* ── Cột phải ─────────────────────────────────────────────────────────── */
/* Cột phải kéo dài bằng bài (align-items:stretch), phần bên trong dính.
   19/09 tối: bỏ thẻ "Về người đăng" (lặp dòng người đăng) — cột chỉ còn
   Tin cùng loại; rỗng thì bỏ cả cột (.newsd--one-col). */
.newsd-side-stick{position:sticky;top:96px;display:flex;flex-direction:column;gap:22px}
.newsd-arc{padding:20px 22px 10px;background:var(--white);border:1px solid var(--border);border-radius:22px}
.newsd-arc-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.newsd-arc-head h2{font-size:17px;line-height:1.3;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.newsd-arc-head a{font-size:14px;font-weight:600;color:var(--green);text-decoration:none;white-space:nowrap}
.newsd-arc-head a:hover{text-decoration:underline}
.newsd-arc-list{list-style:none;margin:10px 0 0;padding:0}
.newsd-arc-list li+li{border-top:1px solid var(--border)}
.newsd-arc-item{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:14px;align-items:center;padding:12px 0;
  text-decoration:none;color:inherit}
.newsd-arc-item img{width:100%;aspect-ratio:16/10;border-radius:10px;object-fit:cover;background:var(--green-pale)}
.newsd-arc-item b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:15px;line-height:1.4;font-weight:600;color:var(--ink);transition:color var(--dur-btn) var(--ease-btn)}
.newsd-arc-item:hover b{color:var(--green)}
.newsd-arc-item small{display:block;margin-top:3px;font-size:13px;color:var(--gray);font-variant-numeric:tabular-nums}

/* ── Tin mới nhất — khối riêng dưới bài ─────────────────────────────────── */
.newsd-new{padding-top:0;padding-bottom:clamp(56px,6vw,96px)}
.newsd-new-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;padding-top:32px;
  border-top:1px solid var(--border)}
.newsd-new-head h2{font-size:clamp(22px,2vw,28px);line-height:1.2;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.newsd-new .st-card .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.newsd-new-dd{width:32px;height:32px;flex:0 0 32px;border-radius:50%;object-fit:cover;background:var(--cream)}

/* ── Điểm ngắt — @container app (CLAUDE.md §4) ──────────────────────────── */
/* Cột lề chỉ mở khi cột trái đủ rộng cho lề 12rem + dòng chữ 48rem. */
@container app (min-width:1360px){
  .newsd-body{grid-template-columns:12rem minmax(0,48rem);grid-template-areas:"edge place";column-gap:clamp(36px,3.4vw,64px)}
  .newsd-place{font-size:18.5px}
  .newsd-edge{position:sticky;top:96px;align-self:start;flex-direction:column;flex-wrap:nowrap;gap:28px;
    padding-top:0;border-top:0}
  .newsd-split-list{flex-direction:column;align-items:stretch}
}
/* 4 thẻ trong lưới 3 cột là 3 + 1 lẻ loi → nhảy thẳng về 2 cột. */
@container app (max-width:1279px){
  .newsd-new .st-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container app (max-width:1023px){
  .newsd{grid-template-columns:minmax(0,1fr);gap:40px}
  .newsd-side-stick{position:static}
}
@container app (max-width:639px){
  /* Điện thoại: tên bài trong đường dẫn rơi xuống dòng riêng, mở đầu bằng
     dấu › trơ trọi — mà tiêu đề đầy đủ nằm ngay bên dưới. Bỏ mục cuối. */
  .breadcrumb li:last-child{display:none}
  .newsd-cover{margin-top:20px;height:clamp(180px,42vw,240px)}
  .newsd-place{font-size:17px}
  .newsd-new .st-list{grid-template-columns:minmax(0,1fr)}
}


/* ══════════════════════════════════════════════════════════════════════════
   19/09 (tối) — THAO TÁC + ĐỐI CHIẾU ĐĂNG BÀI
   File này nay nạp ở CẢ news.html (thẻ đổ từ _news.js, phân trang,
   hàng công cụ admin). Lớp của màn danh sách mang tiền tố `tt-`, của màn
   chi tiết `tct-`. Chỉ token — không mã màu mới.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Thẻ tin (dùng ở cả hai màn) ──────────────────────────────────────── */
/* Ô ảnh thẻ nay là <img> thật (ảnh đại diện của bài, rỗng → ảnh mặc định). */
.st-card .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-dd{width:32px;height:32px;flex:0 0 32px;border-radius:50%;object-fit:cover;background:var(--cream)}
/* Viên khoá "Dành cho thành viên" — chỉ khách / chờ duyệt thấy. Nền trắng
   chữ mực (16+) đặt trên ảnh; biểu tượng khoá để nhìn ảnh tĩnh cũng hiểu. */
.st-lock{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px 5px 9px;border-radius:999px;background:var(--white);color:var(--ink);
  font-size:12.5px;font-weight:600;line-height:1.3;box-shadow:var(--shadow-float)}
.st-lock .ic{width:14px;height:14px;flex:0 0 14px;margin:0;color:var(--green)}

/* ── Màn danh sách: hàng công cụ + phân trang ─────────────────────────── */
.st-tools{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px}
.st-tools .filter-count{margin-left:0}
.st-adm{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}
.st-adm[hidden]{display:none}
.st-adm .ic{width:16px;height:16px;flex:0 0 16px;margin:0;color:currentColor}
/* Phân trang dựng bằng <button> (đổi trang tại chỗ) — cùng dáng a/span của
   `.pagination` trong _common.css. */
.st-page[hidden]{display:none}
.st-page button{min-width:40px;height:40px;padding:0 12px;border:0;border-radius:var(--r-btn);background:none;
  display:grid;place-items:center;font:inherit;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.st-page button:hover{background:var(--white);box-shadow:inset 0 0 0 1px var(--border)}
.st-page button:focus-visible{outline:3px solid var(--green-light);outline-offset:2px}

/* ── Màn chi tiết: một cột khi không có tin cùng loại ──────────────────── */
.newsd--one-col{grid-template-columns:minmax(0,1fr)}
.newsd-side[hidden]{display:none}

/* ── Thanh quản trị (vai admin) ───────────────────────────────────────────
   Hộp trắng viền mảnh ở đầu thân bài — phân khối bằng kẻ chỉ, không bóng
   (CLAUDE.md §4). Trái: nhãn + trạng thái; phải: việc làm được. Bị gỡ thì
   viền đổi sang sắc cảnh báo để nhìn ảnh tĩnh cũng biết bài không còn hiện. */
.newsd-adm{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;
  margin-bottom:24px;padding:16px 18px;border:1px solid var(--border);border-radius:18px;background:var(--white);
  font-family:var(--font-ui)}
.newsd-adm[hidden]{display:none}
.newsd-adm--remove{border-color:var(--warn);background:var(--warn-bg)}
.newsd-adm-text{min-width:0;flex:1 1 20rem}
.newsd-adm-kicker{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gray)}
.newsd-adm-border{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px}
.newsd-adm-open{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.newsd-adm-btn{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.newsd-adm-btn .ic{width:16px;height:16px;flex:0 0 16px;margin:0;color:currentColor}
.newsd-adm-link{font-size:14px;font-weight:600;color:var(--green);text-decoration:none}
.newsd-adm-link:hover{text-decoration:underline}

/* ── Khối trong thân bài — đúng các khối ô soạn Đăng bài làm ra ────────── */
.newsd-place h2+*{margin-top:12px}
.newsd-place ol.newsd-step{margin-top:18px}
.newsd-quote{margin:22px 0 0;padding:4px 0 4px 20px;border-left:3px solid var(--green-light);color:var(--gray);font-style:italic}
.newsd-quote p{margin:0}
/* Ảnh: bốn cách xếp của Đăng bài (mot · hai · luoi · noi) — CÙNG lưới với
   `.post-mem` của _page-post-editor.css để Xem trước và trang thật trùng nhau. */
.newsd-mem,.newsd-vid{margin:28px 0 0}
.newsd-mem-grid{display:grid;gap:6px;border-radius:14px;overflow:hidden}
.newsd-mem-grid img{display:block;width:100%;height:100%;object-fit:cover;background:var(--green-pale)}
.newsd-mem[data-set="one"] .newsd-mem-grid{grid-template-columns:1fr}
.newsd-mem[data-set="one"] img{aspect-ratio:16/9}
.newsd-mem[data-set="two"] .newsd-mem-grid{grid-template-columns:repeat(2,1fr)}
.newsd-mem[data-set="two"] img{aspect-ratio:4/3}
.newsd-mem[data-set="grid"] .newsd-mem-grid{grid-template-columns:repeat(3,1fr)}
.newsd-mem[data-set="grid"] img{aspect-ratio:1}
.newsd-mem[data-set="place"] .newsd-mem-grid{grid-template-columns:2fr 1fr}
.newsd-mem[data-set="place"] img{aspect-ratio:4/3}
.newsd-mem[data-set="place"] img:first-child{grid-row:span 2;aspect-ratio:auto}
.newsd-place figcaption{margin-top:8px;font-family:var(--font-ui);font-size:14px;line-height:1.5;color:var(--gray);text-align:center}
/* Video: khung tối + nút phát (trắng 15.05 trên --v6-black); cả khung là liên kết. */
.newsd-place a.newsd-vid-frame{aspect-ratio:16/9;border-radius:14px;background:var(--v6-black);color:var(--white);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-ui);font-size:14.5px;font-weight:600;text-decoration:none}
.newsd-place a.newsd-vid-frame:hover{background:var(--green-deep)}
.newsd-vid-frame .ic{width:60px;height:60px;flex:0 0 60px;margin:0;color:currentColor}

/* Liên kết ngoài · Nguồn · Khảo sát — hàng nhãn : giá trị cuối bài. */
.newsd-add{margin:36px 0 0;padding-top:18px;border-top:1px solid var(--border);display:grid;gap:10px;font-family:var(--font-ui)}
.newsd-add>div{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:4px 16px;align-items:baseline}
.newsd-add dt{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gray)}
.newsd-add dd{margin:0;min-width:0;font-size:15.5px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.newsd-place .newsd-add a{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.newsd-place .newsd-add a:hover{text-decoration:underline}
.newsd-add .ic{width:15px;height:15px;flex:0 0 15px;margin:0;color:currentColor}

/* ── Cổng bài chỉ thành viên ──────────────────────────────────────────────
   Đoạn cuối được đọc mờ dần (mask — không đổi màu chữ), rồi hộp mời vào. */
.newsd-open-hint{-webkit-mask-image:linear-gradient(#000 20%,transparent);mask-image:linear-gradient(#000 20%,transparent)}
.newsd-of{margin-top:8px;padding:28px 26px;border:1px solid var(--border);border-radius:22px;background:var(--white);
  text-align:center;font-family:var(--font-ui)}
.newsd-of-ic{width:52px;height:52px;margin:0 auto;border-radius:50%;display:grid;place-items:center;background:var(--green-pale)}
.newsd-of-ic .ic{width:24px;height:24px;flex:0 0 24px;margin:0;color:var(--green)}
.newsd-of-ttl{margin-top:14px;font-size:19px;font-weight:700;line-height:1.35;color:var(--ink)}
.newsd-of-open{margin:8px auto 0;max-width:36rem;font-size:15.5px;line-height:1.6;color:var(--gray)}
.newsd-of-btn{margin-top:18px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

.newsd-empty{margin-block:8px}
.newsd-empty[hidden]{display:none}

@container app (max-width:639px){
  .newsd-adm{padding:14px}
  .newsd-adm-btn{width:100%}
  .newsd-add>div{grid-template-columns:minmax(0,1fr)}
  .newsd-of{padding:22px 16px}
}


/* ══════════════════════════════════════════════════════════════════════════
   19/09 khuya — ĐẦU MÀN + THÂN BÀI dựng lại (tin-tuc-chi-tiet + dich-vu-chi-tiet)
   Người đăng · ngày · phân loại lên hàng viên đầu màn (khuôn .border của Sự
   kiện chi tiết, _screens.css). Thân bài: ảnh bìa + bài, không còn cột lề.
   Bản cột lề hẹp bị chê "quá xấu" (tên công ty gãy dòng, năm thứ chồng lên
   nhau cạnh ảnh bìa). dich-vu-chi-tiet cùng khuôn (hàng viên: ngày · khu
   vực phục vụ; người đăng ở thẻ Người giới thiệu). .newsd-dur / .newsd-body /
   .newsd-edge / .tct-chia-* không còn màn nào dùng — dọn khi gộp vào _screens.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* Viên dạng <a> (người đăng, phân loại) — cùng dáng viên <span> của
   .head-sub .border; rê chuột sáng nền lên, không chỉ đổi con trỏ (§6B).
   Chữ trắng / --dark-text trên nền tối (4.58 ở chặng sáng nhất). */
.newsd-border{align-items:center}
.newsd-border>a{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:6px 16px;border-radius:12px;
  font-size:14.5px;font-weight:500;color:#fff;text-decoration:none;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background var(--dur-btn) var(--ease-btn),border-color var(--dur-btn) var(--ease-btn)}
.newsd-border>a:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
.newsd-border>a:focus-visible{outline:3px solid var(--green-light);outline-offset:2px}
.newsd-border .ic{margin:0}
/* Viên người đăng: ảnh · TÊN (đậm) · viên nhóm · chức danh + doanh nghiệp
   (nhạt hơn, cắt một dòng — tên đầy đủ công ty vẫn đọc được ở hồ sơ). */
.newsd-border-ng{padding-left:6px!important;max-width:100%}
.newsd-border-ng img{width:32px;height:32px;flex:0 0 32px;border-radius:50%;object-fit:cover;background:var(--white)}
.newsd-border-ng b{font-weight:700;white-space:nowrap}
.newsd-border-role{padding:1px 9px;border-radius:999px;background:rgba(255,255,255,.16);
  font-size:12px;font-style:normal;font-weight:600;white-space:nowrap}
.newsd-border-role[hidden]{display:none}
.newsd-border-ng small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:14px;color:var(--dark-text)}
.newsd-border-ng small::before{content:"·";margin-right:9px}
.newsd-border time{font-variant-numeric:tabular-nums}

/* Thân: ảnh bìa ngay đầu cột đọc, bài bên dưới. */
.newsd-vert-article{min-width:0}
.newsd-vert-article .newsd-cover{margin-top:0}
.newsd-adm+.newsd-vert .newsd-cover{margin-top:0}
.newsd-vert-article .newsd-place{margin-top:clamp(28px,2.8vw,40px)}

/* Bề rộng: ẢNH BÌA · THANH QUẢN TRỊ · CHỮ cùng một cột (bản trước ảnh
   1168px còn chữ 768px ở khổ 1880 → mảng trắng lớn bên phải chữ). Cột đọc
   50rem (56rem từ app 1600, chữ 19px — vẫn ≤ ~85 ký tự một dòng); bề ngang
   dư chia cho cột Tin cùng loại (nở tới 34rem) để khe giữa hai cột không
   thành một mảng trống (CLAUDE.md §4).
   Sau đó bỏ trần 50rem: cột đọc trải tới cột phải y như Sự kiện chi tiết
   (ảnh + chữ cùng bề rộng); chỉ khoá 60rem từ app 1600 để dòng chữ không
   quá dài. */
.newsd--vert{grid-template-columns:minmax(0,1fr) clamp(21rem,26vw,34rem)}
.newsd--vert .newsd-article{max-width:none}
.newsd--vert .newsd-place{max-width:none}
.newsd--vert.newsd--one-col{grid-template-columns:minmax(0,1fr)}
@container app (min-width:1600px){
  .newsd--vert .newsd-article{max-width:60rem}
  .newsd--vert .newsd-place{font-size:19px}
}
@container app (max-width:1023px){
  .newsd--vert{grid-template-columns:minmax(0,1fr)}
  .newsd--vert .newsd-article{max-width:none}
}

@container app (max-width:639px){
  /* Điện thoại: viên người đăng xuống hai dòng — chức danh dưới tên. */
  .newsd-border-ng{flex-wrap:wrap;row-gap:2px;padding-block:8px}
  .newsd-border-ng small{flex-basis:100%;padding-left:41px;white-space:normal}
  .newsd-border-ng small::before{content:none}
}