/* =========================================================================
   PAGES.CSS — chỉ các trang con nạp file này (index.html không cần)
   Nạp SAU style.css nên mọi rule ở đây đè lên rule chung.
   Tái dùng tối đa token và class có sẵn: .container, .btn, .section-padding,
   .divider, .link-arrow… Chỉ khai thêm những khối mà trang chủ không có.
   ========================================================================= */

/* --- Hero của trang con -------------------------------------------------
   Cùng một bộ khung cho cả 5 trang, khác nhau ở ảnh nền và biến thể màu:
   .ph-light  nền kem, chữ đậm (Giới thiệu, Giải pháp, Năng lực, Liên hệ)
   .ph-dark   nền ảnh tối, chữ trắng (Tin tức) */
/* Khuôn khổ lấy đúng theo .hero của trang chủ: min-height 650px, nội dung
   canh giữa theo chiều dọc, padding-top bằng chiều cao thật của header.
   Trước đây hero trang con chỉ cao theo lượng chữ nên mỗi trang một chiều cao
   (Giới thiệu 350px, Năng lực 485px) và đều thấp hơn hero trang chủ. */
.page-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--hero-min);   /* token khai trong style.css, xem chú thích ở đó */
    padding: var(--header-h) 0 0;
    overflow: hidden;
    background: var(--bg-cream);
}
/* .container là con của flex nên phải ép full width, nếu không nó co lại
   bằng nội dung và lề trái/phải lệch khỏi các section bên dưới */
.page-hero .container { position: relative; z-index: 2; width: 100%; }
.page-hero-bg { position: absolute; inset: 0; z-index: 0; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
/* Lớp phủ giữ chữ đọc được — cùng nguyên tắc với Hero trang chủ (mục 9) */
.page-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
        rgba(248, 247, 242, 0.97) 0%,
        rgba(248, 247, 242, 0.93) 40%,
        rgba(248, 247, 242, 0.45) 62%,
        rgba(248, 247, 242, 0.08) 100%);
}
.page-hero.ph-dark { background: var(--primary-dark); }
.page-hero.ph-dark .page-hero-bg::after {
    background: linear-gradient(to right,
        rgba(1, 39, 20, 0.94) 0%,
        rgba(1, 39, 20, 0.86) 45%,
        rgba(1, 39, 20, 0.55) 75%,
        rgba(1, 39, 20, 0.35) 100%);
}
.page-hero.ph-dark .page-title,
.page-hero.ph-dark .page-lead { color: var(--white); }

.page-hero-inner { max-width: 620px; }
.breadcrumb { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; font-size: 0.8rem; color: var(--text-gray); }
.breadcrumb a:hover { color: var(--primary-dark); }
.breadcrumb span[aria-hidden] { opacity: 0.5; }
.page-hero.ph-dark .breadcrumb { color: rgba(255, 255, 255, 0.7); }

.eyebrow {
    display: block;
    margin-bottom: 14px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}
.page-title { font-size: 2.9rem; line-height: 1.12; letter-spacing: -0.025em; }
.page-title .t2 { display: block; color: var(--accent); }
.page-lead { margin-top: 22px; font-size: 1.02rem; color: var(--text-gray); }
.page-hero .divider { margin: 20px 0; }
.hero-actions { display: flex; align-items: center; gap: 16px; margin-top: 32px; flex-wrap: wrap; }

/* Nút tải tài liệu: chữ + icon mũi tên xuống */
.btn-download { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 700; }
.btn-download svg { width: 16px; height: 16px; }

/* Hai lớp tiện ích thay cho style="padding-top" viết trực tiếp trong HTML */
.pt-0 { padding-top: 0; }
.pt-48 { padding-top: 48px; }

/* --- Đầu mỗi khối ------------------------------------------------------- */
.section-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.section-head .section-title { margin-bottom: 12px; }
.section-head p { color: var(--text-gray); }
.section-head.left { margin-left: 0; text-align: left; }

/* --- Khối 2 cột ảnh + chữ ---------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split-media img { width: 100%; border-radius: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); }
.split-body p + p { margin-top: 16px; }
.split-body p { color: var(--text-gray); }
.split-body .btn { margin-top: 28px; }

/* --- Tầm nhìn / Sứ mệnh ------------------------------------------------- */
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vm-card { padding: 40px; border-radius: 16px; }
.vm-card.dark { background: var(--primary-dark); color: var(--white); }
.vm-card.light { background: var(--bg-cream); border: 1px solid #ececE4; }
.vm-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 22px;
    background: var(--white);
    border-radius: 50%;
}
.vm-icon svg { width: 28px; height: 28px; fill: var(--primary-dark); }
.vm-card h3 { font-size: var(--type-card); margin-bottom: 16px; }
.vm-card p { font-size: 0.95rem; line-height: 1.7; }
.vm-card.dark p { color: rgba(255, 255, 255, 0.82); }
.vm-card.light p { color: var(--text-gray); }
.vm-card p + p { margin-top: 14px; }

/* --- Giá trị cốt lõi: 6 ô có vạch chia dọc ------------------------------ */
.values-row { display: grid; grid-template-columns: repeat(6, 1fr); }
.value-item { padding: 0 18px; text-align: center; }
.value-item + .value-item { border-left: 1px solid #e6e6de; }
.value-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border: 1px solid var(--accent);
    border-radius: 50%;
}
.value-ring svg { width: 30px; height: 30px; fill: var(--primary-dark); }
.value-item h3 { font-size: 0.98rem; margin-bottom: 10px; }
.value-item p { font-size: 0.85rem; color: var(--text-gray); line-height: 1.55; }

/* --- Sơ đồ hub 6 nhánh -------------------------------------------------
   Không tái dùng .eco-diagram của trang chủ vì sơ đồ đó chỉ có 4 nhánh và
   tọa độ neo theo trục ngang/dọc. Ở đây 6 nhánh chia đều 60° nên dùng phép
   quay: mỗi nhánh quay ra rồi quay ngược lại đúng bằng thế để chữ vẫn ngang. */
.hub {
    --hub-r: 150px;
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1;
    margin: 0 auto;
}
.hub-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 148px; height: 148px;
    background: var(--white);
    border: 1px solid #e6e6de;
    border-radius: 50%;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    z-index: 2;
}
/* 63% chu khong phai 74%: logo la anh DOC (1684x1947). Muon mot hinh chu
   nhat nam gon trong hinh tron thi duong cheo cua no phai <= duong kinh,
   voi ty le nay ra toi da ~65% duong kinh. De 74% thi cach mep tren chi con
   11px, ma o do be rong vong tron chi 78px trong khi logo rong 108px -> 2 goc
   tren cua logo tho ra ngoai vong tron 15px moi ben. Trang chu da chot 65%
   vi dung ly do nay (xem muc 12 AGENTS.md). */
.hub-center img { width: 63%; }
.hub-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--hub-r) * 2);
    height: calc(var(--hub-r) * 2);
    border: 1px dashed #c9c9c9;
    border-radius: 50%;
}
.hub-node {
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    transform: rotate(var(--a)) translate(var(--hub-r)) rotate(calc(var(--a) * -1));
}
/* Góc của từng nhánh. Trước đây đặt bằng style="--a: ..." ngay trong HTML,
   nhưng trình kiểm tra HTML báo lỗi mỗi thuộc tính style là một cảnh báo
   (6 nhánh = 6 cảnh báo mỗi trang), nên chuyển hết vào đây. */
.hub-node-1 { --a: -90deg; }
.hub-node-2 { --a: -30deg; }
.hub-node-3 { --a: 30deg; }
.hub-node-4 { --a: 90deg; }
.hub-node-5 { --a: 150deg; }
.hub-node-6 { --a: 210deg; }
.hub-node-inner {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 132px;
    text-align: center;
}
.hub-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    background: var(--white);
    border: 1px solid #e6e6de;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.hub-icon svg { width: 26px; height: 26px; fill: var(--primary-dark); }
.hub-node span { font-size: 0.8rem; font-weight: 700; line-height: 1.35; }

/* --- Thẻ có số 01..05 + danh sách tick --------------------------------- */
.num-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.num-card {
    display: flex;
    flex-direction: column;
    padding: 26px 22px;
    background: var(--white);
    border: 1px solid #ececE4;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.num-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); }
.num-card .num-ico {
    display: flex; align-items: center; justify-content: center;
    width: 58px; height: 58px; margin-bottom: 20px;
    background: var(--bg-cream); border-radius: 50%;
}
.num-card .num-ico svg { width: 26px; height: 26px; fill: var(--primary-dark); }
.num-card .num { font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--primary-dark); }
.num-card.alt .num { color: var(--accent); }
.num-card h3 { margin: 10px 0 12px; font-size: 1.02rem; line-height: 1.35; }
.num-card > p { font-size: 0.85rem; color: var(--text-gray); line-height: 1.6; }
.tick-list { margin: 18px 0 0; padding: 0; }
.tick-list li {
    position: relative;
    margin-bottom: 9px;
    padding-left: 22px;
    font-size: 0.82rem;
    color: var(--text-dark);
}
.tick-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 4px;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--primary-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.num-card.alt .tick-list li::before { background-color: var(--accent); }
.num-card .link-arrow { margin-top: auto; padding-top: 18px; }

/* --- Dòng quy trình có mũi tên nối ------------------------------------- */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.flow-step { position: relative; padding: 0 14px; text-align: center; }
/* Mũi tên vẽ bằng ::after của ô trước, ô cuối không có */
.flow-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 34px;
    left: calc(50% + 46px);
    width: calc(100% - 92px);
    border-top: 1px dashed #b9b9b0;
}
.flow-ico {
    position: relative;
    z-index: 1;
    display: flex; align-items: center; justify-content: center;
    width: 68px; height: 68px; margin: 0 auto 18px;
    background: var(--primary-dark);
    border-radius: 50%;
}
.flow-ico svg { width: 30px; height: 30px; fill: var(--white); }
.flow-step.pale .flow-ico { background: #e8ece5; }
.flow-step.pale .flow-ico svg { fill: var(--primary-dark); }
.flow-num { display: block; font-size: 0.85rem; font-weight: 800; color: var(--accent); }
.flow-step h3 { margin: 6px 0 8px; font-size: 0.98rem; line-height: 1.35; }
.flow-step p { font-size: 0.82rem; color: var(--text-gray); line-height: 1.55; }

/* --- Thẻ bài toán (4 ô) ------------------------------------------------ */
.issue-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.issue-card {
    display: flex; flex-direction: column;
    padding: 30px 26px;
    background: var(--white);
    border: 1px solid #ececE4;
    border-radius: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.issue-card:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(0,0,0,0.10); }
.issue-ico {
    display: flex; align-items: center; justify-content: center;
    width: 62px; height: 62px; margin-bottom: 24px;
    background: var(--primary-dark); border-radius: 50%;
}
.issue-ico svg { width: 28px; height: 28px; fill: var(--white); }
.issue-card.pale .issue-ico { background: #e8ece5; }
.issue-card.pale .issue-ico svg { fill: var(--primary-dark); }
.issue-card h3 { font-size: 1.05rem; line-height: 1.35; margin-bottom: 14px; }
.issue-card p { font-size: 0.85rem; color: var(--text-gray); line-height: 1.6; }
.issue-card .link-arrow { margin-top: auto; padding-top: 20px; }

/* --- Thẻ dự án / thương hiệu tiêu biểu --------------------------------- */
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.proj-card {
    display: flex; flex-direction: column;
    overflow: hidden;
    background: var(--white);
    border: 1px solid #ececE4;
    border-radius: 16px;
}
.proj-cover { position: relative; height: 190px; }
.proj-cover img { width: 100%; height: 100%; object-fit: cover; }
.proj-cover figcaption {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 26px;
    color: var(--white);
    background: linear-gradient(to right, rgba(1,39,20,0.86) 0%, rgba(1,39,20,0.45) 70%, rgba(1,39,20,0.2) 100%);
}
.proj-cover h3 { font-size: 1.9rem; letter-spacing: 1px; }
.proj-cover span { font-size: 0.75rem; letter-spacing: 0.16em; opacity: 0.85; }
.proj-body { display: flex; flex-direction: column; flex-grow: 1; padding: 24px; }
.proj-body .tick-list { margin-top: 0; }
.proj-body .link-arrow { margin-top: auto; padding-top: 16px; }
.proj-card.soon .proj-cover figcaption { background: linear-gradient(to right, rgba(248,247,242,0.92), rgba(248,247,242,0.75)); color: var(--text-dark); }
.proj-card.soon .proj-body p { font-size: 0.88rem; color: var(--text-gray); }

/* --- Dải số liệu trên nền tối ------------------------------------------ */
.stats-band { position: relative; overflow: hidden; padding: 54px 0; background: var(--primary-dark); }
.stats-band-bg { position: absolute; inset: 0; opacity: 0.22; }
.stats-band-bg img { width: 100%; height: 100%; object-fit: cover; }
.stats-band .container { position: relative; z-index: 1; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats-cell { display: flex; align-items: flex-start; gap: 16px; padding: 0 24px; color: var(--white); }
.stats-cell + .stats-cell { border-left: 1px solid rgba(255, 255, 255, 0.18); }
.stats-cell svg { width: 34px; height: 34px; fill: rgba(255, 255, 255, 0.85); flex-shrink: 0; }
.stats-cell b { display: block; font-size: 2.1rem; line-height: 1.1; }
.stats-cell span { font-size: 0.82rem; color: rgba(255, 255, 255, 0.78); }

/* --- Dải kêu gọi hành động --------------------------------------------- */
.cta-band {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 30px;
    align-items: center;
    overflow: hidden;
    padding: 46px 48px;
    border-radius: 16px;
    background: var(--primary-dark);
}
.cta-band.pale { background: var(--bg-cream); border: 1px solid #ececE4; }
.cta-band-bg { position: absolute; inset: 0; z-index: 0; }
.cta-band-bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band-bg::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(1,39,20,0.93) 0%, rgba(1,39,20,0.8) 45%, rgba(1,39,20,0.35) 100%);
}
.cta-band.pale .cta-band-bg::after {
    background: linear-gradient(to right, rgba(248,247,242,0.96) 0%, rgba(248,247,242,0.85) 45%, rgba(248,247,242,0.3) 100%);
}
/* :not(.cta-band-bg) là bắt buộc — thiếu nó thì rule này đè position:absolute
   của lớp ảnh nền, ảnh thành một ô của lưới và đẩy khối cao gấp 3 lần. */
.cta-band > *:not(.cta-band-bg) { position: relative; z-index: 1; }
.cta-band h2 { font-size: var(--type-card); color: var(--white); }
.cta-band p { margin-top: 12px; font-size: 0.92rem; color: rgba(255, 255, 255, 0.8); }
.cta-band.pale h2 { color: var(--text-dark); }
.cta-band.pale p { color: var(--text-gray); }
.cta-actions { display: flex; gap: 14px; justify-content: flex-end; flex-wrap: wrap; }
.btn-accent { background: var(--accent); border: 1px solid var(--accent); color: var(--white); }
.btn-accent:hover { background: var(--white); color: var(--primary-dark); }
.btn-ghost { border: 1px solid rgba(255, 255, 255, 0.7); color: var(--white); background: transparent; }
.btn-ghost:hover { background: var(--white); color: var(--primary-dark); }

/* --- Tin tức: bộ lọc + tìm kiếm --------------------------------------- */
.news-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid #ececE4; }
.filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-tabs button {
    padding: 18px 14px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-gray);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.filter-tabs button:hover { color: var(--primary-dark); }
.filter-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.news-search { position: relative; flex-shrink: 0; }
.news-search input {
    width: 240px;
    padding: 11px 42px 11px 18px;
    font-family: inherit;
    font-size: 0.85rem;
    background: var(--white);
    border: 1px solid #dcdcd6;
    border-radius: 50px;
}
.news-search input:focus { outline: none; border-color: var(--primary-dark); box-shadow: 0 0 0 3px rgba(51,75,0,0.12); }
.news-search svg { position: absolute; top: 50%; right: 16px; width: 16px; height: 16px; transform: translateY(-50%); fill: var(--text-gray); }

/* Bài nổi bật */
.featured { display: grid; grid-template-columns: 1fr 1.15fr; gap: 0; overflow: hidden; background: var(--bg-cream); border-radius: 16px; }
.featured-body { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.featured-media img { width: 100%; height: 100%; object-fit: cover; }
.badge {
    align-self: flex-start;
    margin-bottom: 22px;
    padding: 6px 12px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--primary-dark);
    border-radius: 4px;
}
.post-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-gray); }
.post-meta .dot { opacity: 0.5; }
.featured-body h2 { font-size: 1.85rem; line-height: 1.25; letter-spacing: -0.01em; }
.featured-body > p { margin: 16px 0 26px; font-size: 0.92rem; color: var(--text-gray); }
.featured-body .btn { align-self: flex-start; }

/* Lưới bài viết */
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.block-head h2 {
    position: relative;
    padding-left: 14px;
    font-size: 1.15rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.block-head h2::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; background: var(--accent); border-radius: 2px; }
.post-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.post-card { display: flex; flex-direction: column; overflow: hidden; background: var(--white); border: 1px solid #ececE4; border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.post-card:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(0,0,0,0.10); }
.post-card > img { width: 100%; height: 150px; object-fit: cover; }
.post-body { display: flex; flex-direction: column; flex-grow: 1; padding: 20px; }
.post-body h3 { font-size: 1rem; line-height: 1.4; margin-bottom: 12px; }
.post-body p { font-size: 0.83rem; color: var(--text-gray); line-height: 1.6; }
.post-body .link-arrow { margin-top: auto; padding-top: 16px; }

/* Dòng đếm kết quả và ô trống của bộ lọc tin tức */
.news-count { margin-bottom: 18px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-gray); }
.news-empty { margin-top: 28px; padding: 26px; font-size: 0.95rem; color: var(--text-gray); text-align: center; background: var(--white); border: 1px dashed #d8d8d0; border-radius: 12px; }

/* Thẻ chủ đề */
.topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.topic-card { position: relative; overflow: hidden; height: 168px; border-radius: 14px; cursor: pointer; transition: transform 0.3s ease; }
.topic-card:hover { transform: translateY(-4px); }
.topic-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.topic-card img { width: 100%; height: 100%; object-fit: cover; }
.topic-card figcaption {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 22px;
    color: var(--white);
    background: linear-gradient(to top, rgba(1,39,20,0.9) 0%, rgba(1,39,20,0.5) 55%, rgba(1,39,20,0.2) 100%);
}
.topic-card svg.topic-ico { width: 26px; height: 26px; margin-bottom: auto; fill: var(--white); }
.topic-card h3 { font-size: 1rem; margin-bottom: 4px; }
.topic-card span { font-size: 0.78rem; opacity: 0.82; }
.topic-plus {
    position: absolute; right: 18px; bottom: 18px;
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border: 1px solid rgba(255,255,255,0.6); border-radius: 50%;
    font-size: 1rem; line-height: 1;
}

/* Đăng ký nhận tin */
.newsletter {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 30px 36px;
    background: var(--bg-cream);
    border: 1px solid #ececE4;
    border-radius: 16px;
}
.newsletter-ico {
    display: flex; align-items: center; justify-content: center;
    width: 58px; height: 58px;
    background: var(--primary-dark); border-radius: 50%;
}
.newsletter-ico svg { width: 26px; height: 26px; fill: var(--white); }
.newsletter h3 { font-size: 1.05rem; margin-bottom: 6px; }
.newsletter p { font-size: 0.85rem; color: var(--text-gray); }
.newsletter form { display: flex; gap: 12px; }
.newsletter input {
    width: 240px;
    padding: 13px 20px;
    font-family: inherit;
    font-size: 0.9rem;
    background: var(--white);
    border: 1px solid #dcdcd6;
    border-radius: 50px;
}
.newsletter input:focus { outline: none; border-color: var(--primary-dark); box-shadow: 0 0 0 3px rgba(51,75,0,0.12); }

/* --- Trang liên hệ ----------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: start; }
.contact-card { padding: 40px; background: var(--white); border: 1px solid #ececE4; border-radius: 16px; }
.contact-card > h2 { font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase; }
.contact-card > p { margin: 10px 0 26px; font-size: 0.9rem; color: var(--text-gray); }
.info-list { display: flex; flex-direction: column; }
.info-row { display: flex; gap: 18px; padding: 22px 0; }
.info-row + .info-row { border-top: 1px solid #ececE4; }
.info-row:first-child { padding-top: 0; }
.info-row:last-child { padding-bottom: 0; }
.info-ico {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; flex-shrink: 0;
    background: var(--primary-dark); border-radius: 50%;
}
.info-ico svg { width: 22px; height: 22px; fill: var(--white); }
.info-row h3 { font-size: 0.95rem; margin-bottom: 6px; }
.info-row p { font-size: 0.9rem; color: var(--text-dark); }
.info-row p.muted { margin-top: 4px; font-size: 0.82rem; color: var(--text-gray); }
.map-wrap { overflow: hidden; border-radius: 16px; border: 1px solid #ececE4; }
.map-wrap iframe { display: block; width: 100%; height: 380px; border: 0; }

/* =========================================================================
   CANH HÀNG BẰNG SUBGRID
   Cùng cách làm với mục 10-11 của style.css. Tiêu đề trong các thẻ này dài
   ngắn khác nhau (ví dụ "Long-term Partnership Management" 2 dòng còn 4 bước
   kia 1 dòng) nên nếu để tự do thì mô tả bên dưới lệch tới 21px và link
   "Tìm hiểu thêm" lệch 5px. Cho mỗi thẻ mượn hệ hàng của lưới cha là mọi
   hàng tự thẳng nhau.

   ⚠️ Số hàng = số con của thẻ × số hàng thẻ. Đổi số cột là phải đổi số hàng,
   xem các khai báo lại trong media query bên dưới.
   ========================================================================= */
.num-grid { grid-template-rows: repeat(6, auto); }   /* icon · số · tiêu đề · mô tả · danh sách · link */
.num-card { display: grid; grid-row: span 6; grid-template-rows: subgrid; }
.num-card .link-arrow { margin-top: 0; }             /* margin-top:auto không còn cần khi đã có hàng riêng */

.flow { grid-template-rows: repeat(4, auto); }        /* icon · số · tiêu đề · mô tả */
.flow-step { display: grid; grid-row: span 4; grid-template-rows: subgrid; }

.issue-grid { grid-template-rows: repeat(4, auto); }  /* icon · tiêu đề · mô tả · link */
.issue-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
.issue-card .link-arrow { margin-top: 0; }

/* =========================================================================
   BẢN ĐIỆN THOẠI / TABLET cho các trang con
   Cùng 3 mốc với style.css: 1279 / 1023 / 767
   ========================================================================= */
@media (max-width: 1279px) {
    /* Chiều cao đã theo token --hero-min nên không cần đặt lại ở đây */
    .page-hero-bg::after {
        background: linear-gradient(to bottom,
            rgba(248, 247, 242, 0.96) 0%,
            rgba(248, 247, 242, 0.9) 50%,
            rgba(248, 247, 242, 0.68) 100%);
    }
    .page-hero.ph-dark .page-hero-bg::after {
        background: linear-gradient(to bottom,
            rgba(1, 39, 20, 0.92) 0%, rgba(1, 39, 20, 0.82) 55%, rgba(1, 39, 20, 0.6) 100%);
    }
    .page-hero-inner { max-width: 100%; }
    /* 3 cot -> 2 hang the -> 6 x 2 = 12 hang (xem quy tac o khoi SUBGRID) */
    .num-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(12, auto); }
    .values-row { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
    /* Vạch chia dọc chỉ đúng khi 6 ô nằm một hàng; về 3 cột thì ô đầu mỗi
       hàng không được có vạch bên trái */
    .value-item:nth-child(3n + 1) { border-left: 0; }
    .post-grid { grid-template-columns: repeat(2, 1fr); }
    .topic-grid { grid-template-columns: repeat(2, 1fr); }
    .issue-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(8, auto); }
    .stats-row { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
    .stats-cell:nth-child(3) { border-left: 0; }
}

@media (max-width: 1023px) {
    .page-title { font-size: 2.3rem; }
    .split { grid-template-columns: 1fr; gap: 36px; }
    .vm-grid { grid-template-columns: 1fr; }
    .num-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(18, auto); }
    .proj-grid { grid-template-columns: 1fr; }
    .featured { grid-template-columns: 1fr; }
    .featured-media { order: -1; }
    .featured-media img { height: 280px; }
    .contact-grid { grid-template-columns: 1fr; }
    /* Ve nhieu hang thi canh hang ngang khong con y nghia, bo subgrid.
       Phai tra grid-row: auto, neu khong span 4 cua desktop van con hieu luc. */
    .flow { grid-template-columns: repeat(3, 1fr); grid-template-rows: none; row-gap: 36px; }
    .flow-step { display: block; grid-row: auto; }
    /* Về nhiều hàng thì đường nối ngang không còn đúng, bỏ hẳn */
    .flow-step:not(:last-child)::after { display: none; }
    .cta-band { grid-template-columns: 1fr; padding: 34px 28px; }
    .cta-actions { justify-content: flex-start; }
    .newsletter { grid-template-columns: auto 1fr; }
    .newsletter form { grid-column: 1 / -1; }
    .newsletter input { width: 100%; }
    .news-bar { flex-direction: column; align-items: stretch; }
    .news-search input { width: 100%; }
}

@media (max-width: 767px) {
    .page-hero { padding: calc(var(--header-h) + 36px) 0 40px; }
    .page-title { font-size: 1.9rem; }
    .page-lead { font-size: 0.95rem; }
    .hero-actions .btn { flex: 1 1 100%; }
    .num-grid,
    .issue-grid,
    .post-grid,
    .topic-grid,
    .stats-row { grid-template-columns: 1fr; }
    .num-grid, .issue-grid { grid-template-rows: none; }
    .num-card, .issue-card { display: flex; flex-direction: column; grid-row: auto; }
    .num-card .link-arrow, .issue-card .link-arrow { margin-top: auto; }
    .stats-cell + .stats-cell { border-left: 0; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 24px; }
    .values-row { grid-template-columns: repeat(2, 1fr); }
    .value-item { border-left: 0 !important; }
    .flow { grid-template-columns: repeat(2, 1fr); }
    .vm-card, .contact-card, .featured-body { padding: 26px 22px; }
    .hub { --hub-r: 116px; max-width: 330px; }
    .hub-center { width: 104px; height: 104px; }
    .hub-node-inner { width: 104px; }
    .hub-node span { font-size: 0.72rem; }
    .hub-icon { width: 46px; height: 46px; }
    .newsletter { grid-template-columns: 1fr; text-align: left; }
    .newsletter form { flex-direction: column; }
    .newsletter form .btn { width: 100%; }
    .filter-tabs button { padding: 14px 10px; }
    .map-wrap iframe { height: 280px; }
}