/* ==========================================================================
   components.css — Thành phần UI tái sử dụng
   (button, card, badge, form, section header, table, breadcrumb, alert...)
   ========================================================================== */

/* --------------------------------------------------------------------------
   LAYOUT CƠ BẢN
   -------------------------------------------------------------------------- */
.nt-container {
  width: 100%;
  max-width: var(--nt-container);
  margin-inline: auto;
  padding-inline: var(--nt-gutter);
}

.nt-container--wide {
  max-width: var(--nt-container-wide);
}

.nt-section {
  padding-block: var(--nt-section-py);
}

.nt-section--soft {
  background-color: var(--nt-bg-soft);
}

.nt-section--dark {
  background: var(--nt-gradient-hero);
  color: rgba(255, 255, 255, 0.82);
}

.nt-section--dark h2,
.nt-section--dark h3,
.nt-section--dark h4 {
  color: #fff;
}

/* --------------------------------------------------------------------------
   SECTION HEADER (eyebrow + title + description)
   -------------------------------------------------------------------------- */
.nt-section-head {
  max-width: 720px;
  margin-bottom: var(--nt-space-7);
}

.nt-section-head--center {
  margin-inline: auto;
  text-align: center;
}

.nt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--nt-space-2);
  margin-bottom: var(--nt-space-3);
  font-size: var(--nt-fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nt-blue-600);
}

.nt-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--nt-orange-500);
}

.nt-section-head--center .nt-eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--nt-orange-500);
}

.nt-section--dark .nt-eyebrow {
  color: var(--nt-blue-300);
}

.nt-section-title {
  font-size: var(--nt-fs-3xl);
  letter-spacing: -0.02em;
}

.nt-section-desc {
  margin-top: var(--nt-space-4);
  color: var(--nt-ink-500);
  font-size: var(--nt-fs-md);
}

.nt-section--dark .nt-section-desc {
  color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------------------
   BUTTON
   -------------------------------------------------------------------------- */
.nt-btn {
  --btn-bg: var(--nt-blue-600);
  --btn-fg: #fff;
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nt-space-2);
  padding: 0.8rem 1.5rem;
  border: 1.5px solid var(--btn-border);
  border-radius: var(--nt-radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--nt-fs-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform var(--nt-transition), box-shadow var(--nt-transition),
    background-color var(--nt-transition), color var(--nt-transition), border-color var(--nt-transition);
}

.nt-btn .nt-icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.nt-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--nt-shadow);
}

.nt-btn:active {
  transform: translateY(0);
}

.nt-btn:focus-visible {
  outline: 3px solid var(--nt-blue-300);
  outline-offset: 2px;
}

/* Biến thể */
.nt-btn--accent {
  --btn-bg: var(--nt-orange-500);
  --btn-fg: #fff;
}

.nt-btn--accent:hover {
  --btn-bg: var(--nt-orange-600);
  box-shadow: var(--nt-shadow-accent);
}

.nt-btn--navy {
  --btn-bg: var(--nt-navy-800);
  --btn-fg: #fff;
}

.nt-btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--nt-navy-800);
  --btn-border: var(--nt-line);
}

.nt-btn--outline:hover {
  --btn-border: var(--nt-blue-600);
  --btn-fg: var(--nt-blue-600);
  --btn-bg: var(--nt-sky-50);
}

.nt-btn--ghost-light {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-fg: #fff;
  --btn-border: rgba(255, 255, 255, 0.35);
}

.nt-btn--ghost-light:hover {
  --btn-bg: rgba(255, 255, 255, 0.16);
  --btn-border: #fff;
}

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

.nt-btn--lg {
  padding: 1rem 2rem;
  font-size: var(--nt-fs-base);
}

.nt-btn--block {
  width: 100%;
}

.nt-btn[disabled],
.nt-btn[aria-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
}

/* Nhóm button */
.nt-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nt-space-3);
}

/* --------------------------------------------------------------------------
   CARD
   -------------------------------------------------------------------------- */
.nt-card {
  display: flex;
  flex-direction: column;
  padding: var(--nt-space-6);
  background: var(--nt-bg);
  border: 1px solid var(--nt-line-soft);
  border-radius: var(--nt-radius);
  box-shadow: var(--nt-shadow-xs);
  transition: transform var(--nt-transition), box-shadow var(--nt-transition), border-color var(--nt-transition);
}

.nt-card:hover {
  transform: translateY(-4px);
  border-color: var(--nt-sky-100);
  box-shadow: var(--nt-shadow);
}

/* Card dịch vụ */
.nt-service-card {
  position: relative;
  height: 100%;
  overflow: hidden;
}

/* Vạch màu chạy ngang khi hover */
.nt-service-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: var(--nt-gradient-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--nt-transition-slow);
}

.nt-service-card:hover::before {
  transform: scaleX(1);
}

.nt-service-card__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: var(--nt-space-5);
  border-radius: var(--nt-radius-sm);
  background: var(--nt-sky-50);
  color: var(--nt-blue-600);
  transition: background-color var(--nt-transition), color var(--nt-transition);
}

.nt-service-card__icon .nt-icon {
  width: 26px;
  height: 26px;
}

.nt-service-card:hover .nt-service-card__icon {
  background: var(--nt-gradient-brand);
  color: #fff;
}

.nt-service-card__title {
  font-size: var(--nt-fs-lg);
  margin-bottom: var(--nt-space-3);
}

.nt-service-card__desc {
  flex: 1;
  color: var(--nt-ink-500);
  font-size: var(--nt-fs-base);
}

.nt-service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--nt-space-2);
  margin-top: var(--nt-space-5);
  font-size: var(--nt-fs-sm);
  font-weight: 700;
  color: var(--nt-blue-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nt-service-card__link .nt-icon {
  width: 1em;
  height: 1em;
  transition: transform var(--nt-transition);
}

.nt-service-card:hover .nt-service-card__link .nt-icon {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   GRID TIỆN ÍCH
   -------------------------------------------------------------------------- */
.nt-grid {
  display: grid;
  gap: var(--nt-space-5);
}

/* --------------------------------------------------------------------------
   CHỐNG TRÀN NGANG
   Grid/flex item mặc định có `min-width: auto`, nên một chuỗi dài không ngắt
   được (email, URL, số điện thoại) có thể đẩy cột rộng hơn container và làm
   cả trang bị cuộn ngang trên mobile. Ép về 0 cho toàn bộ lưới của site.
   -------------------------------------------------------------------------- */
.nt-grid > *,
.nt-contact > *,
.nt-contact__info > *,
.nt-footer__main > *,
.nt-route-columns > *,
.nt-route-list > *,
.nt-news-grid > *,
.nt-why > *,
.nt-process > *,
.nt-stats > *,
.nt-partners > *,
.nt-quote__form > *,
.nt-filter > *,
.nt-form__row > *,
.nt-about > * {
  min-width: 0;
}

/* Chuỗi dài trong nội dung được phép ngắt dòng */
.nt-info-card__value,
.nt-footer__contact-item span,
.nt-drawer__contact span,
.nt-about__body p,
.nt-prose p {
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   VÙNG BẤM TRÊN THIẾT BỊ CẢM ỨNG
   Đảm bảo liên kết trong menu, footer và thanh điều hướng đủ lớn để bấm.
   -------------------------------------------------------------------------- */
.nt-footer__list a,
.nt-footer__policy a,
.nt-drawer__sub-inner a {
  min-height: 40px;
}

.nt-footer__list a,
.nt-footer__policy a {
  display: inline-flex;
  align-items: center;
  padding-block: 0.3rem;
}

.nt-drawer__sub-inner a {
  display: flex;
  align-items: center;
  padding-block: 0.55rem;
}

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

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

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

.nt-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* --------------------------------------------------------------------------
   BADGE / CHIP
   -------------------------------------------------------------------------- */
.nt-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--nt-space-2);
  padding: 0.3rem 0.7rem;
  border-radius: var(--nt-radius-pill);
  background: var(--nt-sky-50);
  color: var(--nt-blue-600);
  font-size: var(--nt-fs-xs);
  font-weight: 600;
}

.nt-badge--accent {
  background: rgba(249, 115, 22, 0.1);
  color: var(--nt-orange-600);
}

.nt-badge--light {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

/* --------------------------------------------------------------------------
   FORM
   -------------------------------------------------------------------------- */
.nt-form {
  display: grid;
  gap: var(--nt-space-4);
}

.nt-form__row {
  display: grid;
  gap: var(--nt-space-4);
}

.nt-field {
  display: flex;
  flex-direction: column;
  gap: var(--nt-space-2);
  min-width: 0; /* chống vỡ grid trên mobile */
}

.nt-field__label {
  font-size: var(--nt-fs-sm);
  font-weight: 600;
  color: var(--nt-ink-900);
}

.nt-field__label .nt-req {
  color: var(--nt-danger);
  margin-left: 2px;
}

.nt-field__hint {
  font-size: var(--nt-fs-xs);
  color: var(--nt-ink-400);
}

.nt-input,
.nt-select,
.nt-textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--nt-line);
  border-radius: var(--nt-radius-sm);
  background: var(--nt-bg);
  color: var(--nt-ink-900);
  font-size: var(--nt-fs-base);
  transition: border-color var(--nt-transition), box-shadow var(--nt-transition);
}

.nt-input::placeholder,
.nt-textarea::placeholder {
  color: var(--nt-ink-400);
}

.nt-input:focus,
.nt-select:focus,
.nt-textarea:focus {
  outline: none;
  border-color: var(--nt-blue-500);
  box-shadow: 0 0 0 3px rgba(26, 111, 212, 0.14);
}

.nt-select {
  appearance: none;
  padding-right: 2.4rem;
  /* Mũi tên select dạng SVG inline — không cần file ngoài */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 16px;
}

.nt-textarea {
  min-height: 108px;
}

/* Trạng thái lỗi */
.nt-field.is-invalid .nt-input,
.nt-field.is-invalid .nt-select,
.nt-field.is-invalid .nt-textarea {
  border-color: var(--nt-danger);
}

.nt-field.is-invalid .nt-input:focus,
.nt-field.is-invalid .nt-select:focus,
.nt-field.is-invalid .nt-textarea:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

.nt-field__error {
  display: none;
  font-size: var(--nt-fs-xs);
  font-weight: 500;
  color: var(--nt-danger);
}

.nt-field.is-invalid .nt-field__error {
  display: block;
}

/* --------------------------------------------------------------------------
   ALERT / THÔNG BÁO
   -------------------------------------------------------------------------- */
.nt-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--nt-space-3);
  padding: var(--nt-space-4);
  border-radius: var(--nt-radius-sm);
  border: 1px solid transparent;
  font-size: var(--nt-fs-base);
}

.nt-alert .nt-icon {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
}

.nt-alert--success {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
}

.nt-alert--error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.nt-alert--info {
  background: var(--nt-sky-50);
  border-color: var(--nt-sky-100);
  color: var(--nt-blue-600);
}

/* --------------------------------------------------------------------------
   BẢNG
   -------------------------------------------------------------------------- */
.nt-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--nt-line);
  border-radius: var(--nt-radius);
  background: var(--nt-bg);
}

.nt-table {
  min-width: 720px; /* đảm bảo cuộn ngang trên mobile thay vì vỡ chữ */
  font-size: var(--nt-fs-base);
}

.nt-table thead th {
  padding: 0.9rem 1rem;
  background: var(--nt-navy-800);
  color: #fff;
  font-size: var(--nt-fs-sm);
  font-weight: 700;
  text-align: left;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nt-table tbody td {
  padding: 0.9rem 1rem;
  border-top: 1px solid var(--nt-line-soft);
  vertical-align: middle;
}

.nt-table tbody tr:hover {
  background: var(--nt-sky-50);
}

.nt-table__route {
  font-weight: 600;
  color: var(--nt-ink-900);
  white-space: nowrap;
}

.nt-table__price {
  font-weight: 700;
  color: var(--nt-orange-600);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   BREADCRUMB + PAGE HERO (trang con)
   -------------------------------------------------------------------------- */
.nt-page-hero {
  position: relative;
  padding-block: var(--nt-space-9) var(--nt-space-8);
  background: var(--nt-gradient-hero);
  color: rgba(255, 255, 255, 0.8);
  overflow: hidden;
}

.nt-page-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -140px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 111, 212, 0.45) 0%, transparent 70%);
  pointer-events: none;
}

.nt-page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.nt-page-hero h1 {
  color: #fff;
  font-size: var(--nt-fs-3xl);
  letter-spacing: -0.02em;
}

.nt-page-hero p {
  margin-top: var(--nt-space-4);
  font-size: var(--nt-fs-md);
}

.nt-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nt-space-2);
  margin-bottom: var(--nt-space-4);
  font-size: var(--nt-fs-sm);
  color: rgba(255, 255, 255, 0.65);
}

.nt-breadcrumb a:hover {
  color: #fff;
}

.nt-breadcrumb__sep {
  color: rgba(255, 255, 255, 0.4);
}

.nt-breadcrumb [aria-current="page"] {
  color: var(--nt-blue-300);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   ICON (SVG inline do js/icons.js chèn vào)
   -------------------------------------------------------------------------- */
.nt-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* --------------------------------------------------------------------------
   TIỆN ÍCH NHỎ
   -------------------------------------------------------------------------- */
.nt-text-center {
  text-align: center;
}

.nt-mt-6 {
  margin-top: var(--nt-space-6);
}

.nt-mt-8 {
  margin-top: var(--nt-space-8);
}

.nt-hidden {
  display: none;
}

.nt-empty {
  padding: var(--nt-space-8) var(--nt-space-4);
  text-align: center;
  color: var(--nt-ink-500);
}

/* --------------------------------------------------------------------------
   CHIA SẺ MẠNG XÃ HỘI  (BƯỚC 13)
   Logo mạng xã hội phải TÔ KÍN nên dùng .nt-share__ico (fill),
   KHÔNG dùng .nt-icon (vốn là nét vẽ, fill:none).
   -------------------------------------------------------------------------- */
.nt-share {
  margin-top: var(--nt-space-5);
}
.nt-share__label {
  display: block;
  font-size: var(--nt-fs-sm);
  font-weight: 600;
  color: var(--nt-ink-700);
  margin-bottom: var(--nt-space-2);
}
.nt-share__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nt-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: var(--nt-radius-pill);
  border: 1px solid var(--nt-line);
  background: #fff;
  color: var(--nt-ink-700);
  font: inherit;
  font-size: var(--nt-fs-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: var(--nt-transition);
}
.nt-share__btn:hover {
  border-color: currentColor;
  transform: translateY(-1px);
}
.nt-share__ico {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
  stroke: none;
  flex: none;
}
.nt-share__btn--facebook:hover  { color: #1877f2; }
.nt-share__btn--zalo:hover      { color: #0068ff; }
.nt-share__btn--messenger:hover { color: #0084ff; }
.nt-share__btn--telegram:hover  { color: #229ed9; }
.nt-share__btn--whatsapp:hover  { color: #25d366; }
.nt-share__btn--copy:hover      { color: var(--nt-navy-700); }
.nt-share__btn.is-done { color: var(--nt-success); border-color: currentColor; }
.nt-share__btn.is-fail { color: var(--nt-danger);  border-color: currentColor; }

/* Trên thẻ tin: chỉ icon cho gọn */
.nt-share--compact { margin-top: var(--nt-space-3); }
.nt-share--compact .nt-share__list { gap: 6px; }
.nt-share--compact .nt-share__btn {
  padding: 7px;
  border-radius: 50%;
  border-color: transparent;
  background: var(--nt-bg-soft);
  color: var(--nt-ink-500);
}
.nt-share--compact .nt-share__ico { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   CHI TIẾT BÀI VIẾT  (news.html?slug=...)
   -------------------------------------------------------------------------- */
[data-nt="article"][hidden] { display: none; }

.nt-article {
  max-width: 820px;
  margin-inline: auto;
}
.nt-article__title {
  font-family: var(--nt-font-heading);
  font-size: var(--nt-fs-3xl);
  line-height: var(--nt-lh-tight);
  color: var(--nt-navy-900);
  margin: var(--nt-space-4) 0 var(--nt-space-3);
}
.nt-article__meta {
  font-size: var(--nt-fs-sm);
  color: var(--nt-ink-500);
  margin-bottom: var(--nt-space-5);
}
.nt-article__meta span { color: var(--nt-line); }
.nt-article__figure { margin: 0 0 var(--nt-space-6); }
.nt-article__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--nt-radius-lg);
}
.nt-article__figure figcaption {
  margin-top: var(--nt-space-2);
  font-size: var(--nt-fs-sm);
  color: var(--nt-ink-500);
  text-align: center;
}
.nt-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--nt-space-5);
}
.nt-tag {
  font-size: var(--nt-fs-xs);
  padding: 5px 11px;
  border-radius: var(--nt-radius-pill);
  background: var(--nt-bg-soft);
  color: var(--nt-ink-700);
}
.nt-article__back { margin-top: var(--nt-space-6); }
.nt-article__back a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--nt-navy-700);
  text-decoration: none;
}
.nt-flip-x { transform: rotate(180deg); }

/* Khi đang xem 1 bài viết: ẩn danh sách + hướng dẫn đóng gói + hero trang,
   để trang chỉ còn MỘT thẻ <h1> duy nhất (tốt cho SEO). */
html[data-nt-view="article"] [data-nt="news-list"],
html[data-nt-view="article"] [data-nt="news-guide"],
html[data-nt-view="article"] .nt-page-hero { display: none; }

/* Ghi chú "nội dung mẫu" chỉ đúng khi chạy bằng js/data.js (offline).
   Khi đã nối database thì ẩn đi cho khỏi sai sự thật. */
html[data-nt-source="api"] [data-nt-offline-note] { display: none; }
.nt-article__title--sm { font-size: var(--nt-fs-xl); margin-top: 0; }

/* ==========================================================================
   CÂU HỎI THƯỜNG GẶP  (BƯỚC 12)
   --------------------------------------------------------------------------
   Accordion dựng trên <details>/<summary> của HTML gốc — không phải div
   tự chế. Nhờ vậy khi JavaScript lỗi hoặc bị tắt, khách vẫn mở được câu
   trả lời, và Ctrl+F của trình duyệt vẫn tìm thấy nội dung bên trong.
   ========================================================================== */

.nt-faq { max-width: 880px; margin-inline: auto; }

/* ---------- Thanh công cụ: ô tìm kiếm + chuyên mục + nút ---------- */
.nt-faq__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nt-space-3);
  margin-bottom: var(--nt-space-4);
}

.nt-faq__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 320px;
  min-width: 0;
}

.nt-faq__search-ico {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--nt-ink-400);
  pointer-events: none;
}

.nt-faq__search input {
  width: 100%;
  padding: 12px 16px 12px 42px;
  font: inherit;
  font-size: var(--nt-fs-base);
  color: var(--nt-ink-900);
  background: var(--nt-bg);
  border: 1px solid var(--nt-line);
  border-radius: var(--nt-radius-pill);
  transition: border-color var(--nt-dur-fast) var(--nt-ease),
              box-shadow var(--nt-dur-fast) var(--nt-ease);
}

.nt-faq__search input::placeholder { color: var(--nt-ink-400); }

.nt-faq__search input:focus {
  outline: none;
  border-color: var(--nt-blue-500);
  box-shadow: 0 0 0 3px rgba(26, 111, 212, 0.15);
}

.nt-faq__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.nt-chip {
  padding: 8px 15px;
  font: inherit;
  font-size: var(--nt-fs-sm);
  font-weight: 600;
  color: var(--nt-ink-700);
  background: var(--nt-bg-soft);
  border: 1px solid var(--nt-line);
  border-radius: var(--nt-radius-pill);
  cursor: pointer;
  transition: color var(--nt-dur-fast) var(--nt-ease),
              background var(--nt-dur-fast) var(--nt-ease),
              border-color var(--nt-dur-fast) var(--nt-ease);
}

.nt-chip:hover { color: var(--nt-navy-800); border-color: var(--nt-blue-300); }

.nt-chip.is-on {
  color: #fff;
  background: var(--nt-navy-800);
  border-color: var(--nt-navy-800);
}

.nt-faq__actions { display: flex; gap: 8px; margin-left: auto; }

.nt-faq__count {
  margin: 0 0 var(--nt-space-3);
  font-size: var(--nt-fs-sm);
  color: var(--nt-ink-500);
}

/* ---------- Danh sách ---------- */
.nt-faq__list { display: grid; gap: 10px; }

.nt-faq__item {
  background: var(--nt-bg);
  border: 1px solid var(--nt-line);
  border-radius: var(--nt-radius-lg);
  overflow: hidden;
  transition: border-color var(--nt-dur-fast) var(--nt-ease),
              box-shadow var(--nt-dur-fast) var(--nt-ease);
}

.nt-faq__item:hover { border-color: var(--nt-blue-300); }

.nt-faq__item[open] {
  border-color: var(--nt-blue-400);
  box-shadow: var(--nt-shadow-sm);
}

/* [hidden] của HTML bị `display:block` của <details> ghi đè, nên phải
   khai báo lại — nếu không, lọc xong câu vẫn hiện. */
.nt-faq__item[hidden] { display: none; }

.nt-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nt-space-4);
  padding: 17px 20px;
  font-size: var(--nt-fs-md);
  font-weight: 600;
  color: var(--nt-ink-900);
  cursor: pointer;
  list-style: none;              /* Firefox */
}

.nt-faq__q::-webkit-details-marker { display: none; }   /* Safari/Chrome */
.nt-faq__q:hover { color: var(--nt-navy-800); }

.nt-faq__q:focus-visible {
  outline: 2px solid var(--nt-blue-500);
  outline-offset: -3px;
}

.nt-faq__caret {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--nt-ink-400);
  transition: transform var(--nt-dur-base) var(--nt-ease);
}

.nt-faq__item[open] .nt-faq__caret {
  transform: rotate(180deg);
  color: var(--nt-red-600);
}

.nt-faq__a {
  padding: 0 20px 19px;
  font-size: var(--nt-fs-base);
  line-height: var(--nt-lh-normal);
  color: var(--nt-ink-700);
}

.nt-faq__a > *:first-child { margin-top: 0; }
.nt-faq__a > *:last-child { margin-bottom: 0; }
.nt-faq__a p { margin: 0 0 10px; }
.nt-faq__a ul { margin: 0 0 10px; padding-left: 20px; }
.nt-faq__a li { margin-bottom: 5px; }

/* ---------- Khối "Vẫn còn thắc mắc?" ở cuối trang FAQ ---------- */
.nt-faq-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nt-space-3);
  justify-content: center;
}

/* ---------- Bản rút gọn (nhúng ở trang chủ) ---------- */
.nt-faq--compact .nt-faq__list { gap: 8px; }

@media (max-width: 640px) {
  .nt-faq__q { padding: 14px 16px; font-size: var(--nt-fs-base); }
  .nt-faq__a { padding: 0 16px 16px; }
  .nt-faq__actions { margin-left: 0; }
}

/* ==========================================================================
   TRA CỨU ĐƠN HÀNG & BILL  (BƯỚC 18–19)
   --------------------------------------------------------------------------
   Gồm 4 phần:
     1. Nhãn trạng thái (.nt-badge--*) — cùng tông với badge bên /admin
     2. Khối tra cứu (.nt-lookup*)
     3. Kết quả đơn hàng (.nt-track*)
     4. Tờ Bill in được (.nt-bill-print*) + luật @media print
   ========================================================================== */

/* ---------- 1. Nhãn trạng thái ---------- */
.nt-badge--new    { background: rgba(37, 99, 235, .12);  color: var(--nt-blue-600); }
.nt-badge--doing  { background: rgba(245, 158, 11, .16); color: #92400e; }
.nt-badge--quoted { background: rgba(79, 70, 229, .12);  color: #3730a3; }
.nt-badge--won    { background: rgba(22, 163, 74, .14);  color: #166534; }
.nt-badge--lost   { background: rgba(100, 116, 139, .14); color: #475569; }

/* ---------- 2. Khối tra cứu ---------- */
.nt-lookup { max-width: 820px; margin: 0 auto; }

.nt-lookup__card {
  background: #fff;
  border: 1px solid var(--nt-line);
  border-radius: var(--nt-radius-lg);
  box-shadow: var(--nt-shadow-sm);
  padding: var(--nt-space-6);
}

.nt-lookup__fields {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: var(--nt-space-4);
  margin-bottom: var(--nt-space-5);
}

.nt-lookup__field { display: flex; flex-direction: column; gap: 6px; }

.nt-lookup__field > span {
  font-size: var(--nt-fs-sm);
  font-weight: 600;
  color: var(--nt-ink-700);
}

.nt-lookup__field input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--nt-line);
  border-radius: var(--nt-radius);
  font: inherit;
  font-size: var(--nt-fs-base);
  color: var(--nt-ink-900);
  background: #fff;
  transition: border-color var(--nt-dur-fast) var(--nt-ease),
              box-shadow var(--nt-dur-fast) var(--nt-ease);
}

.nt-lookup__field input:focus {
  outline: none;
  border-color: var(--nt-blue-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.nt-lookup__field--sm input {
  font-size: var(--nt-fs-lg);
  letter-spacing: .28em;
  text-align: center;
  font-weight: 700;
}

.nt-lookup__form .nt-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nt-space-2);
}

.nt-lookup__form .nt-btn.is-busy { opacity: .65; cursor: progress; }

.nt-lookup__hint {
  display: flex;
  align-items: flex-start;
  gap: var(--nt-space-2);
  margin: var(--nt-space-4) 0 0;
  font-size: var(--nt-fs-sm);
  color: var(--nt-ink-500);
  line-height: var(--nt-lh-normal);
}

.nt-lookup__hint svg { flex: none; margin-top: 2px; color: var(--nt-blue-500); }

/* Thông báo: đang tải / lỗi */
.nt-lookup__status {
  margin-top: var(--nt-space-5);
  padding: var(--nt-space-4) var(--nt-space-5);
  border-radius: var(--nt-radius);
  font-size: var(--nt-fs-base);
  line-height: var(--nt-lh-normal);
}

.nt-lookup__status--loading {
  background: var(--nt-sky-50);
  border: 1px solid var(--nt-sky-100);
  color: var(--nt-blue-600);
  font-weight: 600;
}

/* Hiệu ứng "đang tải" thuần CSS — không cần ảnh, không cần JS */
.nt-lookup__status--loading::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 10px;
  vertical-align: -2px;
  border: 2px solid rgba(37, 99, 235, .3);
  border-top-color: var(--nt-blue-600);
  border-radius: 50%;
  animation: nt-spin .7s linear infinite;
}

@keyframes nt-spin { to { transform: rotate(360deg); } }

.nt-lookup__status--error {
  background: var(--nt-red-50);
  border: 1px solid rgba(220, 38, 38, .2);
  color: var(--nt-red-700);
}

.nt-lookup__result:not(:empty) { margin-top: var(--nt-space-6); }

/* ---------- 2b. Thẻ chọn loại tra cứu (trang chủ) ----------
   Dùng ở khối tra cứu trên trang chủ để gom "đơn hàng" và "Bill" vào một
   chỗ. Chỉ là hai nút bật/tắt + hai khung, không dựng thêm giao diện mới:
   mỗi khung vẫn là .nt-lookup sẵn có. */
.nt-lookup-tabs { max-width: 820px; margin: 0 auto; }

.nt-lookup-tabs__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--nt-space-2);
  margin-bottom: var(--nt-space-5);
  padding: 4px;
  border: 1px solid var(--nt-line);
  border-radius: var(--nt-radius-pill);
  background: var(--nt-bg-soft);
  width: fit-content;
  margin-inline: auto;
}

.nt-lookup-tabs__btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 22px;
  border-radius: var(--nt-radius-pill);
  font: inherit;
  font-weight: 600;
  font-size: var(--nt-fs-sm);
  color: var(--nt-ink-500);
  cursor: pointer;
  transition: background-color var(--nt-dur-fast) var(--nt-ease),
              color var(--nt-dur-fast) var(--nt-ease);
}

.nt-lookup-tabs__btn:hover { color: var(--nt-blue-600); }

.nt-lookup-tabs__btn:focus-visible {
  outline: 2px solid var(--nt-blue-500);
  outline-offset: 2px;
}

.nt-lookup-tabs__btn.is-active {
  background: var(--nt-blue-600);
  color: #fff;
}

/* BẮT BUỘC: khung đang ẩn phải thực sự biến mất. Nếu chỉ dựa vào thuộc
   tính `hidden` của HTML thì mọi quy tắc `display` của .nt-lookup bên
   trong sẽ thắng và cả hai khung cùng hiện. */
.nt-lookup-tabs__panel[hidden] { display: none; }

/* ---------- 3. Kết quả đơn hàng ---------- */
.nt-track {
  background: #fff;
  border: 1px solid var(--nt-line);
  border-radius: var(--nt-radius-lg);
  box-shadow: var(--nt-shadow-sm);
  overflow: hidden;
}

.nt-track__head-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nt-space-4);
  padding: var(--nt-space-5) var(--nt-space-6);
  background: var(--nt-navy-900);
  color: #fff;
}

.nt-track__codes { display: flex; flex-direction: column; gap: 2px; }

.nt-track__code-label {
  font-size: var(--nt-fs-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .6);
}

.nt-track__code {
  font-size: var(--nt-fs-2xl);
  font-weight: 800;
  letter-spacing: .04em;
  line-height: var(--nt-lh-tight);
}

.nt-track__code-sub { font-size: var(--nt-fs-xs); color: rgba(255, 255, 255, .7); }

.nt-track__progress {
  height: 6px;
  background: var(--nt-sky-100);
  overflow: hidden;
}

.nt-track__progress-bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--nt-blue-500), var(--nt-success));
  border-radius: 0 var(--nt-radius-pill) var(--nt-radius-pill) 0;
  transition: width var(--nt-dur-slow) var(--nt-ease-out);
}

.nt-track__block {
  padding: var(--nt-space-6);
  border-top: 1px solid var(--nt-line-soft);
}

.nt-track__h2 {
  margin: 0 0 var(--nt-space-4);
  font-size: var(--nt-fs-lg);
  font-weight: 700;
  color: var(--nt-navy-900);
}

/* --- Dòng thời gian --- */
.nt-track__timeline { list-style: none; margin: 0; padding: 0; }

.nt-track__step {
  position: relative;
  padding: 0 0 var(--nt-space-5) var(--nt-space-7);
}

/* Đường nối dọc giữa các mốc */
.nt-track__step::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 18px;
  bottom: 0;
  width: 2px;
  background: var(--nt-line);
}

.nt-track__step:last-child { padding-bottom: 0; }
.nt-track__step:last-child::before { display: none; }

.nt-track__dot {
  position: absolute;
  left: 0;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--nt-line);
}

/* Mốc mới nhất: tô đậm để khách thấy ngay hàng đang ở đâu */
.nt-track__step.is-current .nt-track__dot {
  border-color: var(--nt-blue-500);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .16);
}

.nt-track__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--nt-space-3);
}

.nt-track__head strong { font-size: var(--nt-fs-base); color: var(--nt-navy-900); }
.nt-track__step.is-current .nt-track__head strong { color: var(--nt-blue-600); }

.nt-track__time { font-size: var(--nt-fs-xs); color: var(--nt-ink-400); }

.nt-track__note {
  margin: 4px 0 0;
  font-size: var(--nt-fs-sm);
  color: var(--nt-ink-700);
  line-height: var(--nt-lh-normal);
}

.nt-track__loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: var(--nt-fs-xs);
  color: var(--nt-ink-500);
}

/* --- Bảng thông tin --- */
.nt-track__info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nt-space-3) var(--nt-space-6);
}

.nt-track__info-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: var(--nt-space-3);
  border-bottom: 1px dashed var(--nt-line-soft);
}

.nt-track__info-label { font-size: var(--nt-fs-xs); color: var(--nt-ink-400); }

.nt-track__info-value {
  font-size: var(--nt-fs-sm);
  font-weight: 600;
  color: var(--nt-ink-900);
  line-height: var(--nt-lh-snug);
}

.nt-track__privacy {
  display: flex;
  align-items: flex-start;
  gap: var(--nt-space-2);
  margin: 0;
  padding: var(--nt-space-4) var(--nt-space-6);
  background: var(--nt-bg-soft);
  border-top: 1px solid var(--nt-line-soft);
  font-size: var(--nt-fs-xs);
  color: var(--nt-ink-500);
  line-height: var(--nt-lh-normal);
}

.nt-track__privacy svg { flex: none; margin-top: 1px; color: var(--nt-blue-500); }

/* ---------- 4. Tờ Bill ---------- */
.nt-bill-print {
  background: #fff;
  border: 1px solid var(--nt-line);
  border-radius: var(--nt-radius-lg);
  box-shadow: var(--nt-shadow-sm);
  padding: var(--nt-space-7);
  color: var(--nt-ink-900);
}

.nt-bill-print__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--nt-space-5);
  padding-bottom: var(--nt-space-5);
  border-bottom: 2px solid var(--nt-navy-900);
}

.nt-bill-print__brand { display: flex; flex-direction: column; gap: 2px; max-width: 58%; }
.nt-bill-print__brand strong {
  font-size: var(--nt-fs-lg);
  font-weight: 800;
  color: var(--nt-navy-900);
  line-height: var(--nt-lh-snug);
}
.nt-bill-print__brand span { font-size: var(--nt-fs-xs); color: var(--nt-ink-500); }

.nt-bill-print__title { text-align: right; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.nt-bill-print__title h2 {
  margin: 0;
  font-size: var(--nt-fs-xl);
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--nt-navy-900);
}
.nt-bill-print__code {
  font-size: var(--nt-fs-base);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--nt-red-600);
}

.nt-bill-print__parties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nt-space-6);
  padding: var(--nt-space-5) 0;
}

.nt-bill-print__party h3 {
  margin: 0 0 var(--nt-space-2);
  font-size: var(--nt-fs-xs);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--nt-ink-400);
}
.nt-bill-print__party p {
  margin: 0 0 2px;
  font-size: var(--nt-fs-sm);
  color: var(--nt-ink-700);
  line-height: var(--nt-lh-normal);
}
.nt-bill-print__party-name { font-weight: 700; color: var(--nt-ink-900) !important; }

.nt-bill-print__items,
.nt-bill-print__money {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--nt-fs-sm);
}

.nt-bill-print__items th,
.nt-bill-print__items td,
.nt-bill-print__money th,
.nt-bill-print__money td {
  padding: 9px 10px;
  border: 1px solid var(--nt-line);
  text-align: left;
  vertical-align: top;
}

.nt-bill-print__items thead th {
  background: var(--nt-bg-soft);
  font-size: var(--nt-fs-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--nt-ink-500);
  font-weight: 700;
}

.nt-bill-print__money { margin-top: var(--nt-space-5); max-width: 420px; margin-left: auto; }
.nt-bill-print__money th { font-weight: 600; color: var(--nt-ink-700); background: var(--nt-bg-soft); }
.nt-bill-print__money td { text-align: right; font-weight: 600; }
.nt-bill-print__money tr.is-total th,
.nt-bill-print__money tr.is-total td {
  background: var(--nt-navy-900);
  color: #fff;
  font-size: var(--nt-fs-base);
  font-weight: 800;
}
.nt-bill-print__unit { font-size: var(--nt-fs-xs); opacity: .7; }

.nt-bill-print__cod {
  display: flex;
  align-items: flex-start;
  gap: var(--nt-space-2);
  margin: var(--nt-space-5) 0 0;
  padding: var(--nt-space-3) var(--nt-space-4);
  background: var(--nt-red-50);
  border-radius: var(--nt-radius-sm);
  font-size: var(--nt-fs-sm);
  color: var(--nt-red-700);
  line-height: var(--nt-lh-normal);
}
.nt-bill-print__cod svg { flex: none; margin-top: 2px; }

.nt-bill-print__foot {
  margin-top: var(--nt-space-5);
  padding-top: var(--nt-space-4);
  border-top: 1px solid var(--nt-line-soft);
  font-size: var(--nt-fs-sm);
  color: var(--nt-ink-700);
}
.nt-bill-print__foot p { margin: 0 0 4px; line-height: var(--nt-lh-normal); }
.nt-bill-print__legal { font-size: var(--nt-fs-xs); color: var(--nt-ink-400); font-style: italic; }

.nt-bill-print__actions { margin-top: var(--nt-space-6); display: flex; justify-content: flex-end; }

/* ---------- Lưới "không tra cứu được" ---------- */
.nt-help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--nt-space-5);
  margin-bottom: var(--nt-space-8);
}

.nt-help-card {
  background: #fff;
  border: 1px solid var(--nt-line);
  border-radius: var(--nt-radius-lg);
  padding: var(--nt-space-5);
  box-shadow: var(--nt-shadow-xs);
}

.nt-help-card__ico {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: var(--nt-space-3);
  border-radius: 50%;
  background: var(--nt-sky-50);
  color: var(--nt-blue-600);
  font-weight: 800;
  font-size: var(--nt-fs-sm);
}

.nt-help-card h3 {
  margin: 0 0 var(--nt-space-2);
  font-size: var(--nt-fs-base);
  font-weight: 700;
  color: var(--nt-navy-900);
}

.nt-help-card p {
  margin: 0;
  font-size: var(--nt-fs-sm);
  color: var(--nt-ink-500);
  line-height: var(--nt-lh-normal);
}

/* ---------- Màn hình hẹp ---------- */
@media (max-width: 720px) {
  .nt-lookup__fields { grid-template-columns: 1fr; }
  .nt-lookup__card { padding: var(--nt-space-5); }
  .nt-track__info { grid-template-columns: 1fr; }
  .nt-track__head-card { padding: var(--nt-space-5); }
  .nt-track__code { font-size: var(--nt-fs-xl); }
  .nt-track__block { padding: var(--nt-space-5); }
  .nt-bill-print { padding: var(--nt-space-5); }
  .nt-bill-print__brand { max-width: 100%; }
  .nt-bill-print__title { text-align: left; align-items: flex-start; }
  .nt-bill-print__parties { grid-template-columns: 1fr; gap: var(--nt-space-4); }
  .nt-bill-print__money { max-width: 100%; }
}

/* ==========================================================================
   IN BILL  (PHẦN 17 — "Bill PDF: BILL-{mã}.pdf")
   --------------------------------------------------------------------------
   Kỹ thuật: ẩn MỌI thứ bằng visibility rồi chỉ hiện tờ Bill, sau đó kéo tờ
   Bill lên góc trên trái. Cách này chắc chắn hơn display:none vì không phụ
   thuộc vào việc đoán đúng cấu trúc cha/con của trang.

   Tên tệp: trình duyệt lấy document.title làm tên gợi ý khi lưu PDF. js/main.js
   đặt tiêu đề thành "BILL-{mã}" ngay trước khi in, nên tệp lưu ra đúng tên
   BILL-{mã}.pdf. Chữ trong PDF là chữ thật nên tìm kiếm và copy được.
   ========================================================================== */
@media print {
  @page { size: A4; margin: 12mm; }

  body * { visibility: hidden !important; }

  .nt-bill-print,
  .nt-bill-print * { visibility: visible !important; }

  .nt-bill-print {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #000;
    background: #fff;
  }

  /* Không in nút bấm */
  .nt-bill-print__actions { display: none !important; }

  /* Giữ màu nền của bảng tổng cộng khi in (mặc định trình duyệt bỏ nền) */
  .nt-bill-print__money tr.is-total th,
  .nt-bill-print__money tr.is-total td {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Không cắt tờ Bill sang trang khác */
  .nt-bill-print__parties,
  .nt-bill-print__items,
  .nt-bill-print__money,
  .nt-bill-print__foot { break-inside: avoid; page-break-inside: avoid; }

  .nt-topbar, .nt-header, .nt-footer, .nt-floating,
  .nt-mobile-bar, .nt-drawer, .nt-drawer-backdrop,
  .nt-chat, .nt-lookup__card, .nt-lookup__status,
  .nt-page-hero, .nt-breadcrumb, .nt-cta { display: none !important; }
}