/**
 * Vinpack — CSS trang Tin tức (Phase N Task 1).
 *
 * Nạp qua is_home() || is_category() trong inc/enqueue.php — is_home() ở
 * site có static front page nghĩa là "đang xem TRANG BÀI VIẾT" (page_for_posts
 * = 2783), KHÔNG phải "đang xem trang chủ" (is_front_page() mới là câu hỏi
 * đó). Hai template dùng chung file này: home.php ("Tất cả") và category.php
 * (từng category riêng) — cùng bộ khối .news-*, .feat-*.
 *
 * Chép từ ~/vp-mockups/tintuc-index.html, khối "TRANG TIN TỨC" (cuối file
 * mockup) — mockup tự khai một khối `:root{ --navy; --cobalt; ... }` RIÊNG
 * của nó, KHÔNG dùng khối đó: mọi `var(--navy)`, `var(--cobalt)`,
 * `var(--border)`, `var(--text-muted)`, `var(--bg-alt)`, `var(--font-head)`
 * dưới đây trỏ vào custom property THẬT đã khai trong assets/css/global.css
 * (tên trùng ngẫu nhiên vì mockup dùng chung bảng màu thiết kế, không phải
 * cùng một khối `:root`). Màu/bán kính không khớp token nào có sẵn giữ
 * nguyên giá trị hex/số của mockup (không tự bịa token mới — đúng luật
 * "không custom property mới").
 *
 * KHÔNG !important, KHÔNG outline (global.css đã lo :focus-visible).
 *
 * @package Vinpack
 */

/* ---------- Banner ---------- */
.news-banner {
	background: linear-gradient( 160deg, var(--navy), var(--navy-dark) );
	padding: 56px 0 60px;
	color: #fff;
	position: relative;
	overflow: hidden;
}

.news-banner::after {
	content: "";
	position: absolute;
	right: -80px;
	top: -80px;
	width: 340px;
	height: 340px;
	background: radial-gradient( circle, rgba( 92, 144, 245, .25 ), transparent 70% );
	border-radius: 50%;
}

/*
 * SỬA (28/08/2026, khách yêu cầu "đồng bộ lại tất cả cùng 1 style" cho
 * breadcrumb): màu đổi từ rgba(255,255,255,.7)/#fff CHÉP TAY sang token
 * var(--on-navy-text)/var(--white) + thêm letter-spacing:.3px — khớp đúng
 * `.service-banner .crumb`/`.sp-banner .crumb` (hai banner nền navy còn
 * lại khác trên site, cùng đợt sửa). margin-bottom:16px GIỮ NGUYÊN giá
 * trị (đã khớp đúng var(--sp-4)=16px, xem global.css) nhưng đổi sang viết
 * bằng token thay vì literal. position:relative + z-index:1 GIỮ NGUYÊN —
 * bắt buộc để chữ nổi trên `.news-banner::after` (vòng tròn trang trí
 * absolute phía sau).
 */
.news-banner .crumb {
	font-size: 13px;
	color: var(--on-navy-text);
	margin-bottom: var(--sp-4);
	letter-spacing: .3px;
	position: relative;
	z-index: 1;
}

.news-banner .crumb a {
	color: var(--on-navy-text);
}

.news-banner .crumb a:hover {
	color: var(--white);
}

.news-banner h1 {
	color: #fff;
	font-size: 38px;
	margin-bottom: 12px;
	position: relative;
	z-index: 1;
}

.news-banner p {
	font-size: 16px;
	color: var(--on-navy-text);
	max-width: 560px;
	position: relative;
	z-index: 1;
}

/* ---------- Tab ngang lọc tin ---------- */
.news-tabs {
	display: flex;
	gap: 0;
	justify-content: flex-start;
	padding: 32px 0 8px;
	flex-wrap: nowrap;
	overflow-x: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
	border-bottom: 1px solid var(--border);
}
.news-tabs::-webkit-scrollbar { display: none; }

.news-tab:first-child {
	padding-left: 0;
}

.news-tab:first-child::after {
	left: 0;
}

.news-tab {
	padding: 14px 26px;
	cursor: pointer;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 15px;
	color: var(--text-muted);
	text-decoration: none;
	position: relative;
	transition: color .2s ease;
	white-space: nowrap;
	flex-shrink: 0;
}

.news-tab::after {
	content: "";
	position: absolute;
	left: 26px;
	right: 26px;
	bottom: -1px;
	height: 2.5px;
	background: var(--navy);
	transform: scaleX( 0 );
	transition: transform .25s ease;
	border-radius: 2px;
}

.news-tab:hover {
	color: var(--navy);
}

.news-tab.active {
	color: var(--navy);
}

.news-tab.active::after {
	transform: scaleX( 1 );
}

/* ---------- Section head chung ---------- */
.news-sec {
	padding-block: 56px;
}

.news-sec-head {
	margin-bottom: 36px;
}

.news-sec-head h2 {
	font-size: 28px;
	color: var(--navy);
	margin-bottom: 8px;
}

.news-sec-head p {
	color: var(--text-muted);
	font-size: 15px;
}

/* ---------- Tin nổi bật: 1 lớn trái + tối đa 2 nhỏ phải ---------- */
.feat-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 28px;
	align-items: stretch;
}

.feat-main {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 6px 22px rgba( 0, 27, 183, .06 );
	transition: transform .25s ease, box-shadow .25s ease;
	display: flex;
	flex-direction: column;
	text-decoration: none;
}

.feat-main:hover {
	transform: translateY( -4px );
	box-shadow: 0 18px 40px rgba( 0, 27, 183, .13 );
}

.feat-main .photo {
	flex: 1;
	min-height: 280px;
	background: #f4f6fa;
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
}

.feat-main .photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.feat-main .photo svg {
	width: 64px;
	height: 64px;
	color: #c2cad8;
}

.feat-main .body {
	padding: 24px 28px;
}

.feat-cat {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--cobalt);
	margin-bottom: 10px;
}

.feat-main h3 {
	font-size: 23px;
	color: var(--navy);
	line-height: 1.3;
	margin-bottom: 12px;
}

.feat-meta {
	font-size: 13px;
	color: var(--text-muted);
}

.feat-side {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
}

/*
 * SỬA 03/09/2026 (khách gửi ảnh chụp khối "Tin nổi bật", khoanh đỏ 3 thẻ
 * nhỏ): "bỏ border" + ảnh "hình dạng chữ nhật ngang" đang "bị cắt hình".
 *
 * BỎ VIỀN: `border: 1px solid var(--border)` xoá khỏi trạng thái nghỉ.
 * `:hover` trước đó đổi MÀU viền (`border-color`) làm phản hồi — không còn
 * viền thì đổi màu viền vô nghĩa, thay bằng box-shadow nhẹ để vẫn còn phản
 * hồi hover, giữ nguyên hiệu ứng trượt `translateX(3px)`.
 *
 * ẢNH KHÔNG BỊ CẮT: nguyên nhân đo được — khung `.photo` rộng CỐ ĐỊNH
 * 150px nhưng KHÔNG khai chiều cao riêng, nên trong lưới CSS Grid nó bị kéo
 * giãn (`align-self` mặc định `stretch`) cao bằng đúng hàng — tức cao bằng
 * `.body` bên cạnh (2-3 dòng chữ, ~110-140px), gần vuông. Ảnh đại diện bài
 * viết TOÀN SITE đồng nhất một tỷ lệ 1200×650 (đo qua wp_get_attachment_
 * metadata() trên 10 bài bất kỳ, cả 10 cùng kích thước) — tỷ lệ ~1.85:1,
 * rất ngang. Nhét ảnh ngang vào khung gần vuông rồi `object-fit:cover` thì
 * bắt buộc cắt bớt hai bên để lấp đầy chiều cao khung.
 *
 * SỬA: đặt `aspect-ratio` của khung ĐÚNG BẰNG tỷ lệ ảnh thật (1200/650,
 * không rút gọn ước lượng để khớp chính xác dữ liệu đã đo, không phải một
 * tỷ lệ chuẩn như 16:9 gần đúng), và `align-self:start` để khung tự co theo
 * aspect-ratio thay vì bị grid kéo giãn. Khung và ảnh CÙNG tỷ lệ thì
 * `object-fit:cover` không còn gì để cắt — cover và contain cho kết quả y
 * hệt nhau khi hai tỷ lệ khớp. Giữ `cover` (không đổi `contain`): đổi contain
 * sẽ đúng "không cắt" cho MỌI tỷ lệ ảnh tương lai nhưng để lộ nền `.photo`
 * xám hai bên nếu tỷ lệ lệch — cover + khung đúng tỷ lệ ảnh THẬT hiện có thì
 * không đánh đổi gì.
 */
/*
 * SỬA 05/09/2026 (khách khoanh đỏ khối 3 tin phụ, gửi nhathuoclongchau.com.vn
 * /bai-viet làm tham khảo). ĐO TRƯỚC KHI SỬA: thẻ 473x156, ảnh 150x81
 * (aspect-ratio 1200/650) neo trên bằng align-self:start -> thừa 75px trắng
 * dưới ảnh; ba thẻ nhìn rời rạc cạnh ảnh lớn bên trái.
 *
 * Đo ở trang tham khảo: ảnh bài viết luôn object-fit:cover, BO GÓC 8px và lấp
 * KÍN ô ảnh (không mảng trắng nào trong thẻ). Áp đúng ba điều đó nhưng GIỮ bố
 * cục thumb-trái — khối này là 3 tin phụ đứng cạnh tin chính, đổi sang ảnh-trên
 * như trang tham khảo sẽ phá lưới 2 cột của .feat-grid. Thẻ thêm padding 12px
 * để ảnh bo góc tách khỏi mép thẻ.
 */
.feat-mini {
	display: grid;
	/* 150 -> 180px (khách 05/09/2026): ảnh thumb to hơn, cân với ảnh lớn bên trái. */
	grid-template-columns: 180px 1fr;
	gap: 14px;
	padding: 12px;
	align-items: stretch;
	text-decoration: none;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	flex: 1;
	transition: box-shadow .2s ease, transform .2s ease;
}

.feat-mini:hover {
	box-shadow: 0 2px 10px rgba(0, 27, 183, .14);
	transform: translateX( 3px );
}

.feat-mini .photo {
	background: #f4f6fa;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	height: 100%;
	min-height: 92px;
	border-radius: 8px;
	overflow: hidden;
}

.feat-mini .photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.feat-mini .photo svg {
	width: 40px;
	height: 40px;
	color: #c2cad8;
}

.feat-mini .body {
	padding: 6px 6px 6px 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.feat-mini .mini-cat {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--cobalt);
	margin-bottom: 6px;
}

.feat-mini h4 {
	font-size: 16px;
	color: var(--navy);
	line-height: 1.35;
	margin-bottom: 8px;
}

/* .mini-excerpt: XOÁ (03/09/2026) — markup tương ứng đã bỏ ở
   inc/template-tags.php, xem docblock .feat-mini phía trên. */

.feat-mini .mini-meta {
	font-size: 12px;
	color: var(--text-muted);
}

/* ---------- Lưới tin mới nhất / lưới category ---------- */
.news-latest {
	background: var(--bg-alt);
}

.news-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 26px;
}

.news-card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba( 0, 27, 183, .05 );
	transition: transform .25s ease, box-shadow .25s ease;
	display: flex;
	flex-direction: column;
	text-decoration: none;
}

.news-card:hover {
	transform: translateY( -6px );
	box-shadow: 0 18px 40px rgba( 0, 27, 183, .13 );
}

.news-card .photo {
	aspect-ratio: 16 / 9;
	min-height: 0;
	background: #f4f6fa;
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
}

.news-card .photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-card .photo svg {
	width: 44px;
	height: 44px;
	color: #c2cad8;
}

.news-card .body {
	padding: 20px 22px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.news-card .n-cat {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--cobalt);
	margin-bottom: 9px;
}

.news-card h3 {
	font-size: 17px;
	color: var(--navy);
	line-height: 1.4;
	margin-bottom: 10px;
	flex: 1;
}

.news-card .n-meta {
	font-size: 12.5px;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: 8px;
}

/*
 * ---------- Phân trang ----------
 * paginate_links() (đúng khuôn taxonomy-danhmuc.css/page-duan.css) sinh
 * mỗi mục với class `page-numbers` GỐC của WordPress, cộng `.current`/
 * `.prev`/`.next` khi khớp — KHÔNG phải `.cur`/`.nav` mà mockup tự đặt tên
 * (mockup không dùng paginate_links() thật, chỉ vẽ tay). Chọn theo
 * `.page-numbers`, không theo thẻ `a`/`span` trần, để không vô tình bắt
 * phải phần tử khác lọt vào `.news-pager-inner`.
 */
.news-pager {
	text-align: center;
	margin-top: 44px;
}

.news-pager-inner {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.news-pager-inner .page-numbers {
	min-width: 40px;
	height: 40px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: var(--text);
	background: #fff;
	border: 1px solid var(--border);
	transition: all .2s ease;
	padding: 0 8px;
}

.news-pager-inner a.page-numbers:hover {
	border-color: var(--cobalt);
	color: var(--cobalt);
}

.news-pager-inner .page-numbers.current {
	background: var(--navy);
	color: #fff;
	border-color: var(--navy);
}

.news-pager-inner .page-numbers.prev,
.news-pager-inner .page-numbers.next {
	padding: 0 16px;
	gap: 6px;
	margin-left: 8px;
}

/* ---------- CTA liên hệ ---------- */
.news-cta {
	padding: 0 0 72px;
}

.news-cta-box {
	background: linear-gradient( 135deg, var(--navy), var(--navy-dark) );
	border-radius: var(--r-xl);
	padding: var(--sp-7);
	text-align: center;
	color: #fff;
	position: relative;
	overflow: hidden;
}

.news-cta-box::after {
	content: "";
	position: absolute;
	left: -60px;
	bottom: -60px;
	width: 260px;
	height: 260px;
	background: radial-gradient( circle, rgba( 92, 144, 245, .25 ), transparent 70% );
	border-radius: 50%;
}

/*
 * BỎ font-size GHI CỨNG (07/09/2026, đợt đồng bộ CTA — lượt kiểm điện thoại).
 * Đo tại 375px: tiêu đề khối này 32px trong khi `.cta-box` của trang chủ/dịch
 * vụ/dự án/tuyển dụng chỉ 25px, vì `.cta-box h2` KHÔNG khai cỡ chữ nên co theo
 * `h2{font-size:25px}` của global.css ở mốc ≤900px, còn khối này khai đè nên
 * đứng nguyên 32px trên hộp chỉ rộng 279px. Bỏ khai đi thì cả sáu khối cùng
 * một cỡ ở cả hai đầu: 32px desktop, 25px điện thoại.
 */
.news-cta-box h2 {
	color: #fff;
	margin-bottom: 16px;
	text-wrap: balance;
	position: relative;
	z-index: 1;
}

.news-cta-box p {
	color: var(--on-navy-text);
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 32px;
	position: relative;
	z-index: 1;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/*
 * SỬA (27/08/2026, khách yêu cầu "đồng bộ lại các trang với nhau về style
 * nút") — bỏ `.news-cta-btn` riêng, đổi markup (home.php + category.php)
 * sang `.btn.btn-primary` chung — ĐÚNG kiểu nút đã dùng ở trang chủ/dịch
 * vụ/dự án (chọn làm chuẩn vì đã có ở 3/4 nơi). `position:relative;
 * z-index:1` GIỮ LẠI (không phải phần màu/cỡ) — bắt buộc để nút nổi trên
 * `.news-cta-box::after` (vòng tròn trang trí absolute phía sau), đúng lý
 * do bản gốc `.news-cta-btn`/h2/p đã đặt z-index:1. Màu nền cần override
 * riêng cùng lý lẽ đúng từng chữ như `.cta-box .btn-primary` của
 * home.css/page-dichvu.css/page-duan.css: `.news-cta-box` KHÔNG mang
 * `.on-navy` nên rule của global.css không với tới, và nền --navy của
 * `.btn-primary` chỉ 1.23:1 so với hộp navy — nút tàng hình.
 */
.news-cta-box .btn{ position: relative; z-index: 1; }
/*
 * ĐÍCH ĐỔI 03/09/2026 (khách gửi ảnh chụp nút chìm vào nền navy ở khối
 * "Vẫn còn nhiều dự án khác", /du-an-tieu-bieu/): --cobalt-ink trên nền hộp
 * navy chỉ tách bạch 2.13:1 — đỡ hơn nút TÀNG HÌNH (1.23:1) mà comment ở
 * trên nói tới, nhưng vẫn mờ. `.cta-box .btn-primary` (home.css/page-
 * dichvu.css/page-duan.css) — khối mà rule NÀY tự nhận là "khuôn" để theo —
 * đã đổi sang trắng/navy, đạt 11.41:1. Đổi tại đây cho khớp lại đúng cái
 * khuôn nó tự nhận.
 */
.news-cta-box .btn-primary,
.news-cta-box .btn-primary:hover{ background: var(--white); color: var(--navy); border-color: var(--white); }

/* ---------- Responsive (đúng breakpoint mockup) ---------- */
@media ( max-width: 900px ) {
	.feat-grid {
		grid-template-columns: 1fr;
	}

	.news-grid {
		grid-template-columns: repeat( 2, 1fr );
	}

}

@media ( max-width: 600px ) {
	.news-grid {
		grid-template-columns: 1fr;
	}

	.feat-mini {
		grid-template-columns: 100px 1fr;
	}

	.news-cta-box {
		padding: var(--sp-6) var(--sp-5);
	}

	.news-sec {
		padding-block: 40px;
	}
}
/*
 * KHUÔN CTA CHUẨN TRÊN ĐIỆN THOẠI (07/09/2026) — khai cuối file để chắc chắn
 * đứng SAU rule chính của hộp (bài học từ page-tacgia.css: rule điện thoại nằm
 * TRƯỚC rule chính thì thua thứ tự nguồn, khai đúng mà không hiệu lực nào —
 * hộp đó đo ra đệm 36px trong khi năm hộp kia 32/24).
 *
 * NÚT FULL-WIDTH: đo tại 375px, nút co theo độ dài chữ nên hai nút trong cùng
 * một khối lệch nhau (dự án 187px và 155px, năng lực 199px và 171px) và mỗi
 * trang một bề ngang. Kéo bằng bề ngang hộp thì cột nút thẳng nhau ở mọi
 * trang, và vùng chạm cũng rộng hơn hẳn.
 */
@media (max-width:600px){
  .news-cta-box .btn{ width:100%; }
}
/*
 * THANG CỠ TIÊU ĐỀ BANNER CHUẨN (07/09/2026): 38px desktop, 30px từ 900px,
 * 28px từ 600px. Trước đợt này mỗi banner tự chọn mốc và cỡ riêng nên ở 800px
 * màn hình có ba cỡ tiêu đề khác nhau cùng lúc — xem docblock đầy đủ trong
 * scratchpad/banner-dong-bo.py và các khối tương ứng ở tám file banner khác.
 */
@media (max-width:900px){
  .news-banner h1{ font-size:30px; }
}

@media (max-width:600px){
  .news-banner h1{ font-size:28px; }
}