/* =============================================================================
   Khối "Haliti thi công những gì" — trang chủ, khối 2
   -----------------------------------------------------------------------------
   Markup do shortcode [haliti_giai_phap] sinh ra, nằm ở
   haliti-core/modules/frontend/42-khoi-giai-phap.php

   Chỉ dùng biến từ tokens.css, không gõ thẳng mã màu.
   ========================================================================== */

/*
 * ⚠️ BỀ RỘNG PHẢI KHỚP FLATSOME — 1343px, KHÔNG DÙNG --ht-rong-toi-da.
 *
 * Cùng lý do đã ghi trong khoi-nang-luc.css. Đặt token 1200px vào đây sẽ làm
 * khối thụt vào ~82px so với các khối trên dưới, mép trái không thẳng hàng với
 * bất cứ thứ gì — đúng lỗi đã phải sửa một lần ở khối năng lực.
 *
 * 1343px chứ không phải 1370px: các khối lân cận đặt nội dung 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 ngày 16/08/2026 — xem ghi chú đầy đủ trong
 * khoi-nang-luc.css.
 */

/*
 * 16/08/2026 — đổi từ dải tràn viền sang thẻ, cùng lý do và cùng cách làm với
 * .ht-nang-luc (xem chú thích dài trong khoi-nang-luc.css).
 */

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

.ht-giai-phap__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 xuong 30px cho khop mep trai chung
	   cua ca trang. Xem chu thich day du o cuoi trang-chu.css. */
	padding: 30px;
}

@media (max-width: 640px) {
	/* 20/08/2026 — 15px xuong 10px cho thang mep voi cac khoi Flatsome tren
	   dien thoai. Xem chu thich day du trong khoi-nang-luc.css. */
	.ht-giai-phap {
		padding-inline: 10px;
	}

	.ht-giai-phap__trong {
		padding: 30px var(--ht-cach-4);
	}
}

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

/*
 * ⚠️ CĂN TRÁI, KHÔNG CĂN GIỮA.
 *
 * Trang chủ chỉ được phá đối xứng bằng cách căn giữa ở HAI chỗ: hero (câu mở
 * đầu) và form tư vấn (câu kết). Toàn bộ phần thân kẹp giữa hai đầu đó căn
 * trái. Căn giữa thêm khối này là quay lại lỗi "căn giữa mọi thứ" — 11 khai
 * báo `text-align: center` trên bốn file, không còn trục lệch nào cho mắt bám.
 *
 * Đầu mục xếp tiêu đề và câu phụ thành hai cột trên màn rộng: tiêu đề chiếm
 * cột trái, câu phụ cột phải. Đây là hình thái diptych của macrostructure
 * Split Studio thu nhỏ ở cấp đầu mục.
 */
.ht-giai-phap__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-giai-phap__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-giai-phap__phu {
	font-size: var(--ht-co-than);
	line-height: var(--ht-cao-dong);
	color: var(--ht-chu-mo);
	max-width: 56ch;
	margin: 0;
}

/* Dưới 60rem đầu mục gộp một cột — câu phụ xuống dưới tiêu đề. */
@media (max-width: 60rem) {
	.ht-giai-phap__dau {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		margin-bottom: var(--ht-cach-6);
	}
}

/* --- Lưới thẻ ------------------------------------------------------------
   auto-fit chứ không phải repeat(5, 1fr): trang nào chưa xuất bản sẽ bị module
   loại khỏi danh sách, nên số thẻ thật sự có thể là 3, 4 hay 5 — auto-fit tự
   cân lại mà không phải sửa CSS.

   ⚠️ 190px CHỨ KHÔNG PHẢI 240px. ĐỪNG TĂNG LẠI.

   Với minmax(240px, …) và gap 24px, năm thẻ chỉ xếp đủ một hàng khi container
   rộng ≥ 5×240 + 4×24 = 1296px. Đo trên Chrome ở khung nhìn 1197px (kích thước
   laptop rất thường gặp): container còn ~1150px nên chỉ nhét được 4 thẻ, thẻ
   thứ năm rơi xuống hàng dưới đứng một mình, chừa ba ô trống — nhìn như trang
   bị lỗi.

   190px hạ ngưỡng xuống 5×190 + 96 = 1046px, đủ giữ một hàng cho gần hết dải
   laptop. Thẻ vẫn không bị bóp: `1fr` cho chúng giãn kín container (thực tế
   249px ở 1343px, 210px ở 1150px).
   ------------------------------------------------------------------------ */

/*
 * ⚠️ ĐÃ THỬ DIPTYCH XEN KẼ (17/08/2026) RỒI HOÀN NGUYÊN THEO YÊU CẦU.
 *
 * Bản thử: 5 hàng, mỗi hàng chia đôi màn hình, ảnh và chữ đổi bên luân phiên
 * (hình thái của macrostructure Split Studio). Chạy được và đo đạt — 5 hàng
 * đều 200px, khối gọn đi 710px — nhưng người dùng chọn quay lại lưới thẻ.
 *
 * Đánh đổi đã biết khi giữ lưới: khối này và khối năng lực ngay bên dưới có
 * cùng hình dạng thẻ (ảnh 3:2 → tiêu đề → mô tả), nên chín thẻ liền nhau đọc
 * ra như một khuôn lặp lại. Nếu sau này muốn tách hai khối mà vẫn giữ lưới,
 * đường ngắn nhất là đổi tỷ lệ ảnh hoặc bỏ ảnh ở một trong hai khối, không
 * phải quay lại diptych.
 */

.ht-giai-phap__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--ht-cach-5);
	list-style: none;
	margin: 0 0 var(--ht-cach-7);
	padding: 0;
}

.ht-giai-phap__the {
	display: flex;
}

/*
 * Cả thẻ là một liên kết. Dùng <a> bọc ngoài thay vì chỉ bọc tiêu đề: vùng bấm
 * lớn hơn nhiều trên di động, và không tạo hai liên kết cùng đích trong một thẻ
 * (trình đọc màn hình sẽ đọc trùng).
 */
.ht-giai-phap__lien-ket {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--ht-nen);
	border: 1px solid var(--ht-duong-vien);
	border-radius: var(--ht-bo-goc);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color var(--ht-vua) var(--ht-ra);
}

.ht-giai-phap__lien-ket:hover,
.ht-giai-phap__lien-ket:focus-visible {
	border-color: var(--ht-nhan);
	color: inherit;
}

/* Vòng focus hiện tức thì, không transition — người dùng bàn phím phải thấy
   ngay chứ không phải chờ hiệu ứng chạy xong. */
.ht-giai-phap__lien-ket:focus-visible {
	outline: 2px solid var(--ht-focus);
	outline-offset: 2px;
}

.ht-giai-phap__anh {
	display: block;

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

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

.ht-giai-phap__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-giai-phap__noi-dung {
	display: flex;
	flex-direction: column;
	gap: var(--ht-cach-2);
	padding: var(--ht-cach-5) var(--ht-cach-4);
}

.ht-giai-phap__ten {
	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);
}

.ht-giai-phap__mo-ta {
	font-size: var(--ht-co-nho);
	line-height: var(--ht-cao-dong);
	color: var(--ht-chu-mo);
}

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

.ht-giai-phap__cta {
	text-align: center;
	margin: 0;
}

.ht-giai-phap__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-giai-phap__nut:hover,
.ht-giai-phap__nut:focus-visible {
	background: var(--ht-nhan-hover);
	color: var(--ht-chu-tren-nhan);
}

.ht-giai-phap__nut::after {
	content: " →";
}

/* --- Điện thoại ---------------------------------------------------------
   53,5% lưu lượng là di động. Năm thẻ xếp dọc đẩy phần còn lại của trang chủ
   xuống quá sâu, nên cuộn ngang giống khối năng lực — giữ nhịp nhất quán giữa
   hai khối đứng liền nhau.
   ------------------------------------------------------------------------ */

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

	.ht-giai-phap__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-giai-phap__the {
		flex: 0 0 78%;
		scroll-snap-align: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ht-giai-phap__list {
		scroll-behavior: auto;
	}
}