/* ==========================================================================
   BeautyShop Luxury Theme — Haute Beauté & 24K Gold
   Ultra-Fast, Zero-JS-Compiler, Lightweight Modern CSS
   ========================================================================== */

:root {
  /* Báo cho trình duyệt biết đây là giao diện tối: điều khiển gốc, ô tự điền và thanh cuộn
     tự đổi theo, không còn hộp trắng loá giữa màn hình đen. */
  color-scheme: dark;

  --luxe-noir: #09080c;
  --luxe-obsidian: #100e16;
  --luxe-surface: #171420;
  --luxe-surface-card: #14111c;
  --luxe-surface-hover: #1f1b2b;
  --luxe-gold: #c5a880;
  --luxe-gold-bright: #d4af37;
  --luxe-gold-light: #ecd7bf;
  --luxe-gold-dark: #8c6d3d;
  --luxe-gold-gradient: linear-gradient(135deg, #ecd7bf 0%, #d4af37 50%, #8c6d3d 100%);
  --luxe-rose: #d89b91;
  --luxe-rose-light: #fcece9;
  --luxe-pearl: #faf7f2;
  --luxe-body: #d1cdd8;
  --luxe-muted: #9e99a8;
  --luxe-border: rgba(197, 168, 128, 0.25);
  --luxe-border-bright: rgba(212, 175, 55, 0.55);
  --luxe-gold-glow: rgba(212, 175, 55, 0.25);

  --font-serif: 'Playfair Display', Georgia, serif;
  --font-editorial: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Base resets & typography */
html.luxury-root, .luxury-page {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  background-color: var(--luxe-noir);
  color: var(--luxe-body);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}

.luxury-page *, .luxury-page *::before, .luxury-page *::after {
  box-sizing: border-box;
}

.luxury-page {
  background-color: var(--luxe-noir);
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 10% 25%, rgba(139, 44, 107, 0.08) 0%, transparent 35%),
    radial-gradient(circle at 90% 55%, rgba(16, 185, 129, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 50% 75%, rgba(212, 175, 55, 0.09) 0%, transparent 50%),
    linear-gradient(180deg, #0a0810 0%, #060509 50%, #09080e 100%);
  background-attachment: fixed;
  min-height: 100vh;
  position: relative;
}

/* Typography Helpers */
.font-serif { font-family: var(--font-serif); }
.font-editorial { font-family: var(--font-editorial); }
.font-sans { font-family: var(--font-sans); }

.text-gold { color: var(--luxe-gold); }
.text-gold-bright { color: var(--luxe-gold-bright); }
.text-gold-light { color: var(--luxe-gold-light); }
.text-pearl { color: var(--luxe-pearl); }
.text-rose { color: var(--luxe-rose); }
.text-muted { color: var(--luxe-muted); }

.text-gold-gradient {
  background: linear-gradient(135deg, #f9ede0 0%, #d4af37 50%, #aa8444 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Glassmorphism Panels */
.glass-panel {
  background: rgba(20, 17, 28, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--luxe-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.glass-panel-gold {
  background: linear-gradient(145deg, rgba(28, 23, 38, 0.85), rgba(18, 15, 25, 0.9));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--luxe-border-bright);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(212, 175, 55, 0.1);
}

/* Luxury Buttons */
.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #ecd7bf 0%, #d4af37 50%, #9e7d44 100%);
  color: #0c0a10 !important;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  padding: 0.65rem 1.4rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 160ms var(--ease-out), box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35);
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5);
  background: linear-gradient(135deg, #f5e7d3 0%, #e2bf4b 50%, #b28e50 100%);
  color: #000 !important;
}
}

.btn-gold:active {
  transform: scale(0.97);
}

.btn-outline-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(23, 20, 32, 0.6);
  color: var(--luxe-pearl) !important;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  padding: 0.65rem 1.4rem;
  border-radius: 9999px;
  border: 1px solid var(--luxe-border);
  cursor: pointer;
  text-decoration: none;
  transition: transform 160ms var(--ease-out), box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
.btn-outline-gold:hover {
  border-color: var(--luxe-gold-bright);
  background: rgba(212, 175, 55, 0.12);
  color: var(--luxe-gold-light) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
}
}
.btn-outline-gold:active { transform: scale(0.97); }

.btn-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: var(--luxe-gold-light) !important;
  font-weight: 600;
  font-size: 0.825rem;
  padding: 0.55rem 1.15rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: transform 160ms var(--ease-out), box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn-login:active { transform: scale(0.97); }

.btn-login:hover {
  background: rgba(212, 175, 55, 0.18);
  border-color: var(--luxe-gold-bright);
  color: #fff !important;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

/* Top bar & Header */
.luxe-topbar {
  background: var(--luxe-obsidian);
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
  padding: 0.5rem 1rem;
  font-size: 0.775rem;
  color: rgba(250, 247, 242, 0.85);
  position: relative;
  z-index: 30;
}

.luxe-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14, 12, 19, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.luxe-header-scrolled {
  background: rgba(10, 8, 15, 0.95);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
}

/* Container */
.luxe-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Radar ping indicator */
.radar-pulse {
  display: inline-flex;
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
}

.radar-pulse::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.4);
  animation: radar-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes radar-ping {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Hero Section & Canvas */
.luxe-hero {
  position: relative;
  overflow: hidden;
  padding-top: 3.5rem;
  padding-bottom: 5.5rem;
}

.luxe-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.35; /* tối nền để chữ vàng vẫn đọc rõ */
  pointer-events: none;
}

/* Cuộn xuống: video lùi xa và mờ dần. Chạy trên luồng compositor (không JS) nên điện thoại vẫn mượt;
   trình duyệt chưa hỗ trợ thì bỏ qua, video đứng yên như cũ. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .luxe-hero-video {
      animation: hero-video-out linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    @keyframes hero-video-out {
      to { opacity: 0.08; scale: 1.12; translate: 0 18%; }
    }
  }
}

/* Hiệu ứng khi cuộn (luxury.js → initScrollReveal gắn data-reveal, bật/tắt .is-visible).
   Dùng `translate` riêng chứ không đụng `transform` → không giành với hiệu ứng hover của thẻ.
   Dùng animation chứ không dùng transition → không đè transition sẵn có của .luxe-card.
   Ra khỏi màn hình thì về trạng thái ẩn ngay (không ai thấy), vào lại thì chạy lại — cuộn lên hay xuống đều có hiệu ứng. */
[data-reveal] { opacity: 0; translate: 0 var(--rv-y, 36px); }
[data-reveal][data-from="top"] { --rv-y: -36px; }
[data-reveal].is-visible { animation: rv-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) var(--rv-delay, 0s) both; }
@keyframes rv-in {
  from { opacity: 0; translate: 0 var(--rv-y, 36px); scale: 0.97; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; translate: none; }
  [data-reveal].is-visible { animation: none; }
}

#sparkles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Ambient Aurora Glows */
.ambient-glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.6;
  z-index: 0;
}

.animate-aurora-1 {
  animation: drift1 20s ease-in-out infinite;
}
.animate-aurora-2 {
  animation: drift2 26s ease-in-out infinite reverse;
}

@keyframes drift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, -40px) scale(1.15); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, 35px) scale(0.9); }
}

/* Marquee infinite ticker */
.marquee-container {
  overflow: hidden;
  user-select: none;
  white-space: nowrap;
  background: var(--luxe-obsidian);
  border-top: 1px solid rgba(212, 175, 55, 0.22);
  border-bottom: 1px solid rgba(212, 175, 55, 0.22);
  padding: 0.85rem 0;
}

.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  animation: marquee-scroll 32s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Cards & Layout Grid */
/* Flex chứ không grid: số thẻ ưu đãi do chủ shop chọn (1–4+). Grid 4 cột mà chỉ có 3 thẻ thì dồn trái chừa một ô trống;
   flex-wrap + căn giữa thì hàng thiếu (kể cả hàng cuối ở màn 2 cột) luôn nằm giữa, mỗi thẻ vẫn đúng bề rộng 1/4 (1/2). */
.luxe-grid-4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.luxe-grid-4 > * { flex: 0 1 100%; min-width: 0; box-sizing: border-box; }

@media (min-width: 640px) {
  .luxe-grid-4 > * { flex-basis: calc((100% - 1.5rem) / 2); }
}

@media (min-width: 1024px) {
  .luxe-grid-4 > * { flex-basis: calc((100% - 4.5rem) / 4); }
}

.luxe-grid-3 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.75rem;
}

@media (min-width: 768px) {
  .luxe-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .luxe-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Service & Offer Card */
.luxe-card {
  position: relative;
  background: var(--luxe-surface);
  border: 1px solid var(--luxe-border);
  border-radius: 1.25rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.35s var(--ease-out), border-color 0.3s ease, box-shadow 0.35s ease;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

@media (hover: hover) and (pointer: fine) {
.luxe-card:hover {
  transform: translateY(-4px);
  border-color: var(--luxe-gold-bright);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(212, 175, 55, 0.15);
}
}

.luxe-card-gold {
  background: linear-gradient(145deg, rgba(28, 24, 38, 0.9), rgba(18, 15, 24, 0.95));
  border: 1px solid var(--luxe-border-bright);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(212, 175, 55, 0.1);
}

@media (hover: hover) and (pointer: fine) {
.luxe-card-gold:hover {
  border-color: #f0c345;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(212, 175, 55, 0.25);
}
}

/* Image Frame */
.luxe-img-frame {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--luxe-border-bright);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8);
}

.luxe-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
  display: block;
}

@media (hover: hover) and (pointer: fine) {
.luxe-img-frame:hover img {
  transform: scale(1.04);
}
}

/* Category Filter Tabs */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}

.filter-tab-btn {
  padding: 0.6rem 1.35rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(23, 20, 32, 0.7);
  color: rgba(250, 247, 242, 0.75);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.filter-tab-btn:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
.filter-tab-btn:hover {
  border-color: var(--luxe-gold);
  color: var(--luxe-pearl);
}
}

.filter-tab-btn.active {
  background: var(--luxe-gold);
  color: #0c0910;
  border-color: var(--luxe-gold-bright);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35);
}

/* Before / After Slider */
.ba-container {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--luxe-border-bright);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  user-select: none;
}

.ba-after-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ba-before-layer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
  z-index: 10;
}

.ba-before-layer img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #ecd7bf;
  z-index: 20;
  cursor: ew-resize;
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.8);
}

.ba-handle-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ecd7bf 0%, #d4af37 100%);
  color: #0c0910;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
  font-size: 12px;
}

/* Lookbook Grid */
.lookbook-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 768px) {
  .lookbook-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lookbook-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.lookbook-card {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--luxe-border);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  transition: transform 0.35s var(--ease-out), border-color 0.3s ease;
}

.lookbook-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
  display: block;
}

@media (hover: hover) and (pointer: fine) {
.lookbook-card:hover {
  border-color: var(--luxe-gold);
  transform: translateY(-4px);
}

.lookbook-card:hover img {
  transform: scale(1.06);
}
}

.lookbook-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 8, 12, 0.9) 0%, rgba(9, 8, 12, 0.1) 60%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.lookbook-card:hover .lookbook-overlay {
  opacity: 1;
}
/* Máy cảm ứng không có hover: trước đây chú thích ảnh lookbook không bao giờ hiện trên điện thoại. */
@media (hover: none) {
  .lookbook-overlay { opacity: 1; }
}

/* Stardust cursor particle */
.stardust-particle {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #d4af37 60%, transparent 100%);
  box-shadow: 0 0 6px #d4af37;
  z-index: 9999;
  animation: stardustFade 0.7s forwards ease-out;
}

@keyframes stardustFade {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.2) translate(0, 10px); }
}

/* Dedicated Luxury Auth / Login Page */
/* Nền tối + quầng vàng / tím của trang đăng nhập — dùng lại cho khu Treatment Menu trang chủ. */
.luxe-cosmic {
  background-color: var(--luxe-noir);
  background-image:
    radial-gradient(circle at 50% 10%, rgba(212, 175, 55, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(139, 44, 107, 0.1) 0%, transparent 40%),
    linear-gradient(180deg, #0d0a14 0%, #060509 100%);
}

.luxe-auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  position: relative;
  background-color: var(--luxe-noir);
  background-image: 
    radial-gradient(circle at 50% 10%, rgba(212, 175, 55, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(139, 44, 107, 0.1) 0%, transparent 40%),
    linear-gradient(180deg, #0d0a14 0%, #060509 100%);
}

/* Trang trí hai bên trang đăng nhập (2026-10-14): quầng sáng trôi, sao vàng lấp lánh, bụi vàng bay lên — chỉ máy tính. */
.auth-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; display: none; }
@media (min-width: 900px) { .auth-decor { display: block; } }
.auth-orb { position: absolute; width: 34rem; height: 34rem; border-radius: 50%; filter: blur(70px); opacity: 0.8; }
.auth-orb-l { left: -12rem; top: 8%; background: radial-gradient(circle, rgba(212, 175, 55, 0.32) 0%, transparent 65%); animation: drift1 22s ease-in-out infinite; }
.auth-orb-r { right: -12rem; bottom: 4%; background: radial-gradient(circle, rgba(216, 155, 145, 0.26) 0%, transparent 65%); animation: drift2 26s ease-in-out infinite; }
/* Bụi vũ trụ (chủ shop 2026-10-14 — bỏ hình ngôi sao): ba lớp hạt li ti (box-shadow, toạ độ vw/vh) nhấp nháy theo ba nhịp khác nhau và
   trôi rất chậm → có chiều sâu; thêm hạt sáng tròn có quầng vàng, lấp lánh so le. */
.auth-field { position: absolute; left: 0; top: 0; border-radius: 50%; background: transparent; }
.auth-field-1 { width: 1px; height: 1px; animation: auth-breathe 7s ease-in-out infinite, auth-drift 60s linear infinite; }
.auth-field-2 { width: 1.5px; height: 1.5px; animation: auth-breathe 9s ease-in-out -3s infinite, auth-drift 80s linear -20s infinite; }
.auth-field-3 { width: 2px; height: 2px; animation: auth-breathe 11s ease-in-out -6s infinite, auth-drift 100s linear -40s infinite;
  filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.8)); }
@keyframes auth-breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes auth-drift { 0% { transform: translate(0, 0); } 50% { transform: translate(0.6vw, -1.5vh); } 100% { transform: translate(0, 0); } }
.auth-glow {
  position: absolute; width: var(--s); height: var(--s); border-radius: 50%; opacity: 0.15;
  background: #fffaf0;
  box-shadow: 0 0 4px 1px rgba(255, 246, 225, 0.9), 0 0 10px 3px rgba(212, 175, 55, 0.45), 0 0 22px 6px rgba(212, 175, 55, 0.15);
  animation: auth-shine var(--t) ease-in-out var(--d) infinite;
}
@keyframes auth-shine {
  0%, 100% { opacity: 0.15; transform: scale(0.6); }
  45% { opacity: 1; transform: scale(1.15); }
  60% { opacity: 0.8; transform: scale(1); }
}
.auth-dust {
  position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; opacity: 0;
  background: #ecd7bf; box-shadow: 0 0 6px 1px rgba(212, 175, 55, 0.7);
  animation: auth-rise var(--t) linear var(--d) infinite;
}
@keyframes auth-rise {
  0% { opacity: 0; transform: translate(0, 0); }
  10% { opacity: 0.9; }
  50% { transform: translate(18px, -50vh); }
  90% { opacity: 0.6; }
  100% { opacity: 0; transform: translate(-12px, -105vh); }
}
/* Kiểu Full (khu dài): quầng sáng ở 1/4 trên và 1/4 dưới thay vì sát mép một màn hình. */
.auth-decor-full .auth-orb-l { top: 12%; }
.auth-decor-full .auth-orb-r { bottom: 12%; }
@media (prefers-reduced-motion: reduce) {
  .auth-orb, .auth-dust { animation: none; }
  .auth-dust { display: none; }
  .auth-field { animation: none; opacity: 0.7; }
  .auth-glow { animation: none; opacity: 0.6; }
}

.luxe-auth-card {
  width: 100%;
  max-width: 480px;
  background: rgba(22, 18, 29, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--luxe-border-bright);
  border-radius: 1.5rem;
  padding: 1.35rem 1.75rem 1rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 25px rgba(212, 175, 55, 0.15);
  position: relative;
  z-index: 10;
}

/* Viền khung đăng nhập có ánh sáng (chủ shop 2026-10-14): quầng vàng "thở" chậm + một vệt vàng ngà và một vệt hồng nhạt chạy vòng
   quanh viền rất chậm (conic-gradient xoay, chỉ hiện ở dải viền nhờ mask). Trình duyệt chưa có @property thì vệt sáng đứng yên — vẫn đẹp. */
/* Tên tiệm góc phải khung đăng nhập: viết liền, chữ vàng ánh kim chuyển màu chậm. */
.auth-brandname {
  justify-self: end; margin-top: 0.3rem; font-family: var(--font-serif, "Playfair Display", serif); font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.04em;
}
/* Cùng hiệu ứng cho tên tiệm cạnh logo ở mọi trang (chủ shop 2026-10-22): đầu + chân trang chủ, thanh trên booking / coupon / gói / tài khoản. */
.auth-brandname, .brand-sheen, .booking-brand .booking-brand-name {
  background: linear-gradient(110deg, #ecd7bf 0%, #d4af37 35%, #fff2d2 50%, #d4af37 65%, #c58b7a 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: auth-brand-sheen 7s ease-in-out infinite;
}
@keyframes auth-brand-sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .auth-brandname, .brand-sheen, .booking-brand .booking-brand-name { animation: none; } }

@property --auth-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.luxe-auth-card { animation: auth-card-breathe 6s ease-in-out infinite; }
.luxe-auth-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--auth-angle),
    transparent 0deg, rgba(212, 175, 55, 0) 30deg, rgba(255, 242, 210, 0.95) 62deg, rgba(212, 175, 55, 0) 95deg,
    transparent 180deg, rgba(216, 155, 145, 0) 210deg, rgba(240, 196, 180, 0.75) 242deg, rgba(216, 155, 145, 0) 275deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.55));
  animation: auth-border-spin 9s linear infinite;
}
@keyframes auth-border-spin { to { --auth-angle: 360deg; } }
@keyframes auth-card-breathe {
  0%, 100% { box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 18px rgba(212, 175, 55, 0.12); }
  50% { box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 42px rgba(212, 175, 55, 0.32), 0 0 90px rgba(212, 175, 55, 0.1); }
}
@media (prefers-reduced-motion: reduce) {
  .luxe-auth-card, .luxe-auth-card::before { animation: none; }
}

.luxe-auth-tabs {
  display: flex;
  background: rgba(14, 12, 19, 0.7);
  padding: 0.35rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 1.75rem;
}

.luxe-auth-tab {
  flex: 1;
  text-align: center;
  padding: 0.65rem 0.5rem;
  border-radius: 0.65rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(250, 247, 242, 0.65);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  border: none;
  background: transparent;
}

.luxe-auth-tab.active {
  background: linear-gradient(135deg, #ecd7bf 0%, #d4af37 100%);
  color: #0c0a10;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

/* Toast */
.luxe-toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  background: rgba(26, 21, 35, 0.95);
  backdrop-filter: blur(14px);
  border: 1px solid var(--luxe-gold);
  color: var(--luxe-pearl);
  padding: 0.75rem 1.25rem;
  border-radius: 0.85rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(212, 175, 55, 0.25);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  transform: translateY(100px);
  opacity: 0;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
  pointer-events: none;
}

.luxe-toast.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Mobile Drawer */
.luxe-mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  transition: visibility 0.3s ease;
  visibility: hidden;
}

.luxe-mobile-drawer.open {
  visibility: visible;
  pointer-events: auto;
}

.luxe-drawer-backdrop {
  /* cursor: pointer — iPhone Safari KHÔNG cho cú chạm vào một <div> thường nổi lên document; menu nay bắt sự kiện ở
     document (luxury.js) nên thiếu dòng này thì chạm nền tối không đóng menu. */
  cursor: pointer;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.luxe-mobile-drawer.open .luxe-drawer-backdrop {
  opacity: 1;
}

.luxe-drawer-panel {
  position: relative;
  width: 82%;
  max-width: 360px;
  height: 100%;
  background: var(--luxe-obsidian);
  border-left: 1px solid var(--luxe-border-bright);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: -15px 0 35px rgba(0, 0, 0, 0.8);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}

.luxe-mobile-drawer.open .luxe-drawer-panel {
  transform: translateX(0);
}

/* Responsive Grid & Visibility Utilities */
.luxe-nav-desktop {
  display: none;
}
@media (min-width: 1024px) {
  .luxe-nav-desktop {
    display: flex !important;
  }
}

.luxe-mobile-menu-btn {
  display: inline-flex;
}
@media (min-width: 1024px) {
  .luxe-mobile-menu-btn {
    display: none !important;
  }
}

.luxe-desktop-flex {
  display: none;
}
@media (min-width: 768px) {
  .luxe-desktop-flex {
    display: flex !important;
  }
}

.luxe-desktop-inline {
  display: none;
}
@media (min-width: 640px) {
  .luxe-desktop-inline {
    display: inline !important;
  }
}

.luxe-desktop-cta {
  display: none;
}
@media (min-width: 640px) {
  .luxe-desktop-cta {
    display: inline-flex !important;
  }
}

.luxe-mobile-actionbar {
  display: flex !important;
}
@media (min-width: 640px) {
  .luxe-mobile-actionbar {
    display: none !important;
  }
}

.luxe-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .luxe-hero-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .luxe-hero-left {
    grid-column: span 7 / span 7;
  }
  .luxe-hero-right {
    grid-column: span 5 / span 5;
  }
}

.luxe-calc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .luxe-calc-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .luxe-calc-left {
    grid-column: span 7 / span 7;
  }
  .luxe-calc-right {
    grid-column: span 5 / span 5;
    position: sticky;   /* danh sách bên trái dài hơn → khung tổng đi theo khi cuộn */
    top: 6rem;
  }
}

.luxe-location-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .luxe-location-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .luxe-location-left {
    grid-column: span 6 / span 6;
  }
  .luxe-location-right {
    grid-column: span 6 / span 6;
  }
}

.luxe-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (min-width: 768px) {
  .luxe-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .luxe-footer-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .luxe-footer-brand {
    grid-column: span 2 / span 2;
  }
}


/* =========================================================================
   Sửa lỗi hiển thị đã quan sát được trên máy thật
   ========================================================================= */

/*
  Khung trắng bao quanh tiêu đề mỗi lần vào trang.

  Routes.razor có <FocusOnNavigate Selector="h1" /> — dòng mặc định của mẫu Blazor. Nó gắn
  tabindex="-1" lên <h1> rồi focus vào đó sau mỗi lần điều hướng, để người dùng trình đọc màn hình
  được đưa thẳng tới tiêu đề thay vì phải nghe lại từ đầu trang. Việc đó TỐT, giữ nguyên.

  Nhưng trình duyệt vẽ luôn vòng focus, và trên trang chủ <h1> là dòng chữ khổng lồ "Haute Beauté &
  Refined Luxury" nên vòng focus thành một cái khung trắng to đùng giữa màn hình.

  Bỏ vòng focus CHỈ cho phần tử tabindex="-1" là an toàn: những phần tử đó không bao giờ tới được
  bằng phím Tab, nên không người dùng bàn phím nào mất dấu chỉ vị trí. Vòng focus của link, nút và
  ô nhập vẫn còn nguyên.
*/
[tabindex="-1"]:focus {
  outline: none;
}

/*
  "Sign In" bị gãy làm hai dòng trên điện thoại, đẩy nút cao 60px thay vì 40px.
  Nhãn nút không bao giờ được xuống dòng — nút gãy dòng luôn trông như lỗi.
*/
.btn-login,
.btn-gold,
.btn-outline-gold {
  white-space: nowrap;
}

/*
  Tên shop dài (ví dụ "Beauty Shop (demo)") gãy làm hai dòng trên điện thoại và thổi chiều cao
  thanh đầu trang lên. Thu nhỏ chữ dưới 480px và cấm gãy dòng.
*/
@media (max-width: 479px) {
  /*
    Chỉ cấm gãy dòng thôi thì tên shop không co được nữa và ĐẨY cụm nút tràn khỏi màn hình 21px -
    đổi một lỗi dễ thấy lấy một lỗi khó thấy hơn. Nên phải nói đủ ba điều:
      1. Khối thương hiệu ĐƯỢC PHÉP co  (min-width: 0, thiếu cái này thì flex item không co).
      2. Tên dài thì cắt bằng dấu ba chấm, chứ không gãy dòng, cũng không tràn.
      3. Cụm nút bên phải KHÔNG BAO GIỜ co - Sign In và nút menu luôn phải bấm được.
  */
  .luxe-header .luxe-container > a:first-child {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .luxe-header .luxe-container > div:last-child {
    flex: none;
  }

  .luxe-header .text-gold-gradient {
    font-size: 1.05rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /*
    Bỏ hẳn pill "Sign In" trên thanh đầu trang ở cỡ điện thoại.

    Không phải để lấy chỗ cho đẹp: ở màn 375px, CÙNG MỘT hành động đăng nhập đang hiện BA LẦN trên
    cùng một khung hình - pill này, mục trong menu hamburger, và nút "Login" ở thanh dính đáy.
    Ba nút cùng một việc làm người dùng khựng lại tự hỏi chúng có khác nhau không. Giữ lại hai chỗ
    dễ với tới nhất (menu và thanh đáy), bỏ cái chật chội nhất - nhờ đó tên shop cũng hiện đủ.
  */
  .luxe-header .btn-login {
    display: none;
  }

  /*
    Dòng phụ "HAUTE BEAUTÉ & NAILS SPA" chiếm chỗ mà không nói thêm điều gì ở cỡ máy này.
    Cần !important vì phần tử mang display:block viết thẳng trong thuộc tính style, mà inline style
    luôn thắng quy tắc từ file CSS ngoài. Không có !important thì dòng này im lặng không có tác dụng.
  */
  .luxe-header .luxe-brand-sub {
    display: none !important;
  }
}

/*
  Nhãn nhỏ đầu trang chủ bị cắt mất 28px bên phải ở màn 375px.

  Vá ở chính cái nhãn là chữa triệu chứng. Gốc rễ: .luxe-hero-left là một GRID ITEM, mà grid item
  (và flex item) mặc định mang min-width: auto - nghĩa là nó KHÔNG co xuống nhỏ hơn nội dung rộng
  nhất bên trong. Đo thực tế: ô lưới chỉ rộng 335px nhưng .luxe-hero-left phình ra 387px, kéo theo
  mọi thứ bên trong tràn khỏi màn hình.

  min-width: 0 gỡ đúng cái chốt đó. Đây là bẫy hay gặp nhất của CSS Grid va Flexbox, cũng là lý do
  vì sao thêm max-width: 100% cho phần tử CON gần như không bao giờ chữa được lỗi tràn ngang.
*/
.luxe-hero-left,
.luxe-hero-right {
  min-width: 0;
}

/* ===================== Dấu hiệu nhận diện (logo hoặc chữ cái đầu) =====================
   Một chỗ duy nhất: đầu trang, chân trang và trang đặt lịch đều dùng lại, nên đổi logo là đổi hết. */
.brand-mark {
  width: var(--mark-size, 44px);
  height: var(--mark-size, 44px);
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--luxe-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 80%);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
  overflow: hidden;
}

/* Logo thật phủ kín vòng tròn; ảnh nào cũng cắt về hình tròn nên không ai phải tự cắt ảnh. */
.brand-mark-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand-mark-letter {
  font-size: calc(var(--mark-size, 44px) * 0.42);
  font-weight: 700;
  color: var(--luxe-gold-bright);
  line-height: 1;
}

/* ===================== Đăng nhập bằng Telegram =====================
   Con số hai chữ số là thứ to nhất trong khối: người ta đang cầm điện thoại và phải NHÌN màn hình
   này để biết bấm nút nào, nên nó không được nhỏ hay mờ. */
.tg-login { display: block; }

.tg-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--luxe-pearl);
  margin-bottom: 0.35rem;
}

.input-lux {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: rgba(10, 8, 15, 0.6);
  border: 1px solid var(--luxe-border);
  color: #fff;
  /* 16px: nhỏ hơn thì iOS tự phóng to trang khi chạm vào ô nhập. */
  font-size: 1rem;
  outline: none;
}

.input-lux:focus { border-color: var(--luxe-gold); }

.tg-hint, .tg-newhere {
  font-size: 0.75rem;
  color: var(--luxe-muted);
  text-align: center;
  margin-top: 0.75rem;
  line-height: 1.5;
}

.tg-newhere a { color: var(--luxe-gold); }

/* Trang đăng nhập (2026-10-12): Google trên cùng → "or" → MỘT ô chọn Email / Telegram, mỗi lúc một ô nhập + một nút. */
.auth-methods { display: flex; flex-direction: column; margin-bottom: 0.5rem; }
.auth-google {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; padding: 0.8rem 1rem;
  background: #fff; color: #1f2937; border-radius: 0.75rem; font-weight: 600; font-size: 0.9rem; text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.auth-google:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.auth-or { display: flex; align-items: center; gap: 0.85rem; margin: 1.1rem 0; color: var(--luxe-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.1); }
.auth-tab-input { position: absolute; opacity: 0; pointer-events: none; }

/* Ba nút cạnh nhau (2026-10-14): Google · Email · Telegram. Thẻ kính tối, icon tròn ở trên, chữ ở dưới; chọn Email / Telegram thì
   viền vàng sáng và ô nhập mở ra ngay bên dưới (radio + CSS, không JS). */
.auth-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; }
.auth-choices.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.auth-choice {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 4.6rem; padding: 0.7rem 0.4rem 0.6rem; border-radius: 1rem; cursor: pointer; text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09); color: var(--luxe-pearl);
  transition: transform 0.25s ease, border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.auth-choice:hover { transform: translateY(-2px); border-color: var(--luxe-border-bright); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 175, 55, 0.08); }
.auth-choice:active { transform: translateY(0) scale(0.98); }
.auth-choice-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.auth-choice:hover .auth-choice-icon { transform: scale(1.06); }
.auth-choice-label { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; transition: color 0.35s ease; }
/* Ba icon CÙNG một bộ: nét vàng kim trên vòng tròn vàng nhạt (chủ shop 2026-10-14 — không dùng logo màu của Google / Telegram). */
.auth-choice .auth-choice-icon { background: rgba(212, 175, 55, 0.14); color: var(--luxe-gold-bright); box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.4); }
.auth-choice:hover .auth-choice-icon { box-shadow: inset 0 0 0 1px var(--luxe-gold-bright), 0 0 16px var(--luxe-gold-glow); }

#auth-tab-email:checked ~ .auth-choices .auth-choice-email,
#auth-tab-tg:checked ~ .auth-choices .auth-choice-tg {
  border-color: var(--luxe-gold-bright);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.16) 0%, rgba(212, 175, 55, 0.05) 100%);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35), 0 10px 28px var(--luxe-gold-glow);
}
#auth-tab-email:checked ~ .auth-choices .auth-choice-email .auth-choice-label,
#auth-tab-tg:checked ~ .auth-choices .auth-choice-tg .auth-choice-label { color: var(--luxe-gold-bright); }
#auth-tab-email:focus-visible ~ .auth-choices .auth-choice-email,
#auth-tab-tg:focus-visible ~ .auth-choices .auth-choice-tg,
.auth-choice-google:focus-visible { outline: 2px solid var(--luxe-gold); outline-offset: 3px; }

.auth-choose-hint { margin: 0.75rem 0 0; text-align: center; font-size: 0.78rem; color: var(--luxe-muted); }
#auth-tab-email:checked ~ .auth-choose-hint,
#auth-tab-tg:checked ~ .auth-choose-hint { display: none; }

/* Hai ô chồng một chỗ (grid 1 ô): khung giữ nguyên, chỉ nội dung chuyển — ô cũ mờ + trượt ra, ô mới mờ + trượt vào. Email ở bên trái,
   Telegram bên phải nên hướng trượt khớp với nút vừa bấm. */
.auth-panels {
  display: none; margin-top: 0.75rem; padding: 0.85rem 0.9rem 0.7rem; border-radius: 1rem; overflow: hidden;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(212, 175, 55, 0.22);
}
#auth-tab-email:checked ~ .auth-panels,
#auth-tab-tg:checked ~ .auth-panels { display: grid; }
.auth-panel {
  grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.35s;
}
.auth-panel-email { transform: translateX(-28px); }
.auth-panel-tg { transform: translateX(28px); }
#auth-tab-email:checked ~ .auth-panels .auth-panel-email,
#auth-tab-tg:checked ~ .auth-panels .auth-panel-tg {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity 0.4s ease 0.08s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.04s, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .auth-choice, .auth-choice-icon, .auth-choice-label, .auth-panel { transition: none !important; }
  .auth-panel { transform: none !important; }
}
@media (max-width: 380px) {
  .auth-choices { gap: 0.45rem; }
  .auth-choice { min-height: 5.5rem; padding: 0.8rem 0.25rem 0.7rem; }
  .auth-choice-icon { width: 2.4rem; height: 2.4rem; }
  .auth-choice-label { font-size: 0.76rem; }
}
.auth-submit { width: 100%; border-radius: 0.75rem; padding: 0.7rem; margin-top: 0.6rem; }
/* Ghi chú trong khung đăng nhập: sát hơn (2026-10-14). */
.auth-panels .tg-hint, .auth-panels .tg-newhere { margin-top: 0.5rem; line-height: 1.4; }
.auth-panels .tg-send { padding: 0.7rem !important; margin-top: 0.6rem !important; }

.tg-wait-lead {
  text-align: center;
  font-size: 0.85rem;
  color: var(--luxe-pearl);
  margin: 0 0 0.5rem;
}

.tg-match {
  margin: 0 auto 0.75rem;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.25rem;
  border: 1px solid var(--luxe-gold);
  background: rgba(212, 175, 55, 0.12);
  color: var(--luxe-gold-bright);
  font-size: 2.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.tg-target, .tg-status {
  text-align: center;
  font-size: 0.8rem;
  color: var(--luxe-muted);
  margin: 0.25rem 0;
}

.tg-cancel {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: 0.6rem;
  background: none;
  border: 0;
  color: var(--luxe-muted);
  font: inherit;
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
}

.tg-sending { text-align: center; padding: 0.5rem 0 0.25rem; }

/* Vòng xoay: bằng chứng nhìn thấy được là máy đang làm việc. Chữ không thôi thì người ta vẫn ngờ màn hình đứng. */
.tg-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 0.85rem;
  border-radius: 50%;
  border: 3px solid rgba(212, 175, 55, 0.2);
  border-top-color: var(--luxe-gold-bright);
  animation: tg-spin 0.8s linear infinite;
}

@keyframes tg-spin { to { transform: rotate(360deg); } }

/* Ai tắt hiệu ứng chuyển động thì cho nhấp nháy nhẹ — vẫn phải thấy là máy đang chạy, chỉ là không quay. */
@media (prefers-reduced-motion: reduce) {
  .tg-spinner { animation: tg-pulse 1.4s ease-in-out infinite; border-top-color: var(--luxe-gold); }
  @keyframes tg-pulse { 50% { opacity: 0.35; } }
}

.tg-slow { color: var(--luxe-gold); }

.tg-error {
  margin-top: 0.85rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.65rem;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
  font-size: 0.8rem;
}

/* Cửa dự phòng của chủ shop: gập lại, vì nó không phải đường đi hằng ngày của ai cả. */
.tg-fallback { margin-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 1rem; }
.tg-fallback summary { font-size: 0.78rem; color: var(--luxe-muted); cursor: pointer; }

.tg-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.6rem 1rem;
  background: #fff;
  color: #1f2937;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.8rem;
  text-decoration: none;
}


/* ===== Một trang đăng nhập + bước khai tên / số điện thoại sau Google ===== */
.signed-in-note {
    display: flex; flex-direction: column; gap: .35rem; padding: .8rem 1rem; margin-bottom: 1.25rem;
    border-radius: .75rem; font-size: .83rem; color: var(--luxe-pearl, #f5f0e6);
    background: rgba(212, 175, 55, .1); border: 1px solid rgba(212, 175, 55, .3);
}
.signed-in-links { display: flex; flex-wrap: wrap; gap: .9rem; }
.signed-in-links a { color: var(--luxe-gold); font-weight: 600; text-decoration: none; }

.complete-lead { font-size: .88rem; line-height: 1.6; color: var(--luxe-muted); margin: 0 0 1.25rem; }
.complete-lead strong { color: var(--luxe-pearl, #f5f0e6); font-weight: 600; word-break: break-all; }
.complete-btn { display: block; width: 100%; text-align: center; border-radius: .75rem; padding: .85rem; margin-top: 1.1rem; text-decoration: none; }
.complete-error {
    padding: .75rem 1rem; margin-bottom: 1rem; border-radius: .75rem; font-size: .83rem;
    background: rgba(239, 68, 68, .15); border: 1px solid rgba(239, 68, 68, .35); color: #fca5a5;
}
.complete-alt { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .08); text-align: center; }
.complete-link {
    background: none; border: 0; padding: .5rem; min-height: 44px; cursor: pointer;
    color: var(--luxe-gold); font: inherit; font-size: .83rem; font-weight: 600; text-decoration: underline;
}


/* ================= HEADER: không xuống dòng (chủ shop 2026-10-11) =================
   Chữ menu không bao giờ gãy dòng; khoảng cách co theo bề ngang. Màn chưa đủ chỗ cho cả 8 mục
   thì gom vào nút ☰ thay vì ép chữ xuống dòng. Dòng hiệu dưới tên shop luôn một dòng, chỉ hiện khi menu đã gom vào ☰. */
.luxe-header .luxe-nav-desktop { gap: clamp(1rem, 1.5vw, 1.75rem) !important; }
.luxe-header .luxe-nav-desktop a { white-space: nowrap; }
.luxe-header .luxe-brand-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 19rem;
}
@media (max-width: 1279px) {
  .luxe-header .luxe-nav-desktop { display: none !important; }
  .luxe-header .luxe-mobile-menu-btn { display: inline-flex !important; }
}
/* Khung header tối đa 1280px, 8 mục menu đã chiếm ~740px → khi menu hiện đủ thì không còn chỗ cho dòng hiệu. */
@media (min-width: 1280px) {
  .luxe-header .luxe-brand-sub { display: none !important; }
}
/* "Offers" nổi nhẹ: chữ hồng ánh vàng + chấm nhỏ nhấp nháy chậm (chủ shop chọn cách B, 2026-10-11). */
.luxe-header .nav-offers {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--luxe-rose) !important;
  text-decoration: none;
  transition: color 0.2s;
}
.luxe-header .nav-offers:hover { color: var(--luxe-gold) !important; }
.luxe-header .nav-offers-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--luxe-rose);
  box-shadow: 0 0 0 0 rgba(216, 155, 145, 0.6);
  animation: nav-offers-pulse 2.4s ease-out infinite;
}
@keyframes nav-offers-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(216, 155, 145, 0.6); }
  70%  { box-shadow: 0 0 0 7px rgba(216, 155, 145, 0); }
  100% { box-shadow: 0 0 0 0 rgba(216, 155, 145, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .luxe-header .nav-offers-dot { animation: none; }
}

/* ================= Giao diện mùa lễ (SeasonService, chủ shop duyệt mẫu 2026-10-16) =================
   Tiết chế: chỉ một màu nhấn theo mùa (rượu vang / xanh nửa đêm), còn lại vẫn vàng của thương hiệu. Không emoji, không đèn nháy. */
/* Thanh mùa lễ GHIM trên cùng khi cuộn (chủ shop 2026-10-16: kéo xuống không được mất). Thanh đầu trang dính (trang chủ, đặt lịch,
   coupon) dời xuống đúng bằng chiều cao thanh qua --ss-band-h — chỉ khi trang có thanh, nên ngoài mùa lễ không đổi gì. */
:root:has(.ss-band) { --ss-band-h: 42px; }
:root:has(.ss-band) .luxe-header, :root:has(.ss-band) .booking-topbar { top: var(--ss-band-h); }
.ss-band {
  position: sticky; top: 0; z-index: 60; min-height: var(--ss-band-h, 42px); box-sizing: border-box; padding: 0.4rem 1rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem 1.4rem;
  font-size: 0.8rem; letter-spacing: 0.02em; color: rgba(250, 247, 242, 0.85); text-align: center;
}
.ss-band.ss-xmas { background: linear-gradient(90deg, #1a070c 0%, #3a0f1b 50%, #1a070c 100%); }
.ss-band.ss-ny { background: linear-gradient(90deg, #07080f 0%, #141a2e 50%, #07080f 100%); }
.ss-band::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.75), transparent);
}
.ss-band .ss-k {
  font-family: "Playfair Display", Georgia, serif; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase;
  background: linear-gradient(100deg, #d9b45a 0%, #fff1c4 25%, #d9b45a 50%, #fff1c4 75%, #d9b45a 100%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: ss-sheen 6s linear infinite;
}
.ss-band .ss-r { width: 1px; height: 14px; background: rgba(212, 175, 55, 0.45); }
.ss-band .ss-c { font-family: var(--font-editorial, "Cormorant Garamond", serif); font-style: italic; font-size: 0.95rem; color: #e9d29a; }
.ss-band a {
  color: #f3dfa2; text-decoration: none; border-bottom: 1px solid rgba(243, 223, 162, 0.5); padding-bottom: 1px;
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
}
@keyframes ss-sheen { to { background-position: -200% 0; } }
@media (max-width: 760px) {
  :root:has(.ss-band) { --ss-band-h: 58px; }
  .ss-band { gap: 0.25rem 0.9rem; font-size: 0.74rem; }
  .ss-band .ss-r, .ss-band .ss-wide { display: none; }
  .ss-band .ss-line { flex-basis: 100%; order: 3; }
}

.ss-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
#hero[data-season="xmas"] .ss-vignette {
  background: radial-gradient(ellipse 60% 70% at 0% 100%, rgba(110, 18, 38, 0.62), transparent 70%),
              radial-gradient(ellipse 50% 60% at 100% 0%, rgba(110, 18, 38, 0.5), transparent 70%);
}
#season-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

/* ---------- Trang chủ: chữ xuống dòng gọn trên màn hẹp (polish 2026-10-22) ----------
   Tiêu đề chia dòng đều (không còn một chữ mồ côi ở dòng cuối); nhãn / ô có chữ dài trên điện thoại
   xuống dòng thành khối bo góc thay vì viên thuốc vỡ đôi; giờ mở cửa không bị bẻ giữa "7:00 / PM". */
section h1, section h2, section h3 { text-wrap: balance; }
.hero-badge, .ba-hint { text-wrap: balance; }
.ba-hint { display: inline-block; max-width: 100%; line-height: 1.5; }
.calc-head { flex-wrap: wrap; gap: 0.75rem 1rem; }
.calc-head > span { white-space: nowrap; }
.hours-head { flex-wrap: wrap; gap: 0.35rem 1rem; }
.hours-list > div { gap: 1rem; }
.hours-list > div > span:last-child { white-space: nowrap; text-align: right; }
/* Khối trưng bày đầu trang: tên món thật rất dài ("Swan Signature Head Spa - 100 minutes" + mô tả 5 câu) làm nút
   chọn tràn khỏi khung và thẻ dưới ảnh phủ kín ảnh. Nút chọn cắt "…" (tên đủ ở title), tiêu đề ≤ 2 dòng, mô tả ≤ 3 dòng;
   điện thoại: nút Book xuống dưới chữ thay vì ép mô tả thành cột hẹp. */
.hero-tab-btn { flex-shrink: 0; max-width: 15rem; overflow: hidden; text-overflow: ellipsis; }
.hero-tabs { scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.hero-tabs::-webkit-scrollbar { display: none; }
.hero-tab-btn { transition: transform 160ms var(--ease-out), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hero-tab-btn:active { transform: scale(0.97); }
/* Đổi món trong khối trưng bày: trước đây ảnh và chữ đổi "bụp" (ảnh không có transition opacity, chữ thay tức thì).
   Giờ ảnh mờ + nhoè nhẹ rồi hiện lại khi ảnh mới đã giải mã xong (luxury.js), chữ mờ cùng nhịp. */
#hero-showcase-img { transition: transform 0.6s var(--ease-out), opacity 180ms var(--ease-out), filter 180ms var(--ease-out); }
.hero-sc-card > div { transition: opacity 180ms var(--ease-out); }
.luxe-img-frame.is-swapping #hero-showcase-img { opacity: 0.35; filter: blur(4px); }
.luxe-img-frame.is-swapping .hero-sc-card > div { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .luxe-img-frame.is-swapping #hero-showcase-img { filter: none; } }
#hero-showcase-title, #hero-showcase-desc { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
#hero-showcase-title { -webkit-line-clamp: 2; line-clamp: 2; text-wrap: balance; }
#hero-showcase-desc { -webkit-line-clamp: 3; line-clamp: 3; }
.hero-sc-card > div { min-width: 0; }
.hero-sc-card > .btn-gold { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 640px) {
  .hero-sc-card { flex-direction: column; align-items: stretch !important; gap: 0.85rem !important; }
  .hero-sc-card > .btn-gold { align-self: flex-start; }
}

/* ---------- Mùa New Year: ảnh thật trong khung vòm (chủ shop chọn mẫu "C", 2026-10-22) ----------
   Mẫu cũ (chữ vàng gradient, tia sáng, đồng hồ) bị chê "rẻ tiền": sang là nhờ MỘT tấm ảnh thật, tối và ấm, chữ ít.
   Nền đen trơn + quầng vàng sau ảnh (không video, không hạt mùa lễ); ảnh dọc trong khung vòm, viền vàng mảnh lệch ra sau. */
#hero[data-season="ny"] {
  background:
    radial-gradient(55% 70% at 78% 45%, rgba(201, 162, 74, 0.16) 0%, transparent 65%),
    radial-gradient(40% 60% at 10% 90%, rgba(201, 162, 74, 0.06) 0%, transparent 70%),
    #0a0810;
}
#hero[data-season="ny"] h1 .text-gold-gradient { filter: none !important; }
.ny-badge {
  display: flex; align-items: center; gap: 0.65rem; margin: 0 0 1.6rem;
  color: #e8d3a4; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
}
.ny-badge::before { content: ""; flex: none; width: 32px; height: 1px; background: #c9a85c; }
.ny-arch-wrap { display: flex; justify-content: center; align-items: center; min-width: 0; }
.ny-arch { position: relative; width: 400px; max-width: 100%; aspect-ratio: 4 / 5.2; margin: 0; }
.ny-arch::before {
  content: ""; position: absolute; inset: -14px; border: 1px solid rgba(214, 186, 120, 0.55);
  border-radius: 999px 999px 18px 18px; transform: translate(14px, 14px); pointer-events: none;
}
.ny-arch img {
  position: relative; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%;
  border-radius: 999px 999px 14px 14px; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55);
  animation: ny-arch-in 1.2s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes ny-arch-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ny-arch-cap {
  position: absolute; left: -2.2rem; bottom: 2.4rem; padding: 0.9rem 1.1rem; border-radius: 14px; white-space: nowrap;
  background: rgba(12, 10, 14, 0.9); border: 1px solid rgba(214, 186, 120, 0.35); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.ny-arch-cap small { display: block; margin-bottom: 0.25rem; font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase; color: #c9a85c; }
.ny-arch-cap strong { font-family: var(--font-serif); font-weight: 500; font-size: 1.2rem; color: var(--luxe-pearl); }
@media (min-width: 1024px) and (max-width: 1279px) { .ny-arch { width: 330px; } }   /* chừa chỗ cho viền lệch 14px, không tràn mép */
@media (max-width: 1023px) {
  .ny-arch-wrap { margin-top: 0.5rem; }
  .ny-arch { width: min(300px, 78vw); }
  .ny-arch-cap { left: -1rem; bottom: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .ny-arch img { animation: none; } }

.ss-offers::before {
  content: ""; position: absolute; left: 50%; top: -120px; width: min(900px, 100%); height: 520px; transform: translateX(-50%);
  pointer-events: none; filter: blur(10px);
}
.ss-offers.ss-xmas::before { background: radial-gradient(ellipse, rgba(122, 24, 44, 0.42) 0%, transparent 65%); }
.ss-offers.ss-ny::before { background: radial-gradient(ellipse, rgba(214, 196, 160, 0.14) 0%, transparent 65%); }
.ss-offers .luxe-card { border-color: rgba(212, 175, 55, 0.38); }
.ss-offers.ss-xmas .luxe-card { box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.08), 0 30px 60px -30px rgba(122, 24, 44, 0.55); }
.ss-offers.ss-ny .luxe-card { box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.08), 0 30px 60px -30px rgba(214, 196, 160, 0.35); }
.ss-pill {
  padding: 0.28rem 0.7rem; border-radius: 9999px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
  color: #f3dfa2; border: 1px solid rgba(212, 175, 55, 0.55);
}
.ss-xmas .ss-pill { background: #4a1220; }
.ss-ny .ss-pill { background: rgba(214, 196, 160, 0.12); }
.ss-tag { display: block; font-family: var(--font-editorial, "Cormorant Garamond", serif); font-style: italic; font-size: 0.9rem; color: #d9bf7c; margin-bottom: 0.1rem; }
.ss-orn { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin-bottom: 0.9rem; }
.ss-orn i { display: block; width: 56px; height: 1px; background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.8)); }
.ss-orn i:last-child { transform: scaleX(-1); }
.ss-orn span { font-family: "Playfair Display", Georgia, serif; font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase; color: #e3c983; }
@media (prefers-reduced-motion: reduce) {
  .ss-band .ss-k { animation: none; }
}

/* Mùa lễ trên các trang khách khác (đặt lịch, đăng nhập, coupon / gói / combo — SeasonBand Fx).
   Quầng màu và hạt rơi phủ CỐ ĐỊNH lên trên nội dung (dưới thanh đầu trang dính z 30 thì bị che, nên đặt 25) — nằm dưới thì
   các khối nền đặc (khung đăng nhập, thẻ) che mất. Hạt mờ hẳn ở cột giữa (luxury.js) nên không vướng chữ. */
.ss-page-vignette { position: fixed; inset: 0; pointer-events: none; z-index: 25; }
.ss-page-vignette.ss-xmas {
  background: radial-gradient(ellipse 50% 55% at 0% 100%, rgba(110, 18, 38, 0.45), transparent 70%),
              radial-gradient(ellipse 40% 50% at 100% 0%, rgba(110, 18, 38, 0.35), transparent 70%);
}
.ss-page-vignette.ss-ny {
  background: radial-gradient(ellipse 50% 55% at 0% 100%, rgba(18, 28, 60, 0.55), transparent 70%),
              radial-gradient(ellipse 40% 50% at 100% 0%, rgba(214, 196, 160, 0.12), transparent 70%);
}
.ss-page-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 26; }
.ss-script { font-family: var(--font-editorial); font-style: italic; color: #e3c983; font-size: 1.2rem; line-height: 1.3; }
.ss-booking-note { margin: -0.4rem 0 1rem; }
.ss-orn-left { justify-content: flex-start; }
.ss-card { box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35), 0 40px 90px -30px rgba(122, 24, 44, 0.85); }
:root:has(.ss-band.ss-ny) .ss-card { box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35), 0 40px 90px -30px rgba(214, 196, 160, 0.4); }
:root:has(.ss-band.ss-xmas) .off { background: #4a1220; color: #f3dfa2; border: 1px solid rgba(212, 175, 55, 0.55); }
:root:has(.ss-band.ss-ny) .off { background: rgba(214, 196, 160, 0.12); color: #f3dfa2; border: 1px solid rgba(212, 175, 55, 0.55); }

/* Trang coupon / gói / combo lúc bình thường: nền "bụi vũ trụ" như trang đăng nhập. */
.gift-cosmic { position: relative; overflow: hidden; min-height: calc(100vh - 56px); }
.gift-cosmic > .gift-page { position: relative; z-index: 1; }