/* ==========================================================================
   Avory Travel — Landing page tour Châu Âu mùa lễ hội 2026–2027 (index.html)
   Nạp SAU base.css và visa.css — hai file chép từ trang visa, chỉ khác cỡ chữ
   viết calc(Npx * var(--fs)) (desktop ×1,10 — xem README).
   Toàn bộ token (màu, bo góc, bóng, nhịp mục) lấy từ :root của base.css;
   các thành phần có sẵn (.btn, .field, .vform__grid, .merit, .dcard, .ptable,
   .steps, .qa, .finale, .pcard, footer, nút nổi) dùng lại y nguyên.
   File này chỉ thêm những thứ trang này mới có.
   ========================================================================== */

/* Chữ viết tay dòng 1 tiêu đề hero (2026-10-07) — "DVN - Golden Haze"
   (© Golden Haze, phát hành qua fontvn.com; khách gửi file TTF; có đủ dấu tiếng
   Việt). Bản quyền dùng web thương mại: chờ AVORY xác nhận — xem README. */
@font-face {
  font-family: "DVN Golden Haze";
  src: url("assets/fonts/dvn-golden-haze.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   0. Bổ sung cho thành phần dùng chung
   -------------------------------------------------------------------------- */
/* Mép trên mục dừng dưới thanh nav dính. visa.css đã lo #bang-gia, #quy-trinh,
   #lien-he; đây là các mục mới. Phải NHỎ hơn vạch mốc trong JS (nav + 24px). */
#dang-ky,
#chau-au,
#dai-duong,
#visa-dich-vu,
#cam-nang { scroll-margin-top: 80px; }

/* Khung SVG chứa <linearGradient id="gold-grad"> đầu <body>: kích thước 0 vẫn
   là phần tử inline, đứng trong luồng sẽ đẩy cả trang xuống một dòng — tách
   khỏi luồng. */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Icon điện thoại ĐẶC (2026-10-07, khách gửi "phone icon.svg" — thay icon nét
   cũ ở cả 5 chỗ: hotline nav, ghi chú thẻ form, nút "Gọi ngay" cuối trang,
   nút gọi nổi, nút tổng đài footer (ảnh footer-phone.svg)). Hình gốc lưới
   20×20 đã dời sang lưới 24×24 (2..22) để cùng cỡ với icon cũ và để
   #gold-grad trải đúng như các icon khác. Các rule cũ chỉ tô NÉT (stroke) —
   ở đây tắt nét, tô ĐẶC bằng đúng màu nét cũ: vàng gradient (nav, thẻ form,
   chấm trắng trong nút), trắng (nút gọi nổi trên nền vàng). !important vì
   ".btn--accent .btn__dot svg" (độ ưu tiên cao hơn) đặt stroke vàng. */
svg.ico-phone { stroke: none !important; }
.nav__hotline svg.ico-phone,
.booking__notes svg.ico-phone,
.btn__dot svg.ico-phone { fill: url(#gold-grad) var(--gold); }
.float--call svg.ico-phone { fill: var(--white); }

/* Nhãn nhỏ phía trên tiêu đề mục. File nội dung viết hoa sẵn vế đầu —
   "HÀNH TRÌNH TINH HOA - Tour Châu Âu…" — nên tách vế đó ra làm nhãn.
   Cùng công thức chữ với .dcard__flag, chỉ lớn hơn một chút. */
.kicker {
  font-size: calc(12.5px * var(--fs));
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  width: fit-content;
  margin-inline: auto;
  background: var(--gold-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Thanh nav: chữ nhỏ đi ~1px để 6 mục menu (index.html chỉ 5) + hotline + nút
   không trông chật. base.css/visa.css để menu 15px, hotline 15px, nút 14,5px —
   giữ nguyên hai file đó, chỉ ghi đè ở trang này. Bọc trong min-width: 761px:
   dưới mốc đó menu đã ẩn và visa.css có cỡ riêng cho nút (13,5px), để trần
   thì rule này đè mất cỡ mobile. */
@media (min-width: 761px) {
  .nav__menu a { font-size: calc(14px * var(--fs)); letter-spacing: .1px; }
  .nav__hotline { font-size: calc(14px * var(--fs)); }
  .nav__cta { font-size: calc(13.5px * var(--fs)); }
}
/* base.css hạ menu xuống 14px từ 1024px; ở trang này 14px đã là cỡ desktop
   nên hạ tiếp nửa bậc cho dải 961–1024 (menu còn hiện) */
@media (min-width: 761px) and (max-width: 1024px) {
  .nav__menu a { font-size: calc(13.5px * var(--fs)); }
}

/* ---- Footer (2026-10-06, theo mẫu khách "Avory Web Footer new 02.png", đo ở
   1920px) ---- dùng khung + kiểu chung của base.css (.footer__address,
   .footer__social, .footer__hotline, .footer__links, .pay); ở đây chỉ đổi bố cục.

   Logo AVORY chữ V vàng (2026-10-07, khách gửi "Avory Chau Au Logo.svg") bản
   chữ TRẮNG logo-avory-chau-au-light.svg — bản gốc chữ xanh #0c5148 chìm hẳn
   vào nền footer xanh; chữ V vàng giữ nguyên. (Trước: logo "AVORY · TOUR CHÂU
   ÂU" 2026-10-06; trước nữa logo xếp tầng AVORY / TRAVEL.) Logo dài BẰNG nút gọi tổng đài
   (2026-09-29): chung một bề ngang --footer-brand-w — 226px = bề ngang tự nhiên
   của nút (225,4px) làm tròn lên; desktop chữ ×1,10 nút rộng 239,1px → 240px.
   Đổi chữ/cỡ chữ trong nút thì đo lại. */
.footer { --footer-brand-w: 226px; }
@media (min-width: 1025px) {
  .footer { --footer-brand-w: 240px; }
}
.footer__logo--stack { width: var(--footer-brand-w); max-width: 100%; height: auto; }
.footer__hotline { width: var(--footer-brand-w); }

/* Mọi tiêu đề cột cùng 15px × --fs, một dòng (mẫu: cả 4 tiêu đề cùng cỡ; tên
   công ty 16,5px rộng ~347px = đúng bản mẫu). Dưới cột: khe 68px tới vạch ngăn
   (mẫu: đáy nút tổng đài → vạch ≈ 69px). */
.footer h3 { font-size: calc(15px * var(--fs)); white-space: nowrap; }
.footer__cols { padding-bottom: 68px; }
.footer__pay { margin-top: 24px; }

/* ≥1120px: 4 cột RỘNG THEO NỘI DUNG, canh trái, khe ~70px như mẫu (mẫu: cột 2,
   3, 4 bắt đầu ở 753 / 912 / 1177px khi khung bắt đầu ở 336px) — không phải 4 cột
   kéo giãn 1.5fr 1fr 1fr 1.5fr của base.css. Cột 1 rộng theo nội dung dài
   nhất — tên công ty (2026-10-06: "Công ty Cổ phần AVORY TRAVEL", 288px); địa
   chỉ xuống dòng bằng <br> đúng chỗ khách chỉ (trước: địa chỉ không được nới
   cột, tự xuống dòng theo tên công ty dài cũ). Khe co lại khi khung hẹp:
   (100% − tổng 4 cột) / 3, tối thiểu 24px; tổng 4 cột đo được 925px (288 + 94
   + 203 + 340, chữ ×1,10; trước 995px với tên dài). 4 cột cần ≥ 925 + 3 × 24
   = 997px khung — mốc 1120px còn dư; hẹp hơn → 2 × 2 cột (1025–1119px và
   tablet), điện thoại 1 cột (base.css). Đổi chữ cột nào thì đo lại tổng. */
@media (min-width: 1120px) {
  .footer__cols {
    grid-template-columns: repeat(4, max-content);
    column-gap: clamp(24px, calc((100% - 925px) / 3), 70px);
  }
  .footer__pay { grid-template-columns: repeat(3, 108px); }
}
@media (min-width: 1025px) and (max-width: 1119px) {
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
}

/* Dải cuối: vạch ngăn tràn bề ngang, dòng giấy phép + người đại diện (sáng),
   dòng bản quyền (mờ) — canh giữa. Đặt vạch ở khối bọc thay vì ở
   .footer__legal của base.css. */
.footer__bottom {
  padding: 43px 16px 45px;
  border-top: 1px solid var(--white-10);
  text-align: center;
}
.footer__license {
  font-size: calc(13.6px * var(--fs));
  line-height: calc(21px * var(--fs));
  color: rgba(255, 255, 255, .9);
}
.footer__license .nb { white-space: nowrap; }
.footer .footer__legal { margin-top: 18px; padding: 0; border-top: 0; }
/* Điện thoại. (Tên công ty "Công ty Cổ phần AVORY TRAVEL" — từ 2026-10-06 ngắn
   lại — rộng 262px ở 15px, vừa một dòng cả ở màn 320px, nên bỏ luật thu cỡ chữ
   theo bề ngang dành cho tên dài cũ.) */
@media (max-width: 760px) {
  .footer__bottom { padding: 32px 16px 36px; }
}

/* --------------------------------------------------------------------------
   1. Hero — banner tối tràn bề ngang, chữ sáng nằm thẳng trên ảnh
   Ảnh banner (Dinan chạng vạng) phủ kín hero; cụm 3 ảnh polaroid nằm
   giữa-phải, trôi parallax khi cuộn. (Mảng xanh cong góc dưới phải của ảnh
   tham khảo đã bỏ theo yêu cầu, kèm dòng lịch khởi hành trên nó.)
   Lần sửa 21: bỏ lớp phủ kem mờ dần trái → phải; cột chữ đổi sang tông tối
   theo đúng công thức hero index.html (.vhero): tiêu đề trắng, dòng phụ
   --white-80, vế đậm trắng đặc, nút phụ .btn--ghost.
   -------------------------------------------------------------------------- */

/* ---- Lưới bọc hero + dải cam kết + form: ba hàng, KHÔNG chồng nhau ----
   2026-09-29 theo yêu cầu: ảnh banner ngắn lại, chỉ phủ đúng hàng hero (hàng 1);
   dải cam kết .trust (của visa.css) nằm SÁT đáy banner ở hàng 2; thẻ form thành
   một mục riêng ở hàng 3 với khoảng cách mục bình thường. (Trước đó: lưới 5
   hàng auto | --lap | 1fr | 1fr | --lap, thẻ form chồng 112px lên đáy hero và
   đáy ảnh rơi đúng giữa thẻ form.) Vẫn giữ .eintro bọc cả ba vì thẻ form dùng
   chung --form-col với dải ưu đãi ở hero (xem --snap-w). */
.eintro {
  /* Ba bề ngang dùng chung giữa lưới hero và lưới thẻ form, để dải ưu đãi +
     hàng cam kết ở hero kéo tới đúng đường ranh "ảnh | form" của thẻ bên dưới
     (xem --snap-w ở .ehero__copy). Đổi một con số là cả hai nơi đổi theo. */
  --art-col: 440px;    /* cột cụm polaroid ở hero */
  --hero-gap: 48px;    /* khe giữa cột chữ và cột ảnh */
  position: relative;
  isolation: isolate;
  /* chặn tràn ngang (lưới an toàn); chỉ trục ngang để không cắt bóng đổ ở đáy thẻ form */
  overflow-x: clip;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
}
/* Cột form của thẻ đặt tour — hero vẫn dùng (--snap-w) dù thẻ đã dời xuống
   dưới bảng giá (2026-10-06), nên khai báo cho cả hai. */
.eintro,
.booking { --form-col: 620px; }
/* Ảnh đặt tuyệt đối trong vùng lưới hàng 1 (hero): vừa khớp đúng vùng đó, vừa
   không góp kích thước vào hàng.
   <picture> bọc ngoài (để đổi nguồn ở ≤1024px) phải display: contents:
   grid-area chỉ áp cho phần tử tuyệt đối là CON TRỰC TIẾP của lưới — để
   <picture> tạo hộp thì ảnh phủ cả .eintro, tràn xuống hết thẻ form. */
.eintro__pic { display: contents; }
.eintro__bg {
  position: absolute;
  grid-area: 1 / 1 / 2 / 2;
  /* Ảnh phủ TRỌN bề ngang (lần sửa 21), cột chữ nằm thẳng trên ảnh.
     Ảnh (2026-09-29): làng ven hồ dưới núi tuyết, tháp nhà thờ nhọn, nhà
     thuyền gỗ + bóng nước — gốc 6000×4000 (3:2), không cắt. Desktop ảnh "cover"
     theo chiều cao hộp ảnh (khung + 600px, xem khối desktop dưới) nên rộng hơn
     màn (~2270–2380px) — xem sizes trong HTML. Trời sau tiêu đề; tháp nhà thờ
     (x ~30% ảnh) mọc trong khe giữa dòng phụ và dải ưu đãi; dãy nhà sau dải ưu
     đãi / hai nút; mặt hồ lộ giữa hai nút và cụm polaroid. 0% ngang: neo trái để
     tháp đứng ngay bên phải dòng phụ thứ hai (neo phải hơn thì tháp lùi vào dưới
     chữ dòng phụ). */
  /* Kích thước PHẢI ghi rõ. <img> là phần tử thay thế: đặt tuyệt đối với
     width/height: auto thì nó KHÔNG giãn theo left/right/top/bottom mà lấy
     theo tỉ lệ ảnh — bản cũ vì vậy tràn quá mép phải ở 1440px và hụt ở 1920px.
     Ghi 100% × 100% vùng lưới thì ảnh luôn phủ đúng khung hero; object-fit:
     cover lo phần cắt. */
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 12% dọc chỉ có tác dụng ở màn >~1600px (ảnh phóng theo bề ngang, dư chiều
     cao): neo đỉnh (0) thì ở 2560px tháp nhà thờ tụt ra sau dải ưu đãi, dãy
     nhà ra sau thẻ form; lớn hơn ~15% thì ở 1920px đỉnh tháp chạm dòng phụ. */
  object-position: 0% 12%;
}
/* Desktop: hộp ảnh cao hơn khung hero --img-extra rồi clip-path cắt đúng phần
   thừa ở đáy — ảnh phóng to hơn mức "cover" theo khung, dãy nhà + tháp nhà thờ
   bị đẩy xuống dưới cụm chữ. 2026-09-29: 194px (giữ tỉ lệ phóng của banner cao
   1068px cũ; cover thẳng theo khung thì dòng phụ chỉ còn 4,0:1 ở 1100px).
   2026-10-05: dòng phụ mới (chữ khách gửi) + chữ desktop to hơn phủ lên tháp
   nhà thờ / dãy nhà — ở ×1,10, 194px chỉ 2,0–3,1:1 ở 1100–1440px (cần 4,5),
   400px còn 2,5:1 ở 1280px, 500px đạt mọi bề ngang (≥ 7,1:1) nhưng sát vách ở
   1280px (400 → 500 nhảy từ 2,5 lên 7,1). Chọn 600: dòng phụ ≥ 8,8:1 (10% điểm
   ảnh tối nhất) ở 1025 → 2560px. Ảnh rộng tới ~2320px → sizes trong HTML. clip-path cắt theo hộp của chính ảnh (không có transform) nên an toàn;
   không dùng overflow: clip trên .eintro vì sẽ cắt bóng đổ dưới thẻ form. */
@media (min-width: 1025px) {
  .eintro__bg {
    --img-extra: 600px;
    bottom: auto;
    height: calc(100% + var(--img-extra));
    clip-path: inset(0 0 var(--img-extra) 0);
  }
}
/* Lớp phủ trên ảnh banner. (Dải tan 110px ở mép dưới ảnh vào nền trang của lần
   sửa 30 — .eintro::before — đã BỎ theo yêu cầu 2026-09-29: mép dưới ảnh giờ là
   một cạnh gọn, cũng là đáy hero.)
   ::after — lớp trắng mờ dần "soft white gradient 01.svg" (lần sửa 32, file
      khách dựng bằng Illustrator): trắng ở mép trên → trong suốt ở 80% chiều
      cao, nâng nền trời sau cụm chữ tối. Nằm ở lớp riêng (không chung một
      background nhiều lớp) để hạ được opacity — lớp nền CSS không có opacity
      riêng từng lớp. Khách
      thấy trắng quá: opacity 1 → .65 (khách chốt, sau khi thử .4). Đo tương
      phản trên chính điểm ảnh sau từng dòng chữ (ảnh làng ven hồ, chữ hero
      2026-10-05) ở 320–2560px: dòng tiêu đề xanh ≥ 7,7:1 (cần 3), dòng phụ
      ≥ 7,6:1 ở 10% điểm ảnh tối nhất (cần 4,5). Đổi ảnh, đổi chữ hero hay đổi
      --img-extra thì phải đo lại.
      Phải dùng background-size: cover (không phải 100% 100%): SVG có viewBox
      1,95:1 + preserveAspectRatio mặc định (meet) — kéo 100% × 100% thì nó co
      cho vừa bề ngang, dải trắng không bắt đầu từ mép trên. */
.eintro::after {
  content: "";
  position: absolute;
  grid-area: 1 / 1 / 2 / 2;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: url("assets/soft%20white%20gradient%2001.svg") center top / cover no-repeat;
  opacity: .65;
}

.ehero {
  /* Cụm polaroid thò xuống dưới đáy cột ảnh bấy nhiêu; cột chữ (desktop) kéo
     đáy xuống đúng bằng ngần ấy để hai nút bám mép dưới cụm — xem .ehero__copy */
  --snap-drop: 40px;
  /* Desktop (2026-09-29, theo đường kẻ khách vẽ): khoảng trống TRÊN (mép trên
     banner → nét chữ "CHẠM TRỜI ÂU") = khoảng trống DƯỚI (đáy cụm nút + cụm
     polaroid → mép dưới banner) = --hero-pad. Lề trên trừ 8px vì nét chữ hoa
     nằm ~8px dưới mép hộp dòng tiêu đề (Inter: hộp chữ nhô 2px trên hộp dòng,
     chữ hoa thấp hơn đỉnh hộp chữ ~10px ở cỡ 43px). Lề dưới cộng --snap-drop vì
     cụm polaroid (và đáy cột chữ) thò xuống dưới cột ảnh đúng ngần ấy.
     2026-09-29: 192 + 458 (cột ảnh) + 232 − 8 = banner cao 874px, đúng đường kẻ
     khách vẽ. Từ 2026-10-05 chữ desktop ×1,10 + tiêu đề 3 dòng: cột chữ có
     thể cao hơn cột ảnh, banner cao theo cột chữ — 944px ở 1025, 893 ở 1100,
     875px từ ~1200px trở lên (2026-10-06, tiêu đề desktop to hơn ở màn hẹp).
     Tablet/điện thoại: xem responsive. */
  --hero-pad: 192px;
  grid-area: 1 / 1 / 2 / 2;
  position: relative;
  z-index: 2;
  padding: calc(var(--hero-pad) - 8px) 0 calc(var(--hero-pad) + var(--snap-drop));
  overflow: hidden;
}

/* Đường bay nét đứt, chạy dọc lề trái. Chỉ hiện khi lề đủ rộng (≥1400px):
   đặt trong vùng chữ thì nó cắt ngang dòng cam kết và hai nút. */
.ehero__route {
  display: none;
  position: absolute;
  left: 14px;
  top: 150px;
  width: 62px;
  height: auto;
  fill: none;
  stroke: var(--green);
  stroke-opacity: .3;
  stroke-width: 1.6;
  stroke-dasharray: 5 7;
  stroke-linecap: round;
}
.ehero__route .plane {
  fill: var(--green);
  fill-opacity: .45;
  stroke: none;
}
@media (min-width: 1400px) {
  .ehero__route { display: block; }
}

/* Cột ảnh 440px (cụm polaroid rộng 420px, không còn huy hiệu giá) để cột chữ
   đủ rộng cho dòng 2 tiêu đề — xem .ehero__title. */
.ehero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--art-col));
  gap: var(--hero-gap);
  align-items: center;
}
/* Cột chữ là container để cỡ tiêu đề tính theo chính bề ngang của nó */
.ehero__copy { container-type: inline-size; }

/* Desktop: cột chữ chia hai cụm và "bám" vào cụm polaroid (lần sửa 8).
   - Cột chữ giãn hết chiều cao hàng (stretch) rồi kéo đáy xuống thêm
     --snap-drop, nên đáy cột = đáy cụm polaroid (cụm cũng thò xuống đúng
     --snap-drop dưới cột ảnh).
   - Cụm 1 (tiêu đề + mô tả) đứng ở ĐỈNH cột chữ, ngay dưới lề trên hero.
   - Cụm 2 (ưu đãi → nút) đẩy xuống đáy bằng margin-top: auto → mép dưới hai
     nút thẳng hàng mép dưới ảnh Iceland. Khoảng dư dồn vào khe giữa mô tả và
     dải ưu đãi (~130px ở 1440px).
   (2026-09-29: bỏ cách canh giữa dọc cụm 1 của lần sửa 24 — banner ngắn lại,
   khách muốn lề trên = lề dưới của cả cụm, xem --hero-pad ở .ehero.)
   Từ 1024px xuống hero xếp dọc, không có cột ảnh cạnh bên để bám. */
@media (min-width: 1025px) {
  .ehero__grid { align-items: stretch; }
  .ehero__copy {
    display: flex;
    flex-direction: column;
    margin-bottom: calc(-1 * var(--snap-drop));
  }
  /* thêm .ehero__copy phía trước: khối này nằm TRÊN rule gốc .ehero__offer
     { margin-top: 36px } trong file, cùng độ ưu tiên thì rule gốc thắng */
  .ehero__copy .ehero__offer { margin-top: auto; }
  /* Khe tối thiểu mô tả → dải ưu đãi (2026-10-05): chữ to hơn + tiêu đề 3 dòng
     làm cột chữ đầy, margin-top: auto co về 0 → dải ưu đãi dính sát mô tả.
     Đặt sàn 56px ở mô tả: cột chữ cao thêm, hero (và ảnh) cao theo. */
  .ehero__copy .ehero__sub { margin-bottom: 56px; }

  /* Dải ưu đãi + hàng cam kết kéo tới ĐÚNG đường ranh "ảnh | form" của thẻ
     đặt tour ngay bên dưới (lần sửa 10). Cột chữ và thẻ form cùng bắt đầu ở
     mép trái container, nên bề ngang cần = container − cột form
     = cột chữ + cột ảnh + khe − cột form. 100% ở đây là bề ngang cột chữ.
     Ở 1440px: 760 + 440 + 48 − 620 = 628px (trước: 560px / theo nội dung). */
  .ehero__copy { --snap-w: calc(100% + var(--art-col) + var(--hero-gap) - var(--form-col)); }
  /* "Đường kẻ xanh" (2026-10-06, khách vẽ trên ảnh chụp 2560px) = mép phải dòng
     1 tiêu đề "HÀNH TRÌNH ĐỘC BẢN,". Dòng này rộng đúng 11,666 × cỡ chữ (đo ở
     1025 → 2560px, không đổi) nên tính được bằng CSS: --title-fs là cỡ tiêu đề
     desktop (xem .ehero__title), --title-line = bề rộng dòng 1. Dải ưu đãi và
     hàng nút rộng đúng bằng ấy → mép phải cả hai thẳng mép dấu phẩy tiêu đề.
     (cqi trong biến tự tính theo phần tử dùng nó — con của .ehero__copy, nên
     100cqi luôn là bề ngang cột chữ.) Trước đó dải ưu đãi kéo tới đường ranh
     "ảnh | form" của thẻ đặt tour (--snap-w, nay chỉ còn hàng cam kết đang ẩn). */
  .ehero__copy {
    --title-fs: min(100cqi / 12.2, calc(43.2px * var(--fs)));
    --title-line: calc(var(--title-fs) * 11.666);
  }
  .ehero__copy .ehero__offer { max-width: none; width: var(--title-line); }
  /* Ba mục trải đều hết bề ngang đó: khoảng hở giữa các mục tự giãn
     (space-between) để mục cuối chạm đúng đường ranh. Đổi sang flex + wrap:
     màn hẹp không đủ chỗ cho 3 mục (hở tối thiểu 24px) thì mục thứ ba tự
     xuống hàng — không cần mốc responsive riêng như bản grid trước. */
  .ehero__copy .ehero__perks {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 24px;
    width: var(--snap-w);
  }
}

/* ---- cột chữ ---- */
/* Cùng công thức với .vhero__title của index.html: 800, viết hoa bằng CSS
   (markup giữ chữ thường để trình đọc màn hình đọc thành câu), chữ trắng trên
   ảnh tối (lần sửa 21; trước là xanh trên nền kem). Nhãn "đã mở bán" phía
   trên đã bỏ (nội dung gộp vào dòng mô tả) nên tiêu đề là phần tử đầu.
   Bóng chữ rất nhẹ, không thấy thành quầng: chỉ để mép chữ tách khỏi mấy
   đốm đèn vàng của ảnh — tương phản đo KHÔNG tính phần bóng này. */
/* Tiêu đề 2026-10-05: "HÀNH TRÌNH ĐỘC BẢN," / "CHÂU ÂU MÙA LỄ HỘI 2026–2027".
   Cỡ chữ tính theo bề ngang cột chữ (đơn vị cqi của container .ehero__copy):
   dòng 2 rộng 16,63 × cỡ chữ, chia 17,6 (chừa ~5%) thì dòng 2 vừa một dòng,
   trần 48px — đó là cỡ ở tablet (761–1024px). Desktop nhân --fs 1,10 như mọi
   chữ khác (~47,5px ở 1440px, cột 760px) nên dòng 2 KHÔNG còn vừa một dòng: cho
   xuống dòng thành "CHÂU ÂU MÙA LỄ HỘI" / "2026–2027" (năm bọc .nb để không
   bẻ ở gạch nối) — tiêu đề 3 dòng, hero cao thêm tương ứng (xem .ehero__art).
   letter-spacing về 0: tracking .012em cũ cộng thêm ~16px cho dòng 2. */
.ehero__title {
  margin-top: 0;
  font-size: calc(var(--fs) * clamp(28px, 100cqi / 17.6, 48px));
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0;
  /* Lần sửa 30 (ảnh La Haye, trời sáng): dòng 1 "CHẠM TRỜI ÂU," màu xanh logo
     (--green, đúng màu chữ AVORY trên logo); dòng 2 giữ cam .brand. Bỏ bóng
     chữ tối của bản ảnh đêm — trên trời sáng nó thành quầng bẩn. */
  color: var(--green);
}
/* Tiêu đề MỚI (2026-10-07, theo ảnh mẫu khách gửi): 3 dòng
     1. "Hành trình độc bản" — chữ viết tay DVN Golden Haze, xanh logo;
     2. "CHÂU ÂU MÙA LỄ HỘI" — vàng gradient, chữ nhỏ lại + giãn khoảng chữ;
     3. vạch mảnh trải ngang + "2026-2027" xanh đậm canh phải.
   Khách dặn: dòng 2 GIỮ ĐÚNG bề ngang cũ của "CHÂU ÂU MÙA LỄ HỘI" (Inter 800
   viết hoa = 10,72 × cỡ chữ tiêu đề cũ) → font-size của h1 (các mốc ở trên
   và dưới, giữ nguyên) giờ chỉ làm THƯỚC: h1 rộng min(100%, 10,72em) và là
   container, mọi dòng tính theo 100cqi = bề ngang dòng 2 ("Wm"). Tỉ lệ đo
   trên ảnh mẫu (Wm = 622px): chữ hoa dòng 2 cao 37px → cỡ = Wm / 12,2;
   dòng 1 rộng 0,603 Wm (DVN Golden Haze rộng 6,355 em cho câu này → cỡ =
   0,0949 Wm); năm cao 0,57 × chữ dòng 2; khe dòng 1 → 2 và 2 → 3 ~0,034 Wm.
   Khoảng chữ dòng 2: Inter 600 rộng 10,706 em → (12,2 − 10,706) / 17 khe
   = 0,088em thì vừa đúng Wm (nét cuối chạm mép phải). */
.ehero__title {
  width: min(100%, 10.72em);
  container-type: inline-size;
  line-height: 1;
}
.ehero__script {
  display: block;
  font-family: "DVN Golden Haze", "Dancing Script", cursive;
  font-size: calc(100cqi * .0949);
  font-weight: 400;
  line-height: 1.25;
  text-transform: none;
  white-space: nowrap;
  color: var(--green);
  /* font chỉ có một độ đậm (Regular); viền chữ cùng màu làm nét đậm lên một
     chút — 0,25px cố định (2026-10-07, khách; trước .035em ≈ 1,6–1,9px trông
     quá dày) */
  -webkit-text-stroke: .25px currentColor;
}
/* chữ vàng gradient theo chữ; đệm trên cho dấu chồng chữ HOA (Ễ, Ộ — xem
   .brand ở base.css), margin âm bù lại */
.ehero__main {
  display: block;
  margin-top: calc(100cqi * -.013 - .3em);
  padding-top: .3em;
  font-size: calc(100cqi / 12.2);
  /* 900 (2026-10-07, khách: đậm như file mẫu "Hero Title.svg" — chữ mẫu là
     font hình học nét rất đậm; Inter 900 là bản gần nhất). Inter gần như
     không rộng thêm khi đậm lên → khoảng chữ chỉ đổi rất ít. */
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .0865em;
  white-space: nowrap;
  background: var(--gold-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.ehero__year {
  display: flex;
  align-items: center;
  gap: .6em;
  margin-top: calc(100cqi * .015);
  font-size: calc(100cqi / 12.2 * .57);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--green);
}
.ehero__year::before {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .45;
}
@media (min-width: 1025px) {
  /* Desktop 3 dòng: hệ số 17,6 ở trên tính cho dòng "CHÂU ÂU MÙA LỄ HỘI
     2026–2027" vừa một dòng — không còn đúng khi tiêu đề đã xuống 3 dòng, làm
     chữ nhỏ hẳn ở 1025–1200px (cột chữ ~505–600px → chỉ 31–37px, 2026-10-06
     khách thấy quá nhỏ). Dòng dài nhất giờ là "HÀNH TRÌNH ĐỘC BẢN," = 11,66 ×
     cỡ chữ → chia 12,2 (chừa ~4,5%). Trần giữ đúng cỡ đã duyệt ở ≥1280px
     (43,2px × --fs ≈ 47,5px) nên chỉ màn hẹp to lên: ~41–45px.
     2026-10-07 (sau): cả khối tiêu đề phóng to cho mép phải chạm "đường kẻ
     xanh" — rộng đúng --title-line (= 11,666em, mép phải dải ưu đãi và hàng
     nút) thay vì 10,72em; mọi dòng tính theo 100cqi nên to lên đều. */
  .ehero__title { font-size: var(--title-fs); width: var(--title-line); }
}
/* Nhịp dọc cột chữ (lần sửa 6 — nới rộng theo yêu cầu): tiêu đề → mô tả 28,
   mô tả → ưu đãi 36, ưu đãi → cam kết 38, cam kết → nút 48. Khoảng cách tăng
   dần xuống dưới để mắt đọc thành ba cụm: lời chào · thông tin · hành động. */
.ehero__sub {
  margin-top: 28px;
  max-width: 540px;
  font-size: calc(17px * var(--fs));
  line-height: 1.75;
  /* Lần sửa 30: chữ tối trên trời sáng — --ink cho cả dòng, vế đầu in đậm */
  color: var(--ink);
}
.ehero__sub strong { font-weight: 700; color: var(--ink); }
/* 2026-10-06: câu dẫn 2 dòng là một khối dòng sít (1,5 thay 1,75), dòng điểm
   đến in đậm thành đoạn riêng cách 12px — trước là 3 dòng cách đều nhau. */
.ehero__lede { display: block; line-height: 1.5; }
.ehero__sub > strong { display: block; margin-top: 12px; }
/* Dấu • ngăn hai vế của câu subheadline, tô cam cho tách bạch; &nbsp; trước
   nó giữ dấu ở cuối dòng 1. Vế sau không cho bẻ giữa chừng — xuống dòng thì
   xuống cả cụm, tránh "Đã mở / bán tour…". */
.ehero__dot { margin: 0 4px; font-weight: 700; background: var(--gold-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent; }
.ehero__subNote { white-space: nowrap; }
/* màn ≤360px: cụm vế sau (~300px ở 15px) rộng hơn cột chữ (288px ở 320), phải cho bẻ */
@media (max-width: 360px) {
  .ehero__subNote { white-space: normal; }
}

/* Dải ưu đãi — 2026-10-05 khách chốt nội dung ("Giảm ngay 5 triệu cho nhóm từ
   4 khách trở lên") nên viền đứt cam (dấu hiệu chỗ chờ nội dung) đổi thành
   viền liền cam nhạt.
   Trên ảnh tối (lần sửa 21): nền kính mờ tối thay cho nền kem #fff7f4 — nền
   kem là một mảng sáng chói giữa ảnh đêm. Làm mờ + phủ tối che hẳn mấy đốm
   đèn phía sau nên chữ nhỏ 13,8px vẫn đọc rõ; trình duyệt không có
   backdrop-filter thì vẫn còn lớp tối.
   Phủ tối 60% (trước 50%, lần sửa 23): ẩn hàng cam kết thì dải này tụt xuống
   ~80px, nằm đúng dải quán đèn vàng — nhãn cam chỉ còn 4,50:1 ở 1440px (chưa
   tính làm mờ). 60% → 4,92 ở 1440, 4,99 ở 1025.
   Lần sửa 31 (khách thấy hộp tối quá): đổi sang KÍNH MỜ SÁNG — nền trắng mờ
   + làm mờ phía sau, hợp với ảnh ngày nắng và cụm chữ tối. Viền đứt cam vẫn
   giữ (dấu hiệu chỗ chờ nội dung). Nhãn "Ưu đãi đặt sớm" đổi sang xanh logo:
   chữ cam trên nền sáng không thể đạt 4,5:1 (cam #f37857 tối đa 2,95:1 ngay cả
   trên nền trắng tuyệt đối, cam đậm #e05f3d ~3,3–3,8) — màu cam vẫn còn ở
   icon quà và viền đứt. (Bản tối trước: kính .60 → .80 → .85 để nhãn cam đạt.) */
.ehero__offer {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 560px;
  margin-top: 36px;
  padding: 11px 16px;
  border: 1px solid rgba(189, 132, 80, .5);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  font-size: calc(13.8px * var(--fs));
  line-height: 1.5;
  color: var(--text-medium);
}
.ehero__offer svg {
  width: 22px; height: 22px;
  flex: none;
  fill: none;
  stroke: url(#gold-grad) var(--gold);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ehero__offer b { flex: none; font-weight: 700; color: var(--green); }
.ehero__offerSep { width: 1px; align-self: stretch; flex: none; background: rgba(13, 81, 72, .18); }
/* Câu ưu đãi (2026-10-06): khối câu đứng giữa khoảng từ vạch ngăn mảnh tới mép
   phải hộp (margin auto hai bên chia đều chỗ trống), chữ trong khối CANH TRÁI —
   khách: giữ vị trí, đừng canh giữa từng dòng. Câu dài phải xuống 2 dòng thì
   khối chiếm hết khoảng, dòng 2 bắt đầu thẳng mép trái dòng 1. Đệm phải hộp
   12px (trái 16px) = khe 12px bên vạch ngăn → hai bên câu hở đều nhau. */
.ehero__offer { padding-right: 12px; }
.ehero__offer > span:last-child { flex: 0 1 auto; margin-inline: auto; text-align: left; }
/* "5 triệu" đậm, cam đậm (#e05f3d) — cam thương hiệu #f37857 nhạt quá trên nền
   kính trắng. Cam đậm trên nền này ~3,4:1: đủ làm điểm nhấn, chưa đạt 4,5 cho
   chữ nhỏ — phần còn lại của câu vẫn là chữ xám đậm. */
.ehero__offerAmt { font-weight: 800; background: var(--gold-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent; white-space: nowrap; }
/* Icon quà "thở" (phồng nhẹ 1 → 1,14) + cả hộp toả sáng cam nhẹ theo vòng
   lặp. Hai nhịp lệch nhau (2,4s / 3,2s) cho bớt máy móc. Tắt khi
   prefers-reduced-motion. */
@keyframes giftBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.14); }
}
@keyframes offerGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(219, 164, 104, 0); }
  50%      { box-shadow: 0 0 22px 2px rgba(219, 164, 104, .45); }
}
.ehero__offer { animation: offerGlow 3.2s ease-in-out infinite; }
.ehero__offer svg { transform-origin: 50% 55%; animation: giftBreathe 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .ehero__offer, .ehero__offer svg { animation: none; }
}

/* Ba mục đo được 209 + 176 + 137 = 522px, cột chữ 592px ở khổ 1280 → khoảng
   hở tối đa ~35px. 32px + nowrap: nới hơn bản cũ (30px) mà không mục nào bị
   bẻ dòng. Cột hẹp hơn (1201–1290px, còn 498px) thì về 2 cột — xem responsive. */
/* Lần sửa 22: bỏ nền kính mờ của lần sửa 21 theo yêu cầu, chữ nằm thẳng trên
   ảnh; khoảng cách với dải ưu đãi trả về 38px như nhịp lần sửa 6 (12px chỉ
   hợp khi hai mảng cùng là hộp kính). Hàng này nằm đúng dải quán đèn vàng ven
   sông của ảnh (ở 1440px ảnh chỉ xê dịch ngang được 230px, dời kiểu gì dải đèn
   vẫn nằm sau hàng này) nên có bóng chữ hai lớp đậm hơn tiêu đề — xem li.
   Lần sửa 23: markup TẠM ẨN (bọc chú thích trong chau-au.html), CSS để nguyên
   cho lúc hiện lại. */
.ehero__perks {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: start;
  gap: 18px 32px;
  margin-top: 38px;
  white-space: nowrap;
}
.ehero__perks li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: calc(13.5px * var(--fs));
  line-height: 1.45;
  color: var(--white-80);
  /* lớp sát (3px) viền quanh nét chữ nhỏ cho khỏi nhoè vào đốm đèn, lớp rộng
     (14px) làm dịu nền quanh cả cụm chữ. Tương phản đo KHÔNG tính bóng này. */
  text-shadow: 0 1px 3px rgba(4, 14, 20, .7), 0 1px 14px rgba(4, 14, 20, .55);
}
.ehero__perks b {
  display: block;
  font-size: calc(14px * var(--fs));
  font-weight: 700;
  color: var(--white);
}
/* Vòng tròn viền, không nền (lần sửa 18 — trước là đĩa bạc hà đặc như
   .merit__ico). Viền nằm trong 42px nhờ box-sizing: border-box của base.css
   nên cỡ vòng và vị trí icon không đổi.
   Lần sửa 22: vòng + nét icon trắng đặc (trước cam — cam lẫn vào dãy đèn
   vàng phía sau). Bóng đổ nhẹ theo đúng hình vòng/nét để tách khỏi đốm đèn. */
.ehero__perkIco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex: none;
  border: 1.5px solid var(--white);
  border-radius: 50%;
  background: none;
  filter: drop-shadow(0 1px 3px rgba(4, 14, 20, .6));
}
.ehero__perkIco svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: var(--white);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ehero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 48px;
}
/* Nút phụ "Xem bảng giá" (2026-09-29, trước là "Nhận lịch trình & báo giá" nền
   trắng chữ xanh): VIỀN TRẮNG + CHỮ TRẮNG trên một lớp nền tối mờ (kính tối)
   để chữ trắng luôn đọc được dù phía sau là nhà sáng, mặt hồ hay trời (tablet/
   điện thoại nút nằm trên núi tuyết sáng) — xem số đo trong README. Chấm tròn
   đảo màu như nút hotline: chấm trắng, icon xanh logo. Đệm 12/12/12/26 thay vì
   13/13/13/26 của .btn--lg: viền 1px mỗi phía, bớt 1px đệm để hai nút cao
   bằng nhau đúng 58px. */
.ehero__cta .btn--ghost {
  padding: 12px 12px 12px 26px;
  border: 1px solid var(--white);
  background: rgba(8, 24, 28, .55);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--white);
}
.ehero__cta .btn--ghost:hover { background: rgba(8, 24, 28, .7); }
.ehero__cta .btn--ghost .btn__dot svg { stroke: var(--green); }
/* Desktop (2026-10-06): hàng nút rộng đúng --title-line → nút trái ở mép trái,
   nút phải chạm "đường kẻ xanh". Khe giữa hai nút GIỮ 14px như cũ (khách thấy
   khe giãn 60–75px xa quá); phần dư chia đều cho hai nút (flex-grow 1, nội dung
   canh giữa → đệm hai bên mỗi nút cùng tăng): ở ≥1280px mỗi nút rộng thêm
   ~30px (đệm mỗi bên +15). Hai nút 252 + 228 = 480px; dưới
   ~1080px dòng tiêu đề hẹp hơn 480 + khe (469px ở 1025) nên thu nút một chút:
   đệm trái 26 → 16px, chấm tròn 32 → 28px (đệm dọc +2px giữ nút cao 58px), chữ
   15,5 → 15px × --fs. */
@media (min-width: 1025px) {
  .ehero__copy .ehero__cta {
    width: var(--title-line);
    flex-wrap: nowrap;
    gap: 14px;
  }
  .ehero__copy .ehero__cta .btn { flex: 1 1 auto; justify-content: center; }
}
@media (min-width: 1025px) and (max-width: 1079px) {
  .ehero__cta .btn { padding: 15px 15px 15px 16px; font-size: calc(15px * var(--fs)); }
  .ehero__cta .btn--ghost { padding: 14px 14px 14px 16px; }
  .ehero__cta .btn__dot { width: 28px; height: 28px; }
}

/* ---- cột phải: huy hiệu giá + cụm polaroid, nằm trên ảnh banner ---- */
.ehero__art {
  position: relative;
  height: 458px;   /* desktop — xem --hero-pad ở .ehero; tablet/điện thoại ghi đè */
}
/* Desktop: chữ to hơn (2026-10-05) có thể làm cột chữ cao hơn 458 + --snap-drop → cột
   ảnh giãn theo hàng lưới (stretch) thay vì đứng cao cố định, để cụm polaroid
   (neo đáy cột ảnh) vẫn thẳng đáy hai nút; 458px là mức tối thiểu. */
@media (min-width: 1025px) {
  .ehero__art { height: auto; min-height: 458px; }
}
/* Cụm polaroid to ×1,5 ở màn rộng (2026-10-06) mà KHÔNG lấn chữ.
   Cụm neo mép phải cột ảnh (cách 20px như bản cũ) và phóng từ góc dưới-phải,
   nên to ra thì lấn dần sang TRÁI. Bề ngang cho phép = từ "đường kẻ xanh" (mép
   phải dòng 1 tiêu đề, cũng là mép phải dải ưu đãi + hàng nút) + 40px tới mép
   phải: --snap-fw = min(630px = 420 × 1,5, 100cqi − 60px − dòng 1 tiêu đề),
   100cqi = bề ngang lưới hero (.ehero__grid là container ở desktop).
   Tỉ lệ = --snap-fw ÷ 420px, viết bằng tan(atan2(a, b)) = a / b — cách chia hai
   độ dài ra số không đơn vị chạy được trên mọi trình duyệt hiện hành (CSS chưa
   cho chia thẳng). Trình duyệt quá cũ không hiểu → scale về mặc định (×1).
   Kết quả: ×1,5 từ ~1300px trở lên (1440: còn hở 44px tới chữ), ×1,47 ở 1280,
   ~×1,07–1,08 ở 1025–1100 (cột chữ gần như chiếm hết bề ngang). */
@media (min-width: 1025px) {
  .ehero__grid { container-type: inline-size; }
  /* .ehero__art phía trước: khối này nằm TRÊN rule gốc .ehero__snaps (left: 0,
     transform-origin góc trái) trong file — cùng độ ưu tiên thì rule gốc thắng. */
  .ehero__art .ehero__snaps {
    --snap-tl: calc(11.666 * min((100cqi - var(--art-col) - var(--hero-gap)) / 12.2, 43.2px * var(--fs)));
    --snap-fw: min(630px, 100cqi - 60px - var(--snap-tl));
    left: auto;
    right: 20px;
    transform-origin: 100% 100%;
    scale: tan(atan2(var(--snap-fw), 420px));
  }
}

/* Cụm 3 ảnh polaroid, xếp đúng như ảnh tham khảo (đo trên bản 1346px):
   cụm bắt đầu ở ~52% bề ngang hero, đáy gần chạm mép thẻ form.
   (Tên NZ / Úc dưới đây là tên ô — class .snap--nz / .snap--au giữ nguyên; từ
   2026-10-05 ô NZ hiện ảnh Pháp, ô Úc hiện ảnh Đức.)
     New Zealand — sau cùng, lệch trái-trên, ảnh ngang 4:3, nghiêng −4°
     Úc          — giữa, bên phải, to nhất, ảnh gần vuông, nghiêng +4°
     Iceland     — trước nhất, dưới-trái, ảnh ngang 16:10, nghiêng +3°,
                   đè lên đáy ảnh NZ và mép trái ảnh Úc
   Toạ độ tuyệt đối trong một khung 420 × 340px; màn nhỏ thu cả khung bằng
   scale() thay vì tính lại từng ảnh. */
.ehero__snaps {
  position: absolute;
  left: 0;
  bottom: calc(-1 * var(--snap-drop));
  width: 420px;
  height: 340px;
  transform-origin: 0 100%;
}
.snap {
  position: absolute;
  margin: 0;
  padding: 8px 8px 0;
  border-radius: 3px;
  background: var(--white);
  box-shadow: 0 18px 30px -16px rgba(10, 44, 39, .55), 0 2px 6px rgba(0, 0, 0, .06);
  /* Parallax: script cuối chau-au.html ghi --plx (0 → 1, tiến độ cuộn qua
     hero) lên .ehero__snaps; mỗi ảnh nhân với --depth riêng. Dùng thuộc tính
     `translate` riêng (không phải transform) nên cộng dồn được với góc nghiêng
     và hiệu ứng rê chuột đang nằm ở `transform`. Chuyển tiếp .3s cho ảnh trôi
     theo có độ trễ nhẹ — cảm giác "bồng bềnh" thay vì dính cứng vào thanh cuộn. */
  translate: 0 calc(var(--plx, 0) * var(--depth, 0px));
  transition: transform .45s var(--ease-back), translate .3s var(--ease-out);
  will-change: translate;
}
/* height: auto bắt buộc — thuộc tính height="…" trên <img> là chiều cao cứng,
   thắng aspect-ratio và kéo ảnh dài ra tới 619px. */
.snap img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 2px;
}
/* NZ nằm cao hơn 40px so với bản trước (top 0 → −40): ở top 0, ảnh Iceland
   (top 138) đè lên 30px đáy thẻ NZ — đúng dải chú thích, chữ "New Zealand"
   bị che mất. Nay đáy thẻ NZ ≈ 132px, Iceland chỉ chạm góc dưới trái, chú
   thích lộ trọn. Úc dời lên theo (30 → 0) để giữ độ lệch bậc thang với NZ
   như ảnh tham khảo (Úc thấp hơn NZ ~40px). Parallax còn kéo NZ trôi lên
   nhanh hơn Iceland, nên khi cuộn chú thích càng lộ thêm, không bị che lại. */
.snap--nz { left: 62px; top: -40px; width: 176px; z-index: 1; transform: rotate(-4deg); }
.snap--nz img { aspect-ratio: 4 / 3; }
.snap--au { left: 226px; top: 0; width: 192px; z-index: 2; transform: rotate(4deg); }
.snap--au img { aspect-ratio: 1 / 1.06; object-position: 50% 60%; }
.snap--is { left: 0; top: 138px; width: 248px; z-index: 3; transform: rotate(3deg); }
.snap--is img { aspect-ratio: 16 / 10; }

/* Độ sâu parallax (quãng trôi lên khi cuộn hết hero). Ba mức khác nhau nên
   cụm tách lớp khi cuộn: Úc trôi nhanh nhất, rồi New Zealand, Iceland chậm
   nhất. Iceland đứng trước và đè lên đáy ảnh NZ — để Iceland trôi nhanh hơn
   NZ thì nó sẽ phủ kín nhãn "New Zealand"; chậm hơn thì cụm xoè ra, lộ thêm. */
.snap--nz { --depth: -80px; }
.snap--au { --depth: -130px; }
.snap--is { --depth: -45px; }
/* Chú thích viết tay như ảnh tham khảo — Dancing Script (nạp cùng request
   Google Fonts với Inter, có bộ ký tự tiếng Việt nên đổi chú thích sang tên
   có dấu vẫn hiển thị đúng). Hơi nghiêng ngược chiều thẻ cho giống chữ ghi
   vội bằng bút lên ảnh. */
.snap figcaption {
  padding: 7px 0 9px;
  font-family: "Dancing Script", "Segoe Script", cursive;
  font-size: calc(21px * var(--fs));
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: var(--green);
  transform: rotate(-2deg);
}

/* --------------------------------------------------------------------------
   2. Form tư vấn nhanh — mục riêng ngay dưới banner hero
   Hai vùng: ảnh + lời mời | form. Ban đầu dựng ba vùng như ảnh tham khảo
   (ảnh | lời mời | form) nhưng form cao 547px nên cột lời mời hở một mảng
   trắng ~250px giữa tiêu đề và dòng bảo mật. Gộp chữ lên ảnh thì cột trái
   kín, lại cùng công thức với hero của index.html (ảnh + lớp phủ xanh + chữ
   trắng). Các ô nhập dùng lại .vform__grid + .field của index.html.
   -------------------------------------------------------------------------- */
/* Dải cam kết (.trust — nguyên kiểu visa.css: băng trắng, 4 mục icon nét cam,
   vạch ngăn) nằm hàng 2, sát đáy banner, khoảng cách 0 (2026-09-29). */
.eintro > .trust { grid-area: 2 / 1 / 3 / 2; position: relative; z-index: 3; }
.trust__list .nb { white-space: nowrap; }
/* Desktop (≥1025px): 4 mục KHÔNG chia 4 cột đều nữa (2026-10-06, khách: khoảng
   cách giữa các mục phải đều nhau). Cột đều thì nhãn ngắn ("Tư vấn 1:1", 95px)
   hở hai bên nhiều hơn hẳn nhãn dài ("Hỗ trợ xuyên hành trình", 226px). Giờ
   mỗi mục rộng theo nội dung (flex-basis auto) rồi chia ĐỀU phần dư cho cả 4
   (flex-grow 1), nội dung canh giữa mục → khoảng hở giữa hai nhãn liền nhau
   bằng nhau ở mọi cặp, vạch ngăn (viền trái của mục, khe 0) nằm đúng giữa
   khoảng hở; hai mép ngoài hở nửa khoảng. Đệm 12px hai bên để chữ không chạm
   vạch khi khung chật. */
@media (min-width: 1025px) {
  .eintro > .trust .trust__list { display: flex; gap: 0; }
  .eintro > .trust .trust__list li { flex: 1 1 auto; padding-inline: 12px; }
}
/* 1025–1199px: icon lên trên chữ. Khoảng giữa hai nhãn = (bề ngang khung −
   tổng nội dung) / 4. Icon cạnh chữ thì nội dung 850px (nhãn 203 + 150 + 95 +
   226, mỗi icon 30 + khe 14) — ở 1025px chỉ còn 32px giữa hai nhãn, chật;
   icon trên chữ thì nội dung 674px → 76px. Từ 1200px icon cạnh chữ vẫn được
   75px (1440px+: 99px). Đổi nhãn thì đo lại. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .eintro > .trust .trust__list li { flex-direction: column; gap: 8px; text-align: center; }
}

/* Thẻ form: mục riêng ngay dưới bảng giá (2026-10-06; trước là hàng 3 của
   lưới .eintro, ngay dưới dải cam kết). Nhịp mục chung --section-gap như mọi
   mục khác; mục Quy trình sau nó tự có margin-top --section-gap. */
.booking { padding-top: var(--section-gap); }
.booking__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--form-col));
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-float);
}
.booking__intro {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px 40px 38px;
  overflow: hidden;
  /* nền dự phòng khi ảnh chưa tải — cùng màu xám đậm với lớp phủ (lần sửa 33) */
  background: #1f2126;
  color: var(--white);
}
/* Ảnh (2026-09-28, khách gửi): đôi bạn trẻ xem bản đồ trên phố, booking-couple.jpg
   = cả ảnh gốc 2000×1335 LẬT NGANG (theo yêu cầu: mặt hai người hướng sang phải,
   về phía form) rồi thu còn 1600×1068. Lật ngang nên bản đồ trên tay cũng bị
   ngược — phần lớn nằm dưới lớp tối + khối chữ ở đáy.
   Desktop khung hẹp hơn ảnh (628×552 ở 1440px) → "cover" theo chiều cao, dư
   hai bên: 29% ngang đặt cụm hai khuôn mặt (x ~45% ảnh) vào giữa khung; cằm cô
   gái ở ~282px, ngay trên tiêu đề (~296px). Mốc dọc không tác dụng ở desktop. */
.booking__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 29% 50%;
}
/* Lớp tối chỉ ở ĐÁY, sau khối chữ (lần sửa 34, khách: "đừng làm tối ảnh quá"):
   trong suốt hoàn toàn tới 40% chiều cao — hai khuôn mặt trong ảnh giữ
   nguyên độ sáng — rồi đậm nhanh sau khối chữ (tiêu đề bắt đầu ở 54–67% chiều
   cao khung tuỳ bề ngang). Màu xám đậm trung tính 24 26 30 (lần sửa 33; trước
   là xanh đậm). Bản lần 33 đậm dần từ đỉnh (.08 → .50 ở 42%), mặt cô đã bị phủ
   ~50%. */
.booking__intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(24, 26, 30, 0) 0%,
    rgba(24, 26, 30, 0) 40%,
    rgba(24, 26, 30, .6) 56%,
    rgba(24, 26, 30, .88) 72%,
    rgba(24, 26, 30, .94) 100%);
}
.booking__title {
  font-size: calc(28px * var(--fs));
  font-weight: 800;
  line-height: 1.25;
  color: var(--white);
}
.booking__sub {
  margin-top: 12px;
  font-size: calc(15.5px * var(--fs));
  line-height: 1.7;
  color: var(--white-80);
}
.booking__notes {
  display: grid;
  gap: 12px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--white-20);
}
.booking__notes li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: calc(13.8px * var(--fs));
  color: var(--white-80);
}
.booking__notes svg {
  width: 18px; height: 18px;
  flex: none;
  fill: none;
  stroke: url(#gold-grad) var(--gold);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.booking__notes a { font-weight: 700; color: var(--white); }

/* Form chỉ còn 3 ô (2026-10-05; bỏ chọn điểm khởi hành, khu vực, tháng, số
   khách, ghi chú): canh giữa dọc trong cột form, cột ảnh bên trái cao theo. */
.booking__form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 34px 34px;
}
.booking__form .vform__grid { margin-top: 0; }

/* Ô chọn "Hành trình quan tâm" (form chính + hộp thoại): mũi tên mặc định của
   trình duyệt nằm sát mép phải (~10px) — 2026-10-06 thay bằng mũi tên vẽ riêng
   cách mép 16px, chữ chừa 44px bên phải để không chạy dưới mũi tên. Ghi lại cả
   ở :focus vì visa.css đổi nền bằng thuộc tính gộp "background" (xoá ảnh nền). */
.field select {
  -webkit-appearance: none;
          appearance: none;
  padding-right: 44px;
  cursor: pointer;
}
.field select,
.field select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d5148' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
}
/* Thẻ 2 cột (≥1025px): 3 ô ngắn làm thẻ chỉ còn ~318px cao (trước 552px) —
   khối chữ trắng bên ảnh dồn lên 27% chiều cao, nằm ngay trên hai khuôn mặt,
   chỗ lớp tối còn trong suốt (tối dần từ 40%). Giữ thẻ ≥ 520px để tiêu đề lại
   bắt đầu ≥ 53% như bản đã duyệt, và xếp 3 ô một cột cho cột form đầy đặn. Đo
   ở chữ ×1,10 (10% điểm ảnh sáng nhất): 1025px (tiêu đề 2 dòng) 500px 4,2:1,
   520px 5,2:1; 1100–1440px ≥ 6,7:1. ≤1024px thẻ xếp dọc, ảnh cao riêng —
   không áp dụng. (Nay khung 455px nhưng ảnh + lớp tối giữ nguyên như ở 520px
   — xem ngay dưới.) */
@media (min-width: 1025px) {
  .booking__form .vform__grid { grid-template-columns: 1fr; }
}
/* Thẻ thấp lại 520 → 455px (2026-10-06, khách: mép trên thẻ cách đỉnh đầu chàng
   trai 5px). Ở desktop ảnh "cover" theo CHIỀU CAO khung (khung 438–628px rộng
   luôn hẹp hơn 1,5 × cao) — chỉ hạ chiều cao thì ảnh thu nhỏ theo, đầu vẫn ở
   cùng tỉ lệ, không cắt được gì. Nên giữ ảnh đúng cỡ cũ (cao 520px) và neo ĐÁY:
   khung 455px cắt bớt 65px mép trên. Đỉnh tóc chàng trai ở y ≈ 143 / 1068 của
   ảnh gốc → 143 × 520/1068 ≈ 70px dưới mép trên cũ → mép trên mới cách đầu 5px.
   Cặp đôi, khối chữ trắng (neo đáy) và mọi thứ dưới đầu đứng nguyên chỗ cũ so
   với nhau. Lớp tối ::after viết lại theo px tính từ ĐÁY (đúng các mốc cũ ở
   khung 520px: 0 → 146px .88 → 229px .6 → 312px trong suốt) để vẫn nằm đúng
   sau khối chữ — viết % thì khung thấp đi sẽ kéo lớp tối xuống, tiêu đề lộ ra
   chỗ còn sáng. Cột form (3 ô + nút ~400px) vẫn vừa trong 455px. */
@media (min-width: 1025px) {
  .booking__card { min-height: 455px; }
  .booking__bg { top: auto; height: 520px; }
  .booking__intro::after {
    background: linear-gradient(0deg,
      rgba(24, 26, 30, .94) 0,
      rgba(24, 26, 30, .88) 146px,
      rgba(24, 26, 30, .6) 229px,
      rgba(24, 26, 30, 0) 312px);
  }
}

/* --------------------------------------------------------------------------
   3. Mục ngay sau thẻ form + "Một hành trình Châu Âu theo cách của AVORY"
   (4 thẻ .merit của index.html, lưới 4 cột)
   -------------------------------------------------------------------------- */
/* Mục ngay sau .eintro (hero + dải cam kết): --after-intro 120px (không phải
   --section-gap 170px). Responsive: 100 / 84. Gắn theo VỊ TRÍ nên đổi thứ tự
   mục không phải sửa. (Trước 2026-10-06 thẻ form nằm giữa dải cam kết và mục
   này, cách hai bên đúng 120px; nay thẻ đã dời xuống dưới bảng giá.)
   Từ 2026-10-05 mục đó là mục tour: banner ảnh Dresden của nó nhô --banner-top
   (72px) lên trên nhãn nhỏ, nên cộng thêm ngần ấy — khoảng thẻ form → MÉP ẢNH
   banner mới bằng --after-intro (không thì ảnh chỉ cách thẻ 48px). */
.eintro + section { --after-intro: 120px; padding-top: var(--after-intro); }
.eintro + .tours--banner { padding-top: calc(var(--after-intro) + var(--banner-top)); }
.merits__grid--4 { grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------------------------------------
   4. Hai mục tour — thẻ tour + nút "Xem thêm lịch trình" cuối mục
   Thẻ tour là .dcard của index.html (ảnh, dải tiêu đề quét cam khi rê chuột,
   .dcard__meta, .dcard__price, nút .btn--sm), thêm vài phần riêng.
   -------------------------------------------------------------------------- */
.tours {
  --grid-mt: 46px;     /* khoảng cụm tiêu đề → lưới thẻ; banner Châu Âu tính theo nó */
  padding-top: var(--section-gap);
}
.tours .h2 { margin-top: 12px; }

/* ---- Banner sau cụm tiêu đề hai mục tour (lần sửa 25–27) ----
   Ảnh tràn hai mép màn, từ 72px trên nhãn nhỏ tới 400px lấn xuống thẻ tour
   (lần sửa 27 — trước 150px; đúng vạch khách vẽ, ngang dòng mô tả trong thẻ),
   đáy tan dần vào nền trang. Ảnh Dresden (mục NZ & Úc đã bỏ 2026-10-05).
   - Neo vào .tours__head (nhãn + tiêu đề + mô tả) chứ không vào section: đỉnh
     = đỉnh cụm − 72px, đáy = đáy cụm + khoảng tới lưới + 400px, nên cụm chữ
     cao/thấp ở màn nào (mô tả 1–3 dòng) banner cũng ôm đúng.
   - Là <div> bọc <img>: <img> đặt tuyệt đối không giãn theo top + bottom mà
     lấy theo tỉ lệ ảnh (lỗi từng gặp ở banner hero) — div nhận top/bottom,
     ảnh bên trong 100% × 100% + object-fit: cover.
   - Tràn mép: rộng 100vw, canh giữa theo cột chữ. 100vw gồm cả thanh cuộn nên
     nhô ~8px mỗi bên — section cắt ngang (overflow-x: clip, không tạo khung
     cuộn, không cắt theo chiều dọc).
   - z-index −1 trong section cô lập (isolation): vẽ SAU nền section nhưng
     TRƯỚC chữ và thẻ tour, nên banner nằm dưới cả ảnh thẻ.
   - Ảnh cắt sẵn đúng tỉ lệ banner ở 1440px (1440 × 675 → 2,13:1, file
     2000×937): ở 1440px ảnh khít, ≤1440px "cover" theo chiều cao — đỉnh
     banner luôn là cùng một dòng ảnh gốc, chữ rơi vào đúng những dòng ảnh như
     nhau. Chỉ màn >1440px (phóng theo bề ngang, dư chiều cao) mới cần
     object-position dọc — mỗi ảnh một mốc, dò bằng đo tương phản.
   Ảnh Châu Âu tours-banner.jpg: Dresden lúc chạng vạng (ảnh khách gửi, lần
   sửa 26), dải y 120–1057 của ảnh gốc 2000×1333. Mốc y 120 để hai ngọn tháp
   Hofkirche (đỉnh y 415) và Hausmannsturm (y 425) nằm DƯỚI dòng mô tả cuối;
   Frauenkirche (đỉnh y 310) đứng ở lề trái, ngoài bề ngang chữ; bờ sông lên
   đèn + bóng nước nằm sau thẻ, lộ ở khe thẻ và hai lề. */
.tours--banner {
  --banner-top: 72px;
  --banner-into: 400px;
  /* Lớp trời tối dần (xem ::after): màu + 4 mức đậm, mỗi ảnh một bộ */
  --scrim: 8 16 38;
  --scrim-a: .65;  --scrim-b: .55;  --scrim-c: .42;  --scrim-d: .2;
  --scrim-hold: 221px;   /* mốc đặt mức --scrim-d (≈ đáy dòng mô tả ở desktop) */
  --scrim-end: 264px;
  --banner-pos: 50% 30%;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}
.tours__head { position: relative; }
/* Chữ trắng đặc trên ảnh đêm (lần sửa 26): nhãn (vốn cam), tiêu đề (vốn
   xanh), mô tả (vốn xám) — cả ba --white, không dùng trắng mờ. */
.tours--banner .tours__head .kicker,
.tours--banner .tours__head .h2,
.tours--banner .tours__head .tours__sub { color: var(--white); }
.tours__banner {
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--banner-top));
  bottom: calc(-1 * (var(--grid-mt) + var(--banner-into)));
  left: calc(50% - 50vw);
  width: 100vw;
}
/* object-position dọc chỉ có tác dụng ở màn >1440px (xem trên). Dresden: 30%
   — neo đỉnh (0) thì mô tả leo lên vệt mây sáng (1920px còn 4,2:1, 2560px
   2,4:1), dời quá xa thì hai ngọn tháp đâm vào dòng mô tả. */
.tours__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--banner-pos);
}
/* Hai lớp phủ, lớp trên ghi trước:
   1. Đáy tan dần vào nền trang: nền trang trong suốt → đặc ở mép dưới, trong
      45% dưới — đoạn nằm sau ảnh thẻ và khe giữa các thẻ, nên mép banner không
      là một đường cắt ngang lộ ra ở khe thẻ.
   2. Trời tối dần lên trên (lần sửa 26), kiểu kính lọc ND chuyển sắc: đậm
      nhất ở đỉnh, hết hẳn ở 264px — ngay dưới dòng mô tả cuối, trên hàng
      mái/dãy núi, nên phố lên đèn / biển giữ nguyên. Mốc tính bằng PX từ đỉnh
      banner (lần sửa 27; trước là % — banner cao thêm 250px thì lớp phủ % sẽ
      kéo dài xuống theo, phủ tối cả phố ở khe thẻ). Cụm chữ ở mọi màn nằm
      trong 72–250px đầu nên mốc px khớp mọi bề ngang.
      Dresden: ảnh phơi sáng dài có vệt mây gần trắng chạy ngang giữa trời,
      đúng chỗ đặt chữ — chữ trắng trên ảnh trần chỉ 1,6:1 (nhãn, tiêu đề);
      không cách cắt nào tránh được mà vẫn giữ phố. Màu phủ lấy từ chính ảnh
      (--scrim), không phải đen, để giữ tông; vệt mây vẫn thấy, chỉ dịu đi.
      Mức phủ dò trên điểm ảnh sau từng dòng chữ — README lần sửa 26–27. */
.tours__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(250, 247, 242, 0) 0,
      rgba(250, 247, 242, 0) 55%,
      var(--page-bg) 100%),
    linear-gradient(180deg,
      rgb(var(--scrim) / var(--scrim-a)) 0,
      rgb(var(--scrim) / var(--scrim-b)) 85px,
      rgb(var(--scrim) / var(--scrim-c)) 153px,
      rgb(var(--scrim) / var(--scrim-d)) var(--scrim-hold),
      rgb(var(--scrim) / 0) var(--scrim-end));
}
.tours__sub {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}

/* 6 thẻ, lưới 2 cột (2026-10-05, trước 3 + 2 trên lưới 6 cột) — ≤760px 1 cột.
   Grid thay cho flex của .dest__grid; rule flex-basis của .dcard trong
   visa.css không có tác dụng trong grid nên không cần gỡ. */
.tours__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: var(--grid-mt);
  align-items: stretch;
}
/* Tiêu đề mục viết hoa (markup chữ thường để trình đọc màn hình đọc thành câu) */
.tours__title { text-transform: uppercase; }

/* Ảnh cao CỐ ĐỊNH để mọi thẻ cùng nhịp. Thẻ rộng ~610px (khổ 1280) nên ảnh
   300px — dải ảnh toàn cảnh ~2:1 (bản 3 cột cũ: 224px cho thẻ 397px). */
.tcard .dcard__media { aspect-ratio: auto; height: 300px; }
/* Thẻ 1 (2026-10-07, khách gửi): làng Wengen (Thụy Sĩ) dưới núi tuyết, 3:2.
   Khung dẹt (2:1 desktop) cắt bớt trên / dưới — neo 85% để giữ trọn thị trấn
   phía dưới (khách dặn), đổi lại chóp núi trên cùng bị cắt. Ảnh Eiffel
   (tour-paris.jpg) giờ chỉ còn ở polaroid "Pháp" của hero. */
.tcard .tcard__pic--swiss { object-position: 50% 85%; }

.tours__more { margin-top: 44px; text-align: center; }

/* ---- thẻ tour ---- */
/* Nhãn trên ảnh: chữ mảnh (300), nền xanh logo --green mờ 85% (2026-09-28;
   trước là đen .3 + darken). Nền nằm ở ::before để opacity không làm mờ chữ;
   chữ trong <span> con position: relative để vẽ SAU lớp nền. */
.tcard__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  max-width: calc(100% - 28px);
  padding: 5px 11px;
  border-radius: var(--radius-full);
  font-size: calc(10.5px * var(--fs));
  font-weight: 300;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--white);
}
.tcard__tag::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--green);
  opacity: .85;
}
.tcard__tag > span { position: relative; }

.tcard__desc {
  margin-top: 12px;
  font-size: calc(14px * var(--fs));
  line-height: 1.7;
  color: var(--primary);
}
.tcard .dcard__meta { margin-top: 18px; }
.tcard .dcard__meta dd { line-height: 1.55; }

/* Chân thẻ xếp DỌC: giá một hàng, điều kiện đoàn + nút một hàng. Giá dạng
   khoảng ("125.900.000 – 128.900.000đ") rộng tới ~320px, xếp ngang với nút thì
   thẻ nào cũng phải xuống dòng một kiểu — xếp dọc cho mọi thẻ cùng một nhịp. */
.tcard .dcard__foot {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-top: 22px;
}
.tcard__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--card-border);
}
.tcard__group {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: calc(13px * var(--fs));
  color: var(--muted);
}
.tcard__group svg {
  width: 17px; height: 17px;
  flex: none;
  fill: none;
  stroke: url(#gold-grad) var(--gold);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   5. Bảng giá — .pricing / .ptable của index.html, thêm cột và nhóm khu vực
   -------------------------------------------------------------------------- */
/* 3 cột (2026-10-05): Chương trình (gói tour) · Ngày đi · Giá từ — chỉ Châu Âu.
   Bỏ cột Khu vực (gộp dòng), Thời gian, Hãng bay. Bảng hẹp nên bỏ min-width
   720px của visa.css: vừa khung ở mọi bề ngang, không cuộn ngang nữa. Cột giá
   nowrap (visa.css) — chữ "từ" đã nằm ở tiêu đề cột nên ô chỉ còn con số. */
/* Tiêu đề mục: chữ ×1,10 làm "2027" rớt một mình xuống dòng 2 ở 1440px — giữ
   liền "2026 – 2027" và chia hai dòng cho đều. */
.pricing .h2 { text-wrap: balance; }
.pricing .h2 .nb { white-space: nowrap; }
.ptable--tours { min-width: 0; table-layout: fixed; }
.ptable--tours thead th:nth-child(1) { width: 56%; }
.ptable--tours thead th:nth-child(2) { width: 26%; }
.ptable--tours thead th:nth-child(3) { width: 18%; }
.ptable--tours td b { font-weight: 700; color: var(--primary); }
/* Cụm từ / tên nước / ngày trong bảng không bị cắt khi xuống dòng (mọi bề
   ngang). Nhãn "Ngày đi" chỉ dùng ở điện thoại (cột "Ngày đi" bị ẩn ở đó). */
.ptable--tours .nb { white-space: nowrap; }
.ptable__label { display: none; }

/* --------------------------------------------------------------------------
   6. Cam kết của AVORY — khối bạc hà, lời dẫn bên trái, 4 cam kết bên phải
   -------------------------------------------------------------------------- */
.pledge { padding-top: var(--section-gap); }
.pledge__box {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
  padding: 56px;
  border-radius: var(--radius-xl);
  background: var(--mint);
}
.pledge .h2 { margin-top: 0; }
.pledge__intro .lead { margin-top: 16px; }
.pledge__intro .btn { margin-top: 30px; }

/* 4 cam kết là thẻ .merit của visa.css (lần sửa 15) — ở đây chỉ còn lưới
   2 × 2. Không định kiểu lại thẻ: kiểu desktop (đĩa icon phía trên), kiểu
   mobile (icon + tiêu đề chung dòng) và hover (nhấc 8px, viền cam, đĩa cam)
   đều lấy nguyên từ .merit. Khe 20px = .merits__grid. */
.pledge__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 20px;
}
/* Quy trình 5 bước (2026-10-06): không xuống dòng giữa một từ hai tiếng / cụm
   ngắn (.nb trong markup — "đặt cọc", "giữ chỗ", "hồ sơ &"…), chia dòng cho
   đều. .nb của visa.css chỉ bật ở ≤760px nên phải bật riêng ở đây.
   Màn rộng (≥1280px, cột ~227–230px): 4 tiêu đề vừa một dòng sẵn (134–216px),
   riêng "Chuẩn bị hồ sơ & thanh toán" rộng 249px → siết khoảng chữ −0,05em
   (~225px) cho cũng một dòng. Màn hẹp hơn cột chỉ 180–220px, tiêu đề dài
   xuống 2 dòng theo các cụm .nb như trên. */
.step .nb { white-space: nowrap; }
.step h3,
.step p { text-wrap: balance; }
@media (min-width: 1280px) {
  .step h3.step__title--long { letter-spacing: -.05em; }
}
/* "3-4★" không gãy ở gạch nối (desktop chữ ×1,10 từng ra "3-" / "4★") */
.pledge__list .nb { white-space: nowrap; }

/* --------------------------------------------------------------------------
   7. Visa Schengen — 5 bước AVORY đồng hành (2026-10-05, thay mục "Visa & dịch
   vụ tự túc"). Bố cục + kiểu y mục cũ: tiêu đề + dòng dẫn, thẻ .pcard của
   visa.css (nền trắng, icon đặc cam, chữ xanh; hover nâng thẻ + nền xanh).
   Không số thứ tự, không mũi tên. 5 thẻ một hàng (mục cũ 4 thẻ); ≤1024px
   3 + 2 canh giữa; ≤760px 1 cột, thẻ kiểu điện thoại của .pcard (icon cạnh tên).
   -------------------------------------------------------------------------- */
.vjourney { padding-top: var(--section-gap); }
.vjourney .h2 { margin-top: 0; }
.vjourney__sub {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}
.vjourney__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  margin-top: 46px;
  align-items: stretch;
  /* <ol> (không phải <ul>) nên reset của base.css không gỡ đệm trái 40px mặc
     định — phải gỡ ở đây, như .steps__list của visa.css */
  padding: 0;
  list-style: none;
}
.vjourney__grid h3 { text-wrap: balance; }
/* Giữ liền "Sẵn sàng" và "hành trình" (.nb): thẻ hẹp mà phải 3 dòng thì ra
   "Sẵn sàng / cho / hành trình", không thành "Sẵn / sàng cho / hành trình" như
   balance tự chọn (gặp ở chữ ×1,25). Ở ×1,10 mọi bề ngang desktop đều vừa 2
   dòng "Sẵn sàng cho / hành trình". */
.vjourney__grid .nb { white-space: nowrap; }

/* Thẻ sáng lần lượt — cùng nhịp "chạy đèn" của số ở mục Quy trình (stepGlow,
   visa.css): mỗi thẻ sáng 2s, vòng 10s, thẻ sau lệch 2s; sáng 0–18%, tắt dần
   tới 24%, nằm im tới 94%, sáng dần lại khi vòng sau bắt đầu. "Sáng" = đúng
   trạng thái hover của .pcard: nền + viền xanh, chữ trắng, icon giữ cam. Hai
   mục cùng chạy từ lúc tải trang nên thẻ Visa sáng cùng nhịp với số Quy trình.
   Delay DƯƠNG, không fill-mode backwards (lý do như .step__num của visa.css):
   chưa tới lượt thì thẻ giữ kiểu tĩnh, không sáng cả 5 lúc mới vào trang. */
@keyframes vjGlow {
  0%, 18%  { background-color: var(--green); border-color: var(--green); }
  24%, 94% { background-color: var(--white); border-color: transparent; }
  100%     { background-color: var(--green); border-color: var(--green); }
}
@keyframes vjGlowText {
  0%, 18%  { color: var(--white); }
  24%, 94% { color: var(--green); }
  100%     { color: var(--white); }
}
.vjourney__grid > .pcard    { animation: vjGlow 10s linear infinite; }
.vjourney__grid > .pcard h3 { animation: vjGlowText 10s linear infinite; }
.vjourney__grid > .pcard:nth-child(2),
.vjourney__grid > .pcard:nth-child(2) h3 { animation-delay: 2s; }
.vjourney__grid > .pcard:nth-child(3),
.vjourney__grid > .pcard:nth-child(3) h3 { animation-delay: 4s; }
.vjourney__grid > .pcard:nth-child(4),
.vjourney__grid > .pcard:nth-child(4) h3 { animation-delay: 6s; }
.vjourney__grid > .pcard:nth-child(5),
.vjourney__grid > .pcard:nth-child(5) h3 { animation-delay: 8s; }
/* Rê chuột: thẻ phải hiện đủ trạng thái hover (nền xanh, chữ trắng) cả khi đang
   ở pha tắt của vòng sáng. Giá trị animation thắng mọi khai báo thường của
   visa.css, chỉ thua !important — nên ở đây buộc phải dùng !important. */
@media (hover: hover) and (pointer: fine) {
  .vjourney__grid > .pcard:hover { background-color: var(--green) !important; border-color: var(--green) !important; }
  .vjourney__grid > .pcard:hover h3 { color: var(--white) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .vjourney__grid > .pcard,
  .vjourney__grid > .pcard h3 { animation: none; }
}
.vjourney__cta { margin-top: 44px; text-align: center; }

/* --------------------------------------------------------------------------
   7a. Khách hàng tin chọn AVORY — thư viện ảnh đoàn (2026-10-05)
   2026-10-06: MỘT băng chuyền 6 ảnh, bỏ 3 tab quốc gia. Băng "bộ bài" chép từ
   .gallery__deck của trang Về chúng tôi (Avory Trang chu/about.css, mục 9):
   ảnh đang xem (.p0) lớn bên trái, .p1 / .p2 nhỏ dần sang phải, canh giữa một
   trục ngang; nút tròn ← → góc dưới phải. Script cuối trang đặt class vị trí.
   6 ảnh đoàn thật (assets/real-tour-1…6.jpg) thay ô giữ chỗ từ 2026-10-06.
   -------------------------------------------------------------------------- */
.tgallery { padding-top: var(--section-gap); }
.tgallery .h2 { margin-top: 0; }

/* Khung băng: nút ← → đặt tuyệt đối góc dưới phải (vùng trống dưới hai ảnh
   nhỏ), ≤760px xuống hàng riêng dưới băng. */
.tgallery__stage {
  position: relative;
  margin-top: 52px;
}
.tgallery__deck {
  --slide-gap: 14px;
  --deck-h: 470px;
  --s1-w: 250px;  --s1-h: 320px;
  --s2-w: 124px;  --s2-h: 176px;

  display: flex;
  align-items: center;
  gap: var(--slide-gap);
  height: var(--deck-h);
  overflow: hidden;
}

.tgallery__slide {
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--mint);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition:
    width  .6s var(--ease-out),
    height .6s var(--ease-out),
    margin .6s var(--ease-out),
    opacity .45s ease;
}
/* ảnh đoàn thật — điểm canh (object-position) ghi riêng từng ảnh trong HTML */
.tgallery__slide img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; }
/* ảnh đang xem — chiếm hết chỗ còn lại của hàng */
.tgallery__slide.p0 {
  width: calc(100% - var(--s1-w) - var(--s2-w) - var(--slide-gap) * 2);
  height: var(--deck-h);
  cursor: default;
  box-shadow: var(--shadow-soft);
}
.tgallery__slide.p1 { width: var(--s1-w); height: var(--s1-h); }
.tgallery__slide.p2 { width: var(--s2-w); height: var(--s2-h); }
/* chưa tới lượt: xếp bên phải; vừa xem xong: trượt ra bên trái. Margin âm
   triệt tiêu khe của ô rỗng nên bề ngang .p0 không phụ thuộc số ảnh — và thứ
   tự giữa các ô rỗng cùng phía không làm xê dịch gì (mỗi ô góp đúng 0px). Ảnh
   chỉ đổi phía khi đã rỗng hẳn: xem chú thích script băng chuyền. */
.tgallery__slide.off,
.tgallery__slide.prev {
  width: 0;
  height: var(--s2-h);
  opacity: 0;
  pointer-events: none;
}
.tgallery__slide.off  { margin-left: calc(var(--slide-gap) * -1); }
.tgallery__slide.prev { margin-right: calc(var(--slide-gap) * -1); }

.tgallery__arrows {
  position: absolute;
  right: 0; bottom: 0;
  display: flex;
  gap: 10px;
}
.tgallery__arrow {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.tgallery__arrow svg {
  width: 17px; height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tgallery__arrow:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .tgallery__arrow:hover { background: var(--gold-grad); transform: translateY(-2px); }
  .tgallery__slide.p1:hover,
  .tgallery__slide.p2:hover { box-shadow: var(--shadow-soft); }
}


/* --------------------------------------------------------------------------
   7c. Hộp thoại form "Xem hành trình" (2026-10-05) — <dialog> + showModal()
   -------------------------------------------------------------------------- */
.tdialog {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--primary);
  box-shadow: var(--shadow-float);
  overflow: auto;
}
/* nền trang tối mờ phía sau hộp thoại */
.tdialog::backdrop {
  background: rgba(6, 18, 22, .62);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.tdialog[open] { animation: tdialog-in .3s var(--ease-out); }
.tdialog[open]::backdrop { animation: tdialog-fade .3s ease; }
@keyframes tdialog-in   { from { opacity: 0; transform: translateY(14px); } }
@keyframes tdialog-fade { from { opacity: 0; } }
/* khoá cuộn trang phía sau khi hộp thoại mở */
html:has(.tdialog[open]) { overflow: hidden; }
.tdialog__box { position: relative; padding: 38px 36px 34px; }
.tdialog__close {
  position: absolute;
  top: 14px; right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--mint);
  cursor: pointer;
  transition: background-color .2s ease;
}
.tdialog__close:hover { background: var(--mint-deep); }
.tdialog__close svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  stroke-linecap: round;
}
.tdialog__title {
  padding-right: 44px;
  font-size: calc(24px * var(--fs));
  font-weight: 800;
  line-height: 1.25;
  color: var(--green);
}
.tdialog__sub { margin-top: 8px; font-size: calc(14.5px * var(--fs)); line-height: 1.6; color: var(--text-medium); }
.tdialog__form .vform__grid { margin-top: 22px; }
@media (prefers-reduced-motion: reduce) {
  .tdialog[open], .tdialog[open]::backdrop { animation: none; }
}

/* --------------------------------------------------------------------------
   7b. Câu hỏi thường gặp — thẻ .qa của index.html
   -------------------------------------------------------------------------- */
/* Lưới 2 cột (≥1025px), 2026-09-29 theo yêu cầu:
   - ĐÓNG: mọi thẻ cao bằng nhau (= thẻ đóng cao nhất), câu hỏi + nút "+" canh
     GIỮA theo chiều dọc. CSS không tự tính được "dòng câu hỏi cao nhất", nên
     script cuối index.html ("Chiều cao thẻ câu hỏi") đo chiều cao tự nhiên lớn
     nhất của <summary> và ghi --qa-sum-h lên .faq__grid; summary của thẻ đóng
     lấy số đó làm min-height + align-items: center. Chưa có JS thì biến trống
     → thẻ cao theo nội dung như cũ.
   - MỞ: câu hỏi về đầu thẻ như bình thường (flex-start của visa.css). Thẻ mở
     kéo cao bằng hàng (stretch) → hai thẻ cùng mở luôn cao bằng thẻ cao hơn.
     Thẻ đóng giữ align-self: start của visa.css → cạnh một thẻ mở nó vẫn giữ
     chiều cao mặc định.
   ≤1024px lưới 1 cột: mỗi thẻ cao theo nội dung. */
@media (min-width: 1025px) {
  .qa:not([open]) summary { min-height: var(--qa-sum-h, 0px); align-items: center; }
  .qa:not([open]) summary::after { margin-top: 0; }
  .qa[open] { align-self: stretch; }
}
/* Đổi trạng thái thì chữ nhảy (giữa ↔ đầu thẻ) và câu trả lời hiện/ẩn → mờ dần
   vào .35s. Hai tên keyframes riêng cho mở và đóng: cùng một tên thì đổi
   selector không làm animation chạy lại. Lúc tải trang các thẻ đóng cũng mờ
   dần một lần — nằm dưới màn đầu nên không thấy. */
.qa[open] summary,
.qa[open] > p { animation: qa-fade-open .35s ease-out; }
.qa:not([open]) summary { animation: qa-fade-close .35s ease-out; }
@keyframes qa-fade-open  { from { opacity: 0; } }
@keyframes qa-fade-close { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .qa summary, .qa > p { animation: none; }
}

/* --------------------------------------------------------------------------
   8. CTA cuối trang — .finale của index.html, bản căn giữa không kèm form
   -------------------------------------------------------------------------- */
.finale--center { padding: 116px 0 120px; text-align: center; }
/* chữ nằm giữa khung nên lớp phủ phải đều hai bên, không đậm trái nhạt phải */
.finale--center::after {
  background: linear-gradient(180deg, rgba(10, 44, 39, .80) 0%, rgba(10, 44, 39, .88) 100%);
}
.finale--center .h2 { margin-top: 0; }
.finale--center .finale__sub { max-width: 560px; margin-inline: auto; }
/* Hai nút cùng cỡ (2026-10-07): lưới 2 cột 1fr co theo nội dung → hai cột
   bằng nhau = nút rộng hơn; ô lưới kéo giãn → hai nút cũng cao bằng nhau.
   (Trước: flex + wrap, mỗi nút rộng theo chữ.) Bọc trong khối canh giữa
   (.finale--center text-align: center) nên dùng inline-grid. */
.finale__actions {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 14px;
  margin-top: 34px;
}
.finale__actions .btn { justify-content: center; }
/* Nút gọi: icon (chấm trắng) bên TRÁI, "Gọi ngay" mảnh nằm trên "1800 8386"
   đậm ×1,5. Đệm giữ đúng .btn--lg nhưng lật trái ↔ phải (13px phía chấm,
   26px phía chữ); nút cao lên theo 2 dòng chữ, đệm trên dưới vẫn 13px. */
.finale__call { padding: 13px 26px 13px 13px; gap: 12px; }
.finale__callText {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.15;
}
.finale__callLabel { font-weight: 300; }
.finale__callNum { font-size: 1.5em; font-weight: 800; letter-spacing: .01em; }

/* --------------------------------------------------------------------------
   9. Hover — chỉ trên thiết bị có chuột thật
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  /* rê chuột vào cụm polaroid: ba ảnh xoè nhẹ ra */
  .ehero__snaps:hover .snap--nz { transform: translate(-8px, -8px) rotate(-7deg); }
  .ehero__snaps:hover .snap--au { transform: translate(10px, -4px) rotate(7deg); }
  .ehero__snaps:hover .snap--is { transform: translate(-8px, 6px) rotate(1deg); }
}

/* --------------------------------------------------------------------------
   10. Responsive — cùng các mốc 1200 / 1024 / 760 / 480 của visa.css
   -------------------------------------------------------------------------- */

/* Menu ở đây có 6 mục (index.html chỉ 5) nên thanh nav chật sớm hơn. Đo
   được: logo 105 + menu 709 + hotline & CTA 316 = 1130px, trong khi ở 1210px
   chỉ còn 18px hở giữa menu và cụm nút, ở 1030px thì tràn 17px. Hai bước:
   ≤1280px ẩn số hotline (giữ icon, vẫn bấm gọi được); ≤1100px ẩn "Trang chủ"
   — logo vốn đã trỏ về avory.vn nên không mất lối nào. */
@media (max-width: 1280px) {
  .nav__hotline span { display: none; }
}
@media (max-width: 1100px) {
  .nav__menu li:first-child { display: none; }
}

@media (max-width: 1200px) {
  .tgallery__deck { --deck-h: 420px; --s1-w: 220px; --s1-h: 286px; --s2-w: 110px; --s2-h: 157px; }

  .eintro,
  .booking { --form-col: 540px; }
  .booking__intro { padding: 34px 30px 32px; }
  .booking__title { font-size: calc(25px * var(--fs)); }

  .pledge__box { gap: 40px; padding: 44px; }
}

@media (max-width: 1024px) {
  /* Xếp dọc: ảnh tối phủ TRỌN hero (lần sửa 21), chữ sáng ở trên, cụm
     polaroid ở dưới. Bản trước ảnh chỉ là một dải ở đáy với lớp phủ kem trên
     → dưới; bỏ lớp phủ thì chữ cũng phải nằm trên ảnh như desktop.
     Lề dưới hero = lề trên + --snap-drop (cụm polaroid thò xuống dưới cột ảnh
     ngần ấy) → khoảng trống trên tiêu đề = dưới cụm polaroid, như desktop
     (2026-09-29; trước 172px vì thẻ form chồng lên đáy hero 96px).
     Ảnh ở đây theo <source> trong HTML (2000w / 3000w, sizes 1450px): khung
     dọc nên ảnh "cover" theo chiều cao, rộng ~1400–1440px dù màn hẹp — cụm
     chữ trên trời + núi, dãy nhà + nhà thuyền ngay dưới hai nút, hồ sau cụm
     polaroid. object-position 50% (cả ≤760px): ở 768 / 1024px tháp nhà thờ ở
     mép trái, ngay dưới nút thứ nhất; ở điện thoại tháp ra ngoài khung, chỉ
     còn nhà thuyền + bóng nước dưới hai nút.
     Lưu ý: ảnh "cover" theo CHIỀU CAO hero, nên mỗi lần nội dung hero cao/thấp
     đi (thêm/bớt một hàng) ảnh co giãn lại và mọi dòng chữ trượt sang chỗ
     khác trên ảnh — phải dò lại. */
  .ehero { --hero-pad: 64px; }
  .eintro__bg { object-position: 50% 0; }
  .ehero__grid { grid-template-columns: 1fr; gap: 40px; }
  .ehero__sub, .ehero__offer { max-width: none; }
  .ehero__sub { margin-top: 24px; }
  .ehero__offer { margin-top: 30px; }
  .ehero__perks { grid-template-columns: repeat(3, max-content); margin-top: 32px; }
  .ehero__cta { margin-top: 40px; }
  .ehero__art { height: 400px; }
  .ehero__snaps { left: 50%; margin-left: -210px; }
  .ehero__route { display: none; }

  /* form: khối ảnh + lời mời thành dải ngang phía trên, form xuống dưới */
  .booking__card { grid-template-columns: 1fr; }
  .booking__intro { min-height: 320px; padding: 30px 28px 26px; }
  /* dải ngang rộng (tablet): ảnh "cover" theo bề ngang, dư chiều cao — mốc dọc
     50% đặt hai khuôn mặt (trán anh → cằm cô) TRÊN khối chữ ở đáy dải */
  .booking__bg { object-position: 50% 50%; }
  .booking__notes { grid-template-columns: repeat(2, auto); justify-content: start; column-gap: 28px; }
  .booking__form { padding: 26px 28px 30px; }

  .eintro + section { --after-intro: 100px; }
  .merits__grid--4 { grid-template-columns: repeat(2, 1fr); }

  /* Hàng "đoàn ghép + nút" ở thẻ hẹp nhất: lưới 2 cột quanh 768px chỉ còn
     297px (cần 307), 1 cột ở 375px còn 293px (cần 297–299) — nhãn tự bẻ đôi
     hoặc nút rơi xuống dòng. Siết chữ, icon, khoảng cách cho vừa một hàng;
     nowrap giữ nhãn liền một dòng, flex-wrap là lưới an toàn cho màn 320px. */
  .tcard__row { flex-wrap: wrap; gap: 8px; }
  .tcard__group { gap: 5px; font-size: calc(12px * var(--fs)); white-space: nowrap; }
  .tcard__group svg { width: 15px; height: 15px; }

  .pledge__box { grid-template-columns: 1fr; gap: 30px; }

  /* Visa Schengen: 3 + 2 thẻ, hàng 2 canh giữa (lưới 6 cột, mỗi thẻ 2 cột) */
  .vjourney__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; }
  .vjourney__grid > .pcard { grid-column: span 2; }
  .vjourney__grid > .pcard:nth-child(4) { grid-column: 2 / span 2; }

  /* Thư viện ảnh: băng thấp hơn, bỏ ảnh nhỏ nhất (.p2) như trang Về chúng tôi */
  .tgallery__deck { --deck-h: 360px; --s1-w: 186px; --s1-h: 245px; --s2-h: 138px; }
  .tgallery__slide.p0 { width: calc(100% - var(--s1-w) - var(--slide-gap)); }
  .tgallery__slide.p2 { width: 0; opacity: 0; margin-left: calc(var(--slide-gap) * -1); pointer-events: none; }
}

/* 6 mục menu không vừa dải 761–960px (index.html chỉ có 5 mục nên chịu được):
   ẩn menu sớm hơn, giữ logo + hotline + nút CTA như mốc mobile. */
@media (max-width: 960px) {
  .nav--lp .nav__menu { display: none; }
  .nav--lp .nav__inner { justify-content: space-between; }
}

@media (max-width: 760px) {
  .ehero { --hero-pad: 44px; }
  /* Điện thoại (tiêu đề mới 2026-10-07): khối tiêu đề trải hết cột chữ, tối
     đa 420px — thước "10,72em" của desktop / tablet ở cỡ chữ điện thoại cũ chỉ
     ra 289px ở màn 375px (hẹp hơn hẳn nút và dải ưu đãi bên dưới). Mọi dòng
     tính theo bề ngang này (100cqi) như desktop. */
  .ehero__title { width: min(100%, 420px); }
  .ehero__sub { margin-top: 18px; font-size: calc(15px * var(--fs)); line-height: 1.7; }
  .ehero__offer { margin-top: 24px; align-items: flex-start; flex-wrap: wrap; row-gap: 4px; font-size: calc(13px * var(--fs)); }
  .ehero__offerSep { display: none; }
  .ehero__offer > span:last-child { flex-basis: 100%; margin: 0; }
  .ehero__perks { grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
  .ehero__cta { margin-top: 32px; }
  .ehero__cta .btn { flex: 1 1 100%; justify-content: center; }

  /* khung cụm polaroid thu theo; cụm giữ nguyên toạ độ, chỉ scale */
  .ehero__art { height: 300px; }
  .ehero__snaps { margin-left: -156px; transform: scale(.74); }

  .booking__intro { min-height: 300px; padding: 22px 20px 20px; }
  /* Điện thoại: khối chữ phủ gần trọn khung (tiêu đề bắt đầu ~30–70px từ mép
     trên), nằm cả lên vùng sáng của ảnh — lớp xám phải đậm sớm hơn bản desktop
     (đo với ảnh La Haye trước đây: tiêu đề trắng chỉ 2,6–2,8:1 ở mức desktop). */
  .booking__intro::after {
    background: linear-gradient(180deg,
      rgba(24, 26, 30, .45) 0%,
      rgba(24, 26, 30, .72) 30%,
      rgba(24, 26, 30, .9) 60%,
      rgba(24, 26, 30, .94) 100%);
  }
  .booking__title { font-size: calc(21px * var(--fs)); }
  .booking__sub { font-size: calc(14.5px * var(--fs)); }
  .booking__notes { grid-template-columns: 1fr; }
  .booking__form { padding: 20px 20px 24px; }
  .booking__form .vform__grid { grid-template-columns: 1fr; }

  .eintro + section { --after-intro: 84px; }
  .merits__grid--4 { grid-template-columns: 1fr; }

  .kicker { font-size: calc(11.5px * var(--fs)); }
  .tours .h2 { margin-top: 10px; }
  .tours__sub,
  .vjourney__sub {
    margin-top: 14px;
    font-size: calc(14.5px * var(--fs));
    line-height: 1.65;
  }
  .tours__grid { grid-template-columns: 1fr; gap: 22px; }
  /* 1 cột: ảnh mọi thẻ trở lại 16:9 */
  .tcard .dcard__media { height: auto; aspect-ratio: 16 / 9; }

  /* Bảng giá — điện thoại (2026-10-06 theo phác thảo của khách; trước: tên trải
     ngang, ngày đi · giá chung một tầng, chật và chồng chéo). Mỗi hàng 2 cột:
     TRÁI xếp dọc tên hành trình (đậm) → lộ trình (dòng riêng) → ghi chú đoàn
     (mờ) → nhãn "Ngày đi" (đậm) → từng ngày một dòng; PHẢI là giá, canh trên.
     Hàng tiêu đề bỏ "Ngày đi", hai nhãn còn lại cùng một tầng.
     Cả bảng là MỘT lưới, mỗi hàng là subgrid: cột giá rộng đúng bằng giá dài
     nhất ("169.900.000đ") ở MỌI hàng — mép phải khối chữ trái thẳng hàng từ
     trên xuống, chữ trái không bao giờ lấn sang cột giá (minmax(0, 1fr) + khe
     16px). Xuống dòng chỉ ở giữa các cụm .nb trong markup, không cắt tên hành
     trình, tên nước hay ngày. */
  .ptable--tours {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
  }
  .ptable--tours thead,
  .ptable--tours tbody { display: contents; }
  .ptable--tours tr {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    padding: 16px 12px;
    border-bottom: 1px solid var(--card-border);
  }
  .ptable--tours tbody tr:last-child { border-bottom: 0; }
  .ptable--tours th,
  .ptable--tours td { width: auto; padding: 0; border-bottom: 0; }
  .ptable--tours tr > :nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
  .ptable--tours tr > :nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
  .ptable--tours tr > .num { grid-area: 1 / 2 / 3 / 3; align-self: start; }
  .ptable--tours thead tr { padding-block: 12px; border-bottom: 0; border-radius: var(--radius-md); background: var(--mint); }
  /* bỏ bề ngang % của bố cục bảng (56/26/18%, độ ưu tiên cao hơn rule
     th, td ở trên) — không thì nhãn cột bị ép hẹp, tràn chồng lên nhau */
  .ptable--tours thead th:nth-child(n) { width: auto; }
  .ptable--tours thead th { background: none; border-radius: 0; white-space: normal; }
  .ptable--tours thead th:nth-child(2) { display: none; }
  .ptable--tours td b,
  .ptable__route { display: block; }
  .ptable--tours td small { margin-top: 6px; }
  .ptable--tours td:nth-child(2) { margin-top: 12px; line-height: 1.6; }
  .ptable__label { display: block; font-weight: 700; color: var(--primary); }

  /* Visa Schengen: 1 cột — .pcard tự chuyển kiểu điện thoại (icon cạnh tên) */
  .vjourney__grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 14px; margin-top: 32px; }
  .vjourney__grid > .pcard,
  .vjourney__grid > .pcard:nth-child(4) { grid-column: auto; }
  .vjourney__cta { margin-top: 32px; }
  .vjourney__cta .btn { width: 100%; justify-content: space-between; }

  /* Thư viện ảnh: 2 cột, ô đầu trải 2 cột × 2 hàng */
  /* Thư viện ảnh: chỉ ảnh đang xem; nút ← → xuống hàng riêng dưới băng, canh phải */
  .tgallery__stage { margin-top: 34px; }
  .tgallery__deck { --deck-h: 260px; --s2-h: 120px; }
  .tgallery__slide.p0 { width: 100%; }
  .tgallery__slide.p1 { width: 0; height: var(--s2-h); opacity: 0; margin-left: calc(var(--slide-gap) * -1); pointer-events: none; }
  .tgallery__arrows { position: static; justify-content: flex-end; margin-top: 18px; }

  /* Hộp thoại form */
  .tdialog__box { padding: 30px 20px 24px; }
  .tdialog__title { font-size: calc(21px * var(--fs)); }
  .tours__more { margin-top: 32px; }
  /* .btn vốn nowrap; nhãn "Xem thêm lịch trình Châu Âu" rộng gần hết
     màn 320px nên phải cho xuống dòng — cùng cách .pricing__cta của visa.css */
  .tours__more .btn {
    width: 100%;
    justify-content: space-between;
    white-space: normal;
    text-align: left;
    line-height: 1.35;
  }
  .tours__more .btn__dot { flex: none; }

  .pledge__box { padding: 28px 18px; border-radius: var(--radius-lg); }
  /* 1 cột như .merits__grid ở mốc này; thẻ tự chuyển kiểu mobile của .merit */
  .pledge__list { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .pledge__intro .btn { width: 100%; justify-content: space-between; }


  .finale--center { padding: 76px 0 80px; }
  .finale__actions { display: grid; grid-auto-flow: row; }
  .finale__actions .btn { justify-content: center; }
}


/* Màn 320px: logo 105 + icon hotline + nút "Nhận tư vấn ngay" = 334px, tràn
   14px và kéo cả trang cuộn ngang. Thu logo và nút lại một chút. */
@media (max-width: 360px) {
  .nav__logo { width: auto; height: 36px; }
  .nav__actions { gap: 12px; }
  .nav__cta { gap: 8px; padding: 7px 7px 7px 14px; font-size: calc(13px * var(--fs)); }
  .nav__cta .btn__dot { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  /* base.css chỉ ép transition-duration, không đụng tới animation */
  .snap { translate: none; }   /* script parallax cũng tự dừng, đây là lưới an toàn */
  .ehero__snaps:hover .snap--nz { transform: rotate(-4deg); }
  .ehero__snaps:hover .snap--au { transform: rotate(4deg); }
  .ehero__snaps:hover .snap--is { transform: rotate(3deg); }
}