/* ==========================================================================
   Avory Travel — Landing page tour săn cực quang Iceland × Paris 9N8Đ
   Một file CSS duy nhất. Phần 1–3 (token, nút, trường form, hộp thoại,
   footer) CHÉP từ trang tour Châu Âu (base.css / visa.css / chau-au.css bản
   2026-10-07) để giữ đúng "element style" mới nhất: dải vàng #f8c37f →
   #bd8450, nút viên thuốc + chấm tròn trắng, Inter, cỡ chữ calc(Npx *
   var(--fs)) (desktop ×1,10). Trang không dùng chung file với trang khác
   (quy ước repo) — sửa ở đây không ảnh hưởng tour-chau-au.

   Phần 4 trở đi là bố cục riêng, theo nhịp nền TỐI → SÁNG của
   elevenexperience.com: video → đen → xanh rêu đậm → xanh thép → ghi ấm →
   kem → ghi ấm → kem → xanh thép (form) → footer xanh AVORY.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token
   -------------------------------------------------------------------------- */
:root { --fs: 1; }
@media (min-width: 1025px) {
  :root { --fs: 1.1; }
}
:root {
  /* thương hiệu — y như trang Châu Âu */
  --primary:      #173633;
  --green:        #0d5148;
  --green-deep:   #0a3b34;
  --green-bright: #00a791;
  --gold-light:     #f8c37f;
  --gold-dark:      #bd8450;
  --gold:           #dba468;
  --gold-grad:      linear-gradient(135deg, #f8c37f, #bd8450);
  --gold-grad-deep: linear-gradient(135deg, #ebb46e, #a87240);
  --gold-line:      linear-gradient(90deg, #f8c37f, #bd8450);
  --ink:          #1a2b26;
  --page-bg:      #faf7f2;
  --mint:         #eef3f0;
  --mint-deep:    #e4ece8;
  --border-color: #e2e8f0;
  --text-medium:  #475569;
  --muted:        #7b7b7b;
  --white:        #fff;
  --white-80:     rgba(255, 255, 255, .8);
  --white-70:     rgba(255, 255, 255, .7);
  --white-60:     rgba(255, 255, 255, .6);
  --white-20:     rgba(255, 255, 255, .2);
  --white-12:     rgba(255, 255, 255, .12);
  --white-10:     rgba(255, 255, 255, .1);

  /* nền các mục — nhịp tối → sáng (giá trị đo từ trang tham khảo, ngả về
     xanh AVORY): đen #000 → #0e1b16 → #16242e → #ded9d3 → #f7f2e8 */
  --night: #05080b;
  --polar: #0b1f1c;
  --fjord: #11232d;
  --mist:  #eae6df;      /* ghi ấm — khách đổi từ #e0dbd3, 2026-10-13 */
  --night-green: #071412; /* dải giá trị + Chọn lý do đi (khách, 2026-10-13) */
  --snow:  #f6f1e7;
  --line-dark:  rgba(255, 255, 255, .12);
  --line-light: rgba(13, 81, 72, .16);
  /* nhấn riêng cho Ngày 3 — đêm săn cực quang (khách, 2026-10-13) */
  --aurora-grad:  linear-gradient(90deg, #003b69, #50e37b);
  --aurora-light: #50e37b;

  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --container: 1280px;
  --gutter: 16px;
  --edge: clamp(16px, 4vw, 56px);          /* lề các lớp tràn khung (hero) */
  --sec-pad: clamp(96px, 11vw, 160px);      /* nhịp dọc mỗi mục */

  --ease-out:  cubic-bezier(.22, .61, .36, 1);
  --ease-io:   cubic-bezier(.77, 0, .175, 1);

  --shadow-float: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
  --shadow-deep:  0 30px 60px -30px rgba(0, 0, 0, .55);

  --head-h: 84px;
}
@media (max-width: 760px) {
  :root { --head-h: 64px; }
}

/* --------------------------------------------------------------------------
   2. Nền tảng
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--white);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: calc(16px * var(--fs));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
svg { display: block; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 761px) { :root { --gutter: 32px; } }

.nb { white-space: nowrap; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 20px; border-radius: 0 0 var(--radius-md) 0;
  background: var(--green); color: var(--white); font-weight: 600;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; border-radius: 4px; }

/* Mép trên mục dừng dưới header cố định khi bấm link neo */
section[id] { scroll-margin-top: calc(var(--head-h) - 1px); }

/* --------------------------------------------------------------------------
   3. Thành phần chép từ trang Châu Âu
   -------------------------------------------------------------------------- */
/* ---- Nút ---- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 10px 10px 22px;
  border-radius: var(--radius-full);
  font-size: calc(14.5px * var(--fs)); font-weight: 600; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
/* Chấm mũi tên (khách, 2026-10-13): mặc định vòng tròn viền trắng + mũi tên
   nét trắng; rê chuột / focus bàn phím → nền trắng đặc + mũi tên vàng như bản
   cũ. Viền là box-shadow inset trắng (trùng nền trắng khi đặc nên tự biến
   mất); màu mũi tên = currentColor để chuyển trắng → vàng mượt (stroke gradient
   url(#gold-grad) không nội suy được, sẽ đổi phụt). */
.btn__dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none;
  border-radius: 50%; background-color: transparent; box-shadow: inset 0 0 0 1.5px var(--white); color: var(--white);
  transition: background-color .35s var(--ease-io), color .35s var(--ease-io);
}
.btn__dot svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover .btn__dot, .btn:focus-visible .btn__dot { background-color: var(--white); color: var(--gold); }
.btn--accent { background: var(--gold-grad); color: var(--white); }
.btn--accent:hover { background: var(--gold-grad-deep); }
.btn--lg { padding: 13px 13px 13px 26px; font-size: calc(15.5px * var(--fs)); }
.btn--lg .btn__dot { width: 32px; height: 32px; }

.btn--ghost { padding: 10px 22px; border: 1px solid var(--white-60); color: var(--white); }
.btn--ghost:hover { background: var(--white-12); }
.btn--outline { padding: 10px 24px; border: 1px solid rgba(13, 81, 72, .3); color: var(--green); }
/* rê chuột / focus: thành nút ĐẶC xanh, chữ trắng (khách, 2026-10-13), chuyển mượt */
.btn--outline { transition: background-color .35s var(--ease-io), color .35s var(--ease-io), border-color .35s var(--ease-io), transform .18s ease; }
.btn--outline:hover, .btn--outline:focus-visible { background-color: var(--green); border-color: var(--green); color: var(--white); }
/* "Nút phụ (viền kem)" của hero — viền + chữ kem trên nền tối */
.btn--cream { padding: 10px 24px; border: 1px solid rgba(246, 241, 231, .7); color: #f6f1e7; }
.btn--cream:hover { background: rgba(246, 241, 231, .12); border-color: #f6f1e7; }
.btn--lg.btn--cream, .btn--lg.btn--outline { padding: 13px 30px; }

/* Ký hiệu tiền treo (chép visa.css) */
.cur { font-size: .52em; line-height: 0; vertical-align: super; text-decoration: none; }

/* ---- Trường form ---- */
.vform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.field { display: grid; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--green); }
.field abbr { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-decoration: none; }
.field input, .field select {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--page-bg); color: var(--primary);
  font: inherit; font-size: calc(14.5px * var(--fs));
  transition: border-color .2s ease, background-color .2s ease;
}
.field input:focus, .field select:focus { background-color: var(--white); border-color: var(--green-bright); outline: none; }
.field ::placeholder { color: var(--muted); }
.field input[aria-invalid="true"] { border-color: #d0453a; background-color: #fff6f5; }
.field__err { font-size: calc(12.5px * var(--fs)); color: #c0392b; }
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  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;
}
.vform__submit { width: 100%; justify-content: space-between; margin-top: 20px; }
/* Danh sách thả xuống mượt (khách, 2026-10-14). Danh sách của <select> thường
   do hệ điều hành vẽ, CSS không chạm được → trình duyệt hỗ trợ "select tùy
   biến" (appearance: base-select — Chrome / Edge 135+, cả Android) thì vẽ
   danh sách bằng CSS: cả khung danh sách hiện dần + trượt xuống 8px (KHÔNG
   chạy từng dòng), mũi tên lật lên. Trình duyệt khác (Firefox, Safari) giữ
   danh sách gốc — vẫn dùng bình thường; iPhone mở bánh xe chọn của iOS. */
@supports (appearance: base-select) {
  .field select, .field select::picker(select) { appearance: base-select; }
  .field select {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-right: 14px; background-image: none;
  }
  .field select::picker-icon {
    content: ""; width: 16px; height: 16px; flex: none;
    background: 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") center / 16px 16px no-repeat;
    transition: rotate .3s var(--ease-out);
  }
  .field select:open::picker-icon { rotate: 180deg; }
  .field select::picker(select) {
    /* mở XUỐNG dưới ô; chỉ lật lên khi bên dưới không đủ chỗ (mặc định Chrome
       chọn phía rộng hơn → ô ở giữa màn hay mở lên trên) */
    position-try-order: normal;
    min-width: anchor-size(width); margin-block: 6px; padding: 6px;
    border: 1px solid var(--border-color); border-radius: 12px;
    background: var(--white); box-shadow: 0 18px 40px -14px rgba(13, 40, 36, .32);
    opacity: 0; transform: translateY(-8px); transform-origin: top center;
    transition: opacity .22s ease, transform .3s var(--ease-out), display .3s allow-discrete, overlay .3s allow-discrete;
  }
  .field select:open::picker(select) { opacity: 1; transform: none; }
  @starting-style { .field select:open::picker(select) { opacity: 0; transform: translateY(-8px); } }
  .field select option {
    padding: 10px 12px; border-radius: 8px;
    font-size: calc(14.5px * var(--fs)); color: var(--primary); cursor: pointer;
  }
  .field select option::checkmark { display: none; }
  .field select option:hover, .field select option:focus-visible { background: var(--mint); outline: none; }
  .field select option:checked { background: var(--mint-deep); color: var(--green); font-weight: 600; }
}

/* ---- Hộp thoại form ---- */
.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;
}
.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; } }
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); 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); }
@media (max-width: 480px) {
  .tdialog__box { padding: 34px 20px 26px; }
  .vform__grid { grid-template-columns: 1fr; }
}

/* thông báo đã gửi (form cuối + hộp thoại) */
.qform__note { margin-top: 12px; font-size: calc(12.5px * var(--fs)); line-height: 1.5; color: var(--text-medium); text-align: center; }
.qform__done { display: grid; justify-items: center; gap: 14px; padding: 18px 8px 6px; text-align: center; outline: none; }
.qform__done[hidden] { display: none; }
.qform__done svg { width: 52px; height: 52px; fill: none; stroke: url(#gold-grad) var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.qform__done p { max-width: 380px; font-size: calc(16px * var(--fs)); font-weight: 600; line-height: 1.55; color: var(--green); }

/* ---- Footer — bố cục mới theo ảnh mẫu khách (2026-10-14) ----
   Lưới 2 cột × 3 hàng: [logo | tên công ty + địa chỉ ··· icon mạng xã hội sát
   mép phải, đáy icon thẳng đáy dòng địa chỉ] · [vạch ngăn TRÀN HẾT bề ngang,
   từ mép logo tới mép phải — là ::after của lưới] · [nút tổng đài | 3 cột dàn
   đều, cột thanh toán sát mép phải]. Cột trái rộng --footer-brand-w (logo và
   nút tổng đài cùng bề ngang). Kiểu chữ / màu / ô thanh toán giữ như cũ. */
.footer { --footer-brand-w: 176px; background: var(--green); color: var(--white); }
.footer__top {
  display: grid; grid-template-columns: var(--footer-brand-w) minmax(0, 1fr);
  grid-template-areas: "brand info" "line line" "hot cols";
  column-gap: clamp(32px, 5vw, 64px); row-gap: 0;
  padding-top: 48px; padding-bottom: 64px;
}
.footer__top::after { content: ""; grid-area: line; height: 1px; margin: 32px 0 48px; background: var(--white-20); }
.footer__brand { grid-area: brand; }
.footer__logo { display: block; width: var(--footer-brand-w); max-width: 100%; height: auto; }
.footer__social { display: flex; gap: 8px; flex: none; }
.footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--white-20); border-radius: 16px; transition: background-color .2s ease; }
.footer__social a:hover { background: var(--white-12); }
.footer__social img { width: 18px; height: 18px; }
.footer__info { grid-area: info; align-self: end; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.footer h3 { font-size: calc(15px * var(--fs)); font-weight: 700; line-height: calc(19.2px * var(--fs)); text-transform: uppercase; white-space: nowrap; color: var(--white); }
.footer__address { margin-top: 8px; font-size: calc(14px * var(--fs)); line-height: 1.5; color: var(--white-80); }
/* Nút tổng đài (khách, 2026-10-14): chữ nhỏ lại cho vừa nút 176px, chừa mép trái
   22px; HAI DÒNG DÀI BẰNG NHAU (~104px) — cỡ chữ tính từ bề rộng chữ Inter đo
   được: "1800 8386" (700) = 5,264em → 19,75px; "Tổng đài miễn phí 24/7" (600)
   = 11,066em → 9,4px. Cỡ cố định (không × --fs) vì nút rộng cố định ở mọi
   màn. Đổi chữ / bề ngang nút → tính lại hai cỡ này. */
.footer__hotline {
  grid-area: hot; align-self: start;
  display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 22px;
  border-radius: var(--radius-full); background: var(--gold-grad);
}
.footer__hotline img { width: 18px; height: 18px; flex: none; }
.footer__hotline b { display: block; font-size: 19.75px; font-weight: 700; letter-spacing: 0; line-height: 1.1; color: var(--white); white-space: nowrap; }
.footer__hotline small { display: block; margin-top: 2px; font-size: 9.4px; font-weight: 600; letter-spacing: 0; line-height: 1.3; color: var(--white); white-space: nowrap; }
.footer__cols { grid-area: cols; display: flex; justify-content: space-between; column-gap: 32px; }
.footer__links { margin-top: 24px; display: grid; gap: 13.6px; }
.footer__links a { font-size: calc(14.4px * var(--fs)); line-height: calc(21.6px * var(--fs)); color: var(--white-80); }
.footer__links a:hover { color: var(--white); }
.footer__pay { display: grid; grid-template-columns: repeat(3, 100px); gap: 8px; margin-top: 24px; }
.pay { display: flex; align-items: center; justify-content: center; height: 38px; padding: 4px 8px; border: 1px solid var(--white-20); border-radius: 6px; background: var(--white); }
.pay img { display: block; width: auto; max-width: 100%; height: 16px; }
.pay--visa img { height: 15px; } .pay--mc img { height: 24px; } .pay--jcb img { height: 26px; }
.pay--vnpay img { height: 19px; } .pay--zalo img { height: 17px; } .pay--momo img { height: 26px; }
.footer__bottom { padding: 36px 16px 38px; border-top: 1px solid var(--white-10); text-align: center; }
.footer__legal { font-size: calc(13.6px * var(--fs)); line-height: calc(20.4px * var(--fs)); color: var(--white-60); }
/* hẹp hơn: 3 cột không còn đủ chỗ trên một hàng → cột thanh toán xuống dòng
   dưới hai cột liên kết (canh trái) */
@media (max-width: 1000px) {
  .footer__cols { display: grid; grid-template-columns: repeat(2, max-content); column-gap: clamp(32px, 6vw, 64px); row-gap: 40px; }
  .footer__paycol { grid-column: 1 / -1; }
}
/* điện thoại: một cột — logo + mạng xã hội, tên công ty + địa chỉ (vạch ngăn),
   nút tổng đài, hai cột liên kết, thanh toán */
@media (max-width: 760px) {
  .footer__top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "info" "line" "hot" "cols"; padding-top: 40px; padding-bottom: 44px; }
  .footer__top::after { margin: 24px 0 28px; }
  .footer__info { margin-top: 22px; gap: 16px; }
  .footer__hotline { margin-bottom: 28px; }
  .footer__hotline { justify-self: start; width: var(--footer-brand-w); }
  .footer__cols { column-gap: 32px; }
  .footer__pay { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__bottom { padding: 28px 16px 96px; }   /* chừa chỗ cho thanh cố định */
}

/* --------------------------------------------------------------------------
   4. Kiểu chữ dùng chung của trang
   -------------------------------------------------------------------------- */
/* Tiêu đề chính của mục — vai trò dòng chữ lớn ở trang tham khảo, Inter cho
   đúng bộ chữ AVORY. <em> = vế nhấn, tô vàng.
   2026-10-12 (khách): bỏ hết nhãn nhỏ .kicker phía trên → tiêu đề là dòng đầu
   tiên của mục, không còn margin-top; tiêu đề chữ ĐẬM (700, trước là 300) —
   chữ đậm rộng hơn nên cỡ tối đa hạ 62 → 56px, giãn chữ -0,025 → -0,02em. */
.statement {
  max-width: 980px; margin: 0 auto;
  font-size: clamp(30px, 4vw, 56px); font-weight: 700; line-height: 1.22; letter-spacing: -.02em;
  text-align: center; text-wrap: balance; color: var(--white);
}
.statement em, .statement .brand {
  font-style: normal; font-weight: 700;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-block: .2em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.statement--left { margin-left: 0; text-align: left; }
.statement--dark { color: var(--green); }
.statement--dark em, .statement--dark .brand { background: var(--gold-grad-deep); -webkit-background-clip: text; background-clip: text; }

/* --------------------------------------------------------------------------
   5. Hiệu ứng xuất hiện khi cuộn (kiểu trang tham khảo: mờ → rõ, nhích 24px)
   Chỉ bật khi có JS (html.js) để tắt JS vẫn thấy nội dung.
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* Tiêu đề tách từ: mỗi từ trồi lên trong khung cắt riêng */
.js [data-split] { opacity: 1; transform: none; }
/* dòng 1.22 (khách, 2026-10-13: 1.12 thì dấu chồng của dòng dưới (Â, Ẫ) chạm
   dấu nặng của dòng trên); khung cắt mỗi từ dư .2em trên / dưới để dấu chồng
   không bị cắt lúc từ trồi lên */
.split-w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .2em; margin-block: -.2em; }
/* quãng trồi 1.65em — viết bằng em, không %, để từ vàng (có thêm đệm, xem
   dưới) trồi đúng cùng quãng với từ trắng. Phải > 1.42em (dòng 1.22 + đệm
   cắt .2): ngắn hơn thì mũ dấu của chữ hoa có dấu chồng (Â, Ấ) ló ra ở mép
   dưới khung cắt trước khi tiêu đề trồi lên. */
.split-w > span { display: inline-block; transform: translateY(1.65em); transition: transform 1s var(--ease-out); transition-delay: calc(var(--w, 0) * 45ms); }
.is-in .split-w > span { transform: none; }
/* Từ VÀNG trong tiêu đề tách từ (2026-10-13, khách báo lỗi "chữ vàng không
   trồi theo, hiện sau một nhịp"): dải vàng phải nằm trên chính TỪNG TỪ đang
   chuyển động, không trên <em>/.brand cha — background-clip: text của phần tử
   cha không vẽ được chữ của con đang transform (Chrome tách con ra lớp riêng
   suốt lúc chuyển động) → chữ vàng vô hình tới khi xong rồi hiện phụt.
   Dải dọc 180° (không chéo như bản cũ) để các từ ghép liền như một dải.
   Đệm trên/dưới .2em (bù margin âm): background-clip: text chỉ tô trong hộp
   của từ — thiếu đệm thì dấu chồng (ồ, ể…) nhô quá hộp sẽ mất màu. */
.statement em .split-w > span, .statement .brand .split-w > span {
  background: linear-gradient(180deg, #f8c37f, #bd8450);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-block: .2em; margin-block: -.2em;
}
.statement--dark em .split-w > span, .statement--dark .brand .split-w > span { background-image: linear-gradient(180deg, #ebb46e, #a87240); }
.statement em:has(.split-w), .statement .brand:has(.split-w) { background: none; }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.qhead {
  position: fixed; inset: 0 0 auto; z-index: 60;
  height: var(--head-h);
  color: var(--white);
  transition: background-color .4s ease, color .4s ease, box-shadow .4s ease, transform .5s var(--ease-out);
}
.qhead::before {            /* lớp kính mờ — chỉ hiện khi đã cuộn */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(5, 10, 13, .55);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--line-dark);
  opacity: 0; transition: opacity .4s ease, background-color .4s ease;
}
.qhead.is-scrolled::before { opacity: 1; }
.qhead[data-theme="light"] { color: var(--green); }
.qhead[data-theme="light"]::before { background: rgba(246, 241, 231, .82); border-bottom-color: var(--line-light); }
.qhead__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 100%; padding-inline: var(--edge);
}
.qhead__hotline { justify-self: start; font-size: calc(13px * var(--fs)); letter-spacing: .04em; opacity: .85; }
.qhead__hotline b { font-weight: 700; }
.qhead__brand { position: relative; display: block; height: 42px; aspect-ratio: 900 / 369; }
.qhead__logo { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .4s ease; }
.qhead__logo--dark { opacity: 0; }
.qhead[data-theme="light"] .qhead__logo--light { opacity: 0; }
.qhead[data-theme="light"] .qhead__logo--dark { opacity: 1; }
.qhead__actions { justify-self: end; display: flex; align-items: center; gap: 12px; }
/* 2 nút cùng cỡ chữ với các mục menu (khách, 2026-10-13), nút thu nhỏ theo:
   cùng cao 38px (nút viền: cao cố định; nút vàng: chấm 26 + đệm 6) */
.qhead__ghost { height: 38px; padding: 0 18px; font-size: calc(12.5px * var(--fs)); }
.qhead__cta { gap: 8px; padding: 6px 6px 6px 18px; font-size: calc(12.5px * var(--fs)); }
.qhead__cta .btn__dot { width: 26px; height: 26px; }
.qhead__cta .btn__dot svg { width: 13px; height: 13px; }
.qhead[data-theme="light"] .qhead__ghost { border-color: rgba(13, 81, 72, .35); color: var(--green); }
.qhead[data-theme="light"] .qhead__ghost:hover { background: var(--mint); }

/* Menu mục trên thanh đầu trang (khách, 2026-10-13) — MỌI bề ngang.
   Ở banner: bố cục cũ (hotline · logo giữa · nút). Cuộn xuống quá 20% chiều
   cao banner, JS gắn .is-nav (đủ sớm để chuyển động xong trước khi banner
   cuộn hết): (1) hotline + nút mờ đi, (2) logo trượt sang mép trái, (3) các
   mục nảy lên lần lượt. Cuộn ngược về đầu: chạy ngược lại. Mọi chuyển động
   easing vào-ra (--ease-nav), cả chuỗi ~0,8s.
   MÉP TRÁI / PHẢI khi ở chế độ menu = mép nội dung các mục (khung .container:
   rộng tối đa --container, đệm --gutter — khách, 2026-10-13): --cx = khoảng
   cách từ mép màn tới mép nội dung, tính bằng cqw của chính .qhead (container
   — cqw = bề ngang header, đã trừ thanh cuộn như các mục). Logo đi bằng
   transform: từ giữa header (tâm W/2) sang --cx; menu đặt right: --cx (định
   vị theo .qhead). visibility đi kèm opacity (có trễ) để phần đang ẩn không
   bấm / tab tới được. Điện thoại: logo vốn ở trái (mép --edge), chỉ nhích về
   --cx; dải mục cạnh logo, vuốt ngang được, JS cuộn dải để mục đang xem luôn
   trong tầm nhìn. */
.qhead {
  --logo-w: calc(42px * 900 / 369); --ease-nav: cubic-bezier(.65, 0, .35, 1);
  --cx: max(var(--gutter), calc((100cqw - var(--container)) / 2 + var(--gutter)));
  container-type: inline-size;
}
.qhead__brand { transition: transform .6s var(--ease-nav) .12s; }
.qhead.is-nav .qhead__brand { transform: translateX(calc(var(--cx) - (100cqw - var(--logo-w)) / 2)); transition-delay: .05s; }
.qhead__hotline, .qhead__actions { transition: opacity .35s var(--ease-nav) .35s, visibility 0s linear .35s; }
.qhead.is-nav .qhead__hotline, .qhead.is-nav .qhead__actions {
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease-nav), visibility 0s linear .25s;
}
.qhead__nav {
  display: flex; align-items: center; position: absolute; top: 0; bottom: 0; right: var(--cx);
  visibility: hidden; transition: visibility 0s linear .4s;
}
.qhead.is-nav .qhead__nav { visibility: visible; transition-delay: 0s; }
.qhead__menu { display: flex; gap: clamp(20px, 2.3vw, 36px); }
.qhead__menu li {
  flex: none; opacity: 0; transform: translateY(14px);
  transition: opacity .25s var(--ease-nav), transform .3s var(--ease-nav);
  transition-delay: calc((4 - var(--k, 0)) * 20ms);
}
.qhead.is-nav .qhead__menu li {
  opacity: 1; transform: none;
  transition-duration: .4s, .5s; transition-delay: calc(.18s + var(--k, 0) * 45ms);
}
.qhead__menu a {
  position: relative; display: block; padding: 10px 0;
  font-size: calc(12.5px * var(--fs)); font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  opacity: .78; transition: opacity .3s ease;
}
/* vạch vàng dưới mục đang xem / đang rê — luôn đúng bề ngang chữ, chỉ hiện /
   tắt dần (khách, 2026-10-13: bản kéo dài từ trái sang trông to hơn lúc chạy) */
.qhead__menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1.5px;
  background: var(--gold-line); opacity: 0;
  transition: opacity .4s var(--ease-nav);
}
.qhead__menu a:hover, .qhead__menu a[aria-current] { opacity: 1; }
.qhead__menu a:hover::after, .qhead__menu a[aria-current]::after { opacity: 1; }
@media (max-width: 760px) {
  .qhead { --logo-w: calc(34px * 900 / 369); }
  .qhead.is-nav .qhead__brand { transform: translateX(calc(var(--cx) - var(--edge))); }
  /* mép dải mờ dần CHỈ phía còn mục để cuộn (JS gắn .at-start / .at-end):
     trái 14px (mục đã cuộn qua không bị cắt sắc sát logo), phải 44px. Đệm
     trái 14px = vùng mờ. Dải bắt đầu cách logo 24px (khách, 2026-10-14: sát
     logo quá) → vùng mờ không chạm logo, lúc chưa cuộn mục đầu cách logo
     38px. Cuộn hết sang phải: mục cuối dừng đúng mép nội dung (đệm phải = --cx). */
  .qhead__nav {
    --fl: 14px; --fr: 44px;
    left: calc(var(--cx) + var(--logo-w) + 24px); right: 0; padding-right: var(--cx);
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  }
  .qhead__nav.at-start { --fl: 0px; }
  .qhead__nav.at-end { --fr: 0px; }
  .qhead__nav::-webkit-scrollbar { display: none; }
  .qhead__menu { gap: 18px; padding-left: 14px; }
  .qhead__menu a { font-size: 12px; }
}
@media (max-width: 900px) {
  .qhead__ghost { display: none; }
}
@media (max-width: 760px) {
  .qhead__inner { grid-template-columns: auto 1fr; }
  .qhead__hotline { display: none; }
  .qhead__brand { height: 34px; }
  .qhead__cta { padding: 5px 5px 5px 14px; font-size: 12px; }   /* = cỡ mục menu ở điện thoại */
  .qhead__cta .btn__dot { width: 24px; height: 24px; }
}

/* --------------------------------------------------------------------------
   7. Hero — băng chuyền video + chữ ICELAND nằm sau dãy đồi
   -------------------------------------------------------------------------- */
.qhero {
  /* --lift: khung video cao hơn hero rồi kéo lên trên (phần trời trên cùng
     nằm ngoài màn) để chân trời (72,2% chiều cao video) rơi vào ~57% chiều
     cao hero — chừa nền băng phía dưới cho khối chữ. Khối chữ phải bắt đầu
     DƯỚI chân trời, không thì đè lên phần chữ ICELAND còn thấy. Điện thoại
     kéo nhiều hơn (~51%). Đổi --lift = chân trời đổi chỗ, chữ ICELAND đi
     theo (nó nằm trong khung video). Công thức: chân trời = 0,722 × (1 +
     lift) − lift. 60% → chân trời ở 55,5% chiều cao hero. */
  --lift: 60%;
  /* ICELAND chiếm ~76% bề ngang. Chữ slide 2–4 nhỏ hẳn để khác ICELAND —
     theo file khách "Slide 2 3 4 Text blend-01.svg": 86,3px trên artboard
     1400px = 6,2% bề ngang, một cỡ chung cho cả ba chữ (2026-10-13). */
  --word-fs-1: min(17vw, 34vh);     /* ICELAND */
  --word-fs-s: clamp(40px, 6.2vw, 120px);
  position: relative;
  height: 100vh; height: 100svh; min-height: 620px;
  overflow: hidden; isolation: isolate;
  background: var(--night);
}
@media (max-width: 760px) {
  .qhero { --lift: 75%; min-height: 600px; --word-fs-1: 19vw; --word-fs-s: 10.5vw; }
}

.qhero__slides { position: absolute; inset: 0; will-change: transform; }
.hslide { position: absolute; inset: 0; visibility: hidden; }
.hslide.is-active { visibility: visible; z-index: 1; }
.hslide.is-entering { visibility: visible; z-index: 2; }

/* Sân khấu: cao (100% + lift), đáy trùng đáy hero. container-type: size để
   khung bên trong tính "cover" bằng cqw / cqh. */
.hslide__stage {
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--lift) * -1);
  container-type: size; overflow: hidden;
}
/* Khung video: ĐÚNG tỉ lệ file video (16:9; bản điện thoại 608:1080), phủ kín
   sân khấu kiểu object-fit: cover, canh giữa. Video, mặt nạ và chữ ICELAND
   cùng nằm trong khung này nên luôn khớp nhau ở mọi kích thước màn hình. */
.hslide__frame {
  position: absolute; left: 50%; top: 50%;
  width: max(100cqw, calc(100cqh * 16 / 9));
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
}
.qhero[data-crop="port"] .hslide__frame { width: max(100cqw, calc(100cqh * 608 / 1080)); aspect-ratio: 608 / 1080; }
.hslide__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--night); }

/* Lớp trời: phủ đúng khung video, mặt nạ = trời. Chữ ở dưới đường chân trời /
   sau đồi bị cắt mất → video (đồi, băng) hiện ra ở đó. */
.hslide__sky {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url("assets/hero/sky-matte.png") 0 0 / 100% 100% no-repeat;
          mask: url("assets/hero/sky-matte.png") 0 0 / 100% 100% no-repeat;
}
.qhero[data-crop="port"] .hslide__sky {
  -webkit-mask-image: url("assets/hero/sky-matte-port.png");
          mask-image: url("assets/hero/sky-matte-port.png");
}
/* Đáy hộp chữ nằm đúng chân trời (top 72,2% của khung − 1em); chân chữ in
   hoa thấp hơn đáy hộp --sink để ~1/5 chữ chìm sau đồi. Ba lớp span:
   .hslide__word (vị trí), __wordScroll (lặn theo cuộn trang — JS ghi
   --sinkp), __wordIn (chứa từng chữ cái .lc — JS tách).

   Đáy chữ mờ dần (khách, 2026-10-13): mask-image trên .hslide__word (hộp
   ĐỨNG YÊN so với chân trời) — đặc tới .68em, trong suốt ở 1.1em tính từ đỉnh
   hộp (chân trời ở 1.04em) → chân chữ tan dần vào đồi thay vì bị cắt sắc.
   Vì hộp đứng yên, chữ trồi lên / lặn xuống đi xuyên qua vùng mờ: hiện dần từ
   dưới lên. Đệm trên .3em: mặt nạ phủ dư phía trên đỉnh chữ (ngoài hộp mặt
   nạ = trong suốt → sẽ cắt chữ); translate trừ thêm đúng .3em đó. */
.hslide__word {
  --sink: .26em;
  position: absolute; left: 50%; top: 72.2%;
  padding: .3em .08em 0;
  font-size: var(--word-fs-1); font-weight: 800; line-height: 1; letter-spacing: -.012em;
  white-space: nowrap;
  transform: translate(-50%, calc(-1.3em + var(--sink)));
  -webkit-mask-image: linear-gradient(180deg, #000 .68em, transparent 1.1em);
          mask-image: linear-gradient(180deg, #000 .68em, transparent 1.1em);
}
.qhero[data-crop="port"] .hslide__word { font-size: var(--word-fs-1); }
/* Cuộn trang (JS ghi --sinkp = tiến độ cuộn qua hero, 0 → 1): chữ lặn xuống
   .9em VÀ thu nhỏ dần còn 82% (khách, 2026-10-13), neo ở giữa đáy → chữ co về
   phía chân trời theo nhịp parallax; cuộn lên thì ngược lại (gắn thẳng với vị
   trí cuộn, không phải hiệu ứng chạy một lần). Giảm chuyển động: --sinkp
   luôn 0 → không lặn, không co. */
.hslide__wordScroll {
  display: block; transform-origin: 50% 100%;
  transform: translateY(calc(var(--sinkp, 0) * .9em)) scale(calc(1 - var(--sinkp, 0) * .18));
}
.hslide__wordIn { display: block; }
/* Mở trang (khách, 2026-10-13): TỪNG CHỮ CÁI nảy lên từ sau dãy đồi, lần lượt
   trái → phải cách nhau 90ms, chậm dần rồi dừng đúng chỗ — KHÔNG nảy vọt quá
   (khách bỏ hiệu ứng nảy 2026-10-13).
   Rời slide 1: lặn xuống lần lượt, nhanh hơn; quay lại slide 1: nảy lên lại.
   Dải trắng của chữ đặt trên từng chữ cái (background-clip: text không ăn
   theo con đã transform) — dải dọc nên ghép lại y như một khối. */
.hslide__wordIn .lc {
  display: inline-block;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96) 30%, rgba(225, 240, 245, .72) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translateY(1.05em);
  transition: transform 1s cubic-bezier(.19, 1, .22, 1);
  transition-delay: calc(var(--c, 0) * 90ms + 80ms);
}
.qhero.is-ready .hslide__wordIn .lc { transform: none; }
.qhero .hslide__wordIn.is-sunk .lc {
  transform: translateY(1.05em);
  transition-duration: .6s; transition-timing-function: cubic-bezier(.55, 0, .7, .2);
  transition-delay: calc(var(--c, 0) * 40ms);
}

/* Lớp tối: trên cho header, dưới cho khối chữ, trái cho cột chữ.
   Đo tương phản bằng điểm ảnh — xem README. KHÔNG có z-index (cùng
   .qhero__words): thứ tự vẽ theo thứ tự trong HTML (video → lớp tối → chữ
   lớn), để chữ lớn hoà trộn được với video — xem chú thích .hword. */
.qhero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 7, 10, .5) 0, rgba(3, 7, 10, 0) 190px),
    linear-gradient(0deg, rgba(3, 7, 10, .82) 0%, rgba(3, 7, 10, .5) 26%, rgba(3, 7, 10, 0) 48%),
    linear-gradient(90deg, rgba(3, 7, 10, .45) 0%, rgba(3, 7, 10, 0) 48%);
}

/* Chữ lớn slide 2–4 (không mặt nạ) — HOÀ TRỘN OVERLAY với video, hai lớp
   chữ trắng chồng khít: lớp dưới 100%, lớp trên (.hword__line--top) 50%
   (file khách "Slide 2 3 4 Text blend-01.svg", 2026-10-13). Overlay chữ trắng
   trên nền tối = nhân đôi độ sáng video bên dưới → chữ mang màu cực quang
   (xanh lơ trên trời xanh, xanh lá trên dải xanh lá).
   ĐIỀU KIỆN để overlay thấy được video: mix-blend-mode đặt ở từng ký tự
   (.ch), và MỌI lớp bọc ngoài cho tới .qhero (isolation: isolate) không được
   tạo nhóm cô lập — không transform, opacity, filter, z-index. Vì vậy
   .qhero__words / .qhero__shade không có z-index (vẽ theo thứ tự HTML), .hword
   canh giữa bằng grid thay vì translateY(-50%), và độ mờ 50% của lớp trên đặt
   ở chính .ch (không ở .hword__line--top). */
.qhero__words { position: absolute; inset: 0; pointer-events: none; }
.hword {
  position: absolute; left: 0; right: 0; top: 0; height: 66%;   /* tâm ở ~33% chiều cao hero */
  display: grid; align-content: center; justify-items: center; gap: 14px; text-align: center;
  font-size: var(--word-fs-s);
}
.hword__title { display: grid; }
.hword__title > .hword__line { grid-area: 1 / 1; }
.hword__line {
  display: block; overflow: hidden; padding: .2em .1em .2em; margin-bottom: -.14em;   /* đáy chừa dấu nặng (Ự, Ạ…) */
  font-weight: 700; line-height: 1; letter-spacing: -.005em; white-space: nowrap;
}
.hword__line .ch {
  display: inline-block; white-space: pre;
  color: #fff; mix-blend-mode: overlay;
  padding-top: .2em; margin-top: -.2em;            /* chừa chỗ dấu tiếng Việt trên chữ hoa */
  /* 150%, không 115%: ở 115% mép trên ô ký tự (chỗ dấu Ắ, Ê…) còn ló ~0,02em
     trong khung cắt → một vạch trắng lơ lửng trên trời ở slide khác */
  transform: translateY(150%);
  transition: transform .9s cubic-bezier(.19, 1, .22, 1);
  transition-delay: calc(var(--c, 0) * 38ms + 380ms);
}
.hword__line--top .ch { opacity: .5; }
.hword.is-on .hword__line .ch { transform: none; }
.hword.is-off .hword__line .ch { transform: translateY(-150%); transition-duration: .55s; transition-delay: calc(var(--c, 0) * 18ms); transition-timing-function: cubic-bezier(.55, 0, .7, .2); }
.hword__cap {
  font-size: calc(15px * var(--fs)); font-weight: 400; letter-spacing: .01em; color: var(--white-80);
  opacity: 0; transform: translateY(10px); transition: opacity .6s ease .7s, transform .8s var(--ease-out) .7s;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.hword.is-on .hword__cap { opacity: 1; transform: none; }
.hword.is-off .hword__cap { opacity: 0; transition-delay: 0s; }
/* Slide 4 "TRỌN VẸN CẢNH SẮC" (khách, 2026-10-13): chữ TRẮNG ĐẶC, một lớp,
   không hoà trộn overlay; thay vào đó video tối đi (.hslide--dim). Video là
   đoạn dựng 30s nhiều cảnh tuyết / băng sáng → đo từng 0,25s vùng chữ: tối 40%
   thì tên ≥ 3,8:1 (cần 3), câu phụ trắng đặc ≥ 4,1:1 — thêm bóng chữ đậm hơn
   cho câu phụ ở ~3s cảnh tuyết sáng nhất. Tên dài: điện thoại xuống 2 dòng,
   chỉ ngắt ở dấu cách — JS gói từng từ (.wd), mỗi từ tự cắt khung để ký tự
   dòng trên trồi lên không lấn sang dòng dưới. */
.hword--solid .hword__line { white-space: normal; overflow: visible; text-wrap: balance; line-height: 1.15; }
/* điện thoại: mọi tên slide được xuống dòng ở dấu cách (SĂN CỰC QUANG ~93vw) —
   2 lớp overlay xuống dòng y hệt nhau nên vẫn chồng khít */
@media (max-width: 760px) {
  .hword__line { white-space: normal; overflow: visible; text-wrap: balance; line-height: 1.15; }
}
.hword--solid .hword__line .ch { mix-blend-mode: normal; }
.hword .wd { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .2em; margin-block: -.2em; }
.hword--solid .hword__cap { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 16px rgba(0, 0, 0, .4); }
.hslide--dim .hslide__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(3, 7, 10, .4); }

/* Khối chữ chính — trái dưới, trên nền băng.
   Bố cục theo "San cuc quang text-01.svg" (khách, 2026-10-13). Khối rộng ĐÚNG
   bằng dòng SĂN CỰC QUANG (width: max-content; các phần còn lại có
   contain: inline-size nên không kéo rộng khối) → nhãn, vế phụ, đoạn dẫn và
   hàng nút cùng dừng ở một mép phải. Mọi cỡ chữ tính theo --t (cỡ tiêu đề)
   nên tỉ lệ giữ nguyên ở mọi bề ngang:
   - vế phụ 0,565 --t (36 / 63,7 trong SVG); đường chân cách đường chân tiêu đề
     0,66 --t (margin .04 --t, tính theo số đo của Inter); vạch kẻ bên trái ngang
     giữa chữ thường, cách chữ .34em.
   - đoạn dẫn 0,228 --t → đúng 2 dòng (đo bằng Inter: từ 0,245 là 3 dòng; chừa
     ~5% cho Safari). Chữ dàn đều (justify) để dòng 1 chạm mép phải. Đổi chữ
     đoạn dẫn → đo lại.
   - nhãn trên cùng 0,19 --t (11–13,2px), không vạch kẻ (khách bỏ 2026-10-13):
     3 cụm chữ + 2 dấu · dàn đều (space-between) từ mép trái tới mép phải.
   - hai nút giãn ra lấp đủ bề ngang khối. */
.qhero__copy {
  --t: clamp(56px, min(4.4vw, 7.4vh), 68px);
  position: absolute; z-index: 5; left: var(--edge); bottom: clamp(36px, 5vh, 52px);
  width: max-content; max-width: calc(100% - 2 * var(--edge));
}
.qhero__copy > :not(.qhero__title) { contain: inline-size; }
.qhero__eyebrow {
  /* margin phải âm = khoảng giãn chữ sau ký tự cuối → nét chữ cuối chạm đúng mép */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 12px; row-gap: 2px; margin-right: -.16em;
  font-size: clamp(11px, calc(var(--t) * .19), 13.2px); font-weight: 600; letter-spacing: .16em; color: var(--white-80);
}
.qhero__eyebrow .sep { color: var(--gold-light); }
.qhero__title { margin-top: 16px; display: grid; line-height: 1; }
.qhero__caps { font-size: var(--t); font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; }
.qhero__tail {
  display: flex; align-items: baseline; gap: .34em;
  margin-top: calc(var(--t) * .04);
  font-size: calc(var(--t) * .565); font-weight: 500; letter-spacing: -.005em; white-space: nowrap; color: rgba(255, 255, 255, .92);
}
/* vạch rỗng không có đường chân chữ → đáy vạch nằm trên đường chân; nhấc lên .26em = giữa chữ thường (như SVG) */
.qhero__tail::before { content: ""; flex: 1; height: 1px; background: var(--gold-line); transform: translateY(-.26em); }
.qhero__sub { margin-top: 16px; font-size: calc(var(--t) * .228); line-height: 1.65; text-align: justify; color: rgba(255, 255, 255, .84); }
.qhero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.qhero__actions .btn { flex: 1 1 auto; justify-content: center; }

/* Thẻ slide kế tiếp + chấm số — phải dưới */
.qhero__rail {
  position: absolute; z-index: 5; right: var(--edge); bottom: clamp(36px, 5vh, 52px);
  display: grid; justify-items: end; gap: 22px;
}
.hrail__cards { display: flex; gap: 14px; }
.hcard {
  --hc: clamp(112px, 9.4vw, 150px);
  position: relative; flex: none;
  width: var(--hc); aspect-ratio: 3 / 4;
  border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-deep); outline-offset: 4px;
  transition: transform .5s var(--ease-out), opacity .35s ease;
}
.hcard[hidden] { display: none; }
.hcard img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.hcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .62)); }
/* Tên trên thẻ (khách, 2026-10-13): cả 4 thẻ CÙNG một cỡ chữ, tính theo bề
   ngang thẻ để tên dài nhất "TRỌN VẸN CẢNH SẮC" (11,16em ở Inter 700, giãn
   .02em) vừa 1 dòng: cỡ = (bề ngang thẻ − 20px đệm) / 11,5 (chừa ~3%).
   1440 → 10px, ≥1600 → 11,3px. Sàn 9,5px: thẻ nhỏ hơn (laptop thấp, < ~1370px)
   thì giữ 9,5px và riêng tên dài xuống 2 dòng — không thu chữ nhỏ hơn nữa.
   Đổi / thêm tên dài hơn → đo lại số 11,5. */
.hcard__label {
  position: absolute; z-index: 1; left: 11px; right: 9px; bottom: 11px;
  display: grid; gap: 2px; text-align: left; text-wrap: balance;
  font-size: max(9.5px, calc((var(--hc) - 20px) / 11.5)); font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: .02em;
}
.hcard__label b { font-size: calc(11px * var(--fs)); font-weight: 600; color: var(--gold-light); letter-spacing: .1em; }
.hcard:hover img { transform: scale(1.06); }
.hcard.is-lifting { opacity: 0; transition: opacity .15s linear .12s; }
.hcard.is-new { animation: hcard-in .7s var(--ease-out) both; }
@keyframes hcard-in { from { opacity: 0; transform: translateX(40px); } }

.hrail__nav { display: flex; align-items: center; gap: 18px; }
.hrail__btn {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45); transition: background-color .2s ease;
}
.hrail__btn:hover { background: var(--white-12); }
.hrail__btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hrail__pause .i-play { display: none; fill: currentColor; stroke: none; }
.hrail__pause[aria-pressed="true"] .i-pause { display: none; }
.hrail__pause[aria-pressed="true"] .i-play { display: block; }
/* 01 ——— 02 03 04 (như ảnh mẫu): số đang xem kéo theo vạch, vạch vàng chạy
   theo thời gian giữ slide (JS dùng chính hoạt ảnh của vạch làm đồng hồ). */
.hdots { display: flex; align-items: center; gap: 4px; }
.hdots button {
  display: flex; align-items: center; gap: 0;
  padding: 8px 8px; font-size: calc(14px * var(--fs)); font-weight: 500; letter-spacing: .06em;
  color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; transition: color .3s ease;
}
.hdots button:hover { color: var(--white); }
.hdots button[aria-current="true"] { color: var(--white); font-weight: 700; }
.hdots__bar {
  position: relative; display: block; width: 0; height: 1px; margin-left: 0;
  background: rgba(255, 255, 255, .3); overflow: hidden;
  transition: width .7s var(--ease-io), margin-left .7s var(--ease-io);
}
.hdots button[aria-current="true"] .hdots__bar { width: clamp(70px, 8vw, 120px); margin-left: 14px; }
.hdots__bar i { position: absolute; inset: 0; background: var(--gold-line); transform: scaleX(0); transform-origin: left; }

/* Hero ở laptop thấp (1366×768, 1280×720…): kéo chân trời lên thêm (52,7%)
   để khối chữ vẫn nằm trọn dưới chân trời; thu thẻ, bớt khoảng cách. */
@media (max-height: 820px) and (min-width: 761px) {
  .qhero { --lift: 70%; }
  .qhero__copy, .qhero__rail { bottom: 36px; }
  .hcard { --hc: clamp(100px, 8vw, 124px); }
  .qhero__sub { margin-top: 10px; line-height: 1.55; }
  .qhero__actions { margin-top: 16px; }
}
/* ≤1100px: bỏ thẻ, hàng chấm số trải ngang đáy hero, khối chữ đứng trên nó */
@media (max-width: 1100px) {
  .hrail__cards { display: none; }
  .qhero__copy { bottom: 78px; --t: clamp(56px, min(6vw, 7.4vh), 64px); }
  .qhero__rail { left: var(--edge); right: var(--edge); bottom: 20px; justify-items: stretch; }
  .hrail__nav { justify-content: space-between; }
}
/* Điện thoại (khách, 2026-10-13): hero CHỈ còn video + chữ slide + hàng số
   slide, cao một màn ("sân khấu" --stage). Khối chữ chính (nhãn, tiêu đề, câu
   dẫn, nút) xuống NGAY DƯỚI sân khấu — vẫn nằm trong <section class="qhero">
   (giữ <h1>), nền xanh đen chung với dải giá trị bên dưới, ngăn bằng một vạch
   mảnh (border-top của .qvalue). Cách làm: .qhero cao tự động, đệm trên =
   --stage; các lớp tuyệt đối (video, lớp tối, chữ slide) cao đúng --stage;
   hàng số neo đáy sân khấu; khối chữ nằm trong luồng. Video vẫn parallax (trôi
   xuống khi cuộn) → khối chữ có nền riêng (::before tràn hết bề ngang, sau
   chữ, trên video) để video không lộ ra sau chữ. JS: tiến độ cuộn tính theo
   cao sân khấu, khối chữ không mờ / trôi theo cuộn ở điện thoại. */
@media (max-width: 760px) {
  .qhero {
    --stage: max(560px, 100vh); --stage: max(560px, 100svh);
    height: auto; min-height: 0; padding-top: var(--stage);
    background: var(--night-green);
  }
  .qhero__slides, .qhero__shade, .qhero__words { bottom: auto; height: var(--stage); }
  /* lớp tối: trên cho header, đáy chuyển hẳn sang nền khối chữ (liền mạch) */
  .qhero__shade {
    background:
      linear-gradient(180deg, rgba(3, 7, 10, .5) 0, rgba(3, 7, 10, 0) 160px),
      linear-gradient(0deg, #071412 0%, rgba(7, 20, 18, .55) 14%, rgba(7, 20, 18, 0) 34%);
  }
  .qhero__rail { top: calc(var(--stage) - 18px); bottom: auto; transform: translateY(-100%); }
  /* tiêu đề lấp đúng bề ngang khung (8,62 = bề rộng SĂN CỰC QUANG / cỡ chữ, Inter 800);
     đoạn dẫn ở cỡ đọc được, canh trái; nhãn tự xuống dòng */
  .qhero__copy {
    --t: min(48px, calc((100vw - 2 * var(--gutter)) / 8.62));
    position: relative; left: auto; bottom: auto;
    max-width: calc(100% - 2 * var(--gutter)); margin-inline: var(--gutter); padding-block: 34px 40px;
  }
  .qhero__copy::before {
    content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(var(--gutter) * -1); width: 100vw;
    background: var(--night-green);
  }
  /* nhãn 2 dòng (không đủ chỗ cho 1 dòng): bỏ dấu · thứ hai; dòng 1 dàn đều
     hai mép, cụm mùa luôn xuống dòng 2, canh phải */
  .qhero__eyebrow .sep ~ .sep { display: none; }
  .qhero__eyebrow .nb:last-child { flex-basis: 100%; text-align: right; }
  .qhero__actions .btn--cream { display: none; }
  .qhero__sub { margin-top: 12px; font-size: 14px; line-height: 1.6; text-align: left; }
  .qhero__actions { margin-top: 18px; gap: 10px; }
  .qhero__actions .btn--lg { padding-block: 10px; font-size: 14.5px; }
  .qhero__actions .btn--lg.btn--accent { padding-right: 10px; }
  .qhero__actions .btn--lg .btn__dot { width: 28px; height: 28px; }
  .hdots button[aria-current="true"] .hdots__bar { width: 54px; margin-left: 10px; }
  .hword { height: 68%; gap: 10px; }
  .hword__cap { max-width: 300px; font-size: 13.5px; }
}

/* --------------------------------------------------------------------------
   8. Dải giá trị dưới banner — nền đen
   -------------------------------------------------------------------------- */
.qvalue { background: var(--night-green); border-bottom: 1px solid var(--line-dark); }
/* điện thoại: khối chữ hero nằm ngay trên, cùng nền — ngăn bằng vạch mảnh */
@media (max-width: 760px) { .qvalue { border-top: 1px solid var(--line-dark); } }
/* 4 ý dàn đều (khách, 2026-10-13): mỗi ý rộng theo chữ, khoảng trống chia đều
   giữa các ý (space-between — ý đầu sát mép trái khung, ý cuối sát mép phải),
   không còn chia 4 cột bằng nhau, không còn vạch kẻ giữa các ý. */
.qvalue__list { display: flex; justify-content: space-between; column-gap: 24px; }
.qvalue__list li {
  display: flex; align-items: center; gap: 14px;
  padding: 30px 0; text-align: left;
  font-size: calc(15px * var(--fs)); font-weight: 500; line-height: 1.35; color: rgba(255, 255, 255, .9);
}
.qvalue__list svg { width: 28px; height: 28px; flex: none; fill: none; stroke: url(#gold-grad) var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* điện thoại: không đủ chỗ cho một hàng → 2 × 2, mỗi ý canh giữa ô */
@media (max-width: 760px) {
  .qvalue__list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 12px; }
  .qvalue__list li { justify-content: center; padding: 24px 0; }
}
@media (max-width: 480px) {
  .qvalue__list li { flex-direction: column; gap: 10px; padding: 22px 8px; text-align: center; font-size: 14px; }
}

/* --------------------------------------------------------------------------
   9. 02 · Chọn lý do đi — nền đen
   -------------------------------------------------------------------------- */
.qreason { padding-block: var(--sec-pad); background: var(--night-green); }
.qreason__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: clamp(56px, 6vw, 88px); }
/* Thẻ = ảnh (2026-10-13, khách): số góc trên trái; tên + câu phụ nằm trong
   ảnh, đáy thẻ, trên lớp tối (.rcard__panel::before). Rê chuột: câu phụ mở ra
   bằng lưới 0fr → 1fr (cùng nhịp thả xuống FAQ) → khung chữ bám đáy nên nở
   LÊN, tên luôn ở mép trên khung. Màn cảm ứng (không rê chuột được) luôn hiện
   câu phụ.
   Rê chuột (khách, 2026-10-13): CHỈ làm tối cả ảnh — một lớp tối đều
   (.rcard__pic::after) hiện dần, hai dải tối (đáy + đỉnh) mờ đi. Ảnh phóng to
   nhẹ 106% (khách, 2026-10-13): vào 1,2s, ra 1,6s (transition của chính ảnh),
   cùng easing chậm dần → phóng / thu êm cả hai chiều. Lúc thường vẫn giữ dải
   tối đáy cho tên thẻ dễ đọc. */
.rcard { position: relative; isolation: isolate; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: #0d1418; }
.rcard__pic { position: absolute; inset: 0; }
.rcard__pic img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.6s var(--ease-out); }
.rcard.is-in .rcard__pic img { transform: none; }
.rcard__pic::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(3, 7, 10, .6); opacity: 0; transition: opacity .55s ease;
}
/* lớp tối mỏng phía trên cho số thẻ — ảnh có trời sáng, số vàng chìm */
.rcard::before {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 96px; pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 7, 10, .55), rgba(3, 7, 10, 0));
  transition: opacity .55s ease;
}
.rcard__num {
  position: absolute; z-index: 2; top: 18px; left: 20px;
  font-size: calc(13px * var(--fs)); font-weight: 700; letter-spacing: .14em; color: var(--gold-light);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}
.rcard__panel { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 0 20px 20px; }
/* lớp tối: đặc ở đáy, nhạt dần lên trên, cao hơn khung chữ 90px */
.rcard__panel::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; top: -90px; pointer-events: none;
  background: linear-gradient(0deg, rgba(3, 7, 10, .92) 0%, rgba(3, 7, 10, .78) 40%, rgba(3, 7, 10, 0) 100%);
  transition: opacity .55s ease;
}
.rcard h3 {
  font-size: var(--rcard-title-fs, calc(15px * var(--fs))); font-weight: 700; line-height: 1.3;
  letter-spacing: .02em; text-transform: uppercase; text-wrap: balance;
}
.rcard__more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .55s var(--ease-io), opacity .4s ease; }
.rcard__more > p { min-height: 0; overflow: hidden; font-size: calc(14px * var(--fs)); line-height: 1.6; color: rgba(255, 255, 255, .88); }
/* khoảng cách tên → câu phụ bằng ô rỗng TRONG đoạn (không margin / padding —
   chúng tính vào cỡ tối thiểu của hàng lưới, thu không về 0) */
.rcard__more > p::before { content: ""; display: block; height: 8px; }
@media (hover: hover) and (pointer: fine) {
  .rcard:hover .rcard__pic img { transform: scale(1.06); transition-duration: 1.2s; }
  .rcard:hover .rcard__pic::after { opacity: 1; }
  .rcard:hover::before, .rcard:hover .rcard__panel::before { opacity: 0; }
  .rcard:hover .rcard__more { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .55s var(--ease-io), opacity .5s ease .08s; }
}
@media (hover: none) {
  .rcard__more { grid-template-rows: 1fr; opacity: 1; }
}
/* Desktop: tên thẻ 1 dòng ở toàn màn hình (khách). Khung 1280 → chữ rộng tối
   đa 243px; tên dài nhất "TẶNG NGƯỜI MÌNH THƯƠNG" đo được 225px ở 15,5px —
   còn dư > 4% (phòng Safari vẽ chữ rộng hơn). 1025–1279px tên có thể 2 dòng. */
@media (min-width: 1025px) { .rcard { --rcard-title-fs: 15.5px; } }
@media (max-width: 1024px) { .qreason__grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; } }
/* điện thoại: trượt ngang, ló thẻ sau */
@media (max-width: 640px) {
  .qreason__grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
    gap: 16px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .qreason__grid::-webkit-scrollbar { display: none; }
  .rcard { scroll-snap-align: start; }
}

/* --------------------------------------------------------------------------
   10. 03 · Hành trình nổi bật — nền xanh rêu đậm
   -------------------------------------------------------------------------- */
.qroute { padding-block: var(--sec-pad); background: var(--polar); }
/* Câu dẫn 1 dòng (khách, 2026-10-13) miễn không vượt cột thứ 3 của hàng 4
   chỉ số bên dưới (.qstats 4 cột đều) → rộng tối đa 75% khung; hẹp hơn thì
   tự xuống dòng. Khối đầu mục không còn giới hạn 860px (giữ riêng cho tiêu
   đề để chỗ xuống dòng của tiêu đề không đổi). */
.qroute__head { display: grid; grid-template-columns: minmax(0, 1fr); }
.qroute__head .statement { max-width: 860px; }
.qroute__sub { margin-top: 22px; max-width: 75%; font-size: calc(16.5px * var(--fs)); line-height: 1.7; color: rgba(255, 255, 255, .72); }

.qstats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(48px, 5vw, 72px); border-top: 1px solid var(--line-dark); }
/* số canh ĐẦU ô (nhãn dài 2 dòng không đẩy số lệch lên) */
.qstats li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: 14px; align-items: start; padding: 28px 20px 4px 0; }
.qstats li + li { padding-left: 24px; border-left: 1px solid var(--line-dark); }
.qstats svg { grid-row: 1 / 3; align-self: start; margin-top: 10px; width: 22px; height: 22px; fill: none; stroke: url(#gold-grad) var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.qstats b { font-size: clamp(44px, 4.6vw, 68px); font-weight: 700; line-height: 1; letter-spacing: -.03em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qstats span { margin-top: 8px; font-size: calc(14px * var(--fs)); line-height: 1.4; color: rgba(255, 255, 255, .78); }
@media (max-width: 900px) {
  .qroute__sub { max-width: none; }   /* chỉ số còn 2 cột — câu dẫn trải hết khung */
  .qstats { grid-template-columns: repeat(2, 1fr); }
  .qstats li:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* Băng ảnh lớn */
.qdeck { margin-top: clamp(56px, 6vw, 88px); }
.qdeck__stage {
  position: relative; width: min(100% - 2 * var(--edge), 1440px); margin-inline: auto;
  aspect-ratio: 16 / 8.2; max-height: 82vh; min-height: 440px;
  border-radius: 18px; overflow: hidden; background: #071512;
  touch-action: pan-y;
}
.qday { position: absolute; inset: 0; visibility: hidden; opacity: 0; transition: opacity .9s ease, visibility 0s linear .9s; }
.qday.is-active { visibility: visible; opacity: 1; z-index: 1; transition: opacity .9s ease; }
.qday__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); transition: transform 2.4s var(--ease-out); }
.qday.is-active .qday__media { transform: none; }
.qday::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(2, 10, 9, .62) 0%, rgba(2, 10, 9, 0) 45%), linear-gradient(90deg, rgba(2, 10, 9, .35), rgba(2, 10, 9, 0) 45%); }
.qday__info {
  position: absolute; z-index: 1; left: clamp(20px, 3.4vw, 48px); bottom: clamp(20px, 3.4vw, 48px);
  width: min(440px, calc(100% - 40px)); padding: 26px 28px 28px;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(6, 22, 20, .5);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(18px); transition: opacity .7s ease .25s, transform .9s var(--ease-out) .25s;
}
.qday.is-active .qday__info { opacity: 1; transform: none; }
.qday__day { display: flex; align-items: center; gap: 10px; font-size: calc(12.5px * var(--fs)); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-light); }
.qday__badge { padding: 3px 10px; border-radius: var(--radius-full); background: var(--gold-grad); color: var(--white); font-size: calc(10.5px * var(--fs)); letter-spacing: .12em; }
/* Ngày 3 (đêm săn cực quang): nhấn bằng dải xanh biển → xanh cực quang thay vàng.
   Chữ trên nền tối dùng màu sáng của dải (#003b69 quá tối để làm chữ); chữ
   trắng trong nhãn có bóng xanh đậm vì đầu phải của dải (#50e37b) rất sáng. */
.qday--hero .qday__day { color: var(--aurora-light); }
.qday--hero .qday__badge { background: var(--aurora-grad); text-shadow: 0 1px 3px rgba(0, 42, 74, .7); }
.qday h3 { margin-top: 10px; font-size: clamp(26px, 2.6vw, 38px); font-weight: 300; line-height: 1.12; letter-spacing: -.02em; }
.qday__info p:not(.qday__day) { margin-top: 10px; font-size: calc(15px * var(--fs)); line-height: 1.6; color: rgba(255, 255, 255, .86); }
.qday__info .qday__note { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: calc(13px * var(--fs)); color: rgba(255, 255, 255, .7); }

.qdeck__arrow {
  position: absolute; z-index: 2; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color .25s ease, transform .25s ease;
}
.qdeck__arrow:hover { background: rgba(255, 255, 255, .24); }
.qdeck__arrow svg { width: 20px; height: 20px; fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qdeck__arrow--prev { left: 20px; }
.qdeck__arrow--next { right: 20px; }
.qdeck__count { position: absolute; z-index: 2; top: 20px; right: 24px; font-size: calc(13px * var(--fs)); letter-spacing: .12em; color: rgba(255, 255, 255, .72); font-variant-numeric: tabular-nums; }
.qdeck__count b { color: var(--white); font-weight: 700; }

.qdeck__tabs { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 22px; }
.qdeck__tabs button {
  position: relative; display: grid; gap: 4px; width: 100%; padding: 16px 12px 4px 0; text-align: left;
  font-size: calc(14px * var(--fs)); font-weight: 500; line-height: 1.35; color: rgba(255, 255, 255, .55);
  transition: color .3s ease;
}
.qdeck__tabs button::before { content: ""; position: absolute; left: 0; right: 12px; top: 0; height: 1px; background: var(--line-dark); }
.qdeck__tabs button::after { content: ""; position: absolute; left: 0; right: 12px; top: 0; height: 2px; background: var(--gold-line); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.qdeck__tabs button span { font-size: calc(11.5px * var(--fs)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.qdeck__tabs button:hover, .qdeck__tabs button[aria-current="true"] { color: var(--white); }
.qdeck__tabs button[aria-current="true"]::after { transform: none; }
.qdeck__tabs button[aria-current="true"] span { color: var(--gold-light); }
.qdeck__tabs button[data-to="1"]::after { background: var(--aurora-grad); }
.qdeck__tabs button[data-to="1"][aria-current="true"] span { color: var(--aurora-light); }
@media (max-width: 900px) {
  .qdeck__stage { aspect-ratio: auto; height: min(78vh, 620px); min-height: 480px; }
  .qdeck__tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .qdeck__tabs::-webkit-scrollbar { display: none; }
  .qdeck__arrow { top: auto; bottom: auto; translate: none; top: 16px; width: 44px; height: 44px; }
  .qdeck__arrow--prev { left: auto; right: 72px; }
  .qdeck__arrow--next { right: 16px; }
  .qdeck__count { top: auto; right: auto; left: 22px; top: 28px; }
}
@media (max-width: 560px) {
  .qday__info { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 20px 20px 22px; }
}

/* Lịch trình chi tiết (đóng sẵn) */
.qplan { margin-top: clamp(48px, 5vw, 72px); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.qplan summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-size: clamp(19px, 1.7vw, 24px); font-weight: 300; letter-spacing: -.01em;
}
.qplan summary::-webkit-details-marker { display: none; }
.qplan__plus, .qa summary i { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); transition: transform .4s var(--ease-out), background-color .25s ease; }
.qplan__plus::before, .qplan__plus::after, .qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; translate: -50% -50%; transition: transform .4s var(--ease-out); }
.qplan__plus::after, .qa summary i::after { transform: rotate(90deg); }
/* + thành − : theo .is-open (JS) để đổi ngay lúc bấm đóng; [open] cho khi không có JS */
html:not(.js) .qplan[open] .qplan__plus::after, html:not(.js) .qa[open] summary i::after,
.qplan.is-open .qplan__plus::after, .qa.is-open summary i::after { transform: rotate(0deg); }
.qplan summary:hover .qplan__plus { background: var(--white-12); }
.qplan summary > span:first-child { transition: color .35s ease, transform .5s var(--ease-out); }
.qplan.is-open summary > span:first-child { color: var(--gold-light); }
@media (hover: hover) and (pointer: fine) {
  .qplan summary:hover > span:first-child { color: var(--gold-light); transform: translateX(10px); }
}
/* khoảng trên/dưới bằng hai ô rỗng trải hết hàng, không bằng padding (lý do
   như .qa__inner — để thả xuống thu về đúng 0) */
.qplan__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; padding: 0; }
.qplan__list::before, .qplan__list::after { content: ""; grid-column: 1 / -1; }
.qplan__list::before { height: 4px; }
.qplan__list::after { height: 34px; }
.qplan__list li { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-dark); font-size: calc(14.5px * var(--fs)); line-height: 1.55; color: rgba(255, 255, 255, .8); }
.qplan__list b { font-size: calc(12px * var(--fs)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); padding-top: 2px; }
@media (max-width: 1024px) { .qplan__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .qplan__list { grid-template-columns: 1fr; } .qplan__list li { grid-template-columns: 72px 1fr; } }
.qroute__cta { margin-top: 44px; text-align: center; }

/* --------------------------------------------------------------------------
   11. 04 · Vì sao AVORY — nền xanh thép
   -------------------------------------------------------------------------- */
/* Nền ảnh (khách, 2026-10-13): người chụp cực quang trên bãi biển + lớp tối.
   Desktop (≥1025px): ảnh đặt theo CỘT TIÊU ĐỀ chứ không "cover" cả mục — cover
   thì đầu người rơi vào giữa tiêu đề (ảnh gần cùng tỉ lệ với mục, không còn
   chỗ xê dịch). Ảnh nằm trong .qmerit__head (position: relative):
   - mốc = điểm cách mép trái cột 36% bề ngang cột, 24px dưới đáy tiêu đề;
   - translate(-25%, -30.8%) đưa đúng chỗ đó về giữa người + chân máy (25% bề
     ngang ảnh) và đỉnh mũ (30,8% chiều cao ảnh) → người luôn đứng ngay dưới
     tiêu đề, dù tiêu đề cao bao nhiêu;
   - bề ngang ảnh đủ để phủ kín mục: ≥2000px (để mép trên ảnh vượt mép trên mục
     ở 1440 × 900) và đủ chạm cả mép trái lẫn mép phải. --mx = vị trí mốc trong
     mục, tính lại từ khung .container (1280, đệm --gutter) + cột 5/12 + khe lưới
     bằng đơn vị cqw (.qmerit là container). Màn rất rộng (≥1920) ảnh to hơn nên
     chân người bị cắt bớt ở đáy mục.
   Lớp tối (::before): MỘT màu tối đều phủ cả mục — không dải chuyển, không
   quầng tối riêng sau tiêu đề / lưới chữ (khách bỏ 2026-10-13: thấy thành
   mảng tối lem). Độ đậm chọn theo số đo tương phản (README). */
.qmerit { position: relative; isolation: isolate; overflow: hidden; container-type: inline-size; padding-block: var(--sec-pad); background: #07131a; }
.qmerit::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(4, 12, 18, .66); }
.qmerit__head { position: relative; }
.qmerit__bg {
  --cl: calc((100cqw - min(100cqw, var(--container))) / 2 + var(--gutter));
  --hw: calc((min(100cqw, var(--container)) - 2 * var(--gutter) - clamp(40px, 6vw, 100px)) * 5 / 12);
  --mx: calc(var(--cl) + var(--hw) * .36);
  position: absolute; z-index: -2; left: 36%; top: calc(100% + 24px);
  width: max(2000px, calc(var(--mx) / .25 + 8px), calc((100cqw - var(--mx)) / .75 + 8px));
  max-width: none; height: auto; aspect-ratio: 2000 / 1121;
  transform: translate(-25%, -30.8%);
  pointer-events: none; user-select: none;
}
.qmerit__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 100px); align-items: start; }
.qmerit__head .statement { font-size: clamp(30px, 3.4vw, 48px); }
/* 4 giá trị, 2 × 2. Mỗi <li> trải 3 hàng (icon | tên | mô tả) và dùng
   subgrid — cùng quy tắc với 5 bước Visa: hai ô chung một hàng thì tên của
   chúng chung một hàng lưới (cao bằng tên dài nhất), mô tả bắt đầu cùng một
   mốc, ở MỌI bề ngang (2026-10-12, khách). Đường kẻ: chỉ còn chữ thập giữa
   (vạch dọc giữa hai cột + vạch ngang giữa hai hàng) — bỏ vạch trên cùng và
   dưới cùng (khách). Hai cột cách nhau --mg (32px — khách 2026-10-14: tấm
   sáng của các ô chồng lên nhau); chữ thập nằm giữa khe đó. */
.qmerit__grid { --mg: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--mg); row-gap: 0; }
.qmerit__grid li {
  position: relative; isolation: isolate;
  display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start;
  padding: 40px 30px 44px;
}
/* Đường kẻ chữ thập vẽ bằng ::after của từng ô (không phải border của <li>)
   để mờ đi / hiện lại bằng opacity khi rê chuột vào lưới — <li> đã có
   transition của hiệu ứng hiện dần [data-reveal], thêm border-color vào đó sẽ
   đè mất. Ô chẵn: vạch dọc bên trái (dời ra giữa khe cột); ô từ thứ 3: vạch
   ngang bên trên (ô 3 kéo dài sang phải, ô 4 sang trái, tới giữa khe → hai
   nửa vạch ngang nối liền ở vạch dọc). */
.qmerit__grid li::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 0 solid var(--line-dark); transition: opacity .45s ease;
}
.qmerit__grid li:nth-child(even)::after { border-left-width: 1px; left: calc(var(--mg) / -2); }
.qmerit__grid li:nth-child(n+3)::after { border-top-width: 1px; }
.qmerit__grid li:nth-child(3)::after { right: calc(var(--mg) / -2); }
.qmerit__ico {
  position: relative; isolation: isolate; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid rgba(248, 195, 127, .35);
  transition: transform .55s var(--ease-out), border-color .45s ease;
}
/* nền vàng đặc của icon khi sáng (mờ hiện bằng opacity) */
.qmerit__ico::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 50%; background: var(--gold-grad); opacity: 0; transition: opacity .45s ease; }
.qmerit__ico svg { width: 26px; height: 26px; fill: none; stroke: url(#gold-grad) var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: filter .45s ease; }
.qmerit h3 { margin-top: 22px; font-size: calc(19px * var(--fs)); font-weight: 600; line-height: 1.3; transition: color .45s ease; }
/* mô tả trắng 80% (không phải 70% như các mục khác): nền ảnh chỉ phủ một lớp tối đều 66% */
.qmerit p { margin-top: 10px; font-size: calc(15px * var(--fs)); line-height: 1.7; color: rgba(255, 255, 255, .8); transition: color .45s ease; }
/* tấm sáng sau ô: viền vàng mảnh + ánh vàng từ góc trên trái. Ngang: nở ra
   khe cột 12px (khe 32px → hai tấm cạnh nhau cách 8px); dọc: lùi vào trong ô
   6px (hai hàng cách 12px) — các tấm KHÔNG chồng nhau (khách, 2026-10-14).
   Chữ cách mép tấm ~36px ngang (desktop), 34px trên, 38px dưới. */
.qmerit__grid li::before {
  content: ""; position: absolute; inset: 6px -12px; z-index: -1; border-radius: 16px; pointer-events: none;
  background: radial-gradient(120% 100% at 0% 0%, rgba(248, 195, 127, .12), rgba(255, 255, 255, .03) 65%);
  border: 1px solid rgba(248, 195, 127, .22);
  opacity: 0; transform: scale(.96); transition: opacity .5s ease, transform .6s var(--ease-out);
}
/* Rê chuột: giống trạng thái "sáng" của 5 bước Visa — icon thành tròn vàng
   đặc (không quầng ngoài), nét icon sẫm lại (filter brightness: chuyển mượt được, còn
   đổi stroke từ gradient sang màu thì đổi phụt), tên chuyển vàng, mô tả sáng
   lên, tấm sáng hiện dần sau ô. */
@media (hover: hover) and (pointer: fine) {
  /* rê vào bất kỳ ô nào: cả chữ thập mờ đi (vạch nào cũng chạm ô đang rê —
     mờ riêng nửa vạch trông cụt), rời lưới thì hiện lại */
  .qmerit__grid:hover li::after { opacity: 0; }
  .qmerit__grid li:hover::before { opacity: 1; transform: none; }
  .qmerit__grid li:hover .qmerit__ico { transform: translateY(-4px); border-color: rgba(248, 195, 127, 0); }   /* không quầng ngoài (khách, 2026-10-14) */
  .qmerit__grid li:hover .qmerit__ico::before { opacity: 1; }
  .qmerit__grid li:hover .qmerit__ico svg { filter: brightness(.28); }
  .qmerit__grid li:hover h3 { color: var(--gold-light); }
  .qmerit__grid li:hover p { color: rgba(255, 255, 255, .92); }
}
/* Desktop (≥1025px): mô tả 14px, đệm ngang ô 24px. Nội dung 2026-10-14 dài
   hơn bản cũ nên mô tả 3 dòng ở toàn màn hình (quy tắc "đúng 2 dòng" của bản
   cũ không giữ được ở cỡ chữ đọc được); subgrid vẫn giữ tên + mô tả hai ô
   cùng hàng thẳng hàng. */
@media (min-width: 1025px) {
  .qmerit__grid li { padding-inline: 24px; }
  .qmerit p { font-size: 14px; }
}
@media (max-width: 1024px) {
  .qmerit__inner { grid-template-columns: 1fr; }
  .qmerit::before { background: rgba(4, 12, 18, .74); }   /* tiêu đề nằm trên vệt cực quang sáng nhất */
  .qmerit__head { position: static; }
  .qmerit__bg { left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 25% 55%; transform: none; }
}
@media (max-width: 560px) {
  .qmerit__grid { --mg: 0px; grid-template-columns: minmax(0, 1fr); }
  .qmerit__grid li { padding: 28px 4px; }
  .qmerit__grid li::before { inset: 6px -12px; }
  .qmerit__grid li:nth-child(even)::after { border-left-width: 0; }
  .qmerit__grid li:nth-child(n+2)::after { border-top-width: 1px; }
}

/* --------------------------------------------------------------------------
   12. 05 · Trải nghiệm thật — nền ghi ấm (bắt đầu nửa sáng)
   -------------------------------------------------------------------------- */
/* container: --w của băng ảnh tính theo bề ngang mục (cqw — không gồm thanh cuộn như vw) */
.qreal { padding-block: var(--sec-pad); background: var(--mist); color: var(--ink); overflow: hidden; container-type: inline-size; }

/* Thư viện ảnh (2026-10-13, khách) — BỐ CỤC chép đúng thông số "Photo
   gallery" của highlandbase.is (đọc từ CSS + cấu hình Swiper của họ):
   - khung cao 70vh; ≥1400px hiện 3,5 ảnh (1 giữa + 2 kề + 2 góc ¼ ở hai mép),
     khe 24px, khung đệm ngang 24px → rộng ảnh = (bề ngang − 48 − 2,5 × 24) / 3,5;
   - ảnh giữa cao 98% khung, hai ảnh kề 90%, các ảnh khác 70% (trừ 8px), canh
     giữa theo chiều dọc → chiều cao theo MÀN (vh), không theo bề ngang ảnh;
     ở 1440 × 900: rộng 376, cao 609 / 559 / 433 — khớp số đo trên trang họ.
   - Họ dùng 3,5 ảnh từ 1400px; ở đây từ 1100px (laptop 1280/1366 vẫn ra bố
     cục toàn màn), 761–1099px 1,5 ảnh như họ, điện thoại 1,25 ảnh.
   Nút ← → tròn xanh (kiểu trang Châu Âu) đặt trong phần ¼ ảnh ở hai mép, như
   vị trí nút vuông của họ. CHUYỂN ĐỘNG theo băng ảnh trang Châu Âu: cỡ + vị
   trí chuyển .6s var(--ease-out), tự chạy 2s/ảnh (script).
   Vị trí: .qgal__track bắt đầu ở giữa khung (left: 50%) rồi lùi một đoạn
   = --gi × (rộng + khe) + nửa bề ngang → ảnh thứ --gi nằm đúng giữa, chỉ cần
   CSS tính — script chỉ ghi --gi (thứ tự ảnh) và lớp is-mid / is-near.
   KHÔNG đặt tên --i: đó là biến độ trễ hiện dần của [data-reveal] (90ms × --i)
   — từng trùng tên, ảnh giữa ở vị trí 13 thì băng ảnh hiện trễ 1,2s. */
.qgal {
  --gap: 24px;
  --w: calc((100cqw - 48px - 2.5 * var(--gap)) / 3.5);
  --gh: 70vh;
  --h-far: calc(var(--gh) * .7 - 8px);
  --h-near: calc(var(--gh) * .9 - 8px);
  --h-mid: calc(var(--gh) * .98 - 8px);
  position: relative; margin-top: 48px;
  height: var(--gh);
  touch-action: pan-y;
}
@media (max-width: 1099px) {
  .qgal { --w: calc((100cqw - 48px - .5 * var(--gap)) / 1.5); --gh: min(70vh, calc(var(--w) * 1.1)); }
}
.qgal__track {
  position: absolute; top: 0; bottom: 0; left: 50%;
  display: flex; align-items: center; gap: var(--gap);
  transform: translateX(calc(-1 * (var(--gi, 0) * (var(--w) + var(--gap)) + var(--w) / 2)));
  transition: transform .6s var(--ease-out);
}
.qgal__item {
  position: relative; flex: 0 0 var(--w); height: var(--h-far);
  border-radius: 10px; overflow: hidden; background: #cfc8bd; cursor: pointer;
  transition: height .6s var(--ease-out);
}
.qgal__item.is-near { height: var(--h-near); }
.qgal__item.is-mid { height: var(--h-mid); cursor: default; }
/* lúc script nhảy về bộ ảnh giữa (vòng vô tận) — tắt chuyển động, không thấy */
.qgal.no-anim .qgal__track, .qgal.no-anim .qgal__item { transition: none; }
.qgal__item img { width: 100%; height: 100%; object-fit: cover; user-select: none; transition: transform 1.2s var(--ease-out); }
.qgal__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 38%); pointer-events: none; }
.qgal__item span {
  position: absolute; z-index: 1; left: 16px; bottom: 14px;
  font-size: calc(12px * var(--fs)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--white);
}
/* nút ← → hai mép, giữa chiều cao (như highlandbase); kiểu nút tròn xanh như
   băng ảnh trang Châu Âu */
.qgal__arrow {
  position: absolute; z-index: 2; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--green); color: var(--white); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5);
  transition: background .2s ease, transform .2s ease;
}
.qgal__arrow--prev { left: 24px; }
.qgal__arrow--next { right: 24px; }
.qgal__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  .qgal__arrow:hover { background: var(--gold-grad); transform: translateY(-2px); }
  .qgal__item:not(.is-mid):hover img { transform: scale(1.05); }
}
@media (max-width: 760px) {
  .qgal { --gap: 12px; --w: calc((100cqw - 24px - .25 * var(--gap)) / 1.25); --gh: calc(var(--w) * 1.45); margin-top: 36px; }
  .qgal__arrow { width: 40px; height: 40px; }
  .qgal__arrow--prev { left: 8px; }
  .qgal__arrow--next { right: 8px; }
}

/* --------------------------------------------------------------------------
   13. 06 · Visa Schengen — nền kem
   -------------------------------------------------------------------------- */
.qvisa { padding-block: var(--sec-pad); background: var(--snow); color: var(--ink); }
/* 5 bước: lưới 5 cột × 3 hàng (số | tên bước | mô tả). Mỗi <li> trải 3 hàng
   và dùng subgrid → tên bước của cả 5 cột chung MỘT hàng, cao bằng tên dài
   nhất (khi màn hẹp lại tên xuống 2 dòng) → mọi dòng mô tả bắt đầu cùng một
   mốc (2026-10-12, khách yêu cầu). Khoảng cách dọc bằng margin trong ô, nên
   row-gap của lưới = 0. */
.qsteps {
  position: relative; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: auto auto auto;
  column-gap: 28px; row-gap: 0; margin-top: clamp(56px, 6vw, 84px);
}
.qsteps::before { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 1px; background: linear-gradient(90deg, rgba(189, 132, 80, .55), rgba(189, 132, 80, .15)); }
.qsteps li { position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.qsteps b {
  position: relative; isolation: isolate; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--snow); border: 1px solid rgba(189, 132, 80, .55);
  font-size: calc(17px * var(--fs)); font-weight: 600; letter-spacing: .04em; color: var(--gold-dark);
}
/* lớp vàng đặc của số đang sáng (mờ hiện / mờ tắt bằng opacity) */
.qsteps b::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 50%;
  background: var(--gold-grad); opacity: 0;
}
.qsteps h3 { margin-top: 22px; font-size: calc(16px * var(--fs)); font-weight: 700; line-height: 1.3; letter-spacing: .03em; text-transform: uppercase; color: var(--green); }
.qsteps p { margin-top: 10px; font-size: calc(14.5px * var(--fs)); line-height: 1.65; color: var(--text-medium); }

/* Số sáng lần lượt — vòng 10s như "chạy đèn" của trang Châu Âu, mỗi bước
   sáng 2s. "Sáng" = số trắng trên nền vàng đặc + quầng vàng nhạt, tên bước
   nâu vàng đậm, mô tả tối + đậm (đậm bằng text-shadow ngang 0,35px, không đổi
   font-weight → chữ không rộng ra, không xuống dòng lại, hàng subgrid không
   nhảy). Số có bóng chữ nâu mờ để không mờ mất lúc đổi vàng đậm → trắng.
   2026-10-13 (khách: rê chuột phải hiện dần / tắt dần): bỏ @keyframes, dùng
   LỚP .is-lit do JS gắn lần lượt mỗi 2s (cuc-quang.js "5 bước Visa") +
   transition. Một bộ transition cho cả vòng tự chạy lẫn rê chuột: vào trạng
   thái sáng 0,8s ease-out (khai báo ở trạng thái sáng), về trạng thái thường
   1s ease-in-out (khai báo ở trạng thái thường); bước trước tắt dần đúng lúc
   bước sau hiện dần → chéo nhau. (Bản keyframes không làm được: animation
   đè mọi transition, rê chuột chỉ đổi phụt bằng !important.) */
:root { --gold-ink: #8f5f33; }
.qsteps b { text-shadow: 0 1px 3px rgba(110, 66, 28, 0); transition: color 1s ease-in-out, border-color 1s ease-in-out, box-shadow 1s ease-in-out, text-shadow 1s ease-in-out; }
.qsteps b::before { transition: opacity 1s ease-in-out; }
.qsteps h3 { transition: color 1s ease-in-out; }
.qsteps p { text-shadow: 0 0 0 rgba(26, 43, 38, 0); transition: color 1s ease-in-out, text-shadow 1s ease-in-out; }
.qsteps li.is-lit b {
  color: var(--white); border-color: rgba(189, 132, 80, 0); box-shadow: 0 0 0 7px rgba(219, 164, 104, .2); text-shadow: 0 1px 3px rgba(110, 66, 28, .55);
  transition-duration: .8s; transition-timing-function: var(--ease-out);
}
.qsteps li.is-lit b::before { opacity: 1; transition-duration: .8s; transition-timing-function: var(--ease-out); }
.qsteps li.is-lit h3 { color: var(--gold-ink); transition-duration: .8s; transition-timing-function: var(--ease-out); }
.qsteps li.is-lit p { color: var(--ink); text-shadow: .35px 0 0 rgba(26, 43, 38, 1); transition-duration: .8s; transition-timing-function: var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .qsteps li { cursor: default; }
  .qsteps li:hover b {
    color: var(--white); border-color: rgba(189, 132, 80, 0); box-shadow: 0 0 0 7px rgba(219, 164, 104, .2); text-shadow: 0 1px 3px rgba(110, 66, 28, .55);
    transition-duration: .8s; transition-timing-function: var(--ease-out);
  }
  .qsteps li:hover b::before { opacity: 1; transition-duration: .8s; transition-timing-function: var(--ease-out); }
  .qsteps li:hover h3 { color: var(--gold-ink); transition-duration: .8s; transition-timing-function: var(--ease-out); }
  .qsteps li:hover p { color: var(--ink); text-shadow: .35px 0 0 rgba(26, 43, 38, 1); transition-duration: .8s; transition-timing-function: var(--ease-out); }
}
@media (max-width: 1024px) {
  .qsteps { grid-template-columns: 1fr; grid-template-rows: none; gap: 0; max-width: 640px; }
  .qsteps::before { left: 30px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, rgba(189, 132, 80, .55), rgba(189, 132, 80, .15)); }
  .qsteps li { grid-row: auto; grid-template-rows: none; grid-template-columns: 60px 1fr; column-gap: 22px; padding-bottom: 28px; }
  .qsteps b { grid-row: 1 / 3; }
  .qsteps h3 { margin-top: 8px; }
}
.qvisa__fee {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  margin-top: clamp(48px, 5vw, 72px); padding: 28px 32px;
  border-radius: 18px; background: var(--green); color: var(--white);
}
.qvisa__fee > svg { width: 44px; height: 44px; fill: none; stroke: url(#gold-grad) var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.qvisa__feeTitle { font-size: clamp(19px, 1.7vw, 24px); font-weight: 600; line-height: 1.3; }
.qvisa__feeNote { margin-top: 6px; font-size: calc(13.5px * var(--fs)); color: rgba(255, 255, 255, .72); }
@media (max-width: 900px) {
  .qvisa__fee { grid-template-columns: auto 1fr; padding: 26px 22px; }
  .qvisa__fee .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 480px) { .qvisa__fee .btn { justify-self: stretch; justify-content: space-between; white-space: normal; } }

/* --------------------------------------------------------------------------
   14. 07 · Lịch khởi hành & giá — nền ghi ấm, 4 "vé"
   -------------------------------------------------------------------------- */
.qdepart { padding-block: var(--sec-pad); background: var(--mist); color: var(--ink); }
.qtickets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: clamp(48px, 5vw, 72px); }
/* Vé có hai khuyết bán nguyệt THẬT ở vạch xé (2026-10-13, khách: bản trước
   là chấm tròn tô màu nền đè lên, lộ rõ khi có bóng). Nền vé là lớp riêng
   ::before: hai lớp gradient tròn — mỗi lớp phủ một nửa vé, có một lỗ TRONG
   SUỐT ở mép trên / mép dưới đúng vị trí vạch xé (100% − --stub). Bóng đổ là
   filter: drop-shadow trên CHÍNH lớp đó → bóng ôm đúng hình đã khuyết (box-
   shadow là hình chữ nhật, mask thì cắt mất bóng); chữ ở lớp nội dung nên
   không bị đổ bóng. Vạch xé nét đứt là ::before của cuống vé, chỉ chạy giữa
   hai khuyết. */
/* Rê chuột (khách, 2026-10-13): nền vé trắng → #fffbf3 + viền vàng mảnh ôm
   đúng hình vé (cả hai khuyết), hiện dần / tắt dần .5s. Màu nền / màu viền là
   biến @property kiểu <color> nên transition được (gradient thì không); viền
   = 4 drop-shadow lệch 1px bốn phía trên chính lớp nền đã khuyết (border /
   outline chỉ vẽ được hình chữ nhật). Biến + transition đặt trên CHÍNH lớp
   nền ::before — đặt trên .qticket thì transition của [data-reveal] (độ đặc
   hiệu cao hơn) đè mất, màu đổi phụt. */
@property --tk-bg { syntax: '<color>'; inherits: true; initial-value: #fff; }
@property --tk-line { syntax: '<color>'; inherits: true; initial-value: rgba(189, 132, 80, 0); }
.qticket {
  --stub: 236px; --notch: 12px;
  position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto;
  transition: transform .5s var(--ease-out);
}
.qticket::before {
  --tk-bg: #fff; --tk-line: rgba(189, 132, 80, 0);
  transition: --tk-bg .5s var(--ease-io), --tk-line .5s var(--ease-io);
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 18px;
  background:
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, transparent calc(var(--notch) - .5px), var(--tk-bg) var(--notch)) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, transparent calc(var(--notch) - .5px), var(--tk-bg) var(--notch)) bottom / 100% 51% no-repeat;
  filter:
    drop-shadow(1px 0 0 var(--tk-line)) drop-shadow(-1px 0 0 var(--tk-line))
    drop-shadow(0 1px 0 var(--tk-line)) drop-shadow(0 -1px 0 var(--tk-line))
    drop-shadow(0 1px 1px rgba(0, 0, 0, .05)) drop-shadow(0 14px 18px rgba(13, 81, 72, .12));
}
/* Bố cục vé: vé là lưới 3 hàng; phần chính và cuống vé là subgrid trải cả 3
   hàng (route | "từ" · ngày | giá · chặng bay | nút) → các hàng của hai bên
   luôn thẳng nhau. Hàng 1 + 3 canh đường chân chữ; hàng 2 (ngày · giá) canh
   GIỮA theo chiều dọc (khách, 2026-10-14). Nút "Xem hành trình" canh giữa cuống vé (từ vạch xé tới mép
   phải; đệm trái/phải cuống bằng nhau). */
.qticket__main, .qticket__stub { grid-row: 1 / 4; display: grid; grid-template-rows: subgrid; align-items: baseline; }
.qticket__main { grid-column: 1; padding: 26px 30px 24px; }
.qticket__route { font-size: calc(12.5px * var(--fs)); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dark); }
/* ngày đi: 1,25 × cỡ 15,625px trước đó = 19,53125px × --fs (khách 2026-10-14 —
   thử 1,5× trước, thấy to quá),
   canh GIỮA theo chiều dọc với giá (cùng hàng lưới, align-self: center).
   Chữ ngày không xuống dòng, rộng ~9,9em → ở 2 cột vé hẹp (~1101–1190px) phần
   chính của vé không đủ chỗ (vé tràn khung) → cỡ chữ co theo bề ngang ô vé:
   (nửa .qtickets − nửa khe 11px − cuống 236px − đệm 60px) / 10,2em. Rộng hơn
   thì giữ đủ cỡ; 1 cột vé (≤1100px) luôn đủ cỡ. */
.qtickets { container-type: inline-size; }
.qticket__date { margin-top: 8px; font-size: min(calc(19.53125px * var(--fs)), calc((50cqw - 11px - 296px) / 10.2)); font-weight: 700; letter-spacing: .01em; line-height: 1.2; color: var(--green); white-space: nowrap; align-self: center; }
.qticket__legs { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: calc(12px * var(--fs)); font-weight: 600; letter-spacing: .12em; color: var(--text-medium); }
.qticket__legs i { flex: 1; max-width: 70px; height: 1px; background: repeating-linear-gradient(90deg, rgba(13, 81, 72, .45) 0 4px, transparent 4px 8px); }
.qticket__stub {
  grid-column: 2; position: relative; width: var(--stub); justify-items: start;
  padding: 24px 26px;
}
.qticket__from { font-size: calc(12px * var(--fs)); font-weight: 500; letter-spacing: .04em; color: var(--text-medium); }
.qticket__stub .btn { justify-self: center; margin-top: 16px; }
.qticket__stub::before {
  content: ""; position: absolute; left: -.75px; top: calc(var(--notch) + 6px); bottom: calc(var(--notch) + 6px);
  border-left: 1.5px dashed rgba(13, 81, 72, .22);
}
.qticket__price { margin-top: 8px; align-self: center; line-height: 1.2; font-size: calc(26px * var(--fs)); font-weight: 700; letter-spacing: -.01em; color: var(--green); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .qticket:hover { transform: translateY(-4px); }
  .qticket:hover::before { --tk-bg: #fffbf3; --tk-line: rgba(189, 132, 80, .5); }
}
@media (max-width: 1100px) { .qtickets { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; } .qticket__date { font-size: calc(19.53125px * var(--fs)); } }
@media (max-width: 560px) {
  /* điện thoại: cuống vé xuống dưới — vé trơn (không khuyết), vạch xé nằm ngang */
  .qticket { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .qticket::before { background: var(--tk-bg); }
  .qticket__main { grid-column: 1; grid-row: auto; display: block; }
  .qticket__date { margin-top: 6px; }
  .qticket__legs { margin-top: 14px; }
  .qticket__stub {
    grid-column: 1; grid-row: auto; width: auto;
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; align-items: end;
    padding: 16px 20px 18px;
  }
  .qticket__from { grid-column: 1; grid-row: 1; }
  .qticket__price { grid-column: 1; grid-row: 2; margin-top: 2px; }
  .qticket__stub .btn { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: end; margin-top: 0; }
  .qticket__stub::before { left: 20px; right: 20px; top: -.75px; bottom: auto; border-left: 0; border-top: 1.5px dashed rgba(13, 81, 72, .22); }
  .qticket__stub .btn { padding: 9px 18px; }
  .qticket__price { font-size: 22px; }
  .qticket__main { padding: 22px 20px 18px; }
}
.qdepart__cta { display: grid; justify-items: center; gap: 14px; margin-top: 52px; text-align: center; }
.qdepart__cta p { font-size: calc(14.5px * var(--fs)); color: var(--text-medium); }

/* --------------------------------------------------------------------------
   15. 09 · FAQ — nền kem
   -------------------------------------------------------------------------- */
.qfaq { padding-block: var(--sec-pad); background: var(--snow); color: var(--ink); }
.qfaq__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 100px); align-items: start; }
.qfaq__head { position: sticky; top: calc(var(--head-h) + 32px); }
.qfaq__head .statement { font-size: clamp(30px, 3.4vw, 48px); }
.qfaq__more { margin-top: 36px; display: grid; justify-items: start; gap: 14px; }
.qfaq__more p { font-size: calc(15px * var(--fs)); color: var(--text-medium); }
.qfaq__list { border-top: 1px solid var(--line-light); }
.qa { position: relative; border-bottom: 1px solid var(--line-light); }
.qa summary {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px 0; cursor: pointer; list-style: none;
  font-size: clamp(17px, 1.45vw, 21px); font-weight: 500; line-height: 1.4; color: var(--green);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary > span { transition: color .35s ease, font-weight .35s ease, transform .5s var(--ease-out); }
/* vạch vàng bên trái câu hỏi — mọc ra khi rê chuột / khi câu đang mở */
.qa summary::before {
  content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 3px; border-radius: 2px;
  background: var(--gold-grad); transform: scaleY(0); transition: transform .45s var(--ease-out);
}
.qa summary i { border-color: rgba(13, 81, 72, .3); color: var(--green); transition: transform .5s var(--ease-out), background-color .3s ease, border-color .3s ease, color .3s ease; }
.qa__body p { font-size: calc(15.5px * var(--fs)); line-height: 1.75; color: var(--text-medium); }
.qa__body b { color: var(--green); }
/* KHÔNG đặt padding trên/dưới cho .qa__inner: padding tính vào cỡ tối thiểu
   của hàng lưới → khi thu về 0fr vẫn còn cao 28px rồi giật mất ở cuối. Khoảng
   đáy là một ô rỗng (::after 16px + gap 12px = 28px), thu lại được. */
.qa__inner { display: grid; gap: 12px; padding: 0 60px 0 0; }
.qa__inner::after { content: ""; height: 16px; }

/* Câu đang mở / đang rê chuột: chữ đậm hơn + đổi sang nâu vàng (--gold-ink,
   4,8:1 trên nền kem), nhích phải nhường chỗ vạch vàng; nút + thành tròn xanh
   đặc, xoay. Mở thì giữ nguyên trạng thái này. Chữ đậm thật (font-weight 500 →
   650, Inter là font biến thiên nên chuyển mượt) — câu hỏi ngắn, cột đủ rộng,
   không xuống dòng lại. */
.qa.is-open summary > span { color: var(--gold-ink); font-weight: 650; transform: translateX(18px); }
.qa.is-open summary::before { transform: scaleY(1); }
.qa.is-open summary i { background: var(--green); border-color: var(--green); color: var(--white); }
@media (hover: hover) and (pointer: fine) {
  .qa summary:hover > span { color: var(--gold-ink); font-weight: 650; transform: translateX(18px); }
  .qa summary:hover::before { transform: scaleY(1); }
  .qa summary:hover i { background: var(--green); border-color: var(--green); color: var(--white); transform: rotate(90deg); }
  .qa.is-open summary:hover i { transform: rotate(180deg); }
}
@media (max-width: 1024px) { .qfaq__inner { grid-template-columns: 1fr; } .qfaq__head { position: static; } }
@media (max-width: 560px) { .qa__inner { padding-right: 0; } }

/* Thả xuống mượt (FAQ + "Xem lịch trình chi tiết 9 ngày"), 2026-10-12.
   <details> + JS (cuc-quang.js "Thả xuống mượt"): bấm mở → gắn [open] rồi
   .is-open; bấm đóng → bỏ .is-open, đợi chuyển động xong mới bỏ [open].
   Khung nội dung là lưới 1 hàng chuyển 0fr ↔ 1fr (đo được chiều cao thật,
   không cần JS đo). Chỉ áp khi có JS (html.js) — không JS thì <details> mở /
   đóng tức thì như mặc định. */
.js .qa__body, .js .qplan__body {
  display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0;
  transition: grid-template-rows .55s var(--ease-io), opacity .4s ease;
}
.js .qa.is-open .qa__body, .js .qplan.is-open .qplan__body { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .55s var(--ease-io), opacity .5s ease .08s; }
.js .qa__inner, .js .qplan__list { min-height: 0; transform: translateY(-10px); transition: transform .6s var(--ease-out); }
.js .qa.is-open .qa__inner, .js .qplan.is-open .qplan__list { transform: none; }

/* --------------------------------------------------------------------------
   16. 10 · Form cuối — bầu trời cực quang phủ xanh thép
   -------------------------------------------------------------------------- */
.qfinal { position: relative; isolation: isolate; padding-block: var(--sec-pad); background: var(--fjord); overflow: hidden; }
.qfinal__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.qfinal::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 24, 32, .88) 0%, rgba(10, 24, 32, .5) 55%, rgba(10, 24, 32, .25) 100%), linear-gradient(0deg, rgba(10, 24, 32, .7), rgba(10, 24, 32, 0) 50%); }
/* Thẻ form = NỘI DUNG + kiểu chữ y hệt hộp thoại pop-up (khách, 2026-10-14):
   đệm, bo góc, tiêu đề + câu dẫn, lưới 2 ô + ô chọn — dùng chung class với
   hộp thoại (.tdialog__title, .tdialog__sub, .vform__grid, .vform__submit).
   Bố cục mục giữ nguyên như cũ (khách): cột form 480px, xếp 1 cột ≤900px. */
.qfinal__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(40px, 6vw, 96px); align-items: center; }
.qfinal .statement { font-size: clamp(32px, 3.8vw, 54px); }
.qform { padding: 38px 36px 34px; border-radius: var(--radius-lg); background: var(--white); color: var(--primary); box-shadow: var(--shadow-deep); }
.qform .tdialog__title { padding-right: 0; }   /* hộp thoại chừa chỗ nút đóng, thẻ thì không */
.tdialog__form.qform__form { display: block; }
@media (max-width: 900px) { .qfinal__inner { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .qform { padding: 34px 20px 26px; } }

/* --------------------------------------------------------------------------
   17. Thanh cố định
   -------------------------------------------------------------------------- */
.qbar {
  position: fixed; z-index: 55; right: 18px; bottom: 18px;
  display: flex; align-items: center; gap: 6px;   /* khoảng giữa các nút = đệm thanh (khách, 2026-10-14) */
  padding: 6px; border-radius: var(--radius-full);
  background: rgba(5, 10, 13, .55); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateY(24px); visibility: hidden;
  transition: opacity .4s ease, transform .5s var(--ease-out), visibility 0s linear .5s;
}
/* kính mờ chỉ bật khi thanh hiện — backdrop-filter còn vẽ cả khi opacity 0
   (thành một viên xám rỗng ở góc màn) */
.qbar.is-on {
  opacity: 1; transform: none; visibility: visible;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: opacity .4s ease, transform .5s var(--ease-out);
}
.qbar__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none; }
.qbar__call { background: var(--gold-grad); }
.qbar__call svg { width: 20px; height: 20px; fill: var(--white); }
.qbar__zalo { background: var(--gold-grad); }   /* tròn vàng như nút gọi, chữ "Zalo" trắng (khách, 2026-10-14) */
.qbar__zalo svg { width: 30px; height: 30px; fill: var(--white); }
.qbar__cta { padding-block: 8px; }
@media (max-width: 760px) {
  .qbar { left: 10px; right: 10px; bottom: 10px; justify-content: space-between; padding: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom) * .5); }
  .qbar__cta { flex: 1; justify-content: space-between; }
}

/* --------------------------------------------------------------------------
   18. Giảm chuyển động
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .split-w > span { transform: none; }
  .hslide__wordIn .lc { transform: none; }
  .rcard__pic img, .qday__media, .rcard:hover .rcard__pic img { transform: none; }
}

@media print {
  .qhead, .qbar, .qhero__rail { display: none; }
}