/* =========================================================
   KEHETO - SECTION 1 HERO
   - Desktop giữ nguyên layout card + background
   - Chỉ mobile <= 549px:
     + Ẩn toàn bộ card nội dung
     + Ảnh rộng 100%
     + Giữ đúng tỷ lệ ảnh gốc
     + Không crop / không méo / không khoảng trống
   - Không sử dụng ID
   - Không sử dụng !important
========================================================= */


/* =========================================================
   01. SECTION
========================================================= */

.ladi-section1 {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: #173c2c;
	isolation: isolate;
}


/* =========================================================
   02. BACKGROUND
========================================================= */

.ladi-section1 .section-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}


/* Ảnh nền desktop */
.ladi-section1 .section-bg .bg {
	position: absolute;

	top: -10px;
	left: -10px;

	display: block;

	width: calc(100% + 20px);
	height: calc(100% + 20px);

	max-width: none;

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

	will-change: transform;
}


/* Overlay rất nhẹ bên trái desktop */
.ladi-section1 .section-bg::after {
	content: "";

	position: absolute;
	inset: 0;

	z-index: 1;

	pointer-events: none;

	background:
		linear-gradient(
			90deg,
			rgba(10, 40, 28, 0.18) 0%,
			rgba(10, 40, 28, 0.10) 28%,
			rgba(10, 40, 28, 0.03) 45%,
			rgba(10, 40, 28, 0) 62%
		);
}


/* =========================================================
   03. SECTION CONTENT
========================================================= */

.ladi-section1 .section-content {
	position: relative;

	z-index: 3;

	display: flex;
	align-items: center;

	min-height: 660px;
}


/* Row chính */
.ladi-section1 .section-content > .row {
	display: flex;
	align-items: center;

	width: calc(100% - 56px);
	max-width: 1380px;

	min-height: 660px;

	margin-left: auto;
	margin-right: auto;
}


/* =========================================================
   04. CỘT DESKTOP
========================================================= */

.ladi-section1 .trai {
	flex: 0 0 40%;

	max-width: 40%;

	padding-left: 0;
	padding-right: 18px;
}


.ladi-section1 .trai + .col {
	flex: 0 0 60%;

	max-width: 60%;
}


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

.ladi-section1 .trai > .col-inner {
	position: relative;

	width: 100%;
	max-width: none;

	margin: 0;

	padding:
		32px
		30px
		30px;

	text-align: left;

	border:
		1px solid
		rgba(255, 255, 255, 0.12);

	border-radius: 16px;

	background:
		linear-gradient(
			135deg,
			rgba(9, 42, 29, 0.79) 0%,
			rgba(9, 42, 29, 0.70) 55%,
			rgba(9, 42, 29, 0.58) 100%
		);

	box-shadow:
		0 22px 55px
		rgba(0, 0, 0, 0.14);
}


/* Thanh xanh cạnh card */
.ladi-section1 .trai > .col-inner::before {
	content: "";

	position: absolute;

	top: 32px;
	bottom: 32px;
	left: 0;

	width: 3px;

	border-radius:
		0
		5px
		5px
		0;

	background:
		linear-gradient(
			180deg,
			#28cb8b 0%,
			rgba(40, 203, 139, 0.18) 100%
		);
}


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

.ladi-section1 .tieu-de {
	--kht-line-scale: 1;

	position: relative;

	margin: 0;

	padding: 0;
}


.ladi-section1 .tieu-de::before {
	content: "";

	display: block;

	width: 48px;
	height: 3px;

	margin-bottom: 19px;

	border-radius: 50px;

	background: #28cb8b;

	transform:
		scaleX(
			var(--kht-line-scale)
		);

	transform-origin: left center;
}


.ladi-section1 .tieu-de .uppercase {
	width: 100%;
	max-width: 100%;

	margin: 0;

	color: #ffffff;

	font-size:
		clamp(
			30px,
			2.15vw,
			30px
		);

	line-height: 1.24;

	font-weight: 700;

	text-align: left;

	text-transform: uppercase;

	word-break: normal;

	overflow-wrap: normal;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


.ladi-section1 .kht-nowrap {
	display: inline-block;

	white-space: nowrap;
}


/* =========================================================
   07. MÔ TẢ
========================================================= */

.ladi-section1 .mo-ta {
	width: 100%;
	max-width: 470px;

	margin:
		21px
		0
		0;

	text-align: left;
}


.ladi-section1 .mo-ta p {
	margin: 0;

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

	font-size: 14px;

	line-height: 1.7;

	font-weight: 400;

	text-align: left;
}


/* =========================================================
   08. BUTTON CHUNG
========================================================= */

.ladi-section1 .trai .button {
	position: relative;

	display: inline-flex;

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

	min-height: 52px;

	margin-top: 27px;
	margin-bottom: 0;

	padding:
		0
		21px;

	vertical-align: middle;

	border-radius: 8px;

	font-size: 10.8px;

	line-height: 1;

	font-weight: 700;

	letter-spacing: 0.04em;

	text-transform: uppercase;

	text-decoration: none;

	text-shadow: none;

	cursor: pointer;

	overflow: hidden;

	transform-origin: center;

	will-change:
		transform,
		box-shadow;

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


/* =========================================================
   TEXT BÊN TRONG BUTTON

   SỬA:
   - Không áp position:relative cho ripple.
   - Tránh ripple tham gia flex layout và làm button phóng to.
========================================================= */

.ladi-section1
.trai
.button
> span:not(.kht-button-ripple) {
	position: relative;

	z-index: 4;

	line-height: 1;

	text-transform: uppercase;

	pointer-events: none;
}


/* =========================================================
   09. BUTTON CTA CHÍNH
========================================================= */

.ladi-section1 .nut1 {
	min-width: 220px;

	margin-right: 9px;

	color: #ffffff;

	border:
		1px solid
		rgba(
			79,
			239,
			176,
			0.88
		);

	background:
		linear-gradient(
			135deg,
			#31d696 0%,
			#28cb8b 45%,
			#1fb976 100%
		);

	box-shadow:
		0 8px 18px
		rgba(40, 203, 139, 0.24),

		0 15px 35px
		rgba(40, 203, 139, 0.22),

		inset 0 1px 0
		rgba(255, 255, 255, 0.22);
}


.ladi-section1 .nut1::before {
	content: "";

	position: absolute;

	inset: -1px;

	z-index: 1;

	border-radius: inherit;

	opacity: 0;

	background:
		radial-gradient(
			circle at center,
			rgba(
				105,
				255,
				197,
				0.35
			),
			rgba(
				40,
				203,
				139,
				0
			)
		);

	transition:
		opacity
		0.25s ease;
}


.ladi-section1 .nut1::after {
	content: "";

	position: absolute;

	z-index: 2;

	top: -30%;
	bottom: -30%;
	left: -55%;

	width: 35%;

	transform:
		rotate(18deg);

	background:
		linear-gradient(
			90deg,
			rgba(
				255,
				255,
				255,
				0
			),
			rgba(
				255,
				255,
				255,
				0.46
			),
			rgba(
				255,
				255,
				255,
				0
			)
		);

	transition:
		left
		0.7s ease;
}


.ladi-section1 .kht-button-arrow {
	position: relative;

	z-index: 4;

	display: inline-flex;

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

	margin-left: 10px;

	font-size: 15px;

	line-height: 1;

	pointer-events: none;
}


.ladi-section1 .nut1:hover {
	color: #ffffff;

	border-color:
		rgba(
			139,
			255,
			210,
			0.95
		);

	filter:
		brightness(1.06);

	box-shadow:
		0 10px 22px
		rgba(40, 203, 139, 0.30),

		0 19px 44px
		rgba(40, 203, 139, 0.33),

		inset 0 1px 0
		rgba(255, 255, 255, 0.28);
}


.ladi-section1 .nut1:hover::before {
	opacity: 1;
}


.ladi-section1 .nut1:hover::after {
	left: 125%;
}


/* =========================================================
   10. BUTTON 2
========================================================= */

.ladi-section1 .nut2 {
	min-width: 220px;

	color: #173c2c;

	border:
		1px solid
		rgba(
			255,
			255,
			255,
			0.90
		);

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

	box-shadow:
		0 8px 20px
		rgba(0, 0, 0, 0.13),

		inset 0 1px 0
		rgba(255, 255, 255, 0.80);
}


.ladi-section1 .nut2::before {
	content: "";

	position: absolute;

	inset: 0;

	z-index: 1;

	opacity: 0;

	background:
		linear-gradient(
			120deg,
			rgba(
				40,
				203,
				139,
				0
			),
			rgba(
				40,
				203,
				139,
				0.13
			),
			rgba(
				40,
				203,
				139,
				0
			)
		);

	transition:
		opacity
		0.25s ease;
}


.ladi-section1 .nut2:hover {
	color: #ffffff;

	border-color: #28cb8b;

	background: #28cb8b;

	box-shadow:
		0 10px 24px
		rgba(40, 203, 139, 0.26),

		0 18px 40px
		rgba(40, 203, 139, 0.20);
}


.ladi-section1 .nut2:hover::before {
	opacity: 1;
}


/* =========================================================
   11. RIPPLE

   SỬA LỖI BUTTON PHÓNG TO KHI CLICK:
   - Selector có độ ưu tiên cao hơn.
   - Ripple luôn absolute.
   - Ripple không được tham gia flex layout.
========================================================= */

.ladi-section1
.trai
.button
> .kht-button-ripple {
	position: absolute;

	display: block;

	z-index: 3;

	flex: 0 0 auto;

	width: 10px;
	height: 10px;

	min-width: 0;
	min-height: 0;

	margin: 0;
	padding: 0;

	border-radius: 50%;

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

	pointer-events: none;

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

	opacity: 1;
}


/* Accessibility */
.ladi-section1
.trai .button:focus-visible {
	outline:
		3px solid
		rgba(
			86,
			243,
			180,
			0.55
		);

	outline-offset: 4px;
}


/* =========================================================
   12. LAPTOP
========================================================= */

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

	.ladi-section1 .section-content,
	.ladi-section1
	.section-content > .row {
		min-height: 620px;
	}


	.ladi-section1 .trai {
		flex-basis: 43%;

		max-width: 43%;
	}


	.ladi-section1
	.trai + .col {
		flex-basis: 57%;

		max-width: 57%;
	}


	.ladi-section1
	.trai > .col-inner {
		padding:
			28px
			25px
			26px;
	}


	.ladi-section1
	.tieu-de .uppercase {
		font-size: 30px;
	}


	.ladi-section1 .nut1 {
		min-width: 202px;
	}


	.ladi-section1 .nut2 {
		min-width: 202px;
	}

}


/* =========================================================
   13. TABLET
========================================================= */

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

	.ladi-section1 .section-content,
	.ladi-section1
	.section-content > .row {
		min-height: 610px;
	}


	.ladi-section1
	.section-bg .bg {
		object-position:
			62%
			center;
	}


	.ladi-section1
	.section-content > .row {
		width:
			calc(
				100% - 36px
			);
	}


	.ladi-section1 .trai {
		flex-basis: 55%;

		max-width: 55%;

		padding-right: 12px;
	}


	.ladi-section1
	.trai + .col {
		flex-basis: 45%;

		max-width: 45%;
	}


	.ladi-section1
	.trai > .col-inner {
		padding:
			25px
			22px
			23px;
	}


	.ladi-section1
	.tieu-de .uppercase {
		font-size: 28px;

		line-height: 1.24;
	}


	.ladi-section1
	.mo-ta p {
		font-size: 13px;
	}


	.ladi-section1
	.trai .button {
		min-height: 48px;

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


	.ladi-section1 .nut1 {
		min-width: 188px;
	}


	.ladi-section1 .nut2 {
		min-width: 188px;
	}

}


/* =========================================================
   14. MOBILE <= 549PX
========================================================= */

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

	.ladi-section1 {
		display: block;

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

		margin: 0;

		overflow: hidden;

		background: transparent;
	}


	.ladi-section1
	> .section-bg.fill {
		position: relative;

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

		inset: auto;

		display: block;

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

		height: auto;
		min-height: 0;

		margin: 0;
		padding: 0;

		line-height: 0;

		overflow: hidden;

		background: transparent;
	}


	.ladi-section1
	> .section-bg.fill
	> .bg {
		position: relative;

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

		inset: auto;

		display: block;

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

		height: auto;

		margin: 0;
		padding: 0;

		object-fit: initial;

		object-position:
			center
			center;

		transform: none;

		translate: none;

		rotate: none;

		scale: none;

		will-change: auto;
	}


	.ladi-section1
	> .section-bg.fill::after {
		content: none;

		display: none;
	}


	.ladi-section1
	> .section-content.relative {
		display: none;
	}

}


/* =========================================================
   15. REDUCED MOTION
========================================================= */

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

	.ladi-section1 .trai .button,
	.ladi-section1 .nut1::before,
	.ladi-section1 .nut1::after,
	.ladi-section1 .nut2::before {
		transition: none;
	}

}

















/* =========================================================
   KEHETO - SECTION 2
   FACTORY STATS
   - Bỏ toàn bộ số thứ tự 01 02 03 04 05
   - Text mô tả bên dưới VIẾT HOA
   - Tăng kích thước text mô tả
   - Desktop: 5 chỉ số / 1 hàng
   - Tablet: 3 + 2
   - Mobile: 2 + 2 + 1
   - Chỉ sử dụng CLASS

   UPDATE:
   - Căn toàn bộ đường line xanh dưới text thẳng hàng
   - Không thay đổi các phần khác
   ========================================================= */


/* ---------------------------------------------------------
   1. Khung section
   --------------------------------------------------------- */
.ladi-section2 {
    position: relative;
    z-index: 8;

    margin-top: -34px;

    padding: 0 28px 56px;

    overflow: visible;

    background: transparent;
}


/* ---------------------------------------------------------
   2. Section content
   --------------------------------------------------------- */
.ladi-section2 .section-content {
    position: relative;
    z-index: 2;

    width: 100%;
}


/* ---------------------------------------------------------
   3. Container thống kê chung
   --------------------------------------------------------- */
.ladi-section2 .section-content > .row {
    position: relative;

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

    margin: 0 auto;
    padding: 8px;

    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;

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

    border-radius: 20px;

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

    box-shadow:
        0 10px 30px rgba(38, 50, 56, 0.06),
        0 24px 60px rgba(38, 50, 56, 0.08);

    overflow: hidden;
}


/* ---------------------------------------------------------
   4. Ánh sáng thương hiệu nhẹ
   --------------------------------------------------------- */
.ladi-section2 .section-content > .row::before {
    content: "";

    position: absolute;

    top: -130px;
    left: -110px;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(40, 203, 139, 0.13) 0%,
            rgba(40, 203, 139, 0) 70%
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   5. 5 cột bằng nhau trên desktop
   --------------------------------------------------------- */
.ladi-section2 .section-content > .row > .col {
    position: relative;

    flex: 0 0 20%;
    max-width: 20%;

    padding: 0;
}


/* ---------------------------------------------------------
   6. Nội dung từng chỉ số
   --------------------------------------------------------- */
.ladi-section2 .section-content > .row > .col > .col-inner {
    position: relative;

    min-height: 150px;

    padding: 31px 24px 27px;

    display: flex;
    align-items: center;

    border-radius: 14px;

    overflow: hidden;

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

    will-change: transform;
}


/* ---------------------------------------------------------
   7. Divider giữa các chỉ số
   --------------------------------------------------------- */
.ladi-section2
    .section-content
    > .row
    > .col:not(:first-child)
    > .col-inner::before {

    content: "";

    position: absolute;

    top: 27px;
    bottom: 27px;
    left: 0;

    width: 1px;

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


/* ---------------------------------------------------------
   8. Icon box gốc Flatsome
   --------------------------------------------------------- */
.ladi-section2 .icon-box {
    width: 100%;

    margin: 0;
    padding: 0;
}


/* ---------------------------------------------------------
   9. Text box
   --------------------------------------------------------- */
.ladi-section2 .icon-box-text {
    width: 100%;

    margin: 0;
    padding: 0;
}


/* ---------------------------------------------------------
   10. Paragraph gốc
   --------------------------------------------------------- */
.ladi-section2 .icon-box-text p {
    margin: 0;

    color: #263238;

    line-height: 1.3;
}


/* ---------------------------------------------------------
   11. CON SỐ CHÍNH
   --------------------------------------------------------- */
.ladi-section2 .kht-stat-value {
    display: block;

    margin-bottom: 12px;

    color: #28cb8b;

    font-size: clamp(30px, 2.3vw, 39px);

    line-height: 1;

    font-weight: 700;

    letter-spacing: -0.035em;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   12. TEXT BÊN DƯỚI
   - Viết hoa toàn bộ
   - Giữ nguyên font hiện tại

   THAY ĐỔI:
   - Dùng flex column
   - Tạo chiều cao label đồng đều
   - Giúp line bên dưới luôn nằm cùng một cao độ
   --------------------------------------------------------- */
.ladi-section2 .kht-stat-label {
    display: flex;

    flex-direction: column;

    max-width: 175px;

    /* Căn vùng text đồng đều giữa 5 card */
    min-height: 60px;

    color: #263238;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 0.015em;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   13. Thanh xanh nhỏ phía dưới text

   THAY ĐỔI:
   - margin-top:auto thay cho margin-top:14px
   - Line luôn nằm dưới cùng của vùng label
   - Label 1 dòng / 2 dòng vẫn thẳng hàng
   --------------------------------------------------------- */
.ladi-section2 .kht-stat-label::after {
    content: "";

    display: block;

    flex: 0 0 auto;

    width: 28px;
    height: 3px;

    /* Tự đẩy line xuống cùng một đáy */
    margin-top: auto;

    border-radius: 10px;

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

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


/* ---------------------------------------------------------
   14. Hover từng chỉ số
   --------------------------------------------------------- */
.ladi-section2
    .section-content
    > .row
    > .col
    > .col-inner:hover {

    background: #f5fcf8;

    transform: translateY(-3px);
}


/* ---------------------------------------------------------
   15. Hover thanh xanh
   --------------------------------------------------------- */
.ladi-section2
    .section-content
    > .row
    > .col
    > .col-inner:hover
    .kht-stat-label::after {

    width: 48px;

    background: #28cb8b;
}


/* =========================================================
   TABLET
   ========================================================= */
@media screen and (max-width: 849px) {

    /* Section tablet */
    .ladi-section2 {
        margin-top: -26px;

        padding:
            0
            20px
            46px;
    }


    /* Container tablet */
    .ladi-section2 .section-content > .row {
        padding: 7px;

        flex-wrap: wrap;

        border-radius: 18px;
    }


    /* Ba cột hàng đầu */
    .ladi-section2 .section-content > .row > .col {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }


    /* Hai cột cuối */
    .ladi-section2 .section-content > .row > .col:nth-child(4),
    .ladi-section2 .section-content > .row > .col:nth-child(5) {
        flex-basis: 50%;
        max-width: 50%;
    }


    /* Item tablet */
    .ladi-section2 .section-content > .row > .col > .col-inner {
        min-height: 132px;

        padding:
            25px
            20px
            22px;

        border:
            1px solid rgba(38, 50, 56, 0.045);
    }


    /* Bỏ divider desktop */
    .ladi-section2
        .section-content
        > .row
        > .col:not(:first-child)
        > .col-inner::before {

        display: none;
    }


    /* Số tablet */
    .ladi-section2 .kht-stat-value {
        margin-bottom: 10px;

        font-size: 31px;
    }


    /* Text tablet */
    .ladi-section2 .kht-stat-label {
        max-width: 165px;

        /* Căn line tablet */
        min-height: 56px;

        font-size: 14px;

        line-height: 1.4;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */
@media screen and (max-width: 549px) {

    /* Section mobile */
    .ladi-section2 {
        margin-top: -20px;

        padding:
            0
            14px
            38px;
    }


    /* Container mobile */
    .ladi-section2 .section-content > .row {
        padding: 6px;

        border-radius: 16px;

        box-shadow:
            0 12px 35px rgba(38, 50, 56, 0.09);
    }


    /* 2 item trên mỗi hàng */
    .ladi-section2 .section-content > .row > .col {
        flex: 0 0 50%;
        max-width: 50%;
    }


    /* Item cuối full width */
    .ladi-section2 .section-content > .row > .col:nth-child(5) {
        flex: 0 0 100%;
        max-width: 100%;
    }


    /* Card mobile */
    .ladi-section2 .section-content > .row > .col > .col-inner {
        min-height: 120px;

        padding:
            21px
            17px
            18px;
    }


    /* Item cuối gọn hơn */
    .ladi-section2
        .section-content
        > .row
        > .col:nth-child(5)
        > .col-inner {

        min-height: 100px;
    }


    /* Số mobile */
    .ladi-section2 .kht-stat-value {
        margin-bottom: 9px;

        font-size: 28px;
    }


    /* Text mobile */
    .ladi-section2 .kht-stat-label {
        max-width: 145px;

        /* Căn line của 2 card trong cùng hàng */
        min-height: 50px;

        font-size: 13px;

        line-height: 1.38;

        font-weight: 700;

        text-transform: uppercase;
    }


    /* Thanh dưới giữ nguyên kích thước mobile */
    .ladi-section2 .kht-stat-label::after {
        height: 2px;

        /* Không dùng margin-top cố định */
        margin-top: auto;
    }

}


/* =========================================================
   MOBILE NHỎ
   ========================================================= */
@media screen and (max-width: 370px) {

    /* Số nhỏ hơn */
    .ladi-section2 .kht-stat-value {
        font-size: 25px;
    }


    /* Text nhỏ hơn nhẹ */
    .ladi-section2 .kht-stat-label {
        min-height: 48px;

        font-size: 12px;
    }


    /* Padding nhỏ hơn */
    .ladi-section2 .section-content > .row > .col > .col-inner {
        padding-left: 14px;
        padding-right: 14px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {

    .ladi-section2
        .section-content
        > .row
        > .col
        > .col-inner,

    .ladi-section2 .kht-stat-label::after {

        transition: none;
    }

}
















/* =========================================================
   KEHETO - SECTION 3
   GIA CÔNG MỸ PHẨM / CUSTOMER NEEDS
   - Icon lớn
   - Icon căn trái giống text
   - Responsive
   - Chỉ sử dụng selector CLASS
   ========================================================= */


/* ---------------------------------------------------------
   1. Khung section
   --------------------------------------------------------- */
.ladi-section3 {
    position: relative;
    overflow: hidden;
    margin: 0;
    background: #f7faf8;
    isolation: isolate;
}


/* ---------------------------------------------------------
   2. Background trang trí
   --------------------------------------------------------- */
.ladi-section3 .section-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}


/* Ánh sáng xanh phía trên phải */
.ladi-section3 .section-bg::before {
    content: "";

    position: absolute;
    top: -220px;
    right: -180px;

    width: 620px;
    height: 620px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(40, 203, 139, 0.11) 0%,
            rgba(40, 203, 139, 0) 70%
        );

    pointer-events: none;
}


/* Ánh sáng xanh phía dưới trái */
.ladi-section3 .section-bg::after {
    content: "";

    position: absolute;
    left: -180px;
    bottom: -250px;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(40, 203, 139, 0.07) 0%,
            rgba(40, 203, 139, 0) 70%
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   3. Section content
   --------------------------------------------------------- */
.ladi-section3 .section-content {
    position: relative;
    z-index: 2;

    padding: 96px 0 40px;
}


/* ---------------------------------------------------------
   4. Row lớn
   --------------------------------------------------------- */
.ladi-section3
    > .section-content
    > .row {

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

    margin: 0 auto;

    display: flex;
    align-items: stretch;

    gap: 58px;
}


/* ---------------------------------------------------------
   5. Hai cột chính
   --------------------------------------------------------- */
.ladi-section3
    > .section-content
    > .row
    > .trai {

    flex: 0 0 calc(43% - 29px);
    max-width: calc(43% - 29px);

    padding: 0;
}


.ladi-section3
    > .section-content
    > .row
    > .phai {

    flex: 0 0 calc(57% - 29px);
    max-width: calc(57% - 29px);

    padding: 0;
}


/* Reset col-inner */
.ladi-section3
    > .section-content
    > .row
    > .col
    > .col-inner {

    width: 100%;
    height: 100%;

    padding: 0;
}


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


/* ---------------------------------------------------------
   6. Tiêu đề trái
   --------------------------------------------------------- */
.ladi-section3
    > .section-content
    > .row
    > .trai
    > .col-inner
    > .tieu-de {

    position: relative;

    margin: 0 0 21px;

    padding-top: 19px;
}


/* Line xanh */
.ladi-section3
    > .section-content
    > .row
    > .trai
    > .col-inner
    > .tieu-de::before {

    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 52px;
    height: 3px;

    border-radius: 30px;

    background: #28cb8b;

    transform-origin: left center;
}


/* Heading trái */
.ladi-section3
    > .section-content
    > .row
    > .trai
    > .col-inner
    > .tieu-de
    p {

    margin: 0;

    color: #173c2c;

    font-size: clamp(32px, 2.6vw, 43px);
    line-height: 1.16;

    font-weight: 700;

    letter-spacing: -0.035em;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   7. Mô tả trái
   --------------------------------------------------------- */
.ladi-section3
    > .section-content
    > .row
    > .trai
    > .col-inner
    > .mo-ta {

    max-width: 520px;

    margin: 0 0 27px;
}


/* Bỏ xuống dòng HTML cứng để responsive tự xử lý */
.ladi-section3
    > .section-content
    > .row
    > .trai
    > .col-inner
    > .mo-ta
    br {

    display: none;
}


.ladi-section3
    > .section-content
    > .row
    > .trai
    > .col-inner
    > .mo-ta
    p {

    margin: 0;

    color: #5b6861;

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

    font-weight: 400;
}


/* ---------------------------------------------------------
   8. CTA trái
   --------------------------------------------------------- */
.ladi-section3
    > .section-content
    > .row
    > .trai
    > .col-inner
    > .button {

    position: relative;

    min-height: 53px;

    margin: 0 0 34px;

    padding: 0 24px;

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

    border: 1px solid #28cb8b;
    border-radius: 8px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #31d696,
            #28cb8b
        );

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

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

    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    overflow: hidden;

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


/* Text CTA */
.ladi-section3
    > .section-content
    > .row
    > .trai
    > .col-inner
    > .button
    span {

    position: relative;
    z-index: 2;

    text-transform: uppercase;
}


/* Arrow CTA */
.ladi-section3
    > .section-content
    > .row
    > .trai
    > .col-inner
    > .button::after {

    content: "→";

    position: relative;
    z-index: 2;

    margin-left: 13px;

    font-size: 16px;

    transition: transform 0.25s ease;
}


/* Hover CTA */
.ladi-section3
    > .section-content
    > .row
    > .trai
    > .col-inner
    > .button:hover {

    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 17px 36px rgba(40, 203, 139, 0.30);
}


.ladi-section3
    > .section-content
    > .row
    > .trai
    > .col-inner
    > .button:hover::after {

    transform: translateX(4px);
}


/* ---------------------------------------------------------
   9. Ảnh lớn bên trái
   --------------------------------------------------------- */
.ladi-section3
    > .section-content
    > .row
    > .trai
    > .col-inner
    > .img {

    position: relative;

    width: 100%;

    margin: 0;

    overflow: visible;
}


/* Khung ảnh */
.ladi-section3
    > .section-content
    > .row
    > .trai
    > .col-inner
    > .img
    .img-inner {

    position: relative;

    width: 100%;
    height: 350px;

    border-radius: 22px;

    overflow: hidden;

    background: #e9f1ec;

    box-shadow:
        0 18px 45px rgba(38, 50, 56, 0.11);
}


/* Ảnh */
.ladi-section3
    > .section-content
    > .row
    > .trai
    > .col-inner
    > .img
    img {

    width: 100%;
    height: 100%;

    display: block;

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

    transform: scale(1.025);

    transition: transform 0.7s ease;

    will-change: transform;
}


/* Hover ảnh */
.ladi-section3
    > .section-content
    > .row
    > .trai
    > .col-inner
    > .img:hover
    img {

    transform: scale(1.065);
}


/* Góc xanh trang trí */
.ladi-section3
    > .section-content
    > .row
    > .trai
    > .col-inner
    > .img::after {

    content: "";

    position: absolute;

    right: -13px;
    bottom: -13px;

    width: 110px;
    height: 110px;

    z-index: -1;

    border-radius: 0 0 28px 0;

    background: #28cb8b;
}


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


/* ---------------------------------------------------------
   10. Heading bên phải
   --------------------------------------------------------- */
.ladi-section3
    > .section-content
    > .row
    > .phai
    > .col-inner
    > .tieu-de {

    position: relative;

    margin: 0 0 10px;

    padding-top: 18px;
}


/* Line xanh */
.ladi-section3
    > .section-content
    > .row
    > .phai
    > .col-inner
    > .tieu-de::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 45px;
    height: 3px;

    border-radius: 20px;

    background: #28cb8b;
}


/* Heading */
.ladi-section3
    > .section-content
    > .row
    > .phai
    > .col-inner
    > .tieu-de
    p {

    margin: 0;

    color: #263238;

    font-size: clamp(30px, 2.3vw, 38px);
    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -0.035em;
}


/* ---------------------------------------------------------
   11. Mô tả bên phải
   --------------------------------------------------------- */
.ladi-section3
    > .section-content
    > .row
    > .phai
    > .col-inner
    > .mo-ta {

    max-width: 580px;

    margin: 0 0 28px;
}


.ladi-section3
    > .section-content
    > .row
    > .phai
    > .col-inner
    > .mo-ta
    p {

    margin: 0;

    color: #68756e;

    font-size: 15px;
    line-height: 1.65;
}


/* ---------------------------------------------------------
   12. Row 4 card
   --------------------------------------------------------- */
.ladi-section3
    > .section-content
    > .row
    > .phai
    > .col-inner
    > .row {

    width: 100%;

    margin: 0;

    display: flex;
    align-items: stretch;

    gap: 16px;
}


/* Hai cột card */
.ladi-section3
    > .section-content
    > .row
    > .phai
    > .col-inner
    > .row
    > .col {

    flex: 0 0 calc(50% - 8px);
    max-width: calc(50% - 8px);

    padding: 0;
}


/* 2 card trên mỗi cột */
.ladi-section3
    > .section-content
    > .row
    > .phai
    > .col-inner
    > .row
    > .col
    > .col-inner {

    height: 100%;

    padding: 0;

    display: grid;

    grid-template-rows:
        1fr
        1fr;

    gap: 16px;
}


/* =========================================================
   CARD
   ========================================================= */


/* ---------------------------------------------------------
   13. Card nhu cầu
   --------------------------------------------------------- */
.ladi-section3
    > .section-content
    > .row
    > .phai
    .icon-box {

    position: relative;

    min-height: 290px;

    margin: 0;

    padding:
        27px
        22px
        23px;

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    border: 1px solid #e3ebe6;

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 8px 24px rgba(38, 50, 56, 0.055);

    overflow: hidden;

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

    will-change: transform;
}


/* Accent trên card */
.ladi-section3
    > .section-content
    > .row
    > .phai
    .icon-box::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    transform: scaleX(0);

    transform-origin: left center;

    background: #28cb8b;

    transition: transform 0.3s ease;
}


/* Hover card */
.ladi-section3
    > .section-content
    > .row
    > .phai
    .icon-box:hover {

    transform: translateY(-5px);

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

    box-shadow:
        0 16px 38px rgba(38, 50, 56, 0.10);
}


/* Accent hover */
.ladi-section3
    > .section-content
    > .row
    > .phai
    .icon-box:hover::before {

    transform: scaleX(1);
}


/* =========================================================
   ICON - TO + CĂN TRÁI
   ========================================================= */


/* ---------------------------------------------------------
   14. Khung icon
   Căn trái giống heading và mô tả
   --------------------------------------------------------- */
.ladi-section3
    > .section-content
    > .row
    > .phai
    .icon-box-img {

    position: relative;

    flex: 0 0 auto;

    margin:
        0
        0
        22px
        0;

    padding: 0;

    display: block;

    text-align: left;
}


/* ---------------------------------------------------------
   15. Icon wrapper
   --------------------------------------------------------- */
.ladi-section3
    > .section-content
    > .row
    > .phai
    .icon-box-img
    .icon {

    width: 100%;

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


/* ---------------------------------------------------------
   16. Icon-inner
   Không margin auto nữa
   --------------------------------------------------------- */
.ladi-section3
    > .section-content
    > .row
    > .phai
    .icon-box-img
    .icon-inner {

    position: relative;

    width: 82px;
    height: 82px;

    margin: 0;

    padding: 10px;

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

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #effbf4 0%,
            #e5f7ed 100%
        );

    box-shadow:
        0 9px 24px rgba(40, 203, 139, 0.12);

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


/* Viền bên trong icon */
.ladi-section3
    > .section-content
    > .row
    > .phai
    .icon-box-img
    .icon-inner::before {

    content: "";

    position: absolute;

    inset: 5px;

    border:
        1px solid rgba(40, 203, 139, 0.15);

    border-radius: 17px;

    pointer-events: none;
}


/* ---------------------------------------------------------
   17. Ảnh icon
   --------------------------------------------------------- */
.ladi-section3
    > .section-content
    > .row
    > .phai
    .icon-box-img
    img {

    position: relative;
    z-index: 2;

    width: 60px;
    height: 60px;

    max-width: 60px;

    display: block;

    margin: 0;

    object-fit: contain;

    border-radius: 14px;
}


/* ---------------------------------------------------------
   18. Hover icon
   --------------------------------------------------------- */
.ladi-section3
    > .section-content
    > .row
    > .phai
    .icon-box:hover
    .icon-inner {

    transform:
        translateY(-3px)
        scale(1.05);

    background:
        linear-gradient(
            145deg,
            #e9faf1,
            #dff6e9
        );

    box-shadow:
        0 13px 30px rgba(40, 203, 139, 0.17);
}


/* =========================================================
   TEXT CARD
   ========================================================= */


/* ---------------------------------------------------------
   19. Nội dung card
   --------------------------------------------------------- */
.ladi-section3
    > .section-content
    > .row
    > .phai
    .icon-box-text {

    width: 100%;

    display: flex;
    flex-direction: column;

    flex: 1;

    text-align: left;
}


/* Heading card */
.ladi-section3
    > .section-content
    > .row
    > .phai
    .icon-box-text
    h3 {

    margin: 0 0 11px;

    color: #263238;

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

    font-weight: 700;

    letter-spacing: -0.015em;

    text-align: left;
}


/* Description */
.ladi-section3
    > .section-content
    > .row
    > .phai
    .icon-box-text
    p {

    margin: 0 0 19px;

    color: #6a756f;

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

    font-weight: 400;

    text-align: left;
}


/* Bỏ br cứng */
.ladi-section3
    > .section-content
    > .row
    > .phai
    .icon-box-text
    p
    br {

    display: none;
}


/* ---------------------------------------------------------
   20. CTA card
   --------------------------------------------------------- */
.ladi-section3
    > .section-content
    > .row
    > .phai
    .icon-box-text
    .button {

    position: relative;

    align-self: flex-start;

    min-height: auto;

    margin:
        auto
        0
        0;

    padding:
        0
        19px
        0
        0;

    color: #28a873;

    border: 0;

    background: transparent;

    box-shadow: none;

    font-size: 11px;
    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 0.02em;

    text-transform: uppercase;

    transition:
        color 0.25s ease;
}


/* Arrow card */
.ladi-section3
    > .section-content
    > .row
    > .phai
    .icon-box-text
    .button::after {

    content: "→";

    position: absolute;

    right: 0;
    top: 50%;

    transform:
        translateY(-50%);

    font-size: 14px;

    transition:
        transform 0.25s ease;
}


/* Hover CTA card */
.ladi-section3
    > .section-content
    > .row
    > .phai
    .icon-box-text
    .button:hover {

    color: #187c52;

    background: transparent;
}


.ladi-section3
    > .section-content
    > .row
    > .phai
    .icon-box-text
    .button:hover::after {

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


/* =========================================================
   LAPTOP
   ========================================================= */
@media screen and (max-width: 1200px) {

    /* Giảm khoảng giữa hai cột */
    .ladi-section3
        > .section-content
        > .row {

        gap: 38px;
    }


    /* Điều chỉnh tỷ lệ */
    .ladi-section3
        > .section-content
        > .row
        > .trai {

        flex-basis:
            calc(44% - 19px);

        max-width:
            calc(44% - 19px);
    }


    .ladi-section3
        > .section-content
        > .row
        > .phai {

        flex-basis:
            calc(56% - 19px);

        max-width:
            calc(56% - 19px);
    }


    /* Ảnh trái */
    .ladi-section3
        > .section-content
        > .row
        > .trai
        > .col-inner
        > .img
        .img-inner {

        height: 320px;
    }


    /* Card */
    .ladi-section3
        > .section-content
        > .row
        > .phai
        .icon-box {

        min-height: 280px;

        padding:
            23px
            19px;
    }


    /* Icon laptop */
    .ladi-section3
        > .section-content
        > .row
        > .phai
        .icon-box-img
        .icon-inner {

        width: 76px;
        height: 76px;

        border-radius: 20px;
    }


    .ladi-section3
        > .section-content
        > .row
        > .phai
        .icon-box-img
        img {

        width: 55px;
        height: 55px;

        max-width: 55px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */
@media screen and (max-width: 849px) {

    /* Section */
    .ladi-section3 .section-content {
        padding:
            72px
            0
            80px;
    }


    /* Main row thành 1 cột */
    .ladi-section3
        > .section-content
        > .row {

        width:
            calc(100% - 40px);

        display: block;
    }


    .ladi-section3
        > .section-content
        > .row
        > .trai,

    .ladi-section3
        > .section-content
        > .row
        > .phai {

        width: 100%;

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

        padding: 0;
    }


    /* Khoảng sang phần phải */
    .ladi-section3
        > .section-content
        > .row
        > .phai {

        margin-top: 68px;
    }


    /* Mô tả trái */
    .ladi-section3
        > .section-content
        > .row
        > .trai
        > .col-inner
        > .mo-ta {

        max-width: 680px;
    }


    /* Ảnh */
    .ladi-section3
        > .section-content
        > .row
        > .trai
        > .col-inner
        > .img
        .img-inner {

        height: 420px;
    }


    /* Card */
    .ladi-section3
        > .section-content
        > .row
        > .phai
        .icon-box {

        min-height: 275px;
    }


    /* Icon tablet */
    .ladi-section3
        > .section-content
        > .row
        > .phai
        .icon-box-img
        .icon-inner {

        width: 74px;
        height: 74px;
    }


    .ladi-section3
        > .section-content
        > .row
        > .phai
        .icon-box-img
        img {

        width: 53px;
        height: 53px;

        max-width: 53px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */
@media screen and (max-width: 549px) {

    /* Section */
    .ladi-section3 .section-content {
        padding:
            58px
            0
            62px;
    }


    /* Row */
    .ladi-section3
        > .section-content
        > .row {

        width:
            calc(100% - 30px);
    }


    /* Heading trái */
    .ladi-section3
        > .section-content
        > .row
        > .trai
        > .col-inner
        > .tieu-de
        p {

        font-size: 29px;
        line-height: 1.18;
    }


    /* Mô tả trái */
    .ladi-section3
        > .section-content
        > .row
        > .trai
        > .col-inner
        > .mo-ta
        p {

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


    /* CTA trái */
    .ladi-section3
        > .section-content
        > .row
        > .trai
        > .col-inner
        > .button {

        width: 100%;

        min-height: 50px;

        margin-bottom: 26px;

        padding:
            0
            15px;

        font-size: 10px;
    }


    /* Ảnh mobile */
    .ladi-section3
        > .section-content
        > .row
        > .trai
        > .col-inner
        > .img
        .img-inner {

        height: 250px;

        border-radius: 17px;
    }


    /* Góc xanh */
    .ladi-section3
        > .section-content
        > .row
        > .trai
        > .col-inner
        > .img::after {

        right: -7px;
        bottom: -7px;

        width: 70px;
        height: 70px;
    }


    /* Phần phải */
    .ladi-section3
        > .section-content
        > .row
        > .phai {

        margin-top: 55px;
    }


    /* Heading phải */
    .ladi-section3
        > .section-content
        > .row
        > .phai
        > .col-inner
        > .tieu-de
        p {

        font-size: 29px;
    }


    /* 4 card về 1 cột */
    .ladi-section3
        > .section-content
        > .row
        > .phai
        > .col-inner
        > .row {

        display: block;
    }


    /* Cột con full width */
    .ladi-section3
        > .section-content
        > .row
        > .phai
        > .col-inner
        > .row
        > .col {

        width: 100%;

        max-width: 100%;
        flex-basis: 100%;
    }


    /* Khoảng hai nhóm card */
    .ladi-section3
        > .section-content
        > .row
        > .phai
        > .col-inner
        > .row
        > .col
        + .col {

        margin-top: 12px;
    }


    /* Khoảng card */
    .ladi-section3
        > .section-content
        > .row
        > .phai
        > .col-inner
        > .row
        > .col
        > .col-inner {

        gap: 12px;
    }


    /* Card mobile */
    .ladi-section3
        > .section-content
        > .row
        > .phai
        .icon-box {

        min-height: 0;

        padding:
            22px
            18px
            20px;

        display: flex;
        flex-direction: column;

        align-items: flex-start;

        border-radius: 15px;
    }


    /* Icon mobile vẫn căn trái */
    .ladi-section3
        > .section-content
        > .row
        > .phai
        .icon-box-img {

        margin:
            0
            0
            17px
            0;

        text-align: left;
    }


    /* Icon-inner */
    .ladi-section3
        > .section-content
        > .row
        > .phai
        .icon-box-img
        .icon-inner {

        width: 68px;
        height: 68px;

        margin: 0;

        padding: 8px;

        border-radius: 18px;
    }


    /* Ảnh icon */
    .ladi-section3
        > .section-content
        > .row
        > .phai
        .icon-box-img
        img {

        width: 49px;
        height: 49px;

        max-width: 49px;

        margin: 0;
    }


    /* Heading card */
    .ladi-section3
        > .section-content
        > .row
        > .phai
        .icon-box-text
        h3 {

        margin-bottom: 8px;

        font-size: 14px;
    }


    /* Description */
    .ladi-section3
        > .section-content
        > .row
        > .phai
        .icon-box-text
        p {

        margin-bottom: 14px;

        font-size: 12.5px;
    }


    /* CTA card */
    .ladi-section3
        > .section-content
        > .row
        > .phai
        .icon-box-text
        .button {

        margin-top: 0;

        font-size: 10px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {

    .ladi-section3 .button,
    .ladi-section3 .icon-box,
    .ladi-section3 .img img,
    .ladi-section3 .icon-inner {

        transition: none;
    }

}
















/* =========================================================
   KEHETO - SECTION 4
   OEM / ODM / TRỌN GÓI

   DESKTOP:
   - 3 card ngang hàng
   - Card cao bằng nhau
   - 3 CTA cùng vị trí
   - 3 CTA cùng màu

   RESPONSIVE:
   - Tablet tối ưu dạng ngang
   - Mobile dạng card dọc
   ========================================================= */


/* ---------------------------------------------------------
   1. Khung tổng section
   --------------------------------------------------------- */
.ladi-section4 {
    position: relative;
    margin: 0;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faf8 100%
        );

    isolation: isolate;
}


/* ---------------------------------------------------------
   2. Background section
   --------------------------------------------------------- */
.ladi-section4 .section-bg {
    position: absolute;
    inset: 0;

    overflow: hidden;
}


/* ---------------------------------------------------------
   3. Ánh sáng trang trí góc phải
   --------------------------------------------------------- */
.ladi-section4 .section-bg::before {
    content: "";

    position: absolute;

    top: -260px;
    right: -200px;

    width: 620px;
    height: 620px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(40, 203, 139, 0.09) 0%,
            rgba(40, 203, 139, 0) 70%
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   4. Ánh sáng trang trí góc trái dưới
   --------------------------------------------------------- */
.ladi-section4 .section-bg::after {
    content: "";

    position: absolute;

    left: -220px;
    bottom: -290px;

    width: 560px;
    height: 560px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(40, 203, 139, 0.06) 0%,
            rgba(40, 203, 139, 0) 70%
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   5. Nội dung section
   --------------------------------------------------------- */
.ladi-section4 .section-content {
    position: relative;

    z-index: 2;

    padding:
        40px
        0
        40px;
}


/* =========================================================
   HEADING SECTION
   ========================================================= */


/* ---------------------------------------------------------
   6. Row tiêu đề
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de {

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

    margin:
        0
        auto
        45px;
}


/* ---------------------------------------------------------
   7. Cột tiêu đề
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
> .col {

    padding: 0;
}


/* ---------------------------------------------------------
   8. Nội dung heading căn giữa
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
> .col
> .col-inner {

    max-width: 820px;

    margin: 0 auto;

    padding: 0;

    text-align: center;
}


/* ---------------------------------------------------------
   9. Khung heading chính
   --------------------------------------------------------- */
.ladi-section4 .text1 {
    position: relative;

    margin:
        0
        0
        16px;

    padding-top: 20px;
}


/* ---------------------------------------------------------
   10. Thanh xanh trên heading
   --------------------------------------------------------- */
.ladi-section4 .text1::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 52px;
    height: 3px;

    border-radius: 20px;

    background: #28cb8b;

    transform:
        translateX(-50%)
        scaleX(
            var(--kht-s4-line, 1)
        );

    transform-origin:
        center center;
}


/* ---------------------------------------------------------
   11. Heading chính
   --------------------------------------------------------- */
.ladi-section4 .text1 p {
    margin: 0;

    color: #173c2c;

    font-size:
        clamp(
            32px,
            2.9vw,
            44px
        );

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: -0.035em;

    text-align: center;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   12. Mô tả heading
   --------------------------------------------------------- */
.ladi-section4 .text2 {
    max-width: 720px;

    margin: 0 auto;
}


.ladi-section4 .text2 p {
    margin: 0;

    color: #69766f;

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

    font-weight: 400;

    text-align: center;
}


/* =========================================================
   ROW 3 CARD
   ========================================================= */


/* ---------------------------------------------------------
   13. Row chứa 3 mô hình
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row {

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

    margin: 0 auto;

    display: flex;

    flex-wrap: nowrap;

    align-items: stretch;

    gap: 22px;
}


/* ---------------------------------------------------------
   14. Chia 3 card bằng nhau
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
> .col {

    flex:
        0
        0
        calc((100% - 44px) / 3);

    max-width:
        calc((100% - 44px) / 3);

    padding: 0;

    display: flex;
}


/* ---------------------------------------------------------
   15. Khung card tổng
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
> .col
> .col-inner {

    position: relative;

    width: 100%;

    min-height: 100%;

    padding:
        0
        27px
        27px;

    display: flex;

    flex-direction: column;

    border:
        1px solid
        #e2ebe6;

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 8px 26px
        rgba(38, 50, 56, 0.055);

    overflow: hidden;

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

    will-change: transform;
}


/* ---------------------------------------------------------
   16. Accent xanh trên card
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
> .col
> .col-inner::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    z-index: 4;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #28cb8b,
            #77e0b7
        );

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform 0.35s ease;
}


/* ---------------------------------------------------------
   17. Hover card
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
> .col
> .col-inner:hover {

    transform:
        translateY(-7px);

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

    box-shadow:
        0 20px 48px
        rgba(38, 50, 56, 0.11);
}


/* ---------------------------------------------------------
   18. Accent chạy khi hover
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
> .col
> .col-inner:hover::before {

    transform:
        scaleX(1);
}


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


/* ---------------------------------------------------------
   19. Box Flatsome
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
.box {

    width:
        calc(100% + 54px);

    margin:
        0
        -27px;

    background: transparent;

    box-shadow: none;
}


/* ---------------------------------------------------------
   20. Khung ảnh
   SỬA:
   - Ảnh gốc 1254 x 1254 nên giữ tỷ lệ 1:1
   - Không ép chiều cao 235px để tránh crop ảnh
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
.box-image {

    position: relative;

    width: 100%;
    height: auto;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #e8f0eb;
}


/* ---------------------------------------------------------
   20.1 Wrapper ảnh Flatsome
   Cho wrapper bám đúng kích thước box-image
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
.box-image
> div {

    width: 100%;
    height: 100%;
}


/* ---------------------------------------------------------
   21. Overlay nhẹ trên ảnh
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
.box-image::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(10, 35, 25, 0) 50%,
            rgba(10, 35, 25, 0.16) 100%
        );
}


/* ---------------------------------------------------------
   22. Ảnh
   SỬA:
   - contain để luôn nhìn thấy toàn bộ ảnh
   - Không zoom mặc định
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
.box-image
img {

    width: 100%;
    height: 100%;

    max-width: none;

    display: block;

    object-fit: contain;

    object-position: center center;

    transform:
        scale(1);

    transition:
        transform 0.75s ease;

    will-change: transform;
}


/* ---------------------------------------------------------
   23. Hover ảnh
   SỬA:
   - Không phóng ảnh vì phóng sẽ làm cắt mép ảnh
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
> .col
> .col-inner:hover
.box-image
img {

    transform:
        scale(1);
}


/* =========================================================
   BOX TEXT
   ========================================================= */


/* ---------------------------------------------------------
   24. Nội dung sau ảnh
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
.box-text {

    position: relative;

    width: 100%;

    padding:
        27px
        27px
        0;

    text-align: left;

    background: transparent;
}


/* ---------------------------------------------------------
   25. Inner text
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
.box-text-inner {

    width: 100%;
}


/* =========================================================
   OEM / ODM / TRỌN GÓI
   ========================================================= */


/* ---------------------------------------------------------
   26. Tên mô hình
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
h4 {

    position: relative;

    margin:
        0
        0
        20px;

    padding-bottom: 15px;

    color: #173c2c;

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

    font-weight: 700;

    letter-spacing: -0.025em;

    text-align: left;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   27. Line xanh dưới tên mô hình
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
h4::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 32px;
    height: 3px;

    border-radius: 20px;

    background: #28cb8b;
}


/* =========================================================
   PHÙ HỢP
   ========================================================= */


/* ---------------------------------------------------------
   28. Khung phù hợp
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
.icon-box {

    width: 100%;

    margin: 0;

    padding: 15px;

    display: flex;

    align-items: center;

    border-radius: 13px;

    background: #f2faf6;

    border:
        1px solid
        rgba(40, 203, 139, 0.12);
}


/* ---------------------------------------------------------
   29. Icon phù hợp
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
.icon-box-img {

    flex:
        0
        0
        54px;

    width: 54px;

    margin-right: 13px;
}


/* ---------------------------------------------------------
   30. Icon inner
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
.icon-inner {

    width: 54px;
    height: 54px;

    display: flex;

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

    overflow: hidden;

    border-radius: 12px;

    background: #ffffff;

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


/* ---------------------------------------------------------
   31. Ảnh icon
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
.icon-inner
img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* ---------------------------------------------------------
   32. Text phù hợp
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
.icon-box-text {

    flex: 1;

    min-width: 0;
}


.ladi-section4
.section-content
> .tieu-de
+ .row
.icon-box-text
p {

    margin: 0;

    color: #45534b;

    font-size: 13px;
    line-height: 1.55;

    font-weight: 500;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */


/* ---------------------------------------------------------
   33. Mô tả chính từng card
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
> .col
> .col-inner
> p {

    margin:
        22px
        0
        25px;

    color: #657169;

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

    font-weight: 400;
}


/* =========================================================
   CTA - CẢ 3 NÚT GIỐNG NHAU
   ========================================================= */


/* ---------------------------------------------------------
   34. Style chung cho cả 3 nút
   OEM / ODM / TRỌN GÓI hoàn toàn giống nhau
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
> .col
> .col-inner
> .button {

    position: relative;

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

    margin:
        auto
        0
        0;

    padding:
        0
        18px;

    display: inline-flex;

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

    border:
        1px solid
        rgba(40, 203, 139, 0.32);

    border-radius: 8px;

    color: #19885d;

    background: #f3fbf7;

    box-shadow:
        0 6px 18px
        rgba(40, 203, 139, 0.08);

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

    font-weight: 700;

    letter-spacing: 0.035em;

    text-align: center;

    text-transform: uppercase;

    text-decoration: none;

    text-shadow: none;

    overflow: hidden;

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

    will-change:
        transform,
        box-shadow;
}


/* ---------------------------------------------------------
   35. Text CTA
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
> .col
> .col-inner
> .button
span {

    position: relative;

    z-index: 2;

    color: inherit;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   36. Arrow CTA
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
> .col
> .col-inner
> .button::after {

    content: "→";

    position: relative;

    z-index: 2;

    margin-left: 10px;

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

    transition:
        transform 0.25s ease;
}


/* ---------------------------------------------------------
   37. Ánh sáng chạy trên nút
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
> .col
> .col-inner
> .button::before {

    content: "";

    position: absolute;

    top: -20%;
    bottom: -20%;
    left: -70%;

    width: 36%;

    transform:
        skewX(-20deg);

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.5),
            rgba(255, 255, 255, 0)
        );

    transition:
        left 0.6s ease;
}


/* ---------------------------------------------------------
   38. Hover cả 3 nút giống nhau
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
> .col
> .col-inner
> .button:hover {

    color: #ffffff;

    border-color: #28cb8b;

    background: #28cb8b;

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


/* ---------------------------------------------------------
   39. Ánh sáng chạy khi hover
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
> .col
> .col-inner
> .button:hover::before {

    left: 135%;
}


/* ---------------------------------------------------------
   40. Arrow chạy sang phải
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
> .col
> .col-inner
> .button:hover::after {

    transform:
        translateX(4px);
}


/* =========================================================
   CARD TRỌN GÓI
   Chỉ nhấn nhẹ border CARD.
   NÚT vẫn giống OEM và ODM.
   ========================================================= */


/* ---------------------------------------------------------
   41. Card thứ 3
   Không thay đổi màu CTA
   --------------------------------------------------------- */
.ladi-section4
.section-content
> .tieu-de
+ .row
> .col:nth-child(3)
> .col-inner {

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

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfefc 100%
        );
}


/* =========================================================
   LAPTOP
   ========================================================= */
@media screen and (max-width: 1200px) {

    /* -----------------------------------------------------
       42. Khoảng section laptop
       ----------------------------------------------------- */
    .ladi-section4 .section-content {
        padding:
            80px
            0
            90px;
    }


    /* -----------------------------------------------------
       43. Giảm khoảng giữa 3 card
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row {

        gap: 16px;
    }


    /* -----------------------------------------------------
       44. Giữ 3 card trên một hàng
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    > .col {

        flex-basis:
            calc((100% - 32px) / 3);

        max-width:
            calc((100% - 32px) / 3);
    }


    /* -----------------------------------------------------
       45. Card laptop
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    > .col
    > .col-inner {

        padding:
            0
            22px
            24px;
    }


    /* -----------------------------------------------------
       46. Box laptop
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    .box {

        width:
            calc(100% + 44px);

        margin:
            0
            -22px;
    }


    /* -----------------------------------------------------
       47. Box text laptop
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    .box-text {

        padding:
            24px
            22px
            0;
    }


    /* -----------------------------------------------------
       48. Ảnh laptop
       SỬA: giữ đúng tỷ lệ vuông
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    .box-image {

        height: auto;

        aspect-ratio: 1 / 1;
    }


    /* -----------------------------------------------------
       49. Tên mô hình laptop
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    h4 {

        font-size: 25px;
    }


    /* -----------------------------------------------------
       50. Mô tả laptop
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    > .col
    > .col-inner
    > p {

        font-size: 13px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */
@media screen and (max-width: 849px) {

    /* -----------------------------------------------------
       51. Section tablet
       ----------------------------------------------------- */
    .ladi-section4 .section-content {
        padding:
            70px
            0
            76px;
    }


    /* -----------------------------------------------------
       52. Heading tablet
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de {

        width:
            calc(100% - 40px);

        margin-bottom:
            36px;
    }


    /* -----------------------------------------------------
       53. Card tablet chuyển thành danh sách dọc
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row {

        width:
            calc(100% - 40px);

        display: block;
    }


    /* -----------------------------------------------------
       54. Mỗi card full width
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    > .col {

        width: 100%;

        max-width: 100%;

        flex-basis: 100%;

        margin-bottom: 22px;
    }


    /* -----------------------------------------------------
       55. Card cuối bỏ margin
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    > .col:last-child {

        margin-bottom: 0;
    }


    /* -----------------------------------------------------
       56. Tablet dùng ảnh trái - content phải
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    > .col
    > .col-inner {

        display: grid;

        grid-template-columns:
            42%
            58%;

        padding: 0;

        overflow: hidden;
    }


    /* -----------------------------------------------------
       57. Box dùng display contents
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    .box {

        width: 100%;

        margin: 0;

        display: contents;
    }


    /* -----------------------------------------------------
       58. Ảnh bên trái
       SỬA:
       - Giữ nguyên bố cục tablet
       - Không crop ảnh
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    .box-image {

        grid-column: 1;

        grid-row:
            1 / 4;

        width: 100%;
        height: 100%;

        min-height: 330px;

        aspect-ratio: auto;
    }


    /* Tablet hiển thị toàn bộ ảnh */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    .box-image
    img {

        object-fit: contain;

        object-position: center center;
    }


    /* -----------------------------------------------------
       59. Nội dung bên phải
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    .box-text {

        grid-column: 2;

        padding:
            27px
            26px
            0;
    }


    /* -----------------------------------------------------
       60. Mô tả bên phải
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    > .col
    > .col-inner
    > p {

        grid-column: 2;

        margin:
            20px
            26px
            22px;
    }


    /* -----------------------------------------------------
       61. CTA tablet
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    > .col
    > .col-inner
    > .button {

        grid-column: 2;

        width:
            calc(100% - 52px);

        margin:
            auto
            26px
            27px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */
@media screen and (max-width: 549px) {

    /* -----------------------------------------------------
       62. Section mobile
       ----------------------------------------------------- */
    .ladi-section4 .section-content {
        padding:
            58px
            0
            62px;
    }


    /* -----------------------------------------------------
       63. Heading row mobile
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de {

        width:
            calc(100% - 30px);

        margin-bottom: 30px;
    }


    /* -----------------------------------------------------
       64. Heading mobile
       ----------------------------------------------------- */
    .ladi-section4 .text1 p {
        font-size: 28px;

        line-height: 1.18;
    }


    /* -----------------------------------------------------
       65. Subtitle mobile
       ----------------------------------------------------- */
    .ladi-section4 .text2 p {
        font-size: 13.5px;

        line-height: 1.6;
    }


    /* -----------------------------------------------------
       66. Row card mobile
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row {

        width:
            calc(100% - 30px);
    }


    /* -----------------------------------------------------
       67. Card mobile trở về bố cục dọc
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    > .col
    > .col-inner {

        display: flex;

        flex-direction: column;

        padding:
            0
            20px
            22px;

        border-radius: 17px;
    }


    /* -----------------------------------------------------
       68. Box mobile
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    .box {

        display: block;

        width:
            calc(100% + 40px);

        margin:
            0
            -20px;
    }


    /* -----------------------------------------------------
       69. Ảnh mobile
       SỬA:
       - Không ép 205px
       - Ảnh 1254x1254 giữ đúng tỷ lệ 1:1
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    .box-image {

        width: 100%;

        height: auto;

        min-height: 0;

        aspect-ratio: 1 / 1;
    }


    /* -----------------------------------------------------
       70. Box text mobile
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    .box-text {

        padding:
            23px
            20px
            0;
    }


    /* -----------------------------------------------------
       71. OEM / ODM / Trọn gói
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    h4 {

        margin-bottom: 17px;

        font-size: 25px;
    }


    /* -----------------------------------------------------
       72. Khối phù hợp
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    .icon-box {

        padding: 13px;
    }


    /* -----------------------------------------------------
       73. Icon mobile
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    .icon-box-img {

        flex-basis: 48px;

        width: 48px;

        margin-right: 11px;
    }


    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    .icon-inner {

        width: 48px;
        height: 48px;
    }


    /* -----------------------------------------------------
       74. Text phù hợp mobile
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    .icon-box-text
    p {

        font-size: 12px;
    }


    /* -----------------------------------------------------
       75. Description mobile
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    > .col
    > .col-inner
    > p {

        margin:
            19px
            0
            21px;

        font-size: 13px;

        line-height: 1.65;
    }


    /* -----------------------------------------------------
       76. Cả 3 CTA mobile giống nhau
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    > .col
    > .col-inner
    > .button {

        width: 100%;

        min-height: 48px;

        margin:
            auto
            0
            0;

        padding:
            0
            14px;

        font-size: 9.8px;
    }

}


/* =========================================================
   MOBILE NHỎ
   ========================================================= */
@media screen and (max-width: 370px) {

    /* -----------------------------------------------------
       77. Heading mobile nhỏ
       ----------------------------------------------------- */
    .ladi-section4 .text1 p {
        font-size: 26px;
    }


    /* -----------------------------------------------------
       78. Ảnh mobile nhỏ
       SỬA: vẫn giữ nguyên tỷ lệ ảnh gốc
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    .box-image {

        height: auto;

        aspect-ratio: 1 / 1;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */
@media (prefers-reduced-motion: reduce) {

    /* -----------------------------------------------------
       79. Giảm chuyển động theo cài đặt hệ thống
       ----------------------------------------------------- */
    .ladi-section4
    .section-content
    > .tieu-de
    + .row
    > .col
    > .col-inner,

    .ladi-section4
    .box-image
    img,

    .ladi-section4
    .button {

        transition: none;
    }

}
















/* =========================================================
   KEHETO - SECTION 5
   FINAL CSS

   - Không dùng !important
   - Không thay font
   - Chỉ selector bằng class
   - Không overlay trắng lên ảnh
   - Không line trên tab active
   - Responsive đầy đủ

   UPDATE MOBILE TAB:
   - Mobile hiển thị toàn bộ 8 tab
   - 3 hàng: 3 + 3 + 2
   - Không scroll ngang trên mobile
   - Không thay đổi desktop / tablet
   ========================================================= */


/* =========================================================
   01. SECTION
   ========================================================= */

.ladi-section5 {
    --kht-s5-primary: #28CBBB;
    --kht-s5-primary-dark: #159F92;

    --kht-s5-dark: #173C38;
    --kht-s5-text: #526360;
    --kht-s5-muted: #75817E;

    --kht-s5-border: #DFEBE8;
    --kht-s5-soft: #F1FAF8;

    position: relative;

    margin: 0;

    overflow: hidden;
    overflow-anchor: none;

    background:
        linear-gradient(
            180deg,
            #F7FAF9 0%,
            #FFFFFF 100%
        );

    isolation: isolate;
}


/* =========================================================
   02. BACKGROUND SECTION
   ========================================================= */

.ladi-section5 .section-bg {
    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


.ladi-section5 .section-bg::before {
    content: "";

    position: absolute;

    top: -320px;
    right: -260px;

    width: 720px;
    height: 720px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(40, 203, 187, 0.08) 0%,
            rgba(40, 203, 187, 0) 70%
        );
}


.ladi-section5 .section-content {
    position: relative;

    z-index: 2;

    padding:
        40px
        0
        40px;
}


/* =========================================================
   03. HEADING SECTION
   ========================================================= */

.ladi-section5 .tieu-de-lon {
    width: calc(100% - 56px);
    max-width: 1320px;

    margin:
        0
        auto
        38px;
}


.ladi-section5 .tieu-de-lon > .col {
    padding: 0;
}


.ladi-section5 .tieu-de-lon > .col > .col-inner {
    max-width: 950px;

    margin: 0 auto;

    padding: 0;

    text-align: center;
}


.ladi-section5 .kht-s5-title {
    position: relative;

    margin:
        0
        0
        16px;

    padding-top: 21px;

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

    font-size:
        clamp(
            32px,
            2.9vw,
            44px
        );

    line-height: 1.14;

    font-weight: 700;

    letter-spacing: -0.035em;

    text-align: center;

    text-transform: uppercase;
}


.ladi-section5 .kht-s5-title::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 54px;
    height: 3px;

    border-radius: 20px;

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

    transform:
        translateX(-50%)
        scaleX(
            var(--kht-s5-title-line, 1)
        );

    transform-origin: center;
}


.ladi-section5 .kht-s5-subtitle {
    max-width: 830px;

    margin: 0 auto;

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

    font-size: 15px;

    line-height: 1.7;

    font-weight: 400;

    text-align: center;
}


.ladi-section5 .kht-s5-break {
    display: none;
}


/* =========================================================
   04. TAB AREA
   ========================================================= */

.ladi-section5 .tabs {
    width: calc(100% - 56px);
    max-width: 1320px;

    margin: 0 auto;
}


.ladi-section5 .tabs > .col {
    padding: 0;
}


.ladi-section5 .tabs > .col > .col-inner {
    padding: 0;
}


.ladi-section5 .tabbed-content {
    width: 100%;

    overflow-anchor: none;
}


/* =========================================================
   05. TAB NAVIGATION
   ========================================================= */

.ladi-section5 .kht-s5-nav {
    position: relative;

    width: 100%;

    margin:
        0
        0
        20px;

    padding: 6px;

    display: flex;
    flex-wrap: nowrap;

    align-items: center;

    gap: 5px;

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

    scrollbar-width: none;

    border:
        1px solid
        var(--kht-s5-border);

    border-radius: 14px;

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

    box-shadow:
        0 8px 24px
        rgba(38, 50, 56, 0.045);

    overscroll-behavior-inline: contain;
}


.ladi-section5 .kht-s5-nav::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   06. TAB ITEM
   ========================================================= */

.ladi-section5 .tab {
    position: relative;

    flex:
        1
        0
        auto;

    margin: 0;

    padding: 0;

    border: 0;

    background: transparent;

    box-shadow: none;
}


.ladi-section5 .tab.active {
    border: 0;

    box-shadow: none;
}


/* =========================================================
   07. XÓA LINE PHÍA TRÊN TAB
   ========================================================= */

.ladi-section5 .kht-s5-nav .tab::before,
.ladi-section5 .kht-s5-nav .tab::after,
.ladi-section5 .kht-s5-nav .kht-s5-tab-link::before,
.ladi-section5 .kht-s5-nav .kht-s5-tab-link::after {
    content: none;

    display: none;

    width: 0;
    height: 0;

    border: 0;

    background: none;

    box-shadow: none;

    transform: none;
}


/* =========================================================
   08. TAB LINK
   ========================================================= */

.ladi-section5 .kht-s5-tab-link {
    position: relative;

    min-height: 46px;

    margin: 0;

    padding:
        0
        15px;

    display: flex;

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

    border: 0;

    border-radius: 9px;

    color: #596663;

    background: transparent;

    box-shadow: none;

    font-size: 10.5px;

    line-height: 1.25;

    font-weight: 700;

    letter-spacing: 0.02em;

    white-space: nowrap;

    text-align: center;

    text-decoration: none;

    text-transform: uppercase;

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


.ladi-section5 .tab .kht-s5-tab-link:hover {
    color:
        var(--kht-s5-primary-dark);

    background:
        var(--kht-s5-soft);

    box-shadow: none;
}


.ladi-section5 .tab.active .kht-s5-tab-link {
    color: #FFFFFF;

    background:
        linear-gradient(
            135deg,
            #35D7C6 0%,
            #28CBBB 100%
        );

    box-shadow:
        0 8px 19px
        rgba(40, 203, 187, 0.23);
}


.ladi-section5 .kht-s5-tab-link:focus-visible {
    outline:
        2px solid
        rgba(40, 203, 187, 0.45);

    outline-offset: 2px;
}


/* =========================================================
   09. TAB PANEL
   ========================================================= */

.ladi-section5 .tab-panels {
    position: relative;

    width: 100%;

    overflow-anchor: none;
}


.ladi-section5 .panel {
    display: none;

    margin: 0;

    padding: 0;

    border: 0;

    background: transparent;

    overflow-anchor: none;
}


.ladi-section5 .panel.active {
    display: block;
}


/* =========================================================
   10. ROW CHÍNH
   ========================================================= */

.ladi-section5 .row-chinh {
    width: 100%;

    margin: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1.76fr)
        minmax(330px, 0.82fr);

    gap: 20px;

    align-items: stretch;
}


.ladi-section5 .row-chinh > .trai,
.ladi-section5 .row-chinh > .phai {
    width: 100%;
    max-width: 100%;

    padding: 0;
}


/* =========================================================
   11. FEATURE IMAGE
   ========================================================= */

.ladi-section5 .kht-s5-feature-card {
    position: relative;

    width: 100%;

    min-height: 565px;

    padding:
        42px
        38px;

    display: flex;

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

    overflow: hidden;

    border-radius: 22px;

    background: #E8EFED;

    box-shadow:
        0 18px 42px
        rgba(38, 50, 56, 0.11);

    isolation: isolate;

    overflow-anchor: none;
}


/* =========================================================
   12. MAIN IMAGE
   ========================================================= */

.ladi-section5 .kht-s5-image-box {
    position: absolute;

    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;

    margin: 0;
}


.ladi-section5 .kht-s5-image-inner {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


.ladi-section5 .kht-s5-main-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    max-width: none;

    display: block;

    object-fit: cover;

    object-position:
        50%
        50%;

    transform:
        scale(1.02);

    transform-origin:
        center center;

    will-change:
        transform;
}


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

    .ladi-section5
    .kht-s5-feature-card:hover
    .kht-s5-main-image {
        transform:
            scale(1.055);
    }

}


/* =========================================================
   13. INFO WRAPPER
   ========================================================= */

.ladi-section5 .kht-s5-info-panel {
    position: relative;

    z-index: 3;

    width:
        min(
            53%,
            500px
        );

    height: auto;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    border: 0;

    border-radius: 0;

    background: transparent;

    box-shadow: none;
}


.ladi-section5 .kht-s5-overlay-content {
    position: relative;

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


/* =========================================================
   14. CATEGORY TITLE
   ========================================================= */

.ladi-section5 .kht-s5-category-title-box {
    margin:
        0
        0
        16px;
}


.ladi-section5 .kht-s5-category-title {
    position: relative;

    margin: 0;

    padding-left: 17px;

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

    font-size:
        clamp(
            31px,
            2.6vw,
            41px
        );

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -0.035em;

    text-align: left;

    text-transform: uppercase;

    text-shadow:
        0 1px 3px
        rgba(255, 255, 255, 0.85);
}


.ladi-section5 .kht-s5-category-title::before {
    content: "";

    position: absolute;

    top: 1px;
    bottom: 1px;
    left: 0;

    width: 4px;

    border-radius: 20px;

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


/* =========================================================
   15. CATEGORY DESCRIPTION
   ========================================================= */

.ladi-section5 .kht-s5-category-copy-box {
    margin:
        0
        0
        22px;
}


.ladi-section5 .kht-s5-category-copy {
    width: 100%;

    margin: 0;

    color: #354845;

    font-size: 13.5px;

    line-height: 1.65;

    font-weight: 500;

    text-align: left;

    text-shadow:
        0 1px 2px
        rgba(255, 255, 255, 0.9);
}


/* =========================================================
   16. BENEFIT LIST
   ========================================================= */

.ladi-section5 .list {
    width: 100%;

    margin:
        0
        0
        23px;

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.ladi-section5 .kht-s5-benefit-item {
    position: relative;

    width: 100%;

    min-height: 39px;

    margin: 0;

    padding:
        9px
        13px
        9px
        39px;

    display: flex;

    align-items: center;

    border:
        1px solid
        rgba(40, 203, 187, 0.24);

    border-radius: 9px;

    color: #40504D;

    background:
        rgba(247, 253, 251, 0.92);

    box-shadow:
        0 4px 12px
        rgba(38, 50, 56, 0.035);

    font-size: 12px;

    line-height: 1.35;

    font-weight: 600;

    text-align: left;
}


.ladi-section5 .kht-s5-benefit-item::before {
    content: "✓";

    position: absolute;

    left: 12px;
    top: 50%;

    width: 17px;
    height: 17px;

    display: flex;

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

    border-radius: 50%;

    color: #FFFFFF;

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

    font-size: 9px;

    line-height: 1;

    transform:
        translateY(-50%);
}


/* =========================================================
   17. CTA
   ========================================================= */

.ladi-section5 .kht-s5-overlay-button {
    position: relative;

    align-self: flex-start;

    width: auto;

    min-height: 50px;

    margin: 0;

    padding:
        0
        23px;

    display: inline-flex;

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

    overflow: hidden;

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

    border-radius: 8px;

    color: #FFFFFF;

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

    box-shadow:
        0 10px 25px
        rgba(40, 203, 187, 0.25);

    font-size: 10px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-decoration: none;

    text-transform: uppercase;

    will-change:
        transform;

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


.ladi-section5 .kht-s5-button-label {
    position: relative;

    z-index: 2;

    color: inherit;

    text-transform: uppercase;
}


.ladi-section5 .kht-s5-overlay-button::after {
    content: "→";

    position: relative;

    z-index: 2;

    margin-left: 11px;

    font-size: 15px;

    transition:
        transform 0.25s ease;
}


.ladi-section5 .kht-s5-overlay-button::before {
    content: "";

    position: absolute;

    top: -20%;
    bottom: -20%;
    left: -65%;

    width: 34%;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.42),
            rgba(255, 255, 255, 0)
        );

    transform:
        skewX(-20deg);

    transition:
        left 0.6s ease;
}


.ladi-section5 .kht-s5-overlay-button:hover {
    color: #FFFFFF;

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

    box-shadow:
        0 15px 34px
        rgba(40, 203, 187, 0.30);
}


.ladi-section5 .kht-s5-overlay-button:hover::before {
    left: 135%;
}


.ladi-section5 .kht-s5-overlay-button:hover::after {
    transform:
        translateX(4px);
}


/* =========================================================
   18. PRODUCT PANEL
   ========================================================= */

.ladi-section5 .phai > .col-inner {
    width: 100%;
    height: 100%;

    min-height: 565px;

    padding:
        26px
        20px;

    display: flex;

    flex-direction: column;

    gap: 10px;

    border:
        1px solid
        var(--kht-s5-border);

    border-radius: 22px;

    background:
        linear-gradient(
            155deg,
            #FFFFFF 0%,
            #F8FCFB 100%
        );

    box-shadow:
        0 14px 36px
        rgba(38, 50, 56, 0.055);

    overflow-anchor: none;
}


/* =========================================================
   19. PRODUCT HEADING
   ========================================================= */

.ladi-section5 .kht-s5-products-heading {
    position: relative;

    width: 100%;

    margin:
        0
        0
        8px;

    padding-bottom: 14px;

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

    font-size: 20px;

    line-height: 1.25;

    font-weight: 700;

    letter-spacing: -0.015em;

    text-align: left;

    text-transform: uppercase;
}


.ladi-section5 .kht-s5-products-heading::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 35px;
    height: 3px;

    border-radius: 20px;

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


/* =========================================================
   20. PRODUCT CARD
   ========================================================= */

.ladi-section5 .kht-s5-product-card {
    position: relative;

    width: 100%;

    min-height: 88px;

    margin: 0;

    padding:
        10px
        12px;

    display: grid;

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

    align-items: center;

    column-gap: 14px;

    overflow: hidden;

    border:
        1px solid
        #E6EFEC;

    border-radius: 12px;

    background:
        #FFFFFF;

    box-shadow:
        0 4px 14px
        rgba(38, 50, 56, 0.03);

    will-change:
        transform;

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


.ladi-section5 .kht-s5-product-card::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 3px;

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

    transform:
        scaleY(0);

    transform-origin:
        top center;

    transition:
        transform 0.28s ease;
}


.ladi-section5 .kht-s5-product-card:hover {
    border-color:
        rgba(40, 203, 187, 0.24);

    background:
        #FBFEFD;

    box-shadow:
        0 9px 22px
        rgba(38, 50, 56, 0.065);
}


.ladi-section5 .kht-s5-product-card:hover::before {
    transform:
        scaleY(1);
}


/* =========================================================
   21. PRODUCT IMAGE
   ========================================================= */

.ladi-section5 .kht-s5-product-image-wrapper {
    width: 66px;

    margin: 0;

    padding: 0;
}


.ladi-section5 .kht-s5-product-image-wrapper .icon-inner {
    width: 66px;
    height: 66px;

    display: flex;

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

    overflow: hidden;

    border-radius: 10px;

    background:
        var(--kht-s5-soft);
}


.ladi-section5 .kht-s5-product-image {
    width: 100%;
    height: 100%;

    max-width: none;

    display: block;

    object-fit: cover;

    object-position:
        50%
        50%;

    transform-origin:
        center center;

    will-change:
        transform;
}


/* =========================================================
   22. PRODUCT TEXT
   ========================================================= */

.ladi-section5 .phai .icon-box-text {
    width: 100%;

    min-width: 0;
}


.ladi-section5 .kht-s5-product-name {
    display: block;

    margin-bottom: 5px;

    color: #263C38;

    font-size: 15px;

    line-height: 1.3;

    font-weight: 700;

    letter-spacing: -0.01em;

    text-align: left;
}


.ladi-section5 .kht-s5-product-desc {
    display: block;

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

    font-size: 12.5px;

    line-height: 1.45;

    font-weight: 400;

    text-align: left;
}


/* =========================================================
   23. LAPTOP
   ========================================================= */

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

    .ladi-section5 .section-content {
        padding:
            80px
            0
            92px;
    }


    .ladi-section5 .row-chinh {
        grid-template-columns:
            minmax(0, 1.55fr)
            minmax(305px, 0.85fr);

        gap: 17px;
    }


    .ladi-section5 .kht-s5-feature-card {
        min-height: 540px;

        padding:
            36px
            30px;
    }


    .ladi-section5 .kht-s5-info-panel {
        width:
            min(
                58%,
                470px
            );
    }


    .ladi-section5 .kht-s5-category-title {
        font-size: 32px;
    }


    .ladi-section5 .phai > .col-inner {
        min-height: 540px;

        padding:
            23px
            17px;
    }


    .ladi-section5 .kht-s5-products-heading {
        font-size: 18px;
    }


    .ladi-section5 .kht-s5-product-card {
        min-height: 80px;

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

        column-gap: 12px;

        padding:
            9px
            10px;
    }


    .ladi-section5 .kht-s5-product-image-wrapper,
    .ladi-section5 .kht-s5-product-image-wrapper .icon-inner {
        width: 60px;
        height: 60px;
    }


    .ladi-section5 .kht-s5-product-name {
        font-size: 14px;
    }


    .ladi-section5 .kht-s5-product-desc {
        font-size: 11.5px;
    }

}


/* =========================================================
   24. TABLET
   ========================================================= */

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

    .ladi-section5 .section-content {
        padding:
            70px
            0
            78px;
    }


    .ladi-section5 .tieu-de-lon {
        width:
            calc(100% - 40px);

        margin-bottom: 30px;
    }


    .ladi-section5 .tabs {
        width:
            calc(100% - 40px);
    }


    /* Tablet vẫn giữ scroll ngang như code cũ */
    .ladi-section5 .tab {
        flex:
            0
            0
            auto;
    }


    .ladi-section5 .kht-s5-tab-link {
        min-height: 43px;

        padding:
            0
            14px;

        font-size: 10px;
    }


    .ladi-section5 .row-chinh {
        display: block;
    }


    .ladi-section5 .kht-s5-feature-card {
        min-height: 535px;

        padding:
            34px
            28px;
    }


    .ladi-section5 .kht-s5-info-panel {
        width:
            min(
                68%,
                500px
            );
    }


    .ladi-section5 .row-chinh > .phai {
        margin-top: 18px;
    }


    .ladi-section5 .phai > .col-inner {
        min-height: auto;

        padding:
            23px
            20px;

        display: grid;

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

        gap: 10px;
    }


    .ladi-section5 .kht-s5-products-heading {
        grid-column:
            1 / -1;

        font-size: 19px;
    }


    .ladi-section5 .kht-s5-product-card {
        min-height: 88px;
    }


    .ladi-section5 .kht-s5-product-name {
        font-size: 14px;
    }


    .ladi-section5 .kht-s5-product-desc {
        font-size: 12px;
    }

}


/* =========================================================
   25. MOBILE
   ========================================================= */

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

    /* Khoảng section mobile */
    .ladi-section5 .section-content {
        padding:
            58px
            0
            62px;
    }


    /* Heading width */
    .ladi-section5 .tieu-de-lon {
        width:
            calc(100% - 30px);

        margin-bottom: 25px;
    }


    /* Heading section mobile */
    .ladi-section5 .kht-s5-title {
        margin-bottom: 13px;

        padding-top: 17px;

        font-size: 28px;

        line-height: 1.18;
    }


    .ladi-section5 .kht-s5-title::before {
        width: 44px;
    }


    .ladi-section5 .kht-s5-subtitle {
        font-size: 13.5px;

        line-height: 1.6;
    }


    /* Tab width mobile */
    .ladi-section5 .tabs {
        width:
            calc(100% - 30px);
    }


    /* =====================================================
       MOBILE TAB - 3 HÀNG
       Hàng 1: 3 tab
       Hàng 2: 3 tab
       Hàng 3: 2 tab
       ===================================================== */

    .ladi-section5 .kht-s5-nav {
        margin-bottom: 14px;

        padding: 5px;

        /* Chuyển từ flex ngang sang grid */
        display: grid;

        /*
         * Dùng 6 cột ảo:
         * - 6 tab đầu span 2 = 3 tab/hàng
         * - 2 tab cuối span 3 = 2 tab/hàng
         */
        grid-template-columns:
            repeat(
                6,
                minmax(0, 1fr)
            );

        align-items: stretch;

        gap: 5px;

        /* Xóa scroll ngang trên mobile */
        overflow: visible;

        border-radius: 11px;
    }


    /* Mỗi tab trong 6 tab đầu chiếm 1/3 hàng */
    .ladi-section5
    .kht-s5-nav
    .tab {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        margin: 0;

        flex: none;

        grid-column:
            span 2;
    }


    /* Hai tab cuối chia đều hàng cuối */
    .ladi-section5
    .kht-s5-nav
    .tab:nth-child(7),

    .ladi-section5
    .kht-s5-nav
    .tab:nth-child(8) {
        grid-column:
            span 3;
    }


    /* Link tab mobile */
    .ladi-section5 .kht-s5-tab-link {
        width: 100%;

        min-width: 0;

        min-height: 42px;

        padding:
            6px
            5px;

        border-radius: 7px;

        font-size: 9px;

        line-height: 1.25;

        /*
         * Cho phép text xuống dòng,
         * tránh tab bị rộng hơn cột grid.
         */
        white-space: normal;

        overflow-wrap: normal;

        word-break: normal;

        text-align: center;
    }


    /* Label luôn căn giữa */
    .ladi-section5 .kht-s5-tab-label {
        display: block;

        width: 100%;

        text-align: center;
    }


    /* Feature image mobile */
    .ladi-section5 .kht-s5-feature-card {
        min-height: 500px;

        padding:
            24px
            18px;

        border-radius: 17px;
    }


    .ladi-section5 .kht-s5-info-panel {
        width: 100%;
        max-width: 100%;
    }


    .ladi-section5 .kht-s5-category-title-box {
        margin-bottom: 11px;
    }


    .ladi-section5 .kht-s5-category-title {
        padding-left: 14px;

        font-size: 27px;

        line-height: 1.1;
    }


    .ladi-section5 .kht-s5-category-copy-box {
        margin-bottom: 15px;
    }


    .ladi-section5 .kht-s5-category-copy {
        font-size: 12.5px;

        line-height: 1.55;
    }


    .ladi-section5 .list {
        gap: 6px;

        margin-bottom: 17px;
    }


    .ladi-section5 .kht-s5-benefit-item {
        min-height: 37px;

        padding:
            7px
            10px
            7px
            35px;

        font-size: 11px;
    }


    .ladi-section5 .kht-s5-benefit-item::before {
        left: 10px;

        width: 16px;
        height: 16px;
    }


    .ladi-section5 .kht-s5-overlay-button {
        width: 100%;

        min-height: 47px;

        padding:
            0
            13px;

        font-size: 9.8px;
    }


    .ladi-section5 .row-chinh > .phai {
        margin-top: 13px;
    }


    .ladi-section5 .phai > .col-inner {
        min-height: auto;

        padding:
            20px
            14px;

        display: grid;

        grid-template-columns:
            1fr;

        gap: 8px;

        border-radius: 17px;
    }


    .ladi-section5 .kht-s5-products-heading {
        font-size: 18px;

        line-height: 1.25;
    }


    .ladi-section5 .kht-s5-product-card {
        min-height: 80px;

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

        column-gap: 12px;

        padding:
            10px
            11px;
    }


    .ladi-section5 .kht-s5-product-image-wrapper,
    .ladi-section5 .kht-s5-product-image-wrapper .icon-inner {
        width: 58px;
        height: 58px;
    }


    .ladi-section5 .kht-s5-product-name {
        font-size: 14px;

        line-height: 1.3;
    }


    .ladi-section5 .kht-s5-product-desc {
        font-size: 11.5px;

        line-height: 1.45;
    }

}


/* =========================================================
   26. MOBILE NHỎ
   ========================================================= */

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

    .ladi-section5 .kht-s5-title {
        font-size: 25px;
    }


    /* Giảm nhẹ chữ tab ở màn hình rất nhỏ */
    .ladi-section5 .kht-s5-tab-link {
        min-height: 43px;

        padding:
            5px
            3px;

        font-size: 8.4px;

        line-height: 1.25;
    }


    .ladi-section5 .kht-s5-feature-card {
        min-height: 480px;

        padding:
            20px
            15px;
    }


    .ladi-section5 .kht-s5-category-title {
        font-size: 24px;
    }


    .ladi-section5 .kht-s5-product-name {
        font-size: 13.5px;
    }

}


/* =========================================================
   27. ACCESSIBILITY
   ========================================================= */

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

    .ladi-section5 .kht-s5-tab-link,
    .ladi-section5 .kht-s5-overlay-button,
    .ladi-section5 .kht-s5-product-card,
    .ladi-section5 .kht-s5-main-image {
        transition: none;
    }

}


/* =========================================================
   28. DESKTOP - ĐỒNG BỘ CHIỀU CAO ẢNH VỚI CỘT SẢN PHẨM
   Chỉ áp dụng từ 850px trở lên.
   Không thay đổi tablet và mobile.
   ========================================================= */

@media screen and (min-width: 850px) {

    .ladi-section5 .row-chinh > .trai {
        display: flex;
        align-self: stretch;
    }


    .ladi-section5
    .row-chinh
    > .trai
    > .kht-s5-feature-card {
        flex: 1 1 auto;

        height: 100%;
    }

}
















/* =========================================================
   KEHETO - SECTION 6
   DYNAMIC FACTORY GALLERY

   RESPONSIVE:
   - Desktop: 3 thumbnail hiển thị
   - Tablet: 3 thumbnail hiển thị
   - Mobile <= 549px: 2 thumbnail hiển thị
   - Thumbnail còn lại chạy ngang cùng 1 hàng

   CẬP NHẬT:
   - Không arrow trên ảnh lớn
   - Không shadow thumbnail
   - Active border không bị cắt
   - Không giới hạn số ảnh
   - Không dùng !important
   - Không thay font
   ========================================================= */


/* =========================================================
   01. SECTION
   ========================================================= */

.ladi-section6 {
    --kht-s6-primary: #28CBBB;
    --kht-s6-primary-dark: #159F92;

    --kht-s6-dark: #173C38;
    --kht-s6-text: #566764;
    --kht-s6-muted: #788683;

    --kht-s6-border: #DFEBE8;
    --kht-s6-soft: #F3FAF8;

    position: relative;

    width: 100%;

    margin: 0;

    overflow: hidden;
    overflow-anchor: none;

    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #F7FAF9 100%
        );

    isolation: isolate;
}


/* =========================================================
   02. BACKGROUND
   ========================================================= */

/* Layer background gốc của Flatsome */
.ladi-section6 .section-bg {
    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


/* Ánh sáng trang trí nhẹ */
.ladi-section6 .section-bg::before {
    content: "";

    position: absolute;

    top: -340px;
    right: -270px;

    width: 720px;
    height: 720px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(40, 203, 187, 0.07) 0%,
            rgba(40, 203, 187, 0) 70%
        );
}


/* =========================================================
   03. SECTION CONTENT
   ========================================================= */

/* Khoảng cách tổng của section */
.ladi-section6 .section-content {
    position: relative;

    z-index: 2;

    width: 100%;

    padding:
        40px
        0
        40px;
}


/* =========================================================
   04. HEADING
   ========================================================= */

.ladi-section6 .tieu-de {
    width:
        calc(100% - 56px);

    max-width:
        1280px;

    margin:
        0
        auto
        38px;
}


/* Reset cột Flatsome */
.ladi-section6 .tieu-de > .col {
    width: 100%;

    max-width: 100%;

    padding: 0;
}


/* Căn giữa heading */
.ladi-section6 .tieu-de > .col > .col-inner {
    max-width:
        980px;

    margin:
        0
        auto;

    padding: 0;

    text-align:
        center;
}


/* =========================================================
   05. TITLE
   ========================================================= */

.ladi-section6 .kht-s6-title {
    position: relative;

    margin: 0;

    padding-top:
        21px;

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

    font-size:
        clamp(
            32px,
            2.9vw,
            44px
        );

    line-height:
        1.14;

    font-weight:
        700;

    letter-spacing:
        -0.035em;

    text-align:
        center;

    text-transform:
        uppercase;
}


/* Line xanh giống các section trước */
.ladi-section6 .kht-s6-title::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width:
        54px;

    height:
        3px;

    border-radius:
        20px;

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

    transform:
        translateX(-50%)
        scaleX(
            var(--kht-s6-title-line, 1)
        );

    transform-origin:
        center center;
}


/* =========================================================
   06. GALLERY STAGE
   ========================================================= */

.ladi-section6 .kht-s6-stage {
    position: relative;

    width:
        calc(100% - 56px);

    max-width:
        1280px;

    margin:
        0
        auto;

    padding-bottom:
        66px;

    overflow-anchor:
        none;
}


/* =========================================================
   07. ẢNH LỚN
   ========================================================= */

.ladi-section6 .anh-lon {
    position: relative;

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

    height:
        clamp(
            500px,
            44vw,
            630px
        );

    margin: 0;

    padding: 0;

    display: block;

    overflow: hidden;

    border:
        1px solid
        rgba(223, 235, 232, 0.80);

    border-radius:
        24px;

    background:
        #E8EFED;

    box-shadow:
        0 18px 44px
        rgba(38, 50, 56, 0.09);

    isolation: isolate;
}


/* Xóa pseudo cũ */
.ladi-section6 .anh-lon::before,
.ladi-section6 .anh-lon::after {
    content: none;

    display: none;
}


/* =========================================================
   08. MAIN SLIDE
   ========================================================= */

.ladi-section6 .kht-s6-main-item {
    position: absolute;

    inset: 0;

    z-index: 1;

    width: 100%;
    max-width: none;

    height: 100%;

    margin: 0;

    padding: 0;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


/* Slide đang active */
.ladi-section6
.kht-s6-main-item.kht-s6-active {
    z-index: 3;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* Inner slide full khung */
.ladi-section6
.kht-s6-main-item
> .col-inner {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;

    padding: 0;
}


/* =========================================================
   09. MAIN IMAGE
   ========================================================= */

.ladi-section6 .kht-s6-main-image-box {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;
}


.ladi-section6 .kht-s6-main-image-inner {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


/* Ảnh lớn luôn rõ nét */
.ladi-section6 .kht-s6-main-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    max-width: none;

    display: block;

    object-fit: cover;

    object-position:
        50%
        50%;

    transform-origin:
        center center;

    will-change:
        transform;
}


/* Xóa lớp phủ Flatsome */
.ladi-section6
.kht-s6-main-image-inner::before,
.ladi-section6
.kht-s6-main-image-inner::after {
    content: none;

    display: none;
}


/* =========================================================
   10. KHÔNG HIỂN THỊ ARROW TRÊN ẢNH LỚN
   ========================================================= */

/* Fallback nếu JS cũ còn để lại button */
.ladi-section6 .kht-s6-main-button {
    display: none;
}


/* =========================================================
   11. THUMBNAIL SHELL
   ========================================================= */

/*
 * Desktop / Tablet:
 *
 * [ < ] [ 3 THUMBNAIL ] [ > ]
 */
.ladi-section6 .kht-s6-thumb-shell {
    position: absolute;

    z-index: 30;

    left: 50%;
    bottom: 0;

    width:
        min(
            960px,
            calc(100% - 70px)
        );

    display: grid;

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

    align-items:
        center;

    gap:
        10px;

    transform:
        translateX(-50%);
}


/* =========================================================
   12. THUMBNAIL VIEWPORT
   ========================================================= */

/*
 * Padding dọc giúp viền xanh active
 * không bị overflow cắt mất.
 */
.ladi-section6 .kht-s6-thumb-viewport {
    position: relative;

    width: 100%;

    padding:
        6px
        0
        7px;

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

    box-sizing:
        border-box;

    scrollbar-width:
        none;

    overscroll-behavior-inline:
        contain;

    scroll-behavior:
        smooth;
}


/* Ẩn scrollbar */
.ladi-section6
.kht-s6-thumb-viewport::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   13. THUMBNAIL TRACK
   ========================================================= */

/*
 * Toàn bộ thumbnail luôn cùng 1 hàng.
 * Không bao giờ wrap xuống hàng thứ hai.
 */
.ladi-section6 .anh-nho {
    position: relative;

    width: 100%;
    max-width: none;

    margin: 0;

    padding:
        1px
        0;

    display: flex;

    flex-wrap:
        nowrap;

    align-items:
        stretch;

    gap:
        12px;
}


/* =========================================================
   14. THUMBNAIL ITEM - DESKTOP/TABLET
   ========================================================= */

/*
 * Desktop / Tablet:
 * mỗi card = 1/3 viewport
 * => thấy đúng 3 thumbnail.
 */
.ladi-section6 .kht-s6-thumb-item {
    position: relative;

    flex:
        0
        0
        calc(
            (100% - 24px) / 3
        );

    width:
        calc(
            (100% - 24px) / 3
        );

    max-width:
        none;

    margin: 0;

    padding: 0;

    cursor: pointer;

    outline: none;
}


/* Reset col-inner */
.ladi-section6
.kht-s6-thumb-item
> .col-inner {
    width: 100%;

    margin: 0;

    padding: 0;

    background:
        transparent;
}


/* =========================================================
   15. THUMB CARD
   ========================================================= */

.ladi-section6 .kht-s6-thumb-card {
    position: relative;

    width: 100%;

    min-height:
        104px;

    margin: 0;

    display: grid;

    grid-template-columns:
        42%
        minmax(0, 1fr);

    align-items:
        stretch;

    overflow: hidden;

    border:
        2px solid
        #FFFFFF;

    border-radius:
        14px;

    background:
        #FFFFFF;

    /* Không có bóng bên dưới card */
    box-shadow:
        none;

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


/* Hover */
.ladi-section6
.kht-s6-thumb-item:hover
.kht-s6-thumb-card {
    border-color:
        rgba(40, 203, 187, 0.55);

    background:
        #FFFFFF;

    box-shadow:
        none;
}


/* =========================================================
   16. ACTIVE THUMB
   ========================================================= */

/*
 * Không translate card active.
 * Viền xanh hiển thị đầy đủ 4 cạnh.
 */
.ladi-section6
.kht-s6-thumb-item.kht-s6-active
.kht-s6-thumb-card {
    border-color:
        var(--kht-s6-primary);

    background:
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F1FBF9 100%
        );

    box-shadow:
        none;

    transform:
        none;
}


/* Focus bằng keyboard */
.ladi-section6
.kht-s6-thumb-item:focus-visible
.kht-s6-thumb-card {
    border-color:
        var(--kht-s6-primary);

    outline:
        2px solid
        rgba(40, 203, 187, 0.20);

    outline-offset:
        2px;

    box-shadow:
        none;
}


/* =========================================================
   17. ACTIVE ACCENT
   ========================================================= */

.ladi-section6
.kht-s6-thumb-card::after {
    content: "";

    position: absolute;

    z-index: 5;

    right:
        22px;

    bottom: 0;

    left:
        22px;

    height:
        3px;

    border-radius:
        10px 10px 0 0;

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

    opacity:
        0;

    transform:
        scaleX(0.35);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


/* Hiện line active */
.ladi-section6
.kht-s6-thumb-item.kht-s6-active
.kht-s6-thumb-card::after {
    opacity:
        1;

    transform:
        scaleX(1);
}


/* =========================================================
   18. THUMB IMAGE
   ========================================================= */

.ladi-section6 .kht-s6-thumb-image-area {
    position: relative;

    width: 100%;
    height: 100%;

    min-height:
        100px;

    overflow: hidden;

    background:
        #EDF2F1;
}


/* Wrapper ảnh thumbnail */
.ladi-section6 .kht-s6-thumb-image-wrap {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


/* Ảnh thumbnail */
.ladi-section6 .kht-s6-thumb-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    max-width: none;

    display: block;

    object-fit: cover;

    object-position:
        50%
        50%;

    transform:
        scale(1.01);

    transform-origin:
        center center;

    transition:
        transform 0.45s ease;
}


/* Zoom nhẹ khi hover */
.ladi-section6
.kht-s6-thumb-item:hover
.kht-s6-thumb-image {
    transform:
        scale(1.055);
}


/* =========================================================
   19. THUMB TEXT
   ========================================================= */

.ladi-section6 .kht-s6-thumb-text-area {
    width: 100%;

    min-width: 0;

    padding:
        13px
        12px;

    display: flex;

    align-items: center;

    background:
        transparent;
}


/* Inner text */
.ladi-section6
.kht-s6-thumb-text-area
.box-text-inner {
    width: 100%;

    margin: 0;

    padding: 0;
}


/* Text thumbnail */
.ladi-section6 .kht-s6-thumb-title {
    margin: 0;

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

    font-size:
        11px;

    line-height:
        1.4;

    font-weight:
        700;

    letter-spacing:
        -0.01em;

    text-align:
        left;

    text-transform:
        uppercase;
}


/* =========================================================
   20. THUMB CHỈ CÓ ẢNH
   ========================================================= */

.ladi-section6
.kht-s6-thumb-card.kht-s6-image-only {
    display: block;
}


/* =========================================================
   21. ARROW THUMBNAIL
   ========================================================= */

.ladi-section6 .kht-s6-thumb-button {
    width:
        38px;

    height:
        38px;

    padding: 0;

    display: flex;

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

    border:
        1px solid
        var(--kht-s6-border);

    border-radius:
        50%;

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

    background:
        #FFFFFF;

    box-shadow:
        none;

    cursor: pointer;

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


/* Hover arrow */
.ladi-section6
.kht-s6-thumb-button:hover {
    color:
        #FFFFFF;

    border-color:
        var(--kht-s6-primary);

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


/* Icon arrow */
.ladi-section6 .kht-s6-thumb-button-icon {
    display: block;

    font-size:
        17px;

    line-height:
        1;
}


/* =========================================================
   22. KHÔNG CẦN ARROW KHI KHÔNG OVERFLOW
   ========================================================= */

.ladi-section6
.kht-s6-thumb-shell.kht-s6-no-overflow
.kht-s6-thumb-button {
    opacity:
        0;

    pointer-events:
        none;
}


/* Xóa counter cũ */
.ladi-section6 .kht-s6-counter {
    display: none;
}


/* =========================================================
   23. TABLET
   ========================================================= */

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

    /* Section */
    .ladi-section6 .section-content {
        padding:
            68px
            0
            76px;
    }


    /* Heading */
    .ladi-section6 .tieu-de {
        width:
            calc(100% - 40px);

        margin-bottom:
            30px;
    }


    /* Stage */
    .ladi-section6 .kht-s6-stage {
        width:
            calc(100% - 40px);

        padding-bottom:
            58px;
    }


    /* Main image */
    .ladi-section6 .anh-lon {
        height:
            clamp(
                400px,
                64vw,
                500px
            );

        border-radius:
            20px;
    }


    /* Thumbnail shell */
    .ladi-section6 .kht-s6-thumb-shell {
        width:
            calc(100% - 28px);

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

        gap:
            7px;
    }


    /* Viewport */
    .ladi-section6 .kht-s6-thumb-viewport {
        padding:
            5px
            0
            6px;
    }


    /* Arrow */
    .ladi-section6 .kht-s6-thumb-button {
        width:
            33px;

        height:
            33px;
    }


    /* Card */
    .ladi-section6 .kht-s6-thumb-card {
        min-height:
            91px;
    }


    /* Image */
    .ladi-section6 .kht-s6-thumb-image-area {
        min-height:
            87px;
    }


    /* Text */
    .ladi-section6 .kht-s6-thumb-title {
        font-size:
            9px;
    }

}


/* =========================================================
   24. MOBILE
   HIỂN THỊ 2 THUMBNAIL
   ========================================================= */

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

    /* Section mobile */
    .ladi-section6 .section-content {
        padding:
            56px
            0
            60px;
    }


    /* Heading mobile */
    .ladi-section6 .tieu-de {
        width:
            calc(100% - 28px);

        margin-bottom:
            24px;
    }


    /* Title mobile */
    .ladi-section6 .kht-s6-title {
        padding-top:
            17px;

        font-size:
            27px;

        line-height:
            1.18;
    }


    /* Line heading */
    .ladi-section6
    .kht-s6-title::before {
        width:
            44px;
    }


    /* Stage */
    .ladi-section6 .kht-s6-stage {
        width:
            calc(100% - 20px);

        padding-bottom:
            55px;
    }


    /* Main image */
    .ladi-section6 .anh-lon {
        height:
            310px;

        border-radius:
            15px;

        box-shadow:
            0 12px 28px
            rgba(38, 50, 56, 0.075);
    }


    /* =====================================================
       THUMBNAIL SHELL MOBILE
       ===================================================== */

    .ladi-section6 .kht-s6-thumb-shell {
        width:
            calc(100% - 8px);

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

        gap:
            5px;
    }


    /* Viewport mobile */
    .ladi-section6 .kht-s6-thumb-viewport {
        padding:
            4px
            0
            5px;
    }


    /* Khoảng cách giữa 2 card */
    .ladi-section6 .anh-nho {
        gap:
            6px;
    }


    /* =====================================================
       QUAN TRỌNG:
       CHỈ HIỂN THỊ 2 THUMBNAIL / VIEWPORT
       ===================================================== */

    .ladi-section6 .kht-s6-thumb-item {
        flex:
            0
            0
            calc(
                (100% - 6px) / 2
            );

        width:
            calc(
                (100% - 6px) / 2
            );
    }


    /* Arrow mobile */
    .ladi-section6 .kht-s6-thumb-button {
        width:
            26px;

        height:
            26px;
    }


    /* Card mobile */
    .ladi-section6 .kht-s6-thumb-card {
        min-height:
            82px;

        grid-template-columns:
            42%
            minmax(0, 1fr);

        border-width:
            1.5px;

        border-radius:
            8px;

        box-shadow:
            none;
    }


    /* Active mobile */
    .ladi-section6
    .kht-s6-thumb-item.kht-s6-active
    .kht-s6-thumb-card {
        transform:
            none;

        box-shadow:
            none;
    }


    /* Hover touch không dịch card */
    .ladi-section6
    .kht-s6-thumb-item:hover
    .kht-s6-thumb-card {
        transform:
            none;

        box-shadow:
            none;
    }


    /* Ảnh thumbnail mobile */
    .ladi-section6 .kht-s6-thumb-image-area {
        height:
            78px;

        min-height:
            78px;
    }


    /* Text mobile */
    .ladi-section6 .kht-s6-thumb-text-area {
        min-height:
            78px;

        padding:
            7px
            7px;

        justify-content:
            flex-start;
    }


    /* Chữ thumbnail lớn hơn vì giờ chỉ có 2 card */
    .ladi-section6 .kht-s6-thumb-title {
        overflow:
            hidden;

        font-size:
            8.5px;

        line-height:
            1.3;

        display:
            -webkit-box;

        -webkit-box-orient:
            vertical;

        -webkit-line-clamp:
            2;

        text-align:
            left;
    }


    /* Accent active */
    .ladi-section6
    .kht-s6-thumb-card::after {
        right:
            12px;

        left:
            12px;

        height:
            2px;
    }

}


/* =========================================================
   25. MOBILE NHỎ
   ========================================================= */

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

    /* Title */
    .ladi-section6 .kht-s6-title {
        font-size:
            24px;
    }


    /* Main image */
    .ladi-section6 .anh-lon {
        height:
            280px;
    }


    /* Thumb card */
    .ladi-section6 .kht-s6-thumb-card {
        min-height:
            74px;
    }


    /* Thumb image */
    .ladi-section6 .kht-s6-thumb-image-area {
        height:
            70px;

        min-height:
            70px;
    }


    /* Thumb text */
    .ladi-section6 .kht-s6-thumb-text-area {
        min-height:
            70px;

        padding:
            6px;
    }


    /* Chữ */
    .ladi-section6 .kht-s6-thumb-title {
        font-size:
            7.8px;
    }

}


/* =========================================================
   26. REDUCED MOTION
   ========================================================= */

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

    .ladi-section6 .kht-s6-thumb-card,
    .ladi-section6 .kht-s6-thumb-image,
    .ladi-section6 .kht-s6-thumb-button {
        transition:
            none;
    }

}














/* =========================================================
   KEHETO - SECTION 7
   PROCESS + CERTIFICATE GALLERY
   MOBILE FIXED VERSION
   ========================================================= */


/* =========================================================
   01. SECTION
   ========================================================= */

.ladi-section7 {
    --s7-primary: #28cb8b;
    --s7-primary-dark: #159c69;
    --s7-dark: #173c2c;
    --s7-heading: #26352e;
    --s7-text: #617068;
    --s7-muted: #839089;
    --s7-border: #dce8e1;
    --s7-border-soft: #e9f1ec;
    --s7-soft: #f3f8f5;
    --s7-soft-green: #edf8f2;
    --s7-white: #ffffff;

    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbf9 52%,
            #f3f8f5 100%
        );

    isolation: isolate;
}


.ladi-section7,
.ladi-section7 * {
    box-sizing: border-box;
}


/* =========================================================
   02. BACKGROUND
   ========================================================= */

.ladi-section7 > .section-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}


/* Glow phải */
.ladi-section7 > .section-bg::before {
    content: "";

    position: absolute;
    top: -330px;
    right: -300px;

    width: 720px;
    height: 720px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(40, 203, 139, 0.11) 0%,
            rgba(40, 203, 139, 0.025) 45%,
            rgba(40, 203, 139, 0) 72%
        );
}


/* Glow trái dưới */
.ladi-section7 > .section-bg::after {
    content: "";

    position: absolute;
    left: -390px;
    bottom: -440px;

    width: 800px;
    height: 800px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(40, 203, 139, 0.065) 0%,
            rgba(40, 203, 139, 0) 72%
        );
}


/* =========================================================
   03. SECTION CONTENT
   ========================================================= */

.ladi-section7 > .section-content {
    position: relative;
    z-index: 2;

    width: 100%;

    padding: 86px 0 92px;
}


.ladi-section7
> .section-content
> .row {
    display: block;

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

    margin: 0 auto;
    padding: 0;
}


/* =========================================================
   04. RESET FLATSOME COLUMN
   ========================================================= */

.ladi-section7
> .section-content
> .row
> .trai,

.ladi-section7
> .section-content
> .row
> .phai {
    width: 100%;
    max-width: 100%;

    flex-basis: 100%;

    margin: 0;
    padding: 0;
}


.ladi-section7
> .section-content
> .row
> .trai
> .col-inner,

.ladi-section7
> .section-content
> .row
> .phai
> .col-inner {
    width: 100%;
    margin: 0;
}


/* =========================================================
   05. HEADING 1
   ========================================================= */

.ladi-section7
.trai
> .col-inner
> .text1 {
    width: 100%;
    margin: 0;

    text-align: center;
}


.ladi-section7
.trai
> .col-inner
> .text1
> p {
    position: relative;

    margin: 0;
    padding-top: 23px;

    color: var(--s7-heading);

    font-size: clamp(34px, 3vw, 46px);
    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -0.035em;

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


/* Thanh nhận diện */
.ladi-section7
.trai
> .col-inner
> .text1
> p::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: 54px;
    height: 4px;

    border-radius: 50px;

    background: var(--s7-primary);

    transform: translateX(-50%);
}


/* =========================================================
   06. HEADING 2
   ========================================================= */

.ladi-section7
.trai
> .col-inner
> .text2 {
    width: 100%;
    margin: 4px 0 0;

    text-align: center;
}


.ladi-section7
.trai
> .col-inner
> .text2
> p {
    margin: 0;

    color: var(--s7-primary-dark);

    font-size: clamp(34px, 3vw, 46px);
    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -0.035em;

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


/* =========================================================
   07. HEADING DESCRIPTION
   ========================================================= */

.ladi-section7
.trai
> .col-inner
> .mo-ta {
    width: 100%;
    max-width: 740px;

    margin: 18px auto 0;

    text-align: center;
}


.ladi-section7
.trai
> .col-inner
> .mo-ta
> p {
    margin: 0;

    color: var(--s7-text);

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

    font-weight: 400;

    text-align: center;
}


/* =========================================================
   08. PROCESS GRID
   ========================================================= */

.ladi-section7 .quy-trinh {
    position: relative;

    width: 100%;
    max-width: none;

    margin: 46px 0 0;
    padding: 0;

    display: grid;

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

    gap: 16px;

    align-items: stretch;
}


/* =========================================================
   09. PROCESS COLUMN
   ========================================================= */

.ladi-section7
.quy-trinh
> .col {
    position: relative;

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

    flex-basis: auto;

    margin: 0;
    padding: 0;

    display: flex;
}


.ladi-section7
.quy-trinh
> .col
> .col-inner {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    display: flex;
}


/* =========================================================
   10. PROCESS CARD
   ========================================================= */

.ladi-section7
.quy-trinh
.icon-box {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 230px;

    margin: 0;
    padding: 24px 18px 18px;

    display: flex;

    flex-direction: column;

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

    overflow: hidden;

    border:
        1px solid
        var(--s7-border);

    border-radius: 19px;

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

    box-shadow:
        0 7px 24px
        rgba(23, 60, 44, 0.045);

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


/* Accent trên card */
.ladi-section7
.quy-trinh
.icon-box::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 62px;
    height: 3px;

    border-radius:
        0 0 10px 10px;

    background: var(--s7-primary);

    opacity: 0.45;

    transform:
        translateX(-50%)
        scaleX(0.48);

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


/* Hover card */
.ladi-section7
.quy-trinh
> .col:hover
.icon-box {
    transform: translateY(-5px);

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

    box-shadow:
        0 16px 36px
        rgba(23, 60, 44, 0.085);
}


.ladi-section7
.quy-trinh
> .col:hover
.icon-box::before {
    opacity: 1;

    transform:
        translateX(-50%)
        scaleX(1);
}


/* =========================================================
   11. PROCESS NUMBER
   ========================================================= */

.ladi-section7
.quy-trinh
.icon-box::after {
    position: absolute;

    top: 13px;
    right: 14px;

    display: flex;

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

    min-width: 29px;
    height: 22px;

    padding: 0 7px;

    border-radius: 50px;

    color: #849189;

    background: #f1f6f3;

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

    font-weight: 700;

    letter-spacing: 0.04em;
}


.ladi-section7
.quy-trinh
> .col:nth-child(1)
.icon-box::after {
    content: "01";
}


.ladi-section7
.quy-trinh
> .col:nth-child(2)
.icon-box::after {
    content: "02";
}


.ladi-section7
.quy-trinh
> .col:nth-child(3)
.icon-box::after {
    content: "03";
}


.ladi-section7
.quy-trinh
> .col:nth-child(4)
.icon-box::after {
    content: "04";
}


/* =========================================================
   12. PROCESS IMAGE WRAPPER
   ========================================================= */

.ladi-section7
.quy-trinh
.icon-box-img {
    position: relative;

    height: 90px;

    flex:
        0 0 90px;

    margin:
        8px auto 20px;

    overflow: visible;

    background: transparent;

    box-shadow: none;
}


/* Viền trang trí ngoài ảnh */
.ladi-section7
.quy-trinh
.icon-box-img::before {
    content: "";

    position: absolute;

    z-index: 0;

    top: 50%;
    left: 50%;

    width: 104px;
    height: 104px;

    border:
        1px dashed
        rgba(40, 203, 139, 0.25);

    border-radius: 24px;

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

    transform:
        translate(-50%, -50%)
        rotate(6deg);

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


/* Nền xanh ảnh */
.ladi-section7
.quy-trinh
.icon-box-img::after {
    content: "";

    position: absolute;

    z-index: 1;

    top: 50%;
    left: 50%;

    width: 96px;
    height: 96px;

    border-radius: 21px;

    background: var(--s7-soft-green);

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


.ladi-section7
.quy-trinh
> .col:hover
.icon-box-img::before {
    border-color:
        rgba(40, 203, 139, 0.48);

    transform:
        translate(-50%, -50%)
        rotate(0deg);
}


/* =========================================================
   13. PROCESS IMAGE
   ========================================================= */

.ladi-section7
.quy-trinh
.icon-box-img
.icon {
    position: absolute;

    z-index: 2;

    top: 50%;
    left: 50%;

    width: 90px;
    height: 90px;

    margin: 0;

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


.ladi-section7
.quy-trinh
.icon-inner {
    width: 90px;
    height: 90px;

    overflow: hidden;

    border:
        1px solid
        rgba(40, 203, 139, 0.14);

    border-radius: 19px;

    background: var(--s7-white);

    box-shadow:
        0 6px 16px
        rgba(23, 60, 44, 0.08);
}


.ladi-section7
.quy-trinh
.icon-inner
img {
    width: 100%;
    height: 100%;

    max-width: none;

    display: block;

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

    transform: none;

    transition:
        transform 0.4s ease;
}


.ladi-section7
.quy-trinh
> .col:hover
.icon-inner
img {
    transform: scale(1.045);
}


/* =========================================================
   14. PROCESS TEXT
   ========================================================= */

.ladi-section7
.quy-trinh
.icon-box-text {
    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    text-align: center;
}


.ladi-section7
.quy-trinh
.icon-box-text
p {
    margin: 0;

    color: var(--s7-text);

    font-size: 13.2px;
    line-height: 1.52;

    text-align: center;
}


/* Tiêu đề JS tách */
.ladi-section7
.kht-s7-process-title {
    display: block;

    margin: 0 0 7px;

    color: var(--s7-dark);

    font-size: 16px;
    line-height: 1.3;

    font-weight: 700;

    letter-spacing: -0.012em;

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


/* Mô tả JS tách */
.ladi-section7
.kht-s7-process-description {
    display: block;

    max-width: 260px;

    margin: 0 auto;

    color: var(--s7-text);

    font-size: 13.2px;
    line-height: 1.52;

    font-weight: 400;

    text-align: center;
}


/* Fallback trước khi JS chạy */
.ladi-section7
.quy-trinh
.icon-box-text
p::first-line {
    color: var(--s7-dark);

    font-size: 16px;
    line-height: 1.7;

    font-weight: 700;

    text-transform: uppercase;
}


/* =========================================================
   15. CERTIFICATE SPACING
   ========================================================= */

.ladi-section7
> .section-content
> .row
> .phai {
    margin-top: 52px;
}


/* =========================================================
   16. CERTIFICATE GALLERY PANEL
   ========================================================= */

.ladi-section7
.phai
> .col-inner {
    position: relative;

    width: 100%;

    display: grid;

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

    grid-template-rows:
        auto
        repeat(3, 1fr);

    column-gap: 20px;
    row-gap: 10px;

    padding: 26px;

    overflow: hidden;

    border:
        1px solid
        var(--s7-border);

    border-radius: 26px;

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

    box-shadow:
        0 17px 48px
        rgba(23, 60, 44, 0.07);
}


/* Glow gallery */
.ladi-section7
.phai
> .col-inner::before {
    content: "";

    position: absolute;

    top: -220px;
    right: -190px;

    width: 460px;
    height: 460px;

    border-radius: 50%;

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

    pointer-events: none;
}


/* =========================================================
   17. CERTIFICATE TITLE
   ========================================================= */

.ladi-section7
.phai
.tieu-de {
    position: relative;

    z-index: 4;

    grid-column:
        1 / -1;

    grid-row: 1;

    width: 100%;

    margin: 0;

    padding:
        0 0 17px;

    border-bottom:
        1px solid
        var(--s7-border-soft);
}


.ladi-section7
.phai
.tieu-de
p {
    position: relative;

    margin: 0;

    padding-left: 15px;

    color: var(--s7-heading);

    font-size: 22px;
    line-height: 1.3;

    font-weight: 700;

    letter-spacing: -0.02em;

    text-transform: uppercase;
}


.ladi-section7
.phai
.tieu-de
p::before {
    content: "";

    position: absolute;

    top: 1px;
    bottom: 1px;
    left: 0;

    width: 4px;

    border-radius: 50px;

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


/* =========================================================
   18. LARGE CERTIFICATE STAGE
   ========================================================= */

.ladi-section7
.kht-s7-gallery-stage {
    position: relative;

    z-index: 3;

    grid-column: 1;

    grid-row:
        2 / span 3;

    width: 100%;

    min-height: 500px;

    overflow: hidden;

    border:
        1px solid
        var(--s7-border-soft);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #edf3ef 0%,
            #e4ece7 100%
        );

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


/* Khung trắng chứa giấy */
.ladi-section7
.kht-s7-gallery-stage-inner {
    position: absolute;

    inset: 14px;

    display: flex;

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

    overflow: hidden;

    border:
        1px solid
        rgba(23, 60, 44, 0.06);

    border-radius: 11px;

    background: #ffffff;

    box-shadow:
        0 14px 34px
        rgba(23, 60, 44, 0.08);
}


/* Ảnh giấy lớn */
.ladi-section7
.kht-s7-gallery-main-image {
    width: 100%;
    height: 100%;

    max-width: 100%;

    display: block;

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

    background: #ffffff;

    transform-origin: center;
}


/* =========================================================
   19. THUMBNAIL
   DÙNG CLASS JS THAY CHO nth-of-type
   ========================================================= */

.ladi-section7
.phai
> .col-inner
> .img {
    position: relative;

    z-index: 4;

    width: 100%;
    height: 122px;

    margin: 0;

    padding: 5px;

    overflow: hidden;

    border:
        1px solid
        var(--s7-border);

    border-radius: 12px;

    background: #ffffff;

    box-shadow:
        0 4px 14px
        rgba(23, 60, 44, 0.04);

    cursor: pointer;

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


/* Thumbnail 1 */
.ladi-section7
.kht-s7-thumb-1 {
    grid-column: 2;
    grid-row: 2;
}


/* Thumbnail 2 */
.ladi-section7
.kht-s7-thumb-2 {
    grid-column: 2;
    grid-row: 3;
}


/* Thumbnail 3 */
.ladi-section7
.kht-s7-thumb-3 {
    grid-column: 2;
    grid-row: 4;
}


/* Hover thumbnail */
.ladi-section7
.phai
> .col-inner
> .img:hover {
    transform:
        translateX(-3px);

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

    box-shadow:
        0 7px 20px
        rgba(23, 60, 44, 0.07);
}


/* Thumbnail active */
.ladi-section7
.phai
> .col-inner
> .img.kht-s7-thumb-active {
    border-color:
        var(--s7-primary);

    background:
        #f0faf5;

    box-shadow:
        0 0 0 2px
        rgba(40, 203, 139, 0.10);
}


/* Thanh active desktop */
.ladi-section7
.phai
> .col-inner
> .img.kht-s7-thumb-active::before {
    content: "";

    position: absolute;

    z-index: 5;

    top: 13px;
    right: 0;
    bottom: 13px;

    width: 3px;

    border-radius:
        4px 0 0 4px;

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


/* =========================================================
   20. THUMBNAIL IMAGE
   ========================================================= */

.ladi-section7
.phai
.img
.img-inner {
    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 7px;

    background: #ffffff;
}


/* Xóa overlay Flatsome */
.ladi-section7
.phai
.img
.img-inner::before,

.ladi-section7
.phai
.img
.img-inner::after {
    content: none;

    display: none;
}


.ladi-section7
.phai
> .col-inner
> .img
img {
    width: 100%;
    height: 100%;

    max-width: 100%;

    display: block;

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

    background: #ffffff;

    transform: none;
}


/* =========================================================
   21. XÓA STT / LABEL CERTIFICATE
   ========================================================= */

.ladi-section7
.phai
> .col-inner
> .img::after {
    content: none;

    display: none;
}


.ladi-section7
.kht-s7-gallery-counter,
.ladi-section7
.kht-s7-gallery-label {
    display: none;
}


/* =========================================================
   22. LAPTOP
   ========================================================= */

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

    .ladi-section7
    > .section-content {
        padding:
            74px 0 80px;
    }


    .ladi-section7
    > .section-content
    > .row {
        width:
            calc(100% - 48px);
    }


    /* Process */
    .ladi-section7
    .quy-trinh {
        gap: 11px;
    }


    .ladi-section7
    .quy-trinh
    .icon-box {
        min-height: 225px;

        padding:
            23px 14px 17px;
    }


    /* Process image */
    .ladi-section7
    .quy-trinh
    .icon-box-img {
        height: 84px;

        flex-basis: 84px;

        margin-bottom: 18px;
    }


    .ladi-section7
    .quy-trinh
    .icon-box-img
    .icon,

    .ladi-section7
    .quy-trinh
    .icon-inner {
        width: 84px;
        height: 84px;
    }


    .ladi-section7
    .quy-trinh
    .icon-box-img::before {
        width: 98px;
        height: 98px;
    }


    .ladi-section7
    .quy-trinh
    .icon-box-img::after {
        width: 90px;
        height: 90px;
    }


    .ladi-section7
    .kht-s7-process-title {
        font-size: 15px;
    }


    .ladi-section7
    .kht-s7-process-description {
        font-size: 12.4px;
    }


    /* Gallery */
    .ladi-section7
    .phai
    > .col-inner {
        grid-template-columns:
            minmax(0, 1fr)
            112px;

        column-gap: 16px;

        padding: 22px;
    }


    .ladi-section7
    .phai
    > .col-inner
    > .img {
        height: 108px;
    }


    .ladi-section7
    .kht-s7-gallery-stage {
        min-height: 455px;
    }

}


/* =========================================================
   23. TABLET
   ========================================================= */

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

    .ladi-section7
    > .section-content {
        padding:
            64px 0 70px;
    }


    .ladi-section7
    > .section-content
    > .row {
        width:
            calc(100% - 40px);
    }


    /* Process chuyển 2 x 2 */
    .ladi-section7
    .quy-trinh {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 11px;
    }


    .ladi-section7
    .quy-trinh
    .icon-box {
        min-height: 220px;
    }


    .ladi-section7
    .quy-trinh
    .icon-box-img {
        height: 82px;

        flex-basis: 82px;
    }


    .ladi-section7
    .quy-trinh
    .icon-box-img
    .icon,

    .ladi-section7
    .quy-trinh
    .icon-inner {
        width: 82px;
        height: 82px;
    }


    .ladi-section7
    .kht-s7-process-title {
        font-size: 15px;
    }


    .ladi-section7
    .kht-s7-process-description {
        font-size: 12.3px;
    }


    /* Gallery */
    .ladi-section7
    > .section-content
    > .row
    > .phai {
        margin-top: 42px;
    }


    .ladi-section7
    .phai
    > .col-inner {
        grid-template-columns:
            minmax(0, 1fr)
            100px;

        column-gap: 12px;

        padding: 18px;

        border-radius: 21px;
    }


    .ladi-section7
    .phai
    > .col-inner
    > .img {
        height: 100px;
    }


    .ladi-section7
    .kht-s7-gallery-stage {
        min-height: 430px;

        border-radius: 14px;
    }

}


/* =========================================================
   24. MOBILE <= 549PX
   FIX CHÍNH CỦA BẢN NÀY
   ========================================================= */

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

    /* -----------------------------------------------------
       Section
       ----------------------------------------------------- */

    .ladi-section7
    > .section-content {
        padding:
            52px 0 58px;
    }


    .ladi-section7
    > .section-content
    > .row {
        width:
            calc(100% - 24px);
    }


    /* -----------------------------------------------------
       Heading
       ----------------------------------------------------- */

    .ladi-section7
    .trai
    > .col-inner
    > .text1
    > p,

    .ladi-section7
    .trai
    > .col-inner
    > .text2
    > p {
        font-size:
            clamp(22px, 6.7vw, 28px);

        line-height: 1.16;

        letter-spacing: -0.025em;
    }


    .ladi-section7
    .trai
    > .col-inner
    > .text1
    > p {
        padding-top: 17px;
    }


    .ladi-section7
    .trai
    > .col-inner
    > .text1
    > p::before {
        width: 42px;
        height: 3px;
    }


    .ladi-section7
    .trai
    > .col-inner
    > .mo-ta {
        margin-top: 13px;
    }


    .ladi-section7
    .trai
    > .col-inner
    > .mo-ta
    > p {
        font-size: 12.5px;
        line-height: 1.58;
    }


    /* -----------------------------------------------------
       Process 2 x 2
       ----------------------------------------------------- */

    .ladi-section7
    .quy-trinh {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;

        margin-top: 28px;
    }


    .ladi-section7
    .quy-trinh
    .icon-box {
        min-height: 190px;

        padding:
            18px 8px 14px;

        border-radius: 14px;
    }


    /* Mobile không chạy hover */
    .ladi-section7
    .quy-trinh
    > .col:hover
    .icon-box {
        transform: none;
    }


    /* Number */
    .ladi-section7
    .quy-trinh
    .icon-box::after {
        top: 7px;
        right: 7px;

        min-width: 24px;
        height: 18px;

        padding: 0 5px;

        font-size: 7.5px;
    }


    /* Process image */
    .ladi-section7
    .quy-trinh
    .icon-box-img {
        height: 70px;

        flex-basis: 70px;

        margin:
            7px auto 17px;
    }


    .ladi-section7
    .quy-trinh
    .icon-box-img
    .icon,

    .ladi-section7
    .quy-trinh
    .icon-inner {
        width: 70px;
        height: 70px;
    }


    .ladi-section7
    .quy-trinh
    .icon-inner {
        border-radius: 14px;
    }


    .ladi-section7
    .quy-trinh
    .icon-box-img::before {
        width: 82px;
        height: 82px;

        border-radius: 18px;
    }


    .ladi-section7
    .quy-trinh
    .icon-box-img::after {
        width: 76px;
        height: 76px;

        border-radius: 17px;
    }


    .ladi-section7
    .quy-trinh
    > .col:hover
    .icon-inner
    img {
        transform: none;
    }


    /* Process text */
    .ladi-section7
    .kht-s7-process-title {
        margin-bottom: 5px;

        font-size: 12.2px;
        line-height: 1.35;
    }


    .ladi-section7
    .kht-s7-process-description {
        max-width: 150px;

        font-size: 10.3px;
        line-height: 1.42;
    }


    /* =====================================================
       CERTIFICATE MOBILE
       ẢNH LỚN TRÊN + 3 THUMB CÙNG 1 HÀNG
       ===================================================== */

    .ladi-section7
    > .section-content
    > .row
    > .phai {
        margin-top: 30px;
    }


    .ladi-section7
    .phai
    > .col-inner {
        display: grid;

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

        grid-template-rows:
            auto
            auto
            auto;

        gap: 8px;

        padding: 11px;

        border-radius: 16px;
    }


    /* Heading full width */
    .ladi-section7
    .phai
    .tieu-de {
        grid-column:
            1 / -1;

        grid-row: 1;

        padding:
            2px 0 10px;
    }


    .ladi-section7
    .phai
    .tieu-de
    p {
        padding-left: 11px;

        font-size: 16px;
        line-height: 1.3;
    }


    .ladi-section7
    .phai
    .tieu-de
    p::before {
        width: 3px;
    }


    /* -----------------------------------------------------
       Ảnh lớn
       Bỏ min-height:390px cũ.
       Aspect ratio giúp không còn khoảng trắng quá lớn.
       ----------------------------------------------------- */

    .ladi-section7
    .kht-s7-gallery-stage {
        grid-column:
            1 / -1;

        grid-row: 2;

        width: 100%;

        min-height: 0;

        aspect-ratio: 4 / 3;

        margin: 0;

        border-radius: 10px;

        box-shadow:
            inset
            0 0 0 5px
            rgba(255, 255, 255, 0.48);
    }


    /* Giảm viền trong trên mobile */
    .ladi-section7
    .kht-s7-gallery-stage-inner {
        inset: 7px;

        border-radius: 7px;

        box-shadow:
            0 5px 15px
            rgba(23, 60, 44, 0.06);
    }


    /* Ảnh luôn hiển thị full */
    .ladi-section7
    .kht-s7-gallery-main-image {
        width: 100%;
        height: 100%;

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


    /* -----------------------------------------------------
       Thumbnail 1
       ----------------------------------------------------- */

    .ladi-section7
    .kht-s7-thumb-1 {
        grid-column: 1;

        grid-row: 3;
    }


    /* -----------------------------------------------------
       Thumbnail 2
       ----------------------------------------------------- */

    .ladi-section7
    .kht-s7-thumb-2 {
        grid-column: 2;

        grid-row: 3;
    }


    /* -----------------------------------------------------
       Thumbnail 3
       ----------------------------------------------------- */

    .ladi-section7
    .kht-s7-thumb-3 {
        grid-column: 3;

        grid-row: 3;
    }


    /* Thumbnail mobile */
    .ladi-section7
    .phai
    > .col-inner
    > .img {
        width: 100%;
        height: 74px;

        margin: 0;

        padding: 4px;

        border-radius: 8px;
    }


    /* Không translate thumbnail trên touch */
    .ladi-section7
    .phai
    > .col-inner
    > .img:hover {
        transform: none;
    }


    /* Active indicator chuyển xuống dưới */
    .ladi-section7
    .phai
    > .col-inner
    > .img.kht-s7-thumb-active::before {
        top: auto;
        right: 10px;
        bottom: 0;
        left: 10px;

        width: auto;
        height: 3px;

        border-radius:
            4px 4px 0 0;
    }

}


/* =========================================================
   25. MOBILE NHỎ
   ========================================================= */

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

    .ladi-section7
    .trai
    > .col-inner
    > .text1
    > p,

    .ladi-section7
    .trai
    > .col-inner
    > .text2
    > p {
        font-size: 21px;
    }


    .ladi-section7
    .quy-trinh
    .icon-box {
        min-height: 188px;
    }


    .ladi-section7
    .kht-s7-process-title {
        font-size: 11.5px;
    }


    .ladi-section7
    .kht-s7-process-description {
        font-size: 9.8px;
    }


    /* Stage vẫn giữ ratio, không dùng height cứng */
    .ladi-section7
    .kht-s7-gallery-stage {
        min-height: 0;

        aspect-ratio: 4 / 3;
    }


    .ladi-section7
    .phai
    > .col-inner
    > .img {
        height: 64px;
    }

}


/* =========================================================
   26. ACCESSIBILITY
   ========================================================= */

.ladi-section7
.phai
> .col-inner
> .img:focus-visible {
    outline:
        2px solid
        rgba(40, 203, 139, 0.45);

    outline-offset: 2px;
}


/* =========================================================
   27. REDUCED MOTION
   ========================================================= */

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

    .ladi-section7
    .quy-trinh
    .icon-box,

    .ladi-section7
    .quy-trinh
    .icon-box-img,

    .ladi-section7
    .quy-trinh
    .icon-inner
    img,

    .ladi-section7
    .phai
    > .col-inner
    > .img {
        transition: none;
    }

}

















/* =========================================================
   KEHETO - SECTION 8
   TEXT ONLY PROCESS SLIDER

   BRAND COLOR CHÍNH XÁC:
   - Primary:   #28cb8b
   - Secondary: #263238
   - Text:      #4D4D4D
   - Muted:     #717171
   - Neutral:   #89939E
   - Border:    #ABBED1
   - Soft:      #F5F7FA
   - White:     #FFFFFF

   RESPONSIVE:
   - Desktop: 3 card
   - Tablet: 2 card
   - Mobile: 1 card

   - Không ảnh
   - Không số watermark lớn
   - Giữ BƯỚC 01
   - Giữ 01 / 10
   - Giữ progress
   - Giữ navigation
   - Không !important
   - Không đổi font
   - Chỉ selector class
   ========================================================= */


/* =========================================================
   01. SECTION
   ========================================================= */

.ladi-section8 {
    --kht-s8-primary: #28cb8b;
    --kht-s8-secondary: #263238;
    --kht-s8-text: #4D4D4D;
    --kht-s8-muted: #717171;
    --kht-s8-neutral: #89939E;
    --kht-s8-border: #ABBED1;
    --kht-s8-soft: #F5F7FA;
    --kht-s8-white: #FFFFFF;

    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            var(--kht-s8-white) 0%,
            var(--kht-s8-soft) 100%
        );

    isolation: isolate;
}


/* =========================================================
   02. BACKGROUND
   ========================================================= */

/* Layer background trang trí */
.ladi-section8 .section-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}


/* Glow Primary góc phải */
.ladi-section8 .section-bg::before {
    content: "";

    position: absolute;
    top: -420px;
    right: -340px;

    width: 760px;
    height: 760px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(40, 203, 139, 0.11) 0%,
            rgba(40, 203, 139, 0) 70%
        );
}


/* Glow Primary góc trái */
.ladi-section8 .section-bg::after {
    content: "";

    position: absolute;
    bottom: -460px;
    left: -380px;

    width: 720px;
    height: 720px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(40, 203, 139, 0.06) 0%,
            rgba(40, 203, 139, 0) 72%
        );
}


/* =========================================================
   03. SECTION CONTENT
   ========================================================= */

/* Khoảng cách tổng section */
.ladi-section8 .section-content {
    position: relative;
    z-index: 2;

    width: 100%;

    padding: 84px 0 90px;
}


/* =========================================================
   04. HEADING
   ========================================================= */

/* Heading giữ style các section trước */
.ladi-section8 .kht-s8-heading {
    width: calc(100% - 56px);
    max-width: 1080px;

    margin: 0 auto 40px;
    padding: 0;

    text-align: center;
}


/* Reset Flatsome column */
.ladi-section8 .kht-s8-heading > .col {
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;
}


/* Reset Flatsome inner */
.ladi-section8 .kht-s8-heading > .col > .col-inner {
    width: 100%;

    margin: 0;
    padding: 0;
}


/* =========================================================
   05. MAIN TITLE
   ========================================================= */

/* Tiêu đề chính */
.ladi-section8 .kht-s8-title {
    position: relative;

    margin: 0;
    padding-top: 21px;

    color: var(--kht-s8-secondary);

    font-size: clamp(34px, 3vw, 46px);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.035em;

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


/* Line thương hiệu phía trên */
.ladi-section8 .kht-s8-title::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: 54px;
    height: 3px;

    border-radius: 20px;

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

    transform:
        translateX(-50%)
        scaleX(var(--kht-s8-title-line, 1));

    transform-origin: center;
}


/* =========================================================
   06. SOURCE ROW
   ========================================================= */

/* Ẩn row HTML nguồn sau khi JS chuyển card vào slider */
.ladi-section8 .kht-s8-source-row {
    display: none;
}


/* =========================================================
   07. SLIDER SHELL
   ========================================================= */

.ladi-section8 .kht-s8-slider-shell {
    --kht-s8-visible: 3;
    --kht-s8-gap: 16px;

    position: relative;

    width: calc(100% - 56px);
    max-width: 1280px;

    margin: 0 auto;
    padding: 22px;

    overflow: hidden;

    border: 1px solid rgba(171, 190, 209, 0.56);
    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            var(--kht-s8-soft) 0%,
            var(--kht-s8-white) 62%
        );

    box-shadow:
        0 18px 44px
        rgba(38, 50, 56, 0.07);

    isolation: isolate;
}


/* Glow thương hiệu trong slider */
.ladi-section8 .kht-s8-slider-shell::before {
    content: "";

    position: absolute;
    top: -190px;
    right: -130px;

    width: 370px;
    height: 370px;

    border-radius: 50%;

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

    pointer-events: none;
}


/* =========================================================
   08. SLIDER TOP
   ========================================================= */

/* Label bên trái + counter bên phải */
.ladi-section8 .kht-s8-slider-top {
    position: relative;
    z-index: 4;

    width: 100%;

    margin-bottom: 18px;

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

    gap: 20px;
}


/* =========================================================
   09. PROCESS LABEL
   ========================================================= */

.ladi-section8 .kht-s8-slider-label {
    display: flex;
    align-items: center;

    gap: 10px;
}


/* Dot thương hiệu */
.ladi-section8 .kht-s8-slider-dot {
    width: 9px;
    height: 9px;

    flex: none;

    border-radius: 50%;

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

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


/* Text quy trình */
.ladi-section8 .kht-s8-slider-label-text {
    color: var(--kht-s8-secondary);

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

    font-weight: 700;
    letter-spacing: 0.065em;

    text-transform: uppercase;
}


/* =========================================================
   10. COUNTER
   ========================================================= */

/* Giữ 01 / 10 */
.ladi-section8 .kht-s8-slider-status {
    display: inline-flex;
    align-items: baseline;

    gap: 5px;

    white-space: nowrap;
}


/* Step hiện tại */
.ladi-section8 .kht-s8-slider-current {
    color: var(--kht-s8-primary);

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

    font-weight: 700;
    letter-spacing: -0.04em;
}


/* Separator */
.ladi-section8 .kht-s8-slider-separator {
    color: var(--kht-s8-border);

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

    font-weight: 500;
}


/* Tổng số bước */
.ladi-section8 .kht-s8-slider-total {
    color: var(--kht-s8-muted);

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

    font-weight: 600;
}


/* =========================================================
   11. VIEWPORT
   ========================================================= */

/* Khung hiển thị slider */
.ladi-section8 .kht-s8-slider-viewport {
    position: relative;
    z-index: 3;

    width: 100%;

    overflow: hidden;

    cursor: grab;

    touch-action: pan-y;
    user-select: none;
}


/* Đang kéo slider */
.ladi-section8 .kht-s8-slider-viewport.kht-s8-dragging {
    cursor: grabbing;
}


/* Accessibility */
.ladi-section8 .kht-s8-slider-viewport:focus-visible {
    outline:
        3px solid
        rgba(40, 203, 139, 0.20);

    outline-offset: 4px;

    border-radius: 16px;
}


/* =========================================================
   12. TRACK
   ========================================================= */

.ladi-section8 .kht-s8-slider-track {
    position: relative;

    width: 100%;

    display: flex;
    align-items: stretch;

    gap: var(--kht-s8-gap);

    will-change: transform;
}


/* =========================================================
   13. STEP
   ========================================================= */

/* Desktop 3 card */
.ladi-section8 .kht-s8-step {
    position: relative;

    flex:
        0
        0
        calc(
            (
                100%
                -
                (
                    var(--kht-s8-gap)
                    *
                    (
                        var(--kht-s8-visible)
                        -
                        1
                    )
                )
            )
            /
            var(--kht-s8-visible)
        );

    width: auto;
    max-width: none;

    margin: 0;
    padding: 0;
}


/* Reset Flatsome */
.ladi-section8 .kht-s8-step > .col-inner {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;
}


/* =========================================================
   14. CARD
   ========================================================= */

/* Card text-only gọn */
.ladi-section8 .kht-s8-step-card {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 188px;

    margin: 0;

    padding:
        20px
        22px
        22px;

    display: flex;
    flex-direction: column;

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

    overflow: hidden;

    border:
        1px solid
        rgba(171, 190, 209, 0.58);

    border-radius: 16px;

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

    box-shadow:
        0 7px 18px
        rgba(38, 50, 56, 0.045);

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


/* Accent Primary trên card */
.ladi-section8 .kht-s8-step-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 20px;

    width: 34%;
    height: 3px;

    border-radius:
        0
        0
        8px
        8px;

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

    opacity: 0.18;

    transition:
        width 0.25s ease,
        opacity 0.25s ease;
}


/* Decoration nhẹ */
.ladi-section8 .kht-s8-step-card::after {
    content: "";

    position: absolute;

    right: -74px;
    bottom: -90px;

    width: 170px;
    height: 170px;

    border:
        1px solid
        rgba(40, 203, 139, 0.08);

    border-radius: 50%;

    pointer-events: none;
}


/* Hover card */
.ladi-section8 .kht-s8-step:hover .kht-s8-step-card {
    border-color: var(--kht-s8-primary);

    box-shadow:
        0 13px 28px
        rgba(38, 50, 56, 0.075);

    transform: translateY(-3px);
}


/* Accent mở rộng */
.ladi-section8 .kht-s8-step:hover .kht-s8-step-card::before {
    width: 62%;

    opacity: 1;
}


/* =========================================================
   15. REMOVE IMAGE
   ========================================================= */

/* Backup nếu Flatsome render media trở lại */
.ladi-section8 .kht-s8-step-media {
    display: none;
}


/* =========================================================
   16. REMOVE LARGE NUMBER
   ========================================================= */

/* Xóa watermark số lớn */
.ladi-section8 .kht-s8-step-number {
    display: none;
}


/* =========================================================
   17. STEP LABEL
   ========================================================= */

/* Giữ BƯỚC 01 / BƯỚC 02... */
.ladi-section8 .kht-s8-step-eyebrow {
    position: relative;
    z-index: 3;

    margin:
        0
        0
        17px;

    padding:
        6px
        10px;

    display: inline-flex;

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

    flex: none;

    border:
        1px solid
        rgba(40, 203, 139, 0.32);

    border-radius: 100px;

    color: var(--kht-s8-primary);

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

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

    font-weight: 700;
    letter-spacing: 0.055em;

    text-transform: uppercase;
}


/* =========================================================
   18. TEXT COPY
   ========================================================= */

/*
 * Không margin-top:auto.
 * Text nằm ngay sau BƯỚC 01.
 */
.ladi-section8 .kht-s8-step-copy {
    position: relative;
    z-index: 3;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    text-align: left;
}


/* =========================================================
   19. STEP TITLE
   ========================================================= */

.ladi-section8 .kht-s8-step-title {
    margin:
        0
        0
        8px;

    color: var(--kht-s8-secondary);

    font-size: 17px;
    line-height: 1.33;

    font-weight: 700;
    letter-spacing: -0.022em;

    text-align: left;

    text-transform: uppercase;
}


/* =========================================================
   20. DESCRIPTION
   ========================================================= */

.ladi-section8 .kht-s8-step-description {
    max-width: 340px;

    margin: 0;

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

    font-size: 12.5px;
    line-height: 1.52;

    font-weight: 500;

    text-align: left;
}


/* =========================================================
   21. FINAL CARD
   ========================================================= */

/* Bước cuối dùng đúng màu thương hiệu #28cb8b */
.ladi-section8 .kht-s8-step-final .kht-s8-step-card {
    border-color:
        rgba(40, 203, 139, 0.62);

    background:
        linear-gradient(
            145deg,
            rgba(40, 203, 139, 0.07) 0%,
            var(--kht-s8-white) 72%
        );
}


/* Accent bước cuối */
.ladi-section8 .kht-s8-step-final .kht-s8-step-card::before {
    width: 44%;

    opacity: 0.65;
}


/* =========================================================
   22. SLIDER FOOTER
   ========================================================= */

.ladi-section8 .kht-s8-slider-footer {
    position: relative;
    z-index: 4;

    width: 100%;

    margin-top: 18px;

    display: grid;

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

    gap: 20px;

    align-items: center;
}


/* =========================================================
   23. PROGRESS
   ========================================================= */

/* Progress background */
.ladi-section8 .kht-s8-progress {
    position: relative;

    width: 100%;
    height: 4px;

    overflow: hidden;

    border-radius: 100px;

    background:
        rgba(171, 190, 209, 0.46);
}


/* Progress Primary #28cb8b */
.ladi-section8 .kht-s8-progress-bar {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 0;

    border-radius: inherit;

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

    transform-origin: left;

    transition:
        width 0.4s ease;
}


/* =========================================================
   24. NAVIGATION
   ========================================================= */

.ladi-section8 .kht-s8-navigation {
    display: flex;

    align-items: center;

    gap: 8px;
}


/* Nút điều hướng */
.ladi-section8 .kht-s8-nav-button {
    width: 43px;
    height: 43px;

    padding: 0;

    display: inline-flex;

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

    flex: none;

    border:
        1px solid
        rgba(171, 190, 209, 0.72);

    border-radius: 50%;

    color:
        var(--kht-s8-secondary);

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

    box-shadow:
        0 4px 12px
        rgba(38, 50, 56, 0.05);

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

    cursor: pointer;

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


/* Hover navigation */
.ladi-section8 .kht-s8-nav-button:hover {
    border-color:
        var(--kht-s8-primary);

    color:
        var(--kht-s8-secondary);

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

    transform:
        translateY(-2px);
}


/* Navigation disabled */
.ladi-section8 .kht-s8-nav-button.kht-s8-disabled {
    opacity: 0.28;

    cursor: default;

    pointer-events: none;

    transform: none;
}


/* Accessibility */
.ladi-section8 .kht-s8-nav-button:focus-visible {
    outline:
        3px solid
        rgba(40, 203, 139, 0.20);

    outline-offset: 2px;
}


/* =========================================================
   25. CTA ROW
   ========================================================= */

.ladi-section8 .kht-s8-cta-row {
    width: calc(100% - 56px);
    max-width: 1280px;

    margin: 28px auto 0;

    padding: 0;

    text-align: center;
}


/* Reset CTA col */
.ladi-section8 .kht-s8-cta-row > .col {
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;
}


/* Reset CTA inner */
.ladi-section8 .kht-s8-cta-row > .col > .col-inner {
    width: 100%;

    margin: 0;
    padding: 0;

    text-align: center;
}


/* =========================================================
   26. CTA
   ========================================================= */

/* CTA dùng chính xác #28cb8b */
.ladi-section8 .kht-s8-cta {
    min-height: 52px;

    margin: 0;

    padding:
        0
        26px;

    display: inline-flex;

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

    gap: 10px;

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

    border-radius: 9px;

    color:
        var(--kht-s8-secondary);

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

    box-shadow:
        0 9px 23px
        rgba(40, 203, 139, 0.22);

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

    font-weight: 700;
    letter-spacing: 0.01em;

    text-decoration: none;

    text-transform: uppercase;

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


/* Arrow CTA */
.ladi-section8 .kht-s8-cta::after {
    content: "→";

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

    transition:
        transform 0.25s ease;
}


/* Hover CTA */
.ladi-section8 .kht-s8-cta:hover {
    color:
        var(--kht-s8-secondary);

    box-shadow:
        0 13px 29px
        rgba(40, 203, 139, 0.28);

    transform:
        translateY(-2px);
}


/* Arrow CTA hover */
.ladi-section8 .kht-s8-cta:hover::after {
    transform:
        translateX(3px);
}


/* =========================================================
   27. LAPTOP
   ========================================================= */

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

    /* Giảm khoảng cách section */
    .ladi-section8 .section-content {
        padding:
            76px
            0
            82px;
    }


    /* Heading */
    .ladi-section8 .kht-s8-heading {
        width:
            calc(100% - 48px);
    }


    /* Slider */
    .ladi-section8 .kht-s8-slider-shell {
        width:
            calc(100% - 48px);

        padding: 20px;
    }


    /* Card */
    .ladi-section8 .kht-s8-step-card {
        min-height: 184px;

        padding:
            19px
            19px
            20px;
    }


    /* Khoảng cách label -> title */
    .ladi-section8 .kht-s8-step-eyebrow {
        margin-bottom: 15px;
    }


    /* Title */
    .ladi-section8 .kht-s8-step-title {
        font-size: 16px;
    }


    /* Description */
    .ladi-section8 .kht-s8-step-description {
        font-size: 12px;
    }


    /* CTA */
    .ladi-section8 .kht-s8-cta-row {
        width:
            calc(100% - 48px);
    }
}


/* =========================================================
   28. TABLET
   ========================================================= */

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

    /* Section */
    .ladi-section8 .section-content {
        padding:
            66px
            0
            72px;
    }


    /* Heading */
    .ladi-section8 .kht-s8-heading {
        width:
            calc(100% - 40px);

        margin-bottom: 31px;
    }


    /* Tablet hiển thị 2 card */
    .ladi-section8 .kht-s8-slider-shell {
        --kht-s8-visible: 2;
        --kht-s8-gap: 12px;

        width:
            calc(100% - 40px);

        padding: 17px;

        border-radius: 20px;
    }


    /* Card tablet */
    .ladi-section8 .kht-s8-step-card {
        min-height: 184px;

        padding:
            18px
            18px
            20px;
    }


    /* Step label */
    .ladi-section8 .kht-s8-step-eyebrow {
        margin-bottom: 15px;

        padding:
            6px
            9px;
    }


    /* Title */
    .ladi-section8 .kht-s8-step-title {
        font-size: 15px;

        line-height: 1.35;
    }


    /* Description */
    .ladi-section8 .kht-s8-step-description {
        font-size: 11.5px;
    }


    /* Footer */
    .ladi-section8 .kht-s8-slider-footer {
        margin-top: 16px;
    }


    /* CTA */
    .ladi-section8 .kht-s8-cta-row {
        width:
            calc(100% - 40px);

        margin-top: 24px;
    }
}


/* =========================================================
   29. MOBILE
   ========================================================= */

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

    /* Section spacing */
    .ladi-section8 .section-content {
        padding:
            54px
            0
            60px;
    }


    /* Heading */
    .ladi-section8 .kht-s8-heading {
        width:
            calc(100% - 28px);

        margin-bottom: 25px;
    }


    /* Main title */
    .ladi-section8 .kht-s8-title {
        padding-top: 17px;

        font-size: 27px;
        line-height: 1.16;
    }


    /* Line heading */
    .ladi-section8 .kht-s8-title::before {
        width: 44px;
    }


    /* Mobile 1 card */
    .ladi-section8 .kht-s8-slider-shell {
        --kht-s8-visible: 1;
        --kht-s8-gap: 10px;

        width:
            calc(100% - 28px);

        padding: 12px;

        border-radius: 16px;

        box-shadow:
            0 8px 22px
            rgba(38, 50, 56, 0.05);
    }


    /* Slider header */
    .ladi-section8 .kht-s8-slider-top {
        margin-bottom: 11px;
    }


    /* Process label */
    .ladi-section8 .kht-s8-slider-label {
        gap: 8px;
    }


    /* Dot */
    .ladi-section8 .kht-s8-slider-dot {
        width: 8px;
        height: 8px;
    }


    /* Process label text */
    .ladi-section8 .kht-s8-slider-label-text {
        font-size: 9px;

        letter-spacing: 0.045em;
    }


    /* Current counter */
    .ladi-section8 .kht-s8-slider-current {
        font-size: 19px;
    }


    /* Total counter */
    .ladi-section8 .kht-s8-slider-total {
        font-size: 10px;
    }


    /* Card mobile */
    .ladi-section8 .kht-s8-step-card {
        min-height: 168px;

        padding:
            16px
            16px
            18px;

        border-radius: 13px;

        box-shadow: none;
    }


    /* Touch không translate card */
    .ladi-section8 .kht-s8-step:hover .kht-s8-step-card {
        transform: none;
    }


    /* Accent */
    .ladi-section8 .kht-s8-step-card::before {
        left: 16px;

        width: 30%;
    }


    /* BƯỚC 01 */
    .ladi-section8 .kht-s8-step-eyebrow {
        margin-bottom: 14px;

        padding:
            6px
            9px;

        font-size: 8px;
    }


    /* Title mobile */
    .ladi-section8 .kht-s8-step-title {
        margin-bottom: 6px;

        font-size: 15px;
        line-height: 1.32;
    }


    /* Description mobile */
    .ladi-section8 .kht-s8-step-description {
        max-width: none;

        font-size: 11px;
        line-height: 1.46;
    }


    /* Slider footer */
    .ladi-section8 .kht-s8-slider-footer {
        margin-top: 13px;

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

        gap: 12px;
    }


    /* Progress */
    .ladi-section8 .kht-s8-progress {
        height: 3px;
    }


    /* Navigation */
    .ladi-section8 .kht-s8-nav-button {
        width: 38px;
        height: 38px;

        font-size: 15px;
    }


    /* CTA */
    .ladi-section8 .kht-s8-cta-row {
        width:
            calc(100% - 28px);

        margin-top: 20px;
    }


    .ladi-section8 .kht-s8-cta {
        width: 100%;
        max-width: 340px;

        min-height: 49px;

        padding:
            0
            18px;

        font-size: 12px;
    }
}


/* =========================================================
   30. SMALL MOBILE
   ========================================================= */

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

    /* Heading */
    .ladi-section8 .kht-s8-title {
        font-size: 24px;
    }


    /* Slider */
    .ladi-section8 .kht-s8-slider-shell {
        width:
            calc(100% - 22px);

        padding: 10px;
    }


    /* Card */
    .ladi-section8 .kht-s8-step-card {
        min-height: 164px;

        padding:
            15px
            14px
            17px;
    }


    /* Title */
    .ladi-section8 .kht-s8-step-title {
        font-size: 14px;
    }


    /* Description */
    .ladi-section8 .kht-s8-step-description {
        font-size: 10.5px;
    }
}


/* =========================================================
   31. REDUCED MOTION
   ========================================================= */

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

    /* Tắt chuyển động nếu người dùng yêu cầu */
    .ladi-section8 .kht-s8-step-card,
    .ladi-section8 .kht-s8-nav-button,
    .ladi-section8 .kht-s8-progress-bar,
    .ladi-section8 .kht-s8-cta,
    .ladi-section8 .kht-s8-cta::after {
        transition: none;
    }
}

















/* =========================================================
   SECTION 9 - CENTER CTA
   .text1 = tiêu đề chính 1 dòng
   .text2 = mô tả
========================================================= */

.ladi-section9 {
	--s9-green: #28cb8b;
	--s9-green-dark: #159461;
	--s9-green-light: #75e8ba;
	--s9-text: #123429;
	--s9-text-soft: #60736b;

	position: relative;
	min-height: 520px;
	padding: 0;
	overflow: hidden;
	background: #f2f6f4;
	isolation: isolate;
}


/* =========================================================
   01. BACKGROUND
========================================================= */

.ladi-section9 > .section-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}


/* Ảnh nền giữ sáng hoàn toàn, không có lớp phủ đen */
.ladi-section9 > .section-bg img {
	position: absolute;
	inset: -3%;

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

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

	will-change: transform;
}


/* =========================================================
   02. TRANG TRÍ NỀN
========================================================= */

/* Vòng tròn xanh nhẹ bên trái */
.ladi-section9::before {
	content: "";

	position: absolute;
	z-index: 1;

	top: -180px;
	left: -170px;

	width: 440px;
	height: 440px;

	border-radius: 50%;

	border: 1px solid rgba(40, 203, 139, .16);

	box-shadow:
		0 0 0 45px rgba(40, 203, 139, .025),
		0 0 0 90px rgba(40, 203, 139, .018);

	pointer-events: none;
}


/* Line thương hiệu phía dưới */
.ladi-section9::after {
	content: "";

	position: absolute;
	z-index: 1;

	left: 50%;
	bottom: 0;

	width: 180px;
	height: 4px;

	transform: translateX(-50%);

	border-radius: 999px 999px 0 0;

	background:
		linear-gradient(
			90deg,
			transparent,
			var(--s9-green),
			transparent
		);

	pointer-events: none;
}


/* =========================================================
   03. CONTENT
========================================================= */

.ladi-section9 > .section-content {
	position: relative;
	z-index: 3;

	min-height: 520px;

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


/* Container chính căn giữa */
.ladi-section9 .section-content > .row {
	width: min(1240px, calc(100% - 48px));
	max-width: 1240px;

	margin-left: auto;
	margin-right: auto;
}


/* Loại bỏ khoảng cách dư của column */
.ladi-section9 .section-content > .row > .col {
	padding-top: 0;
	padding-bottom: 0;
}


/* =========================================================
   04. PANEL NỘI DUNG
========================================================= */

.ladi-section9 .col-inner {
	position: relative;

	width: min(1160px, 100%);

	margin-left: auto;
	margin-right: auto;

	padding:
		48px
		52px
		44px;

	text-align: center;

	border: 1px solid rgba(255, 255, 255, .82);

	border-radius: 28px;

	background: rgba(255, 255, 255, .92);

	box-shadow:
		0 24px 65px rgba(20, 62, 47, .13);

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

	overflow: hidden;
}


/* Line xanh ở chính giữa phía trên panel */
.ladi-section9 .col-inner::before {
	content: "";

	position: absolute;

	top: 0;
	left: 50%;

	width: 90px;
	height: 4px;

	transform: translateX(-50%);

	border-radius: 0 0 100px 100px;

	background:
		linear-gradient(
			90deg,
			var(--s9-green),
			var(--s9-green-light)
		);
}


/* Decoration xanh cực nhẹ trong panel */
.ladi-section9 .col-inner::after {
	content: "";

	position: absolute;
	z-index: 0;

	top: -160px;
	left: 50%;

	width: 380px;
	height: 380px;

	transform: translateX(-50%);

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(40, 203, 139, .08),
			transparent 68%
		);

	pointer-events: none;
}


/* =========================================================
   05. TEXT 1 - TIÊU ĐỀ CHÍNH
========================================================= */

.ladi-section9 .text1 {
	position: relative;
	z-index: 2;

	width: 100%;

	margin: 0 0 20px;

	text-align: center;
}


/* Tiêu đề luôn giữ trên 1 dòng */
.ladi-section9 .text1 p {
	margin: 0;

	color: var(--s9-text);

	font-size: clamp(26px, 3vw, 46px);

	font-weight: 700;

	line-height: 1.12;

	letter-spacing: -.035em;

	white-space: nowrap;
}


/* Line nhấn dưới tiêu đề */
.ladi-section9 .text1::after {
	content: "";

	display: block;

	width: 58px;
	height: 4px;

	margin:
		22px
		auto
		0;

	border-radius: 999px;

	background:
		linear-gradient(
			90deg,
			var(--s9-green),
			var(--s9-green-light)
		);
}


/* =========================================================
   06. TEXT 2 - MÔ TẢ
========================================================= */

.ladi-section9 .text2 {
	position: relative;
	z-index: 2;

	max-width: 760px;

	margin:
		0
		auto
		30px;

	text-align: center;
}


/* Nội dung mô tả */
.ladi-section9 .text2 p {
	margin: 0;

	color: var(--s9-text-soft);

	font-size: 16px;

	font-weight: 500;

	line-height: 1.7;

	letter-spacing: .005em;
}


/* =========================================================
   07. BUTTON CHUNG
========================================================= */

.ladi-section9 .nut1,
.ladi-section9 .nut2 {
	position: relative;
	z-index: 2;

	display: inline-flex;

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

	min-width: 185px;
	min-height: 52px;

	margin:
		0
		5px;

	padding:
		0
		22px;

	border-radius: 12px;

	font-size: 12px;

	font-weight: 700;

	line-height: 1;

	letter-spacing: .035em;

	text-decoration: none;

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


/* =========================================================
   08. BUTTON GỬI BRIEF
========================================================= */

.ladi-section9 .nut1 {
	color: #063524;

	border: 1px solid var(--s9-green);

	background:
		linear-gradient(
			135deg,
			var(--s9-green-light),
			var(--s9-green)
		);

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


/* Icon nút chính */
.ladi-section9 .nut1::after {
	content: "↗";

	margin-left: 10px;

	font-size: 17px;

	transition: transform .25s ease;
}


/* Hover nút chính */
.ladi-section9 .nut1:hover {
	color: #063524;

	transform: translateY(-3px);

	box-shadow:
		0 17px 36px rgba(40, 203, 139, .30);
}


.ladi-section9 .nut1:hover::after {
	transform: translate(3px, -3px);
}


/* =========================================================
   09. BUTTON ZALO
========================================================= */

.ladi-section9 .nut2 {
	color: var(--s9-green-dark);

	border: 1px solid rgba(21, 148, 97, .28);

	background: #ffffff;
}


/* Icon nút Zalo */
.ladi-section9 .nut2::after {
	content: "→";

	margin-left: 10px;

	font-size: 16px;

	transition: transform .25s ease;
}


/* Hover nút Zalo */
.ladi-section9 .nut2:hover {
	color: var(--s9-green-dark);

	transform: translateY(-3px);

	border-color: var(--s9-green);

	background: #eafaf3;

	box-shadow:
		0 12px 28px rgba(18, 52, 41, .08);
}


.ladi-section9 .nut2:hover::after {
	transform: translateX(4px);
}


/* =========================================================
   10. TABLET
========================================================= */

@media (max-width: 1024px) {

	.ladi-section9,
	.ladi-section9 > .section-content {
		min-height: 480px;
	}


	/* Thu container trên tablet */
	.ladi-section9 .section-content > .row {
		width: calc(100% - 36px);
	}


	/* Thu khoảng cách panel */
	.ladi-section9 .col-inner {
		padding:
			42px
			34px
			38px;
	}


	/* Giữ headline 1 dòng trên tablet */
	.ladi-section9 .text1 p {
		font-size: clamp(23px, 3.8vw, 38px);
	}


	/* Thu mô tả */
	.ladi-section9 .text2 p {
		font-size: 15px;
	}

}


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

@media (max-width: 767px) {

	.ladi-section9 {
		min-height: 520px;
	}


	/* Ảnh nền mobile */
	.ladi-section9 > .section-bg img {
		inset: 0;

		width: 100%;
		height: 100%;

		object-position: 58% center;
	}


	/* Nội dung luôn ở giữa section */
	.ladi-section9 > .section-content {
		min-height: 520px;

		display: flex;

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

		padding:
			20px
			0;
	}


	/* Khoảng cách hai mép màn hình */
	.ladi-section9 .section-content > .row {
		width: calc(100% - 20px);
	}


	/* Panel mobile */
	.ladi-section9 .col-inner {
		width: 100%;

		padding:
			30px
			14px
			25px;

		border-radius: 20px;

		background: rgba(255, 255, 255, .94);

		box-shadow:
			0 16px 42px rgba(20, 62, 47, .12);
	}


	/* ===============================================
	   TIÊU ĐỀ MOBILE
	   Cố định 1 dòng và tự giảm kích thước theo viewport
	=============================================== */

	.ladi-section9 .text1 {
		margin-bottom: 15px;
	}


	.ladi-section9 .text1 p {
		font-size: clamp(13px, 3.7vw, 22px);

		line-height: 1.2;

		letter-spacing: -.025em;

		white-space: nowrap;
	}


	.ladi-section9 .text1::after {
		width: 42px;
		height: 3px;

		margin-top: 16px;
	}


	/* Mô tả mobile */
	.ladi-section9 .text2 {
		max-width: 520px;

		margin-bottom: 22px;
	}


	.ladi-section9 .text2 p {
		font-size: 13px;

		line-height: 1.6;
	}


	/* Hai nút cùng một hàng */
	.ladi-section9 .nut1,
	.ladi-section9 .nut2 {
		width: calc(50% - 6px);

		min-width: 0;

		min-height: 47px;

		margin:
			0
			2px;

		padding:
			0
			8px;

		border-radius: 10px;

		font-size: 10px;

		letter-spacing: 0;
	}


	/* Thu icon CTA mobile */
	.ladi-section9 .nut1::after,
	.ladi-section9 .nut2::after {
		margin-left: 5px;

		font-size: 13px;
	}

}


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

@media (max-width: 390px) {

	/* Giảm tiêu đề thêm để vẫn luôn nằm trên 1 dòng */
	.ladi-section9 .text1 p {
		font-size: clamp(12px, 3.65vw, 15px);
	}


	/* Mô tả nhỏ hơn một chút */
	.ladi-section9 .text2 p {
		font-size: 12px;
	}


	/* CTA giữ 2 nút trên một hàng */
	.ladi-section9 .nut1,
	.ladi-section9 .nut2 {
		font-size: 9px;

		padding:
			0
			6px;
	}

}


/* =========================================================
   13. ACCESSIBILITY
========================================================= */

.ladi-section9 .nut1:focus-visible,
.ladi-section9 .nut2:focus-visible {
	outline: 3px solid rgba(40, 203, 139, .35);
	outline-offset: 4px;
}


/* Người dùng hạn chế chuyển động */
@media (prefers-reduced-motion: reduce) {

	.ladi-section9 *,
	.ladi-section9 *::before,
	.ladi-section9 *::after {
		transition-duration: .01ms;
	}

}














/* =========================================================
   SECTION 10 - COST FRAMEWORK V6
   TĂNG KÍCH THƯỚC TEXT + CTA
========================================================= */

.ladi-section10 {
	--s10-green: #28cb8b;
	--s10-green-dark: #148a5d;
	--s10-green-soft: #ecfaf4;

	--s10-dark: #123a2e;
	--s10-text: #526b61;
	--s10-muted: #748780;

	--s10-white: #ffffff;
	--s10-bg: #f4f9f6;

	--s10-line: rgba(18, 58, 46, 0.1);

	position: relative;

	overflow: hidden;

	background: var(--s10-bg);

	isolation: isolate;
}


/* =========================================================
   01. BACKGROUND
========================================================= */

.ladi-section10 > .section-bg {
	position: absolute;

	inset: 0;

	overflow: hidden;

	background:
		radial-gradient(
			circle at 90% 5%,
			rgba(40, 203, 139, 0.12),
			transparent 29%
		),
		linear-gradient(
			135deg,
			#fbfdfc 0%,
			#f3f8f5 100%
		);
}


/* Grid nền kỹ thuật rất nhẹ */
.ladi-section10 > .section-bg::after {
	content: "";

	position: absolute;

	inset: 0;

	background-image:
		linear-gradient(
			rgba(18, 58, 46, 0.022) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(18, 58, 46, 0.022) 1px,
			transparent 1px
		);

	background-size: 52px 52px;

	pointer-events: none;
}


/* =========================================================
   02. LAYOUT CHÍNH
========================================================= */

.ladi-section10 > .section-content {
	position: relative;

	z-index: 2;

	padding:
		24px
		0;
}


/* Desktop: trái lớn + hai proof card bên phải */
.ladi-section10 > .section-content > .row {
	display: grid;

	grid-template-columns:
		minmax(0, 1.28fr)
		minmax(470px, 0.9fr);

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

	gap: 16px;

	width:
		min(
			1320px,
			calc(100% - 48px)
		);

	max-width: 1320px;

	margin:
		0
		auto;
}


/* Reset column Flatsome riêng row chính */
.ladi-section10 > .section-content > .row > .col {
	width: 100%;

	max-width: none;

	flex-basis: auto;

	padding: 0;
}


/* Khối trái chiếm 2 hàng */
.ladi-section10 > .section-content > .row > .trai {
	grid-column: 1;

	grid-row: 1 / 3;
}


/* Bao bì */
.ladi-section10 > .section-content > .row > .giua {
	grid-column: 2;

	grid-row: 1;
}


/* Hồ sơ */
.ladi-section10 > .section-content > .row > .phai {
	grid-column: 2;

	grid-row: 2;
}


/* =========================================================
   03. PANEL TRÁI
========================================================= */

.ladi-section10 .trai > .col-inner {
	position: relative;

	height: 100%;

	display: flex;

	flex-direction: column;

	padding:
		clamp(38px, 3.7vw, 54px)
		clamp(32px, 3.7vw, 52px);

	border:
		1px
		solid
		var(--s10-line);

	border-radius: 28px;

	background: var(--s10-white);

	box-shadow:
		0 22px 58px rgba(18, 58, 46, 0.06);

	overflow: hidden;
}


/* Line thương hiệu phía trên */
.ladi-section10 .trai > .col-inner::before {
	content: "";

	position: absolute;

	top: 0;

	left:
		clamp(
			32px,
			3.7vw,
			52px
		);

	width: 94px;

	height: 4px;

	border-radius:
		0
		0
		100px
		100px;

	background:
		linear-gradient(
			90deg,
			var(--s10-green),
			#7ae7bb
		);
}


/* Decoration góc phải */
.ladi-section10 .trai > .col-inner::after {
	content: "";

	position: absolute;

	right: -145px;

	top: -165px;

	width: 330px;

	height: 330px;

	border-radius: 50%;

	border:
		1px
		solid
		rgba(40, 203, 139, 0.1);

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

	pointer-events: none;
}


/* =========================================================
   04. TITLE
========================================================= */

.ladi-section10 .trai .tieu-de {
	position: relative;

	z-index: 2;

	max-width: 720px;

	margin:
		0
		0
		21px;
}


/* Tiêu đề giữ kích thước hiện tại */
.ladi-section10 .trai .tieu-de p {
	margin: 0;

	color: var(--s10-dark);

	font-size:
		clamp(
			30px,
			2.55vw,
			39px
		);

	font-weight: 700;

	line-height: 1.1;

	letter-spacing: -0.035em;
}


/* Desktop giữ đúng 2 dòng theo BR */
@media (min-width: 1025px) {

	.ladi-section10 .trai .tieu-de p {
		white-space: nowrap;
	}

}


/* =========================================================
   05. MINH BẠCH TỪ BÁO GIÁ
   TĂNG KÍCH THƯỚC TEXT
========================================================= */

.ladi-section10 .trai .badge {
	order: initial;

	position: relative;

	z-index: 2;

	display: flex;

	align-items: center;

	width: 100%;

	margin:
		0
		0
		25px;

	padding: 0;

	border: 0;

	border-radius: 0;

	background: transparent;
}


/* Thanh xanh trước statement */
.ladi-section10 .trai .badge::before {
	content: "";

	flex:
		0
		0
		auto;

	width: 4px;

	height: 32px;

	margin-right: 14px;

	border-radius: 999px;

	background: var(--s10-green);
}


/* Line kéo dài phía sau */
.ladi-section10 .trai .badge::after {
	content: "";

	flex:
		1
		1
		auto;

	height: 1px;

	margin-left: 18px;

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


/* Tăng statement lên 16px */
.ladi-section10 .trai .badge p {
	margin: 0;

	color: var(--s10-green-dark);

	font-size: 16px;

	font-weight: 700;

	line-height: 1.35;

	letter-spacing: 0.055em;
}


/* =========================================================
   06. MÔ TẢ
   TĂNG TEXT LÊN 15PX
========================================================= */

.ladi-section10 .trai .mo-ta {
	position: relative;

	z-index: 2;

	display: grid;

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

	width: 100%;

	margin:
		0
		0
		30px;

	border-top:
		1px
		solid
		rgba(18, 58, 46, 0.08);

	border-bottom:
		1px
		solid
		rgba(18, 58, 46, 0.08);
}


/* Tăng text mô tả */
.ladi-section10 .trai .mo-ta p {
	position: relative;

	margin: 0;

	padding:
		20px
		22px
		20px
		0;

	color: var(--s10-text);

	font-size: 15px;

	font-weight: 500;

	line-height: 1.65;
}


/* Vùng mô tả thứ hai */
.ladi-section10 .trai .mo-ta p + p {
	padding-left: 22px;

	padding-right: 0;

	border-left:
		1px
		solid
		rgba(18, 58, 46, 0.08);
}


/* =========================================================
   07. 5 YẾU TỐ CẤU THÀNH CHI PHÍ
========================================================= */

.ladi-section10 .trai .chu-thich {
	position: relative;

	z-index: 2;

	display: grid;

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

	width: 100%;

	margin:
		0
		0
		30px;

	padding:
		22px
		10px
		20px;

	border:
		1px
		solid
		rgba(18, 58, 46, 0.09);

	border-radius: 18px;

	background:
		linear-gradient(
			135deg,
			#f7fbf9 0%,
			#f1f8f4 100%
		);
}


/* Tăng label nhóm */
.ladi-section10 .trai .chu-thich::before {
	content: "5 YẾU TỐ CẤU THÀNH CHI PHÍ";

	position: absolute;

	top: -10px;

	left: 18px;

	padding:
		0
		9px;

	color: var(--s10-muted);

	background: var(--s10-white);

	font-size: 10.5px;

	font-weight: 700;

	line-height: 20px;

	letter-spacing: 0.09em;
}


/* Tăng toàn bộ text từng yếu tố */
.ladi-section10 .trai .chu-thich p {
	position: relative;

	min-height: 100px;

	margin: 0;

	padding:
		32px
		15px
		10px;

	color: var(--s10-text);

	font-size: 12.5px;

	font-weight: 500;

	line-height: 1.48;

	background: transparent;

	border: 0;

	border-radius: 0;

	transition:
		transform 0.25s ease;
}


/* Accent xanh */
.ladi-section10 .trai .chu-thich p::before {
	content: "";

	position: absolute;

	top: 11px;

	left: 15px;

	width: 27px;

	height: 4px;

	border-radius: 999px;

	background: var(--s10-green);
}


/* Separator giữa các mục */
.ladi-section10 .trai .chu-thich p:not(:last-child)::after {
	content: "";

	position: absolute;

	right: 0;

	top: 10px;

	bottom: 10px;

	width: 1px;

	background:
		rgba(18, 58, 46, 0.09);
}


/* Tăng độ đậm dòng đầu */
.ladi-section10 .trai .chu-thich p::first-line {
	color: var(--s10-dark);

	font-weight: 700;
}


/* Hover nhẹ */
.ladi-section10 .trai .chu-thich p:hover {
	transform: translateY(-3px);
}


/* =========================================================
   08. CTA
   TĂNG RÕ KÍCH THƯỚC
========================================================= */

.ladi-section10 .trai > .col-inner > .button {
	position: relative;

	z-index: 2;

	align-self: flex-start;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	min-width: 230px;

	min-height: 58px;

	margin: 0;

	padding:
		0
		30px;

	border:
		1px
		solid
		var(--s10-green);

	border-radius: 999px;

	color: #073725;

	background:
		linear-gradient(
			135deg,
			#78e9bc,
			var(--s10-green)
		);

	font-size: 13px;

	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.035em;

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

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


/* Arrow lớn hơn */
.ladi-section10 .trai > .col-inner > .button::after {
	content: "↗";

	margin-left: 13px;

	font-size: 19px;

	transition:
		transform 0.25s ease;
}


/* Hover CTA */
.ladi-section10 .trai > .col-inner > .button:hover {
	color: #073725;

	transform: translateY(-4px);

	box-shadow:
		0 20px 42px
		rgba(40, 203, 139, 0.3);
}


/* Arrow hover */
.ladi-section10 .trai > .col-inner > .button:hover::after {
	transform:
		translate(
			3px,
			-3px
		);
}


/* =========================================================
   09. CARD BAO BÌ + HỒ SƠ
   GIỮ 70% ẢNH / 30% TEXT
========================================================= */

.ladi-section10 .giua > .col-inner,
.ladi-section10 .phai > .col-inner {
	position: relative;

	height: 100%;

	display: grid;

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

	grid-template-rows:
		auto
		1fr;

	column-gap: 12px;

	padding: 16px;

	border:
		1px
		solid
		var(--s10-line);

	border-radius: 24px;

	background: var(--s10-white);

	box-shadow:
		0 18px 45px
		rgba(18, 58, 46, 0.055);

	overflow: hidden;

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


/* Nền Bao bì */
.ladi-section10 .giua > .col-inner {
	background:
		linear-gradient(
			135deg,
			#ffffff,
			#f3fbf7
		);
}


/* Nền Hồ sơ */
.ladi-section10 .phai > .col-inner {
	background:
		linear-gradient(
			135deg,
			#ffffff,
			#fafcfb
		);
}


/* Hover card */
.ladi-section10 .giua > .col-inner:hover,
.ladi-section10 .phai > .col-inner:hover {
	transform: translateY(-5px);

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

	box-shadow:
		0 25px 58px
		rgba(18, 58, 46, 0.1);
}


/* =========================================================
   10. TITLE CARD PHẢI
========================================================= */

.ladi-section10 .giua > .col-inner > p,
.ladi-section10 .phai > .col-inner > p {
	grid-column: 1 / -1;

	position: relative;

	margin:
		0
		0
		12px;

	padding-left: 16px;

	color: var(--s10-dark);

	font-size: 14px;

	font-weight: 700;

	line-height: 1.3;

	letter-spacing: 0.065em;
}


/* Accent */
.ladi-section10 .giua > .col-inner > p::before,
.ladi-section10 .phai > .col-inner > p::before {
	content: "";

	position: absolute;

	left: 0;

	top: 50%;

	width: 4px;

	height: 17px;

	border-radius: 999px;

	background: var(--s10-green);

	transform: translateY(-50%);
}


/* =========================================================
   11. ẢNH
========================================================= */

.ladi-section10 .giua > .col-inner > .img,
.ladi-section10 .phai > .col-inner > .img {
	grid-column: 1;

	grid-row: 2;

	width: 100%;

	min-width: 0;

	margin: 0;

	border-radius: 17px;

	overflow: hidden;

	background: #edf4f0;
}


/* Khung ảnh */
.ladi-section10 .giua .img-inner,
.ladi-section10 .phai .img-inner {
	width: 100%;

	height: 100%;

	min-height: 225px;

	overflow: hidden;
}


/* Ảnh */
.ladi-section10 .giua .img-inner img,
.ladi-section10 .phai .img-inner img {
	display: block;

	width: 100%;

	height: 100%;

	object-fit: cover;

	object-position: center;

	transition:
		transform 0.55s
		cubic-bezier(
			0.2,
			0.8,
			0.2,
			1
		);
}


/* Zoom nhẹ */
.ladi-section10 .giua > .col-inner:hover .img-inner img,
.ladi-section10 .phai > .col-inner:hover .img-inner img {
	transform: scale(1.035);
}


/* =========================================================
   12. BENEFIT PHẢI
========================================================= */

.ladi-section10 .giai-thich1,
.ladi-section10 .giai-thich2 {
	grid-column: 2;

	grid-row: 2;

	display: grid;

	grid-template-columns: 1fr;

	align-content: center;

	gap: 8px;

	width: 100%;

	max-width: none;

	min-width: 0;

	margin: 0;
}


/* Reset column nested */
.ladi-section10 .giai-thich1 > .col,
.ladi-section10 .giai-thich2 > .col {
	width: 100%;

	max-width: none;

	flex-basis: auto;

	padding: 0;
}


/* Benefit item */
.ladi-section10 .giai-thich1 > .col > .col-inner,
.ladi-section10 .giai-thich2 > .col > .col-inner {
	position: relative;

	min-height: 56px;

	display: flex;

	align-items: center;

	padding:
		10px
		8px
		10px
		32px;

	border:
		1px
		solid
		rgba(18, 58, 46, 0.08);

	border-radius: 10px;

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


/* Check */
.ladi-section10 .giai-thich1 > .col > .col-inner::before,
.ladi-section10 .giai-thich2 > .col > .col-inner::before {
	content: "✓";

	position: absolute;

	left: 8px;

	top: 50%;

	display: flex;

	align-items: center;

	justify-content: center;

	width: 16px;

	height: 16px;

	border-radius: 50%;

	color: var(--s10-green-dark);

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

	font-size: 9px;

	font-weight: 800;

	transform: translateY(-50%);
}


/* Tăng text benefit */
.ladi-section10 .giai-thich1 p,
.ladi-section10 .giai-thich2 p {
	margin: 0;

	color: #3d5b50;

	font-size: 11.5px;

	font-weight: 600;

	line-height: 1.4;
}


/* =========================================================
   13. TABLET
========================================================= */

@media (max-width: 1024px) {

	/* Tablet chuyển khối trái full hàng */
	.ladi-section10 > .section-content > .row {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);

		grid-template-rows:
			auto
			auto;

		width:
			calc(
				100% - 34px
			);

		gap: 13px;
	}


	.ladi-section10 > .section-content > .row > .trai {
		grid-column: 1 / -1;

		grid-row: 1;
	}


	.ladi-section10 > .section-content > .row > .giua {
		grid-column: 1;

		grid-row: 2;
	}


	.ladi-section10 > .section-content > .row > .phai {
		grid-column: 2;

		grid-row: 2;
	}


	/* Statement tablet */
	.ladi-section10 .trai .badge p {
		font-size: 15px;
	}


	/* Mô tả tablet */
	.ladi-section10 .trai .mo-ta p {
		font-size: 14px;
	}


	/* 5 yếu tố tablet */
	.ladi-section10 .trai .chu-thich p {
		font-size: 11px;

		min-height: 94px;
	}


	/* CTA tablet */
	.ladi-section10 .trai > .col-inner > .button {
		min-height: 55px;

		font-size: 12px;
	}


	/* Benefit tablet */
	.ladi-section10 .giai-thich1 p,
	.ladi-section10 .giai-thich2 p {
		font-size: 10.5px;
	}

}


/* =========================================================
   14. MOBILE
========================================================= */

@media (max-width: 767px) {

	.ladi-section10 > .section-content {
		padding:
			10px
			0;
	}


	/* Toàn section thành một cột */
	.ladi-section10 > .section-content > .row {
		grid-template-columns: 1fr;

		grid-template-rows: auto;

		width:
			calc(
				100% - 20px
			);

		gap: 10px;
	}


	/* Reset grid vị trí */
	.ladi-section10 > .section-content > .row > .trai,
	.ladi-section10 > .section-content > .row > .giua,
	.ladi-section10 > .section-content > .row > .phai {
		grid-column: 1;

		grid-row: auto;
	}


	/* Panel trái */
	.ladi-section10 .trai > .col-inner {
		padding:
			30px
			19px
			24px;

		border-radius: 20px;
	}


	/* Tiêu đề mobile */
	.ladi-section10 .trai .tieu-de p {
		font-size:
			clamp(
				25px,
				7vw,
				31px
			);
	}


	/* Statement mobile lớn hơn */
	.ladi-section10 .trai .badge {
		margin-bottom: 19px;
	}


	.ladi-section10 .trai .badge p {
		font-size: 13px;

		letter-spacing: 0.04em;
	}


	.ladi-section10 .trai .badge::before {
		height: 27px;
	}


	/* Mô tả mobile chuyển thành 1 cột */
	.ladi-section10 .trai .mo-ta {
		grid-template-columns: 1fr;

		margin-bottom: 23px;
	}


	/* Mô tả mobile tăng lên */
	.ladi-section10 .trai .mo-ta p {
		padding:
			14px
			0;

		font-size: 13px;

		line-height: 1.6;
	}


	.ladi-section10 .trai .mo-ta p + p {
		padding-left: 0;

		border-left: 0;

		border-top:
			1px
			solid
			rgba(18, 58, 46, 0.08);
	}


	/* ===============================================
	   5 YẾU TỐ MOBILE
	=============================================== */

	.ladi-section10 .trai .chu-thich {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);

		padding:
			16px
			7px
			10px;

		margin-bottom: 21px;
	}


	/* Label nhóm */
	.ladi-section10 .trai .chu-thich::before {
		font-size: 9px;
	}


	/* Item mobile */
	.ladi-section10 .trai .chu-thich p {
		min-height: 88px;

		padding:
			27px
			10px
			10px;

		font-size: 10.5px;

		border-bottom:
			1px
			solid
			rgba(18, 58, 46, 0.07);
	}


	/* Bỏ separator desktop */
	.ladi-section10 .trai .chu-thich p::after {
		display: none;
	}


	/* Separator hai cột mobile */
	.ladi-section10 .trai .chu-thich p:nth-child(odd):not(:last-child) {
		border-right:
			1px
			solid
			rgba(18, 58, 46, 0.07);
	}


	/* Item cuối full hàng */
	.ladi-section10 .trai .chu-thich p:last-child {
		grid-column: 1 / -1;

		border-bottom: 0;
	}


	/* Accent mobile */
	.ladi-section10 .trai .chu-thich p::before {
		top: 11px;

		left: 10px;

		width: 22px;
	}


	/* ===============================================
	   CTA MOBILE LỚN HƠN
	=============================================== */

	.ladi-section10 .trai > .col-inner > .button {
		width: 100%;

		min-height: 54px;

		padding:
			0
			18px;

		font-size: 12px;
	}


	.ladi-section10 .trai > .col-inner > .button::after {
		font-size: 17px;
	}


	/* ===============================================
	   PROOF CARDS MOBILE
	=============================================== */

	.ladi-section10 .giua > .col-inner,
	.ladi-section10 .phai > .col-inner {
		grid-template-columns:
			minmax(0, 7fr)
			minmax(0, 3fr);

		column-gap: 7px;

		padding: 11px;

		border-radius: 18px;
	}


	/* Ảnh mobile */
	.ladi-section10 .giua .img-inner,
	.ladi-section10 .phai .img-inner {
		min-height: 255px;
	}


	/* Benefit box mobile */
	.ladi-section10 .giai-thich1 > .col > .col-inner,
	.ladi-section10 .giai-thich2 > .col > .col-inner {
		min-height: 50px;

		padding:
			7px
			4px
			7px
			24px;
	}


	/* Benefit text mobile */
	.ladi-section10 .giai-thich1 p,
	.ladi-section10 .giai-thich2 p {
		font-size: 9.5px;
	}

}


/* =========================================================
   15. MOBILE NHỎ
========================================================= */

@media (max-width: 390px) {

	.ladi-section10 > .section-content > .row {
		width:
			calc(
				100% - 14px
			);
	}


	/* Statement */
	.ladi-section10 .trai .badge p {
		font-size: 12px;
	}


	/* Mô tả */
	.ladi-section10 .trai .mo-ta p {
		font-size: 12px;
	}


	/* 5 yếu tố */
	.ladi-section10 .trai .chu-thich p {
		font-size: 10px;
	}


	/* CTA */
	.ladi-section10 .trai > .col-inner > .button {
		min-height: 52px;

		font-size: 11px;
	}


	/* Ảnh proof */
	.ladi-section10 .giua .img-inner,
	.ladi-section10 .phai .img-inner {
		min-height: 230px;
	}

}


/* =========================================================
   16. ACCESSIBILITY
========================================================= */

.ladi-section10 .button:focus-visible {
	outline:
		3px
		solid
		rgba(40, 203, 139, 0.35);

	outline-offset: 4px;
}


/* Tôn trọng thiết lập giảm chuyển động */
@media (prefers-reduced-motion: reduce) {

	.ladi-section10 *,
	.ladi-section10 *::before,
	.ladi-section10 *::after {
		transition-duration: 0.01ms;
	}

}


















/* =========================================================
   SECTION 11 - FACTORY GALLERY V4
   - Background trắng
   - 2 ảnh phụ căn giữa hero
   - Ảnh thường click phóng lớn
   - Fix nút đóng lightbox tròn tuyệt đối
========================================================= */

.ladi-section11 {
	--s11-green: #28cb8b;
	--s11-green-dark: #159461;
	--s11-dark: #12382d;
	--s11-border: #e2ebe6;
	--s11-white: #ffffff;

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


/* =========================================================
   01. BACKGROUND
========================================================= */

.ladi-section11 > .section-bg {
	position: absolute;
	inset: 0;

	background: #ffffff;
}


/* =========================================================
   02. SECTION CONTENT
========================================================= */

.ladi-section11 > .section-content {
	position: relative;
	z-index: 2;

	padding: 40px 0 40px;
}


/* Container dùng chung */
.ladi-section11 .tieu-de,
.ladi-section11 .lop1,
.ladi-section11 .lop2 {
	width: min(1320px, calc(100% - 48px));
	max-width: 1320px;

	margin-left: auto;
	margin-right: auto;
}


/* Reset column Flatsome */
.ladi-section11 .tieu-de > .col,
.ladi-section11 .lop1 > .col,
.ladi-section11 .lop2 > .col {
	width: 100%;
	max-width: none;
	flex-basis: auto;

	padding: 0;
}


/* =========================================================
   03. TITLE
========================================================= */

.ladi-section11 .tieu-de {
	margin-bottom: 38px;
}


.ladi-section11 .tieu-de > .col > .col-inner {
	text-align: center;
}


/* Tiêu đề section */
.ladi-section11 .tieu-de p {
	margin: 0;

	color: var(--s11-dark);

	font-size: clamp(30px, 3vw, 44px);
	font-weight: 700;

	line-height: 1.12;
	letter-spacing: -0.035em;
}


/* Line xanh dưới tiêu đề */
.ladi-section11 .tieu-de > .col > .col-inner::after {
	content: "";

	display: block;

	width: 64px;
	height: 4px;

	margin: 17px auto 0;

	border-radius: 999px;

	background:
		linear-gradient(
			90deg,
			var(--s11-green),
			#7be8bc
		);
}


/* =========================================================
   04. HÀNG 1
   Hai card nhỏ căn giữa card hero
========================================================= */

.ladi-section11 .lop1 {
	display: grid;

	grid-template-columns:
		minmax(0, 0.82fr)
		minmax(0, 1.65fr)
		minmax(0, 0.82fr);

	gap: 16px;

	align-items: center;

	margin-bottom: 16px;
}


/* Mốc cho nút video */
.ladi-section11 .lop1 > .col > .col-inner {
	position: relative;

	width: 100%;
}


/* Biến chiều cao hero */
.ladi-section11 .lop1 > .col:nth-child(2) > .col-inner {
	--s11-hero-image-height:
		clamp(
			350px,
			28vw,
			410px
		);
}


/* =========================================================
   05. HÀNG 2
========================================================= */

.ladi-section11 .lop2 {
	display: grid;

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

	gap: 16px;
}


/* =========================================================
   06. CARD
========================================================= */

.ladi-section11 .box {
	position: relative;

	display: flex;
	flex-direction: column;

	width: 100%;

	margin: 0;

	border:
		1px
		solid
		var(--s11-border);

	border-radius: 20px;

	background: #ffffff;

	box-shadow:
		0 10px 30px
		rgba(20, 63, 48, 0.055);

	overflow: hidden;

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


/* Hover card */
.ladi-section11 .box:hover {
	transform: translateY(-5px);

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

	box-shadow:
		0 18px 42px
		rgba(20, 63, 48, 0.11);
}


/* Hero card nổi bật nhẹ */
.ladi-section11 .lop1 > .col:nth-child(2) .box {
	border-color:
		rgba(40, 203, 139, 0.25);

	box-shadow:
		0 15px 42px
		rgba(20, 63, 48, 0.09);
}


/* =========================================================
   07. IMAGE
========================================================= */

.ladi-section11 .box-image {
	position: relative;

	width: 100%;

	margin: 0;

	overflow: hidden;

	background: #f3f6f4;
}


/* Wrapper ảnh */
.ladi-section11 .box-image > div {
	width: 100%;
	height: 100%;

	overflow: hidden;
}


/* Ảnh */
.ladi-section11 .box-image img {
	display: block;

	width: 100%;
	height: 100%;

	max-width: none;

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

	transform: scale(1);

	transition:
		transform
		0.55s
		cubic-bezier(
			0.2,
			0.8,
			0.2,
			1
		);
}


/* Zoom ảnh nhẹ khi hover */
.ladi-section11 .box:hover .box-image img {
	transform: scale(1.04);
}


/* =========================================================
   08. KÍCH THƯỚC ẢNH HÀNG 1
========================================================= */

.ladi-section11 .lop1 > .col:first-child .box-image,
.ladi-section11 .lop1 > .col:last-child .box-image {
	height:
		clamp(
			245px,
			21vw,
			305px
		);
}


/* Hero */
.ladi-section11 .lop1 > .col:nth-child(2) .box-image {
	height: var(--s11-hero-image-height);
}


/* =========================================================
   09. KÍCH THƯỚC ẢNH HÀNG 2
========================================================= */

.ladi-section11 .lop2 .box-image {
	height:
		clamp(
			185px,
			16vw,
			220px
		);
}


/* =========================================================
   10. IMAGE ZOOM
========================================================= */

.ladi-section11 .kht-s11-zoomable {
	cursor: zoom-in;
}


/* Icon zoom */
.ladi-section11 .kht-s11-zoomable::after {
	content: "+";

	position: absolute;

	z-index: 4;

	top: 13px;
	right: 13px;

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

	width: 34px;
	height: 34px;

	border:
		1px
		solid
		rgba(255, 255, 255, 0.75);

	border-radius: 50%;

	color: var(--s11-dark);

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

	box-shadow:
		0 6px 18px
		rgba(20, 63, 48, 0.1);

	font-size: 20px;

	opacity: 0;

	transform: scale(0.85);

	transition:
		opacity 0.25s ease,
		transform 0.25s ease;
}


/* Hiện icon zoom */
.ladi-section11 .box:hover .kht-s11-zoomable::after {
	opacity: 1;

	transform: scale(1);
}


/* =========================================================
   11. CAPTION
========================================================= */

.ladi-section11 .box-text {
	position: relative;

	width: 100%;

	padding: 0;

	text-align: left;

	background: #ffffff;
}


/* Nội dung caption */
.ladi-section11 .box-text-inner {
	position: relative;

	display: flex;
	align-items: center;

	min-height: 58px;

	padding:
		12px
		42px
		12px
		17px;

	background: #ffffff;
}


/* Dot xanh */
.ladi-section11 .box-text-inner::before {
	content: "";

	flex:
		0
		0
		auto;

	width: 8px;
	height: 8px;

	margin-right: 11px;

	border-radius: 50%;

	background: var(--s11-green);

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


/* Arrow */
.ladi-section11 .box-text-inner::after {
	content: "↗";

	position: absolute;

	right: 16px;
	top: 50%;

	color: var(--s11-green-dark);

	font-size: 15px;

	transform: translateY(-50%);
}


/* Caption text */
.ladi-section11 .box-text p {
	margin: 0;

	color: var(--s11-dark);

	font-size: 13px;
	font-weight: 700;

	line-height: 1.35;
}


/* Hàng dưới */
.ladi-section11 .lop2 .box-text-inner {
	min-height: 54px;

	padding:
		10px
		37px
		10px
		14px;
}


.ladi-section11 .lop2 .box-text p {
	font-size: 12px;
}


/* =========================================================
   12. VIDEO BUTTON
========================================================= */

.ladi-section11 .lop1 > .col:nth-child(2) .video-button-wrapper {
	position: absolute;

	z-index: 8;

	left: 50%;

	top:
		calc(
			var(--s11-hero-image-height) / 2
		);

	margin: 0;

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


/* Play button */
.ladi-section11 .video-button-wrapper .open-video {
	position: relative;

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

	width: 76px;
	height: 76px;

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

	margin: 0;
	padding: 0;

	color: #073725;

	border:
		1px
		solid
		rgba(255, 255, 255, 0.88);

	border-radius: 50%;

	background:
		linear-gradient(
			135deg,
			#80ecc0,
			var(--s11-green)
		);

	box-shadow:
		0 15px 38px
		rgba(40, 203, 139, 0.36);

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


/* Vòng ngoài */
.ladi-section11 .video-button-wrapper .open-video::before {
	content: "";

	position: absolute;

	inset: -10px;

	border:
		1px
		solid
		rgba(255, 255, 255, 0.8);

	border-radius: 50%;

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


/* Hover play */
.ladi-section11 .video-button-wrapper .open-video:hover {
	color: #073725;

	transform: scale(1.07);

	box-shadow:
		0 20px 48px
		rgba(40, 203, 139, 0.44);
}


/* Icon play */
.ladi-section11 .video-button-wrapper .icon-play {
	position: relative;

	left: 2px;

	font-size: 21px;
}


/* =========================================================
   13. LIGHTBOX
========================================================= */

.kht-s11-lightbox {
	position: fixed;

	z-index: 999999;

	inset: 0;

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

	padding: 32px;

	opacity: 0;
	visibility: hidden;

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


/* Lightbox mở */
.kht-s11-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}


/* Background */
.kht-s11-lightbox-backdrop {
	position: absolute;

	inset: 0;

	background:
		rgba(10, 24, 19, 0.88);

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


/* Dialog */
.kht-s11-lightbox-dialog {
	position: relative;

	z-index: 2;

	display: flex;
	flex-direction: column;

	width: fit-content;
	height: fit-content;

	max-width: 92vw;
	max-height: 92vh;

	border-radius: 18px;

	background: #ffffff;

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

	overflow: hidden;

	transform: scale(0.94);

	transition:
		transform 0.3s
		cubic-bezier(
			0.2,
			0.8,
			0.2,
			1
		);
}


/* Dialog khi mở */
.kht-s11-lightbox.is-open .kht-s11-lightbox-dialog {
	transform: scale(1);
}


/* Ảnh lớn */
.kht-s11-lightbox-image {
	display: block;

	width: auto;
	height: auto;

	max-width: 92vw;
	max-height: 82vh;

	object-fit: contain;

	background: #f4f5f4;
}


/* Caption lightbox */
.kht-s11-lightbox-caption {
	display: none;

	padding:
		13px
		60px
		13px
		18px;

	color: #12382d;

	font-size: 13px;
	font-weight: 600;

	background: #ffffff;
}


/* Có caption */
.kht-s11-lightbox-caption.has-text {
	display: block;
}


/* =========================================================
   14. NÚT ĐÓNG LIGHTBOX
   FIX MÉO - LUÔN LÀ HÌNH TRÒN
========================================================= */

.kht-s11-lightbox-close {
	position: absolute;

	z-index: 10;

	top: 14px;
	right: 14px;

	/*
	   Khóa tuyệt đối kích thước.
	   Không cho CSS button của theme kéo giãn.
	*/
	width: 44px;
	height: 44px;

	min-width: 44px;
	min-height: 44px;

	max-width: 44px;
	max-height: 44px;

	aspect-ratio: 1 / 1;

	flex:
		0
		0
		44px;

	display: block;

	margin: 0;
	padding: 0;

	box-sizing: border-box;

	border: 0;
	border-radius: 50%;

	appearance: none;
	-webkit-appearance: none;

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

	box-shadow:
		0 7px 22px
		rgba(0, 0, 0, 0.17);

	cursor: pointer;

	overflow: hidden;

	transform: none;

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


/* Thanh thứ nhất tạo dấu X */
.kht-s11-lightbox-close::before {
	content: "";

	position: absolute;

	left: 50%;
	top: 50%;

	width: 17px;
	height: 3px;

	border-radius: 999px;

	background: #164536;

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


/* Thanh thứ hai tạo dấu X */
.kht-s11-lightbox-close::after {
	content: "";

	position: absolute;

	left: 50%;
	top: 50%;

	width: 17px;
	height: 3px;

	border-radius: 999px;

	background: #164536;

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


/* Hover nút đóng */
.kht-s11-lightbox-close:hover {
	transform: scale(1.06);

	background: #ffffff;

	box-shadow:
		0 10px 28px
		rgba(0, 0, 0, 0.22);
}


/* Active */
.kht-s11-lightbox-close:active {
	transform: scale(0.96);
}


/* =========================================================
   15. TABLET
========================================================= */

@media (max-width: 1024px) {

	.ladi-section11 > .section-content {
		padding: 52px 0;
	}


	.ladi-section11 .tieu-de,
	.ladi-section11 .lop1,
	.ladi-section11 .lop2 {
		width:
			calc(
				100% - 36px
			);
	}


	/* Hero lên đầu */
	.ladi-section11 .lop1 {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);

		align-items: stretch;

		gap: 12px;
	}


	.ladi-section11 .lop1 > .col:nth-child(2) {
		grid-column: 1 / -1;
		grid-row: 1;
	}


	.ladi-section11 .lop1 > .col:first-child {
		grid-column: 1;
		grid-row: 2;
	}


	.ladi-section11 .lop1 > .col:last-child {
		grid-column: 2;
		grid-row: 2;
	}


	/* Hero */
	.ladi-section11 .lop1 > .col:nth-child(2) > .col-inner {
		--s11-hero-image-height: 350px;
	}


	/* Ảnh phụ */
	.ladi-section11 .lop1 > .col:first-child .box-image,
	.ladi-section11 .lop1 > .col:last-child .box-image {
		height: 230px;
	}


	/* Process 2 x 2 */
	.ladi-section11 .lop2 {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);

		gap: 12px;
	}


	.ladi-section11 .lop2 .box-image {
		height: 220px;
	}

}


/* =========================================================
   16. MOBILE
========================================================= */

@media (max-width: 767px) {

	.ladi-section11 > .section-content {
		padding: 38px 0;
	}


	/* Title */
	.ladi-section11 .tieu-de {
		width:
			calc(
				100% - 24px
			);

		margin-bottom: 25px;
	}


	.ladi-section11 .lop1,
	.ladi-section11 .lop2 {
		width:
			calc(
				100% - 20px
			);
	}


	.ladi-section11 .tieu-de p {
		font-size:
			clamp(
				25px,
				7vw,
				31px
			);
	}


	/* Hàng hero */
	.ladi-section11 .lop1 {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);

		gap: 8px;

		margin-bottom: 8px;
	}


	/* Hero full hàng */
	.ladi-section11 .lop1 > .col:nth-child(2) {
		grid-column: 1 / -1;
	}


	/* Hero mobile */
	.ladi-section11 .lop1 > .col:nth-child(2) > .col-inner {
		--s11-hero-image-height: 255px;
	}


	/* Ảnh phụ */
	.ladi-section11 .lop1 > .col:first-child .box-image,
	.ladi-section11 .lop1 > .col:last-child .box-image {
		height: 155px;
	}


	/* Process 2 cột */
	.ladi-section11 .lop2 {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);

		gap: 8px;
	}


	.ladi-section11 .lop2 .box-image {
		height: 155px;
	}


	/* Card */
	.ladi-section11 .box {
		border-radius: 14px;
	}


	/* Caption */
	.ladi-section11 .box-text-inner,
	.ladi-section11 .lop2 .box-text-inner {
		min-height: 48px;

		padding:
			8px
			27px
			8px
			10px;
	}


	.ladi-section11 .box-text p,
	.ladi-section11 .lop2 .box-text p {
		font-size: 10px;
	}


	/* Play */
	.ladi-section11 .video-button-wrapper .open-video {
		width: 60px;
		height: 60px;

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


	/* Icon zoom luôn hiện trên mobile */
	.ladi-section11 .kht-s11-zoomable::after {
		top: 8px;
		right: 8px;

		width: 28px;
		height: 28px;

		font-size: 16px;

		opacity: 0.9;

		transform: scale(1);
	}


	/* Lightbox */
	.kht-s11-lightbox {
		padding: 12px;
	}


	.kht-s11-lightbox-image {
		max-width:
			calc(
				100vw - 24px
			);

		max-height: 78vh;
	}


	/* =====================================================
	   CLOSE BUTTON MOBILE
	   Vẫn khóa tỷ lệ 1:1
	===================================================== */

	.kht-s11-lightbox-close {
		top: 9px;
		right: 9px;

		width: 40px;
		height: 40px;

		min-width: 40px;
		min-height: 40px;

		max-width: 40px;
		max-height: 40px;

		flex:
			0
			0
			40px;
	}


	/* Thu dấu X mobile */
	.kht-s11-lightbox-close::before,
	.kht-s11-lightbox-close::after {
		width: 15px;
		height: 2.5px;
	}

}


/* =========================================================
   17. MOBILE NHỎ
========================================================= */

@media (max-width: 390px) {

	.ladi-section11 .lop1,
	.ladi-section11 .lop2 {
		width:
			calc(
				100% - 14px
			);
	}


	/* Hero */
	.ladi-section11 .lop1 > .col:nth-child(2) > .col-inner {
		--s11-hero-image-height: 225px;
	}


	/* Ảnh phụ */
	.ladi-section11 .lop1 > .col:first-child .box-image,
	.ladi-section11 .lop1 > .col:last-child .box-image,
	.ladi-section11 .lop2 .box-image {
		height: 140px;
	}

}


/* =========================================================
   18. ACCESSIBILITY
========================================================= */

.ladi-section11 .open-video:focus-visible,
.kht-s11-lightbox-close:focus-visible {
	outline:
		3px
		solid
		rgba(40, 203, 139, 0.45);

	outline-offset: 4px;
}


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

	.ladi-section11 *,
	.ladi-section11 *::before,
	.ladi-section11 *::after,
	.kht-s11-lightbox,
	.kht-s11-lightbox-dialog {
		transition-duration: 0.01ms;
	}

}



















/* =========================================================
   SECTION 12 - FAQ COMPACT V5
   FIX CĂN THẲNG HÀNG:
   [01]  CÂU HỎI                              [+]
========================================================= */

.ladi-section12 {
	--s12-green: #28cb8b;
	--s12-green-dark: #159461;
	--s12-green-soft: #eafaf3;

	--s12-dark: #143b2f;
	--s12-text: #4f685e;

	--s12-bg: #f3faf6;
	--s12-border: #dcebe4;

	position: relative;
	overflow: hidden;

	background: var(--s12-bg);
}


/* =========================================================
   01. BACKGROUND
========================================================= */

.ladi-section12 > .section-bg {
	position: absolute;
	inset: 0;

	background: var(--s12-bg);
}


/* =========================================================
   02. SECTION CONTENT
========================================================= */

.ladi-section12 > .section-content {
	position: relative;
	z-index: 2;

	padding: 54px 0 60px;
}


/* Giới hạn chiều rộng tổng thể FAQ */
.ladi-section12 > .section-content > .row {
	width: min(1020px, calc(100% - 48px));
	max-width: 1020px;

	margin: 0 auto;
}


/* Reset padding mặc định column Flatsome */
.ladi-section12 > .section-content > .row > .col {
	width: 100%;
	max-width: 100%;

	padding-top: 0;
	padding-bottom: 0;
}


/* =========================================================
   03. TITLE SECTION
========================================================= */

.ladi-section12
.section-content > .row > .col > .col-inner > p {
	position: relative;

	margin: 0 0 30px;

	color: var(--s12-dark);

	font-size: clamp(28px, 3vw, 38px);
	font-weight: 700;

	line-height: 1.12;
	letter-spacing: -0.035em;

	text-align: center;
}


/* Line xanh dưới tiêu đề */
.ladi-section12
.section-content > .row > .col > .col-inner > p::after {
	content: "";

	display: block;

	width: 54px;
	height: 3px;

	margin: 14px auto 0;

	border-radius: 999px;

	background: var(--s12-green);
}


/* =========================================================
   04. ACCORDION WRAPPER
========================================================= */

.ladi-section12 .accordion {
	display: flex;
	flex-direction: column;

	gap: 7px;

	width: 100%;

	margin: 0;
	padding: 0;

	border: 0;

	background: transparent;
}


/* =========================================================
   05. FAQ ITEM
========================================================= */

.ladi-section12 .accordion-item {
	position: relative;

	display: block;

	width: 100%;

	margin: 0;
	padding: 0;

	border: 1px solid var(--s12-border);
	border-radius: 11px;

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

	box-shadow:
		0 3px 14px rgba(18, 62, 47, 0.035);

	overflow: hidden;

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


/* Hover FAQ */
.ladi-section12 .accordion-item:hover {
	border-color: rgba(40, 203, 139, 0.28);

	box-shadow:
		0 6px 20px rgba(18, 62, 47, 0.055);
}


/* FAQ đang được mở */
.ladi-section12 .accordion-item.is-open {
	border-color: rgba(40, 203, 139, 0.42);

	background: #ffffff;

	box-shadow:
		0 8px 25px rgba(18, 62, 47, 0.065);
}


/* =========================================================
   06. QUESTION ROW

   FIX CHÍNH:
   Khóa cấu trúc Grid rõ ràng:
   number | question | toggle
========================================================= */

.ladi-section12 .accordion-title {
	position: relative;

	display: grid;

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

	grid-template-areas:
		"number question toggle";

	align-items: center;

	column-gap: 10px;

	width: 100%;

	min-height: 64px;

	margin: 0;

	padding:
		0
		12px
		0
		11px;

	box-sizing: border-box;

	border: 0;

	color: var(--s12-dark);

	background: transparent;

	text-decoration: none;

	line-height: 1;

	transition:
		background-color 0.25s ease;
}


/* Hover question row */
.ladi-section12 .accordion-title:hover {
	background:
		linear-gradient(
			90deg,
			rgba(40, 203, 139, 0.04),
			transparent 75%
		);
}


/* Active question row */
.ladi-section12
.accordion-title[aria-expanded="true"] {
	background:
		linear-gradient(
			90deg,
			rgba(40, 203, 139, 0.055),
			transparent 78%
		);
}


/* =========================================================
   07. NUMBER

   FIX:
   align-self:center để vòng số luôn nằm giữa card.
========================================================= */

.ladi-section12 .accordion-title::before {
	content: attr(data-faq-number);

	grid-area: number;

	align-self: center;
	justify-self: start;

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

	width: 30px;
	height: 30px;

	min-width: 30px;
	min-height: 30px;

	margin: 0;
	padding: 0;

	box-sizing: border-box;

	border-radius: 50%;

	color: var(--s12-green-dark);

	background: var(--s12-green-soft);

	font-size: 10px;
	font-weight: 700;

	line-height: 1;

	text-align: center;

	vertical-align: middle;

	box-shadow:
		inset 0 0 0 1px
		rgba(40, 203, 139, 0.15);

	transform: none;
}


/* Number active */
.ladi-section12
.accordion-title[aria-expanded="true"]::before {
	color: #ffffff;

	background: var(--s12-green);

	box-shadow:
		0 4px 12px
		rgba(40, 203, 139, 0.24);
}


/* =========================================================
   08. QUESTION TEXT

   FIX:
   Reset toàn bộ position / transform có thể đến từ theme.
========================================================= */

.ladi-section12 .accordion-title > span {
	grid-area: question;

	align-self: center;
	justify-self: stretch;

	position: static;

	display: block;

	width: 100%;
	height: auto;

	min-width: 0;
	min-height: 0;

	max-width: 100%;

	margin: 0;
	padding: 0;

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

	color: var(--s12-dark);

	font-size: 13.5px;
	font-weight: 700;

	line-height: 1.35;

	letter-spacing: -0.01em;

	text-align: left;

	vertical-align: middle;

	white-space: normal;

	word-break: normal;

	overflow-wrap: break-word;

	transform: none;
}


/* Text câu hỏi active */
.ladi-section12
.accordion-title[aria-expanded="true"] > span {
	color: #0f6b49;
}


/* =========================================================
   09. TOGGLE

   FIX:
   Reset position:absolute mặc định của Flatsome.
========================================================= */

.ladi-section12 .accordion-title .toggle {
	grid-area: toggle;

	align-self: center;
	justify-self: end;

	position: relative;

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

	width: 30px;
	height: 30px;

	min-width: 30px;
	min-height: 30px;

	max-width: 30px;
	max-height: 30px;

	margin: 0;
	padding: 0;

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

	box-sizing: border-box;

	border: 1px solid #dceae4;
	border-radius: 50%;

	color: var(--s12-dark);

	background: #f6faf8;

	box-shadow: none;

	line-height: 1;

	vertical-align: middle;

	opacity: 1;

	overflow: hidden;

	transform: none;

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


/* Ẩn icon mặc định Flatsome */
.ladi-section12 .accordion-title .toggle i {
	display: none;
}


/* =========================================================
   10. DẤU +
========================================================= */

/* Thanh ngang */
.ladi-section12 .accordion-title .toggle::before {
	content: "";

	position: absolute;

	left: 50%;
	top: 50%;

	width: 10px;
	height: 1.5px;

	margin: 0;
	padding: 0;

	border-radius: 999px;

	background: var(--s12-dark);

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


/* Thanh dọc */
.ladi-section12 .accordion-title .toggle::after {
	content: "";

	position: absolute;

	left: 50%;
	top: 50%;

	width: 1.5px;
	height: 10px;

	margin: 0;
	padding: 0;

	border-radius: 999px;

	background: var(--s12-dark);

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

	transition:
		transform 0.25s ease;
}


/* Nút toggle khi active */
.ladi-section12
.accordion-title[aria-expanded="true"] .toggle {
	border-color:
		rgba(40, 203, 139, 0.28);

	background: var(--s12-green-soft);
}


/* Dấu + chuyển thành dấu - */
.ladi-section12
.accordion-title[aria-expanded="true"]
.toggle::after {
	transform:
		translate(-50%, -50%)
		scaleY(0);
}


/* =========================================================
   11. ANSWER
========================================================= */

.ladi-section12 .accordion-inner {
	position: relative;

	display: block;

	width: 100%;

	margin: 0;

	padding:
		0
		24px
		18px
		59px;

	box-sizing: border-box;

	border: 0;

	color: var(--s12-text);

	background: #ffffff;
}


/* Line phân cách trước answer */
.ladi-section12 .accordion-inner::before {
	content: "";

	display: block;

	width: 100%;
	height: 1px;

	margin-bottom: 8px;

	background:
		linear-gradient(
			90deg,
			rgba(40, 203, 139, 0.28),
			rgba(18, 56, 45, 0.05),
			transparent
		);
}


/* Nội dung answer */
.ladi-section12 .accordion-inner p {
	position: relative;

	width: 100%;

	margin: 0 0 5px;

	padding:
		9px
		12px
		9px
		29px;

	box-sizing: border-box;

	color: var(--s12-text);

	font-size: 14px;
	font-weight: 500;

	line-height: 1.55;

	text-align: left;
}


/* Answer cuối */
.ladi-section12 .accordion-inner p:last-child {
	margin-bottom: 0;
}


/* Dot answer */
.ladi-section12 .accordion-inner p::before {
	content: "";

	position: absolute;

	left: 12px;
	top: 17px;

	width: 6px;
	height: 6px;

	border-radius: 50%;

	background: var(--s12-green);
}


/* =========================================================
   12. CÂU 08 - DANH SÁCH NHIỀU NHÓM
   Mỗi nhóm chiếm một hàng
========================================================= */

.ladi-section12
.accordion-inner.has-many-items {
	display: flex;
	flex-direction: column;

	gap: 0;
}


/* Mỗi nhóm sản phẩm */
.ladi-section12
.accordion-inner.has-many-items p {
	display: flex;

	align-items: baseline;

	flex-wrap: nowrap;

	width: 100%;

	min-height: 43px;

	margin: 0;

	padding:
		10px
		14px
		10px
		31px;

	border-bottom:
		1px solid
		rgba(18, 56, 45, 0.06);

	font-size: 14px;

	line-height: 1.5;
}


/* Item cuối bỏ line */
.ladi-section12
.accordion-inner.has-many-items p:last-child {
	border-bottom: 0;
}


/* Dot danh sách */
.ladi-section12
.accordion-inner.has-many-items p::before {
	left: 12px;
	top: 18px;
}


/* =========================================================
   13. CATEGORY + DETAIL CÂU 08
========================================================= */

.ladi-section12 .kht-s12-answer-category {
	flex: 0 0 auto;

	margin-right: 5px;

	color: var(--s12-dark);

	font-size: 14px;
	font-weight: 700;

	line-height: 1.5;

	white-space: nowrap;
}


/* Nội dung sản phẩm */
.ladi-section12 .kht-s12-answer-detail {
	flex: 1 1 auto;

	min-width: 0;

	color: var(--s12-text);

	font-size: 14px;
	font-weight: 500;

	line-height: 1.5;
}


/* =========================================================
   14. ANSWER RỖNG
========================================================= */

.ladi-section12
.accordion-item.is-empty
.accordion-inner {
	padding: 0;
}


/* Không hiện line nếu chưa có answer */
.ladi-section12
.accordion-item.is-empty
.accordion-inner::before {
	display: none;
}


/* =========================================================
   15. TABLET
========================================================= */

@media (max-width: 1024px) {

	.ladi-section12 > .section-content {
		padding: 46px 0 52px;
	}


	/* Thu chiều rộng container */
	.ladi-section12 > .section-content > .row {
		width:
			min(
				900px,
				calc(100% - 36px)
			);
	}


	/* Question row tablet vẫn căn giữa */
	.ladi-section12 .accordion-title {
		min-height: 62px;
	}


	/* Text tablet */
	.ladi-section12 .accordion-title > span {
		font-size: 13px;
	}


	/* Answer tablet */
	.ladi-section12 .accordion-inner p,
	.ladi-section12 .kht-s12-answer-category,
	.ladi-section12 .kht-s12-answer-detail {
		font-size: 13.5px;
	}

}


/* =========================================================
   16. MOBILE
========================================================= */

@media (max-width: 767px) {

	.ladi-section12 > .section-content {
		padding: 34px 0 40px;
	}


	/* Mép mobile */
	.ladi-section12 > .section-content > .row {
		width: calc(100% - 20px);
	}


	/* Title */
	.ladi-section12
	.section-content > .row > .col > .col-inner > p {
		margin-bottom: 22px;

		font-size:
			clamp(
				25px,
				7vw,
				30px
			);
	}


	/* Khoảng cách giữa các FAQ */
	.ladi-section12 .accordion {
		gap: 6px;
	}


	/* Card */
	.ladi-section12 .accordion-item {
		border-radius: 10px;
	}


	/* =====================================================
	   FIX ALIGN MOBILE
	===================================================== */

	.ladi-section12 .accordion-title {
		grid-template-columns:
			31px
			minmax(0, 1fr)
			29px;

		column-gap: 8px;

		min-height: 56px;

		padding:
			0
			8px;
	}


	/* Number mobile */
	.ladi-section12 .accordion-title::before {
		width: 27px;
		height: 27px;

		min-width: 27px;
		min-height: 27px;

		font-size: 9px;

		align-self: center;
	}


	/* Question mobile */
	.ladi-section12 .accordion-title > span {
		align-self: center;

		font-size: 11.5px;

		line-height: 1.35;
	}


	/* Toggle mobile */
	.ladi-section12 .accordion-title .toggle {
		align-self: center;

		width: 28px;
		height: 28px;

		min-width: 28px;
		min-height: 28px;

		max-width: 28px;
		max-height: 28px;
	}


	/* Answer mobile */
	.ladi-section12 .accordion-inner {
		padding:
			0
			10px
			14px
			42px;
	}


	/* Answer text */
	.ladi-section12 .accordion-inner p {
		font-size: 12.5px;

		line-height: 1.5;
	}


	/* Danh sách dài mobile */
	.ladi-section12
	.accordion-inner.has-many-items p {
		display: block;

		min-height: 0;

		padding:
			10px
			7px
			10px
			20px;

		font-size: 12.5px;
	}


	/* Dot */
	.ladi-section12
	.accordion-inner.has-many-items p::before {
		left: 5px;
		top: 17px;
	}


	/* Category mobile */
	.ladi-section12 .kht-s12-answer-category {
		display: inline;

		margin-right: 3px;

		font-size: 12.5px;

		white-space: normal;
	}


	/* Detail mobile */
	.ladi-section12 .kht-s12-answer-detail {
		display: inline;

		font-size: 12.5px;
	}

}


/* =========================================================
   17. MOBILE NHỎ
========================================================= */

@media (max-width: 390px) {

	.ladi-section12 > .section-content > .row {
		width: calc(100% - 14px);
	}


	/* Giảm nhẹ khoảng cột nhưng vẫn cùng tâm */
	.ladi-section12 .accordion-title {
		grid-template-columns:
			29px
			minmax(0, 1fr)
			27px;

		column-gap: 6px;

		min-height: 54px;

		padding:
			0
			7px;
	}


	/* Number */
	.ladi-section12 .accordion-title::before {
		width: 25px;
		height: 25px;

		min-width: 25px;
		min-height: 25px;

		font-size: 8px;
	}


	/* Question */
	.ladi-section12 .accordion-title > span {
		font-size: 10.5px;
	}


	/* Toggle */
	.ladi-section12 .accordion-title .toggle {
		width: 26px;
		height: 26px;

		min-width: 26px;
		min-height: 26px;

		max-width: 26px;
		max-height: 26px;
	}


	/* Answer */
	.ladi-section12 .accordion-inner {
		padding-left: 36px;
	}

}


/* =========================================================
   18. ACCESSIBILITY
========================================================= */

/* Focus khi sử dụng bàn phím */
.ladi-section12 .accordion-title:focus-visible {
	outline:
		3px
		solid
		rgba(40, 203, 139, 0.28);

	outline-offset: -2px;

	border-radius: 10px;
}


/* Giảm animation theo thiết lập thiết bị */
@media (prefers-reduced-motion: reduce) {

	.ladi-section12 *,
	.ladi-section12 *::before,
	.ladi-section12 *::after {
		transition-duration: 0.01ms;
	}

}

















/* =========================================================
   SECTION 13 - PROJECT DATA STRIP V4
   FIX:
   - Reset chính xác .row.row-small của Flatsome
   - Ô 50+ SKU không còn sát mép trái
   - 3 ô có gutter đồng đều
   - Không icon
   - Không số trong .thong-tin
========================================================= */

.ladi-section13 {
	--s13-green: #28cb8b;
	--s13-green-dark: #13895b;

	--s13-dark: #12382d;
	--s13-text: #546a61;
	--s13-muted: #7e9188;

	--s13-white: #ffffff;
	--s13-bg: #f6faf8;

	--s13-line: rgba(18, 56, 45, 0.1);

	position: relative;

	overflow: hidden;

	background: var(--s13-bg);
}


/* =========================================================
   01. BACKGROUND
========================================================= */

.ladi-section13 > .section-bg {
	position: absolute;

	inset: 0;

	background:
		linear-gradient(
			180deg,
			#ffffff 0%,
			#f7faf8 100%
		);
}


/* =========================================================
   02. SECTION CONTENT
========================================================= */

.ladi-section13 > .section-content {
	position: relative;

	z-index: 2;

	padding: 64px 0 68px;
}


/* =========================================================
   03. CONTAINER
========================================================= */

.ladi-section13 .tieu-de,
.ladi-section13 .du-an,
.ladi-section13 .thuong-hieu {
	width: min(
		1320px,
		calc(100% - 48px)
	);

	max-width: 1320px;

	margin-left: auto;
	margin-right: auto;
}


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

.ladi-section13 .tieu-de {
	display: flex;

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

	margin-bottom: 38px;
}


/* Reset column của Flatsome */
.ladi-section13 .tieu-de > .col {
	width: 100%;
	max-width: 100%;

	flex-basis: 100%;

	padding: 0;
}


/* Căn giữa tiêu đề */
.ladi-section13
.tieu-de > .col > .col-inner {
	width: 100%;

	text-align: center;
}


/* Tiêu đề chính */
.ladi-section13 .tieu-de p {
	width: 100%;

	max-width: 1100px;

	margin: 0 auto;

	color: var(--s13-dark);

	font-size: clamp(
		32px,
		3.35vw,
		46px
	);

	font-weight: 700;

	line-height: 1.08;

	letter-spacing: -0.04em;

	text-align: center;
}


/* Thanh xanh dưới tiêu đề */
.ladi-section13 .tieu-de p::after {
	content: "";

	display: block;

	width: 62px;
	height: 4px;

	margin: 17px auto 0;

	border-radius: 999px;

	background: var(--s13-green);
}


/* =========================================================
   05. PROJECT GRID
========================================================= */

.ladi-section13 .du-an {
	display: grid;

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

	gap: 16px;

	align-items: stretch;

	margin-top: 0;
	margin-bottom: 0;
}


/* Reset project column */
.ladi-section13 .du-an > .col {
	width: 100%;
	max-width: none;

	min-width: 0;

	flex-basis: auto;

	padding: 0;
}


/* =========================================================
   06. PROJECT CARD
========================================================= */

.ladi-section13
.du-an > .col > .col-inner {
	position: relative;

	display: flex;
	flex-direction: column;

	width: 100%;
	height: 100%;

	min-width: 0;

	padding: 0;

	border:
		1px
		solid
		var(--s13-line);

	border-radius: 22px;

	background: var(--s13-white);

	box-shadow:
		0 14px 38px
		rgba(18, 56, 45, 0.055);

	overflow: hidden;

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


/* Hover project */
.ladi-section13
.du-an > .col > .col-inner:hover {
	transform: translateY(-5px);

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

	box-shadow:
		0 22px 52px
		rgba(18, 56, 45, 0.1);
}


/* =========================================================
   07. SỐ PROJECT TRÊN ẢNH
========================================================= */

.ladi-section13
.du-an > .col > .col-inner::before {
	position: absolute;

	z-index: 5;

	top: 15px;
	left: 15px;

	display: flex;

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

	width: 39px;
	height: 39px;

	border:
		1px
		solid
		rgba(255, 255, 255, 0.75);

	border-radius: 50%;

	color: var(--s13-dark);

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

	box-shadow:
		0 7px 20px
		rgba(18, 56, 45, 0.1);

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

	font-size: 10px;
	font-weight: 700;

	line-height: 1;
}


/* Dự án 01 */
.ladi-section13
.du-an > .col:nth-child(1)
> .col-inner::before {
	content: "01";
}


/* Dự án 02 */
.ladi-section13
.du-an > .col:nth-child(2)
> .col-inner::before {
	content: "02";
}


/* Dự án 03 */
.ladi-section13
.du-an > .col:nth-child(3)
> .col-inner::before {
	content: "03";
}


/* =========================================================
   08. ẢNH PROJECT
========================================================= */

.ladi-section13
.du-an > .col > .col-inner > .img {
	flex: 0 0 auto;

	width: 100%;

	margin: 0;

	overflow: hidden;
}


/* Khung ảnh */
.ladi-section13
.du-an > .col > .col-inner
> .img .img-inner {
	width: 100%;

	aspect-ratio: 16 / 10;

	overflow: hidden;

	background: #f1f3f2;
}


/* Ảnh */
.ladi-section13
.du-an > .col > .col-inner
> .img img {
	display: block;

	width: 100%;
	height: 100%;

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

	transform: scale(1);

	transition:
		transform
		0.55s
		cubic-bezier(
			0.2,
			0.8,
			0.2,
			1
		);
}


/* Phóng nhẹ ảnh khi hover */
.ladi-section13
.du-an > .col > .col-inner:hover
> .img img {
	transform: scale(1.045);
}


/* =========================================================
   09. TÊN DỰ ÁN
========================================================= */

.ladi-section13
.du-an > .col > .col-inner > h5 {
	position: relative;

	margin:
		20px
		20px
		9px;

	padding-left: 14px;

	color: var(--s13-dark);

	font-size: 16px;
	font-weight: 700;

	line-height: 1.35;

	letter-spacing: -0.015em;
}


/* Thanh xanh cạnh tiêu đề dự án */
.ladi-section13
.du-an > .col > .col-inner > h5::before {
	content: "";

	position: absolute;

	left: 0;
	top: 3px;

	width: 4px;

	height:
		calc(
			100% - 6px
		);

	min-height: 18px;

	border-radius: 999px;

	background: var(--s13-green);
}


/* =========================================================
   10. MÔ TẢ DỰ ÁN
========================================================= */

.ladi-section13
.du-an > .col > .col-inner > p {
	margin:
		0
		20px
		20px;

	color: var(--s13-text);

	font-size: 13px;
	font-weight: 500;

	line-height: 1.6;
}


/* =========================================================
   11. DATA STRIP
   FIX TRỰC TIẾP .row.row-small CỦA FLATSOME
========================================================= */

.ladi-section13
.du-an
.thong-tin.row.row-small {
	position: relative;

	left: auto;
	right: auto;

	display: grid;

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

	align-items: stretch;

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

	min-width: 0;

	margin:
		auto
		0
		0;

	padding: 0;

	box-sizing: border-box;

	border-top:
		1px
		solid
		rgba(18, 56, 45, 0.08);

	background:
		linear-gradient(
			135deg,
			#eff9f4 0%,
			#f8fbf9 50%,
			#eef8f3 100%
		);

	overflow: hidden;

	transform: none;
}


/* =========================================================
   12. RESET COLUMN CỦA ROW-SMALL
   Đây là phần fix gutter bị lệch
========================================================= */

.ladi-section13
.du-an
.thong-tin.row.row-small > .col {
	position: relative;

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

	min-width: 0;

	flex-basis: auto;

	margin: 0;

	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 0;

	box-sizing: border-box;
}


/* Divider giữa 3 thông số */
.ladi-section13
.du-an
.thong-tin.row.row-small
> .col:not(:last-child) {
	border-right:
		1px
		solid
		rgba(18, 56, 45, 0.09);
}


/* =========================================================
   13. DATA ITEM
========================================================= */

.ladi-section13
.du-an
.thong-tin.row.row-small
> .col > .col-inner {
	position: relative;

	display: flex;
	flex-direction: column;

	justify-content: flex-start;

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

	min-width: 0;
	min-height: 116px;

	margin: 0;

	padding:
		31px
		14px
		16px;

	box-sizing: border-box;

	background: transparent;

	overflow: visible;

	transition:
		background-color 0.25s ease;
}


/* Hover item */
.ladi-section13
.du-an
.thong-tin.row.row-small
> .col > .col-inner:hover {
	background:
		rgba(255, 255, 255, 0.52);
}


/* =========================================================
   14. THANH XANH
========================================================= */

.ladi-section13
.du-an
.thong-tin.row.row-small
> .col > .col-inner::before {
	content: "";

	position: absolute;

	top: 17px;
	left: 14px;

	width: 25px;
	height: 3px;

	border-radius: 999px;

	background: var(--s13-green);
}


/* Không sử dụng pseudo thứ hai */
.ladi-section13
.du-an
.thong-tin.row.row-small
> .col > .col-inner::after {
	content: none;

	display: none;
}


/* =========================================================
   15. TITLE THÔNG SỐ
========================================================= */

.ladi-section13
.du-an
.thong-tin.row.row-small
> .col > .col-inner > h3 {
	position: relative;

	z-index: 2;

	display: block;

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

	min-width: 0;

	margin:
		0
		0
		6px;

	padding: 0;

	color: var(--s13-dark);

	font-size: 15px;
	font-weight: 700;

	line-height: 1.25;

	letter-spacing: -0.02em;

	white-space: normal;

	word-break: normal;

	overflow-wrap: break-word;

	overflow: visible;

	text-overflow: clip;
}


/* =========================================================
   16. MÔ TẢ THÔNG SỐ
========================================================= */

.ladi-section13
.du-an
.thong-tin.row.row-small
> .col > .col-inner > p {
	position: relative;

	z-index: 2;

	display: block;

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

	min-width: 0;

	margin: 0;

	padding: 0;

	color: var(--s13-muted);

	font-size: 10.5px;
	font-weight: 500;

	line-height: 1.5;

	white-space: normal;

	word-break: normal;

	overflow-wrap: break-word;

	overflow: visible;

	text-overflow: clip;
}


/* =========================================================
   17. LOGO AREA
========================================================= */

.ladi-section13 .thuong-hieu {
	position: relative;

	margin-top: 32px;

	padding-top: 0;

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

	scrollbar-width: none;
}


/* Ẩn scrollbar */
.ladi-section13
.thuong-hieu::-webkit-scrollbar {
	display: none;
}


/* Không tạo title phụ */
.ladi-section13 .thuong-hieu::before,
.ladi-section13 .thuong-hieu::after {
	content: none;

	display: none;
}


/* Logo marquee */
.ladi-section13
.thuong-hieu.kht-s13-marquee-ready {
	display: block;

	overflow: hidden;
}


/* =========================================================
   18. LOGO TRACK
========================================================= */

.ladi-section13
.kht-s13-logo-track {
	display: flex;

	align-items: center;

	gap: 14px;

	width: max-content;

	will-change: transform;
}


/* Logo item */
.ladi-section13
.kht-s13-logo-track > .col,
.ladi-section13
.thuong-hieu > .col {
	flex:
		0
		0
		175px;

	width: 175px;
	max-width: 175px;

	padding: 0;
}


/* =========================================================
   19. LOGO CARD
========================================================= */

.ladi-section13
.thuong-hieu .col-inner {
	display: flex;

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

	width: 100%;
	height: 82px;

	padding: 17px;

	border:
		1px
		solid
		rgba(18, 56, 45, 0.08);

	border-radius: 14px;

	background: #ffffff;

	box-shadow:
		0 6px 18px
		rgba(18, 56, 45, 0.035);

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


/* Hover logo */
.ladi-section13
.thuong-hieu .col-inner:hover {
	transform: translateY(-3px);

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

	box-shadow:
		0 10px 24px
		rgba(18, 56, 45, 0.07);
}


/* Logo wrapper */
.ladi-section13
.thuong-hieu .img {
	width: 100%;

	margin: 0;
}


/* Căn giữa logo */
.ladi-section13
.thuong-hieu .img-inner {
	display: flex;

	align-items: center;
	justify-content: center;
}


/* Logo image */
.ladi-section13
.thuong-hieu img {
	display: block;

	width: auto;
	height: auto;

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

	object-fit: contain;

	opacity: 0.82;

	transition:
		opacity 0.25s ease,
		transform 0.25s ease;
}


/* Hover logo image */
.ladi-section13
.thuong-hieu .col-inner:hover img {
	opacity: 1;

	transform: scale(1.04);
}


/* =========================================================
   20. DESKTOP NHỎ
========================================================= */

@media (max-width: 1100px) {

	/* Nội dung project */
	.ladi-section13
	.du-an > .col > .col-inner > h5 {
		margin:
			17px
			16px
			8px;

		font-size: 14px;
	}


	.ladi-section13
	.du-an > .col > .col-inner > p {
		margin:
			0
			16px
			17px;

		font-size: 12px;
	}


	/* Data item */
	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col > .col-inner {
		min-height: 112px;

		padding:
			29px
			11px
			14px;
	}


	/* Thanh xanh */
	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col > .col-inner::before {
		top: 15px;
		left: 11px;

		width: 22px;
	}


	/* Title */
	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col > .col-inner > h3 {
		font-size: 12.5px;
	}


	/* Description */
	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col > .col-inner > p {
		font-size: 9.5px;
	}

}


/* =========================================================
   21. TABLET
========================================================= */

@media (max-width: 900px) {

	.ladi-section13 > .section-content {
		padding: 50px 0;
	}


	/* Container */
	.ladi-section13 .tieu-de,
	.ladi-section13 .du-an,
	.ladi-section13 .thuong-hieu {
		width:
			calc(
				100% - 34px
			);
	}


	/* Project tablet thành 1 cột */
	.ladi-section13 .du-an {
		grid-template-columns: 1fr;

		gap: 15px;
	}


	/* Card */
	.ladi-section13
	.du-an > .col > .col-inner {
		border-radius: 19px;
	}


	/* Ảnh */
	.ladi-section13
	.du-an > .col > .col-inner
	> .img .img-inner {
		aspect-ratio: 16 / 8;
	}


	/* Heading project */
	.ladi-section13
	.du-an > .col > .col-inner > h5 {
		margin:
			19px
			20px
			8px;

		font-size: 16px;
	}


	/* Description */
	.ladi-section13
	.du-an > .col > .col-inner > p {
		margin:
			0
			20px
			20px;

		font-size: 13px;
	}


	/* Data tablet */
	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col > .col-inner {
		min-height: 106px;

		padding:
			31px
			16px
			15px;
	}


	/* Accent */
	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col > .col-inner::before {
		top: 16px;
		left: 16px;
	}


	/* Title */
	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col > .col-inner > h3 {
		font-size: 14px;
	}


	/* Description */
	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col > .col-inner > p {
		font-size: 11px;
	}


	/* Logo */
	.ladi-section13
	.kht-s13-logo-track > .col,
	.ladi-section13
	.thuong-hieu > .col {
		flex-basis: 155px;

		width: 155px;
		max-width: 155px;
	}

}


/* =========================================================
   22. MOBILE
   FIX CHÍNH:
   .row.row-small không còn tràn âm sang trái
========================================================= */

@media (max-width: 767px) {

	.ladi-section13 > .section-content {
		padding:
			38px
			0
			42px;
	}


	/* Container */
	.ladi-section13 .tieu-de,
	.ladi-section13 .du-an,
	.ladi-section13 .thuong-hieu {
		width:
			calc(
				100% - 20px
			);
	}


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

	.ladi-section13 .tieu-de {
		margin-bottom: 24px;
	}


	.ladi-section13 .tieu-de p {
		font-size:
			clamp(
				25px,
				7vw,
				31px
			);
	}


	.ladi-section13 .tieu-de p::after {
		width: 48px;
		height: 3px;

		margin-top: 13px;
	}


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

	.ladi-section13 .du-an {
		gap: 12px;
	}


	.ladi-section13
	.du-an > .col > .col-inner {
		border-radius: 16px;
	}


	/* Ảnh */
	.ladi-section13
	.du-an > .col > .col-inner
	> .img .img-inner {
		aspect-ratio: 16 / 9;
	}


	/* Number */
	.ladi-section13
	.du-an > .col > .col-inner::before {
		top: 12px;
		left: 12px;

		width: 35px;
		height: 35px;

		font-size: 9px;
	}


	/* Tên dự án */
	.ladi-section13
	.du-an > .col > .col-inner > h5 {
		margin:
			17px
			15px
			7px;

		font-size: 14px;
	}


	/* Mô tả */
	.ladi-section13
	.du-an > .col > .col-inner > p {
		margin:
			0
			15px
			16px;

		font-size: 11.5px;

		line-height: 1.55;
	}


	/* =====================================================
	   RESET ROW-SMALL MOBILE
	   Selector tăng specificity để thắng CSS Flatsome
	===================================================== */

	.ladi-section13
	.du-an
	.thong-tin.row.row-small {
		left: auto;
		right: auto;

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

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

		min-width: 0;

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

		padding: 0;

		gap: 0;

		transform: none;
	}


	/* Reset padding mặc định .row-small > .col */
	.ladi-section13
	.du-an
	.thong-tin.row.row-small > .col {
		width: 100%;
		max-width: 100%;

		min-width: 0;

		margin: 0;

		padding:
			0;

		box-sizing: border-box;
	}


	/* =====================================================
	   DATA ITEM MOBILE
	   Tất cả 3 ô dùng cùng một gutter 11px
	===================================================== */

	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col > .col-inner {
		width: 100%;
		max-width: 100%;

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

		margin: 0;

		padding:
			28px
			11px
			12px;

		box-sizing: border-box;

		overflow: visible;
	}


	/* =====================================================
	   FIX RIÊNG Ô ĐẦU
	   Bảo đảm gutter trái bằng đúng ô 02 và 03
	===================================================== */

	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col:first-child > .col-inner {
		padding-left: 11px;
	}


	/* Thanh xanh của cả 3 item */
	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col > .col-inner::before {
		top: 13px;
		left: 11px;

		width: 18px;
		height: 2px;
	}


	/* Thanh xanh item đầu căn cùng gutter */
	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col:first-child
	> .col-inner::before {
		left: 11px;
	}


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

	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col > .col-inner > h3 {
		display: block;

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

		min-width: 0;

		margin:
			0
			0
			5px;

		padding: 0;

		color: var(--s13-dark);

		font-size: 11px;
		font-weight: 700;

		line-height: 1.3;

		letter-spacing: -0.015em;

		white-space: normal;

		word-break: normal;

		overflow-wrap: break-word;

		overflow: visible;

		text-overflow: clip;
	}


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

	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col > .col-inner > p {
		display: block;

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

		min-width: 0;

		margin: 0;

		padding: 0;

		color: var(--s13-muted);

		font-size: 8.7px;
		font-weight: 500;

		line-height: 1.45;

		white-space: normal;

		word-break: normal;

		overflow-wrap: break-word;

		overflow: visible;

		text-overflow: clip;

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


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

	.ladi-section13 .thuong-hieu {
		margin-top: 24px;
	}


	.ladi-section13
	.kht-s13-logo-track > .col,
	.ladi-section13
	.thuong-hieu > .col {
		flex-basis: 135px;

		width: 135px;
		max-width: 135px;
	}


	.ladi-section13
	.thuong-hieu .col-inner {
		height: 68px;

		padding: 13px;

		border-radius: 11px;
	}


	.ladi-section13
	.thuong-hieu img {
		max-height: 33px;
	}

}


/* =========================================================
   23. MOBILE NHỎ
========================================================= */

@media (max-width: 390px) {

	/* Container nhỏ hơn */
	.ladi-section13 .tieu-de,
	.ladi-section13 .du-an,
	.ladi-section13 .thuong-hieu {
		width:
			calc(
				100% - 14px
			);
	}


	/* Giữ gutter 9px đều cho cả 3 ô */
	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col > .col-inner {
		min-height: 110px;

		padding:
			27px
			9px
			10px;
	}


	/* Ô đầu dùng cùng gutter */
	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col:first-child > .col-inner {
		padding-left: 9px;
	}


	/* Thanh xanh */
	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col > .col-inner::before,
	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col:first-child
	> .col-inner::before {
		left: 9px;

		width: 16px;
	}


	/* Heading */
	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col > .col-inner > h3 {
		font-size: 10px;
	}


	/* Description */
	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col > .col-inner > p {
		font-size: 8px;

		line-height: 1.42;
	}

}


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

@media (max-width: 350px) {

	/* Giữ 3 ô nhưng giảm gutter đồng đều */
	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col > .col-inner {
		min-height: 108px;

		padding:
			26px
			7px
			9px;
	}


	/* Ô đầu cùng khoảng cách */
	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col:first-child > .col-inner {
		padding-left: 7px;
	}


	/* Accent */
	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col > .col-inner::before,
	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col:first-child
	> .col-inner::before {
		left: 7px;
	}


	/* Heading */
	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col > .col-inner > h3 {
		font-size: 9px;
	}


	/* Description */
	.ladi-section13
	.du-an
	.thong-tin.row.row-small
	> .col > .col-inner > p {
		font-size: 7.5px;
	}

}


/* =========================================================
   25. ACCESSIBILITY
========================================================= */

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

	.ladi-section13 *,
	.ladi-section13 *::before,
	.ladi-section13 *::after {
		transition-duration: 0.01ms;
	}

}