@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=IBM+Plex+Sans+Thai:wght@300;400;500&display=swap');

:root {
  --gold-100: #fdf8ec;
  --gold-200: #f9e9b8;
  --gold-400: #f5c842;
  --gold-600: #d4a017;
  --gold-800: #b8860b;
  --gold-900: #7a5500;
  --dark:     #1a1005;
  --dark-mid: #2a1b05;
}

.sd-display { font-family: 'Cormorant Garamond', serif; }
.sd-body    { font-family: 'IBM Plex Sans Thai', sans-serif; }

.sd-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--dark);
}
.sd-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 8s ease;
}
.sd-hero:hover .sd-hero-bg { transform: scale(1.04); }
.sd-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
      to top,
      rgba(26,16,5,0.95) 0%,
      rgba(26,16,5,0.55) 55%,
      rgba(26,16,5,0.25) 100%
  );
}
.sd-hero-grain {
  position: absolute; inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ── Gold pill ── */
.gold-pill {
  display: inline-block;
  font-size: 11px;
  padding: 4px 14px;
  border-radius: 9999px;
  border: 1px solid rgba(245,200,66,0.45);
  background: rgba(245,200,66,0.12);
  color: var(--gold-400);
  letter-spacing: 0.06em;
}

/* ── Breadcrumb ── */
.sd-breadcrumb a { color: rgba(255,255,255,0.55); transition: color .2s; }
.sd-breadcrumb a:hover { color: var(--gold-400); }
.sd-breadcrumb span { color: rgba(255,255,255,0.3); }

/* ── Back button ── */
.btn-back {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 20px;
  border-radius: 9999px;
  border: 1.5px solid rgba(245,200,66,0.45);
  background: rgba(245,200,66,0.08);
  color: var(--gold-400);
  font-size: 13px;
  text-decoration: none;
  transition: all .2s ease;
  backdrop-filter: blur(6px);
}
.btn-back:hover {
  background: rgba(245,200,66,0.18);
  border-color: var(--gold-400);
  transform: translateX(-2px);
}

/* ── Gold button ── */
.btn-gold {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold-400); color: #fff;
  padding: 11px 26px; border-radius: 8px;
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  transition: background .2s ease, transform .15s ease;
  border: none; cursor: pointer;
}
.btn-gold:hover  { background: var(--gold-600); transform: translateY(-1px); }
.btn-gold:active { background: var(--gold-800); transform: translateY(0); }

/* ── Outline gold button ── */
.btn-outline-gold {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--gold-400); color: var(--gold-800);
  padding: 10px 24px; border-radius: 8px;
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  transition: all .2s ease;
  background: transparent;
}
.btn-outline-gold:hover {
  background: rgba(245,200,66,0.1);
  border-color: var(--gold-600);
}

/* ── Section divider ── */
.gold-line {
  width: 48px; height: 3px;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-800));
  border-radius: 9999px;
  margin-bottom: 20px;
}

/* ── Feature card ── */
.feat-card {
  background: #fff;
  border: 1px solid rgba(245,200,66,0.25);
  border-radius: 14px;
  padding: 24px;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.feat-card:hover {
  border-color: var(--gold-400);
  box-shadow: 0 8px 28px rgba(245,200,66,0.15);
  transform: translateY(-3px);
}
.feat-icon {
  width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 14px;
  background: rgba(245,200,66,0.12);
}

/* ── Step ── */
.step-num {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  background: rgba(245,200,66,0.15); color: var(--gold-800);
  border: 1.5px solid rgba(245,200,66,0.4);
}
.step-line {
  position: absolute; left: 18px; top: 36px; bottom: -24px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(245,200,66,0.4), transparent);
}

/* ── Doctor mini card ── */
.doc-card {
  background: #fff;
  border: 1px solid rgba(245,200,66,0.2);
  border-radius: 14px; overflow: hidden;
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.doc-card:hover {
  border-color: var(--gold-400);
  box-shadow: 0 6px 24px rgba(245,200,66,0.18);
  transform: translateY(-3px);
}

/* ── Related card ── */
.rel-card {
  background: #fff;
  border: 1px solid rgba(245,200,66,0.2);
  border-radius: 14px; overflow: hidden;
  transition: all .25s ease;
  text-decoration: none; display: block;
}
.rel-card:hover {
  border-color: var(--gold-400);
  box-shadow: 0 6px 24px rgba(245,200,66,0.15);
  transform: translateY(-3px);
}

/* ── CTA banner ── */
.cta-banner {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-mid) 100%);
  border: 1px solid rgba(245,200,66,0.3);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute; top: -60px; right: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,200,66,0.18) 0%, transparent 70%);
}
.cta-banner::after {
  content: '';
  position: absolute; bottom: -40px; left: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,200,66,0.1) 0%, transparent 70%);
}

/* ── Fade-in on scroll ── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── stat chip ── */
.stat-chip {
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 24px;
  background: rgba(245,200,66,0.08);
  border: 1px solid rgba(245,200,66,0.25);
  border-radius: 14px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .detail-grid {
    grid-template-columns: 1fr !important;
  }
  aside { position: static !important; }
}