/* =========================================================
   KEHETO BANNER SLIDER
   - Giữ nguyên HTML hiện tại
   - Không tự thêm nội dung bằng CSS
   - Tiêu đề: 20px
   - Tiêu đề phụ và mô tả: 14px
   - Nội dung mô tả căn đều hai bên
   - Tương thích với GSAP và Flickity
========================================================= */

.keheto-banner {
    --keheto-banner-primary: #20b875;
    --keheto-banner-primary-dark: #117d50;
    --keheto-banner-heading: #163d2e;
    --keheto-banner-text: #56645f;
    --keheto-banner-white: #ffffff;
    --keheto-banner-border: rgba(255, 255, 255, 0.72);
    --keheto-banner-card: rgba(255, 255, 255, 0.9);
    --keheto-banner-shadow:
        0 24px 65px rgba(8, 53, 34, 0.16);

    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    background-color: #edf6f1;
}


/* =========================================================
   1. KHUNG SLIDER FLICKITY
========================================================= */

.keheto-banner > .slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #edf6f1;
}


/* Chuyển chiều cao slider mượt hơn khi đổi slide */

.keheto-banner .flickity-viewport {
    overflow: hidden;
    transition: height 0.4s ease;
}


/* Đảm bảo slider không xuất hiện khoảng trắng ngang */

.keheto-banner .flickity-slider {
    height: 100%;
}


/* =========================================================
   2. CHIỀU CAO BANNER DESKTOP
   Cần dùng important để ghi đè padding-top inline từ Flatsome
========================================================= */

.keheto-banner .banner {
    position: relative;
    width: 100%;
    min-height: 680px;
    padding-top: clamp(680px, 41vw, 780px) !important;
    overflow: hidden;
    background-color: #edf6f1;
}


/* =========================================================
   3. ẢNH NỀN SLIDER
========================================================= */

.keheto-banner .banner-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-color: #edf6f1;
}


/* Ảnh nền phủ toàn bộ banner */

.keheto-banner .banner-bg > img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

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

    transform-origin: center center;
    backface-visibility: hidden;
    will-change: transform;
}


/* Ẩn overlay mặc định đang được Flatsome tạo */

.keheto-banner .banner-bg > .overlay {
    opacity: 0;
}


/* Tạo lớp phủ nhẹ để card nội dung dễ đọc */

.keheto-banner .banner-bg::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(6, 28, 19, 0.02) 0%,
            rgba(6, 28, 19, 0.02) 40%,
            rgba(6, 28, 19, 0.1) 58%,
            rgba(6, 28, 19, 0.36) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.02) 0%,
            rgba(0, 0, 0, 0) 55%,
            rgba(0, 0, 0, 0.12) 100%
        );
}


/* =========================================================
   4. KHUNG CHỨA LAYER
========================================================= */

.keheto-banner .banner-layers {
    position: absolute;
    inset: 0;
    z-index: 5;

    width: 100%;
    max-width: 1440px;
    height: 100%;

    margin: 0 auto;
    padding: 0 32px;

    pointer-events: none;
}


/* Cho phép người dùng bấm vào nội dung và button */

.keheto-banner .text-box,
.keheto-banner .text-box a,
.keheto-banner .text-box button {
    pointer-events: auto;
}


/* =========================================================
   5. VỊ TRÍ VÀ KÍCH THƯỚC TEXT BOX DESKTOP
   Ghi đè vị trí x95 của UX Builder
========================================================= */

.keheto-banner .banner-layer.text-box {
    top: 50%;
    right: clamp(50px, 6vw, 110px);
    left: auto;

    width: min(440px, 34vw) !important;
    max-width: 440px;

    transform: translateY(-50%);
}


/* =========================================================
   6. CARD NỘI DUNG
========================================================= */

.keheto-banner .text-box-content {
    position: relative;

    width: 100%;
    padding: 30px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.94) 0%,
            rgba(255, 255, 255, 0.84) 100%
        );

    border: 1px solid var(--keheto-banner-border);
    border-radius: 22px;

    box-shadow:
        var(--keheto-banner-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    transform-origin: center center;
    will-change: transform, opacity;
}


/* Thanh màu xanh phía trên card */

.keheto-banner .text-box-content::before {
    content: "";

    position: absolute;
    top: 0;
    left: 30px;

    width: 62px;
    height: 4px;

    border-radius: 0 0 8px 8px;

    background:
        linear-gradient(
            90deg,
            var(--keheto-banner-primary),
            #82dfb3
        );
}


/* Họa tiết trang trí không chứa nội dung chữ */

.keheto-banner .text-box-content::after {
    content: "";

    position: absolute;
    top: -68px;
    right: -68px;

    width: 160px;
    height: 160px;

    pointer-events: none;

    border: 1px solid rgba(32, 184, 117, 0.12);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(32, 184, 117, 0.08) 0%,
            rgba(32, 184, 117, 0) 70%
        );
}


/* =========================================================
   7. KHUNG TEXT
   Không tạo thêm nội dung bằng before hoặc after
========================================================= */

.keheto-banner .text-inner {
    position: relative;
    z-index: 2;

    width: 100%;
    text-align: left;
}


/* Xóa toàn bộ text từng được CSS cũ tự tạo */

.keheto-banner .text-inner::before,
.keheto-banner .text-inner::after {
    content: none;
    display: none;
}


/* =========================================================
   8. TIÊU ĐỀ CHÍNH
   Kích thước cố định 20px
========================================================= */

.keheto-banner .text-inner h2 {
    width: 100%;

    margin: 0 0 14px;
    padding: 0;

    color: var(--keheto-banner-heading);

    font-family:
        "Be Vietnam Pro",
        Arial,
        sans-serif;

    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0;

    text-align: left;
    text-transform: none;

    overflow-wrap: break-word;
    word-break: normal;
    text-transform: uppercase;
}


/* Giữ thẻ strong theo đúng font của tiêu đề */

.keheto-banner .text-inner h2 strong {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}


/* Xóa đường trang trí dưới tiêu đề của CSS cũ */

.keheto-banner .text-inner h2::after {
    content: none;
    display: none;
}


/* =========================================================
   9. TIÊU ĐỀ PHỤ
   Kích thước cố định 14px
========================================================= */

.keheto-banner .text-inner h3 {
    width: 100%;

    margin: 0 0 10px;
    padding: 0;

    color: var(--keheto-banner-primary-dark);

    font-size: 14px;
    font-weight: 650;
    line-height: 1.6;
    letter-spacing: 0;

    text-align: left;
    text-transform: none;

    overflow-wrap: break-word;
}


/* =========================================================
   10. NỘI DUNG MÔ TẢ
   Kích thước 14px và căn đều hai bên
========================================================= */

.keheto-banner .text-inner p {
    width: 100%;
    max-width: none;

    margin: 0 0 20px;
    padding: 0;

    color: var(--keheto-banner-text);

    font-size: 14px;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0;

    text-align: justify;
    text-justify: inter-word;

    overflow: visible;
    overflow-wrap: break-word;
    word-break: normal;

    hyphens: auto;
    -webkit-hyphens: auto;
}


/* Không giới hạn số dòng nội dung */

.keheto-banner .text-inner p {
    display: block;

    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
}


/* =========================================================
   11. BUTTON CTA
   Chỉ sử dụng button có sẵn trong HTML
========================================================= */

.keheto-banner .text-inner .button {
    min-height: 44px;

    margin: 5px 7px 0 0;
    padding: 0 18px;

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

    border: 1px solid transparent;
    border-radius: 10px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;

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


/* Button chính */

.keheto-banner .text-inner .button.primary:not(.is-outline) {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--keheto-banner-primary) 0%,
            var(--keheto-banner-primary-dark) 100%
        );

    box-shadow:
        0 10px 22px rgba(17, 125, 80, 0.24);
}


/* Chỉ tạo biểu tượng mũi tên, không tạo thêm text */

.keheto-banner .text-inner .button.primary:not(.is-outline)::after {
    content: "→";

    margin-left: 9px;

    font-size: 15px;
    line-height: 1;

    transition: transform 0.25s ease;
}


/* Button phụ */

.keheto-banner .text-inner .button.is-outline {
    color: var(--keheto-banner-primary-dark);

    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(17, 125, 80, 0.25);
}


/* Hiệu ứng button trên thiết bị có hover */

@media (hover: hover) {

    .keheto-banner .text-inner .button.primary:not(.is-outline):hover {
        color: #ffffff;

        transform: translateY(-2px);

        box-shadow:
            0 14px 28px rgba(17, 125, 80, 0.3);
    }

    .keheto-banner .text-inner .button.primary:not(.is-outline):hover::after {
        transform: translateX(3px);
    }

    .keheto-banner .text-inner .button.is-outline:hover {
        color: #ffffff;
        background: var(--keheto-banner-primary-dark);
        border-color: var(--keheto-banner-primary-dark);

        transform: translateY(-2px);
    }
}


/* Hỗ trợ điều hướng button bằng bàn phím */

.keheto-banner .text-inner .button:focus-visible {
    outline: 3px solid rgba(32, 184, 117, 0.25);
    outline-offset: 3px;
}


/* =========================================================
   12. NÚT PREVIOUS VÀ NEXT
========================================================= */

.keheto-banner .flickity-prev-next-button {
    z-index: 20;

    width: 48px;
    height: 48px;

    margin: 0;

    color: var(--keheto-banner-heading);
    background: rgba(255, 255, 255, 0.82);

    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 14px;

    box-shadow:
        0 12px 30px rgba(10, 50, 33, 0.14);

    opacity: 1;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

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


/* Vị trí nút Previous */

.keheto-banner .flickity-prev-next-button.previous {
    left: 24px;
}


/* Vị trí nút Next */

.keheto-banner .flickity-prev-next-button.next {
    right: 24px;
}


/* Kích thước biểu tượng mũi tên */

.keheto-banner .flickity-prev-next-button .flickity-button-icon {
    top: 34%;
    left: 34%;

    width: 32%;
    height: 32%;
}


/* Hover nút điều hướng */

@media (hover: hover) {

    .keheto-banner .flickity-prev-next-button:hover {
        color: #ffffff;
        background: var(--keheto-banner-primary-dark);
        border-color: var(--keheto-banner-primary-dark);

        transform: translateY(-50%) scale(1.05);

        box-shadow:
            0 16px 36px rgba(17, 125, 80, 0.26);
    }
}


/* Trạng thái nút không hoạt động */

.keheto-banner .flickity-prev-next-button:disabled {
    opacity: 0.35;
}


/* =========================================================
   13. DOTS ĐIỀU HƯỚNG
========================================================= */

.keheto-banner .flickity-page-dots {
    position: absolute;
    right: auto;
    bottom: 22px;
    left: 50%;
    z-index: 20;

    width: auto;

    margin: 0;
    padding: 9px 13px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;

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

    box-shadow:
        0 10px 26px rgba(10, 50, 33, 0.12);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transform: translateX(-50%);
}


/* Dot mặc định */

.keheto-banner .flickity-page-dots .dot {
    width: 7px;
    height: 7px;

    margin: 0;

    border: 0;
    border-radius: 999px;

    background: rgba(22, 61, 46, 0.25);

    opacity: 1;

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


/* Dot đang được chọn */

.keheto-banner .flickity-page-dots .dot.is-selected {
    width: 27px;

    background:
        linear-gradient(
            90deg,
            var(--keheto-banner-primary),
            var(--keheto-banner-primary-dark)
        );
}


/* =========================================================
   14. BỘ ĐẾM VÀ PROGRESS DO FILE GSAP TẠO
========================================================= */

.keheto-banner__status {
    position: absolute;
    right: 26px;
    bottom: 22px;
    z-index: 21;

    min-width: 170px;
    padding: 10px 13px;

    display: flex;
    align-items: center;
    gap: 10px;

    pointer-events: none;

    color: var(--keheto-banner-heading);
    background: rgba(255, 255, 255, 0.72);

    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 13px;

    box-shadow:
        0 10px 26px rgba(10, 50, 33, 0.12);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* Số slide hiện tại */

.keheto-banner__current {
    min-width: 22px;

    color: var(--keheto-banner-primary-dark);

    font-size: 13px;
    font-weight: 750;
    line-height: 1;
}


/* Tổng số slide */

.keheto-banner__total {
    min-width: 22px;

    color: rgba(22, 61, 46, 0.45);

    font-size: 11px;
    font-weight: 650;
    line-height: 1;
}


/* Khung thanh tiến trình */

.keheto-banner__progress {
    position: relative;

    width: 82px;
    height: 3px;

    overflow: hidden;

    border-radius: 999px;
    background: rgba(22, 61, 46, 0.12);
}


/* Phần chuyển động của thanh tiến trình */

.keheto-banner__progress-fill {
    position: absolute;
    inset: 0;

    display: block;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--keheto-banner-primary),
            var(--keheto-banner-primary-dark)
        );

    transform: scaleX(0);
    transform-origin: left center;
}


/* =========================================================
   15. TRẠNG THÁI KẾT NỐI VỚI GSAP
========================================================= */

/* Nội dung slide đầu vẫn hiển thị khi JS chưa tải */

.keheto-banner:not(.keheto-gsap-ready)
.is-selected
.text-box-content {
    opacity: 1;
}


/* Ẩn card của slide không được chọn khi GSAP đã sẵn sàng */

.keheto-banner.keheto-gsap-ready
.banner:not(.is-selected)
.text-box-content {
    opacity: 0;
}


/* =========================================================
   16. RESPONSIVE LAPTOP
========================================================= */

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

    /* Giảm chiều cao banner trên laptop */

    .keheto-banner .banner {
        min-height: 620px;
        padding-top: 620px !important;
    }

    /* Thu nhỏ card và đưa gần mép phải hơn */

    .keheto-banner .banner-layer.text-box {
        right: 55px;

        width: min(400px, 38vw) !important;
        max-width: 400px;
    }

    /* Giảm padding bên trong card */

    .keheto-banner .text-box-content {
        padding: 26px;
        border-radius: 20px;
    }

    .keheto-banner .text-box-content::before {
        left: 26px;
    }

    /* Giữ nguyên kích thước chữ theo yêu cầu */

    .keheto-banner .text-inner h2 {
        font-size: 20px;
    }

    .keheto-banner .text-inner h3,
    .keheto-banner .text-inner p {
        font-size: 14px;
    }

    /* Thu nhỏ nút chuyển slide */

    .keheto-banner .flickity-prev-next-button {
        width: 44px;
        height: 44px;
    }

    .keheto-banner .flickity-prev-next-button.previous {
        left: 16px;
    }

    .keheto-banner .flickity-prev-next-button.next {
        right: 16px;
    }
}


/* =========================================================
   17. RESPONSIVE TABLET
========================================================= */

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

    /* Tăng chiều cao để đủ chỗ cho card nằm phía dưới */

    .keheto-banner .banner {
        min-height: 690px;
        padding-top: 690px !important;
    }

    /* Điều chỉnh vùng ảnh ưu tiên */

    .keheto-banner .banner-bg > img {
        object-position: 42% center;
    }

    /* Chuyển overlay thành gradient từ dưới lên */

    .keheto-banner .banner-bg::after {
        background:
            linear-gradient(
                180deg,
                rgba(5, 25, 17, 0.02) 0%,
                rgba(5, 25, 17, 0.08) 38%,
                rgba(5, 25, 17, 0.48) 100%
            );
    }

    /* Thu khoảng cách hai bên */

    .keheto-banner .banner-layers {
        padding-right: 18px;
        padding-left: 18px;
    }

    /* Đưa card xuống gần cuối banner */

    .keheto-banner .banner-layer.text-box {
        top: auto;
        right: auto;
        bottom: 84px;
        left: 50%;

        width: min(580px, calc(100% - 36px)) !important;
        max-width: 580px;

        transform: translateX(-50%);
    }

    /* Card tablet nhỏ gọn */

    .keheto-banner .text-box-content {
        padding: 24px 22px 22px;

        border-radius: 18px;

        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, 0.95),
                rgba(255, 255, 255, 0.88)
            );
    }

    .keheto-banner .text-box-content::before {
        left: 22px;
        width: 54px;
    }

    /* Giữ đúng kích thước chữ */

    .keheto-banner .text-inner h2 {
        margin-bottom: 11px;

        font-size: 20px;
        line-height: 1.4;
    }

    .keheto-banner .text-inner h3 {
        margin-bottom: 8px;

        font-size: 14px;
        line-height: 1.55;
    }

    .keheto-banner .text-inner p {
        margin-bottom: 16px;

        font-size: 14px;
        line-height: 1.65;

        text-align: justify;
        text-justify: inter-word;
    }

    /* Button tablet */

    .keheto-banner .text-inner .button {
        min-height: 42px;
        padding-right: 15px;
        padding-left: 15px;

        font-size: 11px;
    }

    /* Đưa nút điều hướng xuống dưới */

    .keheto-banner .flickity-prev-next-button {
        top: auto;
        bottom: 17px;

        width: 40px;
        height: 40px;

        transform: none;
        border-radius: 11px;
    }

    .keheto-banner .flickity-prev-next-button.previous {
        left: 12px;
    }

    .keheto-banner .flickity-prev-next-button.next {
        right: 12px;
    }

    /* Không dùng transform dọc khi hover trên tablet */

    @media (hover: hover) {

        .keheto-banner .flickity-prev-next-button:hover {
            transform: scale(1.04);
        }
    }

    /* Đặt dots ở giữa phía dưới */

    .keheto-banner .flickity-page-dots {
        bottom: 17px;
        padding: 8px 11px;
    }

    /* Ẩn bộ đếm để tránh chật trên tablet */

    .keheto-banner__status {
        display: none;
    }
}


/* =========================================================
   18. RESPONSIVE MOBILE
========================================================= */

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

    /* Chiều cao mobile */

    .keheto-banner .banner {
        min-height: 650px;
        padding-top: 650px !important;
    }

    /* Điều chỉnh điểm lấy nét của ảnh mobile */

    .keheto-banner .banner-bg > img {
        object-position: 40% center;
    }

    /* Card gần full chiều rộng màn hình */

    .keheto-banner .banner-layer.text-box {
        bottom: 75px;

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

    /* Card mobile nhỏ gọn */

    .keheto-banner .text-box-content {
        padding: 20px 17px 18px;
        border-radius: 15px;
    }

    .keheto-banner .text-box-content::before {
        left: 17px;

        width: 46px;
        height: 3px;
    }

    /* Thu nhỏ họa tiết góc phải */

    .keheto-banner .text-box-content::after {
        top: -58px;
        right: -58px;

        width: 130px;
        height: 130px;
    }

    /* Tiêu đề mobile vẫn giữ 20px */

    .keheto-banner .text-inner h2 {
        margin-bottom: 10px;

        font-size: 20px;
        line-height: 1.38;
    }

    /* Tiêu đề phụ mobile giữ 14px */

    .keheto-banner .text-inner h3 {
        margin-bottom: 7px;

        font-size: 14px;
        line-height: 1.5;
    }

    /* Mô tả mobile giữ 14px và không cắt dòng */

    .keheto-banner .text-inner p {
        margin-bottom: 14px;

        display: block;
        overflow: visible;

        font-size: 14px;
        line-height: 1.58;

        text-align: justify;
        text-justify: inter-word;

        -webkit-line-clamp: unset;
        -webkit-box-orient: initial;
    }

    /* Button mobile */

    .keheto-banner .text-inner .button {
        min-height: 40px;

        margin-top: 3px;
        margin-right: 4px;
        padding-right: 13px;
        padding-left: 13px;

        font-size: 10px;
        border-radius: 9px;
    }

    /* Nút điều hướng mobile */

    .keheto-banner .flickity-prev-next-button {
        bottom: 13px;

        width: 36px;
        height: 36px;

        border-radius: 10px;
    }

    .keheto-banner .flickity-prev-next-button.previous {
        left: 9px;
    }

    .keheto-banner .flickity-prev-next-button.next {
        right: 9px;
    }

    /* Dots mobile */

    .keheto-banner .flickity-page-dots {
        bottom: 13px;

        padding: 7px 10px;
        gap: 6px;
    }

    .keheto-banner .flickity-page-dots .dot {
        width: 6px;
        height: 6px;
    }

    .keheto-banner .flickity-page-dots .dot.is-selected {
        width: 23px;
    }
}


/* =========================================================
   19. MOBILE RẤT NHỎ
========================================================= */

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

    /* Tăng nhẹ chiều cao để nội dung không bị chồng */

    .keheto-banner .banner {
        min-height: 680px;
        padding-top: 680px !important;
    }

    /* Thu padding card */

    .keheto-banner .text-box-content {
        padding: 18px 15px 16px;
    }

    .keheto-banner .text-box-content::before {
        left: 15px;
    }

    /* Giữ nguyên kích thước chữ theo yêu cầu */

    .keheto-banner .text-inner h2 {
        font-size: 20px;
    }

    .keheto-banner .text-inner h3,
    .keheto-banner .text-inner p {
        font-size: 14px;
    }

    /* Hai button được phép xuống hàng */

    .keheto-banner .text-inner .button {
        margin-bottom: 4px;
    }
}


/* =========================================================
   20. ACCESSIBILITY
   Tắt phần lớn chuyển động khi người dùng chọn Reduce Motion
========================================================= */

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

    .keheto-banner *,
    .keheto-banner *::before,
    .keheto-banner *::after {
        scroll-behavior: auto;
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
    }

    .keheto-banner .banner-bg > img {
        transform: none;
    }
}




/* =========================================================
   KEHETO PRECISION SLICE REVEAL
   - Ảnh chia thành các dải dọc
   - Dải ảnh mở xen kẽ từ trên và dưới
   - Không zoom ảnh
   - Không thay đổi object-position
   - Không tự thêm nội dung chữ
========================================================= */


/* =========================================================
   1. CẤU TRÚC LỚP HÌNH ẢNH
========================================================= */

/* Tạo ngữ cảnh xếp lớp riêng cho background */

.keheto-banner .banner-bg {
    isolation: isolate;
}


/* Ảnh gốc luôn nằm dưới lớp slice và luôn được giữ hiển thị */

.keheto-banner .banner-bg > img {
    z-index: 1;

    /* Không promote opacity/filter để tránh nháy trắng khi kết thúc layer */
    will-change: transform;

    backface-visibility: hidden;
    transform: translateZ(0);
}


/* Đưa gradient phủ hiện tại lên trên lớp slice */

.keheto-banner .banner-bg::after {
    z-index: 5;
}


/* =========================================================
   2. KHUNG CHỨA CÁC DẢI ẢNH
========================================================= */

.keheto-banner .keheto-slice-reveal {
    position: absolute;
    inset: 0;
    z-index: 3;

    overflow: hidden;
    pointer-events: none;

    opacity: 0;
    visibility: hidden;

    perspective: 1000px;
    transform-style: preserve-3d;

    contain: layout paint;
}


/* Lớp nền tối luôn nằm trên ảnh gốc nhưng dưới các dải ảnh */

.keheto-banner .keheto-slice-reveal::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(5, 31, 20, 0.2) 0%,
            rgba(5, 31, 20, 0.1) 52%,
            rgba(5, 31, 20, 0.22) 100%
        );
}


/* =========================================================
   3. TỪNG DẢI ẢNH
========================================================= */

.keheto-banner .keheto-slice-reveal__item {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;

    display: block;

    overflow: hidden;
    pointer-events: none;

    background-repeat: no-repeat;

    backface-visibility: hidden;
    transform-origin: center center;

    will-change:
        transform,
        opacity,
        filter;
}


/* Đường phân cách rất nhẹ giữa các dải */

.keheto-banner .keheto-slice-reveal__item::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    border-right: 1px solid rgba(255, 255, 255, 0.09);

    box-shadow:
        inset -8px 0 18px rgba(255, 255, 255, 0.025);
}


/* Dải cuối không cần đường phân cách */

.keheto-banner
.keheto-slice-reveal__item:last-child::after {
    border-right: 0;
}


/* =========================================================
   4. VỆT QUÉT ÁNH SÁNG
========================================================= */

.keheto-banner .keheto-slice-reveal__scan {
    position: absolute;
    top: -15%;
    bottom: -15%;
    left: -18%;
    z-index: 2;

    width: 11%;

    display: block;

    pointer-events: none;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.12) 26%,
            rgba(201, 255, 229, 0.48) 50%,
            rgba(255, 255, 255, 0.12) 74%,
            rgba(255, 255, 255, 0) 100%
        );

    filter: blur(2px);
    mix-blend-mode: screen;

    transform: skewX(-13deg);

    will-change:
        transform,
        opacity;
}


/* =========================================================
   5. CARD VÀ TEXT
========================================================= */

/* Card mở theo kiểu rèm kính, không tác động vào vị trí .text-box */

.keheto-banner .text-box-content {
    transform-style: preserve-3d;
    backface-visibility: hidden;

    will-change:
        transform,
        clip-path;
}


/* Tối ưu từng nhóm text cho chuyển động theo cấp bậc */

.keheto-banner .text-inner > h2,
.keheto-banner .text-inner > h3,
.keheto-banner .text-inner > p,
.keheto-banner .text-inner > .button {
    backface-visibility: hidden;

    will-change:
        opacity,
        transform,
        filter,
        clip-path;
}


/* Slide không active không hiển thị lớp slice */

.keheto-banner.keheto-gsap-ready
.banner:not(.is-selected)
.keheto-slice-reveal {
    opacity: 0;
    visibility: hidden;
}


/* =========================================================
   6. RESPONSIVE TABLET
========================================================= */

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

    /* Giảm đường viền giữa các dải trên màn hình nhỏ */

    .keheto-banner
    .keheto-slice-reveal__item::after {
        border-right-color:
            rgba(255, 255, 255, 0.06);

        box-shadow: none;
    }

    /* Vệt sáng rộng hơn để dễ nhìn trên tablet */

    .keheto-banner
    .keheto-slice-reveal__scan {
        width: 18%;
    }
}


/* =========================================================
   7. RESPONSIVE MOBILE
========================================================= */

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

    /* Mobile chỉ cần đường phân cách rất mờ */

    .keheto-banner
    .keheto-slice-reveal__item::after {
        border-right-color:
            rgba(255, 255, 255, 0.04);
    }

    /* Vệt sáng nhẹ hơn để tránh lóa */

    .keheto-banner
    .keheto-slice-reveal__scan {
        width: 22%;

        filter: blur(4px);
    }
}


/* =========================================================
   8. ACCESSIBILITY
========================================================= */

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

    /* Tắt toàn bộ lớp slice khi giảm chuyển động */

    .keheto-banner .keheto-slice-reveal {
        display: none;
    }

    /* Ảnh gốc hiển thị bình thường */

    .keheto-banner .banner-bg > img {
        opacity: 1;
        filter: none;
    }

    /* Card và nội dung không dùng mask */

    .keheto-banner .text-box-content,
    .keheto-banner .text-inner > h2,
    .keheto-banner .text-inner > h3,
    .keheto-banner .text-inner > p,
    .keheto-banner .text-inner > .button {
        opacity: 1;
        transform: none;
        filter: none;
        clip-path: none;
    }
}






/* =========================================================
   KEHETO - SECTION NĂNG LỰC SẢN XUẤT
   Phong cách: Orbital Metrics + Production Rail

   Cấu trúc mới:
   1. Hàng giới thiệu + nút
   2. Hàng số liệu + hình ảnh

   Chỉ tác động bên trong .kht-gioi-thieu
   Không sử dụng ID tự sinh của UX Builder
   Không sử dụng !important
   ========================================================= */

.kht-gioi-thieu {
  /* Màu chính KEHETO */
  --kht-primary: #28cb8b;

  /* Color Shade */
  --kht-shade-1: #43a046;
  --kht-shade-2: #3b8e3b;
  --kht-shade-3: #237d31;
  --kht-shade-4: #1b5e1f;
  --kht-shade-5: #103e13;

  /* Color Tint */
  --kht-tint-1: #66bb69;
  --kht-tint-2: #81c784;
  --kht-tint-3: #a5d6a7;
  --kht-tint-4: #c8e6c9;
  --kht-tint-5: #e8f5e9;

  /* Neutral */
  --kht-black: #263238;
  --kht-dark-grey: #4d4d4d;
  --kht-grey: #717171;
  --kht-light-grey: #89939e;
  --kht-grey-blue: #abbed1;
  --kht-silver: #f5f7fa;
  --kht-white: #ffffff;

  /* Màu sử dụng theo ngữ cảnh */
  --kht-heading: var(--kht-shade-5);
  /* --kht-body: var(--kht-dark-grey); */
  --kht-muted: var(--kht-grey);
  --kht-line: rgba(40, 203, 139, 0.2);
  --kht-surface: rgba(255, 255, 255, 0.94);
  --kht-surface-soft: rgba(255, 255, 255, 0.68);
  --kht-shadow: 0 24px 60px rgba(16, 62, 19, 0.13);

  /* Nền dùng đúng Neutral + Color Tint trong tài liệu KEHETO */
  --kht-bg-base: #f5f7fa;
  --kht-bg-white: #ffffff;
  --kht-bg-tint-3: #a5d6a7;
  --kht-bg-tint-4: #c8e6c9;
  --kht-bg-tint-5: #e8f5e9;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--kht-bg-base);
}

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

/* =========================================================
   NỀN SECTION KEHETO

   Màu sử dụng:
   - Trắng: #ffffff
   - Bạc: #f5f7fa
   - Xanh tint nhạt: #e8f5e9
   - Xanh thương hiệu: #28cb8b

   Loại bỏ:
   - Màu nền xuyên từ section phía sau
   - Blend mode gây lệch màu
   - Filter gây ám màu
   - Gradient tối hoặc ám hồng
   ========================================================= */

/* Nền gốc của toàn bộ section */
.kht-gioi-thieu {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  background-color: var(--kht-bg-base);
  background-image: none;

  filter: none;
  mix-blend-mode: normal;
}


/* =========================================================
   NỀN SECTION KEHETO
   Loại bỏ hoàn toàn vùng màu ám bên trái
   ========================================================= */

.section.kht-gioi-thieu > .section-bg.fill {
  position: absolute;
  inset: 0;

  opacity: 1;

  /* Nền đặc, không lấy màu từ bên ngoài */
  background-color: #f5f7fa;

  /*
   * Chỉ giữ gradient xanh rất nhẹ ở bên phải.
   * Đã xóa radial-gradient tại 8% 12% bên trái.
   */
  background-image:
    radial-gradient(
      circle at 92% 88%,
      rgba(165, 214, 167, 0.18) 0%,
      rgba(200, 230, 201, 0.08) 26%,
      transparent 46%
    ),
    linear-gradient(
      135deg,
      #ffffff 0%,
      #ffffff 30%,
      #f5f7fa 66%,
      #e8f5e9 100%
    );

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  background-blend-mode: normal;
  mix-blend-mode: normal;

  filter: none;
}

/* Lưới kỹ thuật màu xanh KEHETO rất nhẹ */
.section.kht-gioi-thieu
  > .section-bg.fill::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: 1;

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

  background-size: 58px 58px;
  background-position: center;

  filter: none;
  mix-blend-mode: normal;
}


/* Vòng trang trí xanh phía sau khu vực ảnh */
.section.kht-gioi-thieu
  > .section-bg.fill::after {
  content: "";

  position: absolute;
  top: -270px;
  right: -250px;

  width: 690px;
  height: 690px;

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

  background-color: transparent;

  box-shadow:
    0 0 0 72px rgba(40, 203, 139, 0.035),
    0 0 0 144px rgba(232, 245, 233, 0.38);

  pointer-events: none;

  filter: none;
  mix-blend-mode: normal;
}

/* =========================================================
   KHUNG NỘI DUNG CHUNG
   ========================================================= */

.kht-gioi-thieu .section-content {
  position: relative;
  z-index: 2;
  padding-top: 38px;
  padding-bottom: 42px;
}

/* Reset margin cho nội dung văn bản */
.kht-gioi-thieu .kht-tieude p,
.kht-gioi-thieu .kht-spngay p,
.kht-gioi-thieu .kht-congthuc p,
.kht-gioi-thieu .kht-nhamay p,
.kht-gioi-thieu .kht-xuong p,
.kht-gioi-thieu .kht-doitac p,
.kht-gioi-thieu .img1 p,
.kht-gioi-thieu .img2 p,
.kht-gioi-thieu .img3 p,
.kht-gioi-thieu .img4 p {
  margin: 0;
}

/* =========================================================
   KEHETO - HEADER KỸ THUẬT CHIA HAI CỘT
   Phong cách: Aligned Technical Header

   Cột trái:
   - Nội dung giới thiệu
   - Thẳng hàng với cụm số liệu

   Cột phải:
   - Nút xem thêm
   - Thẳng hàng với ảnh và tab 01 - 04

   Không thay đổi HTML
   Không sử dụng !important
   ========================================================= */

/* =========================================================
   HÀNG CHỨA TEXT VÀ NÚT
   Sử dụng đúng tỷ lệ của hàng số liệu bên dưới
   ========================================================= */

.kht-gioi-thieu
  > .section-content
  > .row:first-child {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(500px, 0.94fr)
    minmax(550px, 1.06fr);
  align-items: end;
  gap: clamp(42px, 5vw, 78px);

  width: calc(100% - 40px);
  max-width: 1320px;

  margin: 0 auto 34px;
  padding: 0 0 28px;

  overflow: visible;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;
  filter: none;
  clip-path: none;
}

/* Đường kỹ thuật kết nối toàn bộ hàng trên */
.kht-gioi-thieu
  > .section-content
  > .row:first-child::before {
  content: "";
  position: absolute;

  right: 0;
  bottom: 0;
  left: 0;

  height: 1px;

  background: linear-gradient(
    90deg,
    var(--kht-primary) 0%,
    rgba(40, 203, 139, 0.32) 28%,
    rgba(40, 203, 139, 0.12) 65%,
    transparent 100%
  );

  pointer-events: none;
}

/* Điểm nối nằm tại vùng giao giữa hai cột */
.kht-gioi-thieu
  > .section-content
  > .row:first-child::after {
  content: "";
  position: absolute;

  bottom: -5px;
  left: calc(44% - 5px);

  width: 11px;
  height: 11px;

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

  background: var(--kht-primary);

  box-shadow:
    0 0 0 5px rgba(40, 203, 139, 0.11);

  pointer-events: none;
}

/* Hủy kích thước cột mặc định của Flatsome */
.kht-gioi-thieu
  > .section-content
  > .row:first-child
  > .col {
  position: relative;

  width: 100%;
  max-width: none;
  flex-basis: auto;

  padding: 0;
}

/* =========================================================
   CỘT TRÁI - TEXT GIỚI THIỆU
   ========================================================= */

/* Cho phép cột text co giãn đúng trong grid */
.kht-gioi-thieu .kht-tieude {
  min-width: 0;
  align-self: stretch;
}

/* Khung nội dung text */
.kht-gioi-thieu .kht-tieude > .col-inner {
  position: relative;

  height: 100%;

  display: flex;
  align-items: center;

  padding:
    25px
    24px
    20px
    28px;

  border-left: 3px solid var(--kht-primary);

  /* Đã loại bỏ lớp trắng trong suốt gây lệch màu */
  background: linear-gradient(
    90deg,
    #e8f5e9 0%,
    #f5f7fa 48%,
    rgba(245, 247, 250, 0) 100%
  );
}

/* Thanh kỹ thuật phía trên nội dung */
.kht-gioi-thieu
  .kht-tieude
  > .col-inner::before {
  content: "";
  position: absolute;

  top: 0;
  left: -3px;

  width: 112px;
  height: 3px;

  background: linear-gradient(
    90deg,
    var(--kht-primary) 0%,
    var(--kht-shade-1) 65%,
    rgba(67, 160, 70, 0.1) 100%
  );
}

/* Điểm nhỏ nằm cuối thanh kỹ thuật */
.kht-gioi-thieu
  .kht-tieude
  > .col-inner::after {
  content: "";
  position: absolute;

  top: -3px;
  left: 108px;

  width: 9px;
  height: 9px;

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

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

/* Thiết kế đoạn giới thiệu */
.kht-gioi-thieu .kht-tieude p {
  max-width: 100%;

  margin: 0;
  padding: 0;

  border: 0;

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

  font-size: clamp(15px, 1.08vw, 17px);
  font-weight: 500;
  line-height: 1.72;
  letter-spacing: -0.008em;

  text-align: left;
}

/* =========================================================
   CỘT PHẢI - NÚT XEM THÊM
   Nút được căn theo cạnh trái của ảnh bên dưới
   ========================================================= */

.kht-gioi-thieu .kht-nut {
  align-self: center;
  justify-self: stretch;

  display: flex;
  align-items: center;

  min-width: 0;

  margin: 0;
  padding-left: 78px;
}

/* Khung chứa nút và đường nối */
.kht-gioi-thieu .kht-nut > .col-inner {
  position: relative;

  width: 100%;

  display: flex;
  align-items: center;
}

/* Đường nối từ nút kéo về phía ảnh */
.kht-gioi-thieu
  .kht-nut
  > .col-inner::after {
  content: "";
  position: absolute;

  top: 50%;
  left: 204px;
  right: 0;

  height: 1px;

  background: linear-gradient(
    90deg,
    rgba(40, 203, 139, 0.36) 0%,
    rgba(40, 203, 139, 0.08) 72%,
    transparent 100%
  );

  transform: translateY(-50%);
}

/* Reset margin nút Flatsome */
.kht-gioi-thieu .kht-nut .button {
  margin: 0;
}

/* Thiết kế nút giống ngôn ngữ tab 01 - 04 */
.kht-gioi-thieu .kht-nut .button.primary {
  position: relative;
  z-index: 2;

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

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

  margin: 0;
  padding:
    14px
    50px
    14px
    25px;

  overflow: hidden;

  border: 1px solid rgba(40, 203, 139, 0.17);
  border-radius: 0;

  clip-path: polygon(
    0 0,
    88% 0,
    100% 50%,
    88% 100%,
    0 100%
  );

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

  box-shadow:
    0 13px 28px rgba(16, 62, 19, 0.1);

  color: var(--kht-shade-4);

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

/* Thanh màu bên trái nút */
.kht-gioi-thieu
  .kht-nut
  .button.primary::before {
  content: "";
  position: absolute;

  top: 15px;
  bottom: 15px;
  left: 0;

  width: 4px;

  background: linear-gradient(
    180deg,
    var(--kht-primary) 0%,
    var(--kht-shade-2) 100%
  );
}

/* Mũi tên phía đầu nhọn của nút */
.kht-gioi-thieu
  .kht-nut
  .button.primary::after {
  content: "→";
  position: absolute;

  top: 50%;
  right: 21px;

  width: auto;
  height: auto;

  display: block;

  border: 0;
  border-radius: 0;

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

  font-size: 18px;
  font-weight: 600;
  line-height: 1;

  transform: translateY(-50%);

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

/* Text nút */
.kht-gioi-thieu
  .kht-nut
  .button.primary
  span {
  position: relative;
  z-index: 2;

  color: inherit;

  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.055em;

  white-space: nowrap;
}

/* Hover nút theo chiều ngang, đồng bộ tab ảnh */
.kht-gioi-thieu
  .kht-nut
  .button.primary:hover {
  color: var(--kht-white);

  background: linear-gradient(
    135deg,
    var(--kht-primary) 0%,
    var(--kht-shade-1) 58%,
    var(--kht-shade-3) 100%
  );

  box-shadow:
    0 18px 34px rgba(35, 125, 49, 0.2);

  transform: translateX(7px);
}

/* Đổi màu thanh khi hover */
.kht-gioi-thieu
  .kht-nut
  .button.primary:hover::before {
  background: rgba(255, 255, 255, 0.5);
}

/* Mũi tên chuyển trắng và đi sang phải */
.kht-gioi-thieu
  .kht-nut
  .button.primary:hover::after {
  color: var(--kht-white);

  transform:
    translateY(-50%)
    translateX(4px);
}

/* =========================================================
   TABLET NGANG
   Đồng bộ đúng tỷ lệ hàng nội dung bên dưới
   ========================================================= */

@media (max-width: 1180px) {
  .kht-gioi-thieu
    > .section-content
    > .row:first-child {
    grid-template-columns:
      minmax(450px, 0.95fr)
      minmax(480px, 1.05fr);

    gap: 40px;
  }

  /* Thu gọn khoảng cách đầu cột phải */
  .kht-gioi-thieu .kht-nut {
    padding-left: 58px;
  }

  /* Thu ngắn đường kết nối */
  .kht-gioi-thieu
    .kht-nut
    > .col-inner::after {
    left: 194px;
  }

  /* Thu nhỏ nút nhẹ trên tablet ngang */
  .kht-gioi-thieu .kht-nut .button.primary {
    width: 180px;
    min-width: 180px;
  }
}

/* =========================================================
   TABLET DỌC
   Text và nút nằm thành hai hàng nhưng vẫn cùng hệ kỹ thuật
   ========================================================= */

@media (max-width: 849px) {
  .kht-gioi-thieu
    > .section-content
    > .row:first-child {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 22px;

    width: calc(100% - 30px);

    margin-bottom: 35px;
    padding-bottom: 26px;
  }

  /* Cột text chiếm toàn bộ chiều rộng */
  .kht-gioi-thieu .kht-tieude > .col-inner {
    padding:
      24px
      22px
      22px
      27px;
  }

  /* Nút chuyển về bên trái */
  .kht-gioi-thieu .kht-nut {
    justify-self: start;

    width: 100%;

    padding-left: 27px;
  }

  /* Đường nối kéo dài sau nút */
  .kht-gioi-thieu
    .kht-nut
    > .col-inner::after {
    left: 196px;
  }

  .kht-gioi-thieu
    > .section-content
    > .row:first-child::after {
    left: 62%;
  }
}

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

@media (max-width: 549px) {
  .kht-gioi-thieu
    > .section-content
    > .row:first-child {
    gap: 18px;

    margin-bottom: 30px;
  }

  /* Thu gọn khoảng cách nội dung */
  .kht-gioi-thieu .kht-tieude > .col-inner {
    padding:
      21px
      12px
      18px
      19px;

    border-left-width: 2px;
  }

  /* Thu ngắn thanh kỹ thuật phía trên */
  .kht-gioi-thieu
    .kht-tieude
    > .col-inner::before {
    left: -2px;
    width: 84px;
    height: 2px;
  }

  /* Điều chỉnh điểm tròn cuối thanh */
  .kht-gioi-thieu
    .kht-tieude
    > .col-inner::after {
    top: -3px;
    left: 79px;

    width: 8px;
    height: 8px;
  }

  /* Text dễ đọc trên mobile */
  .kht-gioi-thieu .kht-tieude p {
    font-size: 14px;
    line-height: 1.65;
  }

  /* Nút căn theo mép text */
  .kht-gioi-thieu .kht-nut {
    padding-left: 19px;
  }

  /* Thu nhỏ nút */
  .kht-gioi-thieu .kht-nut .button.primary {
    width: 158px;
    min-width: 158px;
    min-height: 52px;

    padding:
      12px
      43px
      12px
      19px;
  }

  /* Thu ngắn đường phía sau nút */
  .kht-gioi-thieu
    .kht-nut
    > .col-inner::after {
    left: 172px;
  }

  /* Thu nhỏ text nút */
  .kht-gioi-thieu
    .kht-nut
    .button.primary
    span {
    font-size: 11px;
  }

  /* Thu nhỏ mũi tên */
  .kht-gioi-thieu
    .kht-nut
    .button.primary::after {
    right: 17px;
    font-size: 16px;
  }

  /* Thu gọn thanh màu bên trái nút */
  .kht-gioi-thieu
    .kht-nut
    .button.primary::before {
    top: 13px;
    bottom: 13px;
    width: 3px;
  }
}

/* =========================================================
   HÀNG SỐ LIỆU + HÌNH ẢNH
   Selector .row.row-small giúp không ảnh hưởng hàng giới thiệu
   ========================================================= */

.kht-gioi-thieu
  > .section-content
  > .row.row-small {
  display: grid;
  grid-template-columns:
    minmax(500px, 0.94fr)
    minmax(550px, 1.06fr);
  align-items: stretch;
  gap: clamp(42px, 5vw, 78px);
  width: calc(100% - 40px);
  max-width: 1320px;
  margin-right: auto;
  margin-left: auto;
}

/* Hủy width 50% mặc định của Flatsome */
.kht-gioi-thieu
  > .section-content
  > .row.row-small
  > .col {
  width: 100%;
  max-width: none;
  flex-basis: auto;
  padding: 0;
}

/* =========================================================
   CỘT TRÁI - HỆ THỐNG VÒNG SỐ LIỆU
   ========================================================= */

.kht-gioi-thieu
  > .section-content
  > .row.row-small
  > .col:first-child
  > .col-inner {
  position: relative;
  min-height: 630px;
}

/* Loại bỏ margin âm của row lồng trong Flatsome */
.kht-gioi-thieu
  > .section-content
  > .row.row-small
  > .col:first-child
  > .col-inner
  > .row {
  width: 100%;
  margin: 0;
}

/* Đưa hàng chứa số chính vào giữa cột */
.kht-gioi-thieu
  > .section-content
  > .row.row-small
  > .col:first-child
  > .col-inner
  > .row:first-child {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hủy padding cột chứa số liệu chính */
.kht-gioi-thieu
  > .section-content
  > .row.row-small
  > .col:first-child
  > .col-inner
  > .row:first-child
  > .col {
  width: 100%;
  max-width: none;
  padding: 0;
}

/* Căn vòng số liệu vào giữa */
.kht-gioi-thieu
  > .section-content
  > .row.row-small
  > .col:first-child
  > .col-inner
  > .row:first-child
  > .col
  > .col-inner {
  display: flex;
  justify-content: center;
}

/* =========================================================
   VÒNG TRÒN SỐ LIỆU CHÍNH
   ========================================================= */

.kht-gioi-thieu .kht-spngay {
  position: relative;
  z-index: 3;
  width: 360px;
  height: 360px;
  display: grid;
  place-items: center;
  padding: 42px;
  border: 1px solid rgba(40, 203, 139, 0.2);
  border-radius: 50%;
  text-align: center;
  background:
    radial-gradient(
      circle at 34% 28%,
      rgba(165, 214, 167, 0.2),
      transparent 40%
    ),
    rgba(255, 255, 255, 0.94);
  box-shadow:
    0 30px 70px rgba(16, 62, 19, 0.13),
    inset 0 0 0 12px rgba(40, 203, 139, 0.035);
  backdrop-filter: blur(10px);
}

/* Nội dung số nằm trên vòng quỹ đạo */
.kht-gioi-thieu .kht-spngay p {
  position: relative;
  z-index: 4;
}

/* Style chung cho vòng quỹ đạo do JavaScript tạo */
.kht-gioi-thieu .kht-orbit-ring {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
}

/* Vòng quỹ đạo ngoài */
.kht-gioi-thieu .kht-orbit-ring-a {
  inset: -34px;
  border: 1px dashed rgba(40, 203, 139, 0.32);
}

/* Điểm sáng chạy theo vòng ngoài */
.kht-gioi-thieu .kht-orbit-ring-a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  width: 11px;
  height: 11px;
  border: 3px solid var(--kht-white);
  border-radius: 50%;
  background: var(--kht-primary);
  box-shadow: 0 0 0 6px rgba(40, 203, 139, 0.14);
}

/* Vòng quỹ đạo bên trong */
.kht-gioi-thieu .kht-orbit-ring-b {
  inset: 17px;
  border: 1px solid rgba(67, 160, 70, 0.16);
}

/* Hai cung màu chuyển động bên trong */
.kht-gioi-thieu .kht-orbit-ring-b::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border-top: 3px solid var(--kht-primary);
  border-right: 3px solid transparent;
  border-bottom: 3px solid var(--kht-shade-2);
  border-left: 3px solid transparent;
}

/* =========================================================
   SỐ + ĐƠN VỊ
   Dấu + và m2 nằm chính giữa theo chiều cao số
   ========================================================= */

.kht-gioi-thieu .kht-stat-number-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  overflow: visible;
  line-height: 1;
  flex-wrap: nowrap;
}

/* Số chính được tăng độ tương phản và giữ nét rõ */
.kht-gioi-thieu .kht-spngay .kht-stat-number {
  display: inline-block;
  overflow: visible;
  color: #0b3d1d;
  font-size: clamp(54px, 5vw, 74px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.045em;
  white-space: nowrap;
  opacity: 1;
  text-shadow: none;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Nhãn nằm dưới số chính, tăng độ đậm để không chìm vào nền */
.kht-gioi-thieu .kht-spngay .kht-stat-label {
  display: block;
  max-width: 220px;
  margin: 18px auto 0;
  color: #263238;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  opacity: 1;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Dấu cộng và m2 được căn giữa theo số và hiển thị rõ nét */
.kht-gioi-thieu .kht-stat-unit {
  display: inline-flex;
  align-self: center;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #1b5e1f;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  opacity: 1;
  text-shadow: none;
  transform: translateY(0);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* =========================================================
   BỐN THÔNG SỐ BAO QUANH VÒNG TRÒN
   Phong cách mới: Compact Bracket Metric

   Thay đổi giao diện:
   - Card thấp và gọn hơn, bỏ nền chấm và khối đơn vị lớn.
   - Con số và đơn vị nằm cùng hàng, đơn vị ở dạng chỉ số nhỏ.
   - Nhãn mô tả được ngăn bằng một đường mảnh.
   - Card trái và phải dùng thanh cạnh đối xứng.
   - Card được đưa gần vòng tròn hơn nhưng vẫn không che quỹ đạo.
   ========================================================= */

/* Hàng chứa bốn card trở thành vùng định vị tuyệt đối */
.kht-gioi-thieu
  > .section-content
  > .row.row-small
  > .col:first-child
  > .col-inner
  > .row:last-child {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: block;
  pointer-events: none;
}

/* Hủy kích thước cột mặc định của Flatsome */
.kht-gioi-thieu
  > .section-content
  > .row.row-small
  > .col:first-child
  > .col-inner
  > .row:last-child
  > .col {
  position: absolute;
  z-index: 7;
  width: 168px;
  max-width: none;
  padding: 0;
  pointer-events: auto;
}

/*
 * Card Công thức ở bên trái được đưa gần vòng tròn hơn.
 * Card trái cao hơn card phải để tạo nhịp bố cục lệch tầng.
 */
.kht-gioi-thieu
  > .section-content
  > .row.row-small
  > .col:first-child
  > .col-inner
  > .row:last-child
  > .col:nth-child(1) {
  top: 62px;
  left: 78px;
}

/*
 * Card Nhà máy bên phải thấp hơn card Công thức một chút.
 * Khoảng cách ngang được thu lại để card gần vòng tròn hơn.
 */
.kht-gioi-thieu
  > .section-content
  > .row.row-small
  > .col:first-child
  > .col-inner
  > .row:last-child
  > .col:nth-child(2) {
  top: 108px;
  right: 28px;
}

/*
 * Card Nhà xưởng bên trái được nâng cao hơn card Đối tác.
 * Vị trí mới tiếp tục giữ card gần vòng tròn trung tâm.
 */
.kht-gioi-thieu
  > .section-content
  > .row.row-small
  > .col:first-child
  > .col-inner
  > .row:last-child
  > .col:nth-child(3) {
  bottom: 106px;
  left: 38px;
}

/*
 * Card Đối tác bên phải thấp hơn card Nhà xưởng một chút.
 * Tạo bố cục bên trái cao, bên phải thấp như yêu cầu.
 */
.kht-gioi-thieu
  > .section-content
  > .row.row-small
  > .col:first-child
  > .col-inner
  > .row:last-child
  > .col:nth-child(4) {
  right: 72px;
  bottom: 56px;
}

/* Khung chung cho bốn card số liệu */
.kht-gioi-thieu .kht-congthuc,
.kht-gioi-thieu .kht-nhamay,
.kht-gioi-thieu .kht-xuong,
.kht-gioi-thieu .kht-doitac {
  position: relative;
  z-index: 8;
  min-height: 90px;
  padding: 11px 13px 10px;
  overflow: visible;
  isolation: isolate;
  border: 1px solid rgba(35, 125, 49, 0.16);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow:
    0 12px 28px rgba(16, 62, 19, 0.11),
    0 3px 8px rgba(40, 203, 139, 0.06);
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Hai card bên trái dùng thanh nhấn ở cạnh trái */
.kht-gioi-thieu .kht-congthuc,
.kht-gioi-thieu .kht-xuong {
  border-left: 3px solid var(--kht-primary);
}

/* Hai card bên phải dùng thanh nhấn ở cạnh phải */
.kht-gioi-thieu .kht-nhamay,
.kht-gioi-thieu .kht-doitac {
  border-right: 3px solid var(--kht-primary);
}

/* Điểm kỹ thuật nhỏ của hai card bên trái */
.kht-gioi-thieu .kht-congthuc::before,
.kht-gioi-thieu .kht-xuong::before {
  content: "";
  position: absolute;
  top: 11px;
  left: -5px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--kht-white);
  border-radius: 2px;
  background: var(--kht-primary);
  box-shadow: 0 0 0 3px rgba(40, 203, 139, 0.11);
}

/* Điểm kỹ thuật nhỏ của hai card bên phải */
.kht-gioi-thieu .kht-nhamay::before,
.kht-gioi-thieu .kht-doitac::before {
  content: "";
  position: absolute;
  top: 11px;
  right: -5px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--kht-white);
  border-radius: 2px;
  background: var(--kht-primary);
  box-shadow: 0 0 0 3px rgba(40, 203, 139, 0.11);
}

/* Cấu trúc đường nối của hai card bên trái */
.kht-gioi-thieu .kht-congthuc::after,
.kht-gioi-thieu .kht-xuong::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 9px;
  background:
    radial-gradient(
      circle at 100% 50%,
      var(--kht-primary) 0 3px,
      var(--kht-white) 3px 5px,
      transparent 5px
    ),
    linear-gradient(
      90deg,
      rgba(40, 203, 139, 0.12) 0%,
      rgba(40, 203, 139, 0.62) 100%
    ) center / 100% 1px no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Card 1.000+ gần vòng tròn hơn nên dùng đường nối ngắn */
.kht-gioi-thieu .kht-congthuc::after {
  right: -14px;
  width: 14px;
}

/* Card 40.000m2 giữ khoảng nối cân đối với vị trí hiện tại */
.kht-gioi-thieu .kht-xuong::after {
  right: -24px;
  width: 24px;
}

/* Cấu trúc đường nối của hai card bên phải */
.kht-gioi-thieu .kht-nhamay::after,
.kht-gioi-thieu .kht-doitac::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 9px;
  background:
    radial-gradient(
      circle at 0 50%,
      var(--kht-primary) 0 3px,
      var(--kht-white) 3px 5px,
      transparent 5px
    ),
    linear-gradient(
      90deg,
      rgba(40, 203, 139, 0.62) 0%,
      rgba(40, 203, 139, 0.12) 100%
    ) center / 100% 1px no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Card Nhà máy giữ khoảng nối cân đối với vị trí hiện tại */
.kht-gioi-thieu .kht-nhamay::after {
  left: -24px;
  width: 24px;
}

/* Card 300+ gần vòng tròn hơn nên dùng đường nối ngắn */
.kht-gioi-thieu .kht-doitac::after {
  left: -14px;
  width: 14px;
}

/* Căn số và đơn vị trên cùng một hàng */
.kht-gioi-thieu .kht-congthuc .kht-stat-number-wrap,
.kht-gioi-thieu .kht-nhamay .kht-stat-number-wrap,
.kht-gioi-thieu .kht-xuong .kht-stat-number-wrap,
.kht-gioi-thieu .kht-doitac .kht-stat-number-wrap {
  width: 100%;
  max-width: 100%;
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
  line-height: 1;
}

/* Con số chính trên card */
.kht-gioi-thieu .kht-congthuc .kht-stat-number,
.kht-gioi-thieu .kht-nhamay .kht-stat-number,
.kht-gioi-thieu .kht-xuong .kht-stat-number,
.kht-gioi-thieu .kht-doitac .kht-stat-number {
  display: inline-block;
  overflow: visible;
  color: #0b3d1d;
  font-size: clamp(34px, 3.15vw, 44px);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.05em;
  white-space: nowrap;
  opacity: 1;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Đơn vị + và m2 hiển thị nhỏ gọn như chỉ số */
.kht-gioi-thieu .kht-congthuc .kht-stat-unit,
.kht-gioi-thieu .kht-nhamay .kht-stat-unit,
.kht-gioi-thieu .kht-xuong .kht-stat-unit,
.kht-gioi-thieu .kht-doitac .kht-stat-unit {
  min-width: 0;
  min-height: 0;
  display: inline-block;
  align-self: flex-start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--kht-shade-3);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(2px);
}

/* Nhãn mô tả gọn phía dưới */
.kht-gioi-thieu .kht-congthuc .kht-stat-label,
.kht-gioi-thieu .kht-nhamay .kht-stat-label,
.kht-gioi-thieu .kht-xuong .kht-stat-label,
.kht-gioi-thieu .kht-doitac .kht-stat-label {
  width: 100%;
  display: block;
  margin: 8px 0 0;
  padding: 7px 0 0;
  border-top: 1px solid rgba(40, 203, 139, 0.18);
  background: transparent;
  color: #34443d;
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: 0;
  opacity: 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Hover card bên trái */
.kht-gioi-thieu .kht-congthuc:hover,
.kht-gioi-thieu .kht-xuong:hover {
  border-color: rgba(40, 203, 139, 0.34);
  box-shadow:
    0 17px 34px rgba(16, 62, 19, 0.15),
    0 4px 10px rgba(40, 203, 139, 0.08);
  transform: translateX(-4px) translateY(-2px);
}

/* Hover card bên phải */
.kht-gioi-thieu .kht-nhamay:hover,
.kht-gioi-thieu .kht-doitac:hover {
  border-color: rgba(40, 203, 139, 0.34);
  box-shadow:
    0 17px 34px rgba(16, 62, 19, 0.15),
    0 4px 10px rgba(40, 203, 139, 0.08);
  transform: translateX(4px) translateY(-2px);
}

/* =========================================================
   CỘT PHẢI - HÌNH ẢNH DÂY CHUYỀN
   ========================================================= */

.kht-gioi-thieu
  > .section-content
  > .row.row-small
  > .col:last-child
  > .col-inner {
  position: relative;
  min-height: 630px;
  padding-left: 78px;
  counter-reset: kht-feature;
}

/* Ảnh chiếm toàn bộ chiều cao cột phải */
.kht-gioi-thieu .img {
  position: absolute;
  inset: 0 0 0 58px;
  width: auto;
  height: 100%;
  margin: 0;
}

/* Khung ảnh cắt góc */
.kht-gioi-thieu .img-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: polygon(
    11% 0,
    100% 0,
    100% 90%,
    89% 100%,
    0 100%,
    0 11%
  );
  background: var(--kht-tint-5);
  box-shadow: var(--kht-shadow);
}

/* Lớp phủ ảnh sử dụng Color Shade */
.kht-gioi-thieu .img-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(16, 62, 19, 0.42) 0%,
      rgba(27, 94, 31, 0.12) 36%,
      transparent 62%
    ),
    linear-gradient(
      180deg,
      transparent 62%,
      rgba(16, 62, 19, 0.18) 100%
    );
}

/* Ảnh phủ đầy khung */
.kht-gioi-thieu .img img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 630px;
  object-fit: cover;
  object-position: center;
}

/* =========================================================
   BỐN CARD NỘI DUNG TRÊN HÌNH ẢNH
   Phong cách mới: Layered Index Card

   Thay đổi giao diện:
   - Bỏ dải xanh lớn chạy dọc toàn bộ card.
   - Số thứ tự trở thành nhãn nổi độc lập ở cạnh trái.
   - Card dùng nền trắng đặc, góc bo bất đối xứng và lớp đổ bóng kép.
   - Nội dung được tăng tương phản nhưng vẫn giữ cảm giác gọn nhẹ.
   - Không thay đổi HTML và không sử dụng !important.
   ========================================================= */

/* Khung chung cho bốn card nội dung */
.kht-gioi-thieu .img1,
.kht-gioi-thieu .img2,
.kht-gioi-thieu .img3,
.kht-gioi-thieu .img4 {
  position: absolute;
  z-index: 6;
  left: 20px;

  width: 318px;
  min-height: 86px;

  display: flex;
  align-items: center;

  padding: 17px 34px 17px 62px;

  counter-increment: kht-feature;
  isolation: isolate;
  overflow: visible;

  border: 1px solid rgba(35, 125, 49, 0.18);
  border-radius: 16px 5px 16px 5px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.99) 0%,
      rgba(255, 255, 255, 0.99) 72%,
      rgba(236, 248, 240, 0.98) 100%
    );

  box-shadow:
    10px 10px 0 rgba(40, 203, 139, 0.07),
    0 18px 38px rgba(16, 62, 19, 0.16);

  backdrop-filter: blur(10px);

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

/* Số thứ tự 01 - 04 trở thành nhãn nổi riêng */
.kht-gioi-thieu .img1::before,
.kht-gioi-thieu .img2::before,
.kht-gioi-thieu .img3::before,
.kht-gioi-thieu .img4::before {
  content: counter(kht-feature, decimal-leading-zero);

  position: absolute;
  z-index: 3;
  top: 50%;
  left: -21px;

  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border: 3px solid rgba(255, 255, 255, 0.96);
  border-radius: 14px 5px 14px 5px;

  background:
    linear-gradient(
      145deg,
      var(--kht-primary) 0%,
      var(--kht-shade-2) 55%,
      var(--kht-shade-4) 100%
    );

  box-shadow:
    0 10px 22px rgba(16, 62, 19, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);

  color: var(--kht-white);

  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.035em;

  transform: translateY(-50%);

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

/* Thanh nhấn mảnh tạo chiều sâu ở đáy card */
.kht-gioi-thieu .img1::after,
.kht-gioi-thieu .img2::after,
.kht-gioi-thieu .img3::after,
.kht-gioi-thieu .img4::after {
  content: "";

  position: absolute;
  z-index: 2;
  right: 30px;
  bottom: -1px;
  left: 62px;

  height: 3px;

  border-radius: 3px 3px 0 0;

  background:
    linear-gradient(
      90deg,
      var(--kht-primary) 0%,
      rgba(40, 203, 139, 0.4) 45%,
      transparent 100%
    );
}

/* Nội dung card */
.kht-gioi-thieu .img1 p,
.kht-gioi-thieu .img2 p,
.kht-gioi-thieu .img3 p,
.kht-gioi-thieu .img4 p {
  position: relative;
  z-index: 3;

  width: 100%;
  margin: 0;

  color: #173b2b;

  font-size: 13.3px;
  font-weight: 760;
  line-height: 1.46;
  letter-spacing: -0.006em;

  opacity: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.94);

  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Vị trí từng card trên ảnh */
.kht-gioi-thieu .img1 {
  top: 58px;
}

.kht-gioi-thieu .img2 {
  top: 188px;
}

.kht-gioi-thieu .img3 {
  top: 318px;
}

.kht-gioi-thieu .img4 {
  top: 448px;
}

/* Hover làm card nổi nhẹ và kéo nhãn số ra phía trước */
.kht-gioi-thieu .img1:hover,
.kht-gioi-thieu .img2:hover,
.kht-gioi-thieu .img3:hover,
.kht-gioi-thieu .img4:hover {
  border-color: rgba(40, 203, 139, 0.42);

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #ffffff 66%,
      #e8f5e9 100%
    );

  box-shadow:
    13px 13px 0 rgba(40, 203, 139, 0.09),
    0 24px 48px rgba(16, 62, 19, 0.22);

  transform: translateX(9px) translateY(-2px);
}

/* Nhãn số chuyển động độc lập khi hover */
.kht-gioi-thieu .img1:hover::before,
.kht-gioi-thieu .img2:hover::before,
.kht-gioi-thieu .img3:hover::before,
.kht-gioi-thieu .img4:hover::before {
  box-shadow:
    0 14px 28px rgba(16, 62, 19, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);

  transform: translateY(-50%) translateX(-4px);
}

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

@media (max-width: 1180px) {
  /* Điều chỉnh hàng giới thiệu */
  .kht-gioi-thieu
    > .section-content
    > .row:first-child {
    gap: 32px;
  }

  /* Điều chỉnh tỷ lệ hai cột chính */
  .kht-gioi-thieu
    > .section-content
    > .row.row-small {
    grid-template-columns:
      minmax(450px, 0.95fr)
      minmax(480px, 1.05fr);
    gap: 40px;
  }

  /* Giảm chiều cao cột số liệu */
  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:first-child
    > .col-inner {
    min-height: 590px;
  }

  /* Thu nhỏ vòng số liệu chính */
  .kht-gioi-thieu .kht-spngay {
    width: 320px;
    height: 320px;
  }

  /* Thu nhỏ chiều rộng card trên tablet ngang */
  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:first-child
    > .col-inner
    > .row:last-child
    > .col {
    width: 150px;
  }

  /*
   * Giữ bố cục lệch tầng trên tablet ngang:
   * hai card trái cao hơn hai card phải và gần vòng tròn hơn.
   */
  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:first-child
    > .col-inner
    > .row:last-child
    > .col:nth-child(1) {
    top: 36px;
    left: 62px;
  }

  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:first-child
    > .col-inner
    > .row:last-child
    > .col:nth-child(2) {
    top: 94px;
    right: 30px;
  }

  /* Hai card phía dưới tiếp tục giữ nhịp trái cao, phải thấp */
  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:first-child
    > .col-inner
    > .row:last-child
    > .col:nth-child(3) {
    bottom: 92px;
    left: 30px;
  }

  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:first-child
    > .col-inner
    > .row:last-child
    > .col:nth-child(4) {
    right: 66px;
    bottom: 34px;
  }

  /* Thu gọn card trên tablet ngang */
  .kht-gioi-thieu .kht-congthuc,
  .kht-gioi-thieu .kht-nhamay,
  .kht-gioi-thieu .kht-xuong,
  .kht-gioi-thieu .kht-doitac {
    min-height: 84px;
    padding: 10px 11px 9px;
  }

  /* Card 1.000+ dùng line ngắn hơn trên tablet */
  .kht-gioi-thieu .kht-congthuc::after {
    right: -12px;
    width: 12px;
  }

  /* Card 40.000m2 giữ line cân đối trên tablet */
  .kht-gioi-thieu .kht-xuong::after {
    right: -20px;
    width: 20px;
  }

  /* Card Nhà máy giữ line cân đối trên tablet */
  .kht-gioi-thieu .kht-nhamay::after {
    left: -20px;
    width: 20px;
  }

  /* Card 300+ dùng line ngắn hơn trên tablet */
  .kht-gioi-thieu .kht-doitac::after {
    left: -12px;
    width: 12px;
  }

  /* Thu nhỏ số liệu trên tablet ngang */
  .kht-gioi-thieu .kht-congthuc .kht-stat-number,
  .kht-gioi-thieu .kht-nhamay .kht-stat-number,
  .kht-gioi-thieu .kht-xuong .kht-stat-number,
  .kht-gioi-thieu .kht-doitac .kht-stat-number {
    font-size: clamp(31px, 3vw, 39px);
  }

  /* Thu nhỏ đơn vị trên tablet ngang */
  .kht-gioi-thieu .kht-congthuc .kht-stat-unit,
  .kht-gioi-thieu .kht-nhamay .kht-stat-unit,
  .kht-gioi-thieu .kht-xuong .kht-stat-unit,
  .kht-gioi-thieu .kht-doitac .kht-stat-unit {
    font-size: 12px;
  }

  /* Thu nhỏ nhãn mô tả trên tablet ngang */
  .kht-gioi-thieu .kht-congthuc .kht-stat-label,
  .kht-gioi-thieu .kht-nhamay .kht-stat-label,
  .kht-gioi-thieu .kht-xuong .kht-stat-label,
  .kht-gioi-thieu .kht-doitac .kht-stat-label {
    margin-top: 7px;
    padding-top: 6px;
    font-size: 11px;
  }

  /* Giảm chiều cao cột ảnh */
  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:last-child
    > .col-inner {
    min-height: 590px;
  }

  .kht-gioi-thieu .img img {
    min-height: 590px;
  }

  /* Thu gọn Layered Index Card trên tablet ngang */
  .kht-gioi-thieu .img1,
  .kht-gioi-thieu .img2,
  .kht-gioi-thieu .img3,
  .kht-gioi-thieu .img4 {
    left: 17px;
    width: 282px;
    min-height: 80px;
    padding: 14px 28px 14px 56px;
    border-radius: 14px 5px 14px 5px;
    box-shadow:
      8px 8px 0 rgba(40, 203, 139, 0.065),
      0 15px 32px rgba(16, 62, 19, 0.15);
  }

  /* Thu nhỏ nhãn số trên tablet ngang */
  .kht-gioi-thieu .img1::before,
  .kht-gioi-thieu .img2::before,
  .kht-gioi-thieu .img3::before,
  .kht-gioi-thieu .img4::before {
    left: -18px;
    width: 43px;
    height: 43px;
    border-radius: 12px 4px 12px 4px;
    font-size: 12px;
  }

  /* Thu ngắn thanh nhấn đáy card */
  .kht-gioi-thieu .img1::after,
  .kht-gioi-thieu .img2::after,
  .kht-gioi-thieu .img3::after,
  .kht-gioi-thieu .img4::after {
    right: 25px;
    left: 56px;
  }

  /* Giữ nội dung rõ nét khi card thu nhỏ */
  .kht-gioi-thieu .img1 p,
  .kht-gioi-thieu .img2 p,
  .kht-gioi-thieu .img3 p,
  .kht-gioi-thieu .img4 p {
    font-size: 12.4px;
    line-height: 1.42;
  }

  /* Điều chỉnh vị trí card trên tablet ngang */
  .kht-gioi-thieu .img1 {
    top: 48px;
  }

  .kht-gioi-thieu .img2 {
    top: 166px;
  }

  .kht-gioi-thieu .img3 {
    top: 284px;
  }

  .kht-gioi-thieu .img4 {
    top: 402px;
  }
}

/* =========================================================
   TABLET DỌC
   ========================================================= */

@media (max-width: 849px) {
  /* Hàng giới thiệu chuyển thành một cột */
  .kht-gioi-thieu
    > .section-content
    > .row:first-child {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 22px;
    width: calc(100% - 30px);
    margin-bottom: 34px;
  }

  /* Nút căn về bên trái trên tablet dọc */
  .kht-gioi-thieu .kht-nut {
    justify-self: start;
  }

  /* Hàng số liệu và ảnh chuyển thành một cột */
  .kht-gioi-thieu
    > .section-content
    > .row.row-small {
    grid-template-columns: 1fr;
    width: calc(100% - 30px);
    /* gap: 42px; */
  }

  /* Giữ đủ không gian cho vòng tròn */
  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:first-child
    > .col-inner {
    min-height: 620px;
  }

  /* Kích thước vòng tròn trên tablet dọc */
  .kht-gioi-thieu .kht-spngay {
    width: 350px;
    height: 350px;
  }

  /* Chiều cao khu vực ảnh */
  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:last-child
    > .col-inner {
    min-height: 610px;
  }

  .kht-gioi-thieu .img img {
    min-height: 610px;
  }
}

/* =======================================================
   MOBILE - CỤM SỐ LIỆU KHT GIỚI THIỆU
   Chỉnh theo yêu cầu mới:
   1. Vòng tròn trung tâm lớn hơn.
   2. 4 card nhỏ lại.
   3. 4 card ép sát, đè lên vòng tròn.
   4. Bố cục card lệch như desktop:
      - cột trái cao hơn
      - cột phải thấp hơn
   ======================================================= */
@media (max-width: 549px) {

  /* =========================================
     Vùng chứa toàn bộ cụm số liệu mobile
     ========================================= */
  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:first-child
    > .col-inner {
    position: relative;
    min-height: 400px;
    isolation: isolate;
  }

  /* =========================================
     Hàng chứa vòng tròn trung tâm
     ========================================= */
  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:first-child
    > .col-inner
    > .row:first-child {
    position: absolute;
    inset: 0;
    z-index: 2;

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

    width: 100%;
    margin: 0;

    pointer-events: none;
  }

  /* Reset cột chứa vòng tròn */
  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:first-child
    > .col-inner
    > .row:first-child
    > .col {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  /* Căn giữa nội dung vòng tròn */
  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:first-child
    > .col-inner
    > .row:first-child
    > .col
    > .col-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

/* Tăng kích thước vòng tròn trung tâm trên mobile thêm 1 chút */
.kht-gioi-thieu .kht-spngay {
  width: clamp(226px, 64vw, 248px);
  height: clamp(226px, 64vw, 248px);
  padding: 21px;

  box-shadow:
    0 18px 42px rgba(16, 62, 19, 0.10),
    inset 0 0 0 7px rgba(40, 203, 139, 0.035);

  pointer-events: auto;
}

/* Nới vòng quỹ đạo ngoài theo kích thước mới của vòng tròn */
.kht-gioi-thieu .kht-orbit-ring-a {
  inset: -22px;
}

/* Nới vòng quỹ đạo trong theo kích thước mới của vòng tròn */
.kht-gioi-thieu .kht-orbit-ring-b {
  inset: 11px;
}

/* Tăng nhẹ cỡ số 1.000.000 để cân đối với vòng tròn lớn hơn */
.kht-gioi-thieu .kht-spngay .kht-stat-number {
  font-size: clamp(38px, 10vw, 43px);
  line-height: 1;
  letter-spacing: -0.055em;
}

/* Tăng nhẹ nhãn dưới số để cân đối */
.kht-gioi-thieu .kht-spngay .kht-stat-label {
  max-width: 164px;
  margin-top: 11px;
  font-size: 12.5px;
  line-height: 1.35;
}

  /* =========================================
     Hàng chứa 4 card số liệu
     ========================================= */
  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:first-child
    > .col-inner
    > .row:last-child {
    position: absolute;
    inset: 0;
    z-index: 6;

    display: block;

    width: 100%;
    margin: 0;

    pointer-events: none;
  }

  /* Kích thước cột chứa card
     - card nhỏ hơn
     - dễ ép sát vòng tròn hơn
   */
  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:first-child
    > .col-inner
    > .row:last-child
    > .col {
    position: absolute;
    z-index: 7;

    width: calc(50% - 34px);
    max-width: 118px;

    padding: 0;

    pointer-events: auto;
  }

  /* =========================================
     Vị trí 4 card
     - đè lên vòng tròn
     - lệch như desktop
     ========================================= */

  /* Card 1 - trên trái
     Cột trái cao hơn */
  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:first-child
    > .col-inner
    > .row:last-child
    > .col:nth-child(1) {
    top: 56px;
    left: 10px;
    right: auto;
    bottom: auto;
  }

  /* Card 2 - trên phải
     Cột phải thấp hơn một chút */
  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:first-child
    > .col-inner
    > .row:last-child
    > .col:nth-child(2) {
    top: 70px;
    right: 10px;
    left: auto;
    bottom: auto;
  }

  /* Card 3 - dưới trái
     Cột trái cao hơn */
  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:first-child
    > .col-inner
    > .row:last-child
    > .col:nth-child(3) {
    bottom: 74px;
    left: 12px;
    top: auto;
    right: auto;
  }

  /* Card 4 - dưới phải
     Cột phải thấp hơn một chút */
  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:first-child
    > .col-inner
    > .row:last-child
    > .col:nth-child(4) {
    bottom: 58px;
    right: 10px;
    top: auto;
    left: auto;
  }

  /* =========================================
     Giao diện chung cho 4 card
     ========================================= */
  .kht-gioi-thieu .kht-congthuc,
  .kht-gioi-thieu .kht-nhamay,
  .kht-gioi-thieu .kht-xuong,
  .kht-gioi-thieu .kht-doitac {
    position: relative;
    z-index: 8;

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

    padding: 6px 8px 6px;

    overflow: visible;
    isolation: isolate;

    border: 1px solid rgba(35, 125, 49, 0.14);
    border-radius: 10px;

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

    box-shadow:
      0 8px 18px rgba(16, 62, 19, 0.08),
      0 2px 5px rgba(40, 203, 139, 0.04);
  }

  /* Card trái có line nhấn bên trái */
  .kht-gioi-thieu .kht-congthuc,
  .kht-gioi-thieu .kht-xuong {
    border-left: 3px solid var(--kht-primary);
    border-right-width: 1px;
  }

  /* Card phải có line nhấn bên phải */
  .kht-gioi-thieu .kht-nhamay,
  .kht-gioi-thieu .kht-doitac {
    border-left-width: 1px;
    border-right: 3px solid var(--kht-primary);
  }

  /* Nút chấm nhấn cho card bên trái */
  .kht-gioi-thieu .kht-congthuc::before,
  .kht-gioi-thieu .kht-xuong::before {
    content: "";

    position: absolute;
    top: 7px;
    left: -5px;

    width: 7px;
    height: 7px;

    border: 2px solid var(--kht-white);
    border-radius: 2px;

    background: var(--kht-primary);

    box-shadow: 0 0 0 3px rgba(40, 203, 139, 0.1);
  }

  /* Nút chấm nhấn cho card bên phải */
  .kht-gioi-thieu .kht-nhamay::before,
  .kht-gioi-thieu .kht-doitac::before {
    content: "";

    position: absolute;
    top: 7px;
    right: -5px;

    width: 7px;
    height: 7px;

    border: 2px solid var(--kht-white);
    border-radius: 2px;

    background: var(--kht-primary);

    box-shadow: 0 0 0 3px rgba(40, 203, 139, 0.1);
  }

  /* Ẩn line nối dài trên mobile */
  .kht-gioi-thieu .kht-congthuc::after,
  .kht-gioi-thieu .kht-nhamay::after,
  .kht-gioi-thieu .kht-xuong::after,
  .kht-gioi-thieu .kht-doitac::after {
    display: none;
  }

  /* =========================================
     Cụm số trong card
     ========================================= */
  .kht-gioi-thieu .kht-congthuc .kht-stat-number-wrap,
  .kht-gioi-thieu .kht-nhamay .kht-stat-number-wrap,
  .kht-gioi-thieu .kht-xuong .kht-stat-number-wrap,
  .kht-gioi-thieu .kht-doitac .kht-stat-number-wrap {
    gap: 2px;
    min-width: 0;
    max-width: 100%;
  }

  /* Thu nhỏ số 1.000 / 2 / 40.000 / 300 */
  .kht-gioi-thieu .kht-congthuc .kht-stat-number,
  .kht-gioi-thieu .kht-nhamay .kht-stat-number,
  .kht-gioi-thieu .kht-xuong .kht-stat-number,
  .kht-gioi-thieu .kht-doitac .kht-stat-number {
    font-size: clamp(19px, 5.6vw, 23px);
    line-height: 0.96;
    letter-spacing: -0.05em;
  }

  /* Dấu + và m2 */
  .kht-gioi-thieu .kht-congthuc .kht-stat-unit,
  .kht-gioi-thieu .kht-nhamay .kht-stat-unit,
  .kht-gioi-thieu .kht-xuong .kht-stat-unit,
  .kht-gioi-thieu .kht-doitac .kht-stat-unit {
    font-size: 8px;
    transform: translateY(1px);
  }

  /* Nhãn mô tả dưới số */
  .kht-gioi-thieu .kht-congthuc .kht-stat-label,
  .kht-gioi-thieu .kht-nhamay .kht-stat-label,
  .kht-gioi-thieu .kht-xuong .kht-stat-label,
  .kht-gioi-thieu .kht-doitac .kht-stat-label {
    margin-top: 4px;
    padding-top: 4px;

    font-size: 8.5px;
    line-height: 1.2;

    overflow-wrap: anywhere;
  }

  /* Tắt transform hover trên mobile */
  .kht-gioi-thieu .kht-congthuc:hover,
  .kht-gioi-thieu .kht-nhamay:hover,
  .kht-gioi-thieu .kht-xuong:hover,
  .kht-gioi-thieu .kht-doitac:hover {
    transform: none;
  }
}


/* =======================================================
   MOBILE NHỎ HƠN
   Chức năng:
   1. Vòng tròn vẫn giữ lớn vừa phải.
   2. Card vẫn đè lên vòng tròn.
   3. Card vẫn giữ độ lệch trái cao - phải thấp.
   ======================================================= */
@media (max-width: 379px) {

  /* Thu vùng chứa một chút để cân đối */
  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:first-child
    > .col-inner {
    min-height: 384px;
  }

  /* Vòng tròn vẫn lớn hơn bản cũ */
  .kht-gioi-thieu .kht-spngay {
    width: 206px;
    height: 206px;
    padding: 18px;
  }

  /* Thu vòng quỹ đạo tương ứng */
  .kht-gioi-thieu .kht-orbit-ring-a {
    inset: -18px;
  }

  .kht-gioi-thieu .kht-orbit-ring-b {
    inset: 9px;
  }

  /* Thu số giữa nhẹ */
  .kht-gioi-thieu .kht-spngay .kht-stat-number {
    font-size: 34px;
  }

  /* Card nhỏ thêm một chút */
  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:first-child
    > .col-inner
    > .row:last-child
    > .col {
    width: calc(50% - 32px);
    max-width: 112px;
  }

  /* Giữ card đè lên vòng tròn và có độ lệch */
  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:first-child
    > .col-inner
    > .row:last-child
    > .col:nth-child(1) {
    top: 60px;
    left: 10px;
  }

  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:first-child
    > .col-inner
    > .row:last-child
    > .col:nth-child(2) {
    top: 72px;
    right: 10px;
  }

  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:first-child
    > .col-inner
    > .row:last-child
    > .col:nth-child(3) {
    bottom: 78px;
    left: 12px;
  }

  .kht-gioi-thieu
    > .section-content
    > .row.row-small
    > .col:first-child
    > .col-inner
    > .row:last-child
    > .col:nth-child(4) {
    bottom: 62px;
    right: 10px;
  }

  /* Thu card nhẹ để không tràn */
  .kht-gioi-thieu .kht-congthuc,
  .kht-gioi-thieu .kht-nhamay,
  .kht-gioi-thieu .kht-xuong,
  .kht-gioi-thieu .kht-doitac {
    min-height: 56px;
    padding: 6px 7px 6px;
  }

  /* Thu số trong card */
  .kht-gioi-thieu .kht-congthuc .kht-stat-number,
  .kht-gioi-thieu .kht-nhamay .kht-stat-number,
  .kht-gioi-thieu .kht-xuong .kht-stat-number,
  .kht-gioi-thieu .kht-doitac .kht-stat-number {
    font-size: 18px;
  }

  /* Thu label trong card */
  .kht-gioi-thieu .kht-congthuc .kht-stat-label,
  .kht-gioi-thieu .kht-nhamay .kht-stat-label,
  .kht-gioi-thieu .kht-xuong .kht-stat-label,
  .kht-gioi-thieu .kht-doitac .kht-stat-label {
    font-size: 8px;
  }
}

/* =========================================================
   ACCESSIBILITY - GIẢM CHUYỂN ĐỘNG
   ========================================================= */
   /* =========================================================
   MOBILE - THU NHỎ CARD TEXT TRÊN ẢNH DÂY CHUYỀN

   Chức năng:
   1. Thu nhỏ chiều rộng và chiều cao card.
   2. Thu nhỏ padding bên trong card.
   3. Thu nhỏ huy hiệu số 01 - 04.
   4. Thu nhỏ nội dung chữ.
   5. Giữ nguyên vị trí card đang đè trên ảnh.
   6. Không thay đổi ảnh và cấu trúc HTML.
   ========================================================= */

@media (max-width: 549px) {

  /* Thu nhỏ khung của bốn card nội dung trên ảnh */
  .kht-gioi-thieu .img1,
  .kht-gioi-thieu .img2,
  .kht-gioi-thieu .img3,
  .kht-gioi-thieu .img4 {
    left: 17px;

    width: min(240px, calc(100% - 78px));
    min-height: 62px;

    padding:
      10px
      14px
      10px
      46px;

    border-radius: 12px 4px 12px 4px;

    box-shadow:
      6px 6px 0 rgba(40, 203, 139, 0.055),
      0 10px 22px rgba(16, 62, 19, 0.12);
  }

  /* Thu nhỏ huy hiệu thứ tự 01 - 04 */
  .kht-gioi-thieu .img1::before,
  .kht-gioi-thieu .img2::before,
  .kht-gioi-thieu .img3::before,
  .kht-gioi-thieu .img4::before {
    left: -14px;

    width: 34px;
    height: 34px;

    border-width: 2px;
    border-radius: 10px 4px 10px 4px;

    font-size: 9.5px;

    box-shadow:
      0 7px 16px rgba(16, 62, 19, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.26);
  }

  /* Thu gọn đường nhấn màu xanh dưới card */
  .kht-gioi-thieu .img1::after,
  .kht-gioi-thieu .img2::after,
  .kht-gioi-thieu .img3::after,
  .kht-gioi-thieu .img4::after {
    right: 16px;
    left: 46px;

    height: 2px;
  }

  /* Thu nhỏ nội dung chữ trong bốn card */
  .kht-gioi-thieu .img1 p,
  .kht-gioi-thieu .img2 p,
  .kht-gioi-thieu .img3 p,
  .kht-gioi-thieu .img4 p {
    font-size: 10.8px;
    font-weight: 720;
    line-height: 1.35;
    letter-spacing: -0.006em;
  }

  /* Giữ nguyên vị trí card khi chạm trên mobile */
  .kht-gioi-thieu .img1:hover,
  .kht-gioi-thieu .img2:hover,
  .kht-gioi-thieu .img3:hover,
  .kht-gioi-thieu .img4:hover {
    transform: none;
  }

  /* Giữ huy hiệu số đứng yên khi chạm */
  .kht-gioi-thieu .img1:hover::before,
  .kht-gioi-thieu .img2:hover::before,
  .kht-gioi-thieu .img3:hover::before,
  .kht-gioi-thieu .img4:hover::before {
    transform: translateY(-50%);
  }
}


/* =========================================================
   MOBILE NHỎ TỪ 379PX TRỞ XUỐNG
   Thu thêm card để tránh chiếm nhiều diện tích ảnh
   ========================================================= */

@media (max-width: 379px) {

  /* Thu chiều rộng và chiều cao card thêm một cấp */
  .kht-gioi-thieu .img1,
  .kht-gioi-thieu .img2,
  .kht-gioi-thieu .img3,
  .kht-gioi-thieu .img4 {
    width: min(220px, calc(100% - 72px));
    min-height: 58px;

    padding:
      9px
      12px
      9px
      42px;
  }

  /* Thu huy hiệu số trên màn hình nhỏ */
  .kht-gioi-thieu .img1::before,
  .kht-gioi-thieu .img2::before,
  .kht-gioi-thieu .img3::before,
  .kht-gioi-thieu .img4::before {
    left: -13px;

    width: 31px;
    height: 31px;

    font-size: 9px;
  }

  /* Đồng bộ đường nhấn với padding mới */
  .kht-gioi-thieu .img1::after,
  .kht-gioi-thieu .img2::after,
  .kht-gioi-thieu .img3::after,
  .kht-gioi-thieu .img4::after {
    right: 14px;
    left: 42px;
  }

  /* Thu chữ thêm trên mobile nhỏ */
  .kht-gioi-thieu .img1 p,
  .kht-gioi-thieu .img2 p,
  .kht-gioi-thieu .img3 p,
  .kht-gioi-thieu .img4 p {
    font-size: 10px;
    line-height: 1.32;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kht-gioi-thieu *,
  .kht-gioi-thieu *::before,
  .kht-gioi-thieu *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}







/* =========================================================
   SECTION SO SÁNH TRƯỚC – SAU
   Phong cách: Editorial Comparison
   ========================================================= */

.kht-truoc-sau {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(67, 160, 70, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(67, 160, 70, 0.035) 1px,
            transparent 1px
        ),
        #f8fbf8;
    background-size: 42px 42px;
}

/* Mảng màu trang trí nền */
.kht-truoc-sau::before {
    content: "";
    position: absolute;
    top: -220px;
    right: -180px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: rgba(200, 230, 201, 0.38);
    filter: blur(2px);
    pointer-events: none;
}

/* Nội dung section */
.kht-truoc-sau > .section-content {
    position: relative;
    z-index: 2;
    width: min(100%, 1240px);
    margin: 0 auto;
    padding: clamp(28px, 5vw, 68px) clamp(15px, 3vw, 30px);
}

/* Loại bỏ chiều rộng mặc định của row Flatsome */
.kht-truoc-sau > .section-content > .row {
    max-width: 100%;
}

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

.kht-truoc-sau-text {
    position: relative;
    max-width: 760px;
    margin: 0 0 clamp(26px, 3.5vw, 42px);
    padding-left: 24px;
    text-align: left;
}

/* Đường màu thương hiệu cạnh tiêu đề */
.kht-truoc-sau-text::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 5px;
    border-radius: 20px;
    background: linear-gradient(
        180deg,
        #43a046,
        #1b5e1f
    );
}

.kht-truoc-sau-text p {
    margin: 0;
    color: #263238;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.035em;
    text-wrap: balance;
    text-transform: uppercase;
}

/* =========================================================
   KHUNG SO SÁNH
   Được JavaScript tự động tạo
   ========================================================= */

.kht-compare-stage {
    --kht-position: 50%;

    position: relative;
    width: min(100%, 1160px);
    aspect-ratio: 1672 / 941;
    margin: 0 auto 18px;
    overflow: hidden;
    border: 1px solid rgba(38, 50, 56, 0.12);
    border-radius: 6px 38px 6px 38px;
    background: #e8f5e9;
    box-shadow:
        18px 18px 0 rgba(67, 160, 70, 0.12),
        0 28px 65px rgba(38, 50, 56, 0.15);
    cursor: ew-resize;
    touch-action: pan-y;
    user-select: none;
    isolation: isolate;
    outline: none;
}

/* Viền focus khi dùng bàn phím */
.kht-compare-stage:focus-visible {
    box-shadow:
        18px 18px 0 rgba(67, 160, 70, 0.14),
        0 0 0 4px rgba(67, 160, 70, 0.2),
        0 28px 65px rgba(38, 50, 56, 0.15);
}

/* Lớp phủ chiều sâu phía dưới */
.kht-compare-stage::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    height: 20%;
    background: linear-gradient(
        to top,
        rgba(16, 62, 19, 0.13),
        transparent
    );
    pointer-events: none;
}

/* Hai row ảnh chồng lên nhau */
.kht-compare-stage > .row {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Ảnh trước nằm phía dưới */
.kht-compare-before {
    z-index: 1;
}

/* Ảnh sau nằm phía trên */
.kht-compare-stage > .kht-sau {
    z-index: 2;
    clip-path: inset(
        0
        0
        0
        var(--kht-position)
    );
    will-change: clip-path;
}

/* Reset column của Flatsome */
.kht-compare-stage > .row > .col {
    width: 100%;
    max-width: 100%;
    flex-basis: 100%;
    height: 100%;
    padding: 0;
}

/* Đồng bộ toàn bộ lớp bọc ảnh */
.kht-compare-stage .col-inner,
.kht-compare-stage .img,
.kht-compare-stage .img-inner {
    width: 100%;
    height: 100%;
    margin: 0;
}

/* Giữ ảnh đúng tỉ lệ, không biến dạng */
.kht-compare-stage img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center;
    user-select: none;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* =========================================================
   VẠCH KÉO
   ========================================================= */

.kht-compare-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--kht-position);
    z-index: 8;
    width: 2px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 0 0 1px rgba(38, 50, 56, 0.15),
        0 0 18px rgba(16, 62, 19, 0.25);
    transform: translateX(-50%);
    pointer-events: none;
    will-change: left;
}

/* Tay nắm vạch kéo */
.kht-compare-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: center;
    width: 68px;
    height: 46px;
    overflow: hidden;
    border: 3px solid #ffffff;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #43a046,
        #237d31
    );
    box-shadow:
        0 12px 28px rgba(16, 62, 19, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: translate(-50%, -50%);
}

/* Đường chia giữa hai mũi tên */
.kht-compare-handle-line {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.35);
}

/* Mũi tên hai bên */
.kht-compare-arrow {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.kht-compare-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
}

.kht-compare-arrow-left::before {
    left: 12px;
    transform: translateY(-50%) rotate(-45deg);
}

.kht-compare-arrow-right::before {
    right: 12px;
    transform: translateY(-50%) rotate(135deg);
}

/* =========================================================
   NHÃN TRƯỚC – SAU
   ========================================================= */

.kht-compare-label {
    position: absolute;
    bottom: 18px;
    z-index: 9;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 15px;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 8px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(38, 50, 56, 0.72);
    box-shadow: 0 8px 20px rgba(38, 50, 56, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
}

.kht-compare-label-before {
    left: 18px;
}

.kht-compare-label-after {
    right: 18px;
    background: rgba(35, 125, 49, 0.84);
}

/* =========================================================
   HƯỚNG DẪN KÉO
   ========================================================= */

.kht-compare-help {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: max-content;
    max-width: 100%;
    margin: 32px auto 0;
    padding: 9px 16px;
    border: 1px solid rgba(67, 160, 70, 0.18);
    border-radius: 999px;
    color: #4d4d4d;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 8px 22px rgba(38, 50, 56, 0.07);
}

/* Icon kéo ngang */
.kht-compare-help-icon {
    position: relative;
    display: block;
    width: 28px;
    height: 18px;
}

.kht-compare-help-icon::before {
    content: "↔";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2e7d31;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

/* =========================================================
   TRẠNG THÁI ĐANG KÉO
   ========================================================= */

.kht-compare-stage.is-dragging {
    cursor: grabbing;
}

.kht-compare-stage.is-dragging .kht-compare-handle {
    background: linear-gradient(
        135deg,
        #2e7d31,
        #103e13
    );
    box-shadow:
        0 15px 34px rgba(16, 62, 19, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: translate(-50%, -50%) scale(1.06);
}

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

@media screen and (max-width: 849px) {
    .kht-truoc-sau > .section-content {
        padding: 36px 18px 44px;
    }

    .kht-truoc-sau-text {
        margin-bottom: 28px;
    }

    .kht-compare-stage {
        border-radius: 5px 28px 5px 28px;
        box-shadow:
            12px 12px 0 rgba(67, 160, 70, 0.11),
            0 20px 46px rgba(38, 50, 56, 0.14);
    }

    .kht-compare-help {
        margin-top: 26px;
    }
}

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

@media screen and (max-width: 549px) {
    .kht-truoc-sau > .section-content {
        padding: 28px 12px 34px;
    }

    .kht-truoc-sau-text {
        margin-bottom: 22px;
        padding-left: 17px;
    }

    .kht-truoc-sau-text::before {
        width: 4px;
    }

    .kht-truoc-sau-text p {
        font-size: clamp(25px, 7vw, 31px);
        line-height: 1.2;
        letter-spacing: -0.025em;
    }

    .kht-compare-stage {
        aspect-ratio: 4 / 3;
        margin-bottom: 12px;
        border-radius: 4px 22px 4px 22px;
        box-shadow:
            8px 8px 0 rgba(67, 160, 70, 0.11),
            0 16px 34px rgba(38, 50, 56, 0.14);
    }

    .kht-compare-handle {
        width: 58px;
        height: 42px;
        border-radius: 12px;
    }

    .kht-compare-arrow-left::before {
        left: 10px;
    }

    .kht-compare-arrow-right::before {
        right: 10px;
    }

    .kht-compare-label {
        bottom: 10px;
        min-height: 29px;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 10px;
    }

    .kht-compare-label-before {
        left: 10px;
    }

    .kht-compare-label-after {
        right: 10px;
    }

    .kht-compare-help {
        gap: 6px;
        margin-top: 22px;
        padding: 8px 13px;
        font-size: 11px;
        text-align: center;
    }

    .kht-compare-help-icon {
        width: 24px;
    }
}

/* Người dùng chọn giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
    .kht-compare-stage {
        --kht-position: 50%;
    }
}










/* =========================================================
   KEHETO - DANH MỤC SẢN PHẨM GIA CÔNG
   PHONG CÁCH: PRODUCT CATALOGUE GRID

   Desktop: 6 sản phẩm trên 1 hàng
   Tablet: 3 sản phẩm trên 1 hàng
   Mobile: 2 sản phẩm trên 1 hàng

   Tên sản phẩm nằm dưới ảnh
   Chiều rộng nội dung tối đa: 1320px
   Hover sử dụng đúng màu Primary KEHETO #42A54D
   Nội dung hover sử dụng màu trắng
   Không hiển thị số thứ tự
   Không sử dụng !important
   ========================================================= */


/* =========================================================
   1. BIẾN MÀU THƯƠNG HIỆU KEHETO
   ========================================================= */

.kht-danh-muc-gia-cong {
	/* Màu Primary chính xác theo bảng màu KEHETO */
	--kht-dmgc-primary: #42a54d;

	/* Các sắc độ đậm dùng cho gradient và trạng thái hover */
	--kht-dmgc-primary-shade-1: #43a046;
	--kht-dmgc-primary-shade-2: #3b8e3b;
	--kht-dmgc-primary-shade-3: #237d31;
	--kht-dmgc-primary-shade-4: #1b5e1f;
	--kht-dmgc-primary-shade-5: #103e13;

	/* Các sắc độ sáng dùng cho nền và chi tiết */
	--kht-dmgc-primary-tint-1: #66bb69;
	--kht-dmgc-primary-tint-2: #81c784;
	--kht-dmgc-primary-tint-3: #a5d6a7;
	--kht-dmgc-primary-tint-4: #c8e6c9;
	--kht-dmgc-primary-tint-5: #e8f5e9;

	/* Hệ màu trung tính của KEHETO */
	--kht-dmgc-secondary: #263238;
	--kht-dmgc-dark-grey: #4d4d4d;
	--kht-dmgc-grey: #717171;
	--kht-dmgc-light-grey: #89939e;
	--kht-dmgc-grey-blue: #abbed1;
	--kht-dmgc-silver: #f5f7fa;
	--kht-dmgc-white: #ffffff;

	/* Màu viền và bóng đổ */
	--kht-dmgc-border: rgba(38, 50, 56, 0.11);
	--kht-dmgc-shadow: 0 12px 30px rgba(38, 50, 56, 0.09);
	--kht-dmgc-shadow-hover: 0 20px 44px rgba(38, 50, 56, 0.16);

	position: relative;
	overflow: hidden;
	padding: 0;

	background: var(--kht-dmgc-silver);
}


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


/* =========================================================
   2. NỀN SECTION
   ========================================================= */

/* Tạo nền sáng và sạch cho toàn bộ section */
.kht-danh-muc-gia-cong .section-bg {
	background:
		linear-gradient(
			180deg,
			#ffffff 0%,
			var(--kht-dmgc-silver) 100%
		);
}


/* Tạo vùng màu xanh KEHETO phía trên bên phải */
.kht-danh-muc-gia-cong .section-bg::before {
	content: "";
	position: absolute;
	top: -270px;
	right: -210px;

	width: 560px;
	height: 560px;
	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(66, 165, 77, 0.16) 0%,
			rgba(66, 165, 77, 0) 70%
		);
}


/* Tạo vùng xanh nhạt phía dưới bên trái */
.kht-danh-muc-gia-cong .section-bg::after {
	content: "";
	position: absolute;
	bottom: -220px;
	left: -180px;

	width: 430px;
	height: 430px;
	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(66, 165, 77, 0.09) 0%,
			rgba(66, 165, 77, 0) 72%
		);
}


/* =========================================================
   3. KHUNG NỘI DUNG 1320PX
   ========================================================= */

/*
 * Giới hạn chiều rộng nội dung ở mức 1320px.
 * Desktop lớn không có khoảng cách trái và phải.
 */
.kht-danh-muc-gia-cong > .section-content {
	position: relative;
	z-index: 2;

	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: 42px 0 52px;
}


/* =========================================================
   4. KHU VỰC TIÊU ĐỀ
   ========================================================= */

.kht-danh-muc-gia-cong .kht-dmgc-text {
	width: 100%;
	max-width: 100%;
	margin: 0 0 28px;
	padding: 0;
}


/* Xóa padding mặc định của cột Flatsome */
.kht-danh-muc-gia-cong .kht-dmgc-text > .col {
	width: 100%;
	max-width: 100%;
	flex-basis: 100%;
	padding: 0;
}


/* Xóa padding bên trong cột tiêu đề */
.kht-danh-muc-gia-cong .kht-dmgc-text .col-inner {
	width: 100%;
	padding: 0;
}


/* Thiết kế tiêu đề chính */
.kht-danh-muc-gia-cong .kht-dmgc-text h2 {
	position: relative;

	display: block;
	width: fit-content;
	max-width: 100%;
	margin: 0;
	padding: 0 0 14px;

	color: var(--kht-dmgc-secondary);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;

	text-align: left;
	text-transform: uppercase;
}


/* Tạo đường màu chính KEHETO dưới tiêu đề */
.kht-danh-muc-gia-cong .kht-dmgc-text h2::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;

	width: 62px;
	height: 3px;
	border-radius: 999px;

	background:
		linear-gradient(
			90deg,
			var(--kht-dmgc-primary-shade-4),
			var(--kht-dmgc-primary)
		);
}


/* Tạo các chấm xanh cuối đường tiêu đề */
.kht-danh-muc-gia-cong .kht-dmgc-text h2::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 70px;

	width: 3px;
	height: 3px;
	border-radius: 50%;

	background: rgba(66, 165, 77, 0.72);

	box-shadow:
		8px 0 0 rgba(66, 165, 77, 0.42),
		16px 0 0 rgba(66, 165, 77, 0.2);
}


/* =========================================================
   5. GRID DANH MỤC
   Desktop hiển thị đủ 6 sản phẩm trên một hàng
   ========================================================= */

.kht-danh-muc-gia-cong .kht-dmgc-sp {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	align-items: stretch;
	gap: 12px;

	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}


/* Chuyển cột Flatsome thành phần tử grid */
.kht-danh-muc-gia-cong .kht-dmgc-sp > .col {
	width: auto;
	min-width: 0;
	max-width: none;
	flex-basis: auto;
	padding: 0;
}


/* Cho col-inner phủ toàn bộ chiều cao card */
.kht-danh-muc-gia-cong .kht-dmgc-sp > .col > .col-inner {
	width: 100%;
	height: 100%;
	padding: 0;
}


/* =========================================================
   6. CARD SẢN PHẨM
   Ảnh phía trên, tên sản phẩm phía dưới
   ========================================================= */

.kht-danh-muc-gia-cong .kht-dmgc-sp .box {
	position: relative;
	isolation: isolate;

	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: minmax(0, 1fr) 66px;

	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;

	border: 1px solid var(--kht-dmgc-border);
	border-radius: 16px;
	background: var(--kht-dmgc-white);

	box-shadow: var(--kht-dmgc-shadow);

	transform: translateY(0);

	transition:
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.35s ease,
		box-shadow 0.35s ease;
}


/* Tạo đường màu xanh phía dưới card */
.kht-danh-muc-gia-cong .kht-dmgc-sp .box::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 8;

	height: 4px;

	background:
		linear-gradient(
			90deg,
			var(--kht-dmgc-primary-shade-4),
			var(--kht-dmgc-primary)
		);

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

	transition:
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Tạo nút mũi tên trong khu vực tên */
.kht-danh-muc-gia-cong .kht-dmgc-sp .box::after {
	content: "↗";
	position: absolute;
	right: 13px;
	bottom: 18px;
	z-index: 8;

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

	width: 29px;
	height: 29px;

	border: 1px solid rgba(38, 50, 56, 0.13);
	border-radius: 50%;
	background: var(--kht-dmgc-white);

	color: var(--kht-dmgc-primary-shade-3);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;

	box-shadow:
		0 5px 14px rgba(38, 50, 56, 0.08);

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


/* =========================================================
   7. KHU VỰC HÌNH ẢNH
   ========================================================= */

.kht-danh-muc-gia-cong .kht-dmgc-sp .box-image {
	position: relative;
	grid-column: 1;
	grid-row: 1;

	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	overflow: hidden;

	background: var(--kht-dmgc-primary-tint-5);
}


/* Cho phần tử con của ảnh phủ toàn bộ khu vực */
.kht-danh-muc-gia-cong .kht-dmgc-sp .box-image > div {
	width: 100%;
	height: 100%;
}


/* Hiển thị ảnh đúng tỷ lệ và không bị méo */
.kht-danh-muc-gia-cong .kht-dmgc-sp .box-image img {
	display: block;

	width: 100%;
	height: 100%;

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

	transform: scale(1.001);

	filter:
		saturate(0.95)
		contrast(1.02);

	transition:
		transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
		filter 0.4s ease;
}


/* Tạo lớp phủ xanh nhẹ phía dưới ảnh */
.kht-danh-muc-gia-cong .kht-dmgc-sp .box-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;

	pointer-events: none;

	background:
		linear-gradient(
			180deg,
			rgba(27, 94, 31, 0) 40%,
			rgba(27, 94, 31, 0.04) 68%,
			rgba(27, 94, 31, 0.2) 100%
		);
}


/* Tạo viền sáng mảnh bên trong ảnh */
.kht-danh-muc-gia-cong .kht-dmgc-sp .box-image::before {
	content: "";
	position: absolute;
	inset: 7px;
	z-index: 3;

	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 10px;

	pointer-events: none;
}


/* =========================================================
   8. TÊN SẢN PHẨM NẰM DƯỚI ẢNH
   ========================================================= */

.kht-danh-muc-gia-cong .kht-dmgc-sp .box-text {
	position: relative;
	grid-column: 1;
	grid-row: 2;
	z-index: 5;

	display: flex;
	align-items: stretch;

	width: 100%;
	height: 100%;
	padding: 0;

	border-top: 1px solid rgba(38, 50, 56, 0.08);

	background:
		linear-gradient(
			135deg,
			#ffffff 0%,
			var(--kht-dmgc-primary-tint-5) 100%
		);

	transition:
		background 0.35s ease,
		border-color 0.35s ease;
}


/* Căn nội dung tên sản phẩm */
.kht-danh-muc-gia-cong .kht-dmgc-sp .box-text-inner {
	position: relative;

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

	width: 100%;
	height: 100%;
	min-height: 66px;
	padding: 13px 50px 13px 15px;

	text-align: left;
}


/* Tạo vạch màu chính trước tên sản phẩm */
.kht-danh-muc-gia-cong .kht-dmgc-sp .box-text-inner::before {
	content: "";

	width: 3px;
	height: 24px;
	margin-right: 10px;
	flex: 0 0 auto;

	border-radius: 999px;
	background: var(--kht-dmgc-primary);

	transition:
		height 0.35s ease,
		background-color 0.35s ease,
		box-shadow 0.35s ease;
}


/* Thiết kế tên sản phẩm */
.kht-danh-muc-gia-cong .kht-dmgc-sp .box-text p {
	margin: 0;

	color: var(--kht-dmgc-secondary);
	font-size: clamp(14px, 1.25vw, 17px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;

	text-align: left;

	transition:
		color 0.3s ease,
		transform 0.3s ease,
		letter-spacing 0.3s ease;
}


/* Đồng bộ thẻ span trong mục Makeup */
.kht-danh-muc-gia-cong .kht-dmgc-sp .box-text p span {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
}


/* =========================================================
   9. HIỆU ỨNG HOVER DESKTOP
   Sử dụng đúng màu chính KEHETO
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

	/* Nâng card và đổi viền sang màu Primary */
	.kht-danh-muc-gia-cong .kht-dmgc-sp .box:hover {
		border-color: rgba(66, 165, 77, 0.62);

		box-shadow:
			0 20px 44px rgba(38, 50, 56, 0.16),
			0 0 0 1px rgba(66, 165, 77, 0.1);

		transform: translateY(-7px);
	}


	/* Hiển thị đường màu phía dưới card */
	.kht-danh-muc-gia-cong .kht-dmgc-sp .box:hover::before {
		transform: scaleX(1);
	}


	/* Phóng nhẹ hình ảnh khi hover */
	.kht-danh-muc-gia-cong .kht-dmgc-sp .box:hover .box-image img {
		filter:
			saturate(1.08)
			contrast(1.03);

		transform: scale(1.065);
	}


	/* Đổi khu vực tên sang đúng màu Primary KEHETO */
	.kht-danh-muc-gia-cong .kht-dmgc-sp .box:hover .box-text {
		border-top-color: rgba(255, 255, 255, 0.5);

		background:
			linear-gradient(
				135deg,
				var(--kht-dmgc-primary) 0%,
				var(--kht-dmgc-primary-shade-2) 100%
			);
	}


	/* Đổi tên sản phẩm thành màu trắng khi hover */
	.kht-danh-muc-gia-cong
		.kht-dmgc-sp
		.box:hover
		.box-text p {
		color: var(--kht-dmgc-white);
		letter-spacing: 0;
		transform: translateX(2px);
	}


	/* Đổi vạch đứng sang màu trắng khi hover */
	.kht-danh-muc-gia-cong
		.kht-dmgc-sp
		.box:hover
		.box-text-inner::before {
		height: 32px;
		background: var(--kht-dmgc-white);

		box-shadow:
			0 0 0 4px rgba(255, 255, 255, 0.16);
	}


	/* Đổi nút mũi tên thành nền trắng */
	.kht-danh-muc-gia-cong .kht-dmgc-sp .box:hover::after {
		border-color: var(--kht-dmgc-white);
		background: var(--kht-dmgc-white);
		color: var(--kht-dmgc-primary-shade-3);

		box-shadow:
			0 8px 20px rgba(27, 94, 31, 0.24);

		transform: translate(3px, -3px);
	}
}


/* =========================================================
   10. ACCESSIBILITY
   ========================================================= */

/* Hiển thị focus rõ khi dùng bàn phím */
.kht-danh-muc-gia-cong .kht-dmgc-sp .box:focus-within {
	outline: 3px solid rgba(66, 165, 77, 0.42);
	outline-offset: 4px;
}


/* =========================================================
   11. VIEWPORT NHỎ HƠN 1320PX
   ========================================================= */

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

	/* Tạo khoảng an toàn khi màn hình không đủ rộng */
	.kht-danh-muc-gia-cong > .section-content {
		width: calc(100% - 24px);
	}
}


/* =========================================================
   12. LAPTOP NHỎ
   Vẫn giữ 6 sản phẩm trên một hàng
   ========================================================= */

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

	/* Giảm khoảng cách giữa các card */
	.kht-danh-muc-gia-cong .kht-dmgc-sp {
		gap: 8px;
	}


	/* Giảm chiều cao khu vực tên */
	.kht-danh-muc-gia-cong .kht-dmgc-sp .box {
		grid-template-rows: minmax(0, 1fr) 60px;
	}


	/* Giảm chiều cao phần tên */
	.kht-danh-muc-gia-cong .kht-dmgc-sp .box-text-inner {
		min-height: 60px;
		padding: 10px 39px 10px 10px;
	}


	/* Thu nhỏ tên sản phẩm */
	.kht-danh-muc-gia-cong .kht-dmgc-sp .box-text p {
		font-size: 13px;
	}


	/* Thu nhỏ vạch màu */
	.kht-danh-muc-gia-cong .kht-dmgc-sp .box-text-inner::before {
		width: 2px;
		height: 20px;
		margin-right: 7px;
	}


	/* Thu nhỏ nút mũi tên */
	.kht-danh-muc-gia-cong .kht-dmgc-sp .box::after {
		right: 9px;
		bottom: 17px;

		width: 25px;
		height: 25px;

		font-size: 11px;
	}
}


/* =========================================================
   13. TABLET
   Chuyển thành 3 sản phẩm trên một hàng
   ========================================================= */

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

	/* Chuyển grid thành ba cột */
	.kht-danh-muc-gia-cong .kht-dmgc-sp {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}


	/* Giảm kích thước tiêu đề tablet */
	.kht-danh-muc-gia-cong .kht-dmgc-text h2 {
		font-size: 34px;
	}


	/* Tăng nhẹ tên do card rộng hơn */
	.kht-danh-muc-gia-cong .kht-dmgc-sp .box-text p {
		font-size: 17px;
	}
}


/* =========================================================
   14. MOBILE
   Chuyển thành 2 sản phẩm trên một hàng
   ========================================================= */

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

	/* Điều chỉnh chiều rộng section mobile */
	.kht-danh-muc-gia-cong > .section-content {
		width: calc(100% - 24px);
		padding: 28px 0 34px;
	}


	/* Giảm khoảng cách dưới tiêu đề */
	.kht-danh-muc-gia-cong .kht-dmgc-text {
		margin-bottom: 22px;
	}


	/* Điều chỉnh tiêu đề mobile */
	.kht-danh-muc-gia-cong .kht-dmgc-text h2 {
		width: 100%;
		max-width: 100%;
		padding-bottom: 12px;

		font-size: 28px;
		line-height: 1.25;
	}


	/* Thu nhỏ đường màu dưới tiêu đề */
	.kht-danh-muc-gia-cong .kht-dmgc-text h2::before {
		width: 48px;
	}


	/* Căn lại các chấm trang trí */
	.kht-danh-muc-gia-cong .kht-dmgc-text h2::after {
		left: 56px;
	}


	/* Chuyển danh mục thành hai cột */
	.kht-danh-muc-gia-cong .kht-dmgc-sp {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}


	/* Điều chỉnh card mobile */
	.kht-danh-muc-gia-cong .kht-dmgc-sp .box {
		grid-template-rows: minmax(0, 1fr) 58px;

		border-radius: 13px;

		box-shadow:
			0 7px 20px rgba(38, 50, 56, 0.09);
	}


	/* Điều chỉnh tỷ lệ ảnh mobile */
	.kht-danh-muc-gia-cong .kht-dmgc-sp .box-image {
		aspect-ratio: 4 / 4.6;
	}


	/* Thu nhỏ viền trong ảnh */
	.kht-danh-muc-gia-cong .kht-dmgc-sp .box-image::before {
		inset: 5px;
		border-radius: 8px;
	}


	/* Điều chỉnh vùng tên mobile */
	.kht-danh-muc-gia-cong .kht-dmgc-sp .box-text-inner {
		min-height: 58px;
		padding: 10px 35px 10px 10px;
	}


	/* Thu nhỏ vạch trước tên */
	.kht-danh-muc-gia-cong .kht-dmgc-sp .box-text-inner::before {
		width: 2px;
		height: 20px;
		margin-right: 7px;
	}


	/* Điều chỉnh tên sản phẩm mobile */
	.kht-danh-muc-gia-cong .kht-dmgc-sp .box-text p {
		font-size: clamp(13px, 3.8vw, 16px);
	}


	/* Điều chỉnh nút mũi tên mobile */
	.kht-danh-muc-gia-cong .kht-dmgc-sp .box::after {
		right: 8px;
		bottom: 17px;

		width: 23px;
		height: 23px;

		font-size: 10px;
	}


	/* Luôn hiển thị đường màu nhẹ trên mobile */
	.kht-danh-muc-gia-cong .kht-dmgc-sp .box::before {
		height: 3px;
		opacity: 0.72;
		transform: scaleX(1);
	}
}


/* =========================================================
   15. MOBILE NHỎ
   Vẫn giữ 2 sản phẩm trên một hàng
   ========================================================= */

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

	/* Giảm khoảng cách an toàn hai bên */
	.kht-danh-muc-gia-cong > .section-content {
		width: calc(100% - 20px);
	}


	/* Giảm kích thước tiêu đề */
	.kht-danh-muc-gia-cong .kht-dmgc-text h2 {
		font-size: 25px;
	}


	/* Giảm khoảng cách giữa các card */
	.kht-danh-muc-gia-cong .kht-dmgc-sp {
		gap: 8px;
	}


	/* Giảm chiều cao khu vực tên */
	.kht-danh-muc-gia-cong .kht-dmgc-sp .box {
		grid-template-rows: minmax(0, 1fr) 54px;
	}


	/* Giảm padding tên sản phẩm */
	.kht-danh-muc-gia-cong .kht-dmgc-sp .box-text-inner {
		min-height: 54px;
		padding: 8px 31px 8px 8px;
	}


	/* Giảm kích thước tên sản phẩm */
	.kht-danh-muc-gia-cong .kht-dmgc-sp .box-text p {
		font-size: 13px;
	}


	/* Căn lại nút mũi tên */
	.kht-danh-muc-gia-cong .kht-dmgc-sp .box::after {
		right: 7px;
		bottom: 16px;

		width: 21px;
		height: 21px;
	}
}


/* =========================================================
   16. GIẢM CHUYỂN ĐỘNG
   Hỗ trợ accessibility theo cài đặt thiết bị
   ========================================================= */

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

	.kht-danh-muc-gia-cong *,
	.kht-danh-muc-gia-cong *::before,
	.kht-danh-muc-gia-cong *::after {
		transition-duration: 0.01ms;
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
	}
}











/* =========================================================
   KEHETO - SECTION NĂNG LỰC CỐT LÕI

   Desktop:
   - Khung bên trái và panel bên phải bằng chiều cao.
   - Ưu tiên giảm chiều cao sáu card bên trái.
   - Nội dung bên phải vẫn giữ tỷ lệ ảnh và text.

   Mobile:
   - Danh sách năng lực dạng lưới hai cột compact.
   - Panel chi tiết hiển thị đầy đủ bên dưới.
   - Không sử dụng !important.
========================================================= */


/* =========================================================
   1. BIẾN MÀU VÀ THIẾT LẬP CHUNG
========================================================= */

.kht-nang-luc-cot-loi {
    --kht-primary: #43a046;
    --kht-primary-medium: #2f8b38;
    --kht-primary-dark: #1b5e20;
    --kht-primary-deep: #103d15;

    --kht-green-50: #f3faf3;
    --kht-green-100: #e8f5e9;
    --kht-green-200: #c8e6c9;
    --kht-green-300: #a5d6a7;

    --kht-heading: #263238;
    --kht-text: #4f595e;
    --kht-muted: #819097;
    --kht-white: #ffffff;

    --kht-border: rgba(67, 160, 70, 0.16);

    --kht-panel-shadow:
        0 22px 58px rgba(35, 65, 42, 0.1);

    --kht-tab-shadow:
        0 7px 20px rgba(31, 73, 39, 0.065);

    --kht-active-shadow:
        0 14px 30px rgba(27, 94, 32, 0.19);

    /* Chiều cao chung của hai khối trên desktop */
    --kht-desktop-panel-height: 468px;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding-top: 54px;
    padding-bottom: 60px;

    background: #f8fbf8;
}


/* =========================================================
   2. NỀN SECTION
========================================================= */

/* Tạo nền sáng và có chiều sâu */
.kht-nang-luc-cot-loi .section-bg {
    background:
        radial-gradient(
            circle at 5% 5%,
            rgba(200, 230, 201, 0.62) 0,
            rgba(200, 230, 201, 0) 30%
        ),
        radial-gradient(
            circle at 94% 90%,
            rgba(165, 214, 167, 0.32) 0,
            rgba(165, 214, 167, 0) 31%
        ),
        linear-gradient(
            135deg,
            #f7fbf7 0%,
            #ffffff 50%,
            #f3f9f4 100%
        );
}

/* Tạo họa tiết lưới mờ phía sau */
.kht-nang-luc-cot-loi .section-bg::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.26;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(67, 160, 70, 0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(67, 160, 70, 0.04) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 15%,
            #000 85%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 15%,
            #000 85%,
            transparent
        );
}

/* Đưa nội dung lên trên lớp nền */
.kht-nang-luc-cot-loi .section-content {
    position: relative;
    z-index: 2;
}


/* =========================================================
   3. TIÊU ĐỀ CHÍNH
========================================================= */

.kht-nang-luc-cot-loi .kht-nlcl-text {
    width: calc(100% - 30px);
    max-width: 1320px;

    margin: 0 auto 34px;
}

/* Loại bỏ padding mặc định của Flatsome */
.kht-nang-luc-cot-loi .kht-nlcl-text > .col {
    padding: 0;
}

/* Tạo khoảng trống cho đường trang trí */
.kht-nang-luc-cot-loi .kht-nlcl-text .col-inner {
    position: relative;
    padding-bottom: 17px;
}

/* Tiêu đề chính desktop */
.kht-nang-luc-cot-loi .kht-nlcl-text p {
    position: relative;
    z-index: 1;

    display: inline-block;

    margin: 0;

    color: var(--kht-heading);

    font-size: 40px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.035em;
}

/* Đường xanh dưới tiêu đề */
.kht-nang-luc-cot-loi .kht-nlcl-text p::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -17px;

    width: 78px;
    height: 5px;

    border-radius: 99px;

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

    box-shadow:
        0 5px 15px rgba(67, 160, 70, 0.22);
}


/* =========================================================
   4. BỐ CỤC CHÍNH DESKTOP
========================================================= */

/*
 * Hai cột được kéo giãn bằng nhau theo chiều cao.
 * Cột trái vẫn nhỏ hơn cột phải về chiều rộng để giữ bố cục.
 */
.kht-nang-luc-cot-loi .kht-nlcl-text + .row {
    display: grid;

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

    gap: clamp(24px, 3vw, 42px);
    align-items: stretch;

    width: calc(100% - 30px);
    max-width: 1320px;

    margin: 0 auto;
}

/* Reset kích thước cột Flatsome */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col {
    width: 100%;
    max-width: none;
    flex-basis: auto;

    min-height: var(--kht-desktop-panel-height);

    padding: 0;
}


/* =========================================================
   5. KHUNG DANH SÁCH NĂNG LỰC DESKTOP
========================================================= */

/*
 * Sáu hàng được chia đều trong chiều cao 468px.
 * Card không còn chiều cao dư thừa.
 */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:first-child
> .col-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(6, minmax(0, 1fr));

    align-content: stretch;

    gap: 8px;

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

    padding: 12px;

    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 25px;

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

    box-shadow:
        0 20px 48px rgba(38, 50, 56, 0.08),
        inset 0 0 0 1px rgba(67, 160, 70, 0.05);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}


/* =========================================================
   6. CARD NĂNG LỰC DESKTOP
========================================================= */

/*
 * Card được giảm chiều cao và padding.
 * Icon và text luôn nằm trên cùng một hàng.
 */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:first-child
.icon-box {
    position: relative;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;

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

    margin: 0;
    padding: 7px 43px 7px 8px;

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

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

    box-shadow: var(--kht-tab-shadow);

    cursor: pointer;
    user-select: none;
    touch-action: manipulation;

    transform: translateX(0);

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

/* Hiệu ứng hover card desktop */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:first-child
.icon-box:hover {
    transform: translateX(4px);

    border-color: rgba(67, 160, 70, 0.4);

    box-shadow:
        0 12px 25px rgba(38, 50, 56, 0.095);
}

/* Focus khi dùng bàn phím */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:first-child
.icon-box:focus-visible {
    outline: 3px solid rgba(67, 160, 70, 0.25);
    outline-offset: 3px;
}

/* Mũi tên bên phải card */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:first-child
.icon-box::after {
    content: "";

    position: absolute;
    top: 50%;
    right: 18px;

    width: 8px;
    height: 8px;

    border-top: 2px solid var(--kht-muted);
    border-right: 2px solid var(--kht-muted);

    transform:
        translateY(-50%)
        rotate(45deg);

    transition:
        right 0.32s ease,
        border-color 0.32s ease;
}

/* Chuyển động mũi tên khi hover */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:first-child
.icon-box:hover::after {
    right: 15px;
    border-color: var(--kht-primary);
}


/* =========================================================
   7. ICON CARD DESKTOP
========================================================= */

/* Giảm vùng icon từ 60px xuống 48px */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:first-child
.icon-box .icon-box-img {
    display: block;

    flex: 0 0 48px;

    width: 48px;
    min-width: 48px;
    max-width: 48px;

    margin: 0 12px 0 0;
}

/* Khung nền icon compact */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:first-child
.icon-box .icon-inner {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    border: 1px solid rgba(67, 160, 70, 0.13);
    border-radius: 12px;

    background: var(--kht-green-100);

    overflow: hidden;

    transition:
        transform 0.32s ease,
        background-color 0.32s ease,
        border-color 0.32s ease;
}

/* Giảm kích thước ảnh icon */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:first-child
.icon-box .icon-inner img {
    display: block;

    width: 28px;
    height: 28px;

    object-fit: contain;

    transition:
        transform 0.32s ease,
        filter 0.32s ease;
}

/* Icon nghiêng nhẹ khi hover */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:first-child
.icon-box:hover .icon-inner {
    transform: rotate(-3deg);
}


/* =========================================================
   8. TEXT CARD DESKTOP
========================================================= */

/* Text sử dụng phần chiều rộng còn lại */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:first-child
.icon-box .icon-box-text {
    display: flex;
    flex: 1 1 0;
    align-items: center;

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

    padding: 0;
}

/* Giữ text bên phải icon */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:first-child
.icon-box .icon-box-text p {
    display: block;

    width: 100%;
    min-width: 0;

    margin: 0;

    color: var(--kht-heading);

    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;

    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;

    transition: color 0.32s ease;
}


/* =========================================================
   9. CARD ACTIVE
========================================================= */

/* Card đang được chọn */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:first-child
.icon-box.is-active {
    transform: translateX(6px);

    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            var(--kht-primary) 0%,
            var(--kht-primary-medium) 54%,
            var(--kht-primary-dark) 100%
        );

    box-shadow: var(--kht-active-shadow);
}

/* Vạch sáng cạnh trái card active */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:first-child
.icon-box.is-active::before {
    content: "";

    position: absolute;
    top: 14px;
    bottom: 14px;
    left: -1px;

    width: 4px;

    border-radius: 0 99px 99px 0;

    background: rgba(255, 255, 255, 0.92);
}

/* Mũi tên card active */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:first-child
.icon-box.is-active::after {
    right: 16px;
    border-color: var(--kht-white);
}

/* Nền icon card active */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:first-child
.icon-box.is-active .icon-inner {
    border-color: rgba(255, 255, 255, 0.74);

    background: var(--kht-white);

    box-shadow:
        0 7px 15px rgba(16, 62, 19, 0.16);
}

/* Text card active */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:first-child
.icon-box.is-active .icon-box-text p {
    color: var(--kht-white);
}


/* =========================================================
   10. KHUNG PANEL BÊN PHẢI
========================================================= */

/* Khung chứa panel bằng đúng chiều cao khung bên trái */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:last-child
> .col-inner {
    position: relative;

    width: 100%;
    height: var(--kht-desktop-panel-height);
    min-height: var(--kht-desktop-panel-height);
}

/* Mặc định ẩn toàn bộ panel */
.kht-nang-luc-cot-loi :is(
    .kht-nlcl1,
    .kht-nlcl2,
    .kht-nlcl3,
    .kht-nlcl4,
    .kht-nlcl5,
    .kht-nlcl6
) {
    position: relative;

    display: none;
    align-items: stretch;

    width: 100%;
    max-width: none;
    height: var(--kht-desktop-panel-height);
    min-height: var(--kht-desktop-panel-height);

    margin: 0;

    border: 1px solid rgba(67, 160, 70, 0.14);
    border-radius: 27px;

    background: var(--kht-white);

    box-shadow: var(--kht-panel-shadow);

    overflow: hidden;
    isolation: isolate;
}

/* Chỉ hiển thị panel đang active */
.kht-nang-luc-cot-loi :is(
    .kht-nlcl1,
    .kht-nlcl2,
    .kht-nlcl3,
    .kht-nlcl4,
    .kht-nlcl5,
    .kht-nlcl6
).is-active {
    display: flex;
}

/* Hiển thị panel đầu tiên trước khi JS khởi tạo */
.kht-nang-luc-cot-loi:not([data-kht-nlcl-ready])
.kht-nlcl1 {
    display: flex;
}

/* Vòng tròn trang trí trong panel */
.kht-nang-luc-cot-loi :is(
    .kht-nlcl1,
    .kht-nlcl2,
    .kht-nlcl3,
    .kht-nlcl4,
    .kht-nlcl5,
    .kht-nlcl6
)::after {
    content: "";

    position: absolute;
    z-index: 0;
    top: -110px;
    right: -110px;

    width: 245px;
    height: 245px;

    border: 48px solid rgba(200, 230, 201, 0.23);
    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   11. CỘT ẢNH VÀ CỘT TEXT
========================================================= */

/* Reset padding Flatsome */
.kht-nang-luc-cot-loi :is(
    .kht-nlcl1,
    .kht-nlcl2,
    .kht-nlcl3,
    .kht-nlcl4,
    .kht-nlcl5,
    .kht-nlcl6
) > .col {
    position: relative;
    z-index: 1;

    height: 100%;

    padding: 0;
}

/* Cột ảnh */
.kht-nang-luc-cot-loi :is(
    .kht-nlcl1,
    .kht-nlcl2,
    .kht-nlcl3,
    .kht-nlcl4,
    .kht-nlcl5,
    .kht-nlcl6
) > .col:first-child {
    flex: 0 0 55%;

    width: 55%;
    max-width: 55%;
}

/* Cột text */
.kht-nang-luc-cot-loi :is(
    .kht-nlcl1,
    .kht-nlcl2,
    .kht-nlcl3,
    .kht-nlcl4,
    .kht-nlcl5,
    .kht-nlcl6
) > .col:last-child {
    flex: 0 0 45%;

    width: 45%;
    max-width: 45%;
}


/* =========================================================
   12. ẢNH TRONG PANEL
========================================================= */

/* Cột ảnh bằng chiều cao panel */
.kht-nang-luc-cot-loi :is(
    .kht-nlcl1,
    .kht-nlcl2,
    .kht-nlcl3,
    .kht-nlcl4,
    .kht-nlcl5,
    .kht-nlcl6
) > .col:first-child > .col-inner {
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* Khung ảnh phủ toàn bộ cột */
.kht-nang-luc-cot-loi :is(
    .kht-nlcl1,
    .kht-nlcl2,
    .kht-nlcl3,
    .kht-nlcl4,
    .kht-nlcl5,
    .kht-nlcl6
) .img,
.kht-nang-luc-cot-loi :is(
    .kht-nlcl1,
    .kht-nlcl2,
    .kht-nlcl3,
    .kht-nlcl4,
    .kht-nlcl5,
    .kht-nlcl6
) .img-inner {
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* Ảnh hiển thị cover */
.kht-nang-luc-cot-loi :is(
    .kht-nlcl1,
    .kht-nlcl2,
    .kht-nlcl3,
    .kht-nlcl4,
    .kht-nlcl5,
    .kht-nlcl6
) .img-inner img {
    display: block;

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

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

    transform: scale(1);

    transition:
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Zoom nhẹ ảnh khi hover */
.kht-nang-luc-cot-loi :is(
    .kht-nlcl1,
    .kht-nlcl2,
    .kht-nlcl3,
    .kht-nlcl4,
    .kht-nlcl5,
    .kht-nlcl6
):hover .img-inner img {
    transform: scale(1.025);
}


/* =========================================================
   13. NỘI DUNG TEXT TRONG PANEL
========================================================= */

/* Căn giữa nội dung theo chiều dọc */
.kht-nang-luc-cot-loi :is(
    .kht-nlcl1,
    .kht-nlcl2,
    .kht-nlcl3,
    .kht-nlcl4,
    .kht-nlcl5,
    .kht-nlcl6
) > .col:last-child > .col-inner {
    position: relative;

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

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

    padding: clamp(31px, 3.5vw, 52px);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.99),
            rgba(247, 251, 247, 0.96)
        );
}

/* Tiêu đề panel */
.kht-nang-luc-cot-loi :is(
    .kht-nlcl1,
    .kht-nlcl2,
    .kht-nlcl3,
    .kht-nlcl4,
    .kht-nlcl5,
    .kht-nlcl6
) h3 {
    position: relative;

    margin: 0 0 18px;
    padding-top: 20px;

    color: var(--kht-heading);

    font-size: clamp(24px, 2vw, 32px);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -0.025em;
}

/* Đường xanh phía trên tiêu đề panel */
.kht-nang-luc-cot-loi :is(
    .kht-nlcl1,
    .kht-nlcl2,
    .kht-nlcl3,
    .kht-nlcl4,
    .kht-nlcl5,
    .kht-nlcl6
) h3::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 52px;
    height: 5px;

    border-radius: 99px;

    background:
        linear-gradient(
            90deg,
            var(--kht-primary),
            var(--kht-primary-dark)
        );
}

/* Đoạn mô tả panel */
.kht-nang-luc-cot-loi :is(
    .kht-nlcl1,
    .kht-nlcl2,
    .kht-nlcl3,
    .kht-nlcl4,
    .kht-nlcl5,
    .kht-nlcl6
) p {
    margin: 0;

    color: var(--kht-text);

    font-size: 15px;
    font-weight: 400;
    line-height: 1.72;

    text-align: justify;
}


/* =========================================================
   14. DESKTOP NHỎ VÀ TABLET NGANG
========================================================= */

@media screen and (min-width: 850px) and (max-width: 1199px) {

    /* Giảm chiều cao chung trên màn hình desktop nhỏ */
    .kht-nang-luc-cot-loi {
        --kht-desktop-panel-height: 438px;
    }

    /* Thu nhỏ cột menu bên trái */
    .kht-nang-luc-cot-loi .kht-nlcl-text + .row {
        grid-template-columns:
            minmax(280px, 310px)
            minmax(0, 1fr);

        gap: 22px;
    }

    /* Giảm padding khung danh sách */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    > .col-inner {
        gap: 7px;
        padding: 10px;
    }

    /* Giảm padding card */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box {
        padding-right: 38px;
    }

    /* Giảm icon trên desktop nhỏ */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box .icon-box-img {
        flex-basis: 44px;

        width: 44px;
        min-width: 44px;
        max-width: 44px;

        margin-right: 10px;
    }

    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box .icon-inner {
        width: 44px;
        height: 44px;
    }

    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box .icon-inner img {
        width: 25px;
        height: 25px;
    }

    /* Giảm text menu */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box .icon-box-text p {
        font-size: 13.5px;
    }

    /* Giảm padding nội dung bên phải */
    .kht-nang-luc-cot-loi :is(
        .kht-nlcl1,
        .kht-nlcl2,
        .kht-nlcl3,
        .kht-nlcl4,
        .kht-nlcl5,
        .kht-nlcl6
    ) > .col:last-child > .col-inner {
        padding: 29px;
    }

    /* Giảm tiêu đề panel */
    .kht-nang-luc-cot-loi :is(
        .kht-nlcl1,
        .kht-nlcl2,
        .kht-nlcl3,
        .kht-nlcl4,
        .kht-nlcl5,
        .kht-nlcl6
    ) h3 {
        font-size: 25px;
    }

    /* Giảm mô tả panel */
    .kht-nang-luc-cot-loi :is(
        .kht-nlcl1,
        .kht-nlcl2,
        .kht-nlcl3,
        .kht-nlcl4,
        .kht-nlcl5,
        .kht-nlcl6
    ) p {
        font-size: 14px;
        line-height: 1.66;
    }
}


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

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

    /* Reset chiều cao desktop */
    .kht-nang-luc-cot-loi {
        --kht-desktop-panel-height: auto;

        padding-top: 32px;
        padding-bottom: 38px;
    }

    /* Thu nhỏ khoảng cách dưới tiêu đề */
    .kht-nang-luc-cot-loi .kht-nlcl-text {
        margin-bottom: 22px;
    }

    /* Tiêu đề chính trên tablet */
    .kht-nang-luc-cot-loi .kht-nlcl-text p {
        font-size: 30px;
        line-height: 1.2;
        letter-spacing: -0.025em;
    }

    /* Chuyển bố cục thành một cột */
    .kht-nang-luc-cot-loi .kht-nlcl-text + .row {
        display: block;
    }

    /* Reset chiều cao cột */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col {
        min-height: 0;
    }

    /* Khoảng cách giữa danh sách và panel */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child {
        margin-bottom: 15px;
    }

    /* Danh sách năng lực dạng lưới hai cột */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    > .col-inner {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        align-items: stretch;

        gap: 7px;

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

        padding: 7px;

        border-radius: 18px;

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

        box-shadow:
            0 12px 30px rgba(38, 50, 56, 0.06),
            inset 0 0 0 1px rgba(67, 160, 70, 0.05);

        overflow: visible;
    }

    /* Card mobile dạng ngang compact */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box {
        position: relative;

        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;

        width: 100%;
        min-width: 0;
        min-height: 68px;
        height: auto;

        margin: 0;
        padding: 7px 9px;

        border: 1px solid rgba(67, 160, 70, 0.14);
        border-radius: 13px;

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

        box-shadow:
            0 4px 12px rgba(38, 50, 56, 0.04);

        transform: none;

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

    /* Tắt hiệu ứng dịch card trên thiết bị cảm ứng */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box:hover,
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box.is-active {
        transform: none;
    }

    /* Ẩn mũi tên mobile */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box::after {
        display: none;
    }

    /* Ẩn vạch active desktop */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box.is-active::before {
        display: none;
    }

    /* Vùng icon mobile */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box .icon-box-img {
        display: block;

        flex: 0 0 39px;

        width: 39px;
        min-width: 39px;
        max-width: 39px;

        margin: 0 8px 0 0;
    }

    /* Khung icon mobile */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box .icon-inner {
        display: grid;
        place-items: center;

        width: 39px;
        height: 39px;

        border-radius: 10px;

        background: var(--kht-green-100);
    }

    /* Ảnh icon mobile */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box .icon-inner img {
        width: 23px;
        height: 23px;

        object-fit: contain;
    }

    /* Text card mobile */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box .icon-box-text {
        display: flex;
        flex: 1 1 0;
        align-items: center;

        width: auto;
        min-width: 0;

        padding: 0;
    }

    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box .icon-box-text p {
        display: block;

        width: 100%;
        min-width: 0;

        margin: 0;

        font-size: 12px;
        font-weight: 700;
        line-height: 1.32;
        letter-spacing: -0.01em;
        text-align: left;

        white-space: normal;
        overflow-wrap: break-word;
    }

    /* Card active mobile */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box.is-active {
        border-color: transparent;

        background:
            linear-gradient(
                135deg,
                var(--kht-primary) 0%,
                var(--kht-primary-medium) 58%,
                var(--kht-primary-dark) 100%
            );

        box-shadow:
            0 9px 22px rgba(27, 94, 32, 0.18);
    }

    /* Icon active mobile */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box.is-active .icon-inner {
        border-color: rgba(255, 255, 255, 0.72);

        background: var(--kht-white);

        box-shadow:
            0 5px 12px rgba(16, 62, 19, 0.14);
    }

    /* Text active mobile */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box.is-active .icon-box-text p {
        color: var(--kht-white);
    }

    /* Reset khung chứa panel mobile */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:last-child
    > .col-inner {
        height: auto;
        min-height: 0;
    }

    /* Panel active hiển thị dưới danh sách */
    .kht-nang-luc-cot-loi :is(
        .kht-nlcl1,
        .kht-nlcl2,
        .kht-nlcl3,
        .kht-nlcl4,
        .kht-nlcl5,
        .kht-nlcl6
    ).is-active,
    .kht-nang-luc-cot-loi:not([data-kht-nlcl-ready])
    .kht-nlcl1 {
        display: block;
    }

    /* Reset panel mobile */
    .kht-nang-luc-cot-loi :is(
        .kht-nlcl1,
        .kht-nlcl2,
        .kht-nlcl3,
        .kht-nlcl4,
        .kht-nlcl5,
        .kht-nlcl6
    ) {
        height: auto;
        min-height: 0;

        border-radius: 20px;

        box-shadow:
            0 14px 34px rgba(32, 63, 38, 0.09);
    }

    /* Ẩn vòng trang trí trên mobile */
    .kht-nang-luc-cot-loi :is(
        .kht-nlcl1,
        .kht-nlcl2,
        .kht-nlcl3,
        .kht-nlcl4,
        .kht-nlcl5,
        .kht-nlcl6
    )::after {
        display: none;
    }

    /* Chuyển hai cột panel thành một cột */
    .kht-nang-luc-cot-loi :is(
        .kht-nlcl1,
        .kht-nlcl2,
        .kht-nlcl3,
        .kht-nlcl4,
        .kht-nlcl5,
        .kht-nlcl6
    ) > .col:first-child,
    .kht-nang-luc-cot-loi :is(
        .kht-nlcl1,
        .kht-nlcl2,
        .kht-nlcl3,
        .kht-nlcl4,
        .kht-nlcl5,
        .kht-nlcl6
    ) > .col:last-child {
        width: 100%;
        max-width: 100%;
        height: auto;
        flex-basis: 100%;
    }

    /* Reset cột ảnh */
    .kht-nang-luc-cot-loi :is(
        .kht-nlcl1,
        .kht-nlcl2,
        .kht-nlcl3,
        .kht-nlcl4,
        .kht-nlcl5,
        .kht-nlcl6
    ) > .col:first-child > .col-inner {
        width: 100%;
        height: auto;
        min-height: 0;
    }

    /* Khung ảnh mobile */
    .kht-nang-luc-cot-loi :is(
        .kht-nlcl1,
        .kht-nlcl2,
        .kht-nlcl3,
        .kht-nlcl4,
        .kht-nlcl5,
        .kht-nlcl6
    ) .img,
    .kht-nang-luc-cot-loi :is(
        .kht-nlcl1,
        .kht-nlcl2,
        .kht-nlcl3,
        .kht-nlcl4,
        .kht-nlcl5,
        .kht-nlcl6
    ) .img-inner {
        width: 100%;
        height: auto;
        min-height: 0;

        aspect-ratio: 16 / 9;
    }

    /* Ảnh panel mobile */
    .kht-nang-luc-cot-loi :is(
        .kht-nlcl1,
        .kht-nlcl2,
        .kht-nlcl3,
        .kht-nlcl4,
        .kht-nlcl5,
        .kht-nlcl6
    ) .img-inner img {
        width: 100%;
        height: 100%;
        min-height: 0;

        aspect-ratio: 16 / 9;

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

    /* Nội dung panel mobile */
    .kht-nang-luc-cot-loi :is(
        .kht-nlcl1,
        .kht-nlcl2,
        .kht-nlcl3,
        .kht-nlcl4,
        .kht-nlcl5,
        .kht-nlcl6
    ) > .col:last-child > .col-inner {
        display: block;

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

        padding: 21px 18px 23px;
    }

    /* Tiêu đề panel mobile */
    .kht-nang-luc-cot-loi :is(
        .kht-nlcl1,
        .kht-nlcl2,
        .kht-nlcl3,
        .kht-nlcl4,
        .kht-nlcl5,
        .kht-nlcl6
    ) h3 {
        margin: 0 0 12px;
        padding-top: 15px;

        font-size: 19px;
        line-height: 1.3;
        letter-spacing: -0.018em;
    }

    /* Đường nhấn panel mobile */
    .kht-nang-luc-cot-loi :is(
        .kht-nlcl1,
        .kht-nlcl2,
        .kht-nlcl3,
        .kht-nlcl4,
        .kht-nlcl5,
        .kht-nlcl6
    ) h3::before {
        width: 42px;
        height: 4px;
    }

    /* Mô tả panel mobile */
    .kht-nang-luc-cot-loi :is(
        .kht-nlcl1,
        .kht-nlcl2,
        .kht-nlcl3,
        .kht-nlcl4,
        .kht-nlcl5,
        .kht-nlcl6
    ) p {
        font-size: 13.5px;
        line-height: 1.62;

        text-align: left;
    }
}


/* =========================================================
   16. ĐIỆN THOẠI NHỎ
========================================================= */

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

    /* Thu hẹp lề section */
    .kht-nang-luc-cot-loi .kht-nlcl-text,
    .kht-nang-luc-cot-loi .kht-nlcl-text + .row {
        width: calc(100% - 18px);
    }

    /* Tiêu đề chính điện thoại */
    .kht-nang-luc-cot-loi .kht-nlcl-text p {
        font-size: 27px;
        line-height: 1.2;
    }

    /* Khung lưới card */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    > .col-inner {
        gap: 6px;
        padding: 6px;

        border-radius: 16px;
    }

    /* Card điện thoại */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box {
        min-height: 62px;

        padding: 6px 7px;

        border-radius: 12px;
    }

    /* Vùng icon điện thoại */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box .icon-box-img {
        flex: 0 0 35px;

        width: 35px;
        min-width: 35px;
        max-width: 35px;

        margin-right: 7px;
    }

    /* Khung icon điện thoại */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box .icon-inner {
        width: 35px;
        height: 35px;

        border-radius: 9px;
    }

    /* Ảnh icon điện thoại */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box .icon-inner img {
        width: 20px;
        height: 20px;
    }

    /* Text card điện thoại */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box .icon-box-text p {
        font-size: 11.5px;
        line-height: 1.3;
    }

    /* Bo góc panel */
    .kht-nang-luc-cot-loi :is(
        .kht-nlcl1,
        .kht-nlcl2,
        .kht-nlcl3,
        .kht-nlcl4,
        .kht-nlcl5,
        .kht-nlcl6
    ) {
        border-radius: 18px;
    }

    /* Padding nội dung panel */
    .kht-nang-luc-cot-loi :is(
        .kht-nlcl1,
        .kht-nlcl2,
        .kht-nlcl3,
        .kht-nlcl4,
        .kht-nlcl5,
        .kht-nlcl6
    ) > .col:last-child > .col-inner {
        padding: 19px 16px 21px;
    }

    /* Tiêu đề panel */
    .kht-nang-luc-cot-loi :is(
        .kht-nlcl1,
        .kht-nlcl2,
        .kht-nlcl3,
        .kht-nlcl4,
        .kht-nlcl5,
        .kht-nlcl6
    ) h3 {
        margin-bottom: 11px;

        font-size: 18px;
        line-height: 1.3;
    }

    /* Mô tả panel */
    .kht-nang-luc-cot-loi :is(
        .kht-nlcl1,
        .kht-nlcl2,
        .kht-nlcl3,
        .kht-nlcl4,
        .kht-nlcl5,
        .kht-nlcl6
    ) p {
        font-size: 13px;
        line-height: 1.6;
    }
}


/* =========================================================
   17. MÀN HÌNH RẤT NHỎ
========================================================= */

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

    /* Giảm vùng icon để giữ lưới hai cột */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box .icon-box-img {
        flex: 0 0 32px;

        width: 32px;
        min-width: 32px;
        max-width: 32px;

        margin-right: 6px;
    }

    /* Giảm khung icon */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box .icon-inner {
        width: 32px;
        height: 32px;
    }

    /* Giảm ảnh icon */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box .icon-inner img {
        width: 18px;
        height: 18px;
    }

    /* Giảm text card */
    .kht-nang-luc-cot-loi
    .kht-nlcl-text + .row
    > .col:first-child
    .icon-box .icon-box-text p {
        font-size: 10.5px;
        line-height: 1.28;
    }
}


/* =========================================================
   18. HỖ TRỢ GIẢM CHUYỂN ĐỘNG
========================================================= */

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

    /* Giảm animation theo thiết lập hệ điều hành */
    .kht-nang-luc-cot-loi *,
    .kht-nang-luc-cot-loi *::before,
    .kht-nang-luc-cot-loi *::after {
        scroll-behavior: auto;

        transition-duration: 0.01ms;
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }
}











/* =========================================================
   KEHETO - SECTION IPCR
   - Container chuẩn: 1320px
   - Tiêu đề: 30px
   - Nội dung: 16px
   - Cuộn phim tương thích GSAP
   - Cột trái quyết định chiều cao trên desktop
   - Cột phải phủ đúng chiều cao cột trái
   - Giảm khoảng trống trong ảnh minh họa bên phải
   - Responsive desktop, tablet và mobile
   - Không sử dụng !important
   ========================================================= */


/* =========================================================
   1. BIẾN MÀU VÀ THÔNG SỐ CHUNG
   ========================================================= */

.kht-ipcr {
    /* Màu chính KEHETO */
    --kht-primary: #42a54d;
    --kht-shade-1: #3a9544;
    --kht-shade-2: #30823a;
    --kht-shade-3: #1f7131;
    --kht-shade-4: #195321;
    --kht-shade-5: #113617;

    /* Màu sáng KEHETO */
    --kht-tint-1: #5ab264;
    --kht-tint-2: #75bf7d;
    --kht-tint-3: #9bd0a0;
    --kht-tint-4: #c0e2c4;
    --kht-tint-5: #e4f3e6;

    /* Màu trung tính */
    --kht-black: #263238;
    --kht-dark-grey: #4d4d4d;
    --kht-grey: #717171;
    --kht-light-grey: #89939e;
    --kht-silver: #f5f7fa;
    --kht-white: #ffffff;

    /* Chiều ngang chuẩn của website */
    --kht-container-width: 1320px;

    /* Chiều cao background cuộn phim desktop */
    --kht-ipcr-film-height: 252px;

    /* Chiều cao từng ảnh trong cuộn phim */
    --kht-ipcr-film-image-height: 184px;

    /* Chiều rộng card được JavaScript cập nhật */
    --kht-ipcr-film-card-width: 280px;

    /* Khoảng cách giữa các ảnh */
    --kht-ipcr-film-gap: 14px;

    /* Nâng dải ảnh để căn giữa background */
    --kht-ipcr-film-offset-y: -12px;

    /* Vùng ẩn cứng bên trái */
    --kht-ipcr-film-left-cut: 24px;

    /* Vùng mờ dần bên phải */
    --kht-ipcr-film-right-fade: 92px;

    position: relative;

    width: 100%;
    overflow: hidden;

    /* Khoảng cách bên ngoài section */
    padding: 30px 0;

    font-family:
        "Quicksand",
        "Be Vietnam Pro",
        sans-serif;

    background:
        radial-gradient(
            circle at 4% 10%,
            rgba(192, 226, 196, 0.16),
            transparent 27%
        ),
        radial-gradient(
            circle at 97% 88%,
            rgba(228, 243, 230, 0.55),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #fffdf8 0%,
            #fbfaf6 56%,
            #f2f8f3 100%
        );
}


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


/* Tạo họa tiết chấm nhẹ trên nền */
.kht-ipcr::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;
    opacity: 0.14;

    background-image:
        radial-gradient(
            circle,
            rgba(31, 113, 49, 0.25) 0 1px,
            transparent 1.5px
        );

    background-size: 50px 50px;
}


/* Tạo vòng tròn trang trí phía bên phải */
.kht-ipcr::after {
    content: "";

    position: absolute;
    right: -240px;
    bottom: -320px;

    width: 650px;
    height: 650px;

    border: 1px solid rgba(66, 165, 77, 0.08);
    border-radius: 50%;

    box-shadow:
        0 0 0 70px rgba(66, 165, 77, 0.018),
        0 0 0 140px rgba(66, 165, 77, 0.012);

    pointer-events: none;
}


/* =========================================================
   2. SECTION CONTENT
   ========================================================= */

.kht-ipcr .section-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: none;

    margin: 0;

    /* Khoảng cách nội dung trên và dưới */
    padding: 50px 0;
}


/* =========================================================
   3. LAYOUT CHÍNH
   - Cột trái quyết định chiều cao hàng Grid
   - Cột phải kéo giãn theo chiều cao cột trái
   ========================================================= */

.kht-ipcr .section-content > .kht-ipcr-layout.row.row-small {
    display: grid;

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

    align-items: stretch;
    gap: 28px;

    width: calc(100% - 30px);
    max-width: var(--kht-container-width);

    margin: 0 auto;
    padding: 0;
}


/* Xóa clearfix mặc định của Flatsome */
.kht-ipcr .kht-ipcr-layout::before,
.kht-ipcr .kht-ipcr-layout::after {
    content: none;
    display: none;
}


/* Xóa gutter và kích thước cột mặc định */
.kht-ipcr .kht-ipcr-layout > .col {
    float: none;

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

    flex: none;
    flex-basis: auto;

    align-self: stretch;

    margin: 0;
    padding: 0;
}


/* Cho col-inner phủ toàn bộ chiều cao Grid */
.kht-ipcr .kht-ipcr-layout > .col > .col-inner {
    width: 100%;
    height: 100%;
    min-height: 0;

    margin: 0;
}


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

.kht-ipcr .kht-ipcr-left {
    min-width: 0;
    min-height: 0;
}


/* Xếp tiêu đề, mô tả và cuộn phim theo chiều dọc */
.kht-ipcr .kht-ipcr-left > .col-inner {
    position: relative;

    display: flex;
    flex-direction: column;

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

    padding: 6px 0 0;
}


/* =========================================================
   5. TIÊU ĐỀ BÊN TRÁI
   ========================================================= */

.kht-ipcr .kht-ipcr-text1 {
    position: relative;
    z-index: 4;

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

    margin: 0;
    padding: 0;

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


/* Xóa phần trang trí cũ của tiêu đề */
.kht-ipcr .kht-ipcr-text1::before,
.kht-ipcr .kht-ipcr-text1::after {
    content: none;
    display: none;
}


/* Định dạng tiêu đề */
.kht-ipcr .kht-ipcr-text1 p {
    margin: 0;

    color: var(--kht-shade-4);

    font-size: 30px;
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: -0.5px;
}


/* =========================================================
   6. NỘI DUNG MÔ TẢ BÊN TRÁI
   ========================================================= */

.kht-ipcr .kht-ipcr-text2 {
    position: relative;
    z-index: 4;

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

    margin: 21px 0 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
    box-shadow: none;
}


/* Xóa phần trang trí cũ của mô tả */
.kht-ipcr .kht-ipcr-text2::before,
.kht-ipcr .kht-ipcr-text2::after {
    content: none;
    display: none;
}


/* Định dạng các đoạn nội dung */
.kht-ipcr .kht-ipcr-text2 p {
    margin: 0 0 8px;

    color: #303631;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
}


/* Xóa khoảng cách đoạn cuối */
.kht-ipcr .kht-ipcr-text2 p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   7. BACKGROUND CUỘN PHIM
   ========================================================= */

.kht-ipcr .kht-ipcr-thuocphim {
    position: relative;
    z-index: 1;

    width: 100%;
    height: var(--kht-ipcr-film-height);

    margin: 26px 0 0;

    overflow: hidden;
    border-radius: 14px;
}


/* Cho khung background phủ toàn bộ khu vực */
.kht-ipcr .kht-ipcr-thuocphim .img-inner {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;
}


/* Cho ảnh background phủ kín khung */
.kht-ipcr .kht-ipcr-thuocphim img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;

    object-fit: fill;
    object-position: center;

    opacity: 0.94;
}


/* =========================================================
   8. VIEWPORT CUỘN PHIM GSAP
   - Bên trái ẩn cứng
   - Bên phải mờ dần
   ========================================================= */

.kht-ipcr .kht-ipcr-chayphim {
    position: relative;
    z-index: 3;

    display: block;

    width: 100%;
    height: var(--kht-ipcr-film-height);
    min-height: var(--kht-ipcr-film-height);
    max-width: none;

    /* Chồng chính xác viewport lên background */
    margin: calc(var(--kht-ipcr-film-height) * -1) 0 0;
    padding: 0;

    overflow: hidden;
    isolation: isolate;

    touch-action: pan-y;

    /* Tạo vùng ẩn trái và mờ dần bên phải */
    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0,
            transparent var(--kht-ipcr-film-left-cut),
            #000 var(--kht-ipcr-film-left-cut),
            #000 calc(100% - var(--kht-ipcr-film-right-fade)),
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to right,
            transparent 0,
            transparent var(--kht-ipcr-film-left-cut),
            #000 var(--kht-ipcr-film-left-cut),
            #000 calc(100% - var(--kht-ipcr-film-right-fade)),
            transparent 100%
        );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}


/* Xóa pseudo-element mặc định của row */
.kht-ipcr .kht-ipcr-chayphim::before,
.kht-ipcr .kht-ipcr-chayphim::after {
    content: none;
    display: none;
}


/* =========================================================
   9. TRACK ẢNH DO JAVASCRIPT TẠO
   ========================================================= */

.kht-ipcr .kht-ipcr-film-track {
    position: relative;

    /* Căn track theo chiều dọc background */
    top: var(--kht-ipcr-film-offset-y);

    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--kht-ipcr-film-gap);

    width: max-content;
    height: 100%;

    padding-right: 16px;
    padding-left: 16px;

    will-change: transform;
}


/* Thiết lập chiều rộng từng card ảnh */
.kht-ipcr .kht-ipcr-film-track > .col {
    float: none;

    flex: 0 0 var(--kht-ipcr-film-card-width);

    width: var(--kht-ipcr-film-card-width);
    min-width: var(--kht-ipcr-film-card-width);
    max-width: var(--kht-ipcr-film-card-width);

    margin: 0;
    padding: 0;
}


/* Không kéo giãn nội dung card theo chiều cao track */
.kht-ipcr .kht-ipcr-film-track > .col > .col-inner {
    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;
}


/* =========================================================
   10. FALLBACK TRƯỚC KHI GSAP KHỞI TẠO
   ========================================================= */

.kht-ipcr
    .kht-ipcr-chayphim:not([data-kht-film-ready="true"]) {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--kht-ipcr-film-gap);

    padding: 0 16px;
}


/* Thiết lập card ảnh fallback */
.kht-ipcr
    .kht-ipcr-chayphim:not([data-kht-film-ready="true"])
    > .col {
    float: none;

    flex: 0 0 var(--kht-ipcr-film-card-width);

    width: var(--kht-ipcr-film-card-width);
    min-width: var(--kht-ipcr-film-card-width);
    max-width: var(--kht-ipcr-film-card-width);

    margin: 0;
    padding: 0;
}


/* =========================================================
   11. KHUNG ẢNH CUỘN PHIM
   ========================================================= */

.kht-ipcr .kht-ipcr-film-track .img,
.kht-ipcr .kht-ipcr-film-track .img-inner,
.kht-ipcr
    .kht-ipcr-chayphim:not([data-kht-film-ready="true"])
    .img,
.kht-ipcr
    .kht-ipcr-chayphim:not([data-kht-film-ready="true"])
    .img-inner {
    clip-path: none;
    transform-origin: center;
}


/* Xóa pseudo-element cũ có thể tạo góc tam giác */
.kht-ipcr .kht-ipcr-film-track > .col::before,
.kht-ipcr .kht-ipcr-film-track > .col::after,
.kht-ipcr .kht-ipcr-film-track > .col > .col-inner::before,
.kht-ipcr .kht-ipcr-film-track > .col > .col-inner::after,
.kht-ipcr .kht-ipcr-film-track .img::before,
.kht-ipcr .kht-ipcr-film-track .img::after,
.kht-ipcr .kht-ipcr-film-track .img-inner::before,
.kht-ipcr .kht-ipcr-film-track .img-inner::after {
    content: none;
    display: none;
}


/* Vùng có thể nhấn để mở lightbox */
.kht-ipcr .kht-ipcr-film-track .img,
.kht-ipcr
    .kht-ipcr-chayphim:not([data-kht-film-ready="true"])
    .img {
    width: 100%;
    height: auto;

    margin: 0;

    cursor: zoom-in;
}


/* Thiết kế khung từng ảnh */
.kht-ipcr .kht-ipcr-film-track .img-inner,
.kht-ipcr
    .kht-ipcr-chayphim:not([data-kht-film-ready="true"])
    .img-inner {
    position: relative;

    width: 100%;
    height: var(--kht-ipcr-film-image-height);
    min-height: var(--kht-ipcr-film-image-height);

    overflow: hidden;
    isolation: isolate;

    border: 1px solid rgba(66, 165, 77, 0.16);
    border-radius: 10px;

    background: var(--kht-tint-5);

    box-shadow:
        0 8px 20px rgba(17, 54, 23, 0.12);

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


/* Tạo phản hồi khi hover card */
.kht-ipcr .kht-ipcr-film-track .img:hover .img-inner,
.kht-ipcr
    .kht-ipcr-chayphim:not([data-kht-film-ready="true"])
    .img:hover
    .img-inner {
    transform: translateY(-3px);

    border-color: rgba(66, 165, 77, 0.3);

    box-shadow:
        0 14px 30px rgba(17, 54, 23, 0.18);
}


/* Cho ảnh phủ kín card */
.kht-ipcr .kht-ipcr-film-track img,
.kht-ipcr
    .kht-ipcr-chayphim:not([data-kht-film-ready="true"])
    img {
    display: block;

    width: 100%;
    height: var(--kht-ipcr-film-image-height);

    margin: 0;

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

    user-select: none;
    -webkit-user-drag: none;

    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}


/* Phóng nhẹ ảnh khi hover */
.kht-ipcr .kht-ipcr-film-track .img:hover img,
.kht-ipcr
    .kht-ipcr-chayphim:not([data-kht-film-ready="true"])
    .img:hover
    img {
    transform: scale(1.035);
    filter: saturate(1.05) contrast(1.015);
}


/* Hiển thị focus khi điều khiển bằng bàn phím */
.kht-ipcr .kht-ipcr-film-track .img:focus-visible {
    outline: 3px solid rgba(66, 165, 77, 0.48);
    outline-offset: 4px;

    border-radius: 10px;
}


/* =========================================================
   12. CỘT BÊN PHẢI
   - col-inner được đặt tuyệt đối
   - Không tham gia tính chiều cao hàng Grid
   - Luôn phủ đúng chiều cao cột trái
   ========================================================= */

.kht-ipcr .kht-ipcr-right {
    position: relative;

    min-width: 0;
    min-height: 0;
}


/*
 * Đặt col-inner tuyệt đối để nội dung bên phải
 * không thể tự kéo chiều cao hàng Grid lớn hơn cột trái.
 */
.kht-ipcr .kht-ipcr-right > .col-inner {
    position: absolute;
    inset: 0;

    display: grid;

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

    /* Ba card tự nhiên, ảnh nhận phần chiều cao còn lại */
    grid-template-rows:
        auto
        auto
        auto
        minmax(0, 1fr);

    align-content: stretch;
    gap: 10px;

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

    padding: 16px;

    overflow: hidden;

    border: 1px solid rgba(66, 165, 77, 0.18);
    border-radius: 26px;

    background:
        radial-gradient(
            circle at 105% -5%,
            rgba(155, 208, 160, 0.24),
            transparent 38%
        ),
        linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(245, 250, 246, 0.98) 54%,
            rgba(228, 243, 230, 0.94) 100%
        );

    box-shadow:
        0 20px 50px rgba(17, 54, 23, 0.12);
}


/* Tạo vòng tròn khoa học chìm sau nội dung */
.kht-ipcr .kht-ipcr-right > .col-inner::before {
    content: "";

    position: absolute;

    top: 90px;
    right: -155px;

    width: 340px;
    height: 340px;

    border: 1px solid rgba(66, 165, 77, 0.11);
    border-radius: 50%;

    box-shadow:
        0 0 0 48px rgba(66, 165, 77, 0.022),
        0 0 0 96px rgba(66, 165, 77, 0.014);

    pointer-events: none;
}


/* Tạo mảng màu thương hiệu ở góc trên phải */
.kht-ipcr .kht-ipcr-right > .col-inner::after {
    content: "";

    position: absolute;
    top: 0;
    right: 0;

    width: 125px;
    height: 125px;

    border-radius: 0 26px 0 100%;

    background:
        linear-gradient(
            145deg,
            rgba(66, 165, 77, 0.28),
            rgba(31, 113, 49, 0.06)
        );

    pointer-events: none;
}


/* =========================================================
   13. CARD CHỨC NĂNG BÊN PHẢI
   ========================================================= */

.kht-ipcr .kht-ipcr-right .icon-box {
    position: relative;
    z-index: 3;

    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 12px;

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

    /* Gap của Grid điều khiển khoảng cách giữa card */
    margin: 0;

    /* Tăng nhẹ padding dọc để card dễ đọc hơn */
    padding: 13px 14px;

    border: 1px solid rgba(66, 165, 77, 0.15);
    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(245, 250, 246, 0.92)
        );

    box-shadow:
        0 8px 20px rgba(17, 54, 23, 0.07);

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


/* Xóa margin cũ của card thứ ba */
.kht-ipcr .kht-ipcr-right .icon-box:nth-of-type(3) {
    margin-bottom: 0;
}


/* Tạo thanh màu cạnh trái card */
.kht-ipcr .kht-ipcr-right .icon-box::before {
    content: "";

    position: absolute;

    top: 13px;
    bottom: 13px;
    left: 0;

    width: 3px;

    border-radius: 0 5px 5px 0;

    background:
        linear-gradient(
            to bottom,
            var(--kht-primary),
            var(--kht-shade-3)
        );
}


/* Nâng nhẹ card khi hover */
.kht-ipcr .kht-ipcr-right .icon-box:hover {
    transform: translateY(-3px);

    border-color: rgba(66, 165, 77, 0.3);

    box-shadow:
        0 14px 28px rgba(17, 54, 23, 0.12);
}


/* Thiết lập vùng chứa icon */
.kht-ipcr .kht-ipcr-right .icon-box-img {
    position: relative;
    z-index: 3;

    width: 52px;
    max-width: 52px;

    margin: 0;
}


/* Thiết kế khối chứa icon */
.kht-ipcr .kht-ipcr-right .icon-box-img .icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    border: 1px solid rgba(66, 165, 77, 0.18);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            var(--kht-tint-5),
            var(--kht-white)
        );

    box-shadow:
        inset 0 0 0 5px rgba(66, 165, 77, 0.035),
        0 7px 16px rgba(17, 54, 23, 0.08);
}


/* Căn icon vào giữa */
.kht-ipcr .kht-ipcr-right .icon-box-img .icon-inner {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
}


/* Điều chỉnh kích thước hình icon */
.kht-ipcr .kht-ipcr-right .icon-box-img img {
    display: block;

    width: 31px;
    height: 31px;

    object-fit: contain;
}


/* Cho vùng text co giãn đúng */
.kht-ipcr .kht-ipcr-right .icon-box-text {
    min-width: 0;
    padding: 0;
}


/* Định dạng nội dung card */
.kht-ipcr .kht-ipcr-right .icon-box-text p {
    margin: 0;

    color: var(--kht-black);

    font-size: 13px;
    font-weight: 500;
    line-height: 1.58;
}


/* =========================================================
   14. ẢNH CUỐI BÊN PHẢI
   - Nhận phần chiều cao còn lại
   - Phóng nhẹ nội dung để giảm khoảng trống
   ========================================================= */

.kht-ipcr .kht-ipcr-right > .col-inner > .img {
    position: relative;
    z-index: 3;

    align-self: stretch;

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

    height: 100%;
    min-height: 0;

    margin: 0;

    overflow: hidden;

    border: 1px solid rgba(66, 165, 77, 0.16);
    border-radius: 22px;

    background:
        linear-gradient(
            180deg,
            rgba(228, 243, 230, 0.7),
            rgba(228, 243, 230, 0.95)
        );

    box-shadow:
        0 10px 24px rgba(17, 54, 23, 0.09);
}


/* Tạo lớp phủ nhẹ phía trên ảnh */
.kht-ipcr .kht-ipcr-right > .col-inner > .img::before {
    content: "";

    position: absolute;
    z-index: 2;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(228, 243, 230, 0.04),
            transparent 34%
        );

    pointer-events: none;
}


/* Cho img-inner phủ kín hàng cuối */
.kht-ipcr .kht-ipcr-right > .col-inner > .img .img-inner {
    width: 100%;
    height: 100%;
    min-height: 0;

    margin: 0;
    padding: 0;

    overflow: hidden;
}


/*
 * Phóng nhẹ ảnh từ đáy để giảm vùng trống phía trên,
 * đồng thời giữ cụm chai lọ và kính hiển vi ở đáy.
 */
.kht-ipcr .kht-ipcr-right > .col-inner > .img img {
    display: block;

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

    margin: 0;

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

    transform: scale(1.12);
    transform-origin: center bottom;
}


/* =========================================================
   15. LIGHTBOX PHÓNG TO ẢNH
   ========================================================= */

.kht-ipcr-lightbox {
    position: fixed;
    z-index: 999999;

    inset: 0;

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

    padding: 32px;

    visibility: hidden;
    opacity: 0;

    background: rgba(7, 18, 10, 0.9);

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


/* Hiển thị lightbox */
.kht-ipcr-lightbox.is-open {
    visibility: visible;
    opacity: 1;
}


/* Khung chứa ảnh phóng to */
.kht-ipcr-lightbox__content {
    position: relative;

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

    width: min(1120px, 92vw);
    height: min(780px, 86vh);

    transform: translateY(12px) scale(0.96);

    transition: transform 0.35s ease;
}


/* Hiệu ứng mở lightbox */
.kht-ipcr-lightbox.is-open .kht-ipcr-lightbox__content {
    transform: translateY(0) scale(1);
}


/* Định dạng ảnh phóng to */
.kht-ipcr-lightbox__image {
    display: block;

    width: auto;
    max-width: 100%;

    height: auto;
    max-height: 100%;

    object-fit: contain;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 32px 100px rgba(0, 0, 0, 0.42);
}


/* Thiết kế nút đóng lightbox */
.kht-ipcr-lightbox__close {
    position: absolute;
    z-index: 4;

    top: 18px;
    right: 18px;

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

    width: 46px;
    height: 46px;

    margin: 0;
    padding: 0;

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

    color: #ffffff;
    background: rgba(17, 54, 23, 0.78);

    font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

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


/* Tạo phản hồi cho nút đóng */
.kht-ipcr-lightbox__close:hover {
    transform: rotate(90deg);
    background: rgba(66, 165, 77, 0.96);
}


/* Khóa cuộn trang khi lightbox mở */
body.kht-ipcr-lightbox-lock {
    overflow: hidden;
}


/* =========================================================
   16. DESKTOP NHỎ
   ========================================================= */

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

    /* Điều chỉnh tỷ lệ hai cột */
    .kht-ipcr .section-content > .kht-ipcr-layout.row.row-small {
        grid-template-columns:
            minmax(0, 1.72fr)
            minmax(350px, 1fr);

        gap: 22px;

        width: calc(100% - 30px);
    }


    /* Giảm khoảng cách trong cột phải */
    .kht-ipcr .kht-ipcr-right > .col-inner {
        gap: 9px;
        padding: 14px;
    }


    /* Thu gọn card chức năng */
    .kht-ipcr .kht-ipcr-right .icon-box {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 11px;

        padding: 11px 12px;
    }


    /* Thu nhỏ vùng icon */
    .kht-ipcr .kht-ipcr-right .icon-box-img {
        width: 48px;
        max-width: 48px;
    }


    /* Thu nhỏ khối icon */
    .kht-ipcr .kht-ipcr-right .icon-box-img .icon {
        width: 48px;
        height: 48px;

        border-radius: 14px;
    }


    /* Thu nhỏ hình icon */
    .kht-ipcr .kht-ipcr-right .icon-box-img img {
        width: 28px;
        height: 28px;
    }


    /* Thu nhỏ nhẹ nội dung card */
    .kht-ipcr .kht-ipcr-right .icon-box-text p {
        font-size: 12.5px;
        line-height: 1.55;
    }


    /* Giảm nhẹ độ phóng ảnh bên phải */
    .kht-ipcr .kht-ipcr-right > .col-inner > .img img {
        transform: scale(1.09);
    }
}


/* =========================================================
   17. TABLET
   ========================================================= */

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

    .kht-ipcr {
        /* Điều chỉnh kích thước cuộn phim tablet */
        --kht-ipcr-film-height: 238px;
        --kht-ipcr-film-image-height: 172px;
        --kht-ipcr-film-offset-y: -9px;
        --kht-ipcr-film-left-cut: 18px;
        --kht-ipcr-film-right-fade: 72px;
    }


    /* Chuyển layout thành một cột */
    .kht-ipcr .section-content > .kht-ipcr-layout.row.row-small {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;

        width: calc(100% - 30px);
    }


    /* Cột trái co theo nội dung */
    .kht-ipcr .kht-ipcr-left > .col-inner {
        height: auto;
        min-height: 0;
    }


    /*
     * Khôi phục cột phải về luồng bình thường
     * khi hai cột đã chuyển thành hai hàng.
     */
    .kht-ipcr .kht-ipcr-right {
        position: static;
    }


    /* Cột phải chuyển thành Grid 3 card và một ảnh */
    .kht-ipcr .kht-ipcr-right > .col-inner {
        position: relative;
        inset: auto;

        display: grid;

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

        grid-template-rows:
            auto
            230px;

        gap: 14px;

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

        padding: 20px;
    }


    /* Card chuyển thành bố cục dọc */
    .kht-ipcr .kht-ipcr-right .icon-box {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 13px;

        height: 100%;

        margin: 0;
        padding: 16px;
    }


    /* Thanh màu chuyển lên cạnh trên card */
    .kht-ipcr .kht-ipcr-right .icon-box::before {
        top: 0;
        right: 18px;
        bottom: auto;
        left: 18px;

        width: auto;
        height: 3px;

        border-radius: 0 0 5px 5px;

        background:
            linear-gradient(
                90deg,
                var(--kht-primary),
                var(--kht-tint-3)
            );
    }


    /* Ảnh cuối chiếm toàn bộ hàng thứ hai */
    .kht-ipcr .kht-ipcr-right > .col-inner > .img {
        grid-column: 1 / -1;

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

        margin: 0;

        border-radius: 22px;
    }


    /* Giảm độ phóng ảnh trên tablet */
    .kht-ipcr .kht-ipcr-right > .col-inner > .img img {
        transform: scale(1.05);
    }
}


/* =========================================================
   18. MOBILE
   ========================================================= */

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

    .kht-ipcr {
        /* Điều chỉnh kích thước cuộn phim mobile */
        --kht-ipcr-film-height: 210px;
        --kht-ipcr-film-image-height: 150px;
        --kht-ipcr-film-gap: 10px;
        --kht-ipcr-film-offset-y: -6px;
        --kht-ipcr-film-left-cut: 12px;
        --kht-ipcr-film-right-fade: 38px;
    }


    /* Giảm khoảng cách nội dung trong section */
    .kht-ipcr .section-content {
        padding-top: 30px;
        padding-bottom: 30px;
    }


    /* Giữ lề 12px ở hai cạnh mobile */
    .kht-ipcr .section-content > .kht-ipcr-layout.row.row-small {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;

        width: calc(100% - 24px);
        max-width: none;
    }


    /* Cột trái co theo nội dung mobile */
    .kht-ipcr .kht-ipcr-left > .col-inner {
        height: auto;
        min-height: 0;

        padding-top: 0;
    }


    /* Giữ tiêu đề mobile 30px */
    .kht-ipcr .kht-ipcr-text1 p {
        font-size: 30px;
        line-height: 1.35;
        letter-spacing: -0.5px;
    }


    /* Giảm khoảng cách tiêu đề và mô tả */
    .kht-ipcr .kht-ipcr-text2 {
        margin-top: 18px;
    }


    /* Giữ nội dung mobile 16px */
    .kht-ipcr .kht-ipcr-text2 p {
        margin-bottom: 7px;

        font-size: 16px;
        line-height: 1.7;
    }


    /* Điều chỉnh khoảng cách background với phần text */
    .kht-ipcr .kht-ipcr-thuocphim {
        margin-top: 24px;
        border-radius: 12px;
    }


    /* Giảm padding hai đầu track */
    .kht-ipcr .kht-ipcr-film-track {
        padding-right: 10px;
        padding-left: 10px;
    }


    /* Cột phải trở về danh sách dọc */
    .kht-ipcr .kht-ipcr-right > .col-inner {
        position: relative;
        inset: auto;

        display: flex;
        flex-direction: column;
        gap: 12px;

        height: auto;
        min-height: 0;

        padding: 14px;

        border-radius: 22px;
    }


    /* Card chức năng trở về dạng ngang */
    .kht-ipcr .kht-ipcr-right .icon-box {
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr);
        align-items: center;
        gap: 12px;

        height: auto;

        margin: 0;
        padding: 12px;
    }


    /* Thanh màu trở lại cạnh trái */
    .kht-ipcr .kht-ipcr-right .icon-box::before {
        top: 14px;
        right: auto;
        bottom: 14px;
        left: 0;

        width: 3px;
        height: auto;

        border-radius: 0 5px 5px 0;

        background:
            linear-gradient(
                to bottom,
                var(--kht-primary),
                var(--kht-shade-3)
            );
    }


    /* Điều chỉnh vùng chứa icon */
    .kht-ipcr .kht-ipcr-right .icon-box-img {
        width: 54px;
        max-width: 54px;
    }


    /* Điều chỉnh khối icon */
    .kht-ipcr .kht-ipcr-right .icon-box-img .icon {
        width: 54px;
        height: 54px;
    }


    /* Điều chỉnh ảnh icon */
    .kht-ipcr .kht-ipcr-right .icon-box-img img {
        width: 31px;
        height: 31px;
    }


    /* Ảnh cuối mobile dùng chiều cao riêng */
    .kht-ipcr .kht-ipcr-right > .col-inner > .img {
        width: 100%;
        height: 185px;
        min-height: 185px;

        margin: 0;

        border-radius: 18px;
    }


    /* Giảm độ phóng ảnh trên mobile */
    .kht-ipcr .kht-ipcr-right > .col-inner > .img img {
        transform: scale(1.03);
    }


    /* Tối ưu lightbox mobile */
    .kht-ipcr-lightbox {
        padding: 14px;
    }


    /* Tăng diện tích hiển thị ảnh lớn */
    .kht-ipcr-lightbox__content {
        width: 100%;
        height: 88vh;
    }


    /* Thu nhỏ nút đóng */
    .kht-ipcr-lightbox__close {
        top: 10px;
        right: 10px;

        width: 42px;
        height: 42px;

        font-size: 27px;
    }


    /* Giảm bo góc ảnh phóng to */
    .kht-ipcr-lightbox__image {
        border-radius: 12px;
    }
}


/* =========================================================
   19. MOBILE NHỎ
   ========================================================= */

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

    /* Thu nhỏ padding khối phải */
    .kht-ipcr .kht-ipcr-right > .col-inner {
        padding: 12px;
    }


    /* Thu gọn card chức năng */
    .kht-ipcr .kht-ipcr-right .icon-box {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 10px;

        padding: 10px;
    }


    /* Thu nhỏ vùng icon */
    .kht-ipcr .kht-ipcr-right .icon-box-img {
        width: 50px;
        max-width: 50px;
    }


    /* Thu nhỏ khối icon */
    .kht-ipcr .kht-ipcr-right .icon-box-img .icon {
        width: 50px;
        height: 50px;
    }


    /* Thu nhỏ ảnh icon */
    .kht-ipcr .kht-ipcr-right .icon-box-img img {
        width: 29px;
        height: 29px;
    }


    /* Giảm chiều cao ảnh cuối */
    .kht-ipcr .kht-ipcr-right > .col-inner > .img {
        height: 172px;
        min-height: 172px;
    }
}


/* =========================================================
   20. HỖ TRỢ NGƯỜI DÙNG GIẢM CHUYỂN ĐỘNG
   ========================================================= */

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

    .kht-ipcr .kht-ipcr-film-track,
    .kht-ipcr .kht-ipcr-film-track .img-inner,
    .kht-ipcr .kht-ipcr-film-track img,
    .kht-ipcr-lightbox,
    .kht-ipcr-lightbox__content {
        transition: none;
    }
}
/* =========================================================
   IPCR - TRẠNG THÁI KÉO DẢI ẢNH
   ========================================================= */

/* Hiển thị con trỏ có thể kéo trên desktop */
.kht-ipcr .kht-ipcr-chayphim {
    cursor: grab;

    user-select: none;
    -webkit-user-select: none;

    /* Cho phép cuộn dọc trang nhưng giữ thao tác kéo ngang */
    touch-action: pan-y;

    overscroll-behavior-x: contain;
}


/* Đổi con trỏ khi người dùng đang kéo */
.kht-ipcr .kht-ipcr-chayphim.is-dragging {
    cursor: grabbing;
}


/* Ngăn trình duyệt tự kéo ảnh gốc */
.kht-ipcr .kht-ipcr-film-track img {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}


/* Trong lúc kéo, tạm bỏ hiệu ứng hover để card không nhảy */
.kht-ipcr
    .kht-ipcr-chayphim.is-dragging
    .kht-ipcr-film-track
    .img:hover
    .img-inner {
    transform: none;
}


/* Trong lúc kéo, không phóng ảnh bên trong */
.kht-ipcr
    .kht-ipcr-chayphim.is-dragging
    .kht-ipcr-film-track
    .img:hover
    img {
    transform: none;
    filter: none;
}












/* =========================================================
   KEHETO - HỆ THỐNG NHÀ MÁY & NĂNG LỰC SẢN XUẤT
   ---------------------------------------------------------
   Thay đổi duy nhất:
   - Khôi phục thiết kế tiêu đề section:
     "Hệ thống nhà máy & Năng lực sản xuất"

   Các phần còn lại giữ nguyên:
   - Card desktop và tablet cách mép trên 20%.
   - Card mobile giữ khoảng cách 7%.
   - Không để class y50 của Flatsome dịch card.
   - Không phủ nền xanh lên ảnh lớn.
   - Giữ nguyên thanh thumbnail bên phải.
   - Không sử dụng !important.
========================================================= */


/* =========================================================
   1. BIẾN MÀU VÀ KÍCH THƯỚC
========================================================= */

.kht-banner-nhamay {
    --kht-primary: #28cbbb;
    --kht-secondary: #263238;

    --kht-shade-1: #43a046;
    --kht-shade-2: #3b8e3b;
    --kht-shade-3: #237d31;
    --kht-shade-4: #1b5e1f;
    --kht-shade-5: #103e13;

    --kht-tint-1: #66bb69;
    --kht-tint-2: #81c784;
    --kht-tint-3: #a5d6a7;
    --kht-tint-4: #c8e6c9;
    --kht-tint-5: #e8f5e9;

    --kht-dark-grey: #4d4d4d;
    --kht-grey: #717171;
    --kht-light-grey: #89939e;
    --kht-grey-blue: #abbed1;
    --kht-silver: #f5f7fa;
    --kht-white: #ffffff;

    --kht-factory-rail-width: 276px;
    --kht-factory-slider-height: clamp(760px, 78vh, 820px);

    position: relative;
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    background: var(--kht-silver);
}

/* Cho nội dung section sử dụng toàn bộ chiều ngang */
.kht-banner-nhamay > .section-content {
    width: 100%;
    max-width: none;
}


/* =========================================================
   2. TIÊU ĐỀ SECTION
   "HỆ THỐNG NHÀ MÁY & NĂNG LỰC SẢN XUẤT"
========================================================= */

/* Hàng chứa tiêu đề nằm phía trên Slider */
.kht-banner-nhamay
    > .section-content
    > .row:first-child {
    position: relative;
    z-index: 3;

    display: block;

    width: min(1320px, calc(100% - 48px));
    max-width: 1320px;

    margin: 0 auto;
    padding: 32px 0 25px;
}

/* Cột chứa tiêu đề chiếm toàn bộ chiều ngang */
.kht-banner-nhamay
    > .section-content
    > .row:first-child
    > .col {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

/* Xóa padding mặc định của cột tiêu đề */
.kht-banner-nhamay
    > .section-content
    > .row:first-child
    > .col
    > .col-inner {
    padding: 0;
}

/* Thiết kế tiêu đề chính */
.kht-banner-nhamay
    > .section-content
    > .row:first-child
    .col-inner
    > p {
    position: relative;

    margin: 0;
    padding-left: 22px;

    color: var(--kht-secondary);

    font-size: clamp(30px, 2.7vw, 42px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

/* Thanh màu thương hiệu ở cạnh trái tiêu đề */
.kht-banner-nhamay
    > .section-content
    > .row:first-child
    .col-inner
    > p::before {
    position: absolute;
    top: 8%;
    bottom: 8%;
    left: 0;

    width: 5px;

    border-radius: 999px;

    content: "";

    background:
        linear-gradient(
            180deg,
            var(--kht-primary),
            #179f92
        );
}

/* Đường trang trí nối tiếp phía sau tiêu đề */
.kht-banner-nhamay
    > .section-content
    > .row:first-child
    .col-inner
    > p::after {
    display: inline-block;

    width: 72px;
    height: 2px;
    margin: 0 0 10px 20px;

    content: "";

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


/* =========================================================
   3. KHUNG SLIDER CHÍNH
========================================================= */

/* Khung chứa Slider, thumbnail và bộ điều khiển */
.kht-slider-nhamay {
    position: relative;

    width: 100%;
    height: var(--kht-factory-slider-height);

    overflow: hidden;
    isolation: isolate;

    background: var(--kht-secondary);
}

/* Slider ảnh lớn chừa chiều rộng cho thumbnail bên phải */
.kht-slider-nhamay > .slider {
    position: relative;
    z-index: 2;

    width: calc(100% - var(--kht-factory-rail-width));
    height: 100%;
    margin: 0;

    overflow: hidden;

    background: var(--kht-secondary);
}

/* Viewport ảnh lớn */
.kht-slider-nhamay
    > .slider
    > .flickity-viewport {
    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 0 16px 16px 0;
}

/* Track Flickity luôn cao bằng Slider */
.kht-slider-nhamay .flickity-slider {
    height: 100%;
}

/* Mỗi Banner có cùng chiều cao */
.kht-slider-nhamay .banner {
    height: 100%;
    min-height: 100%;

    overflow: hidden;

    background: var(--kht-secondary);
}

/* Các lớp bên trong Banner phủ kín khung */
.kht-slider-nhamay .banner-inner,
.kht-slider-nhamay .banner-bg,
.kht-slider-nhamay .banner-layers {
    height: 100%;
}

/* Xóa giới hạn container mặc định của Flatsome */
.kht-slider-nhamay .banner-layers.container {
    width: 100%;
    max-width: none;
}

/* Ảnh nền chính của từng Banner */
.kht-slider-nhamay .banner-bg img.bg {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

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

    transform: scale(1.02);
    transform-origin: center center;

    backface-visibility: hidden;
    will-change: transform;
}

/* Tắt overlay mặc định của UX Builder */
.kht-slider-nhamay .banner-bg > .overlay {
    background-color: transparent;
    opacity: 0;
}

/*
 * Không phủ nền xanh lên ảnh lớn.
 * Chỉ giữ lớp tối trung tính nhẹ phía dưới
 * để counter và nút điều hướng dễ nhìn.
 */
.kht-slider-nhamay .banner-bg::after {
    position: absolute;
    inset: 0;
    z-index: 2;

    content: "";
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(38, 50, 56, 0.015) 0%,
            rgba(38, 50, 56, 0) 58%,
            rgba(38, 50, 56, 0.2) 100%
        );
}

/* Không cho link Banner che các nút tương tác */
.kht-slider-nhamay .banner-link {
    pointer-events: none;
}

/* Ẩn nút mũi tên mặc định của Flickity */
.kht-slider-nhamay
    > .slider
    > .flickity-prev-next-button {
    display: none;
}


/* =========================================================
   4. CARD NỘI DUNG DESKTOP
========================================================= */

/*
 * Card desktop cách mép trên đúng 20%.
 * Selector tăng độ cụ thể để ghi đè class y50 của Flatsome.
 */
.kht-slider-nhamay
    .text-box.banner-layer.kht-factory-content-card {
    position: absolute;

    top: 20%;
    right: auto;
    bottom: auto;
    left: clamp(28px, 4.7vw, 88px);

    z-index: 7;

    display: flex;
    align-items: center;

    width: min(35%, 570px);
    max-width: 570px;
    min-height: 136px;
    padding: 24px 30px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-left: 3px solid var(--kht-primary);
    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            rgba(38, 50, 56, 0.54),
            rgba(40, 203, 187, 0.11)
        );

    box-shadow:
        0 18px 42px rgba(38, 50, 56, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* Loại bỏ transform mặc định của class y50 */
    translate: none;
    transform: none;
}

/* Thanh màu thương hiệu phía trên nội dung */
.kht-slider-nhamay
    .kht-factory-content-card::before {
    position: absolute;

    top: 20px;
    left: 30px;

    width: 54px;
    height: 2px;

    border-radius: 999px;

    content: "";

    background:
        linear-gradient(
            90deg,
            var(--kht-primary),
            rgba(40, 203, 187, 0.04)
        );
}

/* Họa tiết đường cong nhẹ ở góc card */
.kht-slider-nhamay
    .kht-factory-content-card::after {
    position: absolute;

    right: -66px;
    bottom: -102px;

    width: 178px;
    height: 178px;

    content: "";
    pointer-events: none;

    border: 1px solid rgba(40, 203, 187, 0.08);
    border-radius: 100% 0 100% 0;

    transform: rotate(-22deg);
}

/* Xóa nền mặc định của Text Box */
.kht-slider-nhamay
    .kht-factory-content-card
    .text-box-content {
    width: 100%;
    padding: 0;

    background: transparent;
}

/* Khung nội dung dùng cho animation GSAP */
.kht-slider-nhamay
    .kht-factory-content-card
    .text-inner {
    position: relative;
    z-index: 2;

    width: 100%;
    padding-top: 14px;
}

/* Nội dung text trong card */
.kht-slider-nhamay
    .kht-factory-content-card
    .text-inner
    p {
    max-width: 510px;
    margin: 0;

    color: var(--kht-white);

    font-size: clamp(17px, 1.02vw, 21px);
    font-weight: 600;
    line-height: 1.52;
    letter-spacing: -0.012em;

    text-shadow: 0 2px 9px rgba(38, 50, 56, 0.22);
    text-wrap: balance;
}

/* Card bên phải nếu Text Box được đặt bên phải trong UX Builder */
.kht-slider-nhamay
    .text-box.banner-layer.kht-factory-content-card.kht-card-right {
    right: clamp(28px, 4.7vw, 88px);
    left: auto;

    border-right: 3px solid var(--kht-primary);
    border-left-width: 1px;
}


/* =========================================================
   5. THANH THUMBNAIL DỌC BÊN PHẢI
========================================================= */

/* Khung nền rail thumbnail */
.kht-factory-rail {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 15;

    width: var(--kht-factory-rail-width);
    height: 100%;
    padding: 42px 24px 34px;

    overflow: hidden;

    border-left: 1px solid rgba(40, 203, 187, 0.16);

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(40, 203, 187, 0.11),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(38, 50, 56, 0.97) 0%,
            rgba(27, 94, 31, 0.96) 62%,
            rgba(16, 62, 19, 0.98) 100%
        );
}

/* Họa tiết chấm phía trên rail */
.kht-factory-rail::before {
    position: absolute;

    top: 46px;
    right: 30px;

    width: 44px;
    height: 44px;

    content: "";
    opacity: 0.32;
    pointer-events: none;

    background-image:
        radial-gradient(
            circle,
            var(--kht-primary) 1.4px,
            transparent 1.6px
        );

    background-size: 11px 11px;
}

/* Gradient mềm nối rail với ảnh lớn */
.kht-factory-rail::after {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 25px;

    content: "";
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(16, 62, 19, 0.37),
            transparent
        );
}

/* Viewport chứa danh sách thumbnail */
.kht-factory-rail__viewport {
    position: relative;
    z-index: 2;

    width: 100%;
    height: calc(100% - 38px);
    margin-top: 34px;

    overflow: hidden;
}

/* Track thumbnail chuyển động theo chiều dọc */
.kht-factory-rail__track {
    display: flex;
    flex-direction: column;
    gap: 23px;

    width: 100%;

    will-change: transform;
}

/* Mỗi thumbnail là một button */
.kht-factory-thumb {
    position: relative;

    display: block;
    flex: 0 0 auto;

    width: 100%;
    padding: 28px 0 0;

    border: 0;

    background: transparent;
    color: var(--kht-white);

    text-align: left;
    cursor: pointer;
    appearance: none;
}

/* Số thứ tự phía trên thumbnail */
.kht-factory-thumb__number {
    position: absolute;
    top: 0;
    left: 0;

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

    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.04em;

    transition: color 0.3s ease;
}

/* Đường ngang cạnh số thứ tự */
.kht-factory-thumb__number::after {
    display: inline-block;

    width: 30px;
    height: 1px;
    margin: 0 0 5px 10px;

    content: "";

    background: rgba(255, 255, 255, 0.27);
}

/* Khung ảnh thumbnail */
.kht-factory-thumb__media {
    position: relative;

    display: block;

    width: 100%;
    aspect-ratio: 1.6 / 1;

    overflow: hidden;

    border: 2px solid transparent;
    border-radius: 10px;

    background: var(--kht-secondary);

    box-shadow:
        0 14px 32px rgba(16, 62, 19, 0.23);

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

/* Ảnh trong thumbnail */
.kht-factory-thumb__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    pointer-events: none;
}

/* Thumbnail active sử dụng viền trắng */
.kht-factory-thumb.is-active
    .kht-factory-thumb__media {
    border-color: var(--kht-white);

    box-shadow:
        0 16px 38px rgba(16, 62, 19, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.14);
}

/* Số active sử dụng màu thương hiệu */
.kht-factory-thumb.is-active
    .kht-factory-thumb__number {
    color: var(--kht-primary);
}

/* Thumbnail dịch nhẹ khi hover */
.kht-factory-thumb:hover
    .kht-factory-thumb__media {
    transform: translateX(-3px);
}

/* Focus khi sử dụng bàn phím */
.kht-factory-thumb:focus-visible {
    outline: 2px solid var(--kht-primary);
    outline-offset: 5px;

    border-radius: 10px;
}


/* =========================================================
   6. COUNTER, PROGRESS VÀ NÚT ĐIỀU HƯỚNG
========================================================= */

/* Cụm điều khiển phía dưới ảnh lớn */
.kht-factory-controls {
    position: absolute;

    bottom: 56px;
    left: clamp(28px, 4.7vw, 88px);

    z-index: 18;

    display: flex;
    align-items: center;
    gap: 16px;

    pointer-events: none;
}

/* Bộ đếm slide */
.kht-factory-counter {
    display: flex;
    align-items: baseline;
    gap: 7px;

    min-width: 73px;

    pointer-events: auto;
}

/* Số hiện tại */
.kht-factory-counter__current {
    color: var(--kht-primary);

    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

/* Dấu phân cách */
.kht-factory-counter__separator {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

/* Tổng số slide */
.kht-factory-counter__total {
    color: rgba(255, 255, 255, 0.76);

    font-size: 14px;
    font-weight: 500;
}

/* Thanh tiến trình Auto Slide */
.kht-factory-progress {
    position: relative;

    width: 110px;
    height: 3px;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.4);
}

/* Thanh tiến trình active */
.kht-factory-progress__bar {
    position: absolute;
    inset: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--kht-primary),
            var(--kht-tint-2)
        );

    transform: scaleX(0);
    transform-origin: left center;
}

/* Khung hai nút điều hướng */
.kht-factory-navigation {
    display: flex;
    gap: 10px;

    pointer-events: auto;
}

/* Nút điều hướng */
.kht-factory-navigation__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;
    padding: 0;

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

    background: rgba(38, 50, 56, 0.48);
    color: var(--kht-white);

    cursor: pointer;
    appearance: none;

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);

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

/* Hover nút điều hướng */
.kht-factory-navigation__button:hover {
    border-color: var(--kht-primary);

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

    transform: translateY(-2px);
}

/* Icon mũi tên */
.kht-factory-navigation__button svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
}

/* Focus nút */
.kht-factory-navigation__button:focus-visible {
    outline: 2px solid var(--kht-primary);
    outline-offset: 4px;
}


/* =========================================================
   7. TABLET
========================================================= */

@media (max-width: 1199px) {
    .kht-banner-nhamay {
        --kht-factory-rail-width: 224px;
        --kht-factory-slider-height: clamp(640px, 72vh, 720px);
    }

    /* Điều chỉnh hàng tiêu đề trên tablet */
    .kht-banner-nhamay
        > .section-content
        > .row:first-child {
        width: calc(100% - 40px);
        padding-top: 27px;
        padding-bottom: 22px;
    }

    /* Điều chỉnh cỡ chữ tiêu đề tablet */
    .kht-banner-nhamay
        > .section-content
        > .row:first-child
        .col-inner
        > p {
        font-size: clamp(29px, 3.8vw, 38px);
    }

    /* Card tablet cách mép trên đúng 20% */
    .kht-slider-nhamay
        .text-box.banner-layer.kht-factory-content-card {
        top: 20%;
        left: 4%;

        width: 44%;
        max-width: 520px;
        min-height: 130px;
        padding: 22px 27px;

        translate: none;
        transform: none;
    }

    /* Card bên phải trên tablet */
    .kht-slider-nhamay
        .text-box.banner-layer.kht-factory-content-card.kht-card-right {
        right: 4%;
        left: auto;
    }

    /* Thanh trang trí card tablet */
    .kht-slider-nhamay
        .kht-factory-content-card::before {
        top: 18px;
        left: 27px;

        width: 50px;
    }

    /* Khoảng cách nội dung card tablet */
    .kht-slider-nhamay
        .kht-factory-content-card
        .text-inner {
        padding-top: 13px;
    }

    /* Kích thước chữ card tablet */
    .kht-slider-nhamay
        .kht-factory-content-card
        .text-inner
        p {
        font-size: clamp(16px, 1.8vw, 20px);
        line-height: 1.5;
    }

    /* Thu nhỏ padding rail */
    .kht-factory-rail {
        padding-right: 18px;
        padding-left: 18px;
    }

    /* Cập nhật viewport rail */
    .kht-factory-rail__viewport {
        height: calc(100% - 36px);
        margin-top: 32px;
    }

    /* Controls tablet */
    .kht-factory-controls {
        bottom: 50px;
        left: 4%;
    }

    /* Thanh progress tablet */
    .kht-factory-progress {
        width: 96px;
    }

    /* Nút tablet */
    .kht-factory-navigation__button {
        width: 44px;
        height: 44px;
    }
}


/* =========================================================
   8. MOBILE
========================================================= */

@media (max-width: 849px) {
    .kht-banner-nhamay {
        --kht-factory-rail-width: 0px;
        --kht-factory-slider-height: 700px;
    }

    /* Hàng tiêu đề mobile */
    .kht-banner-nhamay
        > .section-content
        > .row:first-child {
        width: calc(100% - 32px);
        padding: 22px 0 19px;
    }

    /* Tiêu đề mobile */
    .kht-banner-nhamay
        > .section-content
        > .row:first-child
        .col-inner
        > p {
        padding-left: 17px;

        font-size: clamp(26px, 7vw, 34px);
        line-height: 1.25;
    }

    /* Thanh cạnh trái tiêu đề nhỏ hơn trên mobile */
    .kht-banner-nhamay
        > .section-content
        > .row:first-child
        .col-inner
        > p::before {
        width: 4px;
    }

    /* Ẩn đường dài sau tiêu đề trên mobile */
    .kht-banner-nhamay
        > .section-content
        > .row:first-child
        .col-inner
        > p::after {
        display: none;
    }

    /* Ảnh lớn chiếm toàn bộ chiều ngang */
    .kht-slider-nhamay > .slider {
        width: 100%;
    }

    /* Bỏ bo góc desktop */
    .kht-slider-nhamay
        > .slider
        > .flickity-viewport {
        border-radius: 0;
    }

    /* Chỉ giữ overlay trung tính nhẹ */
    .kht-slider-nhamay .banner-bg::after {
        background:
            linear-gradient(
                180deg,
                rgba(38, 50, 56, 0.08) 0%,
                rgba(38, 50, 56, 0.01) 48%,
                rgba(38, 50, 56, 0.22) 100%
            );
    }

    /* Card mobile giữ khoảng cách trên 7% */
    .kht-slider-nhamay
        .text-box.banner-layer.kht-factory-content-card,
    .kht-slider-nhamay
        .text-box.banner-layer.kht-factory-content-card.kht-card-right {
        top: 7%;
        right: 16px;
        bottom: auto;
        left: 16px;

        width: auto;
        max-width: none;
        min-height: 0;
        padding: 19px 18px 17px;

        border-right-width: 1px;
        border-left: 3px solid var(--kht-primary);
        border-radius: 14px;

        background:
            linear-gradient(
                135deg,
                rgba(38, 50, 56, 0.55),
                rgba(40, 203, 187, 0.1)
            );

        translate: none;
        transform: none;
    }

    /* Thanh trang trí card mobile */
    .kht-slider-nhamay
        .kht-factory-content-card::before {
        top: 16px;
        left: 18px;

        width: 44px;
    }

    /* Ẩn họa tiết lớn */
    .kht-slider-nhamay
        .kht-factory-content-card::after {
        display: none;
    }

    /* Khoảng cách nội dung mobile */
    .kht-slider-nhamay
        .kht-factory-content-card
        .text-inner {
        padding-top: 12px;
    }

    /* Text mobile */
    .kht-slider-nhamay
        .kht-factory-content-card
        .text-inner
        p {
        font-size: clamp(15px, 4.25vw, 18px);
        line-height: 1.48;
    }

    /* Rail chuyển thành hàng ngang */
    .kht-factory-rail {
        top: auto;
        right: 12px;
        bottom: 15px;
        left: 12px;

        width: auto;
        height: 110px;
        padding: 0;

        border: 1px solid rgba(40, 203, 187, 0.16);
        border-radius: 12px;

        background: rgba(38, 50, 56, 0.84);

        backdrop-filter: blur(13px);
        -webkit-backdrop-filter: blur(13px);
    }

    /* Ẩn họa tiết rail */
    .kht-factory-rail::before,
    .kht-factory-rail::after {
        display: none;
    }

    /* Viewport rail mobile */
    .kht-factory-rail__viewport {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 9px;
    }

    /* Track chạy ngang */
    .kht-factory-rail__track {
        flex-direction: row;
        align-items: stretch;
        gap: 10px;

        width: max-content;
        height: 100%;
    }

    /* Thumbnail mobile */
    .kht-factory-thumb {
        flex: 0 0 min(43vw, 188px);

        width: min(43vw, 188px);
        height: 100%;
        padding-top: 0;
    }

    /* Số nằm trên ảnh thumbnail */
    .kht-factory-thumb__number {
        top: 8px;
        left: 9px;
        z-index: 3;

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

        min-width: 32px;
        height: 25px;
        padding: 0 7px;

        border-radius: 5px;

        background: rgba(38, 50, 56, 0.79);
        color: var(--kht-white);

        font-size: 12px;
    }

    /* Ẩn đường cạnh số */
    .kht-factory-thumb__number::after {
        display: none;
    }

    /* Ảnh thumbnail mobile */
    .kht-factory-thumb__media {
        height: 100%;
        aspect-ratio: auto;

        border-radius: 8px;
    }

    /* Controls nằm phía trên rail */
    .kht-factory-controls {
        right: auto;
        bottom: 142px;
        left: 17px;

        gap: 12px;
    }

    /* Progress mobile */
    .kht-factory-progress {
        width: 70px;
    }

    /* Nút mobile */
    .kht-factory-navigation__button {
        width: 42px;
        height: 42px;
    }
}


/* =========================================================
   9. MOBILE NHỎ
========================================================= */

@media (max-width: 480px) {
    .kht-banner-nhamay {
        --kht-factory-slider-height: 650px;
    }

    /* Tiêu đề trên điện thoại nhỏ */
    .kht-banner-nhamay
        > .section-content
        > .row:first-child
        .col-inner
        > p {
        font-size: 27px;
    }

    /* Card mobile nhỏ */
    .kht-slider-nhamay
        .text-box.banner-layer.kht-factory-content-card,
    .kht-slider-nhamay
        .text-box.banner-layer.kht-factory-content-card.kht-card-right {
        top: 6%;
        padding: 17px 15px 15px;
    }

    /* Thanh trang trí card */
    .kht-slider-nhamay
        .kht-factory-content-card::before {
        top: 14px;
        left: 15px;
    }

    /* Khoảng cách text */
    .kht-slider-nhamay
        .kht-factory-content-card
        .text-inner {
        padding-top: 11px;
    }

    /* Text mobile nhỏ */
    .kht-slider-nhamay
        .kht-factory-content-card
        .text-inner
        p {
        font-size: clamp(14px, 4.55vw, 17px);
        line-height: 1.46;
    }

    /* Rail thấp hơn */
    .kht-factory-rail {
        height: 94px;
    }

    /* Thumbnail rộng hơn */
    .kht-factory-thumb {
        flex-basis: 55vw;
        width: 55vw;
    }

    /* Controls theo chiều cao rail */
    .kht-factory-controls {
        bottom: 121px;
    }

    /* Ẩn progress trên màn hình nhỏ */
    .kht-factory-progress {
        display: none;
    }

    /* Thu nhỏ số hiện tại */
    .kht-factory-counter__current {
        font-size: 19px;
    }
}


/* =========================================================
   10. ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .kht-slider-nhamay .banner-bg img.bg,
    .kht-factory-rail__track,
    .kht-factory-thumb__media,
    .kht-factory-navigation__button {
        transition-duration: 0.01ms;
    }
}













/* =========================================================
   SECTION ĐỐI TÁC - KEHETO
   Logo chạy liên tục từ phải sang trái
========================================================= */

.kht-doi-tac {
	/* Màu sắc sử dụng riêng cho section đối tác */
	--kht-partner-primary: #42a54d;
	--kht-partner-primary-dark: #237d31;
	--kht-partner-text: #263238;
	--kht-partner-border: rgba(38, 50, 56, 0.1);
	--kht-partner-background: #ffffff;

	position: relative;
	overflow: hidden;
	isolation: isolate;

	background: linear-gradient(
		180deg,
		#f8fbf8 0%,
		#ffffff 50%,
		#f7faf7 100%
	);
}


/* =========================================================
   XÓA CÁC HÌNH TRÒN TRANG TRÍ Ở GÓC SECTION
========================================================= */

.kht-doi-tac .section-bg {
	z-index: 0;
	pointer-events: none;
}

.kht-doi-tac .section-bg::before,
.kht-doi-tac .section-bg::after {
	content: none;
	display: none;
}


/* =========================================================
   NỘI DUNG CHÍNH CỦA SECTION
========================================================= */

.kht-doi-tac > .section-content {
	position: relative;
	z-index: 2;

	padding-top: clamp(50px, 6vw, 50px);
	padding-bottom: clamp(58px, 6vw, 88px);
}


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

.kht-doi-tac .kht-doitac-text {
	width: calc(100% - 30px);
	max-width: 1320px;

	margin: 0 auto clamp(30px, 4vw, 46px);
	padding: 0;
}

.kht-doi-tac .kht-doitac-text > .col {
	width: 100%;
	max-width: 100%;

	padding: 0;
}

.kht-doi-tac .kht-doitac-text .col-inner {
	text-align: center;
}

.kht-doi-tac .kht-doitac-text p {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;

	margin: 0;

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

	font-size: clamp(32px, 3vw, 40px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}


/* Tạo đường trang trí hai bên tiêu đề */
.kht-doi-tac .kht-doitac-text p::before,
.kht-doi-tac .kht-doitac-text p::after {
	content: "";

	width: 46px;
	height: 2px;

	border-radius: 20px;

	background: linear-gradient(
		90deg,
		rgba(66, 165, 77, 0.12),
		var(--kht-partner-primary)
	);
}

.kht-doi-tac .kht-doitac-text p::after {
	background: linear-gradient(
		90deg,
		var(--kht-partner-primary),
		rgba(66, 165, 77, 0.12)
	);
}


/* =========================================================
   KHUNG HIỂN THỊ LOGO
   Phần logo nằm ngoài khung sẽ được ẩn đi
========================================================= */

.kht-doi-tac .kht-doitac-img {
	position: relative;

	display: block;

	width: calc(100% - 30px);
	max-width: 1320px;

	margin: 0 auto;
	padding: 0;

	overflow: hidden;
}


/* Xử lý margin mặc định của class row trong Flatsome */
.kht-doi-tac .kht-doitac-img.row {
	margin-left: auto;
	margin-right: auto;
}


/* =========================================================
   TRACK CHỨA TOÀN BỘ LOGO
   Desktop hiển thị đúng 6 logo trong một khung nhìn
========================================================= */

.kht-doi-tac .kht-doitac-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 90px) / 6);
	gap: 18px;
	align-items: stretch;

	width: 100%;
	min-width: 100%;

	transform: translate3d(0, 0, 0);
	will-change: transform;
}


/* Kích hoạt chuyển động sau khi JavaScript đo chiều dài track */
.kht-doi-tac .kht-doitac-track.kht-is-running {
	animation-name: kht-partner-marquee;
	animation-duration: var(--kht-marquee-duration, 35s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}


/* Dừng chuyển động khi section không nằm trong màn hình */
.kht-doi-tac .kht-doitac-track.kht-is-paused {
	animation-play-state: paused;
}


/* Dừng chuyển động khi người dùng đưa chuột vào vùng logo */
.kht-doi-tac .kht-doitac-img:hover .kht-doitac-track,
.kht-doi-tac .kht-doitac-img:focus-within .kht-doitac-track {
	animation-play-state: paused;
}


/* Chuyển động toàn bộ logo từ phải sang trái */
@keyframes kht-partner-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(
			var(--kht-marquee-translate, -1200px),
			0,
			0
		);
	}
}


/* =========================================================
   RESET CỘT MẶC ĐỊNH CỦA FLATSOME
   Giữ tất cả logo trên một hàng duy nhất
========================================================= */

.kht-doi-tac .kht-doitac-track > .col {
	float: none;

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

	margin: 0;
	padding: 0;
}


/* =========================================================
   CARD CHỨA LOGO
========================================================= */

.kht-doi-tac .kht-doitac-track > .col > .col-inner {
	position: relative;

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

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

	padding: 18px 20px;

	overflow: hidden;

	background: rgba(255, 255, 255, 0.96);
	border: 1px solid var(--kht-partner-border);
	border-radius: 17px;

	box-shadow:
		0 6px 18px rgba(38, 50, 56, 0.04),
		0 16px 38px rgba(38, 50, 56, 0.025);

	transition:
		transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
		border-color 0.35s ease,
		box-shadow 0.35s ease,
		background-color 0.35s ease;
}


/* Thanh màu thương hiệu xuất hiện phía trên card khi hover */
.kht-doi-tac .kht-doitac-track > .col > .col-inner::before {
	content: "";

	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 3px;

	background: linear-gradient(
		90deg,
		var(--kht-partner-primary-dark),
		var(--kht-partner-primary)
	);

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

	transition: transform 0.35s ease;
}


/* Xóa hình tròn xanh ở góc dưới card */
.kht-doi-tac .kht-doitac-track > .col > .col-inner::after {
	content: none;
	display: none;
}


/* =========================================================
   KHUNG CHỨA ẢNH LOGO
========================================================= */

.kht-doi-tac .kht-doitac-track .img {
	position: relative;
	z-index: 2;

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

	width: 100%;
	height: 100%;

	margin: 0;
}

.kht-doi-tac .kht-doitac-track .img-inner {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	overflow: visible;

	background: transparent;
}


/* =========================================================
   LOGO DESKTOP
   Hiển thị đúng màu, không làm mờ
   Chiều cao giảm còn 58px
========================================================= */

.kht-doi-tac .kht-doitac-track img {
	display: block;

	width: 100%;
	height: 58px;
	max-width: 100%;

	margin: 0 auto;

	object-fit: contain;
	object-position: center;

	filter: none;
	opacity: 1;

	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}


/* =========================================================
   HIỆU ỨNG HOVER TRÊN DESKTOP
========================================================= */

@media (hover: hover) and (pointer: fine) {
	/* Nâng nhẹ card khi người dùng đưa chuột vào */
	.kht-doi-tac .kht-doitac-track > .col > .col-inner:hover {
		transform: translateY(-5px);

		background: var(--kht-partner-background);
		border-color: rgba(66, 165, 77, 0.32);

		box-shadow:
			0 12px 26px rgba(38, 50, 56, 0.075),
			0 22px 44px rgba(66, 165, 77, 0.08);
	}

	/* Hiển thị thanh màu phía trên card */
	.kht-doi-tac .kht-doitac-track > .col > .col-inner:hover::before {
		transform: scaleX(1);
	}

	/* Phóng nhẹ logo nhưng vẫn giữ đúng màu và độ rõ */
	.kht-doi-tac .kht-doitac-track > .col > .col-inner:hover img {
		transform: scale(1.055);

		filter: none;
		opacity: 1;
	}
}


/* =========================================================
   TRẠNG THÁI FOCUS
   Hỗ trợ người dùng sử dụng bàn phím
========================================================= */

.kht-doi-tac .kht-doitac-track > .col > .col-inner:focus-within {
	border-color: var(--kht-partner-primary);

	box-shadow:
		0 0 0 3px rgba(66, 165, 77, 0.12),
		0 14px 32px rgba(38, 50, 56, 0.07);
}


/* =========================================================
   TABLET
   Hiển thị 4 logo trong một khung nhìn
========================================================= */

@media screen and (max-width: 849px) {
	/* Giảm khoảng cách trên và dưới section */
	.kht-doi-tac > .section-content {
		padding-top: 54px;
		padding-bottom: 62px;
	}

	/* Giảm khoảng cách dưới tiêu đề */
	.kht-doi-tac .kht-doitac-text {
		margin-bottom: 32px;
	}

	/* Một khung nhìn hiển thị 4 logo */
	.kht-doi-tac .kht-doitac-track {
		grid-auto-columns: calc((100% - 42px) / 4);
		gap: 14px;
	}

	/* Giảm chiều cao card trên tablet */
	.kht-doi-tac .kht-doitac-track > .col > .col-inner {
		min-height: 102px;
		padding: 16px 18px;

		border-radius: 15px;
	}

	/* Giảm chiều cao logo tablet còn 52px */
	.kht-doi-tac .kht-doitac-track img {
		height: 52px;
	}
}


/* =========================================================
   MOBILE
   Hiển thị 2 logo trong một khung nhìn
========================================================= */

@media screen and (max-width: 549px) {
	/* Thu gọn khoảng cách trên và dưới section */
	.kht-doi-tac > .section-content {
		padding-top: 44px;
		padding-bottom: 50px;
	}

	/* Điều chỉnh chiều rộng và khoảng cách tiêu đề */
	.kht-doi-tac .kht-doitac-text {
		width: calc(100% - 28px);
		margin-bottom: 25px;
	}

	/* Giảm kích thước tiêu đề trên mobile */
	.kht-doi-tac .kht-doitac-text p {
		gap: 10px;

		font-size: 28px;
	}

	/* Thu ngắn đường trang trí hai bên tiêu đề */
	.kht-doi-tac .kht-doitac-text p::before,
	.kht-doi-tac .kht-doitac-text p::after {
		width: 24px;
	}

	/* Tăng không gian sử dụng theo chiều ngang trên mobile */
	.kht-doi-tac .kht-doitac-img {
		width: calc(100% - 24px);
	}

	/* Một khung nhìn hiển thị 2 logo */
	.kht-doi-tac .kht-doitac-track {
		grid-auto-columns: calc((100% - 10px) / 2);
		gap: 10px;
	}

	/* Giảm chiều cao card trên mobile */
	.kht-doi-tac .kht-doitac-track > .col > .col-inner {
		min-height: 88px;
		padding: 13px 14px;

		border-radius: 13px;
	}

	/* Giảm chiều cao logo mobile còn 44px */
	.kht-doi-tac .kht-doitac-track img {
		height: 44px;
	}
}


/* =========================================================
   ACCESSIBILITY
   Tắt chuyển động nếu người dùng hạn chế animation
========================================================= */

@media (prefers-reduced-motion: reduce) {
	/* Cho phép người dùng tự kéo ngang khi animation bị tắt */
	.kht-doi-tac .kht-doitac-img {
		overflow-x: auto;
		scrollbar-width: thin;
	}

	/* Tắt hoàn toàn chuyển động marquee */
	.kht-doi-tac .kht-doitac-track.kht-is-running {
		animation: none;
		transform: none;
	}

	/* Tắt các hiệu ứng chuyển tiếp trên card và logo */
	.kht-doi-tac .kht-doitac-track > .col > .col-inner,
	.kht-doi-tac .kht-doitac-track img {
		transition: none;
	}
}