/* Reskin toàn diện WooCommerce theo thương hiệu Luviart — thay hoàn toàn CSS mặc định (đã tắt qua functions.php). */ .woocommerce, .woocommerce-page { color: var(--lv-text); font-family: var(--lv-font-body); } .woocommerce a { color: var(--lv-primary); } /* Thông báo */ .woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-noreviews { list-style: none; margin: 0 0 20px; padding: 14px 18px; border: 1px solid var(--lv-border); background: var(--lv-card); font-size: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .woocommerce-error { border-color: var(--lv-brass); } .woocommerce-message a.button, .woocommerce-error a.button { margin-left: auto; } /* Star rating — ẩn theo hướng tối giản của brand */ .star-rating, .woocommerce-product-rating, .comment-form-rating { display: none; } /* Sale badge */ .onsale { font-family: var(--lv-font-mono); font-weight: 500; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; background: var(--lv-brass); color: var(--lv-bg); padding: 4px 10px; border-radius: var(--lv-radius); position: absolute; top: 10px; left: 10px; z-index: 2; } /* Price */ .woocommerce .price { font-family: var(--lv-font-heading); font-weight: 600; color: var(--lv-text); } .woocommerce .price del { opacity: .5; font-weight: 400; margin-right: 8px; } .woocommerce .price ins { text-decoration: none; } /* Quantity input + add to cart */ .woocommerce div.quantity { display: inline-flex; margin-right: 12px; } .woocommerce .quantity .qty { width: 64px; padding: 12px; border: 1px solid var(--lv-border); background: var(--lv-card); color: var(--lv-text); font-family: var(--lv-font-body); font-size: 14px; text-align: center; } .woocommerce div.product form.cart { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 20px 0; } .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { font-family: var(--lv-font-mono); font-weight: 500; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; background: var(--lv-primary); color: var(--lv-bg); border-radius: var(--lv-radius); padding: 14px 24px; border: none; cursor: pointer; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--lv-primary-hover); } .woocommerce a.button.alt { background: var(--lv-brass); } /* Product loop (related/cross-sells/shortcodes) */ .woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; } .woocommerce ul.products li.product { background: var(--lv-card); border: 1px solid var(--lv-border); position: relative; } .woocommerce ul.products li.product img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--lv-font-heading); font-weight: 600; font-size: 16px; padding: 14px 16px 4px; } .woocommerce ul.products li.product .price { padding: 0 16px 16px; display: block; font-size: 14px; } /* Tabs (nếu theme WooCommerce gốc render) */ .woocommerce-tabs ul.tabs { display: flex; gap: 1px; list-style: none; margin: 0 0 -1px; padding: 0; background: var(--lv-border); border: 1px solid var(--lv-border); } .woocommerce-tabs ul.tabs li { background: var(--lv-card); } .woocommerce-tabs ul.tabs li a { display: block; padding: 12px 20px; font-family: var(--lv-font-mono); font-size: 12px; text-transform: uppercase; color: var(--lv-text); } .woocommerce-tabs ul.tabs li.active a { color: var(--lv-primary); } .woocommerce-tabs .panel { border: 1px solid var(--lv-border); padding: 24px; background: var(--lv-card); } /* ---- My Account: login/register hợp nhất ---- */ .woocommerce-account .u-columns { display: flex; flex-wrap: wrap; gap: 1px; background: var(--lv-border); border: 1px solid var(--lv-border); } .woocommerce-account .u-column1, .woocommerce-account .u-column2 { flex: 1 1 300px; background: var(--lv-card); padding: 32px; } .woocommerce-form-login h2, .woocommerce-form-register h2 { font-family: var(--lv-font-heading); font-weight: 600; font-size: 22px; margin: 0 0 20px; } .woocommerce-form-row, .form-row { margin-bottom: 14px; } .woocommerce-form-row label, .form-row label { display: block; font-family: var(--lv-font-mono); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 6px; opacity: .8; } .woocommerce-form-login input.input-text, .woocommerce-form-register input.input-text, .woocommerce-form-row input.input-text { width: 100%; padding: 12px 14px; border: 1px solid var(--lv-border); background: var(--lv-bg); color: var(--lv-text); font-family: var(--lv-font-body); font-size: 14px; } /* Nút "hiện/ẩn mật khẩu" (.show-password-input) — WC tự chèn qua JS (woocommerce.js), không đi qua PHP của theme nên không thể gắn icon bằng inline như .lv-hamburger/.lv-theme-fab. Vì theme tắt hẳn CSS mặc định của WooCommerce, nút này trước đây không có icon/vị trí gì cả — rơi vào đúng lỗi hệ thống "[type=button] không màu riêng bị lộ border hồng #c36 của reset.css" (xem LUVIART-DEV-REFERENCE.md mục 1). Vẽ lại icon mắt bằng mask-image (ăn currentColor) để tự đổi màu đúng token dark/light thay vì hardcode 1 màu fill cố định trong SVG. Bắt buộc ghép thẻ "button" vào trước class (button.show-password-input, không chỉ .show-password-input đứng một mình): độ đặc hiệu 1-class của .show-password-input hoà với [type=button] của reset.css, và reset.css nạp sau nên thắng riêng "color" — xác nhận trực tiếp qua browser (icon lộ đúng hình mắt nhưng vẫn ra màu hồng #c36 cho tới khi ghép thêm "button"). */ .password-input { position: relative; } .password-input input { padding-right: 2.5rem; } button.show-password-input { background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0; position: absolute; top: 50%; right: .7em; transform: translateY(-50%); color: var(--lv-text-secondary); cursor: pointer; } button.show-password-input:hover, button.show-password-input:focus { background: transparent; color: var(--lv-primary); outline: none; } button.show-password-input::before { content: ''; display: block; width: 20px; height: 20px; min-width: 20px; min-height: 20px; background-color: currentColor; -webkit-mask-image: url('data:image/svg+xml,'); mask-image: url('data:image/svg+xml,'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } button.show-password-input.display-password::before { -webkit-mask-image: url('data:image/svg+xml,'); mask-image: url('data:image/svg+xml,'); } .woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; font-family: var(--lv-font-body); text-transform: none; } .woocommerce-LostPassword { margin-top: 14px; font-size: 13px; } /* My Account nav + dashboard content spacing (nav đã style ở base.css). The shell is theme-owned; WooCommerce still renders every endpoint's native content inside it. Bug 0040: từ "đợt 7" (woocommerce/myaccount/navigation.php) nav dọc mặc định (.woocommerce-MyAccount-navigation) đã bị thay bằng thanh tab ngang (.lv-tabs) — nhưng khối @media dưới đây vẫn coi đây là layout sidebar-trái/nội-dung-phải theo class cũ, nay không còn khớp DOM thật nữa. Vì .woocommerce-MyAccount-navigation không còn tồn tại trên trang tài khoản, .lv-tabs rơi về flex mặc định (0 1 auto) và chiếm hết chỗ theo nội dung, đẩy .woocommerce-MyAccount-content co lại còn rất hẹp (đo thật: 211px/1140px). Sửa .lv-account-shell thành cột dọc (tab trên, nội dung dưới) đúng ý đồ thiết kế thật của navigation.php, thay vì hàng ngang. Giữ nguyên 2 rule .woocommerce-MyAccount-navigation cũ — không xoá vì không chắc còn nơi nào khác dùng nav mặc định, chỉ không còn tác dụng ở đây. */ .woocommerce-account .woocommerce-MyAccount-content { padding: 8px 0 40px; } .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 24px; } @media (min-width: 782px) { .woocommerce-account .lv-account-shell { display: flex; flex-direction: column; gap: 32px; align-items: stretch; } .woocommerce-account .lv-account-shell .woocommerce-MyAccount-navigation { flex: 0 0 220px; } .woocommerce-account .lv-account-shell .woocommerce-MyAccount-content { flex: 1; min-width: 0; } } /* ---- Cart ---- */ /* Khối bảng sản phẩm + mã giảm giá (form.woocommerce-cart-form) trước đây không có nền — nổi trực tiếp trên nền lưới CAD của body, đọc khó/trông như "trong suốt" (bug 0018). Bọc khung nền cùng token với #order_review/.cart_totals bên dưới (var(--lv-card) + viền + padding 24px) cho đồng bộ, không đổi bảng/nút/logic bên trong. Chỉ áp dụng trên "body.lv-is-cart-page" (đúng pattern bug 0009) — trang "Thanh toán" riêng (/thanh-toan/) cũng render cùng form này (cùng 2 shortcode) nhưng ẩn hẳn table.shop_table.cart ở dưới (xem rule ":not(.lv-is-cart-page)"), nên nếu không loại trừ, khung nền mới sẽ hiện thành 1 hộp rỗng phía trên form thanh toán thật trên trang đó. */ body.lv-is-cart-page form.woocommerce-cart-form { background: var(--lv-card); border: 1px solid var(--lv-border); padding: 24px; } table.shop_table.cart { width: 100%; border-collapse: collapse; margin-bottom: 24px; } table.shop_table.cart th { text-align: left; font-family: var(--lv-font-mono); font-size: 11px; text-transform: uppercase; padding: 12px; border-bottom: 1px solid var(--lv-border); } table.shop_table.cart td { padding: 16px 12px; border-bottom: 1px solid var(--lv-border); vertical-align: middle; } table.shop_table.cart img { width: 64px; height: 64px; object-fit: cover; } .cart-collaterals { display: flex; justify-content: flex-end; margin-top: 24px; } .cart_totals { background: var(--lv-card); border: 1px solid var(--lv-border); padding: 24px; min-width: 300px; } .cart_totals table { width: 100%; border-collapse: collapse; } .cart_totals table th, .cart_totals table td { padding: 10px 0; border-bottom: 1px solid var(--lv-border); font-size: 14px; } .cart_totals .order-total .amount { font-family: var(--lv-font-heading); font-weight: 600; } .wc-proceed-to-checkout { margin-top: 16px; } .wc-proceed-to-checkout a.checkout-button { display: block; text-align: center; } /* Bug 0020: ẩn khung voucher mặc định + toggle "Bạn có voucher?" + bố trí lại nút "Cập nhật giỏ hàng". Không override template WooCommerce (mục 4 REFERENCE) — .coupon vẫn đúng markup gốc (cart/cart.php), chỉ ẩn/hiện qua class "is-open" do assets/js/cart-voucher-toggle.js thêm/bỏ. Chỉ áp dụng "body.lv-is-cart-page" (đúng pattern bug 0009/0018) — trang Thanh toán render cùng .coupon (trong .cart_totals) nhưng đã bị ẩn hẳn bởi rule ".woocommerce-checkout:not(.lv-is-cart-page) .cart_totals .coupon" ở trên, không đụng gì thêm. QUAN TRỌNG: KHÔNG đặt display:flex trực tiếp lên — đã tái hiện + xác nhận qua iframe test (viewport hẹp 386px): 1 có colspan=6 khi đổi display sang flex bị Chromium co về kích thước fit-content riêng của nó (212px) thay vì width thật theo table layout (606px), làm mọi % width con bên trong (kể cả "width:100%" ép cứng) tính sai theo container đã bị co nhầm — nút "Cập nhật giỏ hàng" ở mobile chỉ rộng ~187px thay vì full-width dù CSS "width:100%" đã khai đúng. Né bằng cách KHÔNG đổi display của td.actions (giữ mặc định table-cell), thay vào đó JS bọc toggle + nút "Cập nhật giỏ hàng" trong 1
(div thường bên trong td thường — không dính quirk vì bản thân td vẫn table-cell) rồi mới display:flex trên DIV đó. */ body.lv-is-cart-page form.woocommerce-cart-form .lv-cart-actions-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; } body.lv-is-cart-page form.woocommerce-cart-form .coupon { display: none; margin-top: 12px; } body.lv-is-cart-page form.woocommerce-cart-form .coupon.is-open { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px; background: var(--lv-bg); border: 1px dashed var(--lv-border); } form.woocommerce-cart-form .coupon input#coupon_code { flex: 1 1 200px; padding: 12px 14px; border: 1px solid var(--lv-border); background: var(--lv-card); color: var(--lv-text); font-family: var(--lv-font-body); font-size: 14px; } button.lv-voucher-toggle { /* min-height 44px = vùng bấm tối thiểu khuyến nghị cho mobile (Owner yêu cầu kiểm riêng vùng bấm voucher toggle) — chữ vẫn nhỏ/gọn (mono 12px) nhưng padding dọc đủ để ngón tay bấm chính xác, không chỉ cao đúng bằng line-height của chữ. */ background-color: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--lv-font-mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--lv-primary); text-decoration: underline; text-underline-offset: 3px; } button.lv-voucher-toggle:hover, button.lv-voucher-toggle:focus { background-color: transparent; color: var(--lv-primary-hover); } button.lv-voucher-toggle .lv-voucher-toggle-mark { width: 6px; height: 6px; min-width: 6px; min-height: 6px; background: var(--lv-brass); display: inline-block; } body.lv-is-cart-page form.woocommerce-cart-form .lv-cart-actions-bar button[name="update_cart"] { flex: 0 0 auto; margin: 0; } @media (max-width: 640px) { body.lv-is-cart-page form.woocommerce-cart-form .lv-cart-actions-bar { flex-direction: column; align-items: stretch; } body.lv-is-cart-page form.woocommerce-cart-form .lv-cart-actions-bar button[name="update_cart"] { width: 100%; } body.lv-is-cart-page form.woocommerce-cart-form .coupon.is-open button[name="apply_coupon"] { width: 100%; } } /* ---- Checkout ---- */ .woocommerce-checkout .col2-set { display: flex; flex-wrap: wrap; gap: 40px; } .woocommerce-checkout .col-1, .woocommerce-checkout .col-2 { flex: 1 1 380px; min-width: 300px; } #order_review, #order_review_heading { background: var(--lv-card); border: 1px solid var(--lv-border); padding: 24px; } .woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; } .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { padding: 10px 0; border-bottom: 1px solid var(--lv-border); font-size: 14px; } .wc_payment_methods { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 1px; background: var(--lv-border); border: 1px solid var(--lv-border); } .wc_payment_methods li { background: var(--lv-card); padding: 12px 16px; } #place_order { width: 100%; margin-top: 12px; } /* Họ + Tên trên cùng 1 dòng ở checkout */ #billing_first_name_field, #billing_last_name_field { display: inline-block; width: 48.5%; vertical-align: top; } #billing_first_name_field { margin-right: 3%; } /* Ẩn hẳn mọi vệt còn sót lại của coupon/cập nhật giỏ hàng nếu lỡ xuất hiện trên checkout. ":not(.lv-is-cart-page)" (bug 0009) — trang giỏ hàng cũng mang class "woocommerce-checkout" (content có cả 2 shortcode [woocommerce_cart]+[woocommerce_checkout], xem functions.php), loại trừ để rule này chỉ ẩn bảng dư thừa TRÊN TRANG THANH TOÁN, không ẩn nhầm bảng giỏ hàng thật (kèm nút xoá .remove) trên chính trang giỏ hàng. */ .woocommerce-checkout:not(.lv-is-cart-page) .woocommerce-form-coupon-toggle, .woocommerce-checkout:not(.lv-is-cart-page) .cart_totals .coupon, .woocommerce-checkout:not(.lv-is-cart-page) table.shop_table.cart { display: none; } /* Trang giỏ hàng thiếu padding-top (bug 0009) — không có wrapper .lv-container/.lv-sheet-tag riêng (dùng chung template-parts/single.php fallback của Hello Elementor), thêm khoảng cách khớp giá trị "padding-top:56px" đã dùng làm chuẩn ở đầu các trang khác (template-contact.php, template-auth.php, template-faq.php, single-lv_project.php). */ body.lv-is-cart-page .page-content { padding-top: 56px; } /* Nút xoá sản phẩm (.remove) trên bảng giỏ hàng — theme không viết CSS riêng nên trước đây kế thừa font/màu mặc định (không phải icon, chỉ ký tự "×" text) — thêm cursor + hover cho rõ là control bấm được, giữ đúng phong cách chữ mono/không icon của theme (như .lv-lesson-sidebar-close). */ a.remove { display: inline-block; font-size: 18px; line-height: 1; cursor: pointer; color: var(--lv-text-secondary); text-decoration: none; } a.remove:hover, a.remove:focus { color: var(--lv-primary); } /* ---- Prose: mô tả sản phẩm / nội dung dài ---- */ .lv-prose { font-size: 16px; line-height: 1.75; } .lv-prose h2, .lv-prose h3 { font-family: var(--lv-font-heading); font-weight: 600; margin: 28px 0 12px; } .lv-prose h2:first-child, .lv-prose h3:first-child { margin-top: 0; } .lv-prose p { margin: 0 0 16px; } .lv-prose ul, .lv-prose ol { margin: 0 0 16px; padding-left: 22px; } .lv-prose li { margin-bottom: 8px; } .lv-prose li::marker { color: var(--lv-primary); } .lv-prose a { text-decoration: underline; } @media (max-width: 640px) { .woocommerce div.product form.cart { flex-direction: column; align-items: stretch; } .cart-collaterals { justify-content: stretch; } .cart_totals { min-width: 0; width: 100%; } } /* ---- Single Product "Blueprint Card" (đợt 6) ---- */ .lv-gallery-track { display: flex; gap: 1px; overflow-x: auto; scroll-snap-type: x mandatory; background: var(--lv-border); height: 460px; } .lv-gallery-track > * { scroll-snap-align: start; flex: 0 0 auto; width: 620px; height: 460px; background: var(--lv-card); position: relative; cursor: zoom-in; } .lv-gallery-track img { width: 100%; height: 100%; object-fit: cover; display: block; } .lv-gallery-track::-webkit-scrollbar { height: 6px; } .lv-gallery-track::-webkit-scrollbar-thumb { background: var(--lv-border); } .lv-gallery-yt { cursor: pointer; } .lv-gallery-yt-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .lv-gallery-yt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 66px; height: 66px; border-radius: 50%; background: var(--lv-bg); box-shadow: 0 4px 18px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; } /* xem ghi chú "Icon SVG nhỏ trong nút flex" ở base.css — svg trong khung flex phải khai width/height/min-width/min-height tường minh, không thì co về 0×0. */ .lv-gallery-yt-play svg { width: 22px; height: 22px; min-width: 22px; min-height: 22px; } .lv-download-title svg { width: 15px; height: 15px; min-width: 15px; min-height: 15px; } .lv-icon-frame svg { width: 26px; height: 26px; min-width: 26px; min-height: 26px; } .lv-gallery-yt-label { position: absolute; bottom: 12px; left: 12px; font-family: var(--lv-font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--lv-text-on-dark); background: var(--lv-overlay-strong); padding: 4px 8px; } .lv-gallery-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; } .lv-gallery-hint { font-family: var(--lv-font-mono); font-size: 10px; opacity: .5; } .lv-gallery-dots { display: flex; gap: 6px; } button.lv-gallery-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lv-border); border: none; padding: 0; cursor: pointer; } button.lv-gallery-dot:hover, button.lv-gallery-dot:focus { background: var(--lv-border); } button.lv-gallery-dot:focus-visible { outline: 2px solid var(--lv-primary); outline-offset: 2px; } button.lv-gallery-dot-active, button.lv-gallery-dot-active:hover, button.lv-gallery-dot-active:focus { background: var(--lv-primary); } .lv-specs-table { margin-top: 20px; border: 1px solid var(--lv-border); } .lv-specs-header { padding: 12px 18px; background: var(--lv-card); border-bottom: 1px solid var(--lv-border); display: flex; align-items: center; gap: 8px; } .lv-specs-header span.lv-eyebrow { font-size: 11px; letter-spacing: 2px; } .lv-specs-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 18px; border-bottom: 1px solid var(--lv-border); font-size: 13px; background: var(--lv-card); } .lv-specs-row:last-child { border-bottom: none; } .lv-specs-label { font-family: var(--lv-font-mono); font-size: 11px; color: var(--lv-text-secondary); text-transform: uppercase; flex-shrink: 0; } .lv-specs-value { font-family: var(--lv-font-body); font-size: 13px; text-align: right; } .lv-specs-full { font-family: var(--lv-font-body); font-size: 13px; } .lv-difficulty-row { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--lv-border); border-bottom: 1px solid var(--lv-border); padding: 12px 0; margin-bottom: 18px; } .lv-difficulty-label { font-family: var(--lv-font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--lv-text-secondary); } .lv-difficulty-bars { display: flex; gap: 4px; } .lv-difficulty-seg { width: 22px; height: 5px; background: var(--lv-border); } .lv-difficulty-seg-filled { background: var(--lv-primary); } .lv-difficulty-name { font-family: var(--lv-font-mono); font-size: 12px; } .lv-download-box .lv-download-title { display: flex; align-items: center; gap: 8px; font-family: var(--lv-font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--lv-primary); margin-bottom: 10px; } .lv-download-box .lv-download-body { font-size: 13px; color: var(--lv-text); opacity: .85; line-height: 1.7; } .lv-download-box .lv-download-body p { margin: 0 0 6px; } .lv-download-box .lv-download-body p:last-child { margin-bottom: 0; } .lv-product-layout { display: flex; gap: 48px; align-items: flex-start; } .lv-product-col-gallery { flex: 1 1 620px; min-width: 0; } .lv-product-col-info { flex: 1 1 380px; min-width: 0; } .lv-product-sticky { position: sticky; top: 24px; } .lv-review-list { display: flex; flex-direction: column; gap: 1px; background: var(--lv-border); border: 1px solid var(--lv-border); } .lv-review-item { background: var(--lv-card); padding: 16px 20px; } .lv-review-meta { font-family: var(--lv-font-mono); font-size: 11px; color: var(--lv-primary); margin-bottom: 6px; } .lv-review-body { font-size: 14px; line-height: 1.6; } /* Bug 0041 mục E — vote/reply/share trên đánh giá sản phẩm (lv_render_product_reviews()). Owner báo lỗi 2026-09-12: khung viền hồng #c36 lộ ra (đúng lỗi hệ thống reset.css "[type=button],button{color:#c36;border...}" + "button:focus,button:hover{background:#CC3366}" đã ghi ở LUVIART-DEV-REFERENCE.md §10/16 — [type=button] có độ đặc hiệu bằng 1 class nên "nạp sau thắng" không đủ, PHẢI dùng biến thể thẻ+class "button.tên-class" và khai đủ background/border/ color ở cả base LẪN :hover/:focus, không chỉ 1 trong 2) + thiết kế lại cho gọn, khớp ngôn ngữ thị giác đã có (chữ mono gạch chân không khung hộp, giống button.lv-voucher-toggle ở trên) thay vì nút viền hộp nặng nề. */ .lv-vote-rail { display: flex; flex-direction: column; align-items: center; gap: 0; flex-shrink: 0; } button.lv-vote-btn { background-color: transparent; border: 0; border-radius: 0; padding: 6px; margin: 0; cursor: pointer; color: var(--lv-text-secondary); font-size: 11px; line-height: 1; } button.lv-vote-btn:hover:not(:disabled), button.lv-vote-btn:focus:not(:disabled) { background-color: transparent; border: 0; color: var(--lv-primary); } button.lv-vote-btn:disabled { background-color: transparent; border: 0; cursor: default; opacity: .3; } button.lv-vote-btn.is-active { color: var(--lv-brass); } .lv-vote-score { font-family: var(--lv-font-mono); font-size: 11px; color: var(--lv-text-secondary); min-width: 14px; text-align: center; } button.lv-review-action-btn { background-color: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; min-height: 32px; font-family: var(--lv-font-mono); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--lv-text-secondary); text-decoration: underline; text-underline-offset: 3px; } button.lv-review-action-btn:hover, button.lv-review-action-btn:focus { background-color: transparent; border: 0; color: var(--lv-primary); } /* Bug 0041 follow-up — cây phản hồi thật kiểu Reddit (lv_render_review_reply_node()): vote riêng từng comment (rail nhỏ hơn top-level), lùi lề tự nhiên theo tầng DOM (mỗi .lv-reply-node lồng nhau tự thêm 1 lớp viền+padding, không cần tính margin theo độ sâu), nút ẩn/hiện nhánh. */ .lv-reply-node { margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--lv-border); } .lv-vote-rail-sm button.lv-vote-btn { font-size: 9px; padding: 3px; } .lv-vote-rail-sm .lv-vote-score { font-size: 10px; } /* Owner chốt 2026-09-12 — cả hàng tác giả/ngày là 1 nút bấm được (không chỉ 1 icon nhỏ), vùng bấm rộng hơn hẳn so với bản trước (14×14px), khớp khuyến nghị vùng bấm đã áp dụng ở nơi khác trong theme (button.lv-voucher-toggle). Icon "−"/"+" chỉ là dấu hiệu thị giác bên trong. */ button.lv-collapse-header { background-color: transparent; border: 0; border-radius: 0; padding: 4px 0; margin: 0; cursor: pointer; display: flex; align-items: center; gap: 6px; min-height: 28px; text-align: left; width: 100%; } button.lv-collapse-header:hover, button.lv-collapse-header:focus { background-color: transparent; border: 0; } button.lv-collapse-header:hover .lv-review-meta, button.lv-collapse-header:focus .lv-review-meta { color: var(--lv-primary); } .lv-collapse-mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 14px; height: 14px; border: 1px solid var(--lv-border); border-radius: 2px; font-size: 11px; line-height: 1; color: var(--lv-text-secondary); } button.lv-collapse-header:hover .lv-collapse-mark, button.lv-collapse-header:focus .lv-collapse-mark { border-color: var(--lv-primary); color: var(--lv-primary); } .lv-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--lv-border); border: 1px solid var(--lv-border); } .lv-related-card { background: var(--lv-card); color: var(--lv-text); display: block; } .lv-related-card img { width: 100%; height: 200px; object-fit: cover; display: block; } .lv-related-card .lv-related-body { padding: 18px 20px; border-top: 1px solid var(--lv-border); } .lv-related-card .lv-related-sku { font-family: var(--lv-font-mono); font-size: 10px; opacity: .6; margin-bottom: 6px; } .lv-related-card .lv-related-name { font-family: var(--lv-font-heading); font-weight: 600; font-size: 17px; margin-bottom: 10px; } .lv-related-card .lv-related-foot { display: flex; justify-content: space-between; align-items: center; } .lv-related-card .lv-related-price { font-family: var(--lv-font-mono); font-size: 14px; } .lv-related-card .lv-related-view { font-family: var(--lv-font-mono); font-size: 10px; text-transform: uppercase; color: var(--lv-primary); } @media (max-width: 900px) { .lv-product-layout { flex-direction: column; } .lv-product-sticky { position: static; } .lv-gallery-track, .lv-gallery-track > * { height: 380px; } .lv-related-grid { grid-template-columns: repeat(2, 1fr); } /* Bug 0010: ".lv-product-layout" đổi "flex-direction:column" ở breakpoint này — theo chiều cột, trục cross (chiều ngang) mặc định "align-items:stretch" không tự chặn item co giãn theo max-content của CON BÊN TRONG "min-width:0" đã có trên ".lv-product-col-gallery" (dùng chống tràn cho trục CHÍNH khi layout là hàng ngang ở desktop) không đủ khi trục đã đổi thành cột — ".lv-gallery-track" (flex, overflow-x:auto, không có width tường minh) tự giãn theo tổng chiều rộng 6 ảnh con (~2650px) thay vì bị kẹp theo khung cha, kéo tràn cả trang ngang (document.documentElement.scrollWidth > clientWidth) — đã xác nhận tràn ngay từ ảnh ĐẦU TIÊN, không chỉ sau khi auto-slide chuyển ảnh. Khai tường minh width 100% + min-width 0 để ép container tự co theo khung cha, overflow-x:auto khi đó mới đúng vai trò cuộn NỘI BỘ. */ .lv-product-col-gallery { width: 100%; } .lv-gallery-track { width: 100%; max-width: 100%; min-width: 0; } /* Bug 0025: ".lv-product-col-info" bị đúng lỗi "align-items:flex-start" y hệt bug 0010 ở trên nhưng chưa được vá — cột chỉ co theo max-content của con bên trong (thẻ "TIẾN ĐỘ HỌC"/"ĐANG CẬP NHẬT" ngắn hơn cột gallery nhiều) thay vì full-width theo khung cha, đo thật xác nhận 283px thay vì 343px đúng (khớp gallery) ở viewport 390px. Vá cùng cách đã dùng cho ".lv-product-col-gallery". */ .lv-product-col-info { width: 100%; } } @media (max-width: 640px) { .lv-gallery-track, .lv-gallery-track > * { height: 320px; } .lv-gallery-track > * { width: 88vw; } .lv-related-grid { grid-template-columns: 1fr; } } /* Ô tải ảnh trong form đánh giá sản phẩm (mục 17.1) — Owner chốt 2026-09-12: ẩn mặc định sau nút "+ Thêm ảnh" (data-lv-review-upload-toggle), chỉ hiện panel khi bấm. */ .lv-review-upload { margin: 12px 0 20px; } .lv-review-upload-panel { margin-top: 10px; } .lv-review-dropzone { position: relative; border: 1px dashed var(--lv-border); background: var(--lv-bg); padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; cursor: pointer; transition: border-color .15s; } .lv-review-dropzone:hover, .lv-review-dropzone:focus-visible, .lv-review-dropzone.is-dragover { border-color: var(--lv-primary); outline: none; } /* Bug 0041 follow-up — textarea trả lời (Owner báo font mặc định lộ ra: