/**
 * PAGE: DETAIL (single tour) — CSS riêng. Nguồn: docs/design-previews/detail.html.
 * Enqueue khi is_singular('tour') (functions.php). Class prefix `dt-*` / `it` / `inc`.
 * Component chung: accordion (pre-trip) ở sjourney.css.
 */

/* Nút tròn điều hướng (carousel cabin) — dùng nội bộ Detail. */
.dt-side .sj-circle-nav, .dt-cabin .sj-circle-nav { width: var(--ico-64); height: var(--ico-64); border-radius: 50%; border: 0; background: #fff; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--sj-red); box-shadow: 0 4px 16px rgba(67,12,14,.10); }
/* *-arrow-style-1.svg khung 25×24 — giữ đúng tỉ lệ, ép vuông sẽ bẹp 4%. */
.dt-cabin .sj-circle-nav svg { width: calc(22px * 25 / 24); height: 22px; display: block; }

/* ---- HERO ---- */
/* Khối chữ → 3 ảnh → dải thông tin, xếp theo DÒNG CHẢY BÌNH THƯỜNG.
   Bản trước đặt 3 ảnh `position:absolute` với `padding-top: clamp(260px, 21.25vw, 408px)` — một
   độ cao cố định giả định khối chữ chỉ gồm nhãn + H1. Khối chữ cao lên là đè ảnh: thêm excerpt
   thì ở 1920 đè 67px; còn ≤1023 (nơi padding-top bị đặt về 0) thì chữ nằm hẳn trên ảnh kể cả
   khi không có excerpt. Nay ảnh luôn bắt đầu ngay dưới khối chữ, cách đúng padding-bottom của nó.
   Dải .dt-bar vẫn đè lên mép dưới ảnh như Figma, bằng margin âm --dt-bar-overlap
   (80px @1024 → 96px @1920 — đúng độ đè của bản cũ ở hai mốc đó). */
.dt-hero { position: relative; display: flex; flex-direction: column; --dt-bar-overlap: clamp(80px, calc(1.786vw + 61.71px), 96px); }
/* Ảnh đầu trang = carousel .dt-car (3 ảnh / màn, điện thoại 1) — xem khối "Carousel" bên dưới. */
.dt-hero__bgs { --car-gap: 4px; }
.dt-hero__bgs .dt-car__slide { height: clamp(420px, 32.5vw, 624px); position: relative; background-color: rgba(67,12,14,.08); }
/* Mũi tên nằm giữa phần ảnh KHÔNG bị dải .dt-bar đè (dải đè --dt-bar-overlap ở mép dưới). */
.dt-hero__bgs .dt-car__nav { top: calc((100% - var(--dt-bar-overlap)) / 2); }
/* KHÔNG phủ lớp tối lên 3 ảnh hero. Bản dựng trước bê nguyên
   `::after { background: rgba(0,0,0,.2) }` từ docs/design-previews/detail.html, làm ảnh
   hiện lên tối hơn ảnh gốc khách tải lên. Đo lại vị trí thì lớp phủ đó không phục vụ việc
   đọc chữ: khối tiêu đề kết thúc TRƯỚC khi ảnh bắt đầu (1600px: chữ 0→333, ảnh 340→860;
   1280px: chữ 0→268, ảnh 272→692) — không hề chồng nhau. Nên nó chỉ còn tác dụng làm tối ảnh. */
.dt-hero__bgs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt-hero__head { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--sp-8); align-items: center; text-align: center; text-transform: uppercase; padding: var(--sp-240, clamp(120px, calc(13.393vw - 17.14px), 240px)) var(--sp-48) var(--sp-48); }
.dt-hero__title { font-size: var(--fs-72); font-weight: 500; line-height: 1.1; color: var(--sj-dark); margin: 0; }
.dt-hero__title .accent { color: var(--sj-red); }
/* Mô tả ngắn dưới H1. `text-transform: none` là BẮT BUỘC: .dt-hero__head khai uppercase cho
   cả khối (nhãn đỏ + tiêu đề), để nguyên thì đoạn mô tả hiện TOÀN CHỮ HOA, đọc rất mệt.
   max-width kẹp dòng quanh 70 ký tự — dài hơn thì mắt khó bắt đầu dòng, nhất là khi canh giữa. */
.dt-hero__lead {
	margin: var(--sp-8) 0 0; max-width: 70ch;
	font-size: var(--fs-24); font-weight: 300; line-height: 1.5;
	text-transform: none; color: var(--sj-gray);
}

/* Chặn trên: nội dung tối đa --sj-boxed (1824px @1920) — đồng bộ .sj-container toàn site. */
/* Nền toàn màn Detail Tour dùng cream #FEF2F2 như các trang khác; panel/sidebar/bar giữ nền trắng để nổi lên trên. */
.sj-page--tour { background: var(--sj-cream); }

.dt-bar { position: relative; z-index: 1; margin: calc(var(--dt-bar-overlap) * -1) auto 0; width: calc(100% - var(--sp-48) * 2); max-width: var(--sj-boxed); background: #fff; box-shadow: 8px 8px 16px rgba(0,0,0,.04); min-height: 120px; display: flex; align-items: center; }
.dt-bar__main { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-24) var(--sp-24) var(--sp-24) 32px; flex: 1 1 auto; min-width: 0; }
.dt-bar__name { font-size: var(--fs-32); font-weight: 500; text-transform: uppercase; letter-spacing: -1px; color: var(--sj-dark); margin: 0; line-height: 1.25; }
.dt-bar__route { font-size: var(--fs-20); text-transform: uppercase; letter-spacing: -.2px; color: var(--sj-gray); }
.dt-bar__sep { width: 1px; align-self: stretch; background: var(--sj-n4-nw); flex: 0 0 auto; }
.dt-bar__cell { display: flex; flex-direction: column; gap: var(--sp-8); align-items: flex-end; padding: var(--sp-24); width: 200px; text-align: right; }
.dt-bar__cell--last { padding-left: var(--sp-24); padding-right: 32px; }
.dt-bar__label { font-size: var(--fs-20); text-transform: uppercase; letter-spacing: -.1px; color: var(--sj-muted-nw); }
.dt-bar__value { font-size: var(--fs-24); font-weight: 500; text-transform: uppercase; letter-spacing: -.5px; color: var(--sj-dark); line-height: 1.25; }
.dt-bar__cell--price .dt-bar__value { color: var(--sj-red); }
/* Ô tên tour + lộ trình đang ẩn (page-blocks.php, khối tour_bar_main): các ô còn lại chia đều. */
.dt-bar--no-main .dt-bar__cell { flex: 1 1 0; width: auto; align-items: center; text-align: center; padding-left: var(--sp-24); padding-right: var(--sp-24); }

/* ---- Carousel dùng chung của Detail Tour (.dt-car): ảnh đầu trang + điểm đến cuối trang ----
   --per-view = số thẻ một màn (JS đọc biến này), --car-gap = khoảng cách thẻ. Ít thẻ hơn một
   màn → .is-static: thẻ giãn chia đều, ẩn mũi tên, không tự chạy (tour-booking.js). */
.dt-car { --per-view: 3; --car-gap: var(--sp-24); position: relative; }
.dt-car__viewport { overflow: hidden; touch-action: pan-y; }
.dt-car__track { display: flex; gap: var(--car-gap); margin: 0; padding: 0; list-style: none; transition: transform .6s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
.dt-car__slide { flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--car-gap)) / var(--per-view)); min-width: 0; background-size: cover; background-position: center; }
.dt-car.is-static .dt-car__slide { flex: 1 1 0; }
.dt-car.is-static .dt-car__nav { display: none; }
.dt-car__nav { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); width: var(--ico-64); height: var(--ico-64); border-radius: 50%; border: 0; background: #fff; color: var(--sj-red); cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(67,12,14,.16); }
.dt-car__nav--prev { left: var(--sp-24); }
.dt-car__nav--next { right: var(--sp-24); }
.dt-car__nav svg { width: calc(var(--ico-24) * 25 / 24); height: var(--ico-24); display: block; }
.dt-car__nav:hover, .dt-car__nav:focus-visible { background: var(--sj-cream); }
@media (prefers-reduced-motion: reduce) { .dt-car__track { transition: none; } }

/* ---- THÂN 2 cột ---- */
/* Wrapper đã có gutter var(--sp-48) nên max-width cộng thêm 2 gutter → nội dung đúng 1824px @1920. */
.dt-body { display: flex; gap: var(--sp-48); align-items: flex-start; padding: var(--sp-48); max-width: calc(var(--sj-boxed) + var(--sp-48) * 2); margin-inline: auto; }
.dt-main { flex: 0 0 calc((100% - var(--sp-48)) * 22 / 37); min-width: 0; display: flex; flex-direction: column; }

.dt-tabs { display: flex; background: var(--sj-n4-nw); gap: 1px; scroll-margin-top: clamp(96px, 7.3vw, 140px); } /* mở link …#itinerary: thanh tab dừng dưới header cố định */
.dt-tab { flex: 1 1 0; min-width: 0; background: #fff; border: 0; border-bottom: 2px solid transparent; height: 64px; padding: var(--sp-16) clamp(16px, 4.17vw, 80px); font-family: inherit; font-size: var(--fs-24); color: var(--sj-muted-nw); cursor: pointer; white-space: nowrap; }
.dt-tab.is-active { color: var(--sj-rose-nw); border-bottom-color: var(--sj-rose-nw); }

.dt-panel { background: #fff; }
.dt-panel[hidden] { display: none; }
.dt-panel--pad { padding: var(--sp-48); display: flex; flex-direction: column; gap: var(--sp-48); align-items: center; }
.dt-block { display: flex; flex-direction: column; gap: var(--sp-24); align-items: flex-start; width: 100%; }
.dt-h3 { font-size: var(--fs-32); font-weight: 500; text-transform: uppercase; color: var(--sj-dark); margin: 0; line-height: 1.25; }
.dt-prose { display: flex; flex-direction: column; gap: var(--sp-16); font-size: var(--fs-20); font-weight: 300; line-height: 1.2; color: var(--sj-gray); text-align: justify; width: 100%; }
.dt-prose p { margin: 0; }
.dt-figure { width: 100%; aspect-ratio: 960/534; display: block; background-size: cover; background-position: center; background-color: rgba(67,12,14,.08); }
.dt-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Bảng giá dt-rate ---- */
/* Padding ô co giãn theo bề rộng (clamp) + min-width thấp hơn để bảng vừa màn laptop / khi
   scale display >100% (giảm scroll ngang). overflow-x vẫn giữ làm lưới an toàn màn rất hẹp. */
.dt-scroll { width: 100%; overflow-x: auto; }
/* KHÔNG để sàn 900px cứng: laptop 1366 ở scale 125% báo viewport CSS ~1093px, cột .dt-main
   khi đó chỉ ~595px nên bảng tràn đúng ~305px và phải cuộn ngang. `min(900px, 100%)` giữ
   nguyên 900 khi còn chỗ (màn rộng), nhưng không bao giờ vượt khung chứa. */
.dt-rate { width: 100%; min-width: min(900px, 100%); border-collapse: collapse; background: #fff; }
/* Lề ngang trong ô phải co MẠNH hơn --sp-48: token đó sàn ở 24px, nhân 2 cạnh × số cột
   cabin là thừa đủ đẩy bảng tràn ở màn hẹp. Dùng clamp riêng, vẫn neo 1024↔1920 như quy
   ước chung và vẫn đúng 48px ở mốc thiết kế 1920, nhưng xuống ~12px ở 1024 (thay vì 24).
   Cố ý KHÔNG dùng @media: breakpoint cứng gây nhảy lề đột ngột giữa 2 cỡ màn. */
.dt-rate { --dt-rate-pad: clamp(12px, calc(4.018vw - 29.15px), 48px); }
.dt-rate th, .dt-rate td { height: 100px; padding: var(--sp-16) var(--dt-rate-pad); text-align: center; vertical-align: middle; border: 0; }
.dt-rate thead th { background: var(--sj-gray); color: var(--sj-cream); font-weight: 400; font-size: var(--fs-20); border-left: 1px solid rgba(254,242,242,.35); }
/* Ô tiêu đề trái gộp 2 cột (năm + occupancy). 384px CỐ ĐỊNH là thủ phạm thứ hai: ở màn hẹp
   nó nuốt 389/595px, chỉ còn ~206px chia cho các cột giá. Nội suy 1024↔1920 như quy ước
   chung, vẫn đúng 384px ở mốc thiết kế 1920. */
.dt-rate thead th:first-child { border-left: 0; width: clamp(180px, calc(22.768vw - 53.14px), 384px); padding: var(--sp-16) var(--sp-24); text-align: left; }
.dt-rate tbody th, .dt-rate tbody td { border-left: 1px solid var(--sj-n4-nw); border-bottom: 1px solid var(--sj-n4-nw); }
.dt-rate tbody th:first-child { border-left: 0; }
.dt-rate__cap { display: flex; flex-direction: column; gap: var(--sp-8); }
.dt-rate__cap b { font-size: var(--fs-24); font-weight: 500; text-transform: uppercase; }
.dt-rate__cap span { font-size: var(--fs-16); font-weight: 300; color: #FCCCCD; }
.dt-rate__year { font-size: var(--fs-32); font-weight: 500; color: var(--sj-dark); padding: var(--sp-16) var(--sp-24); text-align: center; }
.dt-rate__occ { font-size: var(--fs-24); font-weight: 500; text-transform: uppercase; color: var(--sj-dark); }
.dt-rate td { font-size: var(--fs-24); font-weight: 500; color: var(--sj-red); }
.dt-rate tr.is-single > *:not(.dt-rate__year) { background: var(--sj-table-nw); }
.dt-rate__per { display: block; font-size: var(--fs-16); font-weight: 300; color: var(--sj-gray); margin-top: 8px; }
.dt-rate__foot { font-size: var(--fs-20); color: var(--sj-muted-nw); align-self: flex-start; margin: 0; }

/* ---- Lịch giá dt-cal ---- */
/* Wrapper luôn full-width cột (nằm trong .dt-block có align-items:flex-start nên nếu không đặt
   width:100% sẽ co về max-content — chính là hiện tượng lịch bị co nhỏ). */
/* Figma 4073:1421: khối head ↔ lưới cách 24; ô ngày cao 100, padding 8/16/16/16; hàng thứ cao 100. */
.dt-cal { width: 100%; display: flex; flex-direction: column; gap: var(--sp-24); --dt-cal-row: clamp(64px, calc(4.018vw + 22.86px), 100px); /* 100 @1920 · 64 @1024 */ }
.dt-cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24); width: 100%; }
.dt-cal__heading { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); min-width: 0; }
.dt-cal__monthrow { display: flex; align-items: center; gap: 10px; }
.dt-cal__ico { width: var(--ico-24); height: var(--ico-24); display: block; flex: 0 0 auto; }
.dt-cal__month { font-size: var(--fs-24); line-height: 1.333; font-weight: 500; text-transform: uppercase; color: var(--sj-red); }
.dt-cal__navs { display: flex; gap: var(--sp-48); }
.dt-cal__nav { width: var(--ico-64); height: var(--ico-64); border-radius: 50%; border: 0; background: var(--sj-cream); cursor: pointer; color: var(--sj-red); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.dt-cal__nav svg { width: calc(var(--ico-24) * 25 / 24); height: var(--ico-24); display: block; }
.dt-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); width: 100%; background: var(--sj-n4-nw); gap: 1px; border: 1px solid var(--sj-n4-nw); }
.dt-cal__dow { background: var(--sj-gray); color: var(--sj-cream); height: var(--dt-cal-row); display: flex; align-items: center; justify-content: center; padding: 0 var(--sp-8); font-size: var(--fs-24); font-weight: 500; text-transform: uppercase; }
.dt-cal__day { background: #fff; min-height: var(--dt-cal-row); padding: var(--sp-8) var(--sp-16) var(--sp-16); display: flex; flex-direction: column; justify-content: space-between; font-size: var(--fs-20); line-height: 1.2; letter-spacing: -.005em; color: var(--sj-gray); }
.dt-cal__day--muted { color: var(--sj-n5-nw); }
/* Ngày có lịch khởi hành: nền #FEF2F2 60% (class thêm bởi tour-booking.js). */
/* Phủ LÊN NỀN TRẮNG như Figma: rgba trần sẽ để lộ màu kẻ lưới (#DCDCDC) của .dt-cal__grid bên dưới → ô bị xám. */
.dt-cal__day--dep { background: linear-gradient(rgba(254, 242, 242, .6), rgba(254, 242, 242, .6)), #fff; }
.dt-cal__price { align-self: stretch; text-align: right; font-weight: 500; color: var(--sj-red); font-size: var(--fs-24); line-height: 1.2; }
@media (max-width: 767px) {
	.dt-cal { --dt-cal-row: 56px; }
	.dt-cal__navs { gap: var(--sp-16); }
	.dt-cal__dow { font-size: 12px; padding: 0 2px; }
	.dt-cal__day { padding: 4px; font-size: 12px; }
	.dt-cal__price { font-size: 10px; }
}

/* ---- Itinerary timeline ---- */
.it { display: flex; align-items: flex-start; width: 100%; }
.it__rail { display: flex; flex-direction: column; gap: var(--sp-24); align-items: center; justify-content: flex-start; padding: var(--sp-48); flex: 0 0 auto; position: sticky; top: calc(var(--sj-header-h-scrolled) + var(--sp-24)); align-self: flex-start; background: #fff; z-index: 1; }
.it__day { height: var(--ico-64); padding: var(--sp-16) var(--sp-48); border: 0; cursor: pointer; font-family: inherit; font-size: var(--fs-24); font-weight: 500; background: var(--sj-table-nw); color: var(--sj-n5-nw); white-space: nowrap; }
.it__day.is-active { background: var(--sj-yellow); color: #fff; }
.it__spine { align-self: stretch; padding: var(--sp-48) 0; flex: 0 0 1px; display: flex; }
.it__spine span { width: 1px; flex: 1 1 auto; background: var(--sj-n4-nw); position: relative; }
.it__spine span::before { content: ''; position: absolute; left: -1.5px; top: var(--it-marker, 0); width: 4px; height: var(--ico-64); background: var(--sj-yellow); transition: top .2s var(--sj-ease, ease); }
.it__list { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-48); padding: var(--sp-48); }
.it__item { display: flex; flex-direction: column; gap: var(--sp-24); width: 100%; }
.it__item[hidden] { display: none; }
.it__head { background: var(--sj-cream); min-height: var(--ico-64); display: flex; gap: 8px; align-items: center; padding: var(--sp-16) var(--sp-24); }
.it__marker { flex: 0 0 auto; width: calc(var(--ico-32) * 30 / 32); height: calc(var(--ico-32) * 30 / 32); display: inline-flex; align-items: center; justify-content: center; }
.it__marker::before { content: ''; width: calc(var(--ico-32) * 16 / 32); height: calc(var(--ico-32) * 16 / 32); background: #000; border: calc(var(--ico-32) * 3 / 32) solid #fff; transform: rotate(-45deg); }
.it__title { font-size: var(--fs-24); font-weight: 500; color: var(--sj-dark); line-height: 1.25; margin: 0; }
.it__img { width: 100%; aspect-ratio: 888/420; display: block; background-size: cover; background-position: center; background-color: rgba(67,12,14,.08); }
.it__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.it__bullets { display: flex; flex-direction: column; gap: var(--sp-16); margin: 0; padding-left: 30px; font-size: var(--fs-20); font-weight: 300; line-height: 1.2; color: var(--sj-gray); text-align: justify; }

/* ---- Inclusions panel ---- */
.inc { display: flex; gap: var(--sp-48); align-items: flex-start; justify-content: center; padding: var(--sp-48); width: 100%; }
.inc__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; align-self: stretch; }
.inc__card { background: var(--sj-table-nw); padding: var(--sp-24); display: flex; flex-direction: column; gap: var(--sp-24); }
.inc__head { display: flex; flex-direction: column; gap: var(--sp-16); }
.inc__icon { display: block; width: var(--ico-48); height: var(--ico-48); }
.inc__title { font-size: var(--fs-32); font-weight: 500; text-transform: uppercase; line-height: .75; margin: 0; }
.inc__title--yes { color: var(--sj-green-nw); }
.inc__title--no { color: var(--sj-red); }
.inc__entry { display: flex; flex-direction: column; gap: var(--sp-8); }
.inc__entry b { font-size: var(--fs-24); font-weight: 500; color: var(--sj-dark); }
/* Mục không có tiêu đề: thẻ <b> vẫn in ra (để Live Edit sửa được) nhưng không chiếm chỗ. */
.inc__entry b:empty { display: none; }

/* Dòng báo đợt chưa có giá bán (dưới ô Select Cabin Type). flex 1 0 100% để chiếm trọn
   một dòng riêng thay vì đứng cạnh nhãn — giống .dt-qty__hint. */
.dt-field__note {
	flex: 1 0 100%;
	margin: var(--sp-8) 0 0;
	font-size: var(--fs-16);
	font-weight: 300;
	line-height: 1.35;
	color: var(--sj-red);
}
.dt-field__pick:disabled { opacity: .5; cursor: not-allowed; }
.inc__entry span { font-size: var(--fs-20); font-weight: 300; line-height: 1.2; color: var(--sj-gray); }
.inc .sj-hr { border: 0; height: 1px; background: var(--sj-n4-nw); margin: 0; }
/* Dải heritage cuối cột Excluded (Figma để 5 ô placeholder, thực tế là
   assets/images/heritage.svg như các trang khác). flex:1 đẩy nó xuống đáy cột. */
.inc__partners { flex: 1 1 auto; display: flex; align-items: flex-end; justify-content: flex-end; padding-top: var(--sp-160); }
/* the-journey.css không enqueue ở trang tour nên khai lại cỡ --lg tại đây. */
.dt-main .sj-heritage--lg svg, .inc__partners .sj-heritage svg { height: clamp(24px, 1.875vw, 36px); }

/* ---- Cột Book (sidebar) ---- */
.dt-side { flex: 0 0 calc((100% - var(--sp-48)) * 15 / 37); min-width: 0; max-width: 100%; background: #fff; padding: var(--sp-48); display: flex; flex-direction: column; gap: var(--sp-16); position: sticky; top: 0; } /* dính sát mép trên trình duyệt, không chừa khe */
.dt-side__top { display: flex; align-items: center; gap: var(--sp-16); min-height: 64px; margin-bottom: var(--sp-16); } /* top ↔ field đầu 16 */
.dt-side__title { flex: 1 1 auto; font-size: var(--fs-32); font-weight: 500; text-transform: uppercase; color: var(--sj-red); margin: 0; }
.dt-side__top .sj-btn { flex: 0 0 302px; max-width: 100%; height: 64px; }
.dt-field { display: flex; align-items: center; gap: var(--sp-16); padding: var(--sp-16) 0; }
.dt-field--rule { border-bottom: 1px solid var(--sj-n4-nw); }
.dt-field__label { flex: 1 1 auto; font-size: var(--fs-20); text-transform: uppercase; letter-spacing: -.1px; color: var(--sj-muted-nw); }
.dt-field--req .dt-field__label::before { content: '*'; color: var(--sj-red); margin-right: 8px; }
.dt-field__value { flex: 0 0 auto; font-size: var(--fs-24); font-weight: 500; text-transform: uppercase; color: var(--sj-dark); }
.dt-field__ico { flex: 0 0 auto; width: var(--ico-24); height: var(--ico-24); display: block; }
/* Stepper số khách: số cabin suy ra theo ceil(guests/2), hint hiển thị ngay dưới. */
.dt-qty { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-8); }
.dt-qty__btn { width: var(--ico-44); height: var(--ico-44); flex: 0 0 auto; border: 1px solid var(--sj-n4-nw); background: #fff; color: var(--sj-dark); font-family: inherit; font-size: var(--fs-24); line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dt-qty__btn:hover:not(:disabled) { background: var(--sj-cream); color: var(--sj-red); }
.dt-qty__btn:disabled { opacity: .35; cursor: default; }
.dt-qty__input { width: 64px; height: var(--ico-44); border: 0; background: none; text-align: center; font-family: inherit; font-size: var(--fs-24); font-weight: 500; color: var(--sj-dark); -moz-appearance: textfield; }
.dt-qty__input::-webkit-outer-spin-button, .dt-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dt-field--qty { flex-wrap: wrap; }
.dt-qty__hint { flex: 1 0 100%; margin: 4px 0 0; font-size: var(--fs-16); text-transform: uppercase; letter-spacing: -.1px; color: var(--sj-muted-nw); text-align: right; }

/* wrap để .dt-field__note xuống dòng riêng — cùng cách .dt-qty__hint đang làm ở trên. */
.dt-field--pick { position: relative; flex-wrap: wrap; }
.dt-field__pick { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-16); border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; }
.dt-field__pick[aria-expanded="true"] .dt-field__ico { transform: rotate(180deg); }
.dt-pick-list { position: absolute; top: calc(100% - var(--sp-8)); right: 0; z-index: 5; min-width: 240px; margin: 0; padding: var(--sp-8) 0; list-style: none; background: #fff; border: 1px solid var(--sj-n4-nw); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.dt-pick-list[hidden] { display: none; }
/* Ô From là bộ chọn ngày: icon lịch không xoay như mũi tên, và danh sách đợt
   có thể dài nên giới hạn chiều cao rồi cho cuộn. */
.dt-field--date .dt-field__pick[aria-expanded="true"] .dt-field__ico { transform: none; }
/* Ô ngày mở ra LỊCH (.sj-dp, style ở sjourney.css) thay vì danh sách dọc: .dt-pick-list vốn
   là <ul> có padding dọc và min-width 240 — biến thể này cần padding đều và rộng hơn. */
.dt-pick-list--cal { min-width: 300px; padding: var(--sp-16); }
@media (max-width: 1023px) {
	/* Trên máy nhỏ, lịch 300px dễ tràn khỏi mép phải cột Book — neo theo bề ngang field. */
	.dt-pick-list--cal { min-width: 0; width: min(320px, calc(100vw - var(--sp-48) * 2)); }
}
.dt-field--date .dt-field__pick:disabled { cursor: default; opacity: .6; }
.js-dt-date-list { max-height: 320px; overflow-y: auto; }
.dt-pick-list:not(.dt-pick-list--cal) button { display: block; width: 100%; padding: var(--sp-8) var(--sp-16); border: 0; background: none; cursor: pointer; font-family: inherit; font-size: var(--fs-20); font-weight: 500; text-transform: uppercase; color: var(--sj-dark); text-align: left; }
.dt-pick-list:not(.dt-pick-list--cal) button:hover,
.dt-pick-list:not(.dt-pick-list--cal) button:focus-visible { background: var(--sj-cream); outline: none; }
.dt-pick-list:not(.dt-pick-list--cal) button[aria-selected="true"] { color: var(--sj-red); }

.dt-cabin { display: flex; flex-direction: column; }
/* `display:flex` mạnh hơn rule [hidden]{display:none} của trình duyệt, nên khối
   chi tiết cabin vẫn lộ ra khi chưa chọn hạng. Phải khai lại cho đúng. */
.dt-cabin[hidden] { display: none; }
.dt-cabin__media { position: relative; height: clamp(180px, 12.5vw, 240px); overflow: hidden; background: rgba(67,12,14,.08); }
.dt-cabin__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt-cabin__dots { position: absolute; left: 50%; bottom: var(--sp-16); transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; }
.dt-cabin__dots span { width: 8px; height: 8px; border-radius: 50px; background: #fff; display: block; }
.dt-cabin__dots span.is-active { background: var(--sj-rose-nw); }
.dt-cabin__navs { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-16); z-index: 2; }
/* Nhãn hạng cabin: nền kem để liền mạch với khối thông số ngay bên dưới.
   Cạnh dưới của clip-path kéo quá đáy 2px — dừng đúng ở 100% thì hàng pixel
   cuối bị anti-alias, lộ nền .dt-cabin__media phía sau thành một sợi chỉ xám
   ngăn giữa nhãn và khối thông số. .dt-cabin__media có overflow:hidden nên
   phần dư không tràn ra ngoài. */
.dt-cabin__tag { position: absolute; right: 0; bottom: 0; z-index: 2; background: var(--sj-cream); padding: var(--sp-8) var(--sp-16); font-size: var(--fs-24); font-weight: 500; color: var(--sj-dark); clip-path: polygon(34px 0, 100% 0, 100% calc(100% + 2px), 0 calc(100% + 2px)); padding-left: calc(34px + var(--sp-16)); }
.dt-specs { background: var(--sj-cream); padding: var(--sp-16); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-16); margin: 0; list-style: none; }
.dt-specs li { display: flex; gap: var(--sp-16); align-items: center; font-size: 16px; line-height: 19px; color: var(--sj-gray); }
.dt-specs__ico { flex: 0 0 auto; width: var(--ico-44); height: var(--ico-44); background: var(--sj-rose-nw); display: flex; align-items: center; justify-content: center; }
.dt-specs__ico img { width: var(--ico-24); height: var(--ico-24); object-fit: contain; }
.dt-total { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); border-top: 1px solid var(--sj-n4-nw); padding-top: var(--sp-16); margin-bottom: var(--sp-16); } /* Total ↔ Book now 16 */
.dt-total__label { font-size: var(--fs-24); font-weight: 500; text-transform: uppercase; color: var(--sj-dark); }
.dt-total__value { font-size: var(--fs-32); font-weight: 500; color: var(--sj-red); }
.dt-side .sj-btn--red { justify-content: center; gap: 8px; }
.dt-side .sj-btn--red svg { width: 20px; height: 20px; }
.dt-side__note { font-size: var(--fs-16); color: var(--sj-muted-nw); margin: 0; }
/* Cột Book luôn gọn trong 100dvh ở màn ≥ 1024px (17/10/2026): tour-booking.js đo chiều cao
   thật rồi gắn --dt-k (≤ 1) + class is-fit. Thu nhỏ CẢ CỘT theo tỉ lệ: padding nhân k, form
   scale(k) từ góc trên trái và rộng 100%/k để nhìn vẫn kín bề ngang cột (margin-bottom âm do
   JS gắn để trả lại phần chiều cao dư sau khi scale). Không JS / dưới 1024 → k = 1, như cũ. */
.dt-side.is-fit { padding: calc(var(--sp-48) * var(--dt-k, 1)); }
.dt-side.is-fit .dt-side__form { width: calc(100% / var(--dt-k, 1)); transform: scale(var(--dt-k, 1)); transform-origin: 0 0; }

/* ---- The Destinations — Figma 4073:1805 (chốt 14/10/2026) ----
   Nền trắng; thẻ rộng cố định 546 @1920 (gap 48), ảnh 546×258 vuông góc, nhãn tên nền r500,
   mô tả Light 20/24 n-9. Carousel bắt đầu ở lề trái 48 và tràn tới mép phải màn hình nên thẻ
   kế tiếp lấp ló. Không mũi tên (data-fit: JS tự đếm số thẻ vừa khung, xem tour-booking.js). */
.dt-dest { background: #fff; padding: var(--sp-48) 0 var(--sp-80); overflow: hidden; }
.dt-dest__head { display: flex; flex-direction: column; gap: var(--sp-8); text-align: center; }
.dt-dest__eyebrow { color: var(--sj-muted-nw); }
.dt-dest__title { font-size: var(--fs-72); font-weight: 500; text-transform: uppercase; line-height: 1.2; color: var(--sj-dark); margin: 0; }
.dt-dest__title .accent { color: var(--sj-red); }
.dt-dest__car { --car-gap: var(--sp-48); margin-top: calc(var(--sp-48) + var(--sp-8)); padding-left: var(--sp-48); }
.dt-dest__car .dt-car__slide { flex: 0 0 clamp(280px, 28.44vw, 546px); }
/* Đủ chỗ cho mọi thẻ (vd 1–3 điểm đến) → không chạy, căn giữa dưới tiêu đề. */
.dt-dest__car.is-static { padding-right: var(--sp-48); }
.dt-dest__car.is-static .dt-car__track { justify-content: center; }
.dt-dest__car.is-static .dt-car__slide { flex: 0 1 clamp(280px, 28.44vw, 546px); }
.dt-dest__card { display: flex; flex-direction: column; gap: var(--sp-24); height: 100%; text-decoration: none; color: var(--sj-gray); }
.dt-dest__img { display: block; aspect-ratio: 546 / 258; background-size: cover; background-position: center; background-color: rgba(67,12,14,.08); transition: filter var(--sj-dur) var(--sj-ease); }
a.dt-dest__card:hover .dt-dest__img, a.dt-dest__card:focus-visible .dt-dest__img { filter: brightness(1.06); }
.dt-dest__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); }
.dt-dest__name { display: inline-flex; align-items: center; padding: 4px 12px; background: var(--sj-rose-nw); color: #fff; font-size: var(--fs-20); font-weight: 500; line-height: 1.2; text-transform: uppercase; }
a.dt-dest__card:hover .dt-dest__name, a.dt-dest__card:focus-visible .dt-dest__name { background: var(--sj-red); }
.dt-dest__desc { font-size: var(--fs-20); font-weight: 300; line-height: 1.2; text-align: justify; color: var(--sj-gray); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Dải ảnh chạy ngang KIỂU CŨ — tạm bỏ khỏi trang từ 04/10/2026, giữ CSS để bật lại
   (template-parts/tour/dest-marquee.php). */
.dt-dest__windows { --win-gap: var(--sp-48); margin-top: 56px; padding-left: var(--sp-48); display: grid; grid-auto-flow: column; grid-auto-columns: clamp(280px, 28.44vw, 546px); gap: var(--win-gap); }
.dt-dest__win { position: relative; height: clamp(200px, 17.7vw, 340px); border-radius: 24px; overflow: hidden; }
.dt-dest__strip { position: absolute; top: 0; bottom: 0; display: flex; left: calc(-1 * var(--i) * (100% + var(--win-gap))); width: calc(800% + 6 * var(--win-gap)); animation: dt-dest-run 60s linear infinite; }
.dt-dest__strip > * { flex: 1 0 0; min-width: 0; background-size: cover; background-position: center; }
.dt-dest__strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes dt-dest-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Rê chuột (hoặc tab vào) thì dừng dải; rời ra chạy tiếp. */
.dt-dest__windows:hover .dt-dest__strip,
.dt-dest__windows:focus-within .dt-dest__strip { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .dt-dest__strip { animation: none; } }

/* ---- Flash lỗi giá ---- */
.dt-flash { background: #fff; color: var(--sj-red); text-align: center; padding: var(--sp-16); font-weight: 500; }

@media (max-width: 1023px) {
	.it { flex-direction: column; }
	.it__rail { flex-direction: row; flex-wrap: wrap; padding: var(--sp-24); }
	.it__spine { display: none; }
	.it__list { padding: var(--sp-24); }
	.dt-body { flex-direction: column; align-items: stretch; padding: var(--sp-24) 20px; }
	.dt-main { flex: 1 1 auto; width: 100%; }
	.dt-side { flex: 1 1 auto; width: 100%; position: static; }
	.dt-side__top { flex-wrap: wrap; }
	.dt-side__top .sj-btn { flex: 1 1 auto; }
	.dt-bar { flex-direction: column; align-items: stretch; margin: calc(var(--dt-bar-overlap) * -1) 20px 0; }
	.dt-bar__sep { width: auto; height: 1px; }
	.dt-bar__cell { width: auto; align-items: flex-start; text-align: left; }
	.dt-bar--no-main .dt-bar__cell { align-items: flex-start; text-align: left; }
	.dt-dest__car { padding-left: 20px; }
	.dt-dest__car.is-static { padding-right: 20px; }
	.dt-tabs { min-width: 0; }
	.dt-tab { padding: var(--sp-16) var(--sp-8); font-size: var(--fs-20); white-space: normal; height: auto; min-height: 64px; }
	.inc { flex-direction: column; padding: var(--sp-24); }
}

@media (max-width: 767px) {
	.dt-car { --per-view: 1; }
	.dt-car__nav { width: 48px; height: 48px; }
	.dt-car__nav--prev { left: var(--sp-8); }
	.dt-car__nav--next { right: var(--sp-8); }
}

/* Ảnh dạng <img> thay ảnh nền (SEO #8 #14, 19/10/2026) — phủ kín ô như background-size: cover cũ. */
.dt-hero__bgs .dt-car__slide { overflow: hidden; }
.dt-car__img, .dt-dest__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.dt-dest__img { position: relative; overflow: hidden; }
/* Ô lịch trình nằm trong flex dọc → % chiều cao của ảnh không bám tỉ lệ khung: neo ảnh tuyệt đối. */
.it__img, .dt-figure { position: relative; overflow: hidden; }
.it__img img, .dt-figure img { position: absolute; inset: 0; }