/**
 * Vinpack — slider danh mục (`.cat-row`), dùng ở CẢ HAI trang:
 *   - taxonomy-vp_product_cat.php: hàng danh mục CON (hoặc anh em cùng cha)
 *   - archive-vp_product.php: hàng 5 danh mục CHA
 *
 * Khách yêu cầu (26/08/2026): đổi hàng danh mục ngang từ lưới tĩnh (bọc dòng
 * khi hẹp) sang dạng SLIDE, tham khảo nhathuoclongchau.com.vn/thuc-pham-chuc-nang
 * — thẻ trắng bo góc + icon + tên, có nút mũi tên tròn hai bên, tối ưu mobile.
 *
 * DÙNG SWIPER (đã có sẵn trong dự án, assets/vendor/swiper/) — CÙNG QUY ƯỚC
 * đã dùng ở assets/js/product-single.js (.pd-main-swiper/.pd-related-swiper):
 * slidesPerView LUÔN LÀ SỐ NGUYÊN qua từng breakpoint, KHÔNG freeMode, KHÔNG
 * 'auto' — nguyên tắc đã có của dự án là mọi slide phải hiện TRỌN VẸN, không
 * bị cắt nửa ở mép khung nhìn. Trang tham khảo dùng kiểu "hé lộ nửa thẻ tiếp
 * theo" trên mobile — KHÔNG theo kiểu đó, vì trái nguyên tắc trên; thay vào
 * đó mobile hiện đúng 2 thẻ trọn vẹn (xem assets/js/cat-row.js breakpoints)
 * và không có nút mũi tên (dựa vào vuốt chạm — Swiper đã bật mặc định),
 * đúng hành vi ẩn nút trên mobile của trang tham khảo.
 *
 * FILE RIÊNG (không gộp vào taxonomy-danhmuc.css): CHỈ 2 trang trên dùng, và
 * bắt buộc nạp SAU CSS lõi Swiper để ghi đè màu nút prev/next không bị chính
 * Swiper đè ngược lại (cùng lý do đã ghi ở assets/css/product-single.css cho
 * .pd-main-swiper/.pd-related-swiper) — gộp chung vào taxonomy-danhmuc.css sẽ
 * bắt các trang KHÁC cũng dùng file đó (single sản phẩm/dự án, dịch vụ, chính
 * sách) tải thêm CSS Swiper không cần đến.
 *
 * `.cat-col` giữ NGUYÊN class name (đổi cấu trúc thị giác qua các lần sửa
 * bên dưới — không đổi PHP nào đọc field hay logic icon-theo-slug).
 *
 * SỬA LẦN 2 (26/08/2026, khách phản hồi kèm ảnh chụp /san-pham/, khoanh đỏ
 * viền từng thẻ): "xoá cái border đi để 1 line giữa 2 product cat". Đo thật:
 * nền `.cat-col` là var(--white), nền trang bọc ngoài CŨNG là trắng
 * (getComputedStyle xác nhận cả hai #FFFFFF) — viền 1px là thứ DUY NHẤT vẽ
 * ra hình "thẻ", nền trắng-trên-trắng vô hình. Bỏ viền bao quanh mỗi thẻ,
 * thay bằng một đường kẻ dọc giữa các thẻ liền kề + nền var(--bg-alt) khi
 * hover/active. ĐÃ THAY THẾ bởi SỬA LẦN 3 ngay dưới — giữ đoạn này làm sử.
 *
 * SỬA LẦN 3 (26/08/2026, khách gửi file tham khảo cục bộ
 * "Giao diện website Vinpack.vn/(3.1) vinpack_trang-danh-muc-cha.html"):
 * "làm lại item product cat như trên, và show ra là 5 cái thôi, cái thứ 6
 * dùng angle slide". File tham khảo là lưới CSS tĩnh 6 cột (không slider),
 * `.cat-col` KHÔNG phải thẻ (không background/border/border-radius) — chỉ
 * icon 52px + tên, đường kẻ dọc `.cat-col + .cat-col::before` NGẮN (canh
 * giữa dọc top/bottom 16%, không chạm mép), hover/active CHỈ đổi màu
 * icon+chữ (không đổi nền), hover LIFT riêng icon (không lift cả khối).
 * Chép lại đúng ngôn ngữ hình ảnh đó, giữ khung Swiper hiện có (file tham
 * khảo tĩnh không cần slider vì mockup của nó chỉ minh hoạ 6 danh mục mẫu,
 * trong khi dữ liệu thật có hàng CON nhiều hơn 6 — vd tui-nilon 7 danh mục
 * con — cần cơ chế trượt). "Show 5, thứ 6 dùng angle slide" áp dụng bằng
 * cách đổi breakpoint desktop của assets/js/cat-row.js từ slidesPerView 6
 * xuống 5 (xem file đó) — khớp luôn 5 danh mục CHA thật (archive-vp_product.php,
 * 5 = 5, vẫn khoá/không cuộn) lẫn danh mục CON nhiều hơn 5 (cần bấm mũi tên).
 *
 * @package Vinpack
 */

.cat-row.swiper{
	max-width:1080px;
	margin:0 auto;
	/*
	 * 48px (--sp-7), KHONG PHAI 32px (--sp-6) nhu ban dau -- do that: nut
	 * mui ten rong 40px, Swiper dat no cach mep swiper 4px mac dinh
	 * (--swiper-navigation-sides-offset), tuc chiem 44px tinh tu mep. Voi
	 * padding 32px, nut LAN 12px vao trong the cuoi cung (do duoc qua
	 * getBoundingClientRect() that, khach bao "hover bi cat border" dung
	 * cho nay). 48px - 44px = 4px khe ho an toan, khong con chong lan.
	 */
	padding:0 var(--sp-7);
}

.cat-row .swiper-wrapper{
	align-items:stretch;
}

.cat-row .swiper-slide{
	height:auto;
}

/*
 * Khách phản hồi kèm ảnh chụp "Bao bì đóng gói" (26/08/2026): chỉ 4 danh mục
 * con, slidesPerView=6 ở desktop — Swiper mặc định dồn thẻ về đầu (trái), để
 * trống hẳn khoảng bên phải. assets/js/cat-row.js gắn class này khi
 * `swiper.isLocked` (không đủ thẻ để trượt — mọi thẻ đã hiện trọn, không cần
 * nút mũi tên) và gỡ khi hết khoá qua sự kiện 'lock'/'unlock' (đổi breakpoint
 * có thể đổi trạng thái khoá vì cùng 4 thẻ nhưng slidesPerView khác nhau).
 * An toàn kết hợp justify-content với transform của Swiper: lúc isLocked,
 * transform luôn là ma trận đơn vị (translate 0), không có gì "đấu" lại.
 */
.cat-row--centered .swiper-wrapper{
	justify-content:center;
}

/*
 * Đo bằng getBoundingClientRect() thật: canh giữa ở trên vẫn LỆCH 8px sang
 * trái — nguyên nhân là Swiper gắn INLINE style `margin-right:16px`
 * (spaceBetween) lên MỌI thẻ, kể cả thẻ CUỐI CÙNG (bình thường vô hình vì bị
 * cuộn/cắt ở chế độ trượt, nhưng khi canh giữa thì khoảng trống vô hình đó
 * vẫn tính vào bề rộng khối được `justify-content` canh giữa, đẩy các thẻ
 * thấy được lệch trái nửa khoảng đó). `!important` bắt buộc vì đang ghi đè
 * inline style của chính Swiper JS — chỉ áp dụng trong trạng thái canh giữa
 * (không đụng thẻ cuối lúc còn trượt được, nơi khoảng đệm đó không hiện ra).
 */
.cat-row--centered .swiper-slide:last-child{
	margin-right:0 !important;
}

.cat-col{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:var(--sp-3);
	height:100%;
	padding:var(--sp-4) var(--sp-2);
	position:relative;
	text-align:center;
	text-decoration:none;
}

/*
 * "1 line giữa 2 product cat" — một đường kẻ dọc giữa các thẻ LIỀN KỀ, không
 * phải khung quanh từng thẻ (xem SỬA LẦN 2 ở đầu file). Đường kẻ NGẮN, canh
 * giữa theo chiều dọc (top/bottom 16%), không chạm hẳn mép trên/dưới — đúng
 * mẫu file tham khảo cục bộ `.cat-col + .cat-col::before` (xem SỬA LẦN 3).
 * .cat-col không có anh em `.cat-col` khác trong cùng .swiper-slide (mỗi
 * slide chỉ 1 thẻ) nên phải xét vị trí .swiper-slide chứa nó thay vì
 * `.cat-col + .cat-col` trực tiếp — tương đương hệt về mặt hiển thị (line vẫn
 * nằm đúng giữa khe hở giữa hai thẻ), chỉ khác thẻ nào "sở hữu" đường kẻ.
 */
.cat-row .swiper-slide:not(:first-child) .cat-col::before{
	content:"";
	position:absolute;
	left:0;
	top:16%;
	bottom:16%;
	width:1px;
	background:var(--border);
}

.cat-ic{
	width:52px; height:52px;
	color:var(--navy);
	display:flex; align-items:center; justify-content:center;
	transition:color .25s ease, transform .25s ease;
}
/*
 * `svg` (bộ dựng sẵn) VÀ `img` (icon khách tải lên ở ô "Icon tải lên" của danh
 * mục) cùng lấp đầy ô 52px — nếu chỉ khai cho svg thì ảnh rơi về kích thước
 * thuộc tính width/height của thẻ (40px) và trông nhỏ hơn hẳn icon vẽ sẵn.
 * `object-fit:contain` giữ tỉ lệ khi ảnh không vuông tuyệt đối.
 */
.cat-ic svg,
.cat-ic img{ width:100%; height:100%; }
.cat-ic img{ object-fit:contain; }
.cat-col:hover .cat-ic{
	color:var(--cobalt);
	transform:translateY(-3px);
}

.cat-col h3{
	font-size:14px;
	color:var(--navy);
	font-weight:700;
	line-height:1.35;
	margin:0;
}
.cat-col:hover h3{ color:var(--cobalt); }

.cat-col.active .cat-ic,
.cat-col.active h3{ color:var(--cobalt); }

/*
 * Nút điều hướng: hình tròn, viền mảnh, bóng nhẹ — dáng thẻ tham khảo. Swiper
 * tự thêm class `.swiper-button-disabled` khi đã ở đầu/cuối — ẩn hẳn (không
 * chỉ mờ) để không có nút "chết" ai cũng bấm thử được ở hai đầu dải.
 */
.cat-row .swiper-button-prev,
.cat-row .swiper-button-next{
	width:40px; height:40px;
	margin-top:-20px;
	background:var(--white);
	border:1px solid var(--border);
	border-radius:50%;
	box-shadow:0 2px 10px rgba(0,27,183,.12);
	color:var(--navy);
	transition:transform .25s ease, border-color .25s ease;
}
.cat-row .swiper-button-prev:hover,
.cat-row .swiper-button-next:hover{
	border-color:var(--cobalt);
	transform:scale(1.08);
}
.cat-row .swiper-button-prev::after,
.cat-row .swiper-button-next::after{
	font-size:14px;
}

/*
 * Icon mui ten la SVG THAT (Swiper JS tu chen .swiper-navigation-icon vao
 * trong nut), KHONG phai ky tu font qua ::after -- rule font-size o tren
 * khong co tac dung gi (giu lai vo hai, phong ban Swiper khac dung font-icon
 * that). CSS lõi Swiper dat .swiper-navigation-icon{width:100%;height:100%}
 * lam icon phinh to KHOP HET nut 40px -- do khach bao nut angle to qua.
 * Ep ve kich thuoc nho, giu dung ty le goc cua SVG (11x20).
 */
.cat-row .swiper-button-prev svg,
.cat-row .swiper-button-next svg{
	width:10px;
	height:18px;
}
.cat-row .swiper-button-disabled{
	display:none;
}

/*
 * ≤680px (cùng ngưỡng .sp-banner/.prod-grid đã dùng trong file kia): ẩn nút
 * mũi tên, chỉ còn vuốt chạm — đúng hành vi trang tham khảo trên mobile.
 */
@media(max-width:680px){
	.cat-row.swiper{ padding:0 var(--sp-4); }
	.cat-row .swiper-button-prev,
	.cat-row .swiper-button-next{ display:none; }
}

@media(prefers-reduced-motion:reduce){
	.cat-ic,
	.cat-row .swiper-button-prev,
	.cat-row .swiper-button-next{ transition:none; }
}