/* ============================================================
   Vinpack — project-single.css
   CSS RIÊNG CỦA trang chi tiết dự án (single-vp_project.php), Phase M
   Task 2. Chỉ nạp khi is_singular( 'vp_project' ).

   NẠP SAU global.css, layout.css, taxonomy-danhmuc.css VÀ page-duan.css —
   inc/enqueue.php khai cả bốn làm dependency của vinpack-project (style).
   `.art-wrap`/`.art-layout`/`.art-toc`/`.art-content`/`.art-author` ĐÃ CÓ SẴN
   trong taxonomy-danhmuc.css (Phase I/J Task 1, `.art-author` dời sang đó ở
   CHÍNH Task này). `.proj-grid`/`.proj-card` ĐÃ CÓ SẴN trong page-duan.css
   (Phase M Task 1). File này CHỈ chứa `.detail-*` THẬT SỰ MỚI của trang này
   (breadcrumb/tag/H1/byline/ảnh đại diện lớn, số liệu kết quả, khối "Xem
   thêm dự án") — không chép lại bất kỳ rule nào đã có. Xem docblock đầu
   single-vp_project.php để biết đầy đủ lý lẽ vì sao tên class nội bộ khác
   tên mockup ở những chỗ tái dùng được.

   BA LUẬT CỦA FILE NÀY — cùng ba luật product-single.css/page-duan.css:
   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
   `<div class="crumb">…</div>`, tên class cố định không đổi được. Mockup
   trang này dùng tên `.detail-breadcrumb` — single-vp_project.php bọc thêm
   một div `.detail-breadcrumb` quanh lời gọi hàm, và file này TỰ CHÉP một
   bản `.crumb` riêng scope trong `.detail-breadcrumb` (không có sẵn ở bất kỳ
   CSS nào đang nạp cùng trang), đúng cách product-single.css/page-vechungtoi.css
   đã tự chép thay vì ngầm phụ thuộc một stylesheet trang khác không được nạp
   ở đây.

   VỀ TRÍCH DẪN (`.art-content blockquote`): global.css mục 8 đã style trích
   dẫn gần như trùng khớp `.detail-quote` của mockup (cùng nền `--bg-alt`
   === mockup `--cobalt-light`, cùng font-size 16px/italic/color navy/
   line-height 1.7) — CHỈ THIẾU viền trái 4px cobalt. Rule `.art-content
   blockquote` bên dưới CHỈ thêm đúng viền đó (border-left + bo góc lại cho
   khớp), không viết lại toàn bộ khối — viết lại sẽ là một bản chép CSS
   không cần thiết của chính rule global.css đã có. Ảnh chèn giữa
   (`.art-content img`/`figure`) đã khớp mockup đủ tốt (border-radius 12px
   so với 14px của mockup, cùng token) — không thêm rule riêng.

   REDUCED-MOTION: global.css đã có khối universal `*, *::before, *::after`
   ép `transition-duration:.01ms !important` — mọi transition khai ở đây đã
   tự động bị khối đó vô hiệu hoá, không cần lặp lại một khối riêng.
   ============================================================ */

/*
 * ---------- Breadcrumb ----------
 * STT 34 (feedback đợt 2, trang Chi tiết dự án): khách khoanh đỏ "rút ngắn
 * khoảng cách từ ảnh bìa đến phần nội dung bài viết". ĐO TRƯỚC KHI SỬA: phần
 * tử này là `<section class="detail-header wrap">` — mang CẢ HAI class
 * "detail-header" VÀ "wrap". Trước Task này `.detail-header{padding:32px 0 0;}`
 * chỉ có 1 class (specificity (0,1,0)) nên THUA `section.wrap{padding:
 * var(--sp-8) var(--wrap-x);}` (global.css, specificity (0,1,1)) — giá trị
 * 32px/0 tác giả viết ra CHƯA BAO GIỜ thật sự áp dụng, section.wrap âm thầm
 * đè thành 96px trên VÀ 96px dưới. Vì `.detail-featured-img` (ảnh bìa) nằm
 * NGAY TRONG section này, padding-bottom 96px bị đè đó cộng thêm margin-bottom
 * riêng của chính ảnh (96px, --sp-8) rồi cộng thêm padding-top của section
 * `.art-wrap` theo sau (96px, section.wrap sitewide) = 288px giữa ảnh bìa và
 * nội dung bài viết — đúng khoảng khách khoanh đỏ.
 *
 * SỬA: bump specificity bằng selector 2-class `.detail-header.wrap`
 * ((0,2,0), thắng section.wrap (0,1,1) ở bậc "số lớp" — THẮNG CHẮC CHẮN,
 * không nhờ thứ tự nạp file) để giá trị 32px/0 tác giả ĐÃ VIẾT thật sự áp
 * dụng — không đoán số mới, chỉ PHỤC HỒI đúng ý định gốc. Kết quả: 96+96
 * (bug) -> 32+0 (đúng ý gốc) ở chính section này; tổng khoảng ảnh bìa->nội
 * dung: 96(ảnh margin-bottom, không đổi)+0(detail-header padding-bottom, đã
 * sửa)+96(section.wrap của .art-wrap theo sau, KHÔNG đụng — rule dùng chung
 * toàn theme) = 192px, giảm 96px (-33%) so với 288px cũ, và giờ khớp đúng
 * mức "một khoảng cách giữa hai khối nội dung" tiêu chuẩn mà các trang khác
 * của theme đang dùng (không phải một khoảng riêng bị nhân đôi do bug).
 */
.detail-header.wrap{ padding:32px 0 0; }
/*
 * SỬA LẦN 2 — khách (21/08/2026, ảnh khoanh đỏ khoảng trắng giữa ảnh bìa và
 * "NỘI DUNG BÀI VIẾT"): "giảm spacing lại nhóm dự án chi tiết".
 *
 * LẦN 1 (STT 34, ghi ngay trên) chỉ vá được MỘT nửa bug: section.wrap
 * (global.css, dùng chung toàn theme) áp padding-bottom 96px/64px THỪA lên
 * `.detail-header`, cộng dồn với margin-bottom riêng của chính ảnh bìa
 * (`.detail-featured-img`, cũng --sp-8) — vá bằng cách bump specificity cho
 * NỬA DƯỚI (`.detail-header.wrap{padding-bottom:0}`), chỉ còn ảnh bìa quyết
 * định khoảng cách phía DƯỚI nó.
 *
 * NỬA TRÊN của section KẾ TIẾP (`<section class="wrap">` bọc `.art-wrap`)
 * mắc ĐÚNG lỗi giống hệt, chưa được vá: section.wrap áp padding-top
 * 96px/64px THỪA lên section đó — cộng dồn TIẾP với margin-bottom vừa giữ
 * lại của ảnh bìa, ra tổng 192px (desktop)/128px (mobile) giữa ảnh và nội
 * dung — đúng khoảng khách khoanh đỏ lần này. Cùng bug, cùng nguyên nhân,
 * chỉ khác nằm ở cạnh trên thay vì cạnh dưới.
 *
 * SỬA: bump specificity CHO CẠNH CÒN LẠI — `.detail-header.wrap + section.wrap`
 * (bộ nối anh em kề `+`, (0,3,1)) thắng `section.wrap` gốc ((0,1,1)) bằng
 * ĐỘ ƯU TIÊN. Kết quả: ảnh bìa (margin-bottom, KHÔNG đụng — vẫn đúng nguồn
 * duy nhất của khoảng cách, đúng ý LẦN 1) → section kế tiếp padding-top 0 →
 * tổng khoảng cách CÒN LẠI chỉ = margin-bottom của ảnh bìa: 96px (desktop)/
 * 64px (mobile), giảm đúng 50% so với 192/128px cũ — không phải số áng
 * chừng, mà là bỏ đúng phần cộng dồn thừa thứ hai.
 */
.detail-header.wrap + section.wrap{ padding-top:0; }

/*
 * SỬA 07/09/2026 (khách khoanh đỏ trang dự án chi tiết): "content width nhóm
 * dự án cho tràn ra bằng với mép ảnh trên desktop, mobi có padding right left
 * nhẹ".
 *
 * ĐO TRƯỚC KHI SỬA (viewport 1280): breadcrumb, tiêu đề, ảnh bìa và khối
 * "Khám phá thêm" đều ở 43/1180 — mép `.detail-header.wrap`, padding-inline 0
 * theo docblock ngay trên — nhưng nội dung bài `.art-wrap` chỉ 93/1080, hụt
 * vào ĐÚNG 50px MỖI BÊN. Hai nguồn cộng lại: `section.wrap` bọc ngoài giữ
 * padding-inline 32px (--wrap-x) và `.art-wrap` tự khoá max-width:1080px
 * (taxonomy-danhmuc.css — rule DÙNG CHUNG sáu template).
 *
 * SỬA: gỡ CẢ HAI nguồn, nhưng chỉ trong đúng cặp
 * `.detail-header.wrap + section.wrap` — tức chỉ section nội dung đứng ngay
 * sau header dự án/tuyển dụng (hai template dùng chung file này). KHÔNG đụng
 * `.art-wrap` của tin tức, sản phẩm, dịch vụ, chính sách: đo cùng đợt cho
 * thấy ảnh và nội dung ở các trang đó đã cùng 1080, kéo rộng ra sẽ làm hỏng
 * đúng thứ vừa căn xong hôm qua.
 *
 * DƯỚI 1180px: trả padding-inline var(--wrap-x) cho CẢ hai khối. Không có
 * nhánh này thì `.wrap` chiếm trọn bề ngang và chữ chạm sát mép màn hình.
 * Phải đệm cả `.detail-header.wrap` chứ không riêng phần chữ: nó đang
 * padding-inline 0 nên ảnh bìa chạm mép ở tablet (đo tại 900px: ảnh 0/885,
 * nội dung 24/837) — đệm một bên thì hai khối lại lệch nhau, đúng lỗi đang
 * sửa. Mốc ≤600px KHÔNG đổi: `.detail-header.wrap{padding:32px 10px 0}` là
 * rule khách tự gửi 03/09/2026 (media query cuối file, shorthand nên vẫn
 * thắng), nội dung ở đó giữ --wrap-x 24px — cả hai đều là padding nhẹ, đúng
 * yêu cầu "mobi có padding right left nhẹ".
 */
.detail-header.wrap + section.wrap{ padding-inline:0; }
.detail-header.wrap + section.wrap > .art-wrap{ max-width:var(--wrap-max); }

@media (max-width:1179px){
	.detail-header.wrap,
	.detail-header.wrap + section.wrap{ padding-inline:var(--wrap-x); }
}
/* text-align:left thêm (SỬA 28/08/2026, khách yêu cầu "đồng bộ lại tất cả cùng 1 style" cho breadcrumb) — khớp đúng bản chuẩn .cat-hero-info .crumb, container không tự canh giữa nên không đổi gì về vị trí NHÌN THẤY. */
.detail-breadcrumb .crumb{ font-size:13px; color:var(--text-muted); margin-bottom:var(--sp-4); text-align:left; }
.detail-breadcrumb .crumb a{ color:var(--text-muted); }
.detail-breadcrumb .crumb a:hover{ color:var(--navy); }

/* ---------- Tag danh mục ---------- */
.detail-tag{
	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);
}

/* ---------- Tiêu đề ---------- */
.detail-title{ font-size:34px; color:var(--navy); line-height:1.25; max-width:100%; margin-bottom:var(--sp-5); }

/* ---------- Byline ---------- */
.detail-byline{ display:flex; align-items:center; gap:14px; margin-bottom:var(--sp-7); }
.detail-byline-avatar{
	width:40px;
	height:40px;
	border-radius:var(--r-full);
	flex-shrink:0;
	background:linear-gradient(140deg, var(--navy), var(--cobalt));
	color:var(--white);
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:700;
	font-family:var(--font-head);
	font-size:13px;
}
.detail-byline-meta{ font-size:13px; color:var(--text-muted); }
.detail-byline-meta strong{ color:var(--text); display:block; font-size:13.5px; margin-bottom:1px; }
/* Tên tác giả trong <strong> là LINK — cùng lý do và cùng cách xử như `.nd-meta a`
   bên single-tintuc.css: thừa màu chữ, chỉ lộ khi rê chuột. */
.detail-byline-meta a{ color:inherit; text-decoration:none; }
.detail-byline-meta a:hover,
.detail-byline-meta a:focus-visible{ color:var(--cobalt-ink); text-decoration:underline; }

/* ---------- Ảnh đại diện lớn ---------- */
.detail-featured-img{
	aspect-ratio:1000 / 460;
	border-radius:var(--r-lg);
	overflow:hidden;
	background:var(--img-bg);
	border:1px solid var(--border);
	margin-bottom:var(--sp-8);
	display:flex;
	align-items:center;
	justify-content:center;
}
.detail-featured-img img{ width:100%; height:100%; object-fit:cover; }
.detail-featured-img svg{ width:80px; height:80px; color:var(--icon-muted); }

/* ---------- Trích dẫn: chỉ thêm viền trái so với .art-content blockquote (global.css) ---------- */
.art-content blockquote{
	border-left:4px solid var(--cobalt);
	border-radius:0 var(--r-card) var(--r-card) 0;
}

/* ---------- Số liệu kết quả ---------- */
.detail-stats-row{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:var(--sp-4);
	margin:var(--sp-6) 0 var(--sp-7);
}
.detail-stat-box{
	background:var(--bg-alt);
	border-radius:var(--r-card);
	padding:var(--sp-5);
	text-align:center;
}
.detail-stat-box .num{ font-family:var(--font-head); font-weight:800; font-size:24px; color:var(--navy); }
.detail-stat-box .label{ font-size:12px; color:var(--text-muted); margin-top:4px; }

/*
 * ---------- "Xem thêm dự án" ----------
 * STT 35 (feedback đợt 2, trang Chi tiết dự án): bổ sung tiêu đề nhỏ
 * "Khám phá thêm" phía trên "Xem thêm dự án", đúng ~/vp-mockups/
 * duan-chitiet.html dòng ~1008 (`<span class="kicker">Khám phá thêm</span>`).
 * Theme đã có sẵn khuôn ".xxx .kicker" scope theo khối cha ở nhiều nơi
 * (page-dichvu.css .service-heading .kicker, page-lienhe.css .contact-heading
 * .kicker, page-vechungtoi.css .intro-copy .kicker) — style GIỐNG HỆT khuôn
 * đó (uppercase, letter-spacing, cỡ 12px, đậm, màu cobalt-ink), scope theo
 * `.detail-related .section-head` vì đây LÀ khối kicker+H2 duy nhất của
 * trang này, không tái dùng được rule đã scope theo khối cha khác.
 */
.detail-related{ background:var(--white); padding:64px 0 80px; border-top:1px solid var(--border); }
.detail-related .section-head .kicker{
	display:block;
	margin-bottom:10px;
	font-size:12px;
	font-weight:700;
	color:var(--cobalt-ink);
	letter-spacing:2px;
	text-transform:uppercase;
}

/* ===== Responsive ===== */
@media(max-width:600px){
	.detail-title{ font-size:26px; }
	.detail-stats-row{ grid-template-columns:1fr 1fr; }
	/*
	 * `.detail-header.wrap{padding:32px 0 0;}` (bump specificity, xem docblock
	 * ngay phía trên) zero luôn cạnh trái/phải để thắng `section.wrap{padding:
	 * var(--sp-8) var(--wrap-x);}` — đúng ý gốc cho khoảng cách DỌC, nhưng kéo
	 * theo hệ quả KHÔNG chủ ý cho khoảng NGANG: `.wrap` tạo lề hai bên trên
	 * desktop CHỈ nhờ `max-width:1180px` + `margin:auto` (viewport > 1180px);
	 * ở mobi viewport luôn hẹp hơn 1180px nên centering không làm gì, mà
	 * padding ngang thì đã bị zero — breadcrumb/H1/tag rơi thẳng ra sát mép
	 * màn hình, đo thật getBoundingClientRect() ở 375px: left:0, right:375
	 * (khách 03/09/2026, gửi rule mong muốn `padding:32px 10px 0`).
	 *
	 * Thêm lại 10px hai bên CHỈ ở mobi — không đụng khoảng dọc (32px/0 đầu/
	 * cuối giữ nguyên, đúng ý hai lần SỬA đã ghi phía trên). Áp dụng CHUNG
	 * cho cả single-vp_project.php lẫn single-vp_job.php — page-tuyendung.css
	 * xác nhận vp_job TÁI DÙNG NGUYÊN .detail-header.wrap của file này, không
	 * định nghĩa riêng.
	 */
	.detail-header.wrap{ padding:32px 10px 0; }
}