/**
 * Custom CSS for Ecolife Style
 * 
 * Theme Name: Ecological
 * Theme URI: https://mygoalthemes.com/demo/ecological
 * Author: GoalTheme
 * Version: 1.0.0
 * 
 * Add your custom CSS styles below this comment.
 * This file will be loaded after all other theme stylesheets.
 */

/* ============================================
   CUSTOM STYLES - START EDITING BELOW
   ============================================ */

/* Example: Custom button styles */
/*
.custom-button {
    background-color: #EF5958;
    color: #fff;
    padding: 12px 30px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.custom-button:hover {
    background-color: #31503C;
    transform: translateY(-2px);
}
*/

/* Example: Custom header adjustments */
/*
.site-header {
    padding: 20px 0;
}
*/

/* Example: Custom WooCommerce styles */
/*
.woocommerce .product .price {
    color: #EF5958;
    font-size: 24px;
    font-weight: 700;
}
*/

/* Example: Responsive adjustments */
/*
@media (max-width: 768px) {
    .custom-element {
        font-size: 14px;
    }
}
*/

/* ============================================
   END CUSTOM STYLES
   ============================================ */

   body {
    background: #fff;
}

.widget-categories-box .categories-item {
    margin-bottom: 20px;
}

/* ============================================
   GOAL PRODUCTS WIDGET - ADD TO CART DISPLAY
   ============================================ */

/* Hiển thị nút Add to Cart luôn (không cần hover) */
.widget-products.add-cart-always-visible .product-block.grid .add-cart>.button,
.widget-products.add-cart-always-visible .product-block.grid .add-cart>.added_to_cart {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg) !important;
}

.widget-products.add-cart-always-visible .product-block .add-cart {
    position: relative !important;
    margin-top: 15px !important;
    bottom: auto !important;
}

/* Đảm bảo nút luôn hiển thị ngay cả khi không hover */
.widget-products.add-cart-always-visible .product-block .block-inner:not(:hover) .add-cart>.button,
.widget-products.add-cart-always-visible .product-block .block-inner:not(:hover) .add-cart>.added_to_cart {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg) !important;
}

/* ============================================
   THẺ SẢN PHẨM GRID — ADD TO CART: chữ trắng, nền xanh (khớp link/theme)
   Theme gốc: woocommerce.css đặt nền #fff + chữ var(--ecosoap-link-color)
   ============================================ */
.product-block.grid .add-cart > .button,
.product-block.grid .add-cart > .added_to_cart,
.product-block.grid .add-cart > a.button,
.product-block.grid .add-cart > a.added_to_cart {
    background-color: var(--ecosoap-link-color) !important;
    color: #fff !important;
    border: 1px solid var(--ecosoap-link-color) !important;
}

.product-block.grid .add-cart > .button:hover,
.product-block.grid .add-cart > .added_to_cart:hover,
.product-block.grid .add-cart > a.button:hover,
.product-block.grid .add-cart > a.added_to_cart:hover,
.product-block.grid .add-cart > .button:focus,
.product-block.grid .add-cart > .added_to_cart:focus,
.product-block.grid .add-cart > a.button:focus,
.product-block.grid .add-cart > a.added_to_cart:focus {
    background-color: var(--ecosoap-link-hover-color, var(--ecosoap-link-color)) !important;
    color: #fff !important;
    border-color: var(--ecosoap-link-hover-color, var(--ecosoap-link-color)) !important;
}

.product-block.grid .add-cart .added_to_cart:before {
    color: #fff !important;
}

/* ============================================
   PRODUCT NAME - 2 DÒNG VỚI ELLIPSIS
   ============================================ */

/* FIX: Override CSS gốc .name có -webkit-line-clamp: 1 */
/* Áp dụng với độ ưu tiên cao nhất để override CSS gốc */
.name,
.product-block .name,
.product-block.grid .name,
.product-block.list .name,
.product-block-list .name,
.shop-list-small .name,
.shop-list-normal .name,
.shop-list-smallest .name,
.product-block.grid.grid-v1 .name,
.product-block.grid.grid-v2 .name,
.product-block.grid.grid-v3 .name,
.product-block.grid.grid-v4 .name,
.product-block.grid.grid-v5 .name,
.product-block.grid.grid-v6 .name,
.product-block.grid.grid-v7 .name,
.product-block.grid-deal .name,
.product-block.grid-deal-v2 .name,
.product-block.grid-deal-list .name,
.products-grid .product-block .name,
.products-wrapper .product-block .name,
.products-wrapper-grid .product-block .name,
.products-wrapper-mansory .product-block .name,
.row-products .product-block .name,
.row-products-wrapper .product-block .name,
h3.name,
.product-block h3.name,
.product-block.grid h3.name,
.product-block.list h3.name,
.product-block.grid.grid-v1 h3.name,
.product-block.grid.grid-v2 h3.name,
.product-block.grid.grid-v3 h3.name {
    /* Giới hạn hiển thị 2 dòng với ellipsis - OVERRIDE CSS GỐC */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    /* QUAN TRỌNG: Cho phép text wrap - Override white-space: nowrap */
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;

    /* Cố định chiều cao khối tiêu đề = 2 dòng (line-height 1.5 × 2); line-clamp giới hạn nội dung */
    min-height: 3em !important;
    /* Khoảng 2 dòng */
    line-height: 1.5em !important;
    height: auto !important;
    max-height: none !important;
    /* Bỏ giới hạn max-height nếu có */
}

/* Đảm bảo link bên trong cũng có style tương tự - QUAN TRỌNG: Link phải có style để text wrap */
.product-block .name a,
.product-block.grid .name a,
.product-block.list .name a,
.product-block-list .name a,
.shop-list-small .name a,
.shop-list-normal .name a,
.shop-list-smallest .name a,
.product-block h3.name a,
.product-block.grid h3.name a,
.product-block.list h3.name a,
.product-block-list h3.name a,
.shop-list-normal h3.name a,
h3.name a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.5em !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    /* QUAN TRỌNG: Cho phép text wrap */
}

/* Đảm bảo title-wrapper căn trên */
.product-block .title-wrapper,
.product-block.grid .title-wrapper,
.product-block.list .title-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.widget-brand .slick-slide img {
    opacity: 1;
    filter: grayscale(0);
}

.post-layout .date {
    padding: 0;
}

.post-list-item .list-inner,
.goal-breadscrumb {
    background-color: #ebf5ea;
}

.woocommerce-shop .products .product-block .image {
    border: 1px solid rgba(68, 52, 46, .08);
}

.home .products .product-block .image {
    border: unset;
}

.goal-breadscrumb.has_bg {
    background-color: rgba(122, 182, 192, 0.1);
    position: relative;
}

.goal-breadscrumb.has_bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 0;
}

.goal-breadscrumb.has_bg .wrapper-breads,
.goal-breadscrumb.has_bg .wrapper-breads-inner,
.goal-breadscrumb.has_bg .breadcrumb,
.goal-breadscrumb.has_bg .bread-title {
    position: relative;
    z-index: 1;
}

.related.products h3,
.related.products h3.name {
    text-align: center;
    font-size: 26px;
    color: #222222;
}

.related.products .products-grid .product .image {
    border: 1px solid rgba(68, 52, 46, .08);
}

.details-product .delivery-shipping-info .item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
    margin-right: 10px;
    background: #f2f2f2 !important;
    padding: 0 10px;
}

#woocommerce-accordion {
    margin-top: 10px;
}

.single-product .main-content .archive-shop .top-content {
    background: #f7f7f7;
    padding: 30px;
    border-radius: 20px;
    margin-bottom: 30px;
}

#woocommerce-accordion .panel>.panel-heading {
    text-transform: uppercase;
    border: none;
    padding: 30px 10px;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    background-color: #fff !important;
    border-top: 1px solid rgba(17, 37, 51, .2);
}

#woocommerce-accordion .panel .panel-title a {
    display: block;
    position: relative;
    color: #000;
    text-transform: capitalize;
    font-size: 18px;
}

#woocommerce-accordion .panel .panel-title a:not(.collapsed),
#woocommerce-accordion .panel .panel-title> :not(.collapsed),
#woocommerce-accordion .panel .panel-title a:before {
    color: #000;
}

#woocommerce-accordion .panel {
    margin: 0;
}

.details-product .information .summary {
    float: none !important;
    width: 100%;
    margin: 0 !important;
    padding: 20px;
    background: #fff;
    border-radius: 20px;
}

.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart .added_to_cart {
    display: block;
    background: var(--ecosoap-theme-color);
    border-color: var(--ecosoap-theme-color);
    border-radius: 5px;
    font-size: 14px;
    letter-spacing: 0;
    color: #fff;
    text-align: center;
    border: 1px solid var(--ecosoap-theme-color);
    text-transform: uppercase;
    transition: all .4s;
    max-width: 180px;
    padding: 10px 20px;
}

/* ============================================
   QUANTITY INPUT STYLE
   Override wc-quantity-increment.css (absolute +/- → flex row)
   ============================================ */

/* ── Wrapper label + stepper ─────────────────────────────── */
.woocommerce div.product form.cart .quantity-wrapper,
.woocommerce div.product .woocommerce-variation-add-to-cart .quantity-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 16px;
    margin-bottom: 20px !important;
    width: 100%;
    box-sizing: border-box;
}

.woocommerce div.product form.cart .quantity-label,
.woocommerce div.product .woocommerce-variation-add-to-cart .quantity-label {
    flex: 0 0 auto;
    align-self: center;
    white-space: nowrap;
    font-weight: 600;
    font-size: 14px;
    color: #000;
    line-height: 1.25;
    margin: 0;
}

/* ── Reset wc-quantity-increment.css trên trang sản phẩm ─── */
.woocommerce div.product form.cart .quantity,
.woocommerce div.product .woocommerce-variation-add-to-cart .quantity {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(17, 37, 51, .2) !important;
    border-radius: 8px !important;
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 140px;
    flex: 0 0 auto;
    width: auto !important;
    zoom: 1;
    box-sizing: border-box;
}

/* ── Nút +/- ─────────────────────────────────────────────── */
.woocommerce div.product form.cart .quantity .minus,
.woocommerce div.product form.cart .quantity .plus,
.woocommerce div.product .woocommerce-variation-add-to-cart .quantity .minus,
.woocommerce div.product .woocommerce-variation-add-to-cart .quantity .plus {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    min-width: 40px !important;
    height: auto !important;
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-right: 1px solid rgba(17, 37, 51, .2) !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    text-shadow: none !important;
}

.woocommerce div.product form.cart .quantity .plus,
.woocommerce div.product .woocommerce-variation-add-to-cart .quantity .plus {
    border-right: none !important;
    border-left: 1px solid rgba(17, 37, 51, .2) !important;
    order: 3;
}

.woocommerce div.product form.cart .quantity .minus,
.woocommerce div.product .woocommerce-variation-add-to-cart .quantity .minus {
    order: 1;
}

.woocommerce div.product form.cart .quantity .minus:hover,
.woocommerce div.product form.cart .quantity .plus:hover,
.woocommerce div.product .woocommerce-variation-add-to-cart .quantity .minus:hover,
.woocommerce div.product .woocommerce-variation-add-to-cart .quantity .plus:hover {
    background-color: #f5f5f5 !important;
    color: #000 !important;
}

/* ── Input số ────────────────────────────────────────────── */
.woocommerce div.product form.cart .quantity input.qty,
.woocommerce div.product .woocommerce-variation-add-to-cart .quantity input.qty {
    order: 2;
    flex: 1 1 auto !important;
    width: 52px !important;
    min-width: 52px !important;
    height: 44px !important;
    float: none !important;
    text-align: center !important;
    border: none !important;
    border-left: 1px solid rgba(17, 37, 51, .2) !important;
    border-right: 1px solid rgba(17, 37, 51, .2) !important;
    border-radius: 0 !important;
    padding: 8px 4px !important;
    margin: 0 !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
    box-sizing: border-box;
}

.woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button,
.woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product .woocommerce-variation-add-to-cart .quantity input.qty::-webkit-inner-spin-button,
.woocommerce div.product .woocommerce-variation-add-to-cart .quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

.woocommerce div.product form.cart .quantity input.qty:focus,
.woocommerce div.product .woocommerce-variation-add-to-cart .quantity input.qty:focus {
    outline: none;
    background-color: #fafafa !important;
}

/* Ẩn screen-reader-text */
.woocommerce div.product form.cart .quantity .screen-reader-text,
.woocommerce div.product .woocommerce-variation-add-to-cart .quantity .screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* padding-right từ wc-quantity-increment reset */
.woocommerce .quantity,
.woocommerce-page .quantity {
    padding-right: 0;
}

/* Mobile ≤ 767px: đảm bảo quantity không bị thu nhỏ */
@media (max-width: 767px) {
    .woocommerce div.product form.cart .quantity-wrapper,
    .woocommerce div.product .woocommerce-variation-add-to-cart .quantity-wrapper {
        gap: 12px;
        margin-bottom: 20px !important;
    }
    .woocommerce div.product form.cart .quantity,
    .woocommerce div.product .woocommerce-variation-add-to-cart .quantity {
        min-width: 130px;
    }
    .woocommerce div.product form.cart .quantity .minus,
    .woocommerce div.product form.cart .quantity .plus,
    .woocommerce div.product .woocommerce-variation-add-to-cart .quantity .minus,
    .woocommerce div.product .woocommerce-variation-add-to-cart .quantity .plus {
        width: 36px !important;
        min-width: 36px !important;
    }
    .woocommerce div.product form.cart .quantity input.qty,
    .woocommerce div.product .woocommerce-variation-add-to-cart .quantity input.qty {
        min-width: 48px !important;
        width: 48px !important;
    }
}

/* Màn rất hẹp (<375px): label + stepper xếp dọc — tránh nút + tràn / khuất */
@media (max-width: 374px) {
    .woocommerce div.product form.cart .quantity-wrapper,
    .woocommerce div.product .woocommerce-variation-add-to-cart .quantity-wrapper {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 10px 0 !important;
    }
    .woocommerce div.product form.cart .quantity-label,
    .woocommerce div.product .woocommerce-variation-add-to-cart .quantity-label {
        width: 100%;
        flex: 0 0 auto !important;
        align-self: flex-start !important;
        white-space: normal;
    }
    .woocommerce div.product form.cart .quantity,
    .woocommerce div.product .woocommerce-variation-add-to-cart .quantity {
        width: 100% !important;
        max-width: 100%;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        align-self: stretch;
        box-sizing: border-box;
    }
    .woocommerce div.product form.cart .quantity input.qty,
    .woocommerce div.product .woocommerce-variation-add-to-cart .quantity input.qty {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 1% !important;
        max-width: none;
    }
}

.woocommerce table.shop_attributes th,
.woocommerce .features .table th,
.woocommerce table.shop_attributes td,
.woocommerce .features .table td {
    background-color: #fff !important;
}

.woocommerce ul.cart_list li a,
.woocommerce ul.product_list_widget li a {
    display: block;
    font-weight: 500;
    font-size: 15px;
}

.woocommerce div.product .product_title {
    color: #000;
}

::marker {
    color: var(--ecosoap-link-color);
}

/* Hide "Product Type" label in WooCommerce variation form */
form.variations_form table.variations tbody tr:first-child th.label,
form.variations_form .woocommerce-variations tr:first-child th.label,
form.variations_form table.variations tbody tr:first-child th.label label {
    display: none !important;
}

/* Style variation buttons/pills theo mẫu: selected = background xám, unselected = border tím */
form.variations_form table.variations tbody tr:first-child .value {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

form.variations_form table.variations tbody tr:first-child .value label {
    padding: 10px 20px;
    border: 1px solid #9B59B6;
    background: #fff;
    color: #333;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 400;
    margin: 0;
}

form.variations_form table.variations tbody tr:first-child .value input[type="radio"]:checked+label,
form.variations_form table.variations tbody tr:first-child .value input[type="radio"]:checked~label {
    border-color: #E5E5E5;
    background: #E5E5E5;
    color: #333;
    font-weight: 400;
}

/* Style cho tawcvs-swatches (variation swatches plugin) - theo ảnh mẫu */
.tawcvs-swatches {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

.tawcvs-swatches .swatch-item-wrapper {
    margin: 0;
}

.tawcvs-swatches .swatch {
    padding: 10px 20px;
    border: 1px solid #CCCCCC;
    background: #fff;
    color: #333;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 400;
    margin: 0;
    display: inline-block;
    min-width: auto;
    text-align: center;
}

.tawcvs-swatches .swatch .text {
    color: #333;
    font-weight: 400;
}

/* Selected state: background xanh nhạt, border xanh, text xanh - theo ảnh mẫu */
.tawcvs-swatches .swatch.selected,
.tawcvs-swatches .swatch[data-selected="true"],
.tawcvs-swatches .swatch.active {
    border-color: var(--ecosoap-theme-color);
    background: #E0F4FF;
    color: var(--ecosoap-theme-color);
}

.tawcvs-swatches .swatch.selected .text,
.tawcvs-swatches .swatch[data-selected="true"] .text,
.tawcvs-swatches .swatch.active .text {
    color: var(--ecosoap-theme-color);
    font-weight: 400;
}

/* Hover state cho unselected */
.tawcvs-swatches .swatch:not(.selected):not(.active):hover {
    border-color: var(--ecosoap-theme-color);
    background: #f8f8f8;
}

/* Hide nút Clear (reset variations) */
form.variations_form .reset_variations,
.woocommerce div.product form.cart .reset_variations {
    display: none !important;
}

/* Hide giá variation hiển thị $216 (woocommerce variation price) */
.woocommerce div.product .woocommerce-variation-price,
.woocommerce div.product .woocommerce-variation-price .price {
    display: none !important;
}

.related.products {
    margin-top: 30px;
}

/* Related / Upsells carousel: ít item hơn slidesToShow — căn giữa hàng slide */
.related.products .slick-slider {
    text-align: center;
}

.related.products .slick-track {
    margin-left: auto !important;
    margin-right: auto !important;
}

/*
 * Related: mũi tên Slick nằm trên layer của .slick-list / link ảnh — không bị chặn click (đi tới SP).
 * Căn dọc gần giữa ảnh trên mobile 1 cột (top: 50% = lệch xuống vì có title).
 */
.related.products .slick-carousel,
.related.products .slick-slider {
    position: relative;
    isolation: isolate;
}

.related.products .slick-carousel .slick-list {
    position: relative;
    z-index: 1;
}

.related.products .slick-carousel .slick-arrow {
    z-index: 25 !important;
    pointer-events: auto !important;
}

.related.products .slick-carousel .slick-arrow i,
.related.products .slick-carousel .slick-arrow .textnav {
    pointer-events: none;
}

.related.products .slick-slide .product-block .product-image {
    position: relative;
    z-index: 0;
}

@media (max-width: 767px) {
    .related.products .slick-carousel .slick-arrow {
        top: min(34vw, 140px);
        transform: translateY(-50%);
        margin-top: 0;
    }
    .related.products .slick-carousel .slick-prev {
        left: 6px;
    }
    .related.products .slick-carousel .slick-next {
        right: 6px;
    }
    .rtl .related.products .slick-carousel .slick-prev {
        left: auto;
        right: 6px;
    }
    .rtl .related.products .slick-carousel .slick-next {
        right: auto;
        left: 6px;
    }
}

.related.products .related-products-title {
    text-align: center;
}

/* Căn giữa toàn bộ text trong thẻ (tiêu đề, sao, giá, nút) */
.related.products .product-block.grid .title-wrapper,
.related.products .product-block.grid .title-wrapper > .clearfix {
    align-items: center !important;
    text-align: center !important;
}

.related.products .product-block .name,
.related.products .product-block .name a,
.related.products .product-block.grid .name,
.related.products .product-block h3.name {
    text-align: center !important;
}

.related.products .product-block.grid .title-wrapper .clearfix > .price,
.related.products .product-block.grid .title-wrapper .clearfix > p.price,
.related.products .product-block.grid .title-wrapper .clearfix > span.price {
    margin-top: 0.35em !important;
    text-align: center !important;
    width: 100%;
    justify-content: center;
}

.related.products .product-block .rating {
    display: flex;
    justify-content: center;
    width: 100%;
    float: none !important;
}

.related.products .product-block .rating .star-rating,
.related.products .product-block .star-rating {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.related.products .product-block .view-detail-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Fix: Đảm bảo size chart và bảng giá sỉ hiển thị đúng vị trí, không bị ẩn dưới hình ảnh */
#pod-size-chart-pricing-wrapper {
    position: relative !important;
    z-index: 10 !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0;
}

/* Bảng bulk / wholesale: không tràn viewport mobile (trước đây min-width:300px + padding) */
#pod-wholesale-pricing-table {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#pod-wholesale-pricing-table .pod-table {
    table-layout: fixed !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

#pod-wholesale-pricing-table .pod-table th,
#pod-wholesale-pricing-table .pod-table td {
    word-wrap: break-word;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    #pod-size-chart-pricing-wrapper {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #pod-wholesale-pricing-table .pod-table th,
    #pod-wholesale-pricing-table .pod-table td {
        padding: 10px 8px !important;
        font-size: 13px !important;
    }
}

/* Đảm bảo hiển thị sau product image gallery */
.woocommerce div.product .images+#pod-size-chart-pricing-wrapper,
.woocommerce div.product .product-images-wrapper+#pod-size-chart-pricing-wrapper {
    margin-top: 30px;
    clear: both;
}

#pod-wholesale-pricing-table table,
#pod-wholesale-pricing-table thead,
#pod-wholesale-pricing-table tbody,
#pod-wholesale-pricing-table tr,
#pod-wholesale-pricing-table th,
#pod-wholesale-pricing-table td,
.woocommerce-product-attributes.table,
.woocommerce-product-attributes.table th,
.woocommerce-product-attributes.table td,
.woocommerce-product-attributes.table tr,
.woocommerce-product-attributes.table tbody,
.woocommerce-product-attributes.table thead {
    border: 1px solid #000;
    border-color: #000;
}

.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch.swatch-shape-circle:before,
.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch-show-more.swatch-shape-circle:before,
.woocommerce div.product .bundled_item_cart_content.cart.variations_form .tawcvs-swatches .swatch.swatch-shape-circle:before,
.woocommerce div.product .bundled_item_cart_content.cart.variations_form .tawcvs-swatches .swatch-show-more.swatch-shape-circle:before,
.woocommerce div.product .woosb-product .variations_form .tawcvs-swatches .swatch.swatch-shape-circle:before,
.woocommerce div.product .woosb-product .variations_form .tawcvs-swatches .swatch-show-more.swatch-shape-circle:before,
.woocommerce:not(.archive) li.product .cart.variations_form .tawcvs-swatches .swatch.swatch-shape-circle:before,
.woocommerce:not(.archive) li.product .cart.variations_form .tawcvs-swatches .swatch-show-more.swatch-shape-circle:before,
.woocommerce:not(.archive) li.product .bundled_item_cart_content.cart.variations_form .tawcvs-swatches .swatch.swatch-shape-circle:before,
.woocommerce:not(.archive) li.product .bundled_item_cart_content.cart.variations_form .tawcvs-swatches .swatch-show-more.swatch-shape-circle:before,
.woocommerce:not(.archive) li.product .woosb-product .variations_form .tawcvs-swatches .swatch.swatch-shape-circle:before,
.woocommerce:not(.archive) li.product .woosb-product .variations_form .tawcvs-swatches .swatch-show-more.swatch-shape-circle:before,
.woocommerce.archive .cart.variations_form .tawcvs-swatches .swatch.swatch-shape-circle:before,
.woocommerce.archive .cart.variations_form .tawcvs-swatches .swatch-show-more.swatch-shape-circle:before,
.woocommerce.archive .bundled_item_cart_content.cart.variations_form .tawcvs-swatches .swatch.swatch-shape-circle:before,
.woocommerce.archive .bundled_item_cart_content.cart.variations_form .tawcvs-swatches .swatch-show-more.swatch-shape-circle:before,
.woocommerce.archive .woosb-product .variations_form .tawcvs-swatches .swatch.swatch-shape-circle:before,
.woocommerce.archive .woosb-product .variations_form .tawcvs-swatches .swatch-show-more.swatch-shape-circle:before,
.wc-product-table-wrapper .cart.variations_form .tawcvs-swatches .swatch.swatch-shape-circle:before,
.wc-product-table-wrapper .cart.variations_form .tawcvs-swatches .swatch-show-more.swatch-shape-circle:before,
.wc-product-table-wrapper .bundled_item_cart_content.cart.variations_form .tawcvs-swatches .swatch.swatch-shape-circle:before,
.wc-product-table-wrapper .bundled_item_cart_content.cart.variations_form .tawcvs-swatches .swatch-show-more.swatch-shape-circle:before,
.wc-product-table-wrapper .woosb-product .variations_form .tawcvs-swatches .swatch.swatch-shape-circle:before,
.wc-product-table-wrapper .woosb-product .variations_form .tawcvs-swatches .swatch-show-more.swatch-shape-circle:before,
.woocommerce.single-product .cart.variations_form .tawcvs-swatches .swatch.swatch-shape-circle:before,
.woocommerce.single-product .cart.variations_form .tawcvs-swatches .swatch-show-more.swatch-shape-circle:before,
.woocommerce.single-product .bundled_item_cart_content.cart.variations_form .tawcvs-swatches .swatch.swatch-shape-circle:before,
.woocommerce.single-product .bundled_item_cart_content.cart.variations_form .tawcvs-swatches .swatch-show-more.swatch-shape-circle:before,
.woocommerce.single-product .woosb-product .variations_form .tawcvs-swatches .swatch.swatch-shape-circle:before,
.woocommerce.single-product .woosb-product .variations_form .tawcvs-swatches .swatch-show-more.swatch-shape-circle:before {
    border-radius: 5px !important;
}

.woocommerce div.product form.cart .variations td .tawcvs-swatches .swatch-item-wrapper .swatch-label {
    width: 100%;
    padding: 10px 30px;
    border: 1px solid rgba(68, 52, 46, .2);
    background: #fff;
    border-radius: 5px;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    font-weight: 500;
    color: var(--ecosoap-theme-color);
}

.tawcvs-swatches .swatch .text {
    color: var(--ecosoap-theme-color);
}

.woocommerce div.product form.cart .variations td .tawcvs-swatches .swatch-item-wrapper .swatch-label.active::before {
    border: 1px solid var(--ecosoap-theme-color) !important;
    background: var(--ecosoap-theme-color)1a;
}

.sticky-header {
    z-index: 9999;
}

.shop-sidebar-left-wrapper {
    background: #f7f7f7;
    padding: 50px 40px 44px;
}

.widget .widget-title,
.widget .widgettitle,
.widget .widget-heading,
.sidebar>.widget.widget_block .wp-block-heading,
.goal-sidebar>.widget.widget_block .wp-block-heading {
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 1.6px !important;
    color: #000 !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid !important;
    display: inline-block !important;
    margin-bottom: 22px !important;
}

.goal-shop-products-wrapper .product-block .image {
    border: 1px solid rgba(68, 52, 46, .08);
}

/* Goal Filter Products by Attribute - Checkbox Style */
.goal-layered-nav-checkbox-wrapper {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.goal-layered-nav-checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.goal-layered-nav-checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #333;
    background: #fff;
    border-radius: 2px;
    position: relative;
    transition: all 0.2s ease;
}

/* Unselected state - border đen, background trắng */
.goal-layered-nav-checkbox-item input[type="checkbox"]:not(:checked) {
    border-color: #333;
    background: #fff;
}

/* Selected state - fill màu xanh var(--ecosoap-theme-color) */
.goal-layered-nav-checkbox-item input[type="checkbox"]:checked {
    border-color: var(--ecosoap-theme-color);
    background: var(--ecosoap-theme-color);
}

/* Checkmark cho selected state */
.goal-layered-nav-checkbox-item input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Hover state - border và background chuyển sang xanh */
.goal-layered-nav-checkbox-item input[type="checkbox"]:hover:not(:checked) {
    border-color: var(--ecosoap-theme-color);
    background: #fff;
}

.goal-layered-nav-checkbox-item input[type="checkbox"]:hover:checked {
    border-color: var(--ecosoap-theme-color);
    background: var(--ecosoap-theme-color);
}

.goal-layered-nav-checkbox-item label {
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    user-select: none;
    margin-left: 10px;
    transition: color 0.2s ease;
}

/* Text màu xanh khi checkbox được chọn */
.goal-layered-nav-checkbox-item input[type="checkbox"]:checked+label {
    color: var(--ecosoap-theme-color);
}

/* Text màu xanh khi hover (cho cả checked và unchecked) */
.goal-layered-nav-checkbox-item:hover label {
    color: var(--ecosoap-theme-color);
}

/* Giữ màu xanh cho label khi checkbox được chọn và hover */
.goal-layered-nav-checkbox-item input[type="checkbox"]:checked:hover+label,
.goal-layered-nav-checkbox-item:hover input[type="checkbox"]:checked+label {
    color: var(--ecosoap-theme-color);
}

/* Shop sidebar — accordion filter widgets */
.shop-sidebar-left-wrapper.shop-filter-accordion-init .sidebar > aside.widget,
.shop-sidebar-left-wrapper.shop-filter-accordion-init .sidebar > .widget {
    margin-bottom: 0;
    padding-bottom: 14px;
    border-bottom: none;
}

.shop-sidebar-left-wrapper.shop-filter-accordion-init .sidebar > aside.widget:last-child,
.shop-sidebar-left-wrapper.shop-filter-accordion-init .sidebar > .widget:last-child {
    padding-bottom: 0;
}

.shop-sidebar-left-wrapper.shop-filter-accordion-init .sidebar .widget .widget-title,
.shop-sidebar-left-wrapper.shop-filter-accordion-init .sidebar .widget .widgettitle {
    cursor: pointer;
    display: block !important;
    width: 100%;
    position: relative;
    padding-right: 24px !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    user-select: none;
    box-sizing: border-box;
}

.shop-sidebar-left-wrapper.shop-filter-accordion-init .sidebar .widget .widget-title::after,
.shop-sidebar-left-wrapper.shop-filter-accordion-init .sidebar .widget .widgettitle::after {
    content: '\e64b';
    font-family: 'themify';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    right: 0;
    top: 50%;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.45);
    transform: translateY(-50%);
    transition: color 0.2s ease;
}

.shop-sidebar-left-wrapper.shop-filter-accordion-init .sidebar .widget.is-open .widget-title::after,
.shop-sidebar-left-wrapper.shop-filter-accordion-init .sidebar .widget.is-open .widgettitle::after {
    content: '\e648';
    transform: translateY(-50%);
}

.shop-sidebar-left-wrapper.shop-filter-accordion-init .sidebar .widget.is-open .widget-title,
.shop-sidebar-left-wrapper.shop-filter-accordion-init .sidebar .widget.is-open .widgettitle {
    margin-bottom: 18px !important;
}

.shop-sidebar-left-wrapper.shop-filter-accordion-init .shop-filter-widget-body {
    display: none !important;
}

.shop-sidebar-left-wrapper.shop-filter-accordion-init .sidebar .widget.is-open > .shop-filter-widget-body {
    display: block !important;
}

.details-product .product_meta .sub_title,
.details-product .goal-social-share span {
    color: #000;
}

h2,
.h2 {
    font-size: 24px;
}

@media (min-width: 1400px) {
    .product-block.grid .name {
        margin: 5px 0;
        padding: 0;
        font-size: 15px;
    }
}


@media (min-width: 1200px) {
    .woocommerce div.product .product_title {
        font-size: 32px;
    }

    .details-product .delivery-shipping-info {
        margin-top: 20px;
    }
}

/* Responsive: Giữ nguyên 2 dòng trên mọi breakpoint */
@media (max-width: 1199px) {

    .product-block .name,
    .product-block.grid .name,
    .product-block.list .name {
        -webkit-line-clamp: 2 !important;
        min-height: 2.4em;
    }
}

@media (max-width: 767px) {

    .product-block .name,
    .product-block.grid .name,
    .product-block.list .name {
        -webkit-line-clamp: 2 !important;
        min-height: 2.2em;
        /* Hơi nhỏ hơn trên mobile */
    }

    .woocommerce div.product .cart,
    .woocommerce div.product .woocommerce-variation-add-to-cart {
        gap: 14px !important;
        row-gap: 10px !important;
    }

}

/* Blog Posts Carousel */
.category-blog-posts {
    margin-top: 40px;
}

.blog-posts-carousel {
    margin: 0 -15px;
}

.blog-posts-carousel .blog-post-item-wrapper {
    padding: 0 15px;
}

.blog-posts-carousel .slick-prev,
.blog-posts-carousel .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.blog-posts-carousel .slick-prev:hover,
.blog-posts-carousel .slick-next:hover {
    background: var(--ecosoap-theme-color);
    border-color: var(--ecosoap-theme-color);
    color: #fff;
}

.blog-posts-carousel .slick-prev {
    left: -20px;
}

.blog-posts-carousel .slick-next {
    right: -20px;
}

.blog-posts-carousel .slick-prev i,
.blog-posts-carousel .slick-next i {
    font-size: 16px;
    color: #333;
}

.blog-posts-carousel .slick-prev:hover i,
.blog-posts-carousel .slick-next:hover i {
    color: #fff;
}

.blog-posts-carousel .slick-dots {
    text-align: center;
    margin-top: 30px;
    padding: 0;
    list-style: none;
}

.blog-posts-carousel .slick-dots li {
    display: inline-block;
    margin: 0 5px;
}

.blog-posts-carousel .slick-dots li button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: #ddd;
    text-indent: -9999px;
    cursor: pointer;
    transition: all 0.3s;
}

.blog-posts-carousel .slick-dots li.slick-active button {
    background: var(--ecosoap-theme-color);
}

/* Header không chồng lên banner — header nằm trong document flow */
body.header_transparent .goal-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    z-index: 9999;
}

@media (max-width: 768px) {
    .blog-posts-carousel .slick-prev {
        left: 10px;
    }

    .blog-posts-carousel .slick-next {
        right: 10px;
    }

    .single-product .main-content .archive-shop .top-content {
        padding: 10px;
    }

    .tawcvs-swatches .swatch-item-wrapper {
        width: 100%;
        max-width: 100%;
    }
}

/* Bundle Compatible Lids Section - Cross-sell Carousel */
.bundle-compatible-lids-section {
    position: relative;
    margin: 60px 0;
    padding: 40px 0;
}

.bundle-decorative-icons {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10 !important;
    overflow: visible;
}

.bundle-icon {
    opacity: 0.4;
    z-index: 10 !important;
}

.bundle-main-card {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    max-width: 1200px;
    width: 60%;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.bundle-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin: 0 0 30px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bundle-product-card {
    background: #fff;
    border-radius: 12px;
    padding: 15px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}

.bundle-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.bundle-product-image {
    margin-bottom: 10px;
    text-align: center;
}

.bundle-product-image img {
    max-width: 80% !important;
    height: auto;
    border-radius: 8px;
}

.bundle-product-title {
    font-size: 14px !important;
    font-weight: 600;
    color: var(--ecosoap-theme-color);
    margin: 0;
    text-align: center;
    line-height: 1.4;
}

.bundle-product-price {
    text-align: center;
    margin-top: 8px;
    color: #333;
    font-weight: 500;
    font-size: 14px !important;
}

.bundle-cross-sell-carousel {
    margin: 0 50px;
}

.bundle-product-item {
    padding: 0 10px !important;
}

.bundle-cross-sell-carousel .slick-prev,
.bundle-cross-sell-carousel .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: #fff;
    border: 2px solid var(--ecosoap-theme-color);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bundle-cross-sell-carousel .slick-prev:hover,
.bundle-cross-sell-carousel .slick-next:hover {
    background: var(--ecosoap-theme-color);
    color: #fff;
}

.bundle-cross-sell-carousel .slick-prev {
    left: -25px;
}

.bundle-cross-sell-carousel .slick-next {
    right: -25px;
}

.bundle-cross-sell-carousel .slick-prev i,
.bundle-cross-sell-carousel .slick-next i {
    font-size: 18px;
    color: var(--ecosoap-theme-color);
}

.bundle-cross-sell-carousel .slick-prev:hover i,
.bundle-cross-sell-carousel .slick-next:hover i {
    color: #fff;
}

.bundle-cross-sell-carousel .slick-dots {
    text-align: center;
    margin-top: 30px;
    padding: 0;
    list-style: none;
}

.bundle-cross-sell-carousel .slick-dots li {
    display: inline-block;
    margin: 0 5px;
}

.bundle-cross-sell-carousel .slick-dots li button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: #ddd;
    text-indent: -9999px;
    cursor: pointer;
    transition: all 0.3s;
}

.bundle-cross-sell-carousel .slick-dots li.slick-active button {
    background: var(--ecosoap-theme-color);
}

.goal-breadscrumb .breadcrumb .active,
.goal-filter .change-view:hover,
.goal-filter .change-view.active {
    color: var(--ecosoap-theme-color);
}

@media (max-width: 1024px) {
    .bundle-main-card {
        width: 90% !important;
    }
}

@media (max-width: 768px) {
    .bundle-cross-sell-carousel {
        margin: 0 20px !important;
    }

    .bundle-cross-sell-carousel .slick-prev {
        left: 10px;
    }

    .bundle-cross-sell-carousel .slick-next {
        right: 10px;
    }

    .bundle-decorative-icons {
        display: none;
    }

    .bundle-main-card {
        width: 95% !important;
        padding: 30px 20px !important;
    }

    .bundle-title {
        font-size: 22px !important;
    }
}

@media (max-width: 425px) {
    .widget-products .product-block.grid .view-detail-button {
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
        font-size: 10px;
        text-align: center;
        padding: 10px;
    }

    /* .products-wrapper-grid > .row-products-wrapper > .product:nth-child(even) {
        padding-right: 0;
    } */
}

/* Product FAQs Tab */
.product-faqs {
    padding: 20px 0;
}

.faq-item {
    margin-bottom: 25px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 20px;
}

.faq-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.faq-question {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color 0.3s;
}

.faq-question:hover {
    color: var(--ecosoap-theme-color);
}

.faq-toggle {
    font-size: 20px;
    color: var(--ecosoap-theme-color);
    transition: transform 0.3s;
    flex-shrink: 0;
    margin-left: 15px;
}

.faq-answer {
    margin-top: 15px;
    color: #666;
    line-height: 1.6;
    font-size: 15px;
}

/* Product Blog Posts Section */
.product-blog-posts-section {
    margin: 60px 0;
    padding: 40px 0;
    clear: both;
}

.product-blog-posts-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin: 0 0 40px 0;
}

.product-blog-posts-carousel {
    margin: 0 -15px;
}

.product-blog-post-item {
    padding: 0 15px;
}

.product-blog-posts-carousel .slick-prev,
.product-blog-posts-carousel .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.product-blog-posts-carousel .slick-prev:hover,
.product-blog-posts-carousel .slick-next:hover {
    background: var(--ecosoap-theme-color);
    border-color: var(--ecosoap-theme-color);
    color: #fff;
}

.product-blog-posts-carousel .slick-prev {
    left: -20px;
}

.product-blog-posts-carousel .slick-next {
    right: -20px;
}

.product-blog-posts-carousel .slick-prev i,
.product-blog-posts-carousel .slick-next i {
    font-size: 16px;
    color: #333;
}

.product-blog-posts-carousel .slick-prev:hover i,
.product-blog-posts-carousel .slick-next:hover i {
    color: #fff;
}

.product-blog-posts-carousel .slick-dots {
    text-align: center;
    margin-top: 30px;
    padding: 0;
    list-style: none;
}

.product-blog-posts-carousel .slick-dots li {
    display: inline-block;
    margin: 0 5px;
}

.product-blog-posts-carousel .slick-dots li button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: #ddd;
    text-indent: -9999px;
    cursor: pointer;
    transition: all 0.3s;
}

.product-blog-posts-carousel .slick-dots li.slick-active button {
    background: var(--ecosoap-theme-color);
}

@media (max-width: 768px) {
    .product-blog-posts-carousel .slick-prev {
        left: 10px;
    }

    .product-blog-posts-carousel .slick-next {
        right: 10px;
    }
}

/* ============================================
   CATEGORY MEGAMENU STYLES
   ============================================ */

/* Category megamenu dropdown - match với style menu hiện tại */
.megamenu .dropdown-menu.category-megamenu {
    background: #fff;
    border-radius: 7px;
    box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.1);
    padding: 20px 30px;
    border: none;
    min-width: 200px;
}

.megamenu .dropdown-menu.category-megamenu .dropdown-menu-inner {
    padding: 0;
}

/* Category menu list */
.megamenu .dropdown-menu.category-megamenu .category-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.megamenu .dropdown-menu.category-megamenu .category-menu-list .category-item {
    margin: 0 0 8px;
    line-height: inherit;
}

.megamenu .dropdown-menu.category-megamenu .category-menu-list .category-item>a {
    background: transparent !important;
    position: relative;
    color: var(--ecosoap-text-color);
    font-size: 14px;
    font-weight: 400;
    padding: 0;
    width: 100%;
    display: inline-block;
    transition: all 0.2s ease-in-out 0s;
    text-decoration: none;
}

.megamenu .dropdown-menu.category-megamenu .category-menu-list .category-item>a:hover,
.megamenu .dropdown-menu.category-megamenu .category-menu-list .category-item>a:active {
    color: var(--ecosoap-theme-color);
}

/* Sub-category list - chỉ hiển thị khi hover */
.megamenu .dropdown-menu.category-megamenu .category-menu-list .category-item.has-submenu {
    position: relative;
}

.megamenu .dropdown-menu.category-megamenu .category-menu-list .category-item>a .caret {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 10px;
}

.megamenu .dropdown-menu.category-megamenu .category-menu-list .sub-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    visibility: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
    transform-origin: 0 0;
    transition: all 0.2s ease-in-out 0s;
    transform: rotateX(-90deg);
    border-radius: 3px;
    box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.1);
    padding: 20px 30px;
    border: none;
    position: absolute;
    display: block;
    left: 120%;
    top: -20px;
    background: #fff;
    min-width: 200px;
    z-index: 999;
}

/* Hiển thị sub-menu khi hover vào parent */
.megamenu .dropdown-menu.category-megamenu .category-menu-list .category-item.has-submenu:hover>.sub-category-list {
    visibility: visible;
    opacity: 1;
    filter: alpha(opacity=100);
    transform: rotateX(0deg);
}

.megamenu .dropdown-menu.category-megamenu .category-menu-list .sub-category-list li {
    margin: 0 0 8px;
    line-height: inherit;
}

.megamenu .dropdown-menu.category-megamenu .category-menu-list .sub-category-list li>a {
    background: transparent !important;
    position: relative;
    color: var(--ecosoap-text-color);
    font-size: 14px;
    font-weight: 400;
    padding: 0;
    width: 100%;
    display: inline-block;
    transition: all 0.2s ease-in-out 0s;
    text-decoration: none;
}

.megamenu .dropdown-menu.category-megamenu .category-menu-list .sub-category-list li>a .caret {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 10px;
}

.megamenu .dropdown-menu.category-megamenu .category-menu-list .sub-category-list li>a:hover,
.megamenu .dropdown-menu.category-megamenu .category-menu-list .sub-category-list li>a:active {
    color: var(--ecosoap-theme-color);
}

/* Sub-sub-category list - chỉ hiển thị khi hover */
.megamenu .dropdown-menu.category-megamenu .category-menu-list .sub-category-list li.has-submenu {
    position: relative;
}

.megamenu .dropdown-menu.category-megamenu .category-menu-list .sub-sub-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    visibility: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
    transform-origin: 0 0;
    transition: all 0.2s ease-in-out 0s;
    transform: rotateX(-90deg);
    border-radius: 3px;
    box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.1);
    padding: 20px 30px;
    border: none;
    position: absolute;
    display: block;
    left: 100%;
    top: -20px;
    background: #fff;
    min-width: 200px;
    z-index: 1000;
}

/* Hiển thị sub-sub-menu khi hover vào sub-item */
.megamenu .dropdown-menu.category-megamenu .category-menu-list .sub-category-list li.has-submenu:hover>.sub-sub-category-list {
    visibility: visible;
    opacity: 1;
    filter: alpha(opacity=100);
    transform: rotateX(0deg);
}

.megamenu .dropdown-menu.category-megamenu .category-menu-list .sub-sub-category-list li {
    margin: 0 0 8px;
    line-height: inherit;
}

.megamenu .dropdown-menu.category-megamenu .category-menu-list .sub-sub-category-list li>a {
    background: transparent !important;
    position: relative;
    color: var(--ecosoap-text-color);
    font-size: 14px;
    font-weight: 400;
    padding: 0;
    width: 100%;
    display: inline-block;
    transition: all 0.2s ease-in-out 0s;
    text-decoration: none;
}

.megamenu .dropdown-menu.category-megamenu .category-menu-list .sub-sub-category-list li>a:hover,
.megamenu .dropdown-menu.category-megamenu .category-menu-list .sub-sub-category-list li>a:active {
    color: var(--ecosoap-theme-color);
}

/* RTL support */
.rtl .megamenu .dropdown-menu.category-megamenu .category-menu-list .category-item>a .caret {
    left: 15px;
    right: auto;
}

.rtl .megamenu .dropdown-menu.category-megamenu .category-menu-list .sub-category-list {
    left: auto;
    right: 100%;
}

.rtl .megamenu .dropdown-menu.category-megamenu .category-menu-list .sub-category-list li>a .caret {
    left: 15px;
    right: auto;
}

.rtl .megamenu .dropdown-menu.category-megamenu .category-menu-list .sub-sub-category-list {
    left: auto;
    right: 100%;
}

.megamenu .dropdown-menu .dropdown-menu {
    left: 120%;
}

.megamenu.effect2>li>.dropdown-menu {
    min-width: 250px;
}

#ppc-button-ppcp-gateway {
    margin-top: 10px;
}

.single-blog .no-sidebar {
    max-width: 100%;
}

.archive-blog {
    padding: 0;
}

#ppc-button-ppcp-gateway iframe {
    z-index: 10 !important;
}

/*
 * Back to top: không dùng z-index cực cao (9991) — sẽ che nút Checkout / VIEW CART trên mobile.
 * Theme gốc template.css: z-index 9; sticky bar sản phẩm: 5.
 */
#back-to-top.add-fix-top,
a#back-to-top.add-fix-top {
    z-index: 4;
}

/* Cụm cart totals / checkout: tạo lớp trên nút back-to-top khi so sánh stacking */
.woocommerce-cart .wrapper-cart .cart-collaterals,
.woocommerce-page.woocommerce-cart .wrapper-cart .cart-collaterals,
.woocommerce-cart .cart_totals,
.woocommerce-page.woocommerce-cart .cart_totals {
    position: relative;
    z-index: 30;
}

.add-to-cart-bottom-wrapper {
    z-index: 25 !important;
}

/* Tránh chồng vùng bấm: đẩy nút lên một chút trên cart/checkout (mobile) */
@media (max-width: 991px) {

    body.woocommerce-cart #back-to-top.add-fix-top,
    body.woocommerce-checkout #back-to-top.add-fix-top {
        bottom: 100px;
    }
}

/* Preload overlay: logo/ảnh nền không crop kiểu “phóng to” (theme gốc dùng cover) */
.goal-page-loading .goal-loader-inner {
    background-size: contain !important;
    background-position: center center !important;
    max-width: 82px !important;
    max-height: 82px !important;
}

.goal-footer-mobile {
    z-index: 999;
}

/* Footer mobile: đồng bộ kích thước icon (font + SVG), căn label — tránh SVG/account phình to */
.goal-footer-mobile > ul > li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    text-align: center;
    min-height: 0;
}

.goal-footer-mobile > ul > li i {
    font-size: 22px;
    line-height: 1;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ecosoap-link-color);
}

.goal-footer-mobile > ul > li svg {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    flex-shrink: 0;
    display: block;
    margin: 0 auto;
    box-sizing: content-box;
    color: var(--ecosoap-link-color);
}

.post.no-results .widget-search {
    padding: 0 10px;
}

@media (max-width: 374px) {
    .goal-footer-mobile > ul > li {
        padding: 0 5px;
    }
}

/* Ghi đè rule header 30×30 + margin cho nút search trong footer */
.goal-footer-mobile .footer-search-btn svg {
    width: 22px !important;
    height: 22px !important;
    margin-top: 0 !important;
}

.goal-footer-mobile .footer-search-btn svg path {
    stroke: currentColor;
}

.goal-footer-mobile .footer-mini-cart svg {
    width: 22px !important;
    height: 22px !important;
}

.sliding-menu__panel li.has-submenu button {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sliding-menu__panel li.has-submenu button .sliding-menu__label {
    width: 80%;
}

.sliding-menu__panel li.has-submenu button .sliding-menu__expand-icon {
    width: 20%;
    text-align: right;
}

.sliding-menu__panel li.has-submenu button .sliding-menu__expand-icon svg {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
}

#goal-header {
    z-index: 9999;
    background-color: var(--ecosoap-theme-color);
}

.logo-wrapper a .logo-text,
#goal-header .logo .logo-text,
#goal-header-mobile .logo .logo-text,
.header-offcanvas .logo .logo-text {
    font-size: 36px !important;
}

.sticky-header  {
    z-index: 999999;
}

/* CLS: header — desktop lớn: padding khớp sticky 15px + min-height wrapper */
@media (min-width: 1200px) {
    .header-default .main-sticky-header:not(.sticky-header) {
        padding-top: 15px;
        padding-bottom: 15px;
        box-sizing: border-box;
    }
    #goal-header .main-sticky-header-wrapper {
        min-height: 88px;
        box-sizing: border-box;
    }
}

/* 992px–1199px: header gọn — bớt padding menu (override template + custom-styles), line-height, khoảng cách icon */
@media (min-width: 992px) and (max-width: 1199px) {
    /*
     * custom-styles.php đặt #goal-header { min-height: 80px } cho desktop.
     * Khi bar thực tế thấp hơn (padding 8px), phần dưới header còn min-height → dải trắng dưới thanh xanh.
     */
    #goal-header {
        min-height: 0 !important;
    }
    .header-default .sticky-header,
    .header-default .main-sticky-header:not(.sticky-header) {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        box-sizing: border-box;
    }
    #goal-header .main-sticky-header-wrapper {
        min-height: 0 !important;
        box-sizing: border-box;
    }
    #goal-header .megamenu > li {
        padding: 6px 6px !important;
        margin: 0 !important;
    }
    #goal-header .megamenu > li:first-child {
        padding-left: 0 !important;
    }
    .rtl #goal-header .megamenu > li:first-child {
        padding-right: 0 !important;
        padding-left: 6px !important;
    }
    #goal-header .megamenu > li > a {
        line-height: 1.25 !important;
        font-size: 12px !important;
    }
    #goal-header .megamenu > li > a i.down,
    #goal-header .megamenu > li > a img {
        margin-left: 4px !important;
    }
    .rtl #goal-header .megamenu > li > a i.down,
    .rtl #goal-header .megamenu > li > a img {
        margin-right: 4px !important;
        margin-left: inherit !important;
    }
    #goal-header .header-right > div.pull-right,
    #goal-header .header-right .pull-right {
        margin-left: 10px !important;
    }
    .rtl #goal-header .header-right > div.pull-right,
    .rtl #goal-header .header-right .pull-right {
        margin-right: 10px !important;
        margin-left: inherit !important;
    }
    #goal-header .header-button-woo > div {
        margin-left: 10px !important;
    }
    .rtl #goal-header .header-button-woo > div {
        margin-right: 10px !important;
        margin-left: inherit !important;
    }
    #goal-header .logo .logo-text {
        font-size: 28px !important;
        line-height: 1.1 !important;
    }
    #goal-header .show-search-header svg {
        width: 22px !important;
        height: 22px !important;
        margin-top: 2px !important;
    }
}
body.admin-bar.header_transparent #goal-header {
    top: auto;
}

/* Trắng chỉ cho header/top bar — không áp cho .footer-mini-cart (nền trắng → icon biến mất) */
.mini-cart:not(.footer-mini-cart) svg,
.top-wrapper-menu .drop-dow svg,
.wishlist-icon svg,
.footer-search-btn svg,
.show-search-header svg {
    width: 24px;
    height: 24px;
    color: #fff;
    fill: #fff;
}

/* Header mobile nền trắng: override — icon SVG trắng sẽ không nhìn thấy */
@media (max-width: 991px) {
    #goal-header-mobile .mini-cart:not(.footer-mini-cart) svg {
        color: var(--ecosoap-link-color, var(--ecosoap-theme-color, #3d9142));
        fill: currentColor;
        display: block;
        flex-shrink: 0;
    }
    #goal-header-mobile .mini-cart:not(.footer-mini-cart) svg path {
        fill: currentColor;
    }
    /* Căn 3 vùng: trái | logo giữa | phải (cùng độ rộng hai bên → logo cân giữa) */
    #goal-header-mobile .flex-middle {
        display: grid !important;
        grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
        align-items: center;
        width: 100%;
        max-width: 100%;
        float: none !important;
    }
    #goal-header-mobile .flex-middle > [class*="col-"] {
        width: auto !important;
        max-width: none !important;
        float: none !important;
    }
    #goal-header-mobile .flex-middle > .col-xs-3:first-child {
        justify-self: start;
        text-align: left;
    }
    #goal-header-mobile .flex-middle > .col-xs-6 {
        justify-self: center;
        text-align: center;
    }
    #goal-header-mobile .flex-middle > .col-xs-3:last-child {
        justify-self: end;
        text-align: right;
    }
    #goal-header-mobile .box-right.pull-right {
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #goal-header-mobile .goal-topcart .mini-cart {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }
}

.footer-search-btn svg,
.show-search-header svg {
    height: 30px;
    width: 30px;
    margin-top: 8px;
}

.mini-cart:not(.footer-mini-cart) svg path,
.top-wrapper-menu .drop-dow svg path,
.wishlist-icon svg path,
.footer-search-btn svg path,
.show-search-header svg path {
    fill: #fff;
}

.goal-footer-mobile .footer-mini-cart svg,
.goal-footer-mobile .footer-mini-cart svg path {
    color: var(--ecosoap-link-color);
    fill: currentColor;
}

.top-wrapper-menu .drop-dow svg {
    width: 28px;
    height: 28px;
}

.add-fix-top {
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 80px;
}

.add-fix-top svg {
    width: 30px;
    height: 30px;
    fill: #fff;
    color: #fff;
}

/* Cart popup: variation hiển thị một hàng bên dưới tên sản phẩm */
.shopping_cart_content .mini-cart-item-variations,
.wrapper-top-cart .mini-cart-item-variations {
    display: block;
    margin-top: 0.25em;
    font-size: 0.9em;
    font-weight: normal;
    color: #666;
    line-height: 1.3;
}
.shopping_cart_content .mini-cart-item-variations .cart-item-variations,
.wrapper-top-cart .mini-cart-item-variations .cart-item-variations {
    display: inline;
}

/* =============================================================================
   Shop grid: thẻ cùng chiều cao, giá + nút VIEW DETAILS dính đáy, tiêu đề tối đa 2 dòng
   ============================================================================= */

/* Hàng sản phẩm dạng lưới: flex để các cột cùng cao (float vẫn bị bỏ qua khi cha là flex) */
.products-wrapper-grid > .row-products-wrapper {
    display: flex;
    flex-wrap: wrap;
}

/* Carousel Slick trong flex: full width — tránh mobile track ~1/3 viewport & slick-loading kẹt */
.products-wrapper-grid > .row-products-wrapper > .slick-carousel.products {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.products-wrapper-grid > .row-products-wrapper > .product {
    display: flex;
    flex-direction: column;
    float: none;
}

.products-wrapper-grid > .row-products-wrapper > .product > .product-block.grid {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

.product-block.grid .grid-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.product-block.grid .metas {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.product-block.grid .title-wrapper {
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: 0;
}

/* Khối meta trong card: cột flex, đẩy giá + nút xuống đáy */
.product-block.grid .title-wrapper > .clearfix {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    width: 100%;
}

.product-block.grid .title-wrapper .clearfix > .name,
.product-block.grid .title-wrapper .clearfix > h3.name {
    flex-shrink: 0;
}

.product-block.grid .title-wrapper .clearfix > .rating {
    flex-shrink: 0;
}

/* Giá: margin-top auto để bám đáy vùng text (nút nằm ngay dưới giá, cùng một cụm đáy) */
.product-block.grid .title-wrapper .clearfix > .price,
.product-block.grid .title-wrapper .clearfix > p.price,
.product-block.grid .title-wrapper .clearfix > span.price {
    margin-top: auto !important;
}

/* Ẩn giá: đẩy nút xuống đáy */
.product-block.grid .title-wrapper .clearfix:not(:has(> .price)):not(:has(> p.price)):not(:has(> span.price)) > .view-detail-wrapper {
    margin-top: auto !important;
}

.product-block.grid .title-wrapper .clearfix > .view-detail-wrapper {
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Tablet 768px–991px: giảm số cột layout 5 (col-*-5c) xuống 3 cột, tránh hàng lệch / ô quá hẹp */
@media (min-width: 768px) and (max-width: 991px) {
    .products-wrapper-grid > .row-products-wrapper > .product.col-sm-5c {
        width: 33.33333333% !important;
        max-width: 33.33333333% !important;
        flex: 0 0 33.33333333% !important;
    }

    /* Ghi đè theme: giữ title-wrapper flex ở grid (theme từng ép block cho v2/v3) */
    .product-block.grid .title-wrapper {
        display: flex !important;
        flex-direction: column !important;
    }
}

/* 992px–1199px: theme chỉ gán width 20% cho col-md-5c từ 1200px — bù 4 cột */
@media (min-width: 992px) and (max-width: 1199px) {
    .products-wrapper-grid > .row-products-wrapper > .product.col-md-5c {
        width: 25% !important;
        max-width: 25% !important;
        flex: 0 0 25% !important;
    }
}

/* --- Footer: menu không còn đoạn văn + dấu phẩy trên mobile (ghi đè template.css ≤767px) --- */
@media (max-width: 767px) {
    .goal-footer .widget-nav-menu ul.menu,
    .goal-footer .elementor-widget-nav-menu ul.elementor-nav-menu {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1rem;
        row-gap: 0.125rem;
        align-items: start;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .goal-footer .widget-nav-menu ul.menu li,
    .goal-footer .elementor-widget-nav-menu ul.elementor-nav-menu li {
        display: flex !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto;
        min-height: 0;
    }

    .goal-footer .widget-nav-menu ul.menu li + li:before,
    .rtl .goal-footer .widget-nav-menu ul.menu li + li:before {
        content: none !important;
        display: none !important;
        margin: 0 !important;
    }

    .goal-footer .widget-nav-menu ul.menu li > a,
    .goal-footer .elementor-widget-nav-menu ul.elementor-nav-menu li > a {
        display: block;
        width: 100%;
        padding: 0.65rem 0;
        line-height: 1.35;
        box-sizing: border-box;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.12);
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .goal-footer .widget-nav-menu ul.menu,
    .goal-footer .elementor-widget-nav-menu ul.elementor-nav-menu {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Giá tham chiếu gồm VAT — cạnh giá Excl. VAT (WooCommerce Tax display: excluding) */
.single-product .price .ecosoap-price-inc-vat-ref,
.woocommerce div.product .price .ecosoap-price-inc-vat-ref {
    display: inline;
    font-size: 0.7em;
    font-weight: 400;
    color: #6b6b6b;
    white-space: normal;
    vertical-align: baseline;
    margin-left: 0.25em;
}

.single-product .price .ecosoap-price-inc-vat-ref .woocommerce-Price-amount,
.woocommerce div.product .price .ecosoap-price-inc-vat-ref .woocommerce-Price-amount {
    font-weight: inherit;
    color: inherit;
}

.single-product .price .ecosoap-price-inc-vat-ref .ecosoap-inc-vat-label,
.woocommerce div.product .price .ecosoap-price-inc-vat-ref .ecosoap-inc-vat-label {
    font-weight: inherit;
    color: inherit;
}

/* Checkout: coupon + freeship banner */
.ecosoap-checkout-coupon-visible {
    margin: 0 0 1rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ecosoap-checkout-coupon-visible .checkout_coupon {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
}

.ecosoap-checkout-coupon-visible .checkout_coupon .form-row-first {
    flex: 1 1 60%;
    min-width: 140px;
    margin: 0;
    padding: 0;
    float: none;
}

.ecosoap-checkout-coupon-visible .checkout_coupon .form-row-last {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    float: none;
}

.ecosoap-checkout-coupon-visible .checkout_coupon .form-row-last .button {
    width: 100%;
    min-height: 42px;
}

/* Freeship banner: between order table and coupon — màu chủ đạo theme */
.ecosoap-free-ship-banner-wrap {
    margin: 0.75rem 0 0.85rem;
}

.ecosoap-free-ship-bar {
    background: var(--ecosoap-theme-color, #31503c);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.75rem 1rem;
    margin: 0;
    border-radius: 0;
    line-height: 1.4;
    text-align: center;
}

.ecosoap-free-ship-banner-wrap--met .ecosoap-free-ship-bar {
    background: var(--ecosoap-link-color, var(--ecosoap-theme-color, #31503c));
}

.ecosoap-free-ship-banner-wrap--cart {
    margin: 0.5rem 0 0.75rem;
}

.ecosoap-free-ship-banner-wrap--mini {
    margin: 0.65rem 0 0.5rem;
}

.ecosoap-free-ship-banner-wrap--mini .ecosoap-free-ship-bar {
    font-size: 0.9375rem;
    padding: 0.65rem 0.9rem;
    border-radius: 8px;
    min-height: 2.75rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* WooCommerce Cart / Checkout blocks (Gutenberg) */
.ecosoap-free-ship-banner-wrap--blocks {
    margin: 0;
}

.ecosoap-free-ship-banner-wrap--blocks .ecosoap-free-ship-bar {
    font-size: clamp(0.9rem, 2.4vw, 1.05rem);
    padding: 0.7rem 1rem;
    min-height: 2.85rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wc-block-components-sidebar-layout .ecosoap-free-ship-banner-wrap--blocks,
.wp-block-woocommerce-cart-order-summary-block .ecosoap-free-ship-banner-wrap--blocks,
.wp-block-woocommerce-checkout-order-summary-block .ecosoap-free-ship-banner-wrap--blocks {
    max-width: 100%;
}

/* Popup mini-cart (theme template): đủ rộng trong drawer */
.widget_shopping_cart_content .ecosoap-free-ship-banner-wrap--mini,
.goal-topcart .ecosoap-free-ship-banner-wrap--mini {
    margin-left: 0;
    margin-right: 0;
}

/* Register — same shell & form style as Login (.user / form.login in template.css) */
.user.ecosoap-standalone-register {
    max-width: 720px;
}

/* No second “card” inside .user; login tab has only .register_login_wrapper */
.ecosoap-standalone-register .content-register {
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.register_login_wrapper.content-register {
    padding-top: 0;
}

.user .register_login_wrapper.content-register .title,
.user.ecosoap-standalone-register .content-register .title {
    margin: 0 0 15px;
    padding-bottom: 0;
    border-bottom: none;
    font-size: 30px;
    font-weight: 400;
    text-transform: capitalize;
    letter-spacing: normal;
    color: inherit;
}

@media (min-width: 1200px) {
    .user .register_login_wrapper.content-register .title,
    .user.ecosoap-standalone-register .content-register .title {
        margin-bottom: 25px;
    }
}

.ecosoap-register-form-main .form-group,
.register_login_wrapper.content-register form.register .form-group {
    margin-bottom: 0;
}

.ecosoap-register-form-main .for-control,
.register_login_wrapper.content-register form.register .for-control {
    display: block;
    margin-bottom: 0.35rem;
    font-size: inherit;
    font-weight: 400;
    color: var(--ecosoap-link-color);
    letter-spacing: normal;
}

.ecosoap-register-fieldset {
    margin-bottom: 0.25rem;
}

.ecosoap-register-account-block {
    margin-top: 0.35rem;
    margin-bottom: 0.15rem;
}

/* Equal two-column rows; labels align so inputs line up (reference layout) */
.ecosoap-reg-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 1.25rem;
    row-gap: 0;
    align-items: stretch;
    margin-bottom: 15px;
}

@media (min-width: 1200px) {
    .ecosoap-reg-row {
        margin-bottom: 25px;
    }
}

.ecosoap-reg-row--biz-type,
.ecosoap-reg-row--full {
    grid-template-columns: minmax(0, 1fr);
}

.ecosoap-reg-cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ecosoap-reg-cell--full {
    grid-column: 1 / -1;
}

.ecosoap-reg-cell > .form-group {
    margin-bottom: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Same label band height in 2-col rows → inputs start on one line */
.ecosoap-reg-row:not(.ecosoap-reg-row--full):not(.ecosoap-reg-row--biz-type) .ecosoap-reg-cell .for-control {
    min-height: 2.75rem;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    line-height: 1.28;
}

.ecosoap-register-password-hint {
    margin: 0 0 0.35rem;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ecosoap-text-color, #555);
}

.ecosoap-register-form-main .form-control,
.register_login_wrapper.content-register form.register .form-control {
    width: 100%;
    max-width: 100%;
    min-height: 40px;
    height: auto;
    padding: 0.5rem 1.1rem;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ecosoap-text-color, #333);
    background: #fff !important;
    border: 1px solid #dcd7cc !important;
    border-radius: 50px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ecosoap-register-form-main .form-control:focus,
.register_login_wrapper.content-register form.register .form-control:focus {
    outline: none;
    background: #fff !important;
    border-color: var(--ecosoap-link-color, #8b9a7c) !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.ecosoap-register-form-main .form-control::placeholder,
.register_login_wrapper.content-register form.register .form-control::placeholder {
    color: #9a9a9a;
    opacity: 1;
    font-size: 14px;
}

.ecosoap-register-biz-type {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border-radius: 15px;
    border: 1px solid #dcd7cc;
}

.ecosoap-register-biz-type > .for-control {
    display: block;
    margin-bottom: 0.65rem;
}

/* Segmented pill radios — input + text never overlap (no Bootstrap .radio-inline) */
.ecosoap-biz-type-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
}

.ecosoap-radio-pill {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.4rem 1rem 0.4rem 0.75rem;
    min-height: 40px;
    box-sizing: border-box;
    border: 1px solid #dcd7cc;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--ecosoap-text-color, #333);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
}

.ecosoap-radio-pill:hover {
    border-color: var(--ecosoap-link-color, #6d8264);
}

.ecosoap-radio-pill input[type='radio'] {
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    vertical-align: middle;
    accent-color: var(--ecosoap-link-color, #6d8264);
    opacity: 1;
    filter: none;
    position: static;
    top: auto;
    left: auto;
    transform: none;
}

.ecosoap-radio-pill__text {
    flex: 0 1 auto;
    line-height: 1.35;
}

.ecosoap-radio-pill:has(input:checked) {
    border-color: var(--ecosoap-link-color, #6d8264);
    background: rgba(109, 130, 100, 0.08);
    box-shadow: inset 0 0 0 1px rgba(109, 130, 100, 0.12);
}

.ecosoap-radio-pill input:focus-visible {
    outline: 2px solid var(--ecosoap-link-color, #6d8264);
    outline-offset: 2px;
}

.ecosoap-register-terms {
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid #dcd7cc;
    border-radius: 15px;
}

.ecosoap-register-terms .for-control {
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ecosoap-text-color, #333);
    cursor: pointer;
}

.ecosoap-register-terms input[type="checkbox"] {
    margin: 0 0.5rem 0 0;
    vertical-align: middle;
    width: auto;
    height: auto;
    opacity: 1;
    filter: none;
    accent-color: var(--ecosoap-link-color, #6d8264);
}

.ecosoap-register-terms a {
    font-weight: 400;
    color: var(--ecosoap-link-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ecosoap-register-form-main > p:not(.form-group),
.register_login_wrapper.content-register form.register > p:not(.form-group) {
    margin: 0.75rem 0 1rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #4a554f;
}

.ecosoap-register-form-main .wrapper-submit,
.register_login_wrapper.content-register form.register .wrapper-submit {
    margin-top: 10px;
    margin-bottom: 0;
    text-align: left;
}

/* Same as Login: theme .btn-theme (accent / yellow per variables) */
.ecosoap-register-form-main .wrapper-submit .btn-theme,
.register_login_wrapper.content-register form.register .wrapper-submit .btn-theme {
    border-radius: 50px;
    padding: 12px 28px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ecosoap-standalone-register .create,
.register_login_wrapper.content-register .create {
    margin-top: 15px;
    padding-top: 0;
    border-top: none;
    font-size: inherit;
    color: inherit;
}

@media (min-width: 1200px) {
    .ecosoap-standalone-register .create,
    .register_login_wrapper.content-register .create {
        margin-top: 25px;
    }
}

.ecosoap-standalone-register .create a,
.register_login_wrapper.content-register .create a {
    font-weight: 400;
    color: var(--ecosoap-link-color);
    text-decoration: underline;
    margin: 0 3px;
}

.ecosoap-register-form-main .woocommerce-privacy-policy-text,
.register_login_wrapper.content-register form.register .woocommerce-privacy-policy-text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ecosoap-text-color, #555);
    margin: 0.5rem 0 0;
}

.ecosoap-register-form-main .woocommerce-privacy-policy-text a,
.register_login_wrapper.content-register form.register .woocommerce-privacy-policy-text a {
    color: var(--ecosoap-link-color);
    text-decoration: underline;
}

/* Tablet / mobile: mỗi ô một hàng (tránh cột quá hẹp trong popup & màn nhỏ) */
@media (max-width: 767px) {
    .ecosoap-reg-row:not(.ecosoap-reg-row--full):not(.ecosoap-reg-row--biz-type) {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.75rem;
    }

    .ecosoap-reg-row:not(.ecosoap-reg-row--full):not(.ecosoap-reg-row--biz-type) .ecosoap-reg-cell .for-control {
        min-height: 0;
        align-items: flex-start;
    }
}

/*
 * Popup đăng nhập / đăng ký (Goal Header User Info — jQuery Magnific Popup).
 * template.css đặt .user { max-width: 570px } → form 2 cột bị co; nới .mfp-content + bỏ giới hạn .user trong popup.
 */
.mfp-wrap.goal-mfp-zoom-in.login-wrapper .mfp-content {
    max-width: min(720px, calc(100vw - 2rem));
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.mfp-wrap.goal-mfp-zoom-in.login-wrapper .mfp-inline-holder .mfp-content {
    width: 100%;
    max-width: min(720px, calc(100vw - 2rem));
}

.mfp-wrap.goal-mfp-zoom-in.login-wrapper .mfp-content .user {
    max-width: none;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding: 1.25rem 1.35rem;
}

@media (min-width: 992px) {
    .mfp-wrap.goal-mfp-zoom-in.login-wrapper .mfp-content .user {
        padding: 1.75rem 2.25rem;
    }
}

/* Elementor — Goal Header User Info: icon must stay visible (no Tailwind in header) */
.ecosoap-header-user-info-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    vertical-align: middle;
}

.elementor-widget-ecosoap_user_info .ecosoap-header-user-info-wrap .login,
.elementor-widget-ecosoap_user_info .ecosoap-header-user-info-wrap .drop-dow,
.elementor-widget-ecosoap_user_info .ecosoap-header-user-info-wrap .offcanvas-account {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    color: inherit;
    text-decoration: none;
}

.elementor-widget-ecosoap_user_info .ecosoap-header-user-svg,
.ecosoap-header-user-info-wrap .ecosoap-header-user-svg {
    width: 24px;
    height: 24px;
    display: block;
}

/* Block checkout: UK city = select bên cạnh; input gốc ẩn (React vẫn đồng bộ) — tránh viền/focus đè lên Address */
.wc-block-components-address-form__city .ecosoap-wcblock-city-input-hidden,
.wc-block-checkout .ecosoap-wcblock-city-input-hidden {
    position: fixed !important;
    left: -9999px !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    max-height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.wc-block-components-address-form__city .ecosoap-wcblock-city-input-hidden:focus,
.wc-block-components-address-form__city .ecosoap-wcblock-city-input-hidden:focus-visible,
.wc-block-checkout .ecosoap-wcblock-city-input-hidden:focus,
.wc-block-checkout .ecosoap-wcblock-city-input-hidden:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
.wc-block-components-address-form__city .ecosoap-wcblock-city-wrap,
.wc-block-checkout .ecosoap-wcblock-city-wrap {
    position: relative;
    z-index: 20;
    display: block;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    overflow: visible;
    isolation: isolate; /* tách stacking, tránh đè cả cột bên cạnh */
}

/* Khớp WC Blocks text input: bo tròn, viền xám, chiều cao / padding tương tự cột cạnh */
.wc-block-components-text-input,
.wc-block-checkout .wc-block-components-text-input,
.wc-block-components-address-form__city .ecosoap-wcblock-city-wrap,
.wc-block-checkout .ecosoap-wcblock-city-wrap {
    /* wrapper giữ layout giống siblings */
    flex: 1 1 100%;
    max-width: 100%;
}

.wc-block-components-address-form__city .ecosoap-wcblock-city-wrap select,
.wc-block-checkout .ecosoap-wcblock-city-wrap .ecosoap-wcblock-city-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    max-width: 100%;
    min-height: 2.9rem;
    padding: 0.65rem 1.15rem 0.65rem 1.1rem;
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 400;
    color: #333;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23666' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 0.8rem;
    border: 1px solid #dcd7cc;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wc-block-components-address-form__city .ecosoap-wcblock-city-wrap select:hover,
.wc-block-checkout .ecosoap-wcblock-city-wrap .ecosoap-wcblock-city-select:hover {
    border-color: #c0b5a2;
}

.wc-block-components-address-form__city .ecosoap-wcblock-city-wrap select:focus,
.wc-block-checkout .ecosoap-wcblock-city-wrap .ecosoap-wcblock-city-select:focus {
    outline: none;
    border-color: #8b9a7c;
    box-shadow: 0 0 0 1px rgba(139, 154, 124, 0.2);
}

/* SelectWoo / Select2: viền / bo cùng cấp với .wc-block-components-text-input (sidebar) */
.woocommerce-checkout .ecosoap-woo-sel2-container.select2-container,
.wc-block-checkout .ecosoap-woo-sel2-container.select2-container,
.wc-block-components-address-form__city .ecosoap-woo-sel2-container.select2-container,
.form-row.ecosoap-city-wrap-classic .ecosoap-woo-sel2-container.select2-container,
p.form-row.ecosoap-city-wrap-classic .ecosoap-woo-sel2-container.select2-container {
    width: 100% !important;
    max-width: 100%;
    display: block;
    box-sizing: border-box;
}

/*
 * Select2 khi dropdownParent nhỏ + flex Blocks: gán position:absolute + top âm lên span.select2-container
 * → ghi đè bằng !important (và JS xóa inline khi open trong checkout-enhancements.js)
 */
.wc-block-checkout .ecosoap-wcblock-city-wrap > .select2-container.ecosoap-woo-sel2-container,
.wc-block-components-address-form__city .ecosoap-wcblock-city-wrap > .select2-container.ecosoap-woo-sel2-container,
.wc-block-checkout .ecosoap-wcblock-city-wrap > .select2-container.select2-container--open,
.wc-block-components-address-form__city .ecosoap-wcblock-city-wrap > .select2-container.select2-container--open {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
}

.woocommerce-checkout .ecosoap-city-wrap-classic.woocommerce-input-wrapper > .select2-container.ecosoap-woo-sel2-container,
.woocommerce-checkout p.form-row .ecosoap-city-wrap-classic.woocommerce-input-wrapper > .select2-container.select2-container--open,
.woocommerce-checkout .ecosoap-city-wrap-classic.woocommerce-input-wrapper > .select2-container.select2-container--open {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
}

.woocommerce-checkout .ecosoap-woo-sel2-container .select2-selection--single,
.wc-block-checkout .ecosoap-woo-sel2-container .select2-selection--single,
.wc-block-components-address-form__city .ecosoap-woo-sel2-container .select2-selection--single,
.form-row.ecosoap-city-wrap-classic .ecosoap-woo-sel2-container .select2-selection--single {
    min-height: 2.9rem;
    border: 1px solid #dcd7cc;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    background-color: #fff;
    box-sizing: border-box;
}

.woocommerce-checkout .ecosoap-woo-sel2-container .select2-selection__rendered,
.wc-block-checkout .ecosoap-woo-sel2-container .select2-selection__rendered,
.wc-block-components-address-form__city .ecosoap-woo-sel2-container .select2-selection__rendered,
.form-row.ecosoap-city-wrap-classic .ecosoap-woo-sel2-container .select2-selection__rendered {
    line-height: 1.45;
    padding: 0.65rem 2.1rem 0.65rem 1rem;
    color: #333;
    font-size: 16px !important;
    font-weight: 400 !important;
}

/* Khớp cỡ chữ với ô Address / Postcode trên checkout block */
.wc-block-checkout .wc-block-components-address-form .ecosoap-woo-sel2-container .select2-selection__rendered,
.wc-block-checkout .wc-block-components-address-form__city .ecosoap-woo-sel2-container .select2-selection__rendered {
    font-size: 16px !important;
}

.woocommerce-checkout .ecosoap-woo-sel2-container .select2-selection__arrow,
.wc-block-checkout .ecosoap-woo-sel2-container .select2-selection__arrow,
.wc-block-components-address-form__city .ecosoap-woo-sel2-container .select2-selection__arrow,
.form-row.ecosoap-city-wrap-classic .ecosoap-woo-sel2-container .select2-selection__arrow {
    height: 2.6rem;
    right: 0.6rem;
}

.woocommerce-checkout .ecosoap-woo-sel2-container.select2-container--default.select2-container--open .select2-selection--single,
.woocommerce-checkout .ecosoap-woo-sel2-container.select2-container--default .select2-selection--single,
.wc-block-checkout .ecosoap-woo-sel2-container.select2-container--default.select2-container--open .select2-selection--single,
.wc-block-components-address-form__city .ecosoap-woo-sel2-container.select2-container--default .select2-selection--single,
.form-row.ecosoap-city-wrap-classic .ecosoap-woo-sel2-container.select2-container--default .select2-selection--single {
    border-color: #8b9a7c;
}

/* Không dùng rule toàn trang — chỉ nơi không phải ô city UK (tránh lệch height/font) */
.woocommerce-page .select2-container--default:not(.ecosoap-woo-sel2-container) .select2-selection--single,
.woocommerce-checkout .select2-container--default:not(.ecosoap-woo-sel2-container) .select2-selection--single,
.wc-block-checkout .select2-container--default:not(.ecosoap-woo-sel2-container) .select2-selection--single {
    background-color: #fff;
    border: 1px solid
        color-mix(in srgb, currentColor 80%, transparent);
    border-radius: 4px;
    box-sizing: border-box;
    color: #2b2d2f;
    font-family: inherit;
    font-size: inherit;
    font-size: 16px;
    font-style: inherit;
    font-weight: inherit;
    height: 50px;
    letter-spacing: inherit;
    line-height: 25px;
    margin: 0;
    min-height: 0;
    padding: 16px 12px;
    text-decoration: inherit;
    text-transform: inherit;
    width: 100%;
    display: flex;
    align-items: center;
}

/*
 * template.css: .select2-dropdown { top: 0; } khiến list dính lên cạnh trên / đè cả dòng tên
 * Gắn chắc dưới trường: dropdownParent = .ecosoap-wcblock-city-wrap (cùng cột, không phải cả form)
 */
.ecosoap-wcblock-city-wrap .select2-dropdown.ecosoap-woo-city-dropdown,
.ecosoap-wcblock-city-wrap .ecosoap-woo-sel2-dropdown.ecosoap-woo-city-dropdown,
.wc-block-components-address-form__city .ecosoap-wcblock-city-wrap .select2-dropdown,
.wc-block-checkout .ecosoap-wcblock-city-wrap .select2-dropdown {
    z-index: 100080 !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0.2rem 0 0 0;
    box-sizing: border-box;
    transform: none;
}

.woocommerce-checkout .ecosoap-woo-city-dropdown,
.wc-block-checkout .ecosoap-woo-city-dropdown,
.ecosoap-wcblock-city-wrap .ecosoap-woo-sel2-dropdown,
.form-row.ecosoap-city-wrap-classic .ecosoap-woo-city-dropdown,
p.form-row.ecosoap-city-wrap-classic .ecosoap-woo-city-dropdown {
    z-index: 100080 !important;
    border: 1px solid #dcd7cc;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Classic: dropdownParent = .woocommerce-input-wrapper — neo ngay dưới field (cùng cách với block) */
.woocommerce-checkout.woocommerce-page .ecosoap-city-wrap-classic.woocommerce-input-wrapper .select2-dropdown.ecosoap-woo-city-dropdown,
.woocommerce-checkout.woocommerce-page p.form-row .ecosoap-city-wrap-classic.woocommerce-input-wrapper .ecosoap-woo-city-dropdown.select2-dropdown,
.woocommerce-checkout.woocommerce-page .form-row .ecosoap-city-wrap-classic.woocommerce-input-wrapper .select2-dropdown {
    z-index: 100080 !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0.2rem 0 0 0;
    box-sizing: border-box;
    transform: none;
}

.woocommerce-checkout .ecosoap-woo-city-dropdown .select2-search__field,
.wc-block-checkout .ecosoap-woo-city-dropdown .select2-search__field,
.ecosoap-wcblock-city-wrap .ecosoap-woo-city-dropdown .select2-search__field {
    border: 1px solid #dcd7cc;
    border-radius: 0.3rem;
    margin: 0.5rem 0.5rem 0.4rem;
    padding: 0.55rem 0.7rem;
    font-size: 16px;
    line-height: 1.4;
    box-sizing: border-box;
    width: calc(100% - 1rem) !important;
    min-height: 44px;
}

/* Ghi đè font nhỏ / dãn dòng thấp từ template (select2-results) */
.woocommerce-checkout .ecosoap-woo-city-dropdown .select2-results,
.wc-block-checkout .ecosoap-woo-city-dropdown .select2-results,
.ecosoap-wcblock-city-wrap .ecosoap-woo-city-dropdown .select2-results {
    font-size: 16px;
    line-height: 1.4;
    padding: 0.4rem 0.5rem 0.5rem;
}

.woocommerce-checkout .ecosoap-woo-city-dropdown .select2-results__options,
.wc-block-checkout .ecosoap-woo-city-dropdown .select2-results__options,
.ecosoap-wcblock-city-wrap .ecosoap-woo-city-dropdown .select2-results__options {
    max-height: min(45vh, 20rem) !important;
    font-size: 16px;
    line-height: 1.45;
}

.woocommerce-checkout .ecosoap-woo-city-dropdown .select2-results__option,
.wc-block-checkout .ecosoap-woo-city-dropdown .select2-results__option,
.ecosoap-wcblock-city-wrap .ecosoap-woo-city-dropdown .select2-results__option {
    font-size: 16px !important;
    line-height: 1.45 !important;
    padding: 0.55rem 0.7rem !important;
    min-height: auto;
}

.woocommerce-checkout .ecosoap-woo-city-dropdown .select2-results__option--highlighted,
.wc-block-checkout .ecosoap-woo-city-dropdown .select2-results__option--highlighted[aria-selected],
.ecosoap-wcblock-city-wrap .ecosoap-woo-city-dropdown .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(139, 154, 124, 0.25) !important;
    color: #1a1a1a;
}

/* ============================================
   FIX LỖI LAYOUT SELECT2 CITY BỊ ĐẨY XUỐNG
   ============================================ */

/* 1. Khung cha làm mỏ neo, ngăn chặn flex stretch bất thường */
.ecosoap-wcblock-city-wrap,
.ecosoap-city-wrap-classic {
    position: relative !important;
    display: block !important;
}

/* 2. Khung input (hiển thị text "Pontypridd") nằm gọn gàng */
.ecosoap-wcblock-city-wrap > .select2-container.ecosoap-woo-sel2-container,
.ecosoap-city-wrap-classic > .select2-container.ecosoap-woo-sel2-container {
    position: relative !important;
    width: 100% !important;
    display: block !important;
}

/* 3. Khung bọc dropdown (danh sách) PHẢI LƠ LỬNG (ABSOLUTE) VÀ HEIGHT = 0 
   Dùng :not(.ecosoap-woo-sel2-container) để phân biệt chính xác với khung input */
.ecosoap-wcblock-city-wrap > .select2-container.select2-container--open:not(.ecosoap-woo-sel2-container),
.ecosoap-city-wrap-classic > .select2-container.select2-container--open:not(.ecosoap-woo-sel2-container) {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 0 !important; /* QUAN TRỌNG: 0px để không bao giờ đẩy các input khác */
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    z-index: 999999 !important; /* Nổi bần bật lên trên cùng */
    transform: none !important;
}

/* 4. Xử lý khi màn hình bị thiếu chiều cao, Select2 tự động mở ngược lên trên (above) */
.ecosoap-wcblock-city-wrap > .select2-container.select2-container--above:not(.ecosoap-woo-sel2-container),
.ecosoap-city-wrap-classic > .select2-container.select2-container--above:not(.ecosoap-woo-sel2-container) {
    top: auto !important;
    bottom: 100% !important;
    margin: 0 0 4px 0 !important;
}

/* 5. Căn chỉnh thẻ danh sách nền trắng bên trong */
.ecosoap-wcblock-city-wrap .select2-dropdown,
.ecosoap-city-wrap-classic .select2-dropdown {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
}

.ecosoap-wcblock-city-wrap .select2-dropdown.select2-dropdown--above,
.ecosoap-city-wrap-classic .select2-dropdown.select2-dropdown--above {
    top: auto !important;
    bottom: 0 !important;
}

/* ============================================
   FIX LỖI CẮT KHUYẾT VÀ BỊ ĐÈ SELECT2 (BẢN TỐI THƯỢNG)
   ============================================ */

/* 1. Phá vỡ mọi giới hạn "nhốt" giao diện của WooCommerce Blocks (nguyên nhân cốt lõi gây lẹm dropdown) */
.wc-block-checkout .wc-block-components-text-input,
.wc-block-checkout .wc-block-components-address-form,
.wc-block-checkout .wc-block-components-form-row,
.wc-block-checkout .wc-block-components-checkout-step,
.wc-block-checkout .wc-block-components-checkout-step__content,
.wc-block-checkout .components-flex-item {
    overflow: visible !important;
    contain: none !important;      /* Tắt cơ chế chặn tràn nội dung của Gutenberg */
    clip-path: none !important;
    transform: none !important;
}

/* 2. Thiết lập Z-index phân tầng từ cha xuống con, đẩy ô City lên nóc */
.wc-block-components-address-form__city {
    position: relative !important;
    z-index: 999999 !important; 
}

.ecosoap-wcblock-city-wrap,
.ecosoap-city-wrap-classic {
    position: relative !important;
    display: block !important;
}

/* 3. Khung dropdown hiển thị lơ lửng, ép chiều rộng khớp với ô input (sửa lỗi mất thanh cuộn) */
.ecosoap-wcblock-city-wrap > .select2-container.select2-container--open:not(.ecosoap-woo-sel2-container),
.ecosoap-city-wrap-classic > .select2-container.select2-container--open:not(.ecosoap-woo-sel2-container) {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important; /* Vô hiệu hóa kích thước pixel cứng do JS sinh ra */
    height: 0 !important;
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    z-index: 999999 !important;
    transform: none !important;
    box-sizing: border-box !important;
}

/* 4. Đảo chiều tự động khi màn hình không đủ chỗ bên dưới */
.ecosoap-wcblock-city-wrap > .select2-container.select2-container--above:not(.ecosoap-woo-sel2-container),
.ecosoap-city-wrap-classic > .select2-container.select2-container--above:not(.ecosoap-woo-sel2-container) {
    top: auto !important;
    bottom: 100% !important;
    margin: 0 0 4px 0 !important;
}

/* 5. Căn chỉnh khối list màu trắng bên trong */
.ecosoap-wcblock-city-wrap .select2-dropdown,
.ecosoap-city-wrap-classic .select2-dropdown {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
    box-sizing: border-box !important;
    border: 1px solid #dcd7cc !important;
}

.ecosoap-wcblock-city-wrap .select2-dropdown.select2-dropdown--above,
.ecosoap-city-wrap-classic .select2-dropdown.select2-dropdown--above {
    top: auto !important;
    bottom: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    font-size: 16px;
}