/* ===========================================================================
 * TRANG CHỦ NGÀNH KHUÔN MẪU — các khối theo bố cục web mẫu
 *
 * Sáu khối, mỗi khối một shortcode (xem inc/home-sections.php):
 *   .ezk-sl     Slider đầu trang (tự chạy, có mũi tên + chấm)
 *   .ezk-about  Về công ty chúng tôi (2 tab)
 *   .ezk-dv     Dịch vụ của chúng tôi (lưới 4 ô)
 *   .ezk-sp     Sản phẩm (lấy thật từ WooCommerce)
 *   .ezk-dt     Đối tác
 *   .ezk-bg     Báo giá nhanh
 *
 * Tiền tố `ezk-` (khuôn) để KHÔNG đụng các class cũ `ez-` còn trong file này.
 *
 * Màu lấy từ design token ở đầu file --ez-green / --ez-green-dark / --ez-green-pale.
 * KHÔNG ghi mã màu trực tiếp ở đây, để sau này đổi tông chỉ sửa một chỗ.
 * =========================================================================== */

/* --- Khung chung --- */
.ezk-inner {
	max-width: 1200px;
	width: 95%;
	margin: 0 auto;
}

/*
 * ĐỆM DỌC CỦA MỘT KHỐI TRANG CHỦ: 46px -> 5px (06-10-2026 theo yêu cầu).
 *
 * Trước đây mỗi khối (slider, giới thiệu, dịch vụ, sản phẩm, báo giá, tin tức) cách nhau
 * 46px trên + 46px dưới = 92px giữa hai khối. Nay còn 5px nên các khối nằm SÁT NHAU.
 *
 * ⚠️ Muốn thoáng lại thì sửa số ở CẢ HAI chỗ: đây và khối `@media (max-width: 782px)`
 * phía dưới (chỗ đó cũng đang để 5px). Quên một chỗ thì máy tính khác điện thoại.
 *
 * Tiêu đề khối (`.ezk-head`) đã có `margin` riêng nên vẫn tách khỏi nội dung, không dính chữ.
 */
.ezk-sec {
	padding: 5px 0;
}

/*
 * LƯỚI AN TOÀN: bỏ gạch chân cho MỌI link trong các khối trang chủ.
 *
 * Vì sao cần `!important`: Astra sinh thêm CSS động từ Customizer nạp SAU stylesheet của
 * theme, và nó có thể đặt `text-decoration: underline` cho thẻ <a> với độ ưu tiên cao hơn.
 * Đã thử cách thường (không `!important`) ở `.ezk-sp-ten a` mà gạch chân VẪN hiện.
 *
 * Quy tắc này chỉ nhắm các khối `ezk-` của theme, KHÔNG đụng phần nội dung bài viết nên
 * link trong bài viết vẫn gạch chân bình thường (đúng như mong đợi).
 *
 * Khi rê chuột thì KHÔNG gạch chân nữa mà đổi màu — xem từng khối bên dưới.
 */
[class^="ezk-"] a,
[class*=" ezk-"] a {
	text-decoration: none !important;
}

/* --- Tiêu đề khối: chữ hoa + đường kẻ + hoạ tiết --- */
.ezk-head {
	margin: 0 0 28px;
	text-align: center;
}

.ezk-head-title {
	margin: 0;
	color: var(--ez-green-dark);
	font-family: var(--ez-font);
	font-size: 26px;
	font-weight: 800;
	line-height: 1.3;
	text-transform: uppercase;
}

.ezk-head-orn {
	display: block;
	width: 90px;
	height: 2px;
	margin: 12px auto 0;
	background: var(--ez-green);
	position: relative;
}

.ezk-head-orn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	transform: translate(-50%, -50%) rotate(45deg);
	background: var(--ez-green);
}

.ezk-head-sub {
	margin: 10px 0 0;
	color: #5a5a5a;
	font-size: 15px;
}

/* --- Nút --- */
.ezk-btn {
	display: inline-block;
	padding: 12px 26px;
	border: 0;
	border-radius: var(--ez-radius-sm);
	background: var(--ez-green);
	color: #fff;
	font-family: var(--ez-font);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.2;
	/* `!important`: xem ghi chú ở khối `.ezk-sp-ten a` phía dưới */
	text-decoration: none !important;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease;
}

.ezk-btn:hover,
.ezk-btn:focus {
	background: var(--ez-green-dark);
	color: #fff;
	text-decoration: none !important;
}

/* --- Tab --- */
.ezk-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
}

.ezk-tabs-center {
	justify-content: center;
	margin-bottom: 26px;
}

.ezk-tab {
	padding: 10px 20px;
	border: 1px solid var(--ez-green);
	border-radius: var(--ez-radius-sm);
	background: transparent;
	color: var(--ez-green-dark);
	font-family: var(--ez-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.ezk-tab.is-on,
.ezk-tab:hover {
	background: var(--ez-green);
	color: #fff;
}

.ezk-tab-pane > *:first-child {
	margin-top: 0;
}

.ezk-tab-pane > *:last-child {
	margin-bottom: 0;
}

/*
 * XOÁ KHOẢNG TRẮNG 60px GIỮA DẢI MENU VÀ SLIDER (06-10-2026).
 *
 * NGUYÊN NHÂN: Astra đặt `margin-top: 60px` cho `.content-area.primary` — đệm cho mọi
 * trang. Với trang thường thì hợp lý, nhưng trang chủ mở đầu bằng slider TRÀN VIỀN nên
 * 60px đó thành một dải trắng lửng giữa dải menu xanh và ảnh banner. Đã đo thật bằng cách
 * dò cây phần tử: `.ast-container tren=178`, `.content-area.primary margin-tren=60px`,
 * slider `tren=238` -> đúng 60px.
 *
 * Vì sao dùng `:has()`: chỉ xoá khi trong vùng nội dung THỰC SỰ có slider. Trang khác
 * không có slider thì vẫn giữ đệm 60px như Astra muốn.
 *
 * ⚠️ ĐỪNG viết selector con trực tiếp (`>`) ở đây. Cây thật của Astra là:
 *     .ast-container > .content-area.primary > main.site-main > .entry-content > .ezk-sl
 * tức giữa `.content-area` và `.entry-content` CÒN `main.site-main`. Bản đầu tôi viết
 * `:has( > .entry-content > .ezk-sl )` nên KHÔNG khớp và khoảng trắng vẫn còn — đã kiểm
 * chứng bằng cách thử 6 biến thể selector trong trình duyệt.
 *
 * `:has()` được Chrome, Edge, Safari và Firefox (từ 121) hỗ trợ; trình duyệt cũ không hiểu
 * thì bỏ qua quy tắc này và chỉ thấy lại đệm 60px — không vỡ giao diện.
 *
 * ⚠️ `!important` Ở ĐÂY LÀ CẦN THIẾT, không phải cho đẹp.
 * Đã kiểm chứng trong trình duyệt: quy tắc `:has()` này KHỚP (liệt kê được trong
 * `document.styleSheets`, `la.matches()` trả về true) nhưng `margin-top` tính ra VẪN là
 * 60px. Tức có một quy tắc khác của Astra thắng về độ ưu tiên. Quét toàn bộ stylesheet để
 * tìm nó không ra (0 quy tắc khớp), nên dùng `!important` cho gọn và chắc.
 * Phạm vi ảnh hưởng hẹp: CHỈ trang nào có slider mới bị đổi.
 */
.content-area.primary:has( .ezk-sl ) {
	margin-top: 0 !important;
}

/*
 * `.ast-container` cũng có `padding` hai bên; nếu bản Astra nào thêm cả padding trên thì
 * slider tràn viền sẽ hở tiếp. Đặt về 0 cho chắc — chỉ khi có slider.
 */
.ast-container:has( .ezk-sl ) {
	padding-top: 0 !important;
}

/* ===========================================================================
 * 1. SLIDER ĐẦU TRANG
 *
 * 06-10-2026: thay slider 3 ảnh (có chữ của theme) bằng ẢNH BANNER của công ty
 * (1600x600, tỷ lệ 2.67:1). Ảnh banner đã có sẵn logo và chữ "KHUÔN NHỰA - KHUÔN CHAI
 * - KHUÔN LINH KIỆN", nên các slide KHÔNG in lớp chữ `.ezk-sl-chu` nữa (ô tiêu đề/phụ đề
 * để trống trong cài đặt thì lớp đó tự không sinh ra). Để nguyên chữ của theme là chữ
 * chồng lên chữ trong ảnh.
 *
 * BỀ RỘNG + CHIỀU CAO — đã sửa 06-10-2026. Tóm tắt lịch sử:
 *   - `max-width: 1280px`  : bản đầu, ảnh bị thu nhỏ
 *   - `max-width: 1600px`  : nới ra nhưng VÔ NGHĨA vì cha `.ast-container` chặn ở 1300px
 *   - tràn hết bề ngang    : thử rồi BỎ — chủ shop chốt là slider nằm TRONG container
 *   - ĐANG DÙNG            : `max-width: 100%` + canh giữa, tức nằm gọn trong container
 *   - chiều cao            : từ "ghim cứng số px" (gây chừa khoảng trống trên/dưới) đổi sang
 *                            `aspect-ratio` khớp tỷ lệ ảnh -> ảnh luôn kín khung
 *
 * Ảnh banner thứ hai (965x250, tỷ lệ 3.86:1) ngang hơn khung nên vẫn chừa viền trên/dưới —
 * đó là bản chất tỷ lệ ảnh, không phải lỗi.
 *
 * CHÚ Ý khi sửa: `[class]` ở đầu selector để tăng độ ưu tiên, tránh bị CSS của Astra
 * ghi đè lên các thẻ con. Đã gặp lỗi này với `.ezk-hero` trước đây.
 * =========================================================================== */

.ezk-sl[class] {
	position: relative;
	overflow: hidden;
	/*
	 * NẰM TRONG CONTAINER (06-10-2026 — chủ shop chốt lại).
	 *
	 * Đã thử cho tràn ra hết bề ngang màn hình bằng lề âm + `100vw`, nhưng chủ shop xem rồi
	 * yêu cầu trả về trong container. Nên bỏ hẳn lề âm và `width: 100vw`.
	 *
	 * `max-width: 100%` nghĩa là "không rộng hơn khung cha" — khung cha là `.ast-container`
	 * của Astra (`max-width: 1300px` + đệm 20px hai bên) nên slider được ~1260px ở màn hình
	 * rộng. Không đặt số cứng ở đây: đặt số lớn hơn cha thì vô nghĩa, đặt số nhỏ hơn thì tự
	 * bóp mình lại khi cha đã hẹp.
	 *
	 * `margin: auto` để canh giữa trong trường hợp cha rộng hơn (không xảy ra với Astra hiện
	 * tại, nhưng để cho chắc khi đổi theme).
	 */
	width: auto;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	background: #eef4ec;
	/*
	 * CHIỀU CAO BÁM THEO BỀ RỘNG — đây là chỗ sửa lỗi "có cái gì ở trên/dưới".
	 *
	 * TRƯỚC: chiều cao ghim cứng (biến `--ezk-sl-cao` = 600px) trong khi ảnh là
	 * `object-fit: contain` nên co theo ĐÚNG bề rộng khung. Hai thứ lệch nhau là chừa
	 * khoảng trống trên/dưới, toàn là nền mờ — nhìn như slider bị hụt.
	 * Ví dụ ở màn 1400px: khung rộng 1378px -> ảnh chỉ vẽ được 1378/2.667 = 517px, mà khung
	 * vẫn cao 600px -> chừa 41px trên + 41px dưới.
	 *
	 * NAY: đặt tỷ lệ khung = 1600/600, ĐÚNG bằng ảnh banner, nên khung luôn cao bằng
	 * 600/1600 bề rộng => ảnh LUÔN kín khung, hết khoảng trống ở mọi bề rộng màn hình.
	 * Đo thật sau khi sửa: mọi cỡ màn hình đều ra "khung cao hơn ảnh: 0px".
	 *
	 * ⚠️ ĐỪNG viết `1600 / var(--ezk-sl-cao, 600)`.
	 * Biến đó mang đơn vị (`600px`, do PHP in `--ezk-sl-cao:600px`), mà `aspect-ratio` chỉ
	 * nhận số hoặc phân số — `1600 / 600px` là phép chia SAI KIỂU nên trình duyệt loại bỏ
	 * TOÀN BỘ khai báo (đã đo: `getComputedStyle().aspectRatio` trả về `auto`). Muốn dùng
	 * biến thì PHP phải in số trần, không kèm `px`.
	 *
	 * Đánh đổi: ô "Slider – chiều cao trên máy tính" trong cài đặt nay KHÔNG còn điều khiển
	 * chiều cao nữa (khung ăn theo tỷ lệ ảnh để không bao giờ hụt). Muốn khung thấp hơn ảnh
	 * thì sửa thẳng các `aspect-ratio` trong file này — 3 mốc: PC, ≤1100px, ≤782px.
	 */
	aspect-ratio: 1600 / 600;
}

/*
 * Màn hình hẹp: cho khung THẤP HƠN tỷ lệ ảnh.
 *
 * Ở bản PC, khung cao đúng bằng ảnh (aspect-ratio 1600/600) nên ảnh kín khung, hết khoảng
 * trống — đó là điều chủ shop yêu cầu. Nhưng trên điện thoại, giữ đúng tỷ lệ đó thì slider
 * cao 9/16 bề rộng màn hình; ở máy 390px là 219px, vẫn ổn, nhưng ở máy tính bảng 800px thì
 * thành 450px — chiếm gần hết màn hình. Nên từ 1100px trở xuống hạ khung xuống thấp hơn
 * một chút; khi đó ảnh (contain) sẽ chừa viền trên/dưới một ít, và viền đó là nền mờ nên
 * nhìn vẫn liền mạch.
 *
 * ⚠️ `!important` Ở ĐÂY LÀ BẮT BUỘC, không phải cho đẹp.
 * PHP in biến này thẳng vào thẻ dưới dạng inline style:
 *     <section class="ezk-sl" style="--ezk-sl-cao:600px">
 * Inline style luôn thắng CSS trong file. Đã đo thật bằng Chrome trước đây: ở cửa sổ 512px,
 * media query khớp (`matchMedia` trả về true) nhưng chiều cao tính ra vẫn là 600px.
 *
 * Cách khác là để PHP đừng in inline style khi màn hình nhỏ, nhưng phải biết bề rộng màn
 * hình ở phía máy chủ — không làm được. Nên dùng `!important`.
 */
@media (max-width: 1100px) {
	.ezk-sl[class] {
		aspect-ratio: 1600 / 480 !important;
	}
}

/*
 * TRACK — cao bằng đúng khung, KHÔNG dùng `var(--ezk-sl-cao)` nữa.
 *
 * Chiều cao nay do `aspect-ratio` của `.ezk-sl` quyết định (xem ghi chú ở đó). Biến
 * `--ezk-sl-cao` giờ chỉ còn là TỶ LỆ (600 -> 600/1600), không còn là số pixel, nên nếu
 * để `height: var(--ezk-sl-cao)` ở đây thì track sẽ cao 600px và lại chừa khoảng trống.
 *
 * PHP vẫn in `style="--ezk-sl-cao:600px"`; giá trị đó được `aspect-ratio` đọc bằng
 * `var()` nên vẫn dùng được — không cần sửa PHP.
 */
.ezk-sl-track[class] {
	display: flex;
	height: 100%;
	transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.ezk-sl-slide[class] {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/*
 * ẢNH TRONG SLIDE — in 2 lớp.
 *
 *   .ezk-sl-nen  nền mờ, lấp kín khung (phòng khi ảnh không đủ rộng)
 *   .ezk-sl-anh  ảnh thật, `contain` nên hiện TRỌN VẸN, không cắt chữ
 *
 * Vì sao cần: các banner có tỷ lệ khác nhau (2.67:1 và 3.86:1) mà khung chỉ có một tỷ lệ.
 * Dùng `cover` thì ảnh lệch tỷ lệ bị cắt hai bên — mà chữ nằm sát hai bên.
 *
 * `position: relative` + `z-index` để ảnh thật luôn nằm TRÊN lớp nền mờ.
 */
.ezk-sl-nen[class] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Phóng to rồi làm mờ để không thấy vệt nối ở mép */
	transform: scale(1.12);
	filter: blur(18px) saturate(1.1);
	opacity: 0.6;
	z-index: 1;
}

.ezk-sl-anh[class] {
	position: relative;
	width: 100%;
	height: 100%;
	/*
	 * `contain` = hiện TRỌN ảnh, phần thừa để nền mờ lộ ra.
	 * KHÔNG đổi thành `cover`: sẽ cắt mất chữ ở hai bên banner.
	 */
	object-fit: contain;
	display: block;
	z-index: 2;
}

/*
 * Hiệu ứng "ảnh chạy chậm" (Ken Burns) đã BỎ.
 *
 * Trước đây `.ezk-sl-slide.is-on img { transform: scale(1.1) }` làm ảnh phóng to dần khi
 * slide hiện. Với ảnh banner CÓ CHỮ thì hiệu ứng đó làm chữ trôi và mờ — không hợp.
 * Nay ảnh đứng yên, chỉ slide trượt.
 */

/* --- Lớp chữ --- */
.ezk-sl-chu[class] {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	background: linear-gradient(
		100deg,
		rgba(18, 26, 15, 0.74) 0%,
		rgba(18, 26, 15, 0.52) 42%,
		rgba(18, 26, 15, 0.12) 100%
	);
}

.ezk-sl-hop[class] {
	max-width: 1200px;
	width: 95%;
	margin: 0 auto;
	padding: 20px 0;
}

.ezk-sl-tieude[class] {
	margin: 0 0 12px;
	max-width: 760px;
	color: #fff;
	font-family: var(--ez-font);
	font-size: 38px;
	font-weight: 800;
	line-height: 1.25;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.ezk-sl-phude[class] {
	margin: 0 0 22px;
	max-width: 640px;
	color: #e9efe6;
	font-family: var(--ez-font);
	font-size: 17px;
	line-height: 1.65;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.ezk-sl-nut[class] {
	background: var(--ez-green);
}

.ezk-sl-nut[class]:hover,
.ezk-sl-nut[class]:focus {
	background: #fff;
	color: var(--ez-green-dark);
}

/* Hiệu ứng chữ trồi lên ở slide đang hiện */
.ezk-sl-slide .ezk-sl-tieude,
.ezk-sl-slide .ezk-sl-phude,
.ezk-sl-slide .ezk-sl-nut {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.ezk-sl-slide.is-on .ezk-sl-tieude {
	opacity: 1;
	transform: none;
	transition-delay: 0.15s;
}

.ezk-sl-slide.is-on .ezk-sl-phude {
	opacity: 1;
	transform: none;
	transition-delay: 0.28s;
}

.ezk-sl-slide.is-on .ezk-sl-nut {
	opacity: 1;
	transform: none;
	transition-delay: 0.4s;
}

/* --- Mũi tên --- */
.ezk-sl-muiten[class] {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
	font-family: var(--ez-font);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: background 0.22s ease, opacity 0.22s ease, color 0.22s ease;
}

.ezk-sl:hover .ezk-sl-muiten[class],
.ezk-sl-muiten[class]:focus {
	opacity: 1;
}

.ezk-sl-muiten[class]:hover,
.ezk-sl-muiten[class]:focus {
	background: var(--ez-green);
	color: #fff;
}

.ezk-sl-truoc[class] {
	left: 18px;
}

.ezk-sl-sau[class] {
	right: 18px;
}

.ezk-sl-muiten[class] span {
	display: block;
	margin-top: -4px;
}

/* --- Chấm chọn slide --- */
.ezk-sl-cham[class] {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	display: flex;
	justify-content: center;
	gap: 9px;
}

.ezk-sl-cham-nut[class] {
	width: 11px;
	height: 11px;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.75);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background 0.22s ease, transform 0.22s ease;
}

.ezk-sl-cham-nut[class]:hover {
	transform: scale(1.2);
}

.ezk-sl-cham-nut.is-on {
	background: #fff;
	border-color: #fff;
}

/* Người dùng bật "giảm chuyển động" -> tắt hết hiệu ứng chuyển động */
@media (prefers-reduced-motion: reduce) {
	.ezk-sl-track[class],
	.ezk-sl-slide .ezk-sl-tieude,
	.ezk-sl-slide .ezk-sl-phude,
	.ezk-sl-slide .ezk-sl-nut,
	.ezk-sl-muiten[class],
	.ezk-sl-cham-nut[class] {
		transition: none;
	}

	.ezk-sl-slide .ezk-sl-tieude,
	.ezk-sl-slide .ezk-sl-phude,
	.ezk-sl-slide .ezk-sl-nut {
		opacity: 1;
		transform: none;
	}
}

/* ===========================================================================
 * 2. VỀ CÔNG TY CHÚNG TÔI
 * =========================================================================== */

.ezk-about-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.ezk-about-text {
	font-size: 15px;
	line-height: 1.85;
	color: #3a3a3a;
}

.ezk-about-text p {
	margin: 0 0 14px;
}

.ezk-about-text .ezk-btn {
	margin-top: 8px;
}

/*
 * ẢNH KHỐI "VỀ CÔNG TY CHÚNG TÔI" — THU NHỎ + HOVER (06-10-2026 theo yêu cầu).
 *
 * THU NHỎ: trước đây ảnh giãn hết cột (`width: 100%`) nên chiếm trọn nửa phải khối, to hơn
 * hẳn phần chữ bên trái. Nay cho rộng 82% và `margin: 0 auto` để nằm giữa cột, nhìn cân với
 * khối chữ. Đổi 82% thành số khác nếu muốn to/nhỏ hơn.
 *
 * HOVER: nâng ảnh lên 5px + đổ bóng mềm — cùng kiểu với ô dịch vụ và ô sản phẩm nên cả trang
 * nhất quán. KHÔNG dùng `transform: scale()` trên chính thẻ <img> vì ảnh có `border-radius`,
 * phóng to sẽ tràn khỏi bo góc; nâng cả khối thì bo góc vẫn nguyên.
 */
.ezk-about-img {
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.ezk-about-img img {
	width: 82%;
	height: auto;
	display: block;
	margin: 0 auto;
	border-radius: var(--ez-radius);
}

.ezk-about-img:hover,
.ezk-about-img:focus-within {
	transform: translateY(-5px);
	box-shadow: 0 16px 34px -14px rgba(20, 28, 18, 0.4);
}

/* ===========================================================================
 * 3. DỊCH VỤ CỦA CHÚNG TÔI
 * =========================================================================== */

.ezk-dv {
	background: #f5f9f4;
}

/*
 * 4 ô -> 4 cột trên màn hình rộng (06-10-2026).
 *
 * TRƯỚC: 6 ô xếp 3 cột (2 hàng). NAY còn 4 ô nên cho 4 cột — cả 4 danh mục nằm gọn
 * trên MỘT hàng, nhìn ra ngay 4 nhóm sản phẩm. Xuống ≤1100px tự về 2 cột, ≤782px 1 cột
 * (xem 2 khối @media ở cuối file).
 */
.ezk-dv-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}

.ezk-dv-o {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--ez-radius);
	background: #fff;
	box-shadow: 0 2px 10px rgba(31, 35, 41, 0.06);
	text-decoration: none !important;
	aspect-ratio: 4 / 3;
}

.ezk-dv-o img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s ease;
}

.ezk-dv-o:hover img {
	transform: scale(1.05);
}

/* Nhãn phủ trên đáy ảnh */
.ezk-dv-nhan {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 12px 14px;
	background: linear-gradient(to top, rgba(20, 28, 18, 0.86), rgba(20, 28, 18, 0));
	color: #fff;
	font-family: var(--ez-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	text-transform: uppercase;
	/*
	 * CĂN GIỮA CHỮ (06-10-2026 theo yêu cầu).
	 *
	 * Trước đây thiếu dòng này nên chữ ăn theo `text-align` mặc định (trái) và dồn về mép
	 * trái của ô, trong khi ảnh thì tràn cả ô — nhìn lệch.
	 */
	text-align: center;
}

/* Mô tả: hiện khi rê chuột (trên điện thoại luôn hiện mờ phía trên nhãn) */
.ezk-dv-mo {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 46px 14px 12px;
	background: linear-gradient(to top, rgba(20, 28, 18, 0.92), rgba(20, 28, 18, 0));
	color: #e9efe6;
	font-size: 13.5px;
	line-height: 1.55;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.ezk-dv-o:hover .ezk-dv-mo,
.ezk-dv-o:focus .ezk-dv-mo {
	opacity: 1;
	transform: none;
}

.ezk-dv-o:hover .ezk-dv-nhan,
.ezk-dv-o:focus .ezk-dv-nhan {
	opacity: 0;
}

/* Ô không có ảnh: nền xanh, chữ trắng */
.ezk-dv-o:not(:has(img)) {
	background: var(--ez-green);
}

/* ===========================================================================
 * 4. SẢN PHẨM — lấy thật từ WooCommerce
 *
 * Thay khối "CÔNG TRÌNH THI CÔNG" cũ (3 tab ảnh tĩnh, bấm vào không đi đâu).
 * Thẻ sản phẩm: ảnh · tên · danh mục · giá · nút. Bấm vào đâu cũng sang trang sản phẩm.
 *
 * ---------------------------------------------------------------------------
 * VÌ SAO SELECTOR VIẾT DÀI (`.ezk-sp .ezk-sp-than .ezk-sp-nut`)
 * ---------------------------------------------------------------------------
 * Astra sinh CSS ĐỘNG từ Customizer và nạp SAU stylesheet của theme. Nó có quy tắc:
 *
 *   button, .ast-button, .button, input[type="button"], input[type="submit"],
 *   a:where(.wp-block-button__link) { border-color: var(--ast-global-color-0);
 *                                     background-color: var(--ast-global-color-0); }
 *
 * mà `--ast-global-color-0` mặc định là XANH DƯƠNG #046bd2. Quy tắc đó có độ ưu tiên
 * (0,3,0) — CAO HƠN class đơn `.ezk-sp-nut` (0,1,0) của mình, nên nút bị nhuộm xanh và
 * bỏ hết viền. Cách sửa gọn nhất là DÙNG SELECTOR MẠNH HƠN (3 class = 0,3,0) chứ không
 * phải rải `!important` khắp nơi.
 *
 * Nếu sau này đổi cấu trúc HTML của thẻ sản phẩm thì PHẢI sửa cả các selector này, không
 * thì nút lại bị Astra nhuộm xanh.
 *
 * ---------------------------------------------------------------------------
 * HIỆU ỨNG
 * ---------------------------------------------------------------------------
 *   - Thẻ nâng lên 6px + đổ bóng khi rê chuột
 *   - Ảnh phóng nhẹ 1.06 lần
 *   - Lớp phủ xanh mờ dần hiện ra trên ảnh
 *   - Viền trên của thẻ đổi sang màu xanh rêu
 *   - Tất cả tắt khi người dùng bật "giảm chuyển động" trong hệ điều hành
 * =========================================================================== */

.ezk-sp {
	background: #f5f9f4;
}

.ezk-sp-grid {
	display: grid;
	/*
	 * `align-items: stretch` (mặc định, ghi ra cho rõ): mọi thẻ trong cùng một HÀNG cao
	 * bằng nhau. Kết hợp với `.ezk-sp-o` (flex column) và `.ezk-sp-than` (flex: 1) thì
	 * phần chữ giãn hết chiều cao còn lại, nút `margin-top: auto` luôn nằm sát đáy.
	 */
	align-items: stretch;
	gap: 22px;
}

.ezk-sp-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ezk-sp-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ezk-sp-c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ezk-sp-c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ezk-sp-c6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* --- Thẻ --- */
.ezk-sp-o {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ez-line);
	border-top: 3px solid var(--ez-line);
	border-radius: var(--ez-radius);
	background: #fff;
	overflow: hidden;
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-top-color 0.28s ease;
}

.ezk-sp-o:hover,
.ezk-sp-o:focus-within {
	transform: translateY(-6px);
	border-top-color: var(--ez-green);
	box-shadow: 0 14px 30px rgba(31, 35, 41, 0.13);
}

/* --- Ảnh --- */
.ezk-sp-anh {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--ez-green-pale);
	/* KHUNG VUÔNG 1:1 (đổi 06-10-2026 theo yêu cầu) — trước đây là 4:3.
	 * Đổi cùng lúc với lưới sản phẩm ngoài trang danh mục (ez-shop.css) cho hai chỗ khớp nhau.
	 * Bản cũ: `backup-truoc-khi-anh-san-pham-vuong\ez-home.css`. */
	aspect-ratio: 1 / 1;
}

.ezk-sp-anh img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s ease;
}

.ezk-sp-o:hover .ezk-sp-anh img,
.ezk-sp-o:focus-within .ezk-sp-anh img {
	transform: scale(1.06);
}

/* Lớp phủ xanh mờ dần hiện ra khi rê chuột */
.ezk-sp-phu {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(2, 89, 8, 0.45), rgba(2, 89, 8, 0));
	opacity: 0;
	transition: opacity 0.28s ease;
	pointer-events: none;
}

.ezk-sp-o:hover .ezk-sp-phu,
.ezk-sp-o:focus-within .ezk-sp-phu {
	opacity: 1;
}

/* --- Phần chữ --- */
.ezk-sp .ezk-sp-than {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 6px;
	padding: 16px 16px 18px;
	/* TÊN căn giữa (xem `.ezk-sp-ten` bên dưới, đổi 06-10-2026); phần chữ còn lại vẫn căn
	 * trái cho dễ đọc, riêng NÚT tự căn giữa bằng `margin: auto`. */
	text-align: left;
}

/*
 * Link trong thẻ: bỏ gạch chân.
 *
 * `.ezk-sp-o a` (2 class) thắng `a,a:focus,a:hover,a:visited` của Astra (0,3,1 ở dạng
 * pseudo-class) nhờ đứng sau và cùng nhóm. Vẫn thêm `!important` cho chắc vì gạch chân
 * là lỗi thấy được, khó chịu với người dùng.
 */
.ezk-sp .ezk-sp-o a,
.ezk-sp .ezk-sp-ten a,
.ezk-sp .ezk-sp-dm a {
	text-decoration: none !important;
}

.ezk-sp .ezk-sp-ten {
	/*
	 * CHIỀU CAO CỐ ĐỊNH = 2 DÒNG, để mọi thẻ cao bằng nhau.
	 *
	 * Vấn đề: tên sản phẩm dài ngắn khác nhau. Tên 2 dòng làm thẻ cao hơn tên 1 dòng,
	 * nên các nút "Liên hệ báo giá" không thẳng hàng, nhìn so le.
	 *
	 * Cách làm: chừa sẵn chỗ cho 2 dòng (2 × 1.45 = 2.9em). Tên 1 dòng thì thừa chỗ
	 * nhưng KHÔNG co lại -> mọi thẻ cao bằng nhau, nút luôn thẳng hàng.
	 *
	 * `-webkit-line-clamp` cắt tên quá 2 dòng thành "…" (tránh tên dài 3-4 dòng phá bố cục).
	 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.9em;
	margin: 0;
	font-family: var(--ez-font);
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.45;
	/* Viết hoa chữ đầu mỗi từ — xem ghi chú ở `ez-shop.css`, khối tiêu đề thẻ sản phẩm. */
	text-transform: capitalize;
	/* CĂN GIỮA TÊN (đổi 06-10-2026 theo yêu cầu) — khớp với lưới sản phẩm ở trang danh mục.
	 * Khung cha `.ezk-sp-than` vẫn `text-align: left`; riêng tên ghi đè về giữa. */
	text-align: center;
}

.ezk-sp .ezk-sp-ten a {
	color: #222;
}

.ezk-sp .ezk-sp-ten a:hover,
.ezk-sp .ezk-sp-ten a:focus {
	color: var(--ez-green-dark);
}

.ezk-sp .ezk-sp-dm {
	margin: 0;
	color: #7a7a7a;
	font-size: 12.5px;
	line-height: 1.5;
}

.ezk-sp .ezk-sp-dm a {
	color: inherit;
}

.ezk-sp .ezk-sp-gia {
	margin: 0;
	color: var(--ez-red);
	font-size: 16px;
	font-weight: 700;
}

/*
 * NÚT "Liên hệ báo giá" — nhỏ gọn, chữ CĂN GIỮA, luôn nằm SÁT ĐÁY thẻ.
 *
 * Selector 3 class (0,3,0) để thắng quy tắc `button, .button, …` của Astra (xem ghi chú
 * ở đầu khối 4).
 *
 * BỐ CỤC:
 *   `display: table` + `width: fit-content`  -> nút co theo chữ, không kéo hết bề ngang
 *   `margin-left/right: auto`                -> NẰM GIỮA
 *   `margin-top: auto`                       -> bị đẩy xuống ĐÁY (khối cha là flex column)
 *
 * CHÚ Ý: KHÔNG viết gộp `margin: 10px auto 0` — viết gộp là `margin-top` thành 10px và
 * MẤT tác dụng đẩy xuống đáy, các nút lại so le. Phải tách `margin-top` riêng.
 */
/*
 * MÀU NÚT TRÊN LƯỚI SẢN PHẨM TRANG CHỦ — cho GIỐNG nút ở trang danh mục (06-10-2026).
 *
 * TRƯỚC: nền đặc `--ez-quote-bg` (#015c05), chữ trắng, viền cùng màu nền.
 * NAY  : nền TRẮNG, viền `--ez-quote-bg` 1px, chữ `--ez-quote-bg` — đúng kiểu chủ shop
 *        đã chọn cho nút cùng tên ở lưới sản phẩm trang danh mục (xem `ez-shop.css`,
 *        khối `#main ul.products li.product .button`). Hai trang giờ nhìn giống nhau.
 *
 * Tương phản chữ xanh #015c05 trên nền trắng = 8.29:1 (chuẩn AA cần 4.5:1) — đọc tốt.
 *
 * ⚠️ PHẢI ghi đủ `border: 1px solid ...`, KHÔNG chỉ `border-color`: không rule nào đặt ĐỘ DÀY
 * viền cho nút này nên viền = 0px, chỉ đổi màu viền là không thấy viền nào.
 *
 * Biến `--ez-quote-bg` khai báo ở `:root` trong ez-shop.css (file đó nạp TRƯỚC file này).
 * Đổi màu thì sửa 1 chỗ: `:root` của ez-shop.css.
 */
.ezk-sp .ezk-sp-than .ezk-sp-nut {
	display: table;
	width: fit-content;
	max-width: 100%;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding: 8px 20px;
	border: 1px solid var(--ez-quote-bg);
	border-radius: var(--ez-radius-sm);
	background: #fff;
	background-color: #fff;
	color: var(--ez-quote-bg);
	font-family: var(--ez-font);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	text-transform: uppercase;
	box-shadow: none;
	transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.ezk-sp .ezk-sp-than .ezk-sp-nut:hover,
.ezk-sp .ezk-sp-than .ezk-sp-nut:focus {
	background: var(--ez-green-dark);
	background-color: var(--ez-green-dark);
	border-color: var(--ez-green-dark);
	color: #fff;
	text-decoration: none !important;
}

.ezk-sp-xem {
	margin: 30px 0 0;
	text-align: center;
}

/* Người dùng bật "giảm chuyển động" -> tắt hết hiệu ứng */
@media (prefers-reduced-motion: reduce) {
	.ezk-sp-o,
	.ezk-sp-anh img,
	.ezk-sp-phu,
	.ezk-sp-nut,
	.ezk-about-img {
		transition: none;
	}

	.ezk-about-img:hover,
	.ezk-about-img:focus-within {
		transform: none;
	}

	.ezk-sp-o:hover,
	.ezk-sp-o:focus-within {
		transform: none;
	}

	.ezk-sp-o:hover .ezk-sp-anh img,
	.ezk-sp-o:focus-within .ezk-sp-anh img {
		transform: none;
	}
}

/* ===========================================================================
 * 5. ĐỐI TÁC
 * =========================================================================== */

.ezk-dt {
	padding-top: 10px;
}

.ezk-dt-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 18px;
	align-items: center;
}

.ezk-dt-o {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	border: 1px solid var(--ez-line);
	border-radius: var(--ez-radius-sm);
	background: #fff;
	min-height: 76px;
}

.ezk-dt-o img {
	max-width: 100%;
	max-height: 56px;
	width: auto;
	height: auto;
	display: block;
	filter: grayscale(1);
	opacity: 0.8;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.ezk-dt-o:hover img {
	filter: none;
	opacity: 1;
}

/* ===========================================================================
 * 6. BÁO GIÁ NHANH — thiết kế lại 06-10-2026
 *
 * TRƯỚC: một khối xanh phẳng `background: var(--ez-green)`, không gradient, không hiệu ứng.
 * Chủ shop nhận xét "quá xấu, không wow gì". Bản này thêm chiều sâu nhưng KHÔNG dùng ảnh,
 * KHÔNG dùng JS — chỉ CSS, nên không sinh file mới và không ảnh hưởng tốc độ tải.
 *
 * BA LỚP TẠO CHIỀU SÂU (đọc trước khi sửa):
 *   1. Nền gradient chéo đậm dần về góc dưới-phải, thêm 2 vệt sáng hình elip ở góc trên.
 *   2. `.ezk-bg-hop::before` — hai vệt sáng mờ (radial-gradient) đặt ở hai góc, `z-index: 0`.
 *   3. `.ezk-bg-hop::after`  — vệt sáng chéo chạy qua khi rê chuột.
 *
 * ⚠️ `overflow: hidden` là BẮT BUỘC: hai lớp ::before/::after có `inset` âm và `transform`
 * phóng to, thiếu nó là chúng tràn ra ngoài khối bo góc.
 *
 * ⚠️ Nội dung phải có `position: relative` + `z-index` để nằm TRÊN hai lớp trang trí. Thiếu
 * là vệt sáng phủ lên chữ.
 *
 * Màu chữ giữ trắng trên xanh đậm — tương phản trên #0b4a0e khoảng 10:1, thừa chuẩn AA.
 * =========================================================================== */

/*
 * ĐỆM DƯỚI KHỐI BÁO GIÁ: 56px -> 10px (06-10-2026 theo yêu cầu).
 *
 * Ô này chỉ đặt đệm DƯỚI (không đặt đệm trên) vì khối báo giá nằm sát khối trên, phần
 * khoảng thở phía trên đã do `.ezk-sec` và `margin` của tiêu đề lo.
 *
 * Lưu ý: khối báo giá giờ có 2 dạng — dạng CHỮ (`.ezk-bg-hop`) và dạng ẢNH (`.ezk-bg--anh`).
 * Đệm này áp cho cả hai vì cùng nằm trong `.ezk-sec.ezk-bg`.
 */
.ezk-bg {
	padding-bottom: 10px;
}

.ezk-bg-hop {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding: 42px 46px;
	border-radius: 20px;
	background:
		/* Vệt sáng mờ ở góc trên-trái */
		radial-gradient( 120% 180% at 12% 0%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 55% ),
		/* Quầng sáng xanh non ở góc dưới-phải */
		radial-gradient( 90% 140% at 100% 100%, rgba(122, 213, 147, 0.22) 0%, rgba(122, 213, 147, 0) 60% ),
		/* Nền chính: chéo, đậm dần về góc dưới-phải */
		linear-gradient( 135deg, #0f6b14 0%, #0b4a0e 55%, #073a0a 100% );
	color: #fff;
	box-shadow:
		0 18px 40px -14px rgba(7, 58, 10, 0.55),
		0 2px 0 rgba(255, 255, 255, 0.08) inset;
}

/* Lớp 2: hai vệt sáng trang trí */
.ezk-bg-hop::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient( 46% 120% at 88% 12%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 70% ),
		radial-gradient( 38% 100% at 50% 118%, rgba(122, 213, 147, 0.16) 0%, rgba(122, 213, 147, 0) 70% );
}

/*
 * Lớp 3: vệt sáng chéo chạy qua khi rê chuột.
 * Đặt ngoài khung (`translateX(-120%)`) rồi trượt sang phải — phải để `overflow: hidden` ở
 * khối cha thì vệt mới bị cắt gọn ở hai mép, không lộ ra ngoài.
 */
.ezk-bg-hop::after {
	content: "";
	position: absolute;
	top: -60%;
	bottom: -60%;
	left: 0;
	width: 42%;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.13) 50%, rgba(255, 255, 255, 0) 100% );
	transform: translateX(-160%) skewX(-14deg);
	transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ezk-bg-hop:hover::after,
.ezk-bg-hop:focus-within::after {
	transform: translateX(340%) skewX(-14deg);
}

/* Nội dung nằm TRÊN hai lớp trang trí */
.ezk-bg-chu,
.ezk-bg-nut {
	position: relative;
	z-index: 2;
}

.ezk-bg-chu {
	min-width: 0;
	flex: 1 1 340px;
}

.ezk-bg .ezk-head {
	margin: 0 0 10px;
	text-align: left;
}

.ezk-bg .ezk-head-title {
	color: #fff;
	font-size: 28px;
	line-height: 1.2;
	letter-spacing: 0.2px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
}

.ezk-bg .ezk-head-orn {
	display: none;
}

.ezk-bg-chu p {
	margin: 0;
	/*
	 * KHÔNG giới hạn `max-width` ở đây. Đã thử `max-width: 46ch` cho dễ đọc, nhưng ở bản PC
	 * khối rất rộng nên câu bị ngắt sớm ("...báo giá trong / ngày.") — nhìn như lỗi trình bày
	 * chứ không phải chủ ý. Cột chữ đã bị `.ezk-bg-chu` giới hạn sẵn rồi.
	 */
	color: rgba(255, 255, 255, 0.88);
	font-size: 15.5px;
	line-height: 1.6;
}

.ezk-bg-nut {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

/* ===========================================================================
 * KHỐI BÁO GIÁ DẠNG ẢNH (06-10-2026)
 *
 * Ảnh đã thiết kế sẵn cả khối. Cả ảnh là một thẻ <a> trỏ tới Zalo.
 *
 * ⚠️ KHÔNG đặt `border-radius` / `overflow: hidden` ở đây.
 * Ảnh là PNG ĐỤC: nền quanh thẻ xanh là màu trắng (#FDFEFD), thẻ xanh nằm thụt vào trong
 * (lề 48px trái, 43px phải, 11px trên, 28px dưới). Bo góc khung sẽ KHOÉT vào chính thẻ xanh
 * trong ảnh. Cứ để ảnh hiện nguyên — nền trắng của ảnh hoà vào nền trắng của trang.
 * =========================================================================== */

.ezk-bg--anh .ezk-bg-anh-link {
	display: block;
	line-height: 0;
	text-decoration: none !important;
	transition: transform 0.28s ease, filter 0.28s ease;
}

.ezk-bg--anh .ezk-bg-anh-link img {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
}

/* Nâng nhẹ + sáng lên khi rê chuột, cho biết cả khối bấm được. */
.ezk-bg--anh .ezk-bg-anh-link:hover,
.ezk-bg--anh .ezk-bg-anh-link:focus {
	transform: translateY(-4px);
	filter: brightness(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.ezk-bg--anh .ezk-bg-anh-link {
		transition: none;
	}

	.ezk-bg--anh .ezk-bg-anh-link:hover,
	.ezk-bg--anh .ezk-bg-anh-link:focus {
		transform: none;
	}
}
/*
 * NÚT "GỌI NGAY + SỐ ĐIỆN THOẠI" — CSS ĐÃ BỎ (06-10-2026).
 *
 * Nút đó đã gỡ khỏi PHP (`ez_khuon_bao_gia_shortcode` trong inc/home-sections.php) nên các
 * rule `.ezk-btn-to`, `.ezk-btn-nhan` không còn dùng tới. Bỏ đi cho file gọn.
 *
 * Muốn lấy lại nút: dán lại khối <a class="ezk-btn ezk-btn-to"> trong PHP rồi khôi phục CSS
 * từ `backup-truoc-khi-bo-nut-goi-ngay/ez-home.css`.
 */

/* --- Nút "Chat Zalo": viền trắng, nền mờ, sáng lên khi rê chuột --- */
.ezk-btn-zalo {
	/*
	 * `align-self: stretch` — nút cao BẰNG CẢ CỤM `.ezk-bg-nut`.
	 *
	 * Cụm đó là flex + `align-items: center`, nên nhiều nút sẽ cao bằng nhau. Nhưng khi
	 * khối chỉ còn MỘT nút (nút gọi đã gỡ 06-10-2026), cụm co lại đúng bằng nút nên không
	 * cần nữa. Giữ dòng này để sau này thêm nút khác thì hai nút vẫn cao bằng nhau.
	 */
	align-self: stretch;
	padding: 14px 26px;
	border: 2px solid rgba(255, 255, 255, 0.75);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.ezk-btn-zalo:hover,
.ezk-btn-zalo:focus {
	background: #fff;
	border-color: #fff;
	color: var(--ez-green-dark);
	transform: translateY(-2px);
}

/* ===========================================================================
 * ĐIỆN THOẠI / MÁY TÍNH BẢNG
 * =========================================================================== */

@media (max-width: 1100px) {
	.ezk-dv-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Lưới sản phẩm: 4 cột -> 3 cột trên máy tính bảng ngang */
	.ezk-sp-c4,
	.ezk-sp-c5,
	.ezk-sp-c6 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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

@media (max-width: 782px) {
	/* Đệm dọc 5px cho khớp bản máy tính (xem ghi chú ở khối `.ezk-sec` đầu file). */
	.ezk-sec {
		padding: 5px 0;
	}

	.ezk-head-title {
		font-size: 20px;
	}

	/*
	 * Slider trên điện thoại: thấp lại và chữ nhỏ lại cho vừa màn hình.
	 * `!important` vì PHP in `--ezk-sl-cao` thành inline style — xem ghi chú ở khối
	 * @media 1100px phía trên. Thiếu nó thì quy tắc này không có tác dụng.
	 */
/*
	 * SLIDER TRÀN VIỀN TRÊN ĐIỆN THOẠI (06-10-2026 theo yêu cầu).
	 *
	 * Bản PC để slider NẰM TRONG container (chủ shop đã chốt như vậy). Nhưng trên điện thoại,
	 * 20px mỗi bên là quá phí — màn hình đã nhỏ lại còn mất 40px bề ngang cho ảnh.
	 *
	 * ⚠️ ĐO THẬT trước khi sửa (màn 420px, tính theo CSS px):
	 *     .ast-container : đệm ngang 20px/20px  -> vùng nội dung 20..492
	 *     .ezk-sl        : 20..492               -> HỞ 20px mỗi bên
	 *
	 * CÁCH LÀM: kéo slider ra ngoài đệm của `.ast-container` bằng lề ÂM đúng bằng số đệm đó.
	 * Dùng `margin-left/right: -20px` chứ KHÔNG dùng `100vw`:
	 *   - `100vw` tính CẢ thanh cuộn nên trên desktop từng bị tràn 7px (đã gặp lỗi này).
	 *   - Lề âm chỉ kéo đúng bằng phần đệm nên không bao giờ tràn quá.
	 *
	 * ⚠️ Số 20px phải KHỚP đệm ngang của `.ast-container` ở ngưỡng này. Astra đặt 20px cho mọi
	 * cỡ màn hình; nếu đổi theme mà thấy hở/tràn thì sửa số ở đây.
	 *
	 * Bản PC giữ nguyên (nằm trong container). Muốn PC cũng tràn viền thì nói.
	 */
	.ezk-sl[class] {
		aspect-ratio: 16 / 9 !important;
		max-width: none;
		width: auto;
		margin-left: -20px;
		margin-right: -20px;
	}

	.ezk-sl-tieude[class] {
		font-size: 21px;
	}

	.ezk-sl-phude[class] {
		font-size: 14.5px;
		margin-bottom: 16px;
	}

	/* Mũi tên nhỏ lại; vẫn hiện vì điện thoại không có "rê chuột" */
	.ezk-sl-muiten[class] {
		width: 36px;
		height: 36px;
		font-size: 24px;
		opacity: 1;
	}

	.ezk-sl-truoc[class] {
		left: 8px;
	}

	.ezk-sl-sau[class] {
		right: 8px;
	}

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

	.ezk-about-img {
		order: -1;
	}

	/*
	 * DỊCH VỤ TRÊN ĐIỆN THOẠI: DẠNG SLIDER CHẠY NGANG (06-10-2026 theo yêu cầu).
	 *
	 * TRƯỚC: `grid-template-columns: minmax(0, 1fr)` — 4 ô xếp DỌC, mỗi ô chiếm cả bề ngang,
	 * phải cuộn trang xuống khá lâu mới hết khối.
	 * NAY: một hàng NGANG trượt được, mỗi ô lộ ra một phần để khách biết còn nữa mà vuốt.
	 *
	 * Cách làm: bỏ grid, dùng flex + `overflow-x: auto` + `scroll-snap` cho êm tay.
	 */
	.ezk-dv-grid {
		display: flex;
		grid-template-columns: none;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* Chừa chỗ cho bóng đổ của ô, nếu không bóng bị cắt ở mép trên/dưới. */
		padding: 4px 2px 10px;
	}

	.ezk-dv-grid::-webkit-scrollbar {
		display: none;
	}

	.ezk-dv-o {
		/* Rộng 72% màn hình để ô sau ló ra ~28% — dấu hiệu cho khách biết là vuốt được. */
		flex: 0 0 auto;
		width: min(72vw, 300px);
		scroll-snap-align: center;
	}

	/*
	 * ⚠️ ĐÃ BỎ `.ezk-dv-nhan { opacity: 0 }`.
	 *
	 * Dòng đó là di chứng từ hồi ô dịch vụ còn phần MÔ TẢ hiện khi rê chuột: trên điện thoại
	 * không rê chuột được nên tác giả cho mô tả hiện luôn và ẩn NHÃN đi cho khỏi chồng chữ.
	 * Nhưng phần mô tả đã bị gỡ hẳn khỏi PHP (06-10-2026), nên dòng này chỉ còn tác dụng ẨN
	 * TÊN DỊCH VỤ trên điện thoại — đúng lỗi "mobi không hiện cái chữ này".
	 */

	/* Lưới sản phẩm: 3 cột -> 2 cột trên điện thoại */
	.ezk-sp-c3,
	.ezk-sp-c4,
	.ezk-sp-c5,
	.ezk-sp-c6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	.ezk-bg-hop {
		padding: 22px 20px;
	}

	.ezk-bg .ezk-head-title {
		font-size: 18px;
	}

	.ezk-bg-nut {
		width: 100%;
	}

	.ezk-bg-nut .ezk-btn {
		flex: 1 1 auto;
		justify-content: center;
		text-align: center;
		align-items: center;
	}
}

/* ===========================================================================
 * 7. TIN TỨC — khối [ez_news_section]
 *
 * Khối này dùng CHUNG class `.ez-pcat-head` với khối danh mục sản phẩm (bố cục ngang:
 * tiêu đề bên trái, link "Xem tất cả" bên phải). Trên trang chủ thì các khối khác đều
 * có tiêu đề CĂN GIỮA kèm hoạ tiết, nên khối này phải sửa lại cho đồng bộ — không thì
 * tiêu đề "TIN TỨC" lệch trái, nhìn lạc lõng.
 *
 * Quy tắc ở đây chỉ nhắm `.ez-news`, KHÔNG đụng khối danh mục ở trang Cửa hàng.
 * =========================================================================== */

.ez-news {
	margin: 0 0 46px;
}

/* Tiêu đề căn giữa, link "Xem tất cả" xuống dưới */
.ez-news .ez-pcat-head {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 28px;
	text-align: center;
}

.ez-news .ez-pcat-title {
	order: 1;
	color: var(--ez-green-dark);
	font-family: var(--ez-font);
	font-size: 26px;
	font-weight: 800;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
}

.ez-news .ez-pcat-title a {
	color: inherit;
	text-decoration: none !important;
}

/* Hoạ tiết gạch ngang + chấm thoi dưới tiêu đề, giống các khối khác */
.ez-news .ez-pcat-title::after {
	content: "";
	display: block;
	width: 90px;
	height: 2px;
	margin: 12px auto 0;
	background: var(--ez-green);
	position: relative;
}

.ez-news .ez-pcat-seeall {
	order: 2;
	display: inline-block;
	margin: 0;
	padding: 9px 22px;
	border: 1px solid var(--ez-green);
	border-radius: var(--ez-radius-sm);
	color: var(--ez-green-dark);
	font-family: var(--ez-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none !important;
	text-transform: uppercase;
	transition: background-color 0.22s ease, color 0.22s ease;
}

.ez-news .ez-pcat-seeall:hover,
.ez-news .ez-pcat-seeall:focus {
	background: var(--ez-green);
	color: #fff;
	text-decoration: none !important;
}

/* Lưới 3 thẻ tin: cao đều nhau, ảnh cùng tỷ lệ */
.ez-news-grid {
	align-items: stretch;
}

.ez-news-thumb {
	height: 210px;
	overflow: hidden;
	background: var(--ez-green-pale);
}

.ez-news-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ez-news-title {
	min-height: 2.9em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Điện thoại: tiêu đề nhỏ lại */
@media (max-width: 782px) {
	.ez-news .ez-pcat-title {
		font-size: 20px;
	}

	.ez-news-thumb {
		height: 190px;
	}
}