/* ============================================================
   DIVA Skin Clinic Poipet — Global Stylesheet
   Fonts: Cormorant Garamond (display) + DM Sans (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ── Tokens ── */
:root {
  --ink:        #1C1208;
  --gold:       #C8A96E;
  --gold-light: #DFC28F;
  --cream:      #F4F4F2;
  --warm-white: #FFFFFF;
  --border:     #E9E9E6;
  --text-muted: #7A6E60;
  --text-light: #A09585;
  --wa-green:   #25D366;
  --tg-blue:    #229ED9;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --radius:    10px;
  --radius-sm: 6px;
  --container: 900px;
  --gap:       24px;
}

/* ── Base ── */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--warm-white);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography ── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.2;
}
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1rem, 2vw, 1.25rem); }
h4 { font-size: 1rem; }
p  { line-height: 1.7; }

.label {
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #8A6A38;
  font-family: var(--font-body);
  font-weight: 600;
}
.section-dark .label,
.page-hero .label { color: var(--gold-light); }

/* ── Layout ── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}
.section { padding: 64px 0; }
.section-sm { padding: 40px 0; }

/* ── Grids ── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

@media (max-width: 980px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Split (2-column) layouts — replaces non-responsive inline grids ── */
.split, .split-center, .split-48, .split-tight, .split-sm {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.split        { gap: 40px; align-items: start; }
.split-center { gap: 40px; align-items: center; }
.split-48     { gap: 48px; align-items: start; }
.split-tight  { gap: 12px; max-width: 500px; margin: 0 auto 28px; }
.split-sm     { gap: 16px; margin: 24px 0; }

@media (max-width: 720px) {
  .split, .split-center, .split-48 { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 600px) {
  .split-tight { grid-template-columns: 1fr; gap: 8px; }
  .split-sm    { grid-template-columns: 1fr; gap: 10px; }
}

/* ── Photo treatment card — white card, clear frame, black text, accent badge ── */
.treat-card {
  display: block;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(28,18,8,.06);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.treat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(28,18,8,.16);
  border-color: var(--gold);
}
.treat-card-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--cream); }
.treat-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.treat-card:hover .treat-card-media img { transform: scale(1.08); }
.treat-card-badge {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  padding: 5px 13px;
  border-radius: 20px;
  box-shadow: 0 6px 16px rgba(200,169,110,.45);
  transition: transform .3s ease;
}
.treat-card:hover .treat-card-badge { transform: scale(1.08); }
.treat-card-body { padding: 18px; }
.treat-card-body .label { display: block; margin-bottom: 6px; }
.treat-card-body h3 {
  color: var(--ink);
  font-size: 1.05rem;
  margin-bottom: 8px;
  position: relative;
  display: inline-block;
}
.treat-card-body h3::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 28px; height: 2px;
  background: var(--gold);
  transition: width .3s ease;
}
.treat-card:hover .treat-card-body h3::after { width: 100%; }
.treat-card-body p { color: var(--text-muted); font-size: .82rem; line-height: 1.55; }

/* ── Card ── */
.card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 1px 3px rgba(28,18,8,.05), 0 6px 18px rgba(28,18,8,.04);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.card:hover { box-shadow: 0 10px 28px rgba(28,18,8,.12); transform: translateY(-3px); border-color: var(--gold); }

/* ── Price / promo box (dark, used on service pages) ── */
.price-box {
  background: var(--ink);
  border-radius: var(--radius);
  padding: 22px 24px;
  border-left: 3px solid var(--gold);
  box-shadow: 0 10px 30px rgba(28,18,8,.18);
  position: relative;
  overflow: hidden;
}
.price-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(200,169,110,.14) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Blog card ── */
.blog-card { padding: 0; overflow: hidden; }
.blog-thumb {
  height: 200px;
  overflow: hidden;
  background: var(--cream);
}
.blog-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.blog-card:hover .blog-thumb img { transform: scale(1.04); }
.blog-card-body { padding: 20px; }

/* Structured long-form guide blocks used for SEO pages.
   These keep deep content readable instead of turning pages into plain documents. */
.diva-expanded-guide {
  background: linear-gradient(180deg, #fff 0%, #F8F4EC 100%);
  border-top: 1px solid rgba(28,18,8,.08);
}
.diva-expanded-guide .guide-shell {
  display: grid;
  gap: 22px;
}
.diva-guide-kicker {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8A6A38;
  font-weight: 700;
}
.diva-guide-kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}
.diva-guide-intro {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: clamp(22px, 4vw, 34px);
  box-shadow: 0 14px 36px rgba(28,18,8,.06);
}
.diva-guide-intro h2 {
  margin: 10px 0 14px;
}
.diva-guide-intro p {
  color: var(--text-muted);
  max-width: 780px;
}
.diva-guide-toc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.diva-guide-toc a {
  text-decoration: none;
  background: #fff;
  border: 1px solid rgba(28,18,8,.10);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--ink);
  font-size: .84rem;
  line-height: 1.35;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.diva-guide-toc a:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(28,18,8,.08);
}
.diva-guide-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: clamp(22px, 4vw, 34px);
  box-shadow: 0 8px 22px rgba(28,18,8,.04);
}
.diva-guide-panel h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.72rem);
  margin-bottom: 12px;
}
.diva-guide-panel p {
  color: var(--text-muted);
  margin-top: 12px;
}
.diva-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.diva-guide-mini {
  border: 1px solid rgba(28,18,8,.10);
  border-radius: 8px;
  padding: 18px;
  background: linear-gradient(180deg, #fff, #FBF8F3);
}
.diva-guide-mini strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
}
.diva-guide-mini ul,
.diva-guide-panel ul {
  list-style: none;
  display: grid;
  gap: 9px;
  margin-top: 12px;
}
.diva-guide-mini li,
.diva-guide-panel li {
  color: var(--text-muted);
  font-size: .9rem;
  line-height: 1.55;
  padding-left: 18px;
  position: relative;
}
.diva-guide-mini li::before,
.diva-guide-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--gold);
}
.diva-guide-note {
  margin-top: 18px;
  border-left: 3px solid var(--gold);
  background: #F7F1E8;
  border-radius: 0 8px 8px 0;
  padding: 16px 18px;
  color: var(--text-muted);
}
.diva-guide-steps {
  counter-reset: guide-step;
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.diva-guide-step {
  counter-increment: guide-step;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  background: #FBF8F3;
  border: 1px solid rgba(28,18,8,.08);
  border-radius: 8px;
  padding: 16px;
}
.diva-guide-step::before {
  content: counter(guide-step, decimal-leading-zero);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--gold-light);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 1.1rem;
}
.diva-guide-faq {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.diva-guide-faq details {
  border: 1px solid rgba(28,18,8,.10);
  border-radius: 8px;
  padding: 14px 16px;
  background: #fff;
}
.diva-guide-faq summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 600;
}
.diva-guide-final {
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
  padding: clamp(24px, 4vw, 38px);
  display: grid;
  gap: 16px;
}
.diva-guide-final p {
  color: #CFC5B6;
}
.landing-framework {
  background: linear-gradient(180deg, #fff, #F8F4EC);
}
.landing-framework .framework-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: clamp(20px, 4vw, 32px);
  box-shadow: 0 10px 28px rgba(28,18,8,.05);
}
.landing-framework .framework-placeholder {
  border: 1px dashed rgba(200,169,110,.65);
  border-radius: 8px;
  padding: 18px;
  background: #FCF8F1;
  color: var(--text-muted);
}
@media (max-width: 720px) {
  .diva-guide-grid {
    grid-template-columns: 1fr;
  }
  .diva-guide-step {
    grid-template-columns: 1fr;
  }
  .diva-guide-step::before {
    width: 38px;
    height: 38px;
  }
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: .85rem;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: opacity .18s, transform .18s;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
  z-index: 1;
}
.btn:hover::before { left: 130%; }
.btn:hover { opacity: .95; transform: translateY(-2px); }
.btn-wa  { background: var(--wa-green); color: #fff; box-shadow: 0 6px 18px rgba(37,211,102,.32); }
.btn-wa:hover  { box-shadow: 0 10px 24px rgba(37,211,102,.42); }
.btn-tg  { background: var(--tg-blue);  color: #fff; box-shadow: 0 6px 18px rgba(34,158,217,.32); }
.btn-tg:hover  { box-shadow: 0 10px 24px rgba(34,158,217,.42); }
.btn-gold { background: var(--gold); color: var(--ink); box-shadow: 0 6px 18px rgba(200,169,110,.35); }
.btn-gold:hover { box-shadow: 0 10px 24px rgba(200,169,110,.45); }
.btn-outline { background: transparent; border: 1px solid var(--gold); color: var(--gold); }
.btn-outline:hover { background: rgba(200,169,110,.08); }
.btn-dark { background: var(--ink); color: #fff; box-shadow: 0 6px 18px rgba(28,18,8,.28); }
.btn-sm { padding: 8px 16px; font-size: .78rem; }

/* ── Top bar ── */
.topbar {
  background: var(--ink);
  color: #9CA3AF;
  font-size: .72rem;
  text-align: center;
  padding: 8px 20px;
  letter-spacing: .05em;
}
.topbar a { color: var(--gold); text-decoration: none; }

/* ── Nav ── */
.nav {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.nav-logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(28,18,8,.18);
  flex-shrink: 0;
}
.nav-logo-text {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
}
.nav-logo-text span { display: block; font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); font-family: var(--font-body); margin-top: 1px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  font-size: .78rem;
  padding: 6px 10px;
  border-radius: 4px;
  text-decoration: none;
  color: var(--text-muted);
  transition: color .15s;
  white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links .nav-wa {
  background: var(--wa-green);
  color: #fff;
  padding: 7px 14px;
  border-radius: 6px;
  margin-left: 6px;
}
.nav-links .nav-wa:hover { opacity: .88; color: #fff; }

/* ── Header search ── */
.nav-search { display: flex; align-items: center; position: relative; }
.nav-search-toggle {
  background: none; border: none; cursor: pointer; padding: 6px;
  color: var(--text-muted); display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.nav-search-toggle:hover { color: var(--ink); }
.nav-search-input {
  width: 0; opacity: 0; padding: 0; border: none;
  font-size: .82rem; font-family: var(--font-body);
  transition: width .2s ease, opacity .2s ease, padding .2s ease;
  border-radius: 999px; background: var(--warm-white); color: var(--ink);
}
.nav-search-input.open {
  width: 200px; opacity: 1; padding: 7px 14px; border: 1px solid var(--border);
  margin-left: 6px;
}
.nav-search-input:focus { outline: none; border-color: var(--gold); }
@media (max-width: 720px) {
  .nav-search { width: 100%; order: 99; margin-top: 8px; }
  .nav-search-input, .nav-search-input.open { width: 100%; opacity: 1; padding: 9px 14px; border: 1px solid var(--border); margin-left: 0; }
  .nav-search-toggle { display: none; }
}

/* Visible breadcrumb — mirrors the BreadcrumbList JSON-LD (Home -> current page) */
.breadcrumb {
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px 20px;
  font-size: .78rem;
  color: var(--text-muted);
  background: var(--warm-white);
  border-bottom: 1px solid var(--border);
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold); text-decoration: underline; }
.breadcrumb .breadcrumb-sep { margin: 0 6px; color: var(--border); }
.breadcrumb .breadcrumb-current { color: var(--ink); }

/* Mobile nav */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; transition: .2s; }

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 60px; left: 0; right: 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 20px 20px;
    border-bottom: 1px solid var(--border);
    gap: 2px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .nav-links a:last-child { border-bottom: none; }
  .nav-links .nav-wa { text-align: center; margin-left: 0; margin-top: 8px; }
}

/* ── Page hero ── */
.page-hero {
  background: var(--ink);
  color: #fff;
  padding: 64px 0 56px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 78% 30%, rgba(200,169,110,.10) 0%, transparent 60%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .label { margin-bottom: 12px; }
.page-hero h1 { color: #fff; margin-bottom: 16px; }
.page-hero p { color: #9CA3AF; max-width: 520px; }

/* ── Filter tabs ── */
.filter-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}
@media (max-width: 600px) {
  .filter-wrap {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .filter-wrap::-webkit-scrollbar { display: none; }
}
.filter-btn {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: .72rem;
  letter-spacing: .08em;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  font-family: var(--font-body);
}
.filter-btn:hover, .filter-btn.active {
  background: var(--gold);
  color: var(--ink);
}

/* ── Price table ── */
.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: color .15s;
}
.price-row:last-child { border-bottom: none; }
.price-row:hover .price-name { color: var(--gold); }
.price-name { font-size: .9rem; flex: 1; }
.price-tag {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--gold);
  font-weight: 500;
  white-space: nowrap;
}

/* ── Video cards ── */
.video-grid {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.tiktok-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.video-card {
  flex: 0 0 auto;
  width: 160px;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  position: relative;
}
.video-thumb {
  width: 160px;
  height: 285px;
  position: relative;
  background: var(--ink);
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(28,18,8,.18);
}
.video-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .72;
  transition: opacity .25s;
}
.video-card:hover .video-thumb img { opacity: .85; }
.video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  width: 44px; height: 44px;
  background: rgba(200,169,110,.92);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.video-title {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(28,18,8,.92));
  padding: 28px 10px 10px;
  color: #fff;
  font-size: .7rem;
  line-height: 1.35;
  font-weight: 500;
}

/* ── Video modal (inline player, no redirect to YouTube) ── */
.video-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(12,8,4,.88);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.video-modal.open { display: flex; }
.video-modal-inner {
  width: 100%;
  max-width: 860px;
  position: relative;
}
.video-modal.video-modal-tall .video-modal-inner { max-width: 380px; }
.video-modal-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.video-modal.video-modal-tall .video-modal-frame { aspect-ratio: 9/16; }
.video-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-modal-close {
  position: absolute;
  top: -42px; right: 0;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  width: 34px; height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  transition: background .2s;
}
.video-modal-close:hover { background: rgba(255,255,255,.25); }

/* ── Testimonials ── */
.avatar-circle {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.stars { color: #E8B04B; font-size: .8rem; letter-spacing: 2px; }

/* ── Section divider ── */
.divider {
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 20px;
  animation: draw-line .8s ease forwards;
  transform-origin: left;
}
@keyframes draw-line {
  from { width: 0; }
  to   { width: 40px; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Sticky contact ── */
.sticky-contact {
  position: fixed;
  bottom: 24px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 200;
}
.sticky-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(0,0,0,.25);
  transition: transform .18s;
  position: relative;
}
.sticky-btn:hover { transform: scale(1.1); }
.sticky-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: .55;
  animation: pulse-ring 2.2s ease-out infinite;
}
.sticky-wa { background: var(--wa-green); color: var(--wa-green); }
.sticky-tg { background: var(--tg-blue); color: var(--tg-blue); }
.sticky-loc { background: var(--gold); color: var(--gold); }

@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: .55; }
  80%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ── Footer ── */
.footer {
  background: var(--ink);
  color: #9CA3AF;
  padding: 56px 0 28px;
  font-size: .82rem;
  border-top: 1px solid rgba(200,169,110,.15);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 32px; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}
.footer-logo {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: #fff;
  margin-bottom: 10px;
  display: block;
  text-decoration: none;
}
.footer-logo:hover { color: var(--gold-light); }
.footer-tagline { color: var(--gold); font-size: .8rem; margin-bottom: 10px; line-height: 1.5; }
.footer-desc { line-height: 1.7; margin-bottom: 14px; }
.footer-location { color: #9CA3AF; font-size: .78rem; line-height: 1.6; margin-bottom: 4px; }
.footer h4 { color: var(--gold); font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 14px; font-family: var(--font-body); font-weight: 500; }
.footer nav { display: block; }
.footer a { color: #9CA3AF; text-decoration: none; display: block; margin-bottom: 9px; transition: color .15s; }
.footer a:hover, .footer a:focus-visible { color: var(--gold); }
.footer a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.footer-contact-list a { line-height: 1.35; }
.footer-contact-list a span { display: block; font-size: .74rem; color: #7d8590; }
.footer-contact-list a:hover span { color: var(--gold-light); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 22px;
  font-size: .72rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
}
.footer-bottom a { display: inline; margin-bottom: 0; color: var(--gold-light); }
.footer-legal-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-legal-links a { display: inline; margin-bottom: 0; }
.footer-disclaimer { font-size: .68rem; color: #7d8590; line-height: 1.6; margin-top: 16px; max-width: 900px; }

/* ── Utilities ── */
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.gold { color: var(--gold); }

/* ── Chip tags ── */
.chip {
  display: inline-block;
  background: rgba(200,169,110,.12);
  border: 1px solid rgba(200,169,110,.3);
  color: var(--gold);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .68rem;
  letter-spacing: .05em;
}

/* ── CTA section ── */
.cta-section {
  background: var(--cream);
  padding: 64px 0;
  text-align: center;
}
.cta-section .container {
  background: var(--warm-white);
  border-radius: 16px;
  padding: 48px 32px;
  box-shadow: 0 14px 40px rgba(28,18,8,.08);
  border: 1px solid var(--border);
}
.cta-section h2 { margin-bottom: 14px; }
.cta-section p { color: var(--text-muted); margin-bottom: 28px; max-width: 480px; margin-left: auto; margin-right: auto; }
.cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Referrer fix for ibb.co images ── */
img[src*="ibb.co"] { /* handled via referrerpolicy attr */ }

/* ============================================================
   Blog reading experience
   Polishes long SEO articles without hiding or shortening text.
   ============================================================ */
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(260px, .95fr);
  gap: 40px;
}
.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.blog-meta-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border: 1px solid rgba(223,194,143,.34);
  border-radius: 999px;
  background: rgba(223,194,143,.10);
  color: var(--gold-light);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.blog-layout {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
.blog-toc {
  position: sticky;
  top: 82px;
  align-self: start;
  background: #fff;
  border: 1px solid rgba(200,169,110,.30);
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 10px 34px rgba(28,18,8,.07);
}
.blog-toc-title {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 12px;
}
.blog-toc ul {
  list-style: none;
  display: grid;
  gap: 8px;
}
.blog-toc li {
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.45;
}
.blog-toc a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color .18s;
}
.blog-toc a:hover { color: var(--ink); }
.blog-content {
  min-width: 0;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(200,169,110,.38), rgba(28,18,8,.08)) border-box;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 38px 42px;
  box-shadow: 0 18px 50px rgba(28,18,8,.08);
}
.blog-content > *:first-child { margin-top: 0; }
.blog-content > *:last-child { margin-bottom: 0; }
.blog-content p,
.blog-content li {
  font-size: .96rem;
  line-height: 1.86;
  color: #342719;
}
.blog-content p { margin: 0 0 18px; }
.blog-content h2 {
  color: var(--ink);
  margin: 44px 0 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(200,169,110,.32);
  font-size: clamp(1.42rem, 2.6vw, 2rem);
  letter-spacing: 0;
}
.blog-content h2:first-child,
.blog-content h3:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.blog-content h3 {
  margin: 26px 0 10px;
  padding: 12px 14px;
  border-left: 3px solid var(--gold);
  background: linear-gradient(90deg, rgba(200,169,110,.13), rgba(200,169,110,0));
  border-radius: 0 6px 6px 0;
  color: #24180d;
  font-family: var(--font-body);
  font-size: .94rem;
  line-height: 1.55;
  font-weight: 600;
}
.blog-content strong {
  color: var(--ink);
  font-weight: 700;
}
.blog-content a {
  color: #9B743A;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.blog-content ul,
.blog-content ol {
  margin: 16px 0 24px;
  padding-left: 22px;
}
.blog-content li + li { margin-top: 8px; }
.blog-content blockquote {
  margin: 28px 0;
  padding: 20px 24px;
  border-left: 3px solid var(--gold);
  background: var(--cream);
  border-radius: 0 8px 8px 0;
  color: var(--ink);
}
.blog-content img {
  border-radius: 8px;
  margin: 24px 0;
  box-shadow: 0 12px 34px rgba(28,18,8,.12);
}
.full-article-content > p:first-child,
.full-article-content > p:nth-child(2),
.full-article-content > p:nth-child(3),
.full-article-content > p:nth-child(4),
.full-article-content > p:nth-child(5) {
  color: #6F6253;
}
.table-wrap {
  border: 1px solid rgba(200,169,110,.32);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(28,18,8,.06);
}
.blog-content table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
.blog-content th,
.blog-content td {
  padding: 13px 15px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  font-size: .86rem;
  line-height: 1.55;
}
.blog-content th {
  background: #24180d;
  color: #fff;
  font-weight: 600;
}
.faq-item {
  border: 1px solid rgba(200,169,110,.26);
  border-radius: 8px;
  background: #fff;
  margin: 12px 0;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(28,18,8,.05);
}
.faq-q {
  padding: 15px 18px;
  color: var(--ink);
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq-a {
  padding: 0 18px 16px;
  color: var(--text-muted);
  font-size: .9rem;
  line-height: 1.72;
}
.faq-icon {
  flex: 0 0 auto;
  color: var(--gold);
}

@media (min-width: 1020px) {
  :root { --container: 1040px; }
}
@media (max-width: 860px) {
  .page-hero-grid,
  .blog-layout {
    grid-template-columns: 1fr;
  }
  .blog-toc {
    position: static;
    top: auto;
  }
  .blog-content {
    padding: 30px 24px;
  }
}
@media (max-width: 600px) {
  .blog-content {
    padding: 24px 18px;
    border-radius: 8px;
  }
  .blog-content p,
  .blog-content li {
    font-size: .92rem;
    line-height: 1.78;
  }
  .blog-content h2 {
    margin-top: 34px;
    padding-top: 20px;
  }
  .blog-content h3 {
    padding: 10px 12px;
    font-size: .9rem;
  }
}

/* ==================================================================
   BLOG ARTICLE KIT — reusable premium components (V38 upgrade)
   Editorial, clinical, calm. Reuses existing tokens (--ink/--gold/…).
   Applied via assets/partials/article-kit.php. Light theme only.
   ================================================================== */
:root{
  --ak-paper:#FBFAF7; --ak-line:#EBE4D7; --ak-soft:#F4EFE4;
  --ak-goldink:#8A6A2F; --ak-safe:#B4552F; --ak-safe-bg:#FBF0EA;
}
.ak-wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.ak-grid{display:grid;grid-template-columns:236px minmax(0,1fr);gap:38px;align-items:start}
.ak-main{min-width:0;max-width:760px}

/* Hero byline */
.ak-byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;color:#B9AE9C;font-size:.8rem}
.ak-byline .ak-au{color:#fff;font-weight:600}
.ak-byline .ak-dot{opacity:.4}

/* AI summary box */
.ak-summary{border:1px solid var(--ak-line);background:var(--ak-paper);border-radius:12px;
  padding:22px 24px;margin:0 0 30px;box-shadow:0 8px 30px rgba(28,18,8,.05)}
.ak-summary .ak-lbl{display:inline-flex;align-items:center;gap:7px;font-size:.64rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ak-goldink);margin-bottom:12px}
.ak-summary .ak-lbl::before{content:"";width:16px;height:1px;background:var(--gold)}
.ak-summary dl{display:grid;gap:11px;margin:0}
.ak-summary dt{font-weight:700;color:var(--ink);font-size:.82rem;margin-bottom:2px}
.ak-summary dd{margin:0;color:#4A3D2C;font-size:.9rem;line-height:1.6}

/* Real TOC */
.ak-toc{position:sticky;top:82px;background:#fff;border:1px solid var(--ak-line);border-radius:10px;
  padding:18px 18px 16px;box-shadow:0 10px 34px rgba(28,18,8,.06)}
.ak-toc-t{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:12px}
.ak-toc ol{list-style:none;margin:0;padding:0;counter-reset:t;display:grid;gap:2px}
.ak-toc li{counter-increment:t}
.ak-toc a{display:flex;gap:9px;padding:6px 8px;border-radius:6px;color:var(--text-muted);
  text-decoration:none;font-size:.8rem;line-height:1.4;transition:.15s}
.ak-toc a::before{content:counter(t,decimal-leading-zero);color:var(--gold);font-weight:700;font-size:.7rem}
.ak-toc a:hover{background:var(--ak-soft);color:var(--ink)}
.ak-toc a.is-active{background:var(--ak-soft);color:var(--ink);font-weight:600}
.ak-toc-cta{margin-top:14px}
details.ak-toc-m{display:none}

/* Key takeaway */
.ak-key{border-left:3px solid var(--gold);background:linear-gradient(90deg,rgba(200,169,110,.12),rgba(200,169,110,0));
  border-radius:0 8px 8px 0;padding:16px 20px;margin:26px 0}
.ak-key b{color:var(--ink);display:block;margin-bottom:4px;font-size:.9rem}
.ak-key p{margin:0;color:#4A3D2C;font-size:.9rem;line-height:1.7}

/* Callouts: info / insight / local / safety */
.ak-call{border:1px solid var(--ak-line);border-radius:10px;padding:18px 20px;margin:26px 0;background:#fff}
.ak-call .ak-ct{display:flex;align-items:center;gap:8px;font-size:.66rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.ak-call p{margin:0 0 8px;color:#4A3D2C;font-size:.9rem;line-height:1.72}
.ak-call p:last-child{margin-bottom:0}
.ak-call--insight{background:var(--ak-soft);border-color:rgba(200,169,110,.4)}
.ak-call--insight .ak-ct{color:var(--ak-goldink)}
.ak-call--local .ak-ct{color:#3F6650}
.ak-call--local{border-color:#D5E2D8;background:#F4F8F4}
.ak-call--safety{background:var(--ak-safe-bg);border-color:#F0D3C6}
.ak-call--safety .ak-ct{color:var(--ak-safe)}

/* Option cards (treatments) */
.ak-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:22px 0}
.ak-opt{border:1px solid var(--ak-line);border-radius:10px;padding:18px;background:#fff;display:flex;flex-direction:column;transition:.2s}
.ak-opt:hover{border-color:rgba(200,169,110,.55);box-shadow:0 10px 26px rgba(28,18,8,.07);transform:translateY(-2px)}
.ak-opt h4{margin:0 0 7px;font-family:var(--font-body);font-size:.98rem;font-weight:700;color:var(--ink)}
.ak-opt p{margin:0 0 12px;font-size:.85rem;line-height:1.6;color:#5A4C39}
.ak-opt .ak-meta{margin-top:auto;padding-top:11px;border-top:1px dashed var(--ak-line);
  font-size:.8rem;font-weight:700;color:var(--ak-goldink)}

/* Comparison table */
.ak-tablewrap{overflow-x:auto;margin:22px 0;border:1px solid var(--ak-line);border-radius:10px}
.ak-table{width:100%;border-collapse:collapse;min-width:460px;font-size:.86rem}
.ak-table th,.ak-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--ak-line);vertical-align:top}
.ak-table thead th{background:var(--ak-soft);color:var(--ink);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.ak-table tbody tr:last-child td{border-bottom:0}
.ak-table td{color:#4A3D2C;line-height:1.55}

/* FAQ accordion (native <details>) */
.ak-faq{display:grid;gap:10px;margin:20px 0}
.ak-faq details{border:1px solid var(--ak-line);border-radius:9px;background:#fff;overflow:hidden}
.ak-faq summary{list-style:none;cursor:pointer;padding:15px 18px;font-weight:600;color:var(--ink);
  font-size:.92rem;display:flex;justify-content:space-between;gap:14px;align-items:center}
.ak-faq summary::-webkit-details-marker{display:none}
.ak-faq summary::after{content:"+";color:var(--gold);font-size:1.15rem;line-height:1;flex-shrink:0}
.ak-faq details[open] summary::after{content:"–"}
.ak-faq .ak-fa{padding:0 18px 16px;color:#4A3D2C;font-size:.9rem;line-height:1.72}
.ak-faq .ak-fa p{margin:0 0 8px}.ak-faq .ak-fa p:last-child{margin:0}

/* Author box */
.ak-author{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--ak-line);
  border-radius:12px;padding:20px 22px;margin:34px 0;background:var(--ak-paper)}
.ak-author .ak-av{width:52px;height:52px;border-radius:50%;flex-shrink:0;background:var(--ink);
  color:var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.4rem}
.ak-author .ak-nm{font-weight:700;color:var(--ink)}
.ak-author .ak-ro{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:2px 0 8px}
.ak-author p{margin:0 0 8px;font-size:.85rem;line-height:1.65;color:#5A4C39}
.ak-author a{color:#9B743A;font-size:.85rem}

/* Related content */
.ak-rel{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:30px 0}
.ak-rel h3{font-family:var(--font-body);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin:0 0 12px}
.ak-rel ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ak-rel a{display:block;padding:11px 14px;border:1px solid var(--ak-line);border-radius:8px;
  color:var(--ink);text-decoration:none;font-size:.86rem;background:#fff;transition:.15s}
.ak-rel a:hover{border-color:rgba(200,169,110,.55);background:var(--ak-soft)}

/* CTA band */
.ak-cta{background:var(--ink);color:#fff;border-radius:14px;padding:30px 30px;margin:34px 0;text-align:center}
.ak-cta h3{color:#fff;font-size:clamp(1.3rem,3vw,1.7rem);margin:0 0 8px}
.ak-cta p{color:#CFC6B8;margin:0 auto 18px;max-width:52ch;font-size:.92rem}
.ak-cta .ak-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* References + disclaimer */
.ak-refs{margin:28px 0 0;font-size:.82rem;color:var(--text-muted)}
.ak-refs .ak-lbl{font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.1em;font-size:.66rem;display:block;margin-bottom:8px}
.ak-disc{margin:20px 0 0;padding:14px 16px;border-top:1px solid var(--ak-line);
  color:var(--text-light);font-size:.78rem;line-height:1.6}

@media (max-width:900px){
  .ak-grid{grid-template-columns:1fr;gap:0}
  .ak-main{max-width:none}
  .ak-toc{position:static;margin-bottom:24px;display:none}
  details.ak-toc-m{display:block;margin-bottom:24px;border:1px solid var(--ak-line);border-radius:10px;background:#fff}
  details.ak-toc-m>summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:700;color:var(--ink);font-size:.85rem}
  details.ak-toc-m>summary::-webkit-details-marker{display:none}
  .ak-rel{grid-template-columns:1fr}
}

/* ==================================================================
   BLOG INDEX KIT — premium, filterable listing (V38 upgrade)
   ================================================================== */
.bx-hero{background:var(--ink);color:#fff;padding:64px 0 54px}
.bx-hero .ak-wrap{max-width:1040px}
.bx-hero .label{color:var(--gold)}
.bx-hero h1{color:#fff;margin:10px 0 12px}
.bx-hero p{color:#CFC6B8;max-width:60ch;margin:0 0 24px}
.bx-search{display:flex;gap:10px;max-width:520px}
.bx-search input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  border-radius:8px;padding:12px 15px;color:#fff;font:inherit;font-size:.92rem}
.bx-search input::placeholder{color:#9c9384}
.bx-search input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent}
.bx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.bx-chip{font-size:.76rem;color:#CFC6B8;padding:6px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.2);
  background:transparent;cursor:pointer;transition:.15s;font-family:var(--font-body)}
.bx-chip:hover{border-color:var(--gold);color:#fff}
.bx-chip.is-on{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:600}

/* Featured */
.bx-feat{display:grid;grid-template-columns:1.15fr 1fr;gap:0;border:1px solid var(--ak-line);
  border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 16px 44px rgba(28,18,8,.09);margin-bottom:40px}
.bx-feat .bx-feat-img{min-height:280px;background:var(--ak-soft)}
.bx-feat .bx-feat-img img{width:100%;height:100%;object-fit:cover;display:block}
.bx-feat .bx-feat-body{padding:34px 36px;display:flex;flex-direction:column;justify-content:center}
.bx-feat .bx-eyebrow{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:12px}
.bx-feat h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:0 0 12px;line-height:1.18}
.bx-feat p{color:#5A4C39;font-size:.95rem;line-height:1.7;margin:0 0 18px}
.bx-feat .bx-metaline{font-size:.78rem;color:var(--text-muted);margin-bottom:18px}

/* Card grid */
.bx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));gap:22px}
.bx-card{display:flex;flex-direction:column;border:1px solid var(--ak-line);border-radius:12px;overflow:hidden;
  background:#fff;text-decoration:none;transition:.2s;height:100%}
.bx-card:hover{border-color:rgba(200,169,110,.5);box-shadow:0 14px 34px rgba(28,18,8,.09);transform:translateY(-3px)}
.bx-card .bx-thumb{aspect-ratio:16/10;overflow:hidden;background:var(--ak-soft)}
.bx-card .bx-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.bx-card:hover .bx-thumb img{transform:scale(1.04)}
.bx-card .bx-body{padding:17px 18px 18px;display:flex;flex-direction:column;flex:1}
.bx-card .bx-cat{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ak-goldink);font-weight:700;margin-bottom:8px}
.bx-card h3{font-size:1rem;line-height:1.32;margin:0 0 8px;color:var(--ink);font-family:var(--font-body);font-weight:700}
.bx-card p{font-size:.82rem;line-height:1.55;color:#5A4C39;margin:0 0 14px}
.bx-card .bx-foot{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--text-muted);
  border-top:1px solid var(--ak-line);padding-top:11px}
.bx-card .bx-foot .bx-au{color:var(--ink);font-weight:600}
.bx-empty{display:none;text-align:center;color:var(--text-muted);padding:40px 0}
@media (max-width:780px){
  .bx-feat{grid-template-columns:1fr}
  .bx-feat .bx-feat-img{min-height:210px}
  .bx-feat .bx-feat-body{padding:24px}
}

/* ===== BLOG ARTICLE KIT — MASTER add-ons (24-section scaffold) ===== */
.ak-eeat{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;
  border:1px solid var(--ak-line);background:var(--ak-paper);border-radius:10px;
  padding:15px 20px;margin:0 0 26px;font-size:.8rem;color:var(--text-muted)}
.ak-eeat b{color:var(--ak-goldink);font-weight:700}
.ak-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
.ak-two .ak-col{border:1px solid var(--ak-line);border-radius:10px;padding:18px 20px;background:#fff}
.ak-two .ak-col h4{margin:0 0 10px;font-family:var(--font-body);font-size:.95rem;font-weight:700;color:var(--ink)}
.ak-two .ak-col.ak-yes{border-color:#cfe3d3;background:#f5f9f5}
.ak-two .ak-col.ak-no{border-color:#f0d9cf;background:#fbf3ee}
.ak-two ul{margin:0;padding-left:18px}.ak-two li{font-size:.86rem;line-height:1.6;color:#4A3D2C;margin-bottom:6px}
@media(max-width:640px){.ak-two{grid-template-columns:1fr}.ak-eeat{gap:10px}}

/* ==================================================================
   BLOG ARTICLE — DARK LUXURY THEME + block effects (matches HTML samples)
   Scoped to section.ak-article so it overrides the light .ak-* defaults.
   Palette: #070605 bg · #120f0d cards · #cfac42 gold · #f5f0ea text.
   ================================================================== */
section.ak-article{background:#070605;color:#f5f0ea}
.ak-article .ak-main{color:#c9bfae}
.ak-article h2{color:#f5f0ea;font-family:var(--font-display);border-top:1px solid rgba(207,172,66,.28);
  padding-top:26px;margin:46px 0 16px;font-size:clamp(1.5rem,2.7vw,2.05rem);font-weight:600}
.ak-article .ak-main > h2:first-of-type{border-top:0;padding-top:0;margin-top:4px}
.ak-article h3{color:#cfac42;font-family:var(--font-body);font-weight:700;font-size:1rem;
  margin:24px 0 8px;padding:10px 14px;border-left:3px solid #cfac42;
  background:linear-gradient(90deg,rgba(207,172,66,.12),rgba(207,172,66,0));border-radius:0 6px 6px 0}
.ak-article .ak-main p{color:#a8a095;line-height:1.85;margin:0 0 16px}
.ak-article .ak-main ul,.ak-article .ak-main ol{color:#a8a095;margin:14px 0 22px;padding-left:22px;line-height:1.8}
.ak-article .ak-main li{margin-bottom:9px}
.ak-article .ak-main strong{color:#f5f0ea}
.ak-article .ak-main a{color:#e5bd4a;text-underline-offset:3px}
.ak-article .text-muted{color:#8c8479 !important}

/* TOC */
.ak-article .ak-toc{background:#120f0d;border:1px solid rgba(207,172,66,.22);box-shadow:0 12px 34px rgba(0,0,0,.5)}
.ak-article .ak-toc-t{color:#cfac42}
.ak-article .ak-toc a{color:#a8a095}
.ak-article .ak-toc a::before{color:#cfac42}
.ak-article .ak-toc a:hover,.ak-article .ak-toc a.is-active{background:#1c1814;color:#f5f0ea}
.ak-article details.ak-toc-m{background:#120f0d;border-color:rgba(207,172,66,.22)}
.ak-article details.ak-toc-m>summary{color:#f5f0ea}
.ak-article details.ak-toc-m a{color:#a8a095}

/* E-E-A-T + AI summary */
.ak-article .ak-eeat{background:#120f0d;border-color:rgba(207,172,66,.25);color:#a8a095}
.ak-article .ak-eeat b{color:#cfac42}
.ak-article .ak-summary{background:rgba(207,172,66,.06);border:1px solid rgba(207,172,66,.25);
  border-left:3px solid #cfac42;box-shadow:none}
.ak-article .ak-summary .ak-lbl{color:#cfac42}
.ak-article .ak-summary .ak-lbl::before{background:#cfac42}
.ak-article .ak-summary dt{color:#f5f0ea}
.ak-article .ak-summary dd{color:#a8a095}

/* Key + callouts */
.ak-article .ak-key{background:linear-gradient(90deg,rgba(207,172,66,.1),transparent);border-left-color:#cfac42}
.ak-article .ak-key b{color:#f5f0ea}.ak-article .ak-key p{color:#a8a095}
.ak-article .ak-call{background:#120f0d;border-color:rgba(207,172,66,.2)}
.ak-article .ak-call p{color:#a8a095}
.ak-article .ak-call--insight{background:#161009;border-color:rgba(207,172,66,.4)}
.ak-article .ak-call--insight .ak-ct{color:#cfac42}
.ak-article .ak-call--local{background:#0d1410;border-color:rgba(120,180,140,.3)}
.ak-article .ak-call--local .ak-ct{color:#7fb99a}
.ak-article .ak-call--safety{background:#170d0a;border-color:rgba(229,107,107,.35)}
.ak-article .ak-call--safety .ak-ct{color:#e56b6b}

/* Cards WITH block hover effects (the "hiệu ứng khối") */
.ak-article .ak-opt,.ak-article .ak-two .ak-col{background:#120f0d;border:1px solid rgba(207,172,66,.18);
  transition:transform .3s ease,border-color .3s ease,background .3s ease}
.ak-article .ak-opt:hover,.ak-article .ak-two .ak-col:hover{transform:translateY(-4px);
  border-color:rgba(207,172,66,.55);background:#181411;box-shadow:0 16px 34px rgba(0,0,0,.45)}
.ak-article .ak-opt h4,.ak-article .ak-two .ak-col h4{color:#cfac42}
.ak-article .ak-opt p{color:#a8a095}.ak-article .ak-opt .ak-meta{color:#cfac42;border-top-color:rgba(207,172,66,.25)}
.ak-article .ak-two li{color:#a8a095}
.ak-article .ak-two .ak-col.ak-yes{background:#0d140f;border-color:rgba(120,180,140,.3)}
.ak-article .ak-two .ak-col.ak-yes:hover{border-color:rgba(120,180,140,.6)}
.ak-article .ak-two .ak-col.ak-no{background:#160f0c;border-color:rgba(229,140,107,.28)}
.ak-article .ak-two .ak-col.ak-no:hover{border-color:rgba(229,140,107,.55)}

/* Table */
.ak-article .ak-tablewrap{border-color:rgba(207,172,66,.2)}
.ak-article .ak-table th,.ak-article .ak-table td{border-bottom-color:rgba(207,172,66,.15)}
.ak-article .ak-table thead th{background:#161009;color:#cfac42}
.ak-article .ak-table td{color:#a8a095}

/* FAQ accordion with hover */
.ak-article .ak-faq details{background:#120f0d;border-color:rgba(207,172,66,.2);transition:border-color .3s}
.ak-article .ak-faq details:hover{border-color:rgba(207,172,66,.45)}
.ak-article .ak-faq summary{color:#f5f0ea}
.ak-article .ak-faq summary::after{color:#cfac42}
.ak-article .ak-faq .ak-fa{color:#a8a095}

/* Author + related + refs + disclaimer */
.ak-article .ak-author{background:#120f0d;border-color:rgba(207,172,66,.25)}
.ak-article .ak-author .ak-nm{color:#f5f0ea}.ak-article .ak-author p{color:#a8a095}
.ak-article .ak-author .ak-av{background:#cfac42;color:#070605}
.ak-article .ak-rel a{background:#120f0d;border-color:rgba(207,172,66,.2);color:#f5f0ea;transition:.25s}
.ak-article .ak-rel a:hover{border-color:rgba(207,172,66,.55);background:#181411;transform:translateY(-2px)}
.ak-article .ak-cta{background:#0b0908;border:1px solid rgba(207,172,66,.25)}
.ak-article .ak-disc{color:#6f6960;border-top-color:rgba(207,172,66,.18)}

/* ============================================================
   GLOBAL DARK-LUXURY CHROME  (V38 site skin — matches owner HTML)
   Re-skins the shared chrome + generic content surfaces to a single
   dark-luxury tone. HTML/partials untouched: all links, 7-item nav,
   breadcrumb and schema are preserved. Already-dark components
   (topbar, footer, page-hero, price-box, sticky) stay as-is.
   ============================================================ */
:root{
  --dl-bg:      #070605;
  --dl-surface: #14110e;
  --dl-surface2:#1b1712;
  --dl-line:    rgba(207,172,66,.18);
  --dl-line-soft:rgba(245,240,234,.08);
  --dl-gold:    #cfac42;
  --dl-gold-lt: #e4c874;
  --dl-text:    #f5f0ea;
  --dl-text2:   #a8a095;

  /* Re-point the two light surface tokens to dark. Neither is ever used
     as a text color (audited), so every inline background:var(--warm-white)
     / var(--cream) across ~150 pages flips to dark automatically. */
  --warm-white: #14110e;
  --cream:      #0e0c0a;
  /* Light gray border → subtle gold line (border-only usages, safe on dark) */
  --border:     rgba(207,172,66,.16);
  /* Lift secondary text off the dim brown so it reads on dark surfaces */
  --text-muted: #a8a095;
  --text-light: #8d857a;
}

/* ── Base surface ── */
body{ background:var(--dl-bg); color:var(--dl-text); }
h1,h2,h3,h4{ color:var(--dl-text); }
.label{ color:var(--dl-gold-lt); }
.text-muted{ color:var(--dl-text2); }
hr{ border-color:var(--dl-line-soft); }

/* ── Nav / header ── */
.nav{ background:rgba(7,6,5,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--dl-line); }
.nav-logo-text{ color:var(--dl-text); }
.nav-logo-text span{ color:var(--dl-text2); }
.nav-links a{ color:var(--dl-text2); }
.nav-links a:hover, .nav-links a.active{ color:var(--dl-gold-lt); }
.nav-search-toggle{ color:var(--dl-text2); }
.nav-search-toggle:hover{ color:var(--dl-gold-lt); }
.nav-search-input{ background:var(--dl-surface); color:var(--dl-text); }
.nav-search-input.open{ border:1px solid var(--dl-line); }
.nav-toggle span{ background:var(--dl-text); }
@media (max-width:720px){
  .nav-links{ background:rgba(7,6,5,.98); border-bottom:1px solid var(--dl-line); }
  .nav-links a{ border-bottom:1px solid var(--dl-line-soft); }
  .nav-search-input, .nav-search-input.open{ border:1px solid var(--dl-line); }
}

/* ── Breadcrumb ── */
.breadcrumb{ background:var(--dl-bg); border-bottom:1px solid var(--dl-line-soft); color:var(--dl-text2); }
.breadcrumb a{ color:var(--dl-text2); }
.breadcrumb a:hover{ color:var(--dl-gold-lt); }
.breadcrumb .breadcrumb-sep{ color:rgba(245,240,234,.25); }
.breadcrumb .breadcrumb-current{ color:var(--dl-text); }

/* ── Generic content surfaces → dark cards ── */
.card,
.treat-card,
.diva-guide-toc,
.diva-guide-panel,
.diva-guide-faq details,
.landing-framework .framework-panel{
  background:var(--dl-surface);
  border-color:var(--dl-line);
  color:var(--dl-text);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.card:hover,
.treat-card:hover{
  border-color:var(--dl-gold);
  box-shadow:0 18px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(207,172,66,.25);
}
.treat-card-media, .blog-thumb, .treat-card-body p{ background:var(--dl-surface2); }
.treat-card-body p{ background:transparent; color:var(--dl-text2); }
.treat-card-body h3{ color:var(--dl-text); }
.diva-guide-panel h3, .diva-guide-toc a, .diva-guide-faq summary{ color:var(--dl-text); }
.diva-guide-panel p, .diva-guide-panel li, .diva-guide-mini li{ color:var(--dl-text2); }
.diva-guide-toc a:hover{ color:var(--dl-gold-lt); }

/* ── Section alternating / tinted backgrounds → dark ── */
.diva-expanded-guide,
.diva-guide-intro,
.diva-guide-mini,
.diva-guide-note,
.diva-guide-step,
.diva-guide-final,
.landing-framework .framework-placeholder{
  background:var(--dl-surface);
  border-color:var(--dl-line);
  color:var(--dl-text);
}
.diva-expanded-guide{ background:linear-gradient(180deg,#0d0b09,#070605); border-top:1px solid var(--dl-line); }
.diva-guide-intro h2, .diva-guide-final h2, .diva-guide-step h3, .diva-guide-note strong{ color:var(--dl-text); }
.diva-guide-intro p, .diva-guide-note, .diva-guide-final p, .diva-guide-step p{ color:var(--dl-text2); }
.diva-guide-kicker{ color:var(--dl-gold-lt); }
.diva-guide-mini strong{ color:var(--dl-gold-lt); }
.diva-guide-final{ background:linear-gradient(180deg,#14110e,#0d0b09); }
.avatar-circle{ background:var(--dl-surface2); color:var(--dl-gold-lt); }

/* ── CTA band ── */
.cta-section{ background:var(--dl-surface2); }
.cta-section .container{
  background:var(--dl-surface);
  border:1px solid var(--dl-line);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.cta-section p{ color:var(--dl-text2); }

/* ── Filter tabs ── */
.filter-btn{ color:var(--dl-text2); border-color:var(--dl-line); }
.filter-btn:hover, .filter-btn.active{ color:var(--dl-bg); }

/* ── Buttons that read text as ink on dark ── */
.btn-dark{ background:var(--dl-surface2); color:var(--dl-text); border:1px solid var(--dl-line); }

/* ── Dark chrome: remaining literal-white card classes ── */
.faq-item{ background:var(--dl-surface); border-color:var(--dl-line); box-shadow:0 10px 26px rgba(0,0,0,.35); }
.faq-item:hover{ border-color:var(--dl-gold); }
.faq-q{ color:var(--dl-text); }
.faq-a{ color:var(--dl-text2); }
.faq-icon{ color:var(--dl-gold-lt); }
.diva-guide-toc a{ background:var(--dl-surface2); border-color:var(--dl-line); color:var(--dl-text); }
.diva-guide-toc a:hover{ border-color:var(--dl-gold); color:var(--dl-gold-lt); }
.blog-toc{ background:var(--dl-surface); border-color:var(--dl-line); }
.blog-toc a{ color:var(--dl-text2); }
.blog-toc a:hover{ color:var(--dl-gold-lt); }

/* ── Dark chrome: legacy .blog-content prose tables ── */
.blog-content table{ background:var(--dl-surface); }
.blog-content th{ background:var(--dl-surface2); color:var(--dl-text); border-color:var(--dl-line); }
.blog-content td{ color:var(--dl-text2); border-color:var(--dl-line-soft); }