/* Hành trình cuộn trang: máy bay mở đầu, chuyển cảnh, thanh điều hướng, điều khiển ngày đêm, TikTok */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Hero: giữ nội dung ẩn cho tới khi máy bay bay qua ---------- */
.hero.has-intro:not(.is-revealed) .hero__copy,
.hero.has-intro:not(.is-revealed) .pins,
.hero.has-intro:not(.is-revealed) .hero__hint,
.hero.has-intro:not(.is-revealed) .hero__cue,
.hero.has-intro:not(.is-revealed) .tod { opacity: 0; transform: translateY(14px); }
.hero__copy, .hero__hint, .hero__cue, .tod { transition: opacity .9s var(--ease), transform .9s var(--ease); }
.hero.has-intro:not(.is-revealed) .hero__canvas { opacity: 0 !important; }

/* trời sáng: thêm lớp tối nhẹ để chữ luôn đọc được */
.hero__shade::after {
  content: ""; position: absolute; inset: 0; opacity: var(--day, 0);
  background:
    linear-gradient(90deg, rgba(8, 14, 26, .62) 0%, rgba(8, 14, 26, .3) 46%, rgba(8, 14, 26, 0) 74%),
    linear-gradient(0deg, rgba(8, 14, 26, .5) 0%, rgba(8, 14, 26, 0) 40%);
}

/* ---------- Máy bay mở đầu ---------- */
.intro {
  position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 90% at 70% 0%, #1C2D52 0%, #0A1220 60%);
  transition: opacity .8s var(--ease), visibility 0s .8s;
}
.intro.is-out { opacity: 0; visibility: hidden; }
.intro__clouds i {
  position: absolute; height: 14px; border-radius: 99px; background: rgba(243, 241, 236, .09);
  animation: drift 7s linear infinite;
}
.intro__clouds i:nth-child(1) { top: 22%; width: 220px; left: 100%; animation-duration: 6s; }
.intro__clouds i:nth-child(2) { top: 40%; width: 340px; left: 100%; animation-duration: 8.5s; animation-delay: -2s; height: 18px; }
.intro__clouds i:nth-child(3) { top: 68%; width: 260px; left: 100%; animation-duration: 7s; animation-delay: -4s; }
.intro__clouds i:nth-child(4) { top: 82%; width: 180px; left: 100%; animation-duration: 5.5s; animation-delay: -1s; height: 10px; }
@keyframes drift { to { transform: translateX(-160vw); } }
.intro .art--plane {
  position: absolute; left: 0; top: 36%; width: clamp(200px, 24vw, 320px); height: auto; overflow: visible;
  transform: translate3d(-120%, 0, 0);
  animation: fly 2.9s cubic-bezier(.45, .05, .35, 1) .15s forwards;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .4));
}
@keyframes fly {
  0%   { transform: translate3d(-130%, 24vh, 0) rotate(-7deg); }
  55%  { transform: translate3d(45vw, 0, 0) rotate(-2deg); }
  100% { transform: translate3d(112vw, -16vh, 0) rotate(-6deg); }
}
.intro__skip {
  position: absolute; right: var(--gutter); bottom: 28px; pointer-events: auto; border: 0; cursor: pointer;
  padding: 8px 16px; border-radius: 99px; font: inherit; font-size: .8125rem; font-weight: 600;
  color: rgba(243, 241, 236, .85); background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

/* ---------- Chuyển cảnh không che nội dung ----------
   Tên phần nằm giữa màn hình; hình đi từ dưới lên giữa, lắc một cái,
   rồi bay hết lên đỉnh và biến mất, trong lúc trang kéo phần mới lên (journey.js: FLY, PULL_AT) */
.jy { position: fixed; inset: 0; z-index: 80; pointer-events: none; visibility: hidden; overflow: hidden; }
.jy.is-on { visibility: visible; }

.jy__label {
  position: absolute; left: 50%; top: 50%; margin: 0; translate: -50% -50%;
  display: grid; gap: 2px; justify-items: center; text-align: center; white-space: nowrap;
  padding: 12px 26px 14px; border-radius: 99px; color: #F3F1EC;
  background: rgba(10, 18, 32, .5);
  -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .18), 0 16px 40px rgba(0, 0, 0, .35);
  opacity: 0;
}
.jy.is-on .jy__label { animation: jyLabel 1.8s var(--ease) both; }
@keyframes jyLabel {
  0%   { opacity: 0; transform: scale(.92); }
  18%  { opacity: 1; transform: none; }
  58%  { opacity: 1; transform: none; }
  80%  { opacity: 0; transform: translateY(-18px); }
  100% { opacity: 0; }
}
.jy__label strong { font-size: clamp(1.375rem, 3.4vw, 2rem); letter-spacing: -.02em; }
.jy__label small { font-size: .875rem; color: rgba(243, 241, 236, .78); }

/* hình nằm ngay trên tên phần */
.jy__stage { position: absolute; left: 50%; top: 50%; translate: -50% calc(-100% - 46px); }
.jy .art { display: block; width: clamp(150px, 22vw, 230px); height: auto; overflow: visible; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .45)); }
.jy.is-on .jy__stage { animation: jyFly 1.8s both; }
@keyframes jyFly {
  0%   { transform: translateY(60vh); opacity: 0; animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  10%  { opacity: 1; }
  34%  { transform: translateY(0) rotate(0); }
  41%  { transform: translateY(0) rotate(-9deg); }
  48%  { transform: translateY(0) rotate(9deg); }
  55%  { transform: translateY(0) rotate(0); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  88%  { opacity: 1; }
  100% { transform: translateY(-75vh); opacity: 0; }
}

/* chuyển động riêng của từng hình trong suốt đường bay */
.art--car .spin { transform-box: fill-box; transform-origin: center; animation: rot .45s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.art--car .body { animation: idle .18s ease-in-out infinite alternate; }
@keyframes idle { to { transform: translateY(-1.5px); } }
.art--drone .prop { transform-box: fill-box; transform-origin: center; animation: prop .1s linear infinite alternate; }
@keyframes prop { to { transform: scaleX(.3); } }
.art--drone .led { animation: blink .5s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.art--house .win { animation: winlight .6s ease-in-out .3s infinite alternate; }
@keyframes winlight { to { fill: #F2B46B; } }
.art--house .smoke { animation: smoke 1.1s ease-out infinite; }
@keyframes smoke { from { opacity: 0; transform: translateY(8px); } 30% { opacity: 1; } to { opacity: 0; transform: translateY(-16px); } }
.art--person .arm { transform-box: view-box; transform-origin: 92px 98px; animation: wave .3s ease-in-out infinite alternate; }
@keyframes wave { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
.art--shake .handL, .art--shake .thumb { animation: inL .45s var(--ease) .1s both; }
.art--shake .handR { animation: inR .45s var(--ease) .1s both; }
@keyframes inL { from { transform: translateX(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes inR { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Thanh điều hướng bên phải ---------- */
.rail {
  position: fixed; z-index: 55; right: 18px; top: 50%; transform: translateY(-50%);
  display: none; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 99px;
}
.rail__bg {
  position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: rgba(10, 18, 32, .36);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .16), 0 12px 32px rgba(0, 0, 0, .3);
}
.rail button { border: 0; background: none; padding: 0; cursor: pointer; color: #F3F1EC; font: inherit; }
.rail__arrow, .rail__mode { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; transition: background-color .2s; }
.rail__arrow:hover, .rail__mode:hover { background: rgba(255, 255, 255, .16); }
.rail svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rail.is-top .rail__arrow[data-dir="-1"] { opacity: .35; }
.rail__mode { margin-top: 4px; color: rgba(243, 241, 236, .6); }
.rail__mode[aria-pressed="true"] { color: #F2B46B; box-shadow: inset 0 0 0 1px rgba(242, 180, 107, .55); }
.rail__dots { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rail__dots button { position: relative; width: 24px; height: 24px; display: grid; place-items: center; }
.rail__dots button::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: rgba(243, 241, 236, .45); transition: transform .25s var(--ease), background-color .25s; }
.rail__dots button[aria-current]::before { background: #F2B46B; transform: scale(1.5); box-shadow: 0 0 0 4px rgba(242, 180, 107, .25); }
.rail__dots button:hover::before { background: #F3F1EC; }
.rail__dots span {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(6px, -50%); white-space: nowrap; pointer-events: none;
  padding: 5px 11px; border-radius: 99px; font-size: .8125rem; font-weight: 600; color: #F3F1EC;
  background: rgba(10, 18, 32, .78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  opacity: 0; transition: opacity .2s, transform .2s var(--ease);
}
.rail__dots button:hover span, .rail__dots button:focus-visible span { opacity: 1; transform: translate(0, -50%); }
.rail button:focus-visible { outline: 2px solid #F2B46B; outline-offset: 2px; }
@media (min-width: 1000px) { .rail { display: flex; } }

/* nút "cuộn xuống" ở hero */
.hero__cue {
  position: absolute; z-index: 3; left: 50%; bottom: 22px; translate: -50% 0; display: none; place-items: center; gap: 4px;
  border: 0; background: none; cursor: pointer; color: rgba(243, 241, 236, .85); font: inherit; font-size: .75rem; font-weight: 600; letter-spacing: .04em;
}
.hero__cue svg { width: 22px; height: 22px; fill: none; stroke: #F2B46B; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: cue 1.4s ease-in-out infinite; }
@keyframes cue { 50% { transform: translateY(6px); } }
@media (min-width: 1000px) { .hero__cue { display: grid; } }

/* ---------- Điều khiển ngày / đêm ---------- */
.tod {
  position: absolute; z-index: 4; top: 92px; right: var(--gutter);
  display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 14px; border-radius: 99px; color: #F3F1EC;
}
.tod[hidden] { display: none; }
.tod > .glass__tint { background: rgba(10, 18, 32, .42); }
.tod > * { position: relative; }
.tod__icon { display: grid; place-items: center; width: 28px; height: 28px; }
.tod__icon svg { width: 22px; height: 22px; fill: none; stroke: #F2B46B; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tod__icon .moon { display: none; stroke: #BFD0F5; }
.tod.is-night .tod__icon .sun { display: none; }
.tod.is-night .tod__icon .moon { display: block; }
.tod output { min-width: 3.4ch; font-weight: 700; font-variant-numeric: tabular-nums; font-size: .9375rem; }
.tod input[type="range"] { width: clamp(110px, 16vw, 190px); accent-color: #F2B46B; height: 24px; cursor: pointer; }
.tod__btn {
  border: 0; cursor: pointer; padding: 7px 12px; border-radius: 99px; font: inherit; font-size: .8125rem; font-weight: 600; color: #F3F1EC;
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: background-color .2s;
}
.tod__btn:hover { background: rgba(255, 255, 255, .22); }
.tod__btn[aria-pressed="true"] { background: #F2B46B; color: #1E1405; box-shadow: none; }
.tod :focus-visible { outline: 2px solid #F2B46B; outline-offset: 2px; }

/* Ghim chỉ còn là điểm sáng, không có tên */
.pin { min-height: 0; padding: 0; width: 30px; height: 30px; justify-content: center; gap: 0; }
.pin::before {
  content: ""; position: absolute; inset: -6px; border-radius: 99px; border: 2px solid rgba(242, 180, 107, .75);
  animation: pinring 2.2s ease-out infinite; pointer-events: none;
}
.pin--3d::before { border-color: rgba(111, 214, 202, .8); }
@keyframes pinring { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.pin.is-hot { transform: translate3d(var(--x, -999px), var(--y, -999px), 0) translate(-50%, -100%) scale(1.25); }

/* ---------- Kiến thức mua nhà: video TikTok ---------- */
.tt {
  list-style: none; margin: 0; padding: 4px 4px 18px; display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.tt__card {
  position: relative; flex: 0 0 min(325px, 82vw); height: 580px; scroll-snap-align: start; border-radius: var(--r-md); overflow: hidden;
  display: grid; background: linear-gradient(160deg, #15233D, #0B1424); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), var(--shadow);
}
.tt__poster {
  position: relative; display: grid; align-content: space-between; padding: 22px 20px; text-align: left; border: 0; cursor: pointer; color: #F3F1EC; font: inherit;
  background:
    radial-gradient(90% 60% at 80% 0%, rgba(111, 214, 202, .22), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 36px);
}
.tt__tag { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6FD6CA; }
.tt__title { font-size: 1.375rem; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.tt__go { display: inline-flex; align-items: center; gap: 12px; font-size: .9375rem; font-weight: 600; }
.tt__go i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #F2B46B; transition: transform .25s var(--ease); }
.tt__go svg { width: 22px; height: 22px; fill: #1E1405; margin-left: 3px; }
.tt__poster:hover .tt__go i { transform: scale(1.1); }
.tt__poster:focus-visible { outline: 3px solid #F2B46B; outline-offset: -3px; }
.tt__card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.tt__open {
  position: absolute; z-index: 2; right: 10px; top: 10px; padding: 6px 12px; border-radius: 99px; font-size: .75rem; font-weight: 600; text-decoration: none;
  color: #F3F1EC; background: rgba(10, 18, 32, .7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.tt__card.is-playing .tt__open { top: auto; bottom: 10px; }
.tt-note { margin: 4px 0 0; font-size: .8125rem; color: var(--text-2); }

/* ---------- Liên kết mạng xã hội ---------- */
.socials { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.socials a {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 99px; text-decoration: none; color: inherit;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: background-color .2s, transform .25s var(--ease);
}
.socials a:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }
.socials svg { width: 22px; height: 22px; padding: 4px; box-sizing: content-box; border-radius: 50%; background: rgba(111, 214, 202, .2); fill: #6FD6CA; }
.socials span { display: grid; line-height: 1.2; }
.socials strong { font-size: .875rem; }
.socials small { font-size: .75rem; opacity: .75; }
.footer__social { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer__social a { color: inherit; text-underline-offset: 3px; }

/* ---------- Điện thoại ---------- */
@media (max-width: 999px) {
  .tod { top: 76px; left: var(--gutter); right: var(--gutter); justify-content: space-between; gap: 8px; padding: 6px 10px; }
  .tod input[type="range"] { flex: 1; width: auto; min-width: 70px; }
  .tod__btn { padding: 6px 10px; font-size: .75rem; }
  .tt__card { height: 560px; }
}
@media (max-width: 420px) { .tod__btn:last-child { display: none; } }

/* ---------- Khả năng tiếp cận ---------- */
@media (prefers-reduced-motion: reduce) {
  .intro, .jy, .jy *, .rail__dots span, .hero__cue svg, .pin::before { animation: none !important; }
  .hero.has-intro:not(.is-revealed) .hero__copy, .hero.has-intro:not(.is-revealed) .pins,
  .hero.has-intro:not(.is-revealed) .hero__hint, .hero.has-intro:not(.is-revealed) .tod { opacity: 1; transform: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .rail__bg { -webkit-backdrop-filter: none; backdrop-filter: none; background: #0A1220; }
}