/* =====================================================
   KAVIX HERO — CHỈ SỬA VỊ TRÍ, KHÔNG SỬA NỘI DUNG
===================================================== */

/* Khung banner */
.kavix-hero-desktop,
.kavix-hero-mobile {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Khôi phục vùng chứa layer của Flatsome */
.kavix-hero-desktop .banner-layers,
.kavix-hero-mobile .banner-layers {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Không tạo nền cho các Text Box */
.kavix-hero-copy .text-box-content,
.kavix-hero-brandmark .text-box-content,
.kavix-hero-trust .text-box-content,
.kavix-hero-mobile-copy .text-box-content,
.kavix-hero-mobile-trust .text-box-content {
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Các lớp luôn nằm đúng thứ tự */
.kavix-hero-copy,
.kavix-hero-mobile-copy {
    z-index: 5 !important;
}

.kavix-hero-brandmark {
    z-index: 3 !important;
    pointer-events: none !important;
}

.kavix-hero-trust,
.kavix-hero-mobile-trust {
    z-index: 12 !important;
}

/* Logo luôn giữ đúng tỷ lệ */
.kavix-hero-brandmark img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;

    object-fit: contain !important;
}

/* =====================================================
   DESKTOP LỚN — TỪ 1500PX
===================================================== */

@media screen and (min-width: 1500px) {
    .kavix-hero-desktop {
        --kavix-hero-gutter: clamp(
            70px,
            calc((100vw - 1280px) / 2 + 24px),
            160px
        );

        display: block !important;
    }

    .kavix-hero-mobile {
        display: none !important;
    }

    /* Nội dung có khoảng cách an toàn với mép trái */
    .kavix-hero-copy {
        position: absolute !important;

        top: 47% !important;
        right: auto !important;
        bottom: auto !important;
        left: var(--kavix-hero-gutter) !important;

        width: min(46vw, 620px) !important;
        max-width: 620px !important;

        margin: 0 !important;

        transform: translateY(-50%) !important;
    }

    /* Logo nằm giữa phần nội dung và cụm dây */
    .kavix-hero-brandmark {
        position: absolute !important;

        top: 5% !important;
        right: auto !important;
        bottom: auto !important;
        left: 61% !important;

        width: 300px !important;
        max-width: 300px !important;

        margin: 0 !important;

        transform: translateX(-50%) !important;
    }

    /* Thanh thẻ luôn nằm sát đáy banner */
    .kavix-hero-trust {
        position: absolute !important;

        top: auto !important;
        right: auto !important;
        bottom: 0 !important;
        left: 50% !important;

        width: 100vw !important;
        max-width: 100vw !important;

        margin: 0 !important;

        transform: translateX(-50%) !important;
        overflow: hidden !important;
    }
}

/* =====================================================
   LAPTOP / DESKTOP THÔNG THƯỜNG — 1200PX ĐẾN 1499PX
===================================================== */

@media screen and (min-width: 1200px) and (max-width: 1499px) {
    .kavix-hero-desktop {
        --kavix-hero-gutter: clamp(48px, 5vw, 76px);

        display: block !important;
    }

    .kavix-hero-mobile {
        display: none !important;
    }

    .kavix-hero-copy {
        position: absolute !important;

        top: 47% !important;
        right: auto !important;
        bottom: auto !important;
        left: var(--kavix-hero-gutter) !important;

        width: min(47vw, 580px) !important;
        max-width: 580px !important;

        margin: 0 !important;

        transform: translateY(-50%) !important;
    }

    /*
     * Đẩy logo sang phải để không đè lên tiêu đề.
     */
    .kavix-hero-brandmark {
        position: absolute !important;

        top: 5% !important;
        right: auto !important;
        bottom: auto !important;
        left: 64% !important;

        width: 235px !important;
        max-width: 235px !important;

        margin: 0 !important;

        transform: translateX(-50%) !important;
    }

    .kavix-hero-trust {
        position: absolute !important;

        top: auto !important;
        right: auto !important;
        bottom: 0 !important;
        left: 50% !important;

        width: 100vw !important;
        max-width: 100vw !important;

        margin: 0 !important;

        transform: translateX(-50%) !important;
        overflow: hidden !important;
    }
}

/* =====================================================
   TABLET NGANG / LAPTOP NHỎ — 850PX ĐẾN 1199PX
===================================================== */

@media screen and (min-width: 850px) and (max-width: 1199px) {
    .kavix-hero-desktop {
        --kavix-hero-gutter: clamp(30px, 4vw, 48px);

        display: block !important;
    }

    .kavix-hero-mobile {
        display: none !important;
    }

    .kavix-hero-copy {
        position: absolute !important;

        top: 47% !important;
        right: auto !important;
        bottom: auto !important;
        left: var(--kavix-hero-gutter) !important;

        width: 51vw !important;
        max-width: 530px !important;

        margin: 0 !important;

        transform: translateY(-50%) !important;
    }

    /*
     * Logo nhỏ hơn và dịch sang phải.
     * Không thay đổi nội dung bên trái.
     */
    .kavix-hero-brandmark {
        position: absolute !important;

        top: 5% !important;
        right: auto !important;
        bottom: auto !important;
        left: 69% !important;

        width: 180px !important;
        max-width: 180px !important;

        margin: 0 !important;

        transform: translateX(-50%) !important;
    }

    .kavix-hero-trust {
        position: absolute !important;

        top: auto !important;
        right: auto !important;
        bottom: 0 !important;
        left: 50% !important;

        width: 100vw !important;
        max-width: 100vw !important;

        margin: 0 !important;

        transform: translateX(-50%) !important;
        overflow: hidden !important;
    }
}

/* =====================================================
   MOBILE VÀ TABLET DỌC
===================================================== */

@media screen and (max-width: 849px) {
    .kavix-hero-desktop {
        display: none !important;
    }

    .kavix-hero-mobile {
        display: block !important;
    }

    /*
     * Chỉ tạo khoảng cách hai mép.
     * Không chỉnh font hoặc nội dung.
     */
    .kavix-hero-mobile-copy {
        position: absolute !important;

        top: 14px !important;
        right: auto !important;
        bottom: auto !important;
        left: 16px !important;

        width: calc(100% - 32px) !important;
        max-width: none !important;

        margin: 0 !important;

        transform: none !important;
    }

    .kavix-hero-mobile-trust {
        position: absolute !important;

        top: auto !important;
        right: auto !important;
        bottom: 0 !important;
        left: 50% !important;

        width: 100vw !important;
        max-width: 100vw !important;

        margin: 0 !important;

        transform: translateX(-50%) !important;
        overflow: hidden !important;
    }

    .kavix-hero-brandmark {
        display: none !important;
    }
}

/* Mobile rất nhỏ */
@media screen and (max-width: 389px) {
    .kavix-hero-mobile-copy {
        top: 10px !important;
        left: 13px !important;

        width: calc(100% - 26px) !important;
    }
}


/* =====================================================
   KAVIX - THANH TIN CẬY CHẠY NGANG VÔ HẠN

   Section: kavix-trust-marquee
   Row: kavix-trust-track
   Icon Box: kavix-trust-card
===================================================== */

.kavix-trust-marquee {
    position: relative;
    width: 100%;
    margin: 0 !important;
    padding: 24px 0 !important;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            #f5fbf7 0%,
            #ffffff 16%,
            #ffffff 84%,
            #f5fbf7 100%
        );
}

/* Làm mờ hai mép trái phải */
.kavix-trust-marquee::before,
.kavix-trust-marquee::after {
    content: "";
    position: absolute;
    z-index: 5;
    top: 0;
    bottom: 0;
    width: 110px;
    pointer-events: none;
}

.kavix-trust-marquee::before {
    left: 0;
    background:
        linear-gradient(
            90deg,
            #f5fbf7 0%,
            rgba(245, 251, 247, 0) 100%
        );
}

.kavix-trust-marquee::after {
    right: 0;
    background:
        linear-gradient(
            270deg,
            #f5fbf7 0%,
            rgba(245, 251, 247, 0) 100%
        );
}

/* Bỏ giới hạn chiều rộng mặc định của Flatsome */
.kavix-trust-marquee .section-content {
    width: 100% !important;
    max-width: none !important;
    overflow: hidden !important;
}

/* Row chạy ngang */
.kavix-trust-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 16px;
    animation: kavixTrustMarquee 28s linear infinite;
    will-change: transform;
}

/* Loại bỏ khoảng cách mặc định của Row */
.kavix-trust-track::before,
.kavix-trust-track::after {
    display: none !important;
}

/* Cột chứa Icon Box */
.kavix-trust-track > .col {
    display: flex !important;
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    padding: 0 !important;
}

.kavix-trust-track > .col > .col-inner {
    display: flex !important;
    width: 100%;
    height: 100%;
}

/* Từng thẻ */
.kavix-trust-card {
    display: flex !important;
    align-items: center !important;
    width: 100%;
    min-height: 92px;
    margin: 0 !important;
    padding: 16px 20px !important;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #dce9e1;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(14, 29, 54, 0.07);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.kavix-trust-card:hover {
    border-color: rgba(39, 163, 96, 0.55);
    box-shadow: 0 14px 30px rgba(14, 29, 54, 0.12);
    transform: translateY(-3px);
}

/* Icon */
.kavix-trust-card .icon-box-img {
    flex: 0 0 56px !important;
    width: 56px !important;
    max-width: 56px !important;
    margin: 0 15px 0 0 !important;
}

.kavix-trust-card .icon-box-img img {
    display: block;
    width: 56px !important;
    height: 56px !important;
    padding: 7px;
    object-fit: contain;
    background: #eef9f2;
    border: 1px solid #dcefe4;
    border-radius: 13px;
}

/* Phần chữ */
.kavix-trust-card .icon-box-text {
    display: flex !important;
    align-items: center !important;
    min-width: 0;
    text-align: left !important;
}

.kavix-trust-card .icon-box-text h2,
.kavix-trust-card .icon-box-text h3,
.kavix-trust-card .icon-box-text h4,
.kavix-trust-card .icon-box-text h5,
.kavix-trust-card .icon-box-text p {
    margin: 0 !important;
    padding: 0 !important;
    color: #172536 !important;
    -webkit-text-fill-color: #172536 !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Dải thẻ luôn chạy khi chuột chỉ nằm trên vùng banner */
.kavix-trust-track {
    animation-play-state: running;
}

/* Chỉ dừng khi chuột trỏ trực tiếp vào một card */
.kavix-trust-track:has(.kavix-trust-card:hover) {
    animation-play-state: paused;
}

/* Chạy đúng nửa track vì 4 thẻ sau là bản lặp */
@keyframes kavixTrustMarquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(
            calc(-50% - 8px),
            0,
            0
        );
    }
}

/* =====================================================
   TABLET
===================================================== */

@media screen and (max-width: 849px) {
    .kavix-trust-marquee {
        padding: 20px 0 !important;
    }

    .kavix-trust-track {
        gap: 14px;
        animation-duration: 25s;
    }

    .kavix-trust-track > .col {
        flex-basis: 270px !important;
        width: 270px !important;
        max-width: 270px !important;
    }

    .kavix-trust-card {
        min-height: 86px;
        padding: 14px 17px !important;
    }

    .kavix-trust-card .icon-box-img {
        flex-basis: 50px !important;
        width: 50px !important;
        max-width: 50px !important;
        margin-right: 13px !important;
    }

    .kavix-trust-card .icon-box-img img {
        width: 50px !important;
        height: 50px !important;
    }

    .kavix-trust-card .icon-box-text h2,
    .kavix-trust-card .icon-box-text h3,
    .kavix-trust-card .icon-box-text h4,
    .kavix-trust-card .icon-box-text h5,
    .kavix-trust-card .icon-box-text p {
        font-size: 15px !important;
    }
}

/* =====================================================
   MOBILE
===================================================== */

@media screen and (max-width: 549px) {
    .kavix-trust-marquee {
        padding: 16px 0 !important;
    }

    .kavix-trust-marquee::before,
    .kavix-trust-marquee::after {
        width: 42px;
    }

    .kavix-trust-track {
        gap: 12px;
        animation-duration: 22s;
    }

    .kavix-trust-track > .col {
        flex-basis: 235px !important;
        width: 235px !important;
        max-width: 235px !important;
    }

    .kavix-trust-card {
        min-height: 78px;
        padding: 12px 14px !important;
        border-radius: 14px;
    }

    .kavix-trust-card .icon-box-img {
        flex-basis: 44px !important;
        width: 44px !important;
        max-width: 44px !important;
        margin-right: 11px !important;
    }

    .kavix-trust-card .icon-box-img img {
        width: 44px !important;
        height: 44px !important;
        padding: 5px;
        border-radius: 11px;
    }

    .kavix-trust-card .icon-box-text h2,
    .kavix-trust-card .icon-box-text h3,
    .kavix-trust-card .icon-box-text h4,
    .kavix-trust-card .icon-box-text h5,
    .kavix-trust-card .icon-box-text p {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
}

/* Tôn trọng người dùng tắt hiệu ứng chuyển động */
@media (prefers-reduced-motion: reduce) {
    .kavix-trust-track {
        animation: none !important;
    }
}



/* Chặn toàn bộ trang cuộn ngang */
html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

body,
#wrapper,
#main,
#content {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
}

/* Chỉ cho thanh tin cậy chạy trong khung, không làm rộng trang */
.kavix-trust-marquee,
.kavix-trust-marquee .section-content,
.kavix-trust-window {
    width: 100%;
    max-width: 100% !important;
    overflow: hidden !important;
    overscroll-behavior-x: none;
    touch-action: pan-y;
    contain: paint;
}

/* Track vẫn chạy ngang nhưng không tạo thanh cuộn cho trang */
.kavix-trust-track {
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* =====================================================
   KAVIX - SẢN PHẨM NỔI BẬT
   Class gắn tại phần tử Products: kavix-product-grid
===================================================== */

.kavix-product-grid {
    width: 100%;
    max-width: 1200px;
    margin-right: auto !important;
    margin-left: auto !important;
}

/* Căn đều chiều cao các cột */
.kavix-product-grid .products {
    align-items: stretch !important;
}

.kavix-product-grid .product-small.col {
    display: flex !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
    padding-bottom: 20px !important;
}

.kavix-product-grid .product-small > .col-inner {
    display: flex !important;
    width: 100%;
}

/* Card sản phẩm */
.kavix-product-grid .product-small .box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e7ece9;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(14, 29, 54, 0.07);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.kavix-product-grid .product-small .box:hover {
    transform: translateY(-7px);
    border-color: rgba(39, 163, 96, 0.45);
    box-shadow: 0 18px 38px rgba(14, 29, 54, 0.14);
}

/* Khu vực ảnh */
.kavix-product-grid .box-image {
    width: 100%;
    margin: 0 !important;
    overflow: hidden;
    background: #f5f8f6;
    border-radius: 18px 18px 0 0;
}

.kavix-product-grid .box-image .image-zoom,
.kavix-product-grid .box-image .image-fade_in_back {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.kavix-product-grid .box-image img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    padding: 18px;
    object-fit: contain !important;
    object-position: center;
    transition: transform 0.45s ease;
}

.kavix-product-grid .product-small .box:hover .box-image img {
    transform: scale(1.06);
}

/* Nút xem nhanh */
.kavix-product-grid .image-tools.grid-tools {
    bottom: 0 !important;
}

.kavix-product-grid .quick-view,
.kavix-product-grid .image-tools .button {
    min-height: 42px;
    margin: 0 !important;
    padding: 11px 16px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #27a360 !important;
    border: 0 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

.kavix-product-grid .quick-view:hover,
.kavix-product-grid .image-tools .button:hover {
    background: #1f874f !important;
}

/* Nội dung card */
.kavix-product-grid .box-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 18px 18px 20px !important;
    text-align: left !important;
}

.kavix-product-grid .box-text-products {
    text-align: left !important;
}

/* Danh mục nhỏ */
.kavix-product-grid .product-cat,
.kavix-product-grid .category {
    margin: 0 0 7px !important;
    color: #27a360 !important;
    -webkit-text-fill-color: #27a360 !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    opacity: 1 !important;
}

/* Tên sản phẩm */
.kavix-product-grid .product-title,
.kavix-product-grid .woocommerce-loop-product__title {
    margin: 0 !important;
    padding: 0 !important;
    color: #172536 !important;
    -webkit-text-fill-color: #172536 !important;
    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
}

.kavix-product-grid .product-title a,
.kavix-product-grid .woocommerce-loop-product__title a {
    color: #172536 !important;
    -webkit-text-fill-color: #172536 !important;
}

.kavix-product-grid .product-title a:hover,
.kavix-product-grid .woocommerce-loop-product__title a:hover {
    color: #27a360 !important;
    -webkit-text-fill-color: #27a360 !important;
}

/* Mô tả ngắn nếu đã thêm bằng hook */
.kavix-product-grid .kavix-product-short-description {
    display: -webkit-box;
    margin: 9px 0 0 !important;
    color: #64706c;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* Giá sản phẩm nếu có */
.kavix-product-grid .price-wrapper {
    margin-top: auto;
    padding-top: 12px;
}

.kavix-product-grid .price {
    color: #27a360 !important;
    -webkit-text-fill-color: #27a360 !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

/* Ẩn rating nếu chưa sử dụng */
.kavix-product-grid .star-rating {
    margin-top: 8px;
}

/* =====================================================
   TABLET
===================================================== */

@media screen and (max-width: 849px) {
    .kavix-product-grid {
        max-width: 94%;
    }

    .kavix-product-grid .product-small.col {
        flex-basis: 50% !important;
        max-width: 50% !important;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    .kavix-product-grid .product-title,
    .kavix-product-grid .woocommerce-loop-product__title {
        font-size: 17px !important;
    }
}

/* =====================================================
   MOBILE
===================================================== */

@media screen and (max-width: 549px) {
    .kavix-product-grid {
        max-width: 94%;
    }

    .kavix-product-grid .product-small.col {
        flex-basis: 50% !important;
        max-width: 50% !important;
        padding-right: 5px !important;
        padding-left: 5px !important;
        padding-bottom: 10px !important;
    }

    .kavix-product-grid .product-small .box {
        border-radius: 13px;
    }

    .kavix-product-grid .box-image {
        border-radius: 13px 13px 0 0;
    }

    .kavix-product-grid .box-image img {
        padding: 10px;
    }

    .kavix-product-grid .box-text {
        padding: 12px 11px 14px !important;
    }

    .kavix-product-grid .product-cat,
    .kavix-product-grid .category {
        margin-bottom: 5px !important;
        font-size: 9px !important;
        letter-spacing: 0.3px;
    }

    .kavix-product-grid .product-title,
    .kavix-product-grid .woocommerce-loop-product__title {
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    .kavix-product-grid .kavix-product-short-description {
        margin-top: 7px !important;
        font-size: 12px;
        line-height: 1.45;
        -webkit-line-clamp: 3;
    }

    .kavix-product-grid .price {
        font-size: 14px !important;
    }
}


/* =====================================================
   KAVIX - SECTION LÝ DO KHÁCH HÀNG TIN CHỌN
===================================================== */

.kavix-reason-section {
    padding: 76px 0 84px !important;
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(39, 163, 96, 0.06),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faf8 100%
        );
}

/* Tiêu đề section */
.kavix-reason-heading {
    width: 100%;
    max-width: 940px;
    margin: 0 auto 42px !important;
    padding: 0 15px !important;
    text-align: center;
}

/* Hai hàng thẻ */
.kavix-reason-grid {
    width: 100% !important;
    max-width: 1200px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    align-items: stretch !important;
}

.kavix-reason-grid + .kavix-reason-grid {
    margin-top: 22px !important;
}

/* Các cột */
.kavix-reason-grid > .col {
    display: flex !important;
    padding-right: 11px !important;
    padding-left: 11px !important;
}

.kavix-reason-grid > .col > .col-inner {
    display: flex !important;
    width: 100%;
    height: 100%;
}

/* Card */
.kavix-reason-card {
    position: relative;
    display: flex !important;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 285px;
    margin: 0 !important;
    padding: 28px 28px 30px !important;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e4ebe7;
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(14, 29, 54, 0.07);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

/* Thanh xanh trên card */
.kavix-reason-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        #27a360,
        #43bc78
    );
    opacity: 0;
    transform: scaleX(0.45);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

/* Hover card */
.kavix-reason-card:hover {
    border-color: rgba(39, 163, 96, 0.45);
    box-shadow: 0 18px 42px rgba(14, 29, 54, 0.13);
    transform: translateY(-7px);
}

.kavix-reason-card:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

/* Icon */
.kavix-reason-card .icon-box-img {
    flex: 0 0 auto !important;
    width: 78px !important;
    max-width: 78px !important;
    margin: 0 0 20px !important;
}

.kavix-reason-card .icon-box-img img {
    display: block;
    width: 78px !important;
    height: 78px !important;
    padding: 8px;
    object-fit: contain;
    background: #f0faf4;
    border: 1px solid #e1f2e8;
    border-radius: 18px;
    transition:
        transform 0.35s ease,
        background-color 0.35s ease;
}

.kavix-reason-card:hover .icon-box-img img {
    background: #e8f7ee;
    transform: scale(1.07);
}

/* Nội dung */
.kavix-reason-card .icon-box-text {
    display: flex !important;
    flex: 1;
    flex-direction: column;
    width: 100%;
    text-align: left !important;
}

/* Tiêu đề card */
.kavix-reason-card .icon-box-text h2,
.kavix-reason-card .icon-box-text h3,
.kavix-reason-card .icon-box-text h4,
.kavix-reason-card .icon-box-text h5 {
    margin: 0 !important;
    padding: 0 !important;
    color: #172536 !important;
    -webkit-text-fill-color: #172536 !important;
    font-family: inherit !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.25px !important;
    text-transform: none !important;
}

/* Gạch xanh dưới tiêu đề */
.kavix-reason-card .icon-box-text h2::after,
.kavix-reason-card .icon-box-text h3::after,
.kavix-reason-card .icon-box-text h4::after,
.kavix-reason-card .icon-box-text h5::after {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    margin: 13px 0 15px;
    background: #27a360;
    border-radius: 10px;
}

/* Mô tả */
.kavix-reason-card .icon-box-text p {
    margin: 0 !important;
    padding: 0 !important;
    color: #5e6965 !important;
    -webkit-text-fill-color: #5e6965 !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.kavix-reason-card .icon-box-text p:last-child {
    margin-bottom: 0 !important;
}

/* =====================================================
   TABLET
===================================================== */

@media screen and (max-width: 849px) {
    .kavix-reason-section {
        padding: 60px 0 66px !important;
    }

    .kavix-reason-heading {
        max-width: 760px;
        margin-bottom: 34px !important;
    }

    .kavix-reason-grid {
        max-width: 95% !important;
    }

    .kavix-reason-grid > .col {
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    .kavix-reason-grid + .kavix-reason-grid {
        margin-top: 16px !important;
    }

    .kavix-reason-card {
        min-height: 270px;
        padding: 23px 21px 25px !important;
        border-radius: 17px;
    }

    .kavix-reason-card .icon-box-img {
        width: 68px !important;
        max-width: 68px !important;
        margin-bottom: 17px !important;
    }

    .kavix-reason-card .icon-box-img img {
        width: 68px !important;
        height: 68px !important;
        border-radius: 15px;
    }

    .kavix-reason-card .icon-box-text h2,
    .kavix-reason-card .icon-box-text h3,
    .kavix-reason-card .icon-box-text h4,
    .kavix-reason-card .icon-box-text h5 {
        font-size: 18px !important;
    }

    .kavix-reason-card .icon-box-text p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}

/* =====================================================
   MOBILE
===================================================== */

@media screen and (max-width: 549px) {
    .kavix-reason-section {
        padding: 48px 0 52px !important;
    }

    .kavix-reason-heading {
        margin-bottom: 28px !important;
        padding-right: 18px !important;
        padding-left: 18px !important;
    }

    .kavix-reason-grid {
        max-width: 94% !important;
    }

    .kavix-reason-grid + .kavix-reason-grid {
        margin-top: 0 !important;
    }

    .kavix-reason-grid > .col {
        flex-basis: 100% !important;
        max-width: 100% !important;
        padding-right: 0 !important;
        padding-bottom: 14px !important;
        padding-left: 0 !important;
    }

    .kavix-reason-card {
        min-height: auto;
        padding: 22px 21px 24px !important;
        border-radius: 16px;
    }

    .kavix-reason-card .icon-box-img {
        width: 62px !important;
        max-width: 62px !important;
        margin-bottom: 15px !important;
    }

    .kavix-reason-card .icon-box-img img {
        width: 62px !important;
        height: 62px !important;
        border-radius: 14px;
    }

    .kavix-reason-card .icon-box-text h2,
    .kavix-reason-card .icon-box-text h3,
    .kavix-reason-card .icon-box-text h4,
    .kavix-reason-card .icon-box-text h5 {
        font-size: 18px !important;
    }

    .kavix-reason-card .icon-box-text h2::after,
    .kavix-reason-card .icon-box-text h3::after,
    .kavix-reason-card .icon-box-text h4::after,
    .kavix-reason-card .icon-box-text h5::after {
        margin-top: 11px;
        margin-bottom: 13px;
    }

    .kavix-reason-card .icon-box-text p {
        font-size: 14px !important;
        line-height: 1.58 !important;
    }
}

/* =====================================================
   KAVIX - SECTION TIÊU CHUẨN ÁP DỤNG
===================================================== */

.kavix-standard-section {
    padding: 80px 0 86px !important;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(39, 163, 96, 0.07),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faf8 100%
        );
}

/* Row tổng */
.kavix-standard-layout {
    width: 100% !important;
    max-width: 1240px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    align-items: stretch !important;
}

.kavix-standard-layout > .col {
    display: flex !important;
}

.kavix-standard-layout > .col > .col-inner {
    width: 100%;
    height: 100%;
}

/* =====================================================
   CỘT GIỚI THIỆU BÊN TRÁI
===================================================== */

.kavix-standard-intro {
    display: flex !important;
    align-items: center !important;
    padding-right: 42px !important;
}

.kavix-standard-intro > .col-inner {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}

/* Nhãn nhỏ phía trên */
.kavix-standard-intro h6,
.kavix-standard-intro .section-title-main {
    color: #27a360 !important;
    -webkit-text-fill-color: #27a360 !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
}

/* Tiêu đề chính */
.kavix-standard-intro h2 {
    margin: 10px 0 0 !important;
    padding: 0 !important;
    color: #172536 !important;
    -webkit-text-fill-color: #172536 !important;
    font-family: inherit !important;
    font-size: clamp(38px, 3.2vw, 50px) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.9px !important;
    text-transform: none !important;
}

/* Gạch xanh */
.kavix-standard-intro h2 + p > span,
.kavix-standard-intro h2 + span {
    width: 48px !important;
    height: 4px !important;
    margin: 16px 0 20px !important;
    background: #27a360 !important;
    border-radius: 20px;
}

/* Nội dung mô tả */
.kavix-standard-intro p {
    max-width: 510px;
    margin-bottom: 0 !important;
    color: #46566a !important;
    -webkit-text-fill-color: #46566a !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* =====================================================
   ROW 3 THẺ TIÊU CHUẨN
===================================================== */

.kavix-standard-grid {
    width: 100% !important;
    margin: 0 !important;
    align-items: stretch !important;
}

.kavix-standard-grid > .col {
    display: flex !important;
    padding-right: 9px !important;
    padding-left: 9px !important;
}

.kavix-standard-grid > .col > .col-inner {
    display: flex !important;
    width: 100%;
    height: 100%;
}

/* Card */
.kavix-standard-card {
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    width: 100%;
    height: 100%;
    min-height: 510px;
    margin: 0 !important;
    padding: 26px 22px 28px !important;
    overflow: hidden;
    text-align: center !important;
    background: #ffffff;
    border: 1px solid #e3ebe6;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(14, 29, 54, 0.07);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

/* Thanh xanh phía trên */
.kavix-standard-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 20%;
    left: 20%;
    height: 4px;
    background: #27a360;
    border-radius: 0 0 10px 10px;
    opacity: 0;
    transform: scaleX(0.4);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.kavix-standard-card:hover {
    border-color: rgba(39, 163, 96, 0.5);
    box-shadow: 0 20px 42px rgba(14, 29, 54, 0.13);
    transform: translateY(-7px);
}

.kavix-standard-card:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

/* Icon */
.kavix-standard-card .icon-box-img {
    flex: 0 0 auto !important;
    width: 112px !important;
    max-width: 112px !important;
    margin: 0 auto 18px !important;
}

.kavix-standard-card .icon-box-img img {
    display: block;
    width: 112px !important;
    height: 112px !important;
    padding: 8px;
    object-fit: contain;
    background: #f0faf4;
    border: 1px solid #e3f3e9;
    border-radius: 22px;
    transition:
        transform 0.35s ease,
        background-color 0.35s ease;
}

.kavix-standard-card:hover .icon-box-img img {
    background: #e8f7ee;
    transform: scale(1.06);
}

/* Nội dung Icon Box */
.kavix-standard-card .icon-box-text {
    display: flex !important;
    flex: 1;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center !important;
}

/* IEC 60331 / IEC 60332 / BS 6387 */
.kavix-standard-card .icon-box-text h3 {
    min-height: 70px;
    margin: 0 !important;
    padding: 0 !important;
    color: #13984d !important;
    -webkit-text-fill-color: #13984d !important;
    font-family: inherit !important;
    font-size: 29px !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.4px !important;
    text-transform: none !important;
}

/* Gạch xanh dưới mã tiêu chuẩn */
.kavix-standard-card .icon-box-text h3::after {
    content: "";
    display: block;
    width: 38px;
    height: 3px;
    margin: 15px auto 18px;
    background: #27a360;
    border-radius: 10px;
}

/* Tiêu đề chức năng */
.kavix-standard-card .icon-box-text h4 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    margin: 0 !important;
    padding: 0 4px !important;
    color: #172536 !important;
    -webkit-text-fill-color: #172536 !important;
    font-family: inherit !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.2px !important;
    text-transform: none !important;
}

/* Đường kẻ phân chia */
.kavix-standard-card .icon-box-text h4::after {
    content: "";
    display: block;
    position: absolute;
}

/* Mô tả */
.kavix-standard-card .icon-box-text p {
    width: 100%;
    margin: 20px 0 0 !important;
    padding: 20px 2px 0 !important;
    color: #536378 !important;
    -webkit-text-fill-color: #536378 !important;
    border-top: 1px solid #dce4e0;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* =====================================================
   TABLET
===================================================== */

@media screen and (max-width: 849px) {
    .kavix-standard-section {
        padding: 62px 0 68px !important;
    }

    .kavix-standard-layout {
        max-width: 95% !important;
    }

    .kavix-standard-intro {
        flex-basis: 100% !important;
        max-width: 100% !important;
        padding: 0 12px 38px !important;
        text-align: center;
    }

    .kavix-standard-intro > .col-inner {
        align-items: center;
    }

    .kavix-standard-intro h2 {
        font-size: 42px !important;
    }

    .kavix-standard-intro p {
        max-width: 720px;
        text-align: center;
    }

    .kavix-standard-intro h2 + p > span,
    .kavix-standard-intro h2 + span {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .kavix-standard-layout > .col:last-child {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    .kavix-standard-card {
        min-height: 480px;
        padding: 23px 18px 25px !important;
        border-radius: 17px;
    }

    .kavix-standard-card .icon-box-img {
        width: 96px !important;
        max-width: 96px !important;
    }

    .kavix-standard-card .icon-box-img img {
        width: 96px !important;
        height: 96px !important;
        border-radius: 18px;
    }

    .kavix-standard-card .icon-box-text h3 {
        font-size: 25px !important;
    }

    .kavix-standard-card .icon-box-text h4 {
        min-height: 82px;
        font-size: 18px !important;
    }

    .kavix-standard-card .icon-box-text p {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }
}

/* =====================================================
   MOBILE
===================================================== */

@media screen and (max-width: 549px) {
    .kavix-standard-section {
        padding: 48px 0 52px !important;
    }

    .kavix-standard-layout {
        max-width: 92% !important;
    }

    .kavix-standard-intro {
        padding: 0 0 30px !important;
        text-align: left;
    }

    .kavix-standard-intro > .col-inner {
        align-items: flex-start;
    }

    .kavix-standard-intro h2 {
        font-size: 34px !important;
        line-height: 1.15 !important;
    }

    .kavix-standard-intro p {
        font-size: 14px !important;
        line-height: 1.65 !important;
        text-align: left;
    }

    .kavix-standard-intro h2 + p > span,
    .kavix-standard-intro h2 + span {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .kavix-standard-grid > .col {
        flex-basis: 100% !important;
        max-width: 100% !important;
        padding: 0 0 14px !important;
    }

    .kavix-standard-card {
        min-height: auto;
        padding: 22px 20px 24px !important;
        border-radius: 16px;
    }

    .kavix-standard-card .icon-box-img {
        width: 86px !important;
        max-width: 86px !important;
        margin-bottom: 16px !important;
    }

    .kavix-standard-card .icon-box-img img {
        width: 86px !important;
        height: 86px !important;
        border-radius: 16px;
    }

    .kavix-standard-card .icon-box-text h3 {
        min-height: auto;
        font-size: 25px !important;
    }

    .kavix-standard-card .icon-box-text h4 {
        min-height: auto;
        font-size: 18px !important;
    }

    .kavix-standard-card .icon-box-text p {
        margin-top: 17px !important;
        padding-top: 17px !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}


/* =====================================================
   KAVIX - ỨNG DỤNG CÔNG TRÌNH
   Cấu trúc:
   Column.kavix-app-card
   ├── Image Box.kavix-app-image
   └── Icon Box.kavix-app-info
===================================================== */

.kavix-app-section {
    padding: 72px 0 82px !important;
    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(39, 163, 96, 0.06),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faf8 100%
        );
}

/* Hai hàng thẻ */
.kavix-app-grid {
    width: 100% !important;
    max-width: 1200px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    align-items: stretch !important;
}

.kavix-app-grid + .kavix-app-grid {
    margin-top: 22px !important;
}

/* Cột chứa từng card */
.kavix-app-grid > .kavix-app-card {
    display: flex !important;
    padding: 0 11px !important;
}

.kavix-app-grid > .kavix-app-card > .col-inner {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e3ebe6;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(14, 29, 54, 0.08);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.kavix-app-grid > .kavix-app-card > .col-inner::before {
    content: "";
    position: absolute;
    z-index: 5;
    top: 0;
    right: 18%;
    left: 18%;
    height: 4px;
    background: #27a360;
    border-radius: 0 0 10px 10px;
    opacity: 0;
    transform: scaleX(0.4);
    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}

.kavix-app-grid > .kavix-app-card:hover > .col-inner {
    border-color: rgba(39, 163, 96, 0.5);
    box-shadow: 0 20px 44px rgba(14, 29, 54, 0.15);
    transform: translateY(-7px);
}

.kavix-app-grid > .kavix-app-card:hover > .col-inner::before {
    opacity: 1;
    transform: scaleX(1);
}

/* =====================================================
   IMAGE BOX
===================================================== */

.kavix-app-image {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.kavix-app-image .box {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.kavix-app-image .box-image {
    display: block !important;
    width: 100% !important;
    height: 230px !important;
    margin: 0 !important;
    overflow: hidden;
    background: #eef3f0;
    border-radius: 19px 19px 0 0;
}

/* Loại bỏ tỷ lệ ảnh mặc định của Flatsome */
.kavix-app-image .box-image > div,
.kavix-app-image .box-image .image-cover,
.kavix-app-image .box-image .image-zoom {
    width: 100% !important;
    height: 100% !important;
    padding-top: 0 !important;
    overflow: hidden;
}

.kavix-app-image .box-image img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform 0.5s ease;
}

.kavix-app-card:hover .kavix-app-image .box-image img {
    transform: scale(1.06);
}

/* Không dùng phần text mặc định của Image Box */
.kavix-app-image > .box > .box-text {
    display: none !important;
}

/* =====================================================
   ICON BOX VÀ NỘI DUNG
===================================================== */

.kavix-app-info {
    display: flex !important;
    flex: 1 !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 22px 24px !important;
}

/* Icon */
.kavix-app-info .icon-box-img {
    flex: 0 0 58px !important;
    width: 58px !important;
    max-width: 58px !important;
    margin: 0 16px 0 0 !important;
}

.kavix-app-info .icon-box-img img {
    display: block !important;
    width: 58px !important;
    height: 58px !important;
    padding: 7px;
    object-fit: contain !important;
    background: #eef9f2;
    border: 1px solid #dff0e5;
    border-radius: 16px;
    transition:
        transform 0.35s ease,
        background-color 0.35s ease;
}

.kavix-app-card:hover .kavix-app-info .icon-box-img img {
    background: #e4f6eb;
    transform: scale(1.07);
}

/* Phần chữ */
.kavix-app-info .icon-box-text {
    display: flex !important;
    flex: 1 !important;
    flex-direction: column !important;
    width: auto !important;
    min-width: 0 !important;
    text-align: left !important;
}

/* Tiêu đề */
.kavix-app-info .icon-box-text h2,
.kavix-app-info .icon-box-text h3,
.kavix-app-info .icon-box-text h4,
.kavix-app-info .icon-box-text h5 {
    min-height: 54px;
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: #172536 !important;
    -webkit-text-fill-color: #172536 !important;
    font-family: inherit !important;
    font-size: 20px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.25px !important;
    text-transform: none !important;
}

/* Mô tả */
.kavix-app-info .icon-box-text p {
    margin: 0 !important;
    padding: 0 !important;
    color: #5c6965 !important;
    -webkit-text-fill-color: #5c6965 !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* =====================================================
   TABLET
===================================================== */

@media screen and (max-width: 849px) {
    .kavix-app-section {
        padding: 60px 0 66px !important;
    }

    .kavix-app-grid {
        max-width: 95% !important;
    }

    .kavix-app-grid > .kavix-app-card {
        flex-basis: 50% !important;
        max-width: 50% !important;
        padding: 0 8px 16px !important;
    }

    .kavix-app-grid + .kavix-app-grid {
        margin-top: 0 !important;
    }

    .kavix-app-image .box-image {
        height: 210px !important;
    }

    .kavix-app-info {
        padding: 18px 18px 21px !important;
    }

    .kavix-app-info .icon-box-img {
        flex-basis: 52px !important;
        width: 52px !important;
        max-width: 52px !important;
        margin-right: 13px !important;
    }

    .kavix-app-info .icon-box-img img {
        width: 52px !important;
        height: 52px !important;
        border-radius: 14px;
    }

    .kavix-app-info .icon-box-text h2,
    .kavix-app-info .icon-box-text h3,
    .kavix-app-info .icon-box-text h4,
    .kavix-app-info .icon-box-text h5 {
        min-height: 50px;
        font-size: 18px !important;
    }

    .kavix-app-info .icon-box-text p {
        font-size: 14px !important;
    }
}

/* =====================================================
   MOBILE
===================================================== */

@media screen and (max-width: 549px) {
    .kavix-app-section {
        padding: 48px 0 52px !important;
    }

    .kavix-app-grid {
        max-width: 92% !important;
    }

    .kavix-app-grid > .kavix-app-card {
        flex-basis: 100% !important;
        max-width: 100% !important;
        padding: 0 0 15px !important;
    }

    .kavix-app-grid > .kavix-app-card > .col-inner {
        border-radius: 16px;
    }

    .kavix-app-image .box-image {
        height: 205px !important;
        border-radius: 15px 15px 0 0;
    }

    .kavix-app-info {
        padding: 17px 17px 20px !important;
    }

    .kavix-app-info .icon-box-img {
        flex-basis: 50px !important;
        width: 50px !important;
        max-width: 50px !important;
        margin-right: 13px !important;
    }

    .kavix-app-info .icon-box-img img {
        width: 50px !important;
        height: 50px !important;
        border-radius: 13px;
    }

    .kavix-app-info .icon-box-text h2,
    .kavix-app-info .icon-box-text h3,
    .kavix-app-info .icon-box-text h4,
    .kavix-app-info .icon-box-text h5 {
        min-height: auto;
        margin-bottom: 7px !important;
        font-size: 18px !important;
    }

    .kavix-app-info .icon-box-text p {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }
}


/* =====================================================
   KAVIX - FORM NHẬN BÁO GIÁ
===================================================== */

.kavix-quote-form {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 42px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #e1eae5;
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(14, 29, 54, 0.1);
}

.kavix-form-heading {
    max-width: 720px;
    margin: 0 auto 32px;
    text-align: center;
}

.kavix-form-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: #27a360;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.kavix-form-label::before,
.kavix-form-label::after {
    content: "";
    display: block;
    width: 28px;
    height: 1px;
    background: #27a360;
}

.kavix-form-heading h2 {
    margin: 0 0 12px !important;
    color: #172536 !important;
    font-family: inherit !important;
    font-size: clamp(30px, 4vw, 46px) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.8px !important;
    text-transform: none !important;
}

.kavix-form-heading h2 strong {
    color: #27a360 !important;
    -webkit-text-fill-color: #27a360 !important;
}

.kavix-form-heading p {
    max-width: 650px;
    margin: 0 auto !important;
    color: #5d6964 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
}

.kavix-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.kavix-form-full {
    grid-column: 1 / -1;
}

.kavix-form-field {
    min-width: 0;
}

.kavix-form-field label {
    display: block;
    margin: 0 0 8px;
    color: #172536;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.kavix-form-field label em {
    color: #d63838;
    font-style: normal;
}

.kavix-form-field .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.kavix-quote-form .kavix-control {
    display: block;
    width: 100% !important;
    height: 52px;
    margin: 0 !important;
    padding: 0 16px !important;
    color: #172536 !important;
    background: #ffffff !important;
    border: 1px solid #dce5e0 !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}

.kavix-quote-form textarea.kavix-control {
    height: auto;
    min-height: 135px;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    resize: vertical;
}

.kavix-quote-form .kavix-control::placeholder {
    color: #98a39e;
    opacity: 1;
}

.kavix-quote-form .kavix-control:focus {
    background: #ffffff !important;
    border-color: #27a360 !important;
    box-shadow: 0 0 0 4px rgba(39, 163, 96, 0.11) !important;
    outline: 0 !important;
}

.kavix-form-submit {
    margin-top: 24px;
}

.kavix-quote-form .kavix-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    margin: 0 !important;
    padding: 14px 24px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #27a360 !important;
    border: 1px solid #27a360 !important;
    border-radius: 11px !important;
    box-shadow: 0 10px 24px rgba(39, 163, 96, 0.22);
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        box-shadow 0.25s ease;
}

.kavix-quote-form .kavix-submit:hover {
    background: #208b51 !important;
    border-color: #208b51 !important;
    box-shadow: 0 14px 30px rgba(39, 163, 96, 0.3);
    transform: translateY(-2px);
}

.kavix-form-security {
    margin-top: 14px;
    color: #7a8680;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

.kavix-quote-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    color: #d63838;
    font-size: 12px;
    line-height: 1.4;
}

.wpcf7 form .wpcf7-response-output {
    margin: 20px 0 0 !important;
    padding: 13px 16px !important;
    border-width: 1px !important;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.wpcf7 form.sent .wpcf7-response-output {
    color: #176c3d;
    background: #effaf3;
    border-color: #82cda2 !important;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
    color: #9f2f2f;
    background: #fff3f3;
    border-color: #e9a1a1 !important;
}

.kavix-quote-form .wpcf7-spinner {
    position: absolute;
}

/* Tablet và mobile */

@media screen and (max-width: 849px) {
    .kavix-quote-form {
        max-width: 94%;
        padding: 34px 28px;
        border-radius: 20px;
    }
}

@media screen and (max-width: 549px) {
    .kavix-quote-form {
        max-width: 92%;
        padding: 26px 18px;
        border-radius: 17px;
    }

    .kavix-form-heading {
        margin-bottom: 25px;
    }

    .kavix-form-heading h2 {
        font-size: 30px !important;
    }

    .kavix-form-heading p {
        font-size: 14px !important;
    }

    .kavix-form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .kavix-form-full {
        grid-column: auto;
    }

    .kavix-quote-form .kavix-control {
        height: 50px;
        font-size: 14px !important;
    }

    .kavix-quote-form textarea.kavix-control {
        min-height: 120px;
    }
}

/* Fix giao diện form CF7 KAVIX */
.kavix-quote-form {
    display: block !important;
    width: 100% !important;
    max-width: 820px !important;
    margin: 0 auto !important;
    padding: 38px !important;
    background: #ffffff !important;
    border: 1px solid #e1eae5 !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 45px rgba(14, 29, 54, 0.1) !important;
}

.kavix-quote-form .kavix-form-heading {
    display: block !important;
    max-width: 680px !important;
    margin: 0 auto 30px !important;
    text-align: center !important;
}

.kavix-quote-form .kavix-form-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 10px !important;
    color: #27a360 !important;
    -webkit-text-fill-color: #27a360 !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.kavix-quote-form .kavix-form-label::before,
.kavix-quote-form .kavix-form-label::after {
    content: "";
    width: 28px;
    height: 1px;
    background: #27a360;
}

.kavix-quote-form .kavix-form-heading h2 {
    margin: 0 0 12px !important;
    padding: 0 !important;
    color: #172536 !important;
    -webkit-text-fill-color: #172536 !important;
    font-family: inherit !important;
    font-size: 42px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.8px !important;
    text-align: center !important;
    text-transform: none !important;
}

.kavix-quote-form .kavix-form-heading h2 strong {
    color: #27a360 !important;
    -webkit-text-fill-color: #27a360 !important;
}

.kavix-quote-form .kavix-form-heading p {
    margin: 0 auto !important;
    padding: 0 !important;
    color: #5d6964 !important;
    -webkit-text-fill-color: #5d6964 !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    text-align: center !important;
}

.kavix-quote-form .kavix-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

.kavix-quote-form .kavix-form-full {
    grid-column: 1 / -1 !important;
}

.kavix-quote-form .kavix-form-field {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.kavix-quote-form .kavix-form-field label {
    display: block !important;
    margin: 0 0 8px !important;
    color: #172536 !important;
    -webkit-text-fill-color: #172536 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.kavix-quote-form .kavix-form-field label em {
    color: #dc3434 !important;
    -webkit-text-fill-color: #dc3434 !important;
    font-style: normal !important;
}

.kavix-quote-form .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}

.kavix-quote-form input.kavix-control,
.kavix-quote-form select.kavix-control,
.kavix-quote-form textarea.kavix-control {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    color: #172536 !important;
    background: #ffffff !important;
    border: 1px solid #dce5e0 !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
}

.kavix-quote-form input.kavix-control,
.kavix-quote-form select.kavix-control {
    height: 52px !important;
    padding: 0 16px !important;
}

.kavix-quote-form textarea.kavix-control {
    min-height: 135px !important;
    padding: 14px 16px !important;
    resize: vertical !important;
}

.kavix-quote-form input.kavix-control:focus,
.kavix-quote-form select.kavix-control:focus,
.kavix-quote-form textarea.kavix-control:focus {
    border-color: #27a360 !important;
    box-shadow: 0 0 0 4px rgba(39, 163, 96, 0.12) !important;
    outline: none !important;
}

.kavix-quote-form .kavix-form-submit {
    margin: 24px 0 0 !important;
}

.kavix-quote-form input.kavix-submit {
    display: block !important;
    width: 100% !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 14px 24px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #27a360 !important;
    border: 0 !important;
    border-radius: 11px !important;
    box-shadow: 0 10px 24px rgba(39, 163, 96, 0.22) !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: none !important;
}

.kavix-quote-form input.kavix-submit:hover {
    background: #208b51 !important;
}

.kavix-quote-form .kavix-form-security {
    margin: 14px 0 0 !important;
    color: #78847e !important;
    font-family: inherit !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

@media screen and (max-width: 549px) {
    .kavix-quote-form {
        padding: 25px 18px !important;
        border-radius: 17px !important;
    }

    .kavix-quote-form .kavix-form-heading h2 {
        font-size: 30px !important;
    }

    .kavix-quote-form .kavix-form-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .kavix-quote-form .kavix-form-full {
        grid-column: auto !important;
    }
}


/* =====================================================
   KAVIX - NÚT LIÊN HỆ BUNG 3 LỰA CHỌN
===================================================== */

.kavix-contact-menu {
    position: fixed;
    z-index: 9999;
    left: 14px;
    bottom: 90px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Nút chính */

.kavix-contact-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0;
    padding: 0;
    color: #ffffff;
    background: linear-gradient(135deg, #2db96a, #20894f);
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow:
        0 12px 28px rgba(23, 37, 54, 0.24),
        0 0 0 5px rgba(39, 163, 96, 0.12);
    cursor: pointer;
    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        box-shadow 0.25s ease;
}

.kavix-contact-toggle:hover {
    color: #ffffff;
    transform: scale(1.06);
    box-shadow:
        0 15px 34px rgba(23, 37, 54, 0.3),
        0 0 0 7px rgba(39, 163, 96, 0.14);
}

.kavix-contact-toggle svg {
    display: block;
    width: 27px;
    height: 27px;
    fill: currentColor;
}

.kavix-toggle-open,
.kavix-toggle-close {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.kavix-toggle-open {
    opacity: 1;
    transform: scale(1) rotate(0);
}

.kavix-toggle-close {
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
}

.kavix-contact-menu.is-open .kavix-toggle-open {
    opacity: 0;
    transform: scale(0.5) rotate(90deg);
}

.kavix-contact-menu.is-open .kavix-toggle-close {
    opacity: 1;
    transform: scale(1) rotate(0);
}

/* Khối 3 nút con */

.kavix-contact-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
    pointer-events: none;
}

.kavix-contact-option {
    position: relative;
    display: flex;
    align-items: center;
    width: 52px;
    height: 52px;
    color: #ffffff !important;
    background: #27a360;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 8px 22px rgba(23, 37, 54, 0.2);
    text-decoration: none !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.65);
    transition:
        opacity 0.28s ease,
        visibility 0.28s ease,
        transform 0.28s ease,
        background-color 0.22s ease;
}

.kavix-contact-menu.is-open .kavix-contact-options {
    pointer-events: auto;
}

.kavix-contact-menu.is-open .kavix-contact-option {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Hiệu ứng bung lần lượt */

.kavix-contact-menu.is-open .kavix-contact-option:nth-child(1) {
    transition-delay: 0.12s;
}

.kavix-contact-menu.is-open .kavix-contact-option:nth-child(2) {
    transition-delay: 0.07s;
}

.kavix-contact-menu.is-open .kavix-contact-option:nth-child(3) {
    transition-delay: 0.02s;
}

.kavix-contact-option:hover {
    color: #ffffff !important;
    background: #20894f;
    transform: translateX(4px) scale(1.05) !important;
}

/* Icon */

.kavix-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: #ffffff;
}

.kavix-option-icon svg {
    display: block;
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* Icon Zalo đẹp hơn chữ Z */

.kavix-zalo-symbol {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-transform: none;
}

/* Nhãn bên phải */

.kavix-option-label {
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    min-width: max-content;
    padding: 8px 11px;
    color: #ffffff !important;
    background: #172536;
    border-radius: 7px;
    box-shadow: 0 8px 18px rgba(23, 37, 54, 0.2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-6px, -50%);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.kavix-contact-option:hover .kavix-option-label {
    opacity: 1;
    transform: translate(0, -50%);
}

/* Mobile */

@media screen and (max-width: 549px) {
    .kavix-contact-menu {
        left: 10px;
        bottom: 76px;
    }

    .kavix-contact-toggle {
        width: 52px;
        height: 52px;
    }

    .kavix-contact-toggle svg {
        width: 24px;
        height: 24px;
    }

    .kavix-contact-option,
    .kavix-option-icon {
        width: 48px;
        height: 48px;
    }

    .kavix-option-icon svg {
        width: 22px;
        height: 22px;
    }

    .kavix-option-label {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kavix-contact-option,
    .kavix-contact-toggle,
    .kavix-toggle-open,
    .kavix-toggle-close {
        transition: none !important;
    }
}


/* =====================================================
   KAVIX BREADCRUMB BẰNG JAVASCRIPT

   Full: kavix-breadcrumb-full
   Mini: kavix-breadcrumb-mini

   Không sửa background của Section.
===================================================== */

/* Phần tử được gắn class */

.kavix-js-breadcrumb-host {
    position: relative !important;
    box-sizing: border-box !important;
}

/* Full cần một chiều cao tối thiểu */

.kavix-breadcrumb-full {
    min-height: 220px;
}

/*
 * Mini không tạo thêm chiều cao cố định.
 * Nó nằm dưới các text hiện có.
 */

.kavix-breadcrumb-mini {
    min-height: 0 !important;
}

/* =====================================================
   FULL - CĂN GIỮA BANNER
===================================================== */

.kavix-js-breadcrumb--full {
    position: absolute;
    z-index: 20;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    font-family: inherit;
    text-align: left;

    pointer-events: none;
}

/* =====================================================
   MINI - NẰM DƯỚI TEXT
===================================================== */

.kavix-js-breadcrumb--mini {
    position: relative;
    z-index: 20;

    display: block;

    width: 100%;
    height: auto;

    margin: 14px 0 0;
    padding: 0;

    font-family: inherit;
    text-align: left;

    pointer-events: auto;
}

/*
 * Khi mini được chèn trực tiếp vào Row,
 * nó chiếm một hàng riêng bên dưới.
 */

.row > .kavix-js-breadcrumb--mini {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

/* Không tạo nền hoặc lớp phủ */

.kavix-js-breadcrumb,
.kavix-js-breadcrumb::before,
.kavix-js-breadcrumb::after {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.kavix-js-breadcrumb::before,
.kavix-js-breadcrumb::after {
    content: none !important;
    display: none !important;
}

/* Container */

.kavix-js-breadcrumb__inner {
    position: relative;

    display: block;

    width: min(
        1200px,
        calc(100% - 40px)
    );

    max-width: 1200px;

    margin-right: auto;
    margin-left: auto;
    padding: 0;

    text-align: left;

    pointer-events: auto;
}

/* Tiêu đề trang */

.kavix-js-breadcrumb__title {
    display: block;

    width: 100%;
    max-width: 950px;

    margin: 0 0 15px;
    padding: 0;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background: none !important;
    border: 0 !important;
    box-shadow: none !important;

    font-family: inherit !important;
    font-size: clamp(
        36px,
        4vw,
        52px
    ) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1.16 !important;
    letter-spacing: -0.5px !important;

    text-align: left !important;
    text-decoration: none !important;
    text-transform: none !important;

    text-shadow:
        0 2px 12px
        rgba(6, 24, 38, 0.48);

    white-space: normal !important;
    word-break: normal !important;
    overflow: visible !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
    filter: none !important;
    animation: none !important;
}

.kavix-js-breadcrumb__title::before,
.kavix-js-breadcrumb__title::after {
    content: none !important;
    display: none !important;
}

/* Nav */

.kavix-js-breadcrumb__nav {
    display: block;

    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    text-align: left;
}

/* Danh sách */

.kavix-js-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;

    gap: 7px;

    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
    text-align: left;
}

.kavix-js-breadcrumb__list > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Mỗi mục */

.kavix-js-breadcrumb__item {
    display: inline-flex;
    align-items: center;

    min-width: 0;

    margin: 0;
    padding: 0;

    color:
        rgba(255, 255, 255, 0.86);

    font-family: inherit !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0;

    text-align: left;

    text-shadow:
        0 1px 7px
        rgba(6, 24, 38, 0.55);
}

.kavix-js-breadcrumb__item a,
.kavix-js-breadcrumb__item > span {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    min-width: 0;

    margin: 0;
    padding: 0;

    color: inherit;

    background: none !important;
    border: 0 !important;
    box-shadow: none !important;

    font: inherit;

    text-align: left;
    text-decoration: none !important;
    text-transform: none !important;

    transition: color 0.2s ease;
}

.kavix-js-breadcrumb__item a {
    color:
        rgba(255, 255, 255, 0.92);
}

.kavix-js-breadcrumb__item a:hover {
    color: #69dfa0;
}

.kavix-js-breadcrumb__item.is-current,
.kavix-js-breadcrumb__item.is-current
> span {
    color: #ffffff;
    font-weight: 700;
}

/* Icon Trang chủ */

.kavix-js-breadcrumb__home {
    display: block;

    flex: 0 0 17px;

    width: 17px;
    height: 17px;

    margin: 0;

    fill: currentColor;
}

/* Mũi tên */

.kavix-js-breadcrumb__separator {
    display: inline-flex;
    flex: 0 0 15px;
    align-items: center;
    justify-content: center;

    width: 15px;
    height: 15px;

    margin: 0;
    padding: 0;

    color:
        rgba(255, 255, 255, 0.68);

    list-style: none;

    filter:
        drop-shadow(
            0 1px 4px
            rgba(6, 24, 38, 0.5)
        );
}

.kavix-js-breadcrumb__separator svg {
    display: block;

    width: 14px;
    height: 14px;

    margin: 0;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =====================================================
   MINI
===================================================== */

/*
 * Mini dùng màu trắng vì thường đặt
 * trực tiếp trong banner có ảnh nền.
 */

.kavix-js-breadcrumb--mini
.kavix-js-breadcrumb__item {
    color:
        rgba(255, 255, 255, 0.86);

    font-size: 13px;
}

.kavix-js-breadcrumb--mini
.kavix-js-breadcrumb__item a {
    color:
        rgba(255, 255, 255, 0.92);
}

.kavix-js-breadcrumb--mini
.kavix-js-breadcrumb__item a:hover {
    color: #69dfa0;
}

.kavix-js-breadcrumb--mini
.kavix-js-breadcrumb__item.is-current,
.kavix-js-breadcrumb--mini
.kavix-js-breadcrumb__item.is-current
> span {
    color: #ffffff;
}

.kavix-js-breadcrumb--mini
.kavix-js-breadcrumb__separator {
    color:
        rgba(255, 255, 255, 0.68);
}

/* =====================================================
   TABLET
===================================================== */

@media screen and (max-width: 849px) {
    .kavix-breadcrumb-full {
        min-height: 190px;
    }

    .kavix-js-breadcrumb__inner {
        width: calc(100% - 30px);
    }

    .kavix-js-breadcrumb__title {
        margin-bottom: 14px;

        font-size: 40px !important;
    }
}

/* =====================================================
   MOBILE
===================================================== */

@media screen and (max-width: 549px) {
    .kavix-breadcrumb-full {
        min-height: 160px;
    }

    .kavix-js-breadcrumb__inner {
        width: calc(100% - 28px);
    }

    .kavix-js-breadcrumb__title {
        margin-bottom: 12px;

        font-size: 29px !important;
        line-height: 1.18 !important;
        letter-spacing: 0 !important;
    }

    .kavix-js-breadcrumb--mini {
        margin-top: 11px;
    }

    .kavix-js-breadcrumb__list {
        flex-wrap: nowrap;
        gap: 5px;
        overflow: hidden;
    }

    .kavix-js-breadcrumb__item {
        flex-shrink: 0;
        font-size: 12px;
    }

    .kavix-js-breadcrumb__item.is-current {
        flex: 1 1 auto;
        min-width: 0;
    }

    .kavix-js-breadcrumb__item.is-current
    > span {
        display: inline-flex;

        width: 100%;
        min-width: 0;

        overflow: hidden;
    }

    .kavix-js-breadcrumb__item.is-current
    > span
    > span {
        display: block;

        min-width: 0;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .kavix-js-breadcrumb__home {
        flex-basis: 16px;

        width: 16px;
        height: 16px;
    }

    .kavix-js-breadcrumb__separator {
        flex-basis: 13px;

        width: 13px;
        height: 13px;
    }

    .kavix-js-breadcrumb--mini
    .kavix-js-breadcrumb__item {
        font-size: 12px;
    }
}


/* Bo góc logo ở footer */
.kavix-footer-logo,
.kavix-footer-logo .img-inner {
    overflow: hidden !important;
    border-radius: 14px !important;
}

.kavix-footer-logo img {
    display: block !important;
    width: 100% !important;
    border-radius: 14px !important;
}

/* =====================================================
   KAVIX BREADCRUMB FULL
   TIÊU ĐỀ LỚN + FONT TIẾNG VIỆT ỔN ĐỊNH
===================================================== */

.kavix-js-breadcrumb--full .kavix-js-breadcrumb__title {
    position: relative !important;
    display: block !important;

    width: 100% !important;
    max-width: 1050px !important;

    margin: 0 0 18px !important;
    padding: 0 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    /*
     * Font hỗ trợ tiếng Việt ổn định,
     * không kế thừa font H1 lỗi từ Flatsome.
     */
    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-size: clamp(58px, 5.3vw, 78px) !important;
    font-style: normal !important;
    font-variant: normal !important;
    font-weight: 700 !important;
    font-stretch: normal !important;
    font-synthesis: none !important;

    line-height: 1.08 !important;
    letter-spacing: -1.6px !important;
    word-spacing: 0 !important;

    text-align: left !important;
    text-decoration: none !important;
    text-transform: none !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow: visible !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
    filter: none !important;
    animation: none !important;

    /*
     * Bóng vừa đủ, tránh làm chữ bị nhòe.
     */
    text-shadow:
        0 2px 3px rgba(6, 24, 38, 0.28),
        0 7px 16px rgba(6, 24, 38, 0.18) !important;

    -webkit-text-stroke: 0 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;

    font-kerning: normal !important;
    font-feature-settings: normal !important;
}

/* Chặn hiệu ứng chữ giả hoặc chữ chồng */
.kavix-js-breadcrumb--full
.kavix-js-breadcrumb__title::before,
.kavix-js-breadcrumb--full
.kavix-js-breadcrumb__title::after {
    content: none !important;
    display: none !important;
}

/* Icon ngôi nhà có bóng rõ hơn */
.kavix-js-breadcrumb__home {
    display: block !important;
    flex: 0 0 17px !important;

    width: 17px !important;
    height: 17px !important;

    margin: 0 !important;

    fill: currentColor !important;

    filter:
        drop-shadow(0 2px 2px rgba(6, 24, 38, 0.48))
        drop-shadow(0 4px 6px rgba(6, 24, 38, 0.22)) !important;
}

/*
 * Giữ nguyên kích thước:
 * Trang chủ > Giới thiệu
 */
.kavix-js-breadcrumb__item {
    font-size: 14px !important;
    line-height: 1.45 !important;
}

/* =====================================================
   TABLET
===================================================== */

@media screen and (max-width: 849px) {
    .kavix-js-breadcrumb--full
    .kavix-js-breadcrumb__title {
        margin-bottom: 16px !important;

        font-size: 58px !important;
        line-height: 1.08 !important;
        letter-spacing: -1px !important;
    }
}

/* =====================================================
   MOBILE
===================================================== */

@media screen and (max-width: 549px) {
    .kavix-js-breadcrumb--full
    .kavix-js-breadcrumb__title {
        margin-bottom: 13px !important;

        font-size: 42px !important;
        line-height: 1.12 !important;
        letter-spacing: -0.5px !important;
    }

    .kavix-js-breadcrumb__home {
        flex-basis: 16px !important;
        width: 16px !important;
        height: 16px !important;
    }

    .kavix-js-breadcrumb__item {
        font-size: 12px !important;
    }
}

.kavix-breadcrumb-full .kavix-breadcrumb-title,
.kavix-breadcrumb-mini .kavix-breadcrumb-title {
    text-shadow:
        0 5px 12px rgba(0, 0, 0, 0.28),
        0 10px 28px rgba(0, 0, 0, 0.22),
        0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.kavix-breadcrumb-full .kavix-breadcrumb-trail,
.kavix-breadcrumb-mini .kavix-breadcrumb-trail {
    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.2),
        0 1px 2px rgba(0, 0, 0, 0.25) !important;
}


/* Bóng đậm hơn cho mini breadcrumb */
.kavix-js-breadcrumb--mini
.kavix-js-breadcrumb__item,
.kavix-js-breadcrumb--mini
.kavix-js-breadcrumb__item a,
.kavix-js-breadcrumb--mini
.kavix-js-breadcrumb__item > span {
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 3px 7px rgba(0, 0, 0, 0.38),
        0 6px 14px rgba(0, 0, 0, 0.24) !important;
}

/* Bóng cho icon ngôi nhà */
.kavix-js-breadcrumb--mini
.kavix-js-breadcrumb__home {
    filter:
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65))
        drop-shadow(0 3px 6px rgba(0, 0, 0, 0.38)) !important;
}

/* Bóng cho dấu mũi tên */
.kavix-js-breadcrumb--mini
.kavix-js-breadcrumb__separator {
    filter:
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55))
        drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3)) !important;
}

/* =====================================================
   MINI BREADCRUMB - LÀM RÕ MŨI TÊN
===================================================== */

.kavix-js-breadcrumb--mini
.kavix-js-breadcrumb__separator {
    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
}

.kavix-js-breadcrumb--mini
.kavix-js-breadcrumb__separator svg {
    display: block !important;

    width: 15px !important;
    height: 15px !important;

    fill: none !important;
    stroke: #ffffff !important;
    stroke-width: 2.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;

    opacity: 1 !important;

    filter:
        drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9))
        drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7))
        drop-shadow(0 4px 7px rgba(0, 0, 0, 0.45)) !important;
}

/* =====================================================
   FULL BREADCRUMB - LÀM RÕ MŨI TÊN
===================================================== */

.kavix-js-breadcrumb--full
.kavix-js-breadcrumb__separator {
    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
}

.kavix-js-breadcrumb--full
.kavix-js-breadcrumb__separator svg {
    display: block !important;

    width: 15px !important;
    height: 15px !important;

    fill: none !important;
    stroke: #ffffff !important;
    stroke-width: 2.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;

    opacity: 1 !important;

    filter:
        drop-shadow(0 1px 1px rgba(0, 0, 0, 0.95))
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.72))
        drop-shadow(0 5px 9px rgba(0, 0, 0, 0.48)) !important;
}



/* =====================================================
   KAVIX - SEARCH SIDEBAR TOÀN BỘ WOOCOMMERCE
===================================================== */

/* Khối widget */
body.woocommerce .widget_search,
body.woocommerce .widget_product_search,
body.woocommerce-page .widget_search,
body.woocommerce-page .widget_product_search {
    width: 100% !important;
    margin: 0 0 26px !important;
    padding: 0 !important;
}

/* Form tìm kiếm */
body.woocommerce .widget_search form.searchform,
body.woocommerce .widget_product_search form.woocommerce-product-search,
body.woocommerce-page .widget_search form.searchform,
body.woocommerce-page .widget_product_search form.woocommerce-product-search {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;

    width: 100% !important;
    height: 50px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;
    border: 1px solid rgba(39, 163, 96, 0.32) !important;
    border-radius: 12px !important;

    box-shadow: 0 8px 22px rgba(23, 37, 54, 0.08) !important;
    overflow: hidden !important;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease !important;
}

/* Khung flex mặc định của Flatsome */
body.woocommerce .widget_search .searchform .flex-row,
body.woocommerce-page .widget_search .searchform .flex-row {
    display: flex !important;
    align-items: stretch !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

body.woocommerce .widget_search .searchform .flex-col,
body.woocommerce-page .widget_search .searchform .flex-col {
    display: flex !important;
    align-items: stretch !important;

    margin: 0 !important;
    padding: 0 !important;
}

body.woocommerce .widget_search .searchform .flex-grow,
body.woocommerce-page .widget_search .searchform .flex-grow {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Hiệu ứng khi bấm vào ô tìm kiếm */
body.woocommerce .widget_search form.searchform:focus-within,
body.woocommerce .widget_product_search form:focus-within,
body.woocommerce-page .widget_search form.searchform:focus-within,
body.woocommerce-page .widget_product_search form:focus-within {
    border-color: #27a360 !important;

    box-shadow:
        0 0 0 3px rgba(39, 163, 96, 0.13),
        0 10px 26px rgba(23, 37, 54, 0.1) !important;
}

/* Ô nhập tìm kiếm */
body.woocommerce .widget_search input.search-field,
body.woocommerce .widget_product_search input.search-field,
body.woocommerce-page .widget_search input.search-field,
body.woocommerce-page .widget_product_search input.search-field {
    display: block !important;
    flex: 1 1 auto !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 16px !important;

    color: #172536 !important;
    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: normal !important;
}

/* Placeholder */
body.woocommerce .widget_search input::placeholder,
body.woocommerce .widget_product_search input::placeholder,
body.woocommerce-page .widget_search input::placeholder,
body.woocommerce-page .widget_product_search input::placeholder {
    color: #8a9691 !important;
    opacity: 1 !important;
}

/* Nút tìm kiếm */
body.woocommerce .widget_search form.searchform button,
body.woocommerce .widget_product_search form button,
body.woocommerce-page .widget_search form.searchform button,
body.woocommerce-page .widget_product_search form button {
    display: inline-flex !important;
    flex: 0 0 52px !important;
    align-items: center !important;
    justify-content: center !important;

    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 50px !important;
    min-height: 50px !important;

    margin: -1px -1px -1px 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    background: #27a360 !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 12px 12px 0 !important;

    box-shadow: none !important;
    text-shadow: none !important;
    cursor: pointer !important;
}

/* Ghi đè màu cam secondary mặc định */
body.woocommerce .widget_search button.secondary,
body.woocommerce .widget_search button.submit-button,
body.woocommerce-page .widget_search button.secondary,
body.woocommerce-page .widget_search button.submit-button {
    color: #ffffff !important;
    background: #27a360 !important;
}

/* Icon kính lúp */
body.woocommerce .widget_search button i,
body.woocommerce .widget_product_search button i,
body.woocommerce-page .widget_search button i,
body.woocommerce-page .widget_product_search button i {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 20px !important;
    line-height: 1 !important;
    opacity: 1 !important;
}

/* Không tạo thêm icon bằng pseudo-element */
body.woocommerce .widget_search button::before,
body.woocommerce .widget_search button::after,
body.woocommerce-page .widget_search button::before,
body.woocommerce-page .widget_search button::after {
    content: none !important;
    display: none !important;
}

/* Hover */
body.woocommerce .widget_search button:hover,
body.woocommerce .widget_product_search button:hover,
body.woocommerce-page .widget_search button:hover,
body.woocommerce-page .widget_product_search button:hover {
    color: #ffffff !important;
    background: #20894f !important;
    transform: none !important;
}

/* Mobile */
@media screen and (max-width: 849px) {
    body.woocommerce .widget_search form.searchform,
    body.woocommerce .widget_product_search form,
    body.woocommerce-page .widget_search form.searchform,
    body.woocommerce-page .widget_product_search form {
        height: 48px !important;
        border-radius: 10px !important;
    }

    body.woocommerce .widget_search input.search-field,
    body.woocommerce .widget_product_search input.search-field,
    body.woocommerce-page .widget_search input.search-field,
    body.woocommerce-page .widget_product_search input.search-field {
        height: 46px !important;
        padding: 0 14px !important;
    }

    body.woocommerce .widget_search button,
    body.woocommerce .widget_product_search button,
    body.woocommerce-page .widget_search button,
    body.woocommerce-page .widget_product_search button {
        flex-basis: 48px !important;

        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;

        border-radius: 0 10px 10px 0 !important;
    }
}



/* =====================================================
   KAVIX - BỘ LỌC SẢN PHẨM WOOCOMMERCE
   Màu chủ đạo: #27A360
===================================================== */

/* Khoảng cách chung của sidebar */
body.woocommerce #shop-sidebar,
body.woocommerce-page #shop-sidebar,
body.woocommerce .shop-sidebar,
body.woocommerce-page .shop-sidebar {
    font-family: inherit !important;
}

/* Mỗi khối bộ lọc */
body.woocommerce #shop-sidebar .widget_layered_nav,
body.woocommerce #shop-sidebar .woocommerce-widget-layered-nav,
body.woocommerce #shop-sidebar .widget_layered_nav_filters,
body.woocommerce-page #shop-sidebar .widget_layered_nav,
body.woocommerce-page #shop-sidebar .woocommerce-widget-layered-nav,
body.woocommerce-page #shop-sidebar .widget_layered_nav_filters,
body.woocommerce .shop-sidebar .widget_layered_nav,
body.woocommerce .shop-sidebar .woocommerce-widget-layered-nav,
body.woocommerce .shop-sidebar .widget_layered_nav_filters {
    position: relative !important;
    width: 100% !important;

    margin: 0 0 18px !important;
    padding: 18px !important;

    background: #ffffff !important;
    border: 1px solid rgba(39, 163, 96, 0.14) !important;
    border-radius: 14px !important;

    box-shadow:
        0 6px 20px rgba(23, 37, 54, 0.055) !important;
}

/* Tiêu đề từng bộ lọc */
body.woocommerce #shop-sidebar .widget-title,
body.woocommerce-page #shop-sidebar .widget-title,
body.woocommerce .shop-sidebar .widget-title,
body.woocommerce-page .shop-sidebar .widget-title {
    position: relative !important;
    display: block !important;

    margin: 0 0 14px !important;
    padding: 0 0 11px !important;

    color: #172536 !important;

    font-family: inherit !important;
    font-size: 15px !important;
    font-style: normal !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.15px !important;

    text-transform: uppercase !important;
}

/* Đường gạch dưới tiêu đề */
body.woocommerce #shop-sidebar .widget-title::after,
body.woocommerce-page #shop-sidebar .widget-title::after,
body.woocommerce .shop-sidebar .widget-title::after,
body.woocommerce-page .shop-sidebar .widget-title::after {
    content: "" !important;

    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;

    display: block !important;
    width: 34px !important;
    height: 3px !important;

    background: #27a360 !important;
    border-radius: 999px !important;
}

/* Xóa gạch xám mặc định Flatsome */
body.woocommerce #shop-sidebar .is-divider,
body.woocommerce-page #shop-sidebar .is-divider,
body.woocommerce .shop-sidebar .is-divider,
body.woocommerce-page .shop-sidebar .is-divider {
    display: none !important;
}

/* =====================================================
   BỘ LỌC DẠNG DROPDOWN
===================================================== */

/* Select gốc */
body.woocommerce #shop-sidebar
select.woocommerce-widget-layered-nav-dropdown,
body.woocommerce-page #shop-sidebar
select.woocommerce-widget-layered-nav-dropdown,
body.woocommerce .shop-sidebar
select.woocommerce-widget-layered-nav-dropdown,
body.woocommerce-page .shop-sidebar
select.woocommerce-widget-layered-nav-dropdown {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;

    margin: 0 !important;
    padding: 0 42px 0 14px !important;

    color: #314239 !important;
    background-color: #f8fbf9 !important;

    border: 1px solid rgba(39, 163, 96, 0.24) !important;
    border-radius: 10px !important;

    box-shadow: none !important;
    outline: none !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 44px !important;

    cursor: pointer !important;

    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background-color 0.22s ease !important;
}

/* Focus */
body.woocommerce #shop-sidebar
select.woocommerce-widget-layered-nav-dropdown:focus,
body.woocommerce-page #shop-sidebar
select.woocommerce-widget-layered-nav-dropdown:focus,
body.woocommerce .shop-sidebar
select.woocommerce-widget-layered-nav-dropdown:focus,
body.woocommerce-page .shop-sidebar
select.woocommerce-widget-layered-nav-dropdown:focus {
    background-color: #ffffff !important;
    border-color: #27a360 !important;

    box-shadow:
        0 0 0 3px rgba(39, 163, 96, 0.12) !important;
}

/* Khung selectWoo/select2 */
body.woocommerce #shop-sidebar .select2-container,
body.woocommerce-page #shop-sidebar .select2-container,
body.woocommerce .shop-sidebar .select2-container,
body.woocommerce-page .shop-sidebar .select2-container {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Select2 đang hiển thị */
body.woocommerce #shop-sidebar
.select2-container .select2-selection--single,
body.woocommerce-page #shop-sidebar
.select2-container .select2-selection--single,
body.woocommerce .shop-sidebar
.select2-container .select2-selection--single,
body.woocommerce-page .shop-sidebar
.select2-container .select2-selection--single {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    height: 46px !important;

    margin: 0 !important;
    padding: 0 42px 0 14px !important;

    background: #f8fbf9 !important;

    border: 1px solid rgba(39, 163, 96, 0.24) !important;
    border-radius: 10px !important;

    box-shadow: none !important;
    outline: none !important;

    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background-color 0.22s ease !important;
}

/* Khi dropdown được mở */
body.woocommerce #shop-sidebar
.select2-container--open .select2-selection--single,
body.woocommerce-page #shop-sidebar
.select2-container--open .select2-selection--single,
body.woocommerce .shop-sidebar
.select2-container--open .select2-selection--single,
body.woocommerce-page .shop-sidebar
.select2-container--open .select2-selection--single {
    background: #ffffff !important;
    border-color: #27a360 !important;

    box-shadow:
        0 0 0 3px rgba(39, 163, 96, 0.12) !important;
}

/* Chữ bên trong Select2 */
body.woocommerce #shop-sidebar
.select2-selection__rendered,
body.woocommerce-page #shop-sidebar
.select2-selection__rendered,
body.woocommerce .shop-sidebar
.select2-selection__rendered,
body.woocommerce-page .shop-sidebar
.select2-selection__rendered {
    display: block !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #314239 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 44px !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Nút xóa giá trị đang chọn */
body.woocommerce #shop-sidebar
.select2-selection__clear,
body.woocommerce-page #shop-sidebar
.select2-selection__clear,
body.woocommerce .shop-sidebar
.select2-selection__clear,
body.woocommerce-page .shop-sidebar
.select2-selection__clear {
    position: relative !important;
    z-index: 3 !important;

    margin-right: 8px !important;

    color: #78877f !important;
    font-size: 17px !important;
    font-weight: 600 !important;
}

/* Mũi tên Select2 */
body.woocommerce #shop-sidebar
.select2-selection__arrow,
body.woocommerce-page #shop-sidebar
.select2-selection__arrow,
body.woocommerce .shop-sidebar
.select2-selection__arrow,
body.woocommerce-page .shop-sidebar
.select2-selection__arrow {
    top: 50% !important;
    right: 13px !important;

    width: 18px !important;
    height: 18px !important;

    transform: translateY(-50%) !important;
}

body.woocommerce #shop-sidebar
.select2-selection__arrow b,
body.woocommerce-page #shop-sidebar
.select2-selection__arrow b,
body.woocommerce .shop-sidebar
.select2-selection__arrow b,
body.woocommerce-page .shop-sidebar
.select2-selection__arrow b {
    border-top-color: #27a360 !important;
}

/* Dropdown mở ra */
.select2-container--open .select2-dropdown {
    overflow: hidden !important;

    background: #ffffff !important;

    border: 1px solid rgba(39, 163, 96, 0.25) !important;
    border-radius: 10px !important;

    box-shadow:
        0 12px 30px rgba(23, 37, 54, 0.14) !important;
}

/* Từng lựa chọn */
.select2-container--default
.select2-results__option {
    padding: 10px 14px !important;

    color: #314239 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* Hover lựa chọn */
.select2-container--default
.select2-results__option--highlighted[aria-selected] {
    color: #ffffff !important;
    background: #27a360 !important;
}

/* Lựa chọn đang được chọn */
.select2-container--default
.select2-results__option[aria-selected="true"] {
    color: #20894f !important;
    background: #edf8f2 !important;
}

/* =====================================================
   BỘ LỌC DẠNG DANH SÁCH
===================================================== */

body.woocommerce #shop-sidebar
.woocommerce-widget-layered-nav-list,
body.woocommerce-page #shop-sidebar
.woocommerce-widget-layered-nav-list,
body.woocommerce .shop-sidebar
.woocommerce-widget-layered-nav-list,
body.woocommerce-page .shop-sidebar
.woocommerce-widget-layered-nav-list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body.woocommerce #shop-sidebar
.woocommerce-widget-layered-nav-list__item,
body.woocommerce-page #shop-sidebar
.woocommerce-widget-layered-nav-list__item,
body.woocommerce .shop-sidebar
.woocommerce-widget-layered-nav-list__item,
body.woocommerce-page .shop-sidebar
.woocommerce-widget-layered-nav-list__item {
    position: relative !important;

    margin: 0 !important;
    padding: 0 !important;

    border-bottom: 1px solid #edf1ef !important;
    list-style: none !important;
}

body.woocommerce #shop-sidebar
.woocommerce-widget-layered-nav-list__item:last-child,
body.woocommerce-page #shop-sidebar
.woocommerce-widget-layered-nav-list__item:last-child,
body.woocommerce .shop-sidebar
.woocommerce-widget-layered-nav-list__item:last-child,
body.woocommerce-page .shop-sidebar
.woocommerce-widget-layered-nav-list__item:last-child {
    border-bottom: 0 !important;
}

/* Link giá trị bộ lọc */
body.woocommerce #shop-sidebar
.woocommerce-widget-layered-nav-list__item a,
body.woocommerce-page #shop-sidebar
.woocommerce-widget-layered-nav-list__item a,
body.woocommerce .shop-sidebar
.woocommerce-widget-layered-nav-list__item a,
body.woocommerce-page .shop-sidebar
.woocommerce-widget-layered-nav-list__item a {
    position: relative !important;
    display: block !important;

    margin: 0 !important;
    padding: 10px 34px 10px 27px !important;

    color: #405149 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;

    text-decoration: none !important;

    transition:
        color 0.2s ease,
        padding-left 0.2s ease !important;
}

/* Ô tròn giả checkbox */
body.woocommerce #shop-sidebar
.woocommerce-widget-layered-nav-list__item a::before,
body.woocommerce-page #shop-sidebar
.woocommerce-widget-layered-nav-list__item a::before,
body.woocommerce .shop-sidebar
.woocommerce-widget-layered-nav-list__item a::before,
body.woocommerce-page .shop-sidebar
.woocommerce-widget-layered-nav-list__item a::before {
    content: "" !important;

    position: absolute !important;
    top: 50% !important;
    left: 1px !important;

    width: 17px !important;
    height: 17px !important;

    background: #ffffff !important;
    border: 1.5px solid #bdc9c3 !important;
    border-radius: 5px !important;

    transform: translateY(-50%) !important;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}

/* Hover */
body.woocommerce #shop-sidebar
.woocommerce-widget-layered-nav-list__item a:hover,
body.woocommerce-page #shop-sidebar
.woocommerce-widget-layered-nav-list__item a:hover,
body.woocommerce .shop-sidebar
.woocommerce-widget-layered-nav-list__item a:hover,
body.woocommerce-page .shop-sidebar
.woocommerce-widget-layered-nav-list__item a:hover {
    color: #27a360 !important;
    padding-left: 30px !important;
}

body.woocommerce #shop-sidebar
.woocommerce-widget-layered-nav-list__item a:hover::before,
body.woocommerce-page #shop-sidebar
.woocommerce-widget-layered-nav-list__item a:hover::before,
body.woocommerce .shop-sidebar
.woocommerce-widget-layered-nav-list__item a:hover::before,
body.woocommerce-page .shop-sidebar
.woocommerce-widget-layered-nav-list__item a:hover::before {
    border-color: #27a360 !important;

    box-shadow:
        0 0 0 3px rgba(39, 163, 96, 0.1) !important;
}

/* Mục đang được chọn */
body.woocommerce #shop-sidebar
.woocommerce-widget-layered-nav-list__item.chosen a,
body.woocommerce-page #shop-sidebar
.woocommerce-widget-layered-nav-list__item.chosen a,
body.woocommerce .shop-sidebar
.woocommerce-widget-layered-nav-list__item.chosen a,
body.woocommerce-page .shop-sidebar
.woocommerce-widget-layered-nav-list__item.chosen a {
    color: #20894f !important;
    font-weight: 700 !important;
}

body.woocommerce #shop-sidebar
.woocommerce-widget-layered-nav-list__item.chosen a::before,
body.woocommerce-page #shop-sidebar
.woocommerce-widget-layered-nav-list__item.chosen a::before,
body.woocommerce .shop-sidebar
.woocommerce-widget-layered-nav-list__item.chosen a::before,
body.woocommerce-page .shop-sidebar
.woocommerce-widget-layered-nav-list__item.chosen a::before {
    background:
        #27a360
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 12 4 4L19 6'/%3E%3C/svg%3E")
        center / 11px 11px no-repeat !important;

    border-color: #27a360 !important;
}

/* Số lượng sản phẩm */
body.woocommerce #shop-sidebar
.woocommerce-widget-layered-nav-list__item .count,
body.woocommerce-page #shop-sidebar
.woocommerce-widget-layered-nav-list__item .count,
body.woocommerce .shop-sidebar
.woocommerce-widget-layered-nav-list__item .count,
body.woocommerce-page .shop-sidebar
.woocommerce-widget-layered-nav-list__item .count {
    position: absolute !important;
    top: 50% !important;
    right: 2px !important;

    min-width: 24px !important;
    padding: 2px 6px !important;

    color: #6d7a73 !important;
    background: #edf4f0 !important;
    border-radius: 999px !important;

    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: center !important;

    transform: translateY(-50%) !important;
}

/* =====================================================
   BỘ LỌC ĐANG ÁP DỤNG
===================================================== */

body.woocommerce #shop-sidebar
.widget_layered_nav_filters ul,
body.woocommerce-page #shop-sidebar
.widget_layered_nav_filters ul,
body.woocommerce .shop-sidebar
.widget_layered_nav_filters ul,
body.woocommerce-page .shop-sidebar
.widget_layered_nav_filters ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

body.woocommerce #shop-sidebar
.widget_layered_nav_filters li,
body.woocommerce-page #shop-sidebar
.widget_layered_nav_filters li,
body.woocommerce .shop-sidebar
.widget_layered_nav_filters li,
body.woocommerce-page .shop-sidebar
.widget_layered_nav_filters li {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Chip đang lọc */
body.woocommerce #shop-sidebar
.widget_layered_nav_filters a,
body.woocommerce-page #shop-sidebar
.widget_layered_nav_filters a,
body.woocommerce .shop-sidebar
.widget_layered_nav_filters a,
body.woocommerce-page .shop-sidebar
.widget_layered_nav_filters a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;

    min-height: 31px !important;

    margin: 0 !important;
    padding: 6px 11px !important;

    color: #20894f !important;
    background: #edf8f2 !important;

    border: 1px solid rgba(39, 163, 96, 0.25) !important;
    border-radius: 999px !important;

    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;

    text-decoration: none !important;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease !important;
}

/* Xóa dấu x mặc định WooCommerce */
body.woocommerce #shop-sidebar
.widget_layered_nav_filters a::before,
body.woocommerce-page #shop-sidebar
.widget_layered_nav_filters a::before,
body.woocommerce .shop-sidebar
.widget_layered_nav_filters a::before,
body.woocommerce-page .shop-sidebar
.widget_layered_nav_filters a::before {
    content: "×" !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 17px !important;
    height: 17px !important;

    margin: 0 !important;

    color: #ffffff !important;
    background: #27a360 !important;
    border-radius: 50% !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* Hover chip */
body.woocommerce #shop-sidebar
.widget_layered_nav_filters a:hover,
body.woocommerce-page #shop-sidebar
.widget_layered_nav_filters a:hover,
body.woocommerce .shop-sidebar
.widget_layered_nav_filters a:hover,
body.woocommerce-page .shop-sidebar
.widget_layered_nav_filters a:hover {
    color: #ffffff !important;
    background: #27a360 !important;
    border-color: #27a360 !important;
}

body.woocommerce #shop-sidebar
.widget_layered_nav_filters a:hover::before,
body.woocommerce-page #shop-sidebar
.widget_layered_nav_filters a:hover::before,
body.woocommerce .shop-sidebar
.widget_layered_nav_filters a:hover::before,
body.woocommerce-page .shop-sidebar
.widget_layered_nav_filters a:hover::before {
    color: #27a360 !important;
    background: #ffffff !important;
}

/* =====================================================
   TABLET VÀ MOBILE
===================================================== */

@media screen and (max-width: 849px) {
    body.woocommerce #shop-sidebar .widget_layered_nav,
    body.woocommerce #shop-sidebar .woocommerce-widget-layered-nav,
    body.woocommerce #shop-sidebar .widget_layered_nav_filters,
    body.woocommerce-page #shop-sidebar .widget_layered_nav,
    body.woocommerce-page #shop-sidebar .woocommerce-widget-layered-nav,
    body.woocommerce-page #shop-sidebar .widget_layered_nav_filters {
        margin-bottom: 14px !important;
        padding: 15px !important;
        border-radius: 12px !important;
    }

    body.woocommerce #shop-sidebar .widget-title,
    body.woocommerce-page #shop-sidebar .widget-title {
        margin-bottom: 12px !important;
        font-size: 14px !important;
    }

    body.woocommerce #shop-sidebar
    .select2-container .select2-selection--single,
    body.woocommerce-page #shop-sidebar
    .select2-container .select2-selection--single,
    body.woocommerce #shop-sidebar
    select.woocommerce-widget-layered-nav-dropdown,
    body.woocommerce-page #shop-sidebar
    select.woocommerce-widget-layered-nav-dropdown {
        height: 44px !important;
    }
}