/* ==========================================================
   Bộ nhận diện Dược Giá Sỉ 2026
   Navy Dược #0B2D6E (60%) · Xanh Y Tế #1C88D0 (25%) · Trung tính (15%)
   Font: Be Vietnam Pro. File này nạp SAU index.css để chuẩn hoá.
   ========================================================== */
:root {
    --brand-navy: #0B2D6E;
    --brand-blue: #1C88D0;
    --brand-blue-dark: #1673B2;
    --brand-mist: #EAF3FB;
    --brand-ink: #0E1A2B;
    --brand-steel: #5B6B80;
    --brand-line: #DCE6F0;
}

body {
    font-family: 'Be Vietnam Pro', 'SVN ProductSans', system-ui, sans-serif;
    color: var(--brand-ink);
    background: var(--bg-body, #F5F8FC);
}
input, button, select, textarea {
    font-family: inherit;
}

/* Tiêu đề khối sản phẩm, trang */
h1, h2, h3, .title-box h2, .title-box h3, .sanphamhot h2, .sanphamhot .title {
    color: var(--brand-navy);
}

/* Thanh menu chính: nền trắng, chữ Navy, gạch chân Xanh Y Tế khi hover */
.site-main-nav .menu-main > li > a {
    color: var(--brand-navy);
    font-weight: 700;
    border-bottom: 3px solid transparent;
    line-height: 38px;
}
.site-main-nav .menu-main > li:hover > a,
.site-main-nav .menu-main > li > a:focus {
    background: #FFFFFF;
    color: var(--brand-navy);
    border-bottom-color: var(--brand-blue);
}
.site-main-nav .menu-main li.has-mega-menu:hover div.menu-sub,
.site-main-nav .menu-main li.static:hover div.menu-sub,
.menu-main li:hover div.menu-sub {
    border-top-color: var(--brand-blue);
    box-shadow: 0 12px 28px rgba(11, 45, 110, 0.12);
}

/* Nút giỏ hàng trên card: Navy, hover Xanh Y Tế */
.action a {
    background: var(--brand-navy);
    border-radius: 8px;
}
.action a:hover {
    background: var(--brand-blue);
}

/* Nút chính / phụ */
.btn-primary, a.btn-primary, button.btn-primary {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
}
.btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover {
    background-color: var(--brand-blue-dark);
    border-color: var(--brand-blue-dark);
}

/* Link văn bản */
a:hover {
    color: var(--brand-blue);
}

/* Card sản phẩm: viền mảnh theo màu đường kẻ */
.item-product {
    border-color: var(--brand-line);
}
.item-product .product-name {
    color: var(--brand-ink);
}

/* Header Navy: nút tìm kiếm dùng Xanh Y Tế để nổi trên nền Navy */
.header_bottom .search-input span.btn-search {
    background: var(--brand-blue);
}
.header_bottom .search-input span.btn-search:hover {
    background: var(--brand-blue-dark);
}
/* Logo hiện tại là bản màu Navy: đặt trên nền trắng bo góc để không chìm vào header.
   Khi thay logo mới bản trắng (âm bản) thì xoá khối này. */
.header_bottom .img-logo a {
    display: inline-flex;
    align-items: center;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 4px 10px;
}
.header_bottom .img-logo img {
    max-height: 62px;
}

/* Khối "Sản phẩm hot": nền Xanh sương thay cho hồng đào */
.sanphamhot {
    background: var(--brand-mist);
}

/* Nút "Xem tất cả" và tag thương hiệu trong khối danh mục */
.title-box .view-all,
.homepage-product.top .view-all {
    background: var(--brand-blue);
    color: #FFFFFF;
    font-weight: 600;
}
.title-box .view-all:hover,
.homepage-product.top .view-all:hover {
    background: var(--brand-navy);
    color: #FFFFFF;
}
.title-box .sub-cate-title a:hover {
    background: var(--brand-navy);
    color: #FFFFFF;
}

/* ===== Mobile: header Navy đồng bộ desktop ===== */
@media (max-width: 999px) {
    .header_mobile {
        background: var(--brand-navy);
    }
    /* Logo màu Navy hiện tại: nền trắng bo góc. Thay logo âm bản thì xoá khối này. */
    .header_mobile .col-8 > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #FFFFFF;
        border-radius: 12px;
        padding: 4px 12px;
    }
    .header_mobile .col-8 .logo {
        width: 112px;
    }
    .sanphamhot {
        background: var(--brand-mist);
    }
}

/* Trang chi tiết: "Đặt mua ngay" là nút chính (Navy), "Thêm vào giỏ" là nút phụ (Xanh Y Tế) */
a#payment_now.buy-now,
a#payment_now {
    background: var(--brand-navy) !important;
    color: #FFFFFF !important;
    border-color: var(--brand-navy) !important;
}
a#payment_now:hover {
    background: #08214F !important;
}