/*
Theme Name:   Beamex Child (Flatsome)
Theme URI:    https://beamex.vn
Description:  Child theme của Flatsome dành cho website B2B thiết bị hiệu chuẩn (calibration) theo phong cách Beamex. Bao gồm bảng màu công nghiệp (#009946), font Inter, tùy chỉnh nút CTA, card sản phẩm và WooCommerce B2B (Add to Quote / Add to Cart).
Author:       Duy
Author URI:   https://beamex.vn
Template:     flatsome
Version:      1.0.0
Text Domain:  beamex-child
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         woocommerce, business, flatsome, b2b
*/

/* ============================================================
   BEAMEX DESIGN SYSTEM — Biến màu & Typography
   Nguồn: Beamex.html (UI Architecture)
   ============================================================ */
:root {
    --bmx-primary:        #009946;  /* Xanh chủ đạo — Header, CTA, điểm nhấn */
    --bmx-primary-dark:   #007a38;  /* Hover primary */
    --bmx-primary-50:     #ecfdf3;  /* Nền nhạt xanh */
    --bmx-dark:           #333333;  /* Tiêu đề */
    --bmx-text:           #555555;  /* Body text */
    --bmx-slate-800:      #1e293b;  /* Dark UI */
    --bmx-slate-600:      #475569;
    --bmx-slate-200:      #e2e8f0;  /* Viền */
    --bmx-slate-100:      #f1f5f9;
    --bmx-bg:             #f8fafc;  /* Nền trang */
    --bmx-radius-card:    10px;
    --bmx-radius-btn:     4px;
    --bmx-shadow:         0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
    --bmx-shadow-lg:      0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
}

/* ============================================================
   TYPOGRAPHY — Inter
   ============================================================ */
body,
.nav > li > a,
p, .is-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--bmx-slate-800);
}

h1, h2, h3, h4, h5, h6,
.heading-font {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--bmx-dark);
    font-weight: 700;
    letter-spacing: -0.01em;
}

body {
    background-color: var(--bmx-bg);
    line-height: 1.6;
}

p { color: var(--bmx-text); }

/* Gạch nhấn xanh dưới tiêu đề section (theo mockup) */
.bmx-section-title {
    display: inline-block;
    border-bottom: 2px solid var(--bmx-primary);
    padding-bottom: .5rem;
    margin-bottom: 2rem;
}
.bmx-accent-line {
    width: 64px; height: 4px;
    background: var(--bmx-primary);
    margin: .75rem 0 1rem;
    border: 0;
}

/* ============================================================
   MÀU CHỦ ĐẠO — ghi đè accent color của Flatsome
   ============================================================ */
a { color: var(--bmx-primary); }
a:hover { color: var(--bmx-primary-dark); }

.color-primary,
.primary-color { color: var(--bmx-primary) !important; }

/* Nút Primary (solid green) */
.button.primary,
.button.is-outline:hover,
button[type="submit"].primary,
input[type="submit"].primary,
.add_to_cart_button,
.single_add_to_cart_button {
    background-color: var(--bmx-primary);
    border-color: var(--bmx-primary);
    color: #fff;
    border-radius: var(--bmx-radius-btn);
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: var(--bmx-shadow);
    transition: background-color .2s ease, color .2s ease;
}
.button.primary:hover,
button[type="submit"].primary:hover,
input[type="submit"].primary:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover {
    background-color: var(--bmx-primary-dark);
    border-color: var(--bmx-primary-dark);
    color: #fff;
}

/* Nút Secondary (outline green) */
.button.secondary,
.button.is-outline {
    color: var(--bmx-primary);
    border: 2px solid var(--bmx-primary);
    background: transparent;
    border-radius: var(--bmx-radius-btn);
    font-weight: 600;
}
.button.secondary:hover,
.button.is-outline:hover {
    background: var(--bmx-primary);
    color: #fff;
}

/* ============================================================
   HEADER — sticky, nền trắng, viền dưới
   ============================================================ */
.header-main { min-height: 74px; }
.header:not(.transparent) .header-nav-main.nav > li > a {
    color: var(--bmx-slate-600);
    font-weight: 600;
    font-size: 15px;
}
.header .nav > li > a:hover,
.header .nav > li.active > a {
    color: var(--bmx-primary);
}
.header-bottom { border-top: 1px solid var(--bmx-slate-200); }
.stuck .header-main { box-shadow: var(--bmx-shadow); }

/* Nút Contact us trên header */
.header .button.contact-cta {
    background: var(--bmx-primary);
    color: #fff;
    border-radius: var(--bmx-radius-btn);
}
.header .button.contact-cta:hover { background: var(--bmx-primary-dark); }

/* ============================================================
   CARD — dùng cho Solutions / Products / Resources
   ============================================================ */
.bmx-card,
.box.box-vertical .box-image + .box-text,
.col-inner .bmx-card {
    background: #fff;
    border: 1px solid var(--bmx-slate-200);
    border-radius: var(--bmx-radius-card);
    overflow: hidden;
    transition: box-shadow .3s ease, transform .3s ease;
}
.bmx-card:hover { box-shadow: var(--bmx-shadow-lg); }

.bmx-card .bmx-card-body { padding: 1.5rem; }
.bmx-card h3 { font-size: 19px; margin-bottom: .75rem; }
.bmx-card p  { font-size: 15px; }

/* Link "Learn more →" */
.bmx-link-arrow {
    color: var(--bmx-primary);
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.bmx-link-arrow:hover { color: var(--bmx-primary-dark); }
.bmx-link-arrow::after { content: "→"; }

/* ============================================================
   WOOCOMMERCE — Shop & Product card B2B
   ============================================================ */
.woocommerce ul.products li.product,
.product-small.col {
    background: #fff;
    border: 1px solid var(--bmx-slate-200);
    border-radius: var(--bmx-radius-card);
    overflow: hidden;
    transition: box-shadow .3s ease;
}
.woocommerce ul.products li.product:hover { box-shadow: var(--bmx-shadow-lg); }

.product-small .box-text { padding: 1.25rem; border-top: 1px solid var(--bmx-slate-100); }

/* SKU nhỏ phía trên tên sản phẩm */
.bmx-sku,
.product_meta .sku_wrapper {
    font-size: 11px;
    color: #94a3b8;
    letter-spacing: .02em;
}

/* Tên sản phẩm */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.product-title {
    color: var(--bmx-dark);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
}

/* Giá — xanh đậm */
.woocommerce .price,
.woocommerce ul.products li.product .price,
.product .price ins,
.product .price {
    color: var(--bmx-primary);
    font-weight: 700;
}

/* Badge trạng thái tồn kho */
.bmx-badge {
    position: absolute;
    top: .5rem; right: .5rem;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: .25rem .5rem;
    border-radius: 4px;
    z-index: 5;
}
.bmx-badge--instock { background: #dcfce7; color: #166534; }
.bmx-badge--lead    { background: #fee2e2; color: #991b1b; }

/* Nút "Add to Quote" (outline) — sản phẩm cần báo giá B2B */
.button.bmx-quote,
.product-type-quote .add_to_cart_button {
    background: #fff !important;
    color: var(--bmx-primary) !important;
    border: 2px solid var(--bmx-primary) !important;
}
.button.bmx-quote:hover,
.product-type-quote .add_to_cart_button:hover {
    background: var(--bmx-primary) !important;
    color: #fff !important;
}

/* ============================================================
   SIDEBAR BỘ LỌC (Shop) — theo mockup
   ============================================================ */
.shop-sidebar .widget {
    background: #fff;
    border: 1px solid var(--bmx-slate-200);
    border-radius: var(--bmx-radius-card);
    padding: 1.25rem;
    box-shadow: var(--bmx-shadow);
}
.shop-sidebar .widget:first-child { border-top: 4px solid var(--bmx-primary); }
.shop-sidebar .widget-title span {
    color: var(--bmx-dark);
    font-size: 15px;
    font-weight: 700;
}
.shop-sidebar input[type="checkbox"] { accent-color: var(--bmx-primary); }

/* ============================================================
   HERO / BANNER
   ============================================================ */
.bmx-hero {
    background: var(--bmx-bg);
    border-bottom: 1px solid var(--bmx-slate-200);
    padding: 4rem 0;
    text-align: center;
}
.bmx-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1.5rem; }
.bmx-hero p  { font-size: 1.125rem; max-width: 56rem; margin: 0 auto; }
.bmx-hero--dark { background: var(--bmx-slate-800); }
.bmx-hero--dark h1 { color: #fff; }
.bmx-hero--dark p  { color: #cbd5e1; }

/* Banner CTA xanh (Care Plan) */
.bmx-cta-banner {
    background: var(--bmx-primary);
    color: #fff;
    border-radius: var(--bmx-radius-card);
    padding: 2.5rem;
}
.bmx-cta-banner h2 { color: #fff; }
.bmx-cta-banner .button { background: #fff; color: var(--bmx-primary); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 549px) {
    .bmx-hero { padding: 2.5rem 0; }
    .bmx-card .bmx-card-body { padding: 1.25rem; }
}

/* ============================================================
   FORCE OVERRIDE — bảo đảm thắng CSS inline của Flatsome
   (Flatsome xuất CSS màu/font từ Theme Options ngay trong <head>,
    nên cần !important cho các quy tắc thương hiệu quan trọng nhất.)
   ============================================================ */
body.beamex-brand,
body.beamex-brand p,
body.beamex-brand .is-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    background-color: var(--bmx-bg);
}

body.beamex-brand h1,
body.beamex-brand h2,
body.beamex-brand h3,
body.beamex-brand h4,
body.beamex-brand h5,
body.beamex-brand h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    color: var(--bmx-dark) !important;
    font-weight: 700 !important;
}

body.beamex-brand a { color: var(--bmx-primary); }
body.beamex-brand a:hover { color: var(--bmx-primary-dark); }

/* Nút primary & Add to Cart — ép màu xanh Beamex */
body.beamex-brand .button.primary,
body.beamex-brand .add_to_cart_button,
body.beamex-brand .single_add_to_cart_button,
body.beamex-brand button.primary,
body.beamex-brand input[type="submit"].primary {
    background-color: var(--bmx-primary) !important;
    border-color: var(--bmx-primary) !important;
    color: #fff !important;
}
body.beamex-brand .button.primary:hover,
body.beamex-brand .add_to_cart_button:hover,
body.beamex-brand .single_add_to_cart_button:hover {
    background-color: var(--bmx-primary-dark) !important;
    border-color: var(--bmx-primary-dark) !important;
}

/* Giá WooCommerce & link nhấn */
body.beamex-brand .woocommerce-Price-amount,
body.beamex-brand .price ins .woocommerce-Price-amount {
    color: var(--bmx-primary) !important;
    font-weight: 700 !important;
}