/*
 Theme Name: Medilazar Child
 Description: medilazar Child Theme
 Author: Litafa
 Template: medilazar
 Version: 1.0.0
*/

@import url("../medilazar/style.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   BASE
   ========================================================================== */
body {
    background-color: #EAEFFA !important;
    line-height: 1.4rem !important;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    color: #020b27;
}

/* Related products - orange product button used on the homepage. */
.single-product .related.products ul.products li.product a.button,
.single-product .related.products ul.products li.product .add_to_cart_button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 36px;
    margin-top: 20px;
    padding: 8px 12px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: linear-gradient(90deg, #ff7d41 0%, #ff5000 100%) !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    box-shadow: none !important;
}

.single-product .related.products ul.products li.product a.button:hover,
.single-product .related.products ul.products li.product a.button:focus,
.single-product .related.products ul.products li.product .add_to_cart_button:hover,
.single-product .related.products ul.products li.product .add_to_cart_button:focus {
    background: linear-gradient(90deg, #ff8b55 0%, #e94800 100%) !important;
    color: #fff !important;
    opacity: .95;
}

@media (max-width: 767px) {
    .single-product .related.products ul.products li.product a.button,
    .single-product .related.products ul.products li.product .add_to_cart_button {
        margin-top: 10px;
        font-size: 12px;
        border-radius: 15px !important;
    }
}

.product-reviews-section {
    margin-top: 40px;
}

h1, h2, h3, h4, h5, h6,
.woocommerce-loop-product__title,
.product_title,
.entry-title,
.widget-title,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title {
    font-family: "Inter", sans-serif;
}

input, textarea, select, button,
.button, .btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    font-family: "Inter", sans-serif;
}

body.page-template-default article.type-page {
    background-color: inherit !important;
    padding: 0 !important;
}
body.opal-content-layout-2cl #content .wrap{margin: 0;}
/* ==========================================================================
   HOMEPAGE
   ========================================================================== */
body.home h2.elementor-heading-title {
    font-size: 1.5rem;
    line-height: 1.5rem;
    /*     letter-spacing: .0025em; */
    color: var(--e-global-color-primary);
    font-weight: 600;
    /*     text-transform: uppercase; */
}

body.home .site-content-contain .e-con.e-flex>.e-con-inner,
body.home .site-content-contain section.elementor-section .elementor-container {
    padding: 1.5rem 0;
}

body.home .elementor-products-grid ul.products.elementor-grid li.product {
    display: contents;
}

body.opal-content-layout-2cl #primary{padding: 0;}

/* ==========================================================================
   ELEMENTOR NAV & WIDGETS
   ========================================================================== */
.elementor-menu-toggle:not(:hover) .menu-toggle-title,
.elementor-menu-toggle:not(:hover) i {
    color: white
}
.elementor-menu-toggle{background-color: inherit !important;}

.elementor-nav-menu--dropdown,
.elementor-nav-menu--dropdown .elementor-nav-menu--main {
    font-family: Arial !important;
}

/* Mũi tên submenu (.sub-arrow > .opal-icon-angle-right) nằm trong menu nên bị
   font-family: Arial !important ở trên ghi đè, khiến glyph \e006 thành ô vuông.
   Trả lại font icon cho các phần tử icon bên trong menu. */
.elementor-nav-menu--dropdown [class*="opal-icon-"],
.elementor-nav-menu--dropdown [class*="opal-icon-"]:before,
.elementor-nav-menu--dropdown .sub-arrow,
.elementor-nav-menu--dropdown .sub-arrow:before,
.elementor-nav-menu--dropdown .elementor-nav-menu--main [class*="opal-icon-"],
.elementor-nav-menu--dropdown .elementor-nav-menu--main [class*="opal-icon-"]:before,
.elementor-nav-menu--dropdown .elementor-nav-menu--main .sub-arrow,
.elementor-nav-menu--dropdown .elementor-nav-menu--main .sub-arrow:before {
    font-family: opal-icon !important;
}

.elementor-brand-wrapper .elementor-brand-content {
    border: 1px solid #B8C5D6;
    border-radius: 10px !important;
}

.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title {
    color: #1d2a38;
}


/* ==========================================================================
   HOME BANNER SLIDER
   ========================================================================== */
.slider-2banners .swiper-slide-inner {
    height: 270px !important;
}

.slider-2banners .swiper-slide-inner img {
    height: 100%;
    border-radius: 6px;
}

.slider-2banners .elementor-widget-image {
    height: calc((270px - 10px) / 2) !important;
    flex: 1;
    min-height: 0;
}

.slider-2banners .elementor-widget-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    flex: 1;
    border-radius: 6px;
}

/* ==========================================================================
   OWL CAROUSEL
   ========================================================================== */
   .woocommerce-product-carousel ul.owl-drag.products .owl-item {
    margin-right: 20px !important; /* hoặc giá trị bạn muốn */
}
.owl-carousel:not(.owl-loaded) {
    opacity: 0;
    height: 100px;
}

.owl-carousel.owl-loaded {
    opacity: 1;
    transition: fadeIn 0.3s ease;
}

/* ==========================================================================
   PRODUCTS GRID & BLOCK
   ========================================================================== */

@media (max-width: 767px) {
    .tax-product_brand ul.products {
        margin-right: 0px !important;
        margin-left: 0px !important;

    }
}
   ul.products {
    display: flex;
    flex-wrap: wrap;
}

ul.products>li.product {
    display: flex;
    flex-direction: column;
}

ul.products>li.product>.product-block {
    flex-grow: 1;
}

.columns-4 ul.products>li,
.post-type-archive-product .columns-4 ul.products>li {
    padding: 0 10px !important;
    margin-bottom: 20px;
}

.product-block {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-block .caption {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0 10px 15px !important;
}

.product-block .product-footer {
    margin-top: auto;
}

.shop-action {
    align-items: center;
}
.related, .upsells {
    padding: 0;
    background-color: transparent;
    /* border-radius: 6px; */
}
.related > h2:first-child, .upsells > h2:first-child{
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--e-global-color-primary);
    margin-bottom: 20px;
}
.owl-theme .owl-nav [class*="owl-"]:before{
    color: var(--e-global-color-primary);
    border: 1px solid var(--e-global-color-primary);
}
.owl-theme .owl-nav [class*="owl-"]:hover,
.owl-theme .owl-nav [class*="owl-"]:hover:before {
  color: var(--e-global-color-primary);
  background: #fff;
  border-color: var(--e-global-color-primary);
}
/* ==========================================================================
   PRODUCT TITLE
   ========================================================================== */
/* Tên sản phẩm: tối đa 3 dòng, tên ngắn vẫn chiếm đủ chỗ 3 dòng nên giá ở
   mọi thẻ đều bắt đầu cùng một vị trí.

   min-height 3.6rem = 3 dòng × 1rem × line-height 1.2 (theme cha đặt cỡ chữ
   1rem cho .columns-5/6 trong woocommerce.css). Đổi số dòng thì phải sửa cả
   -webkit-line-clamp lẫn min-height, lệch nhau sẽ thừa/thiếu khoảng trắng. */
li.product .woocommerce-loop-product__title {
    overflow: hidden;
    white-space: normal;
    min-height: 3.6rem;
    line-height: 1.2;
}

/* Clamp phải đặt trên <a>, KHÔNG đặt trên <h3>.

   .caption là flex container (theme cha + style.css bên dưới), nên mọi con
   trực tiếp của nó bị trình duyệt "blockify": display:-webkit-box khai báo
   trên <h3> bị ép thành flow-root, clamp mất tác dụng — kể cả khi thêm
   !important. Đã kiểm chứng bằng Chrome: ép inline style vẫn ra flow-root.

   Hậu quả trước khi sửa: tên quá dài (ví dụ "Vitamin D3 K2 MK7 200IU/15µg
   (Vegan) L/10ml SUNDAY NATURALS Hỗ trợ xương răng cho trẻ 0+") tràn thành
   4 dòng -> cao 64.8px thay vì 57.6px -> giá bị đẩy xuống 4px so với các
   thẻ cùng hàng.

   <a> là con của <h3> chứ không phải của .caption nên không bị blockify,
   clamp hoạt động bình thường. */
li.product .woocommerce-loop-product__title a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Giá phải nằm sát đáy, ngay trên nút.

   .caption đã là flex-column và .product-footer đã có margin-top:auto (xem
   phần PRODUCT BLOCK bên dưới + woocommerce.css của theme cha), nên NÚT vốn
   đã thẳng hàng. Riêng .price nằm lọt giữa tên và nút, không có gì neo, nên
   thẻ nào tên ngắn thì giá bị kéo lên — đó là chỗ lệch thật sự.

   margin-top:auto ở đây nuốt hết khoảng trống thừa phía trên giá, đẩy cả
   cụm giá + nút xuống đáy. Phòng khi sau này tên đổi sang số dòng khác. */
li.product .caption > .price {
    margin-top: auto;
}

/* Chốt chiều cao khối giá = 52px cho MỌI sản phẩm.

   NGUYÊN NHÂN LỆCH THẬT SỰ (đo bằng Chrome trên /shop/, không phải suy đoán):
   không phải do tên 2 hay 3 dòng — tên đã bị clamp nên luôn cao 57.6px.
   Chỗ lệch nằm ở khối giá:
     - Sản phẩm CÓ giảm giá : giá gốc gạch ngang xuống dòng riêng -> cao 52px
     - Sản phẩm KHÔNG giảm  : chỉ một dòng giá             -> cao 28px
   Chênh 24px, nên thẻ không giảm giá có giá nằm thấp hơn 12px so với hàng
   xóm (margin-top:auto chia đôi phần trống).

   CĂN LÊN ĐỈNH, KHÔNG PHẢI ĐÁY:
   theme này in GIÁ BÁN TRƯỚC, giá gốc gạch ngang xuống dòng dưới (xem rule
   "Sale price first" ở mục PRODUCT BLOCK bên dưới). Vậy dòng cần thẳng hàng
   là dòng TRÊN CÙNG — chính là giá khách phải trả.

   Dùng flex-end thì thẻ một-giá bị đẩy xuống đáy khối, lệch 24px so với giá
   bán của thẻ có giảm giá. Phải là flex-start: mọi giá bán bắt đầu cùng một
   đường, chỗ trống 24px của thẻ một-giá nằm ở dưới (nơi thẻ khác để giá gốc). */
li.product .caption > .price {
    min-height: 52px;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
}
.single-product div.type-product .product_meta .posted_in{font-size: 16px;}

/* Product Meta Grid */
.product-meta-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    align-items: start;
    margin-bottom: 15px;
}
.product-meta-grid .meta-row {
    display: contents;
}
.product-meta-grid .meta-label {
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}
.product-meta-grid .meta-value {
    color: #555;
}
.product-meta-grid .meta-value a {
    color: var(--e-global-color-primary);
    font-weight: 600;
}
/* Declaration Link - outside grid */
.product_meta .declaration-link {
    margin-bottom: 15px;
}
.product_meta .declaration-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--e-global-color-primary);
    font-weight: 600;
    font-size: 18px;
    padding: 8px 0;
}
.product_meta .declaration-link a:hover {
    text-decoration: underline;
}
.product_meta .declaration-link .check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: #22c55e;
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 12px;
}
.single-product div.type-product{margin-bottom: 0;}
.single-product .woocommerce-tabs{margin-top: -30px;}
li.product .woocommerce-loop-product__title a {
    font-size: 1rem;
}
.single-product div.type-product .product-brand{margin-bottom: 12px;display: block; color: var(--e-global-color-primary);font-weight: 600;}
.single-product div.type-product .product_title{margin-bottom: 2px;}
.skx-product-review-summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 4px 0 12px;
    color: #555;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
}
.skx-product-review-summary:hover,
.skx-product-review-summary:focus {
    color: var(--e-global-color-primary);
}
.skx-product-review-summary__star {
    color: #f5a623;
    font-size: 17px;
}
.skx-product-review-summary__separator {
    color: #aaa;
}
.single-product div.type-product .summary .price{font-size: 2rem;}
.single-product div.type-product .product_meta .posted_in a,.single-product div.type-product .product-brand a{color: var(--e-global-color-primary);font-weight: 600;}
/* ==========================================================================
   PRODUCT PRICE
   ========================================================================== */
.single-product div.product .summary .skx-single-price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.single-product div.product .summary .onsale {
    position: static;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    width: fit-content;
    margin: 0;
    background-color: #f97316;
    color: #fff;
}

.single-product div.product .summary .skx-single-price-row .price {
    display: inline-flex !important;
    vertical-align: middle;
    width: auto;
    margin: 0;
}

.single-product div.product .summary .skx-single-price-row .price ins,
.single-product div.product .summary .skx-single-price-row .price > .amount {
    color: var(--e-global-color-primary) !important;
}

.single-product div.product .summary .skx-single-price-row .price ins .amount,
.single-product div.product .summary .skx-single-price-row .price > .amount {
    color: inherit !important;
}

.single-product .product-inner > .onsale {
    display: none !important;
}

ul.products li.product .price bdi,
.single-product div.type-product .summary .price,.product-block .price bdi {
    color: var( --e-global-color-primary );
}

/* Sale price first, regular (struck-through) price below. */
.product-block .price {
    display: flex;
    flex-direction: column;
    align-items: start !important;
    margin-bottom: 1rem;
}

.product-block .price ins,.product-block .price bdi {
    order: 1;
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    background-color: transparent;
    text-align: center;
}

.product-block .price del {
    order: 2;
    display: block;
}

.product-block .price del bdi {
    color: #657384 !important;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5rem;
}
.products li.product .posted_in, .elementor-wc-products li.product .posted_in{
    display: none;
    height: 0;
}

/* ==========================================================================
   ADD TO CART BUTTON
   ========================================================================== */
.product-footer a[class*="product_type_"] {
    color: #fff;
    text-transform: inherit !important;
    padding: 8px 12px !important;
    background-color: var(--e-global-color-primary);
    margin-top: 10px !important;
    margin-right: 0 !important;
    justify-content: center;
    width: 100% !important;
    font-size: 0.92rem !important;
}

.outofstock .product-footer a[class*="product_type_"] {
    display: none;
}

.product-footer a[class*="product_type_"]:before,
.single-product .single_add_to_cart_button.disabled[type="submit"]:before,
.single-product .single_add_to_cart_button:before {
    display: none !important;
}

.woocommerce .yith-quick-view .yith-quick-view-content.woocommerce div.summary .single_add_to_cart_button {
    border-radius: 30px;
}

/* ==========================================================================
   WISHLIST
   ========================================================================== */
.yith-quick-view-content.woocommerce div.summary .product_meta {
    display: none
}

.yith-wcwl-add-to-wishlist-button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    position: relative;
    white-space: nowrap;
    font-size: 0;
    margin-bottom: 5px;
    background-color: #f3f5f9;
    border: 1px solid #f3f5f9;
}

.yith-wcwl-add-to-wishlist-button:is(button) {
    padding: 6px;
}

.yith-wcwl-add-to-wishlist-button:is(button) svg,
.yith-wcwl-add-to-wishlist-button:is(button) img {
    width: 18px;
    height: 18px;
}

.yith-wcwl-add-to-wishlist-button--added .yith-wcwl-icon {
    color: #F0592C;
}

.yith-wcwl-add-to-wishlist-button:not(.yith-wcwl-add-to-wishlist-button--added):hover {
    background-color: #F0592C;
    color: white;
}

.product-transition .group-action {
    top: 10px;
    right: 10px;
}

/* ==========================================================================
   SINGLE PRODUCT
   ========================================================================== */
body.single-product .woocommerce-product-carousel ul.products {
    padding: 0;
    margin: 0;
}

.single-product div.type-product .woocommerce-product-gallery .flex-control-thumbs li img {
    max-width: 100px;
    max-height: 100px;
}

/* ==========================================================================
   PRODUCT TABS & READ MORE
   ========================================================================== */
.detail-content-inner #left-tabs {
    position: sticky;
    position: -webkit-sticky;
    top: 0.75rem;
}

.detail-content-inner #right-content {
    position: relative;
}

.detail-content-inner .detail-tabs {
    list-style: none;
    margin: 0;
    padding: 0;
}

.detail-content-inner .detail-tabs li:not(:last-child) {
    border-bottom: 1px solid #e4e8ed;
}

.detail-content-inner .detail-tabs li.active,
.detail-content-inner .detail-tabs li:has(+ .active) {
    border-bottom: none;
}

.detail-content-inner .detail-tabs li a {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    padding: 16px;
    border-radius: 8px;
    color: #4a4f63;
    display: block;
}

.detail-content-inner .detail-tabs li.active a {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    background: #edf0f3;
    letter-spacing: 0.005em;
    color: #020b27;
}

.detail-content-inner .col-md-3 {
    padding-right: 35px;
    padding-left: 5px;
}

.site-main .woocommerce-tabs.wc-tabs-wrapper .detail-tabs {
    position: sticky;
    top: 20px;
}

.single-product div#tab-description {
    overflow: hidden;
    position: relative;
    padding-bottom: 25px;
}

.single-product .tab-panels div#tab-description.panel:not(.active) {
    height: 0 !important;
}

.fix_height {
    max-height: 620px;
    position: relative;
    overflow: hidden;
}

.devvn_readmore_flatsome {
    text-align: center;
    cursor: pointer;
    position: absolute;
    z-index: 10;
    bottom: 0;
    width: 100%;
    background: #fff;
}

.devvn_readmore_flatsome:before {
    height: 55px;
    margin-top: -45px;
    content: "";
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    display: block;
}

.devvn_readmore_flatsome a {
    color: #318a00;
    display: block;
}

.devvn_readmore_flatsome a:after {
    content: "";
    width: 0;
    right: 0;
    border-top: 6px solid #318a00;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    display: inline-block;
    vertical-align: middle;
    margin: -2px 0 0 5px;
}

.devvn_readmore_flatsome_less a:after {
    border-top: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #318a00;
}

.devvn_readmore_flatsome_less:before {
    display: none;
}
.pbr-social-share {
    display: none;
}
/* ==========================================================================
   WPF FILTER
   ========================================================================== */
div.wpfMainWrapper[data-filter="1"] #wpfBlock_3 .irs {
    display: none;
}

.wpfFilterVerScroll::-webkit-scrollbar {
    width: 5px !important;
}

.wpfFilterVerScroll::-webkit-scrollbar-track {
    background-color: #f1f1f1 !important;
    border: none !important;
}

.wpfFilterVerScroll::-webkit-scrollbar-thumb {
    background-color: #888 !important;
    border: none !important;
}

.wpfFilterVerScroll::-webkit-scrollbar-thumb:hover {
    background-color: #555 !important;
}

.wpfFilterTitle {
    min-height: 35px !important;
}

/* ==========================================================================
   HEADER ACCOUNT & CART
   ========================================================================== */
.site-header-account,
.elementor-widget-opal-header-group .account {
    display: flex;
}

.site-header-account .account-dropdown .account-wrap,
.site-header-cart .widget_shopping_cart {
    --right: 20% !important;
}

.elementor-widget-opal-header-group.elementor-align-right .elementor-widget-container {
    margin: 0 !important;
    gap: 30px;
}

.elementor-widget-opal-header-group .elementor-widget-container>div {
    padding: 0 !important;
}

button.site-header-register,
button.site-header-login {
    border: 1px solid #008080;
    width: 120px;
    height: 40px;
    flex: 1;
    padding: 0 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button.site-header-register {
    background-color: #008080;
    color: white;
}

button.site-header-login {
    background-color: white;
    color: #008080;
}

/* ==========================================================================
   LOGIN POPUP
   ========================================================================== */
.login-popup-close-btn {
    content: "x";
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
    cursor: pointer;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    color: #2d2d2d;
    background-color: white;
}

.site-header-account .login-popup .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(2, 11, 39, .5);
    z-index: 150;
    visibility: visible;
    transition: all 0.35s ease;
    pointer-events: auto;
}

.site-header-account .login-popup .account-dropdown {
    text-align: left;
    right: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    pointer-events: auto;
    opacity: 1;
    z-index: 200;
    visibility: visible;
    color: #2d2d2d;
    padding: 50px;
    background: #fff;
    transition: all 0.35s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.site-header-account .login-popup .account-dropdown .account-inner {
    width: 350px;
    padding: 0;
}

.site-header-account .login-popup .account-dropdown .account-inner .woocommerce-error {
    bottom: 0 !important;
    animation: none;
    transform: none;
}

/* Lưu ý: giới hạn :not(.list-inline-item) để không đụng vào
   <li class="list-inline-item separator"> của breadcrumb */
.separator:not(.list-inline-item) {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 15px 0;
}

.separator:not(.list-inline-item)::before,
.separator:not(.list-inline-item)::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #7D879C;
}

.separator:not(.list-inline-item):not(:empty)::before {
    margin-right: 10px;
}

.separator:not(.list-inline-item):not(:empty)::after {
    margin-left: 10px;
}

/* ==========================================================================
   CART BUTTON
   ========================================================================== */
.wc-block-cart__submit-button,
.wc-block-cart__submit-button:hover {
    background-color: #008080;
    color: white;
}

/* ==========================================================================
   WOOCOMMERCE CART PAGE
   ========================================================================== */
.woocommerce-cart .woocommerce-cart-form {
    background: #fff;
    border-radius: 10px;
    /* padding: 20px; */
    margin-bottom: 30px !important;
}
.woocommerce-cart .cart-collaterals {
    margin-top: 0 !important;
}
.woocommerce-cart .cart-collaterals .cart_totals {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
}
.woocommerce-cart .cart-collaterals .cross-sells {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-top: 30px;
}
.woocommerce-cart table.shop_table {
    border: none;
    margin: 0;
}
.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td {
    border: none;
    border-bottom: 1px solid #f0f0f0;
    padding: 15px 10px;
}
.woocommerce-cart table.shop_table th {
    font-weight: 600;
    font-size: 14px;
    color: #555;
}
.woocommerce-cart table.shop_table td.actions {
    border-bottom: none;
    padding-top: 20px;
}
.woocommerce-cart .cart_totals h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}
.woocommerce-cart .cart_totals table {
    border: none;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
    border: none;
    padding: 10px 0;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    background: var(--e-global-color-primary);
    border-radius: 8px;
    font-weight: 600;
}

.cart-collaterals:after, .cart-collaterals:before{display: none;}
table.cart:not(.wishlist_table) td.product-remove a.remove{
    color: red;
}
/* Cart Quantity Input */
table.cart:not(.wishlist_table) .quantity {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    width: fit-content;
    margin: 0 auto;
}
table.cart:not(.wishlist_table) .quantity input.qty {
    width: 50px;
    height: 40px;
    border: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    -moz-appearance: textfield;
    appearance: textfield;
}
table.cart:not(.wishlist_table) .quantity input.qty::-webkit-outer-spin-button,
table.cart:not(.wishlist_table) .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
table.cart:not(.wishlist_table) .quantity .qty-btn,
table.cart:not(.wishlist_table) .quantity button {
    width: 36px;
    height: 40px;
    border: none;
    background: #f5f5f5;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
table.cart:not(.wishlist_table) .quantity .qty-btn:hover,
table.cart:not(.wishlist_table) .quantity button:hover {
    background: var(--e-global-color-primary);
    color: #fff;
}

/* ==========================================================================
   RESPONSIVE - MOBILE
   ========================================================================== */
@media (max-width: 767px) {

    body.home .site-content-contain .e-con.e-flex>.e-con-inner,
    body.home .site-content-contain section.elementor-section .elementor-container {
        padding: 1rem 0;
    }

    .slider-2banners .swiper-slide-inner,
    .slider-2banners .elementor-widget-image {
        height: auto !important;
    }

    .slider-2banners .elementor-widget-image img {
        height: auto;
    }

    .post-type-archive-product .columns-4 ul.products>li {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .related,
    .upsells {
        padding: 20px 15px 15px !important;
    }
}

/* ==========================================================================
   VERTICAL NAVIGATION MENU FIX
   ========================================================================== */
.vertical-navigation .vertical-menu {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.vertical-navigation-header:hover + .vertical-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.vertical-menu:hover {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.elementor-nav-menu .sub-arrow{
    margin-block-end:0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   MOBILE MENU CANVAS
   ========================================================================== */
.mp-menu .mp-back.mp-close {
    background-color: var(--e-global-color-primary) !important;
    padding: 10px 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.mp-menu .mp-back.mp-close .mp-close-btn {
    color: white !important;
    font-size: 32px !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    padding: 5px 10px !important;
    cursor: pointer !important;
    line-height: 1 !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mp-menu .mp-back.mp-close .mp-close-btn:hover {
    opacity: 0.8 !important;
}

.mp-menu .mp-back.mp-close .mp-close-btn i {
    color: white !important;
    font-size: 26px !important;
}


@media (max-width: 768px) {
    .site-header-account .login-popup .account-dropdown {
        width: 100%;
        height: 100%;
        padding: 20px;
    }
}

/* ==========================================================================
   BRAND DESCRIPTION LAYOUT
   ========================================================================== */
/* Ẩn tiêu đề mặc định của WooCommerce cho brand taxonomy */
.tax-product_brand .woocommerce-products-header__title {
    display: none;
}

.term-description.brand-description-custom {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    align-items: flex-start;
}

.brand-thumbnail-wrapper {
    flex-shrink: 0;
    width: 200px;
}

.brand-thumbnail-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

.brand-content-wrapper {
    flex: 1;
    min-width: 0;
}

.brand-title {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 15px 0;
    color: #1d2a38;
}

.brand-description-text {
    font-size: 15px;
    line-height: 1.6;
    color: #4a4f63;
    max-height: 100px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s ease;
}

.brand-description-text.expanded {
    max-height: none;
}

.brand-description-text.has-overflow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
}

.brand-description-text.expanded::after {
    display: none;
}

.brand-read-more-wrapper {
    text-align: center;
    margin-top: 15px;
}

.brand-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--e-global-color-primary);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.brand-read-more:hover {
    color: #0066a3;
    text-decoration: underline;
}

.brand-read-more .read-more-icon {
    font-style: normal;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.brand-read-more.expanded .read-more-icon {
    transform: rotate(180deg);
}

@media (max-width: 767px) {
    .term-description.brand-description-custom {
        flex-direction: column;
        gap: 20px;
        padding: 15px;
    }

    .brand-thumbnail-wrapper {
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
    }

    .brand-title {
        font-size: 24px;
        text-align: center;
    }
}

/* ==========================================================================
   CUSTOM BRAND SORTING
   ========================================================================== */
/* Ẩn các element sorting mặc định trên trang brand */
 .woocommerce-result-count,
 .gridlist-toggle,
 .woocommerce-ordering,.osf-active-filters {
    display: none !important;
}

/* Wrapper cho sorting - căn phải */
.tax-product_brand .osf-sorting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.tax-product_brand .osf-sorting .filter-toggle {
    margin-right: auto;
}

/* Custom sorting buttons */
.custom-brand-sorting {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
}

.custom-brand-sorting .sorting-label {
    font-size: 15px;
    font-weight: 500;
    color: #1d2a38;
}

.custom-brand-sorting .sorting-btn {
    display: inline-block;
    padding: 6px 10px;
    background-color: #f3f5f9;
    color: #4a4f63;
    border: 1px solid #e4e8ed;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    white-space: nowrap;
}

.custom-brand-sorting .sorting-btn:hover {
    background-color: #e4e8ed;
    border-color: #d1d7e0;
}

.custom-brand-sorting .sorting-btn.active {
    background-color: var(--e-global-color-primary);
    color: #fff;
    border-color: var(--e-global-color-primary);
}

/* Mobile: icon filter bên trái, sorting bên phải */
@media (max-width: 767px) {
    /* Áp dụng cho cả trang brand lẫn trang shop/tag (không có .tax-product_brand) */
    /* Cho phép xuống dòng: filter-toggle 1 dòng riêng, 3 nút sắp xếp dòng dưới */
    .osf-sorting {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    /* filter-toggle chiếm trọn 1 dòng phía trên */
    .osf-sorting .filter-toggle,
    .tax-product_brand .osf-sorting .filter-toggle {
        flex: 0 0 100%;
        width: 100%;
        margin-right: 0;
    }

    /* 3 nút chia đều 3 cột trên dòng riêng bên dưới */
    .custom-brand-sorting {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-left: 0;
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
    }

    /* display:none nên label bị loại khỏi grid, 3 cột khớp đúng 3 nút */
    .custom-brand-sorting .sorting-label {
        display: none;
    }

    .custom-brand-sorting .sorting-btn {
        /* font-size: 11px; */
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 6px 4px;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Hiển thị 2 cột sản phẩm trên mobile cho trang brand */
    .tax-product_brand ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    .tax-product_brand ul.products > li.product {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* ========================================
   Single Product Quantity Input Style
   ======================================== */
.single-product .qty-control,
.qty-control {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 36px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 34px !important;
    background: #fff !important;
    overflow: hidden !important;
    width: auto !important;
    padding: 0 !important;
}

.single-product .qty-control .qty-btn,
.qty-control .qty-btn {
    width: 35px !important;
    height: 34px !important;
    border: none !important;
    background: transparent !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 34px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6b7280 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.single-product .qty-control .qty-btn:active,
.qty-control .qty-btn:active {
    color: var(--e-global-color-primary) !important;
}

.single-product .qty-control .qty-input,
.single-product .qty-control .qty-input:focus,
.single-product .qty-control .qty-input:active,
.single-product .qty-control .qty-input:focus-visible,
.qty-control .qty-input,
.qty-control .qty-input:focus,
.qty-control .qty-input:active,
.qty-control .qty-input:focus-visible {
    width: 50px !important;
    height: 34px !important;
    border-left: 1px solid #d1d5db !important;
    border-right: 1px solid #d1d5db !important;
    border-top: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #333 !important;
    -moz-appearance: textfield !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: 0 !important;
    outline-style: none !important;
    outline-width: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    padding: 0.5rem !important;
    margin: 0 !important;
}

.single-product .qty-control .qty-input::-webkit-outer-spin-button,
.single-product .qty-control .qty-input::-webkit-inner-spin-button,
.qty-control .qty-input::-webkit-outer-spin-button,
.qty-control .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    display: none !important;
}

/* Mobile responsive for quantity */
@media (max-width: 767px) {
    .single-product .qty-control,
    .qty-control {
        height: 32px !important;
    }

    .single-product .qty-control .qty-btn,
    .qty-control .qty-btn {
        width: 35px !important;
        height: 30px !important;
        font-size: 16px !important;
        line-height: 30px !important;
    }

    .single-product .qty-control .qty-input,
    .qty-control .qty-input {
        width: 40px !important;
        height: 30px !important;
        font-size: 14px !important;
    }
}

/* ==========================================================================
   INSPECTOR BOX - Single Post
   ========================================================================== */
.inspector-box {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #f9fbff;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.inspector-box .inspector-avatar {
    flex-shrink: 0;
}

.inspector-box .inspector-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.inspector-box .inspector-info {
    flex: 1;
    min-width: 0;
}

.inspector-box .inspector-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    margin-bottom: 2px;
}

.inspector-box .inspector-label svg {
    flex-shrink: 0;
}

.inspector-box .inspector-name {
    margin: 0 0 5px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1d2a38;
    line-height: 1.3;
    padding-top: 5px;
}

.inspector-box .inspector-description {
    font-size: 14px;
    line-height: 1.5;
    color: #4a4f63;
    margin: 0;
}

.inspector-box .inspector-description p {
    margin: 0;
}

@media (max-width: 767px) {
    .inspector-box {
        padding: 12px 15px;
        gap: 12px;
    }

    .inspector-box .inspector-avatar img {
        width: 50px;
        height: 50px;
    }

    .inspector-box .inspector-name {
        font-size: 15px;
    }

    .inspector-box .inspector-description {
        font-size: 13px;
    }
}

/* ==========================================================================
   BREADCRUMB (Rank Math)
   Site chỉ dùng một hệ breadcrumb duy nhất là Rank Math — xem inc/breadcrumbs.php.
   Markup: <nav class="rank-math-breadcrumb"><p><a>..</a><span class="separator">..
   CSS cũ của theme cha nhắm vào <li> của breadcrumb tự viết nên không còn khớp.
   ========================================================================== */
/* Luôn nằm trên MỘT dòng: không xuống hàng, trail dài thì cuộn ngang. */
.breadcrumb .rank-math-breadcrumb p {
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.breadcrumb .rank-math-breadcrumb p::-webkit-scrollbar {
    display: none;
}

/* Không cho crumb bị bóp lại khi thiếu chỗ. */
.breadcrumb .rank-math-breadcrumb a,
.breadcrumb .rank-math-breadcrumb .last,
.breadcrumb .rank-math-breadcrumb .separator {
    flex: 0 0 auto;
}

/* Theme cha đặt .breadcrumb a{display:block} khiến các link xuống dòng. */
.breadcrumb .rank-math-breadcrumb a {
    display: inline;
}

/* Ghi đè rule .separator dạng đường kẻ ngang ở trên: trong breadcrumb
   .separator chỉ là dấu phân cách giữa hai crumb. */
.breadcrumb .rank-math-breadcrumb .separator {
    display: inline;
    margin: 0 6px;
    text-align: initial;
}

.breadcrumb .rank-math-breadcrumb .separator::before,
.breadcrumb .rank-math-breadcrumb .separator::after {
    content: none;
    border: 0;
    margin: 0;
}

.breadcrumb .rank-math-breadcrumb .last {
    display: inline;
}

@media (max-width: 767px) {
    .breadcrumb .rank-math-breadcrumb .separator {
        margin: 0 4px;
    }
}