/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 28 — Capability white liquid glass + widen .site-main to 1320
   For: thaikhuongpump.com /product/* (body.tkt-v6-page scope)
   Date: 2026-05-28
   Deploy: paste vào WP Customizer › Additional CSS (or push qua REST)
           — block "ROUND 28" này thay thế các block Round 25/26/27 nếu có
   ════════════════════════════════════════════════════════════════════════════
   ROOT CAUSE
   1. Section "Năng lực thực tế" dark navy
      → .tkt-v6-cap (product-v6.css L822) set `background: var(--bg-dark)`.
      Rounds 25-27 trước target .tkt-v6-cap3 / .tkt-v6-block--cap-v3 nhưng
      các class này KHÔNG có trong DOM live → CSS không bao giờ apply.
      Fix phải target đúng class đang render: .tkt-v6-cap.
   2. Layout product single quá hẹp
      → hello-elementor/assets/css/theme.css quy định
        @media(min-width:1200px) .site-main { max-width:1140px }
      → cap toàn bộ product page ở 1140 (footer = 1320, DS token = 1440).
      Fix: override .site-main lên 1320 (match footer), scope body.tkt-v6-page.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── 28.1 · CAPABILITY SECTION — WHITE LIQUID GLASS ──────────────────────── */
html body.tkt-v6-page .tkt-v6-cap {
  background: rgba(255, 255, 255, 0.62) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(245,249,253,0.62) 100%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  color: var(--fg-1, #1E2328) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 1px 2px rgba(0, 43, 92, 0.04),
    0 12px 32px rgba(0, 43, 92, 0.06),
    0 32px 80px rgba(0, 43, 92, 0.04);
  position: relative;
  overflow: hidden;
}
html body.tkt-v6-page .tkt-v6-cap::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(55% 50% at 8% 4%, rgba(0, 80, 144, 0.06), transparent 60%),
    radial-gradient(40% 50% at 94% 96%, rgba(239, 125, 0, 0.05), transparent 60%);
  pointer-events: none; z-index: 0;
}
html body.tkt-v6-page .tkt-v6-cap > * { position: relative; z-index: 1; }

html body.tkt-v6-page .tkt-v6-cap__content { padding: 48px 44px !important; }
@media (max-width: 1024px) { html body.tkt-v6-page .tkt-v6-cap__content { padding: 36px 28px !important; } }
@media (max-width: 768px)  { html body.tkt-v6-page .tkt-v6-cap__content { padding: 28px 20px !important; }
                              html body.tkt-v6-page .tkt-v6-cap { border-radius: 18px; } }

html body.tkt-v6-page .tkt-v6-cap__eyebrow {
  color: var(--tkt-orange-600, #EF7D00) !important;
  font-family: var(--font-mono);
  font-size: 11px !important; letter-spacing: 0.15em !important;
  text-transform: uppercase; font-weight: 700 !important; margin: 0 0 12px !important;
}
html body.tkt-v6-page .tkt-v6-cap__t {
  color: var(--tkt-blue-900, #002B5C) !important;
  font-family: var(--font-display);
  font-weight: 900 !important;
  font-size: clamp(24px, 2.6vw, 34px) !important;
  line-height: 1.15 !important; letter-spacing: -0.3px !important;
  margin: 0 0 16px !important;
}
html body.tkt-v6-page .tkt-v6-cap__t em { color: var(--tkt-orange-600, #EF7D00) !important; font-style: normal !important; }
html body.tkt-v6-page .tkt-v6-cap__d {
  color: var(--fg-2, #4A5567) !important;
  font-size: 15px !important; line-height: 1.6 !important;
  margin: 0 0 24px !important; max-width: 56ch;
}

html body.tkt-v6-page .tkt-v6-cap__stats {
  border-top: 1px solid rgba(0, 43, 92, 0.12) !important;
  padding-top: 20px !important; gap: 36px !important;
}
html body.tkt-v6-page .tkt-v6-cap__sv {
  color: var(--tkt-blue-900, #002B5C) !important;
  font-family: var(--font-display);
  font-weight: 900 !important; font-size: 28px !important; letter-spacing: -0.3px !important;
}
html body.tkt-v6-page .tkt-v6-cap__sl {
  color: var(--fg-3, #64748B) !important;
  font-family: var(--font-mono);
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: 0.08em !important; text-transform: uppercase;
}

html body.tkt-v6-page .tkt-v6-cap__cta {
  background: var(--tkt-orange-600, #EF7D00) !important;
  color: #fff !important;
  font-family: var(--font-display);
  font-weight: 800 !important; font-size: 13px !important;
  letter-spacing: 0.06em !important; text-transform: uppercase;
  padding: 14px 26px !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 24px rgba(239, 125, 0, 0.28);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
html body.tkt-v6-page .tkt-v6-cap__cta:hover {
  background: var(--tkt-orange-700, #C45F00) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(239, 125, 0, 0.4);
}

html body.tkt-v6-page .tkt-v6-cap__media {
  background:
    radial-gradient(60% 70% at 50% 50%, rgba(91, 174, 245, 0.20), transparent 60%),
    linear-gradient(135deg, rgba(0, 79, 159, 0.10) 0%, rgba(0, 43, 92, 0.06) 100%) !important;
  border-left: 1px solid rgba(0, 43, 92, 0.08);
}
@media (max-width: 1024px) {
  html body.tkt-v6-page .tkt-v6-cap__media { border-left: 0; border-top: 1px solid rgba(0, 43, 92, 0.08); }
}
html body.tkt-v6-page .tkt-v6-cap__play {
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, 0.5),
    0 0 0 24px rgba(255, 255, 255, 0.22),
    0 12px 32px rgba(0, 43, 92, 0.18);
}
html body.tkt-v6-page .tkt-v6-cap__play svg { color: var(--tkt-blue-700, #004F9F) !important; }
html body.tkt-v6-page .tkt-v6-cap__media-tag {
  color: var(--tkt-blue-900, #002B5C) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(0, 43, 92, 0.10) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* ─── 28.2 · EXPAND .site-main 1140 → 1320 (match footer width) ───────────── */
@media (min-width: 1200px) {
  html body.tkt-v6-page .site-main {
    max-width: 1320px !important;
    padding-inline: 40px !important;
    box-sizing: border-box;
  }
}
@media (min-width: 1500px) {
  html body.tkt-v6-page .site-main { padding-inline: 48px !important; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  html body.tkt-v6-page .site-main {
    max-width: 100% !important;
    padding-inline: 28px !important;
    box-sizing: border-box;
  }
}

@media (min-width: 1200px) {
  html body.tkt-v6-page .tkt-v6-wrap,
  html body.tkt-v6-page .tkt-v6-wrap:has(> .tkt-v6-bc) {
    max-width: 100% !important;
    padding-inline: 0 !important;
  }
  html body.tkt-v6-page .tkt-v6-bc { max-width: 100% !important; }
  html body.tkt-v6-page .tkt-v6-nav__inner { max-width: 1320px !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ROUND 29 — Fix double-frame + match site width
   For: thaikhuongpump.com /product/* (body.tkt-v6-page scope)
   Date: 2026-05-28
   Supersedes: Round 28 width section. Removes Round 27 negative-margin overflow.
   ════════════════════════════════════════════════════════════════════════════
   ROOT CAUSE (đo bằng computed rect, viewport 1400px)
   1. Section "Năng lực" rộng 1540px, lệch x=-79 trong khi sibling = 1240px x=71
      → Round 27 inline CSS còn áp:
        section.tkt-v6-block--cap-v3 { margin-left:-150px; margin-right:-150px;
                                       max-width: calc(100% + 300px) }
      → Section overflow ra ngoài parent, không match sibling.
   2. CHỒNG 2 KHUNG:
      - Outer section .tkt-v6-block--cap-v3: glass + border-radius:20 + shadow
      - Inner .tkt-v6-cap: glass + border-radius:24 + shadow (Round 28)
      → 2 layer overlap, radius khác nhau gây "double frame".
   3. .site-main 1320px nhỏ hơn các page khác (1381px = full bleed)
      → Round 28 cap quá thấp. Bump lên 1500 (match site width).
   FIX:
     29.1. .site-main 1320 → 1500 (match site full-bleed feel)
     29.2. Xóa Round 27 negative margin trên cap section
     29.3. Neutralize outer section glass (transparent passthrough)
     29.4. Enhance inner .tkt-v6-cap — richer liquid glass (more blur/sat/aurora)
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── 29.1 · MATCH SITE WIDTH — .site-main 1320 → 1500 ─────────────────── */
@media (min-width: 1200px) {
  html body.tkt-v6-page .site-main {
    max-width: 1500px !important;
    padding-inline: 40px !important;
    box-sizing: border-box;
  }
}
@media (min-width: 1600px) {
  html body.tkt-v6-page .site-main {
    padding-inline: 56px !important;
  }
}

/* ─── 29.2 · KILL Round 27 negative-margin on cap section ──────────────── */
@media (min-width: 1180px) {
  html body.tkt-v6-page section.tkt-v6-block.tkt-v6-block--cap-v3,
  html body.tkt-v6-page div.product.product.product > section.tkt-v6-block--cap-v3,
  html body.tkt-v6-page section.tkt-v6-block.alt.tkt-v6-block--cap-v3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
}
@media (max-width: 1179px) {
  html body.tkt-v6-page section.tkt-v6-block--cap-v3 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
}

/* ─── 29.3 · NEUTRALIZE outer section glass — 1 frame only ─────────────── */
html body.tkt-v6-page section.tkt-v6-block.tkt-v6-block--cap-v3 {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

/* ─── 29.4 · ENHANCE inner .tkt-v6-cap — richer liquid glass ───────────── */
html body.tkt-v6-page .tkt-v6-cap {
  background: rgba(255, 255, 255, 0.55) !important;
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(248, 251, 255, 0.62) 50%,
    rgba(240, 246, 252, 0.55) 100%) !important;
  -webkit-backdrop-filter: blur(48px) saturate(200%) !important;
  backdrop-filter: blur(48px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  border-radius: 28px !important;
  color: var(--fg-1, #1E2328) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 43, 92, 0.06),
    0 1px 2px rgba(0, 43, 92, 0.04),
    0 8px 24px rgba(0, 43, 92, 0.05),
    0 24px 64px rgba(0, 43, 92, 0.05),
    0 48px 120px rgba(0, 43, 92, 0.04) !important;
  position: relative;
  overflow: hidden;
}
/* Richer aurora — 3 light points */
html body.tkt-v6-page .tkt-v6-cap::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 8% 4%, rgba(0, 80, 144, 0.10), transparent 60%),
    radial-gradient(50% 60% at 94% 96%, rgba(239, 125, 0, 0.08), transparent 60%),
    radial-gradient(40% 40% at 50% 50%, rgba(91, 174, 245, 0.05), transparent 70%) !important;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 768px) {
  html body.tkt-v6-page .tkt-v6-cap {
    border-radius: 20px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   ROUND 30 — Fix mobile cap overflow + redesign brand row liquid glass
   For: thaikhuongpump.com /product/* (body.tkt-v6-page scope)
   Date: 2026-05-28
   ════════════════════════════════════════════════════════════════════════════
   ROOT CAUSE
   1. Mobile section "Năng lực" lệch x=176px → overflow ngang
      → Round 27 inline có `left: 50% !important; right: 50% !important`
        với selector specificity (0,4,2). Round 29 mobile rule chỉ (0,3,2)
        → thua tie-break, left:50% còn áp.
      Fix: bump selector lên (0,4,2) + reset inset-inline-*.
   2. Brand row box quá lớn, solid white (KHÔNG glass), left-align trong cột phải
      Fix: logo -15%, padding compact, white liquid glass,
           center horizontal trong .summary.entry-summary.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── 30.1 · KILL mobile left:50% overflow on cap section ────────────────── */
@media (max-width: 1179px) {
  html body.tkt-v6-page section.tkt-v6-block.tkt-v6-block--cap-v3,
  html body.tkt-v6-page div.product.product.product > section.tkt-v6-block--cap-v3,
  html body.tkt-v6-page section.tkt-v6-block.alt.tkt-v6-block--cap-v3 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    transform: none !important;
    position: relative !important;
  }
  /* Cap inner cũng full width */
  html body.tkt-v6-page section.tkt-v6-block--cap-v3 .tkt-v6-cap {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    box-sizing: border-box;
  }
  html body.tkt-v6-page section.tkt-v6-block--cap-v3 .tkt-v6-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
  }
}

/* ─── 30.2 · BRAND ROW — liquid glass + tighter + smaller logo + centered ── */
/* Container: liquid glass pill */
html body.tkt-v6-page .tkt-v6-brandrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 14px 6px 10px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(248, 251, 255, 0.55) 100%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(0, 43, 92, 0.04),
    0 4px 12px rgba(0, 43, 92, 0.06),
    0 8px 24px rgba(0, 43, 92, 0.03) !important;
  margin-bottom: 14px !important;
}

/* Logo — reduce 15% (123→105 w, 42→36 h) */
html body.tkt-v6-page .tkt-v6-brandrow__logo {
  width: auto !important;
  height: 36px !important;
  max-height: 36px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Manufacturer text */
html body.tkt-v6-page .tkt-v6-brandrow__mfr {
  font-family: var(--font-display, 'SVN-Avant Garde Gothic', Jost, sans-serif) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: rgba(10, 26, 51, 0.62) !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

/* SKU — mono caps with divider */
html body.tkt-v6-page .tkt-v6-brandrow__sku {
  font-family: var(--font-mono, 'JetBrains Mono', 'IBM Plex Mono', monospace) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--tkt-blue-900, #002B5C) !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  padding-left: 10px !important;
  border-left: 1px solid rgba(0, 43, 92, 0.15) !important;
}

/* CENTER brand row inside right column (.summary.entry-summary) */
html body.tkt-v6-page div.product.product.product > .summary.entry-summary {
  text-align: center !important;
}
/* But other summary children stay left-aligned (H1, AIO, stats, trust, CTA, etc.) */
html body.tkt-v6-page .summary.entry-summary > *:not(.tkt-v6-brandrow) {
  text-align: left !important;
}

/* Mobile compact brand row */
@media (max-width: 768px) {
  html body.tkt-v6-page .tkt-v6-brandrow {
    padding: 5px 12px 5px 8px !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  html body.tkt-v6-page .tkt-v6-brandrow__logo {
    height: 28px !important;
    max-height: 28px !important;
  }
  html body.tkt-v6-page .tkt-v6-brandrow__mfr {
    font-size: 10.5px !important;
  }
  html body.tkt-v6-page .tkt-v6-brandrow__sku {
    font-size: 10px !important;
    padding-left: 8px !important;
  }
}

/* Very narrow mobile — hide mfr text, keep logo + SKU only */
@media (max-width: 360px) {
  html body.tkt-v6-page .tkt-v6-brandrow__mfr {
    display: none !important;
  }
  html body.tkt-v6-page .tkt-v6-brandrow__sku {
    border-left: 0 !important;
    padding-left: 4px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   ROUND 31 — Brand row LEFT-ALIGN + strip "NN · " number prefix from eyebrows
   For: thaikhuongpump.com /product/* (body.tkt-v6-page scope)
   Date: 2026-05-28
   Supersedes: Round 30 center summary rule
   ════════════════════════════════════════════════════════════════════════════
   Changes:
   31.1. Brand row back to LEFT-align trong .summary (revert R30 center)
   31.2. Strip "NN · " (e.g., "02 · ", "03 · ") prefix from section eyebrows
         → CSS-only via text-indent + overflow:hidden trick. 
         "NN · " ≈ 5 chars × 1ch each (mono) + 5 × letter-spacing(0.15em)
         = ~6.5ch total. text-indent: -6.5ch shifts off LHS, overflow clips.
         Original text vẫn còn trong DOM → SEO + a11y giữ nguyên.
         Áp dụng cho: .tkt-v6-block__eyebrow, .tkt-v6-cap3__eyebrow,
                       .tkt-v6-cap__eyebrow.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── 31.1 · REVERT brand row to LEFT-ALIGN ───────────────────────────────── */
html body.tkt-v6-page div.product.product.product > .summary.entry-summary {
  text-align: left !important;
}
/* Brand row tự nhiên left vì inline-flex trong block-level container */
html body.tkt-v6-page .tkt-v6-brandrow {
  align-self: flex-start !important;
}

/* ─── 31.2 · STRIP "NN · " prefix từ TẤT CẢ section eyebrows ──────────────── */
html body.tkt-v6-page .tkt-v6-block__head .tkt-v6-block__eyebrow,
html body.tkt-v6-page .tkt-v6-cap3__head .tkt-v6-cap3__eyebrow,
html body.tkt-v6-page .tkt-v6-cap__content .tkt-v6-cap__eyebrow {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-indent: -6.5ch !important;
  /* Ensure không có padding-left can thiệp */
  padding-left: 0 !important;
}

/* Mobile: ch width có thể khác chút, dùng -6ch an toàn hơn */
@media (max-width: 768px) {
  html body.tkt-v6-page .tkt-v6-block__head .tkt-v6-block__eyebrow,
  html body.tkt-v6-page .tkt-v6-cap3__head .tkt-v6-cap3__eyebrow,
  html body.tkt-v6-page .tkt-v6-cap__content .tkt-v6-cap__eyebrow {
    text-indent: -6ch !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   ROUND 32 — Clean up: hide 3 sections + narrow 10% + redesign related grid
   For: thaikhuongpump.com /product/* (body.tkt-v6-page scope)
   Date: 2026-05-28
   ════════════════════════════════════════════════════════════════════════════
   USER REQUESTS
   1. Bỏ 3 section: #tkt-v6-apps (Ứng dụng), #tkt-v6-cap (Năng lực thực tế),
      #tkt-v6-kb (Kiến thức kỹ thuật) → declutter
   2. Layout hẹp hơn 10%: .site-main 1500 → 1350
   3. Sản phẩm liên quan: redesign per mockup — grid 4-col static,
      large image với pattern bg, clean chips, no carousel buttons
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── 32.1 · HIDE 3 SECTIONS ───────────────────────────────────────────────── */
html body.tkt-v6-page section#tkt-v6-apps,
html body.tkt-v6-page section#tkt-v6-cap,
html body.tkt-v6-page section#tkt-v6-kb,
html body.tkt-v6-page section.tkt-v6-block--cap-v3,
html body.tkt-v6-page section.tkt-v6-block.tkt-v6-block--cap-v3 {
  display: none !important;
}

/* Section nav links to these hidden sections — also hide để khỏi click vào empty anchor */
html body.tkt-v6-page .tkt-v6-nav__link[href="#tkt-v6-apps"],
html body.tkt-v6-page .tkt-v6-nav__link[href="#tkt-v6-cap-anchor"],
html body.tkt-v6-page .tkt-v6-nav__link[href="#tkt-v6-cap"],
html body.tkt-v6-page .tkt-v6-nav__link[href="#tkt-v6-kb-anchor"],
html body.tkt-v6-page .tkt-v6-nav__link[href="#tkt-v6-kb"] {
  display: none !important;
}

/* ─── 32.2 · NARROW LAYOUT 10% — .site-main 1500 → 1350 ───────────────────── */
@media (min-width: 1200px) {
  html body.tkt-v6-page .site-main {
    max-width: 1350px !important;
    padding-inline: 36px !important;
  }
}
@media (min-width: 1500px) {
  html body.tkt-v6-page .site-main {
    padding-inline: 40px !important;
  }
}

/* ─── 32.3 · RELATED PRODUCTS — redesign theo mockup ──────────────────────── */

/* Hide carousel prev/next buttons + repurpose head with bigger title */
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__ctrl {
  display: none !important;
}

/* Section head — eyebrow with dot prefix + larger H2 */
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin-bottom: 32px !important;
  flex-wrap: wrap !important;
}
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-block__head {
  max-width: 760px !important;
  margin-bottom: 0 !important;
}
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-block__eyebrow {
  position: relative !important;
  padding-left: 14px !important;
  text-indent: -6.5ch !important;  /* keep R31 number-strip behavior */
  color: var(--tkt-blue-900, #002B5C) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-block__title {
  font-family: var(--font-display, 'SVN-Avant Garde Gothic') !important;
  font-weight: 900 !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.5px !important;
  color: var(--tkt-blue-900, #002B5C) !important;
  margin: 0 !important;
}
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-block__title em {
  color: var(--tkt-orange-600, #EF7D00) !important;
  font-style: italic !important;
}

/* Convert carousel track to static 4-col grid */
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__track {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  overflow: visible !important;
  transform: none !important;
  scroll-snap-type: none !important;
}
@media (max-width: 1024px) {
  html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__track {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 560px) {
  html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__track {
    grid-template-columns: 1fr !important;
  }
}

/* Only show first 4 cards (mockup design) */
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__item:nth-child(n+5) {
  display: none !important;
}

/* Hide noisy badges per mockup — Sẵn kho mark + SKU N/A */
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__mark,
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__sku {
  display: none !important;
}

/* Card — clean, white, subtle shadow on hover */
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__item {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: rgba(255, 255, 255, 0.55) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(248,251,255,0.52)) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 20px !important;
  padding: 0 !important;
  text-decoration: none !important;
  overflow: hidden !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 2px rgba(0, 43, 92, 0.04),
    0 4px 16px rgba(0, 43, 92, 0.05) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__item:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(239, 125, 0, 0.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 12px 32px rgba(0, 43, 92, 0.12),
    0 24px 56px rgba(0, 43, 92, 0.08) !important;
}

/* Media area — large with diagonal lines pattern */
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__media {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1.05 / 1 !important;
  background-color: #F5F8FB !important;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 9px, rgba(0,80,144,0.045) 9px 10px),
    linear-gradient(180deg, #F8FAFC 0%, #EEF3F8 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__media img {
  position: absolute !important;
  inset: 12% !important;
  width: 76% !important;
  height: 76% !important;
  object-fit: contain !important;
  transition: transform 0.4s ease !important;
}
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__item:hover .tkt-v6-rel__media img {
  transform: scale(1.05) !important;
}

/* Body content under media */
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__name {
  font-family: var(--font-display, 'SVN-Avant Garde Gothic') !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  color: var(--tkt-blue-900, #002B5C) !important;
  margin: 18px 18px 12px !important;
  letter-spacing: -0.2px !important;
  /* clamp 2 lines */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Spec chips */
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__spec {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 0 18px 18px !important;
  margin: 0 !important;
}
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__spec > * {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(0, 43, 92, 0.10) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(0, 43, 92, 0.78) !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

/* Make whole card fade with stagger */
@keyframes tktRelFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__item {
  animation: tktRelFadeUp 0.5s ease forwards;
  opacity: 0;
}
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__item:nth-child(1) { animation-delay: 0s; }
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__item:nth-child(2) { animation-delay: 0.08s; }
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__item:nth-child(3) { animation-delay: 0.16s; }
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__item:nth-child(4) { animation-delay: 0.24s; }

/* ════════════════════════════════════════════════════════════════════════════
   ROUND 33 — Fix 5 UI bugs post-R32 cleanup
   Date: 2026-05-28
   ════════════════════════════════════════════════════════════════════════════
   USER ISSUES (post-R32)
   1. Diagonal lines pattern + white-bg products → 2 mảng màu tách biệt
      Fix: bỏ pattern, dùng soft gradient blend với mọi loại ảnh.
   2. Hover bị cắt bóng — .tkt-v6-rel__wrap overflow:hidden clip shadow.
      Fix: set overflow visible cho __wrap.
   3. Bỏ eyebrow "Sản phẩm cùng dòng" + section cuối (FAQ) content sát box.
      Fix: hide ALL eyebrows + tăng padding FAQ.
   4. "Datasheet" hiển thị "atasheet" (R31 text-indent quá tay) + specs sát hero.
      Fix: hide all numbered eyebrows + tăng top padding specs.
   5. Tabs font 12px nhỏ + active/non-active đều bg 0.12 → khó phân biệt là tab.
      Fix: font 14px + active state solid + clearer hover.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── 33.1 · Remove diagonal pattern, soft blend bg ─────────────────────── */
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__media {
  background-color: #FAFCFE !important;
  background-image: linear-gradient(160deg, #FFFFFF 0%, #F5F8FB 60%, #EEF3F8 100%) !important;
}
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__media::before {
  content: "" !important;
  position: absolute !important; inset: 0 !important;
  background: radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,0.8), transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__media img {
  z-index: 1 !important;
}

/* ─── 33.2 · Fix hover shadow clipping ──────────────────────────────────── */
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__wrap,
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-wrap,
html body.tkt-v6-page #tkt-v6-rel {
  overflow: visible !important;
}
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__track {
  padding: 8px 4px 32px !important;
  margin: -8px -4px -16px !important;
}

/* ─── 33.3 · HIDE ALL section eyebrows ─────────────────────────────────── */
html body.tkt-v6-page .tkt-v6-block__head .tkt-v6-block__eyebrow,
html body.tkt-v6-page .tkt-v6-cap3__head .tkt-v6-cap3__eyebrow,
html body.tkt-v6-page .tkt-v6-cap__content .tkt-v6-cap__eyebrow {
  display: none !important;
}
html body.tkt-v6-page .tkt-v6-block__head {
  margin-bottom: 20px !important;
}

/* ─── 33.4 · Specs section — more top gap from hero ─────────────────────── */
html body.tkt-v6-page #tkt-v6-specs {
  padding-top: 56px !important;
  margin-top: 24px !important;
}
@media (max-width: 768px) {
  html body.tkt-v6-page #tkt-v6-specs {
    padding-top: 36px !important;
    margin-top: 16px !important;
  }
}

/* ─── 33.5 · FAQ section — padding for inner content ────────────────────── */
html body.tkt-v6-page #tkt-v6-faq {
  padding-top: 56px !important;
  padding-bottom: 64px !important;
}
html body.tkt-v6-page #tkt-v6-faq .tkt-v6-wrap {
  padding: 36px 32px !important;
  background: rgba(255, 255, 255, 0.4) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 1px 2px rgba(0, 43, 92, 0.04),
    0 8px 24px rgba(0, 43, 92, 0.04) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
@media (max-width: 768px) {
  html body.tkt-v6-page #tkt-v6-faq .tkt-v6-wrap {
    padding: 24px 18px !important;
    border-radius: 18px !important;
  }
}
html body.tkt-v6-page #tkt-v6-faq .tkt-v6-faq__grid {
  padding: 0 !important;
}

/* ─── 33.6 · TABS — bigger font + clearer active state ─────────────────── */
html body.tkt-v6-page .tkt-v6-tabs {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(0, 43, 92, 0.08) !important;
  border-radius: 999px !important;
  padding: 6px !important;
  gap: 4px !important;
  box-shadow: inset 0 1px 2px rgba(0, 43, 92, 0.04), 0 2px 8px rgba(0, 43, 92, 0.04) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  margin-bottom: 24px !important;
}
html body.tkt-v6-page .tkt-v6-tabs__btn {
  font-family: var(--font-display, 'SVN-Avant Garde Gothic') !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 11px 22px !important;
  border-radius: 999px !important;
  color: rgba(0, 43, 92, 0.62) !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
  letter-spacing: -0.1px !important;
}
html body.tkt-v6-page .tkt-v6-tabs__btn:hover {
  color: var(--tkt-blue-900, #002B5C) !important;
  background: rgba(0, 80, 144, 0.06) !important;
}
html body.tkt-v6-page .tkt-v6-tabs__btn.is-active,
html body.tkt-v6-page .tkt-v6-tabs__btn[aria-selected="true"] {
  color: #fff !important;
  background: linear-gradient(135deg, var(--tkt-blue-700, #004F9F) 0%, var(--tkt-blue-900, #002B5C) 100%) !important;
  background-color: var(--tkt-blue-700, #004F9F) !important;
  font-weight: 700 !important;
  box-shadow:
    0 4px 14px rgba(0, 79, 159, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
@media (max-width: 768px) {
  html body.tkt-v6-page .tkt-v6-tabs__btn {
    font-size: 13px !important;
    padding: 9px 14px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   ROUND 34 — Fix: tabs multi-active + FAQ double frame + card-image blend
   Date: 2026-05-28
   ════════════════════════════════════════════════════════════════════════════
   USER ISSUES (post-R33)
   1. Tabs hiển thị 2 tab active cùng lúc, thao tác chưa mượt
      Root cause: tab 0 có .is-active, tab 1 có aria-selected="true" (stale attr)
      R33 đã match cả 2 selectors → 2 tabs styled active.
      Fix: chỉ dùng .is-active làm active state, aria-selected:not(.is-active)
            override về default.
   2. FAQ section có 2 khung (outer gradient + inner glass)
      Root cause: R33 set glass cho .tkt-v6-wrap, nhưng section .tkt-v6-block.alt
      vẫn có background-image gradient → 2 layer frames.
      Fix: section#tkt-v6-faq background transparent → chỉ inner wrap glass.
   3. Card thẻ sản phẩm chưa hòa với hình sản phẩm
      Root cause: media bg (linear-gradient #FFF → #EEF3F8) khác card glass bg
      → visible seam khi hình product có bg trắng.
      Fix: media bg transparent → card glass pass through toàn card.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── 34.1 · Tabs — only .is-active triggers active, aria-only stays default */
html body.tkt-v6-page .tkt-v6-tabs__btn[aria-selected="true"]:not(.is-active) {
  color: rgba(0, 43, 92, 0.62) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
/* Hover state still works for aria-selected without is-active */
html body.tkt-v6-page .tkt-v6-tabs__btn[aria-selected="true"]:not(.is-active):hover {
  color: var(--tkt-blue-900, #002B5C) !important;
  background: rgba(0, 80, 144, 0.06) !important;
}

/* ─── 34.2 · FAQ — remove outer section bg, keep only inner glass card ── */
html body.tkt-v6-page section#tkt-v6-faq,
html body.tkt-v6-page section#tkt-v6-faq.tkt-v6-block,
html body.tkt-v6-page section#tkt-v6-faq.tkt-v6-block.alt {
  background: transparent !important;
  background-image: none !important;
}

/* ─── 34.3 · Related card-image blend — transparent media bg ───────────── */
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__media {
  background-color: transparent !important;
  background-image: none !important;
}
/* Subtle highlight overlay vẫn giữ, làm nhẹ hơn để không tạo edge */
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__media::before {
  background: radial-gradient(70% 50% at 50% 0%, rgba(255,255,255,0.35), transparent 70%) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   ROUND 37 — Related products: 5-col carousel with prev/next + smaller cards
   Date: 2026-05-28
   ════════════════════════════════════════════════════════════════════════════
   User request:
   - Cards nhỏ hơn → hiển thị 5 cards/row
   - Prev/Next buttons để xem thêm products (carousel)
   - Long-term: query more by size/material (per memory note)
   
   Strategy:
   - Override R32 grid → horizontal flex carousel
   - Snap-x for smooth scroll
   - Show all 8 items (carousel scrolls through)
   - Re-enable ctrl buttons (hidden by R32)
   - Compact card padding for smaller width
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── 37.1 · Re-enable ctrl buttons (R32 hid them) ────────────────────── */
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__ctrl {
  display: inline-flex !important;
  gap: 8px !important;
  align-items: center !important;
  align-self: flex-end !important;
}
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__btn {
  width: 40px !important; height: 40px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0, 43, 92, 0.12) !important;
  background: rgba(255, 255, 255, 0.7) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--tkt-blue-700, #004F9F) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 1px 2px rgba(0, 43, 92, 0.04), 0 4px 12px rgba(0, 43, 92, 0.05) !important;
}
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__btn:hover:not([disabled]) {
  background: var(--tkt-blue-700, #004F9F) !important;
  color: #fff !important;
  border-color: var(--tkt-blue-700, #004F9F) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 79, 159, 0.25) !important;
}
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__btn[disabled],
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__btn.is-disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ─── 37.2 · Track → horizontal scroll carousel ───────────────────────── */
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__track {
  display: flex !important;
  grid-template-columns: unset !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  padding: 8px 4px 28px !important;
  margin: -8px -4px -16px !important;
}
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__track::-webkit-scrollbar {
  display: none !important;
}

/* ─── 37.3 · Show ALL items (R32 hid n+5) ────────────────────────────── */
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__item:nth-child(n+5) {
  display: flex !important;
}

/* ─── 37.4 · Card sizing: 5 visible at desktop, smaller padding ──────── */
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__item {
  flex: 0 0 calc((100% - 4 * 14px) / 5) !important;
  scroll-snap-align: start !important;
  min-width: 0 !important;
}

/* Compact card content for smaller width */
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__name {
  font-size: 13px !important;
  margin: 14px 14px 8px !important;
  letter-spacing: -0.1px !important;
}
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__spec {
  padding: 0 14px 14px !important;
  gap: 4px !important;
}
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__spec > * {
  font-size: 10px !important;
  padding: 3px 8px !important;
  letter-spacing: 0 !important;
}
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__cat {
  font-size: 9.5px !important;
  margin: 14px 14px 4px !important;
  letter-spacing: 0.12em !important;
}

/* ─── 37.5 · Responsive breakpoints ──────────────────────────────────── */
@media (max-width: 1200px) {
  html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__item {
    flex: 0 0 calc((100% - 3 * 14px) / 4) !important;
  }
}
@media (max-width: 900px) {
  html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__item {
    flex: 0 0 calc((100% - 2 * 12px) / 3) !important;
  }
  html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__track { gap: 12px !important; }
}
@media (max-width: 640px) {
  html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__item {
    flex: 0 0 78% !important;
  }
  html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__btn {
    width: 36px !important; height: 36px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   ROUND 38 — Mobile 2.5 cards + buttons positioned ON slide row (traditional)
   Date: 2026-05-28
   ════════════════════════════════════════════════════════════════════════════
   User feedback (mobile):
   - Card hiện 78% width (1.3 cards visible) → quá to. Cần 2.5 cards/screen.
   - Nút prev/next ở góc trên (head area) → không "truyền thống". Cần đặt 
     hai bên cards row, vertically centered (traditional carousel pattern).
   
   Strategy:
   - Mobile breakpoint: card width 38% → 2.5 cards visible (2 full + 0.5 peek)
   - ctrl ABSOLUTE positioned trên .tkt-v6-rel__wrap (parent)
   - Buttons bleed left/right edges, white solid bg + heavy shadow
   - JS (R37 update) sẽ precise-position ctrl tại track vertical center
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── 38.1 · Mobile: 2.5 cards visible + compact text ──────────────────── */
@media (max-width: 640px) {
  html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__item {
    flex: 0 0 38% !important;
  }
  html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__track {
    gap: 10px !important;
    padding: 8px 0 24px !important;
  }
  html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__name {
    font-size: 12px !important;
    margin: 12px 12px 6px !important;
    -webkit-line-clamp: 2 !important;
  }
  html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__spec {
    padding: 0 12px 12px !important;
    gap: 3px !important;
  }
  html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__spec > * {
    font-size: 9px !important;
    padding: 2px 6px !important;
    letter-spacing: 0 !important;
  }
  html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__cat {
    font-size: 8.5px !important;
    margin: 12px 12px 4px !important;
    letter-spacing: 0.1em !important;
  }
}

/* Even narrower: very small phones */
@media (max-width: 400px) {
  html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__item {
    flex: 0 0 42% !important;
  }
}

/* ─── 38.2 · Move ctrl buttons to slide row (absolute over track) ──────── */
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__wrap {
  position: relative !important;
}

html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__ctrl {
  position: absolute !important;
  top: 58% !important;             /* JS will fine-tune to track center */
  transform: translateY(-50%) !important;
  left: -6px !important;
  right: -6px !important;
  width: calc(100% + 12px) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  pointer-events: none !important;
  z-index: 10 !important;
  margin: 0 !important;
  align-self: auto !important;
  gap: 0 !important;
}

/* Buttons solid white + heavy shadow để pop trên cards */
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__btn {
  pointer-events: auto !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(0, 43, 92, 0.08) !important;
  box-shadow:
    0 2px 4px rgba(0, 43, 92, 0.06),
    0 8px 28px rgba(0, 43, 92, 0.18) !important;
  width: 44px !important;
  height: 44px !important;
}
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__btn:hover:not(.is-disabled) {
  background: var(--tkt-blue-700, #004F9F) !important;
  background-color: var(--tkt-blue-700, #004F9F) !important;
  color: #FFFFFF !important;
  border-color: var(--tkt-blue-700, #004F9F) !important;
  box-shadow:
    0 4px 8px rgba(0, 79, 159, 0.18),
    0 12px 32px rgba(0, 79, 159, 0.32) !important;
}

/* Mobile: smaller buttons + closer to edge */
@media (max-width: 640px) {
  html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__btn {
    width: 38px !important;
    height: 38px !important;
  }
  html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__ctrl {
    left: 4px !important;
    right: 4px !important;
    width: calc(100% - 8px) !important;
  }
}

/* Hide ctrl entirely on very small mobile when buttons overlap cards too much */
/* (still scroll-swipe works) — actually keep, just smaller */

/* ─── 38.3 · Head row simpler — only title since ctrl moved out ────────── */
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__head {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: flex-end !important;
  gap: 24px !important;
  margin-bottom: 24px !important;
}
@media (max-width: 768px) {
  html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__head {
    margin-bottom: 20px !important;
  }
}

/* Brand link can stay in head (right side) — R35 element */
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__brand-link {
  margin-left: auto !important;
  align-self: flex-end !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   ROUND 39 — Mobile 1.8 cards + larger card padding
   Date: 2026-05-28
   User feedback: 2.5 cards quá nhỏ → đổi 1.8 cards
   ════════════════════════════════════════════════════════════════════════════ */

/* Mobile: 1.8 cards visible (1 full + 0.8 peek) */
@media (max-width: 640px) {
  html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__item {
    flex: 0 0 55% !important;        /* was 38% → now 55% */
  }
  /* Restore card text size since cards bigger now */
  html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__name {
    font-size: 14px !important;
    margin: 16px 16px 8px !important;
  }
  html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__spec {
    padding: 0 16px 16px !important;
    gap: 5px !important;
  }
  html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__spec > * {
    font-size: 10.5px !important;
    padding: 3px 9px !important;
  }
  html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__cat {
    font-size: 10px !important;
    margin: 16px 16px 6px !important;
    letter-spacing: 0.12em !important;
  }
}

/* Very small phones: still 1.8 but slightly bigger peek */
@media (max-width: 400px) {
  html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__item {
    flex: 0 0 62% !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   ROUND 40 — Remove per-card eyebrow (user request) + chip consistency
   Date: 2026-05-28
   ════════════════════════════════════════════════════════════════════════════
   User: "tôi note bỏ tag trên tên sản phẩm đi rồi sao vẫn còn" → HIDE eyebrow
   trên tất cả thẻ sản phẩm liên quan (AODD · 0.5" ALUMINUM, PHỤ TÙNG, etc.)
   Per-card consistency: ưu tiên chính xác + đồng bộ.
   ════════════════════════════════════════════════════════════════════════════ */

/* Hide per-card eyebrow (.tkt-v6-rel__cat) — user requested removal */
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__cat {
  display: none !important;
}

/* Adjust .tkt-v6-rel__name margin since eyebrow removed (top edge) */
html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__name {
  margin-top: 18px !important;
}
@media (max-width: 640px) {
  html body.tkt-v6-page #tkt-v6-rel .tkt-v6-rel__name {
    margin-top: 16px !important;
  }
}