/* =========================================================
   KEHETO - DỊCH VỤ OEM / ODM
   Chỉ áp dụng trong .kht-dichvu-section1
========================================================= */

.kht-dichvu-section1 {
    --kht-primary: #28cb8b;
    --kht-primary-dark: #159867;
    --kht-dark: #0c3025;
    --kht-text: #304c43;
    --kht-muted: #526a61;
    --kht-white: #ffffff;
    --kht-border: rgba(40, 203, 139, 0.22);
    --kht-visual-height: 610px;

    position: relative;
    overflow: hidden;
    background: #f4faf7;
}

.kht-dichvu-section1 *,
.kht-dichvu-section1 *::before,
.kht-dichvu-section1 *::after {
    box-sizing: border-box;
}

/* Tạo nền nhẹ cho toàn section */
.kht-dichvu-section1 .section-bg {
    background:
        radial-gradient(
            circle at 6% 12%,
            rgba(40, 203, 139, 0.13),
            transparent 27%
        ),
        radial-gradient(
            circle at 94% 86%,
            rgba(40, 203, 139, 0.08),
            transparent 25%
        ),
        linear-gradient(135deg, #f9fcfa, #f0f8f4);
}

/* Tạo họa tiết lưới mờ trên nền */
.kht-dichvu-section1 .section-bg::after {
    position: absolute;
    inset: 0;

    content: "";
    pointer-events: none;

    opacity: 0.28;

    background-image:
        linear-gradient(
            rgba(40, 203, 139, 0.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(40, 203, 139, 0.06) 1px,
            transparent 1px
        );

    background-size: 52px 52px;

    -webkit-mask-image:
        linear-gradient(90deg, #000000, transparent 72%);

    mask-image:
        linear-gradient(90deg, #000000, transparent 72%);
}

/* Tạo khoảng cách cho nội dung section */
.kht-dichvu-section1 > .section-content {
    position: relative;
    z-index: 2;

    padding: 42px 20px;
}


/* =========================================================
   BỐ CỤC CHÍNH
========================================================= */

/* Chia section thành hai cột trên desktop */
.kht-dichvu-section1 > .section-content > .row {
    display: grid;

    grid-template-columns:
        minmax(0, 0.96fr)
        minmax(560px, 1.04fr);

    align-items: stretch;

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

    margin: 0 auto;

    gap: clamp(38px, 4vw, 58px);
}

/* Gỡ kích thước cột mặc định của Flatsome */
.kht-dichvu-section1
> .section-content
> .row
> .dichvu-trai-s1,
.kht-dichvu-section1
> .section-content
> .row
> .dichvu-phai-s1 {
    width: auto;
    max-width: none;
    min-width: 0;

    flex-basis: auto;

    padding: 0;
}


/* =========================================================
   CỘT NỘI DUNG BÊN TRÁI
========================================================= */

.kht-dichvu-section1 .dichvu-trai-s1 {
    position: relative;
    z-index: 3;

    min-height: var(--kht-visual-height);
}

/* Dàn đều các nhóm nội dung theo chiều cao cột ảnh */
.kht-dichvu-section1
.dichvu-trai-s1
> .col-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    width: 100%;
    height: 100%;
    min-height: var(--kht-visual-height);

    padding: 64px 0 52px;
}

/* Gỡ margin mặc định của row con */
.kht-dichvu-section1 .dichvu-trai-s1 .row {
    width: 100%;
    max-width: none;

    margin-right: 0;
    margin-left: 0;
}

.kht-dichvu-section1 .s1-trai-text1,
.kht-dichvu-section1 .s1-trai-text2,
.kht-dichvu-section1 .s1-trai-text3 {
    flex: 0 0 auto;
}

.kht-dichvu-section1 .s1-trai-text1 > .col,
.kht-dichvu-section1 .s1-trai-text3 > .col {
    padding: 0;
}

/* Không hiển thị nhãn OEM / ODM COSMETICS */
.kht-dichvu-section1
.s1-trai-text1
> .col
> .col-inner::before,
.kht-dichvu-section1
.s1-trai-text1
> .col
> .col-inner::after {
    display: none;
    content: none;
}


/* =========================================================
   TIÊU ĐỀ
========================================================= */

.kht-dichvu-section1 .s1-t1,
.kht-dichvu-section1 .s1-t2,
.kht-dichvu-section1 .s1-t3,
.kht-dichvu-section1 .s1-t1 p,
.kht-dichvu-section1 .s1-t2 p,
.kht-dichvu-section1 .s1-t3 p {
    margin: 0;
}

.kht-dichvu-section1 .s1-t1 p,
.kht-dichvu-section1 .s1-t2 p {
    font-size: clamp(2.45rem, 3.7vw, 3.75rem);
    line-height: 0.98;
    letter-spacing: -0.05em;

    text-transform: uppercase;
}

.kht-dichvu-section1 .s1-t1 p {
    color: var(--kht-dark);
    font-weight: 500;
}

.kht-dichvu-section1 .s1-t2 p {
    margin-top: 10px;

    color: var(--kht-primary-dark);
    font-weight: 800;
}

/* Giữ tiêu đề trên một dòng ở desktop lớn */
@media screen and (min-width: 1181px) {
    .kht-dichvu-section1 .s1-t1 p,
    .kht-dichvu-section1 .s1-t2 p {
        white-space: nowrap;
    }
}


/* =========================================================
   KHỐI MÔ TẢ
========================================================= */

.kht-dichvu-section1 .s1-t3 {
    position: relative;

    margin-top: 30px;
    padding: 23px 25px 22px 72px;

    overflow: hidden;

    border: 1px solid rgba(15, 48, 37, 0.08);
    border-radius: 19px;

    background: rgba(255, 255, 255, 0.82);

    box-shadow:
        0 12px 35px rgba(13, 62, 46, 0.065);

    backdrop-filter: blur(10px);
}

/* Tạo dấu ngoặc kép */
.kht-dichvu-section1 .s1-t3::before {
    position: absolute;
    top: 14px;
    left: 21px;

    color: var(--kht-primary);
    content: "“";

    font-family: Georgia, serif;
    font-size: 4.7rem;
    font-weight: 700;
    line-height: 1;
}

/* Tạo đường line phía dưới mô tả */
.kht-dichvu-section1 .s1-t3::after {
    position: absolute;
    right: 25px;
    bottom: 0;
    left: 72px;

    height: 3px;

    content: "";

    border-radius: 999px 999px 0 0;

    background:
        linear-gradient(
            90deg,
            var(--kht-primary),
            rgba(40, 203, 139, 0.35) 62%,
            transparent
        );
}

.kht-dichvu-section1 .s1-t3 p {
    color: var(--kht-text);

    font-size: clamp(0.96rem, 1.1vw, 1.04rem);
    line-height: 1.85;
}


/* =========================================================
   BA CARD CHỈ SỐ BÊN TRÁI
========================================================= */

.kht-dichvu-section1 .s1-trai-text2 {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    margin-top: 0;
    margin-right: 0;
    margin-left: 0;

    gap: 20px;
}

.kht-dichvu-section1 .s1-trai-text2 > .col {
    width: auto;
    max-width: none;
    min-width: 0;

    flex-basis: auto;

    padding: 0;
}

/* Tạo giao diện card chỉ số */
.kht-dichvu-section1
.s1-trai-text2
> .col
> .col-inner {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    height: 100%;
    min-height: 108px;

    padding: 17px 16px 15px;

    overflow: hidden;

    border: 1px solid var(--kht-border);
    border-radius: 18px;

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

    transition:
        border-color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

/* Tạo đường xanh phía trên card */
.kht-dichvu-section1
.s1-trai-text2
> .col
> .col-inner::before {
    position: absolute;
    top: 0;
    right: 16px;
    left: 16px;

    height: 3px;

    content: "";

    border-radius: 0 0 999px 999px;

    background: var(--kht-primary);

    transform: scaleX(0.3);
    transform-origin: left center;

    transition: transform 0.3s ease;
}

/* Tạo hiệu ứng hover card */
.kht-dichvu-section1
.s1-trai-text2
> .col
> .col-inner:hover {
    border-color: rgba(40, 203, 139, 0.48);

    background: var(--kht-white);

    box-shadow:
        0 14px 32px rgba(18, 84, 61, 0.09);

    transform: translateY(-3px);
}

.kht-dichvu-section1
.s1-trai-text2
> .col
> .col-inner:hover::before {
    transform: scaleX(1);
}

.kht-dichvu-section1 .s1-trai-text2 p {
    margin: 0;
}

.kht-dichvu-section1 .s1-so-1 p,
.kht-dichvu-section1 .s1-so-2 p,
.kht-dichvu-section1 .s1-so-3 p {
    margin-bottom: 7px;

    color: var(--kht-dark);

    font-size: clamp(1.14rem, 1.45vw, 1.42rem);
    font-weight: 800;
    line-height: 1.1;
}

.kht-dichvu-section1
.s1-trai-text2
> .col
> .col-inner
> p {
    color: var(--kht-muted);

    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: justify;
}


/* =========================================================
   NÚT CTA
========================================================= */

.kht-dichvu-section1 .s1-trai-text3 {
    margin-top: 0;
}

.kht-dichvu-section1
.s1-trai-text3
> .col:nth-child(2) {
    display: none;
}

/* Tạo nút CTA */
.kht-dichvu-section1
.s1-trai-text3
.button {
    position: relative;

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

    min-height: 54px;

    margin: 0;
    padding: 0 59px 0 26px;

    overflow: hidden;

    border: 1px solid var(--kht-primary);
    border-radius: 999px;

    color: var(--kht-dark);
    background: var(--kht-primary);

    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.07em;
    text-transform: uppercase;

    box-shadow:
        0 12px 28px rgba(40, 203, 139, 0.2);

    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* Tạo vòng tròn chứa mũi tên */
.kht-dichvu-section1
.s1-trai-text3
.button::before {
    position: absolute;
    top: 50%;
    right: 6px;

    display: grid;

    width: 41px;
    height: 41px;

    place-items: center;

    border-radius: 50%;

    color: var(--kht-white);
    content: "→";
    background: var(--kht-dark);

    font-size: 1.12rem;

    transform: translateY(-50%);

    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        transform 0.3s ease;
}

.kht-dichvu-section1
.s1-trai-text3
.button:hover {
    border-color: var(--kht-primary-dark);

    color: var(--kht-white);
    background: var(--kht-primary-dark);
}

.kht-dichvu-section1
.s1-trai-text3
.button:hover::before {
    color: var(--kht-dark);
    background: var(--kht-white);

    transform:
        translateY(-50%)
        rotate(-22deg);
}


/* =========================================================
   KHUNG ẢNH BÊN PHẢI
========================================================= */

.kht-dichvu-section1 .dichvu-phai-s1 {
    position: relative;
    z-index: 2;

    min-width: 0;
}

.kht-dichvu-section1
.dichvu-phai-s1
> .col-inner {
    position: relative;

    height: 100%;
    min-height: var(--kht-visual-height);

    padding: 24px;

    border: 1px solid rgba(12, 48, 37, 0.12);
    border-radius: 35px;

    background: var(--kht-primary);

    box-shadow:
        0 24px 58px rgba(40, 203, 139, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Không hiển thị dòng editorial */
.kht-dichvu-section1
.dichvu-phai-s1
> .col-inner::before {
    display: none;
    content: none;
}

/* Tạo nhãn KEHETO */
.kht-dichvu-section1
.dichvu-phai-s1
> .col-inner::after {
    position: absolute;
    top: 125px;
    left: -12px;
    z-index: 8;

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

    width: 38px;
    min-height: 112px;

    padding: 10px 0;

    border: 1px solid var(--kht-border);
    border-radius: 10px;

    color: var(--kht-primary);
    content: "KEHETO";
    background: var(--kht-white);

    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.15em;

    writing-mode: vertical-rl;

    transform: rotate(180deg);

    box-shadow:
        0 10px 26px rgba(12, 48, 37, 0.16);
}


/* =========================================================
   ẢNH PHÒNG LAB
========================================================= */

.kht-dichvu-section1 .dichvu-phai-s1 .img {
    position: relative;
    z-index: 2;

    width: 100%;
    margin: 0;
}

/* Tạo khung cắt ảnh */
.kht-dichvu-section1
.dichvu-phai-s1
.img-inner {
    position: relative;

    height: 562px;

    overflow: hidden;

    border: 1px solid rgba(12, 48, 37, 0.12);
    border-radius: 25px;

    background: #dfe8e4;
}

/* Tạo lớp phủ nhẹ trên ảnh */
.kht-dichvu-section1
.dichvu-phai-s1
.img-inner::after {
    position: absolute;
    inset: 0;
    z-index: 2;

    content: "";
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(7, 38, 28, 0.01) 40%,
            rgba(7, 38, 28, 0.24)
        ),
        linear-gradient(
            90deg,
            rgba(7, 38, 28, 0.05),
            transparent 52%
        );
}

.kht-dichvu-section1
.dichvu-phai-s1
.img-inner img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 62%;

    filter:
        brightness(1.055)
        contrast(1.02)
        saturate(0.95);

    transform: scale(1.025);

    will-change: transform;
}


/* =========================================================
   BA CARD NỔI TRÊN ẢNH
   Đã tăng kích thước text số lên 0.9rem
   và thu gọn card vừa đủ nội dung
========================================================= */

/* Tạo lớp chứa ba card nổi trên ảnh */
.kht-dichvu-section1 .s1-badge {
    position: absolute;
    inset: 0;
    z-index: 6;

    display: block;

    width: 100%;
    max-width: none;

    margin: 0;

    pointer-events: none;
}

/* Thiết lập kích thước chung cho từng card */
.kht-dichvu-section1 .s1-badge > .col {
    position: absolute;

    width: 170px;
    max-width: 170px;

    padding: 0;

    pointer-events: auto;

    will-change: transform;
}

/* Không hiển thị số thứ tự tự động của card */
.kht-dichvu-section1
.s1-badge
> .col::before {
    display: none;

    content: none;
}

/* Vị trí card 1000+ Công thức */
.kht-dichvu-section1
.s1-badge
> .badge1 {
    top: 98px;
    right: 12px;
}

/* Vị trí card 300+ Đối tác */
.kht-dichvu-section1
.s1-badge
> .badge2 {
    bottom: 133px;
    left: 12px;
}

/* Vị trí card 1.000.000+ Sản phẩm mỗi ngày */
.kht-dichvu-section1
.s1-badge
> .badge3 {
    right: 18px;
    bottom: 28px;
}

/* Giao diện bên trong từng card */
.kht-dichvu-section1
.s1-badge
> .col
> .col-inner {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 74px;

    padding: 11px 14px;

    overflow: hidden;

    border: 1px solid rgba(40, 203, 139, 0.2);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.96);

    box-shadow:
        0 13px 29px rgba(0, 0, 0, 0.14);

    backdrop-filter: blur(10px);

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

/* Không hiển thị mảng trang trí phụ trong card */
.kht-dichvu-section1
.s1-badge
> .col
> .col-inner::after {
    display: none;

    content: none;
}

/* Hiệu ứng khi rê chuột vào card */
.kht-dichvu-section1
.s1-badge
> .col:hover
> .col-inner {
    border-color: rgba(40, 203, 139, 0.55);

    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.17),
        0 0 0 3px rgba(40, 203, 139, 0.06);

    transform: translateY(-3px);
}

/* Xóa khoảng cách mặc định của thẻ đoạn văn */
.kht-dichvu-section1 .s1-badge p {
    margin: 0;
}

/* Định dạng phần số: 1000+, 300+, 1.000.000+ */
.kht-dichvu-section1
.s1-badge
> .col
> .col-inner
> p:first-child {
    width: 100%;
    max-width: none;

    margin-bottom: 4px;

    color: var(--kht-dark);

    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.25;

    white-space: nowrap;
}

/* Định dạng phần mô tả bên dưới số */
.kht-dichvu-section1
.s1-badge
> .col
> .col-inner
> p:last-child {
    color: var(--kht-muted);

    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.4;
}


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

@media screen and (max-width: 1180px) {

    /* Chuyển bố cục thành một cột */
    .kht-dichvu-section1
    > .section-content
    > .row {
        grid-template-columns: 1fr;
        align-items: initial;

        max-width: 850px;

        gap: 46px;
    }

    /* Trả chiều cao cột trái về tự nhiên */
    .kht-dichvu-section1 .dichvu-trai-s1 {
        min-height: 0;
    }

    .kht-dichvu-section1
    .dichvu-trai-s1
    > .col-inner {
        display: block;

        min-height: 0;

        padding: 0;
    }

    .kht-dichvu-section1 .s1-trai-text2 {
        margin-top: 20px;
    }

    .kht-dichvu-section1 .s1-trai-text3 {
        margin-top: 18px;
    }

    .kht-dichvu-section1 .s1-t1 p,
    .kht-dichvu-section1 .s1-t2 p {
        font-size: clamp(2.5rem, 7vw, 4rem);

        white-space: normal;
    }
}


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

@media screen and (max-width: 767px) {

    .kht-dichvu-section1 > .section-content {
        padding: 30px 16px;
    }

    .kht-dichvu-section1
    > .section-content
    > .row {
        gap: 32px;
    }

    /* Thu nhỏ tiêu đề trên mobile */
    .kht-dichvu-section1 .s1-t1 p,
    .kht-dichvu-section1 .s1-t2 p {
        font-size: clamp(2rem, 9.5vw, 3rem);
        line-height: 1.02;
    }

    /* Điều chỉnh khối mô tả trên mobile */
    .kht-dichvu-section1 .s1-t3 {
        margin-top: 22px;

        padding: 55px 18px 19px;

        border-radius: 18px;
    }

    .kht-dichvu-section1 .s1-t3::before {
        top: 8px;
        left: 17px;

        font-size: 3.9rem;
    }

    .kht-dichvu-section1 .s1-t3::after {
        right: 18px;
        left: 18px;
    }

    .kht-dichvu-section1 .s1-t3 p {
        font-size: 0.93rem;
        line-height: 1.8;
    }

    /*
       Cho ba card chỉ số nằm cùng một hàng
       và có thể kéo ngang.
    */
    .kht-dichvu-section1 .s1-trai-text2 {
        display: flex;
        flex-wrap: nowrap;

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

        margin-top: 10px;
        margin-right: 0;
        margin-left: 0;

        padding: 1px 1px 6px;

        gap: 12px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-padding-left: 1px;
        scroll-behavior: smooth;

        overscroll-behavior-inline: contain;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }

    /* Ẩn thanh cuộn ngang */
    .kht-dichvu-section1
    .s1-trai-text2::-webkit-scrollbar {
        display: none;
    }

    /*
       Hiển thị hai card trong cùng một màn hình mobile.
       Mỗi card chiếm một nửa chiều rộng sau khi trừ khoảng cách 12px.
       Card thứ ba tiếp tục nằm cùng hàng và có thể vuốt ngang để xem.
    */
    .kht-dichvu-section1
    .s1-trai-text2
    > .col {
        flex: 0 0 calc((100% - 12px) / 2);

        width: calc((100% - 12px) / 2);
        min-width: calc((100% - 12px) / 2);
        max-width: calc((100% - 12px) / 2);

        padding: 0;

        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /*
       Bỏ bố cục grid cũ gây ép nội dung vào cột 58px.
       Nội dung card sử dụng toàn bộ chiều ngang.
    */
    .kht-dichvu-section1
    .s1-trai-text2
    > .col
    > .col-inner {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        width: 100%;
        min-height: 92px;

        padding: 16px 18px;

        border-radius: 16px;
    }

    /* Giữ định dạng phần chỉ số nếu được hiển thị từ UX Builder */
    .kht-dichvu-section1 .s1-so-1 p,
    .kht-dichvu-section1 .s1-so-2 p,
    .kht-dichvu-section1 .s1-so-3 p {
        margin: 0 12px 0 0;

        font-size: 0.96rem;
        line-height: 1.1;

        white-space: nowrap;
    }

    /* Cho đoạn mô tả sử dụng toàn bộ chiều rộng card */
    .kht-dichvu-section1
    .s1-trai-text2
    > .col
    > .col-inner
    > p {
        width: 100%;

        margin: 0;

        font-size: 0.82rem;
        line-height: 1.55;
        text-align: left;
    }

    /* Điều chỉnh nút CTA trên mobile */
    .kht-dichvu-section1 .s1-trai-text3 {
        margin-top: 18px;
    }

    .kht-dichvu-section1
    .s1-trai-text3
    .button {
        width: 100%;
    }

    /* Điều chỉnh khung ảnh trên mobile */
    .kht-dichvu-section1
    .dichvu-phai-s1
    > .col-inner {
        min-height: auto;

        padding: 42px 14px 14px;

        border-radius: 25px;
    }

    /* Chuyển nhãn KEHETO thành chiều ngang */
    .kht-dichvu-section1
    .dichvu-phai-s1
    > .col-inner::after {
        top: 21px;
        left: 50%;

        width: auto;
        min-width: 104px;
        min-height: 32px;

        padding: 0 14px;

        writing-mode: initial;

        transform: translate(-50%, -50%);
    }

    .kht-dichvu-section1
    .dichvu-phai-s1
    .img-inner {
        height: 390px;

        border-radius: 20px;
    }

    /*
       Xếp ba card chỉ số thành một hàng ngang trên mobile.
       Mỗi card chiếm một phần ba chiều rộng của khung xanh.
    */
    .kht-dichvu-section1 .s1-badge {
        position: relative;
        inset: auto;

        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));

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

        margin-top: 8px;

        gap: 6px;
    }

    /* Reset vị trí tuyệt đối và chiều rộng desktop của từng card */
    .kht-dichvu-section1 .s1-badge > .col,
    .kht-dichvu-section1 .s1-badge > .badge1,
    .kht-dichvu-section1 .s1-badge > .badge2,
    .kht-dichvu-section1 .s1-badge > .badge3 {
        position: relative;
        inset: auto;

        width: 100%;
        max-width: none;
        min-width: 0;

        padding: 0;
    }

    /* Thu hẹp chiều cao và khoảng đệm của từng card */
    .kht-dichvu-section1
    .s1-badge
    > .col
    > .col-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        width: 100%;
        min-height: 50px;

        padding: 5px 3px;

        border-radius: 10px;

        text-align: center;
    }

    /* Định dạng phần số của card */
    .kht-dichvu-section1
    .s1-badge
    > .col
    > .col-inner
    > p:first-child {
        width: 100%;

        margin-bottom: 2px;

        font-size: 0.63rem;
        line-height: 1.15;

        text-align: center;
        white-space: nowrap;
    }

    /* Thu nhỏ riêng số 1.000.000+ để không tràn card */
    .kht-dichvu-section1
    .s1-badge
    > .badge3
    > .col-inner
    > p:first-child {
        font-size: 0.56rem;
    }

    /* Định dạng phần mô tả của card */
    .kht-dichvu-section1
    .s1-badge
    > .col
    > .col-inner
    > p:last-child {
        width: 100%;

        font-size: 0.49rem;
        line-height: 1.2;

        text-align: center;
        white-space: normal;
    }
}


/* =========================================================
   MOBILE NHỎ
========================================================= */

@media screen and (max-width: 390px) {

    .kht-dichvu-section1 .s1-t1 p,
    .kht-dichvu-section1 .s1-t2 p {
        font-size: 1.92rem;
    }

    /* Giữ hai card trong cùng một màn hình mobile nhỏ */
    .kht-dichvu-section1
    .s1-trai-text2
    > .col {
        flex-basis: calc((100% - 12px) / 2);

        width: calc((100% - 12px) / 2);
        min-width: calc((100% - 12px) / 2);
        max-width: calc((100% - 12px) / 2);
    }

    /* Thu gọn nhẹ card nhưng không ép chiều ngang nội dung */
    .kht-dichvu-section1
    .s1-trai-text2
    > .col
    > .col-inner {
        min-height: 88px;

        padding: 14px 15px;
    }

    /* Điều chỉnh chữ mô tả trên màn hình hẹp */
    .kht-dichvu-section1
    .s1-trai-text2
    > .col
    > .col-inner
    > p {
        font-size: 0.78rem;
        line-height: 1.5;
    }

    .kht-dichvu-section1
    .dichvu-phai-s1
    .img-inner {
        height: 340px;
    }

    /* Thu nhỏ thêm ba card chỉ số trên màn hình hẹp */
    .kht-dichvu-section1 .s1-badge {
        gap: 5px;
    }

    .kht-dichvu-section1
    .s1-badge
    > .col
    > .col-inner {
        min-height: 46px;

        padding: 4px 2px;

        border-radius: 9px;
    }

    .kht-dichvu-section1
    .s1-badge
    > .col
    > .col-inner
    > p:first-child {
        font-size: 0.58rem;
    }

    .kht-dichvu-section1
    .s1-badge
    > .badge3
    > .col-inner
    > p:first-child {
        font-size: 0.51rem;
    }

    .kht-dichvu-section1
    .s1-badge
    > .col
    > .col-inner
    > p:last-child {
        font-size: 0.45rem;
    }
}


/* =========================================================
   GIẢM CHUYỂN ĐỘNG
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .kht-dichvu-section1 *,
    .kht-dichvu-section1 *::before,
    .kht-dichvu-section1 *::after {
        transition-duration: 0.01ms;
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }
}












/* =========================================================
   KEHETO - QUY TRÌNH GIA CÔNG OEM/ODM
   Desktop: vòng tròn đầy đủ
   Mobile: thu nhỏ nguyên vòng desktop theo đúng tỷ lệ

   THAY ĐỔI:
   - Kích thước hình icon thực tế: 60px
   - Giữ nguyên khung icon: 76px
   - Không thay đổi vị trí, đường nối và animation
========================================================= */

.kht-dichvu-section2 {
  --kht-process-primary: #28cb8b;
  --kht-process-dark: #237d31;
  --kht-process-deep: #103e13;
  --kht-process-text: #263238;
  --kht-process-muted: #647076;
  --kht-process-tint: #e8f5e9;
  --kht-process-white: #ffffff;

  position: relative;

  overflow: hidden;

  padding: 0;

  background:
    radial-gradient(
      circle at 75% 50%,
      rgba(40, 203, 139, 0.1) 0,
      rgba(40, 203, 139, 0.035) 35%,
      transparent 64%
    ),
    linear-gradient(
      130deg,
      #ffffff 0%,
      #f7faf9 50%,
      #effaf5 100%
    );
}

/* Đồng bộ cách tính kích thước trong toàn bộ section */
.kht-dichvu-section2 *,
.kht-dichvu-section2 *::before,
.kht-dichvu-section2 *::after {
  box-sizing: border-box;
}

/* Tạo vòng sáng trang trí phía sau sơ đồ */
.kht-dichvu-section2::before {
  position: absolute;
  top: -350px;
  right: -230px;

  width: 1120px;
  height: 1120px;

  content: "";
  pointer-events: none;

  border: 80px solid rgba(40, 203, 139, 0.02);
  border-radius: 50%;

  box-shadow:
    0 0 0 100px rgba(40, 203, 139, 0.014),
    0 0 0 200px rgba(40, 203, 139, 0.008);
}

/* Tạo khoảng cách tổng cho section */
.kht-dichvu-section2 > .section-content {
  position: relative;
  z-index: 2;

  padding: 58px 20px;
}

/* Chia section thành hai cột trên desktop */
.kht-dichvu-section2
  > .section-content
  > .row {
  display: grid;

  grid-template-columns:
    420px minmax(0, 1fr);

  align-items: center;

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

  margin: 0 auto;

  gap: 30px;
}

/* Reset kích thước mặc định của hai cột Flatsome */
.kht-dichvu-section2
  > .section-content
  > .row
  > .quytrinh-trai,
.kht-dichvu-section2
  > .section-content
  > .row
  > .quytrinh-phai {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  padding: 0;

  flex-basis: auto;
}


/* =========================================================
   NỘI DUNG BÊN TRÁI
========================================================= */

/* Tạo vùng chứa nội dung bên trái */
.kht-dichvu-section2
  .quytrinh-trai
  > .col-inner {
  position: relative;

  padding: 10px 0;
}

/* Tạo đường nhấn phía trên tiêu đề */
.kht-dichvu-section2
  .quytrinh-trai
  > .col-inner::before {
  display: block;

  width: 42px;
  height: 3px;

  margin-bottom: 23px;

  content: "";

  border-radius: 999px;

  background: var(--kht-process-primary);
}

/* Định dạng tiêu đề chính */
.kht-dichvu-section2
  .quytrinh-trai
  h2 {
  width: max-content;
  max-width: 100%;

  margin: 0;

  color: var(--kht-process-text);

  font-size: clamp(1.8rem, 2.35vw, 2.45rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.055em;

  white-space: nowrap;
  text-transform: uppercase;
}

/* Định dạng tiêu đề OEM/ODM */
.kht-dichvu-section2
  .quytrinh-trai
  h3 {
  position: relative;

  margin: 16px 0 27px;
  padding-bottom: 25px;

  color: var(--kht-process-dark);

  font-size: clamp(1.4rem, 1.8vw, 1.9rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.045em;

  text-transform: uppercase;
}

/* Tạo đường phân cách dưới tiêu đề OEM/ODM */
.kht-dichvu-section2
  .quytrinh-trai
  h3::after {
  position: absolute;
  bottom: 0;
  left: 0;

  width: 145px;
  height: 1px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--kht-process-primary),
      rgba(40, 203, 139, 0)
    );
}

/* Tạo chấm tròn cuối đường phân cách */
.kht-dichvu-section2
  .quytrinh-trai
  h3::before {
  position: absolute;
  bottom: -2px;
  left: 140px;

  width: 5px;
  height: 5px;

  content: "";

  border-radius: 50%;

  background: var(--kht-process-primary);
}

/* Định dạng đoạn mô tả nổi bật */
.kht-dichvu-section2
  .quytrinh-trai
  p:first-of-type {
  max-width: 420px;

  margin: 0 0 18px;

  color: var(--kht-process-text);

  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.55;
}

/* Định dạng đoạn mô tả chi tiết */
.kht-dichvu-section2
  .quytrinh-trai
  p:nth-of-type(2) {
  max-width: 440px;

  margin: 0 0 27px;

  color: var(--kht-process-muted);

  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.78;
}

/* Tạo giao diện nút bắt đầu */
.kht-dichvu-section2
  .quytrinh-trai
  .button {
  position: relative;

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

  min-width: 220px;
  min-height: 51px;

  margin: 0;
  padding: 0 58px 0 27px;

  border: 1px solid var(--kht-process-primary);
  border-radius: 10px;

  color: var(--kht-process-white);

  background:
    linear-gradient(
      105deg,
      var(--kht-process-dark),
      var(--kht-process-primary)
    );

  box-shadow:
    0 13px 28px rgba(40, 203, 139, 0.22);

  font-size: 0.81rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.03em;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Tạo mũi tên bên trong nút */
.kht-dichvu-section2
  .quytrinh-trai
  .button::after {
  position: absolute;
  top: 50%;
  right: 22px;

  color: var(--kht-process-white);

  content: "→";

  font-size: 1.25rem;

  transform: translateY(-52%);

  transition: transform 0.3s ease;
}

/* Tạo hiệu ứng hover cho nút */
.kht-dichvu-section2
  .quytrinh-trai
  .button:hover {
  color: var(--kht-process-white);

  box-shadow:
    0 17px 34px rgba(40, 203, 139, 0.3);

  transform: translateY(-3px);
}

/* Di chuyển mũi tên khi hover nút */
.kht-dichvu-section2
  .quytrinh-trai
  .button:hover::after {
  transform: translate(5px, -52%);
}


/* =========================================================
   KHUNG SƠ ĐỒ BÊN PHẢI
========================================================= */

/* Tạo vùng chứa sơ đồ bên phải */
.kht-dichvu-section2
  .quytrinh-phai {
  position: relative;

  min-width: 0;
}

/* Căn giữa sơ đồ trong cột bên phải */
.kht-dichvu-section2
  .quytrinh-phai
  > .col-inner {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 770px;

  overflow: visible;
}

/* Tạo canvas cố định để sơ đồ luôn là hình tròn */
.kht-dichvu-section2
  .quytrinh-phai
  .row-small {
  position: relative;

  display: block;

  flex: 0 0 750px;

  width: 750px;
  min-width: 750px;
  max-width: none;

  height: 750px;
  min-height: 750px;

  margin: 14px 0 0;

  overflow: visible;
}

/* Tạo vòng tròn nền của quy trình */
.kht-dichvu-section2
  .quytrinh-phai
  .row-small::before {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;

  width: 480px;
  height: 480px;

  content: "";

  border: 1px solid rgba(35, 125, 49, 0.17);
  border-radius: 50%;

  box-shadow:
    0 0 0 28px rgba(40, 203, 139, 0.018),
    0 0 0 68px rgba(40, 203, 139, 0.01);

  transform: translate(-50%, -50%);
}

/* Tạo vùng ánh sáng quanh logo trung tâm */
.kht-dichvu-section2
  .quytrinh-phai
  .row-small::after {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;

  width: 290px;
  height: 290px;

  content: "";

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(40, 203, 139, 0.11),
      rgba(40, 203, 139, 0.025) 58%,
      transparent 74%
    );

  transform: translate(-50%, -50%);
}


/* =========================================================
   ĐƯỜNG NỐI SVG
========================================================= */

/* Định vị lớp SVG chứa các đường nối */
.kht-dichvu-section2
  .kht-process-svg {
  position: absolute;
  z-index: 1;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  overflow: visible;

  pointer-events: none;
}

/* Định dạng đường nối giữa các bước */
.kht-dichvu-section2
  .kht-process-path {
  fill: none;

  stroke: var(--kht-process-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;

  opacity: 0;
}


/* =========================================================
   MỖI BƯỚC QUY TRÌNH
========================================================= */

/* Định vị từng bước trên vòng tròn */
.kht-dichvu-section2
  .quytrinh-phai
  .row-small
  > .kht-process-step {
  position: absolute;
  z-index: 3;

  width: 76px;
  max-width: 76px;
  height: 76px;

  padding: 0;

  transform: translate(-50%, -50%);
}

/* Tạo khung trực tiếp cho từng bước */
.kht-dichvu-section2
  .quytrinh-phai
  .kht-process-step
  > .col-inner {
  position: relative;

  width: 76px;
  height: 76px;

  padding: 0;

  overflow: visible;

  background: transparent;
}

/* Tạo vùng icon-box của mỗi bước */
.kht-dichvu-section2
  .quytrinh-phai
  .icon-box {
  position: relative;

  display: block;

  width: 76px;
  height: 76px;

  overflow: visible;
}


/* =========================================================
   KHUNG TRÒN CHỨA ICON
   Hình icon bên trong được tăng lên đúng 60px
========================================================= */

/*
 * Giữ khung ngoài 76px để JavaScript và đường nối
 * tiếp tục tính toán đúng vị trí.
 *
 * Với box-sizing: border-box:
 * 76px - 2px border - 14px padding = 60px.
 */
.kht-dichvu-section2
  .quytrinh-phai
  .icon-box-img {
  position: relative;

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

  width: 76px;
  min-width: 76px;
  max-width: 76px;
  height: 76px;

  margin: 0;
  padding: 7px;

  border: 1px solid rgba(35, 125, 49, 0.2);
  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f3faf5
    );

  box-shadow:
    0 9px 20px rgba(38, 50, 56, 0.1),
    0 0 0 5px rgba(40, 203, 139, 0.025);

  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

/* Tạo badge số thứ tự phía trên icon */
.kht-dichvu-section2
  .quytrinh-phai
  .icon-box-img::before {
  position: absolute;
  z-index: 4;
  top: -15px;
  left: 50%;

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

  width: 30px;
  height: 30px;

  content: attr(data-step);

  border: 3px solid var(--kht-process-white);
  border-radius: 50%;

  color: var(--kht-process-white);

  background:
    linear-gradient(
      145deg,
      var(--kht-process-dark),
      var(--kht-process-primary)
    );

  box-shadow:
    0 4px 12px rgba(35, 125, 49, 0.24);

  font-size: 0.75rem;
  font-weight: 800;

  transform: translateX(-50%);
}

/* Căn giữa khung chứa ảnh icon */
.kht-dichvu-section2
  .quytrinh-phai
  .icon-box-img
  .icon,
.kht-dichvu-section2
  .quytrinh-phai
  .icon-box-img
  .icon-inner {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 60px;

  width: 60px;
  min-width: 60px;
  max-width: 60px;
  height: 60px;
}

/* Hiển thị hình icon đúng kích thước 60px */
.kht-dichvu-section2
  .quytrinh-phai
  .icon-box-img
  img {
  display: block;

  width: 60px;
  min-width: 60px;
  max-width: 60px;
  height: 60px;

  object-fit: contain;
}


/* =========================================================
   TEXT CỦA TỪNG BƯỚC
========================================================= */

/* Định vị text theo biến được JavaScript gán */
.kht-dichvu-section2
  .quytrinh-phai
  .icon-box-text {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;

  width: 162px;
  min-height: 0;

  margin: 0;

  pointer-events: none;

  transform:
    translate(-50%, -50%)
    translate(
      var(--kht-text-x, 0),
      var(--kht-text-y, 0)
    );
}

/* Định dạng nội dung của từng bước */
.kht-dichvu-section2
  .quytrinh-phai
  .icon-box-text
  p {
  margin: 0;

  color: var(--kht-process-text);

  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -0.012em;

  text-align: var(--kht-text-align, center);
  text-transform: uppercase;
}


/* =========================================================
   TRẠNG THÁI ACTIVE VÀ HOVER
========================================================= */

/* Làm nổi bật bước đang chạy animation */
.kht-dichvu-section2
  .quytrinh-phai
  .kht-process-step.is-active
  .icon-box-img {
  border-color: var(--kht-process-primary);

  box-shadow:
    0 14px 28px rgba(40, 203, 139, 0.22),
    0 0 0 8px rgba(40, 203, 139, 0.1);

  transform: scale(1.035);
}

/* Đổi màu text của bước đang chạy */
.kht-dichvu-section2
  .quytrinh-phai
  .kht-process-step.is-active
  .icon-box-text
  p {
  color: var(--kht-process-dark);
}

/* Tạo hiệu ứng khi rê chuột vào icon */
.kht-dichvu-section2
  .quytrinh-phai
  .kht-process-step:hover
  .icon-box-img {
  border-color: var(--kht-process-primary);

  box-shadow:
    0 14px 28px rgba(40, 203, 139, 0.18),
    0 0 0 7px rgba(40, 203, 139, 0.07);

  transform: scale(1.035);
}


/* =========================================================
   LOGO CHÍNH GIỮA
========================================================= */

/* Định vị logo chính giữa vòng tròn */
.kht-dichvu-section2
  .quytrinh-phai
  .row-small
  > .center-img {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;

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

  width: 180px;
  max-width: 180px;

  padding: 0;

  transform: translate(-50%, -50%);
}

/* Tạo khung tròn chứa logo trung tâm */
.kht-dichvu-section2
  .center-img
  > .col-inner {
  position: relative;

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

  width: 180px;
  height: 180px;

  padding: 22px;

  border: 8px solid rgba(255, 255, 255, 0.96);
  border-radius: 50%;

  background:
    radial-gradient(
      circle at 38% 28%,
      #ffffff,
      #f5f7fa 58%,
      var(--kht-process-tint)
    );

  box-shadow:
    0 20px 40px rgba(38, 50, 56, 0.14),
    0 0 0 1px rgba(40, 203, 139, 0.14);
}

/* Tạo vòng sáng phía ngoài logo */
.kht-dichvu-section2
  .center-img
  > .col-inner::before {
  position: absolute;
  z-index: -1;
  inset: -17px;

  content: "";

  border: 1px solid rgba(40, 203, 139, 0.13);
  border-radius: 50%;
}

/* Giữ khung ảnh logo luôn tròn */
.kht-dichvu-section2
  .center-img
  .img,
.kht-dichvu-section2
  .center-img
  .img-inner {
  width: 100%;
  height: 100%;

  border-radius: 50%;
}

/* Hiển thị đầy đủ ảnh logo */
.kht-dichvu-section2
  .center-img
  img {
  display: block;

  width: 100%;
  height: 100%;

  border-radius: 50%;

  object-fit: contain;
}


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

@media screen and (max-width: 1100px) {

  /* Điều chỉnh khoảng cách section trên tablet */
  .kht-dichvu-section2
    > .section-content {
    padding: 52px 20px;
  }

  /* Chuyển bố cục thành một cột */
  .kht-dichvu-section2
    > .section-content
    > .row {
    grid-template-columns: minmax(0, 1fr);

    gap: 30px;
  }

  /* Giới hạn chiều rộng nội dung bên trái */
  .kht-dichvu-section2
    .quytrinh-trai
    > .col-inner {
    max-width: 760px;
  }

  /* Giữ đủ chiều cao cho sơ đồ */
  .kht-dichvu-section2
    .quytrinh-phai
    > .col-inner {
    min-height: 750px;
  }
}


/* =========================================================
   MOBILE
   Thu nhỏ nguyên canvas desktop để giữ đúng bố cục
========================================================= */

@media screen and (max-width: 767px) {

  /* Điều chỉnh khoảng cách section trên mobile */
  .kht-dichvu-section2
    > .section-content {
    padding: 32px 14px 36px;
  }

  /* Ép hai cột Flatsome thành một cột */
  .kht-dichvu-section2
    > .section-content
    > .row {
    display: block;

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

    margin: 0;
  }

  /* Reset hai cột chính trên mobile */
  .kht-dichvu-section2
    > .section-content
    > .row
    > .quytrinh-trai,
  .kht-dichvu-section2
    > .section-content
    > .row
    > .quytrinh-phai {
    display: block;
    float: none;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    padding: 0;

    flex-basis: 100%;
  }

  /* Thu gọn nội dung bên trái */
  .kht-dichvu-section2
    .quytrinh-trai
    > .col-inner {
    padding: 0;
  }

  /* Thu nhỏ đường nhấn phía trên tiêu đề */
  .kht-dichvu-section2
    .quytrinh-trai
    > .col-inner::before {
    width: 34px;
    height: 2px;

    margin-bottom: 15px;
  }

  /* Giữ tiêu đề chính trên một dòng */
  .kht-dichvu-section2
    .quytrinh-trai
    h2 {
    width: 100%;

    font-size: clamp(1.35rem, 6.5vw, 1.72rem);
    line-height: 1.08;

    white-space: nowrap;
  }

  /* Điều chỉnh tiêu đề OEM/ODM */
  .kht-dichvu-section2
    .quytrinh-trai
    h3 {
    margin: 10px 0 19px;
    padding-bottom: 17px;

    font-size: 1.15rem;
  }

  /* Thu ngắn đường phân cách */
  .kht-dichvu-section2
    .quytrinh-trai
    h3::after {
    width: 118px;
  }

  /* Điều chỉnh vị trí chấm tròn */
  .kht-dichvu-section2
    .quytrinh-trai
    h3::before {
    left: 114px;
  }

  /* Thu nhỏ đoạn mô tả nổi bật */
  .kht-dichvu-section2
    .quytrinh-trai
    p:first-of-type {
    margin-bottom: 11px;

    font-size: 0.86rem;
    line-height: 1.55;
  }

  /* Thu nhỏ đoạn mô tả chi tiết */
  .kht-dichvu-section2
    .quytrinh-trai
    p:nth-of-type(2) {
    margin-bottom: 19px;

    font-size: 0.74rem;
    line-height: 1.65;
  }

  /* Thu nhỏ nút CTA */
  .kht-dichvu-section2
    .quytrinh-trai
    .button {
    min-width: 176px;
    min-height: 45px;

    padding: 0 47px 0 20px;

    font-size: 0.72rem;
  }

  /* Tạo khoảng cách giữa nút CTA và sơ đồ */
  .kht-dichvu-section2
    .quytrinh-phai {
    width: 100%;

    margin-top: 28px;

    clear: both;
  }

  /* Giữ đúng chiều cao sau khi canvas được scale */
  .kht-dichvu-section2
    .quytrinh-phai
    > .col-inner {
    position: relative;

    display: block;

    width: 100%;
    height: var(--kht-mobile-stage-height, 320px);
    min-height: var(--kht-mobile-stage-height, 320px);

    overflow: visible;
  }

  /* Thu nhỏ nguyên canvas 750px theo tỷ lệ JavaScript tính */
  .kht-dichvu-section2
    .quytrinh-phai
    .row-small {
    position: absolute;
    top: 0;
    left: 50%;

    display: block;

    flex: none;

    width: 750px;
    min-width: 750px;
    max-width: none;

    height: 750px;
    min-height: 750px;

    margin: 0;

    overflow: visible;

    transform:
      translateX(-50%)
      scale(var(--kht-mobile-scale, 0.42));

    transform-origin: top center;

    will-change: transform;
  }

  /* Giảm nhẹ độ phóng của bước active trên mobile */
  .kht-dichvu-section2
    .quytrinh-phai
    .kht-process-step.is-active
    .icon-box-img {
    transform: scale(1.025);
  }
}


/* =========================================================
   MOBILE NHỎ
========================================================= */

@media screen and (max-width: 374px) {

  /* Thu nhỏ thêm tiêu đề trên màn hình rất hẹp */
  .kht-dichvu-section2
    .quytrinh-trai
    h2 {
    font-size: 1.28rem;
  }
}


/* =========================================================
   GIẢM CHUYỂN ĐỘNG
========================================================= */

@media (prefers-reduced-motion: reduce) {

  /* Giảm thời lượng chuyển động theo cài đặt hệ thống */
  .kht-dichvu-section2 *,
  .kht-dichvu-section2 *::before,
  .kht-dichvu-section2 *::after {
    transition-duration: 0.01ms;
  }
}















/* =========================================================
   CAM KẾT TỪ KEHETO
   Giao diện sáng - ảnh hình tròn

   MOBILE:
   - Hiển thị 2 card trên mỗi hàng.
   - Xóa khoảng trống dư phía dưới section.
   - Khoảng cách cuối section giữ ở 10px.
   - Giữ nguyên giao diện desktop và tablet.
========================================================= */

.kht-camket-section3 {
  --kht-primary: #28cb8b;
  --kht-primary-dark: #237d31;
  --kht-text: #263238;
  --kht-white: #ffffff;

  position: relative;

  overflow: hidden;

  padding: 0;

  background:
    radial-gradient(
      circle at 10% 15%,
      rgba(40, 203, 139, 0.09),
      transparent 27%
    ),
    radial-gradient(
      circle at 92% 82%,
      rgba(35, 125, 49, 0.07),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f7fcfa 48%,
      #eef9f4 100%
    );
}

/* Đồng bộ cách tính kích thước trong section */
.kht-camket-section3 *,
.kht-camket-section3 *::before,
.kht-camket-section3 *::after {
  box-sizing: border-box;
}

/* Tạo vòng tròn trang trí nền phía trên */
.kht-camket-section3::before {
  position: absolute;
  top: -310px;
  right: -250px;

  width: 690px;
  height: 690px;

  content: "";
  pointer-events: none;

  border: 1px solid rgba(40, 203, 139, 0.1);
  border-radius: 50%;

  box-shadow:
    0 0 0 75px rgba(40, 203, 139, 0.022),
    0 0 0 150px rgba(40, 203, 139, 0.011);
}

/* Tạo vùng sáng trang trí phía dưới */
.kht-camket-section3::after {
  position: absolute;
  bottom: -220px;
  left: -170px;

  width: 460px;
  height: 460px;

  content: "";
  pointer-events: none;

  border-radius: 50%;

  background: rgba(40, 203, 139, 0.05);

  filter: blur(18px);
}

/* Tạo khoảng cách tổng cho nội dung section */
.kht-camket-section3 > .section-content {
  position: relative;
  z-index: 2;

  padding: 56px 20px 68px;
}


/* =========================================================
   TIÊU ĐỀ
========================================================= */

/* Giới hạn chiều rộng và tạo khoảng cách dưới tiêu đề */
.kht-camket-section3 .camket-tieude {
  display: block;

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

  margin: 0 auto 36px;
  padding: 0;
}

/* Xóa kích thước mặc định của cột Flatsome */
.kht-camket-section3 .camket-tieude > .col {
  width: 100%;
  max-width: 100%;

  padding: 0;

  flex-basis: 100%;
}

/* Đưa khung tiêu đề về trạng thái phẳng */
.kht-camket-section3
.camket-tieude
> .col
> .col-inner {
  padding: 0;

  border: 0;

  background: transparent;

  box-shadow: none;
}

/* Định dạng nội dung tiêu đề */
.kht-camket-section3 .camket-tieude p {
  position: relative;

  display: flex;
  align-items: center;

  margin: 0;

  gap: 16px;

  color: #18372c;

  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* Tạo thanh màu nhận diện bên trái tiêu đề */
.kht-camket-section3 .camket-tieude p::before {
  display: block;
  flex: 0 0 7px;

  width: 7px;
  height: 42px;

  content: "";

  border-radius: 20px;

  background:
    linear-gradient(
      180deg,
      #28cb8b 0%,
      #159a66 100%
    );
}

/* Tạo đường gradient phía sau tiêu đề */
.kht-camket-section3 .camket-tieude p::after {
  display: block;
  flex: 1;

  height: 1px;

  margin-left: 8px;

  content: "";

  background:
    linear-gradient(
      90deg,
      rgba(40, 203, 139, 0.5) 0%,
      rgba(40, 203, 139, 0) 100%
    );
}


/* =========================================================
   DANH SÁCH CARD
========================================================= */

/* Hiển thị bốn card trên một hàng ở desktop */
.kht-camket-section3 .camket-img {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  align-items: stretch;

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

  margin: 0 auto;
  padding: 0;

  gap: 24px;
}

/* Reset cột mặc định của Flatsome */
.kht-camket-section3 .camket-img > .col {
  display: block;

  width: auto;
  max-width: none;
  min-width: 0;

  padding: 0;

  flex-basis: auto;
}

/* Giữ chiều cao các card bằng nhau trên desktop */
.kht-camket-section3
.camket-img
> .col
> .col-inner {
  height: 100%;
}

/* Tạo màu nhấn cho card thứ nhất */
.kht-camket-section3
.camket-img
> .col:nth-child(1) {
  --kht-card-accent: #28cb8b;
  --kht-card-glow: rgba(40, 203, 139, 0.15);
}

/* Tạo màu nhấn cho card thứ hai */
.kht-camket-section3
.camket-img
> .col:nth-child(2) {
  --kht-card-accent: #38b95e;
  --kht-card-glow: rgba(56, 185, 94, 0.14);
}

/* Tạo màu nhấn cho card thứ ba */
.kht-camket-section3
.camket-img
> .col:nth-child(3) {
  --kht-card-accent: #319746;
  --kht-card-glow: rgba(49, 151, 70, 0.13);
}

/* Tạo màu nhấn cho card thứ tư */
.kht-camket-section3
.camket-img
> .col:nth-child(4) {
  --kht-card-accent: #237d31;
  --kht-card-glow: rgba(35, 125, 49, 0.13);
}

/* Tạo khung tổng của mỗi card */
.kht-camket-section3 .camket-img .box {
  position: relative;

  display: flex;
  align-items: center;
  flex-direction: column;

  width: 100%;
  height: 100%;
  min-height: 330px;

  margin: 0;
  padding: 20px 12px 0;

  overflow: visible;

  opacity: 1;
  visibility: visible;

  background: transparent;

  box-shadow: none;

  transition: transform 0.4s ease;
}

/* Tạo mảng nền mềm phía sau card */
.kht-camket-section3 .camket-img .box::before {
  position: absolute;
  z-index: -1;
  top: 48px;
  right: 0;
  bottom: 0;
  left: 0;

  content: "";

  border: 1px solid rgba(35, 125, 49, 0.1);
  border-radius: 30px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(239, 250, 244, 0.88)
    );

  box-shadow:
    0 16px 36px rgba(38, 50, 56, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);

  transition:
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.4s ease;
}

/* Xóa dấu chấm trang trí mặc định */
.kht-camket-section3 .camket-img .box::after {
  display: none;

  content: none;
}


/* =========================================================
   ẢNH HÌNH TRÒN
========================================================= */

/* Tạo khung ảnh hình tròn */
.kht-camket-section3 .camket-img .box-image {
  position: relative;
  z-index: 3;

  flex: 0 0 206px;

  width: 206px;
  height: 206px;

  margin: 0 auto;

  overflow: hidden;

  border: 7px solid rgba(255, 255, 255, 0.96);
  border-radius: 50%;

  background: #eaf7f0;

  box-shadow:
    0 15px 34px rgba(38, 50, 56, 0.11),
    0 0 0 1px rgba(35, 125, 49, 0.13),
    0 0 0 13px var(--kht-card-glow);

  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease;
}

/* Tạo vòng trang trí bên trong ảnh */
.kht-camket-section3
.camket-img
.box-image::before {
  position: absolute;
  z-index: 4;
  inset: 8px;

  content: "";
  pointer-events: none;

  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
}

/* Tạo lớp chuyển màu nhẹ phía dưới ảnh */
.kht-camket-section3
.camket-img
.box-image::after {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;

  height: 42%;

  content: "";
  pointer-events: none;

  border-radius: 0 0 50% 50%;

  background:
    linear-gradient(
      180deg,
      rgba(17, 70, 43, 0),
      rgba(17, 70, 43, 0.12)
    );
}

/* Ép khung ảnh bên trong thành hình tròn */
.kht-camket-section3
.camket-img
.box-image
> div {
  width: 100%;
  height: 100%;

  overflow: hidden;

  border-radius: 50%;
}

/* Hiển thị ảnh phủ kín hình tròn */
.kht-camket-section3 .camket-img .box-image img {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;

  opacity: 1;
  visibility: visible;

  border-radius: 50%;

  object-fit: cover;
  object-position: center;

  transform: scale(1.02);

  transition:
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.45s ease;
}


/* =========================================================
   KHỐI NỘI DUNG
========================================================= */

/* Tạo khối text phía dưới ảnh */
.kht-camket-section3 .camket-img .box-text {
  position: relative;
  z-index: 2;

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

  width: 100%;
  min-height: 108px;

  margin-top: -18px;
  padding: 42px 20px 24px;

  background: transparent;
}

/* Tạo đường nhấn phía trên nội dung */
.kht-camket-section3
.camket-img
.box-text::before {
  position: absolute;
  top: 28px;
  left: 50%;

  width: 38px;
  height: 3px;

  content: "";

  border-radius: 999px;

  background: var(--kht-card-accent);

  transform: translateX(-50%);

  transition: width 0.35s ease;
}

/* Không sử dụng góc trang trí phụ */
.kht-camket-section3
.camket-img
.box-text::after {
  display: none;

  content: none;
}

/* Cho khung text chiếm toàn bộ chiều rộng */
.kht-camket-section3
.camket-img
.box-text-inner {
  width: 100%;
}

/* Định dạng nội dung cam kết */
.kht-camket-section3 .camket-img .box-text p {
  max-width: 225px;

  margin: 0 auto;

  color: var(--kht-text);

  font-size: 0.95rem;
  font-weight: 750;
  line-height: 1.48;
  letter-spacing: -0.014em;
  text-align: center;

  transition:
    color 0.35s ease,
    transform 0.35s ease;
}


/* =========================================================
   HIỆU ỨNG HOVER DESKTOP
========================================================= */

/* Nâng card khi rê chuột */
.kht-camket-section3 .camket-img .box:hover {
  transform: translateY(-8px);
}

/* Làm nổi nền card khi hover */
.kht-camket-section3
.camket-img
.box:hover::before {
  border-color: rgba(40, 203, 139, 0.32);

  box-shadow:
    0 24px 48px rgba(38, 50, 56, 0.11),
    0 10px 26px rgba(40, 203, 139, 0.07);

  transform: translateY(3px);
}

/* Làm nổi ảnh hình tròn khi hover */
.kht-camket-section3
.camket-img
.box:hover
.box-image {
  box-shadow:
    0 21px 43px rgba(38, 50, 56, 0.15),
    0 0 0 1px rgba(40, 203, 139, 0.28),
    0 0 0 17px var(--kht-card-glow);

  transform: translateY(-4px) scale(1.025);
}

/* Phóng nhẹ ảnh khi hover */
.kht-camket-section3
.camket-img
.box:hover
.box-image
img {
  filter: saturate(1.06);

  transform: scale(1.1);
}

/* Kéo dài đường nhấn khi hover */
.kht-camket-section3
.camket-img
.box:hover
.box-text::before {
  width: 70px;
}

/* Đổi màu nội dung khi hover */
.kht-camket-section3
.camket-img
.box:hover
.box-text
p {
  color: var(--kht-primary-dark);

  transform: translateY(-2px);
}


/* =========================================================
   TABLET
   Giữ nguyên giao diện kéo ngang
========================================================= */

@media screen and (max-width: 1024px) {

  /* Điều chỉnh kích thước tiêu đề tablet */
  .kht-camket-section3 .camket-tieude p {
    font-size: 2rem;
  }

  /* Chuyển danh sách card thành hàng kéo ngang */
  .kht-camket-section3 .camket-img {
    display: flex;

    max-width: none;

    padding: 6px 22px 24px;

    gap: 18px;

    overflow-x: auto;

    scroll-snap-type: x mandatory;

    scrollbar-width: none;
  }

  /* Ẩn thanh cuộn ngang */
  .kht-camket-section3
  .camket-img::-webkit-scrollbar {
    display: none;
  }

  /* Khóa chiều rộng card tablet */
  .kht-camket-section3 .camket-img > .col {
    flex: 0 0 286px;

    width: 286px;

    scroll-snap-align: start;
  }
}


/* =========================================================
   MOBILE
   Chia 2 card trên một hàng và xóa khoảng trống dư
========================================================= */

@media screen and (max-width: 549px) {

  /*
   * Ghi đè khoảng cách section do Flatsome có thể gắn bằng ID.
   * Chỉ sử dụng important cho hai thuộc tính cần xử lý inline.
   */
  .kht-camket-section3 {
    height: auto;
    min-height: 0;

    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /*
   * Xóa chiều cao tối thiểu có thể được Flatsome
   * hoặc CSS desktop truyền xuống mobile.
   */
  .kht-camket-section3 > .section-content {
    height: auto;
    min-height: 0;

    padding: 10px 0;
  }

  /* Đưa khoảng cách tiêu đề về 10px */
  .kht-camket-section3 .camket-tieude {
    height: auto;
    min-height: 0;

    margin: 0 auto 10px;
    padding: 0 10px;
  }

  /* Thu nhỏ tiêu đề mobile */
  .kht-camket-section3 .camket-tieude p {
    gap: 10px;

    font-size: 1.55rem;
    line-height: 1.3;
  }

  /* Thu nhỏ thanh nhận diện bên trái tiêu đề */
  .kht-camket-section3 .camket-tieude p::before {
    flex-basis: 5px;

    width: 5px;
    height: 34px;
  }

  /* Ẩn đường gradient trên mobile */
  .kht-camket-section3 .camket-tieude p::after {
    display: none;
  }

  /*
   * Chuyển danh sách thành lưới hai cột.
   * Bỏ grid-auto-rows: 1fr để không tạo hàng cao dư.
   */
  .kht-camket-section3 .camket-img {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-auto-rows: auto;
    align-items: start;

    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;

    margin: 0;
    padding: 0 10px 10px;

    gap: 10px;

    overflow: visible;

    scroll-snap-type: none;
  }

  /*
   * Xóa chiều rộng cố định 286px của tablet.
   * Mỗi card tự chia đều 50% chiều rộng.
   */
  .kht-camket-section3 .camket-img > .col {
    display: block;

    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;
    min-height: 0;

    margin: 0;
    padding: 0;

    flex: none;

    scroll-snap-align: none;
  }

  /*
   * Xóa height 100% từ desktop.
   * Đây là một nguyên nhân làm card kéo dài xuống dưới.
   */
  .kht-camket-section3
  .camket-img
  > .col
  > .col-inner {
    width: 100%;
    height: auto;
    min-height: 0;

    margin: 0;
    padding: 0;
  }

  /*
   * Đưa chiều cao card về nội dung thực tế.
   * Không sử dụng height 100% trên mobile.
   */
  .kht-camket-section3 .camket-img .box {
    width: 100%;
    height: auto;
    min-height: 210px;

    margin: 0;
    padding: 10px 6px 0;
  }

  /* Thu gọn nền card theo kích thước mobile */
  .kht-camket-section3 .camket-img .box::before {
    top: 34px;
    bottom: 0;

    border-radius: 22px;
  }

  /* Thu nhỏ ảnh tròn để vừa card nửa màn hình */
  .kht-camket-section3 .camket-img .box-image {
    flex: 0 0 clamp(102px, 31vw, 122px);

    width: clamp(102px, 31vw, 122px);
    height: clamp(102px, 31vw, 122px);

    margin: 0 auto;

    border-width: 5px;

    box-shadow:
      0 10px 22px rgba(38, 50, 56, 0.1),
      0 0 0 1px rgba(35, 125, 49, 0.12),
      0 0 0 8px var(--kht-card-glow);
  }

  /* Thu nhỏ vòng trang trí bên trong ảnh */
  .kht-camket-section3
  .camket-img
  .box-image::before {
    inset: 5px;
  }

  /*
   * Xóa min-height lớn của desktop.
   * Khoảng cách đáy trong card giữ ở 10px.
   */
  .kht-camket-section3 .camket-img .box-text {
    height: auto;
    min-height: 78px;

    margin-top: -10px;
    padding: 30px 6px 10px;
  }

  /* Căn lại đường nhấn phía trên nội dung */
  .kht-camket-section3
  .camket-img
  .box-text::before {
    top: 21px;

    width: 29px;
    height: 2px;
  }

  /* Điều chỉnh chữ để vừa card hai cột */
  .kht-camket-section3
  .camket-img
  .box-text
  p {
    width: 100%;
    max-width: 145px;

    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: -0.012em;
  }

  /* Giảm hiệu ứng hover trên màn hình cảm ứng */
  .kht-camket-section3
  .camket-img
  .box:hover {
    transform: translateY(-2px);
  }

  /* Giảm độ phóng của ảnh trên mobile */
  .kht-camket-section3
  .camket-img
  .box:hover
  .box-image {
    box-shadow:
      0 11px 24px rgba(38, 50, 56, 0.11),
      0 0 0 1px rgba(40, 203, 139, 0.2),
      0 0 0 9px var(--kht-card-glow);

    transform: translateY(-1px) scale(1.01);
  }

  /* Giữ đường nhấn không kéo quá dài trên mobile */
  .kht-camket-section3
  .camket-img
  .box:hover
  .box-text::before {
    width: 38px;
  }
}


/* =========================================================
   MOBILE NHỎ
   Vẫn giữ hai card trên một hàng
========================================================= */

@media screen and (max-width: 374px) {

  /* Giữ khoảng cách section mobile nhỏ ở 10px */
  .kht-camket-section3 > .section-content {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Giữ lề lưới card ở 10px */
  .kht-camket-section3 .camket-img {
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;

    gap: 10px;
  }

  /* Thu nhỏ card trên màn hình hẹp */
  .kht-camket-section3 .camket-img .box {
    min-height: 195px;

    padding: 10px 4px 0;
  }

  /* Thu nhỏ nền card */
  .kht-camket-section3 .camket-img .box::before {
    top: 31px;

    border-radius: 19px;
  }

  /* Thu nhỏ ảnh nhưng vẫn giữ rõ hình tròn */
  .kht-camket-section3 .camket-img .box-image {
    flex-basis: clamp(94px, 30vw, 108px);

    width: clamp(94px, 30vw, 108px);
    height: clamp(94px, 30vw, 108px);

    border-width: 4px;

    box-shadow:
      0 9px 19px rgba(38, 50, 56, 0.1),
      0 0 0 1px rgba(35, 125, 49, 0.11),
      0 0 0 7px var(--kht-card-glow);
  }

  /* Thu gọn phần nội dung card */
  .kht-camket-section3 .camket-img .box-text {
    min-height: 74px;

    margin-top: -8px;
    padding: 28px 5px 10px;
  }

  /* Căn lại đường nhấn */
  .kht-camket-section3
  .camket-img
  .box-text::before {
    top: 19px;

    width: 26px;
  }

  /* Thu nhỏ chữ trên điện thoại rất hẹp */
  .kht-camket-section3
  .camket-img
  .box-text
  p {
    max-width: 130px;

    font-size: 0.68rem;
    line-height: 1.4;
  }
}


/* =========================================================
   GIẢM CHUYỂN ĐỘNG
========================================================= */

@media (prefers-reduced-motion: reduce) {

  /* Giảm toàn bộ chuyển động theo cài đặt thiết bị */
  .kht-camket-section3 *,
  .kht-camket-section3 *::before,
  .kht-camket-section3 *::after {
    transition-duration: 0.01ms;

    scroll-behavior: auto;
  }
}