@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,600;1,700&family=Raleway:wght@400;500;600;700&display=swap');

/* =========================================================
   0. KHUNG TRANG & XÓA KHOẢNG TRẮNG THỪA ĐẦU TRANG
   ========================================================= */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.overall-wrapper,
.type-index #content-wrapper,
.type-index .overall-wrapper > .container,
.type-index #content,
.type-index .content-inner,
.type-index .welcome-wrapper,
.type-index .welcome {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.bopi-collections-section { margin-top: 12px !important; }

.type-category #content-wrapper > .container,
.type-category .overall-wrapper > .container,
.type-category #content {
    max-width: 1400px !important;
    width: 95% !important;
    margin: 0 auto !important;
    float: none !important;
    flex: 0 0 100% !important;
}
.type-category aside,
.type-category #sidebar,
.type-category .sidebar {
    display: none !important;
}

/* Chống iPhone tự động Zoom khi bấm vào mọi ô Input (Bắt buộc font-size >= 16px) */
input[type="search"],
input[type="text"],
input[type="email"],
input[type="password"],
.search input.query-input {
    font-size: 16px !important;
}

/* =========================================================
   1. HEADER, LOGO SẮC NÉT & THANH TÌM KIẾM
   ========================================================= */
#bopiMobileTopbar { display: none; }

#header,
.header-inner {
    background: #ffffff !important;
    background-color: #ffffff !important;
    position: relative !important;
    z-index: 99999 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.header-top {
    position: relative !important;
    z-index: 100 !important;
    background: #ffffff !important;
}
body.search-window-visible .header-top,
body.login-window-visible .header-top {
    z-index: 100050 !important;
}
#top-navigation,
.navigation-wrapper,
.navigation {
    position: relative !important;
    z-index: 500 !important;
}
body.search-window-visible #top-navigation,
body.search-window-visible .navigation-wrapper,
body.search-window-visible .navigation {
    z-index: 40 !important;
}

/* MÁY TÍNH: Logo sắc nét & không đè lên chữ KOLEKCE */
@media (min-width: 769px) {
    #header, .header-inner {
        min-height: 120px !important;
        display: block !important;
    }
    #header .site-name {
        position: absolute !important;
        left: 50% !important;
        top: calc(50% - 5px) !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        z-index: 100 !important;
        height: 56px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        overflow: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease, visibility 0.3s !important;
    }
    #header .site-name a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 56px !important;
        pointer-events: auto !important;
    }
    #header .site-name img {
        height: 195px !important;
        max-height: none !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        pointer-events: none !important;
        display: block !important;
    }
    body.search-window-visible #header .site-name,
    body.search-window-visible .site-name,
    body.search-window-visible #header .logo {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* Tắt hoàn toàn mọi lớp màn đen/xám của Shoptet khi mở Tìm kiếm hoặc Đăng nhập */
#bopiDimBackdrop,
body.search-window-visible::before,
body.search-window-visible::after,
body.search-window-visible .overall-wrapper::before,
body.search-window-visible .overall-wrapper::after,
body.search-window-visible #content-wrapper::before,
.search-window-visible .overlay,
body.login-window-visible::before,
body.login-window-visible::after,
body.login-window-visible .overall-wrapper::before,
.content-modal-bg {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.search-window,
.search-window::before,
.search-window::after,
#header .search,
#header .search::before,
#header .search::after {
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: -50vw 0 0 0 #ffffff, 50vw 0 0 0 #ffffff !important;
    position: relative !important;
}

@media (min-width: 769px) {
    body:not(.search-window-visible) #header .search,
    body:not(.search-window-visible) .search-window {
        display: block !important;
        height: auto !important;
        max-height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        overflow: hidden !important;
        transform: translateY(-10px) !important;
        pointer-events: none !important;
        border: none !important;
        transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                    padding 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                    opacity 0.3s ease,
                    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                    visibility 0.4s !important;
    }

    body.search-window-visible #header .search,
    body.search-window-visible .search-window {
        display: block !important;
        height: auto !important;
        max-height: 800px !important;
        padding: 16px 20px 20px !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
        z-index: 100030 !important;
        transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                    padding 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                    opacity 0.35s ease 0.05s,
                    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                    visibility 0s !important;
    }

    .search-form,
    .search-form fieldset,
    .search form,
    .search fieldset {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        max-width: 560px !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border: none !important;
        gap: 0 !important;
    }

    .search-form input[type="search"],
    .search-form input[type="text"],
    .search input.query-input,
    #header input[placeholder*="hledáte"] {
        flex: 1 1 auto !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        margin: 0 !important;
        padding: 0 22px !important;
        border: 1.5px solid #3d313f !important;
        border-right: none !important;
        border-radius: 30px 0 0 30px !important;
        background: #ffffff !important;
        color: #222222 !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .search-form button[type="submit"],
    .search-form .btn,
    .search button[type="submit"],
    .search input[type="submit"] {
        flex: 0 0 auto !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        margin: 0 !important;
        padding: 0 32px !important;
        border: 1.5px solid #3d313f !important;
        border-left: none !important;
        border-radius: 0 30px 30px 0 !important;
        background: #3d313f !important;
        color: #ffffff !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        letter-spacing: 0.8px !important;
        text-transform: uppercase !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }
    .bopi-search-close-x { display: none !important; }
}

/* Hộp gợi ý kết quả tìm kiếm (.searchWhisperer) */
.searchWhisperer,
#searchWhisperer,
.search-whisperer,
#search-whisperer,
.whisperer {
    position: absolute !important;
    top: calc(100% + 14px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 94% !important;
    max-width: 880px !important;
    background: #ffffff !important;
    border: 1px solid #ebe3e7 !important;
    border-radius: 20px !important;
    padding: 26px 28px 22px !important;
    box-shadow: 0 22px 55px rgba(61, 49, 63, 0.18) !important;
    z-index: 999999 !important;
    box-sizing: border-box !important;
}
.searchWhisperer h3,
.searchWhisperer h4,
.search-whisperer h3,
.search-whisperer h4,
.whisperer-section-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1.5rem !important;
    color: #222222 !important;
    margin: 0 0 14px !important;
    display: block !important;
}
.searchWhisperer .quantity,
#searchWhisperer .quantity,
.search-whisperer .quantity,
.whisperer .quantity,
.searchWhisperer input.amount,
.searchWhisperer .increase,
.searchWhisperer .decrease {
    display: none !important;
}
.searchWhisperer .price,
.searchWhisperer .p-price,
.searchWhisperer .price-final,
.search-whisperer .price {
    margin-right: 20px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #222222 !important;
    white-space: nowrap !important;
}
.searchWhisperer .btn,
.searchWhisperer button,
.search-whisperer .btn,
.search-whisperer button {
    background: #3d313f !important;
    border-color: #3d313f !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    padding: 9px 22px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    height: auto !important;
}
.searchWhisperer img,
.search-whisperer img {
    border-radius: 10px !important;
    object-fit: cover !important;
}

.carousel-inner a, .carousel-wrap a, .homepage-banners a, .banner-text a, .banner a, #carousel a { border-radius: 18px !important; }
a[href*="/klient/platby/"], a[href*="/klient/zalohove-faktury/"], a[href*="/klient/dobropisy/"], a[href*="/klient/dodaci-listy/"], a[href*="/klient/doklady-k-prijate-platbe/"] { display: none !important; }

/* =========================================================
   2. THÔNG BÁO HỆ THỐNG, CUTE TOAST GIỎ HÀNG & NHÃN SIZE
   ========================================================= */
.messages, #messages, .site-msg {
    position: fixed !important;
    top: 22px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999999 !important;
    width: 92% !important;
    max-width: 580px !important;
    pointer-events: auto !important;
}
.messages .msg, #messages .msg {
    border-radius: 20px !important;
    padding: 15px 24px !important;
    box-shadow: 0 14px 35px rgba(61, 49, 63, 0.2) !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-align: center !important;
}
.bp-btn-added {
    background-color: #8c536b !important;
    border-color: #8c536b !important;
    color: #ffffff !important;
    transform: scale(0.97);
    transition: 0.25s !important;
}

.bopi-cute-toast {
    position: fixed; top: 24px; right: 24px; width: 350px; max-width: calc(100vw - 32px);
    background: #ffffff; border: 1.5px solid #f0dfe5; border-radius: 20px; padding: 16px 18px 20px;
    box-shadow: 0 16px 40px rgba(61, 49, 63, 0.16); z-index: 999999; font-family: sans-serif;
    display: flex; flex-direction: column; gap: 12px;
    transform: translateY(-25px) scale(0.92); opacity: 0; visibility: hidden;
    transition: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); overflow: hidden; box-sizing: border-box;
}
.bopi-cute-toast.show { transform: translateY(0) scale(1); opacity: 1; visibility: visible; }
.bopi-toast-top { display: flex; align-items: center; gap: 13px; }
.bopi-toast-img { width: 58px; height: 58px; border-radius: 14px; object-fit: cover; border: 1px solid #eee5e9; background: #f9eff2; flex-shrink: 0; }
.bopi-toast-info { flex: 1; min-width: 0; text-align: left; }
.bopi-toast-badge { display: inline-flex; align-items: center; gap: 5px; background: #f9eff2; color: #8c536b; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 12px; margin-bottom: 5px; }
.bopi-toast-title { font-size: 13.5px; font-weight: 700; color: #222; margin: 0 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bopi-toast-size { font-size: 12px; color: #666; font-weight: 600; }
.bopi-toast-close { background: transparent; border: none; color: #999; font-size: 18px; cursor: pointer; padding: 2px 6px; align-self: flex-start; }
.bopi-toast-actions { display: flex; gap: 8px; }
.bopi-toast-cart-btn { flex: 1; background: #3d313f !important; color: #fff !important; text-decoration: none !important; text-align: center; padding: 10px 14px; border-radius: 25px; font-size: 12px; font-weight: 700; transition: 0.25s; }
.bopi-toast-cart-btn:hover { background: #8c536b !important; }
.bopi-toast-progress { position: absolute; bottom: 0; left: 0; height: 3.5px; width: 100%; background: linear-gradient(90deg, #f3d1dc, #8c536b, #3d313f); transform-origin: left; }
.bopi-cute-toast.show .bopi-toast-progress { animation: bopiToastBar 4s linear forwards; }
@keyframes bopiToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.bp-cart-size-box { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-family: sans-serif; font-size: 12px; color: #555; flex-wrap: wrap; }
.bp-cart-size-lbl { font-weight: 600; color: #3d313f; }
.bp-cart-size-pill { border: 1px solid #d8cfd4; background: #fff; color: #444; border-radius: 14px; padding: 2px 9px; font-size: 11px; font-weight: 700; cursor: pointer; transition: 0.2s; }
.bp-cart-size-pill.active { background: #3d313f; border-color: #3d313f; color: #fff; }

/* =========================================================
   3. HỘP ĐĂNG NHẬP HEADER (👤) & HỆ THỐNG BOPI CLUB MỀM MẠI
   ========================================================= */
.popup-widget.login-widget, .login-window {
    position: absolute !important; right: 25px !important; left: auto !important; top: 85px !important;
    width: 360px !important; max-width: calc(100vw - 28px) !important; height: auto !important; max-height: none !important;
    background: #ffffff !important; border: 1px solid #efe4e8 !important; border-radius: 24px !important; padding: 22px !important;
    box-shadow: 0 24px 60px rgba(61, 49, 63, 0.22) !important; z-index: 100050 !important; overflow: visible !important; font-family: 'Raleway', sans-serif !important;
}
.popup-widget.login-widget *, .login-window * { max-height: none !important; box-sizing: border-box !important; }
.popup-widget-inner, .login-window-in, #login-form, .login-window form { position: static !important; width: 100% !important; height: auto !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }

.bopi-login-close-x {
    position: absolute !important; top: 10px !important; right: 12px !important; width: 32px !important; height: 32px !important;
    border-radius: 50% !important; background: #f4eff1 !important; border: none !important; color: #3d313f !important;
    font-size: 20px !important; line-height: 1 !important; display: flex !important; align-items: center !important;
    justify-content: center !important; cursor: pointer !important; z-index: 10 !important; padding: 0 !important;
}
.bopi-login-close-x:hover { background: #3d313f !important; color: #ffffff !important; }

.bopi-login-club-banner { display: block !important; background: linear-gradient(145deg, #fdf6f8 0%, #f9edf1 100%) !important; border: 1px solid #f0dfe5 !important; border-radius: 18px !important; padding: 18px 16px !important; margin-bottom: 18px !important; text-align: center !important; }
.bopi-login-club-tag { display: inline-block !important; background: #3d313f !important; color: #fff !important; font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1.4px !important; padding: 4px 12px !important; border-radius: 20px !important; margin-bottom: 8px !important; }
.bopi-login-club-title { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 1.6rem !important; font-weight: 600 !important; color: #2b2129 !important; margin: 0 0 12px !important; line-height: 1.15 !important; }
.bopi-login-club-list { list-style: none !important; padding: 0 !important; margin: 0 0 14px !important; display: flex !important; flex-direction: column !important; gap: 7px !important; text-align: left !important; }
.bopi-login-club-list li { list-style: none !important; background: rgba(255,255,255,0.88) !important; border: 1px solid #efe0e6 !important; border-radius: 12px !important; padding: 8px 12px !important; font-size: 12px !important; color: #3d313f !important; line-height: 1.4 !important; display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; }
.bopi-login-club-list li::before, .bopi-login-club-list li::marker { display: none !important; content: none !important; }
.bopi-login-open-wallet { width: 100% !important; background: #3d313f !important; color: #fff !important; border: none !important; border-radius: 30px !important; padding: 11px 16px !important; font-size: 11.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; cursor: pointer !important; transition: 0.25s !important; }
.bopi-login-open-wallet:hover { background: #8c536b !important; }

.login-window h2, .login-window h3, .popup-widget.login-widget h2, .popup-widget.login-widget h3, .login-window .login-title { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 1.5rem !important; font-weight: 600 !important; color: #2b2129 !important; margin: 0 0 12px !important; text-align: center !important; }
.login-window input[type="email"], .login-window input[type="password"], .login-window input[type="text"], #login-form input[type="email"], #login-form input[type="password"] { width: 100% !important; height: 42px !important; border: 1.5px solid #e5dadd !important; border-radius: 25px !important; background: #fcf9fa !important; padding: 0 16px !important; font-size: 16px !important; color: #222 !important; outline: none !important; box-shadow: none !important; margin-bottom: 10px !important; }
.login-window input:focus, #login-form input:focus { border-color: #8c536b !important; background: #fff !important; }
.popup-widget.login-widget .btn, .login-window .btn, #login-form button[type="submit"] { width: 100% !important; background: #3d313f !important; border: none !important; color: #fff !important; border-radius: 30px !important; height: 44px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.9px !important; font-size: 12px !important; margin-top: 4px !important; cursor: pointer !important; }
.popup-widget.login-widget .btn:hover, .login-window .btn:hover { background: #8c536b !important; }

/* Cửa sổ Bopi Club Modal (#bpOv) & Trang /klient/ */
.bp-gift { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; background: #3d313f; border-radius: 50%; box-shadow: 0 6px 18px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9998; border: none; padding: 0; transition: 0.3s; }
.bp-gift:hover { transform: scale(1.06); background: #261e28; }
.bp-gift svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.bp-ov { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 99999; opacity: 0; visibility: hidden; transition: 0.3s; padding: 15px; box-sizing: border-box; }
.bp-ov.on { opacity: 1; visibility: visible; }
.bp-md { background: #fcf9fa !important; border: 1px solid #efe4e8 !important; border-radius: 26px !important; max-width: 520px !important; width: 100%; padding: 34px 26px 26px !important; text-align: center; position: relative; box-shadow: 0 15px 40px rgba(0,0,0,0.2); box-sizing: border-box; font-family: 'Raleway', sans-serif !important; }
.bp-cls { position: absolute; top: 12px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.85); border: none; font-size: 20px; color: #3d313f; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.bp-ttl { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 2.05rem !important; font-weight: 600 !important; color: #2b2129 !important; margin: 2px 0 6px !important; line-height: 1.2 !important; }
.bp-frm { display: flex; flex-direction: column; gap: 10px; }
.bp-inp { width: 100%; background: #fff; border: 1px solid #e2d9dc; border-radius: 30px; padding: 13px 18px; font-size: 16px; outline: none; box-sizing: border-box; text-align: center; }
.bp-btn { width: 100%; background: #3d313f; color: #fff !important; border: none; border-radius: 30px; padding: 14px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; cursor: pointer; }
.bp-ft { font-size: 11px; color: #7a6e74; margin: 14px 0 0; line-height: 1.45; }

.bopi-club-badge { display: inline-block; background: #f5e6ec; color: #8c536b; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; padding: 5px 14px; border-radius: 20px; margin-bottom: 6px; }
.bopi-club-tabs { display: flex; background: #efe5e9; border-radius: 30px; padding: 4px; gap: 4px; margin: 14px 0 18px; }
.bopi-club-tab { flex: 1; border: none; background: transparent; padding: 10px 12px; border-radius: 25px; font-size: 12.5px; font-weight: 700; color: #6e6268; cursor: pointer; transition: 0.25s; }
.bopi-club-tab.active { background: #fff; color: #3d313f; box-shadow: 0 3px 10px rgba(61,49,63,0.08); }

.bopi-stamp-card { background: #fff; border: 1px solid #eee2e7; border-radius: 22px; padding: 20px 16px; margin-bottom: 16px; box-shadow: 0 8px 24px rgba(61,49,63,0.04); }
.bopi-stamp-cycle-tag { display: inline-block; background: #f9eff2; color: #8c536b; font-size: 11px; font-weight: 700; padding: 3px 11px; border-radius: 14px; margin-bottom: 8px; }
.bopi-stamp-status { font-size: 13px; color: #444; margin-bottom: 14px; font-weight: 500; line-height: 1.45; }
.bopi-stamp-status strong { color: #8c536b; font-weight: 700; }
.bopi-stamp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bopi-stamp-cell { aspect-ratio: 1 / 1; border-radius: 16px; border: 1.5px dashed #decdd4; background: #fdfbfc; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px; transition: 0.3s; }
.bopi-stamp-cell.reward-cell { background: #fdf4f7; border-style: solid; border-color: #ebd6df; }
.bopi-stamp-cell.stamped { background: #3d313f !important; border-style: solid !important; border-color: #3d313f !important; color: #fff !important; box-shadow: 0 6px 14px rgba(61,49,63,0.18); }
.bopi-stamp-num { font-size: 10.5px; font-weight: 700; opacity: 0.7; margin-bottom: 2px; }
.bopi-stamp-ico { font-size: 19px; line-height: 1.1; }
.bopi-stamp-lbl { font-size: 9.5px; font-weight: 700; margin-top: 4px; color: #8c536b; line-height: 1.15; }
.bopi-stamp-cell.stamped .bopi-stamp-lbl, .bopi-stamp-cell.stamped .bopi-stamp-num { color: #fff !important; opacity: 0.95; }

.bopi-add-cp-bar { display: flex; gap: 8px; margin-bottom: 14px; background: #fff; padding: 6px; border-radius: 30px; border: 1px solid #e6d8de; }
.bopi-add-cp-inp { flex: 1; border: none; background: transparent; padding: 6px 14px; font-size: 16px; color: #222; outline: none; }
.bopi-add-cp-btn { background: #f3e5ea; color: #3d313f; border: none; border-radius: 25px; padding: 7px 16px; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: 0.2s; white-space: nowrap; }
.bopi-add-cp-btn:hover { background: #3d313f; color: #fff; }
.bopi-wallet-list { display: flex; flex-direction: column; gap: 10px; text-align: left; margin-bottom: 14px; }
.bopi-coupon-ticket { background: #fff; border: 1px solid #eee0e6; border-left: 5px solid #3d313f; border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 4px 12px rgba(61,49,63,0.03); }
.bopi-coupon-ticket.locked { opacity: 0.65; border-left-color: #cbbec4; background: #f9f6f8; }
.bopi-cp-info h5 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.25rem; font-weight: 700; color: #2b2129; margin: 0 0 3px; }
.bopi-cp-info p { font-size: 11.5px; color: #666; margin: 0; line-height: 1.4; }
.bopi-cp-code-tag { display: inline-block; background: #f9eff2; color: #8c536b; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; margin-top: 5px; letter-spacing: 0.6px; }
.bopi-cp-use-btn { background: #3d313f; color: #fff; border: none; border-radius: 25px; padding: 9px 16px; font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: 0.2s; }
.bopi-cp-use-btn:hover { background: #8c536b; }
.bopi-cp-lock-badge { font-size: 11px; font-weight: 700; color: #7a6e74; white-space: nowrap; background: #efe8eb; padding: 6px 12px; border-radius: 20px; }

.bopi-cart-club-bar { background: #fdf6f8; border: 1px solid #f0dfe5; border-radius: 16px; padding: 13px 18px; margin: 15px 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: 'Raleway', sans-serif; font-size: 13px; color: #3d313f; }
.bopi-cart-club-bar button { background: #3d313f; color: #fff; border: none; border-radius: 20px; padding: 8px 16px; font-size: 11.5px; font-weight: 700; cursor: pointer; }

body.bopi-klient-page aside, body.bopi-klient-page #sidebar, body.bopi-klient-page .sidebar, body.bopi-klient-page .client-center-box, body.bopi-klient-page .breadcrumbs { display: none !important; }
body.bopi-klient-page #content { width: 100% !important; max-width: 940px !important; margin: 15px auto 60px !important; float: none !important; padding: 0 15px !important; }
.bopi-klient-dashboard { background: #fcf9fa; border: 1px solid #efe4e8; border-radius: 26px; padding: 36px 32px; margin-bottom: 30px; box-shadow: 0 12px 34px rgba(61,49,63,0.05); font-family: 'Raleway', sans-serif; text-align: center; }
.bopi-klient-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid #ece3e7; text-align: left; }
.bopi-klient-top h1 { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 2.2rem !important; color: #2b2129 !important; margin: 4px 0 0 !important; font-weight: 600 !important; }
.bopi-logout-btn { background: #fff; border: 1.5px solid #dfd3d8; color: #3d313f !important; text-decoration: none !important; padding: 9px 20px; border-radius: 25px; font-size: 12px; font-weight: 700; transition: 0.2s; }
.bopi-logout-btn:hover { background: #3d313f; color: #fff !important; border-color: #3d313f; }
.bopi-klient-nav { display: flex; justify-content: center; background: #efe5e9; border-radius: 35px; padding: 5px; gap: 6px; max-width: 650px; margin: 0 auto 26px; flex-wrap: wrap; }
.bopi-klient-nav-btn { flex: 1; min-width: 150px; border: none; background: transparent; padding: 11px 16px; border-radius: 30px; font-size: 12.5px; font-weight: 700; color: #5c5257; cursor: pointer; transition: 0.2s; text-decoration: none !important; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.bopi-klient-nav-btn.active { background: #3d313f; color: #fff !important; box-shadow: 0 4px 12px rgba(61,49,63,0.18); }
.bopi-klient-grid-2 { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; text-align: left; align-items: start; }
body.bopi-klient-hide-form #content > *:not(.bopi-klient-dashboard) { display: none !important; }

/* Footer đen */
#footer, #newsletter, .newsletter, #newsletter-wrapper, .newsletter-wrapper, .footer-newsletter, .box-newsletter, .samba-newsletter, .type-newsletter { display: none !important; }
.bopi-custom-footer { background-color: #000; color: #fff; font-family: sans-serif; padding: 60px 20px 25px; font-size: 0.9rem; width: 100vw !important; margin-left: calc(-50vw + 50%) !important; margin-right: calc(-50vw + 50%) !important; box-sizing: border-box !important; }
.bopi-footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.bopi-footer-col { flex: 1; min-width: 200px; margin-bottom: 20px; padding: 0 15px; }
.bopi-footer-col h4 { font-family: 'Playfair Display', serif; color: #fff; font-size: 1.1rem; margin: 0 0 20px; font-weight: normal; }
.bopi-footer-col ul { list-style: none; padding: 0; margin: 0; }
.bopi-footer-col ul li { margin-bottom: 12px; }
.bopi-footer-col ul li a { color: #e0e0e0; text-decoration: none; }
.bopi-footer-col ul li a:hover { color: #fff; text-decoration: underline; }
.bopi-contact-col ul li { color: #e0e0e0; margin-bottom: 15px; line-height: 1.5; display: flex; flex-direction: column; }
.bopi-contact-col strong { color: #fff; margin-bottom: 3px; font-weight: 600; }
.bopi-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; max-width: 1200px; margin: 22px auto 0; padding: 0 15px; color: #b0b0b0; font-size: 0.8rem; }
.bopi-socials { display: flex; gap: 16px; align-items: center; }
.bopi-socials a { color: #fff; display: flex; align-items: center; }
.bopi-payments img { height: 22px; margin-left: 6px; vertical-align: middle; background: #fff; padding: 2px 4px; border-radius: 3px; }

/* =========================================================
   4. TRANG CHI TIẾT SẢN PHẨM & LƯỚI DANH MỤC SẢN PHẨM
   ========================================================= */
.type-detail aside, .type-detail #sidebar, .type-detail .sidebar, .type-product aside, .type-product #sidebar, .type-product .sidebar, body.bp-prod aside, body.bp-prod #sidebar, body.bp-prod .sidebar, body.bp-prod .link-icons, body.bp-prod .social-buttons, body.bp-prod .p-tools { display: none !important; }
.type-detail #content, .type-product #content, body.bp-prod #content { width: 100% !important; max-width: 1240px !important; margin: 0 auto !important; padding: 25px 15px !important; float: none !important; flex: 0 0 100% !important; box-sizing: border-box !important; }
body.bp-prod .p-image-wrapper { background: transparent !important; border: none !important; height: auto !important; align-self: flex-start !important; box-sizing: border-box !important; }
body.bp-prod .p-image { background: transparent !important; border: none !important; border-radius: 18px !important; overflow: hidden !important; padding: 0 !important; }
body.bp-prod .p-image img { border-radius: 18px !important; width: 100% !important; height: auto !important; display: block !important; margin: 0 !important; }
body.bp-prod .p-thumbnails-inner a, body.bp-prod .p-thumbnails a { border-radius: 12px !important; overflow: hidden !important; border: 1.5px solid #e6e0e3 !important; padding: 0 !important; background: #fff !important; display: block !important; }
body.bp-prod .p-thumbnails-inner a.highlighted, body.bp-prod .p-thumbnails-inner a.active, body.bp-prod .p-thumbnails-inner a:hover { border-color: #222 !important; }
body.bp-prod .p-thumbnails-inner a img, body.bp-prod .p-thumbnails a img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
body.bp-prod .p-image-wrapper > *:not(.p-image) .prev, body.bp-prod .p-image-wrapper > *:not(.p-image) .next, body.bp-prod .p-image-wrapper > *:not(.p-image) button, body.bp-prod .p-image-wrapper > *:not(.p-image) a:not(:has(img)), body.bp-prod .p-image-wrapper > *:not(.p-image):not(:has(a + a)) { display: none !important; }

@media (min-width: 769px) {
    body.bp-prod .p-image-wrapper { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 16px !important; padding: 0 55px 0 0 !important; }
    body.bp-prod .p-data-wrapper, body.bp-prod .p-info-wrapper { padding-left: 15px !important; box-sizing: border-box !important; }
    body.bp-prod .p-image { order: 2 !important; flex: 1 1 auto !important; width: calc(100% - 92px) !important; margin: 0 !important; }
    body.bp-prod .p-image-wrapper > *:not(.p-image) { order: 1 !important; flex: 0 0 76px !important; width: 76px !important; max-width: 76px !important; overflow: visible !important; }
    body.bp-prod .p-image-wrapper > *:not(.p-image) div { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 76px !important; position: static !important; transform: none !important; }
    body.bp-prod .p-image-wrapper > *:not(.p-image) a { display: block !important; width: 76px !important; height: 76px !important; flex: 0 0 76px !important; margin: 0 !important; }
}

body.bp-prod h1 { font-family: 'Playfair Display', serif !important; font-size: 2.2rem !important; font-weight: 400 !important; color: #222 !important; margin-bottom: 12px !important; }
body.bp-prod .price-final, body.bp-prod .price-final-holder { font-size: 1.6rem !important; font-weight: 600 !important; color: #222 !important; }
.bp-qty-wrap { border-radius: 30px !important; border: 1px solid #d8d0d5 !important; overflow: hidden !important; height: 48px !important; display: inline-flex !important; align-items: center !important; background: #fff !important; }
.bp-qty-wrap input { border: none !important; height: 100% !important; font-weight: 600 !important; box-shadow: none !important; }
.bp-cart-btn { background-color: #3d313f !important; border-color: #3d313f !important; color: #fff !important; border-radius: 30px !important; height: 48px !important; padding: 0 40px !important; font-size: 13px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; }
.bp-cart-btn:hover { background-color: #261e28 !important; }

.bp-ico-svg { width: 17px; height: 17px; stroke: #3d313f; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.bp-p-badges { display: flex; flex-wrap: wrap; gap: 18px; margin: 16px 0 20px; padding-bottom: 16px; border-bottom: 1px solid #eee; font-family: sans-serif; font-size: 13px; color: #333; width: 100%; }
.bp-p-badges span { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.bp-size-box { margin: 0 0 20px; font-family: sans-serif; width: 100%; }
.bp-size-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; }
.bp-size-head a { color: #3d313f !important; text-decoration: underline !important; font-weight: 600; font-size: 12px; }
.bp-size-pills, .bp-apply-tabs { display: flex; background: #f3eef1; border-radius: 30px; padding: 4px; gap: 4px; }
.bp-size-btn, .bp-tab-btn { flex: 1; border: none; background: transparent; padding: 9px 4px; border-radius: 25px; font-size: 12.5px; font-weight: 600; color: #555; cursor: pointer; transition: 0.2s; }
.bp-size-btn.active, .bp-tab-btn.active { background: #fff; color: #222; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.bp-size-note { font-size: 12px; color: #777; margin: 8px 0 0; }
.bp-promise-box { border: 1px solid #f0dfe5; border-radius: 14px; overflow: hidden; margin: 22px 0; font-family: sans-serif; width: 100%; }
.bp-pr-top { background: #f9eff2; padding: 14px 18px; display: flex; align-items: center; gap: 14px; font-size: 13px; color: #3d313f; }
.bp-pr-bot { background: #fff; padding: 14px 18px; display: flex; align-items: center; gap: 14px; font-size: 13px; color: #3d313f; border-top: 1px solid #f0dfe5; }
.bp-pr-top .bp-ico-svg, .bp-pr-bot .bp-ico-svg { width: 22px; height: 22px; }
.bp-pr-txt strong { display: block; font-size: 13px; margin-bottom: 2px; color: #222; }
.bp-pr-txt span { font-size: 12px; color: #666; }

.bp-acc-wrap { margin-top: 15px; border-top: 1px solid #222; font-family: sans-serif; width: 100%; }
.bp-acc-item { border-bottom: 1px solid #222; padding: 14px 0; }
.bp-acc-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; color: #222; cursor: pointer; }
.bp-acc-item summary::-webkit-details-marker { display: none; }
.bp-acc-item summary::after { content: '+'; font-size: 20px; }
.bp-acc-item details[open] summary::after { content: '−'; }
.bp-acc-body { padding-top: 12px; font-size: 13.5px; color: #555; line-height: 1.6; }
.bp-acc-body h2, .bp-acc-body h3, .bp-acc-body h4 { display: none !important; }

.bp-apply-card { clear: both !important; width: 100% !important; max-width: 960px; margin: 55px auto 50px; background: #fff; border: 1px solid #eee; border-radius: 18px; padding: 28px; display: flex; flex-wrap: wrap; gap: 30px; align-items: center; box-shadow: 0 8px 24px rgba(0,0,0,0.04); font-family: sans-serif; box-sizing: border-box; }
.bp-apply-vid-box { flex: 0 0 46%; width: 46%; max-width: 46%; aspect-ratio: 16 / 10; min-height: 210px; background: #1a1a1a; border-radius: 14px; overflow: hidden; position: relative; }
.bp-apply-vid-box video { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.bp-vid-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13.5px; background: linear-gradient(135deg, #3d313f, #6a4ba3); text-align: center; padding: 15px; }
.bp-apply-vid-box video[src=""] { opacity: 0; }
.bp-apply-vid-box video:not([src=""]) + .bp-vid-placeholder { display: none; }
.bp-apply-info { flex: 1; min-width: 260px; text-align: left; }
.bp-apply-title { font-family: 'Playfair Display', serif; font-size: 1.7rem; color: #222; margin: 0 0 14px; font-weight: 400; }
.bp-apply-tabs { margin-bottom: 18px; }
.bp-step-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 13px; color: #444; line-height: 1.5; }
.bp-step-num { flex: 0 0 20px; height: 20px; border-radius: 50%; background: #f9eff2; color: #3d313f; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.bp-apply-foot { font-size: 11.5px; color: #777; margin-top: 14px; border-top: 1px solid #f2f2f2; padding-top: 10px; }

.bp-yml-sec { width: 100%; max-width: 1200px; margin: 55px auto; font-family: sans-serif; }
.bp-yml-title { font-family: 'Playfair Display', serif; font-size: 2rem; color: #222; text-align: center; margin: 0 0 30px; font-weight: 400; }
.bp-yml-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.bp-yml-card { text-align: center; text-decoration: none !important; color: #222 !important; display: flex; flex-direction: column; }
.bp-yml-img { width: 100%; aspect-ratio: 1 / 1; background: #f7f4f5; border-radius: 18px; overflow: hidden; border: 1px solid #ebe5e8; margin-bottom: 12px; }
.bp-yml-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; transition: transform 0.45s; }
.bp-yml-card:hover .bp-yml-img img { transform: scale(1.05); }
.bp-yml-name { font-size: 14px; font-weight: 600; color: #222; margin: 0 0 4px; }
.bp-yml-price { font-size: 13.5px; color: #555; font-weight: 600; margin: 0; }

.bp-rev-sec { width: 100%; max-width: 1200px; margin: 60px auto 40px; padding-top: 40px; border-top: 1px solid #eee; font-family: sans-serif; }
.bp-rev-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 26px; gap: 15px; }
.bp-rev-hleft h2 { font-family: 'Playfair Display', serif; font-size: 1.85rem; color: #222; margin: 0 0 6px; font-weight: 400; }
.bp-rev-meta { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #444; flex-wrap: wrap; }
.bp-rev-stars { color: #222; letter-spacing: 2px; font-size: 15px; }
.bp-rev-vbadge { background: #e8f5e9; color: #2e7d32; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 6px; }
.bp-rev-write-btn { background: #3d313f; color: #fff; border: none; border-radius: 30px; padding: 11px 24px; font-size: 13px; font-weight: 600; cursor: pointer; }
.bp-rev-empty { background: #fcf9fa; border: 1px dashed #e5d8de; border-radius: 16px; padding: 40px 20px; text-align: center; }
.bp-rev-empty-stars { font-size: 24px; color: #c9bfc4; letter-spacing: 4px; margin-bottom: 10px; }
.bp-rev-empty h4 { font-family: 'Playfair Display', serif; font-size: 1.35rem; color: #222; margin: 0 0 6px; font-weight: 400; }
.bp-rev-empty p { font-size: 13.5px; color: #666; margin: 0 0 18px; }
.bp-rev-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.bp-rev-card { background: #fff; border: 1px solid #ece7ea; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.bp-rev-photo { width: 100%; aspect-ratio: 1 / 1; background: #f4eff1; overflow: hidden; }
.bp-rev-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-rev-body { padding: 15px; text-align: left; flex: 1; }
.bp-rev-author { font-size: 13.5px; font-weight: 700; color: #222; margin-bottom: 4px; display: flex; justify-content: space-between; }
.bp-rev-author i { font-style: normal; font-size: 11px; color: #2e7d32; }
.bp-rev-cstars { color: #222; font-size: 13px; letter-spacing: 1px; margin-bottom: 8px; }
.bp-rev-txt { font-size: 13px; color: #555; line-height: 1.5; margin: 0; }
.bp-rev-del { background: #ffebee; color: #c62828; border: 1px solid #ffcdd2; border-radius: 6px; padding: 3px 8px; font-size: 11px; font-weight: 600; cursor: pointer; margin-top: 10px; }

.bp-rm-ov { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 999999; opacity: 0; visibility: hidden; transition: 0.3s; padding: 15px; }
.bp-rm-ov.on { opacity: 1; visibility: visible; }
.bp-rm-box { background: #fff; border-radius: 18px; max-width: 500px; width: 100%; max-height: 92vh; overflow-y: auto; padding: 34px 26px 28px; text-align: center; position: relative; font-family: sans-serif; box-sizing: border-box; }
.bp-rm-close { position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; border-radius: 50%; background: #f5f5f5; border: none; font-size: 20px; cursor: pointer; }
.bp-rm-title { font-size: 1.5rem; font-weight: 700; color: #222; margin: 0 0 6px; }
.bp-rm-sub { font-size: 13px; color: #777; margin: 0 0 20px; }
.bp-rm-banner { background: #f8f2f5; border: 1px solid #eadce3; border-radius: 14px; padding: 12px 15px; display: flex; align-items: center; gap: 14px; text-align: left; margin-bottom: 20px; }
.bp-rm-b10 { background: #3d313f; color: #fff; font-size: 1.2rem; font-weight: 700; width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bp-rm-btxt { font-size: 13px; color: #3d313f; line-height: 1.45; font-weight: 500; }
.bp-rm-prod img { width: 76px; height: 76px; object-fit: cover; border-radius: 12px; border: 1px solid #eee; display: block; margin: 0 auto 8px; }
.bp-rm-prod span { font-size: 13.5px; font-weight: 600; color: #222; }
.bp-rm-stars { display: flex; justify-content: center; gap: 10px; margin: 8px 0 4px; }
.bp-rm-star { font-size: 36px; color: #3d313f; cursor: pointer; user-select: none; }
.bp-rm-slabels { display: flex; justify-content: space-between; max-width: 230px; margin: 0 auto 16px; font-size: 11.5px; color: #666; font-weight: 600; }
.bp-rm-form { display: flex; flex-direction: column; gap: 10px; text-align: left; margin-top: 10px; }
.bp-rm-form input[type="text"], .bp-rm-form textarea { width: 100%; border: 1px solid #ddd; border-radius: 10px; padding: 11px 14px; font-size: 16px; box-sizing: border-box; outline: none; }
.bp-rm-form textarea { min-height: 70px; }
.bp-rm-upload-lbl { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed #c8b8c0; background: #fcf9fa; color: #3d313f; border-radius: 10px; padding: 11px; font-size: 13px; font-weight: 600; cursor: pointer; }
.bp-rm-upload-lbl input { display: none !important; }
.bp-rm-preview { display: none; align-items: center; gap: 10px; background: #f7f4f5; padding: 8px 12px; border-radius: 10px; font-size: 12px; }
.bp-rm-preview img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.bp-rm-submit { background: #3d313f; color: #fff; border: none; border-radius: 30px; padding: 13px; font-size: 13px; font-weight: 600; text-transform: uppercase; cursor: pointer; }
.bp-rm-success { display: none; background: #f9eff2; border: 1.5px dashed #3d313f; border-radius: 14px; padding: 18px; color: #3d313f; font-size: 14px; margin-top: 15px; }

/* LƯỚI SẢN PHẨM (Mặc định Grid cho mọi thiết bị: Máy tính 5 cột, Tablet 4 cột, Điện thoại 2 cột) */
#products,
.products-block,
#products.products-block,
.products.products-block {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 26px 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
#products::before, #products::after, .products-block::before, .products-block::after { display: none !important; }
#products > div, .products-block > div, .products-block .product, .products-block .p {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    margin: 0 !important; padding: 0 !important; float: none !important; flex: none !important;
    position: relative !important;
}

@media (min-width: 769px) and (max-width: 1024px) {
    #products, .products-block, #products.products-block, .products.products-block {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 20px 14px !important;
    }
}

.products-block .p a:has(img), .products-block .product a:has(img), .products .product a:has(img), .products-block .image, .product .image, .p .image, .p-in .image, a.image { display: block !important; position: relative !important; width: 100% !important; aspect-ratio: 1 / 1 !important; border-radius: 16px !important; overflow: hidden !important; background-color: #f7f4f5 !important; border: 1px solid #ebe5e8 !important; margin-bottom: 12px !important; padding: 0 !important; }
.products-block picture, .product picture, .p picture { display: block !important; width: 100% !important; height: 100% !important; }
.products-block .p a:has(img) img, .products-block .product a:has(img) img, .products .product a:has(img) img, .products-block .image img, .product .image img, .p .image img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 15px !important; display: block !important; margin: 0 !important; transition: transform 0.45s !important; }
.product:hover .image img, .p:hover .image img { transform: scale(1.05) !important; }
.products-block .name, .product .name, .p .name { font-size: 13.5px !important; font-weight: 600 !important; margin-bottom: 4px !important; }
.products-block .price-final, .product .price-final, .p .price-final { font-size: 13.5px !important; font-weight: 700 !important; }
.flags, .flags-default, .flags-extra { position: absolute !important; top: 10px !important; left: 10px !important; display: flex !important; flex-direction: column !important; gap: 5px !important; z-index: 10 !important; pointer-events: none !important; }
.flag, .flags .flag, .p-image-wrapper .flag { background-color: #3d313f !important; color: #fff !important; font-size: 9.5px !important; font-weight: 600 !important; text-transform: uppercase !important; padding: 4px 10px !important; border-radius: 20px !important; border: none !important; }
.products-block .btn, .product .btn, .p .btn { border-radius: 30px !important; background-color: #3d313f !important; border-color: #3d313f !important; color: #fff !important; padding: 8px 18px !important; font-size: 11.5px !important; font-weight: 600 !important; }
.filter-button, .btn.filter-button { border-radius: 30px !important; }
#navigation .menu-level-2, .navigation-in .menu-level-2, .menu-level-2, .menu-level-3, #navigation .submenu-arrow, .navigation-in .submenu-arrow, #navigation li:has(> a[href*="everyday"]), #navigation a[href*="everyday"], #navigation li:has(> a[href*="na-kazdy-den"]) { display: none !important; }

/* =========================================================
   5. GIAO DIỆN MOBILE CHUẨN HANDORA (2 SẢN PHẨM/HÀNG, TÌM KIẾM GỌN, KHÔNG MÀN ĐEN)
   ========================================================= */
@media (max-width: 768px) {
    #top-navigation { display: none !important; }

    /* 1. Thanh Header Mobile độc lập cao 60px */
    #bopiMobileTopbar {
        display: flex !important; align-items: center !important; justify-content: space-between !important;
        height: 60px !important; min-height: 60px !important; width: 100% !important; padding: 0 12px !important;
        background: #ffffff !important; border-bottom: 1px solid #f0e8ec !important;
        position: relative !important; z-index: 100095 !important; box-sizing: border-box !important;
    }
    #header .site-name, #header .logo, #header .navigation-buttons, #header .menu-helper,
    #header .top-nav-button, #header a[data-target="search"], #header a[data-target="login"],
    #header a[data-target="cart"], #header a[data-target="navigation"], #header .header-top .btn.cart-count {
        display: none !important;
    }
    #header, .header-inner, .header-top, .header-top > .container {
        min-height: 0 !important; height: auto !important; padding: 0 !important; margin: 0 !important; background: #ffffff !important; border: none !important;
    }
    .bopi-mob-logo {
        position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important;
        font-family: 'Playfair Display', Georgia, serif !important; font-size: 25px !important; font-weight: 700 !important; font-style: italic !important;
        color: #1a1a1a !important; text-decoration: none !important; letter-spacing: -0.3px !important; white-space: nowrap !important; line-height: 1 !important;
    }
    .bopi-mob-side { display: flex !important; align-items: center !important; gap: 4px !important; z-index: 5 !important; }
    .bopi-mob-ico-btn {
        width: 40px !important; height: 40px !important; border-radius: 50% !important; border: none !important; background: transparent !important;
        color: #222222 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
        padding: 0 !important; margin: 0 !important; cursor: pointer !important; position: relative !important; text-decoration: none !important;
    }
    .bopi-mob-ico-btn svg { width: 22px !important; height: 22px !important; stroke: #222222 !important; fill: none !important; stroke-width: 1.75 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
    .bopi-mob-cart-badge {
        position: absolute !important; top: 4px !important; right: 3px !important; background: #3d313f !important; color: #ffffff !important;
        font-family: sans-serif !important; font-size: 10px !important; font-weight: 700 !important; min-width: 16px !important; height: 16px !important;
        border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 4px !important;
    }

    /* 2. Menu 3 gạch mở ngay dưới thanh Header 60px */
    body.bopi-mob-menu-open #header, body.navigation-window-visible #header {
        position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 100090 !important; background: #ffffff !important;
    }
    body.bopi-mob-menu-open .navigation-window, body.bopi-mob-menu-open #navigation,
    body.navigation-window-visible .navigation-window, body.navigation-window-visible #navigation {
        position: fixed !important; top: 60px !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100vw !important; height: calc(100vh - 60px) !important; background: #ffffff !important; z-index: 100085 !important;
        padding: 16px 16px 40px !important; overflow-y: auto !important; display: block !important; visibility: visible !important; opacity: 1 !important; box-sizing: border-box !important;
    }
    .navigation-window .close, #navigation .close, .navigation-close { display: none !important; }
    body.bopi-mob-menu-open { overflow: hidden !important; }

    /* 3. Thanh tìm kiếm kiểu Handora: Mở ngay dưới Header (top: 60px), không bị che khuất */
    body:not(.search-window-visible) #header .search,
    body:not(.search-window-visible) .search-window {
        display: none !important;
    }
    body.search-window-visible #header .search,
    body.search-window-visible .search-window {
        display: block !important;
        position: relative !important;
        top: 0 !important;
        width: 100% !important;
        padding: 10px 14px 12px !important;
        margin: 0 !important;
        background: #ffffff !important;
        border-bottom: 1px solid #ece5e8 !important;
        box-shadow: 0 12px 28px rgba(61, 49, 63, 0.1) !important;
        z-index: 100120 !important;
        box-sizing: border-box !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .search-form, .search-form fieldset, .search form, .search fieldset {
        position: relative !important; display: flex !important; align-items: center !important;
        background: #f4f2f3 !important; border-radius: 30px !important; height: 44px !important; padding: 0 42px 0 38px !important;
        border: none !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
    }
    .search-form::before, .search form::before {
        content: "" !important; position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important;
        width: 18px !important; height: 18px !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
        pointer-events: none !important; z-index: 3 !important;
    }
    .search-form input[type="search"], .search-form input[type="text"], .search input.query-input, #header input[placeholder*="hledáte"] {
        width: 100% !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important;
        background: transparent !important; border: none !important; border-radius: 30px !important;
        padding: 0 6px !important; font-size: 16px !important; color: #222222 !important; outline: none !important; box-shadow: none !important;
    }
    .search-form button[type="submit"], .search-form .btn, .search button[type="submit"], .search input[type="submit"] {
        display: none !important;
    }
    .bopi-search-close-x {
        position: absolute !important; right: 8px !important; top: 50% !important; transform: translateY(-50%) !important;
        width: 32px !important; height: 32px !important; border-radius: 50% !important; border: none !important;
        background: transparent !important; color: #444444 !important; font-size: 22px !important; line-height: 1 !important;
        display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; z-index: 5 !important; padding: 0 !important;
    }
    .searchWhisperer, #searchWhisperer, .search-whisperer, .whisperer {
        position: absolute !important; top: calc(100% + 6px) !important; left: 50% !important; transform: translateX(-50%) !important;
        width: calc(100vw - 20px) !important; max-height: 65vh !important; overflow-y: auto !important; padding: 18px 16px !important; border-radius: 18px !important;
    }

    /* 4. Hộp Đăng nhập trên Mobile (Sáng đẹp, không bị màn đen đè) */
    body:not(.login-window-visible) .popup-widget.login-widget, body:not(.login-window-visible) .login-window {
        display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
    }
    body.login-window-visible .popup-widget.login-widget, body.login-window-visible .login-window {
        display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
        position: fixed !important; top: 68px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
        width: calc(100vw - 28px) !important; max-width: 355px !important; max-height: calc(100vh - 84px) !important; overflow-y: auto !important;
        padding: 26px 18px 20px !important; border-radius: 24px !important; z-index: 100110 !important;
        background: #ffffff !important; box-shadow: 0 24px 60px rgba(43, 33, 41, 0.28) !important;
    }

    /* 5. Khóa cứng 2 sản phẩm / 1 hàng trên điện thoại */
    #products,
    .products-block,
    #products.products-block,
    .products.products-block,
    .bp-yml-grid,
    .bp-rev-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px 12px !important;
        width: 100% !important;
    }
    #products > div, .products-block > div, .products-block .product, .products-block .p {
        width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important;
    }

    .bopi-cute-toast { top: 14px; right: 16px; left: 16px; width: auto; }
    .bp-gift { bottom: 15px; right: 15px; width: 44px; height: 44px; }
    .bp-md { padding: 28px 16px 22px !important; }
    .bopi-stamp-grid { gap: 7px; }
    .bopi-klient-grid-2 { grid-template-columns: 1fr; }
    .bopi-klient-dashboard { padding: 24px 16px; }
    .bopi-footer-top, .bopi-footer-bottom, .bp-apply-card { flex-direction: column !important; }
    .bopi-footer-col h4 { cursor: pointer; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; margin-bottom: 0; }
    .bopi-footer-col h4::after { content: '+'; font-size: 1.5rem; }
    .bopi-footer-col.active h4::after { content: '−'; }
    .bopi-footer-col ul { display: none; padding: 15px 0; }
    .bopi-footer-col.active ul { display: block; }
    body.bp-prod .p-image-wrapper { display: block !important; width: 100% !important; margin: 0 0 18px !important; padding: 0 !important; }
    body.bp-prod .p-image { width: 100% !important; margin: 0 0 12px !important; }
    body.bp-prod .p-image-wrapper > *:not(.p-image) { display: block !important; width: 100% !important; overflow-x: auto !important; margin: 0 0 16px !important; scrollbar-width: none !important; }
    body.bp-prod .p-image-wrapper > *:not(.p-image) div { display: flex !important; flex-direction: row !important; gap: 10px !important; width: max-content !important; }
    body.bp-prod .p-image-wrapper > *:not(.p-image) a { flex: 0 0 74px !important; width: 74px !important; height: 74px !important; }
    .bp-apply-vid-box { width: 100% !important; max-width: 100% !important; }
}