/* legacy-kit.css — CSS tùy chỉnh của Elementor Kit 28192 (Site Settings › Custom CSS, tính năng Elementor Pro),
   chép NGUYÊN VĂN từ live 03/10/2026 để gỡ Pro không mất (DS v1.1 cũ: token --tkt-*, @font-face, @import font).
   Chỉ nạp khi Elementor Pro TẮT (inc/assets.php) — Pro bật thì Kit tự in. Xoá dần ở T4/T5 khi trang cũ chuyển
   sang template theme. Không sửa tay phần dưới: nguồn = Kit; tạo lại bằng scripts/deploy/release_pro.py kit-css. */
/* ===============================================================
   TKT PUMPS · GLOBAL DESIGN SYSTEM v1.1 (Liquid Glass Light)
   Built: 2026-05-22 · Source: 00_Brand_guideline/TKT Pumps Design System
   Deploy target: Elementor Theme Builder Global ‚Üí Kit 28192 ‚Üí Custom CSS
   Backward-compat: NONE (clean deploy per user decision)
   =============================================================== */

/* ===============================================================
   LAYER 1 · @FONT-FACE — Self-host SVN-Avant Garde Gothic
   4 weight existing t·∫°i /wp-content/uploads/2026/04/ (Book/Medium/Demi/Bold)
   font-display: swap (chống FOIT) + size-adjust giữ CLS < 0.05
   ExtraLight (200) + Italic variants → fallback Jost (có đủ trong Google Fonts)
   =============================================================== */
@font-face {
  font-family: "SVN-Avant Garde Gothic";
  src: url("/wp-content/uploads/2026/04/SVN-Avant-Garde-Gothic-Book.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  size-adjust: 102%;
}
@font-face {
  font-family: "SVN-Avant Garde Gothic";
  src: url("/wp-content/uploads/2026/04/SVN-Avant-Garde-Gothic-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  size-adjust: 102%;
}
@font-face {
  font-family: "SVN-Avant Garde Gothic";
  src: url("/wp-content/uploads/2026/04/SVN-Avant-Garde-Gothic-Demi.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  size-adjust: 102%;
}
@font-face {
  font-family: "SVN-Avant Garde Gothic";
  src: url("/wp-content/uploads/2026/04/SVN-Avant-Garde-Gothic-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  size-adjust: 102%;
}

/* Jost fallback metric-matched (handled by Google Fonts @import inline below)
   Note: ascent-override + size-adjust trên Google Fonts không declare được trực tiếp;
   workaround: dùng size-adjust 102% trên SVN-AGG (đã set) — fallback chain match đủ. */

/* JetBrains Mono + Jost qua Google Fonts (chỉ 2 font này, NOT Inter/Montserrat/Manrope) */
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,200..700;1,200..700&family=JetBrains+Mono:wght@400;500;700&display=swap");


/* ===============================================================
   LAYER 2 · DESIGN TOKENS · LIGHT MODE
   =============================================================== */
:root {
  /* ========== BRAND COLORS ========== */
  /* Blue (Cobalt) scale 050→900 · primary brand ★ #005090 */
  --tkt-blue-900: #001A3D;
  --tkt-blue-800: #002B5C;
  --tkt-blue-700: #003E80;
  --tkt-blue-600: #005090;   /* ‚òÖ PRIMARY BRAND (logo-extracted) */
  --tkt-blue-500: #1A6FB8;
  --tkt-blue-400: #2D8DE0;
  --tkt-blue-300: #5BAEF5;
  --tkt-blue-200: #A8D2F7;
  --tkt-blue-100: #DDEBFA;
  --tkt-blue-050: #F0F6FD;

  /* Amber/Orange scale 300→900 · accent ★ #E07000 */
  --tkt-amber-900: #7A2E00;
  --tkt-amber-800: #A04500;
  --tkt-amber-700: #C05E00;
  --tkt-amber-600: #E07000;   /* ‚òÖ PRIMARY ACCENT (logo-extracted) */
  --tkt-amber-500: #FF8C1F;
  --tkt-amber-400: #FFA040;
  --tkt-amber-300: #FFC380;
  --tkt-amber-050: #FFF3E6;

  /* Legacy aliases (chỉ giữ 2 alias cho name nhất quán) */
  --tkt-orange:        var(--tkt-amber-600);
  --tkt-orange-light:  var(--tkt-amber-500);

  /* ========== LIGHT CANVAS ========== */
  --bg-canvas: #F4F7FB;   /* default page bg */
  --bg-tint:   #EAF1F9;   /* section alt */
  --bg-pure:   #FFFFFF;   /* card pure white */
  --bg-elev:   #FAFCFE;   /* elevated surface */

  /* ========== GLASS TOKENS (light mode) ========== */
  --glass-fill:        rgba(255,255,255,0.62);
  --glass-fill-hi:     rgba(255,255,255,0.82);
  --glass-fill-tint:   rgba(220,235,250,0.55);
  --glass-stroke:      rgba(255,255,255,0.85);
  --glass-stroke-edge: rgba(0,80,144,0.08);
  --glass-spec:        rgba(255,255,255,0.95);
  --glass-shadow:      0 24px 60px -16px rgba(0,40,80,0.18), 0 2px 6px rgba(0,40,80,0.06);

  /* ========== TEXT ========== */
  --fg-1: #0A1A33;                 /* primary text */
  --fg-2: rgba(10,26,51,0.74);     /* secondary */
  --fg-3: rgba(10,26,51,0.54);     /* tertiary */
  --fg-4: rgba(10,26,51,0.36);     /* disabled / muted */

  /* ========== SEMANTIC (chip) ========== */
  --c-crit: #B91C1C;  --c-crit-bg: rgba(220,38,38,0.10);  --c-crit-bd: rgba(220,38,38,0.25);
  --c-warn: #B45309;  --c-warn-bg: rgba(217,119,6,0.10);  --c-warn-bd: rgba(217,119,6,0.25);
  --c-ok:   #0F7A4D;  --c-ok-bg:   rgba(16,138,80,0.10);  --c-ok-bd:   rgba(16,138,80,0.25);
  --c-info: #00427A;  --c-info-bg: rgba(0,80,144,0.10);   --c-info-bd: rgba(0,80,144,0.22);

  /* ========== TYPOGRAPHY ========== */
  --font-display: "SVN-Avant Garde Gothic", "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --font-body:    var(--font-display);
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ========== SPACING (8px grid) ========== */
  --sp-1: 8px;   --sp-2: 16px;  --sp-3: 24px;  --sp-4: 32px;
  --sp-5: 48px;  --sp-6: 64px;  --sp-7: 96px;  --sp-8: 128px;  --sp-9: 192px;

  /* ========== RADIUS ========== */
  --r-xs:   4px;     /* inline tag */
  --r-sm:   6px;     /* chip */
  --r-md:   8px;     /* swatch */
  --r-lg:   12px;    /* small card */
  --r-xl:   18px;    /* product card */
  --r-2xl:  24px;    /* hero glass */
  --r-3xl:  28px;    /* .glass primitive */
  --r-pill: 999px;

  /* ========== CONTAINER MAX-WIDTH (unified, 4 values only) ========== */
  --w-narrow:  720px;
  --w-content: 1080px;
  --w-heading: 1200px;
  --w-wide:    1400px;
}


/* ===============================================================
   LAYER 3 · UNIVERSAL OVERRIDE — Font enforcement
   Defeats Elementor/theme/plugin defaults across ALL selectors
   =============================================================== */
*, ::before, ::after {
  font-family: var(--font-display) !important;
}

/* Mono exception — keep monospace for code/number tokens */
code, kbd, pre, samp, var, .mono, .stat-num, [class*="font-mono"] {
  font-family: var(--font-mono) !important;
}


/* ===============================================================
   LAYER 4 · UNIVERSAL HEADING RULE
   Fix Vietnamese diacritic clipping (Ầ Ề Ữ Ợ Ặ)
   =============================================================== */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.entry-title {
  line-height: 1.12 !important;
  padding-block: 0.14em 0.06em;
  overflow: visible !important;
  text-rendering: optimizeLegibility;
}

/* Hero + section must NOT clip ascenders */
.hero, section, .e-con, .elementor-section, .elementor-widget-container {
  overflow: visible;
}

/* Body baseline */
body {
  font-family: var(--font-display) !important;
  color: var(--fg-1);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01";
}


/* ===============================================================
   LAYER 5 · ELEMENTOR KIT OVERRIDE
   Replace old kit typography (font-weight 900 sai, primary tên cũ)
   =============================================================== */
.elementor-kit-28192 {
  --e-global-color-primary: var(--tkt-blue-600);
  --e-global-color-secondary: var(--tkt-blue-800);
  --e-global-color-text: var(--fg-1);
  --e-global-color-accent: var(--tkt-amber-600);
  --e-global-typography-primary-font-family: "SVN-Avant Garde Gothic";
  --e-global-typography-primary-font-weight: 700;          /* WAS 900 — synthetic-bold risk */
  --e-global-typography-primary-text-transform: none;       /* WAS uppercase — heading thường không cần caps */
  --e-global-typography-primary-letter-spacing: -0.02em;
  --e-global-typography-secondary-font-family: "SVN-Avant Garde Gothic";
  --e-global-typography-secondary-font-weight: 400;
  --e-global-typography-text-font-family: "SVN-Avant Garde Gothic";
  --e-global-typography-text-font-weight: 400;
  --e-global-typography-accent-font-family: "SVN-Avant Garde Gothic";
  --e-global-typography-accent-font-weight: 500;
  font-family: "SVN-Avant Garde Gothic";
}
.elementor-kit-28192 h1,
.elementor-kit-28192 h2,
.elementor-kit-28192 h3,
.elementor-kit-28192 h4,
.elementor-kit-28192 h5,
.elementor-kit-28192 h6,
.elementor-kit-28192 a { font-family: "SVN-Avant Garde Gothic"; }

/* Container max-width unified (was 1380 mixed) */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--w-wide); }
.e-con { --container-max-width: var(--w-wide); }


/* ===============================================================
   LAYER 6 · TYPOGRAPHY SCALE (type ratio 1.250 · major third)
   =============================================================== */
.tkt-h-display { font-weight: 700; font-size: clamp(56px, 8vw, 96px); line-height: 0.98; letter-spacing: -0.035em; color: var(--fg-1); }
.tkt-h-1       { font-weight: 700; font-size: clamp(44px, 6vw, 72px); line-height: 1.06; letter-spacing: -0.025em; color: var(--fg-1); }
.tkt-h-2       { font-weight: 700; font-size: clamp(32px, 4.2vw, 48px); line-height: 1.12; letter-spacing: -0.02em; color: var(--fg-1); }
.tkt-h-3       { font-weight: 600; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2; letter-spacing: -0.01em; color: var(--fg-1); }
.tkt-lede      { font-weight: 400; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.55; color: var(--fg-2); max-width: var(--w-content); }
.tkt-body      { font-weight: 400; font-size: 17px; line-height: 1.6; color: var(--fg-2); }
.tkt-caption   { font-weight: 600; font-size: 13px; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }

/* Gradient text (cobalt → amber) — dùng cho highlight word trong hero */
.tkt-gradient-text {
  background: linear-gradient(90deg, var(--tkt-blue-600) 0%, var(--tkt-amber-600) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}


/* ===============================================================
   LAYER 7 · COMPONENT PRIMITIVES
   =============================================================== */

/* ── .glass — core primitive ── */
.tkt-glass {
  position: relative;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-3xl);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.7);
  overflow: hidden;
}
.tkt-glass::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-spec), transparent);
  pointer-events: none;
}
.tkt-glass::after {
  content: ""; position: absolute; bottom: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,40,80,0.10), transparent);
  pointer-events: none;
}
/* Glass variants */
.tkt-glass--card { border-radius: var(--r-xl); }    /* product card */
.tkt-glass--hero { border-radius: var(--r-2xl); }   /* hero strip */
.tkt-glass--tint { background: var(--glass-fill-tint); }
.tkt-glass--hi   { background: var(--glass-fill-hi); }

/* ── .glass-pill — pill chip (eyebrow / status / nav item) ── */
.tkt-glass-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  background: var(--glass-fill);
  border: 1px solid var(--glass-stroke);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  font-family: var(--font-display);
  font-weight: 600; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-1);
  position: relative;
  box-shadow: 0 8px 20px -8px rgba(0,40,80,0.18), inset 0 1px 0 rgba(255,255,255,0.9);
}
.tkt-glass-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tkt-blue-500);
  box-shadow: 0 0 8px var(--tkt-blue-400);
}
.tkt-glass-pill .dot.orange {
  background: var(--tkt-amber-600);
  box-shadow: 0 0 8px var(--tkt-amber-500);
}

/* ── .eyebrow-row — section eyebrow ── */
.tkt-eyebrow-row {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 28px;
}
.tkt-eyebrow-row .num {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  color: var(--tkt-amber-600);
  letter-spacing: 0.2em;
}
.tkt-eyebrow {
  font-weight: 600; font-size: 14px;
  line-height: 1; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tkt-blue-600);
  margin: 0;
}

/* ── .divider ── */
.tkt-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,40,80,0.18), transparent);
}

/* ── .chip (5 variants) ── */
.tkt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.tkt-chip--crit { background: var(--c-crit-bg); color: var(--c-crit); border: 1px solid var(--c-crit-bd); }
.tkt-chip--warn { background: var(--c-warn-bg); color: var(--c-warn); border: 1px solid var(--c-warn-bd); }
.tkt-chip--ok   { background: var(--c-ok-bg);   color: var(--c-ok);   border: 1px solid var(--c-ok-bd); }
.tkt-chip--info { background: var(--c-info-bg); color: var(--c-info); border: 1px solid var(--c-info-bd); }
.tkt-chip--neut { background: rgba(0,40,80,0.06); color: var(--fg-2); border: 1px solid rgba(0,40,80,0.10); }

/* ── Stat strip (canonical 5 stats) ── */
.tkt-stat-strip {
  display: flex; align-items: center; justify-content: center;
  gap: 32px; flex-wrap: wrap;
  padding: 24px 32px;
}
.tkt-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tkt-stat-num {
  font-family: var(--font-display);
  font-weight: 700; font-size: clamp(48px, 6vw, 88px);
  line-height: 0.9; letter-spacing: -0.04em;
  background: linear-gradient(180deg, var(--tkt-blue-900) 0%, var(--tkt-blue-500) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tkt-stat-num--accent {
  background: linear-gradient(180deg, var(--tkt-amber-700) 0%, var(--tkt-amber-500) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tkt-stat-label {
  font-family: var(--font-display);
  font-weight: 600; font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-3); margin-top: 8px;
}
.tkt-stat-div {
  width: 1px; height: 48px; background: rgba(0,40,80,0.12);
}

/* ── CTA 3-tier ── */

/* Primary (amber gradient pill) — max 1 per viewport */
.tkt-cta-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(180deg, var(--tkt-amber-400), var(--tkt-amber-600));
  color: #fff !important;
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(224,112,0,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tkt-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(224,112,0,0.55), inset 0 1px 0 rgba(255,255,255,0.5);
}

/* Secondary (glass pill) */
.tkt-cta-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--glass-stroke);
  color: var(--tkt-blue-700) !important;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 8px 16px rgba(0,40,80,0.08);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.tkt-cta-secondary:hover {
  background: var(--glass-fill-hi);
  border-color: var(--tkt-blue-600);
}

/* Tertiary (text link animated underline) */
.tkt-cta-tertiary {
  font-family: var(--font-display);
  font-weight: 600; font-size: 15px;
  color: var(--tkt-blue-700);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.tkt-cta-tertiary:hover {
  color: var(--tkt-blue-600);
  border-bottom-color: var(--tkt-blue-600);
}

/* ── Atmospherics: aurora + tech-grid ── */
.tkt-aurora {
  position: absolute; inset: -10%;
  background:
    radial-gradient(40% 30% at 25% 30%, rgba(91,174,245,0.45), transparent 60%),
    radial-gradient(35% 28% at 80% 25%, rgba(168,210,247,0.55), transparent 60%),
    radial-gradient(45% 35% at 70% 80%, rgba(255,200,140,0.40), transparent 65%),
    radial-gradient(30% 24% at 15% 85%, rgba(168,210,247,0.50), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
}
.tkt-tech-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,40,80,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,40,80,0.035) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: -1px -1px;
  pointer-events: none;
  mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 90%);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 90%);
}
.tkt-tech-grid--hero { background-size: 48px 48px; }

/* Blob recipes (paste inline cho hero) */
.tkt-blob {
  position: absolute; border-radius: 50%;
  filter: blur(50px); pointer-events: none;
}
.tkt-blob--blue {
  background: radial-gradient(circle at 30% 30%,
    rgba(91,174,245,0.85),
    rgba(0,80,144,0.20) 60%,
    transparent 80%);
}
.tkt-blob--amber {
  background: radial-gradient(circle at 50% 50%,
    rgba(255,160,64,0.65),
    rgba(224,112,0,0.15) 50%,
    transparent 75%);
}

/* Hero canvas gradient (cobalt-tint ‚Üí amber-tint) */
.tkt-hero-canvas {
  background: linear-gradient(135deg,
    #F0F6FD 0%,
    #DDEBFA 60%,
    #FFF3E6 100%);
}


/* ===============================================================
   LAYER 8 · LAYOUT HELPERS
   =============================================================== */
.tkt-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.tkt-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.tkt-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }

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

/* Container widths (use these on .e-con wrappers via inline style or extra class) */
.tkt-w-narrow  { max-width: var(--w-narrow);  margin-inline: auto; }
.tkt-w-content { max-width: var(--w-content); margin-inline: auto; }
.tkt-w-heading { max-width: var(--w-heading); margin-inline: auto; }
.tkt-w-wide    { max-width: var(--w-wide);    margin-inline: auto; }

/* Section padding rhythm (8px-grid strict — choose 1) */
.tkt-section-compact { padding-block: var(--sp-6); }   /* 64px */
.tkt-section-default { padding-block: var(--sp-7); }   /* 96px */
.tkt-section-large   { padding-block: var(--sp-8); }   /* 128px */


/* ===============================================================
   LAYER 9 · DEFENSIVE — DEPRECATED TOKEN FALLBACKS
   Catch widget cũ still gọi --cob / --tkt-cobalt → map về token mới
   (Sẽ remove ở Phase C-Polish khi 100% page đã migrate)
   =============================================================== */
:root {
  /* Color fallbacks */
  --tkt-cobalt:        var(--tkt-blue-600);
  --tkt-navy-deep:     var(--tkt-blue-800);
  --tkt-industrial:    var(--tkt-blue-700);
  --tkt-steel-blue:    var(--tkt-blue-500);
  --tkt-tangerine:     var(--tkt-amber-600);
  --tkt-tech-gray:     var(--bg-canvas);
  --tkt-white:         var(--bg-pure);
  --tkt-charcoal:      var(--fg-1);
  --tkt-smoke:         var(--fg-3);
  --tkt-teal:          var(--c-ok);
  --tkt-amber:         var(--c-warn);

  --navy:    var(--tkt-blue-600);
  --navy-dk: var(--tkt-blue-800);
  --orange:  var(--tkt-amber-600);
  --green:   var(--c-ok);
  --charcoal: var(--fg-1);
  --smoke:   var(--fg-3);
  --light:   var(--bg-canvas);
  --rule:    var(--glass-stroke-edge);

  --cob:     var(--tkt-blue-600);
  --cob-d:   var(--tkt-blue-800);
  --cob-dd:  var(--tkt-blue-900);
  --tk-navy: var(--tkt-blue-600);
  --bg-light: var(--bg-tint);

  /* Glass fallback */
  --glass-surface: var(--glass-fill-hi);
  --glass-hover:   rgba(255,255,255,0.92);
  --glass-border:  var(--glass-stroke-edge);
  --glass-frost:   var(--glass-fill-tint);
  --glass-blur:    blur(20px);

  /* Radius fallback (legacy) */
  --radius-sm:   var(--r-md);
  --radius-md:   var(--r-lg);
  --radius-lg:   var(--r-xl);
  --radius-pill: var(--r-pill);

  /* Font fallback */
  --font-primary: var(--font-display);
  --font-heading: var(--font-display);
  --font-data:    var(--font-mono);
  --tk-font:        var(--font-display);
  --tkt-font:       var(--font-display);
  --tkt-font-primary: var(--font-display);
  --ff: var(--font-display);
  --fm: var(--font-mono);
}

/* User said "deploy triệt để" — NHƯNG defensive fallbacks ở Layer 9 chỉ map var() name,
   không tạo widget mới hay alias style. Page chưa migrate render với token mới (đúng màu/font),
   không bị white-screen. Sau khi C-Pages xong, Layer 9 này sẽ remove ở C-Polish. */


/* ===============================================================
   LAYER 10 · LEGACY CLASS CLEANUP (defensive)
   Old class .tkt-glass-card, .tkt-btn-primary, .tkt-hero__* s·∫Ω inherit
   font + color đúng nhờ universal override. Style cụ thể giữ tới khi
   widget được migrate sang primitive mới (.tkt-glass, .tkt-cta-*).
   =============================================================== */
.tkt-glass-card {
  background: var(--glass-fill-hi);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--glass-stroke-edge);
  border-radius: var(--r-xl);
  box-shadow: var(--glass-shadow);
}
.tkt-btn-primary {
  background: linear-gradient(180deg, var(--tkt-amber-400), var(--tkt-amber-600));
  color: var(--bg-pure) !important;
  border-radius: var(--r-pill);
  padding: 12px 24px;
  font-weight: 700;
  text-transform: none;
  border: none;
}


/* ===============================================================
   END · TKT PUMPS DESIGN SYSTEM v1.1
   Total layers: 10 | Estimated CSS size: ~14KB minified
   =============================================================== */


/* ===============================================================
   LAYER 11 · BROAD MIGRATION OVERLAY
   Built: 2026-05-22 · v2 (replaces per-page selector approach)
   Strategy: target generic HTML structure + Elementor wrapper + style-attribute pattern.
            Áp TOÀN SITE — mọi page hiện tại + tương lai.
            KHÔNG enumerate widget namespace cụ thể (.tkt-, .tkt3-, .tkt6-...)
   Append vào Custom CSS post-28192 (sau Layer 10).

   Pair với: Phase C1.1 — Elementor Theme Style (Site Settings) set Global Colors
            + Typography + Button preset native.
            Layer 11 này catch widget HTML inline cũ mà Theme Style không reach được.
   =============================================================== */

/* ===============================================================
   11.B-1 · HEADING WEIGHT — defeat inline font-weight: 900
   Selector: every heading in Elementor structure
   =============================================================== */
.elementor h1, .elementor h2, .elementor h3, .elementor h4,
.elementor-widget h1, .elementor-widget h2, .elementor-widget h3, .elementor-widget h4,
.elementor-widget-heading .elementor-heading-title,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
main h1, main h2, main h3, main h4,
[class*="-title"], [class*="-heading"] {
  font-family: var(--font-display) !important;
  overflow: visible !important;
  text-rendering: optimizeLegibility !important;
}

/* H1 — display/hero level */
.elementor h1,
.elementor-widget h1,
.elementor-widget-heading h1.elementor-heading-title,
main h1 {
  font-weight: 700 !important;
  line-height: 1.10 !important;
  letter-spacing: -0.02em !important;
  padding-block: 0.10em 0.04em !important;
}

/* H2 — section */
.elementor h2,
.elementor-widget h2,
.elementor-widget-heading h2.elementor-heading-title,
main h2 {
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
  padding-block: 0.12em 0.05em !important;
}

/* H3 — card / subsection */
.elementor h3,
.elementor-widget h3,
.elementor-widget-heading h3.elementor-heading-title,
main h3 {
  font-weight: 600 !important;
  line-height: 1.20 !important;
  letter-spacing: -0.01em !important;
  padding-block: 0.10em 0.05em !important;
}

/* H4 — minor */
.elementor h4,
.elementor-widget h4,
main h4 {
  font-weight: 600 !important;
  line-height: 1.25 !important;
  padding-block: 0.08em 0.04em !important;
}

/* Heading wrapper — ensure không clip ascender */
.elementor-section, .elementor-element, .elementor-widget-container, .e-con {
  overflow: visible !important;
}

/* ===============================================================
   11.B-2 · BUTTON / CTA — broad selector
   Pattern: catch any link/button with EF7D00 inline OR orange linear-gradient inline
   =============================================================== */

/* Generic broad: any [style*=] with old orange hex ‚Üí amber gradient + pill */
a[style*="#EF7D00"]:not([class*="outline"]):not([class*="ghost"]):not([class*="text-link"]),
a[style*="EF7D00"]:not([class*="outline"]):not([class*="ghost"]):not([class*="text-link"]),
button[style*="#EF7D00"]:not([class*="outline"]):not([class*="ghost"]),
[style*="linear-gradient"][style*="EF7D00"],
[style*="linear-gradient"][style*="orange"] {
  background: linear-gradient(180deg, #FFA040 0%, #E07000 100%) !important;
  background-image: linear-gradient(180deg, #FFA040 0%, #E07000 100%) !important;
  border: none !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  box-shadow:
    0 8px 24px rgba(224, 112, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Hover lift cho primary CTA */
a[style*="#EF7D00"]:not([class*="outline"]):hover,
a[style*="EF7D00"]:not([class*="outline"]):hover,
[style*="linear-gradient"][style*="EF7D00"]:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 16px 36px rgba(224, 112, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* Generic class-based primary button */
.elementor a[class*="btn-primary"],
.elementor a[class*="cta-primary"],
.elementor button[class*="btn-primary"],
.elementor-button[class*="primary"],
.elementor .elementor-button:not([class*="outline"]):not([class*="ghost"]):not([class*="secondary"]):not([class*="text-link"]) {
  background: linear-gradient(180deg, #FFA040 0%, #E07000 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  box-shadow:
    0 8px 24px rgba(224, 112, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* Outline / Secondary CTA — glass pill */
.elementor a[class*="btn-outline"],
.elementor a[class*="btn-ghost"],
.elementor a[class*="cta-secondary"],
.elementor button[class*="outline"],
.elementor .elementor-button[class*="outline"] {
  background: rgba(255, 255, 255, 0.62) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  color: #003E80 !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 8px 16px rgba(0, 40, 80, 0.08) !important;
  transition: background 0.2s, border-color 0.2s !important;
}
.elementor a[class*="btn-outline"]:hover {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: #005090 !important;
}

/* Tertiary text link v·ªõi animated underline */
.elementor a[class*="cta-tertiary"],
.elementor a[class*="text-link"] {
  font-weight: 600 !important;
  color: #003E80 !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: border-color 0.2s, color 0.2s !important;
}
.elementor a[class*="cta-tertiary"]:hover,
.elementor a[class*="text-link"]:hover {
  color: #005090 !important;
  border-bottom-color: #005090 !important;
}

/* ===============================================================
   11.B-3 · CARD GLASS REFRESH — broad
   Pattern: any element having inline background:#FFFFFF + border-radius + box-shadow
            OR class containing "-card"
   =============================================================== */

/* Generic card pattern — class-based */
.elementor [class*="-card"]:not([class*="card-thumb"]):not([class*="card-img"]):not([class*="card-title"]):not([class*="card-sub"]):not([class*="card-cta"]):not([class*="card-meta"]):not([class*="card-spec"]) {
  border-radius: 18px !important;
  border: 1px solid rgba(0, 40, 80, 0.06) !important;
  box-shadow: 0 8px 20px rgba(0, 40, 80, 0.05) !important;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}
.elementor [class*="-card"]:not([class*="card-thumb"]):not([class*="card-img"]):not([class*="card-title"]):not([class*="card-sub"]):not([class*="card-cta"]):hover {
  transform: translateY(-4px) !important;
  border-color: #A8D2F7 !important;
  box-shadow: 0 24px 48px rgba(0, 40, 80, 0.10) !important;
}

/* Data/stat card glass treatment */
.elementor [class*="-data-card"],
.elementor [class*="-stat-card"],
.elementor [class*="data-strip"],
.elementor [class*="stat-strip"] {
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 24px !important;
  box-shadow:
    0 24px 60px -16px rgba(0, 40, 80, 0.18),
    0 2px 6px rgba(0, 40, 80, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

/* Logo tile / brand card (Trusted By carousel) — generic image-only card */
.elementor [class*="-logo"]:not([class*="-text"]):not([class*="-title"]),
.elementor [class*="brand-card"],
.elementor [class*="trustbar"] a,
.elementor [class*="logo-tile"] {
  background: rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(0, 40, 80, 0.06) !important;
  border-radius: 12px !important;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s !important;
}
.elementor [class*="-logo"]:hover:not([class*="-text"]),
.elementor [class*="brand-card"]:hover,
.elementor [class*="trustbar"] a:hover {
  transform: translateY(-3px) !important;
  border-color: #A8D2F7 !important;
  box-shadow: 0 12px 28px rgba(0, 40, 80, 0.10) !important;
}

/* ===============================================================
   11.B-4 · BADGE / CHIP / PILL — broad
   =============================================================== */
.elementor [class*="-badge"]:not([class*="-thumb"]),
.elementor [class*="-chip"],
.elementor [class*="-pill"]:not(a[class*="btn"]):not(a[class*="cta"]) {
  font-family: var(--font-mono, "JetBrains Mono", monospace) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.elementor [class*="badge-primary"],
.elementor [class*="chip-primary"],
.elementor [class*="chip-info"] {
  background: #F0F6FD !important;
  color: #003E80 !important;
  border: 1px solid rgba(0, 80, 144, 0.10) !important;
}
.elementor [class*="badge-accent"],
.elementor [class*="chip-warn"],
.elementor [class*="chip-amber"] {
  background: #FFF3E6 !important;
  color: #C05E00 !important;
  border: 1px solid rgba(224, 112, 0, 0.15) !important;
}
.elementor [class*="badge-smoke"],
.elementor [class*="chip-neutral"],
.elementor [class*="chip-neut"] {
  background: rgba(0, 40, 80, 0.06) !important;
  color: rgba(10, 26, 51, 0.74) !important;
  border: 1px solid rgba(0, 40, 80, 0.10) !important;
}

/* ===============================================================
   11.B-5 · EYEBROW — broad pattern (text + line decoration)
   =============================================================== */
.elementor [class*="-eyebrow"]:not([class*="-eyebrow-line"]):not([class*="-eyebrow-text"]) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #005090 !important;
}
.elementor [class*="-eyebrow-line"] {
  display: inline-block !important;
  height: 1px !important;
  width: 32px !important;
  background: linear-gradient(90deg, transparent, #005090) !important;
}
.elementor [class*="-eyebrow-text"] {
  color: #005090 !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
}

/* ===============================================================
   11.B-6 · BLOB / AURORA / WATERMARK — broad
   =============================================================== */
.elementor [class*="-blob"][class*="cobalt"],
.elementor [class*="-blob-blue"],
.elementor [class*="-blob"][style*="#004F9F"],
.elementor [class*="-blob"][style*="cobalt"] {
  background: radial-gradient(circle at 30% 30%,
    rgba(91, 174, 245, 0.85),
    rgba(0, 80, 144, 0.20) 60%,
    transparent 75%) !important;
  filter: blur(50px) !important;
}
.elementor [class*="-blob"][class*="tangerine"],
.elementor [class*="-blob"][class*="amber"],
.elementor [class*="-blob-orange"],
.elementor [class*="-blob"][style*="#EF7D00"] {
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 160, 64, 0.70),
    rgba(224, 112, 0, 0.18) 50%,
    transparent 75%) !important;
  filter: blur(50px) !important;
}

/* Big text watermark (TKT / PUMPS) — opacity nhẹ hơn */
.elementor [class*="-bg-text"],
.elementor [class*="-watermark"] {
  color: rgba(0, 80, 144, 0.04) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
}

/* ===============================================================
   11.B-7 · FORM (contact / lead) — glass treatment broad
   =============================================================== */
.elementor form input[type="text"],
.elementor form input[type="tel"],
.elementor form input[type="email"],
.elementor form input[type="url"],
.elementor form textarea,
.elementor form select {
  border-radius: 8px !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.elementor form input:focus,
.elementor form textarea:focus,
.elementor form select:focus {
  outline: none !important;
  border-color: #005090 !important;
  box-shadow: 0 0 0 3px rgba(0, 80, 144, 0.12) !important;
}

/* Form trên nền dark navy — text trắng + glass input */
.elementor [style*="background"][style*="#002B5C"] form input,
.elementor [style*="background"][style*="#0A1929"] form input,
.elementor [style*="background"][style*="navy"] form input,
.elementor [style*="background"][style*="#002B5C"] form textarea,
.elementor [style*="background"][style*="navy"] form textarea {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  color: #ffffff !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}
.elementor [style*="background"][style*="navy"] form input::placeholder,
.elementor [style*="background"][style*="#002B5C"] form input::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* Submit button universal — gradient amber pill */
.elementor form button[type="submit"],
.elementor form input[type="submit"],
.elementor form [class*="submit"] {
  background: linear-gradient(180deg, #FFA040, #E07000) !important;
  border: none !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 14px 28px !important;
  box-shadow:
    0 8px 24px rgba(224, 112, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* ===============================================================
   11.B-8 · NAVIGATION HEADER — glass pill style (optional refresh)
   =============================================================== */
header.elementor-location-header,
.elementor-location-header > .elementor-section:first-of-type {
  /* không animate hard — chỉ refresh chrome */
}
header.elementor-location-header a:not([class*="btn"]):not([class*="cta"]):not([class*="logo"]) {
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  transition: color 0.2s !important;
}
header.elementor-location-header a:not([class*="btn"]):hover {
  color: #005090 !important;
}

/* ===============================================================
   11.B-9 · LINK + INLINE TEXT COLOR (defensive)
   Replace inline color: #004F9F ‚Üí tokens 600
   (Layer 9 đã có alias var-based; đây catch inline style="color: #004F9F")
   =============================================================== */
.elementor [style*="color: #004F9F"],
.elementor [style*="color:#004F9F"],
.elementor [style*="color: #004F9F"] * {
  color: #005090 !important;
}
.elementor [style*="color: #EF7D00"],
.elementor [style*="color:#EF7D00"] {
  color: #E07000 !important;
}

/* ===============================================================
   11.B-10 · ANIMATIONS UNIVERSAL — subtle hover/transition
   =============================================================== */
.elementor a[class*="card"],
.elementor [class*="-card"]:not([class*="thumb"]):not([class*="title"]),
.elementor [class*="-tile"],
.elementor [class*="-item"]:not([class*="title"]):not([class*="label"]) {
  transition:
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease !important;
}

/* ===============================================================
   END LAYER 11-BROAD
   ~14 KB · áp toàn site
   =============================================================== */