/**
 * TRANG CHỦ — desktop v1 (mockup Homepage Desktop V2, spec Homepage v1.0).
 *
 * File này CHỈ chứa thứ riêng của trang chủ. Component dùng chung nằm ở product.css
 * (gyt-block, gyt-shead, gyt-acard, gyt-pcard, gyt-agrid, gyt-cta) và category.css
 * (gyt-catgrid/gyt-catcard, gyt-needchip, gyt-vsgrid, gyt-brandgrid) — cả hai nạp TRƯỚC.
 * 🔴 Không chép rule sang đây: hai bản sao là sớm muộn lệch nhau.
 *
 * Mobile chỉ là fallback cho khỏi vỡ; mobile final chờ spec riêng (spec §27).
 */

.gyt-home { padding-block: var(--gyt-space-6) var(--gyt-space-12); }
.gyt-home > * + * { margin-top: var(--gyt-space-12); }

/* ================================================================== */
/* 1 — HERO + FEATURED VERTICALS                                       */
/* ================================================================== */
/**
 * Panel hero (chữ + ảnh) chiếm phần lớn bề ngang, cột vertical 340px bám phải — đúng mockup V2.
 * Không có vertical thì panel chiếm trọn (`--norail`), KHÔNG để cột rỗng.
 */
.gyt-hhero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--gyt-space-5);
	align-items: stretch;
}
.gyt-hhero--norail { grid-template-columns: minmax(0, 1fr); }

.gyt-hhero__panel {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
	gap: var(--gyt-space-6);
	align-items: center;
	padding: 34px 0 34px 38px;
	border: 1px solid #dceee5;
	border-radius: 20px;
	background: linear-gradient(120deg, #f2faf6 0%, #eef7fb 52%, var(--gyt-bg-soft) 100%);
	overflow: hidden;
}
/* Không ảnh -> một cột, chữ kẹp measure. Không dựng khung xám giữ chỗ (luật ảnh toàn site). */
.gyt-hhero__panel--text { grid-template-columns: minmax(0, 1fr); padding-right: 38px; }
.gyt-hhero__panel--text .gyt-hhero__text { max-width: var(--gyt-measure); }

.gyt-hhero__h1 {
	margin: 14px 0 14px;
	font-size: clamp(30px, 3.1vw, 44px);
	line-height: 1.16;
	letter-spacing: -.025em;
	font-weight: 800;
	color: var(--gyt-text);
}
.gyt-hhero__sub {
	margin: 0 0 18px;
	max-width: 56ch;
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--gyt-text-soft);
}

/* Bốn điểm tin cậy — pill nhạt, KHÔNG phải trust badge kiểu shop (đã bỏ từ 11/09) */
.gyt-hhero__trust {
	display: flex; flex-wrap: wrap; gap: 8px 10px;
	margin: 0 0 22px; padding: 0; list-style: none;
}
.gyt-hhero__trust li {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 13px; border-radius: 999px;
	background: #fff; border: 1px solid #dcefe5;
	color: var(--gyt-text-soft); font-size: var(--gyt-text-sm); font-weight: 600;
}
.gyt-hhero__trust svg { flex-shrink: 0; color: var(--gyt-brand-dark); }

/* CTA hero là hành động NỘI BỘ -> xanh thương hiệu. Bóng cam của .gyt-cta--lg phải bị đè,
   nếu không nút xanh lại đổ bóng cam (màu dành riêng cho hành động sang Shopee). */
.gyt-hhero__cta { padding-inline: 26px; }
.gyt-hhero__cta:hover { box-shadow: 0 5px 18px rgba(21, 141, 85, .28); }

.gyt-hhero__media { margin: 0; display: grid; place-items: center; }
/* 26/09 bám mockup Homepage: hero ảnh phủ nửa phải — ảnh TRÀN kín nửa phải khung, sát mép phải/trên/dưới, không viền trống.
   Panel bỏ padding dọc, chữ tự đệm; ảnh absolute `cover` nên cao đúng bằng khung. Chỉ desktop — mobile.css có luật riêng. */
@media (min-width: 961px) {
	.gyt-hhero__panel:not(.gyt-hhero__panel--text) { padding: 0 0 0 38px; align-items: stretch; }
	.gyt-hhero__panel:not(.gyt-hhero__panel--text) .gyt-hhero__text { align-self: center; padding: 34px 0; }
	.gyt-hhero__panel:not(.gyt-hhero__panel--text) .gyt-hhero__media { position: relative; display: block; min-height: 420px; }
	.gyt-hhero__panel:not(.gyt-hhero__panel--text) .gyt-hhero__media img {
		position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%); mask-image: linear-gradient(90deg, transparent 0, #000 14%);
	}
}
/* Giữ tỉ lệ gốc, `contain`: ảnh sản phẩm hay chạm đáy khung, `cover` là xén mất chân đế (mục 6c) */
.gyt-hhero__media img {
	display: block; width: 100%; height: auto; max-height: 340px;
	object-fit: contain;
}

/* --- Cột vertical nổi bật --- */
/* 🔴 Căn TRÊN, không kéo giãn: dữ liệu thật có thể chỉ có 1 vertical (danh mục mới), mà một thẻ
   cao 493px thì nhìn như thẻ lỗi. Ba thẻ (trạng thái đủ dữ liệu) tự lấp gần kín chiều cao hero. */
.gyt-hvert { display: grid; grid-auto-rows: max-content; align-content: start; gap: var(--gyt-space-3); }
.gyt-hvert__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 96px;
	gap: var(--gyt-space-3);
	align-items: center;
	padding: 16px 18px;
	border: 1px solid var(--gyt-border);
	border-radius: 16px;
	background: #fff;
	color: var(--gyt-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.gyt-hvert__card--noimg { grid-template-columns: minmax(0, 1fr); }
.gyt-hvert__card { min-height: 104px; }
.gyt-hvert__card:hover { border-color: var(--gyt-brand-light); box-shadow: 0 4px 16px rgba(17, 24, 39, .07); text-decoration: none; }
.gyt-hvert__body { display: grid; gap: 3px; min-width: 0; }
.gyt-hvert__title { font-size: var(--gyt-text-lg); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.gyt-hvert__sub {
	font-size: var(--gyt-text-sm); color: var(--gyt-text-muted); line-height: 1.5;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.gyt-hvert__go { margin-top: 4px; font-size: var(--gyt-text-sm); font-weight: 700; color: var(--gyt-brand-dark); }
.gyt-hvert__media { display: grid; place-items: center; }
.gyt-hvert__media img { width: 96px; height: 76px; object-fit: contain; border-radius: 10px; }

/* 26/09 (anh Khai: "rời rạc"): cột 3 thẻ ngắn hơn hero, hở trắng bên dưới; ảnh 96px như tem. Theo mockup:
   - từ 2 thẻ trở lên thì các thẻ CHIA ĐỀU chiều cao hero (1 thẻ vẫn giữ max-content — thẻ đơn cao 490px nhìn như lỗi);
   - ảnh phủ NỬA PHẢI thẻ, sát mép, `cover`. Mobile (≤960) có bộ luật riêng ở mobile.css, không đụng. */
@media (min-width: 961px) {
	.gyt-hvert:has(> .gyt-hvert__card:nth-child(2)) { grid-auto-rows: 1fr; align-content: stretch; }
	.gyt-hvert__card:not(.gyt-hvert__card--noimg) {
		grid-template-columns: minmax(0, 1fr) 46%; gap: 0; padding: 0; overflow: hidden; align-items: stretch;
	}
	.gyt-hvert__card:not(.gyt-hvert__card--noimg) .gyt-hvert__body { align-self: center; padding: 16px 12px 16px 20px; }
	.gyt-hvert__card:not(.gyt-hvert__card--noimg) .gyt-hvert__media { display: block; position: relative; min-height: 104px; }
	.gyt-hvert__card:not(.gyt-hvert__card--noimg) .gyt-hvert__media img {
		position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0;
	}
}

/* ================================================================== */
/* 3 — CHỌN THEO NHU CẦU (dải nền xanh rất nhạt như mockup)             */
/* ================================================================== */
/* Cùng cách làm với Category Hub: một chip đứng lẻ vẫn đọc ra là khối chọn nhanh,
   không phải nút lạc giữa nền trắng. Rule bên category.css scope `.gyt-cat` nên không với tới đây. */
.gyt-hneeds {
	padding: 22px 26px 24px;
	border: 1px solid #dcefe5;
	border-radius: 18px;
	background: #f4fbf7;
}
.gyt-hneeds .gyt-block { margin: 0; }
.gyt-hneeds .gyt-shead { margin-bottom: 12px; }

/* ================================================================== */
/* 4·5·6 — HÀNG BIÊN TẬP: hướng dẫn · so sánh · bài viết                */
/* ================================================================== */
/**
 * 🔴 Đây là lớp TRÌNH BÀY. Thứ tự trong HTML vẫn là hướng dẫn → so sánh → bài viết (spec §3),
 *    CSS chỉ xếp chúng thành các cột. Mọi khối đều giữ đúng vai trò biên tập, không khối nào
 *    có CTA Shopee.
 */
.gyt-hrow { display: grid; gap: var(--gyt-space-8); align-items: start; }
.gyt-hrow > .gyt-block { margin: 0; }

@media (min-width: 1180px) {
	.gyt-hrow[data-cols="3"] { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .9fr); }
	.gyt-hrow[data-cols="2"] { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
	.gyt-hrow--commerce[data-cols="2"] { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* Mật độ: 1 mục thì thẻ phải trải hết cột, không để một thẻ nhỏ đứng lẻ (bài học Category) */
.gyt-home .gyt-agrid,
.gyt-home .gyt-catgrid,
.gyt-home .gyt-vsgrid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.gyt-home .gyt-agrid { align-items: start; }

@media (min-width: 1180px) {
	.gyt-home .gyt-catgrid[data-count="1"],
	.gyt-home .gyt-agrid[data-count="1"],
	.gyt-home .gyt-vsgrid[data-count="1"] { grid-template-columns: minmax(0, 1fr); }

	/* Danh mục nổi bật: mockup xếp thành hàng nhiều thẻ nhỏ */
	.gyt-home .gyt-catgrid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
	/* 25/09: ô GỌN như mockup — trước là hộp 190px mà ruột chỉ có tên + "Xem ngay", giữa trống hoác */
	.gyt-home .gyt-catgrid[data-count]:not([data-count="1"]) .gyt-catcard { padding: 14px 16px; gap: 12px; min-height: 0; }
	.gyt-home .gyt-catgrid[data-count]:not([data-count="1"]) .gyt-catcard__name { font-size: 17px; }
	.gyt-home .gyt-catgrid[data-count]:not([data-count="1"]) .gyt-catcard__desc { -webkit-line-clamp: 1; font-size: 13.5px; }
	.gyt-home .gyt-catgrid[data-count]:not([data-count="1"]) .gyt-catcard__go { margin-top: 4px; padding-top: 0; font-size: 13px; }
	.gyt-home .gyt-catgrid[data-count="1"] .gyt-catcard { flex-direction: row; align-items: center; gap: 20px; }
	.gyt-home .gyt-catgrid[data-count="1"] .gyt-catcard__name { flex: 0 0 auto; font-size: 20px; }
	.gyt-home .gyt-catgrid[data-count="1"] .gyt-catcard__desc { flex: 1 1 auto; -webkit-line-clamp: 1; }
	.gyt-home .gyt-catgrid[data-count="1"] .gyt-catcard__go { margin: 0; padding: 0; white-space: nowrap; }

	/**
	 * 🔴 KHÔNG ép "1 bài -> thẻ ngang" ở trang chủ (khác Category Hub).
	 *    Khối Hướng dẫn mua nằm trong cột hẹp của hàng ba cột (~480px). Ép ngang thì ảnh 300px
	 *    nuốt gần hết, chữ còn ~150px và bị cắt giữa từ. Luật bố cục NGANG chỉ đúng khi CÓ bề ngang —
	 *    ở đây thẻ đứng, trải hết cột là vừa.
	 */
	.gyt-home .gyt-agrid[data-count="1"] .gyt-acard__media img { height: 190px; aspect-ratio: auto; object-fit: cover; }
}

/* ================================================================== */
/* 6 — Danh sách bài viết (cột hẹp, có/không số thứ tự)                 */
/* ================================================================== */
.gyt-htop__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
/* Flex chứ không grid: chưa có dữ liệu lượt xem thì KHÔNG có ô số thứ tự, grid sẽ để lại một khe
   trống 12px ở mọi hàng. Flex thì thiếu phần nào là hàng tự khít lại. */
.gyt-htop__row {
	display: flex; align-items: center; gap: var(--gyt-space-3);
	padding: 10px 4px;
	border-bottom: 1px solid var(--gyt-border-soft);
}
.gyt-htop__rank, .gyt-htop__media { flex: 0 0 auto; }
.gyt-htop__body { flex: 1 1 auto; }
.gyt-htop__row:last-child { border-bottom: 0; }
/* Không có ảnh và/hoặc không có số thì các cột tự dồn — grid-template chỉ là khung tối đa */
.gyt-htop__rank {
	display: grid; place-items: center;
	width: 26px; height: 26px; border-radius: 8px;
	background: var(--gyt-brand-tint); color: var(--gyt-brand-dark);
	font-size: var(--gyt-text-sm); font-weight: 800;
}
.gyt-htop__media img { width: 56px; height: 48px; object-fit: cover; border-radius: 8px; display: block; }
.gyt-htop__body { display: grid; gap: 3px; min-width: 0; }
.gyt-htop__title {
	font-size: var(--gyt-text-base); font-weight: 600; line-height: 1.45; color: var(--gyt-text);
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.gyt-htop__title:hover { color: var(--gyt-brand-dark); text-decoration: none; }
.gyt-htop__views { font-size: var(--gyt-text-xs); color: var(--gyt-text-muted); }

/* ================================================================== */
/* 7 — Sản phẩm đáng cân nhắc                                          */
/* ================================================================== */
/**
 * 🔴 Khối này KHÔNG được át cả trang (spec §12, §29). Thẻ gọn hơn Product Review: ảnh kẹp 150px,
 *    chữ nhỏ hơn — trang chủ là cổng điều hướng, sản phẩm chỉ là một lớp bên trong.
 */
.gyt-home .gyt-pgrid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (min-width: 1180px) {
	.gyt-home .gyt-pgrid[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.gyt-home .gyt-pgrid[data-count="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	/* 26/09: 6–10 mẫu (trang chủ 2 hàng) và trang /san-pham/ (24 mẫu) — luôn 5 cột, hàng cuối thiếu thì để trống bên phải */
	.gyt-home .gyt-pgrid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* 25/09: ảnh tràn mép, vuông, theo luật chung ở product.css (bỏ kẹp 118px `contain` — ảnh nhỏ giữa nền trắng là lý do anh Khai thấy "rời rạc") */
.gyt-home .gyt-pcard--grid.gyt-pcard--noimg { padding: 14px; }
.gyt-home .gyt-pcard--grid:not(.gyt-pcard--noimg) .gyt-pcard__body { padding: 12px 14px 14px; }
/*
 * 🔴 Thẻ sản phẩm trang chủ nằm trong cột 928px chia 5 -> mỗi thẻ ĐÚNG 170px, lòng thẻ 142px.
 *    Hai nút cạnh nhau trong 142px thì "Xem giá trên Shopee" vỡ thành 4 dòng và nút cao 83px
 *    (đo thật 16/09; mockup là 1 dòng, cao ~28px). 142px KHÔNG đủ cho hai nút một hàng ở cỡ chữ
 *    đọc được — thử rồi: cần ~168px. Nên xếp DỌC, giữ nguyên thứ tự "Xem đánh giá" trước.
 * 🔴 Giữ "Xem đánh giá" là NÚT THẬT, không hạ xuống link chữ: luật của dự án là hành động đọc bài
 *    không được yếu thế hơn nút cam (audit Category kiểm điều này).
 */
/* 🔴 `.gyt-pcard__actions` là GRID 2 cột (product.css), KHÔNG phải flex — sập một lần vì
   tưởng nó flex rồi viết `flex-wrap`, không có tác dụng nào. Hạ về MỘT cột là xếp dọc. */
.gyt-home .gyt-hprods .gyt-pcard--grid .gyt-pcard__actions {
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}
.gyt-home .gyt-hprods .gyt-pcard--grid .gyt-pcard__actions .gyt-cta {
	min-height: 38px;
	padding-inline: 6px;
	white-space: nowrap;
}
/*
 * Ghim tên đúng 2 dòng: tên 1 dòng và 2 dòng đứng cạnh nhau làm hàng GIÁ lệch 21px giữa các thẻ,
 * mắt đọc ra ngay là hàng bị so le. Dùng `em` chứ không px để đổi cỡ chữ không phải sửa lại số.
 */
.gyt-home .gyt-hprods .gyt-pcard__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.4;
	min-height: 2.8em;
}
.gyt-home .gyt-pcard__name { margin-top: 10px; font-size: var(--gyt-text-base); }
.gyt-home .gyt-pcard__reason { margin: 4px 0 8px; font-size: var(--gyt-text-sm); }
.gyt-home .gyt-pcard--grid .gyt-pcard__actions { gap: 6px; }
.gyt-home .gyt-pcard--grid .gyt-pcard__actions .gyt-cta { min-height: 36px; font-size: var(--gyt-text-sm); padding-inline: 10px; }
.gyt-hprods__note { margin: 14px 0 0; font-size: var(--gyt-text-xs); color: var(--gyt-text-muted); line-height: 1.5; }

/* "Xem tất cả sản phẩm" — nút NỘI BỘ (xanh, viền), không phải cam: nó dẫn sang /san-pham/, không sang Shopee */
.gyt-hprods__more { margin: 20px 0 0; text-align: center; }
.gyt-hprods__all {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px; padding: 0 26px;
	border: 1.5px solid var(--gyt-brand); border-radius: var(--gyt-radius-pill);
	color: var(--gyt-brand-dark); background: #fff;
	font-weight: 700; font-size: var(--gyt-text-base); text-decoration: none;
}
.gyt-hprods__all:hover { background: var(--gyt-brand-tint); color: var(--gyt-brand-dark); }

/* ---- /san-pham/ — Tất cả sản phẩm (archive-gyt_product.php, 26/09) ---- */
.gyt-parch__head { margin: 14px 0 18px; }
.gyt-parch__h1 { margin: 0 0 6px; font-size: 30px; line-height: 1.25; }
.gyt-parch__sub { margin: 0; color: var(--gyt-text-muted); font-size: var(--gyt-text-base); }
.gyt-parch__cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.gyt-parch__cat {
	display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
	border: 1px solid var(--gyt-border); border-radius: var(--gyt-radius-pill);
	background: #fff; color: var(--gyt-text); font-size: var(--gyt-text-sm); text-decoration: none;
}
.gyt-parch__cat:hover { border-color: var(--gyt-brand); color: var(--gyt-brand-dark); }
.gyt-parch .gyt-block { margin-top: 0; }

/* Phân trang (dùng chung /san-pham/ và trang tìm kiếm) */
.gyt-home .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 28px 0 8px; }
.gyt-home .nav-links .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; min-height: 40px; padding: 0 12px;
	border: 1px solid var(--gyt-border); border-radius: var(--gyt-radius);
	background: #fff; color: var(--gyt-text); text-decoration: none; font-weight: 600;
}
.gyt-home .nav-links .page-numbers.current { background: var(--gyt-brand); border-color: var(--gyt-brand); color: #fff; }
.gyt-home .nav-links .page-numbers.dots { border: 0; background: none; min-width: 20px; }
.gyt-home .nav-links a.page-numbers:hover { border-color: var(--gyt-brand); color: var(--gyt-brand-dark); }

/* Thương hiệu ở cột hẹp: xếp lưới 2 cột cho gọn thay vì hàng ngang dài */
.gyt-hrow__col--narrow .gyt-brandgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gyt-hrow__col--narrow .gyt-brandcard { min-width: 0; width: 100%; padding: 14px 10px; font-size: var(--gyt-text-base); }

/* ================================================================== */
/* 9 — CTA cuối trang (guidance, KHÔNG phải CTA mua)                    */
/* ================================================================== */
.gyt-hcta {
	padding: 30px 34px;
	border: 1px solid #dcefe5;
	border-radius: 20px;
	background: linear-gradient(120deg, #eef8f2 0%, #f3fbf7 100%);
}
.gyt-hcta__inner {
	display: flex; flex-wrap: wrap; gap: var(--gyt-space-6);
	align-items: center; justify-content: space-between;
}
.gyt-hcta__text { min-width: 0; flex: 1 1 420px; }
.gyt-hcta__title { margin: 0 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.gyt-hcta__sub { margin: 0; max-width: 70ch; font-size: var(--gyt-text-md); line-height: 1.65; color: var(--gyt-text-soft); }
.gyt-hcta__btn { flex: 0 0 auto; padding-inline: 26px; }
.gyt-hcta__btn:hover { box-shadow: 0 5px 18px rgba(21, 141, 85, .28); }
.gyt-hcta__trust {
	display: flex; flex-wrap: wrap; gap: 10px 26px;
	margin: 22px 0 0; padding: 18px 0 0; list-style: none;
	border-top: 1px solid #dcefe5;
}
.gyt-hcta__trust li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--gyt-text-sm); color: var(--gyt-text-soft); font-weight: 600; }
.gyt-hcta__trust svg { color: var(--gyt-brand-dark); }

/* ================================================================== */
/* RESPONSIVE FALLBACK — chỉ để KHÔNG VỠ (spec §27)                     */
/* ================================================================== */
/**
 * 🔴 Đây KHÔNG phải mobile final. Luật bố cục nhiều cột chỉ có nghĩa khi CÓ bề ngang — dưới
 *    1180px mọi hàng về một cột (bài học Category 13/09: để rule ngang ra ngoài media query
 *    thì điện thoại bị ép cột 380px trong khung 335px và tràn ngang).
 */
@media (max-width: 1179px) {
	.gyt-hhero { grid-template-columns: minmax(0, 1fr); }
	.gyt-hvert { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
	.gyt-hhero__panel { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; }
	.gyt-hhero__media { order: -1; }
	.gyt-hhero__media img { max-height: 260px; }
	.gyt-hvert { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
	.gyt-hneeds { padding: 18px 16px 20px; }
	.gyt-hcta { padding: 24px 20px; }
	.gyt-hcta__title { font-size: 22px; }
	/* 🔴 Nút CTA có padding cố định 26px hai bên; để `flex:0 0 auto` ở khung 375px thì nó rộng 347
	   và tràn khỏi mép phải. Ở khổ hẹp cho cả hai phần xuống dòng và nút trải hết. */
	.gyt-hcta__text { flex: 1 1 100%; }
	.gyt-hcta__btn { width: 100%; padding-inline: 14px; }
	.gyt-htop__media img { width: 48px; height: 42px; }
}

/* 26/09 bám mockup Homepage — ô danh mục kiểu mockup: "Danh mục nổi bật" là hàng Ô VUÔNG NHỎ, icon trên · tên dưới · căn giữa,
   không mô tả, không "Xem ngay" (cả ô là link). Chỉ trang chủ + desktop; Category Hub giữ thẻ ngang có mô tả. */
@media (min-width: 961px) {
	.gyt-home .gyt-catgrid[data-count]:not([data-count="1"]) { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
	.gyt-home .gyt-catgrid[data-count]:not([data-count="1"]) .gyt-catcard {
		flex-direction: column; align-items: center; justify-content: center; text-align: center;
		gap: 10px; padding: 16px 10px 14px; min-height: 118px;
	}
	.gyt-home .gyt-catgrid[data-count]:not([data-count="1"]) .gyt-catcard__ico { width: 52px; height: 52px; border-radius: 14px; }
	.gyt-home .gyt-catgrid[data-count]:not([data-count="1"]) .gyt-catcard__ico svg { width: 28px; height: 28px; }
	.gyt-home .gyt-catgrid[data-count]:not([data-count="1"]) .gyt-catcard__body { align-items: center; flex: 0 0 auto; }
	.gyt-home .gyt-catgrid[data-count]:not([data-count="1"]) .gyt-catcard__name {
		font-size: 14px; font-weight: 600; line-height: 1.35;
		display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
	}
	.gyt-home .gyt-catgrid[data-count]:not([data-count="1"]) .gyt-catcard__desc,
	.gyt-home .gyt-catgrid[data-count]:not([data-count="1"]) .gyt-catcard__go { display: none; }
}

/* ---- /san-pham/ lọc khoảng giá (26/09) ---- */
.gyt-parch__bands { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.gyt-parch__band {
	display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px;
	border: 1.5px solid var(--gyt-brand-light); border-radius: var(--gyt-radius-pill);
	background: var(--gyt-brand-tint); color: var(--gyt-brand-dark);
	font-size: var(--gyt-text-sm); font-weight: 700; text-decoration: none;
}
.gyt-parch__band:hover { border-color: var(--gyt-brand); }
.gyt-parch__band.is-on { background: var(--gyt-brand); border-color: var(--gyt-brand); color: #fff; }
.gyt-parch__empty { margin: 8px 0 32px; color: var(--gyt-text-muted); }

/* ---- "Chọn theo nhu cầu phổ biến" — hàng ô đều nhau như mockup (26/09) ---- */
.gyt-hneeds .gyt-needchips { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 10px; }
.gyt-hneeds .gyt-needchip {
	display: flex; align-items: center; gap: 10px; height: 100%;
	padding: 12px 12px; border-radius: 12px; border-color: #e3eee8;
}
.gyt-hneeds .gyt-needchip__ico { flex: 0 0 auto; }
.gyt-hneeds .gyt-needchip__txt { min-width: 0; gap: 2px; }
.gyt-hneeds .gyt-needchip__txt strong { font-size: 13.5px; line-height: 1.3; }
.gyt-hneeds .gyt-needchip__txt small { font-size: 12px; line-height: 1.35; }
.gyt-hneeds .gyt-needchip--more .gyt-needchip__txt strong { color: var(--gyt-brand-dark); font-weight: 600; }
.gyt-parch__bands--need { margin-top: -2px; }
.gyt-parch__bands--need .gyt-parch__band:not(.is-on) { background: #fff; }

/* ---------- Brand Hub /thuong-hieu/{brand}/ (27/09) — dùng lại khung .gyt-parch ---------- */
.gyt-brand__head { display: flex; align-items: center; gap: 16px; }
.gyt-brand__logo { flex: 0 0 72px; width: 72px; height: 72px; border: 1px solid var(--gyt-border); border-radius: 14px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.gyt-brand__logo img { max-width: 60px; max-height: 60px; width: auto; height: auto; object-fit: contain; }
.gyt-brand__intro { max-width: var(--gyt-measure); margin: -6px 0 18px; font-size: 16px; line-height: 1.75; color: var(--gyt-text); }
.gyt-brand__intro p { margin: 0 0 10px; }
@media (max-width: 600px) {
	.gyt-brand__head { gap: 12px; }
	.gyt-brand__logo { flex-basis: 52px; width: 52px; height: 52px; border-radius: 10px; }
	.gyt-brand__logo img { max-width: 44px; max-height: 44px; }
	.gyt-brand__intro { font-size: 15px; line-height: 1.65; margin-top: 0; }
}

/* ================================================================== */
/* 27/09 — Hàng biên tập bám mockup: BA Ô PANEL, tiêu đề có icon, thẳng hàng; So sánh = danh sách gọn */
/* ================================================================== */
.gyt-hrow:not(.gyt-hrow--commerce) { align-items: stretch; gap: var(--gyt-space-5); }
.gyt-hrow:not(.gyt-hrow--commerce) > .gyt-block,
.gyt-hrow:not(.gyt-hrow--commerce) > .gyt-hrow__col--narrow > .gyt-block {
	margin: 0; height: 100%; box-sizing: border-box;
	background: #fff; border: 1px solid var(--gyt-border); border-radius: 16px; padding: 18px 20px 14px;
}
.gyt-hrow:not(.gyt-hrow--commerce) .gyt-shead { margin-bottom: 14px; align-items: center; }
.gyt-hrow:not(.gyt-hrow--commerce) .gyt-shead__title { display: flex; align-items: center; gap: 10px; font-size: 20px; margin: 0; }
.gyt-shead__icon { display: inline-grid; place-items: center; flex: 0 0 auto; color: var(--gyt-brand); }
.gyt-shead__icon svg { width: 22px; height: 22px; }
#bai-viet-noi-bat .gyt-shead__icon { color: #f97316; } /* ngọn lửa cam như mockup — icon, không phải nút mua */

/* So sánh nổi bật — mỗi bài một dòng */
.gyt-vslist { display: grid; }
.gyt-vs--row { border: 0; border-radius: 0; padding: 0; background: none; box-shadow: none; }
.gyt-vs--row:hover { box-shadow: none; }
.gyt-vs--row + .gyt-vs--row { border-top: 1px solid var(--gyt-border-soft); }
.gyt-vs--row .gyt-vs__link { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
.gyt-vs--row .gyt-vs__pair { flex: 0 0 auto; gap: 6px; justify-content: flex-start; }
.gyt-vs--row .gyt-vs__side { display: block; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--gyt-bg-soft); }
.gyt-vs--row .gyt-vs__side img { width: 56px; height: 56px; object-fit: cover; display: block; }
.gyt-vs--row .gyt-vs__mark { width: 28px; height: 28px; font-size: 11px; line-height: 28px; box-shadow: none; }
.gyt-vs--row .gyt-vs__body { display: grid; gap: 3px; min-width: 0; }
.gyt-vs--row .gyt-vs__title {
	margin: 0; font-size: var(--gyt-text-base); font-weight: 700; line-height: 1.4;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.gyt-vs--row .gyt-vs__q { font-size: 14px; line-height: 1.45; color: var(--gyt-text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.gyt-vs--row .gyt-vs__date { font-size: var(--gyt-text-xs); color: var(--gyt-text-muted); }
/* Hàng chỉ còn mỗi khối So sánh (chưa có hướng dẫn mua, không còn bài khác): dòng chia 2–3 cột cho khỏi trống */
@media (min-width: 900px) {
	.gyt-hrow[data-cols="1"] .gyt-vslist { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); column-gap: 32px; }
	.gyt-hrow[data-cols="1"] .gyt-vs--row + .gyt-vs--row { border-top: 0; }
}
/* Hướng dẫn mua trong panel: 2–3 thẻ ĐỨNG CẠNH NHAU như mockup (min 230 + khe không vừa ô 475px → rớt về 1 cột) */
@media (min-width: 1180px) {
	.gyt-hrow:not(.gyt-hrow--commerce) .gyt-agrid:not([data-count="1"]) { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
	.gyt-hrow:not(.gyt-hrow--commerce) .gyt-agrid:not([data-count="1"]) .gyt-acard__media img { height: 150px; aspect-ratio: auto; object-fit: cover; }
}