@media (max-width: 1199px) {
  .container,
  .container--narrow {
    width: min(100% - var(--gutter-tablet) * 2, var(--container));
  }

  .topbar {
    height: auto;
    min-height: var(--topbar-height);
    padding: 7px 0;
  }

  .topbar__inner,
  .topbar__list {
    gap: var(--space-4);
  }

  .topbar__list {
    flex-wrap: wrap;
  }

  .topbar__item--address {
    display: none;
  }

  .site-header {
    height: var(--header-height-mobile);
  }

  .site-header__inner {
    gap: var(--space-4);
  }

  .site-header__logo {
    width: 124px;
    height: 48px;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .site-header__mobile-panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: grid;
    gap: var(--space-5);
    padding: var(--space-5) var(--gutter-tablet) var(--space-6);
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .site-header.is-menu-open .site-header__mobile-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .site-nav {
    display: grid;
    height: auto;
    justify-content: stretch;
    gap: 0;
    margin-left: 0;
  }

  .site-nav__link {
    height: auto;
    min-height: 44px;
    border-bottom: 1px solid var(--color-border);
  }

  .site-nav__link + .site-nav__link::before {
    display: none;
  }

  .site-nav__link::after {
    right: auto;
    bottom: 12px;
    width: 32px;
  }

  .site-header__cta {
    width: max-content;
    margin-right: auto;
    margin-left: auto;
  }

  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    padding: 44px 0 28px;
  }

  .page-hero,
  .page-hero__inner {
    --page-hero-height: 416px;
    min-height: var(--page-hero-height);
  }

  .page-hero__inner {
    padding: 64px 0 78px;
  }

  .page-hero__title {
    font-size: 40px;
  }

  .page-hero__note {
    max-width: 560px;
  }

  .page-hero--tall,
  .page-hero--tall .page-hero__inner {
    min-height: 0;
  }

  .page-hero--tall .page-hero__inner {
    padding: 64px 0 90px;
  }

  .page-hero--tall .page-hero__title {
    font-size: 40px;
  }

  .shortcut-bar {
    margin-top: -28px;
  }

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

  .shortcut-item:nth-child(odd) {
    border-left: 0;
  }

  .shortcut-item:nth-child(n + 3) {
    border-top: 1px solid var(--color-border);
  }

  .intro-system,
  .solution-catalog,
  .dark-split,
  .approach-section,
  .related-projects,
  .about-intro,
  .value-section,
  .principles-band,
  .history-section,
  .capability-section,
  .handover-section,
  .quality-section,
  .product-intro,
  .product-catalog,
  .criteria-section,
  .service-section {
    padding: 60px 0 68px;
  }

  .intro-system__grid,
  .solution-catalog__head,
  .dark-split__grid,
  .about-intro__grid,
  .split-feature,
  .product-intro__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .about-media-stack {
    min-height: 360px;
  }

  .about-media-stack__badge {
    width: 126px;
    height: 126px;
  }

  .about-media-stack__badge strong {
    font-size: 32px;
  }

  .value-section .section-heading,
  .principles-band .section-heading,
  .quality-section .section-heading {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .value-section .section-heading__text,
  .principles-band .section-heading__text,
  .quality-section .section-heading__text {
    grid-column: 1;
    grid-row: auto;
  }

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

  .principle-card {
    min-height: 252px;
    padding: 32px 22px 28px;
  }

  .principle-card:nth-child(4) {
    border-left: 0;
  }

  .ecosystem-map {
    min-height: 320px;
  }

  .solution-category-grid {
    gap: 20px;
  }

  .solution-category-card__body {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 16px;
    padding: 20px;
  }

  .solution-category-card__number {
    width: 48px;
    height: 48px;
  }

  .solution-category-card__title {
    font-size: 20px;
  }

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

  .approach-timeline::before {
    display: none;
  }

  .hero-banner,
  .hero-banner__inner {
    min-height: 520px;
  }

  .hero-banner__inner {
    padding: 72px 0;
  }

  .hero-banner__title {
    max-width: 560px;
    font-size: 44px;
  }

  .hero-banner__description {
    font-size: 16px;
  }

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

  .stats-bar__item {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }

  .stats-bar__item:nth-child(odd) {
    border-left: 0;
  }

  .stats-bar__item:nth-child(-n + 2) {
    border-top: 0;
  }

  .solution-overview {
    padding: 58px 0 64px;
  }

  .section-heading__title {
    font-size: 32px;
  }

  .solution-overview__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .featured-solution__grid {
    grid-template-columns: 1fr;
  }

  .featured-solution__media {
    min-height: 360px;
  }

  .featured-solution__content {
    padding: 56px var(--gutter-tablet) 64px;
  }

  .featured-solution__title {
    font-size: 32px;
  }

  .projects-showcase {
    padding: 60px 0 68px;
  }

  .projects-showcase__grid {
    grid-template-columns: 1fr;
  }

  .project-list-grid,
  .article-detail__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .project-list-grid .project-card--large {
    grid-row: auto;
  }

  .article-detail {
    padding: 60px 0 68px;
  }

  .article-detail__aside {
    position: static;
  }

  .project-card--large {
    min-height: 360px;
  }

  .scada-band__grid {
    grid-template-columns: 1fr;
  }

  .scada-band__media {
    min-height: 300px;
  }

  .scada-band__content {
    padding: 54px var(--gutter-tablet) 62px;
  }

  .scada-band__title {
    font-size: 32px;
  }

  .technical-partner {
    padding: 60px 0 68px;
  }

  .technical-partner__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .technical-partner__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .capability-card {
    padding: 22px 18px;
  }

  .process-section {
    padding: 58px 0 64px;
  }

  .process-timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 34px;
  }

  .process-timeline::before {
    display: none;
  }

  .knowledge-section {
    padding-bottom: 68px;
  }

  .knowledge-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .knowledge-card__body {
    padding: 18px;
  }

  .cta-band__title {
    font-size: 30px;
  }

  .detail-overview,
  .detail-proof,
  .faq-section,
  .product-detail {
    padding: 68px 0;
  }

  .detail-overview__grid,
  .detail-proof__grid,
  .faq-section__grid,
  .product-detail__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

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

  .detail-process {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 24px;
  }

  .detail-process__item:nth-child(3n)::before {
    right: 0;
  }

  .product-gallery__main {
    min-height: 460px;
  }

  .metric-band__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .project-mini-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .project-mini-card {
    min-height: 210px;
    padding: 22px;
  }

  .home-page .hero-banner__inner {
    justify-content: center;
    text-align: center;
  }

  .home-page .hero-banner__content,
  .home-page .hero-banner__title,
  .home-page .hero-banner__description {
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .hero-banner__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(520px, 100%);
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .hero-banner__actions .btn {
    justify-content: center;
    min-height: 52px;
    line-height: 1.25;
    white-space: normal;
  }

  .home-page .featured-solution__content-inner {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .home-page .featured-solution__content-inner > .btn {
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .process-section .section-heading {
    text-align: center;
  }

  .home-page .process-timeline {
    grid-template-columns: 1fr;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .process-timeline::before {
    display: block;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(180deg, var(--color-brand-orange) 0 8px, transparent 8px 14px);
    transform: translateX(-50%);
  }

  .home-page .process-step {
    grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    text-align: left;
    border-top: 0;
  }

  .home-page .process-step__number {
    grid-column: 2;
    justify-self: center;
  }

  .home-page .process-step__title {
    grid-column: 3;
  }

  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: left;
  }

  .site-footer__inner > div:first-child,
  .site-footer__inner > div:nth-child(4),
  .site-footer__inner > div:nth-child(5) {
    grid-column: 1 / -1;
  }

  .site-footer__inner > div:first-child,
  .site-footer__inner > div:nth-child(5) {
    text-align: center;
  }

  .site-footer__inner > div:first-child .site-footer__logo,
  .site-footer__text,
  .site-footer__qr {
    margin-right: auto;
    margin-left: auto;
  }

  .site-footer__socials {
    justify-content: center;
  }

  .site-footer__bottom {
    text-align: center;
  }

  .section-heading,
  .section-heading--center,
  .home-page .featured-solution__content,
  .home-page .process-section .section-heading {
    text-align: left;
  }

  .section-heading--center {
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .section-heading--center .section-heading__eyebrow {
    justify-content: flex-start;
  }

  .home-page .featured-solution__content-inner {
    margin-left: 0;
  }

  .home-page .featured-solution__content-inner > .btn {
    margin-right: 0;
    margin-left: 0;
  }

  .home-page .featured-solution__content,
  .home-page .scada-band__content,
  .home-page .process-section {
    text-align: center;
  }

  .home-page .featured-solution__content {
    justify-content: center;
  }

  .home-page .featured-solution__content-inner,
  .home-page .scada-band__inner {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .featured-solution__content-inner > .btn {
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .scada-band__icons,
  .home-page .scada-band__metrics {
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .process-section .section-heading {
    text-align: center;
  }

  .about-page .about-intro__checks,
  .about-page .stats-bar__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-page .principle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-page .principle-card,
  .about-page .principle-card:nth-child(4) {
    min-height: 244px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
  }

  .about-page .principle-card:nth-child(odd) {
    border-left: 0;
  }

  .about-page .principle-card:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .about-page .principle-card:nth-child(5) {
    grid-column: 1 / -1;
  }

  .about-page .stats-bar__item:nth-child(odd) {
    border-left: 0;
  }

  .about-page .stats-bar__item:nth-child(2) {
    border-top: 0;
  }

  /* Dự án / Kiến thức pages (2026-08-23 responsive pass — these components
     had desktop-only CSS from the static-HTML build, no tablet/mobile rules
     existed at all until now) */
  .project-portfolio-box {
    position: static;
    width: 100%;
    margin-top: 24px;
  }

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

  .project-stat:nth-child(even) {
    border-left: 0;
  }

  .project-stat:nth-child(n + 3) {
    border-top: 1px solid var(--color-border);
  }

  .project-featured,
  .project-region,
  .case-hero,
  .case-content,
  .blog-feature,
  .blog-categories,
  .project-catalog,
  .project-questions,
  .blog-list,
  .project-dark,
  .article-layout {
    padding: 60px 0 68px;
  }

  .project-section-head,
  .blog-list__head {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .project-section-head h1,
  .project-section-head h2,
  .blog-list__head h2 {
    font-size: 32px;
  }

  .featured-project-grid {
    gap: 20px;
  }

  .featured-project h3 {
    font-size: 24px;
  }

  .project-tile-grid,
  .blog-grid,
  .project-tile-grid--three,
  .blog-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-dark__grid,
  .project-region__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .project-dark h2,
  .project-region h2 {
    font-size: 32px;
  }

  .project-dark figcaption {
    left: 0;
  }

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

  .newsletter__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: left;
  }

  .newsletter h2 {
    font-size: 30px;
  }

  .case-hero__grid,
  .case-content__grid,
  .article-body-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .case-sidebar,
  .article-sidebar {
    position: static;
  }

  .article-header h1,
  .case-hero h1 {
    font-size: 32px;
  }

  .blog-hero-card {
    grid-template-columns: 1fr;
  }

  .blog-hero-card img {
    min-height: 320px;
  }

  .blog-hero-card h2 {
    font-size: 28px;
  }

  .blog-feature .project-section-head h1 {
    font-size: 36px;
  }

  .shortcut-bar__grid--cols-3 {
    grid-template-columns: 1fr;
  }

  .shortcut-bar__grid--cols-3 .shortcut-item {
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

  .shortcut-bar__grid--cols-3 .shortcut-item:first-child {
    border-top: 0;
  }

  .contact-info-form,
  .contact-map-section,
  .contact-process {
    padding: 60px 0 68px;
  }

  .contact-info-form__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-map-section__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

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

@media (max-width: 1399px) {
  .about-page .about-intro__checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-page .stats-bar__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-page .stats-bar__item {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }

  .about-page .stats-bar__item:nth-child(odd) {
    border-left: 0;
  }

  .about-page .stats-bar__item:nth-child(-n + 2) {
    border-top: 0;
  }

  .about-page .principle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-page .principle-card {
    grid-column: auto;
    border-top: 0;
  }

  .about-page .principle-card:nth-child(odd) {
    border-left: 0;
  }

  .about-page .principle-card:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .about-page .principle-card:nth-child(5) {
    grid-column: 1 / -1;
  }

  .about-page .split-feature {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .about-page .split-feature__media {
    order: -1;
    width: 100%;
    margin: 0;
    aspect-ratio: 1.22;
  }

  .about-page .split-feature__media img {
    display: block;
  }

  .about-page .timeline-item > div,
  .about-page .number-item > div {
    margin-left: 10px;
  }

  .about-page .quality-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .about-page .quality-grid .value-card:nth-child(3) {
    grid-column: 1 / -1;
  }

  .about-page .quality-grid .value-card {
    padding: 24px 20px;
  }
}

@media (max-width: 767px) {
  .consult-modal__panel {
    padding: 28px 20px;
  }

  .consult-modal .cf7-row {
    grid-template-columns: 1fr;
  }

  .container,
  .container--narrow {
    width: min(100% - var(--gutter-mobile) * 2, var(--container));
  }

  body {
    font-size: 15px;
  }

  .btn {
    min-height: 44px;
  }

  .topbar__inner {
    justify-content: center;
  }

  .topbar__item--email {
    display: none;
  }

  .site-header__mobile-panel {
    padding-right: var(--gutter-mobile);
    padding-left: var(--gutter-mobile);
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .site-footer__logo {
    width: 132px;
  }

  .page-hero,
  .page-hero__inner {
    --page-hero-height: 507px;
    min-height: var(--page-hero-height);
  }

  .page-hero__inner {
    align-content: end;
    padding: 58px 0 72px;
  }

  .page-hero__title {
    font-size: 34px;
  }

  .page-hero__description {
    font-size: 15px;
  }

  .page-hero__note {
    font-size: 14px;
  }

  .page-hero__actions {
    display: grid;
    gap: 12px;
  }

  .page-hero--tall,
  .page-hero--tall .page-hero__inner {
    min-height: 0;
  }

  .page-hero--tall .page-hero__inner {
    align-content: start;
    padding: 52px 0 60px;
  }

  .page-hero--tall .page-hero__title {
    font-size: 32px;
  }

  .shortcut-bar {
    margin-top: 0;
  }

  .shortcut-bar__grid {
    grid-template-columns: 1fr;
    box-shadow: none;
  }

  .shortcut-item,
  .shortcut-item:nth-child(n + 3) {
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

  .shortcut-item:first-child {
    border-top: 0;
  }

  .intro-system,
  .solution-catalog,
  .dark-split,
  .approach-section,
  .related-projects {
    padding: 44px 0 52px;
  }

  .mini-feature-grid,
  .solution-category-grid,
  .about-intro__checks,
  .value-grid,
  .quality-grid,
  .product-grid {
    grid-template-columns: 1fr;
  }

  .about-media-stack {
    min-height: 300px;
  }

  .about-media-stack__badge {
    right: 14px;
    width: 112px;
    height: 112px;
    padding: 14px;
  }

  .about-media-stack__badge strong {
    font-size: 28px;
  }

  .about-media-stack__badge small {
    font-size: 14px;
  }

  .principle-grid {
    grid-template-columns: 1fr;
  }

  .principle-card,
  .principle-card:nth-child(4) {
    min-height: 244px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 0;
  }

  .principle-card:first-child {
    border-top: 0;
  }

  .timeline-item,
  .number-item {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 16px;
  }

  .timeline-list::before,
  .number-list::before {
    left: 72px;
  }

  .split-feature__caption {
    right: 18px;
    bottom: 18px;
    left: 18px;
    font-size: 18px;
  }

  .split-feature__media--badge .split-feature__caption {
    right: 18px;
    bottom: 18px;
    width: 104px;
    height: 104px;
    padding: 14px;
    font-size: 24px;
  }

  .split-feature__media--badge .split-feature__caption span {
    margin-top: -18px;
    font-size: 14px;
  }

  .service-grid {
    grid-template-columns: 1fr;
  }

  .ecosystem-map {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: 14px;
    min-height: 0;
    padding: 24px 20px 118px;
  }

  .ecosystem-map__node {
    min-height: 50px;
    padding: 8px 10px;
    font-size: 13px;
  }

  .ecosystem-map__center {
    top: auto;
    bottom: 20px;
    left: 50%;
    width: 88px;
    height: 88px;
    transform: translate(-50%, 0);
    font-size: 12px;
  }

  .solution-category-card__body {
    grid-template-columns: 1fr;
  }

  .approach-timeline {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 24px;
  }

  .approach-step {
    grid-template-columns: 32px minmax(0, 1fr);
    justify-items: normal;
    gap: 12px 16px;
    padding: 14px 0;
    border-top: 1px solid var(--color-border);
    text-align: left;
  }

  .approach-step:first-child {
    border-top: 0;
  }

  .approach-step__dot {
    grid-row: span 2;
  }

  .hero-banner,
  .hero-banner__inner {
    min-height: 560px;
  }

  .hero-banner::before {
    background:
      linear-gradient(90deg, rgba(0, 24, 48, 0.9) 0%, rgba(0, 40, 80, 0.76) 62%, rgba(0, 40, 80, 0.34) 100%),
      linear-gradient(180deg, rgba(0, 24, 48, 0.14) 0%, rgba(0, 24, 48, 0.12) 48%, rgba(0, 24, 48, 0.38) 100%);
  }

  .hero-banner__bg img {
    object-position: 62% center;
  }

  .hero-banner__inner {
    align-items: flex-end;
    padding: 64px 0 52px;
  }

  .hero-banner__title {
    font-size: 36px;
  }

  .hero-banner__description {
    max-width: 100%;
    margin-top: 18px;
    font-size: 15px;
  }

  .hero-banner__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 26px;
  }

  .stats-bar__grid {
    grid-template-columns: 1fr;
  }

  .stats-bar__item {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    min-height: 86px;
    padding: 18px 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }

  .stats-bar__item:first-child {
    border-top: 0;
  }

  .stats-bar__item:nth-child(2) {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }

  .stats-bar__icon {
    width: 44px;
    height: 44px;
  }

  .stats-bar__icon svg {
    width: 38px;
    height: 38px;
  }

  .stats-bar__value {
    font-size: 28px;
  }

  .solution-overview {
    padding: 44px 0 48px;
  }

  .section-heading {
    margin-bottom: var(--space-6);
  }

  .section-heading__title {
    font-size: 28px;
  }

  .solution-overview__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .solution-card__body {
    min-height: 104px;
    padding: 16px 8px 14px;
  }

  .solution-card__icon {
    width: 34px;
    height: 34px;
  }

  .solution-card__icon svg {
    width: 30px;
    height: 30px;
  }

  .featured-solution__media {
    min-height: 260px;
  }

  .featured-solution__content {
    padding: 42px var(--gutter-mobile) 48px;
  }

  .featured-solution__title {
    font-size: 28px;
  }

  .featured-solution__features {
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 26px 0;
  }

  .featured-solution__feature {
    grid-template-columns: 42px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: 14px;
    padding: 0;
    text-align: left;
    border-left: 0;
  }

  .featured-solution__feature::after {
    top: auto;
    bottom: -7px;
    left: 21px;
  }

  .projects-showcase {
    padding: 44px 0 52px;
  }

  .project-list-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .projects-showcase__side-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .project-card,
  .project-card--large {
    min-height: 230px;
  }

  .project-card__content,
  .project-card--large .project-card__content {
    padding: 20px;
  }

  .project-card__title,
  .project-card--large .project-card__title {
    font-size: 22px;
  }

  .scada-band__media {
    min-height: 230px;
  }

  .scada-band__content {
    padding: 42px var(--gutter-mobile) 48px;
  }

  .scada-band__title {
    font-size: 28px;
  }

  .scada-band__flow {
    grid-template-columns: repeat(3, 52px);
    justify-content: space-between;
    gap: 10px;
    margin: 26px 0;
  }

  .scada-band__arrow {
    display: none;
  }

  .scada-band__metrics {
    grid-template-columns: 1fr;
  }

  .scada-band__metric {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-left: 0;
  }

  .scada-band__metric:first-child {
    border-top: 0;
  }

  .technical-partner {
    padding: 44px 0 52px;
  }

  .technical-partner__cards {
    grid-template-columns: 1fr;
  }

  .capability-card {
    min-height: 0;
  }

  .process-section {
    padding: 44px 0 50px;
  }

  .process-timeline {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: var(--space-6);
  }

  .process-step {
    grid-template-columns: 58px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    text-align: left;
    border-top: 1px solid var(--color-border);
  }

  .process-step:first-child {
    border-top: 0;
  }

  .knowledge-section {
    padding-bottom: 52px;
  }

  .knowledge-grid {
    grid-template-columns: 1fr;
  }

  .article-list-section {
    padding-top: 48px;
  }

  .article-detail {
    padding: 48px 0 54px;
  }

  .article-detail__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .article-detail__lead {
    font-size: 18px;
  }

  .article-detail__content h2 {
    margin-top: 30px;
    font-size: 23px;
  }

  .knowledge-card__title {
    font-size: 18px;
  }

  .cta-band {
    min-height: 0;
    padding: 44px 0;
    background-position: 58% center;
  }

  .cta-band__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    justify-items: center;
    text-align: center;
  }

  .cta-band__title,
  .cta-band__text {
    margin-right: auto;
    margin-left: auto;
  }

  .cta-band__title {
    font-size: 26px;
  }

  .cta-band__actions {
    justify-content: center;
    flex-wrap: wrap;
  }

  .cta-band__actions .btn {
    min-width: min(100%, 180px);
  }

  .detail-overview,
  .detail-proof,
  .faq-section,
  .product-detail {
    padding: 52px 0;
  }

  .detail-overview__grid,
  .detail-proof__grid,
  .faq-section__grid,
  .product-detail__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .detail-card-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 30px;
  }

  .detail-step-card {
    min-height: 0;
  }

  .detail-process {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .detail-process::before {
    display: none;
  }

  .detail-process__item {
    padding: 16px 0 16px 34px;
    border-top: 1px solid var(--color-border);
  }

  .detail-process__item::before {
    top: 0;
    bottom: 0;
    left: 7px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .detail-process__dot {
    top: 18px;
    left: 0;
  }

  .detail-dark-cards,
  .detail-feature-list,
  .product-specs {
    grid-template-columns: 1fr;
  }

  .detail-panel {
    padding: 26px 22px;
  }

  .product-gallery {
    grid-template-columns: 1fr;
  }

  .product-gallery__thumbs {
    display: flex;
    order: 2;
    overflow-x: auto;
  }

  .product-gallery__thumb {
    width: 72px;
    flex: 0 0 72px;
  }

  .product-gallery__main {
    min-height: 360px;
    padding: 28px;
  }

  .project-gallery__main img {
    max-height: 320px;
  }

  .project-gallery__thumbs {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  }

  .product-summary__title {
    font-size: 34px;
  }

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

  .metric-band__item {
    border-top: 1px solid rgba(255, 255, 255, 0.13);
  }

  .metric-band__item:nth-child(odd) {
    border-left: 0;
  }

  .project-mini-grid {
    grid-template-columns: 1fr;
  }

  .project-mini-card {
    min-height: 210px;
  }

  .home-page .hero-banner__inner {
    align-items: center;
    justify-content: center;
    padding: 58px 0;
    text-align: center;
  }

  .home-page .hero-banner__content,
  .home-page .hero-banner__title,
  .home-page .hero-banner__description {
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .hero-banner__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .hero-banner__actions .btn {
    justify-content: center;
    min-height: 52px;
    min-width: 0;
    padding-right: 10px;
    padding-left: 10px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }

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

  .home-page .stats-bar__item {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
    min-height: 132px;
    padding: 18px 10px;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
  }

  .home-page .stats-bar__item:nth-child(odd) {
    border-left: 0;
  }

  .home-page .stats-bar__item:nth-child(2) {
    border-top: 0;
  }

  .home-page .featured-solution__content {
    text-align: center;
  }

  .home-page .featured-solution__content-inner {
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .featured-solution__features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .home-page .featured-solution__feature {
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: start;
    gap: 12px;
    padding: 0 8px;
    text-align: center;
  }

  .home-page .featured-solution__feature::after {
    display: none;
  }

  .home-page .featured-solution__feature span {
    font-size: 14px;
  }

  .home-page .featured-solution__content-inner > .btn {
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .projects-showcase__grid {
    grid-template-columns: 1fr;
  }

  .home-page .projects-showcase__side-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .home-page .projects-showcase__side-grid .project-card {
    min-height: 190px;
  }

  .home-page .projects-showcase__side-grid .project-card__content {
    padding: 16px;
  }

  .home-page .projects-showcase__side-grid .project-card__title {
    font-size: 18px;
  }

  .home-page .projects-showcase__side-grid .project-card__meta {
    font-size: 14px;
  }

  .home-page .scada-band__metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-page .scada-band__metric {
    padding: 14px 6px;
    text-align: center;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
  }

  .home-page .scada-band__metric-label {
    font-size: 14px;
    line-height: 1.2;
  }

  .home-page .scada-band__metric-value {
    margin-top: 6px;
    font-size: 18px;
    line-height: 1.15;
  }

  .home-page .scada-band__metric:first-child {
    border-left: 0;
  }

  .home-page .process-section .section-heading {
    text-align: center;
  }

  .home-page .process-timeline {
    grid-template-columns: 1fr;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .process-timeline::before {
    display: block;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(180deg, var(--color-brand-orange) 0 8px, transparent 8px 14px);
    transform: translateX(-50%);
  }

  .home-page .process-step {
    grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    text-align: left;
    border-top: 0;
  }

  .home-page .process-step__number {
    grid-column: 2;
    justify-self: center;
  }

  .home-page .process-step__title {
    grid-column: 3;
  }

  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: left;
  }

  .site-footer__inner > div:first-child,
  .site-footer__inner > div:nth-child(4),
  .site-footer__inner > div:nth-child(5) {
    grid-column: 1 / -1;
  }

  .site-footer__inner > div:first-child,
  .site-footer__inner > div:nth-child(5) {
    text-align: center;
  }

  .site-footer__inner > div:first-child .site-footer__logo,
  .site-footer__text,
  .site-footer__qr {
    margin-right: auto;
    margin-left: auto;
  }

  .site-footer__socials {
    justify-content: center;
  }

  .site-footer__contact {
    justify-items: start;
  }

  .site-footer__bottom {
    text-align: center;
  }

  .section-heading,
  .section-heading--center,
  .home-page .featured-solution__content,
  .home-page .process-section .section-heading {
    text-align: left;
  }

  .section-heading--center {
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .section-heading--center .section-heading__eyebrow {
    justify-content: flex-start;
  }

  .home-page .featured-solution__content-inner {
    margin-left: 0;
  }

  .home-page .featured-solution__content-inner > .btn {
    margin-right: 0;
    margin-left: 0;
  }

  .home-page .featured-solution__content,
  .home-page .scada-band__content,
  .home-page .process-section {
    text-align: center;
  }

  .home-page .featured-solution__content {
    justify-content: center;
  }

  .home-page .featured-solution__content-inner,
  .home-page .scada-band__inner {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .featured-solution__content-inner > .btn {
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .scada-band__icons,
  .home-page .scada-band__metrics {
    margin-right: auto;
    margin-left: auto;
  }

  .home-page .process-section .section-heading {
    text-align: center;
  }

  /* Dự án / Kiến thức pages (2026-08-23 responsive pass, see the matching
     ≤1199px block above for context) */
  .project-stats {
    margin-top: 0;
  }

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

  .project-stat {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
    padding: 16px;
  }

  .project-stat span {
    width: 40px;
    height: 40px;
  }

  .project-stat svg,
  .project-stat i {
    width: 20px;
    height: 20px;
    font-size: 20px;
  }

  .project-stat strong {
    font-size: 22px;
  }

  .project-stat:nth-child(even) {
    border-left: 0;
  }

  .project-stat:nth-child(n + 3) {
    border-top: 1px solid var(--color-border);
  }

  .project-featured,
  .project-region,
  .case-hero,
  .case-content,
  .blog-feature,
  .blog-categories,
  .project-catalog,
  .project-questions,
  .blog-list,
  .project-dark,
  .article-layout {
    padding: 44px 0 52px;
  }

  .project-section-head h1,
  .project-section-head h2,
  .blog-list__head h2,
  .article-header h1,
  .case-hero h1 {
    font-size: 26px;
  }

  .blog-feature .project-section-head h1 {
    font-size: 30px;
  }

  .featured-project-grid {
    grid-template-columns: 1fr;
  }

  .featured-project {
    grid-template-columns: 1fr;
  }

  .featured-project img {
    min-height: 220px;
  }

  .filter-tabs button {
    min-height: 42px;
    padding: 0 16px;
    font-size: 12px;
  }

  .project-tile-grid,
  .blog-grid,
  .project-tile-grid--three,
  .blog-grid--three {
    grid-template-columns: 1fr;
  }

  .question-grid,
  .category-grid,
  .region-cards {
    grid-template-columns: 1fr;
  }

  .region-map {
    padding: 28px 20px;
  }

  .region-map::before {
    display: none;
  }

  .region-map__row,
  .region-map__row--left,
  .region-map__row--right {
    justify-content: flex-start;
    padding: 0;
  }

  .region-map__row::before,
  .region-map__row::after {
    display: none;
  }

  .region-map__box {
    width: 100%;
  }

  .project-dark li,
  .case-steps div {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 0 14px;
  }

  .case-steps div {
    padding: 16px 18px;
  }

  .newsletter {
    padding: 44px 0;
    background-position: 58% center;
  }

  .newsletter h2 {
    font-size: 26px;
  }

  .newsletter form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .blog-hero-card img {
    min-height: 220px;
  }

  .blog-hero-card > div {
    padding: 32px 24px;
  }

  .blog-hero-card h2 {
    font-size: 24px;
  }

  .article-cover {
    margin: 30px 0 34px;
  }

  .article-note ol {
    columns: 1;
  }

  .case-content table {
    display: block;
    overflow-x: auto;
  }

  .case-content th {
    width: 130px;
    padding: 12px 14px;
    font-size: 11px;
  }

  .case-content td {
    padding: 12px 14px;
  }

  .pagination {
    flex-wrap: wrap;
  }

  .navigation.pagination .nav-links {
    padding: 0 var(--gutter-tablet);
  }

  .contact-info-form,
  .contact-map-section,
  .contact-process {
    padding: 44px 0 52px;
  }

  .contact-card,
  .contact-form-panel {
    padding: 22px;
  }

  .contact-form__row {
    grid-template-columns: 1fr;
  }

  .contact-process__grid {
    grid-template-columns: 1fr;
  }

  .contact-map__frame {
    height: 280px;
  }

  .contact-map__panel {
    position: static;
    width: 100%;
    margin-top: 16px;
  }
}

@media (max-width: 1199px) {
  .case-hero.case-content {
    padding-top: 30px;
  }
}

@media (max-width: 767px) {
  .case-hero.case-content {
    padding-top: 22px;
  }
}