/* Biến thể giao diện trang chuyên mục.
 *
 * Hệ CMS cũ chỉ tách hai kiểu (Page "Tour Du lịch" vs Page "Thị thực"). File này
 * mở rộng thành bốn để mỗi dòng sản phẩm có BỐ CỤC riêng (khối CTA, form báo
 * giá, có/không cột lọc) và vẫn dùng nguyên design token của index.css. MÀU thì
 * tour/combo/MICE chung một tông; chỉ thị thực có tông riêng (xem dưới).
 */

.zone-layout {
  --zone-accent: var(--primary);
  --zone-accent-soft: rgba(0, 34, 72, 0.08);
}

.zone-layout .tl-breadcrumb__current {
  color: var(--zone-accent);
  font-weight: 700;
}

/* ======= BỐ CỤC TRANG CHUYÊN MỤC =======
 *
 * Thứ tự: banner → breadcrumb → ô tìm kiếm → tên chuyên mục → giới thiệu →
 * danh sách. DOM được restructureZonePage() (lib/public/templates.ts) xếp lại;
 * phần dưới đây chỉ lo phần nhìn.
 *
 * Cả khối bám dưới `.zone-layout` nên `/tours` — dùng chung shell tours.html
 * nhưng không nạp file này — giữ nguyên banner có chữ như cũ.
 */

/* Banner chỉ còn là tấm ảnh: chạm hai mép, không bo góc, không đổ bóng. Bản
   thiết kế bọc nó trong `.container` bo góc vì có chữ đè lên cần một khung; bỏ
   chữ rồi thì cái khung chỉ làm ảnh trông như một thẻ nội dung. */
.zone-layout .tl-adbanner--plain {
  padding: 0;
}

.zone-layout .tl-adbanner--plain .container {
  max-width: none;
  padding: 0;
}

.zone-layout .tl-adbanner--plain .tl-adbanner__inner {
  display: block;
  height: auto
    /*clamp(8rem, 18vw, 16rem)*/
  ;
  border-radius: 0;
  box-shadow: none;
  aspect-ratio: auto 1920 / 594;
  overflow: hidden;
  min-height: auto;
}

/* Chuyên mục BÀI VIẾT: dải ảnh MỎNG hơn trang chuyên mục tour (mẫu khách duyệt
   23/09/2026). Ở đây ảnh chỉ thay cho dòng tiêu đề vừa bỏ, không phải ảnh bìa
   bán hàng — cao 16rem thì đẩy hàng nút chuyên mục và bài đầu tiên xuống dưới
   nếp gấp. 12vw ra ~173px ở khổ 1440, ~104px ở khổ điện thoại. */
.zone-layout--news .tl-adbanner--plain .tl-adbanner__inner {
  height: clamp(6.5rem, 12vw, 12rem);
}

/* Ảnh là `<img>` (TlCoverBanner, news-parts.tsx) phủ kín dải — như `.img-cover
   img` của web cũ. `<picture>` không dựng hộp riêng, để `height: 100%` của ảnh
   tính theo chính dải. */
.zone-layout .tl-adbanner__inner>picture {
  display: contents;
}

.zone-layout .tl-adbanner--plain .tl-adbanner__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ảnh đầu trang lấy từ banner "Chuyên mục — Ảnh đầu trang" (zone-cover): giữ
   ĐÚNG khổ ảnh như web cũ và trang thị thực (.visa-cover). Banner có chữ sát mép
   trên/dưới; hai dải cao cố định ở trên cắt mất 20–30% mỗi đầu ở màn máy tính
   (đo 13/10/2026: 1440x256 thay vì 1440x423 của web cũ). Ảnh đại diện (ảnh chụp
   không chữ) vẫn đi dải cũ.

   Chiều cao = theo tỉ lệ THẬT của tệp ảnh (`height: auto`; 1920/564 chỉ giữ chỗ
   lúc ảnh chưa tải, khỏi giật trang), TỐI ĐA 440px (khách: ảnh bìa "chiếm hơn
   nửa màn hình đầu", 22/10/2026; con số người dùng thử trên trang). Dưới mức đó
   ảnh hiện trọn, không cắt: 1366 → 401px, 1440 → 423px. Màn rộng hơn ~1500px
   thì dải dừng ở 440 và `object-fit: cover` cắt đều trên dưới — đúng như web cũ
   khi hạ khung xuống 440. Đừng ép tỉ lệ khung thấp hơn tỉ lệ ảnh (đã thử
   `aspect-ratio: 1920 / 440`): ảnh bị cắt ở MỌI khổ màn. `width: 100%` ở luật
   trên là bắt buộc: có `aspect-ratio` mà bề ngang tự động thì trình duyệt đổi
   max-height thành max-width theo tỉ lệ — dải co còn 1498px, hở bên phải. */
.zone-layout .tl-adbanner--banner .tl-adbanner__inner,
.zone-layout--news .tl-adbanner--banner .tl-adbanner__inner {
  height: auto;
}

/*
.zone-layout .tl-adbanner--banner .tl-adbanner__img {
  height: auto;
  aspect-ratio: auto 1920 / 280;
  max-height: 18rem;
}
*/

/* Lớp phủ tối của tour-list.css chỉ tồn tại để chữ trắng đọc được trên ảnh.
   Không còn chữ thì nó chỉ làm ảnh xỉn đi. */
.zone-layout .tl-adbanner--plain .tl-adbanner__inner::after {
  display: none;
}

/* Ô tìm kiếm của bản thiết kế thụt lên -3.5rem để đè lên đáy banner. Giờ giữa
   hai khối đã có breadcrumb, để nguyên thì ô tìm kiếm trùm lên breadcrumb. */
.zone-layout .tl-searchbox {
  margin-top: 0;
}

/* ======= TÊN CHUYÊN MỤC + GIỚI THIỆU ======= */
.zone-layout .zone-intro {
  padding: 2rem 0 0.25rem;
}

/* Tiêu đề đã ẩn và không còn gì để thấy: bỏ luôn khoảng đệm, kẻo breadcrumb và
   dải tab cách nhau 36px trắng trơn không vì cái gì. Thẻ vẫn nằm đó cho SEO và
   trình đọc màn hình. */
.zone-layout .zone-intro--bare {
  padding: 0;
}

.zone-layout .zone-intro__title {
  margin: 0 0 1.125rem;
  text-align: center;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--zone-accent);
}

.zone-layout .zone-intro__desc {
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.75;
}

.zone-layout .zone-intro__body> :first-child {
  margin-top: 0;
}

.zone-layout .zone-intro__body> :last-child {
  margin-bottom: 0;
}

.zone-layout .zone-intro__body p {
  margin-bottom: 0.875rem;
}

.zone-layout .zone-intro__body strong {
  color: var(--text-main);
}

.zone-layout .zone-intro__body a {
  color: var(--zone-accent);
  font-weight: 600;
}

.zone-layout .zone-intro__body a:hover {
  color: var(--accent);
}

/* `description_html` của hệ cũ mang sẵn ảnh và bảng chèn giữa bài; thả tự do
   thì chúng tràn khỏi cột chữ. */
.zone-layout .zone-intro__body img {
  max-width: 100%;
  height: auto;
}

/* Checkbox chỉ giữ trạng thái gập/mở cho CSS; `<label>` mới là thứ bấm được.
   Giấu bằng clip chứ không `display:none` — display:none thì bàn phím không tab
   tới được nữa, và cả nút "Xem thêm" mất luôn với người không dùng chuột. */
.zone-layout .zone-intro__state {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  margin: -0.0625rem;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.zone-layout .zone-intro__desc--clamp .zone-intro__body {
  position: relative;
  max-height: 8.5rem;
  overflow: hidden;
}

/* Dải mờ ở đáy để người đọc thấy đoạn văn còn tiếp; cắt phẳng thì trông như
   trang bị lỗi mất chữ giữa câu. */
.zone-layout .zone-intro__desc--clamp .zone-intro__body::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3.5rem;
  background: linear-gradient(to bottom, rgba(244, 246, 250, 0), var(--bg-main));
  pointer-events: none;
}

.zone-layout .zone-intro__state:checked~.zone-intro__body {
  max-height: none;
}

.zone-layout .zone-intro__state:checked~.zone-intro__body::after {
  display: none;
}

/* Nút dạt phải theo bản mẫu. `display:flex` để phần tử chiếm trọn bề ngang cột
   chữ, nhờ đó `justify-content` mới đẩy được chữ về mép phải. */
.zone-layout .zone-intro__toggle {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.625rem;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

.zone-layout .zone-intro__toggle-less {
  display: none;
}

.zone-layout .zone-intro__state:checked~.zone-intro__toggle .zone-intro__toggle-more {
  display: none;
}

.zone-layout .zone-intro__state:checked~.zone-intro__toggle .zone-intro__toggle-less {
  display: inline;
}

.zone-layout .zone-intro__chev {
  transition: transform 0.2s ease;
}

.zone-layout .zone-intro__state:checked~.zone-intro__toggle .zone-intro__chev {
  transform: rotate(180deg);
}

/* Checkbox thật đã bị giấu khỏi tầm nhìn, nên viền focus phải hiện trên nhãn —
   không có nó thì người dùng bàn phím không biết mình đang đứng ở đâu. */
.zone-layout .zone-intro__state:focus-visible~.zone-intro__toggle {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.25rem;
  border-radius: var(--radius-sm);
}

/* ---------- Combo và MICE: CÙNG màu với trang tour ----------
 *
 * Không đặt `--zone-accent` riêng (khách báo 17/09/2026 "tour combo có format
 * màu không đúng các category của trang tour"). Bốn mục Tour Nước Ngoài / Trong
 * Nước / MICE / Combo đứng cạnh nhau trên thanh menu và khách xem chúng là một
 * nhà. Bản trước tô combo bằng vàng #D4AF37 — tiêu đề, breadcrumb, khung CTA và
 * nút "Yêu cầu báo giá combo" nền vàng chữ trắng, tương phản chỉ ~2.1:1, đọc
 * không ra — còn MICE bằng #21409A, lệch hẳn tông #104a93 của trang tour.
 * Chỉ thị thực (một dòng dịch vụ khác hẳn) còn tông riêng bên dưới. */

/* MICE: B2B, bỏ nhấn giá lẻ. */
.zone-layout--mice .tour-card__price-old,
.zone-layout--mice .tour-card__price-new small {
  display: none;
}

/* Form "Nhận báo giá đoàn": từ 22/10/2026 là form BA cột
   (`.zone-form__box--3col`, bên dưới). Luật 46rem của 28/08/2026 (khách kêu
   form hai cột rộng quá, mỗi ô ~430px) đã gỡ — ba cột ở 64rem thì mỗi ô còn
   ~300px, hẹp hơn cả hồi đó. */

/* ---------- Thị thực: dịch vụ, tông accent đỏ ---------- */
.zone-layout--visa {
  --zone-accent: var(--accent);
  --zone-accent-soft: rgba(227, 6, 19, 0.08);
}

/* Gỡ sidebar mà để nguyên lưới hai cột thì .tl-content rơi vào đúng track 280px
   vốn dành cho sidebar — thẻ bị nén còn một phần tư bề ngang, phần còn lại bỏ
   trắng. Bám theo chính điều kiện "không có sidebar" (applyZoneLayout gắn class
   này) thay vì liệt kê từng layout, để layout thêm sau không dẫm lại lỗi. */
.zone-layout--nosidebar .tl-layout {
  display: block;
}

/* ---------- Khối CTA dùng chung cho visa/mice ---------- */
/* Gọn lại theo yêu cầu 22/08/2026: khối này + 4 thẻ quy trình bên dưới trước
   đây chiếm gần trọn màn hình đầu tiên của trang thị thực, đẩy danh sách dịch
   vụ — thứ khách vào để xem — xuống dưới nếp gấp. Cắt padding và cỡ chữ, không
   bỏ khối: cả hai đều là thông tin thật khách cần. */
.zone-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  border: 0.0625rem solid var(--border);
  border-left: 0.25rem solid var(--zone-accent);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

.zone-cta__text h2 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--primary);
}

.zone-cta__text p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.zone-cta__btn {
  flex-shrink: 0;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-full);
  background: var(--zone-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
}

.zone-cta__btn:hover {
  filter: brightness(1.08);
  box-shadow: var(--shadow-md);
}

/* ---------- Quy trình 4 bước (thị thực) ---------- */
.zone-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}

.zone-step {
  padding: 0.875rem 1rem;
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

/* Số thứ tự về cùng hàng với tiêu đề thay vì nằm riêng một dòng phía trên:
   riêng thay đổi đó cắt được ~1.6rem chiều cao mỗi thẻ. */
.zone-step__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: left;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.0625rem 0.5rem 0 0;
  border-radius: var(--radius-full);
  background: var(--zone-accent-soft);
  color: var(--zone-accent);
  font-size: 0.75rem;
  font-weight: 800;
}

.zone-step__title {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-main);
}

.zone-step__desc {
  clear: both;
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.55;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .zone-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .zone-steps {
    grid-template-columns: 1fr;
  }

  .zone-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Form yêu cầu tư vấn / báo giá ----------
 *
 * Khối này được chèn SAU `.tl-body`, tức nằm ngoài container của trang, nên nếu
 * không tự lo bề ngang thì nó trải hết màn hình: trên máy 1512px các ô nhập rộng
 * gần 500px, một ô "Quy mô đoàn (khách)" dài bằng nửa màn. Form dài mà mỗi dòng
 * kéo hết bề ngang thì mắt phải quét ngang liên tục, và trông như trang chưa
 * dựng xong chứ không phải một biểu mẫu.
 *
 * Nên: hộp có bề ngang tối đa và tự căn giữa. 62rem là chỗ hai cột vẫn rộng rãi
 * mà mắt không phải rời khỏi trục giữa.
 */
.zone-form {
  padding: 0 0 2.5rem;
}

/* Lề hai bên nằm ở BỀ NGANG của hộp chứ không phải padding của section: trên
   mobile index.css có luật `section { padding: 2.5rem 0 !important }`, nên
   padding ngang đặt ở section bị xoá sạch và hộp dính sát mép màn. `width: min()`
   thì không ai đè được, và 2.5rem trừ ra bằng đúng lề của container trang. */
.zone-form__box {
  width: min(56rem, 100% - 2.5rem);
  margin-inline: auto;
  padding: 1.75rem 2rem 2rem;
  border: 0.0625rem solid var(--border);
  border-top: 0.25rem solid var(--zone-accent);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}

/* Đầu form căn giữa, có gạch ngang ngắn dưới tiêu đề: cả khối là một hộp đứng
   riêng giữa trang nên phần đầu căn trái sẽ lệch hẳn khỏi trục của hộp. */
.zone-form__head {
  margin-bottom: 1.25rem;
  text-align: center;
}

.zone-form__title {
  margin: 0 0 0.375rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.25;
}

.zone-form__title::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 0.1875rem;
  margin: 0.5rem auto 0;
  border-radius: var(--radius-full);
  background: var(--zone-accent);
}

.zone-form__lead {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Mặc định hai cột: combo (9 + 3 ô liên hệ chung) và thị thực (6 + 3, một ô
   span 2) chia hết cho hai, lưới không còn ô trống lửng lơ cuối hàng — xem
   `span` trong ZONE_LAYOUT_STYLE. MICE khai `columns: 3`, xem `--3col`. */
.zone-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem 1.25rem;
}

.zone-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  min-width: 0;
}

.zone-form__field--wide {
  grid-column: 1 / -1;
}

/* Form BA cột — form MICE (khách yêu cầu 22/10/2026: form hai cột "kéo dài
   theo chiều dọc, chưa thành form ngang cân đối"; đo 1440px: cao 953px). Ba
   cột ở 64rem: 9 ô một-cột thành đúng ba hàng (ZONE_LAYOUT_STYLE.mice). Từ
   701px trở lên — ở 768px mỗi ô vẫn còn ~208px, đủ cho ô ngày tháng; dưới đó
   về một cột như mọi form (khối @media cuối phần này). */
@media (min-width: 701px) {
  .zone-form__box--3col {
    width: min(64rem, 100% - 2.5rem);
  }

  .zone-form__box--3col .zone-form__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Nhóm ô tick ("Loại chương trình" của MICE, chọn được nhiều). Mỗi lựa chọn là
   một viên bấm được cả viên, tick rồi thì viên đổi màu — nhìn lướt là biết đã
   chọn gì. `fieldset` bỏ khung mặc định; `display: block` vì `legend` không
   phải phần tử flex nên `gap` của `.zone-form__field` không tới được nó. */
.zone-form__checks {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

.zone-form__checks legend {
  padding: 0;
  margin-bottom: 0.4375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-main);
}

.zone-form__hint {
  margin-left: 0.5rem;
  font-weight: 400;
  color: var(--text-muted);
}

.zone-form__checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.625rem;
}

/* Viên là `<label>` nằm trong `.zone-form__field` (fieldset mang lớp đó), nên
   luật `.zone-form__field label` (chữ 13px đậm của nhãn ô nhập) cũng khớp:
   bộ chọn phải từ hai lớp trở lên mới đè được. */
.zone-form__checks .zone-form__check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6875rem 0.9375rem;
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--text-main);
  cursor: pointer;
  transition: var(--transition);
}

.zone-form__checks .zone-form__check:hover {
  border-color: var(--zone-accent);
}

.zone-form__checks .zone-form__check:has(input:checked) {
  border-color: var(--zone-accent);
  background: var(--zone-accent-soft);
  font-weight: 600;
}

.zone-form__checks .zone-form__check:has(input:focus-visible) {
  box-shadow: 0 0 0 0.1875rem var(--zone-accent-soft);
}

/* Gỡ kiểu ô nhập của `.zone-form__field input` (rộng 100%, đệm, viền) khỏi ô
   tick — kể cả lúc rê chuột và lúc có tiêu điểm, hai luật đó cùng độ đặc hiệu
   và đứng trước. */
.zone-form__checks .zone-form__check input,
.zone-form__checks .zone-form__check input:hover,
.zone-form__checks .zone-form__check input:focus {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  accent-color: var(--zone-accent);
  cursor: pointer;
}

/* Bấm Gửi khi chưa tick ô nào: cả nhóm đỏ viền, tới khi tick (zone-request.js). */
.zone-form__checks.is-invalid .zone-form__check {
  border-color: var(--accent);
}

/* Form ba cột: ô ghi chú thấp hơn (ba dòng là đủ thấy mình đang viết gì, kéo
   góc để mở rộng), phần chân sát hơn — form này cốt để gọn chiều dọc. */
@media (min-width: 701px) {
  .zone-form__box--3col .zone-form__field textarea {
    min-height: 4.5rem;
  }

  .zone-form__box--3col .zone-form__foot {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
  }
}

.zone-form__field label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-main);
}

.zone-form__field input,
.zone-form__field select,
.zone-form__field textarea {
  width: 100%;
  padding: 0.75rem 0.9375rem;
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-main);
  font-size: 0.875rem;
  transition: var(--transition);
}

/* Mũi tên tự vẽ, cách mép phải bằng lề trái của chữ — xem select.bt-input
   (book-tour.css, khách yêu cầu 03/10/2026). */
.zone-form__field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231A2751' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.9375rem center;
  background-size: 1rem 1rem;
  cursor: pointer;
}

.zone-form__field input::placeholder,
.zone-form__field textarea::placeholder {
  color: var(--text-light);
}

.zone-form__field textarea {
  resize: vertical;
  min-height: 6rem;
}

.zone-form__field input:hover,
.zone-form__field select:hover,
.zone-form__field textarea:hover {
  border-color: var(--zone-accent);
}

.zone-form__field input:focus,
.zone-form__field select:focus,
.zone-form__field textarea:focus {
  outline: none;
  border-color: var(--zone-accent);
  box-shadow: 0 0 0 0.1875rem var(--zone-accent-soft);
}

/* Nút nằm giữa, có đường kẻ tách khỏi phần nhập: người điền cần một mốc rõ ràng
   "hết ô rồi, tới lượt bấm". */
.zone-form__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 0.0625rem solid var(--border-light);
}

.zone-form__submit {
  min-width: 18rem;
  padding: 0.9375rem 2.25rem;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.zone-form__submit:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: var(--shadow-md);
  transform: translateY(-0.0625rem);
}

.zone-form__submit:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

.zone-form__status {
  margin: 0;
  min-height: 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  color: var(--text-muted);
}

.zone-form__status.is-ok {
  color: #15803d;
}

.zone-form__status.is-error {
  color: var(--accent);
}

@media (max-width: 700px) {
  .zone-form {
    padding: 0 0 2.5rem;
  }

  .zone-form__box {
    padding: 1.75rem 1.25rem 2rem;
  }

  .zone-form__title {
    font-size: 1.25rem;
  }

  /* Một cột: hai ô cạnh nhau trên màn 390px thì mỗi ô còn ~150px, ô ngày tháng
     và ô chọn đều bị cắt mất phần chữ. `--wide` không cần luật riêng vì
     `1 / -1` trong lưới một cột vẫn đúng là cả hàng. */
  .zone-form__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .zone-form__submit {
    width: 100%;
    min-width: 0;
  }
}

/* ======= DANH SÁCH BÀI VIẾT (Cẩm nang du lịch / Top Ten News) =======
 *
 * Bố cục bám site đang chạy: một cột bài dạng hàng ngang + cột phải gợi ý.
 * Trang này trước đây mượn lưới ba thẻ `.blog__grid` của trang chủ — trên
 * trang chủ thì đúng, nhưng ở đây người đọc vào để CHỌN bài: ba thẻ một hàng
 * cắt cụt tiêu đề còn hai dòng và bỏ trống cả cột phải.
 */
/* Độ đặc hiệu phải thắng `.zone-layout--nosidebar .tl-layout` ở trên (hai
   class) — cùng file, nên một class đứng sau vẫn thua. */
.zone-layout .tl-layout.nl-layout,
.tl-layout.nl-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22.5rem;
  gap: 2rem;
  align-items: start;
}

/* Hàng nút chuyên mục */
.nl-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.nl-tab {
  padding: 0.5625rem 1.25rem;
  border-radius: var(--radius-md);
  background: var(--pill-bg);
  color: var(--primary);
  font-size: 0.875rem;
  font-weight: 600;
  transition: var(--transition);
}

.nl-tab:hover {
  background: #DCE9F8;
}

.nl-tab.is-active {
  background: var(--accent);
  color: #fff;
}

/* Danh sách bài */
.nl-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Thẻ từ khoá chưa gắn bài nào. Danh sách trống không kèm một lời nào trông y
   hệt trang hỏng, nên nói thẳng ra. */
.nl-empty {
  padding: 2.5rem 1.25rem;
  border: 0.0625rem dashed var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--text-muted);
}

.nl-row {
  display: grid;
  /* 44% chứ không 55%: cột bài rộng ~820px sau khi trừ cột phải, ảnh 16:9 lấy
     55% là cao 255px trong khi chữ chỉ chiếm 150px — mỗi hàng thừa một mảng
     trắng bằng nửa chiều cao ảnh. */
  grid-template-columns: 44% minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.nl-row__media {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* 16:9 cố định: ảnh bài viết trong CSDL có đủ mọi tỷ lệ, để ảnh tự quyết thì
   mỗi hàng một chiều cao và cột chữ bên phải nhảy loạn xạ. */
.nl-row__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-subtle);
  transition: var(--transition);
}

.nl-row__media:hover .nl-row__img {
  transform: scale(1.03);
}

.nl-row__body {
  min-width: 0;
  padding-top: 0.25rem;
}

.nl-row__title {
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.45;
  color: var(--primary);
  margin-bottom: 0.625rem;
}

.nl-row__title a:hover {
  color: var(--accent);
}

/* Ba dòng rồi cắt — tóm tắt trong CSDL dài từ một câu tới cả đoạn văn. */
.nl-row__excerpt {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

/* Ô vuông đỏ sau ngày tháng, đúng dấu hiệu của site đang chạy. */
.nl-row__date {
  font-size: 0.875rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.nl-row__date::after {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  background: var(--accent);
}

/* Bài đứng đầu trang 1: khung lớn như `.news-item.is-big` của site đang chạy
   (đo 1440px: ảnh 61% cột bài, chữ canh giữa theo chiều cao ảnh; hàng thường
   ảnh 46%). Điện thoại: một cột như mọi hàng (luật 640px bên dưới). */
.nl-row--lead {
  grid-template-columns: 60% minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
}

.nl-row--lead .nl-row__title {
  font-size: 1.375rem;
  line-height: 1.4;
}

.nl-row--lead .nl-row__excerpt {
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

/* Cột phải: khối `.nl-widget` nay nằm ở index.css để trang chi tiết bài viết
   (chỉ nạp index.css + tour-details.css) dùng chung đúng một bộ. */
.nl-aside {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

@media (max-width: 1080px) {

  /* Cột phải xuống dưới danh sách. Giữ hai cột ở đây thì cột bài chỉ còn ~55%
     màn, ảnh 55% của nó co lại bằng con tem. */
  .zone-layout .tl-layout.nl-layout,
  .tl-layout.nl-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {

  .nl-row,
  .nl-row--lead {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.875rem;
  }

  .nl-row__title {
    font-size: 1.0625rem;
  }

  .nl-row--lead .nl-row__title {
    font-size: 1.1875rem;
  }
}