/* 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;
  min-height: 0;
  height: clamp(8rem, 18vw, 16rem);
  border-radius: 0;
  box-shadow: none;
}

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

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

/* Bản thiết kế phóng ảnh 1.02 lần để mép ảnh không hở khi có lớp phủ; ảnh trần
   thì phóng lên chỉ làm mất nét. */
.zone-layout .tl-adbanner--plain .tl-adbanner__bg {
  transform: 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" hẹp hơn các nhánh khác (yêu cầu 28/08/2026 — khách
   kêu form rộng quá).
 *
 * 46rem thay cho 56rem của `.zone-form__box`. Chỉ đổi BỀ NGANG, không đổi số
 * cột: lưới hai cột đang ăn khớp với 12 ô của MICE (3 ô liên hệ + 9 ô riêng),
 * lẻ một ô là hàng cuối hụt mất nửa — xem chú thích ở `.zone-form__grid` và ở
 * `ZONE_LAYOUT_STYLE.mice` bên lib/public/templates.ts.
 *
 * Đặt sau `.zone-form__box` trong tệp này nên thắng mà không cần !important.
 * `.zone-form` được chèn sau `.tl-body` nhưng vẫn nằm trong `<main class="tl-main">`
 * — chính thẻ mang lớp `.zone-layout--mice` — nên bộ chọn con này khớp. */
.zone-layout--mice .zone-form__box {
  width: min(46rem, 100% - 2.5rem);
}

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

/* Hai cột, không phải ba. Số ô của mỗi loại yêu cầu (MICE 9, combo 9, thị thực
   6 + 3 ô liên hệ chung) chia hết cho hai, nên lưới không còn ô trống lửng lơ ở
   cuối hàng như bản ba cột — xem `span` trong ZONE_LAYOUT_STYLE. */
.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;
}

.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: inherit;
  font-size: 0.875rem;
  transition: var(--transition);
}

.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);
}

/* 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 {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.875rem;
  }

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