/* ================= VARIABLES ================= */
* {
    box-sizing: border-box;
}
:root {
    --primary-dark: #334B00; /* Xanh lá đậm HP89 (mã cũ để hoàn tác: #013d1e) */
    --primary-brown: #3e2723;
    --bg-cream: #f8f7f2;
    --text-dark: #1a1a1a;
    --text-gray: #666;
    --accent: #E35106; /* Cam-đỏ nhấn (mã cũ để hoàn tác: #d39b56) */
    --white: #ffffff;
    --font-main: 'Manrope', sans-serif;
    --page-padding: 60px; /* Lề trái/phải chuẩn của toàn trang */
    --header-h: 97px; /* Chiều cao thật của header: logo 60px + padding 30px + viền 1px */
    /* Chiều cao tối thiểu của hero. Dùng CHUNG cho .hero (trang chủ) và
       .page-hero (5 trang con) để hero mọi trang cao bằng nhau. Mỗi lớp
       media query đặt lại một giá trị, cả 2 file CSS đều ăn theo token này. */
    --hero-min: 650px;
}

html {
    scroll-behavior: smooth; /* Tạo hiệu ứng cuộn trang mượt mà */
    /* Phải lớn hơn chiều cao thật của header (97px), nếu không mỗi lần bấm menu
       thì phần đầu của section sẽ bị thanh menu che mất. */
    scroll-padding-top: calc(var(--header-h) + 16px);
    overflow-x: hidden;
}
body { font-family: var(--font-main); color: var(--text-dark); line-height: 1.6; background: var(--white); font-size: 15px; min-width: 1280px; overflow-x: hidden;}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ================= UTILITIES ================= */
.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--page-padding); }
.section-padding { padding: 80px 0; }
.relative { position: relative; }
.text-white { color: var(--white); }
.text-dark { color: var(--text-dark); }
.center { text-align: center; }
.text-right { text-align: right; }
.mt-2 { margin-top: 1rem; }
.mt-4 { margin-top: 2.5rem; }
.bg-cream { background-color: var(--bg-cream); }
.bg-dark-green { background-color: var(--primary-dark); }
.bg-dark-brown { background-color: var(--primary-brown); }
.bg-light-green { background-color: #eef2eb; }
.inline-block { display: inline-block; }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.3; }
.section-title { font-size: 2.2rem; color: var(--text-dark); margin-bottom: 10px; }
.divider { width: 40px; height: 3px; background: var(--accent); border: none; margin: 15px 0; }
.divider.center { margin: 15px auto; }
.link-arrow { font-size: 0.9rem; font-weight: 700; display: inline-block; margin-top: 15px; color: var(--text-dark); }
.link-arrow:hover { color: var(--accent); }

/* Buttons */
.btn { padding: 12px 28px; border-radius: 50px; font-weight: 600; font-size: 0.95rem; display: inline-flex; align-items: center; justify-content: center; transition: 0.3s; }
.btn-dark { background: var(--primary-dark); color: var(--white); border: 1px solid var(--primary-dark); }
.btn-dark:hover { background: transparent; color: var(--primary-dark); }
.btn-outline { border: 1px solid var(--primary-dark); color: var(--primary-dark); background: transparent; }
.btn-outline:hover { background: var(--primary-dark); color: var(--white); }

/* ================= HEADER ================= */
.header { position: fixed; top: 0; width: 100%; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); z-index: 1000; padding: 15px 0; border-bottom: 1px solid #eee; }
.header-inner { display: flex; justify-content: space-between; align-items: center; }
.logo img { height: 60px; }
.nav-menu ul { display: flex; gap: 30px; }
.nav-menu a { font-size: 0.9rem; font-weight: 600; padding-bottom: 5px; position: relative; }
.nav-menu a.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--accent); }

/* ================= HERO ================= */
.hero { position: relative; min-height: var(--hero-min); display: flex; align-items: center; background: var(--bg-cream); overflow: hidden; padding-top: 70px; }
/* Ảnh Hero phủ kín cả section, làm nền thay cho màu kem */
.hero-bg-wrapper { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
/* object-position: right — giữ phần skyline + quả cầu ở nửa phải như bản cũ,
   phần bị cắt khi khung rộng ra là mép trái (vùng trời trống) */
/* object-position: 40% — đo bằng profile độ-rối theo cột của hero-home.jpg
   (2078x757): x 0-830 là mảng trống, chủ thể tàu + bắt tay nằm ở x 1246-1800.
   Khung hero 1425x650 chỉ hiển thị 1659/2078 px nên phải chọn mốc cắt:
     left center  -> thấy 0-1659, CẮT CỤT cái bắt tay
     right center -> thấy 418-2077, mảng trống chỉ còn 25% bề rộng khung mà cột
                     chữ chiếm 40% -> chữ đè lên mũi tàu
     40% center   -> thấy 167-1826, mảng trống đúng 40% khớp cột chữ, chủ thể
                     lọt trọn trong khung. Đây là mốc đang dùng. */
.hero-bg-wrapper img { width: 100%; height: 100%; object-fit: cover; object-position: 40% center; }
/* Lớp phủ kem: đậm ở trái để chữ xanh/xám vẫn đọc rõ, nhạt dần sang phải
   để ảnh lộ nguyên bản. Nhờ vậy không phải đổi màu chữ và 2 nút của Hero. */
.hero-bg-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
        rgba(248, 247, 242, 0.96) 0%,
        rgba(248, 247, 242, 0.92) 34%,
        rgba(248, 247, 242, 0.55) 52%,
        rgba(248, 247, 242, 0.15) 75%,
        rgba(248, 247, 242, 0.04) 100%);
}
.hero-container { z-index: 2; width: 100%; }
.hero-content { max-width: 45%; }
.hero h1 { font-size: 3rem; margin-bottom: 20px; }
.hero p { font-size: 1.1rem; color: var(--text-gray); margin-bottom: 30px; }
.hero-buttons { display: flex; gap: 15px; }

/* Mũi tên gợi ý cuộn dưới hero. Mặc định ẩn, chỉ bật ở khổ điện thoại nơi
   hero chiếm trọn màn hình nên người dùng cần dấu hiệu là còn nội dung bên dưới. */
.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 3;
    display: none;
    transform: translateX(-50%);
    padding: 8px;
    color: var(--primary-dark);
    background: none;
    border: 0;
    cursor: pointer;
    animation: cue-bounce 1.8s ease-in-out infinite;
}
.scroll-cue svg { width: 26px; height: 26px; }
@keyframes cue-bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 7px); }
}

/* ================= VÌ SAO CHỌN ================= */
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; text-align: center; }
.feature-item img { height: 45px; margin-bottom: 20px; }
.feature-item h3 { font-size: 1.1rem; margin-bottom: 10px; }
.feature-item p { font-size: 0.9rem; color: var(--text-gray); }

/* ================= GIẢI PHÁP ================= */
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.solution-card { background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: 0.3s; }
.solution-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.sol-img { width: 100%; height: 120px; object-fit: cover; }
.sol-content { padding: 20px; position: relative; }
.sol-icon { width: 50px; height: 40px; position: absolute; top: -20px; left: 20px; background: var(--white); border-radius: 50%; padding: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.sol-content h3 { font-size: 1.1rem; margin: 15px 0 10px; }
.sol-content p { font-size: 0.85rem; color: var(--text-gray); line-height: 1.5; }

/* ================= HỆ SINH THÁI (DIAGRAM) ================= */
.grid-eco { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: center; } /* Chia cột cho bên phải rộng hơn để chứa sơ đồ */
.eco-left h2 { font-size: 2.8rem; margin-bottom: 10px; }
.eco-left p { font-size: 1.05rem; line-height: 1.6; color: var(--text-gray); margin-bottom: 30px; }
.eco-right { position: relative; display: flex; justify-content: center; align-items: center; }

/* Khung bọc sơ đồ.
   --eco-r là bán kính vòng tròn, dùng chung cho cả vòng tròn, 4 nan hoa và
   tọa độ 4 nhánh. Đổi mỗi giá trị này là toàn bộ sơ đồ co giãn theo, không
   phải chỉnh tay từng chỗ như trước.
   Khổ 700px vừa đủ để chữ hai bên nằm gọn trong khung: 145 (bán kính)
   + 22.5 (nửa icon) + 14 (khoảng hở) + 151 (chữ) = 332.5 < 350 (nửa khung). */
.eco-diagram {
    --eco-r: 145px;
    position: relative;
    width: 100%;
    max-width: 700px;
    height: 560px;
    margin: 0 auto;
}

/* Vòng tròn đứt nét — 4 icon nằm đúng trên đường này */
.eco-circle-dashed {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--eco-r) * 2);
    height: calc(var(--eco-r) * 2);
    border: 1px dashed #a0a0a0;
    border-radius: 50%;
    z-index: 1;
}

/* Khối Logo ở giữa */
.eco-center { 
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%); 
    width: 140px; height: 140px; 
    background: var(--white); 
    border-radius: 50%; 
    display: flex; justify-content: center; align-items: center; 
    z-index: 10; 
    box-shadow: 0 5px 25px rgba(0,0,0,0.08); 
}
.center-logo { width: 75%; height: auto; object-fit: contain; }

/* Các Điểm Nhánh (Nodes) */
.eco-node {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 10;
    width: max-content; /* Ngăn chữ bị ép co cụm lại */
}
.icon-circle {
    width: 50px; height: 50px;
    background: var(--primary-dark);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.icon-circle img { width: 22px; filter: brightness(0) invert(1); }
.node-text h4 { font-size: 0.95rem; color: var(--primary-dark); margin-bottom: 5px; text-transform: uppercase; }
.node-text p { font-size: 0.85rem; color: var(--text-gray); line-height: 1.5; }

/* ================= TỌA ĐỘ 4 NHÁNH GẮN VÀO VÒNG TRÒN =================
   Một bộ tọa độ duy nhất. Trước đây chỗ này có 2 bộ chồng nhau khiến node
   trên/dưới bị đảo chiều (chữ quay vào trong, đâm lên vòng tròn) và node
   trái/phải tràn hẳn ra ngoài khung.

   Quy ước hình học — R là bán kính vòng tròn, ICON là đường kính icon:
   tâm icon phải nằm đúng trên đường tròn, nên mép icon lùi vào R - ICON/2.
   Mọi node đều neo theo công thức đó, đổi R một chỗ là cả 4 nhánh chạy theo. */
.eco-node {
    position: absolute;
    display: flex;
    align-items: center; /* icon và chữ canh giữa theo nhau */
    gap: 14px;
    z-index: 10;
}
.eco-node h4 { font-size: 0.9rem; margin-bottom: 5px; color: var(--primary-dark); }
.eco-node p { font-size: 0.8rem; color: var(--text-gray); }
.icon-circle { width: 45px; height: 45px; background: var(--primary-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-circle img { width: 20px; filter: brightness(0) invert(1); }

/* Nhánh trên: chữ nằm TRÊN icon để không đâm vào vòng tròn */
.node-top {
    left: 50%;
    bottom: calc(50% + var(--eco-r) - 22.5px);
    transform: translateX(-50%);
    flex-direction: column-reverse;
    width: 240px;
    text-align: center;
}

/* Nhánh dưới: icon trên, chữ DƯỚI — hướng ra ngoài vòng tròn */
.node-bottom {
    left: 50%;
    top: calc(50% + var(--eco-r) - 22.5px);
    transform: translateX(-50%);
    flex-direction: column;
    width: 240px;
    text-align: center;
}

/* Nhánh phải: icon trước, chữ chạy ra ngoài */
.node-right {
    top: 50%;
    left: calc(50% + var(--eco-r) - 22.5px);
    transform: translateY(-50%);
    width: 210px;
    text-align: left;
}

/* Nhánh trái: trong HTML node này viết chữ TRƯỚC rồi mới tới icon (ngược với
   3 nhánh kia), nên giữ nguyên chiều row là icon đã tự nằm bên phải, áp đúng
   vào vòng tròn. Dùng row-reverse ở đây sẽ hất icon ra ngoài lề trái. */
.node-left {
    top: 50%;
    right: calc(50% + var(--eco-r) - 22.5px);
    transform: translateY(-50%);
    flex-direction: row;
    width: 210px;
    /* Khối chữ chỉ rộng bằng nội dung nên còn dư chỗ trong 210px. Dồn nội dung
       về sát mép phải để icon áp đúng vào vòng tròn thay vì hụt vào trong. */
    justify-content: flex-end;
    text-align: right;
}

/* Nan hoa nối logo trung tâm ra 4 icon. Hai đường này chạy hết đường kính
   nhưng bị khối logo (nền trắng, z-index cao hơn) che mất đoạn giữa,
   nên nhìn ra đúng 4 nan rời nhau. */
.eco-diagram::before,
.eco-diagram::after {
    content: '';
    position: absolute;
    z-index: 0;
    border-color: #c9c9c9;
    border-style: dashed;
}
.eco-diagram::before { /* nan ngang */
    top: 50%; left: 50%;
    width: calc(var(--eco-r) * 2);
    transform: translate(-50%, -50%);
    border-width: 1px 0 0;
}
.eco-diagram::after { /* nan dọc */
    top: 50%; left: 50%;
    height: calc(var(--eco-r) * 2);
    transform: translate(-50%, -50%);
    border-width: 0 0 0 1px;
}

/* ================= THƯƠNG HIỆU ================= */
.grid-brands { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 20px; }
.brand-box { border-radius: 16px; padding: 30px; position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; }
.brand-info { position: relative; z-index: 2; max-width: 60%; }
.brand-info h3 { font-size: 1.8rem; letter-spacing: 1px; }
.brand-sub { font-size: 0.8rem; letter-spacing: 2px; margin-bottom: 15px; opacity: 0.8; }
.brand-img { position: absolute; right: -20px; bottom: 0; height: 100%; object-fit: contain; z-index: 1; }
.brand-icon-center { position: absolute; right: 20px; bottom: 20px; width: 60px; opacity: 0.2; }

/* ================= QUY TRÌNH & CON SỐ ================= */
.grid-process { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; }
.process-box, .stats-box { border-radius: 16px; padding: 50px; }
/* Dàn đều tiêu đề - các bước - nút theo chiều dọc để box trái không bị hụt đáy */
.process-box { display: flex; flex-direction: column; justify-content: space-between; }
.process-steps { display: flex; justify-content: space-between; align-items: center; }
.step { text-align: center; }
.step img {
    height: 40px;
    margin-bottom: 15px;
    /* Các icon nay đã là nét đen trên nền trong suốt, nên ép thẳng thành trắng
       giống mọi chỗ khác. Trước đây phải dùng invert(1) + mix-blend-mode: screen
       để giấu nền trắng đặc của ảnh; mẹo đó làm nền xanh bị sáng lên một mảng. */
    filter: brightness(0) invert(1);
}
.step span { display: block; font-size: 0.85rem; font-weight: 600; }
.arrow { color: rgba(255,255,255,0.3); font-size: 1.5rem; }

/* Lưới 2x2 cho khối con số (HTML đã dùng .grid-2 nhưng CSS còn thiếu rule này) */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 24px; }
.stat-item { display: flex; align-items: center; gap: 15px; border-bottom: 1px solid #ddd; padding: 22px 0; }
.stat-item:nth-child(3), .stat-item:nth-child(4) { border-bottom: none; }
.stat-item img { width: 40px; flex-shrink: 0; }
/* Reset margin mặc định của trình duyệt, nếu không mỗi ô bị đội thêm ~80px chiều cao */
.stat-item h3 { font-size: 2rem; color: var(--primary-dark); margin: 0; line-height: 1.2; }
.stat-item p { font-size: 0.85rem; color: var(--text-gray); margin: 4px 0 0; line-height: 1.4; }

/* ================= GÓC NHÌN & TIN TỨC ================= */
.grid-news { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.news-card { border-radius: 12px; overflow: hidden; border: 1px solid #eee; background: var(--white); display: flex; flex-direction: column; }
.news-card img { width: 100%; height: 140px; object-fit: cover; }
.news-content { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.tag { font-size: 0.75rem; background: var(--primary-dark); color: var(--white); padding: 4px 10px; border-radius: 4px; align-self: flex-start; margin-bottom: 15px; }
.news-content h4 { font-size: 1rem; margin-bottom: auto; }
/* Định dạng thẻ Xem tất cả bài viết */
.news-card.view-all {
    background-color: var(--primary-dark); /* Màu xanh đậm */
    border: none; /* Bỏ viền xám */
}

.view-all-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 30px;
    color: var(--white);
    text-decoration: none;
    transition: all 0.3s ease;
}

.view-all-link:hover {
    transform: scale(1.05); /* Hiệu ứng phóng to nhẹ khi trỏ chuột vào */
}

.view-all-link img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-bottom: 20px;
    filter: brightness(0) invert(1); /* Biến icon thành màu trắng */
}

.view-all-link h4 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: var(--white);
    text-transform: none;
}

.view-all-link .arrow {
    font-size: 1.5rem;
    margin-top: 10px;
}

/* ================= FOOTER ================= */
.footer { padding: 80px 0 20px; font-size: 0.85rem; }
.grid-footer { display: grid; grid-template-columns: 2.5fr 1fr 1fr 1.5fr 1.5fr; gap: 30px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 40px; }
.footer-logo { height: 104px; margin-bottom: 20px; }
.brand p { opacity: 0.7; margin-bottom: 20px; max-width: 90%; }
.socials a { display: inline-block; margin-right: 10px; }
/* Cả 3 icon đều là nét đen trên nền trong suốt -> ép thành trắng cho nổi trên nền xanh đậm */
.socials img { width: 35px; filter: brightness(0) invert(1); transition: opacity 0.3s ease; }
.socials a:hover img { opacity: 0.7; }
.footer-col h4 { font-size: 0.9rem; margin-bottom: 20px; letter-spacing: 1px; }
/* Bỏ thụt đầu dòng mặc định của <ul> để các mục thẳng hàng với tiêu đề cột */
.footer-col ul { padding-left: 0; margin: 0; }
.footer-col ul li { margin-bottom: 12px; opacity: 0.7; }
.footer-col ul li a:hover { opacity: 1; color: var(--accent); }
.contact p { display: flex; gap: 10px; margin-bottom: 15px; opacity: 0.8; }
.contact img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 20px; opacity: 0.6; }

/* ================= ANIMATION ================= */
.fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* Chỉnh ảnh logo nằm giữa sơ đồ */
.center-logo {
    width: 65%; /* Thu nhỏ ảnh lại 75% để không bị viền tròn cắt mất góc vuông */
    height: auto;
    object-fit: contain; /* Giữ nguyên tỷ lệ gốc của ảnh */
}

/* ================= KHÓA TRÀN LỀ (FIX LỖI KHOẢNG TRẮNG BÊN PHẢI) ================= */
html, body {
    width: 100%;
    min-width: 1280px;
    overflow-x: hidden !important; /* Khóa chết lề ngang, cắt bỏ mọi thứ tràn ra ngoài */
    position: relative;
    margin: 0;
    padding: 0;
}

/* Đảm bảo thanh Menu và Footer luôn kéo dài đủ 1280px, không bị co rút */
.header, .footer, .hero {
    min-width: 1280px;
}

/* ================= CÂN ĐỐI LẠI SƠ ĐỒ HỆ SINH THÁI ================= */
.grid-eco {
    grid-template-columns: 1.2fr 1.8fr; /* Cấp thêm không gian an toàn cho cột chứa sơ đồ bên phải */
    gap: 10px; /* Thu hẹp bớt khoảng trống ở giữa */
}

/* Đã bỏ 2 đoạn chữa cháy ở đây:
   - .node-right { width: 210px !important } : nay width nằm trong bộ tọa độ chính
   - .eco-diagram { transform: translateX(-50px) } : nay sơ đồ đã tự cân, không
     còn nhánh nào tràn ra ngoài nên không phải xê dịch bù. */

/* ================= LÀM NỔI BẬT CÁC NÚT TÌM HIỂU TRÊN NỀN TỐI ================= */
.brand-info .link-arrow,
.process-box .link-arrow {
    background-color: var(--accent); /* Đổ màu nền vàng/cam đất */
    color: var(--white) !important; /* Đổi màu chữ thành trắng cho nổi bật */
    padding: 8px 18px; /* Căn chỉnh khoảng trống quanh chữ để tạo thành khung chữ nhật */
    border-radius: 6px; /* Bo tròn nhẹ 4 góc của khung cho tinh tế */
    display: inline-block;
    width: max-content; /* Lệnh quan trọng: Ép cái khung phải ôm sát khít vào chữ */
    margin-top: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Đổ bóng nhẹ cho nút nổi hẳn lên mặt nền */
    transition: all 0.3s ease; /* Tạo độ mượt khi rê chuột */
}

/* Hiệu ứng khi người dùng đưa chuột vào nút */
.brand-info .link-arrow:hover,
.process-box .link-arrow:hover {
    background-color: var(--white); /* Nền chuyển sang trắng */
    color: var(--primary-dark) !important; /* Chữ chuyển về màu xanh đậm */
    transform: translateY(-3px); /* Nút hơi nảy nhẹ lên trên */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}
/* =========================================================================
   HỆ THỐNG THIẾT KẾ — chuẩn hóa nhịp chữ và khoảng cách toàn trang
   Đặt ở cuối file để đè lên các rule cũ mà không phải sửa rải rác bên trên.
   ========================================================================= */

/* --- 1. Thang chữ --------------------------------------------------------
   Trước đây cùng là thẻ h2 nhưng có 3 cỡ khác nhau (45px / 35px / 23px)
   do không có thang nào. Nay quy về 3 cấp rõ ràng. */
:root {
    --type-hero: 3rem;      /* tiêu đề Hero */
    --type-section: 2.4rem; /* tiêu đề của mỗi section */
    --type-card: 1.75rem;   /* tiêu đề bên trong các box lớn */
}

/* --- 2. Reset margin mặc định của trình duyệt ----------------------------
   Đây là gốc rễ khiến khoảng cách giữa các khối bị lệch ngẫu nhiên: trình duyệt
   tự cộng margin 1em cho h1-h4 và p, nên mỗi chỗ giãn một kiểu. Sau khi reset,
   mọi khoảng cách đều đến từ rule đã viết có chủ đích.
   Các rule cũ có specificity cao hơn nên vẫn giữ nguyên giá trị chúng đã đặt. */
h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* --- 3. Chữ lớn: siết chân chữ và giãn dòng ------------------------------
   Cỡ chữ càng lớn thì line-height 1.3 và tracking mặc định càng lỏng.
   Siết lại là cách nhanh nhất để chữ trông "đắt" hơn. */
.hero h1 {
    font-size: var(--type-hero);
    line-height: 1.12;
    letter-spacing: -0.025em;
    margin-bottom: 20px;
}
.section-title,
.eco-left h2 {
    font-size: var(--type-section);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}
.process-box h2,
.stats-box h2 {
    font-size: var(--type-card);
    line-height: 1.25;
    letter-spacing: -0.01em;
}
/* Tiêu đề các thẻ nhỏ về chung một cỡ */
.feature-item h3,
.sol-content h3,
.news-content h4 { font-size: 1.05rem; line-height: 1.4; }

/* --- 4. Nhịp dọc ---------------------------------------------------------
   Mỗi section có padding trên + dưới, nên giữa 2 section khoảng trắng bị cộng
   dồn gấp đôi (96 + 96 = 192px). Hạ nhịp gốc về 80px và xử lý riêng chỗ cộng
   dồn ở mục 4b bên dưới. */
.section-padding { padding: 80px 0; }

/* --- 4b. Không để padding cộng dồn giữa 2 section cùng màu nền ------------
   Khi 2 section đổi màu nền (kem ↔ trắng) thì chính đường ranh màu đã tách
   khối, mắt không đo khoảng trắng vắt qua đó — 80px mỗi bên vẫn hợp lý.
   Nhưng brands → industries → news đều nền trắng: 160px trắng trơn liền nhau
   làm trang bị rơi nhịp, người đọc tưởng đã hết nội dung (đúng chỗ ảnh chụp).
   Bỏ padding-top của section sau để cả mạch trắng chỉ còn 1 nhịp 80px. */
.brands + .process-stats,
.process-stats + .news { padding-top: 0; }

/* --- 5. Thẻ card: thống nhất đổ bóng và phản hồi khi rê chuột -------------
   Trước đây chỉ .solution-card có hiệu ứng, .news-card thì không. */
.solution-card,
.news-card {
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.solution-card:hover,
.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 14px 34px rgba(0,0,0,0.10);
}

/* Mũi tên nhích nhẹ sang phải khi rê chuột (chỉ với link dạng chữ, không áp
   cho .link-arrow đã được tạo kiểu thành nút trên nền tối) */
.sol-content .link-arrow,
.news-content .link-arrow { transition: transform 0.25s ease, color 0.25s ease; }
.sol-content .link-arrow:hover,
.news-content .link-arrow:hover { transform: translateX(4px); }

/* --- 6. Gạch chân chạy theo con trỏ trên menu ---------------------------- */
.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 2px;
    background: var(--accent);
    transition: width 0.3s ease;
}
.nav-menu a:hover::after,
.nav-menu a.active::after { width: 100%; }

/* --- 7. Sàn chất lượng: bàn phím và giảm chuyển động --------------------- */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    /* Bắt buộc: .fade-up khởi tạo ở opacity 0, nếu tắt transition mà không ép
       hiện thì nội dung sẽ biến mất với người bật chế độ giảm chuyển động. */
    .fade-up { opacity: 1; transform: none; }
}

/* --- 8. Header khớp đúng chiều cao thật ----------------------------------
   Hero canh giữa theo chiều dọc nhưng bị header phủ lên 97px phần trên,
   nên phải bù đúng bằng chừng đó thì nội dung mới thật sự nằm giữa. */
.hero { padding-top: var(--header-h); }

/* Header đổ bóng nhẹ khi trang đã cuộn, để tách khỏi nội dung bên dưới */
.header { transition: box-shadow 0.3s ease, background-color 0.3s ease; }
.header.scrolled {
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06);
    border-bottom-color: transparent;
}

/* --- 9. Hero: ảnh làm nền cho cả section --------------------------------
   Bản cũ thu ảnh về 48% bề rộng và mask mép trái để chữ không bị ảnh nuốt.
   Nay ảnh phủ kín section (xem khối .hero-bg-wrapper ở phần HERO), việc giữ
   chữ đọc được do lớp phủ kem đảm nhiệm, nên đoạn thu ảnh + mask ở đây đã bỏ.
   Đoạn mô tả vẫn giữ khổ của cột chữ (522px) để mép phải thẳng với tiêu đề. */

/* --- 10. "Vì sao chọn HP89": canh 5 cột thẳng hàng nhau ------------------
   Tiêu đề cột dài 1 hoặc 2 dòng nên đoạn mô tả xám bên dưới bắt đầu ở 2 mốc
   lệch nhau 24px. Cho mỗi ô dùng chung hệ hàng của lưới cha (subgrid) thì
   hàng icon, hàng tiêu đề và hàng mô tả tự động thẳng nhau ở cả 5 cột. */
.grid-5 {
    grid-template-rows: auto auto auto;
    column-gap: 32px; /* 20px cũ khiến chữ hai cột gần chạm nhau */
    row-gap: 0;       /* khoảng cách dọc vẫn do margin của img/h3 quyết định */
}
.feature-item {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
}
/* Ảnh thành grid item nên text-align không còn canh giữa được nữa */
.feature-item img { justify-self: center; }

/* --- 11. Lưới 6 giải pháp: canh 4 hàng thẳng nhau -----------------------
   Thẻ "Tư vấn chuyên môn" có tiêu đề 2 dòng còn 5 thẻ kia 1 dòng, nên đoạn
   mô tả lệch 23px và link "Xem chi tiết" lệch tới 44px giữa các thẻ.
   Khai báo 4 hàng dùng chung (ảnh / tiêu đề / mô tả / link) rồi cho thẻ mượn
   lại hệ hàng đó. Phải lồng 2 tầng vì chữ nằm trong .sol-content chứ không
   phải con trực tiếp của lưới: .solution-card mượn hàng của .grid-6, rồi
   .sol-content mượn tiếp hàng của .solution-card. */
.grid-6 {
    grid-template-rows: auto auto auto auto;
    column-gap: 20px;
    row-gap: 0; /* khoảng cách dọc vẫn do margin của h3 và link quyết định */
}
.solution-card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
}
.sol-content {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
}

/* --- 12. Thẻ thương hiệu: đưa chữ và nút CTA về cùng mốc ------------------
   .brand-box là flex + align-items:center nên khối chữ của mỗi thẻ bị canh
   giữa theo chiều cao nội dung của riêng nó. Ba thẻ có lượng chữ khác nhau
   (KBC có dòng phụ VIETNAMESE GINSENG, thẻ "sắp ra mắt" có tiêu đề 2 dòng),
   nên tiêu đề lệch nhau tới 89px và 3 nút CTA nằm ở 3 độ cao khác nhau.
   Cho khối chữ cao bằng thẻ: chữ bám mép trên, nút bị margin-top:auto đẩy
   xuống chân thẻ — 3 nút về đúng một hàng. */
.brand-box { align-items: stretch; }
.brand-info { display: flex; flex-direction: column; }
.brand-info .desc { margin-bottom: 20px; } /* khoảng nghỉ tối thiểu trước nút */
.brand-info .link-arrow { margin-top: auto; }

/* Thẻ "sắp ra mắt" chỉ rộng 1fr (224px), max-width:60% của .brand-info bó
   đoạn chữ còn ~134px nên nó vỡ thành 4 dòng. Ảnh trong thẻ này chỉ là icon
   mờ ở góc dưới nên chữ dùng được cả bề rộng. */
.brand-box.bg-light-green .brand-info { max-width: 100%; }

/* Nút CTA của thẻ này giờ nằm ở chân thẻ, mép phải nút chạm đúng mép trái
   icon trang trí (cả hai đều ở x=1212). Thu icon lại để tách ra 12px. */
.brand-icon-center { width: 48px; }

/* --- 13. Khối "Con số tạo nên niềm tin": canh 4 con số thẳng hàng ---------
   .stat-item cũng là flex + align-items:center. Nhãn "Năm kinh nghiệm" chỉ 1
   dòng còn 3 nhãn kia 2 dòng, nên khối số của ô đó bị canh giữa và tụt 9px
   so với ô "20+" bên cạnh. Bám mép trên thì cả 4 con số về cùng một hàng. */
.stat-item { align-items: flex-start; }

/* =========================================================================
   KHUNG SƯỜN ẢNH (skeleton)
   Thay cho màn hình tải toàn trang cũ: màn đó hiện ở MỌI lần chuyển trang kể
   cả khi tải tức thì nên gây khó chịu. Nay mỗi ô ẢNH tự có nền khung sườn
   nhấp nháy trong lúc ảnh tải; ảnh tải xong (main.js gắn .is-loaded) thì tắt.
   - Tải nhanh: khung sườn chỉ lóe qua, gần như không thấy -> không có loader.
   - Tải chậm: thấy khung sườn rồi ảnh hiện dần.
   Danh sách selector phải KHỚP với biến SKELETON_SEL trong main.js.
   KHÔNG áp cho icon nền trong suốt (nền khung sườn sẽ lộ qua icon). */
.sol-img,
.news-card > img,
.post-card > img,
.proj-cover img,
.brand-img,
.split-media img,
.register-visual img,
.featured-media img,
.topic-card img,
.hero-bg-wrapper img,
.page-hero-bg img {
    background-color: #e9ece6;
    /* Vệt sáng chéo quét ngang tạo cảm giác đang tải */
    background-image: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0) 70%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: skeleton-sweep 1.3s ease-in-out infinite;
}
@keyframes skeleton-sweep {
    0%   { background-position: 180% 0; }
    100% { background-position: -80% 0; }
}
/* Ảnh tải xong: ảnh (đục, phủ object-fit cover) đã che nền, nên chỉ cần tắt
   hiệu ứng để khỏi tốn CPU. Fade nhẹ cho ảnh hiện ra mềm mại. */
img.is-loaded {
    background: none;
    animation: none;
    animation: skeleton-fade 0.4s ease;
}
@keyframes skeleton-fade { from { opacity: 0.4; } to { opacity: 1; } }

/* =========================================================================
   NÚT ĐỔI NGÔN NGỮ
   Cờ dùng SVG nội tuyến (kho <symbol> ở đầu <body>) chứ KHÔNG dùng emoji cờ:
   Windows không có glyph cờ nên 🇻🇳 sẽ hiện thành 2 chữ "VN".
   ========================================================================= */
.svg-sprite { display: none; }

.lang-switch { position: relative; flex-shrink: 0; }
.lang-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-dark);
    background: var(--white);
    border: 1px solid #e2e2dc;
    border-radius: 50px;
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.lang-btn:hover { border-color: var(--primary-dark); }
.lang-flag {
    width: 22px;
    height: 15px;
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); /* viền mảnh để cờ trắng/đỏ không lẫn vào nền */
}
.lang-caret { width: 14px; height: 14px; color: var(--primary-dark); transition: transform 0.2s ease; }
.lang-switch.is-open .lang-caret { transform: rotate(180deg); }

/* Chỉ hiện cờ của ngôn ngữ đang dùng. Dựa vào <html lang> nên đúng ngay từ
   lúc trang mới tải, không chờ JS chạy xong mới sửa. */
html[lang="vi"] .lang-btn .flag-en,
html[lang="en"] .lang-btn .flag-vi { display: none; }

.lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 10;
    min-width: 172px;
    padding: 6px;
    background: var(--white);
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.lang-switch.is-open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;   /* vùng bấm 41px, đủ cho ngón tay */
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text-dark);
    text-align: left;
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}
.lang-menu button:hover { background: #f3f5f2; }
.lang-menu button[aria-current="true"] { font-weight: 700; color: var(--primary-dark); }

/* =========================================================================
   ĐĂNG KÝ HỢP TÁC — form dưới mục tin tức
   Bố cục theo ảnh mẫu: ảnh trên nền tròn ở cột trái, form ở cột phải, ô nhập
   dạng viên thuốc. Màu thì lấy theo bộ màu HP89 (xanh đậm + cam đất) chứ
   không dùng xanh dương của ảnh mẫu, để đồng bộ với phần còn lại của trang.
   ========================================================================= */

/* Nhãn cho trình đọc màn hình: ô nhập chỉ có placeholder thì người dùng
   screen reader không biết ô đó là gì, nên mỗi ô vẫn có <label> nhưng ẩn khỏi
   màn hình. Không dùng display:none vì như vậy trình đọc cũng bỏ qua luôn. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.grid-register { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

/* Nền tròn mềm sau ảnh — vai trò như vòng tròn xanh nhạt trong ảnh mẫu */
.register-visual { position: relative; }
.register-visual::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    aspect-ratio: 1;
    background: #eef2eb;
    border-radius: 50%;
    z-index: 0;
}
.register-visual img {
    position: relative;
    z-index: 1;
    width: 100%;
    border-radius: 16px;      /* cùng bán kính với các thẻ lớn khác của trang */
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.register-lead { color: var(--text-gray); margin-bottom: 28px; max-width: 90%; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-full { grid-column: 1 / -1; }

/* Ô nhập: viên thuốc như ảnh mẫu. font/size phải khai lại vì thẻ form không
   thừa hưởng font của body. */
.form-grid input,
.form-grid select,
.form-grid textarea {
    width: 100%;
    padding: 15px 22px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text-dark);
    background: var(--white);
    border: 1px solid #dcdcd6;
    border-radius: 50px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-grid textarea {
    border-radius: 16px;   /* ô nhiều dòng không bo tròn kiểu viên thuốc */
    resize: vertical;
    min-height: 130px;
}
.form-grid ::placeholder { color: #9b9b93; opacity: 1; }

/* Mũi tên của <select> do trình duyệt vẽ, mỗi hệ một kiểu; ẩn đi rồi tự vẽ
   bằng ảnh nền SVG để trông giống ảnh mẫu trên cả Windows và máy Mac. */
.form-grid select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 52px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334B00' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 18px;
    cursor: pointer;
}
/* Khi chưa chọn gì thì dòng gợi ý hiển thị nhạt như placeholder của ô nhập */
.form-grid select:invalid { color: #9b9b93; }

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
    outline: none;
    border-color: var(--primary-dark);
    box-shadow: 0 0 0 3px rgba(51, 75, 0, 0.12);
}

/* Ô sai: viền đỏ + dòng nhắc ngay dưới ô. Chỉ bật khi JS gắn .has-error nên
   người dùng không thấy đỏ lòe ngay khi form còn trống. */
.field { position: relative; }
.field.has-error input,
.field.has-error select { border-color: #c0392b; }
.field-error { display: none; }
.field.has-error .field-error {
    display: block;
    padding: 6px 22px 0;
    font-size: 0.8rem;
    color: #c0392b;
}

.form-grid .btn { justify-self: start; margin-top: 4px; }
.form-status { grid-column: 1 / -1; font-size: 0.9rem; font-weight: 600; }
.form-status.is-ok { color: var(--primary-dark); }
.form-status.is-err { color: #c0392b; }

/* =========================================================================
   LIÊN HỆ NHANH — cụm nút nổi ở góc phải dưới
   ========================================================================= */
.quick-contact {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;  /* dưới header (1000) để panel menu trên điện thoại vẫn đè lên */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.qc-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
/* Thu gọn: cụm icon xẹp xuống phía nút bấm rồi mờ đi */
.quick-contact.is-closed .qc-list {
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.85);
    pointer-events: none;
}
.qc-item,
.qc-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.qc-item svg,
.qc-toggle svg { width: 26px; height: 26px; fill: var(--white); }
.qc-item:hover,
.qc-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }

/* Giữ đúng màu nhận diện của từng nền tảng, người dùng nhìn màu là biết ngay */
.qc-mess { background: #0084ff; }
.qc-zalo { background: #0068ff; }
.qc-phone { background: var(--primary-dark); }
.qc-toggle { background: #5f6b62; }

.qc-zalo-text {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--white);
}

/* Nút bấm đổi giữa dấu X (đang mở) và khung chat (đang thu gọn) */
.qc-toggle .qc-ico-open { display: none; }
.quick-contact.is-closed .qc-toggle .qc-ico-close { display: none; }
.quick-contact.is-closed .qc-toggle .qc-ico-open { display: block; }
.quick-contact.is-closed .qc-toggle { background: var(--primary-dark); }

/* Khi đã nhúng widget chat thật (Messenger/Zalo), widget đó tự vẽ bong bóng
   riêng ở góc phải dưới. Ẩn nút tương ứng của mình đi để khỏi có 2 cửa vào
   cùng một kênh, và nâng cụm còn lại lên cho khỏi đè bong bóng của widget. */
body.has-fb-chat .qc-mess { display: none; }
body.has-zalo-chat .qc-zalo { display: none; }
body.has-chat-widget .quick-contact { bottom: 100px; }

/* Vòng sóng quanh nút gọi cho dễ chú ý. Khối prefers-reduced-motion ở mục 7
   đã tắt mọi animation nên không cần khai lại ở đây. */
.qc-phone::after {
    content: '';
    position: absolute;
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 2px solid var(--primary-dark);
    animation: qc-ring 1.8s ease-out infinite;
}
.qc-item { position: relative; }
@keyframes qc-ring {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* =========================================================================
   BẢN DÙNG TRÊN ĐIỆN THOẠI VÀ MÁY TÍNH BẢNG
   Trang gốc khóa cứng khổ 1280px ở 4 chỗ: meta viewport, min-width của
   html/body, min-width của .header/.footer/.hero, và số cột cố định của mọi
   lưới. Vì vậy trên điện thoại người dùng phải zoom-out mới đọc được chữ.
   Ba lớp dưới đây mở khóa khổ đó rồi dựng lại từng lưới theo bề rộng máy.
   Đặt ở cuối file để đè lên toàn bộ rule desktop bên trên.

   Mốc chia:  ≤1279px laptop nhỏ / tablet ngang · ≤1023px tablet dọc
              ≤767px điện thoại
   ========================================================================= */

/* --- Nút mở menu (mặc định ẩn, chỉ bật ở các lớp bên dưới) --------------- */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;  /* vùng bấm tối thiểu 44px theo chuẩn cảm ứng */
    height: 44px;
    padding: 10px;
    background: none;
    border: 0;
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--primary-dark);
    transition: transform 0.25s ease, opacity 0.2s ease;
}
/* 3 vạch gập thành dấu X khi panel đang mở */
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mục CTA trong panel: chỉ dùng ở khổ nhỏ */
.nav-cta { display: none; }

/* ================= LỚP 1: ≤1279px — mở khóa khổ cứng ==================== */
@media (max-width: 1279px) {
    :root { --hero-min: 560px; }
    /* 4 chỗ khóa 1280px. Không mở hết thì mọi media query bên dưới vô nghĩa
       vì trang vẫn rộng tối thiểu 1280px và sinh thanh cuộn ngang. */
    html, body, .header, .footer, .hero { min-width: 0; }
    :root { --page-padding: 32px; }
    img { max-width: 100%; }

    .section-padding { padding: 64px 0; }

    /* --- Menu thu vào panel bấm mở ---
       Panel neo theo top:100% của .header (đang position:fixed) nên nó luôn
       nằm sát dưới thanh header, không phụ thuộc biến --header-h. */
    .nav-toggle { display: flex; }
    .header-cta { display: none; }   /* CTA chuyển vào trong panel */
    /* Dồn nút ngôn ngữ về sát nút mở menu, nếu không space-between của
       .header-inner sẽ ném nó ra giữa thanh header */
    .lang-switch { margin-left: auto; margin-right: 10px; }
    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: 76vh;
        overflow-y: auto;
        background: var(--white);
        border-bottom: 1px solid #eee;
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.10);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    }
    body.nav-open .nav-menu { opacity: 1; visibility: visible; transform: none; }
    .nav-menu ul {
        flex-direction: column;
        gap: 0;
        padding: 4px var(--page-padding) 24px;
    }
    .nav-menu li + li { border-top: 1px solid #f1f1f1; }
    .nav-menu a { display: block; padding: 14px 0; font-size: 1rem; }
    .nav-menu a::after { display: none; } /* gạch chân hover không còn nghĩa khi bấm tay */
    .nav-menu a.active { color: var(--primary-dark); }
    .nav-cta { display: block; margin-top: 20px; border-top: 0 !important; }
    /* Rule .nav-menu a ở trên (0,2,0) đè cả display lẫn padding của .btn (0,1,0),
       làm nút CTA mất padding ngang và chữ dạt sang mép trái. Trả lại đúng
       kiểu nút, đặt sau nên thắng ở cùng mức specificity. */
    .nav-cta .btn { display: inline-flex; width: 100%; padding: 13px 24px; }

    /* --- Hero ---
       Lớp phủ kem của bản desktop chuyển sắc theo chiều NGANG (chữ trái, ảnh
       phải). Khổ hẹp không còn chỗ trống bên phải nên đổi sang chiều DỌC:
       chữ nằm trên phần phủ đậm, ảnh lộ dần về phía chân section. */
    /* min-height vẫn theo token để hero trang chủ và trang con bằng nhau */
    .hero { padding: calc(var(--header-h) + 48px) 0 56px; }
    .hero-content { max-width: 100%; }
    /* Khổ hẹp chỉ thấy 28% bề rộng ảnh nên phải nhắm thẳng vào chủ thể:
       78% cho khung thấy x 1160-1751, đúng đoạn con tàu và cái bắt tay. */
    .hero-bg-wrapper img { object-position: 78% center; }
    .hero-bg-wrapper::after {
        background: linear-gradient(to bottom,
            rgba(248, 247, 242, 0.95) 0%,
            rgba(248, 247, 242, 0.88) 48%,
            rgba(248, 247, 242, 0.62) 100%);
    }

    /* --- Lưới: giảm số cột ---
       Các lưới dùng subgrid phải khai lại số hàng cho khớp: mỗi thẻ chiếm
       n hàng, đổi số cột là đổi số hàng của cả lưới (thẻ giải pháp 4 hàng
       × 2 hàng thẻ = 8). Thiếu hàng thì subgrid mất tác dụng canh hàng. */
    .grid-6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(8, auto); }
    .grid-news { grid-template-columns: repeat(3, 1fr); }
    .grid-process { grid-template-columns: 1fr; }
    .grid-brands { grid-template-columns: 1fr 1fr; }
    .grid-brands > :last-child { grid-column: 1 / -1; } /* thẻ "sắp ra mắt" trải hết hàng */
    .grid-footer { grid-template-columns: repeat(4, 1fr); row-gap: 40px; }
    .grid-footer > .brand { grid-column: 1 / -1; }

    /* Sơ đồ hệ sinh thái rộng 700px + node 240px không lồng trong cột 1.8fr
       được nữa, cho xuống dưới khối chữ và canh giữa. */
    .grid-eco { grid-template-columns: 1fr; gap: 48px; }
    .eco-left { text-align: center; }
    .eco-left .divider { margin-left: auto; margin-right: auto; }
}

/* ================= LỚP 2: ≤1023px — tablet dọc ========================== */
@media (max-width: 1023px) {
    :root { --page-padding: 24px; }

    .grid-5 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(6, auto); }
    .grid-6 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(12, auto); }
    .grid-news { grid-template-columns: repeat(2, 1fr); }
    .grid-brands { grid-template-columns: 1fr; }
    .grid-footer { grid-template-columns: repeat(2, 1fr); }

    /* Form xuống dưới ảnh; chặn bề rộng ảnh lại kẻo nó chiếm hết một màn hình */
    .grid-register { grid-template-columns: 1fr; gap: 40px; }
    .register-visual { max-width: 520px; margin: 0 auto; }
    .register-lead { max-width: 100%; }
}

/* ================= LỚP 3: ≤767px — điện thoại =========================== */
@media (max-width: 767px) {
    :root {
        --page-padding: 20px;
        --header-h: 64px;  /* logo 40 + padding 24 = 64; scroll-padding-top ăn theo biến này */
        --hero-min: 480px;
        --type-hero: 2rem;
        --type-section: 1.6rem;
        --type-card: 1.35rem;
    }
    body { font-size: 16px; }  /* 15px đọc trên tay hơi nhỏ */

    .header { padding: 12px 0; }
    .logo img { height: 40px; }
    .section-padding { padding: 48px 0; }

    /* Bản desktop dùng nhiều <br> để ép dòng cho đẹp ở khổ 1280px. Trên khổ
       hẹp chúng tạo ra một loạt dòng cụt rất xấu, bỏ đi để chữ tự ngắt. */
    .hero h1 br,
    .eco-left p br,
    .eco-node p br,
    .brand-box h3 br,
    .process-box h2 br,
    .stats-box h2 br { display: none; }

    /* Hero tràn viền, cao hết màn hình — kiểu hero ảnh chiếm trọn màn của các
       trang giới thiệu sản phẩm lớn. 100svh (small viewport height) chứ KHÔNG
       phải 100vh: trên điện thoại 100vh tính cả thanh địa chỉ nên hero bị cao
       quá màn và nút bị đẩy xuống dưới mép. Dòng 100vh phía trước là bản dự
       phòng cho trình duyệt cũ chưa hiểu svh. */
    .hero {
        min-height: 100vh;
        min-height: 100svh;
        padding: calc(var(--header-h) + 40px) 0 56px;
    }
    /* Lớp phủ nhạt hơn hẳn bản desktop để ảnh thật sự là nhân vật chính: đậm ở
       dải giữa nơi có chữ, nhạt dần ra hai đầu để ảnh chạy tràn tới mép trên và
       mép dưới. */
    .hero-bg-wrapper::after {
        background: linear-gradient(to bottom,
            rgba(248, 247, 242, 0.58) 0%,
            rgba(248, 247, 242, 0.90) 26%,
            rgba(248, 247, 242, 0.90) 68%,
            rgba(248, 247, 242, 0.48) 100%);
    }
    /* Mũi tên gợi ý cuộn tiếp, chỉ hiện ở khổ này */
    .scroll-cue { display: flex; }
    .hero p { font-size: 1rem; }
    .hero-buttons { flex-wrap: wrap; gap: 12px; }
    .hero-buttons .btn { flex: 1 1 100%; }  /* nút full width, bấm một tay dễ trúng */

    /* Bỏ subgrid ở khổ 1 cột: canh hàng ngang không còn ý nghĩa, mà giữ lại
       thì phải đếm hàng cho từng lưới. grid-row phải trả về auto, nếu không
       span 3 / span 4 của bản desktop vẫn còn hiệu lực. */
    .grid-5 { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; row-gap: 32px; }
    .feature-item { display: block; grid-row: auto; }
    .grid-6 { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 20px; }
    .solution-card { display: flex; flex-direction: column; grid-row: auto; }
    .sol-content { display: block; grid-row: auto; }
    .grid-news { grid-template-columns: 1fr; }
    .grid-footer { grid-template-columns: repeat(2, 1fr); }
    .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }

    .process-box, .stats-box { padding: 32px 24px; }
    /* 6 bước xếp ngang sẽ bị bóp còn ~45px mỗi bước. Đổi sang lưới 2 cột và ẩn
       5 mũi tên vì hướng đọc giờ là từ trên xuống, mũi tên ngang gây hiểu sai. */
    .process-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
    .process-steps .arrow { display: none; }

    /* Khối con số về 1 cột; ô thứ 3 giờ không còn ở hàng cuối nên cần lại
       gạch dưới, chỉ ô thứ 4 mới là ô cuối. */
    .grid-2 { grid-template-columns: 1fr; }
    .stat-item:nth-child(3) { border-bottom: 1px solid #ddd; }

    /* Thương hiệu: ảnh vốn nằm chiếm nửa phải thẻ, khổ hẹp thì không còn chỗ
       cho cả ảnh và chữ. Cho ảnh thành nền mờ của cả thẻ, chữ dùng hết bề rộng. */
    .brand-box { padding: 24px; min-height: 240px; }
    .brand-info { max-width: 100%; }
    .brand-img { right: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }

    /* Sơ đồ hệ sinh thái: vòng tròn 700px không co xuống 320px mà vẫn đọc được,
       nên trên điện thoại đổi hẳn sang danh sách dọc — logo trên cùng, 4 nhánh
       xếp dưới, bỏ vòng tròn đứt nét và 4 nan hoa. */
    .eco-diagram {
        height: auto;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .eco-diagram::before,
    .eco-diagram::after,
    .eco-circle-dashed { display: none; }
    .eco-center { position: static; transform: none; margin: 0 auto; width: 96px; height: 96px; }
    /* position:static nên mọi top/left/right/bottom của 4 node bị bỏ qua */
    .eco-node {
        position: static;
        transform: none;
        width: auto;
        flex-direction: row;
        text-align: left;
    }
    /* Node này viết chữ trước icon trong HTML, row-reverse để icon vẫn đứng
       đầu hàng như 3 node kia.
       Lưu ý flex-end chứ không phải flex-start: row-reverse đảo luôn trục
       chính nên "start" là mép PHẢI. Dùng flex-start thì cả icon lẫn chữ bị
       dồn sang phải, thụt vào 199px so với 3 node trên (chỉ lộ ra khi hàng
       còn chỗ trống, tức là từ khoảng 500px trở lên). */
    .node-left { flex-direction: row-reverse; justify-content: flex-end; }
    .eco-node .node-text { text-align: left; }

    /* --- Vùng bấm ---
       Chuột trỏ đúng 1 điểm còn đầu ngón tay phủ cỡ 44px, nên link chữ cao
       23px và nút cao 39px đều dễ bấm trượt. Nới bằng padding (không phải
       margin) để chính vùng nhận chạm to ra, đồng thời bù lại margin-top cho
       khoảng cách nhìn thấy không đổi. */
    .sol-content .link-arrow,
    .news-content .link-arrow { padding: 11px 0; margin-top: 4px; }  /* 23 -> 45px */
    .brand-info .link-arrow,
    .process-box .link-arrow { padding: 12px 20px; }                 /* 39 -> 45px */
    /* Menu footer: link đang là inline cao 18px. Cho thành block rồi chuyển
       khoảng cách 12px của <li> thành padding của <a> — nhịp dòng gần như cũ
       nhưng cả hàng đều bấm được. */
    .footer-col ul li { margin-bottom: 0; }
    .footer-col ul li a { display: block; padding: 10px 0; }          /* 18 -> 38px */
    .footer-bottom .policy a { display: inline-block; padding: 10px 6px; } /* 18 -> 38px */

    /* Form: 1 cột, nút full width cho dễ bấm một tay */
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .btn { justify-self: stretch; width: 100%; }
    .form-grid textarea { min-height: 110px; }

    /* Nút ngôn ngữ: bỏ chữ VI/EN, chỉ còn cờ + mũi tên cho đỡ chật thanh header */
    .lang-btn { height: 38px; padding: 0 10px; gap: 6px; }
    .lang-code { display: none; }

    /* Cụm liên hệ nhanh: sát góc hơn, thu nhỏ chút để không che nội dung */
    .quick-contact { right: 14px; bottom: 14px; gap: 10px; }
    .qc-list { gap: 10px; }
    .qc-item, .qc-toggle { width: 46px; height: 46px; }
    .qc-phone::after { width: 46px; height: 46px; }
}

/* =========================================================================
   14. LÀM NỔI KHỐI "GIẢI PHÁP"
   Trước đây thẻ trắng nằm trên nền trắng nên chìm. Đổi nền section sang xanh
   rất nhạt (#eef2eb, cùng tông với thẻ thương hiệu) để thẻ trắng bật lên. Nền
   này KHÁC hai section kem ở trên/dưới (about, ecosystem) nên ranh giới màu
   vẫn rõ, không cần đụng rule 4b.
   Đặt ở cuối file (sau cả khối mobile) để chắc chắn thắng mọi rule phía trên.

   ⚠️ .solution-card đang là subgrid (mục 11). KHÔNG thêm ::before/::after cho
   nó — pseudo-element sẽ thành một ô lưới và phá canh hàng 4 dòng. Vạch nhấn
   trên đỉnh thẻ vì vậy làm bằng border-top (luôn có, trong suốt) đổi màu khi
   rê chuột, và đổ bóng — cả hai không đội layout. */
.solutions { background: #eef2eb; }

.solution-card {
    border: 1px solid rgba(51, 75, 0, 0.07);
    border-top: 3px solid transparent;   /* luôn chừa 3px nên hover không giật */
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 30px rgba(51, 75, 0, 0.07);
}
.solution-card:hover {
    transform: translateY(-8px);
    border-top-color: var(--accent);     /* vạch cam đất hiện trên đỉnh */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05), 0 22px 48px rgba(51, 75, 0, 0.16);
}

/* Huy hiệu icon nổi hơn: vòng xanh nhạt bao quanh, rê chuột thì icon tô xanh
   đậm và huy hiệu nảy nhẹ lên */
.sol-icon {
    width: 54px;
    height: 54px;
    padding: 13px;
    border: 1px solid rgba(51, 75, 0, 0.10);
    box-shadow: 0 6px 16px rgba(51, 75, 0, 0.10);
    transition: transform 0.3s ease;
}
.solution-card:hover .sol-icon { transform: translateY(-3px); }

/* Nhãn "Xem chi tiết" đậm màu thương hiệu cho dễ thấy là bấm được */
.sol-content .link-arrow { color: var(--primary-dark); font-weight: 700; }

/* =========================================================================
   15. CĂN ĐỀU (justify) CÁC ĐOẠN VĂN DÀI
   Cho hai mép chữ thẳng đều, trông chỉnh chu hơn kiểu doanh nghiệp.
   CHỈ áp cho đoạn văn xuôi RỘNG (>=300px) và KHÔNG ngắt dòng bằng <br>:
   - Cột thẻ hẹp (135-233px: .sol-content p, .feature-item p, .num-card p...)
     căn đều sẽ tạo khe hở lớn giữa các từ -> giữ căn trái.
   - Đoạn có <br> thủ công (.eco-left p, .eco-node p) nếu căn đều thì mỗi dòng
     trước <br> bị kéo giãn hết cỡ -> giữ nguyên.
   text-justify: inter-word hợp với tiếng Việt (giãn khoảng trắng giữa từ,
   không cắt trong từ). Các selector .page-lead/.split-body... là của trang con
   (pages.css), để chung ở đây cho dễ tìm; trên index không khớp nên vô hại. */
.hero p,
.footer .brand p,
.page-lead,
.split-body p,
.vm-card p,
.featured-body > p {
    text-align: justify;
    text-justify: inter-word;
}

/* ================= GIỮ 5 THẺ TIN TỨC NẰM NGANG TRÊN ĐIỆN THOẠI ================= */
@media (max-width: 1279px) {
    .grid-news {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 16px !important;
        padding-bottom: 16px; /* Chừa không gian dưới để không bị lẹm bóng đổ */
        scroll-snap-type: x mandatory; /* Hiệu ứng hít từng thẻ khi vuốt */
        -webkit-overflow-scrolling: touch; /* Vuốt siêu mượt trên iPhone/Android */
    }

    .grid-news .news-card {
        flex: 0 0 260px !important; /* Giữ chiều rộng thẻ đẹp chuẩn như trên máy tính */
        width: 260px !important;
        scroll-snap-align: start;
    }

    /* Thẻ thứ 5 (Xem tất cả bài viết) gọn hơn một chút cho cân đối */
    .grid-news .news-card.view-all {
        flex: 0 0 180px !important;
        width: 180px !important;
    }
}

/* ================= GIỮ 6 THẺ GIẢI PHÁP NẰM NGANG TRÊN ĐIỆN THOẠI ================= */
@media (max-width: 1279px) {
    .grid-6 {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 16px !important;
        padding-bottom: 24px; /* Chừa không gian dưới để thẻ nảy lên khi hover không bị cắt bóng đổ */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .grid-6 .solution-card {
        flex: 0 0 260px !important; /* Ép thẻ luôn rộng 260px, không bị bóp méo */
        width: 260px !important;
        scroll-snap-align: start;
    }
}

/* ================= BỐ CỤC TRANG THƯƠNG MẠI ================= */
/* 1. Màn hình Máy tính: Xếp dạng lưới 3 cột và 4 cột */
.grid-passport { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* 2. Điện thoại / Tablet ngang: Biến 2 khối trên thành vuốt ngang (Vuốt siêu mượt) */
@media (max-width: 1279px) {
    .grid-passport, .grid-stages {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 24px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .grid-passport > div, .grid-stages > div {
        flex: 0 0 280px !important; /* Độ rộng thẻ chuẩn khi vuốt ngang */
        width: 280px !important;
        scroll-snap-align: start;
    }
}

/* 3. Khối 04 Trụ Cột: Máy tính 2x2 -> Điện thoại xếp dọc 1 cột gọn gàng */
@media (max-width: 767px) {
    .grid-2 {
        grid-template-columns: 1fr !important; /* Ép về 1 cột trên điện thoại */
    }
    .grid-2 > div {
        padding: 26px !important; /* Thu gọn padding bên trong thẻ cho vừa màn hình nhỏ */
    }
}

/* ================= CĂN GIỮA KHỐI 4 Ô "VÌ SAO CHỌN HP89" ================= */
/* 1. Màn hình Máy tính: Chia đúng 4 cột, thu hẹp khung lại một chút để tự động ép vào chính giữa màn hình */
.grid-5 {
    grid-template-columns: repeat(4, 1fr) !important;
    max-width: 1100px !important; /* Ép độ rộng để 4 ô ôm sát nhau */
    margin-left: auto !important; /* Đẩy khối ra giữa */
    margin-right: auto !important; /* Đẩy khối ra giữa */
}

/* 2. Tablet và Điện thoại: Chuyển thành lưới 2x2 cân xứng tuyệt đối ở giữa màn hình */
@media (max-width: 1279px) {
    .grid-5 {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 600px !important; /* Ép độ rộng vừa đủ 2 ô */
    }
}

/* ================= KHỐI 3 THẺ CASE STUDY (VUỐT NGANG TRÊN ĐIỆN THOẠI) ================= */
/* 1. Máy tính: Dàn đều 3 cột */
.grid-swipe-3 { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; 
}

/* 2. Điện thoại / Tablet: Biến thành dải vuốt ngang mượt mà */
@media (max-width: 1279px) {
    .grid-swipe-3 {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 24px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .grid-swipe-3 > div {
        flex: 0 0 280px !important; /* Đảm bảo thẻ rộng 280px không bị bóp méo */
        width: 280px !important;
        scroll-snap-align: start;
    }
}