/** * Vinpack — CSS CHỈ CỦA trang danh mục sản phẩm (taxonomy-vp_product_cat.php), * Phase I Task 1. * * Nguồn: ~/vp-mockups/danhmuc.html — `.sp-banner`, `.wrap` chứa `.cat-row`, * `.shop.wrap` (`.filter` + `.prod-grid` + `.pager`). * * Dependency bắt buộc 'vinpack-global' + 'vinpack-layout' (khai ở * inc/enqueue.php) — file này dùng token màu/khoảng cách của global.css và * không định nghĩa lại `.wrap` / `section.wrap` / `.section-head`, đã có sẵn. * * --------------------------------------------------------------------------- * BỐN TRANG DÙNG CHUNG FILE NÀY, KHÔNG PHẢI HAI (Phase M Task 2) * --------------------------------------------------------------------------- * `.art-wrap`/`.art-layout`/`.art-toc`/`.art-author` (TOC + tác giả tĩnh) và * `.faq`/`.faq-box`/`.faq-list` giờ phục vụ CẢ single-vp_project.php lẫn * single-vp_product.php/taxonomy-vp_product_cat.php/archive-vp_product.php — * inc/enqueue.php thêm is_singular( 'vp_project' ) vào ĐÚNG điều kiện đã có * cho is_singular( 'vp_product' ) (Phase J Task 2), không tạo nhánh enqueue * riêng. `.art-author` (khối tác giả) dời từ product-single.css sang đây ở * Task này vì có người dùng thứ hai — xem docblock ngay tại rule đó. * * project-single.css KHÔNG khai lại bất kỳ rule `.art-*`/`.pd-author-*` nào ở * đây — chỉ chứa `.detail-*` thật sự mới của single-vp_project.php. * * @package Vinpack */ /* ---------- Banner ---------- */ /* * `.sp-banner` VẪN dùng nguyên vẹn ở archive-vp_product.php (trang * "/san-pham/", chung file CSS này) — KHÔNG xoá/sửa 5 rule dưới đây dù * taxonomy-vp_product_cat.php đã đổi sang `.cat-hero`/`.cat-hero-info` * (SỬA 27/08/2026, xem docblock ngay trong taxonomy-vp_product_cat.php). * Khách xác nhận đổi layout CHỈ áp cho trang danh mục, không đụng "/san-pham/". */ .sp-banner{ background:linear-gradient(160deg,var(--navy) 0%,var(--navy-dark) 100%); color:#fff; padding:56px 0 64px; /* * CANH TRÁI (07/09/2026, đợt đồng bộ banner). Đo trước khi sửa: breadcrumb * ở 562..703 và H1 ở 408..857 — cả khối nằm giữa màn hình, trong khi bảy * banner khác của site đặt breadcrumb/H1 ở mốc trái 75px. */ text-align:left; } /* * SỬA (28/08/2026, khách yêu cầu "đồng bộ lại tất cả cùng 1 style" cho * breadcrumb): màu đổi từ hex #A9C4FF/#fff CHÉP TAY sang token var(--on- * navy-text)/var(--white) + thêm letter-spacing:.3px — khớp đúng * `.service-banner .crumb` của page-dichvu.css (banner nền navy còn lại * duy nhất khác trên site). #A9C4FF TRÙNG giá trị --on-navy-accent (một * token KHÁC, xem global.css) — không phải cùng công thức breadcrumb đã * chọn thống nhất ở đây, nên đổi hẳn sang --on-navy-text, không chỉ đổi * cách viết. */ .sp-banner .crumb{ font-size:13px; color:var(--on-navy-text); margin-bottom:var(--sp-4); letter-spacing:.3px; } .sp-banner .crumb a{ color:var(--on-navy-text); } .sp-banner .crumb a:hover{ color:var(--white); } .sp-banner h1{ color:#fff; font-size:38px; margin-bottom:var(--sp-4); } .sp-banner p{ color:var(--on-navy-text); font-size:16px; max-width:640px; margin:0; line-height:1.7; } /* * `.cat-hero`/`.cat-hero-info` — CHỈ taxonomy-vp_product_cat.php (SỬA * 27/08/2026, khách gửi ảnh chụp /tui-nilon/, khoanh đỏ khối breadcrumb/H1/ * dòng dẫn: "chuyển info khoanh đỏ xuống vùng trắng còn vùng xanh là banner * có thể bỏ ảnh vào được kích thước tỷ lệ phổ biến tương đương ~16:5"). * * SỬA LẦN 2 (27/08/2026, cùng ngày): khách gửi ảnh banner mẫu thật * (okachi.vn, tên file mã hoá kích thước "2640x500") để chốt đúng tỉ lệ — * đo được 2640:500 = 5.28:1 (rút gọn 132:25), KHÁC "~16:5" (3.2:1) đã ước * lượng lúc đầu. Đổi `aspect-ratio` theo đúng tỉ lệ mẫu thật, không dùng số * ước lượng ban đầu nữa. * * `aspect-ratio:2640/500` giữ đúng tỉ lệ mẫu khách gửi bất kể ảnh gốc kích * thước gì — `object-fit:cover` cắt ảnh cho vừa khung thay vì méo hình. Nền gradient * navy (giống hệt màu `.sp-banner` cũ) hiện SẴN phía sau — chưa danh mục * nào có `tc_banner_image` nên đây là trạng thái graceful "chưa có ảnh", * không phải ô trống lỗi; khi có ảnh thật, ảnh phủ kín khung, không thấy * gradient nữa. * * SỬA (27/08/2026, khách gửi ảnh chụp /tui-nilon/ khoanh đỏ 2 khoảng trắng * thừa — trên khung ảnh VÀ dưới khối info): `.cat-hero` là thẻ
* TRẦN, dính rule chung `:where(section){padding-block:var(--sp-8)}` * (global.css) — KHÔNG chủ ý, bỏ sót khi dựng lần đầu. `.cat-hero-img` (tỉ * lệ 16:5 tự thân) và `.cat-hero-info` (đã có padding riêng) không cần — * hơn nữa KHÔNG được cần — khoảng đệm ngoài của chính `.cat-hero`. Đặt * `padding:0` xoá khoảng thừa cả trên khung ảnh lẫn dưới khối info, không * đụng `:where(section)` gốc (rule dùng chung toàn site, nhiều nơi khác vẫn * cần). */ .cat-hero{ padding:0; } /* * SỬA 05/09/2026 (khách chốt kích thước ảnh banner): desktop 1920x425 * (aspect-ratio 1920/425 ~ 4.52:1, cao hơn mốc 2640/500 = 5.28:1 chốt * 27/08/2026), điện thoại 430x150 (~2.87:1) để ảnh không mỏng như một vệt khi * bề ngang chỉ còn ~430px. Mốc 600px là breakpoint điện thoại các file này đang * dùng. Ảnh vẫn `object-fit:cover` nên ảnh gốc cỡ nào cũng lấp đúng khung. */ .cat-hero-img{ width:100%; aspect-ratio:1920/425; overflow:hidden; background:linear-gradient(160deg,var(--navy) 0%,var(--navy-dark) 100%); } .cat-hero-img-el{ width:100%; height:100%; object-fit:cover; display:block; } /* * Khối info chuyển sang NỀN TRẮNG (thừa hưởng nền trang, không tự đặt * background) — chữ đổi từ trắng-trên-navy (`.sp-banner` cũ) sang * navy/xám-trên-trắng. `text-align:center` + `max-width` của `p` giữ * nguyên bố cục cũ, chỉ đổi bảng màu. * * SỬA (27/08/2026, cùng phản hồi "giảm spacing luôn" ở dưới): `padding- * bottom` giảm từ `--sp-7` (48px) xuống `--sp-5` (24px) — khoảng trắng * khách khoanh đỏ giữa đoạn mô tả và hàng danh mục con là TỔNG của đệm * dưới `.cat-hero-info` CỘNG đệm trên của `.cat-sec.wrap` ngay sau (xem * rule đó bên dưới, cũng giảm cùng lúc) — giảm CẢ HAI phía mới hết khoảng * trắng thừa, giảm một phía thôi vẫn còn thấy to. */ .cat-hero-info{ padding:var(--sp-6) var(--wrap-x) var(--sp-5); text-align:center; } /* * SỬA (27/08/2026, khách gửi ảnh chụp /tui-nilon/ khoanh gạch chéo đè lên * dòng dẫn + mũi tên chỉ breadcrumb): "bỏ cái mô tả nhỏ trên tất cả product * cat và chuyển cái breadcrumb canh lề trái". `text-align:left` CHỈ áp cho * `.crumb` — `.cat-hero-info` (khối cha) vẫn giữ `text-align:center` để H1 * không đổi (khách không khoanh vào H1). */ .cat-hero-info .crumb{ font-size:13px; color:var(--text-muted); margin-bottom:var(--sp-4); text-align:left; } .cat-hero-info .crumb a{ color:var(--text-muted); } .cat-hero-info .crumb a:hover{ color:var(--navy); } .cat-hero-info h1{ color:var(--navy); font-size:38px; margin-bottom:var(--sp-4); } /* * `.cat-hero-info p` (dòng dẫn tc_banner_lead, từng có text-align:justify + * padding riêng, xem commit 3407458) đã XOÁ khỏi CSS — template * (taxonomy-vp_product_cat.php) không còn render thẻ

này nữa (SỬA * 27/08/2026, khách yêu cầu bỏ hẳn mô tả nhỏ khỏi mọi trang danh mục). Field * ACF tc_banner_lead vẫn còn, chỉ ngừng hiển thị — xem lịch sử git nếu cần * khôi phục lại rule CSS này. */ /* ---------- Heading danh mục cha ---------- */ /* * --------------------------------------------------------------------------- * TRI SO LAY DUNG TU MOCKUP, KHONG LAM TRON VE TOKEN * --------------------------------------------------------------------------- * Thang token cua theme la 4/8/12/16/24/32/48/96. Mockup trang danh muc * (~/vp-mockups (3.1)/(3.2)) dung mot so tri so KHONG nam trong thang do: * 14 / 18 / 20 / 22 / 36 / 44 / 72 / 88. Ban dung dau da "lam tron" chung ve * token gan nhat, gay lech 13 cho so voi thiet ke — do that bang computed * style, mockup mo cung mot trinh duyet voi trang that. * * Khach yeu cau dong bo 100% voi mockup, nen nhung cho nay ghi THANG px dung * bang mockup. Doi lai la mat tinh nhat quan cua thang token o dung may cho * nay; day la danh doi CO Y, khong phai quen dung token. */ /* * --------------------------------------------------------------------------- * KHOANG CACH DOC — CO Y KHAC MOCKUP (khach yeu cau thu gon) * --------------------------------------------------------------------------- * `section.wrap` dung chung cho ca `.cat-sec` lan `.shop` va cho ca hai * padding 96px tren duoi (dung y mockup). Hai khoi nay DINH NHAU nen khoang * ho giua dai danh muc va cot loc bi CONG DON: do that 96 + 96 = 192px, gan * bang mot man hinh dien thoai chi de trong. * * Khach xem trang that va yeu cau thu gon. Day la cho DUY NHAT trong trang * danh muc co y khac mockup — ghi ro de sau nay khong ai "sua lai cho dung * thiet ke" ma khong biet vi sao. * * Dang chu y: chinh mockup cung khai `.shop{padding-bottom:80px}` nhung rule * do THUA do dac hieu (`.shop` la (0,1,0), `section.wrap` la (0,1,1)) nen * chua bao gio co tac dung. Tuc y do goc cua designer cho khoi nay von cung * nho hon 96px — thu gon o day di dung huong do, khong phai bia ra. * * Sau khi sua (do that): banner -> tieu de 56px (cu 96), dai danh muc -> cot * loc 48px (cu 192). * * SUA LAN 2 (27/08/2026, khach gui anh chup /bao-bi-duoc-pham-y-te/ khoanh * do + mui ten chi khoang trang giua doan mo ta va dai danh muc con, cung * yeu cau voi doi text-align:justify o .cat-hero-info p): 56px top nay tinh * tu thoi con `.sp-banner` (padding-bottom rieng 64px) - gio doi sang * `.cat-hero-info` (padding-bottom da giam con 24px, xem rule do trong file * nay), tong khoang trang do that 24+56=80px van con to hon can thiet. Giam * tiep top xuong 24px (tong con 24+24=48px) - giam CA HAI phia (chinh no va * `.cat-hero-info` cung luc) moi het khoang trang thua, giam mot phia thoi * van con thay to. */ .cat-sec.wrap{ padding-top:24px; padding-bottom:48px; } /* Noi tiep ngay duoi dai danh muc — khong can dem tren nua; day giu 80px dung bang con so mockup da khai cho chinh `.shop`. */ /* * `padding-top:0` GIỚI HẠN LẠI CHỈ khi `.shop.wrap` đứng NGAY SAU `.cat-sec.wrap` * — khách (25/08/2026, ảnh /tui-sinh-hoc/): "ko có cat con thì bị sát quá". * * "Túi sinh học" là danh mục cấp một DUY NHẤT không có danh mục con (đo bằng * `wp term list` — không có term nào parent=id của nó), nên từ SỬA LẦN 2 * (.cat-row đổi sang hiện danh mục CON), khối `.cat-sec.wrap` KHÔNG render gì * cho trang này (guard `if ($vp_dm_siblings)` trong taxonomy-vp_product_cat.php) * — `.shop.wrap` nhảy lên đứng NGAY SAU `.sp-banner`. `padding-top:0` viết * cho trường hợp CÓ `.cat-sec` (tránh cộng dồn hai nguồn khoảng cách — chính * `.cat-sec.wrap` đã có `padding-bottom:48px` riêng) giờ áp NHẦM cho cả * trường hợp KHÔNG có `.cat-sec`, khiến banner navy dính sát chữ "Hiển thị * 9 trên tổng 10 sản phẩm..." — 0px, không phải lỗi hiển thị ngẫu nhiên. * * Selector kết hợp `.cat-sec.wrap + .shop.wrap` (0,4,0) CHỈ áp `padding-top:0` * khi thật sự có `.cat-sec.wrap` đứng liền trước — trường hợp không có (như * "Túi sinh học"), `.shop.wrap` rơi về `padding-top:var(--sp-8)` tự nhiên của * `section.wrap` (global.css, 96px) thay vì bị ép 0. Không cần bịa một giá trị * mới: đây CHÍNH LÀ khoảng cách mặc định mọi `

` khác * trên site đã dùng, chỉ là `.shop.wrap` từng luôn có `.cat-sec` đứng trước * (mọi danh mục cấp một trước SỬA LẦN 2 đều có ít nhất một con) nên chưa ai * thấy nhánh "không có" tới tận bây giờ. */ .shop.wrap{ padding-bottom:80px; } .cat-sec.wrap + .shop.wrap{ padding-top:0; } .cat-head{ text-align:center; max-width:640px; margin:0 auto 44px; } /* mockup 44px, token --sp-7 la 48px */ /* .cat-row/.cat-col/.cat-ic: chuyen sang assets/css/cat-slider.css (slider Swiper) — xem docblock file do. Chi 2 trang dung (taxonomy-vp_product_cat.php, archive-vp_product.php), tach rieng de khong bat cac trang khac dung taxonomy-danhmuc.css tai them CSS Swiper khong can den. */ /* ---------- Layout: bộ lọc trái + lưới phải ---------- */ .shop{ background:var(--white); padding-bottom:80px; } /* * SỬA LẦN 3 — khách (25/08/2026): "xoá cái sidebar và cả cho sản phẩm 1 dòng * 4 item", áp dụng ĐỒNG BỘ cho cả taxonomy-vp_product_cat.php lẫn * archive-vp_product.php (hai template dùng CHUNG các class dưới đây, xác * nhận phạm vi qua AskUserQuestion — không phải suy đoán). * * `.shop-layout` từ lưới HAI CỘT (236px sidebar + 1fr lưới sản phẩm) rút về * MỘT khối chứa `.prod-main` duy nhất — không xoá hẳn div này (vẫn giữ * `max-width:1180px; margin:0 auto` để canh giữa, cùng bề rộng hộp chứa cũ, * tránh lưới sản phẩm đột ngột đổi độ rộng khung so với `.cat-row`/`.sp-banner` * phía trên). * * RULE `.filter`/`.filter-list`/`.filter-item*` ĐÃ XOÁ — không còn markup nào * sinh ra chúng ở CẢ HAI template (`