/* ==========================================================================
   RESPONSIVE
   Desktop reference 1440px → co dần xuống.
   Breakpoints: 1320 · 1200 · 1100 (menu mobile) · 1024 (tablet) · 768 · 600 · 420
   ========================================================================== */

/* ---------- ≤1400: cụm feature About vừa cột chữ ---------- */
@media (max-width: 1400px) {
    .about__features .feature:first-child {
        padding-right: 18px;
    }

    .feature + .feature {
        padding-left: 18px;
    }

    .feature {
        gap: 12px;
    }

    .feature .icon-circle {
        width: 56px;
        height: 56px;
    }

    .feature .icon-circle .icon {
        font-size: 26.5px;
    }

    .feature__title {
        font-size: 15.5px;
    }

    .feature__desc {
        font-size: 14px;
    }
}

/* ---------- ≤1320: desktop nhỏ (1280 / 1366) ---------- */
@media (max-width: 1320px) {
    :root {
        --bleed: 12px;
    }

    .site-navigation {
        margin-left: 40px;
    }

    .menu {
        gap: 32px;
    }

    .header-hotline {
        font-size: 19px;
    }
}

/* ---------- ≤1200 ---------- */
@media (max-width: 1200px) {
    :root {
        --fs-hero: 34px;
        --fs-display: 35.5px;
        --fs-h2: 30px;
        --fs-h2-sm: 26.5px;
        --fs-lead: 18px;
        --fs-body-lg: 16.5px;
    }

    .site-branding img {
        height: 68px;
    }

    .menu {
        gap: 24px;
    }

    .menu a {
        font-size: 16px;
    }

    .hero__content {
        max-width: 560px;
    }

    .hero__overlay {
        background: linear-gradient(90deg,
            rgba(241, 247, 252, 0.92) 0%,
            rgba(241, 247, 252, 0.75) 40%,
            rgba(241, 247, 252, 0) 68%);
    }

    .hero__media img {
        object-position: 30% center;
    }

    .hero-tabs__tab {
        font-size: 16px;
        gap: 14px;
    }

    .about__features {
        width: auto;
        flex-wrap: wrap;
        gap: 16px 28px;
    }

    .about__features .feature:first-child {
        padding-right: 0;
    }

    .feature + .feature {
        padding-left: 0;
        border-left: 0;
    }

    .about__desc {
        font-size: 16.5px;
        line-height: 1.7;
    }

    .solution-item__title {
        font-size: 16.5px;
    }

    .solution-item__desc {
        font-size: 14.5px;
    }

    .solutions__visual {
        width: min(685px, calc(50vw - 20px));
    }

    .cta__box {
        flex-wrap: wrap;
        gap: 18px 0;
        padding: 26px 36px;
    }

    .cta__divider {
        display: none;
    }

    .cta__title {
        margin-right: 40px;
    }

    /* Mũi tên dễ đè lên chữ khi màn hẹp → điều hướng bằng tab & vuốt */
    .hero__arrow {
        display: none;
    }

    .cta__title {
        width: auto;
        font-size: 25px;
    }

    .cta__actions {
        flex-wrap: wrap;
        width: 100%;
        margin-left: 0;
    }

    .cta__phone {
        margin-left: auto;
    }

    .footer-main {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
    }

    .footer-col + .footer-col,
    .footer-col:last-child {
        padding-left: 40px;
        margin-right: 0;
    }

    .footer-brand img {
        width: 300px;
    }

    .layout-sidebar {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 40px;
    }
}

/* ---------- ≤1100: chuyển sang menu mobile ---------- */
@media (max-width: 1100px) {
    .menu-toggle {
        display: inline-grid;
    }

    .site-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin: 0;
        padding: 8px var(--container-gutter) 24px;
        background: var(--color-white);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 18px 30px rgba(0, 45, 85, 0.12);
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
    }

    .site-navigation.is-open {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s;
    }

    .menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .menu > li + li {
        border-top: 1px solid var(--color-border);
    }

    .menu a {
        display: flex;
        min-height: 54px;
        font-size: 16.5px;
    }

    .menu a::after {
        display: none;
    }

    .mobile-nav__extra {
        display: grid;
        gap: 12px;
        margin-top: 16px;
    }

    .mobile-nav__extra .btn .icon {
        font-size: 16.5px;
    }

    .header-hotline {
        font-size: 18px;
    }

    .header-hotline__icon {
        width: 42px;
        height: 42px;
    }

    .solutions__grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 28px;
    }

    .solutions__feature {
        min-height: 0;
        padding-left: var(--bleed);
    }

    .solutions__visual {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-width: 685px;
        height: auto;
        aspect-ratio: 2 / 1;
        margin: 0 auto 4px;
    }
}

/* ---------- ≤1024: tablet ---------- */
@media (max-width: 1024px) {
    :root {
        --container-gutter: 28px;
        --hero-h: 480px;
    }

    .topbar__slogan {
        display: none;
    }

    .hero__controls {
        top: 386px;
    }

    .hero__arrow {
        top: 50%;
        width: 48px;
        height: 48px;
    }

    .hero__arrow--prev {
        left: 12px;
    }

    .hero__arrow--next {
        right: 12px;
    }

    .hero__inner {
        padding-top: 56px;
    }

    .about__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 36px;
        align-items: center;
    }

    .about {
        padding-bottom: 36px;
    }

    .solutions {
        padding: 40px 0 44px;
    }

    .projects {
        padding: 40px 0 44px;
    }

    .projects__grid {
        gap: 16px;
    }

    .project-card .card__body {
        padding: 14px 16px 16px;
    }

    .project-card .card__title {
        font-size: 16.5px;
    }

    .project-card .card__meta {
        font-size: 14.5px;
    }

    .process {
        padding-top: 40px;
    }

    .process__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 24px;
        margin-top: 24px;
    }

    .step {
        margin-left: 0;
    }

    .step::after {
        display: none;
    }

    .cta {
        padding-top: 36px;
    }

    .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 0;
        padding: 32px 0 24px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-col + .footer-col {
        padding-left: 0;
        border-left: 0;
    }

    .footer-col:last-child {
        padding-left: 32px;
        border-left: 1px solid var(--color-border);
    }

    .layout-sidebar,
    .layout-sidebar--left {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- ≤768: mobile lớn ---------- */
@media (max-width: 768px) {
    :root {
        --container-gutter: 20px;
        --bleed: 0px;
        --header-h: 76px;
        --fs-hero: 28.5px;
        --fs-display: 30px;
        --fs-h2: 25px;
        --fs-h2-sm: 23px;
        --fs-lead: 16.5px;
        --fs-body-lg: 16px;
        --fs-body: 15px;
        --fs-eyebrow: 14.5px;
    }

    .topbar__inner {
        justify-content: center;
        min-height: 32px;
    }

    .topbar__company {
        font-size: 11.5px;
        text-align: center;
        letter-spacing: 0;
    }

    .site-branding img {
        height: 56px;
    }

    /* Hero: nội dung trên, ảnh dưới — các slide xếp chồng bằng grid */
    .hero__stage {
        display: grid;
        height: auto;
        background: linear-gradient(180deg, #f3f8fc 0%, #e8f2f9 100%);
    }

    .hero__slide {
        position: relative;
        inset: auto;
        grid-area: 1 / 1;
        display: flex;
        flex-direction: column;
    }

    .hero__media,
    .hero__media img {
        position: relative;
        inset: auto;
    }

    .hero__media {
        order: 2;
        aspect-ratio: 16 / 10;
        height: auto;
        overflow: hidden;
    }

    .hero__media img {
        height: 100%;
        object-position: 80% center;
    }

    .hero__overlay,
    .hero__arrow {
        display: none;
    }

    .hero__inner {
        height: auto;
        padding: 30px 0 24px;
    }

    .hero__content .eyebrow {
        font-size: 14px;
    }

    .hero__desc br {
        display: none;
    }

    .hero__actions {
        gap: 12px 24px;
        margin-top: 22px;
    }

    .hero__actions .btn {
        min-height: 50px;
        font-size: 15px;
    }

    .hero__actions .link-arrow {
        font-size: 15px;
    }

    .hero__controls {
        top: auto;
        bottom: 14px;
    }

    .hero__controls-inner {
        padding: 4px 6px 4px 14px;
        border-radius: var(--radius-pill);
        background: rgba(255, 255, 255, 0.92);
        box-shadow: var(--shadow-sm);
    }

    .hero__counter-current {
        font-size: 19px;
    }

    .hero__counter-sep {
        font-size: 18px;
    }

    .hero__counter-total {
        font-size: 15px;
    }

    .hero__pause {
        width: 32px;
        height: 32px;
    }

    .hero__tabs-wrap {
        margin-top: 14px;
    }

    .hero-tabs {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin-inline: 0;
    }

    .hero-tabs::-webkit-scrollbar {
        display: none;
    }

    .hero-tabs__tab {
        flex: 0 0 auto;
        min-height: 52px;
        padding: 0 20px;
        font-size: 14.5px;
        gap: 10px;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .about {
        padding: 36px 0;
    }

    .about__grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 28px;
    }

    .about__title br {
        display: none;
    }

    .about__desc {
        font-size: 16px;
    }

    .about__link {
        font-size: 16px;
    }

    .solution-item {
        grid-template-columns: 40px 42px minmax(0, 1fr) 22px;
        min-height: 72px;
        padding: 10px 14px 10px 16px;
    }

    .solution-item:hover {
        transform: none;
    }

    .solution-item__num {
        font-size: 17px;
    }

    .solution-item__icon .icon {
        font-size: 28.5px;
    }

    .solution-item__text {
        padding-left: 14px;
    }

    .solution-item__title {
        font-size: 15.5px;
    }

    .solution-item__desc {
        font-size: 14px;
        white-space: normal;
    }

    .projects__head {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .projects__head .link-arrow {
        margin-bottom: 0;
    }

    .projects__grid {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 20px;
    }

    .process__head .section-title {
        font-size: 23px;
    }

    .step .icon-circle {
        width: 68px;
        height: 68px;
    }

    .step .icon-circle .icon {
        font-size: 28.5px;
    }

    .step__desc {
        font-size: 15px;
    }

    .step__desc br {
        display: none;
    }

    .cta__box {
        padding: 26px 22px;
        border-radius: var(--radius-md);
    }

    .cta__box::before,
    .cta__box::after {
        display: none;
    }

    .cta__title {
        font-size: 21px;
    }

    .cta__desc br {
        display: none;
    }

    .cta__actions {
        gap: 16px;
    }

    .cta__phone {
        margin-left: 0;
        font-size: 20px;
    }

    .cta__phone-icon {
        width: 42px;
        height: 42px;
    }

    .footer-bottom__inner {
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding: 14px 0 18px;
        text-align: center;
        font-size: 13.5px;
    }
}

/* ---------- ≤600 ---------- */
@media (max-width: 600px) {
    .header-hotline__number {
        display: none;
    }

    .header-hotline {
        margin-left: auto;
    }

    .process__steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .cta__actions .btn {
        width: 100%;
    }

    .footer-main {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-col:last-child {
        padding-left: 0;
        border-left: 0;
    }

    .footer-brand img {
        width: 260px;
    }

    .search-form {
        flex-direction: column;
    }
}

/* ---------- ≤420 ---------- */
@media (max-width: 420px) {
    :root {
        --container-gutter: 16px;
        --fs-hero: 25px;
        --fs-display: 26.5px;
        --fs-h2: 22px;
        --fs-h2-sm: 20.5px;
    }

    .site-branding img {
        height: 50px;
    }

    .hero__actions .btn {
        width: 100%;
    }

    .feature__title {
        white-space: normal;
    }
}

/* Ô tìm kiếm trong menu mobile luôn giữ nút cùng hàng */
.mobile-nav__extra .search-form {
    flex-direction: row;
}