/* ==========================================================================
   responsive.css — Điều chỉnh theo từng breakpoint
   Đã kiểm tra: 1440 / 1280 / 1024 / 768 / 640 / 480 / 390 / 375 / 320
   Nguyên tắc: không tràn ngang, không vỡ form, card tự xuống hàng,
   font không nhỏ hơn 12px, vùng bấm >= 44px trên mobile.
   ========================================================================== */

/* --------------------------------------------------------------------------
   >= 1400px — màn hình lớn: container rộng hơn cho hero
   -------------------------------------------------------------------------- */
@media (min-width: 1400px) {
  .nt-hero__inner {
    gap: var(--nt-space-10);
  }
}

/* --------------------------------------------------------------------------
   <= 1400px — thanh menu vừa khít
   --------------------------------------------------------------------------
   Mục "Liên hệ" nay có menu xổ xuống nên có thêm mũi tên (caret) cạnh nhãn,
   làm thanh menu rộng thêm ~18px. Ở 1201px — ngay trên ngưỡng hamburger
   1200px — chỗ vốn đã vừa khít, nên 18px đó gây TRÀN NGANG:
       đo được 11px tràn ở 1201px, 2px ở 1220px, hết tràn từ 1240px.
   Thu hẹp khoảng đệm ngang của mỗi mục một chút để lấy lại chỗ.

   CHỈ áp dụng từ 1400px trở xuống, nên từ 1401px trở lên giao diện giữ
   nguyên hoàn toàn. Mục đang xem có gạch chân định vị theo khoảng đệm này
   nên phải chỉnh cho khớp, nếu không gạch sẽ lệch khỏi chữ.
   -------------------------------------------------------------------------- */
@media (max-width: 1400px) {
  .nt-nav__link {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }

  .nt-nav__link.is-active::after {
    left: 0.4rem;
    right: 0.4rem;
  }
}

/* --------------------------------------------------------------------------
   <= 1280px — laptop nhỏ
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  :root {
    --nt-container: 1140px;
  }

  .nt-hero__chip--tl {
    left: -0.75rem;
  }

  .nt-hero__chip--br {
    right: -0.75rem;
  }
}

/* --------------------------------------------------------------------------
   <= 1200px — chuyển sang menu hamburger.
   Ngưỡng này được chọn theo chiều rộng thật của 8 mục menu + logo + nút CTA:
   dưới 1200px thanh menu không còn đủ chỗ trên một dòng.
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .nt-nav {
    display: none;
  }

  .nt-burger {
    display: grid;
  }

  .nt-header__inner {
    min-height: 68px;
  }

  .nt-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nt-space-8);
  }

  .nt-hero__media {
    max-width: 620px;
  }

  .nt-about {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nt-space-7);
  }

  .nt-about__media {
    max-width: 620px;
  }

  /* Ẩn khối trang trí sau ảnh: ở màn hình hẹp nó nằm sát mép container
     và có thể tạo khoảng tràn ngang nhỏ. */
  .nt-about__media::before {
    display: none;
  }

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

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

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

  .nt-partners {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

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

  .nt-filter__reset {
    grid-column: 1 / -1;
  }

  .nt-cta__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--nt-space-6);
  }
}

/* --------------------------------------------------------------------------
   <= 900px — tablet dọc
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .nt-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nt-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nt-space-7);
  }

  /* Bỏ đường nối ngang khi timeline xuống 2 hàng */
  .nt-process::before {
    display: none;
  }

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

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

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

  .nt-quote {
    margin-top: calc(var(--nt-space-7) * -1);
  }
}

/* --------------------------------------------------------------------------
   <= 768px — tablet nhỏ / điện thoại ngang
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --nt-container: 100%;
    --nt-section-py: 3.25rem;
    --nt-fs-3xl: 1.875rem;
    --nt-fs-2xl: 1.5rem;
  }

  /* Topbar trên mobile: chỉ giữ hotline để thanh này gọn 1 dòng.
     Email và giờ làm việc vẫn có trong menu di động, footer và trang Liên hệ. */
  .nt-topbar__social,
  .nt-topbar__item--email,
  .nt-topbar__item--hours {
    display: none;
  }

  .nt-topbar__inner {
    justify-content: center;
  }

  .nt-topbar__list {
    gap: var(--nt-space-4);
    font-size: var(--nt-fs-xs);
  }

  .nt-hero {
    padding-block: var(--nt-space-7) var(--nt-space-9);
  }

  .nt-hero__lead {
    font-size: var(--nt-fs-md);
  }

  .nt-hero__chip {
    padding: var(--nt-space-2) var(--nt-space-3);
  }

  .nt-hero__chip strong {
    font-size: var(--nt-fs-base);
  }

  .nt-hero__chip--tl {
    top: 0.75rem;
    left: 0.75rem;
  }

  .nt-hero__chip--br {
    bottom: 0.75rem;
    right: 0.75rem;
  }

  .nt-quote__card,
  .nt-contact__form {
    padding: var(--nt-space-5);
  }

  .nt-quote__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--nt-space-3);
  }

  /* Hiện thanh CTA cố định, ẩn cụm floating */
  .nt-floating {
    display: none;
  }

  .nt-mobile-bar {
    display: grid;
  }

  /* Chừa chỗ cho thanh CTA đáy */
  body {
    padding-bottom: 58px;
  }

  .nt-btn {
    padding: 0.75rem 1.25rem;
  }

  .nt-table {
    font-size: var(--nt-fs-sm);
  }

  .nt-table thead th,
  .nt-table tbody td {
    padding: 0.75rem 0.85rem;
  }
}

/* --------------------------------------------------------------------------
   <= 640px — điện thoại
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .nt-quote__form,
  .nt-filter {
    grid-template-columns: minmax(0, 1fr);
  }

  .nt-why,
  .nt-news-grid,
  .nt-route-list {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .nt-stats {
    gap: var(--nt-space-4);
  }

  .nt-stat {
    padding: var(--nt-space-5) var(--nt-space-4);
  }

  .nt-stat__value {
    font-size: var(--nt-fs-2xl);
  }

  .nt-hero__actions,
  .nt-cta__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .nt-hero__actions .nt-btn,
  .nt-cta__actions .nt-btn {
    width: 100%;
  }

  .nt-logo__mark {
    width: 38px;
    height: 38px;
  }

  .nt-logo__name {
    font-size: 0.9375rem;
  }

  /* Header gọn: ẩn nút CTA chữ dài, giữ nút gọi */
  .nt-header__actions .nt-btn span {
    display: none;
  }

  .nt-header__actions .nt-btn {
    padding: 0.65rem 0.85rem;
  }

  .nt-map {
    height: 320px;
  }
}

/* --------------------------------------------------------------------------
   <= 480px — điện thoại nhỏ
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* 4 điểm nổi bật: giữ 2 cột cho tới 360px để hero không quá dài */
  .nt-hero__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nt-space-3) var(--nt-space-4);
  }

  .nt-process {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
  }

  .nt-step {
    text-align: left;
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: var(--nt-space-4);
  }

  .nt-step__dot {
    width: 56px;
    height: 56px;
    margin: 0;
    grid-row: span 3;
  }

  .nt-step__dot .nt-icon {
    width: 24px;
    height: 24px;
  }

  .nt-footer__main {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nt-space-6);
    padding-block: var(--nt-space-7) var(--nt-space-6);
  }

  .nt-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .nt-route__path {
    font-size: var(--nt-fs-base);
  }

  .nt-route__actions .nt-btn {
    flex: 1;
  }

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

  .nt-map {
    height: 260px;
  }
}

/* --------------------------------------------------------------------------
   <= 390px — iPhone 12/13/14
   -------------------------------------------------------------------------- */
@media (max-width: 390px) {
  :root {
    --nt-gutter: 0.875rem;
    --nt-fs-3xl: 1.625rem;
  }

  .nt-quote__card,
  .nt-contact__form,
  .nt-route-column {
    padding: var(--nt-space-4);
  }

  .nt-topbar__item--hours {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   <= 360px / 320px — thiết bị nhỏ nhất
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  :root {
    --nt-fs-base: 0.875rem;
    --nt-gutter: 0.75rem;
  }

  /* Header phải vừa trong 320px: thu gọn logo, khoảng cách và nút bấm */
  .nt-header__inner {
    gap: var(--nt-space-2);
  }

  .nt-logo {
    gap: var(--nt-space-2);
  }

  .nt-logo__mark {
    width: 34px;
    height: 34px;
  }

  .nt-logo__mark .nt-icon {
    width: 20px;
    height: 20px;
  }

  .nt-logo__name {
    font-size: 0.8125rem;
    letter-spacing: 0;
  }

  .nt-logo__sub {
    font-size: 0.5625rem;
    letter-spacing: 0.14em;
  }

  .nt-header__actions {
    gap: var(--nt-space-2);
  }

  .nt-header__actions .nt-btn {
    padding: 0.6rem 0.7rem;
  }

  .nt-burger {
    width: 40px;
    height: 40px;
  }

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

  .nt-btn {
    padding: 0.7rem 1rem;
    font-size: var(--nt-fs-xs);
  }

  .nt-drawer {
    width: 92vw;
  }

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

  .nt-mobile-bar__item {
    font-size: 0.625rem;
  }
}

/* --------------------------------------------------------------------------
   In ấn — ẩn thành phần điều hướng
   -------------------------------------------------------------------------- */
@media print {
  .nt-header,
  .nt-topbar,
  .nt-floating,
  .nt-mobile-bar,
  .nt-drawer,
  .nt-drawer-backdrop,
  .nt-cta,
  [data-reveal] {
    display: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body {
    padding-bottom: 0;
  }
}