/* ==========================================================================
   TOP TEN TRAVEL — TRANG DANH SÁCH TOUR THEO DANH MỤC
   Kế thừa design tokens & component từ index.css (load trước file này)
   ========================================================================== */

.tl-main {
  background: var(--bg-main);
}

/* Trạng thái đã thích (nút ♥ trên thẻ tour) */
.tour-card__wishlist.is-active {
  color: var(--accent);
  background: #fff;
}

/* ======= BREADCRUMB ======= */
.tl-breadcrumb {
  border-bottom: 0.0625rem solid var(--border);
  background: var(--bg-surface);
}

.tl-breadcrumb__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  row-gap: 0.375rem;
  padding: 0.875rem 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.tl-breadcrumb a {
  color: var(--text-muted);
  font-weight: 500;
}

.tl-breadcrumb a:hover {
  color: var(--accent);
}

.tl-breadcrumb__sep {
  color: var(--text-light);
  margin: 0 0.25rem;
}

.tl-breadcrumb__current {
  color: var(--primary);
  font-weight: 700;
}

/* ======= BANNER QUẢNG CÁO ======= */
.tl-adbanner {
  padding: 1.75rem 0 0;
}

.tl-adbanner__inner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: 20rem;
  display: flex;
  align-items: center;
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}

.tl-adbanner__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  z-index: -2;
}

.tl-adbanner__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
      rgba(0, 22, 48, 0.92) 0%,
      rgba(0, 34, 72, 0.80) 42%,
      rgba(0, 34, 72, 0.25) 100%);
}

.tl-adbanner__content {
  padding: 2.75rem 3rem;
  max-width: 40rem;
  color: #fff;
}

.tl-adbanner__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.0375rem;
  text-transform: uppercase;
  padding: 0.4375rem 1rem;
  border-radius: var(--radius-full);
  margin-bottom: 1rem;
  box-shadow: 0 0.375rem 1.125rem rgba(227, 6, 19, 0.4);
}

.tl-adbanner__title {
  font-size: 2.25rem;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.03125rem;
  margin-bottom: 0.75rem;
}

.tl-adbanner__title span {
  color: var(--gold);
}

.tl-adbanner__desc {
  font-size: 0.833313rem;
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 1.375rem;
  max-width: 32.5rem;
}

.tl-adbanner__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.tl-adbanner__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  background: var(--gold);
  color: var(--primary-dark);
  font-weight: 800;
  font-size: 0.75rem;
  padding: 0.8125rem 1.75rem;
  border-radius: var(--radius-full);
  box-shadow: 0 0.625rem 1.5rem rgba(212, 175, 55, 0.4);
}

.tl-adbanner__cta:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.875rem 1.875rem rgba(212, 175, 55, 0.5);
  color: var(--primary-dark);
}

.tl-adbanner__note {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.72);
}

.tl-adbanner__note strong {
  color: var(--gold);
}

/* ======= BOX SEARCH / FILTER NHANH ======= */
.tl-search {
  padding: 1.5rem 0 0.5rem;
}

.tl-searchbox {
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.125rem 1.25rem;
  margin-top: -3.5rem;
  position: relative;
  z-index: 5;
}

.tl-searchbox__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 0.875rem;
  align-items: end;
}

.tl-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.tl-field__label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.025rem;
}

.tl-field__control {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  background: var(--bg-subtle);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 0.75rem;
  height: 3rem;
  transition: var(--transition);
}

.tl-field__control:focus-within {
  border-color: var(--primary-light);
  background: var(--bg-surface);
  box-shadow: 0 0 0 0.1875rem rgba(0, 54, 112, 0.08);
}

.tl-field__control svg {
  color: var(--primary);
  flex-shrink: 0;
}

.tl-field__control input,
.tl-field__control select {
  width: 100%;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-main);
  height: 100%;
}

.tl-field__control select {
  cursor: pointer;
}

.tl-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 3rem;
  padding: 0 1.875rem;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 0.75rem;
  border-radius: var(--radius-md);
  white-space: nowrap;
  box-shadow: 0 0.5rem 1.25rem rgba(227, 6, 19, 0.28);
  transition: var(--transition);
}

.tl-search__submit:hover {
  background: var(--accent-hover);
  transform: translateY(-0.125rem);
}

/* ======= ĐIỂM ĐẾN TIÊU BIỂU ======= */
.tl-feat {
  padding: 2.75rem 0;
}

.tl-feat__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.375rem;
}

/* "Các điểm đến ưu chuộng": hai nút cố định hai đầu, thẻ cuộn ngang ở giữa.
   Trước đây là lưới cuộn không nút, và thanh cuộn hệ thống (`scrollbar-width:
   thin`) nằm ngay dưới dải — trên máy tính không ai nghĩ là cuộn được. */
.tl-feat__scroll {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.tl-feat__track {
  /* `min-width: 0` bắt buộc, nếu không flex item nở theo nội dung và overflow-x
     không bao giờ kích hoạt. */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 1.125rem;
  overflow-x: auto;
  padding: 0.25rem 0.125rem 0.5rem;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tl-feat__track::-webkit-scrollbar {
  display: none;
}

.tl-feat__nav {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  border: 0.0625rem solid var(--border);
  border-radius: 50%;
  background: var(--bg-surface);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: var(--transition);
}

.tl-feat__nav:hover:not(:disabled) {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.tl-feat__nav:disabled {
  color: #C8D3DC;
  cursor: default;
}

.tl-feat__nav[hidden] {
  display: none;
}

/* ======= CÁC TOUR ĐANG TÌM PHỔ BIẾN ======= */
.tl-popular {
  padding: 1.5rem 0 0;
}

.tl-popular__title {
  margin-bottom: 0.875rem;
}

.tl-popular__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tl-popular__chip {
  display: inline-block;
  padding: 0.5rem 1.125rem;
  border-radius: var(--radius-full);
  background: #EAF1FB;
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 600;
  transition: var(--transition);
}

.tl-popular__chip:hover {
  background: var(--primary);
  color: #fff;
}

.tl-feat__scroll::-webkit-scrollbar {
  height: 0.375rem;
}

.tl-feat__scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 6.1875rem;
}

.tl-dest {
  position: relative;
  /* Bề ngang do chính thẻ quyết định, vì dải đã đổi từ grid sang flex —
     grid-auto-columns không còn tác dụng. */
  flex: 0 0 11.875rem;
  display: block;
  height: 15rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  scroll-snap-align: start;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.tl-dest:hover {
  transform: translateY(-0.25rem);
  box-shadow: var(--shadow-hover);
}

.tl-dest__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: var(--transition);
}

.tl-dest:hover .tl-dest__img {
  transform: scale(1.08);
}

.tl-dest::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 22, 48, 0.85) 0%, rgba(0, 22, 48, 0.1) 55%, transparent 100%);
}

.tl-dest__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  color: #fff;
  z-index: 2;
}

.tl-dest__flag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  font-size: 1.375rem;
  filter: drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.3));
}

.tl-dest__name {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01875rem;
}

.tl-dest__count {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.125rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.tl-dest__from {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gold);
}

/* ======= LAYOUT: SIDEBAR + DANH SÁCH ======= */
.tl-body {
  padding: 2.5rem 0 4rem;
}

.tl-layout {
  display: grid;
  grid-template-columns: 17.5rem 1fr;
  gap: 1.875rem;
  align-items: start;
}

/* --- Sidebar bộ lọc --- */
.tl-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 1rem);
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  /* KHÔNG `overflow: hidden` (khách báo 24/09/2026: ô "Điểm tham quan" kéo tới
     cuối vẫn thiếu mục). Bảng thả xuống `.tl-combo__panel` là absolute, cao
     ~270px; cột lọc ngắn (Pháp, Đức, Ý, Thụy Sĩ — chỉ hai ô chọn + Lịch trình +
     Khoảng giá) thì bảng thò khỏi đáy cột 18–43px và bị cắt ngay giữa dòng
     cuối. Góc bo trên của dải xanh nay do chính `.tl-sidebar__head` tự bo.
     Ngăn kéo điện thoại vẫn `overflow-y: auto` ở luật 860px bên dưới. */
  overflow: visible;

  /* Chiều cao dòng của riêng cột lọc.
     `.public-site` đặt `line-height: 1.625rem` — một ĐỘ DÀI, nên nó truyền
     xuống nguyên xi 26px cho mọi thứ bên trong bất kể cỡ chữ. Ở đây chữ chỉ
     12px và ô tick 15px, vậy mà mỗi dòng vẫn cao 32px — hai phần ba là khoảng
     trống thừa, nhân với 14 dòng thì cả cột dài quá màn hình. Đặt lại bằng một
     CON SỐ để nó nhân theo cỡ chữ của chính từng dòng. */
  line-height: 1.3;
}

.tl-sidebar__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-bottom: 0.0625rem solid var(--border);
  background: var(--primary);
  color: #fff;
  /* Cột lọc không còn cắt con của nó (xem .tl-sidebar) nên dải xanh phải tự bo
     theo góc thẻ — trừ 1px viền, không thì góc xanh lòi ra ngoài viền. */
  border-radius: calc(var(--radius-lg) - 0.0625rem) calc(var(--radius-lg) - 0.0625rem) 0 0;
}

.tl-sidebar__head h3 {
  font-size: 0.833313rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tl-sidebar__reset {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
}

.tl-sidebar__reset:hover {
  color: #fff;
}

/* Bộ lọc được nén lại: trước đó bốn nhóm với 14 dòng chọn cao hơn cả màn hình,
   phải cuộn mới thấy nhóm cuối — mà đây là cột `sticky`, cao quá viewport thì
   thôi dính. Nhớ rằng từ 1600px gốc rem chạy theo 1vw nên trên màn rộng mọi số đo
   ở đây tự phóng to, phải tiết kiệm hơn mức tưởng.
   Chỉ giảm đệm và khoảng cách; không bỏ nhóm hay dòng chọn nào. */
.tl-fgroup {
  padding: 0.75rem;
  border-bottom: 0.0625rem solid var(--border-light);
}

.tl-fgroup:last-of-type {
  border-bottom: none;
}

.tl-fgroup__title {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

/* Dòng ô tick của "Khu vực" / "Thời gian" / "Ngân sách".

   Giãn ra từ 09/09/2026: `padding: 0.0625rem` cho ra vùng bấm cao 15px, dưới xa
   mức 24px tối thiểu cho mục tiêu chạm, và bảy dòng dính liền nhau đọc thành
   một khối chữ đặc chứ không ra bảy lựa chọn. Nay mỗi dòng cao 26px, và khoảng
   hở nhìn thấy được giữa các dòng. */
.tl-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3125rem 0;
  font-size: 0.75rem;
  color: var(--text-main);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.tl-check input {
  width: 0.875rem;
  height: 0.875rem;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Số tour đi liền sau tên nhóm, KHÔNG đẩy sang mép phải bằng `margin-left: auto`
   như trước. Cột lọc rộng 280px mà nhãn chỉ chiếm một phần ba, nên con số bị
   quăng ra xa cả trăm pixel — đọc thành hai cột rời nhau, phải dóng mắt mới biết
   số nào của dòng nào. Càng rõ trên màn rộng: từ 1600px gốc rem chạy theo 1vw
   nên khoảng trống đó tự phóng to theo. */
.tl-check__count {
  font-size: 0.6875rem;
  color: var(--text-light);
  background: var(--bg-subtle);
  padding: 0 0.375rem;
  border-radius: var(--radius-full);
}

.tl-check:hover {
  color: var(--accent);
}

/* Ô chọn "Điểm đến" / "Điểm tham quan": 102 chuyên mục và 423 tên điểm không
   thể bày thành ô tick, nên dùng menu chọn — cũng đúng như bản mẫu khách gửi. */
.tl-fselect {
  display: flex;
  align-items: center;
  height: 1.875rem;
  padding: 0 0.5rem;
  background: var(--bg-subtle);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
}

.tl-fselect select {
  width: 100%;
  background: transparent;
  font-size: 0.75rem;
  color: var(--text-main);
  cursor: pointer;
}

/* ===== Ô chọn có tìm kiếm ("Điểm đến" / "Điểm tham quan") =====

   Dựng chồng lên thẻ <select> thật (xem tour-list.js): thẻ đó vẫn mang `name`
   và vẫn là thứ được gửi đi, chỉ bị đẩy ra khỏi tầm nhìn. Không có JavaScript
   thì lớp `--combo` không bao giờ được gắn, menu chuẩn hiện nguyên và lọc vẫn
   chạy — chỉ mất phần gõ để tìm. */
.tl-fselect--combo {
  position: relative;
  display: block;
  height: auto;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

/* GIẤU chứ không `display: none`: thẻ vẫn phải nằm trong luồng để form gửi
   được giá trị, và `display: none` thì trình duyệt bỏ qua nó khi kiểm tra
   tính hợp lệ. */
.tl-fselect--combo select {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  opacity: 0;
  pointer-events: none;
}

.tl-combo__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  height: 2rem;
  padding: 0 0.5rem;
  background: var(--bg-subtle);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  /* Nhãn dài ("Du lịch Nhật Bản (60)") không được xuống dòng làm nút cao gấp
     đôi các nút bên cạnh. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mũi tên xuống vẽ bằng ::after để không phải thêm một thẻ svg cho mỗi ô. */
.tl-combo__btn::after {
  content: "";
  flex: 0 0 auto;
  width: 0.375rem;
  height: 0.375rem;
  margin-bottom: 0.125rem;
  border-right: 0.09375rem solid var(--primary);
  border-bottom: 0.09375rem solid var(--primary);
  transform: rotate(45deg);
}

.tl-combo__btn:hover,
.tl-combo__btn[aria-expanded="true"] {
  border-color: var(--primary);
}

/* Bảng thả xuống ĐÈ LÊN nội dung dưới nó, không đẩy cột lọc dài ra: cột này
   cao sẵn hơn một màn, mở ô chọn mà đẩy tiếp là nút "Áp dụng bộ lọc" rơi ra
   ngoài tầm nhìn đúng lúc khách vừa chọn xong. */
.tl-combo__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  padding: 0.375rem;
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.tl-combo__search {
  width: 100%;
  height: 1.875rem;
  padding: 0 0.5rem;
  margin-bottom: 0.375rem;
  background: var(--bg-subtle);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: var(--text-main);
}

.tl-combo__search:focus {
  outline: none;
  border-color: var(--primary);
}

/* Kẹp chiều cao rồi cho cuộn: 60 mục đổ hết ra là bảng dài hơn cả màn hình,
   ô tìm kiếm ở trên cùng bị đẩy khuất ngay khi mở. */
.tl-combo__list {
  max-height: 13.75rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tl-combo__row {
  display: block;
  width: 100%;
  padding: 0.375rem 0.5rem;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
}

.tl-combo__row:hover,
.tl-combo__row:focus-visible {
  background: var(--bg-subtle);
  color: var(--accent);
}

.tl-combo__row.is-active {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
}

.tl-combo__row[hidden] {
  display: none;
}

.tl-combo__empty {
  padding: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-light);
  text-align: center;
}

.tl-combo__empty[hidden] {
  display: none;
}

.tl-fapply {
  display: block;
  width: calc(100% - 1.5rem);
  margin: 0.125rem 0.75rem 0.75rem;
  padding: 0.4375rem 0.75rem;
  background: var(--primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.tl-fapply:hover {
  background: var(--primary-light, var(--primary));
}

.tl-sidebar__reset[hidden] {
  display: none;
}

/* --- Cột nội dung --- */
.tl-content {
  min-width: 0;
}

/* Thanh sắp xếp: KHÔNG nền, KHÔNG viền, KHÔNG đổ bóng (yêu cầu 09/09/2026).

   Dòng "Tìm thấy N tour" bên trái đã gỡ ở templates.ts, nên tấm thẻ trắng này
   chỉ còn bọc mỗi ô chọn sắp xếp — một dải cao 3.5rem chen giữa bộ lọc và hàng
   thẻ đầu, đẩy kết quả xuống dưới nếp gấp mà không nói thêm điều gì.

   `flex-end` chứ không phải `space-between`: còn đúng một con thì
   `space-between` dán nó vào mép TRÁI, trong khi ô sắp xếp bao giờ cũng đứng
   bên phải. */
.tl-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.875rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.tl-toolbar__count {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.tl-toolbar__count strong {
  color: var(--primary);
  font-size: 1rem;
}

.tl-toolbar__right {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.tl-toolbar__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.tl-sort {
  height: 2.5rem;
  padding: 0 2.125rem 0 0.875rem;
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface) 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='%23002248' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 0.75rem center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  appearance: none;
}

.tl-filter-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 1rem;
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--primary);
  background: var(--bg-surface);
}

/* Lưới tour trong cột nội dung */
.tl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.375rem;
}

.tl-empty {
  display: none;
  text-align: center;
  padding: 3.75rem 1.25rem;
  color: var(--text-muted);
}

.tl-empty.is-visible {
  display: block;
}

.tl-empty svg {
  display: block;
  color: var(--text-light);
  margin: 0 auto 0.75rem;
}

/* ======= TẢI THÊM =======
   Thay hẳn thanh phân trang: danh sách tự nạp tiếp khi cuộn tới đây. Nút vẫn là
   liên kết thật sang trang sau (tắt JS thì bấm được), nên nó phải trông bấm được
   chứ không phải một dòng chữ trạng thái. */
.tl-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  margin-top: 2.5rem;
}

.tl-more__status {
  font-size: 0.8125rem;
  color: var(--text-light);
}

.tl-more__status strong {
  font-weight: 700;
  color: var(--text-main);
}

.tl-more__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.625rem;
  padding: 0 1.5rem;
  border: 0.0625rem solid var(--border);
  border-radius: 999rem;
  background: var(--bg-surface);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--text-main);
  transition: var(--transition);
}

.tl-more__btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Vòng xoay chỉ hiện lúc đang tải. Đặt trên ::before của nút để khỏi thêm phần tử
   nào vào markup server render — mốc này còn phải chạy được khi không có JS. */
.tl-more.is-loading .tl-more__btn {
  color: var(--text-light);
  pointer-events: none;
}

.tl-more.is-loading .tl-more__btn::before {
  content: '';
  width: 0.875rem;
  height: 0.875rem;
  border: 0.125rem solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: tl-more-spin 0.6s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .tl-more.is-loading .tl-more__btn::before {
    animation-duration: 2s;
  }
}

/* ======= CÁC TOUR BẠN VỪA XEM =======

   Dải này do trình duyệt đổ đầy (xem `setupRecentTours` trong index.js), máy
   chủ chỉ in ra cái vỏ mang `hidden`. Luật `[hidden]` bên dưới là BẮT BUỘC, không
   phải viết cho đủ: `hidden` chỉ là `display: none` của stylesheet TRÌNH DUYỆT,
   nên khai `display` cho `.tl-recent` ở đây là nó thắng và cái vỏ rỗng hiện ra
   với đúng một tiêu đề. Cùng cái bẫy đã làm trang đặt tour thành công hiện kèm
   khối "Chưa có đơn hàng".

   Thẻ ở đây là thẻ RÚT GỌN, không phải `.tour-card`: khách đã xem tour này rồi,
   dải chỉ cần đủ để nhận ra và bấm lại. Thẻ đầy đủ cao 430px, tám thẻ là thêm
   một trang cuộn nữa sau danh sách kết quả. */
.tl-recent {
  display: block;
  padding: 0 0 2.5rem;
}

.tl-recent[hidden] {
  display: none;
}

.tl-recent__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.875rem;
}

.tl-recent__title {
  margin: 0;
}

.tl-recent__clear {
  flex: 0 0 auto;
  padding: 0;
  background: none;
  border: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}

.tl-recent__clear:hover {
  color: var(--accent);
}

/* Băng cuộn KHÔNG tự khai display/gap/overflow: nó mang sẵn `.hcarousel__track`
   của index.css. Khai lại ở đây là đè lên (tour-list.css nạp sau), mà `gap` thì
   index.js đọc để tính bước nhảy của hai mũi tên — lệch một con số là mỗi lần
   bấm trôi sai vài pixel và dồn dần. */

/* `flex-grow: 1` là chỗ làm dải rộng ĐÚNG 100% container (yêu cầu 09/09/2026).
   Ít thẻ hơn một màn thì chúng chia nhau phần dư — bốn thẻ ở 1240px nở từ 272px
   lên ~296px, không còn khoảng trắng chết bên phải. Nhiều hơn một màn thì tổng
   bề rộng cơ sở đã vượt khung nên không nở nữa (`flex-shrink: 0` giữ chúng
   không co lại), băng tràn ra và hai mũi tên tự hiện. Một dòng lo cả hai trạng
   thái, không cần đếm số thẻ. */
.tl-recent__card {
  flex: 1 0 17rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem;
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  scroll-snap-align: start;
  transition: var(--transition);
}

.tl-recent__card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.tl-recent__thumb {
  flex: 0 0 4.5rem;
  height: 3.5rem;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}

.tl-recent__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tl-recent__body {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  /* Không có dòng này thì tên tour dài đẩy thẻ rộng ra thay vì bị cắt: mặc định
     của một flex item là không co nhỏ hơn nội dung. */
  min-width: 0;
}

.tl-recent__name {
  font-size: 0.8125rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--text-main);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tl-recent__meta {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tl-recent__price {
  font-size: 0.875rem;
  line-height: 1.35;
  font-weight: 800;
  color: var(--accent);
}

/* ======= SEO TEXT BLOCK ======= */
.tl-seo {
  padding: 0 0 3.75rem;
}

.tl-seo__box {
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 2.25rem;
  box-shadow: var(--shadow-sm);
}

.tl-seo__box h2 {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 0.875rem;
}

.tl-seo__box p {
  font-size: 0.75rem;
  line-height: 1.75;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.tl-seo__box p:last-child {
  margin-bottom: 0;
}

/* ======= RESPONSIVE ======= */
@media (max-width: 1080px) {
  .tl-layout {
    grid-template-columns: 15rem 1fr;
    gap: 1.375rem;
  }

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

@media (max-width: 900px) {
  .tl-searchbox__row {
    grid-template-columns: repeat(2, 1fr);
  }

  .tl-search__submit {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {

  /* Trên mobile: lọc & tìm kiếm nằm ở thanh cố định dưới cùng,
     nên ẩn nút lọc trong toolbar để tránh trùng lặp */
  .tl-filter-toggle {
    display: none;
  }

  .tl-layout {
    grid-template-columns: 1fr;
  }

  .tl-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 86%;
    max-width: 21.25rem;
    z-index: 1200;
    border-radius: 0;
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    box-shadow: var(--shadow-hover);
  }

  body.tl-filters-open .tl-sidebar {
    transform: translateX(0);
  }

  /* Ngăn kéo vuông góc (border-radius 0 ở trên) — dải xanh cũng vuông theo. */
  .tl-sidebar__head {
    border-radius: 0;
  }

  .tl-sidebar__close {
    display: inline-flex !important;
  }

  /* Trên điện thoại cột lọc là ngăn kéo tự cuộn, không ăn vào chiều cao trang
     nữa — nên nới lại vùng bấm cho ngón tay. Vẫn thấp hơn 32px của bản cũ. */
  .tl-check {
    padding: 0.1875rem 0;
  }

  .tl-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 22, 48, 0.5);
    -webkit-backdrop-filter: blur(0.125rem);
    backdrop-filter: blur(0.125rem);
    z-index: 1150;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
  }

  body.tl-filters-open .tl-backdrop,
  body.tl-search-open .tl-backdrop,
  body.tl-sort-open .tl-backdrop {
    opacity: 1;
    visibility: visible;
  }

  /* Trên mobile, mọi thao tác gom về thanh cố định → dọn gọn toolbar */
  .tl-toolbar__right {
    display: none;
  }

  /* Ẩn box search đầu trang trên mobile — đã có nút Tìm kiếm ở thanh cố định */
  .tl-search {
    display: none;
  }

  /* Hiện thanh lọc · sắp xếp · tìm kiếm cố định */
  .tl-mobilebar {
    display: flex;
  }

  /* Chừa chỗ cho thanh cố định (cộng vùng safe-area của iPhone) */
  body {
    padding-bottom: calc(4.375rem + env(safe-area-inset-bottom, 0));
  }

  /* KHÔNG ghi đè `bottom` của riêng .back-to-top ở đây nữa.
     Luật cũ chỉ nâng một trong hai nút, nút còn lại (.social-rail) vẫn nằm ở
     mốc chung — hai nút cách nhau 34px trong khi mỗi nút cao 44px, thành ra
     chồng khít lên nhau trên mobile. Giờ index.js nâng cả cặp lên khỏi
     .tl-mobilebar bằng --float-rail-lift, giữ nguyên khoảng hở giữa chúng. */
}

.tl-sidebar__close {
  display: none;
  background: none;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.125rem 0.375rem;
}

@media (max-width: 720px) {

  /* Banner ảnh ĐI HẲN trên điện thoại.
     Nó cao 17.5rem, không mang thông tin nào về tour đang xem, mà lại là thứ
     đầu tiên khách phải cuộn qua trước khi thấy thẻ tour đầu tiên. Trên màn
     rộng nó còn nằm cạnh nội dung khác nên không choán chỗ như vậy.
     `display: none` chứ không phải ẩn bằng chiều cao: ảnh nền là file thật,
     giấu mà vẫn tải là tốn băng thông đúng chỗ băng thông đắt nhất. */
  .tl-adbanner {
    display: none;
  }

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

  .tl-body,
  .tl-feat {
    padding: 1.25rem 0 !important;
  }

  /* Dải vừa xem bám ra sát mép như lưới thẻ.

     Cách làm khác với luật gutter dùng chung trong index.css: đây là một hộp
     CUỘN NGANG, kéo cả hộp bằng margin âm rồi thôi thì thẻ đầu và thẻ cuối dính
     luôn vào mép màn, còn thẻ cuối lại không cuộn hết vào tầm nhìn được. Nên
     huỷ đúng phần padding của .container bằng margin âm, rồi trả lại 0.5rem
     bằng padding BÊN TRONG hộp cuộn — mép thẻ ra 8px, khớp .tl-grid, mà hai
     đầu dải vẫn có chỗ thở. */
  .tl-recent__scroll {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    /* Không có dòng này thì `padding-left` ở trên vô nghĩa: mốc neo của
       scroll-snap mặc định là MÉP VIỀN của hộp cuộn, nên trình duyệt tự cuộn
       thêm đúng 8px để dán mép thẻ đầu vào mép hộp — đo được thẻ đầu nằm ở 0px
       trong khi lưới thẻ ở 8px. `scroll-padding` dịch cái mốc đó vào trong. */
    scroll-padding-left: 0.5rem;
  }

  /* Hai mũi tên đứng ở `left/right: -1.125rem` so với vỏ carousel, tức nằm
     trong lề của `.container`. Băng vừa bị kéo ra sát mép màn ở trên, nên lề đó
     không còn — mũi tên rơi ra ngoài khung nhìn và bị `body { overflow-x:
     hidden }` cắt mất một nửa. index.css đã ẩn chúng từ 680px trở xuống; đây là
     phần bù cho khoảng 681–720px, đúng vùng băng đã bám mép mà mũi tên thì
     chưa được ẩn. */
  .tl-recent .hcarousel__arrow {
    display: none;
  }

}

@media (max-width: 560px) {
  .tl-searchbox {
    margin-top: -2rem;
  }

  .tl-searchbox__row {
    grid-template-columns: 1fr;
  }

  .tl-grid {
    grid-template-columns: 1fr;
  }

  .tl-adbanner__title {
    font-size: 1.625rem;
  }

  .tl-toolbar {
    justify-content: flex-end;
  }
}

/* ==========================================================================
   THANH LỌC & TÌM KIẾM CỐ ĐỊNH + BOTTOM SHEET (chỉ hiển thị trên mobile)
   ========================================================================== */
.tl-mobilebar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  align-items: stretch;
  gap: 0;
  /* Không đặt chiều cao cố định: để nút giữ nguyên kích thước,
     safe-area chỉ THÊM đệm bên dưới (tránh bị bóp trên iPhone có home indicator) */
  padding: 0.5rem 0.75rem max(1rem, calc(0.5rem + env(safe-area-inset-bottom, 0)));
  background: var(--bg-surface);
  border-top: 0.0625rem solid var(--border);
  box-shadow: 0 -0.5rem 1.5rem rgba(0, 34, 72, 0.1);
}

.tl-mobilebar__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  min-height: 2.875rem;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--primary);
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.tl-mobilebar__btn svg {
  flex-shrink: 0;
}

.tl-mobilebar__btn:active {
  transform: scale(0.97);
}

.tl-mobilebar__btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: none;
}

.tl-mobilebar__sep {
  width: 0.0625rem;
  margin: 0.375rem 0.375rem;
  background: var(--border);
}

/* `display: inline-flex` ở đây THẮNG thuộc tính `hidden` của HTML (hidden chỉ
   là `display: none` trong stylesheet của trình duyệt, thua mọi khai báo của
   tác giả). Không có luật dưới đây thì viên đếm luôn hiện, và khi chưa lọc gì
   nó hiện đúng con số "0" — thứ khách chụp lại ngày 21/09/2026. Cùng cái bẫy
   đã gặp ở trang /booking-success. */
.tl-mobilebar__badge[hidden] {
  display: none;
}

.tl-mobilebar__badge {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: var(--accent);
  border-radius: var(--radius-full);
}

/* --- Bottom sheet tìm kiếm --- */
.tl-sheet {
  position: fixed;
  inset: 0;
  z-index: 1250;
  visibility: hidden;
  pointer-events: none;
}

body.tl-search-open #tl-search-sheet,
body.tl-sort-open #tl-sort-sheet {
  visibility: visible;
}

/* Container trong suốt không chặn tap (để chạm vùng mờ ngoài panel = đóng qua backdrop);
   chỉ panel nhận sự kiện */
.tl-sheet__panel {
  pointer-events: auto;
}

.tl-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-surface);
  border-radius: 1.25rem 1.25rem 0 0;
  padding: 0.625rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -0.75rem 2.5rem rgba(0, 22, 48, 0.28);
  transform: translateY(100%);
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

body.tl-search-open #tl-search-sheet .tl-sheet__panel,
body.tl-sort-open #tl-sort-sheet .tl-sheet__panel {
  transform: translateY(0);
}

/* Danh sách tuỳ chọn sắp xếp trong bottom sheet */
.tl-sortlist {
  display: flex;
  flex-direction: column;
}

.tl-sortlist__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.9375rem 0.25rem;
  font-size: 0.96875rem;
  font-weight: 600;
  color: var(--text-main);
  border-bottom: 0.0625rem solid var(--border-light);
  text-align: left;
}

.tl-sortlist__item:last-child {
  border-bottom: none;
}

.tl-sortlist__tick {
  color: var(--accent);
  opacity: 0;
  transition: var(--transition);
}

.tl-sortlist__item.is-active {
  color: var(--accent);
  font-weight: 800;
}

.tl-sortlist__item.is-active .tl-sortlist__tick {
  opacity: 1;
}

.tl-sheet__grip {
  width: 2.75rem;
  height: 0.3125rem;
  border-radius: 6.1875rem;
  background: var(--border);
  margin: 0.25rem auto 0.75rem;
}

.tl-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.125rem;
}

.tl-sheet__head h3 {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--primary);
}

.tl-sheet__close {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
}

.tl-sheet__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tl-sheet__actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.tl-sheet__reset {
  padding: 0 1.25rem;
  height: 3.125rem;
  border-radius: var(--radius-md);
  border: 0.0625rem solid var(--border);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text-muted);
  background: var(--bg-surface);
}

.tl-sheet__submit {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5625rem;
  height: 3.125rem;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 0.96875rem;
  box-shadow: 0 0.5rem 1.25rem rgba(227, 6, 19, 0.28);
}

.tl-sheet__submit:active {
  transform: scale(0.98);
}

/* Ghi đè cuối cùng: bảo đảm thanh cố định hiển thị trên mobile
   (đặt sau khai báo `.tl-mobilebar { display:none }` để thắng theo thứ tự CSS) */
@media (max-width: 860px) {
  .tl-mobilebar {
    display: flex;
  }
}

/* iOS Safari: font ô nhập ≥ 16px trên mobile để không tự phóng to khi focus */
@media (max-width: 640px) {

  .tl-field__control input,
  .tl-field__control select,
  .tl-sort {
    font-size: 1rem;
  }
}


/* ===========================================================================
   Bảng gợi ý điểm đến trong ô "Điểm đến" của thanh tìm kiếm.

   Bảng dùng chung với thanh tìm kiếm trang chủ (.hero__dest-panel, dựng ở
   public/legacy/index.css) — chỉ cần cho ô chứa làm mốc định vị, phần còn lại
   thừa hưởng nguyên.

   `overflow: visible` là bắt buộc dù .tl-field__control không tự đặt overflow:
   nó là flex container cao đúng 3rem, và bảng cao ~30rem nằm bên trong. Không
   khai báo thì trình duyệt vẫn vẽ tràn ra được, nhưng khai báo tường minh để
   lần sau ai thêm `overflow: hidden` cho hiệu ứng bo góc thì thấy ngay ràng
   buộc này.
   ======================================================================== */
.tl-field__control--dest {
  position: relative;
  overflow: visible;
}

/* Bảng neo vào ô "Điểm đến" — ô này chỉ chiếm ~1/4 thanh tìm kiếm, mà lưới ba
   cột cần chỗ cho ảnh + tên + số tour. Kẹp theo bề ngang màn để không sinh
   thanh cuộn ngang cho cả trang. */
.tl-field__control--dest .hero__dest-panel {
  width: max(100%, 44rem);
  max-width: calc(100vw - 3rem);
}

/* Trừ ô trong bảng trượt tìm kiếm trên di động: ở đó bảng nằm TRONG một lớp đã
   có lề riêng, nên nới ra 44rem là nó thò khỏi hai mép lớp ấy. Bám đúng bề
   ngang ô là vừa — trên màn đó ô rộng bằng cả bảng. */
.tl-sheet__form .tl-field__control--dest .hero__dest-panel {
  width: 100%;
  max-width: 100%;
}

/* ===========================================================================
   Bảng chọn tháng / nơi khởi hành / ngân sách.

   Cũng dùng chung với thanh trang chủ (.hero__picker-* bên index.css); ở đây
   chỉ khai báo đúng phần khác: ô chứa của thanh này mang tên class khác.
   ======================================================================== */
.tl-field__control.hero__search-field--picker {
  position: relative;
  overflow: visible;
}

/* index.css để mũi tên của nút màu xám nhạt, nhưng tour-list.css nạp SAU nó và
   `.tl-field__control svg` cùng độ đặc hiệu nên thắng — tô lại ở đây, không thì
   mũi tên xanh đậm trông như biểu tượng thứ hai của ô. */
.tl-field__control .hero__picker-trigger svg {
  color: var(--text-muted);
}

/* ===========================================================================
   Ô chọn nhánh sản phẩm trên điện thoại (.hero__search-typefield, dựng ở
   index.js).

   Cùng một ô đó, nhưng ở trang chủ nó nằm cạnh những ô không viền còn ở đây
   cạnh những ô có viền cao 3rem — nên chỉ khai lại đúng lớp vỏ, ruột thừa
   hưởng nguyên từ index.css.
   ======================================================================== */
.tl-searchbox .hero__search-typefield,
.tl-sheet__body .hero__search-typefield {
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  min-height: 3rem;
  padding: 0 0.75rem;
}

/* Thanh của /tours xếp các ô theo `align-items: end` cho thẳng đáy với nút bấm;
   dải này nằm trọn một hàng riêng nên phải tự nới rộng, không thì nó co lại
   bằng bề ngang chữ dài nhất. */
.tl-searchbox .hero__search-types.is-enhanced {
  align-self: stretch;
}