/* Home page (templates/pages/home.php), layout reviewed by marcom in October 2026. */

.home-page {
    /* Colours of the previous home page (style.css), kept after the October 2026 redesign. */
    --home-ink: #08162d;
    --home-muted: #66758b;
    --home-line: #e2e8f0;
    --home-green: #318b78;
    --home-gradient: linear-gradient(90deg, #43b263 0%, #3ba295 25%, #3b7ab5 55%, #7147a7 80%, #814272 100%);
    --home-dark: linear-gradient(100deg, #0a2e2c 0%, #121f41 50%, #3e2450 100%);
    color: var(--home-ink);
}

/* Same 1290px column as the CTA band and footer (cta-banner.css): gutter on the section, column centred. */
/* style.css still orders the previous home sections (some class names are shared); follow the template order instead. */
.bambu-page .home-sections-stack > .home-hero,
.bambu-page .home-sections-stack > .home-section {
    order: 0;
}

.home-page .home-hero,
.home-page .home-section {
    align-self: stretch;
    width: 100%;
    min-width: 0;
    padding-inline: var(--bambu-container-gutter, 24px);
    box-sizing: border-box;
}

.home-page .home-container,
.home-page .home-hero-inner {
    width: auto;
    max-width: 1290px;
    margin-inline: auto;
    padding-inline: 0;
    box-sizing: border-box;
}

/* ---------- Hero ---------- */
.home-hero {
    position: relative;
    overflow: hidden;
    background:
        var(--home-hero-art, radial-gradient(circle at 78% 42%, rgba(76, 124, 178, 0.24) 0%, rgba(5, 11, 28, 0) 55%)) right bottom / cover no-repeat,
        #050b1c;
    color: #fff;
}

/* Tín hiệu chạy dọc các đường network: một lớp ảnh nền tăng sáng phủ lên trên, chỉ lộ ra theo dải mask di chuyển,
   nên đường và nút sáng rực lên khi dải đi qua còn nền tối vẫn tối. Hai dải lệch nhịp cho giống truyền dữ liệu. */
/* Chỉ chạy ở desktop; tablet và mobile giữ ảnh nền tĩnh như cũ. */
@media (min-width: 1024px) {
    .home-hero::before,
    .home-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--home-hero-art, none) right bottom / cover no-repeat;
        pointer-events: none;
        /* Tương phản cao ép nền navy về đen, screen làm phần đen không cộng thêm gì: chỉ đường và nút sáng lên. */
        mix-blend-mode: screen;
        -webkit-mask-repeat: repeat-x;
        mask-repeat: repeat-x;
    }

    .home-hero::before {
        filter: contrast(3) brightness(1.5) saturate(1.6);
        -webkit-mask-image: linear-gradient(115deg, transparent 0%, transparent 36%, #000 47%, #000 53%, transparent 64%, transparent 100%);
        mask-image: linear-gradient(115deg, transparent 0%, transparent 36%, #000 47%, #000 53%, transparent 64%, transparent 100%);
        -webkit-mask-size: 70% 100%;
        mask-size: 70% 100%;
        animation: home-hero-signal 9s linear infinite;
    }

    .home-hero::after {
        filter: contrast(3) brightness(1.3) saturate(1.4) hue-rotate(35deg);
        -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 44%, #000 50%, transparent 56%, transparent 100%);
        mask-image: linear-gradient(100deg, transparent 0%, transparent 44%, #000 50%, transparent 56%, transparent 100%);
        -webkit-mask-size: 45% 100%;
        mask-size: 45% 100%;
        animation: home-hero-signal-alt 13s linear infinite;
        opacity: 0.8;
    }

    .home-hero-inner {
        position: relative;
        z-index: 1;
    }
}

/* Vòng lặp liền mạch: vị trí % dịch (100% − kích thước dải) × p, nên p được chọn để đi đúng 3 dải (70% → 700%)
   hoặc 11 dải (45% → 900%). */
@keyframes home-hero-signal {
    from {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }

    to {
        -webkit-mask-position: 700% 0;
        mask-position: 700% 0;
    }
}

@keyframes home-hero-signal-alt {
    from {
        -webkit-mask-position: 900% 0;
        mask-position: 900% 0;
    }

    to {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero::before,
    .home-hero::after {
        display: none;
    }
}

.home-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: center;
    gap: 36px;
    padding-block: 72px 64px;
}

/* With a video the right column gets more room (the map needs less). */
.home-hero-inner:has(.home-hero-media.has-video) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr);
    gap: 56px;
    /* Twice the gap without shrinking the video: the hero grows 28px into the right gutter (keeps 16px of it). */
    max-width: 1318px;
    margin-left: max(0px, calc((100% - 1290px) / 2));
    margin-right: calc(-1 * min(28px, max(var(--bambu-container-gutter, 24px) - 16px, 0px)));
}

.home-hero-text {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.home-hero-title {
    margin: 0;
    color: #fff;
    font-size: clamp(40px, 4.4vw, 64px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.home-hero-accent {
    background: var(--home-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.home-hero-lead {
    max-width: 41rem;
    text-wrap: balance;
    margin: 20px 0 0;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
}

.home-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
    padding: 14px 26px;
    border-radius: 9999px;
    background: linear-gradient(90deg, #43b263 0%, #3ba295 25%, #3786ce 50%, #7147a7 75%, #814272 100%);
    box-shadow: 0 4px 6px -4px rgba(20, 184, 166, 0.1), 0 10px 15px -3px rgba(20, 184, 166, 0.1);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 160ms ease-out, filter 160ms ease-out;
}

.home-hero-cta:hover,
.home-hero-cta:focus-visible {
    color: #fff;
    filter: brightness(1.06);
    transform: translateY(-1px);
}

/* Số liệu trên hero (design Marcom 10/2026): khung kính mờ chung, vạch gradient brand ở mép trên,
   nhãn trắng đậm, số gradient trắng → màu riêng của từng số liệu, chia cột bằng đường kẻ mảnh. */
.home-metrics {
    container-type: inline-size; /* Số co giãn theo bề rộng thật của khung. */
    display: grid;
    grid-template-columns: repeat(var(--home-metric-count, 3), minmax(0, 1fr));
    margin: 32px 0 0;
    padding: 0;
    overflow: hidden;
    border-radius: 18px;
    background:
        linear-gradient(90deg, #43b263 0%, #3ba295 28%, #3b7ab5 56%, #7147a7 80%, #814272 100%) top / 100% 2px no-repeat,
        rgba(7, 17, 39, 0.2);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow:
        inset 0 0 0 1px rgba(242, 246, 250, 0.14),
        0 18px 40px -18px rgba(0, 0, 0, 0.65);
}

.home-metric {
    --m-tint: #43b263;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: clamp(16px, 4cqi, 24px) clamp(14px, 3.6cqi, 24px) clamp(16px, 3.6cqi, 22px);
    text-align: left;
}

.home-metric + .home-metric {
    border-left: 1px solid rgba(242, 246, 250, 0.12);
}

/* Partners = xanh lá, Top experts = xanh dương, Startups = tím sáng. */
.home-metric:nth-child(3n+2) {
    --m-tint: #3b7ab5;
}

.home-metric:nth-child(3n+3) {
    --m-tint: #a57fea;
}

.home-metric dt {
    order: 1;
    margin: 0 0 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home-metric dd {
    margin: 0;
}

/* Dấu "+" lấy màu của số liệu; chữ số chạy gradient trắng → màu đó. */
.home-metric-value {
    order: 2;
    color: var(--m-tint);
    font-size: clamp(26px, 7.2cqi, 48px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.home-metric-value span {
    background: linear-gradient(90deg, #fff 0%, var(--m-tint) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.home-metric .home-metric-desc {
    order: 3;
    /* Three lines at most. */
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin-top: 12px;
    color: #c3cfdd;
    font-size: clamp(13px, 2.4cqi, 14px);
    line-height: 1.55;
}

.home-hero-media {
    position: relative;
    aspect-ratio: 16 / 10;
    min-width: 0;
}

.home-hero-media img,
.home-hero-media video,
.home-hero-media iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* The map melts into the navy; a video sits in a framed panel. */
.home-hero-media:not(.has-video) img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 80%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 80%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
    mask-composite: intersect;
}

.home-hero-media.has-video {
    /* 16:9 like the video; stays inside the 1290px column so the hero is centred like the sections below. */
    aspect-ratio: 16 / 9;
    /* Màu khung hình đầu của video: lúc video đang tải khung không bị trắng hay hiện ảnh khác. */
    background: #071124;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8);
}

/* ---------- Sections ---------- */
/* Tighter than the old 56/64 (marcom design review, 30/10/2026). */
.home-section {
    padding-block: 44px 52px;
    background: #fff;
}

.home-section.is-dark {
    background: var(--home-dark);
    color: #fff;
}

.home-section.is-tinted {
    background: linear-gradient(100deg, #e6f6ee 0%, #e8effa 50%, #f0e8f4 100%);
}

.home-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.home-section-titles {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.home-eyebrow {
    margin: 0;
    color: var(--home-green);
    font-size: 16px;
    line-height: 1.4;
}

.home-eyebrow.is-caps {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.is-dark .home-eyebrow {
    color: #7ed9b8;
}

.home-section-title {
    margin: 0;
    color: var(--home-ink);
    font-size: clamp(28px, 2.8vw, 40px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.is-dark .home-section-title {
    color: #fff;
}

.home-more-link {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    color: var(--home-ink);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.is-dark .home-more-link {
    color: #fff;
}

.is-tinted .home-more-link {
    color: #1e7a50;
}

.home-more-link:hover,
.home-more-link:focus-visible {
    color: #0f766e;
}

.is-dark .home-more-link:hover,
.is-dark .home-more-link:focus-visible {
    color: #7ed9b8;
}

.home-link-arrow {
    transition: transform 160ms ease-out;
}

.home-more-link:hover .home-link-arrow,
.home-service:hover .home-link-arrow {
    transform: translate(2px, -2px);
}

/* ---------- Cards ---------- */
.home-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.home-card-grid.is-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.home-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--home-line);
    border-radius: 14px;
    background: #fff;
    transition: box-shadow 200ms ease-out, transform 200ms ease-out;
}

.home-card:hover {
    box-shadow: 0 14px 30px -20px rgba(11, 18, 32, 0.35);
    transform: translateY(-2px);
}

.home-card.is-dark {
    /* Same corners as the light cards: no light outline, a soft shadow instead. */
    border-color: transparent;
    background: #0a1530;
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.6);
}

.home-card-media {
    position: relative;
    display: block;
    height: 160px;
    overflow: hidden;
    background: #f2f4f7;
}

.home-card.is-dark .home-card-media {
    background: #0b1a3a;
}

.home-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Logos (listing-covers.css picks the panel colour): whole logo, not cropped. */
.home-card-media.is-logo img,
.home-card-media.is-logo-light img {
    width: auto;
    max-width: 62%;
    height: auto;
    max-height: 64%;
    object-fit: contain;
}

.home-card-media.is-logo,
.home-card-media.is-logo-light,
.home-card-media.is-none {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(67, 178, 99, 0.12), transparent 60%),
        radial-gradient(120% 90% at 100% 100%, rgba(59, 122, 181, 0.12), transparent 60%),
        #f6f8fb;
}

.home-card-media.is-logo-light {
    background: linear-gradient(135deg, #0f1b2d 0%, #13324a 100%);
}

.home-card-badge,
.home-news-badge {
    position: absolute;
    left: 12px;
    bottom: 10px;
    padding: 3px 10px;
    border-radius: 9999px;
    background: #11b27c;
    color: #06231b;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
}

.home-card-badge.is-need {
    background: #37ceed;
}

.home-news-badge {
    top: 12px;
    bottom: auto;
    color: #fff;
    font-size: 10px;
    letter-spacing: 0.04em;
}

.home-news-badge.is-event { background: #5a4fcf; }
.home-news-badge.is-website { background: #1e7a50; }
.home-news-badge.is-innovation-up { background: #0e6f86; }
.home-news-badge.is-innovation-week { background: #2f5fa5; }

.home-challenge-status {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 9999px;
    background: rgba(7, 17, 39, 0.75);
    color: #e2e8f0;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
}

.home-challenge-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #94a3b8;
}

/* Open: solid green with a live pulse, as on the previous home page (style.css). */
.home-challenge-status.is-open {
    border-color: transparent;
    background: #16a34a;
    color: #fff;
    font-weight: 700;
}

.home-challenge-status.is-open i {
    background: #fff;
    animation: home-status-live 2s ease-out infinite;
}

@keyframes home-status-live {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Closed: the picture sits under the dark card overlay of the previous design. */
.home-card.is-closed .home-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(7, 17, 39, 0.92) 0%, rgba(7, 17, 39, 0.6) 100%);
    pointer-events: none;
}

.home-card.is-closed .home-card-title a {
    color: #cbd5e1;
}

.home-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px 14px;
}

.home-card-title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-card-title a {
    color: var(--home-ink);
    text-decoration: none;
}

.is-dark .home-card-title a {
    color: #fff;
}

.home-card-title a:hover {
    color: #0f766e;
}

.is-dark .home-card-title a:hover {
    color: #7ed9b8;
}

.home-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.home-card-tags span {
    padding: 2px 8px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    line-height: 16px;
}

.is-dark .home-card-tags span {
    background: #e3e7ff;
    color: #2c3266;
}

.is-dark .home-card-tags span.is-org {
    background: #d4fff1;
    color: #0d4a35;
}

.home-card-desc {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--home-muted);
    font-size: 13px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-card-meta {
    margin: 0;
    color: #66758b;
    font-size: 12px;
    line-height: 1.5;
}

.is-dark .home-card-meta {
    color: #a9b1c2;
}

.home-card-action {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    color: var(--home-ink);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.is-dark .home-card-action {
    border-top-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.home-card-action:hover {
    color: #0f766e;
}

/* Label repeated beside the title in the compact mobile rows (hidden elsewhere). */
.home-card-kicker {
    display: none;
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 9999px;
    background: #11b27c;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 15px;
}

.home-card-kicker.is-need { background: #0e7490; }
.home-card-kicker.is-open { background: #16a34a; }
.home-card-kicker.is-closed { background: #475569; }
.home-card-kicker.is-event { background: #5a4fcf; }
.home-card-kicker.is-website { background: #1e7a50; }
.home-card-kicker.is-innovation-up { background: #0e6f86; }
.home-card-kicker.is-innovation-week { background: #2f5fa5; }

/* ---------- Insights: report cards ---------- */
.home-report-cover {
    height: auto;
    /* As in the design: the cover fills the frame (about 414×250 at full width), top of the cover kept. */
    aspect-ratio: 5 / 3;
    background: #e8eef6;
}

.home-report-cover img {
    object-fit: cover;
    object-position: center top;
}

.home-report .home-card-body {
    gap: 8px;
    padding: 20px 22px 22px;
}

.home-report-label {
    margin: 0;
    color: #1e7a5c;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.home-report-title {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
}

.home-report-desc {
    font-size: 14px;
    -webkit-line-clamp: 3;
}

.home-report-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-top: 0;
    font-size: 14px;
    font-weight: 700;
}

/* ---------- Services ---------- */
.home-service {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--home-line);
    border-radius: 14px;
    background: #fff;
    color: var(--home-ink);
    text-decoration: none;
    transition: box-shadow 200ms ease-out, transform 200ms ease-out;
}

.home-service:hover {
    box-shadow: 0 14px 30px -20px rgba(11, 18, 32, 0.35);
    transform: translateY(-2px);
}

.home-service-media {
    display: block;
    height: 150px;
    background: #0b1220;
}

.home-service-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-service-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px 20px;
}

.home-service-index {
    color: var(--home-green);
    font-size: 14px;
    font-weight: 600;
}

.home-service-title {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
}

.home-service-desc {
    color: var(--home-muted);
    font-size: 14px;
    line-height: 1.55;
}

.home-service-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
    font-size: 14px;
    font-weight: 600;
}

/* ---------- Testimonials ---------- */
.home-testimonials-title {
    max-width: 780px;
    margin: 0 auto 32px;
    text-align: center;
    text-wrap: balance;
    color: #fff;
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 600;
    line-height: 1.35;
}

.home-quote {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 26px 28px 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: #091630;
}

/* Desktop: the three cards share two grid rows, so the author blocks have the same height and the quotes start on one line. */
@media (min-width: 641px) {
    .home-section-testimonials .home-card-grid {
        grid-template-rows: auto auto;
    }

    .home-quote {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
        align-content: start;
    }
}

.home-quote-author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* The source photos are only 40×40: replace them with larger photos to keep them sharp at 56px. */
.home-quote-author img {
    flex: none;
    width: 56px;
    height: 56px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    object-fit: cover;
}

.home-quote-author > span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.home-quote-author strong {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.home-quote-author span span {
    color: #b4bccb;
    font-size: 13px;
    line-height: 1.45;
}

.home-quote blockquote {
    margin: 0;
    color: #dce1ea;
    font-size: 16px;
    font-style: normal;
    line-height: 1.65;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .home-card-grid.is-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Laptops: more room for the text column so each metric description fits on two lines. */
@media (max-width: 1320px) {
    .home-hero-inner,
    .home-hero-inner:has(.home-hero-media.has-video) {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
        gap: 28px;
    }

    .home-hero-inner:has(.home-hero-media.has-video) {
        gap: 56px;
    }
}

@media (max-width: 1220px) {
    .home-hero-inner,
    .home-hero-inner:has(.home-hero-media.has-video) {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    }
}

/* The map moves under the text before the metrics get cramped. */
@media (max-width: 1150px) {
    .home-hero-inner:has(.home-hero-media.has-video) {
        margin-right: 0;
    }

    .home-hero-inner,
    .home-hero-inner:has(.home-hero-media.has-video) {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-block: 48px;
    }

    .home-hero-media {
        order: 2;
        width: 100%;
        max-width: 720px;
        justify-self: center;
    }

}

@media (max-width: 960px) {

    .home-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


}

/* Phones: one column, as on the previous home page (stacked cards, metrics one under another). */
@media (max-width: 640px) {
    .home-hero-inner {
        padding-block: 40px 48px;
    }

    .home-hero-title {
        font-size: clamp(40px, 12vw, 52px);
        line-height: 1.1;
        white-space: normal;
    }

    .home-hero-accent {
        display: block;
    }

    .home-hero-lead {
        font-size: 16px;
        text-wrap: pretty;
    }

    .home-hero-cta {
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }

    .home-hero-media {
        display: none;
    }

    /* The video shows under the intro, before the button and the metrics. */
    .home-hero-text {
        display: contents;
    }

    .home-hero-inner {
        gap: 0;
    }

    .home-hero-media.has-video {
        display: block;
        order: 3;
        margin: 24px 0 0;
        border-radius: 12px;
    }

    .home-hero-title { order: 1; }
    .home-hero-lead { order: 2; }
    .home-hero-cta { order: 4; }
    .home-metrics { order: 5; }

    .home-metrics {
        grid-template-columns: 1fr;
        margin-top: 28px;
        border-radius: 16px;
    }

    .home-metric {
        padding: 18px 20px;
    }

    .home-metric + .home-metric {
        border-top: 1px solid rgba(242, 246, 250, 0.12);
        border-left: 0;
    }

    .home-metric dt {
        margin-bottom: 8px;
        font-size: 11px;
    }

    .home-metric-value {
        font-size: 38px;
    }

    .home-metric .home-metric-desc {
        margin-top: 8px;
        font-size: 14px;
    }

    .home-section {
        padding-block: 36px 44px;
    }

    /* Title left, "Explore more" on the same line at the right (option A). */
    .home-section-head {
        align-items: flex-end;
        gap: 12px;
        margin-bottom: 18px;
    }

    .home-section-title {
        font-size: 26px;
    }

    .home-more-link {
        padding: 0 0 4px;
        font-size: 13px;
        font-weight: 600;
    }

    /* Option A (marcom, October 2026): the first card large, the others as compact rows (thumbnail + label, title, date). */
    .home-card-grid,
    .home-card-grid.is-four {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .home-card-grid > .home-card:first-child {
        margin-bottom: 12px;
    }

    .home-card-grid > .home-card:first-child .home-card-media,
    .home-card-grid > .home-card:first-child .home-report-cover {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .home-card-grid > .home-card:first-child .home-card-desc,
    .home-card-grid > .home-card:first-child .home-report-desc {
        display: none;
    }

    .home-card-grid > .home-card + .home-card {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        align-items: start;
        gap: 12px;
        padding: 12px 0;
        overflow: visible;
        border: 0;
        border-top: 1px solid var(--home-line);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .is-dark .home-card-grid > .home-card + .home-card {
        border-top-color: rgba(255, 255, 255, 0.1);
    }

    .home-card-grid > .home-card + .home-card .home-card-media,
    .home-card-grid > .home-card + .home-card .home-report-cover {
        width: 88px;
        height: 88px;
        aspect-ratio: auto;
        border-radius: 10px;
    }

    .home-card-grid > .home-card + .home-card .home-card-badge,
    .home-card-grid > .home-card + .home-card .home-news-badge,
    .home-card-grid > .home-card + .home-card .home-challenge-status,
    .home-card-grid > .home-card + .home-card .home-card-desc,
    .home-card-grid > .home-card + .home-card .home-report-desc,
    .home-card-grid > .home-card + .home-card .home-card-action {
        display: none;
    }

    .home-card-grid > .home-card + .home-card .home-card-body {
        gap: 5px;
        padding: 0;
    }

    .home-card-grid > .home-card + .home-card .home-card-title {
        font-size: 15px;
        line-height: 1.35;
    }

    .home-card-grid > .home-card + .home-card .home-card-kicker {
        display: inline-block;
    }

    /* Rows show the first tag as a plain line under the title (industry, organiser). */
    .home-card-grid > .home-card + .home-card .home-card-tags {
        order: 9;
    }

    .home-card-grid > .home-card + .home-card .home-card-tags span {
        padding: 0;
        background: none;
        color: var(--home-muted);
        font-size: 12px;
    }

    .is-dark .home-card-grid > .home-card + .home-card .home-card-tags span {
        background: none;
        color: #a9b1c2;
    }

    .home-card-grid > .home-card + .home-card .home-card-tags span + span {
        display: none;
    }

    .home-card-grid > .home-card + .home-card .home-report-label {
        font-size: 10px;
    }

    .home-card.is-closed .home-card-media::after {
        border-radius: inherit;
    }

    .home-section-services .home-card-grid,
    .home-section-testimonials .home-card-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .home-service-media {
        height: 180px;
    }

    .home-testimonials-title {
        text-align: left;
    }

    .home-card:hover,
    .home-service:hover {
        transform: none;
    }
}

/* Phones: the artwork sits behind the text, so it is shown fainter at the top. */
@media (max-width: 640px) {
    .home-hero {
        background:
            linear-gradient(180deg, rgba(5, 11, 28, 0.88) 0%, rgba(5, 11, 28, 0.7) 45%, rgba(5, 11, 28, 0.35) 100%),
            var(--home-hero-art, none) 75% bottom / cover no-repeat,
            #050b1c;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-card,
    .home-service,
    .home-hero-cta,
    .home-link-arrow {
        transition: none;
    }

    .home-challenge-status.is-open i {
        animation: none;
    }

    .home-card:hover,
    .home-service:hover,
    .home-hero-cta:hover {
        transform: none;
    }
}

/* Nút loa trên video hero: hiện khi rê chuột (luôn hiện trên màn hình cảm ứng). */
.home-video-sound {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    display: grid;
    width: 46px;
    height: 46px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: rgba(5, 11, 28, 0.6);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transform: translateY(4px);
    backdrop-filter: blur(6px);
    transition: opacity 200ms ease, transform 200ms ease, background-color 200ms ease;
}

.home-hero-media:hover .home-video-sound,
.home-video-sound:focus-visible {
    opacity: 1;
    transform: none;
}

.home-video-sound:hover {
    background: rgba(5, 11, 28, 0.85);
}

.home-video-sound .is-off,
.home-video-sound.is-muted .is-on {
    display: none;
}

.home-video-sound.is-muted .is-off {
    display: block;
}

@media (hover: none) {
    .home-video-sound {
        opacity: 1;
        transform: none;
    }
}

/* Video có logo ở góc dưới phải: nút loa đặt góc dưới trái để không che. */
.home-video-sound {
    right: auto;
    left: 16px;
}

/* Innovation Intelligence: bản đồ Atlas (template-parts/opportunities/atlas.php, biến thể 'home') đặt trong khối nền tối
   giống trang Innovation Hub, bản đồ bên trái, thẻ quốc gia trắng bên phải; sau đó là "Top Pick of the Week". */
.home-page .ii-atlas.is-home {
    --ii-atlas-bg: #050b1c;
    --ii-atlas-ink: #08162d;
    --ii-atlas-muted: #66758b;
    --ii-atlas-soft: #a9b1c2;
    --ii-atlas-green: #48a973;
    --ii-atlas-gradient: linear-gradient(90deg, #48a973 0%, #4c7cb2 50%, #7a4478 100%);
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    background: var(--ii-atlas-bg);
    box-shadow: 0 18px 40px -24px rgba(5, 11, 28, 0.55);
    color: #fff;
}

.home-page .ii-atlas.is-home .ii-atlas-inner {
    width: 100%;
    max-width: none;
}

.home-page .ii-atlas.is-home .ii-atlas-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
}

.home-page .ii-atlas.is-home .ii-atlas-panel {
    padding: 20px;
}

.home-picks-head {
    margin-top: 28px;
}

.home-picks-head .home-section-head {
    margin-bottom: 24px;
}

.home-picks-head .home-section-title {
    font-size: 24px;
    line-height: 1.3;
}

@media (max-width: 1023px) {
    .home-page .ii-atlas.is-home .ii-atlas-grid {
        grid-template-columns: 1fr;
    }

    .home-page .ii-atlas.is-home .ii-atlas-panel {
        padding: 20px;
    }
}

@media (max-width: 767px) {
    .home-page .ii-atlas.is-home {
        padding: 12px;
        border-radius: 16px;
    }

    .home-picks-head {
        margin-top: 32px;
    }

    .home-picks-head .home-section-title {
        font-size: 20px;
    }
}