/* ==========================================================================
   Brows By Anh Le: design tokens
   Bố cục và nhịp theo web mẫu Zota "Nail Salon 61"; màu, chữ theo brand Anh Le.
   Ghi chú [mẫu: ...] là giá trị đo được trên web mẫu.

   CO GIÃN THEO TỈ LỆ MÀN HÌNH
   Mọi kích thước dùng rem, còn cỡ chữ gốc (html) thay đổi theo chiều rộng màn hình.
   Vì vậy trong cùng một nhóm thiết bị, cả giao diện phóng to hoặc thu nhỏ đúng tỉ lệ,
   bố cục giữ nguyên:
     Điện thoại  < 600px    thiết kế chuẩn 390px  (16px ở 390px)
     Tablet      600–1199px thiết kế chuẩn 834px  (16px ở 834px)
     Laptop/PC   ≥ 1200px   thiết kế chuẩn 1440px (16px ở 1440px, tối đa 20px từ 1800px)
   Giới hạn trên và dưới dùng %, nên vẫn tôn trọng cỡ chữ người dùng đặt trong trình duyệt.

   Font: Be Vietnam Pro 300–600 và Cormorant Garamond 300–500 (có dấu tiếng Việt) ·
   Mrs Saint Delafield cho nhãn viết tay tiếng Anh (Meet Your Artist, Our Services…; không có dấu tiếng Việt).
   ========================================================================== */

html { font-size: clamp(87.5%, 4.1026vw, 106.25%); }
@media (min-width: 600px) { html { font-size: clamp(93.75%, 1.9185vw, 112.5%); } }
@media (min-width: 1200px) { html { font-size: clamp(81.25%, 1.1111vw, 125%); } }

:root {
  /* ---- Màu brand: lấy mẫu từ cover Facebook và Google ---- */
  --c-ink: #111111;         /* tiêu đề, nút chính                     [mẫu: #111111] */
  --c-onyx: #1A1918;        /* khối tối, footer, thanh đặt hẹn         [mẫu: #230D00] */
  --c-espresso: #24201C;    /* chữ dẫn đậm ấm                          [mẫu: #6D3D28] */
  --c-ivory: #F8F6F1;       /* nửa sáng của section chia đôi           [mẫu: #FFF0E9] */
  --c-nude: #E8DCD4;        /* nửa đậm của section sáng, copyright     [mẫu: #E5AE8E / #FFE4D7] */
  --c-porcelain: #FCFCFA;   /* nền trang                               [mẫu: #FFFFFF] */
  --c-gold: #B48854;        /* đường kẻ, icon; không dùng cho chữ nhỏ trên nền sáng (2.95:1) [mẫu: #C08F77] */
  --c-gold-light: #C4A068;  /* chữ vàng trên nền tối, 7.2:1            [mẫu: #B56E48] */
  --c-gold-deep: #86663C;   /* chữ vàng trên nền sáng, 4.9:1           [mẫu: #B56E48] */
  --c-stone: #57534E;       /* chữ thường trên ivory, 7.1:1            [mẫu: #666666] */
  --c-mist: #B9B2A7;        /* chữ phụ trên onyx, 8.4:1                [mẫu: #E5BAA5] */
  --c-line: #DDD3C8;        /* viền mảnh                               [mẫu: #E5E5E5] */

  /* ---- Font ---- */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;  /* [mẫu: Roboto 300 in hoa] */
  --font-body: "Be Vietnam Pro", "Helvetica Neue", Arial, sans-serif;      /* [mẫu: DM Sans] */
  --font-script: "Mrs Saint Delafield", "Snell Roundhand", cursive;        /* [mẫu: Rouge Script] */

  /* ---- Cỡ chữ (điện thoại; tablet và desktop ghi đè bên dưới) ---- */
  --fs-hero-pre: 1.5rem;
  --fs-hero-main: 2.75rem;     /* [mẫu mobile: 45px] */
  --fs-h2-pre: 1.375rem;       /* [mẫu mobile: 26–34px] */
  --fs-h2-main: 2.375rem;
  --fs-h3: 1.25rem;
  --fs-script: 2.5rem;         /* Mrs Saint Delafield nét nhỏ nên cần cỡ lớn hơn [mẫu: 28.8px] */
  --fs-lead: 1.0625rem;
  --fs-body: 1rem;             /* [mẫu: 16px / 30.4px] */
  --fs-small: .875rem;
  --fs-label: .75rem;          /* menu, nút [mẫu: 14–15px, giãn chữ 2px] */
  --lh-display: 1.08;
  --lh-body: 1.75;
  --ls-display: .02em;
  --ls-label: .16em;

  /* ---- Khoảng cách và layout ---- */
  --container: 71.25rem;       /* 1140px ở màn 1440px [mẫu: 1140px] */
  --gutter: 1.25rem;
  --gap: 1.5rem;
  --edge: max(var(--gutter), calc((100vw - var(--container)) / 2));
  --space-section: 4rem;
  --space-section-lg: 3rem;
  --header-h: 4rem;
  --bar-h: 3.75rem;
  --radius: 0;                 /* [mẫu: góc vuông] */
  --shadow-header: 0 2px 5px rgba(0, 0, 0, .1);  /* [mẫu: Divi sticky] */
  --ease: cubic-bezier(.77, 0, .175, 1);          /* [mẫu: fadeInBottom] */
  --dur: .3s;
}

@media (min-width: 600px) {
  :root {
    --fs-hero-pre: 1.75rem;
    --fs-hero-main: 3.25rem;
    --fs-h2-pre: 1.5rem;
    --fs-h2-main: 2.75rem;
    --fs-lead: 1.125rem;
    --gutter: 2rem;
    --gap: 2rem;
    --space-section: 5rem;
    --space-section-lg: 4rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --fs-hero-pre: 2.4rem;     /* [mẫu: 38.9px] */
    --fs-hero-main: 4.4rem;    /* [mẫu: 57.6–70px] */
    --fs-h2-pre: 2.25rem;      /* [mẫu: 43.2px] */
    --fs-h2-main: 3.5rem;      /* [mẫu: 57.6px] */
    --fs-h3: 1.4rem;           /* [mẫu: card 23px] */
    --fs-script: 2.75rem;
    --fs-lead: 1.25rem;        /* [mẫu: 20px / 38px] */
    --fs-body: 1.0625rem;
    --fs-label: .8125rem;
    --gutter: 2.5rem;
    --gap: 3rem;
    --space-section: 6.5rem;   /* [mẫu: 81–106px] */
    --space-section-lg: 5.5rem;/* [mẫu: 141px / 100px] */
    --header-h: 4.75rem;       /* [mẫu: 76px] */
  }
}

/* ==========================================================================
   Brows By Anh Le: layout và component (mobile-first).
   Token và quy tắc co giãn nằm ở design/brand-tokens.css (build ghép 2 file làm một).
   Breakpoint: 600px tablet · 768px bố cục 2 cột · 1200px laptop/desktop.
   ========================================================================== */

/* ---------- Nền tảng ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--c-porcelain);
  color: var(--c-stone);
  font: 300 var(--fs-body) / var(--lh-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; color: var(--c-ink); font-weight: 400; text-wrap: balance; }
strong { font-weight: 600; color: var(--c-ink); }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--c-gold-deep); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: .5rem; z-index: 100; padding: .75rem 1rem; background: var(--c-ink); color: var(--c-ivory); }
.skip:focus { left: .5rem; }
.icon { width: 1.15em; height: 1.15em; flex: none; }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--space-section); }
.section--ivory { background: var(--c-ivory); }
.section--nude { background: var(--c-nude); }
.center { text-align: center; }
.muted { color: var(--c-stone); font-size: var(--fs-small); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Chữ: nhãn viết tay, tiêu đề hai dòng ---------- */
.eyebrow {
  display: flex; align-items: center; gap: .9rem;
  margin: 0 0 .35rem;
  font: 400 var(--fs-script) / 1.15 var(--font-script);
  color: var(--c-gold-deep);
}
.eyebrow::after { content: ""; flex: 0 1 7rem; height: 1px; background: var(--c-gold); }
.eyebrow--center { justify-content: center; }
.eyebrow--center::before { content: ""; flex: 0 1 7rem; height: 1px; background: var(--c-gold); }

.title-duo {
  margin: 0 0 1.25rem;
  font-family: var(--font-display); font-weight: 300;
  line-height: var(--lh-display); letter-spacing: var(--ls-display);
  text-transform: uppercase; color: var(--c-ink);
}
.title-duo__pre { display: block; font-size: var(--fs-h2-pre); }
.title-duo__main { display: block; font-size: var(--fs-h2-main); }
.title-duo__post {
  display: block; margin-top: .7rem;
  font: 500 var(--fs-label) / 1.4 var(--font-body); letter-spacing: var(--ls-label); color: var(--c-gold-deep);
}
.title-duo--hero .title-duo__pre { font-size: var(--fs-hero-pre); }
.title-duo--hero .title-duo__main { font-size: var(--fs-hero-main); }
.title-duo--center { text-align: center; }

.lead { font-size: var(--fs-lead); line-height: 1.7; color: var(--c-espresso); }
.lead--narrow { max-width: 36rem; margin-inline: auto; }
.note { margin-top: 1.5rem; padding-left: 1rem; border-left: 2px solid var(--c-gold); font-size: var(--fs-small); color: var(--c-stone); }

/* ---------- Nút ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 3rem; padding: .85rem 1.5rem;
  border: 1px solid var(--c-ink); border-radius: var(--radius);
  background: var(--c-ink); color: var(--c-ivory);
  font: 500 var(--fs-label) / 1 var(--font-body); letter-spacing: var(--ls-label); text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease;
}
.btn:hover { background: var(--c-gold-light); border-color: var(--c-gold-light); color: var(--c-ink); }
.btn--ghost { background: transparent; color: var(--c-ink); }
.btn--ghost:hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-ivory); }
.btn--gold { background: var(--c-gold-light); border-color: var(--c-gold-light); color: var(--c-ink); }
.btn--gold:hover { background: var(--c-ivory); border-color: var(--c-ivory); }
.btn--light { background: transparent; border-color: rgba(196, 160, 104, .7); color: var(--c-ivory); }
.btn--light:hover { background: var(--c-ivory); border-color: var(--c-ivory); color: var(--c-ink); }
.btn--small { min-height: 2.5rem; padding: .6rem 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.btn-row .btn { flex: 1 1 auto; }
.btn-row--center { justify-content: center; }
@media (min-width: 600px) { .btn-row .btn { flex: 0 0 auto; } }

.text-link {
  display: inline-flex; align-items: center; gap: .45em; padding-bottom: .25em;
  border-bottom: 1px solid var(--c-gold);
  font: 500 var(--fs-label) / 1.4 var(--font-body); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-ink); text-decoration: none;
}
.text-link:hover { color: var(--c-gold-deep); }
.stars { display: inline-flex; gap: .05rem; color: var(--c-gold); }
.stars .icon { width: .95rem; height: .95rem; }

/* ---------- Header dính + menu ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(252, 252, 250, .95);
  -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px);
  transition: box-shadow var(--dur) ease;
}
.site-header.is-stuck { box-shadow: var(--shadow-header); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: var(--header-h); padding-inline: var(--gutter);
  max-width: calc(var(--container) + 12rem); margin-inline: auto;
}
.brand { display: block; flex: none; }
.brand__logo { width: auto; height: calc(var(--header-h) * .6); }
.nav { display: none; }
.site-header__actions { display: flex; align-items: center; gap: .5rem; }
.site-header__actions .btn { display: none; }
.menu-toggle {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -.6rem;
  border: 0; background: transparent; color: var(--c-ink); cursor: pointer;
}
.menu-toggle .icon { width: 1.6rem; height: 1.6rem; grid-area: 1 / 1; }
.menu-toggle .menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }

.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0; z-index: 49; overflow-y: auto;
  padding: 1rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  background: var(--c-onyx); color: var(--c-mist);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__list > li { border-bottom: 1px solid rgba(185, 178, 167, .16); }
.mobile-menu__list a {
  display: block; padding: .95rem 0;
  font: 300 1.65rem / 1.15 var(--font-display); letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-ivory); text-decoration: none;
}
.mobile-menu__list a[aria-current="page"] { color: var(--c-gold-light); }
.mobile-menu__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; padding-bottom: .9rem; }
.mobile-menu__sub a { padding: .45rem 0; font: 400 .95rem / 1.3 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--c-mist); }
.mobile-menu__cta { display: grid; gap: .75rem; margin-top: 1.75rem; }
.mobile-menu__address { margin-top: 1.5rem; font-size: var(--fs-small); }
body.menu-open { overflow: hidden; }
body.menu-open .action-bar { display: none; }

@media (min-width: 600px) {
  .site-header__actions .btn { display: inline-flex; }
}
@media (min-width: 1200px) {
  .nav { display: block; }
  .menu-toggle, .mobile-menu { display: none !important; }
  .nav__list { display: flex; gap: 2.25rem; }
  .nav__list > li { position: relative; }
  .nav__list a {
    display: block; padding-block: 1.6rem;
    font: 500 var(--fs-label) / 1 var(--font-body); letter-spacing: var(--ls-label); text-transform: uppercase;
    color: var(--c-ink); text-decoration: none;
  }
  .nav__list a:hover, .nav__list a[aria-current="page"] { color: var(--c-gold-deep); }
  .nav__sub {
    position: absolute; top: 100%; left: -1.25rem; min-width: 15rem; padding: .6rem 0;
    background: var(--c-porcelain); box-shadow: 0 .75rem 2rem rgba(17, 17, 17, .12); border-top: 2px solid var(--c-gold);
    opacity: 0; visibility: hidden; transform: translateY(.4rem);
    transition: opacity var(--dur) ease, transform var(--dur) ease, visibility var(--dur);
  }
  .nav__item--has-menu:hover .nav__sub, .nav__item--has-menu:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; }
  .nav__sub a { padding: .7rem 1.25rem; font-size: .95rem; font-weight: 400; letter-spacing: .01em; text-transform: none; }
}

/* ---------- Hero trang chủ (nền chia đôi, ảnh đè đường chia) ---------- */
.hero { background: var(--c-ivory); }
.hero__text { padding: 2.25rem var(--gutter) 2rem; }
.hero__label {
  margin-bottom: 1rem;
  font: 500 var(--fs-label) / 1.4 var(--font-body); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-gold-deep);
}
.hero .eyebrow { margin-top: 1.25rem; }
.hero__call { margin: .5rem 0 0; }
.hero__call-label { display: block; font-size: var(--fs-small); }
.phone-big { font: 500 1.65rem / 1.3 var(--font-body); color: var(--c-ink); text-decoration: none; letter-spacing: .01em; }
.hero__trust { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.5rem; font-size: var(--fs-small); text-decoration: none; }
.hero__media {
  display: flex; justify-content: center;
  padding: 0 var(--gutter) 2.5rem;
  background: linear-gradient(180deg, var(--c-ivory) 45%, var(--c-onyx) 45%);
}
.hero__img { width: min(82%, 24rem); aspect-ratio: 4 / 5; object-fit: cover; }

@media (min-width: 768px) {
  .hero { display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); background: none; }
  .hero__text { background: var(--c-ivory); padding: var(--space-section-lg) 3.5rem var(--space-section-lg) var(--edge); }
  .hero__media { align-items: center; justify-content: flex-start; padding: var(--space-section-lg) var(--edge) var(--space-section-lg) 0; background: var(--c-onyx); }
  .hero__img { width: calc(100% + 2.5rem); max-width: none; margin-left: -2.5rem; }
}
@media (min-width: 1200px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero__text { padding-right: 6.5rem; }
  .hero__img { width: 28rem; margin-left: -5.5rem; }
}

/* ---------- About ---------- */
.about { display: grid; gap: 2rem; }
.about__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 768px) {
  .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: center; }
  .about--reverse .about__media { order: 2; }
}

/* ---------- Dịch vụ: 3 card lông mày + Other Services ---------- */
.services-teaser { background: var(--c-ivory); }
.services-teaser__intro { padding: var(--space-section) var(--gutter) 2rem; }
.services-teaser__cards { padding: 0 var(--gutter) var(--space-section); background: linear-gradient(180deg, var(--c-ivory) 35%, var(--c-nude) 35%); }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 600px) { .card-grid { gap: 1rem; } }
@media (min-width: 1200px) {
  .services-teaser { display: grid; grid-template-columns: minmax(0, 57fr) minmax(0, 43fr); background: none; }
  .services-teaser__intro { display: flex; flex-direction: column; justify-content: center; padding: var(--space-section) 15rem var(--space-section) var(--edge); background: var(--c-ivory); }
  .services-teaser__cards { display: flex; align-items: center; padding: var(--space-section) var(--edge) var(--space-section) 0; background: var(--c-nude); }
  .services-teaser__cards .card-grid { width: calc(100% + 12rem); margin-left: -12rem; gap: 1.25rem; }
}

.img-card {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden; isolation: isolate;
  background: var(--c-onyx); color: var(--c-ivory); text-decoration: none;
}
.img-card img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.img-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(17, 17, 17, 0) 30%, rgba(17, 17, 17, .78) 100%); }
.img-card__body { position: absolute; inset: auto 0 0; padding: .8rem .6rem .9rem; text-align: center; }
.img-card__title { display: block; font: 500 .78rem / 1.25 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--c-ivory); }
.img-card__sub { display: block; margin-top: .3rem; font-size: .7rem; line-height: 1.35; color: var(--c-mist); }
.img-card__more { display: inline-flex; align-items: center; gap: .3rem; margin-top: .45rem; font-size: .7rem; letter-spacing: .06em; color: var(--c-gold-light); }
.img-card__more .icon { width: .9rem; height: .9rem; }
@media (min-width: 600px) {
  .img-card__body { padding: 1rem .9rem 1.1rem; }
  .img-card__title { font-size: .95rem; }
  .img-card__sub, .img-card__more { font-size: .8rem; }
}
@media (hover: hover) {
  .img-card__more { opacity: 0; transform: translateY(.35rem); transition: opacity var(--dur) ease, transform var(--dur) ease; }
  .img-card:hover img { transform: scale(1.05); }
  .img-card:hover .img-card__more, .img-card:focus-visible .img-card__more { opacity: 1; transform: none; }
}

/* ---------- Quy trình 3 bước ---------- */
.steps { display: grid; gap: 1.75rem; margin-top: 2.25rem; }
.step { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.step__img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.step__num { display: block; font: 300 2.2rem / 1 var(--font-display); color: var(--c-gold); }
.step__title { margin: .3rem 0 .35rem; font: 500 1.05rem / 1.3 var(--font-body); letter-spacing: .02em; color: var(--c-ink); }
.step__text { font-size: .95rem; }
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
  .step { grid-template-columns: minmax(0, 1fr); }
  .step__img { aspect-ratio: 4 / 5; }
}

/* ---------- Instagram & Facebook ---------- */
.social-tabs { margin-top: 1.75rem; }
.tabs { display: flex; justify-content: center; }
.tab {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .6rem 1.25rem;
  border: 1px solid var(--c-line); background: transparent; color: var(--c-stone); cursor: pointer;
  font: 500 var(--fs-label) / 1 var(--font-body); letter-spacing: var(--ls-label); text-transform: uppercase;
}
.tab + .tab { border-left: 0; }
.tab[aria-selected="true"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-ivory); }
.tab-panel { margin-top: 1.75rem; }
.tab-panel[hidden] { display: none; }

/* Slide có chấm, tự trượt. Dải slide cuộn ngang nên vuốt dọc trên điện thoại vẫn cuộn trang bình thường. */
.carousel { position: relative; margin-top: 1.5rem; }
.carousel__track {
  display: flex; gap: 1rem; margin: 0; padding: 0 0 .25rem;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { flex: 0 0 100%; min-width: 0; display: flex; justify-content: center; align-items: flex-start; scroll-snap-align: start; }
.carousel__controls { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1.25rem; }
.carousel__dots { display: flex; flex-wrap: wrap; justify-content: center; }
.carousel__dot { position: relative; width: 1.6rem; height: 2rem; padding: 0; border: 0; background: none; cursor: pointer; }
.carousel__dot::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: .55rem; height: .55rem; margin: -.275rem 0 0 -.275rem;
  border: 1px solid var(--c-gold-deep); border-radius: 50%; background: transparent;
  transition: background-color var(--dur) ease, transform var(--dur) ease;
}
.carousel__dot[aria-current="true"]::before { background: var(--c-gold-deep); transform: scale(1.3); }
.carousel__arrow {
  display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none;
  border: 1px solid var(--c-line); background: transparent; color: var(--c-ink); cursor: pointer;
}
.carousel__arrow:hover { border-color: var(--c-ink); }
.carousel__arrow .icon { width: 1.1rem; height: 1.1rem; }
.icon-flip { transform: scaleX(-1); }
.carousel--single .carousel__controls { display: none; }
@media (min-width: 820px) { .carousel--embeds .carousel__slide { flex-basis: calc((100% - 1rem) / 2); } }
@media (min-width: 1400px) { .carousel--embeds .carousel__slide { flex-basis: calc((100% - 2rem) / 3); } }
.carousel--embeds .instagram-media { margin: 0 auto !important; }
.carousel--embeds .fb-post, .carousel--embeds .fb-video { max-width: 100%; }
.social-link { margin-top: 1rem; text-align: center; }

.embed-fallback {
  display: grid; place-content: center; justify-items: center; gap: .6rem; width: min(100%, 22rem); aspect-ratio: 4 / 5;
  padding: 1.5rem; background: var(--c-porcelain); border: 1px solid var(--c-line);
  color: var(--c-ink); text-align: center; text-decoration: none; font-size: .9rem;
}
.embed-fallback .icon { width: 2rem; height: 2rem; color: var(--c-gold-deep); }
.embed-fallback__handle { font-size: var(--fs-small); color: var(--c-stone); }

/* ---------- Review ---------- */
.reviews { display: grid; }
.reviews__text { padding: var(--space-section) var(--gutter) 2.5rem; background: var(--c-ivory); }
.highlights { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
.highlight { padding-top: 1rem; border-top: 1px solid var(--c-gold); }
.highlight h3 { margin-bottom: .35rem; font: 500 1rem / 1.4 var(--font-body); letter-spacing: .01em; }
.highlight p { font-size: .95rem; }
.reviews__panel { display: grid; gap: 1rem; align-content: center; padding: 2.5rem var(--gutter) var(--space-section); background: var(--c-onyx); color: var(--c-mist); }
.platform-card { padding: 1.5rem; border: 1px solid rgba(196, 160, 104, .35); }
.platform-card__name { margin: 0; font: 300 1.9rem / 1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ivory); }
.platform-card__rating { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .9rem 0 .4rem; }
.platform-card__score { font: 300 2.4rem / 1 var(--font-display); color: var(--c-ivory); }
.platform-card__meta { font-size: var(--fs-small); color: var(--c-mist); margin: 0; }
.platform-card__meta--solo { margin-top: .75rem; }
.platform-card .btn-row { margin-top: 1.25rem; }

.google-reviews { margin-top: 1rem; }
.google-reviews[hidden] { display: none; }
.google-reviews .carousel { margin-top: .75rem; }
.google-reviews .carousel__dot::before { border-color: var(--c-gold-light); }
.google-reviews .carousel__dot[aria-current="true"]::before { background: var(--c-gold-light); }
.google-reviews .carousel__arrow { border-color: rgba(196, 160, 104, .45); color: var(--c-ivory); }
.google-reviews__credit { margin: .5rem 0 0; font-size: .75rem; color: var(--c-mist); text-align: center; }
.review-card { width: 100%; padding: 1.25rem 1.25rem 1.1rem; background: var(--c-ivory); color: var(--c-stone); }
.review-card__stars { display: flex; gap: .1rem; margin: 0 0 .6rem; color: var(--c-gold); }
.review-card__stars .icon { width: 1rem; height: 1rem; }
.review-card__text {
  margin: 0 0 .75rem; font-size: .95rem; line-height: 1.65; color: var(--c-espresso);
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
}
.review-card__meta { margin: 0; font-size: var(--fs-small); }
.review-card__meta strong, .review-card__meta a { font-weight: 600; color: var(--c-ink); }
@media (min-width: 768px) { .highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } }
@media (min-width: 1200px) {
  .reviews { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
  .reviews__text { padding: var(--space-section) var(--gap) var(--space-section) var(--edge); }
  .reviews__panel { padding: var(--space-section) var(--edge) var(--space-section) var(--gap); }
  .highlights { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; max-width: 34rem; }
}
.yelp-embeds { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 900px) { .yelp-embeds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 52rem; }
.faq-list { margin-top: 2rem; border-top: 1px solid var(--c-line); }
.faq-item { border-bottom: 1px solid var(--c-line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0;
  list-style: none; cursor: pointer; font: 500 1.02rem / 1.45 var(--font-body); color: var(--c-ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: .6rem; height: .6rem; margin-right: .3rem;
  border-right: 1.5px solid var(--c-gold-deep); border-bottom: 1.5px solid var(--c-gold-deep);
  transform: rotate(45deg); transition: transform var(--dur) ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item__answer { max-width: 68ch; padding-bottom: 1.25rem; }

/* ---------- CTA đặt hẹn ---------- */
.cta-band { padding-block: var(--space-section); background: var(--c-onyx); color: var(--c-mist); border-top: 2px solid var(--c-gold); }
.cta-band .eyebrow { color: var(--c-gold-light); }
.cta-band .title-duo { color: var(--c-ivory); }
.cta-band__note { font-size: var(--fs-small); }
.cta-band .btn-row { justify-content: center; }

/* ---------- Địa chỉ, giờ, bản đồ ---------- */
.visit { display: grid; gap: 2.5rem; }
.info-list { display: grid; gap: 1rem; margin-top: 1.5rem; }
.info-list > li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .75rem; align-items: start; }
.info-list > li > .icon { width: 1.25rem; height: 1.25rem; margin-top: .2rem; color: var(--c-gold-deep); }
.info-list a { color: var(--c-ink); }
.hours { display: grid; gap: .2rem; }
.hours li { display: flex; flex-wrap: wrap; gap: 0 .75rem; }
.hours__note { font-size: var(--fs-small); }
.map-embed { position: relative; aspect-ratio: 4 / 3; background: var(--c-ivory); border: 1px solid var(--c-line); }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-embed__load {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .6rem;
  border: 0; background: repeating-linear-gradient(45deg, var(--c-ivory) 0 12px, #F2EEE7 12px 24px);
  font: 500 var(--fs-label) / 1 var(--font-body); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-ink); cursor: pointer;
}
.map-embed__load .icon { width: 1.4rem; height: 1.4rem; color: var(--c-gold-deep); }
@media (min-width: 768px) { .visit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: center; } }

/* ---------- Hero trang con ---------- */
.page-hero { display: grid; }
.page-hero__text { padding: 1.75rem var(--gutter) 2.25rem; background: var(--c-ivory); }
.page-hero__media { display: flex; justify-content: center; padding: 0 var(--gutter) 2rem; background: linear-gradient(180deg, var(--c-ivory) 40%, var(--c-onyx) 40%); }
.page-hero__media img { width: min(72%, 20rem); aspect-ratio: 4 / 5; object-fit: cover; }
.page-hero__stamp { display: grid; place-items: center; padding: 1.75rem var(--gutter); background: var(--c-onyx); }
.page-hero__logo { width: min(55%, 15rem); height: auto; }
.breadcrumbs { margin-bottom: 1.25rem; font-size: .8rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; }
.breadcrumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--c-gold); }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-ink); }
.price-tag {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin-top: 1rem;
  font: 500 var(--fs-label) / 1.4 var(--font-body); letter-spacing: var(--ls-label); text-transform: uppercase;
}
.price-tag strong { font: 400 1.7rem / 1 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--c-ink); }
.price-tag--options { gap: .5rem 1.5rem; }
.price-tag--options strong { font-size: 1.4rem; margin-left: .3rem; }
@media (min-width: 768px) {
  .page-hero { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
  .page-hero__text { display: flex; flex-direction: column; justify-content: center; padding: var(--space-section-lg) 3.5rem var(--space-section-lg) var(--edge); }
  .page-hero__media { align-items: center; justify-content: flex-start; padding: var(--space-section-lg) var(--edge) var(--space-section-lg) 0; background: var(--c-onyx); }
  .page-hero__media img { width: calc(100% + 3rem); max-width: 26rem; margin-left: -3rem; }
  .page-hero__stamp { padding: var(--space-section-lg) var(--edge) var(--space-section-lg) var(--gap); }
}

/* ---------- Bảng giá (Services) ---------- */
.price-rows { display: grid; gap: var(--space-section); }
.price-row { display: grid; gap: 1.75rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.price-row__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.price-category {
  margin: 0 0 1.5rem; padding: .9rem 1rem; border: 1px solid var(--c-line); text-align: center;
  font: 400 1.5rem / 1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
}
.price-list { display: grid; gap: 1.5rem; }
.price-item { display: grid; grid-template-columns: auto minmax(1rem, 1fr) auto; column-gap: .75rem; align-items: baseline; }
.price-item__name { font: 500 1.05rem / 1.4 var(--font-body); color: var(--c-ink); text-decoration: none; }
a.price-item__name:hover { color: var(--c-gold-deep); }
.price-item__leader { border-bottom: 1px dotted var(--c-gold); transform: translateY(-.35em); }
.price-item__price { max-width: 11rem; text-align: right; font: 500 1.05rem / 1.4 var(--font-body); color: var(--c-gold-deep); font-variant-numeric: tabular-nums; }
.price-item__desc { grid-column: 1 / -1; margin: .3rem 0 0; font-size: .93rem; line-height: 1.65; }
.price-item__options { grid-column: 1 / -1; display: grid; gap: .4rem; margin-top: .6rem; }
.price-item__options li { display: grid; grid-template-columns: auto minmax(1rem, 1fr) auto; column-gap: .75rem; align-items: baseline; font-size: .95rem; }
.price-item__options .price-item__price { font-size: .95rem; }
.price-note { margin-top: 1.5rem; font-size: var(--fs-small); }
@media (min-width: 768px) {
  .price-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--gap); align-items: start; }
  .price-row__media img { aspect-ratio: 3 / 4; }
}

/* ---------- Trang dịch vụ ---------- */
.detail-grid { display: grid; gap: 2.5rem; }
.detail-grid p { max-width: 62ch; }
.side-card { padding: 1.75rem; background: var(--c-ivory); border-top: 2px solid var(--c-gold); }
.side-card__title { font: 500 var(--fs-label) / 1.4 var(--font-body); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-gold-deep); }
.side-card__link { margin-top: 1.25rem; }
.checks { display: grid; gap: .8rem; margin-top: 1rem; }
.checks li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .6rem; color: var(--c-ink); }
.checks .icon { width: 1.2rem; height: 1.2rem; margin-top: .2rem; color: var(--c-gold-deep); }
@media (min-width: 768px) { .detail-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--gap); align-items: start; } }

.timeline { display: grid; margin-top: 2rem; border-left: 1px solid var(--c-gold); }
.timeline li { position: relative; padding: 0 0 1.5rem 1.5rem; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: .4rem; width: 9px; height: 9px; background: var(--c-gold); }
.timeline__when { display: block; font: 500 var(--fs-label) / 1.4 var(--font-body); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-gold-deep); }
.timeline__what { margin: .3rem 0 0; }
@media (min-width: 900px) {
  .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 0; border-top: 1px solid var(--c-gold); }
  .timeline li { padding: 1.5rem 1.5rem 0 0; }
  .timeline li::before { left: 0; top: -5px; }
}

.related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 2rem; }
@media (min-width: 768px) { .related { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1200px) { .related { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------- Trang nội dung (Aftercare, Policies, Privacy) ---------- */
.prose { max-width: 46rem; }
.prose h2 { margin: 2.75rem 0 1rem; font: 400 1.9rem / 1.2 var(--font-display); }
.prose > h2:first-child, .prose > p:first-child + h2 { margin-top: 0; }
.prose h3 { margin: 1.75rem 0 .6rem; font: 500 1.05rem / 1.4 var(--font-body); }
.prose ul, .care-card ul { display: grid; gap: .6rem; margin-bottom: 1.25rem; }
.prose ul li, .care-card li { position: relative; padding-left: 1.25rem; }
.prose ul li::before, .care-card li::before { content: ""; position: absolute; left: 0; top: .8em; width: .5rem; height: 1px; background: var(--c-gold-deep); }
.care-grid { display: grid; gap: 1rem; margin: 1.25rem 0 2.75rem; }
.care-card { padding: 1.5rem; background: var(--c-ivory); border-top: 2px solid var(--c-gold); }
.care-card h3 { margin-bottom: 1rem; font: 400 1.6rem / 1.2 var(--font-display); text-transform: uppercase; letter-spacing: .06em; }
@media (min-width: 900px) { .care-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.callout { margin-top: 2rem; padding: 1.25rem 1.5rem; background: var(--c-nude); color: var(--c-espresso); font-size: .95rem; }
.callout a { color: var(--c-ink); }

.facts { display: grid; margin-top: 2rem; border-top: 1px solid var(--c-line); }
.facts div { display: grid; gap: .2rem; padding: .9rem 0; border-bottom: 1px solid var(--c-line); }
.facts dt { font: 500 var(--fs-label) / 1.4 var(--font-body); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-gold-deep); }
.facts dd { margin: 0; color: var(--c-ink); }
@media (min-width: 768px) { .facts div { grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem; } }

.not-found { padding-block: calc(var(--space-section) * 1.5); }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-onyx); color: var(--c-mist); font-size: .95rem; }
.site-footer__grid { display: grid; gap: 2.5rem; padding-block: 3.5rem; }
.site-footer__logo { width: 13rem; height: auto; margin-bottom: 1.25rem; }
.site-footer a { color: var(--c-ivory); text-decoration: none; }
.site-footer a:hover { color: var(--c-gold-light); }
.site-footer .eyebrow { color: var(--c-gold-light); }
.site-footer strong { color: var(--c-ivory); }
.site-footer address { margin-bottom: .75rem; color: var(--c-ivory); line-height: 1.7; }
.site-footer__formerly { font-size: var(--fs-small); font-style: italic; }
.site-footer__phone { font-size: 1.15rem; }
.site-footer__directions { display: inline-flex; align-items: center; gap: .45rem; margin-top: .75rem; }
.site-footer .hours { margin-top: .75rem; }
.social-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.social-links a { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.5rem; padding: .45rem .85rem; border: 1px solid rgba(196, 160, 104, .45); font-size: .8rem; letter-spacing: .06em; }
.social-links .icon { color: var(--c-gold-light); }
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1rem; }
.copyright { padding-block: 1.25rem; background: var(--c-nude); color: var(--c-ink); font-size: var(--fs-small); text-align: center; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--gap); padding-block: 4.5rem; } }

/* ---------- Thanh hành động dưới màn hình (điện thoại, tablet) ---------- */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr 1.35fr;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--c-onyx); border-top: 1px solid rgba(196, 160, 104, .35);
}
.action-bar__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  font: 500 .68rem / 1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-ivory); text-decoration: none;
}
.action-bar__btn .icon { width: 1.3rem; height: 1.3rem; color: var(--c-gold-light); }
.action-bar__btn + .action-bar__btn { border-left: 1px solid rgba(185, 178, 167, .15); }
.action-bar__btn--primary { background: var(--c-gold-light); color: var(--c-ink); }
.action-bar__btn--primary .icon { color: var(--c-ink); }

@media (min-width: 1200px) {
  body { padding-bottom: 0; }
  .action-bar { display: none; }
}