/**
 * TKT Pumps — Overrides Layer v1.3.0
 *
 * Single authoritative CSS override file. Loaded AFTER:
 *   1. parent Hello Elementor (reset.css / theme.css / header-footer.css)
 *   2. tkt-fonts.css / tokens.css / base.css / components.css (DS v2.0 core)
 *   3. Elementor Kit post-28192.css
 *   4. Elementor Theme Builder per-template CSS
 *
 * Wins cascade via:
 *   - Late load order (tie-break)
 *   - Chain-class specificity where needed
 *   - JS inline-style fallback for Elementor Theme typography (in overrides.js)
 *
 * Replaces inline patches:
 *   - Header template 31055  (marker /* === TKT HEADER FIX r12 === *\/)
 *   - Footer template 31057  (marker /* === TKT GLOBAL OVERRIDES v8 === *\/)
 *
 * After this file is verified working on prod, those inline patches should be
 * removed from the templates to keep them clean.
 */


/* ========================================================================
   1. HEADER — sticky-as-fixed + scroll compact
   Reason: Elementor Theme Builder header section has offsetHeight = exactly
   header height → position: sticky has no scroll-range. Must use position:
   fixed which escapes the parent box entirely.
   ======================================================================== */

.tkth-util {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9998 !important;
  height: 34px !important;
  transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 280ms;
  overflow: hidden;
}

.tkth-bar-wrap {
  position: fixed !important;
  top: 34px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  padding: 14px 24px 0 !important;
  transition: top 280ms cubic-bezier(0.4, 0, 0.2, 1), padding 280ms;
}

body { padding-top: 108px !important; }
@media (max-width: 1024px) { body { padding-top: 94px !important; } }

/* WP admin bar offset (32px) — logged-in users */
body.admin-bar .tkth-util { top: 32px !important; }
body.admin-bar .tkth-bar-wrap { top: 66px !important; }
body.admin-bar { padding-top: 140px !important; }
@media (max-width: 1024px) {
  body.admin-bar .tkth-util { top: 32px !important; }
  body.admin-bar .tkth-bar-wrap { top: 66px !important; }
  body.admin-bar { padding-top: 126px !important; }
}

/* Scroll-aware compact (body.is-scrolled toggled by overrides.js) */
body.is-scrolled .tkth-util { height: 0 !important; opacity: 0 !important; }
body.is-scrolled .tkth-bar-wrap { top: 0 !important; padding-top: 8px !important; }
body.admin-bar.is-scrolled .tkth-bar-wrap { top: 32px !important; }
body.is-scrolled .tkth-bar {
  padding: 6px 10px 6px 14px !important;
  box-shadow: 0 16px 40px rgba(0, 40, 80, 0.14) !important;
}
body.is-scrolled .tkth-brand img { height: 38px !important; }

.tkth-bar {
  transition: padding 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms !important;
}
.tkth-brand img {
  transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}


/* ========================================================================
   2. UTIL-STRIP slim (chiều cao tiết kiệm)
   ======================================================================== */

.tkth-util-inner {
  padding: 4px 40px !important;
  min-height: 26px !important;
}
.tkth-util { font-size: 11.5px !important; }


/* ========================================================================
   3. MENU items — no underline + liquid glass hover
   Note: font-weight + color of menu items set via inline-style in overrides.js
   because Elementor Theme Builder rule `header.elementor-location-header
   a:not(...)` has specificity (0,9,0) which CSS chain cannot exceed reliably.
   ======================================================================== */

.tkth-menu .tkth-item,
.tkth-menu .tkth-item:hover,
.tkth-menu .tkth-item:focus,
.tkth-menu .tkth-item:active,
.tkth-menu .tkth-item.tkth-active,
header.elementor-location-header .tkth-menu .tkth-item,
header.elementor-location-header .tkth-menu .tkth-item:hover,
header.elementor-location-header .tkth-menu .tkth-item:focus {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

header.elementor-location-header .tkth-menu .tkth-item:hover {
  background: rgba(0, 62, 128, 0.06) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  border-color: rgba(0, 62, 128, 0.10) !important;
  box-shadow: 0 2px 8px rgba(0, 40, 80, 0.08) !important;
}

header.elementor-location-header .tkth-menu .tkth-item.tkth-active {
  background: rgba(0, 62, 128, 0.08) !important;
  border-color: rgba(0, 62, 128, 0.14) !important;
  box-shadow: 0 2px 8px rgba(0, 40, 80, 0.10) !important;
}

header.elementor-location-header .tkth-menu .tkth-item {
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  transition: background 200ms ease, border-color 200ms, box-shadow 200ms, color 200ms !important;
}


/* ========================================================================
   4. MEGA MENU — z-index above hero stacking contexts
   ======================================================================== */

.tkth-mega {
  z-index: 99999 !important;
  top: 100% !important;
  padding-top: 8px !important;
}
.tkth-mega::before {
  content: '' !important;
  position: absolute !important;
  top: -12px !important;
  left: 0 !important;
  right: 0 !important;
  height: 20px !important;
}
.tkth-mega-trigger { position: relative; cursor: pointer; }


/* ========================================================================
   5. MOBILE DRAWER — slide-from-right 82vw (max 360px)
   Replaces full-screen modal with modern slide pattern.
   ======================================================================== */

.tkth-drawer {
  display: flex !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(82vw, 360px) !important;
  max-width: 360px !important;
  z-index: 999999 !important;
  background: linear-gradient(160deg, #001A3D 0%, #002B5C 55%, #003E80 100%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
  padding: 28px 20px 24px !important;
  flex-direction: column !important;
  gap: 8px !important;
  color: #fff !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  transform: translateX(100%) !important;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.30), -1px 0 0 rgba(255, 255, 255, 0.08) !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.tkth-drawer.open { transform: translateX(0) !important; }

/* Backdrop overlay (created by overrides.js) */
.tkth-drawer-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 8, 20, 0.55) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 999998 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 320ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.tkth-drawer-backdrop.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Close button */
.tkth-drawer .tkth-drawer-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 200ms, transform 200ms !important;
}
.tkth-drawer .tkth-drawer-close:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  transform: rotate(90deg) !important;
}

/* Drawer brand */
.tkth-drawer .tkth-drawer-brand {
  margin: 8px 0 24px !important;
  padding-right: 50px;
}
.tkth-drawer .tkth-drawer-brand img {
  height: 42px !important;
  width: auto !important;
  mix-blend-mode: normal !important;
}

/* Drawer items — liquid glass tiles */
.tkth-drawer a.tkth-drawer-item,
.tkth-drawer .tkth-drawer-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 16px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: var(--font-display, 'SVN-Avant Garde', sans-serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  min-height: 48px !important;
  text-transform: capitalize !important;
  transition: background 220ms, border-color 220ms, transform 220ms, color 220ms !important;
}
.tkth-drawer a.tkth-drawer-item:hover,
.tkth-drawer a.tkth-drawer-item:active,
.tkth-drawer .tkth-drawer-item:hover,
.tkth-drawer .tkth-drawer-item.is-active {
  background: linear-gradient(135deg, rgba(91, 174, 245, 0.22) 0%, rgba(91, 174, 245, 0.08) 100%) !important;
  border-color: rgba(91, 174, 245, 0.32) !important;
  color: #fff !important;
  transform: translateX(3px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Drawer actions (CTA group at bottom) */
.tkth-drawer .tkth-drawer-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 18px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
}
.tkth-drawer .tkth-drawer-actions .tkth-cta {
  justify-content: center !important;
  min-height: 50px !important;
  background: linear-gradient(180deg, #FFA040 0%, #E07000 100%) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
.tkth-drawer .tkth-drawer-actions .tkth-cta-alt {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  text-decoration: none !important;
  font-family: var(--font-display, sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  min-height: 44px !important;
  transition: background 220ms !important;
}
.tkth-drawer .tkth-drawer-actions .tkth-cta-alt:hover {
  background: rgba(255, 255, 255, 0.10) !important;
}

/* Hide drawer on desktop ≥1025px */
@media (min-width: 1025px) {
  .tkth-drawer { display: none !important; }
  .tkth-drawer-backdrop { display: none !important; }
}


/* ========================================================================
   6. FOOTER — width 1320 + aurora hide + logo blend
   ======================================================================== */

.tktf-inner.tktf-inner.tktf-inner { max-width: 1320px !important; }

/* Hide aurora radial-gradient that caused logo "band" illusion */
.tktf-aurora,
.tktf-grid { display: none !important; }

/* Footer logo — keep transparent (LOGO-TKT-WHITE.png is already transparent;
   the band was from .tktf-aurora gradient at 12% from left, not from the PNG) */
.tktf-root img[alt*="hÆ°Æ¡ng" i],
.tktf-logo img,
.tktf-logo-row img {
  mix-blend-mode: normal !important;
  background: transparent !important;
}


/* ========================================================================
   7. LOGO / BLOG / BENTO BOX STRIP — CSS layer
   Note: JS observer in overrides.js handles dynamic carousel insertions.
   Elementor Kit `[class*="-card"]:not(...):not(...)...` has specificity
   (0,9,0) which CSS chain rarely beats. JS inline-style is the reliable
   approach (see overrides.js). CSS here is best-effort baseline.
   ======================================================================== */

/* Reserved — JS handles strip. CSS here is light fallback only. */
.tkt-fs-card,
.tkt-fs-img,
.tk-logo-item,
.tk-client-logo,
.tk-logo-img,
.tkt-brand-logo,
.tkt-fs-img-brand,
.eco-logo-box,
.tktf-logo-row,
.tkt3-card,
.tkt3-card-thumb,
.tng-card,
.tng-card-cat,
.tng-card-body,
.tng-card-excerpt,
.tng-card-foot,
.tng-card-read,
.tng-card-time,
.tnt-card,
.tnt-rank,
.tnf-card,
.tnf-card-body,
.tnf-card-excerpt,
.tnf-card-foot,
.tnf-card-read,
.tnf-card-tag,
.tnf-card-meta-dot,
.tnfb-chip,
.tnfb-chip-label,
.tnfb-chip-count,
.bento-wrapper,
.bento-cell {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


/* ========================================================================
   8. FONT AWESOME 6 — protect from Kit universal font override
   Elementor Kit post-28192 sets `*, ::before, ::after { font-family:
   var(--font-display) !important }` which kills FA icon rendering.
   LiteSpeed localizes the FA CSS but font files don't resolve via
   relative paths, so we declare @font-face with absolute CDN URLs.
   ======================================================================== */

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-solid-900.woff2') format('woff2'),
       url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-solid-900.ttf') format('truetype');
}
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-regular-400.woff2') format('woff2'),
       url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-regular-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-brands-400.woff2') format('woff2'),
       url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-brands-400.ttf') format('truetype');
}

.fa-solid, .fa-solid::before {
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
}
.fa-regular, .fa-regular::before {
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 400 !important;
}
.fa-brands, .fa-brands::before {
  font-family: 'Font Awesome 6 Brands' !important;
  font-weight: 400 !important;
}


/* ========================================================================
   9. GLOBAL — neutralize Elementor Kit [class*="-card"] border/shadow
   Elementor Kit post-28192 uses attribute selector [class*="-card"] with
   7 :not() pseudo-classes → specificity (0,9,0) + !important.
   This matches EVERY element whose class contains "-card" substring,
   across ALL pages — causing unwanted "framing" borders on containers
   AND children (vm-card, grid-card, nl5-card, tktnl4-card, etc.).

   Previous per-class fix was whack-a-mole. This GLOBAL counter-rule
   uses 8 :not() with fictional classes (never excluded) to reach
   specificity (0,9,0). Since overrides.css loads AFTER Kit CSS,
   cascade tie-break goes to us. JS inline-style backup in overrides.js.
   ======================================================================== */

[class*="-card"]:not(.__z1):not(.__z2):not(.__z3):not(.__z4):not(.__z5):not(.__z6):not(.__z7):not(.__z8) {
  border: 0 !important;
  border-width: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Homepage image/icon box elements (no -card in class, separate) */
.tkt3-img-box,
.tkt4-icon-box {
  border: 0 !important;
  box-shadow: none !important;
}