/*
 * Vinpack — CSS CHỈ CỦA trang chi tiết dịch vụ con
 * (page-templates/dich-vu-chi-tiet.php, dùng chung cho Page 3833 "Dịch vụ in
 * bao bì theo yêu cầu" và Page 3834 "Dịch vụ in tem nhãn").
 *
 * ---------------------------------------------------------------------------
 * CHỈ CHỨA PHẦN THẬT SỰ MỚI — `.service-banner`/`.crumb` (page-dichvu.css) và
 * `.art-*`/`.pd-author-*` (taxonomy-danhmuc.css) đã TÁI DÙNG NGUYÊN qua mở
 * rộng điều kiện enqueue (inc/enqueue.php) — file này KHÔNG chép lại các rule
 * đó, cùng nguyên tắc project-single.css/product-single.css đã áp dụng.
 *
 * Khối MỚI duy nhất: `.dv-detail-hero`/`.dv-detail-hero-img` (ảnh đại diện
 * lớn giữa banner và nội dung) — copy khuôn `.nd-hero`/`.nd-hero-img`
 * (single-tintuc.css) vì cùng mục đích (ảnh lớn, tỷ lệ cố định, bo góc) chứ
 * KHÔNG import file đó (single-tintuc.css chỉ nạp trên is_home()/is_category()/
 * is_singular('post'), không bao giờ true cùng lúc với is_page_template() của
 * trang này — nạp chéo là một dependency không cần thiết, đúng bẫy Phase A
 * Task 6 đã ghi nhiều nơi khác trong theme).
 *
 * DEPENDENCY: 'vinpack-global' + 'vinpack-layout' (token global.css) +
 * 'vinpack-dichvu' (banner canh theo `.service-banner` của page-dichvu.css,
 * nạp SAU để không phụ thuộc may mắn thứ tự hàng đợi) — xem inc/enqueue.php.
 */

/*
 * STT 33 (feedback đợt 2, trang Dịch vụ): khách khoanh đỏ khoảng
 * "banner->nội dung bài viết" quá dài. ĐO TRƯỚC KHI SỬA: phần tử này là
 * `<section class="wrap dv-detail-hero">` — mang CẢ HAI class "wrap" VÀ
 * "dv-detail-hero" trên cùng một thẻ <section>, nên NGOÀI margin riêng của
 * .dv-detail-hero (36px auto 0, chỉ set top+ngang) nó còn ăn trọn
 * `section.wrap{padding:var(--sp-8) var(--wrap-x);}` (global.css, specificity
 * (0,1,1) — thắng vì trước Task này .dv-detail-hero{} chỉ có 1 class, không
 * đụng vào thuộc tính padding nên không có gì để so). Đo được: --sp-8=96px
 * ở desktop. Cộng dồn: banner (padding-bottom 56px, đã giảm ở page-dichvu.css)
 * + section.wrap padding-top (96px) + margin-top riêng (36px) = 188px giữa
 * banner và ảnh; rồi ảnh -> nội dung lại cộng thêm section.wrap padding-bottom
 * (96px) + section.wrap padding-top của khối .art-wrap theo sau (96px) = 192px.
 *
 * SỬA: ghi đè padding của CHÍNH section.wrap bằng một selector 2-class
 * (`.wrap.dv-detail-hero`, specificity (0,2,0) — thắng section.wrap (0,1,1)
 * ở bậc "số lớp", THẮNG CHẮC CHẮN bất kể thứ tự nạp file, không nhờ may mắn
 * hàng đợi — cùng nguyên tắc mọi rule 2-class khác trong theme), hạ xuống
 * --sp-6 (32px) hai phía trên/dưới — vẫn dùng token có sẵn, không bịa số.
 * Bỏ luôn margin-top riêng (36px) vì đã trùng vai trò với padding-top mới,
 * cộng thêm là thừa. Kết quả: banner->ảnh = 32(banner pb, đã giảm)+32(ảnh
 * pt)=64px (từ 188px); ảnh->nội dung = 32(ảnh pb)+96(section.wrap pt của khối
 * .art-wrap theo sau — KHÔNG đụng, đây là rule DÙNG CHUNG toàn theme, ngoài
 * phạm vi trang Dịch vụ) = 128px (từ 192px).
 */
/* 1080 + padding-inline 32px x2 = 1144 -> khung ảnh THẬT rộng 1080, khớp `.art-wrap` bên dưới (khách 05/09/2026). */
.dv-detail-hero { max-width: 1144px; margin: 0 auto; }
.wrap.dv-detail-hero { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.dv-detail-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;
}
.dv-detail-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.dv-detail-hero-img svg { width: 80px; height: 80px; color: var( --icon-muted ); }

@media ( max-width: 640px ) {
	.dv-detail-hero-img { aspect-ratio: 16 / 10; }
}