/**
 * CATEGORY HUB — desktop (spec Category Hub v1.0, quyết định anh Khai 13/09).
 *
 * FULL-WIDTH, không sidebar. Component dùng chung (gyt-block, gyt-shead, gyt-agrid, gyt-pgrid,
 * gyt-vs, gyt-acard, gyt-pcard, gyt-faq, gyt-rhowto, gyt-cta) nằm ở product.css và nạp trước —
 * KHÔNG chép lại. File này chỉ chứa thứ riêng của Category Hub.
 *
 * Mobile chỉ là fallback cho khỏi vỡ; mobile final chờ spec riêng.
 */

.gyt-cat { padding-block: var(--gyt-space-5) var(--gyt-space-12); }

/* ================================================================== */
/* Hero                                                                */
/* ================================================================== */
/**
 * 🔴 Không ảnh -> MỘT cột, không khung ảnh rỗng. Có ảnh -> chữ | ảnh 360.
 *    Cột chữ kẹp theo measure để dòng intro không chạy hết 1280.
 */
.gyt-cathero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: var(--gyt-space-8);
	align-items: center;
	padding-top: var(--gyt-space-2);
}
.gyt-cathero--text { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) { .gyt-cathero { grid-template-columns: minmax(0, 1fr); } }

.gyt-cathero__text { max-width: var(--gyt-measure); }
.gyt-cathero__h1 {
	margin: 12px 0 14px;
	font-size: clamp(28px, 2.8vw, 38px);
	line-height: 1.2;
	letter-spacing: -.02em;
	font-weight: 800;
	color: var(--gyt-text);
}
.gyt-cathero__intro { margin: 0 0 16px; font-size: 17px; line-height: 1.75; color: var(--gyt-text-soft); }

/* Số liệu ĐẾM THẬT — mục nào bằng 0 thì component không in ra (xem cat-hero.php) */
.gyt-cathero__stats {
	display: flex; flex-wrap: wrap; gap: 8px 10px;
	margin: 0 0 14px; padding: 0; list-style: none;
}
.gyt-cathero__stats li {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 8px 14px; border-radius: 999px;
	background: var(--gyt-brand-tint); color: var(--gyt-brand-dark);
	font-size: var(--gyt-text-base); font-weight: 600;
}
.gyt-cathero__stats li strong { font-weight: 800; }
.gyt-cathero__stats svg { flex-shrink: 0; opacity: .85; }
.gyt-cathero__note { margin: 0; font-size: var(--gyt-text-sm); color: var(--gyt-text-muted); }

/* Khung ảnh hero: nền rất nhẹ, bo góc, bóng mảnh — ảnh căn giữa, không chữ đè lên (mockup V2) */
/* Khối mint RÕ hơn: nền đặc hơn, viền cùng tông, bóng sâu hơn chút — để panel đọc ra là MỘT KHỐI
   chứ không phải ảnh trôi trên nền trắng. Ảnh to hơn ~13% so với bản trước (320 -> 362). */
.gyt-cathero__media {
	position: relative;
	margin: 0; padding: 26px;
	display: grid; place-items: center;
	border: 1px solid #d9eee4; border-radius: 22px;
	background: linear-gradient(158deg, #eaf7f0 0%, #f4fbf7 55%, var(--gyt-bg-soft) 100%);
	box-shadow: 0 10px 30px rgba(17, 24, 39, .07);
	overflow: hidden;
}
/* Watermark logo — TRANG TRÍ, opacity rất thấp, nằm dưới ảnh, không bao giờ che sản phẩm */
/* 🔴 Phải nằm TRÊN ảnh (z-index 2): ảnh sản phẩm là JPEG nền TRẮNG ĐẶC và lấp kín khung, để
   watermark ở dưới thì không bao giờ thấy. Độ mờ 6% — đủ để là dấu vết, không đọc thành nhãn. */
.gyt-cathero__wm {
	position: absolute; right: 16px; bottom: 14px; z-index: 2;
	width: 104px; height: auto; opacity: .06;
	filter: grayscale(1);
	pointer-events: none; user-select: none;
}
.gyt-cathero__media img:not(.gyt-cathero__wm) { position: relative; z-index: 1; }
/**
 * Giữ TỈ LỆ GỐC: ảnh rơi về ảnh sản phẩm thì thường vuông, ép 4/3 là chừa hai dải trắng hai bên
 * trông như ảnh lỗi. `cover` càng không được — xén mất chân đế (bẫy mục 6c). Kẹp chiều cao để
 * ảnh dọc không kéo hero dài ra.
 */
.gyt-cathero__media img { display: block; width: 100%; height: auto; max-height: 362px; object-fit: contain; border-radius: 12px; }

/* ================================================================== */
/* Thẻ danh mục (danh mục con + danh mục liên quan)                     */
/* ================================================================== */
/**
 * 🔴 TEXT-FIRST: không bắt mỗi danh mục có icon/ảnh. Ngành hàng mới chưa chắc có asset,
 *    mà thiếu asset thì thẻ vẫn phải đẹp. `auto-fit` để 1–2 thẻ không kéo dài hết hàng.
 */
/* Trần 420px mỗi thẻ: `1fr` thì danh mục con DUY NHẤT kéo dài trọn 1280 — nhìn như thanh ngang,
   không ra thẻ. Trang chạy tự động nên không được giả định số lượng. */
.gyt-catgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 420px)); gap: var(--gyt-space-4); }

.gyt-catcard {
	display: flex; flex-direction: column; gap: 6px;
	padding: 18px 20px;
	border: 1px solid var(--gyt-border); border-radius: 14px;
	background: #fff; color: var(--gyt-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.gyt-catcard:hover { border-color: var(--gyt-brand-light); box-shadow: 0 3px 14px rgba(17, 24, 39, .06); text-decoration: none; }
/* 25/09: ô có ICON (hoặc ảnh sản phẩm) bên trái như mockup — icon nét 1.8 trong đĩa tròn xanh nhạt 48px */
.gyt-catcard { flex-direction: row; align-items: center; gap: 14px; }
.gyt-catcard__ico {
	flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center;
	border-radius: 14px; background: var(--gyt-brand-tint); color: var(--gyt-brand-dark);
}
.gyt-catcard__ico--img { background: #fff; border: 1px solid var(--gyt-border-soft); overflow: hidden; }
.gyt-catcard__ico--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gyt-catcard__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.gyt-catcard__name { font-size: var(--gyt-text-lg); font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.gyt-catcard__desc {
	font-size: var(--gyt-text-base); line-height: 1.55; color: var(--gyt-text-muted);
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.gyt-catcard__go { margin-top: 2px; padding-top: 0; font-size: var(--gyt-text-sm); font-weight: 700; color: var(--gyt-brand-dark); }

/* ================================================================== */
/* Chip "Chọn theo nhu cầu"                                            */
/* ================================================================== */
/* Mockup V2 đặt khối này trong một dải nền xanh rất nhạt — nhờ đó một chip đứng một mình vẫn
   đọc ra là "khối chọn nhanh", không phải nút lạc lõng giữa nền trắng. */
.gyt-cat #chon-theo-nhu-cau {
	padding: 22px 26px 24px;
	border: 1px solid #dcefe5; border-radius: 18px;
	background: #f4fbf7;
}
.gyt-cat #chon-theo-nhu-cau .gyt-shead { margin-bottom: 12px; }
.gyt-needchips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.gyt-needchip {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 11px 16px;
	border: 1px solid var(--gyt-border); border-radius: 999px;
	background: #fff; color: var(--gyt-text);
}
.gyt-needchip:hover { border-color: var(--gyt-brand-light); background: var(--gyt-brand-tint); text-decoration: none; }
.gyt-needchip__ico { display: grid; place-items: center; color: var(--gyt-brand-dark); }
.gyt-needchip__txt { display: grid; }
.gyt-needchip__txt strong { font-size: var(--gyt-text-base); font-weight: 700; }
.gyt-needchip__txt small { font-size: var(--gyt-text-xs); color: var(--gyt-text-muted); }

/* Hàng thẻ phụ của Hướng dẫn mua: nằm ngay dưới thẻ featured, nhịp gần hơn khoảng cách giữa hai khối */
.gyt-cat .gyt-agrid--rest { margin-top: var(--gyt-space-4); }

/* ================================================================== */
/* Lưới thẻ so sánh                                                    */
/* ================================================================== */
/* 1–2 thẻ thì không kéo dài hết hàng — trần 420px mỗi thẻ */
.gyt-vsgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 420px)); gap: var(--gyt-space-4); }

/* Câu trả lời FAQ là đoạn văn -> kẹp measure như mọi trang khác.
   Rule ở product.css gắn với `.gyt-bg__main` (bố cục hybrid) nên không với tới Category. */
.gyt-cat .gyt-faq__a { max-width: var(--gyt-measure); }

/* ================================================================== */
/* "Về {danh mục}" — chữ chạy dài                                      */
/* ================================================================== */
.gyt-catseo__body { max-width: var(--gyt-measure); }
.gyt-catseo__h { margin: 22px 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.gyt-catseo__h:first-child { margin-top: 0; }
.gyt-catseo__body p { margin: 0 0 12px; font-size: 16px; line-height: 1.8; color: var(--gyt-text); }
.gyt-catseo__body p:last-child { margin-bottom: 0; }

/* ================================================================== */
/* MẬT ĐỘ — đổi TRÌNH BÀY, không đổi skeleton (anh Khai 13/09)         */
/* ================================================================== */
/**
 * 🔴 Luật chung: 1 mục -> thẻ NGANG trải hết cột · 2 mục -> hai cột · 3+ -> lưới 3 cột.
 *    Áp cho Danh mục con · Hướng dẫn mua · So sánh · Kinh nghiệm · Danh mục liên quan.
 *    KHÔNG áp cho Sản phẩm: khối đó là lưới curated 3 cột theo mockup.
 *
 *    Vì sao cần: cột chính rộng 1280. Một thẻ 420px đứng lẻ bên trái để lại 860px trắng —
 *    nhìn như trang lỗi chứ không phải "ít nội dung". Dữ liệu mỏng là chuyện bình thường của
 *    danh mục mới, nên template phải tự đẹp ở cả ba mức mật độ.
 *
 *    Đây là lớp TRÌNH BÀY thuần CSS: không fork component, không đổi hợp đồng $args.
 */
.gyt-cat .gyt-agrid,
.gyt-cat .gyt-catgrid,
.gyt-cat .gyt-vsgrid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/**
 * 🔴 TOÀN BỘ luật "1 mục -> thẻ NGANG" phải nằm TRONG media query desktop.
 *    Bản trước để ngoài: ở điện thoại vẫn ép cột ảnh 380px / cặp so sánh 320px trong khung 335px
 *    -> tràn ngang và thẻ so sánh cao 1126px. Luật bố cục NGANG chỉ có nghĩa khi CÓ bề ngang.
 *    Dưới 1100px mọi lưới về MỘT cột, thẻ giữ dạng đứng mặc định.
 */
@media (min-width: 1100px) {
	.gyt-cat [data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gyt-cat [data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.gyt-cat [data-count="1"] { grid-template-columns: minmax(0, 1fr); }

	/* --- 1 mục: thẻ bài viết nằm NGANG (ảnh trái, chữ phải) --- */
	.gyt-cat .gyt-agrid[data-count="1"] .gyt-acard--grid {
		display: grid; grid-template-columns: 380px minmax(0, 1fr);
		align-items: center; overflow: hidden;
	}
	.gyt-cat .gyt-agrid[data-count="1"] .gyt-acard--grid.gyt-acard--noimg { grid-template-columns: minmax(0, 1fr); }
	/* 🔴 GHIM chiều cao, đừng dùng `height: 100%`: ô lưới định cỡ theo nội dung, ảnh lại đòi 100%
	   của ô -> vòng lặp, thẻ phình 1500px. */
	.gyt-cat .gyt-agrid[data-count="1"] .gyt-acard__media img { height: 260px; aspect-ratio: auto; object-fit: cover; }
	.gyt-cat .gyt-agrid[data-count="1"] .gyt-acard__body { padding: 26px 30px; }
	.gyt-cat .gyt-agrid[data-count="1"] .gyt-acard__title { font-size: 22px; line-height: 1.32; -webkit-line-clamp: 3; }
	.gyt-cat .gyt-agrid[data-count="1"] { align-items: stretch; }

	/* --- 1 mục: thẻ so sánh nằm NGANG (cặp ảnh trái, chữ phải) --- */
	.gyt-cat .gyt-vsgrid[data-count="1"] .gyt-vs__link {
		display: grid; grid-template-columns: 320px minmax(0, 1fr);
		column-gap: 30px; align-items: center;
	}
	.gyt-cat .gyt-vsgrid[data-count="1"] .gyt-vs__pair { grid-column: 1; grid-row: 1 / -1; }
	.gyt-cat .gyt-vsgrid[data-count="1"] .gyt-vs__title,
	.gyt-cat .gyt-vsgrid[data-count="1"] .gyt-vs__sum,
	.gyt-cat .gyt-vsgrid[data-count="1"] .gyt-vs__go { grid-column: 2; }
	.gyt-cat .gyt-vsgrid[data-count="1"] .gyt-vs__title { margin-top: 0; font-size: 20px; }

	/* --- 1 mục: thẻ danh mục nằm NGANG --- */
	.gyt-cat .gyt-catgrid[data-count="1"] .gyt-catcard { flex-direction: row; align-items: center; gap: 20px; padding: 22px 26px; }
	.gyt-cat .gyt-catgrid[data-count="1"] .gyt-catcard__name { flex: 0 0 auto; font-size: 20px; }
	.gyt-cat .gyt-catgrid[data-count="1"] .gyt-catcard__desc { flex: 1 1 auto; -webkit-line-clamp: 1; }
	.gyt-cat .gyt-catgrid[data-count="1"] .gyt-catcard__go { margin: 0; padding: 0; white-space: nowrap; }
}

/* Trích đoạn + lời mời đọc, chỉ có ở thẻ nổi bật */
.gyt-acard__excerpt {
	margin: 9px 0 0; font-size: var(--gyt-text-md); line-height: 1.65; color: var(--gyt-text-soft);
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.gyt-acard__cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-size: var(--gyt-text-base); font-weight: 700; color: var(--gyt-brand-dark); }


/**
 * 🔴 `align-items: start` cho lưới BÀI VIẾT: thẻ có ảnh và thẻ chỉ chữ hay đứng cạnh nhau.
 *    Để `stretch` thì thẻ chữ bị kéo cao bằng thẻ có ảnh -> hở mảng trắng lớn, y hệt ô giữ chỗ
 *    vừa bỏ đi. Lưới SẢN PHẨM giữ stretch để hai nút thẳng đáy.
 */
.gyt-cat .gyt-agrid { align-items: start; }

/* ================================================================== */
/* NHỊP THỊ GIÁC — 3 tầng (spec §19)                                   */
/* ================================================================== */
/* Tầng 1 BIÊN TẬP CHÍNH: hướng dẫn mua + so sánh — tiêu đề lớn hơn, thở rộng hơn */
.gyt-cat .gyt-block--primary { margin-top: var(--gyt-space-12); }
.gyt-cat .gyt-block--primary .gyt-shead__title { font-size: 26px; }

/* Tầng 2 THƯƠNG MẠI: một dải nền rất nhạt, KHÔNG viền nặng, KHÔNG màu thứ hai */
.gyt-cat .gyt-block--commerce {
	margin-top: var(--gyt-space-12);
	padding: 26px 28px 28px;
	border-radius: 20px;
	background: var(--gyt-bg-soft);
}
.gyt-cat .gyt-block--commerce .gyt-shead__title { font-size: 24px; }

/* Tầng 3 HỖ TRỢ: kinh nghiệm · FAQ · danh mục liên quan · chữ dài — giữ cỡ mặc định */

/* ================================================================== */
/* Thẻ sản phẩm trên Category — GỌN hơn trang khác                     */
/* ================================================================== */
/**
 * 🔴 Ảnh vuông 1:1 trong cột 400px cho ra thẻ cao gần 700px, khối sản phẩm át cả trang —
 *    sai vai trò: Category là hub biên tập, sản phẩm chỉ là một lớp bên trong (anh Khai 13/09).
 *    Kẹp chiều cao ảnh, `contain` nên không xén chân đế.
 */
.gyt-cat .gyt-pgrid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
@media (min-width: 1100px) { .gyt-cat .gyt-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 25/09: ảnh tràn mép (luật chung product.css); ở Category dùng khung 4:3 `cover` — thẻ 395px mà vuông thì ảnh cao 395px,
   sản phẩm lấn át hub biên tập (anh Khai 13/09). Mobile ≤600 về vuông theo mobile.css. */
.gyt-cat .gyt-pcard--grid.gyt-pcard--noimg { padding: 16px; }
.gyt-cat .gyt-pcard--grid:not(.gyt-pcard--noimg) .gyt-pcard__body { padding: 12px 16px 16px; }
.gyt-cat .gyt-pcard--grid .gyt-pcard__media img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.gyt-cat .gyt-pcard__name { margin-top: 12px; font-size: var(--gyt-text-base); }
.gyt-cat .gyt-pcard__reason { margin: 5px 0 8px; font-size: var(--gyt-text-sm); }
.gyt-cat .gyt-pcard--grid .gyt-pcard__actions .gyt-cta { min-height: 38px; font-size: var(--gyt-text-sm); }

/* ================================================================== */
/* Thương hiệu                                                         */
/* ================================================================== */
.gyt-brandgrid { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.gyt-brandcard {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 140px; padding: 16px 22px;
	border: 1px solid var(--gyt-border); border-radius: 12px;
	background: #fff; color: var(--gyt-text);
	font-size: var(--gyt-text-md); font-weight: 700;
}
.gyt-brandcard:hover { border-color: var(--gyt-brand-light); color: var(--gyt-brand-dark); text-decoration: none; }

/* ================================================================== */
/* 26/09 — desktop GỌN LẠI (anh Khai: "trang danh mục ở desktop đang hơi to")                          */
/* Đo /nha-cua-doi-song/ ở 1440: thẻ 395×518, 3 thẻ/hàng (4 mẫu → thẻ thứ 4 đứng lẻ một hàng); hero 423px */
/* với khung ảnh 420px. Nay: 5 thẻ/hàng như "Những sản phẩm đáng cân nhắc" ở trang chủ (ảnh vuông tràn  */
/* mép, tên 2 dòng, hai nút xếp dọc), khung ảnh hero 320px. Chỉ ≥1100px — tablet/điện thoại giữ nguyên. */
/* ================================================================== */
@media (min-width: 1100px) {
	.gyt-cathero { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
	.gyt-cathero__media { padding: 18px; border-radius: 18px; }
	.gyt-cathero__media img { max-height: 270px; }

	.gyt-cat .gyt-pgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
	.gyt-cat .gyt-pcard--grid .gyt-pcard__media img { aspect-ratio: 1 / 1; }
	.gyt-cat .gyt-pcard--grid:not(.gyt-pcard--noimg) .gyt-pcard__body { padding: 10px 12px 12px; }
	.gyt-cat .gyt-pcard__name {
		margin-top: 8px; font-size: 14.5px; line-height: 1.4;
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em;
	}
	.gyt-cat .gyt-pcard__reason {
		font-size: 13px; line-height: 1.45;
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	}
	.gyt-cat .gyt-pcard--grid .gyt-pcard__actions { grid-template-columns: 1fr; gap: 6px; }
	.gyt-cat .gyt-pcard--grid .gyt-pcard__actions .gyt-cta { min-height: 36px; }
}

/* 27/09 — khối sản phẩm hiện ĐỦ danh mục: 10 mẫu đầu (điện thoại 6), còn lại mở bằng nút CSS thuần */
.gyt-catall-t:not(:checked) ~ .gyt-catprods > :nth-child(n+11) { display: none; }
.gyt-catall-t:checked ~ .gyt-catall-b { display: none; }
.gyt-catall-b {
	display: block; width: max-content; margin: 18px auto 4px; padding: 10px 22px; cursor: pointer;
	border: 1px solid var(--gyt-brand); border-radius: 999px; color: var(--gyt-brand-dark); font-weight: 600; background: #fff;
}
.gyt-catall-b:hover { background: var(--gyt-bg-soft); }
@media (max-width: 600px) {
	.gyt-catall-t:not(:checked) ~ .gyt-catprods > :nth-child(n+7) { display: none; }
}