/* =========================================================
   Kim phát - site.css (Rewritten full)
   ========================================================= */

:root {
    --bm-primary: #4f46e5;
    --bm-bg: #ffffff;
    --bm-bg-soft: #f7f9ff;
    --bm-text: #0f172a;
    --bm-text-sub: #64748b;
    --bm-border: #eef2ff;
    --bm-radius: 1rem;
    --bm-shadow: 0 24px 60px rgba(2,6,23,.10);
    --bm-ease: cubic-bezier(.2,.8,.2,1);
    --bm-font: "Comfortaa", "Nunito", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
}
.bm-valid:hover {
    background-color: #eef6ff;
    transition: 0.3s;
}
.modal {
    z-index: 1055;
}

.modal-backdrop {
    z-index: 1050;
}

.modal-open .bm-header, .modal-open .bm-hotline {
    z-index: 1040;
}
/* Body & base */
.bm-body {
    background: linear-gradient(180deg,var(--bm-bg-soft) 0%,var(--bm-bg) 60%);
    color: var(--bm-text);
    font-family: var(--bm-font);
    letter-spacing: .2px;
}

/* Header */
.bm-blur {
    backdrop-filter: saturate(140%) blur(10px);
    background: rgba(255,255,255,.65);
    border-bottom: 1px solid rgba(0,0,0,.06)
}

.bm-brand {
    color: #111
}

.bm-navlink {
    color: #334155;
    text-decoration: none
}

    .bm-navlink:hover {
        color: #111;
        text-decoration: underline
    }

/* Hero */
.bm-hero {
    padding-top: 78px;
    position: relative
}

.bm-hero-card {
    border: 0;
    border-radius: var(--bm-radius)
}

.bm-hero-badge {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    background: #EEF2FF;
    color: #3730a3;
    padding: .35rem .7rem;
    border-radius: 999px;
    font-weight: 600
}

.bm-hero-img {
    border-radius: .75rem;
    box-shadow: 0 16px 40px rgba(2,6,23,.12);
    object-fit: cover;
    max-height: 360px
}

/* IMPORTANT: gradient must not capture mouse events */
.bm-hero-gradient {
    position: absolute;
    inset: auto -20% -30% -20%;
    height: 280px;
    background: radial-gradient(60% 60% at 50% 50%, rgba(79,70,229,.22), transparent 60%);
    filter: blur(38px);
    pointer-events: none; /* fix hover/click blocking */
    z-index: 0;
}

.bm-hero > .container {
    position: relative;
    z-index: 1;
}

.bm-searchbar .form-control {
    box-shadow: none
}

/* Category strip */
.bm-catstrip {
    background: #fff;
    border-top: 1px solid var(--bm-border);
    border-bottom: 1px solid var(--bm-border)
}

.bm-catrail {
    display: flex;
    gap: .6rem;
    overflow: auto;
    padding: .2rem
}

/* Filter chips (hero row) */
.bm-chip {
    border: 1px solid var(--bm-border);
    background: #fff;
    color: #334155;
    border-radius: .7rem;
    font-weight: 600;
    padding: .38rem .65rem;
    line-height: 1.1;
    cursor: pointer;
    transition: background .2s var(--bm-ease), color .2s var(--bm-ease), border-color .2s var(--bm-ease), transform .1s var(--bm-ease);
    user-select: none;
}

    .bm-chip:hover {
        background: var(--cui-info);
    }

    .bm-chip:active {
        transform: translateY(1px);
    }

    .bm-chip.active {
        background: var(--bm-primary);
        color: #fff;
        border-color: var(--bm-primary);
    }

/* Category items (strip) */
.bm-catitem {
    border: 1px solid var(--bm-border);
    background: #fff;
    border-radius: .8rem;
    padding: .45rem .7rem;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s var(--bm-ease), color .2s var(--bm-ease), border-color .2s var(--bm-ease), transform .1s var(--bm-ease);
}

    .bm-catitem:hover {
        background: #f5f7ff
    }

    .bm-catitem:active {
        transform: translateY(1px)
    }

    .bm-catitem.active {
        background: var(--bm-primary);
        color: #fff;
        border-color: var(--bm-primary);
    }

/* Feature cards & stats */
.bm-feature {
    border: 1px solid var(--bm-border);
    border-radius: 1rem;
    box-shadow: 0 10px 32px rgba(2,6,23,.06);
    background: #fff;
}

.bm-feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #EEF2FF;
    color: #3730a3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: .6rem
}

.bm-stat {
    font-weight: 900;
    font-size: 2rem;
    line-height: 1
}

/* Banner */
.bm-banner {
    background: linear-gradient(90deg,#f0f3ff,#ffffff);
    border: 1px solid var(--bm-border);
    position: relative
}

.bm-banner-glow {
    position: absolute;
    right: -80px;
    top: -80px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(79,70,229,.25), transparent 60%);
    filter: blur(20px);
    pointer-events: none;
    animation: bm-pulse 4s ease-in-out infinite
}

/* Products grid spacing */
#bm-products.row {
    --cui-gutter-x: 1rem;
    --cui-gutter-y: 1rem
}

/* ============ PRODUCT CARD PRO ============ */
.bm-cardPro {
    position: relative;
    height: 100%
}

.bm-cardPro-inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 1.2rem;
    overflow: hidden;
    background: rgba(255,255,255,.66);
    backdrop-filter: saturate(160%) blur(12px);
    box-shadow: var(--bm-shadow);
    transition: transform .35s var(--bm-ease), box-shadow .35s var(--bm-ease)
}

.bm-cardPro::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1.2rem;
    background: conic-gradient(from 140deg at 50% 50%,#a5b4fc 0deg,#60a5fa 120deg,#34d399 240deg,#a5b4fc 360deg);
    opacity: .6;
    filter: blur(10px);
    mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    padding: 1px;
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    transition: opacity .35s var(--bm-ease)
}

.bm-cardPro:hover::before {
    opacity: .95
}

.bm-cardPro:hover .bm-cardPro-inner {
    transform: translateY(-4px);
    box-shadow: 0 28px 65px rgba(2,6,23,.16)
}

/* big media 4:3 fixed */
.bm-cardPro-media {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden
}

    .bm-cardPro-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: scale(1.03);
        transition: transform .7s var(--bm-ease)
    }

    .bm-cardPro-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,rgba(0,0,0,.00) 55%,rgba(0,0,0,.10));
        pointer-events: none
    }

.bm-cardPro:hover .bm-cardPro-media img {
    transform: scale(1.08)
}

.bm-pricechip {
    position: absolute;
    right: .7rem;
    bottom: .7rem;
    padding: .4rem .65rem;
    border-radius: .75rem;
    font-weight: 900;
    font-size: .95rem;
    background: rgba(17,24,39,.86);
    color: #fff;
    box-shadow: 0 12px 28px rgba(17,24,39,.35)
}

.bm-hot {
    position: absolute;
    left: .7rem;
    top: .7rem;
    padding: .32rem .6rem;
    border-radius: .7rem;
    background: #fde68a;
    color: #1f2937;
    font-weight: 800;
    font-size: .74rem;
    box-shadow: 0 8px 16px rgba(253,230,138,.35)
}

/* body equal-height layout */
.bm-cardPro-body {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1rem .95rem 1.1rem;
    flex: 1 1 auto;
    min-height: 210px
}

.bm-title {
    margin: 0;
    font-weight: 900;
    font-size: 1.05rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #0f172a
}

.bm-sub {
    margin: 0;
    color: var(--bm-text-sub);
    font-size: .9rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.bm-badges {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap
}

.bm-badge {
    background: rgba(99,102,241,.12);
    border: 1px solid rgba(99,102,241,.22);
    color: #334155;
    border-radius: 999px;
    font-weight: 700;
    font-size: .72rem;
    padding: .22rem .55rem;
    position: relative;
    overflow: hidden;
    user-select: none;
    cursor: default
}

    .bm-badge::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(99,102,241,.25), transparent 45%);
        opacity: 0;
        transform: scale(0);
        transition: opacity .6s, transform .6s
    }

    .bm-badge.bm-wave::after {
        opacity: 1;
        transform: scale(1)
    }

    .bm-badge[data-variant="new"] {
        background: rgba(16,185,129,.12);
        border-color: rgba(16,185,129,.22);
        color: #065f46
    }

    .bm-badge[data-variant="warn"] {
        background: rgba(245,158,11,.12);
        border-color: rgba(245,158,11,.22);
        color: #7c2d12
    }

/* price row pinned bottom via auto margin */
.bm-flex-spacer {
    flex: 1 1 auto
}

.bm-priceRow {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
    margin-top: auto;
    flex-wrap: wrap
}

.bm-priceMain {
    font-weight: 900;
    font-size: 1.15rem
}

.bm-priceOld {
    color: #94a3b8;
    text-decoration: line-through;
    margin-right: .35rem
}

.bm-priceNote {
    font-size: .78rem;
    color: #64748b
}

.bm-cta {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap
}

    .bm-cta .btn {
        border-radius: .75rem
    }

/* Partners */
.bm-partners img {
    height: 36px;
    border-radius: .5rem;
    border: 1px solid var(--bm-border);
    object-fit: cover
}

/* Footer */
.bm-footer {
    background: #fff;
    border-top: 1px solid var(--bm-border)
}

.bm-footlink {
    color: #334155;
    text-decoration: none
}

    .bm-footlink:hover {
        color: #111;
        text-decoration: underline
    }

.bm-social a {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5eaff;
    border-radius: .6rem;
    color: #334155;
    text-decoration: none;
    transition: transform .2s,background .2s
}

    .bm-social a:hover {
        transform: translateY(-2px);
        background: #f6f8ff
    }

.bm-pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 .6rem;
    border: 1px solid var(--bm-border);
    border-radius: .6rem;
    background: #f8fafc;
    color: #334155;
    font-weight: 700;
    margin-right: .4rem
}

/* News box */
.bm-newsbox {
    border: 1px solid var(--bm-border);
    border-radius: 1rem
}

.bm-news .form-control, .bm-news .btn {
    border-radius: .7rem
}

/* Toast */
#bm-toast {
    z-index: 1090
}

/* Anim utils */
@keyframes bm-fadeUp {
    from {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes bm-pulse {
    0%,100% {
        opacity: .7;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.06)
    }
}

.bm-animate {
    opacity: 0;
    transform: translateY(12px)
}

    .bm-animate.bm-in {
        animation: bm-fadeUp .6s var(--bm-ease) forwards
    }

/* Ripple for buttons/badges */
.bm-ripple {
    position: relative;
    overflow: hidden
}

    .bm-ripple::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(99,102,241,.25), transparent 40%);
        opacity: 0;
        transform: scale(0);
        transition: opacity .6s, transform .6s
    }

    .bm-ripple.bm-rippling::after {
        opacity: 1;
        transform: scale(1)
    }

/* Dark preference */
@media(prefers-color-scheme:dark) {
    .bm-body {
        background: radial-gradient(80% 60% at 50% 0%, rgba(79,70,229,.08), transparent 60%), linear-gradient(180deg,#0e1429 0%, #0b1020 60%);
        color: #e5e7eb;
    }

    .bm-blur {
        background: rgba(18,22,33,.55)
    }

    .bm-feature {
        background: rgba(20,25,40,.6)
    }

    .bm-banner {
        background: linear-gradient(90deg,#0f172a,#0b1020);
        border-color: rgba(99,102,241,.18)
    }

    .bm-cardPro-inner {
        background: rgba(22,28,44,.6)
    }

    .bm-title {
        color: #e5e7eb
    }

    .bm-footlink {
        color: #cbd5e1
    }

    .bm-chip {
        border-color: rgba(99,102,241,.25)
    }

    .bm-catitem {
        border-color: rgba(99,102,241,.25)
    }
}
/* ================= Hotline sticky bar ================ */
.bm-hotline {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1080;
    display: block;
    text-decoration: none;
    outline: none;
}

.bm-hotline__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .75rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(99,102,241,.18);
    background: radial-gradient(100% 100% at 0% 0%, rgba(79,70,229,.10), transparent 70%), #ffffff;
    box-shadow: 0 18px 48px rgba(2,6,23,.14);
    transition: transform .15s var(--bm-ease), box-shadow .2s var(--bm-ease), background .2s var(--bm-ease);
}

    .bm-hotline__inner i {
        font-size: 1.05rem;
        color: var(--bm-primary);
    }

.bm-hotline__label {
    color: #334155;
    font-weight: 700;
}

.bm-hotline__number {
    color: #111827;
    letter-spacing: .3px;
    font-weight: 900;
}

.bm-hotline:hover .bm-hotline__inner {
    transform: translateY(-2px);
    box-shadow: 0 24px 60px rgba(2,6,23,.18);
    background: radial-gradient(100% 100% at 0% 0%, rgba(79,70,229,.14), transparent 70%), #ffffff;
}

/* Dark mode tune */
@media (prefers-color-scheme: dark) {
    .bm-hotline__inner {
        border-color: rgba(99,102,241,.25);
        background: radial-gradient(100% 100% at 0% 0%, rgba(79,70,229,.18), transparent 70%), rgba(22,28,44,.7);
    }

    .bm-hotline__label {
        color: #e5e7eb;
    }

    .bm-hotline__number {
        color: #fff;
    }
}

/* ============ Slogan alert pill ============ */
.alert.alert-primary {
    border: 1px solid rgba(99,102,241,.25);
    box-shadow: 0 6px 22px rgba(79,70,229,.12);
}
/* ================= SLOGAN GIÁ GỐC – THÂN THIỆN ================= */
.bm-slogan {
    margin: .25rem 0 1rem 0;
}

.bm-slogan__inner {
    display: flex;
    align-items: center;
    gap: .75rem;
    border-radius: 999px;
    padding: .6rem .9rem;
    border: 1px solid rgba(99,102,241,.18);
    background: radial-gradient(120% 120% at 0% 0%, rgba(79,70,229,.09), transparent 60%), #ffffff;
    box-shadow: 0 10px 28px rgba(2,6,23,.10);
    width: max-content;
    max-width: 100%;
}

.bm-slogan__icon {
    font-size: 1.05rem;
    line-height: 1;
    color: var(--bm-primary);
    filter: drop-shadow(0 2px 6px rgba(79,70,229,.25));
}

.bm-slogan__text {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    flex-wrap: wrap;
    font-family: var(--bm-font);
    color: #0f172a;
}

    .bm-slogan__text strong {
        font-weight: 800;
        letter-spacing: .2px;
    }

.bm-slogan__sub {
    display: inline-block;
    padding: .22rem .55rem;
    border-radius: .75rem;
    font-weight: 800;
    letter-spacing: .2px;
    background: rgba(79,70,229,.10);
    border: 1px solid rgba(79,70,229,.22);
    color: #3730a3;
}

/* Hover tinh tế (desktop) */
@media (hover:hover) {
    .bm-slogan__inner {
        transition: transform .15s var(--bm-ease), box-shadow .2s var(--bm-ease);
    }

        .bm-slogan__inner:hover {
            transform: translateY(-1px);
            box-shadow: 0 16px 38px rgba(2,6,23,.14);
        }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .bm-slogan__inner {
        border-color: rgba(99,102,241,.25);
        background: radial-gradient(120% 120% at 0% 0%, rgba(79,70,229,.18), transparent 60%), rgba(22,28,44,.7);
    }

    .bm-slogan__text strong {
        color: #e5e7eb;
    }

    .bm-slogan__sub {
        background: rgba(99,102,241,.12);
        border-color: rgba(99,102,241,.28);
        color: #c7caff;
    }
}

/* === (ADD) Unified product card tweaks === */
.bm-cardPro .bm-title a {
    text-decoration: none;
    color: inherit;
}

    .bm-cardPro .bm-title a:hover {
        text-decoration: underline;
    }

.bm-cardPro .bm-cardPro-media {
    background: #fff;
}

    .bm-cardPro .bm-cardPro-media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.bm-badge {
    transition: transform .15s ease;
}

    .bm-badge:hover {
        transform: translateY(-1px);
    }

.bm-priceMain {
    display: flex;
    align-items: baseline;
    gap: .25rem;
}

.bm-priceOld {
    font-size: .9em;
    color: #94a3b8;
    text-decoration: line-through;
}
/* ===== Product image wrapper: cố định tỉ lệ & không phóng quá to ===== */
/* ===== Product image wrapper: ảnh lớn, cân giữa, không méo ===== */
.bm-imgwrap {
    position: relative;
    aspect-ratio: 4 / 3; /* khung ảnh cố định tỷ lệ 4:3 */
    border: 1px solid var(--bm-border);
    border-radius: .75rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 160px; /* chiều cao tối thiểu cho mobile */
}

    /* Ảnh lớn hơn, zoom nhẹ để tập trung giữa */
    .bm-imgwrap > img,
    .bm-imgwrap > a > img {
        width: 110%;
        height: 110%;
        object-fit: contain;
        object-position: center;
        display: block;
        transition: transform .35s ease;
    }

    .bm-imgwrap:hover > img,
    .bm-imgwrap:hover > a > img {
        transform: scale(1.05);
    }



/* Nếu bạn thích ảnh “đầy khung” kiểu catalogue, đổi sang cover:
.bm-imgwrap > img{ object-fit: cover; }
*/

/* (tuỳ chọn) điều chỉnh nhẹ theo màn lớn để card cân hơn */
@media (min-width: 992px) {
    .bm-imgwrap {
        min-height: 190px;
    }
}

@media (min-width: 1400px) {
    .bm-imgwrap {
        min-height: 210px;
    }
}

/* Fix thanh sort/filter kéo dài chiều cao */
section.bg-white .container {
    align-items: center !important;
}

section.bg-white .btn-group-sm .btn {
    line-height: 1.3;
    padding: 0.35rem 0.75rem;
}

section.bg-white form.d-flex {
    align-items: center;
}

section.bg-white select.form-select-sm,
section.bg-white .form-control-sm {
    height: 32px;
}
/* Card pro gọn – đẹp */
.bm-card {
    border: 1px solid #e5e7eb;
    border-radius: .9rem;
    background: #fff;
    box-shadow: 0 6px 18px rgba(2,6,23,.06);
    transition: transform .18s ease, box-shadow .18s ease;
}

    .bm-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 26px rgba(2,6,23,.10);
    }

/* Ảnh: khung chuẩn 4:3, không phóng bậy */
.bm-imgwrap {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: .7rem;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .bm-imgwrap > img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        transition: transform .35s ease;
    }

.bm-card:hover .bm-imgwrap > img {
    transform: scale(1.04);
}

/* Badge “Bán chạy” nhỏ gọn */
.bm-ribbon {
    position: absolute;
    top: .6rem;
    left: .6rem;
    z-index: 2;
    background: #fde68a;
    color: #1f2937;
    font-weight: 800;
    font-size: .72rem;
    padding: .22rem .48rem;
    border-radius: .55rem;
    box-shadow: 0 8px 16px rgba(253,230,138,.35);
}

/* Hàng badge carrier + tag */
.bm-badge {
    border-radius: .6rem;
    padding: .22rem .5rem;
    font-size: .72rem;
    font-weight: 700;
}

/* Tiêu đề 2 dòng, gọn */
.bm-card h3.h6 {
    font-weight: 800;
    font-size: 1rem;
    color: #0f172a;
    margin: .15rem 0 .25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mô tả 2 dòng mờ */
.bm-card .text-body-secondary {
    color: #64748b !important;
    font-size: .9rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Giá + giá cũ */
.bm-price {
    font-weight: 900;
    font-size: 1.08rem;
    color: #111827;
}

.bm-old {
    color: #94a3b8;
    text-decoration: line-through;
    font-size: .92rem;
}

/* Căn bố cục body đều nhau, nút không đẩy card cao */
.bm-card .card-body {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.bm-card .bm-cta {
    display: flex;
    gap: .5rem;
    margin-top: .4rem;
}

.bm-card .btn {
    border-radius: .6rem;
    font-weight: 700;
    padding: .35rem .7rem;
}
@media (max-width: 576px) {
    .bm-sortbar .btn-group {
        display: none;
    }

    .bm-sort-select {
        display: block !important;
        min-width: 160px;
    }
}