/**
 * TRANG GIỚI THIỆU — 10 section + sidebar mục lục  (T-302.1 · T-302.2)
 *
 * Spec `gioi-thieu/1-wireframe.md` §1–§3 · `5-frontend.md` §4 (bảng responsive).
 *
 * ⚠️ Nạp CHỈ ở `page-gioi-thieu.php` — xem `potaco_enqueue_about()`.
 * ⚠️ Mọi giá trị lấy từ token `--potaco-*`; không hex, không px tự chế cho thứ
 *    design system đã khai.
 */

/* =========================================================================
 * 1. KHUNG — sidebar + nội dung
 * ====================================================================== */

/*
 * ⚠️ Nền trang là XÁM RẤT NHẠT, không phải trắng — đo từ layout gốc
 *    `gioi-thieu-v2-20260904.png`: vùng ngoài thẻ ~ rgb(250,251,252), thẻ
 *    ~ rgb(254,254,255). Chênh nhau chỉ **1,035:1**.
 *
 *    Nói thẳng: một mình màu nền này gần như không nhìn ra. Thứ thật sự tách
 *    thẻ mục lục khỏi nền trong layout là **bóng đổ** (`--shadow-md`), màu nền
 *    chỉ để bóng có chỗ bám. Đổi đậm hơn — vd `--c-bg-alt` (1,08:1) — là lệch
 *    layout, nên nếu muốn rõ hơn thì phải sửa cả bản thiết kế chứ không tự nâng.
 *
 * ⚠️ Đặt ở `.site-main--about` chứ KHÔNG ở `body`: ba layout gốc còn lại
 *    (`page-home`, `pag-danh-sach-dich-vu`, `page-chi-tiet-dich-vu`) đều đo ra
 *    nền ~ rgb(254,254,254) — tức TRẮNG. Đổi `body` là kéo theo mọi trang đi
 *    ngược layout của chính nó.
 */
.site-main--about {
	padding-top: 0;
	background-color: var(--c-bg-page);
}

/* =========================================================================
 * 0.a BANNER ĐẦU TRANG — đã CHUYỂN sang khối dùng chung
 *
 * Toàn bộ CSS `.about-hero*` từng nằm ở đây, nay là `.page-hero*` trong
 * `assets/css/components.css` §8b (phản hồi khách 2026-09-08 — breadcrumb vào
 * trong banner, banner có dòng mô tả, khối dùng chung cho mọi trang).
 *
 * ⚠️ ĐỪNG chép lại vào đây. `about.css` chỉ nạp ở `page-gioi-thieu.php`
 *    (`potaco_enqueue_about()`), nên mọi quy tắc đặt ở đây là VÔ HÌNH với các
 *    trang khác cùng gọi `potaco_page_hero()` — trang thứ hai sẽ ra một dải
 *    không style, và không có lỗi nào hiện ra.
 * ====================================================================== */

.about {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-8);
	padding-top: 0;   /* khoảng cách tới banner là `--hero-gap` của `.page-hero` (components.css §8b) */
	padding-bottom: var(--sp-12);
}

/*
 * Nền section XEN KẼ trắng / xám (ràng buộc wireframe §3 và §6).
 * Dùng `:nth-child(even)` trên chính section thay vì gán tay từng khối: số
 * section thay đổi theo dữ liệu (§09 ẩn thì §10 lên thay chỗ), gán tay là
 * chắc chắn lệch ngay lần đầu khách xoá một khối.
 */
.about-section {
	padding: var(--sp-10) 0;
}

/*
 * Section đầu KHÔNG đệm trên: tiêu đề §01 phải cách banner đúng `--hero-gap`
 * như sidebar bên cạnh (CR 2026-09-11 — trước đó sidebar 32px, tiêu đề 72px,
 * hai cột lệch nhau 40px ngay dòng đầu tiên).
 */
.about-section:first-child {
	padding-top: 0;
}

.about-section + .about-section {
	border-top: var(--border-w) solid var(--c-border);
}

.about-section__head {
	display: flex;
	align-items: baseline;
	gap: var(--sp-3);
	margin-bottom: var(--sp-6);
}

/* Số 01–10: cam GỐC hợp lệ ở đây vì là chữ trên nền sáng, không có chữ trắng
   đè lên (wireframe §5 đã đối chiếu và chốt). */
.about-section__num {
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	line-height: 1;
	color: var(--c-accent);
}

.about-section__title {
	margin: 0;
	font-size: var(--fs-h3);
	line-height: var(--lh-tight);
	color: var(--c-heading);
}

/* =========================================================================
 * 2. SIDEBAR
 * ====================================================================== */

.about__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	min-width: 0;
}

/*
 * <992px: box liên hệ + tải PDF xuống CUỐI nội dung (wireframe §3, quyết định
 * 2) — nhưng MỤC LỤC thì KHÔNG đi theo: nó thành thanh dính ngay dưới header
 * (quyết định 1). Đẩy cả sidebar xuống cuối là mất công cụ điều hướng ngay khi
 * cuộn qua §02, mà khả năng nhảy nhanh giữa 10 mục mới là thứ đáng giá nhất
 * của khối này.
 *
 * Nên: sidebar xuống cuối bằng `order`, còn `.toc--collapsible` tự tách ra
 * thành thanh `position: fixed` ở bên dưới.
 */
.about__sidebar {
	order: 2;
}

.about__content {
	order: 1;
	min-width: 0;
}

/* --- Thanh mục lục thu gọn (SB-13, SB-14) — chỉ <992px ------------------ */

@media (max-width: 991px) {

	.about__sidebar .toc--collapsible {
		position: fixed;
		top: var(--header-h);   /* ngay dưới header — biến, xem layout.css */
		right: 0;
		left: 0;
		z-index: var(--z-sticky, 30);
		padding: 0;
		background: var(--c-bg-alt);
		border-bottom: var(--border-w) solid var(--c-border);
		/* ⚠️ Gỡ hình THẺ mà `.toc--sticky` khai ở components.css §mục lục. Phần tử
		   này mang cả hai class, nên không gỡ thì thanh dính full-width lại có góc
		   bo và bóng đổ — trông như một thẻ bị kéo giãn hết màn. */
		border-radius: 0;
		box-shadow: none;
	}

	/* Lề trong 24px của bản thẻ cộng thêm vào `--gutter` của `.toc__panel` là
	   chữ thụt gần gấp đôi. Panel tự lo lề ngang, hàng mục về 0. */
	.toc--collapsible .toc__link {
		padding-inline: 0;
		border-left: 0;
	}

	/* Tiêu đề "Mục lục" đã nằm trong nhãn nút — in hai lần là thừa. */
	.about__sidebar .toc--collapsible .toc__title {
		display: none;
	}

	.toc__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--sp-3);
		width: 100%;
		min-height: 48px;
		padding: 0 var(--gutter);
		font-family: var(--font-body);
		font-size: var(--fs-sm);
		font-weight: var(--fw-semi);
		text-align: left;
		color: var(--c-heading);
		background: none;
		border: 0;
		cursor: pointer;
	}

	.toc__toggle-caret {
		flex: 0 0 auto;
		width: 8px;
		height: 8px;
		border-right: 2px solid currentcolor;
		border-bottom: 2px solid currentcolor;
		transform: rotate(45deg) translate(-2px, -2px);
		transition: var(--transition);
	}

	.toc--collapsible.is-open .toc__toggle-caret {
		transform: rotate(-135deg) translate(-2px, -2px);
	}

	/* Panel phủ danh sách 10 mục, chỉ hiện khi bấm. */
	.toc__panel {
		display: none;
		max-height: 60vh;
		overflow-y: auto;
		padding: var(--sp-2) var(--gutter) var(--sp-4);
		background: var(--c-bg);
		border-top: var(--border-w) solid var(--c-border);
	}

	.toc--collapsible.is-open .toc__panel {
		display: block;
	}

	/*
	 * Thanh dính chiếm 48px ở đầu màn, nên nội dung phải chừa đúng chỗ đó —
	 * không thì section đầu bị che.
	 */
	.about {
		padding-top: calc(48px + var(--sp-6));
	}
}

/* ≥992px: không có nút thu gọn, danh sách luôn hiện. */
@media (min-width: 992px) {

	.toc__toggle {
		display: none;
	}

	.toc__panel {
		display: block;
	}
}

/* --- Thẻ tải hồ sơ năng lực (SB-04) --- */

.about-pdf {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--sp-4);
	color: var(--c-heading);
	text-decoration: none;
	background: var(--c-bg);
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-md);
	transition: var(--transition);
}

.about-pdf:hover,
.about-pdf:focus-visible {
	border-color: var(--c-primary);
	background: var(--c-primary-50);
}

.about-pdf__label {
	font-weight: var(--fw-semi);
}

.about-pdf__name {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	overflow-wrap: anywhere;
}

/* --- Box liên hệ (SB-06…SB-12) --- */

.about-contact {
	padding: var(--sp-5);
	color: var(--c-text-invert);
	background: var(--c-primary-800);
	border-radius: var(--radius-lg);
	/* Cùng bóng với thẻ mục lục ngay trên — layout v2 vẽ cả hai khối của cột
	   bên là thẻ nổi trên nền, không phải mảng màu dán phẳng. */
	box-shadow: var(--shadow-md);
}

.about-contact__title {
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-text-invert);
}

.about-contact__list {
	margin: 0 0 var(--sp-4);
	padding: 0;
	list-style: none;
}

.about-contact__item {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	padding: 4px 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
}

.about-contact__icon {
	flex: 0 0 auto;
	margin-top: 2px;
	opacity: 0.85;
}

.about-contact__item a {
	color: inherit;
	text-decoration: none;
}

.about-contact__item a:hover,
.about-contact__item a:focus-visible {
	text-decoration: underline;
}

/* Hotline cam trên nền navy — wireframe §5 đo được 6,2:1, đạt AA. */
.about-contact__phone {
	font-family: var(--font-heading);
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
	color: var(--c-accent);
}

.about-contact__address {
	margin: 0;
}

.about-contact__btn {
	width: 100%;
}

.about-contact__social {
	display: flex;
	gap: 8px;
	margin: var(--sp-4) 0 0;
	padding: 0;
	list-style: none;
}

/* 44×44 — cùng lý do với `.site-footer__social-link` (F-13). */
.about-contact__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--c-text-invert);
	background: rgb(255 255 255 / 12%);
	border-radius: var(--radius-full);
	transition: var(--transition);
}

/* Cùng lý do với `.site-footer__social-link:hover` — xem ghi chú ở `layout.css`
   §chân trang. Trắng trên `--c-accent` chỉ 2,88:1. R-06-layout F-05. */
.about-contact__social-link:hover,
.about-contact__social-link:focus-visible {
	background: var(--c-accent-strong);
}

/* =========================================================================
 * 3. §01 GIỚI THIỆU CHUNG
 * ====================================================================== */

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

/* SP: ảnh lên TRƯỚC chữ (bảng responsive §4). */
.about-intro__media {
	order: -1;
}

/*
 * ⚠️ Tỉ lệ 4:3 GIỮ CỨNG, không để `height: auto` chạy theo file gốc — spec
 *    frontend §09 "Image" khai `aspect-ratio: 4/3` + `object-fit: cover`.
 *
 *    Ảnh này do khách thay sau bàn giao. Bản cũ để ảnh tự quyết chiều cao nên
 *    ảnh dọc hoặc ảnh panorama sẽ kéo cột phải dài/ngắn hơn cột chữ, và vì hai
 *    cột `align-items: center` nên cả khối lệch tâm — lỗi chỉ lộ khi khách
 *    upload ảnh khác tỉ lệ ảnh mẫu (1200×900), tức là sau khi dev hết soi.
 */
.about-intro__image {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

.about-intro__company {
	margin: 0 0 var(--sp-3);
	font-weight: var(--fw-bold);
	color: var(--c-heading);
}

.about-intro__content {
	line-height: var(--lh-body);
	color: var(--c-text);
}

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

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

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

/*
 * ⚠️ Badge là THẺ, không phải dòng icon + chữ trần — spec frontend §09
 *    "Badges": *4 cards. Border + subtle shadow*, và layout v2 vẽ 4 ô nền xám
 *    nhạt viền mảnh.
 *
 *    Bản đầu chỉ có `display:flex` nên 4 badge trôi trên nền trắng của §01,
 *    không tách khỏi hai đoạn văn ngay phía trên — mất hẳn vai trò "4 cam kết
 *    đọc lướt" mà thiết kế đặt ra cho khối này.
 */
.about-badges__item {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-width: 0;
	padding: var(--sp-4);
	background-color: var(--c-bg-alt);
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.about-badges__icon {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	object-fit: contain;
	color: var(--c-primary);
}

.about-badges__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Layout v2 và spec §09 đều in HOA nhãn badge. Để nguyên chữ thường trong DB
   rồi in hoa bằng CSS — khách gõ "An toàn" tự nhiên, không phải gõ CAPS. */
.about-badges__title {
	font-weight: var(--fw-semi);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-heading);
}

/*
 * ⚠️ `break-word`, KHÔNG phải `anywhere`.
 *
 * Hai giá trị này ngắt chữ giống nhau, nhưng `anywhere` còn tính cả vào
 * min-content: nó nói với lưới rằng "một ký tự cũng đủ rộng", nên track co
 * được xuống dưới bề rộng từ dài nhất mà không ai chặn. Cộng với việc dải
 * badge từng nằm nhầm trong cột chữ, kết quả là phụ đề rơi thành cột chữ dọc
 * từng ký tự. `break-word` vẫn cứu được chuỗi dài không có chỗ ngắt, nhưng
 * không hạ min-content — lưới quá chật thì tràn để thấy mà sửa, không âm thầm
 * bóp chữ.
 */
.about-badges__sub {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	overflow-wrap: break-word;
}

/* Dải số liệu trong trang này nằm trong khung nội dung, không full-bleed như
   trang chủ — bỏ padding section và bo góc lại cho khớp khối chữ. */
.stats-band--about {
	margin-top: var(--sp-8);
	padding: var(--sp-6) var(--sp-5);
	border-radius: var(--radius-lg);
}

/* =========================================================================
 * 4. §02 TẦM NHÌN – SỨ MỆNH
 * ====================================================================== */

/*
 * ⚠️ §02 KHÔNG có nền — hai thẻ đứng thẳng trên nền trắng của section.
 *
 * Bản trước bọc chúng trong một tấm nền xám (`--c-bg-alt`) có bo góc và
 * padding 24px, cộng thêm nhánh ảnh nền mờ `vision_bg`. Cả hai đều KHÔNG có
 * trong layout v2 lẫn spec frontend §10: mục đó chỉ khai đúng hai thẻ trắng
 * viền mảnh, không nhắc gì tới khung bọc.
 *
 * Hệ quả của tấm nền: thẻ trắng nằm trên nền xám nhạt nên ranh giới thẻ gần
 * như biến mất, và cả khối §02 trông như một hộp lớn thay vì hai thẻ ngang
 * hàng với §03 ngay dưới — §03 cũng là lưới thẻ nhưng không có khung bọc nào.
 *
 * Đã gỡ luôn `.about-vision`, `.about-vision__bg` và `.about-vision--has-bg`:
 * không còn markup nào mang các class đó. Về số phận của option `vision_bg`
 * trong admin, xem ghi chú ở `page-gioi-thieu.php` §02.
 */
.about-vision__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-5);
}

/*
 * ⚠️ Mỗi mục là một THẺ TRẮNG — spec frontend §10 khai đủ bộ: nền `#FFFFFF`,
 *    viền 1px, bo 10px, bóng nhẹ, padding 24px.
 *
 *    Bản đầu không style `__item` chút nào nên hai mục nằm trần trên tấm nền
 *    xám của `.about-vision`: không có ranh giới giữa Tầm nhìn và Sứ mệnh,
 *    người đọc phải tự đoán chữ nào thuộc mục nào.
 *
 * ⚠️ SP xếp CHỒNG (icon trên, chữ dưới), icon TRÁI chỉ từ 768px — spec §26:
 *    *"Mobile dùng Mobile Content UI Spec riêng, không ép layout desktop"*.
 *    Ép icon-trái xuống 360px thì cột chữ chỉ còn ~128px sau khi trừ gutter,
 *    padding tấm nền, padding thẻ và 48px vòng tròn: mỗi dòng lọt 2–3 từ.
 */
.about-vision__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding: var(--card-padding);
	background-color: var(--c-bg);
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

/*
 * Vòng tròn 48px = 28px icon + 10px padding mỗi bên (spec §10: *Circle,
 * 44–52px*). `content-box` là bắt buộc — mặc định `border-box` sẽ trừ padding
 * vào trong và icon teo còn 8px.
 */
.about-vision__icon {
	box-sizing: content-box;
	width: 28px;
	height: 28px;
	margin-bottom: var(--sp-3);
	padding: 10px;
	object-fit: contain;
	color: var(--c-primary);
	background-color: var(--c-primary-50);
	border-radius: var(--radius-full);
}

/* In HOA như layout v2 — cùng cách xử lý với nhãn badge §01: chữ thường nằm
   trong DB, hoa hoá bằng CSS. Cỡ hạ về `--fs-body`: `--fs-h4` (18px) mà in hoa
   thì nặng hơn hẳn tiêu đề section ngay trên nó. */
.about-vision__title {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-body);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--c-heading);
}

.about-vision__content {
	line-height: var(--lh-body);
	color: var(--c-text);
}

.about-vision__content p {
	margin: 0;
}

/* =========================================================================
 * 5. §03 GIÁ TRỊ CỐT LÕI
 * ====================================================================== */

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

.about-values__card {
	padding: var(--sp-5);
	background: var(--c-bg);
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-md);
}

/*
 * Ô giữ chỗ icon — R-06-layout F-10.
 *
 * `min-height` bằng đúng chiều cao icon, nên thẻ CÓ icon và thẻ KHÔNG có icon
 * đẩy tiêu đề xuống cùng một mức. Không viền, không nền: thẻ thiếu icon nhìn ra
 * là "chưa nhập icon", không phải "ô ảnh hỏng".
 *
 * ⚠️ `display: block` là bắt buộc — `<span>` mặc định inline, `min-height`
 *    không có tác dụng lên hộp inline và cả bản vá này sẽ im lặng vô hiệu.
 */
.about-values__iconbox {
	display: block;
	min-height: 32px;
}

.about-values__icon {
	width: 32px;
	height: 32px;
	object-fit: contain;
	color: var(--c-primary);
}

.about-values__title {
	margin: var(--sp-2) 0;
	font-size: var(--fs-h5, var(--fs-body));
	color: var(--c-heading);
}

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

/* =========================================================================
 * 5b. §04 HÀNH TRÌNH PHÁT TRIỂN
 *
 * Trang trí của trục thời gian nằm ở `components.css` (biến thể
 * `.timeline--vertical`) vì block dùng chung với trang chủ. Ở đây chỉ chỉnh
 * phần thuộc về ngữ cảnh trang Giới thiệu.
 * ====================================================================== */

/*
 * ⚠️ `block/timeline.php` tự bọc nội dung trong `.container` — đúng cho trang
 *    chủ, nơi khối này tràn hết chiều ngang và cần tự canh giữa. Trong §04 thì
 *    nó đã nằm sẵn trong cột nội dung, nên `padding: 0 24px` của `.container`
 *    thụt trục thời gian vào thêm 24px so với §01–§03 ngay trên: bốn chấm cam
 *    không thẳng hàng với số "04" và với chữ của các mục khác.
 */
.about-journey .timeline .container {
	padding-inline: 0;
}

.about-journey {
	position: relative;
}

/*
 * Ảnh thành phố là NỀN CHÌM góc dưới–phải, không phải một ô ảnh.
 *
 * Đặt `absolute` nên nó không chiếm chỗ trong dòng chảy: trục thời gian giữ
 * nguyên cả chiều ngang và chữ chạy đè lên ảnh, đúng như layout v2 vẽ.
 *
 * ⚠️ `aria-hidden` đã đặt ở markup và `alt` để rỗng: ảnh này thuần trang trí,
 *    không mang thông tin nào mà chữ bên cạnh chưa nói.
 */
/*
 * ⚠️ Dải nền trải HẾT chiều ngang §04 và tì đáy — KHÔNG phải ô ảnh bên phải.
 *
 *    Ảnh dùng ở đây là tranh toàn cảnh ~3:1 ĐÃ vẽ sẵn phần chuyển trắng ở nửa
 *    trái và cụm cao ốc dồn về phải. Nghĩa là phần "chìm dần" nằm trong chính
 *    file ảnh — CSS không phải mờ hoá gì thêm.
 *
 *    Bản trước bó ảnh vào `width: 42%` rồi phủ THÊM `mask-image` và
 *    `opacity: .5`. Ba lớp mờ chồng nhau, mà `object-fit: contain` trong ô hẹp
 *    còn thu ảnh 3:1 xuống một mẩu ~190px: cụm cao ốc teo về góc, phần lớn ô là
 *    mảng trắng. Neo `left: 0; right: 0` + `height: auto` thì ảnh giữ đúng tỉ lệ
 *    gốc, rộng bằng cột nội dung, cao ốc tự nằm bên phải như tranh đã vẽ.
 */
.about-journey__media {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	/* Không chặn chọn chữ mốc nằm đè lên vùng ảnh. */
	pointer-events: none;
}

.about-journey__img {
	display: block;
	width: 100%;
	height: auto;
}

/* Trục thời gian nằm TRÊN ảnh nền. */
.about-journey .timeline {
	position: relative;
	z-index: var(--z-base);
}

/*
 * <768px: ẩn hẳn ảnh nền. Cột nội dung lúc này chỉ còn ~330px nên ảnh 42% phủ
 * đúng vùng chữ mô tả, mà mô tả ở khổ đó đã xuống 2–3 dòng — chữ xám nhạt nằm
 * trên nền ảnh là mất đọc, không phải "chìm".
 */
@media (max-width: 767px) {

	.about-journey__media {
		display: none;
	}
}

/* =========================================================================
 * 6. §05 LĨNH VỰC HOẠT ĐỘNG
 * ====================================================================== */

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

.about-fields__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	background: var(--c-bg);
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-md);
	transition: var(--transition);
}

/*
 * Hover của thẻ §05 KHÔNG còn khai ở đây — R-06-layout F-07. Thẻ nay mang thêm
 * class `card-hover` (`page-gioi-thieu.php`), dùng chung quy tắc với `.card` ở
 * `components.css` §6.
 */

.about-fields__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--c-bg-alt);
}

.about-fields__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-fields__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--sp-4);
}

.about-fields__title {
	font-weight: var(--fw-semi);
	color: var(--c-heading);
	overflow-wrap: anywhere;
}

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

/* =========================================================================
 * 7. §06 NĂNG LỰC NỔI BẬT
 * ====================================================================== */

/* Bố cục 2 cột nay do `.split` (C-29) lo — xem `components.css` §15. */
.about-capacity {
	gap: var(--sp-5);
}

.about-capacity__box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-3);
	padding: var(--sp-6);
	color: var(--c-text-invert);
	background: var(--c-primary-800);
	border-radius: var(--radius-lg);
}

.about-capacity__image {
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
}

.about-capacity__title {
	margin: 0;
	font-size: var(--fs-h4);
	color: var(--c-text-invert);
}

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

/* §01 và §06 cùng dùng `.stats-band--about`; trong §06 nó nằm trên nền trắng
   nên giữ nguyên nền navy của component, chỉ cần bỏ margin trên. */
.about-capacity__stats .stats-band--about {
	margin-top: 0;
}

/* =========================================================================
 * 8. §07 SƠ ĐỒ TỔ CHỨC
 * ====================================================================== */

/* Bố cục 2 cột nay do `.split` (C-29) lo — xem `components.css` §15.
   Khối này chỉ giữ phần riêng của cây tổ chức. */
.about-org {
	gap: var(--sp-5);
}

/*
 * ⚠️ Khung cuộn RIÊNG, không để TRANG cuộn ngang (Q-04).
 *    Dải 768–991px là chỗ dễ tràn nhất: cây 3 nhánh ngang cần ~680px
 *    (spec file 5 §4 cảnh báo sẵn).
 */
.about-org__scroll {
	overflow-x: auto;
	padding-bottom: var(--sp-2);
}

.about-org__level {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin: 0;
	padding: 0 0 0 var(--sp-5);
	list-style: none;
}

.about-org__level--1 {
	padding-left: 0;
}

.about-org__node-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	min-width: 0;
}

.about-org__node {
	display: inline-block;
	padding: 10px var(--sp-4);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	text-align: center;
	color: var(--c-text-invert);
	background: var(--c-primary);
	border-radius: var(--radius-md);
}

.about-org__level--2 > .about-org__node-wrap > .about-org__node {
	background: var(--c-primary-500, var(--c-primary));
}

.about-org__level--3 > .about-org__node-wrap > .about-org__node {
	color: var(--c-heading);
	background: var(--c-primary-50);
}

/* --- Đường nối — R-06-layout F-09 ---------------------------------------
 *
 * Trước đây §07 KHÔNG có phần tử đường nối nào trong DOM: sáu viên pill đặt
 * cạnh nhau, không đọc ra được cấp nào thuộc cấp nào. Bản thiết kế
 * `page-gioi-thieu.png` vẽ rõ nét dọc từ *Ban lãnh đạo* → thanh ngang → ba
 * nhánh xuống ba phòng → hai nhánh con dưới *P. Kỹ thuật*.
 *
 * Vẽ bằng `::before`/`::after`, KHÔNG thêm markup và KHÔNG thêm thư viện —
 * cây do `$render_nodes` đệ quy sinh ra, thêm thẻ nghĩa là sửa hàm đệ quy và
 * mọi cấp sâu hơn phải tự nhớ in kèm.
 *
 * ⚠️ Không có đường nối thì khoảng cách không đều lại càng giống lỗi: critic
 *    đo *P. Kỹ thuật* → *P. Kinh doanh* 216px trong khi *P. Kinh doanh* →
 *    *P. Kế toán* 122px. Chênh lệch đó ĐÚNG (nhánh đầu rộng hơn vì có hai
 *    con), nhưng phải có đường nối thì người xem mới đọc ra được lý do.
 */

/* Dưới 768px cây xếp DỌC và thụt lề — dùng thanh ray trái + gạch ngang ngắn. */
.about-org__level:not(.about-org__level--1) {
	position: relative;
	border-left: 2px solid var(--c-border-strong);
}

.about-org__level:not(.about-org__level--1) > .about-org__node-wrap {
	position: relative;
}

.about-org__level:not(.about-org__level--1) > .about-org__node-wrap::before {
	content: "";
	position: absolute;
	top: 20px;                       /* ngang tâm viên pill cấp dưới */
	left: calc(var(--sp-5) * -1);    /* bằng đúng `padding-left` của `ul` */
	width: var(--sp-5);
	height: 2px;
	background: var(--c-border-strong);
}

/*
 * Từ 768px cây chuyển sang NGANG (xem §12) nên bộ nối phải vẽ lại hoàn toàn:
 * nét dọc từ nút cha xuống thanh bus, thanh bus ngang, rồi nét dọc lên từng
 * nút con.
 */
@media (min-width: 768px) {

	.about-org__level:not(.about-org__level--1) {
		padding-top: 16px;   /* chỗ cho nét dọc rơi từ nút cha xuống */
		border-left: 0;
	}

	/* Nét dọc từ nút cha xuống bus. `50%` của `ul` trùng tâm nút cha vì
	   `.about-org__node-wrap` canh giữa (§12). */
	.about-org__level:not(.about-org__level--1)::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		width: 2px;
		height: 16px;
		margin-left: -1px;
		background: var(--c-border-strong);
	}

	.about-org__level:not(.about-org__level--1) > .about-org__node-wrap {
		padding-top: 16px;   /* chỗ cho nét dọc đi lên từ nút con */
	}

	/* Nét dọc từ bus xuống nút con. */
	.about-org__level:not(.about-org__level--1) > .about-org__node-wrap::before {
		top: 0;
		left: 50%;
		width: 2px;
		height: 16px;
		margin-left: -1px;
	}

	/*
	 * Thanh bus ngang. Mỗi nút con tự vẽ đoạn bus của mình, nới ra hai bên
	 * NỬA KHOẢNG GAP để các đoạn dính liền — `gap` của flex là chỗ trống,
	 * không phần tử nào phủ, nên không nới thì bus đứt quãng.
	 */
	.about-org__level:not(.about-org__level--1) > .about-org__node-wrap::after {
		content: "";
		position: absolute;
		top: 0;
		right: calc(var(--sp-4) / -2);
		left: calc(var(--sp-4) / -2);
		height: 2px;
		background: var(--c-border-strong);
	}

	/* Hai đầu bus dừng ĐÚNG tâm nút ngoài cùng, không thò ra ngoài. */
	.about-org__level:not(.about-org__level--1) > .about-org__node-wrap:first-child::after {
		left: 50%;
	}

	.about-org__level:not(.about-org__level--1) > .about-org__node-wrap:last-child::after {
		right: 50%;
	}

	/* Một con duy nhất thì không có gì để bắc ngang — chỉ còn nét dọc. */
	.about-org__level:not(.about-org__level--1) > .about-org__node-wrap:only-child::after {
		content: none;
	}
}

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

/* =========================================================================
 * 9. §08 CAM KẾT
 * ====================================================================== */

/* Bố cục 2 cột nay do `.split` (C-29) lo. */
.about-commit {
	gap: var(--sp-5);
}

.about-commit__list {
	display: grid;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-commit__item {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	min-width: 0;
}

.about-commit__icon {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	object-fit: contain;
	color: var(--c-accent);
}

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

.about-commit__title {
	font-weight: var(--fw-semi);
	color: var(--c-heading);
}

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

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

/* =========================================================================
 * 10. §09 CHỨNG NHẬN
 * ====================================================================== */

.about-cert__intro {
	margin: 0 0 var(--sp-5);
	line-height: var(--lh-body);
	color: var(--c-text);
}

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

.about-cert__badge {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--sp-4);
	background: var(--c-bg-alt);
	border-left: 3px solid var(--c-accent);
	border-radius: var(--radius-md);
}

.about-cert__code {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	color: var(--c-heading);
}

.about-cert__scope {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

/* =========================================================================
 * 11. §10 ĐỘI NGŨ
 * ====================================================================== */

/* Bố cục 2 cột nay do `.split` (C-29) lo. */
.about-team {
	gap: var(--sp-5);
}

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

.about-team__desc {
	margin: 0 0 var(--sp-5);
	line-height: var(--lh-body);
	color: var(--c-text);
}

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

.about-team__quality {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.about-team__icon {
	width: 28px;
	height: 28px;
	object-fit: contain;
	color: var(--c-primary);
}

.about-team__quality-title {
	font-weight: var(--fw-semi);
	color: var(--c-heading);
}

.about-team__quality-desc {
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
	color: var(--c-text-muted);
}

/* =========================================================================
 * 12. ≥768px
 * ====================================================================== */

/*
 * ⚠️ Dải 768–991 KHÔNG được chia đôi section — bảng responsive
 *    `5-frontend.md` §4 ghi rõ: chỉ §03 thành 2×2 và §07 thành cây ngang. Mọi
 *    bố cục hai cột của SECTION (§01, §02, §06, §08, §10) đều phải đợi tới 992.
 *
 *    Bản đầu bật hai cột ngay từ 768: §06 bị chia đôi nên dải số liệu chỉ còn
 *    ~340px, mà bên trong nó lại là lưới 3 cột ⇒ mỗi ô ~100px và nhãn dài
 *    ("KỸ SƯ & KỸ THUẬT VIÊN") vỡ thành cột chữ dọc từng ký tự. Nhìn ảnh
 *    tablet mới thấy, đọc CSS không thấy.
 *
 *    Quy tắc chặn là "section không chia đôi", KHÔNG phải "không đụng gì tới
 *    768". Bố cục BÊN TRONG một thẻ vẫn được đổi ở đây — như icon-trái của §02
 *    bên dưới: lúc đó lưới §02 vẫn một cột, thẻ chiếm trọn chiều ngang nên
 *    không dính nguyên nhân đã gây ra sự cố trên.
 */
@media (min-width: 768px) {

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

	/*
	 * §02 chuyển sang icon TRÁI · chữ PHẢI (layout v2). Đặt ở 768 chứ không
	 * phải 992 vì tới 992 lưới §02 mới tách hai cột — trong dải 768–991 mỗi thẻ
	 * vẫn chiếm trọn chiều ngang, thừa chỗ cho bố cục ngang.
	 *
	 * Khoảng cách icon–chữ đặt bằng `margin-right` chứ KHÔNG bằng `column-gap`:
	 * mục khách không chọn icon thì cột 1 co về 0 và thẻ không còn khoảng thụt
	 * vô cớ ở đầu dòng — `gap` thì vẫn giữ nguyên 16px.
	 */
	.about-vision__item {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
	}

	/*
	 * ⚠️ `span 2`, KHÔNG phải `1 / -1`.
	 *
	 * `.about-vision__item` chỉ khai `grid-template-columns`, không khai
	 * `grid-template-rows` — nên lưới hàng toàn là hàng ngầm và lưới TƯỜNG MINH
	 * không có hàng nào. `-1` trỏ tới cạnh cuối của lưới tường minh, tức trùng
	 * luôn cạnh đầu: `1 / -1` thu về đúng MỘT hàng. Icon vì thế dính theo hàng
	 * tiêu đề và nằm lệch lên trên thay vì canh giữa thẻ như layout v2 vẽ.
	 *
	 * `span 2` phủ cả hàng tiêu đề lẫn hàng nội dung. Mục thiếu nội dung thì
	 * hàng 2 là hàng ngầm rỗng, cao 0 — icon vẫn canh giữa đúng phần có chữ.
	 */
	.about-vision__icon {
		grid-row: 1 / span 2;
		margin-right: var(--sp-4);
		margin-bottom: 0;
	}

	.about-vision__title,
	.about-vision__content {
		grid-column: 2;
	}

	/* §07 chuyển sang cây NGANG từ 768px — khung cuộn riêng ở trên lo phần
	   tràn, trang không bao giờ cuộn ngang. */
	.about-org__level {
		flex-direction: row;
		gap: var(--sp-4);
		padding-left: 0;
	}

	.about-org__node-wrap {
		align-items: center;
	}

	.about-org__level--1 {
		flex-direction: column;
		align-items: center;
	}
}

/* =========================================================================
 * 13. ≥992px — sidebar dính
 * ====================================================================== */

@media (min-width: 992px) {

	.about {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: var(--sp-8);
	}

	.about__sidebar {
		order: 0;
		position: sticky;
		top: calc(var(--header-h) + var(--sp-4));   /* chiều cao header dính + khoảng thở */
		align-self: start;
	}

	.about__content {
		order: 0;
	}

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

	.about-section__title {
		font-size: var(--fs-h2);
	}

	/* --- Bố cục hai cột: TẤT CẢ bắt đầu từ đây, không sớm hơn --- */

	.about-intro {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		align-items: center;
	}

	/* PC: chữ trước, ảnh sau — đảo lại thứ tự của bản SP. */
	.about-intro__media {
		order: 0;
	}

	/*
	 * ĐÃ GỠ quy tắc 2 cột của `.about-commit` và `.about-team` — bố cục nay do
	 * `.split` (C-29) lo. Giữ lại là có HAI định nghĩa cho cùng một việc, và bản
	 * ở đây ghi đè `.split` đúng breakpoint này nên nhánh "thiếu ảnh" của
	 * `.split__content:only-child` sẽ không chạy — nội dung co còn nửa màn.
	 *
	 * ⚠️ Lần gỡ đó (986fd46) để SÓT dấu phẩy sau `.about-vision__grid`, nên
	 *    selector treo dính luôn vào `.about-fields` ngay dưới: §02 nhận
	 *    `repeat(3, …)` của §05 và hai thẻ Tầm nhìn / Sứ mệnh co còn 1/3 cột,
	 *    chừa trống hẳn 1/3 bên phải. CSS vẫn hợp lệ nên không có cảnh báo nào
	 *    — đúng loại lỗi chỉ ảnh chụp mới bắt được.
	 */
	.about-vision__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	/*
	 * ⚠️ Ba thẻ ISO xếp DỌC khi §09 ở bố cục 2 cột — layout v2 vẽ vậy.
	 *
	 * Quy tắc 3 cột bên dưới là của bản CŨ, khi §09 chiếm cả chiều ngang. Nay
	 * khối này chỉ còn nửa màn (~410px): nhồi 3 thẻ vào đó thì mỗi thẻ ~125px,
	 * "Mã tiêu chuẩn mẫu 4" vỡ thành 4 dòng — đo được trên ảnh chụp.
	 */
	.split .about-cert__badges {
		grid-template-columns: minmax(0, 1fr);
	}

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

	/*
	 * ⚠️ KHÔNG khai `grid-template-columns` ở đây — R-06-gioi-thieu F-02.
	 *
	 * §06 nay dùng `.split` (C-29). Khai lại 2 cột ở đây là ĐỊNH NGHĨA THỨ HAI
	 * cho cùng một việc, và vì nó cùng đặc hiệu mà đứng SAU nên nó thắng —
	 * kể cả trong nhánh `.split__content:only-child`. Hệ quả: khách xoá hết
	 * tiêu đề/mô tả/ảnh của box §06 thì dải số liệu co còn nửa màn, chừa một
	 * nửa trống. Chỉ ca RỖNG mới lộ, nên lượt đo thường không thấy.
	 *
	 * `align-items` là tinh chỉnh riêng hợp lệ, giữ lại — nhưng nay là
	 * `stretch`, không phải `start`.
	 *
	 * Bản trước canh theo đỉnh vì hai cột lệch chiều cao nhiều: thẻ số liệu
	 * (lưới 2×2) chỉ cao bằng nửa hộp navy. Nay thẻ số liệu xếp dọc từng hàng và
	 * `stretch` cho nó cao đúng bằng hộp navy, nên hai cột bằng nhau và không
	 * còn gì để canh đỉnh.
	 */
	.about-capacity {
		align-items: stretch;
	}

	/*
	 * ⚠️ `stretch` mới chỉ kéo Ô LƯỚI `.about-capacity__stats` cho cao bằng cột
	 *    phải. Thẻ số liệu bên trong nó — `<section>` rồi `<ul>` — vẫn cao theo
	 *    nội dung, nên nếu dừng ở đây thì viền thẻ chỉ bọc nửa trên và phần
	 *    stretch còn lại là khoảng trắng trơ.
	 *
	 *    Phải nối chiều cao xuống hết chuỗi: ô lưới → section → danh sách. Có
	 *    vậy `grid-auto-rows: 1fr` của danh sách (`components.css` §14) mới có
	 *    chiều cao thật để chia đều cho 4 hàng.
	 */
	.about-capacity__stats {
		display: flex;
	}

	.about-capacity__stats .stats-band--about {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	/*
	 * ⚠️ `margin-inline: 0` là bắt buộc, không phải dọn dẹp cho gọn.
	 *
	 *    `.stats-band__list` mang sẵn `margin: 0 auto` (nó kiêm luôn class
	 *    `.container`, cần tự canh giữa khi dải số liệu tràn nền ở trang chủ).
	 *    Nhưng khi cha thành flex container như ở đây, margin AUTO nuốt hết
	 *    khoảng trống và flex item co về vừa nội dung thay vì giãn — danh sách
	 *    teo còn ~230px rồi tự canh giữa thẻ, nên bốn hàng trông như bị thụt
	 *    vào giữa dù bản thân chúng đã canh trái đúng.
	 */
	.about-capacity__stats .stats-band__list {
		flex: 1;
		margin-inline: 0;
	}
}

/*
 * §08 dưới 992px: ẩn CỘT ẢNH, danh sách chiếm hết chiều ngang (bảng responsive
 * §4). Ảnh bắt tay ở đây là minh hoạ, không mang thông tin — giữ lại trên màn
 * hẹp chỉ tốn chiều cao cuộn.
 */
@media (max-width: 991px) {

	.about-commit__media {
		display: none;
	}
}

/*
 * Dải số liệu trong trang này nằm trong cột nội dung (hẹp hơn full-bleed của
 * trang chủ), nên KHÔNG dùng số cột cứng: `auto-fit` + sàn 150px giữ cho nhãn
 * dài không bao giờ bị bóp thành cột chữ dọc, ở mọi bề rộng cột.
 */
.stats-band--about .stats-band__list {
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

@media (min-width: 1200px) {

	.about {
		grid-template-columns: 280px minmax(0, 1fr);
	}

	/*
	 * ⚠️ Bốn badge một hàng chỉ từ 1200px, KHÔNG phải 992px.
	 *
	 * Đây là khổ mà layout v2 được vẽ (spec §26: desktop ≥1200) và cũng là khổ
	 * duy nhất đủ chỗ. Ở 992–1199 sidebar còn 240px nên cột nội dung chỉ ~680px:
	 * chia bốn ra 158px/thẻ, trừ padding + vòng icon thì phần chữ còn ~86px và
	 * "CHẤT LƯỢNG" lại gãy làm đôi. Dưới ngưỡng này giữ 2×2 — thẻ rộng gấp đôi,
	 * nhãn nào cũng nằm gọn một dòng.
	 */
	.about-badges {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* =========================================================================
 * 14. Nhảy neo không bị header dính che
 *
 * ⚠️ Ràng buộc spec file 5 §2: offset cuộn = chiều cao header dính + 24px.
 *    Sai offset thì bấm mục lục xong tiêu đề section nằm KHUẤT sau header —
 *    lỗi rất dễ thấy và là lỗi hay gặp nhất của mọi trang có mục lục.
 * ====================================================================== */

.about-section {
	scroll-margin-top: calc(var(--header-h) + var(--sp-6));
}

@media (max-width: 991px) {

	.about-section {
		scroll-margin-top: calc(var(--header-h) + 48px + var(--sp-4));   /* header + thanh mục lục */
	}
}