/* Cân lại không gian của header desktop Flatsome. */
#masthead .header-inner > .hide-for-medium.flex-left.flex-grow {
    min-width: 0;
}

#masthead .header-inner > .hide-for-medium.flex-right {
    flex: 0 0 auto;
    margin-left: 14px;
}

#masthead .header-inner > .hide-for-medium.flex-right > .header-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}

/* Thẻ hotline. */
#masthead .tl-header-hotline-item {
    margin: 0 !important;
    padding: 0 !important;
}

#masthead .tl-header-hotline-link {
    display: grid;
    grid-template-columns: 34px auto;
    align-items: center;
    min-width: 160px;
    min-height: 50px;
    padding: 7px 11px;
    column-gap: 9px;
    border: 1px solid rgba(0, 39, 72, 0.14);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 39, 72, 0.09);
    color: #002748;
    line-height: 1.15;
    text-decoration: none;
    text-transform: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#masthead .tl-header-hotline-link:hover {
    border-color: rgba(226, 27, 27, 0.42);
    box-shadow: 0 6px 18px rgba(0, 39, 72, 0.14);
    color: #002748;
    transform: translateY(-1px);
}

/* Flatsome nav-line tạo một vạch trên link khi hover; tắt riêng cho hotline. */
#masthead .header-nav.nav-line
> .tl-header-hotline-item
> .tl-header-hotline-link::before {
    display: none !important;
    content: none !important;
}

#masthead .tl-header-hotline-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff0ef;
    color: #e21b1b;
}

#masthead .tl-header-hotline-icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

#masthead .tl-header-hotline-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    white-space: nowrap;
}

#masthead .tl-header-hotline-label {
    margin-bottom: 3px;
    color: #526577;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

#masthead .tl-header-hotline-number {
    color: #e21b1b;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

/* Đường phân cách giữa hotline và giỏ hàng. */
#masthead .tl-header-hotline-item + .header-divider {
    height: 34px;
    margin: 0 2px !important;
    border-left-color: rgba(0, 39, 72, 0.16);
}

#masthead .cart-item + .header-divider {
    display: none;
}

/* Làm mới nút giỏ hàng WooCommerce có sẵn. */
#masthead .hide-for-medium.flex-right .cart-item {
    margin: 0 !important;
}

#masthead .hide-for-medium.flex-right .cart-item .header-cart-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    margin: 0 !important;
    padding: 0 14px !important;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #002748 0%, #004675 100%) !important;
    box-shadow: 0 5px 15px rgba(0, 39, 72, 0.2) !important;
    color: #fff !important;
    line-height: 1.1;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#masthead .hide-for-medium.flex-right .cart-item .header-cart-link:hover {
    background: linear-gradient(135deg, #00345f 0%, #00578d 100%) !important;
    box-shadow: 0 7px 19px rgba(0, 39, 72, 0.27) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

#masthead .hide-for-medium.flex-right .header-cart-title {
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.15px;
    white-space: nowrap;
}

#masthead .hide-for-medium.flex-right .header-cart-title .cart-price,
#masthead .hide-for-medium.flex-right .header-cart-title .amount,
#masthead .hide-for-medium.flex-right .header-cart-title .woocommerce-Price-currencySymbol {
    color: #fff !important;
}

#masthead .hide-for-medium.flex-right .header-cart-link > i {
    order: -1;
    margin: 0 !important;
    color: #ffb323 !important;
    font-size: 22px;
}

/* Thu gọn nhẹ trên laptop nhỏ; mobile dùng header gốc của Flatsome. */
@media screen and (min-width: 850px) and (max-width: 1100px) {
    #masthead .tl-header-hotline-link {
        min-width: 142px;
        grid-template-columns: 30px auto;
        padding: 6px 9px;
        column-gap: 7px;
    }

    #masthead .tl-header-hotline-icon {
        width: 30px;
        height: 30px;
    }

    #masthead .tl-header-hotline-icon svg {
        width: 19px;
        height: 19px;
    }

    #masthead .tl-header-hotline-label {
        display: none;
    }

    #masthead .tl-header-hotline-number {
        font-size: 14px;
    }

    #masthead .hide-for-medium.flex-right .cart-item .header-cart-link {
        padding: 0 10px !important;
    }
}

@media screen and (max-width: 849px) {
    #masthead .tl-header-hotline-item {
        display: none !important;
    }

    /* Panel giỏ hàng mobile: nền trắng và chữ có độ tương phản cao. */
    body .mfp-wrap.off-canvas .mfp-content.off-canvas-cart,
    body .mfp-content.off-canvas-cart,
    body .off-canvas-cart #cart-popup,
    body .off-canvas-cart .cart-popup-inner,
    body .off-canvas-cart .widget_shopping_cart,
    body .off-canvas-cart .woocommerce-mini-cart {
        background: #fff !important;
        color: #1d2730 !important;
    }

    body .off-canvas-cart .cart-popup-title,
    body .off-canvas-cart .cart-popup-title .heading-font,
    body .off-canvas-cart .woocommerce-mini-cart-item,
    body .off-canvas-cart .woocommerce-mini-cart-item a:not(.remove),
    body .off-canvas-cart .woocommerce-mini-cart-item .quantity,
    body .off-canvas-cart .woocommerce-mini-cart-item .amount,
    body .off-canvas-cart .woocommerce-mini-cart__total,
    body .off-canvas-cart .woocommerce-mini-cart__total strong,
    body .off-canvas-cart .woocommerce-mini-cart__total .amount {
        color: #1d2730 !important;
    }

    body .off-canvas-cart .woocommerce-mini-cart-item,
    body .off-canvas-cart .woocommerce-mini-cart__total {
        border-color: #e5e9ec !important;
    }

    body .off-canvas-cart .mfp-close {
        background: #f2f5f7 !important;
        color: #002748 !important;
        opacity: 1 !important;
    }

    body .off-canvas-cart .woocommerce-mini-cart-item .remove {
        border-color: #d71920 !important;
        color: #d71920 !important;
    }

    body .off-canvas-cart .quantity input.qty {
        border-color: #d8e0e5 !important;
        background: #fff !important;
        color: #1d2730 !important;
    }

    body .off-canvas-cart .quantity .minus,
    body .off-canvas-cart .quantity .plus {
        border-color: #d8e0e5 !important;
        background: #f2f5f7 !important;
        color: #002748 !important;
    }
}