/* ============================================================

   OPULENT NAIL SPA — Main Design System

   "Where Relaxation Meets Luxury"

   ============================================================ */



/* ── Google Fonts — Vietnamese & English Support ── */





/* ── CSS Custom Properties ── */

:root {

  /* Color Palette */

  --color-choco:        #3C1A0E;   /* Nâu Chocolate đậm */

  --color-choco-mid:    #5A2810;   /* Nâu chocolate giữa */

  --color-earth:        #6B3A2A;   /* Nâu Đất */

  --color-earth-light:  #8C5240;   /* Nâu Đất nhạt */

  --color-gold:         #C9963A;   /* Vàng Gold */

  --color-gold-light:   #E8C882;   /* Gold Nhạt */

  --color-gold-bright:  #F0D080;   /* Gold Sáng */

  --color-nude:         #D4B8A0;   /* Nude Ấm */

  --color-nude-light:   #E8D5C4;   /* Nude Nhạt */

  --color-cream:        #FAF5EE;   /* Kem Nhạt */

  --color-cream-warm:   #FDF8F2;   /* Trắng Ngà */

  --color-text-dark:    #2A1408;   /* Text Đậm */

  --color-text-mid:     #5A3520;   /* Text Giữa */

  --color-text-muted:   #9E7A5A;   /* Text Mờ */



  /* Gradients */

  --gradient-gold:      linear-gradient(135deg, #C9963A 0%, #E8C882 50%, #C9963A 100%);

  --gradient-gold-text: linear-gradient(135deg, #E8C882 0%, #C9963A 40%, #F0D080 70%, #C9963A 100%);

  --gradient-choco:     linear-gradient(180deg, #3C1A0E 0%, #5A2810 60%, #6B3A2A 100%);

  --gradient-hero:      linear-gradient(135deg, rgba(60,26,14,0.95) 0%, rgba(90,40,16,0.85) 50%, rgba(107,58,42,0.90) 100%);

  --gradient-card:      linear-gradient(145deg, rgba(60,26,14,0.6) 0%, rgba(90,40,16,0.4) 100%);

  --gradient-overlay:   linear-gradient(to bottom, rgba(42,20,8,0.4), rgba(42,20,8,0.8));



  /* Shadows */

  --shadow-gold:    0 4px 20px rgba(201,150,58,0.3);

  --shadow-gold-lg: 0 8px 40px rgba(201,150,58,0.4);

  --shadow-choco:   0 4px 24px rgba(60,26,14,0.5);

  --shadow-card:    0 10px 40px rgba(42,20,8,0.3);

  --shadow-inset:   inset 0 1px 0 rgba(232,200,130,0.2);



  /* Spacing */

  --space-xs:   0.5rem;

  --space-sm:   1rem;

  --space-md:   2rem;

  --space-lg:   4rem;

  --space-xl:   6rem;

  --space-xxl:  8rem;



  /* Border Radius */

  --radius-sm:  4px;

  --radius-md:  12px;

  --radius-lg:  24px;

  --radius-xl:  40px;

  --radius-full: 9999px;



  /* Transitions */

  --transition-fast:   0.2s ease;

  --transition-mid:    0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

  --transition-slow:   0.7s cubic-bezier(0.25, 0.8, 0.25, 1);



  /* Typography */

  --font-display: 'Prata', 'Playfair Display', 'Times New Roman', serif;

  --font-heading: 'Prata', 'Playfair Display', 'Times New Roman', serif;

  --font-body: 'Be Vietnam Pro', 'Roboto', 'Segoe UI', Arial, sans-serif;

  --font-sans:    'Lato', 'Roboto', 'Segoe UI', Arial, sans-serif;

  --font-script:  'Great Vibes', cursive, Georgia, serif;



  /* Z-index layers */

  --z-below:   -1;

  --z-base:     0;

  --z-card:    10;

  --z-overlay: 100;

  --z-nav:     900;

  --z-modal:  1000;

  --z-top:    9999;

}



/* ── Reset & Base ── */

*, *::before, *::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



html {

  scroll-behavior: smooth;

  font-size: 16px;

}



body {

  font-family: var(--font-body);

  background-color: var(--color-cream);

  color: var(--color-text-dark);

  line-height: 1.6;

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



img {

  max-width: 100%;

  height: auto;

  display: block;

}



a {

  text-decoration: none;

  color: inherit;

  transition: var(--transition-fast);

}



ul { list-style: none; }



/* ── Typography Utilities ── */

.font-display { font-family: var(--font-display); }

.font-heading  { font-family: var(--font-heading); }



.text-gold {

  background: var(--gradient-gold-text);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.text-cream { color: var(--color-cream); }

.text-nude  { color: var(--color-nude); }

.text-choco { color: var(--color-choco); }

.text-muted { color: var(--color-text-muted); }



/* ── Gold Divider ── */

.gold-divider {

  width: 80px;

  height: 2px;

  background: var(--gradient-gold);

  margin: 1.5rem auto;

}

.gold-divider-left {

  margin-left: 0;

}



/* ── Section Heading ── */

.section-title {

  font-family: var(--font-display);

  font-weight: 600;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}



.section-subtitle {

  font-family: var(--font-heading);

  font-style: italic;

  font-size: 1.1rem;

  color: var(--color-text-muted);

}



/* ── Gold Shimmer Button ── */

.btn-gold {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.85rem 2.2rem;

  background: var(--gradient-gold);

  color: var(--color-choco);

  font-family: var(--font-sans);

  font-weight: 700;

  font-size: 0.85rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  border: none;

  border-radius: var(--radius-full);

  cursor: pointer;

  transition: var(--transition-mid);

  box-shadow: var(--shadow-gold);

  position: relative;

  overflow: hidden;

}



.btn-gold::before {

  content: '';

  position: absolute;

  top: 0; left: -100%;

  width: 100%; height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);

  transition: 0.5s;

}



.btn-gold:hover::before { left: 100%; }

.btn-gold:hover {

  transform: translateY(-2px);

  box-shadow: var(--shadow-gold-lg);

  color: var(--color-choco);

}



/* Outline variant */

.btn-outline-gold {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.75rem 1.8rem;

  background: transparent;

  border: 1.5px solid var(--color-gold);

  color: var(--color-gold-light);

  font-family: var(--font-sans);

  font-weight: 600;

  font-size: 0.8rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  border-radius: var(--radius-full);

  cursor: pointer;

  transition: var(--transition-mid);

}



.btn-outline-gold:hover {

  background: var(--gradient-gold);

  color: var(--color-choco);

  transform: translateY(-2px);

  box-shadow: var(--shadow-gold);

}



/* ── Container ── */

.container {

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 1.5rem;

}



.container-wide {

  width: 100%;

  max-width: 1400px;

  margin: 0 auto;

  padding: 0 2rem;

}



/* ── Glassmorphism Card ── */

.glass-card {

  background: rgba(60, 26, 14, 0.5);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  border: 1px solid rgba(201,150,58,0.2);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-card), var(--shadow-inset);

}



/* ── Gold Border Card ── */

.gold-card {

  background: var(--color-cream-warm);

  border-left: 3px solid var(--color-gold);

  border-radius: 0 var(--radius-md) var(--radius-md) 0;

  padding: 1.5rem;

}



/* ── Ornament Lines ── */

.ornament {

  display: flex;

  align-items: center;

  gap: 1rem;

  color: var(--color-gold);

  font-family: var(--font-display);

  letter-spacing: 0.3em;

  font-size: 0.75rem;

  text-transform: uppercase;

}

.ornament::before, .ornament::after {

  content: '';

  flex: 1;

  height: 1px;

  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);

}



/* ── Page Transitions ── */

.page-enter {

  opacity: 0;

  transform: translateY(20px);

}

.page-enter.visible {

  opacity: 1;

  transform: translateY(0);

  transition: opacity 0.8s ease, transform 0.8s ease;

}



/* ── Scroll Reveal ── */

.reveal {

  opacity: 0;

  transform: translateY(40px);

  transition: opacity 0.9s ease, transform 0.9s ease;

}

.reveal.revealed {

  opacity: 1;

  transform: translateY(0);

}

.reveal-delay-1 { transition-delay: 0.15s; }

.reveal-delay-2 { transition-delay: 0.3s; }

.reveal-delay-3 { transition-delay: 0.45s; }

.reveal-delay-4 { transition-delay: 0.6s; }



/* ── Back to Top ── */

#back-to-top {

  position: fixed;

  bottom: 2rem;

  right: 2rem;

  width: 50px;

  height: 50px;

  background: var(--gradient-gold);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  opacity: 0;

  transform: translateY(20px);

  transition: var(--transition-mid);

  z-index: var(--z-overlay);

  box-shadow: var(--shadow-gold);

  border: none;

}

#back-to-top.visible {

  opacity: 1;

  transform: translateY(0);

}

#back-to-top:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-gold-lg);

}

#back-to-top svg { color: var(--color-choco); }



/* ── Location Switcher Floating Widget ── */

.location-switcher-float {

  position: fixed;

  bottom: 6rem;

  right: 2rem;

  z-index: var(--z-overlay);

  background: var(--gradient-choco);

  border: 1px solid rgba(201,150,58,0.4);

  border-radius: var(--radius-lg);

  padding: 1rem 1.2rem;

  min-width: 220px;

  box-shadow: var(--shadow-card);

  animation: floatPulse 3s ease-in-out infinite;

}

.location-switcher-float .ls-label {

  font-family: var(--font-body);

  font-size: 0.65rem;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color: var(--color-gold);

  margin-bottom: 0.3rem;

}

.location-switcher-float .ls-name {

  font-family: var(--font-display);

  font-size: 0.95rem;

  color: var(--color-cream);

  font-weight: 600;

  margin-bottom: 0.6rem;

}

.location-switcher-float .ls-btn {

  display: flex;

  align-items: center;

  gap: 0.4rem;

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--color-gold-light);

  background: rgba(201,150,58,0.15);

  border: 1px solid rgba(201,150,58,0.3);

  border-radius: var(--radius-full);

  padding: 0.4rem 0.9rem;

  cursor: pointer;

  transition: var(--transition-fast);

  text-decoration: none;

}

.location-switcher-float .ls-btn:hover {

  background: var(--color-gold);

  color: var(--color-choco);

}

.location-switcher-float .ls-close {

  position: absolute;

  top: 0.5rem;

  right: 0.6rem;

  background: none;

  border: none;

  color: var(--color-text-muted);

  font-size: 0.9rem;

  cursor: pointer;

  transition: var(--transition-fast);

  line-height: 1;

}

.location-switcher-float .ls-close:hover { color: var(--color-gold); }



@keyframes floatPulse {

  0%, 100% { box-shadow: 0 10px 40px rgba(42,20,8,0.3), 0 0 0 0 rgba(201,150,58,0.2); }

  50%       { box-shadow: 0 10px 40px rgba(42,20,8,0.3), 0 0 0 8px rgba(201,150,58,0); }

}



/* ── Particles (decorative) ── */

.particles-container {

  position: absolute;

  inset: 0;

  overflow: hidden;

  pointer-events: none;

}

.particle {

  position: absolute;

  width: 4px;

  height: 4px;

  background: var(--color-gold-light);

  border-radius: 50%;

  opacity: 0;

  animation: particleFloat var(--duration, 6s) ease-in-out infinite;

  animation-delay: var(--delay, 0s);

}

@keyframes particleFloat {

  0%   { opacity: 0; transform: translateY(0) scale(0); }

  20%  { opacity: 0.6; transform: translateY(-30px) scale(1); }

  80%  { opacity: 0.3; transform: translateY(-100px) scale(0.8); }

  100% { opacity: 0; transform: translateY(-150px) scale(0); }

}



/* ── Responsive Helpers ── */

@media (max-width: 768px) {

  :root { font-size: 15px; }

  .location-switcher-float { right: 1rem; bottom: 5rem; min-width: 180px; }

}



@media (max-width: 480px) {

  :root { font-size: 14px; }

  .location-switcher-float { display: none; }

}