/* =============================================================================
   Khối "Chứng minh năng lực" — trang chủ
   -----------------------------------------------------------------------------
   Markup do shortcode [haliti_nang_luc] sinh ra, nằm ở
   haliti-core/modules/frontend/40-khoi-nang-luc.php

   Chỉ dùng biến từ tokens.css, không gõ thẳng mã màu — nhờ vậy khối tự đúng
   khi đặt trong bối cảnh nền tối (.ht-toi) sau này.

   Thiết kế: docs/superpowers/specs/2026-08-14-khoi-chung-minh-nang-luc-design.md
   ========================================================================== */

/*
 * ⚠️ BỀ RỘNG PHẢI KHỚP FLATSOME, ĐỪNG ĐỔI VỀ --ht-rong-toi-da.
 *
 * Bản đầu dùng `max-width: var(--ht-rong-toi-da)` (1200px) trong khi mọi
 * section khác của trang chủ dùng `.row` của Flatsome rộng 1363px. Đo trên
 * viewport 1425px: khối này bắt đầu ở mép 113px còn 8 khối kia ở 28–31px —
 * thụt vào 82px, mép trái không thẳng hàng với bất cứ thứ gì phía trên hay
 * dưới. Người dùng mô tả đúng cảm giác đó: "nhìn như một website lỗi".
 *
 * Token 1200px vẫn đúng cho trang dựng mới hoàn toàn, nhưng khối này sống
 * chung với bố cục Flatsome sẵn có nên phải theo bề rộng của chủ nhà.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * 16/08/2026 — CHỈNH TỪ 1370px XUỐNG 1343px.
 *
 * 1370px là bề rộng của `.row`, nhưng các khối lân cận không đặt nội dung ở
 * mép `.row` — chúng đặt trong `.col-inner` (thẻ trắng bo góc), mà `.col-inner`
 * bị `.row-small` thụt vào 13,5px mỗi bên: 1370 − 27 = 1343.
 *
 * Đo trên Chrome, viewport 2400px, trước khi sửa:
 *     khối năng lực / giải pháp   mép trái 506   rộng 1370
 *     5 thẻ sản phẩm + hero       mép trái 519   rộng 1343
 * Lệch 13px — dải số liệu và lưới dự án nhô ra bên trái so với mọi lưới sản
 * phẩm phía dưới.
 */

/*
 * ─────────────────────────────────────────────────────────────────────────
 * 16/08/2026 — ĐỔI TỪ DẢI TRÀN VIỀN SANG THẺ.
 *
 * Trước: <section> tô trắng và tràn hết chiều ngang màn hình, nội dung căn
 * giữa bên trong. Nhưng 5 khối sản phẩm phía dưới (Thương hiệu nổi bật, Mua
 * theo nhóm, New arrivals, Đang bán chạy, Kiến thức) lại là THẺ trắng bo góc
 * nổi trên nền xám — hai kiểu nền khác nhau trên cùng một trang.
 *
 * Sau: section trong suốt, phần trắng chuyển vào `__trong` cùng bo góc 8px.
 * Nền xám của `#main` (đặt trong trang-chu.css) lộ ra hai bên, khối này thành
 * một thẻ giống hệt các thẻ còn lại.
 *
 * Bề rộng giữ nguyên 1343px nên mép thẻ thẳng hàng tuyệt đối với `.col-inner`
 * của Flatsome — xem phần tính toán ngay bên trên.
 *
 * Padding 64px chuyển từ section vào trong thẻ. Nhờ vậy section không còn tự
 * quản khoảng thở nữa, và phải BỎ nó khỏi danh sách loại trừ trong
 * trang-chu.css để nhận margin 24px chung với mọi section khác.
 */

.ht-nang-luc {
	background: transparent;
	color: var(--ht-chu);
	padding-inline: 15px;
}

.ht-nang-luc__trong {
	/* 1343px, khai trong tokens.css. Ba khoi tu viet deu phai lay tu day —
	   go cung con so o tung file thi lan sau doi be rong phai nho sua bon cho. */
	max-width: var(--ht-rong-khoi);
	margin-inline: auto;
	background: var(--ht-nen);
	border-radius: var(--ht-bo-goc-the);
	/* Khai bao ro, khong dua vao reset toan cuc: max-width phai la be rong TONG
	   ke ca padding, neu khong the se thanh 1343+64 = 1407px va tho ra ngoai
	   cac the Flatsome. */
	box-sizing: border-box;
	/* 30px doc theo yeu cau 16/08/2026 (truoc la --ht-cach-8 = 64px, qua rong).
	   30 nam ngoai thang 4px cua tokens.css — bac gan nhat la 32px. Ghi thang so
	   o day thay vi them token moi vi day la mot ngoai le, khong phai bac moi.

	   20/08/2026 — CHIEU NGANG HA TU 32px (--ht-cach-6) XUONG 30px.
	   30 la con so UX Builder da dung cho 3 trong 5 khoi cua Flatsome. Keo ba
	   module tu viet theo builder thi doi it cho hon la nguoc lai. Nho vay ca
	   chin khoi trang chu dung chung mot mep trai. Xem chu thich day du o cuoi
	   trang-chu.css. */
	padding: 30px;
}

@media (max-width: 640px) {
	/* 20/08/2026 — 15px xuong 10px tren dien thoai.
	   Tren desktop moi the deu bi max-width chan lai roi can giua nen le ngoai
	   nay khong anh huong gi. Tren dien thoai khong con tran nao, nen 15px o day
	   dat the lech 5px so voi cac khoi Flatsome (chung lay 10px tu mang .row).
	   Do o khung nhin 400px: module mep 15, Flatsome mep 10. */
	.ht-nang-luc {
		padding-inline: 10px;
	}

	.ht-nang-luc__trong {
		padding: 30px var(--ht-cach-4);
	}
}

/* --- Tiêu đề ------------------------------------------------------------- */

/* ⚠️ CĂN TRÁI — xem chú thích cùng tên trong khoi-giai-phap.css. */
.ht-nang-luc__dau {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--ht-cach-4) var(--ht-cach-7);
	align-items: end;
	margin-bottom: var(--ht-cach-7);
	text-align: start;
}

.ht-nang-luc__h2 {
	font-family: var(--ht-font-tieu-de);
	font-size: var(--ht-co-h2);
	font-weight: var(--ht-dam-tieu-de);
	line-height: var(--ht-cao-dong-tieu-de);
	letter-spacing: var(--ht-gian-tieu-de);
	color: var(--ht-chu);
	margin: 0;
	text-wrap: balance;
}

.ht-nang-luc__phu {
	font-size: var(--ht-co-than);
	line-height: var(--ht-cao-dong);
	color: var(--ht-chu-mo);
	max-width: 56ch;
	margin: 0;
}

@media (max-width: 60rem) {
	.ht-nang-luc__dau {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		margin-bottom: var(--ht-cach-6);
	}
}

/* --- Dải số liệu --------------------------------------------------------- */

.ht-nang-luc__so-lieu {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ht-cach-5);
	list-style: none;
	margin: 0 0 var(--ht-cach-8);
	padding: 0;
}

/*
 * Vạch đỏ cạnh trái GIỮ LẠI ở đây, và chỉ ở đây.
 *
 * Đo trên trang thật: chín vạch đỏ 3px cạnh trái trên cùng một màn hình — bốn
 * ô số liệu này và năm tiêu đề mục của Flatsome. Lặp chín lần thì vạch không
 * còn là điểm nhấn mà thành hoa văn nền, và là dấu hiệu SaaS-2018 dễ nhận
 * nhất. Đã bỏ ở năm tiêu đề mục (trang-chu.css) vì ở đó cỡ chữ và độ đậm đã
 * đủ phân cấp. Giữ ở đây vì bốn con số cần một thứ phân tách chúng với nhau,
 * mà chúng không có tiêu đề riêng để làm việc đó.
 *
 * Căn trái, không căn giữa — cho thẳng hàng với đầu mục vừa chuyển sang trái.
 */
.ht-nang-luc__so {
	text-align: start;
	padding: var(--ht-cach-5) var(--ht-cach-4);
	border-inline-start: 3px solid var(--ht-nhan);
	background: var(--ht-nen-phu);
	border-radius: var(--ht-bo-goc);
}

.ht-nang-luc__so-con {
	display: block;
	font-family: var(--ht-font-tieu-de);
	font-size: 40px;
	font-weight: var(--ht-dam-tieu-de);
	line-height: 1.1;
	color: var(--ht-nhan);

	/* Chữ số dạng bảng: các số thẳng hàng nhau, không so le. */
	font-variant-numeric: tabular-nums;
}

.ht-nang-luc__so-nhan {
	display: block;
	margin-top: var(--ht-cach-2);
	font-size: var(--ht-co-nho);
	line-height: 1.4;
	color: var(--ht-chu-mo);
}

/* --- Thẻ dự án ----------------------------------------------------------- */

.ht-nang-luc__the-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ht-cach-5);
	list-style: none;
	margin: 0 0 var(--ht-cach-7);
	padding: 0;
}

.ht-nang-luc__the {
	display: flex;
	flex-direction: column;
	background: var(--ht-nen);
	border: 1px solid var(--ht-duong-vien);
	border-radius: var(--ht-bo-goc);
	overflow: hidden;
}

.ht-nang-luc__anh {
	/*
	 * Khoá tỷ lệ 3:2 ngay ở khung chứa, không phụ thuộc kích thước ảnh thật.
	 * Nhờ vậy ảnh sai tỷ lệ vẫn không phá bố cục, và ô giữ chỗ lúc chưa có ảnh
	 * cũng chiếm đúng chỗ — không có hiện tượng nhảy trang khi ảnh tải xong.
	 */
	aspect-ratio: 3 / 2;
	background: var(--ht-nen-phu);
	overflow: hidden;
}

.ht-nang-luc__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ht-nang-luc__img--trong {
	background:
		repeating-linear-gradient(
			45deg,
			var(--ht-nen-phu),
			var(--ht-nen-phu) 10px,
			var(--ht-duong-vien) 10px,
			var(--ht-duong-vien) 11px
		);
}

.ht-nang-luc__noi-dung {
	display: flex;
	flex-direction: column;
	gap: var(--ht-cach-2);
	padding: var(--ht-cach-5) var(--ht-cach-4);
}

.ht-nang-luc__khach {
	font-family: var(--ht-font-tieu-de);
	font-size: var(--ht-co-h3);
	font-weight: var(--ht-dam-tieu-de);
	line-height: var(--ht-cao-dong-tieu-de);
	color: var(--ht-chu);
	margin: 0;
}

.ht-nang-luc__quy-mo {
	margin: 0;
	font-size: var(--ht-co-nho);
	font-weight: var(--ht-dam-vua);
	color: var(--ht-nhan);
}

.ht-nang-luc__mo-ta {
	margin: 0;
	font-size: var(--ht-co-nho);
	line-height: var(--ht-cao-dong);
	color: var(--ht-chu-mo);
}

/* --- Nút ----------------------------------------------------------------- */

.ht-nang-luc__cta {
	text-align: center;
	margin: 0;
}

.ht-nang-luc__nut {
	display: inline-block;
	padding: var(--ht-cach-4) var(--ht-cach-7);
	background: var(--ht-nhan);
	color: var(--ht-chu-tren-nhan);
	font-weight: var(--ht-dam-vua);
	font-size: var(--ht-co-than);
	line-height: 1.2;
	border-radius: var(--ht-bo-goc);
	text-decoration: none;
}

.ht-nang-luc__nut:hover,
.ht-nang-luc__nut:focus-visible {
	background: var(--ht-nhan-hover);
	color: var(--ht-chu-tren-nhan);
}

.ht-nang-luc__nut::after {
	content: " →";
}

/* --- Máy tính bảng ------------------------------------------------------- */

@media (max-width: 1024px) {
	.ht-nang-luc__the-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- Điện thoại ---------------------------------------------------------
   53,5% lưu lượng là di động. Số liệu xếp 2×2; thẻ dự án cuộn ngang thay vì
   xếp dọc — bốn thẻ xếp dọc đẩy phần còn lại của trang chủ xuống quá sâu.
   ------------------------------------------------------------------------ */

@media (max-width: 640px) {
	.ht-nang-luc__h2 {
		font-size: 28px;
	}

	.ht-nang-luc__so-lieu {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--ht-cach-3);
	}

	.ht-nang-luc__so-con {
		font-size: 32px;
	}

	.ht-nang-luc__the-list {
		display: flex;
		gap: var(--ht-cach-4);
		overflow-x: auto;
		scroll-snap-type: x mandatory;

		/* Chừa lề phải để lộ mép thẻ kế tiếp — tín hiệu cho biết cuộn được. */
		padding-inline-end: var(--ht-cach-6);
		scrollbar-width: thin;
	}

	.ht-nang-luc__the {
		flex: 0 0 78%;
		scroll-snap-align: start;
	}
}

/* --- Tôn trọng lựa chọn giảm chuyển động --------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ht-nang-luc__the-list {
		scroll-behavior: auto;
	}
}