/* ==========================================================================
   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: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35);
  white-space: nowrap;
}

.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: translateY(0);
}

.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: all 0.3s ease;
  white-space: nowrap;
}

.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-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: all 0.25s ease;
}

.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: all 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;
}

#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 */
.luxe-grid-4 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}

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

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

.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: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.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);
}

.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 ease;
  display: block;
}

.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: all 0.25s ease;
}

.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: all 0.3s ease;
}

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

.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;
}

/* 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 */
.luxe-auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 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%);
}

.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: 2.25rem;
  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;
}

.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: all 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: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  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 {
  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;
  }
}

.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); }

.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-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;
}