/* ==========================================================================
   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));
  }

  /* Lưới dịch vụ (index "Dịch vụ của chúng tôi" + services.html).
     Trước đây nt-grid--4 KHÔNG được khai báo ở breakpoint nào trong khoảng
     641-900px, nên ở 768px nó vẫn giữ 4 cột: đo thật được mỗi thẻ chỉ rộng
     166px (cao 429px) — tiêu đề và mô tả bị bẻ vụn thành nhiều dòng ngắn.
     Về 2 cột cho tới khi carousel ở <=768px tiếp quản. */
  .nt-grid--4 {
    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);
  }

  /* Lưới dịch vụ (index "Dịch vụ của chúng tôi" + services.html).
     Trước đây nt-grid--4 giữ nguyên 4 cột ở 320-640px nên mỗi thẻ chỉ rộng
     56-134px: tiêu đề và mô tả bị bẻ đôi giữa từ, không đọc được.
     Đo thật tại 320px: cardW=66, tiêu đề "Vận chuyển hàng nguyên xe" vỡ 5 dòng. */
  .nt-grid--3,
  .nt-grid--4 {
    grid-template-columns: repeat(2, 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);
  }

  /* Dưới 480px thì 2 cột vẫn chỉ còn ~150px/thẻ -> về 1 cột cho dễ đọc.
     Giữ nguyên 480px trong media query này để không đổi các rule khác. */
  .nt-grid--3,
  .nt-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Thẻ dịch vụ trên điện thoại: bỏ khoảng thừa dọc, icon nằm cạnh tiêu đề
     thay vì chiếm trọn một hàng 54px.

     LƯU Ý: khối này chỉ còn áp dụng cho .nt-grid--3 (trang Tuyển dụng).
     Khối Dịch vụ dùng .nt-grid--4 nay là CAROUSEL vuốt 1 thẻ/1 khung nhìn
     từ 768px trở xuống — xem mục "PHẦN X" ở cuối tệp, có ghi đè riêng
     độ ưu tiên cao hơn cho .nt-grid--4 > .nt-service-card. */
  .nt-grid--3 > .nt-card,
  .nt-grid--4 > .nt-card {
    padding: var(--nt-space-4);
  }

  .nt-grid--3 > .nt-service-card,
  .nt-grid--4 > .nt-service-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: var(--nt-space-3);
    align-items: start;
  }

  .nt-grid--3 > .nt-service-card .nt-service-card__icon,
  .nt-grid--4 > .nt-service-card .nt-service-card__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 46px;
    height: 46px;
    margin-bottom: 0;
  }

  .nt-grid--3 > .nt-service-card .nt-service-card__icon .nt-icon,
  .nt-grid--4 > .nt-service-card .nt-service-card__icon .nt-icon {
    width: 22px;
    height: 22px;
  }

  .nt-grid--3 > .nt-service-card .nt-service-card__title,
  .nt-grid--4 > .nt-service-card .nt-service-card__title {
    grid-column: 2;
    margin-bottom: var(--nt-space-2);
  }

  .nt-grid--3 > .nt-service-card .nt-service-card__desc,
  .nt-grid--4 > .nt-service-card .nt-service-card__desc {
    grid-column: 1 / -1;
  }

  .nt-grid--3 > .nt-service-card .nt-service-card__link,
  .nt-grid--4 > .nt-service-card .nt-service-card__link {
    grid-column: 1 / -1;
    margin-top: 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;
  }
}

/* ==========================================================================
   PHẦN X — CAROUSEL VUỐT CHO KHỐI DỊCH VỤ TRÊN MOBILE
   ==========================================================================
   Vấn đề: ở 481-640px khối Dịch vụ là lưới 2 cột, mỗi thẻ chỉ ~150-190px nên
   tiêu đề bị bẻ đôi giữa từ; ở 641-900px lại là 4 cột ~166px, tệ hơn nữa.
   Cách sửa: từ 768px trở xuống, biến chính lưới đó thành một dải cuộn ngang
   có scroll-snap — mỗi thẻ chiếm trọn 1 khung nhìn, vuốt là chuyển thẻ.

   Chỉ dùng CSS cho phần cuộn (scroll-snap chạy native, mượt trên iOS/Android);
   nút trước/sau + chấm vị trí do js/components.js dựng thêm (initServiceCarousels).

   Độ ưu tiên: các selector dưới đây có 3 lớp (.nt-grid--4 + [data-nt] + con)
   nên luôn thắng luật .nt-grid--4 > .nt-service-card ở khối <=480px phía trên,
   bất kể thứ tự khai báo.
   ========================================================================== */

/* Nút điều hướng chỉ có ý nghĩa ở chế độ carousel */
.nt-carousel-nav {
  display: none;
}

@media (max-width: 768px) {
  /* ---- Dải cuộn ---- */
  .nt-grid--4[data-nt="services"],
  .nt-grid--4[data-nt="services-detail"] {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--nt-space-4);

    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-inline: var(--nt-gutter);
    -webkit-overflow-scrolling: touch;

    /* Ẩn thanh cuộn: người dùng vuốt, không kéo thanh */
    scrollbar-width: none;
    -ms-overflow-style: none;

    /* Tràn ra sát mép màn hình: ở <=768px --nt-container = 100% và
       .nt-container đã có padding-inline = --nt-gutter, nên -gutter ở đây
       đưa hộp về đúng bề rộng khung nhìn (không tạo tràn ngang), còn
       padding-inline giữ cho thẻ đầu/cuối thẳng hàng với phần nội dung. */
    margin-inline: calc(var(--nt-gutter) * -1);
    padding-inline: var(--nt-gutter);
    padding-block: var(--nt-space-1) var(--nt-space-3);
  }

  .nt-grid--4[data-nt="services"]::-webkit-scrollbar,
  .nt-grid--4[data-nt="services-detail"]::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  /* ---- Mỗi thẻ = 1 khung nhìn ---- */
  .nt-grid--4[data-nt="services"] > *,
  .nt-grid--4[data-nt="services-detail"] > * {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    scroll-snap-align: start;
    /* Hoàn tác lưới 2 cột (icon bên cạnh tiêu đề) của khối <=480px */
    display: block;
  }

  .nt-grid--4[data-nt="services"] > .nt-service-card .nt-service-card__icon,
  .nt-grid--4[data-nt="services-detail"] > .nt-service-card .nt-service-card__icon {
    width: 54px;
    height: 54px;
    margin-bottom: var(--nt-space-4);
  }

  .nt-grid--4[data-nt="services"] > .nt-service-card .nt-service-card__icon .nt-icon,
  .nt-grid--4[data-nt="services-detail"] > .nt-service-card .nt-service-card__icon .nt-icon {
    width: 26px;
    height: 26px;
  }

  .nt-grid--4[data-nt="services"] > .nt-service-card .nt-service-card__link,
  .nt-grid--4[data-nt="services-detail"] > .nt-service-card .nt-service-card__link {
    margin-top: var(--nt-space-4);
  }

  /* ---- Cụm điều hướng ---- */
  .nt-carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nt-space-3);
    margin-top: var(--nt-space-5);
  }

  .nt-carousel-nav__btn {
    display: grid;
    place-items: center;
    width: 44px;                 /* vùng bấm tối thiểu 44x44 */
    height: 44px;
    padding: 0;
    border: 1px solid var(--nt-line);
    border-radius: 50%;
    background: var(--nt-bg);
    color: var(--nt-ink-900);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  }

  .nt-carousel-nav__btn:hover:not(:disabled) {
    background: var(--nt-bg-soft);
    border-color: var(--nt-ink-400);
  }

  .nt-carousel-nav__btn:disabled {
    opacity: 0.35;
    cursor: default;
  }

  .nt-carousel-nav__btn .nt-icon {
    width: 18px;
    height: 18px;
  }

  /* Không có icon arrow-left trong bộ icon -> lật ngược arrow-right */
  .nt-carousel-nav__btn--prev .nt-icon {
    transform: rotate(180deg);
  }

  .nt-carousel-nav__dots {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .nt-carousel-nav__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--nt-line);
    cursor: pointer;
    transition: width 0.22s ease, background-color 0.22s ease;
  }

  /* Chấm đang xem dài ra thành viên thuốc để dễ nhận biết */
  .nt-carousel-nav__dot.is-active {
    width: 22px;
    background: var(--nt-red-600);
  }

  .nt-carousel-nav__dot:focus-visible,
  .nt-carousel-nav__btn:focus-visible {
    outline: 2px solid var(--nt-red-600);
    outline-offset: 2px;
  }
}

/* Từ 769px trở lên: về lại lưới thường, ẩn cụm điều hướng */
@media (min-width: 769px) {
  .nt-carousel-nav {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   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,
  .nt-carousel-nav,
  [data-reveal] {
    display: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Bản in: trả dải cuộn về lưới để in đủ 8 dịch vụ, không bị cắt còn 1 thẻ */
  .nt-grid--4[data-nt="services"],
  .nt-grid--4[data-nt="services-detail"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  .nt-grid--4[data-nt="services"] > *,
  .nt-grid--4[data-nt="services-detail"] > * {
    flex: none !important;
  }

  body {
    padding-bottom: 0;
  }
}