/*
Theme Name: zenwater
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* ============================================================
   ZenWater - Single Product Page
   ============================================================ */
body.single-product,
body.single-product #wrapper,
body.single-product #main {
    background-color: #f5f7f8 !important;
}

body.single-product .product-main {
    background-color: #fff !important;
    padding: 20px !important;
    margin-bottom: 30px;
    border-radius: 10px;
}

.product-gallery-slider img,
.product-thumbnails img {
    border-radius: 10px;
}

/* --- Single Product: Add to Cart Button --- */
body.single-product .single_add_to_cart_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #4a90ff !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 0 28px !important;
    height: 42px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(74, 144, 255, 0.35) !important;
    text-transform: none !important;
    flex: 1 !important;
}

body.single-product .single_add_to_cart_button::before {
    content: '' !important;
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    flex-shrink: 0 !important;
}

body.single-product .single_add_to_cart_button:hover {
    background: #3a7ee6 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(74, 144, 255, 0.5) !important;
}

span.amount {
    color: #f92e33;
}

.widget_products {
    background-color: #fff !important;
    padding: 20px !important;
    border-radius: 10px;
}

@media screen and (min-width: 850px) {
    .row-divided.row-reverse>.col+.col:not(.large-12) {
        border-right: none;
        padding: 0 !important;
    }
}

.row-large>.col,
.row-large>.flickity-viewport>.flickity-slider>.col {
    padding: 0 15px;
}

ul.product_list_widget li img {
    border-radius: 99%;
    width: 50px;
    height: 50px;
}

.widget-title {
    display: block;
    text-align: center;
    width: 100%;
    color: #0074d28f;
    background-color: #25aff447;
    padding: 10px;
    margin-bottom: .75rem;
    border-radius: 25px;
    color: #0077c8 !important;
    transition: background 0.2s, border-color 0.2s !important;
    border: 1.5px solid #dbeeff !important;
    background: #f4faff !important;
}

.product-section-title-related {
    display: block;
    text-align: center;
    width: 100%;
    color: #0074d28f;
    background-color: #25aff447;
    padding: 10px;
    margin-bottom: .75rem;
    border-radius: 25px;
    color: #0077c8 !important;
    transition: background 0.2s, border-color 0.2s !important;
    border: 1.5px solid #dbeeff !important;
    background: #f4faff !important;
}

span.widget-title {
    font-size: 16px !important;
    text-transform: inherit;
}

.widget .is-divider {
    display: none;
}

.product_list_widget li a {
    font-size: 15px;
    color: #232323 !important;
}

.product_list_widget li .star-rating {
    display: none;
}

.product_list_widget li span.amount {
    font-size: 14px;
}

.widget>ul>li+li,
ul.menu>li+li {
    border-top: none;
}

/*recent blog posts*/
.recent-blog-posts a {
    font-size: 15px;
    color: #232323 !important;
}

.flatsome_recent_posts {
    background-color: #fff !important;
    padding: 20px !important;
    border-radius: 10px;
}

/*product tabs*/
.woocommerce-tabs {
    background-color: #fff !important;
    padding: 20px !important;
    margin-bottom: 30px;
    border-radius: 10px;
}

.product-tabs {
    padding: 20px !important;
}

/*related products*/
.related-products-wrapper {
    background-color: #fff !important;
    padding: 20px !important;
    margin-bottom: 30px;
    border-radius: 10px;
}

/* --- Quantity selector + button alignment --- */
body.single-product form.cart {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    align-items: center !important;
}

body.single-product form.cart .quantity {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    height: 42px !important;
    border: 1px solid #dde2e8 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #f5f7f8 !important;
}

body.single-product form.cart .quantity .ux-quantity__button {
    width: 36px !important;
    height: 42px !important;
    border: none !important;
    background: transparent !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #333 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

body.single-product form.cart .quantity .ux-quantity__button:hover {
    background: #e8ecf0 !important;
}

body.single-product form.cart .quantity input.qty {
    width: 40px !important;
    height: 42px !important;
    border: none !important;
    border-left: 1px solid #dde2e8 !important;
    border-right: 1px solid #dde2e8 !important;
    text-align: center !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    -moz-appearance: textfield !important;
    box-shadow: none !important;
}

body.single-product form.cart .quantity input.qty::-webkit-outer-spin-button,
body.single-product form.cart .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}


/* ============================================================
   ZenWater - Product Box Customization
   ============================================================ */

/* --- Card Container: bo tròn, shadow, nền trắng --- */
.product-small .col-inner {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    border: 1px solid #f0f0f0;
}

.product-small .col-inner:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* --- Image Area: padding, nền sáng --- */
.product-small .box-image {
    background: #f8fafb;
    padding: 20px;
    border-radius: 16px 16px 0 0;
}

.product-small .box-image img {
    border-radius: 10px;
    mix-blend-mode: multiply;
}

/* --- Text Area: padding tốt hơn --- */
.product-small .box-text {
    padding: 16px 20px 20px !important;
}

/* --- Product Title: in đậm, lớn hơn --- */
.product-small .product-title,
.product-small .name.product-title {
    font-weight: 700 !important;
    font-size: 1.05em !important;
    color: #1a1a2e !important;
    margin-bottom: 2px !important;
    line-height: 1.3 !important;
}

.product-small .product-title a {
    color: inherit !important;
    text-decoration: none !important;
}

/* --- Short Description: màu xanh nhạt --- */
.zen-short-desc {
    font-size: 0.82em !important;
    color: #5bb5d5 !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
}

/* --- Ẩn Category label (backup CSS) --- */
.product-small .product-cat {
    display: none !important;
}

/* --- Ẩn Star Rating (backup CSS) --- */
.product-small .star-rating,
.product-small .count {
    display: none !important;
}

/* --- Price Wrapper: flex layout cho giá + nút cart --- */
.product-small .price-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* --- Price: lớn, đậm, màu sắc --- */
.product-small .price-wrapper .price {
    font-size: 1.25em !important;
    font-weight: 700 !important;
    color: #e74c3c !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.product-small .price-wrapper .price ins {
    text-decoration: none !important;
    font-weight: 700 !important;
}

.product-small .price-wrapper .price del {
    color: #999 !important;
    font-size: 0.8em !important;
    font-weight: 400 !important;
}

/* --- Add to Cart Icon Button: tròn, xanh --- */
.zen-cart-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    background: #2196F3 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
    box-shadow: 0 3px 10px rgba(33, 150, 243, 0.3) !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}

.zen-cart-btn:hover {
    background: #1976D2 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 5px 16px rgba(33, 150, 243, 0.45) !important;
    color: #ffffff !important;
}

.zen-cart-btn svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #ffffff !important;
    fill: none !important;
}

/* Loading state khi đang thêm vào giỏ */
.zen-cart-btn.loading {
    opacity: 0.7 !important;
    pointer-events: none !important;
}

.zen-cart-btn.added {
    background: #4CAF50 !important;
}

/* --- Ẩn nút Add to Cart text mặc định --- */
.product-small .add-to-cart-button,
.product-small .box-text .button.product_type_simple,
.product-small .box-text .button.product_type_variable,
.product-small .box-text .add_to_cart_button:not(.zen-cart-btn) {
    display: none !important;
}

/* --- Ẩn các badges Sale/New nếu cần (tuỳ chọn) --- */
/*
.product-small .badge {
    display: none !important;
}
*/

/* --- Hover effect trên image --- */
.product-small .box-image .image-fade_in_back img:first-child {
    transition: transform 0.4s ease !important;
}

.product-small .col-inner:hover .box-image .image-fade_in_back img:first-child {
    transform: scale(1.03) !important;
}

/* --- Out of stock label style --- */
.product-small .out-of-stock-label {
    background: rgba(0, 0, 0, 0.6) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 4px 12px !important;
    font-size: 0.8em !important;
}


/* --- Section Title: giống demo --- */
.section-title-container {
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
}

.section-title.section-title-normal {
    font-size: 1.5em !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    letter-spacing: 0.01em !important;
    font-style: normal !important;
    text-transform: none !important;
    margin-bottom: 0 !important;
    padding-left: 16px !important;
    border-left: 4px solid #2196F3 !important;
    line-height: 1.3 !important;
}

.section-title.section-title-normal .section-title-main {
    font-weight: 800 !important;
    font-style: normal !important;
}

/* Ẩn border mặc định của Flatsome (thẻ <b>) */
.section-title.section-title-normal b {
    display: none !important;
}

/* Giảm khoảng cách giữa section title và product grid */
.section-title-container+.row,
.section-title-container+.woocommerce,
.section-title-box+.section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Giảm padding section chứa title */
.section.section-title-box {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}


/* ============================================================
   ZenWater - Hero Banner Customization
   ============================================================ */

/* --- Hero Banner: dark style giống demo --- */
.banner.has-hover {
    border-radius: 0 !important;
    overflow: hidden !important;
}

.banner .banner-bg {
    transition: transform 0.5s ease !important;
}

.banner:hover .banner-bg {
    transform: scale(1.03) !important;
}

/* Banner text styling */
.banner .text-box .banner-text h1,
.banner .text-box .banner-text h2 {
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3) !important;
}

/* CTA Button trong banner */
.banner .button.primary,
.banner .button.white {
    border-radius: 30px !important;
    padding: 12px 36px !important;
    font-weight: 600 !important;
    font-size: 1em !important;
    letter-spacing: 0.02em !important;
    transition: all 0.3s ease !important;
}

.banner .button.primary:hover,
.banner .button.white:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}

/* ============================================================
   ZenWater - Brand Logos Section
   ============================================================ */

/* --- Brand box: card giống demo --- */
.box.has-hover.box-text-bottom {
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
    border: 1px solid #eef2f5 !important;
    padding: 10px 10px 10px !important;
    text-align: center !important;
}

.box.has-hover.box-text-bottom:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px) !important;
}

/* --- Logo: phóng to, bỏ aspect ratio Flatsome --- */
.box.has-hover.box-text-bottom .box-image {
    padding: 0 !important;
    margin: 0 auto 8px !important;
    height: auto !important;
    overflow: visible !important;
}

/* Bỏ padding-top aspect ratio của Flatsome */
.box.has-hover.box-text-bottom .box-image>div,
.box.has-hover.box-text-bottom .box-image .image-cover,
.box.has-hover.box-text-bottom .box-image .image-none {
    padding-top: 0 !important;
    height: auto !important;
    position: relative !important;
}

.box.has-hover.box-text-bottom .box-image img {
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    margin: 0 auto !important;
    display: block !important;
    position: relative !important;
}

/* --- Brand name: text không xuống hàng --- */
.box.has-hover.box-text-bottom .box-text {
    padding: 10px !important;
}

.box.has-hover.box-text-bottom .box-text-inner {
    padding: 0 !important;
}

.box.has-hover.box-text-bottom .box-text-inner p {
    font-size: 1em !important;
    font-weight: 500 !important;
    font-style: normal !important;
    color: #62748e !important;
    margin: 0 !important;
    line-height: 1.625 !important;
    word-wrap: break-word !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #62748e !important;
    background-clip: unset !important;
}

/* --- Brand row: override Flatsome grid --- */
.row:has(> .col > .col-inner > .box.has-hover.box-text-bottom:not(.box-blog-post)) {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    justify-content: center !important;
    max-width: 1160px !important;
    margin: 0 auto !important;
}

.row:has(> .col > .col-inner > .box.has-hover.box-text-bottom:not(.box-blog-post))>.col {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
}

.row:has(> .col > .col-inner > .box.has-hover.box-text-bottom:not(.box-blog-post))>.col>.col-inner {
    padding: 0 !important;
}

.col-inner>.box.has-hover.box-text-bottom {
    width: 100% !important;
    margin: 0 !important;
}

/* --- Logo items (nếu dùng element Logo) --- */
.logo-item {
    padding: 8px 12px !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
    opacity: 0.75;
}

.logo-item:hover {
    opacity: 1 !important;
    transform: scale(1.08) !important;
}

.logo-item img {
    max-height: 60px !important;
    object-fit: contain !important;
    filter: grayscale(20%);
    transition: filter 0.3s ease !important;
}

.logo-item:hover img {
    filter: grayscale(0%) !important;
}

/* ============================================================
   ZenWater - "Tại sao nên chọn ZenWater?" Section
   ============================================================ */

/* --- Row: feature cols đều, cùng width block sản phẩm --- */
.row:has(> .col.large-2 h3) {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    max-width: 1160px !important;
    margin: 0 auto !important;
}

.row:has(> .col.large-2 h3)>.col.large-2 {
    flex: 1 1 0 !important;
    width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
}

/* --- Feature card styling trên col-inner --- */
.row:has(> .col.large-2 h3)>.col.large-2>.col-inner {
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
    padding: 36px 16px 32px !important;
    text-align: center !important;
    transition: all 0.35s ease !important;
    border: 1px solid #eef2f5 !important;
    height: 100% !important;
}

/* --- Hover effect --- */
.row:has(> .col.large-2 h3)>.col.large-2>.col-inner:hover {
    box-shadow: 0 8px 25px rgba(0, 120, 200, 0.15) !important;
    transform: translateY(-5px) !important;
    border-color: #b3d9f2 !important;
}

/* --- Base icon circle (::before) --- */
.row:has(> .col.large-2 h3)>.col.large-2>.col-inner::before {
    content: '' !important;
    display: block !important;
    width: 56px !important;
    height: 56px !important;
    margin: 0 auto 14px !important;
    border-radius: 50% !important;
    background-color: #e3f2fd !important;
    background-size: 32px 32px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: all 0.35s ease !important;
}

/* Hover: circle xanh đậm (giữ hình tròn) */
.row:has(> .col.large-2 h3)>.col.large-2>.col-inner:hover::before {
    background-color: #25aff4 !important;
    transform: scale(1.1) !important;
}

/* === 5 SVG Icons (Lucide style) === */

/* 1. Giao Hàng Nhanh - Truck */
.row:has(> .col.large-2 h3)>.col:nth-child(1)>.col-inner::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2325aff4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E") !important;
}

.row:has(> .col.large-2 h3)>.col:nth-child(1)>.col-inner:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E") !important;
}

/* 2. Thương Hiệu Uy Tín - Shield Check */
.row:has(> .col.large-2 h3)>.col:nth-child(2)>.col-inner::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2325aff4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") !important;
}

.row:has(> .col.large-2 h3)>.col:nth-child(2)>.col-inner:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") !important;
}

/* 3. Giá Cả Hợp Lý - Dollar Circle */
.row:has(> .col.large-2 h3)>.col:nth-child(3)>.col-inner::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2325aff4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 18V6'/%3E%3C/svg%3E") !important;
}

.row:has(> .col.large-2 h3)>.col:nth-child(3)>.col-inner:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 18V6'/%3E%3C/svg%3E") !important;
}

/* 4. Sạch & An Toàn - Droplet */
.row:has(> .col.large-2 h3)>.col:nth-child(4)>.col-inner::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2325aff4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z'/%3E%3C/svg%3E") !important;
}

.row:has(> .col.large-2 h3)>.col:nth-child(4)>.col-inner:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z'/%3E%3C/svg%3E") !important;
}

/* 5. Phục Vụ Tận Tâm - Smile */
.row:has(> .col.large-2 h3)>.col:nth-child(5)>.col-inner::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2325aff4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3C/svg%3E") !important;
}

.row:has(> .col.large-2 h3)>.col:nth-child(5)>.col-inner:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3C/svg%3E") !important;
}

/* --- Title text --- */
.row:has(> .col.large-2 h3)>.col.large-2 h3 {
    font-size: 1.25em !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
    margin-bottom: 8px !important;
    transition: color 0.35s ease !important;
}

.row:has(> .col.large-2 h3)>.col.large-2>.col-inner:hover h3 {
    color: #25aff4 !important;
}

/* --- Description text --- */
.row:has(> .col.large-2 h3)>.col.large-2 p {
    font-size: 0.95em !important;
    color: #62748e !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* ============================================================
   ZenWater - CTA Banner "Bạn đang cần đổi nước hôm nay?"
   ============================================================ */

/* --- Section: nền xanh #25aff4, đậm dưới --- */
.section:has(.row.align-middle):has(.img.circle) {
    background: #25aff4 !important;
    border-radius: 0 !important;
    padding: 40px 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* SVG sóng: fill tối ở dưới → nửa dưới đậm hơn, sóng lướt TRÊN ảnh tròn */
.section:has(.row.align-middle):has(.img.circle)::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0.15 !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C20,60 40,40 60,50 C80,60 100,40 100,50 L100,100 L0,100 Z' fill='%23003355'/%3E%3Cpath d='M0,60 C30,70 50,50 70,60 C90,70 100,50 100,60 L100,100 L0,100 Z' fill='%23003355' opacity='0.5'/%3E%3C/svg%3E") no-repeat bottom center !important;
    background-size: 100% 100% !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Nội dung text: z-index cao nhất → trên cả sóng */
.section:has(.row.align-middle):has(.img.circle) .section-content {
    position: relative !important;
    z-index: 3 !important;
}

.section:has(.row.align-middle):has(.img.circle) .section-bg {
    background: transparent !important;
}

/* --- Ảnh tròn: z-index thấp hơn sóng → sóng lướt trên ảnh, ảnh mờ hơn --- */
.section:has(.row.align-middle):has(.img.circle) .img.circle {
    position: relative !important;
    z-index: 1 !important;
}

.section:has(.row.align-middle):has(.img.circle) .img.circle .img-inner {
    border: 6px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

.section:has(.row.align-middle):has(.img.circle) .img.circle img {
    mix-blend-mode: overlay !important;
    opacity: 0.7 !important;
}

/* --- Text: màu trắng --- */
.section:has(.row.align-middle):has(.img.circle) h2 {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-style: italic !important;
}

.section:has(.row.align-middle):has(.img.circle) p {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* --- Button: trắng, chữ xanh primary --- */
.section:has(.row.align-middle):has(.img.circle) a.button.white {
    background: #ffffff !important;
    color: #25aff4 !important;
    border: none !important;
    border-radius: 9999px !important;
    padding: 14px 32px !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
}

.section:has(.row.align-middle):has(.img.circle) a.button.white:hover {
    background: #f8fafc !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* --- Phone number bên phải button --- */
.section:has(.row.align-middle):has(.img.circle) a.button.white::after {
    content: '———  078 5858 879' !important;
    position: absolute !important;
    left: calc(100% + 20px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    font-style: normal !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
    font-size: 1.25rem !important;
}

@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/

    /* Card mobile adjustments */
    .product-small .box-image {
        padding: 12px;
    }

    .product-small .box-text {
        padding: 12px 14px 14px !important;
    }

    .product-small .product-title,
    .product-small .name.product-title {
        font-size: 0.95em !important;
    }

    .zen-short-desc {
        font-size: 0.78em !important;
        margin-bottom: 8px !important;
    }

    .product-small .price-wrapper .price {
        font-size: 1.1em !important;
    }

    .zen-cart-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    .zen-cart-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Hero banner mobile */
    .banner .text-box .banner-text h1,
    .banner .text-box .banner-text h2 {
        font-size: 1.5em !important;
    }

    .banner .button.primary,
    .banner .button.white {
        padding: 10px 24px !important;
        font-size: 0.9em !important;
    }

    /* Section title mobile */
    .section-title.section-title-normal {
        font-size: 1.2em !important;
    }

    /* Brand logos mobile */
    .logo-item img {
        max-height: 40px !important;
    }
}

/* ============================================================
   ZenWater - Testimonials "Khách Hàng Nói Gì Về Chúng Tôi"
   ============================================================ */

/* --- Icon-box: chuyển từ ngang (icon-box-left) sang dọc --- */
.icon-box.testimonial-box.icon-box-left {
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* --- Avatar: di chuyển xuống dưới, đứng cạnh meta --- */
.icon-box.testimonial-box .icon-box-img.testimonial-image {
    order: 3 !important;
    width: 48px !important;
    min-width: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    margin-top: -58px !important;
    align-self: flex-start !important;
    flex-shrink: 0 !important;
}

.icon-box.testimonial-box .icon-box-img.testimonial-image img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    object-fit: cover !important;
}

/* --- Text content: full width --- */
.icon-box.testimonial-box .icon-box-text {
    order: 1 !important;
    width: 100% !important;
    padding-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* --- Star ratings (top) --- */
.testimonial-box .star-rating {
    margin-bottom: 20px !important;
    font-size: 1.15em !important;
    order: 1 !important;
}

.testimonial-box .star-rating span::before {
    color: #f59e0b !important;
}

/* --- Review text (middle) --- */
.testimonial-box .testimonial-text {
    order: 2 !important;
    flex-grow: 1 !important;
    margin-bottom: 0 !important;
}

.testimonial-box .testimonial-text p {
    color: #475569 !important;
    font-size: 0.95rem !important;
    line-height: 1.75 !important;
    font-style: italic !important;
    margin-bottom: 0 !important;
}

/* --- Author section (bottom) with avatar --- */
.testimonial-box .testimonial-meta {
    order: 3 !important;
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 20px !important;
    margin-top: 24px !important;
    width: 100% !important;
    padding-left: 60px !important;
    min-height: 48px !important;
}

/* --- Author name --- */
.testimonial-box .testimonial-name {
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1.4 !important;
    margin-right: 0 !important;
}

/* --- "Đã mua hàng" badge --- */
.testimonial-box .testimonial-name::after {
    content: "✓ Đã mua hàng" !important;
    background-color: #f0fdf4 !important;
    color: #16a34a !important;
    padding: 3px 10px !important;
    border-radius: 9999px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    font-family: 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
    border: 1px solid #bbf7d0 !important;
    white-space: nowrap !important;
    letter-spacing: 0.5px !important;
}

/* --- Divider ẩn --- */
.testimonial-box .testimonial-name-divider {
    display: none !important;
}

/* --- Company/role text (dòng 2, xuống hàng) --- */
.testimonial-box .testimonial-company {
    color: #94a3b8 !important;
    font-size: 0.85rem !important;
    display: block !important;
    flex-basis: 100% !important;
    line-height: 1.4 !important;
}

/* --- Section nền xám nhạt --- */
.section:has(.testimonial-box) {
    background-color: #f8fafc !important;
}

.section:has(.testimonial-box)>.section-bg {
    background-color: #f8fafc !important;
}

/* --- Card container: nền trắng --- */
.testimonial-box .col-inner,
.col-inner:has(.testimonial-box) {
    background: #ffffff !important;
    border-radius: 24px !important;
    padding: 32px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #f1f5f9 !important;
    transition: all 0.3s ease !important;
}

.testimonial-box .col-inner:hover,
.col-inner:has(.testimonial-box):hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-4px) !important;
}

/* --- Flatsome border override --- */
.col-inner:has(.testimonial-box) .is-border {
    display: none !important;
}

/* ============================================================
   ZenWater - Blog "Tin Tức & Blog"
   ============================================================ */

.blog-header>.col-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
}

.blog-header>.col-inner>.section-title-container {
    width: 100% !important;
}

.blog-header>.col-inner>.blog-subtitle {
    flex: 1 !important;
    text-align: left !important;
}

.blog-header>.col-inner>.blog-subtitle p,
.blog-header>.col-inner>.blog-subtitle * {
    text-align: left !important;
}

.blog-header>.col-inner>.blog-view-all {
    margin-left: 40px !important;
    white-space: nowrap !important;
    text-align: right !important;
}

/* Card */
.box.box-blog-post {
    background: #ffffff !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

.box.box-blog-post:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-4px) !important;
}

/* Image hover zoom */
.box.box-blog-post:hover .box-image img {
    transform: scale(1.05) !important;
}

.box.box-blog-post .box-image img {
    transition: transform 0.5s ease !important;
}

/* Text */
.box.box-blog-post .box-text,
.box.box-blog-post .box-text.text-center {
    text-align: left !important;
}

.box.box-blog-post .box-text-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
}

/* Date: góc trái trên tiêu đề */
.box.box-blog-post .post-meta {
    order: -1 !important;
    color: #90a1b9 !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    margin: 0 0 8px 0 !important;
    text-align: left !important;
    opacity: 1 !important;
    width: auto !important;
}

.box.box-blog-post .is-divider {
    display: none !important;
}

.box.box-blog-post .post-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
}

.box.box-blog-post .post-title a {
    color: inherit !important;
    transition: color 0.3s ease !important;
}

.box.box-blog-post:hover .post-title a {
    color: #25aff4 !important;
}

.box.box-blog-post .from_the_blog_excerpt {
    color: #64748b !important;
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
}

/* "Xem thêm →" */
.box.box-blog-post .button.primary.is-link {
    color: #25aff4 !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-transform: none !important;
    background: none !important;
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 16px !important;
    margin-top: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
}

.box.box-blog-post .button.primary.is-link::after {
    content: '' !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2325aff4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5l7 7-7 7'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    transition: transform 0.3s ease !important;
}

.box.box-blog-post .button.primary.is-link:hover {
    color: #1a8cd8 !important;
}

.box.box-blog-post .button.primary.is-link:hover::after {
    transform: translateX(4px) !important;
}

/* ============================================================
   ZenWater - Responsive Mobile
   ============================================================ */

/* Tablet: ≤ 849px */
@media (max-width: 849px) {

    /* Features: 3 cột, cho phép wrap */
    .row:has(> .col.large-2 h3) {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .row:has(> .col.large-2 h3)>.col.large-2 {
        flex: 0 0 30% !important;
        max-width: 30% !important;
    }

    /* Brand: CSS Grid 3 cột */
    .row:has(> .col > .col-inner > .box.has-hover.box-text-bottom:not(.box-blog-post)) {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
        max-width: 100% !important;
    }

    .row:has(> .col > .col-inner > .box.has-hover.box-text-bottom:not(.box-blog-post))>.col {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
    }

    /* Testimonial: giảm padding */
    .testimonial-box .col-inner,
    .col-inner:has(.testimonial-box) {
        padding: 24px !important;
    }
}

/* Phone: ≤ 549px */
@media (max-width: 549px) {

    /* Features: 2 cột */
    .row:has(> .col.large-2 h3)>.col.large-2 {
        flex: 0 0 47% !important;
        max-width: 47% !important;
    }

    /* Features card: giảm padding */
    .row:has(> .col.large-2 h3)>.col.large-2>.col-inner {
        padding: 24px 12px 20px !important;
    }

    /* Brand: CSS Grid 3 cột trên phone */
    .row:has(> .col > .col-inner > .box.has-hover.box-text-bottom:not(.box-blog-post)) {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }

    .row:has(> .col > .col-inner > .box.has-hover.box-text-bottom:not(.box-blog-post))>.col,
    .row:has(> .col > .col-inner > .box.has-hover.box-text-bottom:not(.box-blog-post))>.col.small-6,
    .row:has(> .col > .col-inner > .box.has-hover.box-text-bottom:not(.box-blog-post))>.col.small-12,
    .row:has(> .col > .col-inner > .box.has-hover.box-text-bottom:not(.box-blog-post))>[class*="small-"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .row:has(> .col > .col-inner > .box.has-hover.box-text-bottom:not(.box-blog-post))>.col>.col-inner,
    .row:has(> .col > .col-inner > .box.has-hover.box-text-bottom:not(.box-blog-post)) .box.has-hover.box-text-bottom {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Blog header: subtitle + link xếp dọc */
    .blog-header>.col-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .blog-header>.col-inner>.blog-view-all {
        margin-left: 0 !important;
        margin-top: 8px !important;
    }

    /* Blog: force single column on phone */
    .row:has(> .col > .col-inner > .box.box-blog-post) {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    .row:has(> .col > .col-inner > .box.box-blog-post)>.col,
    .row:has(> .col > .col-inner > .box.box-blog-post)>.col.large-6,
    .row:has(> .col > .col-inner > .box.box-blog-post)>.col.medium-6,
    .row:has(> .col > .col-inner > .box.box-blog-post)>.col.small-6,
    .row:has(> .col > .col-inner > .box.box-blog-post)>[class*="small-"],
    .row:has(> .col > .col-inner > .box.box-blog-post)>[class*="large-"],
    .row:has(> .col > .col-inner > .box.box-blog-post)>[class*="medium-"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Blog card: full width */
    .box.box-blog-post {
        width: 100% !important;
        min-width: 100% !important;
        margin-bottom: 16px !important;
    }

    /* Testimonial: giảm padding thêm */
    .testimonial-box .col-inner,
    .col-inner:has(.testimonial-box) {
        padding: 20px !important;
        border-radius: 16px !important;
    }

    /* CTA Banner: padding nhỏ */
    .section:has(.row.align-middle):has(.img.circle) {
        padding: 24px 0 !important;
    }
}

/* ============================================================
   ZenWater - Hide Empty Tabs (all tabs removed)
   ============================================================ */

.woocommerce-tabs.wc-tabs-wrapper {
    display: none !important;
}

/* ============================================================
   ZenWater - Standalone Description Block
   ============================================================ */

.zen-description-block {
    background: #ffffff;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.zen-description-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f0f4f8;
}

.zen-description-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    padding: 10px;
    margin-bottom: .75rem;
    border-radius: 25px;
    color: #0077c8 !important;
    transition: background 0.2s, border-color 0.2s !important;
    border: 1.5px solid #dbeeff !important;
    background: #f4faff !important;
}

.zen-description-title svg {
    flex-shrink: 0;
}

.zen-description-content {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.8;
}

.zen-description-content p {
    margin-bottom: 14px;
}

.zen-description-content p:last-child {
    margin-bottom: 0;
}

/* Mobile */
@media (max-width: 549px) {
    .zen-description-block {
        padding: 20px 16px;
        border-radius: 8px;
    }

    .zen-description-title {
        font-size: 1.1rem;
    }

    .zen-description-content {
        font-size: 0.9rem;
    }
}

/* ============================================================
   ZenWater - Standalone Reviews Block
   ============================================================ */

.zen-reviews-block {
    background: #ffffff;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.zen-reviews-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f0f4f8;
}

.zen-reviews-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    padding: 10px;
    margin-bottom: .75rem;
    border-radius: 25px;
    color: #0077c8 !important;
    transition: background 0.2s, border-color 0.2s !important;
    border: 1.5px solid #dbeeff !important;
    background: #f4faff !important;
}

.zen-reviews-title svg {
    flex-shrink: 0;
}

/* Review list inside block */
.zen-reviews-block .woocommerce-Reviews {
    padding: 0 !important;
}

.zen-reviews-block #comments {
    margin: 0;
}

.zen-reviews-block .commentlist {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.zen-reviews-block .commentlist li {
    padding: 20px 0;
    border-bottom: 1px solid #f0f4f8;
}

.zen-reviews-block .commentlist li:last-child {
    border-bottom: none;
}

/* Star rating in reviews */
.zen-reviews-block .star-rating {
    color: #f59e0b;
    margin-bottom: 8px;
}

/* Review author */
.zen-reviews-block .woocommerce-review__author {
    font-weight: 700;
    color: #1a1a2e;
}

.zen-reviews-block .woocommerce-review__dash {
    display: none;
}

.zen-reviews-block .woocommerce-review__published-date {
    color: #94a3b8;
    font-size: 0.85rem;
    display: block;
    margin-top: 2px;
}

/* Review text */
.zen-reviews-block .description p {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* Review form */
.zen-reviews-block #review_form_wrapper {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #f0f4f8;
}

.zen-reviews-block #reply-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 16px;
}

.zen-reviews-block .comment-form-rating label {
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
}

.zen-reviews-block .comment-form textarea,
.zen-reviews-block .comment-form input[type="text"],
.zen-reviews-block .comment-form input[type="email"] {
    border: 1px solid #dde2e8;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.9rem;
    transition: border-color 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.zen-reviews-block .comment-form textarea:focus,
.zen-reviews-block .comment-form input[type="text"]:focus,
.zen-reviews-block .comment-form input[type="email"]:focus {
    border-color: #25aff4;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 175, 244, 0.1);
}

.zen-reviews-block .form-submit .submit {
    background: #25aff4 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 28px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

.zen-reviews-block .form-submit .submit:hover {
    background: #1a8cd8 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(37, 175, 244, 0.35);
}

/* Mobile adjustments */
@media (max-width: 549px) {
    .zen-reviews-block {
        padding: 20px 16px;
        border-radius: 8px;
    }

    .zen-reviews-title {
        font-size: 1.1rem;
    }

    .zen-reviews-block .commentlist li {
        padding: 16px 0;
    }
}

/* ============================================================
   ZenWater - Custom Footer
   ============================================================ */

.zen-footer {
    background: #0f1729 !important;
    border-top: 3px solid #25aff4;
    padding: 60px 0 50px;
    color: #99a1af;
    font-size: 14px;
    line-height: 1.7;
}

.zen-footer-inner {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

/* --- Column 1: Brand --- */
.zen-footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.zen-footer-brand-name {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.zen-footer-desc {
    color: #99a1af;
    font-size: 0.9rem;
    line-height: 1.75;
    margin-bottom: 20px;
}

/* --- Social Icons --- */
.zen-footer-social {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.zen-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(153, 161, 175, 0.3);
    color: #99a1af;
    transition: all 0.3s ease;
    position: relative;
}

.zen-social-icon:hover {
    background: #25aff4;
    border-color: #25aff4;
    color: #ffffff;
    transform: translateY(-2px);
}

/* --- Tooltip on hover --- */
.zen-social-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: 0.72rem;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    pointer-events: none;
}

.zen-social-icon:hover::after {
    opacity: 1;
    visibility: visible;
}

/* --- Column Titles --- */
.zen-footer-title {
    color: #ffffff !important;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 8px;
    display: block;
    font-style: normal;
    position: relative;
    border-bottom: none;
}

.zen-footer-title::after {
    content: '';
    display: block;
    width: 30px;
    height: 4px;
    background: #25aff4;
    border-radius: 2px;
}

/* --- Links --- */
.zen-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.zen-footer-links li {
    margin-bottom: 10px;
}

.zen-footer-links li a {
    color: #99a1af;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.zen-footer-links li a::before {
    content: '\203A' !important;
    color: #99a1af;
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1;
}

.zen-footer-links li a:hover::before {
    color: #25aff4;
}

.zen-footer-links li a:hover {
    color: #25aff4;
    padding-left: 4px;
}

/* --- Contact Items --- */
.zen-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.zen-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: rgba(37, 175, 244, 0.1);
    flex-shrink: 0;
}

.zen-contact-label {
    display: block;
    color: #99a1af;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 2px;
    text-transform: uppercase;
}

.zen-contact-value {
    display: block;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 500;
}

/* --- Ẩn Flatsome footer gốc --- */
.footer-widgets.footer-2 {
    display: none !important;
}

/* --- Absolute Footer (bottom bar) --- */
.absolute-footer {
    background: #0b1120 !important;
    border-top: 1px solid rgba(37, 175, 244, 0.15) !important;
    color: #99a1af !important;
    padding: 20px 0 !important;
}

.absolute-footer a {
    color: #99a1af !important;
    transition: color 0.3s ease !important;
}

.absolute-footer a:hover {
    color: #25aff4 !important;
}

/* --- Responsive: Tablet --- */
@media (max-width: 849px) {
    .zen-footer {
        padding: 40px 0 35px;
    }

    .zen-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 28px 24px;
        padding: 0 24px;
    }

    /* Brand column spans full width on tablet */
    .zen-footer-col.zen-footer-brand {
        grid-column: 1 / -1;
        text-align: center;
        padding-bottom: 24px;
        border-bottom: 1px solid rgba(153, 161, 175, 0.15);
        margin-bottom: 4px;
    }

    .zen-footer-col.zen-footer-brand .zen-footer-logo {
        justify-content: center;
    }

    .zen-footer-col.zen-footer-brand .zen-footer-desc {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
        font-size: 0.85rem;
    }

    .zen-footer-col.zen-footer-brand .zen-footer-social {
        justify-content: center;
    }

    /* Footer titles smaller on tablet */
    .zen-footer-title {
        font-size: 1rem;
        margin-bottom: 12px;
    }

    .zen-footer-title::after {
        width: 24px;
        height: 3px;
    }

    /* Links tighter spacing */
    .zen-footer-links li {
        margin-bottom: 8px;
    }

    .zen-footer-links li a {
        font-size: 0.85rem;
    }

    /* Contact items compact */
    .zen-contact-item {
        gap: 10px;
        margin-bottom: 14px;
    }

    .zen-contact-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .zen-contact-icon svg {
        width: 16px;
        height: 16px;
    }

    .zen-contact-label {
        font-size: 0.7rem;
    }

    .zen-contact-value {
        font-size: 0.85rem;
    }
}

/* --- Responsive: Phone --- */
@media (max-width: 549px) {
    .zen-footer {
        padding: 32px 0 24px;
    }

    .zen-footer-inner {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0 16px;
    }

    /* Each column gets bottom border separator */
    .zen-footer-col {
        padding-bottom: 24px;
        margin-bottom: 24px;
        border-bottom: 1px solid rgba(153, 161, 175, 0.12);
    }

    .zen-footer-col:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    /* Brand: centered on phone */
    .zen-footer-col.zen-footer-brand {
        text-align: center;
    }

    .zen-footer-col.zen-footer-brand .zen-footer-logo {
        justify-content: center;
    }

    .zen-footer-col.zen-footer-brand .zen-footer-desc {
        font-size: 0.82rem;
        line-height: 1.65;
        margin-bottom: 14px;
    }

    .zen-footer-col.zen-footer-brand .zen-footer-social {
        justify-content: center;
    }

    /* Social icons slightly smaller on phone */
    .zen-social-icon {
        width: 34px;
        height: 34px;
    }

    .zen-social-icon svg {
        width: 14px;
        height: 14px;
    }

    /* Links columns: 2-column grid on phone */
    .zen-footer-col:not(.zen-footer-brand):not(.zen-footer-contact) .zen-footer-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 12px;
    }

    .zen-footer-links li {
        margin-bottom: 4px;
    }

    .zen-footer-links li a {
        font-size: 0.82rem;
        gap: 5px;
    }

    /* Footer titles */
    .zen-footer-title {
        font-size: 0.95rem;
        margin-bottom: 12px;
        padding-bottom: 6px;
    }

    .zen-footer-title::after {
        width: 22px;
        height: 3px;
    }

    /* Contact: horizontal layout on phone */
    .zen-footer-col.zen-footer-contact .zen-contact-item {
        gap: 10px;
        margin-bottom: 12px;
    }

    .zen-contact-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .zen-contact-icon svg {
        width: 15px;
        height: 15px;
    }

    .zen-contact-label {
        font-size: 0.68rem;
        letter-spacing: 0.8px;
    }

    .zen-contact-value {
        font-size: 0.85rem;
    }

    /* Absolute footer bottom bar */
    .absolute-footer {
        padding: 14px 0 !important;
        font-size: 0.8rem !important;
    }
}

/* --- Search field placeholder color --- */
.search-field::placeholder {
    color: #9ab8d4 !important;
    opacity: 1 !important;
}

.search-field::-webkit-input-placeholder {
    color: #9ab8d4 !important;
}

.search-field::-moz-placeholder {
    color: #9ab8d4 !important;
    opacity: 1 !important;
}

.search-field:-ms-input-placeholder {
    color: #9ab8d4 !important;
}

/* --- Search icon button: smaller like demo --- */
.ux-search-submit.submit-button {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    line-height: 30px !important;
}

.ux-search-submit.submit-button .icon-search {
    font-size: 13px !important;
}

/* --- Header phone buttons: refined like demo --- */
.header-main .button.primary.is-outline {
    border: 1.5px solid #dbeeff !important;
    background: #f4faff !important;
    color: #0077c8 !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    letter-spacing: 0.2px !important;
    padding: 5px 16px !important;
    transition: background 0.2s, border-color 0.2s !important;
}

.header-main .button.primary.is-outline:hover {
    background: #e3f2ff !important;
    border-color: #0077c8 !important;
    color: #0077c8 !important;
}

.header-main .button.primary.is-outline .icon-phone {
    font-size: 13px !important;
    color: #0077c8 !important;
}

/* --- Header account button: refined like demo --- */
.header-main .nav-top-link.button.is-outline {
    border: 1.5px solid #dbeeff !important;
    background: #f4faff !important;
    color: #1a3a5c !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 5px 14px !important;
    transition: background 0.2s !important;
}

.header-main .nav-top-link.button.is-outline:hover {
    background: #e3f2ff !important;
    border-color: #0077c8 !important;
}

/* ============================================================
   ZenWater - Checkout Form Styling (giống search bar)
   ============================================================ */

/* --- Input & Select fields --- */
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    border: 1.5px solid #dbeeff !important;
    border-radius: 100px !important;
    background: #f4faff !important;
    padding: 10px 18px !important;
    font-size: 13.5px !important;
    color: #1a3a5c !important;
    outline: none !important;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s !important;
    height: auto !important;
    width: 100% !important;
    box-shadow: none !important;
}

.woocommerce-checkout textarea {
    border-radius: 16px !important;
    min-height: 100px !important;
}

.woocommerce-checkout select {
    appearance: auto !important;
    -webkit-appearance: auto !important;
}

/* --- Focus state --- */
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    border-color: #0077c8 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(0, 119, 200, 0.1) !important;
}

/* --- Placeholder --- */
.woocommerce-checkout input.input-text::placeholder,
.woocommerce-checkout textarea::placeholder {
    color: #9ab8d4 !important;
    opacity: 1 !important;
}

/* --- Labels --- */
.woocommerce-checkout .form-row label {
    color: #1a3a5c !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    margin-bottom: 6px !important;
}

/* --- Place Order Button --- */
.woocommerce-checkout #place_order {
    background: #0077c8 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 14px 40px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s !important;
    box-shadow: 0 4px 15px rgba(0, 119, 200, 0.3) !important;
}

.woocommerce-checkout #place_order:hover {
    background: #005fa0 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 119, 200, 0.4) !important;
}

/* ============================================================
   ZenWater - Login / Register Form Styling (Page + Popup)
   ============================================================ */

/* --- Input fields --- */
.woocommerce-account .woocommerce-form input[type="text"],
.woocommerce-account .woocommerce-form input[type="email"],
.woocommerce-account .woocommerce-form input[type="password"],
.woocommerce-account .woocommerce-Input.input-text,
.account-login-inner .woocommerce-form input[type="text"],
.account-login-inner .woocommerce-form input[type="email"],
.account-login-inner .woocommerce-form input[type="password"],
.account-login-inner .woocommerce-Input.input-text,
.account-login-inner input#username,
.account-login-inner input#password,
.account-login-inner input#reg_email,
.account-register-inner .woocommerce-form input[type="text"],
.account-register-inner .woocommerce-form input[type="email"],
.account-register-inner .woocommerce-form input[type="password"],
.account-register-inner .woocommerce-Input.input-text,
.account-register-inner input#reg_email {
    border: 1.5px solid #dbeeff !important;
    border-radius: 100px !important;
    background: #f4faff !important;
    padding: 10px 18px !important;
    font-size: 13.5px !important;
    color: #1a3a5c !important;
    outline: none !important;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s !important;
    height: 42px !important;
    width: 100% !important;
    box-shadow: none !important;
}

/* --- Focus state --- */
.woocommerce-account .woocommerce-form input:focus,
.account-login-inner .woocommerce-form input:focus,
.account-register-inner .woocommerce-form input:focus {
    border-color: #0077c8 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(0, 119, 200, 0.1) !important;
}

/* --- Placeholder --- */
.woocommerce-account .woocommerce-form input::placeholder,
.account-login-inner .woocommerce-form input::placeholder,
.account-register-inner .woocommerce-form input::placeholder {
    color: #9ab8d4 !important;
    opacity: 1 !important;
}

/* --- Labels --- */
.woocommerce-account .woocommerce-form label,
.account-login-inner .woocommerce-form label,
.account-register-inner .woocommerce-form label {
    color: #1a3a5c !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    margin-bottom: 6px !important;
}

/* --- Submit buttons --- */
.woocommerce-account .woocommerce-form .woocommerce-button,
.woocommerce-account .woocommerce-form button[type="submit"],
.account-login-inner .woocommerce-form .woocommerce-button,
.account-login-inner .woocommerce-form button[type="submit"],
.account-register-inner .woocommerce-form .woocommerce-button,
.account-register-inner .woocommerce-form button[type="submit"] {
    background: #0077c8 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 12px 36px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s !important;
    box-shadow: 0 4px 15px rgba(0, 119, 200, 0.3) !important;
    cursor: pointer !important;
}

.woocommerce-account .woocommerce-form .woocommerce-button:hover,
.woocommerce-account .woocommerce-form button[type="submit"]:hover,
.account-login-inner .woocommerce-form .woocommerce-button:hover,
.account-login-inner .woocommerce-form button[type="submit"]:hover,
.account-register-inner .woocommerce-form .woocommerce-button:hover,
.account-register-inner .woocommerce-form button[type="submit"]:hover {
    background: #005fa0 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 119, 200, 0.4) !important;
}

/* --- Form headings --- */
.woocommerce-account h2,
.account-login-inner h2,
.account-login-inner h3,
.account-register-inner h2,
.account-register-inner h3 {
    color: #1a3a5c !important;
    font-weight: 700 !important;
    font-size: 1.3rem !important;
}

/* --- Lost password link --- */
.woocommerce-account .woocommerce-LostPassword a,
.account-login-inner .woocommerce-LostPassword a,
.account-login-inner .lost_password a,
.account-register-inner .woocommerce-LostPassword a,
.account-register-inner .lost_password a {
    color: #0077c8 !important;
    font-size: 13px !important;
    transition: color 0.2s !important;
}

.woocommerce-account .woocommerce-LostPassword a:hover,
.account-login-inner .woocommerce-LostPassword a:hover,
.account-login-inner .lost_password a:hover {
    color: #005fa0 !important;
}


/* ============================================================
   ZenWater - Bài viết liên quan (Related Posts)
   ============================================================ */

/* --- Ẩn prefix "Lưu trữ danh mục:" trên trang archive --- */
.archive-page-header h1.page-title {
    font-size: 0 !important;
}

.archive-page-header h1.page-title span {
    font-size: 28px !important;
}


/* --- Wrapper --- */
.zen-related-posts {
    margin-top: 48px;
    padding-top: 0;
}

/* --- Header với icon + tiêu đề --- */
.zen-related-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e8f4fd;
}

.zen-related-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #e8f4fd 0%, #d0ebff 100%);
    border-radius: 12px;
    flex-shrink: 0;
}

.zen-related-title {
    font-size: 1.3em !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

/* --- Danh sách bài viết: 1 cột --- */
.zen-related-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Card bài viết --- */
.zen-related-card {
    display: flex;
    align-items: stretch;
    gap: 16px;
    background: #ffffff;
    border: 1px solid #eef2f5;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit !important;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.zen-related-card:hover {
    box-shadow: 0 6px 24px rgba(37, 175, 244, 0.12);
    border-color: #b8dff7;
    transform: translateY(-2px);
    text-decoration: none !important;
    color: inherit !important;
}

/* --- Thumbnail --- */
.zen-related-thumb {
    flex: 0 0 160px;
    width: 160px;
    min-height: 130px;
    overflow: hidden;
    position: relative;
    background: #f5f8fa;
}

.zen-related-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    transition: transform 0.4s ease;
    border-radius: 0 !important;
}

.zen-related-card:hover .zen-related-thumb img {
    transform: scale(1.06);
}

/* --- Placeholder khi không có thumbnail --- */
.zen-related-no-thumb {
    width: 100%;
    height: 100%;
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f4f8 0%, #e4eaf0 100%);
}

/* --- Thông tin bài viết --- */
.zen-related-info {
    flex: 1;
    padding: 16px 18px 16px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* --- Category badge --- */
.zen-related-cat {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #0077c8;
    background: #e8f4fd;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
    align-self: flex-start;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.4;
}

/* --- Tiêu đề bài viết --- */
.zen-related-card-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a1a2e !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    line-height: 1.45 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.25s ease;
}

.zen-related-card:hover .zen-related-card-title {
    color: #25aff4 !important;
}

/* --- Meta: ngày đăng --- */
.zen-related-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #9aa5b4;
    margin-bottom: 6px;
}

.zen-related-meta svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.zen-related-meta time {
    color: #9aa5b4;
}

/* --- Excerpt --- */
.zen-related-excerpt {
    font-size: 13px !important;
    color: #6b7b8d !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   Responsive - Bài viết liên quan
   ============================================================ */

/* Tablet */
@media screen and (max-width: 849px) {
    .zen-related-posts {
        margin-top: 36px;
    }

    .zen-related-thumb {
        flex: 0 0 130px;
        width: 130px;
        min-height: 110px;
    }

    .zen-related-info {
        padding: 12px 14px 12px 0;
    }

    .zen-related-card-title {
        font-size: 14px !important;
    }

    .zen-related-excerpt {
        -webkit-line-clamp: 1;
    }
}

/* Mobile */
@media screen and (max-width: 549px) {
    .zen-related-posts {
        margin-top: 28px;
    }

    .zen-related-header {
        margin-bottom: 14px;
        padding-bottom: 12px;
    }

    .zen-related-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .zen-related-icon svg {
        width: 18px;
        height: 18px;
    }

    .zen-related-title {
        font-size: 1.1em !important;
    }

    .zen-related-list {
        gap: 12px;
    }

    .zen-related-card {
        gap: 12px;
        border-radius: 12px;
    }

    .zen-related-thumb {
        flex: 0 0 100px;
        width: 100px;
        min-height: 95px;
    }

    .zen-related-info {
        padding: 10px 12px 10px 0;
    }

    .zen-related-cat {
        font-size: 10px;
        padding: 2px 8px;
        margin-bottom: 5px;
    }

    .zen-related-card-title {
        font-size: 13px !important;
        margin-bottom: 4px !important;
        -webkit-line-clamp: 2;
    }

    .zen-related-meta {
        font-size: 11px;
        margin-bottom: 4px;
    }

    .zen-related-excerpt {
        font-size: 12px !important;
        -webkit-line-clamp: 1;
    }
}

/* --- Checkout: Dòng fee cọc vỏ bình --- */
.woocommerce-checkout-review-order-table tr.fee th,
.woocommerce-checkout-review-order-table tr.fee td {
    color: #666 !important;
    font-weight: 400 !important;
}