/* ==================================================
   VIDEO GIỚI THIỆU KEHETO - FLATSOME UX BUILDER

   Chức năng:
   - Xóa khoảng cách mặc định của Flatsome
   - Giữ video đúng tỷ lệ 16:9
   - Không phóng lớn hoặc cắt video
   - Hạn chế giao diện YouTube xuất hiện khi tương tác
================================================== */


/* Xóa khoảng cách của toàn bộ section video */
.kht-about-video {
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}


/* Xóa khoảng cách của phần nền section */
.kht-about-video .section-bg {
    padding: 0;
    margin: 0;
}


/* Cho phần nội dung section chiếm toàn bộ chiều ngang */
.kht-about-video .section-content {
    width: 100%;
    padding: 0;
    margin: 0;
}


/* Xóa giới hạn chiều rộng và khoảng cách của row Flatsome */
.kht-about-video .row {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}


/* Xóa padding và margin mặc định của cột Flatsome */
.kht-about-video .col {
    padding: 0;
    margin: 0;
}


/* Xóa khoảng cách bên trong cột */
.kht-about-video .col-inner {
    padding: 0;
    margin: 0;
}


/* 
   Khung video:
   - Giữ nguyên padding-top 56.25% do UX Builder tạo
   - Tương ứng với tỷ lệ video 16:9
*/
.kht-about-video .video {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding-bottom: 0;
    margin: 0;
    overflow: hidden;
    background: #000;
}


/* Xóa khoảng cách do WordPress tự bọc iframe bằng thẻ p */
.kht-about-video .video p {
    padding: 0;
    margin: 0;
}


/*
   Iframe YouTube:
   - Phủ đúng toàn bộ khung video
   - Không scale
   - Không crop
   - Không nhận hover hoặc click
*/
.kht-about-video .video iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    border: 0;
    transform: none;
    transform-origin: center center;
    pointer-events: none;
}














/* =========================================================
   HỆ SINH THÁI VIỆT HƯƠNG GROUP

   Desktop:
   - Logo tập đoàn lớn bên trái
   - Nửa vòng tròn nét đứt
   - Bốn logo thành viên và nội dung bên phải

   Mobile:
   - Hiển thị tiêu đề section
   - Ẩn toàn bộ text trong card
   - Ẩn toàn bộ đường line và node
   - Logo tập đoàn lớn ở giữa
   - Bốn logo thành viên nằm xung quanh
   ========================================================= */

.kht-he-sinh-thai {
    --kht-primary: #28cb8b;
    --kht-primary-dark: #169a6d;
    --kht-primary-deep: #11875f;
    --kht-primary-light: #48d7a4;

    --kht-line: rgba(40, 203, 139, 0.52);
    --kht-border: rgba(40, 203, 139, 0.18);

    --kht-title: #17392d;
    --kht-text: #53645d;
    --kht-white: #ffffff;

    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 13% 52%,
            rgba(40, 203, 139, 0.11),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5fbf8 100%
        );
}

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

/* =========================================================
   KHOẢNG CÁCH SECTION
   ========================================================= */

.kht-he-sinh-thai > .section-content {
    position: relative;
    z-index: 2;

    padding: 70px 0 84px;
}

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

   Thay đổi giao diện:
   - Sao chép đúng bố cục tiêu đề của section Chứng nhận tiêu chuẩn
   - Giữ nguyên toàn bộ cấu trúc và nội dung còn lại của section
   ========================================================= */

.kht-he-sinh-thai .tieu-de {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto 36px;
    padding: 0;
}

.kht-he-sinh-thai .tieu-de > .col {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

.kht-he-sinh-thai .tieu-de .col-inner {
    padding: 0;

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

.kht-he-sinh-thai .tieu-de p {
    position: relative;

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

    margin: 0;

    color: #18372c;

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

/* Thanh màu nhận diện bên trái tiêu đề */
.kht-he-sinh-thai .tieu-de p::before {
    content: "";

    display: block;
    flex: 0 0 7px;

    width: 7px;
    height: 42px;

    border-radius: 20px;

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

/* Đường trang trí phía sau tiêu đề */
.kht-he-sinh-thai .tieu-de p::after {
    content: "";

    display: block;
    flex: 1;

    height: 1px;
    margin-left: 8px;

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

/* =========================================================
   KHUNG BỐ CỤC DESKTOP
   ========================================================= */

.kht-he-sinh-thai .row.img {
    position: relative;
    display: block;

    width: calc(100% - 30px);
    max-width: 1400px;
    min-height: 760px;

    margin: 0 auto;

    overflow: visible;
}

/* Hủy kích thước cột mặc định của Flatsome */
.kht-he-sinh-thai .row.img > .col {
    width: auto;
    max-width: none;

    padding: 0;

    flex-basis: auto;
}

/* =========================================================
   NỬA VÒNG TRÒN NÉT ĐỨT DESKTOP
   ========================================================= */

.kht-he-sinh-thai .row.img::before {
    content: "";
    position: absolute;

    top: 50%;
    left: 180px;
    z-index: 1;

    width: 660px;
    height: 660px;

    border: 2px dashed var(--kht-line);
    border-radius: 50%;

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

    /* Chỉ hiển thị nửa vòng tròn phía bên phải */
    clip-path: inset(0 0 0 50%);

    pointer-events: none;
}

/* =========================================================
   LOGO TẬP ĐOÀN BÊN TRÁI
   ========================================================= */

.kht-he-sinh-thai .img-group {
    position: absolute;

    top: 50%;
    left: 0;
    z-index: 4;

    width: 360px;
    height: 360px;

    transform: translateY(-50%);
}

/* Tạo vòng tròn lớn chứa logo tập đoàn */
.kht-he-sinh-thai .img-group > .col-inner {
    position: relative;

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

    width: 360px;
    height: 360px;

    margin: 0;
    padding: 34px;

    border: 6px solid var(--kht-primary);
    border-radius: 50%;

    background: var(--kht-white);

    box-shadow:
        0 28px 68px rgba(20, 78, 57, 0.12),
        inset 0 0 0 8px rgba(40, 203, 139, 0.025);
}

/* Tạo vòng viền mảnh phía trong logo chính */
.kht-he-sinh-thai .img-group > .col-inner::before {
    content: "";
    position: absolute;

    inset: 15px;

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

    pointer-events: none;
}

/* Tạo vùng sáng mềm phía sau logo tập đoàn */
.kht-he-sinh-thai .img-group > .col-inner::after {
    content: "";
    position: absolute;

    inset: -44px;
    z-index: -1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(40, 203, 139, 0.12),
            transparent 69%
        );

    pointer-events: none;
}

/* Căn ảnh logo chính vào giữa vòng tròn */
.kht-he-sinh-thai .img-group .img {
    position: relative;
    z-index: 2;

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

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;
}

/* Loại bỏ nền dark mặc định của Flatsome */
.kht-he-sinh-thai .img-group .img-inner {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 50%;

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

/* Giữ đúng tỷ lệ logo, không kéo méo ảnh */
.kht-he-sinh-thai .img-group img {
    display: block;

    width: auto;
    height: auto;

    max-width: 88%;
    max-height: 88%;

    object-fit: contain;
    object-position: center;
}

/* =========================================================
   KHUNG CHỨA CÔNG TY THÀNH VIÊN
   ========================================================= */

.kht-he-sinh-thai .img-hst {
    position: absolute;

    inset: 0;
    z-index: 4;

    width: 100%;
    max-width: none;
}

/* Biến col-inner thành hệ tọa độ cho bốn card */
.kht-he-sinh-thai .img-hst > .col-inner {
    position: absolute;

    inset: 0;
}

/* =========================================================
   CARD CÔNG TY THÀNH VIÊN
   ========================================================= */

.kht-he-sinh-thai .img-hst .box {
    --card-accent: var(--kht-primary);
    --box-left: 540px;
    --box-top: 100px;
    --connector-length: 185px;

    position: absolute;

    top: var(--box-top);
    left: var(--box-left);

    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: center;

    gap: 25px;

    width: calc(100% - var(--box-left));
    max-width: 800px;

    margin: 0;

    overflow: visible;

    background: transparent;

    transform: translateY(-50%);
}

/* Card Việt Hương Cosmetics */
.kht-he-sinh-thai .img-hst .box:nth-child(1) {
    --card-accent: #28cb8b;
    --box-left: 540px;
    --box-top: 100px;
    --connector-length: 185px;
}

/* Card KCC */
.kht-he-sinh-thai .img-hst .box:nth-child(2) {
    --card-accent: #20b77d;
    --box-left: 600px;
    --box-top: 285px;
    --connector-length: 104px;
}

/* Card IPCR */
.kht-he-sinh-thai .img-hst .box:nth-child(3) {
    --card-accent: #15966a;
    --box-left: 600px;
    --box-top: 475px;
    --connector-length: 104px;
}

/* Card KEHETO */
.kht-he-sinh-thai .img-hst .box:nth-child(4) {
    --card-accent: #45d7a2;
    --box-left: 540px;
    --box-top: 660px;
    --connector-length: 185px;
}

/* =========================================================
   NODE TRÊN ĐƯỜNG CUNG
   ========================================================= */

.kht-he-sinh-thai .img-hst .box::before {
    content: "";
    position: absolute;

    top: 50%;
    left: calc(0px - var(--connector-length));
    z-index: 6;

    width: 18px;
    height: 18px;

    border: 3px solid var(--card-accent);
    border-radius: 50%;

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

    background: var(--kht-white);

    box-shadow:
        0 0 0 6px rgba(40, 203, 139, 0.07),
        0 5px 14px rgba(20, 78, 57, 0.08);

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

/* =========================================================
   ĐƯỜNG NGANG TỪ CUNG ĐẾN LOGO
   ========================================================= */

.kht-he-sinh-thai .img-hst .box::after {
    content: "";
    position: absolute;

    top: 50%;
    left: calc(0px - var(--connector-length));
    z-index: 2;

    width: var(--connector-length);

    border-top: 2px solid rgba(40, 203, 139, 0.4);

    transform: translateY(-50%);

    pointer-events: none;
}

/* =========================================================
   LOGO CÔNG TY THÀNH VIÊN
   ========================================================= */

.kht-he-sinh-thai .img-hst .box-image {
    position: relative;
    z-index: 4;

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

    width: 180px;
    height: 180px;

    padding: 17px;

    overflow: visible;

    border: 5px solid var(--card-accent);
    border-radius: 50%;

    background: var(--kht-white);

    box-shadow:
        0 18px 42px rgba(20, 72, 53, 0.11),
        inset 0 0 0 6px rgba(40, 203, 139, 0.025);

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

/* Tạo đầu nối hình thoi giữa logo và bảng tên */
.kht-he-sinh-thai .img-hst .box-image::after {
    content: "";
    position: absolute;

    top: 50%;
    right: -17px;
    z-index: 1;

    width: 32px;
    height: 32px;

    border-radius: 4px;

    background: var(--card-accent);

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

/* Căn logo vào giữa vòng tròn */
.kht-he-sinh-thai .img-hst .box-image > div {
    position: relative;
    z-index: 2;

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

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 50%;

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

/* Giữ đúng tỷ lệ logo bên phải */
.kht-he-sinh-thai .img-hst .box-image img {
    display: block;

    width: auto;
    height: auto;

    max-width: 94%;
    max-height: 94%;

    object-fit: contain;
    object-position: center;

    transition: transform 0.3s ease;
}

/* Điều chỉnh riêng logo Việt Hương Cosmetics */
.kht-he-sinh-thai .img-hst .box:nth-child(1) .box-image img {
    transform: scale(1.3);
}

/* Điều chỉnh riêng logo KCC */
.kht-he-sinh-thai .img-hst .box:nth-child(2) .box-image img {
    transform: scale(1.24);
}

/* Điều chỉnh riêng logo IPCR */
.kht-he-sinh-thai .img-hst .box:nth-child(3) .box-image img {
    transform: scale(1.1);
}

/* Điều chỉnh riêng logo KEHETO */
.kht-he-sinh-thai .img-hst .box:nth-child(4) .box-image img {
    transform: scale(1.02);
}

/* =========================================================
   BẢNG TÊN CÔNG TY
   ========================================================= */

.kht-he-sinh-thai .img-hst .box-text {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;

    min-height: 78px;

    padding: 14px 22px 14px 28px;

    overflow: hidden;

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

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

    box-shadow:
        0 11px 27px rgba(20, 72, 53, 0.045),
        0 3px 9px rgba(20, 72, 53, 0.025);

    backdrop-filter: blur(8px);

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

/* Tạo đường màu mảnh phía trên bảng tên */
.kht-he-sinh-thai .img-hst .box-text::before {
    content: "";
    position: absolute;

    top: 0;
    right: 22px;
    left: 28px;

    height: 3px;

    border-radius: 0 0 999px 999px;

    background: var(--card-accent);

    opacity: 0.7;
}

/* Loại bỏ khoảng cách mặc định của Flatsome */
.kht-he-sinh-thai .img-hst .box-text-inner {
    width: 100%;

    padding: 0;
}

/* Định dạng tên công ty nhỏ và nhẹ */
.kht-he-sinh-thai .img-hst .box-text h4 {
    margin: 0;

    color: var(--kht-text);

    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;

    text-align: left;
}

/* =========================================================
   HOVER DESKTOP
   ========================================================= */

.kht-he-sinh-thai .img-hst .box:hover::before {
    background: var(--card-accent);

    transform:
        translate(-50%, -50%)
        scale(1.12);

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

.kht-he-sinh-thai .img-hst .box:hover .box-image {
    transform: translateX(4px);

    box-shadow:
        0 22px 48px rgba(20, 72, 53, 0.15),
        inset 0 0 0 6px rgba(40, 203, 139, 0.035);
}

.kht-he-sinh-thai .img-hst .box:nth-child(1):hover .box-image img {
    transform: scale(1.35);
}

.kht-he-sinh-thai .img-hst .box:nth-child(2):hover .box-image img {
    transform: scale(1.29);
}

.kht-he-sinh-thai .img-hst .box:nth-child(3):hover .box-image img {
    transform: scale(1.15);
}

.kht-he-sinh-thai .img-hst .box:nth-child(4):hover .box-image img {
    transform: scale(1.07);
}

.kht-he-sinh-thai .img-hst .box:hover .box-text {
    transform: translateX(3px);

    border-color: rgba(40, 203, 139, 0.28);
}

/* =========================================================
   CSS HỖ TRỢ GSAP DESKTOP

   Các biến CSS chỉ được kích hoạt khi JavaScript thêm class
   kht-desktop-intro-active vào section.
   ========================================================= */

@media screen and (min-width: 850px) {
    /* Điều khiển cung tròn nét đứt */
    .kht-he-sinh-thai.kht-desktop-intro-active .row.img::before {
        opacity: var(--kht-arc-opacity, 0);

        transform:
            translate(-50%, -50%)
            scale(var(--kht-arc-scale, 0.97));

        transition: none;

        will-change: opacity, transform;
    }

    /* Điều khiển đường ngang của từng card */
    .kht-he-sinh-thai.kht-desktop-intro-active
    .img-hst
    .box::after {
        opacity: var(--kht-line-opacity, 0);

        transform:
            translateY(-50%)
            scaleX(var(--kht-line-progress, 0));

        transform-origin: right center;

        transition: none;

        will-change: opacity, transform;
    }

    /* Điều khiển node tại điểm cắm vào đường cong */
    .kht-he-sinh-thai.kht-desktop-intro-active
    .img-hst
    .box::before {
        opacity: var(--kht-node-opacity, 0);

        transform:
            translate(-50%, -50%)
            scale(var(--kht-node-scale, 0));

        transition: none;

        will-change: opacity, transform;
    }

    /* Tạm tắt transition CSS khi GSAP đang chạy */
    .kht-he-sinh-thai.kht-desktop-intro-active
    .img-hst
    .box-image,
    .kht-he-sinh-thai.kht-desktop-intro-active
    .img-hst
    .box-text {
        transition: none;
    }
}

/* =========================================================
   TIÊU ĐỀ TABLET NGANG
   Sao chép kích thước responsive của section Chứng nhận
   ========================================================= */

@media screen and (max-width: 1024px) {
    .kht-he-sinh-thai .tieu-de p {
        font-size: 2rem;
    }
}

/* =========================================================
   LAPTOP: 850PX - 1199PX
   Giữ nguyên cấu trúc desktop hiện tại
   ========================================================= */

@media screen and (min-width: 850px) and (max-width: 1199px) {
    .kht-he-sinh-thai > .section-content {
        padding-top: 62px;
        padding-bottom: 70px;
    }

    .kht-he-sinh-thai .row.img {
        min-height: 620px;
    }

    /* Thu cung tròn theo màn hình laptop */
    .kht-he-sinh-thai .row.img::before {
        left: 150px;

        width: 540px;
        height: 540px;
    }

    /* Thu logo tập đoàn theo màn hình laptop */
    .kht-he-sinh-thai .img-group {
        width: 300px;
        height: 300px;
    }

    .kht-he-sinh-thai .img-group > .col-inner {
        width: 300px;
        height: 300px;

        padding: 28px;

        border-width: 5px;
    }

    /* Thu kích thước card theo màn hình laptop */
    .kht-he-sinh-thai .img-hst .box {
        grid-template-columns: 148px minmax(0, 1fr);

        gap: 19px;
    }

    .kht-he-sinh-thai .img-hst .box:nth-child(1) {
        --box-left: 430px;
        --box-top: 80px;
        --connector-length: 139px;
    }

    .kht-he-sinh-thai .img-hst .box:nth-child(4) {
        --box-left: 430px;
        --box-top: 540px;
        --connector-length: 139px;
    }

    .kht-he-sinh-thai .img-hst .box:nth-child(2) {
        --box-left: 480px;
        --box-top: 230px;
        --connector-length: 72px;
    }

    .kht-he-sinh-thai .img-hst .box:nth-child(3) {
        --box-left: 480px;
        --box-top: 390px;
        --connector-length: 72px;
    }

    .kht-he-sinh-thai .img-hst .box-image {
        width: 148px;
        height: 148px;

        padding: 14px;

        border-width: 4px;
    }

    .kht-he-sinh-thai .img-hst .box-image::after {
        right: -13px;

        width: 25px;
        height: 25px;
    }

    .kht-he-sinh-thai .img-hst .box-text {
        min-height: 68px;

        padding: 12px 14px 12px 22px;
    }

    .kht-he-sinh-thai .img-hst .box-text h4 {
        font-size: 8.8px;
    }
}

/* =========================================================
   MOBILE: TỐI ĐA 849PX

   Chỉ thay đổi giao diện mobile:
   - Hiển thị tiêu đề section
   - Logo chính lớn ở giữa
   - Bốn logo thành viên ở xung quanh
   - Ẩn bảng text
   - Ẩn đường line, node và hình thoi
   ========================================================= */

@media screen and (max-width: 849px) {
    .kht-he-sinh-thai {
        overflow: hidden;

        background:
            radial-gradient(
                circle at 50% 62%,
                rgba(40, 203, 139, 0.13),
                transparent 47%
            ),
            linear-gradient(
                180deg,
                #ffffff 0%,
                #f4fbf8 100%
            );
    }

    /* Điều chỉnh khoảng cách section trên mobile */
    .kht-he-sinh-thai > .section-content {
        padding: 46px 0 44px;
    }

    /* Tiêu đề tại tablet kế thừa trực tiếp giao diện Chứng nhận tiêu chuẩn. */

    /* =====================================================
       KHU VỰC BỐ TRÍ NĂM LOGO
       ===================================================== */

    .kht-he-sinh-thai .row.img {
        position: relative;
        display: block;

        width: calc(100% - 16px);
        max-width: 520px;
        min-height: clamp(350px, 100vw, 440px);

        margin: 0 auto;

        overflow: visible;
    }

    /* Ẩn nửa vòng tròn desktop */
    .kht-he-sinh-thai .row.img::before {
        display: none;
    }

    /* Hủy kích thước cột mặc định của Flatsome */
    .kht-he-sinh-thai .row.img > .col {
        width: auto;
        max-width: none;

        padding: 0;

        flex-basis: auto;
    }

    /* =====================================================
       LOGO TẬP ĐOÀN LỚN Ở CHÍNH GIỮA
       ===================================================== */

    .kht-he-sinh-thai .img-group {
        position: absolute;

        top: 50%;
        left: 50%;
        z-index: 5;

        width: clamp(180px, 51vw, 230px);
        height: clamp(180px, 51vw, 230px);

        margin: 0;

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

    .kht-he-sinh-thai .img-group > .col-inner {
        width: 100%;
        height: 100%;

        margin: 0;
        padding: clamp(19px, 5vw, 29px);

        border-width: 4px;

        box-shadow:
            0 22px 48px rgba(20, 78, 57, 0.12),
            inset 0 0 0 5px rgba(40, 203, 139, 0.03);
    }

    .kht-he-sinh-thai .img-group > .col-inner::before {
        inset: 11px;
    }

    .kht-he-sinh-thai .img-group > .col-inner::after {
        inset: -32px;
    }

    .kht-he-sinh-thai .img-group img {
        max-width: 91%;
        max-height: 91%;
    }

    /* =====================================================
       KHUNG CHỨA BỐN LOGO THÀNH VIÊN
       ===================================================== */

    .kht-he-sinh-thai .img-hst {
        position: absolute;

        inset: 0;
        z-index: 6;

        width: 100%;
        height: 100%;
    }

    .kht-he-sinh-thai .img-hst > .col-inner {
        position: absolute;

        inset: 0;

        display: block;

        width: 100%;
        height: 100%;

        padding: 0;
    }

    /* Reset toàn bộ cấu trúc card desktop */
    .kht-he-sinh-thai .img-hst .box,
    .kht-he-sinh-thai .img-hst .box:nth-child(1),
    .kht-he-sinh-thai .img-hst .box:nth-child(2),
    .kht-he-sinh-thai .img-hst .box:nth-child(3),
    .kht-he-sinh-thai .img-hst .box:nth-child(4) {
        position: absolute;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        display: block;

        width: clamp(78px, 23vw, 106px);
        height: clamp(78px, 23vw, 106px);
        max-width: none;

        margin: 0;

        overflow: visible;

        background: transparent;

        transform: none;
    }

    /* Việt Hương Cosmetics ở góc trên bên trái */
    .kht-he-sinh-thai .img-hst .box:nth-child(1) {
        top: 7%;
        left: 3%;
    }

    /* KCC ở góc trên bên phải */
    .kht-he-sinh-thai .img-hst .box:nth-child(2) {
        top: 7%;
        right: 3%;
    }

    /* IPCR ở góc dưới bên trái */
    .kht-he-sinh-thai .img-hst .box:nth-child(3) {
        bottom: 7%;
        left: 3%;
    }

    /* KEHETO ở góc dưới bên phải */
    .kht-he-sinh-thai .img-hst .box:nth-child(4) {
        right: 3%;
        bottom: 7%;
    }

    /* Ẩn toàn bộ node và đường line trên mobile */
    .kht-he-sinh-thai .img-hst .box::before,
    .kht-he-sinh-thai .img-hst .box::after {
        display: none;
    }

    /* Ẩn toàn bộ bảng tên và nội dung card */
    .kht-he-sinh-thai .img-hst .box-text {
        display: none;
    }

    /* =====================================================
       VÒNG TRÒN LOGO THÀNH VIÊN MOBILE
       ===================================================== */

    .kht-he-sinh-thai .img-hst .box-image {
        position: relative;

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

        width: 100%;
        height: 100%;

        padding: 0;

        overflow: visible;

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

        background: var(--kht-white);

        box-shadow:
            0 14px 30px rgba(20, 72, 53, 0.11),
            inset 0 0 0 3px rgba(40, 203, 139, 0.03);

        transition: none;

        will-change: transform;
    }

    /* Ẩn hình thoi nối bảng tên */
    .kht-he-sinh-thai .img-hst .box-image::after {
        display: none;
    }

    /* Tạo vùng chứa an toàn bên trong logo tròn */
    .kht-he-sinh-thai .img-hst .box-image > div {
        display: flex;
        align-items: center;
        justify-content: center;

        width: calc(100% - 12px);
        height: calc(100% - 12px);

        margin: 6px;
        padding: 5px;

        overflow: hidden;

        border-radius: 50%;

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

    /* Reset toàn bộ transform ảnh từ desktop */
    .kht-he-sinh-thai .img-hst .box-image img,
    .kht-he-sinh-thai
    .img-hst
    .box:nth-child(1)
    .box-image img,
    .kht-he-sinh-thai
    .img-hst
    .box:nth-child(2)
    .box-image img,
    .kht-he-sinh-thai
    .img-hst
    .box:nth-child(3)
    .box-image img,
    .kht-he-sinh-thai
    .img-hst
    .box:nth-child(4)
    .box-image img {
        display: block;

        width: 86%;
        height: 86%;
        max-width: none;
        max-height: none;

        object-fit: contain;
        object-position: center;

        transform: none;
        transition: none;
    }

    /* Logo Việt Hương Cosmetics cần nhiều chiều ngang */
    .kht-he-sinh-thai
    .img-hst
    .box:nth-child(1)
    .box-image img {
        width: 92%;
        height: 92%;
    }

    /* Logo KCC dạng ngang */
    .kht-he-sinh-thai
    .img-hst
    .box:nth-child(2)
    .box-image img {
        width: 93%;
        height: 93%;
    }

    /* Logo IPCR dạng dọc */
    .kht-he-sinh-thai
    .img-hst
    .box:nth-child(3)
    .box-image img {
        width: 79%;
        height: 79%;
    }

    /* Logo KEHETO */
    .kht-he-sinh-thai
    .img-hst
    .box:nth-child(4)
    .box-image img {
        width: 82%;
        height: 82%;
    }

    /* Hủy hiệu ứng hover desktop trên mobile */
    .kht-he-sinh-thai .img-hst .box:hover .box-image {
        transform: none;

        box-shadow:
            0 14px 30px rgba(20, 72, 53, 0.11),
            inset 0 0 0 3px rgba(40, 203, 139, 0.03);
    }

    .kht-he-sinh-thai
    .img-hst
    .box:nth-child(1):hover
    .box-image img,
    .kht-he-sinh-thai
    .img-hst
    .box:nth-child(2):hover
    .box-image img,
    .kht-he-sinh-thai
    .img-hst
    .box:nth-child(3):hover
    .box-image img,
    .kht-he-sinh-thai
    .img-hst
    .box:nth-child(4):hover
    .box-image img {
        transform: none;
    }
}

/* =========================================================
   TIÊU ĐỀ MOBILE
   Sao chép đúng responsive của section Chứng nhận tiêu chuẩn
   ========================================================= */

@media screen and (max-width: 549px) {
    .kht-he-sinh-thai .tieu-de {
        margin-bottom: 22px;
        padding: 0 16px;
    }

    .kht-he-sinh-thai .tieu-de p {
        gap: 11px;

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

    /* Thu nhỏ thanh nhận diện bên trái tiêu đề */
    .kht-he-sinh-thai .tieu-de p::before {
        flex-basis: 5px;

        width: 5px;
        height: 34px;
    }

    /* Ẩn đường trang trí phía sau tiêu đề trên mobile */
    .kht-he-sinh-thai .tieu-de p::after {
        display: none;
    }
}

/* =========================================================
   MOBILE NHỎ DƯỚI 390PX
   ========================================================= */

@media screen and (max-width: 390px) {
    .kht-he-sinh-thai > .section-content {
        padding-top: 38px;
        padding-bottom: 32px;
    }

    /* Tiêu đề màn hình nhỏ giữ nguyên thiết lập mobile của Chứng nhận tiêu chuẩn. */

    .kht-he-sinh-thai .row.img {
        width: calc(100% - 10px);
        min-height: 330px;
    }

    /* Thu logo chính vừa đủ cho màn hình nhỏ */
    .kht-he-sinh-thai .img-group {
        width: clamp(168px, 49vw, 188px);
        height: clamp(168px, 49vw, 188px);
    }

    /* Thu bốn logo vệ tinh */
    .kht-he-sinh-thai .img-hst .box,
    .kht-he-sinh-thai .img-hst .box:nth-child(1),
    .kht-he-sinh-thai .img-hst .box:nth-child(2),
    .kht-he-sinh-thai .img-hst .box:nth-child(3),
    .kht-he-sinh-thai .img-hst .box:nth-child(4) {
        width: clamp(68px, 21vw, 80px);
        height: clamp(68px, 21vw, 80px);
    }

    /* Điều chỉnh hai logo phía trên */
    .kht-he-sinh-thai .img-hst .box:nth-child(1),
    .kht-he-sinh-thai .img-hst .box:nth-child(2) {
        top: 6%;
    }

    /* Điều chỉnh hai logo phía dưới */
    .kht-he-sinh-thai .img-hst .box:nth-child(3),
    .kht-he-sinh-thai .img-hst .box:nth-child(4) {
        bottom: 6%;
    }

    /* Điều chỉnh hai logo bên trái */
    .kht-he-sinh-thai .img-hst .box:nth-child(1),
    .kht-he-sinh-thai .img-hst .box:nth-child(3) {
        left: 1%;
    }

    /* Điều chỉnh hai logo bên phải */
    .kht-he-sinh-thai .img-hst .box:nth-child(2),
    .kht-he-sinh-thai .img-hst .box:nth-child(4) {
        right: 1%;
    }

    .kht-he-sinh-thai .img-hst .box-image > div {
        width: calc(100% - 10px);
        height: calc(100% - 10px);

        margin: 5px;
        padding: 4px;
    }
}

/* =========================================================
   HỖ TRỢ NGƯỜI DÙNG HẠN CHẾ CHUYỂN ĐỘNG
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .kht-he-sinh-thai .img-hst .box::before,
    .kht-he-sinh-thai .img-hst .box-image,
    .kht-he-sinh-thai .img-hst .box-image img,
    .kht-he-sinh-thai .img-hst .box-text {
        transition: none;
    }
}














/* =========================================================
   SECTION: HÌNH THÀNH VÀ PHÁT TRIỂN
   ========================================================= */

.kht-lichsuhinhthanh {
    --kht-primary: #28cb8b;
    --kht-secondary: #263238;
    --kht-grey: #717171;
    --kht-silver: #f5f7fa;
    --kht-white: #ffffff;

    /* Chiều cao ảnh và trục năm trên desktop */
    --kht-image-height: 410px;

    /*
     * Khoảng cách từ đầu khối bên trái đến mép trên ảnh.
     * JavaScript chỉ cập nhật biến này để căn cột năm theo ảnh.
     */
    --kht-years-offset: 0px;

    position: relative;

    /* Cách section phía trên đúng 50px */
    padding: 50px 0 80px;

    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 93% 42%,
            rgba(40, 203, 139, 0.1),
            transparent 32rem
        ),
        var(--kht-white);
}

.kht-lichsuhinhthanh,
.kht-lichsuhinhthanh * {
    box-sizing: border-box;
}

/* Đặt nội dung nằm trên phần nền section */
.kht-lichsuhinhthanh .section-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

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

   Thay đổi giao diện:
   - Sao chép đúng bố cục tiêu đề của section Chứng nhận tiêu chuẩn
   - Giữ nguyên toàn bộ cấu trúc, slider, GSAP và nội dung còn lại
   ========================================================= */

.kht-lichsuhinhthanh .tieu-de {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto 36px;
    padding: 0;
}

.kht-lichsuhinhthanh .tieu-de > .col {
    width: 100%;
    max-width: 100%;
    padding: 0;
    flex-basis: 100%;
}

.kht-lichsuhinhthanh .tieu-de .col-inner {
    padding: 0;

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

.kht-lichsuhinhthanh .tieu-de h2 {
    position: relative;

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

    margin: 0;

    color: #18372c;

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

/* Thanh màu nhận diện bên trái tiêu đề */
.kht-lichsuhinhthanh .tieu-de h2::before {
    content: "";

    display: block;
    flex: 0 0 7px;

    width: 7px;
    height: 42px;

    border-radius: 20px;

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

/* Đường trang trí phía sau tiêu đề */
.kht-lichsuhinhthanh .tieu-de h2::after {
    content: "";

    display: block;
    flex: 1;

    height: 1px;
    margin-left: 8px;

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

/* =========================================================
   BỐ CỤC NỘI DUNG
   Toàn bộ khu vực rộng tối đa 1320px
   ========================================================= */

.kht-lichsuhinhthanh .noi-dung {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(250px, 1fr);
    gap: 38px;

    /* Giữ nguyên bố cục gốc */
    align-items: end;

    width: 100%;
    max-width: 1320px !important;
    margin: 0 auto;
}

.kht-lichsuhinhthanh .noi-dung > .col {
    width: 100%;
    padding: 0;
    max-width: none;
    flex-basis: auto;
}

.kht-lichsuhinhthanh .trai > .col-inner,
.kht-lichsuhinhthanh .phai > .col-inner {
    margin: 0;
}

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

.kht-lichsuhinhthanh .trai {
    min-width: 0;
    overflow: hidden;
}

.kht-lichsuhinhthanh .trai > .col-inner {
    position: relative;
    height: 540px;
    overflow: hidden;
    touch-action: pan-y;
}

/* Trước khi JS chạy chỉ hiển thị nội dung đầu tiên */
.kht-lichsuhinhthanh:not(.kht-timeline-ready)
.trai > .col-inner > .row:not(:first-child) {
    display: none;
}

/* Xếp chồng các slide để GSAP chuyển ngang */
.kht-lichsuhinhthanh.kht-timeline-ready
.trai > .col-inner > .row {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    max-width: none;
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity;
}

/* Reset cột Flatsome trong từng slide */
.kht-lichsuhinhthanh
.trai > .col-inner > .row > .col {
    width: 100%;
    padding: 0;
    max-width: 100%;
    flex-basis: 100%;
}

/* Sắp xếp tiêu đề, mô tả và ảnh theo chiều dọc */
.kht-lichsuhinhthanh
.trai > .col-inner > .row > .col > .col-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Tiêu đề từng cột mốc */
.kht-lichsuhinhthanh .trai h5 {
    margin: 0 0 8px;
    color: var(--kht-secondary);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.015em;
}

/* Mô tả từng cột mốc */
.kht-lichsuhinhthanh .trai p {
    max-width: 900px;
    margin: 0 0 20px;
    color: var(--kht-grey);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.65;
}

/* Khung ảnh */
.kht-lichsuhinhthanh .trai .img {
    width: 100%;
    height: var(--kht-image-height);

    /*
     * Thay đổi theo yêu cầu:
     * Xóa margin-top: auto để ảnh nằm ngay sau phần mô tả.
     */
    margin: 0;

    overflow: hidden;
    border-radius: 20px;
    background: var(--kht-silver);
}

/* Khung bên trong ảnh */
.kht-lichsuhinhthanh .trai .img-inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
}

/* Cắt ảnh đồng đều */
.kht-lichsuhinhthanh .trai .img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* =========================================================
   CỘT NĂM BÊN PHẢI
   Chỉ cao bằng ảnh và mép trên thẳng với ảnh
   ========================================================= */

.kht-lichsuhinhthanh .phai {
    min-width: 0;

    /*
     * Không căn theo đáy toàn bộ khối text + ảnh.
     * Khung năm bắt đầu từ đầu grid và được dịch xuống đúng mép ảnh.
     */
    align-self: start;
    transform: translateY(var(--kht-years-offset));
}

/* Khung năm chỉ cao đúng bằng chiều cao ảnh */
.kht-lichsuhinhthanh .phai > .col-inner {
    position: relative;
    width: 100%;
    height: var(--kht-image-height);
    overflow: hidden;
}

/* Trước khi JS chạy chỉ hiển thị năm đầu tiên */
.kht-lichsuhinhthanh:not(.kht-timeline-ready)
.phai > .col-inner > .row:not(:first-child) {
    display: none;
}

/* Xếp các năm tuyệt đối để chuyển động dọc */
.kht-lichsuhinhthanh.kht-timeline-ready
.phai > .col-inner > .row {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin: 0;
    max-width: none;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
    will-change: transform, opacity;
}

/* Reset cột Flatsome bên trong từng năm */
.kht-lichsuhinhthanh
.phai > .col-inner > .row > .col {
    width: 100%;
    padding: 0;
    max-width: 100%;
    flex-basis: 100%;
}

/* =========================================================
   CÁC NĂM CHƯA ACTIVE
   Font-size đúng 2rem
   ========================================================= */

.kht-lichsuhinhthanh .phai p {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 12px 0 12px 72px;
    color: var(--kht-secondary);

    /* Kích thước năm chưa active */
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;

    white-space: nowrap;
    text-align: right;

    transition:
        color 0.8s ease,
        font-size 0.8s ease,
        font-weight 0.8s ease;
}

/* =========================================================
   ĐƯỜNG LINE
   Active nằm tại 50% khung năm nên line nằm giữa ảnh
   ========================================================= */

.kht-lichsuhinhthanh .phai p::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--kht-primary);
    content: "";
    transform: translateY(-50%);
    transition: width 0.8s ease;
}

/* =========================================================
   NĂM ACTIVE
   Font-size đúng 3.5rem
   ========================================================= */

.kht-lichsuhinhthanh .phai .row.is-active p {
    color: var(--kht-primary);
    font-size: 3.5rem;
    font-weight: 700;
}

/* Chiều dài đường line active */
.kht-lichsuhinhthanh .phai .row.is-active p::before {
    width: 60px;
}

/* Hover vào năm chưa active */
.kht-lichsuhinhthanh .phai .row:not(.is-active):hover p {
    color: var(--kht-primary);
}

/* =========================================================
   MÀN HÌNH NHỎ HƠN 1360PX
   Giữ tối đa 1320px nhưng thêm khoảng an toàn hai bên
   ========================================================= */

@media (max-width: 1359px) {
    .kht-lichsuhinhthanh .tieu-de,
    .kht-lichsuhinhthanh .noi-dung {
        width: calc(100% - 40px);
    }
}

/* =========================================================
   TIÊU ĐỀ TABLET NGANG
   Sao chép kích thước responsive của section Chứng nhận
   ========================================================= */

@media screen and (max-width: 1024px) {
    .kht-lichsuhinhthanh .tieu-de {
        width: calc(100% - 36px);
    }

    .kht-lichsuhinhthanh .tieu-de h2 {
        font-size: 2rem;
    }
}

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

@media (max-width: 849px) {
    .kht-lichsuhinhthanh {
        /* --kht-image-height: 340px; */

        padding-top: 50px;
        padding-bottom: 58px;
    }

    /* Tiêu đề tại tablet kế thừa trực tiếp giao diện Chứng nhận tiêu chuẩn. */
    .kht-lichsuhinhthanh .tieu-de {
        width: calc(100% - 36px);
    }

    .kht-lichsuhinhthanh .noi-dung {
        width: calc(100% - 30px);
    }

    /* Chuyển bố cục thành một cột */
    .kht-lichsuhinhthanh .noi-dung {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    /* Chiều cao slider nội dung */
    .kht-lichsuhinhthanh .trai > .col-inner {
        height: 485px;
    }

    .kht-lichsuhinhthanh .trai h5 {
        font-size: 1.2rem;
    }

    .kht-lichsuhinhthanh .trai p {
        margin-bottom: 16px;
        font-size: 0.95rem;
        line-height: 1.55;
    }

    .kht-lichsuhinhthanh .trai .img {
        height: var(--kht-image-height);
        border-radius: 16px;
    }

    /* Trục năm chuyển sang nằm ngang */
    .kht-lichsuhinhthanh .phai {
        align-self: auto;

        /*
         * Mobile không căn cột năm theo ảnh,
         * vì trục năm nằm bên dưới nội dung.
         */
        transform: none;
    }

    .kht-lichsuhinhthanh .phai > .col-inner {
        height: 100px;
    }

    .kht-lichsuhinhthanh.kht-timeline-ready
    .phai > .col-inner > .row {
        width: auto;
    }

    .kht-lichsuhinhthanh
    .phai > .col-inner > .row > .col {
        width: auto;
        max-width: none;
        flex-basis: auto;
    }

    /* Năm chưa active trên tablet/mobile */
    .kht-lichsuhinhthanh .phai p {
        width: auto;
        padding: 8px 0;
        font-size: 1.15rem;
        text-align: center;
    }

    /* Năm active trên tablet/mobile */
    .kht-lichsuhinhthanh .phai .row.is-active p {
        font-size: 2rem;
    }

    /* Không dùng line trên mobile */
    .kht-lichsuhinhthanh .phai p::before {
        display: none;
    }
}

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

@media (max-width: 549px) {
    .kht-lichsuhinhthanh {
        /* --kht-image-height: 275px; */

        padding-top: 50px;
        padding-bottom: 48px;
    }

    /* Tiêu đề mobile sao chép đúng responsive của section Chứng nhận */
    .kht-lichsuhinhthanh .tieu-de {
        width: 100%;
        margin-bottom: 22px;
        padding: 0 16px;
    }

    .kht-lichsuhinhthanh .tieu-de h2 {
        gap: 11px;

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

    /* Thu nhỏ thanh nhận diện bên trái tiêu đề */
    .kht-lichsuhinhthanh .tieu-de h2::before {
        flex-basis: 5px;

        width: 5px;
        height: 34px;
    }

    /* Ẩn đường trang trí phía sau tiêu đề trên mobile */
    .kht-lichsuhinhthanh .tieu-de h2::after {
        display: none;
    }

    .kht-lichsuhinhthanh .trai > .col-inner {
        height: 430px;
    }

    .kht-lichsuhinhthanh .trai h5 {
        margin-bottom: 6px;
        font-size: 1.05rem;
    }

    .kht-lichsuhinhthanh .trai p {
        margin-bottom: 14px;
        font-size: 0.88rem;
        line-height: 1.5;
    }

    .kht-lichsuhinhthanh .trai .img {
        height: var(--kht-image-height);
        border-radius: 14px;
    }

    .kht-lichsuhinhthanh .phai > .col-inner {
        height: 84px;
    }

    /* Năm chưa active trên mobile nhỏ */
    .kht-lichsuhinhthanh .phai p {
        font-size: 0.9rem;
    }

    /* Năm active trên mobile nhỏ */
    .kht-lichsuhinhthanh .phai .row.is-active p {
        font-size: 1.55rem;
    }
}

/* Tôn trọng thiết lập giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
    .kht-lichsuhinhthanh .phai p,
    .kht-lichsuhinhthanh .phai p::before {
        transition: none;
    }
}











/* =========================================================
   SECTION CHỨNG NHẬN TIÊU CHUẨN
   Giữ nguyên HTML Flatsome hiện tại
========================================================= */

.kht-chung-nhan {
	--kht-cn-primary: #28cb8b;
	--kht-cn-primary-dark: #159a66;
	--kht-cn-text: #18372c;
	--kht-cn-border: rgba(24, 55, 44, 0.1);
	--kht-cn-card-width-mobile: min(78vw, 340px);

	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.kht-chung-nhan,
.kht-chung-nhan * {
	box-sizing: border-box;
}


/* =========================================================
   1. NỀN SECTION
========================================================= */

.kht-chung-nhan .section-bg {
	background:
		radial-gradient(
			circle at 8% 18%,
			rgba(40, 203, 139, 0.13) 0,
			rgba(40, 203, 139, 0) 31%
		),
		radial-gradient(
			circle at 92% 84%,
			rgba(40, 203, 139, 0.1) 0,
			rgba(40, 203, 139, 0) 29%
		),
		linear-gradient(
			135deg,
			#f2fbf7 0%,
			#ffffff 48%,
			#eefaf5 100%
		);
}


/* =========================================================
   2. KHUNG NỘI DUNG
========================================================= */

.kht-chung-nhan > .section-content {
	position: relative;
	z-index: 2;

	padding-right: 20px;
	padding-left: 20px;
}


/* =========================================================
   3. TIÊU ĐỀ SECTION
========================================================= */

.kht-chung-nhan .tieu-de {
	width: 100%;
	max-width: 1320px;
	margin: 0 auto 36px;
	padding: 0;
}

.kht-chung-nhan .tieu-de > .col {
	width: 100%;
	max-width: 100%;
	padding: 0;
}

.kht-chung-nhan .tieu-de .col-inner {
	padding: 0;

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

.kht-chung-nhan .tieu-de p {
	position: relative;

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

	margin: 0;

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

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

/* Thanh màu nhận diện bên trái tiêu đề */
.kht-chung-nhan .tieu-de p::before {
	content: "";

	display: block;
	flex: 0 0 7px;

	width: 7px;
	height: 42px;

	border-radius: 20px;

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

/* Đường trang trí phía sau tiêu đề */
.kht-chung-nhan .tieu-de p::after {
	content: "";

	display: block;
	flex: 1;

	height: 1px;
	margin-left: 8px;

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


/* =========================================================
   4. BỐ CỤC DESKTOP
========================================================= */

.kht-chung-nhan .section-content > .row.row-small {
	display: grid;
	grid-template-columns:
		minmax(0, 0.92fr)
		minmax(0, 1.32fr)
		minmax(0, 0.92fr);
	align-items: stretch;
	gap: 24px;

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

/* Loại bỏ chiều rộng cột mặc định của Flatsome */
.kht-chung-nhan
.section-content > .row.row-small > .col {
	width: auto;
	max-width: none;
	padding: 0;

	flex: none;
}


/* =========================================================
   5. CARD CHỨNG NHẬN DESKTOP
========================================================= */

.kht-chung-nhan
.section-content > .row.row-small > .col > .col-inner {
	position: relative;

	height: 100%;
	padding: 15px;

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

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

	box-shadow:
		0 18px 50px rgba(21, 92, 64, 0.08),
		0 3px 10px rgba(21, 92, 64, 0.04);

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

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

/* Nhấn mạnh chứng nhận ngang nằm giữa */
.kht-chung-nhan .img2 > .col-inner {
	border-color: rgba(40, 203, 139, 0.28);

	box-shadow:
		0 24px 65px rgba(21, 92, 64, 0.12),
		0 4px 14px rgba(21, 92, 64, 0.06);
}

/* Thanh màu phía trên mỗi card */
.kht-chung-nhan
.section-content > .row.row-small > .col > .col-inner::before,
.kht-chung-nhan
.kht-cn-mobile-track > .col > .col-inner::before {
	content: "";

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

	width: 72px;
	height: 4px;

	border-radius: 0 0 10px 10px;

	background:
		linear-gradient(
			90deg,
			var(--kht-cn-primary-dark),
			var(--kht-cn-primary)
		);

	transform: translateX(-50%);
}


/* =========================================================
   6. KHUNG ẢNH DESKTOP
========================================================= */

.kht-chung-nhan
.section-content > .row.row-small .img {
	width: 100%;
	height: 100%;
	margin: 0;
}

.kht-chung-nhan
.section-content > .row.row-small .img-inner {
	position: relative;

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

	width: 100%;
	height: 520px;
	padding: 20px;
	overflow: hidden;

	border-radius: 17px;

	background:
		linear-gradient(
			135deg,
			rgba(40, 203, 139, 0.06) 0%,
			rgba(255, 255, 255, 0.98) 44%,
			rgba(40, 203, 139, 0.08) 100%
		);

	cursor: zoom-in;
}

/* Viền trang trí bên trong ảnh */
.kht-chung-nhan
.section-content > .row.row-small .img-inner::after {
	content: "";

	position: absolute;
	z-index: 2;
	inset: 8px;

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

	pointer-events: none;
}

/* Ảnh hiển thị toàn bộ, không bị cắt */
.kht-chung-nhan
.section-content > .row.row-small .img-inner img {
	position: relative;
	z-index: 1;

	display: block;

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

	object-fit: contain;
	object-position: center;

	filter:
		saturate(0.98)
		contrast(1.01);

	box-shadow:
		0 14px 36px rgba(25, 54, 44, 0.14);

	cursor: zoom-in;
	user-select: none;
	-webkit-user-drag: none;

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


/* =========================================================
   7. HOVER DESKTOP
========================================================= */

@media (hover: hover) and (pointer: fine) {
	.kht-chung-nhan
	.section-content > .row.row-small > .col > .col-inner:hover {
		transform: translateY(-9px);

		border-color: rgba(40, 203, 139, 0.34);

		box-shadow:
			0 30px 70px rgba(21, 92, 64, 0.15),
			0 6px 18px rgba(21, 92, 64, 0.08);
	}

	.kht-chung-nhan
	.section-content > .row.row-small > .col > .col-inner:hover img {
		transform: scale(1.025);

		filter:
			saturate(1.03)
			contrast(1.02);

		box-shadow:
			0 18px 42px rgba(25, 54, 44, 0.2);
	}
}


/* =========================================================
   8. LIGHTBOX PHÓNG TO ẢNH

   Không có dấu X.
   Nhấn vùng tối bên ngoài ảnh để đóng.
========================================================= */

.kht-certificate-lightbox {
	position: fixed;
	z-index: 999999;
	inset: 0;

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

	padding: 28px;

	opacity: 0;
	visibility: hidden;

	background: rgba(7, 20, 15, 0.9);

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

	cursor: zoom-out;

	transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
}

/* Trạng thái lightbox mở */
.kht-certificate-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

/* Ảnh phóng to */
.kht-certificate-lightbox__image {
	display: block;

	width: auto;
	max-width: min(94vw, 1440px);
	height: auto;
	max-height: 92vh;
	padding: 12px;

	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 18px;

	background: #ffffff;

	box-shadow:
		0 30px 90px rgba(0, 0, 0, 0.42);

	object-fit: contain;

	cursor: default;
	user-select: none;
	-webkit-user-drag: none;

	transform:
		translateY(22px)
		scale(0.96);

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

/* Hiệu ứng khi mở ảnh */
.kht-certificate-lightbox.is-open
.kht-certificate-lightbox__image {
	transform:
		translateY(0)
		scale(1);
}

/* Khóa cuộn trang khi xem ảnh */
body.kht-certificate-lock {
	overflow: hidden;
}


/* =========================================================
   9. TABLET NGANG
========================================================= */

@media screen and (max-width: 1024px) {
	.kht-chung-nhan > .section-content {
		padding-right: 18px;
		padding-left: 18px;
	}

	.kht-chung-nhan
	.section-content > .row.row-small {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));

		gap: 18px;
	}

	.kht-chung-nhan
	.section-content > .row.row-small .img-inner {
		height: 430px;
		padding: 15px;
	}

	.kht-chung-nhan .tieu-de p {
		font-size: 2rem;
	}
}


/* =========================================================
   10. TABLET DỌC
   Không áp dụng cho mobile
========================================================= */

@media screen and (min-width: 550px) and (max-width: 849px) {
	.kht-chung-nhan
	.section-content > .row.row-small {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

	/* Chứng nhận ngang nằm trên cùng */
	.kht-chung-nhan .img2 {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	/* Hai ảnh dọc nằm hàng dưới */
	.kht-chung-nhan .img1 {
		grid-column: 1;
		grid-row: 2;
	}

	.kht-chung-nhan .img3 {
		grid-column: 2;
		grid-row: 2;
	}

	.kht-chung-nhan .img2 .img-inner {
		height: 390px;
	}

	.kht-chung-nhan .img1 .img-inner,
	.kht-chung-nhan .img3 .img-inner {
		height: 470px;
	}
}


/* =========================================================
   11. MOBILE

   Row chỉ là viewport.
   Track bên trong luôn flex nowrap.
   Ba ảnh không thể xuống dòng.
========================================================= */

@media screen and (max-width: 549px) {
	.kht-chung-nhan {
		--kht-cn-card-width-mobile: min(78vw, 340px);
	}

	.kht-chung-nhan > .section-content {
		padding-right: 0;
		padding-left: 0;
	}

	/* Tiêu đề mobile */
	.kht-chung-nhan .tieu-de {
		margin-bottom: 22px;
		padding: 0 16px;
	}

	.kht-chung-nhan .tieu-de p {
		gap: 11px;

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

	/* Thu nhỏ thanh tiêu đề */
	.kht-chung-nhan .tieu-de p::before {
		flex-basis: 5px;

		width: 5px;
		height: 34px;
	}

	/* Ẩn đường kẻ sau tiêu đề */
	.kht-chung-nhan .tieu-de p::after {
		display: none;
	}

	/* Row ngoài chỉ làm khung nhìn */
	.kht-chung-nhan
	.section-content > .row.row-small {
		display: block;

		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0 0 14px;
		overflow: hidden;
	}

	/* Trạng thái dự phòng trước khi JavaScript chạy */
	.kht-chung-nhan
	.section-content > .row.row-small:not(.kht-cn-mobile-ready) {
		display: flex;
		flex-flow: row nowrap;
		align-items: stretch;
		gap: 14px;

		padding-right: 16px;
		padding-left: 16px;

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

		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	/* Ẩn thanh cuộn dự phòng */
	.kht-chung-nhan
	.section-content > .row.row-small:not(.kht-cn-mobile-ready)::-webkit-scrollbar {
		display: none;
	}

	/* Ép ba card gốc nằm ngang ngay cả khi JS chưa chạy */
	.kht-chung-nhan
	.section-content > .row.row-small:not(.kht-cn-mobile-ready) > .col {
		display: block;

		flex: 0 0 var(--kht-cn-card-width-mobile);

		width: var(--kht-cn-card-width-mobile);
		min-width: var(--kht-cn-card-width-mobile);
		max-width: none;
		padding: 0;

		grid-column: auto;
		grid-row: auto;
	}

	/* Track do JavaScript tạo */
	.kht-chung-nhan .kht-cn-mobile-track {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 14px;

		width: max-content;
		min-width: max-content;
		padding: 0 16px;

		transform: translate3d(0, 0, 0);
		will-change: transform;

		touch-action: pan-y;
	}

	/* Ép từng card trong track không được xuống hàng */
	.kht-chung-nhan
	.kht-cn-mobile-track > .col {
		display: block;

		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: var(--kht-cn-card-width-mobile);

		width: var(--kht-cn-card-width-mobile);
		min-width: var(--kht-cn-card-width-mobile);
		max-width: var(--kht-cn-card-width-mobile);
		padding: 0;

		grid-column: auto;
		grid-row: auto;
	}

	/* Xóa vị trí grid của tablet */
	.kht-chung-nhan
	.kht-cn-mobile-track > .img1,
	.kht-chung-nhan
	.kht-cn-mobile-track > .img2,
	.kht-chung-nhan
	.kht-cn-mobile-track > .img3 {
		order: initial;

		grid-column: auto;
		grid-row: auto;
	}

	/* Card mobile */
	.kht-chung-nhan
	.kht-cn-mobile-track > .col > .col-inner {
		position: relative;

		height: 100%;
		padding: 11px;

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

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

		box-shadow:
			0 14px 38px rgba(21, 92, 64, 0.09);
	}

	/* Khung ảnh mobile */
	.kht-chung-nhan
	.kht-cn-mobile-track .img {
		width: 100%;
		height: 100%;
		margin: 0;
	}

	.kht-chung-nhan
	.kht-cn-mobile-track .img-inner {
		position: relative;

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

		width: 100%;
		height: 400px;
		padding: 14px;
		overflow: hidden;

		border-radius: 13px;

		background:
			linear-gradient(
				135deg,
				rgba(40, 203, 139, 0.06) 0%,
				rgba(255, 255, 255, 0.98) 44%,
				rgba(40, 203, 139, 0.08) 100%
			);

		cursor: zoom-in;
	}

	/* Viền trong ảnh mobile */
	.kht-chung-nhan
	.kht-cn-mobile-track .img-inner::after {
		content: "";

		position: absolute;
		z-index: 2;
		inset: 8px;

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

		pointer-events: none;
	}

	/* Ảnh ngang và dọc cùng chiều cao */
	.kht-chung-nhan
	.kht-cn-mobile-track .img2 .img-inner {
		height: 400px;
	}

	/* Ảnh luôn hiển thị đầy đủ */
	.kht-chung-nhan
	.kht-cn-mobile-track .img-inner img {
		position: relative;
		z-index: 1;

		display: block;

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

		object-fit: contain;
		object-position: center;

		box-shadow:
			0 12px 30px rgba(25, 54, 44, 0.13);

		cursor: zoom-in;
		user-select: none;
		-webkit-user-drag: none;
	}

	/* Lightbox mobile */
	.kht-certificate-lightbox {
		padding: 14px;
	}

	.kht-certificate-lightbox__image {
		max-width: calc(100vw - 28px);
		max-height: calc(100vh - 28px);
		padding: 7px;

		border-radius: 12px;
	}
}


/* =========================================================
   12. MOBILE NHỎ
========================================================= */

@media screen and (max-width: 390px) {
	.kht-chung-nhan {
		--kht-cn-card-width-mobile: 82vw;
	}

	.kht-chung-nhan
	.kht-cn-mobile-track .img-inner,
	.kht-chung-nhan
	.kht-cn-mobile-track .img2 .img-inner {
		height: 370px;
	}
}


/* =========================================================
   13. HỖ TRỢ GIẢM CHUYỂN ĐỘNG
========================================================= */

@media (prefers-reduced-motion: reduce) {
	.kht-chung-nhan *,
	.kht-certificate-lightbox,
	.kht-certificate-lightbox * {
		transition-duration: 0.01ms;
		scroll-behavior: auto;
	}
}











/* =========================================================
   SECTION NĂNG LỰC TOÀN DIỆN KEHETO
   Áp dụng trực tiếp cho HTML Flatsome UX Builder hiện tại
========================================================= */

.kht-nang-luc-toan-dien {
	--kht-nltd-primary: #28cb8b;
	--kht-nltd-primary-dark: #159a66;
	--kht-nltd-primary-deep: #0d6f4d;
	--kht-nltd-primary-soft: rgba(40, 203, 139, 0.1);
	--kht-nltd-text: #17372c;
	--kht-nltd-text-soft: #647a72;
	--kht-nltd-border: rgba(18, 82, 60, 0.11);
	--kht-nltd-white: #ffffff;

	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.kht-nang-luc-toan-dien,
.kht-nang-luc-toan-dien * {
	box-sizing: border-box;
}


/* =========================================================
   1. NỀN SECTION
========================================================= */

.kht-nang-luc-toan-dien .section-bg {
	background:
		radial-gradient(
			circle at 4% 5%,
			rgba(40, 203, 139, 0.11) 0,
			rgba(40, 203, 139, 0) 30%
		),
		radial-gradient(
			circle at 96% 92%,
			rgba(40, 203, 139, 0.1) 0,
			rgba(40, 203, 139, 0) 28%
		),
		linear-gradient(
			145deg,
			#f2faf6 0%,
			#ffffff 48%,
			#eef9f4 100%
		);
}

/* Tạo lớp lưới công nghệ nhẹ trên nền */
.kht-nang-luc-toan-dien .section-bg::before {
	content: "";

	position: absolute;
	inset: 0;

	opacity: 0.26;

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

	background-size: 52px 52px;

	-webkit-mask-image:
		linear-gradient(
			to bottom,
			transparent,
			#000 20%,
			#000 82%,
			transparent
		);

	mask-image:
		linear-gradient(
			to bottom,
			transparent,
			#000 20%,
			#000 82%,
			transparent
		);
}

/* Tạo vòng tròn trang trí lớn phía trên bên trái */
.kht-nang-luc-toan-dien .section-bg::after {
	content: "";

	position: absolute;
	top: -310px;
	left: -330px;

	width: 700px;
	height: 700px;

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


/* =========================================================
   2. KHUNG NỘI DUNG SECTION
========================================================= */

.kht-nang-luc-toan-dien > .section-content {
	position: relative;
	z-index: 2;

	padding: 32px 20px 42px;
}


/* =========================================================
   3. TIÊU ĐỀ SECTION

   Thay đổi giao diện:
   - Sao chép đúng bố cục tiêu đề của section Chứng nhận tiêu chuẩn
   - Ẩn nhãn KEHETO để tiêu đề chỉ còn một hàng đồng bộ
   - Giữ nguyên toàn bộ panel, card, hiệu ứng và responsive còn lại
========================================================= */

.kht-nang-luc-toan-dien .tieu-de {
	width: 100%;
	max-width: 1320px;
	margin: 0 auto 36px;
	padding: 0;
}

/* Xóa kích thước và khoảng đệm mặc định của cột Flatsome */
.kht-nang-luc-toan-dien .tieu-de > .col {
	width: 100%;
	max-width: 100%;
	padding: 0;
}

/* Reset khung bên trong để tiêu đề dùng đúng giao diện Chứng nhận */
.kht-nang-luc-toan-dien .tieu-de .col-inner {
	padding: 0;

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

/* Ẩn nhãn phụ KEHETO vì tiêu đề mẫu không sử dụng eyebrow */
.kht-nang-luc-toan-dien .kht-nltd-eyebrow {
	display: none;
}

/* Định dạng tiêu đề theo section Chứng nhận tiêu chuẩn */
.kht-nang-luc-toan-dien .tieu-de p {
	position: relative;

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

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

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

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

/* Thanh màu nhận diện bên trái tiêu đề */
.kht-nang-luc-toan-dien .tieu-de p::before {
	content: "";

	display: block;
	flex: 0 0 7px;

	width: 7px;
	height: 42px;

	border-radius: 20px;

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

/* Đường trang trí kéo dài phía sau tiêu đề */
.kht-nang-luc-toan-dien .tieu-de p::after {
	content: "";

	display: block;
	flex: 1;

	height: 1px;
	margin-left: 8px;

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

/* Thu kích thước tiêu đề trên tablet ngang giống section Chứng nhận */
@media screen and (max-width: 1024px) {
	.kht-nang-luc-toan-dien .tieu-de p {
		font-size: 2rem;
	}
}

/* =========================================================
   4. BỐ CỤC CHÍNH DESKTOP
========================================================= */

.kht-nang-luc-toan-dien
.section-content > .row.row-small:not(.tieu-de) {
	display: grid;
	grid-template-columns:
		minmax(0, 0.95fr)
		280px
		minmax(0, 1.35fr);
	align-items: stretch;
	gap: 28px;

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

/* Xóa kích thước cột mặc định của Flatsome */
.kht-nang-luc-toan-dien
.section-content > .row.row-small:not(.tieu-de) > .col {
	width: auto;
	max-width: none;
	padding: 0;

	flex-basis: auto;
}


/* =========================================================
   5. VỊ TRÍ BA KHỐI
========================================================= */

.kht-nang-luc-toan-dien .trai {
	grid-column: 1;
	grid-row: 1;
}

.kht-nang-luc-toan-dien .giua {
	display: flex;
	align-items: center;
	justify-content: center;

	grid-column: 2;
	grid-row: 1;
}

.kht-nang-luc-toan-dien .phai {
	grid-column: 3;
	grid-row: 1;
}


/* =========================================================
   6. PANEL TRÁI VÀ PHẢI
========================================================= */

.kht-nang-luc-toan-dien .trai > .col-inner,
.kht-nang-luc-toan-dien .phai > .col-inner {
	position: relative;

	display: flex;
	flex-direction: column;

	width: 100%;
	height: 100%;
	min-height: 360px;
	padding: 24px;

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

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

	box-shadow:
		0 22px 60px rgba(20, 82, 61, 0.08),
		0 4px 14px rgba(20, 82, 61, 0.04);

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

/* Nền riêng cho khối năng lực cốt lõi */
.kht-nang-luc-toan-dien .trai > .col-inner {
	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.97),
			rgba(235, 250, 243, 0.93)
		);
}

/* Nền riêng cho khối dịch vụ hỗ trợ */
.kht-nang-luc-toan-dien .phai > .col-inner {
	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, 0.97),
			rgba(244, 252, 248, 0.95)
		);
}

/* Đường nối từ panel trái đến vòng tròn */
.kht-nang-luc-toan-dien .trai > .col-inner::after {
	content: "";

	position: absolute;
	z-index: 0;
	top: 50%;
	right: -29px;

	width: 29px;
	height: 1px;

	background:
		linear-gradient(
			90deg,
			rgba(40, 203, 139, 0.16),
			rgba(40, 203, 139, 0.82)
		);
}

/* Đường nối từ vòng tròn đến panel phải */
.kht-nang-luc-toan-dien .phai > .col-inner::before {
	content: "";

	position: absolute;
	z-index: 0;
	top: 50%;
	left: -29px;

	width: 29px;
	height: 1px;

	background:
		linear-gradient(
			90deg,
			rgba(40, 203, 139, 0.82),
			rgba(40, 203, 139, 0.16)
		);
}


/* =========================================================
   7. TIÊU ĐỀ TỪNG PANEL
========================================================= */

.kht-nang-luc-toan-dien
.trai > .col-inner > p:first-child,
.kht-nang-luc-toan-dien
.phai > .col-inner > p:first-child {
	position: relative;

	display: flex;
	align-items: center;

	flex: 0 0 auto;

	min-height: 42px;
	margin: 0 0 18px;
	padding-left: 55px;

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

	font-size: 1.12rem;
	font-weight: 700;
	line-height: 1.35;
	text-transform: uppercase;
}


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

.kht-nang-luc-toan-dien .ux-menu {
	flex: 1 1 auto;

	width: 100%;
	margin: 0;

	counter-reset: kht-nltd-card;
}

/* Ba card trái căn giữa theo chiều dọc */
.kht-nang-luc-toan-dien .trai .ux-menu {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: repeat(3, 64px);
	align-content: center;
	gap: 12px;
}

/* Sáu card phải chia đúng 2 cột × 3 hàng */
.kht-nang-luc-toan-dien .phai .ux-menu {
	display: grid;
	grid-template-columns:
		repeat(2, minmax(0, 1fr));
	grid-template-rows:
		repeat(3, 68px);
	align-content: center;
	gap: 12px;
}


/* =========================================================
   9. RESET CẤU TRÚC UX MENU FLATSOME
========================================================= */

.kht-nang-luc-toan-dien .ux-menu-link {
	display: block;

	width: 100%;
	min-width: 0;
	height: 100%;
	margin: 0;

	counter-increment: kht-nltd-card;
}

/* Card chỉ còn số thứ tự và nội dung text */
.kht-nang-luc-toan-dien .ux-menu-link__link {
	position: relative;

	display: grid;
	grid-template-columns:
		28px
		minmax(0, 1fr);
	align-items: center;
	gap: 10px;

	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 9px 14px;
	overflow: hidden;

	color: var(--kht-nltd-text);
	font-family: inherit;
	line-height: normal;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	white-space: normal;

	border: 1px solid rgba(18, 83, 61, 0.1);
	border-radius: 15px;

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

	box-shadow:
		0 7px 20px rgba(18, 75, 56, 0.04);

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

/* Số thứ tự bên trái card */
.kht-nang-luc-toan-dien .ux-menu-link__link::before {
	content:
		counter(
			kht-nltd-card,
			decimal-leading-zero
		);

	position: relative;
	z-index: 2;

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

	width: 28px;
	height: 28px;

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

	font-size: 0.64rem;
	font-weight: 700;
	line-height: 1;

	border-radius: 8px;

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

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

/* Xóa hoàn toàn icon chấm tròn bên phải */
.kht-nang-luc-toan-dien .ux-menu-link__link::after {
	content: none;
	display: none;
}

/* Lớp nền gradient active do JavaScript tạo */
.kht-nang-luc-toan-dien
.ux-menu-link__link
.kht-nltd-card-background {
	position: absolute;
	z-index: 0;
	inset: 0;

	display: block;

	opacity: 0;

	background:
		linear-gradient(
			135deg,
			var(--kht-nltd-primary-dark),
			var(--kht-nltd-primary)
		);

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

	transition:
		opacity 0.35s ease,
		transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Nội dung chữ được mở rộng toàn bộ chiều ngang còn lại */
.kht-nang-luc-toan-dien .ux-menu-link__text {
	position: relative;
	z-index: 2;

	display: block;

	width: 100%;
	min-width: 0;

	color: inherit;

	font-size: 0.75rem;
	font-weight: 650;
	line-height: 1.3;
	letter-spacing: 0.002em;

	white-space: normal;
	word-break: normal;
	overflow-wrap: break-word;
}


/* =========================================================
   10. HOVER VÀ ACTIVE CARD
========================================================= */

@media (hover: hover) and (pointer: fine) {
	.kht-nang-luc-toan-dien
	.ux-menu-link__link:hover {
		color: var(--kht-nltd-text);

		border-color: rgba(40, 203, 139, 0.35);

		box-shadow:
			0 14px 32px rgba(18, 108, 75, 0.11);

		transform: translateY(-3px);
	}
}

/* Card đang active */
.kht-nang-luc-toan-dien
.ux-menu-link.is-active
.ux-menu-link__link {
	color: var(--kht-nltd-white);

	border-color: transparent;

	box-shadow:
		0 16px 34px rgba(20, 151, 102, 0.24);

	transform: translateY(-3px);
}

/* Hiện nền gradient của card active */
.kht-nang-luc-toan-dien
.ux-menu-link.is-active
.kht-nltd-card-background {
	opacity: 1;
	transform: scaleX(1);
}

/* Số thứ tự card active */
.kht-nang-luc-toan-dien
.ux-menu-link.is-active
.ux-menu-link__link::before {
	color: var(--kht-nltd-white);

	background: rgba(255, 255, 255, 0.18);
}

/* Focus hỗ trợ điều khiển bằng bàn phím */
.kht-nang-luc-toan-dien
.ux-menu-link__link:focus-visible {
	outline: 3px solid rgba(40, 203, 139, 0.28);
	outline-offset: 3px;
}


/* =========================================================
   11. VÒNG TRÒN TRUNG TÂM
========================================================= */

.kht-nang-luc-toan-dien .giua > .col-inner {
	position: relative;

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

	width: 280px;
	height: 280px;
	margin: 0 auto;
	padding: 0;

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

/* Đường kết nối chạy xuyên tâm vòng tròn */
.kht-nang-luc-toan-dien
.giua > .col-inner::before {
	content: "";

	position: absolute;
	z-index: -1;
	top: 50%;
	left: -29px;
	right: -29px;

	height: 1px;

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

/* Quỹ đạo tròn phía trong */
.kht-nang-luc-toan-dien
.giua > .col-inner::after {
	content: "";

	position: absolute;
	inset: 22px;

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

	pointer-events: none;
}

/* Phần tử chứa chấm chạy quanh quỹ đạo */
.kht-nang-luc-toan-dien .kht-nltd-orbit-dot {
	position: absolute;
	z-index: 3;
	inset: -1px;

	display: block;

	border-radius: 50%;
	pointer-events: none;

	animation:
		khtNltdOrbitRotate
		18s
		linear
		infinite;
}

/* Chấm chuyển động quanh vòng tròn trung tâm */
.kht-nang-luc-toan-dien
.kht-nltd-orbit-dot::before {
	content: "";

	position: absolute;
	top: 25px;
	left: 37px;

	width: 12px;
	height: 12px;

	border-radius: 50%;

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

	box-shadow:
		0 0 0 7px rgba(40, 203, 139, 0.12);
}

/* Lõi trung tâm chứa nội dung active */
.kht-nang-luc-toan-dien .kht-nltd-center-core {
	position: relative;
	z-index: 4;

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

	width: 218px;
	height: 218px;
	padding: 21px;

	text-align: center;

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

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

	box-shadow:
		0 26px 55px rgba(17, 134, 91, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.32);

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

/* Thu nhỏ nhẹ vòng tròn khi thay đổi nội dung */
.kht-nang-luc-toan-dien
.giua.is-changing
.kht-nltd-center-core {
	transform: scale(0.94);

	box-shadow:
		0 20px 42px rgba(17, 134, 91, 0.21);
}

/* Tên thương hiệu KEHETO */
.kht-nang-luc-toan-dien .kht-nltd-center-brand {
	margin: 0;

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

	font-size: 1.16rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.12em;
}

/* Đường phân cách trong vòng tròn */
.kht-nang-luc-toan-dien .kht-nltd-center-divider {
	display: block;

	width: 42px;
	height: 1px;
	margin: 12px 0;

	background: rgba(255, 255, 255, 0.42);
}

/* Tên nhóm đang active */
.kht-nang-luc-toan-dien .kht-nltd-center-group {
	display: block;

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

	font-size: 0.56rem;
	font-weight: 650;
	line-height: 1.35;
	letter-spacing: 0.06em;
}

/* Tên mục đang active */
.kht-nang-luc-toan-dien .kht-nltd-center-title {
	display: -webkit-box;
	margin-top: 7px;
	overflow: hidden;

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

	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.35;

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}


/* =========================================================
   12. CHUYỂN ĐỘNG QUỸ ĐẠO
========================================================= */

@keyframes khtNltdOrbitRotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}


/* =========================================================
   13. HIỆU ỨNG XUẤT HIỆN AN TOÀN
========================================================= */

.kht-nang-luc-toan-dien .tieu-de,
.kht-nang-luc-toan-dien .trai,
.kht-nang-luc-toan-dien .giua,
.kht-nang-luc-toan-dien .phai {
	opacity: 1;
	transform: translateY(0);
}

/* Chỉ ẩn sau khi JavaScript đã khởi tạo */
.kht-nang-luc-toan-dien.kht-nltd-js-ready
.tieu-de,
.kht-nang-luc-toan-dien.kht-nltd-js-ready
.trai,
.kht-nang-luc-toan-dien.kht-nltd-js-ready
.giua,
.kht-nang-luc-toan-dien.kht-nltd-js-ready
.phai {
	opacity: 0;
	transform: translateY(28px);
}

/* Hiện các thành phần khi section vào màn hình */
.kht-nang-luc-toan-dien.kht-nltd-js-ready.is-visible
.tieu-de,
.kht-nang-luc-toan-dien.kht-nltd-js-ready.is-visible
.trai,
.kht-nang-luc-toan-dien.kht-nltd-js-ready.is-visible
.giua,
.kht-nang-luc-toan-dien.kht-nltd-js-ready.is-visible
.phai {
	opacity: 1;
	transform: translateY(0);

	transition:
		opacity 0.68s ease,
		transform 0.82s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Thứ tự xuất hiện lần lượt */
.kht-nang-luc-toan-dien.is-visible .trai {
	transition-delay: 0.08s;
}

.kht-nang-luc-toan-dien.is-visible .giua {
	transition-delay: 0.16s;
}

.kht-nang-luc-toan-dien.is-visible .phai {
	transition-delay: 0.24s;
}


/* =========================================================
   14. DESKTOP NHỎ VÀ TABLET NGANG
   TỪ 850PX ĐẾN 1100PX
========================================================= */

@media screen and (min-width: 850px) and (max-width: 1100px) {
	.kht-nang-luc-toan-dien > .section-content {
		padding-right: 16px;
		padding-left: 16px;
	}

	.kht-nang-luc-toan-dien
	.section-content > .row.row-small:not(.tieu-de) {
		grid-template-columns:
			minmax(0, 0.95fr)
			220px
			minmax(0, 1.35fr);

		gap: 16px;
	}

	.kht-nang-luc-toan-dien .trai > .col-inner,
	.kht-nang-luc-toan-dien .phai > .col-inner {
		min-height: 320px;
		padding: 16px;
	}

	.kht-nang-luc-toan-dien
	.trai > .col-inner > p:first-child,
	.kht-nang-luc-toan-dien
	.phai > .col-inner > p:first-child {
		min-height: 36px;
		margin-bottom: 13px;
		padding-left: 46px;

		font-size: 0.9rem;
	}

	.kht-nang-luc-toan-dien
	.trai > .col-inner > p:first-child::before,
	.kht-nang-luc-toan-dien
	.phai > .col-inner > p:first-child::before {
		width: 36px;
		height: 36px;

		font-size: 0.65rem;
	}

	/* Giảm nhẹ chiều cao card trên tablet ngang */
	.kht-nang-luc-toan-dien .trai .ux-menu {
		grid-template-rows: repeat(3, 58px);
		gap: 8px;
	}

	.kht-nang-luc-toan-dien .phai .ux-menu {
		grid-template-rows: repeat(3, 62px);
		gap: 8px;
	}

	.kht-nang-luc-toan-dien .ux-menu-link__link {
		grid-template-columns:
			23px
			minmax(0, 1fr);

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

	.kht-nang-luc-toan-dien
	.ux-menu-link__link::before {
		width: 23px;
		height: 23px;

		font-size: 0.56rem;
	}

	.kht-nang-luc-toan-dien .ux-menu-link__text {
		font-size: 0.67rem;
		line-height: 1.25;
	}

	/* Vòng tròn tablet ngang */
	.kht-nang-luc-toan-dien .giua > .col-inner {
		width: 220px;
		height: 220px;
	}

	.kht-nang-luc-toan-dien
	.giua > .col-inner::after {
		inset: 18px;
	}

	.kht-nang-luc-toan-dien
	.kht-nltd-center-core {
		width: 170px;
		height: 170px;
		padding: 15px;
	}

	.kht-nang-luc-toan-dien
	.kht-nltd-orbit-dot::before {
		top: 20px;
		left: 29px;

		width: 10px;
		height: 10px;
	}

	.kht-nang-luc-toan-dien
	.kht-nltd-center-brand {
		font-size: 0.92rem;
	}

	.kht-nang-luc-toan-dien
	.kht-nltd-center-divider {
		width: 36px;
		margin: 9px 0;
	}

	.kht-nang-luc-toan-dien
	.kht-nltd-center-group {
		font-size: 0.45rem;
	}

	.kht-nang-luc-toan-dien
	.kht-nltd-center-title {
		margin-top: 5px;

		font-size: 0.54rem;
	}
}


/* =========================================================
   15. TABLET DỌC
   DƯỚI 850PX
========================================================= */

@media screen and (max-width: 849px) {
	.kht-nang-luc-toan-dien > .section-content {
		padding: 26px 18px 34px;
	}

	.kht-nang-luc-toan-dien
	.section-content > .row.row-small:not(.tieu-de) {
		grid-template-columns: minmax(0, 1fr);
		gap: 27px;
	}

	/* Xếp ba khối thành ba hàng */
	.kht-nang-luc-toan-dien .trai {
		grid-column: 1;
		grid-row: 1;
	}

	.kht-nang-luc-toan-dien .giua {
		grid-column: 1;
		grid-row: 2;
	}

	.kht-nang-luc-toan-dien .phai {
		grid-column: 1;
		grid-row: 3;
	}

	/* Không ép hai panel bằng chiều cao khi xếp dọc */
	.kht-nang-luc-toan-dien .trai > .col-inner,
	.kht-nang-luc-toan-dien .phai > .col-inner {
		min-height: 0;
	}

	/* Ẩn đường nối ngang của hai panel */
	.kht-nang-luc-toan-dien
	.trai > .col-inner::after,
	.kht-nang-luc-toan-dien
	.phai > .col-inner::before {
		display: none;
	}

	/* Chuyển đường nối trung tâm thành chiều dọc */
	.kht-nang-luc-toan-dien
	.giua > .col-inner::before {
		top: -27px;
		right: auto;
		bottom: -27px;
		left: 50%;

		width: 1px;
		height: auto;

		background:
			linear-gradient(
				180deg,
				rgba(40, 203, 139, 0),
				rgba(40, 203, 139, 0.8),
				rgba(40, 203, 139, 0)
			);
	}

	/* Vòng tròn tablet dọc */
	.kht-nang-luc-toan-dien
	.giua > .col-inner {
		width: 240px;
		height: 240px;
	}

	.kht-nang-luc-toan-dien
	.giua > .col-inner::after {
		inset: 19px;
	}

	.kht-nang-luc-toan-dien
	.kht-nltd-center-core {
		width: 184px;
		height: 184px;
		padding: 16px;
	}

	.kht-nang-luc-toan-dien
	.kht-nltd-orbit-dot::before {
		top: 21px;
		left: 32px;

		width: 11px;
		height: 11px;
	}
}


/* =========================================================
   16. MOBILE
   DƯỚI 550PX
========================================================= */

@media screen and (max-width: 549px) {
	.kht-nang-luc-toan-dien > .section-content {
		padding: 18px 14px 26px;
	}

	/* Tiêu đề mobile sao chép responsive của section Chứng nhận */
	.kht-nang-luc-toan-dien .tieu-de {
		margin-bottom: 22px;
		padding: 0 16px;
	}

	.kht-nang-luc-toan-dien .tieu-de p {
		gap: 11px;

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

	/* Thu nhỏ thanh nhận diện bên trái tiêu đề */
	.kht-nang-luc-toan-dien .tieu-de p::before {
		flex-basis: 5px;

		width: 5px;
		height: 34px;
	}

	/* Ẩn đường trang trí phía sau tiêu đề trên mobile */
	.kht-nang-luc-toan-dien .tieu-de p::after {
		display: none;
	}

	/* Panel mobile */
	.kht-nang-luc-toan-dien .trai > .col-inner,
	.kht-nang-luc-toan-dien .phai > .col-inner {
		padding: 17px;

		border-radius: 22px;
	}

	.kht-nang-luc-toan-dien
	.trai > .col-inner > p:first-child,
	.kht-nang-luc-toan-dien
	.phai > .col-inner > p:first-child {
		min-height: 36px;
		margin-bottom: 16px;
		padding-left: 47px;

		font-size: 1rem;
	}

	.kht-nang-luc-toan-dien
	.trai > .col-inner > p:first-child::before,
	.kht-nang-luc-toan-dien
	.phai > .col-inner > p:first-child::before {
		width: 36px;
		height: 36px;

		font-size: 0.66rem;
	}

	/* Card năng lực mobile */
	.kht-nang-luc-toan-dien .trai .ux-menu {
		grid-template-rows: repeat(3, 54px);
		gap: 9px;
	}

	/* Dịch vụ mobile giữ hai cột */
	.kht-nang-luc-toan-dien .phai .ux-menu {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
		grid-template-rows:
			repeat(3, 62px);
		gap: 9px;
	}

	/* Card mobile chỉ còn số và text */
	.kht-nang-luc-toan-dien
	.ux-menu-link__link {
		grid-template-columns:
			25px
			minmax(0, 1fr);

		gap: 8px;
		padding: 8px 10px;

		border-radius: 14px;
	}

	.kht-nang-luc-toan-dien
	.ux-menu-link__link::before {
		width: 25px;
		height: 25px;

		font-size: 0.59rem;
		border-radius: 7px;
	}

	.kht-nang-luc-toan-dien
	.ux-menu-link__text {
		font-size: 0.7rem;
		line-height: 1.3;
	}

	/* Vòng tròn mobile */
	.kht-nang-luc-toan-dien
	.giua > .col-inner {
		width: 220px;
		height: 220px;
	}

	.kht-nang-luc-toan-dien
	.giua > .col-inner::after {
		inset: 18px;
	}

	.kht-nang-luc-toan-dien
	.kht-nltd-center-core {
		width: 170px;
		height: 170px;
		padding: 15px;
	}

	.kht-nang-luc-toan-dien
	.kht-nltd-orbit-dot::before {
		top: 20px;
		left: 29px;

		width: 10px;
		height: 10px;
	}

	.kht-nang-luc-toan-dien
	.kht-nltd-center-brand {
		font-size: 0.92rem;
	}

	.kht-nang-luc-toan-dien
	.kht-nltd-center-divider {
		width: 36px;
		margin: 9px 0;
	}

	.kht-nang-luc-toan-dien
	.kht-nltd-center-group {
		font-size: 0.45rem;
	}

	.kht-nang-luc-toan-dien
	.kht-nltd-center-title {
		margin-top: 5px;

		font-size: 0.54rem;
		line-height: 1.32;
	}
}


/* =========================================================
   17. MOBILE NHỎ
   DƯỚI 390PX
========================================================= */

@media screen and (max-width: 390px) {
	/* Dịch vụ chuyển về một cột */
	.kht-nang-luc-toan-dien .phai .ux-menu {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: repeat(6, 54px);
	}

	.kht-nang-luc-toan-dien
	.ux-menu-link__text {
		font-size: 0.75rem;
	}

	/* Thu nhỏ vòng tròn trên màn hình rất nhỏ */
	.kht-nang-luc-toan-dien
	.giua > .col-inner {
		width: 200px;
		height: 200px;
	}

	.kht-nang-luc-toan-dien
	.kht-nltd-center-core {
		width: 154px;
		height: 154px;
	}
}


/* =========================================================
   18. HỖ TRỢ GIẢM CHUYỂN ĐỘNG
========================================================= */

@media (prefers-reduced-motion: reduce) {
	.kht-nang-luc-toan-dien *,
	.kht-nang-luc-toan-dien *::before,
	.kht-nang-luc-toan-dien *::after {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
	}
}













/* =========================================================
   HỆ GIÁ TRỊ CỐT LÕI
   Bố cục: 5 giá trị nằm trên cùng một hàng
   Không thay đổi HTML và không thêm nội dung
========================================================= */

.kht-giatricotloi {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(40, 203, 139, 0.1),
            transparent 38%
        ),
        #f5f8f5;
}

/* Tạo khoảng cách bên trong section */
.kht-giatricotloi .section-content {
    position: relative;
    z-index: 2;
    padding: 45px 0 55px;
}

/* Giới hạn chiều rộng nội dung */
.kht-giatricotloi .tieu-de,
.kht-giatricotloi .icon-box-giatri {
    width: calc(100% - 40px);
    max-width: 1320px;
    margin-right: auto;
    margin-left: auto;
}


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

   Thay đổi giao diện:
   - Sao chép đúng bố cục tiêu đề của section Chứng nhận tiêu chuẩn
   - Giữ nguyên toàn bộ card, hiệu ứng và responsive còn lại
========================================================= */

.kht-giatricotloi .tieu-de {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto 36px;
    padding: 0;
}

/* Xóa kích thước và khoảng đệm mặc định của cột Flatsome */
.kht-giatricotloi .tieu-de > .col {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

/* Xóa giao diện mặc định bên trong cột tiêu đề */
.kht-giatricotloi .tieu-de .col-inner {
    padding: 0;

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

/* Định dạng tiêu đề theo section Chứng nhận tiêu chuẩn */
.kht-giatricotloi .tieu-de p {
    position: relative;

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

    margin: 0;

    color: #18372c;

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

/* Thanh màu nhận diện bên trái tiêu đề */
.kht-giatricotloi .tieu-de p::before {
    content: "";

    display: block;
    flex: 0 0 7px;

    width: 7px;
    height: 42px;

    border-radius: 20px;

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

/* Đường trang trí phía sau tiêu đề */
.kht-giatricotloi .tieu-de p::after {
    content: "";

    display: block;
    flex: 1;

    height: 1px;
    margin-left: 8px;

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


/* =========================================================
   BỐ CỤC 5 GIÁ TRỊ CÙNG MỘT HÀNG
========================================================= */

.kht-giatricotloi .icon-box-giatri {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

/* Loại bỏ chiều rộng cột mặc định của Flatsome */
.kht-giatricotloi .icon-box-giatri > .col {
    width: auto;
    max-width: none;
    flex-basis: auto;
    padding: 0;
}


/* =========================================================
   CARD GIÁ TRỊ
========================================================= */

.kht-giatricotloi .icon-box-giatri > .col > .col-inner {
    position: relative;
    height: 100%;
    min-height: 285px;
    padding: 25px 20px 23px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(32, 54, 47, 0.09);
    border-radius: 18px;
    box-shadow: 0 14px 36px rgba(32, 54, 47, 0.07);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* Tạo đường màu phía trên card */
.kht-giatricotloi .icon-box-giatri > .col > .col-inner::before {
    content: "";
    position: absolute;
    top: 0;
    right: 20px;
    left: 20px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: #28cb8b;
}

/* Tạo chi tiết trang trí nhẹ phía sau icon */
.kht-giatricotloi .icon-box-giatri > .col > .col-inner::after {
    content: "";
    position: absolute;
    top: -42px;
    right: -42px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: rgba(40, 203, 139, 0.07);
}


/* =========================================================
   ICON BOX
========================================================= */

.kht-giatricotloi .icon-box {
    position: relative;
    z-index: 2;
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}

/* Khung chứa icon */
.kht-giatricotloi .icon-box-img {
    width: 68px;
    min-width: 68px;
    margin: 0 0 22px;
}

/* Tạo nền cho icon */
.kht-giatricotloi .icon-box-img .icon {
    display: flex;
    width: 68px;
    height: 68px;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: rgba(40, 203, 139, 0.1);
    border: 1px solid rgba(40, 203, 139, 0.2);
    border-radius: 18px;
    transition:
        border-radius 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

/* Giữ icon đúng tỷ lệ */
.kht-giatricotloi .icon-box-img .icon-inner {
    width: 100%;
    height: 100%;
}

.kht-giatricotloi .icon-box-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* =========================================================
   NỘI DUNG CHỮ
========================================================= */

.kht-giatricotloi .icon-box-text {
    width: 100%;
    text-align: center;
}

/* Tiêu đề của từng giá trị */
.kht-giatricotloi .icon-box-text p:first-child {
    min-height: 45px;
    margin: 0 0 10px;
    color: #20362f;
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.4;
}

/* Mô tả của từng giá trị */
.kht-giatricotloi .icon-box-text p:last-child {
    margin: 0;
    color: #68756f;
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.6;
}


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

@media (hover: hover) {
    /* Nâng card khi di chuột */
    .kht-giatricotloi
    .icon-box-giatri
    > .col
    > .col-inner:hover {
        transform: translateY(-7px);
        border-color: rgba(40, 203, 139, 0.38);
        box-shadow: 0 22px 48px rgba(32, 54, 47, 0.13);
    }

    /* Thay đổi hình dạng icon khi di chuột */
    .kht-giatricotloi
    .icon-box-giatri
    > .col
    > .col-inner:hover
    .icon-box-img .icon {
        background: rgba(40, 203, 139, 0.16);
        border-radius: 50%;
        transform: translateY(-3px);
    }
}


/* =========================================================
   TABLET
   Vẫn giữ toàn bộ card trên một hàng và kéo ngang
========================================================= */

@media (max-width: 1024px) {
    .kht-giatricotloi .section-content {
        padding: 40px 0 48px;
    }

    /* Tiêu đề tablet sao chép responsive của section Chứng nhận */
    .kht-giatricotloi .tieu-de {
        width: calc(100% - 36px);
    }

    .kht-giatricotloi .tieu-de p {
        font-size: 2rem;
    }

    /* Chuyển thành một hàng cuộn ngang */
    .kht-giatricotloi .icon-box-giatri {
        display: grid;
        width: 100%;
        max-width: none;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 245px;
        gap: 14px;
        margin: 0;
        padding: 0 20px 14px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    /* Ẩn thanh cuộn trên Chrome và Safari */
    .kht-giatricotloi .icon-box-giatri::-webkit-scrollbar {
        display: none;
    }

    /* Card dừng đúng vị trí khi kéo */
    .kht-giatricotloi .icon-box-giatri > .col {
        scroll-snap-align: start;
    }

    .kht-giatricotloi .icon-box-giatri > .col > .col-inner {
        min-height: 275px;
    }
}


/* =========================================================
   MOBILE
   5 card cùng một hàng, người dùng kéo trái phải
========================================================= */

@media (max-width: 767px) {
    .kht-giatricotloi .section-content {
        padding: 38px 0 40px;
    }

    /* Tiêu đề tại kích thước này kế thừa giao diện tablet của Chứng nhận. */

    /* Giảm chiều rộng card để nhìn thấy một phần card tiếp theo */
    .kht-giatricotloi .icon-box-giatri {
        grid-auto-columns: minmax(230px, 78vw);
        gap: 12px;
        padding-right: 16px;
        padding-left: 16px;
    }

    /* Giảm chiều cao card trên mobile */
    .kht-giatricotloi .icon-box-giatri > .col > .col-inner {
        min-height: 245px;
        padding: 20px 17px 18px;
        border-radius: 15px;
    }

    /* Thu nhỏ icon trên mobile */
    .kht-giatricotloi .icon-box-img {
        width: 58px;
        min-width: 58px;
        margin-bottom: 17px;
    }

    .kht-giatricotloi .icon-box-img .icon {
        width: 58px;
        height: 58px;
        padding: 13px;
        border-radius: 15px;
    }

    /* Thu nhỏ nội dung chữ trên mobile */
    .kht-giatricotloi .icon-box-text p:first-child {
        min-height: 0;
        margin-bottom: 7px;
        font-size: 0.9rem;
    }

    .kht-giatricotloi .icon-box-text p:last-child {
        font-size: 0.78rem;
        line-height: 1.55;
    }
}


/* =========================================================
   TIÊU ĐỀ MOBILE
   Sao chép đúng responsive của section Chứng nhận tiêu chuẩn
========================================================= */

@media screen and (max-width: 549px) {
    .kht-giatricotloi .tieu-de {
        width: 100%;
        margin-bottom: 22px;
        padding: 0 16px;
    }

    .kht-giatricotloi .tieu-de p {
        gap: 11px;

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

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

        width: 5px;
        height: 34px;
    }

    /* Ẩn đường trang trí phía sau tiêu đề trên mobile */
    .kht-giatricotloi .tieu-de p::after {
        display: none;
    }
}


/* =========================================================
   HẠN CHẾ CHUYỂN ĐỘNG
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .kht-giatricotloi .icon-box-giatri > .col > .col-inner,
    .kht-giatricotloi .icon-box-img .icon {
        transition: none;
    }
}












/* =====================================================
   SECTION TRIẾT LÝ LÃNH ĐẠO
   - Container tối đa 1320px
   - Nội dung chiếm 80% container
   - Nội dung căn về bên phải
===================================================== */

.kht-trietly {
	position: relative;
	min-height: 680px;
	padding: 0;
	overflow: hidden;
	background-color: #174c2b;
}

/* Hiển thị ảnh nền phủ toàn bộ section */
.kht-trietly .section-bg {
	overflow: hidden;
}

/* Giữ ảnh nền rõ ở khu vực bên trái */
.kht-trietly .section-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

/* Tạo lớp phủ nhẹ để nội dung dễ đọc nhưng không che ảnh */
.kht-trietly .section-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(11, 62, 31, 0.04) 0%,
		rgba(11, 62, 31, 0.09) 28%,
		rgba(11, 62, 31, 0.28) 62%,
		rgba(38, 50, 50, 0.52) 100%
	);
}

/* Căn nội dung theo chiều cao của section */
.kht-trietly > .section-content {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 680px;
	padding: 40px 20px;
	box-sizing: border-box;
}

/* Container chính đồng bộ width 1320px với các section khác */
.kht-trietly > .section-content > .row {
	display: flex;
	justify-content: flex-end;
	align-items: stretch;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}

/* Cột trái chiếm 34% container */
.kht-trietly .trietly-trai {
	flex: 0 0 34%;
	width: 34%;
	max-width: 34%;
	padding-top: 0;
	padding-bottom: 0;
}

/* Cột phải chiếm 46% container */
/* Tổng hai cột bằng 80% container */
.kht-trietly .trietly-phai {
	flex: 0 0 46%;
	width: 46%;
	max-width: 46%;
	padding-top: 0;
	padding-bottom: 0;
}

/* =====================================================
   CỘT TRÁI
===================================================== */

/* Tạo khối nội dung bán trong suốt để vẫn nhìn thấy ảnh nền */
.kht-trietly .trietly-trai > .col-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	min-height: 590px;
	padding: 48px 42px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-right: 0;
	border-radius: 26px 0 0 26px;
	background: linear-gradient(
		135deg,
		rgba(4, 55, 29, 0.58),
		rgba(8, 68, 35, 0.38)
	);
	box-shadow: 0 24px 55px rgba(0, 0, 0, 0.14);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

/* Tạo họa tiết vòng tròn trang trí phía trên */
.kht-trietly .trietly-trai > .col-inner::before {
	content: "";
	position: absolute;
	top: -155px;
	left: -150px;
	width: 340px;
	height: 340px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	box-shadow:
		0 0 0 42px rgba(255, 255, 255, 0.028),
		0 0 0 84px rgba(255, 255, 255, 0.018);
}

/* Tạo đường trang trí phía dưới */
.kht-trietly .trietly-trai > .col-inner::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 65px;
	width: 74px;
	height: 1px;
	background: rgba(255, 255, 255, 0.45);
}

/* Giảm kích thước tiêu đề chính */
.kht-trietly .trietly-trai p:first-child {
	position: relative;
	z-index: 1;
	margin: 0 0 25px;
	padding-top: 20px;
	color: #ffffff;
	font-size: clamp(1.75rem, 2.1vw, 2.35rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.04em;
}

/* Tạo đường nhấn phía trên tiêu đề */
.kht-trietly .trietly-trai p:first-child::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 64px;
	height: 4px;
	border-radius: 10px;
	background: #73c977;
}

/* Giảm kích thước nội dung triết lý */
.kht-trietly .trietly-trai p:nth-child(2) {
	position: relative;
	z-index: 1;
	max-width: 430px;
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
	font-size: clamp(0.92rem, 1.15vw, 1.08rem);
	font-weight: 400;
	line-height: 1.75;
}

/* =====================================================
   CỘT PHẢI
===================================================== */

/* Tạo khung nền sáng bao quanh bốn card */
.kht-trietly .trietly-phai > .col-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	height: 100%;
	min-height: 590px;
	padding: 22px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 0 26px 26px 0;
	background: rgba(247, 250, 248, 0.9);
	box-shadow: 0 24px 55px rgba(0, 0, 0, 0.12);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* Chuyển mỗi row thành một card */
/* Đã giảm chiều cao card */
.kht-trietly .trietly-phai > .col-inner > .row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	align-items: center;
	width: 100%;
	max-width: none;
	min-height: 88px;
	margin: 0;
	overflow: hidden;
	border: 1px solid rgba(74, 160, 78, 0.14);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 9px 22px rgba(35, 71, 43, 0.065);
	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease,
		border-color 0.3s ease;
}

/* Tạo thanh nhận diện màu xanh bên trái card */
.kht-trietly .trietly-phai > .col-inner > .row::before {
	content: "";
	position: absolute;
	top: 14px;
	bottom: 14px;
	left: 0;
	width: 4px;
	border-radius: 0 6px 6px 0;
	background: #58b75e;
}

/* Tạo hiệu ứng nhẹ khi di chuột */
.kht-trietly .trietly-phai > .col-inner > .row:hover {
	transform: translateX(4px);
	border-color: rgba(74, 160, 78, 0.3);
	box-shadow: 0 14px 30px rgba(35, 71, 43, 0.1);
}

/* Gỡ kích thước cột mặc định của Flatsome bên trong card */
.kht-trietly .trietly-phai > .col-inner > .row > .col {
	width: 100%;
	max-width: 100%;
	flex-basis: auto;
	padding: 0;
}

/* Căn icon và tiêu đề trong phần đầu card */
/* Đã giảm padding để card gọn hơn */
.kht-trietly .trietly-phai > .col-inner > .row > .col:first-child > .col-inner {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 14px 14px 14px 20px;
}

/* Căn nội dung mô tả theo chiều dọc */
/* Đã giảm padding để card thấp hơn */
.kht-trietly .trietly-phai > .col-inner > .row > .col:last-child > .col-inner {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	min-height: 58px;
	padding: 14px 18px;
}

/* Tạo đường phân chia giữa tiêu đề và mô tả */
.kht-trietly .trietly-phai > .col-inner > .row > .col:last-child > .col-inner::before {
	content: "";
	position: absolute;
	top: 15px;
	bottom: 15px;
	left: 0;
	width: 1px;
	background: rgba(30, 80, 42, 0.11);
}

/* Căn icon và tiêu đề trên cùng một hàng */
.kht-trietly .trietly-phai .icon-box {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
}

/* Thu nhỏ khung icon và giảm khoảng cách icon với text */
.kht-trietly .trietly-phai .icon-box-img {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	margin-right: 10px;
	border: 1px solid rgba(83, 180, 91, 0.23);
	border-radius: 50%;
	background: rgba(232, 248, 234, 0.92);
	box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.65);
}

/* Căn hình ảnh icon vào giữa khung tròn */
.kht-trietly .trietly-phai .icon-box-img .icon,
.kht-trietly .trietly-phai .icon-box-img .icon-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* Giảm kích thước ảnh icon */
.kht-trietly .trietly-phai .icon-box-img img {
	width: 35px;
	height: 35px;
	object-fit: contain;
}

/* Giảm kích thước tiêu đề card */
.kht-trietly .trietly-phai .icon-box-text p {
	margin: 0;
	color: #1e6428;
	font-size: 0.76rem;
	font-weight: 700;
	line-height: 1.35;
}

/* Giảm kích thước mô tả card */
.kht-trietly .trietly-phai > .col-inner > .row > .col:last-child p {
	margin: 0;
	color: #555e58;
	font-size: 0.72rem;
	font-weight: 400;
	line-height: 1.5;
}

/* =====================================================
   LAPTOP NHỎ
===================================================== */

@media screen and (max-width: 1180px) {
	/* Tăng nhẹ vùng nội dung để tránh card bị quá hẹp */
	.kht-trietly .trietly-trai {
		flex-basis: 36%;
		width: 36%;
		max-width: 36%;
	}

	.kht-trietly .trietly-phai {
		flex-basis: 50%;
		width: 50%;
		max-width: 50%;
	}

	/* Giảm khoảng đệm cột trái */
	.kht-trietly .trietly-trai > .col-inner {
		padding: 42px 32px;
	}

	/* Giảm khoảng đệm khung card */
	.kht-trietly .trietly-phai > .col-inner {
		padding: 18px;
	}
}

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

@media screen and (max-width: 1024px) {
	.kht-trietly {
		min-height: auto;
	}

	/* Loại bỏ chiều cao cố định trên tablet */
	.kht-trietly > .section-content {
		min-height: auto;
		padding: 50px 20px;
	}

	/* Cho cụm nội dung chiếm nhiều chiều ngang hơn trên tablet */
	.kht-trietly .trietly-trai {
		flex-basis: 40%;
		width: 40%;
		max-width: 40%;
	}

	.kht-trietly .trietly-phai {
		flex-basis: 56%;
		width: 56%;
		max-width: 56%;
	}

	/* Chuyển nội dung card thành một cột */
	.kht-trietly .trietly-phai > .col-inner > .row {
		grid-template-columns: 1fr;
		min-height: 84px;
	}

	/* Điều chỉnh khoảng đệm phần tiêu đề card */
	.kht-trietly .trietly-phai > .col-inner > .row > .col:first-child > .col-inner {
		padding: 12px 16px 4px 18px;
	}

	/* Đưa mô tả xuống dưới tiêu đề */
	.kht-trietly .trietly-phai > .col-inner > .row > .col:last-child > .col-inner {
		min-height: auto;
		padding: 0 16px 12px 76px;
	}

	/* Ẩn đường phân chia khi card chuyển thành một cột */
	.kht-trietly .trietly-phai > .col-inner > .row > .col:last-child > .col-inner::before {
		display: none;
	}
}

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

@media screen and (max-width: 849px) {
	/* Giảm khoảng cách section trên mobile */
	.kht-trietly > .section-content {
		padding: 42px 14px;
	}

	/* Chuyển hai cột thành bố cục xếp dọc */
	.kht-trietly > .section-content > .row {
		display: block;
		width: 100%;
		max-width: 100%;
	}

	/* Hai cột sử dụng toàn bộ chiều rộng */
	.kht-trietly .trietly-trai,
	.kht-trietly .trietly-phai {
		width: 100%;
		max-width: 100%;
		flex-basis: 100%;
	}

	/* Tạo card riêng cho khu vực tiêu đề */
	.kht-trietly .trietly-trai > .col-inner {
		min-height: auto;
		padding: 34px 25px 38px;
		border-right: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 20px;
	}

	/* Ẩn đường trang trí dài trên mobile */
	.kht-trietly .trietly-trai > .col-inner::after {
		display: none;
	}

	/* Giảm kích thước tiêu đề mobile */
	.kht-trietly .trietly-trai p:first-child {
		margin-bottom: 19px;
		font-size: 1.55rem;
	}

	/* Giảm kích thước nội dung mobile */
	.kht-trietly .trietly-trai p:nth-child(2) {
		font-size: 0.92rem;
		line-height: 1.65;
	}

	/* Tạo khoảng cách giữa hai khu vực */
	.kht-trietly .trietly-phai {
		margin-top: 14px;
	}

	/* Loại bỏ nền bao ngoài danh sách card */
	.kht-trietly .trietly-phai > .col-inner {
		min-height: auto;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	/* Giảm độ bo góc của card */
	.kht-trietly .trietly-phai > .col-inner > .row {
		border-radius: 14px;
		min-height: 80px;
	}

	/* Tắt hiệu ứng dịch chuyển trên thiết bị cảm ứng */
	.kht-trietly .trietly-phai > .col-inner > .row:hover {
		transform: none;
	}

	/* Thu nhỏ khung icon mobile và giảm khoảng cách text */
	.kht-trietly .trietly-phai .icon-box-img {
		flex-basis: 42px;
		width: 42px;
		height: 42px;
		margin-right: 8px;
	}

	/* Thu nhỏ hình icon mobile */
	.kht-trietly .trietly-phai .icon-box-img img {
		width: 20px;
		height: 20px;
	}

	/* Điều chỉnh khoảng đệm phần tiêu đề */
	.kht-trietly .trietly-phai > .col-inner > .row > .col:first-child > .col-inner {
		padding: 12px 14px 4px 16px;
	}

	/* Căn mô tả theo phần chữ tiêu đề */
	.kht-trietly .trietly-phai > .col-inner > .row > .col:last-child > .col-inner {
		padding: 0 14px 13px 66px;
	}

	/* Giảm kích thước tiêu đề card mobile */
	.kht-trietly .trietly-phai .icon-box-text p {
		font-size: 0.74rem;
	}

	/* Giảm kích thước mô tả card mobile */
	.kht-trietly .trietly-phai > .col-inner > .row > .col:last-child p {
		font-size: 0.7rem;
	}
}

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

@media screen and (max-width: 420px) {
	/* Giảm khoảng đệm khối tiêu đề */
	.kht-trietly .trietly-trai > .col-inner {
		padding: 29px 20px 32px;
	}

	/* Giảm kích thước tiêu đề trên màn hình hẹp */
	.kht-trietly .trietly-trai p:first-child {
		font-size: 1.42rem;
	}

	/* Cho mô tả card sử dụng toàn bộ chiều ngang */
	.kht-trietly .trietly-phai > .col-inner > .row > .col:last-child > .col-inner {
		padding: 1px 14px 13px 16px;
	}
}











/* =========================================================
   KEHETO - HÌNH THÀNH & PHÁT TRIỂN
   Thay toàn bộ CSS cũ của .kht-history-reel bằng khối này.
   Không dùng thuộc tính cưỡng chế và không tác động section khác.
========================================================== */

/* 01. Hệ màu và kích thước dùng riêng cho section */
.kht-history-reel {
    --kht-primary: #28cb8b;
    --kht-green-1: #43a046;
    --kht-green-2: #388e3b;
    --kht-green-3: #237d31;
    --kht-green-4: #1b5e1f;
    --kht-green-5: #103e13;
    --kht-dark: #263238;
    --kht-grey: #89939e;
    --kht-grey-blue: #abbed1;
    --kht-silver: #f5f7fa;
    --kht-tint-2: #81c784;
    --kht-tint-3: #a5d6a7;
    --kht-tint-4: #c8e6c9;
    --kht-tint-5: #e8f5e9;
    --kht-container: 1360px;
    --kht-frame-gap: clamp(38px, 4vw, 64px);
    --kht-sticky-top: 70px;
    position: relative;
    width: 100%;
    color: var(--kht-dark);
    background:
        radial-gradient(circle at 1% 100%, rgba(67, 160, 70, 0.10) 0 11%, transparent 29%),
        radial-gradient(circle at 99% 1%, rgba(165, 214, 167, 0.12) 0 13%, transparent 31%),
        linear-gradient(110deg, #f7fcf8 0%, #ffffff 68%);
    overflow: clip;
    isolation: isolate;
}

.kht-history-reel,
.kht-history-reel *,
.kht-history-reel *::before,
.kht-history-reel *::after {
    box-sizing: border-box;
}

/* 02. Xử lý thẻ br/p rỗng do UX Builder tự chèn */
.kht-history-reel br,
.kht-history-reel p:empty {
    display: none;
}

.kht-history-reel::before,
.kht-history-reel::after {
    position: absolute;
    z-index: -1;
    width: clamp(190px, 21vw, 360px);
    aspect-ratio: 1;
    border: 1px solid rgba(67, 160, 70, 0.10);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.kht-history-reel::before {
    right: clamp(-160px, -9vw, -70px);
    top: clamp(-180px, -10vw, -90px);
    box-shadow: 0 0 0 38px rgba(232, 245, 233, 0.34);
}

.kht-history-reel::after {
    left: clamp(-190px, -11vw, -90px);
    bottom: clamp(-210px, -13vw, -100px);
    box-shadow: 0 0 0 38px rgba(232, 245, 233, 0.34);
}

/* 03. Không gian cuộn dọc và sân khấu ghim trên desktop */
.kht-history-reel__scroll-space {
    position: relative;
    min-height: 760px;
}

.kht-history-reel__sticky {
    position: sticky;
    top: var(--kht-sticky-top);
    height: max(650px, calc(100vh - var(--kht-sticky-top)));
    height: max(650px, calc(100svh - var(--kht-sticky-top)));
    overflow: hidden;
}

.kht-history-reel__inner {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto 54px;
    width: 100%;
    height: 100%;
    padding: clamp(22px, 2.2vw, 34px) 0 14px;
}

/* 04. Khung timeline và điều hướng */
.kht-history-reel__timeline,
.kht-history-reel__footer {
    width: min(var(--kht-container), calc(100% - 64px));
    margin-inline: auto;
}

/* 04.1. Tiêu đề đồng bộ theo section HỆ GIÁ TRỊ CỐT LÕI */
.kht-history-reel__header {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto 36px;
    padding: 0;
}

.kht-history-reel__title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    color: #18372c;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

/* Thanh màu nhận diện bên trái tiêu đề */
.kht-history-reel__title::before {
    display: block;
    flex: 0 0 7px;
    width: 7px;
    height: 42px;
    border-radius: 20px;
    background: linear-gradient(180deg, #28cb8b 0%, #159a66 100%);
    content: "";
}

/* Đường trang trí phía sau tiêu đề */
.kht-history-reel__title::after {
    display: block;
    flex: 1;
    height: 1px;
    margin-left: 8px;
    background: linear-gradient(
        90deg,
        rgba(40, 203, 139, 0.5) 0%,
        rgba(40, 203, 139, 0) 100%
    );
    content: "";
}

.kht-history-reel__title span {
    color: inherit;
}

/* 05. Viewport và dải thước phim */
.kht-history-reel__viewport {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 0;
    overflow: hidden;
}

.kht-history-reel__viewport::before {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(50vw, 720px);
    height: min(41vw, 560px);
    border-radius: 44%;
    background: radial-gradient(ellipse, rgba(67, 160, 70, 0.12), transparent 69%);
    content: "";
    transform: translate(-50%, -48%);
    pointer-events: none;
}

.kht-history-reel__track {
    display: flex;
    align-items: center;
    gap: var(--kht-frame-gap);
    width: max-content;
    will-change: transform;
}

/* 06. Khung phim và hiệu ứng active/inactive */
.kht-history-reel__frame {
    position: relative;
    flex: 0 0 clamp(490px, 37vw, 570px);
    height: clamp(370px, 28vw, 430px);
    margin: 0;
    padding: 36px 14px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--keheto-primary) 0%, var(--keheto-primary-dark) 100%);
    box-shadow: 0 16px 44px rgba(16, 62, 19, 0.08);
    opacity: 0.27;
    transform: scale(0.91);
    transform-origin: center;
    transition: opacity 380ms ease, transform 520ms cubic-bezier(0.2, 0.72, 0.2, 1), box-shadow 380ms ease;
    outline: none;
}

.kht-history-reel__frame::before,
.kht-history-reel__frame::after {
    position: absolute;
    left: 18px;
    right: 18px;
    height: 13px;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, var(--kht-tint-4) 0 18px, transparent 18px 32px);
    content: "";
    pointer-events: none;
}

.kht-history-reel__frame::before {
    top: 11px;
}

.kht-history-reel__frame::after {
    bottom: 11px;
}

.kht-history-reel__frame.is-active {
    z-index: 2;
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 22px 56px rgba(16, 62, 19, 0.18), 0 0 0 1px rgba(16, 62, 19, 0.08);
}

.kht-history-reel__frame:focus-visible {
    box-shadow: 0 0 0 4px rgba(40, 203, 139, 0.34), 0 22px 56px rgba(16, 62, 19, 0.18);
}

/* 07. Nội dung bên trong từng khung phim */
.kht-history-reel__panel {
    display: grid;
    grid-template-columns: clamp(88px, 7vw, 106px) minmax(0, 1fr);
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(200, 230, 201, 0.95);
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.96);
}

.kht-history-reel__year-column {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--kht-tint-4);
    background: linear-gradient(180deg, var(--kht-tint-5), rgba(200, 230, 201, 0.72));
}

.kht-history-reel__year {
    display: block;
    margin: 0;
    color: var(--kht-green-5);
    font-size: clamp(45px, 4vw, 60px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.06em;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.kht-history-reel__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(34px, 3vw, 52px) clamp(30px, 3.2vw, 48px);
}

.kht-history-reel__frame-title {
    margin: 0;
    font: inherit;
}

.kht-history-reel__frame-action {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    margin-bottom: 14px;
    padding: 5px 13px 5px 10px;
    border: 1px solid var(--kht-tint-4);
    border-radius: 999px;
    color: var(--kht-green-5);
    background: var(--kht-tint-5);
    font-size: clamp(10px, 0.82vw, 12px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.kht-history-reel__frame-action::before {
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border: 2px solid rgba(40, 203, 139, 0.24);
    border-radius: 50%;
    background: var(--kht-green-1);
    box-shadow: 0 0 0 4px rgba(40, 203, 139, 0.13);
    content: "";
}

.kht-history-reel__frame-name {
    display: block;
    color: var(--kht-dark);
    font-size: clamp(34px, 3vw, 46px);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.055em;
    text-transform: uppercase;
}

.kht-history-reel__frame-name span {
    display: block;
}

.kht-history-reel__description {
    max-width: 350px;
    margin: clamp(18px, 1.7vw, 25px) 0 0;
    color: #697781;
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 400;
    line-height: 1.65;
}

/* 08. Timeline năm */
.kht-history-reel__timeline {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: center;
    min-height: 48px;
}

.kht-history-reel__timeline::before {
    position: absolute;
    left: 4.5%;
    right: 4.5%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, var(--kht-tint-3), var(--kht-tint-4));
    content: "";
    transform: translateY(-50%);
}

.kht-history-reel__timeline-button {
    position: relative;
    z-index: 1;
    justify-self: center;
    min-width: 56px;
    min-height: 36px;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid #e5e9ec;
    border-radius: 999px;
    color: #697781;
    background: #ffffff;
    box-shadow: 0 2px 7px rgba(38, 50, 56, 0.03);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: color 220ms ease, border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.kht-history-reel__timeline-button:hover,
.kht-history-reel__timeline-button:focus-visible {
    color: var(--kht-green-4);
    border-color: var(--kht-tint-2);
    transform: translateY(-2px);
    outline: none;
}

.kht-history-reel__timeline-button.is-active {
    color: #ffffff;
    border-color: var(--kht-green-1);
    background: var(--kht-green-1);
    box-shadow: 0 7px 18px rgba(67, 160, 70, 0.20);
}

/* 09. Nút điều hướng góc phải */
.kht-history-reel__footer {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.kht-history-reel__nav {
    display: flex;
    gap: 10px;
}

.kht-history-reel__nav-button {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 0;
    padding: 0;
    border: 1px solid #e5e9ec;
    border-radius: 50%;
    color: var(--kht-dark);
    background: rgba(255, 255, 255, 0.86);
    cursor: pointer;
    transition: color 220ms ease, border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.kht-history-reel__nav-button svg {
    width: 21px;
    height: 21px;
}

.kht-history-reel__nav-button:hover,
.kht-history-reel__nav-button:focus-visible {
    color: #ffffff;
    border-color: var(--kht-green-1);
    background: var(--kht-green-1);
    transform: translateY(-2px);
    outline: none;
}

.kht-history-reel__nav-button:disabled {
    color: #bcc5ca;
    border-color: #edf0f2;
    background: rgba(255, 255, 255, 0.52);
    cursor: default;
    transform: none;
}

/* 10. Tablet nhỏ */
@media (max-width: 1100px) and (min-width: 850px) {
    .kht-history-reel {
        --kht-frame-gap: 34px;
    }

    .kht-history-reel__timeline,
    .kht-history-reel__footer {
        width: calc(100% - 44px);
    }

    .kht-history-reel__frame {
        flex-basis: 470px;
        height: 370px;
    }

    .kht-history-reel__content {
        padding: 30px 28px;
    }

    .kht-history-reel__frame-name {
        font-size: 34px;
    }
}

/* 10.1. Tiêu đề tablet đồng bộ theo HỆ GIÁ TRỊ CỐT LÕI */
@media (max-width: 1024px) {
    .kht-history-reel__header {
        width: calc(100% - 36px);
    }

    .kht-history-reel__title {
        font-size: 2rem;
    }
}

/* 11. Mobile: chuyển từ pin dọc sang vuốt ngang */
@media (max-width: 849px) {
    .kht-history-reel {
        --kht-frame-gap: 12px;
        overflow: hidden;
    }

    .kht-history-reel__scroll-space {
        height: auto;
        min-height: 0;
    }

    .kht-history-reel__sticky {
        position: relative;
        top: auto;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .kht-history-reel__inner {
        display: block;
        height: auto;
        padding: 26px 0 18px;
    }

    .kht-history-reel__footer {
        width: calc(100% - 30px);
    }

    .kht-history-reel__viewport {
        display: block;
        margin-top: 22px;
        padding: 12px 15px 24px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .kht-history-reel__viewport::-webkit-scrollbar {
        display: none;
    }

    .kht-history-reel__viewport::before {
        width: 90vw;
        height: 440px;
    }

    .kht-history-reel__track {
        transform: none;
    }

    .kht-history-reel__frame {
        flex-basis: min(430px, calc(100vw - 30px));
        height: clamp(360px, 108vw, 430px);
        padding: 31px 10px;
        border-radius: 20px;
        opacity: 0.40;
        transform: scale(0.96);
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .kht-history-reel__frame::before,
    .kht-history-reel__frame::after {
        left: 14px;
        right: 14px;
        height: 10px;
        background: repeating-linear-gradient(90deg, var(--kht-tint-4) 0 14px, transparent 14px 25px);
    }

    .kht-history-reel__frame::before {
        top: 10px;
    }

    .kht-history-reel__frame::after {
        bottom: 10px;
    }

    .kht-history-reel__panel {
        grid-template-columns: 76px minmax(0, 1fr);
        border-radius: 15px;
    }

    .kht-history-reel__year {
        font-size: clamp(39px, 12vw, 50px);
    }

    .kht-history-reel__content {
        padding: 27px 21px;
    }

    .kht-history-reel__frame-action {
        min-height: 25px;
        margin-bottom: 13px;
        padding: 5px 10px 5px 8px;
        font-size: 9px;
        letter-spacing: 0.11em;
    }

    .kht-history-reel__frame-name {
        font-size: clamp(27px, 8vw, 37px);
        line-height: 1;
    }

    .kht-history-reel__description {
        margin-top: 17px;
        font-size: 14px;
        line-height: 1.55;
    }

    .kht-history-reel__timeline {
        display: flex;
        gap: 28px;
        width: 100%;
        min-height: 48px;
        padding: 4px 18px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .kht-history-reel__timeline::-webkit-scrollbar {
        display: none;
    }

    .kht-history-reel__timeline::before {
        left: 18px;
        right: auto;
        width: 620px;
    }

    .kht-history-reel__timeline-button {
        flex: 0 0 auto;
        min-width: 54px;
        min-height: 34px;
        padding: 8px 12px;
        font-size: 12px;
        scroll-snap-align: center;
    }

    .kht-history-reel__footer {
        height: 50px;
        margin-top: 8px;
    }

    .kht-history-reel__nav-button {
        width: 43px;
        height: 43px;
    }
}

/* 11.1. Tiêu đề mobile đồng bộ theo HỆ GIÁ TRỊ CỐT LÕI */
@media screen and (max-width: 549px) {
    .kht-history-reel__header {
        width: 100%;
        margin-bottom: 22px;
        padding: 0 16px;
    }

    .kht-history-reel__title {
        gap: 11px;
        font-size: 1.55rem;
        line-height: 1.3;
    }

    .kht-history-reel__title::before {
        flex-basis: 5px;
        width: 5px;
        height: 34px;
    }

    .kht-history-reel__title::after {
        display: none;
    }
}

/* 12. Màn hình mobile rất nhỏ */
@media (max-width: 380px) {
    .kht-history-reel__frame {
        flex-basis: calc(100vw - 24px);
        height: 368px;
    }

    .kht-history-reel__viewport {
        padding-inline: 12px;
    }

    .kht-history-reel__panel {
        grid-template-columns: 66px minmax(0, 1fr);
    }

    .kht-history-reel__content {
        padding: 23px 17px;
    }

    .kht-history-reel__frame-name {
        font-size: 27px;
    }
}

/* 13. Giảm chuyển động theo thiết lập hệ điều hành */
@media (prefers-reduced-motion: reduce) {
    .kht-history-reel__frame,
    .kht-history-reel__timeline-button,
    .kht-history-reel__nav-button,
    .kht-history-reel__viewport {
        scroll-behavior: auto;
        transition: none;
    }
}