/* ╔══════════════════════════════════════════════════╗
   ║  THẦN SỐ HỌC v2 — GREEK-CHINESE FUSION DESIGN  ║
   ╚══════════════════════════════════════════════════╝ */

/* ── Coiny — title hero font ── */
@font-face {
  font-family: 'Coiny';
  /* Root-relative so the browser inherits the page's scheme. The minifier rewrites relative
   * paths to absolute ones, and a bundle built while the site URL was http:// kept emitting
   * http:// font URLs that the Content-Security-Policy then blocked on every tool page. */
  src: url('/wp-content/themes/soimenh/assets/fonts/Coiny-Regular.woff2') format('woff2'),
       url('/wp-content/themes/soimenh/assets/fonts/Coiny-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Core Colors ── */
  --tsh-bg:          #0c0c0a;
  --tsh-bg2:         #111110;
  --tsh-surface:     rgba(255,255,255,.04);
  --tsh-surface2:    rgba(255,255,255,.07);
  --tsh-border:      rgba(201,169,110,.18);
  --tsh-gold:        #c9a96e;
  --tsh-gold-hi:     #f5d58c;
  --tsh-gold-grad:   linear-gradient(135deg,#c9a96e,#f5d58c,#c9a96e);
  --tsh-purple:      #8b6914;
  --tsh-purple-dim:  rgba(139,105,20,.12);
  /* ── Text (--tsh-text1 alias fixes 7 invisible text locations) ── */
  --tsh-text:        #e8e0d0;
  --tsh-text1:       #e8e0d0;
  --tsh-text2:       rgba(232,224,208,.60);
  --tsh-text3:       rgba(232,224,208,.40); /* bumped 30%→40% for WCAG AA */
  /* ── Semantic Colors (muted, on-brand) ── */
  --tsh-success:     #6db87e;  /* gold-green, not jarring green */
  --tsh-error:       #e57373;  /* muted coral, not alarm red */
  /* ── Energy Colors (mỗi số 1 màu riêng — Numerology Crown v3.0) ── */
  --energy-1:  #e05252;   /* Đỏ lửa — khởi đầu, lãnh đạo */
  --energy-2:  #7fb3d3;   /* Xanh bạc — trực giác, hòa hợp */
  --energy-3:  #f0c040;   /* Vàng mặt trời — sáng tạo, vui vẻ */
  --energy-4:  #5aab6e;   /* Xanh đất — ổn định, kỷ luật */
  --energy-5:  #4ecdc4;   /* Teal gió — tự do, thay đổi */
  --energy-6:  #e895b3;   /* Hồng tình yêu — gia đình, trách nhiệm */
  --energy-7:  #9b72cf;   /* Tím indigo — huyền bí, tâm linh */
  --energy-8:  #c9a96e;   /* Vàng đen — quyền lực, tài lộc */
  --energy-9:  #b0d4e8;   /* Xanh ngọc — ánh sáng, viên mãn */
  --energy-11: #4da6ff;   /* Electric blue — Master: trực giác siêu phàm */
  --energy-22: #e07040;   /* Crimson-amber — Master: kiến tạo vĩ đại */
  --energy-33: #c084fc;   /* Violet-white — Master: bậc thầy chữa lành */
  /* ── Fonts ── */
  --tsh-fh:          'Lexend Deca', system-ui, sans-serif;
  --tsh-fb:          'Lexend Deca', system-ui, sans-serif;
  --tsh-fn:          'Lexend Deca', system-ui, sans-serif;
  /* ── Radii — angular/classical (not modern round) ── */
  --tsh-r:           4px;
  --tsh-r2:          3px;
  /* ── Glows ── */
  /* Multi-layer shadows (Crown Level — ambient + directional + glow) */
  --tsh-glow:
    0 1px 2px rgba(201,169,110,.06),
    0 4px 16px rgba(201,169,110,.14),
    0 0 40px rgba(201,169,110,.20);
  --tsh-glow2:
    0 1px 2px rgba(139,105,20,.06),
    0 4px 16px rgba(139,105,20,.14),
    0 0 40px rgba(139,105,20,.20);
  --tsh-shadow-card:
    0 1px 2px rgba(0,0,0,.08),
    0 4px 16px rgba(0,0,0,.12);
  --tsh-shadow-hover:
    0 2px 4px rgba(0,0,0,.1),
    0 8px 28px rgba(0,0,0,.18),
    0 0 20px rgba(201,169,110,.12);
  /* ── Spacing Scale (4px grid) ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  /* ── Typography Scale (1.25 ratio) ── */
  --tsh-fs-xs:   .72rem;
  --tsh-fs-sm:   .82rem;
  --tsh-fs-md:   .94rem;
  --tsh-fs-base: 1rem;
  --tsh-fs-lg:   1.15rem;
  --tsh-fs-xl:   1.35rem;
  /* ── Spring Physics Easing ── */
  --ease-spring:  cubic-bezier(.34,1.56,.64,1);
  --ease-smooth:  cubic-bezier(.4,0,.2,1);
  --ease-cosmic:  cubic-bezier(.22,1,.36,1);
  /* ── Duration Scale ── */
  --dur-instant:  80ms;
  --dur-fast:     150ms;
  --dur-normal:   250ms;
  --dur-slow:     400ms;
  --dur-dramatic: 600ms;

  /* ═══ Greek-Chinese Fusion Tokens ═══ */
  --tsh-marble:       rgba(232,224,208,.03);
  --tsh-marble-vein:  rgba(201,169,110,.06);
  --tsh-jade:         rgba(120,160,130,.06);
  --tsh-bronze:       #8b6914;
  --tsh-ivory:        rgba(255,248,230,.04);
  --tsh-ls-heading:   0.08em;
  --tsh-ls-display:   0.12em;
  --tsh-ls-label:     0.18em;
  --tsh-border-ornate: 1px solid rgba(201,169,110,.22);
  --tsh-border-double: 3px double rgba(201,169,110,.18);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* TSH page — unify body + breadcrumb with cosmos background */
body:has(.tsh-cosmos) { background: #080705; }

.tsh-cosmos {
  font-family: var(--tsh-fb);
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(32,28,22,.7) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(24,20,14,.5) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 20% 60%, rgba(28,24,16,.4) 0%, transparent 60%),
    #12100d;
  color: var(--tsh-text);
  min-height: 100vh;
  position: relative;
  overflow-x: clip;
  margin: 0 auto;
  /* FIX CV8: remove max-width + border-left/right + outer box-shadow — cosmos must fill 100% viewport */
  box-shadow: inset 0 0 120px rgba(0,0,0,.3);
}

/* ─── Scroll Progress Bar ─── */
#tsh-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  z-index: 9999; display: none; pointer-events: none;
  background: linear-gradient(90deg, var(--tsh-gold), var(--tsh-gold-hi), var(--tsh-gold));
  transition: width .08s linear;
}



@keyframes tshPulse { 0%,100% { opacity:.55; } 50% { opacity:1; } }
@keyframes tshSpin  { to { transform: rotate(360deg); } }

/* ─── ANIMATION 3: Number Counter (JS-driven, pop on enter) ─── */
@keyframes tshNumPop {
  0%   { transform: scale(.6); opacity: 0; }
  65%  { transform: scale(1.18); }
  100% { transform: scale(1); opacity: 1; }
}
.tsh-num-pop { animation: tshNumPop .65s cubic-bezier(.34,1.56,.64,1) forwards; }

.tsh-fade-up { animation: tshFadeUp .5s ease forwards; }

/* ─── ANIMATION 5: Gold Shimmer Text — dramatic sweep with bright flash ─── */
@keyframes tshShimmer {
  0%, 100% { background-position: 200% center; }
  50% { background-position: -100% center; }
}
.tsh-shimmer {
  background: linear-gradient(
    110deg,
    #c9a96e 0%, #c9a96e 30%,
    #f5d58c 38%, #fffbe6 42%, #f5d58c 46%,
    #c9a96e 54%, #c9a96e 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: tshShimmer 6s ease-in-out infinite;
}

/* ─── ANIMATION 6: Card Hover Lift ─── */
.tsh-card {
  background: var(--tsh-surface);
  border: 1px solid var(--tsh-border);
  border-radius: var(--tsh-r);
  box-shadow: var(--tsh-shadow-card);
  transition: transform var(--dur-normal) var(--ease-spring), box-shadow var(--dur-normal), border-color var(--dur-normal);
}
.tsh-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--tsh-shadow-hover);
  border-color: rgba(201,169,110,.38);
}

/* ─── ANIMATION 7: Expand / Collapse Smooth ─── */
.tsh-card-body {
  max-height: 0; overflow: hidden;
  transition: max-height .45s cubic-bezier(.4,0,.2,1);
}
.tsh-card.is-open .tsh-card-body { max-height: 2400px; }

/* ══════════════════════════════════════════════════
   FORM SECTION
══════════════════════════════════════════════════ */
.tsh-form-section {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding: 48px 20px 40px; text-align: center;
}

.tsh-eyebrow {
  font-size: .78rem; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--tsh-gold); opacity: .8; margin-bottom: 18px;
  text-shadow: 0 0 20px rgba(201,169,110,.3);
}
.tsh-form-title {
  font-family: var(--tsh-fh);
  font-size: clamp(2rem, 5.5vw, 3.8rem);
  font-weight: 700; line-height: 1.12; margin-bottom: 18px;
  text-shadow: 0 0 30px rgba(201,169,110,.2), 0 0 60px rgba(201,169,110,.08);
  color: var(--tsh-gold);
  letter-spacing: 0.04em;
  height: 2.3em; overflow: hidden;  /* lock height during decode — prevent form jitter */
}
/* Decode character states */
.tsh-decode-scramble {
  color: rgba(201,169,110,.35);
  text-shadow: 0 0 8px rgba(201,169,110,.3);
  display: inline-block;
}
.tsh-decode-locked {
  color: var(--tsh-gold);
  text-shadow: 0 0 12px rgba(201,169,110,.25);
  display: inline-block;
  animation: tshCharLock .3s ease-out;
}
@keyframes tshCharLock {
  0% { opacity: 0; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}
.tsh-form-sub {
  font-size: 1rem; color: var(--tsh-text2);
  max-width: 520px; line-height: 1.65; margin-bottom: 32px;
  min-height: 3.4em;
}
/* ── Intro wrapper — locks height above form box so form never jumps during animations ── */
.tsh-form-intro {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  min-height: 20rem; /* desktop: h1(~10rem) + sub(~7rem) + ornament(~3rem) */
}
@media (max-width: 640px) {
  .tsh-form-intro { min-height: 16rem; } /* mobile: h1 smaller at 2rem base */
}
@media (max-width: 320px) {
  .tsh-form-section .sm-tool-hero__icon { width: 280px !important; height: 280px !important; }
  .tsh-pyth-frame { max-width: 200px; }
}
/* ── Ornamental Divider — visible + ornate ── */
.tsh-ornament {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-bottom: 24px;
}
.tsh-ornament::before, .tsh-ornament::after {
  content: ''; display: block;
  width: 80px; height: 3px;
  background:
    linear-gradient(90deg, transparent, rgba(201,169,110,.5), transparent),
    linear-gradient(90deg, transparent 20%, rgba(201,169,110,.15) 20%, rgba(201,169,110,.15) 80%, transparent 80%);
  background-size: 100% 1px, 100% 3px;
  background-position: center top, center center;
  background-repeat: no-repeat;
}
.tsh-ornament-icon {
  font-size: .8rem; color: var(--tsh-gold); opacity: .7;
  text-shadow: 0 0 8px rgba(201,169,110,.3);
}
.tsh-form-box {
  position: relative;
  background: rgba(12,12,10,.82);
  border: 3px double rgba(201,169,110,.18);
  border-radius: var(--tsh-r); padding: 36px 40px;
  width: 100%; max-width: 480px;
  box-shadow:
    0 8px 40px rgba(0,0,0,.4),
    0 0 80px rgba(201,169,110,.04),
    inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
}
/* Cloud scroll corner — top-left */
.tsh-form-box::before {
  content: '';
  position: absolute;
  top: -12px; left: -12px;
  width: 56px; height: 56px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M4 32C4 22 10 16 18 16S22 10 22 6' fill='none' stroke='%23c9a96e' stroke-width='1.5' opacity='0.7'/%3E%3Cpath d='M8 28C8 20 13 16 18 16S20 12 20 10' fill='none' stroke='%23c9a96e' stroke-width='0.6' opacity='0.45'/%3E%3C/svg%3E");
  background-size: contain;
  pointer-events: none;
  z-index: 2;
}
/* Cloud scroll corner — bottom-right */
.tsh-form-box::after {
  content: '';
  position: absolute;
  bottom: -12px; right: -12px;
  width: 56px; height: 56px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M32 4C32 14 26 20 18 20S14 26 14 30' fill='none' stroke='%23c9a96e' stroke-width='1.5' opacity='0.7'/%3E%3C/svg%3E");
  background-size: contain;
  pointer-events: none;
  z-index: 2;
}
.tsh-form-box > * { position: relative; z-index: 1; }
/* Corner ornament — cloud scroll motif replacing old corner accent */
.tsh-form-corner {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 12px;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,.5), transparent);
  border-radius: 0 0 20px 20px;
  z-index: 2;
}
.tsh-field { margin-bottom: 16px; text-align: left; }
.tsh-field label {
  display: block; font-size: .72rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--tsh-gold); margin-bottom: 10px;
  opacity: .75;
  text-shadow: 0 0 12px rgba(201,169,110,.15);
  transition: opacity .3s, text-shadow .3s;
}
/* Label hint — xuống dòng, cực nhỏ, kế thừa design token */
.tsh-lbl-hint {
  display: block;
  font-size: .72em;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: none;
  color: rgba(201,169,110,.45);
  margin-top: 2px;
  font-style: italic;
}
.tsh-field > label::before {
  content: '◈';
  margin-right: 6px; font-size: .55rem;
  opacity: .4; vertical-align: 1px;
}
.tsh-field:focus-within > label {
  opacity: 1;
  text-shadow: 0 0 16px rgba(201,169,110,.3);
}
.tsh-field:focus-within > label::before { opacity: .8; }
.tsh-field input,
.tsh-date-col input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/* FIX MA6: restore focus-visible ring for keyboard users — only kill :focus (mouse) */
.tsh-form-box input,
.tsh-form-box input:focus,
.tsh-form-box input:focus-within {
  outline: none !important;
  -webkit-appearance: none;
}
.tsh-form-box input:focus-visible {
  outline: 2px solid var(--tsh-gold) !important;
  outline-offset: 2px;
}
.tsh-field input {
  width: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--tsh-r2); padding: 16px 18px;
  color: var(--tsh-text); font-family: var(--tsh-fb); font-size: 1rem;
  outline: none !important;
  transition: border-color .35s, box-shadow .35s, background .35s;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15);
}
.tsh-field input::placeholder {
  color: var(--tsh-text3); opacity: .5;
  letter-spacing: .02em;
}
.tsh-field input:focus,
.tsh-field input:focus-visible {
  border-color: rgba(201,169,110,.5);
  background: linear-gradient(180deg, rgba(201,169,110,.04) 0%, rgba(255,255,255,.02) 100%);
  box-shadow: 0 0 16px rgba(201,169,110,.08), inset 0 1px 2px rgba(0,0,0,.1);
  outline: none !important;
  -webkit-appearance: none;
}
/* ── Kill browser autofill white/blue background ── */
.tsh-field input:-webkit-autofill,
.tsh-field input:-webkit-autofill:hover,
.tsh-field input:-webkit-autofill:focus,
.tsh-field input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #0c0c0a inset !important;
  -webkit-text-fill-color: #e8e0d0 !important;
  caret-color: #e8e0d0 !important;
  border-color: rgba(201,169,110,.3) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}
.tsh-field.is-valid input,
.tsh-field.is-valid input:focus {
  border-color: rgba(201,169,110,.35) !important;
  background: linear-gradient(180deg, rgba(201,169,110,.03) 0%, rgba(255,255,255,.02) 100%) !important;
  box-shadow: 0 0 12px rgba(201,169,110,.06), inset 0 1px 2px rgba(0,0,0,.1) !important;
  outline: none !important;
}
.tsh-field.is-error input,
.tsh-field.is-error input:focus {
  border-color: rgba(229,115,115,.35) !important;
  box-shadow: 0 0 8px rgba(229,115,115,.06), inset 0 1px 2px rgba(0,0,0,.15) !important;
  outline: none !important;
}
.tsh-field { position: relative; }

/* ── Energy Connectors between fields ── */
.tsh-connector {
  display: flex; flex-direction: column; align-items: center;
  height: 28px; margin: 2px 0;
  position: relative;
}
.tsh-connector::before, .tsh-connector::after {
  content: ''; width: 1px; flex: 1;
  background: rgba(255,255,255,.06);
  transition: background .5s, box-shadow .5s;
}
.tsh-conn-dot {
  font-size: .35rem; line-height: 1; color: rgba(255,255,255,.1);
  transition: color .5s, text-shadow .5s, transform .5s;
}
/* Valid state — gold energy flow */
.tsh-connector.is-valid::before,
.tsh-connector.is-valid::after {
  background: linear-gradient(180deg, rgba(201,169,110,.4), rgba(201,169,110,.15));
  box-shadow: 0 0 6px rgba(201,169,110,.15);
}
.tsh-connector.is-valid .tsh-conn-dot {
  color: var(--tsh-gold);
  text-shadow: 0 0 8px rgba(201,169,110,.5);
  animation: tshConnPulse 2s ease-in-out infinite;
}
@keyframes tshConnPulse {
  0%,100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.5); opacity: 1; }
}
/* Error state */
.tsh-connector.is-error::before,
.tsh-connector.is-error::after {
  background: rgba(229,115,115,.15);
}
.tsh-connector.is-error .tsh-conn-dot {
  color: rgba(229,115,115,.5);
  text-shadow: 0 0 6px rgba(229,115,115,.2);
  animation: none;
}
/* All valid — full energy chain */
.tsh-connector.is-valid::before { animation: tshEnergyFlow 1.5s ease-in-out infinite; }
.tsh-connector.is-valid::after  { animation: tshEnergyFlow 1.5s ease-in-out .3s infinite; }
@keyframes tshEnergyFlow {
  0%,100% { opacity: .5; }
  50% { opacity: 1; }
}
/* ── Error text (elegant inline) ── */
.tsh-field-err {
  display: none !important;
  font-size: .68rem !important; font-style: italic !important;
  color: rgba(201,160,120,.45) !important;
  margin-top: 10px !important; padding-left: 4px !important;
  letter-spacing: .04em !important;
  line-height: 1.3 !important;
  font-family: var(--tsh-fb) !important;
  font-weight: 400 !important;
}
.tsh-field.is-error .tsh-field-err {
  display: block !important;
  animation: tshErrIn .3s ease-out;
}
@keyframes tshErrIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Error shake ── */
.tsh-field.is-error input {
  animation: tshShake .4s var(--ease-cosmic);
}
.tsh-field.is-error .tsh-date-row {
  animation: tshShake .4s var(--ease-cosmic);
}
@keyframes tshShake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

/* ── Date 3-col row ── */
.tsh-date-row { display: flex; align-items: stretch; gap: 0; }
.tsh-date-col { flex: 1; display: flex; flex-direction: column; }
.tsh-date-col--year { flex: 1.5; }
.tsh-date-lbl {
  display: block; font-size: .62rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--tsh-gold); opacity: .45; margin-bottom: 6px; text-align: center;
  transition: opacity .3s;
}
.tsh-date-col:focus-within .tsh-date-lbl {
  opacity: .85;
}
.tsh-date-col input {
  flex: 1; width: 100%; text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.08);
  padding: 16px 8px;
  color: var(--tsh-text); font-family: var(--tsh-fb);
  font-size: 1rem; font-weight: 400;
  letter-spacing: .05em;
  outline: none;
  transition: border-color .35s, box-shadow .35s, background .35s;
  border-radius: 0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15);
}
.tsh-date-col:first-child input {
  border-radius: var(--tsh-r2) 0 0 var(--tsh-r2);
  border-right: 1px solid rgba(255,255,255,.05);
}
.tsh-date-col:nth-child(2) input { border-right: 1px solid rgba(255,255,255,.05); }
.tsh-date-col:last-child input {
  border-radius: 0 var(--tsh-r2) var(--tsh-r2) 0;
}
.tsh-date-col input::placeholder { color: var(--tsh-text3); font-weight: 400; opacity: .5; }
.tsh-date-col input:focus,
.tsh-date-col input:focus-visible {
  border-color: rgba(201,169,110,.5);
  background: linear-gradient(180deg, rgba(201,169,110,.04) 0%, rgba(255,255,255,.02) 100%);
  box-shadow: 0 0 16px rgba(201,169,110,.08), inset 0 1px 2px rgba(0,0,0,.1);
  outline: none !important;
  -webkit-appearance: none;
  z-index: 1; position: relative;
}
.tsh-field.is-valid .tsh-date-col input,
.tsh-field.is-valid .tsh-date-col input:focus {
  border-color: rgba(201,169,110,.35) !important;
  background: linear-gradient(180deg, rgba(201,169,110,.03) 0%, rgba(255,255,255,.02) 100%) !important;
  box-shadow: 0 0 12px rgba(201,169,110,.06), inset 0 1px 2px rgba(0,0,0,.1) !important;
  outline: none !important;
}
.tsh-field.is-error .tsh-date-col input,
.tsh-field.is-error .tsh-date-col input:focus {
  border-color: rgba(229,115,115,.35) !important;
  box-shadow: 0 0 8px rgba(229,115,115,.06), inset 0 1px 2px rgba(0,0,0,.15) !important;
  outline: none !important;
}
/* ── Custom Date Select (JS-built) ── */
.tsh-csel { position: relative; flex: 1; }
.tsh-csel select { display: none !important; }
/* Trigger button */
.tsh-csel-trigger {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.08);
  padding: 16px 12px;
  color: var(--tsh-text); font-family: var(--tsh-fb);
  font-size: 1rem; font-weight: 400; letter-spacing: .05em;
  cursor: pointer; outline: none; border-radius: 0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15);
  transition: border-color .25s, box-shadow .25s, background .25s;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation; /* FIX MD6: eliminate 300ms iOS tap delay */
  box-sizing: border-box;
}
.tsh-date-col:first-child .tsh-csel-trigger {
  border-radius: var(--tsh-r2) 0 0 var(--tsh-r2);
  border-right: 1px solid rgba(255,255,255,.05);
}
.tsh-date-col:nth-child(2) .tsh-csel-trigger { border-right: 1px solid rgba(255,255,255,.05); }
.tsh-date-col:last-child .tsh-csel-trigger { border-radius: 0 var(--tsh-r2) var(--tsh-r2) 0; }
.tsh-csel-val { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tsh-csel-val--ph { color: rgba(232,224,208,.38); }
.tsh-csel-arr { flex-shrink: 0; margin-left: 6px; line-height: 0; transition: transform .2s; }
.tsh-csel.is-open .tsh-csel-arr { transform: rotate(180deg); }
.tsh-csel-trigger:focus,
.tsh-csel.is-open .tsh-csel-trigger {
  border-color: rgba(201,169,110,.5);
  background: linear-gradient(180deg, rgba(201,169,110,.04) 0%, rgba(255,255,255,.02) 100%);
  box-shadow: 0 0 16px rgba(201,169,110,.08), inset 0 1px 2px rgba(0,0,0,.1);
}
.tsh-field.is-valid .tsh-csel-trigger {
  border-color: rgba(201,169,110,.35) !important;
  background: linear-gradient(180deg, rgba(201,169,110,.03) 0%, rgba(255,255,255,.02) 100%) !important;
  box-shadow: 0 0 12px rgba(201,169,110,.06), inset 0 1px 2px rgba(0,0,0,.1) !important;
}
.tsh-field.is-error .tsh-csel-trigger {
  border-color: rgba(229,115,115,.35) !important;
  box-shadow: 0 0 8px rgba(229,115,115,.06), inset 0 1px 2px rgba(0,0,0,.15) !important;
}
/* Dropdown panel — body-appended, fixed to escape overflow:hidden + stacking context */
.tsh-csel-panel {
  position: fixed;
  background: linear-gradient(180deg, rgba(26,22,14,.99) 0%, #0e0c09 100%);
  border: 1px solid rgba(201,169,110,.38);
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0,0,0,.75), inset 0 0 0 1px rgba(201,169,110,.05);
  overflow-y: auto; z-index: 999999;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-5px);
  transition: opacity .18s, visibility .18s, transform .18s;
  scrollbar-width: thin; scrollbar-color: rgba(201,169,110,.22) transparent;
}
.tsh-csel-panel::-webkit-scrollbar { width: 3px; }
.tsh-csel-panel::-webkit-scrollbar-track { background: transparent; }
.tsh-csel-panel::-webkit-scrollbar-thumb { background: rgba(201,169,110,.25); border-radius: 2px; }
.tsh-csel-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
/* Options */
.tsh-csel-opt {
  padding: 9px 14px; text-align: center;
  font-family: var(--tsh-fb); font-size: .95rem;
  color: rgba(232,224,208,.7); cursor: pointer;
  transition: background .1s, color .1s;
}
.tsh-csel-opt:hover { background: rgba(201,169,110,.09); color: #c9a96e; }
.tsh-csel-opt--sel { color: #c9a96e; background: rgba(201,169,110,.07); font-weight: 600; }
.tsh-csel-opt--ph {
  color: rgba(232,224,208,.32); font-style: italic;
  border-bottom: 1px solid rgba(201,169,110,.12); padding: 8px 14px;
}
#field-birth { margin-bottom: 20px; }
/* field-status hidden — replaced by connectors */
.tsh-field-status { display: none !important; }

/* ── Premium Button — Dark Luxury ── */
.tsh-btn-submit {
  width: 100%; padding: 18px 24px;
  background: rgba(12,12,10,.9);
  border: 1px solid rgba(201,169,110,.3);
  border-radius: 12px;
  color: var(--tsh-gold); font-family: var(--tsh-fb);
  font-size: 1.05rem; font-weight: 600; letter-spacing: .1em;
  cursor: pointer; position: relative; overflow: hidden;
  will-change: transform; touch-action: manipulation; /* FIX MD6: 300ms iOS tap delay */
  transition: all .5s var(--ease-cosmic);
  box-shadow:
    0 0 20px rgba(201,169,110,.06),
    inset 0 1px 0 rgba(255,255,255,.04);
  animation: tshBtnBreathe 3.5s ease-in-out infinite;
}
/* Top edge gold accent */
.tsh-btn-submit::before {
  content: '';
  position: absolute; top: -1px; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,.5), transparent);
  pointer-events: none; z-index: 2;
}
/* Shimmer sweep (gold tint on dark) */
.tsh-btn-submit::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,.08), rgba(201,169,110,.15), rgba(201,169,110,.08), transparent);
  transform: skewX(-20deg);
  animation: tshBtnSweep 6s ease-in-out infinite;
  pointer-events: none; z-index: 1;
}
@keyframes tshBtnBreathe {
  0%,100% { box-shadow: 0 0 20px rgba(201,169,110,.06), inset 0 1px 0 rgba(255,255,255,.04); }
  50%     { box-shadow: 0 0 35px rgba(201,169,110,.12), inset 0 1px 0 rgba(255,255,255,.04); }
}
@keyframes tshBtnSweep {
  0%,75% { left: -100%; }
  100% { left: 200%; }
}
/* Hover: gold fill reveal */
.tsh-btn-submit:hover {
  background: linear-gradient(135deg, #b8943f, #d4af5e, #f5d58c, #c9a96e);
  color: #0a0812;
  border-color: rgba(245,213,140,.6);
  transform: translateY(-2px);
  animation: none;
  box-shadow:
    0 4px 20px rgba(201,169,110,.25),
    0 0 50px rgba(201,169,110,.15);
}
.tsh-btn-submit:hover .btn-text {
  text-shadow: 0 1px 0 rgba(255,255,255,.2);
}
.tsh-btn-submit:hover::after {
  animation: tshBtnSweepFast .6s ease-out forwards;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), rgba(255,255,255,.3), rgba(255,255,255,.15), transparent);
}
@keyframes tshBtnSweepFast {
  from { left: -100%; } to { left: 200%; }
}
/* Press */
.tsh-btn-submit:active {
  transform: translateY(0) scale(.985);
  transition-duration: 80ms;
}
.tsh-btn-submit:disabled {
  opacity: .4; cursor: not-allowed; transform: none;
  animation: none; filter: saturate(.5);
}
/* Border glow hidden — not needed for dark style */
.tsh-btn-submit .btn-border-glow { display: none; }
/* Text styling — gold shimmer on dark */
.tsh-btn-submit .btn-text {
  position: relative; z-index: 3;
  background: linear-gradient(90deg, #c9a96e 0%, #f5d58c 25%, #fff 30%, #f5d58c 35%, #c9a96e 60%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: tshBtnTextShimmer 5s ease-in-out infinite;
}
@keyframes tshBtnTextShimmer {
  to { background-position: -300% center; }
}
.tsh-btn-submit:hover .btn-text {
  background: none;
  -webkit-text-fill-color: #0a0812;
  color: #0a0812;
}
/* Loading spinner inside button */
@keyframes tshSpinBtn { to { transform: rotate(360deg); } }
.tsh-btn-submit .btn-spinner {
  display: none; width: 18px; height: 18px;
  border: 2px solid rgba(201,169,110,.2);
  border-top-color: var(--tsh-gold);
  border-radius: 50%;
  animation: tshSpinBtn .7s linear infinite;
  flex-shrink: 0;
  will-change: transform;
}
.tsh-btn-submit.is-loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  pointer-events: none;
}
.tsh-btn-submit.is-loading .btn-spinner { display: block; }
.tsh-btn-submit.is-loading .btn-text { opacity: .85; }
.tsh-btn-submit:focus-visible {
  outline: 2px solid var(--tsh-gold);
  outline-offset: 3px;
}
/* FIX MV5: visible disabled state */
.tsh-btn-submit:disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
/* ── Button "Khai Hỏa" — fired state (2s breathing portal) ── */
.tsh-btn-submit.tsh-btn--fired {
  animation: tshBtnFire 2s ease-in-out forwards !important;
  pointer-events: none;
}
@keyframes tshBtnFire {
  /* compress → burst → breathe glow suốt 2s */
  0%   { transform: scale(1);     box-shadow: 0 0 0   0 rgba(245,213,140,0),   0 0  0px rgba(201,169,110,0); }
  6%   { transform: scale(.974);  box-shadow: 0 0 0   0 rgba(245,213,140,.5),   0 0  8px rgba(201,169,110,.2); }
  18%  { transform: scale(1.012); box-shadow: 0 0 0 24px rgba(245,213,140,0),   0 0 30px rgba(201,169,110,.4); }
  40%  { transform: scale(1);     box-shadow: 0 0 0   0 rgba(245,213,140,0),   0 0 18px rgba(201,169,110,.25); }
  58%  { transform: scale(1.006); box-shadow: 0 0 0   0 rgba(245,213,140,0),   0 0 38px rgba(201,169,110,.45); }
  76%  { transform: scale(1);     box-shadow: 0 0 0   0 rgba(245,213,140,0),   0 0 22px rgba(201,169,110,.28); }
  90%  { transform: scale(1.004); box-shadow: 0 0 0   0 rgba(245,213,140,0),   0 0 48px rgba(201,169,110,.55); }
  100% { transform: scale(1);     box-shadow: 0 0 0   0 rgba(245,213,140,0),   0 0 55px rgba(201,169,110,.6); }
}
/* Ring nở ra từ button — kéo dài suốt 2s */
.tsh-btn-ring {
  position: absolute; top: 50%; left: 50%;
  width: 100%; height: 100%;
  border-radius: var(--tsh-r2);
  border: 1.5px solid rgba(245,213,140,.6);
  transform: translate(-50%,-50%) scale(1);
  opacity: 0; pointer-events: none;
  z-index: 5;
}
.tsh-btn-submit.tsh-btn--fired .tsh-btn-ring {
  animation: tshBtnRing 2s ease-out forwards;
}
@keyframes tshBtnRing {
  0%   { opacity:.9; transform: translate(-50%,-50%) scale(1); }
  35%  { opacity:.5; transform: translate(-50%,-50%) scale(1.25); }
  100% { opacity:0;  transform: translate(-50%,-50%) scale(1.9); }
}
.tsh-error {
  margin-top: 12px; padding: 8px 14px;
  background: transparent; border: none;
  border-radius: var(--tsh-r2); color: rgba(229,160,140,.4); font-size: .68rem; display: none;
  letter-spacing: .02em; line-height: 1.5;
  text-align: center; font-style: italic;
}

/* ══════════════════════════════════════════════════
   CINEMATIC LOADING — THE ORACLE AWAKENS
══════════════════════════════════════════════════ */
.tsh-cine {
  position:fixed; top:0;left:0;right:0;bottom:0; z-index:2147483647; /* above header transform stacking context */
  background:#0a0a08;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden; overscroll-behavior:none; /* FIX MD3 */
  height:100vh; height:100svh; /* FIX MD1: explicit height fallback */
}

/* ── Meander border self-draw ── */
.tsh-cine-meander {
  position:absolute; top:0;left:0;width:100%;height:100%; z-index:1;
  pointer-events:none;
}
.tsh-cine-mdr-rect { transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1); }
.tsh-cine-mdr-inner { transition: stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1) .2s; }
.tsh-cine.phase-1 .tsh-cine-mdr-rect { stroke-dashoffset:0; }
.tsh-cine.phase-1 .tsh-cine-mdr-inner { stroke-dashoffset:0; }

/* ── L-bracket corners ── */
.tsh-cine-brk {
  position:absolute; width:20px; height:20px; z-index:2;
  opacity:0; transition: opacity .4s .3s;
}
.tsh-cine.phase-1 .tsh-cine-brk { opacity:1; }
.tsh-cine-brk-tl { top:16px;left:16px; border-top:2px solid rgba(201,169,110,.6); border-left:2px solid rgba(201,169,110,.6); }
.tsh-cine-brk-tr { top:16px;right:16px; border-top:2px solid rgba(201,169,110,.6); border-right:2px solid rgba(201,169,110,.6); }
.tsh-cine-brk-bl { bottom:16px;left:16px; border-bottom:2px solid rgba(201,169,110,.6); border-left:2px solid rgba(201,169,110,.6); }
.tsh-cine-brk-br { bottom:16px;right:16px; border-bottom:2px solid rgba(201,169,110,.6); border-right:2px solid rgba(201,169,110,.6); }

/* ── Doctor Strange Portal Rings ── */
.tsh-cine-portal {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:280px; height:280px; z-index:3;
  opacity:0; transition: opacity .5s;
}
.tsh-cine.phase-2 .tsh-cine-portal,
.tsh-cine.phase-3 .tsh-cine-portal,
.tsh-cine.phase-4 .tsh-cine-portal { opacity:1; }
.tsh-cine-ring {
  position:absolute; top:50%;left:50%; border-radius:50%;
  border:1px solid rgba(201,169,110,.3);
  transform:translate(-50%,-50%);
}
.tsh-cine-ring-1 { width:280px;height:280px; border-width:1.5px; border-style:dashed; border-color:rgba(201,169,110,.25); animation:tshCineSpinCW 12s linear infinite; will-change: transform; }
.tsh-cine-ring-2 { width:230px;height:230px; border-color:rgba(201,169,110,.35); animation:tshCineSpinCCW 9s linear infinite; }
.tsh-cine-ring-3 { width:180px;height:180px; border-width:1.5px; border-style:dotted; border-color:rgba(201,169,110,.2); animation:tshCineSpinCW 7s linear infinite; }
.tsh-cine-ring-4 { width:130px;height:130px; border-color:rgba(201,169,110,.4); animation:tshCineSpinCCW 5s linear infinite; }
.tsh-cine-ring-5 { width:80px;height:80px; border-width:2px; border-color:rgba(201,169,110,.55); animation:tshCineSpinCW 3s linear infinite; box-shadow:0 0 20px rgba(201,169,110,.15); will-change: transform; }
@keyframes tshCineSpinCW  { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes tshCineSpinCCW { to { transform:translate(-50%,-50%) rotate(-360deg); } }

/* ── Portal Sparks (12 orbiting dots) ── */
.tsh-cine-sparks {
  position:absolute; top:50%;left:50%; width:0;height:0; z-index:4;
}
.tsh-cine-spark {
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:#f5d58c;
  box-shadow:0 0 6px #c9a96e, 0 0 12px rgba(201,169,110,.3);
  opacity:0;
  animation: tshCineSpark 2.5s ease-in-out infinite;
  animation-delay: calc(var(--si) * .2s);
  transform: rotate(calc(var(--si) * 30deg)) translateY(-150px);
}
.tsh-cine.phase-2 .tsh-cine-spark { opacity:1; }
@keyframes tshCineSpark {
  0%,100% { opacity:.3; transform: rotate(calc(var(--si)*30deg)) translateY(-150px) scale(.6); }
  50%     { opacity:1;  transform: rotate(calc(var(--si)*30deg + 15deg)) translateY(-145px) scale(1.2); }
}

/* ── Bát Quái Trigrams — 8 positions ── */
.tsh-cine-bagua {
  position:absolute; top:50%;left:50%; width:0;height:0; z-index:5;
  /* Portal is now translate(-50%,-50%) = true center. Bagua origin = true center. Aligned. */
}
.tsh-cine-tri {
  position:absolute;
  /* Explicit size + negative margin → center SVG on bagua origin → correct circular orbit */
  width:38px; height:30px;
  top:0; left:0; margin-top:-15px; margin-left:-19px;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transform: rotate(calc(var(--ti)*45deg)) translateY(-175px) rotate(calc(var(--ti)*-45deg)) scale(.3);
  transition: opacity .4s, transform .5s cubic-bezier(.34,1.56,.64,1);
  transition-delay: calc(var(--ti) * .1s + .1s);
  filter: drop-shadow(0 0 6px rgba(201,169,110,.75)) drop-shadow(0 0 16px rgba(201,169,110,.3));
}
.tsh-cine.phase-3 .tsh-cine-tri {
  opacity:1; transform: rotate(calc(var(--ti)*45deg)) translateY(-175px) rotate(calc(var(--ti)*-45deg)) scale(1);
}

/* ── Lo Shu 3×3 Grid ── */
.tsh-cine-loshu {
  position:absolute; top:50%;left:50%; z-index:6;
  display:grid; grid-template-columns:repeat(3,42px); gap:3px;
  transform:translate(-50%,-50%);
  opacity:0; transition: opacity .4s;
}
.tsh-cine.phase-3 .tsh-cine-loshu,
.tsh-cine.phase-4 .tsh-cine-loshu { opacity:1; }
.tsh-cine-lsn {
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  font-family:'Lexend Deca', sans-serif; font-size:1.1rem; font-weight: 700;
  color:rgba(201,169,110,.25);
  border:1px solid rgba(201,169,110,.1);
  background:rgba(201,169,110,.02);
  transition: color .3s, border-color .3s, background .3s, box-shadow .3s, text-shadow .3s;
  transition-delay: calc(var(--ln) * .12s);
}
.tsh-cine.phase-4 .tsh-cine-lsn {
  color:#f5d58c;
  border-color:rgba(201,169,110,.4);
  background:rgba(201,169,110,.08);
  box-shadow:0 0 12px rgba(201,169,110,.2);
  text-shadow:0 0 8px rgba(201,169,110,.5);
}

/* ── Sacred Geometry Hexagram ── */
.tsh-cine-hex {
  position:absolute; top:50%;left:50%; width:240px; height:240px;
  transform:translate(-50%,-50%); z-index:2;
  opacity:0; transition: opacity .4s;
  animation: tshCineHexSpin 20s linear infinite;
  will-change: transform;
}
.tsh-cine.phase-3 .tsh-cine-hex,
.tsh-cine.phase-4 .tsh-cine-hex { opacity:1; }
@keyframes tshCineHexSpin {
  from { transform:translate(-50%,-50%) rotate(0deg); }
  to   { transform:translate(-50%,-50%) rotate(360deg); }
}

/* ── Text phrases ── */
.tsh-cine-text {
  position:absolute; bottom:22%; left:0; right:0; text-align:center; z-index:10;
  font-family:'Playfair Display',serif; font-size:1.15rem;
  color:var(--tsh-gold); letter-spacing:.06em;
  animation: tshPulse 2s ease-in-out infinite;
  transition: opacity .18s;
}
.tsh-cine-sub {
  position:absolute; bottom:17%; left:0; right:0; text-align:center; z-index:10;
  font-size:.75rem; color:var(--tsh-text2);
  letter-spacing:.18em; text-transform:uppercase;
  transition: opacity .18s;
}

/* ── Imperial Seal Stamp ── */
.tsh-cine-seal {
  position:absolute; top:50%;left:50%; z-index:20;
  transform:translate(-50%,-50%) scale(3) rotate(-15deg);
  opacity:0;
  transition: transform .3s cubic-bezier(.2,.8,.2,1.2), opacity .2s;
}
.tsh-cine.phase-5 .tsh-cine-seal {
  opacity:1;
  transform:translate(-50%,-50%) scale(1) rotate(0deg);
}

/* ── Golden Flash (phase 5 finale) ── */
.tsh-cine-flash {
  position:absolute; top:0;left:0;right:0;bottom:0; z-index:30;
  background:radial-gradient(circle at 50% 45%, rgba(245,213,140,.6) 0%, rgba(201,169,110,.1) 40%, transparent 70%);
  opacity:0; pointer-events:none;
  transition: opacity .15s;
}
.tsh-cine.phase-5 .tsh-cine-flash { opacity:1; }

/* ── Phase 5: converge all to center ── */
.tsh-cine.phase-5 .tsh-cine-portal { transform:translate(-50%,-50%) scale(.3); opacity:0; transition: transform .4s ease-in, opacity .4s; }
.tsh-cine.phase-5 .tsh-cine-bagua { opacity:0; transition: opacity .3s; }
.tsh-cine.phase-5 .tsh-cine-loshu { transform:translate(-50%,-50%) scale(.5); opacity:0; transition: transform .3s ease-in, opacity .3s; }
.tsh-cine.phase-5 .tsh-cine-hex { opacity:0; transition: opacity .2s; }
.tsh-cine.phase-5 .tsh-cine-text,
.tsh-cine.phase-5 .tsh-cine-sub { opacity:0; }

/* FIX CP6: Desktop — giảm sparks 12→6, ring-3 ẩn (total: 4rings+6sparks+1hex+1text=12) */
@media (min-width:769px) {
  .tsh-cine-ring-3 { display: none !important; }
  .tsh-cine-spark:nth-child(n+7) { display: none !important; }
}

/* ── Mobile adjustments ── */
@media (max-width:768px) {
  .tsh-cine-portal { width:200px; height:200px; }
  .tsh-cine-ring-1 { width:200px;height:200px; }
  .tsh-cine-ring-2 { width:165px;height:165px; }
  .tsh-cine-ring-3 { width:130px;height:130px; }
  .tsh-cine-ring-4 { width:95px;height:95px; }
  .tsh-cine-ring-5 { width:60px;height:60px; }
  .tsh-cine-spark { transform: rotate(calc(var(--si)*30deg)) translateY(-108px); }
  /* Trigram initial hidden state for mobile */
  .tsh-cine-tri { transform: rotate(calc(var(--ti)*45deg)) translateY(-125px) rotate(calc(var(--ti)*-45deg)) scale(.3); }
  .tsh-cine.phase-3 .tsh-cine-tri { transform: rotate(calc(var(--ti)*45deg)) translateY(-125px) rotate(calc(var(--ti)*-45deg)) scale(1); }
  .tsh-cine-loshu { grid-template-columns:repeat(3,36px); }
  .tsh-cine-lsn { width:36px; height:36px; font-size:.9rem; }
  .tsh-cine-hex { width:170px;height:170px; }
  .tsh-cine-text { font-size:1rem; bottom:18%; }
  .tsh-cine-sub { bottom:14%; font-size:.68rem; }
}
.hidden { display: none !important; }

/* ══════════════════════════════════════════════════
   RESULTS
══════════════════════════════════════════════════ */
/* FIX MV10: fade-in transition when results appear */
.tsh-results { position: relative; z-index: 1; animation: tshResultsFadeIn .6s ease both; }
@keyframes tshResultsFadeIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.tsh-container { max-width: 100%; margin: 0 auto; padding: 0 20px 48px; } /* FIX CV8: fill cosmos width */

.tsh-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; margin: 0;
  min-height: 44px;
  background: transparent; border: 1px solid rgba(201,169,110,.12);
  border-radius: 4px; color: var(--tsh-text3);
  font-size: .8rem; cursor: pointer; letter-spacing: .04em;
  transition: color var(--dur-normal), border-color var(--dur-normal), transform var(--dur-fast) var(--ease-spring);
}
.tsh-back-btn:hover { color: var(--tsh-gold); border-color: var(--tsh-gold); transform: translateX(-2px); }
.tsh-back-btn:active { transform: scale(.97); }
.tsh-back-btn:focus-visible { outline: 2px solid var(--tsh-gold); outline-offset: 2px; }

/* ── Hero ── */
.tsh-hero {
  text-align: center; padding: 32px 20px 28px;
  margin-bottom: 20px;
  position: relative;
  background-color: var(--tsh-bg);
  /* All background layers combined (fix: background-image was overriding background: gradients) */
  background-image:
    radial-gradient(ellipse 680px 480px at 50% 38%, rgba(201,169,110,.10) 0%, transparent 60%),
    radial-gradient(ellipse 360px 280px at 50% 42%, rgba(201,169,110,.06) 0%, transparent 80%),
    radial-gradient(circle 140px at 50% 42%, rgba(201,169,110,.08) 0%, transparent 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='50' fill='none' stroke='%23c9a96e' stroke-width='.3' opacity='.04'/%3E%3Ccircle cx='60' cy='60' r='35' fill='none' stroke='%23c9a96e' stroke-width='.3' opacity='.03'/%3E%3Cpath d='M60 10v100M10 60h100M25 25l70 70M95 25l-70 70' fill='none' stroke='%23c9a96e' stroke-width='.2' opacity='.03'/%3E%3C/svg%3E");
  background-size: auto, auto, auto, 120px 120px;
  /* Outer ornamental frame — double border */
  border: 1px solid rgba(201,169,110,.15);
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 6px rgba(12,12,10,.95),
    inset 0 0 0 7px rgba(201,169,110,.10),
    0 4px 40px rgba(0,0,0,.35),
    0 0 80px rgba(201,169,110,.04);
}
/* Hero corner ornaments — all 4 corners */
.tsh-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  /* 4 corner L-brackets via gradient stops */
  background:
    /* Top-left */
    linear-gradient(to right, rgba(201,169,110,.35) 0%, rgba(201,169,110,.35) 28px, transparent 28px) no-repeat 8px 8px / 28px 2px,
    linear-gradient(to bottom, rgba(201,169,110,.35) 0%, rgba(201,169,110,.35) 28px, transparent 28px) no-repeat 8px 8px / 2px 28px,
    /* Top-right */
    linear-gradient(to left, rgba(201,169,110,.35) 0%, rgba(201,169,110,.35) 28px, transparent 28px) no-repeat calc(100% - 8px) 8px / 28px 2px,
    linear-gradient(to bottom, rgba(201,169,110,.35) 0%, rgba(201,169,110,.35) 28px, transparent 28px) no-repeat calc(100% - 8px) 8px / 2px 28px,
    /* Bottom-left */
    linear-gradient(to right, rgba(201,169,110,.35) 0%, rgba(201,169,110,.35) 28px, transparent 28px) no-repeat 8px calc(100% - 8px) / 28px 2px,
    linear-gradient(to top, rgba(201,169,110,.35) 0%, rgba(201,169,110,.35) 28px, transparent 28px) no-repeat 8px calc(100% - 8px) / 2px 28px,
    /* Bottom-right */
    linear-gradient(to left, rgba(201,169,110,.35) 0%, rgba(201,169,110,.35) 28px, transparent 28px) no-repeat calc(100% - 8px) calc(100% - 8px) / 28px 2px,
    linear-gradient(to top, rgba(201,169,110,.35) 0%, rgba(201,169,110,.35) 28px, transparent 28px) no-repeat calc(100% - 8px) calc(100% - 8px) / 2px 28px;
  z-index: 0;
}
/* Dragon scale wave border replacing border-bottom */
.tsh-hero::after {
  content: '';
  display: block;
  height: 22px;
  margin-top: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='18' viewBox='0 0 40 18'%3E%3Cpath d='M0 18C6 18 6 0 12 0S20 18 26 18 26 0 32 0 40 18 40 18' fill='none' stroke='%23c9a96e' stroke-width='1.2' opacity='.5'/%3E%3Cpath d='M0 18C6 18 6 0 12 0S20 18 26 18 26 0 32 0 40 18 40 18' fill='none' stroke='%23c9a96e' stroke-width='.4' opacity='.2' stroke-dasharray='2 3'/%3E%3Ccircle cx='12' cy='0' r='1.5' fill='%23c9a96e' opacity='.15'/%3E%3Ccircle cx='32' cy='0' r='1.5' fill='%23c9a96e' opacity='.15'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 40px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
/* ═══ IMPERIAL DECREE HEADER — typography as the star ═══ */

/* Eyebrow — Lexend Deca, wide tracking, soft gold glow */
.tsh-decree-eyebrow {
  font-family: 'Lexend Deca', sans-serif;
  font-size: clamp(.7rem, 1.8vw, .82rem);
  font-weight: 400;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--tsh-gold);
  opacity: .75;
  margin: 0 0 6px;
  text-shadow: 0 0 20px rgba(201,169,110,.25);
  position: relative; z-index: 1;
}

/* Method line — elegant serif, sentence case, subtle spacing */
.tsh-decree-method {
  font-family: 'Playfair Display', 'Lexend Deca', sans-serif;
  font-size: clamp(.62rem, 1.4vw, .72rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: .12em;
  color: rgba(201,169,110,.5);
  margin: 0 0 14px;
  position: relative; z-index: 1;
}

/* Name — massive Lexend Deca, dramatic gold text-shadow, subtle breathing */
.tsh-decree-name {
  font-family: 'Lexend Deca', sans-serif;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 18px;
  position: relative; z-index: 1;
  text-shadow:
    0 0 40px rgba(201,169,110,.18),
    0 2px 4px rgba(0,0,0,.5);
}
/* ══════════════════════════════════════════════════
   IMPERIAL INSCRIPTION TABLET — Bia Khắc Khai Sinh
   ══════════════════════════════════════════════════ */
.tsh-chrono {
  position: relative;
  z-index: 1;
  margin: 0 auto 24px;
  max-width: 440px;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s var(--ease-smooth), transform .55s var(--ease-smooth);
  /* Imperial double-frame */
  border: 1px solid rgba(201,169,110,.28);
  border-radius: var(--tsh-r);
  box-shadow:
    inset 0 0 0 4px rgba(12,12,10,1),
    inset 0 0 0 5px rgba(201,169,110,.08),
    0 4px 24px rgba(0,0,0,.25);
  padding: 14px 16px 12px;
  /* L-brackets — 4 corners */
  background-image:
    linear-gradient(to right,  rgba(201,169,110,.5) 16px, transparent 16px) no-repeat 8px 8px / 16px 1.5px,
    linear-gradient(to bottom, rgba(201,169,110,.5) 16px, transparent 16px) no-repeat 8px 8px / 1.5px 16px,
    linear-gradient(to left,   rgba(201,169,110,.5) 16px, transparent 16px) no-repeat calc(100% - 8px) 8px / 16px 1.5px,
    linear-gradient(to bottom, rgba(201,169,110,.5) 16px, transparent 16px) no-repeat calc(100% - 8px) 8px / 1.5px 16px,
    linear-gradient(to right,  rgba(201,169,110,.5) 16px, transparent 16px) no-repeat 8px calc(100% - 8px) / 16px 1.5px,
    linear-gradient(to top,    rgba(201,169,110,.5) 16px, transparent 16px) no-repeat 8px calc(100% - 8px) / 1.5px 16px,
    linear-gradient(to left,   rgba(201,169,110,.5) 16px, transparent 16px) no-repeat calc(100% - 8px) calc(100% - 8px) / 16px 1.5px,
    linear-gradient(to top,    rgba(201,169,110,.5) 16px, transparent 16px) no-repeat calc(100% - 8px) calc(100% - 8px) / 1.5px 16px,
    rgba(201,169,110,.025);
}
/* Keystone diamond at top-center border */
.tsh-chrono::before {
  content: '◆';
  position: absolute;
  top: -9px; left: 50%;
  transform: translateX(-50%);
  color: rgba(201,169,110,.7);
  font-size: .5rem;
  background: var(--tsh-bg);
  padding: 0 8px;
  line-height: 1;
}
.tsh-chrono.tsh-chrono-active {
  opacity: 1;
  transform: translateY(0);
}

/* ── Header inscription ── */
.tsh-tablet-hdr {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .52rem;
  font-weight: 400;
  letter-spacing: .5em;
  color: rgba(201,169,110,.5);
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* ── Greek key meander strip ── */
.tsh-tablet-meander {
  height: 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12' viewBox='0 0 48 12'%3E%3Cpath d='M0 6h6V0h12v6h6V0h12v6h6v6H36V6h-6v6H12V6H6v6H0z' fill='none' stroke='%23c9a96e' stroke-width='.8' opacity='.45'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 48px 11px;
  background-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image:         linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
  margin: 2px 0;
}

/* ── Three number cells ── */
.tsh-tablet-nums {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 4px 0;
}
.tsh-tablet-cell {
  flex: 1;
  text-align: center;
}

/* ── Giant numbers — main event ── */
/* Unified font-size for all 3 cells — day / month / year đồng nhất */
.tsh-tablet-num {
  font-family: 'Lexend Deca', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  letter-spacing: .06em;
  line-height: 1;
  padding: 6px 0 2px;
  background: linear-gradient(165deg, #f5d58c 0%, #e8c47a 30%, #c9a96e 65%, #f5d58c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 18px rgba(201,169,110,.3));
}
/* Year: same size, tighter spacing so "2003" doesn't overflow cell */
.tsh-tablet-num--yr {
  letter-spacing: .01em;
}

/* ── Cell label ── */
.tsh-tablet-lbl {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .46rem;
  font-weight: 400;
  letter-spacing: .42em;
  color: rgba(201,169,110,.5);
  text-transform: uppercase;
  margin-top: 2px;
}

/* ── Vertical divider between cells ── */
.tsh-tablet-divider {
  flex-shrink: 0;
  width: 1px;
  height: 64px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(201,169,110,.45) 20%,
    rgba(201,169,110,.45) 80%,
    transparent 100%);
  position: relative;
  margin: 0 4px;
}
.tsh-tablet-divider::before {
  content: '✦';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(201,169,110,.5);
  font-size: .42rem;
  background: var(--tsh-bg);
  padding: 2px 0;
  line-height: 1;
}

@media (max-width: 420px) {
  .tsh-chrono { padding: 12px 10px 10px; }
  .tsh-tablet-num { font-size: 2rem; }
  .tsh-tablet-divider { height: 48px; }
}

/* ── Hero Life Path Crown (Numerology Crown v3.0) ── */
#hero-lp-crown { text-align: center; margin: 8px 0 20px; }
.tsh-lp-crown {
  display: inline-block;
  position: relative;
}
/* Laurel wreath removed — replaced by Astrolabe Portal rings */
/* ── Mystical Astrolabe Portal ── */
.tsh-astrolabe-wrap {
  position: relative;
  width: 320px;
  height: 320px;
  margin: 0 auto 12px;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(.34,1.56,.64,1);
}
.tsh-astrolabe-wrap.tsh-astrolabe-reveal {
  opacity: 1;
  transform: scale(1);
}

/* Ambient energy halo — pulses around the whole astrolabe */
.tsh-astrolabe-wrap::before {
  content: '';
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(201,169,110,.12) 0%,
    rgba(201,169,110,.05) 40%,
    transparent 70%);
  animation: tshAstroHalo 5s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes tshAstroHalo {
  0%   { opacity: 0.35; transform: scale(0.96); }
  100% { opacity: 0.85; transform: scale(1.04); }
}
.tsh-astrolabe-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
/* Ring 1: OUTER — Doctor Strange portal (counter-clockwise, 60s) */
.tsh-ring-outer {
  transform-origin: 200px 200px;
  animation: tshAstroSpin 60s linear infinite reverse;
  will-change: transform;
}
/* Ring 2: MIDDLE — Bát Quái trigrams (clockwise, 45s) */
.tsh-ring-mid {
  transform-origin: 200px 200px;
  animation: tshAstroSpin 45s linear infinite;
  will-change: transform;
}
/* Ring 3: INNER — Greek Key meander (counter-clockwise, 30s) */
.tsh-ring-inner {
  transform-origin: 200px 200px;
  animation: tshAstroSpin 30s linear infinite reverse;
  will-change: transform;
}
@keyframes tshAstroSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Hover → speed up all rings 2x */
.tsh-astrolabe-wrap:hover .tsh-ring-outer { animation-duration: 30s; }
.tsh-astrolabe-wrap:hover .tsh-ring-mid   { animation-duration: 22s; }
.tsh-astrolabe-wrap:hover .tsh-ring-inner { animation-duration: 15s; }

/* Spark glow pulse on outer ring cardinal dots */
.tsh-ring-outer circle[filter] {
  animation: tshSparkPulse 3s ease-in-out infinite alternate;
}
@keyframes tshSparkPulse {
  0%   { opacity: 0.4; }
  100% { opacity: 0.9; }
}

/* Inner rune ring — Roman numerals I-XII rotating slowly clockwise */
.tsh-rune-ring {
  transform-origin: 200px 200px;
  animation: tshRuneSpin 120s linear infinite;
  will-change: transform;
}
@keyframes tshRuneSpin {
  to { transform: rotate(360deg); }
}
/* L-bracket corners pulse subtly */
.tsh-void-brackets {
  animation: tshBracketPulse 4s ease-in-out infinite alternate;
}
@keyframes tshBracketPulse {
  0%   { opacity: 0.2; }
  100% { opacity: 0.4; }
}

/* Static center content — absolute positioned, NOT affected by ring rotation */
.tsh-astrolabe-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  pointer-events: none;
}
/* ═══ PORTAL RIFT — Doctor Strange dimensional gate ═══ */
.tsh-portal-rift {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s 0.8s ease;
}
.tsh-astrolabe-reveal .tsh-portal-rift { opacity: 1; }

/* Outer rift arc — 8 thin conic arcs rotating slowly counter-clockwise */
.tsh-portal-rift::before {
  content: '';
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 38deg,   var(--rift-ec, #c9a96e) 38deg 41deg,
    transparent 41deg 83deg,  var(--rift-ec, #c9a96e) 83deg 86deg,
    transparent 86deg 128deg, var(--rift-ec, #c9a96e) 128deg 131deg,
    transparent 131deg 173deg,var(--rift-ec, #c9a96e) 173deg 176deg,
    transparent 176deg 218deg,var(--rift-ec, #c9a96e) 218deg 221deg,
    transparent 221deg 263deg,var(--rift-ec, #c9a96e) 263deg 266deg,
    transparent 266deg 308deg,var(--rift-ec, #c9a96e) 308deg 311deg,
    transparent 311deg 353deg,var(--rift-ec, #c9a96e) 353deg 360deg
  );
  opacity: 0.14;
  animation: tshAstroSpin 90s linear infinite reverse;
  -webkit-mask-image: radial-gradient(circle, transparent 48%, black 52%);
  mask-image: radial-gradient(circle, transparent 48%, black 52%);
  will-change: transform;
}

/* Inner rift arc — offset arcs, rotate clockwise, tighter ring */
.tsh-portal-rift::after {
  content: '';
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: conic-gradient(
    from 22deg,
    transparent 0deg 52deg,   var(--rift-ec, #c9a96e) 52deg 54deg,
    transparent 54deg 97deg,  var(--rift-ec, #c9a96e) 97deg 99deg,
    transparent 99deg 142deg, var(--rift-ec, #c9a96e) 142deg 144deg,
    transparent 144deg 187deg,var(--rift-ec, #c9a96e) 187deg 189deg,
    transparent 189deg 232deg,var(--rift-ec, #c9a96e) 232deg 234deg,
    transparent 234deg 277deg,var(--rift-ec, #c9a96e) 277deg 279deg,
    transparent 279deg 322deg,var(--rift-ec, #c9a96e) 322deg 324deg,
    transparent 324deg 360deg
  );
  opacity: 0.09;
  animation: tshAstroSpin 120s linear infinite;
  -webkit-mask-image: radial-gradient(circle, transparent 46%, black 50%, black 95%, transparent 100%);
  mask-image: radial-gradient(circle, transparent 46%, black 50%, black 95%, transparent 100%);
}

/* ═══ GPU ACCELERATION for ring animations ═══ */
.tsh-ring-outer, .tsh-ring-mid, .tsh-ring-inner {
  will-change: transform;
}

/* ═══ ROMAN NUMERAL AMBIENT PARTICLES ═══ */
/* Drift upward from bottom — ancient numerology rising through the frame */
.tsh-hero-runes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.tsh-hrp {
  position: absolute;
  bottom: -2em;
  left: var(--rx, 50%);
  font-family: 'Lexend Deca', sans-serif;
  font-size: var(--rz, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(201,169,110, 0.07);
  animation: tshRomDrift var(--rs, 26s) var(--rd, 0s) linear infinite;
  user-select: none;
  white-space: nowrap;
}

@keyframes tshRomDrift {
  0%   { transform: translateY(0)      rotate(-5deg); opacity: 0; }
  8%   { opacity: 1; }
  50%  { transform: translateY(-380px) rotate(0deg);  opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(-760px) rotate(5deg);  opacity: 0; }
}

/* ── Life Path Number — unified with astrolabe energy color ── */
.tsh-lp-num {
  font-family: 'Lexend Deca', system-ui, sans-serif;
  font-size: 5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  /* Uses energy color set via inline style */
  text-shadow: 0 0 30px currentColor, 0 0 60px currentColor;
  animation: tshNumGlow 3s ease-in-out infinite alternate;
}
@keyframes tshNumGlow {
  0%   { opacity: .85; }
  100% { opacity: 1; }
}
.tsh-lp-label {
  font-family: var(--tsh-fb);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .45;
  margin-bottom: 2px;
}
.tsh-lp-name-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  margin-top: 6px;
}
.tsh-lp-orn { display: block; margin-bottom: 10px; }
.tsh-lp-name {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: 1;
  padding: 10px 32px;
  display: inline-block;
  position: relative;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  text-shadow: 0 0 22px currentColor;
  animation: tshNameGlow 3.5s ease-in-out infinite;
}
@keyframes tshNameGlow {
  0%,100% { text-shadow: 0 0 18px currentColor; opacity: .88; }
  50%     { text-shadow: 0 0 40px currentColor, 0 0 65px currentColor; opacity: 1; }
}
.tsh-lp-name::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 13px; height: 13px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
}
.tsh-lp-name::after {
  content: '';
  position: absolute;
  bottom: -1px; right: 0;
  width: 13px; height: 13px;
  border-bottom: 1px solid currentColor;
  border-right: 1px solid currentColor;
}
.tsh-lp-name-sub {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(232,224,208,.28); margin-top: 9px;
}
/* Seal stamp badge style — Imperial Seal */
.tsh-master-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border: 2px solid rgba(201,169,110,.55);
  border-radius: 3px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tsh-gold);
  background: rgba(201,169,110,.08);
  margin-top: 8px;
  position: relative;
  /* Triple frame seal effect */
  box-shadow:
    0 0 0 1px rgba(12,12,10,.9),
    0 0 0 3px rgba(201,169,110,.2),
    0 0 0 4px rgba(12,12,10,.9),
    0 0 0 5px rgba(201,169,110,.08),
    0 0 12px rgba(201,169,110,.15);
}
.tsh-master-badge::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(201,169,110,.2);
  border-radius: 1px;
  pointer-events: none;
}
/* Reveal animation */
@keyframes tshLpReveal {
  0%   { transform: scale(.5); opacity: 0; }
  65%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
.tsh-lp-reveal { animation: tshLpReveal 900ms cubic-bezier(.34,1.56,.64,1) forwards; }

.tsh-hero-nums {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 12px;
  margin-bottom: 24px;
}
.tsh-hn {
  display: flex; flex-direction: column; align-items: center;
  background: var(--tsh-surface);
  border: 2px solid rgba(201,169,110,.32);
  border-radius: 4px; padding: 20px 24px; min-width: 96px;
  transition: transform .22s, box-shadow .22s, border-color .22s;
  position: relative;
  /* Triple-layer imperial frame */
  box-shadow:
    inset 0 0 0 3px rgba(12,12,10,.92),
    inset 0 0 0 4px rgba(201,169,110,.18),
    inset 0 0 0 5px rgba(12,12,10,.5),
    0 4px 20px rgba(0,0,0,.4),
    0 0 0 1px rgba(201,169,110,.06);
  /* Lattice + concentric circle pattern — visible */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M0 24h48M24 0v48M0 0h48v48H0z' fill='none' stroke='%23c9a96e' stroke-width='.4' opacity='.06'/%3E%3Ccircle cx='24' cy='24' r='16' fill='none' stroke='%23c9a96e' stroke-width='.3' opacity='.05'/%3E%3Ccircle cx='24' cy='24' r='8' fill='none' stroke='%23c9a96e' stroke-width='.3' opacity='.04'/%3E%3C/svg%3E");
  background-size: 48px 48px;
}
/* Corner ornaments — top-left L + bottom-right L */
.tsh-hn::before {
  content: '';
  position: absolute;
  top: 5px; left: 5px;
  width: 20px; height: 20px;
  border-top: 2px solid rgba(201,169,110,.6);
  border-left: 2px solid rgba(201,169,110,.6);
  pointer-events: none;
}
.tsh-hn::after {
  content: '';
  position: absolute;
  bottom: 5px; right: 5px;
  width: 20px; height: 20px;
  border-bottom: 2px solid rgba(201,169,110,.6);
  border-right: 2px solid rgba(201,169,110,.6);
  pointer-events: none;
}
.tsh-hn:hover {
  transform: translateY(-5px);
  box-shadow:
    inset 0 0 0 3px rgba(12,12,10,.92),
    inset 0 0 0 4px rgba(201,169,110,.28),
    inset 0 0 0 5px rgba(12,12,10,.5),
    0 10px 30px rgba(0,0,0,.5),
    0 0 20px rgba(201,169,110,.18),
    0 0 0 1px rgba(201,169,110,.2);
  border-color: rgba(201,169,110,.6);
}
.tsh-hn__n {
  font-family: var(--tsh-fh); font-size: 2.2rem; font-weight: 900;
  line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.tsh-hn__l {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .55rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(201,169,110,.65); margin-top: 10px;
}

/* ── Chapter Nav — Imperial Flowing style ── */
.tsh-chapter-nav {
  display: flex; gap: 0; flex-wrap: nowrap;
  background: rgba(12,12,10,.92);
  border: none;
  border-top:    2px solid rgba(201,169,110,.38);
  border-bottom: 1px solid rgba(201,169,110,.12);
  border-radius: 0;
  padding: 0;
  margin-bottom: 4px;
  position: relative; z-index: 50;
}
.tsh-chapter-nav--stuck {
  position: fixed !important;
  left: 50%; transform: translateX(-50%);
  width: calc(100% - 40px); max-width: 940px;
  z-index: 200; margin-bottom: 0;
  box-shadow: 0 6px 28px rgba(0,0,0,.65), 0 0 0 1px rgba(201,169,110,.1);
  transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .22s ease;
}
/* Intelligent sticky — ẩn khi scroll xuống, hiện khi scroll lên */
.tsh-chapter-nav--stuck.tsh-chapter-nav--hidden {
  transform: translateX(-50%) translateY(calc(-100% - 20px));
  opacity: 0;
  pointer-events: none;
}
.tsh-chapter-nav-ph { display: block; height: 0; }
/* Greek meander ABOVE — đậm hơn */
.tsh-chapter-nav::before {
  content: ''; position: absolute;
  top: -14px; left: 3%; right: 3%; height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath d='M0 7h6V0h12v7h6V0h12v7h6v7H36V7h-6v7H12V7H6v7H0z' fill='%23c9a96e' opacity='.1'/%3E%3Cpath d='M0 7h6V0h12v7h6V0h12v7h6v7H36V7h-6v7H12V7H6v7H0z' fill='none' stroke='%23c9a96e' stroke-width='.9' opacity='.55'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-size: 48px 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
/* Wave BELOW — đậm hơn */
.tsh-chapter-nav::after {
  content: ''; position: absolute;
  bottom: -13px; left: 3%; right: 3%; height: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='13' viewBox='0 0 56 13'%3E%3Cpath d='M0 13C5 13 7 2 14 2S23 13 28 13 33 2 42 2S51 13 56 13' fill='none' stroke='%23c9a96e' stroke-width='1.1' opacity='.45'/%3E%3Ccircle cx='14' cy='2' r='2.2' fill='%23c9a96e' opacity='.18'/%3E%3Ccircle cx='42' cy='2' r='2.2' fill='%23c9a96e' opacity='.18'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-size: 56px 13px;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  z-index: 1;
}
/* Tab links */
.tsh-chapter-link {
  flex: 1 1 0; min-width: 0;
  padding: 12px 10px;
  min-height: 46px;
  background: transparent; border: none; border-radius: 0;
  /* Divider between tabs */
  border-right: 1px solid rgba(201,169,110,.1);
  color: rgba(232,224,208,.45);
  font-family: var(--tsh-fb);
  font-size: .82rem; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: color .22s ease, background .22s ease;
  touch-action: manipulation; /* FIX MD6 */
  white-space: nowrap; overflow: hidden;
  text-decoration: none; position: relative;
}
.tsh-chapter-link:last-child { border-right: none; }
.tsh-chapter-link:hover {
  color: var(--tsh-gold);
  background: rgba(201,169,110,.04);
}
.tsh-chapter-link:active { opacity: .75; }
/* Active: gold text + subtle tint, NO solid fill */
.tsh-chapter-link.active {
  color: #f5d58c;
  font-weight: 700;
  background: rgba(201,169,110,.07);
  letter-spacing: .01em;
}
.tsh-chapter-link:focus-visible {
  outline: 2px solid var(--tsh-gold); outline-offset: -2px;
}
/* Sliding gold indicator bar */
.tsh-tab-ind {
  position: absolute;
  bottom: 0; left: 0;
  height: 2.5px; width: 0;
  background: linear-gradient(90deg, #c9a96e 0%, #f5d58c 50%, #c9a96e 100%);
  box-shadow: 0 0 10px rgba(201,169,110,.75), 0 0 22px rgba(201,169,110,.3);
  border-radius: 2px 2px 0 0;
  transition: left .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1);
  pointer-events: none; z-index: 3;
}
/* ── All panes visible (single scroll page) ── */
.tsh-tab-pane {
  display: block;
  padding: 24px 16px;
  border: 1px solid rgba(201,169,110,.06);
  border-radius: 4px;
  background: rgba(255,255,255,.01);
}
/* ── Chapter Dividers — giữa mỗi nhóm chỉ số ── */
.tsh-chapter-divider {
  padding: 48px 0 28px; text-align: center;
  position: relative; scroll-margin-top: 120px;
}
.tsh-cd-meander {
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12' viewBox='0 0 48 12'%3E%3Cpath d='M0 6h6V0h12v6h6V0h12v6h6v6H36V6h-6v6H12V6H6v6H0z' fill='%23c9a96e' opacity='.08'/%3E%3Cpath d='M0 6h6V0h12v6h6V0h12v6h6v6H36V6h-6v6H12V6H6v6H0z' fill='none' stroke='%23c9a96e' stroke-width='.8' opacity='.45'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: center; background-size: 48px 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
}
.tsh-cd-content { padding: 20px 0; }
.tsh-cd-content::before {
  content: ''; display: block; width: 80px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--tsh-gold), transparent);
  margin: 0 auto 12px; opacity: .4;
}
.tsh-cd-number {
  display: block; font-family: 'Lexend Deca', sans-serif;
  font-size: 1.8rem; color: var(--tsh-gold); opacity: .5;
  letter-spacing: .15em; margin-bottom: 4px;
}
.tsh-cd-title {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 1.4rem; color: var(--tsh-gold); letter-spacing: .08em;
  margin: 0 0 6px; text-transform: uppercase;
}
.tsh-cd-sub {
  font-family: var(--tsh-fb); font-size: .8rem; color: var(--tsh-text2);
  margin: 0 auto; max-width: 420px;
}
.tsh-chapter-divider::before, .tsh-chapter-divider::after {
  content: ''; position: absolute; width: 24px; height: 24px;
  border-color: rgba(201,169,110,.25); border-style: solid;
}
.tsh-chapter-divider::before { top: 16px; left: 16px; border-width: 1px 0 0 1px; }
.tsh-chapter-divider::after { bottom: 0; right: 16px; border-width: 0 1px 1px 0; }
/* Scroll offset cho tất cả anchor targets */
[id^="a-"], [id^="b-"], [id^="c-"], [id^="d-"], [id^="chapter-"], #tsh-synthesis {
  scroll-margin-top: 120px;
}

/* ════════════════════════════════════════════
   LIFE INSIGHTS — Tình Duyên / Gia Đình / Tài Chính
════════════════════════════════════════════ */
/* Base card */
.tsh-li-card {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(201,169,110,.12);
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 14px;
  position: relative;
  transition: border-color .25s;
}
.tsh-li-card:hover { border-color: rgba(201,169,110,.25); }
.tsh-li-card--timing { border-left: 3px solid rgba(201,169,110,.3); background: rgba(201,169,110,.02); }
.tsh-li-card--rich   { background: rgba(255,255,255,.025); }
/* Head row */
.tsh-li-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
/* Number badge — large */
.tsh-li-num-badge {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  min-width: 48px;
  height: 48px;
  border: 1.5px solid;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(0,0,0,.3);
  letter-spacing: -.02em;
}
.tsh-li-num-badge--sm { font-size: 1.1rem; min-width: 36px; height: 36px; }
.tsh-li-card-meta { flex: 1; min-width: 0; }
.tsh-li-card-label {
  font-family: 'Playfair Display', serif;
  font-size: .95rem;
  font-weight: 600;
  color: var(--tsh-text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  line-height: 1.4;
}
.tsh-li-card-src  { font-size: .73rem; color: var(--tsh-text2); margin-top: 4px; }
.tsh-li-card-body { font-size: .88rem; line-height: 1.75; color: var(--tsh-text); padding-left: 62px; margin-bottom: 12px; }
/* Strengths / Weaknesses */
.tsh-li-bullets { margin: 10px 0 4px 62px; border-radius: 4px; padding: 10px 14px; }
.tsh-li-bullets--plus { background: rgba(74,222,128,.04); border-left: 2px solid rgba(74,222,128,.35); }
.tsh-li-bullets--warn { background: rgba(251,191,36,.04);  border-left: 2px solid rgba(251,191,36,.3); }
.tsh-li-bullets-title { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tsh-text2); margin-bottom: 6px; }
.tsh-li-bullet { font-size: .83rem; line-height: 1.6; color: var(--tsh-text); padding: 2px 0; }
.tsh-li-bullet::before { content: '•  '; color: var(--tsh-gold); }
/* Timing badge */
.tsh-li-cur-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .03em;
  line-height: 1.3;
  vertical-align: middle;
}

/* ── 9-Year Cycle Wheel ── */
.tsh-yw-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0 20px;
}
.tsh-yw-label {
  font-size: .75rem;
  color: var(--tsh-text2);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 12px;
  text-align: center;
}
.tsh-yw-svg { display: block; width: 220px; height: 220px; }
.tsh-yw-needle {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: tsh-yw-spin 1.6s cubic-bezier(.34,1.4,.64,1) forwards;
  will-change: transform;
}
@keyframes tsh-yw-spin {
  from { transform: rotate(-360deg); opacity: 0; }
  to   { transform: rotate(0deg);    opacity: 1; }
}
.tsh-yw-seg-glow { animation: tsh-yw-glow 2.2s ease-in-out infinite; }
@keyframes tsh-yw-glow {
  0%, 100% { stroke-opacity: .1; }
  50%       { stroke-opacity: .3; }
}

/* Responsive */
@media (max-width: 640px) {
  .tsh-li-card        { padding: 16px 14px; }
  .tsh-li-card-body   { padding-left: 0; margin-top: 8px; }
  .tsh-li-bullets     { margin-left: 0; }
  .tsh-li-card-head   { gap: 10px; }
  .tsh-li-num-badge   { min-width: 40px; height: 40px; font-size: 1.3rem; }
  .tsh-yw-svg         { width: 190px; height: 190px; }
}

/* ── Section headings — Greek key meander border + pillar frame ── */
.tsh-sh {
  display: flex; align-items: center; gap: 14px;
  margin: 24px 0 14px;
  position: relative;
  padding: 0 0 18px 18px;
  margin-bottom: 20px;
  /* Left pillar — vertical Greek column line */
  border-left: 3px solid rgba(201,169,110,.35);
}
/* Top ornamental dot on the pillar */
.tsh-sh::before {
  content: '';
  position: absolute;
  top: -4px; left: -6px;
  width: 9px; height: 9px;
  background: rgba(201,169,110,.5);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(201,169,110,.3);
}
/* Bottom — double-band Greek key meander (wider + filled) */
.tsh-sh::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='16' viewBox='0 0 64 16'%3E%3Crect x='0' y='0' width='64' height='16' fill='none'/%3E%3Cpath d='M0 4h8V0h4v8H4v4h8V4h4V0h4v8h-4v4h8V4h4V0h4v8h-4v4h8V4h4V0h4v8h-4v4h8v4H0z' fill='%23c9a96e' opacity='.08'/%3E%3Cpath d='M0 4h8V0h4v8H4v4h8V4h4V0h4v8h-4v4h8V4h4V0h4v8h-4v4h8V4h4V0h4v8h-4v4h8v4H0z' fill='none' stroke='%23c9a96e' stroke-width='.8' opacity='.5'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 64px 16px;
  -webkit-mask-image: linear-gradient(90deg, black, black 80%, transparent);
  mask-image: linear-gradient(90deg, black, black 80%, transparent);
}
.tsh-sh h3 {
  font-family: var(--tsh-fh); font-size: 1.25rem;
  font-weight: 600; color: var(--tsh-gold);
  letter-spacing: 0.04em;
}
/* Icon span — SVG host style */
.tsh-sh .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--tsh-gold);
  opacity: .8;
  flex-shrink: 0;
}
.tsh-sh .ico svg,
.tsh-ico { display: inline-block; vertical-align: middle; }

/* ── Expandable Cards ── */
.tsh-cards-col { display: flex; flex-direction: column; gap: 10px; }
.tsh-card {
  position: relative;
  border: 1px solid var(--tsh-border);
  border-radius: 4px;
  background: var(--tsh-surface);
  /* Inner frame line */
  box-shadow: inset 0 0 0 4px rgba(12,12,10,.9), inset 0 0 0 5px rgba(201,169,110,.06);
}
/* Card corner ornaments — top-left + bottom-right */
.tsh-card::before {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-top: 1.5px solid rgba(201,169,110,.3);
  border-left: 1.5px solid rgba(201,169,110,.3);
  pointer-events: none; z-index: 1;
}
.tsh-card::after {
  content: '';
  position: absolute; bottom: 3px; right: 3px;
  width: 14px; height: 14px;
  border-bottom: 1.5px solid rgba(201,169,110,.3);
  border-right: 1.5px solid rgba(201,169,110,.3);
  pointer-events: none; z-index: 1;
}
.tsh-card-head {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; cursor: pointer; user-select: none;
  /* Denser lattice + cloud scroll pattern */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M0 30h60M30 0v60' fill='none' stroke='%23c9a96e' stroke-width='.3' opacity='.07'/%3E%3Ccircle cx='30' cy='30' r='12' fill='none' stroke='%23c9a96e' stroke-width='.3' opacity='.05'/%3E%3Ccircle cx='30' cy='30' r='20' fill='none' stroke='%23c9a96e' stroke-width='.2' opacity='.04'/%3E%3Cpath d='M15 15Q20 10 25 15T35 15' fill='none' stroke='%23c9a96e' stroke-width='.3' opacity='.06'/%3E%3Cpath d='M25 45Q30 40 35 45T45 45' fill='none' stroke='%23c9a96e' stroke-width='.3' opacity='.06'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}
.tsh-card-head .ch-num {
  font-family: var(--tsh-fh); font-size: 2.2rem; font-weight: 900;
  color: var(--tsh-gold-hi); min-width: 44px; text-align: center;
  letter-spacing: -0.025em; font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  text-shadow: 0 0 20px rgba(201,169,110,.4);
}
.tsh-card-head .ch-info { flex: 1; }
.tsh-card-head .ch-info .ch-lbl {
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--tsh-gold); margin-bottom: 4px;
}
.tsh-card-head .ch-info .ch-title {
  font-family: var(--tsh-fb); font-size: 1.08rem; font-weight: 600;
  color: var(--tsh-text);
}
.tsh-card-head .ch-arrow {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex-shrink: 0; color: var(--tsh-text3);
}
/* expandCard() uses plain <span class="ch-arrow">▾</span> — keep rotate */
.tsh-card:not(.tsh-key-card).is-open .ch-arrow { transform: rotate(180deg); font-size: .85rem; transition: transform .3s; }
.tsh-card:not(.tsh-key-card) .ch-arrow { font-size: .85rem; transition: transform .3s; }
/* keyCard() uses .ch-chev + .ch-xem inside .ch-arrow */
.ch-xem {
  font-size: .62rem; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(201,169,110,.5); white-space: nowrap; font-family: var(--tsh-fb);
  transition: color .2s; line-height: 1;
}
.tsh-card-head:hover .ch-xem { color: rgba(201,169,110,.85); }
.tsh-key-card.is-open .ch-xem { display: none; }
.ch-chev { font-size: 1.05rem; transition: transform .3s; line-height: 1; }
.tsh-key-card.is-open .ch-chev { transform: rotate(180deg); }
.tsh-card-body { padding: 0 24px 24px; }
.tsh-card-body p {
  font-size: .93rem; line-height: 1.82;
  color: var(--tsh-text2); margin-bottom: 12px;
}
.tsh-card-body p:last-child { margin-bottom: 0; }
.tsh-pros, .tsh-cons {
  margin: 14px 0; display: flex; flex-direction: column; gap: 6px;
}
.tsh-pros { animation: tshSwReveal .5s ease-out both; }
.tsh-cons { animation: tshSwReveal .5s .1s ease-out both; }
.tsh-pros h4 { color: var(--tsh-success); }
.tsh-cons h4 { color: var(--tsh-error); }
.tsh-pros h4, .tsh-cons h4 {
  font-size: .73rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 8px;
}
.tsh-item {
  padding: 8px 14px; border-radius: var(--tsh-r2);
  font-size: .87rem; line-height: 1.55;
  animation: tshItemSlide .4s ease-out both;
}
.tsh-item:nth-child(2) { animation-delay: .05s; }
.tsh-item:nth-child(3) { animation-delay: .1s; }
.tsh-item:nth-child(4) { animation-delay: .15s; }
.tsh-item:nth-child(5) { animation-delay: .2s; }
.tsh-item:nth-child(6) { animation-delay: .25s; }
.tsh-pros .tsh-item {
  background: rgba(109,184,126,.09); border-left: 2px solid rgba(109,184,126,.45);
  color: rgba(220,235,222,.88);
}
.tsh-cons .tsh-item {
  background: rgba(229,115,115,.09); border-left: 2px solid rgba(229,115,115,.40);
  color: rgba(235,220,220,.88);
}
.tsh-advice {
  margin-top: 14px; padding: 14px 18px;
  background: var(--tsh-purple-dim); border: 1px solid rgba(139,105,20,.22);
  border-radius: var(--tsh-r2); font-size: .88rem;
  line-height: 1.72; color: var(--tsh-text2);
  animation: tshAdviceGlow .6s .2s ease-out both;
  position: relative;
}
.tsh-advice::before { content: '✦ '; color: var(--tsh-purple); animation: tshStarTwinkle 2.5s ease-in-out infinite; }
.tsh-section {
  margin: 12px 0; padding: 12px 16px;
  background: rgba(201,169,110,.06); border: 1px solid rgba(201,169,110,.14);
  border-radius: var(--tsh-r2);
  animation: tshSectionIn .4s ease-out both;
}
.tsh-section:nth-child(2) { animation-delay: .08s; }
.tsh-section:nth-child(3) { animation-delay: .16s; }
.tsh-section:nth-child(4) { animation-delay: .24s; }
.tsh-section:nth-child(5) { animation-delay: .32s; }
.tsh-section:nth-child(6) { animation-delay: .40s; }
.tsh-section:nth-child(7) { animation-delay: .48s; }
.tsh-section:nth-child(8) { animation-delay: .56s; }
.tsh-section h4 {
  font-size: .73rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tsh-gold); margin: 0 0 6px;
}
.tsh-section p {
  font-size: .87rem; line-height: 1.65; color: var(--tsh-text2); margin: 0;
}

/* ── Progress Bars ── */
.tsh-bars { display: flex; flex-direction: column; gap: 10px; }
.tsh-bar-row {
  display: grid; grid-template-columns: 160px 1fr 38px;
  align-items: center; gap: 12px;
}
.tsh-bar-lbl { font-size: .82rem; color: var(--tsh-text2); }
.tsh-bar-track {
  height: 6px; background: rgba(255,255,255,.07);
  border-radius: 100px; overflow: hidden;
}
.tsh-bar-fill {
  height: 100%; border-radius: 100px;
  background: var(--tsh-gold-grad); width: 0;
  transition: width 1.1s cubic-bezier(.4,0,.2,1);
}
.tsh-bar-val { font-size: .78rem; color: var(--tsh-gold); text-align: right; }

/* ── Mini Cards Grid ── */
.tsh-mini-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
/* Key cards (Chìa Khóa Bản Thể) — single column accordion */
#d-keys { grid-template-columns: 1fr; gap: 10px; }
/* Support cards (Chỉ Số Phụ Trợ) — single column stack, chiều cao đồng đều hơn */
#c-supp { grid-template-columns: 1fr; gap: 10px; }
.tsh-mc {
  padding: 20px 22px; background: var(--tsh-surface);
  border: 1px solid var(--tsh-border); border-radius: 4px;
  position: relative;
  /* Inner frame */
  box-shadow: inset 0 0 0 3px rgba(12,12,10,.9), inset 0 0 0 4px rgba(201,169,110,.06);
}
/* Mini card corner ornament — top-left only for subtlety */
.tsh-mc::before {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 12px; height: 12px;
  border-top: 1.5px solid rgba(201,169,110,.25);
  border-left: 1.5px solid rgba(201,169,110,.25);
  pointer-events: none;
}
.tsh-mc__lbl {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tsh-gold); margin-bottom: 6px;
}
.tsh-mc__num {
  font-family: var(--tsh-fh); font-size: 2rem; font-weight: 700;
  color: var(--tsh-gold-hi); margin-bottom: 4px;
  letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.tsh-mc__title {
  font-size: .9rem; font-weight: 600; color: var(--tsh-text); margin-bottom: 6px;
}
.tsh-mc__desc { font-size: .82rem; color: var(--tsh-text2); line-height: 1.55; }

/* ── Tags (Missing / Karmic) ── */
.tsh-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.tsh-tag {
  padding: 6px 14px; border-radius: 4px; font-size: .82rem;
  background: var(--tsh-surface); border: 1px solid var(--tsh-border);
  color: var(--tsh-text2);
}
.tsh-tag.miss    { border-color: rgba(229,115,115,.3); color: var(--tsh-error); background: rgba(229,115,115,.06); }
.tsh-tag.karmic  { border-color: rgba(139,105,20,.4); color: #c9a96e; background: var(--tsh-purple-dim); }
.tsh-tag.none    { color: var(--tsh-text3); font-style: italic; }

/* ── Pinnacles ── */
.tsh-pinnacles {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin: 10px 0;
}
.tsh-pin {
  text-align: center; padding: 18px 14px;
  background: var(--tsh-surface); border: 1px solid var(--tsh-border);
  border-radius: 4px; transition: box-shadow .2s;
  position: relative;
  /* Double inner frame */
  box-shadow: inset 0 0 0 3px rgba(12,12,10,.9), inset 0 0 0 4px rgba(201,169,110,.06);
}
.tsh-pin::before {
  content: '';
  position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px;
  border: 1px solid rgba(201,169,110,.06);
  pointer-events: none;
}
.tsh-pin.cur {
  background: rgba(201,169,110,.08); border-color: rgba(201,169,110,.42);
  box-shadow: inset 0 0 0 3px rgba(12,12,10,.9), inset 0 0 0 4px rgba(201,169,110,.15), var(--tsh-glow);
}
.tsh-pin .pn { font-family: var(--tsh-fb); font-size: 1.9rem; font-weight: 700; color: var(--tsh-gold-hi); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tsh-pin .pr { font-size: .7rem; color: var(--tsh-text2); margin-top: 4px; }

/* ── Challenges ── */
.tsh-challenges {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px; margin: 10px 0;
}
.tsh-chl {
  text-align: center; padding: 16px 22px; min-width: 82px;
  background: var(--tsh-surface); border: 1.5px solid rgba(201,169,110,.15);
  border-radius: 4px;
  position: relative;
  /* Inner frame */
  box-shadow: inset 0 0 0 3px rgba(12,12,10,.9), inset 0 0 0 4px rgba(201,169,110,.05);
}
.tsh-chl .cn { font-family: var(--tsh-fb); font-size: 1.9rem; font-weight: 700; color: #c9a96e; }
.tsh-chl .cl { font-size: .7rem; color: var(--tsh-text2); margin-top: 4px; }

/* ── Kim Tự Tháp ── */
.tsh-pyramid { padding: 8px 0 4px; }
.tsh-pyr-row { display: flex; justify-content: center; gap: 6px; margin-bottom: 6px; }
.tsh-pyr-node {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: var(--tsh-surface2); border: 1.5px solid var(--tsh-border);
  border-radius: 4px;
  font-family: var(--tsh-fb); font-size: 1.1rem; font-weight: 700;
  color: var(--tsh-gold-hi);
  box-shadow: inset 0 0 0 2px rgba(12,12,10,.85), inset 0 0 0 3px rgba(201,169,110,.06);
}
.tsh-pyr-node.apex {
  width: 68px; height: 68px;
  font-family: 'Lexend Deca', sans-serif; font-size: 1.9rem; font-weight: 700;
  border-width: 2px; text-shadow: 0 0 16px currentColor;
  box-shadow: inset 0 0 0 2px rgba(12,12,10,.85), inset 0 0 0 3px rgba(201,169,110,.2), 0 0 22px rgba(201,169,110,.15);
  animation: tshApexGlow 2.8s ease-in-out infinite;
}
@keyframes tshApexGlow {
  0%,100% { box-shadow: inset 0 0 0 2px rgba(12,12,10,.85), inset 0 0 0 3px rgba(201,169,110,.2), 0 0 22px rgba(201,169,110,.15); }
  50%      { box-shadow: inset 0 0 0 2px rgba(12,12,10,.85), inset 0 0 0 3px rgba(201,169,110,.35), 0 0 42px rgba(201,169,110,.45), 0 0 80px rgba(201,169,110,.18); }
}
.tsh-pyr-base {
  background: rgba(201,169,110,.05) !important; border-width: 2px !important; opacity: .85;
}
/* Reading guide bar */
.tsh-pyr-guide-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; margin-bottom: 10px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(201,169,110,.1); border-radius: 4px;
}
.tsh-pyr-guide-end { font-size: .7rem; color: var(--tsh-gold); font-weight: 600; line-height: 1.4; }
.tsh-pyr-guide-end small { font-weight: 400; color: var(--tsh-text2); font-size: .65rem; }
.tsh-pyr-guide-end--r { text-align: right; }
.tsh-pyr-guide-mid { font-size: .66rem; color: rgba(232,224,208,.35); text-align: center; }
/* Row labels — NO border, clear positioning */
.tsh-pyr-lbl {
  text-align: center; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  margin: 6px 0 10px; padding: 0; border: none; background: transparent; display: block;
}
.tsh-pyr-lbl--apex { font-weight: 700; }
.tsh-pyr-lbl--base { color: rgba(232,224,208,.3); }
/* Apex callout */
.tsh-pyr-apex-note {
  display: flex; align-items: center; gap: 22px; margin: 18px 0 0; padding: 16px 22px;
  background: rgba(255,255,255,.04); border-radius: 4px;
  border: 1px solid rgba(201,169,110,.18); border-top: 2px solid transparent;
  box-shadow: inset 0 0 0 3px rgba(12,12,10,.9), inset 0 0 0 4px rgba(201,169,110,.05);
  position: relative;
}
.tsh-pyr-apex-title {
  font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 600; margin-bottom: 6px; line-height: 1.3;
}
.tsh-pyr-apex-body { font-size: .81rem; color: var(--tsh-text2); line-height: 1.65; }
@media (max-width: 480px) {
  .tsh-pyr-apex-note { flex-direction: column; gap: 12px; padding: 14px 16px; }
  .tsh-pyr-guide-mid { display: none; }
}

/* ── Personal Cycle Rows ── */
.tsh-py-row {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; margin-bottom: 10px;
  background: var(--tsh-surface); border: 1px solid var(--tsh-border);
  border-radius: 4px;
  position: relative;
  /* Inner double frame */
  box-shadow: inset 0 0 0 3px rgba(12,12,10,.9), inset 0 0 0 4px rgba(201,169,110,.05);
}
.tsh-py-n {
  font-family: var(--tsh-fh); font-size: 2.2rem; font-weight: 700;
  color: var(--tsh-gold-hi); min-width: 46px; text-align: center;
  letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
}
.tsh-py-i .py-lbl {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tsh-gold); margin-bottom: 4px;
}
.tsh-py-i .py-txt { font-size: .9rem; color: var(--tsh-text2); line-height: 1.5; }

/* ── Personal Year 9-cell Strip ── */
.tsh-yr-strip {
  display: flex; gap: 7px; overflow-x: auto; padding: 4px 0 14px;
  scrollbar-width: none; margin-bottom: 14px;
}
.tsh-yr-strip::-webkit-scrollbar { display: none; }
.tsh-yr-cell {
  min-width: 50px; flex: 1; padding: 14px 6px 10px;
  text-align: center; border-radius: 4px;
  border: 1.5px solid rgba(201,169,110,.12);
  background: rgba(255,255,255,.03);
  transition: all .2s;
  position: relative;
  /* Subtle inner frame */
  box-shadow: inset 0 0 0 2px rgba(12,12,10,.8), inset 0 0 0 3px rgba(201,169,110,.04);
}
.tsh-yr-cur {
  background: rgba(201,169,110,.06);
  border-color: rgba(201,169,110,.35);
  box-shadow: inset 0 0 0 2px rgba(12,12,10,.8), inset 0 0 0 3px rgba(201,169,110,.1), 0 0 12px rgba(201,169,110,.1);
}
.tsh-yr-num { font-family: var(--tsh-fb); font-size: 1.35rem; font-weight: 700; line-height: 1; }
.tsh-yr-label { font-size: .65rem; color: var(--tsh-text3); margin-top: 5px; }
.tsh-yr-here { font-size: .65rem; color: var(--tsh-gold); margin-top: 3px; }

/* ── Lo Shu Grid ── */
.tsh-loshu-wrap { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.tsh-loshu-grid {
  display: grid; grid-template-columns: repeat(3,72px);
  grid-template-rows: repeat(3,80px); gap: 6px; flex-shrink: 0;
}
.tsh-lc {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--tsh-surface2); border: 1.5px solid var(--tsh-border);
  border-radius: 4px; position: relative;
  /* Double inner frame — imperial seal style */
  box-shadow: inset 0 0 0 3px rgba(12,12,10,.85), inset 0 0 0 4px rgba(201,169,110,.08);
}
.tsh-lc .lc-pos {
  font-size: .6rem; color: var(--tsh-text3);
  position: absolute; top: 5px; left: 7px;
}
.tsh-lc .lc-d {
  font-family: var(--tsh-fn); font-size: 1.55rem; font-weight: 700;
  color: var(--tsh-gold-hi); letter-spacing: .04em;
  text-shadow: 0 0 14px rgba(201,169,110,.5);
}
/* lc-name: concept label below the big number */
.tsh-lc .lc-name {
  font-size: .48rem; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(232,224,208,.45); line-height: 1; margin-top: 1px;
  font-family: 'Lexend Deca', system-ui, sans-serif;
}
.tsh-lc .lc-name--miss {
  color: rgba(232,224,208,.22);
}
/* lc-d overrides */
.tsh-lc .lc-d {
  /* color + text-shadow set inline per energy color */
  transition: filter .2s;
}
.tsh-lc .lc-d.lc-empty {
  color: rgba(232,224,208,.18); font-size: 1.1rem; font-weight: 300;
  text-shadow: none; letter-spacing: .02em;
}
.tsh-lc .lc-cnt {
  position: absolute; bottom: 3px; right: 5px;
  font-size: .58rem; font-weight: 700; color: var(--tsh-gold);
  background: rgba(201,169,110,.12); border-radius: 3px;
  padding: 1px 4px; letter-spacing: .02em;
}
/* empty cell: subtler, not just faded */
.tsh-lc.empty {
  opacity: 1;
  background: rgba(255,255,255,.012);
  border-color: rgba(255,255,255,.07);
  border-style: dashed;
}
.tsh-lc.hl-s {
  background: rgba(201,169,110,.1); border-color: rgba(201,169,110,.5);
  border-style: solid;
  box-shadow: 0 0 18px rgba(201,169,110,.2);
}
.tsh-lc.hl-w { background: rgba(229,115,115,.06); border-color: rgba(229,115,115,.25); border-style: dashed; }
.tsh-lc { animation: tshLcIn .45s ease-out both; }
@keyframes tshLcIn { from { opacity:0; transform:scale(.75); } to { opacity:1; transform:scale(1); } }
.tsh-lc-pulse { animation: tshPulse 2.5s ease-in-out infinite; }

/* Summary strip */
.tsh-ls-summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px;
  margin-bottom: 14px; padding: 10px 14px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(201,169,110,.12); border-radius: 4px;
}
.tsh-ls-sum--have {
  font-size: .73rem; color: var(--tsh-text2);
}
.tsh-ls-sum--have strong { color: #5aab6e; font-weight: 700; }
.tsh-ls-sum--miss {
  font-size: .73rem; color: var(--tsh-text2);
}
.tsh-ls-sum--miss strong { color: rgba(229,115,115,.85); font-weight: 700; }
.tsh-ls-sum-hint {
  width: 100%; font-size: .65rem; color: var(--tsh-text2); opacity: .55;
  line-height: 1.5; margin-top: 2px;
}

/* Lo Shu wrapper: grid + SVG arrow overlay */
.tsh-ls-wrap {
  position: relative; display: inline-block; flex-shrink: 0;
}
.tsh-ls-arrows {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}
.tsh-loshu-info { flex: 1; min-width: 200px; }
.tsh-arrow-list { display: flex; flex-direction: column; gap: 8px; }
.tsh-ai {
  padding: 10px 14px; border-radius: var(--tsh-r2); font-size: .84rem;
}
.tsh-ai.str { background: rgba(201,169,110,.09); border-left: 2px solid var(--tsh-gold); color: var(--tsh-text); }
.tsh-ai.wk  { background: rgba(239,68,68,.07);   border-left: 2px solid rgba(239,68,68,.4); color: var(--tsh-text2); }
.tsh-ai .ai-name  { font-weight: 600; margin-bottom: 2px; }
.tsh-ai .ai-plane { font-size: .73rem; opacity: .6; }
.tsh-ai .ai-desc    { font-size: .84rem; line-height: 1.6; margin-top: 6px; color: var(--tsh-text2); }
.tsh-ai .ai-meaning { font-size: .82rem; line-height: 1.55; margin-top: 4px; color: var(--tsh-text2); opacity: .85; }
.tsh-ai .ai-advice  { font-size: .82rem; line-height: 1.5; margin-top: 6px; padding: 6px 10px; background: rgba(139,105,20,.08); border-radius: 6px; color: var(--tsh-purple); }
/* Arrow card: 2-col layout + mini Lo Shu grid */
.tsh-ai-row { display:flex; align-items:flex-start; gap:10px; }
.tsh-ai-text { flex:1; min-width:0; }
.tsh-mini-ls { display:grid; grid-template-columns:repeat(3,18px); gap:2px; flex-shrink:0; margin-top:2px; }
.tsh-mini-lc { display:flex; align-items:center; justify-content:center; height:18px; font-size:.48rem; font-family:'Lexend Deca', sans-serif; font-weight: 400; border:1px solid rgba(201,169,110,.1); border-radius:2px; color:rgba(232,224,208,.15); line-height:1; }
.tsh-mini-lc.emp { font-family:system-ui,sans-serif; font-size:.46rem; font-weight:300; }
.tsh-ai-strength { display:flex; align-items:center; gap:3px; margin:4px 0 5px; }
.tsh-ais-dot { font-size:.5rem; color:rgba(201,169,110,.18); }
.tsh-ais-dot.on { color:var(--tsh-gold); }
.tsh-ais-lbl { font-size:.6rem; color:var(--tsh-text3); margin-left:3px; letter-spacing:.02em; }

/* ── Planes ── */
.tsh-planes-list { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.tsh-plane-row {
  display: grid; grid-template-columns: 150px 1fr 40px;
  align-items: center; gap: 12px;
}
.tsh-plane-lbl .pname { font-weight: 600; font-size: .88rem; color: var(--tsh-text); display: block; }
.tsh-plane-lbl .psub  { font-size: .73rem; color: var(--tsh-text2); }

/* ── Planes: dominant highlight ── */
.tsh-plane-bar-item.is-dominant {
  background: rgba(201,169,110,.06); border: 1px solid rgba(201,169,110,.18);
  border-radius: 4px; padding: 10px 12px; margin: -4px -12px;
}
.pb-dom {
  font-size: .55rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tsh-gold); background: rgba(201,169,110,.15);
  padding: 2px 6px; border-radius: 3px; margin-left: 8px;
}
.pb-pct { font-family: var(--tsh-fn); font-weight: 700; }

/* ── Strength / Weakness Summary ── */
.tsh-sw-wrap { display: flex; flex-direction: column; gap: 8px; }


/* ── Element badges ── */
.tsh-elem {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 22px; border-radius: 4px; font-size: .9rem; font-weight: 600;
  border: 1px solid var(--tsh-border);
}
.elem-lua  { background: rgba(232,91,58,.1);   color: #e85b3a; border-color: rgba(232,91,58,.25) !important; }
.elem-dat  { background: rgba(201,169,110,.1); color: #c9a96e; border-color: rgba(201,169,110,.25) !important; }
.elem-gio  { background: rgba(184,196,208,.1); color: #b8c4d0; border-color: rgba(184,196,208,.25) !important; }
.elem-nuoc { background: rgba(74,158,255,.1);  color: #4a9eff; border-color: rgba(74,158,255,.25) !important; }

/* ── Element Philosophy Popup (kept for compat, now replaced by card) ── */
.tsh-elem-popup {
  max-height:0; overflow:hidden; opacity:0;
  transition: max-height .4s var(--ease-cosmic), opacity .3s, margin .3s;
  background:rgba(255,255,255,.04); border-radius:var(--tsh-r);
  padding:0 18px; margin:0 auto; max-width:520px; text-align:left;
}
.tsh-elem-open { max-height:1000px; opacity:1; padding:16px 18px; margin:12px auto 0; }
.tsh-elem-popup-title { font-weight:700; font-size:.95rem; color:var(--tsh-gold); margin-bottom:6px; }
.tsh-elem-popup-trait { font-size:.82rem; color:var(--tsh-text1); margin-bottom:4px; font-weight:600; }
.tsh-elem-popup-nums  { font-size:.75rem; color:var(--tsh-text3); margin-bottom:8px; }
.tsh-elem-popup-desc  { font-size:.82rem; color:var(--tsh-text2); line-height:1.65; }
.tsh-elem-popup-note  { margin-top:10px; padding-top:8px; border-top:1px solid rgba(201,169,110,.15); font-size:.75rem; color:rgba(232,224,208,.45); font-style:italic; line-height:1.5; }

/* ── Element Inline Card (replaces old toggle button) ── */
.tsh-elem-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.1rem;
  border-radius: 4px;
  border: 1px solid rgba(201,169,110,.18);
  background: rgba(201,169,110,.03);
  box-shadow: inset 0 0 0 1px rgba(201,169,110,.05);
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
}
.tsh-elem-card::before, .tsh-elem-card::after {
  content: '';
  position: absolute;
  left: 6px; right: 6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--ec-rgb, 201,169,110),.2), transparent);
}
.tsh-elem-card::before { top: 4px; }
.tsh-elem-card::after  { bottom: 4px; }
.tsh-elem-card--lua  { border-color: rgba(232,91,58,.25);  background: rgba(232,91,58,.04); }
.tsh-elem-card--dat  { border-color: rgba(201,169,110,.25); background: rgba(201,169,110,.04); }
.tsh-elem-card--gio  { border-color: rgba(184,196,208,.25); background: rgba(184,196,208,.04); }
.tsh-elem-card--nuoc { border-color: rgba(74,158,255,.25);  background: rgba(74,158,255,.04); }
/* SVG container */
.tsh-elem-card-vis {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tsh-elem-card-vis .tsh-esvg {
  width: 72px;
  height: 72px;
  overflow: visible;
}
/* Body */
.tsh-elem-card-body {
  flex: 1;
  min-width: 0;
}
.tsh-elem-card-kicker {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .58rem;
  letter-spacing: .14em;
  color: var(--tsh-text3, #786050);
  margin-bottom: .18rem;
  text-transform: uppercase;
}
.tsh-elem-card-name {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  margin-bottom: .35rem;
}
.tsh-elem-card-trait {
  font-size: .8rem;
  font-weight: 600;
  color: var(--tsh-text1, #e8e0d0);
  margin-bottom: .3rem;
  line-height: 1.45;
}
.tsh-elem-card-nums {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-bottom: .35rem;
}
.tsh-elem-chip {
  display: inline-block;
  font-family: 'Lexend Deca', sans-serif;
  font-size: .64rem;
  padding: .1rem .4rem;
  border-radius: 2px;
  border: 1px solid;
  opacity: .8;
}
.tsh-elem-card-desc {
  font-size: .76rem;
  color: var(--tsh-text2, #a89880);
  line-height: 1.6;
}
.tsh-elem-card-cta {
  display: inline-block;
  margin-top: .75rem;
  padding: .35rem .9rem;
  background: transparent;
  border: 1px solid var(--ec, #c9a96e);
  color: var(--ec, #c9a96e);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: .72rem;
  letter-spacing: .06em;
  cursor: pointer;
  border-radius: 2px;
  transition: background .2s, color .2s;
}
.tsh-elem-card-cta:hover {
  background: var(--ec, #c9a96e);
  color: #0c0c0a;
}
/* SVG animations */
.tsh-esvg-cw      { transform-box: fill-box; transform-origin: center; animation: tsh-elem-spin-cw  4s linear infinite; }
.tsh-esvg-ccw     { transform-box: fill-box; transform-origin: center; animation: tsh-elem-spin-ccw 6s linear infinite; }
.tsh-esvg-cw-fast { transform-box: fill-box; transform-origin: center; animation: tsh-elem-spin-cw  2.5s linear infinite; }
@keyframes tsh-elem-spin-cw  { to { transform: rotate(360deg);  } }
@keyframes tsh-elem-spin-ccw { to { transform: rotate(-360deg); } }
.tsh-esvg-fl-outer { transform-box: fill-box; transform-origin: bottom center; animation: tsh-flame-p 2s ease-in-out infinite; }
.tsh-esvg-fl-inner { transform-box: fill-box; transform-origin: bottom center; animation: tsh-flame-p 1.6s ease-in-out infinite .2s; }
.tsh-esvg-fl-core  { transform-box: fill-box; transform-origin: bottom center; animation: tsh-flame-p 2.3s ease-in-out infinite .4s; }
@keyframes tsh-flame-p { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(1.09) scaleY(.96); } }
.tsh-esvg-wave1    { animation: tsh-wave-s 3.5s ease-in-out infinite; }
.tsh-esvg-wave2    { animation: tsh-wave-s 4.5s ease-in-out infinite reverse; }
.tsh-esvg-waveline { animation: tsh-wave-s 3s ease-in-out infinite .5s; }
.tsh-esvg-drop     { transform-box: fill-box; transform-origin: top center; animation: tsh-drop-p 2.4s ease-in-out infinite; }
@keyframes tsh-wave-s { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-7px); } }
@keyframes tsh-drop-p { 0%,100% { transform: scaleY(1) translateY(0); } 50% { transform: scaleY(1.08) translateY(-2px); } }
@media (max-width: 480px) {
  .tsh-elem-card-vis { flex: 0 0 56px; width: 56px; height: 56px; }
  .tsh-elem-card-vis .tsh-esvg { width: 56px; height: 56px; }
  .tsh-elem-card-name { font-size: 1.1rem; }
}


/* ── Responsive: Tablet (641px–1023px) ── */
@media (min-width: 641px) and (max-width: 1023px) {
  .tsh-container    { padding: 0 24px 48px; }
  .tsh-hero-nums    { gap: 10px; }
  .tsh-hn           { min-width: 88px; padding: 16px 18px; }
  .tsh-pg-grid      { grid-template-columns: repeat(3, 1fr); }
  .tsh-mini-grid    { grid-template-columns: repeat(2, 1fr); }
  .tsh-chl-cards    { grid-template-columns: repeat(2, 1fr); }
  .tsh-form-box     { padding: 32px 36px; }
  .tsh-loshu-grid   { grid-template-columns: repeat(3, 68px); grid-template-rows: repeat(3, 76px); }
}

/* ── Responsive: Mobile (≤640px) ── */
@media (max-width: 640px) {
  .tsh-form-box       { padding: 24px 20px; }
  .tsh-date-col input { font-size: 1.1rem; padding: 12px 6px; }
  .tsh-chapter-nav    { gap: 0; }
  .tsh-chapter-link { padding: 10px 6px; font-size: .75rem; gap: 4px; }
  .tsh-chapter-link .tsh-ico { width: 14px; height: 14px; flex-shrink: 0; }
  .tsh-pinnacles      { grid-template-columns: repeat(2, 1fr); }
  .tsh-loshu-grid     { grid-template-columns: repeat(3, 62px); grid-template-rows: repeat(3, 70px); }
  .tsh-bar-row        { grid-template-columns: 90px 1fr 30px; }
  .tsh-plane-row      { grid-template-columns: 110px 1fr 34px; }
  .tsh-hn             { min-width: 80px; padding: 14px 16px; }
  .tsh-hn__n          { font-size: 2.2rem; }
  .tsh-pyr-node       { width: 42px; height: 42px; font-size: .95rem; }
  /* Astrolabe scales down on mobile */
  .tsh-astrolabe-wrap { width: 260px; height: 260px; }
  .tsh-lp-num         { font-size: 4rem; }
  .tsh-lp-name        { font-size: .9rem; padding: 8px 22px; letter-spacing: .18em; }
  .tsh-lp-name-sub    { font-size: .54rem; }
  /* Canvas Chart.js — prevent overflow on small screens */
  .tsh-year-chart-wrap canvas { max-width: 100% !important; }
  .tsh-year-chart-wrap { overflow-x: auto; height: 220px; }
  .tsh-viz-legend { flex-wrap: wrap; gap: 4px 8px; font-size: .65rem; }
  .tsh-viz-zone { font-size: .62rem; padding: 2px 6px; }
  /* Challenges — single column + horizontal accent layout */
  .tsh-chl-cards { grid-template-columns: 1fr; }
  .tsh-chl-card { flex-direction: row; align-items: flex-start; gap: 14px; padding: 14px; }
  .tsh-chl-card-accent { min-width: 56px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding-right: 14px; border-right: 1px solid rgba(201,169,110,.2); margin-bottom: 0; }
  .tsh-chl-card-body { flex: 1; min-width: 0; }
  .tsh-chl-card-num { font-size: 2rem; margin-bottom: 4px; }
  .tsh-chl-card-lbl { font-size: .65rem; text-align: center; line-height: 1.3; }
}

/* ── Responsive: Mobile (≤560px) — icon-only tabs ── */
@media (max-width: 560px) {
  .tsh-chapter-link .tab-lbl { display: none; }
  .tsh-chapter-link { padding: 13px 0; gap: 0; flex: 1 1 0; }
  .tsh-chapter-link .tsh-ico { width: 20px; height: 20px; flex-shrink: 0; }
}

/* ════════════════════════════════════════════
   VIZ 1 — YEAR CYCLE CHART
════════════════════════════════════════════ */
.tsh-year-chart-wrap { position:relative; margin-bottom:0; height:260px; }
.tsh-year-chart-wrap canvas { display:block; }
/* Current-year dot — CSS pulse rings */
@keyframes ycDotPulse { 0%{transform:scale(1);opacity:.7;} 100%{transform:scale(3.8);opacity:0;} }
.tsh-yc-pulse::before,.tsh-yc-pulse::after { content:'';position:absolute;inset:-3px;border-radius:50%;border:1.5px solid rgba(245,213,140,.75);animation:ycDotPulse 2s ease-out infinite; }
.tsh-yc-pulse::after { animation-delay:1s; }
/* ── Year nav buttons (← Năm trước / Năm sau →) ── */
.tsh-yc-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 14px 0 4px;
  padding: 10px 14px;
  background: rgba(201,169,110,.04);
  border: 1px solid rgba(201,169,110,.12);
  border-radius: 4px;
}
.tsh-yc-nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 120px; min-height: 44px; padding: 8px 16px;
  background: rgba(201,169,110,.08);
  border: 1px solid rgba(201,169,110,.22);
  border-radius: 3px; cursor: pointer;
  color: rgba(201,169,110,.8);
  font-size: .8rem; font-family: var(--tsh-fb);
  letter-spacing: .05em; font-weight: 500;
  transition: background .18s, color .18s, border-color .18s;
  -webkit-tap-highlight-color: transparent;
}
.tsh-yc-nav-btn:hover:not(:disabled),
.tsh-yc-nav-btn:active:not(:disabled) {
  background: rgba(201,169,110,.16);
  border-color: rgba(201,169,110,.45);
  color: var(--tsh-gold-hi);
}
.tsh-yc-nav-btn:disabled { opacity: .28; cursor: default; }
.tsh-yc-nav-mid {
  flex: 1; text-align: center; line-height: 1.5;
  font-size: .83rem; color: var(--tsh-text2); font-family: var(--tsh-fb);
}
.tsh-yc-nav-mid strong { font-family: var(--tsh-fh); color: var(--tsh-gold-hi); font-size: 1rem; }
.tsh-yc-cur-badge2 { color: var(--tsh-gold); font-size: .75rem; }
.tsh-year-expand { margin-top:12px; }
.tsh-year-card {
  background: rgba(255,255,255,.04); border:1px solid var(--tsh-border);
  border-radius: 4px; padding:16px 20px; margin-bottom:8px; cursor:pointer;
  transition: background .2s;
  position: relative;
  box-shadow: inset 0 0 0 3px rgba(12,12,10,.9), inset 0 0 0 4px rgba(201,169,110,.04);
}
.tsh-year-card.cur {
  border-color: rgba(201,169,110,.45); background: rgba(201,169,110,.08);
  box-shadow: inset 0 0 0 3px rgba(12,12,10,.9), inset 0 0 0 4px rgba(201,169,110,.1), 0 0 16px rgba(201,169,110,.08);
}
.tsh-year-card.active { background: rgba(255,255,255,.07); }
.tsh-year-card-head { display:flex; align-items:center; gap:12px; }
.tsh-year-num { font-family:var(--tsh-fb); font-size:1.8rem; color:var(--tsh-gold); min-width:40px; }
.tsh-year-info h4 { margin:0 0 2px; font-size:.85rem; color:var(--tsh-text2); font-weight:500; }
.tsh-year-info .yi-title { font-size:1rem; color:var(--tsh-text1); font-weight:600; }
.tsh-year-body { display:none; margin-top:14px; border-top:1px solid var(--tsh-border); padding-top:14px; }
.tsh-year-card.active .tsh-year-body { display:block; }
/* ── Year card header ── */
.tsh-yc-hdr { display:flex; align-items:center; gap:18px; padding-bottom:14px; border-bottom:1px solid var(--tsh-border); margin-bottom:14px; }
.tsh-yc-num-wrap { position:relative; width:72px; height:72px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.tsh-yc-num-ring { position:absolute; inset:0; border-radius:50%; border:1px solid rgba(201,169,110,.18); }
.tsh-yc-num-ring::before { content:''; position:absolute; inset:8px; border-radius:50%; border:1px solid rgba(201,169,110,.12); animation:ycRingRot 10s linear infinite; }
.tsh-yc-num-ring::after  { content:''; position:absolute; inset:16px; border-radius:50%; border:1px dashed rgba(201,169,110,.09); animation:ycRingRot 16s linear infinite reverse; }
@keyframes ycRingRot { to { transform:rotate(360deg); } }
.tsh-yc-num { font-family:'Lexend Deca', system-ui, sans-serif; font-size:2.4rem; font-weight:700; line-height:1; position:relative; z-index:1; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
.tsh-yc-hdr-label { font-size:.63rem; letter-spacing:.12em; color:rgba(232,224,208,.38); text-transform:uppercase; margin-bottom:4px; }
.tsh-yc-hdr-title { font-size:1.08rem; font-weight:700; font-family:'Lexend Deca', system-ui, sans-serif; color:var(--tsh-text1); line-height:1.3; margin-bottom:5px; }
.tsh-yc-hdr-meta { font-size:.82rem; }
.tsh-yc-age { color:rgba(232,224,208,.45); }
.tsh-yc-cur-badge { display:inline-block; background:rgba(201,169,110,.14); border:1px solid rgba(201,169,110,.38); border-radius:20px; padding:1px 8px; font-size:.64rem; color:var(--tsh-gold); letter-spacing:.05em; margin-left:4px; vertical-align:middle; }
.tsh-yc-desc { font-size:.84rem; color:var(--tsh-text2); line-height:1.65; border-left:2px solid rgba(201,169,110,.2); padding-left:12px; margin:0 0 14px; }
/* ── Domain cards ── */
.tsh-5cat { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tsh-5cat-item { border-radius:4px; padding:12px 14px; }
.tsh-5cat-item h5 { margin:0 0 6px; font-size:.77rem; text-transform:uppercase; letter-spacing:.06em; }
.tsh-5cat-item p { margin:0; font-size:.82rem; color:var(--tsh-text2); line-height:1.55; }
@media(max-width:580px){ .tsh-5cat { grid-template-columns:1fr; } }

/* ════════════════════════════════════════════
   VIZ 2 — HOLLAND HEXAGON
════════════════════════════════════════════ */
.tsh-hexagon-wrap { display:flex; flex-direction:column; align-items:center; gap:16px; }
.tsh-hex-svg { max-width:360px; width:100%; }
.tsh-hex-legend { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; }
.tsh-hex-leg-item { display:flex; align-items:center; gap:7px; font-size:.78rem; min-width:0; }
.tsh-hex-leg-name { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--tsh-text2); }
.tsh-hex-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.tsh-hex-leg-zero { opacity:.4; }
.tsh-hex-leg-zero .tsh-hex-dot { opacity:.5; }
/* ── Hexagon animate-in ── */
@keyframes hexPolyIn { from { opacity:0; transform:scale(0.15); transform-origin:180px 180px; } to { opacity:.9; transform:scale(1); } }
.tsh-hex-poly-anim { animation:hexPolyIn .9s cubic-bezier(.34,1.4,.64,1) forwards; }

/* ── Tooltip ── */
.tsh-hex-tooltip { position:fixed; z-index:9999; pointer-events:none; background:rgba(10,9,7,.97); border:1px solid rgba(201,169,110,.45); border-radius:4px; padding:12px 14px; min-width:155px; max-width:215px; box-shadow:0 8px 32px rgba(0,0,0,.65),0 0 12px rgba(201,169,110,.08); opacity:0; transform:translateY(6px); transition:opacity .14s,transform .14s; }
.tsh-hex-tooltip.tsh-hex-tip--vis { opacity:1; transform:translateY(0); }
.tsh-tip-code { font-size:1.5rem; font-weight:700; font-family:'Lexend Deca', system-ui, sans-serif; line-height:1; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
.tsh-tip-title { font-size:.78rem; color:#e8e0d0; margin:.4rem 0 .25rem; font-weight:600; }
.tsh-tip-pct { font-size:1.05rem; font-weight:700; color:#f5d58c; font-family:'Lexend Deca', system-ui, sans-serif; margin-bottom:.35rem; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
.tsh-tip-desc { font-size:.72rem; color:rgba(232,224,208,.65); line-height:1.45; border-top:1px solid rgba(201,169,110,.15); padding-top:.35rem; margin-top:.25rem; }
.tsh-tip-careers { font-size:.7rem; color:rgba(232,224,208,.5); margin-top:.3rem; font-style:italic; }

/* ── Career cards ── */
.tsh-hol-careers { margin-top:12px; }
.tsh-hol-career-card { background:rgba(255,255,255,.03); border:1px solid var(--tsh-border); border-radius:4px; padding:14px 18px 14px 15px; margin-bottom:8px; }
.tsh-hol-career-card--dom { padding:16px 20px 16px 17px; }
.tsh-hol-card-hdr { margin-bottom:10px; }
.tsh-hol-card-title-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.tsh-hol-card-title-row h4 { margin:0; font-size:.95rem; }
.tsh-hol-dom-badge { font-size:.68rem; font-weight:700; border:1px solid; border-radius:20px; padding:2px 9px; white-space:nowrap; letter-spacing:.04em; }
.tsh-hol-pct-row { display:flex; align-items:center; gap:10px; }
.tsh-hol-pct-bar { flex:1; height:8px; background:rgba(255,255,255,.07); border-radius:4px; overflow:hidden; }
.tsh-hol-pct-fill { height:100%; border-radius:4px; }
.tsh-hol-pct-num { font-size:.78rem; font-weight:700; min-width:34px; text-align:right; font-family:var(--tsh-fb); font-variant-numeric: lining-nums tabular-nums; }
.tsh-hol-career-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.tsh-hol-pill { background:transparent; border:1px solid; border-radius:20px; padding:4px 13px; font-size:.84rem; font-weight:500; }
/* Holland card expanded content */
.tsh-hol-card-desc { font-size:.82rem; color:var(--tsh-text2); margin:10px 0 8px; line-height:1.65; }
.tsh-hol-card-str, .tsh-hol-card-chl { font-size:.78rem; color:var(--tsh-text2); margin:4px 0; line-height:1.55; }
.tsh-hol-card-str strong, .tsh-hol-card-chl strong { color:var(--tsh-text1); }
.tsh-hol-card-adv { font-size:.8rem; color:var(--tsh-gold); margin:8px 0 0; line-height:1.6; border-left:2px solid var(--tsh-gold); padding-left:10px; font-style:italic; }
/* Reading guide — cụ già hiểu biểu đồ */
.tsh-hol-guide { display:flex; align-items:center; gap:10px; background:rgba(201,169,110,.06); border:1px solid rgba(201,169,110,.2); border-radius:4px; padding:10px 14px; margin-bottom:12px; font-size:.82rem; color:rgba(232,224,208,.8); line-height:1.45; }
.tsh-hol-guide-icon { font-size:1.2rem; color:#c9a96e; flex-shrink:0; }

/* ── CỦA BẠN callout ── */
.tsh-hol-callout { display:flex; align-items:flex-start; gap:14px; border:1px solid; border-radius:4px; padding:16px 18px; margin-top:16px; background:rgba(201,169,110,.03); position:relative; }
.tsh-hol-callout::before { content:''; position:absolute; inset:3px; border:1px solid rgba(201,169,110,.1); border-radius:2px; pointer-events:none; }
.tsh-hol-callout-icon { font-size:1.7rem; line-height:1; flex-shrink:0; margin-top:3px; }
.tsh-hol-callout-label { font-size:.66rem; letter-spacing:.1em; color:rgba(232,224,208,.45); text-transform:uppercase; margin-bottom:4px; }
.tsh-hol-callout-main { font-size:1.05rem; font-weight:700; font-family:'Lexend Deca', system-ui, sans-serif; line-height:1.3; margin-bottom:6px; }
.tsh-hol-callout-pct { font-size:.88rem; opacity:.75; font-family:'Lexend Deca', system-ui, sans-serif; font-weight:600; }
.tsh-hol-callout-sub { font-size:.81rem; color:rgba(232,224,208,.72); line-height:1.55; }

/* ════════════════════════════════════════════
   VIZ 3 — PERSONALITY RINGS
════════════════════════════════════════════ */
.tsh-pg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.tsh-pg-ring { display:flex; flex-direction:column; align-items:center; gap:6px; cursor:default; }
.tsh-pg-ring svg { width:72px; height:72px; }
.tsh-pg-ring .pg-num { font-family:var(--tsh-fb); font-size:.8rem; color:var(--tsh-gold); }
.tsh-pg-ring .pg-name { font-size:.7rem; color:var(--tsh-text2); text-align:center; line-height:1.3; }
.tsh-pg-ring.dominant svg circle.track { stroke: rgba(201,169,110,.6) !important; }

/* ════════════════════════════════════════════
   VIZ 4 — PINNACLE MOUNTAIN
════════════════════════════════════════════ */
.tsh-mountain-wrap { position:relative; }
.tsh-mountain-wrap svg { width:100%; max-width:600px; display:block; margin:0 auto; }
.tsh-peak-detail { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px; }
.tsh-peak-card { background:rgba(255,255,255,.04); border:1px solid var(--tsh-border); border-radius:4px; padding:14px; box-shadow: inset 0 0 0 3px rgba(12,12,10,.9), inset 0 0 0 4px rgba(201,169,110,.04); }
.tsh-peak-card.cur { border-color:rgba(201,169,110,.4); box-shadow: inset 0 0 0 3px rgba(12,12,10,.9), inset 0 0 0 4px rgba(201,169,110,.1), 0 0 12px rgba(201,169,110,.08); }
.tsh-peak-card h4 { margin:0 0 6px; font-size:.82rem; color:var(--tsh-gold); }
.tsh-peak-card p { margin:0; font-size:.8rem; color:var(--tsh-text2); line-height:1.5; }
@media(max-width:580px){ .tsh-peak-detail { grid-template-columns:1fr; } }

/* ── Pinnacle Summary Row ── */
.tsh-pin-row { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:14px 0 0; }
.tsh-pin-card {
  background:rgba(255,255,255,.04); border:1px solid var(--tsh-border);
  border-top:2px solid transparent; border-radius:4px; padding:14px 10px;
  text-align:center; position:relative;
  box-shadow:inset 0 0 0 3px rgba(12,12,10,.9),inset 0 0 0 4px rgba(201,169,110,.04);
  transition:box-shadow .2s;
}
.tsh-pin-card::before {
  content:''; position:absolute; inset:4px;
  border:1px solid rgba(201,169,110,.06); pointer-events:none;
}
.tsh-pin-card.is-cur {
  background:rgba(201,169,110,.06); border-color:rgba(201,169,110,.35);
  box-shadow:inset 0 0 0 3px rgba(12,12,10,.9),inset 0 0 0 4px rgba(201,169,110,.12),0 0 14px rgba(201,169,110,.09);
}
.tsh-pin-num { font-family:'Lexend Deca', sans-serif; font-size:1.9rem; font-weight: 700; line-height:1; margin-bottom:6px; }
.tsh-pin-lbl { font-size:.7rem; color:var(--tsh-gold); text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
.tsh-pin-age { font-size:.68rem; color:var(--tsh-text2); }
.tsh-pin-cur-badge { color:var(--tsh-gold-hi); }
/* Current pinnacle full detail */
.tsh-cur-pin {
  margin:16px 0 0; border-radius:4px;
  border:1px solid rgba(201,169,110,.2); border-top:2px solid transparent;
  background:rgba(255,255,255,.04); position:relative; overflow:hidden;
  box-shadow:inset 0 0 0 3px rgba(12,12,10,.9),inset 0 0 0 4px rgba(201,169,110,.06);
}
.tsh-cur-pin::before {
  content:''; position:absolute; inset:4px;
  border:1px solid rgba(201,169,110,.08); pointer-events:none;
}
.tsh-cur-pin-head {
  padding:11px 20px 0; font-size:.72rem; font-weight:600;
  color:var(--tsh-gold); letter-spacing:.06em; text-transform:uppercase;
}
.tsh-cur-pin-body { display:flex; align-items:center; gap:24px; padding:16px 22px 22px; }
.tsh-cur-pin-text { flex:1; min-width:0; }
.tsh-cur-pin-title {
  font-family:'Playfair Display',serif; font-size:1.05rem; font-weight:600; margin-bottom:8px; line-height:1.3;
}
.tsh-cur-pin-desc { font-size:.8rem; color:var(--tsh-text2); line-height:1.6; margin:0 0 8px; }
.tsh-cur-pin-advice {
  font-size:.82rem; color:var(--tsh-gold); font-style:italic; line-height:1.6; margin:0;
  border-left:2px solid var(--cur-col,var(--tsh-gold)); padding-left:10px;
}
@media(max-width:640px) {
  .tsh-pin-row { grid-template-columns:repeat(2,1fr); }
  .tsh-cur-pin-body { flex-direction:column; gap:14px; }
}
@media(max-width:360px) {
  .tsh-pin-num { font-size:1.5rem; }
}

/* ════════════════════════════════════════════
   VIZ 5 — MISSING NUMBERS CIRCLE GRID
════════════════════════════════════════════ */
.tsh-miss-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:260px; margin:0 auto 16px; }
.tsh-miss-cell { display:flex; flex-direction:column; align-items:center; gap:4px; }
.tsh-miss-cell .mc-circle {
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--tsh-fb); font-size:1.3rem; font-weight:700;
  transition: transform .2s;
}
.tsh-miss-cell .mc-circle.present { background:rgba(201,169,110,.15); border:2px solid var(--tsh-gold); color:var(--tsh-gold); }
.tsh-miss-cell .mc-circle.absent  { background:transparent; border:2px dashed rgba(255,255,255,.2); color:rgba(255,255,255,.3); }
.tsh-miss-cell .mc-label { font-size:.65rem; color:var(--tsh-text2); text-align:center; }
.tsh-miss-cell:hover .mc-circle { transform:scale(1.1); }
.tsh-miss-advice { background:rgba(255,255,255,.04); border-radius:var(--tsh-r); padding:14px; }
.tsh-miss-advice h4 { margin:0 0 8px; font-size:.9rem; color:var(--tsh-gold); }

/* ════════════════════════════════════════════
   VIZ 6 — CHALLENGES CARDS (Transformation Journey)
════════════════════════════════════════════ */
.tsh-chl-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.tsh-chl-card { background:rgba(255,255,255,.04); border:1px solid var(--tsh-border); border-radius:var(--tsh-r); padding:16px; display:flex; flex-direction:column; }
.tsh-chl-card-accent { margin-bottom:8px; }
.tsh-chl-card-body { flex:1; }
.tsh-chl-card-num { font-family:var(--tsh-fh); font-size:2rem; color:var(--tsh-gold); line-height:1; margin-bottom:4px; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
.tsh-chl-card-lbl { font-size:.72rem; color:var(--tsh-text2); text-transform:uppercase; letter-spacing:.08em; }
.tsh-chl-card-title { font-size:.88rem; color:var(--tsh-text1); font-weight:600; margin-bottom:6px; }
.tsh-chl-card-desc { font-size:.78rem; color:var(--tsh-text2); line-height:1.5; }
.tsh-chl-card-advice { font-size:.8rem; color:var(--tsh-gold); margin-top:8px; font-style:italic; line-height:1.55; }

/* ════════════════════════════════════════════
   VIZ 7 — LO SHU GRID WRAPPER
════════════════════════════════════════════ */
.tsh-loshu-wrap { position:relative; }

/* ════════════════════════════════════════════
   VIZ 8 — PLANES: DIAMOND RADAR + BARS
════════════════════════════════════════════ */
/* Balance badge row */
.tsh-pl-balance-row {
  margin-bottom: 12px;
}
.tsh-pl-badge {
  display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .06em;
  padding: 4px 12px; border-radius: 2px;
  font-family: 'Lexend Deca', system-ui, sans-serif;
}
.tsh-pl-badge--bal {
  background: rgba(90,171,110,.1); border: 1px solid rgba(90,171,110,.35);
  color: rgba(90,171,110,.9);
}
.tsh-pl-badge--imbal {
  background: rgba(229,115,115,.08); border: 1px solid rgba(229,115,115,.3);
  color: rgba(229,115,115,.85);
}
.tsh-pl-badge--imbal strong { color: rgba(229,115,115,1); }
/* Body Silhouette SVG */
.tsh-planes-viz { display:flex; gap:20px; align-items:flex-start; }
.tsh-planes-svg-wrap { flex-shrink:0; }
.tsh-planes-body { width:80px; height:auto; display:block; }
/* Bars */
.tsh-planes-bars { flex:1; display:flex; flex-direction:column; gap:12px; }
.tsh-plane-bar-item { display:flex; flex-direction:column; gap:4px; }
.tsh-plane-bar-item .pb-lbl {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:.8rem;
}
.tsh-plane-bar-item .pb-name { color:var(--tsh-text1); font-weight:600; flex:1; min-width:100px; }
.tsh-plane-bar-item .pb-pct { color:var(--tsh-gold); margin-left:auto; }
.tsh-plane-bar-item .pb-sub { font-size:.72rem; color:var(--tsh-text2); }
/* Dominance badge */
.tsh-plane-bar-item .pb-dom {
  font-family: 'Lexend Deca', system-ui, sans-serif;
  font-size:.58rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding: 2px 7px; border-radius:2px;
  background: rgba(201,169,110,.15); border: 1px solid rgba(201,169,110,.4); color: var(--tsh-gold);
}
/* Weak badge */
.tsh-plane-bar-item .pb-weak {
  font-family: 'Lexend Deca', system-ui, sans-serif;
  font-size:.58rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding: 2px 7px; border-radius:2px;
  background: rgba(229,115,115,.08); border: 1px solid rgba(229,115,115,.3); color: rgba(229,115,115,.85);
}
/* Interpretation text */
.tsh-plane-bar-item .pb-interp {
  font-size:.72rem; color:var(--tsh-text2); line-height:1.55;
  padding: 6px 10px; margin-top:2px;
  background: rgba(255,255,255,.02); border-left: 2px solid rgba(201,169,110,.2);
  border-radius: 0 2px 2px 0;
}
.tsh-plane-bar-item.is-dominant .pb-interp { border-left-color: rgba(201,169,110,.5); }
.tsh-plane-bar-item.is-weak     .pb-interp { border-left-color: rgba(229,115,115,.4); }
@media(max-width:540px) {
  .tsh-planes-viz { flex-direction:column; align-items:center; }
  .tsh-planes-body { width:80px; }
}

/* ════════════════════════════════════════════
   VIZ 9 — KARMIC JOURNEY CARDS
════════════════════════════════════════════ */
.tsh-karmic-card {
  background:rgba(139,105,20,.06); border:1px solid rgba(139,105,20,.3);
  border-radius:var(--tsh-r); padding:18px 20px; margin-bottom:12px;
}
.tsh-karmic-card-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.tsh-karmic-num { font-family:var(--tsh-fh); font-size:2.2rem; color:#c9a96e; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
.tsh-karmic-title { font-size:1rem; color:var(--tsh-text1); font-weight:700; }
.tsh-karmic-sub { font-size:.8rem; color:#c9a96e; }
.tsh-karmic-sections { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.tsh-karmic-section { background:rgba(255,255,255,.03); border-radius:8px; padding:10px 12px; }
.tsh-karmic-section h5 { margin:0 0 5px; font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; }
.tsh-karmic-section p  { margin:0; font-size:.78rem; color:var(--tsh-text2); line-height:1.5; }
.tsh-ks-trap { } .tsh-ks-trap h5 { color: var(--tsh-error); }
.tsh-ks-les  { } .tsh-ks-les  h5 { color: #4da6ff; }
.tsh-ks-heal { } .tsh-ks-heal h5 { color: #5aab6e; }
.tsh-ks-str  { } .tsh-ks-str  h5 { color: var(--tsh-success); }
.tsh-ks-act  { } .tsh-ks-act  h5 { color: var(--tsh-gold); }
@media(max-width:580px){ .tsh-karmic-sections { grid-template-columns:1fr; } }

/* ── Period Cycles — Arc Timeline ── */
.tsh-period-arc { margin:0 0 20px; padding:12px 8px 18px; background:rgba(255,255,255,.02); border:1px solid rgba(201,169,110,.1); border-radius:4px; overflow:visible; }
.tsh-period-arc-svg { width:100%; height:auto; display:block; overflow:visible; }
@keyframes tshArcPulse { 0%,100%{opacity:.5} 50%{opacity:.08} }
.tsh-arc-ring--1 { animation:tshArcPulse 2.5s ease-in-out infinite; }
.tsh-arc-ring--2 { animation:tshArcPulse 2.5s ease-in-out infinite .6s; }
.tsh-arc-ring--3 { animation:tshArcPulse 2.5s ease-in-out infinite 1.2s; }

/* ── Period Cycles — Cards ── */
.tsh-period-timeline { display:flex; flex-direction:column; gap:14px; }
.tsh-period-card { background:rgba(255,255,255,.04); border-radius:var(--tsh-r); padding:16px 18px; transition:background var(--dur-normal); }
.tsh-period-card:hover { background:rgba(255,255,255,.07); }
.tsh-period-cur { background:rgba(201,169,110,.08); border-left-color:var(--tsh-gold) !important; }
.tsh-period-head { display:flex; align-items:center; gap:12px; margin-bottom:4px; }

/* ── Bridge Numbers ── */
.tsh-bridge-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:580px){ .tsh-bridge-grid { grid-template-columns:1fr; } }
.tsh-bridge-card { background:rgba(255,255,255,.04); border-radius:var(--tsh-r); padding:16px; text-align:center; transition:background var(--dur-normal); }
.tsh-bridge-card:hover { background:rgba(255,255,255,.07); }
.tsh-bridge-head { margin-bottom:8px; }
.tsh-bridge-pair { font-size:.82rem; color:var(--tsh-gold); font-weight:600; }
.tsh-bridge-nums { font-size:.72rem; color:var(--tsh-text3); margin-top:2px; }
.tsh-bridge-num { font-family:var(--tsh-fb); font-size:2rem; font-weight:700; color:var(--tsh-text1); margin:6px 0; }
.tsh-bridge-title { font-size:.88rem; font-weight:600; color:var(--tsh-text1); margin-bottom:6px; }
.tsh-bridge-desc { font-size:.82rem; color:var(--tsh-text2); line-height:1.6; }
.tsh-bridge-advice { font-size:.8rem; color:var(--tsh-gold); margin-top:6px; font-style:italic; }
/* Harmony Scale Bar */
.tsh-bh-wrap { margin:8px auto 10px; width:90%; }
.tsh-bh-labels { display:flex; justify-content:space-between; font-size:.58rem; color:var(--tsh-text3); margin-bottom:3px; letter-spacing:.02em; }
.tsh-bh-bar { position:relative; height:6px; border-radius:3px; background:linear-gradient(to right,#4caf50,#8bc34a,#cddc39,#ff9800,#f44336,#e91e63); }
.tsh-bh-marker { position:absolute; top:50%; transform:translate(-50%,-50%); width:13px; height:13px; border-radius:50%; background:#1a1814; border:2px solid #fff; box-shadow:0 0 6px rgba(0,0,0,.7); }
.tsh-bh-badge { display:inline-block; margin-top:5px; padding:2px 10px; border-radius:12px; font-size:.62rem; font-weight:700; border:1px solid; letter-spacing:.06em; text-transform:uppercase; }

/* ── Challenge Index Cards ── */
.tsh-challenge-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media(max-width:680px){ .tsh-challenge-grid { grid-template-columns:1fr; } }
.tsh-challenge-card { border-radius:var(--tsh-r); padding:16px; text-align:center; transition:background var(--dur-normal); }
.tsh-challenge-card:hover { filter:brightness(1.08); }
.tsh-challenge-head { display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:8px; }
.tsh-challenge-pair { font-size:.78rem; font-weight:600; display:flex; align-items:center; gap:4px; }
.tsh-challenge-num { font-family:var(--tsh-fb); font-size:1.8rem; font-weight:700; }
.tsh-challenge-level { display:inline-block; margin:0 auto 8px; padding:2px 10px; border-radius:3px; font-size:.68rem; font-weight:700; border:1px solid; letter-spacing:.04em; }
.tsh-challenge-desc { font-size:.8rem; color:var(--tsh-text2); line-height:1.6; text-align:left; }

/* ── Maturity Ability Indicator ── */
.tsh-maturity-ability { margin-top:10px; }

/* ── Premium Text Selection ── */
::selection { background: rgba(201,169,110,.28); color: #fff; }
::-moz-selection { background: rgba(201,169,110,.28); color: #fff; }

/* ── Custom Thin Gold Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--tsh-bg2); }
::-webkit-scrollbar-thumb { background: rgba(201,169,110,.35); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201,169,110,.6); }

/* ── Marble Texture Overlay (Greek-Chinese fusion depth) ── */
.tsh-cosmos::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.3' numOctaves='5' seed='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23m)' opacity='.3'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 1;
  opacity: .04;
}

/* ── Ambient Orbs (distant nebulae) ── */
.tsh-orb {
  position: fixed; border-radius: 50%;
  pointer-events: none; z-index: 0;
  filter: blur(100px); will-change: transform;
}
.tsh-orb-1 {
  width: 500px; height: 500px; top: -10%; left: -5%;
  background: radial-gradient(circle, rgba(100,50,160,.07) 0%, transparent 70%);
  animation: tshOrb1 60s ease-in-out infinite;
}
.tsh-orb-2 {
  width: 400px; height: 400px; bottom: -5%; right: -10%;
  background: radial-gradient(circle, rgba(30,60,120,.06) 0%, transparent 70%);
  animation: tshOrb2 75s ease-in-out infinite;
}
.tsh-orb-3 {
  width: 350px; height: 350px; top: 40%; left: 50%;
  background: radial-gradient(circle, rgba(201,169,110,.04) 0%, transparent 70%);
  animation: tshOrb3 50s ease-in-out infinite;
}
@keyframes tshOrb1 {
  0%,100% { transform: translate(0,0); }
  33% { transform: translate(30px, 40px); }
  66% { transform: translate(-20px, 20px); }
}
@keyframes tshOrb2 {
  0%,100% { transform: translate(0,0); }
  33% { transform: translate(-40px, -20px); }
  66% { transform: translate(20px, -30px); }
}
@keyframes tshOrb3 {
  0%,100% { transform: translate(0,0) scale(1); opacity: .5; }
  50% { transform: translate(-30px, 20px) scale(1.15); opacity: 1; }
}

/* ── Compact disclaimer above form ── */
.tsh-form-disc {
  font-size: .68rem; color: rgba(232,224,208,.28);
  text-align: center; letter-spacing: .06em;
  font-style: italic; margin: -4px 0 22px; padding: 0 16px;
}

/* ── Trust Signal ── */
.tsh-trust-signal {
  margin-top: 18px; font-size: .75rem;
  color: var(--tsh-text2); text-align: center; letter-spacing: .06em;
  opacity: .65;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap;
}
.tsh-trust-stars { color: rgba(201,169,110,.65); font-size: .78rem; }
.tsh-trust-signal em { font-style: italic; color: rgba(232,224,208,.5); font-size: .72rem; }
.tsh-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tsh-gold);
  animation: tshLivePulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes tshLivePulse {
  0%,100% { opacity: .3; box-shadow: 0 0 0 0 rgba(201,169,110,.4); }
  50% { opacity: 1; box-shadow: 0 0 0 4px rgba(201,169,110,0); }
}
/* Counter bump animation */
.tsh-counter-bump {
  display: inline-block;
  animation: tshCountBump .3s ease-out;
}
@keyframes tshCountBump {
  0% { transform: translateY(0); }
  40% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
.tsh-teaser-text {
  margin-top: 20px; font-size: .76rem; font-style: italic;
  color: var(--tsh-text3); text-align: center; opacity: .5;
  letter-spacing: .04em;
  min-height: 1.3em;
}
.tsh-teaser-cursor {
  display: inline-block; width: 1px; height: .85em;
  background: var(--tsh-gold); opacity: .6;
  margin-left: 2px; vertical-align: text-bottom;
  animation: tshCursorBlink .8s step-end infinite;
}
@keyframes tshCursorBlink {
  0%,100% { opacity: .6; }
  50% { opacity: 0; }
}

/* ── Scroll Reveal (JS adds .tsh-revealed) ── */
.tsh-reveal { opacity: 1; transform: none; }
.tsh-reveal.tsh-revealed { opacity: 1; transform: none; }

/* ── Back-to-top button ── */
.tsh-btt {
  position: fixed; bottom: 28px; right: 20px; z-index: 100;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(12,12,10,.85); border: 1px solid var(--tsh-border);
  color: var(--tsh-gold); font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transform: translateY(12px) scale(.9);
  transition: opacity var(--dur-normal), transform var(--dur-normal) var(--ease-spring), box-shadow var(--dur-normal);
  box-shadow: var(--tsh-shadow-card);
}
.tsh-btt.visible {
  opacity: 1; pointer-events: all;
  transform: translateY(0) scale(1);
}
.tsh-btt:hover {
  box-shadow: var(--tsh-shadow-hover);
  border-color: var(--tsh-gold);
  transform: translateY(-2px) scale(1.05);
}
.tsh-btt:active { transform: scale(.95); }
/* Mobile: FAB bar chiếm ~44px ở bottom → đẩy btt lên trên */
@media (max-width: 768px) {
  .tsh-btt { bottom: 54px; right: 16px; width: 38px; height: 38px; }
}


/* ═══ BODY FULL — Tier Separation (Tier 3 + Tier 4) ═══ */
.tsh-tier3, .tsh-tier4 {
  margin-top: 16px;
  padding: 14px 16px 10px;
  border-radius: var(--tsh-r);
  position: relative;
}
.tsh-tier3 {
  background: rgba(201,169,110,.07);
  border: 1px solid rgba(201,169,110,.15);
  animation: tshTierReveal .6s ease-out both;
}
.tsh-tier4 {
  background: rgba(201,169,110,.09);
  border: 1px solid rgba(201,169,110,.18);
  animation: tshTierReveal .6s .15s ease-out both;
}
.tsh-tier-head {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tsh-gold);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(201,169,110,.12);
}
.tsh-tier3 .tsh-section,
.tsh-tier4 .tsh-section,
.tsh-tier4 .tsh-advice {
  margin-bottom: 8px;
}
.tsh-tier3 .tsh-section h4,
.tsh-tier4 .tsh-section h4 {
  font-size: .8rem;
  color: var(--tsh-text1);
  margin: 0 0 4px;
}
.tsh-tier3 .tsh-section p,
.tsh-tier4 .tsh-section p,
.tsh-tier4 .tsh-advice {
  font-size: .82rem;
  line-height: 1.6;
  color: var(--tsh-text2);
  margin: 0;
}
@media (max-width: 600px) {
  .tsh-tier3, .tsh-tier4 { padding: 10px 12px 8px; }
  .tsh-tier-head { font-size: .68rem; }
}

/* ═══ BODY FULL — Inline SVG Icons (Mystic Glow) ═══ */
.tsh-section h4 svg,
.tsh-tier-head svg {
  will-change: opacity;
  width: 1em; height: 1em;
  vertical-align: -.12em;
  margin-right: 6px;
  color: var(--tsh-gold);
  opacity: .7;
  filter: drop-shadow(0 0 4px rgba(201,169,110,.3));
  animation: tshIconGlow 3s ease-in-out infinite;
}
.tsh-tier-head svg {
  opacity: .9;
  filter: drop-shadow(0 0 6px rgba(201,169,110,.4));
}
@keyframes tshIconGlow {
  0%, 100% { opacity: .7; }
  50%      { opacity: 1; }
}

/* ═══ Greek Key Meander Divider ═══ */
.tsh-bf-divider {
  display: flex;
  justify-content: center;
  margin: 16px 0 8px;
  color: var(--tsh-gold);
  opacity: .4;
}
.tsh-bf-divider svg { width: 120px; height: 12px; }
@media (max-width: 600px) {
  .tsh-bf-divider svg { width: 80px; }
}

/* ═══ Overview Block — Gold accent left border ═══ */
.tsh-overview-block {
  border-left: 2px solid rgba(201,169,110,.35);
  padding-left: 16px;
  margin: 12px 0 16px;
  position: relative;
}
.tsh-overview-block::before {
  content: '';
  position: absolute;
  left: -1px; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, rgba(201,169,110,.6), transparent);
  animation: tshOverviewBorderPulse 4s ease-in-out infinite;
}
@keyframes tshOverviewBorderPulse {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}

/* ═══ S/W Header Icons ═══ */
.tsh-pros h4 svg,
.tsh-cons h4 svg {
  width: 1em; height: 1em;
  vertical-align: -.12em;
  margin-right: 5px;
  opacity: .8;
  animation: tshIconGlow 3s ease-in-out infinite;
}
.tsh-pros h4 svg { color: #7fb87f; filter: drop-shadow(0 0 4px rgba(127,184,127,.3)); }
.tsh-cons h4 svg { color: #c9856e; filter: drop-shadow(0 0 4px rgba(201,133,110,.3)); }

/* ═══ Cycle Row Icons ═══ */
.py-lbl svg {
  will-change: opacity;
  width: .9em; height: .9em;
  vertical-align: -.1em;
  margin-right: 4px;
  color: var(--tsh-gold);
  opacity: .7;
  filter: drop-shadow(0 0 3px rgba(201,169,110,.3));
  animation: tshIconGlow 3s ease-in-out infinite;
}

/* ═══ BODY FULL — Entrance & Ambient Animations ═══ */
@keyframes tshTierReveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tshQuoteSlide {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes tshAdviceGlow {
  from { opacity: 0; box-shadow: 0 0 0 rgba(139,105,20,0); }
  to   { opacity: 1; box-shadow: 0 0 12px rgba(139,105,20,.08); }
}
@keyframes tshStarTwinkle {
  0%, 100% { opacity: .6; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.3); }
}
@keyframes tshSwReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tshItemSlide {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes tshSectionIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tshFunFactIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes tshShimmerSweep {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ═══ SECTION INTRO — "Đọc đến đâu hiểu đến đó" (Tier 1) ═══ */
.tsh-section-intro {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: rgba(201,169,110,.04);
  border-left: 3px solid var(--tsh-gold);
  border-radius: 0 var(--tsh-r) var(--tsh-r) 0;
}
.tsh-si-what {
  margin: 0 0 4px;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--tsh-text1);
  font-weight: 600;
}
.tsh-si-impact {
  margin: 0;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--tsh-text2);
  font-style: italic;
}
@media (max-width: 600px) {
  .tsh-section-intro { padding: 10px 12px; margin-bottom: 12px; }
  .tsh-si-what  { font-size: .82rem; }
  .tsh-si-impact { font-size: .78rem; }
}

/* ═══ GREEK-CHINESE FUSION DECORATIVE PATTERNS ═══ */

/* Lattice window background */
.tsh-lattice-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 20h40M20 0v40M0 0l40 40M40 0L0 40' fill='none' stroke='%23c9a96e' stroke-width='0.5' opacity='0.08'/%3E%3Ccircle cx='20' cy='20' r='8' fill='none' stroke='%23c9a96e' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}

/* Marble texture overlay */
.tsh-marble-texture {
  position: relative;
}
.tsh-marble-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 80% at 30% 20%, rgba(201,169,110,.06), transparent 50%),
    radial-gradient(ellipse 80% 120% at 70% 80%, rgba(201,169,110,.05), transparent 50%);
  opacity: .5;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}

/* Seal stamp badge */
.tsh-seal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border: 2px solid rgba(201,169,110,.4);
  border-radius: 3px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tsh-gold);
  position: relative;
}
.tsh-seal-badge::before {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(201,169,110,.2);
  border-radius: 1px;
  pointer-events: none;
}

/* ═══ QUOTE BLOCK (danh ngôn cổ) ═══ */
.tsh-quote {
  margin: 12px 0 14px;
  padding: 10px 14px 10px 18px;
  border-left: 3px solid var(--tsh-gold);
  background: rgba(201,169,110,.06);
  border-radius: 0 4px 4px 0;
  font-style: italic;
  font-size: .82rem;
  color: var(--tsh-gold);
  line-height: 1.6;
  position: relative;
  overflow: hidden;
  animation: tshQuoteSlide .5s ease-out both;
}
.tsh-quote::before { content: '「'; opacity: .6; margin-right: 2px; }
.tsh-quote::after  { content: '」'; opacity: .6; margin-left: 2px; }
.tsh-quote::backdrop { display: none; }
@supports (background: linear-gradient(90deg, transparent, gold)) {
  .tsh-quote { background: linear-gradient(135deg, rgba(201,169,110,.08) 0%, rgba(201,169,110,.03) 100%); }
}

/* ═══ FUN FACT BLOCK (Bạn Có Biết?) ═══ */
.tsh-funfact {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(201,169,110,.07);
  border: 1px solid rgba(201,169,110,.16);
  border-radius: var(--tsh-r);
  font-size: .8rem;
  color: var(--tsh-text2);
  line-height: 1.65;
  position: relative;
  overflow: hidden;
  animation: tshFunFactIn .5s .3s ease-out both;
}
.tsh-funfact::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(201,169,110,.06) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: tshShimmerSweep 4s 1s ease-in-out infinite;
  pointer-events: none;
}
.tsh-funfact strong { color: var(--tsh-gold); }
.tsh-funfact-icon { will-change: opacity; color: var(--tsh-gold); margin-right: 4px; filter: drop-shadow(0 0 3px rgba(201,169,110,.3)); animation: tshIconGlow 3s ease-in-out infinite; }

/* ── Entrance Stagger ── */
.tsh-entrance { opacity: 0; animation: tshFadeUp .8s var(--ease-cosmic) forwards; }
.tsh-entrance-1 { animation-delay: .3s; }
.tsh-entrance-2 { animation-delay: .6s; }
.tsh-entrance-3 { animation-delay: 1s; }
.tsh-entrance-4 { animation-delay: 1.3s; }
.tsh-entrance-5 { animation-delay: 1.5s; }
.tsh-entrance-6 { animation-delay: 1.7s; }

/* ═══ PHASE B: VIZ SELF-EXPLANATION BOXES ═══ */

/* Section icon — inline with what-text */
.tsh-si-icon { font-size: .95rem; margin-right: 6px; opacity: .65; vertical-align: middle; }

/* "Biểu đồ này là gì? Đọc như thế nào?" */
.tsh-viz-intro {
  margin: 0 0 14px;
  padding: 11px 15px;
  background: rgba(201,169,110,.04);
  border-left: 3px solid rgba(201,169,110,.45);
  border-radius: 0 4px 4px 0;
}
.tsh-viz-intro-title {
  font-family: 'Lexend Deca', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 700;
  color: var(--tsh-gold);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 5px;
}
.tsh-viz-intro p { margin: 0; font-size: .79rem; color: var(--tsh-text2); line-height: 1.65; }
.tsh-viz-intro strong { color: var(--tsh-text1); font-weight: 600; }

/* "📌 Kết quả của bạn" */
.tsh-viz-after {
  margin: 14px 0 0;
  padding: 11px 15px;
  background: rgba(201,169,110,.06);
  border: 1px solid rgba(201,169,110,.16);
  border-radius: 4px;
}
.tsh-viz-after-title {
  font-size: .68rem;
  font-weight: 700;
  color: var(--tsh-gold);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin: 0 0 4px;
}
.tsh-viz-after p { margin: 0; font-size: .82rem; color: var(--tsh-text1); line-height: 1.6; }
.tsh-viz-after strong { color: var(--tsh-gold); }

/* Legend strip (how to read colors/symbols) */
.tsh-viz-legend {
  display: flex; flex-wrap: wrap; gap: 5px 14px;
  margin: 10px 0 0;
  padding: 8px 12px;
  background: rgba(255,255,255,.018);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 4px;
  font-size: .73rem; color: var(--tsh-text2);
}
.tsh-viz-legend-item { display: flex; align-items: center; gap: 5px; }
.tsh-viz-legend-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tsh-viz-legend-line { width: 18px; height: 2px; flex-shrink: 0; }
/* Phase zone chips */
.tsh-viz-zone { padding: 2px 8px; border-radius: 2px; font-size: .68rem; }
.tsh-viz-zone--cur  { background: rgba(245,213,140,.12); border: 1px solid rgba(245,213,140,.4);  color: #f5d58c; }
.tsh-viz-zone--seed { background: rgba(90,122,173,.1);   border: 1px solid rgba(90,122,173,.35);  color: rgba(150,180,240,.8); }
.tsh-viz-zone--grow { background: rgba(255,255,255,.04);  border: 1px solid rgba(255,255,255,.12); color: rgba(220,220,220,.65); }
.tsh-viz-zone--peak { background: rgba(201,169,110,.08);  border: 1px solid rgba(201,169,110,.3);  color: rgba(201,169,110,.9); }

/* Holland legend — pct aligned right */
.tsh-hex-leg-item { display: flex; align-items: center; gap: 6px; }
.tsh-hex-leg-pct  { margin-left: auto; padding-left: 10px; font-weight: 700; color: var(--tsh-gold); font-size: .76rem; }

/* Pinnacles mountain SVG — horizontal scroll on mobile */
.tsh-mountain-wrap { overflow-x: auto; }
.tsh-mountain-wrap svg { min-width: 340px; }

/* Personality rings — 2×2 grid on small screens */
@media (max-width: 480px) {
  .tsh-pg-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══ HERO 9 SỐ: hàng 2 bổ trợ ═══ */

#hero-supp { width: 100%; margin-bottom: 16px; }

.tsh-hero-supp-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 14px;
  font-family: 'Lexend Deca', sans-serif;
  font-size: .58rem;
  color: rgba(201,169,110,.65);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.tsh-hero-supp-divider::before,
.tsh-hero-supp-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,.35), transparent);
}

.tsh-hero-supp-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tsh-hn-s {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 11px 14px;
  min-width: 74px;
  border: 2px solid rgba(201,169,110,.28);
  border-radius: 3px;
  background: rgba(201,169,110,.03);
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .18s, box-shadow .2s;
  position: relative;
  box-shadow:
    inset 0 0 0 2px rgba(12,12,10,.88),
    inset 0 0 0 3px rgba(201,169,110,.1),
    0 2px 10px rgba(0,0,0,.3);
}
.tsh-hn-s::before {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 9px; height: 9px;
  border-top: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
  opacity: .65;
}
.tsh-hn-s::after {
  content: '';
  position: absolute;
  bottom: 3px; right: 3px;
  width: 9px; height: 9px;
  border-bottom: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  opacity: .65;
}
.tsh-hn-s:hover {
  background: rgba(201,169,110,.07);
  border-color: rgba(201,169,110,.5);
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 2px rgba(12,12,10,.88),
    inset 0 0 0 3px rgba(201,169,110,.18),
    0 6px 18px rgba(0,0,0,.4),
    0 0 14px rgba(201,169,110,.14);
}
.tsh-hn-s__n {
  font-family: var(--tsh-fh);
  font-size: 1.45rem;
  font-weight: 900;
  font-style: normal;
  line-height: 1.1;
  margin-bottom: 6px;
}
.tsh-hn-s__l {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .5rem;
  color: rgba(201,169,110,.6);
  text-align: center;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.3;
}
@media (max-width: 480px) {
  .tsh-hero-supp-row { gap: 7px; }
  .tsh-hn-s { min-width: 56px; padding: 7px 8px; }
  .tsh-hn-s__n { font-size: 1.05rem; }
}

/* ═══ PHASE C: .tsh-ux-* — UX + TRUST (NT 30,31,35,36,38,39,42) ═══ */

/* NT 37 — Pythagorean method badge */
.tsh-ux-method-badge {
  font-family: 'Lexend Deca', system-ui, sans-serif;
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--tsh-gold);
  opacity: .65;
  text-transform: uppercase;
  margin: 2px 0 8px;
  text-align: center;
}

/* NT 35 — Tab progress indicator — REMOVED (single scroll page) */

/* NT 31 — TOC */
.tsh-ux-toc { margin: 0 0 20px; }
.tsh-ux-toc-inner {
  border: 1px solid rgba(201,169,110,.28);
  background: rgba(201,169,110,.03);
  padding: 16px 16px 14px;
  border-radius: 4px;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(201,169,110,.05), 0 2px 14px rgba(0,0,0,.2);
}
/* Top-left L-bracket */
.tsh-ux-toc-inner::before {
  content: '';
  position: absolute;
  top: 5px; left: 5px;
  width: 11px; height: 11px;
  border-top: 1.5px solid rgba(201,169,110,.4);
  border-left: 1.5px solid rgba(201,169,110,.4);
  pointer-events: none;
}
/* Bottom-right L-bracket */
.tsh-ux-toc-inner::after {
  content: '';
  position: absolute;
  bottom: 5px; right: 5px;
  width: 11px; height: 11px;
  border-bottom: 1.5px solid rgba(201,169,110,.4);
  border-right: 1.5px solid rgba(201,169,110,.4);
  pointer-events: none;
}
.tsh-ux-toc-title {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .68rem;
  color: rgba(201,169,110,.85);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 4px;
  text-align: center;
}
.tsh-ux-toc-hint {
  font-size: .68rem;
  color: rgba(232,224,208,.40);
  text-align: center;
  margin-bottom: 12px;
  font-style: italic;
}
.tsh-ux-toc-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.tsh-ux-toc-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Lexend Deca', system-ui, sans-serif;
  font-size: .80rem;
  color: var(--tsh-text2);
  text-decoration: none;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(201,169,110,.18);
  padding: 9px 14px;
  border-radius: 3px;
  cursor: pointer;
  min-height: 40px; /* dễ nhấn trên mobile cho các cụ */
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
  touch-action: manipulation; /* FIX MD6 */
}
.tsh-ux-toc-item:hover {
  background: rgba(201,169,110,.10);
  border-color: rgba(201,169,110,.45);
  color: var(--tsh-gold-hi);
  box-shadow: 0 0 12px rgba(201,169,110,.08);
}
.tsh-ux-toc-item.is-active {
  background: rgba(201,169,110,.14);
  border-color: rgba(201,169,110,.6);
  color: var(--tsh-gold-hi);
  font-weight: 600;
  box-shadow: 0 0 16px rgba(201,169,110,.12);
}
.tsh-ux-toc-icon {
  font-size: .95rem;
  line-height: 1;
  flex-shrink: 0;
}
.tsh-ux-toc-arr {
  font-size: 1rem;
  color: rgba(201,169,110,.45);
  margin-left: 2px;
  line-height: 1;
  transition: transform .2s, color .2s;
}
.tsh-ux-toc-item:hover .tsh-ux-toc-arr,
.tsh-ux-toc-item.is-active .tsh-ux-toc-arr {
  color: var(--tsh-gold);
  transform: translateX(2px);
}

/* NT 36 — Life Path calc steps — REDESIGNED */
.tsh-ux-calc-steps { margin: 0 0 22px; }
.tsh-calc-wrap {
  position: relative;
  background: rgba(201,169,110,.03);
  border: 1px solid rgba(201,169,110,.2);
  border-top: 2px solid rgba(201,169,110,.6);
  padding: 18px 20px 14px;
  border-radius: 0 0 4px 4px;
  box-shadow: inset 0 0 0 1px rgba(201,169,110,.05), 0 8px 32px rgba(0,0,0,.3);
}
/* Corner L-brackets bottom */
.tsh-calc-wrap::before, .tsh-calc-wrap::after {
  content: ''; position: absolute; width: 10px; height: 10px;
  border-color: rgba(201,169,110,.4); border-style: solid;
}
.tsh-calc-wrap::before { bottom: 7px; left: 7px; border-width: 0 0 1.5px 1.5px; }
.tsh-calc-wrap::after  { bottom: 7px; right: 7px; border-width: 0 1.5px 1.5px 0; }
.tsh-calc-title {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .58rem; color: var(--tsh-gold);
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: 14px;
}
.tsh-calc-body { display: flex; align-items: center; gap: 20px; }
.tsh-calc-rows { flex: 1; display: flex; flex-direction: column; gap: 0; }
.tsh-calc-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 6px 10px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.04);
  font-family: var(--tsh-fb); font-size: .8rem;
}
.tsh-calc-row:last-child { border-bottom: none; }
.tsh-calc-lbl { color: rgba(232,224,208,.62); }
.tsh-calc-chain {
  color: rgba(201,169,110,.45); font-size: .75rem;
  white-space: nowrap; text-align: right;
}
.tsh-calc-val {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .92rem; color: var(--tsh-gold-light);
  text-align: right; min-width: 20px;
}
.tsh-calc-divider {
  height: 1px; margin: 4px 0;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,.4), transparent);
}
.tsh-calc-row--total .tsh-calc-lbl { color: var(--tsh-text1); font-weight: 600; }
.tsh-calc-note {
  font-size: .66rem; color: rgba(232,224,208,.32);
  margin: 10px 0 0; font-style: italic;
}
/* Hero number — right side */
.tsh-calc-hero {
  width: 76px; height: 76px; flex-shrink: 0;
  position: relative; display: flex; align-items: center; justify-content: center;
}
.tsh-calc-hero-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid currentColor; opacity: .15;
  animation: ycRingRot 10s linear infinite;
}
.tsh-calc-hero-ring--2 {
  inset: 8px; opacity: .1; animation-duration: 7s; animation-direction: reverse;
}
.tsh-calc-hero-ring { inset: 0; }
.tsh-calc-hero-num {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 2.6rem; font-weight: 700; line-height: 1;
  position: relative; z-index: 1;
}
@media (max-width: 480px) {
  .tsh-calc-body { flex-direction: column; gap: 16px; }
  .tsh-calc-hero { width: 56px; height: 56px; }
  .tsh-calc-hero-num { font-size: 2rem; }
}

/* NT 42 — Famous people — REDESIGNED */
.tsh-ux-famous { margin: 0 0 22px; }
.tsh-famous-wrap {
  position: relative;
  background: rgba(201,169,110,.02);
  border: 1px solid rgba(201,169,110,.16);
  border-radius: 4px;
  padding: 18px 20px;
  box-shadow: inset 0 0 0 1px rgba(201,169,110,.04);
}
.tsh-famous-title {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: 14px;
}
.tsh-famous-list { display: flex; flex-direction: column; gap: 10px; }
.tsh-famous-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 14px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(201,169,110,.1);
  border-left-width: 3px;
  border-radius: 0 4px 4px 0;
  transition: background .2s;
}
.tsh-famous-item:hover { background: rgba(201,169,110,.04); }
.tsh-famous-icon {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid currentColor;
}
.tsh-famous-content { flex: 1; }
.tsh-famous-name {
  font-family: 'Playfair Display', serif;
  font-size: .95rem; font-weight: 700;
  margin-bottom: 4px; line-height: 1.3;
}
.tsh-famous-why {
  font-family: var(--tsh-fb);
  font-size: .76rem; color: rgba(232,224,208,.55); line-height: 1.55;
}

/* NT 30 — Bridge sentences */
.tsh-ux-bridge { margin: 0 0 22px; }
.tsh-ux-bridge-inner {
  background: rgba(201,169,110,.03);
  border: 1px solid rgba(201,169,110,.18);
  border-left: 3px solid rgba(201,169,110,.45);
  padding: 13px 16px;
  border-radius: 0 2px 2px 0;
}
.tsh-ux-bridge-title {
  font-family: 'Lexend Deca', system-ui, sans-serif;
  font-size: .62rem;
  color: var(--tsh-gold);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.tsh-ux-bridge-list { display: flex; flex-direction: column; gap: 8px; }
.tsh-ux-bridge-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.tsh-ux-bridge-dot {
  color: var(--tsh-gold);
  font-size: .55rem;
  margin-top: 5px;
  flex-shrink: 0;
}
.tsh-ux-bridge-item p {
  font-family: 'Lexend Deca', system-ui, sans-serif;
  font-size: .81rem;
  color: var(--tsh-text1);
  line-height: 1.55;
  margin: 0;
}
.tsh-ux-bridge-item strong { color: var(--tsh-gold-light); }

/* NT 38 + 39 — removed (merged into form area) */
.tsh-ux-proof {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-family: 'Lexend Deca', system-ui, sans-serif;
  font-size: .71rem;
  color: rgba(201,169,110,.5);
}
.tsh-ux-proof span:first-child { font-size: .78rem; }

/* ── Reduced Motion Override ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .tsh-cosmos::before { display: none; }
  .tsh-orb { display: none; }
  .tsh-entrance { opacity: 1 !important; transform: none !important; }
  .tsh-syn-part__body { transition: none !important; }
  .tsh-syn-chevron { transition: none !important; }
  .tsh-form-section::before { animation: none !important; }
  .tsh-btn-submit { animation: none !important; }
  .tsh-btn-submit::after { animation: none !important; display: none; }
  #tsh-headline { color: var(--tsh-gold) !important; }
  .tsh-decode-scramble, .tsh-decode-locked { animation: none !important; }
}

/* ════════════════════════════════════════════════
   LUẬN GIẢI TỔNG HỢP — .tsh-syn-*
   Namespace riêng, không xung đột Phase A/B/C
════════════════════════════════════════════════ */

/* Container chính */
.tsh-syn-wrap {
  position: relative;
  margin: 28px 0;
  padding: 30px 28px;
  background: var(--tsh-surface);
  background-image: radial-gradient(ellipse at 50% 0%, rgba(201,169,110,.07) 0%, transparent 65%);
  border: 1px solid rgba(201,169,110,.2);
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 6px rgba(12,12,10,.95),
    inset 0 0 0 7px rgba(201,169,110,.07),
    0 4px 32px rgba(0,0,0,.25);
}
.tsh-syn-wrap::before,
.tsh-syn-wrap::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.tsh-syn-wrap::before {
  top: 5px; left: 5px;
  border-top: 2px solid rgba(201,169,110,.45);
  border-left: 2px solid rgba(201,169,110,.45);
}
.tsh-syn-wrap::after {
  bottom: 5px; right: 5px;
  border-bottom: 2px solid rgba(201,169,110,.45);
  border-right: 2px solid rgba(201,169,110,.45);
}

/* Header */
.tsh-syn-header {
  text-align: center;
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(201,169,110,.12);
}
.tsh-syn-eyebrow {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tsh-gold);
  font-family: var(--tsh-fb);
  margin-bottom: 8px;
}
.tsh-syn-title {
  font-family: var(--tsh-fh);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, #c9a96e 0%, #f5d58c 50%, #c9a96e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.3;
}
.tsh-syn-title em {
  font-style: normal;
}

/* Phần (Part) — expandable */
.tsh-syn-part {
  border: 1px solid var(--tsh-border);
  border-radius: 4px;
  margin: 10px 0;
  background: rgba(201,169,110,.018);
  box-shadow:
    inset 0 0 0 3px rgba(12,12,10,.9),
    inset 0 0 0 4px rgba(201,169,110,.04);
  overflow: hidden;
  transition: border-color var(--dur-normal);
}
.tsh-syn-part:hover {
  border-color: rgba(201,169,110,.22);
}
.tsh-syn-part:focus-within {
  border-color: rgba(201,169,110,.3);
  box-shadow:
    inset 0 0 0 3px rgba(12,12,10,.9),
    inset 0 0 0 4px rgba(201,169,110,.08),
    0 0 0 2px rgba(201,169,110,.2);
}
.tsh-syn-part.is-open {
  border-color: rgba(201,169,110,.25);
}
.tsh-syn-part__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation; /* FIX MD6 */
}
.tsh-syn-part__ico {
  font-size: 1rem;
  color: var(--tsh-gold);
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}
.tsh-syn-part__ttl {
  font-family: var(--tsh-fh);
  font-size: .92rem;
  font-weight: 600;
  color: var(--tsh-gold);
  flex: 1;
}
.tsh-syn-chevron {
  color: rgba(201,169,110,.5);
  font-size: .75rem;
  transition: transform var(--dur-normal) var(--ease-smooth);
  flex-shrink: 0;
}
.tsh-syn-part.is-open .tsh-syn-chevron {
  transform: rotate(180deg);
}

/* Body (ẩn khi collapse, hiện khi is-open) */
.tsh-syn-part__body {
  max-height: 0;
  overflow: hidden;
  padding: 0 18px;
  transition: max-height .45s cubic-bezier(.4,0,.2,1), padding .3s ease;
}
.tsh-syn-part.is-open .tsh-syn-part__body {
  max-height: 3000px;
  padding: 2px 18px 18px;
}

/* Paragraph trong body */
.tsh-syn-p {
  font-size: .85rem;
  line-height: 1.7;
  color: var(--tsh-text2);
  margin: 0 0 12px;
}
.tsh-syn-p strong {
  color: var(--tsh-text);
  font-weight: 600;
}

/* Inline number badge */
.tsh-syn-inum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-family: var(--tsh-fh);
  font-weight: 700;
  font-size: .82rem;
  vertical-align: middle;
  margin: 0 3px;
  flex-shrink: 0;
}

/* Box mối quan hệ */
.tsh-syn-rel-box {
  padding: 11px 15px;
  border-left: 3px solid;
  border-radius: 0 4px 4px 0;
  margin: 12px 0;
  font-size: .83rem;
  line-height: 1.6;
  color: var(--tsh-text2);
  background: rgba(255,255,255,.02);
}
.tsh-syn-rel-hoa_hop {
  border-color: rgba(90,171,110,.55);
  background: rgba(90,171,110,.04);
}
.tsh-syn-rel-mau_thuan {
  border-color: rgba(224,82,82,.45);
  background: rgba(224,82,82,.03);
}
.tsh-syn-rel-trung_tinh {
  border-color: rgba(201,169,110,.4);
}

/* Sub-heading trong body */
.tsh-syn-sub-head {
  font-family: var(--tsh-fb);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(201,169,110,.65);
  margin: 0 0 10px;
}

/* Grid số thiếu */
.tsh-syn-missing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 4px;
}
.tsh-syn-missing-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 4px;
}
.tsh-syn-missing-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-family: var(--tsh-fh);
  font-weight: 700;
  font-size: .9rem;
  flex-shrink: 0;
}
.tsh-syn-missing-desc {
  font-size: .78rem;
  line-height: 1.5;
  color: var(--tsh-text2);
}

/* Nợ nghiệp */
.tsh-syn-karma-item {
  padding: 10px 14px;
  border-left: 2px solid rgba(224,82,82,.4);
  background: rgba(224,82,82,.03);
  border-radius: 0 4px 4px 0;
  margin: 8px 0;
  font-size: .83rem;
  line-height: 1.6;
  color: var(--tsh-text2);
}
.tsh-syn-karma-badge {
  font-weight: 700;
  color: rgba(224,82,82,.85);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.tsh-syn-karma-loc {
  color: var(--tsh-text3);
  font-size: .78rem;
}

/* Năm cá nhân card */
.tsh-syn-year-card {
  background: rgba(201,169,110,.04);
  border: 1px solid rgba(201,169,110,.16);
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 14px;
}
.tsh-syn-year-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.tsh-syn-year-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid currentColor;
  border-radius: 4px;
  font-family: var(--tsh-fh);
  font-weight: 700;
  font-size: 1.3rem;
  flex-shrink: 0;
  box-shadow: 0 0 12px currentColor;
  opacity: .9;
}
.tsh-syn-year-info {
  flex: 1;
  min-width: 0;
}
.tsh-syn-year-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tsh-text3);
  margin-bottom: 3px;
}
.tsh-syn-year-title {
  font-family: var(--tsh-fh);
  font-size: 1rem;
  font-weight: 700;
}
.tsh-syn-year-desc {
  font-size: .84rem;
  line-height: 1.7;
  color: var(--tsh-text2);
  margin: 0 0 14px;
}

/* Grid 2×2 lĩnh vực */
.tsh-syn-4fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tsh-syn-field-item {
  padding: 10px 12px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 4px;
}
.tsh-syn-field-label {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tsh-gold);
  margin-bottom: 6px;
}
.tsh-syn-field-text {
  font-size: .8rem;
  line-height: 1.55;
  color: var(--tsh-text2);
}

/* Tháng cá nhân */
.tsh-syn-month-row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.tsh-syn-month-badge {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid currentColor;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  margin-bottom: 4px;
}
.tsh-syn-month-title {
  font-size: .8rem;
  color: var(--tsh-text);
  font-weight: 600;
  margin-left: 6px;
}

/* Holland hướng nghiệp */
.tsh-syn-hol-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 4px;
}
.tsh-syn-hol-item {
  padding: 12px 14px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 4px;
}
.tsh-syn-hol-title {
  font-family: var(--tsh-fh);
  font-size: .85rem;
  font-weight: 700;
  color: var(--tsh-gold);
  margin-bottom: 6px;
}
.tsh-syn-hol-desc {
  font-size: .78rem;
  line-height: 1.5;
  color: var(--tsh-text2);
  margin-bottom: 8px;
}
.tsh-syn-hol-careers {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tsh-syn-hol-careers span {
  font-size: .72rem;
  padding: 2px 8px;
  background: rgba(201,169,110,.08);
  border: 1px solid rgba(201,169,110,.18);
  border-radius: 20px;
  color: var(--tsh-text2);
}

/* ══ TOC FAB: Desktop = compact pill trên back-to-top | Mobile = sticky bar ══ */

/* ── Shared base ── */
#tsh-toc-fab {
  position: fixed !important;
  z-index: 999990;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity .22s, visibility .22s, transform .22s, border-color .2s, box-shadow .2s;
}
#tsh-toc-fab.tsh-toc-fab--show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.tsh-fab-icon { font-size: .95rem; color: var(--tsh-gold); line-height: 1; pointer-events: none; }
.tsh-fab-txt  { font-family: 'Lexend Deca', sans-serif; font-size: .78rem; font-weight: 500; color: #c9a96e; letter-spacing: .06em; pointer-events: none; }
.tsh-fab-arr  { font-size: .80rem; color: rgba(201,169,110,.5); pointer-events: none; transition: transform .22s; }
#tsh-toc-fab.tsh-toc-fab--open .tsh-fab-arr { transform: scaleY(-1); color: var(--tsh-gold); }

/* ── Desktop ≥769px: compact pill góc phải phía trên back-to-top ── */
@media (min-width: 769px) {
  #tsh-toc-fab {
    bottom: 84px;
    right: 20px;
    padding: 9px 16px;
    background: linear-gradient(135deg, rgba(26,21,16,.97) 0%, rgba(10,10,8,.96) 50%, rgba(22,18,12,.97) 100%);
    border: 1px solid rgba(201,169,110,.45);
    border-radius: 3px;
    transform: translateY(8px);
    box-shadow:
      inset 0 0 0 1px rgba(201,169,110,.07),
      0 4px 20px rgba(0,0,0,.6),
      0 0 18px rgba(201,169,110,.12);
    animation: tshFabBreath 3s ease-in-out infinite;
  }
  #tsh-toc-fab.tsh-toc-fab--show { transform: translateY(0); }
  #tsh-toc-fab:hover,
  #tsh-toc-fab.tsh-toc-fab--open {
    border-color: rgba(201,169,110,.7);
    box-shadow:
      inset 0 0 0 1px rgba(201,169,110,.1),
      0 4px 24px rgba(0,0,0,.65),
      0 0 30px rgba(201,169,110,.25);
  }
}

/* ── Mobile <769px: full-width bar dán đáy ── */
@media (max-width: 768px) {
  #tsh-toc-fab {
    bottom: 0; left: 0; right: 0;
    justify-content: center;
    padding: 11px 20px;
    background: linear-gradient(180deg, rgba(18,14,10,.97) 0%, rgba(10,10,8,.98) 100%);
    border: none;
    border-top: 1px solid rgba(201,169,110,.38);
    box-shadow: 0 -4px 20px rgba(0,0,0,.55), inset 0 1px 0 rgba(201,169,110,.08);
    transform: translateY(4px);
  }
  #tsh-toc-fab.tsh-toc-fab--show { transform: translateY(0); }
  #tsh-toc-fab:hover              { background: rgba(14,13,10,.99); border-top-color: rgba(201,169,110,.55); }
}

/* FAB L-bracket corners */
.tsh-fab-brk { position: absolute; width: 7px; height: 7px; pointer-events: none; }
.tsh-fab-brk-tl { top: 3px; left: 3px; border-top: 1.5px solid rgba(201,169,110,.55); border-left: 1.5px solid rgba(201,169,110,.55); }
.tsh-fab-brk-br { bottom: 3px; right: 3px; border-bottom: 1.5px solid rgba(201,169,110,.55); border-right: 1.5px solid rgba(201,169,110,.55); }
/* FAB breathing glow */
@keyframes tshFabBreath {
  0%,100% { opacity: .7; }
  50%     { opacity: 1; }
}
/* FAB SVG icon sizing */
.tsh-fab-icon svg { width: 1em; height: 1em; display: inline-block; vertical-align: middle; overflow: visible; }

/* ── Mobile FAB: attention signals ── */
@media (max-width: 768px) {
  /* Glow pulse on border-top + overall bar */
  #tsh-toc-fab.tsh-toc-fab--show {
    overflow: hidden;
    animation: tshFabMobileGlow 2.6s ease-in-out infinite;
  }
  /* Top-center expanding gold line */
  #tsh-toc-fab.tsh-toc-fab--show::before {
    content: '';
    position: absolute;
    top: -1px; left: 50%;
    transform: translateX(-50%);
    height: 2px; width: 0;
    background: linear-gradient(90deg, transparent, #f5d58c 40%, #f5d58c 60%, transparent);
    box-shadow: 0 0 8px rgba(245,213,140,.8), 0 0 18px rgba(201,169,110,.5);
    animation: tshFabTopLine 2.6s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
  }
  /* Shimmer sweep */
  #tsh-toc-fab.tsh-toc-fab--show::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 0; width: 55%;
    background: linear-gradient(90deg, transparent 0%, rgba(245,213,140,.07) 50%, transparent 100%);
    animation: tshFabMobileShimmer 4.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
  }
  /* Arrow bounce — primary tap hint */
  #tsh-toc-fab.tsh-toc-fab--show .tsh-fab-arr {
    animation: tshFabArrBounce 2.2s ease-in-out infinite;
    color: rgba(201,169,110,.75) !important;
  }
  /* Entrance: slide up with spring */
  #tsh-toc-fab { transform: translateY(100%); }
  #tsh-toc-fab.tsh-toc-fab--show {
    transform: translateY(0);
    transition: transform .5s cubic-bezier(.34,1.45,.64,1), opacity .25s, visibility .25s;
  }
}
@keyframes tshFabMobileGlow {
  0%,100% { opacity: .7; }
  50%     { opacity: 1; }
}
@keyframes tshFabTopLine {
  0%,100% { width: 0; opacity: 0; }
  30%     { width: 70%; opacity: 1; }
  70%     { width: 70%; opacity: .7; }
}
@keyframes tshFabMobileShimmer {
  0%      { transform: translateX(-100%); opacity: 0; }
  15%     { opacity: 1; }
  65%     { transform: translateX(250%); opacity: 0; }
  100%    { transform: translateX(250%); opacity: 0; }
}
@keyframes tshFabArrBounce {
  0%,55%,100% { transform: translateY(0); opacity: .6; }
  25%         { transform: translateY(-5px); opacity: 1; }
  40%         { transform: translateY(-1px); opacity: .85; }
}

/* ── Panel: chung ── */
#tsh-toc-panel {
  position: fixed !important;
  z-index: 999989;
  background: #0f0d0a;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .22s, visibility .22s, transform .22s;
}
#tsh-toc-panel.tsh-toc-panel--open { opacity: 1; visibility: visible; transform: translateY(0); }

/* ── Panel Desktop: dropdown compact bên phải ── */
@media (min-width: 769px) {
  #tsh-toc-panel {
    bottom: 132px;
    right: 16px;
    width: 300px;
    max-height: 68vh;
    overflow-y: auto;
    background: radial-gradient(ellipse 260px 150px at 50% 0%, rgba(201,169,110,.07) 0%, transparent 65%), #0f0d0a;
    border: 1px solid rgba(201,169,110,.35);
    border-radius: 4px;
    padding: 6px;
    box-shadow:
      inset 0 0 0 1px rgba(201,169,110,.05),
      0 -6px 40px rgba(0,0,0,.7),
      0 8px 40px rgba(0,0,0,.65);
    transform: translateY(12px);
  }
  #tsh-toc-panel.tsh-toc-panel--open { transform: translateY(0); }
}

/* ── Panel Mobile: full-width trượt lên ── */
@media (max-width: 768px) {
  #tsh-toc-panel {
    bottom: 46px; left: 0; right: 0;
    background: linear-gradient(180deg, rgba(22,18,12,.98) 0%, #0f0d0a 30%);
    border-top: 1px solid rgba(201,169,110,.3);
    padding: 8px 14px 12px;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 -8px 40px rgba(0,0,0,.7), inset 0 1px 0 rgba(201,169,110,.08);
  }
}

/* Panel L-bracket corners */
#tsh-toc-panel::before {
  content: '';
  position: absolute;
  top: 5px; left: 5px;
  width: 11px; height: 11px;
  border-top: 1.5px solid rgba(201,169,110,.5);
  border-left: 1.5px solid rgba(201,169,110,.5);
  pointer-events: none;
  z-index: 1;
}
#tsh-toc-panel::after {
  content: '';
  position: absolute;
  top: 5px; right: 5px;
  width: 11px; height: 11px;
  border-top: 1.5px solid rgba(201,169,110,.5);
  border-right: 1.5px solid rgba(201,169,110,.5);
  pointer-events: none;
  z-index: 1;
}

/* ── Panel nội dung ── */
.tsh-toc-panel-title {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(201,169,110,.85);
  padding: 10px 10px 6px;
  margin-bottom: 0;
  text-align: center;
}
.tsh-toc-panel-meander {
  padding: 0 8px;
  margin-bottom: 8px;
  line-height: 0;
  opacity: .55;
}
.tsh-toc-pi-grid {
  display: grid;
  gap: 4px;
}
@media (min-width: 769px) { .tsh-toc-pi-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .tsh-toc-pi-grid { grid-template-columns: repeat(2, 1fr); } }
.tsh-toc-pi {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  text-decoration: none;
  color: var(--tsh-text2);
  font-family: 'Lexend Deca', system-ui, sans-serif;
  font-size: .78rem;
  border-radius: 3px;
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  transition: background .15s, color .15s, border-color .15s, padding-left .15s;
  min-height: 40px;
}
.tsh-toc-pi:hover {
  background: rgba(201,169,110,.09);
  border-color: rgba(201,169,110,.2);
  border-left-color: rgba(201,169,110,.55);
  padding-left: 13px;
  color: var(--tsh-gold-hi);
}
.tsh-toc-pi-icon { font-size: .88rem; flex-shrink: 0; }
.tsh-toc-pi-lbl  { flex: 1; line-height: 1.3; }
.tsh-toc-pi-arr  { font-size: 1rem; color: rgba(201,169,110,.3); flex-shrink: 0; }
@media (max-width: 768px) { .tsh-toc-pi-arr { display: none; } }
.tsh-toc-pi:hover .tsh-toc-pi-arr { color: rgba(201,169,110,.6); }

/* TOC: mục Luận Giải nổi bật */
.tsh-ux-toc-syn {
  color: var(--tsh-gold) !important;
  font-weight: 600 !important;
  border-color: rgba(201,169,110,.35) !important;
  background: rgba(201,169,110,.06) !important;
}

/* ════════════════════════════════════════════
   SYNTHESIS UPGRADE — Element + Hidden + Timeline
   ════════════════════════════════════════════ */

/* ── Element row (badge only, pentagon removed) ── */
.tsh-syn-nh-row {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 16px;
  padding: 12px; border-radius: 3px;
  background: rgba(201,169,110,.04);
  border: 1px solid rgba(201,169,110,.14);
}
.tsh-syn-nh-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

.tsh-syn-nh-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-family: 'Be Vietnam Pro', sans-serif;
  border: 1px solid; border-radius: 2px;
  padding: 5px 10px; letter-spacing: .04em;
}
.tsh-syn-nh-badge span { font-size: 1rem; }

/* ── Mini cards (Birthday + Attitude) ── */
.tsh-syn-mini-cards { display: flex; gap: 8px; }
.tsh-syn-mini-card {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 6px; border-radius: 2px; text-align: center;
  background: rgba(12,12,10,.6); border: 1px solid rgba(201,169,110,.18);
}
.tsh-syn-mini-num {
  font-family: 'Lexend Deca', sans-serif; font-size: 1.4rem; font-weight: 700; line-height: 1;
}
.tsh-syn-mini-lbl {
  font-size: .46rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(232,224,208,.45); font-family: 'Lexend Deca', sans-serif;
}
.tsh-syn-mini-val {
  font-size: .58rem; color: rgba(232,224,208,.7); font-family: 'Be Vietnam Pro', sans-serif;
  text-align: center; line-height: 1.3;
}

/* ── Strength / Weakness 2-col ── */
.tsh-syn-sw-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 14px;
}
.tsh-syn-sw-col { padding: 10px 12px; border-radius: 2px; }
.tsh-syn-sw-pos { background: rgba(90,171,110,.06); border: 1px solid rgba(90,171,110,.2); }
.tsh-syn-sw-neg { background: rgba(200,80,80,.06); border: 1px solid rgba(200,80,80,.2); }
.tsh-syn-sw-head {
  font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  font-family: 'Lexend Deca', sans-serif; margin-bottom: 7px;
}
.tsh-syn-sw-pos .tsh-syn-sw-head { color: rgba(90,171,110,.9); }
.tsh-syn-sw-neg .tsh-syn-sw-head { color: rgba(220,110,90,.9); }
.tsh-syn-sw-item {
  font-size: .72rem; color: var(--tsh-text2); line-height: 1.5;
  font-family: 'Be Vietnam Pro', sans-serif; margin-bottom: 3px;
}

/* ── Hidden Powers Grid (Part 2) ── */
.tsh-syn-hidden-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
@media (max-width: 600px) { .tsh-syn-hidden-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .tsh-syn-hidden-grid { grid-template-columns: 1fr; } }

.tsh-syn-hidden-card {
  padding: 10px 10px 8px; border-radius: 2px;
  background: rgba(12,12,10,.7); border: 1px solid rgba(201,169,110,.16);
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .18s;
  min-width: 0; overflow: hidden;
}
.tsh-syn-hidden-card:hover { border-color: rgba(201,169,110,.35); }
.tsh-syn-hc-top { display: flex; align-items: center; gap: 8px; }
.tsh-syn-hc-num {
  font-family: 'Lexend Deca', sans-serif; font-size: 1.5rem; font-weight: 700;
  line-height: 1; flex-shrink: 0; min-width: 32px; text-align: center;
}
.tsh-syn-hc-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tsh-syn-hc-lbl {
  font-size: .46rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(232,224,208,.45); font-family: 'Lexend Deca', sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tsh-syn-hc-title {
  font-size: .62rem; color: var(--tsh-gold); font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 600; line-height: 1.3;
}
.tsh-syn-hc-desc {
  font-size: .68rem; color: var(--tsh-text2); line-height: 1.5;
  font-family: 'Be Vietnam Pro', sans-serif; border-top: 1px solid rgba(201,169,110,.1);
  padding-top: 5px; margin-top: 2px;
  overflow-wrap: break-word; word-break: break-word;
}

/* ── Challenge Timeline SVG ── */
.tsh-syn-chl-svg-wrap {
  margin: 10px 0 6px; padding: 6px 0;
  overflow-x: auto;}
.tsh-chl-timeline-svg { display: block; }

/* ── Bridge number items ── */
.tsh-syn-bridge-item {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 7px 10px; margin-bottom: 5px; border-radius: 2px;
  background: rgba(201,169,110,.04); border-left: 2px solid rgba(201,169,110,.25);
}
.tsh-syn-bridge-pair {
  font-size: .58rem; color: rgba(232,224,208,.5); letter-spacing: .06em;
  font-family: 'Lexend Deca', sans-serif; text-transform: uppercase; flex-shrink: 0;
}
.tsh-syn-bridge-num {
  font-family: 'Lexend Deca', sans-serif; font-size: .78rem; font-weight: 500;
  flex-shrink: 0;
}
.tsh-syn-bridge-desc {
  font-size: .72rem; color: var(--tsh-text2); line-height: 1.45;
  font-family: 'Be Vietnam Pro', sans-serif;
}

/* ── Element compat row removed (v5.12.5) ── */

/* ── LP Advice quote box ── */
.tsh-syn-lp-advice {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 16px;
  padding: 12px 14px; border-radius: 2px;
  background: rgba(201,169,110,.06);
  border: 1px solid rgba(201,169,110,.2);
  border-left: 3px solid rgba(201,169,110,.5);
}
.tsh-syn-advice-ico {
  font-size: 1.1rem; color: var(--tsh-gold); flex-shrink: 0; margin-top: 1px;
}
.tsh-syn-lp-advice p {
  margin: 0; font-size: .76rem; color: var(--tsh-text2);
  font-family: 'Be Vietnam Pro', sans-serif; line-height: 1.6; font-style: italic;
}

/* ── Responsive: mobile collapse ── */
@media (max-width: 480px) {
  .tsh-syn-nh-row { flex-direction: column; }
  .tsh-syn-sw-grid { grid-template-columns: 1fr; }
}

/* CTA */
.tsh-syn-cta {
  text-align: center;
  margin-top: 36px;
  padding-top: 0;
}
.tsh-syn-cta-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,.15), rgba(201,169,110,.45), rgba(201,169,110,.15), transparent);
  margin-bottom: 28px;
  position: relative;
}
.tsh-syn-cta-divider::before,
.tsh-syn-cta-divider::after {
  content: '\25C8';
  position: absolute; top: 50%;
  transform: translateY(-50%);
  color: rgba(201,169,110,.45); font-size: .6rem;
}
.tsh-syn-cta-divider::before { left: 22%; }
.tsh-syn-cta-divider::after  { right: 22%; }
.tsh-syn-cta-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem; font-style: italic;
  color: rgba(201,169,110,.82);
  margin: 0 0 20px;
}
.tsh-syn-cta-wrap {
  position: relative; display: inline-block; margin-bottom: 14px;
}
.tsh-syn-cta-wrap::before {
  content: ''; position: absolute; top: -5px; left: -5px;
  width: 13px; height: 13px;
  border-top: 1.5px solid rgba(201,169,110,.6);
  border-left: 1.5px solid rgba(201,169,110,.6);
  pointer-events: none;
}
.tsh-syn-cta-wrap::after {
  content: ''; position: absolute; bottom: -5px; right: -5px;
  width: 13px; height: 13px;
  border-bottom: 1.5px solid rgba(201,169,110,.6);
  border-right: 1.5px solid rgba(201,169,110,.6);
  pointer-events: none;
}
.tsh-syn-cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 42px;
  background: linear-gradient(135deg, rgba(201,169,110,.14) 0%, rgba(201,169,110,.06) 100%);
  border: 1px solid rgba(201,169,110,.45);
  border-radius: 2px;
  color: #f5d58c;
  font-family: 'Lexend Deca', sans-serif;
  font-size: .82rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  position: relative; overflow: hidden;
  transition: all .32s var(--ease-smooth);
}
.tsh-syn-cta-btn::before {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(245,213,140,.12), transparent);
  transition: left .5s ease; pointer-events: none;
}
.tsh-syn-cta-btn:hover::before,
.tsh-syn-cta-btn:focus-visible::before { left: 100%; }
.tsh-syn-cta-btn:hover,
.tsh-syn-cta-btn:focus-visible {
  background: linear-gradient(135deg, rgba(201,169,110,.22) 0%, rgba(201,169,110,.1) 100%);
  border-color: rgba(201,169,110,.72);
  box-shadow: 0 0 28px rgba(201,169,110,.2), 0 0 60px rgba(201,169,110,.08);
  color: #f5d58c; outline: none;
}
.tsh-syn-cta-arrow {
  display: inline-block; font-size: 1.1rem;
  transition: transform .3s ease;
}
.tsh-syn-cta-btn:hover .tsh-syn-cta-arrow { transform: translateY(3px); }
.tsh-syn-cta-sub {
  font-size: .65rem; color: rgba(201,169,110,.42);
  letter-spacing: .1em; margin: 0;
}

/* ── SYNTHESIS NEW BLOCKS ── */

/* Section divider head — Meander + L-bracket */
.tsh-syn-section-head {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .85rem;
  letter-spacing: .1em;
  color: rgba(201,169,110,.8);
  text-transform: uppercase;
  padding: 28px 16px 14px;
  margin-top: 24px;
  border-bottom: 1px solid rgba(201,169,110,.18);
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tsh-syn-section-head::before {
  content: '';
  position: absolute;
  top: 4px; left: 4px;
  width: 10px; height: 10px;
  border-top: 1.5px solid rgba(201,169,110,.35);
  border-left: 1.5px solid rgba(201,169,110,.35);
  pointer-events: none;
}
.tsh-syn-section-head::after {
  content: '';
  position: absolute;
  bottom: 4px; right: 4px;
  width: 10px; height: 10px;
  border-bottom: 1.5px solid rgba(201,169,110,.35);
  border-right: 1.5px solid rgba(201,169,110,.35);
  pointer-events: none;
}
.tsh-syn-section-head .tsh-ico {
  width: 16px; height: 16px;
  color: rgba(201,169,110,.7);
  flex-shrink: 0;
}
.tsh-syn-meander {
  height: 10px; margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12' viewBox='0 0 48 12'%3E%3Cpath d='M0 6h6V0h12v6h6V0h12v6h6v6H36V6h-6v6H12V6H6v6H0z' fill='%23c9a96e' opacity='.06'/%3E%3Cpath d='M0 6h6V0h12v6h6V0h12v6h6v6H36V6h-6v6H12V6H6v6H0z' fill='none' stroke='%23c9a96e' stroke-width='.6' opacity='.3'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: center; background-size: 48px 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
}

/* Tagline block */
.tsh-syn-tagline-block {
  text-align: center;
  padding: 22px 16px 18px;
  border: 1px solid rgba(201,169,110,.12);
  border-radius: 4px;
  background: rgba(201,169,110,.03);
  margin-bottom: 6px;
  position: relative;
}
.tsh-syn-tl-name {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 1.3rem;
  color: #f5d58c;
  letter-spacing: .06em;
  margin-bottom: 8px;
  text-shadow: 0 0 24px rgba(245,213,140,.25);
}
.tsh-syn-tl-archetype {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.tsh-syn-tl-num {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  border: 1px solid;
  border-radius: 50%;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
  text-shadow: 0 0 20px currentColor;
}
/* V8: Concentric rotating rings */
.tsh-syn-ring {
  position: absolute;
  top: -6px; left: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  pointer-events: none;
}
.tsh-syn-ring-1 { animation: tshSpin 45s linear infinite; will-change: transform; }
.tsh-syn-ring-2 { animation: tshSpin 60s linear infinite reverse; }
@keyframes tshGlowPulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } }
.tsh-syn-tl-num .tsh-syn-ring-1 { will-change: opacity; filter: drop-shadow(0 0 4px currentColor); animation: tshSpin 45s linear infinite, tshGlowPulse 4s ease-in-out infinite; }
.tsh-syn-tl-label {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .95rem;
  color: #e8e0d0;
  letter-spacing: .04em;
}
.tsh-syn-tl-soul {
  font-size: .82rem;
  color: rgba(232,224,208,.6);
}
.tsh-syn-tl-hanh {
  display: inline-block;
  font-size: .78rem;
  padding: 4px 14px;
  border: 1px solid;
  border-radius: 20px;
  margin-bottom: 8px;
}
.tsh-syn-tl-summary {
  font-size: .85rem;
  color: rgba(232,224,208,.65);
  font-style: italic;
  margin-top: 6px;
}

/* 3-Layer narrative — Stacked + accent bar */
.tsh-syn-3layers {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}
.tsh-syn-layer-card {
  border: 1px solid;
  border-left: 3px solid;
  border-radius: 4px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(201,169,110,.04) 0%, rgba(255,255,255,.01) 100%);
  position: relative;
  transition: box-shadow .4s ease;
}
.tsh-syn-layer-card:hover {
  box-shadow: 0 0 20px rgba(201,169,110,.08);
}
.tsh-syn-lc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.tsh-syn-lc-ico {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  background: rgba(201,169,110,.08);
  box-shadow: 0 0 12px rgba(201,169,110,.12);
}
.tsh-syn-lc-label {
  font-size: .78rem;
  color: rgba(232,224,208,.65);
  letter-spacing: .04em;
  flex: 1;
  line-height: 1.3;
}
.tsh-syn-lc-num {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  flex-shrink: 0;
  text-shadow: 0 0 16px currentColor;
}
.tsh-syn-lc-text {
  font-size: .85rem;
  color: rgba(232,224,208,.85);
  line-height: 1.7;
  margin: 0;
}

/* Narrative harmony/conflict boxes */
.tsh-syn-nar-boxes { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.tsh-syn-nar-box {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 4px;
  font-size: .82rem;
  line-height: 1.5;
}
.tsh-syn-nar-harmony { background: rgba(93,181,93,.07); border-left: 2px solid rgba(93,181,93,.4); }
.tsh-syn-nar-conflict { background: rgba(232,91,58,.07); border-left: 2px solid rgba(232,91,58,.35); }
.tsh-syn-nar-neutral  { background: rgba(201,169,110,.06); border-left: 2px solid rgba(201,169,110,.25); }
.tsh-syn-nar-ico { flex-shrink: 0; font-size: 1rem; }
.tsh-syn-nar-lbl { font-size: .72rem; color: rgba(232,224,208,.5); margin-right: 4px; }
.tsh-syn-nar-desc { color: rgba(232,224,208,.8); }

/* Radar chart */
.tsh-syn-radar-wrap {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
}
.tsh-syn-radar-svg { display: block; width: 100%; max-width: 180px; height: auto; }
.tsh-syn-radar-list { display: flex; flex-direction: column; gap: 8px; }
.tsh-syn-radar-item { display: flex; align-items: center; gap: 8px; }
.tsh-syn-ri-label { font-size: .75rem; color: rgba(232,224,208,.7); width: 68px; flex-shrink: 0; }
.tsh-syn-ri-bar {
  flex: 1; height: 5px;
  background: rgba(255,255,255,.06);
  border-radius: 3px;
  overflow: hidden;
}
.tsh-syn-ri-fill { height: 100%; border-radius: 3px; width: 0; transition: width 1s ease; }
.tsh-syn-ri-score { font-family: 'Lexend Deca', sans-serif; font-size: .72rem; width: 18px; text-align: right; flex-shrink: 0; }
/* Radar polygon animation */
.tsh-syn-radar-svg polygon[fill="url(#radarFill)"] {
  transform-origin: 50% 50%;
  transform: scale(0);
  transition: transform .8s cubic-bezier(.34,1.56,.64,1);
}
.tsh-syn-radar-svg circle[fill="#c9a96e"] {
  opacity: 0;
  transition: opacity .6s ease .6s;
}
.tsh-syn-radar-wrap.is-visible .tsh-syn-radar-svg polygon[fill="url(#radarFill)"] {
  transform: scale(1);
}
.tsh-syn-radar-wrap.is-visible .tsh-syn-radar-svg circle[fill="#c9a96e"] {
  opacity: 0.9;
}
@keyframes tshRadarDot { 0%,100% { r: 2.5; } 50% { r: 4; } }
.tsh-syn-radar-wrap.is-visible .tsh-syn-radar-svg circle[fill="#c9a96e"] {
  animation: tshRadarDot 2s ease-in-out infinite;
  animation-delay: 1s;
}

/* Year full fields */
.tsh-syn-yr-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 14px 0;
}
.tsh-syn-yr-field {
  padding: 10px 12px;
  border: 1px solid rgba(201,169,110,.1);
  border-radius: 4px;
  background: rgba(255,255,255,.015);
}
.tsh-syn-yrf-head {
  font-size: .72rem;
  color: rgba(201,169,110,.7);
  letter-spacing: .04em;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.tsh-syn-yrf-text {
  font-size: .82rem;
  color: rgba(232,224,208,.8);
  line-height: 1.55;
}

/* 3-year outlook */
.tsh-syn-outlook { margin-top: 16px; }
.tsh-syn-outlook-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.tsh-syn-oy-card {
  border: 1px solid;
  border-radius: 4px;
  padding: 12px 14px;
  background: rgba(255,255,255,.012);
}
.tsh-syn-oy-year { font-size: .7rem; color: rgba(232,224,208,.45); margin-bottom: 3px; }
.tsh-syn-oy-num {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}
.tsh-syn-oy-title { font-size: .8rem; color: rgba(232,224,208,.75); margin-bottom: 6px; }
.tsh-syn-oy-desc { font-size: .78rem; color: rgba(232,224,208,.55); line-height: 1.5; }

/* Action plan */
.tsh-syn-act-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.tsh-syn-act-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid rgba(201,169,110,.1);
  border-radius: 4px;
  background: rgba(201,169,110,.03);
}
.tsh-syn-act-num {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 1.1rem;
  color: #c9a96e;
  width: 28px; height: 28px;
  border: 1px solid rgba(201,169,110,.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.tsh-syn-act-body { flex: 1; }
.tsh-syn-act-label {
  font-size: .75rem;
  color: rgba(201,169,110,.75);
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.tsh-syn-act-text { font-size: .85rem; color: rgba(232,224,208,.85); line-height: 1.6; }

/* Closing / Cosmic message — Premium frame */
.tsh-syn-closing {
  margin-top: 28px;
  padding: 28px 20px;
  text-align: center;
  border: 1px solid rgba(201,169,110,.15);
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(201,169,110,.04) 0%, rgba(12,12,10,.6) 100%);
  box-shadow: inset 0 0 0 3px rgba(12,12,10,.8), inset 0 0 0 4px rgba(201,169,110,.1);
  position: relative;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
}
.tsh-syn-closing.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.tsh-syn-closing::before {
  content: '';
  position: absolute;
  top: 6px; left: 6px;
  width: 12px; height: 12px;
  border-top: 1.5px solid rgba(201,169,110,.4);
  border-left: 1.5px solid rgba(201,169,110,.4);
  pointer-events: none;
}
.tsh-syn-closing::after {
  content: '';
  position: absolute;
  bottom: 6px; right: 6px;
  width: 12px; height: 12px;
  border-bottom: 1.5px solid rgba(201,169,110,.4);
  border-right: 1.5px solid rgba(201,169,110,.4);
  pointer-events: none;
}
.tsh-syn-close-inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.tsh-syn-close-gem {
  color: #c9a96e;
  filter: drop-shadow(0 0 8px rgba(201,169,110,.35));
  opacity: 0.92;
}
.tsh-syn-close-gem .tsh-ico {
  width: 2rem; height: 2rem;
}
.tsh-syn-close-title {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 1.05rem;
  letter-spacing: .16em;
  color: rgba(201,169,110,.92);
  text-transform: uppercase;
}
.tsh-syn-close-quote {
  font-size: 1rem;
  color: rgba(232,224,208,.85);
  font-style: italic;
  line-height: 1.8;
  border-left: none;
  margin: 0;
  padding: 10px 18px;
  text-align: center;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .tsh-syn-wrap {
    padding: 20px 16px;
    margin: 20px 0;
  }
  .tsh-syn-title { font-size: 1.1rem; }
  .tsh-syn-4fields { grid-template-columns: 1fr; }
  .tsh-syn-hol-row { grid-template-columns: 1fr; }
  .tsh-syn-missing-grid { grid-template-columns: 1fr; }
  .tsh-syn-part__head { padding: 12px 14px; }
  .tsh-syn-part.is-open .tsh-syn-part__body { padding: 2px 14px 14px; }
  .tsh-syn-layer-card { padding: 14px 14px; }
  .tsh-syn-radar-wrap { grid-template-columns: 1fr; }
  .tsh-syn-radar-svg { max-width: 200px; margin: 0 auto; }
  .tsh-syn-yr-fields { grid-template-columns: 1fr; }
  .tsh-syn-outlook-row { grid-template-columns: 1fr; }
  .tsh-syn-tl-num { width: 50px; height: 50px; font-size: 1.6rem; }
  .tsh-syn-closing { padding: 20px 14px; }
}

/* ═══════════════════════════════════════════════
   UPGRADE PATCH — Chữ Hán, Energy Borders, Colors, Animations
   ═══════════════════════════════════════════════ */

/* ── Chữ Hán tách dòng riêng trong expandCard ── */
.ch-han {
  font-size: .82rem; letter-spacing: .08em; color: rgba(201,169,110,.6);
  font-family: 'Noto Serif SC', 'Lexend Deca', sans-serif;
  margin-bottom: 2px; line-height: 1.3;
}

/* ── Sức Mạnh / Thách Thức color-coding ── */
.tsh-pros { border-left: 4px solid #5aab6e; padding-left: 16px; }
.tsh-pros h4 { color: #5aab6e; }
.tsh-cons { border-left: 4px solid #e57373; padding-left: 16px; }
.tsh-cons h4 { color: #e57373; }

/* ── Energy color top-border cho expandCard (set via JS inline) ── */
.tsh-card[data-energy-border] { border-top: 3px solid var(--card-energy-color); }

/* ── Thách Thức Chính highlight ── */
.tsh-chl-main { background: rgba(201,169,110,.04); }

/* ── Dominant personality ring badge ── */
.tsh-pg-ring.dominant svg { filter: drop-shadow(0 0 8px rgba(201,169,110,.35)); }
.tsh-pg-ring.dominant .pg-num { color: var(--tsh-gold); font-weight: 700; }

/* ── Hexagon chart larger ── */
.tsh-hexagon-wrap { max-width: 380px; margin: 0 auto; }

/* ── Pyramid apex highlight (merged into main block above) ── */

/* ── 0% ring muted state ── */
.tsh-pg-ring svg circle[stroke-dasharray="0"] { opacity: .25; }

/* ── Pinnacle cards collapse ── */
.tsh-peak-card .tsh-pk-body { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.4,0,.2,1), padding .3s; padding: 0 0; }
.tsh-peak-card.is-open .tsh-pk-body { max-height: 2000px; padding: 8px 0 0; }
.tsh-peak-card { cursor: pointer; }
.tsh-peak-card .pk-toggle { display: inline-block; transition: transform .3s; font-size: .7rem; color: var(--tsh-text2); }
.tsh-peak-card.is-open .pk-toggle { transform: rotate(180deg); }

/* ── Stagger fade-in animation ── */
@keyframes tshFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tsh-anim-item { opacity: 0; animation: tshFadeUp .5s ease forwards; }

/* ── Count-up pulse for rings ── */
@keyframes tshRingPulse {
  0%,100% { opacity: .65; }
  50%     { opacity: 1; }
}
.tsh-pg-ring.dominant svg { will-change: opacity; filter: drop-shadow(0 0 3px rgba(201,169,110,.3)); animation: tshRingPulse 2.5s ease infinite; }

/* ── Gradient fill for Holland polygon ── */
.tsh-hex-svg polygon[fill*="201,169,110"] { fill: url(#holGrad) !important; }

/* ── Period card current glow ── */
.tsh-period-cur { background: rgba(201,169,110,.06) !important; box-shadow: inset 0 0 0 1px rgba(201,169,110,.15); }

/* ── Missing number "Thiếu" red tint ── */
.tsh-miss-cell .mc-circle.absent { background: rgba(229,115,115,.06); }

/* ── Bridge card truncate ── */
.tsh-bridge-desc { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Lo Shu arrow glow ── */
.tsh-ls-grid svg line[stroke*="201,169,110"] { filter: drop-shadow(0 0 4px rgba(201,169,110,.4)); }

/* ── DNA Số Học ── */
.tsh-dna-top3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.tsh-dna-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(201,169,110,.12);
  border-radius: 4px;
  padding: 14px 10px;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.tsh-dna-card:first-child { background: rgba(201,169,110,.06); border-color: rgba(201,169,110,.25); }
.tsh-dna-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.dna-medal { font-size: .65rem; letter-spacing: .04em; margin-bottom: 4px; font-family: var(--tsh-fb); }
.dna-num { font-family: 'Lexend Deca', system-ui, sans-serif; font-size: 1.8rem; font-weight: 700; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
.dna-pct { font-family: var(--tsh-fb); font-size: 1.1rem; font-weight: 700; color: var(--tsh-gold); margin: 4px 0 2px; }
.dna-name { font-size: .72rem; color: var(--tsh-text2); line-height: 1.3; }

.tsh-dna-bars { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.tsh-dna-row { display: flex; flex-direction: column; gap: 4px; }
.tsh-dna-row-bar { display: grid; grid-template-columns: 1fr 42px; align-items: center; gap: 8px; }
.dna-bar-label { font-size: .78rem; color: var(--tsh-text2); white-space: normal; line-height: 1.4; }
.dna-bar-num { font-family: var(--tsh-fb); font-weight: 700; font-size: .85rem; font-variant-numeric: lining-nums tabular-nums; }
.dna-bar-track { height: 10px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; }
.dna-bar-fill { height: 100%; border-radius: 2px; transition: width 1s ease; min-width: 2px; }
.dna-bar-pct { font-family: var(--tsh-fb); font-size: .75rem; color: var(--tsh-text2); text-align: right; }

.tsh-dna-summary {
  font-size: .82rem; color: var(--tsh-text2); line-height: 1.6;
  padding: 12px 14px; background: rgba(201,169,110,.04);
  border-left: 3px solid var(--tsh-gold); border-radius: 0 4px 4px 0;
}

@media (max-width: 640px) {
  .tsh-hexagon-wrap { max-width: 300px; }
  .ch-han { font-size: .72rem; }
  .tsh-dna-top3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .tsh-dna-card { padding: 10px 6px; }
  .dna-num { font-size: 1.4rem; }
  .tsh-dna-row-bar { gap: 6px; }
  .dna-bar-label { font-size: .72rem; }
}

/* ── Personal Year Formula Box ── */
.tsh-py-formula {
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(201,169,110,.05);
  border: 1px solid rgba(201,169,110,.15);
  border-left: 3px solid var(--tsh-gold);
  border-radius: 0 4px 4px 0;
  padding: 10px 14px; margin-bottom: 12px;
  font-size: .78rem;
}
.pyf-label { color: var(--tsh-gold); font-weight: 600; font-family: var(--tsh-fb); }
.pyf-calc  { color: var(--tsh-text2); font-family: 'Lexend Deca', system-ui, sans-serif; letter-spacing: .03em; }

/* ── Key Card enhanced (Chìa Khóa Bản Thể) ── */
.tsh-key-num-col { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.tsh-key-letter { font-size:.8rem; font-family:'Lexend Deca', sans-serif; color:rgba(201,169,110,.65); letter-spacing:.06em; margin-top:-2px; }
.tsh-key-card .ch-lbl { display:flex; align-items:center; justify-content:space-between; }
.tsh-key-icon-pill { font-size:.9rem; opacity:.8; margin-left:6px; flex-shrink:0; line-height:1; }
/* Inline SVG icon sizing — replaces emoji across all icon contexts */
.tsh-key-icon-pill svg, .tsh-ux-toc-icon svg, .tsh-toc-pi-icon svg,
.tsh-si-icon svg, .tsh-core4-lbl svg {
  width: 1.15em; height: 1.15em;
  display: inline-block; vertical-align: middle;
  overflow: visible;
}
.tsh-key-domain { font-size:.8rem; color:rgba(201,169,110,.8); font-style:italic; margin-top:5px; line-height:1.4; }
/* ── Formula row: Chữ → Số (letter cards) ── */
.tsh-key-formula {
  display: flex; align-items: center; gap: 7px;
  margin-top: 9px; flex-wrap: wrap;
}
.tsh-kf-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  border: 1px solid rgba(201,169,110,.4);
  border-radius: 3px;
  background: rgba(201,169,110,.08);
  font-family: 'Lexend Deca', sans-serif;
  font-size: .95rem; font-weight: 700;
  color: var(--tsh-gold-hi); letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgba(201,169,110,.06);
}
.tsh-kf-arrow { flex-shrink: 0; display: block; }
.tsh-kf-val {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 1.1rem; font-weight: 900; line-height: 1;
}
.tsh-kf-sep { color: rgba(201,169,110,.25); font-size: .8rem; }
.tsh-kf-method {
  font-size: .64rem; color: rgba(201,169,110,.5);
  letter-spacing: .07em; font-family: var(--tsh-fb);
  text-transform: uppercase;
}
/* ── Source chip: date / fullname / combined cards ── */
.tsh-key-src {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 9px; padding: 4px 10px 4px 8px;
  background: rgba(201,169,110,.05);
  border: 1px solid rgba(201,169,110,.14);
  border-left: 2px solid rgba(201,169,110,.35);
  border-radius: 0 3px 3px 0;
  font-size: .69rem; color: rgba(201,169,110,.65);
  font-family: var(--tsh-fb); letter-spacing: .04em; line-height: 1.4;
}
.tsh-kf-ico { flex-shrink: 0; display: block; }

/* ── Card methodology note (E-E-A-T) ── */
.tsh-card-meth {
  font-size: .72rem; color: var(--tsh-text2); opacity: .75;
  border-left: 2px solid rgba(201,169,110,.25);
  padding: 4px 10px; margin: 0 0 10px;
  line-height: 1.5;
}
/* ── Card source badge ── */
.tsh-card-src {
  font-size: .7rem; color: var(--tsh-text2);
  padding: 4px 10px; margin: 0 0 12px;
  border-left: 2px solid rgba(201,169,110,.3);
  line-height: 1.4;
}
/* ── Core 4 Dashboard ── */
.tsh-core4-dash {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 0 0 14px;
}
.tsh-core4-item {
  background: rgba(255,255,255,.04); border: 1px solid var(--tsh-border);
  border-top: 2px solid transparent; border-radius: 4px; padding: 14px 10px;
  text-align: center; position: relative;
  box-shadow: inset 0 0 0 3px rgba(12,12,10,.9), inset 0 0 0 4px rgba(201,169,110,.04);
  transition: box-shadow .2s;
}
.tsh-core4-item::before {
  content: ''; position: absolute; inset: 4px;
  border: 1px solid rgba(201,169,110,.07); pointer-events: none;
}
.tsh-core4-num {
  font-family: 'Lexend Deca', sans-serif; font-size: 2.2rem; font-weight: 700; line-height: 1; margin-bottom: 6px;
}
.tsh-core4-lbl {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; font-weight: 600;
}
.tsh-core4-desc { font-size: .66rem; color: var(--tsh-text2); }
/* Dominant number alert */
.tsh-core4-dom {
  border: 1px solid; border-radius: 4px; padding: 9px 14px; margin: 0 0 14px;
  font-size: .78rem; line-height: 1.55; background: rgba(255,255,255,.02);
}
@media (max-width: 580px) {
  .tsh-core4-dash { grid-template-columns: repeat(2,1fr); }
  .tsh-core4-num { font-size: 1.8rem; }
}

/* ── Personal Cycle: "số năm dùng để làm gì" ── */
.tsh-py-chain {
  font-size: .78rem; color: var(--tsh-text2); line-height: 1.6;
  background: rgba(201,169,110,.06);
  border: 1px solid rgba(201,169,110,.18);
  border-radius: 4px;
  padding: 9px 14px; margin: 10px 0 14px;
}
.tsh-py-chain strong { color: var(--tsh-gold); }
.pyc-item {
  display: inline-block;
  padding: 1px 6px; margin: 0 1px;
  border: 1px solid rgba(201,169,110,.3); border-radius: 2px;
  font-size: .72rem; color: var(--tsh-gold); font-weight: 600;
}

/* ── Personal Cycle: mini formula per month/day row ── */
.tsh-py-formula-mini {
  font-size: .72rem; color: var(--tsh-text2);
  background: rgba(255,255,255,.03);
  border-left: 2px solid rgba(201,169,110,.2);
  padding: 3px 8px; margin: 4px 0 6px;
  line-height: 1.4;
}
.tsh-py-formula-mini strong { color: var(--tsh-gold); }

/* ── Pinnacles: cách tính note ── */
.tsh-pin-calc-note {
  font-size: .73rem; color: var(--tsh-text2);
  padding: 8px 14px; margin-top: 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06); border-radius: 4px;
  line-height: 1.6;
}
.tsh-pin-calc-note strong { color: var(--tsh-text1); }

/* ═══ NT 50: Closing — "Cửa Sau" ═══ */
.tsh-closing { max-width: 100%; margin: 48px auto 0; padding: 0 16px; } /* FIX CV8: fill cosmos width */
.tsh-cl-header {
  font-family: 'Lexend Deca', system-ui, sans-serif; font-size: .72rem; font-weight: 600;
  color: var(--tsh-gold); letter-spacing: .18em; text-transform: uppercase;
  text-align: center; margin-bottom: 20px;
}
/* Grid: Bản Đồ Số */
.tsh-cl-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 32px;
}
.tsh-cl-num {
  display: flex; flex-direction: column; align-items: center;
  min-width: 72px; padding: 10px 14px;
  background: rgba(255,255,255,.02); border: 1px solid rgba(201,169,110,.15); border-radius: 2px;
}
.tsh-cl-num--lp {
  min-width: 130px; padding: 20px 26px;
  background: linear-gradient(160deg, rgba(201,169,110,.10) 0%, rgba(201,169,110,.03) 100%);
  border: 1px solid rgba(201,169,110,.65);
  box-shadow: 0 0 28px rgba(201,169,110,.14), inset 0 0 24px rgba(201,169,110,.05);
  position: relative;
}
.tsh-cl-num--lp::before {
  content: ''; position: absolute; inset: 4px;
  border: 1px solid rgba(201,169,110,.22); border-radius: 1px; pointer-events: none;
}
.tsh-cl-num__v {
  font-family: 'Lexend Deca', system-ui, sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1.1;
}
.tsh-cl-num--elem .tsh-cl-num__v { font-size: .95rem; font-weight: 600; }
.tsh-cl-num__l {
  font-family: 'Lexend Deca', system-ui, sans-serif; font-size: .6rem;
  color: var(--tsh-text2); margin-top: 4px; text-align: center;
}
.tsh-cl-num--lp .tsh-cl-num__l {
  color: var(--tsh-gold); font-size: .65rem; letter-spacing: .05em; opacity: .85;
}
/* Dominant Number Pattern Alert */
.tsh-cl-dominant {
  display:flex; align-items:center; gap:10px;
  margin:12px 0 0; padding:10px 16px;
  border:1px solid; border-radius:4px;
  font-size:.78rem; color:var(--tsh-text);
  background:rgba(201,169,110,.04);
  box-shadow:inset 0 0 0 3px rgba(12,12,10,.9),inset 0 0 0 4px rgba(201,169,110,.04);
  line-height:1.5;
}
.tsh-cl-dom-icon { font-size:1.1rem; flex-shrink:0; }
.tsh-cl-dominant em { font-style:normal; color:var(--tsh-text1); }

/* Lời Nhắn */
.tsh-cl-msg {
  text-align: center; margin: 0 auto 32px; max-width: 600px;
  padding: 24px 28px; background: rgba(201,169,110,.03);
  border: 1px solid rgba(201,169,110,.18); border-radius: 2px;
}
.tsh-cl-msg__ico { color: var(--tsh-gold); font-size: 1.3rem; margin-bottom: 10px; }
.tsh-cl-msg__txt {
  font-family: 'Lexend Deca', system-ui, sans-serif; font-size: .88rem;
  color: var(--tsh-text1); line-height: 1.75; font-style: italic; margin: 0;
}
.tsh-cl-msg__sign {
  font-family: 'Lexend Deca', system-ui, sans-serif; font-size: .68rem;
  color: var(--tsh-gold); margin-top: 14px; opacity: .6;
}
/* CTA */
.tsh-cl-cta {
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 32px;
}
.tsh-cl-btn {
  font-family: 'Lexend Deca', system-ui, sans-serif; font-size: .78rem; font-weight: 600;
  padding: 11px 26px; border-radius: 2px; text-decoration: none;
  transition: all .25s; cursor: pointer; display: inline-block;
}
.tsh-cl-btn--outline {
  background: transparent; color: var(--tsh-gold);
  border: 1px solid rgba(201,169,110,.4);
}
.tsh-cl-btn--outline:hover {
  background: rgba(201,169,110,.08); border-color: rgba(201,169,110,.7);
}
.tsh-cl-btn--gold {
  background: linear-gradient(135deg, #c9a96e, #e8c97a); color: #0c0c0a; border: none;
}
.tsh-cl-btn--gold:hover { background: linear-gradient(135deg, #e8c97a, #f5d58c); }
/* E-E-A-T Methodology bar */
.tsh-cl-eeat {
  text-align: center; padding: 18px 0 4px;
  border-top: 1px solid rgba(201,169,110,.12);
}
.tsh-cl-eeat__title {
  font-family: 'Lexend Deca', system-ui, sans-serif; font-size: .6rem;
  color: var(--tsh-text2); letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 10px; opacity: .55;
}
.tsh-cl-eeat__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tsh-cl-eeat__tags span {
  font-family: 'Lexend Deca', system-ui, sans-serif; font-size: .64rem;
  color: var(--tsh-text2); padding: 4px 10px;
  background: rgba(255,255,255,.02); border: 1px solid rgba(201,169,110,.12);
  border-radius: 2px; opacity: .6;
}
@media (max-width: 480px) {
  .tsh-cl-num { min-width: 60px; padding: 8px 10px; }
  .tsh-cl-num--lp { min-width: 80px; }
  .tsh-cl-num__v { font-size: 1.3rem; }
  .tsh-cl-num--lp .tsh-cl-num__v { font-size: 1.8rem; }
  .tsh-cl-msg { padding: 18px 16px; }
  .tsh-cl-cta { flex-direction: column; align-items: center; }
}

/* ══════════════════════════════════════════════════════
   Life Path Extra — Block 1: Tóm tắt 30 giây
   ══════════════════════════════════════════════════════ */
.tsh-lp-summary {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: rgba(201,169,110,.05);
  border: 1px solid rgba(201,169,110,.22);
  border-radius: 4px;
}
.tsh-lps-label {
  font-family: 'Lexend Deca', system-ui, sans-serif;
  font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tsh-gold); margin-bottom: 10px; opacity: .85;
}
.tsh-lps-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; }
.tsh-lps-chip {
  font-family: 'Lexend Deca', system-ui, sans-serif;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  padding: 4px 11px;
  background: rgba(255,255,255,.03);
  border: 1px solid; border-radius: 2px;
  transition: background .2s;
}
.tsh-lps-chip:hover { background: rgba(255,255,255,.07); }
.tsh-lps-hint {
  font-size: .68rem; color: var(--tsh-text2); opacity: .65;
  line-height: 1.5; margin-top: 4px;
}


/* ── DNA Card desc (Personality Groups) ── */
.dna-desc {
  font-size: .68rem; color: var(--tsh-text2); line-height: 1.5;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid rgba(201,169,110,.1);
  text-align: left;
}

/* ── Lo Shu — clickable cells ── */
.tsh-lc.has-ni { cursor: pointer; }
.tsh-lc.has-ni:hover { background: rgba(201,169,110,.1); border-color: rgba(201,169,110,.35); }
.tsh-lc.ls-sel { background: rgba(201,169,110,.14) !important; border-color: var(--tsh-gold) !important; }
.lc-ni-hint {
  display: block; font-size: .55rem; color: var(--tsh-gold-hi); opacity: .7;
  margin-top: 2px; line-height: 1;
}

/* ── Lo Shu Number Detail Panel ── */
.tsh-ls-num-detail {
  display: none;
  margin: 10px 0 14px;
  border: 1px solid rgba(201,169,110,.2);
  border-radius: var(--tsh-r);
  background: rgba(255,255,255,.03);
  overflow: hidden;
}
.tsh-lsd-inner { padding: 14px 16px; }
.tsh-lsd-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding-left: 12px; margin-bottom: 10px;
  position: relative;
}
.tsh-lsd-num {
  font-family: 'Lexend Deca', system-ui, sans-serif;
  font-size: 2rem; font-weight: 700; line-height: 1;
  flex-shrink: 0;
}
.tsh-lsd-meta { flex: 1; min-width: 0; }
.tsh-lsd-title {
  font-size: .85rem; font-weight: 600;
  color: var(--tsh-text1); margin-bottom: 3px;
}
.tsh-lsd-cnt {
  font-size: .72rem; color: var(--tsh-gold); opacity: .85;
}
.tsh-lsd-close {
  background: none; border: none; color: var(--tsh-text3);
  cursor: pointer; font-size: .9rem; padding: 0 4px;
  flex-shrink: 0; line-height: 1;
}
.tsh-lsd-close:hover { color: var(--tsh-text1); }
.tsh-lsd-desc {
  font-size: .8rem; color: var(--tsh-text2); line-height: 1.7;
  margin: 0 0 8px;
}
.tsh-lsd-advice {
  font-size: .75rem; color: var(--tsh-text2); line-height: 1.6;
  padding: 8px 10px;
  background: rgba(201,169,110,.06);
  border-radius: var(--tsh-r2);
}
.tsh-lsd-advice strong { color: var(--tsh-gold-hi); }

/* ══════════════════════════════════════════
   SVG ENERGY RING — vòng năng lượng số học
══════════════════════════════════════════ */
.tsh-num-ring-wrap {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0; width: 60px;
}
.tsh-num-ring-svg {
  position: absolute; top: 0; left: 0;
  pointer-events: none;
}
/* ch-num sits centered OVER the SVG ring */
.tsh-num-ring-wrap .ch-num {
  position: relative; z-index: 1;
  width: 60px; height: 60px; min-width: 60px;
  display: flex; align-items: center; justify-content: center;
}
/* Wide numbers (e.g. "5, 9") — smaller font to fit */
.tsh-num-ring-wrap .ch-num.ch-num-wide {
  font-size: 1.3rem !important;
}
/* Level label: NHẸ / VỪA / MẠNH / SỐ CHỦ */
.tsh-num-level {
  position: relative; z-index: 1;
  font-size: .53rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(201,169,110,.45);
  margin-top: 1px; line-height: 1; text-align: center;
  white-space: nowrap;
}
/* Arc draw animation */
@keyframes tshArcDraw {
  from { stroke-dashoffset: 163.36; }
  to   { stroke-dashoffset: var(--arc-offset, 163.36); }
}
.tsh-energy-arc {
  transform-origin: 30px 30px;
  transform: rotate(-90deg);
  animation: tshArcDraw 1.4s cubic-bezier(.4,0,.2,1) 0.35s both;
}

/* ══════════════════════════════════════════════════
   GIA ĐÌNH — Family Section Upgrade
   Cây Gia Đình SVG + Harmony Gauge + Rich Cards
   ══════════════════════════════════════════════════ */

/* ── Animations ── */
@keyframes tshFamRootPulse {
  0%,100% { opacity: .55; }
  50%     { opacity: 1;   }
}
@keyframes tshFamLeafSway {
  0%,100% { transform: rotate(-1.2deg); transform-origin: 50% 100%; }
  50%     { transform: rotate(1.2deg);  transform-origin: 50% 100%; }
}
@keyframes tshFamTrunkGlow {
  0%,100% { opacity: .22; }
  50%     { opacity: .38; }
}
.tshFamRP { animation: tshFamRootPulse 3.2s ease-in-out infinite; }
.tshFamLS { animation: tshFamLeafSway  4.5s ease-in-out infinite; }
.tshFamTG { animation: tshFamTrunkGlow 2.8s ease-in-out infinite; }

/* ── Cây Gia Đình wrapper ── */
.tsh-fam-tree-wrap {
  background: rgba(255,255,255,.022);
  border: 1px solid rgba(201,169,110,.18);
  border-radius: var(--tsh-r);
  padding: 20px 20px 16px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.tsh-fam-tree-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(201,169,110,.04) 0%, transparent 70%);
  pointer-events: none;
}
/* Corner L-brackets */
.tsh-fam-tree-wrap::after {
  content: '';
  position: absolute;
  top: 6px; left: 6px;
  width: 18px; height: 18px;
  border-top: 1.5px solid rgba(201,169,110,.35);
  border-left: 1.5px solid rgba(201,169,110,.35);
  pointer-events: none;
}
.tsh-fam-tree-hd {
  text-align: center;
  margin-bottom: 16px;
}
.tsh-fam-tree-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tsh-gold);
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.tsh-fam-tree-sub {
  font-size: .75rem;
  color: var(--tsh-text2);
  letter-spacing: .06em;
}
.tsh-fam-tree-svg {
  width: 100%;
  max-width: 420px;
  display: block;
  margin: 0 auto;
  overflow: visible;
}
/* Legend row */
.tsh-fam-tree-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(201,169,110,.1);
}
.tsh-fam-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.tsh-fam-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: .85;
}

/* ── Harmony block ── */
.tsh-fam-harmony {
  background: rgba(255,255,255,.022);
  border: 1px solid rgba(201,169,110,.18);
  border-radius: var(--tsh-r);
  padding: 20px;
  margin-bottom: 14px;
}
.tsh-fam-harmony-hd {
  text-align: center;
  margin-bottom: 16px;
}
.tsh-fam-harmony-title {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tsh-gold);
  margin-bottom: 4px;
}
.tsh-fam-harmony-sub {
  font-size: .73rem;
  color: var(--tsh-text2);
  letter-spacing: .05em;
}
.tsh-fam-harmony-body {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
/* Ring */
.tsh-fam-ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.tsh-fam-ring-svg {
  width: 112px;
  height: 112px;
}
.tsh-fam-ring-label {
  font-size: .7rem;
  font-weight: 600;
  color: var(--tsh-text2);
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.4;
}
/* Bars */
.tsh-fam-bars {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tsh-fam-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tsh-fam-bar-info {
  display: flex;
  flex-direction: column;
  min-width: 110px;
  max-width: 120px;
}
.tsh-fam-bar-label {
  font-size: .8rem;
  font-weight: 700;
  color: var(--tsh-text1);
  white-space: nowrap;
}
.tsh-fam-bar-sub {
  font-size: .68rem;
  color: var(--tsh-text3);
  margin-top: 1px;
}
.tsh-fam-bar-track {
  flex: 1;
  height: 7px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  overflow: hidden;
}
.tsh-fam-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
}
.tsh-fam-bar-val {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  min-width: 28px;
  text-align: right;
}
/* Synthesis */
.tsh-fam-synthesis {
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(201,169,110,.06);
  border-left: 2px solid rgba(201,169,110,.4);
  border-radius: 0 var(--tsh-r2) var(--tsh-r2) 0;
  font-size: .85rem;
  line-height: 1.75;
  color: var(--tsh-text);
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .tsh-fam-harmony-body { flex-direction: column; align-items: stretch; }
  .tsh-fam-ring-wrap    { flex-direction: row; gap: 16px; align-items: center; }
  .tsh-fam-ring-svg     { width: 80px; height: 80px; }
  .tsh-fam-bar-info     { min-width: 90px; max-width: 90px; }
  .tsh-fam-tree-legend  { gap: 8px 16px; }
}

/* ════════════════════════════════════════════
   TÀI CHÍNH — Full Upgrade (Gauge + Pillars + Timeline + Synthesis)
════════════════════════════════════════════ */
/* Shared section caption */
.tsh-fin-cap {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tsh-text2);
  margin-bottom: 10px;
}

/* == VIZ ROW: Gauge + Pillars == */
.tsh-fin-viz {
  display: flex;
  gap: 0;                        /* no gap — separator handles spacing */
  align-items: stretch;          /* both cols same height */
  background: rgba(255,255,255,.018);
  border: 1px solid rgba(201,169,110,.12);
  border-radius: 4px;
  padding: 0;
  margin-bottom: 14px;
  overflow: hidden;
}

/* Gauge wrapper */
.tsh-fin-gauge-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
  padding: 20px 16px 16px;
  border-right: 1px solid rgba(201,169,110,.12);
}
.tsh-fin-gauge-svg {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
}
.tsh-fin-gauge-lbl {
  font-family: 'Playfair Display', serif;
  font-size: .92rem;
  font-weight: 700;
  text-align: center;
  margin-top: 2px;
}

/* Pillars wrapper */
.tsh-fin-pillars-wrap {
  flex: 1;
  min-width: 0;
  max-width: 380px;              /* prevent stretching too wide on desktop */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 20px 16px;
}
.tsh-fin-pillars {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  height: 100px;
  justify-content: center;       /* center 3 bars instead of stretching */
}
.tsh-fin-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;                   /* fixed width per pillar, no flex:1 stretch */
}
.tsh-fin-p-track {
  width: 48px;
  height: 100px;
  display: flex;
  align-items: flex-end;
}
.tsh-fin-p-bar {
  width: 100%;
  height: 0;
  border-radius: 4px 4px 0 0;
  border: 1px solid;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 5px;
  overflow: hidden;
  min-height: 0;
  box-shadow: 0 -4px 12px rgba(0,0,0,.3);
}
.tsh-fin-p-num {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
}
.tsh-fin-p-lbl {
  font-family: 'Playfair Display', serif;
  font-size: .73rem;
  font-weight: 600;
  color: var(--tsh-text);
  text-align: center;
  margin-top: 5px;
}
.tsh-fin-p-src {
  font-size: .6rem;
  color: var(--tsh-text3);
  text-align: center;
  margin-top: 2px;
}

/* == 3-YEAR TIMELINE == */
.tsh-fin-timeline {
  margin-bottom: 14px;
}
.tsh-fin-tl-row {
  display: grid;
  grid-template-columns: 1fr 1.18fr 1fr;
  gap: 10px;
}
.tsh-fin-yr {
  padding: 14px 12px;
  border-radius: 4px;
  border: 1px solid rgba(201,169,110,.15);
  background: rgba(255,255,255,.015);
}
.tsh-fin-yr--empty {
  border: 1px dashed rgba(201,169,110,.08);
  background: none;
}
.tsh-fin-yr--cur {
  border-width: 2px;
  border-color: rgba(245,213,140,.35);
  background: rgba(201,169,110,.05);
}
.tsh-fin-yr--good  { border-color: rgba(201,169,110,.28); }
.tsh-fin-yr--mid   { border-color: rgba(251,191,36,.22);  }
.tsh-fin-yr--caution { border-color: rgba(148,163,184,.18); }
.tsh-fin-yr-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.tsh-fin-yr-period {
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tsh-text2);
}
.tsh-fin-yr-num {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  width: 26px;
  height: 26px;
  border: 1px solid;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.35);
  flex-shrink: 0;
}
.tsh-fin-yr-year {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .72rem;
  color: var(--tsh-text2);
  margin-bottom: 5px;
}
.tsh-fin-yr-tag {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 8px;
}
.tsh-fin-yr-tag--good    { background: rgba(201,169,110,.14); color: #c9a96e; }
.tsh-fin-yr-tag--mid     { background: rgba(251,191,36,.12);  color: #f59e0b; }
.tsh-fin-yr-tag--caution { background: rgba(148,163,184,.1);  color: #94a3b8; }
.tsh-fin-yr-txt {
  font-size: .8rem;
  line-height: 1.68;
  color: var(--tsh-text2);
}
.tsh-fin-yr--cur .tsh-fin-yr-txt { color: var(--tsh-text); }

/* == SYNTHESIS CARD == */
.tsh-fin-synth {
  background: rgba(201,169,110,.04);
  border: 1px solid rgba(201,169,110,.2);
  border-radius: 4px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.tsh-fin-synth-hd {
  font-family: 'Playfair Display', serif;
  font-size: .93rem;
  font-weight: 700;
  color: var(--tsh-gold-hi);
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.tsh-fin-synth-body {
  font-size: .9rem;
  line-height: 1.82;
  color: var(--tsh-text);
}

/* == SEPARATOR == */
.tsh-fin-sep {
  font-family: 'Playfair Display', serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tsh-text2);
  margin: 18px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(201,169,110,.1);
}

/* == RESPONSIVE == */
@media (max-width: 620px) {
  .tsh-fin-viz          { flex-direction: column; }
  .tsh-fin-gauge-wrap   { width: 100%; border-right: none; border-bottom: 1px solid rgba(201,169,110,.12); }
  .tsh-fin-gauge-svg    { max-width: 200px; }
  .tsh-fin-pillars-wrap { width: 100%; max-width: 100%; }
  .tsh-fin-tl-row       { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   PATCH: Coin ring animation + Element upgrade
   ═══════════════════════════════════════════════════ */

/* Bagua coin — dual counter-rotating rings */
.tsh-coin-ring-dash {
  transform-box: fill-box;
  transform-origin: center;
  animation: tshAstroSpin 90s linear infinite;
  will-change: transform;
}
.tsh-coin-ring-inner {
  transform-box: fill-box;
  transform-origin: center;
  animation: tshAstroSpin 70s linear infinite reverse;
  will-change: transform;
}


/* Closing gem — static glow */
.tsh-syn-close-gem {
  color: #c9a96e;
  filter: drop-shadow(0 0 10px rgba(201,169,110,.4));
  opacity: 0.95;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE PERFORMANCE OVERRIDES — điện thoại yếu / GPU thấp
   Tất cả màn hình ≤ 768px: tắt các hiệu ứng nặng nhất
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .tsh-form-box {
    background: rgba(12,12,10,.95) !important;
  }
  .tsh-cine {
    background: rgba(8,8,6,.98) !important;
  }
  .tsh-chapter-nav {
    background: rgba(10,10,8,.97) !important;
  }
  .tsh-btt {
    background: rgba(12,12,10,.96) !important;
  }
  .tsh-ux-dropdown__menu {
    background: rgba(14,12,9,.99) !important;
  }

  /* ── CRITICAL: Tắt orb blur (filter:blur(100px) → RAM spike 30-50MB) ── */
  .tsh-orb { display: none !important; }

  /* ── CRITICAL: Giảm cinematic rings 5→2 (GPU overload) ── */
  .tsh-cine-ring-1,
  .tsh-cine-ring-2,
  .tsh-cine-ring-3 { display: none !important; }
  .tsh-cine-ring-4 { width: 110px; height: 110px; }
  .tsh-cine-ring-5 { width: 65px;  height: 65px; }

  /* ── HIGH: Giảm sparks 12→6 ── */
  .tsh-cine-spark:nth-child(n+7) { display: none !important; }

  /* FIX CP1: Giảm floating nums 10→4 trên mobile (GPU/CPU drain) ── */
  .tsh-fn:nth-child(n+5) { display: none !important; will-change: auto; }

  /* ── HIGH: Trigrams SVG nhỏ hơn trên mobile ── */
  .tsh-cine-tri svg { width:28px; height:22px; }
  .tsh-cine-tri { transform: rotate(calc(var(--ti)*45deg)) translateY(-130px) rotate(calc(var(--ti)*-45deg)) scale(.3); }
  .tsh-cine.phase-3 .tsh-cine-tri { transform: rotate(calc(var(--ti)*45deg)) translateY(-130px) rotate(calc(var(--ti)*-45deg)) scale(1); }
  /* ── Seal nhỏ hơn trên mobile ── */
  .tsh-cine-seal svg { width:110px; height:110px; }

  /* ── HIGH: Bỏ translateY trên scroll reveal (tiết kiệm GPU layer) ── */
  .tsh-reveal { transform: none !important; }
  .tsh-reveal.tsh-revealed { transform: none !important; }

  /* ── MEDIUM: Bỏ drop-shadow filter trên SVG elements ── */
  .tsh-syn-close-gem { filter: none !important; }

  /* ── MEDIUM: Button fire effect nhẹ hơn trên mobile ── */
  .tsh-btn-submit.tsh-btn--fired {
    animation: tshBtnFireMobile 2s ease-in-out forwards !important;
  }
  @keyframes tshBtnFireMobile {
    0%   { box-shadow: 0 0 0px rgba(201,169,110,0); }
    35%  { box-shadow: 0 0 22px rgba(201,169,110,.4); }
    70%  { box-shadow: 0 0 35px rgba(201,169,110,.5); }
    100% { box-shadow: 0 0 45px rgba(201,169,110,.55); }
  }
  /* Ring cũng nhỏ hơn trên mobile */
  .tsh-btn-ring { border-width: 1px; }
}

/* ══════════════════════════════════════════════════════════════
   PYTHAGORAS WITNESS — Two-column hero layout
   Portrait (left) + Form (right) — Desktop flex-row, Mobile column
   ══════════════════════════════════════════════════════════════ */

/* ── Main two-column container ── */
.tsh-pyth-layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 40px;
  max-width: 100%; /* FIX CV8: fill cosmos width */
  width: 100%;
}

/* ── Portrait column ── */
.tsh-pyth-col--portrait {
  flex: 0 0 290px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Form column ── */
.tsh-pyth-col--form {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Vertical meander divider ── */
.tsh-pyth-divider {
  flex-shrink: 0;
  width: 1px;
  align-self: stretch;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(201,169,110,.25) 15%,
    rgba(201,169,110,.4) 50%,
    rgba(201,169,110,.25) 85%,
    transparent 100%
  );
  position: relative;
}
/* Diamond ornament at mid-divider */
.tsh-pyth-divider::before {
  content: '◆';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: .55rem;
  color: rgba(201,169,110,.5);
  background: var(--tsh-bg, #0c0c0a);
  padding: 4px 0;
  line-height: 1;
}

/* ── Portrait frame with L-brackets ── */
.tsh-pyth-frame {
  position: relative;
  width: 260px;
  margin-bottom: 20px;
  /* Double inset border — Mystic Imperial Fusion */
  border: 1px solid rgba(201,169,110,.45);
  outline: 1px solid rgba(201,169,110,.15);
  outline-offset: 5px;
  box-shadow:
    0 0 40px rgba(201,169,110,.06),
    inset 0 0 0 1px rgba(201,169,110,.08);
}

/* L-bracket corners */
.tsh-pyth-brk {
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 2;
}
.tsh-pyth-brk--tl { top:-5px;  left:-5px;  border-top:1.5px solid #c9a96e; border-left:1.5px solid #c9a96e; }
.tsh-pyth-brk--tr { top:-5px;  right:-5px; border-top:1.5px solid #c9a96e; border-right:1.5px solid #c9a96e; }
.tsh-pyth-brk--bl { bottom:-5px; left:-5px; border-bottom:1.5px solid #c9a96e; border-left:1.5px solid #c9a96e; }
.tsh-pyth-brk--br { bottom:-5px; right:-5px; border-bottom:1.5px solid #c9a96e; border-right:1.5px solid #c9a96e; }

/* Portrait image wrapper */
.tsh-pyth-img-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: block;
}
.tsh-pyth-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  /* Engraving gold tone */
  filter: sepia(.55) brightness(.82) contrast(1.15) saturate(.65);
  transition: filter .4s;
}
.tsh-pyth-frame:hover .tsh-pyth-img {
  filter: sepia(.4) brightness(.9) contrast(1.1) saturate(.8);
}

/* ── Historical credibility info ── */
.tsh-pyth-info {
  position: relative;
  text-align: center;
  width: 100%;
}
.tsh-pyth-name {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #c9a96e;
  letter-spacing: .22em;
  margin: 0 0 5px;
  text-shadow: 0 0 24px rgba(201,169,110,.35);
}
/* PT tools — Jade Imperial Tablet upgrade */
.hh-cosmos .tsh-pyth-name {
  position: relative;
  display: inline-block;
  padding: 6px 18px 5px;
  border: 1px solid rgba(201,169,110,.12);
  color: transparent;
  text-shadow: none;
  background: linear-gradient(110deg,
    rgba(160,130,80,1) 0%, rgba(201,169,110,1) 20%, rgba(220,190,130,1) 40%,
    rgba(255,255,255,.85) 50%, rgba(220,190,130,1) 60%, rgba(201,169,110,1) 80%,
    rgba(160,130,80,1) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ptTitleShimmer 5s ease-in-out infinite;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.08)) drop-shadow(0 -1px 0 rgba(0,0,0,.4)) drop-shadow(0 0 18px rgba(201,169,110,.25));
}
/* L-bracket corners — PT tools only */
.hh-cosmos .tsh-pyth-name::before,
.hh-cosmos .tsh-pyth-name::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-style: solid;
  border-color: rgba(201,169,110,.3);
  pointer-events: none;
}
.hh-cosmos .tsh-pyth-name::before {
  top: -1px; left: -1px;
  border-width: 1.5px 0 0 1.5px;
}
.hh-cosmos .tsh-pyth-name::after {
  bottom: -1px; right: -1px;
  border-width: 0 1.5px 1.5px 0;
}
@keyframes ptTitleShimmer {
  0%   { background-position: 100% 0; }
  50%  { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}
.tsh-pyth-dates {
  font-size: .7rem;
  color: var(--tsh-text2);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 10px;
  opacity: .7;
}
.hh-cosmos .tsh-pyth-dates {
  font-size: .72rem;
  letter-spacing: .12em;
  margin: 0 0 12px;
  opacity: .8;
}
.tsh-han {
  font-family: 'Noto Serif SC', 'SimSun', serif;
  font-size: .88rem;
  letter-spacing: .06em;
  text-shadow: 0 0 12px currentColor;
  animation: hanPulse 4s ease-in-out infinite alternate;
}
.tsh-dates-sep {
  display: inline-block;
  width: 8px;
  height: 8px;
  vertical-align: -.05em;
  margin: 0 4px;
  opacity: .5;
}
@keyframes hanPulse {
  0%   { opacity: .5; text-shadow: 0 0 8px currentColor; }
  100% { opacity: .75; text-shadow: 0 0 16px currentColor; }
}
.tsh-pyth-badge-row {
  margin-bottom: 14px;
}
.tsh-pyth-badge {
  display: inline-block;
  border: 1px solid rgba(201,169,110,.35);
  color: rgba(201,169,110,.8);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 14px;
  font-family: 'Be Vietnam Pro', sans-serif;
}
/* PT tools — Annotated Jade Talisman badges */
.hh-cosmos .tsh-pyth-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  border: none;
  border-top: 2px solid currentColor;
  border-left: 1px solid rgba(201,169,110,.15);
  border-right: 1px solid rgba(201,169,110,.15);
  border-bottom: 1px solid rgba(201,169,110,.15);
  padding: 5px 12px 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  transition: transform .2s ease, box-shadow .3s ease;
}
.hh-cosmos .tsh-pyth-badge:hover {
  transform: scale(1.04);
  box-shadow: 0 0 12px currentColor;
}
.tsh-badge-main {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.tsh-badge-hint {
  font-size: .5rem;
  opacity: .5;
  letter-spacing: .04em;
  font-style: italic;
  text-transform: none;
  white-space: nowrap;
}
.tsh-pyth-quote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: #f5d58c;
  margin: 0 0 14px;
  line-height: 1.55;
  text-shadow: 0 0 20px rgba(201,169,110,.2);
}
.tsh-pyth-qm {
  font-size: 1.5em;
  line-height: 0;
  vertical-align: -.3em;
  color: rgba(201,169,110,.45);
  font-style: normal;
}
/* PT tools — Ancient Decree Scroll upgrade */
.hh-cosmos .tsh-pyth-quote {
  position: relative;
  padding-left: 16px;
  line-height: 1.65;
  background: radial-gradient(ellipse at 30% 50%, rgba(201,169,110,.02), transparent 70%);
}
.hh-cosmos .tsh-pyth-quote::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  border-left: 1.5px solid rgba(201,169,110,.2);
  border-right: 1.5px solid rgba(201,169,110,.12);
  pointer-events: none;
}
.hh-cosmos .tsh-pyth-qm {
  font-size: 1.8em;
  animation: qmGlow 3s ease-in-out infinite alternate;
}
@keyframes qmGlow {
  0%   { opacity: .4; text-shadow: 0 0 6px rgba(201,169,110,.2); }
  100% { opacity: .6; text-shadow: 0 0 14px rgba(201,169,110,.35); }
}
.tsh-pyth-proofs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tsh-pyth-proof {
  font-size: .67rem;
  color: var(--tsh-text2);
  letter-spacing: .07em;
  opacity: .65;
}
/* PT tools — Energy Flow Timeline upgrade */
.hh-cosmos .tsh-pyth-proofs {
  gap: 6px;
}
.hh-cosmos .tsh-pyth-proof {
  font-size: .72rem;
  opacity: .75;
  transition: opacity .3s, color .3s;
}
.hh-cosmos .tsh-pyth-proof:hover {
  opacity: 1;
}
.hh-cosmos .tsh-proof-star {
  width: 14px;
  height: 14px;
  vertical-align: -.15em;
  margin-right: 2px;
}
/* PT tools — Golden dust particles */
.hh-cosmos .tsh-pyth-info::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 80%, rgba(201,169,110,.25), transparent),
    radial-gradient(1px 1px at 55% 85%, rgba(201,169,110,.18), transparent),
    radial-gradient(1px 1px at 82% 75%, rgba(201,169,110,.2), transparent);
  background-size: 100% 100%;
  animation: goldenDust 12s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes goldenDust {
  0%, 100% { transform: translateY(0); opacity: .3; }
  50%      { transform: translateY(-6px); opacity: .55; }
}

/* ── Tablet/Mobile: stack column, portrait compact ── */
@media (max-width: 1024px) {
  .tsh-pyth-layout {
    flex-direction: column;
    gap: 28px;
    max-width: 520px;
  }
  .tsh-pyth-col--portrait {
    flex: none;
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    text-align: left;
  }
  .tsh-pyth-frame {
    width: 110px;
    flex-shrink: 0;
    margin-bottom: 0;
  }
  .tsh-pyth-info {
    text-align: left;
  }
  .tsh-pyth-name { font-size: .85rem; letter-spacing: .14em; }
  .hh-cosmos .tsh-pyth-name { padding: 4px 12px 3px; }
  .hh-cosmos .tsh-pyth-name::before, .hh-cosmos .tsh-pyth-name::after { width: 5px; height: 5px; }
  .tsh-badge-hint { display: none; }
  .tsh-pyth-quote { font-size: .9rem; }
  .hh-cosmos .tsh-pyth-quote { padding-left: 12px; }
  .hh-cosmos .tsh-pyth-quote::before { width: 4px; }
  .tsh-pyth-proofs { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
  .hh-cosmos .tsh-pyth-info::after { opacity: .15; }
  .tsh-pyth-divider { display: none; }
  .tsh-pyth-col--form { width: 100%; }
}
@media (max-width: 480px) {
  .hh-cosmos .tsh-pyth-name::before, .hh-cosmos .tsh-pyth-name::after { display: none; }
  .hh-cosmos .tsh-pyth-name { border-color: transparent; padding: 0; margin-bottom: 4px; }
  .tsh-han { font-size: .78rem; }
  .hh-cosmos .tsh-pyth-info::after { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   PYTHAGORAS PORTRAIT IDENTITY — Tool 1: Scholar's Portal
   Doctor Strange portal rings + sacred geometry compass
   ══════════════════════════════════════════════════════════════ */

.tsh-pyth-col--portrait { position: relative; }

/* ── Frame: gold breathe glow + Greek key meander strips ── */
.tsh-pyth-frame {
  position: relative;
  z-index: 1;
  animation: tshFrameGlow 6s ease-in-out infinite alternate;
}
@keyframes tshFrameGlow {
  from { opacity: .85; }
  to   { opacity: 1; }
}
/* Greek key meander — top edge */
.tsh-pyth-frame::before {
  content: '';
  position: absolute;
  top: -14px; left: -5px; right: -5px;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cpath d='M0,8 L0,0 L7,0 L7,5 L4,5 L4,3 L3,3 L3,8 M7,0 L14,0 L14,8 L7,8 L7,3 L10,3 L10,5 L11,5 L11,0 M14,8 L14,0 L21,0 L21,5 L18,5 L18,3 L17,3 L17,8 M21,0 L28,0 L28,8 L21,8 L21,3 L24,3 L24,5 L25,5 L25,0' fill='none' stroke='%23c9a96e' stroke-width='.8' opacity='.55'/%3E%3C/svg%3E") repeat-x center;
  background-size: 28px 8px;
  z-index: 3;
  pointer-events: none;
}
/* Greek key meander — bottom edge */
.tsh-pyth-frame::after {
  content: '';
  position: absolute;
  bottom: -14px; left: -5px; right: -5px;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cpath d='M0,8 L0,0 L7,0 L7,5 L4,5 L4,3 L3,3 L3,8 M7,0 L14,0 L14,8 L7,8 L7,3 L10,3 L10,5 L11,5 L11,0 M14,8 L14,0 L21,0 L21,5 L18,5 L18,3 L17,3 L17,8 M21,0 L28,0 L28,8 L21,8 L21,3 L24,3 L24,5 L25,5 L25,0' fill='none' stroke='%23c9a96e' stroke-width='.8' opacity='.55'/%3E%3C/svg%3E") repeat-x center;
  background-size: 28px 8px;
  z-index: 3;
  pointer-events: none;
}

/* ── Floating numbers — Life Path master numbers ── */
.tsh-float-nums {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.tsh-fn {
  position: absolute;
  font-family: 'Lexend Deca', sans-serif;
  color: rgba(201,169,110, var(--fn-op, .1));
  font-size: var(--fn-size, 20px);
  left: var(--fn-x);
  bottom: -30px;
  opacity: 0;
  animation: tshFloatUp var(--fn-dur, 15s) var(--fn-delay, 0s) linear infinite;
  will-change: transform, opacity;
}
@keyframes tshFloatUp {
  0%   { opacity: 0; transform: translateY(0); }
  8%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-500px); }
}

/* FIX CP1: Giảm fn 10→5 trên desktop (GPU drain), mobile guard riêng ở ≤768px */
.tsh-fn:nth-child(n+6) { display: none !important; will-change: auto; }

/* Mobile: thu nhỏ floating numbers */
@media (max-width: 820px) {
  .tsh-fn { font-size: calc(var(--fn-size, 20px) * .7); }
}

/* ══════════════════════════════════════════════════════════════
   SUBTITLE TYPEWRITER — Parchment ancient style
   ══════════════════════════════════════════════════════════════ */

/* Override subtitle color → parchment cổ đại */
.tsh-form-sub {
  color: #d4c5a9;
  font-style: italic;
  font-family: 'Playfair Display', serif;
  letter-spacing: .025em;
  text-shadow: 0 0 28px rgba(201,169,110,.1);
  min-height: 1.65em; /* giữ chiều cao ổn định khi text thay đổi */
}

/* Gold blinking cursor */
.tsh-sub-cursor {
  display: inline-block;
  color: #c9a96e;
  font-style: normal;
  font-weight: 300;
  margin-left: 1px;
  animation: tshSubBlink .75s step-end infinite;
}
@keyframes tshSubBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════
   TƯƠNG HỢP SỐ CHỦ ĐẠO — Tab C Love (P4-S2)
   ════════════════════════════════════════════════════════════════ */
.tsh-compat-block {
  position: relative;
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.25rem 1rem;
  background: rgba(201,169,110,.04);
  border: 1px solid rgba(201,169,110,.18);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(201,169,110,.06);
}
.tsh-compat-block::before,
.tsh-compat-block::after {
  content: '';
  position: absolute;
  left: 6px; right: 6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,.3), transparent);
}
.tsh-compat-block::before { top: 4px; }
.tsh-compat-block::after  { bottom: 4px; }
.tsh-compat-header { margin-bottom: .85rem; text-align: center; }
.tsh-compat-my-elem {
  text-align: center;
  font-size: .82rem;
  color: var(--tsh-text2, #a89880);
  margin-bottom: 1rem;
  letter-spacing: .03em;
}
.tsh-compat-my-elem strong {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .9rem;
}
.tsh-compat-section { margin-bottom: .9rem; }
.tsh-compat-tier-label {
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .5rem;
  padding: .18rem .5rem;
  display: inline-block;
  border-radius: 3px;
}
.tsh-compat-tier--best      { color: #f5d58c; background: rgba(245,213,140,.08); border-left: 2px solid #f5d58c; }
.tsh-compat-tier--neutral   { color: #b8c4d0; background: rgba(184,196,208,.06); border-left: 2px solid #b8c4d0; }
.tsh-compat-tier--challenge { color: #a89880; background: rgba(168,152,128,.06); border-left: 2px solid #a89880; }
.tsh-compat-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.tsh-compat-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: .35rem .55rem .3rem;
  border-radius: 4px;
  border: 1px solid rgba(201,169,110,.2);
  background: rgba(12,12,10,.6);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  min-width: 3rem;
  user-select: none;
}
.tsh-compat-chip:hover { transform: translateY(-2px); }
.tsh-compat-chip--best {
  border-color: rgba(245,213,140,.45);
  background: rgba(245,213,140,.07);
  box-shadow: 0 0 10px rgba(245,213,140,.12);
}
.tsh-compat-chip--best:hover {
  box-shadow: 0 0 18px rgba(245,213,140,.28);
  border-color: rgba(245,213,140,.75);
}
.tsh-compat-chip--neutral {
  border-color: rgba(184,196,208,.3);
  background: rgba(184,196,208,.05);
}
.tsh-compat-chip--neutral:hover { border-color: rgba(184,196,208,.55); }
.tsh-compat-chip--challenge {
  border-color: rgba(168,152,128,.2);
  background: rgba(168,152,128,.04);
  opacity: .65;
}
.tsh-compat-chip--challenge:hover { opacity: 1; border-color: rgba(168,152,128,.45); }
.tsh-compat-num {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 1.1rem;
  line-height: 1;
  color: #c9a96e;
}
.tsh-compat-chip--best .tsh-compat-num      { color: #f5d58c; }
.tsh-compat-chip--neutral .tsh-compat-num   { color: #b8c4d0; }
.tsh-compat-chip--challenge .tsh-compat-num { color: #a89880; }
.tsh-compat-elem {
  font-size: .65rem;
  color: var(--tsh-text2, #a89880);
  margin-top: .18rem;
  letter-spacing: .04em;
  white-space: nowrap;
}
/* Popup */
.tsh-compat-popup {
  position: relative;
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  background: #111110;
  border: 1px solid rgba(201,169,110,.35);
  border-radius: 4px;
  box-shadow: 0 4px 24px rgba(0,0,0,.6), inset 0 0 0 1px rgba(201,169,110,.07);
  animation: tshCompatPopIn .18s ease;
}
@keyframes tshCompatPopIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tsh-compat-popup-head {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .88rem;
  color: #f5d58c;
  margin-bottom: .85rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(201,169,110,.18);
}
.tsh-compat-popup-tier {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: .78rem;
  color: #a89880;
  font-weight: 400;
}
.tsh-compat-popup-axis {
  display: flex;
  gap: .6rem;
  margin-bottom: .65rem;
  align-items: flex-start;
}
.tsh-compat-popup-axis-label {
  flex: 0 0 6.5rem;
  font-size: .73rem;
  font-weight: 700;
  color: #c9a96e;
  letter-spacing: .04em;
  padding-top: .1rem;
}
.tsh-compat-popup-axis-text {
  font-size: .8rem;
  color: var(--tsh-text2, #a89880);
  line-height: 1.55;
  flex: 1;
}
.tsh-compat-popup-close {
  display: block;
  margin: .85rem auto 0;
  padding: .3rem 1.2rem;
  background: transparent;
  border: 1px solid rgba(201,169,110,.3);
  border-radius: 3px;
  color: #a89880;
  font-size: .76rem;
  cursor: pointer;
  letter-spacing: .06em;
  transition: border-color .15s, color .15s;
}
.tsh-compat-popup-close:hover { border-color: rgba(201,169,110,.7); color: #c9a96e; }
.tsh-compat-note {
  font-size: .7rem;
  color: rgba(168,152,128,.65);
  text-align: center;
  margin-top: .25rem;
  font-style: italic;
  letter-spacing: .02em;
}
@media (max-width: 480px) {
  .tsh-compat-popup-axis { flex-direction: column; gap: .2rem; }
  .tsh-compat-popup-axis-label { flex: none; }
  .tsh-compat-chip { min-width: 2.6rem; }
}

/* ════════════════════════════════════════════════════════════════
   SỐ HÊN HÔM NAY + LỊCH NGÀY HÊN — Tab B (P4-S2)
   ════════════════════════════════════════════════════════════════ */
/* Lucky Today card */
.tsh-lucky-today {
  position: relative;
  margin: 1.5rem 0 0;
  padding: 1.1rem 1.25rem;
  background: rgba(201,169,110,.04);
  border: 1px solid rgba(201,169,110,.18);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(201,169,110,.06);
}
.tsh-lucky-today::before,
.tsh-lucky-today::after {
  content: '';
  position: absolute;
  left: 6px; right: 6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,.25), transparent);
}
.tsh-lucky-today::before { top: 4px; }
.tsh-lucky-today::after  { bottom: 4px; }
.tsh-lucky-today-date {
  font-size: .78rem;
  color: #c9a96e;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .85rem;
  font-family: 'Lexend Deca', sans-serif;
}
/* Header: title + date on same line */
.tsh-lucky-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .85rem;
  gap: .5rem;
  flex-wrap: wrap;
}
.tsh-lucky-header-date {
  font-size: .72rem;
  color: var(--tsh-text2, #a89880);
  letter-spacing: .04em;
  white-space: nowrap;
}
/* 2-column body: left = big number, right = info */
.tsh-lucky-today-body {
  display: flex;
  flex-direction: row;
  gap: 1.2rem;
  align-items: flex-start;
}
.tsh-lucky-pd-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 4rem;
  gap: .3rem;
}
.tsh-lucky-pd-elem {
  font-size: .72rem;
  color: var(--tsh-text2, #a89880);
  letter-spacing: .04em;
  text-align: center;
}
.tsh-lucky-info-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-width: 0;
}
.tsh-lucky-pd-num {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 2.2rem;
  line-height: 1;
  font-weight: 700;
  text-shadow: 0 0 18px currentColor;
}
.tsh-lucky-bar-wrap {}
.tsh-lucky-bar-track {
  height: 6px;
  background: rgba(201,169,110,.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: .3rem;
}
.tsh-lucky-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .6s ease;
}
.tsh-lucky-bar-label {
  font-size: .72rem;
  color: var(--tsh-text2, #a89880);
  letter-spacing: .04em;
}
.tsh-lucky-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
}
.tsh-lucky-row-icon { font-size: 1rem; flex: 0 0 1.4rem; }
.tsh-lucky-row-label {
  color: var(--tsh-text2, #a89880);
  flex: 0 0 5.5rem;
  font-size: .76rem;
}
.tsh-lucky-row-val {
  color: #e8e0d0;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.tsh-lucky-color-dot {
  display: inline-block;
  width: .85rem;
  height: .85rem;
  border-radius: 2px;
  flex: 0 0 .85rem;
}
.tsh-lucky-advice {
  font-size: .79rem;
  color: var(--tsh-text2, #a89880);
  font-style: italic;
  line-height: 1.55;
  padding: .55rem .75rem;
  background: rgba(201,169,110,.05);
  border-left: 2px solid rgba(201,169,110,.3);
  border-radius: 0 3px 3px 0;
}
/* Lucky Calendar */
.tsh-lucky-cal {
  position: relative;
  margin: 1rem 0 0;
  padding: 1.1rem 1.25rem;
  background: rgba(201,169,110,.03);
  border: 1px solid rgba(201,169,110,.14);
  border-radius: 4px;
}
.tsh-lucky-cal-head {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .78rem;
  color: #c9a96e;
  letter-spacing: .05em;
  margin-bottom: .6rem;
}
.tsh-lucky-cal-legend {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .71rem;
  color: var(--tsh-text2, #a89880);
  margin-bottom: .75rem;
  flex-wrap: wrap;
}
.tsh-lucky-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: .6rem;
}
.tsh-lucky-cal-dow {
  font-size: .65rem;
  color: rgba(201,169,110,.6);
  text-align: center;
  padding-bottom: 3px;
  font-weight: 600;
  letter-spacing: .04em;
}
.tsh-lucky-cal-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .35rem .15rem .28rem;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, box-shadow .15s;
  min-width: 0;
  cursor: pointer;
  position: relative;
}
.tsh-lucky-cal-cell:not(.tsh-lucky-cal-cell--empty):hover {
  background: rgba(201,169,110,.08);
  border-color: rgba(201,169,110,.25);
}
.tsh-lucky-cal-cell--empty  { border-color: transparent !important; cursor: default; }
.tsh-lucky-cal-cell--best   { background: rgba(245,213,140,.07); border-color: rgba(245,213,140,.2); }
.tsh-lucky-cal-cell--neutral { background: transparent; border-color: rgba(201,169,110,.06); }
.tsh-lucky-cal-cell--challenge { background: rgba(168,152,128,.04); border-color: rgba(168,152,128,.1); opacity: .55; }
/* Past: dimmed, still clickable */
.tsh-lucky-cal-cell--past {
  opacity: .4;
  filter: grayscale(25%);
}
.tsh-lucky-cal-cell--past:hover { opacity: .65; }
/* Today: prominent gold */
.tsh-lucky-cal-cell--today {
  border-color: rgba(201,169,110,.7) !important;
  box-shadow: 0 0 0 1px rgba(201,169,110,.25), 0 0 8px rgba(201,169,110,.12);
  opacity: 1 !important;
  background: rgba(201,169,110,.1) !important;
}
/* Active/selected cell */
.tsh-lucky-cal-cell--active {
  border-color: rgba(245,213,140,.85) !important;
  box-shadow: 0 0 0 2px rgba(245,213,140,.25), 0 0 12px rgba(245,213,140,.15) !important;
  opacity: 1 !important;
}
/* Day number — larger for elderly */
.tsh-lucky-cal-day {
  font-size: .82rem;
  font-weight: 600;
  color: #e8e0d0;
  line-height: 1;
  margin-bottom: .08rem;
}
.tsh-lucky-cal-cell--today .tsh-lucky-cal-day { color: #f5d58c; font-weight: 800; }
/* "HÔM NAY" badge inside today cell */
.tsh-lucky-cal-today-lbl {
  font-size: .45rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #f5d58c;
  line-height: 1;
  margin-bottom: .1rem;
}
/* Personal day number */
.tsh-lucky-cal-pdn {
  font-size: .6rem;
  color: rgba(201,169,110,.45);
  line-height: 1;
  margin-bottom: .1rem;
  font-family: 'Lexend Deca', sans-serif;
}
.tsh-lucky-cal-cell--best .tsh-lucky-cal-pdn { color: rgba(245,213,140,.7); }
/* Calendar dots — larger for elderly */
.tsh-lucky-cal-dot {
  display: inline-block;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  flex: 0 0 .45rem;
}
.tsh-lucky-cal-dot--best      { background: #7ecb7e; box-shadow: 0 0 5px #7ecb7e99; }
.tsh-lucky-cal-dot--neutral   { background: rgba(201,169,110,.4); }
.tsh-lucky-cal-dot--challenge { background: rgba(220,120,80,.55); }
.tsh-lucky-cal-note {
  font-size: .68rem;
  color: rgba(168,152,128,.6);
  font-style: italic;
  text-align: center;
}
/* ── Day detail popup ── */
.tsh-cal-popup {
  margin-top: .9rem;
  padding: .9rem 1.1rem;
  background: rgba(14,11,7,.97);
  border: 1px solid rgba(201,169,110,.35);
  border-radius: 4px;
  box-shadow: 0 4px 24px rgba(0,0,0,.45);
  animation: tsh-cal-popup-in .2s ease;
  position: relative;
}
.tsh-cal-popup::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,.4), transparent);
}
@keyframes tsh-cal-popup-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tsh-cal-popup--peak   { border-color: rgba(245,213,140,.6); }
.tsh-cal-popup--best   { border-color: rgba(126,203,126,.45); }
.tsh-cal-popup--challenge { border-color: rgba(168,152,128,.3); }
.tsh-cal-popup-topbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
  flex-wrap: wrap;
}
.tsh-cal-popup-date {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .72rem;
  color: #c9a96e;
  flex: 1;
  letter-spacing: .04em;
}
.tsh-cal-popup-timelbl {
  font-size: .65rem;
  padding: .18rem .55rem;
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: .05em;
}
.tsh-cal-popup-timelbl--today   { background: rgba(245,213,140,.18); color: #f5d58c; }
.tsh-cal-popup-timelbl--past    { background: rgba(168,152,128,.15); color: #a89880; }
.tsh-cal-popup-timelbl--future  { background: rgba(74,158,255,.15); color: #7ab8ff; }
.tsh-cal-popup-x {
  background: none;
  border: 1px solid rgba(201,169,110,.3);
  color: rgba(201,169,110,.7);
  font-size: .85rem;
  line-height: 1;
  width: 1.6rem; height: 1.6rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .15s, color .15s;
}
.tsh-cal-popup-x:hover { background: rgba(201,169,110,.15); color: #f5d58c; }
.tsh-cal-popup-body {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.tsh-cal-popup-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  flex: 0 0 auto;
}
.tsh-cal-popup-num {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
}
.tsh-cal-popup-elem {
  font-size: .72rem;
  letter-spacing: .08em;
  font-weight: 600;
}
.tsh-cal-popup-arc { width: 48px; height: 48px; }
.tsh-cal-popup-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-width: 0;
}
.tsh-cal-popup-tier {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  font-family: 'Lexend Deca', sans-serif;
}
.tsh-cal-popup-tier--peak      { color: #f5d58c; }
.tsh-cal-popup-tier--best      { color: #7ecb7e; }
.tsh-cal-popup-tier--challenge { color: #d4956a; }
.tsh-cal-popup-tier--neutral   { color: #a89880; }
.tsh-cal-popup-tier-tip {
  font-size: .72rem;
  color: rgba(232,224,208,.6);
  line-height: 1.5;
}
.tsh-cal-popup-advice {
  font-size: .78rem;
  color: #e8e0d0;
  line-height: 1.6;
  font-style: italic;
  padding: .5rem .6rem;
  background: rgba(201,169,110,.05);
  border-left: 2px solid rgba(201,169,110,.35);
  border-radius: 0 2px 2px 0;
}
.tsh-cal-popup-hours {
  font-size: .74rem;
  color: #a89880;
}
.tsh-cal-popup-hours strong {
  color: #e8e0d0;
  font-weight: 600;
}
@media (max-width: 420px) {
  .tsh-lucky-cal-day { font-size: .68rem; }
  .tsh-lucky-cal-cell { padding: .22rem .08rem .18rem; }
  .tsh-lucky-pd-num { font-size: 1.8rem; }
  .tsh-lucky-today-body { gap: .75rem; }
  .tsh-lucky-pd-wrap { flex: 0 0 3.2rem; }
  .tsh-lucky-header-date { font-size: .67rem; }
}

/* ─── Lucky SVG Animated Ring ─── */
.tsh-lucky-ring {
  width: 108px;
  height: 108px;
  flex: 0 0 108px;
  overflow: visible;
  display: block;
}
.tsh-lucky-ring-ticks {
  transform-box: fill-box;
  transform-origin: center;
  animation: tsh-ring-spin 80s linear infinite;
  will-change: transform;
}
.tsh-lucky-ring-arc {
  stroke-dasharray: 0 276.46;
  animation: tsh-ring-arc-draw .95s .1s ease-out forwards;
}
@keyframes tsh-ring-spin {
  to { transform: rotate(360deg); }
}
@keyframes tsh-ring-arc-draw {
  to { stroke-dasharray: var(--tsh-arc, 138) 276.46; }
}
.tsh-lucky-ring-num {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 22px;
  font-weight: 700;
}
.tsh-lucky-ring-elem {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 8.5px;
  fill: rgba(168,152,128,.65);
  letter-spacing: .03em;
}
.tsh-lucky-ring-pct {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 7px;
  fill: rgba(168,152,128,.42);
  letter-spacing: .04em;
}
/* Triple alignment dots row */
.tsh-lucky-align-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .2rem;
}
.tsh-lucky-adots {
  width: 46px;
  height: 12px;
  flex: 0 0 46px;
}
.tsh-lucky-align-lbl {
  font-size: .68rem;
  color: var(--tsh-text2, #a89880);
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Peak state — when PD = LP number */
.tsh-lucky-today--peak {
  border-color: rgba(201,169,110,.45) !important;
  box-shadow: inset 0 0 0 1px rgba(201,169,110,.12), 0 0 20px rgba(201,169,110,.07) !important;
}
.tsh-lucky-peak-glow {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: radial-gradient(ellipse at 50% 0%, var(--peak-c, #c9a96e) 0%, transparent 60%);
  opacity: .07;
  pointer-events: none;
}
/* Calendar: peak day (PD === LP number — perfect resonance) */
.tsh-lucky-cal-cell--peak {
  background: rgba(245,213,140,.13) !important;
  border-color: rgba(245,213,140,.5) !important;
  box-shadow: 0 0 7px rgba(245,213,140,.18);
}
.tsh-lucky-cal-cell--peak .tsh-lucky-cal-day {
  color: #f5d58c;
  font-weight: 700;
}
.tsh-lucky-cal-cell--peak .tsh-lucky-cal-pdn {
  color: rgba(245,213,140,.75);
}
/* Peak dot in legend */
.tsh-lucky-cal-dot--peak {
  background: #f5d58c;
  box-shadow: 0 0 5px #f5d58c99;
}
/* Update today-body for SVG ring (align center) */
.tsh-lucky-today-body { align-items: center; }
@media (max-width: 420px) {
  .tsh-lucky-ring { width: 90px; height: 90px; flex: 0 0 90px; }
}

/* ═══ SOURCE TRANSPARENCY — E-E-A-T ═══ */
.smc-source-transparency {
  margin: 48px auto 0;
  max-width: 720px;
  padding: 0 16px;
}
.smc-source-transparency__inner {
  border: 1px solid rgba(201,169,110,0.18);
  border-radius: 4px;
  padding: 28px 32px;
  background: rgba(12,12,10,0.6);
}
.smc-source-transparency__icon {
  width: 28px;
  height: 28px;
  color: #c9a96e;
  margin-bottom: 12px;
}
.smc-source-transparency__icon svg { width: 100%; height: 100%; }
.smc-source-transparency__title {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 15px;
  color: #c9a96e;
  letter-spacing: 0.04em;
  margin: 0 0 20px;
}
.smc-source-transparency__list {
  margin: 0;
  display: grid;
  gap: 12px;
}
.smc-source-transparency__item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px;
  align-items: baseline;
}
.smc-source-transparency__item dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(201,169,110,0.6);
  font-family: 'Lexend Deca', sans-serif;
}
.smc-source-transparency__item dd {
  margin: 0;
  font-size: 14px;
  color: #e8e0d0;
  line-height: 1.5;
}
.smc-source-transparency__note {
  margin: 20px 0 0;
  font-size: 12px;
  color: rgba(232,224,208,0.45);
  font-style: italic;
}
@media (max-width: 540px) {
  .smc-source-transparency__inner { padding: 20px 16px; }
  .smc-source-transparency__item {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* ═══ FIX 10/08/2026 — KHỐI CHÂN DUNG TRÀN MÉP TRÊN ĐIỆN THOẠI ═══
   Nhìn thấy ở Bói Kiều: khối này có 5 thành phần xếp hàng ngang, đẩy phần chữ
   ra x=327 chỉ còn 63px bề ngang → "TRUYỆN KIỀU" và "Nguyễn Du · 1813 · 3254 Câu"
   bị BÓP còn 1-2 chữ mỗi dòng rồi CẮT CỤT quá mép phải 10px.
   ⚠ Máy đo báo "không tràn ngang" vì phần thừa bị cắt chứ không đẩy trang → cửa xanh giả.
   Vá: cho hàng được XUỐNG DÒNG khi chật, và cấm cột chữ co dưới mức đọc được.
   Tool nào đang vừa thì luật này KHÔNG đổi gì (chỉ kích hoạt khi thực sự không đủ chỗ). */
@media (max-width: 768px) {
  .tsh-pyth-col--portrait { flex-wrap: wrap; }
  .tsh-pyth-info {
    min-width: 0;
    flex: 1 1 180px;      /* cần tối thiểu 180px mới đủ đọc; không đủ thì xuống dòng */
    overflow-wrap: anywhere;
  }
}

/* ══════════════════════════════════════════════════════════
   TSH-C2 / TSH-C4 (2026-08-14) — Khối "Cách Tính & Quy Ước"
   Minh bạch trường phái Pythagorean + quy ước tên Việt + phép tính.
   Dùng lại tone/biến sẵn có, không thêm font/ảnh/hiệu ứng nặng.
   ══════════════════════════════════════════════════════════ */
#tsh-method { margin: 32px auto 0; max-width: 900px; padding: 0 16px; }
.tsh-method-sys {
  margin: 4px 0 14px; padding: 12px 14px;
  background: rgba(201,169,110,.05);
  border-left: 3px solid rgba(201,169,110,.55);
  border-radius: 3px;
}
.tsh-method-sys strong { display: block; margin-bottom: 6px; font-size: 1.02rem; }
.tsh-method-sys p { margin: 0; font-size: .95rem; line-height: 1.75; opacity: .9; }
.tsh-method-conv { margin-top: 14px; }
.tsh-method-item {
  border-top: 1px solid rgba(201,169,110,.18);
  padding: 2px 0;
}
.tsh-method-item > summary {
  cursor: pointer; list-style: none;
  /* nút bấm đủ lớn cho ngón tay — tối thiểu 44px chiều cao */
  min-height: 44px; display: flex; align-items: center; gap: 8px;
  padding: 10px 4px; font-size: 1rem; font-weight: 600;
}
.tsh-method-item > summary::-webkit-details-marker { display: none; }
.tsh-method-item > summary::before { content: '＋'; opacity: .65; font-weight: 400; }
.tsh-method-item[open] > summary::before { content: '－'; }
.tsh-method-item > summary:focus-visible { outline: 2px solid rgba(201,169,110,.9); outline-offset: 2px; }
.tsh-method-item > p {
  margin: 0 0 12px; padding: 0 4px 0 22px;
  font-size: .95rem; line-height: 1.8; opacity: .92;
}
/* Hàng phép tính: trên điện thoại xuống dòng thay vì tràn ngang */
/* .tsh-calc-row gốc là GRID `1fr auto auto` + .tsh-calc-chain có `white-space:nowrap`.
   Câu diễn giải phép tính ở đây dài hơn nhiều so với chuỗi "→ 6" của khối Số Chủ Đạo,
   nên phải xếp CHỒNG thành 1 cột và cho xuống dòng — nếu không sẽ tràn và bị cắt cụt
   mất cả con số kết quả (đã thấy tận mắt trên iPhone 375 ngày 14/08). */
#tsh-method .tsh-calc-row {
  grid-template-columns: 1fr;
  gap: 2px; align-items: start;
  padding: 10px 0;
}
#tsh-method .tsh-calc-lbl { font-size: .95rem; font-weight: 600; color: var(--tsh-text1); }
#tsh-method .tsh-calc-chain {
  white-space: normal; text-align: left; overflow-wrap: anywhere;
  font-size: .88rem; line-height: 1.75; color: rgba(232,224,208,.72);
}
#tsh-method .tsh-calc-val { justify-self: start; font-size: 1.15rem; }
#tsh-method .tsh-calc-title { font-size: 1.02rem; }
#tsh-method .tsh-calc-note { font-size: .82rem; line-height: 1.7; }
@media (max-width: 480px) {
  #tsh-method { padding: 0 12px; }
  .tsh-method-item > p { padding-left: 4px; }
}