/* ============================================================
Vinpack — single-tintuc.css
CSS RIÊNG CỦA trang chi tiết bài "Tin tức & sự kiện" (single.php),
Phase N Task 2. Chỉ nạp khi is_singular( 'post' ).
NẠP SAU global.css, layout.css, taxonomy-danhmuc.css VÀ page-tintuc.css —
inc/enqueue.php khai cả bốn làm dependency của vinpack-tintuc-single
(style). `.art-wrap`/`.art-layout`/`.art-toc`/`.art-content`/`.art-author`
ĐÃ CÓ SẴN trong taxonomy-danhmuc.css (Phase I/J/M). `.news-grid`/`.news-card`/
`.news-sec-head` ĐÃ CÓ SẴN trong page-tintuc.css (Phase N Task 1, dùng lại
cho khối "Bài viết liên quan" qua vinpack_news_card()). File này CHỈ chứa
`.nd-*` THẬT SỰ MỚI (breadcrumb/category/H1/meta, ảnh đại diện lớn, nút
chia sẻ) — không chép lại bất kỳ rule nào đã có, đúng khuôn
project-single.css/product-single.css.
BA LUẬT CỦA FILE NÀY — cùng ba luật mọi CSS trang riêng khác:
1. KHÔNG khai custom property nào. Token thuộc về theme.json/global.css.
2. KHÔNG dùng !important.
3. KHÔNG khai `outline` ở bất kỳ đâu.
VỀ `.crumb`: vinpack_breadcrumb() (inc/template-tags.php) LUÔN in
`
…
`. single.php bọc thêm `.nd-crumb` quanh lời
gọi hàm (khớp tên mockup) — file này TỰ CHÉP một bản `.crumb` scope trong
`.nd-crumb`, đúng cách project-single.css/product-single.css đã tự chép.
VỀ TRÍCH DẪN (`.art-content blockquote`): global.css mục 8 đã style trích
dẫn gần khớp `~/vp-mockups/tintuc-chitiet.html` (nền --bg-alt, italic, màu
navy) — CHỈ THIẾU viền trái 4px cobalt mà mockup vẽ. Rule bên dưới CHỈ
thêm đúng viền đó, giống HỆT quyết định đã ghi trong project-single.css.
REDUCED-MOTION: global.css đã có khối universal ép transition-duration
.01ms !important — mọi transition khai ở đây tự động bị vô hiệu, không
cần lặp lại khối riêng.
============================================================ */
/* ---------- Header bài viết ---------- */
/*
* SỬA 07/09/2026 (khách chốt "thu breadcrumb về 1080" sau bảng đo mép):
* `.nd-head` để padding-inline 0 nên dòng breadcrumb chạm HẲN mép khung —
* đo tại 1280: crumb 43/1180 trong khi ảnh hero `.nd-hero` và nội dung bài
* `.art-wrap` đều 93/1080; tệ hơn ở điện thoại (375px): crumb 0/375, chữ
* dính sát mép màn hình còn ảnh và bài ở 24/327.
*
* SỬA hai dòng: `.nd-head` lấy lại padding-inline var(--wrap-x) (hết chạm
* mép ở mọi bề ngang), rồi `.nd-crumb` khoá max-width 1080px canh giữa để
* desktop nó rơi đúng 93/1080 — thẳng mép ảnh hero và nội dung bài. Dưới
* 1180px `.wrap` hẹp hơn 1080 nên max-width không còn tác dụng và crumb tự
* bám đúng padding chung, khớp hero/bài (đo 900px: cả ba 24/837; 375px: cả
* ba 24/327).
*
* `.nd-head-inner` (tiêu đề + meta, max-width 820 canh giữa) KHÔNG đụng —
* đó là khối hẹp có chủ ý của thiết kế bài viết, khách xác nhận giữ.
*/
.nd-head { padding: 32px var(--wrap-x) 0; }
.nd-head-inner { max-width: 820px; margin: 0 auto; text-align: center; }
/*
* SỬA (28/08/2026, khách yêu cầu "đồng bộ lại tất cả cùng 1 style" cho
* breadcrumb): margin-bottom dời từ `.nd-crumb` (20px literal, không khớp
* bậc --sp-* nào) sang chính `.crumb` (var(--sp-4) = 16px) + thêm text-
* align:left — khớp đúng bản chuẩn `.cat-hero-info .crumb` của taxonomy-
* danhmuc.css. `.nd-crumb` giữ lại font-size/color (dùng cho phần TRƯỚC
* lời gọi vinpack_breadcrumb(), nếu single.php có in gì khác ở đó), chỉ
* bỏ margin-bottom tránh cộng dồn với margin-bottom mới trên `.crumb`.
*/
.nd-crumb { font-size: 13px; color: var(--text-muted); max-width: 1080px; margin-inline: auto; }
.nd-crumb .crumb { font-size: 13px; color: var(--text-muted); margin-bottom: var(--sp-4); text-align: left; }
.nd-crumb .crumb a { color: var(--text-muted); }
.nd-crumb .crumb a:hover { color: var(--navy); }
.nd-cat {
display: inline-block;
background: var(--bg-alt);
color: var(--navy);
font-size: 12.5px;
font-weight: 700;
padding: 6px 14px;
border-radius: var(--r-pill);
margin-bottom: var(--sp-4);
}
.nd-title { font-size: 36px; color: var(--navy); line-height: 1.25; margin-bottom: 18px; }
.nd-meta {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
font-size: 14px;
color: var(--text-muted);
}
.nd-meta span { display: inline-flex; align-items: center; gap: 7px; }
.nd-meta svg { width: 16px; height: 16px; color: var(--cobalt); }
/*
* Tên tác giả là LINK (xem vinpack_tac_gia_byline() trong inc/template-tags.php)
* nhưng dòng meta này là chữ phụ xám đều nhau. Để màu link mặc định xen vào là vỡ
* nhịp dòng, nên thừa màu chữ xung quanh và chỉ lộ khi rê chuột / tiêu điểm bàn phím.
*/
.nd-meta a { color: inherit; text-decoration: none; }
.nd-meta a:hover,
.nd-meta a:focus-visible { color: var(--cobalt-ink); text-decoration: underline; }
/*
* ---------- Ảnh đại diện lớn ----------
* SỬA — khách (21/08/2026, ảnh khoanh đỏ mép dưới ảnh dính liền vào khối
* "NỘI DUNG BÀI VIẾT"/tiêu đề bên dưới): "spacing bị đính nhau quá".
*
* NGUYÊN NHÂN: `margin: 36px auto 0` là shorthand BA GIÁ TRỊ
* (top | left-right | bottom) — số "0" cuối là margin-BOTTOM, không phải
* "giữ nguyên"/"không set". Không có ghi chú nào giải thích số 0 đó là chủ
* ý, và phần tử theo sau (`
` —
, KHÔNG phải
* , nên KHÔNG ăn `section.wrap{padding}` sitewide; `.art-wrap`
* cũng chỉ `margin:0 auto`, không padding-top riêng) không hề bù khoảng
* cách nào — cộng lại đúng 0px giữa ảnh và nội dung, khớp ảnh khách chụp.
*
* SỬA: tách margin-bottom RIÊNG, khoá `var(--sp-8)` — cùng token và cùng
* vai trò "khoảng cách ảnh bìa → nội dung bài viết" mà `.detail-featured-img`
* (project-single.css, trang dự án chi tiết) đang dùng, cho hai khối tương
* tự trên site đồng nhất với nhau.
*/
.nd-hero { max-width: 1080px; margin-top: 36px; margin-inline: auto; margin-bottom: var(--sp-8); }
.nd-hero-img {
aspect-ratio: 16 / 8;
border-radius: var(--r-lg);
overflow: hidden;
background: var(--img-bg);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
}
.nd-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.nd-hero-img svg { width: 80px; height: 80px; color: var(--icon-muted); }
/*
* ---------- `.art-layout.no-toc` — bài không có H2/H3 nào ----------
* `.art-content` KHÔNG bị ẩn khi bài không có heading (khác single-vp_project.php
* — xem docblock single.php mục 3 lý do). Khi đó không có `