@media screen and (max-width: 1440px) {
    .container {
        max-width: 1290px;
    }
}

/* ============================================
   HEADER — hamburger layout from 1290px down
   ============================================ */
@media screen and (max-width: 1290px) {
    .container {
        max-width: 1024px;
    }

    /* Ở ≤1290px: giữ fixed + hide/show khi scroll, nhưng nền luôn là #0a2b48 (không transparent như desktop) */
    .site-header {
        background: #0a2b48;
    }
    .site-header--pinned {
        background: #0a2b48;
    }

    /* Layout: hamburger (left) | logo (center) | button (right) */
    .site-header__inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 12px;
    }
    .site-header__hamburger {
        display: inline-flex;
        justify-self: start;
    }
    .site-header__logo {
        justify-self: center;
    }
    .site-header__cta {
        justify-self: end;
    }
    .site-header__nav {
        display: none;
    }

    /* Mobile nav panel (independent, non-overlay) */
    .mobile-nav {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        background: #0a2b48;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mobile-nav.is-open {
        transform: translateX(0);
    }
    .mobile-nav__head {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
    }
    .mobile-nav__close {
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
        line-height: 0;
    }
    .mobile-nav__logo {
        flex: 1;
        text-align: center;
    }
    .mobile-nav__logo img {
        max-width: 173px;
        width: auto;
        height: auto;
        display: inline-block;
        margin: 0;
    }

    /* Mobile menu list */
    .mobile-nav__menu ul,
    .mobile-nav__menu .mobile-menu {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .mobile-nav__menu li {
        list-style: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .mobile-nav__menu a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        color: #ffffff;
        font-family: ml-sb;
        font-weight: 600;
        font-size: 14px;
        line-height: 1.3;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }
    .mobile-nav__menu .menu-item-has-children > a::after {
        content: "";
        width: 8px;
        height: 8px;
        border-right: 2px solid #ffffff;
        border-top: 2px solid #ffffff;
        transform: rotate(45deg);
        transition: transform 0.2s ease;
        margin-left: 12px;
    }
    .mobile-nav__menu .menu-item-has-children.is-open > a::after {
        transform: rotate(135deg);
    }
    .mobile-nav__menu .sub-menu {
        display: none;
        background: rgba(0, 0, 0, 0.18);
    }
    .mobile-nav__menu .is-open > .sub-menu {
        display: block;
    }
    .mobile-nav__menu .sub-menu a {
        padding-left: 36px;
        text-transform: none;
        font-family: ml-re;
        font-weight: 400;
    }
    .mobile-nav__menu .sub-menu .sub-menu a {
        padding-left: 52px;
    }

    /* ---- HERO — tablet (≤1290px) ---- */
    .hero {
        padding: 90px 0 72px 0;
    }
    .hero__slide.is-active {
        gap: 32px;
    }

    /* ---- ABOUT — tablet ---- */
    .about__title {
        font-size: 28px;
    }
    .about__image {
        margin-top: 32px;
    }

    /* ---- DIFFER — tablet ---- */
    .differ {
        padding: 0 0 60px 0;
    }
    .differ__grid {
        gap: 32px;
    }
    .differ__title,
    .services__title {
        font-size: 28px;
    }

    /* ---- SERVICES — tablet ---- */
    .services {
        padding: 60px 0;
    }
    .services__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    /* ---- CUSTOMERS — tablet: 6 cột ---- */
    .cus {
        padding: 60px 0;
    }
    .cus .container {
        gap: 40px;
    }
    .cus__col {
        flex: 0 0 calc((100% - 5 * 16px) / 6);
    }

    /* ---- CASE STUDY — tablet ---- */
    .cs {
        padding: 60px 0;
    }
    .cs .container {
        gap: 56px;
    }
    .cs__slide {
        gap: 40px;
    }
    .cs__name {
        font-size: 32px;
    }
    .cs__metrics {
        gap: 24px;
    }
    /* Stats: 4 → 2 cột */
    .cs__stats {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 32px;
    }
    /* Row 3 posts: 3 cột → 2 cột với "3rd" spanning full */
    .cs__posts {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .cs__stat:nth-child(4n + 1)::before { display: block; }
    .cs__stat:nth-child(2n + 1)::before { display: none; }
    .cs__stats-title {
        font-size: 28px;
    }
    .cs__stat-num {
        font-size: 34px;
    }

    /* ---- FOOTER — tablet (≤1290px) ---- */
    .ft-form {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 40px;
    }
    .ft-row3 {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .ft-row3__col--1 {
        grid-column: 1 / -1;
    }

    /* ---- CUSTOMERS — posts: 3 → 2 cột ---- */
    .cus__posts {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}

@media screen and (max-width: 1024px) {
    .container {
        max-width: 890px;
    }

    /* HERO */
    .hero__slide.is-active {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .hero__col--image {
        max-width: 640px;
        margin: 0 auto;
    }

    /* FOOTER */
    .ft-row2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
    .ft-row3 {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .ft-row3__col--1 {
        grid-column: auto;
    }
    .site-footer .container {
        gap: 48px;
    }
}

@media screen and (max-width: 890px) {
    .container {
        max-width: 768px;
    }

    /* ---- SW-BANNER — 1 cột, ảnh dưới text ---- */
    .sw-banner {
        padding: 130px 0 70px;
    }
    .sw-banner__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .sw-banner__left {
        max-width: none;
    }
    .sw-banner__title,
    .sw-banner__n-value {
        font-size: 26px;
    }
    .sw-banner__subtitle {
        font-size: 18px;
    }

    /* ---- SW-CONTENT ---- */
    .sw-content {
        margin: 48px 0;
    }

    /* ---- SW-DESC — 2 hàng: (1+2), (3, 4+5) ---- */
    .sw-desc {
        padding: 48px 0;
    }
    .sw-desc__head {
        margin-bottom: 40px;
    }
    .sw-desc__item--1,
    .sw-desc__item--2 {
        height: 300px;
    }
    .sw-desc__item--3,
    .sw-desc__item--4,
    .sw-desc__item--5 {
        height: 220px;
    }
    .sw-desc__label,
    .sw-desc__hover-title {
        font-size: 20px;
    }

    /* ---- SW-REASON ---- */
    .sw-reason {
        padding: 48px 0;
    }
    .sw-reason__body {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .sw-reason__image {
        max-width: 420px;
        margin: 0 auto;
    }
    .sw-reason__list {
        padding-right: 40px;
    }
    .sw-reason__item--2,
    .sw-reason__item--5 {
        transform: translateX(20px);
    }
    .sw-reason__item--3,
    .sw-reason__item--4 {
        transform: translateX(40px);
    }

    /* ---- SW-COMPARE ---- */
    .sw-compare {
        padding: 72px 0 0 0;
    }
    .sw-compare__row--head .sw-compare__cell {
        font-size: 18px;
    }
    .sw-compare__cell {
        padding: 12px;
    }

    /* ---- SW-INC ---- */
    .sw-inc {
        padding: 72px 0 0 0;
    }
    .sw-inc__body {
        flex-direction: column;
        gap: 16px;
    }
    .sw-inc__sidebar {
        width: 100%;
        max-width: none;
    }
    .sw-inc__nav {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .sw-inc__nav-link {
        font-size: 16px;
    }
    .sw-inc__content {
        padding: 32px;
    }

    /* ---- SW-SECTOR — tablet: font item nhỏ + overlay đậm hơn ---- */
    .sw-sector {
        padding: 72px 0 0 0;
    }
    .sw-sector__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .sw-sector__item-title {
        font-size: 14px;
    }
    .sw-sector__text {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.85) 100%);
    }

    /* ---- SW-PROJECTS __params gap tablet ---- */
    .sw-projects__params {
        gap: 28px;
    }

    /* ---- SW-PROCESS ---- */
    .sw-process {
        padding: 56px 0;
    }
    .sw-process .container {
        gap: 32px;
    }
    .sw-process__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    /* ---- SW-QUOTE ---- */
    .sw-quote__head {
        margin-bottom: 40px;
    }
    .sw-quote__prices {
        gap: 24px;
    }
    .sw-quote__price {
        flex: 0 0 calc(50% - 12px);
        max-width: none;
    }

    /* ---- SW-PROJECTS ---- */
    .sw-projects {
        padding: 56px 0;
    }
    .sw-projects__slide {
        grid-template-columns: 1fr;
    }

    /* ---- SW-FAQ ---- */
    .sw-faq {
        padding: 56px 0;
    }
    .sw-faq__list {
        padding: 28px 20px;
    }
    .sw-faq__send {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media screen and (max-width: 768px) {
    .container {
        max-width: 540px;
    }

    /* ---- HEADER — ẩn button trên mobile ---- */
    .site-header__btn,
    .site-header__cta {
        display: none;
    }

    /* ---- ABOUT HERO — mobile ---- */
    .a-hero {
        height: auto;
        min-height: 380px;
        padding-top: 120px;
        padding-bottom: 40px;
    }
    .a-hero__subtitle {
        font-size: 16px;
    }
    .a-hero__title {
        font-size: 24px;
    }
    .a-hero__desc {
        font-size: 14px;
    }

    /* ---- ABOUT INTRO — mobile ---- */
    .a-intro {
        padding: 48px 0;
    }
    .a-intro__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .a-intro__col--1 {
        gap: 20px;
    }
    .a-intro__title {
        font-size: 22px;
    }
    .a-intro__desc,
    .a-intro__tx {
        font-size: 14px;
    }

    /* ---- ABOUT VALUES — mobile ---- */
    .a-values {
        padding: 48px 0;
    }
    .a-values .container {
        gap: 40px;
    }
    .a-values__title {
        font-size: 22px;
    }
    .a-values__desc {
        font-size: 14px;
    }
    .a-values__body {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }
    .a-values__col {
        gap: 16px;
    }
    /* Bỏ vòng cung trên mobile — override cả nth-child selectors */
    .a-values__col--left  .a-values__item:nth-child(n),
    .a-values__col--right .a-values__item:nth-child(n),
    .a-values__col--left  .a-values__item:nth-child(n) .a-values__ic,
    .a-values__col--right .a-values__item:nth-child(n) .a-values__ic {
        transform: none;
    }
    /* Cả 2 cột render icon | text như list phải — dùng grid để icons luôn nhất quán */
    .a-values__item {
        display: grid;
        grid-template-columns: 48px 1fr;
        gap: 12px;
        align-items: center;
        text-align: left;
    }
    .a-values__col--left .a-values__item .a-values__label {
        order: 2;
    }
    .a-values__col--left .a-values__item .a-values__ic {
        order: 1;
    }
    .a-values__ic {
        width: 48px;
        height: 48px;
    }
    .a-values__ic img {
        width: 22px;
        height: 22px;
    }
    .a-values__label {
        font-size: 16px;
    }
    /* Center: bỏ vòng tròn, canh giữa nội dung */
    .a-values__ring {
        width: 100%;
        height: auto;
        display: none;
    }
    .a-values__center {
        max-width: 100%;
    }
    .a-values__c-title {
        font-size: 22px;
    }

    /* ---- ABOUT TIMELINE — mobile ---- */
    .timeline {
        padding: 48px 0;
    }
    .timeline .container {
        gap: 32px;
    }
    .timeline__title {
        font-size: 22px;
    }
    .timeline__slide {
        flex: 0 0 calc(100% - 48px);
    }
    .timeline__card {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .timeline__media {
        aspect-ratio: 16 / 10;
    }
    .timeline__content {
        padding: 20px;
        gap: 8px;
    }
    .timeline__time {
        font-size: 28px;
    }
    .timeline__ctitle {
        font-size: 16px;
    }
    .timeline__cdesc {
        font-size: 14px;
        line-height: 150%;
    }
    /* Nav rút gọn — chỉ hiện năm active + 2 bên */
    .timeline__nav {
        --tl-edge: 24px;
    }
    .timeline__nav-track {
        gap: 8px;
    }
    .timeline__year {
        min-width: 48px;
    }
    .timeline__year-label {
        font-size: 12px;
    }
    .timeline__year.is-active .timeline__year-label {
        font-size: 16px;
    }
    .timeline__nav-track::before,
    .timeline__nav-track::after {
        top: 30px;
    }
    .timeline__year-dot {
        top: 26px;
    }

    /* ---- ABOUT TECHNICAL — mobile ---- */
    .technical {
        padding: 48px 0;
    }
    .technical .container {
        gap: 32px;
    }
    .technical__title h2 {
        font-size: 22px;
    }
    .technical__title p {
        font-size: 14px;
    }
    .technical__info {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .technical__info--desktop-last-span-2 .technical__info__item:last-child,
    .technical__info--tablet-last-span-2 .technical__info__item:last-child {
        grid-column: auto;
    }
    .technical__info__item__top h3 {
        font-size: 16px;
    }
    .technical__info__item__use__skill h4 {
        font-size: 14px;
    }
    .technical__sub {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }
    /* Bỏ đường kẻ đứng khi stack 1 cột */
    .technical__sub__item + .technical__sub__item::before {
        display: none;
    }
    .technical__sub__item__icon {
        padding: 12px;
    }
    .technical__sub__item__text h5 {
        font-size: 15px;
    }
    .technical__sub__item__text p {
        font-size: 13px;
    }

    /* ---- ABOUT FEATURED SERVICES — mobile ---- */
    .ft-service {
        padding: 48px 0;
    }
    .ft-service .container {
        gap: 20px;
    }
    .ft-service__title {
        font-size: 22px;
    }
    .ft-service__quote {
        font-size: 13px;
    }
    .ft-service__grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .ft-service__item {
        padding: 12px;
        gap: 12px;
        min-height: 0;
    }
    .ft-service__item-title {
        font-size: 15px;
    }
    .ft-service__item-desc {
        font-size: 13px;
    }

    /* ---- ABOUT HIGHLIGHTS — mobile ---- */
    .hl {
        padding: 48px 0;
    }
    .hl .container {
        gap: 32px;
    }
    .hl__row {
        gap: 24px;
    }
    .hl__title {
        font-size: 22px;
    }
    .hl__desc {
        font-size: 14px;
    }
    .hl__stats {
        grid-template-columns: 1fr 1fr;
        column-gap: 16px;
        row-gap: 24px;
    }
    .hl__stat-num {
        font-size: 28px;
    }
    .hl__stat-label {
        font-size: 13px;
    }
    /* Carousel — 3 logo/hàng */
    .hl__col {
        flex: 0 0 calc((100% - 2 * 12px) / 3);
        gap: 12px;
    }
    .hl__track {
        gap: 12px;
    }
    /* Posts — 1 cột */
    .hl__posts {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .hl-post__title {
        font-size: 15px;
    }
    .hl-post__desc {
        font-size: 13px;
    }

    /* ---- ABOUT NEWS — mobile ---- */
    .nws {
        padding: 48px 0;
    }
    .nws .container {
        gap: 24px;
    }
    .nws__title {
        font-size: 22px;
    }
    /* Carousel: 3 logo/hàng */
    .nws__logo {
        flex: 0 0 calc((100% - 2 * 10px) / 3);
    }
    /* Posts: 1 cột */
    .nws__posts {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .nws-post__title {
        font-size: 15px;
    }
    .nws-post__desc {
        font-size: 13px;
    }

    /* ---- ABOUT RATING — mobile ---- */
    .rt {
        padding: 48px 0;
    }
    .rt .container {
        gap: 24px;
    }
    .rt__title {
        font-size: 22px;
    }
    .rt__title-green {
        font-size: 16px;
    }
    .rt__desc {
        font-size: 13px;
    }
    .rt__social {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .rt__sr {
        padding: 14px;
        gap: 10px;
    }
    .rt__sr-num {
        font-size: 24px;
    }
    .rt__reviews::before,
    .rt__reviews::after {
        font-size: 60px;
    }
    .rt__reviews .rt-carousel__slot {
        flex: 0 0 100%;
    }

    /* ---- ABOUT ACTIVITIES — mobile ---- */
    .act {
        padding: 48px 0;
    }
    .act .container {
        gap: 24px;
    }
    .act__title { font-size: 22px; }
    .act__desc  { font-size: 14px; }
    /* Tablet/Mobile: bung layout — col1 stack, right stack thành list ảnh full width */
    .act__gallery {
        grid-template-columns: 1fr;
        aspect-ratio: auto;
        gap: 12px;
    }
    .act__col1,
    .act__right {
        display: contents;
    }
    .act__right-top,
    .act__right-bot {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
        aspect-ratio: auto;
        gap: 12px;
    }
    .act__col1 > .act__img:nth-child(1),
    .act__col1 > .act__img:nth-child(2),
    .act__img {
        aspect-ratio: 16 / 10;
    }
    .act__right-top > .act__img,
    .act__right-bot > .act__img {
        aspect-ratio: 4 / 3;
    }
    .act__more-link { font-size: 16px; }
    .act__recruit { padding: 16px; }
    .act__recruit-text { font-size: 15px; }

    /* ---- ABOUT WRAPPER — mobile ---- */
    .wrapper {
        padding: 48px 0;
    }
    .wrapper__title { font-size: 22px; }
    .wrapper__pdf   { height: 420px; }

    /* ---- ABOUT SHARE — mobile ---- */
    .share {
        padding: 48px 0;
    }
    .share__title { font-size: 22px; }
    .share__nav {
        flex-wrap: wrap;
        gap: 4px;
    }
    .share__nav-item {
        flex: 0 0 calc(50% - 4px);
    }
    .share__nav-item a {
        font-size: 13px;
        padding: 10px 6px;
    }
    .share__panels {
        padding: 16px;
    }
    .share__panel-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .share__panel-image img {
        width: 140px;
        height: 140px;
    }

    /* ---- HERO — mobile ---- */
    .hero {
        padding: 72px 0 56px 0;
    }
    .hero__title {
        font-size: 20px;
    }

    /* ---- ABOUT — mobile ---- */
    .about__title {
        font-size: 22px;
    }
    .about__desc {
        font-size: 14px;
    }
    .about__image {
        margin-top: 24px;
    }

    /* ---- DIFFER — mobile ---- */
    .differ {
        padding: 0 0 48px 0;
    }
    .differ__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    /* Cho phép cột (nhất là cột carousel) co dưới min-content,
       tránh track 1fr bị nội dung ép rộng gây tràn ngang trên mobile */
    .differ__col {
        min-width: 0;
    }
    .differ__col-slide {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    .differ__box {
        padding: 12px;
    }
    .differ__box-icon {
        padding: 12px;
    }
    .differ__box-title {
        font-size: 16px;
    }
    .differ__box-desc {
        font-size: 14px;
    }

    /* ---- CUSTOMERS — mobile: 4 cột ---- */
    .cus {
        padding: 48px 0;
    }
    .cus .container {
        gap: 32px;
    }
    .cus__track {
        gap: 12px;
    }
    .cus__col {
        flex: 0 0 calc((100% - 3 * 12px) / 4);
        gap: 12px;
    }

    /* ---- CASE STUDY — mobile ---- */
    .cs {
        padding: 48px 0;
    }
    .cs .container {
        gap: 40px;
    }
    .cs__row--stats {
        gap: 32px;
    }
    .cs__stats {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }
    .cs__posts {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .cs__stat::before { display: none !important; }
    .cs__stats-title {
        font-size: 22px;
    }
    .cs__stats-desc { font-size: 14px; }
    .cs__stat-num { font-size: 30px; }

    .cs__slide {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .cs__col--images { min-height: 0; }
    .cs__name {
        font-size: 26px;
    }
    .cs__metrics {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .cs__client-row {
        flex-direction: column;
        gap: 12px;
    }
    .cs__devices-tabs {
        gap: 8px;
    }
    .cs__dev-tab {
        padding: 4px 14px;
        font-size: 13px;
    }

    /* ---- SERVICES — mobile ---- */
    .services {
        padding: 48px 0;
    }
    .services .container {
        gap: 32px;
    }
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .services__body {
        padding: 12px;
    }
    .services__item-title {
        font-size: 15px;
    }
    .services__item-desc {
        font-size: 13px;
    }
    .differ__col--1 {
        gap: 32px;
    }
    .differ__title,
    .services__title {
        font-size: 22px;
    }
    .differ__desc,
    .services__desc {
        font-size: 14px;
    }
    .differ__label {
        font-size: 16px;
    }
    .differ__dash {
        width: 12px;
        margin: 0 4px;
    }
    .hero__buttons {
        justify-content: flex-start;
    }
    .hero__btn {
        padding: 10px 24px;
    }
    .hero__dots {
        margin-top: 24px;
    }

    /* ---- FOOTER — mobile ---- */
    .site-footer {
        padding: 40px 0 0 0;
        border-radius: 24px 24px 0 0;
    }
    .site-footer .container {
        gap: 40px;
    }
    .ft-row2 {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .ft-form-panel {
        padding: 20px;
        gap: 20px;
        border-radius: 20px;
    }
    .ft-form__title {
        font-size: 20px;
    }
    .ft-tab__title {
        font-size: 20px;
    }
    .ff-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .ft-tabs {
        align-self: stretch;
        justify-content: center;
    }
    .ft-tab {
        flex: 1;
    }
    .ft-row3__badges {
        flex-wrap: wrap;
    }
    .site-footer__copyright {
        padding: 20px 0;
        font-size: 13px;
    }

    /* ---- CUSTOMERS — posts: 2 → 1 cột ---- */
    .cus__posts {
        grid-template-columns: 1fr;
    }

    /* ---- TEAM — gallery responsive ---- */
    .team {
        padding: 48px 0;
    }
    .team__row--top,
    .team__row--bottom {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 200px;
    }
}

@media screen and (max-width: 540px) {
    .container {
        max-width: 420px;
    }

    /* ---- SW-BANNER — smallest ---- */
    .sw-banner {
        padding: 110px 0 60px;
    }
    .sw-banner__title,
    .sw-banner__n-value {
        font-size: 22px;
    }
    .sw-banner__subtitle {
        font-size: 16px;
    }
    .sw-banner__numbers {
        gap: 16px 24px;
    }
    .sw-banner__buttons .sw-banner__btn {
        flex: 1 1 auto;
        padding: 10px 20px;
    }

    /* ---- SW-CONTENT — smallest ---- */
    .sw-content__title {
        font-size: 24px;
    }
    .sw-content__body {
        font-size: 15px;
    }

    /* ---- SW-DESC — smallest: 1 cột all ---- */
    .sw-desc__title {
        font-size: 24px;
    }
    .sw-desc__desc {
        font-size: 15px;
    }

    /* ---- SW-REASON — smallest ---- */
    .sw-reason__title,
    .sw-reason__title p {
        font-size: 24px;
    }
    .sw-reason__list {
        padding-right: 0;
    }
    .sw-reason__item {
        height: auto;
        min-height: 70px;
    }
    .sw-reason__item--2,
    .sw-reason__item--5,
    .sw-reason__item--3,
    .sw-reason__item--4 {
        transform: none;
    }
    .sw-reason__icon {
        width: 50px;
        height: 50px;
    }
    .sw-reason__icon img {
        width: 24px;
        height: 24px;
    }
    .sw-reason__item-text {
        font-size: 15px;
    }

    /* ---- SW-COMPARE — smallest: cell nhỏ hơn, cột criteria giãn ---- */
    .sw-compare__title,
    .sw-compare__title p {
        font-size: 24px;
    }
    .sw-compare__row--head .sw-compare__cell {
        font-size: 16px;
    }
    .sw-compare__cell {
        font-size: 14px;
        padding: 10px 8px;
    }
    .sw-compare__cell--criteria {
        width: 30%;
    }
    .sw-compare__cell--name {
        width: 35%;
    }

    /* ---- SW-INC — smallest ---- */
    .sw-inc__title,
    .sw-inc__title p {
        font-size: 24px;
    }
    .sw-inc__nav-link {
        font-size: 15px;
        padding: 10px 14px;
    }
    .sw-inc__content {
        padding: 20px;
    }

    /* ---- SW-SECTOR — smallest: 2 cột ---- */
    .sw-sector__title,
    .sw-sector__title p {
        font-size: 24px;
    }
    .sw-sector__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .sw-sector__item-title {
        font-size: 12px;
    }

    /* ---- SW-PROJECTS __params gap mobile ---- */
    .sw-projects__params {
        gap: 20px;
    }

    /* ---- Mobile: ẩn <br> trong các h2 tiêu đề section (tránh line-break xấu) ---- */
    .sw-projects__title br,
    .sw-quote__title br,
    .sw-faq__title br,
    .sw-desc__title br,
    .sw-content__title br,
    .sw-compare__title br,
    .sw-inc__title br,
    .sw-sector__title br,
    .sw-process__title br,
    .sw-reason__title br,
    .a-hero__title br,
    .hl__title br,
    .cs__stats-title br,
    .differ__title br,
    .services__title br {
        display: none;
    }

    /* ---- SW-PROCESS — smallest: 1 cột ---- */
    .sw-process__title,
    .sw-process__title p {
        font-size: 24px;
    }
    .sw-process__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .sw-process__index {
        font-size: 20px;
        padding-bottom: 16px;
    }

    /* ---- SW-QUOTE — smallest: 1 cột ---- */
    .sw-quote__title,
    .sw-quote__title p {
        font-size: 24px;
    }
    .sw-quote__price {
        flex: 0 0 100%;
        max-width: 340px;
    }
    .sw-quote__name {
        font-size: 22px;
    }
    .sw-quote__s-price {
        font-size: 20px;
    }

    /* ---- SW-PROJECTS — smallest ---- */
    .sw-projects__title,
    .sw-projects__title p {
        font-size: 24px;
    }
    .sw-projects__slide-title {
        font-size: 20px;
    }
    .sw-projects__project-title {
        font-size: 18px;
    }

    /* ---- SW-FAQ — smallest ---- */
    .sw-faq__title {
        font-size: 24px;
    }
    .sw-faq__send-title {
        font-size: 20px;
    }
    .sw-faq__send-btn {
        width: 100%;
    }

    /* ---- ACT — smallest: gallery bung 1 cột ---- */
    .act__right-top,
    .act__right-bot {
        grid-template-columns: 1fr;
    }
    .act__right-top > .act__img,
    .act__right-bot > .act__img {
        aspect-ratio: 16 / 10;
    }
    .sw-desc__grid {
        gap: 12px;
    }
    .sw-desc__item--1,
    .sw-desc__item--2,
    .sw-desc__item--3,
    .sw-desc__item--4,
    .sw-desc__item--5 {
        width: 100%;
        height: 240px;
    }
    .sw-desc__label {
        left: 20px;
        right: 20px;
        bottom: 16px;
        font-size: 18px;
    }
    .sw-desc__hover-title {
        font-size: 18px;
    }
    .sw-desc__hover-content {
        font-size: 14px;
    }

    /* FOOTER */
    .site-footer {
        padding: 32px 0 0 0;
        border-radius: 20px 20px 0 0;
    }
    .site-footer .container {
        gap: 32px;
    }
    .ft-tab__image {
        width: 140px;
        max-width: 140px;
    }
    .ft-tab__title {
        font-size: 18px;
    }
    .ft-tab__staff-value {
        font-size: 16px;
    }
    .ft-tab__subtitle {
        font-size: 16px;
    }
    .ft-form-panel {
        padding: 16px;
    }

    /* ---- SERVICES — smallest ---- */
    .services__grid {
        grid-template-columns: 1fr;
    }

    /* ---- CUSTOMERS — smallest: 3 cột ---- */
    .cus__col {
        flex: 0 0 calc((100% - 2 * 12px) / 3);
    }

    /* ---- TEAM — 1 cột ---- */
    .team__row--top,
    .team__row--bottom {
        grid-template-columns: 1fr;
        grid-auto-rows: 220px;
    }
}