/* ══════════════════════════════════════════════════════════════
Luật Thành Nguyễn & Cộng sự — main.css
Global CSS variables + site-wide styles
Palette: navy + antique gold (rebrand from Velamart, 2026)
══════════════════════════════════════════════════════════════ */
/* ── 1. CSS VARIABLES (single source of truth) ───────────────── */
:root {
/* Brand core */
--brand-primary: #0A2540; /* Navy — nav, buttons, links */
--brand-primary-dark: #071B30; /* Hover/active */
--brand-primary-light: #EEF2F7; /* Tint bg — icon circles, inputs */
--brand-accent: #C9A227; /* Antique gold — highlight/CTA */
--brand-accent-dark: #A8841E; /* Gold hover */
/* Dark backgrounds (footer palette) */
--brand-dark: #0A2540; /* Deep navy footer bg */
--brand-dark-mid: #0E3358; /* Trust bar / dark sections */
--brand-dark-deep: #071120; /* Bottom-bar darkest */
/* Light surfaces */
--surface-page: #f8fafc; /* Page / section bg */
--surface-card: #ffffff; /* Card background */
--surface-light: #eff6ff; /* Light-blue tint */
/* Text scale */
--text-heading: #0f172a; /* Headings */
--text-body: #1e293b; /* Body text */
--text-mid: #475569; /* Secondary */
--text-muted: #64748b; /* Muted / helper */
--text-faint: #94a3b8; /* Placeholder / very muted */
/* Borders */
--border-soft: #e2e8f0; /* Standard border */
--border-light: #f1f5f9; /* Very light */
/* Semantic: prices / badges */
--price-sale: #dc2626; /* Sale price red */
--price-orig: #94a3b8; /* Crossed original price */
--badge-sale: #dc2626; /* Discount badge */
--badge-hot: #f97316; /* Featured / hot badge */
--badge-oos: #94a3b8; /* Out-of-stock badge */
/* Flatsome compatibility — override Flatsome vars to match brand */
--primary-color: #0A2540;
--fs-color-secondary: #0A2540;
--second-color: #C9A227;
/* Legacy gradient (used in old Flatsome widgets still active) */
--bg-gradien: linear-gradient(270deg, var(--brand-primary) 0%, #2563eb 100%);
}
/* ── 2. HERO SECTION — square bottom corners ─────────────────── */
#main .hm-hero-section,
#main .hm-hero,
#main .hm-hero-banner,
#main .hm-hero-cats,
.hm-home-shell .hm-hero-section {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
/* ── 3. SITE CONTAINER ───────────────────────────────────────── */
.site-container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
width: 100%;
box-sizing: border-box;
}
#main.main-container {
width: 100%;
max-width: none;
}
@media (max-width: 768px) {
.site-container { padding-left: 12px; padding-right: 12px; }
}
/* ── 4. SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; background: var(--brand-dark); }
::-webkit-scrollbar-track { box-shadow: inset 0 0 5px rgba(0,0,0,.5); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: var(--brand-primary); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-primary-dark); }
/* ── 6. BREADCRUMB ───────────────────────────────────────────── */
.ss_breadcrumb { padding: 10px 0; }
.ss_breadcrumb .breadcrumbs {
list-style: none; padding: 0; margin: 0;
display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
font-size: 13px; color: var(--text-muted);
}
.ss_breadcrumb .breadcrumb-item { display: inline-flex; align-items: center; }
.ss_breadcrumb .breadcrumb-item a {
color: var(--text-mid); text-decoration: none; transition: color .15s;
}
.ss_breadcrumb .breadcrumb-item a:hover { color: var(--brand-primary); }
.ss_breadcrumb .breadcrumb-item.current span { color: var(--text-muted); font-weight: 500; }
.ss_breadcrumb .sep { color: var(--border-soft); padding: 0 4px; font-size: 11px; }
.ss_breadcrumb p { margin: 0; }
nav.rank-math-breadcrumb p { font-weight: bold; font-size: 14px; }
nav.rank-math-breadcrumb p a { color: var(--brand-primary); }
nav.rank-math-breadcrumb a:first-child::before {
content: "\f015"; font-family: "Font Awesome 6 Pro"; margin-right: 5px;
}
nav.rank-math-breadcrumb span.separator { margin: 0 5px; }
/* ── 7. OLD FOOTER CSS (kept for any residual Flatsome widgets) ─ */
/* These classes are no longer rendered by our new footer.php but */
/* kept harmless in case any plugin injects them. */
.absolute-footer { padding: 10px !important; }
.copyright-footer { color: #fff; }
.footer_top { padding: 10px 0; background: var(--brand-dark); color: #fff; }
.footer_top .footer_top-wrap { display: flex; justify-content: space-between; align-items: center; }
.footer_top .footer_top-wrap .social { display: flex; align-items: center; gap: 10px; }
.footer_top .footer_top-wrap .social a {
width: 40px; height: 40px; background: var(--brand-primary);
display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
}
.footer_top .footer_top-wrap .social a > * { width: 20px; height: 26px; stroke: #fff; }
.ss_footer .ux-menu-title { font-size: 16px; text-transform: inherit; position: relative; margin-bottom: 10px !important; }
.ss_footer .ux-menu-title::after {
content: ""; bottom: 5px; width: 30px; height: 3px; position: absolute;
background: var(--bg-gradien); border-radius: 99px;
}
.ss_footer a.ux-menu-link__link.flex { padding: 4px 0 !important; height: 30px !important; min-height: 34px; color: var(--brand-primary); transition: .5s; }
.ss_footer a.ux-menu-link__link.flex:hover { color: var(--brand-accent); transform: translateX(10px); }
/* ── 8. CART / CHECKOUT ──────────────────────────────────────── */
.woocommerce-cart-form th,
th.product-name,
h3.widget-title {
font-size: 14px; text-transform: initial; min-width: 100px;
border-bottom: 2px solid var(--brand-primary) !important;
}
.actions .button,
a.checkout-button,
input#coupon_code {
text-transform: initial !important; border-radius: 4px;
}
input#coupon_code { border: 1px solid var(--brand-primary); }
.checkout_coupon button { color: #fff; border-radius: 5px; }
.woocommerce-cart-form__cart-item .ux-quantity {
border: 1px solid var(--border-soft); border-radius: 8px;
display: flex; padding: 8px; margin-right: 40%;
}
.woocommerce-cart-form__cart-item .ux-quantity * {
box-shadow: none; height: 32px; min-height: 32px;
border: none !important; width: 32px; line-height: 32px;
background: none; border-radius: 4px !important; overflow: hidden !important;
}
.woocommerce-cart-form__cart-item .ux-quantity .ux-quantity__button--minus {
background: var(--surface-page); color: var(--text-muted); border-radius: 4px !important;
}
.woocommerce-cart-form__cart-item .ux-quantity input.ux-quantity__button.ux-quantity__button--plus {
border-radius: 4px !important; background: var(--brand-accent); color: var(--brand-dark);
}
.woocommerce-message.message-wrapper { padding: 10px 0 !important; margin: 0 !important; }
.message-container { font-size: 16px; }
/* ── 9. PRODUCT — single page ────────────────────────────────── */
.box_border > .col-inner, .box_border-s {
border-radius: 0.25rem; padding: 15px;
background-color: var(--surface-card); overflow: hidden;
}
.single-product main#main { background: var(--surface-page); }
.product-policises { list-style: none; margin: 0; }
.product-policises li {
margin: 0 !important; display: flex; align-items: flex-start; font-size: 14px;
}
.product-policises li .thumbnail { width: 35px; height: 35px; margin-right: 8px; min-width: 35px; }
.product-policises .media + * {
margin-top: 10px !important; border-top: 1px dashed var(--border-light); padding-top: 10px;
}
.product-trustbadge { margin-top: 3px; }
.product-trustbadge span.title-menu { border-bottom: 1px dashed var(--border-light); padding-bottom: 10px; display: flex; }
span.title-menu {
margin: 0 0 10px; font-weight: bold; display: flex;
justify-content: space-between; align-items: center; font-size: 16px;
}
.product_info h1.product-title { font-weight: 700; font-size: 20px; color: var(--text-heading); }
.product_info .group-status { font-size: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.product_info .group-status a { color: var(--brand-primary); font-weight: bold; }
/* Price block */
.default-price-wrapper { margin: 20px 0 10px; }
.default-price-wrapper .custom_price { display: flex; flex-direction: column; }
.default-price-wrapper .custom_price .sale_price { display: flex; align-items: center; gap: 4px; }
.default-price-wrapper .custom_price .sale_price span.woocommerce-Price-amount.amount {
color: var(--price-sale); font-size: 24px;
}
.default-price-wrapper .custom_price span.discount_percentage {
margin-left: 10px; background: var(--brand-accent);
padding: 2px 5px; font-size: 14px; font-weight: bold;
color: var(--brand-dark); border-radius: 4px;
}
.default-price-wrapper .custom_price span.regular_price *,
.default-price-wrapper .custom_price span.regular_price {
color: var(--price-orig); font-size: 14px; font-weight: 500;
}
.default-price-wrapper .custom_price .regular_price .amount { text-decoration: line-through; }
/* Promo / sale box */
#ega-salebox {
padding: 10px; margin-bottom: 10px;
background: var(--surface-page); border-radius: 3px;
}
#ega-salebox .product-promotion__heading {
color: #fff; margin-bottom: 8px; background-color: var(--brand-primary);
font-size: 14px; font-weight: 700; padding: 5px 10px; border-radius: 3px;
}
#ega-salebox * { font-size: 14px; }
#ega-salebox ul { margin: 0; }
/* Add-to-cart button */
.product_info button.single_add_to_cart_button {
display: flex; flex-direction: column; justify-content: center; align-items: center;
height: 48px; font-size: 14px; line-height: 20px; padding: 5px 10px;
width: 100%; background-color: var(--brand-primary);
color: #fff; border-radius: 5px; border: none; cursor: pointer;
transition: background .2s, box-shadow .2s;
}
.product_info button.single_add_to_cart_button:hover {
background-color: var(--brand-primary-dark);
box-shadow: 0 4px 16px rgba(28,72,193,.35);
}
/* Buy now button */
.product_info #buy_now_button {
display: flex; flex-direction: column; justify-content: center; align-items: center;
height: 50px; line-height: 20px; padding: 5px 10px;
background-color: var(--brand-accent); border-radius: 5px;
color: var(--brand-dark); font-size: 13px; font-weight: 700;
text-transform: inherit; border: none; cursor: pointer;
transition: background .2s, box-shadow .2s;
}
.product_info #buy_now_button:hover {
background-color: var(--brand-accent-dark);
box-shadow: 0 4px 16px rgba(255,204,50,.4);
}
.product_info #buy_now_button span.txt-main { font-size: 14px; text-transform: uppercase; font-weight: bold; }
.woocommerce-variation-add-to-cart, form.cart { gap: 10px; }
/* Quantity */
.product_info .ux-quantity { display: flex; align-items: center; }
.product_info .ux-quantity::before { content: "Số lượng: "; min-width: 115px; font-weight: bold; }
.product_info .ux-quantity .ux-quantity__button {
border-radius: 4px; background: none; box-shadow: none; height: 40px;
}
.product_info .ux-quantity .input-text { box-shadow: none; border-right: 0; border-left: 0; height: 40px; }
/* Gallery */
.image-tools.absolute.bottom.left.z-3 { display: none; }
.product-gallery-slider .woocommerce-product-gallery__image { border-radius: 4px; overflow: hidden; }
.product-thumbnails a { aspect-ratio: 1/1; border-radius: 4px; overflow: hidden; transform: initial; }
.product-thumbnails a img { height: 100%; margin: 0 !important; object-fit: cover; transform: initial !important; }
.woocommerce-product-gallery .flex-control-thumbs {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
}
.woocommerce-product-gallery .flex-control-thumbs li {
width: 100% !important; margin: 0 !important; padding: 0;
border: 1px solid var(--border-soft); border-radius: 4px; overflow: hidden;
}
.woocommerce-product-gallery .flex-control-thumbs li img { aspect-ratio: 1/1; transition: .5s; }
.woocommerce-product-gallery .flex-control-thumbs li:hover { border-color: var(--brand-accent); }
.woocommerce-product-gallery .flex-control-thumbs li:hover img { transform: scale(1.2); transition: .5s; }
/* Description tab */
.description_tab a::before { display: none; }
.description_tab a { font-size: 18px !important; padding-bottom: 15px; }
.tab-description-wrapper { position: relative; max-height: 600px; overflow: hidden; transition: max-height 0.3s ease; }
.tab-description-wrapper.expanded { max-height: none; }
.toggle-description {
background-color: var(--surface-page); display: inline-flex; align-items: center;
gap: 5px; width: 100%; justify-content: center; padding: 5px;
border-radius: 4px; cursor: pointer; margin-top: 10px;
color: var(--brand-primary); font-weight: bold; border: 1px solid var(--border-soft);
transition: background .15s, color .15s;
}
.toggle-description:hover { background: var(--brand-primary); color: #fff; }
/* Review / comments */
div#reviews.woocommerce-Reviews, .devvn_prod_cmt { min-width: 100% !important; }
h3.container-width.product-section-title-related { padding: 0 !important; font-size: 18px !important; }
.product-section { border: none !important; }
p.stock.in-stock { display: none; }
/* ── 10. PRODUCT CARDS (homepage + category grid) ────────────── */
/* Canonical grid used by every product-card context (home, category, search,
product detail related, checkout recommendations, AJAX load-more). */
.hm-prod-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
@media (max-width: 1199px) { .hm-prod-grid { grid-template-columns: repeat(4, 1fr); } }
.hm-pcard {
background: var(--surface-card);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0,0,0,.06);
border: 1px solid var(--border-soft);
transition: transform .2s, box-shadow .2s;
position: relative;
display: flex;
flex-direction: column;
}
.hm-pcard:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(15,23,42,.10);
}
.hm-pcard-img-wrap { position: relative; padding: 0; }
.hm-pcard-img-wrap a {
display: block; width: 100%; aspect-ratio: 1/1; box-sizing: border-box;
padding: 0; overflow: hidden; border-radius: 10px 10px 0 0; background: var(--surface-card);
}
.hm-pcard-img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.hm-pcard-noimg {
width: 100%; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;
background: var(--surface-page); color: var(--border-soft);
}
.hm-pcard-noimg svg { width: 52px; height: 52px; }
/* Badges */
.hm-pcard-badges { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.hm-pcard-badge {
display: inline-block; padding: 3px 7px; border-radius: 5px;
font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: .3px;
}
.hm-pcard-badge--sale { background: var(--badge-sale); color: #fff; }
.hm-pcard-badge--hot { background: var(--badge-hot); color: #fff; }
.hm-pcard-badge--oos { background: var(--badge-oos); color: #fff; }
.hm-pcard--oos .hm-pcard-img { opacity: .65; }
.hm-pcard--oos .hm-pcard-atc-btn { opacity: .35; pointer-events: none; }
/* Card body — compact spacing pass: tighter padding + gaps between image/name/price/actions */
.hm-pcard-body { padding: 8px 8px 10px; flex: 1; display: flex; flex-direction: column; }
.hm-pcard-name {
font-size: .8125rem; font-weight: 600; color: var(--text-heading);
line-height: 1.4; margin: 0 0 5px; height: 36.4px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hm-pcard-name a { color: inherit; text-decoration: none; }
.hm-pcard-name a:hover { color: var(--brand-primary); }
/* Price row (two-column layout) */
.hm-pcard-price-row {
display: flex; flex-direction: column;
gap: 2px; margin-top: auto;
}
.hm-pcard-prices { min-width: 0; }
.hm-pcard-prices .hm-price-sale {
display: block; font-size: .89rem; font-weight: 700;
color: var(--price-sale); line-height: 1.15;
font-family: 'Chakra Petch', sans-serif;
}
.hm-pcard-prices .hm-price-contact { display: block; font-size: .85rem; color: var(--text-muted); }
.hm-pcard-bottom-row { display: flex; align-items: center; gap: 0; min-height: 19px; }
.hm-pcard-bottom-row .hm-price-orig {
flex: 1; min-width: 0;
font-size: 10px; color: var(--price-orig); opacity: .8;
text-decoration: line-through;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-right: 8px;
}
.hm-pcard-disc-pill {
display: inline-flex; align-items: center;
background: #ef4444; color: #fff;
border-radius: 999px; padding: 3px 8px; height: 19px;
font-size: .53rem; font-weight: 700; line-height: 1;
white-space: nowrap; flex-shrink: 0;
box-shadow: 0 1px 4px rgba(239,68,68,.28);
}
/* Image zoom on hover */
.hm-pcard-img-wrap a { display: block; overflow: hidden; }
.hm-pcard-img { transition: transform .35s ease; }
.hm-pcard:hover .hm-pcard-img { transform: scale(1.07); }
/* Quick actions overlay (Yêu thích / So sánh) — reveal on hover, always visible on touch */
.hm-pcard-quick-actions {
position: absolute; top: 8px; right: 8px; z-index: 3;
display: flex; flex-direction: column; gap: 6px;
opacity: 0; transform: translateX(6px);
transition: opacity .2s ease, transform .2s ease;
}
.hm-pcard:hover .hm-pcard-quick-actions,
.hm-pcard:focus-within .hm-pcard-quick-actions { opacity: 1; transform: translateX(0); }
@media (hover: none) { .hm-pcard-quick-actions { opacity: 1; transform: none; } }
.hm-pcard-quick-btn {
width: 27px; height: 27px; min-height: 0; padding: 0; flex-shrink: 0; border-radius: 50%;
background: #fff; border: 1.5px solid var(--brand-primary);
color: var(--brand-primary); display: flex; align-items: center; justify-content: center;
cursor: pointer; box-shadow: 0 2px 8px rgba(15,23,42,.12);
transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.hm-pcard-quick-btn svg { width: 12px; height: 12px; display: block; overflow: visible; }
.hm-pcard-qb-label { display: none; }
.hm-pcard-quick-btn:hover {
transform: scale(1.06);
background: var(--brand-primary); color: #fff;
box-shadow: 0 4px 14px rgba(28,72,193,.28);
}
.hm-pcard-wish-btn .ic-filled { display: none; }
.hm-pcard-wish-btn.is-active { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.hm-pcard-wish-btn.is-active .ic-outline { display: none; }
.hm-pcard-wish-btn.is-active .ic-filled { display: block; }
.hm-pcard-wish-btn.is-active:hover { background: #dc2626; border-color: #dc2626; color: #fff; }
.hm-pcard-compare-btn.is-active { background: var(--brand-primary-light); border-color: var(--brand-primary); color: var(--brand-primary); }
.hm-pcard-compare-btn.is-active:hover { background: var(--brand-primary); color: #fff; }
/* Action row: Mua ngay / Thêm giỏ hàng — same height + same radius (8px), centered on one row */
.hm-pcard-actions { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.hm-pcard-actions form { flex: 1; display: flex; margin: 0; }
.hm-pcard-actions .hm-pcard-atc-form { flex: 0 0 29px; width: 29px; }
.hm-pcard-buynow {
width: 100%; height: 29px; min-height: 0; border: none; border-radius: 8px;
background: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-accent-dark) 100%);
color: var(--brand-primary); font-size: .55rem; font-weight: 700;
display: flex; align-items: center; justify-content: center; gap: 3px;
padding: 0 3px; cursor: pointer; white-space: nowrap;
transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease, filter .2s ease;
position: relative; overflow: hidden;
}
.hm-pcard-buynow-ic { width: 1em; height: 1em; flex-shrink: 0; color: inherit; }
.hm-pcard-buynow:hover { filter: brightness(.94); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,192,0,.4); }
.hm-pcard-buynow:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.hm-pcard-atc-btn {
width: 29px; height: 29px; min-height: 0; padding: 0; flex-shrink: 0; border: none; border-radius: 8px;
background: var(--brand-primary); color: #fff; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: filter .15s ease, transform .15s ease;
position: relative; overflow: hidden;
}
.hm-pcard-atc-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.hm-pcard-atc-btn:disabled { opacity: .6; cursor: default; transform: none; }
.hm-pcard-atc-btn svg { width: 14px; height: 14px; display: block; color: #fff; }
.hm-pcard-atc-btn .vm-btn-spinner { width: 12px; height: 12px; }
/* Grid breakpoints (Desktop 5 → 4 → Tablet 3 → Mobile 2, matches every context) */
@media (max-width: 1024px) { .hm-prod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
/* align-items: start — cards on mobile size to their own content instead of the CSS Grid
default (stretch), which was forcing every card in a row to match the tallest one and
showing up as dead whitespace above the price/actions on shorter cards. */
.hm-prod-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; align-items: start; }
/* Card body padding tightened for mobile (was 8px/8px/10px) */
.hm-pcard-body { padding: 6px 8px 4px; }
/* Was margin-top: auto (from the base rule), which — combined with grid stretch above —
produced a large, variable gap after the price. Now a small fixed gap; the deliberate
spacing to the CTA row below lives on .hm-pcard-actions' margin-top instead. */
.hm-pcard-price-row { margin-top: 0; }
/* Yêu thích / So sánh — on touch an absolute overlay both hides part of the photo and offers no
label, so on mobile it moves out of the image entirely into a full-width labelled row below
the CTA buttons instead (see markup order in product_card.php). Desktop keeps the hover overlay. */
.hm-pcard-quick-actions {
position: static;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
gap: 6px;
margin-top: 6px;
opacity: 1;
transform: none;
}
.hm-pcard-quick-btn {
flex: 1 1 0; min-width: 0; width: auto; height: auto;
gap: 2px; padding: 4px; border-radius: 8px;
border: none; box-shadow: none;
}
.hm-pcard-quick-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.hm-pcard-qb-label {
display: inline-block; min-width: 0;
font-size: clamp(5.8px, 1.56vw, 6.9px); font-weight: 600; line-height: 1.2;
white-space: nowrap;
}
/* CTA row — slightly larger touch targets than the desktop-hover-only sizing.
margin-top is the sole source of the Giá → Mua ngay gap now that price-row's is zeroed. */
.hm-pcard-actions { gap: 8px; margin-top: 7px; }
.hm-pcard-actions .hm-pcard-atc-form { flex-basis: 34px; width: 34px; }
.hm-pcard-buynow { height: 34px; font-size: .66rem; }
.hm-pcard-atc-btn { width: 34px; height: 34px; }
.hm-pcard-atc-btn svg { width: 16px; height: 16px; }
}
@media (max-width: 549px) {
.hm-pcard-prices .hm-price-sale { font-size: .68rem; }
.hm-pcard-disc-pill { font-size: .48rem; padding: 3px 7px; height: 18px; }
}
@media (max-width: 360px) {
.hm-pcard-disc-pill { font-size: .46rem; padding: 2px 6px; height: 15px; }
.hm-pcard-bottom-row .hm-price-orig { font-size: 9px; margin-right: 5px; }
.hm-pcard-actions { gap: 6px; }
.hm-pcard-buynow { padding: 0 2px; }
}
/* .hm-pcard-buynow / .hm-pcard-atc-btn stay fixed size below 768px — no further shrinking on smaller mobile widths. */
/* Desktop-only final polish (>768px) — card footprint/layout unchanged, detail-level tuning only */
@media (min-width: 769px) {
/* Price — sale price a touch larger for legibility; old price clearer but still visually secondary */
.hm-pcard-prices .hm-price-sale { font-size: .95rem; }
.hm-pcard-bottom-row .hm-price-orig { font-size: 11px; }
/* CTA row — a few px taller than the compact/touch sizing, still equal-height and square cart button */
.hm-pcard-buynow { height: 32px; }
.hm-pcard-atc-btn { width: 32px; height: 32px; }
.hm-pcard-actions .hm-pcard-atc-form { flex-basis: 32px; width: 32px; }
}
/* ── 12. CAROUSEL ARROWS ─────────────────────────────────────── */
button.flickity-button.flickity-prev-next-button svg { display: none; }
button.flickity-button.flickity-prev-next-button.previous {
background-image: url('data:image/svg+xml,') !important;
}
button.flickity-button.flickity-prev-next-button.next {
background-image: url('data:image/svg+xml,') !important;
}
button.flickity-button.flickity-prev-next-button { background-repeat: no-repeat; margin: 0 !important; }
/* ── 13. HOME SECTIONS ───────────────────────────────────────── */
.row.home_new {
display: grid; grid-template-columns: repeat(2, 1fr);
column-gap: 30px; gap: 16px;
}
.row.home_new .col.post-item:not(:first-child) .box { display: flex; align-items: center; }
.row.home_new .col.post-item:not(:first-child) .box .box-image {
border-radius: 10px; min-width: 318px; height: 176px;
}
.row.home_new .box .box-image .image-cover,
.row.home_new .box .box-image .image-cover img { height: 100%; object-fit: cover; }
.row.home_new .col.post-item:not(:first-child) .box .box-text { padding: 0 0 0 16px !important; text-align: left; }
.row.home_new .col.post-item:first-child .col-inner,
.row.home_new .col.post-item:first-child a,
.row.home_new .col.post-item:first-child .col-inner .box { height: 100%; display: block; }
.row.home_new .col.post-item:first-child p.from_the_blog_excerpt { -webkit-line-clamp: 3; }
.row.home_new .col.post-item:first-child .col-inner .box h5.post-title {
font-size: 24px; font-weight: 600; line-height: 36px;
}
/* Blog cards */
.post-item .box {
border-radius: 14px; background: var(--surface-card);
box-shadow: 0 4px 28px -2px rgba(0,0,0,.08); padding: 8px;
}
.post-item .box .box-image { border-radius: 10px; }
.post-item .box h5.post-title {
overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 600;
line-height: 24px; display: -webkit-box; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; text-transform: capitalize; color: var(--text-heading);
}
.meta_blog { font-size: 12px; font-weight: 600; line-height: 16px; margin: 8px 0; }
p.from_the_blog_excerpt {
font-size: 14px; font-weight: 400; line-height: 20px;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
color: var(--text-mid);
}
.post-item .box .box-text { padding: 16px; }
.blog_title h2 {
font-weight: 800; line-height: 38px; letter-spacing: 0.32px; text-transform: capitalize;
background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
font-size: 28px;
}
.section-title b { background-color: transparent !important; }
.list_post .box .box-text { padding: 10px 0; }
.list_post .box .box-text .post-title { font-size: 16px; font-weight: bold; color: var(--text-heading); }
.list_post .box .box-text .box_date { margin: 5px 0; color: var(--text-muted); }
.text-split {
overflow: hidden; text-overflow: ellipsis; white-space: normal;
-webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2;
}
/* ── 14. FILTER BAR (category / home) ───────────────────────── */
.fillter { display: flex; align-items: center; font-weight: 500; }
.fillter_list a.filter-button { padding: 10px; margin: 0; color: var(--text-body); }
.fillter > span { font-weight: bold; margin-right: 20px; }
.fillter_list a.filter-button.active { color: var(--price-sale); }
.row.category-page-row { padding-top: 0; }
.list_product {
width: 100%; white-space: nowrap; overflow-x: auto; overflow-y: hidden;
align-items: stretch; display: flex !important; gap: 10px;
}
.list_product a {
font-size: 13px; height: 34px; padding: .5rem 1rem;
border: 1px solid var(--brand-primary); background: var(--brand-primary);
color: #fff; border-radius: 4px; text-decoration: none; transition: background .15s;
}
.list_product a:hover { background: var(--brand-primary-dark); }
/* ── 15. SIDEBAR / BLOG ──────────────────────────────────────── */
.post-sidebar aside span.widget-title {
position: relative; padding-left: 45px; font-size: 18px; margin-bottom: 15px;
text-transform: capitalize; font-weight: 500; display: flex;
color: var(--text-heading);
}
.widget .is-divider { display: none; }
.post-sidebar aside span.widget-title::after,
.post-sidebar aside span.widget-title::before {
position: absolute; content: ""; background-color: var(--brand-primary);
top: 50%; transform: translateY(-50%); left: 0;
}
.post-sidebar aside span.widget-title::after {
width: 4px; height: 4px; left: 22px; border-radius: 100%;
}
.post-sidebar aside span.widget-title::before {
width: 18px; height: 4px; border-radius: 25px;
}
.widget_categories li a { font-weight: 500 !important; color: var(--text-body); }
.widget_categories li a::before {
content: "\f105"; font-family: 'Font Awesome 6 pro'; margin-right: 5px; font-size: 14px;
color: var(--brand-primary);
}
.widget_categories li a:hover { color: var(--brand-primary); }
a.button_custome_link { font-weight: bold; color: var(--brand-primary); }
/* Popular posts */
.item-populars { display: flex; flex-direction: column; gap: 16px; }
.item-populars .item-popular { display: flex; gap: 10px; }
.item-populars .item-popular .thumbnail { width: 100px; min-width: 100px; }
.item-populars .item-popular a {
overflow: hidden; text-overflow: ellipsis; white-space: normal;
-webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2;
font-size: 14px; line-height: 1.4; font-weight: bold; color: var(--text-heading);
}
.item-populars .item-popular a:hover { color: var(--brand-primary); }
.item-populars .item-popular .thumbnail img { aspect-ratio: 16/10; border-radius: 4px; object-fit: cover; }
.item-populars .item-popular span.post-date { font-size: 14px; color: var(--text-faint); }
.post_noibat { display: flex; flex-direction: column; }
.post_noibat .item {
display: flex; flex-direction: row; margin-bottom: 10px;
border-bottom: 1px dashed var(--border-light); padding-bottom: 5px; gap: 10px;
}
.post_noibat .item .post-thumb { width: 100px; min-width: 100px; }
.post_noibat .item .post-thumb a {
display: block; width: 100%; aspect-ratio: 16/11;
overflow: hidden; border-radius: 4px; position: relative;
}
.post_noibat .item .title a {
font-size: 14px; margin: 0; display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden; font-weight: 600;
color: var(--text-body);
}
.post_noibat .item .title a:hover { color: var(--brand-primary); }
.post_noibat .item h3 { margin: 0; }
.post_noibat .item .post-thumb a img { height: 100%; object-fit: cover; width: 100%; }
.post_noibat .item p.time-post { font-size: 14px; color: var(--text-faint); margin: 0; }
.title_module_main { font-size: 18px; font-weight: bold; text-transform: capitalize; margin-bottom: 15px; color: var(--text-heading); }
/* ── 16. HOME PRODUCTS SECTION ───────────────────────────────── */
.home_product .section-title.section-title-normal {
align-items: center; border-bottom: 1px solid var(--border-soft); margin-top: 30px;
}
.home_product .img.banner { border-radius: 4px; overflow: hidden; }
.home_product .section-title.section-title-normal span.section-title-main {
padding: 0; font-size: 24px; height: 40px; margin: 0; border: none;
line-height: 40px; text-transform: capitalize; color: var(--text-heading);
}
.home_product .section-title.section-title-normal a {
font-size: 16px; display: inline-flex; align-items: center; gap: 5px;
color: var(--brand-primary); text-decoration: none; transition: color .15s;
}
.home_product .section-title.section-title-normal a:hover { color: var(--brand-primary-dark); }
.home_product .section-title.section-title-normal a i { display: none; }
.home_product .section-title.section-title-normal a::after {
content: "\f105"; font-family: 'Font Awesome 6 pro'; font-size: 14px;
}
.product_list-item { margin-bottom: 15px; }
/* ── 18. HOME CATEGORIES ─────────────────────────────────────── */
.home_list_cat > .col { flex-basis: calc(100% / 9); max-width: calc(100% / 9); }
/* ── 19. BANNER ADS ──────────────────────────────────────────── */
.banner-ads > div {
position: fixed; top: 50%; transform: translateY(-50%);
width: 100px; border-radius: 5px; overflow: hidden; z-index: 99;
}
.banner-ads .banner-left { right: calc(50% - 750px); }
.banner-ads .banner-right { left: calc(50% - 750px); }
/* ── 20. MISC ────────────────────────────────────────────────── */
.term-description ul, .term-description ol { padding-left: 20px; }
.home_slider .col_slider > .col-inner { border-radius: 8px; overflow: hidden; }
/* Content image alignment */
.content-image { max-width: 100%; height: auto; }
.content-image.align-left { float: left; margin: 0 16px 12px 0; }
.content-image.align-right { float: right; margin: 0 0 12px 16px; }
/* Forms (contact) */
.page_contact .wpcf7-form-control { border-radius: 4px; height: 36px; }
.page_contact .wpcf7-form-control.wpcf7-submit {
text-transform: inherit; font-weight: 500; margin: 0;
background: var(--brand-primary); color: #fff; border: none;
border-radius: 4px; padding: 8px 20px; cursor: pointer; transition: background .15s;
}
.page_contact .wpcf7-form-control.wpcf7-submit:hover { background: var(--brand-primary-dark); }
span.wpcf7-spinner { display: none; }
/* ── 20b. GLOBAL BUTTON CONSISTENCY + MICRO-INTERACTIONS ──────── */
:where(button, input[type="submit"], input[type="button"], .hm-btn-primary, .hm-btn-outline, .hm-sec-more, .hm-pcard-atc-btn, .hm-pcard-buynow) {
transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
button:disabled, input[type="submit"]:disabled, input[type="button"]:disabled {
opacity: .6; cursor: not-allowed; transform: none !important; box-shadow: none !important;
}
:focus-visible {
outline: 2px solid var(--brand-primary);
outline-offset: 2px;
}
/* Ripple (lightweight, no library) — container needs position:relative + overflow:hidden,
already set on targeted buttons (see main.js delegated ripple handler). */
@keyframes vm-ripple-anim {
from { transform: scale(0); opacity: .35; }
to { transform: scale(2.4); opacity: 0; }
}
.vm-ripple {
position: absolute; border-radius: 50%; background: rgba(255,255,255,.55);
pointer-events: none; animation: vm-ripple-anim .55s ease-out;
}
/* Shared spinner (loading state) */
@keyframes vm-spin { to { transform: rotate(360deg); } }
.vm-btn-spinner {
display: inline-block; width: 16px; height: 16px;
border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
border-radius: 50%; animation: vm-spin .7s linear infinite;
}
/* Toast (shared — wishlist, compare, add-to-cart) */
.vm-toast {
position: fixed; bottom: 24px; right: 24px; z-index: 100000;
background: #16305f; color: #fff; padding: 12px 20px; border-radius: 10px;
font-size: 13.5px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.22);
opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease;
max-width: calc(100vw - 48px);
}
.vm-toast--show { opacity: 1; transform: translateY(0); }
.vm-toast--success { background: #15803d; }
.vm-toast--error { background: #b91c1c; }
@media (max-width: 549px) { .vm-toast { left: 16px; right: 16px; bottom: 16px; max-width: none; } }
/* Compare tray (floating, bottom-center) */
.vm-compare-tray {
position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
z-index: 99980; background: #fff; border-radius: 14px;
box-shadow: 0 10px 34px rgba(15,23,42,.2); border: 1px solid var(--border-soft);
padding: 10px 14px; display: flex; align-items: center; gap: 12px;
max-width: calc(100vw - 32px); animation: vm-pop-in .2s ease;
}
@keyframes vm-pop-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.vm-compare-label { font-size: .78rem; font-weight: 700; color: var(--text-heading); white-space: nowrap; }
.vm-compare-items { display: flex; gap: 6px; }
.vm-compare-item { position: relative; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-soft); flex-shrink: 0; }
.vm-compare-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vm-compare-remove {
position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%;
background: #dc2626; color: #fff; border: none; font-size: 11px; line-height: 1; cursor: pointer;
}
.vm-compare-view {
background: var(--brand-primary); color: #fff; border: none; border-radius: 8px;
padding: 8px 14px; font-size: .78rem; font-weight: 700; cursor: pointer; white-space: nowrap;
transition: background .15s ease;
}
.vm-compare-view:hover { background: var(--brand-primary-dark); }
.vm-compare-clear { background: none; border: none; color: var(--text-muted); font-size: .72rem; cursor: pointer; white-space: nowrap; text-decoration: underline; }
@media (max-width: 549px) {
.vm-compare-tray { flex-wrap: wrap; justify-content: center; padding: 8px 12px; }
}
/* Compare modal */
.vm-compare-modal-backdrop {
position: fixed; inset: 0; z-index: 100010; background: rgba(15,23,42,.5);
display: flex; align-items: center; justify-content: center; padding: 20px;
opacity: 0; transition: opacity .2s ease;
}
.vm-compare-modal-backdrop.vm-open { opacity: 1; }
.vm-compare-modal {
background: #fff; border-radius: 16px; max-width: 640px; width: 100%;
max-height: 80vh; display: flex; flex-direction: column; overflow: hidden;
transform: translateY(12px) scale(.97); transition: transform .2s ease;
box-shadow: 0 24px 60px rgba(0,0,0,.3);
}
.vm-compare-modal-backdrop.vm-open .vm-compare-modal { transform: translateY(0) scale(1); }
.vm-compare-modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px; font-weight: 700; color: var(--text-heading);
border-bottom: 1px solid var(--border-soft);
}
.vm-compare-modal-close { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-muted); }
.vm-compare-modal-body { overflow: auto; padding: 16px 20px; }
.vm-compare-modal-body table { width: 100%; border-collapse: collapse; }
.vm-compare-modal-body th, .vm-compare-modal-body td { padding: 10px; text-align: center; border-bottom: 1px solid var(--border-light); font-size: .82rem; }
.vm-compare-modal-body th:first-child, .vm-compare-modal-body td:first-child { text-align: left; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.vm-compare-modal-body a { color: var(--brand-primary); text-decoration: none; font-weight: 600; }
.vm-compare-modal-body a:hover { text-decoration: underline; }
/* ── 21. RESPONSIVE ──────────────────────────────────────────── */
@media (min-width: 1023px) {
.row.home_new .col.post-item:first-child {
grid-row: 1/4; grid-column: 1/2; position: relative; overflow: hidden;
}
}
@media (max-width: 1023px) {
.row.home_new .col.post-item:not(:first-child) .box .box-image {
border-radius: 10px; min-width: 162px; height: 148px;
}
.banner-ads { display: none; }
}
@media screen and (max-width: 549px) {
.home_list_cat > .col { flex-basis: calc(100% / 3); max-width: calc(100% / 3); }
.row.home_new { grid-template-columns: repeat(1, 1fr); }
.woocommerce-ordering, .woocommerce-ordering select { margin: 0; }
.woocommerce-ordering select { font-size: 14px; border-radius: 4px; }
.fillter { margin-bottom: 10px; }
.fillter > span { font-size: 14px; }
}
/* ════════════════════════════════════════════════════════════
vm-btn-more — component "Xem thêm / Xem tất cả"
════════════════════════════════════════════════════════════ */
.vm-btn-more {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 48px; min-width: 240px; padding: 0 32px;
border: 2px solid var(--brand-primary); border-radius: 999px;
background: #fff; color: var(--brand-primary);
font-size: 1rem; font-weight: 600; letter-spacing: .25px;
text-decoration: none; cursor: pointer; white-space: nowrap;
box-shadow: 0 2px 10px rgba(28,72,193,.08);
transition: background .3s, color .3s, box-shadow .3s, border-color .3s;
}
.vm-btn-more:hover {
background: var(--brand-primary); color: #fff;
box-shadow: 0 6px 20px rgba(28,72,193,.28);
}
.vm-btn-more__arrow {
display: inline-block;
transition: transform .3s;
}
.vm-btn-more:hover .vm-btn-more__arrow,
.hm-sec-more:hover .vm-btn-more__arrow { transform: translateX(4px); }
.vm-btn-more:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.vm-btn-more.loading::before {
content: ''; display: inline-block; flex-shrink: 0;
width: 14px; height: 14px;
border: 2px solid rgba(28,72,193,.25); border-top-color: var(--brand-primary);
border-radius: 50%; animation: lm-spin .7s linear infinite;
}
.vm-btn-more.loading:hover::before {
border-color: rgba(255,255,255,.3); border-top-color: #fff;
}
.vm-btn-more.loading .vm-btn-more__arrow { display: none; }
@keyframes lm-spin { to { transform: rotate(360deg); } }
/* compact pill for section headers */
.vm-btn-more--sm {
height: 32px; min-width: 0; padding: 0 16px;
font-size: .8125rem; border-width: 1.5px; gap: 5px;
box-shadow: none;
}
.vm-btn-more--sm:hover { box-shadow: 0 3px 10px rgba(28,72,193,.2); }
/* wrapper — centered, with standard spacing */
.vm-loadmore-wrap {
display: flex; justify-content: center; align-items: center;
gap: 12px; margin: 44px 0 60px; flex-wrap: wrap;
}
@media (max-width: 549px) {
.vm-btn-more { min-width: 200px; height: 44px; font-size: .9375rem; padding: 0 24px; }
.vm-loadmore-wrap { margin: 32px 0 48px; }
}