/* ============================================================ 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-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; } *{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 ============================================================ */ .topbar{background:var(--brand);color:#1A1600;font-size:12.5px;font-weight:600} .topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:34px;gap:16px} .topbar .usps{display:flex;gap:18px;overflow:hidden} .topbar .usps span{white-space:nowrap} .topbar-links{display:flex;gap:14px;white-space:nowrap} .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:0;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)} .mega-host{align-self:stretch;display:flex;align-items:center;position:static} .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} .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} .ft-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .ft-social .soc{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:inherit;font-size:12px;font-weight:600} .ft-social .soc:hover{background:var(--brand);color:var(--brand-ink)} /* 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} .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;overflow:hidden;min-height:37px; } .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:#fff;border:1.5px solid var(--line);color:var(--fg-2)} .cardbtn-opt:hover{border-color:var(--price);background:#fff;color:var(--price)} /* 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} /* 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)} /* Nút chat nổi */ .vio-chat{ position:fixed;right:16px;bottom:16px;z-index:130; display:flex;align-items:center;gap:8px;height:48px;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:44px;padding:0 14px} .vio-chat span{display:none} .vio-chat{padding:0;width:44px;justify-content:center} } /* Nút lên đầu trang */ .vio-totop{ position:fixed;right:16px;bottom:76px;z-index:125; width:44px;height:44px;border-radius:50%;background:#fff;color:var(--fg); box-shadow:var(--sh-2);font-size:18px;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)} @media (max-width:860px){.vio-totop{bottom:140px;right:12px;width:40px;height:40px}} /* 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} /* ============================================================ 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(--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