/**
 * Midolikit Modern Theme Engine (MMTE 2026) - Luxury Spa & Aesthetics Vertical
 * Benchmark: Shiseido Spa, Seoul Center, Thu Cuc, Aman Spa
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,400;1,600&display=swap');

:root {
  --spa-gold-primary: #d4af37;
  --spa-gold-light: #f5e6be;
  --spa-gold-gradient: linear-gradient(135deg, #d4af37 0%, #edd38c 50%, #c49a29 100%);
  --spa-rose-gold: #e8a598;
  --spa-dark: #0f1115;
  --spa-dark-surface: #171920;
  --spa-cream: #faf7f2;
}

/* Luxury Headings */
h1, h2, h3, .heading-font, .section-title b {
  font-family: 'Playfair Display', Georgia, serif !important;
  letter-spacing: 0.01em;
}

/* Luxury Header Bar */
#masthead {
  background: rgba(15, 17, 21, 0.95) !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25) !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4) !important;
}

.nav > li {
  border: none !important;
}

.nav > li > a {
  font-family: var(--midoli-font-sans) !important;
  color: #f1f5f9 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 10px 18px !important;
  letter-spacing: 0.02em;
  transition: all 0.25s ease;
}

.nav > li > a:hover {
  color: var(--spa-gold-primary) !important;
  background: rgba(212, 175, 55, 0.08) !important;
  border-radius: var(--midoli-radius-sm);
}

.phone-header {
  border: 1px solid var(--spa-gold-primary) !important;
  background: rgba(212, 175, 55, 0.12) !important;
  color: var(--spa-gold-light) !important;
  font-weight: 700 !important;
  padding: 8px 18px !important;
  border-radius: var(--midoli-radius-full) !important;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.25) !important;
  transition: all 0.3s ease !important;
}

.phone-header:hover {
  background: var(--spa-gold-gradient) !important;
  color: #111 !important;
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.5) !important;
  transform: translateY(-2px);
}

/* Dropdown Menus */
.nav .nav-dropdown {
  background: #171920 !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: var(--midoli-radius-md) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
  padding: 10px !important;
}

.nav-dropdown li a {
  color: #e2e8f0 !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  border-radius: var(--midoli-radius-sm) !important;
}

.nav-dropdown li a:hover {
  color: var(--spa-gold-light) !important;
  background: rgba(212, 175, 55, 0.15) !important;
}

/* Service Cards (Dịch vụ) */
.dich-vu .col-inner {
  border: 1px solid rgba(212, 175, 55, 0.2) !important;
  border-radius: var(--midoli-radius-md) !important;
  background: #ffffff !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dich-vu .col-inner:hover {
  border-color: var(--spa-gold-primary) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px rgba(212, 175, 55, 0.2) !important;
}

.dich-vu img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.dich-vu .col-inner:hover img {
  transform: scale(1.05);
}

/* Before / After Section (Trước & Sau) */
.truoc-sau img {
  border: 2px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: var(--midoli-radius-md) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
}

.truoc-sau img:hover {
  border-color: var(--spa-gold-primary) !important;
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.35) !important;
  transform: scale(1.02);
}

/* Callout & Button Styling */
.button.is-primary, .button.primary {
  background: var(--spa-gold-gradient) !important;
  color: #1a1403 !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35) !important;
}

.button.is-primary:hover, .button.primary:hover {
  background: linear-gradient(135deg, #c49a29 0%, #edd38c 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(212, 175, 55, 0.5) !important;
}

/* Accordion Enhancement */
.accordion-item {
  border-radius: var(--midoli-radius-md) !important;
  margin-bottom: 10px !important;
  border: 1px solid #e2e8f0 !important;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.accordion-title {
  font-family: var(--midoli-font-sans) !important;
  font-weight: 600 !important;
  padding: 14px 20px !important;
  background: #fafafa !important;
  transition: all 0.25s ease;
}

.accordion-title.active {
  background: var(--spa-gold-gradient) !important;
  color: #1a1403 !important;
}

/* Footer Luxury Polish */
.footer-wrapper {
  background: #0d0f13 !important;
  border-top: 2px solid var(--spa-gold-primary) !important;
}

.footer-wrapper a {
  color: #94a3b8 !important;
}

.footer-wrapper a:hover {
  color: var(--spa-gold-light) !important;
}