/* ============================================================ VIOSTORE — DESIGN SYSTEM Một file duy nhất. Không framework, không reset ngoài. ============================================================ */ :root{ /* Brand — giữ vàng/đỏ của nhận diện cũ, đặt trên nền mực đậm */ /* Bốn biến này bị inc/customizer.php ghi đè ở theo lựa chọn trong Tuỳ biến. Giá trị dưới đây là mặc định, cũng là fallback khi xem file CSS ngoài WordPress (bản demo tĩnh). */ --brand:#FFD400; --brand-rgb:255, 212, 0; --brand-ink:#0E1116; /* chữ trên nền thương hiệu */ --brand-600:#E6BE00; --brand-soft:#FFF8DB; --ink:#0E1116; --ink-2:#1A1F27; --ink-3:#2A313C; --price:#E11D2A; --price-600:#C2151F; /* đỏ đậm — nền nút khi rê chuột */ --price-rgb:225, 29, 42; --price-ink:#ffffff; /* chữ trên nền giá */ --price-soft:#FFF1F2; --ok:#0E9F6E; --ok-soft:#E7F7F1; --info:#1C64F2; --info-soft:#EBF2FE; --fg:#0E1116; --fg-2:#4B5563; --fg-3:#8A93A0; --line:#E7E9EE; --line-2:#F1F3F6; --bg:#F4F5F7; --card:#FFFFFF; --font:"Inter","Be Vietnam Pro","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --sh-1:0 1px 2px rgba(14,17,22,.06),0 1px 3px rgba(14,17,22,.05); --sh-2:0 4px 12px rgba(14,17,22,.08); --sh-3:0 12px 32px rgba(14,17,22,.12); --wrap:1240px; --gap:16px; --hdr-h:72px; --topbar-h:34px; /* chiều cao thanh vàng — Tuỳ biến ghi đè, 24–56px. Thanh chỉ MỘT hàng, nên đây cũng là tổng chiều cao; mọi phần bù cho position:fixed dùng biến này. */ } *{box-sizing:border-box} html{ margin:0;padding:0; -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0;padding:0; font-family:var(--font); background:var(--bg); color:var(--fg); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; /* chặn tràn ngang trên mobile */ min-width:0; } img,video,svg,iframe{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;touch-action:manipulation} ul{margin:0;padding:0;list-style:none} h1,h2,h3,h4,h5{margin:0;letter-spacing:-.02em;overflow-wrap:anywhere} p,li,td,th{overflow-wrap:anywhere} /* Ô nhập ≥16px trên mobile — tránh iOS tự zoom khi focus */ input,select,textarea,button{font-size:inherit} @media (max-width:860px){ input[type=text],input[type=search],input[type=email],input[type=tel], input[type=number],input[type=password],select,textarea{font-size:16px !important} } .wrap{max-width:var(--wrap);margin:0 auto;padding:0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right))} .page-pad{padding-top:18px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;clip:auto;z-index:999; background:var(--brand);color:#000;padding:10px 16px;border-radius:8px} .muted{color:var(--fg-2)} .tiny{font-size:12px} .sm{font-size:13px} .bold{font-weight:700} /* ============================================================ HEADER ============================================================ */ /* Thanh vàng DÍNH ĐỈNH MÀN HÌNH. Vì nó rời khỏi luồng, phải bù ba chỗ, thiếu chỗ nào là vỡ chỗ đó: 1. body padding-top — không thì nội dung chui xuống dưới thanh; 2. .hdr top — header sticky phải dừng NGAY DƯỚI topbar, không phải top:0; 3. .catbar top (mobile) — cùng lý do, xem khối @media bên dưới. Chiều cao lấy từ --topbar-h chứ không viết số: Tuỳ biến cho đổi chiều cao topbar (24–56px), viết cứng là lệch ngay khi chủ shop chỉnh. */ .topbar{background:var(--brand);color:#1A1600;font-size:12.5px;font-weight:600; position:fixed;top:0;left:0;right:0;z-index:110} body{padding-top:var(--topbar-h)} /* Thanh admin của WordPress cũng position:fixed top:0 — không đẩy topbar xuống thì nó nằm đè lên nhau với người đang đăng nhập. */ body.admin-bar .topbar{top:32px} /* MỘT HÀNG: SĐT (trái) · dãy ✓ cam kết · link + MXH (phải). `flex-wrap:nowrap` là bắt buộc, không phải cho đẹp: thanh đang `position:fixed` và phần bù (body padding, .hdr top, .catbar top) tính bằng hằng số --topbar-h. Cho nó xuống dòng là chiều cao thật đổi theo nội dung, lệch bao nhiêu che nội dung bấy nhiêu. Chật thì `.usps{overflow:hidden}` cắt bớt chữ, chứ tuyệt đối không được sinh hàng thứ hai. */ .topbar .wrap{display:flex;align-items:center;flex-wrap:nowrap;height:var(--topbar-h);gap:16px} .topbar .usps{display:flex;align-items:center;gap:18px;overflow:hidden;min-width:0} .topbar .usps span{white-space:nowrap} .topbar-links{margin-left:auto;display:flex;gap:14px;white-space:nowrap} /* Thanh không được xuống dòng, nên chật thì phải BỎ NGUYÊN MỤC, đừng để overflow cắt ngang chữ. Số đo thật ở 861px: cần 959px (99 SĐT + 388 cam kết + 440 link + 32 gap) mà chỉ có 846px — thiếu 113px, hai mục cuối bị xén giữa chữ. Bề ngang từng mục: 102 / 128 / 77, gap 18. • đủ cả 3 cần ≳ 975px • bỏ mục 3 cần ≳ 880px • bỏ mục 2+3 thì luôn vừa Dùng nth-of-type chứ KHÔNG dùng nth-child: giữa các còn có nên nth-child đếm lệch. Ẩn span nào thì ẩn luôn dấu chấm đứng trước nó. */ @media (max-width:1000px){ .topbar .usps span:nth-of-type(n+3), .topbar .usps i.dot:nth-of-type(n+2){display:none} } @media (max-width:900px){ .topbar .usps span:nth-of-type(n+2), .topbar .usps i.dot{display:none} } /* SĐT + email. `flex:none` bắt buộc — xem 4.14: mọi con trực tiếp của `.topbar .wrap` (flex, có phần tử cuộn) đều phải chặn co, không thì nó bị bóp rồi tràn đè lên nhóm bên cạnh. */ .topbar-contact{display:flex;align-items:center;gap:16px;flex:none} .topbar-contact .tbc{display:inline-flex;align-items:center;gap:6px; color:inherit;text-decoration:none;white-space:nowrap;font-weight:700} .topbar-contact .tbc:hover{text-decoration:underline} .topbar-contact .tbc-i{flex:none;color:var(--ink)} /* icon đen */ .dot{width:5px;height:5px;border-radius:50%;background:#1A1600;opacity:.45;flex:none;align-self:center} .hdr{background:var(--ink);color:#fff;position:sticky;top:var(--topbar-h);z-index:100} .hdr .wrap{display:flex;align-items:center;gap:20px;min-height:var(--hdr-h)} .logo{display:flex;align-items:center;gap:var(--logo-gap,10px);flex:none;color:inherit} .logo .mark{width:var(--logo-mark,38px);height:var(--logo-mark,38px);border-radius:11px;background:var(--brand);color:var(--brand-ink,#0E1116); display:grid;place-items:center;font-weight:900;font-size:19px;letter-spacing:-.04em;flex:none} .logo .txt{line-height:1.05;min-width:0} .logo .txt b{display:block;font-size:19px;letter-spacing:-.02em} .logo .txt small{display:block;font-size:10.5px;color:var(--brand);letter-spacing:.14em;text-transform:uppercase;font-weight:700} .logo .logo-img,.logo img.custom-logo{height:var(--logo-h,40px);width:auto;max-width:var(--logo-mw,180px);object-fit:contain} .logo .custom-logo-link{display:contents} /* tránh bọc link lồng trong .logo */ .logo-layout-stack{flex-direction:column} .logo-align-center{align-items:center;text-align:center} /* KHÔNG đặt tên class là .search: WordPress gắn sẵn class `search` vào ở trang kết quả tìm kiếm, nên mọi luật .search sẽ đổ lên cả trang — cụ thể max-width:560px bóp toàn bộ site lại. Dùng .hsearch cho ô tìm ở header. */ .hsearch{flex:1;position:relative;max-width:560px} .hsearch form{position:relative} .hsearch input[type=search]{ width:100%;height:44px;border-radius:var(--r);border:1.5px solid transparent; background:#fff;padding:0 68px 0 42px;font-size:14.5px;color:var(--fg);outline:none; -webkit-appearance:none;appearance:none; } .hsearch input::placeholder{color:var(--fg-3)} .hsearch input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(255,212,0,.28)} .hsearch .ico{position:absolute;left:13px;top:13px;color:var(--fg-3);z-index:1} .hsearch .go{position:absolute;right:5px;top:5px;height:34px;padding:0 14px;border-radius:9px; background:var(--brand);color:#0E1116;font-weight:700;font-size:13px} .hact{display:flex;align-items:center;gap:4px;margin-left:auto} .hbtn{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:var(--r);color:#E6E9EE;min-height:44px} .hbtn:hover{background:var(--ink-2)} .hbtn .l1{font-size:11px;color:#98A1AE;line-height:1.15;display:block} .hbtn .l2{font-size:13.5px;font-weight:650;line-height:1.2;display:block} .hbtn.call .l2{color:var(--brand)} /* ---------- Thanh danh mục + mega menu ---------- */ .catbar{background:var(--ink-2);position:relative;z-index:90} .catbar .wrap{display:flex;align-items:center;gap:2px;height:46px;overflow-x:auto;scrollbar-width:none} .catbar .wrap::-webkit-scrollbar{display:none} .cat{display:flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:9px; color:#D3D8E0;font-size:13.5px;font-weight:600;white-space:nowrap;flex:none} .cat:hover,.cat.on{background:#333B48;color:#fff} .cat.hot{color:var(--brand)} /* Tab của trang đang xem: nền thương hiệu để phân biệt hẳn với .on (nút mega). */ .cat.current,.cat.current:hover{background:var(--brand);color:var(--brand-ink);font-weight:700} .cat.current.hot{color:var(--brand-ink)} /* flex:none bắt buộc — .catbar .wrap là flex cuộn ngang, tổng các mục (716px) rộng hơn màn hình điện thoại. Thiếu nó thì .mega-host co lại (126→99px) trong khi thẻ .cat bên trong giữ nguyên bề rộng, tràn ra 27px và đè lên mục kế tiếp — đúng cảnh chữ "Đồng hồ" nằm trên nền vàng của "Điện thoại". Các .cat khác đã có flex:none sẵn ở dưới. */ .mega-host{align-self:stretch;display:flex;align-items:center;position:static;flex:none} .mega{ position:absolute;left:0;right:0;top:100%;background:#fff; border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:var(--sh-3); padding:20px;display:none;grid-template-columns:220px 1fr 260px;gap:24px; max-width:var(--wrap);margin:0 auto; } .mega-host:hover .mega,.mega-host:focus-within .mega{display:grid} /* Thanh đầu panel, nút mở dòng máy, nút quay lại: chỉ dùng ở mobile, nơi panel mở bằng chạm. Desktop giữ nguyên mega hover ba cột. */ .mega-head{display:none} /* Mũi tên thì hiện ở CẢ hai: catbar có ba mục mega (Điện thoại · Đồng hồ · Máy tính bảng) mà chỉ mục đầu có nền sáng, nên hai mục kia cần dấu hiệu khác để khách biết bấm/rê vào sẽ đổ menu hãng xuống. */ .cat-caret{display:none} .cat.has-mega .cat-caret{display:block;margin-left:-2px;opacity:.7} .brand-more{display:none} .series-back{display:none} .mega h5{margin:0 0 10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)} .mega .brands li a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;font-weight:600;font-size:14px} .mega .brands li a:hover,.mega .brands li.on a{background:var(--brand-soft)} .mega .brands .n{margin-left:auto;font-size:11.5px;color:var(--fg-3);font-weight:500} .mega .series-panel{display:none} .mega .series-panel.on{display:block} .mega .series{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 18px;align-content:start} .mega .series a{font-size:13.5px;color:var(--fg-2);padding:5px 0} .mega .series a:hover{color:var(--price)} .mega .series .serie-group{grid-column:1/-1;padding:6px 0 10px;border-bottom:1px solid var(--line,rgba(0,0,0,.06))} .mega .series .serie-group:last-of-type{border-bottom:0} .mega .series .serie-parent{display:block;font-weight:700;font-size:13.5px;color:var(--fg);padding:2px 0 6px} .mega .series .serie-kids{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 16px} .mega .series .serie-kids a{font-size:13px;color:var(--fg-2)} .mega .series .serie-all{grid-column:1/-1;font-weight:700;color:var(--price);margin-top:6px} /* ---------- Nút mạng xã hội (topbar + footer) — viostore_social_html() ---------- */ /* Icon vẽ bằng fill:currentColor, nên đổi màu chỉ cần đặt `color` cho thẻ . */ .vio-socials{display:flex;align-items:center;flex-wrap:wrap;gap:8px} .vio-socials .soc{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:999px;color:inherit;transition:background-color .15s,color .15s,opacity .15s} .vio-socials .soc svg{display:block} .vio-socials .soc:focus-visible{outline:2px solid currentColor;outline-offset:2px} .vio-socials .soc-t{font-size:12px;font-weight:600;padding:0 6px} /* Topbar: nền vàng, icon chìm; hover đổ nền đen cho rõ vùng bấm. `flex:none` cho cả hàng link lẫn dãy icon là bắt buộc: chỉ .usps được co. Thiếu nó, ở khoảng 861–1080px dãy icon là thứ duy nhất co được trong .topbar-links → bị bóp còn một cột 24px và 4 icon xếp dọc, tràn khỏi topbar. */ .topbar-links{flex:none} .topbar-social{gap:4px;margin-left:6px;flex:none;flex-wrap:nowrap} .topbar-social .soc{width:24px;height:24px;opacity:.75} .topbar-social .soc:hover{background:var(--ink);color:var(--brand);opacity:1} /* Footer: nút tròn nền mờ, hover đổi sang màu thương hiệu của từng mạng. */ .ft-social{margin-top:12px} .ft-social .vio-socials-t{font-size:12px;font-weight:600;opacity:.7;margin-right:2px} .ft-social .soc{width:36px;height:36px;background:rgba(255,255,255,.08)} .ft-social .soc:hover{color:#fff} .ft-social .soc-facebook:hover{background:#1877F2} .ft-social .soc-tiktok:hover{background:#010101} .ft-social .soc-youtube:hover{background:#FF0000} .ft-social .soc-instagram:hover{background:#C13584} /* KHÔNG đặt display ở đây. Luật này là (0,2,0), cao hơn `.promo` (0,1,0) ở khối hero bên dưới, nên `display:block` từng đè chết cả `display:flex` lẫn `flex-direction:column` + `justify-content:center`. Hậu quả: và là thẻ inline nên dính liền nhau trên một dòng ("Trả góp 0% qua thẻ Visa · Master · JCB…") và chữ không căn giữa ô. Thẻ mang .promo vẫn là block-level nhờ chính display:flex đó. */ .hero-side .promo{text-decoration:none;color:inherit} .hero-side a.promo:hover{filter:brightness(1.03)} .mega .quick{background:var(--bg);border-radius:var(--r);padding:14px} .mega .quick a{display:block;padding:8px 10px;border-radius:8px;font-size:13.5px;font-weight:600; background:#fff;margin-bottom:6px;box-shadow:var(--sh-1)} .mega .quick a:hover{color:var(--price)} /* ============================================================ TRANG CHỦ — hero + trust ============================================================ */ .hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--gap);margin:16px 0} .hero-main{ position:relative;border-radius:var(--r-xl);overflow:hidden;color:#fff;padding:34px; background:radial-gradient(120% 130% at 80% 0%,#2B3442 0%,#0E1116 55%); min-height:288px;display:flex;flex-direction:column;justify-content:center; } .hero-main .glow{position:absolute;right:-60px;top:-40px;width:340px;height:340px;border-radius:50%; background:radial-gradient(circle,rgba(255,212,0,.22),transparent 62%);pointer-events:none} .hero-main .kicker{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)} .hero-main h1{margin:8px 0 10px;font-size:34px;line-height:1.12;letter-spacing:-.03em;max-width:16ch} .hero-main p{margin:0 0 18px;color:#B9C0CB;max-width:46ch;font-size:14.5px} .hero-cta{display:flex;gap:10px;flex-wrap:wrap} .cta{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 20px;border-radius:11px; background:var(--brand);color:#0E1116;font-weight:750;font-size:14.5px} .cta.ghost{background:transparent;border:1.5px solid #3B4453;color:#fff} .hero-side{display:flex;flex-direction:column;gap:var(--gap)} .promo{flex:1;border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column; justify-content:center;box-shadow:var(--sh-1)} .promo b{font-size:15px;letter-spacing:-.01em} .promo span{font-size:12.5px;color:var(--fg-2)} .promo.p1{background:linear-gradient(135deg,#FFE87A,#FFD400)} .promo.p1 span{color:#7A6400} .promo.p2{background:#fff} .trust{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-bottom:8px} .trust .t{background:#fff;border-radius:var(--r-lg);padding:14px;display:flex;gap:12px; align-items:center;box-shadow:var(--sh-1)} .trust .t .ic{width:40px;height:40px;flex:none;border-radius:11px;background:var(--brand-soft); display:grid;place-items:center;color:#8A6D00} .trust .t b{display:block;font-size:13.5px} .trust .t span{font-size:12px;color:var(--fg-2)} /* ============================================================ BLOG / TRANG TĨNH / 404 ============================================================ */ .page-title{font-size:24px;margin-bottom:14px} .page-article{max-width:80ch} .postgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--gap)} .postcard{background:#fff;border-radius:var(--r-lg);padding:14px;box-shadow:var(--sh-1)} .postthumb{border-radius:var(--r);overflow:hidden;margin-bottom:10px;aspect-ratio:16/9} .postthumb img{width:100%;height:100%;object-fit:cover} .postcard h2{font-size:15.5px;line-height:1.35;margin-bottom:6px} .notfound{max-width:640px;margin:0 auto;text-align:center} .notfound h1,.notfound h2{font-size:22px;margin-bottom:8px} .search-404{margin:18px auto;max-width:420px} .search-404 input[type=search]{border:1.5px solid var(--line)} .notfound-cta{margin-top:16px} /* ============================================================ THẺ SẢN PHẨM ============================================================ */ .section{margin:24px 0} .sec-head{display:flex;align-items:flex-end;gap:14px;margin-bottom:12px} .sec-head h2{font-size:19px} .sec-head .more{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--info)} ul.products,.grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:var(--gap); margin:0;padding:0;list-style:none; } .pcard{ --pcard-pad:12px;--pcard-title:13.8px; background:var(--card);border-radius:var(--r-lg);padding:var(--pcard-pad);box-shadow:var(--sh-1); display:flex;flex-direction:column;position:relative;transition:box-shadow .18s,transform .18s; } /* ------------------------------------------------------------------ Gỡ layout float mặc định của WooCommerce. woocommerce-layout.css vẫn được nạp (cart/checkout/account cần nó) và ép: li.product{float:left;width:22.05%;margin:0 3.8% 2.992em 0;padding:0} cùng li.product a img{height:auto;margin:0 0 1em}. Trong grid của theme, các % đó tính theo BỀ RỘNG Ô GRID chứ không phải cả hàng, nên thẻ co còn ~50px, mất padding và tụt hàng do margin-bottom 2.992em. Selector dưới đây cố ý viết trùng specificity với luật của Woo (0,3,2 / 0,3,3); main.css nạp sau nên thắng. Giá trị thay đổi theo breakpoint và theo kiểu thẻ trong Customizer đi qua biến --pcard-* để các luật specificity thấp (.pcard, .vio-card-flat .pcard…) vẫn điều khiển được. ------------------------------------------------------------------ */ /* Clearfix ::before/::after của Woo trở thành GRID ITEM: chúng chiếm 2 ô đầu nên hàng đầu tiên bị đẩy sang cột 2 và sản phẩm cuối rớt xuống hàng dưới. */ .woocommerce ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::before, .woocommerce-page ul.products::after{content:none;display:none} .woocommerce ul.products li.product, .woocommerce-page ul.products li.product{ float:none;width:auto;margin:0;padding:var(--pcard-pad,12px); } .woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img{ width:100%;height:100%;margin:0;display:block;object-fit:contain;padding:8px; } .woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3{ padding:0;margin:0 0 8px;font-size:var(--pcard-title,13.8px); } .woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price{ color:var(--price);font-size:17px;font-weight:800;margin:0;display:flex; } .woocommerce ul.products li.product .price del, .woocommerce-page ul.products li.product .price del{opacity:1;display:inline;font-size:12.5px;color:var(--fg-3)} .woocommerce ul.products li.product .price ins, .woocommerce-page ul.products li.product .price ins{font-weight:800;text-decoration:none;color:var(--price)} .pcard:hover{box-shadow:var(--sh-3);transform:translateY(-2px)} .pcard .thumb{position:relative;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden; background:linear-gradient(160deg,#F7F8FA,#EDEFF3);margin-bottom:10px} .pcard .thumb img{width:100%;height:100%;object-fit:contain;padding:8px} .flags{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:5px;align-items:flex-start;z-index:2} .flag{font-size:10.5px;font-weight:800;letter-spacing:.02em;padding:3px 7px;border-radius:6px;text-transform:uppercase} .f-new{background:var(--ok-soft);color:var(--ok)} .f-like{background:var(--info-soft);color:var(--info)} .f-sale{background:var(--price);color:#fff} .f-seal{background:#F3E8FF;color:#7E22CE} /* Tiêu đề thẻ: chiều cao CHỐT bằng bội số của line-height, không dùng min-height nữa. Bản cũ để `min-height:37px` trong khi một dòng cao 1.35em (≈18,6px ở 13,8px, ≈15,6px ở 13px) — 37px không chia hết cho chiều cao dòng. Trên trình duyệt nào `-webkit-line-clamp` không ăn (Safari/iOS đang vậy, xem ảnh chụp iPhone ngày 2026-09-04) thì `overflow:hidden` cắt ngang THÂN chữ của dòng kế tiếp, để lộ nửa chữ trông như lỗi hiển thị. `height` = số dòng × line-height (đơn vị em nên tự co theo --pcard-title ở từng breakpoint) khiến cả hai trường hợp đều gọn: clamp ăn thì có dấu "…", clamp không ăn thì cắt đúng ranh giới dòng. Đồng thời mọi thẻ cao bằng nhau nên giá và nút "Mua ngay" thẳng hàng. */ .pcard h3{ font-size:var(--pcard-title,13.8px);font-weight:650;line-height:1.35;margin:0 0 8px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2; overflow:hidden;height:2.7em; /* 2 dòng × 1.35 */ } .specs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:9px} .spec{font-size:11px;font-weight:600;color:var(--fg-2);background:var(--line-2);border-radius:6px;padding:3px 6px} /* Giá trong thẻ không bọc .price — filter giá của theme trả thẳng / hoặc span amount của wc_price(). Nên đặt typography lên chính .price-row để mọi dạng markup đều hiển thị đúng. */ .price-row{ display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-top:auto; font-size:17px;font-weight:800;color:var(--price);letter-spacing:-.02em; } .price-row .price,.pcard .price{ font-size:17px;font-weight:800;color:var(--price);letter-spacing:-.02em; display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin:0; } .price del,.price-row del{font-size:12.5px;color:var(--fg-3);font-weight:500;text-decoration:line-through} .price ins,.price-row ins{text-decoration:none;color:var(--price)} .price .from,.price small,.price-row small{font-size:11.5px;font-weight:500;color:var(--fg-3)} .off{font-size:11px;font-weight:800;color:var(--price);background:var(--price-soft);border-radius:5px;padding:2px 5px} .pcard .foot{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line); display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--fg-2);flex-wrap:wrap} .pcard .foot .sep{color:var(--line)} .stars{position:relative;display:inline-block;line-height:1;letter-spacing:-.5px;font-size:11.5px;vertical-align:middle} .stars-bg{color:#E5E7EB} .stars-fill{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:#F59E0B} .rating .stars{font-size:13px} /* Nút thêm vào giỏ trên thẻ */ .cardbtn{ margin-top:9px;width:100%;min-height:38px;border-radius:10px; background:var(--ink);color:#fff;font-size:13px;font-weight:700; display:flex;align-items:center;justify-content:center;gap:6px; } .cardbtn:hover{background:var(--price)} .cardbtn-opt{background:var(--price);border:1.5px solid var(--price);color:var(--price-ink)} .cardbtn-opt:hover{background:var(--price-600);border-color:var(--price-600);color:var(--price-ink)} /* Icon giỏ ở header */ .hbtn.cart{position:relative} .hbtn.cart .badge{ position:absolute;top:2px;left:24px;background:var(--price);color:#fff; font-size:10.5px;font-weight:700;min-width:17px;height:17px;border-radius:9px; display:grid;place-items:center;padding:0 4px; } .hbtn.cart .badge[hidden]{display:none} /* Nút tài khoản ở header — chỉ icon, không nhãn (nhãn nằm trong .sr cho trình đọc màn hình). Ép vuông 44px để cùng chiều cao với các .hbtn khác. */ .hbtn-account{justify-content:center;padding:8px;min-width:44px;gap:0} /* Toast xác nhận đã thêm vào giỏ */ .vio-toast{ position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px); background:var(--ink);color:#fff;padding:13px 18px;border-radius:12px; font-size:14px;font-weight:600;box-shadow:var(--sh-3);z-index:300; opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:92vw; } .vio-toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto} .vio-toast a{color:var(--brand);text-decoration:underline;margin-left:6px} /* ============================================================ TRẢ GÓP & MUA TRƯỚC TRẢ SAU ============================================================ */ .paymethods{margin:0 0 16px} .paymethods .lbl{font-size:12.5px;font-weight:700;margin-bottom:7px} .payrow{display:flex;flex-direction:column;gap:8px} .paybtn{ border:1.5px solid var(--line);border-radius:11px;padding:10px 12px;text-align:left; display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline;min-height:44px; } .paybtn[hidden]{display:none} .paybtn b{font-size:13.5px;font-weight:700;color:var(--fg)} .paybtn .per{font-size:15px;font-weight:800;color:var(--price);grid-row:1;grid-column:2;white-space:nowrap} .paybtn small{grid-column:1/-1;font-size:11.5px;color:var(--fg-3);font-weight:500} .paybtn.on{border-color:var(--price);background:var(--price-soft)} .paybtn:hover{border-color:var(--fg-3)} .paybtn.on:hover{border-color:var(--price)} .paynote{margin:8px 0 0} .linkbtn{color:var(--info);font-weight:650;text-decoration:underline;font-size:12px;padding:0} .linkbtn:hover{color:var(--price)} /* ===== Cột nút nổi ở góc phải dưới ================================== Xếp từ đáy lên: nút chat → nút Facebook → nút lên đầu trang. Mọi mốc tính ngược từ MÉP TRÊN của nút chat (`--float-chat-top`), nên thêm/bớt nút ở giữa chỉ phải sửa một chỗ. Nút chat có hai kiểu và mình chỉ đặt được vị trí cho một: - khung chat 48app: `#mktwc-btn` do widget bên thứ ba dựng, đậu cứng ở bottom 80px / right 20px, cao 56px → mép trên 136px. Không sửa được, phải bám theo. - nút chat của theme (`.vio-chat`): bottom 16px, cao `--float-size`. `body.vio-chatapp` (PHP gắn khi có mã khung chat) chọn giữa hai bộ số. Cả ba nút cùng đường kính `--float-size` và cách nhau đúng `--float-gap`, nên cột nhìn thẳng hàng và đều nhau. */ :root{ /* Ba nút trong cột đều cùng đường kính; đổi một chỗ là cả cột đổi theo. */ --float-size:56px; --float-chat-top:calc(16px + var(--float-size)); --float-right:16px; --float-gap:12px; } body.vio-chatapp{--float-chat-top:136px;--float-right:20px} /* Nút chat nổi */ .vio-chat{ position:fixed;right:16px;bottom:16px;z-index:130; display:flex;align-items:center;gap:8px;height:var(--float-size);padding:0 16px;border-radius:999px; background:var(--info);color:#fff;font-weight:700;font-size:14px;box-shadow:var(--sh-3); } .vio-chat:hover{filter:brightness(1.08)} @media (max-width:860px){ .vio-chat{right:12px;bottom:84px;height:var(--float-size);padding:0 14px} .vio-chat span{display:none} .vio-chat{padding:0;width:var(--float-size);justify-content:center} } /* Nút chat Facebook — tròn, xanh Facebook, chỉ có logo ở giữa. Ngồi ngay trên nút chat. Khung chat 48app mở ra (`#mktwc-box`, z-index 2.147.483.001) sẽ che nút này, đang chat thì cũng không cần. */ .vio-fbchat{ position:fixed;right:var(--float-right);z-index:128; bottom:calc(var(--float-chat-top) + var(--float-gap)); width:var(--float-size);height:var(--float-size);border-radius:50%; display:grid;place-items:center; background:#1877F2;color:#fff;box-shadow:var(--sh-3); transition:filter .15s,transform .15s; } .vio-fbchat:hover{filter:brightness(1.08);transform:translateY(-1px);color:#fff} .vio-fbchat .soc-i{width:26px;height:26px;display:block} /* Nút lên đầu trang */ .vio-totop{ position:fixed;right:var(--float-right);z-index:125; bottom:calc(var(--float-chat-top) + var(--float-gap)); width:var(--float-size);height:var(--float-size);border-radius:50%; background:#fff;color:var(--fg); box-shadow:var(--sh-2);font-size:22px;line-height:1; display:grid;place-items:center;border:1px solid var(--line); } .vio-totop[hidden]{display:none} .vio-totop:hover{background:var(--ink);color:#fff;border-color:var(--ink)} /* Có nút Facebook chen giữa thì nhích lên thêm một nút nữa. */ body.vio-has-fb .vio-totop{ bottom:calc(var(--float-chat-top) + var(--float-gap) * 2 + var(--float-size)); } @media (max-width:860px){ /* `.vio-chat` mobile: bottom 84 + `--float-size`. Widget 48app không đổi mốc dưới nhưng nhích sát mép phải hơn. */ :root{--float-chat-top:calc(84px + var(--float-size));--float-right:12px} body.vio-chatapp{--float-chat-top:136px;--float-right:14px} } /* Modal bảng trả góp */ .vio-modal{ position:fixed;inset:0;z-index:400;background:rgba(14,17,22,.55); display:grid;place-items:center;padding:16px;overflow-y:auto; } .vio-modal[hidden]{display:none} body.modal-open{overflow:hidden} .vio-modal-box{ background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-3); width:min(520px,100%);max-height:88vh;overflow-y:auto; } .vio-modal-head{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:16px 18px;border-bottom:1px solid var(--line-2);position:sticky;top:0;background:#fff; } .vio-modal-head h3{font-size:17px} .vio-modal-x{width:36px;height:36px;border-radius:50%;background:var(--line-2);font-size:15px;flex:none} .vio-modal-body{padding:18px} .vio-modal-body h4{margin:0 0 8px} .vio-modal-body .spectbl th{width:auto} .vio-modal-body .spectbl td{text-align:right} .modal-notes{list-style:disc;padding-left:18px;margin:14px 0 16px} .modal-notes li{margin-bottom:4px} /* Popup bảng trả góp chi tiết. Dùng lại đúng ngôn ngữ của trang sản phẩm: nút chọn là .obtn (viền đỏ + dấu ✓ khi chọn), số tiền chính màu --price, bảng nền trắng viền --line. */ .vio-modal-box.vio-inst{width:min(620px,100%)} .vio-inst .vio-modal-head{align-items:flex-start} .vio-inst-title h3{margin-bottom:2px} .vio-inst-title p{margin:0;line-height:1.35;max-width:40ch} .vio-inst-pick{margin:0 0 14px} .vio-inst-pick .lbl{font-size:12.5px;font-weight:700;margin-bottom:7px} .vio-inst .optrow .obtn{flex:1 1 148px} .vio-inst-none{ border:1px solid var(--line);background:var(--bg);border-radius:var(--r); padding:12px 14px;color:var(--fg-2);margin:0 0 16px; } /* Khối chốt số: góp mỗi kỳ bao nhiêu, rồi mới tới các con số phụ */ .vio-inst-hero{ border:1.5px solid var(--price);border-radius:var(--r-lg);overflow:hidden; background:var(--price-soft);margin:0 0 18px; } .vio-inst-hero .hero-main{padding:13px 16px;display:grid;gap:1px} .vio-inst-hero .k{ font-size:11.5px;font-weight:750;color:var(--price); text-transform:uppercase;letter-spacing:.05em; } .vio-inst-hero .v{font-size:30px;font-weight:850;color:var(--price);line-height:1.12;letter-spacing:-.02em} .vio-inst-hero .s{font-size:12.5px;font-weight:600;color:var(--fg-2)} .vio-inst-kv{background:#fff;border-top:1.5px solid var(--price);padding:4px 16px} .vio-inst-kv li{ display:flex;gap:12px;justify-content:space-between;align-items:baseline; font-size:13px;padding:8px 0;border-bottom:1px dashed var(--line); } .vio-inst-kv li:last-child{border-bottom:0} .vio-inst-kv li span{color:var(--fg-2)} .vio-inst-kv li b{font-weight:750;text-align:right} .vio-inst-kv li.ok b{color:var(--ok)} .vio-inst-kv li.up b{color:var(--price)} /* Bảng quá trình: mỗi dòng là một kỳ — đến hạn, phải trả, còn nợ lại bao nhiêu */ .vio-inst-h{font-size:14px;margin:0 0 10px} .vio-inst-scroll{ border:1px solid var(--line);border-radius:var(--r); overflow-x:auto;-webkit-overflow-scrolling:touch; } .vio-insttbl{width:100%;border-collapse:collapse;font-size:13px;min-width:340px} .vio-insttbl th,.vio-insttbl td{ padding:9px 12px;text-align:left;border-bottom:1px solid var(--line-2);white-space:nowrap; } .vio-insttbl thead th{ background:var(--line-2);color:var(--fg-2);font-size:11px;font-weight:750; text-transform:uppercase;letter-spacing:.04em; } .vio-insttbl tbody tr:last-child td{border-bottom:0} .vio-insttbl .r{text-align:right} .vio-insttbl .amt{font-weight:750;color:var(--fg)} .vio-insttbl .no{width:1%;padding-right:0} .vio-insttbl .no span{ display:grid;place-items:center;width:24px;height:24px;border-radius:50%; background:var(--line-2);color:var(--fg-2);font-size:11.5px;font-weight:750; } .vio-insttbl tr.done .no span{background:var(--ok-soft);color:var(--ok)} .vio-insttbl tr.done td:last-child{color:var(--ok);font-weight:700} /* ============================================================ GIỎ HÀNG & THANH TOÁN (template mặc định của WooCommerce, style lại) ============================================================ */ .woocommerce-cart .site-content > .wrap, .woocommerce-checkout .site-content > .wrap{padding-top:18px} .shop_table{ width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r-lg); box-shadow:var(--sh-1);overflow:hidden;font-size:14px; } .shop_table th,.shop_table td{padding:14px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:middle} .shop_table thead th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-3);font-weight:700} .shop_table tr:last-child td{border-bottom:0} .shop_table .product-thumbnail img{width:64px;height:64px;object-fit:contain;border-radius:10px;background:var(--line-2)} .shop_table .product-name a{font-weight:650} .shop_table .product-price,.shop_table .product-subtotal{font-weight:700;color:var(--price);white-space:nowrap} .shop_table .variation{font-size:12px;color:var(--fg-2);margin:4px 0 0} .shop_table .variation dt,.shop_table .variation dd{display:inline;margin:0} .shop_table .variation dd{margin-right:8px} .product-remove a{color:var(--fg-3);font-size:18px;line-height:1} .product-remove a:hover{color:var(--price)} .quantity input{ width:64px;height:38px;border:1px solid var(--line);border-radius:9px; text-align:center;font-size:14px;font-weight:600; } /* woocommerce-layout.css thả .cart_totals float:right;width:48%. Bản demo để khối tổng tiền CHIẾM TRỌN chiều ngang dưới bảng — bỏ float và trả về 100%. */ .woocommerce .cart-collaterals{display:block} .woocommerce .cart-collaterals .cart_totals{float:none;width:100%} .cart-collaterals,.cart_totals{margin-top:20px} .cart_totals table{width:100%;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-1);border-collapse:collapse;overflow:hidden} .cart_totals th,.cart_totals td{padding:13px 16px;border-bottom:1px solid var(--line-2);font-size:14px} .cart_totals th{text-align:left;color:var(--fg-2);font-weight:600} .cart_totals td{text-align:right;font-weight:700} .cart_totals .order-total td{font-size:20px;color:var(--price);font-weight:850} /* Hàng nút dưới bảng giỏ hàng */ .shop_table td.actions{background:#fafafa;border-top:1px solid var(--line-2)} .vio-cart-actions-in{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .shop_table td.actions .coupon{display:flex;gap:8px;align-items:center} .shop_table td.actions .coupon .input-text{ height:40px;padding:0 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;width:170px; } .vio-cart-update{min-height:40px} .vio-cart-call{margin-top:10px;text-align:center;font-size:12.5px;color:var(--fg-3)} .vio-cart-call a{color:var(--price)} .wc-proceed-to-checkout{margin-top:14px} /* ------------------------------------------------------------------ Ghi đè woocommerce.css cho GIỎ HÀNG. woocommerce.css nạp SAU main.css và selector của nó có tiền tố `.woocommerce` nên luôn thắng: bảng bo 5px + viền xám, ô 9px 12px, ảnh 32px, nút thanh toán tím bo 3px. Muốn giống bản demo thì phải đối lại đúng độ ưu tiên đó — dưới đây là toàn bộ chỗ cần đè, không dùng !important. ------------------------------------------------------------------ */ .woocommerce table.shop_table{ border:0;border-radius:var(--r-lg);border-collapse:collapse;margin:0;text-align:left; } .woocommerce table.shop_table th, .woocommerce table.shop_table td{ padding:14px;border-left:0;border-right:0;border-top:0; border-bottom:1px solid var(--line-2);vertical-align:middle; } .woocommerce table.shop_table thead th{font-weight:700;line-height:1.55} /* `tr.cart_item:last-of-type` KHÔNG dùng được: hàng nút (đang ẩn) mới là cuối cùng, mà :last-of-type xét theo thẻ chứ không xét class. */ .woocommerce table.shop_table tbody tr.cart_item:has(+ .vio-cart-actions) td, .woocommerce table.shop_table tbody tr:last-child td{border-bottom:0} /* Ảnh sản phẩm: woocommerce.css ép 32px, demo dùng 64px. Phải ghim luôn bề rộng CỘT: bảng tự chia cột theo nội dung, tên máy dài làm cột ảnh co lại còn ~91px, mà `max-width:100%` thì ảnh co theo — ra 62.8px. */ .woocommerce table.shop_table th.product-thumbnail, .woocommerce table.shop_table td.product-thumbnail{width:92px} .woocommerce-cart table.cart img, .woocommerce table.shop_table td.product-thumbnail img{ width:64px;height:64px;max-width:64px;object-fit:contain; border-radius:10px;background:var(--line-2); } /* Danh sách tuỳ chọn: bản mặc định cho mỗi giá trị một đoạn văn riêng (margin 12px) nên khối cao gấp đôi phần còn lại của dòng. */ .woocommerce table.shop_table td.product-name dl.variation{ margin:4px 0 0;font-size:12px;color:var(--fg-3);line-height:1.55} .woocommerce table.shop_table td.product-name dl.variation dt{ float:none;display:inline;font-weight:600;margin:0 3px 0 0} .woocommerce table.shop_table td.product-name dl.variation dd{display:inline;margin:0 10px 0 0} .woocommerce table.shop_table td.product-name dl.variation dd p{display:inline;margin:0} .woocommerce .quantity .qty{ width:64px;height:38px;min-height:38px;padding:1px 2px; border:1px solid var(--line);border-radius:9px; font-size:14px;font-weight:600;text-align:center;background:#fff;color:var(--fg); } /* Khối tổng tiền */ .woocommerce-cart .cart-collaterals .cart_totals table, .woocommerce .cart-collaterals .cart_totals table.shop_table{ border-collapse:collapse;border-radius:var(--r-lg);margin-bottom:0} .woocommerce .cart_totals table.shop_table th, .woocommerce .cart_totals table.shop_table td{ padding:13px 16px;border-top:0;border-bottom:1px solid var(--line-2)} .woocommerce .cart_totals table.shop_table th{font-weight:600;color:var(--fg-2)} .woocommerce .cart_totals table.shop_table td{text-align:right;font-weight:700} .woocommerce .cart_totals table.shop_table tr:last-child th, .woocommerce .cart_totals table.shop_table tr:last-child td{border-bottom:0} .woocommerce .cart_totals table.shop_table .order-total td{ font-size:20px;color:var(--price);font-weight:850} /* Nút "TIẾN HÀNH THANH TOÁN": demo là nút ĐỎ bo 12px cao 48px, không phải nút tím bo 3px cao 56px của WooCommerce. */ .woocommerce .wc-proceed-to-checkout{padding:0;margin-top:14px} .woocommerce .wc-proceed-to-checkout a.checkout-button{ display:inline-flex;align-items:center;justify-content:center; width:100%;min-height:48px;padding:0 22px;margin:0; border-radius:12px;background:var(--price);color:#fff; font-size:15px;font-weight:750;line-height:1.55;text-align:center; } .woocommerce .wc-proceed-to-checkout a.checkout-button:hover{ background:var(--price);filter:brightness(1.06)} .checkout-button,.button,button.button,input.button, .woocommerce-button,#place_order{ display:inline-flex;align-items:center;justify-content:center; min-height:48px;padding:0 22px;border-radius:12px; background:var(--price);color:#fff;font-weight:750;font-size:15px;border:0;cursor:pointer; } .checkout-button{width:100%} .button:hover,#place_order:hover{filter:brightness(1.06)} .button.alt{background:var(--ink)} /* Form thanh toán */ .woocommerce-billing-fields,.woocommerce-checkout-review-order,.woocommerce-additional-fields{ background:#fff;border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-1);margin-bottom:16px} .woocommerce-billing-fields h3,.woocommerce-additional-fields h3,#order_review_heading{font-size:16px;margin:0 0 14px} .form-row{margin-bottom:12px;display:flex;flex-direction:column;gap:6px} .form-row label{font-size:12.5px;font-weight:650;color:var(--fg-2)} .form-row .required{color:var(--price)} .input-text,.form-row input[type=text],.form-row input[type=tel], .form-row input[type=email],.form-row textarea,.form-row select{ width:100%;min-height:44px;border:1.5px solid var(--line);border-radius:10px; padding:10px 12px;font:inherit;font-size:14.5px;background:#fff;color:var(--fg); } .input-text:focus,.form-row select:focus,.form-row textarea:focus{ outline:none;border-color:var(--price);box-shadow:0 0 0 3px var(--price-soft)} .form-row textarea{min-height:88px;resize:vertical} /* woocommerce.css đặt `.woocommerce form .form-row .input-text{border-radius: var(--wc-form-border-radius);padding:.5em}` — 3 class nên thắng rule trên. Viết lại cho ngang cơ, đúng số của bản demo. */ .woocommerce form .form-row .input-text, .woocommerce form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea{ width:100%;min-height:44px;border:1.5px solid var(--line);border-radius:10px; padding:10px 12px;font:inherit;font-size:14.5px;background:#fff;color:var(--fg); } /* woocommerce.css đặt `height:4em` (≈67px) chứ không phải min-height, nên min-height của theme không nâng được — phải ghi đè bằng chính `height`. */ .woocommerce form .form-row textarea.input-text, .woocommerce form .form-row textarea{height:88px;min-height:88px;resize:vertical} .woocommerce #payment ul.wc_payment_methods, #payment .wc_payment_methods{list-style:none;margin:0 0 14px;padding:0; display:flex;flex-direction:column;gap:8px;border:0} #payment .wc_payment_method{border:1.5px solid var(--line);border-radius:11px;padding:12px} #payment .wc_payment_method label{font-weight:650;font-size:14px;display:flex;align-items:center;gap:8px;cursor:pointer} #payment .wc_payment_method input[type=radio]{accent-color:var(--price);width:18px;height:18px} .woocommerce #payment div.payment_box, #payment .payment_box{font-size:13px;color:var(--fg-2);margin:8px 0 0;padding:8px 0 0; background:none;border-top:1px dashed var(--line);border-radius:0;line-height:1.55} .woocommerce #payment div.payment_box::before{display:none} #payment .payment_box p{margin:0;padding:0} .woocommerce-checkout #payment{background:transparent;border-radius:0} .checkout .col2-set{display:grid;grid-template-columns:1fr 1fr;gap:16px} /* woocommerce-layout.css gắn clearfix `::before/::after{content:" ";display:table}` lên .col2-set. Trong grid, hai pseudo-element đó thành HAI Ô THẬT: chúng chiếm cột 1 nên form bị đẩy sang cột 2 và khối đơn hàng rớt xuống hàng dưới. */ .checkout .col2-set::before,.checkout .col2-set::after{display:none} /* ============================================================ TRANG DANH MỤC ============================================================ */ .crumb{font-size:12.5px;color:var(--fg-3);margin-bottom:10px} .crumb a{color:var(--fg-2)} .crumb .sep{margin:0 6px;color:var(--line)} .archive-head{margin-bottom:14px} .archive-head h1{font-size:23px} .archive-head .count{font-size:14px;font-weight:400} .archive-desc{font-size:13.5px;color:var(--fg-2);max-width:70ch;margin-top:6px} .plp{display:grid;grid-template-columns:246px minmax(0,1fr);gap:20px;align-items:start} /* Tắt cột lọc trong Tuỳ biến → lưới chiếm hết bề ngang */ .plp-nofilters{grid-template-columns:minmax(0,1fr)} .filters{background:#fff;border-radius:var(--r-lg);padding:4px 14px 14px;box-shadow:var(--sh-1); position:sticky;top:calc(var(--topbar-h) + var(--hdr-h) + 16px)} .filters-head{display:none} .fgroup{border-bottom:1px solid var(--line-2);padding:13px 0} .fgroup:last-child{border:0} .fgroup h4,.fgroup .widget-title,.fgroup .widgettitle{ margin:0 0 9px;font-size:13px;font-weight:700;letter-spacing:0} /* layered nav của WooCommerce Lưu ý cấu trúc thật:
  • Tên (19)
    • — .count là anh em của , KHÔNG nằm trong . Nên flex đặt ở
  • . */ .woocommerce-widget-layered-nav-list{display:flex;flex-direction:column;gap:2px} .woocommerce-widget-layered-nav-list li, .fgroup li{ list-style:none;display:flex;align-items:center;gap:6px; border-radius:8px;padding:0 8px;min-height:34px; } .woocommerce-widget-layered-nav-list li:hover, .fgroup li:hover{background:var(--line-2)} .woocommerce-widget-layered-nav-list li a, .fgroup li a{flex:1;font-size:13.5px;color:var(--fg-2);padding:6px 0} .woocommerce-widget-layered-nav-list li:hover a, .fgroup li:hover a{color:var(--fg)} .woocommerce-widget-layered-nav-list li .count, .fgroup li .count{margin-left:auto;font-size:11.5px;color:var(--fg-3);flex:none} .woocommerce-widget-layered-nav-list li.chosen{background:var(--price-soft)} .woocommerce-widget-layered-nav-list li.chosen a{color:var(--price);font-weight:650} .woocommerce-widget-layered-nav-list li.chosen a::before{content:"✓ "} /* "Xem thêm" cho nhóm dài (Chip có 75 loại). Dùng
    nên không cần JS; mở ra là danh sách chạy tiếp, không có viền ngăn giữa hai phần. */ .fmore>summary{list-style:none;cursor:pointer;padding:7px 8px;margin-top:2px; font-size:12.5px;font-weight:650;color:var(--price);border-radius:8px} .fmore>summary::-webkit-details-marker{display:none} .fmore>summary::after{content:" ▾"} .fmore[open]>summary::after{content:" ▴"} .fmore>summary:hover{background:var(--line-2)} .fmore[open]>summary{margin-bottom:2px} .pillrow{display:flex;flex-wrap:wrap;gap:6px} .colorrow{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px;color:var(--fg-2);cursor:pointer} .colorrow input[type=color]{width:38px;height:30px;border:1px solid var(--line);border-radius:8px;padding:2px;background:#fff;cursor:pointer} .pill{font-size:12.5px;font-weight:600;padding:7px 11px;border-radius:8px; border:1px solid var(--line);color:var(--fg-2);display:inline-block} .pill:hover{border-color:var(--fg-3)} .pill.on{border-color:var(--price);background:var(--price-soft);color:var(--price)} .toolbar{background:#fff;border-radius:var(--r-lg);padding:10px 14px;box-shadow:var(--sh-1); margin-bottom:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .chip{height:34px;padding:0 13px;border-radius:999px;background:#fff;border:1px solid var(--line); font-size:13px;font-weight:600;color:var(--fg-2);display:inline-flex;align-items:center;gap:6px} .chip.on,.chip:hover{border-color:var(--fg-3)} .filters-toggle{display:none} .woocommerce-ordering{margin:0} .woocommerce-ordering select{ height:34px;border-radius:9px;border:1px solid var(--line);padding:0 10px; font-size:13px;font-weight:600;color:var(--fg-2);background:#fff} .woocommerce-result-count{margin:0 0 0 auto;font-size:12.5px;color:var(--fg-3)} /* woocommerce.css đặt `.woocommerce .woocommerce-ordering{margin:0 0 1em}` — specificity (0,2,0), cao hơn hai luật (0,1,0) ngay phía trên nên NÓ THẮNG dù main.css nạp sau. Hai hậu quả nhìn thấy được trên thanh công cụ danh mục: 1. Lệch dọc — `.toolbar` dùng `align-items:center`, mà flex căn giữa theo HỘP LỀ. Ô chọn và dòng "Hiển thị…" mang `margin-bottom:1em` nên bị đẩy LÊN ~8px so với nhãn "Sắp xếp:" (lề 0) → nhãn trông thấp hơn hẳn. 2. `margin-left:auto` bị xoá → "Hiển thị 1–24 trong N sản phẩm" dính ngay sau ô chọn thay vì nằm ở mép phải như bản thiết kế. Phải viết TRÙNG DẠNG selector của Woo (cũng 2 class) mới đè được — xem mục 4.8 trong QUY-TRINH-CAP-NHAT-GIAO-DIEN.md. */ .woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering{margin:0} .woocommerce .woocommerce-result-count, .woocommerce-page .woocommerce-result-count{margin:0 0 0 auto} .woocommerce-pagination{margin:24px 0;display:flex;justify-content:center} /* Phân trang WooCommerce. Hai cái bẫy, luật cũ dính cả hai: 1. WooCommerce gắn class `page-numbers` lên CẢ thẻ
      , không chỉ từng nút. Luật `.page-numbers{border;border-radius;background}` vì thế bám luôn vào
        → cả dải phân trang biến thành một hộp trắng bo góc bao ngoài. Nên luật nút phải bám theo `a.page-numbers` / `span.page-numbers`, đừng bám class trần. 2. woocommerce.css có sẵn `.woocommerce nav.woocommerce-pagination ul li` (đặc trưng 0,2,3) đặt float:left + border-right #cfc8d8, và `... li span.current` (0,3,4) đặt nền #e9e6ed chữ #816f98. Luật cũ `.page-numbers` (0,1,0) và `.page-numbers.current` (0,2,0) thua cả hai, nên dáng của theme chưa bao giờ hiện ra — gap:6px cũng vô hiệu vì
          bị ép về display:inline-block. Phải viết đủ dài để vượt đặc trưng đó. */ /* Luật ngắn cho MỌI
            , kể cả khi không có wrapper