/* Hiệu ứng "đèn bàn" thêm 20–21/10/2026: màn mở đầu có vệt đèn + bụi, căn phòng bật đèn ở đầu trang (điện thoại
   và máy tính), chữ vàng trong tiêu đề bật sáng, quầng sáng khi chạm, chuyển trang "bước vào phòng", danh sách cơ sở
   sáng theo cuộn, thẻ tiện ích nghiêng, bản đồ hai thành phố.
   JS tương ứng: intro-lamp-dust, hero-lamp-room, motion-scenes (tiêu đề), touch-feedback, cursor-lamp-glow, page-door,
   locations-scroll-focus, perks-mobile-tilt, two-city-map. */

/* ---------- Màn mở đầu: vệt đèn bàn + bụi ---------- */
.intro__cone {
  position: absolute; top: -8vh; left: 50%; width: min(130vmin, 1200px); height: 78vh; translate: -50% 0;
  opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 220, 140, 0.5) 0%, rgba(242, 193, 78, 0.16) 55%, rgba(242, 193, 78, 0) 100%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  filter: blur(16px);
}
.intro__dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.intro__word.is-lit span { color: #fff4dc; text-shadow: 0 0 10px rgba(242, 193, 78, 0.55); }

/* ---------- Đầu trang: căn phòng bật đèn (WebGL) ---------- */
.hero__room { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.6s ease; }
.hero.has-room .hero__room { opacity: 1; }
/* Máy tính: lớp đèn đã lo sáng tối của ảnh, CSS chỉ giữ phần tối sau chữ (góc dưới bên trái) cho dễ đọc thay cho
   vùng đèn CSS theo chuột. Điện thoại dùng chung lớp tối với khi không có WebGL (site.css). */
@media (min-width: 861px) {
  .hero.has-room .hero__shade {
    background:
      linear-gradient(90deg, rgba(15, 14, 12, 0.55) 0%, rgba(15, 14, 12, 0.22) 42%, rgba(15, 14, 12, 0) 64%),
      linear-gradient(180deg, rgba(15, 14, 12, 0.5) 0%, rgba(15, 14, 12, 0) 15%, rgba(15, 14, 12, 0) 42%, rgba(15, 14, 12, 0.55) 70%, rgba(15, 14, 12, 0.88) 100%);
  }
}
.hero.is-lamp-hover { cursor: pointer; }

/* ---------- Tiêu đề: chữ vàng bật sáng như đèn (motion-scenes.js titleLamps) ---------- */
.hero__title .hl { color: var(--lamp); }
.hero__title.is-lit .w { overflow: visible; }
.hero__find {
  display: flex; width: fit-content; align-items: center; gap: 0.45em; margin-top: 1.1rem;
  color: rgba(242, 237, 227, 0.88); font-size: 0.95rem; line-height: 1.4;
  border-bottom: 1px solid rgba(242, 193, 78, 0.5); padding-bottom: 2px;
}
.hero__find i { color: var(--lamp); }

/* ---------- Chạm là sáng ---------- */
.tap-glow {
  position: fixed; z-index: 400; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 214, 120, 0.6) 0%, rgba(242, 193, 78, 0.22) 38%, rgba(242, 193, 78, 0) 70%);
  animation: tap-glow 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes tap-glow { from { transform: scale(0.25); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.is-demo .tap-glow { width: 150px; height: 150px; margin: -75px 0 0 -75px; animation-duration: 0.9s; }
.is-demo .tap-glow::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 3px rgba(242, 193, 78, 0.85);
}
/* Máy tính: quầng đèn đi theo con trỏ (cursor-lamp-glow.js). Hoà màu kiểu "screen" nên chỉ làm sáng thêm chỗ nó đi
   qua, không phủ màu lên chữ; rê vào nút thì sáng hơn. */
.cursor-glow {
  position: fixed; left: 0; top: 0; z-index: 390; width: 360px; height: 360px; border-radius: 50%;
  pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity 0.4s ease;
  background: radial-gradient(circle, rgba(255, 210, 120, 0.24) 0%, rgba(242, 193, 78, 0.1) 32%, rgba(242, 193, 78, 0) 68%);
  will-change: transform;
}
.cursor-glow.is-on { opacity: 1; }
.cursor-glow.is-hot { background: radial-gradient(circle, rgba(255, 214, 130, 0.34) 0%, rgba(242, 193, 78, 0.14) 32%, rgba(242, 193, 78, 0) 68%); }
/* Nút vàng ở đầu trang: viền sáng thở chậm để mắt tìm ra ngay; chạm thì nút lún xuống. */
@media (hover: none) {
  .hero .btn--lamp { position: relative; }
  .hero .btn--lamp::after {
    content: ""; position: absolute; inset: -5px; border-radius: inherit; pointer-events: none;
    border: 2px solid rgba(242, 193, 78, 0.8); opacity: 0;
    animation: lamp-breathe 2.8s ease-out 3.4s infinite;
  }
  .btn:active { scale: 0.95; }
}
@keyframes lamp-breathe { 0% { opacity: 0; transform: scale(0.95); } 30% { opacity: 0.9; } 100% { opacity: 0; transform: scale(1.12, 1.35); } }

/* ---------- Chuyển trang "bước vào phòng" ---------- */
/* Vòng đèn vàng chạy trước, khung tối có quầng đèn theo sau. Khung cuối giống hệt màn mở của trang đích bên ops. */
.page-door { position: fixed; inset: 0; z-index: 300; pointer-events: auto; }
.page-door::before, .page-door__room {
  position: absolute; inset: 0;
  clip-path: circle(0px at var(--x) var(--y));
  transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.page-door::before { content: ""; background: var(--lamp); }
.page-door__room {
  background: radial-gradient(circle at 50% 42%, rgba(242, 193, 78, 0.28), rgba(242, 193, 78, 0) 60%), #0f0e0c;
  transition-delay: 0.09s;
}
.page-door.is-open::before, .page-door.is-open .page-door__room { clip-path: circle(150vmax at var(--x) var(--y)); }

/* ---------- Danh sách cơ sở trên điện thoại: dòng giữa màn hình sáng lên ---------- */
/* Làm mờ các ô con chứ không làm mờ cả dòng: locations-list.js tween opacity của dòng khi lọc. */
.loc-list.is-focus-mode .loc { isolation: isolate; }
.loc-list.is-focus-mode .loc > * { opacity: 0.45; transition: opacity 0.5s var(--ease); }
.loc-list.is-focus-mode .loc.is-lit > * { opacity: 1; }
.loc-list.is-focus-mode .loc::after {
  content: ""; position: absolute; inset: 0 -12px; z-index: -1; border-radius: 12px; pointer-events: none;
  background: linear-gradient(90deg, rgba(15, 14, 12, 0.9) 35%, rgba(15, 14, 12, 0.55)), var(--loc-bg) center / cover no-repeat;
  opacity: 0; transition: opacity 0.6s var(--ease);
}
.loc-list.is-focus-mode .loc.is-lit::after { opacity: 1; }
.loc-list.is-focus-mode .loc.is-lit:not(.is-closed) .loc__name { color: var(--lamp); }

/* ---------- Thẻ tiện ích trên điện thoại: nghiêng theo hướng vuốt + vệt sáng lướt qua ảnh ---------- */
@media (max-width: 767px) {
  .perks__track.is-tilting { perspective: 900px; }
  .perks__track.is-tilting .perk { transform: rotateY(calc(var(--d, 0) * 16deg)); transform-origin: center 40%; }
  .perks__track.is-tilting .perk__img { position: relative; }
  /* --d đi từ -1 (thẻ còn bên phải) về 0 (giữa): vệt sáng chạy qua ảnh đúng một lần lúc thẻ vào giữa */
  .perks__track.is-tilting .perk__img::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
    background: linear-gradient(105deg, rgba(255, 236, 190, 0) 38%, rgba(255, 236, 190, 0.3) 50%, rgba(255, 236, 190, 0) 62%);
    transform: translateX(calc((var(--d, 0) + 0.25) * -400%));
  }
}

/* ---------- Bản đồ hai thành phố ---------- */
.locations__head { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(24px, 4vw, 64px); }
.locations__head > :not(.vnmap) { grid-column: 1; }
.vnmap { grid-column: 2; grid-row: 1 / span 3; align-self: start; margin: 0; display: grid; justify-items: center; gap: 0.9rem; }
.vnmap__svg { width: clamp(190px, 19vw, 250px); height: auto; overflow: visible; }
.vnmap__coast { fill: none; stroke: rgba(242, 237, 227, 0.78); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.vnmap__border { fill: none; stroke: rgba(242, 237, 227, 0.24); stroke-width: 1; stroke-dasharray: 2 4; }
.vnmap__isles circle { fill: rgba(242, 237, 227, 0.6); }
.vnmap__isle { fill: var(--muted); font-family: var(--body); font-size: 9.5px; }
.vnmap__name { fill: var(--paper); font-family: var(--display); font-weight: 700; font-size: 14px; }
.vnmap__lamp { cursor: pointer; outline: none; transition: opacity 0.4s; }
.vnmap__lamp:focus-visible .vnmap__dot { stroke: var(--paper); stroke-width: 2; }
.vnmap__dot { fill: #5d564b; transition: fill 0.4s; }
.vnmap__halo { fill: rgba(242, 193, 78, 0.32); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.3); transition: opacity 0.5s, transform 0.7s var(--ease); }
.vnmap__lamp.is-on .vnmap__dot, .vnmap.is-drawn .vnmap__dot { fill: var(--lamp); }
.vnmap__lamp.is-on .vnmap__halo, .vnmap.is-drawn .vnmap__halo { opacity: 1; transform: scale(1); animation: vnmap-pulse 2.6s ease-in-out 0.8s infinite; }
@keyframes vnmap-pulse { 50% { opacity: 0.45; transform: scale(1.3); } }
.vnmap[data-active="hcm"] .vnmap__lamp[data-city="dn"], .vnmap[data-active="dn"] .vnmap__lamp[data-city="hcm"] { opacity: 0.4; }
.vnmap__legend { display: flex; gap: 0.5rem; }
.vnmap__city { display: grid; text-align: left; gap: 0.1rem; background: transparent; border: 1px solid var(--line); border-radius: 12px; padding: 0.5rem 0.85rem; cursor: pointer; transition: border-color 0.3s, background 0.3s; }
.vnmap__city b { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.vnmap__city > span { color: var(--muted); font-size: 0.85rem; }
.vnmap[data-active="hcm"] .vnmap__city[data-city="hcm"], .vnmap[data-active="dn"] .vnmap__city[data-city="dn"] { border-color: var(--lamp); background: rgba(242, 193, 78, 0.08); }
@media (max-width: 767px) {
  .locations__head { grid-template-columns: minmax(0, 1fr); }
  .vnmap { grid-column: 1; grid-row: auto; grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 1.2rem; }
  .vnmap__svg { width: min(54vw, 230px); }
  .vnmap__legend { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .btn--lamp::after, .vnmap__halo { animation: none !important; }
}