/* ============================================================================
 * Sinh Vũ Premium Override v1.0
 * Áp dụng DS v1.1 styling lên legacy goi + service pages
 * Targets common classes used across yeucau pages
 * ============================================================================ */

/* ─── BODY ─── */
body {
  font-family: var(--sv-f-body) !important;
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: -0.005em;
  color: var(--sv-navy-700) !important;
  background: var(--sv-paper) !important;
  hanging-punctuation: first allow-end last;
  font-feature-settings: 'kern', 'liga', 'calt';
}

/* ─── HEADER ─── */
header {
  background: color-mix(in srgb, var(--sv-paper) 88%, transparent) !important;
  backdrop-filter: saturate(180%) blur(16px) !important;
  border-bottom: 1px solid var(--sv-line) !important;
}
.brand-text {
  font-family: var(--sv-f-label) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--sv-navy-700) !important;
}
.brand-eyebrow {
  font-family: var(--sv-f-label) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--sv-orange-500) !important;
}
.cta-top {
  font-family: var(--sv-f-label) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  background: var(--sv-navy-700) !important;
  color: white !important;
  border-radius: var(--sv-r-md) !important;
  padding: 10px 18px !important;
  transition: background 150ms !important;
}
.cta-top:hover { background: var(--sv-orange-500) !important; }

/* ─── BREADCRUMB ─── */
.breadcrumb {
  font-family: var(--sv-f-label) !important;
  font-size: 12px !important;
  color: var(--sv-navy-400) !important;
}
.breadcrumb a { color: var(--sv-navy-400) !important; }
.breadcrumb a:hover { color: var(--sv-orange-500) !important; }

/* ─── HERO ─── */
.hero {
  padding: clamp(56px, 9vw, 96px) clamp(16px, 4vw, 32px) clamp(40px, 6vw, 64px) !important;
}
.hero-tag, .hero-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--sv-f-label) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--sv-orange-500) !important;
  background: var(--sv-orange-50) !important;
  padding: 8px 16px !important;
  border-radius: 9999px !important;
  margin-bottom: 24px !important;
}
.hero-title, h1.hero-title {
  font-family: var(--sv-f-display) !important;
  font-weight: 800 !important;
  font-size: clamp(36px, 5.5vw, 64px) !important;
  letter-spacing: -0.03em !important;
  color: var(--sv-navy-700) !important;
  line-height: 1.02 !important;
  margin-bottom: 24px !important;
  text-wrap: balance;
}
.hero-title em {
  color: var(--sv-orange-500) !important;
  font-style: italic !important;
  font-weight: 800 !important;
}
.hero-lede, .hero-lead {
  font-family: var(--sv-f-body) !important;
  font-size: clamp(16px, 2vw, 19px) !important;
  color: var(--sv-navy-500) !important;
  line-height: 1.65 !important;
  font-style: normal !important;
  text-wrap: balance;
}

/* ─── BUTTONS ─── */
.btn-primary, .hero-cta a.btn-primary {
  font-family: var(--sv-f-label) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 14px 24px !important;
  border-radius: var(--sv-r-md) !important;
  background: var(--sv-navy-700) !important;
  color: white !important;
  transition: all 150ms cubic-bezier(.16,1,.3,1) !important;
}
.btn-primary:hover {
  background: var(--sv-orange-500) !important;
  box-shadow: var(--sv-shadow-md) !important;
}
.btn-secondary, .hero-cta a.btn-secondary {
  font-family: var(--sv-f-label) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 14px 24px !important;
  border-radius: var(--sv-r-md) !important;
  background: white !important;
  color: var(--sv-navy-700) !important;
  border: 1px solid var(--sv-line-strong) !important;
}
.btn-secondary:hover {
  border-color: var(--sv-orange-500) !important;
  color: var(--sv-orange-500) !important;
}

/* ─── BLOCK ─── */
.block {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: clamp(40px, 6vw, 80px) clamp(16px, 4vw, 32px) !important;
}
.eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--sv-f-label) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--sv-orange-500) !important;
  background: var(--sv-orange-50) !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  margin-bottom: 16px !important;
}
.block-title, h2.block-title {
  font-family: var(--sv-f-display) !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  letter-spacing: -0.025em !important;
  color: var(--sv-navy-700) !important;
  line-height: 1.05 !important;
  margin-bottom: 20px !important;
  text-wrap: balance;
}
.block-title em {
  color: var(--sv-orange-500) !important;
  font-style: italic !important;
}
.lede {
  font-family: var(--sv-f-body) !important;
  font-size: clamp(15px, 2vw, 17px) !important;
  color: var(--sv-navy-500) !important;
  line-height: 1.65 !important;
  text-wrap: balance;
  font-style: normal !important;
}

/* ─── HERO CARD (pricing summary on goi pages) ─── */
.hero-card {
  background: white !important;
  border: 1px solid var(--sv-line) !important;
  border-radius: var(--sv-r-xl) !important;
  padding: 28px !important;
  box-shadow: var(--sv-shadow-md) !important;
}
.hc-label {
  font-family: var(--sv-f-label) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--sv-navy-400) !important;
}
.hc-value {
  font-family: var(--sv-f-body) !important;
  font-weight: 600 !important;
  color: var(--sv-navy-700) !important;
}
.hc-value.big {
  font-family: var(--sv-f-display) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  color: var(--sv-orange-700) !important;
  letter-spacing: -0.015em !important;
}

/* ─── CARDS (persona, include, process, related) ─── */
.persona, .include-item, .process-step, .related-card {
  background: white !important;
  border: 1px solid var(--sv-line) !important;
  border-radius: var(--sv-r-lg) !important;
  transition: all 240ms cubic-bezier(.16,1,.3,1) !important;
}
.persona:hover, .include-item:hover, .process-step:hover, .related-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--sv-orange-300) !important;
  box-shadow: var(--sv-shadow-lg) !important;
}
.persona-title, .include-name, .process-title, .related-name {
  font-family: var(--sv-f-display) !important;
  font-weight: 700 !important;
  color: var(--sv-navy-700) !important;
  letter-spacing: -0.015em !important;
}
.persona-desc, .include-desc, .process-desc, .related-desc {
  font-family: var(--sv-f-body) !important;
  color: var(--sv-navy-500) !important;
  line-height: 1.6 !important;
}
.include-num {
  font-family: var(--sv-f-display) !important;
  font-weight: 800 !important;
  font-style: italic !important;
  color: var(--sv-orange-500) !important;
}
.related-tier {
  font-family: var(--sv-f-label) !important;
  font-weight: 700 !important;
  color: var(--sv-navy-400) !important;
}
.related-price {
  font-family: var(--sv-f-display) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  color: var(--sv-orange-700) !important;
}
.process-dot {
  font-family: var(--sv-f-display) !important;
  font-weight: 800 !important;
  font-style: italic !important;
  background: var(--sv-orange-500) !important;
  color: white !important;
}
.process-week {
  font-family: var(--sv-f-mono) !important;
  color: var(--sv-navy-400) !important;
  font-variant-numeric: tabular-nums;
}

/* ─── FOOTER ─── */
footer {
  border-top: 1px solid var(--sv-line) !important;
  background: var(--sv-paper) !important;
}
footer .footer-brand {
  font-family: var(--sv-f-display) !important;
  font-weight: 700 !important;
  color: var(--sv-navy-700) !important;
}
footer a { color: var(--sv-navy-500) !important; transition: color 150ms !important; }
footer a:hover { color: var(--sv-orange-500) !important; }

/* ─── FOCUS ─── */
:focus-visible {
  outline: 2px solid var(--sv-orange-500) !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
 * QUY CHUẨN KHẮT KHE · MIN-SIZE FOR NOTO SERIF DISPLAY
 * Display serif có high-contrast strokes designed cho LARGE sizes only.
 * Dưới 20px: thin strokes không render rõ + dấu thanh Việt mất legibility.
 *
 * Min-size mandatory: 24px (--sv-t-lg)
 * Recommended: 32px+ (--sv-t-2xl) cho true display moments
 * Italic emphasis (em tag): min 20px
 *
 * FORBIDDEN: font-family display dưới 20px → phải dùng --sv-f-body hoặc --sv-f-label
 * ============================================================================ */

/* Auto-correct legacy chip/button/badge nếu trót dùng display */
.chip, .badge, .btn, .button, .pill, .tag,
.field-label, .form-label, .input-label,
.brand-text, .brand-eyebrow, .breadcrumb,
.cta-top, .header-link, .nav-link,
.step-counter, .meta, .caption {
  font-family: var(--sv-f-label) !important;
}

/* Body text strictly --sv-f-body */
p, .desc, .description, .tagline, .lede, .lead, .sub, .subtitle, .help-text {
  font-family: var(--sv-f-body) !important;
}

/* Mono cho data + code */
code, pre, kbd, samp, .mono, .price-mono, .duration {
  font-family: var(--sv-f-mono) !important;
}

/* ============================================================================
 * QUY CHUẨN v2 · DISPLAY LÀ MOMENT, KHÔNG PHẢI UI LẶP LẠI
 * Display dùng cho: H1 hero, H2 section, tier title, 1 quote, em emphasis.
 * KHÔNG dùng cho: card title repeated, FAQ questions, list item, persona,
 * process, includes — những thứ xuất hiện 3+ lần trên page.
 * ============================================================================ */

/* Card titles — body semibold thay display */
.persona-title,
.include-name,
.process-title,
.related-name,
.deliverable-title,
.feature-title,
.checklist-title,
.card-title,
.item-title,
.benefit-title,
.faq-q,
.faq-question,
.acc-title,
.accordion-title,
.tab-title,
.sv-trust-title,
.signature {
  font-family: var(--sv-f-body) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  font-style: normal !important;
}

/* Special: trust title nhỉnh hơn xíu */
.sv-trust-title { font-weight: 700 !important; font-size: 16px !important; }

/* Quote standalone (Vũ Ngọc Sinh quote, founder quote) — KEEP display italic
   nhưng giảm signature subtitle về label */
.signature, .quote-attribution {
  font-family: var(--sv-f-label) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

/* Override include num (S1, A1 codes) — không nhất thiết display, dùng mono */
.include-num {
  font-family: var(--sv-f-mono) !important;
  font-style: normal !important;
}