/* ===== HUTU SPA — dark luxe theme (SpaRelax-inspired), overrides style.css ===== */
:root{
  --rose:#56c477; --rose-d:#3fae60; --rose-l:#39564a;
  --gold:#cdb27a; --ink:#ece9e2; --muted:#9b978e;
  --bg:#141210; --blush:#1b1814; --blush2:#221e19; --line:#2c2823;
  --shadow:0 24px 60px rgba(0,0,0,.55); --radius:16px;
  --ff-head:'Literata',Georgia,serif;
  --ff-body:'Mulish','Be Vietnam Pro',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --script:'Alex Brush',cursive;
  --green-soft:#c4f2d4;
}
body{background:var(--bg);color:var(--ink)}
h1,h2,h3{color:#fff;letter-spacing:.2px}
a{color:var(--rose)} a:hover{color:#7bd998}
.muted{color:var(--muted)}
::selection{background:var(--rose);color:#0e1a12}

/* Eyebrow / script accent — cho tiêu đề phụ kiểu SpaRelax */
.section-eyebrow,.hero-eyebrow{font-family:var(--script);font-size:1.9rem;color:var(--rose);line-height:1;display:inline-block;margin-bottom:.1em}

/* ---- Buttons ---- */
.btn-primary{background:var(--rose);color:#0e1a12;border-color:var(--rose);font-weight:700}
.btn-primary:hover{background:#7bd998;color:#0e1a12}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.btn-outline:hover{background:var(--rose);color:#0e1a12;border-color:var(--rose)}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-light{background:var(--rose);color:#0e1a12}
.btn-light:hover{background:#7bd998}

/* ---- Top bar ---- */
.topbar{background:#0f0d0b;color:#b7b1a7;border-bottom:1px solid #221e19}
.topbar-info a{color:var(--rose)}
.status-badge.is-open{color:var(--green-soft)}

/* ---- Header ---- */
.site-header{background:rgba(17,15,13,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-link{color:#e4e0d8}
.nav-link:hover,.nav-link.active{color:var(--rose)}
.nav-link.active::after,.nav-link:hover::after{background:var(--rose)}
.brand-mark{color:#fff} .brand-mark span{color:var(--rose)} .brand-sub{color:var(--muted)}
.nav-dd-menu{background:#1c1915;border:1px solid var(--line);box-shadow:var(--shadow)}
.nav-dd-item{color:#e4e0d8} .nav-dd-item:hover{background:#242019;color:var(--rose)}
.nav-toggle span{background:#fff}
.lang-flags .flag{opacity:.6} .lang-flags .flag.active,.lang-flags .flag:hover{opacity:1}

/* ---- Hero ---- */
.hero{background:radial-gradient(1200px 600px at 75% -10%,rgba(86,196,119,.14),transparent 60%),linear-gradient(180deg,#17140f,#141210)}
.hero-badge{background:rgba(86,196,119,.12);color:var(--green-soft);border:1px solid rgba(86,196,119,.3)}
.hero-title{color:#fff;font-weight:600}
.hero-sub{color:#c7c2b8}
.hero-meta{color:var(--muted)}
.hero-blob{background:radial-gradient(circle at 35% 30%,rgba(86,196,119,.5),rgba(63,174,96,.15) 60%,transparent 75%)}
.hero-card{background:#1c1915;border:1px solid var(--line);color:#fff;box-shadow:var(--shadow)}
.hero-card strong{color:var(--rose)}
.hero-visual.has-img .hero-img{border-radius:18px;box-shadow:var(--shadow)}

/* ---- Sections ---- */
.section-alt{background:var(--blush)}
.section-title{color:#fff}
.section-sub{color:var(--muted)}
.section-head{position:relative}

/* ---- Cards (service / post / testimonial / generic) ---- */
.card,.svc-card,.service-card,.post-card,.testimonial,.price-group,.info-card,.why-card,
.cat-chip,.author-box,.binfo,.booking-step,.gallery-item figcaption{
  background:#1b1814;border-color:var(--line);color:var(--ink)
}
.card:hover,.svc-card:hover,.service-card:hover,.post-card:hover{box-shadow:var(--shadow);border-color:rgba(86,196,119,.35)}
.card h3,.svc-card h3,.service-card h3,.post-card h3,.card-title{color:#fff}
.card a,.svc-card a,.service-card a{color:#fff}
.card a:hover{color:var(--rose)}
.price-cat{color:var(--rose);border-bottom-color:var(--line)}
.price-table tr{border-bottom-color:rgba(255,255,255,.08)}
.price-table th a{color:#ece9e2} .price-table th a:hover{border-bottom-color:var(--rose)}
.price-val{color:var(--rose)}
.cat-chip{color:#e4e0d8} .cat-chip:hover{background:var(--rose);color:#0e1a12;border-color:var(--rose)}
.badge{background:var(--rose);color:#0e1a12}
.crumbs,.crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--rose)}

/* ---- Forms / inputs (booking, contact) ---- */
input,select,textarea{background:#17140f;color:#ece9e2;border:1px solid var(--line)}
input::placeholder,textarea::placeholder{color:#6f6b63}
input:focus,select:focus,textarea:focus{border-color:var(--rose);outline:none;box-shadow:0 0 0 3px rgba(86,196,119,.18)}
label{color:#d8d4cb}
select option{background:#17140f;color:#ece9e2}

/* ---- Page hero (inner pages) ---- */
.page-hero{background:radial-gradient(900px 400px at 80% -20%,rgba(86,196,119,.12),transparent 60%),#17140f;border-bottom:1px solid var(--line)}
.page-title{color:#fff} .page-sub{color:#c7c2b8}

/* ---- CTA band ---- */
.cta-band{background:linear-gradient(120deg,#1d2a21,#17140f);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta-band h2{color:#fff}

/* ---- Footer (ensure dark + green accents) ---- */
.site-footer{background:#0f0d0b;color:#b7b1a7;border-top:1px solid #221e19}
.site-footer h4,.site-footer strong{color:#fff}
.site-footer a{color:#cfcabf} .site-footer a:hover{color:var(--rose)}
.footer-social a{border-color:rgba(255,255,255,.18);color:#e4e0d8}
.footer-social a:hover{background:var(--rose);color:#0e1a12;border-color:var(--rose)}

/* ---- Marquee strip (SpaRelax-style running words) ---- */
.spa-marquee{background:var(--rose);color:#0e1a12;overflow:hidden;white-space:nowrap;padding:.7rem 0}
.spa-marquee .track{display:inline-block;animation:spa-run 22s linear infinite;font-family:var(--ff-head);font-size:1.5rem;font-weight:600;font-style:italic}
.spa-marquee .track span{margin:0 1.5rem;opacity:.9}
.spa-marquee .track span::after{content:"✦";margin-left:3rem;opacity:.5}
@keyframes spa-run{to{transform:translateX(-50%)}}

/* ---- Stats (Why Choose Us) ---- */
.spa-stats{display:flex;gap:2.5rem;flex-wrap:wrap;justify-content:center;margin-top:1.4rem}
.spa-stat{text-align:center}
.spa-stat b{display:block;font-family:var(--ff-head);font-size:2.8rem;color:var(--rose);line-height:1}
.spa-stat span{color:var(--muted);font-size:.95rem}

/* floating contact buttons keep contrast */
.float-contact a{box-shadow:var(--shadow)}