/**
 * NHÁNH SẢN PHẨM — archive · chi tiết · trang danh mục  (T-404 · T-405)
 *
 * Ba màn dùng chung sidebar, card, lưới và bảng thông số nên đi chung một file:
 * tách ra ba thì sửa một biến phải mở cả ba, và chúng sẽ lệch nhau ở lần sửa
 * thứ hai.
 *
 * Nguồn số đo: `docs/potaco-layout/product/ui-spec-danh-sach-san-pham-potaco.md`
 * và `POTACO_Product_Detail_UI_Spec_Pixel.md`. Màu và cỡ chữ lấy TỪ TOKEN, không
 * lấy hex trong hai file đó — bộ pixel của trang chi tiết dùng một hệ nhận diện
 * khác (navy #073B82, cam #F26A00) và cam của họ chỉ đạt ~3,2:1 với chữ trắng,
 * tức trượt WCAG AA. Xem `spec/single-product/1-wireframe.md` §0.6.
 */

/* =========================================================================
 * 1. BỐ CỤC CHUNG — sidebar + nội dung
 * ====================================================================== */

.product-layout {
	display: grid;
	grid-template-columns: var(--sidebar-w, 280px) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	padding-block: 0 48px;   /* đệm TRÊN là của banner (`--hero-gap`, components.css §8b) */
}

.product-layout__content {
	min-width: 0; /* chặn lưới con đẩy cột rộng ra ngoài container */
}

/*
 * Ô lưới của cột danh mục ở archive — "nhà" của sidebar.
 *
 * `drawer.js` mượn `.sidebar--product` ra khỏi đây lúc mở drawer ở mobile rồi
 * trả về. Giữ ô này là một `<div>` thường, KHÔNG phải `<dialog>`: không có
 * dòng CSS nào thì nó vẫn là khối bình thường, không bao giờ bị UA style của
 * `<dialog>` ép chiều cao rồi cắt cụt.
 *
 * Trang chi tiết sản phẩm không có drawer nên gọi thẳng template-part, không
 * cần lớp bọc này.
 */
.product-layout__aside {
	min-width: 0;
}

@media (max-width: 991px) {
	.product-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding-block: 0 32px;
	}

	/*
	 * Sidebar xuống dưới nội dung ở tablet trở xuống — nút "Danh mục" mới là
	 * đường lọc chính ở khổ này.
	 *
	 * ⚠️ Phải nhắm ĐÚNG phần tử là con của lưới. Ở archive đó là lớp bọc
	 *    `.product-layout__aside`; ở trang chi tiết, `.sidebar--product` nằm
	 *    thẳng trong lưới nên vẫn cần selector cũ. Chỉ giữ một trong hai là có
	 *    một màn bị sai thứ tự mà không ai để ý — `order` trên phần tử không
	 *    phải con của lưới thì im lặng không có tác dụng.
	 */
	.site-main--product .product-layout__aside,
	.site-main--product > .product-layout > .sidebar--product {
		order: 2;
	}
}

/* =========================================================================
 * 2. DẢI GIỚI THIỆU — 4 USP + thẻ catalogue
 * ====================================================================== */

.product-intro {
	background: var(--c-bg-alt);
	border-bottom: var(--border-w) solid var(--c-border);
}

.product-intro__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 32px;
	align-items: center;
	padding-block: 28px;
}

.product-intro__usps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-intro__usp {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.product-intro__usp-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--c-accent);
}

.product-intro__usp-icon svg,
.product-intro__usp-img {
	width: 28px;
	height: 28px;
}

.product-intro__usp-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.product-intro__usp-title {
	color: var(--c-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
}

.product-intro__usp-desc {
	color: var(--c-text-muted);
	font-size: var(--fs-xs);
	line-height: 1.5;
}

.product-intro__card {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 20px;
	border-radius: var(--radius-lg);
	background: var(--c-primary-800);
	color: var(--c-text-invert);
	box-shadow: var(--shadow-md);
}

.product-intro__card-body {
	min-width: 0;
}

.product-intro__card-icon {
	display: inline-flex;
	color: var(--c-accent);
}

.product-intro__card-icon svg {
	width: 24px;
	height: 24px;
}

.product-intro__card-title {
	margin: 4px 0 2px;
	color: var(--c-text-invert);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps);
}

.product-intro__card-desc {
	margin: 0 0 12px;
	color: var(--p-on-dark);
	font-size: var(--fs-xs);
}

.product-intro__card-cover {
	flex: 0 0 96px;
}

.product-intro__cover-img {
	display: block;
	width: 96px;
	height: auto;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
}

@media (max-width: 991px) {
	.product-intro__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.product-intro__usps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575px) {
	.product-intro__card {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Ảnh bìa catalogue là trang trí — ở màn hẹp nó chiếm chỗ của nút. */
	.product-intro__card-cover {
		display: none;
	}
}

/* =========================================================================
 * 3. THANH CÔNG CỤ
 * ====================================================================== */

/*
 * Hai cột trên hàng đầu: tiêu đề — cụm control. Bộ đếm ở HÀNG RIÊNG bên dưới,
 * canh phải, chữ nhỏ hơn 20%.
 *
 * Lịch sử đổi qua đổi lại — ghi để không ai "sửa lại cho đúng ảnh" lần nữa:
 *   • Bản đầu: bộ đếm hàng riêng (`grid-column: 1 / -1`).
 *   • CR 2026-09-09: đưa lên CÙNG HÀNG giữa tiêu đề và control theo ảnh layout
 *     `potaco-danh-sach-san-pham-desktop.png`.
 *   • CR 2026-09-11 (người vận hành): tiêu đề "TẤT CẢ SẢN PHẨM" bị bộ đếm ép
 *     gãy hai dòng ở 1440 ⇒ trả bộ đếm về hàng riêng, canh PHẢI, giảm cỡ 20%.
 *     Quyết định này THẮNG ảnh layout.
 */
.product-toolbar {
	display: grid;
	grid-template-columns: minmax(min-content, 1fr) auto;
	gap: 12px 16px;
	align-items: center;
	margin-bottom: 24px;
}

.product-toolbar__heading {
	margin: 0;
	color: var(--c-heading);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
}

.product-toolbar__controls {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-self: end;
}

/*
 * Ô tìm rộng 272px theo ui-spec, nhưng ĐƯỢC PHÉP CO ở khổ desktop hẹp.
 *
 * ⚠️ Trước đây khoá cứng `width: 272px`; ở 992/1024px cụm control 448px cộng
 *    tiêu đề vượt bề ngang cột nội dung 632px và tràn ngang. Giữ khả năng co
 *    dù bộ đếm đã xuống hàng riêng (CR 2026-09-11): tiêu đề trang danh mục
 *    do khách đặt, có thể dài hơn "TẤT CẢ SẢN PHẨM" nhiều.
 *
 * Ở 1440/1920 — khổ của ảnh layout — `max-width` giữ nó đúng 272px như cũ.
 */
.product-toolbar__controls .search-box {
	flex: 1 1 auto;
	width: auto;
	min-width: 160px;
	max-width: 272px;
}

.product-toolbar__count,
.product-toolbar__active {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--c-text-muted);
	font-size: var(--fs-sm);
}

/* Bộ đếm: hàng riêng, dính mép PHẢI, nhỏ hơn `--fs-sm` 20% (14px → 11,2px;
   13px → 10,4px ở mobile). Không khoá px để vẫn theo token khi đổi khổ. */
.product-toolbar__count {
	justify-self: end;
	text-align: right;
	font-size: calc(var(--fs-sm) * 0.8);
}

/*
 * Từ 768px trở lên: xếp CHỖ TƯỜNG MINH thay vì để grid tự rải.
 *
 * Thứ tự trong DOM là tiêu đề → cụm control → bộ đếm → nhãn đang lọc, và cũng
 * là thứ tự hiển thị ở mọi khổ: hàng 1 tiêu đề + control, rồi bộ đếm, rồi chip
 * đang lọc — hai khối sau chiếm trọn hàng (`grid-column: 1 / -1` ở trên) nên
 * grid tự xếp chúng xuống dưới, không ghim `grid-row`: ghim số hàng cứng thì
 * lúc bộ đếm KHÔNG in ra (0 kết quả → `potaco_result_count()` trả chuỗi rỗng)
 * hàng 2 trống vẫn ăn một `row-gap` 12px thừa.
 */
@media (min-width: 768px) {
	.product-toolbar__heading {
		grid-column: 1;
		grid-row: 1;
	}

	.product-toolbar__controls {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
	}
}

@media (max-width: 767px) {
	.product-toolbar {
		grid-template-columns: minmax(0, 1fr);
	}

	.product-toolbar__controls {
		flex-wrap: wrap;
		justify-self: stretch;
	}

	/* Ô tìm chiếm cả hàng, hai control lọc/sắp xếp chia đôi hàng dưới —
	   thứ tự này là ràng buộc bắt buộc của ui-spec §6.2, không đảo được. */
	.product-toolbar__controls .search-box {
		flex: 1 0 100%;
		width: auto;
	}

	.product-toolbar__controls .sort-select {
		flex: 1 1 calc(50% - 6px);
	}
}

/*
 * Mô tả danh mục — cuối cột nội dung trang term (T-406, spec TC-02). Spec:
 * `max-width: 700px`, canh giữa, `line-height: 1.65`. Chỉ in khi có nội dung
 * dài hơn bản 30 từ đã đưa lên banner; 16/16 term hiện rỗng nên khối này
 * chưa xuất hiện ở bản dựng — kiểm bằng cách nhập mô tả cho một term.
 */
.product-term-desc {
	max-width: 700px;
	margin: 40px auto 0;
	color: var(--c-text);
	line-height: 1.65;
}

.product-term-desc > :first-child {
	margin-top: 0;
}

.product-term-desc > :last-child {
	margin-bottom: 0;
}

/* =========================================================================
 * 4. LƯỚI SẢN PHẨM — 4 / 3 / 3 / 2 / 2
 *
 * ⚠️ 2 cột ở <576px, KHÁC các archive khác (dịch vụ, dự án đều 1 cột). Ảnh sản
 *    phẩm cắt nền vuông vẫn nhận ra được ở ~160px, trong khi ảnh công trình 4:3
 *    thì không — hai cột cho phép quét nhanh gấp đôi.
 * ====================================================================== */

.product-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px 16px;
}

@media (max-width: 1199px) {
	.product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

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

/* =========================================================================
 * 5. DẢI LỢI ÍCH
 * ====================================================================== */

.benefits {
	display: grid;
	gap: 16px;
	margin: 40px 0 0;
	padding: 20px;
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-md);
	background: var(--c-bg-alt);
	list-style: none;
}

.benefits--strip {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.benefits__item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	min-width: 0;
}


/* Vách ngăn dọc giữa các mục, trừ mục cuối. */
.benefits--strip .benefits__item + .benefits__item {
	padding-left: 16px;
	border-left: var(--border-w) solid var(--c-border);
}

.benefits__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--c-primary-500);
}

.benefits__icon svg,
.benefits__icon-img {
	width: 28px;
	height: 28px;
}

.benefits__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/*
 * SO LE GIỮA CÁC CỘT — CR 2026-09-09.
 *
 * Tiêu đề dài ngắn khác nhau ("HÀNG CHÍNH HÃNG" một dòng · "GIAO HÀNG TOÀN
 * QUỐC" hai dòng) nên dòng mô tả bên dưới khởi hành ở cao độ khác nhau, ba cột
 * nhìn thành bậc thang.
 *
 * Cho hàng tiêu đề chiều cao tối thiểu bằng ĐÚNG HAI DÒNG ⇒ mô tả luôn bắt đầu
 * cùng một cao độ dù tiêu đề mấy chữ. Dùng `em` chứ không `px` để còn đúng khi
 * cỡ chữ đổi theo breakpoint (ở <576px tiêu đề tụt xuống 11px), và ghim
 * `line-height` tường minh để `2.6em` đúng là hai dòng chứ không phải một con
 * số đoán chừng.
 *
 * ⚠️ Áp cho CẢ HAI biến thể `--strip` và `--trust`: dải 5 lợi ích ở trang danh
 *    sách so le y hệt, chỉ là chưa ai báo. Sửa một biến thể là lần sau bị báo
 *    lại đúng lỗi này ở màn kia.
 */
.benefits__title {
	display: block;
	min-height: 2.6em;
	color: var(--c-primary);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	line-height: 1.3;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
}

.benefits__desc {
	color: var(--c-text-muted);
	font-size: var(--fs-xs);
}

@media (max-width: 1199px) {
	.benefits--strip {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.benefits--strip .benefits__item + .benefits__item {
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 575px) {
	.benefits--strip {
		grid-template-columns: minmax(0, 1fr);
	}

	.benefits--strip .benefits__item + .benefits__item {
		padding-top: 12px;
		border-top: var(--border-w) solid var(--c-border);
	}
}

/* =========================================================================
 * 6. PHÂN TRANG
 * ====================================================================== */

/*
 * ⚠️ KHÔNG khai lại `.pagination` ở đây — components.css §7 đã có.
 *
 * Bản đầu chép lại cả khối base và làm RƠI MẤT `flex-wrap: wrap` của component
 * chung; danh sách 10 trang trên màn 390px tràn ngang. Cùng loại lỗi với
 * `.section-title` bên trên, phát hiện ở bước 5 của task gạch nhấn cam.
 *
 * Phần dưới chỉ tạo dáng cho `.page-numbers` — markup do `paginate_links()`
 * của WordPress sinh ra, khác với `.pagination__item` mà component chung dựng
 * tay, nên đây là bổ sung chứ không phải ghi đè.
 */
/*
 * ⚠️ Tạo dáng `.pagination .page-numbers` ĐÃ CHUYỂN sang `components.css` §7
 *    (2026-09-11, T-303): trang Dịch vụ cũng dùng `paginate_links()` mà ra số
 *    trang trần — đúng dạng lỗi 2 của R-06-product ("CSS nạp sai chỗ"). Ở đây
 *    chỉ còn phần riêng của Sản phẩm (44px ở mobile, bên dưới).
 */

/* =========================================================================
 * 7. SIDEBAR DANH MỤC — cây hai tầng
 *
 * ⚠️ Danh mục con thụt vào và có vạch dẫn bên trái. Không có dấu hiệu phân cấp
 *    thì "Tủ ATS" đứng ngang hàng "Tủ điện hạ thế" — người xem không biết cái
 *    nào thuộc cái nào, đúng lỗi của bản dựng đầu tiên.
 * ====================================================================== */

.sidebar--product {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/*
 * ⚠️⚠️ ĐÂY LÀ NGUYÊN NHÂN THẬT CỦA BUG "SIDEBAR BỊ CẮT Ở 1920×1080".
 *
 * Component chung `.sidebar` (components.css §, trong `@media min-width: 992px`)
 * đặt:
 *
 *     position: sticky;
 *     max-height: calc(100vh - var(--header-h) - var(--sp-5));
 *     overflow-y: auto;
 *
 * Ý định ban đầu đúng (DoD T-216: dính khi cuộn, không che footer), nhưng với
 * cột danh mục sản phẩm nó đẻ ra đúng ba triệu chứng người vận hành báo:
 *
 * 1. **Danh sách bị cắt.** Laptop 1080px CÓ admin bar thì khung nhìn còn
 *    ~830px ⇒ `max-height` ≈ 738px, trong khi nội dung sidebar cao 764px.
 *    Đo được: 41px bị giấu, box "CẦN TƯ VẤN SẢN PHẨM?" nằm ngoài vùng thấy.
 * 2. **Mũi tên toggle bị che.** Thanh cuộn dọc ăn mất 15px bề ngang
 *    (`clientWidth` 280 → 265), chevron nằm sát mép phải nên bị ép/che.
 * 3. **Có thanh cuộn ngang.** `overflow-y: auto` với `overflow-x: visible` thì
 *    CSS ÉP `overflow-x` thành `auto`. Sidebar thừa 3px ngang ⇒ hiện luôn một
 *    thanh cuộn ngang vô nghĩa.
 *
 * Vì sao lượt trước không tìm ra: tôi chỉ `grep` trong `page/product.css`, mà
 * luật này nằm ở component chung. Bài học đúng bằng bốn dạng lỗi đã ghi ở
 * `R-06-product.md` — lần này là "luật của component chung áp xuống màn mới với
 * hệ quả không ai lường".
 *
 * Cách chữa: cột danh mục **không dính, không giới hạn chiều cao**. Danh sách
 * cao bao nhiêu thì cột cao bấy nhiêu, người dùng cuộn trang để xem hết —
 * không bao giờ mất mục nào, dù khách thêm bao nhiêu danh mục.
 *
 * ⚠️ Đánh đổi, ghi rõ để không ai "sửa lại" nhầm: bỏ `position: sticky` là
 *    LỆCH ui-spec §6.1 ("sticky top 112"). Giữ sticky thì buộc phải giới hạn
 *    chiều cao — sticky mà cao hơn khung nhìn thì phần đáy không cách nào cuộn
 *    tới — tức là quay lại đúng cái bug này. Chọn "thấy đủ" thay vì "dính".
 *
 * ⚠️ 2026-09-19: bản ghi đè `.sidebar--product { position: static }` từng nằm
 *    đây đã XOÁ — Dịch vụ rồi Tin tức (end-user testing) lần lượt dính cùng bug,
 *    nên luật gốc `.sidebar` ở components.css §10 đổi thành tĩnh cho mọi
 *    sidebar. Ghi chú phía trên giữ lại làm lịch sử vì sao.
 */

/* Khối danh mục `.cat-nav*` (từng là `.product-cats*`) đã chuyển sang
   `components.css` §10 — C-17 v2, T-216.3 (2026-09-18): dùng chung cho mọi
   sidebar, Sản phẩm là mẫu chuẩn. */
/* =========================================================================
 * 8. BOX "CẦN TƯ VẤN SẢN PHẨM?"
 * ====================================================================== */

.product-advice {
	padding: 20px;
	border-radius: var(--radius-md);
	background: var(--c-bg-dark);
	color: var(--c-text-invert);
}

.product-advice__title {
	margin: 0 0 8px;
	color: var(--c-text-invert);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps);
}

.product-advice__desc {
	margin: 0 0 14px;
	color: var(--p-on-dark);
	font-size: var(--fs-xs);
	line-height: 1.6;
}

.product-advice__phone {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 14px;
	color: var(--c-text-invert);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	text-decoration: none;
}

.product-advice__phone svg {
	width: 18px;
	height: 18px;
	color: var(--c-accent);
}

.product-advice__btn {
	width: 100%;
	justify-content: center;
}

/* --- Chevron của nhánh con nằm CÙNG HÀNG với tên danh mục cha ----------
/* =========================================================================
 * 9. TRANG CHI TIẾT — khối trên (gallery 45 / thông tin 55)
 * ====================================================================== */

.product-single__top {
	display: grid;
	grid-template-columns: 45% minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	margin-bottom: 32px;
}

.product-single__gallery {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ⚠️ `contain`, KHÔNG `cover`. Ảnh sản phẩm là ảnh cắt nền và phải hiện TRỌN
   VẸN — `cover` cắt mất mép thiết bị. Khác hẳn ảnh công trình ở single-project. */
.product-single__image {
	display: block;
	width: 100%;
	aspect-ratio: var(--ar-product);
	padding: 18px;
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-md);
	background: var(--c-bg);
	object-fit: contain;
}

.product-single__thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.product-single__thumb {
	padding: 4px;
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-sm);
	background: var(--c-bg);
}

.product-single__thumb.is-current {
	padding: 3px;
	border-color: var(--c-primary);
	border-width: 2px;
}

.product-single__thumb-img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* --- Cột thông tin ----------------------------------------------------- */

.product-single__title {
	margin: 8px 0;
	color: var(--c-heading);
	font-size: var(--fs-h2);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	text-transform: uppercase;
}

.product-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0 0 12px;
	color: var(--c-text-muted);
	font-size: var(--fs-sm);
}

.product-single__meta a {
	color: var(--c-primary);
}

.product-single__desc {
	max-width: 570px;
	margin: 0 0 16px;
	color: var(--c-text);
	line-height: var(--lh-body);
}

/* --- Khối báo giá ------------------------------------------------------ */

.product-quote {
	padding: 16px;
	border-radius: var(--radius-md);
	background: var(--c-bg-alt);
}

.product-quote__btn {
	display: flex;
	width: 100%;
	height: 48px;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
}

.product-quote__phone {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-top: 12px;
	color: var(--c-primary);
	text-decoration: none;
}

.product-quote__phone svg {
	width: 34px;
	height: 34px;
	padding: 8px;
	border-radius: var(--radius-full);
	background: var(--c-primary-50);
}

.product-quote__phone-label {
	display: block;
	color: var(--c-text-muted);
	font-size: var(--fs-xs);
}

.product-quote__phone-num {
	font-size: var(--fs-h4);
	font-weight: var(--fw-bold);
}

/* --- Ba cam kết: biến thể "trust" của dải lợi ích ---------------------- */

.benefits--trust {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: 16px;
	padding: 12px 0 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.benefits--trust .benefits__item {
	flex-direction: column;
	gap: 6px;
	align-items: center;
	text-align: center;
}

.benefits--trust .benefits__item + .benefits__item {
	border-left: var(--border-w) solid var(--c-border);
}

.benefits--trust .benefits__icon {
	color: var(--c-accent);
}

.benefits--trust .benefits__body {
	align-items: center;
}

/* =========================================================================
 * 10. THANH NEO 5 MỤC
 *
 * ⚠️ Đây KHÔNG phải tab: cả năm section luôn hiển thị bên dưới. Thanh chỉ cuộn
 *    tới, và `toc.js` gắn `aria-current` cho mục đang xem.
 * ====================================================================== */

.product-tabs {
	position: sticky;
	top: 88px;
	z-index: var(--z-sticky);
	margin-bottom: 24px;
	border-bottom: var(--border-w) solid var(--c-border);
	background: var(--c-bg);
}

.product-tabs__list {
	display: flex;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
}

.product-tabs__list::-webkit-scrollbar {
	display: none;
}

.product-tabs__link {
	display: block;
	padding: 12px 18px;
	border-bottom: 2px solid transparent;
	color: var(--c-text);
	font-size: var(--fs-sm);
	text-decoration: none;
	white-space: nowrap;
	transition: var(--transition);
}

.product-tabs__link.is-current,
.product-tabs__link[aria-current] {
	border-bottom-color: var(--c-accent);
	color: var(--c-primary);
	font-weight: var(--fw-bold);
}

.product-tabs__short {
	display: none;
}

@media (hover: hover) {
	.product-tabs__link:hover {
		color: var(--c-primary);
	}
}

.product-tabs__link:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: -2px;
}

/* =========================================================================
 * 11. SECTION NỘI DUNG
 * ====================================================================== */

.product-section,
.product-reviews {
	margin-bottom: 32px;
	/* Bù chiều cao header + thanh neo khi nhảy tới neo, nếu không tiêu đề
	   section bị thanh che — lỗi kinh điển của mọi mục lục neo. */
	scroll-margin-top: 140px;
}

/*
 * ⚠️ KHÔNG khai class tiêu đề riêng ở đây.
 *
 * Bản đầu tự chế `.section-title` — chỉ có cỡ chữ và viết hoa, KHÔNG có gạch
 * nhấn cam. Hậu quả: trên cùng một trang, dải "ĐỐI TÁC CUNG CẤP" (dùng
 * component chung) có gạch còn "THÔNG SỐ KỸ THUẬT" thì không. Đúng loại lỗi mà
 * tiêu chí D3 của cổng 06b sinh ra để chặn: "task ghi dùng C-xx thì code phải
 * gọi lại, không tự viết".
 *
 * Từ 2026-09-09 mọi tiêu đề section của trang chi tiết dùng
 * `.single-block__title` (components.css §11) — cùng class với tiêu đề của
 * `single/document-list` và `single/faq-accordion` vốn đã dùng trên chính
 * trang này, nên bảy tiêu đề nay đồng bộ. Gạch nhấn khai ở components.css §9.
 */

.product-section__content {
	max-width: 800px;
	line-height: var(--lh-body);
}

/* =========================================================================
 * 12. ĐÁNH GIÁ KHÁCH HÀNG
 *
 * ⚠️ Không sao, không điểm số — đây là lời chứng do admin nhập.
 * ====================================================================== */

.product-reviews__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.review-card {
	height: 100%;
	padding: 14px;
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-md);
	background: var(--c-bg);
}

.review-card__head {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.review-card__avatar {
	display: inline-flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	background: var(--c-primary-50);
	color: var(--c-primary);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
}

.review-card__who {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin-right: auto;
}

.review-card__name {
	color: var(--c-heading);
	font-size: var(--fs-sm);
}

.review-card__company,
.review-card__date {
	color: var(--c-text-muted);
	font-size: var(--fs-xs);
}

.review-card__quote {
	margin: 10px 0 0;
	color: var(--c-text);
	font-size: var(--fs-sm);
	font-style: italic;
	line-height: 1.6;
}

.product-reviews__more {
	margin-top: 12px;
}

/* =========================================================================
 * 13. FAQ — MỘT cột ở mọi khổ màn
 *
 * ⚠️ Trước 2026-09-09 khối này chia hai cột ở PC. Người vận hành yêu cầu về một
 *    cột: câu hỏi dài ngắn khác nhau nên hai cột `<details>` mở ra là đẩy nhau
 *    lệch bậc, và mắt phải nhảy zigzag thay vì đọc thẳng xuống.
 *
 *    Giữ `display: grid` một cột thay vì bỏ hẳn luật: `gap` dọc 8px giữa các
 *    mục là số của thiết kế, `margin` trên `<details>` sẽ chồng lề với nhau.
 * ====================================================================== */

.product-section .accordion {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}

/* =========================================================================
 * 14. THANH DÍNH ĐÁY (mobile)
 * ====================================================================== */

.product-sticky {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--z-floating);
	display: none;
	gap: 8px;
	align-items: center;
	padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
	background: var(--c-bg-dark);
	box-shadow: var(--p-shadow-up);
}

.product-sticky[hidden] {
	display: none;
}

@media (max-width: 991px) {
	.product-sticky:not([hidden]) {
		display: flex;
	}

	/* Chừa chỗ cho thanh, nếu không nó che mất phần cuối footer. */
	body.single-product {
		padding-bottom: 76px;
	}

	/*
	 * ⚠️ Ẩn HẲN cụm nút liên hệ nổi khi thanh dính đang hiện — không chỉ đẩy
	 *    lên. Hai cặp nút Gọi/Zalo cùng lúc trên màn 390px là trùng chức năng,
	 *    vừa rối vừa chiếm mất nội dung.
	 */
	body:has(.product-sticky:not([hidden])) .floating-contact {
		display: none;
	}
}

.product-sticky__side {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 2px;
	align-items: center;
	min-width: 58px;
	padding: 4px;
	color: var(--c-text-invert);
	font-size: var(--fs-xs);
	text-decoration: none;
}

.product-sticky__side svg {
	width: 22px;
	height: 22px;
}

.product-sticky__btn {
	display: flex;
	flex: 1 1 auto;
	height: 48px;
	align-items: center;
	justify-content: center;
	font-weight: var(--fw-bold);
}

/* =========================================================================
 * 15. RESPONSIVE trang chi tiết
 * ====================================================================== */

@media (max-width: 991px) {
	.product-single__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.product-tabs {
		top: 64px;
	}

	.product-tabs__long {
		display: none;
	}

	.product-tabs__short {
		display: inline;
	}

	.product-reviews__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* FAQ không cần luật riêng ở đây nữa — từ 2026-09-09 nó một cột ở MỌI khổ. */
}

@media (max-width: 575px) {
	.product-reviews__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.benefits--trust {
		gap: 4px;
	}

	.benefits--trust .benefits__title {
		font-size: 11px;
	}
}

/* Anh 1:1 tran het chieu ngang o tablet la mot khoi vuong 768px cao — day toan
   bo thong tin san pham xuong duoi man thu hai. Gioi han lai va canh giua. */
@media (max-width: 991px) {
	.product-single__gallery {
		max-width: 460px;
		margin-inline: auto;
	}
}

/* =========================================================================
 * 16. SỬA SAU NGHIỆM THU 06b (2026-09-09)
 * ====================================================================== */

/* --- F1 · Sidebar: một markup, hai vai ---------------------------------
 *
 * ≥992px  → ép `<dialog>` thành cột tĩnh, hiện thường trực.
 * <992px  → trả về đúng bản chất dialog, mở bằng nút "Danh mục".
 *
 * Cách này tránh render sidebar hai lần cho hai khổ màn — hai bản là hai chỗ
 * phải sửa mỗi lần đổi danh mục, và chúng sẽ lệch nhau.
 */
/*
 * ⚠️ `<dialog>` CHỈ còn đóng một vai: drawer ở <992px.
 *
 * Trước 2026-09-09 nó kiêm luôn cột tĩnh ở PC, bằng cách ghi đè
 * `display/position/width/max-height` của UA style. Khổ màn khách dùng nhiều
 * nhất mà phải sống nhờ một chồng ghi đè là nền móng dễ vỡ: chỉ cần một dòng
 * không tới nơi (cache CSS lệch pha, thứ tự file, specificity) là cột danh mục
 * rơi về UA style — `height: fit-content` + `overflow: auto` + `max-height` —
 * và bị cắt cụt giữa chừng. Đã xảy ra thật trên laptop 1920×1080.
 *
 * Nay ở ≥992px hộp thoại này RỖNG và không có `[open]`, nên UA style
 * `dialog:not([open]) { display: none }` tự lo: nó không chiếm ô lưới nào.
 * KHÔNG khai `display: block` cho nó ở khổ PC nữa.
 */
.cat-drawer {
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
}

/*
 * LƯỚI AN TOÀN Ở KHỔ PC — `display: contents`, không cần một sự kiện JS nào.
 *
 * Đường đi bình thường: ở ≥992px hộp thoại RỖNG (sidebar nằm ở
 * `[data-cat-home]`), `drawer.js` chỉ mượn sidebar vào đây lúc mở drawer ở
 * mobile rồi trả về lúc đóng.
 *
 * Nhưng nếu đường trả về hụt một nhịp — sự kiện `close` không tới, JS lỗi giữa
 * chừng, người dùng kéo rộng cửa sổ đúng lúc drawer đang mở — thì sidebar kẹt
 * lại trong `<dialog>`, mà `<dialog>` không có `[open]` thì UA style cho
 * `display: none`. Hậu quả đúng bằng cái bug đang phải chữa, chỉ tệ hơn: cột
 * danh mục **mất sạch** thay vì bị cắt.
 *
 * `display: contents` gỡ bỏ chính cái hộp `<dialog>` khỏi bố cục nhưng GIỮ các
 * con của nó lại trong lưới `.product-layout`. Nhờ vậy cột danh mục hiện đúng
 * chỗ dù sidebar đang nằm ở nhà hay còn kẹt trong hộp thoại — và nó là CSS
 * thuần, không phụ thuộc sự kiện nào.
 *
 * Hộp thoại rỗng thì `display: contents` cũng không in ra gì thừa: đứa con duy
 * nhất còn lại là nút đóng, đã ẩn ngay bên dưới.
 */
@media (min-width: 992px) {
	/*
	 * ⚠️ Cả hộp thoại LẪN lớp bọc trong nó đều phải `display: contents`.
	 *
	 * Chỉ đặt cho hộp thoại thì `.cat-drawer__body` (rỗng ở khổ PC) trở thành
	 * một ô lưới thật, chiếm mất cột thứ hai và đẩy cột nội dung xuống hàng
	 * dưới. `display: contents` trên một thẻ rỗng thì không sinh hộp nào, nên
	 * lưới không thấy nó; còn khi nó có chứa sidebar (trường hợp kẹt), sidebar
	 * lên thẳng lưới đúng vị trí cột danh mục.
	 */
	.cat-drawer,
	.cat-drawer__body {
		display: contents;
	}

	.cat-drawer__close,
	.product-toolbar__cat-btn {
		display: none;
	}
}

@media (max-width: 991px) {
	.cat-drawer {
		position: fixed;
		inset: 0 auto 0 0;
		width: min(320px, calc(100% - 32px));
		height: 100%;
		padding: 16px;
		overflow-y: auto;
		background: var(--c-bg);
		box-shadow: var(--shadow-lg);
	}

	.cat-drawer::backdrop {
		background: var(--p-backdrop);
	}

	.cat-drawer__close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-left: auto;
		border: 0;
		border-radius: var(--radius-md);
		background: var(--c-bg-alt);
		color: var(--c-heading);
		font-size: 24px;
		line-height: 1;
		cursor: pointer;
	}

	/* Trong drawer thì sidebar không dính và không cần lề riêng. */
	.cat-drawer .sidebar--product {
		position: static;
		top: auto;
	}

	.product-toolbar__cat-btn {
		display: inline-flex;
		flex: 1 1 calc(50% - 6px);
		gap: 8px;
		align-items: center;
		justify-content: center;
		min-height: 44px;
	}

	.product-toolbar__cat-btn svg {
		width: 18px;
		height: 18px;
	}
}

/* --- F2 · Gallery tương tác ------------------------------------------- */

.product-single__stage {
	position: relative;
}

.product-single__zoom {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;                 /* F3: vùng chạm tối thiểu */
	height: 44px;
	border: 0;
	border-radius: var(--radius-full);
	background: var(--c-bg);
	color: var(--c-primary);
	box-shadow: var(--shadow-md);
	cursor: pointer;
	transition: var(--transition);
}

.product-single__zoom svg {
	width: 20px;
	height: 20px;
}

@media (hover: hover) {
	.product-single__zoom:hover {
		background: var(--c-bg-alt);
		box-shadow: var(--shadow-lg);
	}
}

.product-single__zoom:focus-visible,
.product-single__thumb:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

.product-single__image {
	cursor: zoom-in;
}

.product-single__thumb-item {
	display: block;
}

/* Thumbnail là <button>, không phải <li> trơn: bản đầu nhìn giống layout mà
   bấm không có gì xảy ra — lỗi F2, ảnh chụp không bao giờ bắt được. */
.product-single__thumb {
	display: block;
	width: 100%;
	padding: 4px;
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-sm);
	background: var(--c-bg);
	cursor: pointer;
	transition: var(--transition);
}

.product-single__thumb.is-active {
	padding: 3px;
	border-color: var(--c-primary);
	border-width: 2px;
}

@media (hover: hover) {
	.product-single__thumb:hover {
		border-color: var(--c-border-strong);
	}
}

/* --- F3 · Vùng chạm ≥44px (fix cả-dự-án F-13 chưa lan tới màn này) ----- */

/*
 * ⚠️ KHÔNG ép `min-height` lên `.sort-select__control` nữa.
 *
 * Từ 2026-09-09 chiều cao 44px do chính `<form class="sort-select">` giữ
 * (components.css). Ép thêm 44px lên `<select>` bên trong sẽ cộng dồn với viền
 * của form thành 46px, lệch một pixel rưỡi so với ô tìm bên cạnh — đủ để nhìn
 * thấy khi hai control đứng sát nhau.
 */
.product-toolbar .search-box__field,
.product-toolbar .search-box__submit {
	min-height: 44px;
}

.pagination .page-numbers {
	min-width: 44px;
	height: 44px;
}

/* Tag danh mục và link hãng ở trang chi tiết: giữ nguyên cỡ chữ, nới vùng bấm
   bằng padding dọc — đổi font-size sẽ lệch layout. */
/*
 * ⚠️ Tag danh mục KHÔNG còn nằm trong nhóm này (CR 2026-09-09).
 *
 * Nó đã thu nhỏ thành pill 22px và chuyển vào dòng meta. Ép `min-height: 44px`
 * lên một phần tử CÓ NỀN sẽ phóng to cái pill lên gấp đôi — tức là lấy vùng
 * chạm bằng cách đổi hình dạng, đúng thứ mà CR này cấm. Vùng chạm của nó lấy
 * bằng lớp phủ trong suốt ở luật ngay dưới.
 */
.product-quote__phone {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/*
 * VÙNG CHẠM 44px TRONG DÒNG META — bằng lớp phủ trong suốt, KHÔNG bằng
 * `min-height`.
 *
 * ⚠️ Cả hai link ở đây phải dùng CÙNG một cách, nếu không chúng lệch nhau.
 *    Bản đầu chỉ cho link hãng `min-height: 44px` còn tag giữ chiều cao 22px:
 *    hai hộp cao khác nhau trên một dòng canh giữa ⇒ `top` lệch 11,5px, trượt
 *    ràng buộc ≤2px của CR. Chưa kể `min-height` trên phần tử CÓ NỀN (cái tag)
 *    còn phóng to nền pill lên gấp đôi.
 *
 * Lớp phủ giữ nguyên chiều cao chữ của cả hai, nên `top` khớp nhau, mà ngón
 * tay vẫn có 44px để chạm.
 */
.product-single__meta .tag--sm,
.product-single__meta a:not(.tag) {
	position: relative;
}

.product-single__meta .tag--sm::after,
.product-single__meta a:not(.tag)::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	min-width: 44px;
	height: 44px;
	transform: translateY(-50%);
}

/* --- F11/F12 · Số đo nhỏ theo ui-spec ---------------------------------- */

/*
 * ⚠️ Luật `top: 112px` (ui-spec §6.1) đã BỎ ngày 2026-09-10.
 *
 * Cột danh mục sản phẩm không còn `position: sticky` — xem khối giải thích dài
 * ở §7 phía trên, chỗ khai `.sidebar--product`. `top` trên một phần tử
 * `position: static` không có tác dụng, để lại chỉ làm người đọc sau tưởng
 * sidebar vẫn dính.
 */

/* --- F-02(v2) · Vắng JS thì sidebar phải trở lại dạng khối tĩnh -------
 *
 * ⚠️ Từ 2026-09-09 phần này gần như tự lo được.
 *
 * Sidebar KHÔNG còn nằm sẵn trong `<dialog>`: nó ở `.product-layout__aside`,
 * và `drawer.js` chỉ mượn nó lúc mở drawer. Vắng JS thì không có gì mượn, nên
 * sidebar hiện nguyên chỗ cũ như một khối tĩnh — đúng hành vi mong muốn, không
 * cần luật nào ép nữa.
 *
 * Chỉ còn phải giấu nút mở: bấm vào nó khi không có JS thì không có gì xảy ra.
 */
html:not(.potaco-js) .product-toolbar__cat-btn {
	display: none;
}

/* --- F-03(v2) · Gom màu trắng-mờ và bóng navy về biến cục bộ ----------
 *
 * Bốn giá trị `rgba()` viết thẳng trong file này là chữ trắng mờ trên nền navy
 * và bóng đổ — hai thứ mà `_tokens.css` chưa có token. Gom về biến đặt ở đầu
 * khối thay vì rải bốn chỗ: đổi độ mờ chỉ phải sửa một dòng, và `grep` màu
 * ngoài token trong lượt nghiệm thu sau sẽ trỏ đúng vào đây thay vì bốn nơi.
 */
.product-intro,
.product-advice,
.product-sticky,
.cat-drawer {
	--p-on-dark: rgba(255, 255, 255, 0.85);
	--p-shadow-up: 0 -6px 20px rgba(0, 24, 66, 0.18);
	--p-backdrop: rgba(0, 24, 66, 0.55);
}

/* --- CR 2026-09-09 · d\u1EA3i gi\u1EDBi thi\u1EC7u chuy\u1EC3n xu\u1ED1ng d\u01B0\u1EDBi l\u01B0\u1EDBi ---------------
 *
 * Tr\u01B0\u1EDBc: n\u1EB1m ngay d\u01B0\u1EDBi banner, c� vi\u1EC1n d\u01B0\u1EDBi \u0111\u1EC3 t�ch v\u1EDBi ph\u1EA7n n\u1ED9i dung.
 * Sau : n\u1EB1m gi\u1EEFa n\u1ED9i dung v� d\u1EA3i \u0111\u1ED1i t�c \u2014 n\u1EC1n x�m \u0111� t\u1EF1 t�ch kh\u1ECFi n\u1EC1n tr\u1EAFng hai
 *       b�n, n�n b\u1ECF vi\u1EC1n v� thay b\u1EB1ng vi\u1EC1n TR�N cho \u0111�ng chi\u1EC1u ng\u0103n c�ch.
 */
.product-intro {
	border-top: var(--border-w) solid var(--c-border);
	border-bottom: 0;
}