/* ============================================================
   RESET & TOKENS 2026 — Giữ nguyên
   ============================================================ */
.tkt-hero-2026 *,
.tkt-hero-2026 *::before,
.tkt-hero-2026 *::after {
  box-sizing: border-box;
}

.tkt-hero-2026 {
  --tkt-cobalt: #004F9F;
  --tkt-tangerine: #EF7D00;
  --tkt-navy-deep: #002B5C;
  --tkt-steel-blue: #2E6FAD;
  --tkt-tech-gray: #F2F4F7;
  --tkt-white: #FFFFFF;
  --tkt-site-bg: #FFFFFF;
  --tkt-font-primary: 'SVN-Avant Garde Gothic', 'Century Gothic', 'Avant Garde', sans-serif;
  --tkt-font-mono: 'JetBrains Mono', 'Consolas', monospace;
  --glass-surface: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(0, 79, 159, 0.08);
  --glass-shadow: 0 6px 24px rgba(0, 43, 92, 0.06);
  --glass-blur: blur(20px);

  font-family: var(--tkt-font-primary);
  background: transparent;
  color: var(--tkt-navy-deep);
  position: relative;
  overflow: hidden;
  /* [FIX CLS] Reserve không gian tối thiểu cho hero trước khi font/asset load xong */
  /* Điều chỉnh giá trị này cho khớp với chiều cao thực tế trên màn hình desktop của bạn */
  min-height: 600px;
}

/* ============================================================
   LIQUID GLASS COMPONENT — Giữ nguyên, chỉ thêm GPU layer hint
   ============================================================ */
.tkt-glass-card {
  background: var(--glass-surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  /* [FIX PERF] Chỉ khai báo will-change trên :hover, tránh lãng phí GPU memory khi idle */
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.tkt-glass-card:hover {
  background: rgba(255, 255, 255, 0.88);
  transform: translateY(-2px);
  will-change: transform; /* Chỉ cần khi đang hover */
}

/* ============================================================
   BACKGROUND ANIMATIONS — FIX QUAN TRỌNG NHẤT CHO CLS/PERF
   
   VẤN ĐỀ CŨ: filter:blur(80px) + animation đồng thời trên cùng 1 element
   → Browser không thể GPU-composite filter
   → CPU phải repaint toàn bộ blob TRÊN MỖI FRAME animation
   → Gây jank và tăng CLS score
   
   GIẢI PHÁP MỚI: Tách thành 2 lớp:
   - .tkt-blob-wrap: Giữ filter tĩnh (không animate) → browser cache paint layer
   - .tkt-blob: Chỉ animate transform → GPU composite, 0 repaint
   ============================================================ */
.tkt-bg-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* [FIX PERF] Giới hạn repaint chỉ trong vùng bg-decor, không ảnh hưởng nội dung */
  contain: layout style paint;
}

/* Outer wrapper: chỉ giữ position + blur tĩnh, KHÔNG animate */
.tkt-blob-wrap {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px); /* Tĩnh — browser cache paint layer này */
}

/* Inner: CHỈ animate transform → GPU composited, không cần repaint */
.tkt-blob {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  will-change: transform; /* Đặt ở đây là đúng — chỉ transform, không filter */
  animation: blobFloat 15s ease-in-out infinite alternate;
}

.tkt-blob-cobalt-wrap {
  top: -10%;
  right: -5%;
  width: 600px;
  height: 600px;
}
.tkt-blob-cobalt {
  background: rgba(0, 79, 159, 0.12);
}
.tkt-blob-tangerine-wrap {
  bottom: 0%;
  left: -5%;
  width: 500px;
  height: 500px;
  animation-delay: -5s; /* Di chuyển delay lên wrap vì wrap là element cha */
}
.tkt-blob-tangerine {
  background: rgba(239, 125, 0, 0.08);
  animation-delay: -5s;
}

/* Keyframes giữ nguyên — chỉ animate transform, không filter */
@keyframes blobFloat {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(20px, -30px, 0) scale(1.05); }
  100% { transform: translate3d(-20px, 20px, 0) scale(0.95); }
}

/* ============================================================
   BACKGROUND TYPOGRAPHY — Giữ nguyên
   ============================================================ */
.tkt-bg-text {
  position: absolute;
  font-family: var(--tkt-font-primary);
  font-weight: 700;
  color: var(--tkt-cobalt);
  opacity: 0.03;
  line-height: 0.8;
  user-select: none;
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
}
.tkt-bg-text-tkt {
  top: 2%;
  right: -2%;
  font-size: clamp(120px, 20vw, 320px);
}
.tkt-bg-text-pumps {
  bottom: 0%;
  left: -2%;
  font-size: clamp(100px, 15vw, 240px);
}

/* ============================================================
   LAYOUT & GRID — Giữ nguyên
   ============================================================ */
.tkt-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(64px, 8vw, 120px) clamp(24px, 5vw, 60px) clamp(96px, 12vw, 160px) clamp(24px, 5vw, 60px);
  position: relative;
  z-index: 10;
}

.tkt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 1024px) {
  .tkt-grid {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

/* ============================================================
   LEFT CONTENT — Giữ nguyên hoàn toàn
   ============================================================ */
.tkt-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.tkt-eyebrow-line {
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, var(--tkt-cobalt), var(--tkt-tangerine));
  border-radius: 100px;
}
.tkt-eyebrow-text {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--tkt-cobalt), var(--tkt-tangerine));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 0;
}
.tkt-h1 {
  font-weight: 900;
  font-size: clamp(34px, 3.65vw, 54px);
  line-height: 1.34;
  overflow: visible;
  text-transform: uppercase;
  color: var(--tkt-navy-deep);
  margin: 0 0 24px 0;
  letter-spacing: 0;
}
.tkt-h1 > br { display: block; content: ""; margin-top: 0.06em; }
.tkt-h1-accent {
  display: inline-block;
  padding: 0.22em 0 0.08em;
  line-height: 1.14;
  background: linear-gradient(90deg, var(--tkt-cobalt), var(--tkt-tangerine), var(--tkt-cobalt));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: tktHeroShine 4s linear infinite;
}
@media (min-width: 768px) {
  .tkt-h1-accent { white-space: nowrap; }
}
@media (max-width: 1200px) and (min-width: 1024px) {
  .tkt-h1 { font-size: clamp(40px, 3.25vw, 48px); }
}
@media (max-width: 767px) {
  .tkt-h1 { font-size: clamp(36px, 9vw, 46px); line-height: 1.28; }
}
@keyframes tktHeroShine {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.tkt-desc {
  font-weight: 500;
  font-size: 15px;
  line-height: 1.75;
  color: #475569;
  margin-bottom: 36px;
  max-width: 580px;
}
.tkt-desc strong {
  font-weight: 900;
  color: var(--tkt-navy-deep);
}

/* ============================================================
   BUTTONS — Giữ nguyên
   ============================================================ */
.tkt-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 639px) {
  .tkt-btn-group { flex-direction: column; width: 100%; }
  .tkt-btn { width: 100%; }
}
.tkt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 32px;
  border-radius: 100px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s, filter 0.3s;
  cursor: pointer;
  position: relative; overflow: hidden;
  border: none;
}
.tkt-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Primary — Orange gradient + continuous shine & pulse */
.tkt-btn-primary {
  background: linear-gradient(135deg, var(--tkt-tangerine), #FF8A00, var(--tkt-tangerine));
  background-size: 200% auto;
  color: var(--tkt-white);
  box-shadow: 0 8px 24px rgba(239,125,0,0.25), inset 0 2px 0 rgba(255,255,255,0.2);
  animation: tktBtnFlow 4s linear infinite, tktBtnPulse 3s infinite;
}
.tkt-btn-primary::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  pointer-events: none;
}
.tkt-btn-primary:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 16px 40px rgba(239,125,0,0.4), inset 0 2px 0 rgba(255,255,255,0.4);
  filter: brightness(1.1);
  animation: tktBtnFlow 2s linear infinite; /* Faster flow on hover */
}
.tkt-btn-primary:active { transform: scale(0.95); }
.tkt-btn-primary:hover::after { animation: tktBtnShimmer 0.8s ease forwards; }

@keyframes tktBtnFlow { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }
@keyframes tktBtnPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(239,125,0,0.25), inset 0 2px 0 rgba(255,255,255,0.2); }
  50% { box-shadow: 0 12px 32px rgba(239,125,0,0.35), inset 0 2px 0 rgba(255,255,255,0.2); }
}
@keyframes tktBtnShimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

/* Ghost — Liquid glass morphing */
.tkt-btn-outline {
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
  color: var(--tkt-navy-deep);
  border: 1px solid rgba(0,79,159,0.15);
  box-shadow: 0 4px 16px rgba(0,43,92,0.06), inset 0 1px 0 rgba(255,255,255,0.8);
  position: relative;
  overflow: hidden;
}
.tkt-btn-outline::before {
  content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: translateX(-100%); transition: transform 0.6s ease;
}
.tkt-btn-outline:hover {
  background: rgba(255,255,255,0.85);
  border-color: rgba(0,79,159,0.4);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0,43,92,0.12), inset 0 2px 0 rgba(255,255,255,1);
  color: var(--tkt-cobalt);
}
.tkt-btn-outline:hover::before { transform: translateX(100%); }
.tkt-btn-outline:active { transform: scale(0.95); }

/* ============================================================
   RIGHT CONTENT — Giữ nguyên layout, sửa kỹ thuật
   ============================================================ */
.tkt-visual-wrap {
  position: relative;
  padding-bottom: 40px;
  padding-right: 24px;
}
@media (max-width: 639px) {
  .tkt-visual-wrap { padding-bottom: 0; padding-right: 0; }
}

.tkt-video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--tkt-navy-deep);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  cursor: pointer;
}
.tkt-video-thumb {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: opacity 0.3s;
}
.tkt-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity 0.3s;
}
.tkt-video-wrapper:hover .tkt-video-thumb img { opacity: 1; }
.tkt-play-btn {
  position: absolute;
  width: 64px;
  height: 64px;
  background: var(--tkt-tangerine);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.tkt-video-wrapper:hover .tkt-play-btn { transform: scale(1.1); }
.tkt-play-btn svg { width: 28px; height: 28px; color: white; margin-left: 4px; }
.tkt-video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: none;
}
.tkt-video-wrapper.is-playing .tkt-video-thumb { opacity: 0; pointer-events: none; }
.tkt-video-wrapper.is-playing .tkt-video-iframe { display: block; }

/* Floating Data Card — Giữ nguyên */
.tkt-data-card {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 20;
  padding: 24px;
  min-width: 200px;
  border-left: 4px solid var(--tkt-tangerine);
}
@media (max-width: 639px) {
  .tkt-data-card {
    position: relative;
    bottom: auto; right: auto;
    margin-top: -32px;
    margin-left: 16px; margin-right: 16px;
    width: calc(100% - 32px);
    padding: 20px;
  }
}
.tkt-data-label {
  font-family: var(--tkt-font-primary);
  font-weight: 700; font-size: 10px;
  color: var(--tkt-tangerine);
  letter-spacing: 1px; text-transform: uppercase;
  margin: 0 0 4px 0;
}
.tkt-data-value {
  font-family: var(--tkt-font-primary);
  font-weight: 700; font-size: 32px;
  color: var(--tkt-navy-deep);
  margin: 0 0 4px 0; line-height: 1;
}
.tkt-data-desc {
  font-family: var(--tkt-font-primary);
  font-weight: 400; font-size: 12px;
  color: #333333; margin: 0; line-height: 1.5;
}

/* ============================================================
   ISO BADGE — FIX CLS: Đơn giản hóa positioning
   
   VẤN ĐỀ CŨ: left: -120px + transform: translate(-80%, -40%)
   → Hai offset phức tạp cộng lại, browser phải reflow để tính toán
   → Dễ gây layout shift khi element cha chưa có kích thước xác định
   
   GIẢI PHÁP: Dùng một hệ tọa độ duy nhất (chỉ left + top)
   Kết quả hiển thị giống nhau, stable hơn
   ============================================================ */
.tkt-iso-wrap {
  position: absolute;
  /* Tọa độ tính sẵn = left:-120px + translate(-80%) ≈ left: -230px tùy container width */
  /* Giải pháp ổn định hơn: dùng right thay vì left âm phức tạp */
  top: -40px;
  left: 0;
  transform: translateX(-100%) translateY(-20%);
  z-index: 30;
}
@media (max-width: 1023px) {
  .tkt-iso-wrap {
    top: -20px;
    transform: translateX(-60%) translateY(-10%);
  }
}
@media (max-width: 639px) {
  .tkt-iso-wrap {
    position: relative;
    top: auto; left: auto;
    transform: none;
    display: flex;
    justify-content: center;
    margin-top: 32px;
  }
}
.tkt-iso-inner {
  display: flex;
  align-items: center;
  gap: 16px;
}
.tkt-iso-icon {
  width: 136px;
  height: 136px;
  flex-shrink: 0;
  background-color: var(--tkt-cobalt);
  -webkit-mask: url('https://thaikhuongpump.com/wp-content/uploads/2026/01/ISO-TKT-01.svg') no-repeat center / contain;
  mask: url('https://thaikhuongpump.com/wp-content/uploads/2026/01/ISO-TKT-01.svg') no-repeat center / contain;
}
/*===TKT-BLOCK-SPLIT===*/
/* ── SECTION RESET & SCOPE ── */
.tkt-fs *,.tkt-fs *::before,.tkt-fs *::after{box-sizing:border-box;margin:0;padding:0}
.tkt-fs{
  --cob:#004F9F;--cob-d:#002B5C;--cob-dd:#001A33;
  --tan:#EF7D00;--tan-d:#C06000;--tan-h:#D66E00;
  --teal:#148F77;--teal-l:#E8F5F0;
  --red:#D0021B;--red-l:#FFF0F2;
  --tx:#1A2033;--mt:#6B7A99;
  
  /* TKT FIX: Xóa ép font cứng, kế thừa 100% font mặc định của Website để chống lỗi typo */
  font-family: inherit; 
  -webkit-font-smoothing: antialiased;
  padding: clamp(30px,4vw,50px) clamp(16px,4vw,48px); 
  background: transparent;
  position: relative;
  z-index: 10;
}

/* ── WRAPPER: FLOATING LIQUID GLASS ── */
.tkt-fs-wrap{
  max-width: 1280px; 
  margin: 0 auto;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
  border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 20px 60px rgba(0,43,92,.08), inset 0 1px 0 rgba(255,255,255,1);
  animation: tkt-fs-float 6s ease-in-out infinite; transform: translateY(0);
}
@keyframes tkt-fs-float {
  0%, 100% { transform: translateY(0); box-shadow: 0 20px 60px rgba(0,43,92,.08), inset 0 1px 0 rgba(255,255,255,1); }
  50% { transform: translateY(-8px); box-shadow: 0 30px 80px rgba(0,43,92,.12), inset 0 1px 0 rgba(255,255,255,1); }
}

/* ── TAB HEADER: MODERN SEGMENTED CONTROL ── */
.tkt-fs-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid rgba(0,79,159,0.08);
  background: transparent; flex-wrap: wrap; gap: 16px;
}
.tkt-fs-tabs-group {
  display: inline-flex; background: rgba(0,79,159,0.06);
  border-radius: 12px; padding: 4px;
}
.tkt-fs-tab {
  padding: 10px 20px; font-weight: 700; font-size: 13px; color: var(--mt);
  border-radius: 8px; transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; border: none; background: transparent;
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.5px; font-family: inherit;
}
.tkt-fs-tab:hover { background: rgba(255,255,255,0.5) !important; color: var(--cob-d) !important; }
.tkt-fs-tab.on {
  background: #fff !important; color: var(--cob-d) !important; box-shadow: 0 4px 12px rgba(0,43,92,0.08);
}
.tkt-fs-tab-ico { display: flex; align-items: center; }
.tkt-fs-tab-hot {
  font-size: 9px; font-weight: 900; padding: 2px 8px; border-radius: 100px;
  background: linear-gradient(135deg, #FF3B30, #FF2D55); color: #fff;
  letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 4px 12px rgba(255,59,48,0.3);
  animation: tktTabHotPulse 2s infinite; position: relative;
}
@keyframes tktTabHotPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(255,59,48,0.3); }
  50% { transform: scale(1.08); box-shadow: 0 6px 16px rgba(255,59,48,0.5); }
}

.tkt-fs-header-right {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.tkt-fs-status {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; color: var(--cob-d); text-transform: uppercase; letter-spacing: 0.5px;
}
.tkt-fs-status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--tan);
  animation: fs-dot-pulse 1.5s ease-in-out infinite; box-shadow: 0 0 8px rgba(239,125,0,0.8);
}

/* NÚT CTA CHÍNH CHIẾN DỊCH */
.tkt-fs-main-cta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(135deg, var(--tan) 0%, var(--tan-h) 100%);
  color: #ffffff !important; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 10px 24px; border-radius: 100px; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 16px rgba(239,125,0,0.3); font-family: inherit; border: none;
}
.tkt-fs-main-cta:hover {
  transform: translateY(-2px); box-shadow: 0 8px 24px rgba(239,125,0,0.4); color: #ffffff !important;
}
/* Fix lỗi 2 font chữ: Ép thẻ con kế thừa font cao và đồng nhất 1 màu */
.tkt-fs-main-cta * { color: #ffffff !important; font-family: inherit !important; font-weight: inherit !important; }
.tkt-fs-hide-mob { display: inline; }

/* ── FLASH BAND (COUNTDOWN) ── */
.tkt-fs-band{
  background: linear-gradient(90deg, rgba(10,25,41,0.95) 0%, rgba(0,43,92,0.9) 100%); 
  padding: 12px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; position: relative; overflow: hidden;
}
.tkt-fs-band::before{
  content:''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size: 20px 20px; pointer-events: none;
}
.tkt-fs-band::after{
  content:''; position: absolute; right: -40px; top: -40px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle,rgba(239,125,0,.35) 0%,transparent 70%); pointer-events: none; animation: fs-glow-pulse 4s ease-in-out infinite alternate;
}
@keyframes fs-glow-pulse { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.1); } }

.tkt-fs-slots{ display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1 }
.tkt-fs-slot{
  padding: 6px 14px; border-radius: 100px; font-size: 12px; font-weight: 600;
  border: 1.5px solid rgba(255,255,255,.15); color: rgba(255,255,255,.8); background: rgba(255,255,255,0.05);
  cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s; white-space: nowrap; font-family: inherit;
}
.tkt-fs-slot:hover{ border-color: rgba(255,255,255,.5) !important; color: #fff !important; background: rgba(255,255,255,0.15) !important; }
.tkt-fs-slot.on{ background: linear-gradient(135deg, var(--tan) 0%, var(--tan-h) 100%) !important; border-color: var(--tan) !important; color: #fff !important; box-shadow: 0 4px 16px rgba(239,125,0,.4); }

.tkt-fs-cd{ margin-left: auto; display: flex; align-items: center; gap: 6px; position: relative; z-index: 1; flex-shrink: 0; font-family: inherit; }
.tkt-fs-cd-label{ font-size: 10px; color: rgba(255,255,255,.8); letter-spacing: 1px; text-transform: uppercase; margin-right: 12px; white-space: nowrap; font-weight: 700; }
.tkt-fs-cd-unit{ 
  display: flex; flex-direction: column; align-items: center; 
  background: rgba(255,255,255,0.1); 
  border: 1px solid rgba(255,255,255,0.15); 
  border-radius: 8px; padding: 6px 10px; min-width: 48px;
}
.tkt-fs-cd-n{ 
  font-size: 20px; font-weight: 800; color: var(--tan); 
  line-height: 1; margin-bottom: 2px; min-width: 22px; text-align: center; 
}
.tkt-fs-cd-t{ font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.7); letter-spacing: 0.5px; text-transform: uppercase; }
.tkt-fs-cd-sep{ font-size: 18px; font-weight: 800; color: rgba(255,255,255,0.3); margin-bottom: 12px; }

/* ── PRODUCT CAROUSEL ── */
.tkt-fs-carousel-wrap{ position: relative; background: transparent; padding: 24px 0 16px; }
.tkt-fs-track{ display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 24px 24px; }
.tkt-fs-track::-webkit-scrollbar{ display: none }

.tkt-fs-nav{
  position: absolute; top: 45%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(8px); border: 1px solid rgba(13,43,78,0.1);
  box-shadow: 0 8px 24px rgba(0,43,92,.12); display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 10; font-size: 20px; color: var(--cob-d); transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; font-family: inherit;
}
.tkt-fs-nav:hover{ background: var(--cob) !important; color: #fff !important; border-color: var(--cob) !important; transform: translateY(-50%) scale(1.1); box-shadow: 0 12px 32px rgba(0,79,159,.3); }
.tkt-fs-nav.prev{ left: 12px }
.tkt-fs-nav.next{ right: 12px }

/* ── PRODUCT CARD: COMPACT LAYOUT ── */
.tkt-fs-card{
  flex: 0 0 230px; scroll-snap-align: start; 
  background: #FFFFFF; border-radius: 14px; border: 1px solid rgba(13,43,78,0.06);
  overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; position: relative; margin-right: 16px; cursor: pointer; box-shadow: 0 8px 24px rgba(0,43,92,.04);
}
.tkt-fs-card:last-child{ margin-right: 0 }
.tkt-fs-card:hover{ border-color: var(--cob); box-shadow: 0 16px 40px rgba(0,79,159,.12); transform: translateY(-6px); }

.tkt-fs-disc{
  position: absolute; top: 10px; left: 10px; z-index: 2; background: linear-gradient(135deg, var(--tan) 0%, var(--tan-h) 100%); color: #fff;
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 100px; box-shadow: 0 4px 12px rgba(239,125,0,.4);
}
.tkt-fs-tag{
  position: absolute; top: 10px; right: 10px; z-index: 2; color: #fff;
  font-size: 9px; font-weight: 700; padding: 4px 8px; border-radius: 100px; letter-spacing: 0.5px; text-transform: uppercase;
}
.tkt-fs-tag.hot{ background: linear-gradient(135deg, var(--tan), var(--tan-h)); box-shadow: 0 4px 12px rgba(239,125,0,.3); }
.tkt-fs-tag.deal{ background: linear-gradient(135deg, #2ecc71, #229954); box-shadow: 0 4px 12px rgba(46,204,113,.3); }

/* KHU VỰC ẢNH SẢN PHẨM */
.tkt-fs-img{
  height: 140px; background: #FFFFFF !important; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; padding: 12px;
}
.tkt-fs-img-file {
  max-width: 90%; max-height: 90%; object-fit: contain; position: relative; z-index: 1;
  transition: transform .4s ease; mix-blend-mode: multiply; 
}
.tkt-fs-card:hover .tkt-fs-img-file { transform: scale(1.1) translateY(-2px); } 

.tkt-fs-img-ico{ color: var(--cob); transition: transform .4s ease; }
.tkt-fs-card:hover .tkt-fs-img-ico{ transform: scale(1.1) translateY(-2px); }

.tkt-fs-img-brand{
  position: absolute; bottom: 8px; left: 8px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(4px); padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,1); z-index: 2;
  box-shadow: 0 4px 8px rgba(0,43,92,0.08); height: 26px; 
}
.tkt-brand-logo {
  height: 16px !important; width: auto !important; max-width: 100px !important; object-fit: contain !important; mix-blend-mode: multiply !important; margin: 0 !important; padding: 0 !important; display: block !important;
}

/* NỘI DUNG CARD */
.tkt-fs-body{ padding: 12px }
.tkt-fs-type{ font-size: 9px; font-weight: 700; color: var(--mt); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.tkt-fs-name{ 
  font-size: 14px; font-weight: 700; color: var(--cob-d); line-height: 1.3; margin-bottom: 8px; 
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
}
.tkt-fs-name br { display: none; }

.tkt-fs-specs-row{ 
  display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: nowrap; overflow: hidden; 
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  mask-image: linear-gradient(to right, black 85%, transparent 100%);
}
.tkt-fs-spec{ font-size: 9px; font-weight: 600; padding: 4px 8px; border-radius: 4px; background: rgba(13,43,78,0.04); color: var(--mt); border: 1px solid rgba(13,43,78,0.08); white-space: nowrap; }
.tkt-fs-spec.hi{ background: rgba(0,79,159,.08); color: var(--cob-d); border-color: rgba(0,79,159,.2) }

/* FIX LIÊN HỆ GỌN GÀNG, SẠCH SẼ CHUẨN B2B */
.tkt-fs-price{ display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.tkt-fs-price-val{ font-size: 15px; font-weight: 800; color: var(--tan); line-height: 1; }
.tkt-fs-price-note{ font-size: 9px; color: var(--mt); margin-top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tkt-fs-prog-wrap{ margin-bottom: 12px }
.tkt-fs-prog-row{ display: flex; justify-content: space-between; font-size: 10px; font-weight: 600; color: var(--mt); margin-bottom: 6px; }
.tkt-fs-prog-row span.hot{ color: var(--tan); font-weight: 700; }
.tkt-fs-bar{ height: 6px; background: rgba(13,43,78,0.08); border-radius: 100px; overflow: hidden; border: 1px solid rgba(13,43,78,0.05); }
.tkt-fs-bar-fill{ height: 100%; border-radius: 100px; background: linear-gradient(90deg,var(--tan),#FF9A2E); box-shadow: 0 0 8px rgba(239,125,0,0.5); }
.tkt-fs-bar-fill.hot{ background: linear-gradient(90deg,var(--tan),#FF9A2E); box-shadow: 0 0 8px rgba(239,125,0,0.5); }

/* NÚT "NHẬN ƯU ĐÃI" TỐI ƯU HÓA LIQUID GLASS */
.tkt-fs-btn{
  width: 100%; padding: 8px 10px; font-family: inherit;
  background: rgba(0,79,159,0.06); color: var(--cob);
  border: 1px solid rgba(0,79,159,0.15);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.tkt-fs-btn:hover{ 
  background: linear-gradient(135deg, var(--tan) 0%, var(--tan-h) 100%) !important; 
  color: #fff !important; border-color: transparent !important;
  transform: translateY(-2px); box-shadow: 0 6px 16px rgba(239,125,0,.3); 
}

/* ── BOTTOM NOTICE ── */
.tkt-fs-notice{
  background: rgba(255,255,255,0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,0.7); padding: 12px 24px; display: flex; align-items: center; gap: 16px;
  font-size: 11px; font-weight: 600; color: var(--tx); flex-wrap: wrap;
}
.tkt-fs-notice-item{ display: flex; align-items: center; gap: 6px }
.tkt-fs-notice-item::before{ content: '•'; color: var(--tan); font-size: 14px; flex-shrink: 0; }

/* ── RESPONSIVE TWEAKS ── */
@media(max-width:1200px){ 
  .tkt-fs-card { flex: 0 0 210px; }
  .tkt-fs-img { height: 140px; }
}
@media(max-width:960px){ 
  .tkt-fs-card { flex: 0 0 190px; } 
  .tkt-fs-name{ font-size:13px; } 
}
@media(max-width:768px){
  .tkt-fs{ padding: 20px 16px } .tkt-fs-band{ padding: 12px; gap: 10px } .tkt-fs-cd{ margin-left: 0; width: 100%; justify-content: center;}
  .tkt-fs-card{ flex: 0 0 180px; margin-right: 12px;} .tkt-fs-img{ height: 120px } .tkt-fs-tab{ padding: 10px 16px; font-size: 11px}
  .tkt-fs-tab.on{ padding-right: 24px } .tkt-fs-notice { padding: 10px 16px; gap: 8px; font-size: 9px;}
  .tkt-fs-hide-mob { display: none; }
  .tkt-fs-main-cta { padding: 10px 16px; font-size: 10px; width: 100%; justify-content: center; }
  .tkt-fs-header { flex-direction: column; align-items: stretch; }
  .tkt-fs-header-right { justify-content: space-between; }
}
@media(max-width:480px){ 
  .tkt-fs-card{ flex: 0 0 160px } 
  .tkt-fs-cd-n{ font-size: 18px } .tkt-fs-cd-unit { min-width: 40px; padding: 6px;} 
}
/*===TKT-BLOCK-SPLIT===*/
/* Đã fix: Thêm .tkt-header-wrap vào rule box-sizing */
.tkt3-header-wrap, .tkt3-header-wrap *, .tkt3-header-wrap *::before, .tkt3-header-wrap *::after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

.tkt3-header-wrap {
  --primary:  #004F9F; 
  --accent:   #EF7D00; 
  --charcoal: #0A1929; 
  --smoke:    #64748B;
  --tkt-font: 'SVN-Avant Garde Gothic', 'Century Gothic', 'Avant Garde', sans-serif;
  
  font-family: var(--tkt-font); 
  color: var(--charcoal);
  width: 100%;
  max-width: 100%; /* Đã fix: Đảm bảo không bao giờ vượt quá 100% chiều rộng parent */
  
  /* ĐÃ SỬA: Gradient từ Trắng mờ dần sang Trong Suốt để hòa quyện hoàn toàn vào nền web ở cạnh dưới */
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%); 
  padding: 2.5rem 2rem 1rem 2rem; /* Không gian thở bao quanh, đáy nhỏ hơn để dính sát */
  border-radius: 16px 16px 0 0; /* Bo góc trên, dưới vuông vức để nối liền */
  
  /* ĐÃ SỬA: Bỏ viền 2 bên để tránh bị cụt lủn, chỉ giữ viền mờ ở trên cùng để định hình khối */
  border-top: 1px solid rgba(0,79,159,0.08);
  border-left: none;
  border-right: none;
  border-bottom: none; 
  overflow: visible; /* Cho phép dấu tiếng Việt trong heading hiển thị đầy đủ */
}

.tkt3-header-clean {
  display: flex; 
  flex-direction: column; 
  gap: 1.5rem;
  /* ĐÃ SỬA: Xóa bỏ các khoảng cắt đứt để liền mạch với khối dưới */
  margin-bottom: 0; 
  padding-bottom: 0;
  border-bottom: none;
  width: 100%;
}

@media (min-width: 768px) {
  .tkt3-header-clean { 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    align-items: flex-end; 
  }
}

.tkt3-header-left { 
  flex: 1 1 0%; /* Đã fix: Cho phép item linh hoạt co giãn */
  min-width: 0; /* Đã fix: Chống flexbox blowout (bị đẩy tràn viền do text dài) */
  padding-right: 1rem; 
}

.tkt3-eyebrow { 
  display: flex; 
  align-items: center; 
  gap: 0.6rem; 
  margin-bottom: 12px; 
}

.tkt3-eyebrow-line { 
  width: 24px; 
  height: 2px; 
  background: var(--accent); 
  flex-shrink: 0; /* Đảm bảo đường line không bị bóp méo */
}

.tkt3-eyebrow-text { 
  font-size: 11px; 
  font-weight: 700; 
  color: var(--smoke); 
  text-transform: uppercase; 
  letter-spacing: 0.2em; 
}

.tkt3-title-main {
  font-family: var(--tkt-font); 
  font-weight: 900;
  font-size: clamp(1.4rem, 2.5vw, 2.2rem); 
  text-transform: uppercase; 
  letter-spacing: 0; 
  line-height: 1.45; 
  padding: 0.16em 0 0.08em;
  overflow: visible; 
  margin: 0 0 0.5rem;
  background: linear-gradient(to right, var(--primary) 20%, var(--accent) 50%, var(--primary) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  background-clip: text; 
  color: transparent;
  word-wrap: break-word; 
  animation: tkt3Shine 4s linear infinite;
}

@keyframes tkt3Shine {
  to { background-position: 200% center; }
}

.tkt3-subline { 
  font-size: 1.05rem; 
  color: var(--smoke); 
  line-height: 1.6; 
  margin: 0; 
}

.tkt3-header-right {
  flex-shrink: 0; /* Đảm bảo nút bấm không bị bóp nghẹt khi màn hình nhỏ */
}

.tkt3-btn-primary {
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--accent) 0%, #D66E00 100%); 
  color: #fff !important; 
  font-family: var(--tkt-font);
  font-weight: 800; 
  font-size: 13px; 
  text-transform: uppercase; 
  letter-spacing: 0.5px;
  height: 52px;
  padding: 0 32px; 
  border-radius: 100px; 
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 15px rgba(239,125,0,0.3); 
  white-space: nowrap;
  animation: tkt3BtnPulse 2.5s infinite;
  position: relative;
  overflow: hidden;
}

.tkt3-btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: skewX(-20deg) translateX(-150%);
  transition: transform 0.6s ease;
}

.tkt3-btn-primary:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 8px 24px rgba(239,125,0,0.4); 
}

.tkt3-btn-primary:hover::before {
  transform: skewX(-20deg) translateX(150%);
}

@keyframes tkt3BtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,125,0,0.4); }
  50% { box-shadow: 0 0 0 10px rgba(239,125,0,0); }
}
/*===TKT-BLOCK-SPLIT===*/
.tkt-products-wrap *, .tkt-products-wrap *::before, .tkt-products-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }
.tkt-products-wrap {
  --primary:  #004F9F; --accent:   #EF7D00; --charcoal: #0A1929; --smoke:    #64748B;
  --tkt-font: 'SVN-Avant Garde Gothic', 'Century Gothic', 'Avant Garde', sans-serif;
  font-family: var(--tkt-font); color: var(--charcoal); width: 100%;
}
.tkt-products-wrap img { background: transparent !important; }
.tkt3-tracks-col { display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width:1024px) { .tkt3-tracks-col { gap: 1.5rem; } }

.tkt3-row-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 6px; padding: 0 0.25rem; }
@media (min-width:768px) { .tkt3-row-head { gap: 0.75rem; padding: 0 0.5rem; } }
.tkt3-badge { font-size: 9px; font-weight: 700; color: white; padding: 2px 7px; border-radius: 4px; flex-shrink: 0; font-family: var(--tkt-font); }
@media (min-width:768px) { .tkt3-badge { font-size: 10px; padding: 2px 8px; } }
.tkt3-badge-primary { background: linear-gradient(135deg, var(--primary), #002B5C); box-shadow: 0 4px 12px rgba(0,79,159,0.3); }
.tkt3-badge-accent  { background: linear-gradient(135deg, var(--accent), #C06000); box-shadow: 0 4px 12px rgba(239,125,0,0.3); }
.tkt3-badge-smoke   { background: linear-gradient(135deg, var(--smoke), #475569); box-shadow: 0 4px 12px rgba(100,116,139,0.3); }
.tkt3-row-title { font-family: var(--tkt-font); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); margin: 0; white-space: nowrap; }
@media (min-width:768px) { .tkt3-row-title { font-size: 0.75rem; } }
.tkt3-row-title-dark { color: var(--charcoal); }
.tkt3-row-line { flex: 1; height: 1px; min-width: 20px; }
.tkt3-row-line-primary { background: linear-gradient(to right,rgba(0,79,159,0.2),transparent); }
.tkt3-row-line-accent  { background: linear-gradient(to right,rgba(239,125,0,0.2),transparent); }
.tkt3-row-line-smoke   { background: linear-gradient(to right,rgba(100,116,139,0.2),transparent); }

.tkt3-track-wrap { position: relative; }
.tkt3-arrow {
  position: absolute; top: 45%; transform: translateY(-50%); z-index: 20; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); box-shadow: 0 4px 15px rgba(0,0,0,0.15); border: 1px solid #e2e8f0; color: var(--primary);
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s, color 0.3s, transform 0.3s, opacity 0.2s;
  opacity: 0; pointer-events: none;
}
@media (min-width:768px)  { .tkt3-arrow { width: 40px; height: 40px; } }
@media (min-width:1024px) { .tkt3-arrow { width: 44px; height: 44px; } }
.tkt3-arrow:hover { background: var(--primary); color: white; transform: translateY(-50%) scale(1.1); }
.tkt3-arrow.arrow-prev { left: 2px; } .tkt3-arrow.arrow-next { right: 2px; }
@media (min-width:1024px) { .tkt3-arrow.arrow-prev { left: -18px; } .tkt3-arrow.arrow-next { right: -18px; } }
.tkt3-arrow.arrow-visible { opacity: 1; pointer-events: auto; }
.tkt3-arrow svg { width: 16px; height: 16px; }
@media (min-width:768px)  { .tkt3-arrow svg { width: 18px; height: 18px; } }
@media (min-width:1024px) { .tkt3-arrow svg { width: 20px; height: 20px; } }

.tkt3-track-outer { overflow: hidden; -webkit-mask-image: linear-gradient(to right,transparent 0%,black 4%,black 96%,transparent 100%); mask-image: linear-gradient(to right,transparent 0%,black 4%,black 96%,transparent 100%); }
.tkt3-track {
  display: flex; gap: 0.625rem; overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 6px 0.375rem 14px; cursor: grab; user-select: none; -webkit-user-drag: none;
}
@media (min-width:768px)  { .tkt3-track { gap: 0.75rem; padding: 6px 0.5rem 14px; } }
@media (min-width:1024px) { .tkt3-track { gap: 1rem; padding: 6px 0.75rem 16px; } }
.tkt3-track::-webkit-scrollbar { display: none; }
.tkt3-track.is-dragging { scroll-behavior: auto; cursor: grabbing; }
.tkt3-track.is-dragging a { pointer-events: none; }

.tkt3-card {
  background: #F4F7FC; border: 1px solid rgba(0,79,159,0.05); border-radius: 12px; padding: 0.625rem; display: block; width: 160px; flex-shrink: 0;
  text-decoration: none; position: relative; overflow: hidden; cursor: pointer; box-shadow: 0 2px 8px rgba(0,79,159,0.04);
  transition: transform 0.4s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.4s cubic-bezier(0.25,0.8,0.25,1), border-color 0.4s, background 0.4s;
  user-select: none; -webkit-user-drag: none;
}
@media (min-width:480px)  { .tkt3-card { width: 200px; } }
@media (min-width:768px)  { .tkt3-card { width: 240px; padding: 0.75rem; border-radius: 14px; } }
@media (min-width:1024px) { .tkt3-card { width: 260px; padding: 0.875rem; border-radius: 16px; } }
.tkt3-card img { pointer-events: none; }
.tkt3-card:hover { transform: translateY(-5px); border-color: var(--primary); background: #FFFFFF; box-shadow: 0 12px 28px rgba(0,79,159,0.12); z-index: 10; }

.tkt3-card-thumb { height: 120px; background: #FFFFFF; border-radius: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: center; padding: 0.375rem; overflow: hidden; border: 1px solid rgba(0,0,0,0.03); }
@media (min-width:480px)  { .tkt3-card-thumb { height: 150px; } }
@media (min-width:768px)  { .tkt3-card-thumb { height: 175px; border-radius: 10px; padding: 0.5rem; } }
@media (min-width:1024px) { .tkt3-card-thumb { height: 190px; padding: 0.625rem; } }
.tkt3-card-thumb img { max-height: 100%; max-width: 100%; object-fit: contain; transition: transform 0.5s ease; will-change: transform; background: transparent !important; }
.tkt3-card:hover .tkt3-card-thumb img { transform: scale(1.08); }

.tkt3-card-title { font-family: var(--tkt-font); font-weight: 700; font-size: 11px; color: var(--primary); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; line-height: 1.3; }
@media (min-width:768px)  { .tkt3-card-title { font-size: 13px; } }
@media (min-width:1024px) { .tkt3-card-title { font-size: 14px; } }
.tkt3-card-sub { font-size: 9px; color: var(--smoke); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
@media (min-width:768px)  { .tkt3-card-sub { font-size: 10px; } }
@media (min-width:1024px) { .tkt3-card-sub { font-size: 11px; } }
/*===TKT-BLOCK-SPLIT===*/
.tk-trustbar {
  --tk-cobalt:    #004F9F;
  --tk-tangerine: #EF7D00;
  --tk-font: 'SVN-Avant Garde Gothic', 'Century Gothic', 'Avant Garde', sans-serif;
  width: 100%; background: #FFFFFF;
  position: relative; overflow: hidden;
  border-top: 1px solid rgba(0,79,159,0.06);
  border-bottom: 1px solid rgba(0,79,159,0.06);
  min-height: 60px; /* ★ mobile: 72→60px */
}

/* ─── INNER LAYOUT ────────────────────────── */
.tk-trustbar-inner {
  max-width: 1440px; margin: 0 auto;
  padding: 0 16px; height: 60px; /* ★ mobile default */
  display: flex; align-items: center; gap: 12px;
}
@media (min-width: 640px) {
  .tk-trustbar-inner { height: 68px; gap: 14px; }
}
@media (min-width: 1024px) {
  .tk-trustbar-inner { height: 72px; gap: 16px; }
}

/* ─── LEFT LABEL ──────────────────────────── */
.tk-trustbar-label {
  display: flex; align-items: center; gap: 7px; flex-shrink: 0;
}
@media (min-width: 640px) { .tk-trustbar-label { gap: 10px; } }

/* ★ Ẩn hoàn toàn label trên màn rất nhỏ — nhường toàn bộ không gian cho logo */
@media (max-width: 359px) { .tk-trustbar-label { display: none; } }

.tk-trustbar-dot {
  width: 6px; height: 6px; border-radius: 50%; /* ★ mobile: 8→6px */
  background: var(--tk-tangerine); flex-shrink: 0;
  animation: tkPulse 2s ease-in-out infinite;
  will-change: transform, opacity;
}
@media (min-width: 640px) { .tk-trustbar-dot { width: 8px; height: 8px; } }
@keyframes tkPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(1.25); }
}

.tk-trustbar-title {
  font-family: var(--tk-font);
  font-size: 9px; /* ★ mobile: 11→9px */
  font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--tk-cobalt);
  margin: 0; white-space: nowrap;
}
@media (min-width: 640px) { .tk-trustbar-title { font-size: 10px; letter-spacing: 2px; } }
@media (min-width: 1024px) { .tk-trustbar-title { font-size: 11px; } }

.tk-sep {
  width: 1px; height: 18px;
  background: rgba(0,79,159,0.2); flex-shrink: 0;
}
/* ★ Ẩn sep đầu khi label ẩn */
@media (max-width: 359px) { .tk-sep:first-of-type { display: none; } }

/* ─── LOGO STRIP ──────────────────────────── */
.tk-logo-strip {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right, transparent 0%, black 6%, black 94%, transparent 100%
  );
  mask-image: linear-gradient(
    to right, transparent 0%, black 6%, black 94%, transparent 100%
  );
}

.tk-logo-track {
  display: flex; align-items: center;
  width: max-content;
  animation: tkMarquee 40s linear infinite; /* ★ mobile: 45s→40s (logo nhỏ hơn, track ngắn hơn) */
  will-change: transform;
}
.tk-logo-track:hover { animation-play-state: paused; }

@keyframes tkMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.tk-logo-item {
  flex-shrink: 0;
  width: 80px;  /* ★ mobile: 110→80px */
  height: 44px; /* ★ mobile: 48→44px */
  padding: 0 10px; /* ★ mobile: 14→10px */
  display: flex; align-items: center; justify-content: center;
}
@media (min-width: 480px) {
  .tk-logo-item { width: 92px; height: 46px; padding: 0 11px; }
}
@media (min-width: 640px) {
  .tk-logo-item { width: 100px; height: 48px; padding: 0 12px; }
}
@media (min-width: 1024px) {
  .tk-logo-item { width: 110px; padding: 0 14px; }
}

.tk-logo-img {
  max-width: 100%;
  max-height: 26px; /* ★ mobile: 32→26px */
  width: auto; height: auto; object-fit: contain;
  filter: grayscale(15%) opacity(0.85);
  transition: filter 0.25s ease, opacity 0.35s ease;

  /* ★ ÔVuông fix: bắt đầu invisible */
  opacity: 0;
  /* ★ Ẩn alt text & broken icon mọi browser */
  color: transparent;
  font-size: 0;
}
@media (min-width: 640px) { .tk-logo-img { max-height: 30px; } }
@media (min-width: 1024px) { .tk-logo-img { max-height: 32px; } }

/* ★ Class JS thêm sau khi ảnh load xong */
.tk-logo-img.tktb-loaded {
  opacity: 0.85;
}
.tk-logo-item:hover .tk-logo-img.tktb-loaded {
  filter: grayscale(0%) opacity(1);
  opacity: 1;
}

/* ─── RIGHT CTA ───────────────────────────── */
.tk-trustbar-cta {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px;
}
/* ★ Ẩn CTA trên mobile */
@media (max-width: 767px) { .tk-trustbar-cta { display: none; } }

.tk-trustbar-link {
  font-family: var(--tk-font);
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: #64748B;
  text-decoration: none; display: inline-flex; align-items: center;
  gap: 6px; white-space: nowrap; transition: color 0.2s ease;
}
.tk-trustbar-link:hover { color: var(--tk-cobalt); }
.tk-trustbar-arrow { color: var(--tk-tangerine); transition: transform 0.2s ease; flex-shrink: 0; }
.tk-trustbar-link:hover .tk-trustbar-arrow { transform: translateX(3px); }

/* ★ GLOBAL text ẩn trên mobile */
@media (max-width: 767px) { .tk-label-global { display: none; } }
/*===TKT-BLOCK-SPLIT===*/
/* Reset cơ bản cho wrapper */
.tkt-horizontal-banner-wrap {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto 2.5rem auto; /* Khoảng cách với section dưới */
  display: block;
}

/* Khung kính nổi khối (Liquid Glass Wrapper) */
.tkt-glass-promo {
  display: block;
  width: 100%;
  height: auto; /* FIX: Tự động ôm sát theo chiều cao thực của hình */
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  background-color: #F4F7FC; /* Tech Gray - theo Guideline */
  
  /* Viền và đổ bóng mô phỏng kính */
  border: 1px solid rgba(0, 79, 159, 0.1); /* Cobalt color */
  box-shadow: 0 10px 30px rgba(0, 79, 159, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  
  /* Hiệu ứng chuyển động mượt mà */
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), 
              box-shadow 0.4s ease, 
              border-color 0.4s ease;
}

/* Hiệu ứng Popup 3D khi Hover */
.tkt-glass-promo:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 25px 50px rgba(0, 79, 159, 0.15), inset 0 1px 0 rgba(255, 255, 255, 1);
  border-color: rgba(239, 125, 0, 0.4); /* Tangerine Accent */
  z-index: 30;
}

/* Lớp 1: Hình nền phản chiếu mờ (Lấy chính ảnh banner làm nền) */
.tkt-promo-bg-blur {
  position: absolute;
  inset: -30px; /* Kéo rộng ra để giấu viền mờ */
  background-image: url('https://thaikhuongpump.com/wp-content/uploads/2026/04/Thumbnail-banner-Ngang-San-pham-copy.webp');
  background-size: cover;
  background-position: center;
  filter: blur(25px);
  opacity: 0.45; /* Độ sáng của bóng nền */
  z-index: 1;
}

/* Lớp 2: Kính mờ phủ lên trên (Frosted Overlay) */
.tkt-promo-glass-layer {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 2;
}

/* Lớp 3: Hình ảnh thật (Bảo toàn nội dung) */
.tkt-promo-image {
  position: relative;
  z-index: 3;
  width: 100%;
  height: auto; /* FIX: Giữ đúng tỷ lệ ảnh */
  display: block; /* FIX: Loại bỏ khoảng trắng thừa dưới đáy ảnh */
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Lớp 4: Tia sáng lướt ngang (Glare) */
.tkt-promo-glare {
  position: absolute;
  top: 0; 
  left: -150%;
  width: 50%; 
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  z-index: 10;
  animation: tkt-swipe-glare 5s infinite;
  pointer-events: none;
}

@keyframes tkt-swipe-glare {
  0%, 60% { left: -150%; }
  100% { left: 200%; }
}

/* Hiệu ứng hình ảnh nảy nhẹ khi Hover */
.tkt-glass-promo:hover .tkt-promo-image {
  transform: scale(1.04);
}

/* Tối ưu hóa kích thước cho thiết bị di động */
@media (max-width: 768px) {
  .tkt-glass-promo {
    /* Đã bỏ height cứng trên mobile, khung sẽ tự ôm sát ảnh */
    border-radius: 12px;
  }
}
/*===TKT-BLOCK-SPLIT===*/
.tkt4-outer *,
.tkt4-outer *::before,
.tkt4-outer *::after { box-sizing: border-box; }

#tk-strategic-universe {
  --navy:     #004F9F;
  --orange:   #EF7D00;
  --charcoal: #0A1929;
  --tkt-font: 'SVN-Avant Garde Gothic', 'Century Gothic', 'Avant Garde', sans-serif;
  position: relative; width: 100%;
  height: 100vh; min-height: 480px; max-height: 900px;
  background: transparent; overflow: hidden;
  font-family: var(--tkt-font);
  user-select: none; cursor: default; isolation: isolate;
}
#tk-strategic-universe img { pointer-events: none; }

/* Fade masks */
#tk-strategic-universe::before,
#tk-strategic-universe::after {
  content: ''; position: absolute; left: 0; right: 0;
  z-index: 50; pointer-events: none;
}
#tk-strategic-universe::before {
  top: 0; height: 120px;
  background: linear-gradient(to bottom, #f8fafc 15%, rgba(248,250,252,0) 100%);
}
#tk-strategic-universe::after {
  bottom: 0; height: 120px;
  background: linear-gradient(to top, #f8fafc 15%, rgba(248,250,252,0) 100%);
}
@media (min-width: 768px) {
  #tk-strategic-universe::before,
  #tk-strategic-universe::after { height: 150px; }
}

/* ─── DASHBOARD GLASS ─────────────────────────────────────────
   ★ ROOT FIX: Mobile KHÔNG dùng left:50% vì animation keyframes
   sẽ override transform → mất translateX(-50%) → lệch sang phải.
   Mobile: dùng left/right absolute stretch + translateY only.
   Desktop: dùng left:50% + translateX(-50%) trong keyframes riêng.
   ─────────────────────────────────────────────────────────────── */
#tk-strategic-universe .dashboard-glass {
  position: absolute;
  /* ★ MOBILE: căn giữa bằng left+right, không dùng left:50% */
  top: 14px;
  left: 1rem;
  right: 1rem;
  z-index: 60;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 20px 40px -10px rgba(0,79,159,0.15),
              inset 0 0 20px rgba(255,255,255,0.8);
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  text-decoration: none;
  /* ★ MOBILE animation: chỉ translateY, không có translateX */
  animation: tkt4float-mobile 8s ease-in-out infinite;
  will-change: transform;
  max-width: 850px;
}
/* ★ Mobile animation: translateY only */
@keyframes tkt4float-mobile {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-6px); }
}

@media (min-width: 480px) {
  #tk-strategic-universe .dashboard-glass {
    top: 18px; padding: 14px 18px; gap: 12px; border-radius: 18px;
  }
}
@media (min-width: 768px) {
  #tk-strategic-universe .dashboard-glass {
    top: 28px; padding: 18px 24px; gap: 16px; border-radius: 22px;
  }
}

/* ★ DESKTOP: chuyển sang left:50% + animation có translateX(-50%) */
@media (min-width: 1024px) {
  #tk-strategic-universe .dashboard-glass {
    top: 40px;
    left: 50%;    /* ★ chỉ dùng left:50% trên desktop */
    right: auto;
    width: 90%;
    padding: 24px 40px; gap: 20px; border-radius: 30px;
    animation: tkt4float-desktop 8s ease-in-out infinite;
  }
}
@keyframes tkt4float-desktop {
  0%,100% { transform: translateX(-50%) translateY(0px); }
  50%      { transform: translateX(-50%) translateY(-8px); }
}

#tk-strategic-universe .dashboard-glass:hover .section-title { color: #003366; }
#tk-strategic-universe .dashboard-glass:hover .tkt4-view-label { color: var(--navy); }

/* ─── TITLE AREA ──────────────────────────── */
.db-title-area {
  border-bottom: 1px solid rgba(0,79,159,0.06);
  padding-bottom: 10px; width: 100%;
  display: flex; justify-content: space-between; align-items: center;
}
@media (min-width: 768px) { .db-title-area { padding-bottom: 16px; } }

.tkt4-icon-box {
  background: rgba(239,246,255,0.5); backdrop-filter: blur(4px);
  padding: 7px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.6);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: var(--navy);
}
.tkt4-icon-box svg { width: 18px; height: 18px; }
@media (min-width: 480px) { .tkt4-icon-box { padding: 9px; border-radius: 11px; } .tkt4-icon-box svg { width: 22px; height: 22px; } }
@media (min-width: 768px) { .tkt4-icon-box { padding: 12px; border-radius: 12px; } .tkt4-icon-box svg { width: 28px; height: 28px; } }

.tkt4-title-left { display: flex; align-items: center; gap: 0.5rem; }
@media (min-width: 768px) { .tkt4-title-left { gap: 1rem; } }
.tkt4-title-text { text-align: left; }

.section-title {
  font-family: var(--tkt-font);
  font-size: 0.95rem; /* ★ mobile cực nhỏ */
  font-weight: 800; color: var(--navy);
  text-transform: uppercase; line-height: 1.1; letter-spacing: -0.01em;
  margin: 0; text-shadow: 0 2px 10px rgba(0,79,159,0.1); transition: color 0.3s;
}
@media (min-width: 480px) { .section-title { font-size: 1.1rem; } }
@media (min-width: 640px) { .section-title { font-size: 1.3rem; } }
@media (min-width: 768px) { .section-title { font-size: 1.6rem; } }

.tkt4-subtitle {
  font-size: 8px; color: var(--orange); font-weight: 700;
  margin: 2px 0 0; text-transform: uppercase; letter-spacing: 0.06em;
}
@media (min-width: 768px) { .tkt4-subtitle { font-size: 11px; letter-spacing: 0.1em; margin: 4px 0 0; } }

.tkt4-view-label {
  display: none; align-items: center; gap: 0.5rem;
  color: #556987; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  transition: color 0.3s; flex-shrink: 0;
}
.tkt4-view-label svg { width: 16px; height: 16px; }
@media (min-width: 768px) { .tkt4-view-label { display: flex; } }

/* ─── STATS GRID ──────────────────────────── */
.db-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* ★ mobile: 2x2 */
  gap: 8px 12px; width: 100%;
}
@media (min-width: 640px) {
  .db-stats-grid { grid-template-columns: repeat(4, 1fr); gap: 6px 16px; }
}
@media (min-width: 768px) {
  .db-stats-grid { gap: 8px 24px; }
}

.stat-box {
  display: flex; flex-direction: column;
  align-items: center; text-align: center; position: relative;
}
/* Divider chỉ hiện khi 4 cột */
.stat-box:not(:last-child)::after {
  content: ''; display: none;
  position: absolute; right: -8px; top: 20%; bottom: 20%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(0,79,159,0.15), transparent);
}
@media (min-width: 640px) {
  .stat-box:not(:last-child)::after { display: block; right: -8px; }
}
@media (min-width: 768px) {
  .stat-box:not(:last-child)::after { right: -12px; }
}

/* ★ Divider ẩn ở col cuối hàng khi 2 cột */
@media (max-width: 639px) {
  .stat-box:nth-child(2)::after,
  .stat-box:nth-child(4)::after { display: none; }
}

.stat-num {
  font-family: var(--tkt-font);
  font-size: 1.2rem; /* ★ mobile */
  font-weight: 900; line-height: 1;
  background: linear-gradient(180deg, var(--navy) 0%, #337ab7 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 2px;
}
.stat-num.orange {
  background: linear-gradient(180deg, var(--orange) 0%, #ffad33 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (min-width: 480px) { .stat-num { font-size: 1.5rem; margin-bottom: 3px; } }
@media (min-width: 640px) { .stat-num { font-size: 1.7rem; } }
@media (min-width: 768px) { .stat-num { font-size: 2.2rem; margin-bottom: 6px; } }

.stat-label {
  font-size: 0.6rem; /* ★ mobile */
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: #556987; line-height: 1.3;
}
@media (min-width: 480px) { .stat-label { font-size: 0.65rem; } }
@media (min-width: 768px) { .stat-label { font-size: 0.75rem; letter-spacing: 0.08em; } }

/* ─── FLOW LAYER & CARDS ──────────────────── */
#tk-strategic-universe .flow-layer {
  position: absolute; top: 50%; left: 50%;
  will-change: transform; backface-visibility: hidden;
  transform-style: preserve-3d;
}
#tk-strategic-universe .grid-item {
  position: absolute; pointer-events: auto;
}
#tk-strategic-universe .grid-item-inner {
  position: relative; width: 100%; height: 100%;
  border-radius: 10px;
  background: #E8EEF7; /* ★ placeholder xanh nhạt brand */
  overflow: hidden; border: 1px solid rgba(255,255,255,0.8);
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1),
              filter 0.4s ease, border-color 0.3s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06));
}
#tk-strategic-universe .grid-img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.01);
  transition: transform 0.6s ease, filter 0.4s ease, opacity 0.5s ease;
  filter: saturate(40%) contrast(92%) brightness(0.95);
  opacity: 0; /* ★ invisible → fade in khi load */
}
#tk-strategic-universe .grid-img.tkt4-loaded { opacity: 1; }
/* ★ Ô vuông fix: img dùng BLANK_GIF nên không có broken icon;
   color:transparent + font-size:0 ẩn alt text trong mọi browser */
#tk-strategic-universe .grid-img.tkt4-lazy {
  background: transparent; color: transparent; font-size: 0;
}

#tk-strategic-universe .grid-item:hover { z-index: 100; }
#tk-strategic-universe .grid-item:hover .grid-item-inner {
  transform: scale(1.15);
  filter: drop-shadow(0 20px 30px rgba(239,125,0,0.2));
  border-color: rgba(239,125,0,0.3);
}
#tk-strategic-universe .grid-item:hover .grid-img {
  transform: scale(1.05);
  filter: saturate(100%) contrast(100%) brightness(100%);
}

/* ─── INFO OVERLAY ────────────────────────── */
#tk-strategic-universe .grid-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 10px; opacity: 0; transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none; z-index: 20;
  background: linear-gradient(to top, rgba(10,25,41,0.85) 0%, transparent 100%);
}
@media (min-width: 768px) { #tk-strategic-universe .grid-info { padding: 16px; } }
#tk-strategic-universe .grid-item:hover .grid-info { opacity: 1; transform: translateY(0); }

.tkt4-info-row { display: flex; justify-content: space-between; align-items: flex-end; }
.tkt4-tag {
  color: var(--orange); font-size: 7px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 2px; display: block;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
@media (min-width: 768px) { .tkt4-tag { font-size: 8px; margin-bottom: 4px; } }
.tkt4-card-title {
  font-weight: 700; font-size: 8px; line-height: 1.3;
  color: white; text-transform: uppercase; display: block;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
@media (min-width: 768px) { .tkt4-card-title { font-size: 10px; } }
.external-link-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: var(--orange); border-radius: 50%; color: white;
  margin-left: auto; box-shadow: 0 2px 6px rgba(239,125,0,0.4); flex-shrink: 0;
}
.external-link-btn svg { width: 9px; height: 9px; }
@media (min-width: 768px) {
  .external-link-btn { width: 24px; height: 24px; }
  .external-link-btn svg { width: 12px; height: 12px; }
}
/*===TKT-BLOCK-SPLIT===*/
.tkt5-wrap *,
.tkt5-wrap *::before,
.tkt5-wrap *::after { box-sizing: border-box; }

.tkt5-wrap {
  --navy:     #004F9F;
  --orange:   #EF7D00;
  --tkt-font: 'SVN-Avant Garde Gothic', 'Century Gothic', 'Avant Garde', sans-serif;
  background-color: #F8FAFC;
  font-family: var(--tkt-font);
  color: #1A1A1A;
}

.tkt5-section {
  position: relative; width: 100%; max-width: 1440px;
  margin: 0 auto; overflow: hidden;
}

/* ─── MOBILE: label row trên, marquee row dưới ────────────── */
.tkt5-wrapper {
  position: relative;
  padding-top: 0.75rem; padding-bottom: 0.75rem;
}

/* ★ MOBILE: label riêng 1 hàng compact */
.tkt5-label-row {
  display: flex; align-items: center; justify-content: center;
  gap: 0.75rem;
  padding: 0 1rem 0.5rem;
}
/* ★ Desktop: ẩn label-row — dùng right-fade-box */
@media (min-width: 768px) { .tkt5-label-row { display: none; } }

.tkt5-label-row-divider {
  width: 28px; height: 1px;
  background: linear-gradient(to right, transparent, rgba(0,79,159,0.3), transparent);
  flex-shrink: 0;
}
.tkt5-label-row-text { text-align: center; }

/* ─── LEFT FADE ───────────────────────────── */
.left-fade-box {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 60px; /* ★ mobile: 120→60px */
  background: linear-gradient(to right, #F8FAFC 20%, transparent 100%);
  z-index: 30; pointer-events: none;
}
@media (min-width: 640px)  { .left-fade-box { width: 80px; } }
@media (min-width: 1024px) { .left-fade-box { width: 120px; } }

/* ─── MIST CONTAINER ──────────────────────── */
.tk-mist-container {
  background-color: #FFFFFF;
  mask-image:
    linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%),
    linear-gradient(to right,  transparent 0%, black 15%, black 85%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%),
    linear-gradient(to right,  transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-composite: destination-in;
  position: relative; width: 100%;
  height: 72px; /* ★ mobile: 100→72px */
  display: flex; align-items: center;
}
@media (min-width: 640px)  { .tk-mist-container { height: 84px; } }
@media (min-width: 1024px) { .tk-mist-container { height: 100px; } }

/* ★ Desktop: nhường khoảng cho right-fade-box */
@media (min-width: 768px) {
  .tk-mist-container { padding-right: 200px; }
}
@media (min-width: 1024px) {
  .tk-mist-container { padding-right: 220px; }
}

.tk-glass-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 20;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0)   0%,
    rgba(255,255,255,0.3) 45%,
    rgba(255,255,255,0.1) 50%,
    rgba(255,255,255,0)  100%
  );
  box-shadow: inset 0 0 20px rgba(255,255,255,0.4);
}

/* ─── MARQUEE TRACK ───────────────────────── */
.tk-marquee-track {
  display: flex; width: max-content;
  animation: tkt5scroll 50s linear infinite; /* ★ mobile: 60→50s (logo nhỏ hơn) */
  will-change: transform;
}
.tk-mist-container:hover .tk-marquee-track { animation-play-state: paused; }
@keyframes tkt5scroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* ─── LOGO ITEM ───────────────────────────── */
.tk-logo-item {
  width: 90px;    /* ★ mobile: 140→90px */
  padding: 0 12px; /* ★ mobile: 20→12px */
  display: flex; align-items: center; justify-content: center;
  filter: grayscale(100%) opacity(0.6);
  transition: filter 0.4s ease;
}
@media (min-width: 480px)  { .tk-logo-item { width: 105px; padding: 0 14px; } }
@media (min-width: 640px)  { .tk-logo-item { width: 120px; padding: 0 16px; } }
@media (min-width: 1024px) { .tk-logo-item { width: 140px; padding: 0 20px; } }

/* ─── CLIENT LOGO ─────────────────────────── */
.tk-client-logo {
  max-width: 100%; height: auto;
  max-height: 32px; /* ★ mobile: 50→32px */
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.35s ease;
  pointer-events: none;

  /* ★ Fix ô vuông: bắt đầu invisible */
  opacity: 0;
  color: transparent; font-size: 0; /* ẩn alt text & broken icon */
}
@media (min-width: 640px)  { .tk-client-logo { max-height: 40px; } }
@media (min-width: 1024px) { .tk-client-logo { max-height: 50px; } }

/* ★ JS thêm class này khi ảnh load xong */
.tk-client-logo.tkt5-loaded {
  opacity: 0.6; /* khớp với filter opacity của parent */
}
.tk-logo-item:hover { filter: grayscale(0%) opacity(1); }
.tk-logo-item:hover .tk-client-logo.tkt5-loaded {
  transform: scale(1.15);
  opacity: 1;
}

/* ─── RIGHT FADE BOX (desktop only) ──────── */
.right-fade-box {
  position: absolute; right: 0; top: 0; bottom: 0;
  display: none; /* ★ ẩn trên mobile */
  align-items: center;
  padding-left: 3rem; padding-right: 1rem;
  background: linear-gradient(to left, #F8FAFC 70%, transparent 100%);
  z-index: 30;
}
@media (min-width: 768px) { .right-fade-box { display: flex; } }

.tkt5-label-group { display: flex; align-items: center; gap: 1rem; }
.tkt5-divider {
  width: 1px; height: 2.5rem;
  background: linear-gradient(to bottom, transparent, rgba(0,79,159,0.3), transparent);
  flex-shrink: 0;
}
.tkt5-label-text { text-align: right; }

/* ─── TRUSTED BY TEXT ─────────────────────── */
.tkt5-trusted-by {
  background: linear-gradient(90deg, #004F9F, #0066CC, #EF7D00);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-family: var(--tkt-font);
  font-weight: 800;
  font-size: 0.75rem; /* ★ mobile: trong label-row */
  text-transform: uppercase; letter-spacing: 0.08em;
  line-height: 1; display: block; margin: 0;
}
@media (min-width: 768px) { .tkt5-trusted-by { font-size: 0.875rem; } }
@media (min-width: 1024px) { .tkt5-trusted-by { font-size: 1rem; letter-spacing: 0.1em; } }

.tkt5-subtitle {
  font-size: 9px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-top: 3px; display: block;
}
@media (min-width: 768px) { .tkt5-subtitle { font-size: 10px; letter-spacing: 0.05em; margin-top: 4px; } }
@media (min-width: 1024px) { .tkt5-subtitle { font-size: 11px; } }
/*===TKT-BLOCK-SPLIT===*/
.tkt6-wrap *,
.tkt6-wrap *::before,
.tkt6-wrap *::after { box-sizing: border-box; }

.tkt6-wrap {
  --primary:  #004F9F;
  --accent:   #EF7D00;
  --charcoal: #0A1929;
  --smoke:    #64748B;
  --platinum: #F8FAFC;
  --tka:      #00897B;
  --tkt-font: 'SVN-Avant Garde Gothic', 'Century Gothic', 'Avant Garde', sans-serif;
  font-family: var(--tkt-font);
  background-color: #F8FAFC;
  color: #0A1929;
  overflow-x: clip;
  overflow-y: visible;
}

/* ─── SECTION ─────────────────────────────── */
.tkt6-section {
  padding-top: 2.5rem; padding-bottom: 2.5rem; /* ★ mobile: giảm từ 4rem */
  position: relative; overflow: visible; background: transparent;
}
@media (min-width: 768px) { .tkt6-section { padding-top: 4rem; padding-bottom: 4rem; } }
@media (min-width: 1024px) { .tkt6-section { padding-top: 6rem; padding-bottom: 6rem; } }

/* ─── BANNER ──────────────────────────────── */
.tkt6-banner {
  position: absolute; top: 0; right: 0;
  width: 100%;
  height: 300px; /* ★ mobile: giảm từ 500px */
  pointer-events: none; z-index: 0; overflow: hidden;
}
@media (min-width: 640px)  { .tkt6-banner { height: 400px; } }
@media (min-width: 1024px) { .tkt6-banner { width: 65%; height: 600px; } }

.tkt6-banner-mask-left {
  position: absolute; top: 0; bottom: 0; left: 0; width: 75%; /* ★ Tăng fade để bảo vệ text */
  background: linear-gradient(to right, #F8FAFC 15%, rgba(248,250,252,0.95) 55%, transparent 100%);
  z-index: 10;
}
@media (min-width: 768px) { .tkt6-banner-mask-left { width: 55%; } }

.tkt6-banner-mask-bottom {
  position: absolute; bottom: 0; left: 0; right: 0; height: 70%; /* ★ mobile: fade nhanh hơn */
  background: linear-gradient(to top, #F8FAFC 30%, rgba(248,250,252,0.8) 65%, transparent 100%);
  z-index: 10;
}
@media (min-width: 1024px) { .tkt6-banner-mask-bottom { height: 60%; } }

.tkt6-banner-img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 20%;
  transform: translateX(5%) scale(1.05);
  opacity: 0.6; /* ★ mobile: mờ hơn để không cạnh tranh với text */
  display: block;
}
@media (min-width: 1024px) { .tkt6-banner-img { opacity: 0.95; } }

/* ─── BLOBS ───────────────────────────────── */
.tkt6-blobs {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  contain: layout style paint;
}
.tkt6-blob-wrap { position: absolute; border-radius: 9999px; mix-blend-mode: multiply; }
.tkt6-blob-wrap-1 { top: 0; right: 5%; width: 800px; height: 800px; filter: blur(150px); }
.tkt6-blob-wrap-2 { bottom: -10%; left: -5%; width: 700px; height: 700px; filter: blur(120px); }
.tkt6-blob { width: 100%; height: 100%; border-radius: 9999px; }
.tkt6-blob-1 {
  background: rgba(219,234,254,0.5);
  will-change: opacity;
  animation: tkt6pulse 4s ease-in-out infinite;
}
.tkt6-blob-2 { background: rgba(255,237,213,0.5); }
@keyframes tkt6pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ─── CONTAINER ───────────────────────────── */
.tkt6-container {
  max-width: 1440px; margin: 0 auto;
  padding: 0 1rem; /* ★ mobile: compact */
  position: relative; z-index: 10;
}
@media (min-width: 640px)  { .tkt6-container { padding: 0 1.25rem; } }
@media (min-width: 1024px) { .tkt6-container { padding: 0 3rem; } }

/* ─── HEADER ──────────────────────────────── */
.tkt6-header {
  width: 100%;
  margin-bottom: 1.75rem; /* ★ mobile: giảm từ 3rem */
}
@media (min-width: 768px)  { .tkt6-header { margin-bottom: 2.5rem; } }
@media (min-width: 1024px) { .tkt6-header { margin-bottom: 4rem; } }

.tkt6-eyebrow { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
@media (min-width: 768px) { .tkt6-eyebrow { margin-bottom: 1rem; } }
.tkt6-eyebrow-line {
  width: 2rem; height: 2px; background: var(--accent); border-radius: 9999px;
  box-shadow: 0 0 10px #EF7D00; flex-shrink: 0;
}
@media (min-width: 768px) { .tkt6-eyebrow-line { width: 2.5rem; } }
.tkt6-eyebrow-text {
  font-size: 10px; /* ★ mobile: nhỏ hơn */
  font-weight: 700; letter-spacing: 0.2em;
  color: var(--primary); text-transform: uppercase;
}
@media (min-width: 768px) { .tkt6-eyebrow-text { font-size: 12px; letter-spacing: 0.25em; } }

.tkt6-header-inner {
  display: flex; flex-direction: column;
  justify-content: space-between; align-items: flex-start;
  gap: 1rem; /* ★ mobile: giảm từ 2rem */
}
@media (min-width: 1024px) { .tkt6-header-inner { flex-direction: row; align-items: flex-end; gap: 2rem; } }

.tkt6-header-left { width: 100%; }
@media (min-width: 1024px) { .tkt6-header-left { width: 66.666%; } }

.heading-tk {
  font-family: var(--tkt-font);
  text-transform: uppercase; letter-spacing: 0;
  display: block; position: relative; z-index: 10; overflow: visible;
  filter: drop-shadow(0 2px 10px rgba(255,255,255,1)) drop-shadow(0 4px 20px rgba(255,255,255,0.8)); /* Glow kép mạnh để tách hẳn nền */
}
.tkt6-h2-light {
  display: block; font-weight: 800; font-size: 1.25rem; line-height: 1.32; padding: 0.12em 0 0.04em; margin-bottom: 2px;
  background: linear-gradient(90deg, #EF7D00 0%, #FF9E2C 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tkt6-h2-dark {
  display: block; font-weight: 900; font-size: 1.6rem; line-height: 1.28; padding: 0.14em 0 0.06em;
  background: linear-gradient(90deg, #004F9F 0%, #002244 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tkt6-h2 {
  margin-bottom: 0.75rem; overflow-wrap: break-word; overflow: visible;
}
@media (min-width: 640px) {
  .tkt6-h2-light { font-size: 1.5rem; }
  .tkt6-h2-dark { font-size: 2rem; }
  .tkt6-h2 { margin-bottom: 1rem; }
}
@media (min-width: 1024px) {
  .tkt6-h2-light { font-size: 1.875rem; letter-spacing: 0.02em; }
  .tkt6-h2-dark { font-size: 2.75rem; letter-spacing: 0; }
  .tkt6-h2 { margin-bottom: 1.25rem; }
}
.tkt6-br { display: none; }
@media (min-width: 1024px) { .tkt6-br { display: block; } }

.tkt6-desc {
  font-size: 14px; /* ★ mobile: nhỏ hơn */
  color: var(--smoke); font-weight: 500; line-height: 1.7;
  max-width: 42rem; text-align: left; /* ★ mobile: left thay vì justify */
}
@media (min-width: 768px)  { .tkt6-desc { font-size: 15px; text-align: justify; } }
@media (min-width: 1024px) { .tkt6-desc { font-size: 17px; } }

.tkt6-header-right { width: 100%; display: flex; }
@media (min-width: 1024px) { .tkt6-header-right { width: 33.333%; justify-content: flex-end; padding-bottom: 0.5rem; } }

.tkt6-cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--accent); font-weight: 800;
  font-size: 10px; /* ★ mobile */
  text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none;
  padding: 0.5rem 1rem; /* ★ mobile: compact */
  background: rgba(255,255,255,0.8); backdrop-filter: blur(12px);
  border: 1px solid rgba(239,125,0,0.2); border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: box-shadow 0.3s ease; white-space: nowrap;
}
@media (min-width: 768px)  { .tkt6-cta { font-size: 0.875rem; padding: 0.75rem 1.5rem; } }
.tkt6-cta:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.tkt6-cta svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.3s ease; }
@media (min-width: 768px) { .tkt6-cta svg { width: 16px; height: 16px; } }
.tkt6-cta:hover svg { transform: translateX(5px); }

/* ─── STATS GRID ──────────────────────────── */
.tkt6-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* ★ mobile: 2 cột thay vì 1 */
  gap: 0.625rem; /* ★ mobile: gap nhỏ */
  margin-bottom: 1.75rem; /* ★ mobile: giảm từ 4rem */
}
@media (min-width: 640px)  { .tkt6-stats { gap: 0.875rem; margin-bottom: 2.5rem; } }
@media (min-width: 1024px) { .tkt6-stats { grid-template-columns: repeat(5, 1fr); gap: 1.25rem; margin-bottom: 4rem; } }

/* ★ 5 items / 2 cột → item thứ 5 full width ở giữa */
.tkt6-stats .glass-stat:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
@media (min-width: 1024px) {
  .tkt6-stats .glass-stat:last-child:nth-child(odd) { grid-column: auto; }
}

.glass-stat {
  background: linear-gradient(145deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 100%);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,1);
  border-left: 1px solid rgba(255,255,255,0.7);
  border-right: 1px solid rgba(255,255,255,0.3);
  border-bottom: 1px solid rgba(255,255,255,0.3);
  border-radius: 14px; /* ★ mobile: nhỏ hơn */
  padding: 10px 12px; /* ★ mobile: compact */
  box-shadow: 0 10px 30px -5px rgba(0,79,159,0.05), inset 0 0 15px rgba(255,255,255,0.5);
  transition: transform 0.4s ease, background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  display: flex; align-items: center;
  gap: 10px; /* ★ mobile: giảm từ 16px */
  cursor: default;
}
@media (min-width: 640px)  { .glass-stat { padding: 12px 14px; gap: 12px; border-radius: 16px; } }
@media (min-width: 1024px) { .glass-stat { padding: 16px; gap: 16px; border-radius: 20px; } }
.glass-stat:hover {
  transform: translateY(-4px);
  background: linear-gradient(145deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.7) 100%);
  box-shadow: 0 20px 40px -10px rgba(0,79,159,0.1), inset 0 0 20px rgba(255,255,255,0.8);
  border-color: rgba(0,79,159,0.2);
}

.liquid-icon {
  width: 38px; height: 38px; /* ★ mobile: 56→38px */
  flex-shrink: 0; border-radius: 10px;
  background: linear-gradient(135deg, #FFFFFF 0%, #E0F2FE 100%);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: inset 2px 2px 4px rgba(255,255,255,1), 0 8px 16px rgba(0,79,159,0.08);
  display: flex; align-items: center; justify-content: center; color: #004F9F;
  transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}
.liquid-icon svg { width: 18px; height: 18px; } /* ★ mobile: nhỏ hơn */
@media (min-width: 640px) {
  .liquid-icon { width: 44px; height: 44px; border-radius: 12px; }
  .liquid-icon svg { width: 20px; height: 20px; }
}
@media (min-width: 1024px) {
  .liquid-icon { width: 56px; height: 56px; border-radius: 16px; }
  .liquid-icon svg { width: 24px; height: 24px; }
}
.glass-stat:hover .liquid-icon {
  background: linear-gradient(135deg, #004F9F 0%, #0066CC 100%);
  color: white; transform: scale(1.05); box-shadow: 0 10px 20px rgba(0,79,159,0.2);
}

.stat-num-display {
  font-family: var(--tkt-font);
  font-weight: 800;
  font-size: 18px; /* ★ mobile: 28→18px */
  line-height: 1; margin-bottom: 2px; color: #004F9F;
}
@media (min-width: 640px)  { .stat-num-display { font-size: 22px; margin-bottom: 3px; } }
@media (min-width: 1024px) { .stat-num-display { font-size: 28px; margin-bottom: 4px; } }
.stat-label-tk {
  font-size: 9px; /* ★ mobile */
  font-weight: 600; color: #64748B;
  text-transform: uppercase; letter-spacing: 0.04em;
}
@media (min-width: 640px)  { .stat-label-tk { font-size: 10px; letter-spacing: 0.05em; } }
@media (min-width: 1024px) { .stat-label-tk { font-size: 12px; } }

/* ─── BENTO WRAPPER ───────────────────────── */
.bento-wrapper {
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 20px; /* ★ mobile: 32→20px */
  box-shadow: 0 30px 60px -15px rgba(0,79,159,0.08), inset 0 0 30px rgba(255,255,255,0.6);
  overflow: hidden;
  display: grid; grid-template-columns: 1fr;
  transition: box-shadow 0.5s ease;
  position: relative; width: 100%; max-width: 72rem;
  margin: 0 auto;
}
@media (min-width: 768px)  { .bento-wrapper { border-radius: 28px; } }
@media (min-width: 1024px) { .bento-wrapper { grid-template-columns: 1fr 1fr; border-radius: 32px; } }

.bento-cell {
  position: relative;
  padding: 20px; /* ★ mobile: 32→20px */
  display: flex; flex-direction: column;
  transition: background 0.4s ease;
  text-decoration: none; overflow: hidden; z-index: 10;
}
@media (min-width: 640px)  { .bento-cell { padding: 28px; } }
@media (min-width: 1024px) { .bento-cell { padding: 48px; } }

.cell-tkt { background: rgba(255,255,255,0.4); border-bottom: 1px solid rgba(0,47,108,0.08); }
.cell-tks { border-bottom: 1px solid rgba(0,47,108,0.08); }
@media (min-width: 1024px) {
  .cell-tkt { grid-column: 1/2; grid-row: 1/3; border-bottom: none; border-right: 1px solid rgba(0,47,108,0.08); }
  .cell-tks { grid-column: 2/3; grid-row: 1/2; }
  .cell-tka { grid-column: 2/3; grid-row: 2/3; }
}
.cell-tkt:hover { background: rgba(0,79,159,0.03); }
.cell-tks:hover { background: rgba(239,125,0,0.03); }
.cell-tka:hover { background: rgba(0,137,123,0.03); }

.glow-bg {
  position: absolute; top: 10%; left: 10%;
  width: 200px; height: 200px; /* ★ mobile: nhỏ hơn */
  border-radius: 50%; filter: blur(70px); opacity: 0.10; z-index: 0;
  transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none;
}
@media (min-width: 1024px) { .glow-bg { width: 250px; height: 250px; opacity: 0.12; } }
.cell-tkt .glow-bg { background: #004F9F; width: 280px; height: 280px; top: 0; left: 10%; opacity: 0.12; }
@media (min-width: 1024px) { .cell-tkt .glow-bg { width: 350px; height: 350px; opacity: 0.15; } }
.cell-tks .glow-bg { background: #EF7D00; top: 0; left: 0; }
.cell-tka .glow-bg { background: #00897B; top: 0; left: 0; }
.bento-cell:hover .glow-bg { opacity: 0.22; transform: scale(1.1); }

.bento-watermark {
  position: absolute;
  font-family: var(--tkt-font);
  font-weight: 900; line-height: 0.75;
  color: rgba(10,25,41,0.02); pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.25,0.8,0.25,1), color 0.6s ease;
  z-index: 0; letter-spacing: -0.04em; user-select: none;
}
/* ★ mobile: clamp min nhỏ hơn tránh overflow */
.cell-tkt .bento-watermark { bottom: -10px; right: 5px; font-size: clamp(72px,20vw,240px); }
.cell-tks .bento-watermark { bottom: -10px; right: 5px; font-size: clamp(60px,16vw,160px); }
.cell-tka .bento-watermark { bottom: -10px; right: 5px; font-size: clamp(60px,16vw,160px); }
@media (min-width: 1024px) {
  .cell-tkt .bento-watermark { right: 10px; font-size: clamp(120px,18vw,240px); }
  .cell-tks .bento-watermark { right: 10px; font-size: clamp(100px,12vw,160px); }
  .cell-tka .bento-watermark { right: 10px; font-size: clamp(100px,12vw,160px); }
}
.cell-tkt:hover .bento-watermark { color: rgba(0,79,159,0.04);  transform: scale(1.02) translateX(-10px); }
.cell-tks:hover .bento-watermark { color: rgba(239,125,0,0.04); transform: scale(1.05) translateY(-10px); }
.cell-tka:hover .bento-watermark { color: rgba(0,137,123,0.04); transform: scale(1.05) translateY(-10px); }

.eco-logo-box {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: flex-start;
}
.eco-logo-box img {
  max-height: 100%; object-fit: contain; mix-blend-mode: multiply;
  transition: transform 0.5s cubic-bezier(0.25,0.8,0.25,1);
  transform-origin: left center;
}
.bento-cell:hover .eco-logo-box img { transform: scale(1.05); }

.eco-badge {
  display: inline-block; padding: 4px 10px; border-radius: 6px;
  font-size: 9px; /* ★ mobile */
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 14px; width: fit-content; position: relative; z-index: 10;
}
@media (min-width: 768px)  { .eco-badge { font-size: 10px; padding: 5px 12px; margin-bottom: 20px; letter-spacing: 0.1em; } }
.bg-tkt-light { background: #EBF4FF; color: #004F9F; border: 1px solid #BFDBFE; }
.bg-tks-light { background: #FFF7ED; color: #EF7D00; border: 1px solid #FED7AA; }
.bg-tka-light { background: #F0FDFA; color: #00897B; border: 1px solid #99F6E4; }

.tkt6-cell-h3-tkt {
  font-family: var(--tkt-font);
  font-size: clamp(1.125rem,3.5vw,2.125rem); font-weight: 700;
  color: var(--primary); margin-bottom: 4px; line-height: 1.34; padding: 0.08em 0 0.04em; position: relative; z-index: 10; overflow: visible;
}
.tkt6-cell-h3-tks {
  font-family: var(--tkt-font);
  font-size: clamp(1.125rem,3vw,1.625rem); font-weight: 700;
  color: var(--accent); margin-bottom: 4px; line-height: 1.34; padding: 0.08em 0 0.04em; overflow: visible;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.05)); position: relative; z-index: 10;
}
.tkt6-cell-h3-tka {
  font-family: var(--tkt-font);
  font-size: clamp(1.125rem,3vw,1.625rem); font-weight: 700;
  color: var(--tka); margin-bottom: 4px; line-height: 1.34; padding: 0.08em 0 0.04em; position: relative; z-index: 10; overflow: visible;
}

.tkt6-sub-accent {
  font-size: 11px; /* ★ mobile */
  font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.875rem; position: relative; z-index: 10;
}
.tkt6-sub-muted {
  font-size: 11px; /* ★ mobile */
  font-weight: 700; color: rgba(10,25,41,0.6);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.875rem; position: relative; z-index: 10;
}
@media (min-width: 768px) {
  .tkt6-sub-accent { font-size: 13px; letter-spacing: 0.15em; margin-bottom: 1.25rem; }
  .tkt6-sub-muted  { font-size: 12px; letter-spacing: 0.1em;  margin-bottom: 1.25rem; }
}
.tkt6-cell-desc {
  color: var(--charcoal);
  font-size: 0.875rem; /* ★ mobile */
  line-height: 1.7; font-weight: 500;
  margin-bottom: 1.25rem; max-width: 100%; position: relative; z-index: 10;
}
@media (min-width: 768px)  { .tkt6-cell-desc { font-size: 1rem; line-height: 1.75; margin-bottom: 2rem; max-width: 28rem; } }

.eco-list { list-style: none; padding: 0; margin: 0; position: relative; z-index: 10; }
.eco-list li {
  display: flex; align-items: flex-start; gap: 10px; /* ★ mobile: 14→10px */
  font-size: 13px; /* ★ mobile: 14.5→13px */
  color: #475569; margin-bottom: 12px; line-height: 1.55; font-weight: 500;
}
@media (min-width: 768px) { .eco-list li { gap: 14px; font-size: 14.5px; margin-bottom: 16px; line-height: 1.6; } }
.eco-list li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; } /* ★ mobile: 22→18px */
@media (min-width: 768px) { .eco-list li svg { width: 22px; height: 22px; } }
.cell-tkt .eco-list li svg { color: #004F9F; }
.cell-tks .eco-list li svg { color: #EF7D00; }
.cell-tka .eco-list li svg { color: #00897B; }

.eco-explore {
  margin-top: auto; padding-top: 16px; /* ★ mobile: 24→16px */
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; /* ★ mobile */
  font-weight: 700; text-transform: uppercase;
  transition: color 0.3s; position: relative; z-index: 10;
}
@media (min-width: 768px) { .eco-explore { padding-top: 24px; font-size: 14px; gap: 8px; } }
.eco-explore svg { transition: transform 0.3s; }
.cell-tkt .eco-explore { color: #004F9F; }
.cell-tks .eco-explore { color: #EF7D00; }
.cell-tka .eco-explore { color: #00897B; }
.bento-cell:hover .eco-explore svg { transform: translateX(6px); }

/* ─── UTILS ───────────────────────────────── */
.tkt6-mt-auto { margin-top: auto; }
.tkt6-cell-inner { display: flex; flex-direction: column; height: 100%; position: relative; z-index: 10; }

/* Logo heights — mobile nhỏ hơn */
.tkt6-logo-tall { height: 2.5rem; }
.tkt6-logo-sm   { height: 2rem; }
@media (min-width: 640px) { .tkt6-logo-tall { height: 3.5rem; } .tkt6-logo-sm { height: 2.75rem; } }
@media (min-width: 768px) { .tkt6-logo-tall { height: 4rem; }   .tkt6-logo-sm { height: 3rem; }   }
@media (min-width: 1024px){ .tkt6-logo-tall { height: 5rem; }   .tkt6-logo-sm { height: 3.5rem; } }

.tkt6-logo-tkt img { max-width: 160px; }
.tkt6-logo-tks img { max-width: 130px; }
.tkt6-logo-tka img { max-width: 130px; }
@media (min-width: 640px) {
  .tkt6-logo-tkt img { max-width: 200px; }
  .tkt6-logo-tks img { max-width: 160px; }
  .tkt6-logo-tka img { max-width: 160px; }
}
@media (min-width: 768px) {
  .tkt6-logo-tkt img { max-width: 240px; }
  .tkt6-logo-tks img { max-width: 180px; }
  .tkt6-logo-tka img { max-width: 180px; }
}
@media (min-width: 1024px) {
  .tkt6-logo-tkt img { max-width: 280px; }
  .tkt6-logo-tks img { max-width: 200px; }
  .tkt6-logo-tka img { max-width: 200px; }
}
.tkt6-mb4 { margin-bottom: 0.75rem; }
.tkt6-mb5 { margin-bottom: 1rem; }
.tkt6-mb6 { margin-bottom: 1.25rem; }
.tkt6-mb8 { margin-bottom: 1.5rem; }
@media (min-width: 768px) {
  .tkt6-mb4 { margin-bottom: 1rem; }
  .tkt6-mb5 { margin-bottom: 1.25rem; }
  .tkt6-mb6 { margin-bottom: 1.5rem; }
  .tkt6-mb8 { margin-bottom: 2rem; }
}
.tkt6-list-bottom { margin-bottom: 0.75rem; }
@media (min-width: 768px) { .tkt6-list-bottom { margin-bottom: 1rem; } }
/*===TKT-BLOCK-SPLIT===*/
.tkt7-wrap *,
.tkt7-wrap *::before,
.tkt7-wrap *::after { box-sizing: border-box; }

.tkt7-wrap {
  --primary:  #004F9F;
  --accent:   #EF7D00;
  --charcoal: #0A1929;
  --smoke:    #64748B;
  --tkt-font: 'SVN-Avant Garde Gothic', 'Century Gothic', 'Avant Garde', sans-serif;
  font-family: var(--tkt-font);
  background-color: #F8FAFC;
  color: #0A1929;
  overflow-x: hidden;
}

/* ─── SECTION ─────────────────────────────── */
.tkt7-section {
  position: relative;
  padding-top: 2.5rem; padding-bottom: 2.5rem; /* ★ mobile: 4rem→2.5rem */
  overflow: hidden;
  background: #F1F5F9;
}
@media (min-width: 768px)  { .tkt7-section { padding-top: 4rem; padding-bottom: 4rem; } }
@media (min-width: 1024px) { .tkt7-section { padding-top: 6rem; padding-bottom: 6rem; } }

/* ─── BLOBS ───────────────────────────────── */
.tkt7-blobs {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  contain: layout style paint;
}
.tkt7-blob-wrap {
  position: absolute; border-radius: 9999px; mix-blend-mode: multiply;
}
/* ★ mobile: blob 300px thay vì 600px — tiết kiệm bộ nhớ */
.tkt7-blob-wrap-1 { top: 0; right: 0; width: 300px; height: 300px; filter: blur(60px); }
.tkt7-blob-wrap-2 { bottom: 0; left: 0; width: 300px; height: 300px; filter: blur(60px); }
@media (min-width: 768px) {
  .tkt7-blob-wrap-1 { width: 450px; height: 450px; filter: blur(80px); }
  .tkt7-blob-wrap-2 { width: 450px; height: 450px; filter: blur(80px); }
}
@media (min-width: 1024px) {
  .tkt7-blob-wrap-1 { width: 600px; height: 600px; filter: blur(100px); }
  .tkt7-blob-wrap-2 { width: 600px; height: 600px; filter: blur(100px); }
}
.tkt7-blob { width: 100%; height: 100%; border-radius: 9999px; }
.tkt7-blob-1 {
  background: rgba(219,234,254,0.6); will-change: transform;
  animation: tkt7float 6s ease-in-out infinite;
}
.tkt7-blob-2 {
  background: rgba(255,247,237,0.6); will-change: transform;
  animation: tkt7float 6s ease-in-out infinite; animation-delay: 2s;
}
@keyframes tkt7float {
  0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); }
}

/* ─── CONTAINER ───────────────────────────── */
.tkt7-container {
  max-width: 80rem; margin: 0 auto;
  padding-left: 1rem; padding-right: 1rem; /* ★ mobile: 1.5rem→1rem */
  position: relative; z-index: 10;
}
@media (min-width: 640px)  { .tkt7-container { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .tkt7-container { padding-left: 2rem; padding-right: 2rem; } }

/* ─── MAIN GRID ───────────────────────────── */
.tkt7-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 1.75rem; /* ★ mobile: 3rem→1.75rem */
  align-items: start;
}
@media (min-width: 768px)  { .tkt7-grid { gap: 2.5rem; } }
@media (min-width: 1024px) { .tkt7-grid { grid-template-columns: 5fr 7fr; gap: 5rem; } }

/* ─── LEFT COLUMN ─────────────────────────── */
.tkt7-col-left { padding-top: 0.5rem; } /* ★ mobile: 1rem→0.5rem */
.tkt7-col-left > * + * { margin-top: 1.5rem; } /* ★ mobile: 2.5rem→1.5rem */
@media (min-width: 768px)  { .tkt7-col-left > * + * { margin-top: 2rem; } }
@media (min-width: 1024px) { .tkt7-col-left { padding-top: 1rem; } .tkt7-col-left > * + * { margin-top: 2.5rem; } }

/* Eyebrow badge */
.tkt7-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.625rem; /* ★ mobile: 0.75rem→0.625rem */
  background: white; padding: 0.2rem 0.625rem;
  border-radius: 9999px; border: 1px solid #E2E8F0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
@media (min-width: 768px) { .tkt7-badge { padding: 0.25rem 0.75rem; margin-bottom: 0.75rem; } }
.tkt7-badge-dot {
  width: 6px; height: 6px; border-radius: 9999px;
  background: #22C55E; flex-shrink: 0;
  animation: tkt7pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes tkt7pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.tkt7-badge-text {
  font-size: 9px; /* ★ mobile: 10→9px */
  font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.08em;
}
@media (min-width: 768px) { .tkt7-badge-text { font-size: 10px; letter-spacing: 0.1em; } }

/* Heading */
.tkt7-heading-tk { font-family: var(--tkt-font); text-transform: uppercase; letter-spacing: 0.02em; }
.tkt7-h2 {
  font-size: 1.5rem; /* ★ mobile: 1.875rem→1.5rem */
  line-height: 1.2; font-weight: 700; color: var(--charcoal); margin-bottom: 0.625rem;
}
@media (min-width: 640px)  { .tkt7-h2 { font-size: 1.75rem; margin-bottom: 0.875rem; } }
@media (min-width: 1024px) { .tkt7-h2 { font-size: 2.25rem; margin-bottom: 1rem; } }
.tkt7-h2-accent { color: var(--primary); }
.tkt7-intro {
  font-size: 13px; /* ★ mobile: 15px→13px */
  line-height: 1.65; color: var(--smoke);
}
@media (min-width: 768px) { .tkt7-intro { font-size: 15px; line-height: 1.75; } }

/* ─── TIMELINE ────────────────────────────── */
.tkt7-timeline-wrap { position: relative; padding-left: 0.5rem; }
.tkt7-process-line {
  position: absolute;
  left: 20px; /* ★ mobile: 24→20px (khớp icon 40px) */
  top: 20px; bottom: 40px;
  width: 2px;
  background: linear-gradient(to bottom, #004F9F 0%, rgba(0,79,159,0.1) 100%);
  z-index: 0;
}
@media (min-width: 768px) { .tkt7-process-line { left: 24px; top: 24px; } }

.tkt7-steps > * + * { margin-top: 1.25rem; } /* ★ mobile: 2rem→1.25rem */
@media (min-width: 768px) { .tkt7-steps > * + * { margin-top: 1.75rem; } }
@media (min-width: 1024px) { .tkt7-steps > * + * { margin-top: 2rem; } }

.tkt7-step {
  position: relative; display: flex; align-items: flex-start;
  gap: 0.875rem; /* ★ mobile: 1.25rem→0.875rem */
  cursor: default;
}
@media (min-width: 768px) { .tkt7-step { gap: 1.25rem; } }

.tkt7-step-icon {
  width: 40px; height: 40px; /* ★ mobile: 48→40px */
  flex-shrink: 0; border-radius: 10px; background: white;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  border: 1px solid #F1F5F9;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 10; color: var(--primary);
  transition: background 0.3s ease, color 0.3s ease;
}
.tkt7-step-icon svg { width: 17px; height: 17px; } /* ★ mobile: 20→17px */
@media (min-width: 768px) {
  .tkt7-step-icon { width: 48px; height: 48px; border-radius: 12px; }
  .tkt7-step-icon svg { width: 20px; height: 20px; }
}
.tkt7-step:hover .tkt7-step-icon { background: var(--primary); color: white; }

.tkt7-step-title {
  font-family: var(--tkt-font);
  font-size: 0.9375rem; /* ★ mobile: 1.125rem→0.9375rem */
  font-weight: 700; color: var(--charcoal);
  transition: color 0.3s ease; margin: 0 0 2px;
  line-height: 1.3;
}
@media (min-width: 768px) { .tkt7-step-title { font-size: 1.125rem; margin-bottom: 4px; } }
.tkt7-step:hover .tkt7-step-title { color: var(--primary); }
.tkt7-step-desc { font-size: 12px; color: var(--smoke); margin: 0; line-height: 1.5; }
@media (min-width: 768px) { .tkt7-step-desc { font-size: 0.875rem; } }

/* ─── FORM CARD ───────────────────────────── */
.tkt7-form-card {
  background: #004F9F;
  background-image: radial-gradient(at 100% 0%, rgba(255,255,255,0.1) 0px, transparent 50%);
  border-radius: 18px; /* ★ mobile: 24→18px */
  box-shadow: 0 25px 50px -12px rgba(0,79,159,0.4);
  color: white;
  padding: 1.25rem; /* ★ mobile: 2rem→1.25rem */
  position: relative;
  overflow: hidden;
}
@media (min-width: 640px)  { .tkt7-form-card { padding: 1.75rem; border-radius: 20px; } }
@media (min-width: 1024px) { .tkt7-form-card { padding: 2.5rem; border-radius: 24px; } }

/* Form header */
.tkt7-form-header {
  display: flex; flex-direction: column;
  justify-content: space-between; align-items: flex-start;
  gap: 1rem; /* ★ mobile: 1.5rem→1rem */
  margin-bottom: 1.25rem; /* ★ mobile: 2rem→1.25rem */
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 1.25rem;
}
@media (min-width: 640px)  { .tkt7-form-header { flex-direction: row; align-items: center; gap: 1.5rem; } }
@media (min-width: 1024px) { .tkt7-form-header { margin-bottom: 2rem; padding-bottom: 1.5rem; } }

.tkt7-h3 {
  font-family: var(--tkt-font);
  font-size: 1.2rem; /* ★ mobile: 1.5→1.2rem */
  font-weight: 700; color: white; margin: 0 0 3px;
}
@media (min-width: 768px) { .tkt7-h3 { font-size: 1.5rem; margin-bottom: 4px; } }
.tkt7-form-subtitle { color: rgba(219,234,254,1); font-size: 12px; margin: 0; }
@media (min-width: 768px) { .tkt7-form-subtitle { font-size: 0.875rem; } }

/* Hotline */
.tkt7-hotline {
  display: flex; align-items: center; gap: 0.625rem;
  background: rgba(255,255,255,0.1); padding: 0.5rem 0.875rem;
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.1);
  text-decoration: none; flex-shrink: 0;
  transition: background 0.3s ease;
  /* ★ mobile: full width khi stack */
  width: 100%;
}
@media (min-width: 640px) { .tkt7-hotline { width: auto; padding: 0.625rem 1rem; border-radius: 12px; gap: 0.75rem; } }
.tkt7-hotline:hover { background: rgba(255,255,255,0.2); }
.tkt7-hotline-icon {
  width: 32px; height: 32px; /* ★ mobile: 36→32px */
  border-radius: 50%; background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: white; flex-shrink: 0; box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.tkt7-hotline-icon svg { width: 14px; height: 14px; }
@media (min-width: 640px) {
  .tkt7-hotline-icon { width: 36px; height: 36px; }
  .tkt7-hotline-icon svg { width: 16px; height: 16px; }
}
.tkt7-hotline-label {
  font-size: 8px; font-weight: 700; color: rgba(191,219,254,1);
  text-transform: uppercase; letter-spacing: 0.08em;
  line-height: 1; display: block; margin-bottom: 2px;
}
@media (min-width: 640px) { .tkt7-hotline-label { font-size: 9px; } }
.tkt7-hotline-number {
  font-family: var(--tkt-font);
  font-size: 1rem; /* ★ mobile: 1.125→1rem */
  font-weight: 700; color: white; line-height: 1; display: block;
}
@media (min-width: 640px) { .tkt7-hotline-number { font-size: 1.125rem; } }

/* ─── FORM FIELDS ─────────────────────────── */
.tkt7-form > * + * { margin-top: 1rem; } /* ★ mobile: 1.25→1rem */
@media (min-width: 768px) { .tkt7-form > * + * { margin-top: 1.25rem; } }

.tkt7-input-grid {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
}
@media (min-width: 640px) { .tkt7-input-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }

.tkt7-field > * + * { margin-top: 0.3rem; }

.tkt7-label {
  display: block; font-size: 10px; font-weight: 700;
  color: rgba(219,234,254,1); text-transform: uppercase;
  margin-left: 3px; letter-spacing: 0.06em;
}
@media (min-width: 768px) { .tkt7-label { font-size: 11px; margin-left: 4px; letter-spacing: 0.1em; } }

.tkt7-input, .tkt7-textarea {
  display: block; width: 100%;
  background: #FFFFFF; border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.625rem 0.875rem; /* ★ mobile: 0.75/1rem → 0.625/0.875rem */
  font-size: 13px; /* ★ mobile: 0.875rem→13px */
  color: #0A1929; font-family: var(--tkt-font);
  transition: box-shadow 0.2s ease;
}
@media (min-width: 640px) { .tkt7-input, .tkt7-textarea { padding: 0.75rem 1rem; font-size: 0.875rem; } }
.tkt7-input::placeholder, .tkt7-textarea::placeholder { color: #94A3B8; }
.tkt7-input:focus, .tkt7-textarea:focus {
  box-shadow: 0 0 0 3px rgba(239,125,0,0.3); outline: none;
}
.tkt7-textarea { resize: none; }

/* ─── RADIO GROUP ─────────────────────────── */
.tkt7-radio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 0.5rem; /* ★ mobile: 0.75→0.5rem */
}
/* ★ Rất nhỏ (<360px): xuống 1 cột để không bị bể chữ */
@media (max-width: 359px) { .tkt7-radio-grid { grid-template-columns: 1fr; } }
@media (min-width: 640px) { .tkt7-radio-grid { gap: 0.75rem; } }

.tkt7-radio { cursor: pointer; }
.tkt7-radio input[type="radio"] {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tkt7-radio-btn {
  display: block;
  padding: 0.5rem 0.375rem; /* ★ mobile: 0.625/0.5→0.5/0.375rem */
  border-radius: 8px; background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 10px; /* ★ mobile: 0.75rem→10px */
  font-weight: 700; color: rgba(219,234,254,1); text-align: center;
  transition: background 0.2s ease, color 0.2s ease;
  user-select: none; line-height: 1.3;
}
@media (min-width: 640px) { .tkt7-radio-btn { padding: 0.625rem 0.5rem; font-size: 0.75rem; } }
.tkt7-radio-btn:hover { background: rgba(255,255,255,0.2); }
.tkt7-radio input[type="radio"]:checked + .tkt7-radio-btn {
  background: white; color: var(--primary);
}

/* ─── SUBMIT BUTTON ───────────────────────── */
.tkt7-submit {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; background: var(--accent); color: white;
  font-family: var(--tkt-font); font-weight: 700;
  font-size: 0.8rem; /* ★ mobile: 0.9rem→0.8rem */
  text-transform: uppercase;
  padding: 0.75rem 1rem; /* ★ mobile: 0.875→0.75rem */
  border-radius: 8px; border: none; cursor: pointer; margin-top: 0.875rem;
  box-shadow: 0 10px 15px -3px rgba(239,125,0,0.3), 0 4px 6px -4px rgba(239,125,0,0.2);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  letter-spacing: 0.04em;
}
.tkt7-submit svg { width: 14px; height: 14px; }
@media (min-width: 640px) {
  .tkt7-submit { font-size: 0.9rem; padding: 0.875rem 1rem; margin-top: 1rem; }
  .tkt7-submit svg { width: 16px; height: 16px; }
}
.tkt7-submit:hover {
  background: #D06800; transform: translateY(-3px);
  box-shadow: 0 10px 15px -3px rgba(239,125,0,0.5), 0 4px 6px -4px rgba(239,125,0,0.3);
}

/* ─── SUCCESS PANEL ───────────────────────── */
.tkt7-success-panel {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 50;
  display: none; /* Flex when active */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: var(--charcoal);
  animation: tkt7-fadeIn 0.4s ease-out;
}
.tkt7-success-box {
  background: white; border: 1px solid #E2E8F0; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
  border-radius: 12px; padding: 2rem 1.5rem; width: 100%; text-align: center;
  position: relative; overflow: hidden;
}
.tkt7-success-bar {
  position:absolute; top:0; left:0; right:0; height:4px; 
  background:linear-gradient(90deg, var(--navy, #004F9F), var(--accent));
}
.tkt7-success-icon-wrap {
  width: 4rem; height: 4rem; background: #ECFDF5; color: #10B981;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem auto; box-shadow: 0 0 0 4px white, 0 0 0 5px #E2E8F0;
}
.tkt7-success-icon-wrap svg { width: 2rem; height: 2rem; }
.tkt7-success-title { font-family: var(--tkt-font); font-size: 1.25rem; font-weight: 800; color: var(--primary); margin-bottom: 0.5rem; text-transform: uppercase; }
.tkt7-success-desc { font-size: 0.875rem; color: var(--smoke); line-height: 1.5; margin-bottom: 1.25rem; }
.tkt7-success-info {
  background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 6px; padding: 0.75rem;
  font-size: 0.75rem; color: var(--charcoal); margin-bottom: 1.5rem;
}
.tkt7-success-info i { color: #DC2626; margin-right: 4px; font-style: normal; font-weight: bold; }
.tkt7-success-close {
  background: none; border: none; font-family: var(--tkt-font); font-size: 0.75rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem;
  border-radius: 6px; transition: background 0.3s;
}
.tkt7-success-close:hover { background: #F1F5F9; }

@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes tkt7-fadeIn {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}