/* vn-section-head — Gallery numbered headers + Business icon headers
   Source: Rest of pages/Responsive/Gallery (.sec-head) + Down to business (.b-head). */

.vn-shead {
    display: flex;
    align-items: center;
    max-width: 1924px;
    margin: 0 auto;
    padding: min(1.04vw, 20px) var(--vn-shead-pr, 24px) min(2.03vw, 39px) var(--vn-shead-pl, min(5.03vw, 96.5px));
    font-family: var(--vn-font-body);
    color: var(--vn-navy);
}

.vn-shead__badge {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: min(5.3vw, 101.5px);
    height: min(5.3vw, 101.5px);
    border-radius: 50%;
    background-color: var(--vn-navy-deep);
    color: var(--vn-white);
}

.vn-shead__num {
    font-family: var(--vn-font-display);
    font-size: min(3.7vw, 71px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
    padding-bottom: 0.06em;
}

.vn-shead .vn-shead__title {
    margin: 0 0 0 min(1.3vw, 25px);
    font-family: var(--vn-font-display);
    font-size: min(3vw, 57.5px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--vn-navy);
}

.vn-shead__rule {
    flex: none;
    width: 2px;
    height: min(4.06vw, 78px);
    margin: 0 min(3.3vw, 64px) 0 min(1.2vw, 23px);
    background-color: #7D92B2;
}

.vn-shead .vn-shead__note {
    max-width: min(42.6vw, 817px);
    margin: 0;
    font-size: min(1.76vw, 33.84px);
    font-weight: 500;
    line-height: 1.3;
}

/* ── Icon layout (Business) ── */

.vn-shead-layout-icon .vn-shead {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: min(1.46vw, 28px);
    padding: 0;
}

.vn-shead-layout-icon .vn-shead__badge {
    grid-row: 1 / span 2;
    width: min(4.58vw, 88px);
    height: min(4.58vw, 88px);
    background-color: #053475;
}

.vn-shead-layout-icon .vn-shead__icon {
    width: 62%;
    color: inherit;
}

.vn-shead__icon svg { display: block; width: 100%; height: auto; fill: currentColor; }
.vn-shead__icon i { font-size: min(2.8vw, 54px); }

.vn-shead-layout-icon .vn-shead .vn-shead__title {
    margin: 0;
    font-size: min(2.3vw, 44.19px);
    line-height: 1.142;
    letter-spacing: 0;
}

.vn-shead-layout-icon .vn-shead .vn-shead__note {
    max-width: none;
    margin-top: min(0.3vw, 6px);
    font-size: min(1.46vw, 28.09px);
    font-weight: 400;
}

@media (max-width: 1024px) {
    .vn-shead {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 12px 18px;
        padding: 44px 32px 24px;
    }

    .vn-shead__badge { width: 64px; height: 64px; }
    .vn-shead__num { font-size: 2.6rem; }
    .vn-shead .vn-shead__title { margin: 0; font-size: clamp(1.8rem, 4.6vw, 2.6rem); line-height: 1.15; }
    .vn-shead__rule { display: none; }
    .vn-shead .vn-shead__note { grid-column: 1 / -1; max-width: none; font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.4; }
    .vn-shead__note br { display: none; }

    .vn-shead-layout-icon .vn-shead { gap: 4px 16px; padding: 0 0 26px; }
    .vn-shead-layout-icon .vn-shead__badge { grid-row: 1 / span 2; width: 64px; height: 64px; }
    .vn-shead-layout-icon .vn-shead .vn-shead__title { font-size: clamp(1.8rem, 4.4vw, 2.5rem); line-height: 1.15; }
    .vn-shead-layout-icon .vn-shead .vn-shead__note { grid-column: 2; margin-top: 0; font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.35; }
}

@media (max-width: 767px) {
    .vn-shead { column-gap: 14px; padding: 36px 20px 20px; }
    .vn-shead__badge { width: 52px; height: 52px; }
    .vn-shead__num { font-size: 2.1rem; }
    .vn-shead-layout-icon .vn-shead { padding: 0 0 22px; }
    .vn-shead-layout-icon .vn-shead__badge { width: 52px; height: 52px; }
}