/**
 * POD-Functions: Bundle Sale (Frequently Bought Together) Stylesheet
 * Chuẩn Brand Shopify & Khắc phục 100% can thiệp từ Theme Flatsome
 * Tối ưu gọn gàng theo yêu cầu của User:
 * - Nút "Detail ▾" nhỏ gọn, dòng sản phẩm không chiếm chỗ
 * - Popup mở dài với ảnh sản phẩm to rõ nét phía trên, giá gốc và giá sale
 * - Nút "CONFIRM SELECTION" tiếng Anh với hiệu ứng online ring và bóng loáng sang trọng
 * - Phần giá và discount coupon căn giữa
 * - Nút "ADD ALL TO CART" thu gọn thanh thoát với hiệu ứng shimmer bóng loáng
 */

/* ==========================================================================
   1. ROOT CONTAINER & CÔ LẬP THEME FLATSOME
   ========================================================================== */
#pod-bundle-root.pod-bundle-container {
    --pod-accent: #cc1c1c;
    --pod-accent-hover: #b91c1c;
    --pod-green: #059669;
    --pod-green-light: #10b981;
    --pod-green-hover: #047857;
    --pod-text-main: #111827;
    --pod-text-muted: #475569;
    --pod-border: #e2e8f0;
    --pod-card-bg: #f8fafc;

    display: block !important;
    position: relative !important;
    margin: 24px 0 !important;
    padding: 20px 22px !important;
    background: #ffffff !important;
    border: 1px solid var(--pod-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04), 0 2px 6px -1px rgba(0, 0, 0, 0.02) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    box-sizing: border-box !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
}

#pod-bundle-root.pod-bundle-container *,
#pod-bundle-root.pod-bundle-container *::before,
#pod-bundle-root.pod-bundle-container *::after {
    box-sizing: border-box !important;
}

/* ==========================================================================
   2. TIÊU ĐỀ SECTION (FREQUENTLY BOUGHT TOGETHER:)
   ========================================================================== */
#pod-bundle-root .pod-bundle-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    border: none !important;
}

#pod-bundle-root .pod-bundle-title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16.5px !important;
    font-weight: 700 !important;
    color: var(--pod-text-main) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.2px !important;
}

/* ==========================================================================
   3. HÀNG ẢNH TRỰC QUAN (THUMBNAIL VUÔNG BO GÓC, DẤU + TRÒN)
   ========================================================================== */
#pod-bundle-root .pod-bundle-gallery {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 16px 0 !important;
    padding: 2px 0 4px 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

#pod-bundle-root .pod-bundle-gallery::-webkit-scrollbar {
    height: 3px !important;
}

#pod-bundle-root .pod-bundle-gallery::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 3px !important;
}

#pod-bundle-root .pod-bundle-thumb-card {
    position: relative !important;
    width: 76px !important;
    height: 76px !important;
    flex: 0 0 76px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, filter 0.2s ease, border-color 0.2s ease !important;
}

/* Số thứ tự 1, 2, 3... góc trên thumbnail: nhỏ gọn, màu trầm tinh tế (Ảnh 3) */
#pod-bundle-root .pod-item-badge-num {
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    z-index: 5 !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #334155 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

#pod-bundle-root .pod-bundle-thumb-card:hover {
    border-color: #94a3b8 !important;
    transform: translateY(-2px) !important;
}

#pod-bundle-root .pod-bundle-thumb-card img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 7px !important;
    display: block !important;
}

/* Khi sản phẩm bị bỏ chọn */
#pod-bundle-root .pod-bundle-thumb-card.is-unselected {
    opacity: 0.35 !important;
    filter: grayscale(100%) !important;
    border-color: #cbd5e1 !important;
    transform: scale(0.95) !important;
}

/* Dấu nối '+' giữa các ảnh */
#pod-bundle-root .pod-bundle-plus-connector {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 50% !important;
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    user-select: none !important;
}

/* ==========================================================================
   3.1 CHẾ ĐỘ DÃN FULL CHIỀU RỘNG KHI CÓ 2 HOẶC 3 SẢN PHẨM (ẢNH 1)
   - Nếu có 2 hoặc 3 ảnh: Dãn đều 100% chiều rộng của div để ảnh to rõ ràng hơn, không bị trống bên phải.
   - Ưu tiên fit vào khung ảnh vuông 1:1, ảnh tự động cover khít viền khung, loại bỏ hoàn toàn khoảng trắng thừa.
   - Nếu có từ 4 slot trở lên: Giữ nguyên chế độ cuộn ngang và kích thước cố định như hiện tại.
   ========================================================================== */
#pod-bundle-root .pod-bundle-gallery.pod-gallery-fill {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    overflow-x: visible !important;
    padding: 2px 0 6px 0 !important;
}

#pod-bundle-root .pod-bundle-gallery.pod-gallery-fill .pod-bundle-thumb-card {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    max-height: 220px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    box-sizing: border-box !important;
}

#pod-bundle-root .pod-bundle-gallery.pod-gallery-fill .pod-bundle-thumb-card img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 7px !important;
    display: block !important;
    margin: 0 !important;
}

/* Dấu connector '+' giữa các ảnh khi dãn full: Căn giữa theo trục dọc của khung vuông 1:1 */
#pod-bundle-root .pod-bundle-gallery.pod-gallery-fill .pod-bundle-plus-connector {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    margin: 0 !important;
    align-self: center !important;
}

#pod-bundle-root .pod-bundle-gallery.pod-gallery-fill .pod-item-badge-num {
    top: 4px !important;
    left: 4px !important;
}

/* ==========================================================================
   4. CHECKLIST SẢN PHẨM: GỌN GÀNG, KHÔNG CHIẾM DIỆN TÍCH (ẢNH 2 & 3)
   ========================================================================== */
#pod-bundle-root .pod-bundle-items-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}

#pod-bundle-root .pod-bundle-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 8px 12px !important;
    background: #f8fafc !important;
    border: 1px solid #edf2f7 !important;
    border-radius: 8px !important;
    transition: background-color 0.2s, border-color 0.2s, opacity 0.2s !important;
    position: relative !important;
}

#pod-bundle-root .pod-bundle-row:hover {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

#pod-bundle-root .pod-bundle-row.is-row-unselected {
    opacity: 0.45 !important;
    background: #fcfcfc !important;
}

#pod-bundle-root .pod-bundle-row-main {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Số thứ tự 1, 2, 3... đưa lên góc trên bên trái của hàng sản phẩm, nhỏ gọn không choán chỗ (Ảnh 3) */
#pod-bundle-root .pod-row-badge-num {
    position: absolute !important;
    top: -5px !important;
    left: 8px !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    border-radius: 50% !important;
    background: #334155 !important;
    color: #ffffff !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    border: 1.5px solid #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
    pointer-events: none !important;
}

/* Checkbox tuỳ biến kiểu Teal */
#pod-bundle-root .pod-bundle-checkbox-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 17px !important;
    width: 17px !important;
    height: 17px !important;
}

#pod-bundle-root input[type="checkbox"].pod-bundle-item-toggle {
    position: absolute !important;
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
}

#pod-bundle-root .pod-bundle-custom-check {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 17px !important;
    height: 17px !important;
    background: #ffffff !important;
    border: 1.5px solid var(--pod-green) !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
}

#pod-bundle-root .pod-bundle-custom-check svg {
    width: 11px !important;
    height: 11px !important;
    opacity: 0 !important;
    transform: scale(0.6) !important;
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#pod-bundle-root .pod-bundle-item-toggle:checked+.pod-bundle-custom-check {
    background: var(--pod-green) !important;
    border-color: var(--pod-green) !important;
}

#pod-bundle-root .pod-bundle-item-toggle:checked+.pod-bundle-custom-check svg {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Product Meta (Title + Price dạng Compact trên cùng 1 hàng) */
#pod-bundle-root .pod-bundle-meta {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 8px !important;
}

#pod-bundle-root .pod-bundle-meta-top {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

#pod-bundle-root .pod-this-item-badge {
    background: #0f172a !important;
    color: #ffffff !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 1px 6px !important;
    border-radius: 3px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
    letter-spacing: 0.2px !important;
    line-height: 1.3 !important;
    flex-shrink: 0 !important;
}

/* Tên sản phẩm: Giới hạn 1 dòng với dấu ... tránh choán chỗ */
#pod-bundle-root .pod-bundle-item-name {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 270px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: 1.35 !important;
    transition: color 0.15s !important;
}

#pod-bundle-root .pod-bundle-item-name:hover {
    color: var(--pod-green) !important;
    text-decoration: underline !important;
}

#pod-bundle-root .pod-row-price {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    line-height: 1.2 !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   5. NÚT "Detail ▾" GỌN GÀNG & FLOATING POPOVER (ẢNH 1, 2, 3, 4)
   ========================================================================== */
#pod-bundle-root .pod-bundle-opt-wrapper {
    position: relative !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
}

/* Nút Detail nhỏ gọn phía bên phải */
#pod-bundle-root button.pod-bundle-opt-btn,
#pod-bundle-root .pod-bundle-opt-btn {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    border: 1.5px solid var(--pod-green) !important;
    border-radius: 5px !important;
    background-color: #ffffff !important;
    color: var(--pod-green) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    margin: 0 !important;
    box-shadow: none !important;
    transition: all 0.15s ease !important;
}

#pod-bundle-root button.pod-bundle-opt-btn:hover {
    background-color: #f0fdf4 !important;
    border-color: var(--pod-green-hover) !important;
    color: var(--pod-green-hover) !important;
}

#pod-bundle-root button.pod-bundle-opt-btn.is-active {
    background-color: #ecfdf5 !important;
    border-color: var(--pod-green-hover) !important;
    color: var(--pod-green-hover) !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important;
}

#pod-bundle-root .pod-opt-arrow {
    font-size: 10px !important;
    transition: transform 0.2s ease !important;
    color: var(--pod-green) !important;
}

#pod-bundle-root button.pod-bundle-opt-btn.is-active .pod-opt-arrow {
    transform: rotate(180deg) !important;
}

/* ==========================================================================
   6. INLINE FLOATING POPOVER (ẢNH 1: MỞ DÀI, ẢNH TO PHÍA TRÊN, GIÁ SALE)
   ========================================================================== */
.pod-bundle-popover {
    display: none;
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    width: 330px !important;
    max-width: 92vw !important;
    background: #ffffff !important;
    border: 1.5px solid #10b981 !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14), 0 3px 8px rgba(0, 0, 0, 0.05) !important;
    padding: 16px 18px !important;
    z-index: 1000 !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

.pod-bundle-popover.is-open {
    display: block !important;
    animation: podPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes podPopIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

/* Popover Header: Khung ảnh lớn phía trên để khách nhìn rõ sản phẩm (Ảnh 1) */
.pod-popover-header {
    position: relative !important;
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.pod-popover-close-btn {
    all: unset !important;
    cursor: pointer !important;
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    z-index: 2 !important;
    transition: background-color 0.15s, color 0.15s !important;
}

.pod-popover-close-btn:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

.pod-popover-showcase {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* Khung ảnh to phía trên để khách xem chi tiết mẫu áo (Premium Style theo code mẫu của khách) */
.pod-popover-large-img-wrap {
    position: relative !important;
    width: 100% !important;
    height: 210px !important;
    max-height: 210px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    margin-bottom: 10px !important;
    cursor: zoom-in !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.pod-popover-large-img-wrap:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* Badge "Limited" góc trên bên trái ảnh (Ảnh 1) */
.pod-popover-large-img-wrap::before {
    content: "Limited" !important;
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 10 !important;
    background-color: rgba(0, 0, 0, 0.68) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    padding: 4px 8px 4px 18px !important;
    border-radius: 99px !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

/* Chấm xanh lá nhấp nháy bên trong badge Limited */
.pod-popover-large-img-wrap::after {
    content: "" !important;
    position: absolute !important;
    z-index: 11 !important;
    width: 6px !important;
    height: 6px !important;
    background-color: #4cd964 !important;
    border-radius: 50% !important;
    top: 18px !important;
    left: 17px !important;
    transform: translateY(-50%) !important;
    box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.7) !important;
    animation: pulse-green 2s infinite !important;
    pointer-events: none !important;
}

/* Vệt sáng bóng loáng lướt qua ảnh theo chu kỳ (Shine effect cho cả Popup và Lightbox) */
.pod-popover-large-img-wrap .pod-img-shine,
.pod-lightbox-media .pod-img-shine {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 65% !important;
    height: 100% !important;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.6) 50%,
            rgba(255, 255, 255, 0) 100%) !important;
    transform: skewX(-25deg) !important;
    z-index: 10 !important;
    animation: shine-loop 3.5s infinite !important;
    pointer-events: none !important;
}

/* Nút chỉ dẫn Zoom toàn màn hình góc dưới bên phải ảnh */
.pod-popover-large-img-wrap .pod-zoom-badge {
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    z-index: 5 !important;
    background: rgba(15, 23, 42, 0.65) !important;
    color: #ffffff !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    pointer-events: none !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

.pod-popover-large-img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    display: block !important;
    margin: 0 auto !important;
}

.pod-popover-details {
    width: 100% !important;
}

.pod-popover-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.35 !important;
    margin: 0 0 5px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Giá gốc gạch ngang, Giá Sale màu đỏ và Flash Deal bé gọn nằm ngay bên cạnh (Ảnh 1) */
.pod-popover-pricing {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 4px 0 6px 0 !important;
}

.pod-popover-orig-price {
    font-size: 13px !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
    font-weight: 500 !important;
}

/* Giá sale màu đỏ nổi bật kích thích mua hàng */
.pod-popover-sale-price {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #dc2626 !important;
    letter-spacing: -0.3px !important;
    text-shadow: 0 1px 2px rgba(220, 38, 38, 0.12) !important;
}

/* Thanh đếm ngược thời gian hết Deal BÉ GỌN LẠI nằm bên cạnh giá sale (Ảnh 1) */
.pod-popover-deal-bar {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%) !important;
    border: 1px solid #fecdd3 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    margin: 0 0 0 3px !important;
    box-shadow: none !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

.pod-deal-pulse-dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background-color: #e11d48 !important;
    box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.7) !important;
    animation: podDealDotPulse 1.5s infinite !important;
    flex-shrink: 0 !important;
}

.pod-deal-end-text {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #e11d48 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.pod-deal-clock {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    color: #be123c !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 1.5px !important;
    line-height: 1 !important;
}

.pod-deal-digits {
    background: rgba(225, 29, 72, 0.08) !important;
    padding: 1px 3px !important;
    border-radius: 2px !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
}

/* Popover Body & Dynamic Fields */
.pod-popover-body {
    padding: 0 !important;
}

.pod-popover-field {
    margin-bottom: 11px !important;
}

.pod-popover-label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 4px !important;
}

.pod-popover-label .pod-req {
    color: #ef4444 !important;
    margin-left: 2px !important;
}

.pod-select-wrap {
    position: relative !important;
    width: 100% !important;
}

.pod-popover-select,
.pod-popover-input {
    width: 100% !important;
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    outline: none !important;
    margin: 0 !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

.pod-popover-select {
    padding-right: 28px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
}

.pod-select-arrow {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 11px !important;
    color: #64748b !important;
    pointer-events: none !important;
}

.pod-popover-select:focus,
.pod-popover-input:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
}

/* Dòng chữ đỏ "Skip if you don't need to add any notes." */
.pod-popover-subtext {
    color: #ef4444 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    display: block !important;
    line-height: 1.3 !important;
}

/* ==========================================================================
   7. NÚT "CONFIRM SELECTION": TIẾNG ANH, HIỆU ỨNG ONLINE RING & BÓNG LOÁNG
   ========================================================================== */
.pod-popover-footer {
    margin-top: 12px !important;
}

.pod-popover-confirm-btn {
    all: unset !important;
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 11px 16px !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 7px !important;
    text-align: center !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    /* Hiệu ứng viền active online glowing ring */
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3), 0 4px 12px rgba(16, 185, 129, 0.35) !important;
    animation: podOnlinePulse 2.4s infinite !important;
    transition: transform 0.15s, box-shadow 0.2s, background 0.2s !important;
}

/* Lớp phủ bóng loáng sang trọng (Glossy reflection highlight) */
.pod-popover-confirm-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 48% !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    border-radius: 6px 6px 0 0 !important;
    pointer-events: none !important;
}

/* Hiệu ứng vệt sáng lướt qua (Shimmer Sheen) */
.pod-popover-confirm-btn::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -80% !important;
    width: 50% !important;
    height: 200% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent) !important;
    transform: rotate(25deg) !important;
    animation: podShimmerSweep 3.5s infinite !important;
    pointer-events: none !important;
}

.pod-popover-confirm-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.35), 0 6px 16px rgba(16, 185, 129, 0.45) !important;
    transform: translateY(-1px) !important;
}

.pod-popover-confirm-btn:active {
    transform: scale(0.99) !important;
}

/* ==========================================================================
   8. FOOTER: CĂN GIỮA GIÁ, COUPON & NÚT "ADD ALL TO CART" BÓNG LOÁNG
   ========================================================================== */
#pod-bundle-root .pod-bundle-footer {
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid #edf2f7 !important;
    text-align: center !important;
}

/* Phần giá căn giữa (Ảnh 2 & 3) */
#pod-bundle-root .pod-bundle-pricing-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    text-align: center !important;
}

#pod-bundle-root .pod-bundle-total-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
}

#pod-bundle-root .pod-bundle-total-val {
    font-size: 19px !important;
    font-weight: 800 !important;
    color: var(--pod-accent) !important;
    line-height: 1 !important;
}

#pod-bundle-root .pod-bundle-orig-val {
    font-size: 13px !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
    margin-left: 2px !important;
}

#pod-bundle-root .pod-bundle-orig-val.is-hidden {
    display: none !important;
}

/* Thanh vàng báo giảm giá CĂN GIỮA (Ảnh 2 & 3) */
#pod-bundle-root .pod-bundle-savings-badge {
    background-color: #fff9c4 !important;
    border: 1px solid #fbc02d !important;
    border-radius: 4px !important;
    padding: 6px 14px !important;
    color: #5d4037 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin: 6px auto 14px auto !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    max-width: 460px !important;
    width: auto !important;
    transform-origin: center center !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    line-height: 1.35 !important;
    transition: all 0.2s ease !important;
}

/* Khi có thêm nhãn Free Shipping: Giảm font size 1px (từ 12px xuống 11px) theo yêu cầu để tránh tràn xuống dòng */
#pod-bundle-root .pod-bundle-savings-badge.has-freeship {
    font-size: 11px !important;
    padding: 5px 12px !important;
    gap: 5px !important;
}

/* Text nội dung ưu đãi */
#pod-bundle-root .pod-bundle-savings-text {
    display: inline !important;
}

/* Nhãn Free Shipping đẹp mắt nằm cạnh Discount Coupon */
#pod-bundle-root .pod-bundle-freeship-badge {
    display: inline-flex !important;
    align-items: center !important;
    background: #16a34a !important;
    color: #ffffff !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.35px !important;
    line-height: 1.2 !important;
    box-shadow: 0 1px 3px rgba(22, 163, 74, 0.35) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

#pod-bundle-root .pod-bundle-freeship-badge.is-hidden {
    display: none !important;
}

/* Hiệu ứng lắc lắc nhẹ vài lần khi cuộn đến phần đó để thu hút khách hàng hơn (Ảnh 2) */
#pod-bundle-root .pod-bundle-savings-badge.pod-wobble-shake {
    animation: podCouponWobble 1.05s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
}

#pod-bundle-root .pod-bundle-savings-badge.is-hidden {
    display: none !important;
}

/* Khung bọc nút Add All To Cart căn giữa */
#pod-bundle-root .pod-bundle-btn-wrap {
    text-align: center !important;
    width: 100% !important;
}

/* Nút "ADD ALL TO CART" thu nhỏ lại, thanh thoát và bóng loáng sang trọng (Ảnh 2 & 3) */
#pod-bundle-root button.pod-bundle-submit-btn,
#pod-bundle-root .pod-bundle-submit-btn {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 260px !important;
    max-width: 340px !important;
    width: 100% !important;
    padding: 10px 22px !important;
    background: linear-gradient(180deg, #e53935 0%, #cc1c1c 100%) !important;
    color: #ffffff !important;
    border-radius: 7px !important;
    border: none !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    margin: 0 auto !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    /* Hiệu ứng bóng đổ nổi & highlight phản chiếu */
    box-shadow: 0 4px 14px rgba(204, 28, 28, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    transition: transform 0.15s, box-shadow 0.2s, background-color 0.2s !important;
}

/* Lớp bóng phía trên nút */
#pod-bundle-root .pod-bundle-submit-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 48% !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    border-radius: 7px 7px 0 0 !important;
    pointer-events: none !important;
}

/* Vệt sáng lướt qua nút Add All To Cart */
#pod-bundle-root .pod-bundle-submit-btn::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -80% !important;
    width: 45% !important;
    height: 200% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
    transform: rotate(25deg) !important;
    animation: podShimmerSweep 3.5s infinite !important;
    pointer-events: none !important;
}

#pod-bundle-root button.pod-bundle-submit-btn:hover {
    background: linear-gradient(180deg, #d32f2f 0%, #b91c1c 100%) !important;
    box-shadow: 0 6px 18px rgba(185, 28, 28, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    transform: translateY(-1px) !important;
}

#pod-bundle-root button.pod-bundle-submit-btn:active {
    transform: scale(0.99) !important;
}

#pod-bundle-root button.pod-bundle-submit-btn:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

#pod-bundle-root .pod-btn-spinner {
    display: none !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid rgba(255, 255, 255, 0.35) !important;
    border-top-color: #ffffff !important;
    border-radius: 50% !important;
    animation: podSpin 0.6s linear infinite !important;
}

#pod-bundle-root .pod-bundle-submit-btn.is-loading .pod-btn-spinner {
    display: inline-block !important;
}

@keyframes podSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes podOnlinePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7), 0 4px 12px rgba(16, 185, 129, 0.35);
    }

    60% {
        box-shadow: 0 0 0 7px rgba(16, 185, 129, 0), 0 4px 16px rgba(16, 185, 129, 0.45);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0), 0 4px 12px rgba(16, 185, 129, 0.35);
    }
}

@keyframes podShimmerSweep {
    0% {
        left: -80%;
    }

    22% {
        left: 140%;
    }

    100% {
        left: 140%;
    }
}

/* Backdrop: Đóng popover khi click ra ngoài */
.pod-bundle-backdrop {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    z-index: 998 !important;
    background: transparent !important;
}

.pod-bundle-backdrop.is-active {
    display: block !important;
}

/* ==========================================================================
   9. RESPONSIVE DI ĐỘNG (MOBILE OPTIMIZATION - ẢNH 3)
   ========================================================================== */
@media (max-width: 640px) {
    #pod-bundle-root.pod-bundle-container {
        padding: 14px 14px !important;
        margin: 18px 0 !important;
        border-radius: 10px !important;
    }

    #pod-bundle-root .pod-bundle-title {
        font-size: 15px !important;
    }

    #pod-bundle-root .pod-bundle-gallery {
        gap: 6px !important;
    }

    #pod-bundle-root .pod-bundle-thumb-card {
        width: 68px !important;
        height: 68px !important;
        flex: 0 0 68px !important;
    }

    /* Gallery dãn full trên mobile khi có 2 hoặc 3 sản phẩm (giữ chuẩn vuông 1:1) */
    #pod-bundle-root .pod-bundle-gallery.pod-gallery-fill {
        gap: 6px !important;
    }

    #pod-bundle-root .pod-bundle-gallery.pod-gallery-fill .pod-bundle-thumb-card {
        flex: 1 1 0% !important;
        width: auto !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        padding: 0 !important;
    }

    #pod-bundle-root .pod-bundle-gallery.pod-gallery-fill .pod-bundle-plus-connector {
        flex: 0 0 18px !important;
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        font-size: 11px !important;
        align-self: center !important;
    }

    /* Giữ row sản phẩm trên 1 dòng duy nhất trên mobile để cực kỳ gọn gàng */
    #pod-bundle-root .pod-bundle-row {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding: 7px 10px !important;
    }

    #pod-bundle-root .pod-bundle-row-main {
        gap: 8px !important;
    }

    #pod-bundle-root .pod-bundle-item-name {
        max-width: 150px !important;
        font-size: 12px !important;
    }

    #pod-bundle-root .pod-row-price {
        font-size: 12px !important;
    }

    #pod-bundle-root .pod-bundle-opt-wrapper {
        flex-shrink: 0 !important;
    }

    #pod-bundle-root button.pod-bundle-opt-btn,
    #pod-bundle-root .pod-bundle-opt-btn {
        padding: 3px 8px !important;
        font-size: 11.5px !important;
    }

    #pod-bundle-root .pod-bundle-savings-badge {
        font-size: 11px !important;
        padding: 5px 8px !important;
        max-width: 98% !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
    }

    #pod-bundle-root .pod-bundle-savings-badge.has-freeship {
        font-size: 10px !important;
        padding: 4px 6px !important;
    }

    /* Trên Mobile: Popover chuyển thành Bottom Sheet vuốt từ dưới lên tiện dụng (Ảnh 1) */
    .pod-bundle-popover {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25) !important;
        padding: 18px 16px 24px 16px !important;
        z-index: 1000 !important;
    }

    .pod-popover-large-img-wrap {
        height: 190px !important;
        max-height: 190px !important;
    }

    .pod-bundle-backdrop.is-active {
        background: rgba(15, 23, 42, 0.45) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    #pod-bundle-root button.pod-bundle-submit-btn,
    #pod-bundle-root .pod-bundle-submit-btn {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
        padding: 10px 16px !important;
    }
}

/* ==========================================================================
   10. FULLSCREEN LIGHTBOX MODAL (PHÓNG TO ẢNH TOÀN MÀN HÌNH)
   ========================================================================== */
.pod-img-lightbox {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: center !important;
}

.pod-img-lightbox.is-open {
    display: flex !important;
    animation: podFadeIn 0.22s ease-out !important;
}

.pod-lightbox-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.88) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    cursor: zoom-out !important;
}

.pod-lightbox-box {
    position: relative !important;
    max-width: 90vw !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    animation: podZoomIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pod-lightbox-close-btn {
    all: unset !important;
    cursor: pointer !important;
    position: absolute !important;
    top: -46px !important;
    right: 0 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: background-color 0.2s, transform 0.2s !important;
}

.pod-lightbox-close-btn:hover {
    background: rgba(255, 255, 255, 0.4) !important;
    transform: scale(1.08) !important;
}

.pod-lightbox-media {
    position: relative !important;
    overflow: hidden !important;
    max-width: 95vw !important;
    max-height: 82vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 3px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.75) !important;
}

.pod-lightbox-img {
    max-width: 100% !important;
    max-height: 79vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    display: block !important;
}

.pod-lightbox-caption {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-top: 10px !important;
    text-align: center !important;
    max-width: 90vw !important;
    width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.4 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7) !important;
}

/* ==========================================================================
   11. KEYFRAME ANIMATIONS (SHINE, PULSE GREEN, DEAL DOT, FADE, ZOOM)
   ========================================================================== */
@keyframes shine-loop {
    0% {
        left: -100%;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    40% {
        left: 200%;
        opacity: 0;
    }

    100% {
        left: 200%;
        opacity: 0;
    }
}

@keyframes pulse-green {
    0% {
        transform: translateY(-50%) scale(0.95);
        box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.7);
    }

    70% {
        transform: translateY(-50%) scale(1);
        box-shadow: 0 0 0 5px rgba(76, 217, 100, 0);
    }

    100% {
        transform: translateY(-50%) scale(0.95);
        box-shadow: 0 0 0 0 rgba(76, 217, 100, 0);
    }
}

@keyframes podDealDotPulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(225, 29, 72, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(225, 29, 72, 0);
    }
}

@keyframes podFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes podZoomIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Hiệu ứng lắc lắc nhẹ nhàng vài nhịp cho khung Discount Coupon thu hút khách hàng */
@keyframes podCouponWobble {
    0% {
        transform: scale(1) rotate(0deg);
    }

    12% {
        transform: scale(1.025) rotate(-2deg);
    }

    25% {
        transform: scale(1.025) rotate(2deg);
    }

    38% {
        transform: scale(1.02) rotate(-1.5deg);
    }

    50% {
        transform: scale(1.02) rotate(1.5deg);
    }

    63% {
        transform: scale(1.01) rotate(-1deg);
    }

    76% {
        transform: scale(1.01) rotate(0.8deg);
    }

    88% {
        transform: scale(1) rotate(-0.4deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}