/* ══════════════════════════════════════════════════════════════
Velamart — main.css
Global CSS variables + site-wide styles
══════════════════════════════════════════════════════════════ */
/* ── 1. CSS VARIABLES (single source of truth) ───────────────── */
:root {
/* Brand core */
--brand-primary: #1c48c1; /* Blue — nav, buttons, links */
--brand-primary-dark: #163a99; /* Hover/active */
--brand-primary-light: #eef4ff; /* Tint bg — icon circles, inputs */
--brand-accent: #ffcc32; /* Yellow — highlight CTA */
--brand-accent-dark: #f5c000; /* Yellow hover */
/* Dark backgrounds (footer palette) */
--brand-dark: #0d1b35; /* Deep navy footer bg */
--brand-dark-mid: #16284d; /* Trust bar / dark sections */
--brand-dark-deep: #08111f; /* 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: #1c48c1;
--fs-color-secondary: #1c48c1;
--second-color: #ffcc32;
/* 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); }
/* ── 5. MOBILE MENU (#menu_bar) ──────────────────────────────── */
.mobile_nav-icon { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.mobile_nav-icon .icon {
width: 25px; position: relative; text-align: right;
display: flex; justify-content: flex-end; flex-direction: column; align-items: flex-end; gap: 5px;
}
.mobile_nav-icon .icon span {
position: relative; transition: all 0.3s ease-in-out; transition-delay: 40ms;
width: 16px; height: 2px; background: var(--brand-primary); display: inline-block;
}
.mobile_nav-icon .icon::before,
.mobile_nav-icon .icon::after {
content: ""; height: 2px; transition: all 0.3s ease-in-out; transition-delay: 40ms;
background: var(--brand-primary); display: inline-block;
}
.mobile_nav-icon .icon::before { width: 20px; }
.mobile_nav-icon .icon::after { width: 23px; }
.mobile_nav-icon.rotate-mb .icon *,
.mobile_nav-icon.rotate-mb .icon::after,
.mobile_nav-icon.rotate-mb .icon::before {
background-color: var(--brand-accent);
width: 25px;
}
div#menu_bar form .search-field {
border-radius: 4px;
border: 1px solid var(--brand-primary);
}
div#menu_bar form { margin-bottom: 15px; }
div#menu_bar form.searchform button.ux-search-submit {
width: 20px; height: 20px; min-height: 20px; min-width: 20px;
font-size: 14px !important; padding: 0 !important;
background: none; border: none; color: #fff; line-height: 1;
}
div#menu_bar form.searchform .flex-col:last-child {
width: 20px; height: 20px; left: auto; right: 5px; position: absolute;
}
div#menu_bar {
position: absolute; top: 0; left: 0;
background: var(--brand-dark);
z-index: 99999;
box-shadow: 0 1px 8px rgba(0,0,0,.4);
width: 280px; height: 100vh;
transform: translateX(-350px);
transition: .5s; padding: 0 15px;
}
div#menu_bar.scroll-menu { transform: translateX(0); transition: .5s; }
div#menu_bar .bar_close {
text-align: center; padding: 14px 10px; color: #fff;
font-size: 14px; font-weight: 600; text-transform: uppercase;
border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 8px;
}
div#menu_bar .bar_close i.fa.fa-times { font-size: 16px; margin-right: 5px; }
div#menu_bar ul#header_menu > li { border: none; position: relative; margin: 0; }
div#menu_bar ul#header_menu > li:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,.1); }
div#menu_bar ul#header_menu > li > a {
display: block; color: rgba(255,255,255,.9); font-size: 14px;
font-weight: 500; padding: 9px 10px; text-transform: uppercase;
}
div#menu_bar ul#header_menu > li > a:hover { color: var(--brand-accent); }
div#menu_bar ul#header_menu > li button.toggle {
position: absolute; right: 0; margin: 0; opacity: 1; color: #fff; top: 3px;
}
div#menu_bar ul.sub-menu { border: none; padding: 0; margin: 0; }
div#menu_bar ul.sub-menu li a {
color: rgba(255,255,255,.75); font-size: 14px;
height: 34px; display: flex; align-items: center; position: relative;
}
div#menu_bar ul.sub-menu li a::before {
content: "\f0da"; font-family: 'Font Awesome 6 Pro'; font-weight: 900;
margin-right: 5px; font-size: 14px; color: var(--brand-accent);
}
div#menu_bar ul.sub-menu li a:hover { color: var(--brand-accent); }
div#menu_bar ul.sub-menu li { list-style: none; margin: 0; position: relative; }
div#menu_bar ul#header_menu button.toggle::after {
content: "\f067"; font-family: 'Font Awesome 6 Pro'; font-weight: 900;
margin-right: 5px; font-size: 12px; color: rgba(255,255,255,.7);
position: absolute; left: 50%; top: 50%; width: 13px; height: 13px;
transform: translate(-50%, -50%); margin: 0;
}
div#menu_bar i.icon-angle-down { display: none; }
div#menu_bar ul#header_menu button.toggle {
width: 30px; min-height: 30px; height: 30px; right: 5px;
transition: transform .3s ease-out;
}
div#menu_bar ul#header_menu .active > .toggle { transform: rotate(135deg); }
div#menu_bar ul#header_menu ul.sub-menu {
transform: scaleY(0); max-height: 0; transform-origin: top;
transition: max-height .3s, transform .3s;
overflow-y: hidden; display: block !important; padding-left: 15px !important;
}
div#menu_bar ul#header_menu li.active > ul.sub-menu {
transform: scaleY(1); max-height: 100vh;
}
html.js.active body { overflow: hidden; }
/* ── 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) ────────────── */
.hm-prod-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.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 24px rgba(28,72,193,.12);
border-color: rgba(28,72,193,.2);
}
.hm-pcard-img-wrap { position: relative; background: var(--surface-card); overflow: hidden; }
.hm-pcard-img-wrap a { display: block; }
.hm-pcard-img { width: 100%; height: 200px; object-fit: contain; display: block; padding: 8px; background: var(--surface-card); }
.hm-pcard-noimg {
width: 100%; height: 200px; 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-cart-btn { opacity: .35; pointer-events: none; }
/* Legacy badge (single badge, older markup) */
.hm-badge-sale {
position: absolute; top: 10px; left: 10px;
background: var(--badge-sale); color: #fff;
font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 4px; z-index: 1;
}
/* Card body */
.hm-pcard-body { padding: 12px; flex: 1; display: flex; flex-direction: column; }
.hm-pcard-name {
font-size: .875rem; font-weight: 700; color: var(--text-heading);
line-height: 1.4; margin: 0 0 10px; min-height: 42px;
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); }
/* Prices */
.hm-pcard-price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.hm-price-sale {
font-size: 1rem; font-weight: 700; color: var(--price-sale);
font-family: 'Chakra Petch', sans-serif;
}
.hm-price-orig { font-size: .8rem; color: var(--price-orig); text-decoration: line-through; }
.hm-price-contact { font-size: .85rem; color: var(--text-muted); }
/* Price row (two-column layout) */
.hm-pcard-cta {
display: block; background: var(--brand-primary); color: #fff;
padding: 8px; border-radius: 6px; text-align: center;
font-size: .82rem; font-weight: 600; text-decoration: none;
margin-top: auto; transition: background .2s;
}
.hm-pcard-cta:hover { background: var(--brand-primary-dark); }
.hm-pcard-price-row {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 8px; margin-top: auto;
}
.hm-pcard-prices { flex: 1; min-width: 0; }
.hm-pcard-prices .hm-price-sale {
display: block; font-size: .9rem; font-weight: 700;
color: var(--price-sale); line-height: 1.25;
font-family: 'Chakra Petch', sans-serif;
}
.hm-pcard-prices .hm-price-orig {
display: block; font-size: .72rem; color: var(--price-orig);
text-decoration: line-through; margin-top: 3px;
}
.hm-pcard-prices .hm-price-contact { display: block; font-size: .85rem; color: var(--text-muted); }
.hm-pcard-right { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; }
.hm-pcard-cart-btn {
width: 34px; height: 34px; border-radius: 50%;
background: var(--brand-primary); color: #fff;
display: flex; align-items: center; justify-content: center;
text-decoration: none; flex-shrink: 0;
transition: background .2s, transform .15s;
}
.hm-pcard-cart-btn:hover { background: var(--brand-primary-dark); transform: scale(1.08); }
.hm-pcard-cart-btn svg { width: 16px; height: 16px; display: block; }
.hm-pcard-badge { /* reused for old single-badge markup */
display: block; background: var(--badge-hot); color: #fff;
font-size: .65rem; font-weight: 700; padding: 2px 5px;
border-radius: 3px; line-height: 1.3; white-space: nowrap; text-align: center;
}
.hm-pcard-rating { font-size: .7rem; color: var(--text-faint); letter-spacing: 2px; margin-top: 6px; }
/* Grid breakpoints */
@media (max-width: 1024px) { .hm-prod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .hm-prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 549px) {
.hm-prod-grid { grid-template-columns: repeat(2, 1fr); }
.hm-pcard-img, .hm-pcard-noimg { height: 150px; }
}
/* ── 11. OLD PRODUCT-SMALL CARDS (legacy Flatsome/WC markup) ──── */
.product-small.box {
padding: 10px; background: var(--surface-card);
border-radius: 4px; border: 1px solid var(--border-soft);
}
.product-small.box .box-text { padding: 20px 0 0; }
.product-small.box .box-text a.woocommerce-LoopProduct-link {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
white-space: initial; overflow: hidden; margin: 0 0 5px;
font-size: 14px; line-height: 1.4; min-height: 40px; font-weight: 600;
color: var(--text-heading);
}
.product-price-cart { position: relative; margin-bottom: 5px; }
.product-price-cart .product_box_price { display: flex; flex-direction: column; }
.product-price-cart .product_box_price .sale_price span {
font-size: 16px; color: var(--price-sale);
}
.product-price-cart .product_box_price .regular_price .amount {
color: var(--price-orig); text-decoration: line-through; font-size: 14px; font-weight: 500;
}
.product-price-cart .product_box_price .regular_price span.discount_percentage {
background: var(--badge-hot); padding: 5px; z-index: 3; border-radius: 4px;
font-size: 13px; line-height: 1; margin-left: 10px; color: #fff; font-weight: bold;
}
.product-price-cart a.add_to_cart {
width: 30px; height: 30px; display: inline-flex; align-items: center;
padding: 6px; font-size: 18px; background: var(--brand-primary);
border-radius: 100%; color: #fff; justify-content: center; margin-left: auto;
box-shadow: -2px 2px 6px rgba(0,0,0,.2); position: absolute; right: 0; top: 0;
}
.product-price-cart a.add_to_cart:hover { background: var(--brand-primary-dark); }
/* ── 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; }
/* ── 17. SHINE HOVER EFFECT ──────────────────────────────────── */
@keyframes shineHover { to { left: 125%; } }
.list_danhmuc .box::before, .product-small.box .box-image::before {
background: linear-gradient(90deg, hsla(0,0%,100%,0) 0, hsla(0,0%,100%,.3));
content: ""; display: block; height: 100%; left: -100%; position: absolute;
top: 0; transform: skew(-25deg); width: 50%; z-index: 2;
}
.list_danhmuc .box:hover::before, .product-small.box .box-image:hover::before {
animation: shineHover 1s;
}
/* ── 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; }
/* ── 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; }
.product-price-cart .product_box_price .regular_price span.discount_percentage { font-size: 12px; }
.product-small.box .box-text { padding-top: 10px; }
}