/* ════════════════════════════════════════════════════════════
   Sinh Vũ Design System — Component Layer v1.0
   ────────────────────────────────────────────────────────────
   Pattern: tham chiếu 07_design-system.html + 08_modules.html
   Prefix: .sv-* (component namespace tách biệt portal/admin pages)
   Nguyên tắc:
   - CHỈ dùng token semantic (--sv-color-*, --sv-font-*, etc.)
   - Component tự đủ (mỗi atom mang đủ size + color + state)
   - Apple HIG: list-item KHÔNG nested elevation
   - Accent budget ≤10% — đỏ là kim loại quý
   ════════════════════════════════════════════════════════════ */

/* ============================================================
   1. SAFETY NETS (bắt buộc mọi page nhúng)
   ============================================================ */

/* [QA-SAFETY] focus-visible — a11y bàn phím */
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--sv-focus-ring-width) solid var(--sv-color-text-accent);
  outline-offset: var(--sv-focus-ring-offset);
  border-radius: var(--sv-radius-sm);
}

/* [QA-SAFETY] icon base — không vỡ khối đen */
:where(svg[viewBox="0 0 24 24"]) {
  width: 1.25em; height: 1.25em;
  fill: none; stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}

/* [QA-SAFETY] text-wrap — chống mồ côi chữ */
:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p, li, figcaption, blockquote) { text-wrap: pretty; }

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

/* ============================================================
   2. CONTAINERS — 6 tier (chuẩn 13_LAYOUT mục 1)
   ============================================================ */
.sv-c-narrow  { max-width: var(--sv-container-narrow); margin-inline: auto; padding-inline: var(--sv-gutter-page); }
.sv-c-text    { max-width: var(--sv-container-text); margin-inline: auto; padding-inline: var(--sv-gutter-page); }
.sv-c-article { max-width: var(--sv-container-article); margin-inline: auto; padding-inline: var(--sv-gutter-page); }
.sv-c-feature { max-width: var(--sv-container-feature); margin-inline: auto; padding-inline: var(--sv-gutter-page); }
.sv-c-content { max-width: var(--sv-container-content); margin-inline: auto; padding-inline: var(--sv-gutter-page); }
.sv-c-wide    { max-width: var(--sv-container-wide); margin-inline: auto; padding-inline: var(--sv-gutter-page); }

/* ============================================================
   3. TYPOGRAPHY UTILITIES (role-based)
   ============================================================ */
.sv-eyebrow {
  font-family: var(--sv-font-mono);
  font-size: var(--sv-font-size-eyebrow);
  font-weight: var(--sv-font-weight-eyebrow);
  letter-spacing: var(--sv-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sv-color-text-muted);
  display: inline-block;
}
.sv-eyebrow--accent { color: var(--sv-color-accent-default); }

.sv-display {
  font-family: var(--sv-font-display);
  font-size: var(--sv-font-size-display);
  font-weight: var(--sv-font-weight-display);
  line-height: var(--sv-line-height-display);
  letter-spacing: var(--sv-tracking-display);
  color: var(--sv-color-text-primary);
}
.sv-display-hero {
  font-family: var(--sv-font-display);
  font-size: var(--sv-font-size-display-hero);
  font-weight: var(--sv-font-weight-display-hero);
  line-height: var(--sv-line-height-display-hero);
  letter-spacing: var(--sv-tracking-display-hero);
  color: var(--sv-color-text-primary);
}
.sv-display em, .sv-display-hero em {
  color: var(--sv-color-text-accent);
  font-style: italic;
  font-weight: inherit;
}

.sv-h-lg {
  font-family: var(--sv-font-heading);
  font-size: var(--sv-font-size-heading-lg);
  font-weight: var(--sv-font-weight-heading-lg);
  line-height: var(--sv-line-height-heading-lg);
  letter-spacing: var(--sv-tracking-heading-lg);
  color: var(--sv-color-text-primary);
}
.sv-h-md {
  font-family: var(--sv-font-heading);
  font-size: var(--sv-font-size-heading-md);
  font-weight: var(--sv-font-weight-heading-md);
  line-height: var(--sv-line-height-heading-md);
  letter-spacing: var(--sv-tracking-heading-md);
  color: var(--sv-color-text-primary);
}
.sv-h-sm {
  font-family: var(--sv-font-heading);
  font-size: var(--sv-font-size-heading-sm);
  font-weight: var(--sv-font-weight-heading-sm);
  line-height: var(--sv-line-height-heading-sm);
  letter-spacing: var(--sv-tracking-heading-sm);
  color: var(--sv-color-text-primary);
}

.sv-body-lg { font-size: var(--sv-font-size-body-lg); line-height: var(--sv-line-height-body-lg); }
.sv-body-md { font-size: var(--sv-font-size-body-md); line-height: var(--sv-line-height-body-md); }
.sv-body-sm { font-size: var(--sv-font-size-body-sm); line-height: var(--sv-line-height-body-sm); color: var(--sv-color-text-secondary); }

.sv-label {
  font-family: var(--sv-font-mono);
  font-size: var(--sv-font-size-label);
  font-weight: var(--sv-font-weight-label);
  letter-spacing: var(--sv-tracking-label);
  text-transform: uppercase;
  color: var(--sv-color-text-muted);
}

.sv-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ============================================================
   4. BUTTONS — primary / secondary / ghost
   ============================================================ */
.sv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sv-space-200);
  min-height: 44px;
  padding: var(--sv-space-200) var(--sv-space-400);
  border: var(--sv-border-width-thin) solid transparent;
  border-radius: var(--sv-button-primary-radius);
  font-family: var(--sv-font-body);
  font-size: var(--sv-font-size-body-md);
  font-weight: var(--sv-font-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--sv-duration-base) var(--sv-ease-standard),
              border-color var(--sv-duration-base) var(--sv-ease-standard),
              color var(--sv-duration-base) var(--sv-ease-standard),
              transform var(--sv-duration-fast) var(--sv-ease-standard);
  white-space: nowrap;
}
.sv-btn:disabled {
  cursor: not-allowed;
  opacity: var(--sv-opacity-disabled);
}
.sv-btn--pri {
  background: var(--sv-button-primary-bg);
  color: var(--sv-button-primary-text);
}
.sv-btn--pri:hover:not(:disabled) {
  background: var(--sv-button-primary-bg-hover);
  transform: translateY(-1px);
}
.sv-btn--sec {
  background: var(--sv-button-secondary-bg);
  color: var(--sv-button-secondary-text);
  border-color: var(--sv-button-secondary-border);
}
.sv-btn--sec:hover:not(:disabled) {
  border-color: var(--sv-color-accent-default);
  color: var(--sv-color-text-accent);
}
.sv-btn--ghost {
  background: transparent;
  color: var(--sv-color-text-primary);
}
.sv-btn--ghost:hover:not(:disabled) {
  background: var(--sv-color-border-subtle);
}
.sv-btn--pill { border-radius: var(--sv-radius-pill); padding-inline: var(--sv-space-600); }
.sv-btn--block { width: 100%; min-height: 52px; font-size: var(--sv-font-size-body-md); }

/* ============================================================
   5. CARDS — raised surface, đúng HIG
   ============================================================ */
.sv-card {
  background: var(--sv-card-bg);
  border: var(--sv-border-width-thin) solid var(--sv-card-border);
  border-radius: var(--sv-card-radius);
  overflow: hidden;
}
.sv-card-head {
  padding: var(--sv-space-300) var(--sv-card-inset);
  border-bottom: var(--sv-border-width-thin) solid var(--sv-color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-space-300);
  flex-wrap: wrap;
}
.sv-card-head-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sv-card-body { padding: var(--sv-card-inset); }
.sv-card-footer {
  padding: var(--sv-space-300) var(--sv-card-inset);
  border-top: var(--sv-border-width-thin) solid var(--sv-color-border-subtle);
}

/* Badge pill cho card head */
.sv-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-100);
  padding: 4px var(--sv-space-200);
  border-radius: var(--sv-radius-pill);
  background: transparent;
  border: var(--sv-border-width-thin) solid var(--sv-color-border-default);
  color: var(--sv-color-text-secondary);
  font-family: var(--sv-font-mono);
  font-size: var(--sv-font-size-label);
  font-weight: var(--sv-font-weight-label);
  letter-spacing: var(--sv-tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.sv-badge--ok { background: color-mix(in srgb, var(--sv-color-feedback-success) 10%, transparent); border-color: transparent; color: var(--sv-color-feedback-success); }
.sv-badge--warn { background: color-mix(in srgb, var(--sv-color-feedback-warning) 12%, transparent); border-color: transparent; color: var(--sv-color-feedback-warning); }
.sv-badge--danger { background: color-mix(in srgb, var(--sv-color-feedback-danger) 10%, transparent); border-color: transparent; color: var(--sv-color-feedback-danger); }

/* Niche card — card-as-link cho sub-niche related (nganh/* pages) */
.sv-niche-card {
  display: flex;
  flex-direction: column;
  padding: var(--sv-card-inset);
  text-decoration: none;
  color: var(--sv-color-text-primary);
  transition: border-color 180ms var(--sv-ease-standard),
              transform 180ms var(--sv-ease-standard),
              box-shadow 180ms var(--sv-ease-standard);
}
.sv-niche-card:hover {
  border-color: var(--sv-color-accent-default);
  transform: translateY(-2px);
}
.sv-niche-card .sv-card-body {
  padding: 0;
}
.sv-niche-card-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-bottom: var(--sv-space-300);
  font-family: var(--sv-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sv-color-text-secondary);
  background: color-mix(in srgb, var(--sv-color-cream-tint) 40%, transparent);
  border-radius: var(--sv-radius-pill);
  width: fit-content;
}

/* ============================================================
   6. LIST ITEM — Apple HIG (KHÔNG nested elevation)
   ============================================================ */
.sv-list { display: flex; flex-direction: column; }
.sv-list-item {
  display: flex;
  align-items: center;
  gap: var(--sv-space-300);
  padding: var(--sv-space-300) 0;
  border-bottom: var(--sv-border-width-thin) solid var(--sv-color-border-subtle);
  background: transparent;
  position: relative;
}
.sv-list-item:last-child { border-bottom: none; }
.sv-list-item--active {
  background: color-mix(in srgb, var(--sv-color-cream-tint) 18%, transparent);
  padding-inline: var(--sv-space-300);
  margin-inline: calc(-1 * var(--sv-space-300));
  border-radius: var(--sv-radius-sm);
  border-bottom-color: transparent;
}
.sv-list-item--active::before {
  content: ''; position: absolute;
  left: 0; top: var(--sv-space-200); bottom: var(--sv-space-200);
  width: 3px; background: var(--sv-color-accent-default); border-radius: var(--sv-radius-pill);
}
.sv-list-item-icon {
  width: 32px; height: 32px;
  border-radius: var(--sv-radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sv-font-heading);
  font-variant-numeric: tabular-nums;
  font-weight: var(--sv-font-weight-semibold);
  font-size: var(--sv-font-size-body-sm);
  flex-shrink: 0;
}
.sv-list-item-icon--done { background: var(--sv-color-feedback-success); color: white; }
.sv-list-item-icon--current { background: var(--sv-color-accent-default); color: white; }
.sv-list-item-icon--pending {
  background: transparent;
  color: var(--sv-color-text-muted);
  border: var(--sv-border-width-base) solid var(--sv-color-border-default);
}
.sv-list-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

/* ============================================================
   7. STEPPER — progression với connector line
   ============================================================ */
.sv-stepper { display: flex; flex-direction: column; position: relative; }
.sv-stepper::before {
  content: ''; position: absolute;
  top: var(--sv-space-600); bottom: var(--sv-space-600);
  left: calc(var(--sv-space-100) + 16px);
  width: 2px; background: var(--sv-color-border-subtle);
  z-index: 0;
}
.sv-stepper > .sv-list-item { position: relative; z-index: 1; padding-left: var(--sv-space-100); }
.sv-stepper > .sv-list-item > .sv-list-item-icon { z-index: 2; }

/* ============================================================
   8. QUOTE BLOCK
   ============================================================ */
.sv-quote {
  background: color-mix(in srgb, var(--sv-color-cream-tint) 14%, transparent);
  border-left: 3px solid var(--sv-color-accent-default);
  padding: var(--sv-space-300) var(--sv-space-400);
  border-radius: 0 var(--sv-radius-sm) var(--sv-radius-sm) 0;
  font-family: var(--sv-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--sv-font-size-body-md);
  color: var(--sv-color-text-secondary);
  line-height: var(--sv-line-height-body-md);
}

/* ============================================================
   9. FORM FIELDS
   ============================================================ */
.sv-field { display: flex; flex-direction: column; gap: var(--sv-space-100); }
.sv-field-label {
  font-family: var(--sv-font-mono);
  font-size: var(--sv-font-size-label);
  font-weight: var(--sv-font-weight-label);
  letter-spacing: var(--sv-tracking-label);
  text-transform: uppercase;
  color: var(--sv-color-text-muted);
}
.sv-field-input {
  min-height: 44px;
  padding: var(--sv-space-200) var(--sv-space-300);
  background: var(--sv-color-surface-raised);
  border: var(--sv-border-width-thin) solid var(--sv-color-border-default);
  border-radius: var(--sv-radius-md);
  font-family: var(--sv-font-body);
  font-size: var(--sv-font-size-body-md);
  color: var(--sv-color-text-primary);
  transition: border-color var(--sv-duration-fast) var(--sv-ease-standard);
}
.sv-field-input:focus { border-color: var(--sv-color-accent-default); outline: none; }
.sv-field-input::placeholder { color: var(--sv-color-text-disabled); }
.sv-field-help { font-size: var(--sv-font-size-body-sm); color: var(--sv-color-text-muted); }
.sv-field-error { font-size: var(--sv-font-size-body-sm); color: var(--sv-color-feedback-danger); }
.sv-field--error .sv-field-input { border-color: var(--sv-color-feedback-danger); }

/* ============================================================
   10. TAGS / CHIPS
   ============================================================ */
.sv-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--sv-space-200);
  background: color-mix(in srgb, var(--sv-color-accent-default) 6%, transparent);
  color: var(--sv-color-text-accent);
  border-radius: var(--sv-radius-sm);
  font-family: var(--sv-font-mono);
  font-size: var(--sv-font-size-label);
  font-weight: var(--sv-font-weight-label);
  letter-spacing: 0;
  text-transform: none;
}

/* ============================================================
   11. SECTION (Apple-tentpole spacing)
   ============================================================ */
.sv-section {
  padding-block: clamp(var(--sv-space-1200), 7vw, var(--sv-space-2000));
}
.sv-section--compact {
  padding-block: clamp(var(--sv-space-600), 4vw, var(--sv-space-1000));
}

/* ============================================================
   12. STACK & FLOW utilities
   ============================================================ */
.sv-stack { display: flex; flex-direction: column; }
.sv-stack-gap-200 { gap: var(--sv-space-200); }
.sv-stack-gap-300 { gap: var(--sv-space-300); }
.sv-stack-gap-400 { gap: var(--sv-space-400); }
.sv-stack-gap-600 { gap: var(--sv-space-600); }
.sv-stack-gap-800 { gap: var(--sv-space-800); }

.sv-row { display: flex; align-items: center; }
.sv-row-gap-100 { gap: var(--sv-space-100); }
.sv-row-gap-200 { gap: var(--sv-space-200); }
.sv-row-gap-300 { gap: var(--sv-space-300); }
.sv-row-wrap { flex-wrap: wrap; }
.sv-row-between { justify-content: space-between; }

/* Grid utilities — auto-fit responsive cards */
.sv-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sv-space-400);
}
.sv-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sv-space-400);
}
.sv-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sv-space-400);
}

/* ============================================================
   13. DENSITY (data-density="compact" — admin/dashboard)
   ============================================================ */
[data-density="compact"] {
  --sv-space-gap: var(--sv-space-200);
  --sv-space-gap-tight: var(--sv-space-100);
  --sv-card-inset: var(--sv-space-300);
}
[data-density="compact"] .sv-list-item {
  padding: var(--sv-space-200) 0;
}

/* ============================================================
   14. THEME-AWARE LOGO (via CSS variable inheritance)
   ============================================================ */
.sv-lg {
  --logo-mark: var(--sv-color-accent-default);
  --logo-wm: var(--sv-color-text-primary);
  height: 40px;
  width: auto;
  display: block;
}
.sv-lg-sm { height: 28px; }
.sv-lg-lg { height: 56px; }

/* ============================================================
   15. RESPONSIVE SAFETY NETS [QA-SAFETY] (added 2026-06-09)
   ============================================================ */

/* iOS Safari zoom-on-focus fix — inputs ≥16px font */
@media (max-width: 820px) {
  :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
         textarea, select) {
    font-size: max(16px, 1em);
  }
}

/* WCAG 2.5.5 — touch target 44×44 minimum cho buttons */
:where(.sv-btn, button[type="submit"], button[type="button"]) {
  min-height: 44px;
}

/* Container side-padding floor 16px mobile */
:where(.sv-c-narrow, .sv-c-text, .sv-c-article,
       .sv-c-feature, .sv-c-content, .sv-c-wide) {
  padding-inline: max(16px, var(--sv-gutter-page, 1.25rem));
}

/* Nav wrap safety + mobile collapse for .sv-page-header */
:where(nav ul, nav ol, .sv-page-nav, .yc-nav) {
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .sv-page-nav a:not(.sv-btn) { display: none; }
  .sv-brand-logo { height: 40px; }
  .sv-page-header-inner { gap: var(--sv-space-200); }
}

/* Cua-1 + Cua-2 + tu-van: form input min-height 44px */
@media (max-width: 820px) {
  :where(.input, .textarea, .select, .composer-textarea, .edit-inline textarea, .spec-input, .spec-textarea) {
    min-height: 44px;
    font-size: max(16px, 1em);
  }
}

/* Cua-1: prevent .nav-row vs .sv-thanks-sticky collision at done step */
body[data-step="done"] .nav-row { display: none; }

/* Cua-2 + tu-van: icon button touch target */
:where(.chat-head-action, .btn-attach, .btn-mic, .composer-action, .composer-send, .exit-link) {
  min-width: 44px;
  min-height: 44px;
}

/* ============================================================
   16. AEO ATOMIC ANSWER BLOCKS [AEO] (added 2026-06-09)
   Self-contained answer blocks for AI search extraction.
   ChatGPT / Claude / Perplexity / Gemini friendly.
   ============================================================ */
.sv-aeo-block { scroll-margin-top: 80px; }

.sv-aeo-answer {
  font-size: var(--sv-font-size-body-md, 1rem);
  line-height: 1.7;
  color: var(--sv-color-text-primary);
  margin-block: var(--sv-space-400);
  max-width: 70ch;
}
.sv-aeo-answer strong {
  color: var(--sv-color-text-primary);
  font-weight: var(--sv-fw-semibold, 600);
}

.sv-aeo-meta {
  font-family: var(--sv-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--sv-color-text-muted);
  margin-top: var(--sv-space-300);
  display: block;
}

/* ============================================================
   17. MOBILE FIT SAFETY NETS [QA-SAFETY] (added 2026-06-10)
   Universal nets ngăn horizontal overflow trên mọi page.
   QUAN TRỌNG: dùng overflow-x: clip (KHÔNG hidden) để position:fixed
   children (Cua-2 slide-in panel) vẫn extend được bên ngoài viewport.
   ============================================================ */

/* [QA-SAFETY] Global overflow-x lockdown — body never scrolls horizontal */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

/* [QA-SAFETY] Media never overflows parent */
:where(img, svg, video, iframe, embed, object, canvas) {
  max-width: 100%;
  height: auto;
}

/* [QA-SAFETY] Code blocks scroll internally, prose code wraps */
:where(pre, code) {
  max-width: 100%;
  overflow-wrap: break-word;
}
:where(pre) { overflow-x: auto; }

/* [QA-SAFETY] Tables responsive wrap dưới breakpoint mobile/tablet */
@media (max-width: 820px) {
  :where(table) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* [QA-SAFETY] Flex/grid children: prevent intrinsic min-content overflow */
:where(.sv-flex > *, .sv-grid > *, .yc-flex > *, .yc-grid > *) {
  min-width: 0;
}

/* [QA-SAFETY] Long words/URLs trong prose: break gracefully */
:where(p, li, dd, dt, blockquote, figcaption, .sv-prose, .sv-text) {
  overflow-wrap: break-word;
}

/* [QA-SAFETY] Email/URL links trong text content: break ở mọi chỗ */
:where(p a[href^="mailto:"], p a[href^="http"], li a[href^="http"]) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ============================================================
   18. LINK CARDS [BRAND-OPERATING] (added 2026-06-10)
   Sinh Vũ gửi link qua chat = touchpoint vận hành brand,
   không phải plain URL. Pattern A — Minimalist Card.
   ============================================================ */

.sv-linkcard {
  --linkcard-pad: 16px;
  --linkcard-visual-size: 96px;
  display: flex;
  gap: 16px;
  padding: var(--linkcard-pad);
  margin: 8px 0;
  background: color-mix(in srgb, var(--sv-color-cream-tint) 12%, var(--cua2-bg-paper, #FAF7F2));
  border: 1px solid color-mix(in srgb, var(--sv-color-cream-tint) 28%, var(--cua2-border-hair, #ECE7DD));
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  max-width: 100%;
  overflow: hidden;
  transition: transform 180ms, box-shadow 180ms, border-color 180ms;
}
.sv-linkcard:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--cua2-text-ink, #2C2A24) 8%, transparent);
  border-color: color-mix(in srgb, var(--sv-color-cream-tint) 44%, var(--cua2-border-hair, #ECE7DD));
}

/* Visual block (left) */
.sv-linkcard-visual {
  width: var(--linkcard-visual-size);
  height: var(--linkcard-visual-size);
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--cua2-bg-raised, #FFFFFF);
  border: 1px solid var(--cua2-border-hair, #ECE7DD);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sv-linkcard-visual img,
.sv-linkcard-visual svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sv-linkcard-visual--icon svg {
  width: 38px; height: 38px;
  color: var(--sv-color-text-accent);
}

/* Content block (right) */
.sv-linkcard-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sv-linkcard-eyebrow {
  font-family: var(--sv-font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cua2-text-muted, #8A8579);
  display: inline-flex; align-items: center; gap: 8px;
}
.sv-linkcard-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sv-color-accent-default);
  flex-shrink: 0;
}
.sv-linkcard-title {
  font-family: var(--sv-font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--cua2-text-ink, #2C2A24);
  text-wrap: balance;
  word-break: break-word;
  margin: 0;
}
.sv-linkcard-subtitle {
  font-family: var(--sv-font-body);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--cua2-text-secondary, #5A574E);
  margin: 0;
}
.sv-linkcard-chips {
  display: flex; flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.sv-linkcard-chip {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  font-family: var(--sv-font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--cua2-text-secondary, #5A574E);
  background: var(--cua2-bg-raised, #FFFFFF);
  border: 1px solid var(--cua2-border-hair, #ECE7DD);
  border-radius: 999px;
  white-space: nowrap;
}
.sv-linkcard-chip--metric {
  color: var(--sv-color-text-accent);
  border-color: color-mix(in srgb, var(--sv-color-text-accent) 24%, transparent);
  background: color-mix(in srgb, var(--sv-color-text-accent) 6%, var(--cua2-bg-raised, #FFFFFF));
}
.sv-linkcard-cta {
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--sv-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sv-color-text-accent);
  display: inline-flex; align-items: center; gap: 4px;
}
.sv-linkcard-cta::after {
  content: "→";
  transition: transform 180ms;
}
.sv-linkcard:hover .sv-linkcard-cta::after {
  transform: translateX(3px);
}

/* Mobile responsive */
@media (max-width: 600px) {
  .sv-linkcard {
    --linkcard-visual-size: 72px;
    --linkcard-pad: 14px;
    gap: 12px;
    border-radius: 12px;
  }
  .sv-linkcard-title {
    font-size: 1rem;
  }
}

/* Type variants: subtle accent border-top */
.sv-linkcard--case .sv-linkcard-visual { background: var(--cua2-bg-paper, #FAF7F2); }
.sv-linkcard--service .sv-linkcard-visual--icon { background: color-mix(in srgb, var(--sv-color-accent-default) 6%, var(--cua2-bg-raised, #FFFFFF)); }
.sv-linkcard--package { border-left: 3px solid var(--sv-color-text-accent); }
.sv-linkcard--blog .sv-linkcard-visual { background: var(--cua2-bg-sidebar, #F4F1EB); }
.sv-linkcard--industry .sv-linkcard-visual--icon svg { color: var(--cua2-text-ink, #2C2A24); }
.sv-linkcard--booking {
  background: color-mix(in srgb, var(--sv-color-feedback-success, #15803d) 4%, var(--cua2-bg-paper, #FAF7F2));
  border-color: color-mix(in srgb, var(--sv-color-feedback-success, #15803d) 18%, var(--cua2-border-hair, #ECE7DD));
}
.sv-linkcard--booking .sv-linkcard-cta { color: var(--sv-color-feedback-success, #15803d); }

/* Multi-card stack: tight gap */
.sv-linkcard + .sv-linkcard { margin-top: 0; }
.sv-linkcard-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ============================================================
   19. CANONICAL HEADER PATTERNS [BRAND-OPERATING] (added 2026-06-10)
   3 patterns: A = Marketing, B = Workflow, C = App 3-panel (Cua-2)
   Chuẩn từ /dich-vu/: BG full-width + inner max 1280px + logo 56px + 4 nav items
   ============================================================ */

/* ─── PATTERN A: Marketing Header (.sv-app-header) ─────────── */
/* Pages: homepage, dich-vu, ve-sinh-vu, lien-he, case, nganh, goi, chinh-sach, 404 */
.sv-app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: color-mix(in srgb, var(--cua2-bg-paper, #FAF7F2) 92%, transparent);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid var(--cua2-border-hair, #ECE7DD);
}
.sv-app-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 80px;
}
.sv-app-header .sv-brand-logo {
  height: 56px;
  width: auto;
  display: block;
}
@media (max-width: 600px) {
  .sv-app-header .sv-brand-logo { height: 44px; }
  .sv-app-header-inner { min-height: 64px; padding: 12px 16px; gap: 12px; }
}

/* Nav desktop */
.sv-app-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: nowrap;
}
.sv-app-nav a {
  font-family: var(--sv-font-heading);
  font-size: 14px;
  font-weight: 500;
  color: var(--cua2-text-secondary, #5A574E);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1.5px solid transparent;
  transition: color 180ms, border-color 180ms;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.sv-app-nav a:hover {
  color: var(--cua2-text-ink, #2C2A24);
  border-bottom-color: var(--sv-color-accent-default);
}
.sv-app-nav a.is-primary {
  background: var(--sv-color-accent-default);
  color: white;
  padding: 9px 20px;
  border-radius: 999px;
  font-weight: 600;
  border: 0;
  transition: background 180ms, transform 180ms;
}
.sv-app-nav a.is-primary:hover {
  background: var(--sv-color-accent-hover);
  transform: translateY(-1px);
  color: white;
}

/* Hamburger button (mobile only) */
.sv-app-hamburger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cua2-border-soft, #E0DACD);
  border-radius: 999px;
  background: var(--cua2-bg-raised, #FFFFFF);
  color: var(--cua2-text-ink, #2C2A24);
  cursor: pointer;
}
.sv-app-hamburger svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }

/* Mobile breakpoint: hamburger replaces nav */
@media (max-width: 900px) {
  .sv-app-nav { display: none; }
  .sv-app-hamburger { display: inline-flex; }
}

/* ─── Mobile drawer (slide-in từ phải) ───────────────────── */
.sv-app-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(88%, 360px);
  height: 100dvh;
  background: var(--cua2-bg-raised, #FFFFFF);
  border-left: 1px solid var(--cua2-border-soft, #E0DACD);
  z-index: 110;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(.16,1,.3,1);
  display: flex; flex-direction: column;
  box-shadow: -8px 0 32px color-mix(in srgb, var(--cua2-text-ink, #2C2A24) 18%, transparent);
  overflow-y: auto;
  padding: 16px 0;
}
.sv-app-drawer[data-state="open"] { transform: translateX(0); }
.sv-app-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px 16px;
  border-bottom: 1px solid var(--cua2-border-hair, #ECE7DD);
  margin-bottom: 12px;
}
.sv-app-drawer-eyebrow {
  font-family: var(--sv-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cua2-text-muted, #8A8579);
}
.sv-app-drawer-close {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cua2-border-soft, #E0DACD);
  background: var(--cua2-bg-raised, #FFFFFF);
  border-radius: 50%;
  color: var(--cua2-text-secondary, #5A574E);
  cursor: pointer;
}
.sv-app-drawer-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.sv-app-drawer-nav {
  display: flex; flex-direction: column;
  padding: 0 8px;
  gap: 2px;
}
.sv-app-drawer-nav a {
  display: flex; align-items: center;
  min-height: 48px;
  padding: 0 16px;
  font-family: var(--sv-font-heading);
  font-size: 16px;
  font-weight: 500;
  color: var(--cua2-text-ink, #2C2A24);
  text-decoration: none;
  border-radius: 10px;
  transition: background-color 150ms;
}
.sv-app-drawer-nav a:hover,
.sv-app-drawer-nav a:focus-visible {
  background: color-mix(in srgb, var(--sv-color-cream-tint, #FFEAAE) 14%, transparent);
}
.sv-app-drawer-nav a.is-primary {
  background: var(--sv-color-accent-default);
  color: white;
  margin: 12px 8px 0;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
}
.sv-app-drawer-nav a.is-primary:hover { background: var(--sv-color-accent-hover); color: white; }

/* Drawer backdrop */
.sv-app-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--cua2-text-ink, #2C2A24) 55%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 105;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms cubic-bezier(.16,1,.3,1);
}
.sv-app-drawer[data-state="open"] ~ .sv-app-drawer-backdrop,
body.sv-drawer-open .sv-app-drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* ─── PATTERN B: Workflow Header (.sv-process-header) ──────── */
/* Pages: cua-1, brief, portal, tu-van 17 pages */
.sv-process-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: color-mix(in srgb, var(--cua2-bg-paper, #FAF7F2) 92%, transparent);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid var(--cua2-border-hair, #ECE7DD);
}
.sv-process-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 80px;
}
.sv-process-header .sv-brand-logo {
  height: 56px;
  width: auto;
  display: block;
}
.sv-process-header-eyebrow {
  font-family: var(--sv-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cua2-text-muted, #8A8579);
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid var(--cua2-border-hair, #ECE7DD);
  white-space: nowrap;
}
.sv-process-header-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sv-font-body);
  font-size: 13px;
  color: var(--cua2-text-secondary, #5A574E);
  font-variant-numeric: tabular-nums;
}
.sv-process-header-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sv-color-feedback-success, #15803d);
}
.sv-process-header-spacer { flex: 1; }
@media (max-width: 600px) {
  .sv-process-header .sv-brand-logo { height: 44px; }
  .sv-process-header-inner { min-height: 64px; padding: 12px 16px; gap: 12px; }
  .sv-process-header-eyebrow { font-size: 10px; margin-left: 12px; padding-left: 12px; }
  .sv-process-header-status { font-size: 12px; }
}

/* ─── Legacy alias: pages dùng .svh class kế thừa Pattern A canonical ─── */
.svh {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: color-mix(in srgb, var(--cua2-bg-paper, #FAF7F2) 92%, transparent);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid var(--cua2-border-hair, #ECE7DD);
}
/* Pages KHÔNG có .svh-inner wrapper: .svh tự flex + max-width inline */
.svh:not(:has(.svh-inner)) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px clamp(16px, 4vw, 32px);
  min-height: 80px;
}
@media (max-width: 600px) {
  .svh:not(:has(.svh-inner)) { min-height: 64px; padding: 12px 16px; gap: 12px; }
}
.svh-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 80px;
}
.svh-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.svh-brand .sv-brand-logo { height: 56px; width: auto; display: block; }
@media (max-width: 600px) {
  .svh-brand .sv-brand-logo { height: 44px; }
  .svh-inner { min-height: 64px; padding: 12px 16px; gap: 12px; }
}
.svh-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: nowrap;
}
.svh-nav a {
  font-family: var(--sv-font-heading);
  font-size: 14px;
  font-weight: 500;
  color: var(--cua2-text-secondary, #5A574E);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1.5px solid transparent;
  transition: color 180ms, border-color 180ms;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.svh-nav a:hover { color: var(--cua2-text-ink, #2C2A24); border-bottom-color: var(--sv-color-accent-default); }
.svh-nav a.primary,
.svh-nav a.is-primary {
  background: var(--sv-color-accent-default);
  color: white;
  padding: 9px 20px;
  border-radius: 999px;
  font-weight: 600;
  border: 0;
  transition: background 180ms, transform 180ms;
}
.svh-nav a.primary:hover,
.svh-nav a.is-primary:hover { background: var(--sv-color-accent-hover); transform: translateY(-1px); color: white; }
@media (max-width: 900px) {
  .svh-nav { display: none; }
}

/* ============================================================
   20. PATTERN B WORKFLOW HEADER MARK [BRAND-OPERATING] (added 2026-06-10)
   Tu-van + Cua-1 + Brief + Portal — symbol + tagline compact
   ============================================================ */

.sv-process-mark {
  width: 36px;
  height: 36px;
  display: block;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .sv-process-mark { width: 32px; height: 32px; }
}

.sv-process-brand-text {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
}
.sv-process-brand-name {
  font-family: var(--sv-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--cua2-text-ink);
  letter-spacing: -0.005em;
}
.sv-process-brand-tagline {
  font-family: var(--sv-font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cua2-text-muted);
}
@media (max-width: 600px) {
  .sv-process-brand-name { font-size: 14px; }
  .sv-process-brand-tagline { font-size: 9px; }
}

/* Tu-van .brand wrapper alignment với mark + text */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}


/* ============================================================
   21. v3.0 VN-CRITICAL DEFAULTS [QA-SAFETY] (added 2026-06-10 Wave 1)
   Vietnamese tall-script line-height +0.1em vs English
   ============================================================ */

/* Body VN line-height ≥1.55 (dấu chồng ế/ờ/ạ/ặ) */
:where(body, p, li, dt, dd, blockquote, .sv-prose, .sv-text) {
  line-height: 1.60;
}

/* Heading line-height ≥1.20 cho VN diacritic */
:where(h1, h2, h3) { line-height: 1.30; }
:where(h4, h5, h6) { line-height: 1.35; }

/* Display nhỏ hơn 64px line-height 1.15; ≥64px line-height 1.05 */
:where(.sv-display, .hero-title, .display-xl) { line-height: 1.10; }

/* Font feature settings cho dấu render chuẩn */
:where(html) {
  font-feature-settings: "kern", "liga", "calt";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* CLS prevention cho Be Vietnam Pro swap (Agent E section 5) */
@font-face {
  font-family: "Be Vietnam Pro Fallback";
  src: local("Arial");
  size-adjust: 100%;
  ascent-override: 95%;
  descent-override: 25%;
}


/* ============================================================
   21. v3.0 VN-CRITICAL DEFAULTS [QA-SAFETY] (Wave 1 — 2026-06-10)
   Vietnamese tall-script line-height +0.1em vs English (Agent F R2)
   ============================================================ */

/* Body VN line-height ≥1.55 (dấu chồng ế/ờ/ạ/ặ) */
:where(body, p, li, dt, dd, blockquote, .sv-prose, .sv-text) {
  line-height: 1.60;
}

/* Heading VN line-height +0.1em */
:where(h1, h2, h3) { line-height: 1.30; }
:where(h4, h5, h6) { line-height: 1.35; }

/* Font feature settings cho dấu render chuẩn */
:where(html) {
  font-feature-settings: "kern", "liga", "calt";
  text-rendering: optimizeLegibility;
}

/* ============================================================
   22. v3 FOOTER CANONICAL [BRAND-OPERATING] (2026-06-10)
   4 variants A/B/C/D mirror page taxonomy:
     A Marketing (premium editorial, 5 layers) — home, dich-vu, goi, nganh, ve-sinh-vu, case
     B Workflow (minimal status strip)        — cua-1, cua-2, brief, tu-van, portal, chinh-sach
     C Admin (internal utility, 1-row)        — admin/dashboard, admin/phong-van, admin/design-system
     D Documentation (timestamp + reference)  — admin/tai-lieu/*, he-thong-in, lo-trinh, mau/*
   Safe namespace: .sv-footer (chưa dùng trong v2.3.1, no conflict)
   ============================================================ */

.sv-footer {
  font-family: var(--sv-font-body);
  background: var(--cua2-bg-paper);
  border-top: 1px solid var(--cua2-border-hair);
  color: var(--cua2-text-secondary);
}
.sv-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}

/* ─── VARIANT MARKETING (premium editorial, 5 layers) ─── */
.sv-footer--marketing {
  padding-block: clamp(48px, 6vw, 80px) 0;
}

/* L1: Brand statement */
.sv-footer__brand {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--cua2-border-hair);
}
.sv-footer__brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  text-decoration: none;
  color: var(--cua2-text-ink);
}
.sv-footer__brand-mark img,
.sv-footer__brand-mark svg {
  height: 28px;
  width: auto;
}
.sv-footer__brand-mark-text {
  font-family: var(--sv-font-heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.sv-footer__brand-tagline {
  font-family: var(--sv-font-display);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--cua2-text-ink);
  margin: 0 0 16px;
  max-width: 540px;
  text-wrap: balance;
}
.sv-footer__brand-tagline em {
  font-style: italic;
  color: var(--sv-color-text-accent);
  font-weight: 700;
}
.sv-footer__brand-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  font-family: var(--sv-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cua2-text-secondary);
  margin: 0 0 24px;
}
.sv-footer__brand-stats span { white-space: nowrap; }
.sv-footer__brand-stats span + span::before {
  content: "·";
  margin-right: 28px;
  color: var(--cua2-text-muted);
}
.sv-footer__brand-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.sv-footer__brand-cta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-family: var(--sv-font-heading);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  min-height: 44px;
  transition: background-color 180ms, color 180ms, transform 180ms, border-color 180ms;
}
.sv-footer__brand-cta a.is-primary {
  background: var(--sv-color-accent-default);
  color: white;
}
.sv-footer__brand-cta a.is-primary:hover {
  background: var(--sv-color-accent-hover);
  transform: translateY(-1px);
  color: white;
}
.sv-footer__brand-cta a:not(.is-primary) {
  color: var(--cua2-text-ink);
  border: 1.5px solid var(--cua2-border-soft);
  background: var(--cua2-bg-raised);
}
.sv-footer__brand-cta a:not(.is-primary):hover {
  border-color: var(--cua2-text-ink);
}

/* L2: 4-column nav */
.sv-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px clamp(20px, 3vw, 48px);
  padding: 40px 0;
  border-bottom: 1px solid var(--cua2-border-hair);
}
.sv-footer__col-eyebrow {
  font-family: var(--sv-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cua2-text-muted);
  margin: 0 0 16px;
}
.sv-footer__col-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sv-footer__col-list a {
  font-family: var(--sv-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cua2-text-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
  transition: color 150ms, border-color 150ms;
}
.sv-footer__col-list a:hover {
  color: var(--cua2-text-ink);
  border-bottom-color: var(--sv-color-accent-default);
}

/* L3: Trust signals (text-only, cream tint) */
.sv-footer__trust {
  padding: 24px 0;
  border-bottom: 1px solid var(--cua2-border-hair);
  background: color-mix(in srgb, var(--sv-color-cream-tint) 10%, transparent);
  margin-inline: calc(-1 * clamp(16px, 4vw, 32px));
  padding-inline: clamp(16px, 4vw, 32px);
}
.sv-footer__trust-eyebrow {
  font-family: var(--sv-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cua2-text-muted);
  margin-bottom: 12px;
  text-align: center;
}
.sv-footer__trust-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 28px;
  font-family: var(--sv-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cua2-text-ink) 60%, transparent);
}
.sv-footer__trust-list span { white-space: nowrap; }

/* L4: Legal info + 3 pillars */
.sv-footer__legal {
  padding: 32px 0 24px;
  border-bottom: 1px solid var(--cua2-border-hair);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
}
.sv-footer__pillars {
  font-family: var(--sv-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sv-color-text-accent);
}
.sv-footer__legal-info {
  font-family: var(--sv-font-body);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--cua2-text-muted);
  max-width: 720px;
}

/* L5: Bottom strip */
.sv-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0 24px;
  flex-wrap: wrap;
  font-family: var(--sv-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--cua2-text-muted);
}
.sv-footer__bottom-links {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.sv-footer__bottom-links a {
  color: var(--cua2-text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 150ms, border-color 150ms;
}
.sv-footer__bottom-links a:hover {
  color: var(--cua2-text-ink);
  border-bottom-color: var(--cua2-text-ink);
}

/* Mobile responsive Marketing footer */
@media (max-width: 820px) {
  .sv-footer__nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }
  .sv-footer__brand-tagline {
    font-size: clamp(18px, 4vw, 22px);
  }
  .sv-footer__bottom {
    flex-direction: column;
    text-align: center;
  }
  .sv-footer__brand-stats span + span::before {
    margin-right: 16px;
  }
}

/* ─── VARIANT WORKFLOW (minimal focus) ─── */
.sv-footer--workflow {
  padding-block: 20px;
  border-top: 1px solid var(--cua2-border-hair) !important;
  background: var(--cua2-bg-paper) !important;
}
.sv-footer--workflow .sv-footer-inner {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.sv-footer__workflow-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sv-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--cua2-text-secondary);
}
.sv-footer__workflow-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sv-color-feedback-success);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sv-color-feedback-success) 16%, transparent);
  animation: svFooterStatusPulse 2400ms ease-in-out infinite;
}
@keyframes svFooterStatusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.sv-footer__workflow-assurance {
  font-family: var(--sv-font-body);
  font-size: 12px;
  color: var(--cua2-text-muted);
  font-style: italic;
}
.sv-footer__workflow-back {
  font-family: var(--sv-font-heading);
  font-size: 13px;
  font-weight: 500;
  color: var(--cua2-text-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--cua2-border-soft);
  transition: border-color 150ms;
}
.sv-footer__workflow-back:hover {
  border-bottom-color: var(--cua2-text-ink);
}

@media (max-width: 600px) {
  .sv-footer--workflow .sv-footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
}

/* ─── VARIANT ADMIN (internal utility, 1-row) ─── */
.sv-footer--admin {
  padding-block: 14px;
  border-top: 1px solid var(--cua2-border-hair);
  background: var(--cua2-bg-paper);
}
.sv-footer--admin .sv-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.sv-footer__admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  font-family: var(--sv-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--cua2-text-secondary);
  background: color-mix(in srgb, var(--sv-color-cream-tint) 18%, transparent);
  border: 1px solid var(--cua2-border-soft);
  border-radius: 4px;
  text-transform: uppercase;
}
.sv-footer__admin-meta {
  font-family: var(--sv-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--cua2-text-muted);
}
.sv-footer__admin-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.sv-footer__admin-nav a {
  font-family: var(--sv-font-heading);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--cua2-text-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 150ms, border-color 150ms;
}
.sv-footer__admin-nav a:hover {
  color: var(--cua2-text-ink);
  border-bottom-color: var(--cua2-border-soft);
}
.sv-footer__admin-exit {
  color: var(--cua2-text-ink) !important;
  font-weight: 600 !important;
}

@media (max-width: 600px) {
  .sv-footer--admin .sv-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .sv-footer__admin-nav {
    gap: 14px;
  }
}

/* ─── VARIANT DOCUMENTATION (timestamp + reference nav) ─── */
.sv-footer--docs {
  padding-block: 28px 24px;
  border-top: 1px solid var(--cua2-border-hair);
  background: var(--cua2-bg-paper);
  text-align: center;
}
.sv-footer__docs-label {
  font-family: var(--sv-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cua2-text-secondary);
  margin: 0 0 10px;
}
.sv-footer__docs-meta {
  font-family: var(--sv-font-body);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--cua2-text-muted);
  margin: 0 0 14px;
}
.sv-footer__docs-meta time {
  font-family: var(--sv-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--cua2-text-secondary);
}
.sv-footer__docs-sep {
  margin: 0 10px;
  color: var(--cua2-text-muted);
}
.sv-footer__docs-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.sv-footer__docs-nav a {
  font-family: var(--sv-font-heading);
  font-size: 13px;
  font-weight: 500;
  color: var(--cua2-text-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--cua2-border-soft);
  padding-bottom: 2px;
  transition: border-color 150ms, color 150ms;
}
.sv-footer__docs-nav a:hover {
  border-bottom-color: var(--cua2-text-ink);
  color: var(--cua2-text-ink);
}

@media (max-width: 600px) {
  .sv-footer__docs-nav {
    flex-direction: column;
    gap: 10px;
  }
  .sv-footer__docs-sep { display: none; }
  .sv-footer__docs-meta time { display: block; margin-bottom: 2px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sv-footer__workflow-status::before { animation: none; }
  .sv-footer__brand-cta a:hover { transform: none; }
}