/* ==========================================================================
   dlb-shop.css — CSS RIÊNG cho trang Cửa hàng (/shop/, templates/archive-product.html),
   thêm 2026-08-30 đối chiếu demo-ui/san-pham.html theo yêu cầu người dùng.
   CHỈ enqueue khi is_shop() (xem functions.php).

   CẬP NHẬT 2026-09-04 — đổi lưới sản phẩm sang dùng THẲNG block thương hiệu
   "wp-plugin-dlb/dlb-item-grid-di90" (mode "latest"), theo yêu cầu người dùng
   "Hãy chỉnh lại giống trang này" kèm link 1 trang danh mục (/giay-ve-sinh-cuon/) —
   trang đó VỐN đã dùng đúng block này từ trước. Bỏ hẳn block lõi WooCommerce
   "Product Collection" (không còn sao đánh giá/icon yêu thích/giỏ hàng nổi, khác hẳn
   phong cách mọi nơi khác trên site) — ĐÁNH ĐỔI Ý THỨC: mất thanh "sắp xếp"/đếm số
   kết quả + phân trang thật của WooCommerce (block "dlb-item-grid-di90" chỉ hỗ trợ
   "rows×columns" cố định, KHÔNG có mode "toàn bộ + phân trang thật") — chấp nhận được
   vì catalog hiện tại chỉ 10 sản phẩm (đặt rows:6×columns:5=30 chỗ, dư nhiều so với
   10) VÀ trang tham chiếu người dùng chỉ ra cũng không có 2 thứ đó. Nếu catalog sau
   này vượt 30 sản phẩm, cần tăng rows/columns hoặc quay lại dùng Product Collection.
   Các rule cũ nhắm vào markup mặc định WooCommerce ("li.product", toolbar, phân
   trang) đã XOÁ vì không còn phần tử nào khớp — style thật của lưới mới nằm ở
   "dlb-item-grid-di90.css" (đã tự động enqueue kèm block, không cần khai báo lại ở
   đây). Giữ lại: tiêu đề trang, breadcrumb, chip danh mục (vẫn dùng markup cũ).
   ========================================================================== */

:root {
	--dlb-shop-green: #006d4c;
	--dlb-shop-green-dark: #00563c;
	--dlb-shop-amber: #fcb900;
	--dlb-shop-ink: #111111;
	--dlb-shop-muted: #6b7280;
	--dlb-shop-line: #e5e7eb;
}

.dlb-shop {
	padding-top: 8px;
	padding-bottom: 40px;
}

.dlb-shop__breadcrumbs {
	font-size: 13px;
	color: var(--dlb-shop-muted);
	margin-bottom: 16px;
}
.dlb-shop__breadcrumbs a {
	color: var(--dlb-shop-muted);
}
.dlb-shop__breadcrumbs a:hover {
	color: var(--dlb-shop-green);
}

.dlb-shop__title {
	font-size: clamp(28px, 3.5vw, 38px);
	font-weight: 800;
	color: var(--dlb-shop-ink);
	margin: 0 0 24px;
}

/* ---------- chip danh mục ---------- */
.dlb-shop__chips {
	margin-bottom: 28px;
	gap: 10px;
}
.dlb-shop__chip .wp-block-button__link {
	background: #ffffff !important;
	color: var(--dlb-shop-ink) !important;
	border: 1px solid var(--dlb-shop-line) !important;
	border-radius: 999px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	padding: 10px 20px !important;
}
.dlb-shop__chip .wp-block-button__link:hover {
	border-color: var(--dlb-shop-green) !important;
	color: var(--dlb-shop-green) !important;
}
.dlb-shop__chip--active .wp-block-button__link {
	background: var(--dlb-shop-green) !important;
	color: #ffffff !important;
	border-color: var(--dlb-shop-green) !important;
}
.dlb-shop__chip--active .wp-block-button__link:hover {
	color: #ffffff !important;
}

@media (max-width: 782px) {
	/* Lề 2 bên trang Cửa hàng — thêm 2026-09-04 theo người dùng gửi ảnh mobile thật
	   "canh lề 2 bên giống như trang theo link .../giay-ve-sinh-cuon/" (nội dung chạm
	   sát mép trái màn hình). CÙNG BÀI HỌC/CÙNG CÔNG THỨC đã dùng cho trang bài viết
	   + trang thường (".entry-content.alignfull", xem "dlb-single-post.css") và Giỏ
	   hàng/Thanh toán (xem "dlb-cart-checkout.css") — nhưng file CSS đó chỉ enqueue
	   trên đúng các trang loại "post"/"page" (is_singular), KHÔNG bao gồm trang Cửa
	   hàng (dùng template riêng "archive-product.html" với "<main class=dlb-shop>"
	   RIÊNG, không đi qua ".entry-content" như trang thường) nên chưa từng được vá.
	   Trang tham chiếu (.../giay-ve-sinh-cuon/) là 1 WP Page thật, ĐI QUA
	   ".entry-content" nên tự có sẵn đệm 20px — xác nhận qua soi trực tiếp chuỗi tổ
	   tiên DOM của breadcrumb 2 trang, thấy rõ khác biệt duy nhất nằm ở đây. Áp cùng
	   giá trị 20px cho khớp. */
	.dlb-shop {
		padding-left: 20px !important;
		padding-right: 20px !important;
		box-sizing: border-box;
	}
	/* Chip danh mục — thêm 2026-09-04 theo yêu cầu người dùng gửi ảnh mobile thật "cho
	   các tag sản phẩm trên cùng một hàng ui giống như các trang khác đã chỉnh". Trước
	   đó ".wp-block-buttons" (khối flex thật chứa 5 chip, ".dlb-shop__chips" bên ngoài
	   chỉ là 1 group bọc có đúng 1 con) để "flex-wrap:wrap" mặc định của block Buttons
	   — 5 chip dồn xuống 3 hàng trên màn hẹp, chiếm nhiều khoảng trắng dọc. Đổi sang
	   CUỘN NGANG 1 HÀNG DUY NHẤT — đúng convention đã dùng xuyên suốt site cho mọi dải
	   nhiều mục không đủ chỗ trên di động (khay giỏ hàng, "dlb-category-circles" chế độ
	   cuộn...): overflow-x:auto + ẩn thanh cuộn, không đổi màu/kiểu chip nào cả. */
	.dlb-shop__chips .wp-block-buttons {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 8px;
		padding-bottom: 4px;
	}
	.dlb-shop__chips .wp-block-buttons::-webkit-scrollbar {
		display: none;
	}
	.dlb-shop__chip {
		flex: 0 0 auto;
	}
	/* Thu nhỏ chip — thêm 2026-09-04 theo yêu cầu người dùng gửi ảnh mobile thật thứ 2
	   "chỉnh lại các tab danh mục sản phẩm nhỏ lại giống như danh mục sản phẩm trong
	   link https://.../giay-ve-sinh-cuon/" — lần trước (fix ngay phía trên) chỉ mới sửa
	   phần "xuống hàng" (flex-wrap), CHƯA đụng tới cỡ chữ/đệm nên chip vẫn to bằng bản
	   desktop trên di động. Soi đúng CSS trang tham chiếu (".dlb-cat-chip", file
	   "dlb-category-hero-ch92.css" — bản ĐÃ CÓ SẴN cùng kiểu thu nhỏ mobile này từ
	   2026-09-01) và COPY Y HỆT giá trị mobile ở đó (12px/8px 14px, khác bản desktop
	   14px/10px 20px của chính chip này) để 2 trang khớp nhau đúng như yêu cầu. */
	.dlb-shop__chip .wp-block-button__link {
		font-size: 12px !important;
		padding: 8px 14px !important;
		white-space: nowrap;
	}
}