/* SAPAMEFA V9.3 — Ruleset SAPAI-GOV-002 v2.0 — canonical three-layer token source. */
/*
  BREAKPOINT CONTRACT (media-query literals remain explicit because CSS custom properties
  are not valid in @media conditions):
  compact-small: max 389px / compact: max 639px / min 640px
  mobile:  max 767px / tablet min 768px
  tablet:  max 1023px / desktop min 1024px
  desktop: max 1179px / wide min 1180px
  shell:   max 1279px / large min 1280px
  Component-only breakpoints must be documented in the component stylesheet.
*/

:root {
  /* ================================================================
     T1 — FOUNDATION
     Raw brand, neutral, type, spacing, radius, motion and layer values.
     Route styles must prefer T2 semantic or T3 component tokens when available.
     ================================================================ */

  /* Brand palette */
  --smf-color-deep: #083c4c;
  --smf-color-dark: #03232e;
  --smf-color-teal: #0a99b6;
  --smf-color-aqua: #00bdcc;
  --smf-color-bright: #10f5ff;
  --smf-color-light: #f0fbfd;
  --smf-color-topbar: #076d7e;
  --smf-color-white: #ffffff;
  --smf-color-transparent: transparent;

  /* Transparency scale */
  --smf-color-white-08: rgba(255, 255, 255, 0.08);
  --smf-color-white-14: rgba(255, 255, 255, 0.14);
  --smf-color-white-24: rgba(255, 255, 255, 0.24);
  --smf-color-white-40: rgba(255, 255, 255, 0.40);
  --smf-color-white-68: rgba(255, 255, 255, 0.68);
  --smf-color-white-82: rgba(255, 255, 255, 0.82);
  --smf-color-white-92: rgba(255, 255, 255, 0.92);
  --smf-color-dark-62: rgba(3, 35, 46, 0.62);
  --smf-color-dark-78: rgba(3, 35, 46, 0.78);
  --smf-color-dark-92: rgba(3, 35, 46, 0.92);
  --smf-color-deep-62: rgba(8, 60, 76, 0.62);
  --smf-color-deep-78: rgba(8, 60, 76, 0.78);
  --smf-color-deep-92: rgba(8, 60, 76, 0.92);
  --smf-color-teal-10: rgba(10, 153, 182, 0.10);
  --smf-color-teal-28: rgba(10, 153, 182, 0.28);
  --smf-color-teal-42: rgba(10, 153, 182, 0.42);
  --smf-color-teal-52: rgba(10, 153, 182, 0.52);
  --smf-color-bright-10: rgba(16, 245, 255, 0.10);
  --smf-color-bright-18: rgba(16, 245, 255, 0.18);
  --smf-color-bright-50: rgba(16, 245, 255, 0.50);
  --smf-color-bright-72: rgba(16, 245, 255, 0.72);
  --smf-color-overlay: rgba(0, 0, 0, 0.92);
  --smf-color-overlay-strong: rgba(0, 0, 0, 0.95);

  /* Neutral palette */
  --smf-neutral-950: #0f172a;
  --smf-neutral-900: #172033;
  --smf-neutral-800: #1e293b;
  --smf-neutral-700: #334155;
  --smf-neutral-600: #475569;
  --smf-neutral-500: #64748b;
  --smf-neutral-400: #94a3b8;
  --smf-neutral-300: #cbd5e1;
  --smf-neutral-200: #e2e8f0;
  --smf-neutral-100: #f1f5f9;
  --smf-neutral-50: #f8fafc;

  /* Status palette */
  --smf-color-success: #15803d;
  --smf-color-success-soft: #ecfdf5;
  --smf-color-warning: #b45309;
  --smf-color-warning-soft: #fffbeb;
  --smf-color-error: #b91c1c;
  --smf-color-error-soft: #fef2f2;
  --smf-color-info: #0369a1;
  --smf-color-info-soft: #f0f9ff;

  /* Raw typography scale */
  --smf-font-sans:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  --smf-font-family-base: var(--smf-font-sans);

  /* ----------------------------------------------------------------
     SAPAMEFA_V3.40 — CANONICAL 9-LEVEL FONT-SIZE SCALE.
     This is the single source of typography size for the entire site.
     ---------------------------------------------------------------- */
  --smf-type-2xs: 0.6875rem;   /* 11px */
  --smf-type-xs: 0.75rem;      /* 12px */
  --smf-type-sm: 0.875rem;     /* 14px */
  --smf-type-md: 1rem;         /* 16px */
  --smf-type-lead: 1.125rem;   /* 18px */
  --smf-type-lg: 1.25rem;      /* 20px */
  --smf-type-xl: 1.5rem;       /* 24px */
  --smf-type-section: clamp(1.75rem, 3vw, 2.25rem);  /* 28-36px */
  --smf-type-display: clamp(2rem, 4.5vw, 3.5rem);    /* 32-56px */

  /* Legacy raw aliases — each resolves to exactly one of the 9 canonical
     sizes above; no alias carries a distinct value of its own. */
  --smf-font-size-2xs: var(--smf-type-2xs);
  --smf-font-size-xs: var(--smf-type-xs);
  --smf-font-size-sm: var(--smf-type-sm);
  --smf-font-size-md: var(--smf-type-md);
  --smf-font-size-base: var(--smf-type-md);
  --smf-font-size-lg: var(--smf-type-lead);
  --smf-font-size-xl: var(--smf-type-lg);
  --smf-font-size-2xl: var(--smf-type-xl);
  --smf-font-size-3xl: var(--smf-type-display);
  --smf-font-size-4xl: var(--smf-type-display);
  --smf-font-size-5xl: var(--smf-type-display);

  /* Font weight — 400/500/600/700 only, weight 800 removed. */
  --smf-font-weight-regular: 400;
  --smf-font-weight-medium: 500;
  --smf-font-weight-semibold: 600;
  --smf-font-weight-bold: 700;
  --smf-weight-regular: var(--smf-font-weight-regular);
  --smf-weight-medium: var(--smf-font-weight-medium);
  --smf-weight-semibold: var(--smf-font-weight-semibold);
  --smf-weight-bold: var(--smf-font-weight-bold);

  /* Canonical line-height scale (unitless). */
  --smf-line-display: 1.20;
  --smf-line-section: 1.30;
  --smf-line-title: 1.40;
  --smf-line-control: 1.40;
  --smf-line-compact: 1.50;
  --smf-line-note: 1.55;
  --smf-line-lead: 1.60;
  --smf-line-body: 1.65;
  /* Legacy line-height aliases. */
  --smf-line-tight: var(--smf-line-display);
  --smf-line-heading: var(--smf-line-title);

  /* Canonical letter-spacing scale. */
  --smf-tracking-display: -0.015em;
  --smf-tracking-section: -0.01em;
  --smf-tracking-normal: 0;
  --smf-tracking-control: 0.02em;
  --smf-tracking-button: 0.04em;
  --smf-tracking-eyebrow: 0.10em;
  /* Legacy tracking aliases. */
  --smf-tracking-tight: var(--smf-tracking-display);
  --smf-tracking-wide: var(--smf-tracking-button);

  /* Raw containers
     HIEU-CHINH-05 — SAPAISHOP-GEOMETRY: two-layer container hierarchy
     verified from sapaishop.vn(1).har (see 03-EVIDENCE/HAR-EXTRACTION).
     Outer/global page shell still has NO max-width (100% viewport; see body
     rule in sapamefa-core.css).
     LAYER 1 — VISUAL (fluid, full-bleed rails/banners/media): capped at
     --smf-container-visual (1920px, matches SAPAISHOP .container-fluid /
     .width_limitation), used only by homepage visual/card sections.
     LAYER 2 — STANDARD (text/nav/shared-shell content): --smf-container-content
     is back to a responsive stepped value (matches SAPAISHOP .container
     breakpoints exactly), shared by header/nav/footer/most page content via
     the shell/wide aliases below.
     --smf-campaign-hero-inner-max is Hero's OWN frozen token, independent of
     both layers above (Hero is styled by ratio/frame directly, not by this
     content axis) — kept from HIEU-CHINH-03/04 for any residual consumer. */
  --smf-container-visual: 1920px;
  --smf-page-max-width: 1440px;
  --smf-page-gutter-desktop: 30px;
  --smf-page-gutter-tablet: 24px;
  --smf-page-gutter-mobile: 16px;
  --smf-container-content: var(--smf-page-max-width);
  --smf-container-shell: var(--smf-container-content);
  --smf-container-wide: var(--smf-container-content);
  --smf-container-editorial-shell: var(--smf-container-content);
  --smf-container-editorial-reading: var(--smf-container-content);
  --smf-campaign-hero-inner-max: 1440px;

  /* Raw spacing scale */
  --smf-space-1: 4px;
  --smf-space-2: 8px;
  --smf-space-3: 12px;
  --smf-space-4: 16px;
  --smf-space-5: 20px;
  --smf-space-6: 24px;
  --smf-space-7: 28px;
  --smf-space-8: 32px;
  --smf-space-10: 40px;
  --smf-space-12: 48px;
  --smf-space-14: 56px;
  --smf-space-16: 64px;
  --smf-space-18: 72px;
  --smf-space-20: 80px;
  --smf-space-24: 96px;

  /* Raw radius scale */
  --smf-radius-none: 0;
  --smf-radius-small: 8px;
  --smf-radius-control: 12px;
  --smf-radius-card: 18px;
  --smf-radius-feature: 24px;
  --smf-radius-pill: 999px;

  /* Raw border and focus widths */
  --smf-border-width-hairline: 1px;
  --smf-border-width-strong: 2px;
  --smf-border-width-emphasis: 3px;
  --smf-border-width-accent: 4px;
  --smf-border-width-heavy: 5px;

  /* Raw elevation — SAPAMEFA V9 uses a flat interface by default. */
  --smf-shadow-none: none;

  /* Raw breakpoint registry. Media queries repeat these values explicitly. */
  --smf-breakpoint-compact: 640px;
  --smf-breakpoint-compact-small: 390px;
  --smf-breakpoint-mobile: 768px;
  --smf-breakpoint-tablet: 1024px;
  --smf-breakpoint-wide: 1180px;
  --smf-breakpoint-shell: 1280px;

  /* Raw motion */
  --smf-motion-fast: 180ms;
  --smf-motion-control: 250ms;
  --smf-motion-image: 600ms;
  --smf-motion-slow: 900ms;
  --smf-motion-reveal: 800ms;
  --smf-ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --smf-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --smf-ease: var(--smf-ease-standard);

  /* Raw layer scale */
  --smf-z-topbar: 900;
  --smf-z-header: 1000;
  --smf-z-dropdown: 1020;
  --smf-z-overlay: 1100;
  --smf-z-modal: 1200;
  --smf-z-toast: 1300;

  /* ================================================================
     T2 — SEMANTIC
     Role-based values shared by routes and components.
     ================================================================ */

  /* Semantic text and surfaces */
  --smf-color-text-strong: var(--smf-color-dark);
  --smf-color-editorial-text: var(--smf-color-dark);
  --smf-color-text-on-dark: var(--smf-color-white);
  --smf-color-brand-teal: var(--smf-color-teal);
  --smf-color-accent-on-dark: var(--smf-color-bright);
  --smf-color-status-success: var(--smf-color-success);
  --smf-color-brand-hover: #087c94;
  --smf-color-brand-active: #08768d;
  --smf-color-text: var(--smf-neutral-700);
  --smf-color-text-muted: #546971;
  --smf-color-text-subtle: var(--smf-neutral-400);
  --smf-color-link: var(--smf-color-teal);
  --smf-color-link-hover: var(--smf-color-deep);
  --smf-color-border: var(--smf-neutral-200);
  --smf-color-border-soft: var(--smf-neutral-100);
  --smf-color-border-strong: var(--smf-neutral-300);
  --smf-color-surface: var(--smf-color-white);
  --smf-color-surface-soft: var(--smf-neutral-50);
  --smf-color-surface-placeholder: var(--smf-neutral-100);
  --smf-color-surface-disabled: var(--smf-neutral-200);
  --smf-color-surface-brand: var(--smf-color-light);
  --smf-color-on-dark: var(--smf-color-white-92);
  --smf-color-on-dark-muted: var(--smf-color-white-68);
  --smf-color-on-dark-line: var(--smf-color-white-14);
  --smf-color-focus: var(--smf-color-bright);

  /* Semantic gradients */
  --smf-gradient-brand: linear-gradient(135deg, var(--smf-color-teal), var(--smf-color-aqua));
  --smf-gradient-brand-bright: linear-gradient(135deg, var(--smf-color-teal), var(--smf-color-bright));
  --smf-gradient-brand-horizontal: linear-gradient(90deg, var(--smf-color-teal), var(--smf-color-aqua));
  --smf-gradient-brand-vertical: linear-gradient(180deg, var(--smf-color-aqua), var(--smf-color-teal));
  --smf-gradient-brand-down: linear-gradient(180deg, var(--smf-color-teal), var(--smf-color-aqua));
  --smf-gradient-brand-highlight: linear-gradient(90deg, var(--smf-color-teal), var(--smf-color-bright));
  --smf-gradient-dark: linear-gradient(135deg, var(--smf-color-deep), var(--smf-color-dark));
  --smf-gradient-dark-topbar: linear-gradient(145deg, var(--smf-color-deep), var(--smf-color-topbar));
  --smf-gradient-dark-elevated: linear-gradient(145deg, var(--smf-color-deep), var(--smf-color-dark));
  --smf-gradient-surface: linear-gradient(135deg, var(--smf-color-surface-soft), var(--smf-color-surface-brand));
  --smf-gradient-overlay-horizontal: linear-gradient(90deg, var(--smf-color-dark-92), var(--smf-color-dark-78), var(--smf-color-dark-62));
  --smf-gradient-hero-glow: radial-gradient(circle at 50% 20%, var(--smf-color-bright-18), var(--smf-color-transparent) 48%);
  --smf-gradient-hero-glow-high: radial-gradient(circle at 50% 15%, var(--smf-color-bright-18), var(--smf-color-transparent) 50%);
  --smf-gradient-error-glow: radial-gradient(circle at 50% 20%, var(--smf-color-bright-18), var(--smf-color-transparent) 40%);
  --smf-gradient-error-orbit: radial-gradient(circle at 34% 28%, var(--smf-color-white-24), var(--smf-color-transparent) 24%), linear-gradient(180deg, var(--smf-color-bright-72) 0%, var(--smf-color-bright-72) 100%);
  --smf-gradient-chevron: linear-gradient(45deg, var(--smf-color-transparent) 50%, var(--smf-color-deep-78) 50%), linear-gradient(135deg, var(--smf-color-deep-78) 50%, var(--smf-color-transparent) 50%);
  --smf-background-grid-subtle: linear-gradient(var(--smf-color-white-08) var(--smf-border-width-hairline), var(--smf-color-transparent) var(--smf-border-width-hairline)), linear-gradient(90deg, var(--smf-color-white-08) var(--smf-border-width-hairline), var(--smf-color-transparent) var(--smf-border-width-hairline));
  --smf-background-grid-brand: linear-gradient(to right, var(--smf-color-white-40) var(--smf-border-width-hairline), var(--smf-color-transparent) var(--smf-border-width-hairline)), linear-gradient(to bottom, var(--smf-color-white-40) var(--smf-border-width-hairline), var(--smf-color-transparent) var(--smf-border-width-hairline));

  /* Semantic typography roles — mapped to the canonical 9-level scale.
     H1/product/article/campaign titles collapse onto the single
     TYPE-DISPLAY clamp; H2/section variants collapse onto TYPE-SECTION;
     per contract 14.3 no other local title clamp is permitted. */
  --smf-type-eyebrow-size: var(--smf-type-2xs);
  --smf-type-eyebrow-weight: var(--smf-font-weight-bold);
  --smf-type-eyebrow-line: var(--smf-line-title);
  --smf-type-eyebrow-tracking: var(--smf-tracking-eyebrow);
  --smf-type-eyebrow-transform: uppercase;

  --smf-type-meta-size: var(--smf-type-xs);
  --smf-type-meta-weight: var(--smf-font-weight-medium);
  --smf-type-meta-line: var(--smf-line-compact);

  --smf-type-body-size: var(--smf-type-md);
  --smf-type-body-weight: var(--smf-font-weight-regular);
  --smf-type-body-line: var(--smf-line-body);

  --smf-type-reading-size: var(--smf-type-lead);
  --smf-type-reading-weight: var(--smf-font-weight-regular);
  --smf-type-reading-line: var(--smf-line-lead);

  --smf-type-card-title-size: var(--smf-type-lg);
  --smf-type-card-title-weight: var(--smf-font-weight-semibold);
  --smf-type-card-title-line: var(--smf-line-title);
  --smf-type-product-card-title-size: var(--smf-type-lg);
  --smf-type-news-card-title-size: var(--smf-type-lg);
  --smf-type-news-featured-title-size: var(--smf-type-xl);
  --smf-type-form-title-size: var(--smf-type-xl);
  --smf-type-feature-card-title-size: var(--smf-type-lg);

  --smf-type-subheading-size: var(--smf-type-xl);
  --smf-type-subheading-weight: var(--smf-font-weight-semibold);
  --smf-type-subheading-line: var(--smf-line-title);

  --smf-type-page-title-size: var(--smf-type-display);
  --smf-type-page-title-mobile-size: var(--smf-type-display);
  --smf-type-page-title-weight: var(--smf-font-weight-bold);
  --smf-type-page-title-line: var(--smf-line-display);
  --smf-type-page-title-tracking: var(--smf-tracking-display);

  --smf-type-product-title-size: var(--smf-type-display);
  --smf-type-article-title-size: var(--smf-type-display);
  --smf-type-campaign-title-size: var(--smf-type-display);
  --smf-type-campaign-title-mobile-size: var(--smf-type-display);
  --smf-type-feature-title-size: var(--smf-type-section);
  --smf-type-compact-title-size: var(--smf-type-xl);
  --smf-type-lead-size: var(--smf-type-lead);
  --smf-type-section-title-size: var(--smf-type-display);
  --smf-type-section-title-compact-size: var(--smf-type-display);
  --smf-type-section-title-row-size: var(--smf-type-display);
  --smf-type-section-title-weight: var(--smf-font-weight-bold);
  --smf-type-section-title-line: var(--smf-line-display);
  --smf-type-section-title-tracking: var(--smf-tracking-display);

  /* SAPAMEFA_V3.42 — approved semantic content roles. */
  --smf-role-section-heading-size: var(--smf-type-display);
  --smf-role-section-description-size: var(--smf-type-lead);
  --smf-role-card-title-size: var(--smf-type-lg);
  --smf-role-card-description-size: var(--smf-type-lead);
  --smf-role-component-title-size: var(--smf-type-xl);
  --smf-role-control-text-size: var(--smf-type-md);
  --smf-role-label-size: var(--smf-type-sm);
  --smf-role-note-size: var(--smf-type-sm);
  --smf-role-privacy-size: var(--smf-type-xs);
  --smf-role-primary-button-size: var(--smf-type-md);

  /* Semantic layout */
  --smf-gutter: 15px;
  --smf-section-compact: 56px;
  --smf-section-standard: 78px;
  --smf-section-large: 96px;
  --smf-content-measure: 76ch;
  --smf-heading-measure: 26ch;
  --smf-summary-measure: 62ch;
  --smf-touch-target: 44px;
  --smf-card-title-lines: 2;
  --smf-card-summary-lines: 3;

  /* Semantic borders and focus */
  --smf-border-default: var(--smf-border-width-hairline) solid var(--smf-color-border);
  --smf-border-soft: var(--smf-border-width-hairline) solid var(--smf-color-border-soft);
  --smf-focus-ring: var(--smf-border-width-strong) solid var(--smf-color-focus);
  --smf-focus-ring-soft: var(--smf-border-width-strong) solid var(--smf-color-bright-72);
  --smf-focus-ring-strong: var(--smf-border-width-emphasis) solid var(--smf-color-focus);
  --smf-focus-offset: 3px;
  --smf-elevation-flat: var(--smf-shadow-none);

  /* ================================================================
     T3 — COMPONENT
     Contracts for shared components. Route selectors may consume these
     but must not redefine their values locally.
     ================================================================ */

  /* Shell dimensions and surfaces */
  --smf-height-topbar: 42px;
  --smf-height-header-mobile: 68px;
  --smf-height-header-tablet: 76px;
  --smf-height-header-desktop: 94px;
  --smf-surface-header: rgba(8, 60, 76, 0.97);
  --smf-surface-footer: var(--smf-color-dark);
  --smf-color-footer-accent: var(--smf-color-teal);

  /* Breadcrumb */
  --smf-height-breadcrumb: 46px;
  --smf-breadcrumb-font-size: var(--smf-type-meta-size);
  --smf-breadcrumb-font-weight: var(--smf-type-meta-weight);
  --smf-breadcrumb-line-height: var(--smf-type-meta-line);

  /* Page hero */
  --smf-height-page-hero: 300px;
  --smf-height-page-hero-mobile: 270px;
  --smf-page-hero-title-max-width: 1040px;
  --smf-page-hero-description-max-width: 600px;
  /* Reserves a stable two-line box for the CONTENT description regardless of
     actual line count, expressed in em so it tracks the element's own
     font-size at each breakpoint (no per-breakpoint pixel hard-coding). */
  --smf-page-hero-description-min-block-size: calc(var(--smf-type-body-line) * 2em);
  /* Unified responsive H1 scale — one clamp per breakpoint tier, shared by every
     non-home banner variant (PRODUCT/CONTENT). Desktop ~52-56px, tablet ~40-46px,
     mobile ~30-36px at the tested viewports (320/375/768/1024/1280/1440). */
  --smf-page-hero-title-size: var(--smf-type-display);
  --smf-page-hero-title-tablet-size: var(--smf-type-display);
  --smf-page-hero-title-mobile-size: var(--smf-type-display);
  --smf-page-hero-title-weight: var(--smf-type-page-title-weight);
  --smf-page-hero-title-line: var(--smf-type-page-title-line);
  --smf-page-hero-title-tracking: var(--smf-type-page-title-tracking);
  --smf-page-hero-padding-block: var(--smf-space-12);
  --smf-page-hero-padding-block-mobile: var(--smf-space-10);
  --smf-page-hero-grid-size: 44px;
  --smf-page-hero-grid-opacity: 0.12;
  --smf-page-hero-breadcrumb-inset-block: 20px;
  --smf-page-hero-breadcrumb-inset-block-mobile: 15px;

  /* Hero breadcrumb accent hierarchy — reuses the former eyebrow bright token. */
  --smf-hero-breadcrumb-link-color: var(--smf-color-bright-72);
  --smf-hero-breadcrumb-link-hover-color: var(--smf-color-bright);
  --smf-hero-breadcrumb-separator-color: var(--smf-color-bright-50);
  --smf-hero-breadcrumb-current-color: var(--smf-color-bright);

  /* Campaign hero */
  --smf-campaign-hero-ratio-mobile: 1 / 1;
  --smf-campaign-hero-ratio-tablet: 3 / 2;
  --smf-campaign-hero-ratio-desktop: 3 / 1;
  --smf-campaign-hero-panel-width: 672px;
  --smf-campaign-hero-panel-width-tablet: 544px;
  --smf-campaign-hero-title-tablet-size: var(--smf-font-size-3xl);
  --smf-campaign-hero-panel-blur: 18px;
  --smf-campaign-hero-description-width: 560px;
  --smf-campaign-hero-glow-size: 144px;
  --smf-campaign-hero-glow-offset: 64px;
  --smf-campaign-hero-glow-blur: 32px;
  --smf-campaign-hero-nav-size: 44px;
  --smf-campaign-hero-nav-inset: var(--smf-space-4);
  --smf-campaign-hero-nav-inset-desktop: var(--smf-space-8);
  --smf-campaign-hero-dot-width: 12px;
  --smf-campaign-hero-dot-active-width: 32px;
  --smf-campaign-hero-dot-height: 4px;
  --smf-campaign-hero-pause-size: 28px;
  --smf-campaign-hero-enter-duration: 1450ms;
  --smf-campaign-hero-fade-duration: 1100ms;
  --smf-campaign-hero-content-duration: 950ms;
  --smf-campaign-hero-pulse-duration: 1800ms;
  --smf-campaign-hero-exit-ease: cubic-bezier(0.55, 0, 1, 0.45);
  --smf-campaign-hero-exit-x: -110px;
  --smf-campaign-hero-exit-x-reverse: 110px;
  --smf-campaign-hero-content-swap-delay: 740ms;
  --smf-campaign-hero-enter-y: 78vh;
  --smf-campaign-hero-content-y: 56px;
  --smf-campaign-hero-content-exit-y: 18px;
  --smf-campaign-hero-delay-description: 940ms;
  --smf-campaign-hero-delay-actions: 1100ms;
  --smf-campaign-hero-delay-controls: 1260ms;
  --smf-campaign-hero-tag-padding-block: 6px;
  --smf-campaign-hero-tag-padding-inline: var(--smf-space-3);
  --smf-campaign-hero-pulse-size: 6px;
  --smf-campaign-hero-progress-gap: 10px;
  --smf-campaign-hero-nav-icon-width: 16px;
  --smf-campaign-hero-nav-icon-height: 20px;
  --smf-campaign-hero-nav-hover-scale: 1.04;
  --smf-campaign-hero-mobile-tag-margin: 10px;
  --smf-campaign-hero-mobile-tag-padding-block: 5px;
  --smf-campaign-hero-mobile-tag-padding-inline: 10px;
  --smf-campaign-hero-mobile-title-margin: 11px;
  --smf-campaign-hero-mobile-content-margin: 14px;
  --smf-campaign-hero-mobile-button-height: 40px;

  /* Section heading */
  --smf-section-heading-max-width: 790px;
  --smf-section-heading-wide-max-width: 840px;
  --smf-section-heading-title-size: var(--smf-type-section-title-size);
  --smf-section-heading-compact-size: var(--smf-type-section-title-compact-size);
  --smf-section-heading-row-size: var(--smf-type-section-title-row-size);

  /* Feature band */
  --smf-feature-band-min-height: 350px;
  --smf-feature-band-min-height-large: 360px;
  --smf-feature-band-min-height-compact: 390px;
  --smf-feature-band-min-height-compact-large: 410px;
  --smf-feature-band-padding-block: 70px;
  --smf-feature-band-content-max-width: 720px;
  --smf-feature-band-content-max-width-narrow: 700px;
  --smf-feature-band-heading-margin: 10px 0 14px;
  --smf-feature-band-actions-gap: var(--smf-space-3);
  --smf-feature-band-button-gap: 9px;
  --smf-feature-band-button-height: var(--smf-height-control);

  /* Shared inquiry-form surfaces and button roles. */
  --smf-project-inquiry-form-surface: var(--smf-color-dark);
  --smf-project-inquiry-input-surface: var(--smf-color-white);
  --smf-button-primary-background: var(--smf-color-brand-teal);
  --smf-button-primary-text: var(--smf-color-text-on-dark);
  --smf-button-brand-background: var(--smf-color-brand-teal);
  --smf-button-brand-text: var(--smf-color-text-strong);
  --smf-button-brand-hover-background: var(--smf-color-brand-hover);
  --smf-button-brand-hover-text: var(--smf-color-text-on-dark);
  --smf-button-brand-active-background: var(--smf-color-brand-active);
  --smf-button-brand-active-text: var(--smf-color-text-on-dark);

  /* Controls and buttons */
  --smf-height-control: 46px;
  --smf-height-control-large: 56px;
  --smf-button-font-size: var(--smf-type-sm);
  --smf-button-font-weight: var(--smf-font-weight-semibold);
  --smf-button-line-height: var(--smf-line-title);
  --smf-button-tracking: var(--smf-tracking-button);
  --smf-button-transform: uppercase;
  --smf-button-gradient: var(--smf-color-brand-teal);

  /* Cards and media */
  --smf-radius-media: var(--smf-radius-feature);
  --smf-card-border: var(--smf-border-default);
  --smf-gallery-divider-size: var(--smf-border-width-hairline);
  --smf-gallery-divider-color: var(--smf-color-border);

  /* Error page. --smf-error-code-size is the "404" numeral heading; it
     consumes the canonical Display role like every other page-title token. */
  --smf-error-code-size: var(--smf-type-display);
  --smf-error-title-size: var(--smf-type-display);

  /* Advisor */
  --smf-advisor-section-padding: var(--smf-space-10);
  --smf-advisor-section-padding-mobile: var(--smf-space-8);
  --smf-advisor-card-min-height: 164px;
  --smf-advisor-card-gap: var(--smf-space-4);

  /* Ecosystem carousel */
  --smf-ecosystem-item-min-height: 95px;
  --smf-ecosystem-logo-height: 40px;

  /* Footer */
  --smf-footer-link-min-height: 34px;
}

@media (max-width: 1023px) {
  :root {
    --smf-section-compact: 48px;
    --smf-section-standard: 64px;
    --smf-section-large: 80px;
  }
}

@media (max-width: 639px) {
  :root {
    --smf-section-compact: 40px;
    --smf-section-standard: 56px;
    --smf-section-large: 72px;
  }
}

/* ================================================================
   ECOSYSTEM WIDTH CONTRACT — THU-NGHIEM-GIAO-DIEN (toàn website)
   Single canonical source for --smf-container-content (STANDARD layer,
   responsive, restored to match SAPAISHOP .container breakpoints exactly)
   and --smf-campaign-hero-inner-max (Hero's own frozen cascade, unchanged
   since HIEU-CHINH-03). --smf-gutter is now a HAR-verified flat 15px (see
   T2 semantic layout above) and no longer varies by breakpoint — SAPAISHOP's
   .container-fluid uses the same fixed 15px at every viewport. Breakpoints
   below are the locked contract values and intentionally do not reuse the
   T1 breakpoint registry above. --smf-container-visual (1920px, VISUAL
   layer) is a flat cap and needs no override — it fluid-shrinks via
   calc(100% - gutter*2) like everything else below its cap.
   ================================================================ */
/* Home-only legacy responsive container steps. Non-home routes remain on the
   canonical 1440px fluid page contract and use responsive gutters instead. */
body.sapamefa-layout--home {
  --smf-container-shell: var(--smf-container-content);
  --smf-container-wide: var(--smf-container-content);
}
@media (max-width: 1499px) {
  body.sapamefa-layout--home {
    --smf-container-content: 1370px;
    --smf-campaign-hero-inner-max: 1370px;
  }
}
@media (max-width: 1299px) {
  body.sapamefa-layout--home {
    --smf-container-content: 1140px;
    --smf-campaign-hero-inner-max: 1140px;
  }
}
@media (max-width: 1199px) {
  body.sapamefa-layout--home {
    --smf-container-content: 960px;
    --smf-campaign-hero-inner-max: 960px;
  }
}
@media (max-width: 991px) {
  body.sapamefa-layout--home {
    --smf-container-content: 720px;
    --smf-campaign-hero-inner-max: 720px;
  }
}
@media (max-width: 767px) {
  body.sapamefa-layout--home {
    --smf-container-content: 540px;
    --smf-campaign-hero-inner-max: 540px;
  }
}
@media (max-width: 575px) {
  body.sapamefa-layout--home {
    --smf-container-content: 100%;
    --smf-campaign-hero-inner-max: 100%;
  }
}