/* =========================================================
KEHETO BANNER SLIDER
Chức năng:
- Giữ nguyên HTML Flatsome hiện tại.
- Cố định chiều cao banner ngay từ lần render đầu tiên.
- Ngăn section phía dưới nhảy lên khi Flickity khởi tạo.
- Tương thích với Flickity và GSAP.
- Không tự thêm nội dung chữ bằng CSS.
========================================================= */
.keheto-banner {
--keheto-banner-primary: #20b875;
--keheto-banner-primary-dark: #117d50;
--keheto-banner-heading: #163d2e;
--keheto-banner-text: #56645f;
--keheto-banner-white: #ffffff;
--keheto-banner-border: rgba(255, 255, 255, 0.72);
--keheto-banner-card: rgba(255, 255, 255, 0.9);
--keheto-banner-shadow:
0 24px 65px rgba(8, 53, 34, 0.16);
/*
* Chiều cao chung của banner desktop.
* Biến này được thay đổi tại từng breakpoint bên dưới.
*/
--keheto-banner-height:
clamp(680px, 41vw, 780px);
position: relative;
width: 100%;
min-height: var(--keheto-banner-height);
overflow: hidden;
isolation: isolate;
background-color: #edf6f1;
}
/* =========================================================
1. KHUNG SLIDER FLICKITY
Giữ sẵn chiều cao ngay cả khi Flickity chưa khởi tạo.
Đây là phần xử lý lỗi trang nhảy xuống section 2.
========================================================= */
.keheto-banner > .slider {
position: relative;
width: 100%;
min-height: var(--keheto-banner-height);
overflow: hidden;
background-color: #edf6f1;
}
/*
* Viewport Flickity được giữ chiều cao ngay từ lần render đầu.
* Không để viewport tạm thời có chiều cao bằng 0.
*/
.keheto-banner .flickity-viewport {
min-height: var(--keheto-banner-height);
overflow: hidden;
/*
* Không animate height khi Flickity vừa khởi tạo.
* Transition height trước đây gây layout shift.
*/
transition: none;
}
/* Track Flickity luôn phủ đủ chiều cao banner */
.keheto-banner .flickity-slider {
height: 100%;
min-height: var(--keheto-banner-height);
}
/* =========================================================
2. CHIỀU CAO TỪNG BANNER
Cần giữ important vì UX Builder tạo padding-top inline.
========================================================= */
.keheto-banner .banner {
position: relative;
width: 100%;
min-height: var(--keheto-banner-height);
/*
* Giữ đúng cấu trúc tỷ lệ banner của Flatsome.
* Chỉ sử dụng important tại thuộc tính cần ghi đè inline.
*/
padding-top: var(--keheto-banner-height) !important;
overflow: hidden;
background-color: #edf6f1;
}
/* =========================================================
3. ẢNH NỀN SLIDER
========================================================= */
.keheto-banner .banner-bg {
position: absolute;
inset: 0;
overflow: hidden;
background-color: #edf6f1;
}
/* Ảnh nền phủ toàn bộ banner */
.keheto-banner .banner-bg > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center center;
transform-origin: center center;
backface-visibility: hidden;
will-change: transform;
}
/* Ẩn overlay mặc định của Flatsome */
.keheto-banner .banner-bg > .overlay {
opacity: 0;
}
/* Tạo lớp phủ nhẹ giúp card nội dung dễ đọc */
.keheto-banner .banner-bg::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(6, 28, 19, 0.02) 0%,
rgba(6, 28, 19, 0.02) 40%,
rgba(6, 28, 19, 0.1) 58%,
rgba(6, 28, 19, 0.36) 100%
),
linear-gradient(
180deg,
rgba(0, 0, 0, 0.02) 0%,
rgba(0, 0, 0, 0) 55%,
rgba(0, 0, 0, 0.12) 100%
);
}
/* =========================================================
4. KHUNG CHỨA LAYER
========================================================= */
.keheto-banner .banner-layers {
position: absolute;
inset: 0;
z-index: 5;
width: 100%;
max-width: 1440px;
height: 100%;
margin: 0 auto;
padding: 0 32px;
pointer-events: none;
}
/* Cho phép tương tác với nội dung và button */
.keheto-banner .text-box,
.keheto-banner .text-box a,
.keheto-banner .text-box button {
pointer-events: auto;
}
/* =========================================================
5. VỊ TRÍ VÀ KÍCH THƯỚC TEXT BOX DESKTOP
========================================================= */
.keheto-banner .banner-layer.text-box {
top: 50%;
right: clamp(50px, 6vw, 110px);
left: auto;
width: min(440px, 34vw) !important;
max-width: 440px;
transform: translateY(-50%);
}
/* =========================================================
6. CARD NỘI DUNG
========================================================= */
.keheto-banner .text-box-content {
position: relative;
width: 100%;
padding: 30px;
overflow: hidden;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.94) 0%,
rgba(255, 255, 255, 0.84) 100%
);
border: 1px solid var(--keheto-banner-border);
border-radius: 22px;
box-shadow:
var(--keheto-banner-shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
transform-origin: center center;
will-change:
transform,
opacity;
}
/* Thanh màu xanh phía trên card */
.keheto-banner .text-box-content::before {
content: "";
position: absolute;
top: 0;
left: 30px;
width: 62px;
height: 4px;
border-radius: 0 0 8px 8px;
background:
linear-gradient(
90deg,
var(--keheto-banner-primary),
#82dfb3
);
}
/* Họa tiết trang trí góc phải */
.keheto-banner .text-box-content::after {
content: "";
position: absolute;
top: -68px;
right: -68px;
width: 160px;
height: 160px;
pointer-events: none;
border: 1px solid rgba(32, 184, 117, 0.12);
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(32, 184, 117, 0.08) 0%,
rgba(32, 184, 117, 0) 70%
);
}
/* =========================================================
7. KHUNG TEXT
========================================================= */
.keheto-banner .text-inner {
position: relative;
z-index: 2;
width: 100%;
text-align: left;
}
/* Không tạo thêm nội dung chữ bằng CSS */
.keheto-banner .text-inner::before,
.keheto-banner .text-inner::after {
content: none;
display: none;
}
/* =========================================================
8. TIÊU ĐỀ CHÍNH
========================================================= */
.keheto-banner .text-inner h2 {
width: 100%;
margin: 0 0 14px;
padding: 0;
color: var(--keheto-banner-heading);
font-family:
"Be Vietnam Pro",
Arial,
sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.45;
letter-spacing: 0;
text-align: left;
text-transform: uppercase;
overflow-wrap: break-word;
word-break: normal;
}
/* Giữ strong theo đúng font tiêu đề */
.keheto-banner .text-inner h2 strong {
color: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
/* Không tạo đường trang trí dưới tiêu đề */
.keheto-banner .text-inner h2::after {
content: none;
display: none;
}
/* =========================================================
9. TIÊU ĐỀ PHỤ
========================================================= */
.keheto-banner .text-inner h3 {
width: 100%;
margin: 0 0 10px;
padding: 0;
color: var(--keheto-banner-primary-dark);
font-size: 14px;
font-weight: 650;
line-height: 1.6;
letter-spacing: 0;
text-align: left;
text-transform: none;
overflow-wrap: break-word;
}
/* =========================================================
10. NỘI DUNG MÔ TẢ
========================================================= */
.keheto-banner .text-inner p {
width: 100%;
max-width: none;
margin: 0 0 20px;
padding: 0;
display: block;
color: var(--keheto-banner-text);
font-size: 14px;
font-weight: 400;
line-height: 1.75;
letter-spacing: 0;
text-align: justify;
text-justify: inter-word;
overflow: visible;
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
-webkit-hyphens: auto;
-webkit-line-clamp: unset;
-webkit-box-orient: initial;
}
/* =========================================================
11. BUTTON CTA
========================================================= */
.keheto-banner .text-inner .button {
min-height: 44px;
margin: 5px 7px 0 0;
padding: 0 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 10px;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.02em;
text-transform: uppercase;
transition:
color 0.25s ease,
background-color 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease,
box-shadow 0.25s ease;
}
/* Button chính */
.keheto-banner .text-inner .button.primary:not(.is-outline) {
color: #ffffff;
background:
linear-gradient(
135deg,
var(--keheto-banner-primary) 0%,
var(--keheto-banner-primary-dark) 100%
);
box-shadow:
0 10px 22px rgba(17, 125, 80, 0.24);
}
/* Biểu tượng mũi tên của button chính */
.keheto-banner .text-inner .button.primary:not(.is-outline)::after {
content: "→";
margin-left: 9px;
font-size: 15px;
line-height: 1;
transition: transform 0.25s ease;
}
/* Button phụ */
.keheto-banner .text-inner .button.is-outline {
color: var(--keheto-banner-primary-dark);
background: rgba(255, 255, 255, 0.5);
border-color: rgba(17, 125, 80, 0.25);
}
/* Hiệu ứng hover button */
@media (hover: hover) {
.keheto-banner .text-inner .button.primary:not(.is-outline):hover {
color: #ffffff;
transform: translateY(-2px);
box-shadow:
0 14px 28px rgba(17, 125, 80, 0.3);
}
.keheto-banner .text-inner .button.primary:not(.is-outline):hover::after {
transform: translateX(3px);
}
.keheto-banner .text-inner .button.is-outline:hover {
color: #ffffff;
background: var(--keheto-banner-primary-dark);
border-color: var(--keheto-banner-primary-dark);
transform: translateY(-2px);
}
}
/* Hỗ trợ bàn phím */
.keheto-banner .text-inner .button:focus-visible {
outline: 3px solid rgba(32, 184, 117, 0.25);
outline-offset: 3px;
}
/* =========================================================
12. NÚT PREVIOUS VÀ NEXT
========================================================= */
.keheto-banner .flickity-prev-next-button {
z-index: 20;
width: 48px;
height: 48px;
margin: 0;
color: var(--keheto-banner-heading);
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(255, 255, 255, 0.65);
border-radius: 14px;
box-shadow:
0 12px 30px rgba(10, 50, 33, 0.14);
opacity: 1;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition:
color 0.25s ease,
background-color 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease,
box-shadow 0.25s ease;
}
/* Vị trí nút Previous */
.keheto-banner .flickity-prev-next-button.previous {
left: 24px;
}
/* Vị trí nút Next */
.keheto-banner .flickity-prev-next-button.next {
right: 24px;
}
/* Kích thước biểu tượng mũi tên */
.keheto-banner .flickity-prev-next-button .flickity-button-icon {
top: 34%;
left: 34%;
width: 32%;
height: 32%;
}
/* Hover nút điều hướng */
@media (hover: hover) {
.keheto-banner .flickity-prev-next-button:hover {
color: #ffffff;
background: var(--keheto-banner-primary-dark);
border-color: var(--keheto-banner-primary-dark);
transform: translateY(-50%) scale(1.05);
box-shadow:
0 16px 36px rgba(17, 125, 80, 0.26);
}
}
/* Trạng thái nút không hoạt động */
.keheto-banner .flickity-prev-next-button:disabled {
opacity: 0.35;
}
/* =========================================================
13. DOTS ĐIỀU HƯỚNG
========================================================= */
.keheto-banner .flickity-page-dots {
position: absolute;
right: auto;
bottom: 22px;
left: 50%;
z-index: 20;
width: auto;
margin: 0;
padding: 9px 13px;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 999px;
background: rgba(255, 255, 255, 0.7);
box-shadow:
0 10px 26px rgba(10, 50, 33, 0.12);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transform: translateX(-50%);
}
/* Dot mặc định */
.keheto-banner .flickity-page-dots .dot {
width: 7px;
height: 7px;
margin: 0;
border: 0;
border-radius: 999px;
background: rgba(22, 61, 46, 0.25);
opacity: 1;
transition:
width 0.3s ease,
background-color 0.3s ease;
}
/* Dot đang được chọn */
.keheto-banner .flickity-page-dots .dot.is-selected {
width: 27px;
background:
linear-gradient(
90deg,
var(--keheto-banner-primary),
var(--keheto-banner-primary-dark)
);
}
/* =========================================================
14. BỘ ĐẾM VÀ PROGRESS DO JAVASCRIPT TẠO
========================================================= */
.keheto-banner__status {
position: absolute;
right: 26px;
bottom: 22px;
z-index: 21;
min-width: 170px;
padding: 10px 13px;
display: flex;
align-items: center;
gap: 10px;
pointer-events: none;
color: var(--keheto-banner-heading);
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 13px;
box-shadow:
0 10px 26px rgba(10, 50, 33, 0.12);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Số slide hiện tại */
.keheto-banner__current {
min-width: 22px;
color: var(--keheto-banner-primary-dark);
font-size: 13px;
font-weight: 750;
line-height: 1;
}
/* Tổng số slide */
.keheto-banner__total {
min-width: 22px;
color: rgba(22, 61, 46, 0.45);
font-size: 11px;
font-weight: 650;
line-height: 1;
}
/* Khung thanh tiến trình */
.keheto-banner__progress {
position: relative;
width: 82px;
height: 3px;
overflow: hidden;
border-radius: 999px;
background: rgba(22, 61, 46, 0.12);
}
/* Phần chuyển động của thanh tiến trình */
.keheto-banner__progress-fill {
position: absolute;
inset: 0;
display: block;
border-radius: inherit;
background:
linear-gradient(
90deg,
var(--keheto-banner-primary),
var(--keheto-banner-primary-dark)
);
transform: scaleX(0);
transform-origin: left center;
}
/* =========================================================
15. TRẠNG THÁI KẾT NỐI VỚI GSAP
========================================================= */
/* Slide đầu hiển thị trước khi JS hoàn tất */
.keheto-banner:not(.keheto-gsap-ready)
.is-selected
.text-box-content {
opacity: 1;
}
/* Ẩn card của slide không được chọn */
.keheto-banner.keheto-gsap-ready
.banner:not(.is-selected)
.text-box-content {
opacity: 0;
}
/* =========================================================
16. RESPONSIVE LAPTOP
========================================================= */
@media screen and (max-width: 1199px) {
/*
* Đồng bộ chiều cao cho:
* section, slider, viewport, track và banner.
*/
.keheto-banner {
--keheto-banner-height: 620px;
}
/* Thu nhỏ card và đưa gần mép phải */
.keheto-banner .banner-layer.text-box {
right: 55px;
width: min(400px, 38vw) !important;
max-width: 400px;
}
/* Giảm padding card */
.keheto-banner .text-box-content {
padding: 26px;
border-radius: 20px;
}
/* Đồng bộ vị trí thanh xanh */
.keheto-banner .text-box-content::before {
left: 26px;
}
/* Giữ nguyên kích thước chữ */
.keheto-banner .text-inner h2 {
font-size: 20px;
}
.keheto-banner .text-inner h3,
.keheto-banner .text-inner p {
font-size: 14px;
}
/* Thu nhỏ nút chuyển slide */
.keheto-banner .flickity-prev-next-button {
width: 44px;
height: 44px;
}
.keheto-banner .flickity-prev-next-button.previous {
left: 16px;
}
.keheto-banner .flickity-prev-next-button.next {
right: 16px;
}
}
/* =========================================================
17. RESPONSIVE TABLET
========================================================= */
@media screen and (max-width: 849px) {
/*
* Tablet cần chiều cao lớn hơn
* để card nội dung nằm phía dưới.
*/
.keheto-banner {
--keheto-banner-height: 690px;
}
/* Điều chỉnh vùng ảnh ưu tiên */
.keheto-banner .banner-bg > img {
object-position: 42% center;
}
/* Gradient chuyển thành hướng từ dưới lên */
.keheto-banner .banner-bg::after {
background:
linear-gradient(
180deg,
rgba(5, 25, 17, 0.02) 0%,
rgba(5, 25, 17, 0.08) 38%,
rgba(5, 25, 17, 0.48) 100%
);
}
/* Thu khoảng cách hai bên */
.keheto-banner .banner-layers {
padding-right: 18px;
padding-left: 18px;
}
/* Đưa card xuống gần cuối banner */
.keheto-banner .banner-layer.text-box {
top: auto;
right: auto;
bottom: 84px;
left: 50%;
width: min(580px, calc(100% - 36px)) !important;
max-width: 580px;
transform: translateX(-50%);
}
/* Card tablet */
.keheto-banner .text-box-content {
padding: 24px 22px 22px;
border-radius: 18px;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.95),
rgba(255, 255, 255, 0.88)
);
}
/* Thanh xanh card tablet */
.keheto-banner .text-box-content::before {
left: 22px;
width: 54px;
}
/* Tiêu đề chính */
.keheto-banner .text-inner h2 {
margin-bottom: 11px;
font-size: 20px;
line-height: 1.4;
}
/* Tiêu đề phụ */
.keheto-banner .text-inner h3 {
margin-bottom: 8px;
font-size: 14px;
line-height: 1.55;
}
/* Nội dung mô tả */
.keheto-banner .text-inner p {
margin-bottom: 16px;
font-size: 14px;
line-height: 1.65;
text-align: justify;
text-justify: inter-word;
}
/* Button tablet */
.keheto-banner .text-inner .button {
min-height: 42px;
padding-right: 15px;
padding-left: 15px;
font-size: 11px;
}
/* Đưa nút điều hướng xuống dưới */
.keheto-banner .flickity-prev-next-button {
top: auto;
bottom: 17px;
width: 40px;
height: 40px;
transform: none;
border-radius: 11px;
}
.keheto-banner .flickity-prev-next-button.previous {
left: 12px;
}
.keheto-banner .flickity-prev-next-button.next {
right: 12px;
}
/* Không dịch dọc nút khi hover trên tablet */
@media (hover: hover) {
.keheto-banner .flickity-prev-next-button:hover {
transform: scale(1.04);
}
}
/* Đặt dots ở giữa phía dưới */
.keheto-banner .flickity-page-dots {
bottom: 17px;
padding: 8px 11px;
}
/* Ẩn bộ đếm trên tablet */
.keheto-banner__status {
display: none;
}
}
/* =========================================================
18. RESPONSIVE MOBILE - ẢNH ĐẦY ĐỦ, KHÔNG KHOẢNG TRẮNG
Chức năng:
- Chỉ thay đổi giao diện dưới 550px.
- Chiều cao mỗi slide được JavaScript tính theo tỷ lệ ảnh thật.
- Ảnh hiển thị đầy đủ chiều ngang, không crop hai bên.
- Flickity viewport co đúng theo slide đang chọn.
- Dots nằm đè nhẹ ở đáy ảnh, không tạo vùng trắng riêng.
- Desktop và tablet giữ nguyên toàn bộ giao diện hiện tại.
========================================================= */
@media screen and (max-width: 549px) {
/*
* Giá trị dự phòng trước khi JavaScript đọc được tỷ lệ ảnh.
* Sau khi ảnh sẵn sàng, biến này được cập nhật theo từng slide.
*/
.keheto-banner {
--keheto-mobile-selected-height: 203px;
width: 100%;
height: var(--keheto-mobile-selected-height);
min-height: var(--keheto-mobile-selected-height);
overflow: hidden;
background-color: #edf6f1;
transition: height 0.22s ease;
}
/* Slider co theo chiều cao ảnh đang được chọn */
.keheto-banner > .slider {
width: 100%;
height: var(--keheto-mobile-selected-height);
min-height: var(--keheto-mobile-selected-height);
overflow: hidden;
background-color: #edf6f1;
transition: height 0.22s ease;
}
/*
* Ghi đè chiều cao inline do Flickity tạo.
* Chỉ dùng important tại thuộc tính phải thắng inline style.
*/
.keheto-banner .flickity-viewport {
width: 100%;
height: var(--keheto-mobile-selected-height) !important;
min-height: var(--keheto-mobile-selected-height);
overflow: hidden;
transition: height 0.22s ease;
}
/* Track phủ đúng chiều cao viewport hiện tại */
.keheto-banner .flickity-slider {
height: 100%;
min-height: 100%;
}
/*
* Mỗi slide có chiều cao riêng theo tỷ lệ ảnh thật.
* JavaScript gán --keheto-mobile-cell-height cho từng .banner.
*/
.keheto-banner .banner {
width: 100%;
height: var(
--keheto-mobile-cell-height,
var(--keheto-mobile-selected-height)
);
min-height: var(
--keheto-mobile-cell-height,
var(--keheto-mobile-selected-height)
);
padding-top: 0 !important;
overflow: hidden;
background-color: #edf6f1;
}
/* Các lớp bên trong phủ trọn slide */
.keheto-banner .banner-inner,
.keheto-banner .banner-bg,
.keheto-banner .banner-layers {
width: 100%;
height: 100%;
min-height: 0;
}
/* Khung ảnh không còn tách thành một vùng thấp cố định */
.keheto-banner .banner-bg {
position: absolute;
inset: 0;
overflow: hidden;
background-color: #edf6f1;
}
/*
* Ảnh hiển thị đầy đủ theo tỷ lệ gốc.
* Vì chiều cao slide đã khớp tỷ lệ ảnh nên không còn khoảng trống.
*/
.keheto-banner .banner-bg > img {
position: absolute;
inset: 0;
display: block;
width: 100%;
max-width: none;
height: 100%;
object-fit: contain;
object-position: 50% 50%;
background-color: #edf6f1;
image-rendering: auto;
transform-origin: center center;
}
/* Gradient rất nhẹ để không làm tối ảnh trên điện thoại */
.keheto-banner .banner-bg::after {
background:
linear-gradient(
180deg,
rgba(5, 25, 17, 0) 0%,
rgba(5, 25, 17, 0.01) 70%,
rgba(5, 25, 17, 0.1) 100%
);
}
/* Giữ layer nội dung đúng trong khung ảnh */
.keheto-banner .banner-layers {
padding-right: 12px;
padding-left: 12px;
}
/*
* Nếu text box được bật trên mobile, nó hiển thị dạng overlay gọn.
* Các text box đang có class hidden vẫn giữ nguyên trạng thái ẩn.
*/
.keheto-banner .banner-layer.text-box {
top: auto;
right: auto;
bottom: 47px;
left: 50%;
width: calc(100% - 30px) !important;
max-width: 390px;
transform: translateX(-50%);
}
/* Card overlay mobile */
.keheto-banner .text-box-content {
padding: 13px 13px 11px;
border-radius: 12px;
}
/* Thanh trang trí trên card */
.keheto-banner .text-box-content::before {
left: 13px;
width: 36px;
height: 3px;
}
/* Họa tiết trang trí góc card */
.keheto-banner .text-box-content::after {
top: -50px;
right: -50px;
width: 104px;
height: 104px;
}
/* Tiêu đề chính mobile */
.keheto-banner .text-inner h2 {
margin-bottom: 6px;
font-size: 15px;
font-weight: 700;
line-height: 1.34;
}
/* Tiêu đề phụ mobile */
.keheto-banner .text-inner h3 {
margin-bottom: 4px;
font-size: 11px;
line-height: 1.42;
}
/* Mô tả mobile */
.keheto-banner .text-inner p {
margin-bottom: 8px;
display: block;
overflow: visible;
font-size: 11px;
line-height: 1.42;
text-align: left;
text-justify: auto;
-webkit-line-clamp: unset;
-webkit-box-orient: initial;
}
/* Nút CTA mobile */
.keheto-banner .text-inner .button {
min-height: 32px;
margin-top: 2px;
margin-right: 3px;
padding-right: 10px;
padding-left: 10px;
font-size: 8.5px;
border-radius: 8px;
}
/* Mũi tên trong nút chính */
.keheto-banner
.text-inner
.button.primary:not(.is-outline)::after {
margin-left: 5px;
font-size: 11px;
}
/* Nút chuyển slide nếu Flatsome bật lại */
.keheto-banner .flickity-prev-next-button {
top: 50%;
bottom: auto;
width: 34px;
height: 34px;
transform: translateY(-50%);
border-radius: 9px;
}
.keheto-banner .flickity-prev-next-button.previous {
left: 8px;
}
.keheto-banner .flickity-prev-next-button.next {
right: 8px;
}
/* Dots nằm ngay trên đáy ảnh */
.keheto-banner .flickity-page-dots {
bottom: 8px;
padding: 6px 9px;
gap: 5px;
}
/* Dot chưa được chọn */
.keheto-banner .flickity-page-dots .dot {
width: 6px;
height: 6px;
}
/* Dot đang được chọn */
.keheto-banner .flickity-page-dots .dot.is-selected {
width: 22px;
}
/* Ẩn bộ đếm desktop trên điện thoại */
.keheto-banner__status {
display: none;
}
/* Đường phân cách các dải ảnh GSAP */
.keheto-banner
.keheto-slice-reveal__item::after {
border-right-color:
rgba(255, 255, 255, 0.04);
}
/* Vệt sáng GSAP mobile */
.keheto-banner
.keheto-slice-reveal__scan {
width: 22%;
filter: blur(4px);
}
}
/* =========================================================
19. MOBILE RẤT NHỎ
========================================================= */
@media screen and (max-width: 379px) {
/* Thu card overlay thêm một chút trên màn hình hẹp */
.keheto-banner .banner-layer.text-box {
bottom: 43px;
width: calc(100% - 24px) !important;
max-width: none;
}
/* Thu padding card */
.keheto-banner .text-box-content {
padding: 11px 11px 9px;
border-radius: 10px;
}
/* Đồng bộ thanh trang trí */
.keheto-banner .text-box-content::before {
left: 11px;
width: 32px;
}
/* Tiêu đề chính */
.keheto-banner .text-inner h2 {
margin-bottom: 5px;
font-size: 14px;
line-height: 1.3;
}
/* Tiêu đề phụ */
.keheto-banner .text-inner h3 {
margin-bottom: 3px;
font-size: 10px;
line-height: 1.38;
}
/* Mô tả */
.keheto-banner .text-inner p {
margin-bottom: 6px;
font-size: 10px;
line-height: 1.38;
}
/* Button */
.keheto-banner .text-inner .button {
min-height: 30px;
padding-right: 8px;
padding-left: 8px;
font-size: 8px;
}
}
/* =========================================================
20. ACCESSIBILITY
========================================================= */
@media (prefers-reduced-motion: reduce) {
/* Giảm toàn bộ chuyển động trong banner */
.keheto-banner *,
.keheto-banner *::before,
.keheto-banner *::after {
scroll-behavior: auto;
animation-duration: 0.01ms;
animation-iteration-count: 1;
transition-duration: 0.01ms;
}
/* Không transform ảnh khi giảm chuyển động */
.keheto-banner .banner-bg > img {
transform: none;
}
}
/* =========================================================
KEHETO PRECISION SLICE REVEAL
Chức năng:
- Ảnh chia thành các dải dọc.
- Dải ảnh mở xen kẽ từ trên và dưới.
- Không zoom ảnh gốc.
- Không thay đổi object-position.
========================================================= */
/* =========================================================
21. CẤU TRÚC LỚP HÌNH ẢNH
========================================================= */
/* Tạo ngữ cảnh xếp lớp riêng */
.keheto-banner .banner-bg {
isolation: isolate;
}
/* Ảnh gốc luôn nằm dưới lớp slice */
.keheto-banner .banner-bg > img {
z-index: 1;
will-change: transform;
backface-visibility: hidden;
transform: translateZ(0);
}
/* Đưa gradient lên trên lớp slice */
.keheto-banner .banner-bg::after {
z-index: 5;
}
/* =========================================================
22. KHUNG CHỨA CÁC DẢI ẢNH
========================================================= */
.keheto-banner .keheto-slice-reveal {
position: absolute;
inset: 0;
z-index: 3;
overflow: hidden;
pointer-events: none;
opacity: 0;
visibility: hidden;
perspective: 1000px;
transform-style: preserve-3d;
contain: layout paint;
}
/* Lớp nền tối dưới các dải ảnh */
.keheto-banner .keheto-slice-reveal::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(5, 31, 20, 0.2) 0%,
rgba(5, 31, 20, 0.1) 52%,
rgba(5, 31, 20, 0.22) 100%
);
}
/* =========================================================
23. TỪNG DẢI ẢNH
========================================================= */
.keheto-banner .keheto-slice-reveal__item {
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
display: block;
overflow: hidden;
pointer-events: none;
background-repeat: no-repeat;
backface-visibility: hidden;
transform-origin: center center;
will-change:
transform,
opacity,
filter;
}
/* Đường phân cách nhẹ giữa các dải */
.keheto-banner .keheto-slice-reveal__item::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-right: 1px solid rgba(255, 255, 255, 0.09);
box-shadow:
inset -8px 0 18px rgba(255, 255, 255, 0.025);
}
/* Dải cuối không có đường phân cách */
.keheto-banner
.keheto-slice-reveal__item:last-child::after {
border-right: 0;
}
/* =========================================================
24. VỆT QUÉT ÁNH SÁNG
========================================================= */
.keheto-banner .keheto-slice-reveal__scan {
position: absolute;
top: -15%;
bottom: -15%;
left: -18%;
z-index: 2;
width: 11%;
display: block;
pointer-events: none;
opacity: 0;
background:
linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.12) 26%,
rgba(201, 255, 229, 0.48) 50%,
rgba(255, 255, 255, 0.12) 74%,
rgba(255, 255, 255, 0) 100%
);
filter: blur(2px);
mix-blend-mode: screen;
transform: skewX(-13deg);
will-change:
transform,
opacity;
}
/* =========================================================
25. CARD VÀ TEXT KHI GSAP CHẠY
========================================================= */
/* Card mở theo kiểu rèm kính */
.keheto-banner .text-box-content {
transform-style: preserve-3d;
backface-visibility: hidden;
will-change:
transform,
clip-path;
}
/* Tối ưu từng nhóm text */
.keheto-banner .text-inner > h2,
.keheto-banner .text-inner > h3,
.keheto-banner .text-inner > p,
.keheto-banner .text-inner > .button {
backface-visibility: hidden;
will-change:
opacity,
transform,
filter,
clip-path;
}
/* Slide không active không hiển thị slice */
.keheto-banner.keheto-gsap-ready
.banner:not(.is-selected)
.keheto-slice-reveal {
opacity: 0;
visibility: hidden;
}
/* =========================================================
26. PRECISION SLICE - TABLET
========================================================= */
@media screen and (max-width: 849px) {
/* Giảm đường viền giữa các dải */
.keheto-banner
.keheto-slice-reveal__item::after {
border-right-color:
rgba(255, 255, 255, 0.06);
box-shadow: none;
}
/* Vệt sáng rộng hơn trên tablet */
.keheto-banner
.keheto-slice-reveal__scan {
width: 18%;
}
}
/* =========================================================
27. PRECISION SLICE - MOBILE
========================================================= */
@media screen and (max-width: 549px) {
/* Đường phân cách rất mờ trên mobile */
.keheto-banner
.keheto-slice-reveal__item::after {
border-right-color:
rgba(255, 255, 255, 0.04);
}
/* Vệt sáng nhẹ hơn trên mobile */
.keheto-banner
.keheto-slice-reveal__scan {
width: 22%;
filter: blur(4px);
}
}
/* =========================================================
28. PRECISION SLICE - ACCESSIBILITY
========================================================= */
@media (prefers-reduced-motion: reduce) {
/* Tắt lớp slice khi người dùng giảm chuyển động */
.keheto-banner .keheto-slice-reveal {
display: none;
}
/* Ảnh gốc hiển thị bình thường */
.keheto-banner .banner-bg > img {
opacity: 1;
filter: none;
}
/* Card và nội dung không sử dụng mask */
.keheto-banner .text-box-content,
.keheto-banner .text-inner > h2,
.keheto-banner .text-inner > h3,
.keheto-banner .text-inner > p,
.keheto-banner .text-inner > .button {
opacity: 1;
transform: none;
filter: none;
clip-path: none;
}
}
/* =========================================================
KEHETO - SECTION NĂNG LỰC SẢN XUẤT
Phong cách: Orbital Metrics + Production Rail
Cấu trúc mới:
1. Hàng giới thiệu + nút
2. Hàng số liệu + hình ảnh
Chỉ tác động bên trong .kht-gioi-thieu
Không sử dụng ID tự sinh của UX Builder
Không sử dụng !important
========================================================= */
.kht-gioi-thieu {
/* Màu chính KEHETO */
--kht-primary: #28cb8b;
/* Color Shade */
--kht-shade-1: #43a046;
--kht-shade-2: #3b8e3b;
--kht-shade-3: #237d31;
--kht-shade-4: #1b5e1f;
--kht-shade-5: #103e13;
/* Color Tint */
--kht-tint-1: #66bb69;
--kht-tint-2: #81c784;
--kht-tint-3: #a5d6a7;
--kht-tint-4: #c8e6c9;
--kht-tint-5: #e8f5e9;
/* Neutral */
--kht-black: #263238;
--kht-dark-grey: #4d4d4d;
--kht-grey: #717171;
--kht-light-grey: #89939e;
--kht-grey-blue: #abbed1;
--kht-silver: #f5f7fa;
--kht-white: #ffffff;
/* Màu sử dụng theo ngữ cảnh */
--kht-heading: var(--kht-shade-5);
/* --kht-body: var(--kht-dark-grey); */
--kht-muted: var(--kht-grey);
--kht-line: rgba(40, 203, 139, 0.2);
--kht-surface: rgba(255, 255, 255, 0.94);
--kht-surface-soft: rgba(255, 255, 255, 0.68);
--kht-shadow: 0 24px 60px rgba(16, 62, 19, 0.13);
/* Nền dùng đúng Neutral + Color Tint trong tài liệu KEHETO */
--kht-bg-base: #f5f7fa;
--kht-bg-white: #ffffff;
--kht-bg-tint-3: #a5d6a7;
--kht-bg-tint-4: #c8e6c9;
--kht-bg-tint-5: #e8f5e9;
position: relative;
overflow: hidden;
isolation: isolate;
background-color: var(--kht-bg-base);
}
/* Đồng bộ cách tính kích thước trong section */
.kht-gioi-thieu,
.kht-gioi-thieu * {
box-sizing: border-box;
}
/* =========================================================
NỀN SECTION KEHETO
Màu sử dụng:
- Trắng: #ffffff
- Bạc: #f5f7fa
- Xanh tint nhạt: #e8f5e9
- Xanh thương hiệu: #28cb8b
Loại bỏ:
- Màu nền xuyên từ section phía sau
- Blend mode gây lệch màu
- Filter gây ám màu
- Gradient tối hoặc ám hồng
========================================================= */
/* Nền gốc của toàn bộ section */
.kht-gioi-thieu {
position: relative;
overflow: hidden;
isolation: isolate;
background-color: var(--kht-bg-base);
background-image: none;
filter: none;
mix-blend-mode: normal;
}
/* =========================================================
NỀN SECTION KEHETO
Loại bỏ hoàn toàn vùng màu ám bên trái
========================================================= */
.section.kht-gioi-thieu > .section-bg.fill {
position: absolute;
inset: 0;
opacity: 1;
/* Nền đặc, không lấy màu từ bên ngoài */
background-color: #f5f7fa;
/*
* Chỉ giữ gradient xanh rất nhẹ ở bên phải.
* Đã xóa radial-gradient tại 8% 12% bên trái.
*/
background-image:
radial-gradient(
circle at 92% 88%,
rgba(165, 214, 167, 0.18) 0%,
rgba(200, 230, 201, 0.08) 26%,
transparent 46%
),
linear-gradient(
135deg,
#ffffff 0%,
#ffffff 30%,
#f5f7fa 66%,
#e8f5e9 100%
);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-blend-mode: normal;
mix-blend-mode: normal;
filter: none;
}
/* Lưới kỹ thuật màu xanh KEHETO rất nhẹ */
.section.kht-gioi-thieu
> .section-bg.fill::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 1;
background-image:
linear-gradient(
rgba(40, 203, 139, 0.035) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(40, 203, 139, 0.035) 1px,
transparent 1px
);
background-size: 58px 58px;
background-position: center;
filter: none;
mix-blend-mode: normal;
}
/* Vòng trang trí xanh phía sau khu vực ảnh */
.section.kht-gioi-thieu
> .section-bg.fill::after {
content: "";
position: absolute;
top: -270px;
right: -250px;
width: 690px;
height: 690px;
border: 1px solid rgba(40, 203, 139, 0.13);
border-radius: 50%;
background-color: transparent;
box-shadow:
0 0 0 72px rgba(40, 203, 139, 0.035),
0 0 0 144px rgba(232, 245, 233, 0.38);
pointer-events: none;
filter: none;
mix-blend-mode: normal;
}
/* =========================================================
KHUNG NỘI DUNG CHUNG
========================================================= */
.kht-gioi-thieu .section-content {
position: relative;
z-index: 2;
padding-top: 38px;
/* padding-bottom: 42px; */
}
/* Reset margin cho nội dung văn bản */
.kht-gioi-thieu .kht-tieude p,
.kht-gioi-thieu .kht-spngay p,
.kht-gioi-thieu .kht-congthuc p,
.kht-gioi-thieu .kht-nhamay p,
.kht-gioi-thieu .kht-xuong p,
.kht-gioi-thieu .kht-doitac p,
.kht-gioi-thieu .img1 p,
.kht-gioi-thieu .img2 p,
.kht-gioi-thieu .img3 p,
.kht-gioi-thieu .img4 p {
margin: 0;
}
/* =========================================================
KEHETO - HEADER KỸ THUẬT CHIA HAI CỘT
Phong cách: Aligned Technical Header
Cột trái:
- Nội dung giới thiệu
- Thẳng hàng với cụm số liệu
Cột phải:
- Nút xem thêm
- Thẳng hàng với ảnh và tab 01 - 04
Không thay đổi HTML
Không sử dụng !important
========================================================= */
/* =========================================================
HÀNG CHỨA TEXT VÀ NÚT
Sử dụng đúng tỷ lệ của hàng số liệu bên dưới
========================================================= */
.kht-gioi-thieu
> .section-content
> .row:first-child {
position: relative;
display: grid;
grid-template-columns:
minmax(500px, 0.94fr)
minmax(550px, 1.06fr);
align-items: end;
gap: clamp(42px, 5vw, 78px);
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto 34px;
padding: 0 0 28px;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
filter: none;
clip-path: none;
}
/* Đường kỹ thuật kết nối toàn bộ hàng trên */
.kht-gioi-thieu
> .section-content
> .row:first-child::before {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
background: linear-gradient(
90deg,
var(--kht-primary) 0%,
rgba(40, 203, 139, 0.32) 28%,
rgba(40, 203, 139, 0.12) 65%,
transparent 100%
);
pointer-events: none;
}
/* Điểm nối nằm tại vùng giao giữa hai cột */
.kht-gioi-thieu
> .section-content
> .row:first-child::after {
content: "";
position: absolute;
bottom: -5px;
left: calc(44% - 5px);
width: 11px;
height: 11px;
border: 3px solid var(--kht-white);
border-radius: 50%;
background: var(--kht-primary);
box-shadow:
0 0 0 5px rgba(40, 203, 139, 0.11);
pointer-events: none;
}
/* Hủy kích thước cột mặc định của Flatsome */
.kht-gioi-thieu
> .section-content
> .row:first-child
> .col {
position: relative;
width: 100%;
max-width: none;
flex-basis: auto;
padding: 0;
}
/* =========================================================
CỘT TRÁI - TEXT GIỚI THIỆU
========================================================= */
/* Cho phép cột text co giãn đúng trong grid */
.kht-gioi-thieu .kht-tieude {
min-width: 0;
align-self: stretch;
}
/* Khung nội dung text */
.kht-gioi-thieu .kht-tieude > .col-inner {
position: relative;
height: 100%;
display: flex;
align-items: center;
padding:
25px
24px
20px
28px;
border-left: 3px solid var(--kht-primary);
/* Đã loại bỏ lớp trắng trong suốt gây lệch màu */
background: linear-gradient(
90deg,
#e8f5e9 0%,
#f5f7fa 48%,
rgba(245, 247, 250, 0) 100%
);
}
/* Thanh kỹ thuật phía trên nội dung */
.kht-gioi-thieu
.kht-tieude
> .col-inner::before {
content: "";
position: absolute;
top: 0;
left: -3px;
width: 112px;
height: 3px;
background: linear-gradient(
90deg,
var(--kht-primary) 0%,
var(--kht-shade-1) 65%,
rgba(67, 160, 70, 0.1) 100%
);
}
/* Điểm nhỏ nằm cuối thanh kỹ thuật */
.kht-gioi-thieu
.kht-tieude
> .col-inner::after {
content: "";
position: absolute;
top: -3px;
left: 108px;
width: 9px;
height: 9px;
border: 2px solid var(--kht-white);
border-radius: 50%;
background: var(--kht-primary);
}
/* Thiết kế đoạn giới thiệu */
.kht-gioi-thieu .kht-tieude p {
max-width: 100%;
margin: 0;
padding: 0;
border: 0;
color: var(--kht-dark-grey);
font-size: clamp(15px, 1.08vw, 17px);
font-weight: 500;
line-height: 1.72;
letter-spacing: -0.008em;
text-align: left;
}
/* =========================================================
CỘT PHẢI - NÚT XEM THÊM
Nút được căn theo cạnh trái của ảnh bên dưới
========================================================= */
.kht-gioi-thieu .kht-nut {
align-self: center;
justify-self: stretch;
display: flex;
align-items: center;
min-width: 0;
margin: 0;
padding-left: 78px;
}
/* Khung chứa nút và đường nối */
.kht-gioi-thieu .kht-nut > .col-inner {
position: relative;
width: 100%;
display: flex;
align-items: center;
}
/* Đường nối từ nút kéo về phía ảnh */
.kht-gioi-thieu
.kht-nut
> .col-inner::after {
content: "";
position: absolute;
top: 50%;
left: 204px;
right: 0;
height: 1px;
background: linear-gradient(
90deg,
rgba(40, 203, 139, 0.36) 0%,
rgba(40, 203, 139, 0.08) 72%,
transparent 100%
);
transform: translateY(-50%);
}
/* Reset margin nút Flatsome */
.kht-gioi-thieu .kht-nut .button {
margin: 0;
}
/* Thiết kế nút giống ngôn ngữ tab 01 - 04 */
.kht-gioi-thieu .kht-nut .button.primary {
position: relative;
z-index: 2;
width: 190px;
min-width: 190px;
min-height: 60px;
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0;
padding:
14px
50px
14px
25px;
overflow: hidden;
border: 1px solid rgba(40, 203, 139, 0.17);
border-radius: 0;
clip-path: polygon(
0 0,
88% 0,
100% 50%,
88% 100%,
0 100%
);
background: rgba(255, 255, 255, 0.95);
box-shadow:
0 13px 28px rgba(16, 62, 19, 0.1);
color: var(--kht-shade-4);
transition:
color 0.3s ease,
background 0.3s ease,
box-shadow 0.3s ease,
transform 0.3s ease;
}
/* Thanh màu bên trái nút */
.kht-gioi-thieu
.kht-nut
.button.primary::before {
content: "";
position: absolute;
top: 15px;
bottom: 15px;
left: 0;
width: 4px;
background: linear-gradient(
180deg,
var(--kht-primary) 0%,
var(--kht-shade-2) 100%
);
}
/* Mũi tên phía đầu nhọn của nút */
.kht-gioi-thieu
.kht-nut
.button.primary::after {
content: "→";
position: absolute;
top: 50%;
right: 21px;
width: auto;
height: auto;
display: block;
border: 0;
border-radius: 0;
background: transparent;
color: var(--kht-primary);
font-size: 18px;
font-weight: 600;
line-height: 1;
transform: translateY(-50%);
transition:
color 0.3s ease,
transform 0.3s ease;
}
/* Text nút */
.kht-gioi-thieu
.kht-nut
.button.primary
span {
position: relative;
z-index: 2;
color: inherit;
font-size: 12px;
font-weight: 750;
line-height: 1;
letter-spacing: 0.055em;
white-space: nowrap;
}
/* Hover nút theo chiều ngang, đồng bộ tab ảnh */
.kht-gioi-thieu
.kht-nut
.button.primary:hover {
color: var(--kht-white);
background: linear-gradient(
135deg,
var(--kht-primary) 0%,
var(--kht-shade-1) 58%,
var(--kht-shade-3) 100%
);
box-shadow:
0 18px 34px rgba(35, 125, 49, 0.2);
transform: translateX(7px);
}
/* Đổi màu thanh khi hover */
.kht-gioi-thieu
.kht-nut
.button.primary:hover::before {
background: rgba(255, 255, 255, 0.5);
}
/* Mũi tên chuyển trắng và đi sang phải */
.kht-gioi-thieu
.kht-nut
.button.primary:hover::after {
color: var(--kht-white);
transform:
translateY(-50%)
translateX(4px);
}
/* =========================================================
TABLET NGANG
Đồng bộ đúng tỷ lệ hàng nội dung bên dưới
========================================================= */
@media (max-width: 1180px) {
.kht-gioi-thieu
> .section-content
> .row:first-child {
grid-template-columns:
minmax(450px, 0.95fr)
minmax(480px, 1.05fr);
gap: 40px;
}
/* Thu gọn khoảng cách đầu cột phải */
.kht-gioi-thieu .kht-nut {
padding-left: 58px;
}
/* Thu ngắn đường kết nối */
.kht-gioi-thieu
.kht-nut
> .col-inner::after {
left: 194px;
}
/* Thu nhỏ nút nhẹ trên tablet ngang */
.kht-gioi-thieu .kht-nut .button.primary {
width: 180px;
min-width: 180px;
}
}
/* =========================================================
TABLET DỌC
Text và nút nằm thành hai hàng nhưng vẫn cùng hệ kỹ thuật
========================================================= */
@media (max-width: 849px) {
.kht-gioi-thieu
> .section-content
> .row:first-child {
grid-template-columns: 1fr;
align-items: start;
gap: 22px;
width: calc(100% - 30px);
margin-bottom: 35px;
padding-bottom: 26px;
}
/* Cột text chiếm toàn bộ chiều rộng */
.kht-gioi-thieu .kht-tieude > .col-inner {
padding:
24px
22px
22px
27px;
}
/* Nút chuyển về bên trái */
.kht-gioi-thieu .kht-nut {
justify-self: start;
width: 100%;
padding-left: 27px;
}
/* Đường nối kéo dài sau nút */
.kht-gioi-thieu
.kht-nut
> .col-inner::after {
left: 196px;
}
.kht-gioi-thieu
> .section-content
> .row:first-child::after {
left: 62%;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 549px) {
.kht-gioi-thieu
> .section-content
> .row:first-child {
gap: 18px;
margin-bottom: 30px;
}
/* Thu gọn khoảng cách nội dung */
.kht-gioi-thieu .kht-tieude > .col-inner {
padding:
21px
12px
18px
19px;
border-left-width: 2px;
}
/* Thu ngắn thanh kỹ thuật phía trên */
.kht-gioi-thieu
.kht-tieude
> .col-inner::before {
left: -2px;
width: 84px;
height: 2px;
}
/* Điều chỉnh điểm tròn cuối thanh */
.kht-gioi-thieu
.kht-tieude
> .col-inner::after {
top: -3px;
left: 79px;
width: 8px;
height: 8px;
}
/* Text dễ đọc trên mobile */
.kht-gioi-thieu .kht-tieude p {
font-size: 14px;
line-height: 1.65;
}
/* Nút căn theo mép text */
.kht-gioi-thieu .kht-nut {
padding-left: 19px;
}
/* Thu nhỏ nút */
.kht-gioi-thieu .kht-nut .button.primary {
width: 158px;
min-width: 158px;
min-height: 52px;
padding:
12px
43px
12px
19px;
}
/* Thu ngắn đường phía sau nút */
.kht-gioi-thieu
.kht-nut
> .col-inner::after {
left: 172px;
}
/* Thu nhỏ text nút */
.kht-gioi-thieu
.kht-nut
.button.primary
span {
font-size: 11px;
}
/* Thu nhỏ mũi tên */
.kht-gioi-thieu
.kht-nut
.button.primary::after {
right: 17px;
font-size: 16px;
}
/* Thu gọn thanh màu bên trái nút */
.kht-gioi-thieu
.kht-nut
.button.primary::before {
top: 13px;
bottom: 13px;
width: 3px;
}
}
/* =========================================================
HÀNG SỐ LIỆU + HÌNH ẢNH
Selector .row.row-small giúp không ảnh hưởng hàng giới thiệu
========================================================= */
.kht-gioi-thieu
> .section-content
> .row.row-small {
display: grid;
grid-template-columns:
minmax(500px, 0.94fr)
minmax(550px, 1.06fr);
align-items: stretch;
gap: clamp(42px, 5vw, 78px);
width: calc(100% - 40px);
max-width: 1320px;
margin-right: auto;
margin-left: auto;
}
/* Hủy width 50% mặc định của Flatsome */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col {
width: 100%;
max-width: none;
flex-basis: auto;
padding: 0;
}
/* =========================================================
CỘT TRÁI - HỆ THỐNG VÒNG SỐ LIỆU
========================================================= */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner {
position: relative;
min-height: 630px;
}
/* Loại bỏ margin âm của row lồng trong Flatsome */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row {
width: 100%;
margin: 0;
}
/* Đưa hàng chứa số chính vào giữa cột */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:first-child {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* Hủy padding cột chứa số liệu chính */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:first-child
> .col {
width: 100%;
max-width: none;
padding: 0;
}
/* Căn vòng số liệu vào giữa */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:first-child
> .col
> .col-inner {
display: flex;
justify-content: center;
}
/* =========================================================
VÒNG TRÒN SỐ LIỆU CHÍNH
========================================================= */
.kht-gioi-thieu .kht-spngay {
position: relative;
z-index: 3;
width: 360px;
height: 360px;
display: grid;
place-items: center;
padding: 42px;
border: 1px solid rgba(40, 203, 139, 0.2);
border-radius: 50%;
text-align: center;
background:
radial-gradient(
circle at 34% 28%,
rgba(165, 214, 167, 0.2),
transparent 40%
),
rgba(255, 255, 255, 0.94);
box-shadow:
0 30px 70px rgba(16, 62, 19, 0.13),
inset 0 0 0 12px rgba(40, 203, 139, 0.035);
backdrop-filter: blur(10px);
}
/* Nội dung số nằm trên vòng quỹ đạo */
.kht-gioi-thieu .kht-spngay p {
position: relative;
z-index: 4;
}
/* Style chung cho vòng quỹ đạo do JavaScript tạo */
.kht-gioi-thieu .kht-orbit-ring {
position: absolute;
z-index: 1;
border-radius: 50%;
pointer-events: none;
}
/* Vòng quỹ đạo ngoài */
.kht-gioi-thieu .kht-orbit-ring-a {
inset: -34px;
border: 1px dashed rgba(40, 203, 139, 0.32);
}
/* Điểm sáng chạy theo vòng ngoài */
.kht-gioi-thieu .kht-orbit-ring-a::before {
content: "";
position: absolute;
top: 50%;
left: -5px;
width: 11px;
height: 11px;
border: 3px solid var(--kht-white);
border-radius: 50%;
background: var(--kht-primary);
box-shadow: 0 0 0 6px rgba(40, 203, 139, 0.14);
}
/* Vòng quỹ đạo bên trong */
.kht-gioi-thieu .kht-orbit-ring-b {
inset: 17px;
border: 1px solid rgba(67, 160, 70, 0.16);
}
/* Hai cung màu chuyển động bên trong */
.kht-gioi-thieu .kht-orbit-ring-b::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 50%;
border-top: 3px solid var(--kht-primary);
border-right: 3px solid transparent;
border-bottom: 3px solid var(--kht-shade-2);
border-left: 3px solid transparent;
}
/* =========================================================
SỐ + ĐƠN VỊ
Dấu + và m2 nằm chính giữa theo chiều cao số
========================================================= */
.kht-gioi-thieu .kht-stat-number-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
max-width: 100%;
overflow: visible;
line-height: 1;
flex-wrap: nowrap;
}
/* Số chính được tăng độ tương phản và giữ nét rõ */
.kht-gioi-thieu .kht-spngay .kht-stat-number {
display: inline-block;
overflow: visible;
color: #0b3d1d;
font-size: clamp(54px, 5vw, 74px);
font-weight: 900;
line-height: 1.04;
letter-spacing: -0.045em;
white-space: nowrap;
opacity: 1;
text-shadow: none;
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
/* Nhãn nằm dưới số chính, tăng độ đậm để không chìm vào nền */
.kht-gioi-thieu .kht-spngay .kht-stat-label {
display: block;
max-width: 220px;
margin: 18px auto 0;
color: #263238;
font-size: 16px;
font-weight: 700;
line-height: 1.5;
opacity: 1;
text-shadow: none;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
/* Dấu cộng và m2 được căn giữa theo số và hiển thị rõ nét */
.kht-gioi-thieu .kht-stat-unit {
display: inline-flex;
align-self: center;
align-items: center;
justify-content: center;
padding: 0;
color: #1b5e1f;
font-size: 20px;
font-weight: 900;
line-height: 1;
white-space: nowrap;
opacity: 1;
text-shadow: none;
transform: translateY(0);
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
/* =========================================================
BỐN THÔNG SỐ BAO QUANH VÒNG TRÒN
Phong cách mới: Compact Bracket Metric
Thay đổi giao diện:
- Card thấp và gọn hơn, bỏ nền chấm và khối đơn vị lớn.
- Con số và đơn vị nằm cùng hàng, đơn vị ở dạng chỉ số nhỏ.
- Nhãn mô tả được ngăn bằng một đường mảnh.
- Card trái và phải dùng thanh cạnh đối xứng.
- Card được đưa gần vòng tròn hơn nhưng vẫn không che quỹ đạo.
========================================================= */
/* Hàng chứa bốn card trở thành vùng định vị tuyệt đối */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child {
position: absolute;
inset: 0;
z-index: 6;
display: block;
pointer-events: none;
}
/* Hủy kích thước cột mặc định của Flatsome */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col {
position: absolute;
z-index: 7;
width: 168px;
max-width: none;
padding: 0;
pointer-events: auto;
}
/*
* Card Công thức ở bên trái được đưa gần vòng tròn hơn.
* Card trái cao hơn card phải để tạo nhịp bố cục lệch tầng.
*/
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(1) {
top: 62px;
left: 78px;
}
/*
* Card Nhà máy bên phải thấp hơn card Công thức một chút.
* Khoảng cách ngang được thu lại để card gần vòng tròn hơn.
*/
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2) {
top: 108px;
right: 28px;
}
/*
* Card Nhà xưởng bên trái được nâng cao hơn card Đối tác.
* Vị trí mới tiếp tục giữ card gần vòng tròn trung tâm.
*/
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(3) {
bottom: 106px;
left: 38px;
}
/*
* Card Đối tác bên phải thấp hơn card Nhà xưởng một chút.
* Tạo bố cục bên trái cao, bên phải thấp như yêu cầu.
*/
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(4) {
right: 72px;
bottom: 56px;
}
/* Khung chung cho bốn card số liệu */
.kht-gioi-thieu .kht-congthuc,
.kht-gioi-thieu .kht-nhamay,
.kht-gioi-thieu .kht-xuong,
.kht-gioi-thieu .kht-doitac {
position: relative;
z-index: 8;
min-height: 90px;
padding: 11px 13px 10px;
overflow: visible;
isolation: isolate;
border: 1px solid rgba(35, 125, 49, 0.16);
border-radius: 11px;
background: rgba(255, 255, 255, 0.97);
box-shadow:
0 12px 28px rgba(16, 62, 19, 0.11),
0 3px 8px rgba(40, 203, 139, 0.06);
transition:
transform 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
}
/* Hai card bên trái dùng thanh nhấn ở cạnh trái */
.kht-gioi-thieu .kht-congthuc,
.kht-gioi-thieu .kht-xuong {
border-left: 3px solid var(--kht-primary);
}
/* Hai card bên phải dùng thanh nhấn ở cạnh phải */
.kht-gioi-thieu .kht-nhamay,
.kht-gioi-thieu .kht-doitac {
border-right: 3px solid var(--kht-primary);
}
/* Điểm kỹ thuật nhỏ của hai card bên trái */
.kht-gioi-thieu .kht-congthuc::before,
.kht-gioi-thieu .kht-xuong::before {
content: "";
position: absolute;
top: 11px;
left: -5px;
width: 7px;
height: 7px;
border: 2px solid var(--kht-white);
border-radius: 2px;
background: var(--kht-primary);
box-shadow: 0 0 0 3px rgba(40, 203, 139, 0.11);
}
/* Điểm kỹ thuật nhỏ của hai card bên phải */
.kht-gioi-thieu .kht-nhamay::before,
.kht-gioi-thieu .kht-doitac::before {
content: "";
position: absolute;
top: 11px;
right: -5px;
width: 7px;
height: 7px;
border: 2px solid var(--kht-white);
border-radius: 2px;
background: var(--kht-primary);
box-shadow: 0 0 0 3px rgba(40, 203, 139, 0.11);
}
/* Cấu trúc đường nối của hai card bên trái */
.kht-gioi-thieu .kht-congthuc::after,
.kht-gioi-thieu .kht-xuong::after {
content: "";
position: absolute;
top: 50%;
height: 9px;
background:
radial-gradient(
circle at 100% 50%,
var(--kht-primary) 0 3px,
var(--kht-white) 3px 5px,
transparent 5px
),
linear-gradient(
90deg,
rgba(40, 203, 139, 0.12) 0%,
rgba(40, 203, 139, 0.62) 100%
) center / 100% 1px no-repeat;
transform: translateY(-50%);
pointer-events: none;
}
/* Card 1.000+ gần vòng tròn hơn nên dùng đường nối ngắn */
.kht-gioi-thieu .kht-congthuc::after {
right: -14px;
width: 14px;
}
/* Card 40.000m2 giữ khoảng nối cân đối với vị trí hiện tại */
.kht-gioi-thieu .kht-xuong::after {
right: -24px;
width: 24px;
}
/* Cấu trúc đường nối của hai card bên phải */
.kht-gioi-thieu .kht-nhamay::after,
.kht-gioi-thieu .kht-doitac::after {
content: "";
position: absolute;
top: 50%;
height: 9px;
background:
radial-gradient(
circle at 0 50%,
var(--kht-primary) 0 3px,
var(--kht-white) 3px 5px,
transparent 5px
),
linear-gradient(
90deg,
rgba(40, 203, 139, 0.62) 0%,
rgba(40, 203, 139, 0.12) 100%
) center / 100% 1px no-repeat;
transform: translateY(-50%);
pointer-events: none;
}
/* Card Nhà máy giữ khoảng nối cân đối với vị trí hiện tại */
.kht-gioi-thieu .kht-nhamay::after {
left: -24px;
width: 24px;
}
/* Card 300+ gần vòng tròn hơn nên dùng đường nối ngắn */
.kht-gioi-thieu .kht-doitac::after {
left: -14px;
width: 14px;
}
/* Căn số và đơn vị trên cùng một hàng */
.kht-gioi-thieu .kht-congthuc .kht-stat-number-wrap,
.kht-gioi-thieu .kht-nhamay .kht-stat-number-wrap,
.kht-gioi-thieu .kht-xuong .kht-stat-number-wrap,
.kht-gioi-thieu .kht-doitac .kht-stat-number-wrap {
width: 100%;
max-width: 100%;
display: inline-flex;
align-items: flex-start;
justify-content: flex-start;
gap: 4px;
margin: 0;
padding: 0;
overflow: visible;
background: transparent;
border: 0;
box-shadow: none;
line-height: 1;
}
/* Con số chính trên card */
.kht-gioi-thieu .kht-congthuc .kht-stat-number,
.kht-gioi-thieu .kht-nhamay .kht-stat-number,
.kht-gioi-thieu .kht-xuong .kht-stat-number,
.kht-gioi-thieu .kht-doitac .kht-stat-number {
display: inline-block;
overflow: visible;
color: #0b3d1d;
font-size: clamp(34px, 3.15vw, 44px);
font-weight: 900;
line-height: 0.94;
letter-spacing: -0.05em;
white-space: nowrap;
opacity: 1;
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
/* Đơn vị + và m2 hiển thị nhỏ gọn như chỉ số */
.kht-gioi-thieu .kht-congthuc .kht-stat-unit,
.kht-gioi-thieu .kht-nhamay .kht-stat-unit,
.kht-gioi-thieu .kht-xuong .kht-stat-unit,
.kht-gioi-thieu .kht-doitac .kht-stat-unit {
min-width: 0;
min-height: 0;
display: inline-block;
align-self: flex-start;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--kht-shade-3);
font-size: 13px;
font-weight: 900;
line-height: 1;
white-space: nowrap;
transform: translateY(2px);
}
/* Nhãn mô tả gọn phía dưới */
.kht-gioi-thieu .kht-congthuc .kht-stat-label,
.kht-gioi-thieu .kht-nhamay .kht-stat-label,
.kht-gioi-thieu .kht-xuong .kht-stat-label,
.kht-gioi-thieu .kht-doitac .kht-stat-label {
width: 100%;
display: block;
margin: 8px 0 0;
padding: 7px 0 0;
border-top: 1px solid rgba(40, 203, 139, 0.18);
background: transparent;
color: #34443d;
font-size: 11.5px;
font-weight: 750;
line-height: 1.3;
letter-spacing: 0;
opacity: 1;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
/* Hover card bên trái */
.kht-gioi-thieu .kht-congthuc:hover,
.kht-gioi-thieu .kht-xuong:hover {
border-color: rgba(40, 203, 139, 0.34);
box-shadow:
0 17px 34px rgba(16, 62, 19, 0.15),
0 4px 10px rgba(40, 203, 139, 0.08);
transform: translateX(-4px) translateY(-2px);
}
/* Hover card bên phải */
.kht-gioi-thieu .kht-nhamay:hover,
.kht-gioi-thieu .kht-doitac:hover {
border-color: rgba(40, 203, 139, 0.34);
box-shadow:
0 17px 34px rgba(16, 62, 19, 0.15),
0 4px 10px rgba(40, 203, 139, 0.08);
transform: translateX(4px) translateY(-2px);
}
/* =========================================================
CỘT PHẢI - HÌNH ẢNH DÂY CHUYỀN
========================================================= */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:last-child
> .col-inner {
position: relative;
min-height: 630px;
padding-left: 78px;
counter-reset: kht-feature;
}
/* Ảnh chiếm toàn bộ chiều cao cột phải */
.kht-gioi-thieu .img {
position: absolute;
inset: 0 0 0 58px;
width: auto;
height: 100%;
margin: 0;
}
/* Khung ảnh cắt góc */
.kht-gioi-thieu .img-inner {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
clip-path: polygon(
11% 0,
100% 0,
100% 90%,
89% 100%,
0 100%,
0 11%
);
background: var(--kht-tint-5);
box-shadow: var(--kht-shadow);
}
/* Lớp phủ ảnh sử dụng Color Shade */
.kht-gioi-thieu .img-inner::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(16, 62, 19, 0.42) 0%,
rgba(27, 94, 31, 0.12) 36%,
transparent 62%
),
linear-gradient(
180deg,
transparent 62%,
rgba(16, 62, 19, 0.18) 100%
);
}
/* Ảnh phủ đầy khung */
.kht-gioi-thieu .img img {
display: block;
width: 100%;
height: 100%;
min-height: 630px;
object-fit: cover;
object-position: center;
}
/* =========================================================
BỐN CARD NỘI DUNG TRÊN HÌNH ẢNH
Phong cách mới: Layered Index Card
Thay đổi giao diện:
- Bỏ dải xanh lớn chạy dọc toàn bộ card.
- Số thứ tự trở thành nhãn nổi độc lập ở cạnh trái.
- Card dùng nền trắng đặc, góc bo bất đối xứng và lớp đổ bóng kép.
- Nội dung được tăng tương phản nhưng vẫn giữ cảm giác gọn nhẹ.
- Không thay đổi HTML và không sử dụng !important.
========================================================= */
/* Khung chung cho bốn card nội dung */
.kht-gioi-thieu .img1,
.kht-gioi-thieu .img2,
.kht-gioi-thieu .img3,
.kht-gioi-thieu .img4 {
position: absolute;
z-index: 6;
left: 20px;
width: 318px;
min-height: 86px;
display: flex;
align-items: center;
padding: 17px 34px 17px 62px;
counter-increment: kht-feature;
isolation: isolate;
overflow: visible;
border: 1px solid rgba(35, 125, 49, 0.18);
border-radius: 16px 5px 16px 5px;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.99) 0%,
rgba(255, 255, 255, 0.99) 72%,
rgba(236, 248, 240, 0.98) 100%
);
box-shadow:
10px 10px 0 rgba(40, 203, 139, 0.07),
0 18px 38px rgba(16, 62, 19, 0.16);
backdrop-filter: blur(10px);
transition:
transform 0.35s ease,
border-color 0.35s ease,
box-shadow 0.35s ease,
background 0.35s ease;
}
/* Số thứ tự 01 - 04 trở thành nhãn nổi riêng */
.kht-gioi-thieu .img1::before,
.kht-gioi-thieu .img2::before,
.kht-gioi-thieu .img3::before,
.kht-gioi-thieu .img4::before {
content: counter(kht-feature, decimal-leading-zero);
position: absolute;
z-index: 3;
top: 50%;
left: -21px;
width: 48px;
height: 48px;
display: grid;
place-items: center;
border: 3px solid rgba(255, 255, 255, 0.96);
border-radius: 14px 5px 14px 5px;
background:
linear-gradient(
145deg,
var(--kht-primary) 0%,
var(--kht-shade-2) 55%,
var(--kht-shade-4) 100%
);
box-shadow:
0 10px 22px rgba(16, 62, 19, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.28);
color: var(--kht-white);
font-size: 13px;
font-weight: 900;
line-height: 1;
letter-spacing: 0.035em;
transform: translateY(-50%);
transition:
transform 0.35s ease,
box-shadow 0.35s ease;
}
/* Thanh nhấn mảnh tạo chiều sâu ở đáy card */
.kht-gioi-thieu .img1::after,
.kht-gioi-thieu .img2::after,
.kht-gioi-thieu .img3::after,
.kht-gioi-thieu .img4::after {
content: "";
position: absolute;
z-index: 2;
right: 30px;
bottom: -1px;
left: 62px;
height: 3px;
border-radius: 3px 3px 0 0;
background:
linear-gradient(
90deg,
var(--kht-primary) 0%,
rgba(40, 203, 139, 0.4) 45%,
transparent 100%
);
}
/* Nội dung card */
.kht-gioi-thieu .img1 p,
.kht-gioi-thieu .img2 p,
.kht-gioi-thieu .img3 p,
.kht-gioi-thieu .img4 p {
position: relative;
z-index: 3;
width: 100%;
margin: 0;
color: #173b2b;
font-size: 13.3px;
font-weight: 760;
line-height: 1.46;
letter-spacing: -0.006em;
opacity: 1;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.94);
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
/* Vị trí từng card trên ảnh */
.kht-gioi-thieu .img1 {
top: 58px;
}
.kht-gioi-thieu .img2 {
top: 188px;
}
.kht-gioi-thieu .img3 {
top: 318px;
}
.kht-gioi-thieu .img4 {
top: 448px;
}
/* Hover làm card nổi nhẹ và kéo nhãn số ra phía trước */
.kht-gioi-thieu .img1:hover,
.kht-gioi-thieu .img2:hover,
.kht-gioi-thieu .img3:hover,
.kht-gioi-thieu .img4:hover {
border-color: rgba(40, 203, 139, 0.42);
background:
linear-gradient(
135deg,
#ffffff 0%,
#ffffff 66%,
#e8f5e9 100%
);
box-shadow:
13px 13px 0 rgba(40, 203, 139, 0.09),
0 24px 48px rgba(16, 62, 19, 0.22);
transform: translateX(9px) translateY(-2px);
}
/* Nhãn số chuyển động độc lập khi hover */
.kht-gioi-thieu .img1:hover::before,
.kht-gioi-thieu .img2:hover::before,
.kht-gioi-thieu .img3:hover::before,
.kht-gioi-thieu .img4:hover::before {
box-shadow:
0 14px 28px rgba(16, 62, 19, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.32);
transform: translateY(-50%) translateX(-4px);
}
/* =========================================================
TABLET NGANG
========================================================= */
@media (max-width: 1180px) {
/* Điều chỉnh hàng giới thiệu */
.kht-gioi-thieu
> .section-content
> .row:first-child {
gap: 32px;
}
/* Điều chỉnh tỷ lệ hai cột chính */
.kht-gioi-thieu
> .section-content
> .row.row-small {
grid-template-columns:
minmax(450px, 0.95fr)
minmax(480px, 1.05fr);
/* gap: 40px; */
}
/* Giảm chiều cao cột số liệu */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner {
min-height: 590px;
}
/* Thu nhỏ vòng số liệu chính */
.kht-gioi-thieu .kht-spngay {
width: 320px;
height: 320px;
}
/* Thu nhỏ chiều rộng card trên tablet ngang */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col {
width: 150px;
}
/*
* Giữ bố cục lệch tầng trên tablet ngang:
* hai card trái cao hơn hai card phải và gần vòng tròn hơn.
*/
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(1) {
top: 36px;
left: 62px;
}
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2) {
top: 94px;
right: 30px;
}
/* Hai card phía dưới tiếp tục giữ nhịp trái cao, phải thấp */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(3) {
bottom: 92px;
left: 30px;
}
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(4) {
right: 66px;
bottom: 34px;
}
/* Thu gọn card trên tablet ngang */
.kht-gioi-thieu .kht-congthuc,
.kht-gioi-thieu .kht-nhamay,
.kht-gioi-thieu .kht-xuong,
.kht-gioi-thieu .kht-doitac {
min-height: 84px;
padding: 10px 11px 9px;
}
/* Card 1.000+ dùng line ngắn hơn trên tablet */
.kht-gioi-thieu .kht-congthuc::after {
right: -12px;
width: 12px;
}
/* Card 40.000m2 giữ line cân đối trên tablet */
.kht-gioi-thieu .kht-xuong::after {
right: -20px;
width: 20px;
}
/* Card Nhà máy giữ line cân đối trên tablet */
.kht-gioi-thieu .kht-nhamay::after {
left: -20px;
width: 20px;
}
/* Card 300+ dùng line ngắn hơn trên tablet */
.kht-gioi-thieu .kht-doitac::after {
left: -12px;
width: 12px;
}
/* Thu nhỏ số liệu trên tablet ngang */
.kht-gioi-thieu .kht-congthuc .kht-stat-number,
.kht-gioi-thieu .kht-nhamay .kht-stat-number,
.kht-gioi-thieu .kht-xuong .kht-stat-number,
.kht-gioi-thieu .kht-doitac .kht-stat-number {
font-size: clamp(31px, 3vw, 39px);
}
/* Thu nhỏ đơn vị trên tablet ngang */
.kht-gioi-thieu .kht-congthuc .kht-stat-unit,
.kht-gioi-thieu .kht-nhamay .kht-stat-unit,
.kht-gioi-thieu .kht-xuong .kht-stat-unit,
.kht-gioi-thieu .kht-doitac .kht-stat-unit {
font-size: 12px;
}
/* Thu nhỏ nhãn mô tả trên tablet ngang */
.kht-gioi-thieu .kht-congthuc .kht-stat-label,
.kht-gioi-thieu .kht-nhamay .kht-stat-label,
.kht-gioi-thieu .kht-xuong .kht-stat-label,
.kht-gioi-thieu .kht-doitac .kht-stat-label {
margin-top: 7px;
padding-top: 6px;
font-size: 11px;
}
/* Giảm chiều cao cột ảnh */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:last-child
> .col-inner {
min-height: 590px;
}
.kht-gioi-thieu .img img {
min-height: 590px;
}
/* Thu gọn Layered Index Card trên tablet ngang */
.kht-gioi-thieu .img1,
.kht-gioi-thieu .img2,
.kht-gioi-thieu .img3,
.kht-gioi-thieu .img4 {
left: 17px;
width: 282px;
min-height: 80px;
padding: 14px 28px 14px 56px;
border-radius: 14px 5px 14px 5px;
box-shadow:
8px 8px 0 rgba(40, 203, 139, 0.065),
0 15px 32px rgba(16, 62, 19, 0.15);
}
/* Thu nhỏ nhãn số trên tablet ngang */
.kht-gioi-thieu .img1::before,
.kht-gioi-thieu .img2::before,
.kht-gioi-thieu .img3::before,
.kht-gioi-thieu .img4::before {
left: -18px;
width: 43px;
height: 43px;
border-radius: 12px 4px 12px 4px;
font-size: 12px;
}
/* Thu ngắn thanh nhấn đáy card */
.kht-gioi-thieu .img1::after,
.kht-gioi-thieu .img2::after,
.kht-gioi-thieu .img3::after,
.kht-gioi-thieu .img4::after {
right: 25px;
left: 56px;
}
/* Giữ nội dung rõ nét khi card thu nhỏ */
.kht-gioi-thieu .img1 p,
.kht-gioi-thieu .img2 p,
.kht-gioi-thieu .img3 p,
.kht-gioi-thieu .img4 p {
font-size: 12.4px;
line-height: 1.42;
}
/* Điều chỉnh vị trí card trên tablet ngang */
.kht-gioi-thieu .img1 {
top: 48px;
}
.kht-gioi-thieu .img2 {
top: 166px;
}
.kht-gioi-thieu .img3 {
top: 284px;
}
.kht-gioi-thieu .img4 {
top: 402px;
}
}
/* =========================================================
TABLET DỌC
========================================================= */
@media (max-width: 849px) {
/* Hàng giới thiệu chuyển thành một cột */
.kht-gioi-thieu
> .section-content
> .row:first-child {
grid-template-columns: 1fr;
align-items: start;
gap: 22px;
width: calc(100% - 30px);
margin-bottom: 34px;
}
/* Nút căn về bên trái trên tablet dọc */
.kht-gioi-thieu .kht-nut {
justify-self: start;
}
/* Hàng số liệu và ảnh chuyển thành một cột */
.kht-gioi-thieu
> .section-content
> .row.row-small {
grid-template-columns: 1fr;
width: calc(100% - 30px);
/* gap: 42px; */
}
/* Giữ đủ không gian cho vòng tròn */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner {
min-height: 620px;
}
/* Kích thước vòng tròn trên tablet dọc */
.kht-gioi-thieu .kht-spngay {
width: 350px;
height: 350px;
}
/* Chiều cao khu vực ảnh */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:last-child
> .col-inner {
min-height: 610px;
}
.kht-gioi-thieu .img img {
min-height: 610px;
}
}
/* =======================================================
MOBILE - CỤM SỐ LIỆU KHT GIỚI THIỆU
Chỉnh theo yêu cầu mới:
1. Vòng tròn trung tâm lớn hơn.
2. 4 card nhỏ lại.
3. 4 card ép sát, đè lên vòng tròn.
4. Bố cục card lệch như desktop:
- cột trái cao hơn
- cột phải thấp hơn
======================================================= */
@media (max-width: 549px) {
/* =========================================
Vùng chứa toàn bộ cụm số liệu mobile
========================================= */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner {
position: relative;
min-height: 400px;
isolation: isolate;
}
/* =========================================
Hàng chứa vòng tròn trung tâm
========================================= */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:first-child {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0;
pointer-events: none;
}
/* Reset cột chứa vòng tròn */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:first-child
> .col {
width: 100%;
max-width: none;
padding: 0;
}
/* Căn giữa nội dung vòng tròn */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:first-child
> .col
> .col-inner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
/* Tăng kích thước vòng tròn trung tâm trên mobile thêm 1 chút */
.kht-gioi-thieu .kht-spngay {
width: clamp(226px, 64vw, 248px);
height: clamp(226px, 64vw, 248px);
padding: 21px;
box-shadow:
0 18px 42px rgba(16, 62, 19, 0.10),
inset 0 0 0 7px rgba(40, 203, 139, 0.035);
pointer-events: auto;
}
/* Nới vòng quỹ đạo ngoài theo kích thước mới của vòng tròn */
.kht-gioi-thieu .kht-orbit-ring-a {
inset: -22px;
}
/* Nới vòng quỹ đạo trong theo kích thước mới của vòng tròn */
.kht-gioi-thieu .kht-orbit-ring-b {
inset: 11px;
}
/* Tăng nhẹ cỡ số 1.000.000 để cân đối với vòng tròn lớn hơn */
.kht-gioi-thieu .kht-spngay .kht-stat-number {
font-size: clamp(38px, 10vw, 43px);
line-height: 1;
letter-spacing: -0.055em;
}
/* Tăng nhẹ nhãn dưới số để cân đối */
.kht-gioi-thieu .kht-spngay .kht-stat-label {
max-width: 164px;
margin-top: 11px;
font-size: 12.5px;
line-height: 1.35;
}
/* =========================================
Hàng chứa 4 card số liệu
========================================= */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child {
position: absolute;
inset: 0;
z-index: 6;
display: block;
width: 100%;
margin: 0;
pointer-events: none;
}
/* Kích thước cột chứa card
- card nhỏ hơn
- dễ ép sát vòng tròn hơn
*/
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col {
position: absolute;
z-index: 7;
width: calc(50% - 34px);
max-width: 118px;
padding: 0;
pointer-events: auto;
}
/* =========================================
Vị trí 4 card
- đè lên vòng tròn
- lệch như desktop
========================================= */
/* Card 1 - trên trái
Cột trái cao hơn */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(1) {
top: 56px;
left: 10px;
right: auto;
bottom: auto;
}
/* Card 2 - trên phải
Cột phải thấp hơn một chút */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2) {
top: 70px;
right: 10px;
left: auto;
bottom: auto;
}
/* Card 3 - dưới trái
Cột trái cao hơn */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(3) {
bottom: 74px;
left: 12px;
top: auto;
right: auto;
}
/* Card 4 - dưới phải
Cột phải thấp hơn một chút */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(4) {
bottom: 58px;
right: 10px;
top: auto;
left: auto;
}
/* =========================================
Giao diện chung cho 4 card
========================================= */
.kht-gioi-thieu .kht-congthuc,
.kht-gioi-thieu .kht-nhamay,
.kht-gioi-thieu .kht-xuong,
.kht-gioi-thieu .kht-doitac {
position: relative;
z-index: 8;
width: 100%;
min-height: 58px;
padding: 6px 8px 6px;
overflow: visible;
isolation: isolate;
border: 1px solid rgba(35, 125, 49, 0.14);
border-radius: 10px;
background: rgba(255, 255, 255, 0.97);
box-shadow:
0 8px 18px rgba(16, 62, 19, 0.08),
0 2px 5px rgba(40, 203, 139, 0.04);
}
/* Card trái có line nhấn bên trái */
.kht-gioi-thieu .kht-congthuc,
.kht-gioi-thieu .kht-xuong {
border-left: 3px solid var(--kht-primary);
border-right-width: 1px;
}
/* Card phải có line nhấn bên phải */
.kht-gioi-thieu .kht-nhamay,
.kht-gioi-thieu .kht-doitac {
border-left-width: 1px;
border-right: 3px solid var(--kht-primary);
}
/* Nút chấm nhấn cho card bên trái */
.kht-gioi-thieu .kht-congthuc::before,
.kht-gioi-thieu .kht-xuong::before {
content: "";
position: absolute;
top: 7px;
left: -5px;
width: 7px;
height: 7px;
border: 2px solid var(--kht-white);
border-radius: 2px;
background: var(--kht-primary);
box-shadow: 0 0 0 3px rgba(40, 203, 139, 0.1);
}
/* Nút chấm nhấn cho card bên phải */
.kht-gioi-thieu .kht-nhamay::before,
.kht-gioi-thieu .kht-doitac::before {
content: "";
position: absolute;
top: 7px;
right: -5px;
width: 7px;
height: 7px;
border: 2px solid var(--kht-white);
border-radius: 2px;
background: var(--kht-primary);
box-shadow: 0 0 0 3px rgba(40, 203, 139, 0.1);
}
/* Ẩn line nối dài trên mobile */
.kht-gioi-thieu .kht-congthuc::after,
.kht-gioi-thieu .kht-nhamay::after,
.kht-gioi-thieu .kht-xuong::after,
.kht-gioi-thieu .kht-doitac::after {
display: none;
}
/* =========================================
Cụm số trong card
========================================= */
.kht-gioi-thieu .kht-congthuc .kht-stat-number-wrap,
.kht-gioi-thieu .kht-nhamay .kht-stat-number-wrap,
.kht-gioi-thieu .kht-xuong .kht-stat-number-wrap,
.kht-gioi-thieu .kht-doitac .kht-stat-number-wrap {
gap: 2px;
min-width: 0;
max-width: 100%;
}
/* Thu nhỏ số 1.000 / 2 / 40.000 / 300 */
.kht-gioi-thieu .kht-congthuc .kht-stat-number,
.kht-gioi-thieu .kht-nhamay .kht-stat-number,
.kht-gioi-thieu .kht-xuong .kht-stat-number,
.kht-gioi-thieu .kht-doitac .kht-stat-number {
font-size: clamp(19px, 5.6vw, 23px);
line-height: 0.96;
letter-spacing: -0.05em;
}
/* Dấu + và m2 */
.kht-gioi-thieu .kht-congthuc .kht-stat-unit,
.kht-gioi-thieu .kht-nhamay .kht-stat-unit,
.kht-gioi-thieu .kht-xuong .kht-stat-unit,
.kht-gioi-thieu .kht-doitac .kht-stat-unit {
font-size: 8px;
transform: translateY(1px);
}
/* Nhãn mô tả dưới số */
.kht-gioi-thieu .kht-congthuc .kht-stat-label,
.kht-gioi-thieu .kht-nhamay .kht-stat-label,
.kht-gioi-thieu .kht-xuong .kht-stat-label,
.kht-gioi-thieu .kht-doitac .kht-stat-label {
margin-top: 4px;
padding-top: 4px;
font-size: 8.5px;
line-height: 1.2;
overflow-wrap: anywhere;
}
/* Tắt transform hover trên mobile */
.kht-gioi-thieu .kht-congthuc:hover,
.kht-gioi-thieu .kht-nhamay:hover,
.kht-gioi-thieu .kht-xuong:hover,
.kht-gioi-thieu .kht-doitac:hover {
transform: none;
}
}
/* =======================================================
MOBILE NHỎ HƠN
Chức năng:
1. Vòng tròn vẫn giữ lớn vừa phải.
2. Card vẫn đè lên vòng tròn.
3. Card vẫn giữ độ lệch trái cao - phải thấp.
======================================================= */
@media (max-width: 379px) {
/* Thu vùng chứa một chút để cân đối */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner {
min-height: 384px;
}
/* Vòng tròn vẫn lớn hơn bản cũ */
.kht-gioi-thieu .kht-spngay {
width: 206px;
height: 206px;
padding: 18px;
}
/* Thu vòng quỹ đạo tương ứng */
.kht-gioi-thieu .kht-orbit-ring-a {
inset: -18px;
}
.kht-gioi-thieu .kht-orbit-ring-b {
inset: 9px;
}
/* Thu số giữa nhẹ */
.kht-gioi-thieu .kht-spngay .kht-stat-number {
font-size: 34px;
}
/* Card nhỏ thêm một chút */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col {
width: calc(50% - 32px);
max-width: 112px;
}
/* Giữ card đè lên vòng tròn và có độ lệch */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(1) {
top: 60px;
left: 10px;
}
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2) {
top: 72px;
right: 10px;
}
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(3) {
bottom: 78px;
left: 12px;
}
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(4) {
bottom: 62px;
right: 10px;
}
/* Thu card nhẹ để không tràn */
.kht-gioi-thieu .kht-congthuc,
.kht-gioi-thieu .kht-nhamay,
.kht-gioi-thieu .kht-xuong,
.kht-gioi-thieu .kht-doitac {
min-height: 56px;
padding: 6px 7px 6px;
}
/* Thu số trong card */
.kht-gioi-thieu .kht-congthuc .kht-stat-number,
.kht-gioi-thieu .kht-nhamay .kht-stat-number,
.kht-gioi-thieu .kht-xuong .kht-stat-number,
.kht-gioi-thieu .kht-doitac .kht-stat-number {
font-size: 18px;
}
/* Thu label trong card */
.kht-gioi-thieu .kht-congthuc .kht-stat-label,
.kht-gioi-thieu .kht-nhamay .kht-stat-label,
.kht-gioi-thieu .kht-xuong .kht-stat-label,
.kht-gioi-thieu .kht-doitac .kht-stat-label {
font-size: 8px;
}
}
/* =========================================================
MOBILE - CARD 1 CỘT NẰM TRÊN ẢNH, ẢNH HIỂN THỊ ĐẦY ĐỦ
Chức năng:
1. Chỉ tác động khu vực ảnh dây chuyền trên mobile.
2. Mỗi card text nằm trên một hàng riêng.
3. Bốn card nằm phía trên ảnh, không đè lên ảnh.
4. Ảnh hiển thị đầy đủ theo đúng tỷ lệ gốc.
5. Không sử dụng object-fit: cover trên mobile.
6. Xóa kiểu cắt góc ảnh chỉ trên mobile.
7. Không ảnh hưởng desktop, tablet và phần khác.
========================================================= */
@media screen and (max-width: 549px) {
/* =======================================================
KHUNG CHỨA BỐN CARD VÀ ẢNH
======================================================= */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:last-child
> .col-inner {
position: relative;
width: 100%;
min-height: 0;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
padding-left: 0;
overflow: visible;
counter-reset: kht-feature;
}
/* =======================================================
BỐN CARD TEXT
Mỗi card chiếm một hàng riêng.
======================================================= */
.kht-gioi-thieu .img1,
.kht-gioi-thieu .img2,
.kht-gioi-thieu .img3,
.kht-gioi-thieu .img4 {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
z-index: 6;
width: 100%;
max-width: 100%;
min-height: 66px;
flex: 0 0 auto;
display: flex;
align-items: center;
margin: 0;
padding:
11px
15px
11px
53px;
overflow: hidden;
border: 1px solid rgba(35, 125, 49, 0.16);
border-radius: 12px 4px 12px 4px;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.99) 0%,
rgba(255, 255, 255, 0.99) 72%,
rgba(236, 248, 240, 0.98) 100%
);
box-shadow:
5px 5px 0 rgba(40, 203, 139, 0.05),
0 9px 20px rgba(16, 62, 19, 0.1);
transform: none;
}
/* =======================================================
THỨ TỰ HIỂN THỊ
Bốn card nằm trước, ảnh nằm sau.
======================================================= */
.kht-gioi-thieu .img1 {
order: 1;
}
.kht-gioi-thieu .img2 {
order: 2;
}
.kht-gioi-thieu .img3 {
order: 3;
}
.kht-gioi-thieu .img4 {
order: 4;
}
/* =======================================================
HUY HIỆU SỐ 01 - 04
======================================================= */
.kht-gioi-thieu .img1::before,
.kht-gioi-thieu .img2::before,
.kht-gioi-thieu .img3::before,
.kht-gioi-thieu .img4::before {
top: 50%;
left: 10px;
width: 31px;
height: 31px;
display: grid;
place-items: center;
border-width: 2px;
border-radius: 9px 3px 9px 3px;
font-size: 9px;
line-height: 1;
box-shadow:
0 7px 15px rgba(16, 62, 19, 0.21),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
transform: translateY(-50%);
}
/* =======================================================
THANH XANH PHÍA DƯỚI CARD
======================================================= */
.kht-gioi-thieu .img1::after,
.kht-gioi-thieu .img2::after,
.kht-gioi-thieu .img3::after,
.kht-gioi-thieu .img4::after {
right: 15px;
bottom: 0;
left: 53px;
height: 2px;
}
/* =======================================================
NỘI DUNG CHỮ TRONG CARD
======================================================= */
.kht-gioi-thieu .img1 p,
.kht-gioi-thieu .img2 p,
.kht-gioi-thieu .img3 p,
.kht-gioi-thieu .img4 p {
width: 100%;
margin: 0;
color: #173b2b;
font-size: 11px;
font-weight: 720;
line-height: 1.4;
letter-spacing: -0.006em;
text-align: left;
overflow-wrap: break-word;
word-break: normal;
}
/* =======================================================
KHUNG ẢNH DÂY CHUYỀN
Không sử dụng chiều cao cố định.
Chiều cao được lấy theo đúng tỷ lệ ảnh gốc.
======================================================= */
.kht-gioi-thieu .img {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
z-index: 1;
order: 5;
width: 100%;
max-width: 100%;
height: auto;
flex: 0 0 auto;
margin:
6px
auto
0;
transform: none;
}
/* =======================================================
KHUNG BỌC ẢNH
Xóa chiều cao 610px và clip-path của desktop.
Đây là phần ngăn ảnh tiếp tục bị cắt góc.
======================================================= */
.kht-gioi-thieu .img-inner {
position: relative;
width: 100%;
height: auto;
margin: 0;
overflow: hidden;
clip-path: none;
border-radius: 10px;
background: var(--kht-tint-5);
box-shadow:
0 16px 34px rgba(16, 62, 19, 0.13);
}
/* =======================================================
ẢNH BÊN TRONG
Hiển thị toàn bộ ảnh theo tỷ lệ tự nhiên.
Không phóng ảnh để lấp đầy chiều cao cố định.
======================================================= */
.kht-gioi-thieu .img img {
position: relative;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
display: block;
margin: 0 auto;
object-fit: contain;
object-position: center center;
image-rendering: auto;
transform: none;
}
/* =======================================================
LỚP PHỦ TRÊN ẢNH
Giữ lớp phủ nhưng không làm thay đổi kích thước ảnh.
======================================================= */
.kht-gioi-thieu .img-inner::after {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* =======================================================
TẮT HOVER DỊCH CHUYỂN TRÊN MOBILE
======================================================= */
.kht-gioi-thieu .img1:hover,
.kht-gioi-thieu .img2:hover,
.kht-gioi-thieu .img3:hover,
.kht-gioi-thieu .img4:hover {
border-color: rgba(35, 125, 49, 0.16);
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.99) 0%,
rgba(255, 255, 255, 0.99) 72%,
rgba(236, 248, 240, 0.98) 100%
);
box-shadow:
5px 5px 0 rgba(40, 203, 139, 0.05),
0 9px 20px rgba(16, 62, 19, 0.1);
transform: none;
}
/* Giữ huy hiệu số đứng yên khi chạm */
.kht-gioi-thieu .img1:hover::before,
.kht-gioi-thieu .img2:hover::before,
.kht-gioi-thieu .img3:hover::before,
.kht-gioi-thieu .img4:hover::before {
box-shadow:
0 7px 15px rgba(16, 62, 19, 0.21),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
transform: translateY(-50%);
}
}
/* =========================================================
MOBILE NHỎ TỪ 379PX TRỞ XUỐNG
Chức năng:
1. Mỗi card vẫn chiếm một hàng.
2. Ảnh vẫn hiển thị đầy đủ.
3. Không thiết lập lại chiều cao cố định.
========================================================= */
@media screen and (max-width: 379px) {
/* Thu khoảng cách giữa các card */
.kht-gioi-thieu
> .section-content
> .row.row-small
> .col:last-child
> .col-inner {
gap: 8px;
}
/* Thu nhẹ card */
.kht-gioi-thieu .img1,
.kht-gioi-thieu .img2,
.kht-gioi-thieu .img3,
.kht-gioi-thieu .img4 {
width: 100%;
max-width: 100%;
min-height: 62px;
padding:
10px
12px
10px
48px;
border-radius: 10px 4px 10px 4px;
}
/* Thu huy hiệu số */
.kht-gioi-thieu .img1::before,
.kht-gioi-thieu .img2::before,
.kht-gioi-thieu .img3::before,
.kht-gioi-thieu .img4::before {
left: 9px;
width: 28px;
height: 28px;
font-size: 8.5px;
}
/* Đồng bộ thanh xanh */
.kht-gioi-thieu .img1::after,
.kht-gioi-thieu .img2::after,
.kht-gioi-thieu .img3::after,
.kht-gioi-thieu .img4::after {
right: 12px;
left: 48px;
}
/* Thu nhẹ chữ */
.kht-gioi-thieu .img1 p,
.kht-gioi-thieu .img2 p,
.kht-gioi-thieu .img3 p,
.kht-gioi-thieu .img4 p {
font-size: 10px;
line-height: 1.36;
}
/* Ảnh tiếp tục sử dụng chiều cao tự nhiên */
.kht-gioi-thieu .img {
width: 100%;
max-width: 100%;
height: auto;
margin-top: 4px;
}
.kht-gioi-thieu .img-inner {
width: 100%;
height: auto;
clip-path: none;
border-radius: 8px;
}
.kht-gioi-thieu .img img {
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
object-fit: contain;
object-position: center center;
}
}
@media (prefers-reduced-motion: reduce) {
.kht-gioi-thieu *,
.kht-gioi-thieu *::before,
.kht-gioi-thieu *::after {
scroll-behavior: auto;
transition-duration: 0.01ms;
animation-duration: 0.01ms;
animation-iteration-count: 1;
}
}
/* =========================================================
SECTION SO SÁNH TRƯỚC – SAU
Phong cách: Editorial Comparison
========================================================= */
.kht-truoc-sau {
position: relative;
overflow: hidden;
background:
linear-gradient(
90deg,
rgba(67, 160, 70, 0.035) 1px,
transparent 1px
),
linear-gradient(
rgba(67, 160, 70, 0.035) 1px,
transparent 1px
),
#f8fbf8;
background-size: 42px 42px;
}
/* Mảng màu trang trí nền */
.kht-truoc-sau::before {
content: "";
position: absolute;
top: -220px;
right: -180px;
width: 520px;
height: 520px;
border-radius: 50%;
background: rgba(200, 230, 201, 0.38);
filter: blur(2px);
pointer-events: none;
}
/*
* Đồng bộ khung nội dung với các section thường bên dưới.
* Banner được giữ theo kích thước riêng và không bị tác động.
*/
.kht-truoc-sau > .section-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding:
clamp(28px, 5vw, 68px)
0;
}
/* Loại bỏ chiều rộng mặc định của row Flatsome */
.kht-truoc-sau
> .section-content
> .row {
max-width: 100%;
}
/* =========================================================
TIÊU ĐỀ
========================================================= */
.kht-truoc-sau-text {
position: relative;
max-width: 760px;
margin:
0
0
clamp(26px, 3.5vw, 42px);
padding-left: 24px;
text-align: left;
}
/* Đường màu thương hiệu cạnh tiêu đề */
.kht-truoc-sau-text::before {
content: "";
position: absolute;
top: 4px;
bottom: 4px;
left: 0;
width: 5px;
border-radius: 20px;
background:
linear-gradient(
180deg,
#43a046,
#1b5e1f
);
}
/* Nội dung tiêu đề */
.kht-truoc-sau-text p {
margin: 0;
color: #263238;
font-size:
clamp(28px, 3vw, 40px);
font-weight: 700;
line-height: 1.16;
letter-spacing: -0.035em;
text-wrap: balance;
text-transform: uppercase;
}
/* =========================================================
KHUNG SO SÁNH
Được JavaScript tự động tạo
========================================================= */
.kht-compare-stage {
--kht-position: 50%;
position: relative;
/* Ảnh so sánh dùng toàn bộ chiều rộng khung 1320px */
width: 100%;
max-width: none;
aspect-ratio: 1672 / 941;
margin:
0
auto
18px;
overflow: hidden;
border:
1px solid
rgba(38, 50, 56, 0.12);
border-radius:
6px
38px
6px
38px;
background: #e8f5e9;
box-shadow:
18px 18px 0 rgba(67, 160, 70, 0.12),
0 28px 65px rgba(38, 50, 56, 0.15);
cursor: ew-resize;
touch-action: pan-y;
user-select: none;
isolation: isolate;
outline: none;
}
/* Viền focus khi dùng bàn phím */
.kht-compare-stage:focus-visible {
box-shadow:
18px 18px 0 rgba(67, 160, 70, 0.14),
0 0 0 4px rgba(67, 160, 70, 0.2),
0 28px 65px rgba(38, 50, 56, 0.15);
}
/* Lớp phủ chiều sâu phía dưới */
.kht-compare-stage::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 3;
height: 20%;
background:
linear-gradient(
to top,
rgba(16, 62, 19, 0.13),
transparent
);
pointer-events: none;
}
/* Hai row ảnh chồng lên nhau */
.kht-compare-stage > .row {
position: absolute;
inset: 0;
width: 100%;
max-width: none;
height: 100%;
margin: 0;
padding: 0;
}
/* Ảnh trước nằm phía dưới */
.kht-compare-before {
z-index: 1;
}
/* Ảnh sau nằm phía trên */
.kht-compare-stage > .kht-sau {
z-index: 2;
clip-path:
inset(
0
0
0
var(--kht-position)
);
will-change: clip-path;
}
/* Reset column của Flatsome */
.kht-compare-stage
> .row
> .col {
width: 100%;
max-width: 100%;
height: 100%;
flex-basis: 100%;
padding: 0;
}
/* Đồng bộ toàn bộ lớp bọc ảnh */
.kht-compare-stage .col-inner,
.kht-compare-stage .img,
.kht-compare-stage .img-inner {
width: 100%;
height: 100%;
margin: 0;
}
/* Giữ ảnh đúng tỉ lệ, không biến dạng */
.kht-compare-stage img {
display: block;
width: 100%;
height: 100%;
margin: 0;
object-fit: cover;
object-position: center;
user-select: none;
pointer-events: none;
-webkit-user-drag: none;
}
/* =========================================================
VẠCH KÉO
========================================================= */
.kht-compare-divider {
position: absolute;
top: 0;
bottom: 0;
left: var(--kht-position);
z-index: 8;
width: 2px;
background:
rgba(255, 255, 255, 0.96);
box-shadow:
0 0 0 1px rgba(38, 50, 56, 0.15),
0 0 18px rgba(16, 62, 19, 0.25);
transform: translateX(-50%);
pointer-events: none;
will-change: left;
}
/* Tay nắm vạch kéo */
.kht-compare-handle {
position: absolute;
top: 50%;
left: 50%;
display: grid;
grid-template-columns:
1fr
1px
1fr;
align-items: center;
width: 68px;
height: 46px;
overflow: hidden;
border: 3px solid #ffffff;
border-radius: 14px;
color: #ffffff;
background:
linear-gradient(
135deg,
#43a046,
#237d31
);
box-shadow:
0 12px 28px rgba(16, 62, 19, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
transform:
translate(-50%, -50%);
}
/* Đường chia giữa hai mũi tên */
.kht-compare-handle-line {
width: 1px;
height: 18px;
background:
rgba(255, 255, 255, 0.35);
}
/* Mũi tên hai bên */
.kht-compare-arrow {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.kht-compare-arrow::before {
content: "";
position: absolute;
top: 50%;
width: 9px;
height: 9px;
border-top:
2px solid #ffffff;
border-left:
2px solid #ffffff;
}
/* Mũi tên trái */
.kht-compare-arrow-left::before {
left: 12px;
transform:
translateY(-50%)
rotate(-45deg);
}
/* Mũi tên phải */
.kht-compare-arrow-right::before {
right: 12px;
transform:
translateY(-50%)
rotate(135deg);
}
/* =========================================================
NHÃN TRƯỚC – SAU
========================================================= */
.kht-compare-label {
position: absolute;
bottom: 18px;
z-index: 9;
display: inline-flex;
align-items: center;
min-height: 34px;
padding:
7px
15px;
border:
1px solid
rgba(255, 255, 255, 0.58);
border-radius: 8px;
color: #ffffff;
font-size: 12px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
background:
rgba(38, 50, 56, 0.72);
box-shadow:
0 8px 20px
rgba(38, 50, 56, 0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
pointer-events: none;
}
/* Nhãn Trước */
.kht-compare-label-before {
left: 18px;
}
/* Nhãn Sau */
.kht-compare-label-after {
right: 18px;
background:
rgba(35, 125, 49, 0.84);
}
/* =========================================================
HƯỚNG DẪN KÉO
========================================================= */
.kht-compare-help {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
width: max-content;
max-width: 100%;
margin:
32px
auto
0;
padding:
9px
16px;
border:
1px solid
rgba(67, 160, 70, 0.18);
border-radius: 999px;
color: #4d4d4d;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
background:
rgba(255, 255, 255, 0.84);
box-shadow:
0 8px 22px
rgba(38, 50, 56, 0.07);
}
/* Icon kéo ngang */
.kht-compare-help-icon {
position: relative;
display: block;
width: 28px;
height: 18px;
}
.kht-compare-help-icon::before {
content: "↔";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #2e7d31;
font-size: 22px;
font-weight: 700;
line-height: 1;
}
/* =========================================================
TRẠNG THÁI ĐANG KÉO
========================================================= */
.kht-compare-stage.is-dragging {
cursor: grabbing;
}
/* Tay nắm khi người dùng đang kéo */
.kht-compare-stage.is-dragging
.kht-compare-handle {
background:
linear-gradient(
135deg,
#2e7d31,
#103e13
);
box-shadow:
0 15px 34px rgba(16, 62, 19, 0.38),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
transform:
translate(-50%, -50%)
scale(1.06);
}
/* =========================================================
VIEWPORT NHỎ HƠN KHUNG 1320PX
Chức năng thay đổi:
- Tạo khoảng an toàn 12px ở mỗi bên màn hình.
- Đồng bộ với section danh mục sản phẩm bên dưới.
- Không tác động banner hoặc các section khác.
========================================================= */
@media screen and (max-width: 1344px) {
/* Tạo khoảng an toàn hai bên */
.kht-truoc-sau
> .section-content {
width:
calc(100% - 24px);
}
}
/* =========================================================
TABLET
========================================================= */
@media screen and (max-width: 849px) {
/* Điều chỉnh khoảng cách section trên tablet */
.kht-truoc-sau
> .section-content {
padding:
36px
0
44px;
}
/* Điều chỉnh khoảng cách dưới tiêu đề */
.kht-truoc-sau-text {
margin-bottom: 28px;
}
/* Điều chỉnh bo góc khung ảnh */
.kht-compare-stage {
border-radius:
5px
28px
5px
28px;
box-shadow:
12px 12px 0 rgba(67, 160, 70, 0.11),
0 20px 46px rgba(38, 50, 56, 0.14);
}
/* Điều chỉnh khoảng cách phần hướng dẫn */
.kht-compare-help {
margin-top: 26px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media screen and (max-width: 549px) {
/* Điều chỉnh khoảng cách section trên mobile */
.kht-truoc-sau
> .section-content {
padding:
28px
0
34px;
}
/* Thu gọn khoảng cách tiêu đề */
.kht-truoc-sau-text {
margin-bottom: 22px;
padding-left: 17px;
}
/* Thu nhỏ thanh xanh dọc */
.kht-truoc-sau-text::before {
width: 4px;
}
/*
* Đồng bộ kích thước tiêu đề mobile
* với các section còn lại.
*/
.kht-truoc-sau-text p {
font-size:
clamp(17px, 2.8vw, 24px);
line-height: 1.2;
letter-spacing: -0.025em;
}
/* Điều chỉnh tỷ lệ khung ảnh trên mobile */
.kht-compare-stage {
aspect-ratio: 4 / 3;
margin-bottom: 12px;
border-radius:
4px
22px
4px
22px;
box-shadow:
8px 8px 0 rgba(67, 160, 70, 0.11),
0 16px 34px rgba(38, 50, 56, 0.14);
}
/* Thu nhỏ tay nắm */
.kht-compare-handle {
width: 58px;
height: 42px;
border-radius: 12px;
}
/* Điều chỉnh mũi tên trái */
.kht-compare-arrow-left::before {
left: 10px;
}
/* Điều chỉnh mũi tên phải */
.kht-compare-arrow-right::before {
right: 10px;
}
/* Thu nhỏ nhãn Trước và Sau */
.kht-compare-label {
bottom: 10px;
min-height: 29px;
padding:
6px
10px;
border-radius: 6px;
font-size: 10px;
}
/* Vị trí nhãn Trước */
.kht-compare-label-before {
left: 10px;
}
/* Vị trí nhãn Sau */
.kht-compare-label-after {
right: 10px;
}
/* Thu gọn phần hướng dẫn kéo */
.kht-compare-help {
gap: 6px;
margin-top: 22px;
padding:
8px
13px;
font-size: 11px;
text-align: center;
}
/* Thu nhỏ icon hướng dẫn */
.kht-compare-help-icon {
width: 24px;
}
}
/* =========================================================
ACCESSIBILITY
========================================================= */
/* Người dùng chọn giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
/* Đưa vạch kéo về giữa */
.kht-compare-stage {
--kht-position: 50%;
}
}
/* =========================================================
KEHETO - DANH MỤC SẢN PHẨM GIA CÔNG
CONCEPT: PREMIUM EDITORIAL / FLOATING PANEL
Desktop: 4 card / hàng
Tablet: 2 card / hàng
Mobile: 2 card / hàng
- Không có STT
- Không có dấu chấm trang trí
- Không sử dụng !important
========================================================= */
/* =========================================================
1. THIẾT LẬP CHUNG
========================================================= */
.kht-danh-muc-gia-cong {
--kht-primary: #39b54a;
--kht-primary-dark: #237d31;
--kht-heading: #263238;
--kht-text: #66716b;
--kht-border: rgba(38, 50, 56, 0.10);
position: relative;
overflow: hidden;
background: #ffffff;
}
.kht-danh-muc-gia-cong,
.kht-danh-muc-gia-cong * {
box-sizing: border-box;
}
/* =========================================================
2. NỀN SECTION
========================================================= */
.kht-danh-muc-gia-cong .section-bg {
background:
radial-gradient(
circle at 100% 0,
rgba(57, 181, 74, 0.06),
transparent 30%
),
linear-gradient(
180deg,
#ffffff 0%,
#fafcfa 100%
);
}
/* =========================================================
3. KHUNG SECTION
========================================================= */
.kht-danh-muc-gia-cong > .section-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 42px 0 52px;
}
/* =========================================================
4. TIÊU ĐỀ
========================================================= */
.kht-danh-muc-gia-cong .kht-dmgc-text {
position: relative;
width: 100%;
max-width: 800px;
margin: 0 0 34px;
padding-left: 24px;
text-align: left;
}
/* Thanh xanh bên trái tiêu đề */
.kht-danh-muc-gia-cong .kht-dmgc-text::before {
content: "";
position: absolute;
top: 3px;
bottom: 3px;
left: 0;
width: 5px;
border-radius: 20px;
background:
linear-gradient(
180deg,
var(--kht-primary),
var(--kht-primary-dark)
);
}
/* Xóa padding mặc định Flatsome */
.kht-danh-muc-gia-cong .kht-dmgc-text > .col {
width: 100%;
max-width: 100%;
flex-basis: 100%;
padding: 0;
}
.kht-danh-muc-gia-cong .kht-dmgc-text .col-inner {
padding: 0;
}
/* Tiêu đề */
.kht-danh-muc-gia-cong .kht-dmgc-text h2 {
margin: 0;
padding: 0;
color: var(--kht-heading);
font-size: clamp(28px, 3vw, 40px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.04em;
text-transform: uppercase;
}
/* Xóa pseudo mặc định của tiêu đề */
.kht-danh-muc-gia-cong .kht-dmgc-text h2::before,
.kht-danh-muc-gia-cong .kht-dmgc-text h2::after {
content: none;
display: none;
}
/* =========================================================
5. GRID DANH MỤC
DESKTOP: 4 CARD / HÀNG
========================================================= */
.kht-danh-muc-gia-cong .kht-dmgc-sp {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 16px;
width: 100%;
margin: 0;
padding: 0;
}
/* Chuyển cột Flatsome thành grid item */
.kht-danh-muc-gia-cong .kht-dmgc-sp > .col {
width: auto;
min-width: 0;
max-width: none;
flex-basis: auto;
padding: 0;
}
/* Col-inner phủ toàn bộ card */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
> .col
> .col-inner {
width: 100%;
height: 100%;
padding: 0;
}
/* =========================================================
6. CARD DANH MỤC
========================================================= */
.kht-danh-muc-gia-cong .kht-dmgc-sp .box {
position: relative;
isolation: isolate;
width: 100%;
height: 100%;
min-height: 390px;
margin: 0;
overflow: hidden;
border: 1px solid var(--kht-border);
border-radius: 22px;
background: #f2f4f1;
box-shadow:
0 10px 30px rgba(38, 50, 56, 0.07);
transform: translateY(0);
transition:
transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.45s ease,
border-color 0.35s ease;
}
/* =========================================================
7. HÌNH ẢNH
========================================================= */
.kht-danh-muc-gia-cong .kht-dmgc-sp .box-image {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
}
/* Wrapper ảnh phủ toàn bộ card */
.kht-danh-muc-gia-cong .kht-dmgc-sp .box-image > div {
width: 100%;
height: 100%;
}
/* Ảnh phủ toàn bộ card */
.kht-danh-muc-gia-cong .kht-dmgc-sp .box-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.001);
transition:
transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.45s ease;
}
/* Gradient nhẹ phía dưới ảnh */
.kht-danh-muc-gia-cong .kht-dmgc-sp .box-image::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(0, 0, 0, 0) 52%,
rgba(18, 40, 24, 0.07) 75%,
rgba(18, 40, 24, 0.20) 100%
);
}
/* =========================================================
8. PANEL THÔNG TIN NỔI
========================================================= */
.kht-danh-muc-gia-cong .kht-dmgc-sp .box-text {
position: absolute;
right: 12px;
bottom: 12px;
left: 12px;
z-index: 5;
width: auto;
height: auto;
padding: 0;
border:
1px solid rgba(255, 255, 255, 0.70);
border-radius: 16px;
background:
rgba(255, 255, 255, 0.92);
box-shadow:
0 12px 30px rgba(38, 50, 56, 0.12);
backdrop-filter: blur(12px);
transition:
transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
background 0.35s ease;
}
/* Bố trí tên danh mục và nút */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box-text-inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 10px 20px;
text-align: left;
}
/* =========================================================
9. TÊN DANH MỤC
========================================================= */
.kht-danh-muc-gia-cong .kht-dmgc-sp .box-text p {
flex: 1;
margin: 0;
color: var(--kht-heading);
font-size: 15px;
font-weight: 700;
line-height: 1.32;
letter-spacing: -0.025em;
text-align: left;
text-transform: uppercase;
white-space: normal;
word-break: normal;
overflow-wrap: normal;
transition:
color 0.3s ease,
transform 0.3s ease;
}
/* Đồng bộ span bên trong */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box-text p span {
color: inherit;
font: inherit;
}
/* =========================================================
10. NÚT MŨI TÊN
========================================================= */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box-text-inner::after {
content: "→";
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: 50%;
background:
rgba(57, 181, 74, 0.10);
color: var(--kht-primary-dark);
font-size: 18px;
font-weight: 600;
line-height: 1;
transition:
color 0.3s ease,
background 0.3s ease,
transform 0.35s ease;
}
/* =========================================================
11. HOVER DESKTOP
========================================================= */
@media (hover: hover) and (pointer: fine) {
/* Nâng card khi hover */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box:hover {
border-color:
rgba(57, 181, 74, 0.35);
box-shadow:
0 22px 48px rgba(38, 50, 56, 0.14);
transform:
translateY(-7px);
}
/* Zoom ảnh khi hover */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box:hover
.box-image img {
transform:
scale(1.06);
}
/* Nâng panel nhẹ */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box:hover
.box-text {
background:
rgba(255, 255, 255, 0.97);
transform:
translateY(-3px);
}
/* Đổi màu tên danh mục */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box:hover
.box-text p {
color:
var(--kht-primary-dark);
}
/* Nút mũi tên chuyển sang nền xanh */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box:hover
.box-text-inner::after {
background:
var(--kht-primary);
color: #ffffff;
transform:
translateX(3px);
}
}
/* =========================================================
12. MÀN HÌNH NHỎ HƠN 1320PX
========================================================= */
@media screen and (max-width: 1344px) {
/* Tạo khoảng cách an toàn hai bên */
.kht-danh-muc-gia-cong
> .section-content {
width: calc(100% - 24px);
}
}
/* =========================================================
13. LAPTOP NHỎ
VẪN GIỮ 4 CARD / HÀNG
========================================================= */
@media screen and (max-width: 1180px)
and (min-width: 1025px) {
/* Thu khoảng cách giữa card */
.kht-danh-muc-gia-cong
.kht-dmgc-sp {
gap: 10px;
}
/* Thu chiều cao card */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box {
min-height: 340px;
}
/* Thu khoảng cách panel */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box-text {
right: 9px;
bottom: 9px;
left: 9px;
}
/* Thu padding panel */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box-text-inner {
padding: 14px 12px;
}
/* Thu font tên danh mục */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box-text p {
font-size: 13px;
}
/* Thu nút mũi tên */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box-text-inner::after {
width: 32px;
height: 32px;
font-size: 16px;
}
}
/* =========================================================
14. TABLET
2 CARD / HÀNG
========================================================= */
@media screen and (max-width: 1024px) {
/* Tablet hiển thị 2 danh mục trên một hàng */
.kht-danh-muc-gia-cong
.kht-dmgc-sp {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 14px;
}
/* Chiều cao card tablet */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box {
min-height: 420px;
}
/* Font tên danh mục tablet */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box-text p {
font-size: 16px;
}
}
/* =========================================================
15. MOBILE
2 DANH MỤC / HÀNG
========================================================= */
@media screen and (max-width: 767px) {
/* Thu khoảng cách section trên mobile */
.kht-danh-muc-gia-cong
> .section-content {
width: calc(100% - 20px);
padding:
28px 0 34px;
}
/* Thu khoảng cách dưới tiêu đề */
.kht-danh-muc-gia-cong
.kht-dmgc-text {
margin-bottom: 20px;
padding-left: 17px;
}
/* Thu thanh xanh tiêu đề */
.kht-danh-muc-gia-cong
.kht-dmgc-text::before {
width: 4px;
}
/* Điều chỉnh font tiêu đề mobile */
.kht-danh-muc-gia-cong
.kht-dmgc-text h2 {
font-size:
clamp(17px, 5vw, 24px);
line-height: 1.2;
}
/* =====================================================
MOBILE: 2 DANH MỤC TRÊN 1 HÀNG
===================================================== */
.kht-danh-muc-gia-cong
.kht-dmgc-sp {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 10px;
}
/* Card mobile thu gọn để phù hợp 2 cột */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box {
min-height: 245px;
border-radius: 15px;
box-shadow:
0 6px 18px
rgba(38, 50, 56, 0.08);
}
/* Điều chỉnh vị trí ảnh để sản phẩm nằm đẹp hơn */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box-image img {
object-position: center;
}
/* Panel nổi mobile */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box-text {
right: 7px;
bottom: 7px;
left: 7px;
border-radius: 11px;
box-shadow:
0 7px 18px
rgba(38, 50, 56, 0.12);
}
/*
* Panel chuyển về dạng dọc nhẹ.
* Giúp tên dài không bị mũi tên chiếm quá nhiều chiều ngang.
*/
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box-text-inner {
align-items: center;
gap: 5px;
padding:
10px 9px;
}
/* Tên danh mục mobile */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box-text p {
min-width: 0;
font-size:
clamp(11px, 3.2vw, 13px);
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.02em;
text-align: left;
}
/* Nút mũi tên mobile */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box-text-inner::after {
width: 28px;
height: 28px;
font-size: 14px;
}
}
/* =========================================================
16. MOBILE NHỎ
VẪN GIỮ 2 DANH MỤC / HÀNG
========================================================= */
@media screen and (max-width: 390px) {
/* Giữ khoảng cách sát hơn ở màn hình nhỏ */
.kht-danh-muc-gia-cong
> .section-content {
width:
calc(100% - 16px);
}
/* Giảm gap giữa 2 card */
.kht-danh-muc-gia-cong
.kht-dmgc-sp {
gap: 8px;
}
/* Thu card để vừa màn hình nhỏ */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box {
min-height: 225px;
border-radius: 13px;
}
/* Thu khoảng cách panel */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box-text {
right: 6px;
bottom: 6px;
left: 6px;
border-radius: 10px;
}
/* Thu padding bên trong panel */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box-text-inner {
gap: 4px;
padding:
9px 8px;
}
/* Thu font tên danh mục */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box-text p {
font-size: 11px;
line-height: 1.28;
}
/* Thu nút mũi tên */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box-text-inner::after {
width: 25px;
height: 25px;
font-size: 13px;
}
}
/* =========================================================
17. ACCESSIBILITY
========================================================= */
.kht-danh-muc-gia-cong
.kht-dmgc-sp
.box:focus-within {
outline:
3px solid rgba(57, 181, 74, 0.28);
outline-offset: 4px;
}
/* =========================================================
18. REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
/* Giảm hiệu ứng theo cài đặt thiết bị */
.kht-danh-muc-gia-cong *,
.kht-danh-muc-gia-cong *::before,
.kht-danh-muc-gia-cong *::after {
transition-duration: 0.01ms;
animation-duration: 0.01ms;
animation-iteration-count: 1;
}
}
/* =========================================================
KEHETO - SECTION NĂNG LỰC CỐT LÕI
PHONG CÁCH: CAPABILITY SPINE
Giao diện:
- Desktop: card trái, ảnh trung tâm, card phải.
- Hai cột card trái và phải bằng chiều rộng.
- Nhóm năng lực bên trái căn giữa theo chiều dọc.
- Card nội dung nằm trên ảnh và chiếm 60% chiều rộng.
- Không hiển thị số thứ tự tự tạo.
- Không hiển thị badge hoặc đường ngang xanh.
- Mobile: cả hai nhóm đều chia thành 2 cột.
- Mobile giảm chiều cao card nhưng giữ nguyên icon và text.
- Không sử dụng !important.
========================================================= */
/* =========================================================
1. BIẾN THIẾT KẾ CHUNG
========================================================= */
.kht-nang-luc-cot-loi {
--kht-primary: #43a046;
--kht-primary-medium: #2f8b38;
--kht-primary-dark: #1b5e20;
--kht-green-50: #f5faf5;
--kht-green-100: #e9f6ea;
--kht-green-200: #d2ead4;
--kht-green-300: #acd9af;
--kht-heading: #263238;
--kht-text: #505c61;
--kht-white: #ffffff;
--kht-border: rgba(67, 160, 70, 0.16);
--kht-border-hover: rgba(67, 160, 70, 0.42);
--kht-card-shadow:
0 8px 22px rgba(32, 65, 39, 0.065);
--kht-card-hover-shadow:
0 14px 30px rgba(31, 77, 41, 0.11);
--kht-card-active-shadow:
0 16px 34px rgba(27, 94, 32, 0.2);
--kht-panel-shadow:
0 28px 72px rgba(26, 60, 33, 0.14);
/* Chiều cao panel ảnh trên desktop */
--kht-panel-height: 600px;
/* Chiều cao card hai bên trên desktop */
--kht-side-card-height: 68px;
/* Chiều dài đường nối card và panel */
--kht-connector-width: 34px;
position: relative;
isolation: isolate;
overflow: hidden;
background: #f7faf7;
}
/* =========================================================
2. NỀN SECTION
========================================================= */
/* Tạo nền sáng với vùng xanh nhẹ hai bên */
.kht-nang-luc-cot-loi .section-bg {
background:
radial-gradient(
circle at 3% 13%,
rgba(184, 223, 187, 0.52) 0,
rgba(184, 223, 187, 0) 30%
),
radial-gradient(
circle at 97% 88%,
rgba(165, 214, 167, 0.34) 0,
rgba(165, 214, 167, 0) 31%
),
linear-gradient(
135deg,
#f4faf5 0%,
#ffffff 49%,
#f1f8f2 100%
);
}
/* Tạo lưới nền mờ */
.kht-nang-luc-cot-loi .section-bg::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.22;
pointer-events: none;
background-image:
linear-gradient(
rgba(67, 160, 70, 0.038) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(67, 160, 70, 0.038) 1px,
transparent 1px
);
background-size: 48px 48px;
mask-image:
linear-gradient(
to bottom,
transparent,
#000 14%,
#000 86%,
transparent
);
-webkit-mask-image:
linear-gradient(
to bottom,
transparent,
#000 14%,
#000 86%,
transparent
);
}
/* Tạo vòng tròn trang trí phía sau ảnh */
.kht-nang-luc-cot-loi .section-bg::after {
content: "";
position: absolute;
top: 90px;
left: 50%;
width: 540px;
height: 540px;
border: 86px solid rgba(67, 160, 70, 0.035);
border-radius: 50%;
transform: translateX(-50%);
pointer-events: none;
}
/* Đưa nội dung section lên trên lớp nền */
.kht-nang-luc-cot-loi .section-content {
position: relative;
z-index: 2;
padding-right: 15px;
padding-left: 15px;
}
/* =========================================================
3. TIÊU ĐỀ SECTION
Chức năng:
- Đồng nhất đúng format tiêu đề .kht-truoc-sau-text.
- Thanh xanh gradient dọc nằm bên trái tiêu đề.
- Bỏ đường nhấn ngang cũ phía dưới tiêu đề.
- Không thay đổi bố cục, tab, panel hoặc hiệu ứng của section.
========================================================= */
/* Hàng tiêu đề chính */
.kht-nang-luc-cot-loi .kht-nlcl-text {
position: relative;
width: 100%;
max-width: 1320px;
margin: 0 auto 38px;
padding-left: 24px;
text-align: left;
}
/* Thanh xanh dọc đúng format tiêu đề chuẩn */
.kht-nang-luc-cot-loi .kht-nlcl-text::before {
content: "";
position: absolute;
top: 4px;
bottom: 4px;
left: 0;
width: 5px;
border-radius: 20px;
background:
linear-gradient(
180deg,
#43a046,
#1b5e1f
);
}
/* Xóa padding mặc định của cột Flatsome */
.kht-nang-luc-cot-loi .kht-nlcl-text > .col {
padding: 0;
}
/* Reset khung chứa tiêu đề */
.kht-nang-luc-cot-loi .kht-nlcl-text .col-inner {
position: relative;
padding: 0;
}
/* Định dạng tiêu đề chính theo format chuẩn */
.kht-nang-luc-cot-loi .kht-nlcl-text p {
margin: 0;
color: #263238;
font-size: clamp(28px, 3vw, 40px);
font-weight: 700;
line-height: 1.16;
letter-spacing: -0.035em;
text-wrap: balance;
text-transform: uppercase;
}
/* Xóa đường nhấn ngang cũ dưới tiêu đề */
.kht-nang-luc-cot-loi .kht-nlcl-text p::after {
content: none;
display: none;
}
/* =========================================================
4. BỐ CỤC BA CỘT DESKTOP
========================================================= */
/*
* Làm phẳng cột đầu tiên của Flatsome.
* Hai row con trở thành hai cột độc lập trong grid.
*/
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:first-child,
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:first-child
> .col-inner {
display: contents;
}
/* Tạo bố cục card trái - panel ảnh - card phải */
.kht-nang-luc-cot-loi .kht-nlcl-text + .row {
display: grid;
grid-template-columns:
minmax(250px, 285px)
minmax(0, 1fr)
minmax(250px, 285px);
grid-template-areas:
"core panel support";
gap: 34px;
align-items: center;
width: 100%;
max-width: 1320px;
margin: 0 auto;
}
/* Đặt nhóm năng lực bên trái */
.kht-nang-luc-cot-loi .kht-nangluccotloi-trai {
grid-area: core;
align-self: center;
}
/* Đặt panel hình ảnh ở giữa */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:last-child {
grid-area: panel;
width: 100%;
max-width: none;
min-width: 0;
flex-basis: auto;
padding: 0;
}
/* Đặt nhóm dịch vụ bên phải */
.kht-nang-luc-cot-loi .kht-dichvuhotro-trai {
grid-area: support;
align-self: center;
}
/* =========================================================
5. RESET HAI NHÓM CARD
========================================================= */
/* Reset row chứa hai nhóm card */
.kht-nang-luc-cot-loi
:is(
.kht-nangluccotloi-trai,
.kht-dichvuhotro-trai
) {
width: 100%;
max-width: none;
margin: 0;
overflow: visible;
}
/* Reset cột trong hai nhóm */
.kht-nang-luc-cot-loi
:is(
.kht-nangluccotloi-trai,
.kht-dichvuhotro-trai
)
> .col {
width: 100%;
max-width: 100%;
flex-basis: 100%;
padding: 0;
overflow: visible;
}
/* Xếp card theo chiều dọc trên desktop */
.kht-nang-luc-cot-loi
:is(
.kht-nangluccotloi-trai,
.kht-dichvuhotro-trai
)
> .col
> .col-inner {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
overflow: visible;
}
/* =========================================================
6. TIÊU ĐỀ NHÓM
========================================================= */
/* Định dạng tiêu đề nhóm */
.kht-nang-luc-cot-loi
:is(
.kht-nangluccotloi-trai,
.kht-dichvuhotro-trai
)
> .col
> .col-inner
> p {
position: relative;
display: flex;
align-items: center;
min-height: 30px;
margin: 0 0 2px;
padding-left: 17px;
color: var(--kht-primary-dark);
font-size: 20px;
font-weight: 800;
line-height: 1.3;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* Tạo vạch đứng trước tiêu đề nhóm */
.kht-nang-luc-cot-loi
:is(
.kht-nangluccotloi-trai,
.kht-dichvuhotro-trai
)
> .col
> .col-inner
> p::before {
content: "";
position: absolute;
top: 3px;
bottom: 3px;
left: 0;
width: 4px;
border-radius: 99px;
background:
linear-gradient(
to bottom,
var(--kht-primary),
var(--kht-primary-dark)
);
}
/* =========================================================
7. CARD CHUNG HAI BÊN
========================================================= */
/* Đồng bộ giao diện card trái và card phải */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"] {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
width: 100%;
min-width: 0;
height: var(--kht-side-card-height);
min-height: var(--kht-side-card-height);
margin: 0;
padding: 5px 13px;
border: 1px solid var(--kht-border);
border-radius: 15px;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.98),
rgba(248, 252, 249, 0.95)
);
box-shadow: var(--kht-card-shadow);
cursor: pointer;
user-select: none;
touch-action: manipulation;
overflow: visible;
isolation: isolate;
transition:
transform 0.32s ease,
border-color 0.32s ease,
background-color 0.32s ease,
box-shadow 0.32s ease;
}
/* Hiển thị focus khi sử dụng bàn phím */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"]:focus-visible {
outline: 3px solid rgba(67, 160, 70, 0.25);
outline-offset: 4px;
}
/* =========================================================
8. CARD BÊN TRÁI
========================================================= */
/* Card trái dịch nhẹ về phía ảnh khi hover */
.kht-nang-luc-cot-loi
.kht-nangluccotloi-trai
.icon-box[class*="kht-nlcl-trai"]:hover {
transform: translateX(5px);
border-color: var(--kht-border-hover);
box-shadow: var(--kht-card-hover-shadow);
}
/* Tạo đường nối từ card trái đến panel */
.kht-nang-luc-cot-loi
.kht-nangluccotloi-trai
.icon-box[class*="kht-nlcl-trai"]::before {
content: "";
position: absolute;
z-index: -1;
top: 50%;
right: calc(var(--kht-connector-width) * -1);
width: var(--kht-connector-width);
height: 1px;
background:
linear-gradient(
90deg,
rgba(67, 160, 70, 0.18),
rgba(67, 160, 70, 0.68)
);
transform: translateY(-50%);
transition:
height 0.32s ease,
background-color 0.32s ease,
box-shadow 0.32s ease;
}
/* Tạo node tròn cuối đường nối bên trái */
.kht-nang-luc-cot-loi
.kht-nangluccotloi-trai
.icon-box[class*="kht-nlcl-trai"]::after {
content: "";
position: absolute;
z-index: 3;
top: 50%;
right: calc((var(--kht-connector-width) + 7px) * -1);
width: 13px;
height: 13px;
border: 3px solid var(--kht-white);
border-radius: 50%;
background: var(--kht-green-300);
box-shadow:
0 0 0 1px rgba(67, 160, 70, 0.26);
transform: translateY(-50%);
transition:
transform 0.32s ease,
background-color 0.32s ease,
box-shadow 0.32s ease;
}
/* =========================================================
9. CARD BÊN PHẢI
========================================================= */
/* Card phải dịch nhẹ về phía ảnh khi hover */
.kht-nang-luc-cot-loi
.kht-dichvuhotro-trai
.icon-box[class*="kht-nlcl-trai"]:hover {
transform: translateX(-5px);
border-color: var(--kht-border-hover);
box-shadow: var(--kht-card-hover-shadow);
}
/* Tạo đường nối từ card phải đến panel */
.kht-nang-luc-cot-loi
.kht-dichvuhotro-trai
.icon-box[class*="kht-nlcl-trai"]::before {
content: "";
position: absolute;
z-index: -1;
top: 50%;
left: calc(var(--kht-connector-width) * -1);
width: var(--kht-connector-width);
height: 1px;
background:
linear-gradient(
90deg,
rgba(67, 160, 70, 0.68),
rgba(67, 160, 70, 0.18)
);
transform: translateY(-50%);
transition:
height 0.32s ease,
background-color 0.32s ease,
box-shadow 0.32s ease;
}
/* Tạo node tròn cuối đường nối bên phải */
.kht-nang-luc-cot-loi
.kht-dichvuhotro-trai
.icon-box[class*="kht-nlcl-trai"]::after {
content: "";
position: absolute;
z-index: 3;
top: 50%;
left: calc((var(--kht-connector-width) + 7px) * -1);
width: 13px;
height: 13px;
border: 3px solid var(--kht-white);
border-radius: 50%;
background: var(--kht-green-300);
box-shadow:
0 0 0 1px rgba(67, 160, 70, 0.26);
transform: translateY(-50%);
transition:
transform 0.32s ease,
background-color 0.32s ease,
box-shadow 0.32s ease;
}
/* =========================================================
10. ICON TRONG CARD
========================================================= */
/* Đồng bộ vùng icon */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"]
.icon-box-img {
display: block;
flex: 0 0 42px;
width: 42px;
min-width: 42px;
max-width: 42px;
margin: 0 11px 0 0;
}
/* Tạo khung nền cho icon */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"]
.icon-inner {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: 1px solid rgba(67, 160, 70, 0.14);
border-radius: 11px;
background: var(--kht-green-100);
overflow: hidden;
transition:
transform 0.32s ease,
border-color 0.32s ease,
background-color 0.32s ease,
box-shadow 0.32s ease;
}
/* Định dạng hình icon */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"]
.icon-inner img {
display: block;
width: 28px;
height: 28px;
object-fit: contain;
}
/* Nghiêng nhẹ icon khi hover */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"]:hover
.icon-inner {
transform: rotate(-3deg);
}
/* =========================================================
11. TEXT TRONG CARD
========================================================= */
/* Cho vùng text chiếm phần chiều rộng còn lại */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"]
.icon-box-text {
display: flex;
flex: 1 1 0;
align-items: center;
width: auto;
min-width: 0;
padding: 0;
}
/* Xóa số thứ tự được tạo bởi phiên bản CSS cũ */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"]
.icon-box-text::before {
content: none;
display: none;
}
/* Hiển thị nội dung nguyên bản trong HTML */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"]
.icon-box-text p {
width: 100%;
margin: 0;
color: var(--kht-heading);
font-size: 12.5px;
font-weight: 750;
line-height: 1.32;
letter-spacing: -0.012em;
white-space: normal;
overflow-wrap: break-word;
transition: color 0.32s ease;
}
/* =========================================================
12. TRẠNG THÁI CARD ACTIVE
========================================================= */
/* Tạo nền xanh cho card đang được chọn */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"].is-active {
border-color: transparent;
background:
linear-gradient(
135deg,
var(--kht-primary) 0%,
var(--kht-primary-medium) 54%,
var(--kht-primary-dark) 100%
);
box-shadow: var(--kht-card-active-shadow);
}
/* Card active bên trái tiến về phía panel */
.kht-nang-luc-cot-loi
.kht-nangluccotloi-trai
.icon-box[class*="kht-nlcl-trai"].is-active {
transform: translateX(5px);
}
/* Card active bên phải tiến về phía panel */
.kht-nang-luc-cot-loi
.kht-dichvuhotro-trai
.icon-box[class*="kht-nlcl-trai"].is-active {
transform: translateX(-5px);
}
/* Làm sáng đường nối của card active */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"].is-active::before {
height: 3px;
background: var(--kht-primary);
box-shadow:
0 0 12px rgba(67, 160, 70, 0.36);
}
/* Tạo hiệu ứng phát sáng cho node active */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"].is-active::after {
background: var(--kht-primary);
box-shadow:
0 0 0 4px rgba(67, 160, 70, 0.15),
0 0 18px rgba(67, 160, 70, 0.46);
transform:
translateY(-50%)
scale(1.08);
}
/* Chuyển nền icon active thành trắng */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"].is-active
.icon-inner {
border-color: rgba(255, 255, 255, 0.78);
background: var(--kht-white);
box-shadow:
0 8px 18px rgba(16, 62, 19, 0.16);
}
/* Chuyển text active thành trắng */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"].is-active
.icon-box-text p {
color: var(--kht-white);
}
/* =========================================================
13. KHUNG CHỨA PANEL TRUNG TÂM
========================================================= */
/* Tạo khung định vị cho toàn bộ panel */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:last-child
> .col-inner {
position: relative;
width: 100%;
height: var(--kht-panel-height);
min-height: var(--kht-panel-height);
}
/* Reset row trung gian của Flatsome */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:last-child
> .col-inner
> .row {
position: static;
width: 100%;
max-width: none;
margin: 0;
}
/* Reset cột trung gian của Flatsome */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:last-child
> .col-inner
> .row
> .col {
position: static;
width: 100%;
max-width: 100%;
flex-basis: 100%;
padding: 0;
}
/* Reset col-inner trung gian */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:last-child
> .col-inner
> .row
> .col
> .col-inner {
position: static;
}
/* =========================================================
14. PANEL ẢNH
========================================================= */
/* Mặc định ẩn tất cả panel */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"] {
position: absolute;
inset: 0;
display: none;
width: 100%;
max-width: none;
height: 100%;
min-height: 100%;
margin: 0;
border: 1px solid rgba(67, 160, 70, 0.14);
border-radius: 28px;
background: var(--kht-white);
box-shadow: var(--kht-panel-shadow);
overflow: hidden;
isolation: isolate;
}
/* Hiển thị panel đang active */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"].is-active {
display: block;
}
/* Hiển thị panel đầu tiên trước khi JavaScript khởi tạo */
.kht-nang-luc-cot-loi:not([data-kht-nlcl-ready])
.kht-nlcl-phai1 {
display: block;
}
/* Tạo lớp gradient nhẹ phía dưới ảnh */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]::before {
content: "";
position: absolute;
z-index: 2;
inset: 0;
pointer-events: none;
background:
linear-gradient(
to top,
rgba(9, 33, 16, 0.27) 0%,
rgba(9, 33, 16, 0.04) 42%,
transparent 68%
);
}
/* Xóa số thứ tự được tự thêm trên ảnh */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]::after {
content: none;
display: none;
}
/* =========================================================
15. ẢNH PHỦ TOÀN BỘ PANEL
========================================================= */
/* Cho cột ảnh phủ toàn bộ panel */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
> .col:first-child {
position: absolute;
z-index: 1;
inset: 0;
width: 100%;
max-width: 100%;
height: 100%;
flex-basis: 100%;
padding: 0;
}
/* Cho col-inner ảnh phủ toàn bộ panel */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
> .col:first-child
> .col-inner {
width: 100%;
height: 100%;
}
/* Cho khung ảnh phủ toàn bộ */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
.img,
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
.img-inner {
width: 100%;
height: 100%;
}
/* Hiển thị ảnh theo dạng cover */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
.img-inner img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1);
transition:
transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Zoom nhẹ ảnh khi hover */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]:hover
.img-inner img {
transform: scale(1.025);
}
/* =========================================================
16. CARD NỘI DUNG NẰM TRÊN ẢNH
========================================================= */
/* Card nội dung chiếm 60% chiều rộng ảnh */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
> .col:last-child {
position: absolute;
z-index: 4;
right: 24px;
bottom: 24px;
width: 60%;
max-width: calc(100% - 48px);
height: auto;
flex-basis: auto;
padding: 0;
}
/* Tạo nền kính mờ cho card nội dung */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
> .col:last-child
> .col-inner {
position: relative;
display: block;
width: 100%;
padding: 22px 24px 24px;
border: 1px solid rgba(255, 255, 255, 0.84);
border-radius: 21px;
background: rgba(255, 255, 255, 0.93);
box-shadow:
0 18px 42px rgba(15, 44, 22, 0.17);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
/* Xóa badge được tạo bởi phiên bản cũ */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
> .col:last-child
> .col-inner::before {
content: none;
display: none;
}
/* Định dạng tiêu đề nguyên bản trong HTML */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
h3 {
margin: 0 0 11px;
padding: 0;
color: var(--kht-heading);
font-size: clamp(19px, 1.55vw, 24px);
font-weight: 800;
line-height: 1.28;
letter-spacing: -0.03em;
}
/* Xóa đường ngang xanh trong card nội dung */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
h3::before,
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
h3::after {
content: none;
display: none;
}
/* Định dạng mô tả nguyên bản */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
p {
margin: 0;
color: var(--kht-text);
font-size: 12.5px;
font-weight: 400;
line-height: 1.62;
text-align: left;
}
/* =========================================================
17. LAPTOP VÀ TABLET NGANG
========================================================= */
@media screen and (min-width: 850px) and (max-width: 1199px) {
/* Thu nhỏ panel và card trên laptop nhỏ */
.kht-nang-luc-cot-loi {
--kht-panel-height: 540px;
--kht-side-card-height: 64px;
--kht-connector-width: 24px;
}
/* Giữ hai cột card bằng chiều rộng */
.kht-nang-luc-cot-loi .kht-nlcl-text + .row {
grid-template-columns:
minmax(205px, 225px)
minmax(0, 1fr)
minmax(205px, 225px);
gap: 24px;
}
/* Giảm padding dọc card trên laptop */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"] {
padding-top: 4px;
padding-bottom: 4px;
}
/* Điều chỉnh vị trí card nội dung */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
> .col:last-child {
right: 19px;
bottom: 19px;
width: 60%;
max-width: calc(100% - 38px);
}
/* Thu nhỏ padding card nội dung */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
> .col:last-child
> .col-inner {
padding: 19px 20px 21px;
}
/* Thu nhỏ tiêu đề panel */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
h3 {
font-size: 19px;
}
/* Thu nhỏ mô tả panel */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
p {
font-size: 11.5px;
line-height: 1.58;
}
}
/* =========================================================
18. TABLET DỌC VÀ MOBILE
CẢ HAI NHÓM ĐỀU CHIA THÀNH 2 CỘT
========================================================= */
@media screen and (max-width: 849px) {
/* Reset panel desktop và giảm chiều cao card */
.kht-nang-luc-cot-loi {
--kht-panel-height: auto;
--kht-side-card-height: 60px;
}
/* Điều chỉnh khoảng cách tiêu đề section trên tablet */
.kht-nang-luc-cot-loi .kht-nlcl-text {
margin-bottom: 28px;
}
/*
* Khôi phục cấu trúc block trên mobile.
* display: contents chỉ dùng cho desktop.
*/
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:first-child,
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:first-child
> .col-inner {
display: block;
}
/* Chuyển bố cục chính thành một cột */
.kht-nang-luc-cot-loi .kht-nlcl-text + .row {
display: block;
}
/* Reset chiều rộng cột mặc định */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col {
width: 100%;
max-width: 100%;
flex-basis: 100%;
padding: 0;
}
/* Tạo khoảng cách dưới nhóm năng lực */
.kht-nang-luc-cot-loi .kht-nangluccotloi-trai {
margin-bottom: 12px;
}
/* Tạo khoảng cách dưới nhóm dịch vụ */
.kht-nang-luc-cot-loi .kht-dichvuhotro-trai {
margin-bottom: 16px;
}
/*
* Cả hai nhóm sử dụng chung bố cục 2 cột.
*/
.kht-nang-luc-cot-loi
:is(
.kht-nangluccotloi-trai,
.kht-dichvuhotro-trai
)
> .col
> .col-inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
padding: 9px;
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 18px;
background: rgba(255, 255, 255, 0.76);
box-shadow:
0 14px 34px rgba(38, 50, 56, 0.07),
inset 0 0 0 1px rgba(67, 160, 70, 0.045);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
/* Tiêu đề nhóm chiếm toàn bộ hai cột */
.kht-nang-luc-cot-loi
:is(
.kht-nangluccotloi-trai,
.kht-dichvuhotro-trai
)
> .col
> .col-inner
> p {
grid-column: 1 / -1;
min-height: 26px;
margin: 0;
}
/*
* Mỗi card chiếm một ô.
* Giảm chiều cao card xuống 60px.
*/
.kht-nang-luc-cot-loi
:is(
.kht-nangluccotloi-trai,
.kht-dichvuhotro-trai
)
.icon-box[class*="kht-nlcl-trai"] {
grid-column: auto;
width: 100%;
min-width: 0;
height: var(--kht-side-card-height);
min-height: var(--kht-side-card-height);
padding: 3px 8px;
border-radius: 13px;
transform: none;
}
/* Tắt dịch chuyển card trên thiết bị cảm ứng */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"]:hover,
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"].is-active {
transform: none;
}
/* Ẩn đường nối và node trên mobile */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"]::before,
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"]::after {
display: none;
}
/* Giữ kích thước vùng icon */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"]
.icon-box-img {
flex: 0 0 35px;
width: 35px;
min-width: 35px;
max-width: 35px;
margin: 0 8px 0 0;
}
/* Giữ kích thước khung icon */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"]
.icon-inner {
width: 35px;
height: 35px;
border-radius: 9px;
}
/* Giữ kích thước hình icon */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"]
.icon-inner img {
width: 19px;
height: 19px;
}
/* Căn giữa nội dung theo chiều dọc */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"]
.icon-box-text {
display: flex;
flex: 1 1 0;
align-items: center;
width: auto;
min-width: 0;
height: 100%;
padding: 0;
}
/* Giữ nguyên nội dung card */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"]
.icon-box-text p {
width: 100%;
margin: 0;
font-size: 10px;
line-height: 1.24;
white-space: normal;
overflow-wrap: break-word;
}
/* Reset khung chứa panel */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:last-child
> .col-inner {
height: auto;
min-height: 0;
}
/* Đưa wrapper panel trở lại luồng tài liệu */
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:last-child
> .col-inner
> .row,
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:last-child
> .col-inner
> .row
> .col,
.kht-nang-luc-cot-loi
.kht-nlcl-text + .row
> .col:last-child
> .col-inner
> .row
> .col
> .col-inner {
position: static;
}
/* Reset panel trên mobile */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"] {
position: relative;
inset: auto;
height: auto;
min-height: 0;
border-radius: 21px;
}
/* Hiển thị panel active */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"].is-active,
.kht-nang-luc-cot-loi:not([data-kht-nlcl-ready])
.kht-nlcl-phai1 {
display: block;
}
/* Tắt lớp gradient desktop */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]::before {
display: none;
}
/* Đưa cột ảnh trở lại luồng tài liệu */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
> .col:first-child {
position: relative;
inset: auto;
width: 100%;
max-width: 100%;
height: auto;
flex-basis: 100%;
}
/* Tạo tỷ lệ ảnh 16:9 */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
> .col:first-child
> .col-inner,
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
.img,
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
.img-inner {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
/* Cho ảnh phủ khung 16:9 */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
.img-inner img {
width: 100%;
height: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center;
}
/* Đưa card nội dung xuống dưới ảnh */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
> .col:last-child {
position: relative;
right: auto;
bottom: auto;
width: 100%;
max-width: 100%;
flex-basis: 100%;
padding: 0;
}
/* Reset nền kính mờ trên mobile */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
> .col:last-child
> .col-inner {
padding: 22px 19px 25px;
border: 0;
border-radius: 0;
background:
linear-gradient(
145deg,
#ffffff,
#f7fbf7
);
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* Tiêu đề panel mobile */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
h3 {
margin-bottom: 11px;
font-size: 19px;
}
/* Nội dung panel mobile */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
p {
font-size: 13px;
line-height: 1.6;
}
}
/* =========================================================
19. ĐIỆN THOẠI NHỎ
GIẢM CHIỀU CAO CARD XUỐNG 56PX
========================================================= */
@media screen and (max-width: 549px) {
/* Giảm chiều cao card trên điện thoại */
.kht-nang-luc-cot-loi {
--kht-side-card-height: 56px;
}
/* Thu hẹp khoảng cách hai bên section */
.kht-nang-luc-cot-loi .section-content {
padding-right: 8px;
padding-left: 8px;
}
/* Thu gọn khoảng cách thanh xanh trên mobile */
.kht-nang-luc-cot-loi .kht-nlcl-text {
margin-bottom: 22px;
padding-left: 17px;
}
/* Thu nhỏ thanh xanh trên mobile */
.kht-nang-luc-cot-loi .kht-nlcl-text::before {
width: 4px;
}
/* Kích thước tiêu đề mobile đúng format chuẩn */
.kht-nang-luc-cot-loi .kht-nlcl-text p {
font-size: clamp(17px, 2.8vw, 24px);
line-height: 1.2;
letter-spacing: -0.025em;
}
/* Thu nhỏ khung hai nhóm card */
.kht-nang-luc-cot-loi
:is(
.kht-nangluccotloi-trai,
.kht-dichvuhotro-trai
)
> .col
> .col-inner {
gap: 5px;
padding: 7px;
border-radius: 16px;
}
/* Thu nhỏ tiêu đề nhóm */
.kht-nang-luc-cot-loi
:is(
.kht-nangluccotloi-trai,
.kht-dichvuhotro-trai
)
> .col
> .col-inner
> p {
min-height: 24px;
font-size: 10px;
}
/*
* Giảm padding dọc để card đạt chiều cao 56px.
* Kích thước icon và nội dung vẫn được giữ.
*/
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"] {
height: var(--kht-side-card-height);
min-height: var(--kht-side-card-height);
padding: 2px 6px;
border-radius: 12px;
}
/* Giữ vùng icon ở kích thước 31px */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"]
.icon-box-img {
flex-basis: 31px;
width: 31px;
min-width: 31px;
max-width: 31px;
margin-right: 6px;
}
/* Giữ kích thước khung icon */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"]
.icon-inner {
width: 31px;
height: 31px;
}
/* Giữ kích thước hình icon */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"]
.icon-inner img {
width: 17px;
height: 17px;
}
/* Giữ nội dung card và giảm nhẹ line-height */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"]
.icon-box-text p {
font-size: 9.2px;
line-height: 1.2;
letter-spacing: -0.02em;
}
/* Thu nhỏ padding card nội dung */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
> .col:last-child
> .col-inner {
padding: 19px 16px 22px;
}
/* Thu nhỏ tiêu đề panel */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
h3 {
font-size: 18px;
}
/* Thu nhỏ mô tả panel */
.kht-nang-luc-cot-loi
.row[class*="kht-nlcl-phai"]
p {
font-size: 12.5px;
line-height: 1.58;
}
}
/* =========================================================
20. MÀN HÌNH RẤT NHỎ
GIỮ 2 CỘT VÀ GIẢM CARD XUỐNG 54PX
========================================================= */
@media screen and (max-width: 389px) {
/* Giảm chiều cao card trên màn hình rất nhỏ */
.kht-nang-luc-cot-loi {
--kht-side-card-height: 54px;
}
/* Cả hai nhóm tiếp tục giữ bố cục 2 cột */
.kht-nang-luc-cot-loi
:is(
.kht-nangluccotloi-trai,
.kht-dichvuhotro-trai
)
> .col
> .col-inner {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px;
padding: 6px;
}
/* Thu nhỏ padding ngang card */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"] {
height: var(--kht-side-card-height);
min-height: var(--kht-side-card-height);
padding-right: 4px;
padding-left: 4px;
}
/* Thu nhỏ khoảng cách icon và text */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"]
.icon-box-img {
margin-right: 5px;
}
/* Cân chỉnh text trên màn hình rất nhỏ */
.kht-nang-luc-cot-loi
.icon-box[class*="kht-nlcl-trai"]
.icon-box-text p {
font-size: 8.7px;
line-height: 1.18;
}
}
/* =========================================================
21. HỖ TRỢ GIẢM CHUYỂN ĐỘNG
========================================================= */
@media (prefers-reduced-motion: reduce) {
/* Tắt animation theo thiết lập hệ điều hành */
.kht-nang-luc-cot-loi *,
.kht-nang-luc-cot-loi *::before,
.kht-nang-luc-cot-loi *::after {
scroll-behavior: auto;
transition-duration: 0.01ms;
animation-duration: 0.01ms;
animation-iteration-count: 1;
}
}
/* =========================================================
KEHETO - SECTION IPCR
- Container chuẩn: 1320px
- Tiêu đề: 30px
- Nội dung: 16px
- Cuộn phim tương thích GSAP
- Cột trái quyết định chiều cao trên desktop
- Cột phải phủ đúng chiều cao cột trái
- Giảm khoảng trống trong ảnh minh họa bên phải
- Responsive desktop, tablet và mobile
- Không sử dụng !important
========================================================= */
/* =========================================================
1. BIẾN MÀU VÀ THÔNG SỐ CHUNG
========================================================= */
.kht-ipcr {
/* Màu chính KEHETO */
--kht-primary: #42a54d;
--kht-shade-1: #3a9544;
--kht-shade-2: #30823a;
--kht-shade-3: #1f7131;
--kht-shade-4: #195321;
--kht-shade-5: #113617;
/* Màu sáng KEHETO */
--kht-tint-1: #5ab264;
--kht-tint-2: #75bf7d;
--kht-tint-3: #9bd0a0;
--kht-tint-4: #c0e2c4;
--kht-tint-5: #e4f3e6;
/* Màu trung tính */
--kht-black: #263238;
--kht-dark-grey: #4d4d4d;
--kht-grey: #717171;
--kht-light-grey: #89939e;
--kht-silver: #f5f7fa;
--kht-white: #ffffff;
/* Chiều ngang chuẩn của website */
--kht-container-width: 1320px;
/* Chiều cao background cuộn phim desktop */
--kht-ipcr-film-height: 252px;
/* Chiều cao từng ảnh trong cuộn phim */
--kht-ipcr-film-image-height: 184px;
/* Chiều rộng card được JavaScript cập nhật */
--kht-ipcr-film-card-width: 280px;
/* Khoảng cách giữa các ảnh */
--kht-ipcr-film-gap: 14px;
/* Nâng dải ảnh để căn giữa background */
--kht-ipcr-film-offset-y: -12px;
/* Vùng ẩn cứng bên trái */
--kht-ipcr-film-left-cut: 24px;
/* Vùng mờ dần bên phải */
--kht-ipcr-film-right-fade: 92px;
position: relative;
width: 100%;
overflow: hidden;
/* Khoảng cách bên ngoài section */
padding: 30px 0;
background:
radial-gradient(
circle at 4% 10%,
rgba(192, 226, 196, 0.16),
transparent 27%
),
radial-gradient(
circle at 97% 88%,
rgba(228, 243, 230, 0.55),
transparent 30%
),
linear-gradient(
135deg,
#fffdf8 0%,
#fbfaf6 56%,
#f2f8f3 100%
);
}
/* Đồng bộ cách tính kích thước trong section */
.kht-ipcr,
.kht-ipcr *,
.kht-ipcr *::before,
.kht-ipcr *::after {
box-sizing: border-box;
}
/* Tạo họa tiết chấm nhẹ trên nền */
.kht-ipcr::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.14;
background-image:
radial-gradient(
circle,
rgba(31, 113, 49, 0.25) 0 1px,
transparent 1.5px
);
background-size: 50px 50px;
}
/* Tạo vòng tròn trang trí phía bên phải */
.kht-ipcr::after {
content: "";
position: absolute;
right: -240px;
bottom: -320px;
width: 650px;
height: 650px;
border: 1px solid rgba(66, 165, 77, 0.08);
border-radius: 50%;
box-shadow:
0 0 0 70px rgba(66, 165, 77, 0.018),
0 0 0 140px rgba(66, 165, 77, 0.012);
pointer-events: none;
}
/* =========================================================
2. SECTION CONTENT
========================================================= */
.kht-ipcr .section-content {
position: relative;
z-index: 2;
width: 100%;
max-width: none;
margin: 0;
/* Khoảng cách nội dung trên và dưới */
padding: 50px 0;
}
/* =========================================================
3. LAYOUT CHÍNH
- Cột trái quyết định chiều cao hàng Grid
- Cột phải kéo giãn theo chiều cao cột trái
========================================================= */
.kht-ipcr .section-content > .kht-ipcr-layout.row.row-small {
display: grid;
grid-template-columns:
minmax(0, 2fr)
minmax(370px, 1fr);
align-items: stretch;
gap: 28px;
width: calc(100% - 30px);
max-width: var(--kht-container-width);
margin: 0 auto;
padding: 0;
}
/* Xóa clearfix mặc định của Flatsome */
.kht-ipcr .kht-ipcr-layout::before,
.kht-ipcr .kht-ipcr-layout::after {
content: none;
display: none;
}
/* Xóa gutter và kích thước cột mặc định */
.kht-ipcr .kht-ipcr-layout > .col {
float: none;
width: auto;
min-width: 0;
min-height: 0;
max-width: none;
flex: none;
flex-basis: auto;
align-self: stretch;
margin: 0;
padding: 0;
}
/* Cho col-inner phủ toàn bộ chiều cao Grid */
.kht-ipcr .kht-ipcr-layout > .col > .col-inner {
width: 100%;
height: 100%;
min-height: 0;
margin: 0;
}
/* =========================================================
4. CỘT BÊN TRÁI
========================================================= */
.kht-ipcr .kht-ipcr-left {
min-width: 0;
min-height: 0;
}
/* Xếp tiêu đề, mô tả và cuộn phim theo chiều dọc */
.kht-ipcr .kht-ipcr-left > .col-inner {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: auto;
min-height: 0;
padding: 6px 0 0;
}
/* =========================================================
5. TIÊU ĐỀ BÊN TRÁI
========================================================= */
.kht-ipcr .kht-ipcr-text1 {
position: relative;
z-index: 4;
width: 100%;
max-width: 930px;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
/* Xóa phần trang trí cũ của tiêu đề */
.kht-ipcr .kht-ipcr-text1::before,
.kht-ipcr .kht-ipcr-text1::after {
content: none;
display: none;
}
/* Định dạng tiêu đề */
.kht-ipcr .kht-ipcr-text1 p {
margin: 0;
color: var(--kht-shade-4);
font-size: 30px;
font-weight: 700;
line-height: 1.42;
letter-spacing: -0.5px;
}
/* =========================================================
6. NỘI DUNG MÔ TẢ BÊN TRÁI
========================================================= */
.kht-ipcr .kht-ipcr-text2 {
position: relative;
z-index: 4;
width: 100%;
max-width: 950px;
margin: 21px 0 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
/* Xóa phần trang trí cũ của mô tả */
.kht-ipcr .kht-ipcr-text2::before,
.kht-ipcr .kht-ipcr-text2::after {
content: none;
display: none;
}
/* Định dạng các đoạn nội dung */
.kht-ipcr .kht-ipcr-text2 p {
margin: 0 0 8px;
color: #303631;
font-size: 16px;
font-weight: 400;
line-height: 1.75;
}
/* Xóa khoảng cách đoạn cuối */
.kht-ipcr .kht-ipcr-text2 p:last-child {
margin-bottom: 0;
}
/* =========================================================
7. BACKGROUND CUỘN PHIM
========================================================= */
.kht-ipcr .kht-ipcr-thuocphim {
position: relative;
z-index: 1;
width: 100%;
height: var(--kht-ipcr-film-height);
margin: 26px 0 0;
overflow: hidden;
border-radius: 14px;
}
/* Cho khung background phủ toàn bộ khu vực */
.kht-ipcr .kht-ipcr-thuocphim .img-inner {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* Cho ảnh background phủ kín khung */
.kht-ipcr .kht-ipcr-thuocphim img {
display: block;
width: 100%;
height: 100%;
margin: 0;
object-fit: fill;
object-position: center;
opacity: 0.94;
}
/* =========================================================
8. VIEWPORT CUỘN PHIM GSAP
- Bên trái ẩn cứng
- Bên phải mờ dần
========================================================= */
.kht-ipcr .kht-ipcr-chayphim {
position: relative;
z-index: 3;
display: block;
width: 100%;
height: var(--kht-ipcr-film-height);
min-height: var(--kht-ipcr-film-height);
max-width: none;
/* Chồng chính xác viewport lên background */
margin: calc(var(--kht-ipcr-film-height) * -1) 0 0;
padding: 0;
overflow: hidden;
isolation: isolate;
touch-action: pan-y;
/* Tạo vùng ẩn trái và mờ dần bên phải */
-webkit-mask-image:
linear-gradient(
to right,
transparent 0,
transparent var(--kht-ipcr-film-left-cut),
#000 var(--kht-ipcr-film-left-cut),
#000 calc(100% - var(--kht-ipcr-film-right-fade)),
transparent 100%
);
mask-image:
linear-gradient(
to right,
transparent 0,
transparent var(--kht-ipcr-film-left-cut),
#000 var(--kht-ipcr-film-left-cut),
#000 calc(100% - var(--kht-ipcr-film-right-fade)),
transparent 100%
);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/* Xóa pseudo-element mặc định của row */
.kht-ipcr .kht-ipcr-chayphim::before,
.kht-ipcr .kht-ipcr-chayphim::after {
content: none;
display: none;
}
/* =========================================================
9. TRACK ẢNH DO JAVASCRIPT TẠO
========================================================= */
.kht-ipcr .kht-ipcr-film-track {
position: relative;
/* Căn track theo chiều dọc background */
top: var(--kht-ipcr-film-offset-y);
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: var(--kht-ipcr-film-gap);
width: max-content;
height: 100%;
padding-right: 16px;
padding-left: 16px;
will-change: transform;
}
/* Thiết lập chiều rộng từng card ảnh */
.kht-ipcr .kht-ipcr-film-track > .col {
float: none;
flex: 0 0 var(--kht-ipcr-film-card-width);
width: var(--kht-ipcr-film-card-width);
min-width: var(--kht-ipcr-film-card-width);
max-width: var(--kht-ipcr-film-card-width);
margin: 0;
padding: 0;
}
/* Không kéo giãn nội dung card theo chiều cao track */
.kht-ipcr .kht-ipcr-film-track > .col > .col-inner {
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
/* =========================================================
10. FALLBACK TRƯỚC KHI GSAP KHỞI TẠO
========================================================= */
.kht-ipcr
.kht-ipcr-chayphim:not([data-kht-film-ready="true"]) {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: var(--kht-ipcr-film-gap);
padding: 0 16px;
}
/* Thiết lập card ảnh fallback */
.kht-ipcr
.kht-ipcr-chayphim:not([data-kht-film-ready="true"])
> .col {
float: none;
flex: 0 0 var(--kht-ipcr-film-card-width);
width: var(--kht-ipcr-film-card-width);
min-width: var(--kht-ipcr-film-card-width);
max-width: var(--kht-ipcr-film-card-width);
margin: 0;
padding: 0;
}
/* =========================================================
11. KHUNG ẢNH CUỘN PHIM
========================================================= */
.kht-ipcr .kht-ipcr-film-track .img,
.kht-ipcr .kht-ipcr-film-track .img-inner,
.kht-ipcr
.kht-ipcr-chayphim:not([data-kht-film-ready="true"])
.img,
.kht-ipcr
.kht-ipcr-chayphim:not([data-kht-film-ready="true"])
.img-inner {
clip-path: none;
transform-origin: center;
}
/* Xóa pseudo-element cũ có thể tạo góc tam giác */
.kht-ipcr .kht-ipcr-film-track > .col::before,
.kht-ipcr .kht-ipcr-film-track > .col::after,
.kht-ipcr .kht-ipcr-film-track > .col > .col-inner::before,
.kht-ipcr .kht-ipcr-film-track > .col > .col-inner::after,
.kht-ipcr .kht-ipcr-film-track .img::before,
.kht-ipcr .kht-ipcr-film-track .img::after,
.kht-ipcr .kht-ipcr-film-track .img-inner::before,
.kht-ipcr .kht-ipcr-film-track .img-inner::after {
content: none;
display: none;
}
/* Vùng có thể nhấn để mở lightbox */
.kht-ipcr .kht-ipcr-film-track .img,
.kht-ipcr
.kht-ipcr-chayphim:not([data-kht-film-ready="true"])
.img {
width: 100%;
height: auto;
margin: 0;
cursor: zoom-in;
}
/* Thiết kế khung từng ảnh */
.kht-ipcr .kht-ipcr-film-track .img-inner,
.kht-ipcr
.kht-ipcr-chayphim:not([data-kht-film-ready="true"])
.img-inner {
position: relative;
width: 100%;
height: var(--kht-ipcr-film-image-height);
min-height: var(--kht-ipcr-film-image-height);
overflow: hidden;
isolation: isolate;
border: 1px solid rgba(66, 165, 77, 0.16);
border-radius: 10px;
background: var(--kht-tint-5);
box-shadow:
0 8px 20px rgba(17, 54, 23, 0.12);
transition:
transform 0.35s ease,
border-color 0.35s ease,
box-shadow 0.35s ease;
}
/* Tạo phản hồi khi hover card */
.kht-ipcr .kht-ipcr-film-track .img:hover .img-inner,
.kht-ipcr
.kht-ipcr-chayphim:not([data-kht-film-ready="true"])
.img:hover
.img-inner {
transform: translateY(-3px);
border-color: rgba(66, 165, 77, 0.3);
box-shadow:
0 14px 30px rgba(17, 54, 23, 0.18);
}
/* Cho ảnh phủ kín card */
.kht-ipcr .kht-ipcr-film-track img,
.kht-ipcr
.kht-ipcr-chayphim:not([data-kht-film-ready="true"])
img {
display: block;
width: 100%;
height: var(--kht-ipcr-film-image-height);
margin: 0;
object-fit: cover;
object-position: center;
user-select: none;
-webkit-user-drag: none;
transition:
transform 0.45s ease,
filter 0.45s ease;
}
/* Phóng nhẹ ảnh khi hover */
.kht-ipcr .kht-ipcr-film-track .img:hover img,
.kht-ipcr
.kht-ipcr-chayphim:not([data-kht-film-ready="true"])
.img:hover
img {
transform: scale(1.035);
filter: saturate(1.05) contrast(1.015);
}
/* Hiển thị focus khi điều khiển bằng bàn phím */
.kht-ipcr .kht-ipcr-film-track .img:focus-visible {
outline: 3px solid rgba(66, 165, 77, 0.48);
outline-offset: 4px;
border-radius: 10px;
}
/* =========================================================
12. CỘT BÊN PHẢI
- col-inner được đặt tuyệt đối
- Không tham gia tính chiều cao hàng Grid
- Luôn phủ đúng chiều cao cột trái
========================================================= */
.kht-ipcr .kht-ipcr-right {
position: relative;
min-width: 0;
min-height: 0;
}
/*
* Đặt col-inner tuyệt đối để nội dung bên phải
* không thể tự kéo chiều cao hàng Grid lớn hơn cột trái.
*/
.kht-ipcr .kht-ipcr-right > .col-inner {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
/* Ba card tự nhiên, ảnh nhận phần chiều cao còn lại */
grid-template-rows:
auto
auto
auto
minmax(0, 1fr);
align-content: stretch;
gap: 10px;
width: 100%;
height: 100%;
min-height: 0;
padding: 16px;
overflow: hidden;
border: 1px solid rgba(66, 165, 77, 0.18);
border-radius: 26px;
background:
radial-gradient(
circle at 105% -5%,
rgba(155, 208, 160, 0.24),
transparent 38%
),
linear-gradient(
150deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(245, 250, 246, 0.98) 54%,
rgba(228, 243, 230, 0.94) 100%
);
box-shadow:
0 20px 50px rgba(17, 54, 23, 0.12);
}
/* Tạo vòng tròn khoa học chìm sau nội dung */
.kht-ipcr .kht-ipcr-right > .col-inner::before {
content: "";
position: absolute;
top: 90px;
right: -155px;
width: 340px;
height: 340px;
border: 1px solid rgba(66, 165, 77, 0.11);
border-radius: 50%;
box-shadow:
0 0 0 48px rgba(66, 165, 77, 0.022),
0 0 0 96px rgba(66, 165, 77, 0.014);
pointer-events: none;
}
/* Tạo mảng màu thương hiệu ở góc trên phải */
.kht-ipcr .kht-ipcr-right > .col-inner::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 125px;
height: 125px;
border-radius: 0 26px 0 100%;
background:
linear-gradient(
145deg,
rgba(66, 165, 77, 0.28),
rgba(31, 113, 49, 0.06)
);
pointer-events: none;
}
/* =========================================================
13. CARD CHỨC NĂNG BÊN PHẢI
========================================================= */
.kht-ipcr .kht-ipcr-right .icon-box {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
align-items: center;
gap: 12px;
width: 100%;
min-width: 0;
min-height: 0;
/* Gap của Grid điều khiển khoảng cách giữa card */
margin: 0;
/* Tăng nhẹ padding dọc để card dễ đọc hơn */
padding: 13px 14px;
border: 1px solid rgba(66, 165, 77, 0.15);
border-radius: 17px;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.98),
rgba(245, 250, 246, 0.92)
);
box-shadow:
0 8px 20px rgba(17, 54, 23, 0.07);
transition:
transform 0.35s ease,
border-color 0.35s ease,
box-shadow 0.35s ease;
}
/* Xóa margin cũ của card thứ ba */
.kht-ipcr .kht-ipcr-right .icon-box:nth-of-type(3) {
margin-bottom: 0;
}
/* Tạo thanh màu cạnh trái card */
.kht-ipcr .kht-ipcr-right .icon-box::before {
content: "";
position: absolute;
top: 13px;
bottom: 13px;
left: 0;
width: 3px;
border-radius: 0 5px 5px 0;
background:
linear-gradient(
to bottom,
var(--kht-primary),
var(--kht-shade-3)
);
}
/* Nâng nhẹ card khi hover */
.kht-ipcr .kht-ipcr-right .icon-box:hover {
transform: translateY(-3px);
border-color: rgba(66, 165, 77, 0.3);
box-shadow:
0 14px 28px rgba(17, 54, 23, 0.12);
}
/* Thiết lập vùng chứa icon */
.kht-ipcr .kht-ipcr-right .icon-box-img {
position: relative;
z-index: 3;
width: 52px;
max-width: 52px;
margin: 0;
}
/* Thiết kế khối chứa icon */
.kht-ipcr .kht-ipcr-right .icon-box-img .icon {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border: 1px solid rgba(66, 165, 77, 0.18);
border-radius: 15px;
background:
linear-gradient(
145deg,
var(--kht-tint-5),
var(--kht-white)
);
box-shadow:
inset 0 0 0 5px rgba(66, 165, 77, 0.035),
0 7px 16px rgba(17, 54, 23, 0.08);
}
/* Căn icon vào giữa */
.kht-ipcr .kht-ipcr-right .icon-box-img .icon-inner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
/* Điều chỉnh kích thước hình icon */
.kht-ipcr .kht-ipcr-right .icon-box-img img {
display: block;
width: 31px;
height: 31px;
object-fit: contain;
}
/* Cho vùng text co giãn đúng */
.kht-ipcr .kht-ipcr-right .icon-box-text {
min-width: 0;
padding: 0;
}
/* Định dạng nội dung card */
.kht-ipcr .kht-ipcr-right .icon-box-text p {
margin: 0;
color: var(--kht-black);
font-size: 13px;
font-weight: 500;
line-height: 1.58;
}
/* =========================================================
14. ẢNH CUỐI BÊN PHẢI
- Nhận phần chiều cao còn lại
- Phóng nhẹ nội dung để giảm khoảng trống
========================================================= */
.kht-ipcr .kht-ipcr-right > .col-inner > .img {
position: relative;
z-index: 3;
align-self: stretch;
width: 100%;
max-width: 100%;
height: 100%;
min-height: 0;
margin: 0;
overflow: hidden;
border: 1px solid rgba(66, 165, 77, 0.16);
border-radius: 22px;
background:
linear-gradient(
180deg,
rgba(228, 243, 230, 0.7),
rgba(228, 243, 230, 0.95)
);
box-shadow:
0 10px 24px rgba(17, 54, 23, 0.09);
}
/* Tạo lớp phủ nhẹ phía trên ảnh */
.kht-ipcr .kht-ipcr-right > .col-inner > .img::before {
content: "";
position: absolute;
z-index: 2;
inset: 0;
background:
linear-gradient(
to bottom,
rgba(228, 243, 230, 0.04),
transparent 34%
);
pointer-events: none;
}
/* Cho img-inner phủ kín hàng cuối */
.kht-ipcr .kht-ipcr-right > .col-inner > .img .img-inner {
width: 100%;
height: 100%;
min-height: 0;
margin: 0;
padding: 0;
overflow: hidden;
}
/*
* Phóng nhẹ ảnh từ đáy để giảm vùng trống phía trên,
* đồng thời giữ cụm chai lọ và kính hiển vi ở đáy.
*/
.kht-ipcr .kht-ipcr-right > .col-inner > .img img {
display: block;
width: 100%;
max-width: 100%;
height: 100%;
margin: 0;
object-fit: cover;
object-position: center bottom;
transform: scale(1.12);
transform-origin: center bottom;
}
/* =========================================================
15. LIGHTBOX PHÓNG TO ẢNH
========================================================= */
.kht-ipcr-lightbox {
position: fixed;
z-index: 999999;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
visibility: hidden;
opacity: 0;
background: rgba(7, 18, 10, 0.9);
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
transition:
opacity 0.3s ease,
visibility 0.3s ease;
}
/* Hiển thị lightbox */
.kht-ipcr-lightbox.is-open {
visibility: visible;
opacity: 1;
}
/* Khung popup tự co theo đúng kích thước thật của ảnh */
.kht-ipcr-lightbox__content {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
max-width: calc(100vw - 64px);
max-height: calc(100vh - 64px);
transform: translateY(12px);
transition: transform 0.35s ease;
}
/* Không scale ảnh khi mở để giữ đúng độ nét */
.kht-ipcr-lightbox.is-open
.kht-ipcr-lightbox__content {
transform: translateY(0);
}
/* Ảnh popup sử dụng đúng kích thước tự nhiên của file */
.kht-ipcr-lightbox__image {
display: block;
flex: 0 0 auto;
/*
* width và height auto giữ nguyên kích thước gốc.
* max-width và max-height chỉ thu nhỏ khi ảnh lớn hơn màn hình.
*/
width: auto;
height: auto;
max-width: calc(100vw - 64px);
max-height: calc(100vh - 64px);
object-fit: contain;
object-position: center;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 16px;
background: #ffffff;
filter: none;
transform: none;
box-shadow:
0 32px 100px rgba(0, 0, 0, 0.42);
}
/* Thiết kế nút đóng lightbox */
.kht-ipcr-lightbox__close {
position: absolute;
z-index: 4;
top: 18px;
right: 18px;
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
margin: 0;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.42);
border-radius: 50%;
color: #ffffff;
background: rgba(17, 54, 23, 0.78);
font-family: Arial, sans-serif;
/* font-size: 30px; */
font-weight: 300;
line-height: 1;
cursor: pointer;
transition:
transform 0.25s ease,
background-color 0.25s ease;
}
/* Tạo phản hồi cho nút đóng */
.kht-ipcr-lightbox__close:hover {
transform: rotate(90deg);
background: rgba(66, 165, 77, 0.96);
}
/* Khóa cuộn trang khi lightbox mở */
body.kht-ipcr-lightbox-lock {
overflow: hidden;
}
/* =========================================================
16. DESKTOP NHỎ
========================================================= */
@media screen and (max-width: 1280px) {
/* Điều chỉnh tỷ lệ hai cột */
.kht-ipcr .section-content > .kht-ipcr-layout.row.row-small {
grid-template-columns:
minmax(0, 1.72fr)
minmax(350px, 1fr);
gap: 22px;
width: calc(100% - 30px);
}
/* Giảm khoảng cách trong cột phải */
.kht-ipcr .kht-ipcr-right > .col-inner {
gap: 9px;
padding: 14px;
}
/* Thu gọn card chức năng */
.kht-ipcr .kht-ipcr-right .icon-box {
grid-template-columns: 48px minmax(0, 1fr);
gap: 11px;
padding: 11px 12px;
}
/* Thu nhỏ vùng icon */
.kht-ipcr .kht-ipcr-right .icon-box-img {
width: 48px;
max-width: 48px;
}
/* Thu nhỏ khối icon */
.kht-ipcr .kht-ipcr-right .icon-box-img .icon {
width: 48px;
height: 48px;
border-radius: 14px;
}
/* Thu nhỏ hình icon */
.kht-ipcr .kht-ipcr-right .icon-box-img img {
width: 28px;
height: 28px;
}
/* Thu nhỏ nhẹ nội dung card */
.kht-ipcr .kht-ipcr-right .icon-box-text p {
font-size: 12.5px;
line-height: 1.55;
}
/* Giảm nhẹ độ phóng ảnh bên phải */
.kht-ipcr .kht-ipcr-right > .col-inner > .img img {
transform: scale(1.09);
}
}
/* =========================================================
17. TABLET
========================================================= */
@media screen and (max-width: 1024px) {
.kht-ipcr {
/* Điều chỉnh kích thước cuộn phim tablet */
--kht-ipcr-film-height: 238px;
--kht-ipcr-film-image-height: 172px;
--kht-ipcr-film-offset-y: -9px;
--kht-ipcr-film-left-cut: 18px;
--kht-ipcr-film-right-fade: 72px;
}
/* Chuyển layout thành một cột */
.kht-ipcr .section-content > .kht-ipcr-layout.row.row-small {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
width: calc(100% - 30px);
}
/* Cột trái co theo nội dung */
.kht-ipcr .kht-ipcr-left > .col-inner {
height: auto;
min-height: 0;
}
/*
* Khôi phục cột phải về luồng bình thường
* khi hai cột đã chuyển thành hai hàng.
*/
.kht-ipcr .kht-ipcr-right {
position: static;
}
/* Cột phải chuyển thành Grid 3 card và một ảnh */
.kht-ipcr .kht-ipcr-right > .col-inner {
position: relative;
inset: auto;
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
grid-template-rows:
auto
230px;
gap: 14px;
width: 100%;
height: auto;
min-height: 0;
padding: 20px;
}
/* Card chuyển thành bố cục dọc */
.kht-ipcr .kht-ipcr-right .icon-box {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 13px;
height: 100%;
margin: 0;
padding: 16px;
}
/* Thanh màu chuyển lên cạnh trên card */
.kht-ipcr .kht-ipcr-right .icon-box::before {
top: 0;
right: 18px;
bottom: auto;
left: 18px;
width: auto;
height: 3px;
border-radius: 0 0 5px 5px;
background:
linear-gradient(
90deg,
var(--kht-primary),
var(--kht-tint-3)
);
}
/* Ảnh cuối chiếm toàn bộ hàng thứ hai */
.kht-ipcr .kht-ipcr-right > .col-inner > .img {
grid-column: 1 / -1;
width: 100%;
height: 230px;
min-height: 230px;
margin: 0;
border-radius: 22px;
}
/* Giảm độ phóng ảnh trên tablet */
.kht-ipcr .kht-ipcr-right > .col-inner > .img img {
transform: scale(1.05);
}
}
/* =========================================================
18. MOBILE
========================================================= */
@media screen and (max-width: 767px) {
.kht-ipcr {
/* Điều chỉnh kích thước cuộn phim mobile */
--kht-ipcr-film-height: 210px;
--kht-ipcr-film-image-height: 150px;
--kht-ipcr-film-gap: 10px;
--kht-ipcr-film-offset-y: -6px;
--kht-ipcr-film-left-cut: 12px;
--kht-ipcr-film-right-fade: 38px;
}
/* Giảm khoảng cách nội dung trong section */
.kht-ipcr .section-content {
padding-top: 30px;
padding-bottom: 30px;
}
/* Giữ lề 12px ở hai cạnh mobile */
.kht-ipcr .section-content > .kht-ipcr-layout.row.row-small {
grid-template-columns: minmax(0, 1fr);
gap: 18px;
width: calc(100% - 24px);
max-width: none;
}
/* Cột trái co theo nội dung mobile */
.kht-ipcr .kht-ipcr-left > .col-inner {
height: auto;
min-height: 0;
padding-top: 0;
}
/* Giữ tiêu đề mobile 30px */
.kht-ipcr .kht-ipcr-text1 p {
font-size: 30px;
line-height: 1.35;
letter-spacing: -0.5px;
}
/* Giảm khoảng cách tiêu đề và mô tả */
.kht-ipcr .kht-ipcr-text2 {
margin-top: 18px;
}
/* Giữ nội dung mobile 16px */
.kht-ipcr .kht-ipcr-text2 p {
margin-bottom: 7px;
font-size: 16px;
line-height: 1.7;
}
/* Điều chỉnh khoảng cách background với phần text */
.kht-ipcr .kht-ipcr-thuocphim {
margin-top: 24px;
border-radius: 12px;
}
/* Giảm padding hai đầu track */
.kht-ipcr .kht-ipcr-film-track {
padding-right: 10px;
padding-left: 10px;
}
/* Cột phải trở về danh sách dọc */
.kht-ipcr .kht-ipcr-right > .col-inner {
position: relative;
inset: auto;
display: flex;
flex-direction: column;
gap: 12px;
height: auto;
min-height: 0;
padding: 14px;
border-radius: 22px;
}
/* Card chức năng trở về dạng ngang */
.kht-ipcr .kht-ipcr-right .icon-box {
display: grid;
grid-template-columns: 54px minmax(0, 1fr);
align-items: center;
gap: 12px;
height: auto;
margin: 0;
padding: 12px;
}
/* Thanh màu trở lại cạnh trái */
.kht-ipcr .kht-ipcr-right .icon-box::before {
top: 14px;
right: auto;
bottom: 14px;
left: 0;
width: 3px;
height: auto;
border-radius: 0 5px 5px 0;
background:
linear-gradient(
to bottom,
var(--kht-primary),
var(--kht-shade-3)
);
}
/* Điều chỉnh vùng chứa icon */
.kht-ipcr .kht-ipcr-right .icon-box-img {
width: 54px;
max-width: 54px;
}
/* Điều chỉnh khối icon */
.kht-ipcr .kht-ipcr-right .icon-box-img .icon {
width: 54px;
height: 54px;
}
/* Điều chỉnh ảnh icon */
.kht-ipcr .kht-ipcr-right .icon-box-img img {
width: 31px;
height: 31px;
}
/* Ảnh cuối mobile dùng chiều cao riêng */
.kht-ipcr .kht-ipcr-right > .col-inner > .img {
width: 100%;
height: 185px;
min-height: 185px;
margin: 0;
border-radius: 18px;
}
/* Giảm độ phóng ảnh trên mobile */
.kht-ipcr .kht-ipcr-right > .col-inner > .img img {
transform: scale(1.03);
}
/* Tối ưu lightbox mobile */
.kht-ipcr-lightbox {
padding: 14px;
}
/* Popup mobile vẫn tự co theo kích thước thật của ảnh */
.kht-ipcr-lightbox__content {
width: auto;
height: auto;
max-width: calc(100vw - 28px);
max-height: calc(100vh - 28px);
}
/* Chỉ thu nhỏ ảnh khi kích thước gốc vượt màn hình mobile */
.kht-ipcr-lightbox__image {
width: auto;
height: auto;
max-width: calc(100vw - 28px);
max-height: calc(100vh - 28px);
border-radius: 12px;
}
/* Thu nhỏ nút đóng */
.kht-ipcr-lightbox__close {
top: 10px;
right: 10px;
width: 42px;
height: 42px;
font-size: 27px;
}
/* Giảm bo góc ảnh phóng to */
.kht-ipcr-lightbox__image {
border-radius: 12px;
}
}
/* =========================================================
19. MOBILE NHỎ
========================================================= */
@media screen and (max-width: 420px) {
/* Thu nhỏ padding khối phải */
.kht-ipcr .kht-ipcr-right > .col-inner {
padding: 12px;
}
/* Thu gọn card chức năng */
.kht-ipcr .kht-ipcr-right .icon-box {
grid-template-columns: 50px minmax(0, 1fr);
gap: 10px;
padding: 10px;
}
/* Thu nhỏ vùng icon */
.kht-ipcr .kht-ipcr-right .icon-box-img {
width: 50px;
max-width: 50px;
}
/* Thu nhỏ khối icon */
.kht-ipcr .kht-ipcr-right .icon-box-img .icon {
width: 50px;
height: 50px;
}
/* Thu nhỏ ảnh icon */
.kht-ipcr .kht-ipcr-right .icon-box-img img {
width: 29px;
height: 29px;
}
/* Giảm chiều cao ảnh cuối */
.kht-ipcr .kht-ipcr-right > .col-inner > .img {
height: 172px;
min-height: 172px;
}
}
/* =========================================================
20. HỖ TRỢ NGƯỜI DÙNG GIẢM CHUYỂN ĐỘNG
========================================================= */
@media (prefers-reduced-motion: reduce) {
.kht-ipcr .kht-ipcr-film-track,
.kht-ipcr .kht-ipcr-film-track .img-inner,
.kht-ipcr .kht-ipcr-film-track img,
.kht-ipcr-lightbox,
.kht-ipcr-lightbox__content {
transition: none;
}
}
/* =========================================================
IPCR - TRẠNG THÁI KÉO DẢI ẢNH
========================================================= */
/* Hiển thị con trỏ có thể kéo trên desktop */
.kht-ipcr .kht-ipcr-chayphim {
cursor: grab;
user-select: none;
-webkit-user-select: none;
/* Cho phép cuộn dọc trang nhưng giữ thao tác kéo ngang */
touch-action: pan-y;
overscroll-behavior-x: contain;
}
/* Đổi con trỏ khi người dùng đang kéo */
.kht-ipcr .kht-ipcr-chayphim.is-dragging {
cursor: grabbing;
}
/* Ngăn trình duyệt tự kéo ảnh gốc */
.kht-ipcr .kht-ipcr-film-track img {
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
}
/* Trong lúc kéo, tạm bỏ hiệu ứng hover để card không nhảy */
.kht-ipcr
.kht-ipcr-chayphim.is-dragging
.kht-ipcr-film-track
.img:hover
.img-inner {
transform: none;
}
/* Trong lúc kéo, không phóng ảnh bên trong */
.kht-ipcr
.kht-ipcr-chayphim.is-dragging
.kht-ipcr-film-track
.img:hover
img {
transform: none;
filter: none;
}
/* =========================================================
KEHETO - HỆ THỐNG NHÀ MÁY & NĂNG LỰC SẢN XUẤT
Phiên bản factory-v11
========================================================= */
/* =========================================================
1. BIẾN MÀU VÀ KÍCH THƯỚC
========================================================= */
.kht-banner-nhamay {
--kht-primary: #28cbbb;
--kht-secondary: #263238;
--kht-shade-1: #43a046;
--kht-shade-2: #3b8e3b;
--kht-shade-3: #237d31;
--kht-shade-4: #1b5e1f;
--kht-shade-5: #103e13;
--kht-tint-1: #66bb69;
--kht-tint-2: #81c784;
--kht-tint-3: #a5d6a7;
--kht-tint-4: #c8e6c9;
--kht-tint-5: #e8f5e9;
--kht-dark-grey: #4d4d4d;
--kht-grey: #717171;
--kht-light-grey: #89939e;
--kht-grey-blue: #abbed1;
--kht-silver: #f5f7fa;
--kht-white: #ffffff;
--kht-factory-rail-width: 276px;
--kht-factory-slider-height: clamp(760px, 78vh, 820px);
position: relative;
width: 100%;
padding-top: 0;
padding-bottom: 0;
overflow: hidden;
background: var(--kht-silver);
}
/* Cho nội dung section sử dụng toàn bộ chiều ngang */
.kht-banner-nhamay > .section-content {
width: 100%;
max-width: none;
}
/* =========================================================
2. TIÊU ĐỀ SECTION
Chức năng thay đổi:
- Đồng nhất đúng format tiêu đề .kht-truoc-sau-text.
- Thanh xanh gradient nằm bên trái tiêu đề.
- Giữ nguyên khoảng cách của section và toàn bộ slider.
- Không thay đổi HTML hiện tại.
========================================================= */
/* Hàng chứa tiêu đề */
.kht-banner-nhamay
> .section-content
> .row:first-child {
position: relative;
z-index: 3;
display: block;
width: min(1320px, calc(100% - 48px));
max-width: 1320px;
margin: 0 auto;
padding: 32px 0 25px;
}
/* Cột tiêu đề chiếm toàn bộ chiều ngang */
.kht-banner-nhamay
> .section-content
> .row:first-child
> .col {
width: 100%;
max-width: 100%;
padding: 0;
}
/* Khung tiêu đề theo đúng format chuẩn */
.kht-banner-nhamay
> .section-content
> .row:first-child
> .col
> .col-inner {
position: relative;
padding: 0 0 0 24px;
text-align: left;
}
/* Thanh xanh gradient bên trái tiêu đề */
.kht-banner-nhamay
> .section-content
> .row:first-child
> .col
> .col-inner::before {
content: "";
position: absolute;
top: 4px;
bottom: 4px;
left: 0;
width: 5px;
border-radius: 20px;
background:
linear-gradient(
180deg,
#43a046,
#1b5e1f
);
}
/* Nội dung tiêu đề sử dụng đúng typography chuẩn */
.kht-banner-nhamay
> .section-content
> .row:first-child
.col-inner
> p {
margin: 0;
color: #263238;
font-size: clamp(28px, 3vw, 40px);
font-weight: 700;
line-height: 1.16;
letter-spacing: -0.035em;
text-align: left;
text-wrap: balance;
text-transform: uppercase;
}
/* Loại bỏ trang trí cũ nằm trực tiếp trên thẻ p */
.kht-banner-nhamay
> .section-content
> .row:first-child
.col-inner
> p::before,
.kht-banner-nhamay
> .section-content
> .row:first-child
.col-inner
> p::after {
content: none;
display: none;
}
/* =========================================================
3. KHUNG SLIDER CHÍNH
========================================================= */
/* Khung chứa slider, thumbnail và controls */
.kht-slider-nhamay {
position: relative;
width: 100%;
height: var(--kht-factory-slider-height);
overflow: hidden;
isolation: isolate;
background: var(--kht-secondary);
}
/* Slider ảnh lớn chừa vị trí rail bên phải */
.kht-slider-nhamay > .slider {
position: relative;
z-index: 2;
width: calc(100% - var(--kht-factory-rail-width));
height: 100%;
margin: 0;
overflow: hidden;
background: var(--kht-secondary);
}
/* Viewport ảnh lớn */
.kht-slider-nhamay
> .slider
> .flickity-viewport {
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 0 16px 16px 0;
}
/* Track Flickity */
.kht-slider-nhamay .flickity-slider {
height: 100%;
}
/*
* Khóa mỗi banner rộng đúng 100% vùng ảnh.
* Đây là phần ngăn slide bị đo thành 85.x%.
*/
.kht-slider-nhamay .banner {
width: 100%;
max-width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
background: var(--kht-secondary);
}
/* Các lớp bên trong banner phủ kín khung */
.kht-slider-nhamay .banner-inner,
.kht-slider-nhamay .banner-bg,
.kht-slider-nhamay .banner-layers {
height: 100%;
}
/* Xóa giới hạn container mặc định */
.kht-slider-nhamay .banner-layers.container {
width: 100%;
max-width: none;
}
/* Ảnh nền của banner */
.kht-slider-nhamay .banner-bg img.bg {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
transform: scale(1.02);
transform-origin: center center;
backface-visibility: hidden;
will-change: transform;
}
/* Tắt overlay mặc định */
.kht-slider-nhamay .banner-bg > .overlay {
background-color: transparent;
opacity: 0;
}
/* Overlay trung tính hỗ trợ controls */
.kht-slider-nhamay .banner-bg::after {
position: absolute;
inset: 0;
z-index: 2;
content: "";
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(38, 50, 56, 0.015) 0%,
rgba(38, 50, 56, 0) 58%,
rgba(38, 50, 56, 0.2) 100%
);
}
/* Không để link banner che controls */
.kht-slider-nhamay .banner-link {
pointer-events: none;
}
/* Ẩn nút mặc định của Flickity */
.kht-slider-nhamay
> .slider
> .flickity-prev-next-button {
display: none;
}
/* =========================================================
4. CARD NỘI DUNG
========================================================= */
.kht-slider-nhamay
.text-box.banner-layer.kht-factory-content-card {
position: absolute;
top: 20%;
right: auto;
bottom: auto;
left: clamp(28px, 4.7vw, 88px);
z-index: 7;
display: flex;
align-items: center;
width: min(35%, 570px);
max-width: 570px;
min-height: 136px;
padding: 24px 30px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.18);
border-left: 3px solid var(--kht-primary);
border-radius: 17px;
background:
linear-gradient(
135deg,
rgba(38, 50, 56, 0.54),
rgba(40, 203, 187, 0.11)
);
box-shadow:
0 18px 42px rgba(38, 50, 56, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.07);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
translate: none;
transform: none;
}
/* Thanh màu phía trên card */
.kht-slider-nhamay
.kht-factory-content-card::before {
position: absolute;
top: 20px;
left: 30px;
width: 54px;
height: 2px;
border-radius: 999px;
content: "";
background:
linear-gradient(
90deg,
var(--kht-primary),
rgba(40, 203, 187, 0.04)
);
}
/* Họa tiết trong card */
.kht-slider-nhamay
.kht-factory-content-card::after {
position: absolute;
right: -66px;
bottom: -102px;
width: 178px;
height: 178px;
content: "";
pointer-events: none;
border: 1px solid rgba(40, 203, 187, 0.08);
border-radius: 100% 0 100% 0;
transform: rotate(-22deg);
}
/* Xóa nền mặc định của text box */
.kht-slider-nhamay
.kht-factory-content-card
.text-box-content {
width: 100%;
padding: 0;
background: transparent;
}
/* Nội dung dùng cho animation */
.kht-slider-nhamay
.kht-factory-content-card
.text-inner {
position: relative;
z-index: 2;
width: 100%;
padding-top: 14px;
}
/* Text trong card */
.kht-slider-nhamay
.kht-factory-content-card
.text-inner
p {
max-width: 510px;
margin: 0;
color: var(--kht-white);
font-size: clamp(17px, 1.02vw, 21px);
font-weight: 600;
line-height: 1.52;
letter-spacing: -0.012em;
text-shadow: 0 2px 9px rgba(38, 50, 56, 0.22);
text-wrap: balance;
}
/* Card nằm bên phải */
.kht-slider-nhamay
.text-box.banner-layer.kht-factory-content-card.kht-card-right {
right: clamp(28px, 4.7vw, 88px);
left: auto;
border-right: 3px solid var(--kht-primary);
border-left-width: 1px;
}
/* =========================================================
5. RAIL THUMBNAIL
========================================================= */
.kht-factory-rail {
position: absolute;
top: 0;
right: 0;
z-index: 15;
width: var(--kht-factory-rail-width);
height: 100%;
padding: 42px 24px 34px;
overflow: hidden;
border-left: 1px solid rgba(40, 203, 187, 0.16);
background:
radial-gradient(
circle at 100% 0,
rgba(57, 181, 74, 0.18),
transparent 34%
),
linear-gradient(
180deg,
rgba(56, 142, 59, 0.97) 0%,
rgba(35, 125, 49, 0.96) 62%,
rgba(16, 62, 19, 0.98) 100%
);
}
/* Họa tiết chấm trên rail */
.kht-factory-rail::before {
position: absolute;
top: 46px;
right: 30px;
width: 44px;
height: 44px;
content: "";
opacity: 0.32;
pointer-events: none;
background-image:
radial-gradient(
circle,
var(--kht-primary) 1.4px,
transparent 1.6px
);
background-size: 11px 11px;
}
/* Gradient nối rail và ảnh */
.kht-factory-rail::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 25px;
content: "";
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(16, 62, 19, 0.37),
transparent
);
}
/* Viewport thumbnail */
.kht-factory-rail__viewport {
position: relative;
z-index: 2;
width: 100%;
height: calc(100% - 38px);
margin-top: 34px;
overflow: hidden;
}
/* Track thumbnail */
.kht-factory-rail__track {
display: flex;
flex-direction: column;
gap: 23px;
width: 100%;
will-change: transform;
}
/* Nút thumbnail */
.kht-factory-thumb {
position: relative;
display: block;
flex: 0 0 auto;
width: 100%;
padding: 28px 0 0;
border: 0;
background: transparent;
color: var(--kht-white);
text-align: left;
cursor: pointer;
appearance: none;
}
/* Số thumbnail */
.kht-factory-thumb__number {
position: absolute;
top: 0;
left: 0;
color: rgba(255, 255, 255, 0.54);
font-size: 16px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.04em;
transition: color 0.3s ease;
}
.kht-factory-thumb__number::after {
display: inline-block;
width: 30px;
height: 1px;
margin: 0 0 5px 10px;
content: "";
background: rgba(255, 255, 255, 0.27);
}
/* Khung ảnh thumbnail */
.kht-factory-thumb__media {
position: relative;
display: block;
width: 100%;
aspect-ratio: 1.6 / 1;
overflow: hidden;
border: 2px solid transparent;
border-radius: 10px;
background: var(--kht-secondary);
box-shadow:
0 14px 32px rgba(16, 62, 19, 0.23);
transition:
border-color 0.3s ease,
box-shadow 0.3s ease,
transform 0.3s ease;
}
.kht-factory-thumb__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.kht-factory-thumb.is-active
.kht-factory-thumb__media {
border-color: var(--kht-white);
box-shadow:
0 16px 38px rgba(16, 62, 19, 0.35),
0 0 0 1px rgba(255, 255, 255, 0.14);
}
.kht-factory-thumb.is-active
.kht-factory-thumb__number {
color: var(--kht-primary);
}
.kht-factory-thumb:hover
.kht-factory-thumb__media {
transform: translateX(-3px);
}
.kht-factory-thumb:focus-visible {
outline: 2px solid var(--kht-primary);
outline-offset: 5px;
border-radius: 10px;
}
/* =========================================================
6. COUNTER, PROGRESS VÀ ĐIỀU HƯỚNG
========================================================= */
.kht-factory-controls {
position: absolute;
bottom: 56px;
left: clamp(28px, 4.7vw, 88px);
z-index: 18;
display: flex;
align-items: center;
gap: 16px;
pointer-events: none;
}
.kht-factory-counter {
display: flex;
align-items: baseline;
gap: 7px;
min-width: 73px;
pointer-events: auto;
}
.kht-factory-counter__current {
color: var(--kht-primary);
font-size: 22px;
font-weight: 700;
line-height: 1;
}
.kht-factory-counter__separator {
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
}
.kht-factory-counter__total {
color: rgba(255, 255, 255, 0.76);
font-size: 14px;
font-weight: 500;
}
.kht-factory-progress {
position: relative;
width: 110px;
height: 3px;
overflow: hidden;
border-radius: 999px;
background: rgba(255, 255, 255, 0.4);
}
.kht-factory-progress__bar {
position: absolute;
inset: 0;
border-radius: inherit;
background:
linear-gradient(
90deg,
var(--kht-primary),
var(--kht-tint-2)
);
transform: scaleX(0);
transform-origin: left center;
}
.kht-factory-navigation {
display: flex;
gap: 10px;
pointer-events: auto;
}
.kht-factory-navigation__button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.58);
border-radius: 50%;
background: rgba(38, 50, 56, 0.48);
color: var(--kht-white);
cursor: pointer;
appearance: none;
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
transition:
color 0.3s ease,
border-color 0.3s ease,
background-color 0.3s ease,
transform 0.3s ease;
}
.kht-factory-navigation__button:hover {
border-color: var(--kht-primary);
background: var(--kht-primary);
color: var(--kht-secondary);
transform: translateY(-2px);
}
.kht-factory-navigation__button svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
}
.kht-factory-navigation__button:focus-visible {
outline: 2px solid var(--kht-primary);
outline-offset: 4px;
}
/* =========================================================
7. TABLET
========================================================= */
@media (max-width: 1199px) {
.kht-banner-nhamay {
--kht-factory-rail-width: 224px;
--kht-factory-slider-height: clamp(640px, 72vh, 720px);
}
.kht-banner-nhamay
> .section-content
> .row:first-child {
width: calc(100% - 40px);
padding-top: 27px;
padding-bottom: 22px;
}
/* Giữ typography tiêu đề đồng nhất trên tablet ngang */
.kht-banner-nhamay
> .section-content
> .row:first-child
.col-inner
> p {
font-size: clamp(28px, 3vw, 40px);
}
.kht-slider-nhamay
.text-box.banner-layer.kht-factory-content-card {
top: 20%;
left: 4%;
width: 44%;
max-width: 520px;
min-height: 130px;
padding: 22px 27px;
translate: none;
transform: none;
}
.kht-slider-nhamay
.text-box.banner-layer.kht-factory-content-card.kht-card-right {
right: 4%;
left: auto;
}
.kht-slider-nhamay
.kht-factory-content-card::before {
top: 18px;
left: 27px;
width: 50px;
}
.kht-slider-nhamay
.kht-factory-content-card
.text-inner {
padding-top: 13px;
}
.kht-slider-nhamay
.kht-factory-content-card
.text-inner
p {
font-size: clamp(16px, 1.8vw, 20px);
line-height: 1.5;
}
.kht-factory-rail {
padding-right: 18px;
padding-left: 18px;
}
.kht-factory-rail__viewport {
height: calc(100% - 36px);
margin-top: 32px;
}
.kht-factory-controls {
bottom: 50px;
left: 4%;
}
.kht-factory-progress {
width: 96px;
}
.kht-factory-navigation__button {
width: 44px;
height: 44px;
}
}
/* =========================================================
8. MOBILE
========================================================= */
@media (max-width: 849px) {
.kht-banner-nhamay {
--kht-factory-rail-width: 0px;
--kht-factory-slider-height: 700px;
}
.kht-banner-nhamay
> .section-content
> .row:first-child {
width: calc(100% - 32px);
padding: 22px 0 19px;
}
/* Thu khoảng cách trái của khung tiêu đề trên mobile */
.kht-banner-nhamay
> .section-content
> .row:first-child
> .col
> .col-inner {
padding-left: 17px;
}
/* Thanh xanh mobile đúng format tiêu đề chuẩn */
.kht-banner-nhamay
> .section-content
> .row:first-child
> .col
> .col-inner::before {
width: 4px;
}
/* Typography tiêu đề mobile */
.kht-banner-nhamay
> .section-content
> .row:first-child
.col-inner
> p {
font-size: clamp(17px, 2.8vw, 24px);
line-height: 1.2;
letter-spacing: -0.025em;
}
.kht-slider-nhamay > .slider {
width: 100%;
}
.kht-slider-nhamay
> .slider
> .flickity-viewport {
border-radius: 0;
}
.kht-slider-nhamay .banner-bg::after {
background:
linear-gradient(
180deg,
rgba(38, 50, 56, 0.08) 0%,
rgba(38, 50, 56, 0.01) 48%,
rgba(38, 50, 56, 0.22) 100%
);
}
.kht-slider-nhamay
.text-box.banner-layer.kht-factory-content-card,
.kht-slider-nhamay
.text-box.banner-layer.kht-factory-content-card.kht-card-right {
top: 7%;
right: 16px;
bottom: auto;
left: 16px;
width: auto;
max-width: none;
min-height: 0;
padding: 19px 18px 17px;
border-right-width: 1px;
border-left: 3px solid var(--kht-primary);
border-radius: 14px;
background:
linear-gradient(
135deg,
rgba(38, 50, 56, 0.55),
rgba(40, 203, 187, 0.1)
);
translate: none;
transform: none;
}
.kht-slider-nhamay
.kht-factory-content-card::before {
top: 16px;
left: 18px;
width: 44px;
}
.kht-slider-nhamay
.kht-factory-content-card::after {
display: none;
}
.kht-slider-nhamay
.kht-factory-content-card
.text-inner {
padding-top: 12px;
}
.kht-slider-nhamay
.kht-factory-content-card
.text-inner
p {
font-size: clamp(15px, 4.25vw, 18px);
line-height: 1.48;
}
.kht-factory-rail {
top: auto;
right: 12px;
bottom: 15px;
left: 12px;
width: auto;
height: 110px;
padding: 0;
border: 1px solid rgba(40, 203, 187, 0.16);
border-radius: 12px;
background: rgba(38, 50, 56, 0.84);
backdrop-filter: blur(13px);
-webkit-backdrop-filter: blur(13px);
}
.kht-factory-rail::before,
.kht-factory-rail::after {
display: none;
}
.kht-factory-rail__viewport {
width: 100%;
height: 100%;
margin: 0;
padding: 9px;
}
.kht-factory-rail__track {
flex-direction: row;
align-items: stretch;
gap: 10px;
width: max-content;
height: 100%;
}
.kht-factory-thumb {
flex: 0 0 min(43vw, 188px);
width: min(43vw, 188px);
height: 100%;
padding-top: 0;
}
.kht-factory-thumb__number {
top: 8px;
left: 9px;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 25px;
padding: 0 7px;
border-radius: 5px;
background: rgba(38, 50, 56, 0.79);
color: var(--kht-white);
font-size: 12px;
}
.kht-factory-thumb__number::after {
display: none;
}
.kht-factory-thumb__media {
height: 100%;
aspect-ratio: auto;
border-radius: 8px;
}
.kht-factory-controls {
right: auto;
bottom: 142px;
left: 17px;
gap: 12px;
}
.kht-factory-progress {
width: 70px;
}
.kht-factory-navigation__button {
width: 42px;
height: 42px;
}
}
/* =========================================================
9. MOBILE NHỎ
========================================================= */
@media (max-width: 480px) {
.kht-banner-nhamay {
--kht-factory-slider-height: 650px;
}
/* Giữ tiêu đề cân đối trên màn hình mobile nhỏ */
.kht-banner-nhamay
> .section-content
> .row:first-child
.col-inner
> p {
font-size: clamp(17px, 2.8vw, 24px);
}
.kht-slider-nhamay
.text-box.banner-layer.kht-factory-content-card,
.kht-slider-nhamay
.text-box.banner-layer.kht-factory-content-card.kht-card-right {
top: 6%;
padding: 17px 15px 15px;
}
.kht-slider-nhamay
.kht-factory-content-card::before {
top: 14px;
left: 15px;
}
.kht-slider-nhamay
.kht-factory-content-card
.text-inner {
padding-top: 11px;
}
.kht-slider-nhamay
.kht-factory-content-card
.text-inner
p {
font-size: clamp(14px, 4.55vw, 17px);
line-height: 1.46;
}
.kht-factory-rail {
height: 94px;
}
.kht-factory-thumb {
flex-basis: 55vw;
width: 55vw;
}
.kht-factory-controls {
bottom: 121px;
}
.kht-factory-progress {
display: none;
}
.kht-factory-counter__current {
font-size: 19px;
}
}
/* =========================================================
10. ACCESSIBILITY
========================================================= */
@media (prefers-reduced-motion: reduce) {
.kht-slider-nhamay .banner-bg img.bg,
.kht-factory-rail__track,
.kht-factory-thumb__media,
.kht-factory-navigation__button {
transition-duration: 0.01ms;
}
}
/* =========================================================
SECTION QUY TRÌNH GIA CÔNG OEM/ODM
PHONG CÁCH: PROCESS PASSPORT - BUTTON GRADIENT
Cập nhật mobile:
1. Căn chính xác số thứ tự vào tâm vòng tròn.
2. Sử dụng tabular numbers để các số 01–10 không bị lệch.
3. Thu nhỏ chiều ngang card mobile.
4. Thu nhỏ chiều cao card quy trình mobile.
5. Giữ nguyên toàn bộ giao diện desktop.
Lưu ý:
- Không sử dụng ID.
- Không sử dụng !important.
- Chỉ tác động trong section .kht-quy-trinh.
========================================================= */
/* =========================================================
1. BIẾN MÀU VÀ NỀN TỔNG THỂ
========================================================= */
.kht-quy-trinh {
--kht-process-primary: #28cb8b;
--kht-process-primary-dark: #169d6d;
--kht-process-primary-deep: #0d6046;
--kht-process-primary-soft: #e9fbf4;
/* Màu gradient theo nút liên hệ */
--kht-stage-start: #26bf81;
--kht-stage-middle: #23b478;
--kht-stage-end: #20996b;
--kht-stage-dark: #187e58;
--kht-process-heading: #123b2f;
--kht-process-text: #36554a;
--kht-process-muted: #758b83;
--kht-stage-heading: #ffffff;
--kht-stage-text: rgba(255, 255, 255, 0.94);
--kht-stage-description: rgba(255, 255, 255, 0.84);
position: relative;
overflow: hidden;
background:
radial-gradient(
circle at 10% 15%,
rgba(40, 203, 139, 0.09),
transparent 25%
),
radial-gradient(
circle at 92% 84%,
rgba(40, 203, 139, 0.06),
transparent 28%
),
linear-gradient(
180deg,
#ffffff 0%,
#f5fcf9 52%,
#ffffff 100%
);
}
/* =========================================================
2. HỌA TIẾT NỀN SECTION
========================================================= */
/* Tạo lưới kỹ thuật nhẹ phía sau section */
.kht-quy-trinh::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.3;
background-image:
linear-gradient(
rgba(40, 203, 139, 0.035) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(40, 203, 139, 0.035) 1px,
transparent 1px
);
background-size: 56px 56px;
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0%,
#000 15%,
#000 85%,
transparent 100%
);
mask-image: linear-gradient(
to bottom,
transparent 0%,
#000 15%,
#000 85%,
transparent 100%
);
}
/* Tạo họa tiết vòng tròn nhẹ ở cuối section */
.kht-quy-trinh::after {
content: "";
position: absolute;
right: -175px;
bottom: -185px;
width: 390px;
height: 390px;
border: 60px solid rgba(40, 203, 139, 0.025);
border-radius: 50%;
pointer-events: none;
}
/* Tạo khoảng cách tổng thể cho section */
.kht-quy-trinh .section-content {
position: relative;
z-index: 2;
padding: 62px 20px 66px;
}
/* =========================================================
3. TIÊU ĐỀ SECTION
Đồng bộ từ tiêu đề section
HỆ THỐNG NHÀ MÁY & NĂNG LỰC SẢN XUẤT trong home.css.
Chỉ thay đổi giao diện tiêu đề, giữ nguyên toàn bộ phần khác.
========================================================= */
/* Hàng chứa tiêu đề giữ nguyên chiều rộng khung quy trình */
.kht-quy-trinh .kht-quy-trinh-text {
position: relative;
z-index: 3;
display: block;
width: 100%;
max-width: 1320px;
margin: 0 auto 38px;
padding: 0;
text-align: left;
}
/* Loại bỏ kích thước cột mặc định của Flatsome */
.kht-quy-trinh .kht-quy-trinh-text > .col {
width: 100%;
max-width: 100%;
flex-basis: 100%;
padding: 0;
}
/* Khung tiêu đề theo đúng format của section năng lực sản xuất */
.kht-quy-trinh .kht-quy-trinh-text .col-inner {
position: relative;
padding: 0 0 0 24px;
text-align: left;
}
/* Thanh xanh gradient bên trái tiêu đề */
.kht-quy-trinh .kht-quy-trinh-text .col-inner::before {
content: "";
position: absolute;
top: 4px;
bottom: 4px;
left: 0;
width: 5px;
border-radius: 20px;
background: linear-gradient(
180deg,
#43a046,
#1b5e1f
);
}
/* Không tạo thêm trang trí ở khung tiêu đề */
.kht-quy-trinh .kht-quy-trinh-text .col-inner::after {
content: none;
display: none;
}
/* Typography tiêu đề đồng bộ với section năng lực sản xuất */
.kht-quy-trinh .kht-quy-trinh-text p {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
color: #263238;
font-size: clamp(28px, 3vw, 40px);
font-weight: 700;
line-height: 1.16;
letter-spacing: -0.035em;
text-align: left;
text-wrap: balance;
text-transform: uppercase;
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
}
/* Loại bỏ đường nhấn cũ nằm dưới tiêu đề */
.kht-quy-trinh .kht-quy-trinh-text p::before,
.kht-quy-trinh .kht-quy-trinh-text p::after {
content: none;
display: none;
}
/* =========================================================
4. KHUNG TỔNG PROCESS PASSPORT
========================================================= */
.kht-quy-trinh .kht-passport-shell {
width: 100%;
max-width: 1320px;
margin: 0 auto;
}
/* =========================================================
5. KHUNG CÔNG ĐOẠN ĐANG HOẠT ĐỘNG
========================================================= */
.kht-quy-trinh .kht-passport-stage {
position: relative;
min-height: 324px;
overflow: hidden;
border: 1px solid rgba(24, 126, 88, 0.36);
border-radius: 32px;
background:
radial-gradient(
circle at 86% 10%,
rgba(255, 255, 255, 0.16),
transparent 24%
),
radial-gradient(
circle at 7% 92%,
rgba(255, 255, 255, 0.08),
transparent 27%
),
linear-gradient(
105deg,
var(--kht-stage-start) 0%,
var(--kht-stage-middle) 48%,
var(--kht-stage-end) 100%
);
box-shadow:
0 24px 62px rgba(32, 153, 107, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
/* Tạo vòng tròn trang trí bên phải khung */
.kht-quy-trinh .kht-passport-stage::before {
content: "";
position: absolute;
top: -92px;
right: -38px;
width: 260px;
height: 260px;
border: 42px solid rgba(255, 255, 255, 0.08);
border-radius: 50%;
pointer-events: none;
}
/* Tạo đường phân cách phía trên thanh tiến độ */
.kht-quy-trinh .kht-passport-stage::after {
content: "";
position: absolute;
right: 42px;
bottom: 64px;
left: 42px;
height: 1px;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.04),
rgba(255, 255, 255, 0.34),
rgba(255, 255, 255, 0.04)
);
}
/* Bố cục nội dung trong khung chính */
.kht-quy-trinh .kht-passport-stage-inner {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
align-items: center;
min-height: 324px;
padding: 34px 52px 78px;
}
/* =========================================================
6. KHU VỰC SỐ CÔNG ĐOẠN
========================================================= */
.kht-quy-trinh .kht-passport-number-area {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 174px;
}
/* Tạo vòng nền quanh số công đoạn */
.kht-quy-trinh .kht-passport-number-area::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 158px;
height: 158px;
border: 1px solid rgba(255, 255, 255, 0.32);
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow:
0 0 0 18px rgba(255, 255, 255, 0.07),
inset 0 0 32px rgba(255, 255, 255, 0.08);
}
/* Tạo vòng chuyển động quanh số công đoạn */
.kht-quy-trinh .kht-passport-number-area::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 136px;
height: 136px;
border-top: 2px solid rgba(255, 255, 255, 0.96);
border-right: 2px solid transparent;
border-bottom: 2px solid rgba(255, 255, 255, 0.18);
border-left: 2px solid transparent;
border-radius: 50%;
transform: translate(-50%, -50%);
animation: kht-passport-orbit-rotate 18s linear infinite;
}
/* Số công đoạn lớn */
.kht-quy-trinh .kht-passport-current-number {
position: relative;
z-index: 3;
display: block;
color: var(--kht-stage-heading);
font-size: clamp(86px, 7.6vw, 108px);
font-weight: 750;
line-height: 0.82;
letter-spacing: -0.095em;
text-shadow: 0 12px 28px rgba(12, 88, 61, 0.16);
}
/* Tổng số công đoạn */
.kht-quy-trinh .kht-passport-total-number {
position: absolute;
z-index: 4;
right: 14px;
bottom: 20px;
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
font-weight: 700;
line-height: 1;
}
/* =========================================================
7. NỘI DUNG CÔNG ĐOẠN
========================================================= */
.kht-quy-trinh .kht-passport-content {
position: relative;
z-index: 3;
max-width: 860px;
padding-left: clamp(42px, 5vw, 78px);
}
/* Nhãn công đoạn hiện tại */
.kht-quy-trinh .kht-passport-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
color: var(--kht-stage-text);
font-size: 10px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* Tạo chấm trạng thái trước nhãn */
.kht-quy-trinh .kht-passport-eyebrow::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #ffffff;
box-shadow:
0 0 0 6px rgba(255, 255, 255, 0.12),
0 0 18px rgba(255, 255, 255, 0.3);
}
/* Tiêu đề công đoạn */
.kht-quy-trinh .kht-passport-current-title {
max-width: 800px;
min-height: auto;
margin: 0;
color: var(--kht-stage-heading);
font-size: clamp(27px, 2.8vw, 38px);
font-weight: 750;
line-height: 1.25;
letter-spacing: -0.035em;
text-transform: uppercase;
}
/* Mô tả công đoạn */
.kht-quy-trinh .kht-passport-description {
max-width: 720px;
margin: 15px 0 0;
color: var(--kht-stage-description);
font-size: 14px;
font-weight: 550;
line-height: 1.62;
}
/* =========================================================
8. THANH TIẾN ĐỘ VÀ NÚT ĐIỀU HƯỚNG
========================================================= */
.kht-quy-trinh .kht-passport-footer {
position: absolute;
z-index: 5;
right: 52px;
bottom: 22px;
left: 52px;
display: flex;
align-items: center;
gap: 30px;
}
/* Khu vực thanh tiến độ */
.kht-quy-trinh .kht-passport-progress {
display: flex;
align-items: center;
flex: 1 1 auto;
min-width: 0;
gap: 13px;
}
/* Giá trị phần trăm */
.kht-quy-trinh .kht-passport-progress-value {
flex: 0 0 auto;
min-width: 36px;
color: rgba(255, 255, 255, 0.94);
font-size: 10px;
font-weight: 800;
line-height: 1;
}
/* Nền thanh tiến độ */
.kht-quy-trinh .kht-passport-progress-track {
position: relative;
flex: 1 1 auto;
width: 100%;
max-width: none;
height: 5px;
overflow: hidden;
border-radius: 999px;
background: rgba(10, 82, 57, 0.34);
}
/* Phần tiến độ đã hoàn thành */
.kht-quy-trinh .kht-passport-progress-bar {
width: 10%;
height: 100%;
border-radius: inherit;
background: linear-gradient(
90deg,
#ffffff,
rgba(255, 255, 255, 0.84)
);
box-shadow: 0 0 14px rgba(255, 255, 255, 0.25);
transition: width 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Khu vực chứa nút điều hướng */
.kht-quy-trinh .kht-passport-controls {
display: flex;
align-items: center;
flex: 0 0 auto;
gap: 9px;
}
/* Nút điều hướng giống phần icon của nút liên hệ */
.kht-quy-trinh .kht-passport-control {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin: 0;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.82);
border-radius: 50%;
color: var(--kht-stage-end);
cursor: pointer;
background: #ffffff;
box-shadow:
0 8px 18px rgba(17, 111, 76, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition:
color 0.3s ease,
border-color 0.3s ease,
background-color 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
}
/* Tạo icon mũi tên */
.kht-quy-trinh .kht-passport-control::before {
content: "";
width: 8px;
height: 8px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
}
/* Xoay mũi tên quay lại */
.kht-quy-trinh .kht-passport-control.is-prev::before {
transform: rotate(-135deg);
}
/* Xoay mũi tên tiếp theo */
.kht-quy-trinh .kht-passport-control.is-next::before {
transform: rotate(45deg);
}
/* Hiệu ứng hover nút điều hướng */
@media (hover: hover) {
.kht-quy-trinh .kht-passport-control:hover {
color: #ffffff;
border-color: var(--kht-stage-dark);
background: var(--kht-stage-dark);
box-shadow: 0 11px 24px rgba(17, 111, 76, 0.26);
transform: translateY(-2px);
}
}
/* =========================================================
9. DANH SÁCH 10 CÔNG ĐOẠN
========================================================= */
.kht-quy-trinh .kht-quy-trinh-nd {
position: relative;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(102px, auto));
gap: 26px 20px;
width: 100%;
max-width: none;
margin: 20px 0 0;
padding: 0;
}
/* Đảo hàng dưới để tạo luồng 01 → 05 → 06 → 10 */
.kht-quy-trinh .kht-quy-trinh-nd > .col:nth-child(6) {
grid-column: 5;
grid-row: 2;
}
.kht-quy-trinh .kht-quy-trinh-nd > .col:nth-child(7) {
grid-column: 4;
grid-row: 2;
}
.kht-quy-trinh .kht-quy-trinh-nd > .col:nth-child(8) {
grid-column: 3;
grid-row: 2;
}
.kht-quy-trinh .kht-quy-trinh-nd > .col:nth-child(9) {
grid-column: 2;
grid-row: 2;
}
.kht-quy-trinh .kht-quy-trinh-nd > .col:nth-child(10) {
grid-column: 1;
grid-row: 2;
}
/* Loại bỏ kích thước cột mặc định của Flatsome */
.kht-quy-trinh .kht-quy-trinh-nd > .col {
position: relative;
width: 100%;
max-width: 100%;
flex-basis: 100%;
margin: 0;
padding: 0;
cursor: pointer;
outline: none;
}
/* =========================================================
10. ĐƯỜNG KẾT NỐI QUY TRÌNH
========================================================= */
/* Đường nối các bước từ 01 đến 05 */
.kht-quy-trinh
.kht-quy-trinh-nd > .col:nth-child(-n + 4)::after {
content: "";
position: absolute;
z-index: 1;
top: 50%;
right: -16px;
width: 16px;
height: 2px;
transform: translateY(-50%);
background: linear-gradient(
90deg,
rgba(40, 203, 139, 0.35),
var(--kht-process-primary)
);
}
/* Mũi tên hàng trên */
.kht-quy-trinh
.kht-quy-trinh-nd > .col:nth-child(-n + 4)::before {
content: "";
position: absolute;
z-index: 3;
top: 50%;
right: -15px;
width: 7px;
height: 7px;
border-top: 2px solid var(--kht-process-primary);
border-right: 2px solid var(--kht-process-primary);
transform: translateY(-50%) rotate(45deg);
}
/* Đường nối từ bước 05 xuống bước 06 */
.kht-quy-trinh
.kht-quy-trinh-nd > .col:nth-child(5)::after {
content: "";
position: absolute;
z-index: 1;
left: 50%;
bottom: -21px;
width: 2px;
height: 21px;
transform: translateX(-50%);
background: linear-gradient(
180deg,
rgba(40, 203, 139, 0.35),
var(--kht-process-primary)
);
}
/* Mũi tên từ bước 05 xuống bước 06 */
.kht-quy-trinh
.kht-quy-trinh-nd > .col:nth-child(5)::before {
content: "";
position: absolute;
z-index: 3;
left: 50%;
bottom: -19px;
width: 7px;
height: 7px;
border-right: 2px solid var(--kht-process-primary);
border-bottom: 2px solid var(--kht-process-primary);
transform: translateX(-50%) rotate(45deg);
}
/* Đường nối các bước từ 06 đến 10 */
.kht-quy-trinh
.kht-quy-trinh-nd > .col:nth-child(n + 6):nth-child(-n + 9)::after {
content: "";
position: absolute;
z-index: 1;
top: 50%;
left: -16px;
width: 16px;
height: 2px;
transform: translateY(-50%);
background: linear-gradient(
90deg,
var(--kht-process-primary),
rgba(40, 203, 139, 0.35)
);
}
/* Mũi tên hàng dưới */
.kht-quy-trinh
.kht-quy-trinh-nd > .col:nth-child(n + 6):nth-child(-n + 9)::before {
content: "";
position: absolute;
z-index: 3;
top: 50%;
left: -15px;
width: 7px;
height: 7px;
border-bottom: 2px solid var(--kht-process-primary);
border-left: 2px solid var(--kht-process-primary);
transform: translateY(-50%) rotate(45deg);
}
/* =========================================================
11. CARD CÔNG ĐOẠN
========================================================= */
.kht-quy-trinh .kht-quy-trinh-nd .col-inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
align-items: center;
min-height: 102px;
height: 100%;
overflow: hidden;
padding: 16px;
border: 1px solid rgba(25, 92, 69, 0.14);
border-radius: 18px;
background: rgba(255, 255, 255, 0.95);
box-shadow:
0 10px 26px rgba(21, 74, 57, 0.055),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
transition:
transform 0.32s ease,
border-color 0.32s ease,
box-shadow 0.32s ease,
background-color 0.32s ease;
}
/* Tạo dải trạng thái phía dưới card */
.kht-quy-trinh .kht-quy-trinh-nd .col-inner::before {
content: "";
position: absolute;
right: 16px;
bottom: 0;
left: 16px;
height: 3px;
border-radius: 999px 999px 0 0;
background: rgba(40, 203, 139, 0.14);
transition:
background-color 0.3s ease,
box-shadow 0.3s ease;
}
/* Tạo họa tiết vòng tròn nhẹ trong card */
.kht-quy-trinh .kht-quy-trinh-nd .col-inner::after {
content: "";
position: absolute;
right: -26px;
bottom: -30px;
width: 72px;
height: 72px;
border: 13px solid rgba(40, 203, 139, 0.035);
border-radius: 50%;
}
/* Thẻ chứa số và tên công đoạn */
.kht-quy-trinh .kht-passport-tab-copy {
display: contents;
margin: 0;
}
/* Số thứ tự trong card */
.kht-quy-trinh .kht-passport-tab-number {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 39px;
height: 39px;
border: 1px solid rgba(20, 149, 104, 0.28);
border-radius: 12px;
color: var(--kht-process-primary-deep);
font-size: 13px;
font-weight: 800;
line-height: 1;
background: var(--kht-process-primary-soft);
transition:
color 0.3s ease,
background-color 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
}
/* Tên công đoạn trong card */
.kht-quy-trinh .kht-passport-tab-title {
position: relative;
z-index: 2;
display: block;
padding-left: 10px;
color: #244b3d;
font-size: 13px;
font-weight: 700;
line-height: 1.38;
letter-spacing: 0;
text-transform: uppercase;
}
/* =========================================================
12. CARD ĐANG HOẠT ĐỘNG
========================================================= */
.kht-quy-trinh .kht-quy-trinh-nd > .col.is-active-step {
z-index: 5;
}
/* Làm nổi bật card đang được chọn */
.kht-quy-trinh
.kht-quy-trinh-nd > .col.is-active-step
.col-inner {
border-color: rgba(20, 149, 104, 0.68);
background: #ffffff;
box-shadow:
0 17px 38px rgba(18, 104, 75, 0.13),
0 0 0 4px rgba(40, 203, 139, 0.05);
transform: translateY(-2px);
}
/* Đổi màu dải trạng thái card đang chọn */
.kht-quy-trinh
.kht-quy-trinh-nd > .col.is-active-step
.col-inner::before {
background: var(--kht-process-primary);
box-shadow: 0 0 14px rgba(40, 203, 139, 0.42);
}
/* Đổi màu số card đang chọn */
.kht-quy-trinh
.kht-quy-trinh-nd > .col.is-active-step
.kht-passport-tab-number {
color: #ffffff;
background: linear-gradient(
145deg,
var(--kht-stage-start),
var(--kht-stage-end)
);
box-shadow:
0 9px 21px rgba(40, 203, 139, 0.27),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
transform: scale(1.05);
}
/* Hiển thị trạng thái focus khi dùng bàn phím */
.kht-quy-trinh
.kht-quy-trinh-nd > .col:focus-visible
.col-inner {
border-color: var(--kht-process-primary);
box-shadow:
0 0 0 4px rgba(40, 203, 139, 0.14),
0 17px 38px rgba(18, 104, 75, 0.1);
}
/* =========================================================
13. HIỆU ỨNG HOVER
========================================================= */
@media (hover: hover) {
.kht-quy-trinh
.kht-quy-trinh-nd > .col:hover
.col-inner {
border-color: rgba(40, 203, 139, 0.45);
box-shadow:
0 15px 34px rgba(18, 94, 69, 0.1);
transform: translateY(-2px);
}
/* Giữ card active ổn định khi hover */
.kht-quy-trinh
.kht-quy-trinh-nd > .col.is-active-step:hover
.col-inner {
transform: translateY(-2px);
}
}
/* =========================================================
14. HIỆU ỨNG CHUYỂN CÔNG ĐOẠN
========================================================= */
.kht-quy-trinh .kht-passport-current-number,
.kht-quy-trinh .kht-passport-current-title,
.kht-quy-trinh .kht-passport-eyebrow,
.kht-quy-trinh .kht-passport-description {
opacity: 1;
transform: translateY(0);
transition:
opacity 0.22s ease,
transform 0.22s ease;
}
/* Tạm ẩn nội dung cũ trước khi thay đổi */
.kht-quy-trinh
.kht-passport-stage.is-changing
.kht-passport-current-number,
.kht-quy-trinh
.kht-passport-stage.is-changing
.kht-passport-current-title,
.kht-quy-trinh
.kht-passport-stage.is-changing
.kht-passport-eyebrow,
.kht-quy-trinh
.kht-passport-stage.is-changing
.kht-passport-description {
opacity: 0;
transform: translateY(12px);
}
/* =========================================================
15. HIỆU ỨNG XUẤT HIỆN KHI CUỘN
========================================================= */
.kht-quy-trinh.kht-passport-ready .kht-quy-trinh-text {
opacity: 0;
transform: translateY(24px);
transition:
opacity 0.7s ease,
transform 0.7s ease;
}
/* Trạng thái ban đầu của khung lớn */
.kht-quy-trinh.kht-passport-ready .kht-passport-stage {
opacity: 0;
transform: translateY(28px) scale(0.99);
transition:
opacity 0.72s ease 0.08s,
transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}
/* Trạng thái ban đầu của danh sách card */
.kht-quy-trinh.kht-passport-ready
.kht-quy-trinh-nd > .col {
opacity: 0;
transform: translateY(22px);
transition:
opacity 0.52s ease var(--kht-passport-delay, 0ms),
transform 0.52s ease var(--kht-passport-delay, 0ms);
}
/* Hiển thị tiêu đề khi section xuất hiện */
.kht-quy-trinh.kht-passport-ready.is-passport-visible
.kht-quy-trinh-text {
opacity: 1;
transform: translateY(0);
}
/* Hiển thị khung chính khi section xuất hiện */
.kht-quy-trinh.kht-passport-ready.is-passport-visible
.kht-passport-stage {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Hiển thị card khi section xuất hiện */
.kht-quy-trinh.kht-passport-ready.is-passport-visible
.kht-quy-trinh-nd > .col {
opacity: 1;
transform: translateY(0);
}
/* =========================================================
16. ANIMATION VÒNG QUỸ ĐẠO
========================================================= */
@keyframes kht-passport-orbit-rotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* =========================================================
17. RESPONSIVE LAPTOP
========================================================= */
@media screen and (max-width: 1200px) {
/* Giữ typography tiêu đề đồng bộ trên laptop */
.kht-quy-trinh .kht-quy-trinh-text p {
font-size: clamp(28px, 3vw, 40px);
}
.kht-quy-trinh .kht-passport-stage-inner {
grid-template-columns: 200px minmax(0, 1fr);
padding-right: 42px;
padding-left: 42px;
}
.kht-quy-trinh .kht-passport-content {
padding-left: 38px;
}
}
/* =========================================================
18. RESPONSIVE TABLET
========================================================= */
@media screen and (max-width: 1024px) {
.kht-quy-trinh .section-content {
padding: 0px 18px 56px;
}
.kht-quy-trinh .kht-quy-trinh-text {
margin-bottom: 32px;
}
/* Giữ typography tiêu đề đồng bộ trên tablet ngang */
.kht-quy-trinh .kht-quy-trinh-text p {
font-size: clamp(28px, 3vw, 40px);
}
.kht-quy-trinh .kht-passport-stage-inner {
grid-template-columns: 180px minmax(0, 1fr);
padding: 32px 38px 78px;
}
.kht-quy-trinh .kht-passport-number-area::before {
width: 142px;
height: 142px;
}
.kht-quy-trinh .kht-passport-number-area::after {
width: 122px;
height: 122px;
}
.kht-quy-trinh .kht-passport-current-number {
font-size: 84px;
}
.kht-quy-trinh .kht-passport-content {
padding-left: 30px;
}
.kht-quy-trinh .kht-passport-current-title {
font-size: clamp(25px, 3.2vw, 32px);
line-height: 1.3;
}
/* Chuyển danh sách card thành hai cột trên tablet */
.kht-quy-trinh .kht-quy-trinh-nd {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: none;
gap: 14px;
}
/* Trả các card về đúng thứ tự HTML */
.kht-quy-trinh
.kht-quy-trinh-nd > .col:nth-child(n) {
grid-column: auto;
grid-row: auto;
}
/* Ẩn đường kết nối desktop */
.kht-quy-trinh
.kht-quy-trinh-nd > .col::before,
.kht-quy-trinh
.kht-quy-trinh-nd > .col::after {
display: none;
}
}
/* =========================================================
19. RESPONSIVE MOBILE
Chỉ thay đổi giao diện màn hình dưới 768px
========================================================= */
@media screen and (max-width: 767px) {
/* Tạo khoảng cách khi điều hướng tới section bằng anchor */
.kht-quy-trinh {
scroll-margin-top: 88px;
}
/* Tăng khoảng thở phía trên tiêu đề mobile */
.kht-quy-trinh .section-content {
padding: 0px 14px 42px;
}
/* Đảm bảo vùng tiêu đề không bị cắt */
.kht-quy-trinh .kht-quy-trinh-text {
margin-bottom: 27px;
overflow: visible;
}
/* Thu khoảng cách trái của khung tiêu đề trên mobile */
.kht-quy-trinh .kht-quy-trinh-text .col-inner {
padding-left: 17px;
}
/* Thanh xanh mobile đúng format tiêu đề năng lực sản xuất */
.kht-quy-trinh .kht-quy-trinh-text .col-inner::before {
width: 4px;
}
/* Typography tiêu đề mobile đồng bộ với section năng lực sản xuất */
.kht-quy-trinh .kht-quy-trinh-text p {
width: 100%;
max-width: 100%;
font-size: clamp(17px, 2.8vw, 24px);
line-height: 1.2;
letter-spacing: -0.025em;
text-align: left;
text-wrap: balance;
overflow: visible;
overflow-wrap: normal;
word-break: normal;
}
/* =====================================================
KHUNG CÔNG ĐOẠN MOBILE
===================================================== */
.kht-quy-trinh .kht-passport-stage {
min-height: 360px;
border-radius: 24px;
background:
radial-gradient(
circle at 88% 6%,
rgba(255, 255, 255, 0.12),
transparent 21%
),
linear-gradient(
145deg,
var(--kht-stage-start) 0%,
var(--kht-stage-end) 100%
);
}
/* Thu nhỏ vòng tròn trang trí phía trên bên phải */
.kht-quy-trinh .kht-passport-stage::before {
top: -62px;
right: -46px;
width: 190px;
height: 190px;
border-width: 30px;
border-color: rgba(255, 255, 255, 0.07);
}
/* Điều chỉnh đường phân cách vùng footer */
.kht-quy-trinh .kht-passport-stage::after {
right: 22px;
bottom: 67px;
left: 22px;
}
/* Chuyển khung thành bố cục một cột */
.kht-quy-trinh .kht-passport-stage-inner {
display: block;
min-height: 360px;
padding: 20px 22px 88px;
}
/* =====================================================
CĂN TÂM SỐ CÔNG ĐOẠN MOBILE
===================================================== */
/* Tạo khu vực cố định cho vòng tròn và số công đoạn */
.kht-quy-trinh .kht-passport-number-area {
position: relative;
display: block;
width: 108px;
min-height: 94px;
}
/* Đặt vòng ngoài đúng tâm khu vực số */
.kht-quy-trinh .kht-passport-number-area::before {
top: 50%;
left: 50%;
width: 84px;
height: 84px;
box-shadow:
0 0 0 12px rgba(255, 255, 255, 0.065),
inset 0 0 22px rgba(255, 255, 255, 0.07);
}
/* Đặt vòng quay đúng cùng một tâm */
.kht-quy-trinh .kht-passport-number-area::after {
top: 50%;
left: 50%;
width: 71px;
height: 71px;
}
/* Đặt số tuyệt đối vào đúng tâm hình tròn */
.kht-quy-trinh .kht-passport-current-number {
position: absolute;
top: 50%;
left: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 84px;
height: 84px;
padding: 0;
font-size: 58px;
line-height: 1;
letter-spacing: -0.07em;
text-align: center;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
transform: translate(-50%, -50%);
}
/* Giữ số đúng tâm khi hiệu ứng chuyển bước chạy */
.kht-quy-trinh
.kht-passport-stage.is-changing
.kht-passport-current-number {
transform: translate(-50%, calc(-50% + 10px));
}
/* Đặt tổng số bước sát cạnh dưới vòng tròn */
.kht-quy-trinh .kht-passport-total-number {
right: 0;
bottom: 8px;
left: auto;
font-size: 10px;
}
/* =====================================================
NỘI DUNG CÔNG ĐOẠN MOBILE
===================================================== */
.kht-quy-trinh .kht-passport-content {
width: 100%;
max-width: 100%;
padding: 6px 0 0;
}
.kht-quy-trinh .kht-passport-eyebrow {
margin-bottom: 11px;
font-size: 9px;
}
/* Tối ưu tiêu đề công đoạn dài */
.kht-quy-trinh .kht-passport-current-title {
width: 100%;
max-width: 100%;
padding-right: 4px;
font-size: 18.5px;
line-height: 1.34;
letter-spacing: -0.025em;
overflow-wrap: break-word;
}
/* Tối ưu phần mô tả công đoạn */
.kht-quy-trinh .kht-passport-description {
width: 100%;
max-width: 100%;
margin-top: 10px;
padding-right: 3px;
font-size: 12px;
line-height: 1.52;
overflow-wrap: break-word;
}
/* =====================================================
TIẾN ĐỘ VÀ NÚT ĐIỀU HƯỚNG MOBILE
===================================================== */
.kht-quy-trinh .kht-passport-footer {
right: 22px;
bottom: 20px;
left: 22px;
gap: 12px;
}
.kht-quy-trinh .kht-passport-progress {
min-width: 0;
gap: 8px;
}
.kht-quy-trinh .kht-passport-progress-value {
min-width: 36px;
font-size: 9px;
}
.kht-quy-trinh .kht-passport-progress-track {
min-width: 0;
height: 4px;
}
.kht-quy-trinh .kht-passport-controls {
gap: 8px;
}
.kht-quy-trinh .kht-passport-control {
flex: 0 0 38px;
width: 38px;
height: 38px;
}
/* =====================================================
SLIDER CARD MOBILE
===================================================== */
/* Các card nằm trên một hàng và có thể vuốt ngang */
.kht-quy-trinh .kht-quy-trinh-nd.row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
flex-flow: row nowrap;
align-items: stretch;
width: calc(100% + 14px);
max-width: none;
gap: 10px;
margin: 20px -14px 0 0;
padding: 0 14px 7px 0;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-left: 0;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
/* Ẩn thanh cuộn ngang trên Chrome và Safari */
.kht-quy-trinh
.kht-quy-trinh-nd.row::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
/* Thiết lập chiều ngang từng card mobile */
.kht-quy-trinh
.kht-quy-trinh-nd.row > .col {
flex: 0 0 clamp(220px, 70vw, 270px);
width: clamp(220px, 70vw, 270px);
min-width: clamp(220px, 70vw, 270px);
max-width: clamp(220px, 70vw, 270px);
margin: 0;
padding: 0;
scroll-snap-align: start;
scroll-snap-stop: always;
}
/* Xóa vị trí grid ziczac desktop trên mobile */
.kht-quy-trinh
.kht-quy-trinh-nd.row > .col:nth-child(n) {
grid-column: auto;
grid-row: auto;
}
/* Ẩn đường kết nối desktop trong slider mobile */
.kht-quy-trinh
.kht-quy-trinh-nd.row > .col::before,
.kht-quy-trinh
.kht-quy-trinh-nd.row > .col::after {
display: none;
}
/*
* Giảm chiều cao card quy trình mobile.
* Chỉ thay đổi chiều cao và padding card.
* Ô số và nội dung giữ nguyên kích thước.
*/
.kht-quy-trinh
.kht-quy-trinh-nd.row
.col-inner {
grid-template-columns: 40px minmax(0, 1fr);
min-height: 68px;
height: 68px;
padding: 7px 11px;
border-radius: 15px;
}
/* Thu gọn đường trạng thái phía dưới card */
.kht-quy-trinh
.kht-quy-trinh-nd.row
.col-inner::before {
right: 11px;
left: 11px;
height: 3px;
}
/* Giữ họa tiết trang trí gọn trong card thấp hơn */
.kht-quy-trinh
.kht-quy-trinh-nd.row
.col-inner::after {
right: -22px;
bottom: -27px;
width: 56px;
height: 56px;
border-width: 10px;
}
/* Giữ nguyên ô số thứ tự trong card */
.kht-quy-trinh .kht-passport-tab-number {
width: 34px;
height: 34px;
border-radius: 10px;
font-size: 12px;
}
/* Giữ nguyên nội dung chữ trong card */
.kht-quy-trinh .kht-passport-tab-title {
padding-left: 7px;
font-size: 12px;
line-height: 1.34;
}
/* Giảm scale số của card active */
.kht-quy-trinh
.kht-quy-trinh-nd > .col.is-active-step
.kht-passport-tab-number {
transform: scale(1.02);
}
/* Không nâng card active để tránh bị cắt shadow */
.kht-quy-trinh
.kht-quy-trinh-nd > .col.is-active-step
.col-inner {
transform: translateY(0);
box-shadow:
0 10px 25px rgba(18, 104, 75, 0.11),
0 0 0 3px rgba(40, 203, 139, 0.045);
}
/* =====================================================
NÚT QUAY LẠI ĐẦU TRANG CỦA FLATSOME
===================================================== */
/* Thu nhỏ nút để không che slider */
.back-to-top.button,
.back-to-top.button.icon {
right: 8px;
bottom: 12px;
width: 34px;
min-width: 34px;
height: 34px;
margin: 0;
padding: 0;
opacity: 0.72;
}
}
/* =========================================================
20. MOBILE MÀN HÌNH NHỎ
========================================================= */
@media screen and (max-width: 390px) {
/* Giữ tiêu đề đồng bộ trên màn hình mobile nhỏ */
.kht-quy-trinh .kht-quy-trinh-text p {
max-width: 100%;
font-size: clamp(17px, 2.8vw, 24px);
}
/* Thu nhỏ chiều ngang card trên màn hình hẹp */
.kht-quy-trinh
.kht-quy-trinh-nd.row > .col {
flex-basis: clamp(210px, 68vw, 250px);
width: clamp(210px, 68vw, 250px);
min-width: clamp(210px, 68vw, 250px);
max-width: clamp(210px, 68vw, 250px);
}
/*
* Giảm thêm chiều cao card trên điện thoại nhỏ.
* Icon số và text vẫn giữ nguyên.
*/
.kht-quy-trinh
.kht-quy-trinh-nd.row
.col-inner {
min-height: 64px;
height: 64px;
padding: 6px 10px;
}
/* Căn lại dải trạng thái theo padding mới */
.kht-quy-trinh
.kht-quy-trinh-nd.row
.col-inner::before {
right: 10px;
left: 10px;
}
.kht-quy-trinh .kht-passport-current-title {
font-size: 18px;
}
/* Thu nhỏ nhẹ vòng và số trên điện thoại rất nhỏ */
.kht-quy-trinh .kht-passport-number-area {
width: 102px;
}
.kht-quy-trinh .kht-passport-number-area::before {
width: 80px;
height: 80px;
}
.kht-quy-trinh .kht-passport-number-area::after {
width: 68px;
height: 68px;
}
.kht-quy-trinh .kht-passport-current-number {
width: 80px;
height: 80px;
font-size: 55px;
}
}
/* =========================================================
21. HỖ TRỢ NGƯỜI DÙNG HẠN CHẾ CHUYỂN ĐỘNG
========================================================= */
@media (prefers-reduced-motion: reduce) {
.kht-quy-trinh *,
.kht-quy-trinh *::before,
.kht-quy-trinh *::after {
scroll-behavior: auto;
transition-duration: 0.01ms;
animation-duration: 0.01ms;
animation-iteration-count: 1;
}
}
/* ==================================================
KEHETO - LỊCH SỬ HÌNH THÀNH VÀ PHÁT TRIỂN
Class được giới hạn trong .kht-history
================================================== */
/* ==================================================
1. BIẾN GIAO DIỆN CỦA SECTION
================================================== */
.kht-history {
--kht-history-primary: #03b0b1;
--kht-history-primary-dark: #027f80;
--kht-history-text: #172425;
--kht-history-muted: #657172;
--kht-history-border: rgba(3, 176, 177, 0.18);
--kht-history-progress: 0;
position: relative;
overflow: hidden;
padding: clamp(70px, 7vw, 110px) 20px;
background:
radial-gradient(
circle at 8% 12%,
rgba(3, 176, 177, 0.1),
transparent 28%
),
radial-gradient(
circle at 92% 88%,
rgba(3, 176, 177, 0.08),
transparent 26%
),
#f7fbfb;
}
/* Họa tiết nền trang trí, không ảnh hưởng nội dung */
.kht-history::before,
.kht-history::after {
position: absolute;
width: 360px;
height: 360px;
border: 1px solid rgba(3, 176, 177, 0.12);
border-radius: 50%;
content: "";
pointer-events: none;
}
.kht-history::before {
top: -230px;
left: -170px;
}
.kht-history::after {
right: -190px;
bottom: -245px;
}
/* Khung giới hạn chiều rộng theo layout KEHETO */
.kht-history__container {
position: relative;
z-index: 2;
width: 100%;
max-width: 1320px;
margin: 0 auto;
}
/* ==================================================
2. TIÊU ĐỀ SECTION
================================================== */
.kht-history__header {
max-width: 780px;
margin: 0 auto clamp(45px, 5vw, 70px);
text-align: center;
}
.kht-history__eyebrow {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
margin-bottom: 14px;
padding: 6px 18px;
border: 1px solid rgba(3, 176, 177, 0.22);
border-radius: 999px;
background: rgba(255, 255, 255, 0.85);
color: var(--kht-history-primary-dark);
font-size: 13px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.12em;
}
.kht-history__heading {
margin: 0;
color: var(--kht-history-text);
font-size: clamp(31px, 4vw, 54px);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.035em;
text-transform: none;
}
/* Đường nhấn bên dưới tiêu đề */
.kht-history__heading-line {
position: relative;
width: 78px;
height: 4px;
margin: 24px auto 0;
overflow: hidden;
border-radius: 999px;
background: rgba(3, 176, 177, 0.16);
}
.kht-history__heading-line::before {
position: absolute;
inset: 0 auto 0 0;
width: 44px;
border-radius: inherit;
background: var(--kht-history-primary);
content: "";
}
/* ==================================================
3. KHUNG TIMELINE
================================================== */
.kht-history__timeline {
position: relative;
width: 100%;
margin: 0;
padding: 10px 0;
list-style: none;
}
/* Đường timeline chạy chính giữa desktop */
.kht-history__line {
position: absolute;
top: 30px;
bottom: 30px;
left: 50%;
width: 4px;
overflow: hidden;
border-radius: 999px;
background: rgba(3, 176, 177, 0.14);
transform: translateX(-50%);
}
/* Đường màu chạy theo tiến độ khi người dùng cuộn trang */
.kht-history__line-fill {
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
180deg,
var(--kht-history-primary),
#5fd6d6
);
transform: scaleY(var(--kht-history-progress));
transform-origin: center top;
transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* ==================================================
4. BỐ CỤC TỪNG CỘT MỐC
================================================== */
.kht-history__item {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr);
align-items: center;
min-height: 150px;
margin: 0;
padding: 14px 0;
}
/* Card cột mốc bên trái */
.kht-history__item:nth-child(odd) .kht-history__card {
grid-column: 1;
justify-self: end;
margin-right: 12px;
}
/* Card cột mốc bên phải */
.kht-history__item:nth-child(even) .kht-history__card {
grid-column: 3;
justify-self: start;
margin-left: 12px;
}
/* Điểm tròn luôn nằm chính giữa timeline */
.kht-history__node {
position: relative;
z-index: 4;
grid-column: 2;
grid-row: 1;
display: flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
margin: 0 auto;
border: 7px solid #f7fbfb;
border-radius: 50%;
background: var(--kht-history-primary);
box-shadow:
0 0 0 1px rgba(3, 176, 177, 0.22),
0 8px 22px rgba(3, 176, 177, 0.2);
color: #ffffff;
}
/* Vòng tròn trang trí quanh điểm timeline */
.kht-history__node::before {
position: absolute;
inset: -13px;
border: 1px solid rgba(3, 176, 177, 0.24);
border-radius: 50%;
content: "";
transform: scale(0.85);
transition:
opacity 300ms ease,
transform 300ms ease;
}
.kht-history__node span {
font-size: 12px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.06em;
}
/* ==================================================
5. THẺ NỘI DUNG CỘT MỐC
================================================== */
.kht-history__card {
position: relative;
grid-row: 1;
width: min(100%, 505px);
margin-bottom: 0;
padding: 23px 26px 24px;
border: 1px solid var(--kht-history-border);
border-radius: 18px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 14px 38px rgba(20, 55, 56, 0.07);
transition:
border-color 300ms ease,
box-shadow 300ms ease,
transform 300ms ease;
}
/* Mũi tên nối card bên trái với timeline */
.kht-history__item:nth-child(odd) .kht-history__card::after {
position: absolute;
top: 50%;
right: -9px;
width: 16px;
height: 16px;
border-top: 1px solid var(--kht-history-border);
border-right: 1px solid var(--kht-history-border);
background: #ffffff;
content: "";
transform: translateY(-50%) rotate(45deg);
}
/* Mũi tên nối card bên phải với timeline */
.kht-history__item:nth-child(even) .kht-history__card::after {
position: absolute;
top: 50%;
left: -9px;
width: 16px;
height: 16px;
border-bottom: 1px solid var(--kht-history-border);
border-left: 1px solid var(--kht-history-border);
background: #ffffff;
content: "";
transform: translateY(-50%) rotate(45deg);
}
/* Hiệu ứng hover card trên thiết bị có chuột */
@media (hover: hover) {
.kht-history__item:hover .kht-history__card {
border-color: rgba(3, 176, 177, 0.42);
box-shadow: 0 20px 50px rgba(20, 55, 56, 0.12);
transform: translateY(-5px);
}
.kht-history__item:hover .kht-history__node::before {
opacity: 0;
transform: scale(1.45);
}
}
/* Năm của từng cột mốc */
.kht-history__year {
display: inline-flex;
align-items: center;
min-height: 30px;
margin-bottom: 11px;
padding: 5px 13px;
border-radius: 999px;
background: rgba(3, 176, 177, 0.1);
color: var(--kht-history-primary-dark);
font-size: 15px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0.04em;
}
/* Tiêu đề cột mốc */
.kht-history__title {
margin: 0 0 9px;
color: var(--kht-history-text);
font-size: clamp(18px, 1.65vw, 23px);
font-weight: 700;
line-height: 1.35;
text-transform: none;
}
/* Nội dung mô tả cột mốc */
.kht-history__description {
margin: 0;
color: var(--kht-history-muted);
font-size: 15px;
font-weight: 400;
line-height: 1.7;
}
/* ==================================================
6. HIỆU ỨNG XUẤT HIỆN KHI CUỘN
Chỉ kích hoạt khi JavaScript đã khởi tạo
================================================== */
.kht-history--js .kht-history__card {
opacity: 0;
transform: translateY(30px);
transition:
opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--kht-delay, 0ms),
transform 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--kht-delay, 0ms),
border-color 300ms ease,
box-shadow 300ms ease;
}
.kht-history--js .kht-history__node {
opacity: 0;
transform: scale(0.65);
transition:
opacity 500ms ease var(--kht-delay, 0ms),
transform 600ms cubic-bezier(0.22, 1, 0.36, 1) var(--kht-delay, 0ms);
}
/* Trạng thái đã xuất hiện */
.kht-history--js .kht-history__item.is-visible .kht-history__card {
opacity: 1;
transform: translateY(0);
}
.kht-history--js .kht-history__item.is-visible .kht-history__node {
opacity: 1;
transform: scale(1);
}
/* ==================================================
7. TABLET
================================================== */
@media screen and (max-width: 849px) {
.kht-history {
padding: 70px 24px;
}
.kht-history__item {
grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
}
.kht-history__card {
padding: 21px 22px;
}
.kht-history__node {
width: 52px;
height: 52px;
}
}
/* ==================================================
8. MOBILE
Chuyển timeline thành một cột để dễ đọc
================================================== */
@media screen and (max-width: 549px) {
.kht-history {
padding: 58px 16px 64px;
}
.kht-history__header {
margin-bottom: 38px;
}
.kht-history__heading {
font-size: 32px;
line-height: 1.18;
}
.kht-history__heading-line {
margin-top: 19px;
}
.kht-history__timeline {
padding: 0;
}
/* Đưa đường timeline sang bên trái mobile */
.kht-history__line {
top: 25px;
bottom: 25px;
left: 25px;
transform: none;
}
.kht-history__item {
grid-template-columns: 52px minmax(0, 1fr);
min-height: 0;
padding: 0 0 22px;
}
.kht-history__item:last-child {
padding-bottom: 0;
}
/* Tất cả card mobile nằm bên phải đường timeline */
.kht-history__item:nth-child(odd) .kht-history__card,
.kht-history__item:nth-child(even) .kht-history__card {
grid-column: 2;
grid-row: 1;
justify-self: stretch;
width: 100%;
margin: 0 0 0 10px;
}
/* Điểm timeline mobile nằm ở cột đầu tiên */
.kht-history__node {
grid-column: 1;
grid-row: 1;
align-self: start;
width: 46px;
height: 46px;
margin-top: 21px;
border-width: 6px;
}
.kht-history__node::before {
inset: -10px;
}
.kht-history__node span {
font-size: 10px;
}
.kht-history__card {
padding: 19px 18px 20px;
border-radius: 15px;
}
/* Trên mobile tất cả mũi tên đều quay về bên trái */
.kht-history__item:nth-child(odd) .kht-history__card::after,
.kht-history__item:nth-child(even) .kht-history__card::after {
top: 35px;
right: auto;
left: -8px;
width: 14px;
height: 14px;
border-top: 0;
border-right: 0;
border-bottom: 1px solid var(--kht-history-border);
border-left: 1px solid var(--kht-history-border);
transform: rotate(45deg);
}
.kht-history__year {
min-height: 27px;
margin-bottom: 9px;
padding: 4px 11px;
font-size: 13px;
}
.kht-history__title {
margin-bottom: 7px;
font-size: 17px;
line-height: 1.4;
}
.kht-history__description {
font-size: 14px;
line-height: 1.65;
}
}
/* ==================================================
9. HỖ TRỢ NGƯỜI DÙNG TẮT CHUYỂN ĐỘNG
================================================== */
@media (prefers-reduced-motion: reduce) {
.kht-history *,
.kht-history *::before,
.kht-history *::after {
scroll-behavior: auto;
transition-duration: 0.01ms;
animation-duration: 0.01ms;
animation-iteration-count: 1;
}
}
/* =========================================================
KEHETO - SECTION NĂNG LỰC SẢN XUẤT 1
Phong cách: Orbital Metrics + Production Rail
Cấu trúc mới:
1. Hàng giới thiệu + nút
2. Hàng số liệu + hình ảnh
Chỉ tác động bên trong .kht-gioi-thieu1
Không sử dụng ID tự sinh của UX Builder
Không sử dụng !important
========================================================= */
.kht-gioi-thieu1 {
/* Màu chính KEHETO */
--kht-primary: #28cb8b;
/* Color Shade */
--kht-shade-1: #43a046;
--kht-shade-2: #3b8e3b;
--kht-shade-3: #237d31;
--kht-shade-4: #1b5e1f;
--kht-shade-5: #103e13;
/* Color Tint */
--kht-tint-1: #66bb69;
--kht-tint-2: #81c784;
--kht-tint-3: #a5d6a7;
--kht-tint-4: #c8e6c9;
--kht-tint-5: #e8f5e9;
/* Neutral */
--kht-black: #263238;
--kht-dark-grey: #4d4d4d;
--kht-grey: #717171;
--kht-light-grey: #89939e;
--kht-grey-blue: #abbed1;
--kht-silver: #f5f7fa;
--kht-white: #ffffff;
/* Màu sử dụng theo ngữ cảnh */
--kht-heading: var(--kht-shade-5);
/* --kht-body: var(--kht-dark-grey); */
--kht-muted: var(--kht-grey);
--kht-line: rgba(40, 203, 139, 0.2);
--kht-surface: rgba(255, 255, 255, 0.94);
--kht-surface-soft: rgba(255, 255, 255, 0.68);
--kht-shadow: 0 24px 60px rgba(16, 62, 19, 0.13);
/* Nền dùng đúng Neutral + Color Tint trong tài liệu KEHETO */
--kht-bg-base: #f5f7fa;
--kht-bg-white: #ffffff;
--kht-bg-tint-3: #a5d6a7;
--kht-bg-tint-4: #c8e6c9;
--kht-bg-tint-5: #e8f5e9;
position: relative;
overflow: hidden;
isolation: isolate;
background-color: var(--kht-bg-base);
}
/* Đồng bộ cách tính kích thước trong section */
.kht-gioi-thieu1,
.kht-gioi-thieu1 * {
box-sizing: border-box;
}
/* =========================================================
NỀN SECTION KEHETO
Màu sử dụng:
- Trắng: #ffffff
- Bạc: #f5f7fa
- Xanh tint nhạt: #e8f5e9
- Xanh thương hiệu: #28cb8b
Loại bỏ:
- Màu nền xuyên từ section phía sau
- Blend mode gây lệch màu
- Filter gây ám màu
- Gradient tối hoặc ám hồng
========================================================= */
/* Nền gốc của toàn bộ section */
.kht-gioi-thieu1 {
position: relative;
overflow: hidden;
isolation: isolate;
background-color: var(--kht-bg-base);
background-image: none;
filter: none;
mix-blend-mode: normal;
}
/* =========================================================
NỀN SECTION KEHETO
Loại bỏ hoàn toàn vùng màu ám bên trái
========================================================= */
.section.kht-gioi-thieu1 > .section-bg.fill {
position: absolute;
inset: 0;
opacity: 1;
/* Nền đặc, không lấy màu từ bên ngoài */
background-color: #f5f7fa;
/*
* Chỉ giữ gradient xanh rất nhẹ ở bên phải.
* Đã xóa radial-gradient tại 8% 12% bên trái.
*/
background-image:
radial-gradient(
circle at 92% 88%,
rgba(165, 214, 167, 0.18) 0%,
rgba(200, 230, 201, 0.08) 26%,
transparent 46%
),
linear-gradient(
135deg,
#ffffff 0%,
#ffffff 30%,
#f5f7fa 66%,
#e8f5e9 100%
);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-blend-mode: normal;
mix-blend-mode: normal;
filter: none;
}
/* Lưới kỹ thuật màu xanh KEHETO rất nhẹ */
.section.kht-gioi-thieu1
> .section-bg.fill::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 1;
background-image:
linear-gradient(
rgba(40, 203, 139, 0.035) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(40, 203, 139, 0.035) 1px,
transparent 1px
);
background-size: 58px 58px;
background-position: center;
filter: none;
mix-blend-mode: normal;
}
/* Vòng trang trí xanh phía sau khu vực ảnh */
.section.kht-gioi-thieu1
> .section-bg.fill::after {
content: "";
position: absolute;
top: -270px;
right: -250px;
width: 690px;
height: 690px;
border: 1px solid rgba(40, 203, 139, 0.13);
border-radius: 50%;
background-color: transparent;
box-shadow:
0 0 0 72px rgba(40, 203, 139, 0.035),
0 0 0 144px rgba(232, 245, 233, 0.38);
pointer-events: none;
filter: none;
mix-blend-mode: normal;
}
/* =========================================================
KHUNG NỘI DUNG CHUNG
========================================================= */
.kht-gioi-thieu1 .section-content {
position: relative;
z-index: 2;
padding-top: 38px;
/* padding-bottom: 42px; */
}
/* Reset margin cho nội dung văn bản */
.kht-gioi-thieu1 .kht-tieude p,
.kht-gioi-thieu1 .kht-spngay p,
.kht-gioi-thieu1 .kht-congthuc p,
.kht-gioi-thieu1 .kht-nhamay p,
.kht-gioi-thieu1 .kht-xuong p,
.kht-gioi-thieu1 .kht-doitac p,
.kht-gioi-thieu1 .img1 p,
.kht-gioi-thieu1 .img2 p,
.kht-gioi-thieu1 .img3 p,
.kht-gioi-thieu1 .img4 p {
margin: 0;
}
/* =========================================================
KEHETO - TIÊU ĐỀ + CTA TỐI GIẢN CÓ ĐIỂM NHẤN
Chức năng:
1. Giữ nguyên HTML hiện tại.
2. Không thêm bất kỳ nội dung chữ nào.
3. Tiêu đề và CTA luôn nằm cùng một hàng.
4. Bỏ khung card lớn để giao diện nhẹ và gọn hơn.
5. Thu khoảng cách với cụm số liệu bên dưới.
6. Chỉ tác động bên trong .kht-gioi-thieu1.
7. Không sử dụng !important.
========================================================= */
/* =========================================================
HÀNG CHỨA TIÊU ĐỀ VÀ CTA
========================================================= */
.kht-gioi-thieu1
> .section-content
> .row:first-child {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: clamp(18px, 3vw, 46px);
width: calc(100% - 40px);
max-width: 1320px;
margin: 0 auto 14px;
padding: 0 0 14px;
overflow: visible;
border: 0;
background: transparent;
box-shadow: none;
}
/* Đường nhấn mảnh nối toàn bộ hàng tiêu đề */
.kht-gioi-thieu1
> .section-content
> .row:first-child::before {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
background:
linear-gradient(
90deg,
var(--kht-primary) 0%,
rgba(40, 203, 139, 0.38) 38%,
rgba(40, 203, 139, 0.1) 78%,
transparent 100%
);
pointer-events: none;
}
/* Điểm nhấn nhỏ trên đường line */
.kht-gioi-thieu1
> .section-content
> .row:first-child::after {
content: "";
position: absolute;
bottom: -3px;
left: clamp(160px, 28%, 360px);
width: 7px;
height: 7px;
border: 2px solid var(--kht-white);
border-radius: 50%;
background: var(--kht-primary);
box-shadow:
0 0 0 3px rgba(40, 203, 139, 0.1);
pointer-events: none;
}
/* Reset kích thước cột mặc định của Flatsome */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .col {
position: relative;
width: auto;
max-width: none;
min-width: 0;
flex-basis: auto;
margin: 0;
padding: 0;
}
/* =========================================================
KHỐI TIÊU ĐỀ CHUẨN KEHETO
Chức năng:
- Sao chép đúng ngôn ngữ thiết kế của .kht-truoc-sau-text.
- Giữ thanh xanh gradient ở cạnh trái.
- Bỏ chấm tròn trên thanh tiêu đề.
- Desktop chỉ xuống dòng tại thẻ
có sẵn trong HTML.
- Không thay đổi đường line, CTA hoặc nội dung phía dưới.
========================================================= */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-tieude {
min-width: 0;
align-self: center;
}
/* Khung tiêu đề giữ nền trong suốt và chừa chỗ cho thanh xanh */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-tieude
> .col-inner {
position: relative;
width: 100%;
min-height: 54px;
display: flex;
align-items: center;
padding:
4px
clamp(18px, 2.5vw, 30px)
4px
24px;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
/* Thanh màu thương hiệu cạnh trái, đồng nhất với tiêu đề chuẩn */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-tieude
> .col-inner::before {
content: "";
position: absolute;
top: 4px;
bottom: 4px;
left: 0;
width: 5px;
border-radius: 20px;
background:
linear-gradient(
180deg,
#43a046,
#1b5e1f
);
}
/* Bỏ chấm tròn trên riêng thanh tiêu đề */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-tieude
> .col-inner::after {
content: none;
display: none;
}
/* Nội dung tiêu đề chuẩn KEHETO */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-tieude
p {
position: relative;
z-index: 2;
width: max-content;
max-width: none;
margin: 0;
padding: 0;
color: #263238;
font-size: clamp(28px, 3vw, 40px);
font-weight: 700;
line-height: 1.16;
letter-spacing: -0.035em;
text-align: left;
text-transform: uppercase;
/* Chỉ xuống dòng tại thẻ
trong HTML trên desktop */
white-space: nowrap;
text-wrap: nowrap;
overflow-wrap: normal;
word-break: normal;
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
}
/* =========================================================
KHỐI CTA - PHONG CÁCH DIRECTIONAL TAB
Thay đổi giao diện:
- Nút dạng khối bất đối xứng, không còn kiểu pill tròn.
- Mảng xanh bên phải tạo vùng điều hướng rõ ràng.
- Mũi tên được dựng bằng CSS, không thêm nội dung HTML.
- Giữ nguyên vị trí, chức năng và cấu trúc Flatsome.
========================================================= */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-nut {
align-self: center;
justify-self: end;
width: auto;
min-width: 0;
margin: 0;
padding: 0;
}
/* Khung chứa nút */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-nut
> .col-inner {
position: relative;
width: auto;
display: flex;
align-items: center;
justify-content: flex-end;
}
/* Loại bỏ pseudo-element mặc định trong khung CTA */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-nut
> .col-inner::before,
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-nut
> .col-inner::after {
content: none;
}
/* Reset margin nút Flatsome */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-nut
.button {
margin: 0;
}
/* Nút CTA dạng Directional Tab */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-nut
.button.primary {
position: relative;
z-index: 2;
width: 150px;
min-width: 150px;
min-height: 46px;
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0;
padding:
10px
48px
10px
19px;
overflow: hidden;
isolation: isolate;
border: 1px solid rgba(27, 94, 31, 0.18);
border-radius: 13px 4px 13px 4px;
background:
linear-gradient(
135deg,
var(--kht-shade-4) 0%,
var(--kht-shade-2) 100%
);
box-shadow:
7px 7px 0 rgba(40, 203, 139, 0.09),
0 10px 22px rgba(16, 62, 19, 0.16);
color: var(--kht-white);
transition:
border-color 0.3s ease,
box-shadow 0.3s ease,
transform 0.3s ease;
}
/* Mảng điều hướng riêng ở cạnh phải */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-nut
.button.primary::before {
content: "";
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 43px;
height: 100%;
border-left: 1px solid rgba(255, 255, 255, 0.24);
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.22) 0%,
rgba(255, 255, 255, 0.06) 100%
);
clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
transition:
width 0.3s ease,
background 0.3s ease;
}
/* Mũi tên điều hướng */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-nut
.button.primary::after {
content: "";
position: absolute;
z-index: 3;
top: 50%;
right: 17px;
width: 9px;
height: 9px;
border-top: 2px solid var(--kht-white);
border-right: 2px solid var(--kht-white);
transform:
translateY(-50%)
rotate(45deg);
transition:
right 0.3s ease,
transform 0.3s ease;
}
/* Text CTA lấy trực tiếp từ HTML */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-nut
.button.primary
span {
position: relative;
z-index: 3;
color: inherit;
font-size: 10.5px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.055em;
white-space: nowrap;
}
/* Hover nâng nhẹ toàn bộ nút */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-nut
.button.primary:hover {
border-color: rgba(40, 203, 139, 0.5);
box-shadow:
9px 9px 0 rgba(40, 203, 139, 0.12),
0 14px 28px rgba(16, 62, 19, 0.22);
color: var(--kht-white);
transform: translateY(-2px);
}
/* Mảng điều hướng mở rộng nhẹ khi hover */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-nut
.button.primary:hover::before {
width: 49px;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.28) 0%,
rgba(255, 255, 255, 0.08) 100%
);
}
/* Mũi tên tiến nhẹ về phía trước khi hover */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-nut
.button.primary:hover::after {
right: 14px;
transform:
translateY(-50%)
rotate(45deg);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 849px) {
/* Giữ tiêu đề và CTA cùng một hàng, giảm khoảng cách dưới */
.kht-gioi-thieu1
> .section-content
> .row:first-child {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 13px;
width: calc(100% - 30px);
margin-bottom: 13px;
padding-bottom: 12px;
}
/* Thu chiều cao khối tiêu đề */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-tieude
> .col-inner {
min-height: 50px;
padding:
4px
18px
4px
28px;
}
/* Thu thanh nhấn trên tablet */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-tieude
> .col-inner::before {
width: 4px;
height: 36px;
}
/* Tiêu đề tablet được phép co dòng để không tràn màn hình */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-tieude
p {
width: 100%;
max-width: 920px;
font-size: clamp(17px, 2.8vw, 24px);
line-height: 1.24;
white-space: normal;
text-wrap: balance;
}
/* Thu CTA Directional Tab trên tablet */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-nut
.button.primary {
width: 132px;
min-width: 132px;
min-height: 44px;
padding:
9px
43px
9px
16px;
border-radius: 12px 4px 12px 4px;
}
/* Thu mảng điều hướng tablet */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-nut
.button.primary::before {
width: 39px;
height: 100%;
}
/* Căn lại mũi tên tablet */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-nut
.button.primary::after {
right: 15px;
}
}
/* =========================================================
MOBILE - ĐỒNG BỘ TIÊU ĐỀ VỚI SECTION TRƯỚC / SAU
Chức năng thay đổi:
1. Chỉ thay đổi tiêu đề trên màn hình điện thoại.
2. Giữ nguyên CTA và toàn bộ giao diện khác.
3. Tiêu đề dùng thanh xanh dọc, cỡ chữ và nhịp dòng
đồng bộ với section Trước / Sau.
========================================================= */
@media (max-width: 549px) {
/* Tiêu đề và CTA tiếp tục nằm cùng một hàng */
.kht-gioi-thieu1
> .section-content
> .row:first-child {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
width: calc(100% - 24px);
max-width: none;
margin: 0 auto 14px;
padding: 0;
overflow: visible;
}
/* Bỏ đường ngang và điểm tròn của thiết kế desktop */
.kht-gioi-thieu1
> .section-content
> .row:first-child::before,
.kht-gioi-thieu1
> .section-content
> .row:first-child::after {
content: none;
display: none;
}
/* Cho cột tiêu đề co giãn đúng trong grid */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-tieude {
width: 100%;
max-width: none;
min-width: 0;
margin: 0;
padding: 0;
}
/* Khung tiêu đề mobile giống section Trước / Sau */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-tieude
> .col-inner {
position: relative;
width: 100%;
min-height: 0;
display: flex;
align-items: center;
margin: 0;
padding: 0 8px 0 17px;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
/* Thanh xanh dọc bên trái tiêu đề */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-tieude
> .col-inner::before {
content: "";
position: absolute;
top: 4px;
bottom: 4px;
left: 0;
width: 4px;
height: auto;
border-radius: 20px;
background: linear-gradient(
180deg,
#43a046,
#1b5e1f
);
box-shadow: none;
}
/* Xóa chấm trang trí cũ của tiêu đề */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-tieude
> .col-inner::after {
content: none;
display: none;
}
/* Chữ tiêu đề đồng bộ với section Trước / Sau */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-tieude
p {
position: relative;
z-index: 2;
width: 100%;
max-width: 760px;
margin: 0;
padding: 0;
color: #263238;
font-size: clamp(17px, 2.8vw, 24px);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.025em;
text-align: left;
text-transform: uppercase;
white-space: normal;
text-wrap: balance;
overflow: visible;
overflow-wrap: normal;
word-break: normal;
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
}
/* CTA mobile giữ nguyên thiết kế hiện tại */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-nut
.button.primary {
width: 84px;
min-width: 84px;
min-height: 38px;
padding: 7px 29px 7px 10px;
border-radius: 10px 3px 10px 3px;
box-shadow:
4px 4px 0 rgba(40, 203, 139, 0.08),
0 7px 16px rgba(16, 62, 19, 0.14);
}
/* Mảng điều hướng của CTA */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-nut
.button.primary::before {
right: 0;
width: 27px;
height: 100%;
}
/* Mũi tên CTA */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-nut
.button.primary::after {
right: 10px;
width: 7px;
height: 7px;
border-top-width: 1.5px;
border-right-width: 1.5px;
}
/* Chữ CTA */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-nut
.button.primary
span {
font-size: 7.2px;
letter-spacing: 0.015em;
}
}
/* =========================================================
MOBILE NHỎ
========================================================= */
@media (max-width: 379px) {
.kht-gioi-thieu1
> .section-content
> .row:first-child {
gap: 5px;
width: calc(100% - 20px);
margin-bottom: 0;
}
/* Giữ tiêu đề rõ ràng trên màn hình nhỏ */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-tieude
p {
font-size: clamp(17px, 2.8vw, 24px);
line-height: 1.2;
letter-spacing: -0.025em;
white-space: normal;
text-wrap: balance;
}
/* Thu CTA Directional Tab trên màn hình nhỏ */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-nut
.button.primary {
width: 80px;
min-width: 80px;
min-height: 36px;
padding:
7px
27px
7px
9px;
}
/* Thu mảng điều hướng màn hình nhỏ */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-nut
.button.primary::before {
width: 29px;
height: 100%;
}
/* Căn lại mũi tên màn hình nhỏ */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-nut
.button.primary::after {
right: 9px;
}
/* Thu chữ CTA màn hình nhỏ */
.kht-gioi-thieu1
> .section-content
> .row:first-child
> .kht-nut
.button.primary
span {
font-size: 6.8px;
}
}
/* =========================================================
HÀNG SỐ LIỆU + HÌNH ẢNH
Selector .row.row-small giúp không ảnh hưởng hàng giới thiệu
========================================================= */
.kht-gioi-thieu1
> .section-content
> .row.row-small {
display: grid;
grid-template-columns:
minmax(500px, 0.94fr)
minmax(550px, 1.06fr);
align-items: stretch;
gap: clamp(42px, 5vw, 78px);
width: calc(100% - 40px);
max-width: 1320px;
margin-right: auto;
margin-left: auto;
}
/* Hủy width 50% mặc định của Flatsome */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col {
width: 100%;
max-width: none;
flex-basis: auto;
padding: 0;
}
/* =========================================================
CỘT TRÁI - HỆ THỐNG VÒNG SỐ LIỆU
========================================================= */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner {
position: relative;
min-height: 630px;
}
/* Loại bỏ margin âm của row lồng trong Flatsome */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row {
width: 100%;
margin: 0;
}
/* Đưa hàng chứa số chính vào giữa cột */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:first-child {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* Hủy padding cột chứa số liệu chính */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:first-child
> .col {
width: 100%;
max-width: none;
padding: 0;
}
/* Căn vòng số liệu vào giữa */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:first-child
> .col
> .col-inner {
display: flex;
justify-content: center;
}
/* =========================================================
VÒNG TRÒN SỐ LIỆU CHÍNH
========================================================= */
.kht-gioi-thieu1 .kht-spngay {
position: relative;
z-index: 3;
width: 360px;
height: 360px;
display: grid;
place-items: center;
padding: 42px;
border: 1px solid rgba(40, 203, 139, 0.2);
border-radius: 50%;
text-align: center;
background:
radial-gradient(
circle at 34% 28%,
rgba(165, 214, 167, 0.2),
transparent 40%
),
rgba(255, 255, 255, 0.94);
box-shadow:
0 30px 70px rgba(16, 62, 19, 0.13),
inset 0 0 0 12px rgba(40, 203, 139, 0.035);
backdrop-filter: blur(10px);
}
/* Nội dung số nằm trên vòng quỹ đạo */
.kht-gioi-thieu1 .kht-spngay p {
position: relative;
z-index: 4;
}
/* Style chung cho vòng quỹ đạo do JavaScript tạo */
.kht-gioi-thieu1 .kht1-orbit-ring {
position: absolute;
z-index: 1;
border-radius: 50%;
pointer-events: none;
}
/* Vòng quỹ đạo ngoài */
.kht-gioi-thieu1 .kht1-orbit-ring-a {
inset: -34px;
border: 1px dashed rgba(40, 203, 139, 0.32);
}
/* Điểm sáng chạy theo vòng ngoài */
.kht-gioi-thieu1 .kht1-orbit-ring-a::before {
content: "";
position: absolute;
top: 50%;
left: -5px;
width: 11px;
height: 11px;
border: 3px solid var(--kht-white);
border-radius: 50%;
background: var(--kht-primary);
box-shadow: 0 0 0 6px rgba(40, 203, 139, 0.14);
}
/* Vòng quỹ đạo bên trong */
.kht-gioi-thieu1 .kht1-orbit-ring-b {
inset: 17px;
border: 1px solid rgba(67, 160, 70, 0.16);
}
/* Hai cung màu chuyển động bên trong */
.kht-gioi-thieu1 .kht1-orbit-ring-b::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 50%;
border-top: 3px solid var(--kht-primary);
border-right: 3px solid transparent;
border-bottom: 3px solid var(--kht-shade-2);
border-left: 3px solid transparent;
}
/* =========================================================
SỐ + ĐƠN VỊ
Dấu + và m2 nằm chính giữa theo chiều cao số
========================================================= */
.kht-gioi-thieu1 .kht-stat-number-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
max-width: 100%;
overflow: visible;
line-height: 1;
flex-wrap: nowrap;
}
/* Số chính được tăng độ tương phản và giữ nét rõ */
.kht-gioi-thieu1 .kht-spngay .kht-stat-number {
display: inline-block;
overflow: visible;
color: #0b3d1d;
font-size: clamp(54px, 5vw, 74px);
font-weight: 900;
line-height: 1.04;
letter-spacing: -0.045em;
white-space: nowrap;
opacity: 1;
text-shadow: none;
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
/* Nhãn nằm dưới số chính, tăng độ đậm để không chìm vào nền */
.kht-gioi-thieu1 .kht-spngay .kht-stat-label {
display: block;
max-width: 220px;
margin: 18px auto 0;
color: #263238;
font-size: 16px;
font-weight: 700;
line-height: 1.5;
opacity: 1;
text-shadow: none;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
/* Dấu cộng và m2 được căn giữa theo số và hiển thị rõ nét */
.kht-gioi-thieu1 .kht-stat-unit {
display: inline-flex;
align-self: center;
align-items: center;
justify-content: center;
padding: 0;
color: #1b5e1f;
font-size: 20px;
font-weight: 900;
line-height: 1;
white-space: nowrap;
opacity: 1;
text-shadow: none;
transform: translateY(0);
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
/* =========================================================
NĂM THÔNG SỐ BAO QUANH VÒNG TRÒN
Bố cục:
- Bên trái: card 1, card 3, card 5.
- Bên phải: card 2, card 4.
- Giữ nguyên HTML và JavaScript hiện tại.
- Dùng nth-child để không phụ thuộc việc hai card cùng class.
========================================================= */
/* Chữ KEHETO ở chính giữa vòng tròn */
.kht-gioi-thieu1 .kht-spngay > p {
position: relative;
z-index: 4;
margin: 0;
color: #0b3d1d;
font-size: clamp(40px, 3.6vw, 54px);
font-weight: 900;
line-height: 1;
letter-spacing: 0.06em;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
/* Hàng chứa năm card trở thành vùng định vị tuyệt đối */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child {
position: absolute;
inset: 0;
z-index: 6;
display: block;
width: 100%;
margin: 0;
pointer-events: none;
}
/* Hủy kích thước cột mặc định của Flatsome */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col {
position: absolute;
z-index: 7;
width: 184px;
max-width: none;
padding: 0;
pointer-events: auto;
}
/* Card 1: sát đỉnh quỹ đạo lớn, đầu line kết thúc đúng tại tâm đỉnh vòng nét đứt */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(1) {
top: calc(50% - 257px);
left: calc(50% - 230px);
right: auto;
bottom: auto;
width: 206px;
}
/* Card 2: 300+ đối tác - bên phải trên */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2) {
top: 112px;
right: -8px;
left: auto;
bottom: auto;
}
/* Card 3: căn chính giữa theo chiều cao, chấm nối nằm trên viền quỹ đạo */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(3) {
top: 50%;
left: -72px;
right: auto;
bottom: auto;
transform: translateY(-50%);
}
/* Card 4: 2 nhà máy - bên phải dưới */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(4) {
right: -8px;
bottom: 112px;
top: auto;
left: auto;
}
/* Card 5: sát đáy quỹ đạo lớn, đầu line kết thúc đúng tại tâm đáy vòng nét đứt */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(5) {
bottom: calc(50% - 257px);
left: calc(50% - 208px);
top: auto;
right: auto;
}
/* Khung chung của năm card số liệu */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col
> .col-inner
> .text {
position: relative;
z-index: 8;
width: 100%;
min-height: 86px;
padding: 11px 13px 10px;
overflow: visible;
isolation: isolate;
border: 1px solid rgba(35, 125, 49, 0.16);
border-radius: 11px;
background: rgba(255, 255, 255, 0.97);
box-shadow:
0 12px 28px rgba(16, 62, 19, 0.11),
0 3px 8px rgba(40, 203, 139, 0.06);
transition:
transform 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
}
/* Ba card bên trái dùng thanh nhấn cạnh trái */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(1)
> .col-inner
> .text,
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(3)
> .col-inner
> .text,
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(5)
> .col-inner
> .text {
border-left: 3px solid var(--kht-primary);
}
/* Hai card bên phải dùng thanh nhấn cạnh phải */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2)
> .col-inner
> .text,
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(4)
> .col-inner
> .text {
border-right: 3px solid var(--kht-primary);
}
/* Điểm kỹ thuật của ba card bên trái */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(1)
> .col-inner
> .text::before,
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(3)
> .col-inner
> .text::before,
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(5)
> .col-inner
> .text::before {
content: "";
position: absolute;
top: 11px;
left: -5px;
width: 7px;
height: 7px;
border: 2px solid var(--kht-white);
border-radius: 2px;
background: var(--kht-primary);
box-shadow: 0 0 0 3px rgba(40, 203, 139, 0.11);
}
/* Điểm kỹ thuật của hai card bên phải */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2)
> .col-inner
> .text::before,
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(4)
> .col-inner
> .text::before {
content: "";
position: absolute;
top: 11px;
right: -5px;
width: 7px;
height: 7px;
border: 2px solid var(--kht-white);
border-radius: 2px;
background: var(--kht-primary);
box-shadow: 0 0 0 3px rgba(40, 203, 139, 0.11);
}
/* Đường nối từ ba card bên trái vào vòng tròn */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(1)
> .col-inner
> .text::after,
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(3)
> .col-inner
> .text::after,
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(5)
> .col-inner
> .text::after {
content: "";
position: absolute;
top: 50%;
right: -24px;
width: 24px;
height: 9px;
background:
radial-gradient(
circle at 100% 50%,
var(--kht-primary) 0 3px,
var(--kht-white) 3px 5px,
transparent 5px
),
linear-gradient(
90deg,
rgba(40, 203, 139, 0.12) 0%,
rgba(40, 203, 139, 0.62) 100%
) center / 100% 1px no-repeat;
transform: translateY(-50%);
pointer-events: none;
}
/*
* Card giữa bên trái được đặt xa vòng tròn hơn hai card còn lại.
* Đường nối riêng giúp chấm xanh kết thúc đúng tại viền quỹ đạo đang quay.
*/
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(3)
> .col-inner
> .text::after {
right: -20px;
width: 20px;
}
/* Đường nối từ hai card bên phải vào vòng tròn */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2)
> .col-inner
> .text::after,
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(4)
> .col-inner
> .text::after {
content: "";
position: absolute;
top: 50%;
left: -24px;
width: 24px;
height: 9px;
background:
radial-gradient(
circle at 0 50%,
var(--kht-primary) 0 3px,
var(--kht-white) 3px 5px,
transparent 5px
),
linear-gradient(
90deg,
rgba(40, 203, 139, 0.62) 0%,
rgba(40, 203, 139, 0.12) 100%
) center / 100% 1px no-repeat;
transform: translateY(-50%);
pointer-events: none;
}
/* Reset margin của nội dung card */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col
> .col-inner
> .text
p {
margin: 0;
}
/* Căn số và đơn vị cùng một hàng */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
.kht-stat-number-wrap {
width: 100%;
max-width: 100%;
display: inline-flex;
align-items: flex-start;
justify-content: flex-start;
gap: 4px;
margin: 0;
padding: 0;
overflow: visible;
background: transparent;
border: 0;
box-shadow: none;
line-height: 1;
}
/* Con số chính của các card */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
.kht-stat-number {
display: inline-block;
overflow: visible;
color: #0b3d1d;
font-size: clamp(32px, 3vw, 42px);
font-weight: 900;
line-height: 0.94;
letter-spacing: -0.05em;
white-space: nowrap;
opacity: 1;
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
/* Dấu + và m2 */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
.kht-stat-unit {
min-width: 0;
min-height: 0;
display: inline-block;
align-self: flex-start;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--kht-shade-3);
font-size: 13px;
font-weight: 900;
line-height: 1;
white-space: nowrap;
transform: translateY(2px);
}
/* Nhãn mô tả dưới số */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
.kht-stat-label {
width: 100%;
display: block;
margin: 8px 0 0;
padding: 7px 0 0;
border-top: 1px solid rgba(40, 203, 139, 0.18);
background: transparent;
color: #34443d;
font-size: 11.5px;
font-weight: 750;
line-height: 1.3;
letter-spacing: 0;
white-space: nowrap;
opacity: 1;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
/* Card 300+ sử dụng trực tiếp nội dung được nhập trong Flatsome.
JavaScript chỉ tách số, đơn vị và nhãn từ chính nội dung HTML hiện tại.
CSS không chèn hoặc ghi đè nội dung bằng thuộc tính content. */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2)
> .col-inner
> .text
p {
margin: 0;
color: inherit;
}
/* Hover ba card bên trái */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(1)
> .col-inner
> .text:hover,
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(3)
> .col-inner
> .text:hover,
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(5)
> .col-inner
> .text:hover {
border-color: rgba(40, 203, 139, 0.34);
box-shadow:
0 17px 34px rgba(16, 62, 19, 0.15),
0 4px 10px rgba(40, 203, 139, 0.08);
transform: translateX(-4px) translateY(-2px);
}
/* Hover hai card bên phải */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2)
> .col-inner
> .text:hover,
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(4)
> .col-inner
> .text:hover {
border-color: rgba(40, 203, 139, 0.34);
box-shadow:
0 17px 34px rgba(16, 62, 19, 0.15),
0 4px 10px rgba(40, 203, 139, 0.08);
transform: translateX(4px) translateY(-2px);
}
/* =========================================================
CỘT PHẢI - HÌNH ẢNH DÂY CHUYỀN
========================================================= */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:last-child
> .col-inner {
position: relative;
min-height: 630px;
padding-left: 78px;
counter-reset: kht-feature;
}
/* Ảnh chiếm toàn bộ chiều cao cột phải */
.kht-gioi-thieu1 .img {
position: absolute;
inset: 0 0 0 58px;
width: auto;
height: 100%;
margin: 0;
}
/* Khung ảnh cắt góc */
.kht-gioi-thieu1 .img-inner {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
clip-path: polygon(
11% 0,
100% 0,
100% 90%,
89% 100%,
0 100%,
0 11%
);
background: var(--kht-tint-5);
box-shadow: var(--kht-shadow);
}
/* Lớp phủ ảnh sử dụng Color Shade */
.kht-gioi-thieu1 .img-inner::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
/* background:
linear-gradient(
90deg,
rgba(16, 62, 19, 0.42) 0%,
rgba(27, 94, 31, 0.12) 36%,
transparent 62%
),
linear-gradient(
180deg,
transparent 62%,
rgba(16, 62, 19, 0.18) 100%
); */
}
/* Ảnh phủ đầy khung */
.kht-gioi-thieu1 .img img {
display: block;
width: 100%;
height: 100%;
min-height: 630px;
object-fit: cover;
object-position: center;
}
/* =========================================================
BỐN CARD NỘI DUNG TRÊN HÌNH ẢNH
Phong cách mới: Layered Index Card
Thay đổi giao diện:
- Bỏ dải xanh lớn chạy dọc toàn bộ card.
- Số thứ tự trở thành nhãn nổi độc lập ở cạnh trái.
- Card dùng nền trắng đặc, góc bo bất đối xứng và lớp đổ bóng kép.
- Nội dung được tăng tương phản nhưng vẫn giữ cảm giác gọn nhẹ.
- Không thay đổi HTML và không sử dụng !important.
========================================================= */
/* Khung chung cho bốn card nội dung */
.kht-gioi-thieu1 .img1,
.kht-gioi-thieu1 .img2,
.kht-gioi-thieu1 .img3,
.kht-gioi-thieu1 .img4 {
position: absolute;
z-index: 6;
left: 20px;
width: 318px;
min-height: 86px;
display: flex;
align-items: center;
padding: 17px 34px 17px 62px;
counter-increment: kht-feature;
isolation: isolate;
overflow: visible;
border: 1px solid rgba(35, 125, 49, 0.18);
border-radius: 16px 5px 16px 5px;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.99) 0%,
rgba(255, 255, 255, 0.99) 72%,
rgba(236, 248, 240, 0.98) 100%
);
box-shadow:
10px 10px 0 rgba(40, 203, 139, 0.07),
0 18px 38px rgba(16, 62, 19, 0.16);
backdrop-filter: blur(10px);
transition:
transform 0.35s ease,
border-color 0.35s ease,
box-shadow 0.35s ease,
background 0.35s ease;
}
/* Số thứ tự 01 - 04 trở thành nhãn nổi riêng */
.kht-gioi-thieu1 .img1::before,
.kht-gioi-thieu1 .img2::before,
.kht-gioi-thieu1 .img3::before,
.kht-gioi-thieu1 .img4::before {
content: counter(kht-feature, decimal-leading-zero);
position: absolute;
z-index: 3;
top: 50%;
left: -21px;
width: 48px;
height: 48px;
display: grid;
place-items: center;
border: 3px solid rgba(255, 255, 255, 0.96);
border-radius: 14px 5px 14px 5px;
background:
linear-gradient(
145deg,
var(--kht-primary) 0%,
var(--kht-shade-2) 55%,
var(--kht-shade-4) 100%
);
box-shadow:
0 10px 22px rgba(16, 62, 19, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.28);
color: var(--kht-white);
font-size: 13px;
font-weight: 900;
line-height: 1;
letter-spacing: 0.035em;
transform: translateY(-50%);
transition:
transform 0.35s ease,
box-shadow 0.35s ease;
}
/* Thanh nhấn mảnh tạo chiều sâu ở đáy card */
.kht-gioi-thieu1 .img1::after,
.kht-gioi-thieu1 .img2::after,
.kht-gioi-thieu1 .img3::after,
.kht-gioi-thieu1 .img4::after {
content: "";
position: absolute;
z-index: 2;
right: 30px;
bottom: -1px;
left: 62px;
height: 3px;
border-radius: 3px 3px 0 0;
background:
linear-gradient(
90deg,
var(--kht-primary) 0%,
rgba(40, 203, 139, 0.4) 45%,
transparent 100%
);
}
/* Nội dung card */
.kht-gioi-thieu1 .img1 p,
.kht-gioi-thieu1 .img2 p,
.kht-gioi-thieu1 .img3 p,
.kht-gioi-thieu1 .img4 p {
position: relative;
z-index: 3;
width: 100%;
margin: 0;
color: #173b2b;
font-size: 13.3px;
font-weight: 760;
line-height: 1.46;
letter-spacing: -0.006em;
opacity: 1;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.94);
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
}
/* Vị trí từng card trên ảnh */
.kht-gioi-thieu1 .img1 {
top: 58px;
}
.kht-gioi-thieu1 .img2 {
top: 188px;
}
.kht-gioi-thieu1 .img3 {
top: 318px;
}
.kht-gioi-thieu1 .img4 {
top: 448px;
}
/* Hover làm card nổi nhẹ và kéo nhãn số ra phía trước */
.kht-gioi-thieu1 .img1:hover,
.kht-gioi-thieu1 .img2:hover,
.kht-gioi-thieu1 .img3:hover,
.kht-gioi-thieu1 .img4:hover {
border-color: rgba(40, 203, 139, 0.42);
background:
linear-gradient(
135deg,
#ffffff 0%,
#ffffff 66%,
#e8f5e9 100%
);
box-shadow:
13px 13px 0 rgba(40, 203, 139, 0.09),
0 24px 48px rgba(16, 62, 19, 0.22);
transform: translateX(9px) translateY(-2px);
}
/* Nhãn số chuyển động độc lập khi hover */
.kht-gioi-thieu1 .img1:hover::before,
.kht-gioi-thieu1 .img2:hover::before,
.kht-gioi-thieu1 .img3:hover::before,
.kht-gioi-thieu1 .img4:hover::before {
box-shadow:
0 14px 28px rgba(16, 62, 19, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.32);
transform: translateY(-50%) translateX(-4px);
}
/* =========================================================
TABLET NGANG
========================================================= */
@media (max-width: 1180px) {
/* Điều chỉnh tỷ lệ hai cột chính */
.kht-gioi-thieu1
> .section-content
> .row.row-small {
grid-template-columns:
minmax(450px, 0.95fr)
minmax(480px, 1.05fr);
}
/* Giảm chiều cao cột số liệu */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner {
min-height: 590px;
}
/* Thu nhỏ vòng tròn trung tâm */
.kht-gioi-thieu1 .kht-spngay {
width: 320px;
height: 320px;
}
/* Thu chữ KEHETO theo vòng tròn */
.kht-gioi-thieu1 .kht-spngay > p {
font-size: clamp(36px, 3.8vw, 46px);
}
/* Thu chiều rộng năm card */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col {
width: 166px;
}
/* Ba card bên trái */
/* Card 1 bám đúng đỉnh quỹ đạo lớn trên tablet ngang */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(1) {
top: calc(50% - 235px);
left: calc(50% - 208px);
width: 184px;
}
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(3) {
top: 50%;
left: -60px;
transform: translateY(-50%);
}
/* Card 5 bám đúng đáy quỹ đạo lớn trên tablet ngang */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(5) {
bottom: calc(50% - 235px);
left: calc(50% - 190px);
}
/* Căn chấm nối card giữa đúng vào viền quỹ đạo trên tablet ngang */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(3)
> .col-inner
> .text::after {
right: -18px;
width: 18px;
}
/* Hai card bên phải */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2) {
top: 96px;
right: -16px;
}
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(4) {
right: -16px;
bottom: 96px;
}
/* Thu gọn card */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col
> .col-inner
> .text {
min-height: 82px;
padding: 10px 11px 9px;
}
/* Thu nhỏ số liệu */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
.kht-stat-number {
font-size: clamp(29px, 2.9vw, 36px);
}
/* Thu nhỏ đơn vị */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
.kht-stat-unit {
font-size: 12px;
}
/* Thu nhỏ nhãn */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
.kht-stat-label {
margin-top: 7px;
padding-top: 6px;
font-size: 10.5px;
}
/* Đồng bộ card 300+ dạng text thuần */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2)
> .col-inner
> .text
p::before {
font-size: 36px;
}
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2)
> .col-inner
> .text
p::after {
margin-top: 7px;
padding-top: 6px;
font-size: 10.5px;
}
/* Giảm chiều cao cột ảnh */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:last-child
> .col-inner {
min-height: 590px;
}
.kht-gioi-thieu1 .img img {
min-height: 590px;
}
/* Thu gọn Layered Index Card trên ảnh */
.kht-gioi-thieu1 .img1,
.kht-gioi-thieu1 .img2,
.kht-gioi-thieu1 .img3,
.kht-gioi-thieu1 .img4 {
left: 17px;
width: 282px;
min-height: 80px;
padding: 14px 28px 14px 56px;
border-radius: 14px 5px 14px 5px;
box-shadow:
8px 8px 0 rgba(40, 203, 139, 0.065),
0 15px 32px rgba(16, 62, 19, 0.15);
}
/* Thu nhỏ nhãn số trên ảnh */
.kht-gioi-thieu1 .img1::before,
.kht-gioi-thieu1 .img2::before,
.kht-gioi-thieu1 .img3::before,
.kht-gioi-thieu1 .img4::before {
left: -18px;
width: 43px;
height: 43px;
border-radius: 12px 4px 12px 4px;
font-size: 12px;
}
/* Thu ngắn thanh nhấn đáy card ảnh */
.kht-gioi-thieu1 .img1::after,
.kht-gioi-thieu1 .img2::after,
.kht-gioi-thieu1 .img3::after,
.kht-gioi-thieu1 .img4::after {
right: 25px;
left: 56px;
}
/* Giữ nội dung card ảnh rõ nét */
.kht-gioi-thieu1 .img1 p,
.kht-gioi-thieu1 .img2 p,
.kht-gioi-thieu1 .img3 p,
.kht-gioi-thieu1 .img4 p {
font-size: 12.4px;
line-height: 1.42;
}
/* Vị trí card trên ảnh */
.kht-gioi-thieu1 .img1 {
top: 48px;
}
.kht-gioi-thieu1 .img2 {
top: 166px;
}
.kht-gioi-thieu1 .img3 {
top: 284px;
}
.kht-gioi-thieu1 .img4 {
top: 402px;
}
}
/* =========================================================
TABLET DỌC
========================================================= */
@media (max-width: 849px) {
/* Hàng số liệu và ảnh chuyển thành một cột */
.kht-gioi-thieu1
> .section-content
> .row.row-small {
grid-template-columns: 1fr;
width: calc(100% - 30px);
/* gap: 42px; */
}
/* Giữ đủ không gian cho vòng tròn */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner {
min-height: 620px;
}
/* Kích thước vòng tròn trên tablet dọc */
.kht-gioi-thieu1 .kht-spngay {
width: 350px;
height: 350px;
}
/* Chữ KEHETO trên tablet dọc */
.kht-gioi-thieu1 .kht-spngay > p {
font-size: 46px;
}
/* Đưa ba card trái và hai card phải gần vòng tròn */
/* Card 1 bám đúng đỉnh quỹ đạo lớn trên tablet dọc */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(1) {
top: calc(50% - 250px);
left: calc(50% - 228px);
width: 204px;
}
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2) {
top: 108px;
right: 34px;
}
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(3) {
top: 270px;
left: 34px;
}
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(4) {
right: 34px;
bottom: 108px;
}
/* Card 5 bám đúng đáy quỹ đạo lớn trên tablet dọc */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(5) {
bottom: calc(50% - 250px);
left: calc(50% - 190px);
}
/* Chiều cao khu vực ảnh */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:last-child
> .col-inner {
min-height: 610px;
}
.kht-gioi-thieu1 .img img {
min-height: 610px;
}
}
/* =======================================================
MOBILE - CỤM SỐ LIỆU NĂM CARD
Bố cục giữ nguyên nguyên tắc:
- Bên trái: card 1, card 3, card 5.
- Bên phải: card 2, card 4.
======================================================= */
@media (max-width: 549px) {
/* Vùng chứa toàn bộ cụm số liệu, kéo lên gần hàng tiêu đề */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner {
position: relative;
min-height: 430px;
margin-top: -18px;
isolation: isolate;
}
/* Hàng chứa vòng tròn trung tâm */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:first-child {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0;
pointer-events: none;
}
/* Reset cột chứa vòng tròn */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:first-child
> .col {
width: 100%;
max-width: none;
padding: 0;
}
/* Căn giữa vòng tròn */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:first-child
> .col
> .col-inner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
/* Vòng tròn trung tâm mobile */
.kht-gioi-thieu1 .kht-spngay {
width: clamp(226px, 64vw, 248px);
height: clamp(226px, 64vw, 248px);
padding: 21px;
box-shadow:
0 18px 42px rgba(16, 62, 19, 0.1),
inset 0 0 0 7px rgba(40, 203, 139, 0.035);
pointer-events: auto;
}
/* Chữ KEHETO ở giữa mobile */
.kht-gioi-thieu1 .kht-spngay > p {
font-size: clamp(25px, 7.8vw, 31px);
letter-spacing: 0.055em;
}
/* Vòng quỹ đạo ngoài */
.kht-gioi-thieu1 .kht1-orbit-ring-a {
inset: -22px;
}
/* Vòng quỹ đạo trong */
.kht-gioi-thieu1 .kht1-orbit-ring-b {
inset: 11px;
}
/* Hàng chứa năm card */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child {
position: absolute;
inset: 0;
z-index: 6;
display: block;
width: 100%;
margin: 0;
pointer-events: none;
}
/* Chiều ngang từng card co vừa theo nội dung thực tế */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col {
position: absolute;
z-index: 7;
width: fit-content;
max-width: 132px;
padding: 0;
pointer-events: auto;
}
/* Card 1 - dịch sang phải và xuống để bám sát quỹ đạo lớn */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(1) {
top: 58px;
left: 24px;
max-width: 124px;
right: auto;
bottom: auto;
}
/* Card 2 - phải trên */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2) {
top: 86px;
right: 0;
left: auto;
bottom: auto;
}
/* Card 3 - trái giữa */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(3) {
top: 186px;
left: 0;
right: auto;
bottom: auto;
}
/* Card 4 - phải dưới */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(4) {
right: 0;
bottom: 82px;
top: auto;
left: auto;
}
/* Card 5 - dịch sang phải và lên để bám sát quỹ đạo lớn */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(5) {
bottom: 56px;
left: 24px;
top: auto;
right: auto;
}
/* Giao diện chung của năm card, chiều ngang co vừa nội dung */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col
> .col-inner
> .text {
width: fit-content;
max-width: 132px;
min-width: 84px;
min-height: 58px;
padding: 6px 8px;
border: 1px solid rgba(35, 125, 49, 0.14);
border-radius: 10px;
background: rgba(255, 255, 255, 0.97);
box-shadow:
0 8px 18px rgba(16, 62, 19, 0.08),
0 2px 5px rgba(40, 203, 139, 0.04);
}
/* Card trái */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(1)
> .col-inner
> .text,
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(3)
> .col-inner
> .text,
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(5)
> .col-inner
> .text {
border-left: 3px solid var(--kht-primary);
border-right-width: 1px;
}
/* Card phải */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2)
> .col-inner
> .text,
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(4)
> .col-inner
> .text {
border-left-width: 1px;
border-right: 3px solid var(--kht-primary);
}
/* Thu điểm kỹ thuật */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(1)
> .col-inner
> .text::before,
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(3)
> .col-inner
> .text::before,
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(5)
> .col-inner
> .text::before {
top: 7px;
left: -5px;
}
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2)
> .col-inner
> .text::before,
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(4)
> .col-inner
> .text::before {
top: 7px;
right: -5px;
}
/* Ẩn đường nối dài trên mobile */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col
> .col-inner
> .text::after {
display: none;
}
/* Cụm số trong card */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
.kht-stat-number-wrap {
gap: 2px;
min-width: 0;
max-width: 100%;
}
/* Số card mobile */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
.kht-stat-number {
font-size: clamp(18px, 5.1vw, 22px);
line-height: 0.96;
}
/* Đơn vị card mobile */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
.kht-stat-unit {
font-size: 8px;
transform: translateY(1px);
}
/* Nhãn card mobile giữ trên một dòng để card co đúng theo text */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
.kht-stat-label {
margin-top: 4px;
padding-top: 4px;
font-size: 8px;
line-height: 1.2;
white-space: nowrap;
overflow-wrap: normal;
word-break: normal;
}
/* Card 300+ giữ đủ chiều ngang để nhãn không bị ép hoặc tràn */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2),
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2)
> .col-inner
> .text {
min-width: 108px;
}
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2)
> .col-inner
> .text
p::before {
font-size: 22px;
}
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2)
> .col-inner
> .text
p::after {
margin-top: 4px;
padding-top: 4px;
font-size: 8.5px;
}
/* Card 300+ dạng text thuần trên mobile */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2)
> .col-inner
> .text
p {
font-size: 8px;
line-height: 1.2;
word-spacing: normal;
background: none;
}
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2)
> .col-inner
> .text
p::first-line {
font-size: 22px;
}
/* Tắt transform hover trên mobile */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col
> .col-inner
> .text:hover {
transform: none;
}
}
/* =======================================================
MOBILE NHỎ TỪ 379PX TRỞ XUỐNG
======================================================= */
@media (max-width: 379px) {
/* Vùng chứa cụm số liệu */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner {
min-height: 430px;
}
/* Vòng tròn trung tâm */
.kht-gioi-thieu1 .kht-spngay {
width: 206px;
height: 206px;
padding: 18px;
}
/* Chữ KEHETO */
.kht-gioi-thieu1 .kht-spngay > p {
font-size: 26px;
letter-spacing: 0.05em;
}
/* Vòng quỹ đạo */
.kht-gioi-thieu1 .kht1-orbit-ring-a {
inset: -18px;
}
.kht-gioi-thieu1 .kht1-orbit-ring-b {
inset: 9px;
}
/* Card tiếp tục co theo nội dung trên mobile nhỏ */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col {
width: fit-content;
max-width: 116px;
}
/* Ba card trái */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(1) {
top: 55px;
left: 18px;
}
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(3) {
top: 168px;
left: 0;
}
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(5) {
bottom: 50px;
left: 18px;
}
/* Hai card phải */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2) {
top: 76px;
right: 0;
}
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(4) {
right: 0;
bottom: 74px;
}
/* Thu card */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col
> .col-inner
> .text {
min-height: 55px;
padding: 6px 7px;
}
/* Thu số */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
.kht-stat-number {
font-size: 17px;
}
/* Thu nhãn */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
.kht-stat-label {
font-size: 7.5px;
}
/* Card 300+ dạng text thuần */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2)
> .col-inner
> .text
p {
font-size: 7.5px;
word-spacing: normal;
background: none;
}
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(2)
> .col-inner
> .text
p::first-line {
font-size: 20px;
}
}
/* =========================================================
MOBILE - CARD 1 CỘT NẰM TRÊN ẢNH, ẢNH HIỂN THỊ ĐẦY ĐỦ
Chức năng:
1. Chỉ tác động khu vực ảnh dây chuyền trên mobile.
2. Mỗi card text nằm trên một hàng riêng.
3. Bốn card nằm phía trên ảnh, không đè lên ảnh.
4. Ảnh hiển thị đầy đủ theo đúng tỷ lệ gốc.
5. Không sử dụng object-fit: cover trên mobile.
6. Xóa kiểu cắt góc ảnh chỉ trên mobile.
7. Không ảnh hưởng desktop, tablet và phần khác.
========================================================= */
@media screen and (max-width: 549px) {
/* =======================================================
KHUNG CHỨA BỐN CARD VÀ ẢNH
======================================================= */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:last-child
> .col-inner {
position: relative;
width: 100%;
min-height: 0;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
padding-left: 0;
overflow: visible;
counter-reset: kht-feature;
}
/* =======================================================
BỐN CARD TEXT
Mỗi card chiếm một hàng riêng.
======================================================= */
.kht-gioi-thieu1 .img1,
.kht-gioi-thieu1 .img2,
.kht-gioi-thieu1 .img3,
.kht-gioi-thieu1 .img4 {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
z-index: 6;
width: 100%;
max-width: 100%;
min-height: 66px;
flex: 0 0 auto;
display: flex;
align-items: center;
margin: 0;
padding:
11px
15px
11px
53px;
overflow: hidden;
border: 1px solid rgba(35, 125, 49, 0.16);
border-radius: 12px 4px 12px 4px;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.99) 0%,
rgba(255, 255, 255, 0.99) 72%,
rgba(236, 248, 240, 0.98) 100%
);
box-shadow:
5px 5px 0 rgba(40, 203, 139, 0.05),
0 9px 20px rgba(16, 62, 19, 0.1);
transform: none;
}
/* =======================================================
THỨ TỰ HIỂN THỊ
Bốn card nằm trước, ảnh nằm sau.
======================================================= */
.kht-gioi-thieu1 .img1 {
order: 1;
}
.kht-gioi-thieu1 .img2 {
order: 2;
}
.kht-gioi-thieu1 .img3 {
order: 3;
}
.kht-gioi-thieu1 .img4 {
order: 4;
}
/* =======================================================
HUY HIỆU SỐ 01 - 04
======================================================= */
.kht-gioi-thieu1 .img1::before,
.kht-gioi-thieu1 .img2::before,
.kht-gioi-thieu1 .img3::before,
.kht-gioi-thieu1 .img4::before {
top: 50%;
left: 10px;
width: 31px;
height: 31px;
display: grid;
place-items: center;
border-width: 2px;
border-radius: 9px 3px 9px 3px;
font-size: 9px;
line-height: 1;
box-shadow:
0 7px 15px rgba(16, 62, 19, 0.21),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
transform: translateY(-50%);
}
/* =======================================================
THANH XANH PHÍA DƯỚI CARD
======================================================= */
.kht-gioi-thieu1 .img1::after,
.kht-gioi-thieu1 .img2::after,
.kht-gioi-thieu1 .img3::after,
.kht-gioi-thieu1 .img4::after {
right: 15px;
bottom: 0;
left: 53px;
height: 2px;
}
/* =======================================================
NỘI DUNG CHỮ TRONG CARD
======================================================= */
.kht-gioi-thieu1 .img1 p,
.kht-gioi-thieu1 .img2 p,
.kht-gioi-thieu1 .img3 p,
.kht-gioi-thieu1 .img4 p {
width: 100%;
margin: 0;
color: #173b2b;
font-size: 11px;
font-weight: 720;
line-height: 1.4;
letter-spacing: -0.006em;
text-align: left;
overflow-wrap: break-word;
word-break: normal;
}
/* =======================================================
KHUNG ẢNH DÂY CHUYỀN
Không sử dụng chiều cao cố định.
Chiều cao được lấy theo đúng tỷ lệ ảnh gốc.
======================================================= */
.kht-gioi-thieu1 .img {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
z-index: 1;
order: 5;
width: 100%;
max-width: 100%;
height: auto;
flex: 0 0 auto;
margin:
6px
auto
0;
transform: none;
}
/* =======================================================
KHUNG BỌC ẢNH
Xóa chiều cao 610px và clip-path của desktop.
Đây là phần ngăn ảnh tiếp tục bị cắt góc.
======================================================= */
.kht-gioi-thieu1 .img-inner {
position: relative;
width: 100%;
height: auto;
margin: 0;
overflow: hidden;
clip-path: none;
border-radius: 10px;
background: var(--kht-tint-5);
box-shadow:
0 16px 34px rgba(16, 62, 19, 0.13);
}
/* =======================================================
ẢNH BÊN TRONG
Hiển thị toàn bộ ảnh theo tỷ lệ tự nhiên.
Không phóng ảnh để lấp đầy chiều cao cố định.
======================================================= */
.kht-gioi-thieu1 .img img {
position: relative;
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
display: block;
margin: 0 auto;
object-fit: contain;
object-position: center center;
image-rendering: auto;
transform: none;
}
/* =======================================================
LỚP PHỦ TRÊN ẢNH
Giữ lớp phủ nhưng không làm thay đổi kích thước ảnh.
======================================================= */
.kht-gioi-thieu1 .img-inner::after {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* =======================================================
TẮT HOVER DỊCH CHUYỂN TRÊN MOBILE
======================================================= */
.kht-gioi-thieu1 .img1:hover,
.kht-gioi-thieu1 .img2:hover,
.kht-gioi-thieu1 .img3:hover,
.kht-gioi-thieu1 .img4:hover {
border-color: rgba(35, 125, 49, 0.16);
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.99) 0%,
rgba(255, 255, 255, 0.99) 72%,
rgba(236, 248, 240, 0.98) 100%
);
box-shadow:
5px 5px 0 rgba(40, 203, 139, 0.05),
0 9px 20px rgba(16, 62, 19, 0.1);
transform: none;
}
/* Giữ huy hiệu số đứng yên khi chạm */
.kht-gioi-thieu1 .img1:hover::before,
.kht-gioi-thieu1 .img2:hover::before,
.kht-gioi-thieu1 .img3:hover::before,
.kht-gioi-thieu1 .img4:hover::before {
box-shadow:
0 7px 15px rgba(16, 62, 19, 0.21),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
transform: translateY(-50%);
}
}
/* =========================================================
MOBILE NHỎ TỪ 379PX TRỞ XUỐNG
Chức năng:
1. Mỗi card vẫn chiếm một hàng.
2. Ảnh vẫn hiển thị đầy đủ.
3. Không thiết lập lại chiều cao cố định.
========================================================= */
@media screen and (max-width: 379px) {
/* Thu khoảng cách giữa các card */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:last-child
> .col-inner {
gap: 8px;
}
/* Thu nhẹ card */
.kht-gioi-thieu1 .img1,
.kht-gioi-thieu1 .img2,
.kht-gioi-thieu1 .img3,
.kht-gioi-thieu1 .img4 {
width: 100%;
max-width: 100%;
min-height: 62px;
padding:
10px
12px
10px
48px;
border-radius: 10px 4px 10px 4px;
}
/* Thu huy hiệu số */
.kht-gioi-thieu1 .img1::before,
.kht-gioi-thieu1 .img2::before,
.kht-gioi-thieu1 .img3::before,
.kht-gioi-thieu1 .img4::before {
left: 9px;
width: 28px;
height: 28px;
font-size: 8.5px;
}
/* Đồng bộ thanh xanh */
.kht-gioi-thieu1 .img1::after,
.kht-gioi-thieu1 .img2::after,
.kht-gioi-thieu1 .img3::after,
.kht-gioi-thieu1 .img4::after {
right: 12px;
left: 48px;
}
/* Thu nhẹ chữ */
.kht-gioi-thieu1 .img1 p,
.kht-gioi-thieu1 .img2 p,
.kht-gioi-thieu1 .img3 p,
.kht-gioi-thieu1 .img4 p {
font-size: 10px;
line-height: 1.36;
}
/* Ảnh tiếp tục sử dụng chiều cao tự nhiên */
.kht-gioi-thieu1 .img {
width: 100%;
max-width: 100%;
height: auto;
margin-top: 4px;
}
.kht-gioi-thieu1 .img-inner {
width: 100%;
height: auto;
clip-path: none;
border-radius: 8px;
}
.kht-gioi-thieu1 .img img {
width: 100%;
max-width: 100%;
height: auto;
min-height: 0;
object-fit: contain;
object-position: center center;
}
}
@media (prefers-reduced-motion: reduce) {
.kht-gioi-thieu1 *,
.kht-gioi-thieu1 *::before,
.kht-gioi-thieu1 *::after {
scroll-behavior: auto;
transition-duration: 0.01ms;
animation-duration: 0.01ms;
animation-iteration-count: 1;
}
}
/* =========================================================
ĐƯỜNG NỐI THẲNG CHO CARD 1.000.000 VÀ 40.000m2
Chức năng:
- Card 1.000.000 bám sát đỉnh vòng quỹ đạo nét đứt lớn.
- Card 40.000m2 bám sát đáy vòng quỹ đạo nét đứt lớn.
- Đường nối chạy ngang thẳng, không gấp khúc.
- Chấm xanh kết thúc đúng trên đường nét đứt của quỹ đạo lớn.
- Không chèn hoặc thay đổi nội dung card.
========================================================= */
@media (min-width: 550px) {
/* Card 1.000.000 - đường nối ngang thẳng */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(1)
> .col-inner
> .text::after {
top: 50%;
right: -24px;
bottom: auto;
width: 24px;
height: 9px;
background:
radial-gradient(
circle at 100% 50%,
var(--kht-primary) 0 3px,
var(--kht-white) 3px 5px,
transparent 5px
),
linear-gradient(
90deg,
rgba(40, 203, 139, 0.12) 0%,
rgba(40, 203, 139, 0.62) 100%
) center / 100% 1px no-repeat;
transform: translateY(-50%);
}
/* Card 40.000m2 - đường nối ngang thẳng */
.kht-gioi-thieu1
> .section-content
> .row.row-small
> .col:first-child
> .col-inner
> .row:last-child
> .col:nth-child(5)
> .col-inner
> .text::after {
top: 50%;
right: -24px;
bottom: auto;
width: 24px;
height: 9px;
background:
radial-gradient(
circle at 100% 50%,
var(--kht-primary) 0 3px,
var(--kht-white) 3px 5px,
transparent 5px
),
linear-gradient(
90deg,
rgba(40, 203, 139, 0.12) 0%,
rgba(40, 203, 139, 0.62) 100%
) center / 100% 1px no-repeat;
transform: translateY(-50%);
}
}
/* =========================================================
SECTION ĐỐI TÁC - KEHETO
Logo chạy liên tục từ phải sang trái
========================================================= */
.kht-doi-tac {
/* Màu sắc sử dụng riêng cho section đối tác */
--kht-partner-primary: #42a54d;
--kht-partner-primary-dark: #237d31;
--kht-partner-text: #263238;
--kht-partner-border: rgba(38, 50, 56, 0.1);
--kht-partner-background: #ffffff;
position: relative;
overflow: hidden;
isolation: isolate;
background: linear-gradient(
180deg,
#f8fbf8 0%,
#ffffff 50%,
#f7faf7 100%
);
}
/* =========================================================
XÓA CÁC HÌNH TRÒN TRANG TRÍ Ở GÓC SECTION
========================================================= */
.kht-doi-tac .section-bg {
z-index: 0;
pointer-events: none;
}
.kht-doi-tac .section-bg::before,
.kht-doi-tac .section-bg::after {
content: none;
display: none;
}
/* =========================================================
NỘI DUNG CHÍNH CỦA SECTION
========================================================= */
.kht-doi-tac > .section-content {
position: relative;
z-index: 2;
padding-top: clamp(50px, 6vw, 50px);
padding-bottom: clamp(58px, 6vw, 88px);
}
/* =========================================================
TIÊU ĐỀ SECTION - FORMAT CHUẨN KEHETO
Chức năng:
- Đồng nhất với tiêu đề .kht-truoc-sau-text.
- Thanh xanh gradient nằm bên trái.
- Tiêu đề căn trái, không còn hai đường ngang hai bên.
- Không thay đổi marquee, logo hoặc các chức năng khác.
========================================================= */
.kht-doi-tac .kht-doitac-text {
position: relative;
width: calc(100% - 30px);
max-width: 1320px;
margin: 0 auto clamp(30px, 4vw, 46px);
padding: 0 0 0 24px;
text-align: left;
}
/* Thanh màu thương hiệu bên trái tiêu đề */
.kht-doi-tac .kht-doitac-text::before {
content: "";
position: absolute;
top: 4px;
bottom: 4px;
left: 0;
width: 5px;
border-radius: 20px;
background: linear-gradient(
180deg,
#43a046,
#1b5e1f
);
}
.kht-doi-tac .kht-doitac-text > .col {
width: 100%;
max-width: 100%;
padding: 0;
}
.kht-doi-tac .kht-doitac-text .col-inner {
text-align: left;
}
.kht-doi-tac .kht-doitac-text p {
margin: 0;
color: #263238;
font-size: clamp(28px, 3vw, 40px);
font-weight: 700;
line-height: 1.16;
letter-spacing: -0.035em;
text-wrap: balance;
text-transform: uppercase;
}
/* Loại bỏ đường trang trí cũ hai bên tiêu đề */
.kht-doi-tac .kht-doitac-text p::before,
.kht-doi-tac .kht-doitac-text p::after {
content: none;
display: none;
}
/* =========================================================
KHUNG HIỂN THỊ LOGO
Phần logo nằm ngoài khung sẽ được ẩn đi
========================================================= */
.kht-doi-tac .kht-doitac-img {
position: relative;
display: block;
width: calc(100% - 30px);
max-width: 1320px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
/* Xử lý margin mặc định của class row trong Flatsome */
.kht-doi-tac .kht-doitac-img.row {
margin-left: auto;
margin-right: auto;
}
/* =========================================================
TRACK CHỨA TOÀN BỘ LOGO
Desktop hiển thị đúng 6 logo trong một khung nhìn
========================================================= */
.kht-doi-tac .kht-doitac-track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 90px) / 6);
gap: 18px;
align-items: stretch;
width: 100%;
min-width: 100%;
transform: translate3d(0, 0, 0);
will-change: transform;
}
/* Kích hoạt chuyển động sau khi JavaScript đo chiều dài track */
.kht-doi-tac .kht-doitac-track.kht-is-running {
animation-name: kht-partner-marquee;
animation-duration: var(--kht-marquee-duration, 35s);
animation-timing-function: linear;
animation-iteration-count: infinite;
}
/* Dừng chuyển động khi section không nằm trong màn hình */
.kht-doi-tac .kht-doitac-track.kht-is-paused {
animation-play-state: paused;
}
/* Dừng chuyển động khi người dùng đưa chuột vào vùng logo */
.kht-doi-tac .kht-doitac-img:hover .kht-doitac-track,
.kht-doi-tac .kht-doitac-img:focus-within .kht-doitac-track {
animation-play-state: paused;
}
/* Chuyển động toàn bộ logo từ phải sang trái */
@keyframes kht-partner-marquee {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(
var(--kht-marquee-translate, -1200px),
0,
0
);
}
}
/* =========================================================
RESET CỘT MẶC ĐỊNH CỦA FLATSOME
Giữ tất cả logo trên một hàng duy nhất
========================================================= */
.kht-doi-tac .kht-doitac-track > .col {
float: none;
width: auto;
max-width: none;
min-width: 0;
flex: none;
flex-basis: auto;
margin: 0;
padding: 0;
}
/* =========================================================
CARD CHỨA LOGO
========================================================= */
.kht-doi-tac .kht-doitac-track > .col > .col-inner {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 112px;
padding: 18px 20px;
overflow: hidden;
background: rgba(255, 255, 255, 0.96);
border: 1px solid var(--kht-partner-border);
border-radius: 17px;
box-shadow:
0 6px 18px rgba(38, 50, 56, 0.04),
0 16px 38px rgba(38, 50, 56, 0.025);
transition:
transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 0.35s ease,
box-shadow 0.35s ease,
background-color 0.35s ease;
}
/* Thanh màu thương hiệu xuất hiện phía trên card khi hover */
.kht-doi-tac .kht-doitac-track > .col > .col-inner::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(
90deg,
var(--kht-partner-primary-dark),
var(--kht-partner-primary)
);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.35s ease;
}
/* Xóa hình tròn xanh ở góc dưới card */
.kht-doi-tac .kht-doitac-track > .col > .col-inner::after {
content: none;
display: none;
}
/* =========================================================
KHUNG CHỨA ẢNH LOGO
========================================================= */
.kht-doi-tac .kht-doitac-track .img {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
margin: 0;
}
.kht-doi-tac .kht-doitac-track .img-inner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: visible;
background: transparent;
}
/* =========================================================
LOGO DESKTOP
Hiển thị đúng màu, không làm mờ
Chiều cao giảm còn 58px
========================================================= */
.kht-doi-tac .kht-doitac-track img {
display: block;
width: 100%;
height: 58px;
max-width: 100%;
margin: 0 auto;
object-fit: contain;
object-position: center;
filter: none;
opacity: 1;
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* =========================================================
HIỆU ỨNG HOVER TRÊN DESKTOP
========================================================= */
@media (hover: hover) and (pointer: fine) {
/* Nâng nhẹ card khi người dùng đưa chuột vào */
.kht-doi-tac .kht-doitac-track > .col > .col-inner:hover {
transform: translateY(-5px);
background: var(--kht-partner-background);
border-color: rgba(66, 165, 77, 0.32);
box-shadow:
0 12px 26px rgba(38, 50, 56, 0.075),
0 22px 44px rgba(66, 165, 77, 0.08);
}
/* Hiển thị thanh màu phía trên card */
.kht-doi-tac .kht-doitac-track > .col > .col-inner:hover::before {
transform: scaleX(1);
}
/* Phóng nhẹ logo nhưng vẫn giữ đúng màu và độ rõ */
.kht-doi-tac .kht-doitac-track > .col > .col-inner:hover img {
transform: scale(1.055);
filter: none;
opacity: 1;
}
}
/* =========================================================
TRẠNG THÁI FOCUS
Hỗ trợ người dùng sử dụng bàn phím
========================================================= */
.kht-doi-tac .kht-doitac-track > .col > .col-inner:focus-within {
border-color: var(--kht-partner-primary);
box-shadow:
0 0 0 3px rgba(66, 165, 77, 0.12),
0 14px 32px rgba(38, 50, 56, 0.07);
}
/* =========================================================
TABLET
Hiển thị 4 logo trong một khung nhìn
========================================================= */
@media screen and (max-width: 849px) {
/* Giảm khoảng cách trên và dưới section */
.kht-doi-tac > .section-content {
padding-top: 54px;
padding-bottom: 62px;
}
/* Giảm khoảng cách dưới tiêu đề */
.kht-doi-tac .kht-doitac-text {
margin-bottom: 32px;
}
/* Một khung nhìn hiển thị 4 logo */
.kht-doi-tac .kht-doitac-track {
grid-auto-columns: calc((100% - 42px) / 4);
gap: 14px;
}
/* Giảm chiều cao card trên tablet */
.kht-doi-tac .kht-doitac-track > .col > .col-inner {
min-height: 102px;
padding: 16px 18px;
border-radius: 15px;
}
/* Giảm chiều cao logo tablet còn 52px */
.kht-doi-tac .kht-doitac-track img {
height: 52px;
}
}
/* =========================================================
MOBILE
Hiển thị 2 logo trong một khung nhìn
========================================================= */
@media screen and (max-width: 549px) {
/* Thu gọn khoảng cách trên và dưới section */
.kht-doi-tac > .section-content {
padding-top: 44px;
padding-bottom: 50px;
}
/* Đồng bộ tiêu đề chuẩn trên mobile */
.kht-doi-tac .kht-doitac-text {
width: calc(100% - 28px);
margin-bottom: 25px;
padding-left: 17px;
}
/* Thu thanh xanh theo kích thước mobile */
.kht-doi-tac .kht-doitac-text::before {
width: 4px;
}
/* Kích thước tiêu đề mobile theo format chuẩn */
.kht-doi-tac .kht-doitac-text p {
font-size: clamp(17px, 2.8vw, 24px);
line-height: 1.2;
letter-spacing: -0.025em;
}
/* Tăng không gian sử dụng theo chiều ngang trên mobile */
.kht-doi-tac .kht-doitac-img {
width: calc(100% - 24px);
}
/* Một khung nhìn hiển thị 2 logo */
.kht-doi-tac .kht-doitac-track {
grid-auto-columns: calc((100% - 10px) / 2);
gap: 10px;
}
/* Giảm chiều cao card trên mobile */
.kht-doi-tac .kht-doitac-track > .col > .col-inner {
min-height: 88px;
padding: 13px 14px;
border-radius: 13px;
}
/* Giảm chiều cao logo mobile còn 44px */
.kht-doi-tac .kht-doitac-track img {
height: 44px;
}
}
/* =========================================================
ACCESSIBILITY
Tắt chuyển động nếu người dùng hạn chế animation
========================================================= */
@media (prefers-reduced-motion: reduce) {
/* Cho phép người dùng tự kéo ngang khi animation bị tắt */
.kht-doi-tac .kht-doitac-img {
overflow-x: auto;
scrollbar-width: thin;
}
/* Tắt hoàn toàn chuyển động marquee */
.kht-doi-tac .kht-doitac-track.kht-is-running {
animation: none;
transform: none;
}
/* Tắt các hiệu ứng chuyển tiếp trên card và logo */
.kht-doi-tac .kht-doitac-track > .col > .col-inner,
.kht-doi-tac .kht-doitac-track img {
transition: none;
}
}
/* =========================================================
KEHETO - SECTION TIN TỨC
Phong cách: Newsroom Dashboard
Bố cục desktop:
- Bài 1: bài nổi bật lớn bên trái.
- Bài 2 - 5: danh sách tin ngắn bên phải.
- Bài 6 - 8: ba card phía dưới.
Giữ nguyên HTML Flatsome.
Giữ nguyên thiết kế tiêu đề hiện tại.
========================================================= */
/* =========================================================
1. THIẾT LẬP CHUNG
========================================================= */
.tin-tuc {
--kht-news-primary: #28cb8b;
--kht-news-primary-dark: #1b5e1f;
--kht-news-heading: #263238;
--kht-news-text: #56615c;
--kht-news-muted: #78827d;
--kht-news-white: #ffffff;
--kht-news-background: #f7faf8;
--kht-news-border:
rgba(38, 50, 56, 0.11);
--kht-news-shadow:
0 10px 30px rgba(22, 61, 45, 0.07);
--kht-news-shadow-hover:
0 20px 46px rgba(22, 61, 45, 0.14);
position: relative;
width: 100%;
overflow: hidden;
isolation: isolate;
background: var(--kht-news-background);
}
/* Đồng bộ cách tính kích thước trong section */
.tin-tuc,
.tin-tuc * {
box-sizing: border-box;
}
/* =========================================================
2. NỀN SECTION
========================================================= */
/* Nền trắng pha xanh nhẹ */
.tin-tuc > .section-bg {
background:
radial-gradient(
circle at 96% 12%,
rgba(40, 203, 139, 0.11),
transparent 27%
),
radial-gradient(
circle at 3% 94%,
rgba(67, 160, 70, 0.07),
transparent 28%
),
linear-gradient(
180deg,
#ffffff 0%,
#f6faf7 100%
);
}
/* Họa tiết lưới mờ */
.tin-tuc > .section-bg::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.33;
background-image:
linear-gradient(
rgba(40, 203, 139, 0.035) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(40, 203, 139, 0.035) 1px,
transparent 1px
);
background-size: 54px 54px;
mask-image:
linear-gradient(
to bottom,
transparent,
#000 14%,
#000 86%,
transparent
);
-webkit-mask-image:
linear-gradient(
to bottom,
transparent,
#000 14%,
#000 86%,
transparent
);
}
/* =========================================================
3. KHUNG NỘI DUNG 1320PX
========================================================= */
.tin-tuc > .section-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 42px 0 56px;
}
/* =========================================================
4. TIÊU ĐỀ
GIỮ NGUYÊN THIẾT KẾ HIỆN TẠI
========================================================= */
/* Khung tiêu đề căn trái */
.tin-tuc .tieu-de {
position: relative;
width: 100%;
max-width: 760px;
margin:
0
0
clamp(26px, 3.5vw, 42px);
padding:
0
0
0
24px;
text-align: left;
}
/* Thanh xanh dọc bên trái */
.tin-tuc .tieu-de::before {
content: "";
position: absolute;
top: 4px;
bottom: 4px;
left: 0;
width: 5px;
border-radius: 20px;
background:
linear-gradient(
180deg,
#43a046,
#1b5e1f
);
}
/* Reset cột tiêu đề của Flatsome */
.tin-tuc .tieu-de > .col {
width: 100%;
max-width: 100%;
flex-basis: 100%;
padding: 0;
}
/* Reset khung bên trong tiêu đề */
.tin-tuc .tieu-de .col-inner {
width: 100%;
padding: 0;
text-align: left;
}
/* Typography tiêu đề hiện tại */
.tin-tuc .tieu-de p {
width: 100%;
margin: 0;
padding: 0;
color: #263238;
font-size:
clamp(28px, 3vw, 40px);
font-weight: 700;
line-height: 1.16;
letter-spacing: -0.035em;
text-align: left;
text-wrap: balance;
text-transform: uppercase;
}
/* Không tạo thêm trang trí trên chữ */
.tin-tuc .tieu-de p::before,
.tin-tuc .tieu-de p::after {
content: none;
display: none;
}
/* =========================================================
5. RESET KHUNG DANH SÁCH BÀI VIẾT
========================================================= */
.tin-tuc .bai-viet {
width: 100%;
max-width: 100%;
margin: 0;
}
/* Reset cột ngoài của Flatsome */
.tin-tuc .bai-viet > .col {
width: 100%;
max-width: 100%;
flex-basis: 100%;
padding: 0;
}
/* Reset col-inner ngoài */
.tin-tuc .bai-viet > .col > .col-inner {
width: 100%;
margin: 0;
padding: 0;
}
/* =========================================================
6. BỐ CỤC NEWSROOM DESKTOP
========================================================= */
/* Chuyển danh sách thành grid 12 cột */
.tin-tuc
.bai-viet
> .col
> .col-inner
> .row {
display: grid;
grid-template-columns:
repeat(12, minmax(0, 1fr));
/* grid-auto-rows: 118px; */
gap: 16px;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
/* Reset từng bài viết */
.tin-tuc
.bai-viet
.row.large-columns-3
> .post-item {
width: auto;
min-width: 0;
max-width: none;
flex-basis: auto;
padding: 0;
}
/* Bài nổi bật lớn bên trái */
.tin-tuc .post-item:nth-child(1) {
grid-column: 1 / span 7;
grid-row: 1 / span 4;
}
/* Bốn bài ngắn bên phải */
.tin-tuc .post-item:nth-child(2) {
grid-column: 8 / -1;
grid-row: 1;
}
.tin-tuc .post-item:nth-child(3) {
grid-column: 8 / -1;
grid-row: 2;
}
.tin-tuc .post-item:nth-child(4) {
grid-column: 8 / -1;
grid-row: 3;
}
.tin-tuc .post-item:nth-child(5) {
grid-column: 8 / -1;
grid-row: 4;
}
/* Ba bài cuối nằm thành một hàng */
.tin-tuc .post-item:nth-child(6) {
grid-column: 1 / span 4;
grid-row: 5 / span 2;
}
.tin-tuc .post-item:nth-child(7) {
grid-column: 5 / span 4;
grid-row: 5 / span 2;
}
.tin-tuc .post-item:nth-child(8) {
grid-column: 9 / span 4;
grid-row: 5 / span 2;
}
/* Cho col-inner phủ đầy ô grid */
.tin-tuc .post-item > .col-inner {
width: 100%;
height: 100%;
}
/* =========================================================
7. CARD BÀI VIẾT CHUNG
========================================================= */
.tin-tuc .box-blog-post {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
border:
1px solid
var(--kht-news-border);
border-radius: 16px;
background: var(--kht-news-white);
box-shadow: var(--kht-news-shadow);
transition:
transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.35s ease,
box-shadow 0.35s ease;
}
/* Thanh màu thương hiệu dưới card */
.tin-tuc .box-blog-post::after {
content: "";
position: absolute;
right: 20px;
bottom: 0;
left: 20px;
z-index: 8;
height: 3px;
border-radius:
3px
3px
0
0;
background:
linear-gradient(
90deg,
var(--kht-news-primary),
rgba(40, 203, 139, 0)
);
transform: scaleX(0);
transform-origin: left center;
transition:
transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* =========================================================
8. HÌNH ẢNH CHUNG
========================================================= */
.tin-tuc .box-image {
position: relative;
width: 100%;
overflow: hidden;
background: #e9f1ec;
}
/* Ảnh bài viết */
.tin-tuc .box-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.001);
filter:
saturate(0.94)
contrast(1.02);
transition:
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.4s ease;
}
/* Gradient nhẹ trên ảnh */
.tin-tuc .box-image::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.01),
rgba(18, 72, 46, 0.09)
);
}
/* =========================================================
9. NỘI DUNG CARD CHUNG
========================================================= */
.tin-tuc .box-text {
position: relative;
flex: 1;
width: 100%;
padding:
18px
20px
21px;
text-align: left;
background:
linear-gradient(
145deg,
#ffffff,
#fbfdfb
);
}
/* Sắp xếp nội dung theo cột */
.tin-tuc .blog-post-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
height: 100%;
}
/* Đưa ngày đăng lên trên tiêu đề */
.tin-tuc .post-meta {
order: -1;
display: inline-flex;
align-items: center;
gap: 6px;
width: auto;
margin:
0
0
9px;
padding:
5px
9px;
border:
1px solid
rgba(40, 203, 139, 0.14);
border-radius: 999px;
color: var(--kht-news-primary-dark);
background:
rgba(40, 203, 139, 0.075);
font-size: 10px;
font-weight: 650;
line-height: 1;
opacity: 1;
}
/* Điểm xanh trước ngày đăng */
.tin-tuc .post-meta::before {
content: "";
width: 5px;
height: 5px;
flex: 0 0 5px;
border-radius: 50%;
background: var(--kht-news-primary);
box-shadow:
0 0 0 3px
rgba(40, 203, 139, 0.12);
}
/* Tiêu đề bài viết */
.tin-tuc .post-title {
width: 100%;
margin: 0;
font-size:
clamp(15px, 1.18vw, 17px);
font-weight: 750;
line-height: 1.45;
letter-spacing: -0.018em;
text-transform: none;
}
/* Link tiêu đề */
.tin-tuc .post-title a {
display: -webkit-box;
overflow: hidden;
color: var(--kht-news-heading);
text-decoration: none;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
transition:
color 0.3s ease,
transform 0.3s ease;
}
/* Mô tả bài viết */
.tin-tuc .from_the_blog_excerpt {
display: none;
margin:
13px
0
0;
color: var(--kht-news-text);
font-size: 13px;
line-height: 1.65;
}
/* Ẩn divider mặc định */
.tin-tuc .is-divider {
display: none;
}
/* =========================================================
10. BÀI NỔI BẬT ĐẦU TIÊN
========================================================= */
.tin-tuc
.post-item:first-child
.box-blog-post {
border: 0;
border-radius:
6px
30px
6px
30px;
background: #173d2e;
box-shadow:
16px 16px 0 rgba(40, 203, 139, 0.08),
0 24px 56px rgba(17, 62, 42, 0.17);
}
/* Ảnh bài nổi bật phủ toàn bộ card */
.tin-tuc
.post-item:first-child
.box-image {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
}
/*
* Flatsome gắn padding-top trực tiếp trong HTML.
* Chỉ dùng important tại thuộc tính cần thắng inline style.
*/
.tin-tuc
.post-item:first-child
.image-cover {
width: 100%;
height: 100%;
padding-top: 0 !important;
}
/* Cho ảnh phủ kín bài nổi bật */
.tin-tuc
.post-item:first-child
.box-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Gradient giúp nội dung dễ đọc */
.tin-tuc
.post-item:first-child
.box-blog-post::before {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(7, 27, 18, 0.01) 15%,
rgba(7, 27, 18, 0.18) 46%,
rgba(7, 27, 18, 0.92) 100%
);
}
/* Nội dung nằm dưới ảnh */
.tin-tuc
.post-item:first-child
.box-text {
position: relative;
z-index: 4;
display: flex;
align-items: flex-end;
margin-top: auto;
padding:
150px
32px
31px;
background: transparent;
}
/* Ngày đăng bài nổi bật */
.tin-tuc
.post-item:first-child
.post-meta {
color: #ffffff;
border-color:
rgba(255, 255, 255, 0.24);
background:
rgba(255, 255, 255, 0.13);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Điểm ngày đăng màu trắng */
.tin-tuc
.post-item:first-child
.post-meta::before {
background: #ffffff;
box-shadow:
0 0 0 3px
rgba(255, 255, 255, 0.15);
}
/* Tiêu đề bài nổi bật */
.tin-tuc
.post-item:first-child
.post-title {
max-width: 680px;
font-size:
clamp(24px, 2.35vw, 34px);
line-height: 1.35;
}
/* Link tiêu đề bài nổi bật */
.tin-tuc
.post-item:first-child
.post-title a {
color: #ffffff;
-webkit-line-clamp: 3;
}
/* Hiển thị mô tả bài đầu */
.tin-tuc
.post-item:first-child
.from_the_blog_excerpt {
display: -webkit-box;
max-width: 650px;
overflow: hidden;
color:
rgba(255, 255, 255, 0.76);
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
/* =========================================================
11. BỐN BÀI DẠNG DANH SÁCH BÊN PHẢI
========================================================= */
/* Chuyển card 2 - 5 thành card ngang */
.tin-tuc
.post-item:nth-child(n + 2):nth-child(-n + 5)
.box-blog-post {
display: grid;
grid-template-columns:
36%
64%;
min-height: 118px;
border-radius:
5px
16px
5px
16px;
}
/* Ảnh nằm bên trái */
.tin-tuc
.post-item:nth-child(n + 2):nth-child(-n + 5)
.box-image {
grid-column: 1;
grid-row: 1;
width: 100%;
height: 100%;
}
/* Cho ảnh phủ đúng chiều cao card */
.tin-tuc
.post-item:nth-child(n + 2):nth-child(-n + 5)
.image-cover {
width: 100%;
height: 100%;
padding-top: 0 !important;
}
/* Nội dung nằm bên phải */
.tin-tuc
.post-item:nth-child(n + 2):nth-child(-n + 5)
.box-text {
grid-column: 2;
grid-row: 1;
display: flex;
align-items: center;
padding:
13px
16px
14px;
border-left:
1px solid
rgba(40, 203, 139, 0.09);
}
/* Thu nhỏ khoảng cách ngày đăng */
.tin-tuc
.post-item:nth-child(n + 2):nth-child(-n + 5)
.post-meta {
margin-bottom: 7px;
font-size: 9px;
}
/* Tiêu đề card danh sách */
.tin-tuc
.post-item:nth-child(n + 2):nth-child(-n + 5)
.post-title {
font-size: 14px;
line-height: 1.4;
}
/* =========================================================
12. BA BÀI CUỐI PHÍA DƯỚI
========================================================= */
/* Card ba bài cuối */
.tin-tuc
.post-item:nth-child(n + 6)
.box-blog-post {
min-height: 252px;
border-radius:
5px
20px
5px
20px;
}
/* Ảnh ba bài cuối */
.tin-tuc
.post-item:nth-child(n + 6)
.box-image {
flex: 0 0 58%;
}
/* Nội dung ba bài cuối */
.tin-tuc
.post-item:nth-child(n + 6)
.box-text {
flex: 1;
padding:
15px
18px
18px;
}
/* Tiêu đề ba bài cuối */
.tin-tuc
.post-item:nth-child(n + 6)
.post-title {
font-size: 15px;
}
/* =========================================================
13. HIỆU ỨNG HOVER DESKTOP
========================================================= */
@media (hover: hover) and (pointer: fine) {
/* Nâng card khi hover */
.tin-tuc
.post-item:not(:first-child)
.box-blog-post:hover {
border-color:
rgba(40, 203, 139, 0.34);
box-shadow:
var(--kht-news-shadow-hover);
transform: translateY(-5px);
}
/* Hiển thị thanh xanh phía dưới */
.tin-tuc
.box-blog-post:hover::after {
transform: scaleX(1);
}
/* Phóng nhẹ ảnh */
.tin-tuc
.box-blog-post:hover
.box-image img {
filter:
saturate(1.04)
contrast(1.03);
transform: scale(1.055);
}
/* Đổi màu tiêu đề bài thường */
.tin-tuc
.post-item:not(:first-child)
.box-blog-post:hover
.post-title a {
color: var(--kht-news-primary-dark);
transform: translateX(2px);
}
/* Bài nổi bật chỉ phóng nhẹ ảnh */
.tin-tuc
.post-item:first-child
.box-blog-post:hover
.box-image img {
transform: scale(1.035);
}
}
/* =========================================================
14. ACCESSIBILITY
========================================================= */
/* Focus rõ khi sử dụng bàn phím */
.tin-tuc .box-blog-post:focus-within {
outline:
3px solid
rgba(40, 203, 139, 0.27);
outline-offset: 4px;
}
/* =========================================================
15. MÀN HÌNH NHỎ HƠN 1320PX
========================================================= */
@media screen and (max-width: 1344px) {
/* Tạo khoảng cách an toàn hai bên */
.tin-tuc > .section-content {
width:
calc(100% - 24px);
}
}
/* =========================================================
16. TABLET
========================================================= */
@media screen and (max-width: 1024px) {
/* Chuyển grid thành hai cột */
.tin-tuc
.bai-viet
> .col
> .col-inner
> .row {
grid-template-columns:
repeat(2, minmax(0, 1fr));
grid-auto-rows: auto;
gap: 14px;
}
/* Reset toàn bộ vị trí desktop */
.tin-tuc
.bai-viet
.row.large-columns-3
> .post-item {
grid-column: auto;
grid-row: auto;
}
/* Bài đầu chiếm toàn bộ chiều ngang */
.tin-tuc .post-item:first-child {
grid-column: 1 / -1;
}
/* Bài cuối chiếm toàn bộ nếu bị lẻ */
.tin-tuc .post-item:last-child {
grid-column: 1 / -1;
}
/* Chiều cao bài nổi bật tablet */
.tin-tuc
.post-item:first-child
.box-blog-post {
min-height: 430px;
}
/* Card 2 - 5 vẫn giữ dạng ngang */
.tin-tuc
.post-item:nth-child(n + 2):nth-child(-n + 5)
.box-blog-post {
min-height: 142px;
grid-template-columns:
40%
60%;
}
/* Card 6 - 8 chuyển về dạng card thông thường */
.tin-tuc
.post-item:nth-child(n + 6)
.box-blog-post {
min-height: 300px;
}
}
/* =========================================================
17. MOBILE
========================================================= */
@media screen and (max-width: 767px) {
/* Thu gọn khoảng cách section */
.tin-tuc > .section-content {
width:
calc(100% - 24px);
padding:
28px
0
34px;
}
/* Giữ nguyên format tiêu đề mobile */
.tin-tuc .tieu-de {
margin-bottom: 22px;
padding-left: 17px;
}
/* Thu nhỏ thanh xanh tiêu đề */
.tin-tuc .tieu-de::before {
width: 4px;
}
/* Typography tiêu đề mobile */
.tin-tuc .tieu-de p {
font-size:
clamp(17px, 2.8vw, 24px);
line-height: 1.2;
letter-spacing: -0.025em;
}
/* Chuyển danh sách thành một cột */
.tin-tuc
.bai-viet
> .col
> .col-inner
> .row {
grid-template-columns:
minmax(0, 1fr);
gap: 11px;
}
/* Reset toàn bộ vị trí grid */
.tin-tuc
.bai-viet
.row.large-columns-3
> .post-item,
.tin-tuc .post-item:first-child,
.tin-tuc .post-item:last-child {
grid-column: 1;
grid-row: auto;
}
/* Bài đầu hiển thị lớn */
.tin-tuc
.post-item:first-child
.box-blog-post {
min-height: 360px;
border-radius:
5px
22px
5px
22px;
box-shadow:
8px 8px 0 rgba(40, 203, 139, 0.075),
0 18px 38px rgba(17, 62, 42, 0.15);
}
/* Nội dung bài đầu */
.tin-tuc
.post-item:first-child
.box-text {
padding:
110px
20px
22px;
}
/* Tiêu đề bài đầu */
.tin-tuc
.post-item:first-child
.post-title {
font-size:
clamp(19px, 5.5vw, 23px);
line-height: 1.4;
}
/* Ẩn mô tả bài đầu để gọn */
.tin-tuc
.post-item:first-child
.from_the_blog_excerpt {
display: none;
}
/* Tất cả bài còn lại thành card ngang */
.tin-tuc
.post-item:nth-child(n + 2)
.box-blog-post,
.tin-tuc
.post-item:nth-child(n + 6)
.box-blog-post {
display: grid;
grid-template-columns:
38%
62%;
min-height: 124px;
border-radius:
4px
15px
4px
15px;
}
/* Ảnh bài thường nằm bên trái */
.tin-tuc
.post-item:nth-child(n + 2)
.box-image {
grid-column: 1;
grid-row: 1;
width: 100%;
height: 100%;
min-height: 124px;
flex: none;
}
/* Cho ảnh phủ kín card ngang */
.tin-tuc
.post-item:nth-child(n + 2)
.image-cover {
width: 100%;
height: 100%;
padding-top: 0 !important;
}
/* Nội dung bài thường bên phải */
.tin-tuc
.post-item:nth-child(n + 2)
.box-text {
grid-column: 2;
grid-row: 1;
display: flex;
align-items: center;
padding:
12px
13px
13px;
border-left:
1px solid
rgba(40, 203, 139, 0.09);
}
/* Thu ngày đăng mobile */
.tin-tuc
.post-item:nth-child(n + 2)
.post-meta {
margin-bottom: 6px;
padding:
4px
7px;
font-size: 8.5px;
}
/* Tiêu đề bài thường mobile */
.tin-tuc
.post-item:nth-child(n + 2)
.post-title {
font-size:
clamp(12px, 3.6vw, 14px);
line-height: 1.4;
}
/* Giới hạn hai dòng */
.tin-tuc
.post-item:nth-child(n + 2)
.post-title a {
-webkit-line-clamp: 2;
}
/* Luôn hiển thị thanh xanh nhẹ */
.tin-tuc
.post-item:nth-child(n + 2)
.box-blog-post::after {
opacity: 0.55;
transform: scaleX(1);
}
}
/* =========================================================
18. MOBILE NHỎ
========================================================= */
@media screen and (max-width: 390px) {
/* Giảm khoảng cách an toàn hai bên */
.tin-tuc > .section-content {
width:
calc(100% - 20px);
}
/* Thu chiều cao bài đầu */
.tin-tuc
.post-item:first-child
.box-blog-post {
min-height: 330px;
}
/* Thu nội dung bài đầu */
.tin-tuc
.post-item:first-child
.box-text {
padding:
95px
17px
19px;
}
/* Thu tiêu đề bài đầu */
.tin-tuc
.post-item:first-child
.post-title {
font-size: 18px;
}
/* Thu card bài thường */
.tin-tuc
.post-item:nth-child(n + 2)
.box-blog-post,
.tin-tuc
.post-item:nth-child(n + 6)
.box-blog-post {
grid-template-columns:
36%
64%;
min-height: 114px;
}
/* Thu chiều cao ảnh bài thường */
.tin-tuc
.post-item:nth-child(n + 2)
.box-image {
min-height: 114px;
}
/* Thu padding nội dung */
.tin-tuc
.post-item:nth-child(n + 2)
.box-text {
padding:
10px
10px
11px;
}
/* Thu tiêu đề bài thường */
.tin-tuc
.post-item:nth-child(n + 2)
.post-title {
font-size: 12px;
}
}
/* =========================================================
19. GIẢM CHUYỂN ĐỘNG
========================================================= */
@media (prefers-reduced-motion: reduce) {
/* Tắt hiệu ứng theo cài đặt thiết bị */
.tin-tuc *,
.tin-tuc *::before,
.tin-tuc *::after {
scroll-behavior: auto;
animation-duration: 0.01ms;
animation-iteration-count: 1;
transition-duration: 0.01ms;
}
/* Không zoom ảnh */
.tin-tuc .box-image img {
transform: none;
}
}