/* style.css */
/**
* Theme Name: Lym Child
* Theme URI: https://lym.vn
* Description: Child theme WoodMart cho Lym - TMĐT Thực phẩm bảo vệ sức khỏe & Chăm sóc sắc đẹp (chuẩn Chiaki.vn)
* Author: Lym Team
* Author URI: https://lym.vn
* Template: woodmart
* Version: 2.0.0
* Text Domain: lym-global-child
*/
/* ==========================================================================
1. SELF-HOSTED FONT: BE VIETNAM PRO (WOFF2, FONT-DISPLAY: SWAP)
========================================================================== */
@font-face {
font-family: 'Be Vietnam Pro';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/wp-content/themes/lym-global-child/assets/fonts/be-vietnam-pro-400-vietnamese.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Be Vietnam Pro';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/wp-content/themes/lym-global-child/assets/fonts/be-vietnam-pro-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Be Vietnam Pro';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/wp-content/themes/lym-global-child/assets/fonts/be-vietnam-pro-500-vietnamese.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Be Vietnam Pro';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/wp-content/themes/lym-global-child/assets/fonts/be-vietnam-pro-500-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Be Vietnam Pro';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/wp-content/themes/lym-global-child/assets/fonts/be-vietnam-pro-600-vietnamese.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Be Vietnam Pro';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/wp-content/themes/lym-global-child/assets/fonts/be-vietnam-pro-600-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Be Vietnam Pro';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/wp-content/themes/lym-global-child/assets/fonts/be-vietnam-pro-700-vietnamese.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Be Vietnam Pro';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/wp-content/themes/lym-global-child/assets/fonts/be-vietnam-pro-700-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
2. DESIGN TOKENS (:root — Item 21 & docs/03 Mục 2) & WOODMART VARIABLE MAPPING
========================================================================== */
:root {
/* 2.1 Color Tokens (Exact b47ec23 Brand Palette — Inbox Line 12) */
--lym-color-primary: #0f5132;
--lym-color-primary-hover: #0a3622;
--lym-color-primary-soft: #e8f5ee;
--lym-color-accent: #d97706;
--lym-color-accent-hover: #b45309;
--lym-color-accent-soft: #fef3c7;
--lym-color-danger: #dc2626;
--lym-color-danger-dark: #dc2626;
--lym-color-success: #16a34a;
--lym-color-warning: #f59e0b;
--lym-color-info: #0284c7;
--lym-color-text: #111827;
--lym-color-text-secondary: #4b5563;
--lym-color-text-muted: #9ca3af;
--lym-color-border: #e5e7eb;
--lym-color-border-subtle: #e5e7eb;
--lym-color-surface: #ffffff;
--lym-color-surface-subtle: #f8fafc;
--lym-color-surface-muted: #f1f5f9;
--lym-color-bg-page: #f5f7f9;
/* Legacy aliases mapped to canonical tokens */
--lym-primary: var(--lym-color-primary);
--lym-primary-light: #198754;
--lym-primary-soft: var(--lym-color-primary-soft);
--lym-accent: var(--lym-color-accent);
--lym-accent-hover: var(--lym-color-accent-hover);
--lym-accent-soft: var(--lym-color-accent-soft);
--lym-danger: var(--lym-color-danger);
--lym-success: var(--lym-color-success);
--lym-warning: var(--lym-color-warning);
--lym-info: var(--lym-color-info);
--lym-bg-page: var(--lym-color-bg-page);
--lym-bg-surface: var(--lym-color-surface);
--lym-bg-muted: var(--lym-color-surface-muted);
--lym-border: var(--lym-color-border-subtle);
--lym-text-main: var(--lym-color-text);
--lym-text-secondary: var(--lym-color-text-secondary);
--lym-text-muted: var(--lym-color-text-muted);
/* 2.2 Typography Scale (8 levels max — Item 21a) */
--lym-font-sans: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--lym-fs-xs: 12px;
--lym-fs-sm: 13px;
--lym-fs-md-sm: 14px;
--lym-fs-base: 15px;
--lym-fs-md: 18px;
--lym-fs-lg: 20px;
--lym-fs-xl: 24px;
--lym-fs-2xl: 28px;
--lym-lh-tight: 1.3;
--lym-lh-snug: 1.4;
--lym-lh-normal: 1.55;
--lym-lh-relaxed: 1.65;
/* 2.3 8px Grid Spacing Tokens */
--lym-space-1: 4px;
--lym-space-2: 8px;
--lym-space-3: 12px;
--lym-space-4: 16px;
--lym-space-5: 20px;
--lym-space-6: 24px;
--lym-space-8: 32px;
--lym-space-10: 40px;
--lym-space-12: 48px;
/* 2.4 Radius, Shadow & Control Tokens */
--lym-radius-sm: 8px;
--lym-radius-md: 12px;
--lym-radius-lg: 16px;
--lym-radius-pill: 999px;
--lym-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
--lym-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
--lym-shadow-card: var(--lym-shadow-sm);
--lym-shadow-hover: var(--lym-shadow-md);
--lym-control-height: 44px;
--lym-control-height-lg: 48px;
--lym-control-radius: 8px;
--lym-control-padding-x: 14px;
--lym-control-border: 1px solid var(--lym-color-border);
--lym-focus-ring: 0 0 0 3px rgba(15, 81, 50, 0.18);
/* Map directly to WoodMart 8.x CSS Variables */
--wd-primary-color: var(--lym-color-primary);
--wd-alternative-color: var(--lym-color-accent);
--wd-link-color: var(--lym-color-primary);
--wd-link-color-hover: #198754;
--wd-text-font: var(--lym-font-sans);
--wd-title-font: var(--lym-font-sans);
--wd-entities-title-font: var(--lym-font-sans);
--wd-header-el-font: var(--lym-font-sans);
--wd-widget-title-font: var(--lym-font-sans);
--wd-text-color: var(--lym-color-text);
--wd-title-color: var(--lym-color-text);
--wd-entities-title-color: var(--lym-color-text);
--wd-entities-title-color-hover: var(--lym-color-primary);
--wd-brd-radius: 8px;
--btn-accented-bgcolor: var(--lym-color-accent);
--btn-accented-bgcolor-hover: var(--lym-color-accent-hover);
--btn-accented-color: #ffffff;
--btn-accented-color-hover: #ffffff;
}
@media (max-width: 767px) {
:root {
--lym-fs-md: 16px;
--lym-fs-lg: 18px;
--lym-fs-xl: 20px;
--lym-fs-2xl: 20px;
}
}
body {
font-family: var(--lym-font-sans);
color: var(--lym-text-main);
background-color: var(--lym-bg-page);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.container,
.wd-container {
max-width: 1280px;
}
/* ==========================================================================
3. WOODMART HEADER BUILDER & NAVIGATION (CHIAKI.VN STYLE)
========================================================================== */
.whb-top-bar {
background-color: var(--lym-primary) !important;
color: #ffffff;
font-size: 13px;
}
.whb-top-bar a,
.whb-top-bar .wd-nav > li > a {
color: rgba(255, 255, 255, 0.92) !important;
font-size: 13px;
font-weight: 500;
}
.whb-top-bar a:hover,
.whb-top-bar .wd-nav > li > a:hover {
color: #fde68a !important;
}
.lym-topbar-hotline {
display: inline-flex;
align-items: center;
gap: 8px;
color: #ffffff;
font-size: 13px;
}
.lym-topbar-hotline strong {
color: #fbbf24;
font-weight: 700;
}
.whb-general-header {
background-color: #ffffff !important;
border-bottom: 1px solid var(--lym-border);
}
.whb-sticked .whb-general-header {
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}
/* Header Search Bar + Popular Keywords */
.whb-general-header .wd-search-form {
flex: 1;
max-width: 600px;
}
.whb-general-header .searchform input[type="text"] {
height: 42px;
border: 2px solid var(--lym-primary) !important;
border-radius: 8px !important;
padding-left: 16px;
padding-right: 52px;
font-size: 14px;
background-color: #ffffff;
}
.whb-general-header .searchform .searchsubmit {
background-color: var(--lym-primary) !important;
color: #ffffff !important;
border-radius: 0 6px 6px 0 !important;
width: 48px;
top: 2px;
right: 2px;
bottom: 2px;
}
.whb-general-header .searchform .searchsubmit:hover {
background-color: var(--lym-primary-light) !important;
}
.lym-header-hot-keywords {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 5px;
font-size: 12px;
line-height: 1.3;
}
.lym-header-hot-keywords span {
color: var(--lym-text-muted);
font-weight: 500;
}
.lym-header-hot-keywords a {
color: var(--lym-text-secondary);
text-decoration: none;
transition: color 0.15s ease;
}
.lym-header-hot-keywords a:hover {
color: var(--lym-primary);
text-decoration: underline;
}
/* Header Bottom Navigation Bar */
.whb-header-bottom {
background-color: var(--lym-primary) !important;
border-bottom: none !important;
}
.whb-header-bottom .wd-header-cats .menu-opener {
background-color: #0a3c24 !important;
color: #ffffff !important;
font-weight: 700;
font-size: 14px;
height: 44px;
padding: 0 18px;
border-radius: 6px 6px 0 0;
}
.whb-header-bottom .wd-header-main-nav .wd-nav > li > a {
color: #ffffff !important;
font-weight: 600;
font-size: 14px;
height: 44px;
padding: 0 14px;
}
.whb-header-bottom .wd-header-main-nav .wd-nav > li > a:hover,
.whb-header-bottom .wd-header-main-nav .wd-nav > li.current-menu-item > a {
color: #fde68a !important;
}
/* Vertical Categories Dropdown Menu */
.wd-header-cats .wd-dropdown-cats {
border: 1px solid var(--lym-border);
border-radius: 0 0 8px 8px;
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
min-width: 260px;
}
.wd-header-cats .wd-nav-vertical > li > a {
padding: 10px 16px;
font-size: 14px;
font-weight: 500;
color: var(--lym-text-main);
border-bottom: 1px solid #f1f5f9;
}
.wd-header-cats .wd-nav-vertical > li > a:hover {
background-color: var(--lym-primary-soft);
color: var(--lym-primary);
}
/* ==========================================================================
4. PRODUCT CARD (UNIFIED COMPONENT — Item 27, Item 28e & docs/03 Mục 3.5)
========================================================================== */
.products.wd-products,
.wd-products,
.wd-products[class*="wd-stretch-cont"] {
align-items: stretch !important;
}
.wd-product,
.wd-loop-builder-off .wd-product {
--text-align: start !important;
--wd-prod-bg-sp: 14px !important;
--wd-prod-bg-cont-sp: 0px !important;
--wd-prod-gap: 0px !important;
--wd-btn-inset: 8px !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
text-align: left !important;
}
.wd-product .wd-product-wrapper,
.wd-product .product-wrapper,
.wd-loop-builder-off .wd-product .wd-product-wrapper {
background: var(--lym-color-surface) !important;
border: 1px solid var(--lym-color-border-subtle) !important;
border-radius: var(--lym-radius-md) !important;
padding: 14px !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 0 !important;
box-sizing: border-box !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
transform: none !important;
position: relative;
}
.wd-product .product-wrapper:hover,
.wd-product .wd-product-wrapper:hover {
transform: none !important;
box-shadow: var(--lym-shadow-md) !important;
border-color: var(--lym-color-primary) !important;
}
/* 1. Square 1:1 Image, object-fit: contain, white background + 8px padding (X-026 & Item 27) */
.wd-product .product-element-top,
.wd-product .wd-product-thumb {
position: relative !important;
width: 100% !important;
aspect-ratio: 1 / 1 !important;
border-radius: var(--lym-radius-sm) !important;
overflow: hidden !important;
background-color: #ffffff !important;
margin: 0 0 8px 0 !important;
padding: 0 !important;
flex-shrink: 0 !important;
}
.wd-product .product-element-top .product-image-link,
.wd-product .product-element-top .wd-product-img-link,
.wd-product .product-element-top .wd-product-img-hover {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
aspect-ratio: 1 / 1 !important;
background-color: #ffffff !important;
transform: none !important;
}
.wd-product .product-element-top img,
.wd-product .attachment-woocommerce_thumbnail {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
aspect-ratio: 1 / 1 !important;
object-fit: contain !important;
object-position: center center !important;
background-color: #ffffff !important;
padding: 8px !important;
box-sizing: border-box !important;
display: block !important;
transform: none !important;
transition: opacity 0.15s ease !important;
}
.wd-product .product-element-bottom,
.wd-loop-builder-off .wd-product .product-element-bottom {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
justify-content: flex-start !important;
align-items: stretch !important;
text-align: left !important;
padding: 0 !important;
margin: 0 !important;
gap: 0 !important;
min-width: 0 !important;
}
/* Hide redundant WoodMart loop elements that break vertical row alignment */
.wd-product .wd-swatches-grid,
.wd-product .wd-product-cats,
.wd-product .wd-product-brands-links,
.wd-product .wd-product-sku,
.wd-product .wd-product-stock,
.wd-product .product-element-bottom > .wd-star-rating,
.wd-product .product-element-bottom > .star-rating {
display: none !important;
}
/* Prevent WooCommerce/WoodMart star-rating span text-indent from causing horizontal page overflow */
.star-rating {
overflow: hidden !important;
position: relative;
}
/* Badges: max 2, top-left 8px inset, 13px bold (Item 27b) */
.wd-product .product-labels {
position: absolute !important;
top: 8px !important;
left: 8px !important;
right: auto !important;
z-index: 3 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 4px !important;
max-width: calc(100% - 48px) !important;
pointer-events: none;
}
.wd-product .product-labels .product-label:nth-child(n+3) {
display: none !important;
}
.wd-product .product-labels .product-label {
font-size: 13px !important;
font-weight: 700 !important;
padding: 2px 8px !important;
border-radius: 6px !important;
line-height: 1.3 !important;
min-height: 0 !important;
min-width: 0 !important;
letter-spacing: 0.01em;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}
.product-labels .onsale.product-label {
background-color: var(--lym-color-danger-dark) !important;
color: #ffffff !important;
}
.product-labels .new.product-label {
background-color: var(--lym-color-primary) !important;
color: #ffffff !important;
}
.product-labels .featured.product-label {
background-color: var(--lym-color-accent) !important;
color: #ffffff !important;
}
/* 2. Product Card Brand & Origin Row (1 line, fixed 20px slot) */
.wd-product .lym-loop-meta-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
gap: 4px !important;
height: 20px !important;
min-height: 20px !important;
max-height: 20px !important;
margin: 0 0 4px 0 !important;
padding: 0 !important;
font-size: 12px !important;
line-height: 20px !important;
overflow: hidden !important;
min-width: 0 !important;
}
.wd-product .lym-loop-brand {
color: var(--lym-color-primary) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.02em;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
flex: 0 1 auto !important;
min-width: 0 !important;
max-width: 65% !important;
text-decoration: none !important;
}
.wd-product .lym-loop-brand.is-empty {
visibility: hidden !important;
width: 0 !important;
flex: 0 0 0px !important;
}
.wd-product .lym-loop-brand:hover {
color: var(--lym-primary-light) !important;
text-decoration: underline !important;
}
.wd-product .lym-loop-origin {
background-color: var(--lym-color-surface-muted) !important;
color: var(--lym-color-text-secondary) !important;
font-size: 12px !important;
font-weight: 500 !important;
padding: 0 6px !important;
height: 18px !important;
line-height: 18px !important;
border-radius: 4px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
flex: 0 0 auto !important;
max-width: 50% !important;
margin-left: auto !important;
}
/* 3. Product Title: strictly 2 lines, fixed 40px height on desktop/tablet */
.wd-product .wd-entities-title,
.wd-loop-builder-off .wd-product .wd-entities-title {
font-size: 14px !important;
font-weight: 500 !important;
line-height: 20px !important;
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
margin: 0 0 4px 0 !important;
padding: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
word-break: break-word;
text-align: left !important;
}
.wd-product .wd-entities-title a {
color: var(--lym-color-text) !important;
text-decoration: none !important;
display: inline !important;
}
.wd-product .wd-entities-title a:hover {
color: var(--lym-color-primary) !important;
}
/* 4. Rating Row: fixed 20px height, hidden when 0 reviews while keeping slot */
.wd-product .lym-loop-rating-row {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 4px !important;
height: 20px !important;
min-height: 20px !important;
max-height: 20px !important;
margin: 0 0 4px 0 !important;
padding: 0 !important;
font-size: 12px !important;
line-height: 20px !important;
overflow: hidden !important;
}
.wd-product .lym-loop-rating-row.is-empty {
visibility: hidden !important;
}
.wd-product .lym-loop-stars {
position: relative;
display: inline-block;
font-size: 12px;
line-height: 1;
letter-spacing: 0.5px;
color: #d1d5db;
}
.wd-product .lym-loop-stars__fill {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
white-space: nowrap;
color: #f59e0b;
}
.wd-product .lym-loop-rating-num {
font-size: 12px;
font-weight: 600;
color: var(--lym-color-text);
}
.wd-product .lym-loop-rating-count {
font-size: 12px;
color: var(--lym-color-text-secondary);
}
/* 5. Packaging chip & Sold count: strictly 1 line, fixed 22px height */
.wd-product .lym-loop-submeta {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
gap: 6px !important;
height: 22px !important;
min-height: 22px !important;
max-height: 22px !important;
margin: 0 0 6px 0 !important;
padding: 0 !important;
max-width: 100% !important;
min-width: 0 !important;
overflow: hidden !important;
}
.wd-product .lym-loop-packaging {
font-size: 12px !important;
line-height: 20px !important;
height: 22px !important;
color: var(--lym-color-text-secondary) !important;
background: var(--lym-color-surface-subtle) !important;
border: 1px solid var(--lym-color-border-subtle) !important;
border-radius: 4px !important;
padding: 0 6px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
flex: 0 1 auto !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.wd-product .lym-loop-packaging.is-empty {
visibility: hidden !important;
border: none !important;
background: transparent !important;
padding: 0 !important;
width: 0 !important;
flex: 0 0 0px !important;
}
.wd-product .lym-loop-sold {
font-size: 12px !important;
line-height: 22px !important;
color: var(--lym-color-text-secondary) !important;
white-space: nowrap !important;
flex: 0 0 auto !important;
margin-left: auto !important;
}
/* 6. Product Price in Card: fixed 38px slot so strikethrough price never truncates (Item 27b & 28e / X-041) */
.wd-product .price,
.wd-loop-builder-off .wd-product .price {
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
color: var(--lym-color-danger) !important;
margin: 0 0 8px 0 !important;
padding: 0 !important;
display: flex !important;
align-items: baseline !important;
align-content: center !important;
justify-content: flex-start !important;
flex-wrap: wrap !important;
column-gap: 6px !important;
row-gap: 2px !important;
overflow: visible !important;
min-width: 0 !important;
}
.wd-product .price del {
font-size: 12px !important;
font-weight: 400 !important;
color: var(--lym-color-text-muted) !important;
order: 2 !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
flex: 0 0 auto !important;
}
.wd-product .price ins {
text-decoration: none !important;
color: var(--lym-color-danger) !important;
font-weight: 700 !important;
order: 1 !important;
white-space: nowrap !important;
flex: 0 0 auto !important;
}
/* 7. Add to Cart button at bottom of Product Card: height 44px, sentence-case, vertically centered (Item 27c) */
.wd-product .wd-add-btn,
.wd-product.wd-hover-standard .wd-add-btn {
margin: auto 0 0 0 !important;
padding: 0 !important;
width: 100% !important;
display: flex !important;
}
.wd-product .wd-add-btn > a,
.wd-product.wd-hover-standard .wd-add-btn > a,
.wd-product .wd-add-btn > a.button,
.wd-product .add_to_cart_button,
.wd-product .product_type_variable {
width: 100% !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
background-color: var(--lym-color-primary-soft) !important;
color: var(--lym-color-primary) !important;
border: 1px solid rgba(15, 81, 50, 0.28) !important;
border-radius: var(--lym-control-radius) !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1 !important;
text-transform: none !important;
letter-spacing: 0 !important;
padding: 0 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
transform: none !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
.wd-product .wd-add-btn-replace > a > span,
.wd-product .wd-add-btn > a > span,
.wd-product .wd-add-btn .wd-action-text {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 0 !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
font-size: 14px !important;
line-height: 1 !important;
text-transform: none !important;
transform: none !important;
position: static !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.wd-product .wd-add-btn-replace > a::before,
.wd-product .wd-add-btn-replace > a::after,
.wd-product .wd-add-btn > a .wd-action-icon {
display: none !important;
content: none !important;
}
.wd-product .wd-add-btn > a:hover,
.wd-product.wd-hover-standard .wd-add-btn > a:hover,
.wd-product .wd-add-btn > a.button:hover,
.wd-product .add_to_cart_button:hover,
.wd-product .product_type_variable:hover {
background-color: var(--lym-color-primary) !important;
color: #ffffff !important;
border-color: var(--lym-color-primary) !important;
transform: none !important;
}
/* ==========================================================================
5. HOMEPAGE SECTIONS (13 DYNAMIC BLOCKS - docs/03 Mục 4.1)
========================================================================== */
.lym-home-wrap {
display: flex;
flex-direction: column;
gap: var(--lym-space-6);
padding-top: 12px;
padding-bottom: 32px;
}
.lym-section-card {
background: var(--lym-color-surface) !important;
border: 1px solid var(--lym-color-border-subtle) !important;
border-radius: var(--lym-radius-lg) !important;
padding: var(--lym-space-6) !important;
box-shadow: var(--lym-shadow-sm) !important;
}
.lym-section-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--lym-color-border-subtle);
}
.lym-section-title {
font-size: var(--lym-fs-lg) !important;
font-weight: 700 !important;
line-height: var(--lym-lh-tight) !important;
color: var(--lym-color-text) !important;
text-transform: none !important;
margin: 0;
display: inline-flex;
align-items: center;
gap: 8px;
}
.lym-section-title::before {
content: "";
display: inline-block;
width: 4px;
height: 20px;
background: var(--lym-color-primary);
border-radius: 4px;
}
.lym-section-more {
font-size: 14px;
font-weight: 600;
color: var(--lym-color-primary);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
.lym-section-more:hover {
color: var(--lym-color-accent);
}
/* 5.1 Hero Section (2/3 Left Slider + 1/3 Right 2 Stacked Banners) */
.lym-hero-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 16px;
}
.lym-hero-main {
position: relative;
border-radius: var(--lym-radius-lg);
overflow: hidden;
height: 330px;
min-height: 330px;
background: linear-gradient(135deg, #0f5132 0%, #146c43 55%, #198754 100%);
color: #ffffff;
display: flex;
align-items: center;
}
.lym-hero-main.has-expanded-desc {
height: auto;
min-height: 330px;
}
.lym-hero-slides {
width: 100%;
height: 100%;
position: relative;
}
.lym-hero-slide {
display: none;
padding: 32px 40px 54px;
height: 330px;
min-height: 330px;
box-sizing: border-box;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.lym-hero-slide.is-desc-expanded {
height: auto;
min-height: 330px;
}
.lym-hero-slide.is-measuring-slide {
display: flex !important;
position: absolute !important;
inset: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.lym-hero-slide.is-active {
display: flex;
}
.lym-hero-slide--2 {
background: linear-gradient(135deg, #1e3a5f 0%, #0f5132 60%, #15803d 100%);
}
.lym-hero-slide--3 {
background: linear-gradient(135deg, #78350f 0%, #b45309 55%, #d97706 100%);
}
.lym-hero-content {
max-width: 62%;
z-index: 2;
}
.lym-hero-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(4px);
color: #fef3c7;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: 0.02em !important;
padding: 5px 12px;
border-radius: 99px;
margin-bottom: 12px;
}
.lym-hero-title,
h1.lym-hero-title,
h2.lym-hero-title,
.entry-content h1.lym-hero-title,
.entry-content h2.lym-hero-title {
font-size: 28px !important;
font-weight: 800 !important;
color: #ffffff !important;
line-height: 1.25 !important;
margin: 0 0 10px !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.lym-hero-desc,
p.lym-hero-desc,
.entry-content p.lym-hero-desc {
font-size: 14px !important;
line-height: 1.5 !important;
color: rgba(255, 255, 255, 0.92) !important;
margin: 0 0 18px !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.lym-hero-slide.is-desc-expanded .lym-hero-desc,
.lym-hero-slide.is-desc-expanded p.lym-hero-desc,
.entry-content .lym-hero-slide.is-desc-expanded p.lym-hero-desc,
.lym-hero-desc.is-measuring-text,
p.lym-hero-desc.is-measuring-text {
display: block !important;
-webkit-line-clamp: unset !important;
max-height: none !important;
overflow: visible !important;
}
button.lym-hero-desc-toggle,
.lym-hero-desc-toggle {
display: inline !important;
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 2px !important;
margin: 0 !important;
min-height: 0 !important;
min-width: 0 !important;
height: auto !important;
width: auto !important;
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: 600 !important;
line-height: inherit !important;
text-decoration: underline !important;
text-transform: none !important;
cursor: pointer !important;
vertical-align: baseline !important;
}
button.lym-hero-desc-toggle[hidden],
.lym-hero-desc-toggle[hidden] {
display: none !important;
}
.lym-hero-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: var(--lym-control-height);
background: var(--lym-color-accent);
color: #ffffff !important;
font-weight: 700;
font-size: 14px;
padding: 0 22px;
border-radius: var(--lym-control-radius);
text-decoration: none;
transition: background-color 0.15s ease;
}
.lym-hero-btn:hover {
background: var(--lym-color-accent-hover);
color: #ffffff !important;
}
.lym-hero-visual {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
/* Consolidated Hero Slider Dots (Item 29 / X-047: 44x44 transparent hit area, 8x8 dot / 24x8 white active pill) */
.lym-hero-dots {
position: absolute;
bottom: 10px;
left: 32px;
display: flex;
align-items: center;
gap: 0;
z-index: 5;
}
button.lym-hero-dot,
.lym-hero-dot,
button.lym-hero-dot.is-active,
.lym-hero-dot.is-active {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
max-width: 44px !important;
max-height: 44px !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
cursor: pointer !important;
}
.lym-hero-dot::before {
content: "" !important;
display: block !important;
width: 8px !important;
height: 8px !important;
border-radius: 999px !important;
background-color: rgba(255, 255, 255, 0.5) !important;
transition: width 0.2s ease, background-color 0.2s ease !important;
}
.lym-hero-dot.is-active::before {
width: 24px !important;
height: 8px !important;
border-radius: 999px !important;
background-color: #f59e0b !important;
}
.lym-hero-side {
display: flex;
flex-direction: column;
gap: 16px;
}
.lym-sub-banner {
flex: 1;
border-radius: var(--lym-radius-lg);
padding: 20px 22px;
color: #ffffff;
text-decoration: none;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.lym-sub-banner:hover {
color: #ffffff;
box-shadow: var(--lym-shadow-md);
}
.lym-sub-banner--top {
background: linear-gradient(135deg, #b45309 0%, #d97706 60%, #f59e0b 100%);
}
.lym-sub-banner--bottom {
background: linear-gradient(135deg, #065f46 0%, #047857 60%, #10b981 100%);
}
.lym-sub-banner__tag {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: 0.02em !important;
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
padding: 3px 9px;
border-radius: 99px;
align-self: flex-start;
margin-bottom: 8px;
}
.lym-sub-banner__title,
h3.lym-sub-banner__title,
.entry-content h3.lym-sub-banner__title {
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #ffffff !important;
margin: 0 0 4px !important;
}
.lym-sub-banner__text,
p.lym-sub-banner__text,
.entry-content p.lym-sub-banner__text {
font-size: 13px !important;
line-height: 1.45 !important;
color: rgba(255, 255, 255, 0.94) !important;
margin: 0 !important;
}
/* 5.2 Value Proposition / Commitments Strip (4 items) */
.lym-commitments-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
background: var(--lym-color-surface);
border: 1px solid var(--lym-color-border-subtle);
border-radius: var(--lym-radius-lg);
padding: 16px 20px;
box-shadow: var(--lym-shadow-sm);
}
.lym-commitment-item {
display: flex;
align-items: center;
gap: 12px;
}
.lym-commitment-icon {
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--lym-color-primary-soft);
color: var(--lym-color-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.lym-commitment-title,
h3.lym-commitment-title,
.entry-content h3.lym-commitment-title {
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: var(--lym-color-text) !important;
margin: 0 0 2px !important;
}
.lym-commitment-desc,
p.lym-commitment-desc,
.entry-content p.lym-commitment-desc {
font-size: 12px !important;
line-height: 1.4 !important;
color: var(--lym-color-text-secondary) !important;
margin: 0 !important;
}
/* 5.3 Category Icon Grid */
.lym-cat-icon-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
.lym-cat-icon-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 12px 8px;
border-radius: var(--lym-radius-md);
border: 1px solid transparent;
background: var(--lym-color-surface-subtle);
text-decoration: none;
color: var(--lym-color-text);
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lym-cat-icon-card:hover {
background: var(--lym-color-primary-soft);
border-color: rgba(15, 81, 50, 0.25);
color: var(--lym-color-primary);
}
.lym-cat-icon-circle {
width: 56px !important;
height: 56px !important;
border-radius: 16px !important;
background: #ffffff;
border: 1px solid var(--lym-color-border-subtle);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(15, 23, 42, 0.05);
}
.lym-cat-icon-circle img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.lym-cat-icon-name {
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.lym-cat-icon-count {
font-size: 12px !important;
color: var(--lym-color-text-muted);
margin-top: 2px;
}
/* 5.4 Flash Sale Block + Countdown */
.lym-flash-sale-box {
background: linear-gradient(180deg, #fff7ed 0%, #ffffff 35%) !important;
border: 2px solid #fdba74 !important;
border-radius: var(--lym-radius-lg) !important;
padding: var(--lym-space-6) !important;
box-shadow: var(--lym-shadow-sm) !important;
}
.lym-flash-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 1px dashed #fed7aa;
}
.lym-flash-title-wrap {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.lym-flash-title {
font-size: var(--lym-fs-lg) !important;
font-weight: 700 !important;
color: var(--lym-color-danger-dark) !important;
margin: 0;
display: inline-flex;
align-items: center;
gap: 6px;
text-transform: none !important;
}
.lym-countdown {
display: inline-flex;
align-items: center;
gap: 6px;
}
.lym-countdown__label {
font-size: 13px;
font-weight: 600;
color: var(--lym-color-text-secondary);
}
.lym-countdown__unit {
background: var(--lym-color-danger-dark);
color: #ffffff;
font-size: 13px;
font-weight: 700;
min-width: 32px;
height: 30px;
padding: 0 6px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.lym-countdown__sep {
font-weight: 700;
color: var(--lym-color-danger-dark);
}
/* 5.5 Shop by Need (Mua theo nhu cầu - lym_need) */
.lym-needs-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.lym-need-pill {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: var(--lym-control-height);
padding: 8px 16px;
border-radius: 99px;
background: var(--lym-color-surface-subtle);
border: 1px solid var(--lym-color-border-subtle);
color: var(--lym-color-text);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lym-need-pill:hover {
background: var(--lym-color-primary);
border-color: var(--lym-color-primary);
color: #ffffff;
}
.lym-need-pill__count {
font-size: 12px;
background: rgba(15, 81, 50, 0.1);
color: var(--lym-color-primary);
padding: 1px 7px;
border-radius: 99px;
}
.lym-need-pill:hover .lym-need-pill__count {
background: rgba(255, 255, 255, 0.22);
color: #ffffff;
}
/* 5.6 Tabbed Products (Bán chạy / Hàng mới / Giảm sâu) */
.lym-tabs-nav {
display: inline-flex;
gap: 8px;
background: var(--lym-color-surface-muted);
padding: 4px;
border-radius: 8px;
}
.lym-tab-btn {
border: none;
background: transparent;
color: var(--lym-color-text-secondary);
font-family: var(--lym-font-sans);
font-size: 14px;
font-weight: 600;
min-height: 36px;
padding: 7px 16px;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.lym-tab-btn.is-active {
background: var(--lym-color-primary);
color: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.lym-tab-panel {
display: none;
}
.lym-tab-panel.is-active {
display: block;
}
/* 5.7 Category Spotlight Block (Banner left + Subcat pills + Grid) */
.lym-cat-spotlight-subcats {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.lym-subcat-chip {
font-size: 13px;
font-weight: 500;
color: var(--lym-color-text-secondary);
background: var(--lym-color-surface-muted);
padding: 5px 12px;
border-radius: 99px;
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.lym-subcat-chip:hover {
background: var(--lym-color-primary-soft);
color: var(--lym-color-primary);
}
.lym-cat-spotlight-body {
display: grid;
grid-template-columns: 240px 1fr;
gap: 16px;
align-items: stretch;
}
.lym-cat-spotlight-banner {
border-radius: var(--lym-radius-md);
padding: 24px 18px;
background: linear-gradient(160deg, #0f5132 0%, #198754 100%);
color: #ffffff;
display: flex;
flex-direction: column;
justify-content: space-between;
text-decoration: none;
}
.lym-cat-spotlight-banner--alt1 {
background: linear-gradient(160deg, #1e3a8a 0%, #0284c7 100%);
}
.lym-cat-spotlight-banner--alt2 {
background: linear-gradient(160deg, #9a3412 0%, #d97706 100%);
}
.lym-cat-spotlight-banner--alt3 {
background: linear-gradient(160deg, #581c87 0%, #9333ea 100%);
}
.lym-cat-spotlight-banner h3 {
color: #ffffff;
font-size: 20px;
font-weight: 800;
margin: 0 0 8px;
}
.lym-cat-spotlight-banner p {
color: rgba(255, 255, 255, 0.9);
font-size: 13px;
margin: 0 0 16px;
}
.lym-cat-spotlight-banner__cta {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
font-size: 13px;
font-weight: 700;
padding: 8px 14px;
border-radius: 6px;
align-self: flex-start;
}
/* 5.8 Featured Brands Grid */
.lym-brands-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.lym-brand-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 14px 12px;
background: var(--lym-color-surface-subtle);
border: 1px solid var(--lym-color-border-subtle);
border-radius: var(--lym-radius-md);
text-decoration: none;
text-align: center;
transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
min-height: 76px;
}
.lym-brand-card:hover {
border-color: var(--lym-color-primary);
background: var(--lym-color-primary-soft);
box-shadow: var(--lym-shadow-sm);
}
.lym-brand-card__name {
font-size: 14px;
font-weight: 700;
color: var(--lym-color-primary);
}
.lym-brand-card__count {
font-size: 12px;
color: var(--lym-color-text-secondary);
margin-top: 2px;
}
/* 5.9 Partner Affiliate & Dealer CTA Banner */
.lym-partner-banner {
background: linear-gradient(135deg, #0f5132 0%, #115e59 55%, #0f766e 100%);
border-radius: var(--lym-radius-lg);
padding: 28px 32px;
color: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
}
.lym-partner-banner h2 {
color: #ffffff;
font-size: 20px;
font-weight: 800;
margin: 0 0 6px;
}
.lym-partner-banner p {
color: rgba(255, 255, 255, 0.92);
font-size: 14px;
margin: 0;
max-width: 680px;
}
.lym-partner-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.lym-btn-partner-primary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--lym-control-height);
background: var(--lym-color-accent);
color: #ffffff !important;
font-weight: 700;
font-size: 14px;
padding: 0 20px;
border-radius: var(--lym-control-radius);
text-decoration: none;
}
.lym-btn-partner-outline {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--lym-control-height);
background: #0a3622;
border: 1px solid rgba(255, 255, 255, 0.45);
color: #ffffff !important;
font-weight: 600;
font-size: 14px;
padding: 0 20px;
border-radius: var(--lym-control-radius);
text-decoration: none;
}
/* 5.10 Blog Guides Grid (4 posts) */
.lym-blog-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.lym-blog-card {
background: #ffffff;
border: 1px solid var(--lym-color-border-subtle);
border-radius: var(--lym-radius-md);
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lym-blog-card:hover {
border-color: var(--lym-color-primary);
box-shadow: var(--lym-shadow-md);
}
.lym-blog-card__thumb {
aspect-ratio: 16 / 10;
background: linear-gradient(135deg, #e8f5ee 0%, #d1fae5 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-decoration: none;
}
.lym-blog-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.lym-blog-card__body {
padding: 14px;
display: flex;
flex-direction: column;
flex: 1;
}
.lym-blog-card__meta {
font-size: 12px;
color: var(--lym-color-text-muted);
margin-bottom: 6px;
}
.lym-blog-card__title {
font-size: 15px;
font-weight: 700;
line-height: 1.4;
margin: 0 0 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.lym-blog-card__title a {
color: var(--lym-color-text);
text-decoration: none;
}
.lym-blog-card__title a:hover {
color: var(--lym-color-primary);
}
.lym-blog-card__excerpt {
font-size: 13px;
color: var(--lym-color-text-secondary);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 5.11 Newsletter Section (Item 22 / X-017: 5/7 desktop grid, 48px inputs + button row, 20x20 consent below) */
.lym-newsletter-box {
background: var(--lym-color-primary-soft) !important;
border: 1px solid #a7f3d0 !important;
border-radius: var(--lym-radius-lg) !important;
padding: var(--lym-space-6) !important;
display: grid !important;
grid-template-columns: 5fr 7fr !important;
align-items: center !important;
gap: var(--lym-space-6) !important;
}
.lym-newsletter-info h3,
.lym-newsletter-title {
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: var(--lym-color-primary) !important;
text-transform: none !important;
margin: 0 0 6px !important;
}
.lym-newsletter-info p {
font-size: 14px !important;
line-height: 1.55 !important;
color: var(--lym-color-text-secondary) !important;
margin: 0 !important;
}
.lym-newsletter-form {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.lym-newsletter-inputs {
display: grid !important;
grid-template-columns: 1.2fr 1fr auto !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
}
.lym-newsletter-inputs input[type="email"],
.lym-newsletter-inputs input[type="tel"] {
width: 100% !important;
height: 48px !important;
min-height: 48px !important;
max-height: 48px !important;
border: 1px solid var(--lym-color-border) !important;
border-radius: var(--lym-control-radius) !important;
padding: 0 14px !important;
background: #ffffff !important;
font-size: 14px !important;
color: var(--lym-color-text) !important;
margin: 0 !important;
box-sizing: border-box !important;
}
.lym-newsletter-inputs button[type="submit"],
.lym-newsletter-form button {
height: 48px !important;
min-height: 48px !important;
max-height: 48px !important;
background: var(--lym-color-primary) !important;
color: #ffffff !important;
border: 1px solid var(--lym-color-primary) !important;
border-radius: var(--lym-control-radius) !important;
padding: 0 22px !important;
font-weight: 700 !important;
font-size: 14px !important;
text-transform: none !important;
cursor: pointer !important;
white-space: nowrap !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
.lym-newsletter-inputs button[type="submit"]:hover,
.lym-newsletter-form button:hover {
background: var(--lym-color-primary-hover) !important;
border-color: var(--lym-color-primary-hover) !important;
}
.lym-newsletter-consent {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin: 0 !important;
min-height: 32px !important;
font-size: 13px !important;
line-height: 1.45 !important;
color: var(--lym-color-text-secondary) !important;
cursor: pointer !important;
text-align: left !important;
}
.lym-newsletter-consent a {
color: var(--lym-color-primary) !important;
font-weight: 600 !important;
text-decoration: underline !important;
}
@media (max-width: 1024px) {
.lym-newsletter-box {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
}
@media (max-width: 767px) {
.lym-newsletter-box {
padding: 16px !important;
}
.lym-newsletter-inputs {
grid-template-columns: 1fr !important;
}
.lym-newsletter-inputs input[type="email"],
.lym-newsletter-inputs input[type="tel"],
.lym-newsletter-inputs button[type="submit"] {
width: 100% !important;
}
}
/* ==========================================================================
6. SHOP / CATEGORY ARCHIVE & SIDEBAR FILTERS (docs/03 Mục 4.2)
========================================================================== */
.sidebar-container .widget {
background: #ffffff;
border: 1px solid var(--lym-border);
border-radius: var(--lym-radius-md);
padding: 16px;
margin-bottom: 16px;
}
.sidebar-container .widget-title {
font-size: 15px;
font-weight: 700;
color: var(--lym-text-main);
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--lym-border);
text-transform: none;
}
.lym-filter-group {
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid #f1f5f9;
}
.lym-filter-group:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.lym-filter-group__title {
font-size: 14px;
font-weight: 700;
color: var(--lym-text-main);
margin: 0 0 10px;
}
.lym-filter-list {
list-style: none;
padding: 0;
margin: 0;
max-height: 220px;
overflow-y: auto;
}
.lym-filter-list li {
margin-bottom: 6px;
}
.lym-filter-list a {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
color: var(--lym-text-secondary);
text-decoration: none;
padding: 4px 6px;
border-radius: 5px;
transition: all 0.15s ease;
}
.lym-filter-list a:hover,
.lym-filter-list a.is-active {
background: var(--lym-primary-soft);
color: var(--lym-primary);
font-weight: 600;
}
.lym-filter-count {
font-size: 12px;
color: var(--lym-text-muted);
background: #f1f5f9;
padding: 1px 6px;
border-radius: 99px;
}
/* Category Description at Bottom of Page */
.term-description {
background: #ffffff;
border: 1px solid var(--lym-border);
border-radius: var(--lym-radius-md);
padding: 20px 24px;
margin-top: 28px;
font-size: 14px;
color: var(--lym-text-secondary);
}
/* ==========================================================================
7. SINGLE PRODUCT PAGE & LYM-GLOBAL-CORE BLOCKS (docs/03 Mục 4.3)
========================================================================== */
.single-product .product-image-summary-inner {
background: #ffffff;
border: 1px solid var(--lym-border);
border-radius: var(--lym-radius-lg);
padding: 24px;
box-shadow: var(--lym-shadow-card);
}
.single-product .entry-summary .product_title {
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
color: var(--lym-text-main);
margin-bottom: 10px;
}
.single-product .entry-summary .price {
font-size: 24px !important;
font-weight: 800 !important;
color: var(--lym-danger) !important;
background: #fef2f2;
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 16px;
}
.single-product .entry-summary .price del {
font-size: 15px !important;
color: var(--lym-text-muted) !important;
font-weight: 400 !important;
margin-right: 8px;
}
/* Single Meta Top from lym-global-core */
.lym-single-meta-top {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
font-size: 13px;
}
.lym-brand-chip {
background: var(--lym-primary-soft);
color: var(--lym-primary);
padding: 4px 10px;
border-radius: 6px;
}
.lym-brand-chip a {
color: var(--lym-primary);
font-weight: 700;
text-decoration: none;
}
.lym-meta-chip {
background: var(--lym-bg-muted);
color: var(--lym-text-secondary);
padding: 4px 10px;
border-radius: 6px;
}
/* Legal Supplement Notice (TPCN) from lym-global-core */
.lym-legal-supplement-notice {
background-color: #fffbeb;
border: 1px solid #fde68a;
border-left: 4px solid var(--lym-warning);
border-radius: var(--lym-radius-md);
padding: 12px 16px;
margin: 14px 0;
font-size: 14px;
line-height: 1.5;
color: #92400e;
}
/* Single Product Trust Box from lym-global-core */
.lym-trust-box-single {
background: #f8fafc;
border: 1px solid var(--lym-border);
border-radius: var(--lym-radius-md);
padding: 14px 16px;
margin-top: 16px;
}
.lym-trust-box-single__title {
font-size: 14px;
font-weight: 700;
color: var(--lym-primary);
margin-bottom: 10px;
text-transform: uppercase;
}
.lym-trust-box-single__list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px 12px;
font-size: 13px;
color: var(--lym-text-secondary);
}
/* Buy Now Button & Zalo Consult Button on Single Product */
.single-product .wd-buy-now-btn {
background-color: var(--lym-primary) !important;
color: #ffffff !important;
font-weight: 700 !important;
border-radius: 8px !important;
}
.single-product .wd-buy-now-btn:hover {
background-color: var(--lym-primary-light) !important;
}
.lym-single-consult-bar {
display: flex;
align-items: center;
gap: 10px;
margin-top: 12px;
}
.lym-zalo-consult-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 16px;
border-radius: 8px;
border: 1px solid #0284c7;
background: #f0f9ff;
color: #0369a1 !important;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: all 0.15s ease;
}
.lym-zalo-consult-btn:hover {
background: #0284c7;
color: #ffffff !important;
}
/* Legal Specification Table inside "Thông tin chi tiết" Tab */
.lym-product-specs-section {
margin: 10px 0;
}
.lym-product-specs-section__heading {
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
color: var(--lym-text-main);
}
.lym-specs-table {
width: 100%;
border-collapse: collapse;
border: 1px solid var(--lym-border);
border-radius: var(--lym-radius-md);
overflow: hidden;
font-size: 14px;
}
.lym-specs-table th,
.lym-specs-table td {
padding: 11px 16px;
border-bottom: 1px solid var(--lym-border);
text-align: left;
}
.lym-specs-table th {
width: 32%;
background-color: #f8fafc;
font-weight: 600;
color: var(--lym-text-secondary);
}
.lym-specs-table td {
background-color: #ffffff;
color: var(--lym-text-main);
}
/* Medical Disclaimer Box at End of Blog Posts */
.lym-post-medical-disclaimer {
background: #fffbeb;
border: 1px solid #fde68a;
border-left: 4px solid var(--lym-warning);
border-radius: var(--lym-radius-md);
padding: 14px 18px;
margin-top: 24px;
font-size: 14px;
color: #92400e;
}
/* ==========================================================================
8. CART, CHECKOUT, VIETQR, PDPD CONSENT & AFFILIATE PORTAL
========================================================================== */
.wd-shipping-progress-bar {
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: var(--lym-radius-md);
padding: 12px 16px;
margin-bottom: 16px;
}
.wd-shipping-progress-bar .progress-bar {
background-color: var(--lym-primary) !important;
}
.lym-pdpd-consent-wrapper {
background: #f8fafc;
border: 1px solid var(--lym-border);
border-radius: var(--lym-radius-md);
padding: 12px 14px;
margin: 14px 0;
font-size: 14px;
}
.lym-vietqr-box {
background: #ffffff;
border: 2px solid var(--lym-primary);
border-radius: var(--lym-radius-lg);
padding: 24px;
margin: 24px 0;
}
.lym-vietqr-grid {
display: grid;
grid-template-columns: 240px 1fr;
gap: 24px;
align-items: center;
margin-top: 16px;
}
.lym-vietqr-details table {
width: 100%;
border-collapse: collapse;
}
.lym-vietqr-details th,
.lym-vietqr-details td {
padding: 8px 12px;
border-bottom: 1px solid var(--lym-border);
text-align: left;
}
/* ==========================================================================
9. FOOTER 5-COLUMN + LEGAL TPCN DISCLAIMER (docs/03 Mục 3.3)
========================================================================== */
.wd-footer {
background-color: #ffffff !important;
border-top: 3px solid var(--lym-primary);
color: var(--lym-text-secondary);
}
.lym-footer-wrap {
padding: 36px 0 24px;
}
.lym-footer-cols {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr;
gap: 24px;
padding-bottom: 28px;
border-bottom: 1px solid var(--lym-border);
}
.lym-footer-col__title {
font-size: 15px;
font-weight: 700;
color: var(--lym-text-main);
text-transform: uppercase;
letter-spacing: 0.02em;
margin: 0 0 14px;
}
.lym-footer-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.lym-footer-col ul li {
margin-bottom: 8px;
}
.lym-footer-col ul a {
color: var(--lym-text-secondary);
font-size: 14px;
text-decoration: none;
transition: color 0.15s ease;
}
.lym-footer-col ul a:hover {
color: var(--lym-primary);
}
.lym-footer-contact-list li {
font-size: 14px;
color: var(--lym-text-secondary);
line-height: 1.5;
}
.lym-footer-payment-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.lym-payment-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border-radius: 6px;
background: #f1f5f9;
border: 1px solid var(--lym-border);
font-size: 12px;
font-weight: 600;
color: var(--lym-text-main);
}
/* Popular Categories Row in Footer (max 20 links, no keyword stuffing) */
.lym-footer-cats-row {
padding: 18px 0;
border-bottom: 1px solid var(--lym-border);
}
.lym-footer-cats-row__title {
font-size: 13px;
font-weight: 700;
color: var(--lym-text-secondary);
text-transform: uppercase;
margin: 0 0 10px;
}
.lym-footer-cats-links {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
}
.lym-footer-cats-links a {
font-size: 13px;
color: var(--lym-text-secondary);
text-decoration: none;
}
.lym-footer-cats-links a:hover {
color: var(--lym-primary);
text-decoration: underline;
}
/* Bottom Legal Info & Mandatory TPCN Disclaimer */
.lym-footer-legal {
padding-top: 20px;
display: flex;
flex-direction: column;
gap: 12px;
font-size: 13px;
color: var(--lym-text-secondary);
}
.lym-footer-tpcn-disclaimer {
background: #fffbeb;
border: 1px solid #fde68a;
border-radius: var(--lym-radius-md);
padding: 12px 16px;
color: #92400e;
font-size: 13px;
font-weight: 500;
text-align: center;
}
/* ==========================================================================
10. RESPONSIVE (MOBILE-FIRST 390PX & TABLET)
========================================================================== */
@media (max-width: 1024px) {
.lym-hero-grid {
grid-template-columns: 1fr;
}
.lym-hero-side {
flex-direction: row;
}
.lym-commitments-grid {
grid-template-columns: repeat(2, 1fr);
}
.lym-cat-icon-grid {
grid-template-columns: repeat(4, 1fr);
}
.lym-cat-spotlight-body {
grid-template-columns: 1fr;
}
.lym-cat-spotlight-banner {
padding: 18px;
}
.lym-brands-grid {
grid-template-columns: repeat(3, 1fr);
}
.lym-blog-grid {
grid-template-columns: repeat(2, 1fr);
}
.lym-footer-cols {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.lym-home-wrap {
gap: 16px;
}
.lym-section-card {
padding: 14px;
}
.lym-section-title {
font-size: 16px;
}
.lym-hero-main {
height: 280px;
min-height: 280px;
}
.lym-hero-main.has-expanded-desc {
height: auto;
min-height: 280px;
}
.lym-hero-slide {
flex-direction: column;
align-items: flex-start;
padding: 20px 18px 46px;
height: 280px;
min-height: 280px;
}
.lym-hero-slide.is-desc-expanded {
height: auto;
min-height: 280px;
}
.lym-hero-content {
max-width: 100%;
}
.lym-hero-title {
font-size: 20px;
}
.lym-hero-visual {
display: none;
}
.lym-hero-side {
flex-direction: column;
gap: 10px;
}
.lym-commitments-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
padding: 12px;
}
.lym-commitment-icon {
width: 36px;
height: 36px;
}
.lym-commitment-title {
font-size: 13px;
}
.lym-commitment-desc {
font-size: 12px;
}
/* Horizontal swipe 2 rows on mobile for Category Icons */
.lym-cat-icon-grid {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(2, auto);
grid-auto-columns: 92px;
overflow-x: auto;
padding-bottom: 6px;
-webkit-overflow-scrolling: touch;
}
.lym-brands-grid {
grid-template-columns: repeat(2, 1fr);
}
.lym-blog-grid {
grid-template-columns: 1fr;
}
.lym-partner-banner {
padding: 20px 16px;
}
.lym-newsletter-box {
padding: 18px 16px;
}
.lym-newsletter-form {
flex-direction: column;
width: 100%;
max-width: 100%;
}
.lym-newsletter-form button {
height: 40px;
}
.lym-footer-cols {
grid-template-columns: 1fr;
gap: 20px;
}
.lym-trust-box-single__list {
grid-template-columns: 1fr;
}
.lym-vietqr-grid {
grid-template-columns: 1fr;
}
/* Mobile 2-column (360-430px) Product Card refinements */
.wd-product,
.wd-loop-builder-off .wd-product {
--wd-prod-bg-sp: 12px !important;
--wd-prod-gap: 0px !important;
font-size: 100% !important;
}
.wd-product .wd-product-wrapper,
.wd-product .product-wrapper,
.wd-loop-builder-off .wd-product .wd-product-wrapper {
padding: 12px !important;
}
.wd-product .wd-entities-title,
.wd-loop-builder-off .wd-product .wd-entities-title {
font-size: 13px !important;
line-height: 18px !important;
height: 36px !important;
min-height: 36px !important;
max-height: 36px !important;
}
.wd-product .lym-loop-meta-row {
font-size: 12px !important;
}
.wd-product .lym-loop-origin {
font-size: 12px !important;
padding: 0 5px !important;
}
.wd-product .lym-loop-packaging,
.wd-product .lym-loop-sold {
font-size: 12px !important;
}
.wd-product .price,
.wd-loop-builder-off .wd-product .price {
font-size: 14px !important;
line-height: 1.2 !important;
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
column-gap: 4px !important;
row-gap: 2px !important;
flex-wrap: wrap !important;
overflow: visible !important;
}
.wd-product .price del {
font-size: 12px !important;
overflow: visible !important;
text-overflow: clip !important;
}
.wd-product .wd-add-btn > a,
.wd-product.wd-hover-standard .wd-add-btn > a,
.wd-product .wd-add-btn > a.button,
.wd-product .add_to_cart_button,
.wd-product .product_type_variable {
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
font-size: 13px !important;
padding: 0 8px !important;
}
.wd-product .product-labels {
top: 6px !important;
left: 6px !important;
max-width: calc(100% - 40px) !important;
}
.wd-product .product-labels .product-label {
font-size: 12px !important;
padding: 2px 6px !important;
}
}
/* Sticky Add-to-Cart Bar Refinements */
.wd-sticky-btn .lym-single-consult-bar {
display: inline-flex !important;
margin-top: 0 !important;
margin-left: 8px;
}
.wd-sticky-btn .lym-zalo-text-full {
display: none !important;
}
.wd-sticky-btn .lym-zalo-text-short {
display: inline !important;
}
.wd-sticky-btn .lym-zalo-consult-btn {
padding: 8px 14px !important;
font-size: 13px !important;
height: 42px;
}
/* Keep floating widgets above sticky bars */
.lym-floating-contact,
.lym-contact-floating {
bottom: 84px !important;
z-index: 390 !important;
}
#gt_float_wrapper,
.gt_float_switcher,
.gt_switcher_wrapper,
.gtranslate_wrapper {
display: none !important;
}
/* Single Product Sticky Bottom Bar on Mobile (Zalo + Thêm giỏ + Mua ngay) */
@media (max-width: 767px) {
.single-product .wd-toolbar {
display: none !important;
}
.single-product .wd-sticky-btn {
bottom: 0 !important;
z-index: 450 !important;
background: #ffffff;
border-top: 1px solid var(--lym-border);
box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
}
}
/* ==========================================================================
11. W23 ADDENDA 1–4: CONTAINER, PAGE TITLES, FILTERS, BLOG, EMPTY STATES,
PAGINATION, CATEGORY SPOTLIGHT STICKY & SINGLE PRODUCT SECTIONS
========================================================================== */
/* 11.1 Point 1 (P0): Unified 1280px Container & Zero Horizontal Overflow (360->2560px) */
:root,
body {
--wd-container-w: 1280px !important;
}
html,
body {
max-width: 100%;
overflow-x: clip;
}
.whb-row > .container,
.wd-page-title > .container,
.main-page-wrapper > .container,
.main-page-wrapper > .wd-content-layout,
.wd-footer > .container {
max-width: 1280px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
}
@media (max-width: 767px) {
.whb-row > .container,
.wd-page-title > .container,
.main-page-wrapper > .container,
.main-page-wrapper > .wd-content-layout,
.wd-footer > .container {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* Prevent negative-margin or grid-width overflow inside shortcode/page containers */
.site-content,
.entry-content,
.lym-home-wrap,
.lym-section-card,
.lym-flash-sale-box,
.lym-cat-spotlight-products,
.lym-products-grid-container {
max-width: 100% !important;
box-sizing: border-box !important;
}
.lym-section-card .products.wd-grid-g,
.lym-flash-sale-box .products.wd-grid-g,
.lym-cat-spotlight-products .products.wd-grid-g,
.lym-products-grid-container .products.wd-grid-g,
.site-content .products.wd-grid-g {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Keep Header Right Column ("Tài khoản / Yêu thích / Giỏ hàng") inside container at all widths */
.whb-general-header .whb-flex-row {
gap: 16px;
flex-wrap: nowrap !important;
}
.whb-general-header .whb-col-center {
min-width: 0;
flex: 1 1 auto;
}
.whb-general-header .wd-search-form {
width: 100%;
max-width: 560px;
min-width: 0;
}
.whb-general-header .whb-col-right {
flex-shrink: 0 !important;
white-space: nowrap;
}
.whb-general-header .wd-search-cat > a {
max-width: 145px;
font-size: 13px !important;
padding-left: 12px !important;
padding-right: 22px !important;
border-left: 1px solid var(--lym-border);
}
/* 11.2 Point 2 (P1): Standardized Page Title (Breadcrumb -> H1 32px/24px -> Content 24px) */
.wd-page-title {
background-color: #ffffff !important;
background-image: none !important;
border-bottom: 1px solid var(--lym-border) !important;
padding: 18px 0 !important;
margin-bottom: 24px !important;
}
.wd-page-title > .container {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
text-align: left !important;
gap: 6px !important;
}
.wd-page-title .wd-breadcrumbs,
.wd-page-title .woocommerce-breadcrumb,
.wd-page-title .yoast-breadcrumb {
order: 1 !important;
font-size: 13px !important;
line-height: 1.4 !important;
color: #6b7280 !important;
margin: 0 !important;
}
.wd-page-title .wd-breadcrumbs a,
.wd-page-title .woocommerce-breadcrumb a {
color: #6b7280 !important;
font-weight: 500 !important;
}
.wd-page-title .wd-breadcrumbs a:hover,
.wd-page-title .woocommerce-breadcrumb a:hover {
color: var(--lym-primary) !important;
}
.wd-page-title .entry-title,
.wd-page-title h1.title {
order: 2 !important;
font-size: 32px !important;
line-height: 1.25 !important;
font-weight: 700 !important;
color: #111827 !important;
margin: 0 !important;
text-transform: none !important;
}
/* Hide duplicate breadcrumb in shop-loop-head when page title bar already shows it */
.shop-loop-head .wd-breadcrumbs,
.shop-loop-head .woocommerce-breadcrumb,
.shop-loop-head .yoast-breadcrumb {
display: none !important;
}
.shop-loop-head {
margin-bottom: 16px !important;
padding-bottom: 10px !important;
border-bottom: 1px solid var(--lym-border);
}
.lym-section-title,
.lym-flash-title {
font-size: 20px !important;
line-height: 1.3 !important;
}
@media (max-width: 767px) {
.wd-page-title {
padding: 14px 0 !important;
margin-bottom: 16px !important;
}
.wd-page-title .entry-title,
.wd-page-title h1.title {
font-size: 24px !important;
}
.lym-section-title,
.lym-flash-title {
font-size: 18px !important;
}
}
/* 11.3 Point 3 (P0): Header "Danh mục sản phẩm" Button & Sidebar Filter Checkboxes */
.whb-header-bottom .wd-header-cats {
min-width: 225px !important;
flex-shrink: 0 !important;
}
.whb-header-bottom .wd-header-cats .menu-opener {
width: 100% !important;
min-width: 225px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
padding: 0 16px !important;
}
.whb-header-bottom .wd-header-cats .menu-open-label {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
font-size: 14px !important;
font-weight: 700 !important;
color: #ffffff !important;
white-space: nowrap !important;
}
/* Sidebar Filters `[lym_shop_filters]` — No internal scrollbar, visual checkboxes + "Xem thêm (+N)" */
.lym-filter-list {
max-height: none !important;
overflow: visible !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.lym-filter-list li {
margin-bottom: 4px !important;
}
.lym-filter-list li.lym-filter-item--hidden {
display: none !important;
}
.lym-filter-group.is-expanded .lym-filter-list li.lym-filter-item--hidden {
display: block !important;
}
.lym-filter-list a {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
padding: 6px 8px !important;
border-radius: 6px !important;
font-size: 14px !important;
color: #1f2937 !important;
text-decoration: none !important;
transition: background 0.15s ease, color 0.15s ease;
}
.lym-filter-check {
width: 16px;
height: 16px;
min-width: 16px;
border: 1.5px solid #cbd5e1;
border-radius: 4px;
background: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.15s ease;
}
.lym-filter-list a:hover .lym-filter-check {
border-color: var(--lym-primary);
}
.lym-filter-list a.is-active .lym-filter-check {
background: var(--lym-primary);
border-color: var(--lym-primary);
}
.lym-filter-list a.is-active .lym-filter-check::after {
content: "✓";
color: #ffffff;
font-size: 12px;
font-weight: 700;
line-height: 1;
}
.lym-filter-label {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lym-filter-count {
font-size: 12px !important;
color: #6b7280 !important;
background: transparent !important;
padding: 0 !important;
flex-shrink: 0;
}
.lym-filter-more-btn {
margin-top: 6px !important;
padding: 4px 8px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: var(--lym-primary) !important;
font-size: 13px !important;
font-weight: 600 !important;
min-height: 0 !important;
height: auto !important;
cursor: pointer;
}
.lym-filter-more-btn:hover {
text-decoration: underline;
}
/* 11.4 Point 4 (P1): Blog Archive `/cam-nang-suc-khoe/` Clean 3-Column Card Grid */
.blog .wd-blog-holder,
.archive.category .wd-blog-holder,
.archive.tag .wd-blog-holder {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 24px !important;
height: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.blog .wd-blog-holder > article.wd-post,
.archive.category .wd-blog-holder > article.wd-post,
.archive.tag .wd-blog-holder > article.wd-post {
position: static !important;
top: auto !important;
left: auto !important;
transform: none !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
}
.wd-post .wd-post-inner {
background: #ffffff !important;
border: 1px solid var(--lym-color-border-subtle) !important;
border-radius: 12px !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
box-shadow: var(--lym-shadow-sm) !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
transform: none !important;
}
.wd-post .wd-post-inner:hover {
transform: none !important;
border-color: var(--lym-color-primary) !important;
box-shadow: var(--lym-shadow-md) !important;
}
.wd-post .wd-post-thumb {
aspect-ratio: 16 / 9 !important;
overflow: hidden !important;
margin: 0 !important;
border-radius: 0 !important;
}
.wd-post .wd-post-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.wd-post .wd-post-content {
padding: 18px 20px !important;
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
text-align: left !important;
}
.wd-post .wd-post-cat {
font-size: 12px !important;
font-weight: 600 !important;
background: var(--lym-primary-soft) !important;
color: var(--lym-primary) !important;
padding: 3px 10px !important;
border-radius: 99px !important;
align-self: flex-start;
margin-bottom: 8px !important;
}
.wd-post .wd-entities-title {
font-size: 18px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
margin: 0 0 8px !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.wd-post .wd-post-entry-content,
.wd-post .entry-content {
font-size: 14px !important;
color: #4b5563 !important;
line-height: 1.55 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
margin-bottom: 12px !important;
}
@media (max-width: 1024px) {
.blog .wd-blog-holder,
.archive.category .wd-blog-holder,
.archive.tag .wd-blog-holder {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 18px !important;
}
}
@media (max-width: 767px) {
.blog .wd-blog-holder,
.archive.category .wd-blog-holder,
.archive.tag .wd-blog-holder {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
}
/* 11.5 Point 8 (P1): Unified Empty State Block + "Có thể bạn quan tâm" */
.lym-empty-state-wrap {
width: 100%;
padding: 8px 0 24px;
}
.lym-empty-state-box {
max-width: 520px;
margin: 8px auto 36px;
padding: 36px 24px;
background: #ffffff;
border: 1px solid var(--lym-border);
border-radius: 12px;
text-align: center;
box-shadow: var(--lym-shadow-card);
}
.lym-empty-state-icon {
width: 60px;
height: 60px;
margin: 0 auto 16px;
border-radius: 50%;
background: var(--lym-primary-soft);
color: var(--lym-primary);
display: flex;
align-items: center;
justify-content: center;
}
.lym-empty-state-title {
font-size: 20px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
color: #111827 !important;
margin: 0 0 8px !important;
}
.lym-empty-state-desc {
font-size: 15px !important;
line-height: 1.55 !important;
color: #4b5563 !important;
margin: 0 0 20px !important;
}
.lym-empty-popular-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 20px;
font-size: 13px;
}
.lym-empty-popular-tags span {
color: #6b7280;
font-weight: 500;
}
.lym-empty-popular-tags a {
background: #f1f5f9;
color: var(--lym-primary);
padding: 4px 12px;
border-radius: 99px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
}
.lym-empty-popular-tags a:hover {
background: var(--lym-primary-soft);
}
.lym-empty-state-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px;
}
.lym-empty-btn-primary {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 44px !important;
min-height: 44px !important;
padding: 0 24px !important;
border-radius: 8px !important;
background: var(--lym-primary) !important;
color: #ffffff !important;
font-size: 15px !important;
font-weight: 700 !important;
text-decoration: none !important;
}
.lym-empty-btn-primary:hover {
background: var(--lym-primary-light) !important;
color: #ffffff !important;
}
.lym-empty-btn-secondary {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 44px !important;
min-height: 44px !important;
padding: 0 20px !important;
border-radius: 8px !important;
background: #f8fafc !important;
border: 1px solid #cbd5e1 !important;
color: #1f2937 !important;
font-size: 14px !important;
font-weight: 600 !important;
text-decoration: none !important;
}
.lym-empty-recommendations {
background: #ffffff;
border: 1px solid var(--lym-border);
border-radius: 12px;
padding: 20px;
box-shadow: var(--lym-shadow-card);
}
/* Hide WoodMart's oversized empty cart/wishlist graphic when our unified empty state is present */
.woocommerce-cart .wc-empty-cart-message,
.woocommerce-cart .return-to-shop {
display: none !important;
}
/* 11.6 Point 9 (P0): Pagination & AJAX "Xem thêm sản phẩm" Button */
.lym-shortcode-loop-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.lym-result-count,
.woocommerce-result-count {
font-size: 14px !important;
color: #4b5563 !important;
margin: 0 !important;
}
.lym-pagination-wrap,
.lym-archive-pagination-head,
.wd-loop-footer {
margin-top: 24px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
width: 100%;
}
.lym-ajax-more-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 44px !important;
min-height: 44px !important;
padding: 0 28px !important;
border-radius: 8px !important;
background: #ffffff !important;
color: var(--lym-primary) !important;
border: 1.5px solid var(--lym-primary) !important;
font-size: 14px !important;
font-weight: 700 !important;
text-decoration: none !important;
cursor: pointer;
transition: all 0.18s ease;
}
.lym-ajax-more-btn:hover {
background: var(--lym-primary) !important;
color: #ffffff !important;
}
.woocommerce-pagination ul.page-numbers,
.wd-pagination .page-numbers {
display: inline-flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.woocommerce-pagination ul.page-numbers li .page-numbers {
min-width: 38px !important;
height: 38px !important;
padding: 0 10px !important;
border-radius: 8px !important;
border: 1px solid var(--lym-border) !important;
background: #ffffff !important;
color: #1f2937 !important;
font-size: 14px !important;
font-weight: 600 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-decoration: none !important;
}
.woocommerce-pagination ul.page-numbers li .page-numbers.current,
.woocommerce-pagination ul.page-numbers li .page-numbers:hover {
background: var(--lym-primary) !important;
border-color: var(--lym-primary) !important;
color: #ffffff !important;
}
/* 11.7 Point 10 (P1): Homepage Category Spotlight Sticky Banner & Brand Colors */
.lym-cat-spotlight-banner {
display: block !important;
padding: 24px !important;
position: relative;
background: linear-gradient(160deg, #0f5132 0%, #198754 100%) !important;
}
.lym-cat-spotlight-banner--alt1 {
background: linear-gradient(160deg, #115e59 0%, #0f766e 100%) !important;
}
.lym-cat-spotlight-banner--alt2 {
background: linear-gradient(160deg, #9a3412 0%, #d97706 100%) !important;
}
/* Replace off-brand purple with deep emerald forest gradient */
.lym-cat-spotlight-banner--alt3 {
background: linear-gradient(160deg, #064e3b 0%, #047857 100%) !important;
}
.lym-cat-spotlight-banner__inner {
position: sticky !important;
top: calc(var(--lym-sticky-top, 87px) + 16px) !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px !important;
}
@media (max-width: 1024px) {
.lym-cat-spotlight-banner {
padding: 16px 18px !important;
max-height: 160px !important;
overflow: hidden;
}
.lym-cat-spotlight-banner__inner {
position: static !important;
gap: 6px !important;
}
.lym-cat-spotlight-banner p {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 6px !important;
}
.lym-cat-spotlight-subcats {
flex-wrap: nowrap !important;
overflow-x: auto !important;
max-width: 100%;
padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
}
.lym-subcat-chip {
white-space: nowrap;
flex-shrink: 0;
}
}
/* 11.8 Point 11 & 12 (P1): Single Product 2-Column Sticky Layout, 1:1 Gallery & Sequential Sections */
@media (min-width: 1025px) {
.single-product .product-image-summary-inner > .row {
display: flex !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
gap: 40px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.single-product .product-image-summary-inner > .row > .product-images,
.single-product .product-image-summary-inner > .row > .summary.entry-summary {
flex: 0 0 calc(50% - 20px) !important;
max-width: calc(50% - 20px) !important;
width: calc(50% - 20px) !important;
padding-left: 0 !important;
padding-right: 0 !important;
position: sticky !important;
top: calc(var(--lym-sticky-top, 87px) + 16px) !important;
}
}
/* 1:1 Square Product Gallery without Blank Vertical Gap above Thumbnails */
.single-product .woocommerce-product-gallery .wd-gallery-images {
margin-bottom: 12px !important;
}
.single-product .woocommerce-product-gallery .wd-carousel-wrap {
align-items: stretch !important;
}
.single-product .woocommerce-product-gallery__image {
aspect-ratio: 1 / 1 !important;
max-height: 540px !important;
background: #ffffff !important;
border: 1px solid #f1f5f9 !important;
border-radius: 10px !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.single-product .woocommerce-product-gallery__image > a {
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.single-product .woocommerce-product-gallery__image img {
width: 100% !important;
height: 100% !important;
max-height: 520px !important;
object-fit: contain !important;
background: #ffffff !important;
}
.single-product .wd-gallery-thumb .wd-carousel-item img {
aspect-ratio: 1 / 1 !important;
object-fit: contain !important;
background: #ffffff !important;
border: 1px solid var(--lym-border) !important;
border-radius: 8px !important;
padding: 4px !important;
}
/* Single Product Right Column Typography, Discount Badge & 48px Action Buttons */
.single-product .entry-summary .product_title {
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
margin-bottom: 12px !important;
}
.single-product .entry-summary .price {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 10px !important;
font-size: 28px !important;
font-weight: 800 !important;
color: var(--lym-danger) !important;
background: #fef2f2 !important;
padding: 12px 16px !important;
border-radius: 8px !important;
margin-bottom: 16px !important;
}
.single-product .entry-summary .price del {
font-size: 15px !important;
color: #9ca3af !important;
font-weight: 500 !important;
margin: 0 !important;
order: 2;
}
.single-product .entry-summary .price ins {
text-decoration: none !important;
order: 1;
}
.single-product .entry-summary .price .lym-single-discount-badge {
order: 3;
background: var(--lym-danger);
color: #ffffff;
font-size: 12px;
font-weight: 700;
padding: 3px 8px;
border-radius: 6px;
line-height: 1.2;
}
.lym-meta-chip--rating {
background: #fffbeb !important;
color: #b45309 !important;
text-decoration: none;
}
.lym-highlight-bullets {
margin: 0 0 16px !important;
padding-left: 18px !important;
font-size: 15px !important;
line-height: 1.65 !important;
color: #374151 !important;
}
.lym-highlight-bullets li {
margin-bottom: 4px;
}
/* 48px Height for Quantity + Thêm vào giỏ (outlined) + Mua ngay (solid) */
.single-product .summary-inner form.cart {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 10px !important;
margin-bottom: 14px !important;
}
.single-product .summary-inner form.cart .quantity {
height: 48px !important;
margin: 0 !important;
}
.single-product .summary-inner form.cart .quantity input[type="number"],
.single-product .summary-inner form.cart .quantity input[type="button"] {
height: 48px !important;
min-height: 48px !important;
}
.single-product .summary-inner form.cart .single_add_to_cart_button {
height: 48px !important;
min-height: 48px !important;
padding: 0 20px !important;
border-radius: 8px !important;
background: var(--lym-primary-soft) !important;
color: var(--lym-primary) !important;
border: 2px solid var(--lym-primary) !important;
font-size: 14px !important;
font-weight: 700 !important;
flex: 1 1 auto !important;
}
.single-product .summary-inner form.cart .single_add_to_cart_button:hover {
background: var(--lym-primary) !important;
color: #ffffff !important;
}
.single-product .summary-inner form.cart .wd-buy-now-btn {
height: 48px !important;
min-height: 48px !important;
padding: 0 22px !important;
border-radius: 8px !important;
background: var(--lym-primary) !important;
color: #ffffff !important;
border: 2px solid var(--lym-primary) !important;
font-size: 14px !important;
font-weight: 700 !important;
flex: 1 1 auto !important;
}
/* Hide unconfigured Zalo button in main summary column while keeping it in mobile sticky bar */
.single-product .summary-inner .lym-single-consult-bar--sticky-only {
display: none !important;
}
/* Compact Trust Box on Single Product */
.lym-trust-box-single {
background: #f8fafc !important;
border: 1px solid var(--lym-border) !important;
border-radius: 10px !important;
padding: 14px 16px !important;
margin-top: 14px !important;
}
.lym-trust-box-title {
font-size: 14px;
font-weight: 700;
color: var(--lym-primary);
margin-bottom: 8px;
text-transform: uppercase;
}
.lym-trust-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
font-size: 13px !important;
color: #374151 !important;
}
.lym-trust-list li {
display: flex;
align-items: flex-start;
gap: 8px;
line-height: 1.45;
}
.lym-trust-icon {
color: var(--lym-primary);
font-weight: 700;
flex-shrink: 0;
}
/* Point 12: Sequential Detail Sections + Sticky Scrollspy TOC Bar */
.lym-pdp-sections-wrap {
margin-top: 32px;
margin-bottom: 36px;
display: flex;
flex-direction: column;
gap: 32px;
}
.lym-pdp-toc-bar {
position: sticky !important;
top: var(--lym-sticky-top, 87px) !important;
z-index: 290 !important;
background: rgba(255, 255, 255, 0.96) !important;
backdrop-filter: blur(8px);
border: 1px solid var(--lym-border);
border-radius: 10px;
padding: 8px 12px;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
.lym-pdp-toc-bar__inner {
display: flex;
align-items: center;
gap: 8px;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.lym-pdp-toc-link {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
color: #4b5563 !important;
text-decoration: none !important;
transition: all 0.15s ease;
}
.lym-pdp-toc-link:hover {
background: #f1f5f9;
color: var(--lym-primary) !important;
}
.lym-pdp-toc-link.is-active {
background: var(--lym-primary) !important;
color: #ffffff !important;
}
.lym-pdp-section {
display: block !important;
background: #ffffff;
border: 1px solid var(--lym-border);
border-radius: 12px;
padding: 24px 28px;
box-shadow: var(--lym-shadow-card);
scroll-margin-top: calc(var(--lym-sticky-top, 87px) + var(--lym-toc-height, 56px) + 16px);
}
.lym-pdp-section__title,
.lym-pdp-section .lym-section-heading {
font-size: 20px !important;
font-weight: 700 !important;
color: #111827 !important;
margin: 0 0 18px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid var(--lym-border) !important;
}
/* Collapsible Long Description with Fade */
.lym-desc-collapsible {
position: relative;
max-height: 540px;
overflow: hidden;
transition: max-height 0.3s ease;
}
.lym-desc-collapsible.is-expanded,
.lym-desc-collapsible.is-short {
max-height: none !important;
overflow: visible !important;
}
.lym-desc-collapsible__fade {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 96px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 90%);
pointer-events: none;
}
.lym-desc-collapsible.is-expanded .lym-desc-collapsible__fade,
.lym-desc-collapsible.is-short .lym-desc-collapsible__fade {
display: none !important;
}
.lym-desc-toggle-wrap {
display: flex;
justify-content: center;
margin-top: 14px;
}
.lym-desc-toggle-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 40px !important;
padding: 0 22px !important;
border-radius: 8px !important;
border: 1.5px solid var(--lym-primary) !important;
background: #ffffff !important;
color: var(--lym-primary) !important;
font-size: 14px !important;
font-weight: 700 !important;
cursor: pointer;
}
.lym-desc-toggle-btn:hover {
background: var(--lym-primary-soft) !important;
}
/* Clean 0-Reviews Banner inside Reviews Section */
.lym-reviews-zero-banner {
display: flex;
align-items: center;
gap: 14px;
background: #f8fafc;
border: 1px solid var(--lym-border);
border-radius: 10px;
padding: 16px 20px;
margin-bottom: 20px;
}
.lym-reviews-zero-banner__icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: #fef3c7;
color: #b45309;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.lym-reviews-zero-banner strong {
display: block;
font-size: 15px;
color: #111827;
margin-bottom: 2px;
}
.lym-reviews-zero-banner p {
font-size: 14px;
color: #4b5563;
margin: 0;
}
.lym-qna-fallback {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
background: #f8fafc;
border: 1px solid var(--lym-border);
border-radius: 10px;
padding: 16px 20px;
}
.lym-qna-fallback p {
margin: 0;
font-size: 14px;
color: #374151;
}
@media (max-width: 767px) {
.lym-pdp-section {
padding: 16px;
}
.lym-pdp-section__title,
.lym-pdp-section .lym-section-heading {
font-size: 18px !important;
}
.lym-pdp-toc-bar {
top: var(--lym-sticky-top, 60px) !important;
padding: 6px 8px;
}
.lym-pdp-toc-link {
padding: 6px 12px;
font-size: 13px;
}
}
/* Single Product Top Breadcrumb & Bottom-Right Gallery Zoom Button (Point 11) */
.lym-pdp-top-breadcrumb {
margin-bottom: 14px;
font-size: 13px;
color: #6b7280;
}
.lym-pdp-top-breadcrumb .woocommerce-breadcrumb {
margin: 0 !important;
font-size: 13px !important;
color: #6b7280 !important;
}
.lym-pdp-top-breadcrumb .woocommerce-breadcrumb a {
color: #4b5563 !important;
text-decoration: none !important;
}
.lym-pdp-top-breadcrumb .woocommerce-breadcrumb a:hover {
color: var(--lym-primary) !important;
}
.single-product .wd-show-product-gallery-wrap {
right: 14px !important;
left: auto !important;
bottom: 14px !important;
}
/* Prevent duplicate WoodMart icon + text arrow on pagination next/prev links */
.woocommerce-pagination .page-numbers.next::before,
.woocommerce-pagination .page-numbers.prev::before,
.wd-pagination .next::before,
.wd-pagination .prev::before {
display: none !important;
content: none !important;
}
/* ==========================================================================
12. W23 ADDENDA 5 & 6: POINTS 18 (P0), 17, 16, 14, 13
========================================================================== */
/* 12.1 Point 18 (P0) & Point 13a: Unified Dynamic Sticky Offset (`--lym-sticky-top`) */
:root {
--lym-sticky-top: 67px;
--lym-toc-height: 54px;
}
@media (max-width: 1024px) {
:root {
--lym-sticky-top: 63px;
}
}
/* Ensure WoodMart sticky header row respects fixed #wpadminbar on desktop & tablet */
@media (min-width: 783px) {
body.admin-bar .whb-sticked .whb-main-header,
body.admin-bar .whb-sticked .whb-sticky-row,
body.admin-bar .whb-clone.whb-sticked {
top: 32px !important;
}
}
@media (min-width: 601px) and (max-width: 782px) {
body.admin-bar .whb-sticked .whb-main-header,
body.admin-bar .whb-sticked .whb-sticky-row,
body.admin-bar .whb-clone.whb-sticked {
top: 46px !important;
}
}
@media (max-width: 600px) {
body.admin-bar .whb-sticked .whb-main-header,
body.admin-bar .whb-sticked .whb-sticky-row,
body.admin-bar .whb-clone.whb-sticked {
top: var(--lym-adminbar-h, 0px) !important;
}
}
/* Category Spotlight Sticky Banner & Single Product Sticky Columns: `--lym-sticky-top + 16px` */
.lym-cat-spotlight-banner__inner {
position: sticky !important;
top: calc(var(--lym-sticky-top, 87px) + 16px) !important;
transition: top 0.2s ease;
}
@media (max-width: 1024px) {
.lym-cat-spotlight-banner__inner {
position: static !important;
top: auto !important;
}
}
@media (min-width: 1025px) {
.single-product .product-image-summary-inner > .row > .product-images,
.single-product .product-image-summary-inner > .row > .summary.entry-summary {
position: sticky !important;
top: calc(var(--lym-sticky-top, 87px) + 16px) !important;
transition: top 0.2s ease;
}
}
/* Brands Sticky A-Z Bar: `top: var(--lym-sticky-top)` */
.lym-brands-az-bar {
position: sticky !important;
top: var(--lym-sticky-top, 87px) !important;
z-index: 290 !important;
transition: top 0.2s ease;
}
.lym-brand-letter-section {
scroll-margin-top: calc(var(--lym-sticky-top, 87px) + var(--lym-toc-height, 56px) + 16px) !important;
}
.lym-pdp-section {
scroll-margin-top: calc(var(--lym-sticky-top, 87px) + 16px) !important;
}
/* 12.2 Point 13b: Remove Dotted Focus Outline on Click, Clean `:focus-visible` Ring */
body .lym-pdp-toc-bar a.lym-pdp-toc-link,
body .lym-pdp-toc-bar a.lym-pdp-toc-link:focus,
body .lym-pdp-toc-bar a.lym-pdp-toc-link:active,
body .lym-brands-az-bar a.lym-brands-az-btn,
body .lym-brands-az-bar a.lym-brands-az-btn:focus,
body .lym-brands-az-bar a.lym-brands-az-btn:active {
outline: 0 !important;
outline-style: none !important;
outline-width: 0 !important;
box-shadow: none !important;
}
body .lym-pdp-toc-bar a.lym-pdp-toc-link:focus-visible,
body .lym-brands-az-bar a.lym-brands-az-btn:focus-visible {
outline: 0 !important;
outline-style: none !important;
outline-width: 0 !important;
box-shadow: 0 0 0 2px var(--lym-primary) !important;
border-radius: 8px !important;
}
/* 12.3 Point 13c: Fix Product Description Specification Tables (`table.lym-specs-table`, `table.shop_attributes`) */
table.lym-specs-table,
table.shop_attributes,
.lym-pdp-section table {
display: table !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
border: 1px solid var(--lym-border) !important;
border-radius: 8px !important;
overflow: hidden !important;
margin: 0 0 20px 0 !important;
font-size: 14px !important;
background: #ffffff !important;
}
table.lym-specs-table thead,
table.shop_attributes thead,
.lym-pdp-section table thead,
table.lym-specs-table tbody,
table.shop_attributes tbody,
.lym-pdp-section table tbody {
display: table-row-group !important;
width: 100% !important;
}
table.lym-specs-table tr,
table.shop_attributes tr,
.lym-pdp-section table tr {
display: table-row !important;
border-bottom: 1px solid var(--lym-border) !important;
height: auto !important;
}
table.lym-specs-table tr:last-child,
table.shop_attributes tr:last-child,
.lym-pdp-section table tr:last-child {
border-bottom: none !important;
}
table.lym-specs-table th,
table.lym-specs-table td,
table.shop_attributes th,
table.shop_attributes td,
.lym-pdp-section table th,
.lym-pdp-section table td {
display: table-cell !important;
padding: 11px 16px !important;
border-bottom: 1px solid var(--lym-border) !important;
vertical-align: top !important;
text-align: left !important;
line-height: 1.55 !important;
height: auto !important;
visibility: visible !important;
opacity: 1 !important;
}
table.lym-specs-table th,
table.shop_attributes th,
.lym-pdp-section table tr > th:first-child {
width: 32% !important;
min-width: 140px !important;
max-width: 35% !important;
background-color: #f8fafc !important;
color: #374151 !important;
font-weight: 600 !important;
border-right: 1px solid var(--lym-border) !important;
}
table.lym-specs-table td,
table.shop_attributes td,
.lym-pdp-section table tr > td {
width: auto !important;
background-color: #ffffff !important;
color: #111827 !important;
font-weight: 400 !important;
font-style: normal !important;
}
.lym-pdp-section table tr > td:first-child:not([colspan]):not(:last-child) {
width: 32% !important;
background-color: #f8fafc !important;
color: #374151 !important;
font-weight: 600 !important;
border-right: 1px solid var(--lym-border) !important;
}
.lym-pdp-section table td p,
table.shop_attributes td p {
margin: 0 !important;
color: #111827 !important;
}
@media (max-width: 640px) {
table.lym-specs-table,
table.shop_attributes,
table.lym-specs-table tbody,
table.shop_attributes tbody {
display: block !important;
width: 100% !important;
}
table.lym-specs-table tr,
table.shop_attributes tr {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
border-bottom: 1px solid var(--lym-border) !important;
}
table.lym-specs-table th,
table.shop_attributes th {
display: block !important;
width: 100% !important;
max-width: 100% !important;
padding: 8px 12px 3px !important;
background-color: #f8fafc !important;
border-right: none !important;
border-bottom: none !important;
font-size: 13px !important;
color: #4b5563 !important;
}
table.lym-specs-table td,
table.shop_attributes td {
display: block !important;
width: 100% !important;
max-width: 100% !important;
padding: 3px 12px 9px !important;
background-color: #ffffff !important;
border-bottom: none !important;
font-size: 14px !important;
color: #111827 !important;
}
}
/* 12.4 Point 17: Single Product Gallery Thumbnail Borders & Gap to TOC Bar */
.single-product .wd-gallery-thumb {
margin-top: 12px !important;
}
.single-product .wd-gallery-thumb .wd-carousel {
padding: 3px 2px 4px !important;
--wd-col-gap: 12px !important;
box-sizing: border-box !important;
}
.single-product .wd-gallery-thumb .wd-carousel-item {
padding-top: 2px !important;
padding-bottom: 2px !important;
box-sizing: border-box !important;
}
.single-product .wd-gallery-thumb .wd-carousel-item img {
width: 100% !important;
aspect-ratio: 1 / 1 !important;
object-fit: contain !important;
background: #ffffff !important;
border: none !important;
box-shadow: inset 0 0 0 1px var(--lym-color-border) !important;
border-radius: 8px !important;
padding: 6px !important;
box-sizing: border-box !important;
display: block !important;
transition: box-shadow 0.15s ease;
}
.single-product .wd-gallery-thumb .wd-carousel-item.wd-thumb-active img,
.single-product .wd-gallery-thumb .wd-carousel-item.swiper-slide-thumb-active img {
box-shadow: inset 0 0 0 2px var(--lym-color-primary) !important;
}
/* Remove ~100px gap and 2 horizontal lines between gallery/summary card and TOC bar (Point 17c & 17d) */
.single-product .product-image-summary-wrap,
.single-product .product-image-summary {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: none !important;
}
.single-product .product-image-summary-inner {
padding: 24px !important;
margin-bottom: 0 !important;
}
.single-product .product-tabs-wrapper {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 32px !important;
margin-bottom: 32px !important;
border-top: none !important;
border-bottom: none !important;
background: transparent !important;
}
.lym-pdp-sections-wrap {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
@media (max-width: 767px) {
.single-product .product-image-summary-inner {
padding: 16px !important;
}
.single-product .product-tabs-wrapper {
margin-top: 24px !important;
margin-bottom: 24px !important;
}
}
/* 12.5 Point 14a, 14b, 14c: Topic Listing Pages Title Band, 24px/16px Gap & Toolbar */
.wd-page-title {
padding: 24px 0 !important;
margin-bottom: 24px !important;
border-bottom: 1px solid var(--lym-border) !important;
background: #ffffff !important;
}
.main-page-wrapper {
padding-top: 0 !important;
margin-top: 0 !important;
padding-bottom: 56px !important;
}
.main-page-wrapper > .container,
.main-page-wrapper > .wd-content-layout,
.site-content,
.entry-content,
.lym-topic-page-grid {
margin-top: 0 !important;
padding-top: 0 !important;
}
.lym-title-row-flash {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
width: 100%;
order: 2;
}
.lym-title-row-flash h1.entry-title,
.lym-title-row-flash h1 {
order: 1 !important;
margin: 0 !important;
}
.lym-title-row-flash .lym-countdown {
order: 2 !important;
margin: 0 !important;
}
.lym-page-title-desc {
order: 3;
margin: 4px 0 0 !important;
font-size: 15px !important;
line-height: 1.5 !important;
color: #4b5563 !important;
}
.lym-shortcode-loop-head.lym-topic-toolbar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
gap: 12px !important;
margin: 0 0 16px 0 !important;
padding: 0 !important;
font-size: 14px !important;
}
.lym-topic-sort-form {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 !important;
flex-shrink: 0;
}
.lym-topic-sort-label {
font-size: 14px;
font-weight: 500;
color: #4b5563;
margin: 0 !important;
white-space: nowrap;
}
.lym-topic-sort-select {
height: 38px !important;
min-height: 38px !important;
padding: 0 32px 0 12px !important;
border-radius: 8px !important;
border: 1px solid var(--lym-border) !important;
background-color: #ffffff !important;
font-size: 14px !important;
font-weight: 500 !important;
color: #111827 !important;
width: auto !important;
cursor: pointer;
}
@media (max-width: 767px) {
.wd-page-title {
padding: 18px 0 !important;
margin-bottom: 16px !important;
}
.lym-page-title-desc {
font-size: 14px !important;
}
.lym-topic-sort-label {
display: none !important;
}
.lym-topic-sort-select {
height: 34px !important;
min-height: 34px !important;
padding: 0 26px 0 10px !important;
font-size: 13px !important;
}
}
/* 12.6 Point 14d, Point 16 & Item 26 (X-016 + X-046): Brands Directory Grouped by Letter (`A-Z` & `0-9`) */
.lym-brands-directory-wrap {
display: flex;
flex-direction: column;
gap: 28px;
padding-bottom: 24px;
}
.lym-brands-az-bar {
background: rgba(255, 255, 255, 0.97) !important;
backdrop-filter: blur(8px);
border: 1px solid var(--lym-color-border-subtle);
border-radius: var(--lym-radius-md);
padding: 12px 16px;
box-shadow: var(--lym-shadow-sm);
}
.lym-brands-az-bar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.lym-brands-search-wrap {
position: relative;
flex: 0 0 260px;
max-width: 100%;
display: flex;
align-items: center;
}
.lym-brands-search-icon {
position: absolute !important;
left: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 16px !important;
height: 16px !important;
color: var(--lym-color-text-muted) !important;
pointer-events: none !important;
z-index: 2 !important;
}
input.lym-brands-search-input,
.lym-brands-search-wrap input.lym-brands-search-input {
width: 100% !important;
height: var(--lym-control-height) !important;
min-height: var(--lym-control-height) !important;
max-height: var(--lym-control-height) !important;
padding: 0 14px 0 42px !important;
padding-left: 42px !important;
border: 1px solid var(--lym-color-border) !important;
border-radius: var(--lym-control-radius) !important;
background: var(--lym-color-surface-subtle) !important;
font-size: 14px !important;
color: var(--lym-color-text) !important;
box-sizing: border-box !important;
text-indent: 0 !important;
}
input.lym-brands-search-input:focus,
.lym-brands-search-wrap input.lym-brands-search-input:focus {
background: #ffffff !important;
border-color: var(--lym-color-primary) !important;
box-shadow: var(--lym-focus-ring) !important;
outline: none !important;
}
.lym-brands-az-nav {
display: flex;
align-items: center;
justify-content: flex-start !important;
gap: 4px;
flex: 1 1 auto;
min-width: 0;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
padding-bottom: 2px;
}
.lym-brands-az-btn,
a.lym-brands-az-btn,
span.lym-brands-az-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
min-width: 36px !important;
height: 36px !important;
min-height: 36px !important;
padding: 0 4px !important;
border-radius: var(--lym-radius-sm) !important;
font-size: 13px !important;
font-weight: 600 !important;
color: var(--lym-color-text) !important;
background: transparent !important;
border: none !important;
text-decoration: none !important;
transition: background-color 0.15s ease, color 0.15s ease !important;
flex-shrink: 0 !important;
box-sizing: border-box !important;
}
.lym-brands-az-btn[data-target-letter="0-9"] {
width: auto !important;
min-width: 42px !important;
padding: 0 8px !important;
}
.lym-brands-az-btn:hover:not(.is-disabled) {
background: var(--lym-color-primary-soft) !important;
color: var(--lym-color-primary) !important;
}
.lym-brands-az-btn.is-active {
background: var(--lym-color-primary) !important;
color: #ffffff !important;
}
.lym-brands-az-btn.is-disabled,
span.lym-brands-az-btn.is-disabled {
background: transparent !important;
background-color: transparent !important;
border: none !important;
color: #cbd5e1 !important;
opacity: 1 !important;
font-weight: 400 !important;
pointer-events: none !important;
cursor: default !important;
}
.lym-brands-sections-list {
display: flex;
flex-direction: column;
gap: 32px;
}
.lym-brand-letter-section {
display: block;
}
.lym-brand-letter-header {
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px solid var(--lym-color-border-subtle);
}
.lym-brand-letter-heading {
margin: 0 !important;
display: flex !important;
align-items: baseline !important;
gap: 10px !important;
line-height: 1 !important;
}
.lym-brand-letter-char {
font-size: var(--lym-fs-xl) !important;
font-weight: 700 !important;
color: var(--lym-color-primary) !important;
line-height: 1 !important;
}
.lym-brand-letter-count {
font-size: var(--lym-fs-sm) !important;
font-weight: 400 !important;
color: var(--lym-color-text-muted) !important;
line-height: 1 !important;
}
.lym-brands-directory-wrap .lym-brands-grid {
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 16px !important;
align-items: stretch !important;
}
.lym-brands-directory-wrap .lym-brand-card {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: left !important;
gap: 12px !important;
padding: 16px !important;
height: 92px !important;
min-height: 92px !important;
max-height: 92px !important;
background: var(--lym-color-surface) !important;
border: 1px solid var(--lym-color-border-subtle) !important;
border-radius: var(--lym-radius-md) !important;
text-decoration: none !important;
box-sizing: border-box !important;
transform: none !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.lym-brands-directory-wrap .lym-brand-card:hover {
transform: none !important;
border-color: var(--lym-color-primary) !important;
box-shadow: var(--lym-shadow-sm) !important;
}
.lym-brand-card__media {
flex: 0 0 48px !important;
width: 48px !important;
height: 48px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.lym-brand-card__avatar,
.lym-brand-card__logo {
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
border-radius: 50% !important;
background: var(--lym-color-primary-soft) !important;
color: var(--lym-color-primary) !important;
font-size: 18px !important;
font-weight: 700 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.lym-brand-card__logo {
background: #ffffff !important;
border: 1px solid var(--lym-color-border-subtle) !important;
padding: 5px !important;
}
.lym-brand-card__logo img {
width: 36px !important;
height: 36px !important;
max-width: 36px !important;
max-height: 36px !important;
object-fit: contain !important;
display: block !important;
}
.lym-brand-card__info {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
min-width: 0 !important;
flex: 1 1 auto !important;
}
.lym-brands-directory-wrap .lym-brand-card__name {
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
color: var(--lym-color-text) !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
margin-bottom: 2px !important;
}
.lym-brands-directory-wrap .lym-brand-card__count {
font-size: 13px !important;
color: var(--lym-color-text-muted) !important;
line-height: 1.2 !important;
margin: 0 !important;
}
.lym-brands-empty-search {
padding: 36px 24px;
text-align: center;
background: #ffffff;
border: 1px solid var(--lym-color-border-subtle);
border-radius: 12px;
font-size: 15px;
font-weight: 600;
color: var(--lym-color-text-secondary);
}
@media (max-width: 1024px) {
.lym-brands-directory-wrap .lym-brands-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.lym-brands-search-wrap {
flex: 1 1 100%;
}
}
@media (max-width: 767px) {
.lym-brands-sections-list {
gap: 24px;
}
.lym-brands-directory-wrap .lym-brands-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.lym-brands-directory-wrap .lym-brand-card {
padding: 12px !important;
gap: 10px !important;
height: 84px !important;
min-height: 84px !important;
max-height: 84px !important;
}
.lym-brand-card__media,
.lym-brand-card__avatar,
.lym-brand-card__logo {
flex: 0 0 40px !important;
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
font-size: 15px !important;
}
.lym-brand-card__logo img {
width: 30px !important;
height: 30px !important;
max-width: 30px !important;
max-height: 30px !important;
}
.lym-brands-directory-wrap .lym-brand-card__name {
font-size: 14px !important;
}
}
.lym-brands-directory-wrap .lym-brand-card.is-search-hidden,
.lym-brands-directory-wrap .lym-brand-letter-section.is-search-hidden {
display: none !important;
}
/* 12.7 Point 19 (P1): Single Pagination Mechanism per Viewport
- Desktop/Tablet (>= 768px): "Hiển thị X–Y trong N sản phẩm" + Numbered pagination (`1 2 3 ...`)
- Mobile (< 768px): "Đã xem Y/N sản phẩm" + progress bar + 48px sentence-case "Xem thêm M sản phẩm" button (numbered links hidden via CSS, preserved in HTML for SEO)
- Spacing: Grid -> Counter 24px -> Pagination/Button 16px -> Footer >= 48px
*/
.products,
.wd-products-element .products,
.blog .wd-blog-holder,
.archive.category .wd-blog-holder,
.archive.tag .wd-blog-holder {
margin-bottom: 0 !important;
}
.lym-pagination-wrap,
.wd-loop-footer {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
width: 100%;
}
.lym-archive-pagination-head {
margin-top: 24px !important;
margin-bottom: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
width: 100%;
}
.lym-pagination-counter {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
text-align: center;
}
.lym-count-progress {
width: 100%;
max-width: 220px;
height: 4px;
background: #e2e8f0;
border-radius: 99px;
overflow: hidden;
margin-top: 6px;
}
.lym-count-progress__bar {
display: block;
height: 100%;
background: var(--lym-primary);
border-radius: 99px;
transition: width 0.25s ease;
}
.lym-load-more-wrap {
margin-top: 16px !important;
margin-bottom: 0 !important;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.lym-ajax-more-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
height: 48px !important;
min-height: 48px !important;
padding: 0 28px !important;
border-radius: 8px !important;
background: #ffffff !important;
color: var(--lym-primary) !important;
border: 1.5px solid var(--lym-primary) !important;
font-size: 15px !important;
font-weight: 600 !important;
text-transform: none !important;
letter-spacing: 0 !important;
text-decoration: none !important;
cursor: pointer;
transition: all 0.18s ease;
box-shadow: none !important;
}
.lym-ajax-more-btn:hover {
background: var(--lym-primary-soft) !important;
color: var(--lym-primary) !important;
}
.lym-ajax-more-btn.is-loading {
pointer-events: none !important;
opacity: 0.75 !important;
}
.lym-ajax-more-btn__spinner {
display: none;
width: 16px;
height: 16px;
border: 2px solid rgba(15, 81, 50, 0.25);
border-top-color: var(--lym-primary);
border-radius: 50%;
animation: lym-spin 0.7s linear infinite;
flex-shrink: 0;
}
.lym-ajax-more-btn.is-loading .lym-ajax-more-btn__spinner {
display: inline-block;
}
@keyframes lym-spin {
to {
transform: rotate(360deg);
}
}
nav.woocommerce-pagination,
nav.wd-pagination,
.wd-loop-footer > nav.wd-pagination,
.loop-pagination {
margin-top: 16px !important;
margin-bottom: 0 !important;
}
@media (min-width: 768px) {
.lym-count-desktop {
display: inline !important;
}
.lym-count-mobile-wrap,
.lym-count-mobile {
display: none !important;
}
.lym-archive-pagination-head .lym-load-more-wrap,
.lym-pagination-wrap .lym-load-more-wrap {
display: none !important;
}
nav.woocommerce-pagination,
nav.wd-pagination,
.wd-loop-footer > nav.wd-pagination {
display: flex !important;
}
}
@media (max-width: 767px) {
.lym-count-desktop,
.shop-loop-head .woocommerce-result-count {
display: none !important;
}
.lym-count-mobile-wrap {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
.lym-count-mobile {
display: inline !important;
}
.lym-archive-pagination-head .lym-load-more-wrap,
.lym-pagination-wrap .lym-load-more-wrap {
display: flex !important;
}
nav.woocommerce-pagination,
nav.wd-pagination,
.wd-loop-footer > nav.wd-pagination,
.wd-loop-footer .wd-pagination {
display: none !important;
}
}
/* ==========================================================================
13. W23 ADDENDUM 8 — CONSOLIDATED LOOP 2 RULES (ITEMS 20–29 & W24-R2)
========================================================================== */
/* --- 13.1 Fixed / Sticky Layer Discipline & PDP Mobile Sticky Bottom Bar (Item 28c, X-043, X-010) --- */
.wd-side-hidden:not(.wd-opened),
.cart-widget-side:not(.wd-opened),
.login-form-side:not(.wd-opened),
.mobile-nav:not(.wd-opened),
.wd-close-side:not(.wd-close-side-opened),
a.wd-skip-links:not(:focus),
#trp-floater-ls,
.trp-language-switcher-container,
nav.trp-language-switcher.trp-floating-switcher,
.trp-floating-switcher,
span.wd-loader,
.wd-loader {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
@media (min-width: 1025px) {
.wd-sticky-btn:not(.wd-sticky-btn-shown) {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
}
@media (max-width: 1024px) {
body:not(.single-product) .wd-sticky-btn:not(.wd-sticky-btn-shown) {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
aside.wd-sidebar:not(.wd-opened),
aside.sidebar-container:not(.wd-opened) {
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
body:has(.wd-close-side-opened) .wd-toolbar,
body:has(.wd-sidebar.wd-opened) .wd-toolbar,
body:has(.wd-side-hidden.wd-opened) .wd-toolbar {
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.wd-close-side.wd-close-side-opened {
left: 300px !important;
width: calc(100vw - 300px) !important;
}
/* Mobile Bottom Toolbar touch targets >= 44x44px */
.wd-toolbar {
height: 56px !important;
min-height: 56px !important;
}
.wd-toolbar > div > a,
.wd-toolbar .wd-toolbar-item > a,
.wd-toolbar a {
min-width: 44px !important;
min-height: 44px !important;
height: 44px !important;
display: inline-flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
/* Single Product Mobile Sticky Bottom Action Bar: always visible (Item 28c / X-043) */
.single-product .wd-toolbar {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.single-product .wd-sticky-btn {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
transform: none !important;
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
height: 60px !important;
min-height: 60px !important;
padding: 8px 12px !important;
z-index: 450 !important;
background: #ffffff !important;
border-top: 1px solid var(--lym-color-border-subtle) !important;
box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08) !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
.single-product .wd-sticky-btn .wd-sticky-btn-container,
.single-product .wd-sticky-btn .container {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
}
.single-product .wd-sticky-btn .wd-sticky-btn-content {
display: none !important;
}
.single-product .wd-sticky-btn .wd-sticky-btn-cart {
width: 100% !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
}
.single-product .wd-sticky-btn .wd-sticky-btn-cart form.cart {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 8px !important;
flex: 1 1 auto !important;
margin: 0 !important;
width: 100% !important;
min-width: 0 !important;
}
.single-product .wd-sticky-btn .quantity,
.single-product .wd-sticky-btn .wd-action-btn,
.single-product .wd-sticky-btn .wd-wishlist-btn,
.single-product .wd-sticky-btn .wd-compare-btn {
display: none !important;
}
.single-product .wd-sticky-btn .single_add_to_cart_button,
.single-product .wd-sticky-btn .wd-buy-now-btn,
.single-product .wd-sticky-btn .lym-zalo-consult-btn {
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 0 10px !important;
font-size: 13px !important;
font-weight: 600 !important;
border-radius: var(--lym-control-radius) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
.single-product .wd-sticky-btn .single_add_to_cart_button,
.single-product .wd-sticky-btn .wd-buy-now-btn {
flex: 1 1 0 !important;
min-width: 0 !important;
}
.single-product .wd-sticky-btn .single_add_to_cart_button {
background-color: var(--lym-color-primary-soft) !important;
color: var(--lym-color-primary) !important;
border: 1.5px solid var(--lym-color-primary) !important;
}
.single-product .wd-sticky-btn .wd-buy-now-btn {
background-color: var(--lym-color-primary) !important;
color: #ffffff !important;
border: 1.5px solid var(--lym-color-primary) !important;
}
.single-product .wd-sticky-btn .lym-single-consult-bar {
display: inline-flex !important;
margin: 0 !important;
flex: 0 0 auto !important;
}
}
/* --- 13.2 Cookie Consent Box (Item 24, X-001, X-037 & Inbox P0) --- */
/* High-specificity selectors (`body #cmplz-cookiebanner-container`) to override Complianz's late-loaded banner-1-optin.css */
:root {
--cmplz_banner_width: 392px !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner,
.cmplz-cookiebanner {
position: fixed !important;
left: 20px !important;
right: auto !important;
bottom: 20px !important;
top: auto !important;
width: 392px !important;
min-width: 0 !important;
max-width: calc(100vw - 40px) !important;
max-height: none !important;
margin: 0 !important;
padding: 14px 16px !important;
z-index: 480 !important;
background-color: var(--lym-color-surface) !important;
border: 1px solid var(--lym-color-border-subtle) !important;
border-radius: var(--lym-radius-lg) !important;
box-shadow: var(--lym-shadow-md) !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
overflow: visible !important;
box-sizing: border-box !important;
animation: none !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show:not(.cmplz-dismissed):not(.cmplz-hidden),
.cmplz-cookiebanner.cmplz-show:not(.cmplz-dismissed):not(.cmplz-hidden) {
display: flex !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-show),
body #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-dismissed,
body #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-hidden,
.cmplz-cookiebanner:not(.cmplz-show),
.cmplz-cookiebanner.cmplz-dismissed,
.cmplz-cookiebanner.cmplz-hidden {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header,
.cmplz-cookiebanner .cmplz-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-logo,
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close,
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider,
body #cmplz-cookiebanner-container .cmplz-cookiebanner > .cmplz-links.cmplz-documents,
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons a.cmplz-manage-options,
.cmplz-cookiebanner .cmplz-logo,
.cmplz-cookiebanner .cmplz-close,
.cmplz-cookiebanner .cmplz-divider,
.cmplz-cookiebanner .cmplz-buttons a.cmplz-manage-options {
display: none !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header .cmplz-title,
.cmplz-cookiebanner .cmplz-title {
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
color: var(--lym-color-text) !important;
margin: 0 !important;
text-transform: none !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body,
.cmplz-cookiebanner .cmplz-body {
margin: 0 !important;
padding: 0 !important;
min-width: 0 !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
overflow: visible !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner .cmplz-message {
width: 100% !important;
font-size: 13px !important;
line-height: 1.42 !important;
color: var(--lym-color-text-secondary) !important;
margin: 0 !important;
display: block !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
overflow: visible !important;
max-height: none !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message a,
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links a {
color: var(--lym-color-primary) !important;
font-weight: 600 !important;
text-decoration: underline !important;
font-size: 12px !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body .cmplz-links {
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories {
display: none !important;
width: 100% !important;
margin-top: 6px !important;
max-height: 180px !important;
overflow-y: auto !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-categories,
body #cmplz-cookiebanner-container .cmplz-cookiebanner.is-prefs-open .cmplz-categories {
display: block !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
align-items: center !important;
gap: 4px 10px !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
padding: 0 12px !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1 !important;
text-transform: none !important;
letter-spacing: 0 !important;
border-radius: var(--lym-control-radius) !important;
white-space: nowrap !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
box-sizing: border-box !important;
margin: 0 !important;
width: 100% !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
order: 1 !important;
grid-column: 1 / 2 !important;
background-color: #ffffff !important;
color: var(--lym-color-primary) !important;
border: 1px solid var(--lym-color-primary) !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover {
background-color: var(--lym-color-primary-soft) !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
order: 2 !important;
grid-column: 2 / 3 !important;
background-color: var(--lym-color-primary) !important;
color: #ffffff !important;
border: 1px solid var(--lym-color-primary) !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
background-color: var(--lym-color-primary-hover) !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
order: 3 !important;
grid-column: 1 / -1 !important;
height: 22px !important;
min-height: 22px !important;
max-height: 22px !important;
padding: 0 6px !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
color: var(--lym-color-text-secondary) !important;
font-size: 13px !important;
font-weight: 500 !important;
text-decoration: underline !important;
width: auto !important;
justify-self: center !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
display: none !important;
order: 3 !important;
grid-column: 1 / -1 !important;
background-color: var(--lym-color-surface-muted) !important;
color: var(--lym-color-text) !important;
border: 1px solid var(--lym-color-border) !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
body #cmplz-cookiebanner-container .cmplz-cookiebanner.is-prefs-open .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
display: none !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons .cmplz-btn.cmplz-save-preferences,
body #cmplz-cookiebanner-container .cmplz-cookiebanner.is-prefs-open .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
display: inline-flex !important;
}
.lym-cookie-more-toggle {
display: none;
}
@media (max-width: 1023px) {
body #cmplz-cookiebanner-container .cmplz-cookiebanner,
.cmplz-cookiebanner {
left: 12px !important;
right: 12px !important;
bottom: calc(var(--lym-bottom-bar-height, 60px) + 8px) !important;
width: auto !important;
min-width: 0 !important;
max-width: calc(100vw - 24px) !important;
padding: 10px 12px !important;
gap: 6px !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header {
display: none !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner:not(.is-msg-expanded) .cmplz-message {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
font-size: 12px !important;
line-height: 1.38 !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner:not(.is-msg-expanded) .cmplz-body .cmplz-links {
display: none !important;
}
.lym-cookie-more-toggle {
display: inline-block !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
color: var(--lym-color-primary) !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
text-decoration: underline !important;
cursor: pointer !important;
align-self: flex-start !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny,
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept,
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
font-size: 13px !important;
}
body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
height: 20px !important;
min-height: 20px !important;
max-height: 20px !important;
font-size: 12px !important;
}
}
/* --- 13.3 Modular Typography Scale & Heading Hierarchy (Item 21, Item 28g, X-003, X-045) --- */
/* 12px tier (--lym-fs-xs: badges, small labels, counters) */
.wd-tools-count,
.lym-hero-slide__tag,
.lym-sub-banner__tag,
.lym-cd-unit small,
.lym-sale-badge,
.lym-product-brand-badge,
.wd-product-brands-links a,
.lym-card-trust-chip,
.lym-payment-badge,
.lym-blog-card__meta,
.lym-sticky-toc-badge,
.wd-toolbar-label,
.wd-header-cats .menu-label,
.widget_price_filter .price_label,
.woocommerce-privacy-policy-text,
.lym-spec-source-badge,
.lym-trust-sub,
.lym-review-verified,
.lym-qv-tpcn-note,
small,
sub,
sup,
figcaption,
figcaption a,
.wp-caption-text,
.wp-caption-text a,
.meta-reply a,
.wd-meta-reply a,
.wd-post-reply a,
a[href*="#respond"],
a[href*="#comments"],
.wd-entry-meta a,
span.wd-replies-count {
font-size: var(--lym-fs-xs) !important;
}
/* 13px tier (--lym-fs-sm: breadcrumbs, metadata, filter counts, old price) */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a,
.lym-bc-sep,
.yoast-breadcrumb,
.rank-math-breadcrumb,
.wd-breadcrumbs,
.wd-breadcrumbs a,
.product_meta,
.product_meta > span,
.product_meta a,
.lym-filter-more-btn,
.widget_layered_nav ul li .count,
.wc-layered-nav-term .count,
.cat-item .count,
del,
del .amount,
.price del,
.price del .amount,
.woocommerce-review-link,
.affwp-form label,
.ff-el-input--label label,
.woocommerce-form-login__rememberme,
.lym-newsletter-consent,
.lym-footer-legal,
.lym-footer-tpcn-disclaimer,
.read-more-section a,
.wd-read-more a,
.tags-list a,
.wd-tags-links a,
.wd-single-footer a,
a.wd-wishlist-remove,
a.wd-wishlist-remove span.wd-action-text {
font-size: var(--lym-fs-sm) !important;
}
/* 14px tier (--lym-fs-md-sm: buttons, inputs, nav links, card titles, footer links) */
.lym-need-pill,
.lym-home-tab-btn,
.lym-pdp-toc-link,
.product-grid-item .wd-entities-title,
.product-grid-item .wd-entities-title a,
.lym-footer-col ul li,
.lym-footer-col ul li a,
.lym-footer-cats-links a,
.woocommerce-result-count,
.lym-count-desktop,
.lym-count-mobile,
select.orderby,
.lym-topic-sort-select,
input.lym-brands-search-input,
.lym-specs-table th,
.lym-specs-table td,
table.shop_attributes th,
table.shop_attributes td,
span.wd-tools-icon,
.wd-tools-element .wd-tools-icon,
button.searchsubmit {
font-size: var(--lym-fs-md-sm) !important;
}
button.searchsubmit > span {
display: none !important;
}
/* 15px tier (--lym-fs-base: prose body text, tables, lists — links inside /
inherit 15px, X-045; excludes .lym-home-wrap so homepage components keep exact b47ec23 sizes) */
.entry-content:not(:has(.lym-home-wrap)) p,
.entry-content:not(:has(.lym-home-wrap)) li,
.entry-content:not(:has(.lym-home-wrap)) td,
.entry-content:not(:has(.lym-home-wrap)) th,
.lym-prose-content p,
.lym-prose-content li,
.lym-prose-content td,
.lym-prose-content th,
.wd-entry-content p,
.wd-entry-content li,
.error404 .page-content p {
font-size: var(--lym-fs-base) !important;
}
.entry-content p a,
.entry-content li a,
.lym-prose-content p a,
.lym-prose-content li a,
.wd-entry-content p a,
.wd-entry-content li a {
font-size: inherit !important;
}
/* 16px tier (product card price, widget titles, footer col titles, h4-h6) */
.lym-section-sub,
.lym-product-card__price,
.product-grid-item .price,
.product-grid-item .price .amount,
.product-grid-item .price ins .amount,
.widget-title,
.widgettitle,
.lym-footer-col__title,
.lym-footer-cats-row__title,
.lym-faq-item summary,
.lym-policy-card h3,
.lym-guide-step h3,
.woocommerce-MyAccount-navigation ul li a,
.comment-reply-title,
#reply-title,
.cr-summary-total,
a.remove,
.woocommerce-cart-form__cart-item a.remove,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.lym-prose-content h4,
.lym-prose-content h5,
.lym-prose-content h6,
h4,
h5,
h6 {
font-size: 16px !important;
}
/* 18px tier (--lym-fs-md: h3 headings in prose/cards, sub-banner titles, cart/checkout totals) */
.lym-sub-banner__title,
h3.lym-sub-banner__title,
.entry-content:not(:has(.lym-home-wrap)) h3,
.lym-prose-content h3,
.wd-entry-content h3,
h3:not(.lym-commitment-title):not(.lym-sub-banner__title),
.lym-blog-card__title,
.lym-blog-card__title a,
.wd-checkout-steps li,
.wd-checkout-steps li a,
.wd-checkout-steps li span,
.cart_totals .amount,
.cart_totals .woocommerce-Price-currencySymbol,
.shop_table .order-total .amount,
.shop_table .order-total .woocommerce-Price-currencySymbol,
tr.order-total .amount,
tr.order-total .woocommerce-Price-currencySymbol {
font-size: var(--lym-fs-md) !important;
}
/* 20px tier (--lym-fs-lg: section titles, PDP price, form section titles, h2 in prose) */
.lym-section-title,
.lym-pdp-section__title,
.lym-flash-title,
.lym-spotlight-title,
.lym-newsletter-title,
.single-product div.product .summary .price,
.single-product div.product .summary .price .amount,
.single-product div.product .summary .price ins .amount,
.entry-content:not(:has(.lym-home-wrap)) h2,
.lym-prose-content h2,
.wd-entry-content h2,
h2:not(.lym-hero-title),
span.post-date-day,
.wd-post-date .post-date-day,
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading,
.u-column1 h2,
.u-column2 h2,
.wd-login-title,
.affwp-form legend,
h2.wd-el-title,
.wd-el-title.title.element-title {
font-size: var(--lym-fs-lg) !important;
}
/* 24px tier (--lym-fs-xl: page H1, PDP H1, blog post H1, related products H2) */
.wd-page-title .entry-title,
.page-title .entry-title,
h1.entry-title,
h1.page-title,
h1.wd-post-title,
.wd-post-title.title,
.single-product h1.product_title,
.entry-content h1,
.lym-prose-content h1,
h1,
.related.products > h2,
.upsells.products > h2,
.cross-sells > h2,
.error404 .page-content h1,
.error404 .page-header .title {
font-size: var(--lym-fs-xl) !important;
}
/* 28px tier (--lym-fs-2xl: Hero H1 desktop) */
.lym-hero-title,
.lym-hero-slide__title {
font-size: var(--lym-fs-2xl) !important;
}
@media (max-width: 767px) {
.lym-hero-title,
.lym-hero-slide__title,
.wd-page-title .entry-title,
.page-title .entry-title,
h1.entry-title,
h1.page-title,
h1.wd-post-title,
.wd-post-title.title,
.single-product h1.product_title {
font-size: 20px !important;
line-height: 1.35 !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
}
}
/* --- 13.4 Scoped Table Headers & Component Colors (Item 28, X-008, Inbox Line 12) --- */
button.cr-qna-ask-button,
.cr-qna-ask-button {
background-color: var(--lym-color-primary) !important;
color: #ffffff !important;
}
.lym-hero-slide__cta,
.lym-btn-accent {
background-color: var(--lym-color-accent) !important;
color: #ffffff !important;
border-color: var(--lym-color-accent) !important;
}
.lym-hero-slide__cta:hover,
.lym-btn-accent:hover {
background-color: var(--lym-color-accent-hover) !important;
color: #ffffff !important;
}
.lym-flash-header {
background-color: transparent !important;
}
.lym-flash-title,
.lym-countdown__sep {
color: var(--lym-color-danger-dark) !important;
}
.lym-countdown__label {
color: var(--lym-color-text-secondary) !important;
}
.lym-flash-badge,
.lym-cd-unit,
.lym-cd-box,
.lym-countdown-item,
.lym-sale-badge,
.product-labels .product-label.onsale,
.onsale {
background-color: var(--lym-color-danger-dark) !important;
color: #ffffff !important;
}
.cr-voting-upvote-count,
.cr-voting-downvote-count,
.cr-voting-a {
color: var(--lym-color-primary) !important;
font-size: 12px !important;
}
.lym-filter-count {
color: var(--lym-color-text-secondary) !important;
font-size: 12px !important;
}
.wd-post-cat,
.wd-post-cat a,
.meta-post-categories,
.meta-post-categories a,
.wd-post-cat-bg {
background-color: var(--lym-color-primary) !important;
color: #ffffff !important;
}
/* Scoped table headers: prose policy tables get primary header; WooCommerce cart/checkout tables get light surface (fixes X-008 regression) */
.entry-content table:not(.shop_table):not(.woocommerce-checkout-review-order-table):not(.lym-specs-table):not(.shop_attributes) thead th {
background-color: var(--lym-color-primary) !important;
color: #ffffff !important;
}
table.shop_table th,
table.shop_table thead th,
.cart_totals table.shop_table th,
.woocommerce-checkout-review-order-table th,
#order_review table.shop_table th {
background-color: var(--lym-color-surface-subtle) !important;
color: var(--lym-color-text) !important;
font-weight: 600 !important;
}
.lym-specs-table th,
table.shop_attributes th {
background-color: var(--lym-color-surface-muted) !important;
color: var(--lym-color-text) !important;
}
.lym-specs-table td,
table.shop_attributes td {
background-color: #ffffff !important;
color: var(--lym-color-text-secondary) !important;
}
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a,
.lym-bc-sep,
.wd-breadcrumbs,
.wd-breadcrumbs a,
.product_meta,
.product_meta > span,
.lym-brand-card__count,
.lym-brand-letter-count,
.lym-blog-card__meta,
.lym-count-desktop,
.lym-count-mobile,
.woocommerce-result-count,
del,
del .amount,
.price del,
.price del .amount,
.widget_layered_nav ul li .count,
.wc-layered-nav-term .count,
.cat-item .count,
.wd-entry-meta,
.wd-entry-meta span,
.wd-entry-meta a,
.wd-entry-meta-list,
.wd-entry-meta-list span,
.wd-entry-meta-list a,
.wd-post .meta-author,
.wd-post .meta-author span,
.wd-post .meta-author a,
a.author,
.meta-author,
.meta-author *,
span.optional,
.woocommerce form .form-row .optional {
color: var(--lym-color-text-muted) !important;
}
.woocommerce-notice--success,
p.woocommerce-thankyou-order-received {
color: var(--lym-color-primary) !important;
}
/* --- 13.5 Strict 8px Grid Vertical Section Gaps & Restored Card Surfaces (Item 28d, X-007, X-030, X-040) --- */
.lym-home-wrap {
gap: 24px !important;
}
@media (max-width: 767px) {
.lym-home-wrap {
gap: 16px !important;
}
}
.site-content,
div.wd-content-area.site-content {
gap: 24px !important;
}
.lym-home-wrap > *,
.site-content > *,
.entry-content > * {
margin-top: 0 !important;
margin-bottom: 24px !important;
}
.lym-home-wrap > *,
body.single-post .site-content > div.wd-single-footer,
div.wd-single-footer,
body.single-post .site-content > #comments,
#comments.comments-area,
#comments {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.lym-home-wrap > *:last-child,
.site-content > *:last-child,
.entry-content > *:last-child {
margin-bottom: 0 !important;
}
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > table,
.entry-content > blockquote,
.entry-content > .lym-policy-draft-notice,
.lym-prose-content > * {
margin-top: 0 !important;
margin-bottom: 16px !important;
}
.lym-prose-content > *:last-child {
margin-bottom: 0 !important;
}
.wd-products-element {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Restore surface background, border, radius & padding on .lym-section-card, .lym-flash-sale-box, .term-description (fixes X-030 & X-040) */
.lym-section-card,
.lym-empty-recommendations,
.term-description {
background-color: var(--lym-color-surface) !important;
border: 1px solid var(--lym-color-border-subtle) !important;
border-radius: var(--lym-radius-lg) !important;
padding: var(--lym-space-6) !important;
box-shadow: var(--lym-shadow-sm) !important;
}
.term-description {
margin-top: 24px !important;
margin-bottom: 0 !important;
}
.lym-flash-sale-box {
background: linear-gradient(180deg, #fff7ed 0%, #ffffff 35%) !important;
border: 2px solid #fdba74 !important;
border-radius: var(--lym-radius-lg) !important;
padding: var(--lym-space-6) !important;
box-shadow: var(--lym-shadow-sm) !important;
}
@media (max-width: 767px) {
.lym-section-card,
.lym-empty-recommendations,
.term-description,
.lym-flash-sale-box {
padding: var(--lym-space-4) !important;
}
}
.lym-pdp-top-breadcrumb {
margin-top: 0 !important;
margin-bottom: 16px !important;
}
.entry-content > .lym-home-section {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.entry-content > .lym-empty-recommendations {
margin-top: 32px !important;
margin-bottom: 0 !important;
}
.error404 .site-content > header.page-header {
margin-top: 0 !important;
margin-bottom: 24px !important;
}
.error404 .site-content > div.page-content {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* --- 13.6 Left-Edge Container Alignment Discipline (X-008) --- */
.whb-general-header .container,
.whb-sticky-header .container,
.whb-top-bar .container,
.whb-header-bottom .container,
.whb-row > .container,
.wd-page-title .container,
.wd-page-title > .container,
.main-page-wrapper > .container,
.main-page-wrapper > .wd-content-layout,
.wd-footer .container,
.wd-footer > .container,
.single-product .main-page-wrapper > .wd-content-layout,
.single-product .main-page-wrapper > .container {
width: calc(100% - 32px) !important;
max-width: 1224px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.main-page-wrapper > .container > .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
.site-content,
.site-content .container,
.site-content .wd-content-area > .container,
.single-product .site-content,
.single-product .site-content .container,
.woocommerce-breadcrumb,
.lym-pdp-top-breadcrumb .woocommerce-breadcrumb,
.lym-page-shell {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
}
/* --- 13.7 Sitewide Form Controls, 20x20px Checkboxes & Button Normalization (Item 21c, Item 23, Item 28b, X-010, X-025, X-042, X-044) --- */
/* Shared input/select tokens across WooCommerce, Fluent Forms, AffiliateWP, Search, Tracking */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
select,
.input-text,
.fluentform input.ff-el-form-control:not([type="checkbox"]):not([type="radio"]),
.fluentform select.ff-el-form-control,
#affwp-login-form input:not([type="checkbox"]):not([type="submit"]),
#affwp-register-form input:not([type="checkbox"]):not([type="submit"]) {
height: var(--lym-control-height) !important;
min-height: var(--lym-control-height) !important;
padding: 0 var(--lym-control-padding-x) !important;
border: var(--lym-control-border) !important;
border-radius: var(--lym-control-radius) !important;
background-color: #ffffff !important;
color: var(--lym-color-text) !important;
font-family: var(--lym-font-sans) !important;
font-size: 14px !important;
box-sizing: border-box !important;
}
input.lym-brands-search-input,
.lym-brands-search-wrap input[type="search"].lym-brands-search-input {
padding: 0 14px 0 42px !important;
padding-left: 42px !important;
padding-right: 14px !important;
}
.lym-brands-az-btn.is-disabled,
span.lym-brands-az-btn.is-disabled {
background: transparent !important;
color: #cbd5e1 !important;
opacity: 1 !important;
}
textarea,
.fluentform textarea.ff-el-form-control {
min-height: 112px !important;
padding: 12px var(--lym-control-padding-x) !important;
border: var(--lym-control-border) !important;
border-radius: var(--lym-control-radius) !important;
background-color: #ffffff !important;
color: var(--lym-color-text) !important;
font-family: var(--lym-font-sans) !important;
font-size: 14px !important;
box-sizing: border-box !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
border-color: var(--lym-color-primary) !important;
box-shadow: var(--lym-focus-ring) !important;
outline: none !important;
}
/* Checkboxes & Radio buttons: strictly 20x20px inside >= 44px clickable label (Item 28b / X-042) */
input[type="checkbox"],
input[type="radio"],
input.ff-el-form-check-input,
input[id^="pdpd_consent_"],
input[id^="data_subject_confirm_"],
input[name="lym_newsletter_pdpd"],
input#rememberme,
input.woocommerce-form__input-checkbox {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
max-width: 20px !important;
max-height: 20px !important;
flex: 0 0 20px !important;
accent-color: var(--lym-color-primary) !important;
cursor: pointer !important;
margin: 0 8px 0 0 !important;
padding: 0 !important;
opacity: 1 !important;
position: static !important;
vertical-align: middle !important;
}
.ff-el-form-check-label,
.woocommerce-form__label-for-checkbox,
.affwp-form label:has(input[type="checkbox"]),
.lym-pdpd-consent-wrapper label {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
min-height: 44px !important;
cursor: pointer !important;
}
/* Sentence case & height discipline on all buttons (Item 23b) */
button,
.btn,
.button,
input[type="submit"],
input[type="button"],
a.button {
text-transform: none !important;
letter-spacing: 0 !important;
font-family: var(--lym-font-sans) !important;
}
/* Same-row input + button height alignment (0px diff — Item 23d & X-025) */
form.searchform input.s,
.wd-search-form input.s {
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding-right: 52px !important;
box-sizing: border-box !important;
}
form.searchform button.searchsubmit,
.wd-search-form button.searchsubmit {
top: 0 !important;
bottom: 0 !important;
right: 0 !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
width: 48px !important;
min-width: 48px !important;
margin: 0 !important;
border-radius: 0 var(--lym-control-radius) var(--lym-control-radius) 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Cart Coupon Row & Update Cart (Item 23d) */
.woocommerce-cart .coupon {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: nowrap !important;
}
.woocommerce-cart .coupon input#coupon_code,
.woocommerce-cart .coupon button[name="apply_coupon"],
.woocommerce-cart button[name="update_cart"] {
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* Password input + show-password-input eye toggle (0px diff) */
button.show-password-input,
.woocommerce-form-login button.show-password-input,
.password-input button.show-password-input {
top: 0 !important;
bottom: 0 !important;
right: 0 !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
width: 44px !important;
min-width: 44px !important;
margin: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Scoped icon-only 40x40 action buttons ONLY on product cards, while PDP wishlist button auto-fits text (fixes X-044) */
.wd-product .wd-action-btn.wd-style-icon > a,
.wd-product .wd-quick-view-btn > a,
.wd-product .wd-wishlist-btn > a {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.single-product .summary-inner .wd-action-btn > a,
.single-product .summary-inner .wd-wishlist-btn > a {
width: auto !important;
min-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
padding: 0 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
}
.single-product .summary-inner .wd-action-btn > a span,
.single-product .summary-inner .wd-wishlist-btn > a span {
font-size: 14px !important;
white-space: nowrap !important;
}
button.lym-filter-more-btn {
min-height: 44px !important;
min-width: 120px !important;
padding: 8px 12px !important;
display: inline-flex !important;
align-items: center !important;
}
.woocommerce-ordering select.orderby,
form.woocommerce-ordering select.orderby,
select.orderby,
.lym-topic-sort-select,
select.cr-ajax-reviews-sort,
input.cr-input-text {
min-width: 140px !important;
height: 44px !important;
min-height: 44px !important;
padding: 0 28px 0 12px !important;
text-indent: 0 !important;
box-sizing: border-box !important;
}
/* Mobile archive toolbar: keep "Bộ lọc tìm kiếm" button readable & un-crushed (fixes X-044) */
@media (max-width: 1024px) {
.shop-loop-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
gap: 12px !important;
max-width: 100% !important;
}
.shop-loop-head .wd-show-sidebar-btn,
.wd-show-sidebar-btn > a,
div.wd-show-sidebar-btn {
width: auto !important;
min-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
padding: 0 12px !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
form.woocommerce-ordering,
.woocommerce-ordering select.orderby,
form.woocommerce-ordering select.orderby,
.shop-loop-head select.orderby,
form.woocommerce-ordering.wd-style-icon,
form.woocommerce-ordering.wd-style-icon select.orderby {
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
padding: 0 !important;
}
}
.quantity {
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
}
.quantity .minus,
.quantity .plus,
.quantity button.minus,
.quantity button.plus,
button.minus.btn,
button.plus.btn,
.quantity input.minus,
.quantity input.plus {
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.quantity input.qty {
width: 48px !important;
min-width: 48px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 0 4px !important;
text-align: center !important;
box-sizing: border-box !important;
}
.single-product .summary-inner .quantity,
.single-product .summary-inner .quantity .minus,
.single-product .summary-inner .quantity .plus,
.single-product .summary-inner .quantity button.minus,
.single-product .summary-inner .quantity button.plus,
.single-product .summary-inner .quantity input.qty,
.single-product .summary-inner form.cart button.single_add_to_cart_button,
.single-product .summary-inner #wd-add-to-cart,
.single-product .summary-inner .lym-zalo-consult-btn {
height: 48px !important;
min-height: 48px !important;
max-height: 48px !important;
box-sizing: border-box !important;
}
form.cart button.single_add_to_cart_button,
.lym-zalo-consult-btn,
a.button.wc-forward,
a.btn.create-account-button {
min-height: 44px !important;
height: 44px !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
/* Primary & CTA buttons */
.fluentform button.ff-btn-submit,
.affwp-form button,
.affwp-form input[type="submit"],
.woocommerce-form-login button.woocommerce-form-login__submit,
.woocommerce-form-register button.woocommerce-form-register__submit {
height: 48px !important;
min-height: 48px !important;
padding: 0 24px !important;
background-color: var(--lym-color-primary) !important;
color: #ffffff !important;
border: 1px solid var(--lym-color-primary) !important;
border-radius: var(--lym-control-radius) !important;
font-size: 15px !important;
font-weight: 600 !important;
cursor: pointer !important;
box-sizing: border-box !important;
}
button.button.btn.btn-accent,
button.woocommerce-Button.woocommerce-button.btn,
button.wp-block-search__button.wp-element-button,
a.checkout-button.button.alt,
#place_order {
height: 48px !important;
min-height: 48px !important;
background-color: var(--lym-color-accent) !important;
color: #ffffff !important;
border: 1px solid var(--lym-color-accent) !important;
border-radius: var(--lym-control-radius) !important;
font-size: 15px !important;
font-weight: 700 !important;
}
a.button.wc-forward,
.woocommerce-message .button,
.woocommerce-info .button {
background-color: var(--lym-color-primary) !important;
color: #ffffff !important;
border-radius: var(--lym-control-radius) !important;
}
/* --- 13.8 Remove Cheap Hover Transforms & Decorative Animations Sitewide (Item 25) --- */
.wd-product .product-wrapper:hover,
.wd-product .wd-product-wrapper:hover,
.wd-product:hover .product-element-top img,
.lym-cat-icon-card:hover,
.lym-brand-card:hover,
.lym-blog-card:hover,
.wd-post .wd-post-inner:hover,
.lym-sub-banner:hover,
.lym-hero-btn:hover,
.lym-need-pill:hover,
.btn:hover,
.button:hover,
button:hover {
transform: none !important;
}
/* --- 13.9 PDP Overflow Defense, Gallery Zoom & Quick View TPCN Note (X-013, X-026, X-035, Inbox Line 19) --- */
.single-product .summary-inner,
.single-product .lym-pdp-sections,
.single-product .lym-pdp-section,
.single-product .lym-desc-collapsible {
max-width: 100% !important;
overflow-x: clip !important;
}
.single-product .wd-show-product-gallery-wrap {
left: 14px !important;
right: auto !important;
bottom: 14px !important;
z-index: 15 !important;
}
.wd-show-product-gallery-wrap a {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
padding: 0 !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.94) !important;
border: 1px solid var(--lym-color-border) !important;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1) !important;
color: var(--lym-color-text) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.wd-show-product-gallery-wrap a .wd-action-text {
display: none !important;
}
.wd-show-product-gallery-wrap a .wd-action-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 16px !important;
line-height: 1 !important;
color: var(--lym-color-text) !important;
}
.lym-qv-tpcn-note {
margin-top: 12px !important;
padding: 8px 12px !important;
background-color: #fffbeb !important;
border: 1px solid #fde68a !important;
border-radius: 8px !important;
color: #92400e !important;
line-height: 1.45 !important;
display: flex !important;
align-items: flex-start !important;
gap: 6px !important;
}
/* --- 13.10 Logo Aspect Ratio & Product Card Image Contain Discipline (Item 27, X-018, X-026) --- */
img,
.wd-main-logo img,
.lym-footer-col img,
img[src*="logo-lym"] {
object-fit: contain !important;
}
.lym-blog-card__thumb img,
.wd-post .wd-post-thumb img,
.lym-cat-icon-circle img {
object-fit: cover !important;
}
/* --- 13.11 Desktop Checkout 2-Column Layout, Affiliate Partner 2-Column Portal, My Account & 404 (Item 20, Item 28a, X-032, X-033, X-034, X-038) --- */
/* Checkout steps bar: never wrap vertically */
.wd-checkout-steps ul {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 8px 16px !important;
}
.wd-checkout-steps li {
white-space: nowrap !important;
}
/* Desktop Checkout: 2 full-width columns (7/12 Customer Details + 5/12 Order Review) inside form.checkout (fixes X-038 P0) */
@media (min-width: 992px) {
.woocommerce-checkout form.checkout,
.woocommerce-checkout form.checkout.row,
.woocommerce-checkout form.checkout > .row {
display: grid !important;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important;
column-gap: 32px !important;
row-gap: 16px !important;
align-items: start !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.woocommerce-checkout form.checkout::before,
.woocommerce-checkout form.checkout::after,
.woocommerce-checkout form.checkout > .row::before,
.woocommerce-checkout form.checkout > .row::after {
display: none !important;
}
.woocommerce-checkout form.checkout > *:not(#customer_details):not(.checkout-order-review):not(.row) {
grid-column: 1 / -1 !important;
}
.woocommerce-checkout form.checkout > .row {
grid-column: 1 / -1 !important;
}
.woocommerce-checkout form.checkout #customer_details {
grid-column: 1 / 2 !important;
}
.woocommerce-checkout form.checkout .checkout-order-review {
grid-column: 2 / 3 !important;
}
.woocommerce-checkout form.checkout #customer_details,
.woocommerce-checkout form.checkout .checkout-order-review {
width: 100% !important;
max-width: 100% !important;
flex: none !important;
float: none !important;
margin: 0 !important;
padding: 24px !important;
background-color: var(--lym-color-surface) !important;
border: 1px solid var(--lym-color-border-subtle) !important;
border-radius: var(--lym-radius-lg) !important;
box-shadow: var(--lym-shadow-sm) !important;
box-sizing: border-box !important;
}
.woocommerce-checkout form.checkout #order_review {
width: 100% !important;
max-width: 100% !important;
position: static !important;
}
}
@media (max-width: 991px) {
.woocommerce-checkout form.checkout,
.woocommerce-checkout form.checkout > .row {
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.woocommerce-checkout form.checkout #customer_details,
.woocommerce-checkout form.checkout .checkout-order-review {
width: 100% !important;
max-width: 100% !important;
padding: 16px !important;
background-color: var(--lym-color-surface) !important;
border: 1px solid var(--lym-color-border-subtle) !important;
border-radius: var(--lym-radius-md) !important;
box-sizing: border-box !important;
}
}
/* Affiliate Partner Page (`/doi-tac-affiliate/`) 2-Column Login + Register Layout (Item 20 & X-033) */
.lym-affwp-auth-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 32px !important;
align-items: start !important;
width: 100% !important;
margin: 0 0 24px 0 !important;
}
.affwp-form,
#affwp-register-form,
#affwp-login-form,
form[id^="affwp-"] {
background-color: var(--lym-color-surface) !important;
border: 1px solid var(--lym-color-border-subtle) !important;
border-radius: var(--lym-radius-lg) !important;
padding: 28px !important;
box-shadow: var(--lym-shadow-sm) !important;
margin: 0 !important;
box-sizing: border-box !important;
}
.affwp-form fieldset {
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
.affwp-form legend {
font-size: var(--lym-fs-lg) !important;
font-weight: 700 !important;
color: var(--lym-color-text) !important;
margin-bottom: 16px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid var(--lym-color-border-subtle) !important;
width: 100% !important;
display: block !important;
}
.affwp-form p {
margin: 0 0 16px 0 !important;
}
.affwp-form label {
display: block !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--lym-color-text) !important;
margin-bottom: 6px !important;
}
.affwp-form label.affwp-label-checkbox-multiple {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
margin: 4px 16px 4px 0 !important;
font-weight: 500 !important;
cursor: pointer !important;
}
.affwp-form input[type="checkbox"] + label.affwp-field-label {
display: inline !important;
font-weight: 400 !important;
font-size: 13px !important;
line-height: 1.5 !important;
}
@media (max-width: 991px) {
.lym-affwp-auth-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.affwp-form,
#affwp-register-form,
#affwp-login-form {
padding: 20px 16px !important;
}
}
/* 404 Centered Compact Card & Popular Category Pills (X-034) */
.error404 .site-content {
min-height: 55vh !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 32px 16px !important;
}
.error404 .page-content {
max-width: 640px !important;
width: 100% !important;
margin: 0 auto !important;
background-color: #ffffff !important;
border: 1px solid var(--lym-color-border-subtle) !important;
border-radius: 16px !important;
padding: 32px 24px !important;
box-shadow: var(--lym-shadow-sm) !important;
}
.lym-404-actions {
margin-top: 24px !important;
padding-top: 20px !important;
border-top: 1px solid var(--lym-color-border-subtle) !important;
}
.lym-404-cats-label {
font-size: 14px !important;
font-weight: 600 !important;
color: var(--lym-color-text-secondary) !important;
margin-bottom: 12px !important;
}
.lym-404-cats-pills {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 8px !important;
margin-bottom: 20px !important;
}
.lym-404-cat-pill {
display: inline-flex !important;
align-items: center !important;
min-height: 40px !important;
padding: 6px 14px !important;
background-color: var(--lym-color-surface-muted) !important;
color: var(--lym-color-primary) !important;
border: 1px solid var(--lym-color-border) !important;
border-radius: 999px !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
}
.lym-404-cat-pill:hover {
background-color: var(--lym-color-primary) !important;
color: #ffffff !important;
border-color: var(--lym-color-primary) !important;
}
.lym-404-cta-row {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 12px !important;
}
.lym-404-home-btn,
.lym-404-shop-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 44px !important;
padding: 0 24px !important;
border-radius: 8px !important;
font-size: 14px !important;
font-weight: 700 !important;
text-decoration: none !important;
}
.lym-404-home-btn {
background-color: var(--lym-color-primary) !important;
color: #ffffff !important;
}
.lym-404-shop-btn {
background-color: var(--lym-color-surface-muted) !important;
color: var(--lym-color-primary) !important;
border: 1px solid var(--lym-color-primary) !important;
}
/* --- 13.12 Single Product Page (PDP) Refinements (Inbox Lines 17–35) --- */
/* 1. PDP Top Breadcrumb (Inbox Line 17: 16px desktop / 12px mobile below green nav bar, 16px above product card, 14px 1-line truncated) */
body.single-product .single-breadcrumbs-wrapper {
display: none !important;
}
body.single-product .site-content,
body.single-product div.wd-content-area.site-content {
gap: 0 !important;
}
body.single-product .lym-pdp-top-breadcrumb,
body.single-product .site-content > .lym-pdp-top-breadcrumb {
margin-top: 16px !important;
margin-bottom: 8px !important;
padding: 0 !important;
}
body.single-product .woocommerce-notices-wrapper,
body.single-product .site-content > .woocommerce-notices-wrapper {
margin: 0 !important;
padding: 0 !important;
}
body.single-product .woocommerce-notices-wrapper:not(:has(*)),
body.single-product .site-content > .woocommerce-notices-wrapper:not(:has(*)) {
display: none !important;
}
body.single-product div.product,
body.single-product .site-content > div.product,
body.single-product .product-image-summary-wrap,
body.single-product .product-image-summary,
body.single-product .product-image-summary-inner,
body.single-product .product-image-summary-inner > .row,
body.single-product .product-images,
body.single-product .summary.entry-summary {
margin-top: 0 !important;
padding-top: 0 !important;
}
body.single-product .product-images {
padding: 20px !important;
}
body.single-product .summary.entry-summary {
padding: 24px !important;
}
body.single-product .lym-pdp-top-breadcrumb .woocommerce-breadcrumb {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 6px !important;
font-size: 14px !important;
line-height: 1.4 !important;
color: var(--lym-color-text-secondary) !important;
white-space: nowrap !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
body.single-product .lym-pdp-top-breadcrumb .woocommerce-breadcrumb a {
color: var(--lym-color-text-secondary) !important;
font-size: 14px !important;
font-weight: 500 !important;
flex-shrink: 0 !important;
text-decoration: none !important;
}
body.single-product .lym-pdp-top-breadcrumb .woocommerce-breadcrumb a:hover {
color: var(--lym-color-primary) !important;
}
body.single-product .lym-pdp-top-breadcrumb .woocommerce-breadcrumb .lym-bc-sep {
color: var(--lym-color-text-muted) !important;
font-size: 13px !important;
flex-shrink: 0 !important;
}
body.single-product .lym-pdp-top-breadcrumb .woocommerce-breadcrumb .wd-last {
flex: 0 1 auto !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
color: var(--lym-color-text) !important;
font-size: 14px !important;
font-weight: 500 !important;
}
@media (max-width: 767px) {
body.single-product .lym-pdp-top-breadcrumb {
margin-top: 12px !important;
margin-bottom: 8px !important;
}
body.single-product .lym-pdp-top-breadcrumb .woocommerce-breadcrumb {
overflow-x: auto !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch;
}
body.single-product .lym-pdp-top-breadcrumb .woocommerce-breadcrumb::-webkit-scrollbar {
display: none !important;
}
body.single-product .lym-pdp-top-breadcrumb .woocommerce-breadcrumb .wd-last {
max-width: 58vw !important;
}
}
/* 2. PDP 2-Column 50/50 Layout (gap 40px), Gallery Snug Frame & Sticky Column (Inbox Lines 18–20 & Line 37) */
.single-product .product-image-summary-wrap,
.single-product .product-image-summary {
width: 100% !important;
max-width: 100% !important;
}
.single-product .product-image-summary-inner {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin-bottom: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.single-product .product-images {
background: #ffffff !important;
border: 1px solid var(--lym-color-border-subtle) !important;
border-radius: var(--lym-radius-lg) !important;
padding: 20px !important;
box-shadow: var(--lym-shadow-sm) !important;
align-self: start !important;
height: auto !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.single-product .summary.entry-summary {
background: #ffffff !important;
border: 1px solid var(--lym-color-border-subtle) !important;
border-radius: var(--lym-radius-lg) !important;
padding: 24px !important;
box-shadow: var(--lym-shadow-sm) !important;
align-self: start !important;
height: auto !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
@media (min-width: 1025px) {
.single-product .product-image-summary-inner,
.single-product .product-image-summary-inner.wd-grid-g,
.single-product .product-image-summary-inner > .row,
.single-product .product-image-summary > .row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 40px !important;
align-items: start !important;
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.single-product .product-images,
.single-product .summary.entry-summary,
.single-product .product-image-summary-inner > .product-images,
.single-product .product-image-summary-inner > .summary.entry-summary {
grid-column: span 1 !important;
flex: 1 1 0% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
align-self: start !important;
margin: 0 !important;
}
.single-product .product-images {
position: sticky !important;
top: calc(var(--lym-sticky-top, 87px) + 16px) !important;
}
.single-product .summary.entry-summary {
position: static !important;
top: auto !important;
}
}
@media (max-width: 1024px) {
.single-product .product-image-summary-inner,
.single-product .product-image-summary-inner.wd-grid-g {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
.single-product .product-images {
padding: 16px !important;
margin-bottom: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.single-product .summary.entry-summary {
padding: 16px !important;
width: 100% !important;
max-width: 100% !important;
}
}
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery > .wd-gallery-images,
.single-product .woocommerce-product-gallery > .wd-gallery-thumb {
height: auto !important;
width: 100% !important;
max-width: 100% !important;
}
.single-product .woocommerce-product-gallery .wd-gallery-images {
margin-bottom: 12px !important;
}
.single-product .woocommerce-product-gallery__image {
aspect-ratio: 1 / 1 !important;
max-height: none !important;
height: auto !important;
}
.single-product .woocommerce-product-gallery__image img {
max-height: none !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
.single-product .wd-gallery-thumb {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* 3. PDP Classic Tab Bar (Inbox Lines 21–24: non-sticky, classic underline tab style, smooth scroll on click) */
.single-product .lym-pdp-toc-bar {
position: static !important;
top: auto !important;
z-index: auto !important;
background: transparent !important;
backdrop-filter: none !important;
border: none !important;
border-bottom: 2px solid var(--lym-color-border) !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
.single-product .lym-pdp-toc-bar__inner {
display: flex !important;
align-items: center !important;
gap: 28px !important;
overflow-x: auto !important;
white-space: nowrap !important;
scrollbar-width: none !important;
}
.single-product .lym-pdp-toc-bar__inner::-webkit-scrollbar {
display: none !important;
}
.single-product .lym-pdp-toc-link {
display: inline-flex !important;
align-items: center !important;
background: transparent !important;
border: none !important;
border-bottom: 3px solid transparent !important;
border-radius: 0 !important;
padding: 12px 2px !important;
margin-bottom: -2px !important;
font-size: 16px !important;
font-weight: 600 !important;
color: var(--lym-color-text-secondary) !important;
text-decoration: none !important;
transition: color 0.15s ease, border-color 0.15s ease !important;
}
.single-product .lym-pdp-toc-link:hover {
background: transparent !important;
color: var(--lym-color-primary) !important;
}
.single-product .lym-pdp-toc-link.is-active {
background: transparent !important;
color: var(--lym-color-primary) !important;
border-bottom-color: var(--lym-color-primary) !important;
font-weight: 700 !important;
}
@media (max-width: 767px) {
.single-product .lym-pdp-toc-bar__inner {
gap: 18px !important;
}
.single-product .lym-pdp-toc-link {
font-size: 14px !important;
padding: 10px 2px !important;
}
}
/* 4. PDP Buy Buttons, Unified Quantity Pill & Sticky Bottom Bar (Inbox Lines 25–29) */
/* Unified 48px Quantity Pill (`- 1 +`) */
.single-product form.cart .quantity,
.popup-quick-view form.cart .quantity,
.wd-sticky-btn .quantity {
display: inline-flex !important;
align-items: center !important;
height: 48px !important;
min-height: 48px !important;
max-height: 48px !important;
border: 1px solid var(--lym-color-border) !important;
border-radius: 8px !important;
background: #ffffff !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.single-product form.cart .quantity .minus,
.single-product form.cart .quantity .plus,
.popup-quick-view form.cart .quantity .minus,
.popup-quick-view form.cart .quantity .plus,
.wd-sticky-btn .quantity .minus,
.wd-sticky-btn .quantity .plus {
width: 40px !important;
min-width: 40px !important;
height: 46px !important;
min-height: 46px !important;
max-height: 46px !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--lym-color-text) !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 1 !important;
padding: 0 !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: none !important;
}
.single-product form.cart .quantity .minus:hover,
.single-product form.cart .quantity .plus:hover,
.popup-quick-view form.cart .quantity .minus:hover,
.popup-quick-view form.cart .quantity .plus:hover,
.wd-sticky-btn .quantity .minus:hover,
.wd-sticky-btn .quantity .plus:hover {
background: var(--lym-color-surface-muted) !important;
color: var(--lym-color-primary) !important;
}
.single-product form.cart .quantity input.qty,
.popup-quick-view form.cart .quantity input.qty,
.wd-sticky-btn .quantity input.qty {
width: 46px !important;
min-width: 46px !important;
height: 46px !important;
min-height: 46px !important;
max-height: 46px !important;
border: none !important;
border-left: 1px solid var(--lym-color-border-subtle) !important;
border-right: 1px solid var(--lym-color-border-subtle) !important;
border-radius: 0 !important;
background: #ffffff !important;
color: var(--lym-color-text) !important;
font-size: 15px !important;
font-weight: 600 !important;
text-align: center !important;
padding: 0 2px !important;
margin: 0 !important;
box-shadow: none !important;
}
/* Distinct Solid Orange "Thêm vào giỏ" (#d97706) vs Solid Green "Mua ngay" (#0f5132) */
.single-product form.cart .single_add_to_cart_button,
.single-product .summary-inner form.cart .single_add_to_cart_button,
.single-product .wd-sticky-btn .single_add_to_cart_button,
.popup-quick-view form.cart .single_add_to_cart_button {
height: 48px !important;
min-height: 48px !important;
max-height: 48px !important;
padding: 0 22px !important;
border-radius: 8px !important;
background-color: var(--lym-color-accent) !important;
color: #ffffff !important;
border: 1px solid var(--lym-color-accent) !important;
font-size: 16px !important;
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: none !important;
}
.single-product form.cart .single_add_to_cart_button:hover,
.single-product .summary-inner form.cart .single_add_to_cart_button:hover,
.single-product .wd-sticky-btn .single_add_to_cart_button:hover,
.popup-quick-view form.cart .single_add_to_cart_button:hover {
background-color: var(--lym-color-accent-hover) !important;
border-color: var(--lym-color-accent-hover) !important;
color: #ffffff !important;
}
.single-product form.cart .wd-buy-now-btn,
.single-product .summary-inner form.cart .wd-buy-now-btn,
.single-product .wd-sticky-btn .wd-buy-now-btn,
.popup-quick-view form.cart .wd-buy-now-btn {
height: 48px !important;
min-height: 48px !important;
max-height: 48px !important;
padding: 0 22px !important;
border-radius: 8px !important;
background-color: var(--lym-color-primary) !important;
color: #ffffff !important;
border: 1px solid var(--lym-color-primary) !important;
font-size: 16px !important;
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: none !important;
}
.single-product form.cart .wd-buy-now-btn:hover,
.single-product .summary-inner form.cart .wd-buy-now-btn:hover,
.single-product .wd-sticky-btn .wd-buy-now-btn:hover,
.popup-quick-view form.cart .wd-buy-now-btn:hover {
background-color: var(--lym-color-primary-hover) !important;
border-color: var(--lym-color-primary-hover) !important;
color: #ffffff !important;
}
/* Desktop Sticky Bottom Bar (<= 72px height, 1-line title, compact price block, 48px 1-line "💬 Tư vấn", 12px gaps) */
@media (min-width: 1025px) {
.single-product .wd-sticky-btn {
height: 70px !important;
min-height: 68px !important;
max-height: 72px !important;
padding: 0 !important;
background: #ffffff !important;
border-top: 1px solid var(--lym-color-border) !important;
box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08) !important;
}
.single-product .wd-sticky-btn .wd-sticky-btn-container {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
height: 100% !important;
max-width: 1224px !important;
width: calc(100% - 32px) !important;
margin: 0 auto !important;
padding: 0 !important;
}
.single-product .wd-sticky-btn .wd-sticky-btn-content {
display: flex !important;
align-items: center !important;
gap: 12px !important;
min-width: 0 !important;
flex: 1 1 auto !important;
}
.single-product .wd-sticky-btn .wd-sticky-btn-thumbnail img {
width: 48px !important;
height: 48px !important;
object-fit: contain !important;
border-radius: 6px !important;
border: 1px solid var(--lym-color-border-subtle) !important;
}
.single-product .wd-sticky-btn .wd-sticky-btn-info {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 2px !important;
min-width: 0 !important;
}
.single-product .wd-sticky-btn .wd-sticky-btn-info .wd-entities-title {
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
color: var(--lym-color-text) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 340px !important;
margin: 0 !important;
}
.single-product .wd-sticky-btn .wd-sticky-btn-info .price {
display: inline-flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
.single-product .wd-sticky-btn .wd-sticky-btn-info .price ins,
.single-product .wd-sticky-btn .wd-sticky-btn-info .price > .amount {
order: 1 !important;
text-decoration: none !important;
font-size: 20px !important;
font-weight: 800 !important;
color: var(--lym-color-danger) !important;
}
.single-product .wd-sticky-btn .wd-sticky-btn-info .price ins .amount {
font-size: 20px !important;
font-weight: 800 !important;
color: var(--lym-color-danger) !important;
}
.single-product .wd-sticky-btn .wd-sticky-btn-info .price del,
.single-product .wd-sticky-btn .wd-sticky-btn-info .price del .amount {
order: 2 !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--lym-color-text-muted) !important;
}
.single-product .wd-sticky-btn .wd-sticky-btn-info .price .lym-single-discount-badge {
order: 3 !important;
background: var(--lym-color-danger) !important;
color: #ffffff !important;
font-size: 12px !important;
font-weight: 700 !important;
padding: 2px 6px !important;
border-radius: 4px !important;
line-height: 1.2 !important;
}
.single-product .wd-sticky-btn .wd-sticky-btn-cart {
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex-shrink: 0 !important;
}
.single-product .wd-sticky-btn .wd-sticky-btn-cart form.cart {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 12px !important;
margin: 0 !important;
}
.single-product .wd-sticky-btn .lym-single-consult-bar {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
}
.single-product .wd-sticky-btn .lym-zalo-consult-btn {
height: 48px !important;
min-height: 48px !important;
max-height: 48px !important;
padding: 0 16px !important;
font-size: 14px !important;
font-weight: 600 !important;
white-space: nowrap !important;
border-radius: 8px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
box-sizing: border-box !important;
}
.single-product .wd-sticky-btn .wd-wishlist-btn,
.single-product .wd-sticky-btn .wd-action-btn {
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
}
.single-product .wd-sticky-btn .wd-wishlist-btn a {
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
padding: 0 !important;
border: 1px solid var(--lym-color-border) !important;
border-radius: 8px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
}
@media (max-width: 1024px) {
.single-product .wd-sticky-btn .single_add_to_cart_button {
background-color: var(--lym-color-accent) !important;
border: 1px solid var(--lym-color-accent) !important;
color: #ffffff !important;
font-size: 14px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
}
.single-product .wd-sticky-btn .wd-buy-now-btn {
background-color: var(--lym-color-primary) !important;
border: 1px solid var(--lym-color-primary) !important;
color: #ffffff !important;
font-size: 14px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
}
}
/* 5. PDP Sections Spacing, Reviews & Q&A Cleanup (Inbox Lines 30–35) */
.single-product .product-tabs-wrapper {
margin-top: 24px !important;
margin-bottom: 24px !important;
padding: 0 !important;
}
.single-product .lym-pdp-sections-wrap {
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
margin: 0 !important;
}
.single-product .lym-pdp-section {
background: #ffffff !important;
border: 1px solid var(--lym-color-border-subtle) !important;
border-radius: var(--lym-radius-lg) !important;
padding: 24px !important;
margin: 0 !important;
box-shadow: var(--lym-shadow-sm) !important;
box-sizing: border-box !important;
}
.single-product .lym-pdp-section__title,
.single-product .lym-pdp-section .lym-section-heading,
.single-product .lym-pdp-section .lym-product-specs-section__heading {
font-size: 22px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: var(--lym-color-text) !important;
margin: 0 0 16px 0 !important;
padding: 0 0 12px 0 !important;
border-bottom: 1px solid var(--lym-color-border-subtle) !important;
}
@media (max-width: 767px) {
.single-product .lym-pdp-section {
padding: 16px !important;
}
.single-product .lym-pdp-section__title,
.single-product .lym-pdp-section .lym-section-heading,
.single-product .lym-pdp-section .lym-product-specs-section__heading {
font-size: 18px !important;
margin-bottom: 12px !important;
}
}
/* Remove duplicate headings & inner padding inside Specs / Reviews / Q&A */
.single-product .lym-product-specs-section {
margin: 0 !important;
padding: 0 !important;
}
#lym-sec-qna #cr_qna > h2,
#lym-sec-reviews h2.woocommerce-Reviews-title {
display: none !important;
}
#lym-sec-reviews .lym-pdp-reviews-inner,
#lym-sec-reviews #reviews,
#lym-sec-qna .lym-pdp-qna-inner,
#lym-sec-qna #cr_qna {
margin: 0 !important;
padding: 0 !important;
}
/* CusRev Search Input: 40px left padding so magnifying glass icon never overlaps placeholder */
#reviews .cr-ajax-search input.cr-input-text,
#cr_qna .cr-ajax-search input.cr-input-text,
input.cr-input-text {
padding-left: 40px !important;
padding-right: 14px !important;
}
/* CusRev Review List: remove ~100px left indent, clean 40px avatar + 16px item spacing */
#reviews #comments,
#reviews .cr-reviews-ajax-reviews,
#reviews .cr-reviews-ajax-comments {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
#reviews ol.commentlist,
#reviews .commentlist {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
#reviews ol.commentlist li.review,
#reviews .commentlist li.review {
margin: 0 0 16px 0 !important;
padding: 0 0 16px 0 !important;
border-bottom: 1px solid var(--lym-color-border-subtle) !important;
}
#reviews ol.commentlist li.review:last-child,
#reviews .commentlist li.review:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: none !important;
}
#reviews ol.commentlist li.review .comment_container,
#reviews .commentlist li.review .comment_container {
display: flex !important;
align-items: flex-start !important;
gap: 14px !important;
padding: 0 !important;
margin: 0 !important;
position: relative !important;
}
#reviews ol.commentlist li.review img.avatar,
#reviews .commentlist li.review img.avatar {
position: static !important;
top: auto !important;
left: auto !important;
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
border-radius: 50% !important;
margin: 0 !important;
padding: 0 !important;
flex-shrink: 0 !important;
}
#reviews ol.commentlist li.review .comment-text,
#reviews .commentlist li.review .comment-text {
margin: 0 !important;
padding: 0 !important;
border: none !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* Q&A Section & Clean Collapsible Question Form */
#cr_qna .cr-qna-search-block {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: 12px !important;
margin-bottom: 16px !important;
}
#cr_qna button.cr-qna-ask-button,
button.cr-qna-ask-button {
height: 44px !important;
min-height: 44px !important;
padding: 0 20px !important;
background-color: #ffffff !important;
color: var(--lym-color-primary) !important;
border: 1.5px solid var(--lym-color-primary) !important;
border-radius: 8px !important;
font-size: 14px !important;
font-weight: 600 !important;
cursor: pointer !important;
}
#cr_qna button.cr-qna-ask-button:hover,
button.cr-qna-ask-button:hover {
background-color: var(--lym-color-primary-soft) !important;
color: var(--lym-color-primary) !important;
}
#cr_qna .cr-qna-new-q-form:not(.is-open) {
display: none !important;
}
#cr_qna .cr-qna-new-q-form.is-open {
display: block !important;
margin: 16px 0 0 0 !important;
padding: 20px !important;
background: var(--lym-color-surface-subtle) !important;
border: 1px solid var(--lym-color-border) !important;
border-radius: 12px !important;
}
/* Hide repeated 32px product title + large image & stray back button inside Q&A form */
#cr_qna .cr-qna-new-q-form .cr-review-form-item,
#cr_qna .cr-qna-new-q-form .cr-review-form-nav {
display: none !important;
}
#cr_qna .cr-qna-new-q-form .cr-review-form-lbl {
display: block !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--lym-color-text) !important;
margin: 0 0 6px 0 !important;
}
#cr_qna .cr-qna-new-q-form .cr-review-form-comment {
margin: 0 0 16px 0 !important;
}
#cr_qna .cr-qna-new-q-form .cr-review-form-ne {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px !important;
margin: 0 0 16px 0 !important;
}
@media (max-width: 767px) {
#cr_qna .cr-qna-new-q-form .cr-review-form-ne {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
}
#cr_qna .cr-qna-new-q-form .cr-review-form-name,
#cr_qna .cr-qna-new-q-form .cr-review-form-email {
margin: 0 !important;
width: 100% !important;
}
#cr_qna .cr-qna-new-q-form .cr-onsite- Field,
#cr_qna .cr-qna-new-q-form .cr-review-form-terms {
display: flex !important;
align-items: center !important;
gap: 8px !important;
font-size: 14px !important;
color: var(--lym-color-text-secondary) !important;
margin: 0 0 16px 0 !important;
}
#cr_qna .cr-qna-new-q-form .cr-review-form-buttons {
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin-top: 12px !important;
}
#cr_qna .cr-qna-new-q-form .cr-review-form-submit {
height: 48px !important;
min-height: 48px !important;
padding: 0 24px !important;
background-color: var(--lym-color-primary) !important;
color: #ffffff !important;
border: 1px solid var(--lym-color-primary) !important;
border-radius: 8px !important;
font-size: 15px !important;
font-weight: 700 !important;
text-transform: none !important;
cursor: pointer !important;
}
#cr_qna .cr-qna-new-q-form .cr-review-form-submit:hover {
background-color: var(--lym-color-primary-hover) !important;
}
#cr_qna .cr-qna-new-q-form .cr-review-form-cancel {
height: 48px !important;
min-height: 48px !important;
padding: 0 20px !important;
background-color: #ffffff !important;
color: var(--lym-color-text-secondary) !important;
border: 1px solid var(--lym-color-border) !important;
border-radius: 8px !important;
font-size: 15px !important;
font-weight: 600 !important;
text-transform: none !important;
cursor: pointer !important;
}
/* brands.css */
/**
* Phần Brands & Trang phụ (Đối tác Affiliate, Tra cứu đơn hàng) — W28
* Mọi selector giới hạn trong phạm vi thành phần (.lym-brands-directory-wrap, .lym-aff-landing, .affwp-form, .woocommerce-form-track-order).
* Dùng Design Tokens trên :root (docs/qa/2026-10-21/W23-loop2/design-tokens.md).
*/
/* ==========================================================================
1. DANH BẠ THƯƠNG HIỆU (/thuong-hieu-chinh-hang/ — X-052 & Mục 26 Addendum 8)
========================================================================== */
/* 1.1 Thanh tìm kiếm & bộ lọc chữ cái A–Z */
.lym-brands-directory-wrap .lym-brands-az-bar {
background-color: var(--lym-color-surface) !important; /* Thắng inline/style.css cũ */
border: 1px solid var(--lym-color-border) !important;
border-radius: var(--lym-radius-md) !important;
padding: 10px 12px !important;
box-shadow: var(--lym-shadow-sm) !important;
}
.lym-brands-directory-wrap .lym-brands-az-bar__inner {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: var(--lym-space-3) !important;
flex-wrap: nowrap !important;
}
.lym-brands-directory-wrap .lym-brands-search-wrap {
position: relative !important;
flex: 0 0 206px !important;
width: 206px !important;
max-width: 100% !important;
display: flex !important;
align-items: center !important;
}
/* Mục 26a: Icon kính lúp căn giữa dọc tĩnh (không dùng transform), cách chữ 12px (12px left + 16px icon + 12px gap = 40px) */
.lym-brands-directory-wrap .lym-brands-search-icon {
position: absolute !important;
left: 12px !important;
top: 50% !important;
margin-top: -8px !important;
transform: none !important;
width: 16px !important;
height: 16px !important;
color: var(--lym-color-text-muted) !important;
pointer-events: none !important;
z-index: 2 !important;
}
.lym-brands-directory-wrap input[type="search"].lym-brands-search-input,
.lym-brands-directory-wrap .lym-brands-search-wrap input.lym-brands-search-input {
width: 100% !important;
height: var(--lym-control-height, 44px) !important;
min-height: var(--lym-control-height, 44px) !important;
max-height: var(--lym-control-height, 44px) !important;
padding: 0 10px 0 40px !important; /* Thắng rule form chung trong style.css */
border: 1px solid var(--lym-color-border) !important;
border-radius: 10px !important;
background-color: var(--lym-color-surface) !important;
color: var(--lym-color-text) !important;
font-family: var(--lym-font-sans) !important;
font-size: 14px !important;
line-height: 1.4 !important;
box-sizing: border-box !important;
transition: border-color 150ms ease, box-shadow 150ms ease !important;
}
.lym-brands-directory-wrap input[type="search"].lym-brands-search-input::placeholder {
color: var(--lym-color-text-secondary) !important;
opacity: 1 !important;
}
.lym-brands-directory-wrap input[type="search"].lym-brands-search-input:focus {
background-color: var(--lym-color-surface) !important;
border-color: var(--lym-color-primary) !important;
box-shadow: var(--lym-focus-ring) !important;
outline: none !important;
}
/* Mục 26b: Thanh A–Z cùng chiều cao ô tìm kiếm (44px), căn giữa dọc, các ô 36x36px, "0–9" rộng tự nhiên */
.lym-brands-directory-wrap .lym-brands-az-nav {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0 !important;
flex: 1 1 auto !important;
min-width: 0 !important;
min-height: var(--lym-control-height, 44px) !important;
overflow: visible !important;
white-space: nowrap !important;
padding: 0 !important;
}
.lym-brands-directory-wrap .lym-brands-az-btn,
.lym-brands-directory-wrap a.lym-brands-az-btn,
.lym-brands-directory-wrap span.lym-brands-az-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
min-width: 36px !important;
height: 36px !important;
min-height: 36px !important;
padding: 0 !important;
border-radius: 6px !important;
font-size: var(--lym-fs-md-sm, 14px) !important;
font-weight: 600 !important;
color: var(--lym-color-text) !important;
background: transparent !important;
border: none !important;
text-decoration: none !important;
transform: none !important;
transition: color 150ms ease, background-color 150ms ease !important;
flex-shrink: 0 !important;
box-sizing: border-box !important;
}
.lym-brands-directory-wrap .lym-brands-az-btn[data-target-letter="0-9"] {
width: auto !important;
min-width: 40px !important;
padding: 0 6px !important;
}
/* Mục 26b: Chữ thường không nền, hover chỉ đổi màu chữ */
.lym-brands-directory-wrap a.lym-brands-az-btn:not(.is-active):hover {
background: transparent !important; /* Thắng background xanh nhạt trong style.css */
color: var(--lym-color-primary) !important;
}
/* Mục 26b: Chữ đang chọn = nền primary, chữ trắng */
.lym-brands-directory-wrap a.lym-brands-az-btn.is-active,
.lym-brands-directory-wrap a.lym-brands-az-btn.is-active:hover {
background: var(--lym-color-primary) !important;
color: var(--lym-color-surface) !important;
}
/* Mục 26b: Chữ không có thương hiệu (I, J, Z, 0–9) chỉ mờ 50% opacity, không nền, cursor: default */
.lym-brands-directory-wrap .lym-brands-az-btn.is-disabled,
.lym-brands-directory-wrap span.lym-brands-az-btn.is-disabled {
background: transparent !important;
background-color: transparent !important;
border: none !important;
color: var(--lym-color-text-muted) !important;
opacity: 0.5 !important; /* Thắng opacity: 1 !important trong style.css */
font-weight: 400 !important;
pointer-events: none !important;
cursor: default !important;
}
/* 1.2 Tiêu đề nhóm chữ cái (Mục 26c: thẳng baseline, số đếm 14px muted, đường kẻ mảnh dưới cách 12px) */
.lym-brands-directory-wrap .lym-brand-letter-header {
margin-bottom: var(--lym-space-4) !important;
padding-bottom: var(--lym-space-3) !important; /* 12px */
border-bottom: 1px solid var(--lym-color-border) !important;
}
.lym-brands-directory-wrap .lym-brand-letter-heading {
margin: 0 !important;
display: flex !important;
align-items: baseline !important;
gap: var(--lym-space-2) !important;
line-height: 1 !important;
}
.lym-brands-directory-wrap .lym-brand-letter-char {
font-size: 22px !important;
font-weight: 700 !important;
color: var(--lym-color-primary) !important;
line-height: 1 !important;
}
.lym-brands-directory-wrap .lym-brand-letter-count {
font-size: var(--lym-fs-md-sm, 14px) !important;
font-weight: 400 !important;
color: var(--lym-color-text-muted) !important;
line-height: 1 !important;
}
/* 1.3 Thẻ thương hiệu (X-052 & Mục 26d: cao đều, avatar/logo 48px, logo contain ~75%, hover chỉ đổi viền) */
.lym-brands-directory-wrap .lym-brand-card {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: var(--lym-space-3) !important; /* 12px */
padding: var(--lym-space-4) !important; /* 16px */
height: 92px !important;
min-height: 92px !important;
max-height: 92px !important;
background-color: var(--lym-color-surface) !important;
border: 1px solid var(--lym-color-border) !important;
border-radius: 10px !important;
box-shadow: none !important;
transform: none !important;
transition: border-color 150ms ease !important;
}
/* Mục 26d: Hover chỉ đổi viền, không nhấc, không đổ bóng phình */
.lym-brands-directory-wrap .lym-brand-card:hover,
.lym-brands-directory-wrap .lym-brand-card:focus-visible {
transform: none !important;
box-shadow: none !important; /* Thắng box-shadow trong style.css */
border-color: var(--lym-color-primary) !important;
}
.lym-brands-directory-wrap .lym-brand-card__media {
flex: 0 0 48px !important;
width: 48px !important;
height: 48px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.lym-brands-directory-wrap .lym-brand-card__avatar,
.lym-brands-directory-wrap .lym-brand-card__avatar--fallback,
.lym-brands-directory-wrap .lym-brand-card__logo {
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
border-radius: var(--lym-radius-pill) !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.lym-brands-directory-wrap .lym-brand-card__avatar,
.lym-brands-directory-wrap .lym-brand-card__avatar--fallback {
background-color: var(--lym-color-primary-soft) !important;
color: var(--lym-color-primary) !important;
font-size: var(--lym-fs-md, 18px) !important;
font-weight: 700 !important;
align-items: center !important;
justify-content: center !important;
}
/* Ẩn avatar dự phòng khi thẻ đã có logo hợp lệ; chỉ hiện khi ảnh logo lỗi (.is-logo-fallback) */
.lym-brands-directory-wrap .lym-brand-card__avatar--fallback {
display: none !important; /* Thắng .lym-brand-card__avatar { display: inline-flex !important } */
}
.lym-brands-directory-wrap .lym-brand-card.is-logo-fallback .lym-brand-card__logo {
display: none !important;
}
.lym-brands-directory-wrap .lym-brand-card.is-logo-fallback .lym-brand-card__avatar--fallback {
display: inline-flex !important;
}
/* Logo có ảnh: vòng tròn trắng viền mảnh, ảnh object-fit: contain chiếm đúng 75% (36px / 48px) */
.lym-brands-directory-wrap .lym-brand-card__logo {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background-color: var(--lym-color-surface) !important;
border: 1px solid var(--lym-color-border) !important;
padding: 6px !important;
}
.lym-brands-directory-wrap .lym-brand-card__logo img {
width: 36px !important;
height: 36px !important;
max-width: 36px !important;
max-height: 36px !important;
object-fit: contain !important;
display: block !important;
}
.lym-brands-directory-wrap .lym-brand-card__name {
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
color: var(--lym-color-text) !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
margin-bottom: 2px !important;
}
.lym-brands-directory-wrap .lym-brand-card__count {
font-size: 13.5px !important;
color: var(--lym-color-text-muted) !important;
line-height: 1.25 !important;
margin: 0 !important;
}
/* Responsive Tablet & Mobile cho Danh bạ thương hiệu (X-052) */
@media (max-width: 1199px) {
.lym-brands-directory-wrap .lym-brands-az-bar__inner {
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
.lym-brands-directory-wrap .lym-brands-search-wrap {
flex: 1 1 100% !important;
width: 100% !important;
}
.lym-brands-directory-wrap .lym-brands-az-nav {
flex-wrap: wrap !important;
justify-content: flex-start !important;
gap: 6px !important;
min-height: 0 !important;
white-space: normal !important;
overflow: visible !important;
}
}
@media (max-width: 767px) {
.lym-brands-directory-wrap input[type="search"].lym-brands-search-input,
.lym-brands-directory-wrap .lym-brands-search-wrap input.lym-brands-search-input {
font-size: 16px !important; /* Tránh tự phóng to trên iOS Safari */
}
.lym-brands-directory-wrap .lym-brands-az-btn,
.lym-brands-directory-wrap a.lym-brands-az-btn,
.lym-brands-directory-wrap span.lym-brands-az-btn {
width: 34px !important;
min-width: 34px !important;
height: 34px !important;
min-height: 34px !important;
font-size: 13px !important;
}
.lym-brands-directory-wrap .lym-brands-az-btn[data-target-letter="0-9"] {
width: auto !important;
min-width: 40px !important;
padding: 0 6px !important;
}
.lym-brands-directory-wrap .lym-brand-card {
padding: var(--lym-space-3) !important;
gap: 10px !important;
height: 84px !important;
min-height: 84px !important;
max-height: 84px !important;
}
.lym-brands-directory-wrap .lym-brand-card__media,
.lym-brands-directory-wrap .lym-brand-card__avatar,
.lym-brands-directory-wrap .lym-brand-card__avatar--fallback,
.lym-brands-directory-wrap .lym-brand-card__logo {
flex: 0 0 40px !important;
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
font-size: 15px !important;
}
.lym-brands-directory-wrap .lym-brand-card__logo {
padding: 5px !important;
}
/* 30px / 40px = đúng 75% đường kính vòng tròn trên mobile */
.lym-brands-directory-wrap .lym-brand-card__logo img {
width: 30px !important;
height: 30px !important;
max-width: 30px !important;
max-height: 30px !important;
}
.lym-brands-directory-wrap .lym-brand-card__name {
font-size: 14px !important;
}
.lym-brands-directory-wrap .lym-brand-card__count {
font-size: 13px !important;
}
}
/* ==========================================================================
2. TRANG ĐỐI TÁC AFFILIATE (/doi-tac-affiliate/ — X-054 & Form Design Tokens)
========================================================================== */
/* Tiêu đề Hero dùng thẻ H2 (.lym-aff-hero__title) để trang chỉ có đúng 1 thẻ H1 duy nhất */
.lym-aff-landing .lym-aff-hero h2.lym-aff-hero__title {
color: var(--lym-color-surface) !important;
font-size: var(--lym-fs-2xl, 28px) !important;
line-height: 1.3 !important;
font-weight: 800 !important;
margin: 0 0 var(--lym-space-4) 0 !important;
}
/* Áp Design Tokens chuẩn cho form Đăng nhập & Đăng ký Đối tác AffiliateWP */
.affwp-form,
#affwp-login-form,
#affwp-register-form {
background-color: var(--lym-color-surface) !important;
border: 1px solid var(--lym-color-border) !important;
border-radius: var(--lym-radius-lg) !important;
padding: 28px !important;
box-shadow: var(--lym-shadow-sm) !important;
box-sizing: border-box !important;
}
.affwp-form label,
.affwp-form label.affwp-field-label {
display: block !important;
font-size: var(--lym-fs-md-sm, 14px) !important;
font-weight: 600 !important;
color: var(--lym-color-text) !important;
margin-bottom: 6px !important;
}
/* Ô nhập form Đối tác theo chuẩn Design Tokens: cao 48px desktop / 44px mobile, bo 10px, chữ 16px, padding ngang 16px */
body .affwp-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]):not([type="button"]),
#affwp-login-form input[type="text"],
#affwp-login-form input[type="email"],
#affwp-login-form input[type="password"],
#affwp-register-form input[type="text"],
#affwp-register-form input[type="email"],
#affwp-register-form input[type="tel"],
#affwp-register-form input[type="url"],
#affwp-register-form input[type="password"],
body .affwp-form select {
width: 100% !important;
height: var(--lym-control-height-lg, 48px) !important; /* Thắng CSS plugin AffiliateWP & rule input chung */
min-height: var(--lym-control-height-lg, 48px) !important;
max-height: var(--lym-control-height-lg, 48px) !important;
padding: 0 var(--lym-space-4) !important;
border: 1px solid var(--lym-color-border) !important;
border-radius: 10px !important;
background-color: var(--lym-color-surface) !important;
color: var(--lym-color-text) !important;
font-family: var(--lym-font-sans) !important;
font-size: 16px !important;
box-sizing: border-box !important;
transition: border-color 150ms ease, box-shadow 150ms ease !important;
}
body .affwp-form textarea,
#affwp-register-form textarea {
width: 100% !important;
min-height: 112px !important;
padding: var(--lym-space-3) var(--lym-space-4) !important;
border: 1px solid var(--lym-color-border) !important;
border-radius: 10px !important;
background-color: var(--lym-color-surface) !important;
color: var(--lym-color-text) !important;
font-family: var(--lym-font-sans) !important;
font-size: 16px !important;
box-sizing: border-box !important;
transition: border-color 150ms ease, box-shadow 150ms ease !important;
}
body .affwp-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]):not([type="button"]):focus,
#affwp-login-form input:not([type="checkbox"]):not([type="submit"]):focus,
#affwp-register-form input:not([type="checkbox"]):not([type="submit"]):focus,
body .affwp-form textarea:focus,
body .affwp-form select:focus {
border-color: var(--lym-color-primary) !important;
box-shadow: var(--lym-focus-ring) !important;
outline: none !important;
}
/* Checkbox 20x20px trong vùng chạm >= 44px */
.affwp-form input[type="checkbox"] {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
accent-color: var(--lym-color-primary) !important;
cursor: pointer !important;
}
.affwp-form label.affwp-label-checkbox-multiple {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
min-height: 44px !important;
padding: 0 var(--lym-space-4) !important;
margin: 0 12px 10px 0 !important;
background-color: var(--lym-color-surface) !important;
border: 1px solid var(--lym-color-border) !important;
border-radius: 10px !important;
font-size: var(--lym-fs-md-sm, 14px) !important;
font-weight: 500 !important;
color: var(--lym-color-text) !important;
cursor: pointer !important;
box-sizing: border-box !important;
}
/* Dòng đồng ý điều khoản đăng ký Đối tác: chảy dòng tự nhiên, không vỡ cột khi có thẻ */
#affwp-register-form .wp-block-affiliatewp-field-terms-of-use,
#affwp-register-form p:has(input[type="checkbox"]) {
position: relative !important;
min-height: 44px !important;
}
/* Nút gửi form Đối tác (Primary Button Token) */
#affwp-login-form input[type="submit"],
#affwp-login-form button[type="submit"],
#affwp-register-form input[type="submit"],
#affwp-register-form button[type="submit"],
.affwp-form input[type="submit"].button {
height: var(--lym-control-height-lg, 48px) !important;
min-height: var(--lym-control-height-lg, 48px) !important;
padding: 0 var(--lym-space-6) !important;
background-color: var(--lym-color-primary) !important;
border: 1px solid var(--lym-color-primary) !important;
border-radius: 10px !important;
color: var(--lym-color-surface) !important;
font-family: var(--lym-font-sans) !important;
font-size: 16px !important;
font-weight: 600 !important;
text-transform: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transform: none !important;
transition: background-color 150ms ease, border-color 150ms ease !important;
}
#affwp-login-form input[type="submit"]:hover,
#affwp-login-form button[type="submit"]:hover,
#affwp-register-form input[type="submit"]:hover,
#affwp-register-form button[type="submit"]:hover,
.affwp-form input[type="submit"].button:hover {
background-color: var(--lym-color-primary-hover) !important;
border-color: var(--lym-color-primary-hover) !important;
color: var(--lym-color-surface) !important;
transform: none !important;
}
@media (max-width: 767px) {
.affwp-form,
#affwp-login-form,
#affwp-register-form {
padding: 20px 16px !important;
}
body .affwp-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]):not([type="button"]),
#affwp-login-form input[type="text"],
#affwp-login-form input[type="email"],
#affwp-login-form input[type="password"],
#affwp-register-form input[type="text"],
#affwp-register-form input[type="email"],
#affwp-register-form input[type="tel"],
#affwp-register-form input[type="url"],
#affwp-register-form input[type="password"],
body .affwp-form select,
#affwp-login-form input[type="submit"],
#affwp-login-form button[type="submit"],
#affwp-register-form input[type="submit"],
#affwp-register-form button[type="submit"],
body .affwp-form input[type="submit"],
body .affwp-form button[type="submit"] {
height: var(--lym-control-height, 44px) !important;
min-height: var(--lym-control-height, 44px) !important;
max-height: var(--lym-control-height, 44px) !important;
}
#affwp-login-form input[type="submit"],
#affwp-login-form button[type="submit"],
#affwp-register-form input[type="submit"],
#affwp-register-form button[type="submit"],
body .affwp-form input[type="submit"],
body .affwp-form button[type="submit"] {
width: 100% !important;
}
}
/* ==========================================================================
3. TRANG TRA CỨU ĐƠN HÀNG (/tra-cuu-don-hang/ — X-054 & Form Design Tokens)
========================================================================== */
.woocommerce-form-track-order,
form.track_order {
background-color: var(--lym-color-surface) !important;
border: 1px solid var(--lym-color-border) !important;
border-radius: var(--lym-radius-lg) !important;
padding: var(--lym-space-6) !important;
box-shadow: var(--lym-shadow-sm) !important;
margin-bottom: var(--lym-space-6) !important;
box-sizing: border-box !important;
}
.woocommerce-form-track-order label,
form.track_order label {
display: block !important;
font-size: var(--lym-fs-md-sm, 14px) !important;
font-weight: 600 !important;
color: var(--lym-color-text) !important;
margin-bottom: 6px !important;
}
/* Đồng bộ tuyệt đối chiều cao 44px (0px diff theo X-054 issues.json r3) & token form (bo 10px, chữ 16px) */
.woocommerce-form-track-order input.input-text,
form.track_order input.input-text {
height: var(--lym-control-height, 44px) !important;
min-height: var(--lym-control-height, 44px) !important;
max-height: var(--lym-control-height, 44px) !important;
padding: 0 var(--lym-space-4) !important;
border: 1px solid var(--lym-color-border) !important;
border-radius: 10px !important;
background-color: var(--lym-color-surface) !important;
color: var(--lym-color-text) !important;
font-family: var(--lym-font-sans) !important;
font-size: 16px !important;
box-sizing: border-box !important;
transition: border-color 150ms ease, box-shadow 150ms ease !important;
}
.woocommerce-form-track-order input.input-text:focus,
form.track_order input.input-text:focus {
border-color: var(--lym-color-primary) !important;
box-shadow: var(--lym-focus-ring) !important;
outline: none !important;
}
.woocommerce-form-track-order button[type="submit"],
.woocommerce-form-track-order .button,
form.track_order button[type="submit"],
form.track_order .button {
height: var(--lym-control-height, 44px) !important;
min-height: var(--lym-control-height, 44px) !important;
max-height: var(--lym-control-height, 44px) !important;
padding: 0 var(--lym-space-6) !important;
border-radius: 10px !important;
font-family: var(--lym-font-sans) !important;
font-size: 16px !important;
font-weight: 600 !important;
text-transform: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
transform: none !important;
}
@media (max-width: 767px) {
.woocommerce-form-track-order,
form.track_order {
padding: var(--lym-space-4) !important;
}
.woocommerce-form-track-order .form-row-first,
.woocommerce-form-track-order .form-row-last,
.woocommerce-form-track-order .form-row,
form.track_order .form-row-first,
form.track_order .form-row-last,
form.track_order .form-row {
width: 100% !important;
flex: 0 0 100% !important;
float: none !important;
margin: 0 0 var(--lym-space-3) 0 !important;
}
.woocommerce-form-track-order button[type="submit"],
.woocommerce-form-track-order .button,
form.track_order button[type="submit"],
form.track_order .button {
width: 100% !important;
}
}
/* cards.css */
/* Phần thẻ sản phẩm — sau khi "Thêm vào giỏ" bằng AJAX, WooCommerce chèn link "Xem giỏ hàng" làm thẻ cao lên và
2 nút dính nhau. Ẩn link đó trong lưới sản phẩm (mini-cart, số đếm giỏ và icon ✓ của nút đã báo đã thêm).
Selector phải cụ thể hơn quy tắc `.wd-product.wd-hover-standard .wd-add-btn > a` (inline-flex !important) trong style.css. */
.wd-product.wd-hover-standard .wd-add-btn > a.added_to_cart,
.wd-product .wd-add-btn > a.added_to_cart.wc-forward,
.products .product .wd-add-btn > a.added_to_cart.wc-forward {
display: none !important;
}
/* checkout.css */
/**
* Lym — Giao diện Giỏ hàng (/gio-hang/) & Thanh toán (/thanh-toan/)
* Phạm vi: body.woocommerce-cart, body.woocommerce-checkout, .lym-pdpd-consent-wrapper, .lym-vietqr-box
* Khắc phục dứt điểm: X-048 (P0), X-049 (P1), X-051 (P1), X-055 (P2) & chuẩn hóa bảng tổng tiền / thẻ thanh toán.
*/
/* ==========================================================================
1. Bố cục 2 cột trang Thanh toán & Giỏ hàng (Desktop 2 cột | Mobile 1 cột)
========================================================================== */
@media (min-width: 992px) {
body.woocommerce-checkout form.checkout,
body.woocommerce-checkout form.checkout.row,
body.woocommerce-checkout form.checkout > .row {
display: grid !important; /* Thắng layout float/flex mặc định của WoodMart */
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important;
column-gap: var(--lym-space-6, 24px) !important;
row-gap: var(--lym-space-4, 16px) !important;
align-items: start !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
body.woocommerce-checkout form.checkout #customer_details {
grid-column: 1 / 2 !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: var(--lym-space-6, 24px) !important;
background-color: var(--lym-color-surface, #ffffff) !important;
border: 1px solid var(--lym-color-border, #e2e8f0) !important;
border-radius: var(--lym-radius-lg, 16px) !important;
box-shadow: var(--lym-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06)) !important;
box-sizing: border-box !important;
}
body.woocommerce-checkout form.checkout .checkout-order-review {
grid-column: 2 / 3 !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: var(--lym-space-6, 24px) !important;
background-color: var(--lym-color-surface, #ffffff) !important;
border: 1px solid var(--lym-color-border, #e2e8f0) !important;
border-radius: var(--lym-radius-lg, 16px) !important;
box-shadow: var(--lym-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06)) !important;
box-sizing: border-box !important;
}
body.woocommerce-cart .woocommerce > .cart-content-wrapper,
body.woocommerce-cart .woocommerce > .row {
display: grid !important; /* Thắng layout cột lệch của WoodMart ở 1366x768 */
grid-template-columns: minmax(0, 7.2fr) minmax(0, 4.8fr) !important;
column-gap: var(--lym-space-6, 24px) !important;
align-items: start !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
body.woocommerce-cart .woocommerce > .row::before,
body.woocommerce-cart .woocommerce > .row::after {
display: none !important;
}
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .cart-collaterals {
width: 100% !important;
max-width: 100% !important;
flex: none !important;
float: none !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
}
@media (max-width: 991px) {
body.woocommerce-checkout form.checkout,
body.woocommerce-checkout form.checkout > .row {
display: flex !important;
flex-direction: column !important;
gap: var(--lym-space-4, 16px) !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce-checkout form.checkout #customer_details,
body.woocommerce-checkout form.checkout .checkout-order-review {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: var(--lym-space-4, 16px) !important;
background-color: var(--lym-color-surface, #ffffff) !important;
border: 1px solid var(--lym-color-border, #e2e8f0) !important;
border-radius: var(--lym-radius-md, 12px) !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
}
/* Đảm bảo các cột con trong #customer_details chiếm trọn 100% khung trái */
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
float: none !important;
padding: 0 !important;
margin: 0 !important;
}
body.woocommerce-checkout #customer_details .col-2 {
margin-top: var(--lym-space-5, 20px) !important;
padding-top: var(--lym-space-4, 16px) !important;
border-top: 1px solid var(--lym-color-border, #e2e8f0) !important;
}
body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h3,
body.woocommerce-checkout #order_review_heading {
font-size: var(--lym-fs-md, 18px) !important;
font-weight: 700 !important;
color: var(--lym-color-text, #0f172a) !important;
text-transform: none !important;
margin: 0 0 var(--lym-space-4, 16px) 0 !important;
padding: 0 0 var(--lym-space-3, 12px) 0 !important;
border-bottom: 1px solid var(--lym-color-border, #e2e8f0) !important;
}
/* ==========================================================================
2. X-049 (P1): Lưới Form Thanh toán chuẩn xác (Họ tên 50/50, SĐT 100%, Email 100%, Tỉnh-Thành / Phường-Xã 50/50, Địa chỉ 100%)
========================================================================== */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
display: grid !important; /* Thắng float của WooCommerce .form-row-first / .form-row-last */
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: var(--lym-space-4, 16px) !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper::before,
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper::after,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper::before,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper::after {
display: none !important;
}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row,
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper > .form-row {
width: 100% !important; /* Thắng width: 47% của WooCommerce .form-row-first/.form-row-last */
max-width: 100% !important;
float: none !important;
clear: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
grid-column: 1 / -1 !important;
}
/* Thứ tự các trường cố định kể cả khi address-i18n.js của WooCommerce chạy lại */
body.woocommerce-checkout #billing_first_name_field,
body.woocommerce-checkout #shipping_first_name_field {
order: 10 !important;
}
body.woocommerce-checkout #billing_last_name_field,
body.woocommerce-checkout #shipping_last_name_field {
order: 15 !important;
}
body.woocommerce-checkout #billing_phone_field,
body.woocommerce-checkout #shipping_phone_field {
order: 20 !important;
grid-column: 1 / -1 !important; /* 100% chiều ngang cột trái */
}
body.woocommerce-checkout #billing_email_field {
order: 30 !important;
grid-column: 1 / -1 !important; /* X-049: 100% chiều ngang cột trái, không bị lệch nửa phải */
}
body.woocommerce-checkout #billing_country_field,
body.woocommerce-checkout #shipping_country_field {
order: 35 !important;
grid-column: 1 / -1 !important;
}
body.woocommerce-checkout #billing_state_field,
body.woocommerce-checkout #shipping_state_field {
order: 40 !important;
}
body.woocommerce-checkout #billing_city_field,
body.woocommerce-checkout #shipping_city_field {
order: 45 !important;
}
body.woocommerce-checkout #billing_address_1_field,
body.woocommerce-checkout #shipping_address_1_field {
order: 50 !important;
grid-column: 1 / -1 !important; /* 100% chiều ngang cột trái */
}
body.woocommerce-checkout #billing_address_2_field,
body.woocommerce-checkout #shipping_address_2_field,
body.woocommerce-checkout #billing_postcode_field,
body.woocommerce-checkout #shipping_postcode_field,
body.woocommerce-checkout #billing_company_field,
body.woocommerce-checkout #shipping_company_field {
order: 60 !important;
grid-column: 1 / -1 !important;
}
/* Trên Desktop/Tablet >= 768px: cặp Họ & Tên 50/50, cặp Tỉnh/Thành & Phường/Xã 50/50 */
@media (min-width: 768px) {
body.woocommerce-checkout #billing_first_name_field,
body.woocommerce-checkout #shipping_first_name_field,
body.woocommerce-checkout #billing_state_field,
body.woocommerce-checkout #shipping_state_field {
grid-column: 1 / 2 !important;
}
body.woocommerce-checkout #billing_last_name_field,
body.woocommerce-checkout #shipping_last_name_field,
body.woocommerce-checkout #billing_city_field,
body.woocommerce-checkout #shipping_city_field {
grid-column: 2 / 3 !important;
}
}
/* Trên Mobile < 768px: 1 cột duy nhất (100% chiều ngang mọi ô) */
@media (max-width: 767px) {
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
grid-template-columns: minmax(0, 1fr) !important;
gap: var(--lym-space-3, 12px) !important;
}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
grid-column: 1 / -1 !important;
}
}
/* Nhãn và ô nhập liệu trong form Thanh toán */
body.woocommerce-checkout .form-row > label:not(.checkbox):not(.woocommerce-form__label-for-checkbox) {
display: block !important;
font-size: var(--lym-fs-sm, 13px) !important;
font-weight: 600 !important;
color: var(--lym-color-text, #0f172a) !important;
margin: 0 0 6px 0 !important;
line-height: 1.4 !important;
}
body.woocommerce-checkout .form-row .woocommerce-input-wrapper {
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .select2-container--default .select2-selection--single {
width: 100% !important;
max-width: 100% !important;
height: 44px !important;
min-height: 44px !important;
padding: 0 12px !important;
border: 1px solid var(--lym-color-border-strong, #cbd5e1) !important;
border-radius: var(--lym-radius-sm, 8px) !important;
background-color: var(--lym-color-surface, #ffffff) !important;
color: var(--lym-color-text, #0f172a) !important;
font-size: var(--lym-fs-md-sm, 14px) !important;
box-sizing: border-box !important;
}
body.woocommerce-checkout .select2-container {
width: 100% !important;
max-width: 100% !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 42px !important;
padding-left: 0 !important;
color: var(--lym-color-text, #0f172a) !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 42px !important;
}
body.woocommerce-checkout .form-row textarea.input-text {
width: 100% !important;
min-height: 84px !important;
padding: 10px 12px !important;
border: 1px solid var(--lym-color-border-strong, #cbd5e1) !important;
border-radius: var(--lym-radius-sm, 8px) !important;
font-size: var(--lym-fs-md-sm, 14px) !important;
line-height: 1.5 !important;
box-sizing: border-box !important;
}
/* ==========================================================================
3. X-048 (P0) & X-055 (P2): Nhãn đồng ý BVDLCN (#lym_pdpd_consent_field), CusRev (.cr-customer-consent) & VAT (#lym_require_vat_field)
Checkbox 20x20px + chữ 14px chạy hết chiều ngang cột, link chính sách inline, không vỡ thành cột dọc
========================================================================== */
body.woocommerce-checkout .lym-pdpd-consent-wrapper {
width: 100% !important;
max-width: 100% !important;
margin: var(--lym-space-3, 12px) 0 !important;
padding: var(--lym-space-3, 12px) var(--lym-space-4, 16px) !important;
background-color: var(--lym-color-surface-subtle, #f8fafc) !important;
border: 1px solid var(--lym-color-border, #e2e8f0) !important;
border-radius: var(--lym-radius-md, 12px) !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
body.woocommerce-checkout #lym_pdpd_consent_field,
body.woocommerce-checkout .cr-customer-consent,
body.woocommerce-checkout #lym_require_vat_field {
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: both !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body.woocommerce-checkout .cr-customer-consent {
margin: var(--lym-space-3, 12px) 0 !important;
padding: var(--lym-space-3, 12px) var(--lym-space-4, 16px) !important;
background-color: var(--lym-color-surface-subtle, #f8fafc) !important;
border: 1px solid var(--lym-color-border, #e2e8f0) !important;
border-radius: var(--lym-radius-md, 12px) !important;
}
body.woocommerce-checkout #lym_pdpd_consent_field label.checkbox,
body.woocommerce-checkout #lym_pdpd_consent_field label,
body.woocommerce-checkout .lym-pdpd-consent-wrapper label,
body.woocommerce-checkout .cr-customer-consent label.woocommerce-form__label-for-checkbox,
body.woocommerce-checkout .cr-customer-consent label,
body.woocommerce-checkout #lym_require_vat_field label.checkbox,
body.woocommerce-checkout #lym_require_vat_field label {
display: block !important; /* Thắng display: inline-flex !important ở style.css:5830 làm vỡ các thẻ thành cột hẹp */
position: relative !important;
padding: 0 0 0 28px !important; /* Chừa 28px bên trái cho checkbox 20x20px + 8px khoảng cách */
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
min-height: 24px !important;
font-size: var(--lym-fs-md-sm, 14px) !important; /* Đúng 14px theo yêu cầu X-048 */
line-height: 1.48 !important;
font-weight: 400 !important;
color: var(--lym-color-text-secondary, #334155) !important;
text-align: left !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
cursor: pointer !important;
box-sizing: border-box !important;
}
@media (max-width: 767px) {
body.woocommerce-checkout form.checkout #customer_details,
body.woocommerce-checkout form.checkout .checkout-order-review {
padding: 12px !important;
}
body.woocommerce-checkout .lym-pdpd-consent-wrapper,
body.woocommerce-checkout .cr-customer-consent {
padding: 8px 10px !important;
}
body.woocommerce-checkout #lym_pdpd_consent_field label.checkbox,
body.woocommerce-checkout #lym_pdpd_consent_field label,
body.woocommerce-checkout .lym-pdpd-consent-wrapper label,
body.woocommerce-checkout #lym_pdpd_consent_field label a,
body.woocommerce-checkout #lym_pdpd_consent_field label span {
padding-left: 0 !important;
font-size: var(--lym-fs-sm, 13px) !important;
line-height: 1.38 !important;
}
body.woocommerce-checkout #lym_pdpd_consent_field label.checkbox,
body.woocommerce-checkout #lym_pdpd_consent_field label,
body.woocommerce-checkout .lym-pdpd-consent-wrapper label {
padding-left: 26px !important;
}
}
body.woocommerce-checkout #lym_pdpd_consent_field input[type="checkbox"],
body.woocommerce-checkout .lym-pdpd-consent-wrapper input[type="checkbox"],
body.woocommerce-checkout .cr-customer-consent input[type="checkbox"],
body.woocommerce-checkout #lym_require_vat_field input[type="checkbox"] {
position: absolute !important; /* Thắng position: static !important ở style.css:5823 */
left: 0 !important;
top: 3px !important;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
max-width: 20px !important;
max-height: 20px !important;
margin: 0 !important;
padding: 0 !important;
accent-color: var(--lym-color-primary, #0f5132) !important;
cursor: pointer !important;
}
body.woocommerce-checkout #lym_pdpd_consent_field label a,
body.woocommerce-checkout .lym-pdpd-consent-wrapper label a,
body.woocommerce-checkout .cr-customer-consent label a,
body.woocommerce-checkout #lym_pdpd_consent_field label span,
body.woocommerce-checkout .cr-customer-consent label span {
display: inline !important;
white-space: normal !important;
font-size: var(--lym-fs-md-sm, 14px) !important;
}
body.woocommerce-checkout #lym_pdpd_consent_field label a,
body.woocommerce-checkout .lym-pdpd-consent-wrapper label a {
color: var(--lym-color-primary, #0f5132) !important;
font-weight: 600 !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
}
/* ==========================================================================
4. Bảng Tổng tiền / Đơn hàng 2 cột nền trắng rõ ràng (không khối xanh đậm)
& Phương thức thanh toán (SePay / COD) dạng thẻ chọn gọn
& Nút "Đặt hàng" / "Tiến hành thanh toán" Primary 48px rộng 100%
========================================================================== */
body.woocommerce-checkout #order_review,
body.woocommerce-checkout .woocommerce-checkout-review-order-table,
body.woocommerce-cart .cart-collaterals,
body.woocommerce-cart .cart_totals,
body.woocommerce-cart .cart_totals .cart_totals_inner,
body.woocommerce-cart .cart_totals table.shop_table {
background-color: var(--lym-color-surface, #ffffff) !important; /* Nền trắng tinh, không dùng khối xanh đậm */
color: var(--lym-color-text, #0f172a) !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
body.woocommerce-cart .cart_totals {
padding: var(--lym-space-6, 24px) !important;
border: 1px solid var(--lym-color-border, #e2e8f0) !important;
border-radius: var(--lym-radius-lg, 16px) !important;
box-shadow: var(--lym-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06)) !important;
}
body.woocommerce-cart .cart_totals .cart_totals_inner {
padding: 0 !important;
border: none !important;
background: transparent !important;
}
body.woocommerce-cart .cart_totals h2 {
font-size: var(--lym-fs-lg, 18px) !important;
font-weight: 700 !important;
color: var(--lym-color-text, #0f172a) !important;
text-transform: none !important;
margin: 0 0 var(--lym-space-4, 16px) 0 !important;
padding: 0 0 var(--lym-space-3, 12px) 0 !important;
border-bottom: 1px solid var(--lym-color-border, #e2e8f0) !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table,
body.woocommerce-cart .cart_totals table.shop_table {
display: table !important; /* Giữ bảng 2 cột chuẩn trên cả Desktop và Mobile */
width: 100% !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
border: 1px solid var(--lym-color-border, #e2e8f0) !important;
border-radius: var(--lym-radius-md, 12px) !important;
overflow: hidden !important;
margin: 0 0 var(--lym-space-5, 20px) 0 !important;
background-color: var(--lym-color-surface, #ffffff) !important;
table-layout: auto !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead {
display: table-header-group !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot,
body.woocommerce-cart .cart_totals table.shop_table tbody {
display: table-row-group !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr,
body.woocommerce-cart .cart_totals table.shop_table tr {
display: table-row !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td,
body.woocommerce-cart .cart_totals table.shop_table tr th,
body.woocommerce-cart .cart_totals table.shop_table tr td {
display: table-cell !important;
background-color: var(--lym-color-surface, #ffffff) !important; /* Nền trắng xuyên suốt bảng 2 cột */
color: var(--lym-color-text, #0f172a) !important;
padding: 12px 14px !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-bottom: 1px solid var(--lym-color-border, #e2e8f0) !important;
font-size: var(--lym-fs-base, 14px) !important;
line-height: 1.45 !important;
vertical-align: middle !important;
text-transform: none !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr td::before,
body.woocommerce-cart .cart_totals table.shop_table tr td::before {
display: none !important;
content: none !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
font-weight: 700 !important;
color: var(--lym-color-text-secondary, #334155) !important;
border-bottom: 1.5px solid var(--lym-color-border-strong, #cbd5e1) !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table th.product-name,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th,
body.woocommerce-cart .cart_totals table.shop_table tr th {
text-align: left !important;
width: 55% !important;
font-weight: 600 !important;
color: var(--lym-color-text-secondary, #334155) !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name {
font-weight: 500 !important;
color: var(--lym-color-text, #0f172a) !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table th.product-total,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-total,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td,
body.woocommerce-cart .cart_totals table.shop_table tr td {
text-align: right !important;
width: 45% !important;
font-weight: 600 !important;
color: var(--lym-color-text, #0f172a) !important;
}
/* Dòng Tổng cộng (tr.order-total): nền trắng, chữ đậm nổi bật, không dùng khối xanh đậm */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td,
body.woocommerce-cart .cart_totals table.shop_table tr.order-total,
body.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
body.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
background-color: var(--lym-color-surface, #ffffff) !important;
border-top: 2px solid var(--lym-color-border-strong, #cbd5e1) !important;
border-bottom: none !important;
padding-top: 14px !important;
padding-bottom: 14px !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
body.woocommerce-cart .cart_totals table.shop_table tr.order-total th {
font-size: var(--lym-fs-md, 16px) !important;
font-weight: 700 !important;
color: var(--lym-color-text, #0f172a) !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td .amount,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td .woocommerce-Price-currencySymbol,
body.woocommerce-cart .cart_totals table.shop_table tr.order-total td .amount,
body.woocommerce-cart .cart_totals table.shop_table tr.order-total td .woocommerce-Price-currencySymbol {
font-size: var(--lym-fs-xl, 20px) !important;
font-weight: 800 !important;
color: var(--lym-color-primary, #0f5132) !important;
}
/* Khối phương thức thanh toán (SePay / COD) dạng thẻ chọn gọn */
body.woocommerce-checkout #payment,
body.woocommerce-checkout .woocommerce-checkout-payment {
background-color: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
body.woocommerce-checkout #payment ul.wc_payment_methods {
list-style: none !important;
margin: 0 0 var(--lym-space-4, 16px) 0 !important;
padding: 0 !important;
border: none !important;
display: flex !important;
flex-direction: column !important;
gap: var(--lym-space-3, 12px) !important;
}
body.woocommerce-checkout #payment ul.wc_payment_methods > li.wc_payment_method {
margin: 0 !important;
padding: var(--lym-space-3, 12px) var(--lym-space-4, 16px) !important;
background-color: var(--lym-color-surface, #ffffff) !important;
border: 1.5px solid var(--lym-color-border, #e2e8f0) !important;
border-radius: var(--lym-radius-md, 12px) !important;
box-sizing: border-box !important;
transition: border-color 0.15s ease, background-color 0.15s ease !important;
}
body.woocommerce-checkout #payment ul.wc_payment_methods > li.wc_payment_method:has(input.input-radio:checked),
body.woocommerce-checkout #payment ul.wc_payment_methods > li.wc_payment_method.lym-payment-card--active {
border-color: var(--lym-color-primary, #0f5132) !important;
background-color: var(--lym-color-primary-soft, #f0fdf4) !important;
}
body.woocommerce-checkout #payment ul.wc_payment_methods > li.wc_payment_method > input.input-radio {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
margin: 0 10px 0 0 !important;
vertical-align: middle !important;
accent-color: var(--lym-color-primary, #0f5132) !important;
cursor: pointer !important;
}
body.woocommerce-checkout #payment ul.wc_payment_methods > li.wc_payment_method > label {
display: inline !important;
font-size: var(--lym-fs-md, 15px) !important;
font-weight: 600 !important;
color: var(--lym-color-text, #0f172a) !important;
line-height: 1.4 !important;
vertical-align: middle !important;
cursor: pointer !important;
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce-checkout #payment ul.wc_payment_methods > li.wc_payment_method .payment_box {
margin: 10px 0 0 0 !important;
padding: 10px 12px !important;
background-color: var(--lym-color-surface, #ffffff) !important;
border: 1px solid var(--lym-color-border, #e2e8f0) !important;
border-radius: var(--lym-radius-sm, 8px) !important;
font-size: var(--lym-fs-sm, 13px) !important;
line-height: 1.5 !important;
color: var(--lym-color-text-secondary, #334155) !important;
box-shadow: none !important;
}
body.woocommerce-checkout #payment ul.wc_payment_methods > li.wc_payment_method .payment_box::before {
display: none !important;
content: none !important;
}
body.woocommerce-checkout #payment ul.wc_payment_methods > li.wc_payment_method .payment_box p {
margin: 0 !important;
font-size: var(--lym-fs-sm, 13px) !important;
line-height: 1.5 !important;
}
/* Nút "Đặt hàng" (#place_order) & "Tiến hành thanh toán" (.checkout-button): Primary 48px rộng 100% */
body.woocommerce-checkout #payment .place-order,
body.woocommerce-cart .wc-proceed-to-checkout {
padding: 0 !important;
margin: var(--lym-space-3, 12px) 0 0 0 !important;
width: 100% !important;
}
body.woocommerce-checkout #place_order,
body.woocommerce-checkout button#place_order,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
height: 48px !important;
min-height: 48px !important;
max-height: 48px !important;
padding: 0 var(--lym-space-5, 20px) !important;
margin: 0 !important;
background-color: var(--lym-color-primary, #0f5132) !important; /* Thắng --lym-color-accent ở style.css:6100 theo yêu cầu nút primary */
border: 1px solid var(--lym-color-primary, #0f5132) !important;
border-radius: var(--lym-radius-sm, 8px) !important;
color: #ffffff !important;
font-size: var(--lym-fs-md, 15px) !important;
font-weight: 700 !important;
text-transform: none !important;
box-shadow: none !important;
cursor: pointer !important;
box-sizing: border-box !important;
}
body.woocommerce-checkout #place_order:hover,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
background-color: var(--lym-color-primary-hover, #0b3d25) !important;
border-color: var(--lym-color-primary-hover, #0b3d25) !important;
color: #ffffff !important;
transform: none !important;
}
/* Ẩn đoạn privacy policy mặc định của WooCommerce nếu đã có checkbox BVDLCN #lym_pdpd_consent_field */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text {
font-size: var(--lym-fs-xs, 12px) !important;
color: var(--lym-color-text-muted, #475569) !important;
line-height: 1.5 !important;
margin-bottom: var(--lym-space-2, 8px) !important;
}
/* ==========================================================================
5. X-051 (P1) & Mini-Cart / Toàn site:
- Nút xóa sản phẩm (mini-cart, giỏ hàng, thanh toán): duy nhất 1 icon "×"
(20px, màu chữ phụ --lym-color-text-secondary, hover đổi màu đỏ --lym-color-danger, vùng bấm 40x40px)
- Cụm số lượng "- 1 +" trên toàn site (mini-cart, giỏ hàng, quick view, thẻ sản phẩm, trang sản phẩm):
một cụm liền khối, viền 1px var(--lym-color-border), bo góc ngoài var(--lym-radius-md),
nút -/+ cùng cỡ (icon 16px), ô giữa không viền riêng, cao 40px trong mini-cart / 48px ở trang giỏ hàng.
- Tên sản phẩm trong mini-cart tối đa 2 dòng (…), cỡ 14px đậm vừa (font-weight: 500).
- Bảng sản phẩm Desktop không cắt chữ cột; Mobile mỗi dòng sản phẩm gọn (ảnh 64px, tên 2 dòng, giá, số lượng, xóa).
========================================================================== */
/* 5.1 Nút xóa sản phẩm "×" (Mini-cart, Giỏ hàng, Thanh toán): 1 icon 20px, vùng bấm 40x40px */
.cart-widget-side a.remove::before,
.cart-widget-side a.remove::after,
.widget_shopping_cart a.remove::before,
.widget_shopping_cart a.remove::after,
.woocommerce-mini-cart a.remove::before,
.woocommerce-mini-cart a.remove::after,
a.remove_from_cart_button::before,
a.remove_from_cart_button::after,
body.woocommerce-cart .product-remove a.remove::before,
body.woocommerce-cart .product-remove a.remove::after,
body.woocommerce-cart table.shop_table a.remove::before,
body.woocommerce-cart table.shop_table a.remove::after,
body.woocommerce-checkout a.remove::before,
body.woocommerce-checkout a.remove::after {
display: none !important; /* Thắng icon ::after (\f112) của WoodMart gây lặp 2 dấu × × */
content: none !important;
}
.cart-widget-side .woocommerce-mini-cart a.remove,
.widget_shopping_cart .woocommerce-mini-cart a.remove,
.woocommerce-mini-cart-item a.remove,
a.remove_from_cart_button,
body.woocommerce-cart .product-remove a.remove,
body.woocommerce-cart table.shop_table a.remove,
body.woocommerce-checkout a.remove {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
max-width: 40px !important;
max-height: 40px !important;
border-radius: var(--lym-radius-sm, 8px) !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
color: var(--lym-color-text-secondary, #4b5563) !important;
font-size: 20px !important;
font-weight: 500 !important;
line-height: 1 !important;
text-decoration: none !important;
padding: 0 !important;
margin: 0 !important;
cursor: pointer !important;
box-sizing: border-box !important;
transition: color 0.15s ease, background-color 0.15s ease !important;
}
.cart-widget-side .woocommerce-mini-cart a.remove:hover,
.widget_shopping_cart .woocommerce-mini-cart a.remove:hover,
.woocommerce-mini-cart-item a.remove:hover,
a.remove_from_cart_button:hover,
body.woocommerce-cart .product-remove a.remove:hover,
body.woocommerce-cart table.shop_table a.remove:hover,
body.woocommerce-checkout a.remove:hover {
background-color: #fef2f2 !important;
color: var(--lym-color-danger, #dc2626) !important;
box-shadow: none !important;
}
/* 5.2 Cụm số lượng "- 1 +" liền khối trên toàn site (Mini-cart 40px, Giỏ hàng / Quick View / PDP 48px) */
div.quantity,
.woocommerce div.quantity,
body.woocommerce-cart div.quantity,
.woocommerce-cart-form div.quantity,
.popup-quick-view div.quantity,
.single-product form.cart div.quantity,
.wd-sticky-btn div.quantity,
.cart-widget-side div.quantity,
.widget_shopping_cart div.quantity,
.woocommerce-mini-cart div.quantity,
.wd-product div.quantity,
.product-grid-item div.quantity {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 48px !important;
min-height: 48px !important;
max-height: 48px !important;
border: 1px solid var(--lym-color-border, #e5e7eb) !important; /* Viền ngoài 1px chuẩn token */
border-radius: var(--lym-radius-md, 12px) !important; /* Bo góc ngoài chuẩn token */
background-color: var(--lym-color-surface, #ffffff) !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
gap: 0 !important;
box-shadow: none !important;
box-sizing: border-box !important;
vertical-align: middle !important;
}
/* Nút - / + cùng cỡ, icon 16px, không viền riêng */
div.quantity .minus,
div.quantity .plus,
div.quantity button.minus,
div.quantity button.plus,
div.quantity input.minus,
div.quantity input.plus,
.single-product form.cart div.quantity .minus,
.single-product form.cart div.quantity .plus,
.popup-quick-view form.cart div.quantity .minus,
.popup-quick-view form.cart div.quantity .plus,
.wd-sticky-btn div.quantity .minus,
.wd-sticky-btn div.quantity .plus {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
height: 46px !important;
min-height: 46px !important;
max-height: 46px !important;
flex: 0 0 40px !important;
border: none !important;
border-width: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--lym-color-text, #111827) !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 1 !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
outline: none !important;
cursor: pointer !important;
box-sizing: border-box !important;
}
div.quantity .minus:hover,
div.quantity .plus:hover,
div.quantity button.minus:hover,
div.quantity button.plus:hover,
div.quantity input.minus:hover,
div.quantity input.plus:hover {
background-color: var(--lym-color-surface-muted, #f1f5f9) !important;
color: var(--lym-color-primary, #0f5132) !important;
}
/* Ô số lượng ở giữa: không viền riêng, không bo góc riêng */
div.quantity input.qty,
div.quantity input[type="number"].qty,
div.quantity input.input-text.qty,
.single-product form.cart div.quantity input.qty,
.popup-quick-view form.cart div.quantity input.qty,
.wd-sticky-btn div.quantity input.qty {
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 46px !important;
min-height: 46px !important;
max-height: 46px !important;
flex: 0 0 44px !important;
border: none !important; /* Ô giữa không viền riêng (thắng input[type="number"] ở style.css:5741) */
border-width: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--lym-color-text, #111827) !important;
font-size: var(--lym-fs-base, 15px) !important;
font-weight: 600 !important;
line-height: 1 !important;
text-align: center !important;
padding: 0 2px !important;
margin: 0 !important;
box-shadow: none !important;
outline: none !important;
-moz-appearance: textfield !important;
-webkit-appearance: none !important;
appearance: none !important;
box-sizing: border-box !important;
}
div.quantity input.qty::-webkit-outer-spin-button,
div.quantity input.qty::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
display: none !important;
}
/* Riêng trong Mini-cart & Thẻ sản phẩm: cụm số lượng cao chuẩn 40px */
.cart-widget-side div.quantity,
.widget_shopping_cart div.quantity,
.woocommerce-mini-cart div.quantity,
.cart-info div.quantity,
.wd-product div.quantity,
.product-grid-item div.quantity {
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
margin: 4px 0 6px 0 !important;
}
.cart-widget-side div.quantity .minus,
.cart-widget-side div.quantity .plus,
.cart-widget-side div.quantity button.minus,
.cart-widget-side div.quantity button.plus,
.widget_shopping_cart div.quantity .minus,
.widget_shopping_cart div.quantity .plus,
.woocommerce-mini-cart div.quantity .minus,
.woocommerce-mini-cart div.quantity .plus,
.wd-product div.quantity .minus,
.wd-product div.quantity .plus,
.product-grid-item div.quantity .minus,
.product-grid-item div.quantity .plus {
width: 36px !important;
min-width: 36px !important;
max-width: 36px !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
flex: 0 0 36px !important;
font-size: 16px !important;
}
.cart-widget-side div.quantity input.qty,
.cart-widget-side div.quantity input[type="number"].qty,
.widget_shopping_cart div.quantity input.qty,
.woocommerce-mini-cart div.quantity input.qty,
.wd-product div.quantity input.qty,
.product-grid-item div.quantity input.qty {
width: 36px !important;
min-width: 36px !important;
max-width: 36px !important;
height: 38px !important;
min-height: 38px !important;
max-height: 38px !important;
flex: 0 0 36px !important;
font-size: var(--lym-fs-md-sm, 14px) !important;
}
/* 5.3 Giao diện Mini-cart (Giỏ hàng trượt bên phải .cart-widget-side):
- Tên sản phẩm tối đa 2 dòng (…), cỡ 14px đậm vừa (font-weight: 500)
- Dòng đơn giá span.quantity không bị biến thành hộp 44px
- Nút xóa 40x40px góc phải trên không đè chữ */
.cart-widget-side .wd-heading .title {
font-size: var(--lym-fs-md, 18px) !important;
font-weight: 700 !important;
color: var(--lym-color-text, #111827) !important;
text-transform: none !important;
}
.cart-widget-side .woocommerce-mini-cart .mini_cart_item,
.widget_shopping_cart .woocommerce-mini-cart .mini_cart_item,
.woocommerce-mini-cart > li.woocommerce-mini-cart-item {
position: relative !important;
display: flex !important;
align-items: flex-start !important;
gap: 12px !important;
padding: 14px 16px !important;
margin: 0 !important;
border-bottom: 1px solid var(--lym-color-border, #e5e7eb) !important;
box-sizing: border-box !important;
}
.cart-widget-side .woocommerce-mini-cart .mini_cart_item .cart-item-image,
.woocommerce-mini-cart > li.woocommerce-mini-cart-item .cart-item-image {
flex: 0 0 64px !important;
width: 64px !important;
height: 64px !important;
margin: 0 !important;
border-radius: var(--lym-radius-sm, 8px) !important;
border: 1px solid var(--lym-color-border, #e5e7eb) !important;
background-color: var(--lym-color-surface, #ffffff) !important;
overflow: hidden !important;
}
.cart-widget-side .woocommerce-mini-cart .mini_cart_item .cart-item-image img,
.woocommerce-mini-cart > li.woocommerce-mini-cart-item .cart-item-image img {
width: 64px !important;
height: 64px !important;
min-width: 64px !important;
max-width: 64px !important;
object-fit: contain !important;
margin: 0 !important;
display: block !important;
}
.cart-widget-side .woocommerce-mini-cart .mini_cart_item .cart-info,
.woocommerce-mini-cart > li.woocommerce-mini-cart-item .cart-info {
flex: 1 1 auto !important;
min-width: 0 !important;
padding-right: 40px !important; /* Chừa chỗ cho nút xóa 40x40px góc phải */
padding-inline-end: 40px !important;
}
.cart-widget-side .woocommerce-mini-cart .mini_cart_item .remove,
.woocommerce-mini-cart > li.woocommerce-mini-cart-item > a.remove {
position: absolute !important;
top: 8px !important;
right: 8px !important;
inset-inline-end: 8px !important;
z-index: 4 !important;
}
/* Tên sản phẩm trong mini-cart: tối đa 2 dòng (…), cỡ 14px đậm vừa (500) */
.cart-widget-side .cart-info .wd-entities-title,
.cart-widget-side .woocommerce-mini-cart .wd-entities-title,
.widget_shopping_cart .cart-info .wd-entities-title,
.woocommerce-mini-cart .cart-info .wd-entities-title,
.woocommerce-mini-cart-item .wd-entities-title,
.woocommerce-mini-cart-item .wd-entities-title a {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-size: var(--lym-fs-md-sm, 14px) !important; /* Đúng 14px, không phải 24px */
font-weight: 500 !important; /* Đậm vừa */
line-height: 20px !important;
max-height: 40px !important;
color: var(--lym-color-text, #111827) !important;
margin: 0 0 4px 0 !important;
padding: 0 !important;
white-space: normal !important;
word-break: break-word !important;
text-transform: none !important;
}
/* Dòng số lượng x đơn giá (span.quantity) trong mini-cart */
.cart-widget-side .cart-info span.quantity,
.widget_shopping_cart .cart-info span.quantity,
.woocommerce-mini-cart .cart-info span.quantity,
.woocommerce-mini-cart-item span.quantity {
display: block !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
padding: 0 !important;
margin: 2px 0 0 0 !important;
font-size: var(--lym-fs-sm, 13px) !important;
font-weight: 500 !important;
line-height: 1.4 !important;
color: var(--lym-color-text-secondary, #4b5563) !important;
}
.cart-widget-side .cart-info span.quantity .woocommerce-Price-amount,
.woocommerce-mini-cart-item span.quantity .woocommerce-Price-amount {
font-weight: 700 !important;
color: var(--lym-color-primary, #0f5132) !important;
}
/* Desktop Cart Table (>= 768px): cố định phân bổ cột, không tràn ngang, không cắt cột Tạm tính */
@media (min-width: 768px) {
body.woocommerce-cart .woocommerce-cart-form {
background-color: var(--lym-color-surface, #ffffff) !important;
border: 1px solid var(--lym-color-border, #e2e8f0) !important;
border-radius: var(--lym-radius-lg, 16px) !important;
padding: var(--lym-space-5, 20px) !important;
box-shadow: var(--lym-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06)) !important;
overflow: visible !important;
}
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents {
width: 100% !important;
max-width: 100% !important;
table-layout: fixed !important; /* Đảm bảo tổng chiều rộng 6 cột luôn = 100% khung trái, không cắt chữ */
border-collapse: collapse !important;
margin: 0 !important;
}
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents thead th {
padding: 10px 8px !important;
font-size: var(--lym-fs-xs, 12px) !important;
font-weight: 700 !important;
color: var(--lym-color-text-secondary, #334155) !important;
background-color: var(--lym-color-surface-alt, #f8fafc) !important;
border-bottom: 1.5px solid var(--lym-color-border, #e2e8f0) !important;
text-transform: none !important;
white-space: nowrap !important;
}
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents tbody td {
padding: 14px 8px !important;
vertical-align: middle !important;
border-bottom: 1px solid var(--lym-color-border, #e2e8f0) !important;
font-size: var(--lym-fs-base, 14px) !important;
}
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents th.product-remove,
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents td.product-remove {
width: 48px !important;
text-align: center !important;
padding-left: 4px !important;
padding-right: 4px !important;
}
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents th.product-thumbnail,
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents td.product-thumbnail {
width: 72px !important;
text-align: center !important;
}
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents td.product-thumbnail img {
width: 60px !important;
height: 60px !important;
max-width: 60px !important;
object-fit: contain !important;
border-radius: var(--lym-radius-sm, 8px) !important;
border: 1px solid var(--lym-color-border, #e2e8f0) !important;
}
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents th.product-name,
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents td.product-name {
width: auto !important;
text-align: left !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
}
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents td.product-name a {
font-size: var(--lym-fs-md-sm, 14px) !important;
font-weight: 600 !important;
color: var(--lym-color-text, #0f172a) !important;
line-height: 1.4 !important;
text-decoration: none !important;
}
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents th.product-price,
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents td.product-price {
width: 105px !important;
text-align: right !important;
white-space: nowrap !important;
}
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents th.product-quantity,
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents td.product-quantity {
width: 136px !important;
text-align: center !important;
}
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents th.product-subtotal,
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents td.product-subtotal {
width: 116px !important;
text-align: right !important;
white-space: nowrap !important;
padding-right: 10px !important;
font-weight: 700 !important;
color: var(--lym-color-primary, #0f5132) !important;
}
}
/* Hàng mã ưu đãi (#coupon_code + Áp dụng mã + Cập nhật giỏ hàng): cao chuẩn 44px */
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents td.actions {
padding: 16px 0 4px 0 !important;
border-bottom: none !important;
}
body.woocommerce-cart .woocommerce-cart-form .actions {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: var(--lym-space-3, 12px) !important;
}
body.woocommerce-cart .woocommerce-cart-form .coupon {
display: flex !important;
align-items: center !important;
gap: var(--lym-space-2, 8px) !important;
flex-wrap: nowrap !important;
margin: 0 !important;
}
body.woocommerce-cart .woocommerce-cart-form .coupon input#coupon_code {
width: 200px !important;
max-width: 100% !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 0 12px !important;
margin: 0 !important;
border: 1px solid var(--lym-color-border-strong, #cbd5e1) !important;
border-radius: var(--lym-radius-sm, 8px) !important;
font-size: var(--lym-fs-base, 14px) !important;
box-sizing: border-box !important;
}
body.woocommerce-cart .woocommerce-cart-form .coupon button[name="apply_coupon"],
body.woocommerce-cart .woocommerce-cart-form .actions button[name="update_cart"] {
height: 44px !important; /* X-051: đồng bộ cao 44px với #coupon_code */
min-height: 44px !important;
max-height: 44px !important;
padding: 0 16px !important;
margin: 0 !important;
border-radius: var(--lym-radius-sm, 8px) !important;
font-size: var(--lym-fs-base, 14px) !important;
font-weight: 600 !important;
text-transform: none !important;
white-space: nowrap !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
body.woocommerce-cart .woocommerce-cart-form .coupon button[name="apply_coupon"] {
background-color: var(--lym-color-primary, #0f5132) !important;
border: 1px solid var(--lym-color-primary, #0f5132) !important;
color: #ffffff !important;
}
/* Mobile Cart (< 768px): mỗi dòng sản phẩm gọn (ảnh 64px, tên 2 dòng, giá, số lượng, xóa) */
@media (max-width: 767px) {
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents,
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents tbody {
display: block !important;
width: 100% !important;
border: none !important;
}
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents thead {
display: none !important;
}
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item {
position: relative !important;
display: grid !important; /* Bố cục thẻ ngang gọn: cột trái ảnh 64px, cột phải thông tin */
grid-template-columns: 64px minmax(0, 1fr) !important;
column-gap: 12px !important;
row-gap: 6px !important;
align-items: start !important;
padding: 12px !important;
margin: 0 0 12px 0 !important;
background-color: var(--lym-color-surface, #ffffff) !important;
border: 1px solid var(--lym-color-border, #e2e8f0) !important;
border-radius: var(--lym-radius-md, 12px) !important;
box-shadow: var(--lym-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06)) !important;
box-sizing: border-box !important;
}
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item td {
display: block !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
text-align: left !important;
box-sizing: border-box !important;
}
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item td::before {
display: none !important; /* Ẩn nhãn lặp SẢN PHẨM / GIÁ / SỐ LƯỢNG mặc định của WooCommerce mobile */
content: none !important;
}
/* Ảnh sản phẩm 64x64px bên trái */
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item td.product-thumbnail {
grid-column: 1 / 2 !important;
grid-row: 1 / 4 !important;
width: 64px !important;
height: 64px !important;
min-width: 64px !important;
}
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item td.product-thumbnail a,
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item td.product-thumbnail img {
display: block !important;
width: 64px !important;
height: 64px !important;
min-width: 64px !important;
min-height: 64px !important;
max-width: 64px !important;
max-height: 64px !important;
object-fit: contain !important;
border-radius: var(--lym-radius-sm, 8px) !important;
border: 1px solid var(--lym-color-border, #e2e8f0) !important;
}
/* Nút xóa × 40x40px gọn góc phải trên của dòng sản phẩm */
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item td.product-remove {
position: absolute !important;
top: 6px !important;
right: 6px !important;
width: 40px !important;
height: 40px !important;
z-index: 2 !important;
}
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item td.product-remove a.remove {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
max-width: 40px !important;
max-height: 40px !important;
font-size: 20px !important;
}
/* Tên sản phẩm tối đa 2 dòng */
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item td.product-name {
grid-column: 2 / 3 !important;
padding-right: 40px !important;
}
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item td.product-name a {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
font-size: var(--lym-fs-md-sm, 14px) !important;
font-weight: 600 !important;
line-height: 1.4 !important;
color: var(--lym-color-text, #0f172a) !important;
text-decoration: none !important;
}
/* Đơn giá */
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item td.product-price {
grid-column: 2 / 3 !important;
font-size: var(--lym-fs-sm, 13px) !important;
color: var(--lym-color-text-muted, #475569) !important;
font-weight: 500 !important;
}
/* Số lượng & Tạm tính nằm gọn trên cột phải */
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item td.product-quantity {
grid-column: 2 / 3 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-top: 2px !important;
}
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item td.product-subtotal {
grid-column: 2 / 3 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding-top: 6px !important;
margin-top: 2px !important;
border-top: 1px dashed var(--lym-color-border, #e2e8f0) !important;
font-size: var(--lym-fs-base, 14px) !important;
font-weight: 700 !important;
color: var(--lym-color-primary, #0f5132) !important;
}
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item td.product-subtotal::before {
display: inline !important;
content: "Tạm tính:" !important;
font-size: var(--lym-fs-xs, 12px) !important;
font-weight: 500 !important;
color: var(--lym-color-text-muted, #475569) !important;
}
/* Khu vực Coupon & Cập nhật giỏ hàng trên Mobile */
body.woocommerce-cart table.shop_table.woocommerce-cart-form__contents tr:last-child {
display: block !important;
width: 100% !important;
}
body.woocommerce-cart .woocommerce-cart-form .actions {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
width: 100% !important;
}
body.woocommerce-cart .woocommerce-cart-form .coupon {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 8px !important;
width: 100% !important;
}
body.woocommerce-cart .woocommerce-cart-form .coupon input#coupon_code {
width: 100% !important;
}
body.woocommerce-cart .woocommerce-cart-form .actions button[name="update_cart"] {
width: 100% !important;
}
body.woocommerce-cart .cart_totals {
padding: var(--lym-space-4, 16px) !important;
margin-top: var(--lym-space-3, 12px) !important;
}
}
/* header.css */
/* Phần header — số đếm giỏ hàng / yêu thích: dạng viên thuốc tự giãn theo số chữ số, không đè lên icon. */
.wd-header-cart .wd-cart-number,
.wd-header-wishlist .wd-tools-count,
.wd-header-compare .wd-tools-count {
width: auto;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
line-height: 18px;
box-sizing: border-box;
top: -7px;
inset-inline-end: -10px;
box-shadow: 0 0 0 2px #fff;
}
/* Thanh điều hướng dính (cuộn trang), máy tính — hàng "Từ khóa hot" nằm trong ô tìm kiếm khiến ô nhập sát mép trên (1px) và
hàng từ khóa sát mép dưới trong thanh cao 67px. Giữ nguyên chiều cao thanh: ẩn hàng từ khóa khi dính để ô tìm kiếm
nằm giữa thanh, cách đều trên/dưới (hàng từ khóa vẫn hiện ở đầu trang). */
@media (min-width: 1025px) {
.whb-sticked .whb-general-header .lym-header-hot-keywords {
display: none;
}
.whb-sticked .whb-general-header .wd-search-form {
align-self: center;
}
}
/* home.css */
/**
* Lym Child Theme — Homepage Scoped Styles (W27-homepage)
*
* Phạm vi: chỉ giới hạn trong `body.home` và các thành phần `.lym-*` của trang chủ.
* Tuân thủ:
* 1. Khôi phục màu gốc & emoji màu gốc như commit b47ec23 (nút cam #d97706, gradient banner, badge).
* 2. Cỡ chữ/kích thước trang chủ không to hơn b47ec23:
* - Tiêu đề Hero: desktop 28px, mobile 20px (X-050).
* - 2 banner phụ: tiêu đề 16px, mô tả 12px, tag 12px.
* - Thanh cam kết: icon 44x44px (mobile 36x36px), tiêu đề 14px (mobile 13px), mô tả 12px.
* - Ô Danh mục nổi bật: vòng icon 56x56px, tên 13px (2 dòng đồng đều), số đếm 12px màu #4b5563 đạt WCAG AA (X-055).
* - Badge và tiêu đề viết hoa đầu câu (text-transform: none).
* 3. Hero carousel: tiêu đề tối đa 2 dòng; mô tả tối đa 2 dòng + nút chữ "Xem thêm"/"Thu gọn" inline gạch chân;
* chiều cao slide ổn định (330px desktop / 280px mobile), nút CTA không đè lên chấm slider trên mobile (X-050).
* 4. X-053: 4 thẻ bài viết Cẩm nang cuối trang chủ khung ảnh tỉ lệ 16:9, hiển thị đầy đủ ảnh.
* 5. Khối đăng ký bản tin (.lym-newsletter-box, mục 22 addendum 8): đồng bộ token, 2 cột desktop / 1 cột mobile.
* 6. Không dùng transform/animation trang trí khi hover.
*/
/* ==========================================================================
1. HERO CAROUSEL & 2 SUB-BANNERS (Mục 1, 2, 3 — X-050, X-047)
========================================================================== */
body.home .lym-home-wrap .lym-hero-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--lym-space-4, 16px);
align-items: stretch;
}
body.home .lym-home-wrap .lym-hero-main {
position: relative;
border-radius: var(--lym-radius-lg, 16px);
overflow: hidden;
min-height: 330px;
background: linear-gradient(135deg, #0f5132 0%, #146c43 55%, #198754 100%);
color: #ffffff;
display: flex;
align-items: stretch;
}
body.home .lym-home-wrap .lym-hero-slides {
width: 100%;
height: 100%;
position: relative;
}
body.home .lym-home-wrap .lym-hero-slide {
display: none;
padding: 32px 40px 56px;
min-height: 330px;
height: 330px;
align-items: center;
justify-content: space-between;
gap: var(--lym-space-5, 24px);
box-sizing: border-box;
}
body.home .lym-home-wrap .lym-hero-slide.is-active {
display: flex;
}
body.home .lym-home-wrap .lym-hero-slide.is-desc-expanded {
height: auto !important; /* Cho phép mở rộng chiều cao khi bấm Xem thêm */
min-height: 330px;
padding-bottom: 60px;
}
body.home .lym-home-wrap .lym-hero-slide--2 {
background: linear-gradient(135deg, #1e3a5f 0%, #0f5132 60%, #15803d 100%);
}
body.home .lym-home-wrap .lym-hero-slide--3 {
background: linear-gradient(135deg, #78350f 0%, #b45309 55%, #d97706 100%);
}
body.home .lym-home-wrap .lym-hero-content {
max-width: 64%;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
}
body.home .lym-home-wrap .lym-hero-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.18);
color: #fef3c7;
font-size: var(--lym-fs-xs, 12px) !important; /* Thắng rule .entry-content trong style.css */
font-weight: 700;
text-transform: none !important; /* Viết hoa đầu câu theo yêu cầu chủ dự án */
letter-spacing: 0.01em;
padding: 4px 12px;
border-radius: var(--lym-radius-pill, 999px);
margin-bottom: 10px;
line-height: 1.4;
}
/* Tiêu đề Hero: Desktop 28px, tối đa 2 dòng */
body.home .entry-content h1.lym-hero-title,
body.home .entry-content h2.lym-hero-title,
body.home .lym-home-wrap .lym-hero-title {
font-size: var(--lym-fs-2xl, 28px) !important; /* Thắng .entry-content h1/h2 trong style.css */
font-weight: 800 !important;
color: #ffffff !important;
line-height: 1.25 !important;
margin: 0 0 10px !important;
text-transform: none !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
max-height: 70px;
}
/* Mô tả Hero: 14px, tối đa 2 dòng + nút chữ Xem thêm / Thu gọn inline */
body.home .entry-content p.lym-hero-desc,
body.home .lym-home-wrap .lym-hero-desc {
font-size: var(--lym-fs-md-sm, 14px) !important; /* Không to hơn b47ec23 */
line-height: 1.5 !important;
color: rgba(255, 255, 255, 0.92) !important;
margin: 0 0 18px !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
max-height: 42px;
}
body.home .lym-home-wrap .lym-hero-slide.is-desc-expanded .lym-hero-desc,
body.home .lym-home-wrap .lym-hero-desc.is-measuring-text {
display: block !important;
-webkit-line-clamp: unset !important;
max-height: none !important;
overflow: visible !important;
}
body.home .lym-home-wrap .lym-hero-desc-toggle {
display: inline !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 2px !important;
margin: 0 !important;
min-height: 0 !important;
height: auto !important;
font-size: var(--lym-fs-md-sm, 14px) !important;
font-weight: 600 !important;
line-height: inherit !important;
color: #fde68a !important;
text-decoration: underline !important;
text-transform: none !important;
cursor: pointer !important;
vertical-align: baseline !important;
}
body.home .lym-home-wrap .lym-hero-desc-toggle[hidden] {
display: none !important;
}
body.home .lym-home-wrap .lym-hero-desc-toggle:hover,
body.home .lym-home-wrap .lym-hero-desc-toggle:focus-visible {
color: #ffffff !important;
}
/* Nút CTA Hero: màu cam gốc #d97706 (slide 3 nền xanh đậm #0f5132), không transform */
body.home .lym-home-wrap a.lym-hero-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: var(--lym-color-accent, #d97706) !important; /* Khôi phục màu cam gốc #d97706 */
color: #ffffff !important;
font-weight: 700;
font-size: var(--lym-fs-md-sm, 14px) !important;
height: 44px;
min-height: 44px;
padding: 0 22px;
border-radius: var(--lym-control-radius, 8px);
text-decoration: none;
text-transform: none !important;
transform: none !important;
transition: background-color 0.15s ease;
}
body.home .lym-home-wrap a.lym-hero-btn:hover {
background-color: var(--lym-color-accent-hover, #b45309) !important;
color: #ffffff !important;
transform: none !important;
}
body.home .lym-home-wrap .lym-hero-slide--3 a.lym-hero-btn {
background-color: var(--lym-color-primary, #0f5132) !important;
}
body.home .lym-home-wrap .lym-hero-slide--3 a.lym-hero-btn:hover {
background-color: var(--lym-color-primary-hover, #146c43) !important;
}
/* Chấm slider: vùng chạm 44x44px trong suốt, viên chấm 8x8px / 24x8px active (X-047) */
body.home .lym-home-wrap .lym-hero-dots {
position: absolute;
bottom: 10px;
left: 32px;
display: flex;
align-items: center;
gap: 0;
z-index: 5;
}
body.home .lym-home-wrap button.lym-hero-dot,
body.home .lym-home-wrap .lym-hero-dot {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
max-width: 44px !important;
max-height: 44px !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
border-radius: var(--lym-radius-pill, 999px) !important;
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
}
body.home .lym-home-wrap button.lym-hero-dot::before,
body.home .lym-home-wrap .lym-hero-dot::before {
content: "" !important;
display: block !important;
width: 8px !important;
height: 8px !important;
border-radius: var(--lym-radius-pill, 999px) !important;
background-color: rgba(255, 255, 255, 0.5) !important;
transition: width 0.15s ease, background-color 0.15s ease !important;
}
body.home .lym-home-wrap button.lym-hero-dot.is-active::before,
body.home .lym-home-wrap .lym-hero-dot.is-active::before {
width: 24px !important;
background-color: #f59e0b !important;
}
/* 2 Banner phụ bên phải: kích thước và cỡ chữ không to hơn b47ec23 */
body.home .lym-home-wrap .lym-hero-side {
display: flex;
flex-direction: column;
gap: var(--lym-space-4, 16px);
}
body.home .lym-home-wrap .lym-sub-banner {
flex: 1;
border-radius: var(--lym-radius-lg, 16px);
padding: 18px 20px;
color: #ffffff;
text-decoration: none;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
transform: none !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.home .lym-home-wrap .lym-sub-banner:hover {
color: #ffffff;
transform: none !important;
}
body.home .lym-home-wrap .lym-sub-banner--top {
background: linear-gradient(135deg, #b45309 0%, #d97706 60%, #f59e0b 100%) !important;
}
body.home .lym-home-wrap .lym-sub-banner--bottom {
background: linear-gradient(135deg, #065f46 0%, #047857 60%, #10b981 100%) !important;
}
body.home .lym-home-wrap .lym-sub-banner__tag {
font-size: var(--lym-fs-xs, 12px) !important;
font-weight: 700;
text-transform: none !important;
letter-spacing: 0.01em;
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
padding: 3px 9px;
border-radius: var(--lym-radius-pill, 999px);
align-self: flex-start;
margin-bottom: 6px;
line-height: 1.4;
}
body.home .entry-content h3.lym-sub-banner__title,
body.home .lym-home-wrap .lym-sub-banner__title {
font-size: 16px !important; /* Không to hơn b47ec23 (17px), thuộc bậc 16px của thang chữ */
font-weight: 700 !important;
line-height: 1.3 !important;
color: #ffffff !important;
margin: 0 0 4px !important;
text-transform: none !important;
}
body.home .entry-content p.lym-sub-banner__text,
body.home .lym-home-wrap .lym-sub-banner__text {
font-size: var(--lym-fs-xs, 12px) !important; /* Không to hơn b47ec23 (12.5px) */
line-height: 1.45 !important;
color: rgba(255, 255, 255, 0.94) !important;
margin: 0 !important;
}
/* ==========================================================================
2. THANH 4 CAM KẾT (Mục 1 & 2 — Không to hơn b47ec23)
========================================================================== */
body.home .lym-home-wrap .lym-commitments-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
background: var(--lym-color-surface, #ffffff);
border: 1px solid var(--lym-color-border-subtle, #e5e7eb);
border-radius: var(--lym-radius-lg, 16px);
padding: 16px 20px;
box-shadow: var(--lym-shadow-sm);
}
body.home .lym-home-wrap .lym-commitment-item {
display: flex;
align-items: center;
gap: 12px;
}
body.home .lym-home-wrap .lym-commitment-icon {
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--lym-color-primary-soft, #e8f5ee);
color: var(--lym-color-primary, #0f5132);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
body.home .entry-content h3.lym-commitment-title,
body.home .lym-home-wrap .lym-commitment-title {
font-size: var(--lym-fs-md-sm, 14px) !important; /* Đúng 14px như b47ec23 */
font-weight: 700 !important;
line-height: 1.3 !important;
color: var(--lym-color-text, #111827) !important;
margin: 0 0 2px !important;
text-transform: none !important;
}
body.home .entry-content p.lym-commitment-desc,
body.home .lym-home-wrap .lym-commitment-desc {
font-size: var(--lym-fs-xs, 12px) !important; /* Đúng 12px như b47ec23 */
line-height: 1.4 !important;
color: var(--lym-color-text-secondary, #4b5563) !important;
margin: 0 !important;
}
/* ==========================================================================
3. DANH MỤC NỔI BẬT (Mục 2 & X-055 — Tương phản .lym-cat-icon-count >= 4.5:1)
========================================================================== */
body.home .lym-home-wrap .lym-cat-icon-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 12px;
}
body.home .lym-home-wrap .lym-cat-icon-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 12px 8px;
border-radius: var(--lym-radius-md, 10px);
border: 1px solid transparent;
background: #f8fafc;
text-decoration: none;
color: var(--lym-color-text, #111827);
transform: none !important;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.home .lym-home-wrap .lym-cat-icon-card:hover {
background: var(--lym-color-primary-soft, #e8f5ee);
border-color: rgba(15, 81, 50, 0.25);
color: var(--lym-color-primary, #0f5132);
transform: none !important;
}
body.home .lym-home-wrap .lym-cat-icon-circle {
width: 56px;
height: 56px;
border-radius: 16px;
background: #ffffff;
border: 1px solid var(--lym-color-border-subtle, #e5e7eb);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
overflow: hidden;
flex-shrink: 0;
}
body.home .lym-home-wrap .lym-cat-icon-circle img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body.home .lym-home-wrap .lym-cat-icon-name {
font-size: var(--lym-fs-sm, 13px) !important; /* Không to hơn b47ec23 */
font-weight: 600;
line-height: 1.3;
min-height: 34px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
body.home .lym-home-wrap .lym-cat-icon-count {
font-size: var(--lym-fs-xs, 12px) !important;
color: var(--lym-color-text-secondary, #4b5563) !important; /* X-055: #4b5563 trên #f8fafc đạt 7.15:1 >= 4.5:1 */
font-weight: 500;
margin-top: 2px;
}
/* ==========================================================================
4. FLASH SALE, PILL NHU CẦU, TAB SẢN PHẨM, NGÀNH HÀNG, HỢP TÁC (Mục 1 & 2)
========================================================================== */
body.home .lym-home-wrap .lym-section-title,
body.home .lym-home-wrap .lym-flash-title {
font-size: var(--lym-fs-lg, 20px) !important; /* Đúng 20px trên desktop như b47ec23 */
font-weight: 700 !important;
line-height: 1.3 !important;
text-transform: none !important; /* Viết hoa đầu câu */
}
body.home .lym-home-wrap .lym-flash-title {
color: var(--lym-color-danger-dark, #b91c1c) !important;
font-weight: 800 !important;
}
body.home .lym-home-wrap .lym-need-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: var(--lym-radius-pill, 999px);
background: #f8fafc;
border: 1px solid var(--lym-color-border-subtle, #e5e7eb);
color: var(--lym-color-text, #111827);
font-size: var(--lym-fs-md-sm, 14px) !important;
font-weight: 600;
text-decoration: none;
transform: none !important;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.home .lym-home-wrap .lym-need-pill:hover {
background: var(--lym-color-primary, #0f5132);
border-color: var(--lym-color-primary, #0f5132);
color: #ffffff;
transform: none !important;
}
body.home .lym-home-wrap .lym-need-pill__count {
font-size: var(--lym-fs-xs, 12px) !important;
background: rgba(15, 81, 50, 0.1);
color: var(--lym-color-primary, #0f5132);
padding: 1px 7px;
border-radius: var(--lym-radius-pill, 999px);
}
body.home .lym-home-wrap .lym-need-pill:hover .lym-need-pill__count {
background: rgba(255, 255, 255, 0.22);
color: #ffffff;
}
body.home .lym-home-wrap .lym-btn-partner-primary {
background-color: var(--lym-color-accent, #d97706) !important;
color: #ffffff !important;
font-weight: 700;
font-size: var(--lym-fs-md-sm, 14px) !important;
padding: 11px 20px;
border-radius: var(--lym-control-radius, 8px);
text-decoration: none;
text-transform: none !important;
}
body.home .lym-home-wrap .lym-btn-partner-primary:hover {
background-color: var(--lym-color-accent-hover, #b45309) !important;
color: #ffffff !important;
}
/* ==========================================================================
5. CẨM NANG SỨC KHỎE & SẮC ĐẸP — 4 THẺ BÀI VIẾT TỈ LỆ 16:9 (Mục 4 — X-053)
========================================================================== */
body.home .lym-home-wrap .lym-blog-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--lym-space-4, 16px);
}
body.home .lym-home-wrap .lym-blog-card {
background: #ffffff;
border: 1px solid var(--lym-color-border-subtle, #e5e7eb);
border-radius: var(--lym-radius-md, 10px);
overflow: hidden;
display: flex;
flex-direction: column;
transform: none !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.home .lym-home-wrap .lym-blog-card:hover {
border-color: var(--lym-color-primary, #0f5132);
box-shadow: var(--lym-shadow-md);
transform: none !important;
}
body.home .lym-home-wrap .lym-blog-card__thumb {
aspect-ratio: 16 / 9 !important; /* X-053: chuẩn hóa tỉ lệ 16:9 thay vì 16:10 */
width: 100% !important;
height: auto !important;
background: linear-gradient(135deg, #e8f5ee 0%, #d1fae5 100%);
display: block;
overflow: hidden;
position: relative;
text-decoration: none;
}
body.home .lym-home-wrap .lym-blog-card__thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
body.home .lym-home-wrap .lym-blog-card__body {
padding: 14px;
display: flex;
flex-direction: column;
flex: 1;
}
body.home .lym-home-wrap .lym-blog-card__meta {
font-size: var(--lym-fs-xs, 12px) !important;
color: var(--lym-color-text-secondary, #4b5563) !important; /* Đạt tương phản WCAG AA 7.56:1 */
margin-bottom: 6px;
}
body.home .entry-content h3.lym-blog-card__title,
body.home .lym-home-wrap .lym-blog-card__title,
body.home .lym-home-wrap .lym-blog-card__title a {
font-size: var(--lym-fs-base, 15px) !important; /* Gần sát 14.5px của b47ec23, không phóng lên 18px */
font-weight: 700 !important;
line-height: 1.4 !important;
color: var(--lym-color-text, #111827) !important;
text-decoration: none;
text-transform: none !important;
}
body.home .lym-home-wrap .lym-blog-card__title {
margin: 0 0 8px !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.home .lym-home-wrap .lym-blog-card__title a:hover {
color: var(--lym-color-primary, #0f5132) !important;
}
body.home .entry-content p.lym-blog-card__excerpt,
body.home .lym-home-wrap .lym-blog-card__excerpt {
font-size: var(--lym-fs-sm, 13px) !important;
line-height: 1.5 !important;
color: var(--lym-color-text-secondary, #4b5563) !important;
margin: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* ==========================================================================
6. KHỐI ĐĂNG KÝ BẢN TIN (.lym-newsletter-box — Mục 5 / Addendum 8 Mục 22)
========================================================================== */
body.home .lym-home-wrap .lym-newsletter-box {
background: var(--lym-color-primary-soft, #e8f5ee);
border: 1px solid #a7f3d0;
border-radius: var(--lym-radius-lg, 16px);
padding: 24px 28px;
display: grid;
grid-template-columns: 5fr 7fr;
align-items: center;
gap: var(--lym-space-5, 24px);
box-sizing: border-box;
}
body.home .lym-home-wrap .lym-newsletter-info h3 {
font-size: var(--lym-fs-md, 18px) !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: var(--lym-color-primary, #0f5132) !important;
margin: 0 0 6px !important;
text-transform: none !important;
}
body.home .lym-home-wrap .lym-newsletter-info p {
font-size: var(--lym-fs-md-sm, 14px) !important;
line-height: 1.5 !important;
color: var(--lym-color-text-secondary, #4b5563) !important;
margin: 0 !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
body.home .lym-home-wrap .lym-newsletter-form {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
max-width: 100%;
}
body.home .lym-home-wrap .lym-newsletter-inputs {
display: grid;
grid-template-columns: 1.35fr 1fr auto;
gap: 8px;
align-items: center;
width: 100%;
}
body.home .lym-home-wrap .lym-newsletter-inputs input[type="email"],
body.home .lym-home-wrap .lym-newsletter-inputs input[type="tel"] {
height: 48px !important; /* Mục 22 Addendum 8: cùng chiều cao 48px */
min-height: 48px !important;
max-height: 48px !important;
padding: 0 14px !important;
border: 1px solid var(--lym-color-border-subtle, #e5e7eb) !important;
border-radius: var(--lym-control-radius, 8px) !important;
background-color: #ffffff !important;
color: var(--lym-color-text, #111827) !important;
font-size: var(--lym-fs-md-sm, 14px) !important;
box-sizing: border-box !important;
margin: 0 !important;
}
body.home .lym-home-wrap .lym-newsletter-inputs button[type="submit"] {
height: 48px !important; /* Mục 22 Addendum 8: cùng chiều cao 48px */
min-height: 48px !important;
max-height: 48px !important;
padding: 0 22px !important;
border: 1px solid var(--lym-color-primary, #0f5132) !important;
border-radius: var(--lym-control-radius, 8px) !important;
background-color: var(--lym-color-primary, #0f5132) !important;
color: #ffffff !important;
font-size: var(--lym-fs-md-sm, 14px) !important;
font-weight: 700 !important;
text-transform: none !important;
white-space: nowrap !important;
cursor: pointer !important;
margin: 0 !important;
}
body.home .lym-home-wrap .lym-newsletter-inputs button[type="submit"]:hover {
background-color: var(--lym-color-primary-hover, #146c43) !important;
}
body.home .lym-home-wrap .lym-newsletter-consent {
display: flex !important;
align-items: flex-start !important; /* Căn checkbox khớp dòng đầu của câu đồng ý BVDLCN */
gap: 8px;
font-size: var(--lym-fs-sm, 13px) !important;
line-height: 1.45 !important;
color: var(--lym-color-text-secondary, #4b5563) !important;
cursor: pointer;
margin: 0 !important;
}
body.home .lym-home-wrap .lym-newsletter-consent input[type="checkbox"] {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
margin: 1px 0 0 !important;
accent-color: var(--lym-color-primary, #0f5132);
flex-shrink: 0;
cursor: pointer;
}
body.home .lym-home-wrap .lym-newsletter-consent a {
color: var(--lym-color-primary, #0f5132) !important;
font-weight: 600;
text-decoration: underline;
font-size: inherit !important;
}
/* ==========================================================================
7. RESPONSIVE TABLET & MOBILE (<= 1024px & <= 767px — X-050)
========================================================================== */
@media (max-width: 1024px) {
body.home .lym-home-wrap .lym-hero-grid {
grid-template-columns: 1fr;
}
body.home .lym-home-wrap .lym-hero-side {
flex-direction: row;
}
body.home .lym-home-wrap .lym-commitments-grid {
grid-template-columns: repeat(2, 1fr);
}
body.home .lym-home-wrap .lym-cat-icon-grid {
grid-template-columns: repeat(4, 1fr);
}
body.home .lym-home-wrap .lym-blog-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.home .lym-home-wrap .lym-newsletter-box {
grid-template-columns: 1fr !important;
gap: 16px;
}
}
@media (max-width: 767px) {
body.home .lym-home-wrap {
gap: 16px;
}
body.home .lym-home-wrap .lym-section-card,
body.home .lym-home-wrap .lym-flash-sale-box {
padding: 16px;
}
body.home .lym-home-wrap .lym-section-title,
body.home .lym-home-wrap .lym-flash-title {
font-size: var(--lym-fs-md, 18px) !important;
}
/* X-050: Hero slide trên mobile 390x844 — tiêu đề 20px, không đè nút CTA lên chấm slider */
body.home .lym-home-wrap .lym-hero-main {
min-height: 280px;
}
body.home .lym-home-wrap .lym-hero-slide {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start !important; /* Ngăn space-between đẩy nút CTA đè xuống chấm slider */
padding: 18px 18px 54px !important;
min-height: 280px !important;
height: 280px !important;
gap: 0 !important;
}
body.home .lym-home-wrap .lym-hero-slide.is-desc-expanded {
height: auto !important;
min-height: 280px !important;
padding-bottom: 58px !important;
}
body.home .lym-home-wrap .lym-hero-content {
max-width: 100%;
width: 100%;
}
body.home .lym-home-wrap .lym-hero-badge {
margin-bottom: 8px;
padding: 3px 10px;
}
/* X-050: Tiêu đề Hero trên mobile đúng 20px (thắng .entry-content h1.lym-hero-title ở style.css; trên mobile --lym-fs-xl = 20px) */
body.home .entry-content h1.lym-hero-title,
body.home .entry-content h2.lym-hero-title,
body.home .lym-home-wrap h1.lym-hero-title,
body.home .lym-home-wrap h2.lym-hero-title,
body.home .lym-home-wrap .lym-hero-title,
.entry-content h1.lym-hero-title,
.entry-content h2.lym-hero-title {
font-size: 20px !important; /* X-050: bắt buộc 20px trên mobile */
line-height: 1.3 !important;
margin: 0 0 8px !important;
max-height: 52px !important;
}
body.home .entry-content p.lym-hero-desc,
body.home .lym-home-wrap .lym-hero-desc {
font-size: var(--lym-fs-md-sm, 14px) !important;
line-height: 1.5 !important;
margin: 0 0 12px !important;
}
body.home .lym-home-wrap .lym-hero-visual {
display: none !important;
}
body.home .lym-home-wrap .lym-hero-dots {
bottom: 4px !important;
left: 8px !important;
}
body.home .lym-home-wrap .lym-hero-side {
flex-direction: column;
gap: 10px;
}
body.home .lym-home-wrap .lym-sub-banner {
padding: 16px 18px;
}
body.home .lym-home-wrap .lym-commitments-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
padding: 12px;
}
body.home .lym-home-wrap .lym-commitment-item {
gap: 8px;
align-items: flex-start;
}
body.home .lym-home-wrap .lym-commitment-icon {
width: 32px;
height: 32px;
border-radius: 8px;
margin-top: 1px;
}
body.home .lym-home-wrap .lym-commitment-icon svg {
width: 18px;
height: 18px;
}
body.home .entry-content h3.lym-commitment-title,
body.home .lym-home-wrap .lym-commitment-title {
font-size: var(--lym-fs-sm, 13px) !important;
}
body.home .lym-home-wrap .lym-cat-icon-grid {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(2, auto);
grid-auto-columns: 92px;
overflow-x: auto;
padding-bottom: 6px;
-webkit-overflow-scrolling: touch;
}
body.home .lym-home-wrap .lym-blog-grid {
grid-template-columns: 1fr;
gap: 14px;
}
body.home .lym-home-wrap .lym-newsletter-box {
padding: 20px 16px;
}
body.home .lym-home-wrap .lym-newsletter-info p {
display: block !important;
-webkit-line-clamp: unset !important;
overflow: visible !important;
}
body.home .lym-home-wrap .lym-newsletter-inputs {
grid-template-columns: 1fr;
gap: 8px;
}
body.home .lym-home-wrap .lym-newsletter-inputs button[type="submit"] {
width: 100% !important;
}
}
/* menu.css */
/**
* Lym Child Theme — Vertical Categories Mega Menu & Mobile Drawer Menu (M1)
*
* Phạm vi:
* 1. Menu dọc "Danh mục sản phẩm" trên Desktop (`.wd-header-cats .wd-dropdown-cats` — cấp 1 & menu con bay ra `.wd-dropdown-menu` cấp 2).
* 2. Menu danh mục dạng Drawer / Accordion trên Mobile & Tablet (`.mobile-nav`).
* 3. Tuân thủ nghiêm ngặt hệ thống Design Tokens (`docs/qa/2026-10-21/W23-loop2/design-tokens.md`),
* không sửa trạng thái đóng của Header để tránh hồi quy giao diện đã duyệt.
*/
/* ==========================================================================
1. DESKTOP: KHUNG MENU CẤP 1 (`.wd-header-cats .wd-dropdown-cats`)
========================================================================== */
/* Khung cấp 1 nối sát đáy nút `.menu-opener` (44px), rộng 268px để vừa trọn mọi tên danh mục cấp 1 ở cỡ 15px và che gọn tiêu đề trang bên dưới */
.wd-header-cats .wd-dropdown-cats {
top: 100% !important;
margin-top: 0 !important;
width: 268px !important;
min-width: 268px !important;
max-width: 280px !important;
padding: 0 !important;
background-color: var(--lym-color-surface, #ffffff) !important;
border: 1px solid var(--lym-color-border, #e5e7eb) !important;
border-radius: 0 0 var(--lym-radius-sm, 8px) var(--lym-radius-sm, 8px) !important;
box-shadow: var(--lym-shadow-md, 0 8px 24px rgba(15, 23, 42, 0.12)) !important;
z-index: 420 !important;
overflow: visible !important;
}
/* Cầu nối chuột vô hình phía trên khung cấp 1 để rê từ nút mở xuống không bị mất hover */
.wd-header-cats .wd-dropdown-cats::before {
content: "" !important;
position: absolute !important;
top: -6px !important;
left: 0 !important;
right: 0 !important;
height: 6px !important;
background: transparent !important;
pointer-events: auto !important;
}
/* Danh sách cấp 1: xóa viền đôi mặc định của `.wd-design-default` */
.wd-header-cats .wd-nav-vertical,
.wd-header-cats .wd-nav-vertical.wd-design-default {
--nav-drop-sp: 6px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
border-radius: 0 0 var(--lym-radius-sm, 8px) var(--lym-radius-sm, 8px) !important;
background-color: transparent !important;
box-shadow: none !important;
}
/* Mục cấp 1 (`li.item-level-0`) */
.wd-header-cats .wd-nav-vertical > li.item-level-0 {
position: relative !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
border-bottom: 1px solid var(--lym-color-border-subtle, #e5e7eb) !important;
}
.wd-header-cats .wd-nav-vertical > li.item-level-0:last-child {
border-bottom: none !important;
}
/* Link cấp 1: cao 46px (trong ngưỡng 44–48px), chữ 15px (`--lym-fs-base`), đậm 500, màu chữ chính */
.wd-header-cats .wd-nav-vertical > li.item-level-0 > a.woodmart-nav-link,
.wd-header-cats .wd-nav-vertical.wd-design-default > li > a {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: var(--lym-space-2, 8px) !important;
width: 100% !important;
height: 46px !important;
min-height: 46px !important;
max-height: 48px !important;
padding: 10px 16px !important;
box-sizing: border-box !important;
font-family: var(--lym-font-sans) !important;
font-size: var(--lym-fs-base, 15px) !important;
font-weight: 500 !important;
line-height: 20px !important;
color: var(--lym-color-text, #111827) !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
text-decoration: none !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
transition: color 150ms ease, background-color 150ms ease !important;
}
.wd-header-cats .wd-nav-vertical > li.item-level-0:last-child > a.woodmart-nav-link {
border-radius: 0 0 7px 7px !important;
}
.wd-header-cats .wd-nav-vertical > li.item-level-0 > a .nav-link-text {
font-family: var(--lym-font-sans) !important;
font-size: var(--lym-fs-base, 15px) !important;
font-weight: 500 !important;
line-height: 20px !important;
color: inherit !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* Trạng thái rê / đang mở / đang chọn của mục cấp 1 (giữ sáng cả khi chuột đang ở menu con) */
.wd-header-cats .wd-nav-vertical > li.item-level-0:hover > a,
.wd-header-cats .wd-nav-vertical > li.item-level-0.wd-opened > a,
.wd-header-cats .wd-nav-vertical > li.item-level-0 > a:hover,
.wd-header-cats .wd-nav-vertical > li.item-level-0 > a:focus-visible,
.wd-header-cats .wd-nav-vertical > li.item-level-0.current-menu-item > a,
.wd-header-cats .wd-nav-vertical > li.item-level-0.current-menu-ancestor > a {
background-color: var(--lym-color-primary-soft, #e8f5ee) !important;
color: var(--lym-color-primary, #0f5132) !important;
}
/* Icon mũi tên `›` ở mục cha thẳng hàng bên phải, màu muted chuẩn token */
.wd-header-cats .wd-nav-vertical > li.menu-item-has-children > a::after {
margin-left: auto !important;
margin-inline-start: auto !important;
padding-left: 0 !important;
flex: 0 0 auto !important;
align-self: center !important;
font-size: 10px !important;
line-height: 1 !important;
color: var(--lym-color-text-muted, #9ca3af) !important;
transition: color 150ms ease !important;
}
.wd-header-cats .wd-nav-vertical > li.menu-item-has-children:hover > a::after,
.wd-header-cats .wd-nav-vertical > li.menu-item-has-children.wd-opened > a::after,
.wd-header-cats .wd-nav-vertical > li.menu-item-has-children.current-menu-ancestor > a::after {
color: var(--lym-color-primary, #0f5132) !important;
}
/* ==========================================================================
2. DESKTOP: KHUNG MENU CON BAY RA CẤP 2 (`.wd-dropdown-menu` & `ul.wd-sub-menu`)
========================================================================== */
/* Khung menu con: cùng bo góc 8px, viền 1px, bóng đổ với cấp 1; căn đỉnh với mục cha (top: 0); cách cấp 1 đúng 6px (4–8px) */
.wd-header-cats .wd-nav-vertical > li.item-level-0 > .wd-dropdown-menu,
.wd-header-cats .wd-nav-vertical .wd-dropdown-menu.wd-design-default {
position: absolute !important;
top: 0 !important;
left: calc(100% + 6px) !important;
inset-inline-start: calc(100% + 6px) !important;
right: auto !important;
bottom: auto !important;
width: 264px !important;
min-width: 264px !important;
max-width: 280px !important;
margin: 0 !important;
padding: 0 !important;
background-color: var(--lym-color-surface, #ffffff) !important;
border: 1px solid var(--lym-color-border, #e5e7eb) !important;
border-radius: var(--lym-radius-sm, 8px) !important;
box-shadow: var(--lym-shadow-md, 0 8px 24px rgba(15, 23, 42, 0.12)) !important;
z-index: 430 !important;
overflow: visible !important;
transform: none !important;
box-sizing: border-box !important;
}
/* Cầu nối chuột vô hình rộng 10px lấp khoảng cách 6px giữa cấp 1 và cấp 2 để không mất hover khi di chuột chéo */
.wd-header-cats .wd-nav-vertical > li.item-level-0 > .wd-dropdown-menu::after,
.wd-header-cats .wd-dropdown-cats .wd-dropdown-menu::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
right: 100% !important;
left: auto !important;
inset-block: 0 !important;
inset-inline: auto 100% !important;
width: 10px !important;
height: 100% !important;
display: block !important;
background: transparent !important;
pointer-events: auto !important;
}
/* Reset `.container.wd-entry-content` bên trong `.wd-dropdown-menu` (tránh bị ăn rule `.container` và `.wd-entry-content li` của bài viết) */
.wd-header-cats .wd-nav-vertical .wd-dropdown-menu > .container,
.wd-header-cats .wd-nav-vertical .wd-dropdown-menu .wd-entry-content {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Danh sách `ul.wd-sub-menu` cấp 2 */
.wd-header-cats .wd-nav-vertical .wd-dropdown-menu ul.wd-sub-menu,
.wd-header-cats .wd-nav-vertical .wd-dropdown-menu ul.sub-menu {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
background: transparent !important;
}
/* Mục `li.item-level-1` cấp 2: có đường kẻ mảnh đồng bộ với cấp 1 */
.wd-header-cats .wd-nav-vertical .wd-dropdown-menu ul.wd-sub-menu > li,
.wd-header-cats .wd-nav-vertical .wd-dropdown-menu .wd-entry-content li {
position: relative !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
font-size: var(--lym-fs-md-sm, 14px) !important;
line-height: 20px !important;
border: none !important;
border-bottom: 1px solid var(--lym-color-border-subtle, #e5e7eb) !important;
}
.wd-header-cats .wd-nav-vertical .wd-dropdown-menu ul.wd-sub-menu > li:last-child,
.wd-header-cats .wd-nav-vertical .wd-dropdown-menu .wd-entry-content li:last-child {
border-bottom: none !important;
}
/* Link cấp 2: cỡ chữ 14px (nhỏ hơn cấp 1 đúng 1 bậc), màu chữ chính `--lym-color-text`, đậm 500, cao 42px (40–44px), padding 10px 16px, 1 dòng */
.wd-header-cats .wd-nav-vertical .wd-dropdown-menu ul.wd-sub-menu > li > a,
.wd-header-cats .wd-nav-vertical .wd-dropdown-menu .wd-entry-content li > a {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: var(--lym-space-2, 8px) !important;
width: 100% !important;
height: 42px !important;
min-height: 42px !important;
max-height: 44px !important;
padding: 10px 16px !important;
box-sizing: border-box !important;
font-family: var(--lym-font-sans) !important;
font-size: var(--lym-fs-md-sm, 14px) !important;
font-weight: 500 !important;
line-height: 20px !important;
color: var(--lym-color-text, #111827) !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
text-decoration: none !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
transition: color 150ms ease, background-color 150ms ease !important;
}
.wd-header-cats .wd-nav-vertical .wd-dropdown-menu ul.wd-sub-menu > li:first-child > a {
border-top-left-radius: 7px !important;
border-top-right-radius: 7px !important;
}
.wd-header-cats .wd-nav-vertical .wd-dropdown-menu ul.wd-sub-menu > li:last-child > a {
border-bottom-left-radius: 7px !important;
border-bottom-right-radius: 7px !important;
}
/* Trạng thái rê / đang chọn của mục cấp 2 giống hệt cấp 1 (nền xanh nhạt `--lym-color-primary-soft`, chữ `--lym-color-primary`) */
.wd-header-cats .wd-nav-vertical .wd-dropdown-menu ul.wd-sub-menu > li > a:hover,
.wd-header-cats .wd-nav-vertical .wd-dropdown-menu ul.wd-sub-menu > li > a:focus-visible,
.wd-header-cats .wd-nav-vertical .wd-dropdown-menu ul.wd-sub-menu > li.current-menu-item > a,
.wd-header-cats .wd-nav-vertical .wd-dropdown-menu .wd-entry-content li > a:hover,
.wd-header-cats .wd-nav-vertical .wd-dropdown-menu .wd-entry-content li > a:focus-visible {
background-color: var(--lym-color-primary-soft, #e8f5ee) !important;
color: var(--lym-color-primary, #0f5132) !important;
}
/* Số đếm sản phẩm phụ bên phải (nếu có sẵn trong DOM) */
.wd-header-cats .wd-nav-vertical li > a .count,
.wd-header-cats .wd-nav-vertical li > a .wd-nav-count,
.wd-header-cats .wd-nav-vertical .wd-dropdown-menu ul.wd-sub-menu > li > a .count {
margin-left: auto !important;
padding-left: 6px !important;
font-size: var(--lym-fs-xs, 12px) !important;
font-weight: 400 !important;
color: var(--lym-color-text-muted, #9ca3af) !important;
flex-shrink: 0 !important;
}
/* ==========================================================================
3. MOBILE & TABLET: DRAWER / ACCORDION MENU (`.mobile-nav`)
========================================================================== */
/* Đảm bảo drawer menu nằm trên các nút nổi và ẩn FAB "Hỏi dược sĩ" khi đang mở menu mobile */
.mobile-nav.wd-side-hidden {
z-index: 100000 !important;
}
body:has(.mobile-nav.wd-opened) .lym-ai-widget,
body:has(.mobile-nav.wd-opened) #lym-ai-widget,
body:has(.mobile-nav.wd-opened) .lym-ai-fab,
body:has(.mobile-nav.wd-opened) [class*="lym-ai-"] {
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Ô tìm kiếm trên đỉnh mobile drawer gọn gàng, đúng chiều cao 44px */
.mobile-nav .wd-search-form {
padding: 12px 16px !important;
background-color: var(--lym-color-surface, #ffffff) !important;
border-bottom: 1px solid var(--lym-color-border, #e5e7eb) !important;
}
.mobile-nav .searchform {
box-shadow: none !important;
}
/* Thanh 2 tab "Menu chính" / "Danh mục SP" đúng cỡ chữ token (14px), viết hoa đầu câu, vùng chạm >= 48px */
.mobile-nav .wd-nav-mob-tab {
border-bottom: 1px solid var(--lym-color-border, #e5e7eb) !important;
background-color: var(--lym-color-surface-subtle, #f8fafc) !important;
}
.mobile-nav .wd-nav-mob-tab > li > a {
min-height: 48px !important;
height: 48px !important;
padding: 0 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-family: var(--lym-font-sans) !important;
font-size: var(--lym-fs-md-sm, 14px) !important;
font-weight: 600 !important;
text-transform: none !important;
letter-spacing: 0 !important;
color: var(--lym-color-text-secondary, #4b5563) !important;
background-color: var(--lym-color-surface-subtle, #f8fafc) !important;
box-sizing: border-box !important;
}
.mobile-nav .wd-nav-mob-tab > li.wd-active > a {
color: var(--lym-color-primary, #0f5132) !important;
background-color: var(--lym-color-primary-soft, #e8f5ee) !important;
font-weight: 700 !important;
}
/* Danh mục cấp 1 trên Mobile/Tablet: chữ 15px (`--lym-fs-base`), viết hoa đầu câu, màu chữ chính, vùng chạm >= 48px */
.mobile-nav ul.wd-nav-mobile {
animation-duration: 150ms !important;
}
.mobile-nav ul.wd-nav-mobile > li > a {
min-height: 48px !important;
padding: 12px 16px !important;
display: flex !important;
align-items: center !important;
font-family: var(--lym-font-sans) !important;
font-size: var(--lym-fs-base, 15px) !important;
font-weight: 500 !important;
line-height: 21px !important;
text-transform: none !important;
letter-spacing: 0 !important;
color: var(--lym-color-text, #111827) !important;
background-color: var(--lym-color-surface, #ffffff) !important;
border-bottom: 1px solid var(--lym-color-border-subtle, #e5e7eb) !important;
box-sizing: border-box !important;
}
.mobile-nav ul.wd-nav-mobile > li > a .nav-link-text {
font-family: var(--lym-font-sans) !important;
font-size: var(--lym-fs-base, 15px) !important;
font-weight: inherit !important;
text-transform: none !important;
color: inherit !important;
}
.mobile-nav ul.wd-nav-mobile > li.wd-opened > a,
.mobile-nav ul.wd-nav-mobile > li.opener-page > a,
.mobile-nav ul.wd-nav-mobile > li:has(> .wd-nav-opener.wd-active) > a,
.mobile-nav ul.wd-nav-mobile > li.current-menu-item > a,
.mobile-nav ul.wd-nav-mobile > li > a:hover,
.mobile-nav ul.wd-nav-mobile > li > a:active {
background-color: var(--lym-color-primary-soft, #e8f5ee) !important;
color: var(--lym-color-primary, #0f5132) !important;
font-weight: 600 !important;
}
/* Nút mở accordion `.wd-nav-opener`: vùng chạm >= 48x48px (>= 44px) */
.mobile-nav ul.wd-nav-mobile > li > .wd-nav-opener {
width: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
height: auto !important;
align-self: stretch !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--lym-color-text-secondary, #4b5563) !important;
background-color: var(--lym-color-surface, #ffffff) !important;
border-inline-start: 1px solid var(--lym-color-border-subtle, #e5e7eb) !important;
border-bottom: 1px solid var(--lym-color-border-subtle, #e5e7eb) !important;
box-sizing: border-box !important;
}
.mobile-nav ul.wd-nav-mobile > li > .wd-nav-opener.wd-active,
.mobile-nav ul.wd-nav-mobile > li.wd-opened > .wd-nav-opener {
background-color: var(--lym-color-primary, #0f5132) !important;
color: #ffffff !important;
border-color: var(--lym-color-primary, #0f5132) !important;
}
/* Danh mục cấp 2 (Accordion con) trên Mobile/Tablet: chữ 14px (`--lym-fs-md-sm`), màu chữ chính `--lym-color-text`, thụt lề 28px, vùng chạm >= 44px */
.mobile-nav ul.wd-nav-mobile .wd-sub-menu {
background-color: var(--lym-color-surface-subtle, #f8fafc) !important;
margin: 0 !important;
padding: 0 !important;
}
.mobile-nav ul.wd-nav-mobile .wd-sub-menu > li > a {
min-height: 44px !important;
padding: 10px 16px 10px 28px !important;
display: flex !important;
align-items: center !important;
font-family: var(--lym-font-sans) !important;
font-size: var(--lym-fs-md-sm, 14px) !important;
font-weight: 400 !important;
line-height: 20px !important;
text-transform: none !important;
letter-spacing: 0 !important;
color: var(--lym-color-text, #111827) !important;
background-color: var(--lym-color-surface-subtle, #f8fafc) !important;
border-bottom: 1px solid var(--lym-color-border-subtle, #e5e7eb) !important;
box-sizing: border-box !important;
}
.mobile-nav ul.wd-nav-mobile .wd-sub-menu > li > a:hover,
.mobile-nav ul.wd-nav-mobile .wd-sub-menu > li > a:active,
.mobile-nav ul.wd-nav-mobile .wd-sub-menu > li.current-menu-item > a {
background-color: var(--lym-color-primary-soft, #e8f5ee) !important;
color: var(--lym-color-primary, #0f5132) !important;
font-weight: 500 !important;
}
/* product.css */
/* Trang sản phẩm — thanh tab "Mô tả / Thông tin chi tiết / Đánh giá / Hỏi & đáp" (.lym-pdp-toc-bar__inner).
Lỗi: khung đặt `overflow-x:auto` nên `overflow-y` cũng thành `auto`; gạch chân tab (margin-bottom:-2px) tràn khung 2px
⇒ khung cuộn được 2px theo chiều dọc dù không hiện thanh cuộn (lăn chuột trên thanh tab bị kẹt/nhích, cả trên desktop).
Sửa: khung ôm trọn gạch chân (padding-bottom 2px) và bù lại bằng margin-bottom -2px để vị trí gạch chân đè lên đường kẻ
như cũ; khóa cuộn dọc. Cuộn ngang trên điện thoại khi tab dài vẫn giữ nguyên. */
.single-product .lym-pdp-toc-bar__inner {
overflow-y: hidden !important;
padding-bottom: 2px !important;
margin-bottom: -2px !important;
}
/* responsive-mobile.css */
/**
* LYM Child Theme — Mobile & Tablet Responsive Overrides (Part: responsive-mobile.css)
* Agent: R2 (2026-10-22)
*
* Scope:
* - 100% scoped to `@media (max-width: 1024px)` (and mobile/landscape sub-breakpoints)
* so Desktop viewports (`1366×768`, `1920×1080`) remain 100% unchanged (0 pixel regression).
* - Uses high-specificity selectors (`html:root body...`, doubled IDs `#lym-ai-launcher#lym-ai-launcher`,
* `#lym-ai-panel#lym-ai-panel`, `#cmplz-cookiebanner-container#cmplz-cookiebanner-container`)
* to guarantee precedence over `style.css`, `checkout.css`, `responsive.css`, WoodMart parent CSS,
* Complianz `banner-1-optin.css`, and `lym-ai-pharmacist` critical inline CSS.
*/
@media (max-width: 1024px) {
/* ==========================================================================
1. SAFE-AREA & BODY PADDING FOR FIXED BOTTOM BARS (`.wd-sticky-btn`, `.wd-toolbar`)
Ensures bottom content is never obscured and Android/iOS system navigation bars
have proper safe-area clearance.
========================================================================== */
:root {
--lym-safe-bottom: env(safe-area-inset-bottom, 0px);
--lym-sticky-buy-bar-h: calc(60px + env(safe-area-inset-bottom, 0px));
--lym-mobile-toolbar-h: calc(56px + env(safe-area-inset-bottom, 0px));
}
html:root body:not(.single-product) {
padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}
html:root body.single-product {
padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
}
html:root body .wd-toolbar {
height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
min-height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
padding-bottom: env(safe-area-inset-bottom, 0px) !important;
z-index: 350 !important;
box-sizing: border-box !important;
}
/* ==========================================================================
2. MOBILE/TABLET STICKY BUY BAR (`body.single-product .wd-sticky-btn`)
Fixes:
- P0-01: WoodMart `.wd-quantity-overlap div.quantity { position: absolute; inset-inline-start: 0; z-index: 2 }`
(`woodmart/css/style-rtl-elementor.css:19231`) combined with `checkout.css:806` (`display: inline-flex !important`)
stacked `div.quantity` (`126×48px`) directly on top of `.single_add_to_cart_button` (`156×48px`, orange `#d97706`),
leaving 30px of orange button sticking out around `"- 1 +"` like an off-brand orange border.
- P0-02: WoodMart `@media (max-width: 768.98px) { .wd-sticky-btn .wd-sticky-btn-cart { margin-inline: -15px } }`
(`style-rtl-elementor.css:27183`) pulled `.wd-sticky-btn-cart` to `left: -3px` and `right: vw + 3px`,
clipping the left edge of `"- 1 +"` (`button.minus` at `left: -2px`) and right edge of `"💬 Tư vấn"`.
- P0-03: At `769px–1024px` (`iPad Air 820px`, `iPhone 13 Landscape 844×390`, `iPad Mini Landscape 1024×768`),
WoodMart only hid `.wd-sticky-btn :is(.price, p.stock)` up to `768.98px`, leaving `.price` visible inside
`.wd-sticky-btn-cart` and crowding the action row.
- P0-04: Balanced 1-row 3-part layout (`- 1 +` 44px height with 1px token border, primary CTA 44px height,
`"💬 Tư vấn"` 44px height collapsing to 44×44px icon-only when viewport `< 380px`).
========================================================================== */
html:root body.single-product .wd-sticky-btn {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
transform: none !important;
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 100% !important;
max-width: 100vw !important;
height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
min-height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
max-height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) 12px !important;
margin: 0 !important;
z-index: 450 !important;
background: var(--lym-color-surface, #ffffff) !important;
border-top: 1px solid var(--lym-color-border, #e2e8f0) !important;
box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08) !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
html:root body.single-product .wd-sticky-btn .wd-sticky-btn-container,
html:root body.single-product .wd-sticky-btn .container {
width: 100% !important;
max-width: 100% !important;
height: 44px !important;
padding: 0 !important;
margin: 0 !important;
margin-inline: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
box-sizing: border-box !important;
}
/* Hide duplicate desktop content blocks & price/stock inside sticky bar on <= 1024px */
html:root body.single-product .wd-sticky-btn .wd-sticky-btn-content,
html:root body.single-product .wd-sticky-btn .wd-sticky-btn-cart > .price,
html:root body.single-product .wd-sticky-btn .wd-sticky-btn-cart > span.price,
html:root body.single-product .wd-sticky-btn .wd-sticky-btn-cart > p.stock,
html:root body.single-product .wd-sticky-btn .wd-sticky-btn-actions,
html:root body.single-product .wd-sticky-btn .wd-action-btn,
html:root body.single-product .wd-sticky-btn .wd-wishlist-btn,
html:root body.single-product .wd-sticky-btn .wd-compare-btn {
display: none !important;
}
/* Reset WoodMart negative margin-inline (-15px) on .wd-sticky-btn-cart */
html:root body.single-product .wd-sticky-btn .wd-sticky-btn-cart {
width: 100% !important;
max-width: 100% !important;
height: 44px !important;
margin: 0 !important;
margin-inline: 0 !important;
padding: 0 !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
box-sizing: border-box !important;
}
html:root body.single-product .wd-sticky-btn .wd-sticky-btn-cart form.cart {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 44px !important;
margin: 0 !important;
margin-inline: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
flex: 1 1 100% !important;
position: relative !important;
box-sizing: border-box !important;
}
/* Keep 1 row of 3 balanced parts: (1) "- 1 +", (2) Primary Buy CTA, (3) "Tư vấn".
When .wd-buy-now-btn is present in sticky form.cart, hide the redundant orange .single_add_to_cart_button
that was previously covered by absolute-positioned div.quantity. */
html:root body.single-product .wd-sticky-btn .wd-sticky-btn-cart form.cart:has(.wd-buy-now-btn) .single_add_to_cart_button {
display: none !important;
}
/* Part 1: Compact quantity selector "- 1 +" (44px height, 1px token border, static/relative in flex row) */
html:root body.single-product .wd-sticky-btn div.quantity,
html:root body.single-product .wd-sticky-btn.wd-quantity-overlap div.quantity,
html:root body.single-product .wd-sticky-btn .wd-sticky-btn-cart form.cart div.quantity {
position: relative !important;
inset: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
inset-inline-start: auto !important;
inset-inline-end: auto !important;
transform: none !important;
z-index: 1 !important;
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
width: 100px !important;
min-width: 100px !important;
max-width: 100px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
flex: 0 0 100px !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid var(--lym-color-border, #e2e8f0) !important;
border-radius: var(--lym-radius-btn, 8px) !important;
background-color: var(--lym-color-surface, #ffffff) !important;
box-shadow: none !important;
outline: none !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
html:root body.single-product .wd-sticky-btn div.quantity .minus,
html:root body.single-product .wd-sticky-btn div.quantity .plus,
html:root body.single-product .wd-sticky-btn div.quantity button.minus,
html:root body.single-product .wd-sticky-btn div.quantity button.plus,
html:root body.single-product .wd-sticky-btn div.quantity input.minus,
html:root body.single-product .wd-sticky-btn div.quantity input.plus {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
min-width: 32px !important;
max-width: 32px !important;
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
flex: 0 0 32px !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--lym-color-text, #0f172a) !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 1 !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
html:root body.single-product .wd-sticky-btn div.quantity input.qty,
html:root body.single-product .wd-sticky-btn div.quantity input[type="number"].qty {
width: 34px !important;
min-width: 34px !important;
max-width: 34px !important;
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
flex: 0 0 34px !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
border-inline: 1px solid var(--lym-color-border-subtle, #f1f5f9) !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--lym-color-text, #0f172a) !important;
font-size: 14px !important;
font-weight: 600 !important;
text-align: center !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
/* Part 2: Primary Buy Button (.wd-buy-now-btn or fallback .single_add_to_cart_button) — 44px height, flex: 1 */
html:root body.single-product .wd-sticky-btn .wd-sticky-btn-cart form.cart .wd-buy-now-btn,
html:root body.single-product .wd-sticky-btn .wd-sticky-btn-cart form.cart .single_add_to_cart_button {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 1 1 auto !important;
width: auto !important;
min-width: 108px !important;
max-width: none !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
margin: 0 !important;
padding: 0 14px !important;
border-radius: var(--lym-radius-btn, 8px) !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
html:root body.single-product .wd-sticky-btn .wd-sticky-btn-cart form.cart .wd-buy-now-btn {
background-color: var(--lym-color-primary, #103e2f) !important;
color: #ffffff !important;
border: 1px solid var(--lym-color-primary, #103e2f) !important;
}
/* Part 3: Consult button ("💬 Tư vấn") — 44px height, token border */
html:root body.single-product .wd-sticky-btn .lym-single-consult-bar {
display: inline-flex !important;
align-items: center !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
html:root body.single-product .wd-sticky-btn .lym-zalo-consult-btn {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
width: auto !important;
min-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
margin: 0 !important;
padding: 0 12px !important;
border: 1px solid var(--lym-color-primary, #103e2f) !important;
border-radius: var(--lym-radius-btn, 8px) !important;
background-color: var(--lym-color-surface, #ffffff) !important;
color: var(--lym-color-primary, #103e2f) !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1 !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
html:root body.single-product .wd-sticky-btn .lym-zalo-consult-btn .lym-zalo-text-full {
display: none !important;
}
html:root body.single-product .wd-sticky-btn .lym-zalo-consult-btn .lym-zalo-text-short {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
font-size: 13px !important;
line-height: 1 !important;
}
/* ==========================================================================
3. LAUNCHER DƯỢC SĨ LYM (`#lym-ai-launcher`, `.lym-ai-launcher`)
Fixes:
- P0-05: On mobile PDP (`body.single-product` / `body:has(.wd-sticky-btn)`), collapse `#lym-ai-launcher`
into a 48×48px round icon-only button (`border-radius: 50%`) positioned 12px above `.wd-sticky-btn`
(`bottom: calc(72px + env(safe-area-inset-bottom, 0px))`) so it never covers product description text
or touches the sticky buy bar.
- P0-06: On non-PDP pages with `.wd-toolbar`, place `#lym-ai-launcher` 12px above `.wd-toolbar`
(`bottom: calc(68px + env(safe-area-inset-bottom, 0px))`).
========================================================================== */
html:root body #lym-ai-launcher#lym-ai-launcher.lym-ai-launcher {
right: 12px !important;
bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
min-width: 44px !important;
min-height: 44px !important;
z-index: 460 !important;
transition: none !important;
box-sizing: border-box !important;
}
/* Mọi trang mobile: nút tròn 48×48px chỉ icon (ẩn nhãn 'Hỏi dược sĩ') để không che nội dung; trang có thanh mua dính thì đặt cao hơn 12px */
html:root body #lym-ai-launcher#lym-ai-launcher.lym-ai-launcher {
width: 48px !important;
min-width: 48px !important;
max-width: 48px !important;
height: 48px !important;
min-height: 48px !important;
max-height: 48px !important;
padding: 0 !important;
border-radius: 50% !important;
right: 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
transition: none !important;
}
html:root body.single-product #lym-ai-launcher#lym-ai-launcher.lym-ai-launcher,
html:root body:has(.wd-sticky-btn) #lym-ai-launcher#lym-ai-launcher.lym-ai-launcher {
bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}
html:root body #lym-ai-launcher#lym-ai-launcher .lym-ai-launcher__text,
html:root body #lym-ai-launcher#lym-ai-launcher .lym-ai-launcher__label {
display: none !important;
}
html:root body #lym-ai-launcher#lym-ai-launcher .lym-ai-launcher__avatar {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
margin: 0 !important;
}
/* ==========================================================================
4. COOKIE CONSENT BANNER (`#cmplz-cookiebanner-container .cmplz-cookiebanner`)
Fixes:
- P0-07: Complianz `banner-1-optin.css` applied `@media (max-height: 400px) { .cmplz-cookiebanner { zoom: 0.6 } .cmplz-btn { zoom: 0.5 !important } }`,
breaking `iphone-13-landscape` (`844×390`) so `.cmplz-cookiebanner` overlapped `.wd-toolbar` and buttons shrank to 11px/6px.
- P1-01: `.cmplz-btn` heights in `style.css:5172-5186` were `38px` and `20px` (`< 44px` minimum touch target).
Using a compact 1-row 3-button layout with `44px` button height fixes all touch targets and keeps the banner compact.
========================================================================== */
html:root body #cmplz-cookiebanner-container#cmplz-cookiebanner-container .cmplz-cookiebanner,
html:root body .cmplz-cookiebanner.cmplz-show {
zoom: 1 !important;
z-index: 470 !important;
padding: 10px 12px !important;
gap: 8px !important;
height: auto !important;
max-height: calc(100dvh - 84px) !important;
box-sizing: border-box !important;
}
html:root body #cmplz-cookiebanner-container#cmplz-cookiebanner-container .cmplz-cookiebanner *,
html:root body .cmplz-cookiebanner.cmplz-show * {
zoom: 1 !important;
}
html:root body #cmplz-cookiebanner-container#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header,
html:root body #cmplz-cookiebanner-container#cmplz-cookiebanner-container .cmplz-cookiebanner .lym-cookie-more-toggle {
display: none !important;
}
html:root body #cmplz-cookiebanner-container#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
display: block !important;
-webkit-line-clamp: unset !important;
overflow: visible !important;
font-size: 12px !important;
line-height: 1.38 !important;
margin: 0 !important;
}
html:root body #cmplz-cookiebanner-container#cmplz-cookiebanner-container .cmplz-cookiebanner:not(.is-prefs-open) .cmplz-body .cmplz-links {
display: none !important;
}
html:root body #cmplz-cookiebanner-container#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
display: grid !important;
grid-template-columns: 1fr 1.15fr 1fr !important;
align-items: center !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
html:root body #cmplz-cookiebanner-container#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny,
html:root body #cmplz-cookiebanner-container#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept,
html:root body #cmplz-cookiebanner-container#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
html:root body #cmplz-cookiebanner-container#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
grid-column: auto !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
min-width: 44px !important;
padding: 0 8px !important;
margin: 0 !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.15 !important;
border-radius: var(--lym-radius-btn, 8px) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
html:root body #cmplz-cookiebanner-container#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
border: 1px solid var(--lym-color-border, #cbd5e1) !important;
background-color: var(--lym-color-surface-subtle, #f8fafc) !important;
color: var(--lym-color-text-secondary, #475569) !important;
text-decoration: none !important;
}
html:root body #cmplz-cookiebanner-container#cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-categories-visible):not(.is-prefs-open) .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
display: none !important;
}
html:root body #cmplz-cookiebanner-container#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
html:root body #cmplz-cookiebanner-container#cmplz-cookiebanner-container .cmplz-cookiebanner.is-prefs-open .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
display: none !important;
}
/* ==========================================================================
5. Z-INDEX & VISIBILITY COORDINATION WHEN OVERLAYS / DRAWERS / MODALS OPEN
Fixes:
- P0-08: When mobile menu, filter sidebar, mini-cart, fullscreen search, Quick View,
or `#lym-ai-panel` is open, hide background floating bars (`#lym-ai-launcher`, `.wd-toolbar`,
`.wd-sticky-btn`, `#cmplz-cookiebanner-container`, `.scrollToTop`) so they never bleed through
or collide with the active overlay.
========================================================================== */
html:root body.lym-ai-panel-open #lym-ai-launcher#lym-ai-launcher.lym-ai-launcher,
html:root body.lym-ai-open-mobile #lym-ai-launcher#lym-ai-launcher.lym-ai-launcher,
html:root body:has(#lym-ai-panel:not([hidden])) #lym-ai-launcher#lym-ai-launcher.lym-ai-launcher,
html:root body #lym-ai-launcher#lym-ai-launcher.lym-ai-launcher[aria-expanded="true"],
html:root body.lym-ai-panel-open .wd-sticky-btn,
html:root body.lym-ai-open-mobile .wd-sticky-btn,
html:root body:has(#lym-ai-panel:not([hidden])) .wd-sticky-btn,
html:root body.lym-ai-panel-open .wd-toolbar,
html:root body.lym-ai-open-mobile .wd-toolbar,
html:root body:has(#lym-ai-panel:not([hidden])) .wd-toolbar,
html:root body.lym-ai-panel-open #cmplz-cookiebanner-container#cmplz-cookiebanner-container,
html:root body:has(#lym-ai-panel:not([hidden])) #cmplz-cookiebanner-container#cmplz-cookiebanner-container,
html:root body:has(.wd-side-hidden.wd-opened) #lym-ai-launcher#lym-ai-launcher.lym-ai-launcher,
html:root body:has(.wd-side-hidden.wd-opened) .wd-toolbar,
html:root body:has(.wd-side-hidden.wd-opened) .wd-sticky-btn,
html:root body:has(.wd-side-hidden.wd-opened) #cmplz-cookiebanner-container#cmplz-cookiebanner-container,
html:root body:has(.sidebar-container.wd-opened) #lym-ai-launcher#lym-ai-launcher.lym-ai-launcher,
html:root body:has(.sidebar-container.wd-opened) .wd-toolbar,
html:root body:has(.sidebar-container.wd-opened) .wd-sticky-btn,
html:root body:has(.sidebar-container.wd-opened) #cmplz-cookiebanner-container#cmplz-cookiebanner-container,
html:root body:has(.wd-search-full-screen.wd-opened) #lym-ai-launcher#lym-ai-launcher.lym-ai-launcher,
html:root body:has(.wd-search-full-screen.wd-opened) .wd-toolbar,
html:root body:has(.wd-search-full-screen.wd-opened) .wd-sticky-btn,
html:root body:has(.wd-search-full-screen.wd-opened) #cmplz-cookiebanner-container#cmplz-cookiebanner-container,
html:root body:has(.mfp-wrap) #lym-ai-launcher#lym-ai-launcher.lym-ai-launcher,
html:root body:has(.mfp-wrap) .wd-toolbar,
html:root body:has(.mfp-wrap) .wd-sticky-btn,
html:root body:has(.mfp-wrap) #cmplz-cookiebanner-container#cmplz-cookiebanner-container {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: none !important;
}
/* ==========================================================================
6. DƯỢC SĨ LYM CHAT PANEL (`#lym-ai-panel`) TOUCH TARGETS & TYPOGRAPHY
Fixes:
- P1-02: `.lym-ai-icon-btn` (`#lym-ai-menu-btn`, `#lym-ai-close-btn`) was `32×32px` (`< 44px`).
- P1-03: `.lym-ai-send-btn` (`40×40px`), `.lym-ai-btn-primary` (`40px`), `.lym-ai-prod-btn` (`32px`) were `< 44px`.
- P2-01: `.lym-ai-header__badge` (`11px`), `.lym-ai-prod-card__brand` (`11px`), `.lym-ai-prod-card__tpcn-dot` (`10px`) were `< 12px`.
========================================================================== */
html:root body #lym-ai-panel#lym-ai-panel .lym-ai-header {
height: 60px !important;
min-height: 60px !important;
max-height: 60px !important;
padding: 8px 12px !important;
}
html:root body #lym-ai-panel#lym-ai-panel .lym-ai-header__actions {
gap: 6px !important;
}
html:root body #lym-ai-panel#lym-ai-panel .lym-ai-icon-btn {
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
border-radius: 10px !important;
}
html:root body #lym-ai-panel#lym-ai-panel .lym-ai-send-btn {
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
margin: 0 !important;
border-radius: 10px !important;
}
html:root body #lym-ai-panel#lym-ai-panel .lym-ai-btn-primary,
html:root body #lym-ai-panel#lym-ai-panel .lym-ai-prod-btn {
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 13px !important;
box-sizing: border-box !important;
}
html:root body #lym-ai-panel#lym-ai-panel .lym-ai-header__badge,
html:root body #lym-ai-panel#lym-ai-panel .lym-ai-prod-card__brand,
html:root body #lym-ai-panel#lym-ai-panel .lym-ai-prod-card__tpcn-dot {
font-size: 12px !important;
}
/* ==========================================================================
7. SITE-WIDE TOUCH TARGETS (`>= 44px`) & MINIMUM FONT SIZE (`>= 12px`) ON `<= 1024px`
Fixes:
- P2-02: Checkout `span.optional` (`(tùy chọn)`) was `10.4px` (`< 12px`).
- P2-03: PDP sale badge `span.onsale.product-label` was `10px` (`< 12px`).
- P2-04: Mobile header icon buttons, hero toggle, home tab buttons, PDP AI chips,
main PDP quantity buttons, and pagination links were `40–42px` (`< 44px`).
========================================================================== */
html:root body.woocommerce-checkout form.checkout label span.optional,
html:root body span.optional {
font-size: 12px !important;
top: 0 !important;
}
html:root body .product-labels .product-label.onsale,
html:root body span.onsale.product-label {
font-size: 12px !important;
}
html:root body .whb-general-header .wd-tools-element > a,
html:root body .whb-mobile-left .wd-tools-element > a,
html:root body .whb-mobile-right .wd-tools-element > a {
min-width: 44px !important;
min-height: 44px !important;
}
html:root body .lym-home-wrap button.lym-hero-desc-toggle.lym-hero-more-btn,
html:root body .lym-home-wrap button.lym-tab-btn,
html:root body .lym-ai-pdp-box__chip,
html:root body #respond input#submit,
html:root body .comment-form input.submit {
min-height: 44px !important;
min-width: 44px !important;
}
html:root body .lym-home-wrap button.lym-tab-btn {
height: 44px !important;
}
html:root body.single-product .summary-inner form.cart div.quantity .minus,
html:root body.single-product .summary-inner form.cart div.quantity .plus {
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
flex: 0 0 44px !important;
}
html:root body .wd-pagination .page-numbers,
html:root body nav.wd-pagination a.page-numbers,
html:root body nav.wd-pagination span.page-numbers,
html:root body .woocommerce-pagination ul.page-numbers li .page-numbers {
min-width: 44px !important;
min-height: 44px !important;
height: 44px !important;
}
}
/* ==========================================================================
8. TABLET & LANDSCAPE (`768px – 1024px`): SIDE-BY-SIDE COOKIE BANNER & LAUNCHER
Cookie banner sits on bottom-left (`left: 16px, width: 410px`) above `.wd-toolbar` / `.wd-sticky-btn`,
while `#lym-ai-launcher` sits on bottom-right (`right: 12px`), ensuring > 180px horizontal separation
even on short landscape viewports (`844×390`).
========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
html:root body #cmplz-cookiebanner-container#cmplz-cookiebanner-container .cmplz-cookiebanner,
html:root body .cmplz-cookiebanner.cmplz-show {
left: 16px !important;
right: auto !important;
width: 410px !important;
max-width: calc(100vw - 190px) !important;
bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
}
html:root body.single-product #cmplz-cookiebanner-container#cmplz-cookiebanner-container .cmplz-cookiebanner,
html:root body.single-product .cmplz-cookiebanner.cmplz-show {
bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}
}
/* ==========================================================================
9. MOBILE PORTRAIT (`<= 767.98px`): FULL-WIDTH COOKIE BANNER & LIFTED LAUNCHER
Cookie banner sits 12px above `.wd-toolbar` / `.wd-sticky-btn`, and `#lym-ai-launcher`
sits >= 12px above `.cmplz-cookiebanner.cmplz-show`.
========================================================================== */
@media (max-width: 767.98px) {
html:root body #cmplz-cookiebanner-container#cmplz-cookiebanner-container .cmplz-cookiebanner,
html:root body .cmplz-cookiebanner.cmplz-show {
left: 10px !important;
right: 10px !important;
width: auto !important;
max-width: calc(100vw - 20px) !important;
bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
}
html:root body.single-product #cmplz-cookiebanner-container#cmplz-cookiebanner-container .cmplz-cookiebanner,
html:root body.single-product .cmplz-cookiebanner.cmplz-show {
bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Lift #lym-ai-launcher cleanly above the 1-row-button cookie banner (~118px tall) + 14px gap */
html:root body:has(#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show:not(.cmplz-dismissed):not(.cmplz-hidden)) #lym-ai-launcher#lym-ai-launcher.lym-ai-launcher {
bottom: calc(204px + env(safe-area-inset-bottom, 0px)) !important;
transition: none !important;
}
html:root body.single-product:has(#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show:not(.cmplz-dismissed):not(.cmplz-hidden)) #lym-ai-launcher#lym-ai-launcher.lym-ai-launcher {
bottom: calc(208px + env(safe-area-inset-bottom, 0px)) !important;
transition: none !important;
}
}
/* ==========================================================================
10. COMPACT MOBILE (`< 380px`, e.g. `360×800`, `360×740`, `375×667`):
Collapse `.lym-zalo-consult-btn` in sticky buy bar to a 44×44px icon-only button (`💬`)
so the 3 blocks (`- 1 +`, `Mua ngay`, `💬`) have generous breathing room.
========================================================================== */
@media (max-width: 379.98px) {
html:root body.single-product .wd-sticky-btn div.quantity,
html:root body.single-product .wd-sticky-btn.wd-quantity-overlap div.quantity,
html:root body.single-product .wd-sticky-btn .wd-sticky-btn-cart form.cart div.quantity {
width: 96px !important;
min-width: 96px !important;
max-width: 96px !important;
flex: 0 0 96px !important;
}
html:root body.single-product .wd-sticky-btn div.quantity .minus,
html:root body.single-product .wd-sticky-btn div.quantity .plus,
html:root body.single-product .wd-sticky-btn div.quantity button.minus,
html:root body.single-product .wd-sticky-btn div.quantity button.plus {
width: 30px !important;
min-width: 30px !important;
max-width: 30px !important;
flex: 0 0 30px !important;
}
html:root body.single-product .wd-sticky-btn div.quantity input.qty,
html:root body.single-product .wd-sticky-btn div.quantity input[type="number"].qty {
width: 34px !important;
min-width: 34px !important;
max-width: 34px !important;
flex: 0 0 34px !important;
}
html:root body.single-product .wd-sticky-btn .lym-zalo-consult-btn {
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
flex: 0 0 44px !important;
padding: 0 !important;
}
html:root body.single-product .wd-sticky-btn .lym-zalo-consult-btn .lym-zalo-text-short {
font-size: 0 !important;
gap: 0 !important;
}
html:root body.single-product .wd-sticky-btn .lym-zalo-consult-btn .lym-zalo-text-short::before {
content: "💬";
font-size: 18px !important;
line-height: 1 !important;
}
}
/* responsive.css */
/**
* LYM Child Theme — Responsive Overrides (Part: responsive.css)
* Agent: R1 (2026-10-21)
*
* Enqueued last among `assets/css/parts/*.css` (after `brands.css`, `checkout.css`, `home.css`).
* Breakpoints aligned with WoodMart:
* - Mobile: <= 767px
* - Tablet: 768px – 1024px (and <= 1099px for wide 2-column forms like Checkout / Addresses)
* - Desktop: >= 1025px (with intermediate desktop 1025px – 1279px header nav tuning)
*
* Note on `!important`: Only used where required to override existing `!important` declarations
* in `style.css`, `assets/css/parts/{checkout,home}.css`, Complianz, or WoodMart parent CSS.
*/
/* ==========================================================================
1. CHECKOUT PAGE (`body.woocommerce-checkout` — `/thanh-toan/`)
Fixes:
- R1-01 (P0): At 769px–991px (and ~1000px outer browser window = ~984px CSS viewport),
WoodMart parent sets `.customer-details { flex: 1 0 0px }` and `.checkout-order-review { flex: 1.2 0 0px }`.
When `style.css:6283` & `checkout.css:81` switch `form.checkout` to `flex-direction: column !important`
with `overflow: hidden !important` (`checkout.css:100`) without resetting `flex: 0 0 auto`,
`flex-basis: 0px` applies vertically and collapses both `#customer_details` and `.checkout-order-review`
to 34px height, hiding the entire customer form and cutting off the order summary.
- R1-02 (P0): At 992px–1099px (1000px, 1024px), 2-column 7fr/5fr layout squeezes `.checkout-order-review`
and billing fields while WoodMart header is still in tablet/mobile mode. Switch to 1 column below 1100px.
- R1-03 (P1): `style.css:6245` & `checkout.css:15` set `overflow-x: visible !important` on `html, body, .website-wrapper`,
causing off-canvas elements to create a 13px horizontal scrollbar at all 17 widths. Using `overflow-x: clip !important`
prevents horizontal scrollbars across 360px–1920px while preserving `position: sticky` on `.checkout-order-review` at >= 1100px.
========================================================================== */
html:has(body.woocommerce-checkout),
body.woocommerce-checkout,
body.woocommerce-checkout .website-wrapper {
/* `!important` required to override `overflow-x: visible !important` in `style.css:6245` & `checkout.css:15` */
overflow-x: clip !important;
}
body.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup,
body.woocommerce-checkout form.checkout > .woocommerce-notices-wrapper,
body.woocommerce-checkout form.checkout > .woocommerce-error,
body.woocommerce-checkout form.checkout > .woocommerce-message,
body.woocommerce-checkout form.checkout > .woocommerce-info {
grid-column: 1 / -1 !important;
width: 100% !important;
flex: 0 0 auto !important;
}
body.woocommerce-checkout form.checkout #customer_details,
body.woocommerce-checkout form.checkout .checkout-order-review,
body.woocommerce-checkout form.checkout #order_review,
body.woocommerce-checkout form.checkout #payment {
/* `!important` required to override `overflow: hidden !important` in `checkout.css:100` */
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
/* 1-column Checkout below 1100px (360px – 1099px) */
@media (max-width: 1099px) {
html body.woocommerce-checkout form.checkout,
html body.woocommerce-checkout form.checkout.row,
html body.woocommerce-checkout form.checkout > .row {
/* `!important` required to override `@media (min-width: 992px)` grid in `style.css:6225` & `checkout.css:28` */
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
html body.woocommerce-checkout form.checkout #customer_details,
html body.woocommerce-checkout form.checkout .checkout-order-review {
/* `!important` required to override WoodMart `flex: 1 0 0px` / `flex: 1.2 0 0px` and `checkout.css:54-71` */
flex: 0 0 auto !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
position: static !important;
top: auto !important;
float: none !important;
margin: 0 !important;
padding: 20px !important;
box-sizing: border-box !important;
}
}
/* Tablet Checkout (768px – 1099px): full-width 1-column card has plenty of width for 2-column billing fields */
@media (min-width: 768px) and (max-width: 1099px) {
html body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
html body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
/* `!important` required to override `checkout.css:105` `@media (max-width: 991px)` 1fr rule */
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: 16px !important;
row-gap: 16px !important;
}
html body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > p.form-row-first,
html body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > p.form-row-first {
grid-column: 1 / 2 !important;
}
html body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > p.form-row-last,
html body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > p.form-row-last {
grid-column: 2 / 3 !important;
}
}
/* Mobile Checkout (<= 767px): compact card padding & 1-column billing fields */
@media (max-width: 767px) {
html body.woocommerce-checkout form.checkout #customer_details,
html body.woocommerce-checkout form.checkout .checkout-order-review {
padding: 16px !important;
}
html body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
html body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
grid-template-columns: 1fr !important;
row-gap: 14px !important;
}
html body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > p.form-row,
html body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > p.form-row {
grid-column: 1 / -1 !important;
}
}
/* ==========================================================================
2. HOMEPAGE & `/en/` CATEGORY SPOTLIGHT BANNER CLIPPING (`<= 1024px`)
Fixes R1-04 (P1): `style.css:3265` & `home.css:156` set `max-height: 160px !important; overflow: hidden !important;`
on `.lym-cat-spotlight-banner` at `<= 1024px`, clipping 36px of content (`scrollHeight: 196px`).
========================================================================== */
@media (max-width: 1024px) {
html body .lym-home-wrap a.lym-cat-spotlight-banner {
/* `!important` required to override `home.css:156-157` (`max-height: 160px !important; overflow: hidden !important`) */
max-height: none !important;
height: auto !important;
overflow: visible !important;
}
}
/* ==========================================================================
3. FIXED / STICKY LAYER COLLISIONS (COOKIE BANNER, `.wd-toolbar`, `.wd-sticky-btn`, `#lym-ai-launcher`)
Fixes:
- R1-05 (P1): `style.css:5127` used `@media (max-width: 1023px)` instead of `1024px`, causing `.cmplz-cookiebanner`
at `1024px` (`bottom: 20px`) to overlap `.wd-toolbar` (`height: 56px`) and `.wd-sticky-btn` (`height: 60px`).
- R1-06 (P1): At `360px–1000px`, full-width `.cmplz-cookiebanner` (`left: 12px; right: 12px; bottom: 68px`)
overlaps `#lym-ai-launcher` (`right: 12px; bottom: 68px`).
========================================================================== */
/* Tablet (768px – 1024px): keep cookie banner on bottom-left above `.wd-toolbar` so it never touches `#lym-ai-launcher` on bottom-right */
@media (min-width: 768px) and (max-width: 1024px) {
html body #cmplz-cookiebanner-container .cmplz-cookiebanner,
html body .cmplz-cookiebanner {
/* `!important` required to override `style.css:4901-4907` & `5128-5138` */
left: 16px !important;
right: auto !important;
width: 380px !important;
max-width: calc(100vw - 220px) !important;
bottom: calc(var(--lym-bottom-bar-height, 60px) + 12px) !important;
}
}
/* Mobile (<= 767px): when cookie banner is visible, lift `#lym-ai-launcher` above the cookie banner */
@media (max-width: 767px) {
html body:has(#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show:not(.cmplz-dismissed):not(.cmplz-hidden)) #lym-ai-launcher {
/* `!important` required to clear the active mobile cookie banner (top ~663px at 360px) without modifying `lym-ai-pharmacist` plugin */
bottom: 262px !important;
transition: none !important;
}
}
/* ==========================================================================
4. DESKTOP HEADER NAVIGATION & TOPBAR AT INTERMEDIATE WIDTHS (`1025px – 1279px`)
Fixes:
- R1-07 (P1): At `1100px` and `1180px`, `.whb-header-bottom .wd-header-main-nav .wd-nav > li` wraps onto 2 rows.
- R1-08 (P2): At `1100px` on `/en/`, `.whb-top-bar .lym-topbar-hotline` wraps onto 2 lines.
========================================================================== */
@media (min-width: 1025px) and (max-width: 1279px) {
html body .whb-header-bottom .wd-header-cats,
html body .whb-header-bottom .wd-header-cats .menu-opener {
/* `!important` required to override `min-width: 225px !important` in `style.css:2774-2780` */
min-width: 185px !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
html body .whb-header-bottom .wd-header-main-nav .wd-nav {
flex-wrap: nowrap !important;
gap: 2px !important;
}
html body .whb-header-bottom .wd-header-main-nav .wd-nav > li > a {
padding-left: 7px !important;
padding-right: 7px !important;
font-size: 13px !important;
white-space: nowrap !important;
}
html body .whb-top-bar .lym-topbar-hotline {
font-size: 12px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 56vw !important;
}
html body .whb-top-bar .wd-header-nav .wd-nav > li > a {
padding-left: 6px !important;
padding-right: 6px !important;
font-size: 12px !important;
white-space: nowrap !important;
}
}
/* ==========================================================================
5. SINGLE PRODUCT PAGE (`body.single-product`) OVERFLOW & CLIPPING FIXES
Fixes:
- R1-09 (P1): Synced product descriptions in `#lym-sec-desc` contain inline `.container` (`width: 1120px`)
and `.row` (`margin: 0 -15px`), causing 30px horizontal clipping inside `.lym-desc-collapsible`.
- R1-10 (P1): `style.css:3873` sets `overflow: hidden !important` on `table.lym-specs-table, table.shop_attributes`,
clipping 16px vertically when stacked as `display: block` at `<= 640px`.
- R1-11 (P2): `div.product-images.wd-grid-col` has 5px horizontal scrollWidth overflow at `1100px–1920px`.
========================================================================== */
body.single-product .lym-desc-collapsible .container,
body.single-product .lym-desc-collapsible .row,
body.single-product .lym-pdp-section .lym-prose-content .container,
body.single-product .lym-pdp-section .lym-prose-content .row {
/* `!important` required to override inline `style="width: 1120px; margin: 0 -15px; padding: 0 48px"` in synced product HTML */
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
body.single-product table.lym-specs-table,
body.single-product table.shop_attributes,
body.single-product .lym-pdp-section table {
/* `!important` required to override `overflow: hidden !important` in `style.css:3873` */
overflow: visible !important;
height: auto !important;
max-height: none !important;
}
body.single-product .product-images,
body.single-product .woocommerce-product-gallery,
body.single-product .woocommerce-product-gallery .wd-gallery-images,
body.single-product .woocommerce-product-gallery .wd-gallery-thumb {
overflow-x: clip !important;
max-width: 100% !important;
}
/* ==========================================================================
6. CART PAGE (`body.woocommerce-cart` — `/gio-hang/`) THUMBNAIL CELL & 1-COLUMN TABLET LAYOUT
Fixes:
- R1-12 (P2): `td.product-thumbnail > a` is 56px wide while WoodMart sets `img { min-width: 80px }`,
causing 24px–44px horizontal clipping on cart product thumbnails at 768px–1920px.
- R1-12b (P1): At `1024px` (where header is still tablet/mobile), WoodMart switches `.cart-content-wrapper`
to 2 columns, squeezing the 6-column cart table so `td.product-name` is only 53px wide (wrapping 3–4 letters per line).
Stacking `.cart-content-wrapper` into 1 column below `1100px` (`@media (max-width: 1099px)`) and compacting cell padding
at `1100px–1279px` gives `td.product-name` comfortable reading width across all viewports.
========================================================================== */
body.woocommerce-cart table.shop_table td.product-thumbnail {
width: 72px !important;
min-width: 72px !important;
}
body.woocommerce-cart table.shop_table td.product-thumbnail > a {
display: block !important;
width: 64px !important;
max-width: 100% !important;
overflow: visible !important;
}
body.woocommerce-cart table.shop_table td.product-thumbnail img {
width: 64px !important;
min-width: 0 !important;
max-width: 100% !important;
height: auto !important;
}
body.woocommerce-cart .woocommerce > .cart-content-wrapper > .woocommerce-notices-wrapper {
grid-column: 1 / -1 !important;
width: 100% !important;
flex: 0 0 auto !important;
}
body.woocommerce-cart .woocommerce > .cart-content-wrapper > .woocommerce-notices-wrapper:empty {
display: none !important;
}
@media (min-width: 1100px) {
html body.woocommerce-cart .woocommerce > .cart-content-wrapper > .woocommerce-cart-form {
grid-column: 1 / 2 !important;
}
html body.woocommerce-cart .woocommerce > .cart-content-wrapper > .cart_totals,
html body.woocommerce-cart .woocommerce > .cart-content-wrapper > .cart-collaterals {
grid-column: 2 / 3 !important;
}
}
@media (max-width: 1099px) {
html body.woocommerce-cart .woocommerce > .cart-content-wrapper,
html body.woocommerce-cart .woocommerce > .row {
/* `!important` + higher specificity required to override `checkout.css:50` `@media (min-width: 992px)` 2-column grid */
display: flex !important;
flex-direction: column !important;
grid-template-columns: 1fr !important;
gap: 24px !important;
}
html body.woocommerce-cart .woocommerce > .cart-content-wrapper > .woocommerce-cart-form,
html body.woocommerce-cart .woocommerce > .cart-content-wrapper > .cart_totals,
html body.woocommerce-cart .woocommerce > .cart-content-wrapper > .cart-collaterals {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 auto !important;
margin: 0 !important;
}
}
@media (min-width: 1100px) and (max-width: 1279px) {
html body.woocommerce-cart .woocommerce > .cart-content-wrapper {
grid-template-columns: minmax(0, 8fr) minmax(320px, 4fr) !important;
column-gap: 20px !important;
}
html body.woocommerce-cart table.shop_table.cart th,
html body.woocommerce-cart table.shop_table.cart td {
padding-left: 8px !important;
padding-right: 8px !important;
}
html body.woocommerce-cart table.shop_table.cart td.product-remove {
width: 32px !important;
min-width: 32px !important;
padding-left: 4px !important;
padding-right: 4px !important;
}
html body.woocommerce-cart table.shop_table.cart td.product-name {
min-width: 170px !important;
}
}
/* ==========================================================================
7. BLOG CARDS (`.wd-post`) & PRODUCT CARD ACTION BUTTONS (`.wd-product`)
Fixes:
- R1-13 (P2): `.wd-post .wd-post-cat` (`height: 24px; overflow: hidden` + `padding: 3px 10px` in `style.css:2969`)
clips vertically (`scrollHeight: 30 > clientHeight: 24`).
- R1-14 (P1): `.wd-product .wd-product-thumb .wd-buttons.wd-pos-r-t` falls back to `position: static` on `/flash-sale/`
(extending 40px below the thumbnail) and sticks 12px right on desktop product grids.
========================================================================== */
.wd-post .wd-post-cat {
/* `!important` required to override WoodMart `.wd-post-cat { height: 24px; overflow: hidden }` + `style.css:2969` */
height: auto !important;
min-height: 24px !important;
line-height: 1.35 !important;
overflow: visible !important;
}
.wd-product .wd-product-thumb .wd-buttons.wd-pos-r-t {
/* `!important` required to ensure absolute top-right placement even when WoodMart hover stylesheet is deferred */
position: absolute !important;
top: 8px !important;
right: 8px !important;
z-index: 4 !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
transform: none !important;
}
.wd-product .wd-product-thumb .wd-buttons.wd-pos-r-t .wd-action-btn > a {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.92) !important;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
}
@media (max-width: 1024px) {
.wd-product .wd-product-thumb .wd-buttons.wd-pos-r-t .wd-quick-view-btn {
display: none !important;
}
.wd-product .wd-product-thumb .wd-buttons.wd-pos-r-t .wd-action-btn > a {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
}
}
/* ==========================================================================
8. MOBILE PRODUCT CARD GRIDS (`<= 414px`) & MY ACCOUNT LAYOUT (`body.woocommerce-account`)
Fixes:
- R1-15 (P1): At `360px–390px`, nested padding (`.container` 16px + `.lym-section-card` 16px + 20px grid gap)
squeezes 2-column product cards to `134–135px` width (`< 150px`).
- R1-16 (P1): On `body.woocommerce-account` at `820px–1100px`, `.woocommerce-MyAccount-navigation` is squeezed to `207px`,
and on `/tai-khoan/edit-address/` `.u-column1.woocommerce-Address` & `.u-column2.woocommerce-Address` are squeezed to `238px`.
========================================================================== */
@media (max-width: 414px) {
html body .main-page-wrapper > .container,
html body .main-page-wrapper > .wd-content-layout {
/* `!important` required to override `width: calc(100% - 32px) !important` in `style.css:5706` */
width: calc(100% - 16px) !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
html body .lym-section-card,
html body .lym-flash-sale-box,
html body .lym-empty-recommendations,
html body .lym-related-products-box,
html body.single-post article.post,
html body.single-post .wd-single-post {
/* `!important` required to override `padding: var(--lym-space-4) !important` in `style.css:5663` */
padding-left: 4px !important;
padding-right: 4px !important;
}
html body .lym-section-card .products,
html body .lym-flash-sale-box .products,
html body .lym-empty-recommendations .products,
html body .lym-related-products-box .products,
html body .products.wd-grid-g {
--wd-col-gap: 8px !important;
column-gap: 8px !important;
}
}
/* My Account Navigation + Content Layout */
@media (max-width: 1024px) {
html body.woocommerce-account .woocommerce {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
html body.woocommerce-account .wd-my-account-sidebar,
html body.woocommerce-account .woocommerce-MyAccount-navigation,
html body.woocommerce-account .woocommerce-MyAccount-content {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 auto !important;
float: none !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media (min-width: 1025px) {
html body.woocommerce-account .wd-my-account-sidebar,
html body.woocommerce-account .woocommerce-MyAccount-navigation {
min-width: 240px !important;
flex: 0 0 240px !important;
}
html body.woocommerce-account .woocommerce-MyAccount-content {
flex: 1 1 0% !important;
min-width: 0 !important;
}
}
/* My Account Addresses (`/tai-khoan/edit-address/`): 1 column below 1100px, 2 equal columns >= 1100px */
@media (max-width: 1099px) {
body.woocommerce-account .u-columns.woocommerce-Addresses {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
width: 100% !important;
}
body.woocommerce-account .u-columns.woocommerce-Addresses .u-column1.woocommerce-Address,
body.woocommerce-account .u-columns.woocommerce-Addresses .u-column2.woocommerce-Address {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 auto !important;
float: none !important;
margin: 0 !important;
}
}
@media (min-width: 1100px) {
body.woocommerce-account .u-columns.woocommerce-Addresses {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 24px !important;
width: 100% !important;
}
body.woocommerce-account .u-columns.woocommerce-Addresses::before,
body.woocommerce-account .u-columns.woocommerce-Addresses::after {
display: none !important;
}
body.woocommerce-account .u-columns.woocommerce-Addresses .u-column1.woocommerce-Address,
body.woocommerce-account .u-columns.woocommerce-Addresses .u-column2.woocommerce-Address {
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin: 0 !important;
}
}
/* ==========================================================================
9. MOBILE & TABLET TOUCH TARGETS (`>= 40px` AT `<= 1024px`)
Fixes R1-17 (P2):
- `.lym-hero-desc-toggle.lym-hero-more-btn` (74x21px -> >= 40px height, with auto-height hero slide on mobile)
- `button.lym-tab-btn` (120x36px -> 40px height)
- `.wd-pagination .page-numbers` (34x34px -> 40x40px)
========================================================================== */
@media (max-width: 1024px) {
html body .lym-home-wrap button.lym-hero-desc-toggle.lym-hero-more-btn {
/* `!important` required to override `home.css:79` `padding: 0 !important` */
min-height: 40px !important;
min-width: 44px !important;
padding: 6px 10px !important;
display: inline-flex !important;
align-items: center !important;
}
html body .lym-home-wrap button.lym-tab-btn {
min-height: 40px !important;
height: 40px !important;
padding: 0 16px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
html body .wd-pagination .page-numbers,
html body nav.wd-pagination a.page-numbers,
html body nav.wd-pagination span.page-numbers,
html body .woocommerce-pagination ul.page-numbers li .page-numbers {
min-width: 40px !important;
min-height: 40px !important;
height: 40px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
}
@media (max-width: 767px) {
html body .lym-home-wrap .lym-hero-main,
html body .lym-home-wrap .lym-hero-slide {
height: auto !important;
min-height: 280px !important;
}
}
/* spacing-polish.css */
/**
* LYM Child Theme — Rà soát & Tinh chỉnh Khoảng thở Toàn site (UI3)
*
* Mục tiêu:
* - Xử lý các vùng bố cục chật/sát mép (< 6px), phần tử anh em quá sát (< 6px),
* lệch dọc (> 6px) trong thanh có chiều cao cố định, và chữ bị cắt/ellipsis ngoài ý muốn.
* - Quy tắc cứng:
* 1. KHÔNG tăng chiều cao thanh điều hướng, thanh dính, top bar, thanh mua dính,
* thanh tab PDP, thanh lọc A-Z dính, hoặc thanh toolbar dưới mobile (trước = sau ±0px).
* 2. Giữ nguyên bố cục, màu sắc, icon, phông chữ, hình khối gốc; không thêm animation/transform.
* 3. Dùng design token (`var(--lym-*)`) và thang khoảng cách chuẩn của site.
*
* Tự động nạp cuối cùng qua `glob('/assets/css/parts/*.css')` trong `functions.php`
* (sắp xếp theo tên bảng chữ cái: nạp sau `responsive-mobile.css` và `responsive.css`).
*/
/* ==========================================================================
UI3-01: Thanh toolbar dưới trên Mobile & Tablet (`.wd-toolbar` @ <= 1024px)
- Lỗi:
1. Nhãn `.wd-toolbar-label` bị cắt cụt nặng ("Tr...", "C...", "K...", "Gi...", "T...")
trên toàn bộ trang ở 1024px, 768px, 390px (495 vị trí) do `style.css:4764` đặt
`.wd-toolbar > div > a { min-width: 44px; display: inline-flex }` thiếu `width: 100%`,
kết hợp với `.wd-toolbar-label { position: absolute; left: 10px; right: 10px }` của WoodMart
bóp chiều rộng nhãn còn 24px (overflowPx = 35px).
2. Khoảng cách trên/dưới của mục 44px trong thanh `.wd-toolbar` (cao 56px) bị lệch:
`topGap = 8.5px`, `bottomGap = 3.5px` (chênh 5px, sát đáy < 6px), mép trái/phải `5px` (< 6px).
- Đo trước -> sau:
- Chiều cao `.wd-toolbar`: 56px -> 56px (±0px).
- Chiều rộng nhãn `.wd-toolbar-label`: 24px (bị cắt "Tr...") -> tự nhiên 52–68px (hiển thị đủ 100% chữ).
- Khoảng cách trên/dưới mục con (cao 44px): `8.5px / 3.5px` -> `6px / 6px` (cân đối tuyệt đối).
- Khoảng cách mép trái/phải của thanh: `5px` -> `8px` (`var(--lym-space-2)`).
- Lý do dùng `!important`: Thắng quy tắc `!important` trong `style.css:4753-4774` và `responsive.css:154`.
========================================================================== */
@media (max-width: 1024px) {
html:root body .wd-toolbar {
padding: 0 var(--lym-space-2, 8px) env(safe-area-inset-bottom, 0px) var(--lym-space-2, 8px) !important;
align-items: center !important;
justify-content: space-around !important;
}
html:root body .wd-toolbar > div,
html:root body .wd-toolbar > .wd-toolbar-item {
flex: 1 1 0% !important;
min-width: 0 !important;
height: var(--lym-touch-min, 44px) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
html:root body .wd-toolbar > div > a,
html:root body .wd-toolbar .wd-toolbar-item > a {
width: 100% !important;
height: var(--lym-touch-min, 44px) !important;
min-height: var(--lym-touch-min, 44px) !important;
max-height: var(--lym-touch-min, 44px) !important;
padding: 2px 0 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 2px !important;
position: relative !important;
}
html:root body .wd-toolbar .wd-toolbar-label {
position: static !important;
inset: auto !important;
display: block !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
font-size: var(--lym-fs-sm, 12px) !important;
line-height: 1.2 !important;
letter-spacing: -0.02em !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
margin: 0 !important;
padding: 0 !important;
}
}
/* ==========================================================================
UI3-02: Thanh trên cùng (`.whb-top-bar`, cao 38px) trên Desktop (@ >= 1025px)
- Lỗi:
Menu phụ bên phải (`Tra cứu đơn hàng | Đối tác Affiliate | Đại lý | Hỗ trợ`,
`.whb-top-bar .wd-header-nav`) có `a.woodmart-nav-link` cao `42px` vượt quá chiều cao
thanh `.whb-top-bar` (`38px`) 4px xuống dưới (`bottomGap = -4px`), khiến chữ
`span.nav-link-text` bị lệch xuống dưới (`topGap = 11.9px`, `bottomGap = 7.9px`) và
khối `nav.wd-header-nav` chạm sát mép trên/dưới (`topDist = 0px, bottomDist = 0px`).
- Đo trước -> sau:
- Chiều cao `.whb-top-bar`: 38px -> 38px (±0px).
- Khoảng cách `nav.wd-header-nav` tới mép trên/dưới `.whb-top-bar`: `0px / 0px` -> `6px / 6px`.
- Khoảng cách chữ `span.nav-link-text` tới mép trên/dưới `.whb-top-bar`: `11.9px / 7.9px` -> `9.9px / 9.9px` (chênh 0px).
- Lý do dùng `!important`: Thắng chiều cao menu mặc định của WoodMart Header Builder.
========================================================================== */
@media (min-width: 1025px) {
html:root body .whb-top-bar .wd-header-nav {
height: 26px !important;
min-height: 26px !important;
max-height: 26px !important;
align-self: center !important;
display: flex !important;
align-items: center !important;
}
html:root body .whb-top-bar .wd-header-nav .wd-nav,
html:root body .whb-top-bar .wd-header-nav .wd-nav > li,
html:root body .whb-top-bar .wd-header-nav .wd-nav > li > a {
height: 26px !important;
min-height: 26px !important;
max-height: 26px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
display: inline-flex !important;
align-items: center !important;
}
}
/* ==========================================================================
UI3-03: Thanh điều hướng dưới (`.whb-header-bottom`, cao 46px) trên Desktop (@ >= 1025px)
- Lỗi:
1. Khối `nav.wd-header-main-nav` cao `44px` nằm trong `.whb-header-bottom` cao `46px`
khiến viền hộp `nav` cách mép trên/dưới chỉ `1px` (`topDist = 1px, bottomDist = 1px`).
2. Nút `.wd-header-cats` ("Danh mục sản phẩm") có `margin-top: -1px` của WoodMart,
nhô 1px lên đường viền của `.whb-general-header`.
- Đo trước -> sau:
- Chiều cao `.whb-header-bottom`: 46px -> 46px (±0px).
- Khoảng cách `nav.wd-header-main-nav` tới mép trên/dưới `.whb-header-bottom`: `1px / 1px` -> `6px / 6px`
(chữ liên kết vẫn căn giữa tuyệt đối ở `topGap = 13px, bottomGap = 13px`).
- Nút `.wd-header-cats`: `margin-top: -1px` -> `0px` (nằm gọn trong thanh 46px).
- Lý do dùng `!important`: Thắng quy tắc chiều cao của WoodMart Header Builder và `header.css`.
========================================================================== */
@media (min-width: 1025px) {
html:root body .whb-header-bottom .wd-header-cats {
margin-top: 0 !important;
margin-bottom: 0 !important;
height: var(--lym-touch-min, 44px) !important;
align-self: center !important;
}
html:root body .whb-header-bottom .wd-header-main-nav,
html:root body .whb-header-bottom .wd-header-main-nav .wd-nav,
html:root body .whb-header-bottom .wd-header-main-nav .wd-nav > li,
html:root body .whb-header-bottom .wd-header-main-nav .wd-nav > li > a {
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
align-self: center !important;
display: inline-flex !important;
align-items: center !important;
}
}
/* ==========================================================================
UI3-04: Thanh Header chính (`.whb-general-header`, cao 87px / dính 67px) trên Desktop (@ >= 1025px)
- Lỗi:
1. Hàng `.lym-header-hot-keywords` đặt `margin-top: 5px` (trong `header.css:103`),
cách ô tìm kiếm `form.searchform` 5px (< 6px).
2. Cụm công cụ phải `.whb-general-header .whb-col-right` (`Tài khoản`, `Yêu thích`, `Giỏ hàng`)
có `gap: 0px`, các hộp công cụ chạm sát nhau (`gapPx = 0px`).
3. Ở bản tiếng Anh (`/en/`) tại viewport `1100px`, nút chọn danh mục `.wd-search-cat > a`
bị cắt chữ `"SELECT CATEGORY"` thành `"SELECT CATEGO..."` và cột công cụ phải hơi chật.
- Đo trước -> sau:
- Chiều cao `.whb-general-header`: đầu trang `87px -> 87px` (±0px); khi dính `67px -> 67px` (±0px).
- Khoảng cách `form.searchform` <-> `.lym-header-hot-keywords`: `5px` -> `6px`
(tổng khối tìm kiếm 44 + 6 + 15.6 = 65.6px trong lòng 86px -> cách đều trên/dưới `10.2px / 10.2px`).
- Khoảng cách giữa các nút công cụ `.whb-col-right`: `0px` -> `8px` (`var(--lym-space-2)`).
- Nút `.wd-search-cat > a` ở `1025px–1279px`: hiển thị trọn vẹn `"SELECT CATEGORY"` không bị cắt chữ.
- Lý do dùng `!important`: Thắng `margin-top: 5px` trong `header.css` và padding công cụ WoodMart.
========================================================================== */
@media (min-width: 1025px) {
html:root body .whb-general-header .lym-header-hot-keywords {
margin-top: 6px !important;
}
html:root body .whb-general-header .whb-col-right {
gap: var(--lym-space-2, 8px) !important;
}
html:root body .whb-general-header .whb-col-right .wd-tools-element > a {
padding-left: 6px !important;
padding-right: 6px !important;
}
html:root body .whb-general-header .wd-search-cat-btn,
html:root body .whb-general-header .wd-search-cat > a {
padding-inline: 10px !important;
padding-left: 10px !important;
padding-right: 10px !important;
font-size: var(--lym-fs-sm, 12px) !important;
}
html:root body .whb-general-header .wd-search-cat-btn > span,
html:root body .whb-general-header .wd-search-cat > a > span {
font-size: var(--lym-fs-sm, 12px) !important;
}
}
/* ==========================================================================
UI3-05: Thẻ sản phẩm (`.wd-product`) — Hàng Thương hiệu/Xuất xứ & Hàng Giá khuyến mãi
- Lỗi:
1. Hàng `.wd-product .lym-loop-meta-row` có `gap: 4px !important` (`style.css:534`),
khi tên thương hiệu dài (vd `NATURAL FACTORS`) thì nhãn xuất xứ (`Canada`) cách chỉ `4px` (< 6px).
2. Quy tắc `.product-grid-item .price .amount { font-size: 16px !important }` (`style.css:5320`)
ghi đè kích thước giá gốc gạch ngang (`del .amount`) từ `12px` lên `16px`, làm giá 7 chữ số
(`1.590.000₫` + `1.790.000₫`) bị đẩy xuống 2 dòng sát nhau (`row-gap: 2px`) trong khung 38px;
đồng thời trên mobile (`<= 767px`), `style.css:2507` đặt `column-gap: 4px !important` (< 6px).
- Đo trước -> sau:
- Khoảng cách `.lym-loop-brand` <-> `.lym-loop-origin`: `4px` -> tối thiểu `8px` (`var(--lym-space-2)`).
- Cỡ chữ giá gạch ngang `del .amount` trong thẻ: `16px` -> `12px` (`var(--lym-fs-sm)`),
giúp giá khuyến mãi + giá gốc nằm gọn trên 1 dòng, căn giữa dọc trong khung 38px (desktop) / 34px (mobile).
- Khoảng cách giữa giá khuyến mãi `ins` và giá gốc `del`: `column-gap: 4px / row-gap: 2px` -> `6px / 6px`.
- Lý do dùng `!important`: Thắng các quy tắc `!important` trong `style.css:534, 737, 2507, 5320`.
========================================================================== */
html:root body .wd-product .lym-loop-meta-row {
gap: var(--lym-space-2, 8px) !important;
}
html:root body .wd-product .price,
html:root body .wd-loop-builder-off .wd-product .price,
html:root body .product-grid-item .price {
column-gap: 6px !important;
row-gap: 6px !important;
}
html:root body .wd-product .price del,
html:root body .wd-product .price del .amount,
html:root body .product-grid-item .price del,
html:root body .product-grid-item .price del .amount {
font-size: var(--lym-fs-sm, 12px) !important;
line-height: 1.25 !important;
}
@media (max-width: 1280px) {
html:root body .wd-product .price,
html:root body .wd-loop-builder-off .wd-product .price,
html:root body .product-grid-item .price,
html:root body .product-grid-item .price .amount,
html:root body .product-grid-item .price ins .amount {
font-size: var(--lym-fs-md-sm, 14px) !important;
}
html:root body .wd-product .price del,
html:root body .wd-product .price del .amount,
html:root body .product-grid-item .price del,
html:root body .product-grid-item .price del .amount {
font-size: var(--lym-fs-sm, 12px) !important;
}
}
/* ==========================================================================
UI3-06: Khoảng thở ngang của thẻ Section & Bài viết Cẩm nang trên Mobile (@ <= 414px)
- Lỗi:
`responsive.css:432-441` đặt `padding-left: 4px !important; padding-right: 4px !important`
cho `.lym-section-card` và `body.single-post article.post` ở màn hình `<= 414px`, khiến
tiêu đề `h2.lym-section-title` ("Danh mục nổi bật"), liên kết "Xem tất cả danh mục →",
và nội dung/ảnh bài viết Cẩm nang chạm sát viền thẻ chỉ `4px–5px` (< 6px).
- Đo trước -> sau:
- `.lym-section-card` (và các hộp đồng cấp): `padding-left/right: 4px` -> `12px` (`var(--lym-space-3)`),
vẫn giữ chiều rộng thẻ sản phẩm 2 cột = `170px` ở 390px và `155px` ở 360px (>= 150px chuẩn R2).
- `body.single-post article.post`: `padding-left/right: 4px` -> `16px` (`var(--lym-space-4)`).
- Lý do dùng `!important`: Thắng `padding-left/right: 4px !important` trong `responsive.css:439-440`.
========================================================================== */
@media (max-width: 414px) {
html:root body .lym-section-card,
html:root body .lym-flash-sale-box,
html:root body .lym-empty-recommendations,
html:root body .lym-related-products-box {
padding-left: var(--lym-space-3, 12px) !important;
padding-right: var(--lym-space-3, 12px) !important;
}
html:root body.single-post article.post,
html:root body.single-post .wd-single-post {
padding-left: var(--lym-space-4, 16px) !important;
padding-right: var(--lym-space-4, 16px) !important;
}
}
/* ==========================================================================
UI3-07: Popup Xem nhanh (`.popup-quick-view`) — Cụm nút số lượng & Thêm vào giỏ dưới đáy
- Lỗi:
Quy tắc `.quick-view-horizontal .entry-summary { mask-image: linear-gradient(to top, transparent 5px, #000 40px) }`
trong `woo-opt-quick-view.css` của WoodMart làm mờ 40px cuối của cột phải `.entry-summary`,
đè trực tiếp lên nửa dưới của cụm nút `- 1 +` và `Thêm vào giỏ`.
- Đo trước -> sau:
- Tắt `mask-image` mờ đáy trên `.popup-quick-view .entry-summary` và thêm `padding-bottom: 16px`
(`var(--lym-space-4)`) cho vùng nội dung cuộn để cụm nút hiển thị sắc nét 100%, cách đáy popup thoáng mắt.
- Lý do dùng `!important`: Thắng style mặc định của WoodMart Quick View.
========================================================================== */
html:root body .popup-quick-view .quick-view-horizontal .entry-summary,
html:root body .popup-quick-view .entry-summary {
-webkit-mask-image: none !important;
mask-image: none !important;
}
html:root body .popup-quick-view .wd-scroll::after,
html:root body .popup-quick-view .summary::after {
display: none !important;
}
html:root body .popup-quick-view .summary-inner .wd-scroll-content,
html:root body .popup-quick-view .summary-inner {
padding-bottom: var(--lym-space-4, 16px) !important;
}
/* ==========================================================================
UI3-08: Ẩn nút nổi `#lym-ai-launcher` khi mở ngăn kéo Mini-cart / Popup trên Desktop (@ >= 1025px)
- Lỗi:
`responsive-mobile.css:487` mới chỉ ẩn `#lym-ai-launcher` khi mở `.wd-side-hidden.wd-opened`
hoặc `.mfp-wrap` ở `@media (max-width: 1024px)`. Trên Desktop (`>= 1025px`), khi mở ngăn kéo
Mini-cart (`.cart-widget-side.wd-opened`), nút `#lym-ai-launcher` (`right: 20px, bottom: 20px`)
đè trực tiếp lên góc phải nút `"Thanh toán"`.
- Đo trước -> sau:
- Khi `.wd-side-hidden.wd-opened` hoặc `.mfp-wrap` đang mở trên Desktop: ẩn `#lym-ai-launcher`
để nút `"Thanh toán"` và `"Xem giỏ hàng"` hiển thị trọn vẹn 100% không bị che.
- Lý do dùng `!important`: Thắng quy tắc hiển thị của widget `#lym-ai-launcher`.
========================================================================== */
@media (min-width: 1025px) {
html:root body:has(.wd-side-hidden.wd-opened) #lym-ai-launcher#lym-ai-launcher.lym-ai-launcher,
html:root body:has(.mfp-wrap) #lym-ai-launcher#lym-ai-launcher.lym-ai-launcher {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
}
/* ==========================================================================
UI3-09: Thanh lọc chữ cái A–Z dính (`.lym-brands-az-bar`) trên `/thuong-hieu-chinh-hang/` (@ >= 1200px)
- Lỗi:
1. Khi cuộn trang trên Desktop, `.lym-brands-az-bar` dính ở `top: 68px` (chỉ cách đáy thanh
điều hướng dính 67px đúng `1px`), làm 2 thanh có bóng đổ/viền dính sát nhau.
2. Ô tìm kiếm `.lym-brands-search-wrap` cố định `width: 206px` (`brands.css:30`), làm chữ
placeholder `"Tìm nhanh thương hiệu"` bị cắt mất chữ `"u"` ở cuối.
- Đo trước -> sau:
- Chiều cao `.lym-brands-az-bar`: 66px -> 66px (±0px).
- Khoảng cách dưới thanh điều hướng dính: `1px` (`top: 68px`) -> `8px` (`top: 75px`).
- Chiều rộng `.lym-brands-search-wrap` trên Desktop rộng (`>= 1200px`): `206px` -> `220px`
(hiển thị đầy đủ chuỗi `"Tìm nhanh thương hiệu"`, các nút A–Z vẫn nằm gọn trên 1 hàng).
- Lý do dùng `!important`: Thắng `brands.css:15, 30`.
========================================================================== */
@media (min-width: 1200px) {
html:root body .lym-brands-directory-wrap .lym-brands-search-wrap {
flex: 0 0 220px !important;
width: 220px !important;
}
html:root body:has(.whb-sticked) .lym-brands-directory-wrap .lym-brands-az-bar {
top: 75px !important;
}
}
/* ==========================================================================
UI3-10: Hộp Cookie (`.cmplz-cookiebanner`), Nhãn Liên hệ Footer & Nút Tìm kiếm Cẩm nang
- Lỗi:
1. Trên Desktop (`>= 1025px`), cụm nút `.cmplz-buttons` trong hộp Cookie khi xuống 2 dòng
có khoảng cách dọc `row-gap: 4px` (< 6px) giữa nút `"Đồng ý tất cả"` và `"Tùy chỉnh"`.
2. Ở cột thông tin liên hệ Footer (`.lym-footer-col`), thẻ `` (`Địa chỉ:`, `Hotline:`, `Email:`)
chưa có khoảng đệm tách nhẹ với nội dung phía sau.
3. Trên trang `/cam-nang/`, nút `.wp-block-search__button` (cao 48px) có `line-height: 1.2` (< 1.25).
- Đo trước -> sau:
- `.cmplz-buttons` trên Desktop: `row-gap: 4px` -> `8px` (`var(--lym-space-2)`), `column-gap: 10px`.
- `.lym-footer-col p strong`: thêm `margin-right: 4px` (`var(--lym-space-1)`).
- `.wp-block-search__button`: `line-height: 1.2` -> `1.35` (chiều cao nút giữ nguyên 48px ±0px).
========================================================================== */
@media (min-width: 1025px) {
html:root body #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
row-gap: var(--lym-space-2, 8px) !important;
column-gap: 10px !important;
}
}
html:root body .lym-footer-col p strong,
html:root body .lym-footer-contact-list strong {
margin-right: var(--lym-space-1, 4px);
}
html:root body .wp-block-search__button {
line-height: 1.35 !important;
}
/* banner-1-optin.css */
input[type="checkbox"].cmplz-category { width: initial; -webkit-appearance: checkbox;}input[type="checkbox"].cmplz-category:checked::before { content: '';}.cmplz-cookiebanner { box-sizing: border-box;}:root { --cmplz_banner_width: 520px; --cmplz_banner_background_color: #ffffff; --cmplz_banner_border_color: #d1e7dd; --cmplz_banner_border_width: 1px 1px 1px 1px ; --cmplz_banner_border_radius: 12px 12px 12px 12px; --cmplz_banner_margin: 10px; --cmplz_categories-height: 163px; --cmplz_title_font_size: 15px; --cmplz_text_line_height: calc(var(--cmplz_text_font_size) * 1.5); --cmplz_text_color: #1e293b; --cmplz_hyperlink_color: #0f5132; --cmplz_text_font_size: 13px; --cmplz_link_font_size: 13px; --cmplz_category_body_font_size: 13px; --cmplz_button_accept_background_color: #0f5132; --cmplz_button_accept_border_color: #0f5132; --cmplz_button_accept_text_color: #ffffff; --cmplz_button_deny_background_color: #ffffff; --cmplz_button_deny_border_color: #0f5132; --cmplz_button_deny_text_color: #0f5132; --cmplz_button_settings_background_color: #f0f7f4; --cmplz_button_settings_border_color: #0f5132; --cmplz_button_settings_text_color: #0f5132; --cmplz_button_border_radius: 6px 6px 6px 6px; --cmplz_button_font_size: 15px; --cmplz_category_header_always_active_color: green; --cmplz_category_header_title_font_size: 14px; --cmplz_category_header_active_font_size: 12px; --cmplz-manage-consent-height: 50px; --cmplz-manage-consent-offset: -35px; --cmplz_slider_active_color: #0f5132; --cmplz_slider_inactive_color: #94a3b8; --cmplz_slider_bullet_color: #ffffff;}body.cmplz-banner-active *:not(.cmplz-cookiebanner):not(.cmplz-cookiebanner *) { pointer-events: none !important; user-select: none !important;}.cmplz-cookiebanner * { pointer-events: auto !important; user-select: auto !important;}#cmplz-manage-consent .cmplz-manage-consent { margin: unset; z-index: 9998; color: var(--cmplz_text_color); background-color: var(--cmplz_banner_background_color); border-style: solid; border-color: var(--cmplz_banner_border_color); border-width: var(--cmplz_banner_border_width); border-radius: var(--cmplz_banner_border_radius); border-bottom-left-radius: 0; border-bottom-right-radius: 0; line-height: initial; position: fixed; bottom: var(--cmplz-manage-consent-offset); min-width: 100px; height: var(--cmplz-manage-consent-height); right: 40px; padding: 15px; cursor: pointer; animation: mc_slideOut 0.5s forwards;}#cmplz-manage-consent .cmplz-manage-consent:active { outline: none; border: none;}#cmplz-manage-consent .cmplz-manage-consent.cmplz-dismissed { display: none;}#cmplz-manage-consent .cmplz-manage-consent:hover,#cmplz-manage-consent .cmplz-manage-consent:focus { animation: mc_slideIn 0.5s forwards; animation-delay: 0;}@-webkit-keyframes mc_slideIn { 100% { bottom: 0; }}@keyframes mc_slideIn { 100% { bottom: 0; }}@-webkit-keyframes mc_slideOut { 100% { bottom: var(--cmplz-manage-consent-offset); }}@keyframes mc_slideOut { 100% { bottom: var(--cmplz-manage-consent-offset); }}@media (max-width: 425px) { .cmplz-cookiebanner .cmplz-header .cmplz-title { display: none; }}.cmplz-cookiebanner { max-height: calc(100vh - 20px); overflow-y: auto; position: fixed; height: auto; left: 50%; top: 50%; -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); grid-template-rows: minmax(0, 1fr); z-index: 99999; background: var(--cmplz_banner_background_color);}.cmplz-cookiebanner a { transition: initial;}.cmplz-cookiebanner .cmplz-buttons a.cmplz-btn.tcf { display: none;}.cmplz-cookiebanner.cmplz-dismissed { display: none;}.cmplz-cookiebanner .cmplz-body { width: 100%; grid-column: span 3; overflow-y: auto; overflow-x: hidden; max-height: 55vh;}.cmplz-cookiebanner .cmplz-body::-webkit-scrollbar-track { border-radius: 10px; -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0); background-color: transparent;}.cmplz-cookiebanner .cmplz-body::-webkit-scrollbar { width: 5px; background-color: transparent;}.cmplz-cookiebanner .cmplz-body::-webkit-scrollbar-thumb { background-color: var(--cmplz_button_accept_background_color); border-radius: 10px;}@media (min-width: 350px) { .cmplz-cookiebanner .cmplz-body { min-width: 300px; }}@media (max-height: 400px) { .cmplz-cookiebanner { height: calc(100vh - 20px); display: flex; flex-direction: column; overflow: hidden; gap: 1px; grid-row-gap: 1px; padding: 7px 12px !important; zoom: 0.6; } .cmplz-cookiebanner .cmplz-body { flex: 1; min-height: 0; overflow-y: auto; max-height: none; margin-top: 15px !important; } .cmplz-cookiebanner .cmplz-header, .cmplz-cookiebanner .cmplz-divider, .cmplz-cookiebanner .cmplz-links, .cmplz-cookiebanner .cmplz-buttons, .cmplz-cookiebanner .cmplz-documents { flex-shrink: 0; } .cmplz-cookiebanner .cmplz-header { margin-bottom: 15px !important; max-height: 10px; } .cmplz-close { zoom: 0.6 !important; } .cmplz-cookiebanner .cmplz-buttons { gap: 1px !important; } .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { height: 15vh !important; min-height: unset !important; padding: 0 !important; white-space: nowrap !important; font-size: 1.1rem !important; line-height: 14px !important; zoom: 0.5 !important; } .cmplz-cookiebanner .cmplz-documents, .cmplz-cookiebanner .cmplz-information { zoom: 0.5 !important; }}@media (max-height: 400px) and (max-width: 768px) { .cmplz-cookiebanner { gap: 1px; }}.cmplz-cookiebanner { border-style: solid; border-color: var(--cmplz_banner_border_color); border-width: var(--cmplz_banner_border_width); border-radius: var(--cmplz_banner_border_radius); padding: 15px 20px; display: grid; grid-gap: 10px;}.cmplz-cookiebanner .cmplz-divider { margin-left: -20px; margin-right: -20px;}.cmplz-cookiebanner .cmplz-header { grid-template-columns: 100px 1fr 100px; align-items: center; display: grid; grid-column: span 3;}@media (max-width: 399px) { .cmplz-cookiebanner .cmplz-header { grid-template-columns: auto 1fr auto; }}.cmplz-cookiebanner .cmplz-logo svg { max-height: 35px; width: inherit;}.cmplz-cookiebanner .cmplz-logo img { max-height: 40px; width: inherit;}.cmplz-cookiebanner .cmplz-title { justify-self: center; grid-column-start: 2; font-size: var(--cmplz_title_font_size); color: var(--cmplz_text_color); font-weight: 500;}.cmplz-cookiebanner .cmplz-close { line-height: 20px; justify-self: end; grid-column-start: 3; font-size: 20px; cursor: pointer; width: 20px; height: 20px; color: var(--cmplz_text_color);}.cmplz-cookiebanner .cmplz-close svg { width: 20px; height: 20px;}.cmplz-cookiebanner .cmplz-close:hover { text-decoration: none; line-height: initial; font-size: 18px;}.cmplz-cookiebanner .cmplz-message { word-wrap: break-word; font-size: var(--cmplz_text_font_size); line-height: var(--cmplz_text_line_height); color: var(--cmplz_text_color); margin-bottom: 5px;}.cmplz-cookiebanner .cmplz-message a { color: var(--cmplz_hyperlink_color);}.cmplz-cookiebanner .cmplz-message,.cmplz-cookiebanner .cmplz-categories,.cmplz-cookiebanner .cmplz-links,.cmplz-cookiebanner .cmplz-buttons,.cmplz-cookiebanner .cmplz-divider { grid-column: span 3;}.cmplz-cookiebanner .cmplz-categories.cmplz-tcf .cmplz-category .cmplz-category-header { grid-template-columns: 1fr auto;}.cmplz-cookiebanner .cmplz-categories .cmplz-category { background-color: rgba(239, 239, 239, 0.5);}.cmplz-cookiebanner .cmplz-categories .cmplz-category:not(:last-child) { margin-bottom: 10px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header { display: grid; grid-template-columns: 1fr auto 15px; grid-template-rows: minmax(0, 1fr); align-items: center; grid-gap: 10px; padding: 10px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title { font-weight: 500; grid-column-start: 1; justify-self: start; font-size: var(--cmplz_category_header_title_font_size); color: var(--cmplz_text_color); margin: 0;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active { font-size: var(--cmplz_category_header_active_font_size); font-weight: 500; color: var(--cmplz_category_header_always_active_color);}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active label { display: none;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-banner-checkbox { display: flex; align-items: center; margin: 0;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-banner-checkbox input[data-category=cmplz_functional] { display: none;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle { background: none; border: none; padding: 0; margin: 0; cursor: pointer; grid-column-start: 3; display: flex; align-items: center; justify-content: center; color: inherit;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-icon.cmplz-open { cursor: pointer; content: ''; transform: rotate(0deg); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background-size: cover; height: 18px; width: 18px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description { font-size: var(--cmplz_category_body_font_size); color: var(--cmplz_text_color); margin: 0; max-width: 100%; padding: 10px;}@media (max-width: 425px) { .cmplz-cookiebanner .cmplz-category .cmplz-category-header { grid-template-columns: 1fr!important; }}@media (max-width: 425px) { .cmplz-cookiebanner .cmplz-message { margin-right: 5px; }}.cmplz-cookiebanner .cmplz-buttons { display: flex; gap: var(--cmplz_banner_margin);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn { min-height: 45px; padding: 10px; margin: initial; width: 100%; white-space: nowrap; border-radius: var(--cmplz_button_border_radius); cursor: pointer; font-size: var(--cmplz_button_font_size); font-weight: 500; text-decoration: none; line-height: 20px; text-align: center; flex: initial;}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn:hover { text-decoration: none;}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept { background-color: var(--cmplz_button_accept_background_color); border: 1px solid var(--cmplz_button_accept_border_color); color: var(--cmplz_button_accept_text_color);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny { background-color: var(--cmplz_button_deny_background_color); border: 1px solid var(--cmplz_button_deny_border_color); color: var(--cmplz_button_deny_text_color);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences { background-color: var(--cmplz_button_settings_background_color); border: 1px solid var(--cmplz_button_settings_border_color); color: var(--cmplz_button_settings_text_color);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences { background-color: var(--cmplz_button_settings_background_color); border: 1px solid var(--cmplz_button_settings_border_color); color: var(--cmplz_button_settings_text_color);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-manage-options { background-color: var(--cmplz_button_settings_background_color); border: 1px solid var(--cmplz_button_settings_border_color); color: var(--cmplz_button_settings_text_color);}.cmplz-cookiebanner .cmplz-buttons a.cmplz-btn { display: flex; align-items: center; justify-content: center; padding: initial;}@media (max-width: 425px) { .cmplz-cookiebanner .cmplz-links.cmplz-information { display: initial; text-align: center; }}.cmplz-cookiebanner .cmplz-links { display: flex; gap: var(--cmplz_banner_margin);}.cmplz-cookiebanner .cmplz-links.cmplz-information { justify-content: space-between;}.cmplz-cookiebanner .cmplz-links.cmplz-documents { justify-content: center;}.cmplz-cookiebanner .cmplz-links .cmplz-link { color: var(--cmplz_hyperlink_color); font-size: var(--cmplz_link_font_size); text-decoration: underline; margin: 0;}.cmplz-cookiebanner .cmplz-links .cmplz-link.cmplz-read-more-purposes { display: none;}.cmplz-cookiebanner .cmplz-links ul { margin: 0; padding: 0; list-style: none; display: flex; gap: var(--cmplz_banner_margin); justify-content: center;}.cmplz-categories .cmplz-category .cmplz-description-statistics-anonymous { display: none;}.cmplz-categories .cmplz-category .cmplz-description-statistics { display: block;}.cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle { background: none; border: none; padding: 0; margin: 0; cursor: pointer; grid-column-start: 3; display: flex; align-items: center; justify-content: center; color: inherit;}.cmplz-categories .cmplz-category .cmplz-category-toggle[aria-expanded="true"] .cmplz-icon.cmplz-open { transform: rotate(180deg);}.cmplz-cookiebanner { top: initial; left: initial; right: 10px; bottom: 10px; transform: initial;}@media (min-width: 768px) { .cmplz-cookiebanner { min-width: var(--cmplz_banner_width); max-width: 100%; display: grid; grid-row-gap: 10px; }}@media (max-width: 768px) { .cmplz-cookiebanner { left: initial; right: initial; bottom: 0; width: 100%; } .cmplz-cookiebanner .cmplz-buttons { flex-direction: column; }}@media (min-width: 768px) { .cmplz-message, .cmplz-categories { width: calc(var(--cmplz_banner_width) - 42px); }}.cmplz-cookiebanner .cmplz-categories,.cmplz-cookiebanner .cmplz-save-preferences,.cmplz-cookiebanner .cmplz-link.cmplz-manage-options,.cmplz-cookiebanner .cmplz-manage-vendors,.cmplz-cookiebanner .cmplz-read-more,.cmplz-cookiebanner .cmplz-btn.cmplz-manage-options { display: none;}.cmplz-cookiebanner .cmplz-categories.cmplz-fade-in { animation: fadeIn 1s; -webkit-animation: fadeIn 1s; -moz-animation: fadeIn 1s; -o-animation: fadeIn 1s; -ms-animation: fadeIn 1s; display: block;}@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-ms-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}.cmplz-cookiebanner .cmplz-links.cmplz-information { display: none;}.cmplz-cookiebanner { animation: fadeIn 2s; -webkit-animation: fadeIn 2s; -moz-animation: fadeIn 2s; -o-animation: fadeIn 2s; -ms-animation: fadeIn 2s;}@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-ms-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}.cmplz-cookiebanner .cmplz-preferences,.cmplz-manage-consent-container .cmplz-preferences { display: none;}.cmplz-cookiebanner .cmplz-preferences .cmplz-icon,.cmplz-manage-consent-container .cmplz-preferences .cmplz-icon,.cmplz-cookiebanner .cmplz-preferences .cmplz-description,.cmplz-manage-consent-container .cmplz-preferences .cmplz-description { display: none;}@media (max-width: 768px) { #cmplz-manage-consent .cmplz-manage-consent { display: none; }}.cmplz-logo { display: none !important;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox { position: relative;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox { opacity: 0; margin: 0; margin-top: -10px; cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; position: absolute; z-index: 1; top: 0px; left: 0px; width: 40px; height: 20px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus + .cmplz-label:before { box-shadow: 0 0 0 2px #245fcc;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::before { display: block; background-color: var(--cmplz_slider_active_color); content: ""; padding-left: 6px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label:after { left: 14px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label { position: relative; padding-left: 30px; margin: 0;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:before,.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:after { box-sizing: border-box; position: absolute; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; transition: background-color 0.3s, left 0.3s;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:before { display: block; content: ""; color: #fff; box-sizing: border-box; font-family: 'FontAwesome', sans-serif; padding-left: 23px; font-size: 12px; line-height: 20px; background-color: var(--cmplz_slider_inactive_color); left: 0px; top: -7px; height: 15px; width: 28px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:after { display: block; content: ""; letter-spacing: 20px; background: var(--cmplz_slider_bullet_color); left: 4px; top: -5px; height: 11px; width: 11px;}.cmplz-cookiebanner { box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}#cmplz-manage-consent .cmplz-manage-consent { box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}.cmplz-cookiebanner.cmplz-show { box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}.cmplz-cookiebanner.cmplz-show:hover { transition-duration: 1s; box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;}.cmplz-cookiebanner { border: 1px solid #d1e7dd !important; box-shadow: 0 12px 32px rgba(15, 81, 50, 0.16) !important; font-family: inherit !important; z-index: 99999 !important;}.cmplz-cookiebanner .cmplz-header .cmplz-title { font-weight: 700 !important; color: #0f5132 !important; font-size: 16px !important;}.cmplz-cookiebanner .cmplz-message,.cmplz-cookiebanner .cmplz-description { color: #1e293b !important; line-height: 1.55 !important;}.cmplz-cookiebanner .cmplz-message a,.cmplz-cookiebanner .cmplz-links a { color: #0f5132 !important; font-weight: 600 !important; text-decoration: underline !important;}.cmplz-cookiebanner .cmplz-category.cmplz-preferences { display: none !important;}.cmplz-cookiebanner .cmplz-always-active { font-size: 0 !important; color: transparent !important;}.cmplz-cookiebanner .cmplz-always-active::after { content: "Luôn bật"; font-size: 12px !important; font-weight: 600 !important; color: #0f5132 !important;}html[lang^="en"] .cmplz-cookiebanner .cmplz-always-active::after { content: "Always active";}.cmplz-cookiebanner .cmplz-buttons { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; align-items: stretch !important; justify-content: space-between !important; width: 100% !important;}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn { flex: 1 1 0 !important; min-height: 42px !important; padding: 8px 10px !important; font-size: 14px !important; font-weight: 600 !important; border-radius: 6px !important; text-align: center !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1.25 !important; cursor: pointer !important; transition: all 0.2s ease !important;}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept { background-color: #0f5132 !important; color: #ffffff !important; border: 1.5px solid #0f5132 !important;}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover { background-color: #0a3622 !important; border-color: #0a3622 !important;}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny { background-color: #ffffff !important; color: #0f5132 !important; border: 1.5px solid #0f5132 !important;}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover { background-color: #e8f5ee !important;}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences { background-color: #f0f7f4 !important; color: #0f5132 !important; border: 1.5px solid #0f5132 !important;}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover { background-color: #d1e7dd !important;}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.tcf,.cmplz-cookiebanner .cmplz-buttons a.cmplz-manage-options { display: none !important;}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences { display: none !important;}.cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons .cmplz-btn.cmplz-view-preferences { display: none !important;}.cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons .cmplz-btn.cmplz-save-preferences { display: inline-flex !important;}@media (max-width: 576px) { .cmplz-cookiebanner { left: 8px !important; right: 8px !important; bottom: 8px !important; width: auto !important; max-width: calc(100vw - 16px) !important; padding: 14px !important; } .cmplz-cookiebanner .cmplz-buttons { display: flex !important; flex-direction: row !important; gap: 6px !important; } .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { font-size: 13px !important; padding: 8px 6px !important; min-height: 40px !important; }}