/**
 * PRODUCT REVIEW — desktop.
 *
 * Bám mockup `a_clean_modern_webpage_product_review_layout_scre.png`.
 * 🔴 Không tự đổi màu / khoảng cách ngoài spec. Muốn đổi phải có mockup mới.
 *
 * Mobile ở đây CHỈ là fallback cho khỏi vỡ — mobile final có spec riêng,
 * không tự sáng tác (Homepage §27).
 */

/* ================================================================== */
/* Bố cục trang                                                        */
/* ================================================================== */
.gyt-pr { padding-block: var(--gyt-space-5) var(--gyt-space-10); }

.gyt-pr__grid {
	display: grid;
	/* Đo mockup: cột chính 687 + sidebar 311 + khe 16 = 1014
	   -> sidebar chiếm 30,7%, KHÔNG phải 23,5% như bản trước.
	   Hẹp quá thì nội dung sidebar xuống dòng liên tục, bố cục bị kéo dài. */
	/* Cot chinh ~72%, sidebar ~26% (yeu cau anh Khai 11/09).
	   Sidebar de rong qua thi cot chinh doc nhu blog; hep qua thi noi dung
	   sidebar xuong dong lien tuc. 26% + tran 340px la diem can. */
	grid-template-columns: minmax(0, 1fr) clamp(292px, 26%, 340px);
	gap: 28px;
	align-items: start;
}

/* Sidebar: IT vien, NHIEU khoang tho.
   Ban truoc moi khoi mot cai vien -> bon hop nho xep chong, nhin vun. */
.gyt-pr__side { position: sticky; top: var(--gyt-space-4); display: grid; gap: 22px; }

/* Mockup vẽ ở khổ 1024 và VẪN có sidebar (cột chính 687 + sidebar 311).
   Nên ngưỡng sập phải THẤP HƠN 1024, không phải 1080. */
@media (max-width: 960px) {
	.gyt-pr__grid { grid-template-columns: minmax(0, 1fr); }
	.gyt-pr__side { position: static; }
}

/* Khối nội dung dùng chung */
/* Nhịp dọc giữa các khối lớn.
   Đo trên mockup: đáy khối trước -> đỉnh tiêu đề khối sau ~20-30px.
   48px (space-12) là gấp đôi, làm trang dài ra vô ích. */
.gyt-block { margin-top: var(--gyt-space-8); scroll-margin-top: 74px; }

.gyt-shead {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: var(--gyt-space-4); margin-bottom: 14px;
}
.gyt-shead__title {
	margin: 0;
	font-size: 22px;
	letter-spacing: -.015em;
	line-height: 1.3;
}
.gyt-shead__sub { margin: 5px 0 0; font-size: var(--gyt-text-sm); color: var(--gyt-text-muted); max-width: 60ch; }
.gyt-shead__more {
	font-size: var(--gyt-text-sm); font-weight: 600; white-space: nowrap;
	color: var(--gyt-brand-dark);
}

/* ================================================================== */
/* Đầu bài                                                             */
/* ================================================================== */
.gyt-pr__label { display: flex; align-items: center; gap: var(--gyt-space-3); margin-bottom: var(--gyt-space-3); }
.gyt-pr__updated { font-size: var(--gyt-text-sm); color: var(--gyt-text-muted); }

/**
 * H1 và mô tả TRẢI HẾT chiều rộng cột chính.
 *
 * Đo trên mockup: H1 chạy từ x=32 đến x=719 — đúng bằng bề rộng cột chính,
 * không bị bó lại. Bản trước em đặt max-width 22ch nên chữ dồn sang trái
 * thành 3 dòng hẹp, lệch hẳn mockup.
 *
 * Cỡ chữ quy đổi từ mockup (rộng 1024, cột chính 687):
 * dải chữ H1 cao 27px -> ~30px ở khổ 1340.
 */
.gyt-pr__h1 {
	margin: 0 0 20px;
	font-size: clamp(25px, 2.5vw, 36px);
	line-height: 1.26;
	letter-spacing: -.02em;
	font-weight: 800;
	color: var(--gyt-text);
}

.gyt-pr__sub {
	margin: 0 0 24px;
	font-size: 17.5px;
	line-height: 1.78;
	color: var(--gyt-text-soft);
}

.gyt-ameta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
	padding-bottom: var(--gyt-space-5);
	border-bottom: 1px solid var(--gyt-border);
	font-size: var(--gyt-text-base); color: var(--gyt-text-muted);
}
/* Tách các mục meta bằng dấu chấm mảnh — rõ ràng hơn là chỉ dựa vào khoảng trắng */
.gyt-ameta > * + *::before {
	content: "·";
	margin-right: 18px;
	color: var(--gyt-border);
}
.gyt-ameta__by strong { color: var(--gyt-text); font-weight: 700; }

/* ================================================================== */
/* HERO                                                                */
/* ================================================================== */
/**
 * HERO — hai thẻ đứng cạnh nhau, KHÔNG có khung bao ngoài.
 *
 * Mockup chỉ có 2 lớp viền: khung ảnh và khối quyết định, đặt thẳng trên nền trang.
 * Bản trước em bọc thêm một khung ngoài cho "nặng" hơn -> thành 3 lớp viền lồng nhau,
 * nhìn nặng nề và lệch hẳn mockup. Trọng lượng phải đến từ KÍCH THƯỚC và
 * KHOẢNG TRẮNG, không phải từ việc chồng thêm viền.
 */
.gyt-hero {
	display: grid;
	/* Ảnh chiếm nhiều hơn vế phải: hero của trang review sống bằng ảnh.
	   1,15 -> 1,38 tức ảnh rộng thêm ~8%. Không đẩy xa hơn: khối quyết định mua
	   còn phải chứa giá + giá gốc + badge giảm giá TRÊN CÙNG MỘT DÒNG. */
	grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
	gap: var(--gyt-space-8);
	margin-top: 30px;
	align-items: start;
}

@media (max-width: 780px) { .gyt-hero { grid-template-columns: minmax(0, 1fr); } }

/* ---- Gallery: đổi ảnh bằng CSS, không cần JS ---- */
.gyt-gal__radio { position: absolute; opacity: 0; pointer-events: none; }

.gyt-gal__stage {
	position: relative;
	border: 1px solid var(--gyt-border);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	/**
	 * KHUNG VUÔNG.
	 *
	 * Mockup vẽ 334×267 (5:4) vì ảnh mẫu trong đó là ảnh chụp cảnh thật, nằm ngang.
	 * Ảnh sản phẩm THẬT thì hầu hết là ảnh studio cắt nền tỉ lệ 1:1
	 * (Tapo 1000×1000, Xiaomi 1600×1600, EZVIZ 1000×1000).
	 * Nhét ảnh vuông vào khung 5:4 chỉ có hai kết cục: hoặc thừa viền trắng hai bên,
	 * hoặc bị xén mất đáy. Khung vuông thì ảnh lấp trọn, không thừa không thiếu,
	 * và cột trái cao lên cho cân với khối quyết định mua bên phải.
	 *
	 * Ảnh ngang (ảnh cảnh) rơi vào đây vẫn an toàn: `contain` để nguyên tỉ lệ,
	 * chỉ thừa viền trên–dưới, KHÔNG bị cắt.
	 */
	aspect-ratio: 1 / 1;
}

.gyt-gal__stage .gyt-gal__slide { padding: 0; }

/**
 * 🔴 `place-items: stretch`, KHÔNG phải `center`.
 *
 * Đã sập vì chỗ này: `center` khiến ô lưới co về kích thước nội dung, nên
 * `height: 100%` của link và ảnh không có mốc để quy chiếu -> rơi về `auto`.
 * Ảnh lấy nguyên chiều cao thật (639px) trong khung chỉ cao 512px, rồi bị
 * `overflow: hidden` xén mất đáy. Nhìn thì tưởng `object-fit` sai, thật ra
 * `object-fit` chưa từng chạy vì ảnh có bị ép vào khung đâu mà fit.
 *
 * `stretch` cho ảnh đúng bằng khung, lúc đó `contain` mới thật sự làm việc.
 */
.gyt-gal__slide {
	position: absolute; inset: 0; margin: 0;
	display: grid; place-items: stretch;
	opacity: 0; visibility: hidden;
	transition: opacity .18s ease;
}
/**
 * 🔴 PHẢI là `contain`. ĐỪNG đổi sang `cover`.
 *
 * Đã thử `cover` cho ảnh lấp kín khung giống mockup — kết quả là XÉN MẤT
 * CHÂN ĐẾ camera, sản phẩm trông lùn đi. Ảnh bị cắt là lỗi nặng hơn nhiều
 * so với thừa một chút nền trắng.
 *
 * `min-height: 0` là bắt buộc: ô lưới mặc định không co nhỏ hơn nội dung,
 * thiếu dòng này thì ảnh cao lại đẩy phình khung ra như cũ.
 */
.gyt-gal__slide img {
	width: 100%; height: 100%;
	min-width: 0; min-height: 0;
	object-fit: contain;
}

/* Link bọc ảnh: lấp trọn ô, hiện biểu tượng phóng to khi rê chuột */
.gyt-gal__open {
	position: relative; display: block;
	width: 100%; height: 100%;
	min-width: 0; min-height: 0;
	cursor: zoom-in;
}

/* ---- Nút chuyển ảnh ‹ › ---- */
/**
 * z-index 2: link phóng to phủ kín slide, nút phải nằm TRÊN nó.
 * Thiếu dòng này thì bấm mũi tên lại bật lớp phóng to.
 */
.gyt-gal__nav {
	position: absolute; top: 50%; z-index: 2;
	transform: translateY(-50%);
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border: 1px solid var(--gyt-border);
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: var(--gyt-text);
	font-size: 20px; line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(17, 24, 39, .1);
	opacity: 0; transition: opacity .15s ease, background .15s ease;
}
.gyt-gal__nav--prev { left: 10px; }
.gyt-gal__nav--next { right: 10px; }
.gyt-gal__nav:hover { background: #fff; border-color: var(--gyt-brand); color: var(--gyt-brand-dark); }

/* Nút chỉ hiện khi rê vào khung ảnh — để yên thì ảnh sản phẩm được sạch sẽ.
   Trên thiết bị cảm ứng không có hover nên luôn hiện. */
.gyt-gal__stage:hover .gyt-gal__nav,
.gyt-gal__nav:focus-within { opacity: 1; }
@media (hover: none) { .gyt-gal__nav { opacity: 1; } }

/* Đang xem ảnh mấy trên tổng số — người đọc biết còn ảnh để lướt tiếp. */
.gyt-gal__count {
	position: absolute; left: 10px; bottom: 10px; z-index: 2;
	padding: 3px 9px; border-radius: var(--gyt-radius-pill);
	background: rgba(11, 15, 26, .55); color: #fff;
	font-size: var(--gyt-text-xs); font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.gyt-gal__zoomicon {
	position: absolute; right: 10px; bottom: 10px;
	width: 30px; height: 30px;
	display: grid; place-items: center;
	border-radius: 8px;
	background: rgba(11, 15, 26, .62); color: #fff;
	font-size: 15px; line-height: 1;
	opacity: 0; transition: opacity .15s ease;
}
.gyt-gal__open:hover .gyt-gal__zoomicon,
.gyt-gal__open:focus-visible .gyt-gal__zoomicon { opacity: 1; }

/* ---------------------------------------------------------------- */
/* Lớp phủ phóng to — bật bằng :target, không dùng JS                 */
/* ---------------------------------------------------------------- */
.gyt-zoom {
	position: fixed; inset: 0; z-index: 200;
	display: none;
	place-items: center;
	padding: var(--gyt-space-6);
}
.gyt-zoom:target { display: grid; }

.gyt-zoom__bg {
	position: absolute; inset: 0;
	background: rgba(11, 15, 26, .78);
	cursor: zoom-out;
}

/**
 * Hộp phóng to = KHUNG ẢNH LỚN + CỘT THUMBNAIL BÊN PHẢI (kiểu Shopee, anh Khai chốt 16/09).
 *
 * 🔴 Cột thumbnail bấm được là `<label for=…>` trỏ về CHÍNH bộ radio của gallery,
 *    nên đổi ảnh trong lớp phóng to thì ảnh ở khung ngoài đổi theo luôn. Không JS.
 */
.gyt-zoom__box {
	position: relative;
	display: flex; gap: 14px; align-items: stretch;
	max-width: min(1120px, 94vw);
	max-height: 90vh;
	padding: var(--gyt-space-4);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}

/**
 * 🔴 KÍCH THƯỚC PHẢI ĐI TỪ CHIỀU CAO, KHÔNG ĐI TỪ `width: 100%`.
 *
 *    Đã sập vì chỗ này: `.gyt-zoom__box` là hộp flex co theo nội dung, mà mọi slide bên trong
 *    đều `position: absolute` nên khung chẳng có bề ngang tự nhiên nào. `width: 100%` khi đó
 *    quy chiếu vào một số CHƯA XÁC ĐỊNH và ra đúng **0px** — ảnh biến mất sạch, chỉ còn trơ
 *    cột thumbnail bên phải. Nhìn thì tưởng ảnh không tải được.
 *
 *    Cho chiều cao một số xác định rồi để `aspect-ratio` suy ra bề ngang thì hết vòng lặp:
 *    ô vuông luôn vừa màn hình, và hộp tự co đúng bằng ảnh + cột thumbnail.
 *    `calc(94vw - 120px)` là phần bề ngang còn lại sau khi trừ cột thumbnail, gap và padding.
 */
.gyt-zoom__main {
	position: relative;
	flex: 0 0 auto; min-width: 0; min-height: 0;
	height: min(calc(90vh - 32px), calc(94vw - 120px));
	aspect-ratio: 1 / 1;
	max-width: 100%;
}

.gyt-zoom__slide {
	position: absolute; inset: 0; margin: 0;
	display: grid; place-items: stretch;
	opacity: 0; visibility: hidden;
	transition: opacity .16s ease;
}
.gyt-zoom__slide img {
	width: 100%; height: 100%;
	min-width: 0; min-height: 0;
	object-fit: contain;
}

/* Nút ‹ › trong lớp phóng to — nằm trong từng slide như ở khung ngoài, nên không cần JS */
.gyt-zoom__nav {
	position: absolute; top: 50%; z-index: 2;
	transform: translateY(-50%);
	width: 40px; height: 40px;
	display: grid; place-items: center;
	border: 1px solid var(--gyt-border); border-radius: 50%;
	background: rgba(255, 255, 255, .96); color: var(--gyt-text);
	font-size: 22px; line-height: 1; cursor: pointer;
	box-shadow: 0 2px 10px rgba(17, 24, 39, .16);
	transition: background .15s ease, border-color .15s ease;
}
.gyt-zoom__nav:hover { background: #fff; border-color: var(--gyt-brand); color: var(--gyt-brand-dark); }
.gyt-zoom__nav--prev { left: 8px; }
.gyt-zoom__nav--next { right: 8px; }

.gyt-zoom__count {
	position: absolute; left: 10px; bottom: 10px; z-index: 2;
	padding: 3px 9px; border-radius: var(--gyt-radius-pill);
	background: rgba(11, 15, 26, .55); color: #fff;
	font-size: var(--gyt-text-xs); font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Cột thumbnail bên phải — cuộn dọc khi nhiều ảnh */
.gyt-zoom__side {
	flex: 0 0 82px;
	display: flex; flex-direction: column; gap: 8px;
	overflow-y: auto; overscroll-behavior: contain;
	scrollbar-width: none; -ms-overflow-style: none;
}
.gyt-zoom__side::-webkit-scrollbar { display: none; }

.gyt-zoom__thumb {
	position: relative;
	flex: 0 0 auto; width: 74px;
	aspect-ratio: 1 / 1;
	border: 2px solid var(--gyt-border); border-radius: 8px;
	background: #fff; cursor: pointer; overflow: hidden;
	transition: border-color .15s ease;
}
.gyt-zoom__thumb:hover { border-color: var(--gyt-brand); }
.gyt-zoom__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

.gyt-zoom__close {
	position: absolute; top: -14px; right: -14px;
	width: 34px; height: 34px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: #fff; color: var(--gyt-text);
	font-size: 15px; font-weight: 700;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}
.gyt-zoom__close:hover { background: var(--gyt-bg-soft); text-decoration: none; }

/**
 * Radio thứ N được chọn -> slide thứ N hiện.
 *
 * 🔴 RÀNG BUỘC: số cặp ở đây PHẢI khớp `GYT_GALLERY_MAX` trong
 *    template-parts/components/product-gallery.php (hiện là 12).
 *    CSS không viết được luật cho N tuỳ ý, nên component cắt bớt ảnh thừa
 *    và ghi log — thà cắt CÓ BÁO còn hơn ảnh thứ 13 im lặng biến mất
 *    khi Studio đẩy một sản phẩm nhiều ảnh vào.
 *    Đổi trần thì sửa CẢ HAI chỗ.
 */
.gyt-gal__radio:nth-of-type(1):checked ~ .gyt-gal__stage .gyt-gal__slide[data-i="0"],
.gyt-gal__radio:nth-of-type(2):checked ~ .gyt-gal__stage .gyt-gal__slide[data-i="1"],
.gyt-gal__radio:nth-of-type(3):checked ~ .gyt-gal__stage .gyt-gal__slide[data-i="2"],
.gyt-gal__radio:nth-of-type(4):checked ~ .gyt-gal__stage .gyt-gal__slide[data-i="3"],
.gyt-gal__radio:nth-of-type(5):checked ~ .gyt-gal__stage .gyt-gal__slide[data-i="4"],
.gyt-gal__radio:nth-of-type(6):checked ~ .gyt-gal__stage .gyt-gal__slide[data-i="5"],
.gyt-gal__radio:nth-of-type(7):checked ~ .gyt-gal__stage .gyt-gal__slide[data-i="6"],
.gyt-gal__radio:nth-of-type(8):checked ~ .gyt-gal__stage .gyt-gal__slide[data-i="7"],
.gyt-gal__radio:nth-of-type(9):checked ~ .gyt-gal__stage .gyt-gal__slide[data-i="8"],
.gyt-gal__radio:nth-of-type(10):checked ~ .gyt-gal__stage .gyt-gal__slide[data-i="9"],
.gyt-gal__radio:nth-of-type(11):checked ~ .gyt-gal__stage .gyt-gal__slide[data-i="10"],
.gyt-gal__radio:nth-of-type(12):checked ~ .gyt-gal__stage .gyt-gal__slide[data-i="11"] {
	opacity: 1; visibility: visible;
}

/**
 * Hàng thumbnail + hai nút cuộn.
 *
 * 🔴 Nút cuộn do JS bật (`hidden` sẵn trong HTML) và CHỈ bật khi hàng thật sự tràn.
 *    CSS thuần không cuộn được một hộp khi bấm; JS hỏng thì nút không hiện và hàng
 *    vẫn vuốt được bằng ngón tay/trackpad — không mất đường dùng nào.
 */
/**
 * Radio thứ N được chọn -> slide thứ N trong LỚP PHÓNG TO hiện, thumbnail thứ N sáng viền.
 *
 * 🔴 Hai khối này cũng phải có đúng `GYT_GALLERY_MAX` dòng như hai khối của khung ngoài.
 *    `t-gallery.php` đếm cả bốn khối — lệch một dòng là ảnh cuối im lặng không hiện được.
 */
.gyt-gal__radio:nth-of-type(1):checked ~ .gyt-zoom .gyt-zoom__slide[data-i="0"],
.gyt-gal__radio:nth-of-type(2):checked ~ .gyt-zoom .gyt-zoom__slide[data-i="1"],
.gyt-gal__radio:nth-of-type(3):checked ~ .gyt-zoom .gyt-zoom__slide[data-i="2"],
.gyt-gal__radio:nth-of-type(4):checked ~ .gyt-zoom .gyt-zoom__slide[data-i="3"],
.gyt-gal__radio:nth-of-type(5):checked ~ .gyt-zoom .gyt-zoom__slide[data-i="4"],
.gyt-gal__radio:nth-of-type(6):checked ~ .gyt-zoom .gyt-zoom__slide[data-i="5"],
.gyt-gal__radio:nth-of-type(7):checked ~ .gyt-zoom .gyt-zoom__slide[data-i="6"],
.gyt-gal__radio:nth-of-type(8):checked ~ .gyt-zoom .gyt-zoom__slide[data-i="7"],
.gyt-gal__radio:nth-of-type(9):checked ~ .gyt-zoom .gyt-zoom__slide[data-i="8"],
.gyt-gal__radio:nth-of-type(10):checked ~ .gyt-zoom .gyt-zoom__slide[data-i="9"],
.gyt-gal__radio:nth-of-type(11):checked ~ .gyt-zoom .gyt-zoom__slide[data-i="10"],
.gyt-gal__radio:nth-of-type(12):checked ~ .gyt-zoom .gyt-zoom__slide[data-i="11"] {
	opacity: 1; visibility: visible;
}

.gyt-gal__radio:nth-of-type(1):checked ~ .gyt-zoom .gyt-zoom__thumb[data-i="0"],
.gyt-gal__radio:nth-of-type(2):checked ~ .gyt-zoom .gyt-zoom__thumb[data-i="1"],
.gyt-gal__radio:nth-of-type(3):checked ~ .gyt-zoom .gyt-zoom__thumb[data-i="2"],
.gyt-gal__radio:nth-of-type(4):checked ~ .gyt-zoom .gyt-zoom__thumb[data-i="3"],
.gyt-gal__radio:nth-of-type(5):checked ~ .gyt-zoom .gyt-zoom__thumb[data-i="4"],
.gyt-gal__radio:nth-of-type(6):checked ~ .gyt-zoom .gyt-zoom__thumb[data-i="5"],
.gyt-gal__radio:nth-of-type(7):checked ~ .gyt-zoom .gyt-zoom__thumb[data-i="6"],
.gyt-gal__radio:nth-of-type(8):checked ~ .gyt-zoom .gyt-zoom__thumb[data-i="7"],
.gyt-gal__radio:nth-of-type(9):checked ~ .gyt-zoom .gyt-zoom__thumb[data-i="8"],
.gyt-gal__radio:nth-of-type(10):checked ~ .gyt-zoom .gyt-zoom__thumb[data-i="9"],
.gyt-gal__radio:nth-of-type(11):checked ~ .gyt-zoom .gyt-zoom__thumb[data-i="10"],
.gyt-gal__radio:nth-of-type(12):checked ~ .gyt-zoom .gyt-zoom__thumb[data-i="11"] {
	border-color: var(--gyt-brand);
}

/* Điện thoại: cột thumbnail xuống dưới thành hàng ngang, ảnh lớn chiếm hết bề ngang */
@media (max-width: 760px) {
	.gyt-zoom { padding: 10px; }
	/* Cột dọc: hộp phải có bề ngang XÁC ĐỊNH thì `width: 100%` của khung ảnh mới có mốc quy chiếu */
	.gyt-zoom__box { flex-direction: column; gap: 10px; width: 96vw; max-width: 96vw; padding: 10px; }
	.gyt-zoom__main { width: 100%; height: auto; max-height: calc(90vh - 130px); }
	.gyt-zoom__side {
		flex: 0 0 auto; flex-direction: row;
		overflow-x: auto; overflow-y: hidden;
	}
	.gyt-zoom__thumb { width: 58px; }
	.gyt-zoom__nav { width: 34px; height: 34px; font-size: 19px; }
}

.gyt-gal__thumbwrap { position: relative; }

.gyt-gal__scroll {
	position: absolute; top: calc(50% + 5px); z-index: 3;
	transform: translateY(-50%);
	width: 28px; height: 28px;
	display: grid; place-items: center;
	padding: 0;
	border: 1px solid var(--gyt-border); border-radius: 50%;
	background: rgba(255, 255, 255, .96); color: var(--gyt-text);
	font-size: 17px; line-height: 1; cursor: pointer;
	box-shadow: 0 2px 8px rgba(17, 24, 39, .14);
}
.gyt-gal__scroll:hover { border-color: var(--gyt-brand); color: var(--gyt-brand-dark); }
.gyt-gal__scroll[disabled] { opacity: .35; cursor: default; box-shadow: none; }
.gyt-gal__scroll--prev { left: -6px; }
.gyt-gal__scroll--next { right: -6px; }

.gyt-gal__thumbs {
	display: flex; gap: 8px;
	margin-top: 10px;
	overflow-x: auto;
	scroll-behavior: smooth;

	/* Mockup không có thanh cuộn. Ẩn thanh đi, vẫn vuốt được. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.gyt-gal__thumbs::-webkit-scrollbar { display: none; }

/* Ô CỐ ĐỊNH 62px, không co giãn.
   Trước để `flex: 1 1 0` nên càng nhiều ảnh ô càng bé — 7 ảnh thì mỗi ô còn 44px,
   sản phẩm trong ô bé tới mức nhìn như bị cắt cụt. Cố định thì ô luôn đọc được,
   tràn hàng thì cuộn ngang (hàng .gyt-gal__thumbs đã có overflow-x). */
.gyt-gal__thumb {
	position: relative;
	flex: 0 0 62px; width: 62px;
	/* 🔴 Ô VUÔNG, không phải 4/3. Ảnh sản phẩm là ảnh studio nền trắng tỉ lệ 1:1;
	   nhét vào ô 4/3 thì `contain` co ảnh còn 75% bề ngang ô, nhìn bé và cụt. */
	aspect-ratio: 1 / 1; height: auto;
	border: 1.5px solid var(--gyt-border);
	border-radius: 8px;
	background: #fff; cursor: pointer; overflow: hidden;
	transition: border-color .15s ease, transform .15s ease;
}
.gyt-gal__thumb:hover { transform: translateY(-1px); border-color: var(--gyt-brand); }
.gyt-gal__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

.gyt-gal__radio:nth-of-type(1):checked ~ .gyt-gal__thumbwrap .gyt-gal__thumb[data-i="0"],
.gyt-gal__radio:nth-of-type(2):checked ~ .gyt-gal__thumbwrap .gyt-gal__thumb[data-i="1"],
.gyt-gal__radio:nth-of-type(3):checked ~ .gyt-gal__thumbwrap .gyt-gal__thumb[data-i="2"],
.gyt-gal__radio:nth-of-type(4):checked ~ .gyt-gal__thumbwrap .gyt-gal__thumb[data-i="3"],
.gyt-gal__radio:nth-of-type(5):checked ~ .gyt-gal__thumbwrap .gyt-gal__thumb[data-i="4"],
.gyt-gal__radio:nth-of-type(6):checked ~ .gyt-gal__thumbwrap .gyt-gal__thumb[data-i="5"],
.gyt-gal__radio:nth-of-type(7):checked ~ .gyt-gal__thumbwrap .gyt-gal__thumb[data-i="6"],
.gyt-gal__radio:nth-of-type(8):checked ~ .gyt-gal__thumbwrap .gyt-gal__thumb[data-i="7"],
.gyt-gal__radio:nth-of-type(9):checked ~ .gyt-gal__thumbwrap .gyt-gal__thumb[data-i="8"],
.gyt-gal__radio:nth-of-type(10):checked ~ .gyt-gal__thumbwrap .gyt-gal__thumb[data-i="9"],
.gyt-gal__radio:nth-of-type(11):checked ~ .gyt-gal__thumbwrap .gyt-gal__thumb[data-i="10"],
.gyt-gal__radio:nth-of-type(12):checked ~ .gyt-gal__thumbwrap .gyt-gal__thumb[data-i="11"] {
	border-color: var(--gyt-brand);
}

/* Bàn phím tab tới radio -> viền thumbnail sáng lên */
.gyt-gal__radio:focus-visible ~ .gyt-gal__thumbwrap .gyt-gal__thumb { outline: 2px solid var(--gyt-brand); }

.gyt-gal--empty {
	aspect-ratio: 1 / 1;
	border: 1px dashed var(--gyt-border);
	border-radius: var(--gyt-radius-lg);
	background: var(--gyt-bg-soft);
}

/* ---- Khối quyết định mua ---- */
/**
 * 🔴 `container-type: inline-size` — cỡ giá phải theo BỀ RỘNG KHỐI NÀY,
 *    không theo bề rộng màn hình.
 *
 * Đã sập vì chỗ này: giá để `clamp(29px, 3vw, 40px)`, ở màn 1440 ra đúng 40px,
 * trong khi cột chỉ rộng 362px. Hàng "Từ 469.000đ · 599.000đ · -22%" cần 378px
 * nên TRÀN RA NGOÀI thẻ 73px (`flex-wrap: nowrap` giữ được một hàng nhưng
 * không ngăn được tràn). Đổi tỉ lệ hero là hàng giá lại vỡ — vì nó đo nhầm thứ.
 *
 * Với `cqi`, cột hẹp đi bao nhiêu thì chữ tự nhỏ theo bấy nhiêu. Không phải
 * canh tay mỗi lần đổi bố cục.
 */
.gyt-decide {
	container-type: inline-size;
	border: 1px solid var(--gyt-border);
	border-radius: 16px;
	padding: 28px;
	background: #fff;
}

/* Mockup không có vạch ngăn dưới tên sản phẩm — bỏ đi cho gọn chiều cao */
.gyt-decide__head {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: var(--gyt-space-3);
}
.gyt-decide__name { margin: 0; font-size: 25px; letter-spacing: -.015em; line-height: 1.3; }
.gyt-decide__pos { margin: 5px 0 0; font-size: var(--gyt-text-sm); color: var(--gyt-text-muted); }

.gyt-decide__brand {
	flex-shrink: 0;
	padding: 3px 10px;
	border: 1px solid var(--gyt-border);
	border-radius: var(--gyt-radius-pill);
	font-size: var(--gyt-text-xs); font-weight: 600; color: var(--gyt-text-soft);
}

/* Có ảnh logo thì bỏ khung viên thuốc, để logo đứng trần như mockup */
.gyt-decide__brand--img {
	padding: 0; border: 0; border-radius: 0;
	display: block; max-width: 92px;
}
.gyt-decide__brand--img img {
	width: auto; max-width: 92px; max-height: 26px;
	object-fit: contain;
}

/**
 * CTA affiliate kiểu NHẸ — viền cam, nền trắng, đổ cam khi hover.
 * Dùng ở khối biên tập (Quick Picks) nơi nút cam đặc làm trang trông như kệ hàng.
 * Vẫn là link affiliate thật, vẫn `rel=sponsored`, vẫn bắn event — chỉ đổi vỏ.
 */
.gyt-cta--affiliate.gyt-cta--quiet {
	background: #fff; color: var(--gyt-cta, #fd4b20);
	border: 1.5px solid currentColor; box-shadow: none;
}
.gyt-cta--affiliate.gyt-cta--quiet:hover { background: var(--gyt-cta, #fd4b20); color: #fff; }
.gyt-cta--affiliate.gyt-cta--quiet .gyt-cta__icon { filter: invert(48%) sepia(84%) saturate(2800%) hue-rotate(350deg) brightness(101%) contrast(98%); }
.gyt-cta--affiliate.gyt-cta--quiet:hover .gyt-cta__icon { filter: none; }

/**
 * Icon trong nút CTA.
 *
 * 🔴 `.gyt-cta .gyt-cta__icon` (2 lớp) là CỐ Ý, không phải thừa. Nút CTA được
 *    thả vào đủ loại khung ở mọi trang, mà khung nào cũng hay có một dòng kiểu
 *    `.xxx__media img { width: 100% }`. Một lớp thì luật đó thắng và logo Shopee
 *    bị kéo giãn — đã sập một lần ở khối "Đánh giá từng sản phẩm" của Buying
 *    Guide. Studio sẽ còn dựng khung mới, nên chặn ngay tại chỗ định nghĩa CTA.
 */
.gyt-cta .gyt-cta__icon { flex-shrink: 0; width: 16px; height: 19px; }
.gyt-cta--lg .gyt-cta__icon { width: 21px; height: 25px; }

.gyt-decide__pricelabel {
	margin: 14px 0 3px;
	font-size: var(--gyt-text-xs);
	letter-spacing: .04em; text-transform: uppercase;
	color: var(--gyt-text-faint);
}

.gyt-decide__proof {
	margin: var(--gyt-space-2) 0 0;
	font-size: var(--gyt-text-sm); color: var(--gyt-text-muted);
}

.gyt-decide__nolink {
	margin: var(--gyt-space-3) 0 0;
	padding: var(--gyt-space-3);
	border-radius: var(--gyt-radius);
	background: var(--gyt-bg-soft);
	font-size: var(--gyt-text-sm); color: var(--gyt-text-muted);
}

/* ---- Giá ---- */
.gyt-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gyt-space-2); }

/* Giá · giá gốc · % giảm luôn nằm CÙNG MỘT HÀNG (theo mockup).
   Cột hẹp thì chữ tự co lại, không đẩy badge xuống dòng. */
/* `max-width: 100%` + `min-width: 0` là chốt chặn cuối: dù cỡ chữ có sai
   thế nào thì hàng giá cũng không được vẽ tràn ra ngoài thẻ. */
.gyt-price__row {
	display: flex; align-items: baseline; gap: var(--gyt-space-2);
	flex-wrap: nowrap; max-width: 100%; min-width: 0;
}

/**
 * CỠ NHỎ (thẻ trong sidebar): giá gốc lên DÒNG TRÊN, giá đã giảm + % ở dưới.
 *
 * 🔴 Đã sập: cột giữa của thẻ sidebar chỉ rộng ~150px, mà một hàng
 *    "Từ 469.000đ · 599.000đ · -22%" cần ~210px. `flex-wrap: nowrap` giữ được
 *    một hàng nhưng phần thừa ĐÈ LÊN nút "Xem giá" ở cột bên phải —
 *    badge -22% nằm chồng lên nút, bấm vào không trúng đâu cả.
 *
 * Bố cục hai dòng (anh Khai chốt 11/09):
 *      599.000đ                  <- giá gốc, gạch ngang, mờ
 *      Từ 469.000đ   -22%        <- giá thật + mức giảm
 * Con số người đọc cần là giá PHẢI TRẢ, nên nó ở dòng dưới, đậm nhất,
 * và mức giảm đứng ngay cạnh để thấy được lợi bao nhiêu.
 */
.gyt-price--sm .gyt-price__row { flex-wrap: wrap; row-gap: 1px; }
.gyt-price--sm .gyt-price__was {
	order: -1; flex-basis: 100%;
	font-size: var(--gyt-text-xs);
}
.gyt-price--sm .gyt-price__off { margin-left: auto; }

.gyt-price__now { font-weight: 800; color: var(--gyt-price); white-space: nowrap; }
.gyt-price--lg .gyt-price__now { font-size: clamp(24px, 9.3cqi, 35px); }
.gyt-price--md .gyt-price__now { font-size: var(--gyt-text-lg); }
.gyt-price--sm .gyt-price__now { font-size: var(--gyt-text-base); }

.gyt-price__was { color: var(--gyt-text-faint); font-size: var(--gyt-text-base); white-space: nowrap; }
/* Giá gốc + badge giữ cỡ nhỏ: hai thứ này mà to lên thì ăn hết chỗ của
   con số quan trọng nhất, và ép giá chính phải co lại. */
.gyt-price--lg .gyt-price__was { font-size: var(--gyt-text-base); }
.gyt-price--lg .gyt-price__off { padding: 2px 8px; font-size: var(--gyt-text-xs); }

.gyt-price__off {
	flex-shrink: 0;
	padding: 1px 7px; border-radius: var(--gyt-radius-sm);
	background: var(--gyt-price); color: #fff;
	font-size: var(--gyt-text-xs); font-weight: 700;
}

/* Chữ thay thế khi chưa có giá — cố ý KHÔNG tô màu giá và không in đậm như nút,
   để không ai tưởng đây là chỗ bấm được. */
.gyt-price__none { font-size: var(--gyt-text-base); font-weight: 500; color: var(--gyt-text-muted); }
.gyt-price__note { flex-basis: 100%; font-size: var(--gyt-text-xs); color: var(--gyt-text-muted); }

/* ---- Key benefits ---- */
.gyt-benefits { margin: 22px 0; padding: 0; list-style: none; }
.gyt-benefits__item {
	position: relative;
	padding-left: 31px; margin-bottom: 15px;
	font-size: var(--gyt-text-md); line-height: 1.55; color: var(--gyt-text-soft);
}
.gyt-benefits__item:last-child { margin-bottom: 0; }
.gyt-benefits__item::before {
	content: "✓";
	position: absolute; left: 0; top: 2px;
	width: 20px; height: 20px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--gyt-brand-light); color: var(--gyt-brand-dark);
	font-size: 11px; font-weight: 700;
}

.gyt-cta--lg {
	min-height: 62px;
	gap: 11px;
	font-size: 19px; font-weight: 700;
	letter-spacing: .005em;
	border-radius: 13px;
	box-shadow: 0 3px 14px rgba(253, 75, 32, .26);
}
.gyt-cta--lg:hover { box-shadow: 0 5px 18px rgba(253, 75, 32, .34); }

/* ================================================================== */
/* Mục lục                                                             */
/* ================================================================== */
/**
 * Mục lục dạng THANH TAB như mockup: mục đầu ("Tổng quan") đậm, có gạch chân;
 * các mục sau xám nhạt.
 *
 * DÍNH khi cuộn: bài review dài, cuộn tới "Thông số" mà muốn nhảy sang "So sánh"
 * thì phải kéo ngược lên đầu trang — thanh dính bỏ hẳn thao tác đó.
 * Nền trắng đặc + viền dưới để chữ bài không lộ ra sau lưng thanh khi cuộn qua.
 *
 * 🔴 Mục đang xem đánh dấu bằng `:first-child`, KHÔNG theo dõi cuộn.
 *    Muốn tab tự đổi theo vị trí đọc thì cần JS scrollspy — đó là tính năng mới,
 *    brief chốt không thêm. Ở đây chỉ làm nhãn "mục đầu" cho rõ hơn.
 */
.gyt-toc {
	position: sticky;
	/* Header không dính, nên chỉ cần hở một chút so với mép trên khung nhìn. */
	top: 0;
	z-index: 20;
	margin-top: var(--gyt-space-6);
	background: var(--gyt-bg);
	border-bottom: 1px solid var(--gyt-border);
}
/* Mockup xếp 9 mục trên MỘT hàng. Cho cuộn ngang thay vì xuống dòng —
   xuống dòng làm thanh tab dày gấp đôi và trông như hai hàng menu rời rạc. */
.gyt-toc__list {
	display: flex; flex-wrap: nowrap; gap: 0;
	margin: 0; padding: 0; list-style: none;
	overflow-x: auto;
	scrollbar-width: none; -ms-overflow-style: none;
}
.gyt-toc__list::-webkit-scrollbar { display: none; }
.gyt-toc__list li { margin: 0; flex: 0 0 auto; }

.gyt-toc__list a {
	display: block;
	padding: 13px 13px;
	margin-bottom: -1px;
	border-bottom: 2.5px solid transparent;
	font-size: var(--gyt-text-base); font-weight: 500;
	color: var(--gyt-text-muted);
	white-space: nowrap;
	transition: color .15s ease, border-color .15s ease;
}
.gyt-toc__list a:hover {
	color: var(--gyt-text); text-decoration: none;
	border-bottom-color: var(--gyt-border);
}

/* Tab mặc định — đậm + gạch chân xanh, đọc ra ngay là đang ở mục nào */
.gyt-toc__list li:first-child a {
	font-weight: 700;
	color: var(--gyt-brand-dark);
	border-bottom-color: var(--gyt-brand);
}
.gyt-toc__list li:first-child a:hover { border-bottom-color: var(--gyt-brand); }
.gyt-toc__list li:first-child a:first-child { padding-left: 0; }

/* ================================================================== */
/* Tóm tắt nhanh                                                       */
/* ================================================================== */
/**
 * MỘT KHUNG LIỀN, sáu ô chia bằng vạch mảnh. Đo trên mockup: cao 94px,
 * viền trên y=741, viền dưới y=835, vạch chia ở x=138/228/322/456/578.
 *
 * Đã đi vòng hai lần, ghi lại cho khỏi lặp:
 *   b1  6 thẻ rời viền dày, padding 16   -> tụt 2 hàng, "tốn diện tích".
 *   b2  dải liền chia vạch               -> đúng cấu trúc nhưng bỏ mất icon.
 *   b3  6 thẻ rời bo góc + icon          -> đẹp từng ô nhưng rơi ô lẻ xuống
 *                                           hàng hai, thành "rườm rà".
 * Bản này = cấu trúc của b2 + icon của b3, tức là đúng mockup.
 *
 * 🔴 Vạch chia vẽ bằng box-shadow, KHÔNG phải border:
 *    border làm ô co lại 1px so với ô bên cạnh. Vạch của cột đầu / hàng đầu
 *    nằm NGOÀI khung nên bị overflow:hidden cắt đi -> không cần :first-child,
 *    và ô xuống hàng ở khổ hẹp vẫn có vạch ngang đúng chỗ.
 *
 * 🔴 Giá trị thông số kẹp 2 DÒNG. Có giá trị rất dài ("Thẻ microSD tối đa
 *    512GB, Tapo Care (cloud, có phí)") -> để tự do thì cả hàng bị kéo cao theo.
 *    Không mất thông tin: bảng Thông số kỹ thuật ngay dưới in đủ nguyên văn.
 */
.gyt-hl {
	display: grid;
	/* Số cột do component truyền vào (--gyt-hl-cols = số ô thực tế).
	   Mặc định 6 để vẫn chạy nếu ai đó dùng lại markup mà quên truyền. */
	grid-template-columns: repeat(var(--gyt-hl-cols, 6), minmax(0, 1fr));
	border: 1px solid var(--gyt-border-soft);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}
/* Khổ hẹp thì xuống 3 rồi 2 cột. `min()` để bộ 2 ô không bị kéo thành 3 cột
   (một cột trống), mà vẫn là 2 ô chia đôi hàng. */
@media (max-width: 1180px) { .gyt-hl { grid-template-columns: repeat(min(var(--gyt-hl-cols, 3), 3), minmax(0, 1fr)); } }
@media (max-width: 620px)  { .gyt-hl { grid-template-columns: repeat(min(var(--gyt-hl-cols, 2), 2), minmax(0, 1fr)); } }

.gyt-hl__item {
	display: flex; flex-direction: column;
	padding: 18px 16px 19px;
	box-shadow: -1px 0 0 var(--gyt-border-soft), 0 -1px 0 var(--gyt-border-soft);
}

/* Icon xám trung tính như mockup — KHÔNG tô xanh thương hiệu.
   Sáu ô xanh liền nhau làm khối này kêu to hơn cả tiêu đề mục. */
.gyt-hl__ico {
	display: grid; place-items: center;
	width: 36px; height: 36px; margin-bottom: 13px;
	border-radius: 10px;
	background: #eef1f5;
	color: var(--gyt-text);
}
.gyt-hl__ico .gyt-hl__icon { width: 21px; height: 21px; }

/* Giá trị ĐẬM ở trên, tên thông số mờ ở dưới — đúng thứ tự trong mockup. */
.gyt-hl__val {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
	overflow: hidden;
	font-weight: 700; font-size: 14.5px;
	line-height: 1.34; color: var(--gyt-text);
}
.gyt-hl__lab {
	display: block; margin-top: 5px;
	font-size: 12.5px; line-height: 1.4;
	color: var(--gyt-text-faint);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ================================================================== */
/* Đánh giá nhanh                                                      */
/* ================================================================== */
/* Khoi mo dau sidebar - cho to han de co thu bac ro so voi ba khoi duoi. */
.gyt-verdict {
	border: 1px solid #d9eee4;
	border-radius: 14px;
	padding: 20px;
	background: #f4fbf7;
}
.gyt-verdict__h {
	margin: 0 0 var(--gyt-space-3);
	font-size: 15px; font-weight: 700;
	letter-spacing: -.01em;
	color: var(--gyt-text);
}
.gyt-verdict__top { display: flex; align-items: center; gap: var(--gyt-space-3); }

.gyt-verdict__score {
	flex-shrink: 0;
	min-width: 62px; text-align: center;
	padding: 9px 12px; border-radius: 10px;
	background: var(--gyt-brand); color: #fff;
	font-size: 23px; font-weight: 800; line-height: 1;
}
.gyt-verdict__score small { font-size: 11px; font-weight: 600; opacity: .8; }
/* Đo mockup (khổ 1024) rồi quy đổi sang khổ site: nhãn ~14px, tóm tắt ~14px.
   Bản trước để 13px -> nhỏ hơn cả mockup, đọc bị yếu. */
.gyt-verdict__label {
	font-weight: 700; font-size: 15px;
	color: var(--gyt-brand-dark); line-height: 1.35;
}
.gyt-verdict__sum {
	margin: var(--gyt-space-3) 0 0;
	font-size: 14px; line-height: 1.62;
	color: var(--gyt-text-soft);
}

/* ================================================================== */
/* Phù hợp / Không phù hợp · Ưu / Nhược                                */
/* ================================================================== */
.gyt-fit__grid, .gyt-pc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gyt-space-4); }
.gyt-fit--side .gyt-fit__grid { grid-template-columns: 1fr; gap: var(--gyt-space-3); }

@media (max-width: 700px) {
	.gyt-fit__grid, .gyt-pc { grid-template-columns: 1fr; }
}

.gyt-fit__col, .gyt-pc__col {
	border: 1px solid var(--gyt-border);
	border-radius: 14px;
	padding: 24px;
	background: #fff;
}
/* Pastel NHAT. Nen cang dam thi chu cang phai dam theo de doc duoc,
   cuoi cung ca khoi keu to hon phan review nam ngay tren no. */
.gyt-fit__col--yes, .gyt-pc__col--pro { border-color: #d9eee4; background: #f4fbf7; }
.gyt-fit__col--no,  .gyt-pc__col--con { border-color: #f6e2e2; background: #fffafa; }

.gyt-fit__h, .gyt-pc__h {
	margin: 0 0 18px;
	font-size: var(--gyt-text-md); font-weight: 700; letter-spacing: -.01em;
}
.gyt-fit__col--yes .gyt-fit__h, .gyt-pc__col--pro .gyt-pc__h { color: var(--gyt-brand-dark); }
.gyt-fit__col--no  .gyt-fit__h, .gyt-pc__col--con .gyt-pc__h { color: var(--gyt-negative); }

.gyt-fit__col ul, .gyt-pc__col ul { margin: 0; padding: 0; list-style: none; }
.gyt-fit__col li, .gyt-pc__col li {
	position: relative; padding-left: 28px; margin-bottom: 13px;
	font-size: var(--gyt-text-base); line-height: 1.58; color: var(--gyt-text-soft);
}
.gyt-fit__col li:last-child, .gyt-pc__col li:last-child { margin-bottom: 0; }
/* Icon nhot trong o co dinh 18px -> moi dong thang hang bat ke ky tu rong khac nhau. */
.gyt-fit__col li::before, .gyt-pc__col li::before {
	position: absolute; left: 0; top: 3px;
	width: 18px; height: 18px;
	display: grid; place-items: center;
	border-radius: 50%;
	font-size: 10.5px; font-weight: 700; line-height: 1;
}
.gyt-fit__col--yes li::before, .gyt-pc__col--pro li::before {
	content: "✓"; color: var(--gyt-brand-dark); background: #daf1e5;
}
.gyt-fit__col--no  li::before, .gyt-pc__col--con li::before {
	content: "✕"; color: var(--gyt-negative); background: #fae0e0;
}
/* Trong sidebar thi bo nen tron - o nho, them nen vao la roi. */
.gyt-fit--side li::before { background: none; }

/* Bản sidebar: gộp thành MỘT thẻ, hai nhóm ngăn bằng vạch mảnh.
   Hai thẻ viền riêng như bản cũ làm sidebar bị vụn. */
.gyt-fit--side {
	border: 1px solid var(--gyt-border-soft);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}
/* Mockup xếp hai nhóm THÀNH 2 CỘT cạnh nhau trong sidebar (x=718 và x=852),
   không phải xếp chồng. Ngăn nhau bằng vạch dọc mảnh. */
.gyt-fit--side .gyt-fit__grid { grid-template-columns: 1fr 1fr; gap: 0; }
.gyt-fit--side .gyt-fit__col {
	padding: var(--gyt-space-4) var(--gyt-space-3);
	border: 0; border-radius: 0; background: transparent;
}
.gyt-fit--side .gyt-fit__col--no { border-left: 1px solid var(--gyt-border-soft); }
.gyt-fit--side .gyt-fit__h {
	margin-bottom: var(--gyt-space-3);
	font-size: 14px; font-weight: 700;
	letter-spacing: -.01em;
}
.gyt-fit--side li {
	font-size: 13px; line-height: 1.5;
	margin-bottom: 9px; padding-left: 19px;
}
.gyt-fit--side li::before { font-size: 12px; }

/* ================================================================== */
/* Review chi tiết                                                     */
/* ================================================================== */
/**
 * Nhip doc cho phan dai nhat trang.
 *
 * KHONG them callout / box note duoc: `review_sections` chi co
 * {key, title, content}. Muon co box note phai khai them field trong
 * GYT_Fields, ma anh Khai chot la KHONG doi data model.
 * Nen nhip phai lay tu khoang cach, so thu tu va doan mo dau.
 */
.gyt-review__sec { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--gyt-border-soft); }
.gyt-review__sec:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }

.gyt-review__h {
	display: flex; align-items: center; gap: 13px;
	margin-bottom: 18px;
	font-size: 22px; letter-spacing: -.015em; line-height: 1.35;
	/* Trừ chiều cao thanh mục lục dính, nếu không tiêu đề mục bị thanh che mất */
	scroll-margin-top: 74px;
}
/* So thu tu thanh huy hieu tron: mat bat duoc moc muc ma khong can mau me. */
.gyt-review__no {
	flex-shrink: 0;
	width: 30px; height: 30px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--gyt-brand-tint); color: var(--gyt-brand-dark);
	font-size: 14px; font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* 68ch là bề rộng dòng dễ đọc nhất cho văn bản dài */
/* Trải hết cột. Bó lại bằng max-width làm chữ dồn thành cột hẹp,
   đẩy trang dài ra một cách vô nghĩa. */
/**
 * 🔴 KHÔNG bó bề rộng dòng. ĐỪNG thêm `max-width` vào đây.
 *
 * Đã thử HAI LẦN, anh Khai bác cả hai:
 *   68ch (~620px) -> "chữ nội dung đánh giá chi tiết đang bị co lại"
 *   720px         -> "nó lại bị thụt vào bên trái, không full"
 *
 * Lý do anh đúng: mọi khối khác trong cột (tóm tắt nhanh, bảng thông số,
 * tiêu đề mục) đều chạy trọn 919px. Riêng đoạn văn dừng ở 720 thì tạo ra
 * một mép phải gãy giữa trang — mắt đọc ra là LỖI DÀN TRANG, chứ không đọc ra
 * là "bề rộng dòng dễ đọc". Nhất quán theo mép khối thắng lý thuyết typography
 * ở đây.
 *
 * Muốn dòng ngắn lại thì phải thu CẢ CỘT, không phải thu riêng đoạn văn.
 */
.gyt-review__body { color: var(--gyt-text-soft); font-size: var(--gyt-text-md); line-height: 1.85; }
.gyt-review__body p { margin-bottom: 18px; }
.gyt-review__body p:last-child { margin-bottom: 0; }

/* Doan mo dau moi muc dam hon mot nhip - vao muc la mat co cho bam.
   Chi ap dung khi muc co TU 2 DOAN tro len; mot doan ma cung in dam
   thi thanh ca muc deu dam, vo nghia. */
.gyt-review__body p:first-child:not(:last-child) {
	color: var(--gyt-text); font-size: 17.5px; line-height: 1.75;
}

.gyt-review__body ul, .gyt-review__body ol { margin: 0 0 var(--gyt-space-4); padding-left: 22px; }
.gyt-review__body li { margin-bottom: 7px; }
.gyt-review__body strong { color: var(--gyt-text); font-weight: 700; }

/* ================================================================== */
/* Thông số                                                            */
/* ================================================================== */
.gyt-specs {
	width: 100%;
	border: 1px solid var(--gyt-border-soft);
	border-radius: 14px; overflow: hidden;
	border-collapse: collapse;
}
.gyt-specs th, .gyt-specs td {
	padding: 19px var(--gyt-space-6);
	text-align: left; font-size: var(--gyt-text-md); line-height: 1.55;
}
/* Nhan dam vua, KHONG to nen ca cot: cot xam chay doc la thu lam bang
   trong nhu bang quan tri. Phan biet bang do dam va mau chu la du. */
.gyt-specs th {
	width: 34%; font-weight: 600;
	color: var(--gyt-text); background: transparent;
}
.gyt-specs td { color: var(--gyt-text-soft); }
/* Zebra rat nhat thay cho duong ke ngang. */
.gyt-specs tbody tr:nth-child(even) { background: #fbfcfe; }
.gyt-specs td.is-empty { color: var(--gyt-text-faint); }

/* ================================================================== */
/* Video reviewer                                                      */
/* ================================================================== */
/**
 * 🔴 Khối này CỐ Ý nhẹ hơn phần review.
 *    Nó là lớp bằng chứng, không phải nội dung chính. Làm nó bắt mắt hơn
 *    ưu-nhược điểm là đẩy người đọc sang TikTok/YouTube trước khi họ kịp
 *    bấm CTA Shopee — mà affiliate Shopee tính theo last-click.
 *
 * Desktop 2-4 cột tuỳ bề rộng; khổ hẹp còn 1 thẻ to.
 * `auto-fit` để 2 video thì chia đôi hàng, không để ô trống bên phải.
 */
/* `align-items: start` + tiêu đề kẹp 2 dòng -> mọi thẻ cao bằng nhau,
   dù tiêu đề video dài ngắn khác nhau. */
.gyt-videos {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--gyt-space-5); align-items: start;
}
@media (max-width: 560px) { .gyt-videos { grid-template-columns: minmax(0, 1fr); } }

.gyt-video__facade { display: block; }
.gyt-video__facade:hover { text-decoration: none; }

.gyt-video__thumb {
	position: relative; display: block;
	aspect-ratio: 16 / 9;
	border-radius: var(--gyt-radius); overflow: hidden;
	background: var(--gyt-bg-soft);
}
/* Ảnh nền video là ảnh chụp cảnh thật (ngang) -> `cover` là đúng ở đây,
   khác hẳn ảnh sản phẩm cắt nền (phải `contain`, xem ghi chú ở gallery). */
.gyt-video__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gyt-video__noimg { display: block; width: 100%; height: 100%; background: var(--gyt-bg-soft); }

.gyt-video__play {
	position: absolute; inset: 0; margin: auto;
	width: 50px; height: 50px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: rgba(11, 15, 26, .66); color: #fff;
	transition: background .15s ease, transform .15s ease;
}
.gyt-video__play svg { margin-left: 2px; } /* tam giác lệch phải cho cân thị giác */
.gyt-video__facade:hover .gyt-video__play { background: rgba(11, 15, 26, .82); transform: scale(1.06); }

.gyt-video__time {
	position: absolute; right: 7px; bottom: 7px;
	padding: 2px 6px; border-radius: 4px;
	background: rgba(11, 15, 26, .78); color: #fff;
	font-size: 11.5px; font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Tiêu đề tối đa 2 dòng -> mọi thẻ cao bằng nhau dù tiêu đề dài ngắn khác nhau */
/* Đúng 4 video -> 2×2, không để card thứ tư lẻ hàng dưới lưới 3 cột (bắt 13/09 ở Comparison) */
.gyt-videos[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .gyt-videos[data-count="4"] { grid-template-columns: minmax(0, 1fr); } }

/* Nhãn quan hệ (trang so sánh): "So sánh A vs B" / "Về X" — nhỏ, đứng trên tiêu đề */
.gyt-video__rel {
	display: inline-block; margin: 10px 0 -4px; padding: 2px 8px;
	border-radius: var(--gyt-radius-pill); background: var(--gyt-brand-tint); color: var(--gyt-brand-dark);
	font-size: 11.5px; font-weight: 700; line-height: 1.4;
}
.gyt-video__title {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
	overflow: hidden;
	margin-top: var(--gyt-space-3);
	font-size: var(--gyt-text-base); font-weight: 600; line-height: 1.4;
	color: var(--gyt-text);
}
.gyt-video__facade:hover .gyt-video__title { color: var(--gyt-brand-dark); }

/* Ghi công: phải đọc được nhưng KHÔNG nổi hơn nội dung review (spec §13) */
.gyt-video__by {
	display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
	margin: 5px 0 0;
	font-size: var(--gyt-text-xs); color: var(--gyt-text-muted);
}
.gyt-video__plat { display: inline-flex; align-items: center; gap: 4px; }
.gyt-video__platicon { flex-shrink: 0; opacity: .75; }

/**
 * KHUNG XEM PHÓNG TO.
 *
 * Card trong lưới chỉ rộng ~210px — nhúng video vào đó thì chữ trong video
 * không đọc nổi. Phóng card to lên thì khối video át cả phần review, đúng thứ
 * spec §13 dặn tránh. Nên mở hẳn một khung riêng: giữ được cả hai.
 *
 * 🔴 KHÔNG đặt bất cứ thứ gì phủ lên iframe. Tên kênh và link gốc bên trong
 *    khung nhúng của YouTube/TikTok/Facebook phải bấm được — che đi là vi phạm
 *    điều khoản nhúng của họ. Nút ✕ nằm NGOÀI khung, góc trên bên phải.
 */
.gyt-vmodal {
	position: fixed; inset: 0; z-index: 300;
	display: grid; place-items: center;
	padding: clamp(16px, 4vw, 48px);
}
.gyt-vmodal__bg {
	position: absolute; inset: 0;
	border: 0; padding: 0;
	background: rgba(11, 15, 26, .82);
	cursor: zoom-out;
}

.gyt-vmodal__box {
	position: relative;
	width: min(980px, 100%);
	aspect-ratio: 16 / 9;
	max-height: 84vh;
	border-radius: 14px; overflow: hidden;
	background: #000;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
/* TikTok quay dọc — ép vào 16:9 thì hai bên đen kịt, video còn bé hơn cả card. */
.gyt-vmodal__box--portrait {
	width: min(420px, 100%);
	aspect-ratio: 9 / 16;
	max-height: 86vh;
}

.gyt-vmodal__frame { width: 100%; height: 100%; border: 0; display: block; }

.gyt-vmodal__close {
	position: absolute; top: -14px; right: -14px;
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border: 0; border-radius: 50%;
	background: #fff; color: var(--gyt-text);
	font-size: 15px; font-weight: 700; cursor: pointer;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}
.gyt-vmodal__close:hover { background: var(--gyt-bg-soft); }

/* Khung hẹp: nút ✕ lùi vào trong cho khỏi bị cắt mất ở mép màn hình */
@media (max-width: 560px) {
	.gyt-vmodal__close { top: 8px; right: 8px; }
}

/* Khoá cuộn nền khi khung đang mở — cuộn nền phía sau video rất khó chịu */
.gyt-noscroll { overflow: hidden; }

.gyt-videos__note {
	margin: var(--gyt-space-4) 0 0;
	font-size: var(--gyt-text-xs); color: var(--gyt-text-faint);
}

/* ================================================================== */
/* Người mua nói gì                                                    */
/* ================================================================== */
/**
 * 🔴 KHÔNG được trông giống thẻ đánh giá của sàn.
 *    Không màu cam (cam là màu CTA affiliate, dùng ở đây là mời người đọc
 *    rời trang), không sao to đỏ chói, không nút mua xen giữa.
 *    Dùng đúng pastel xanh/đỏ của Ưu/Nhược điểm để cả trang là một ngôn ngữ.
 *
 * 🔴 Điểm 4.8/5 ở đây CỐ Ý nhỏ hơn điểm 8.5/10 ở sidebar.
 *    Kia là nhận định của Gợi Ý Tốt — thứ phân biệt mình với trang affiliate rác.
 *    Đây là điểm của người mua trên sàn. Để cái này to hơn là tự hạ giá mình.
 */
.gyt-buyer {
	display: grid;
	grid-template-columns: minmax(230px, .95fr) 1fr 1fr;
	gap: var(--gyt-space-4);
	align-items: start;
}
@media (max-width: 1024px) { .gyt-buyer { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .gyt-buyer { grid-template-columns: 1fr; } }

/* ---- A · Tổng quan đánh giá ---- */
.gyt-buyer__score {
	padding: 20px;
	border: 1px solid var(--gyt-border-soft); border-radius: 14px;
	background: var(--gyt-bg-soft);
}
/* Điểm dùng màu chữ thường, KHÔNG dùng --gyt-price: màu đó dành riêng cho giá.
   Lẫn lộn hai thứ làm người đọc tưởng 4.8 là số tiền. */
.gyt-buyer__num {
	margin: 0;
	font-size: 34px; font-weight: 800; line-height: 1;
	color: var(--gyt-text);
	font-variant-numeric: tabular-nums;
}
.gyt-buyer__num small { font-size: 17px; font-weight: 600; color: var(--gyt-text-muted); }

.gyt-buyer__stars { margin: 9px 0 0; font-size: 16px; letter-spacing: 2px; line-height: 1; }
.gyt-buyer__star { color: var(--gyt-border); }
.gyt-buyer__star.is-on { color: var(--gyt-star); }
/* Nửa sao: tô vàng nửa trái bằng gradient, giữ nửa phải xám.
   4,8 mà vẽ đủ 5 sao vàng là nói sai số liệu. */
.gyt-buyer__star.is-half {
	background: linear-gradient(90deg, var(--gyt-star) 50%, var(--gyt-border) 50%);
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
}

.gyt-buyer__count { margin: 10px 0 0; font-size: var(--gyt-text-sm); color: var(--gyt-text-muted); }

/* ---- Phân bố sao ---- */
.gyt-bars { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.gyt-bars__row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; }
.gyt-bars__label {
	font-size: var(--gyt-text-xs); color: var(--gyt-text-muted);
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gyt-bars__track { height: 7px; border-radius: 4px; background: #e7ebf0; overflow: hidden; }
/* Thanh dùng xanh thương hiệu, không dùng vàng sao — 5 thanh vàng liền nhau
   làm khối này loè loẹt như trang sàn. */
.gyt-bars__fill { display: block; height: 100%; border-radius: 4px; background: var(--gyt-brand); }
.gyt-bars__n {
	min-width: 34px; text-align: right;
	font-size: var(--gyt-text-xs); color: var(--gyt-text-muted);
	font-variant-numeric: tabular-nums;
}

/* ---- B · Insight tổng hợp — dùng chung pastel với Ưu/Nhược điểm ---- */
.gyt-buyer__col {
	padding: 20px;
	border: 1px solid var(--gyt-border); border-radius: 14px;
	background: #fff;
}
.gyt-buyer__col--good { border-color: #d9eee4; background: #f4fbf7; }
.gyt-buyer__col--bad  { border-color: #f6e2e2; background: #fffafa; }

.gyt-buyer__h { margin: 0 0 16px; font-size: var(--gyt-text-md); font-weight: 700; letter-spacing: -.01em; }
.gyt-buyer__col--good .gyt-buyer__h { color: var(--gyt-brand-dark); }
.gyt-buyer__col--bad  .gyt-buyer__h { color: var(--gyt-negative); }

.gyt-buyer__col ul { margin: 0; padding: 0; list-style: none; }
.gyt-buyer__col li {
	position: relative; padding-left: 28px; margin-bottom: 11px;
	font-size: var(--gyt-text-base); line-height: 1.55; color: var(--gyt-text-soft);
}
.gyt-buyer__col li:last-child { margin-bottom: 0; }
.gyt-buyer__col li::before {
	position: absolute; left: 0; top: 3px;
	width: 18px; height: 18px;
	display: grid; place-items: center;
	border-radius: 50%;
	font-size: 10.5px; font-weight: 700; line-height: 1;
}
.gyt-buyer__col--good li::before { content: "✓"; color: var(--gyt-brand-dark); background: #daf1e5; }
.gyt-buyer__col--bad  li::before { content: "✕"; color: var(--gyt-negative); background: #fae0e0; }

/* ---- C · Review tiêu biểu ---- */
/* Khoảng thở giữa phần tổng quan và các thẻ review: đây là RANH GIỚI giữa
   "số liệu tổng hợp" và "lời người mua cụ thể" — hai loại thông tin khác nhau,
   cần tách rõ hơn khoảng cách giữa các thẻ cùng loại. */
.gyt-quotes {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: var(--gyt-space-4); margin-top: 28px;
	align-items: start;
}
.gyt-quote {
	position: relative;
	margin: 0; padding: 18px;
	border: 1px solid var(--gyt-border-soft); border-radius: 14px;
	background: #fff;
}
.gyt-quote__stars { margin: 0 0 10px; font-size: 13px; letter-spacing: 1.5px; line-height: 1; }
.gyt-quote__img {
	width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: 9px; margin-bottom: 12px;
}
.gyt-quote blockquote {
	margin: 0 0 12px;
	font-size: var(--gyt-text-base); line-height: 1.6; color: var(--gyt-text-soft);
}
/* Kẹp 3 dòng; bung ra khi bấm "Xem thêm". Checkbox ẩn nên không cần JS. */
.gyt-quote blockquote.is-clamp {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
	overflow: hidden;
}
.gyt-quote__toggle { position: absolute; opacity: 0; pointer-events: none; }
.gyt-quote__toggle:checked ~ blockquote.is-clamp { -webkit-line-clamp: unset; }

.gyt-quote__more {
	display: inline-block; margin: -4px 0 12px;
	font-size: var(--gyt-text-xs); font-weight: 600;
	color: var(--gyt-brand-dark); cursor: pointer;
}
.gyt-quote__more:hover { text-decoration: underline; }
.gyt-quote__more--close { display: none; }
.gyt-quote__toggle:checked ~ .gyt-quote__more .gyt-quote__more--open { display: none; }
.gyt-quote__toggle:checked ~ .gyt-quote__more .gyt-quote__more--close { display: inline; }
/* Bàn phím tab tới ô ẩn -> viền nút sáng lên, vẫn dùng được không cần chuột */
.gyt-quote__toggle:focus-visible ~ .gyt-quote__more { outline: 2px solid var(--gyt-brand); outline-offset: 2px; }

.gyt-quote figcaption { font-size: var(--gyt-text-xs); color: var(--gyt-text-muted); }
.gyt-quote__who { display: block; font-weight: 600; color: var(--gyt-text-soft); margin-bottom: 2px; }
/* Nhãn nguồn nhẹ hơn một nấc: nó là chú thích, không được tranh chú ý với lời review */
.gyt-quote figcaption > span:last-child { color: var(--gyt-text-faint); }

.gyt-buyer__note {
	margin-top: var(--gyt-space-4);
	font-size: var(--gyt-text-xs); line-height: 1.6; color: var(--gyt-text-faint);
}

/* ================================================================== */
/* Thẻ sản phẩm                                                        */
/* ================================================================== */
.gyt-pcard { position: relative; background: #fff; }

/**
 * Thẻ phải ĐẦY, không thưa.
 *
 * Bản trước ảnh 4:3 + padding 16 nên giữa ảnh và cụm chữ hở một mảng trắng,
 * nhìn như thiếu nội dung. Ảnh vuông (đúng tỉ lệ ảnh sản phẩm thật) lấp kín
 * phần trên, cụm chữ dồn xuống dưới, hai nút bám đáy -> thẻ có bố cục rõ ràng.
 *
 * `margin-top: auto` ở hàng nút: tên sản phẩm dài ngắn khác nhau nhưng
 * nút của mọi thẻ vẫn thẳng hàng nhau ở đáy.
 */
.gyt-pcard--grid, .gyt-pcard--compact {
	display: flex; flex-direction: column;
	border: 1px solid var(--gyt-border); border-radius: 14px;
	padding: 18px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
/**
 * 25/09 (anh Khai): thẻ CÓ ẢNH -> ảnh tràn SÁT MÉP như Shopee, thẻ bỏ padding, phần chữ tự đệm.
 * Trước đó ảnh nằm giữa viền trắng 18px, thẻ 315px chỉ có ảnh 160px -> "rời rạc, nhìn không đã".
 * Thẻ KHÔNG ảnh (--noimg) giữ padding — luật riêng bên dưới. Mobile (≤600) có bộ số riêng ở mobile.css.
 */
.gyt-pcard--grid:not(.gyt-pcard--noimg) { padding: 0; overflow: hidden; }
.gyt-pcard--grid:not(.gyt-pcard--noimg) .gyt-pcard__body { padding: 14px 16px 16px; }
.gyt-pcard--grid:hover { border-color: var(--gyt-brand-light); box-shadow: 0 3px 14px rgba(17, 24, 39, .06); }

.gyt-pcard--grid .gyt-pcard__media {
	display: block;
	border-radius: 0; overflow: hidden;
	background: #fff;
}
/* `cover` trên khung vuông: ảnh Shopee vốn 1:1 nên không mất gì; ảnh lệch tỉ lệ bị xén mép — chấp nhận ở THẺ,
   gallery bài sản phẩm vẫn `contain` (mục 6c). */
.gyt-pcard--grid .gyt-pcard__media img {
	display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
	background: #fff;
}
/* Hai nút: "Xem đánh giá" (xanh, nội bộ) và "Xem giá" (cam, ra Shopee)
   chia đôi hàng. Xếp chồng làm thẻ cao lên vô ích. */
.gyt-pcard--grid .gyt-pcard__body { display: flex; flex-direction: column; flex: 1; }
.gyt-pcard--grid .gyt-pcard__actions {
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--gyt-space-2);
	margin-top: auto; padding-top: 14px;
}
.gyt-pcard--grid .gyt-pcard__actions .gyt-cta { width: 100%; min-height: 40px; }

/**
 * Mockup xếp 3 cột trên MỘT hàng: ảnh | tên+giá | nút "Xem giá".
 * Bản trước xếp chồng tên/giá/nút nên mỗi thẻ cao gấp đôi, sidebar dài lê thê.
 *
 * `display: contents` ở .gyt-pcard__body để các phần tử con trực tiếp
 * tham gia lưới của thẻ — không phải sửa markup component.
 */
.gyt-pcard--row {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) auto;
	column-gap: 12px; row-gap: 3px;
	align-items: center;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--gyt-border-soft);
}
.gyt-pcard--row .gyt-pcard__body { display: contents; }
.gyt-pcard--row .gyt-pcard__media { grid-column: 1; grid-row: 1 / span 2; }
.gyt-pcard--row .gyt-pcard__media img { width: 46px; height: 46px; }
.gyt-pcard--row .gyt-pcard__name { grid-column: 2; grid-row: 1; min-width: 0; }
/* `min-width: 0` bắt buộc: mặc định ô lưới không co nhỏ hơn nội dung,
   thiếu dòng này thì hàng giá dài vẫn đẩy tràn sang cột nút. */
.gyt-pcard--row .gyt-price { grid-column: 2; grid-row: 2; min-width: 0; }
.gyt-pcard--row .gyt-pcard__actions { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
.gyt-pcard--row .gyt-cta { min-height: 34px; padding: 0 11px; font-size: 13px; }
.gyt-pcard--row .gyt-pcard__award,
.gyt-pcard--row .gyt-pcard__rating { display: none; }
.gyt-pcard--row:last-child { border-bottom: 0; padding-bottom: 0; }
.gyt-pcard--row .gyt-pcard__media img { width: 60px; height: 60px; object-fit: contain; }

/**
 * 🔴 KHÔNG còn ô xám giữ chỗ (`.gyt-pcard__noimg` đã bỏ 13/09). Không ảnh thật -> component không
 *    dựng `.gyt-pcard__media`, thẻ thành THẺ CHỮ GỌN: không giữ tỉ lệ/chiều cao ảnh.
 */
.gyt-pcard--grid.gyt-pcard--noimg { padding: 16px 18px; }
.gyt-pcard--grid.gyt-pcard--noimg .gyt-pcard__name { margin-top: 0; }
/* row không ảnh: 2 cột (tên+giá | nút) thay vì 3 */
.gyt-pcard--row.gyt-pcard--noimg { grid-template-columns: minmax(0, 1fr) auto; }
.gyt-pcard--row.gyt-pcard--noimg .gyt-pcard__name,
.gyt-pcard--row.gyt-pcard--noimg .gyt-price { grid-column: 1; }
.gyt-pcard--row.gyt-pcard--noimg .gyt-pcard__actions { grid-column: 2; }

.gyt-pcard__rank {
	position: absolute; top: 8px; left: 8px; z-index: 1;
	width: 26px; height: 26px; display: grid; place-items: center;
	border-radius: 50%; background: var(--gyt-brand); color: #fff;
	font-size: var(--gyt-text-sm); font-weight: 800;
}

.gyt-pcard__award {
	display: inline-block; margin-bottom: 6px; padding: 2px 8px;
	border-radius: var(--gyt-radius-sm);
	background: var(--gyt-brand-light); color: var(--gyt-brand-dark);
	font-size: var(--gyt-text-xs); font-weight: 700;
}

.gyt-pcard__name { margin: 14px 0 5px; font-size: var(--gyt-text-md); font-weight: 600; line-height: 1.4; }
.gyt-pcard--row .gyt-pcard__name { margin-top: 0; font-size: 14px; line-height: 1.35; }
.gyt-pcard__name a { color: var(--gyt-text); }
.gyt-pcard__name a:hover { color: var(--gyt-brand-dark); }

.gyt-pcard__rating { margin: 0 0 4px; font-size: var(--gyt-text-xs); color: var(--gyt-text-muted); }
.gyt-stars { color: var(--gyt-star); }
/* Một câu lý do — kẹp 2 dòng để mọi thẻ cùng chiều cao phần chữ */
.gyt-pcard__reason {
	margin: 6px 0 10px; font-size: var(--gyt-text-base); line-height: 1.5;
	color: var(--gyt-text-muted);
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.gyt-pcard--row .gyt-pcard__reason { display: none; }

.gyt-pcard__actions { display: flex; flex-wrap: wrap; gap: var(--gyt-space-2); margin-top: var(--gyt-space-3); }
.gyt-pcard--grid .gyt-pcard__actions .gyt-cta { flex: 1 1 auto; }
.gyt-pcard--row .gyt-pcard__actions { margin-top: 6px; }

/**
 * Tối đa 3 thẻ một hàng, chia đều.
 *
 * `auto-fit` (không phải `auto-fill`): còn 2 thẻ thì 2 thẻ chia đôi hàng,
 * không để lại ô rỗng bên phải. `auto-fill` giữ cột trống -> lưới nhìn thủng.
 * Bề rộng tối thiểu 250px là ngưỡng mà tên sản phẩm không xuống 3 dòng
 * và hai nút vẫn đứng cạnh nhau được.
 */
.gyt-pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--gyt-space-5); }

/* ================================================================== */
/* Thẻ bài viết                                                        */
/* ================================================================== */
.gyt-acard--grid {
	border: 1px solid var(--gyt-border); border-radius: var(--gyt-radius); overflow: hidden; background: #fff;
}
.gyt-acard--grid .gyt-acard__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.gyt-acard--grid .gyt-acard__body { padding: var(--gyt-space-4); }

.gyt-acard--row {
	display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--gyt-space-3);
	align-items: start;
	padding-bottom: var(--gyt-space-3);
	border-bottom: 1px solid var(--gyt-border-soft);
}
.gyt-acard--row:last-child { border-bottom: 0; padding-bottom: 0; }
.gyt-acard--row .gyt-acard__media img { width: 78px; height: 58px; object-fit: cover; border-radius: 8px; }
.gyt-acard--row .gyt-acard__type { display: none; }

/* Không thumbnail -> thẻ chỉ chữ (`.gyt-acard__noimg` đã bỏ 13/09): nhãn loại + tiêu đề + ngày, không khung ảnh */
.gyt-acard--grid.gyt-acard--noimg { display: flex; flex-direction: column; justify-content: center; }
.gyt-acard--grid.gyt-acard--noimg .gyt-acard__body { padding: 18px 18px 16px; }
.gyt-acard--grid.gyt-acard--noimg .gyt-acard__title { -webkit-line-clamp: 3; }
.gyt-acard--row.gyt-acard--noimg { grid-template-columns: minmax(0, 1fr); }

.gyt-acard__type {
	display: inline-block; margin-bottom: 5px;
	font-size: var(--gyt-text-xs); font-weight: 700; letter-spacing: .03em;
	text-transform: uppercase; color: var(--gyt-brand-dark);
}
/* Tiêu đề kẹp 2 dòng -> lưới thẻ không bị so le chiều cao */
.gyt-acard__title {
	margin: 0; font-size: var(--gyt-text-md); font-weight: 600; line-height: 1.45;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.gyt-acard--row .gyt-acard__title { font-size: 14px; font-weight: 600; line-height: 1.45; }
.gyt-acard__title a { color: var(--gyt-text); }
.gyt-acard__title a:hover { color: var(--gyt-brand-dark); }
.gyt-acard__meta { margin: 7px 0 0; font-size: var(--gyt-text-xs); color: var(--gyt-text-faint); }

.gyt-agrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--gyt-space-4); }

/* Câu trả lời FAQ là đoạn văn -> kẹp theo measure. Hộp `.gyt-faq` và hàng câu hỏi VẪN trọn 928. */
.gyt-bg__main .gyt-faq__a { max-width: var(--gyt-measure); }

/* ================================================================== */
/* So sánh A vs B                                                      */
/* ================================================================== */
.gyt-vs {
	display: block;
	border: 1px solid var(--gyt-border); border-radius: 14px;
	padding: 22px; background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.gyt-vs:hover { border-color: var(--gyt-brand-light); box-shadow: 0 3px 14px rgba(17, 24, 39, .06); text-decoration: none; }

.gyt-vs__link { display: block; }
.gyt-vs__link:hover { text-decoration: none; }
.gyt-vs__pair { display: flex; align-items: center; justify-content: center; gap: 18px; }
/* Ảnh to gấp rưỡi bản cũ: 64px thì không nhìn ra đang so hai máy nào. */
.gyt-vs__side img { width: 96px; height: 96px; object-fit: contain; }
.gyt-vs__mark {
	flex-shrink: 0;
	width: 38px; height: 38px; display: grid; place-items: center;
	border-radius: 50%; background: var(--gyt-brand); color: #fff;
	font-size: var(--gyt-text-sm); font-weight: 800;
	box-shadow: 0 0 0 5px var(--gyt-brand-tint);
}
.gyt-vs__title {
	display: block; margin-top: 16px;
	font-size: var(--gyt-text-md); font-weight: 700; line-height: 1.4;
	color: var(--gyt-text);
}
.gyt-vs:hover .gyt-vs__title { color: var(--gyt-brand-dark); }
.gyt-vs__sum { display: block; margin: 7px 0 0; font-size: var(--gyt-text-base); line-height: 1.55; color: var(--gyt-text-muted); }

/* Lời mời bấm — thẻ cũ không có dấu hiệu nào cho thấy nó bấm được */
.gyt-vs__go {
	display: inline-flex; align-items: center; gap: 5px;
	margin-top: 13px;
	font-size: var(--gyt-text-base); font-weight: 600;
	color: var(--gyt-brand-dark);
}

/* ================================================================== */
/* FAQ                                                                 */
/* ================================================================== */
.gyt-faq { border: 1px solid var(--gyt-border); border-radius: var(--gyt-radius); overflow: hidden; }
.gyt-faq__item + .gyt-faq__item { border-top: 1px solid var(--gyt-border); }
.gyt-faq__q {
	padding: var(--gyt-space-4);
	font-weight: 600; cursor: pointer; list-style: none;
	display: flex; align-items: center; justify-content: space-between; gap: var(--gyt-space-3);
}
.gyt-faq__q::-webkit-details-marker { display: none; }
.gyt-faq__q::after { content: "+"; color: var(--gyt-text-muted); font-size: var(--gyt-text-xl); }
.gyt-faq__item[open] .gyt-faq__q::after { content: "−"; }
.gyt-faq__q:hover { background: var(--gyt-bg-soft); }
.gyt-faq__a { padding: 0 var(--gyt-space-4) var(--gyt-space-4); color: var(--gyt-text-soft); }
.gyt-faq__a p:last-child { margin-bottom: 0; }

/* ================================================================== */
/* Kết luận cuối                                                       */
/* ================================================================== */
.gyt-final {
	margin-top: var(--gyt-space-8);
	padding: 34px;
	border: 1px solid #d9eee4; border-radius: 16px;
	background: #f4fbf7;
}
.gyt-final__h { margin: 0 0 18px; font-size: 25px; font-weight: 800; letter-spacing: -.015em; }
.gyt-final__body { color: var(--gyt-text-soft); font-size: var(--gyt-text-md); line-height: 1.8; }
/* Chạy trọn khối — xem ghi chú ở .gyt-review__body p */
/* CTA cuối canh trái cùng lề với chữ, không kéo tràn hết khối */
.gyt-final .gyt-cta { min-width: 300px; }
.gyt-final__body p:last-child { margin-bottom: var(--gyt-space-5); }

/* ================================================================== */
/* Nguồn                                                               */
/* ================================================================== */
.gyt-source {
	margin-top: var(--gyt-space-8);
	padding: var(--gyt-space-6);
	border: 1px solid var(--gyt-border-soft); border-radius: 14px;
	background: var(--gyt-bg-soft);
	font-size: var(--gyt-text-base);
}
.gyt-source__h { margin: 0 0 10px; font-size: var(--gyt-text-md); font-weight: 700; }
.gyt-source__claim { margin: 0 0 14px; color: var(--gyt-text-soft); line-height: 1.7; }
.gyt-source__list { margin: 0 0 14px; padding-left: 20px; color: var(--gyt-text-muted); line-height: 1.8; }
.gyt-source__list a { color: var(--gyt-brand-dark); text-decoration: underline; }
.gyt-source__sync { margin: 0; font-size: var(--gyt-text-xs); color: var(--gyt-text-muted); }

/* ================================================================== */
/* Sidebar                                                             */
/* ================================================================== */
/* Sidebar là phần PHỤ — chữ nhỏ hơn, viền nhạt hơn, nén chặt hơn cột chính.
   Nó không được cạnh tranh sự chú ý với nội dung review. */
/**
 * 🔴 Sidebar KHÔNG đóng khung từng khối.
 *
 * Bốn hộp viền nhỏ xếp chồng nhau làm cột phải trông vụn, mà mỗi hộp lại
 * đòi sự chú ý ngang nhau — mất hẳn thứ bậc. Giờ chỉ Đánh giá nhanh có nền
 * (nó là khối mạnh nhất), các khối còn lại đứng trần trên nền trắng, tách
 * nhau bằng KHOẢNG TRẮNG và một vạch mảnh dưới tiêu đề.
 */
.gyt-sbox {
	border: 0;
	border-radius: 0;
	padding: 0;
	background: transparent;
}
.gyt-sbox__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: var(--gyt-space-3);
	margin-bottom: 14px;
	padding-bottom: 9px;
	border-bottom: 1px solid var(--gyt-border-soft);
}
/* Mockup: tiêu đề sidebar là chữ đậm màu đen thường — KHÔNG in hoa nhỏ.
   Bản trước em đổi sang in hoa cho "tinh gọn", nhưng lệch mockup. */
.gyt-sbox__h {
	margin: 0;
	font-size: 16px; font-weight: 700;
	letter-spacing: -.01em;
	color: var(--gyt-text);
}
.gyt-sbox__more { font-size: var(--gyt-text-sm); font-weight: 600; white-space: nowrap; color: var(--gyt-brand-dark); }
.gyt-sbox__list { display: grid; gap: 14px; }

.gyt-promo {
	border: 1px solid var(--gyt-brand-light);
	border-radius: var(--gyt-radius-lg);
	padding: var(--gyt-space-4);
	background: var(--gyt-brand-tint);
}
.gyt-promo .gyt-logo__img { height: 30px; }
.gyt-promo__h { margin: var(--gyt-space-3) 0 var(--gyt-space-2); font-weight: 700; font-size: var(--gyt-text-lg); }
.gyt-promo__list { margin: 0 0 var(--gyt-space-4); padding: 0; list-style: none; }
.gyt-promo__list li {
	position: relative; padding-left: 22px; margin-bottom: 5px;
	font-size: var(--gyt-text-sm); color: var(--gyt-text-soft);
}
.gyt-promo__list li::before { content: "✓"; position: absolute; left: 0; color: var(--gyt-brand); font-weight: 700; }

/* ================================================================== */
/* Fallback mobile — CHỈ để không vỡ. Mobile final có spec riêng.       */
/* ================================================================== */
@media (max-width: 640px) {
	.gyt-pr__h1 { font-size: var(--gyt-text-2xl); }
	.gyt-pr__sub { font-size: var(--gyt-text-base); }
	.gyt-decide { padding: var(--gyt-space-4); }
	.gyt-price--lg .gyt-price__now { font-size: var(--gyt-text-2xl); }
	.gyt-shead { flex-direction: column; align-items: flex-start; gap: var(--gyt-space-2); }
	.gyt-toc__list { flex-wrap: nowrap; overflow-x: auto; }
	.gyt-toc__list a { white-space: nowrap; }
}

/* ================================================================== */
/* BỐ CỤC HYBRID — dùng chung Buying Guide · Comparison                */
/* ================================================================== */
/**
 * Chuyển từ buying-guide.css sang đây 12/09 khi Comparison cần cùng bố cục.
 * Tên lớp giữ nguyên `gyt-bg__*` để không phải sửa template Buying Guide đã PASS;
 * đọc "bg" là "bố cục hybrid" (wide ở trên, main 880 + side 320 ở dưới).
 */
/**
 *   .gyt-bg__wide  Hero · khối quyết định nhanh · bảng so sánh  -> trọn 1280px
 *   .gyt-bg__grid  Phần phân tích/văn bản trở xuống             -> main + sidebar
 *
 * Bảng so sánh cần bề ngang; phần review là VĂN BẢN — chữ chạy 1280px thì mỗi
 * dòng hơn 140 ký tự, mắt mất dấu khi xuống dòng. Hai nhu cầu khác nhau nên
 * cho hai bố cục khác nhau, thay vì ép cả trang theo một kiểu.
 */
.gyt-bg { padding-block: var(--gyt-space-5) var(--gyt-space-10); }
.gyt-bg__wide { margin-top: var(--gyt-space-6); }

/**
 * 🔴 KHE GIỮA HAI CỘT LÀ 32px — đừng đưa `justify-content: space-between` trở lại.
 *
 * Bản cũ: `minmax(0, 880px) minmax(280px, 320px)` + `space-between`. Khai `gap: 32px` nhưng
 * phần dư của container (1280 − 880 − 320 = 80) bị dồn hết vào giữa, nên khe THẬT là **80px** —
 * hai cột đọc ra như hai khối rời nhau (anh Khai bắt 13/09, thấy ở cả How-to lẫn Comparison).
 *
 * Nay cột main nhận phần dư (`1fr`): khe đúng 32px, hai mép ngoài vẫn thẳng với breadcrumb,
 * header và footer. Main ra **928px** ở container 1320 — và bị CHẶN TRÊN ở đó, màn rộng hơn
 * không nới thêm vì container đã kịch trần.
 *
 * ⚠️ 928 vượt khoảng 860–900 chốt ngày 12/09. Đây là hệ quả bắt buộc: mép ngoài đã ghim,
 * sidebar giữ 320, nên khe 32 ⟹ main = 1280 − 32 − 320. Muốn main ≤ 900 thì phải chấp nhận
 * thừa ~28px lệch ở một mép — đã cân nhắc và chọn giữ mép thẳng.
 */
.gyt-bg__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 32px;
	align-items: start;
	margin-top: var(--gyt-space-8);
}
/* Không có gì để đưa vào sidebar -> một cột. KHÔNG bao giờ dựng cột rỗng. */
.gyt-bg__grid.is-alone { grid-template-columns: minmax(0, 880px); }

.gyt-bg__side { position: sticky; top: 84px; display: grid; gap: 28px; }

@media (max-width: 1000px) {
	.gyt-bg__grid { grid-template-columns: minmax(0, 1fr); }
	.gyt-bg__side { position: static; }
}

/* Mục lục dọc ở sidebar — khác thanh tab ngang dính ở đầu trang */
.gyt-sidetoc { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 2px; }
.gyt-sidetoc li { counter-increment: toc; }
.gyt-sidetoc a {
	display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; align-items: baseline;
	padding: 6px 8px; border-radius: 8px;
	font-size: var(--gyt-text-sm); font-weight: 500; color: var(--gyt-text-soft); line-height: 1.4;
}
.gyt-sidetoc a::before {
	content: counter(toc, decimal-leading-zero);
	font-size: var(--gyt-text-xs); font-weight: 700; color: var(--gyt-text-faint);
	font-variant-numeric: tabular-nums;
}
.gyt-sidetoc a:hover { background: var(--gyt-brand-tint); color: var(--gyt-brand-dark); text-decoration: none; }
.gyt-sidetoc a:hover::before { color: var(--gyt-brand); }

/* Câu dẫn giữa các khối — làm trang thành bài viết, không phải chuỗi component */
/**
 * 🔴 KHÔNG dùng margin-bottom ÂM để "kéo" khối sau lên. Bản đầu để -16px:
 *    câu dẫn 1 dòng thì vừa, câu dẫn 2 dòng thì dòng cuối bị khối sau đè lên
 *    (anh Khai bắt 12/09: "chữ đang bị dít xuống dưới"). Margin dương + thu
 *    margin-top của khối kế tiếp bằng selector `+` — chiều cao nào cũng đúng.
 */
.gyt-sintro {
	max-width: 720px;
	margin: var(--gyt-space-8) 0 0;
	font-size: 17px; line-height: 1.75; color: var(--gyt-text-soft);
}
/* Khối đứng sau câu dẫn có thể là section, .gyt-block hoặc thẻ .gyt-rank đầu tiên — bắt cả ba */
.gyt-sintro + .gyt-block,
.gyt-sintro + section,
.gyt-sintro + .gyt-rank { margin-top: var(--gyt-space-4); }

/* Block "Hướng dẫn liên quan" (dùng chung 5 trang): 1–4 thẻ, thẻ không phình khi chỉ có một —
   auto-fit 1fr với một thẻ kéo ảnh rộng 919px (bắt 13/09 ở Product Review) */
.gyt-rhowto .gyt-agrid { grid-template-columns: repeat(auto-fit, minmax(240px, 320px)); }


/* ==================================================================== */
/* VIDEO CỦA NGƯỜI BÁN TRONG BỘ ẢNH (17/09 -> 23/09)                     */
/* ==================================================================== */
/* 🔴 Video là MỘT SLIDE trong chính bộ radio, nên không thêm luật
   `nth-of-type` nào — bốn khối 12 dòng ở trên vẫn đúng.
   Ảnh bìa dùng chung luật `.gyt-gal__slide img` / `.gyt-zoom__slide img`
   nên tự có `object-fit: contain`, không phải khai lại. */
.gyt-gal__video {
	position: relative;
	width: 100%; height: 100%;
	min-width: 0; min-height: 0;
	display: grid; place-items: stretch;
}
.gyt-gal__video video {
	width: 100%; height: 100%;
	min-width: 0; min-height: 0;
	object-fit: contain;
	background: #000;
	border-radius: inherit;
}

/* Nút phát: chỉ là NÚT, không phải lớp phủ toàn ô — để còn vuốt sang ảnh khác */
.gyt-gal__play {
	position: absolute; inset: 0; margin: auto;
	width: 66px; height: 66px;
	display: grid; place-items: center;
	padding: 0 0 0 4px;                 /* tam giác lệch phải, canh lại cho vào giữa */
	border: 0; border-radius: 50%;
	background: rgba(17, 17, 17, .62);
	color: #fff; font-size: 24px; line-height: 1;
	cursor: pointer;
	backdrop-filter: blur(2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
	transition: transform .15s ease, background .15s ease;
	z-index: 2;
}
.gyt-gal__play:hover { background: rgba(17, 17, 17, .78); transform: scale(1.06); }
.gyt-gal__play:focus-visible { outline: 3px solid var(--gyt-brand); outline-offset: 3px; }

.gyt-gal__vtime {
	position: absolute; left: 12px; bottom: 12px;
	padding: 3px 8px; border-radius: 6px;
	background: rgba(17, 17, 17, .66); color: #fff;
	font-size: 12px; font-weight: 600; letter-spacing: .02em;
	z-index: 2;
}

/* Huy hiệu ▶ trên thumbnail để biết ô nào là video */
.gyt-gal__thumb--video { position: relative; }
.gyt-gal__vbadge {
	position: absolute; inset: 0; margin: auto;
	width: 22px; height: 22px;
	display: grid; place-items: center;
	padding-left: 2px;
	border-radius: 50%;
	background: rgba(17, 17, 17, .6); color: #fff;
	font-size: 9px; line-height: 1;
	pointer-events: none;
}

@media (max-width: 600px) {
	.gyt-gal__play { width: 54px; height: 54px; font-size: 20px; }
}

/* ================================================================== */
/* 26/09 — "Sản phẩm liên quan" cuối trang · box "Được xem nhiều"      */
/* ================================================================== */
/* Lưới liên quan: thẻ gọn 3 cột trong cột chính (như lưới trang chủ) */
/* Desktop: đúng 3 cột (6 thẻ = 2 hàng đều). Dưới 961px để mobile.css lo (≤600: 2 thẻ/hàng) — viết ngoài media
   query là luật này thắng độ ưu tiên và ép điện thoại về 1 thẻ/hàng (đã sập 26/09). */
@media (min-width: 961px) {
	.gyt-prel .gyt-prel__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
.gyt-prel .gyt-pcard__name {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em;
}
.gyt-prel .gyt-pcard--grid .gyt-pcard__actions { grid-template-columns: 1fr; gap: 6px; }
.gyt-prel .gyt-pcard--grid .gyt-pcard__actions .gyt-cta { min-height: 38px; font-size: var(--gyt-text-sm); }

/* Box "Được xem nhiều" */
.gyt-mv__r { position: absolute; opacity: 0; pointer-events: none; }
.gyt-mv__tabs {
	display: flex; gap: 4px; margin: -4px 0 12px; padding: 3px;
	background: var(--gyt-bg-soft); border-radius: var(--gyt-radius-pill);
}
.gyt-mv__tab {
	flex: 1 1 0; text-align: center; padding: 7px 10px; border-radius: var(--gyt-radius-pill);
	font-size: var(--gyt-text-sm); font-weight: 600; color: var(--gyt-text-muted); cursor: pointer;
}
.gyt-mv__r--ngay:checked ~ .gyt-mv__tabs .gyt-mv__tab--ngay,
.gyt-mv__r--tuan:checked ~ .gyt-mv__tabs .gyt-mv__tab--tuan {
	background: #fff; color: var(--gyt-brand-dark); box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
}
.gyt-mv__r:focus-visible ~ .gyt-mv__tabs { outline: 2px solid var(--gyt-brand); outline-offset: 2px; }
.gyt-mv__list { list-style: none; margin: 0; padding: 0; display: none; gap: 10px; }
.gyt-mv.is-single .gyt-mv__list,
.gyt-mv__r--ngay:checked ~ .gyt-mv__list--ngay,
.gyt-mv__r--tuan:checked ~ .gyt-mv__list--tuan { display: grid; }
.gyt-mv__item {
	display: grid; grid-template-columns: 22px 56px minmax(0, 1fr); align-items: center; gap: 10px;
	color: var(--gyt-text); text-decoration: none;
}
.gyt-mv__rank {
	width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
	background: var(--gyt-brand-tint); color: var(--gyt-brand-dark); font-size: 12px; font-weight: 800;
}
.gyt-mv li:first-child .gyt-mv__rank { background: var(--gyt-brand); color: #fff; }
.gyt-mv__img { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--gyt-bg-soft); }
.gyt-mv__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gyt-mv__txt { min-width: 0; display: grid; gap: 2px; }
.gyt-mv__name {
	font-size: var(--gyt-text-sm); font-weight: 600; line-height: 1.4;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gyt-mv__item:hover .gyt-mv__name { color: var(--gyt-brand-dark); }
.gyt-mv__price { font-size: var(--gyt-text-sm); font-weight: 700; color: var(--gyt-text); }