/* ==========================================================================
   ĐÁP ỨNG MÀN HÌNH ĐA THIẾT BỊ (RESPONSIVE: 1440px / 1024px / 768px / 360px)
   ========================================================================== */

/* Màn hình Tablet ngang & Laptop nhỏ (<= 1024px) */
@media (max-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .hero-stage {
    min-height: 400px;
  }

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

  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .projects-grid,
  .pricing-grid,
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cta-banner,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Màn hình Điện thoại & Tablet dọc (<= 768px) */
@media (max-width: 768px) {
  :root {
    --navbar-height: 68px;
  }

  .section {
    padding-block: var(--space-12);
  }

  /* Menu Hamburger toàn màn hình trên điện thoại */
  .navbar__toggle {
    display: inline-flex;
  }

  .navbar__nav {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    height: calc(100vh - var(--navbar-height));
    background-color: var(--color-surface);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: var(--space-6);
    gap: var(--space-2);
    border-top: 1px solid var(--color-border);
    transform: translateX(100%);
    transition: transform 300ms var(--ease-out);
    overflow-y: auto;
    z-index: 999;
  }

  .navbar--menu-open .navbar__nav {
    transform: translateX(0);
  }

  .navbar__link {
    font-size: var(--text-lg);
    padding: 0.85rem 1rem;
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  .navbar__link--active::after {
    display: none;
  }

  .navbar__cta-desktop {
    display: none;
  }

  .services-grid,
  .projects-grid,
  .pricing-grid,
  .testimonials-grid,
  .process-steps,
  .team-grid {
    grid-template-columns: 1fr;
  }

  .mockup-layer--logo {
    top: -10px;
    left: 0;
    width: 155px;
  }

  .mockup-layer--ads {
    bottom: -12px;
    right: 0;
    width: 180px;
  }

  .mockup-layer--banner {
    display: none;
  }

  .cta-banner {
    padding: var(--space-6);
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .lightbox__nav--prev {
    left: var(--space-2);
  }

  .lightbox__nav--next {
    right: var(--space-2);
  }
}

/* Màn hình Điện thoại nhỏ (<= 420px / 360px) */
@media (max-width: 420px) {
  .container {
    padding-inline: var(--space-4);
  }

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

  .hero__cta-group .btn {
    width: 100%;
  }

  .hero__trust {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}