/**
 * TRANG CHỦ  (T-301.1)
 *
 * Spec `home/5-frontend` §4 (bảng responsive) · `1-wireframe` §1.
 *
 * Mobile-first như layout.css: mặc định là bố cục SP, `min-width` nới dần.
 * Mọi giá trị lấy từ `_tokens.css` — không hardcode hex/px cho thứ đã có token.
 *
 * ⚠️ `process` và `timeline` KHÔNG nằm ở đây mà ở `components.css` §13 — hai
 *    khối đó dùng lại ở `single-service` và `gioi-thieu`, nhét vào CSS riêng
 *    của trang chủ thì trang thứ hai phải chép lại.
 */

/* =========================================================================
 * 0. KHUNG TRANG
 * ====================================================================== */

/*
 * `.site-main` có padding 48px trên/dưới cho các trang nội dung thường. Trang
 * chủ thì KHÔNG: mọi khối ở đây là section tràn hết chiều ngang và tự quản
 * khoảng cách dọc của mình. Giữ padding đó tạo một dải trắng ngay dưới header
 * (cắt rời hero khỏi thanh điều hướng) và một mảng trắng hở giữa khối cuối và
 * chân trang — cả hai đều nhìn như lỗi tải trang chứ không như thiết kế.
 */
.site-main--home {
	padding-top: 0;
	padding-bottom: 0;
}

/*
 * `.site-footer` có `margin-top: var(--section-gap)` để tách chân trang khỏi
 * đoạn văn cuối của các trang nội dung. Trên trang chủ, khối cuối luôn là một
 * section tràn nền có màu (CTA band), nên khoảng cách đó thành một mảng trắng
 * kẹp giữa hai vùng tối — trông như thiếu mất một khối chứ không như khoảng
 * thở. Chỉ gỡ ở trang chủ, các trang khác giữ nguyên.
 */
body.home .site-footer {
	margin-top: 0;
}

/* =========================================================================
 * 1. HERO — HR-00…HR-09
 * ====================================================================== */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 520px;
	padding: var(--sp-16) 0;
	overflow: hidden;
	background-color: var(--c-primary-800);
	color: var(--c-text-invert);
}

/*
 * Không có ảnh nền → nền màu đặc (HR-01). Nền đã đặt ở `.hero` nên biến thể
 * này chỉ tồn tại để CSS sau còn bám vào được; giữ rỗng thì lint kêu, nên
 * dùng luôn nó để bỏ lớp phủ vốn chỉ có nghĩa khi có ảnh.
 */
.hero--solid .hero__inner::before {
	content: none;
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: var(--z-base);
}

.hero__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Banner nhiều slide (CR 2026-09-02) -------------------------------- */

.hero__bg--slider,
.hero__bg--slider .swiper-wrapper,
.hero__bg--slider .hero__slide {
	width: 100%;
	height: 100%;
}

.hero__bg--slider .hero__slide {
	overflow: hidden;
}

/*
 * ⚠️ Lớp phủ phải nằm TRÊN slide, nếu không ảnh đè lên nó và chữ trắng mất
 *    nền tối. `pointer-events: none` để không nuốt thao tác vuốt/bấm dots.
 */
.hero__bg::after {
	z-index: 2;
	pointer-events: none;
}

.hero__dots {
	position: absolute;
	bottom: var(--sp-4);
	left: 0;
	z-index: 3;
	width: 100%;
	text-align: center;
}

.hero__dots .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background: var(--c-bg);
	opacity: 0.5;
}

.hero__dots .swiper-pagination-bullet-active {
	background: var(--c-accent);
	opacity: 1;
}

/*
 * Lớp phủ tối. Ảnh do khách tự chọn nên không thể trông cậy vào việc nó đủ
 * tối — wireframe §2 ghi "navy .85". Không có lớp này thì chữ trắng trên ảnh
 * sáng là không đọc được, đúng lỗi mà `1-wireframe` §5 cảnh báo.
 */
.hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	/*
	 * ⚠️ HAI lớp, không phải một.
	 *
	 * Bản cũ phủ **navy 85% → 50%**: ở nồng độ đó lớp phủ hoạt động như thuốc
	 * nhuộm chứ không phải lớp làm tối — mọi sắc độ của ảnh bị kéo về một tông
	 * xanh phẳng, mất sạch chi tiết công trường. Con số 85% lấy từ wireframe
	 * §3 dòng 126, nhưng đọc kèm ảnh thiết kế thì ý đồ là LÀM TỐI, không phải
	 * NHUỘM.
	 *
	 * Nay tách vai: lớp đen lo độ tối (giữ nguyên màu gốc của ảnh), lớp navy
	 * mỏng lo tông thương hiệu. Vùng bên trái — nơi có `<h1>` và mô tả — vẫn
	 * đủ tối để chữ trắng đạt tương phản ≥4,5:1 kể cả trên ảnh sáng.
	 */
	background:
		linear-gradient(90deg, rgb(0 0 0 / 62%) 0%, rgb(0 0 0 / 38%) 55%, rgb(0 0 0 / 18%) 100%),
		linear-gradient(90deg, rgb(0 30 90 / 45%) 0%, rgb(0 30 90 / 22%) 60%, rgb(0 30 90 / 8%) 100%);
}

/*
 * SP: chữ trải hết chiều ngang nên lớp phủ ngang vô nghĩa — chỗ nào cũng phải
 * đủ tối. Chuyển sang phủ dọc để phần đầu ảnh còn nhìn thấy được, thay vì cả
 * hero thành một mảng xanh phẳng.
 */
@media (max-width: 767px) {

	.hero__bg::after {
		background:
			linear-gradient(180deg, rgb(0 0 0 / 30%) 0%, rgb(0 0 0 / 55%) 45%, rgb(0 0 0 / 62%) 100%),
			linear-gradient(180deg, rgb(0 30 90 / 25%) 0%, rgb(0 30 90 / 40%) 45%, rgb(0 30 90 / 45%) 100%);
	}
}

/*
 * ⚠️ `width: 100%` là bắt buộc, không thừa.
 *
 * `.hero` là flex container, nên `.hero__inner` là flex ITEM và mặc định co
 * lại vừa nội dung. Khi hero có tiêu đề dài thì hộp vẫn rộng nên không ai
 * thấy gì; nhưng ở trạng thái bàn giao — mọi option rỗng, `<h1>` ngã về đúng
 * chữ "POTACO" — hộp co còn vài chục pixel rồi `margin-inline: auto` của
 * `.container` đẩy nó ra GIỮA màn hình. Tiêu đề trang chủ đột nhiên canh giữa
 * mà không ai đổi CSS canh lề.
 */
.hero__inner {
	position: relative;
	z-index: var(--z-dropdown);
	width: 100%;
}

.hero__title {
	margin: 0 0 var(--sp-5);
	max-width: 18em;
	font-size: var(--fs-h1);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	color: var(--c-text-invert);
}

/* --- Badge (HR-03, HR-04) — SP 2×2, PC 4 ngang --------------------------- */

.hero__badges {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-3) var(--sp-4);
	margin: 0 0 var(--sp-6);
	padding: 0;
	list-style: none;
}

.hero__badge {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	/* Nhãn dài (“Tiến độ đảm bảo”) phải xuống dòng chứ không đẩy vỡ lưới. */
	min-width: 0;
}

.hero__badge-icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.hero__desc {
	margin: 0 0 var(--sp-8);
	max-width: 42em;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-text-invert);
	opacity: 0.92;
}

/* --- Nút (HR-06, HR-07) — SP xếp dọc ------------------------------------- */

.hero__actions {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin-bottom: var(--sp-10);
}

/* Cụm rỗng (cả hai nút đều thiếu nhãn hoặc URL) không được chiếm chỗ. */
.hero__actions:empty {
	display: none;
}

/* --- Dải số liệu trong hero (HR-08, HR-09) — SP 1 cột -------------------- */

.hero__stats {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-5);
	margin: 0;
	padding: var(--sp-6) 0 0;
	border-top: var(--border-w) solid rgb(255 255 255 / 22%);
	list-style: none;
}

/*
 * Item số liệu: ICON TRÁI · số + nhãn PHẢI, cả cụm canh giữa ô, và có đường
 * phân cách dọc giữa các cột (thiết kế). Bản cũ xếp dọc nên icon nằm trên số.
 */
.hero__stat {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	min-width: 0;
	text-align: left;
}

.hero__stat-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hero__stat-num {
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	color: var(--c-accent);
}

.hero__stat-label {
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	opacity: 0.85;
	/* Nhãn khách nhập có thể rất dài — cho xuống dòng, không cắt cụt. */
	overflow-wrap: anywhere;
}

/* --- ≥576px: số liệu 2×2 ------------------------------------------------- */

@media (min-width: 576px) {

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

	/*
	 * Đường phân cách dọc — CHỈ bật khi đã có từ 2 cột trở lên.
	 *
	 * Ở 1 cột (<576px) mà vẫn kẻ thì mỗi dòng có một vạch dọc lơ lửng bên
	 * trái, trông như lỗi render. `nth-child(2n + 1)` gỡ vạch ở ô đầu mỗi
	 * hàng, nếu không hàng nào cũng dính một vạch thừa ngoài cùng bên trái.
	 */
	.hero__stat + .hero__stat {
		border-left: var(--border-w) solid rgb(255 255 255 / 22%);
		padding-left: var(--sp-4);
	}

	.hero__stat:nth-child(2n + 1) {
		border-left: 0;
		padding-left: 0;
	}
}

/* --- ≥768px: hero cao hơn ------------------------------------------------ */

@media (min-width: 768px) {

	.hero {
		min-height: 600px;
	}

	.hero__actions {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* --- ≥992px: badge và số liệu 4 ngang, nội dung thu về cột trái ---------- */

@media (min-width: 992px) {

	.hero {
		min-height: 660px;
	}

	.hero__badges,
	.hero__stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* 4 cột: vạch nằm giữa mọi ô trừ ô đầu hàng (ô thứ nhất). */
	.hero__stat:nth-child(2n + 1) {
		border-left: var(--border-w) solid rgb(255 255 255 / 22%);
		padding-left: var(--sp-4);
	}

	.hero__stat:first-child {
		border-left: 0;
		padding-left: 0;
	}

	.hero__title,
	.hero__desc,
	.hero__badges,
	.hero__actions {
		/*
		 * Wireframe §4: nội dung chiếm 70% ở 992–1199, 60% từ 1200. Dải số
		 * liệu KHÔNG bị giới hạn — nó trải hết chiều ngang dưới đáy hero.
		 */
		max-width: 70%;
	}
}

@media (min-width: 1200px) {

	.hero__title,
	.hero__desc,
	.hero__badges,
	.hero__actions {
		max-width: 60%;
	}
}

/*
 * Hero KHÔNG ảnh nền thì bỏ chiều cao tối thiểu — đặt sau các media query,
 * và dùng hai class để thắng độ đặc hiệu mà không cần `!important`.
 *
 * Vì sao cần: `min-height` 520–660px tồn tại để ảnh nền có đất diễn. Không có
 * ảnh thì nó thành một mảng xanh đặc cao hai phần ba màn hình với mỗi chữ
 * "POTACO" trôi giữa — chính xác thứ khách nhìn thấy ngay sau bàn giao, khi
 * chưa nhập gì. Bỏ ngưỡng đi thì chiều cao do nội dung quyết định: rỗng thì
 * gọn, nhập đủ badge + mô tả + nút + số liệu thì tự cao trở lại.
 */
.hero.hero--solid {
	min-height: 0;
}

/* Dải số liệu (`.stats-band*`) đã CHUYỂN sang `components.css` §14 — khối này
   dùng ở CẢ trang chủ lẫn trang Giới thiệu, để CSS trong file riêng của trang
   chủ thì màn kia nhận markup mà không có style. Xem ghi chú tại chỗ mới. */

/* =========================================================================
 * 3. PHƯƠNG CHÂM BA TỐT — MT-00…MT-06
 * ====================================================================== */

.motto {
	padding: var(--section-gap) 0;
	background-color: var(--c-bg);
}

.motto__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-5);
}

.motto__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	min-width: 0;
	padding: var(--card-padding);
	overflow: hidden;
	border-radius: var(--radius-lg);
	color: var(--c-text-invert);
	background-color: var(--c-primary);
}

/* --- Ảnh nền thẻ + lớp phủ gradient (CR 2026-09-02) --------------------- */

.motto__card-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Lớp phủ dùng ĐÚNG màu nền của từng biến thể, đặc ở trái (nơi có chữ) và
 * loãng dần về phải để lộ ảnh — như ảnh thiết kế.
 *
 * ⚠️ Ba biến thể ba màu khác nhau: dùng chung một gradient là thẻ cam sẽ phủ
 *    navy, sai hẳn nhận diện. Viết rgb() thẳng vì `linear-gradient` cần giá
 *    trị có alpha, mà token là hex đặc.
 */
.motto__card--has-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgb(0 36 102 / 97%) 0%, rgb(0 36 102 / 88%) 45%, rgb(0 36 102 / 55%) 100%);
}

.motto__card--accent.motto__card--has-bg::after {
	background: linear-gradient(90deg, rgb(191 78 5 / 97%) 0%, rgb(191 78 5 / 88%) 45%, rgb(191 78 5 / 55%) 100%);
}

.motto__card--navy-dark.motto__card--has-bg::after {
	background: linear-gradient(90deg, rgb(0 24 66 / 97%) 0%, rgb(0 24 66 / 88%) 45%, rgb(0 24 66 / 55%) 100%);
}

/* Nội dung luôn nằm trên ảnh và lớp phủ. */
.motto__card > *:not(.motto__card-bg) {
	position: relative;
	z-index: 2;
}

/*
 * ⚠️ Thẻ cam dùng `--c-accent-strong` (#BF4E05), KHÔNG dùng `--c-accent`
 *    (#FC6C06). Layout gốc vẽ chữ trắng trên #FC6C06 — cặp màu đó KHÔNG đạt
 *    tương phản WCAG AA. Một trong ba chỗ `1-wireframe` §5 dặn đừng chép.
 */
.motto__card--accent {
	background-color: var(--c-accent-strong);
}

.motto__card--navy-dark {
	background-color: var(--c-primary-900, var(--c-primary-800));
}

.motto__title {
	margin: 0;
	font-size: var(--fs-h3);
	color: var(--c-text-invert);
}

.motto__bullets {
	flex: 1 1 auto;
	margin: 0;
	padding-left: var(--sp-5);
	line-height: var(--lh-body);
}

.motto__bullets li + li {
	margin-top: var(--sp-1);
}

.motto__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	font-weight: var(--fw-semi);
	color: var(--c-text-invert);
	text-decoration: none;
	border-bottom: 2px solid rgb(255 255 255 / 45%);
}

/*
 * ⚠️ Hover KHÔNG đổi MÀU CHỮ — và đây là quy tắc chung cho CẢ BA thẻ.
 *
 * Bản cũ đổi chữ sang `--c-accent` (#FC6C06). Trên hai thẻ navy thì đọc được,
 * nhưng thẻ giữa có nền `--c-accent-strong` (#BF4E05) — cam trên cam, đo được
 * **1,69:1**, chữ chìm hẳn vào nền. Chú thích cách đây 40 dòng đã dặn đúng cặp
 * màu ấy, nhưng chú thích không ép được ai: quy tắc hover vẫn rơi vào bẫy.
 *
 * Nên sửa theo hướng KHÔNG THỂ SAI LẠI, thay vì vá riêng thẻ cam: tín hiệu
 * hover là GẠCH CHÂN sáng lên + mũi tên trượt sang, không phải màu chữ. Chữ
 * giữ trắng — màu đã đạt tương phản trên cả ba nền ngay từ trạng thái nghỉ,
 * nên thẻ biến thể thứ tư thêm sau này cũng tự đúng.
 *
 * Gạch chân dày 2px sẵn từ lúc nghỉ (mờ 45%), hover chỉ đổi MÀU của nó — đổi
 * độ dày thì hộp link cao thêm 1px và cả cụm nhích lên.
 *
 * R-06-layout F-01.
 */
.motto__link:hover,
.motto__link:focus-visible {
	color: var(--c-text-invert);
	border-bottom-color: currentcolor;
}

/* Mũi tên → của link "Tìm hiểu thêm" (wireframe §3 dòng 136). */
.motto__link-icon {
	flex: 0 0 auto;
	transition: var(--transition);
}

.motto__link:hover .motto__link-icon,
.motto__link:focus-visible .motto__link-icon {
	transform: translateX(3px);
}

@media (min-width: 992px) {

	.motto__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* =========================================================================
 * 4. VỀ CHÚNG TÔI — AB-00…AB-07
 * ====================================================================== */

.about {
	padding: var(--section-gap) 0;
	background-color: var(--c-bg-alt);
}

.about__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-8);
	align-items: center;
	margin-bottom: var(--sp-12);
}

.about__label {
	display: block;
	margin-bottom: var(--sp-2);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-accent);
}

.about__title {
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-h2);
	line-height: var(--lh-tight);
	color: var(--c-heading);
}

.about__content {
	margin-bottom: var(--sp-6);
	line-height: var(--lh-body);
	color: var(--c-text);
}

.about__content p {
	margin: 0 0 var(--sp-4);
}

.about__content p:last-child {
	margin-bottom: 0;
}

.about__image {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

@media (min-width: 992px) {

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

	.about--no-image .about__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================================
 * 5. VIDEO — VD-00…VD-07
 * ====================================================================== */

.video-block {
	padding: var(--section-gap) 0;
	background-color: var(--c-bg);
}

.video-block__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	border-radius: var(--radius-lg);
}

.video-block__text {
	order: 2;
	padding: var(--sp-8);
	color: var(--c-text-invert);
	background-color: var(--c-primary);
}

/*
 * Cột poster: `display: flex` để `.lazy-video` bên trong giãn hết chiều cao ô
 * lưới. Thiếu vế này thì khung chỉ cao bằng ảnh, còn cột chữ navy bên cạnh
 * cao hơn — đúng hiện tượng "hai cột lệch chiều cao".
 */
.video-block__media {
	position: relative;
	order: 1;
	display: flex;
	min-width: 0;
	overflow: hidden;
}

.video-block__btn {
	align-self: flex-start;
	margin-top: var(--sp-6);
}

.video-block__label {
	display: block;
	margin-bottom: var(--sp-2);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	opacity: 0.8;
}

.video-block__title {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-h3);
	line-height: var(--lh-tight);
	color: var(--c-text-invert);
}

.video-block__desc {
	margin: 0;
	line-height: var(--lh-body);
	opacity: 0.9;
}

@media (min-width: 992px) {

	/* Wireframe §4: poster 55% · nội dung 45%. */
	.video-block__inner {
		grid-template-columns: 55% 45%;
	}

	.video-block__text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: var(--sp-12);
	}

	/*
	 * Lớp phủ chuyển màu ở mép PHẢI ảnh, để poster tan dần vào khối navy bên
	 * cạnh thay vì cắt bằng một đường thẳng cứng (CR 2026-09-02).
	 *
	 * ⚠️ Chỉ từ 992px. Dưới ngưỡng đó lưới về 1 cột, ảnh nằm TRÊN khối navy
	 *    chứ không cạnh nó — phủ ngang lúc ấy thành một vệt tối vô nghĩa.
	 *
	 * ⚠️ `pointer-events: none`: lớp phủ nằm đè lên vùng ảnh, không có dòng
	 *    này thì nó nuốt luôn cú bấm vào nút play.
	 */
	.video-block__media::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 2;
		pointer-events: none;
		background: linear-gradient(90deg, transparent 55%, var(--c-primary) 100%);
	}
}

/* =========================================================================
 * 6. LĨNH VỰC HOẠT ĐỘNG — FD-00…FD-06
 * ====================================================================== */

/* Nền xen kẽ: khối ngay trên (`.video-block`) là nền trắng, nên khối này lấy
   nền xám. Ràng buộc wireframe §RÀNG BUỘC RIÊNG: "không để hai section cùng
   nền liền nhau". */
.fields {
	padding: var(--section-gap) 0;
	background-color: var(--c-bg-alt);
}

/* Lớp bọc giữ hai nút mũi tên nằm NGOÀI vùng `overflow: hidden` của Swiper. */
.fields__slider {
	position: relative;
}

@media (min-width: 768px) {

	.fields__slider {
		padding: 0 44px;
	}
}

.fields__nav.swiper-button-prev,
.fields__nav.swiper-button-next {
	display: none;
}

@media (min-width: 768px) {

	.fields__nav.swiper-button-prev,
	.fields__nav.swiper-button-next {
		display: flex;
		width: 36px;
		height: 36px;
		margin-top: -18px;
		color: var(--c-primary);
		background-color: var(--c-bg);
		border: var(--border-w) solid var(--c-border);
		border-radius: var(--radius-full);
	}

	.fields__nav.swiper-button-prev {
		left: 0;
	}

	.fields__nav.swiper-button-next {
		right: 0;
	}
}

.fields__nav.swiper-button-prev::after,
.fields__nav.swiper-button-next::after {
	font-size: 14px;
	font-weight: var(--fw-bold);
}

.fields__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-4);
}

/* Chế độ trượt: Swiper quản chiều ngang, bỏ lưới đi. */
.fields__list--slider {
	display: block;
}

/*
 * Chỗ thở dọc cho phần NHẤC LÊN + bóng của ô — cùng thủ thuật với
 * `.partners__track` ở §9, cùng lý do: `.swiper` của vendor là `overflow:
 * hidden`, mà hộp này cao đúng bằng slide.
 *
 * Ô lĩnh vực trước F-07 không nhấc nên chưa lộ; nay dùng chung ngôn ngữ hover
 * với `.card` (nhấc 2px + `--shadow-md` = `0 4px 16px`) thì phần nhấc và bóng
 * đều nằm ngoài hộp và bị xén phẳng.
 *
 * `padding` 20px phủ được cả nhấc 2px lẫn bóng chạm 20px dưới đáy; `margin` âm
 * cùng số nên chiều cao khối và vị trí nút "Xem tất cả" bên dưới không đổi.
 *
 * ⚠️ Phải có `.swiper` trong selector — `swiper.min.css` in ở footer nên nạp
 *    SAU css theme, `.swiper { padding: 0 }` cùng đặc hiệu sẽ thắng.
 */
.fields__list--slider.swiper {
	--breathe: 20px;   /* chỗ thở qua `.swiper--breathe` (components.css) */
}

/*
 * ⚠️ Chiều cao ô ở chế độ TRƯỢT phải do nội dung quyết định, không phải 100%.
 *
 * `height: 100%` bên dưới là để các ô trong LƯỚI cao bằng nhau. Đem nguyên
 * sang chế độ trượt thì thành vòng lặp: ô lấy 100% của slide, slide lấy chiều
 * cao Swiper đo được, mà Swiper đo trước khi icon tải xong. Kết quả đo thật:
 * slide 139px trong khi ô 181px — ô tràn 42px và **đè lên nút "Xem tất cả"**.
 *
 * Cho ô tự cao theo nội dung rồi để slide `stretch` theo ô cao nhất thì chuỗi
 * phụ thuộc đi đúng một chiều, không còn phụ thuộc thời điểm ảnh về.
 */
/*
 * ⚠️ Độ đặc hiệu (0,0,3,0) là CỐ Ý, không phải viết dư.
 *
 * `swiper.min.css` khai `.swiper-autoheight .swiper-wrapper { align-items:
 * flex-start }` — cũng (0,0,2,0) như bản cũ của dòng này, mà file vendor được
 * `wp_enqueue_style` giữa lúc render body nên WordPress in nó ở CUỐI trang,
 * tức nạp SAU CSS theme ⇒ bằng đặc hiệu thì nó thắng, slide không giãn, ô cao
 * thấp so le. Thêm `.swiper` vào selector để thắng chắc mà không cần
 * `!important`.
 *
 * `data-auto-height` cũng đã được gỡ khỏi khối này ở `service-fields.php`:
 * autoHeight sinh ra cho khối muốn slide cao theo nội dung, còn ở đây yêu cầu
 * là ngược lại — mọi ô bằng nhau.
 */
.fields__list--slider.swiper .swiper-wrapper {
	align-items: stretch;
}

.fields__list--slider .swiper-slide {
	display: flex;
	width: 160px;
	height: auto;
}

.fields__list--slider .fields__item {
	flex: 1 1 auto;
	height: auto;
}

.fields__item {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	align-items: center;
	min-width: 0;
	height: 100%;
	padding: var(--sp-5) var(--sp-3);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
	text-align: center;
	text-decoration: none;
	background-color: var(--c-bg);
	transition: var(--transition);
}

/*
 * Hover của ô lĩnh vực KHÔNG còn khai ở đây — R-06-layout F-07.
 *
 * Ô này nay mang thêm class `card-hover` (`service-fields.php`), dùng chung một
 * quy tắc với `.card` ở `components.css` §6. Khai lại ở đây là đẻ ra định nghĩa
 * thứ hai, đúng thứ finding F-07 nói tới.
 */

.fields__item-icon {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.fields__item-title {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	color: var(--c-heading);
	overflow-wrap: anywhere;
}

/* `.fields__action` đã được thay bằng `.section-action` (components.css) —
   cùng một mẫu nút cuối khối dùng cho Lĩnh vực · Dự án · Tin tức, không nhân
   bản ba lần nữa. */

@media (min-width: 768px) {

	.fields__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {

	.fields__list {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* =========================================================================
 * 7. DỰ ÁN TIÊU BIỂU — PJ-00…PJ-08
 * ====================================================================== */

/* Nền xen kẽ: khối trên (`.fields`) nay là nền xám, nên khối này về nền trắng. */
.featured-projects {
	padding: var(--section-gap) 0;
	background-color: var(--c-bg);
}

/*
 * ⚠️ Dots đưa VÀO LUỒNG, không neo absolute nữa.
 *
 * Bản cũ chừa chỗ bằng `padding-bottom: 40px` rồi để Swiper neo dots
 * `position: absolute; bottom: 8px`. Cách đó chỉ đúng khi mọi card cao đúng
 * bằng khung trượt — card nào cao hơn là tràn xuống che mất dots. Đặt
 * `position: static` thì dots luôn nằm DƯỚI card cao nhất, không phụ thuộc
 * chiều cao card nữa.
 *
 * Độ đặc hiệu (0,0,2,0) + `.swiper` để thắng `swiper.min.css` — file vendor
 * được in ở cuối trang nên nạp SAU CSS theme.
 */
.featured-projects__slider {
	padding-bottom: 0;
}

.featured-projects__slider.swiper .swiper-pagination {
	position: static;
	margin-top: 20px;
}

.featured-projects__slider .swiper-slide {
	width: 280px;
	height: auto;
}

/* Card phải cao bằng nhau, nếu không hàng dots sẽ nhảy theo slide đang xem. */
.featured-projects__slider .swiper-slide > .card {
	height: 100%;
}

/* =========================================================================
 * 8. VÌ SAO CHỌN POTACO — WY-00…WY-06
 * ====================================================================== */

/*
 * Nền xen kẽ (ràng buộc wireframe §RÀNG BUỘC RIÊNG: "không để hai section
 * cùng nền liền nhau"). Trước đây `.why` trắng đứng ngay trước `.process`
 * cũng trắng, nên 160px khoảng cách giữa hai khối trở thành một mảng trống
 * không có ranh giới — chính thứ khách nhìn ra.
 *
 * Nhịp mới của trang chủ: motto trắng → about xám → video trắng → fields xám
 * → dự án trắng → why XÁM → process trắng → stats navy → partners trắng →
 * tin tức xám → CTA navy.
 */
.why {
	padding: var(--section-gap) 0;
	background-color: var(--c-bg-alt);
}

.why__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-8);
	align-items: center;
}

.why__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.why__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--sp-1) var(--sp-4);
	align-items: start;
}

/*
 * `img` HOẶC `svg`: ô icon có thể là ảnh khách tải lên hoặc icon sprite của
 * theme (C-28). Chỉ nhắm `img` thì nhánh sprite rơi ra khỏi lưới hai cột và
 * tụt xuống hàng riêng.
 */
.why__item > img,
.why__item > svg {
	grid-row: span 2;
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.why__title {
	margin: 0;
	font-size: var(--fs-body);
	font-weight: var(--fw-semi);
	color: var(--c-heading);
}

.why__desc {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
	color: var(--c-text-muted);
}

.why__media img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

@media (min-width: 768px) {

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

@media (min-width: 992px) {

	.why__inner {
		grid-template-columns: 1.2fr 1fr;
	}

	/* WY-06: thiếu ảnh → danh sách chiếm FULL, không chừa cột trống. */
	.why__inner--no-image {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================================
 * 9. ĐỐI TÁC — PT-00…PT-04
 *
 * ⚠️ CSS CỦA DẢI NÀY ĐÃ CHUYỂN SANG `components.css` §12b (2026-09-09).
 *
 * `block/partners.php` là component dùng chung. Để CSS ở đây thì trang nào
 * khác gọi lại block cũng ra dải logo trần không style — đúng cái đã xảy ra
 * với archive sản phẩm. Đừng thêm rule `.partners*` vào file này nữa.
 * ====================================================================== */

/* =========================================================================
 * 10. TIN TỨC MỚI NHẤT — NW-00…NW-06
 * ====================================================================== */

.latest-news {
	padding: var(--section-gap) 0;
	background-color: var(--c-bg-alt);
}

.latest-news__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-6);
}

@media (min-width: 768px) {

	.latest-news__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {

	.latest-news__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* =========================================================================
 * 11. DẢI SỐ LIỆU — icon (D-006)
 * ====================================================================== */

/* 40px cho cân với cụm số + nhãn khi icon đứng BÊN TRÁI (trước đây icon nằm
   trên số nên 32px là đủ). Nhớ sửa cả tham số `size` khi gọi `potaco_icon()`
   trong `hero.php` và `stats-band.php`, nếu không icon nhảy kích thước lúc
   CSS chưa tải xong. */
.hero__stat-icon,
.stats-band__icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	object-fit: contain;
}

/* =========================================================================
 * 12. ICON THEO KHỐI  (C-28)
 * ====================================================================== */

/* Icon "Ba Tốt" nằm trên nền màu đặc — lấy màu chữ của thẻ, không lấy màu nhấn.
   42px = 32 × 1,3 (yêu cầu khách 2026-09-02). Sửa CẢ tham số `size` khi gọi
   `potaco_icon()` trong `motto.php`, nếu không icon nhảy kích thước lúc CSS
   chưa tải xong. */
.motto__icon {
	width: 42px;
	height: 42px;
	object-fit: contain;
}

.process__icon {
	width: 24px;
	height: 24px;
	object-fit: contain;
}