/* Khai bao font gop thang vao day thay vi @import.
   @import tao chuoi tai noi tiep: HTML -> site.css -> font.css -> woff2,
   moi vong them mot lan di ve mang truoc khi chu duoc ve len man hinh. */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/be-vietnam-pro-400-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/be-vietnam-pro-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/be-vietnam-pro-500-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/be-vietnam-pro-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/be-vietnam-pro-600-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/be-vietnam-pro-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/be-vietnam-pro-700-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/be-vietnam-pro-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/be-vietnam-pro-800-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/be-vietnam-pro-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}


/* ============================================================
   MaxGen Global — Design tokens
   Màu trích trực tiếp từ hồ sơ năng lực MaxGen profile final 6.8
   ============================================================ */
:root {
    --green-900: #013327;
    --green-800: #04492f;
    --green-700: #07693a;
    --green-600: #0b7d46;
    --green-500: #17a55c;
    --green-400: #3cbf78;
    --green-100: #d5ebdf;
    --green-50: #eaf5ef;
    --gold: #c9a87c;
    --gold-soft: #e3cdaf;

    /* Dai trung tinh AM. Cac mau "xam" con lai deu nga xanh (#f6f9f7, #e2e9e5,
       #5c6b64) nen toan trang chim mot tong. Dai nay tao cho nghi mat va lam
       mau xanh thuong hieu noi len dung cho can nhan. */
    --sand-50:  #f8f6f2;
    --sand-100: #f0ece5;
    --line-warm: #e7e2d9;
    /* Dong dam: cung ho voi --gold nhung du toi de doc (3.5:1 tren nen trang) */
    --bronze: #a8834f;

    --ink: #1a2420;
    --ink-soft: #33443c;
    --muted: #5c6b64;
    --line: #e2e9e5;
    --surface: #ffffff;
    --surface-alt: #f6f9f7;

    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(1, 51, 39, .06), 0 2px 8px rgba(1, 51, 39, .05);
    --shadow: 0 6px 18px rgba(1, 51, 39, .08), 0 2px 6px rgba(1, 51, 39, .04);
    --shadow-lg: 0 18px 48px rgba(1, 51, 39, .14);

    --container: 1200px;
    --gutter: clamp(16px, 4vw, 32px);
    --section-y: clamp(56px, 7vw, 100px);

    --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    overflow-x: clip;
    font-family: var(--font);
    font-size: clamp(15px, .35vw + 14px, 16.5px);
    line-height: 1.75;
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--green-700); text-decoration: none; }
a:hover { color: var(--green-600); }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; }

h1, h2, h3, h4, h5 {
    margin: 0;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--ink);
}

h1 { font-size: clamp(30px, 4.4vw, 54px); }
h2 { font-size: clamp(25px, 3.1vw, 40px); }
h3 { font-size: clamp(19px, 1.7vw, 24px); }
h4 { font-size: clamp(17px, 1.3vw, 19px); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
    outline: 3px solid var(--green-500);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--green-700); color: #fff;
    padding: 12px 20px; border-radius: 0 0 var(--radius) 0; font-weight: 700;
}
.skip-link:focus { left: 0; color: #fff; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Layout
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { position: relative; padding-block: var(--section-y); }
.section--alt { background: var(--surface-alt); }
.section--tint { background: var(--green-50); }
.section--dark { background: var(--green-900); color: #dceae3; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }

.grid { display: grid; gap: clamp(18px, 2.2vw, 30px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* ============================================================
   Mô-típ 1 — Đường băng phối cảnh (lấy từ trang bìa hồ sơ)
   Các dải xanh chạy hút tầm mắt, dựng bằng gradient nên không tốn ảnh.
   ============================================================ */
.runway {
    position: relative;
    background: var(--green-900);
    overflow: hidden;
    isolation: isolate;
}

/* Các dải sáng toả ra từ một điểm tụ phía trên, rộng dần xuống chân trang —
   đúng cách khối hình chạy trên trang bìa hồ sơ. Dùng conic-gradient thay cho
   transform 3D để kết quả ổn định trên mọi trình duyệt. */
.runway::before {
    content: '';
    position: absolute; inset: 0;
    background:
        repeating-conic-gradient(from 128deg at 50% -8%,
            rgba(23, 165, 92, .34) 0deg 1.7deg,
            transparent 1.7deg 4.6deg),
        repeating-conic-gradient(from 131deg at 50% -8%,
            rgba(60, 191, 120, .17) 0deg 3.4deg,
            transparent 3.4deg 9.2deg);
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .62) 30%, transparent 66%);
            mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .62) 30%, transparent 66%);
    z-index: -2;
}

/* Làm tối vùng đặt chữ để đảm bảo tương phản, vẫn để lộ đường băng ở dưới. */
.runway::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom,
        var(--green-900) 0%,
        rgba(1, 51, 39, .88) 30%,
        rgba(1, 51, 39, .55) 62%,
        rgba(1, 51, 39, .18) 100%);
    z-index: -1;
}

/* ============================================================
   Mô-típ 2 — Badge số thứ tự (ô vuông xanh 01, 02… ở góc trang hồ sơ)
   ============================================================ */
.section-head { margin-bottom: clamp(28px, 3.5vw, 48px); }
.section-head--center { text-align: center; max-width: 780px; margin-inline: auto; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
    font-size: 13px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--green-700);
}
.section--dark .eyebrow { color: var(--green-400); }
.section-head--center .eyebrow { justify-content: center; }

.eyebrow__num {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    background: var(--green-700); color: #fff;
    font-size: 13px; letter-spacing: 0; border-radius: 6px;
}
.section--dark .eyebrow__num { background: var(--green-500); color: var(--green-900); }

.section-head p {
    margin-top: 14px; max-width: 68ch;
    color: var(--muted); font-size: clamp(15px, .4vw + 14px, 17px);
}
.section--dark .section-head p { color: #a9c6b8; }
.section-head--center p { margin-inline: auto; }

/* ============================================================
   Mô-típ 3 — Nhãn dọc mờ ở mép (ABOUT US / OUR PRODUCT trong hồ sơ)
   ============================================================ */
.vlabel {
    position: absolute; top: 50%; right: 0;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    font-size: clamp(40px, 5vw, 72px); font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(1, 51, 39, .045);
    pointer-events: none; user-select: none; z-index: 0;
}
.section--dark .vlabel { color: rgba(255, 255, 255, .05); }
@media (max-width: 1100px) { .vlabel { display: none; } }

.section > .container { position: relative; z-index: 1; }

/* ============================================================
   Nút
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 26px;
    border: 2px solid transparent; border-radius: var(--radius-pill);
    font-weight: 700; font-size: 15px; line-height: 1.2;
    cursor: pointer; text-align: center;
    transition: transform .2s var(--ease), background-color .2s var(--ease),
                color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary { background: var(--green-700); color: #fff; box-shadow: 0 6px 16px rgba(7, 105, 58, .28); }
.btn--primary:hover { background: var(--green-600); color: #fff; box-shadow: 0 10px 24px rgba(7, 105, 58, .34); }

.btn--gold { background: var(--gold); color: var(--green-900); }
.btn--gold:hover { background: var(--gold-soft); color: var(--green-900); }

.btn--ghost { border-color: var(--green-700); color: var(--green-700); background: transparent; }
.btn--ghost:hover { background: var(--green-700); color: #fff; }

.btn--light { background: #fff; color: var(--green-800); }
.btn--light:hover { background: var(--green-50); color: var(--green-800); }

.btn--onDark { border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn--onDark:hover { background: #fff; color: var(--green-800); border-color: #fff; }

.btn--sm { padding: 9px 18px; font-size: 14px; }
.btn--block { width: 100%; }

.link-arrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-weight: 700; font-size: 14.5px; color: var(--green-700);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ============================================================
   Header
   ============================================================ */
.header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .25s var(--ease);
}
.header.is-stuck { box-shadow: var(--shadow); }

.header__bar {
    display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
    min-height: 76px;
}

.header__logo { display: flex; align-items: center; flex: none; }
.header__logo img { height: 52px; width: auto; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(4px, 1vw, 12px); list-style: none; }

.nav__link {
    display: block; padding: 9px 12px; border-radius: var(--radius-sm);
    font-size: 15px; font-weight: 600; color: var(--ink-soft);
    white-space: nowrap; transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav__link:hover { color: var(--green-700); background: var(--green-50); }
.nav__link.is-active { color: var(--green-700); background: var(--green-50); }

.nav__item { position: relative; }
.nav__item--has-menu > .nav__link::after {
    content: ''; display: inline-block; margin-left: 6px;
    width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

.submenu {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
    min-width: 276px; padding: 8px;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    list-style: none; opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav__item--has-menu:hover .submenu,
.nav__item--has-menu:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); }

.submenu a {
    display: block; padding: 10px 14px; border-radius: var(--radius-sm);
    font-size: 14.5px; font-weight: 600; color: var(--ink-soft);
}
.submenu a:hover { background: var(--green-50); color: var(--green-700); }

.header__cta { display: flex; align-items: center; gap: 14px; flex: none; }

.header__phone {
    display: flex; align-items: center; gap: 9px;
    font-weight: 700; font-size: 15px; color: var(--green-700); white-space: nowrap;
}
.header__phone svg { width: 19px; height: 19px; }

.burger {
    display: none; width: 46px; height: 46px; flex: none;
    align-items: center; justify-content: center;
    background: var(--green-50); border: 0; border-radius: var(--radius-sm);
    color: var(--green-700); cursor: pointer;
}
.burger svg { width: 24px; height: 24px; }

/* Khung noi dung toi da 1200px (vung chu 1136px). Menu day du + hotline + nut CTA
   can 1236px neu de khoang dem mac dinh, nen phai thu gon menu lai o khoang desktop
   thi moi giu duoc so hotline tren header. */
@media (min-width: 1200px) {
    .nav__list { gap: 2px; }
    .nav__link { padding: 9px 10px; font-size: 14.5px; }
    .header__phone { font-size: 14.5px; }
    .header__cta { gap: 12px; }
}
@media (max-width: 1199px) {
    .header__phone { display: none; }
}
@media (max-width: 1199px) {
    .nav { display: none; }
    .burger { display: inline-flex; }
    .header__cta { margin-left: auto; }
}
@media (max-width: 560px) {
    /* Van giu nut dang ky tren mobile - day la nut chuyen doi chinh cua site
       tuyen sinh, chi thu nho lai cho vua man hinh. */
    .header__cta { gap: 8px; }
    .header__cta .btn { padding: 12px 14px; font-size: 13.5px; }
    .header__logo img { height: 42px; }
    .header__bar { min-height: 66px; gap: 8px; }
    .burger { width: 44px; height: 44px; }
    .footer__social a { width: 44px; height: 44px; }
}
@media (max-width: 360px) {
    .header__cta .btn { padding: 9px 11px; font-size: 12.5px; }
}

/* Drawer mobile */
.drawer {
    position: fixed; inset: 0; z-index: 150;
    visibility: hidden; pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }

.drawer__scrim {
    position: absolute; inset: 0;
    background: rgba(1, 51, 39, .5);
    opacity: 0; transition: opacity .28s var(--ease);
}
.drawer.is-open .drawer__scrim { opacity: 1; }

.drawer__panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(360px, 88vw); padding: 22px;
    background: #fff; overflow-y: auto;
    transform: translateX(100%); transition: transform .3s var(--ease);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.drawer__head img { height: 44px; width: auto; }

.drawer__close {
    width: 42px; height: 42px; display: grid; place-items: center;
    background: var(--green-50); border: 0; border-radius: var(--radius-sm);
    color: var(--green-700); cursor: pointer;
}
.drawer__close svg { width: 22px; height: 22px; }

.drawer__list { list-style: none; }
.drawer__list > li { border-bottom: 1px solid var(--line); }
.drawer__list a {
    display: block; padding: 13px 4px;
    font-weight: 600; font-size: 16px; color: var(--ink);
}
.drawer__list a:hover { color: var(--green-700); }
.drawer__sub { list-style: none; padding-left: 16px; padding-bottom: 8px; }
.drawer__sub a { padding: 8px 4px; font-size: 14.5px; font-weight: 500; color: var(--muted); }
.drawer__foot { margin-top: 24px; display: grid; gap: 12px; }

/* ============================================================
   Hero
   ============================================================ */
.hero { color: #fff; padding-block: clamp(56px, 8vw, 108px); }

.hero__inner {
    display: grid; gap: clamp(32px, 4vw, 60px); align-items: center;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
}
@media (max-width: 940px) { .hero__inner { grid-template-columns: 1fr; } }

.hero__tagline {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 16px 7px 8px; margin-bottom: 22px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius-pill);
    font-size: 13.5px; font-weight: 600; letter-spacing: .06em; color: #cfe8db;
}
.hero__tagline span {
    background: var(--green-500); color: var(--green-900);
    padding: 3px 11px; border-radius: var(--radius-pill);
    font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}

.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--green-400); }

.hero__lead {
    margin-top: 20px; max-width: 60ch;
    font-size: clamp(15.5px, .5vw + 14px, 18px); color: #b9d5c8;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.hero__figure { position: relative; }
.hero__figure img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .38);
}

.hero__badge {
    position: absolute; left: -18px; bottom: -18px;
    display: flex; align-items: center; gap: 13px;
    padding: 15px 20px;
    background: #fff; border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.hero__badge strong { display: block; font-size: 22px; color: var(--green-700); line-height: 1.1; }
.hero__badge span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.hero__badge-icon {
    display: grid; place-items: center; width: 44px; height: 44px; flex: none;
    background: var(--green-50); border-radius: 50%; color: var(--green-700);
}
.hero__badge-icon svg { width: 24px; height: 24px; }
@media (max-width: 560px) { .hero__badge { left: 12px; bottom: -14px; padding: 12px 16px; } }

/* ============================================================
   Thành tựu
   ============================================================ */
.stats { background: var(--green-800); color: #fff; }
.stats__grid {
    display: grid; gap: clamp(20px, 2.5vw, 36px);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 178px), 1fr));
}
.stat { text-align: center; }
.stat__num {
    font-size: clamp(32px, 3.1vw, 46px); font-weight: 800;
    line-height: 1; color: var(--gold); letter-spacing: -.02em;
}
.stat__label { margin-top: 12px; font-size: 14px; color: #b6d2c4; font-weight: 600; }

/* ============================================================
   Card
   ============================================================ */
.card {
    display: flex; flex-direction: column;
    height: 100%; padding: clamp(22px, 2.2vw, 30px);
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--green-100); }

.card__icon {
    display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 18px;
    background: var(--green-50); border-radius: var(--radius-sm); color: var(--green-700);
}
.card__icon svg { width: 27px; height: 27px; }

.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 15px; }
.card .link-arrow { margin-top: auto; padding-top: 18px; }

.card__num {
    font-size: 13px; font-weight: 800; letter-spacing: .1em;
    color: var(--green-400); margin-bottom: 10px;
}

/* Card có ảnh (chương trình đào tạo, hợp tác, tin tức) */
.card--media { padding: 0; overflow: hidden; }
.card--media .card__body { padding: clamp(20px, 2vw, 26px); display: flex; flex-direction: column; flex: 1; }
.card--media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.card__bar {
    background: var(--green-700); color: #fff;
    padding: 13px 20px; font-weight: 800; font-size: 17px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.card__bar img { width: auto; max-height: 30px; aspect-ratio: auto; background: #fff; padding: 3px 7px; border-radius: 5px; }

.card__meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.card__tag {
    display: inline-block; padding: 4px 12px; border-radius: var(--radius-pill);
    background: var(--green-50); color: var(--green-700); font-size: 12.5px; font-weight: 700;
}

.check-list { list-style: none; display: grid; gap: 10px; margin-top: 16px; }
.check-list li { position: relative; padding-left: 30px; font-size: 15px; color: var(--ink-soft); }
.check-list li::before {
    content: ''; position: absolute; left: 0; top: .45em;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--green-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307693a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ============================================================
   Mô-típ 4 — Chân dung tròn viền xanh (card đội ngũ)
   ============================================================ */
.member {
    display: flex; flex-direction: column; align-items: center; height: 100%;
    padding: 28px 22px; text-align: center;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    cursor: pointer;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.member:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--green-100); }

.member__photo {
    width: 148px; height: 148px; margin-bottom: 18px;
    border-radius: 50%; border: 3px solid var(--green-600);
    padding: 4px; background: var(--surface-alt);
    object-fit: cover; aspect-ratio: 1;
}

.member__name { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.member__role {
    font-size: 13px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--green-700); margin-bottom: 12px;
}
.member__highlight { font-size: 14.5px; color: var(--muted); line-height: 1.65; }
.member__more { margin-top: auto; padding-top: 16px; font-size: 13.5px; font-weight: 700; color: var(--green-600); }

/* Modal chi tiết nhân sự */
.modal {
    position: fixed; inset: 0; z-index: 200;
    display: grid; place-items: center; padding: 20px;
    visibility: hidden; pointer-events: none;
}
.modal.is-open { visibility: visible; pointer-events: auto; }
.modal__scrim { position: absolute; inset: 0; background: rgba(1, 51, 39, .62); opacity: 0; transition: opacity .25s var(--ease); }
.modal.is-open .modal__scrim { opacity: 1; }

.modal__panel {
    position: relative; z-index: 1;
    width: min(680px, 100%); max-height: min(86vh, 760px); overflow-y: auto;
    padding: clamp(26px, 3vw, 40px);
    background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    transform: scale(.96) translateY(10px); opacity: 0;
    transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.modal.is-open .modal__panel { transform: scale(1) translateY(0); opacity: 1; }

.modal__close {
    position: absolute; top: 14px; right: 14px;
    width: 40px; height: 40px; display: grid; place-items: center;
    background: var(--green-50); border: 0; border-radius: 50%;
    color: var(--green-700); cursor: pointer;
}
.modal__close svg { width: 20px; height: 20px; }

.modal__head { display: flex; gap: 22px; align-items: center; margin-bottom: 22px; }
.modal__head img { width: 108px; height: 108px; flex: none; border-radius: 50%; border: 3px solid var(--green-600); padding: 3px; }
@media (max-width: 520px) { .modal__head { flex-direction: column; text-align: center; } }

.modal__creds { list-style: none; display: grid; gap: 11px; }
.modal__creds li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink-soft); }
.modal__creds li::before {
    content: ''; position: absolute; left: 2px; top: .62em;
    width: 8px; height: 8px; border-radius: 50%; background: var(--green-500);
}

/* ============================================================
   Đối tác
   ============================================================ */
.partners__grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
}
.partner {
    /* Flex de max-height:100% cua anh tinh dung theo vung noi dung (da tru padding). */
    display: flex; align-items: center; justify-content: center;
    height: clamp(112px, 11vw, 138px); padding: 16px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.partner:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.partner img {
    max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
    filter: grayscale(1); opacity: .68;
    transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.partner:hover img { filter: grayscale(0); opacity: 1; }

/* ============================================================
   Trang nội dung
   ============================================================ */
.pagehero { color: #fff; padding-block: clamp(48px, 6vw, 84px); }
.pagehero h1 { color: #fff; max-width: 22ch; }
.pagehero p { margin-top: 16px; max-width: 68ch; color: #b9d5c8; font-size: clamp(15px, .4vw + 14px, 17.5px); }

.breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; font-size: 13.5px; }
.breadcrumb li { color: #8fb3a2; }
.breadcrumb li + li::before { content: '/'; margin-right: 8px; color: #567d6c; }
.breadcrumb a { color: #b9d5c8; }
.breadcrumb a:hover { color: #fff; }

.prose { max-width: 74ch; }
.prose h2 { margin: 1.5em 0 .5em; font-size: clamp(21px, 2vw, 27px); }
.prose h3 { margin: 1.4em 0 .45em; font-size: clamp(18px, 1.5vw, 21px); color: var(--green-700); }
.prose > :first-child { margin-top: 0; }
.prose p { color: var(--ink-soft); }
.prose ul, .prose ol { margin: 0 0 1em 1.15em; padding-left: .5em; }
.prose li { margin-bottom: .45em; color: var(--ink-soft); }
.prose img { border-radius: var(--radius); margin: 1.5em 0; }
.prose blockquote {
    margin: 1.5em 0; padding: 4px 0 4px 22px;
    border-left: 4px solid var(--green-500);
    font-size: 17px; font-style: italic; color: var(--ink-soft);
}

.split { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.split__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); object-fit: cover; }

/* Ba the Tam nhin / Su menh / Gia tri cot loi.
   Truoc day moi the co mot vien xanh o canh tren, xep chong ba cai lien tiep
   nhin rat lap. Doi sang nen nhat + vach nhan ben trai + icon de tao nhip ngang
   va giup nhan biet nhanh tung muc. */
.value-card {
    display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
    height: 100%; padding: clamp(15px, 1.4vw, 19px) clamp(17px, 1.6vw, 21px);
    background: var(--surface-alt);
    border-radius: var(--radius);
    border-left: 3px solid var(--green-600);
    transition: background-color .25s var(--ease), transform .25s var(--ease),
                box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.value-card:hover {
    background: #fff; box-shadow: var(--shadow);
    transform: translateX(4px); border-left-color: var(--green-500);
}
.value-card__icon {
    display: grid; place-items: center;
    width: 42px; height: 42px; flex: none;
    background: #fff; border-radius: 11px; color: var(--green-700);
    box-shadow: var(--shadow-sm);
}
.value-card__icon svg { width: 22px; height: 22px; }
.value-card h3 { color: var(--green-800); margin-bottom: 5px; font-size: clamp(17px, 1.25vw, 19px); }
/* Giãn dòng 1.6 thay vì 1.75 của body: khối này nhiều chữ nên nén lại
   giúp cả mục thấp xuống đáng kể mà vẫn dễ đọc. */
.value-card p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0; }

/* Cot anh cao bang cot chu de khong con khoang trong tren duoi */
.split--equal { align-items: stretch; }
/* Duoi 900px hai cot con qua hep: anh bi keo thanh khung 340x920 rat gay.
   Xep mot cot de anh tro lai ty le ngang tu nhien. */
@media (max-width: 900px) {
    .split--equal { grid-template-columns: 1fr; }
}
.split--equal .split__media { position: relative; display: flex; }
.split--equal .split__media img {
    width: 100%; height: 100%;
    min-height: clamp(280px, 30vw, 460px);
    object-fit: cover;
    /* Nhan vat nam lech phai trong anh goc nen keo khung nhin ve phia do */
    object-position: 72% 38%;
}

/* Nhan noi tren anh, dung lai ngon ngu the noi o hero */
.media-badge {
    position: absolute; left: 22px; bottom: 22px; z-index: 1;
    display: flex; align-items: center; gap: 13px;
    padding: 14px 20px;
    background: #fff; border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.media-badge strong { display: block; font-size: 21px; line-height: 1.1; color: var(--green-700); }
.media-badge span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.media-badge__icon {
    display: grid; place-items: center; width: 42px; height: 42px; flex: none;
    background: var(--green-50); border-radius: 50%; color: var(--green-700);
}
.media-badge__icon svg { width: 22px; height: 22px; }
@media (max-width: 560px) {
    .media-badge { left: 14px; bottom: 14px; padding: 11px 15px; gap: 10px; }
    .media-badge strong { font-size: 18px; }
}

/* Thư viện ảnh */
.gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.gallery figure { margin: 0; }
.gallery img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.gallery figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); text-align: center; }

/* ============================================================
   Form
   ============================================================ */
.form { display: grid; gap: 16px; }
.form__row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.field { display: grid; gap: 7px; }
.field label { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.field .req { color: #c0392b; }

.field input, .field select, .field textarea {
    width: 100%; padding: 12px 15px;
    font: inherit; font-size: 15px; color: var(--ink);
    background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { min-height: 118px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--green-500);
    box-shadow: 0 0 0 3px rgba(23, 165, 92, .16);
}
.field input::placeholder, .field textarea::placeholder { color: #9aa9a2; }

.field-validation-error, .validation-summary-errors ul { color: #c0392b; font-size: 13.5px; }
.validation-summary-errors ul { list-style: none; display: grid; gap: 4px; }
.input-validation-error { border-color: #c0392b !important; }

/* Bẫy bot: trường ẩn hoàn toàn với người dùng thật */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { padding: 15px 18px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; }
.alert--ok { background: var(--green-50); color: var(--green-800); border: 1px solid var(--green-100); }
.alert--err { background: #fdecea; color: #a5281b; border: 1px solid #f5c6c1; }

.form-card {
    padding: clamp(24px, 2.6vw, 36px);
    background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.form-card h3 { margin-bottom: 8px; }
.form-card > p { color: var(--muted); font-size: 15px; margin-bottom: 22px; }

/* CTA */
.cta { color: #fff; }
.cta__inner { display: grid; gap: clamp(32px, 4vw, 56px); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.cta h2 { color: #fff; }
.cta p { color: #b9d5c8; margin-top: 16px; max-width: 54ch; }

/* Thông tin liên hệ */
.contact-list { list-style: none; display: grid; gap: 20px; margin-top: 28px; }
.contact-list li { display: flex; gap: 15px; align-items: flex-start; }
/* min-width:0 cho phep phan noi dung co lai; anywhere de email dai tu xuong dong. */
.contact-list li > div { min-width: 0; overflow-wrap: anywhere; }
.contact-list__icon {
    display: grid; place-items: center; width: 44px; height: 44px; flex: none;
    background: var(--green-50); border-radius: var(--radius-sm); color: var(--green-700);
}
.section--dark .contact-list__icon { background: rgba(255, 255, 255, .1); color: var(--green-400); }
.contact-list__icon svg { width: 21px; height: 21px; }
.contact-list strong { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 3px; }
.section--dark .contact-list strong { color: #8fb3a2; }
.contact-list span, .contact-list a { font-size: 16px; font-weight: 600; color: var(--ink); }
.section--dark .contact-list span, .section--dark .contact-list a { color: #fff; }

/* ============================================================
   Footer
   ============================================================ */
.footer { color: #a9c6b8; padding-block: clamp(48px, 5vw, 72px) 0; }
.footer__grid {
    display: grid; gap: clamp(28px, 3vw, 44px);
    grid-template-columns: minmax(min(100%, 240px), 1.5fr) repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}
/* Duoi 760px hai cot toi thieu (240 + 160) rong hon vung noi dung nen bi cat chu.
   Xep mot cot de moi dong hien du. */
@media (max-width: 760px) {
    .footer__grid { grid-template-columns: 1fr; gap: 30px; }
    .footer__about { max-width: none; }
}
.footer__logo { height: 62px; width: auto; margin-bottom: 18px; }
.footer__about { font-size: 14.5px; line-height: 1.7; max-width: 38ch; }

.footer h4 { color: #fff; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 18px; }
.footer__list { list-style: none; display: grid; gap: 11px; }
.footer__list a, .footer__list span { font-size: 14.5px; color: #a9c6b8; }
.footer__list a:hover { color: #fff; }

.footer__social { display: flex; gap: 10px; margin-top: 20px; }
.footer__social a {
    display: grid; place-items: center; width: 40px; height: 40px;
    background: rgba(255, 255, 255, .09); border-radius: 50%; color: #fff;
    transition: background-color .2s var(--ease);
}
.footer__social a:hover { background: var(--green-600); }
.footer__social svg { width: 19px; height: 19px; }

.footer__bottom {
    margin-top: clamp(36px, 4vw, 52px); padding-block: 22px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
    font-size: 13.5px;
}

/* ============================================================
   Nút nổi Zalo / Gọi
   ============================================================ */
.floats {
    position: fixed; right: 18px; bottom: 18px; z-index: 90;
    display: grid; gap: 12px;
}
.float-btn {
    display: grid; place-items: center; width: 54px; height: 54px;
    border-radius: 50%; color: #fff; box-shadow: var(--shadow-lg);
    transition: transform .2s var(--ease);
}
.float-btn:hover { transform: scale(1.08); color: #fff; }
.float-btn svg { width: 27px; height: 27px; }
.float-btn--phone { background: var(--green-600); }
.float-btn--zalo { background: #0068ff; }
.float-btn--top { background: var(--ink); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .2s var(--ease); }
.float-btn--top.is-visible { opacity: .85; pointer-events: auto; }

@media (max-width: 760px) {
    /* Chi giu hai nut chuyen doi chinh. Cum ba nut cao 164px de len ca tieu de
       khi cuon giua trang, trong khi nut len dau trang la thu it can nhat. */
    .float-btn--top { display: none; }
}
@media (max-width: 560px) {
    .floats { right: 12px; bottom: 12px; gap: 10px; }
    .float-btn { width: 48px; height: 48px; }
    .float-btn svg { width: 24px; height: 24px; }
}

/* Hiệu ứng xuất hiện khi cuộn.
   Chỉ ẩn khi JavaScript chạy được — nếu không, nội dung vẫn hiển thị bình thường. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* Phân trang */
.pager { display: flex; gap: 8px; justify-content: center; margin-top: 44px; flex-wrap: wrap; }
.pager a, .pager span {
    display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 14px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-weight: 700; font-size: 15px; color: var(--ink-soft); background: #fff;
}
.pager a:hover { border-color: var(--green-600); color: var(--green-700); }
.pager .is-current { background: var(--green-700); border-color: var(--green-700); color: #fff; }

/* Trang lỗi */
.errorpage { display: grid; place-items: center; text-align: center; min-height: 62vh; padding-block: 60px; }
.errorpage__code { font-size: clamp(72px, 12vw, 140px); font-weight: 800; line-height: 1; color: var(--green-100); }

/* ============================================================
   Tinh chinh cho man hinh nho
   ============================================================ */
@media (max-width: 760px) {
    /* Thanh so lieu: xep 2 cot thay vi 5 hang doc cho do dai trang */
    .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
    .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }

    /* Cot ben phai o trang chi tiet khong can dinh khi da xep mot cot */
    .split > aside { position: static !important; top: auto !important; }

    /* Chua chan cho cum nut noi khong de len chu cuoi trang */
    .footer { padding-bottom: 78px; }
    .footer__bottom { padding-bottom: 4px; }

    /* Vung cham dat toi thieu 44px theo WCAG 2.5.5 */
    .link-arrow { min-height: 44px; align-items: center; }

    /* Anh trong bai viet va trang chi tiet khong tran ra ngoai */
    .prose img, .prose table, .prose pre { max-width: 100%; }
    .prose { max-width: none; }
}

@media (max-width: 420px) {
    /* Modal nhan su chiem gan het man hinh, chua nhieu dong thanh tich */
    .modal { padding: 12px; }
    .modal__panel { max-height: 88vh; padding: 24px 20px; }
    .modal__head { gap: 14px; }
    .modal__head img { width: 88px; height: 88px; }

    /* Anh chan dung nho lai de moi the gon hon */
    .member { padding: 24px 18px; }
    .member__photo { width: 128px; height: 128px; }

    /* Bang tin tuc va the chuong trinh */
    .card__bar { font-size: 15.5px; padding: 12px 16px; }
    .hero__actions .btn { width: 100%; }
}

/* Khoi don vi hop tac o trang chi tiet: cho xuong dong va gioi han be rong logo
   de khong day khung ra ngoai man hinh hep. */
.partner-badge {
    display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
    padding: 18px 22px; margin-bottom: 30px;
    background: var(--surface-alt); border-radius: var(--radius);
}
.partner-badge img { max-height: 52px; max-width: min(100%, 190px); width: auto; }
.partner-badge > div { min-width: 0; }
.partner-badge strong {
    display: block; font-size: 12.5px; letter-spacing: .09em;
    text-transform: uppercase; color: var(--muted);
}
.partner-badge span { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }

/* ============================================================
   Vung cham tren mobile
   Ngon tay can toi thieu 44x44 (WCAG 2.5.5 / Apple HIG). Cac link dang
   chu chay chi cao 17-20px nen phai noi them dem doc.
   ============================================================ */
@media (max-width: 760px) {
    .footer__list { gap: 2px; }
    .footer__list a,
    .footer__list span { display: block; padding-block: 12px; }

    .contact-list a { display: inline-block; padding-block: 10px; }

    .breadcrumb a,
    .breadcrumb li { padding-block: 6px; }

    .btn--sm { padding-block: 12px; }

    /* Nut trong the va o nut loc tin tuc */
    .card .link-arrow { padding-top: 20px; padding-bottom: 4px; }
}

/* Muc gioi thieu von rat cao, giam nhip doc cua section de tong the gon lai. */
.section--tight { padding-block: clamp(46px, 5vw, 74px); }
.section--tight .section-head { margin-bottom: 18px; }

/* ============================================================
   Muc "Linh vuc hoat dong"
   Truoc day la 6 the trang giong het nhau xep 3x2 duoi mot tieu de can giua —
   khong co diem nhin nao. Doi sang bo cuc lech: mot bang xanh dam mang van
   duong bang lam neo ben trai, sau lam luoi the gon hon ben phai.
   ============================================================ */
.fields__inner {
    display: grid;
    gap: clamp(22px, 2.6vw, 38px);
    grid-template-columns: minmax(min(100%, 300px), 0.86fr) minmax(min(100%, 420px), 1.14fr);
    align-items: stretch;
}
@media (max-width: 900px) {
    .fields__inner { grid-template-columns: 1fr; }
}

/* Bang cao bang cot the ben canh: khong con khoang trong o duoi,
   dong thoi mang xanh dam du lon de lam neo thi giac cho ca muc. */
.fields__panel {
    display: flex; flex-direction: column;
    padding: clamp(26px, 2.8vw, 38px);
    border-radius: var(--radius-lg);
    color: #fff;
}
.fields__panel .btn { align-self: flex-start; margin-top: auto; }

/* Logo mo lam hoa tiet nen, lap day khoang giua bang thay vi de trong.
   Dat duoi cung theo thu tu xep chong nen khong che chu. */
.fields__mark {
    /* Day xuong duoi de phan chu cua logo bi cat han, chi con hinh cay
       lam hoa tiet — tranh nhin thay chu bi cat do dang. */
    position: absolute; right: -46px; bottom: -104px;
    width: clamp(190px, 21vw, 280px); height: auto;
    opacity: .075; pointer-events: none; user-select: none;
    z-index: 0;
}
.fields__panel > :not(.fields__mark) { position: relative; z-index: 1; }
.fields__panel h2 { color: #fff; }
.fields__panel .eyebrow { color: var(--green-400); }
.fields__panel .eyebrow__num { background: var(--green-500); color: var(--green-900); }
.fields__panel p { margin-top: 14px; color: #b9d5c8; font-size: 15.5px; }


.fields__list {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr));
}

.field-item {
    position: relative;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.field-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--green-100);
}

/* So thu tu mo o goc, lay lai cach danh so tung trang trong ho so nang luc */
.field-item__num {
    position: absolute; top: 16px; right: 18px;
    font-size: 20px; font-weight: 800; line-height: 1;
    /* green-100 tren nen trang chi dat 1.25:1 nen gan nhu khong nhin thay.
       green-500 cho 3.2:1 — doc duoc ma van la chi tiet phu. */
    color: var(--green-500); letter-spacing: .02em;
    transition: color .25s var(--ease);
}
.field-item:hover .field-item__num { color: var(--green-700); }

/* Icon nen xanh dac chu trang thay vi chip xanh nhat mo nhat */
.field-item__icon {
    display: grid; place-items: center;
    width: 42px; height: 42px; margin-bottom: 14px;
    background: var(--green-700); color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(7, 105, 58, .26);
}
.field-item__icon svg { width: 21px; height: 21px; }

.field-item h3 { font-size: 17px; margin-bottom: 6px; padding-right: 30px; }
.field-item p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }

/* ============================================================
   Muc "Chuong trinh dao tao" tren trang chu
   Bo mau tieu de can giua + luoi 6 the giong nhau. Thay bang dau muc lech
   trai va danh sach hang kieu bao chi: so thu tu lon, ten, mo ta, mui ten.
   Khac han khoi the o muc Linh vuc ngay ben tren nen hai muc khong bi lap.
   ============================================================ */
.programs__head {
    display: grid; gap: clamp(16px, 2.4vw, 44px);
    grid-template-columns: minmax(min(100%, 320px), 1fr) minmax(min(100%, 300px), 1fr);
    align-items: end;
    margin-bottom: clamp(26px, 3vw, 40px);
}
.programs__head p { color: var(--muted); margin: 0 0 18px; }
@media (max-width: 820px) {
    .programs__head { grid-template-columns: 1fr; align-items: start; }
}

.programs__list { list-style: none; border-top: 1px solid var(--line); }
.programs__list li { border-bottom: 1px solid var(--line); }

.program-row {
    display: grid; align-items: center;
    grid-template-columns: auto auto minmax(180px, 1fr) minmax(0, 1.5fr) auto;
    gap: clamp(14px, 1.8vw, 28px);
    padding: clamp(16px, 1.7vw, 22px) clamp(10px, 1.2vw, 18px);
    color: inherit;
    transition: background-color .25s var(--ease), padding-left .25s var(--ease);
}
.program-row:hover { background: var(--green-50); padding-left: clamp(16px, 1.8vw, 26px); color: inherit; }

.program-row__num {
    font-size: clamp(20px, 1.8vw, 26px); font-weight: 800; line-height: 1;
    /* So thu tu la cot rieng, dong vai tro dan huong nen can doc ro: 5.2:1 */
    color: var(--green-600); letter-spacing: .01em;
    transition: color .25s var(--ease);
}
.program-row:hover .program-row__num { color: var(--green-800); }

.program-row__icon {
    display: grid; place-items: center; width: 44px; height: 44px;
    border: 1.5px solid var(--line); border-radius: 12px; color: var(--green-700);
    transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.program-row__icon svg { width: 21px; height: 21px; }
.program-row:hover .program-row__icon {
    background: var(--green-700); border-color: var(--green-700); color: #fff;
}

.program-row h3 { font-size: clamp(17px, 1.4vw, 20px); margin: 0; }
.program-row p { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; }

.program-row__go {
    display: grid; place-items: center; width: 38px; height: 38px; flex: none;
    border-radius: 50%; background: var(--green-50); color: var(--green-700);
    transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.program-row__go svg { width: 17px; height: 17px; }
.program-row:hover .program-row__go { background: var(--green-700); color: #fff; transform: translateX(4px); }

@media (max-width: 900px) {
    /* Xep lai: hang tren la so + icon + ten, mo ta xuong dong duoi */
    .program-row {
        grid-template-columns: auto auto 1fr auto;
        grid-template-areas: 'num icon title go' '. . desc desc';
        gap: 12px 14px; padding: 18px 4px;
    }
    .program-row__num  { grid-area: num; }
    .program-row__icon { grid-area: icon; }
    .program-row h3    { grid-area: title; }
    .program-row p     { grid-area: desc; }
    .program-row__go   { grid-area: go; }
    .program-row:hover { padding-left: 4px; }
}
@media (max-width: 420px) {
    .program-row { grid-template-areas: 'num icon title go' 'desc desc desc desc'; }
    .program-row__icon { width: 38px; height: 38px; }
}

/* Quy tac `.cta p` dat mau sang cho chu tren nen xanh dam, nhung the form ben
   trong banner lai co nen trang nen chu bi mo (1.57:1). Tra lai mau chu thuong. */
.cta .form-card p,
.cta .form-card label,
.cta .form-card .alert { color: var(--muted); }
.cta .form-card label { color: var(--ink-soft); }

/* ============================================================
   Can bang mau cho hai muc "Linh vuc hoat dong" va "Chuong trinh dao tao"
   Truoc day moi thanh phan deu nga xanh nen nhin don dieu. Chuyen cac chi
   tiet cau truc (nen, vien) sang trung tinh am va dua so thu tu ve mau dong,
   giu xanh cho icon va trang thai tuong tac.
   ============================================================ */
.fields { background: var(--sand-50); }
.field-item { border-color: var(--line-warm); }
.field-item:hover { border-color: var(--gold-soft); }
.field-item__num { color: var(--bronze); }
.field-item:hover .field-item__num { color: var(--green-700); }

.programs__list { border-top-color: var(--line-warm); }
.programs__list li { border-bottom-color: var(--line-warm); }
.program-row__num { color: var(--bronze); }
.program-row:hover .program-row__num { color: var(--green-700); }
.program-row__icon { border-color: var(--line-warm); }

/* Thẻ <picture> do WebpImageTagHelper sinh ra không được tạo hộp riêng,
   nếu không thì nó sẽ thay <img> làm phần tử con của flex/grid và làm vỡ
   các bố cục dựa vào chiều cao của ảnh. */
picture { display: contents; }

/* Ảnh đại diện dự phòng khi nhân sự chưa có ảnh chân dung.
   Hiện chữ cái đầu trên nền xanh thương hiệu thay vì để vỡ ảnh. */
.member__photo--initials,
.modal__initials {
    display: grid; place-items: center;
    background: linear-gradient(150deg, var(--green-600), var(--green-800));
    color: #fff; font-weight: 800; letter-spacing: .02em;
    user-select: none;
}
.member__photo--initials { font-size: 40px; }
.modal__initials {
    width: 108px; height: 108px; flex: none;
    border-radius: 50%; border: 3px solid var(--green-600);
    font-size: 34px;
}
@media (max-width: 420px) {
    .member__photo--initials { font-size: 34px; }
    .modal__initials { width: 88px; height: 88px; font-size: 28px; }
}