/* ==========================================================================
   TOP TEN TRAVEL — TRANG CHI TIẾT TOUR (tour-details)
   Kế thừa design tokens & component từ index.css (load trước file này)
   ========================================================================== */

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

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

/* Ở tour-details.html thứ tự lồng nhau là NGƯỢC với tours.html:
   `.td-breadcrumb__inner > .container > a/span`, chứ không phải
   `.container > .tl-breadcrumb__inner > a/span`. Đặt flex+gap lên `__inner`
   thì nó chỉ có đúng một con là `.container`, còn các mắt breadcrumb bên
   trong nằm inline sát nhau — ra "Trang chủ›Cẩm nang du lịch›Khám phá…".
   Nên hàng flex phải đặt lên `.container`; `__inner` giữ phần nền, lề dọc và
   cỡ chữ. Cũng chừa `__inner` chạy được cho trường hợp không có `.container`. */
.td-breadcrumb__inner {
  padding: 0.875rem 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.td-breadcrumb__inner,
.td-breadcrumb__inner>.container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* 0.5rem là khoảng hở của bản mockup và vẫn quá chật khi có dấu › ở giữa:
     mắt đọc thành một chuỗi liền. 0.5rem cho khoảng cách chữ↔dấu, cộng lề
     riêng hai bên dấu ở dưới. */
  gap: 0.5rem;
  row-gap: 0.375rem;
}

/* `.container` bình thường là khối canh giữa có max-width; làm con của một
   hàng flex thì nó co lại vừa nội dung và breadcrumb chạy dạt sang trái mép
   màn hình. Trả lại chiều rộng cho nó. */
.td-breadcrumb__inner>.container {
  flex: 1 1 auto;
}

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

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

.td-breadcrumb__sep {
  color: var(--text-light);
  /* Dấu › đứng cách đều hai bên: cộng với gap ở trên thành ~0.75rem mỗi bên —
     đủ để từng mắt tách ra thành một mục bấm được chứ không phải một dòng chữ
     dài. */
  margin: 0 0.25rem;
}

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

/* ======= TIÊU ĐỀ TOUR ======= */
.td-head {
  padding: 1.5rem 0 0.25rem;
}

.td-head__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.td-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--radius-full);
}

.td-chip--hot {
  background: var(--accent);
  color: #fff;
}

.td-chip--code {
  background: var(--bg-subtle);
  color: var(--primary);
  border: 0.0625rem solid var(--border);
  /* Mã tour vẫn dùng font chung; chỉ mượn chữ số đều bề ngang của nó để hai mã
     xếp cạnh nhau không so le. */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01875rem;
}

.td-chip--gold {
  background: var(--gold-light);
  color: #8a6d1a;
}

.td-head__title {
  font-size: 1.666688rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03125rem;
  color: var(--primary);
  margin-bottom: 0;
}

.td-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.125rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.td-head__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
  color: var(--text-main);
}

.td-stars {
  color: var(--gold);
  letter-spacing: 0.0625rem;
  font-size: 0.9375rem;
}

.td-head__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.td-head__meta-item svg {
  color: var(--accent);
}

.td-head__share {
  margin-left: auto;
  display: inline-flex;
  gap: 0.5rem;
}

.td-share-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  border: 0.0625rem solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: var(--bg-surface);
  transition: var(--transition);
}

.td-share-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Nút chia sẻ ở đầu bài viết là <button> chứ không phải <a>: phải tự dập
   padding và con trỏ mặc định của trình duyệt, nếu không hai nút cao thấp
   khác nhau. */
.td-share-btn {
  padding: 0;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
}

/* Lời báo "Đã chép link": bật bằng lớp .is-visible chứ không phải :hover —
   nó là kết quả của một cú bấm, hiện lên khi rê chuột thì thành lời hứa suông. */
.td-share-tip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(0.25rem);
  white-space: nowrap;
  background: var(--text-main);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm, 0.25rem);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  pointer-events: none;
}

.td-share-btn.is-copied .td-share-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ======= ĐẦU BÀI VIẾT: NGÀY • CHUYÊN MỤC ======= */
.td-head__meta--news {
  gap: 0.625rem;
  font-size: 0.8125rem;
}

.td-head__meta--news .td-head__meta-item a {
  color: inherit;
}

.td-head__meta--news .td-head__meta-item a:hover {
  color: var(--accent);
}

.td-head__dot {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: var(--radius-full);
  background: var(--accent);
  flex: 0 0 auto;
}

/* Nét kẻ nối phần chữ với cụm nút, đúng như bản cũ. `min-width` giữ cho nó
   không nuốt chỗ khi màn hẹp — lúc đó dòng tự xuống hàng. */
.td-head__rule {
  flex: 1 1 2rem;
  min-width: 1.5rem;
  height: 0.0625rem;
  background: var(--border);
}

@media (max-width: 40rem) {
  .td-head__meta--news .td-head__share {
    margin-left: 0;
  }
}

/* ======= GALLERY ======= */
.td-gallery {
  padding: 1rem 0 0.5rem;
}

/* Mọi ô ảnh đúng 3:2 — tỉ lệ của ảnh sản phẩm (900x600), của thẻ tour ở trang
   chủ và của slider site đang chạy. Không ghim chiều cao lưới nữa: ghim 460px
   trong cột 2:1 là ô 1.72:1 và `cover` xén mất chữ in trên đầu banner.

   Ảnh chính giữ `aspect-ratio`, hàng lưới cao theo nó, cột phải kéo giãn bằng
   hàng. Bề ngang cột phải tính sao cho k ô 3:2 chồng nhau (cách nhau g) cao
   ĐÚNG bằng ảnh chính: gọi C là bề ngang lưới, W là bề ngang cột phải thì
     k = 3 → W = C/4 − g        (ảnh chính = 3C/4)
     k = 2 → W = C/3 − 5g/6
     k = 1 → hai cột bằng nhau
   Sai công thức là ô nhỏ lệch khỏi 3:2 và bị xén lại. `data-thumbs` do
   renderTourDetailTemplate đặt theo số ảnh thật. */
.td-gallery__grid {
  --td-gallery-gap: 0.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(25% - var(--td-gallery-gap));
  gap: var(--td-gallery-gap);
}

.td-gallery__grid[data-thumbs="2"] {
  grid-template-columns: minmax(0, 1fr) calc(100% / 3 - var(--td-gallery-gap) * 5 / 6);
}

.td-gallery__grid[data-thumbs="1"] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Chỉ có ảnh bìa: một ô, rộng bằng ảnh chính của bố cục đủ ảnh — full khổ
   container thì một tấm 3:2 cao tới 800px. */
.td-gallery__grid[data-thumbs="0"] {
  grid-template-columns: minmax(0, 75%);
  justify-content: center;
}

.td-gallery__main,
.td-gallery__thumb {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-subtle);
}

.td-gallery__main {
  aspect-ratio: 3 / 2;
}

/* Ảnh nằm tuyệt đối trong ô nên KHÔNG góp chiều cao: hàng lưới chỉ cao theo
   `aspect-ratio` của ảnh chính, ảnh gốc khác tỉ lệ cũng không kéo lệch lưới. */
.td-gallery__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.td-gallery__main:hover .td-gallery__img {
  transform: scale(1.04);
}

.td-gallery__side {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: var(--td-gallery-gap);
}

.td-gallery__grid[data-thumbs="2"] .td-gallery__side {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.td-gallery__grid[data-thumbs="1"] .td-gallery__side {
  grid-template-rows: minmax(0, 1fr);
}

.td-gallery__thumb:hover .td-gallery__img {
  transform: scale(1.06);
}

.td-gallery__more {
  position: absolute;
  inset: 0;
  background: rgba(0, 22, 48, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 800;
}

/* ======= LAYOUT 2 CỘT ======= */
.td-body {
  padding: 1.25rem 0 3.75rem;
}

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

.td-content {
  min-width: 0;
}

/* ======= QUICK FACTS ======= */
/* Khối thông tin nhanh: mỗi ý MỘT THẺ riêng trong lưới 3 cột, trong thẻ thì icon
   đứng cùng dòng với nhãn, giá trị xuống dòng dưới.

   Bản trước là một dải trắng liền năm ô ngăn bằng vạch dọc: ô nào cũng phải cao
   bằng ô cao nhất, nên một giá trị dài ("Thành phố Hồ Chí Minh" xuống hai dòng)
   là cả dải phình theo và bốn ô còn lại chừa một khoảng trống bằng đúng chỗ đó.
   Thẻ rời thì mỗi ô cao theo nội dung của chính nó.

   Số cột cố định 3 chứ không `auto-fit`: patcher gỡ ô rỗng nên số ô thay đổi
   theo tour (3 tới 5), mà `auto-fit` sẽ đổi luôn bề rộng thẻ theo số đó — cùng
   một trang, tour này thẻ rộng gấp rưỡi tour kia. */
.td-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
  margin-bottom: 1.625rem;
}

.td-fact {
  min-width: 0;
  /* Cột icon rộng cố định để nhãn và giá trị thẳng hàng nhau theo mép trái. */
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: start;
  column-gap: 0.5rem;
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.0625rem 1.125rem;
  box-shadow: var(--shadow-sm);
}

.td-fact__ic {
  width: 1.75rem;
  /* Cao đúng bằng line-height của nhãn: icon canh giữa theo dòng chữ bên cạnh,
     không lệch lên trên như khi để nó tự cao theo svg. */
  height: 1.75rem;
  flex-shrink: 0;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Nhãn là phần đọc trước nên đậm và đậm màu; giá trị nhạt hơn, cỡ nhỏ hơn.
   Giá trị ở đây là câu chứ không phải con số — "Nón công ty du lịch, thẻ hành
   lý, dù/túi công ty du lịch" mà in đậm cỡ nhãn thì cả thẻ thành một khối chữ
   đậm, không còn thứ bậc nào để mắt bám vào. */
.td-fact__label {
  font-size: 1rem;
  line-height: 1.75rem;
  color: var(--text-main);
  font-weight: 700;
  margin-bottom: 0.125rem;
}

.td-fact__value {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ======= SECTION CHUNG ======= */
.td-section {
  background: var(--bg-surface);
  border: none;
  border-radius: var(--radius-lg);
  padding: 2rem 2rem 2.125rem;
  box-shadow: 0 1.125rem 2.75rem rgba(16, 74, 147, 0.08);
  margin-bottom: 1.5rem;
  scroll-margin-top: 10rem;
}

.td-section__title {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--accent);
  margin-bottom: 1.375rem;
  padding-bottom: 1rem;
  border-bottom: 0.0625rem solid rgba(162, 17, 17, 0.14);
  display: flex;
  align-items: center;
  gap: 0.875rem;
  letter-spacing: 0;
}

.td-section__title::before {
  content: "";
  flex: 0 0 auto;
  width: 1.25rem;
  height: 0.125rem;
  border-radius: var(--radius-full);
  background: currentColor;
  box-shadow:
    0 -0.375rem 0 currentColor,
    0 0.375rem 0 currentColor;
}

.td-section__head {
  display: contents;
}

/* ======= MỤC GẬP ======= */
/* "Dịch vụ & quy định giá" đóng sẵn: mở ra là hai cột bao gồm/không bao gồm
   cộng quy định giá trẻ em, hơn hai màn hình chữ đẩy chính sách và đánh giá
   xuống tận đáy trang. renderTourDetailTemplate() in sẵn lớp bọc và nút bấm,
   nên mục đã đóng ngay từ byte đầu tiên — không có nhịp mở toang rồi sập lại
   lúc JS chạy.

   Giấu bằng LỚP CSS chứ không bằng thuộc tính `hidden`: `.td-serv` được khai
   `display: grid` ngay trong tệp này, mà `hidden` chỉ là `display: none` của
   trình duyệt nên thua mọi khai báo của tác giả. */
.td-section__head--fold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0;
  padding-bottom: 1rem;
  border-bottom: 0.0625rem solid rgba(162, 17, 17, 0.14);
  cursor: pointer;
}

.td-section__head--fold .td-section__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border-bottom: 0;
}

/* Mục đang đóng thì bỏ luôn đường kẻ dưới tiêu đề: nó vốn là nét ngăn tiêu đề
   với nội dung, mà lúc này bên dưới không còn gì — để lại thành một gạch chân
   lơ lửng giữa thẻ trắng. */
.td-section--fold:not(.is-open) .td-section__head--fold {
  padding-bottom: 0;
  border-bottom: 0;
}

.td-section__fold {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 0.09375rem solid rgba(162, 17, 17, 0.22);
  border-radius: var(--radius-full);
  background: #fff;
  color: var(--accent);
  font-weight: 800;
  font-size: 0.875rem;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.td-section__fold:hover {
  background: rgba(162, 17, 17, 0.06);
  border-color: rgba(162, 17, 17, 0.4);
}

/* `svg` bị reset toàn cục thành `display: block`, nên mũi tên tự nằm đúng hàng
   trong nút flex này; khai lại `display` ở đây chỉ để không phụ thuộc vào reset
   đó nếu nó đổi. */
.td-section__fold svg {
  display: block;
  transition: transform 0.25s ease;
}

.td-section--fold.is-open .td-section__fold svg {
  transform: rotate(180deg);
}

.td-section--fold .td-section__body {
  display: none;
}

.td-section--fold.is-open .td-section__body {
  display: block;
  padding-top: 1.375rem;
}

.td-itinerary-toggle,
.td-mobile-more {
  display: none;
}

/* ======= TABS ĐIỀU HƯỚNG ======= */
/* Thanh tab kiểu chữ phẳng: chỉ một đường kẻ dưới, tab đang xem đổi màu và có
   gạch chân — bỏ khung viên thuốc, viền và đổ bóng.

   Vì sao đổi: khung viên thuốc bọc quanh 8 tab thành một thanh nặng chiếm gần
   trọn bề ngang, mà nó lại DÍNH ở đầu trang nên đi theo suốt lúc cuộn. Ít nét
   hơn thì phần nội dung bên dưới mới là thứ nổi. */
.td-tabs {
  position: sticky;
  /* Dính SÁT mép dưới header, không chừa khoảng hở.
     Trước đây dùng `var(--header-height) + 0.5rem` = 88px, trong khi header đã
     thu nhỏ còn 70px lúc cuộn (.header.scrolled) — thành một khe 18px cho nội
     dung trang chạy qua, nhìn như chữ bị cắt ngang.
     `--header-current` do index.js cập nhật theo chiều cao THẬT của header ở
     từng trạng thái; `--header-height` chỉ là mức dự phòng khi chưa có JS. */
  top: var(--header-current, var(--header-height));
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 3rem;
  background: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 1.125rem 1.5rem;
  margin-bottom: 1.875rem;
  box-shadow: 0 1rem 2.5rem rgba(18, 34, 65, 0.09);
  overflow-x: auto;
  scrollbar-width: none;
}

.td-tabs::-webkit-scrollbar {
  display: none;
}

.td-tab {
  flex-shrink: 0;
  font-size: .9625rem;
  font-weight: 700;
  color: #555;
  padding: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition);
}

.td-tab:hover {
  color: var(--accent-hover);
}

.td-tab.is-active {
  color: var(--accent-hover);
  font-weight: 800;
}

/* ======= ĐIỂM NHẤN ======= */
/* `auto-fit` chứ không phải `1fr 1fr` cố định: mô tả ngắn của phần lớn tour là
   một đoạn văn liền, tách ra đúng một mục — cột thứ hai rỗng để trắng nửa khối.
   auto-fit thu gọn track rỗng nên một mục thì trải hết bề ngang, từ hai mục trở
   lên vẫn chia đôi như thiết kế. */
.td-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: 0.75rem 1.5rem;
}

.td-highlight {
  display: flex;
  gap: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  text-align: justify;
  color: var(--text-main);
}

.td-highlight svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: #16a34a;
}

.td-highlight span[aria-hidden="true"] {
  flex-shrink: 0;
  margin-top: 0.0625rem;
  color: var(--accent);
  font-weight: 800;
}

/* Điểm nhấn dựng từ bản mô tả thật (xem renderTourDetailTemplate): một cột chứ
   không phải lưới auto-fit — bản mô tả có cả đoạn dẫn nhập lẫn danh sách, xé
   đôi thành hai cột thì câu dẫn nằm cạnh gạch đầu dòng, đọc lộn xộn. */
.td-highlights--rich {
  display: block;
}

/* Mỗi `<li>` là một điểm nhấn: dấu ✓ xanh thay cho chấm tròn mặc định, cùng
   kiểu với cột "Giá tour bao gồm" để hai mục trên một trang đọc như một hệ. */
.td-highlights--rich .td-richtext ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.td-highlights--rich .td-richtext li {
  position: relative;
  margin: 0;
  padding-left: 1.75rem;
  /* Dữ liệu cũ gắn cứng `text-align: justify` trên từng dòng; căn đều làm giãn
     chữ loang lổ, đọc mệt hơn hẳn căn trái. */
  text-align: left !important;
}

.td-highlights--rich .td-richtext li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #16a34a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.6875rem no-repeat;
}

/* ======= MỤC LỤC BÀI VIẾT =======
 *
 * Đóng sẵn khi mở trang, giống site đang chạy: bài cẩm nang có tới 10 đầu mục,
 * bung sẵn là đẩy đoạn mở đầu xuống dưới nếp gấp.
 *
 * Danh sách ẩn bằng thuộc tính `hidden` của HTML chứ không bằng class riêng —
 * chưa có JS thì nó vẫn đóng đúng, và trình đọc màn hình hiểu ngay.
 */
.td-toc {
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: var(--bg-surface);
}

.td-toc__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  background: var(--bg-subtle);
  color: var(--primary);
  font-size: 1rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.td-toc__label {
  flex: 1;
  min-width: 0;
}

.td-toc__chevron {
  flex: none;
  transition: transform 0.2s ease;
}

.td-toc[data-toc-open] .td-toc__chevron {
  transform: rotate(180deg);
}

.td-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Mục lục 10 đầu mục vẫn vừa một màn; dài hơn thì cuộn trong chính nó thay vì
     đẩy cả bài xuống. */
  max-height: 60vh;
  overflow-y: auto;
}

.td-toc__item {
  border-top: 0.0625rem solid var(--border-light);
}

/* Mục lục lồng theo đúng thứ bậc của bài: <h3> nằm TRONG <li> của <h2> gần
   nhất, không phải một danh sách phẳng gắn class thụt lề. Đọc bằng trình đọc
   màn hình mới ra "mục 4, có 6 mục con" thay vì 10 dòng ngang hàng nhau. */
.td-toc__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.td-toc__link {
  display: block;
  padding: 0.8125rem 1.125rem;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text-main);
}

.td-toc__item--sub .td-toc__link {
  padding-left: 2.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
}

.td-toc__link:hover {
  background: var(--bg-subtle);
  color: var(--primary);
}

/* Đầu mục đang đọc — do scroll-spy trong index.js gắn. */
.td-toc__link.is-current {
  background: var(--primary);
  color: #fff;
}

.td-toc__item--sub .td-toc__link.is-current {
  color: #fff;
}

/* Nhảy tới đầu mục mà không bị header dính che mất dòng tiêu đề. */
.td-content .td-richtext h2[id],
.td-content .td-richtext h3[id] {
  scroll-margin-top: 6.25rem;
}

/* ======= THẺ TỪ KHOÁ Ở CHÂN BÀI =======
 *
 * Nằm trong `.td-content`, tức trong cột bài viết — không tràn sang cột gợi ý.
 * Chip cao 2.5rem đúng bằng bản cũ; `border-radius` tròn hẳn nên chữ dài ngắn
 * khác nhau vẫn ra cùng một hình dáng.
 */
.td-tags {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 0.0625rem solid var(--border);
}

.td-tags__title {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 1rem;
}

.td-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  /* Vỏ legacy đặt `ul { list-style: none }` nhưng KHÔNG dập padding trái mặc
     định của trình duyệt; bỏ qua là cả hàng chip thụt vào 40px. */
  list-style: none;
  margin: 0;
  padding: 0;
}

.td-tag {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 1rem;
  border-radius: var(--radius-full);
  /* Đúng viên thuốc #E9F1FA của menu chính — bản cũ cũng để chip thẻ nền
     xanh nhạt cùng tông. */
  background: var(--pill-bg);
  color: var(--primary);
  font-size: 0.875rem;
  line-height: 1.4;
  transition: var(--transition);
}

.td-tag:hover {
  background: var(--primary);
  color: #fff;
}

/* ======= DẢI "BÀI VIẾT LIÊN QUAN" Ở CHÂN BÀI =======
 *
 * Chiều rộng cả trang, nằm ngay sau `.td-body`. Thẻ mượn `.blog-card` của trang
 * chủ nên chỉ cần khai bề ngang trong băng cuộn — `.blog-card` sinh ra để làm
 * con của lưới, tự nó không có flex-basis nào; bỏ trống thì mấy thẻ co lại nhét
 * hết vào một khung và băng không bao giờ cuộn.
 *
 * Cùng công thức của `.flash-card` (4 thẻ / màn, trừ 3 khoảng hở 1.5rem đúng
 * bằng `gap` của `.hcarousel__track`): con số đó cũng là bước nhảy mà
 * public/legacy/index.js cộng vào mỗi lần bấm mũi tên.
 */
.td-newsrel {
  padding: 0 0 3.75rem;
}

.td-newsrel__title {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 0.125rem solid var(--accent);
}

.td-newsrel__track>.blog-card {
  flex: 0 0 calc((100% - 4.5rem) / 4);
  scroll-snap-align: start;
}

@media (max-width: 1024px) {
  .td-newsrel__track>.blog-card {
    flex-basis: calc((100% - 1.5rem) / 2);
  }
}

@media (max-width: 680px) {
  .td-newsrel__track>.blog-card {
    flex-basis: 84%;
  }
}

/* ======= CỘT PHẢI TRANG CHI TIẾT BÀI VIẾT =======
 *
 * Ba khối bên trong (`.nl-widget`) dùng chung với trang danh sách cẩm nang và
 * được định nghĩa ở index.css — ở đây chỉ còn phần cột.
 *
 * KHÔNG `position: sticky`: cột này nay chứa ba khối (Bài viết liên quan / Tin
 * mới nhất / Tin xem nhiều nhất), cao hơn khung nhìn nên ghim lại chỉ khiến
 * hai khối cuối không bao giờ cuộn tới được.
 */
.td-aside {
  min-width: 0;
  /* Khoảng hở giữa "Tin mới nhất" và "Tin xem nhiều nhất".
     Cột này mang cả `.nl-aside`, nhưng `.nl-aside` được định nghĩa trong
     zone-layouts.css — file mà trang chi tiết bài viết KHÔNG nạp (chỉ có
     index.css + tour-details.css). Nên trên trang danh sách cẩm nang hai khối
     cách nhau đẹp, còn trong bài viết chúng dính khít làm một. Lặp lại đúng
     con số 1.5rem của `.nl-aside` để hai trang cạnh nhau nhìn như một. */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ======= LỊCH TRÌNH (ACCORDION) ======= */
.td-day {
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: var(--transition);
}

.td-day:last-child {
  margin-bottom: 0;
}

.td-day.is-open {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-md);
}

.td-day__head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  padding: 1rem 1.125rem;
  text-align: left;
  background: var(--bg-surface);
}

.td-day.is-open .td-day__head {
  background: var(--bg-subtle);
}

.td-day__no {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: #fff;
  line-height: 1.1;
}

.td-day__no small {
  font-size: 0.625rem;
  text-transform: uppercase;
  opacity: 0.8;
}

.td-day__no strong {
  font-size: 1.25rem;
}

.td-day__titles {
  flex: 1;
  min-width: 0;
}

/* Nhãn chính của mỗi ngày — tên chặng, ví dụ "TỬ CẤM THÀNH – VẠN LÝ TRƯỜNG THÀNH".
   Cỡ và màu bám theo site đang chạy (đậm, màu primary) vì đây là dòng người xem
   đọc để biết ngày đó đi đâu, không phải một nhãn phụ.
   Không đặt text-transform: dữ liệu vốn đã IN HOA, ép thêm chỉ làm hỏng những mục
   viết hoa thường lẫn nhau. */
.td-day__route {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.35;
  letter-spacing: 0.01875rem;
}

.td-day__mobile-prefix {
  display: none;
}

.td-day__name {
  font-size: 0.833313rem;
  font-weight: 700;
  color: var(--primary);
  margin-top: 0.125rem;
}

.td-day__toggle {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.3s ease;
}

.td-day.is-open .td-day__toggle {
  transform: rotate(180deg);
  color: var(--accent);
}

.td-day__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}

.td-day.is-open .td-day__body {
  grid-template-rows: 1fr;
}

.td-day__inner {
  overflow: hidden;
}

/* ===== Thang chữ cho ba khối văn bản dài của trang chi tiết =====
 *
 * 0.9375rem chứ không phải 0.75rem như phần còn lại của trang. Đây là cỡ chữ
 * toptentravel.com.vn dùng cho nội dung tour (`.format-content` bên đó đặt
 * `font-size: .9375rem !important`). Ở gốc rem 16 thì ra 15px, đúng bằng nền
 * `body` của site đang chạy.
 *
 * Chỉ nâng ba khối *đọc thành đoạn* — hành trình, dịch vụ, điều khoản. Chip,
 * nhãn meta, mã tour vẫn để 0.75rem: chúng là nhãn liếc qua, phóng to lên thì
 * tranh chỗ với chính nội dung.
 *
 * Màu cũng đổi từ `--text-muted` (#656565) sang #333 — cùng màu thân bài mà
 * `.public-site` đặt. Xám nhạt hợp cho chú thích, không hợp cho đoạn văn dài.
 */
.td-day__content {
  padding: 0.25rem 1.125rem 1.25rem 5.25rem;
  font-size: 0.9375rem;
  line-height: 1.72;
  color: #333;
}

/* Ảnh biên tập viên chèn trong lịch trình: BO GÓC (khách yêu cầu 23/09/2026 —
   "cho mềm mại hơn, giống website hiện tại").

   Ảnh đến từ CKEditor nên không có class riêng nào để bám; nhắm thẳng `img`
   trong thân ngày và trong mọi khối rich-text của trang. `height: auto` để ảnh
   dán từ Word mang `height` cứng không bị méo khi bo góc. */
.td-day__content img,
.td-richtext img,
.td-block__body img {
  border-radius: 0.625rem;
  max-width: 100%;
  height: auto;
}

.td-day__content p {
  margin-bottom: 0.625rem;
}

.td-day__content strong {
  color: var(--text-main);
}

/* ======= BẢNG GIÁ ======= */
.td-price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.td-price-table th,
.td-price-table td {
  padding: 0.8125rem 1rem;
  text-align: left;
  border-bottom: 0.0625rem solid var(--border);
}

.td-price-table thead th {
  background: var(--bg-subtle);
  color: var(--primary);
  font-weight: 800;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.01875rem;
}

.td-price-table tbody tr:last-child td {
  border-bottom: none;
}

.td-price-table td strong {
  color: var(--accent);
  font-weight: 800;
}

.td-depart-note {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Dãy ngày là NÚT chọn ngày, không phải nhãn: bấm một ngày thì bảng giá ngay
   trên nó và ô "Tạm tính" bên phải đổi theo. Phải trông bấm được từ xa, nếu
   không khách vẫn đọc nó như dòng liệt kê cũ và không ai bấm. */
.td-depart-chip {
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-full);
  border: 0.0625rem solid var(--border);
  background: var(--bg-surface);
  font-weight: 700;
  color: var(--primary);
  font-size: inherit;
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.td-depart-chip:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--bg-surface));
}

.td-depart-chip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Dòng nói bảng giá này áp cho ngày nào. Là chữ do máy chủ in ra chứ không phải
   do JS dựng: kể cả khi script chưa chạy (hoặc hỏng) khách vẫn đọc được bảng
   đang nói về đợt nào — đó mới là chỗ vá thật cho hiểu nhầm "giá nào ngày nào",
   phần bấm chọn chỉ là tiện thêm. */
.td-price-for {
  margin: -0.5rem 0 1rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.td-price-for strong {
  color: var(--primary);
  font-weight: 800;
}

/* ======= DỊCH VỤ BAO GỒM / KHÔNG BAO GỒM ======= */
.td-serv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.625rem;
  /* Hai cột cao theo nội dung của chính nó. Mặc định `stretch` kéo cột ngắn
     bằng cột dài — mục "không bao gồm" thường ngắn hơn một phần ba, để lại một
     mảng nền hồng trống bằng cả khối. */
  align-items: start;
}

.td-serv__col h4 {
  font-size: 0.833313rem;
  font-weight: 800;
  margin-bottom: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.td-serv__col--inc h4 {
  color: #16a34a;
}

.td-serv__col--exc h4 {
  color: var(--accent);
}

.td-serv__list {
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
}

.td-serv__item {
  display: flex;
  gap: 0.625rem;
  /* Cùng thang với .td-day__content — xem chú thích ở đó. */
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-main);
}

.td-serv__item svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.td-serv__col--inc .td-serv__item svg {
  color: #16a34a;
}

.td-serv__col--exc .td-serv__item svg {
  color: var(--accent);
}

/* ======= NỘI DUNG THẬT CỦA HAI CỘT DỊCH VỤ + KHỐI GIÁ VÉ TRẺ EM =======
 *
 * `.td-serv__item` ở trên chỉ tồn tại trong tour-details.html: nó là markup
 * mockup, mỗi dòng một thẻ `<div>` kèm sẵn SVG. Trang thật thì
 * renderTourDetailTemplate() thay cả `.td-serv__list` bằng `.td-richtext` chứa
 * nguyên khối HTML của CMS cũ — 5578/5721 mục là `<ul><li>`, 140 mục là `<p>`.
 *
 * Mà `.td-richtext` trước nay KHÔNG có một luật CSS nào, trong khi reset chung
 * ở index.css đặt `ul { list-style: none }`. Kết quả: mọi gạch đầu dòng biến
 * mất, các ý dính liền nhau thành một khối chữ đặc — đúng chỗ khách phản ánh là
 * "khó đọc và khó tra cứu nhanh". Không sửa được bằng cách đổi HTML vì HTML là
 * dữ liệu; phải đánh dấu từng ý bằng CSS.
 *
 * Dấu đầu dòng dựng bằng `::before` (đĩa màu + glyph SVG trắng) thay vì
 * `list-style`: marker của list không chỉnh được cỡ/màu/khoảng cách, mà đây
 * chính là thứ phân biệt cột "bao gồm" với cột "không bao gồm" khi liếc nhanh.
 */
.td-serv__col,
.td-serv__child {
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.125rem 1.25rem 1.25rem;
}

.td-serv__col--inc {
  border-color: rgba(22, 163, 74, 0.3);
  background: rgba(22, 163, 74, 0.04);
}

.td-serv__col--exc {
  border-color: rgba(227, 6, 19, 0.22);
  background: rgba(227, 6, 19, 0.03);
}

/* Khối thứ ba nằm dưới hai cột và chiếm trọn bề ngang: quy định trẻ em là văn
   bản dài theo độ tuổi, nhét vào một nửa cột thì mỗi ý gãy thành bốn dòng. */
.td-serv__child {
  margin-top: 1.625rem;
  border-color: rgba(16, 74, 147, 0.22);
  background: rgba(16, 74, 147, 0.035);
}

.td-serv__child h4 {
  font-size: 0.833313rem;
  font-weight: 800;
  margin-bottom: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary);
}

/* Tiêu đề ba khối to hơn thân chữ và có đường kẻ dưới: bản trước để 0.83rem —
   nhỏ hơn cả nội dung bên dưới nó, nên ba khối đọc thành một dải liền. */
.td-serv__col h4,
.td-serv__child h4 {
  font-size: 0.9375rem;
  padding-bottom: 0.625rem;
  border-bottom: 0.0625rem solid currentColor;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.td-serv__list .td-richtext ul,
.td-serv__list .td-richtext ol {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.td-serv__list .td-richtext li,
.td-serv__list .td-richtext:not(:has(li))>p {
  position: relative;
  padding-left: 1.75rem;
  /* Cùng thang với .td-serv__item — xem chú thích ở đó. */
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-main);
  /* Dữ liệu cũ mang sẵn `style="text-align: justify"` trên 700+ dòng <li>.
     Căn đều trên cột hẹp làm giãn chữ loang lổ, đọc còn mệt hơn căn trái. */
  text-align: left !important;
}

/* Mục có nhiều đoạn (`<p>` rời, không phải danh sách) vẫn cần khoảng thở, chỉ
   không đeo dấu đầu dòng của dòng cuối cùng. */
.td-serv__list .td-richtext:not(:has(li))>p+p {
  margin-top: 0.5rem;
}

.td-serv__list .td-richtext li::before,
.td-serv__list .td-richtext:not(:has(li))>p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.6875rem;
}

.td-serv__col--inc .td-richtext li::before,
.td-serv__col--inc .td-richtext:not(:has(li))>p::before {
  background-color: #16a34a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.td-serv__col--exc .td-richtext li::before,
.td-serv__col--exc .td-richtext:not(:has(li))>p::before {
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* Khối trẻ em không dùng dấu ✓/✕: mấy ý này là điều kiện theo độ tuổi, không
   phải "có" hay "không có". Chấm tròn đặc, nhỏ hơn, đủ để tách ý. */
.td-serv__child .td-richtext li::before,
.td-serv__child .td-richtext:not(:has(li))>p::before {
  top: 0.5rem;
  left: 0.3125rem;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--primary);
}

/* Chữ in đậm mở đầu mỗi ý ("Trẻ em dưới 2 tuổi:") là mốc tra cứu — dữ liệu cũ
   không đánh dấu nó, nhưng khi có thì cho nó màu thương hiệu. */
.td-serv__list .td-richtext strong,
.td-serv__list .td-richtext b {
  color: var(--primary);
  font-weight: 700;
}

/* Tiêu đề phụ do người soạn tự đặt giữa mục ("COMBO BAO GỒM:", "QUY ĐỊNH TRẺ
   EM:") — xem normalizeServiceList(). Không dấu ✓, thụt về sát lề trái và có
   khoảng hở phía trên để nó thật sự chia mục thành từng phần. */
.td-serv__list .td-richtext li.td-serv__subhead {
  padding-left: 0;
  margin-top: 0.375rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.td-serv__list .td-richtext li.td-serv__subhead:first-child {
  margin-top: 0;
}

.td-serv__list .td-richtext li.td-serv__subhead::before {
  content: none;
}

/* ======= CHÍNH SÁCH (ACCORDION NHỎ) ======= */
.td-policy {
  border-bottom: 0.0625rem solid var(--border-light);
}

.td-policy:last-child {
  border-bottom: none;
}

.td-policy__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.9375rem 0;
  text-align: left;
  font-size: 0.833313rem;
  font-weight: 700;
  color: var(--primary);
}

.td-policy__head svg {
  transition: transform 0.3s ease;
  color: var(--text-muted);
  flex-shrink: 0;
}

.td-policy.is-open .td-policy__head svg {
  transform: rotate(180deg);
  color: var(--accent);
}

.td-policy__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.td-policy.is-open .td-policy__body {
  grid-template-rows: 1fr;
}

.td-policy__inner {
  overflow: hidden;
}

.td-policy__content {
  padding: 0 0 1rem;
  /* Cùng thang với .td-day__content — xem chú thích ở đó. */
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #333;
}

.td-policy__content ul {
  padding-left: 1.125rem;
  list-style: disc;
}

.td-policy__content li {
  margin-bottom: 0.375rem;
}

/* ======= ĐÁNH GIÁ =======
 *
 * Bố cục theo bản đang chạy thật: điểm số và dải phân bố nằm CẠNH nhau trên một
 * hàng, ô viết đánh giá chiếm trọn bề ngang bên dưới. Bản trước dựng form thành
 * cột phải cao gần gấp đôi phần nội dung — trang tour vốn đã dài, dựng đứng sáu
 * ô nhập nữa thì các nhận xét thật bị đẩy khuất dưới đáy.
 */
.td-reviews__summary {
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.18fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  padding: 0.25rem 0 1.5rem;
}

.td-reviews__score {
  text-align: center;
  border-right: 0.0625rem solid var(--border-light);
  padding-right: 1.25rem;
}

.td-reviews__score strong {
  display: block;
  font-size: 3rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}

/* Thang điểm nhỏ hơn hẳn con số: "/5" là chú thích, không phải số liệu. */
.td-reviews__score strong span {
  font-size: 0.52em;
}

.td-reviews__score-stars {
  margin-top: 0.5rem;
  font-size: 1.0625rem;
  letter-spacing: 0.0625rem;
  color: #c4c9d2;
}

.td-reviews__score-stars i {
  font-style: normal;
}

.td-reviews__score-stars i.is-on {
  color: #e4b400;
}

.td-reviews__score-count {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.td-review-bars {
  display: grid;
  gap: 0.5rem;
}

.td-review-bar {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 8.75rem;
  align-items: center;
  gap: 0.875rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.td-review-bar>span i {
  font-style: normal;
  color: #9aa2ae;
}

.td-review-bar__track {
  height: 0.5rem;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: #e9edf2;
  font-style: normal;
}

.td-review-bar b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.td-review-bar em {
  font-style: normal;
  text-align: right;
  color: var(--primary);
  white-space: nowrap;
}

.td-review-list {
  display: grid;
  gap: 0;
}

.td-review {
  display: flex;
  gap: 0.875rem;
  padding: 1rem 0 1.125rem;
  border-bottom: 0.0625rem solid var(--border-light);
}

.td-review:last-child {
  border-bottom: none;
}

.td-review__avatar {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
}

.td-review__body {
  min-width: 0;
}

.td-review__name {
  font-weight: 700;
  color: var(--primary);
  font-size: 0.9375rem;
}

.td-review__meta {
  font-size: 0.8125rem;
  color: var(--text-light);
  margin-bottom: 0.375rem;
}

.td-review__title {
  margin: 0 0 0.25rem;
  color: var(--text-main);
  font-size: 0.9375rem;
  line-height: 1.35;
}

.td-review__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.td-review-empty {
  padding: 1rem 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.td-review-form__title {
  margin: 0 0 0.75rem;
  color: var(--text-main);
  font-size: 0.9375rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.35;
}

/* Ô nội dung và hàng chân nằm trong CÙNG một khung viền, ngăn nhau bằng một
   đường kẻ — cả cụm đọc như một tờ phiếu, thay vì bốn ô rời trôi cạnh nhau. */
.td-review-form__box {
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
}

.td-review-form textarea {
  display: block;
  width: 100%;
  min-height: 7.5rem;
  padding: 1rem 1.125rem;
  border: 0;
  background: transparent;
  color: var(--text-main);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.6;
  resize: vertical;
}

.td-review-form textarea:focus {
  outline: none;
}

.td-review-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.125rem;
  border-top: 0.0625rem solid var(--border-light);
}

.td-review-form__rate {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  color: var(--text-main);
  font-size: 0.875rem;
  font-weight: 600;
}

/* `flex: 1 1 11rem` chứ không phải bề rộng cứng: hai ô tự chia phần trống còn
   lại sau sao và nút, và tự xuống dòng khi khung hẹp thay vì tràn. */
.td-review-form__foot input {
  flex: 1 1 11rem;
  min-width: 0;
  height: 2.625rem;
  padding: 0 1.125rem;
  border: 0.0625rem solid transparent;
  border-radius: var(--radius-full);
  background: #f1f3f7;
  color: var(--text-main);
  font: inherit;
  font-size: 0.875rem;
}

.td-review-form__foot input:focus {
  outline: none;
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 0.1875rem rgba(0, 84, 159, 0.12);
}

.td-review-form__stars {
  display: inline-flex;
  width: fit-content;
  gap: 0.125rem;
}

/* 1.25rem chứ không to hơn: hàng chân chỉ có bấy nhiêu bề ngang, sao càng to
   thì hai ô tên/email càng hẹp và placeholder bị cắt ngang chữ. */
.td-review-form__stars label {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  color: #d2d7df;
  font-size: 1.25rem;
  line-height: 1;
}

.td-review-form__stars label.is-active {
  color: #e4b400;
}

.td-review-form__stars input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.td-review-form__submit {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 6rem;
  height: 2.625rem;
  padding: 0 1.5rem;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.9375rem;
  transition: var(--transition);
}

.td-review-form__submit:hover:not(:disabled) {
  background: var(--primary-light);
}

.td-review-form__submit:disabled {
  opacity: 0.7;
  cursor: wait;
}

.td-review-form__status {
  margin: 0;
  min-height: 1.25rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.td-review-form__status.is-success {
  color: #13753a;
}

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

/* ======= BOOKING BOX (SIDEBAR STICKY) ======= */
.td-book {
  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-lg);
  overflow: hidden;
}

/* Nháy một cái khi khách bấm "Chi tiết" ở thanh giá đáy màn: nút đó cuộn ngược
   lên gần đầu trang, cuộn xa như vậy mà không có gì đổi thì khách không biết
   thứ vừa hiện ra là thứ mình vừa bấm. Dùng box-shadow chứ không đổi `border`:
   viền dày thêm là cả cột nhích sang một bên đúng lúc đang cuộn.
   Máy đặt "giảm hiệu ứng chuyển động" thì bỏ luôn — xem luật dưới. */
.td-book.is-flash {
  animation: td-book-flash 1.5s ease-out 1;
}

@keyframes td-book-flash {

  0%,
  100% {
    box-shadow: var(--shadow-lg);
  }

  15%,
  55% {
    box-shadow: var(--shadow-lg), 0 0 0 0.1875rem rgba(162, 17, 17, 0.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .td-book.is-flash {
    animation: none;
  }
}

/* Khung đặt tour được nén lại vì trước đó nó cao hơn cả màn hình, tức phần quan
   trọng nhất — nút đặt và tạm tính — nằm dưới mép dưới và người xem không thấy.
   Khung này `position: sticky`, một khung cao hơn viewport thì thôi dính.
   Nhớ thêm: từ 1600px trở lên gốc rem chạy theo 1vw, nên trên màn rộng mọi số đo
   ở đây tự phóng to — chỗ này phải tiết kiệm hơn mức tưởng.
   Cách nén: gộp dòng, giảm đệm và bớt cỡ chữ phụ; không bỏ thông tin nào. */
.td-book__head {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  /* "Giá từ" + giá + nhãn tiết kiệm nằm trên MỘT dòng thay vì ba, nhờ đó phần
     đầu khung thấp đi khoảng một nửa. */
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
}

.td-book__from {
  font-size: 0.75rem;
  opacity: 0.85;
}

.td-book__price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.td-book__price strong {
  font-size: 1.125rem;
  font-weight: 800;
  color: #fff;
}

.td-book__price del {
  font-size: 0.8125rem;
  opacity: 0.7;
}

.td-book__save {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
}

.td-book__body {
  padding: 0.875rem 1rem 1rem;
}

.td-book__label {
  font-size: 0.7875rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 0;
  display: block;
}

.td-book__select {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.875rem;
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
}

.td-book__field {
  margin-bottom: 0.75rem;
}

.td-book__field .td-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0;
  border-bottom: 0.0625rem solid var(--border-light);
}

.td-book__field .td-stepper:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Tên loại khách và khoảng tuổi nằm CÙNG một dòng: "Người lớn (Từ 12 tuổi)".
   Bản trước `small` là `display: block` nên mỗi loại khách chiếm hai dòng, ba
   loại thành sáu dòng — riêng chỗ này đã cao gần bằng phần còn lại của khung. */
.td-stepper__info {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3125rem;
  min-width: 0;
}

.td-stepper__info small {
  font-size: 0.7875rem;
  color: var(--text-light);
}

/* Ngoac quanh khoang tuoi de hai phan tach nhau khi da nam cung mot dong.
   Lam bang CSS thay vi sua ba khoi markup, va patcher co doi chu ben trong thi
   ngoac van con. */
.td-stepper__info small::before {
  content: "(";
}

.td-stepper__info small::after {
  content: ")";
}

.td-stepper__info span {
  font-size: 0.9125rem;
  font-weight: 700;
  color: var(--text-main);
}

.td-stepper__ctrl {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.td-stepper__btn {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  border: 0.09375rem solid var(--border);
  color: var(--primary);
  font-size: 1.125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.td-stepper__btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.td-stepper__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.td-stepper__count {
  min-width: 1.375rem;
  text-align: center;
  font-weight: 800;
  font-size: 0.9375rem;
  color: var(--primary);
}

.td-book__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.75rem 0 0.75rem;
  padding-top: 0.625rem;
  border-top: 0.125rem dashed var(--border);
}

.td-book__total span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.td-book__total strong {
  font-size: 1.333312rem;
  font-weight: 800;
  color: var(--accent);
}

.td-book__cta {
  display: block;
  width: 100%;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 0.75rem;
  box-shadow: 0 0.625rem 1.5rem rgba(227, 6, 19, 0.28);
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5625rem;
}

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

/* Dòng kết quả của form "Đăng ký tư vấn đặt tour" (zone-request.js ghi vào).
 *
 * Nằm ngay dưới nút Gửi và luôn chiếm sẵn một dòng (`min-height`): chèn chữ
 * vào một khối cao 0 thì cả khối nút nhảy xuống đúng lúc khách đang nhìn nó.
 * Cùng bộ class `is-ok` / `is-error` với form ở trang chuyên mục — script
 * gắn class chung, đặt tên khác là mất màu. */
.td-bookform__status {
  margin: 0.625rem 0 0;
  min-height: 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

.td-bookform__status.is-ok {
  color: #15803d;
}

.td-bookform__status.is-error {
  color: var(--accent);
}

.td-book__call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 2.5rem;
  margin-top: 0.5rem;
  border-radius: var(--radius-md);
  border: 0.09375rem solid var(--primary);
  color: var(--primary);
  font-weight: 700;
  font-size: 0.75rem;
  transition: var(--transition);
}

.td-book__call:hover {
  background: var(--primary);
  color: #fff;
}

/* Nút "Tư vấn ngay" có HAI bản trong DOM (xem chỗ dựng bên templates.ts); ở đây
   quyết bản nào hiện.
   - Desktop -> Zalo web: `tel:` trên máy tính chỉ bung hộp thoại "chọn ứng
     dụng" rồi thôi, coi như nút chết.
   - Từ 720px xuống -> `tel:`: đúng ngưỡng trang này đổi sang bộ chrome di động
     (thanh đặt tour cố định .td-bookbar hiện ra ở đây). Lệch ngưỡng thì có một
     dải bề ngang mà máy đã là điện thoại nhưng nút vẫn mở Zalo web.
   `display: flex` chứ không `block` khi hiện lại: `.td-book__call` là flex
   container căn giữa icon với chữ. */
.td-book__call--tel {
  display: none;
}

@media (max-width: 720px) {
  .td-book__call--chat {
    display: none;
  }

  .td-book__call--tel {
    display: flex;
  }
}

.td-book__trust {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 0.0625rem solid var(--border-light);
}

.td-book__trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.71875rem;
  color: var(--text-muted);
}

.td-book__trust-item svg {
  color: #16a34a;
  flex-shrink: 0;
}

/* ======= TOUR LIÊN QUAN =======
 *
 * Hai hình thái: từ 4 tour trở xuống là lưới tĩnh (.td-related__grid), nhiều
 * hơn thì templates.ts đổi sang dải cuộn ngang (.td-related__track) — xem
 * carouselizeRelated().
 *
 * Bề rộng thẻ tính bằng calc chứ không đặt cứng: mỗi màn phải hiện ĐÚNG số thẻ
 * mong muốn, nên phải trừ đi phần khoảng hở giữa chúng — 4 thẻ có 3 khoảng hở
 * 1.5rem (đúng `gap` của .hcarousel__track), vị chi 4.5rem.
 *
 * 1.5rem cũng chính là con số index.js cộng vào bề rộng thẻ để tính bước nhảy
 * mỗi lần bấm mũi tên; đổi gap ở đây mà quên bên kia thì bấm sẽ lệch dần.
 */
.td-related {
  padding: 0.625rem 0 2.5rem;
}

.td-related__carousel {
  /* Không chừa lề hai bên: dải thẻ phải thẳng hàng với mọi mục khác trong
     .container, và với lưới tĩnh .td-related__grid khi tour ít hơn 5 — lề
     1.5rem cũ làm hai hình thái của cùng một khối lệch nhau. Mũi tên thò ra
     1.125rem vẫn nằm gọn trong padding 1.25rem của .container nên không bị
     cắt. */
  margin: 0 auto;
}

.td-related__track>.tour-card {
  flex: 0 0 calc((100% - 4.5rem) / 4);
  scroll-snap-align: start;
}

@media (max-width: 1080px) {
  .td-related__track>.tour-card {
    flex-basis: calc((100% - 1.5rem) / 2);
  }
}

/* Mũi tên đã bị ẩn từ 768px (index.css), nên từ đây băng chỉ còn vuốt tay —
   mỗi lần một thẻ, đúng một màn, không có thẻ nào hé ra ở mép. */
@media (max-width: 768px) {

  .td-related__track>.tour-card {
    flex-basis: 100%;
  }
}

.td-related__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.375rem;
}

/* ======= THANH ĐẶT TOUR CỐ ĐỊNH (MOBILE) ======= */
.td-bookbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 1rem max(1rem, calc(0.625rem + 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.12);
}

.td-bookbar__price small {
  display: block;
  font-size: 0.71875rem;
  color: var(--text-muted);
}

.td-bookbar__price strong {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--accent);
}

.td-bookbar__cta {
  flex: 1;
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: none;
}

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

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

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

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

  /* Sidebar đặt tour trở thành khối thường; dùng thanh cố định dưới để đặt.
   *
   * `order: -1` — ĐƯA LÊN TRƯỚC cột nội dung (yêu cầu 28/08/2026: "đưa box đặt
   * tour lên thay cho bảng giá và ngày khởi hành"). Lưới một cột thì `.td-book`
   * là con thứ hai của `.td-layout`, tức nằm sau TOÀN BỘ lịch trình, dịch vụ và
   * chính sách — khách phải vuốt qua vài màn mới thấy giá và ô chọn ngày, đúng
   * hai thứ mục "Bảng giá & ngày khởi hành" từng lo mà nay đã bỏ. */
  .td-book {
    position: static;
    order: -1;
  }

  /* Vẫn bám `--header-current` như ở khổ rộng, KHÔNG chốt cứng
     `--header-height`: header co từ 80px xuống 70px ngay khi bắt đầu cuộn, nên
     số cứng để hở một khe 10px + 4px cho tiêu đề tour chạy qua giữa header và
     thanh tab — nhìn đúng như một dòng chữ bị cắt ngang. */
  .td-tabs {
    top: var(--header-current, var(--header-height));
    gap: 2rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 720px) {
  :root {
    --td-mobile-accent: var(--accent);
    --td-mobile-accent-hover: var(--accent-hover);
    --td-mobile-accent-soft: #FBEAEA;
    --td-mobile-line: rgba(162, 17, 17, 0.18);
  }

  .td-head__title {
    font-size: 1.5rem;
  }

  /* Điện thoại: ảnh chính full khổ, ảnh nhỏ thành MỘT hàng bên dưới — vẫn
     3:2 cả hai. Bản trước ghim cao 260px/130px nên ra 1.35:1 và xén hai bên. */
  .td-gallery__grid,
  .td-gallery__grid[data-thumbs] {
    grid-template-columns: minmax(0, 1fr);
    --td-gallery-gap: 0.5rem;
  }

  .td-gallery__side,
  .td-gallery__grid[data-thumbs] .td-gallery__side {
    grid-template-rows: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .td-gallery__thumb {
    aspect-ratio: 3 / 2;
  }

  .td-facts {
    gap: 0.625rem;
    margin-bottom: 1.25rem;
  }

  .td-fact {
    grid-template-columns: 1.5rem minmax(0, 1fr);
    column-gap: 0.4375rem;
    padding: 0.8125rem 0.875rem;
    border-radius: 0.875rem;
  }

  .td-fact__ic {
    width: 1.5rem;
    height: 1.5rem;
  }

  .td-fact__ic svg {
    width: 1.125rem;
    height: 1.125rem;
  }

  .td-fact__label {
    font-size: 0.9375rem;
    line-height: 1.5rem;
  }

  .td-fact__value {
    font-size: 0.875rem;
    line-height: 1.45;
  }

  .td-highlights {
    grid-template-columns: 1fr;
  }

  .td-tabs {
    top: calc(var(--header-current, var(--header-height)) - 0.0625rem);
    width: 100vw;
    height: 3.75rem;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 1.25rem;
    gap: 1.25rem;
    border-radius: 0;
    /* Chừa thêm bề ngang của cột nút nổi ở mép phải: thanh tab cuộn ngang,
       nên khoảng đệm này là chỗ để tab cuối ("Lưu ý") vuốt ra khỏi gầm mấy
       nút tròn. Không có nó thì tab cuối nằm vĩnh viễn dưới nút Zalo. */
    padding: 0 calc(1rem + var(--float-rail-size, 2.75rem)) 0 1rem;
    box-shadow: 0 0.375rem 1.25rem rgba(18, 34, 65, 0.06);
    /* DƯỚI cụm nút nổi, không phải trên.

       Thang của cột nút nổi (khai ở index.css): ô chat Subiz 880 < nút lên đầu
       trang 890 < cột gọi/Zalo 900 < header dính 1000. Thanh tab từng để 950,
       tức chen vào giữa cột nút và header: màn hình điện thoại thấp (Safari còn
       ~660px thấy được) thì cụm nút nổi trôi lên ngang tầm thanh tab, và nền
       trắng của thanh cắt ngang nút Zalo — khách chụp lại đúng cảnh đó
       21/09/2026. 870 vẫn trên mọi nội dung thường (không khai z-index) nhưng
       nằm dưới cả ba nút, nên nút luôn bấm được. */
    z-index: 870;
    border-top: 0.0625rem solid rgba(16, 74, 147, 0.06);
    border-bottom: 0.0625rem solid var(--td-mobile-line);
  }

  .td-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #555;
  }

  .td-tab:hover,
  .td-tab.is-active {
    color: var(--td-mobile-accent);
  }

  .td-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.1875rem;
    border-radius: var(--radius-full) var(--radius-full) 0 0;
    background: var(--td-mobile-accent);
  }

  .td-section {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    padding: 1.375rem 1.125rem;
    border-radius: 1.375rem;
    box-shadow: 0 1rem 2.75rem rgba(16, 74, 147, 0.08);
  }

  .td-section__title {
    font-size: 1.25rem;
    line-height: 1.28;
    color: var(--td-mobile-accent);
    border-bottom-color: var(--td-mobile-line);
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
    padding-bottom: 0.875rem;
  }

  .td-section__title::before {
    width: 0.9375rem;
    height: 0.125rem;
    align-self: center;
    box-shadow:
      0 -0.3125rem 0 currentColor,
      0 0.3125rem 0 currentColor;
  }

  .td-section__head,
  .td-section__head--fold {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    padding-bottom: 0.875rem;
    margin-bottom: 1rem;
    border-bottom: 0.0625rem solid var(--td-mobile-line);
  }

  /* Mục đang đóng thì đường kẻ dưới tiêu đề là nét cuối cùng của khối — thêm
     khoảng thở phía dưới cho nó khỏi dính đáy thẻ. */
  .td-section--fold:not(.is-open) .td-section__head--fold {
    margin-bottom: 0;
  }

  .td-section--fold.is-open .td-section__body {
    padding-top: 0;
  }

  .td-section__fold {
    min-height: 2.5rem;
    padding: 0 0.75rem;
    font-size: 0.8125rem;
  }

  .td-section__head .td-section__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-bottom: 0;
  }

  .td-itinerary-toggle,
  .td-mobile-more {
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0 0.875rem;
    border: 0.09375rem solid var(--td-mobile-line);
    border-radius: var(--radius-full);
    background: #fff;
    color: var(--td-mobile-accent);
    font-weight: 800;
    font-size: 0.875rem;
    white-space: nowrap;
  }

  .td-itinerary-toggle {
    display: inline-flex;
    flex: 0 0 auto;
  }

  .td-itinerary-toggle[hidden] {
    display: none;
  }

  .td-itinerary-toggle svg,
  .td-mobile-more svg {
    transition: transform 0.25s ease;
  }

  .td-itinerary-toggle.is-expanded svg,
  #td-highlights.is-expanded .td-mobile-more svg {
    transform: rotate(180deg);
  }

  #td-highlights.td-section--mobile-clamp:not(.is-expanded) .td-highlights {
    position: relative;
    max-height: 10.5rem;
    overflow: hidden;
  }

  #td-highlights.td-section--mobile-clamp:not(.is-expanded) .td-highlights::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.25rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 82%);
    pointer-events: none;
  }

  .td-mobile-more {
    display: inline-flex;
    margin-top: 1rem;
  }

  .td-day {
    margin-bottom: 0.875rem;
    border-color: #eeeeee;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 0.25rem 1rem rgba(16, 24, 40, 0.035);
  }

  .td-day.is-open {
    border-color: var(--td-mobile-line);
    box-shadow: 0 0.75rem 1.875rem rgba(162, 17, 17, 0.08);
  }

  .td-day__head,
  .td-day.is-open .td-day__head {
    min-height: 5rem;
    padding: 1rem 1.0625rem;
    gap: 0.875rem;
    background: #fff;
  }

  .td-day__no {
    display: none;
  }

  .td-day__mobile-prefix {
    display: inline;
  }

  .td-day__route {
    font-size: 1.0625rem;
    line-height: 1.38;
    font-weight: 800;
    color: #27272a;
    letter-spacing: 0;
  }

  .td-day__name {
    margin-top: 0.25rem;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: #555;
  }

  .td-day__toggle {
    width: 1.375rem;
    height: 1.375rem;
    color: #999;
  }

  .td-day.is-open .td-day__toggle {
    color: var(--td-mobile-accent);
  }

  .td-day__content {
    padding: 0 1.0625rem 1.125rem;
    font-size: 1rem;
    line-height: 1.72;
  }

  .td-bookbar {
    min-height: 5.75rem;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 0.75rem max(0.75rem, calc(0.75rem + env(safe-area-inset-bottom, 0)));
    border-top-color: #eeeeee;
    box-shadow: 0 -0.75rem 2rem rgba(16, 24, 40, 0.12);
  }

  /* Hai dòng: [Tạm tính] [Chi tiết] ở trên, số tiền ở dưới. Số tiền ép
     `flex-basis: 100%` để luôn chiếm trọn một dòng — để nó tự xuống dòng thì
     tour giá ngắn (2.990.000đ) lại leo lên nằm cạnh nút. */
  .td-bookbar__price {
    flex: 1 1 7.5rem;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.5rem;
  }

  .td-bookbar__price small {
    display: inline;
    font-size: 0.95rem;
    font-weight: normal;
    color: #8f8f8f;
  }

  /* Thanh này in được đúng một con số. Nút đưa khách về thẻ đặt tour ở đầu
     trang, nơi có giá gốc, phần tiết kiệm, ngày đang chọn và số khách — tức là
     chỗ kiểm được con số đó gồm những gì. */
  .td-bookbar__detail {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    padding: 0.0625rem 0.5rem 0.0625rem 0.4375rem;
    border: 0.0625rem solid var(--td-mobile-line);
    border-radius: var(--radius-full);
    background: var(--td-mobile-accent-soft);
    color: var(--td-mobile-accent);
    font-size: 0.8125rem;
    font-weight: normal;
    line-height: 1.5;
  }

  .td-bookbar__detail svg {
    width: 0.8125rem;
    height: 0.8125rem;
  }

  .td-bookbar__price strong {
    display: block;
    flex: 1 0 100%;
    color: var(--td-mobile-accent);
    font-size: clamp(1.25rem, 5vw, 1.5rem);
    line-height: 1.4;
    white-space: nowrap;
  }

  .td-bookbar__cta {
    flex: 0 1 10.5rem;
    min-width: 8.25rem;
    min-height: 3.25rem;
    padding: 0 0.875rem;
    border-radius: var(--radius-full);
    background-color: var(--td-mobile-accent) !important;
    color: #fff !important;
    font-size: clamp(0.95rem, 4vw, 1.0625rem);
    white-space: nowrap;
  }

  .td-bookbar__cta svg {
    display: none;
  }

  /* Vị trí ô chat Subiz KHÔNG đặt ở đây.
   *
   * Khối này từng đẩy nó lên 6.75rem bằng !important, cùng lúc tour-details.js
   * đặt inline 6.75rem và book-tour.js đặt 5.75rem — ba nguồn cho một thuộc
   * tính. Số cứng lại không biết thanh .td-bookbar cao bao nhiêu trên từng cỡ
   * màn, nên chỉ đúng ở đúng một cỡ.
   *
   * SUBIZ_RAIL_ON_MOBILE trong app/layout.tsx neo ô chat theo --float-rail-lift
   * — khoảng nâng đo được từ chính các thanh cố định đáy màn, cập nhật theo mỗi
   * lần cuộn, dùng chung cho mọi trang. Đừng thêm `bottom` cho .widget-layout ở
   * bất kỳ file CSS nào của từng trang nữa. */

  .widget-preview-new-wrapper,
  [sbz-plugin-type="popup"] {
    display: none !important;
    pointer-events: none !important;
  }

  .td-serv {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  /* Một cột rồi thì viền + nền của từng khối là thứ duy nhất còn tách "bao gồm"
     khỏi "không bao gồm" — thu padding lại chứ không bỏ. */
  .td-serv__col,
  .td-serv__child {
    padding: 1rem 1rem 1.125rem;
  }

  .td-serv__child {
    margin-top: 1.25rem;
  }

  .td-reviews__summary {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 0 1.25rem;
  }

  /* Điểm số nằm ngang thay vì xếp dọc: gọn được một khoảng cao bằng cả khối,
     và dải phân bố bên dưới bắt đầu ngay trong tầm nhìn đầu tiên. */
  .td-reviews__score {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0 0.875rem;
    text-align: left;
    border-right: 0;
    padding: 0 0 1rem;
    border-bottom: 0.0625rem solid var(--border-light);
  }

  .td-reviews__score strong {
    grid-row: span 2;
    font-size: 2.75rem;
  }

  .td-reviews__score-stars {
    margin-top: 0;
    align-self: end;
  }

  .td-reviews__score-count {
    align-self: start;
  }

  /* Nhãn phải rút còn "0% | 0" — chữ "đánh giá" lặp lại năm lần chiếm gần nửa
     bề ngang màn hẹp, đẩy vạch phân bố xuống còn một mẩu vô nghĩa. */
  .td-review-bar {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: 0.625rem;
    font-size: 0.75rem;
  }

  .td-review-bar em span {
    display: none;
  }

  .td-review {
    gap: 0.75rem;
  }

  .td-review__text {
    font-size: 0.875rem;
  }

  /* Nút gửi chiếm trọn dòng cuối: ở hàng cuộn ngang nó bị bóp còn một mẩu
     cạnh ô email, mà đây là nút kết thúc cả biểu mẫu. */
  .td-review-form__submit {
    flex: 1 0 100%;
  }

  /* Ở đây sao đứng riêng một dòng nên to lại được — và phải to: chọn số sao là
     thao tác chạm, 1.25rem là mục tiêu chạm quá nhỏ trên màn cảm ứng. */
  .td-review-form__stars label {
    font-size: 1.75rem;
  }

  .td-review-form__foot input {
    flex-basis: 100%;
  }

  .td-day__content {
    padding-left: 1.125rem;
  }

  .td-related__grid {
    grid-template-columns: 1fr;
  }

  /* Hiện thanh đặt tour cố định + chừa chỗ cuối trang */
  .td-bookbar {
    display: flex;
  }

  body {
    padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0));
  }

  /* Không còn ghi đè chỗ đứng của cặp nút nổi ở đây.
     Luật cũ làm hai việc, cả hai đều sai:
       - `.back-to-top { bottom: 6rem }` chốt cứng một con số cho MỘT nút, nên
         nó không theo thanh .td-bookbar khi thanh này cao thấp khác nhau
         (đo thật: hở đúng 4px, tức chạm vào nhau).
       - `.social-rail { display: none }` ẩn hẳn NÚT GỌI trên trang chi tiết —
         đúng trang mà khách muốn gọi hỏi nhất.
     Giờ index.js nâng cả cặp lên khỏi .td-bookbar bằng --float-rail-lift, và
     media query chung ở index.css xếp nút gọi lên trên nút về đầu trang. */

  .td-gallery {
    padding: .5rem 0 0 !important;
  }
}

@media (max-width: 480px) {
  .td-section {
    padding: 1.25rem 1rem;
  }

  .td-tabs {
    gap: 1rem;
    /* Vẫn chừa bề ngang cột nút nổi ở mép phải — xem ghi chú ở @media 720px.
       Luật này đứng SAU nên chỉ khai lại `padding` là mất phần chừa đó. */
    padding: 0 calc(0.875rem + var(--float-rail-size, 2.75rem)) 0 0.875rem;
  }

  .td-tab {
    font-size: 0.9375rem;
  }

  .td-section__title,
  .td-section__head .td-section__title {
    font-size: 1.1875rem;
  }

  .td-itinerary-toggle,
  .td-mobile-more {
    min-height: 2.375rem;
    padding: 0 0.75rem;
    font-size: 0.8125rem;
  }

  .td-day__route {
    font-size: 1rem;
  }

  .td-day__name {
    font-size: 0.875rem;
  }

  .td-section__title {
    align-items: center;
    font-size: 1.1875rem;
  }

  .td-section__head .td-section__title {
    align-items: center;
    font-size: 1.125rem;
    gap: 0.625rem;
  }

  .td-section__head .td-section__title::before {
    width: 0.9375rem;
    box-shadow:
      0 -0.3125rem 0 currentColor,
      0 0.3125rem 0 currentColor;
  }

  .td-itinerary-toggle {
    min-height: 2.5rem;
    padding: 0 0.75rem;
    font-size: 0.875rem;
  }

  #td-itinerary {
    padding: 1.25rem 1rem !important;
    border: none !important;
    border-radius: 1.375rem !important;
    background: #fff !important;
    box-shadow: 0 1rem 2.75rem rgba(16, 74, 147, 0.08) !important;
  }

  .td-related {
    padding: 0 0 4.375rem !important
  }

  .td-head__share {
    display: none;
  }

  /* ...nhưng ở bài viết thì giữ: chia sẻ một bài đọc trên điện thoại mới là
     lúc người ta hay bấm nhất. Ở trang tour cụm này bị ẩn vì dòng meta đã
     chật (sao, số ngày, điểm khởi hành). */
  .td-head__meta--news .td-head__share {
    display: inline-flex;
  }
}

@media (max-width: 420px) {

  /* Hai cột ở bề ngang này còn chưa tới 150px mỗi thẻ: "Thành phố Hồ Chí Minh"
     vỡ thành bốn dòng. Xuống một cột thì thẻ dài ra nhưng chữ đọc được. */
  .td-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

  .td-book__select,
  .td-book__field input,
  .td-book__field select,
  .td-review-form input,
  .td-review-form textarea {
    font-size: 1rem;
  }
}

/* ---------------------------------------------------------------------------
   Địa điểm tham quan & thông tin vận chuyển.

   Hai khối site đang chạy có mà template mockup không có. Dữ liệu nằm ở
   `tour_content_sections` (section CONTENT chỉ có ảnh) và `source_snapshot`
   (`DepartureFlightCode`, `ReturnLocation`...). Chỉ dùng design token sẵn có
   trong index.css, không đặt màu mới.
--------------------------------------------------------------------------- */

/* Dải địa điểm tham quan: hai nút cố định hai đầu, ảnh cuộn ngang ở giữa.
   Thay lưới `auto-fill` cũ — tour 4 điểm cho hàng đầu 3 ô rồi hàng hai một ô lẻ
   kèm khoảng trống bằng hai ô, đọc như thiếu nội dung. */
.td-spots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.td-spots__track {
  /* `min-width: 0` là bắt buộc: flex item mặc định nở theo nội dung nên
     overflow-x sẽ không bao giờ kích hoạt và dải đẩy hai nút ra ngoài khung. */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding-bottom: 0.25rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.td-spots__track::-webkit-scrollbar {
  display: none;
}

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

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

/* Tới đầu/cuối dải thì làm mờ chứ không ẩn, để ảnh không trượt ngang giữa lúc
   bấm. Chỉ dải không cuộn được mới ẩn cả hai (script đặt [hidden]). */
.td-spots__nav:disabled {
  color: #C8D3DC;
  cursor: default;
}

.td-spots__nav[hidden] {
  display: none;
}

.td-spot {
  /* Ba ô rưỡi trong khung: ô thứ tư hé ra là dấu hiệu còn ảnh để cuộn. */
  flex: 0 0 30%;
  scroll-snap-align: start;
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-surface);
  border: 0.0625rem solid var(--border-light);
}

.td-spot img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.td-spot figcaption {
  padding: 0.625rem 0.75rem;
  font-weight: 600;
  font-size: 0.94rem;
  line-height: 1.35;
}

.td-legs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr));
  gap: 1rem;
}

/* ===== Một chiều bay, bố cục trục giờ (theo toptentravel.com.vn) =====
 * Năm hàng xếp dọc: nhãn+ngày → hai mốc giờ → trục có máy bay → tên sân bay →
 * số hiệu + logo hãng. Ba hàng giữa dùng **chung một lưới 3 cột** để hai đầu
 * trục, hai con số giờ và hai tên sân bay thẳng hàng nhau tuyệt đối. Căn bằng
 * flex + space-between thì chúng lệch ngay khi độ dài tên sân bay chênh nhau.
 */
.td-leg {
  padding: 1.125rem 1.25rem 1rem;
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.td-leg__head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}

.td-leg__label {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.td-leg__date {
  font-weight: 800;
  font-size: 0.9375rem;
  color: var(--text-main);
}

/* Lưới dùng chung của ba hàng giữa. */
.td-leg__clocks,
.td-leg__axis,
.td-leg__ports {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.td-leg__clock {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  color: var(--primary);
}

/* Hai đầu phải bám ĐÚNG cột 1 và cột 3, khai báo thẳng số cột chứ không để lưới
   tự xếp. Lưới tự xếp thì phần tử thứ hai rơi vào cột giữa mỗi khi hàng chỉ có
   hai con — đúng trường hợp của hàng tên sân bay (chỉ có điểm đi + điểm đến),
   nên điểm đến hiện ra giữa thẻ, ngay dưới chữ "Bay thẳng", còn đầu phải của
   trục thì trống. Hàng giờ cũng vậy khi chặng chưa biết phương tiện: không có
   nhãn ở giữa là giờ đến nhảy vào chỗ nhãn. */
.td-leg__clocks>.td-leg__clock:first-child,
.td-leg__ports>span:first-child {
  grid-column: 1;
}

.td-leg__direct {
  grid-column: 2;
}

.td-leg__clocks>.td-leg__clock:last-child,
.td-leg__ports>span:last-child {
  grid-column: 3;
  justify-self: end;
  text-align: right;
}

.td-leg__clock b {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
}

/* SA/CH nhỏ và không đậm: nó là phụ chú của con số, không phải một mẩu tin
   ngang hàng. */
.td-leg__clock i {
  font-style: normal;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

.td-leg__clock--empty {
  font-size: 1.75rem;
  color: var(--text-light);
}

.td-leg__direct {
  font-size: 0.8125rem;
  color: var(--text-muted);
  padding: 0 0.75rem;
}

.td-leg__axis {
  grid-template-columns: 1fr auto 1fr;
  margin: 0.625rem 0 0.5rem;
  gap: 0.375rem;
  color: var(--primary);
}

/* Mỗi đầu trục là chấm + vạch nằm cùng một ô lưới, vạch giãn hết chỗ còn lại.
   Trước đây năm phần tử của trục nằm thẳng trong lưới ba cột: hai cột biên phải
   chứa hai phần tử nên lưới đẩy chúng xuống hàng dưới, trục hiện ra thành bậc
   thang — chấm trái ở trên, chấm phải ở dưới, máy bay kẹt giữa hai hàng. */
.td-leg__end {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.td-leg__end>.td-leg__line {
  flex: 1;
}

.td-leg__dot {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--primary);
  box-shadow: 0 0 0 0.1875rem rgba(16, 74, 147, 0.18);
}

.td-leg__line {
  height: 0;
  border-top: 0.125rem dotted var(--border);
}

.td-leg__plane {
  grid-column: 2;
  width: 1.25rem;
  height: 1.25rem;
  /* Icon vẽ mũi hướng lên; xoay để nó bay theo chiều đọc. */
  transform: rotate(90deg);
}

.td-leg__ports {
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--text-muted);
  gap: 0 0.75rem;
}

/* `hidden` (do tour-details.js đặt khi chặng không có số hiệu lẫn logo) là
   `display: none` của trình duyệt, thua `display: flex` khai ngay dưới đây —
   không khai lại thì chặng trống vẫn hiện ra một đường kẻ ngang cụt. */
.td-leg__foot[hidden] {
  display: none;
}

.td-leg__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 0.0625rem solid var(--border-light);
}

.td-leg__codelabel {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--primary);
}

.td-leg__code {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: 0.03125rem;
}

/* Khung trắng quanh logo: bộ logo hãng của hệ cũ vẽ trên nền trắng, thả lên nền
   xám thì viền hình bệt vào nền — cùng lý do đã xử lý cho icon chủ đề. */
.td-leg__logo {
  max-height: 2.75rem;
  max-width: 8rem;
  width: auto;
  object-fit: contain;
  padding: 0.25rem 0.5rem;
  border: 0.0625rem solid var(--border-light);
  border-radius: var(--radius-sm);
  background: #fff;
}

/* ===== Khổ điện thoại: số hiệu + logo hãng LÊN CÙNG DÒNG với ngày =====
 *
 * Ở một cột, năm hàng xếp dọc làm mỗi chiều bay cao gần nửa màn hình, mà hàng
 * cuối — số hiệu và logo — lại là thứ khách cần đọc cùng lúc với ngày ("hôm đó
 * bay chuyến nào"). Cho hai hàng đó dùng chung hàng lưới đầu tiên: thẻ ngắn lại
 * khoảng 4rem và cặp thông tin đi liền nhau.
 *
 * Dựng bằng lưới trên chính `.td-leg` chứ không đổi thứ tự trong HTML: ba hàng
 * giữa (giờ / trục / sân bay) phải giữ nguyên lưới 3 cột của chúng, và thứ tự
 * đọc của trình đọc màn hình vẫn là ngày → giờ → sân bay → số hiệu. */
@media (max-width: 720px) {
  .td-leg {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .td-leg__head {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }

  .td-leg__foot {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .td-leg__clocks {
    grid-row: 2;
    margin-top: 0.875rem;
  }

  .td-leg__axis {
    grid-row: 3;
  }

  .td-leg__ports {
    grid-row: 4;
  }

  .td-leg__clocks,
  .td-leg__axis,
  .td-leg__ports {
    grid-column: 1 / -1;
  }

  /* Nhãn "Ký hiệu chuyến bay" dài hơn cả số hiệu lẫn logo cộng lại; ở 390px
     nó đẩy logo tràn khỏi thẻ. Giấu bằng mắt thôi, KHÔNG gỡ khỏi HTML: trình
     đọc màn hình vẫn đọc được, và thẻ `alt` của logo vẫn mang tên hãng. */
  .td-leg__codewrap {
    display: flex;
    align-items: baseline;
  }

  .td-leg__codelabel {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .td-leg__code {
    font-size: 1.0625rem;
  }

  .td-leg__logo {
    max-height: 1.75rem;
    max-width: 4.5rem;
    padding: 0.125rem 0.25rem;
  }
}

@media (max-width: 480px) {
  .td-leg__clock b {
    font-size: 1.375rem;
  }

  .td-leg__code {
    font-size: 0.9375rem;
  }

  .td-leg__logo {
    max-width: 3.5rem;
  }
}

@media (max-width: 720px) {
  .td-spots {
    gap: 0.625rem;
  }

  .td-spots__track {
    gap: 0.75rem;
    scroll-snap-type: x mandatory;
  }

  .td-spot {
    flex: 0 0 calc((100% - 0.75rem) / 2);
  }

  .td-spot figcaption {
    min-height: 3.125rem;
    padding: 0.625rem;
    font-size: 0.9375rem;
    line-height: 1.35;
  }
}

/* ======= ĐÈN LỒNG XEM ẢNH ======= */
/* Ô ảnh trong lưới gallery bấm được — đổi con trỏ để người dùng biết. */
.td-gallery__tile--zoom {
  cursor: zoom-in;
}

.td-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  background: rgba(8, 12, 20, 0.92);
  -webkit-backdrop-filter: blur(0.375rem);
  backdrop-filter: blur(0.375rem);
}

/* `hidden` chỉ được UA stylesheet đặt display:none, mà quy tắc của trang luôn
   thắng — không khai báo lại thì display:flex ở trên giữ đèn lồng mở vĩnh viễn. */
.td-lightbox[hidden] {
  display: none;
}

.td-lightbox__img {
  max-width: min(75rem, 100%);
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 1.5rem 4.375rem rgba(0, 0, 0, 0.55);
}

.td-lightbox__nav,
.td-lightbox__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 0.0625rem solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: var(--transition);
}

.td-lightbox__nav {
  width: 3.25rem;
  height: 3.25rem;
  font-size: 2.125rem;
  line-height: 1;
}

.td-lightbox__close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.75rem;
  line-height: 1;
}

.td-lightbox__nav:hover,
.td-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.28);
}

.td-lightbox__nav[hidden] {
  display: none;
}

.td-lightbox__count {
  position: absolute;
  bottom: 1.375rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .td-lightbox {
    padding: 0.75rem;
    gap: 0.25rem;
  }

  .td-lightbox__nav {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.625rem;
  }
}

/* ========= TRANG NỘI DUNG GHÉP (Giới thiệu · Tuyển dụng · FAQs) ========= */
/*
 * Ba dạng mục, chọn theo hình dạng dữ liệu chứ không theo chuyên mục:
 *   .td-block    — có thân bài: ảnh trái, chữ phải
 *   .td-tile     — chỉ tiêu đề + ảnh: ô minh hoạ trong lưới
 *   .td-newscard — bài dài có URL riêng: thẻ tóm tắt, không đổ nguyên vào trang
 */

.td-hero {
  margin: 0 0 1.625rem;
  padding: 2.125rem 0 1.875rem;
  background: linear-gradient(115deg, #001630 0%, #104a93 52%, #003670 100%);
  color: #fff;
}

/* .td-hero nằm ngoài .container của template nên tự dựng lại khuôn để tiêu đề
   thẳng hàng với nội dung bên dưới. */
.td-hero__title,
.td-hero__lead {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.td-hero__title {
  font-size: clamp(1.666688rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03125rem;
}

.td-hero__lead {
  margin-top: 0.625rem;
  max-width: 42.5rem;
  font-size: 0.833313rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}

/* Trang này không có sidebar đặt tour — .td-layout vẫn là lưới 2 cột nên phải
   hạ xuống, cùng cái bẫy đã gặp ở .tl-layout của trang danh sách. */
.td-content--wide {
  grid-column: 1 / -1;
}

.td-layout--plain {
  display: block;
}

.td-section:last-child {
  margin-bottom: 0;
}

/* ---------- Khối có thân bài ---------- */
.td-block {
  display: grid;
  grid-template-columns: 16.25rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  padding: 1.375rem 0;
  border-top: 0.0625rem solid var(--border-light);
}

.td-block:first-of-type {
  padding-top: 0.25rem;
  border-top: none;
}

/* Khối không ảnh: một cột, khỏi chừa chỗ trống bên trái. */
.td-block--plain {
  grid-template-columns: minmax(0, 1fr);
}

.td-block__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-subtle);
}

.td-block__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.625rem;
  transition: var(--transition);
}

.td-block__media:hover img {
  transform: scale(1.04);
}

/* Tên mục ("Tầm Nhìn", "Sứ mệnh") phải TO HƠN mọi tiêu đề nằm trong thân bài
   của chính nó (khách báo 21/09/2026: "nội dung đang không đồng đều").
   Bản cũ 1rem, trong khi `.td-richtext h3` — tiêu đề phụ do biên tập viên gõ
   bên trong bài — là 1.0625rem: câu khẩu hiệu giữa bài trông to hơn cái tên
   của cả mục, nên đọc lướt không biết mục bắt đầu từ đâu. 1.25rem nằm gọn giữa
   1.0625rem của h3 và 1.5rem của `.td-section__title` (tên khối). */
.td-block__title {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--primary);
  margin-bottom: 0.625rem;
}

.td-block__title a:hover {
  color: var(--accent);
}

/* ---------- Ô minh hoạ ---------- */
.td-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.125rem, 1fr));
  /* Mọi ô cao bằng nhau KỂ CẢ khác hàng. Mặc định mỗi hàng tự co theo tiêu đề
     dài nhất của riêng hàng đó, nên hàng tiêu đề ba dòng cao hơn hàng hai dòng
     ~35px — nhìn qua tưởng hai loại thẻ khác nhau. Cùng cách đã dùng cho lưới
     thẻ trang thị thực. */
  grid-auto-rows: 1fr;
  gap: 1.125rem;
  margin-top: 1.125rem;
}

.td-block+.td-tiles {
  margin-top: 1.5rem;
}

.td-tile {
  margin: 0;
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-surface);
  transition: var(--transition);
}

/* Ô được kéo cao bằng hàng cao nhất, phần dôi ra phải nằm DƯỚI tiêu đề chứ
   không chen vào giữa ảnh và chữ. Thẻ <a> bọc bên trong cũng phải giãn theo,
   không thì vùng bấm ngắn hơn cái ô. */
.td-tile,
.td-tile > a {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.td-tile > a {
  color: inherit;
}

/* Chỉ ô CÓ LINK mới nhấc lên khi rê chuột.
 *
 * Ô không link (mục chỉ có tiêu đề + ảnh, trang riêng trống — xem
 * `zoneTileHtml`) mà vẫn nhấc lên và đổ bóng thì vẫn hứa hẹn bấm được: khách
 * bấm, không có gì xảy ra, và đó lại là một kiểu hỏng khác. */
.td-tile--link:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-0.1875rem);
}

.td-tile img,
.td-tile__blank {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--bg-subtle);
}

.td-tile figcaption {
  padding: 0.75rem 0.875rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--primary);
}

/* ---------- Thẻ bài viết ---------- */
.td-newscards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 1.125rem;
  margin-top: 1.25rem;
}

.td-newscard {
  display: flex;
  flex-direction: column;
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-surface);
  color: inherit;
  transition: var(--transition);
}

.td-newscard:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-0.1875rem);
}

.td-newscard__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.td-newscard__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9375rem 1rem 1rem;
  flex-grow: 1;
}

.td-newscard__title {
  font-size: 0.833313rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--primary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.td-newscard__excerpt {
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.td-newscard__more {
  margin-top: auto;
  padding-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
}

@media (max-width: 700px) {
  .td-block {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.875rem;
  }

  .td-block__media img {
    aspect-ratio: 16 / 9;
  }
}

/* ================== TRANG LIÊN HỆ (/lien-he) ================== */
/*
 * Hai cột: địa điểm bên trái, form bên phải. Trang này chỉ có một việc — để
 * khách liên hệ được — nên form phải nằm trong màn hình đầu tiên chứ không
 * đẩy xuống cuối như các trang nội dung khác.
 */

/* Vùng nội dung của riêng trang liên hệ: nền TRẮNG. `.td-main` mặc định tô
   #F3F6FB, trùng đúng màu khung form nên khung biến mất vào nền. */
.td-main.tc-page {
  background: var(--bg-surface);
}

/* Tiêu đề trang: navy trên nền trắng, canh trái — như site đang chạy. Trang này
   cố ý KHÔNG dùng dải nền xanh `.td-hero` của các trang zone khác. */
.tc-head {
  padding: 2.25rem 0 1.5rem;
}

.tc-head__title {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.375;
  color: #1a2751;
}

.tc-head__lead {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Cột trái hẹp hơn cột form, đúng tỉ lệ bên kia (420 / 600 ở khổ 1440). */
/*
 * `align-items: stretch` (mặc định của grid, ghi rõ ra cho khỏi ai "dọn" nhầm
 * về `start`): cột trái phải CAO BẰNG cột form thì bản đồ nằm trong nó mới giãn
 * ra lấp hết chỗ trống. Để `start` là bản đồ co lại bằng `min-height` và dưới
 * cột trái lại há ra một mảng trắng — đúng thứ khách bắt sửa 23/09/2026.
 */
.tc-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: stretch;
  padding-bottom: 0.5rem;
}

/* Cột trái xếp dọc: các tab + khối địa chỉ giữ chiều cao tự nhiên, bản đồ ăn
   nốt phần còn lại (xem `.tc-map`). */
.tc-info {
  display: flex;
  flex-direction: column;
}

/* ---------- Cột địa điểm ---------- */
.tc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.375rem;
}

.tc-tab {
  padding: 0.5625rem 1.375rem;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.tc-tab:hover {
  background: #e2ebf5;
}

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

.tc-panel__title {
  margin-bottom: 1.125rem;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--primary);
}

.tc-place+.tc-place {
  margin-top: 1.375rem;
  padding-top: 1.375rem;
  border-top: 0.0625rem solid var(--border);
}

.tc-place__name {
  margin-bottom: 0.875rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--primary);
}

.tc-lines {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* Mỗi dòng: icon tròn + chữ "Nhãn: giá trị" trên cùng một hàng. Khách yêu cầu
   đưa icon trở lại 16/09/2026 — site đang chạy in chữ trơn, nhưng cả cột chỉ
   toàn chữ xám cùng một cỡ thì liếc qua không tách được địa chỉ với email. Cỡ
   chữ vẫn 13,5px như bên kia. */
.tc-line {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.84375rem;
  line-height: 1.5;
  color: #656565;
  /* Địa chỉ và email dài không được đẩy ngang cả cột. */
  overflow-wrap: anywhere;
}

/* Ô icon KHÔNG co lại khi địa chỉ xuống hai dòng (`flex: none`) và canh theo
   dòng chữ ĐẦU TIÊN, không theo giữa cả khối — địa chỉ dài hai dòng mà canh
   giữa thì icon rơi xuống lửng lơ giữa hai dòng. */
.tc-line__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--primary);
}

.tc-line__icon svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* `min-width: 0` để chữ dài xuống dòng trong phần còn lại của hàng flex thay vì
   đẩy rộng cả cột. */
.tc-line__text {
  min-width: 0;
}

.tc-line__label {
  color: #656565;
}

.tc-line__value {
  color: #656565;
}

.tc-line__value a:hover {
  color: var(--accent);
}

/* Link chữ, không phải nút viền. Dùng CHUNG `.tc-line__icon` với các dòng phía
   trên để icon xếp thẳng một cột; icon ở đây là mũi tên mở tab mới, đúng việc
   nó làm (`target="_blank"`). */
.tc-place__map {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.75rem;
  font-size: 0.84375rem;
  line-height: 1.5;
  color: var(--primary);
  font-weight: 600;
  transition: var(--transition);
}

.tc-place__map:hover {
  color: var(--accent);
}

/* ---------- Form ---------- */
/* Khung form: số đo lấy đúng theo site đang chạy (đo 16/09/2026 ở khổ 1440px) —
   padding 36px, bo 12px, nền #F3F6FB. */
.tc-form {
  padding: 2.25rem;
  border-radius: 0.75rem;
  background: #f3f6fb;
}

/* Câu dẫn: 15px, chữ thường (KHÔNG đậm), canh giữa, cách form 24px — như site
   đang chạy. Để 12px như trước thì cả khung trông nhỏ hơn hẳn bên kia. */
.tc-form__lead {
  margin-bottom: 1.5rem;
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.375;
  color: #231f20;
}

.tc-form__lead strong {
  color: var(--accent);
}

/* Hàng đầu HAI cột trên desktop: "Họ và tên" | "Số điện thoại" (khách yêu cầu
   16/09/2026). Các ô còn lại mang `.tc-field--wide` nên chiếm trọn bề ngang.
   Site đang chạy xếp một cột dọc, nhưng cột form ở đây rộng 600px — hai ô ngắn
   nằm cạnh nhau rút form đi một nấc mà không chật. Dưới 560px về một cột, xem
   media query cuối mục này. */
.tc-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem 0.75rem;
}

/* `position: relative` để neo icon nhúng trong ô (`.tc-field__icon`). */
.tc-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.tc-field--wide {
  grid-column: 1 / -1;
}

/* Icon nằm TRONG ô nhập, khách yêu cầu 16/09/2026.
 *
 * `top: 0.875rem` canh đúng giữa ô một dòng — ô cao 48px, icon 20px, (48-20)/2
 * = 14px — và đồng thời canh theo DÒNG ĐẦU của ô nội dung, nên một con số dùng
 * chung cho cả input lẫn textarea, không cần luật riêng.
 *
 * `pointer-events: none` là bắt buộc: thiếu nó thì bấm trúng icon là bấm vào
 * cái span chứ không phải vào ô, con trỏ không nhảy vào và khách tưởng ô hỏng.
 */
.tc-field__icon {
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--text-light);
  pointer-events: none;
  transition: var(--transition);
}

.tc-field__icon svg {
  width: 100%;
  height: 100%;
}

/* Icon sáng lên theo ô đang gõ — `:focus-within` vì icon là anh em của ô, không
   phải con, nên `:focus` trên chính icon không bao giờ khớp. */
.tc-field:focus-within .tc-field__icon {
  color: var(--primary);
}

/* Chữ hướng dẫn nằm TRONG ô: form không còn `<label>` phía trên (xem
   `contactFormHtml`). `opacity: 1` vì Firefox tự làm mờ placeholder, để mặc
   định thì chữ nhạt tới mức khó đọc. */
.tc-field input::placeholder,
.tc-field textarea::placeholder {
  color: var(--text-light);
  opacity: 1;
}

/* Ô nhập theo ĐÚNG ô chuẩn của site — `.bt-input` trong book-tour.css, form đặt
   tour: cao 48px, bo `--radius-md`, viền `--border`, chữ `--text-main` cỡ 12px
   đậm 500, vòng focus xanh navy. Khách yêu cầu 16/09/2026.

   Bản trước đo theo site đang chạy (cao 36px, bo tròn hẳn kiểu viên thuốc, viền
   #e1f0f5) đúng với bên kia nhưng đứng một mình giữa site này thì lạc kiểu: mọi
   form khác — đặt tour, tư vấn thị thực, đánh giá — đều là ô vuông bo nhẹ. */
.tc-field input,
.tc-field textarea {
  width: 100%;
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-main);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  transition: var(--transition);
}

/* Chừa 2.75rem bên trái cho icon: icon bắt đầu ở 14px, rộng 20px, kết thúc ở
   34px — 44px padding để lại đúng 10px hở trước chữ. */
.tc-field input {
  height: 3rem;
  padding: 0 0.875rem 0 2.75rem;
}

.tc-field textarea {
  resize: vertical;
  min-height: 7.5rem;
  padding: 0.75rem 0.875rem 0.75rem 2.75rem;
  line-height: 1.6;
}

.tc-field input:focus,
.tc-field textarea:focus {
  outline: none;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 0.1875rem rgba(0, 54, 112, 0.08);
}

.tc-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Nút "Gửi" nằm giữa, như site đang chạy. Dòng báo kết quả đi kèm nên căn
     giữa cả hàng thay vì chỉ căn riêng cái nút. */
  justify-content: center;
  gap: 1.125rem;
  margin-top: 1.5rem;
}

/* Nút theo nút chuẩn của site (`.bt-btn--primary`): cao 48px đúng bằng ô nhập,
   bo cùng bán kính. Nút 33px của bản đo theo site đang chạy đứng dưới hàng ô
   48px nhìn hụt hẳn một cỡ. */
.tc-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 3rem;
  padding: 0 2rem;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: #fff;
  font-size: 0.833313rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

/* Icon máy bay giấy trước chữ "Gửi". Khai cỡ tường minh vì `svg` bị reset toàn
   cục thành `display: block` và không có kích thước nội tại nào để bám. */
.tc-form__submit svg {
  flex: none;
  width: 1rem;
  height: 1rem;
}

.tc-form__submit:hover:not(:disabled) {
  background: var(--accent-hover);
  box-shadow: var(--shadow-md);
}

.tc-form__submit:disabled {
  opacity: 0.6;
  cursor: progress;
}


.tc-form__status {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

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

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

/* ---------- Bản đồ ---------- */
/*
 * `margin-bottom` trước đây là để chừa chỗ cho dải "Đăng ký nhận ưu đãi" ở chân
 * trang, vốn nhô lên bằng `margin-top: -3.5rem`. Dải đó đã gỡ; khoảng cách giữ
 * lại chỉ còn là giãn cách bình thường giữa bản đồ và footer.
 */
/*
 * Bản đồ NẰM TRONG cột trái (khách yêu cầu 23/09/2026), không còn là dải chạy
 * hết bề ngang dưới hai cột. `flex: 1` để nó cao bằng phần còn thừa của cột —
 * nhờ vậy hai cột kết thúc ngang nhau ở mọi độ dài địa chỉ.
 *
 * Dùng flex cho cả khung lẫn iframe thay vì `height: 100%`: chiều cao của khung
 * là do flex chia, mà phần trăm thì cần chiều cao XÁC ĐỊNH của cha mới quy ra
 * được — để `height: 100%` là iframe sập về 0 trên Safari.
 */
.tc-map {
  display: flex;
  margin-top: 1.5rem;
  flex: 1 1 auto;
  min-height: 15rem;
  overflow: hidden;
  border: 0.0625rem solid var(--border);
  border-radius: 0.75rem;
  line-height: 0;
  background: var(--bg-subtle);
}

.tc-map iframe {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 15rem;
  border: none !important;
}

@media (max-width: 900px) {
  .tc-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  /* Một cột: không còn chỗ thừa để lấp, nên bản đồ về chiều cao cố định thay vì
     giãn theo form. */
  .tc-map {
    flex: 0 0 auto;
    min-height: 0;
    height: 18rem;
  }

  .tc-map iframe {
    min-height: 0;
    height: 18rem;
  }
}

@media (max-width: 560px) {

  /* Khổ điện thoại: "Họ và tên" và "Số điện thoại" về lại HAI DÒNG như cũ —
     khách yêu cầu giữ nguyên (16/09/2026). Hai ô cạnh nhau ở đây chỉ còn ~150px
     mỗi ô, placeholder "Số điện thoại*" bị cắt mất chữ. */
  .tc-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tc-form {
    padding: 1.375rem 1.125rem 1.5rem;
  }

  .tc-form__submit {
    width: 100%;
  }
}

/* iOS Safari: ô nhập dưới 16px là trình duyệt tự phóng to cả trang khi khách
   chạm vào ô.

   Khối này BẮT BUỘC nằm sau `.tc-field input` ở trên. Đã thử khai chung vào
   khối 640px ở đầu file (chỗ `.td-book__field input`) và đo ra vẫn 12px: hai
   selector cùng độ đặc hiệu (0,1,1) nên thứ tự nguồn quyết, mà khối đó đứng
   trước luật 12px của form liên hệ. */
@media (max-width: 640px) {

  .tc-field input,
  .tc-field textarea {
    font-size: 1rem;
  }
}

/* ======= LỊCH KHỞI HÀNH ======= */
/* Hai kiểu xem (danh sách / lịch tháng) đều nằm sẵn trong HTML, đổi bằng thuộc
   tính `data-sched-view` trên khối cha. Không gọi máy chủ khi bấm: tối đa 60
   đợt, vài KB, rẻ hơn một vòng mạng và đổi kiểu là thấy ngay. */
.td-sched__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.td-sched__views {
  display: flex;
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.td-sched__view {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.25rem;
  background: var(--bg-surface);
  color: var(--text-muted);
  transition: var(--transition);
}

.td-sched__view svg {
  width: 1.125rem;
  height: 1.125rem;
}

.td-sched__view.is-active {
  background: var(--primary);
  color: #fff;
}

.td-sched__months {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.125rem;
}

.td-sched__month {
  padding: 0.5rem 1rem;
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: var(--transition);
}

.td-sched__month.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Tháng không được chọn bị ẩn hẳn; tháng đang chọn hiện đúng một kiểu xem. */
.td-sched__panel {
  display: none;
}

.td-sched__panel.is-active {
  display: block;
}

#td-schedule[data-sched-view="list"] .td-sched__grid,
#td-schedule[data-sched-view="grid"] .td-sched__list {
  display: none;
}

/* ----- Kiểu danh sách ----- */
.td-sched__list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* Dòng lịch khởi hành — mẫu khách duyệt 23/09/2026.

   Hai tầng: hàng trên là [ngày] [Ngày đi · Ngày về] [mũi tên], hàng dưới là
   giá; đợt ĐANG CHỌN xổ thêm bảng giá theo độ tuổi. Lưới bốn cột cũ
   (`auto 1fr auto auto`) bày ngày, mô tả, số chỗ, giá trên MỘT hàng — nhồi đủ
   "Ngày đi: Thứ Sáu, 06/11/2026" và "Ngày về: …" vào đó thì hai ngày bị ép
   xuống cỡ chữ không đọc nổi ở 1024px. */
.td-sched__row {
  display: block;
  padding: 0.75rem 1rem;
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  transition: var(--transition);
}

.td-sched__row:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

/* Đợt ĐANG CHỌN — cùng đợt mà thẻ đặt tour bên phải đang nói tới.
 *
 * Bấm một dòng ở đây là chọn đợt (xem `data-depart-pick`), nhưng giá và ngày
 * đổi ở tận cột bên phải; không đánh dấu lại thì khách bấm xong không thấy gì
 * xảy ra ngay dưới ngón tay và tưởng dòng đó bấm không được.
 *
 * Viền đậm + nền nhạt chứ không đảo màu như `:hover`: dòng này phải đọc được
 * kể cả khi con trỏ đã rời đi, và vẫn phải khác hẳn trạng thái di chuột. */
.td-sched__row.is-active {
  border-color: var(--primary);
  background: var(--bg-subtle);
  /* Viền đậm thêm bằng box-shadow inset, KHÔNG phải `border-width`: tăng bề dày
     viền là dòng cao thêm 2px (đo được 106px so với 104px), nên mỗi lần khách
     bấm sang đợt khác thì cả danh sách bên dưới nhích lên xuống. box-shadow vẽ
     đè, không chiếm chỗ trong hộp. */
  box-shadow: inset 0 0 0 0.0625rem var(--primary), var(--shadow-sm);
}

.td-sched__row.is-active .td-sched__date {
  background: var(--primary);
  color: #fff;
}

.td-sched__date {
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  font-weight: 800;
  font-size: 0.9375rem;
  color: var(--primary);
  white-space: nowrap;
}

.td-sched__info,
.td-sched__back {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.td-sched__seats {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #b45309;
  white-space: nowrap;
}

/* Chưa nhập số chỗ thì nói "còn nhận khách" — không bịa ra một con số, cũng
   không im lặng để khách tưởng hết chỗ. */
.td-sched__seats--unknown {
  color: var(--text-muted);
  font-weight: 600;
}

.td-sched__main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.td-sched__legs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  flex: 1 1 auto;
  min-width: 0;
}

/* Ngày đi / ngày về: nhãn xám, GIÁ TRỊ đậm màu chữ chính — khách yêu cầu làm
   nổi hai mốc này (23/09/2026). Trước đó cả cụm là một dòng xám nhạt nối bằng
   dấu chấm giữa, đọc lướt không tách được đi với về. */
.td-sched__leg {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.td-sched__leg svg {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  color: var(--primary);
}

.td-sched__leg b {
  font-weight: 700;
  color: var(--text-main);
}

.td-sched__leg--back b {
  color: var(--primary);
}

/* Mũi tên xoay khi đợt đang mở. Chỉ là dấu hiệu trạng thái — cả dòng mới là
   chỗ bấm. */
.td-sched__chev {
  flex: none;
  display: inline-flex;
  color: var(--text-light);
  transition: transform 0.2s ease;
}

.td-sched__row.is-active .td-sched__chev {
  transform: rotate(180deg);
  color: var(--primary);
}

/* Bảng giá theo độ tuổi: in sẵn cho mọi đợt, CHỈ HIỆN ở đợt đang chọn.
   `syncPrices()` (tour-details.js) vốn đã gạt `is-active` theo ô chọn ngày nên
   không cần thêm JS nào; tắt JS thì đợt server chọn sẵn vẫn xổ đúng. */
.td-sched__detail {
  display: none;
  margin-top: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius-md);
  border: 0.0625rem solid var(--border);
  background: #fff;
}

.td-sched__row.is-active .td-sched__detail {
  display: block;
}

.td-sched__detail-title {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--primary);
}

.td-sched__age {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.3125rem 0;
  font-size: 0.8125rem;
}

.td-sched__age + .td-sched__age {
  border-top: 0.0625rem dashed var(--border);
}

.td-sched__age-name {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  color: var(--text-main);
}

.td-sched__age-name svg {
  flex: none;
  color: var(--primary);
}

.td-sched__age-name b {
  font-weight: 700;
}

.td-sched__age-name i {
  font-style: normal;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.td-sched__age-price {
  flex: none;
  font-weight: 800;
  color: var(--accent);
}

/* Dòng tổng đài: nền hồng nhạt, đứng cuối bảng giá — đợt nào giá còn phải hỏi
   thêm thì khách có ngay số gọi, không phải cuộn lên đầu trang. */
.td-sched__hotline {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  margin-top: 0.625rem;
  padding: 0.4375rem 0.625rem;
  border-radius: var(--radius-sm);
  background: #fdeff0;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.td-sched__hotline svg {
  flex: none;
  color: var(--accent);
}

.td-sched__hotline b {
  color: var(--accent);
  font-weight: 800;
}

.td-sched__price {
  display: block;
  margin-top: 0.375rem;
  /* Thụt bằng đúng bề ngang viên ngày + khoảng hở, để giá nằm thẳng cột với
     "Ngày đi" phía trên thay vì dính sát mép trái. */
  font-size: 1.0625rem;
  font-weight: 900;
  color: var(--accent);
  white-space: nowrap;
}

/* Giá gốc bị gạch của đợt có khuyến mãi riêng (ô "Khuyến mãi" ở tab Lịch khởi
   hành). Nhỏ và xám để giá sau giảm vẫn là con số đọc trước. */
.td-sched__price del {
  margin-right: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ----- Kiểu lịch tháng ----- */
.td-sched__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.375rem;
}

.td-sched__dow {
  padding: 0.375rem 0;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--primary);
}

.td-sched__cell {
  display: grid;
  place-content: center;
  gap: 0.125rem;
  min-height: 4.25rem;
  padding: 0.375rem 0.25rem;
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-light);
}

.td-sched__cell--has {
  border: 0.0625rem solid var(--primary-light);
  background: var(--bg-subtle);
  color: var(--text-main);
  transition: var(--transition);
}

.td-sched__cell--has:hover {
  background: var(--primary);
  color: #fff;
}

/* Ô ngày đang chọn ở kiểu xem lịch tháng — cùng vai trò với `.td-sched__row.is-active`. */
.td-sched__cell--has.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.td-sched__cell--has.is-active .td-sched__cellprice,
.td-sched__cell--has.is-active .td-sched__cellback {
  color: #fff;
}

.td-sched__cell--has b {
  font-size: 1rem;
  font-weight: 800;
}

.td-sched__cellprice {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--accent);
}

/* Giá đầy đủ trên màn rộng, giá theo nghìn (28.900K) trên di động. Cả hai luôn
   có trong HTML — xem chú thích ở moneyShort() trong lib/public/templates.ts. */
.td-sched__cellprice--short {
  display: none;
}

.td-sched__cell--has:hover .td-sched__cellprice,
.td-sched__cell--has:hover .td-sched__cellback {
  color: #fff;
}

.td-sched__cellback {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

@media (max-width: 560px) {

  /* Bốn cột dồn thành hai hàng: ngày + giá là thứ khách quét mắt tìm, cho
     chúng đứng riêng một hàng thay vì bị bóp lại còn vài ký tự. */
  .td-sched__row {
    grid-template-columns: auto 1fr;
  }

  .td-sched__info {
    display: none;
  }

  /* Ô ngày là hình VUÔNG: `aspect-ratio` để chiều cao bám theo bề rộng cột, và
     `min-height: 0` để bỏ mốc 3.5rem cũ — có nó thì ô dài hơn rộng, lưới trông
     so le. Ô rỗng và ô có chuyến cùng một khuôn nên các hàng thẳng nhau. */
  .td-sched__cell {
    aspect-ratio: 1;
    min-height: 0;
    padding: 0.25rem 0.125rem;
    font-size: 0.8125rem;
  }

  /* Giá phải nằm gọn MỘT dòng trong ô ~45px: đổi sang dạng nghìn và khoá không
     cho xuống dòng. Không có hai điều này thì ô tự phình ra, phá luôn hình
     vuông ở trên. */
  .td-sched__cellprice--full {
    display: none;
  }

  .td-sched__cellprice--short {
    display: block;
    font-size: 0.625rem;
    line-height: 1.2;
    white-space: nowrap;
    /* Chữ số đều bề ngang: giá các ngày dóng thẳng cột với nhau. */
    font-variant-numeric: tabular-nums;
  }

  .td-sched__cell--has b {
    font-size: 0.9375rem;
    line-height: 1.1;
  }

  .td-sched__cellback {
    display: none;
  }
}

/* ======= HAI NÚT PHỤ Ở THẺ ĐẶT TOUR ======= */
.td-book__extra {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 0.5rem;
  margin-top: 0.625rem;
}

.td-book__share,
.td-book__pdf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.625rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 700;
  transition: var(--transition);
}

.td-book__share svg,
.td-book__pdf svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.td-book__share {
  border: 0.0625rem solid var(--border);
  background: var(--bg-surface);
  color: var(--text-muted);
}

.td-book__share:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Nút tải dùng vàng thương hiệu như bản tham khảo; chữ navy vì trắng trên vàng
   không đạt ngưỡng tương phản cho cỡ chữ này. */
.td-book__pdf {
  background: var(--gold);
  color: var(--primary-dark);
}

.td-book__pdf:hover {
  filter: brightness(1.06);
}

@media (max-width: 400px) {
  .td-book__extra {
    grid-template-columns: 1fr;
  }
}

/* ===== Hộp thoại "đợt vừa chọn" (chỉ khổ điện thoại) =====

   Bấm một ngày trong "Lịch khởi hành" không rời trang: nó chỉ đổi ô
   `#td-date-select`, rồi giá / "Tạm tính" / nhãn nút đặt tour / khối "Thông tin
   vận chuyển" vẽ lại theo. Dưới 900px thì cả bốn thứ đó nằm ngoài tầm mắt (xem
   `.td-layout` gập một cột ở đúng ngưỡng này), nên chạm vào ngày trông như
   không có gì xảy ra. Hộp thoại này là câu trả lời ngay tại chỗ ngón tay vừa
   chạm — xem `openPickModal` trong tour-details.js.

   Trên 900px KHÔNG bao giờ hiện: thẻ đặt tour lúc đó dính bên phải và đã tự đổi
   theo, phủ thêm một lớp lên là che mất chính thứ nó đang tả. Chặn ở cả hai
   tầng (JS `matchMedia` và luật dưới đây) để một bên hỏng không kéo theo bên
   kia. */
.td-pickmodal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
}

.td-pickmodal[hidden] {
  display: none;
}

@media (min-width: 56.3125rem) {
  .td-pickmodal {
    display: none;
  }
}

.td-pickmodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

/* Trượt lên từ đáy màn, không phải hộp giữa màn: ngón tay vừa chạm ở nửa dưới
   màn hình, và nút bấm trong hộp cũng nằm trong tầm ngón cái. */
.td-pickmodal__panel {
  position: relative;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1rem 1.125rem;
  background: var(--bg-surface, #fff);
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0 -0.75rem 2rem rgba(15, 23, 42, 0.25);
}

.td-pickmodal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.td-pickmodal__title {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.4;
}

.td-pickmodal__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  background: var(--bg-subtle);
  border: none;
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
}

.td-pickmodal__seats {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent);
}

.td-pickmodal__seats[hidden] {
  display: none;
}

.td-pickmodal__prices {
  margin-top: 0.875rem;
  border-top: 0.0625rem solid var(--border);
}

.td-pickmodal__prices>div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 0.0625rem solid var(--border-light, #eef2f6);
}

.td-pickmodal__prices dt {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.td-pickmodal__prices dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.td-pickmodal__legs {
  margin-top: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.td-pickmodal__legs[hidden] {
  display: none;
}

.td-pickleg {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem 0.5rem;
  padding: 0.5rem 0.625rem;
  background: var(--bg-subtle);
  border-radius: var(--radius-md, 0.5rem);
  font-size: 0.8125rem;
}

.td-pickleg[hidden] {
  display: none;
}

.td-pickleg__label {
  font-weight: 800;
  color: var(--primary);
}

.td-pickleg__code {
  margin-left: auto;
  font-weight: 700;
  color: var(--text-muted);
}

/* Cả chặng xuống một dòng riêng: "SGN 08:20 → NRT 15:40" ở khổ 360px không đủ
   chỗ đứng cạnh nhãn và số hiệu. */
.td-pickleg__route {
  flex: 1 0 100%;
  display: flex;
  align-items: baseline;
  gap: 0.3125rem;
  color: var(--text-main);
}

.td-pickleg__route b {
  font-weight: 800;
}

.td-pickleg__route i {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.td-pickleg__arrow {
  margin: 0 0.125rem;
  color: var(--text-light);
}

/* Tổng số tiền, ngay trên hàng nút. Nền đậm hơn thân hộp để nó là thứ đọc được
   trước tiên khi hộp thoại bật lên — con số này mới là thứ khách quyết định. */
.td-pickmodal__sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.875rem;
  padding: 0.625rem 0.75rem;
  background: var(--bg-subtle);
  border-radius: var(--radius-md, 0.5rem);
}

.td-pickmodal__sum span {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-muted);
}

.td-pickmodal__sum strong {
  font-size: 1.0625rem;
  font-weight: 900;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.td-pickmodal__foot {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.td-pickmodal__ghost,
.td-pickmodal__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border-radius: var(--radius-md, 0.5rem);
  font-size: 0.875rem;
  font-weight: 800;
  cursor: pointer;
}

.td-pickmodal__ghost {
  background: transparent;
  border: 0.0625rem solid var(--border);
  color: var(--primary);
}

.td-pickmodal__cta {
  background: var(--accent);
  border: 0.0625rem solid var(--accent);
  color: #fff;
}

/* ---- "Dịch vụ & quy định giá": ba khối con gập được trên điện thoại ----
   Khách báo 23/09/2026: mở mục ra trên mobile là 2.132px chữ liền mạch (2,5
   màn hình). Máy bàn KHÔNG đổi — ô tick bị ẩn và ba danh sách luôn mở. */
.td-serv__state {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Khe icon–chữ khai SỐ, không `inherit`: cha trực tiếp là `<label>`, trên máy
   bàn nó không khai gap nên `inherit` ra 0 — icon dính sát chữ "Giá tour bao
   gồm" (khách báo 24/09/2026). 0.5rem = gap của h4 trước khi có ô gập. */
.td-serv__toggle-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Mũi tên chỉ có nghĩa khi khối gập được, tức chỉ ở khổ hẹp. */
.td-serv__chev {
  display: none;
}

@media (max-width: 720px) {
  .td-serv__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    cursor: pointer;
    /* Vùng bấm cao đủ ngón tay: tiêu đề h4 vốn chỉ cao ~22px. */
    padding: 0.25rem 0;
  }

  .td-serv__chev {
    display: inline-flex;
    flex: none;
    color: var(--text-muted);
    transition: transform 0.2s ease;
  }

  .td-serv__state:checked ~ h4 .td-serv__chev {
    transform: rotate(180deg);
    color: var(--primary);
  }

  .td-serv__col .td-serv__list,
  .td-serv__child .td-serv__list {
    display: none;
  }

  .td-serv__state:checked ~ .td-serv__list {
    display: block;
  }
}