/* ═══════════════════════════════════════════════
   TỨ TRỤ — Imperial Crimson Accent
   Tool: Luận Giải Tứ Trụ Bát Tự
   Accent: Crimson #c85040 / #e07060 / #a03828
   ═══════════════════════════════════════════════ */

/* ── CSS Variables ── */
.tt-cosmos {
  --tt-jade: #c85040;
  --tt-jade-light: #e07060;
  --tt-jade-dark: #a03828;
  --tt-jade-glow: rgba(200,80,64,0.35);
  --tt-jade-subtle: rgba(200,80,64,0.08);
  --tt-bg: #0c0c0a;
  --tt-text: #e8e0d0;
  --tt-text-dim: rgba(232,224,208,0.78);
  --tt-border: rgba(200,80,64,0.18);
  --tt-card-bg: rgba(12,12,10,0.85);
  --tt-radius: 4px;
  position: relative;
  color: var(--tt-text);
  min-height: 100vh;
  /* FIX #4: Background cosmos — jade-tinted dark gradient */
  background:
    radial-gradient(ellipse 75% 45% at 50% 0%, rgba(22,12,10,.65) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(18,10,8,.45) 0%, transparent 60%),
    radial-gradient(ellipse 45% 50% at 15% 55%, rgba(20,11,9,.38) 0%, transparent 60%),
    #0e0a0a;
  overflow-x: clip;          /* clip (not hidden) — preserves position:sticky */
  /* FIX F11: removed max-width + border — cosmos must fill 100% viewport */
}

/* FIX #4b: body background */
body:has(.tt-cosmos) { background: #0c0808; }

/* Breadcrumb handled universally by main.css Reverse Bleed system (--tool-bg-blend token) */

/* FIX: iOS Safari auto-zoom prevention */
.tt-cosmos { touch-action: manipulation; }
.tt-cosmos input, .tt-cosmos select, .tt-cosmos textarea {
  font-size: 1rem !important; /* ≥16px prevents iOS auto-zoom on focus */
  touch-action: manipulation;
}
.tt-cosmos select { color-scheme: dark; }

/* ═══════════════════════════════════════════════
   DYNAMIC ELEMENT THEMING — kết quả đổi màu theo mệnh
   Scope: #tt-results[data-element="X"] → override --tt-jade vars
   Form section KHÔNG bị ảnh hưởng (nằm ngoài #tt-results)
   ═══════════════════════════════════════════════ */

/* Kim — Silver / Steel */
#tt-results[data-element="Kim"] {
  --tt-jade:        #9aacbc;
  --tt-jade-light:  #b8ccdc;
  --tt-jade-dark:   #6a8090;
  --tt-jade-glow:   rgba(154,172,188,0.35);
  --tt-jade-subtle: rgba(154,172,188,0.08);
  --tt-border:      rgba(154,172,188,0.18);
}

/* Mộc — FIX H3: True Green (not same as default crimson) */
#tt-results[data-element="Mộc"] {
  --tt-jade:        #50a870;
  --tt-jade-light:  #68c888;
  --tt-jade-dark:   #388850;
  --tt-jade-glow:   rgba(80,168,112,0.35);
  --tt-jade-subtle: rgba(80,168,112,0.08);
  --tt-border:      rgba(80,168,112,0.18);
}

/* Thủy — Steel Blue / Navy */
#tt-results[data-element="Thủy"] {
  --tt-jade:        #4888b8;
  --tt-jade-light:  #68a8d8;
  --tt-jade-dark:   #306898;
  --tt-jade-glow:   rgba(72,136,184,0.35);
  --tt-jade-subtle: rgba(72,136,184,0.08);
  --tt-border:      rgba(72,136,184,0.18);
}

/* Hỏa — FIX H3: Bright Red-Orange (distinct from default crimson #c85040) */
#tt-results[data-element="Hỏa"] {
  --tt-jade:        #e04838;
  --tt-jade-light:  #f06858;
  --tt-jade-dark:   #b83020;
  --tt-jade-glow:   rgba(224,72,56,0.35);
  --tt-jade-subtle: rgba(224,72,56,0.08);
  --tt-border:      rgba(224,72,56,0.18);
}

/* Thổ — Warm Amber / Gold */
#tt-results[data-element="Thổ"] {
  --tt-jade:        #b89030;
  --tt-jade-light:  #d8b050;
  --tt-jade-dark:   #907020;
  --tt-jade-glow:   rgba(184,144,48,0.35);
  --tt-jade-subtle: rgba(184,144,48,0.08);
  --tt-border:      rgba(184,144,48,0.18);
}

/* ═══════════════════════════════════════════════
   IMPERIAL FRAME SYSTEM — 3-Tier Glow + Corners
   Tier 1 MAJOR: sections, summary, toc, header, footer
   Tier 2 SUB:   dubao-card, 3layer, sao-item
   Tier 3 MIN:   disclaimer, info-note
   ═══════════════════════════════════════════════ */

/* ── Extra corner divs (TR + BL) — injected by JS ── */
.tt-frame-corner {
  position: absolute; width: 22px; height: 22px;
  opacity: .35; pointer-events: none; z-index: 1;
}
.tt-frame-corner--tr {
  top: 6px; right: 6px;
  border-top: 1.5px solid var(--tt-jade);
  border-right: 1.5px solid var(--tt-jade);
  background: radial-gradient(circle at 100% 0, var(--tt-jade-subtle) 0%, transparent 70%);
}
.tt-frame-corner--bl {
  bottom: 6px; left: 6px;
  border-bottom: 1.5px solid var(--tt-jade);
  border-left: 1.5px solid var(--tt-jade);
  background: radial-gradient(circle at 0 100%, var(--tt-jade-subtle) 0%, transparent 70%);
}

/* FIX #5: Background orbs */
.tt-orb {
  position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 0;
  /* FIX CP2: removed will-change — orbs are static, no animation */
}
.tt-orb-1 {
  width: 600px; height: 600px; top: -200px; right: -150px;
  background: radial-gradient(circle, rgba(200,80,64,.04) 0%, transparent 65%);
}
.tt-orb-2 {
  width: 500px; height: 500px; bottom: 10%; left: -200px;
  background: radial-gradient(circle, rgba(200,80,64,.035) 0%, transparent 65%);
}
.tt-orb-3 {
  width: 300px; height: 300px; top: 40%; left: 40%;
  background: radial-gradient(circle, rgba(200,80,64,.025) 0%, transparent 65%);
}

/* ── Progress bar ── */
#tt-progress {
  position: fixed; top: 0; left: 0; width: 0; height: 3px;
  background: linear-gradient(90deg, var(--tt-jade-dark), var(--tt-jade), var(--tt-jade-light));
  z-index: 9999; transition: width .3s ease;
}

/* ── Back to top ── */
.tt-btt {
  position: fixed; bottom: 24px; right: 24px; z-index: 900;

  width: 48px; height: 48px; border-radius: var(--tt-radius);
  background: var(--tt-bg); border: 1px solid var(--tt-jade);
  color: var(--tt-jade); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
  transform: translateY(12px);
}
.tt-btt.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.tt-btt:hover { background: var(--tt-jade); color: var(--tt-bg); }

/* ── Form Section ── */
.tt-form-section {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 60px 20px 40px;
  overflow: hidden;
  z-index: 1;
}

/* ── Ensure content above mandala ── */
.tt-form-section .tsh-pyth-layout,
.tt-form-section .tt-eyebrow,
.tt-form-section .tt-form-disc {
  position: relative; z-index: 1;
}

/* ── Mandala ── */
.tt-mandala {
  position: absolute; top: 50%; left: 50%; width: 420px; height: 420px;
  transform: translate(-50%,-50%); pointer-events: none; z-index: 0; opacity: .1;
}
.tt-mandala-ring--outer { animation: ttSpin 120s linear infinite; transform-origin: 100px 100px; will-change: transform; }
.tt-mandala-ring--mid   { animation: ttSpin 80s linear infinite reverse; transform-origin: 100px 100px; will-change: transform; }
.tt-mandala-center      { animation: ttPulse 8s ease-in-out infinite; transform-origin: 100px 100px; }
.tt-mandala-orbit--1    { animation: ttOrbit1 30s linear infinite; transform-origin: 100px 100px; }
.tt-mandala-orbit--2    { animation: ttOrbit2 25s linear infinite reverse; transform-origin: 100px 100px; }
@keyframes ttSpin   { to { transform: rotate(360deg); } }
@keyframes ttPulse  { 0%,100% { opacity: .35; } 50% { opacity: .55; } }
@keyframes ttOrbit1 { to { transform: rotate(360deg); } }
@keyframes ttOrbit2 { to { transform: rotate(-360deg); } }

/* ── Eyebrow ── */
.tt-eyebrow {
  text-align: center; font-size: .75rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--tt-jade-light); margin-bottom: 8px; position: relative; z-index: 1;
}
.tt-form-disc {
  text-align: center; font-size: .82rem; color: var(--tt-text-dim);
  max-width: 480px; margin: 0 auto 28px; position: relative; z-index: 1;
}

/* ── Jade tint for portrait column ── */
.tt-pyth-jade .tsh-pyth-brk--tl,
.tt-pyth-jade .tsh-pyth-brk--tr,
.tt-pyth-jade .tsh-pyth-brk--bl,
.tt-pyth-jade .tsh-pyth-brk--br {
  border-color: var(--tt-jade) !important;
}
/* FIX #3: Override frame border + outline + meander + glow animation */
.tt-pyth-jade .tsh-pyth-frame {
  border-color: var(--tt-border) !important;
  outline-color: rgba(200,80,64,.12) !important;
  animation: ttFrameGlow 6s ease-in-out infinite alternate !important;
}
/* Override meander SVG color: gold → jade */
.tt-pyth-jade .tsh-pyth-frame::before,
.tt-pyth-jade .tsh-pyth-frame::after {
  background-image: 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='%23c85040' stroke-width='.8' opacity='.55'/%3E%3C/svg%3E") !important;
}
@keyframes ttFrameGlow {
  from { opacity: .85; }
  to   { opacity: 1; }
}
.tt-pyth-jade .tsh-pyth-name { color: var(--tt-jade-light) !important; }
/* ── 5 Element Badges — individual colors ── */
.tt-badge-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.tt-badge {
  font-size: .75rem !important;
  padding: 3px 8px !important;
  letter-spacing: .08em !important;
  transition: border-color .3s, box-shadow .3s, opacity .3s;
}
.tt-badge--kim  { border-color: rgba(176,184,192,.45) !important; color: #b0b8c0 !important; }
.tt-badge--moc  { border-color: rgba(80,168,112,.45) !important;  color: #50a870 !important; }
.tt-badge--thuy { border-color: rgba(80,152,192,.45) !important;  color: #5098c0 !important; }
.tt-badge--hoa  { border-color: rgba(224,96,72,.45) !important;   color: #e06048 !important; }
.tt-badge--tho  { border-color: rgba(200,160,80,.45) !important;  color: #c8a050 !important; }
.tt-badge:hover {
  box-shadow: 0 0 10px currentColor;
  opacity: 1;
}
/* FIX quote: override gold text → jade/cream */
.tt-pyth-jade .tsh-pyth-quote {
  color: #d8c8c8 !important;
  text-shadow: 0 0 20px rgba(200,80,64,.2) !important;
}
.tt-pyth-jade .tsh-pyth-qm { color: rgba(200,80,64,.45) !important; }
.tt-pyth-jade .tsh-proof-star { color: var(--tt-jade) !important; }
.tt-pyth-jade .tsh-hrp { color: var(--tt-jade) !important; }

/* FIX #2: Override tsh-pyth-divider gold → jade */
.tt-cosmos .tsh-pyth-divider {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(200,80,64,.25) 15%,
    rgba(200,80,64,.4) 50%,
    rgba(200,80,64,.25) 85%,
    transparent 100%
  ) !important;
}
.tt-cosmos .tsh-pyth-divider::before {
  color: rgba(200,80,64,.5) !important;
  background: var(--tt-bg) !important;
}

/* ── Cycle diagram ── */
.tt-cycle-diagram {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1; padding: 12px;
  position: relative;
}
.tt-cycle-diagram svg { width: 100%; height: auto; }

/* ── Diagram: Element circles breathing glow ── */
.tt-cycle-diagram svg > circle[stroke="#e06048"] { filter: drop-shadow(0 0 3px rgba(224,96,72,.3));  animation: ttElGlow-hoa  4s ease-in-out infinite; }
.tt-cycle-diagram svg > circle[stroke="#c8a050"] { filter: drop-shadow(0 0 3px rgba(200,160,80,.3)); animation: ttElGlow-tho  4s ease-in-out 0.8s infinite; }
.tt-cycle-diagram svg > circle[stroke="#b0b8c0"] { filter: drop-shadow(0 0 3px rgba(176,184,192,.3)); animation: ttElGlow-kim  4s ease-in-out 1.6s infinite; }
.tt-cycle-diagram svg > circle[stroke="#5098c0"] { filter: drop-shadow(0 0 3px rgba(80,152,192,.3));  animation: ttElGlow-thuy 4s ease-in-out 2.4s infinite; }
.tt-cycle-diagram svg > circle[stroke="#50a870"] { filter: drop-shadow(0 0 3px rgba(80,168,112,.3));  animation: ttElGlow-moc  4s ease-in-out 3.2s infinite; }

@keyframes ttElGlow-hoa  { 0%,100% { opacity:.4; } 50% { opacity:.7; } }
@keyframes ttElGlow-tho  { 0%,100% { opacity:.4; } 50% { opacity:.7; } }
@keyframes ttElGlow-kim  { 0%,100% { opacity:.4; } 50% { opacity:.7; } }
@keyframes ttElGlow-thuy { 0%,100% { opacity:.4; } 50% { opacity:.7; } }
@keyframes ttElGlow-moc  { 0%,100% { opacity:.4; } 50% { opacity:.7; } }

/* ── Diagram: Tương sinh lines energy flow ── */
.tt-cycle-diagram svg > line[stroke="#c85040"] {
  stroke-dasharray: 4 3;
  animation: ttSinhFlow 3s linear infinite;
}
@keyframes ttSinhFlow {
  to { stroke-dashoffset: -28; }
}

/* ── Diagram: Center ☯ rotating ── */
.tt-cycle-diagram svg > text[font-size="14"] {
  transform-origin: 120px 120px;
  animation: ttBaguaSpin 35s linear infinite;
  will-change: transform;
}

/* ── Diagram: Outer portal ring ── */
.tt-cycle-diagram::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 1px dashed rgba(200,80,64,.2);
  animation: ttBaguaSpin 25s linear infinite reverse;
  pointer-events: none;
  will-change: transform;
}

/* ── Portrait deco ── */
.tt-portrait-deco { text-align: center; margin: 8px 0; }

/* ── Yin-Yang top icon: slow rotate + glow ── */
.tt-portrait-deco--top svg {
  animation: ttBaguaSpin 30s linear infinite;
  filter: drop-shadow(0 0 6px rgba(200,80,64,.2));
  transition: filter .3s;
  will-change: transform;
}
.tt-pyth-jade:hover .tt-portrait-deco--top svg {
  filter: drop-shadow(0 0 12px rgba(200,80,64,.45));
}

/* ── Form Title ── (SYNC: same font-family + size as SDT) */
.tt-form-title {
  font-family: 'Lexend Deca', system-ui, sans-serif;
  font-size: clamp(2rem, 5.5vw, 3.8rem);
  font-weight: 700; line-height: 1.12; margin: 0 0 18px;
  text-align: center; letter-spacing: .04em;
  color: var(--tt-jade);
  white-space: nowrap; overflow: hidden;
  text-shadow: 0 0 30px rgba(200,80,64,.2), 0 0 60px rgba(200,80,64,.08);
}

/* ── Form box ── (SYNC: single border + 4-corner L-brackets + inner border like SDT) */
.tt-form-box {
  position: relative; z-index: 2;
  width: 100%;
  background: rgba(18,17,14,.8);
  border: 1px solid rgba(200,80,64,.22);
  border-radius: var(--tt-radius);
  padding: 40px 44px 36px;
  box-shadow:
    inset 0 0 90px rgba(200,80,64,.04),
    0 0 0 1px rgba(200,80,64,.06),
    0 24px 48px rgba(0,0,0,.3);
  font-family: 'Lexend Deca', system-ui, sans-serif;
}
/* Form corner override (trigrams in .tt-form-corners — see U4 section) */
.tt-form-corner { display: none; }
/* Inner border */
.tt-form-box::before {
  content: ''; position: absolute;
  inset: 6px; border: 1px solid rgba(200,80,64,.08);
  border-radius: 3px; pointer-events: none;
}
.tt-form-box::after { content: none; }
/* ── Shimmer class for heading after decode (matching SDT .phone-shimmer) ── */
.tt-form-title.tt-shimmer {
  background: linear-gradient(90deg, #c85040 0%, #e07060 30%, #d8a8a0 50%, #e07060 70%, #c85040 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none;
  animation: ttHeadShimmer 3.5s linear infinite;
}
@keyframes ttHeadShimmer { to { background-position: -200% center; } }

/* ── Decode char states (matching TSH pattern) ── */
.tt-decode-scramble {
  color: rgba(200,80,64,.35);
  -webkit-text-fill-color: rgba(200,80,64,.35);
  display: inline-block;
}
.tt-decode-locked {
  display: inline-block;
  animation: ttCharLock .3s ease-out;
}
@keyframes ttCharLock {
  0% { opacity: 0; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

/* ── Typewriter sub ── (synced với SDT: italic + Playfair + spacing) */
.tt-form-sub {
  text-align: center; font-size: 1rem;
  font-style: italic; font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  color: #d8c8c8; min-height: 1.65em; margin: 0 0 32px;
  letter-spacing: .025em; line-height: 1.65;
  text-shadow: 0 0 28px rgba(200,80,64,.1);
}
.tt-sub-cursor {
  display: inline-block; margin-left: 1px;
  color: var(--tt-jade); font-style: normal; font-weight: 300;
  animation: ttBlink .75s step-end infinite;
}
@keyframes ttBlink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* ── Ornament ── (synced với SDT: thêm 2 đường ngang) */
.tt-ornament {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin: 8px 0 16px;
}
.tt-ornament::before, .tt-ornament::after {
  content: ''; flex: 1; height: 1px; max-width: 60px;
}
.tt-ornament::before { background: linear-gradient(90deg, transparent, rgba(200,80,64,.4)); }
.tt-ornament::after  { background: linear-gradient(90deg, rgba(200,80,64,.4), transparent); }
.tt-ornament-icon { font-size: .75rem; color: rgba(200,80,64,.55); line-height: 1; }

/* ── Form ── (SYNC: label uppercase + icon LEFT like SDT) */
.tt-form { width: 100%; }
fieldset.tt-form-group { border: none; padding: 0; margin: 0; min-inline-size: 0; }
fieldset.tt-form-group > legend.tt-label { float: left; width: 100%; }
.tt-form-group { margin-bottom: 20px; }
.tt-label {
  display: flex; align-items: center; gap: 8px;
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: #f08878; font-family: 'Lexend Deca', sans-serif;
  font-weight: 600; margin-bottom: 8px;
}
.tt-required { color: #f08878; font-size: .78rem; letter-spacing: .06em; text-transform: none; }
.tt-input-wrap {
  position: relative; display: flex; align-items: center;
  background: rgba(12,12,10,.6);
  border: 1px solid rgba(200,80,64,.28);
  border-radius: var(--tt-radius);
  transition: border-color .2s, box-shadow .2s;
}
.tt-input-wrap:hover {
  border-color: rgba(200,80,64,.45);
}
.tt-input-wrap:focus-within {
  border-color: rgba(200,80,64,.7);
  box-shadow: 0 0 0 3px rgba(200,80,64,.10), 0 0 16px rgba(200,80,64,.12);
}
.tt-input {
  width: 100%; height: 50px;
  background: transparent; border: none; outline: none;
  color: var(--tt-text);
  font-family: 'Lexend Deca', system-ui, sans-serif;
  font-size: 1rem; letter-spacing: .12em;
  padding: 0 16px 0 48px;
  -webkit-appearance: none; -moz-appearance: textfield;
}
.tt-input::-webkit-outer-spin-button,
.tt-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tt-input:invalid { border-color: rgba(224,96,72,.55); }
.tt-input::placeholder { color: rgba(232,224,208,.38); letter-spacing: .06em; }
.tt-hint {
  font-size: .80rem; color: rgba(232,224,208,.72);
  margin-top: 6px; font-family: 'Lexend Deca', sans-serif;
}

/* ── Toggle ── */
.tt-toggle-group {
  margin: 12px 0 16px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  padding: 8px 14px;
  border: 1px solid rgba(200,80,64,.12);
  background: rgba(200,80,64,.03);
  transition: border-color .3s, background .3s;
}
.tt-toggle-group:hover {
  border-color: rgba(200,80,64,.5);
  background: rgba(200,80,64,.08);
  box-shadow: 0 0 12px rgba(200,80,64,.15), inset 0 0 8px rgba(200,80,64,.05);
}
/* Shimmer sweep — jade light diagonal every 6s */
.tt-toggle-group::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(200,80,64,.25) 45%,
    rgba(224,112,96,.35) 50%,
    rgba(200,80,64,.25) 55%,
    transparent 70%
  );
  transform: translateX(-120%);
  animation: ttToggleShimmer 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes ttToggleShimmer {
  0%        { transform: translateX(-120%); }
  30%, 35%  { transform: translateX(-120%); }
  65%       { transform: translateX(120%); }
  100%      { transform: translateX(120%); }
}
.tt-toggle-group:hover .tt-toggle-text {
  color: var(--tt-jade-light);
  text-shadow: 0 0 12px rgba(200,80,64,.3);
}
/* Old toggle-switch hidden — replaced by .tt-seal-toggle (see U1 section below) */
@keyframes ttFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Tảo Tý / Dạ Tý Toggle (H4) ── */
.tt-taoty-group { animation: ttFadeIn .3s ease; }
.tt-taoty-row { display: flex; gap: 10px; }
.tt-taoty-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 10px; background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--tt-radius);
  cursor: pointer; outline: none; color: rgba(232,224,208,.4);
  font-family: 'Lexend Deca', system-ui, sans-serif;
  transition: border-color .3s, color .3s, background .3s;
}
.tt-taoty-btn:hover { border-color: rgba(200,80,64,.25); color: rgba(232,224,208,.6); }
.tt-taoty-btn.is-active {
  border-color: rgba(200,80,64,.5); color: var(--tt-text);
  background: rgba(200,80,64,.06);
  box-shadow: 0 0 12px rgba(200,80,64,.08);
}
.tt-taoty-name { font-size: .88rem; font-weight: 600; letter-spacing: .06em; }
.tt-taoty-desc { font-size: .75rem; opacity: .6; }
.tt-taoty-btn.is-active .tt-taoty-name { color: var(--tt-jade-light); }
.tt-taoty-btn:focus-visible { outline: 2px solid var(--tt-jade); outline-offset: 2px; }

/* ── Error ── */
.tt-form-error { color: #e06048; font-size: .82rem; text-align: center; margin-top: 8px; }
#tt-field-birth { margin-bottom: 20px; }
#tt-field-birth.is-error .tt-date-row { animation: ttShake .4s ease; }
@keyframes ttShake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

/* ── Date Row — 3-col Ngày/Tháng/Năm ── */
.tt-date-row { display: flex; align-items: stretch; gap: 0; width: 100%; max-width: 100%; }
.tt-date-col { flex: 1 1 0%; display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.tt-date-col--year { flex: 1.5 1 0%; }
fieldset.tt-form-group { max-width: 100%; overflow: hidden; }
.tt-date-col input,
.tt-date-col select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  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(--tt-text); font-family: 'Lexend Deca', system-ui, sans-serif;
  font-size: 1rem; font-weight: 400; letter-spacing: .05em;
  outline: none; border-radius: 0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15);
  transition: border-color .35s, box-shadow .35s, background .35s;
}
/* Select dropdown arrow */
.tt-date-col select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c85040' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}
.tt-date-col:first-child input,
.tt-date-col:first-child select {
  border-radius: var(--tt-radius) 0 0 var(--tt-radius);
  border-right: 1px solid rgba(255,255,255,.05);
}
.tt-date-col:nth-child(2) input,
.tt-date-col:nth-child(2) select { border-right: 1px solid rgba(255,255,255,.05); }
.tt-date-col:last-child input,
.tt-date-col:last-child select { border-radius: 0 var(--tt-radius) var(--tt-radius) 0; }
.tt-date-col input::placeholder { color: rgba(232,224,208,.38); font-weight: 400; opacity: .5; }
.tt-date-col select option,
select.tt-select option { background: #1a1a18; color: var(--tt-text); }
/* Chrome autofill override — prevent white bg */
.tt-date-col input:-webkit-autofill,
.tt-date-col input:-webkit-autofill:hover,
.tt-date-col input:-webkit-autofill:focus,
.tt-date-col select:-webkit-autofill,
.tt-date-col select:-webkit-autofill:hover,
.tt-date-col select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0c0c0a inset !important;
  -webkit-text-fill-color: var(--tt-text, #e8e0d0) !important;
  caret-color: var(--tt-text, #e8e0d0);
  transition: background-color 5000s ease-in-out 0s;
}
.tt-date-col input:focus,
.tt-date-col input:focus-visible,
.tt-date-col select:focus,
.tt-date-col select:focus-visible {
  border-color: rgba(200,80,64,.5);
  background-color: rgba(200,80,64,.04);
  box-shadow: 0 0 16px rgba(200,80,64,.08), inset 0 1px 2px rgba(0,0,0,.1);
  outline: none !important; -webkit-appearance: none;
  z-index: 1; position: relative;
}
#tt-field-birth.is-valid .tt-date-col input,
#tt-field-birth.is-valid .tt-date-col input:focus,
#tt-field-birth.is-valid .tt-date-col select,
#tt-field-birth.is-valid .tt-date-col select:focus {
  border-color: rgba(200,80,64,.35) !important;
  background: linear-gradient(180deg, rgba(200,80,64,.03) 0%, rgba(255,255,255,.02) 100%) !important;
  box-shadow: 0 0 12px rgba(200,80,64,.06), inset 0 1px 2px rgba(0,0,0,.1) !important;
  outline: none !important;
}
#tt-field-birth.is-error .tt-date-col input,
#tt-field-birth.is-error .tt-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 Select (JS-built) — body-appended panels ── */
.tt-csel { position: relative; flex: 1; }
.tt-csel select { display: none !important; }
.tt-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(--tt-text); font-family: 'Lexend Deca', system-ui, sans-serif;
  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; box-sizing: border-box;
}
.tt-date-col:first-child .tt-csel-trigger {
  border-radius: var(--tt-radius) 0 0 var(--tt-radius);
  border-right: 1px solid rgba(255,255,255,.05);
}
.tt-date-col:nth-child(2) .tt-csel-trigger { border-right: 1px solid rgba(255,255,255,.05); }
.tt-date-col:last-child .tt-csel-trigger { border-radius: 0 var(--tt-radius) var(--tt-radius) 0; }
.tt-csel-val { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tt-csel-val--ph { color: rgba(232,224,208,.38); }
.tt-csel-arr { flex-shrink: 0; margin-left: 6px; line-height: 0; transition: transform .2s; }
.tt-csel.is-open .tt-csel-arr { transform: rotate(180deg); }
.tt-csel-trigger:focus,
.tt-csel.is-open .tt-csel-trigger {
  border-color: rgba(200,80,64,.5);
  background: linear-gradient(180deg, rgba(200,80,64,.04) 0%, rgba(255,255,255,.02) 100%);
  box-shadow: 0 0 16px rgba(200,80,64,.08), inset 0 1px 2px rgba(0,0,0,.1);
}
#tt-field-birth.is-valid .tt-csel-trigger {
  border-color: rgba(200,80,64,.35) !important;
  background: linear-gradient(180deg, rgba(200,80,64,.03) 0%, rgba(255,255,255,.02) 100%) !important;
  box-shadow: 0 0 12px rgba(200,80,64,.06), inset 0 1px 2px rgba(0,0,0,.1) !important;
}
#tt-field-birth.is-error .tt-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;
}
.tt-csel-panel {
  position: fixed;
  background: linear-gradient(180deg, rgba(26,22,14,.99) 0%, #0e0c09 100%);
  border: 1px solid rgba(200,80,64,.38);
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0,0,0,.75), inset 0 0 0 1px rgba(200,80,64,.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(200,80,64,.22) transparent;
}
.tt-csel-panel::-webkit-scrollbar { width: 3px; }
.tt-csel-panel::-webkit-scrollbar-track { background: transparent; }
.tt-csel-panel::-webkit-scrollbar-thumb { background: rgba(200,80,64,.25); border-radius: 2px; }
.tt-csel-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.tt-csel-opt {
  padding: 9px 14px; text-align: center;
  font-family: 'Lexend Deca', system-ui, sans-serif; font-size: .95rem;
  color: rgba(232,224,208,.7); cursor: pointer;
  transition: background .1s, color .1s;
}
.tt-csel-opt:hover { background: rgba(200,80,64,.09); color: var(--tt-jade-light); }
.tt-csel-opt--sel { color: var(--tt-jade-light); background: rgba(200,80,64,.07); font-weight: 600; }
.tt-csel-opt--ph {
  color: rgba(232,224,208,.32); font-style: italic;
  border-bottom: 1px solid rgba(200,80,64,.12); padding: 8px 14px;
}

/* ── Hour select (standalone) — native fallback + custom select ── */
select.tt-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c85040' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--tt-radius);
  padding: 16px 34px 16px 16px;
  color: var(--tt-text); font-family: 'Lexend Deca', system-ui, sans-serif;
  font-size: 1rem; font-weight: 400; letter-spacing: .05em;
  outline: none; cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.15);
  transition: border-color .35s, box-shadow .35s, background-color .35s;
}
select.tt-select:focus,
select.tt-select:focus-visible {
  border-color: rgba(200,80,64,.5);
  background-color: rgba(200,80,64,.04);
  box-shadow: 0 0 16px rgba(200,80,64,.08), inset 0 1px 2px rgba(0,0,0,.1);
  outline: none !important;
}
.tt-form-group .tt-csel-trigger {
  border-radius: var(--tt-radius);
}

/* ── Gender Toggle Cards — Âm Dương ── */
.tt-gender-row {
  display: flex; gap: 12px;
}
.tt-gender-card {
  flex: 1; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 18px 12px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.01) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--tt-radius);
  cursor: pointer; outline: none;
  color: rgba(232,224,208,.35);
  transition: border-color .4s, color .4s, background .4s, box-shadow .4s, transform .15s;
  font-family: 'Lexend Deca', system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
}
.tt-gender-card:hover {
  border-color: rgba(200,80,64,.25);
  color: rgba(232,224,208,.55);
  background: linear-gradient(180deg, rgba(200,80,64,.03) 0%, rgba(255,255,255,.01) 100%);
}
.tt-gender-card:active {
  transform: scale(.97);
}
/* ── Active state ── */
.tt-gender-card.is-active {
  border-color: rgba(200,80,64,.55);
  color: var(--tt-text);
  background: linear-gradient(180deg, rgba(200,80,64,.08) 0%, rgba(200,80,64,.02) 100%);
  box-shadow: 0 0 20px rgba(200,80,64,.10), inset 0 0 20px rgba(200,80,64,.04);
}
/* ── Portal ring — spins briefly on select ── */
.tt-gc-ring {
  position: absolute; top: 50%; left: 50%;
  width: 90%; aspect-ratio: 1;
  border: 1.5px solid transparent;
  border-top-color: rgba(200,80,64,.4);
  border-right-color: rgba(200,80,64,.15);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.tt-gender-card.is-active .tt-gc-ring {
  opacity: 1;
  animation: ttGcRingSpin 8s linear infinite;
  will-change: transform;
}
@keyframes ttGcRingSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* ── Flash spin on selection change ── */
.tt-gender-card.tt-gc-flash .tt-gc-ring {
  opacity: 1;
  animation: ttGcRingFlash .6s ease-out forwards;
}
@keyframes ttGcRingFlash {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(.7); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(270deg) scale(1); }
}
/* ── Trigram SVG ── */
.tt-gc-trigram {
  width: 32px; height: 32px;
  transition: color .4s, filter .4s;
}
.tt-gender-card.is-active .tt-gc-trigram {
  filter: drop-shadow(0 0 6px rgba(200,80,64,.35));
}
/* ── Name text ── */
.tt-gc-name {
  font-size: 1.05rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  transition: color .4s, text-shadow .4s;
  margin-top: 2px;
}
.tt-gender-card.is-active .tt-gc-name {
  color: var(--tt-jade-light);
  text-shadow: 0 0 12px rgba(200,80,64,.3);
}
/* ── Sub text ── */
.tt-gc-sub {
  font-size: .75rem; font-weight: 400;
  letter-spacing: .15em; text-transform: uppercase;
  opacity: .4;
  transition: opacity .4s;
}
.tt-gender-card.is-active .tt-gc-sub {
  opacity: .7;
}
/* ── Seal character watermark ── */
.tt-gc-seal {
  position: absolute; top: 6px; right: 8px;
  font-family: 'Noto Serif SC', 'SimSun', serif;
  font-size: 1.3rem; font-weight: 700;
  opacity: .06; pointer-events: none;
  line-height: 1;
  transition: opacity .4s;
}
.tt-gender-card.is-active .tt-gc-seal {
  opacity: .12;
}
/* ── L-bracket corners ── */
.tt-gc-corner {
  position: absolute;
  width: 10px; height: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s;
}
.tt-gc-corner::before,
.tt-gc-corner::after {
  content: ''; position: absolute;
  background: var(--tt-jade);
  transition: background .4s;
}
.tt-gc-corner--tl { top: 4px; left: 4px; }
.tt-gc-corner--tl::before { top: 0; left: 0; width: 10px; height: 1.5px; }
.tt-gc-corner--tl::after  { top: 0; left: 0; width: 1.5px; height: 10px; }
.tt-gc-corner--br { bottom: 4px; right: 4px; }
.tt-gc-corner--br::before { bottom: 0; right: 0; width: 10px; height: 1.5px; }
.tt-gc-corner--br::after  { bottom: 0; right: 0; width: 1.5px; height: 10px; }
.tt-gender-card.is-active .tt-gc-corner {
  opacity: .6;
}
/* ── Breathing glow for active card ── */
.tt-gender-card.is-active::before {
  content: ''; position: absolute; inset: -1px;
  border-radius: var(--tt-radius);
  background: transparent;
  box-shadow: 0 0 16px rgba(200,80,64,.08);
  animation: ttGcBreath 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ttGcBreath {
  0%, 100% { opacity: .85; }
  50% { opacity: 1; }
}
/* ── Focus visible for keyboard ── */
.tt-gender-card:focus-visible {
  outline: 2px solid var(--tt-jade);
  outline-offset: 2px;
}
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .tt-gc-ring { animation: none !important; }
  .tt-gender-card::before { animation: none !important; }
  .tt-gender-card.tt-gc-flash .tt-gc-ring { animation: none !important; }
}

/* ── Submit button ── (SYNC: Lexend Deca + .22em spacing like SDT) */
.tt-submit-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px 24px; margin-top: 28px;
  background: linear-gradient(135deg, rgba(200,80,64,.15) 0%, rgba(200,80,64,.08) 100%);
  border: 1px solid rgba(200,80,64,.4);
  border-radius: var(--tt-radius);
  cursor: pointer; overflow: hidden;
  font-family: 'Lexend Deca', system-ui, sans-serif;
  font-size: .92rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--tt-jade-light); font-weight: 700;
  transition: background .25s, border-color .25s, transform .15s;
}
/* FIX #6: Shimmer text animation */
.tt-submit-btn .tt-submit-text {
  position: relative; z-index: 3;
  background: linear-gradient(90deg, #c85040 0%, #e07060 25%, #d8a8a0 30%, #e07060 35%, #c85040 60%);
  background-size: 300% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ttBtnShimmer 5s ease-in-out infinite;
}
@keyframes ttBtnShimmer { to { background-position: -300% center; } }
.tt-submit-btn:hover .tt-submit-text {
  background: none; -webkit-text-fill-color: var(--tt-jade-light);
  color: var(--tt-jade-light); animation: none;
}
.tt-submit-btn:hover {
  background: linear-gradient(135deg, rgba(200,80,64,.22) 0%, rgba(200,80,64,.12) 100%);
  border-color: rgba(200,80,64,.65); transform: translateY(-1px);
}
.tt-submit-btn:active { transform: translateY(0); }
.tt-submit-btn[disabled] { opacity: .6; cursor: not-allowed; }
.tt-submit-btn[disabled] .tt-submit-text { animation: none; -webkit-text-fill-color: var(--tt-jade-light); }
/* ── Analyzing state — pulse glow + text shimmer ── */
.tt-submit-btn.is-analyzing {
  opacity: 1 !important;
  cursor: wait;
  animation: ttAnalyzePulse 1s ease-in-out infinite;
}
.tt-submit-btn.is-analyzing .tt-submit-text {
  background: linear-gradient(90deg, var(--tt-jade) 0%, #d8a8a0 40%, var(--tt-jade-light) 50%, #d8a8a0 60%, var(--tt-jade) 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: ttAnalyzeShimmer 1.2s linear infinite !important;
}
.tt-submit-btn.is-analyzing .tt-portal-ring--outer { animation: ttBaguaSpin 2s linear infinite !important; will-change: transform; }
.tt-submit-btn.is-analyzing .tt-portal-ring--inner { animation: ttBaguaSpin 1.2s linear infinite reverse !important; }
.tt-submit-btn.is-analyzing .tt-btn-glow { opacity: 1; }
@keyframes ttAnalyzePulse {
  0%, 100% { opacity: .85; }
  50%      { opacity: 1; }
}
@keyframes ttAnalyzeShimmer {
  to { background-position: 200% center; }
}
/* FIX #6: Border glow overlay */
.tt-btn-glow {
  position: absolute; inset: -1px;
  background: linear-gradient(135deg, rgba(200,80,64,0) 0%, rgba(200,80,64,.15) 50%, rgba(200,80,64,0) 100%);
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.tt-submit-btn:hover .tt-btn-glow { opacity: 1; }
/* Loader */
.tt-submit-loader {
  display: none; width: 18px; height: 18px; flex-shrink: 0;
  border: 2px solid rgba(200,80,64,.2); border-top-color: var(--tt-jade);
  border-radius: 50%; animation: ttSpinFast .7s linear infinite; will-change: transform;
}
.tt-submit-btn[disabled] .tt-submit-loader { display: inline-block; }
@keyframes ttSpinFast { to { transform: rotate(360deg); } }

/* ── Trust line ── (synced với SDT: stars + quote) */
.tt-trust {
  text-align: center; font-size: .75rem;
  color: var(--tt-text-dim); margin-top: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px 8px;
}
.tt-trust-count { color: var(--tt-jade-light); font-weight: 600; font-family: 'Lexend Deca', sans-serif; }
.tt-trust-dot { color: var(--tt-jade); opacity: .5; }
.tt-trust-stars { color: var(--tt-jade); letter-spacing: 1px; }
.tt-trust-quote { font-style: italic; opacity: .7; }

/* ── Seal ── */
.tt-seal { text-align: center; margin-top: 16px; opacity: .6; }

/* ── Entrance animations ── */
/* ENTRANCE: IntersectionObserver transition (synced 1-1 from SDT .phone-entrance) */
.tt-entrance {
  opacity: 0; transform: translateY(18px);
  transition: opacity .65s ease, transform .65s ease;
}
.tt-entrance.is-visible { opacity: 1; transform: none; }
.tt-entrance-1.is-visible { transition-delay: 0s; }
.tt-entrance-2.is-visible { transition-delay: .12s; }
.tt-entrance-3.is-visible { transition-delay: .22s; }
.tt-entrance-4.is-visible { transition-delay: .32s; }
.tt-entrance-5.is-visible { transition-delay: .42s; }
.tt-entrance-6.is-visible { transition-delay: .52s; }
.tt-entrance-7.is-visible { transition-delay: .62s; }
.tt-entrance-8.is-visible { transition-delay: .72s; }
@media (prefers-reduced-motion: reduce) { .tt-entrance { transition: none; opacity: 1; transform: none; } }

/* ── [hidden] override — enforce display:none even when CSS sets display:flex ── */
#tt-form-section[hidden],
#tt-cinematic[hidden],
#tt-results[hidden] { display: none !important; }

/* ═══════════════ CINEMATIC — FULL-SCREEN FIXED OVERLAY (Tứ Trụ Mandala) ═══════════════ */
.tt-cinematic {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999;
  background: #080a08;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; overflow: hidden;
  overscroll-behavior: none; /* FIX MD3: prevent iOS rubber-band scroll */
}
/* Background radial glow */
.tt-cine-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 45%, rgba(200,80,64,.12) 0%, transparent 70%);
  animation: ttCineGlowPulse 4s ease-in-out infinite;
}
@keyframes ttCineGlowPulse {
  0%,100% { opacity: .6; transform: scale(.95); }
  50%     { opacity: 1; transform: scale(1.08); }
}
/* L-bracket corners */
.tt-cinematic::before, .tt-cinematic::after {
  content: ''; position: absolute; width: 28px; height: 28px;
  border-color: rgba(200,80,64,.5); border-style: solid; z-index: 1;
}
.tt-cinematic::before { top: 16px; left: 16px; border-width: 2px 0 0 2px; }
.tt-cinematic::after  { bottom: 16px; right: 16px; border-width: 0 2px 2px 0; }
.tt-cine-card {
  text-align: center; position: relative; max-width: 400px; width: 100%; z-index: 2;
}
.tt-cine-card::before, .tt-cine-card::after {
  content: ''; position: fixed; width: 28px; height: 28px;
  border-color: rgba(200,80,64,.5); border-style: solid;
}
.tt-cine-card::before { top: 16px; right: 16px; border-width: 2px 2px 0 0; }
.tt-cine-card::after  { bottom: 16px; left: 16px; border-width: 0 0 2px 2px; }

/* ── Mandala container ── */
.tt-cine-mandala {
  width: 240px; height: 240px; margin: 0 auto 32px;
  position: relative;
}
.tt-cine-mandala svg { width: 100%; height: 100%; }

/* ── Orbital rings — slow spin ── */
.tt-cine-orbit--1 { animation: ttCineOrbit 25s linear infinite; transform-origin: 100px 100px; }
.tt-cine-orbit--2 { animation: ttCineOrbit 18s linear infinite reverse; transform-origin: 100px 100px; }
@keyframes ttCineOrbit { to { transform: rotate(360deg); } }

/* ── Energy flow — stroke-dashoffset animated ── */
.tt-cine-energy {
  stroke-dasharray: 30 520;
  animation: ttCineFlow 3s linear infinite;
  transform-origin: 100px 100px;
}
@keyframes ttCineFlow { to { stroke-dashoffset: -550; } }

/* ── Element nodes — sequential pulse glow ── */
.tt-cine-node { animation: ttCineNodePulse 2.5s ease-in-out infinite; }
.tt-cine-node--hoa  { animation-delay: 0s; }
.tt-cine-node--tho  { animation-delay: .5s; }
.tt-cine-node--kim  { animation-delay: 1s; }
.tt-cine-node--thuy { animation-delay: 1.5s; }
.tt-cine-node--moc  { animation-delay: 2s; }
@keyframes ttCineNodePulse {
  0%,100% { opacity: .5; }
  40%,60% { opacity: 1; }
}
.tt-cine-node-glow { animation: ttCineGlowNode 2.5s ease-in-out infinite alternate; }
@keyframes ttCineGlowNode {
  0%   { opacity: .2; }
  100% { opacity: .6; }
}

/* ── Element chars — breathing ── */
.tt-cine-char { animation: ttCineCharBreath 3s ease-in-out infinite; }
@keyframes ttCineCharBreath {
  0%,100% { opacity: .6; }
  50%     { opacity: 1; }
}

/* ── Taiji (Yin-Yang) — slow rotate ── */
.tt-cine-taiji {
  animation: ttCineTaiji 12s linear infinite;
  transform-origin: 100px 100px;
}
@keyframes ttCineTaiji { to { transform: rotate(360deg); } }

/* ── Text — shimmer + pulse ── */
.tt-cine-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.08rem; margin-bottom: 24px;
  min-height: 1.5em; letter-spacing: .05em;
  background: linear-gradient(90deg, var(--tt-jade) 0%, var(--tt-jade-light) 45%, #d8a8a0 50%, var(--tt-jade-light) 55%, var(--tt-jade) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ttCineTextShimmer 3s linear infinite;
}
@keyframes ttCineTextShimmer { to { background-position: 200% center; } }

/* ── Progress bar — wider, glowing ── */
.tt-cine-bar {
  width: 280px; height: 4px; background: rgba(200,80,64,.1);
  border-radius: 2px; margin: 0 auto; overflow: hidden;
  box-shadow: 0 0 12px rgba(200,80,64,.08);
}
.tt-cine-bar-fill {
  width: 0%; height: 100%;
  background: linear-gradient(90deg, var(--tt-jade-dark), var(--tt-jade), var(--tt-jade-light));
  transition: width .4s ease;
  box-shadow: 0 0 8px var(--tt-jade-glow);
}

/* ═══════════════ RESULTS ═══════════════ */
.tt-results { padding: 32px 20px 48px; /* FIX F11: removed max-width 800px — results fill viewport, padding handles readability */ }
/* Result actions are part of the completed journey. Keep them visible and in
   flow; a user must be able to share or start over without hunting for a
   hidden control. */
.tt-results-actions { margin: 28px 0 20px; }
.tt-new-search { display: block; }

.tt-section {
  background: var(--tt-card-bg); border: 1px solid transparent;
  border-radius: var(--tt-radius); padding: 28px 24px; margin-bottom: 24px;
  position: relative; overflow: hidden;
  opacity: 1;
  transform: none;
  animation: none;
  /* Imperial Frame — Tier 1 */
  box-shadow:
    inset 0 0 0 1px var(--tt-jade-subtle),
    0 0 20px rgba(0,0,0,.25),
    0 0 40px var(--tt-jade-subtle);
}

/* L-brackets on sections — 2 via pseudo, 2 via .tt-frame-corner divs */
.tt-section::before, .tt-section::after {
  content: ''; position: absolute; width: 22px; height: 22px;
  border-color: var(--tt-jade); border-style: solid; border-width: 0;
  opacity: .35; z-index: 1;
}
.tt-section::before {
  top: 6px; left: 6px; border-top-width: 1.5px; border-left-width: 1.5px;
  background: radial-gradient(circle at 0 0, var(--tt-jade-subtle) 0%, transparent 70%);
}
.tt-section::after {
  bottom: 6px; right: 6px; border-bottom-width: 1.5px; border-right-width: 1.5px;
  background: radial-gradient(circle at 100% 100%, var(--tt-jade-subtle) 0%, transparent 70%);
}

/* ── Share / Copy URL row ── */
.tt-share-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.tt-share-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 16px; min-height: 44px; background: transparent;
  border: 1px solid rgba(200,80,64,.3); border-radius: var(--tt-radius);
  color: rgba(232,224,208,.72); font-size: .80rem;
  font-family: 'Be Vietnam Pro', sans-serif; letter-spacing: .04em;
  cursor: pointer; transition: border-color .2s, color .2s;
}
.tt-share-btn:hover { border-color: var(--tt-jade); color: var(--tt-jade-light); }
.tt-share-btn-icon { display: flex; flex-shrink: 0; }
.tt-share-copied {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .78rem; color: var(--tt-jade-light);
}

/* ── Section header ── */
.tt-sect-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px; padding-bottom: 12px;
  border-bottom: 1px solid var(--tt-border);
}
.tt-sect-icon { display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.tt-sect-icon svg { display: block; }
.tt-sect-title {
  font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 700;
  color: var(--tt-jade-light);
}

/* ── Element badge (Kim/Mộc/Thủy/Hỏa/Thổ) ── */

/* ── Hero number (element kanji) ── */
.tt-hero {
  text-align: center; margin: 16px 0;
}

/* ── Info grid ── */
.tt-info-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin: 16px 0;
}
.tt-info-item {
  background: var(--tt-jade-subtle); border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius); padding: 12px; text-align: center;
}
.tt-info-item > .tt-info-label {
  display: block;
  margin-bottom: 6px;
  line-height: 1.3;
}
.tt-info-item > .tt-info-value {
  display: block;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.tt-info-label { font-size: .80rem; color: var(--tt-text-dim); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .1em; }
.tt-info-value { font-size: 1rem; font-weight: 600; color: var(--tt-jade-light); }
.tt-info-hint { font-size: .76rem; color: rgba(232,224,208,.76); margin-top: 3px; font-style: italic; }

/* ── Text content blocks ── */
/* Gradient underline on h3 */

/* ═══ FATE CARDS — Thẻ Vận Mệnh ═══ */
/* Watermark */
/* Element emblem */
@keyframes ttFateSpinCW { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes ttFateSpinCCW { to { transform: translate(-50%, -50%) rotate(-360deg); } }
/* Text */
/* Fate card corners */
.tt-fate-card .tt-frame-corner--tr,
.tt-fate-card .tt-frame-corner--bl { width: 16px; height: 16px; }

/* ── Bond symbol (緣) between cards ── */
@keyframes ttBondSpin { to { transform: rotate(360deg); } }

/* ═══ COMPAT DIAGRAM — Trận Pháp ═══ */
@keyframes ttCdSpinCW { to { transform: rotate(360deg); } }
@keyframes ttCdSpinCCW { to { transform: rotate(-360deg); } }

/* ═══ VERDICT — Thiên Phán ═══ */
@keyframes ttVerdictPulse {
  0%, 100% { text-shadow: 0 0 12px rgba(255,255,255,.05); }
  50%      { text-shadow: 0 0 25px currentColor; }
}

/* Score table active row highlight */

/* ── Mobile responsive ── */
@media (max-width: 480px) {
}

/* ── Print & reduced motion ── */
@media print {
}
@media (prefers-reduced-motion: reduce) {
}

/* ═══ MÀU SẮC SECTION UPGRADE ═══ */

/* ── Intro with color wheel ── */
/* Rotating ring on color wheel SVG */
@keyframes ttMauSpin { to { transform: rotate(360deg); } }

/* ── Category groups ── */

/* ── Color swatch stagger animation ── */

/* ── Warning card ── */

/* Nên Tránh colors: slightly desaturated */

/* ── Print + reduced motion ── */
@media print {
}
@media (prefers-reduced-motion: reduce) {
}

/* ── Color swatches ── */

/* ═══ THIÊN SỐ ẤN — SVG Mandala Number Seals ═══ */
.tt-seal-row { display: flex; flex-wrap: wrap; gap: 28px; margin: 20px 0 22px; justify-content: center; }
.tt-seal-svg { width: 100%; height: 100%; display: block; transition: filter .3s, transform .3s; }
.tt-num-seal:hover .tt-seal-svg {
  transform: scale(1.12);
  filter: drop-shadow(0 0 12px rgba(var(--so-rgb, 60,144,112), .4));
}
.tt-num-seal--avoid:hover .tt-seal-svg {
  filter: drop-shadow(0 0 8px rgba(224,96,72,.25));
}
/* ── Seal Number (HTML overlay — immune to SVG rotation) ── */
.tt-seal-num {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Lexend Deca', sans-serif;
  font-size: 1.5rem; font-weight: 700;
  line-height: 1; letter-spacing: .02em;
  pointer-events: none; z-index: 2;
  text-shadow: 0 0 8px rgba(var(--so-rgb, 60,144,112), .3);
}
.tt-seal-num--avoid { opacity: .4; text-shadow: none; }

/* ── Số Group containers ── */

/* ly_giai: now uses .tt-lygiai class (defined in block upgrades section) */

/* Hà Đồ block heading */

/* Legacy pills (keep for other sections that may still use them) */

/* ── Tags ── */

/* ═══ PENTAGON CYCLE DIAGRAM — MYSTIC UPGRADE ═══ */
/* Diagram sub-container (rings center on this, not the full wrap) */

/* ── CSS Rotating rings (Doctor Strange portal) ── */
@keyframes ttPentSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes ttPentSpinRev { to { transform: translate(-50%, -50%) rotate(-360deg); } }

/* Bát Quái trigrams rotation (inside SVG) */
@keyframes ttBaguaSpin { to { transform: rotate(-360deg); } }

/* Pentagon SVG z-index */

/* ── Legend v2 ── */
/* Animated legend line indicators */
.tt-pleg-line {
  display: inline-block; width: 28px; height: 2px; position: relative; overflow: hidden;
}
.tt-pleg-line--sinh {
  background: rgba(200,80,64,.5);
}
.tt-pleg-line--sinh::after {
  content: ''; position: absolute; top: -1px; left: -6px;
  width: 6px; height: 4px; border-radius: 50%;
  background: rgba(200,80,64,.9);
  animation: ttLegDot 1.5s linear infinite;
}
@keyframes ttLegDot { from { left: -6px; } to { left: 28px; } }
@keyframes ttLegPulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

/* Remove old ::before on legs (replaced by .tt-pleg-line) */

/* ── Hint text with shimmer ── */
@keyframes ttShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ═══ IMPERIAL COMPASS — LA BÀN PHONG THỦY ĐẾ VƯƠNG ═══ */

/* ── Hướng block container ── */

/* ── Direction Cards — 2-column balanced ── */
/* L-brackets */
/* Hán tự watermark */
/* Card head */
/* Direction pills */

/* ── Compass SVG wrapper ── */
/* Compass footnote */

/* ── Nạp Âm micro-illustration block ── */
.tt-napam-block {}
.tt-napam-head {
  display: flex; align-items: flex-start; gap: 14px;
}
.tt-napam-illus { flex-shrink: 0; opacity: .75; }

/* ═══ NẠP ÂM CATEGORY CARDS ═══ */
/* -- Category accent colors -- */
.tt-napam-section { --nps-accent: #d4a574; --nps-accent-rgb: 212,165,116; }
.tt-napam-section[data-cat="tinh-cach"]  { --nps-accent: #d4a574; --nps-accent-rgb: 212,165,116; }
.tt-napam-section[data-cat="su-nghiep"]  { --nps-accent: #c85040; --nps-accent-rgb: 60,144,112; }
.tt-napam-section[data-cat="tinh-duyen"] { --nps-accent: #c87890; --nps-accent-rgb: 200,120,144; }
.tt-napam-section[data-cat="tai-chinh"]  { --nps-accent: #c9a96e; --nps-accent-rgb: 201,169,110; }
.tt-napam-section[data-cat="suc-khoe"]   { --nps-accent: #5aada8; --nps-accent-rgb: 90,173,168; }

/* -- Base card -- */
.tt-napam-section {
  position: relative; overflow: hidden;
  margin-top: 16px; padding: 16px 18px 16px 20px;
  border-top: none;
  border-left: 3px solid var(--nps-accent);
  border-radius: 0 var(--tt-radius) var(--tt-radius) 0;
  background: linear-gradient(135deg,
    rgba(var(--nps-accent-rgb),.06) 0%,
    rgba(var(--nps-accent-rgb),.02) 40%,
    transparent 100%);
  box-shadow: inset 0 0 0 1px rgba(var(--nps-accent-rgb),.08);
  transition: transform .3s, box-shadow .3s, background .3s;
}
.tt-napam-section:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(var(--nps-accent-rgb),.12),
    0 4px 20px rgba(var(--nps-accent-rgb),.1),
    0 0 30px rgba(var(--nps-accent-rgb),.05);
}

/* -- Stagger entrance animation -- */

/* -- Hán tự watermark (background) -- */

/* -- Heading icon (small Hán tự) -- */

/* -- Heading -- */
.tt-napam-section h4 {
  position: relative; z-index: 1;
  font-family: 'Playfair Display', serif;
  font-size: .92rem;
  color: var(--nps-accent);
  margin: 0 0 8px;
  letter-spacing: .03em;
  display: flex; align-items: center;
}

/* -- Text content -- */
.tt-napam-section p {
  position: relative; z-index: 1;
  margin: 0; line-height: 1.75;
}

/* -- Lời Khuyên (scroll/parchment style) -- */
.tt-napam-loikhuyen {
  position: relative;
  margin-top: 18px; padding: 14px 18px;
  background: linear-gradient(135deg, rgba(201,169,110,.06) 0%, rgba(201,169,110,.02) 100%);
  border: none; border-radius: var(--tt-radius);
  box-shadow: inset 0 0 0 1px rgba(201,169,110,.15);
  display: flex; align-items: flex-start; gap: 8px;
  animation: none;
}
.tt-napam-loikhuyen::before,
.tt-napam-loikhuyen::after {
  content: ''; position: absolute;
  width: 14px; height: 14px;
  opacity: .3; pointer-events: none;
}
.tt-napam-loikhuyen::before {
  top: 5px; left: 5px;
  border-top: 1.5px solid var(--tt-gold, #c9a96e);
  border-left: 1.5px solid var(--tt-gold, #c9a96e);
}
.tt-napam-loikhuyen::after {
  bottom: 5px; right: 5px;
  border-bottom: 1.5px solid var(--tt-gold, #c9a96e);
  border-right: 1.5px solid var(--tt-gold, #c9a96e);
}
.tt-napam-loikhuyen .tt-nps-icon {
  flex-shrink: 0; margin-top: 2px;
  color: var(--tt-jade); border: none; width: auto; height: auto;
  font-size: 1rem; opacity: .8;
}
.tt-napam-loikhuyen p {
  margin: 0; color: var(--tt-jade-light);
  font-style: italic; line-height: 1.7;
  font-size: .88rem;
}

/* -- Print: strip effects -- */
@media print {
  .tt-napam-section { box-shadow: none !important; border-left: 2px solid #999 !important; background: none !important; animation: none !important; }
  .tt-napam-loikhuyen { box-shadow: none !important; background: none !important; }
  .tt-napam-loikhuyen::before, .tt-napam-loikhuyen::after { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-napam-section, .tt-napam-loikhuyen { animation: none !important; transition: none !important; }
}

/* Deep content blocks (per-hành detailed guidance) */
/* ═══ THIÊN CƠ ỨNG DỤNG — Premium Info Card ═══ */

/* ═══ CỔ THƯ CHÚ GIẢI — Ancient Scroll Quote ═══ */

/* ═══ THIÊN CƠ CHỈ NAM — Master Guide Panel ═══ */

/* Tam Tai warning state */

/* ═══ CHUYÊN ẤN — Personalized Seal Card ═══ */
.tt-napam-tip {
  position: relative; overflow: hidden;
  margin-top: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(var(--nt-rgb, 201,169,110), .05) 0%, transparent 60%);
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(var(--nt-rgb, 201,169,110), .1);
  animation: none;
}
.tt-napam-tip::before {
  content: ''; position: absolute; top: 5px; left: 5px;
  width: 12px; height: 12px;
  border-top: 1.5px solid var(--nt-color, rgba(201,169,110,.4));
  border-left: 1.5px solid var(--nt-color, rgba(201,169,110,.4));
  opacity: .3; pointer-events: none;
}
.tt-napam-tip::after {
  content: ''; position: absolute; bottom: 5px; right: 5px;
  width: 12px; height: 12px;
  border-bottom: 1.5px solid var(--nt-color, rgba(201,169,110,.4));
  border-right: 1.5px solid var(--nt-color, rgba(201,169,110,.4));
  opacity: .3; pointer-events: none;
}
.tt-napam-tip h3 {
  font-family: 'Playfair Display', serif;
  font-size: .9rem; margin: 0 0 8px;
  display: flex; align-items: center; gap: 6px;
  position: relative; z-index: 1;
}
.tt-napam-tip p {
  margin: 0; line-height: 1.7; font-style: italic;
  position: relative; z-index: 1;
}

/* Shared SVG heading graphic */

/* ── P6: Dự Báo & Tương Hợp ── */

/* ═══ ZODIAC CARDS — Imperial Tier System ═══ */

/* ── Card tiers: hop (jade) / xung (red) / neutral (gold) ── */
/* L-brackets */
/* Hán tự watermark */

/* ── Xung card — red accent ── */
/* ── Neutral card — gold accent ── */

/* ── SVG heading graphics ── */

/* ── "Bạn" badge on zodiac tags ── */
/* "Bạn" tag glow */
/* Xung opponent tag */

/* ── SVG connectors (bridge / bolt) ── */

/* ── Element "hóa" badge ── */

/* ── Hóa Giải advice card (Lục Xung) ── */

/* Sao Chiếu Mệnh */
/* ═══ SAO CHIẾU MỆNH — Celestial Star Cards ═══ */
/* L-brackets */

/* ═══ TAM TAI — Imperial Warning Card ═══ */
.tt-tt-card {
  position: relative; overflow: hidden;
  border-left: 3px solid rgba(var(--tt-rgb, 80,168,112), .35) !important;
  background: linear-gradient(135deg, rgba(var(--tt-rgb, 80,168,112), .03) 0%, transparent 50%) !important;
}
.tt-tt-card--danger {
  border-left-color: rgba(224,96,72,.4) !important;
  background: linear-gradient(135deg, rgba(224,96,72,.04) 0%, transparent 50%) !important;
  box-shadow: inset 0 0 0 1px rgba(224,96,72,.08), 0 0 15px rgba(224,96,72,.06) !important;
}
/* L-brackets */
.tt-tt-card::before {
  content: ''; position: absolute; top: 6px; right: 6px;
  width: 14px; height: 14px;
  border-top: 1.5px solid rgba(var(--tt-rgb), .3);
  border-right: 1.5px solid rgba(var(--tt-rgb), .3);
  pointer-events: none;
}
.tt-tt-card::after {
  content: ''; position: absolute; bottom: 6px; right: 6px;
  width: 14px; height: 14px;
  border-bottom: 1.5px solid rgba(var(--tt-rgb), .3);
  border-right: 1.5px solid rgba(var(--tt-rgb), .3);
  pointer-events: none;
}
.tt-tt-warn-svg { vertical-align: middle; margin-right: 4px; }
/* SVG Timeline */
.tt-tt-timeline {
  display: flex; justify-content: center;
  margin: 8px 0 16px;
}
.tt-tt-timeline-svg { width: 100%; max-width: 200px; height: auto; }

@media (max-width: 640px) {
}

/* Can Chi block (biệt danh + mô tả + năm sinh) */
.tt-canchi-years .tt-info-label {
  font-size: .82rem;
  color: var(--tt-text-dim);
  margin: 0;
}

/* Hop Tuoi detail block (hành×hành analysis) */

/* ── Tứ Trụ diagram (in results) ── */
.tt-diagram-wrap { text-align: center; margin: 16px 0; }
.tt-diagram-wrap svg { max-width: 280px; }

/* ── Imperial Frame utility classes ── */
.tt-info-note {
  background: rgba(201,169,110,.06); border: none; border-radius: var(--tt-radius);
  padding: 10px 14px; margin-bottom: 12px; font-size: .84rem; color: var(--tt-text-dim);
  box-shadow: inset 0 0 0 1px rgba(201,169,110,.15);
}
.tt-info-note svg, .tt-disclaimer svg, .tt-rf-disclaimer svg {
  width: 16px; height: 16px; vertical-align: text-bottom; margin-right: 4px; opacity: .7;
}

/* ── Giờ Tý đêm 23h — 2 trường phái (chữ to, dễ đọc) ── */
.tt-section--gioty { margin-bottom: 18px; }
.tt-gioty-box {
  border-radius: var(--tt-radius);
  padding: 18px 18px 16px;
  background: var(--tt-jade-subtle);
  box-shadow: inset 0 0 0 1px var(--tt-jade-subtle), inset 0 0 0 2px rgba(255,255,255,.02);
}
.tt-gioty-lead {
  margin: 0 0 14px; font-size: 1.08rem; line-height: 1.55; color: var(--tt-text);
}
.tt-gioty-lead strong { color: var(--tt-jade-light); }
.tt-gioty-clock { font-size: 1.3rem; margin-right: 4px; vertical-align: -2px; }
.tt-gioty-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.tt-gioty-card {
  border-radius: var(--tt-radius); padding: 14px 14px 12px;
  background: rgba(255,255,255,.015);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.tt-gioty-card--main {
  box-shadow: inset 0 0 0 1.5px var(--tt-jade);
  background: var(--tt-jade-subtle);
}
.tt-gioty-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px;
}
.tt-gioty-num { font-size: 1.25rem; color: var(--tt-jade-light); font-weight: 700; }
.tt-gioty-name {
  font-size: 1.02rem; font-weight: 700; color: var(--tt-text);
  font-family: 'Lexend Deca', sans-serif;
}
.tt-gioty-badge {
  margin-left: auto; font-size: .75rem; padding: 2px 8px; border-radius: 999px;
  color: var(--tt-text-dim);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  white-space: nowrap;
}
.tt-gioty-badge--main {
  color: var(--tt-jade-light);
  box-shadow: inset 0 0 0 1px var(--tt-jade);
}
.tt-gioty-row {
  display: flex; align-items: baseline; gap: 8px; margin-top: 8px;
}
.tt-gioty-key {
  flex: 0 0 72px; font-size: .92rem; color: var(--tt-text-dim);
}
.tt-gioty-nc-chip {
  font-size: 1.18rem; font-weight: 700; padding: 3px 12px; border-radius: var(--tt-radius);
  background: rgba(200,160,80,.12); color: var(--tt-jade-light);
  border: 1px solid rgba(200,160,80,.25);
}
.tt-gioty-nc-chip small { font-size: .8rem; font-weight: 400; opacity: .8; }
.tt-gioty-trungay { font-size: 1.12rem; font-weight: 600; color: var(--tt-text); }
.tt-gioty-han { font-size: .95rem; opacity: .65; margin-left: 2px; }
.tt-gioty-foot {
  margin: 14px 0 0; font-size: .92rem; line-height: 1.55; color: var(--tt-text-dim);
}
.tt-gioty-foot strong { color: var(--tt-jade-light); }
@media (max-width: 560px) {
  .tt-gioty-grid { grid-template-columns: 1fr; }
  .tt-gioty-lead { font-size: 1.02rem; }
}

/* ── Disclaimer ── */
.tt-disclaimer {
  text-align: center; padding: 16px; margin: 24px 0;
  border: none; border-radius: var(--tt-radius);
  /* Imperial Frame — Tier 3 */
  box-shadow: inset 0 0 0 1px var(--tt-jade-subtle);
  font-size: .86rem; color: var(--tt-text-dim); line-height: 1.6;
}

/* ── New search button ── */
.tt-new-search { text-align: center; margin-top: 24px; }
.tt-new-btn {
  padding: 12px 32px; background: transparent;
  border: 1px solid var(--tt-jade); border-radius: var(--tt-radius);
  color: var(--tt-jade); font-size: .9rem; cursor: pointer;
  font-family: 'Lexend Deca', sans-serif; letter-spacing: .05em;
  transition: background .3s, color .3s;
}
.tt-new-btn:hover { background: var(--tt-jade); color: var(--tt-bg); }

/* ── Footer meander ── */
.tt-footer-meander { margin-top: 32px; }

/* ── h2 section titles ── */
h2.tt-sect-title {
  font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 700;
  color: var(--tt-jade-light); margin: 0;
}

/* ── Focus visible states ── */
.tt-submit-btn:focus-visible,
.tt-new-btn:focus-visible,
.tt-btt:focus-visible,
.tt-share-btn:focus-visible { outline: 2px solid var(--tt-jade); outline-offset: 3px; }

/* ── Summary card ── */
.tt-summary-card {
  background: rgba(200,80,64,.05); border: 1px solid transparent;
  border-radius: var(--tt-radius); padding: 16px 20px; margin-bottom: 20px;
  display: flex; gap: 16px; align-items: flex-start;
  position: relative; overflow: hidden;
  /* Imperial Frame — Tier 1 (overridden by v2 CSS below with element colors) */
}
.tt-sum-left { flex-shrink: 0; }
.tt-sum-char { font-size: 3rem; font-family: 'Noto Serif SC','KaiTi',serif; line-height: 1; opacity: .65; }
.tt-sum-right { flex: 1; min-width: 0; }
.tt-sum-hanh { font-family: 'Lexend Deca', sans-serif; font-size: 1rem; font-weight: 400; margin-bottom: 6px; }
.tt-sum-overview { font-size: .9rem; color: var(--tt-text-dim); line-height: 1.65; margin-bottom: 10px; }
.tt-sum-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-sum-chip { font-size: .78rem; padding: 3px 10px; border: 1px solid rgba(200,80,64,.3); border-radius: 12px; color: var(--tt-jade-light); }

/* ── "Thuật ngữ" section heading ── */

/* ── 3-layer collapsible v2 ── */
/* Arrow chevron */
/* Content panel */

/* ── Collapsible content: classical → explain flow ── */

/* ── Why-box (Tại sao?) ── */

/* ═══ EEAT SOURCE FOOTER — Cổ Thư Ấn Triện ═══ */
/* L-brackets (gold, 4 corners) */
/* Seal stamp (cinnabar red) */
/* Citation text */

/* ── Pentagon interactive tooltip ── */

/* ── Compass tooltip ── */

/* ── Actual color swatches ── */

/* ── Hà Đồ wrapper ── */

/* ── Compat visual ── */

/* ── Tương Quan explain ── */

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 820px) {
  /* Form section: reduce padding on tablet */
  .tt-form-section { padding: 40px 20px 60px; }
  /* Portrait compact — tsh.css handles column flip */
  .tt-cycle-diagram { max-width: 100px; }
}

@media (max-width: 768px) {
  .tt-form-title { font-size: clamp(1.7rem, 8vw, 2.4rem); height: auto; }
  .tt-form-section { padding: 32px 16px 32px; }
  .tt-form-box { padding: 28px 20px 24px; }
  .tt-input { padding: 0 14px 0 44px; height: 46px; font-size: 1rem; }
  .tt-date-col input { font-size: 1rem; padding: 12px 6px; }
  .tt-csel-trigger { padding: 12px 10px; font-size: .95rem; }
  .tt-gender-card { padding: 14px 10px 12px; }
  .tt-gc-trigram { width: 28px; height: 28px; }
  .tt-gc-name { font-size: .95rem; }
  .tt-form-sub { margin-bottom: 20px; }
  .tt-results { padding: 20px 12px 40px; }
  .tt-section { padding: 20px 16px; }
  .tt-info-grid { grid-template-columns: 1fr 1fr; }
  .tt-trust { flex-wrap: wrap; gap: 3px 6px; margin-top: 12px; }
  /* Orbs smaller on mobile */
  .tt-orb-1 { width: 300px; height: 300px; top: -100px; right: -80px; }
  .tt-orb-2 { width: 250px; height: 250px; }
  .tt-orb-3 { display: none; }
  /* Hero portrait — compact */
  .tt-pyth-jade .tsh-hero-runes { display: none; }
  .tt-badge-row { gap: 4px; }
  .tt-badge { font-size: .75rem !important; padding: 2px 6px !important; }
  .tt-pyth-jade .tsh-pyth-quote { font-size: .85rem !important; }
  .tt-portrait-deco { margin: 4px 0; }
  .tt-portrait-deco--top svg { width: 28px; height: 28px; }
}

@media (max-width: 480px) {
  .tt-form-title { font-size: clamp(1.5rem, 9vw, 2rem); height: auto; }
  .tt-info-grid { grid-template-columns: 1fr; }
  .tt-form-section { padding: 24px 12px 28px; }
  .tt-form-box { padding: 20px 14px 18px; }
  .tt-input { padding: 0 12px 0 40px; height: 44px; }
  .tt-date-col input { font-size: .95rem; padding: 11px 4px; }
  .tt-csel-trigger { padding: 11px 8px; font-size: .9rem; }
  .tt-gender-row { gap: 8px; }
  .tt-gender-card { padding: 12px 8px 10px; }
  .tt-gc-trigram { width: 24px; height: 24px; }
  .tt-gc-name { font-size: .88rem; letter-spacing: .08em; }
  .tt-gc-sub { font-size: .75rem; }
  .tt-gc-seal { font-size: 1rem; }
  .tt-submit-btn { font-size: .80rem; letter-spacing: .14em; padding: 13px 16px; margin-top: 20px; }
  /* Mobile: ẩn portrait column + divider → form là hero */
  .tt-pyth-jade.tsh-pyth-col--portrait { display: none !important; }
  .tt-cosmos .tsh-pyth-divider { display: none !important; }
}

@media (max-width: 375px) {
  .tt-form-title { font-size: clamp(1.4rem, 10vw, 1.8rem); }
  .tt-form-box { padding: 16px 12px 14px; }
  .tt-summary-card { padding: 14px 12px; }
}

@media (max-width: 320px) {
  .tt-form-title { font-size: 1.3rem; }
  .tt-summary-card { padding: 12px 10px; }
}

@media (min-width: 1440px) {
  .tt-form-section { padding: 80px 32px 120px; }
  .tt-section { padding: 28px 24px; }
  .tt-info-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 2560px) {
  .tt-form-section { padding: 100px 48px 160px; }
  /* FIX F11: removed max-width 1200px — results fill viewport on desktop too */
  .tt-results, .tt-ref-section { padding-left: 48px; padding-right: 48px; }
  .tt-section { padding: 36px 32px; }
}

/* ═══════════════════════════════════════════════════════════════
   VISUAL UPGRADE v1 — Mystic Imperial Fusion + Doctor Strange
   Hero / Section Headers / Info Grid / Why-box / Num Pills /
   Summary Card / Color Blocks / Pentagon / Hà Đồ / Compat /
   Results Header (mở đầu) / Results Footer (kết thúc)
   ═══════════════════════════════════════════════════════════════ */

/* ─── SHARED: Bagua ring animations (used by portal + seal) ─── */
.tt-bagua-ring-outer { animation: ttBaguaSpin 30s linear infinite; transform-box: fill-box; transform-origin: center; will-change: transform; }
.tt-bagua-ring-mid   { animation: ttBaguaSpin 14s linear infinite reverse; transform-box: fill-box; transform-origin: center; will-change: transform; }
.tt-bagua-ring-inner { animation: ttBaguaSpin 7s linear infinite; transform-box: fill-box; transform-origin: center; will-change: transform; }
@keyframes ttBaguaSpin { to { transform: rotate(360deg); } }
.tt-seal-svg { animation: ttBaguaSpin 20s linear infinite; transform-box: fill-box; transform-origin: center; will-change: transform; }

/* ─────────────────────────────────────────────────────────────
   1. RESULTS HEADER — Imperial Proclamation Opening v2
   ───────────────────────────────────────────────────────────── */
.tt-results-header {
  position: relative;
  margin-bottom: 24px;
  overflow: hidden;
  border-radius: var(--tt-radius);
  background: var(--tt-card-bg);
  border: 1px solid transparent;
  text-align: center;
  padding: 36px 28px 0;
  opacity: 1;
  animation: none;
  /* Imperial Frame — Tier 1 */
  box-shadow:
    inset 0 0 0 1px var(--tt-jade-subtle),
    0 0 20px rgba(0,0,0,.25),
    0 0 40px var(--tt-jade-subtle);
}
/* Double-frame inset — inner glow line */
.tt-results-header::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid transparent;
  border-radius: 3px;
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 0 0 1px var(--tt-jade-subtle);
}
/* Ambient glow — element-colored */
.tt-rh-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 70% at 50% 30%,
    color-mix(in srgb, var(--rh-color, var(--tt-jade)) 18%, transparent) 0%,
    transparent 65%);
  pointer-events: none;
  animation: ttRhGlow 5s ease-in-out infinite;
  z-index: 0;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .tt-rh-glow { background: radial-gradient(ellipse 65% 70% at 50% 30%, var(--tt-jade-subtle) 0%, transparent 65%); }
}
@keyframes ttRhGlow { 0%,100%{opacity:.45;} 50%{opacity:1;} }

/* 4-corner L-brackets — bigger + brighter + corner glow */
.tt-rh-corner {
  position: absolute; width: 26px; height: 26px;
  border-color: var(--rh-color, var(--tt-jade));
  border-style: solid; border-width: 0;
  opacity: .65; z-index: 4;
}
.tt-rh-corner--tl { top:5px;left:5px; border-top-width:2.5px; border-left-width:2.5px; }
.tt-rh-corner--tr { top:5px;right:5px; border-top-width:2.5px; border-right-width:2.5px; }
.tt-rh-corner--bl { bottom:0;left:5px; border-bottom-width:2.5px; border-left-width:2.5px; }
.tt-rh-corner--br { bottom:0;right:5px; border-bottom-width:2.5px; border-right-width:2.5px; }
/* Corner glow dots */
.tt-rh-corner::after {
  content: '';
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--rh-color, var(--tt-jade));
  opacity: .35;
  animation: ttCornerGlow 3s ease-in-out infinite;
}
.tt-rh-corner--tl::after { top: -2px; left: -2px; }
.tt-rh-corner--tr::after { top: -2px; right: -2px; }
.tt-rh-corner--bl::after { bottom: -2px; left: -2px; }
.tt-rh-corner--br::after { bottom: -2px; right: -2px; }
@keyframes ttCornerGlow {
  0%,100% { opacity: .2; box-shadow: none; }
  50%     { opacity: .6; box-shadow: 0 0 8px var(--rh-color, var(--tt-jade)); }
}

/* Portal wrapper — bigger */
.tt-rh-portal {
  position: relative; z-index: 3;
  margin: 0 auto 16px; display: inline-block;
}
.tt-rh-portal .tt-bagua-svg { width: 200px; height: 200px; }

/* Eyebrow — decorated dots */
.tt-rh-eyebrow {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .75rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--rh-color, var(--tt-jade-light));
  opacity: .7;
  margin-bottom: 8px;
  position: relative; z-index: 3;
}
/* Main title — element-colored glow */
.tt-rh-title {
  font-family: 'Lexend Deca', sans-serif;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-weight: 700;
  color: var(--rh-color, var(--tt-jade));
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 0 36px color-mix(in srgb, var(--rh-color, var(--tt-jade)) 45%, transparent),
               0 0 2px rgba(255,255,255,.06);
  margin-bottom: 10px;
  position: relative; z-index: 3;
  animation: ttRhTitlePulse 4s ease-in-out infinite;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .tt-rh-title { text-shadow: 0 0 36px var(--tt-jade-glow), 0 0 2px rgba(255,255,255,.06); }
}
@keyframes ttRhTitlePulse {
  0%,100% { text-shadow: 0 0 24px color-mix(in srgb, var(--rh-color, var(--tt-jade)) 35%, transparent); }
  50%     { text-shadow: 0 0 52px color-mix(in srgb, var(--rh-color, var(--tt-jade)) 50%, transparent),
                         0 0 100px color-mix(in srgb, var(--rh-color, var(--tt-jade)) 15%, transparent); }
}
@supports not (color: color-mix(in srgb, red, blue)) {
  @keyframes ttRhTitlePulse {
    0%,100% { text-shadow: 0 0 24px var(--tt-jade-glow); }
    50%     { text-shadow: 0 0 52px var(--tt-jade-glow), 0 0 100px var(--tt-jade-subtle); }
  }
}
/* Subtitle */
.tt-rh-subtitle {
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  font-size: .98rem;
  color: var(--tt-text-dim);
  letter-spacing: .05em;
  font-style: italic;
  margin-bottom: 12px;
  position: relative; z-index: 3;
}
/* Meta */
.tt-rh-meta {
  font-size: .78rem;
  color: rgba(232,224,208,.45);
  letter-spacing: .1em;
  position: relative; z-index: 3;
  margin-bottom: 6px;
}
.tt-rh-sep { margin: 0 6px; opacity: .4; }
/* Bottom meander separator — brighter */
.tt-rh-meander {
  position: relative; z-index: 3;
  height: 9px;
  margin: 14px -28px 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='9' viewBox='0 0 28 9'%3E%3Cpath d='M0,9 L0,0 L7,0 L7,5 L4,5 L4,2.8 L3,2.8 L3,9 M7,0 L14,0 L14,9 L7,9 L7,2.8 L10,2.8 L10,5 L11,5 L11,0 M14,9 L14,0 L21,0 L21,5 L18,5 L18,2.8 L17,2.8 L17,9 M21,0 L28,0 L28,9 L21,9 L21,2.8 L24,2.8 L24,5 L25,5 L25,0' fill='none' stroke='%23c85040' stroke-width='.8' opacity='.55'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
}

/* ─────────────────────────────────────────────────────────────
   2. RESULTS FOOTER — Imperial Seal Closing
   ───────────────────────────────────────────────────────────── */
.tt-results-footer {
  position: relative;
  margin-top: 24px;
  overflow: hidden;
  border-radius: var(--tt-radius);
  background: var(--tt-card-bg);
  border: 1px solid transparent;
  text-align: center;
  padding: 0 24px 28px;
  opacity: 1;
  animation: none;
  /* Imperial Frame — Tier 1 */
  box-shadow:
    inset 0 0 0 1px var(--tt-jade-subtle),
    0 0 20px rgba(0,0,0,.25),
    0 0 40px var(--tt-jade-subtle);
}
.tt-results-footer::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid transparent;
  border-radius: 3px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--tt-jade-subtle);
}
/* Top meander separator (flush) */
.tt-rf-meander {
  height: 9px;
  margin: 0 -24px 22px;
  position: relative; z-index:3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='9' viewBox='0 0 28 9'%3E%3Cpath d='M0,9 L0,0 L7,0 L7,5 L4,5 L4,2.8 L3,2.8 L3,9 M7,0 L14,0 L14,9 L7,9 L7,2.8 L10,2.8 L10,5 L11,5 L11,0 M14,9 L14,0 L21,0 L21,5 L18,5 L18,2.8 L17,2.8 L17,9 M21,0 L28,0 L28,9 L21,9 L21,2.8 L24,2.8 L24,5 L25,5 L25,0' fill='none' stroke='%23c85040' stroke-width='.7' opacity='.4'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
}
.tt-rf-seal { position:relative; z-index:3; margin:0 auto 14px; display:inline-block; }
.tt-rf-title {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .95rem;
  color: var(--tt-jade-light);
  letter-spacing: .14em;
  margin-bottom: 5px;
  position: relative; z-index:3;
}
.tt-rf-subtitle {
  font-family: 'Playfair Display', serif;
  font-size: .82rem;
  color: var(--tt-text-dim);
  font-style: italic;
  margin-bottom: 14px;
  position: relative; z-index:3;
  opacity: .7;
}
.tt-rf-disclaimer {

  font-size: .84rem;
  color: rgba(232,224,208,.38);
  line-height: 1.65;
  max-width: 480px;
  margin: 0 auto 12px;
  position: relative; z-index:3;
}
.tt-rf-brand {
  font-family: 'Lexend Deca', sans-serif;
  font-size: .75rem;
  letter-spacing: .28em;
  color: var(--tt-jade);
  opacity: .42;
  position: relative; z-index:3;
}
/* Footer L-brackets */
.tt-rf-corner { position:absolute; width:20px; height:20px; border-color:var(--tt-jade); border-style:solid; border-width:0; opacity:.32; z-index:2; }
.tt-rf-corner--tl { top:5px;left:5px; border-top-width:1.5px; border-left-width:1.5px; }
.tt-rf-corner--tr { top:5px;right:5px; border-top-width:1.5px; border-right-width:1.5px; }
.tt-rf-corner--bl { bottom:5px;left:5px; border-bottom-width:1.5px; border-left-width:1.5px; }
.tt-rf-corner--br { bottom:5px;right:5px; border-bottom-width:1.5px; border-right-width:1.5px; }

/* ─────────────────────────────────────────────────────────────
   3. HERO — Rings + Element-specific Particles + Enlarged Char
   ───────────────────────────────────────────────────────────── */
.tt-hero {
  position: relative;
  padding: 36px 20px 24px !important;
  margin: 4px 0 20px !important;
  overflow: visible;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* Ambient radial glow */
.tt-hero::before {
  content: '';
  position: absolute;
  inset: -24px;
  background: radial-gradient(ellipse 65% 72% at 50% 50%, var(--tt-jade-subtle) 0%, transparent 68%);
  pointer-events: none;
  animation: ttHeroAmbient 6s ease-in-out infinite;
  z-index: 0;
}
@keyframes ttHeroAmbient { 0%,100%{opacity:.55;transform:scale(.96);} 50%{opacity:1;transform:scale(1.04);} }

/* Ring container */
@keyframes ttRingSpin { to { transform: rotate(360deg); } }

/* Char — enlarged + glowing + breathing */
@keyframes ttCharBreath {
  0%,100%{ text-shadow:0 0 20px var(--tt-jade-glow),0 0 50px var(--tt-jade-subtle); transform:scale(1); }
  50%    { text-shadow:0 0 44px var(--tt-jade-glow),0 0 95px var(--tt-jade-subtle),0 0 145px var(--tt-jade-subtle); transform:scale(1.05); }
}

/* Element particle overlay layer */
.tt-hero-particles { position:absolute; inset:0; pointer-events:none; z-index:2; }

/* Thủy — water ripple rings */
.tt-hero-particles[data-el="Thủy"]::before,
.tt-hero-particles[data-el="Thủy"]::after {
  content:''; position:absolute; top:50%; left:50%; width:72px; height:72px; margin:-36px 0 0 -36px;
  border:1px solid rgba(72,136,184,.48); border-radius:50%;
}
.tt-hero-particles[data-el="Thủy"]::before { animation:ttWaterRipple 3s ease-out infinite; }
.tt-hero-particles[data-el="Thủy"]::after  { animation:ttWaterRipple 3s ease-out 1.45s infinite; }
@keyframes ttWaterRipple { 0%{transform:scale(.88);opacity:.75;} 100%{transform:scale(3.8);opacity:0;} }

/* Hỏa — base glow + floating sparks */
.tt-hero-particles[data-el="Hỏa"]::before {
  content:''; position:absolute; bottom:0; left:50%; width:230px; height:90px; margin-left:-115px;
  background:radial-gradient(ellipse at 50% 100%,rgba(200,72,48,.22) 0%,transparent 70%);
  border-radius:50%; animation:ttFireBase 1.8s ease-in-out infinite alternate;
}
@keyframes ttFireBase { from{height:62px;opacity:.65;} to{height:112px;opacity:1;} }
.tt-hero-particles[data-el="Hỏa"]::after {
  content:''; position:absolute; top:50%; left:50%; width:4px; height:4px; margin:-2px 0 0 -2px;
  border-radius:50%; background:rgba(200,72,48,.6);
  box-shadow:-42px -28px 0 rgba(200,72,48,.38),40px -24px 0 rgba(232,112,80,.3),-22px -55px 0 rgba(200,72,48,.26),24px -48px 0 rgba(232,112,80,.22),10px -70px 0 rgba(200,72,48,.18);
  animation:ttFireSpark 2.4s ease-in-out infinite;
}
@keyframes ttFireSpark { 0%,100%{opacity:.5;transform:translateY(0);} 50%{opacity:1;transform:translateY(-7px);} }

/* Kim — metallic sheen sweep */
.tt-hero-particles[data-el="Kim"]::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(118deg,transparent 0%,transparent 36%,rgba(154,172,188,.1) 50%,transparent 64%,transparent 100%);
  background-size:220% 100%; animation:ttMetalSheen 4.5s ease-in-out infinite;
}
@keyframes ttMetalSheen { 0%{background-position:220% center;} 50%{background-position:-220% center;} 100%{background-position:-220% center;} }

/* Thổ — concentric earth halos */
.tt-hero-particles[data-el="Thổ"]::before {
  content:''; position:absolute; top:50%; left:50%; width:115px; height:38px; margin:-19px 0 0 -57px;
  border-radius:50%; background:rgba(184,144,48,.07); animation:ttEarthPulse 3.5s ease-in-out infinite;
}
@keyframes ttEarthPulse {
  0%,100%{ box-shadow:0 0 0 0 rgba(184,144,48,.15),0 0 0 20px rgba(184,144,48,0); }
  50%    { box-shadow:0 0 0 20px rgba(184,144,48,.07),0 0 0 40px rgba(184,144,48,0); }
}

/* Mộc — organic growth pulse */
.tt-hero-particles[data-el="Mộc"]::before {
  content:''; position:absolute; top:50%; left:50%; width:92px; height:92px; margin:-46px 0 0 -46px;
  border:1px solid rgba(200,80,64,.3); border-radius:50%; animation:ttGrowthPulse 4s ease-in-out infinite;
}
.tt-hero-particles[data-el="Mộc"]::after {
  content:''; position:absolute; top:50%; left:50%; width:92px; height:92px; margin:-46px 0 0 -46px;
  border:1px solid rgba(200,80,64,.18); border-radius:50%; animation:ttGrowthPulse 4s ease-in-out 2s infinite;
}
@keyframes ttGrowthPulse { 0%{transform:scale(.78);opacity:.52;} 100%{transform:scale(2.25);opacity:0;} }

/* ─────────────────────────────────────────────────────────────
   4. SECTION HEADER — Meander Divider + Framed Icon
   ───────────────────────────────────────────────────────────── */
.tt-sect-head {
  position:relative;
  padding-bottom:20px !important;
  margin-bottom:28px !important;
  border-bottom:none !important;
}
/* Meander bottom line */
.tt-sect-head::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:7px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='7' viewBox='0 0 28 7'%3E%3Cpath d='M0,7 L0,0 L7,0 L7,4 L4,4 L4,2.2 L3,2.2 L3,7 M7,0 L14,0 L14,7 L7,7 L7,2.2 L10,2.2 L10,4 L11,4 L11,0 M14,7 L14,0 L21,0 L21,4 L18,4 L18,2.2 L17,2.2 L17,7 M21,0 L28,0 L28,7 L21,7 L21,2.2 L24,2.2 L24,4 L25,4 L25,0' fill='none' stroke='%23c85040' stroke-width='.65' opacity='.42'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:left center;
  animation:ttMeanderFade 4s ease-in-out infinite;
}
@keyframes ttMeanderFade { 0%,100%{opacity:.8;} 50%{opacity:1;} }
/* Fade right edge of meander */
.tt-sect-head::before {
  content:''; position:absolute; bottom:0; right:0; width:80px; height:7px;
  background:linear-gradient(90deg,transparent,var(--tt-card-bg) 85%); z-index:1;
}
/* Icon box — framed with corner accents */
.tt-sect-icon {
  width:38px; height:38px;
  border:1px solid transparent; border-radius:var(--tt-radius);
  background:var(--tt-jade-subtle);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; position:relative;
  transition:box-shadow .3s,background .3s;
  /* Imperial Frame — Tier 2 */
  box-shadow: inset 0 0 0 1px var(--tt-jade-subtle);
}
.tt-sect-icon:hover { box-shadow: inset 0 0 0 1px var(--tt-jade-subtle), 0 0 14px var(--tt-jade-glow); background:rgba(200,80,64,.12); }

/* ─────────────────────────────────────────────────────────────
   5. INFO GRID ITEMS — Icon + Hover Lift + Corner Accents
   ───────────────────────────────────────────────────────────── */
.tt-info-item {
  position:relative;
  transition:transform .25s,border-color .25s,box-shadow .25s;
  cursor:default; overflow:hidden;
}
.tt-info-item:hover {
  transform:translateY(-3px);
  border-color:var(--tt-jade) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.25),inset 0 0 30px var(--tt-jade-subtle);
}
.tt-info-item::after {
  content:''; position:absolute; bottom:5px; right:5px; width:10px; height:10px;
  border-bottom:1px solid var(--tt-jade); border-right:1px solid var(--tt-jade);
  opacity:.2; transition:opacity .25s;
}
.tt-info-item:hover::after { opacity:.6; }
/* Icon character above value */
.tt-info-icon {
  font-family:'Noto Serif SC','KaiTi',serif;
  font-size:.95rem; color:var(--tt-jade); opacity:.4;
  display:block; margin-bottom:5px; transition:opacity .25s; line-height:1;
}
.tt-info-item:hover .tt-info-icon { opacity:.85; }
.tt-info-value { font-size:1.05rem !important; font-weight:700 !important; letter-spacing:.02em; }

/* ═══ TƯƠNG QUAN CATEGORY CARDS ═══ */

/* -- Accent colors by relationship type -- */

/* -- Card enhanced base -- */

/* -- Hán tự watermark (large, background) -- */

/* -- Element name pulsing glow -- */
.tt-tq-card .tt-info-value {
  position: relative; z-index: 1;
  text-shadow: 0 0 12px currentColor;
  animation: ttTqPulse 3s ease-in-out infinite;
}
@keyframes ttTqPulse {
  0%, 100% { text-shadow: 0 0 8px rgba(255,255,255,.05); }
  50%      { text-shadow: 0 0 18px rgba(255,255,255,.15), 0 0 30px currentColor; }
}

/* -- Label + why text z-index -- */
.tt-tq-card .tt-info-label,
.tt-tq-card .tt-rel-why { position: relative; z-index: 1; }

/* -- Stagger entrance -- */

/* -- Sinh cards: top accent glow bar -- */

/* -- Khắc cards: bottom warning bar -- */

/* ═══ YEAR PILLS UPGRADE ═══ */
/* Connecting dots between year pills */

/* -- Print & reduced motion -- */
@media print {
  .tt-tq-card .tt-info-value { text-shadow: none !important; animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-tq-card .tt-info-value { animation: none !important; text-shadow: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   6. WHY-BOX — Timeline with Ornate Step Counters
   ───────────────────────────────────────────────────────────── */
/* Vertical timeline connector */
/* Ornate circle counter */

/* ─────────────────────────────────────────────────────────────
   7. THIÊN SỐ ẤN — Mandala Seal Overrides
   ───────────────────────────────────────────────────────────── */

/* Legacy pill fallback (if still used elsewhere) */

/* ─────────────────────────────────────────────────────────────
   8. SUMMARY CARD — Element Gradient + Watermark Char
   ───────────────────────────────────────────────────────────── */
.tt-summary-card {
  position:relative !important; overflow:hidden !important;
  border-color:rgba(200,80,64,.38) !important;
  background:linear-gradient(135deg,rgba(200,80,64,.1) 0%,rgba(10,12,10,.92) 45%,rgba(200,80,64,.05) 100%) !important;
}
.tt-sum-watermark {
  position:absolute; right:4px; bottom:-10px;
  font-family:'Noto Serif SC','KaiTi',serif; font-size:5.8rem;
  color:var(--tt-jade); opacity:.055; line-height:1;
  pointer-events:none; -webkit-user-select:none; user-select:none; z-index:0;
}
.tt-summary-card::before { content:''; position:absolute; top:7px; left:7px; width:18px; height:18px; border-top:1.5px solid var(--tt-jade); border-left:1.5px solid var(--tt-jade); opacity:.38; z-index:1; }
.tt-summary-card::after  { content:''; position:absolute; bottom:7px; right:7px; width:18px; height:18px; border-bottom:1.5px solid var(--tt-jade); border-right:1.5px solid var(--tt-jade); opacity:.38; z-index:1; }
.tt-sum-left,.tt-sum-right { position:relative; z-index:2; }
.tt-sum-char { opacity:.92 !important; text-shadow:0 0 22px var(--tt-jade-glow),0 0 45px var(--tt-jade-subtle); animation:ttSumCharPulse 5s ease-in-out infinite; }
@keyframes ttSumCharPulse { 0%,100%{text-shadow:0 0 14px var(--tt-jade-glow);} 50%{text-shadow:0 0 30px var(--tt-jade-glow),0 0 58px var(--tt-jade-subtle);} }

/* ─────────────────────────────────────────────────────────────
   9. COLOR BLOCKS — Enhanced Cards + Depth Dots
   ───────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   10. PENTAGON + HÀ ĐỒ + COMPAT DIAGRAM
   ───────────────────────────────────────────────────────────── */

/* Pentagon + EEAT print & reduced-motion */
@media print {
}
@media (prefers-reduced-motion: reduce) {
  .tt-pleg-line--sinh::after { animation: none !important; }
  .tt-seal-svg animateTransform, .tt-seal-svg animateMotion, .tt-seal-svg animate { display: none; }
  .tt-ungdung, .tt-lygiai, .tt-deep-block, .tt-napam-tip { animation: none !important; opacity: 1 !important; transform: none !important; }
  .tt-tt-timeline-svg animate, .tt-tt-timeline-svg animateTransform { display: none; }
}
@media print {
  .tt-ungdung, .tt-deep-block, .tt-napam-tip, .tt-lygiai { background: none !important; box-shadow: none !important; animation: none !important; border-left-color: #ccc !important; }
  .tt-ungdung::before, .tt-ungdung::after, .tt-lygiai::before, .tt-lygiai::after,
  .tt-deep-block::before, .tt-deep-block::after, .tt-napam-tip::before, .tt-napam-tip::after { display: none !important; }
  .tt-tt-card { background: none !important; box-shadow: none !important; border-left-color: #ccc !important; }
  .tt-tt-card::before, .tt-tt-card::after { display: none !important; }
}

/* ── Hà Đồ Trận Pháp — Cosmic River Map ── */
/* Rotating outer ring (CSS, Doctor Strange portal) */
@keyframes ttHadoRingSpin { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes ttShimmerText { 0%,100%{background-position:200% 0;} 50%{background-position:0 0;} }


/* ─────────────────────────────────────────────────────────────
   RESPONSIVE PATCHES
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .tt-hero { min-height:175px; padding:26px 14px 18px !important; }
  .tt-seal-num { font-size:1.25rem; }
  .tt-seal-row { gap:20px; }
  .tt-napam-tip::before, .tt-napam-tip::after { width:10px; height:10px; }
  .tt-seal-row { gap:12px; }
  .tt-sum-watermark { font-size:4rem; }
  .tt-rh-title { font-size:1.35rem; }
  .tt-rh-portal .tt-bagua-svg { width:160px; height:160px; }
  .tt-rh-seal { width:42px; height:42px; font-size:1.2rem; bottom:14px; right:14px; }
  .tt-results-header,.tt-results-footer { padding-left:14px; padding-right:14px; }
  .tt-rh-meander,.tt-rf-meander { margin-left:-14px; margin-right:-14px; }
}
@media (max-width: 375px) {
  .tt-seal-num { font-size:1.1rem; }
  .tt-seal-row { gap:16px; }
  .tt-rh-title { font-size:1.1rem; letter-spacing:.04em; }
  .tt-rh-portal .tt-bagua-svg { width:140px; height:140px; }
  .tt-rh-seal { display:none; }
}

/* ── Focus Visible — keyboard navigation accessibility ── */
/* :focus fallback for Safari <15.4 which lacks :focus-visible support */
.tt-submit-btn:focus-visible,
.tt-submit-btn:focus:not(:focus-visible),
.tt-new-btn:focus-visible,
.tt-new-btn:focus:not(:focus-visible),
.tt-btt:focus-visible,
.tt-btt:focus:not(:focus-visible),
.tt-toc-link:focus-visible,
.tt-toc-link:focus:not(:focus-visible),
.tt-toc-toggle:focus-visible,
.tt-toc-toggle:focus:not(:focus-visible) {
  outline: 2px solid var(--tt-jade-light);
  outline-offset: 3px;
}
.tt-input:focus-visible,
.tt-input:focus {
  outline: 2px solid var(--tt-jade);
  outline-offset: 0;
  box-shadow: 0 0 0 4px rgba(200,80,64,0.15);
}

/* ═══ VERDICT BANNER ═══ */
@keyframes ttVBIconSpin { to { transform: rotate(360deg); } }

/* ═══ SCORE TABLE — Bảng Thiên Cơ ═══ */

/* Active row */

/* Print */
@media print {
}
@media (prefers-reduced-motion: reduce) {
}

/* ═══ Print Stylesheet ═══ */
@media print {
  /* Hide non-content UI */
  #tt-progress,
  .tt-btt,
  #tt-form-section,
  #tt-cinematic,
  .tt-orb,
  .tt-footer-meander,
  .tt-new-search,
  .tt-share-row,
  .tt-toc,
  .tt-submit-btn,
  .tt-mandala { display: none !important; }

  /* Force light-friendly background */
  body, .tt-cosmos { background: #fff !important; color: #1a1a1a !important; }
  .tt-results { padding: 0 !important; max-width: 100% !important; }
  .tt-section {
    background: #fff !important; border-color: #ccc !important;
    color: #1a1a1a !important; break-inside: avoid;
    opacity: 1 !important; transform: none !important; animation: none !important;
    box-shadow: none !important;
  }
  .tt-section::before, .tt-section::after { border-color: #999 !important; background: none !important; }
  .tt-frame-corner { display: none !important; }
  .tt-results-header, .tt-results-footer {
    background: #fff !important; border: 1px solid #ccc !important;
    opacity: 1 !important; animation: none !important;
    box-shadow: none !important;
  }
  .tt-results-header::before, .tt-results-footer::before { border-color: #ddd !important; box-shadow: none !important; }
  .tt-rh-glow { display: none !important; }
  .tt-summary-card { background: #f9f9f9 !important; box-shadow: none !important; border: 1px solid #ccc !important; }
  .tt-disclaimer { box-shadow: none !important; border: 1px solid #ddd !important; }

  /* Text readability on white */
  .tt-sect-title, .tt-rh-title, .tt-rf-title { color: #1a1a1a !important; text-shadow: none !important; }
  .tt-info-item { background: #f5f5f5 !important; border-color: #ccc !important; }
  .tt-info-label, .tt-info-hint { color: #666 !important; }
  .tt-info-value { color: #1a1a1a !important; }
  .tt-hero::before, .tt-hero-particles, .tt-hero-rings { display: none !important; }
  .tt-disclaimer { border-color: #999 !important; color: #666 !important; }
  .tt-rf-disclaimer { color: #666 !important; }
  .tt-sum-watermark { display: none !important; }

  /* All animations off */
  *, *::before, *::after { animation: none !important; transition: none !important; }

  /* Page margins */
  @page { margin: 1.5cm; }
}

/* ═══════════════════════════════════════════════════════════════
   FORM UI UPGRADE — Mystic Imperial Fusion × Doctor Strange
   Toggle / Button / Input Focus / Trigram Corners
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   U1: BÁT QUÁI SEAL TOGGLE
   ───────────────────────────────────────────────────────────── */
.tt-seal-toggle {
  position: relative;
  width: 56px; height: 28px;
  flex-shrink: 0;
  cursor: pointer;
}
.tt-seal-toggle-track {
  position: absolute; inset: 0;
  background: rgba(12,12,10,.7);
  border: 1.5px solid rgba(200,80,64,.2);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px rgba(12,12,10,.9), inset 0 0 0 3px rgba(200,80,64,.08);
  transition: border-color .4s, box-shadow .4s, background .4s;
  overflow: hidden;
}
.tt-seal-toggle-han {
  position: absolute;
  font-family: 'Noto Serif SC', 'KaiTi', serif;
  font-size: .75rem;
  top: 50%; transform: translateY(-50%);
  transition: opacity .3s, color .3s;
  pointer-events: none;
  line-height: 1;
}
.tt-seal-han--off {
  right: 7px;
  color: rgba(232,224,208,.25);
  opacity: 1;
}
.tt-seal-han--on {
  left: 7px;
  color: var(--tt-jade-light);
  opacity: 0;
}
.tt-seal-toggle-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(232,224,208,.45);
  transition: transform .4s cubic-bezier(.68,-.55,.27,1.55), color .3s;
  z-index: 2;
}
.tt-seal-yinyang {
  transition: transform .6s ease, filter .4s;
}

/* Checked */
.tt-toggle-checkbox:checked + .tt-seal-toggle .tt-seal-toggle-track {
  border-color: var(--tt-jade);
  box-shadow: inset 0 0 0 2px rgba(12,12,10,.9), inset 0 0 0 3px rgba(200,80,64,.2), 0 0 12px rgba(200,80,64,.25);
  background: rgba(200,80,64,.08);
}
.tt-toggle-checkbox:checked + .tt-seal-toggle .tt-seal-toggle-knob {
  transform: translateX(28px);
  color: var(--tt-jade-light);
}
.tt-toggle-checkbox:checked + .tt-seal-toggle .tt-seal-yinyang {
  transform: rotate(360deg);
  filter: drop-shadow(0 0 4px rgba(200,80,64,.5));
}
.tt-toggle-checkbox:checked + .tt-seal-toggle .tt-seal-han--off { opacity: 0; }
.tt-toggle-checkbox:checked + .tt-seal-toggle .tt-seal-han--on  { opacity: 1; }

/* Focus visible */
.tt-toggle-checkbox:focus-visible + .tt-seal-toggle .tt-seal-toggle-track {
  outline: 2px solid var(--tt-jade-light);
  outline-offset: 3px;
}
/* Hover */
.tt-toggle-label:hover .tt-seal-toggle-track {
  border-color: rgba(200,80,64,.4);
}
.tt-toggle-label:hover .tt-seal-toggle-knob {
  color: rgba(232,224,208,.65);
}

/* ─────────────────────────────────────────────────────────────
   U2: PORTAL RING BUTTON
   ───────────────────────────────────────────────────────────── */
.tt-portal-btn {
  position: relative;
  overflow: visible !important;
}
.tt-portal-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease, border-color .4s, filter .4s;
}
.tt-portal-ring--outer {
  width: 110%; height: 200%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(200,80,64,.2);
  animation: ttPortalSpin 20s linear infinite;
  will-change: transform;
}
.tt-portal-ring--inner {
  width: 104%; height: 160%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 1.5px solid transparent;
  border-top-color: rgba(200,80,64,.3);
  border-right-color: rgba(200,80,64,.15);
  animation: ttPortalSpin 12s linear infinite reverse;
  will-change: transform;
}
@keyframes ttPortalSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Hover — show + speed up */
.tt-portal-btn:hover .tt-portal-ring { opacity: 1; }
.tt-portal-btn:hover .tt-portal-ring--outer {
  border-color: rgba(200,80,64,.4);
  animation-duration: 8s;
  filter: drop-shadow(0 0 6px rgba(200,80,64,.3));
}
.tt-portal-btn:hover .tt-portal-ring--inner {
  border-top-color: var(--tt-jade);
  border-right-color: rgba(200,80,64,.4);
  animation-duration: 5s;
}

/* Watermark character */
.tt-portal-watermark {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  font-family: 'Noto Serif SC', 'KaiTi', serif;
  font-size: 2.2rem;
  color: var(--tt-jade);
  opacity: .06;
  pointer-events: none;
  z-index: 1;
  transition: opacity .3s;
  line-height: 1;
}
.tt-portal-btn:hover .tt-portal-watermark { opacity: .12; }

/* Burst effect on submit */
.tt-portal-btn.is-burst .tt-portal-ring--outer {
  opacity: 1;
  animation: ttPortalBurst .6s ease-out forwards;
}
.tt-portal-btn.is-burst .tt-portal-ring--inner {
  opacity: 1;
  animation: ttPortalBurst .6s ease-out .08s forwards;
}
@keyframes ttPortalBurst {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  50%  { transform: translate(-50%,-50%) scale(.85); opacity: .8; }
  100% { transform: translate(-50%,-50%) scale(1.5); opacity: 0; }
}

/* Disabled */
.tt-portal-btn[disabled] .tt-portal-ring { display: none; }
.tt-portal-btn[disabled] .tt-portal-watermark { opacity: .03; }

/* ─────────────────────────────────────────────────────────────
   U3: MYSTICAL FOCUS INPUT
   ───────────────────────────────────────────────────────────── */
.tt-input-wrap {
  position: relative; /* ensure pseudo-elements position correctly */
}
.tt-input-wrap::before,
.tt-input-wrap::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  border-color: var(--tt-jade);
  border-style: solid;
  border-width: 0;
  opacity: 0;
  transition: opacity .3s, transform .3s;
  z-index: 3;
  pointer-events: none;
}
.tt-input-wrap::before {
  top: -1px; left: -1px;
  border-top-width: 1.5px; border-left-width: 1.5px;
  transform: translate(-3px, -3px);
}
.tt-input-wrap::after {
  bottom: -1px; right: -1px;
  border-bottom-width: 1.5px; border-right-width: 1.5px;
  transform: translate(3px, 3px);
}

/* Focus-within → show corners + breathing */
.tt-input-wrap:focus-within::before,
.tt-input-wrap:focus-within::after {
  opacity: .55;
  transform: translate(0, 0);
  animation: ttCornerBreath 3s ease-in-out infinite;
}
@keyframes ttCornerBreath {
  0%, 100% { opacity: .4; }
  50%      { opacity: .7; }
}

/* Icon glow on focus */
.tt-input-wrap:focus-within .tt-input-icon {
  will-change: opacity;
  filter: drop-shadow(0 0 4px rgba(200,80,64,.35));
  animation: ttIconPulse 2s ease-in-out infinite;
}
@keyframes ttIconPulse {
  0%, 100% { opacity: .7; }
  50%      { opacity: 1; }
}

/* Enhanced focus glow — breathing box-shadow */
.tt-input-wrap:focus-within {
  border-color: rgba(200,80,64,.7);
  animation: ttFocusGlow 3s ease-in-out infinite;
}
@keyframes ttFocusGlow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(200,80,64,.08), 0 0 12px rgba(200,80,64,.1), inset 0 -1px 0 0 rgba(200,80,64,.4); }
  50%      { box-shadow: 0 0 0 4px rgba(200,80,64,.15), 0 0 24px rgba(200,80,64,.2), inset 0 -1px 0 0 var(--tt-jade); }
}

/* ─────────────────────────────────────────────────────────────
   U4: SPINNING TRIGRAM CORNERS
   ───────────────────────────────────────────────────────────── */
.tt-form-corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.tt-fc {
  position: absolute;
  width: 28px; height: 28px;
}
/* L-bracket lines */
.tt-fc::before, .tt-fc::after {
  content: '';
  position: absolute;
  background: var(--tt-jade);
  opacity: .35;
  transition: opacity .4s;
}
.tt-fc::before { height: 1.5px; width: 20px; }
.tt-fc::after  { width: 1.5px; height: 20px; }

/* Position corners */
.tt-fc--tl { top: 0; left: 0; }
.tt-fc--tl::before { top: 0; left: 0; }
.tt-fc--tl::after  { top: 0; left: 0; }

.tt-fc--tr { top: 0; right: 0; }
.tt-fc--tr::before { top: 0; right: 0; }
.tt-fc--tr::after  { top: 0; right: 0; }

.tt-fc--bl { bottom: 0; left: 0; }
.tt-fc--bl::before { bottom: 0; left: 0; }
.tt-fc--bl::after  { bottom: 0; left: 0; }

.tt-fc--br { bottom: 0; right: 0; }
.tt-fc--br::before { bottom: 0; right: 0; }
.tt-fc--br::after  { bottom: 0; right: 0; }

/* Trigram symbol */
.tt-fc-tri {
  position: absolute;
  font-family: 'Noto Serif SC', serif;
  font-size: .75rem;
  color: var(--tt-jade);
  opacity: .2;
  animation: ttBaguaSpin 35s linear infinite;
  transition: opacity .4s, filter .4s;
  line-height: 1;
  display: block;
  will-change: transform;
}
.tt-fc--tl .tt-fc-tri { top: 4px; left: 4px; }
.tt-fc--tr .tt-fc-tri { top: 4px; right: 4px; animation-direction: reverse; }
.tt-fc--bl .tt-fc-tri { bottom: 4px; left: 4px; animation-direction: reverse; }
.tt-fc--br .tt-fc-tri { bottom: 4px; right: 4px; }

/* Hover form-box → trigrams glow + speed up */
.tt-form-box:hover .tt-fc-tri {
  opacity: .55;
  filter: drop-shadow(0 0 6px rgba(200,80,64,.4));
  animation-duration: 12s;
}
.tt-form-box:hover .tt-fc::before,
.tt-form-box:hover .tt-fc::after {
  opacity: .6;
}

/* ─────────────────────────────────────────────────────────────
   FORM UI UPGRADE — Reduced Motion
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tt-seal-toggle-knob,
  .tt-seal-yinyang,
  .tt-seal-toggle-track { transition: none !important; }

  .tt-portal-ring { animation: none !important; }
  .tt-portal-btn.is-burst .tt-portal-ring { animation: none !important; opacity: 0; }

  .tt-input-wrap::before,
  .tt-input-wrap::after { animation: none !important; transition: none !important; }
  .tt-input-wrap:focus-within { animation: none !important; }
  .tt-input-wrap:focus-within .tt-input-icon { animation: none !important; }
  .tt-input-wrap:focus-within::before,
  .tt-input-wrap:focus-within::after { opacity: .5; transform: translate(0,0); }

  .tt-fc-tri { animation: none !important; }
  .tt-form-box:hover .tt-fc-tri { animation: none !important; }

  .tt-toggle-group::after { animation: none !important; display: none; }

  /* Hero diagram */
  .tt-cycle-diagram svg > circle[stroke] { animation: none !important; }
  .tt-cycle-diagram svg > line[stroke] { animation: none !important; }
  .tt-cycle-diagram svg > text[font-size="14"] { animation: none !important; }
  .tt-cycle-diagram::before { animation: none !important; }
  .tt-portrait-deco--top svg { animation: none !important; }
}

/* ═══════════════════════════════════════════════
   REFERENCE TABLE — Bảng Tra Cứu 60 Giáp Tử
   ═══════════════════════════════════════════════ */


/* ── Header ── */


/* ── Search ── */

/* ── Table frame ── */

/* ── Table shared ── */

/* ── Sticky header ── */

/* ── Decade toggle ── */

/* ── Data rows ── */

/* ── Hanh badge ── */

/* ── Search states ── */

/* ═══════════════════════════════════════════════════════════════
   RESULTS POLISH v2 — Summary Card + Header + TOC Upgrades
   ═══════════════════════════════════════════════════════════════ */

/* ── ① SUMMARY CARD v2 — Premium element-themed card ── */
.tt-summary-card {
  opacity: 1;
  transform: none;
  animation: ttSumGlow 4s ease-in-out 1s infinite;
  padding: 18px 22px;
}
/* Element-colored glow pulse — Imperial Frame */
@keyframes ttSumGlow {
  0%,100% { box-shadow:
    inset 0 0 0 1px var(--sc-color-glow3, var(--tt-jade-subtle)),
    0 0 20px rgba(0,0,0,.25),
    0 0 40px var(--sc-color-glow3, var(--tt-jade-subtle)); }
  50%     { box-shadow:
    inset 0 0 0 1px var(--sc-color-glow2, var(--tt-jade-subtle)),
    0 0 22px var(--sc-color-glow, rgba(200,80,64,.15)),
    0 0 45px var(--sc-color-glow2, rgba(200,80,64,.08)); }
}
/* 4 L-brackets — TL/BR via pseudo, TR/BL via .tt-frame-corner divs */
.tt-summary-card::before {
  content: '';
  position: absolute; top: 6px; left: 6px;
  width: 22px; height: 22px;
  border-top: 1.5px solid var(--sc-color, var(--tt-jade));
  border-left: 1.5px solid var(--sc-color, var(--tt-jade));
  opacity: .4; z-index: 1;
  background: radial-gradient(circle at 0 0, var(--sc-color-glow3, var(--tt-jade-subtle)) 0%, transparent 70%);
}
.tt-summary-card::after {
  content: '';
  position: absolute; bottom: 6px; right: 6px;
  width: 22px; height: 22px;
  border-bottom: 1.5px solid var(--sc-color, var(--tt-jade));
  border-right: 1.5px solid var(--sc-color, var(--tt-jade));
  opacity: .4; z-index: 1;
  background: radial-gradient(circle at 100% 100%, var(--sc-color-glow3, var(--tt-jade-subtle)) 0%, transparent 70%);
}
/* Watermark breathing — more visible */
.tt-sum-watermark {
  font-size: 6.5rem !important;
  opacity: .07;
  animation: ttSumWmBreath 5s ease-in-out infinite;
}
@keyframes ttSumWmBreath {
  0%,100% { opacity: .06; transform: scale(1) rotate(0deg); }
  50%     { opacity: .12; transform: scale(1.06) rotate(2deg); }
}
/* Summary main layout */
.tt-sum-main {
  display: flex; align-items: center; gap: 16px;
  position: relative; z-index: 2;
}
/* Char — bigger + glow ring */
.tt-sum-char {
  font-size: 3.6rem; line-height: 1;
  font-family: 'Noto Serif SC', KaiTi, serif;
  position: relative;
  flex-shrink: 0;
  animation: ttSumCharPulse 5s ease-in-out infinite;
}
/* Mini portal ring around char */
.tt-sum-char::before {
  content: '';
  position: absolute;
  inset: -10px;
  border: 1px dashed var(--sc-color, var(--tt-jade));
  border-radius: 50%;
  opacity: .2;
  animation: ttSumRingSpin 15s linear infinite;
  will-change: transform;
}
.tt-sum-char::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1.5px solid transparent;
  border-top-color: var(--sc-color, var(--tt-jade));
  border-right-color: var(--sc-color, var(--tt-jade));
  border-radius: 50%;
  opacity: .25;
  animation: ttSumRingSpin 8s linear infinite reverse;
  will-change: transform;
}
@keyframes ttSumRingSpin { to { transform: rotate(360deg); } }
/* Info */
.tt-sum-title {
  font-size: 1.1rem; font-weight: 700;
  font-family: 'Lexend Deca', sans-serif;
  letter-spacing: .03em;
}
.tt-sum-sub {
  font-size: .86rem; color: var(--tt-text-dim); margin-top: 4px;
}
.tt-sum-rel {
  font-size: .80rem; color: rgba(232,224,208,.55); margin-top: 5px;
}
/* Compat section — divider + bigger score */
.tt-sum-compat {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(232,224,208,.1);
  font-size: .84rem; color: var(--tt-text-dim);
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
/* Animated score counter — bigger + glow */
.tt-sum-score {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 700; font-size: 1.35rem;
  text-shadow: 0 0 12px currentColor;
}
/* Responsive */
@media (max-width: 480px) {
  .tt-sum-char { font-size: 2.8rem; }
  .tt-sum-char::before { inset: -8px; }
  .tt-sum-char::after { inset: -4px; }
  .tt-sum-title { font-size: .95rem; }
  .tt-sum-score { font-size: 1.1rem; }
  .tt-sum-watermark { font-size: 5rem !important; }
}
@media (max-width: 375px) {
  .tt-sum-char { font-size: 2.4rem; }
  .tt-sum-char::before, .tt-sum-char::after { display: none; }
}

/* ── ② RESULTS HEADER — Staggered entrance + particles + seal ── */
.tt-rh-stagger-1,
.tt-rh-stagger-2,
.tt-rh-stagger-3,
.tt-rh-stagger-4 { opacity: 1; animation: none; }

/* Imperial seal stamp — positioned bottom-right */
.tt-rh-seal {
  position: absolute; bottom: 20px; right: 20px;
  width: 52px; height: 52px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(200,60,40,.25);
  border-radius: 3px;
  transform: rotate(-12deg);
  font-family: 'Noto Serif SC', KaiTi, serif;
  font-size: 1.6rem; color: rgba(200,60,40,.2);
  animation: ttSealPulse 5s ease-in-out infinite;
  pointer-events: none;
}
.tt-rh-seal::before {
  content: ''; position: absolute; inset: 3px;
  border: 1px solid rgba(200,60,40,.15);
  border-radius: 2px;
}
@keyframes ttSealPulse {
  0%,100% { opacity: .6; }
  50%     { opacity: 1; }
}

/* Floating element particles — per-element themed */
.tt-rh-particles {
  position: absolute; inset: 0; pointer-events: none;
  overflow: hidden; z-index: 1;
}
/* Hỏa — fire sparks floating up */
.tt-rh-particles[data-el="Hỏa"]::before,
.tt-rh-particles[data-el="Hỏa"]::after {
  content: ''; position: absolute; border-radius: 50%;
}
.tt-rh-particles[data-el="Hỏa"]::before {
  width: 4px; height: 4px; background: #e06048; opacity: .35;
  top: 80%; left: 25%;
  animation: ttFireSpark 3s ease-in-out infinite;
}
.tt-rh-particles[data-el="Hỏa"]::after {
  width: 3px; height: 3px; background: #f08060; opacity: .25;
  top: 70%; left: 65%;
  animation: ttFireSpark 3.5s ease-in-out .8s infinite;
}
@keyframes ttFireSpark {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  20%  { opacity: .5; }
  100% { transform: translateY(-120px) scale(.3); opacity: 0; }
}
/* Thủy — water ripple */
.tt-rh-particles[data-el="Thủy"]::before {
  content: ''; position: absolute; width: 60px; height: 60px;
  border: 1px solid rgba(80,152,192,.2); border-radius: 50%;
  bottom: 20%; left: 50%; transform: translateX(-50%);
  animation: ttWaterRipple 4s ease-out infinite;
}
@keyframes ttWaterRipple {
  0%   { width: 20px; height: 20px; opacity: .4; }
  100% { width: 100px; height: 100px; opacity: 0; }
}
/* Mộc — floating leaves */
.tt-rh-particles[data-el="Mộc"]::before,
.tt-rh-particles[data-el="Mộc"]::after {
  content: '🍃'; position: absolute; font-size: 12px; opacity: .2;
}
.tt-rh-particles[data-el="Mộc"]::before {
  top: 70%; left: 20%;
  animation: ttLeafFloat 5s ease-in-out infinite;
}
.tt-rh-particles[data-el="Mộc"]::after {
  top: 60%; left: 70%;
  animation: ttLeafFloat 6s ease-in-out 1.5s infinite;
}
@keyframes ttLeafFloat {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  30%  { opacity: .3; }
  100% { transform: translate(-30px, -80px) rotate(180deg); opacity: 0; }
}
/* Kim — metallic sparkle */
.tt-rh-particles[data-el="Kim"]::before,
.tt-rh-particles[data-el="Kim"]::after {
  content: ''; position: absolute; width: 3px; height: 3px;
  background: #b0b8c0; border-radius: 50%;
}
.tt-rh-particles[data-el="Kim"]::before {
  top: 30%; right: 15%; animation: ttMetalSparkle 2.5s ease-in-out infinite;
}
.tt-rh-particles[data-el="Kim"]::after {
  top: 60%; right: 35%; animation: ttMetalSparkle 3s ease-in-out .7s infinite;
}
@keyframes ttMetalSparkle {
  0%,100% { opacity: 0; transform: scale(0); }
  50%     { opacity: .5; transform: scale(1.5); box-shadow: 0 0 8px rgba(176,184,192,.4); }
}
/* Thổ — warm earth dust */
.tt-rh-particles[data-el="Thổ"]::before,
.tt-rh-particles[data-el="Thổ"]::after {
  content: ''; position: absolute; width: 5px; height: 5px;
  background: rgba(200,160,80,.25); border-radius: 50%;
}
.tt-rh-particles[data-el="Thổ"]::before {
  bottom: 25%; left: 15%; animation: ttEarthDust 4s ease-in-out infinite;
}
.tt-rh-particles[data-el="Thổ"]::after {
  bottom: 35%; left: 55%; animation: ttEarthDust 5s ease-in-out 1.2s infinite;
}
@keyframes ttEarthDust {
  0%,100% { transform: translateY(0); opacity: 0; }
  30%     { opacity: .35; }
  70%     { opacity: .2; }
  100%    { transform: translateY(-50px); opacity: 0; }
}


/* ── CTA ── */

/* ═══ Responsive ═══ */
@media (max-width: 768px) {
}

@media (max-width: 480px) {
  /* Năm — cố định trái */
  /* Con Giáp — ẩn (trùng Can Chi) */
  /* Can Chi — cố định, không wrap */
  /* Nạp Âm — fill giữa, nhẹ hơn */
  /* Mệnh badge — sát phải, nhỏ hơn */
}

@media (prefers-reduced-motion: reduce) {
}

/* ═══════════════════════════════════════════════
   V2.0 — 12 NEW SECTIONS + PART HEADERS
   ═══════════════════════════════════════════════ */

/* ── Part Headers ── */

/* ── Summary Card tags ── */
.tt-sum-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.tt-sum-tag {
  display: inline-block;
  padding: 3px 10px;
  font-size: .75rem;
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius);
  color: var(--tt-text-dim);
  background: var(--tt-jade-subtle);
}
.tt-sum-tag--vuong { border-color: #50a870; color: #50a870; }
.tt-sum-tag--nhuoc { border-color: #e06048; color: #e06048; }

/* ═══ SECTION: Mệnh · Thân · Thai Cung ═══ */
.tt-menh3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.tt-menh3-card {
  text-align: center;
  padding: 20px 12px;
  background: var(--tt-jade-subtle);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius);
  position: relative;
}
.tt-menh3-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 20%; right: 20%;
  height: 2px;
  background: var(--m3-color, var(--tt-jade));
  opacity: .4;
  border-radius: 1px;
}
.tt-menh3-icon {
  font-family: 'Noto Serif SC', 'KaiTi', serif;
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 8px;
}
.tt-menh3-label {
  font-family: 'Playfair Display', serif;
  font-size: .88rem;
  font-weight: 700;
  color: var(--tt-jade-light);
  margin-bottom: 6px;
}
.tt-menh3-canchi {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--tt-text);
  margin-bottom: 2px;
}
.tt-menh3-hantu {
  font-family: 'Noto Serif SC', serif;
  font-size: .82rem;
  color: var(--tt-text-dim);
  margin-bottom: 6px;
}
.tt-menh3-hanh {
  font-size: .82rem;
  font-weight: 600;
}
.tt-menh3-desc {
  font-size: .75rem;
  color: var(--tt-text-dim);
  margin-top: 6px;
  opacity: .85;
}
@media (max-width: 480px) {
  .tt-menh3-grid { grid-template-columns: 1fr; }
}

/* ═══ SECTION: Thập Thần ═══ */
.tt-thapthan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.tt-thapthan-card {
  background: var(--tt-jade-subtle);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius);
  padding: 14px 12px;
  text-align: center;
}
.tt-thapthan-head {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tt-text-dim);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--tt-border);
}
.tt-thapthan-can {
  margin-bottom: 10px;
}
.tt-thapthan-name {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tt-jade-light);
}
.tt-thapthan-han {
  display: block;
  font-family: 'Noto Serif SC', serif;
  font-size: .88rem;
  color: var(--tt-text-dim);
  margin-top: 2px;
}
.tt-thapthan-loai {
  display: inline-block;
  padding: 2px 8px;
  font-size: .75rem;
  border-radius: 2px;
  margin-top: 4px;
}
.tt-thapthan-loai--dong {
  background: rgba(80,168,112,.15);
  color: #50a870;
  border: 1px solid rgba(80,168,112,.3);
}
.tt-thapthan-loai--di {
  background: rgba(224,96,72,.12);
  color: #e06048;
  border: 1px solid rgba(224,96,72,.25);
}
.tt-thapthan-tc {
  border-top: 1px solid var(--tt-border);
  padding-top: 8px;
}
.tt-thapthan-tc-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: .78rem;
}
.tt-thapthan-tc-can {
  padding: 1px 5px;
  border-radius: 2px;
  font-weight: 600;
  font-size: .75rem;
}
.tt-thapthan-tc-name { color: var(--tt-text); }
.tt-thapthan-tc-item small { color: var(--tt-text-dim); font-family: 'Noto Serif SC', serif; }

/* ═══ SECTION: Đồng Loại / Dị Loại ═══ */
.tt-dongdi-bars {
  margin: 16px 0;
}
.tt-dongdi-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.tt-dongdi-label {
  width: 140px;
  flex-shrink: 0;
  font-size: .84rem;
  color: var(--tt-text);
}
.tt-dongdi-label small { color: var(--tt-text-dim); font-size: .75rem; }
.tt-dongdi-bar-wrap {
  flex: 1;
  height: 24px;
  background: rgba(232,224,208,.06);
  border-radius: var(--tt-radius);
  overflow: hidden;
}
.tt-dongdi-bar {
  height: 100%;
  border-radius: var(--tt-radius);
  transition: width .6s ease;
}
.tt-dongdi-bar--dong { background: linear-gradient(90deg, rgba(80,168,112,.6), rgba(80,168,112,.9)); }
.tt-dongdi-bar--di { background: linear-gradient(90deg, rgba(224,96,72,.5), rgba(224,96,72,.85)); }
.tt-dongdi-pct {
  width: 40px;
  text-align: right;
  font-weight: 700;
  font-size: .92rem;
  color: var(--tt-text);
}
.tt-dongdi-verdict {
  text-align: center;
  padding: 14px 20px;
  border-radius: var(--tt-radius);
  margin-top: 8px;
}
.tt-dongdi-verdict--vuong {
  background: rgba(80,168,112,.1);
  border: 1px solid rgba(80,168,112,.3);
}
.tt-dongdi-verdict--nhuoc {
  background: rgba(224,96,72,.1);
  border: 1px solid rgba(224,96,72,.3);
}
.tt-dongdi-vl {
  font-size: .82rem;
  color: var(--tt-text-dim);
  margin-right: 8px;
}
.tt-dongdi-vv {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.15rem;
  font-weight: 700;
}
.tt-dongdi-verdict--vuong .tt-dongdi-vv { color: #50a870; }
.tt-dongdi-verdict--nhuoc .tt-dongdi-vv { color: #e06048; }
@media (max-width: 480px) {
  .tt-dongdi-label { width: 100px; font-size: .76rem; }
}

/* ═══ SECTION: Trường Sinh 12 Cung ═══ */
.tt-truongsinh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
}
.tt-truongsinh-card {
  text-align: center;
  padding: 16px 10px;
  background: var(--tt-jade-subtle);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius);
}
.tt-ts--good { border-color: rgba(80,168,112,.4); background: rgba(80,168,112,.08); }
.tt-ts--bad { border-color: rgba(224,96,72,.3); background: rgba(224,96,72,.06); }
.tt-ts-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tt-text-dim);
  margin-bottom: 8px;
}
.tt-ts-chi {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--tt-text);
  margin-bottom: 4px;
}
.tt-ts-stage {
  font-size: .88rem;
  font-weight: 700;
  color: var(--tt-jade-light);
}
.tt-ts--good .tt-ts-stage { color: #50a870; }
.tt-ts--bad .tt-ts-stage { color: #e06048; }

/* ═══ SECTION: Hình Xung Hợp Hại ═══ */
.tt-hxhh-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tt-hxhh-group {
  padding: 12px 16px;
  border-radius: var(--tt-radius);
  border: 1px solid var(--tt-border);
}
.tt-hxhh-group--hop {
  background: rgba(80,168,112,.06);
  border-color: rgba(80,168,112,.2);
}
.tt-hxhh-group--xung {
  background: rgba(224,96,72,.06);
  border-color: rgba(224,96,72,.2);
}
.tt-hxhh-group-label {
  font-family: 'Playfair Display', serif;
  font-size: .88rem;
  font-weight: 700;
  color: var(--tt-jade-light);
  margin-bottom: 8px;
}
.tt-hxhh-group--hop .tt-hxhh-group-label { color: #50a870; }
.tt-hxhh-group--xung .tt-hxhh-group-label { color: #e06048; }
.tt-hxhh-item {
  font-size: .84rem;
  color: var(--tt-text);
  padding: 4px 0;
}
.tt-hxhh-empty {
  text-align: center;
  padding: 20px;
  color: var(--tt-text-dim);
  font-size: .84rem;
  font-style: italic;
}

/* ═══ SECTION: Thần Sát ═══ */
.tt-thansat-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tt-thansat-card {
  padding: 14px 16px;
  border-radius: var(--tt-radius);
  border: 1px solid var(--tt-border);
  background: var(--tt-jade-subtle);
}
.tt-thansat-card--cát { border-left: 3px solid #50a870; }
.tt-thansat-card--hung { border-left: 3px solid #e06048; }
.tt-thansat-card--bán_cát { border-left: 3px solid #c8a050; }
.tt-thansat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.tt-thansat-star-icon {
  display: inline-flex;
  align-items: center;
  opacity: .65;
}
.tt-thansat-star-icon svg {
  width: 22px;
  height: 22px;
}
.tt-thansat-card--cát .tt-thansat-star-icon { color: #50a870; }
.tt-thansat-card--hung .tt-thansat-star-icon { color: #e06048; }
.tt-thansat-card--bán_cát .tt-thansat-star-icon { color: #c8a050; }
.tt-thansat-name {
  font-weight: 700;
  font-size: .95rem;
  color: var(--tt-text);
}
.tt-thansat-han {
  font-family: 'Noto Serif SC', serif;
  font-size: .82rem;
  color: var(--tt-text-dim);
}
.tt-thansat-type {
  margin-left: auto;
  padding: 2px 8px;
  font-size: .75rem;
  border-radius: 2px;
  font-weight: 600;
}
.tt-thansat-type--cát { background: rgba(80,168,112,.15); color: #50a870; }
.tt-thansat-type--hung { background: rgba(224,96,72,.15); color: #e06048; }
.tt-thansat-type--bán_cát { background: rgba(200,160,80,.15); color: #c8a050; }
.tt-thansat-chi {
  font-size: .76rem;
  color: var(--tt-text-dim);
  margin-bottom: 4px;
}
.tt-thansat-desc {
  font-size: .82rem;
  color: var(--tt-text);
  line-height: 1.5;
  margin: 0;
}
.tt-thansat-empty {
  text-align: center;
  padding: 20px;
  color: var(--tt-text-dim);
  font-style: italic;
}

/* ═══ SECTION: Dụng Thần ═══ */
.tt-dungthan-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.tt-dungthan-card {
  text-align: center;
  padding: 16px 8px;
  background: var(--tt-jade-subtle);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius);
  position: relative;
  overflow: hidden;
}
.tt-dungthan-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--dt-color, var(--tt-jade));
  opacity: .5;
}
.tt-dungthan-char {
  font-family: 'Noto Serif SC', 'KaiTi', serif;
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 6px;
  opacity: .7;
}
.tt-dungthan-name {
  font-family: 'Playfair Display', serif;
  font-size: .82rem;
  font-weight: 700;
  color: var(--tt-jade-light);
  margin-bottom: 4px;
}
.tt-dungthan-hanh {
  font-size: .92rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.tt-dungthan-desc {
  font-size: .75rem;
  color: var(--tt-text-dim);
  line-height: 1.3;
}
.tt-dungthan-explain {
  padding: 14px 16px;
  background: var(--tt-jade-subtle);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius);
  font-size: .84rem;
  color: var(--tt-text);
  line-height: 1.6;
}
.tt-dungthan-explain p { margin: 0; }
@media (max-width: 600px) {
  .tt-dungthan-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 380px) {
  .tt-dungthan-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══ SECTION: Cải Vận ═══ */
.tt-caivan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.tt-caivan-card {
  position: relative;
  overflow: hidden;
  padding: 16px;
  background: var(--tt-jade-subtle);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius);
}
.tt-caivan-card--wide { grid-column: 1 / -1; }
.tt-caivan-icon {
  position: absolute;
  bottom: -6px;
  right: 8px;
  margin: 0;
  pointer-events: none;
  z-index: 0;
}
.tt-caivan-icon svg {
  width: 64px;
  height: 64px;
  opacity: .06;
}
.tt-caivan-label, .tt-caivan-value { position: relative; z-index: 1; }
.tt-caivan-label {
  font-family: 'Playfair Display', serif;
  font-size: .84rem;
  font-weight: 700;
  color: var(--tt-jade-light);
  margin-bottom: 8px;
}
.tt-caivan-value {
  font-size: .84rem;
  color: var(--tt-text);
  line-height: 1.5;
}
.tt-caivan-value strong { color: var(--tt-jade-light); }
@media (max-width: 480px) {
  .tt-caivan-grid { grid-template-columns: 1fr; }
}

/* ═══ SECTION: Đại Vận ═══ */
.tt-daivan-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.tt-daivan-card {
  text-align: center;
  padding: 14px 8px;
  background: var(--tt-jade-subtle);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius);
  position: relative;
  transition: transform .2s, box-shadow .2s;
}
.tt-daivan-card--current {
  border-color: var(--dv-color, var(--tt-jade));
  box-shadow: 0 0 12px rgba(200,80,64,.2), inset 0 0 0 1px var(--dv-color, var(--tt-jade));
  transform: scale(1.04);
}
.tt-daivan-period {
  font-size: .76rem;
  font-weight: 700;
  color: var(--tt-jade-light);
  margin-bottom: 2px;
}
.tt-daivan-years {
  font-size: .75rem;
  color: var(--tt-text-dim);
  margin-bottom: 8px;
}
.tt-daivan-canchi {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tt-text);
}
.tt-daivan-hantu {
  font-family: 'Noto Serif SC', serif;
  font-size: .78rem;
  color: var(--tt-text-dim);
  margin: 2px 0 6px;
}
.tt-daivan-hanh {
  font-size: .78rem;
  font-weight: 600;
}
.tt-daivan-current {
  font-size: .75rem;
  color: var(--tt-jade-light);
  margin-top: 6px;
  font-weight: 700;
}

/* ═══ Biểu đồ Thăng Trầm ═══ */
.tt-thangtram {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--tt-border);
}
.tt-thangtram-title {
  font-family: 'Playfair Display', serif;
  font-size: .92rem;
  font-weight: 700;
  color: var(--tt-jade-light);
  text-align: center;
  margin-bottom: 14px;
}
.tt-thangtram-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 140px;
  padding: 0 4px;
}
.tt-thangtram-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}
.tt-thangtram-score {
  font-size: .75rem;
  color: var(--tt-text-dim);
  margin-bottom: 4px;
}
.tt-thangtram-bar {
  width: 100%;
  max-width: 40px;
  border-radius: 2px 2px 0 0;
  transition: height .5s ease;
}
.tt-thangtram-bar--high { background: linear-gradient(180deg, rgba(80,168,112,.85), rgba(80,168,112,.5)); }
.tt-thangtram-bar--mid { background: linear-gradient(180deg, rgba(200,160,80,.8), rgba(200,160,80,.45)); }
.tt-thangtram-bar--low { background: linear-gradient(180deg, rgba(224,96,72,.8), rgba(224,96,72,.4)); }
.tt-thangtram-label {
  font-size: .75rem;
  color: var(--tt-text-dim);
  margin-top: 4px;
  text-align: center;
  word-break: break-all;
}
.tt-tt--current .tt-thangtram-bar {
  box-shadow: 0 0 8px rgba(200,80,64,.4);
}
.tt-tt--current .tt-thangtram-label { color: var(--tt-jade-light); font-weight: 700; }

/* ═══ SECTIONS: Lưu Niên / Lưu Nguyệt / Lưu Nhật ═══ */
.tt-luunien-grid,
.tt-luunguyet-grid,
.tt-luunhat-grid {
  display: grid;
  gap: 8px;
}
.tt-luunien-grid { grid-template-columns: repeat(5, 1fr); }
.tt-luunguyet-grid { grid-template-columns: repeat(4, 1fr); }
.tt-luunhat-grid { grid-template-columns: repeat(7, 1fr); }

.tt-luu-card {
  text-align: center;
  padding: 12px 6px;
  background: var(--tt-jade-subtle);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius);
  position: relative;
  transition: transform .15s;
}
.tt-luu-card--now {
  border-color: var(--tt-jade);
  box-shadow: 0 0 10px var(--tt-jade-glow);
  transform: scale(1.03);
}
.tt-luu-year, .tt-luu-month, .tt-luu-dow {
  font-size: .75rem;
  font-weight: 700;
  color: var(--tt-jade-light);
  margin-bottom: 4px;
}
.tt-luu-date {
  font-size: .82rem;
  font-weight: 600;
  color: var(--tt-text);
  margin-bottom: 2px;
}
.tt-luu-canchi {
  font-size: .82rem;
  color: var(--tt-text);
  margin-bottom: 2px;
}
.tt-luu-hanh {
  font-size: .76rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.tt-luu-tiet {
  font-size: .75rem;
  color: var(--tt-text-dim);
  margin-bottom: 2px;
}
.tt-luu-score {
  display: inline-block;
  padding: 2px 6px;
  font-size: .75rem;
  border-radius: 2px;
  font-weight: 600;
}
.tt-luu-score--great { background: rgba(80,168,112,.2); color: #50a870; }
.tt-luu-score--good { background: rgba(80,168,112,.12); color: #6ab880; }
.tt-luu-score--neutral { background: rgba(200,160,80,.12); color: #c8a050; }
.tt-luu-score--bad { background: rgba(224,160,72,.12); color: #d0a048; }
.tt-luu-score--worse { background: rgba(224,96,72,.15); color: #e06048; }
.tt-luu-now {
  font-size: .75rem;
  color: var(--tt-jade-light);
  font-weight: 700;
  margin-top: 4px;
}

@media (max-width: 600px) {
  .tt-luunien-grid { grid-template-columns: repeat(2, 1fr); }
  .tt-luunguyet-grid { grid-template-columns: repeat(3, 1fr); }
  .tt-luunhat-grid { grid-template-columns: repeat(4, 1fr); }
  .tt-daivan-timeline { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .tt-luunguyet-grid { grid-template-columns: repeat(2, 1fr); }
  .tt-luunhat-grid { grid-template-columns: repeat(3, 1fr); }
  .tt-results { padding: 16px 8px 32px; }
  .tt-nhatchu-desc { padding: 12px 12px; }
}
@media (max-width: 380px) {
  .tt-luunhat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   INTERPRETATION BLOCKS — Thập Thần, Trường Sinh, Dụng Thần
   ═══════════════════════════════════════════════════════════════ */

/* --- Thập Thần interpretation list --- */
.tt-thapthan-interps {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tt-interp-block {
  background: rgba(200,160,80,.04);
  border: 1px solid rgba(200,160,80,.12);
  border-left: 3px solid var(--tt-accent, #c85040);
  padding: 16px 18px;
}
.tt-interp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.tt-interp-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tt-text-warm);
}
.tt-interp-han {
  font-size: .85rem;
  color: var(--tt-text-dim);
  opacity: .7;
}
.tt-interp-text {
  font-size: .85rem;
  line-height: 1.65;
  color: var(--tt-text-muted, #b8b0a0);
  margin-bottom: 12px;
}
.tt-interp-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tt-interp-detail {
  font-size: .8rem;
  line-height: 1.55;
  color: var(--tt-text-muted, #b8b0a0);
}
.tt-interp-detail strong {
  color: var(--tt-text-warm);
  font-weight: 600;
}

/* --- Trường Sinh energy + meaning --- */
.tt-ts-energy {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: 2px;
  display: inline-block;
}
.tt-ts-energy--high { background: rgba(80,168,112,.15); color: #50a870; }
.tt-ts-energy--mid  { background: rgba(200,160,80,.12); color: #c8a050; }
.tt-ts-energy--low  { background: rgba(224,96,72,.12); color: #e06048; }
.tt-ts-meaning {
  font-size: .75rem;
  line-height: 1.5;
  color: var(--tt-text-muted, #b8b0a0);
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(200,160,80,.08);
}

/* --- Dụng Thần deep interpretation --- */
.tt-dungthan-deep {
  margin-top: 20px;
  padding: 20px;
  background: rgba(200,160,80,.03);
  border: 1px solid rgba(200,160,80,.1);
}
.tt-dungthan-deep-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tt-text-warm);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 2px solid;
}
.tt-dungthan-deep-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.tt-dungthan-deep-item {
  position: relative;
  overflow: hidden;
  padding: 12px;
  background: rgba(12,12,10,.4);
  border: 1px solid rgba(200,160,80,.08);
}
.tt-dungthan-deep-icon {
  position: absolute;
  bottom: -6px;
  right: 6px;
  margin: 0;
  pointer-events: none;
  z-index: 0;
}
.tt-dungthan-deep-icon svg {
  width: 56px;
  height: 56px;
  opacity: .06;
}
.tt-dungthan-deep-label, .tt-dungthan-deep-val { position: relative; z-index: 1; }
.tt-dungthan-deep-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--tt-text-warm);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.tt-dungthan-deep-val {
  font-size: .8rem;
  line-height: 1.55;
  color: var(--tt-text-muted, #b8b0a0);
}
.tt-dungthan-deep-warn {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(224,96,72,.06);
  border: 1px solid rgba(224,96,72,.15);
  font-size: .8rem;
  line-height: 1.5;
  color: #e0a060;
}

/* ═══════════════════════════════════════════════════════════════
   L3: TABLET LANDSCAPE BREAKPOINT (1024px)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  .tt-thapthan-grid { grid-template-columns: repeat(2, 1fr); }
  .tt-truongsinh-grid { grid-template-columns: repeat(2, 1fr); }
  .tt-dungthan-grid { grid-template-columns: repeat(3, 1fr); }
  .tt-caivan-grid { grid-template-columns: repeat(2, 1fr); }
  .tt-dungthan-deep-grid { grid-template-columns: repeat(2, 1fr); }
  .tt-interp-details { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   L4: PRINT STYLESHEET
   ═══════════════════════════════════════════════════════════════ */
@media print {
  .tt-frame-outer,
  .tt-submit-row,
  .tt-form-box,
  .tt-hero,
  .tt-fab-wrapper,
  .tt-disclaimer,
  .tt-taoty-group { display: none !important; }

  .tt-section {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    background: #fff !important;
    page-break-inside: avoid;
    margin-bottom: 12px !important;
  }
  .tt-sect-head { background: #f5f5f5 !important; }
  .tt-sect-title,
  .tt-sect-desc { color: #000 !important; }
  .tt-interp-text,
  .tt-interp-detail,
  .tt-ts-meaning,
  .tt-dungthan-deep-val { color: #333 !important; }
  .tt-dongdi-bar { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .tt-thangtram-chart { height: 80px !important; }

  /* Mobile-only sections: smaller */
  .tt-thapthan-grid,
  .tt-truongsinh-grid,
  .tt-dungthan-grid,
  .tt-caivan-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Interpretation blocks on small screens
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .tt-interp-details { grid-template-columns: 1fr; }
  .tt-dungthan-deep-grid { grid-template-columns: 1fr; }
  .tt-dungthan-deep { padding: 14px; }
  .tt-interp-block { padding: 12px 14px; }
  .tt-truongsinh-card { min-height: auto; }
  .tt-ts-meaning { font-size: .75rem; }
}

/* ═══════════════════════════════════════════════════════════════
   UPGRADE v2: MISSING CSS + DEEP CONTENT + MICRO-FIXES
   ═══════════════════════════════════════════════════════════════ */

/* ── Bát Tự Chart (renderBatTuChart output) ── */
.tt-battu-chart {
  overflow-x: auto;
  margin: 0 -4px;
}
.tt-battu-row {
  display: grid;
  grid-template-columns: 80px repeat(4, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--tt-border);
}
.tt-battu-row--header { border-bottom: 2px solid var(--tt-jade); }
.tt-battu-row--tangcan { border-bottom: none; }
.tt-battu-cell {
  text-align: center;
  padding: 14px 8px;
  border-right: 1px solid rgba(200,160,80,.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.tt-battu-cell:last-child { border-right: none; }
.tt-battu-cell--label {
  justify-content: center;
  font-size: .75rem;
  font-weight: 600;
  color: var(--tt-text-dim);
  text-transform: uppercase;
  letter-spacing: .08em;
  background: rgba(200,160,80,.03);
}
.tt-battu-cell--header {
  font-family: 'Playfair Display', serif;
  font-size: .82rem;
  font-weight: 700;
  color: var(--tt-jade-light);
  padding: 10px 8px;
}
.tt-battu-cell--nhatchu {
  background: rgba(200,80,64,.06);
  box-shadow: inset 0 0 0 1.5px rgba(200,80,64,.25);
  position: relative;
}
.tt-battu-cell--nhatchu::after {
  content: '主';
  position: absolute;
  top: 4px;
  right: 6px;
  font-family: 'Noto Serif SC', serif;
  font-size: .75rem;
  color: var(--tt-jade);
  opacity: .5;
}
.tt-battu-cell--tangcan-list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}
.tt-hantu {
  font-family: 'Noto Serif SC', 'KaiTi', serif;
  font-size: 1.5rem;
  line-height: 1;
  display: block;
}
.tt-viet {
  font-size: .88rem;
  font-weight: 600;
  color: var(--tt-text);
  display: block;
}
.tt-hanh-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: .75rem;
  font-weight: 600;
  border-radius: 2px;
  letter-spacing: .04em;
}
.tt-hanh-tag--kim  { background: rgba(176,184,192,.12); color: #b0b8c0; border: 1px solid rgba(176,184,192,.25); }
.tt-hanh-tag--mộc, .tt-hanh-tag--moc  { background: rgba(80,168,112,.12); color: #50a870; border: 1px solid rgba(80,168,112,.25); }
.tt-hanh-tag--thủy, .tt-hanh-tag--thuy { background: rgba(80,152,192,.12); color: #5098c0; border: 1px solid rgba(80,152,192,.25); }
.tt-hanh-tag--hỏa, .tt-hanh-tag--hoa  { background: rgba(224,96,72,.12); color: #e06048; border: 1px solid rgba(224,96,72,.25); }
.tt-hanh-tag--thổ, .tt-hanh-tag--tho  { background: rgba(200,160,80,.12); color: #c8a050; border: 1px solid rgba(200,160,80,.25); }
.tt-tangcan-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  font-size: .75rem;
  font-weight: 600;
  border-radius: 2px;
}
.tt-tangcan-item small { font-size: .75rem; font-weight: 400; opacity: .7; }

/* Nhật Chủ highlight */
.tt-nhatchu-highlight {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(200,80,64,.06);
  border: 1px solid rgba(200,80,64,.2);
  border-radius: var(--tt-radius);
  text-align: center;
}
.tt-nhatchu-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--tt-text-dim);
}
.tt-nhatchu-han {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--tt-jade-light);
}
.tt-nhatchu-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tt-jade-light);
}
.tt-nhatchu-ad {
  font-size: .78rem;
  color: var(--tt-text-dim);
}

@media (max-width: 600px) {
  .tt-battu-row { grid-template-columns: 60px repeat(4, 1fr); }
  .tt-battu-cell { padding: 10px 4px; }
  .tt-hantu { font-size: 1.2rem; }
  .tt-viet { font-size: .78rem; }
  .tt-battu-cell--label { font-size: .75rem; }
  .tt-nhatchu-highlight { flex-wrap: wrap; gap: 8px; }
}

/* ── Ngũ Hành Phân Bổ bars (renderNguHanhPhanBo output) ── */
.tt-phanbo-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}
.tt-phanbo-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tt-phanbo-row--vuong { }
.tt-phanbo-row--thieu .tt-phanbo-label { opacity: .55; }
.tt-phanbo-label {
  width: 72px;
  flex-shrink: 0;
  font-size: .84rem;
  color: var(--tt-text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.tt-phanbo-han {
  font-family: 'Noto Serif SC', serif;
  font-size: .88rem;
  opacity: .5;
}
.tt-phanbo-bar-wrap {
  flex: 1;
  height: 22px;
  background: rgba(232,224,208,.06);
  border-radius: var(--tt-radius);
  overflow: hidden;
}
.tt-phanbo-bar {
  height: 100%;
  border-radius: var(--tt-radius);
  transition: width .6s ease;
  min-width: 4px;
}
.tt-phanbo-bar--kim  { background: linear-gradient(90deg, rgba(176,184,192,.4), rgba(176,184,192,.8)); }
.tt-phanbo-bar--mộc, .tt-phanbo-bar--moc  { background: linear-gradient(90deg, rgba(80,168,112,.4), rgba(80,168,112,.8)); }
.tt-phanbo-bar--thủy, .tt-phanbo-bar--thuy { background: linear-gradient(90deg, rgba(80,152,192,.4), rgba(80,152,192,.8)); }
.tt-phanbo-bar--hỏa, .tt-phanbo-bar--hoa  { background: linear-gradient(90deg, rgba(224,96,72,.4), rgba(224,96,72,.8)); }
.tt-phanbo-bar--thổ, .tt-phanbo-bar--tho  { background: linear-gradient(90deg, rgba(200,160,80,.4), rgba(200,160,80,.8)); }
.tt-phanbo-count {
  width: 28px;
  text-align: right;
  font-weight: 700;
  font-size: .92rem;
  color: var(--tt-text);
}
.tt-phanbo-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.tt-info-item--warn .tt-info-value { color: #e06048; }

@media (max-width: 480px) {
  .tt-phanbo-label { width: 60px; font-size: .76rem; }
}

/* ── Phase 5: Scroll Banner & Cloud Divider ── */
.tt-scroll-banner-wrap {
  margin: 32px 0 8px;
  text-align: center;
}
.tt-scroll-banner-svg {
  max-width: 100%;
  height: auto;
  color: var(--tt-jade, #c9a96e);
}
.tt-cloud-divider {
  margin: 12px 0;
  text-align: center;
  opacity: .45;
}
.tt-cloud-divider svg {
  width: 100%;
  max-width: 200px;
  height: auto;
  color: var(--tt-jade, #c9a96e);
}
.tt-wuxing-wrap {
  display: flex;
  justify-content: center;
  margin: 16px 0 20px;
  overflow: hidden;
}
.tt-wuxing-wrap svg {
  max-width: 300px;
  height: auto;
}
@media (max-width: 480px) {
  .tt-scroll-banner-wrap { margin: 20px 0 8px; }
  .tt-wuxing-wrap svg { max-width: 240px; }
}

/* ── Phase 2: Diagram Containers ── */
.tt-radar-wrap, .tt-balance-wrap, .tt-lifecycle-wrap,
.tt-fortune-wrap, .tt-interact-wrap, .tt-khongvong-wrap {
  display: flex;
  justify-content: center;
  margin: 16px 0 20px;
  padding: 8px;
  overflow: hidden;
}
.tt-radar-wrap svg, .tt-balance-wrap svg, .tt-lifecycle-wrap svg,
.tt-fortune-wrap svg, .tt-interact-wrap svg, .tt-khongvong-wrap svg {
  max-width: 100%;
  height: auto;
}
.tt-radar-wrap svg { max-width: 300px; }
.tt-lifecycle-wrap svg { max-width: 420px; }
.tt-balance-wrap svg { max-width: 240px; }
.tt-khongvong-wrap svg { max-width: 220px; }
.tt-fortune-wrap svg { max-width: 600px; }
.tt-interact-wrap svg { max-width: 400px; }
@media (max-width: 480px) {
  .tt-radar-wrap svg { max-width: 260px; }
  .tt-lifecycle-wrap svg { max-width: 320px; }
  .tt-balance-wrap svg, .tt-khongvong-wrap svg { max-width: 200px; }
  .tt-fortune-wrap svg { max-width: 100%; }
  .tt-interact-wrap svg { max-width: 100%; }
}

/* ── H6: Unknown hour placeholder ── */
.tt-battu-cell--unknown {
  opacity: .4;
  text-align: center;
}
.tt-battu-cell--unknown .tt-hantu {
  font-size: 1.8rem;
}
.tt-battu-cell--unknown .tt-viet {
  font-size: .85rem;
  font-style: italic;
}

/* ── Day Master Portrait ── */
.tt-dm-portrait-wrap {
  display: flex;
  justify-content: center;
  margin: 16px 0 20px;
  padding: 8px;
}
.tt-dm-portrait-wrap svg {
  max-width: 120px;
  height: auto;
  opacity: .85;
}
.tt-rh-portrait {
  display: flex;
  justify-content: center;
  margin: -8px 0 4px;
}
.tt-rh-portrait svg {
  max-width: 80px;
  height: auto;
  opacity: .65;
}
@media (max-width: 480px) {
  .tt-dm-portrait-wrap svg { max-width: 80px; }
  .tt-rh-portrait svg { max-width: 60px; }
  .tt-dungthan-deep-grid { grid-template-columns: 1fr; }
}

/* ── Nhật Chủ detail cards (renderNhatChu output) ── */
.tt-nhatchu-desc {
  margin: 12px 0 16px;
  padding: 14px 16px;
  background: var(--tt-jade-subtle);
  border-left: 3px solid var(--tt-jade);
  border-radius: 0 var(--tt-radius) var(--tt-radius) 0;
  font-size: .86rem;
  line-height: 1.65;
  color: var(--tt-text);
}
.tt-nhatchu-desc p { margin: 0; }
.tt-nhatchu-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.tt-detail-card {
  background: var(--tt-jade-subtle);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius);
  padding: 16px;
  transition: border-color .2s;
}
.tt-detail-card:hover { border-color: rgba(200,80,64,.3); }
.tt-detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--tt-border);
}
.tt-detail-icon {
  font-family: 'Noto Serif SC', 'KaiTi', serif;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--tt-jade);
  opacity: .6;
}
.tt-detail-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: .88rem;
  font-weight: 700;
  color: var(--tt-jade-light);
  margin: 0;
}
.tt-detail-card p {
  font-size: .84rem;
  line-height: 1.6;
  color: var(--tt-text);
  margin: 0;
}

@media (max-width: 600px) {
  .tt-nhatchu-details { grid-template-columns: 1fr; }
}

/* ── Tàng Can grid (renderTangCan output) ── */
.tt-tangcan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.tt-tangcan-card {
  background: var(--tt-jade-subtle);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius);
  padding: 14px 12px;
  text-align: center;
}
.tt-tangcan-card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--tt-border);
}
.tt-tangcan-chi-han {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.4rem;
  line-height: 1;
  opacity: .6;
}
.tt-tangcan-chi {
  font-size: .78rem;
  font-weight: 600;
  color: var(--tt-jade-light);
}
.tt-tangcan-stems {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tt-tangcan-stem {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: .8rem;
}
.tt-tangcan-role {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tt-text-dim);
  min-width: 44px;
  text-align: right;
}
.tt-tangcan-can {
  font-weight: 600;
  color: var(--tt-text);
}
.tt-tangcan-hanh {
  padding: 1px 6px;
  border-radius: 2px;
  font-size: .75rem;
  font-weight: 600;
}
.tt-tangcan-note {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--tt-border);
}
.tt-tangcan-note p {
  font-size: .76rem;
  color: var(--tt-text-dim);
  line-height: 1.5;
  margin: 0;
  font-style: italic;
}

@media (max-width: 768px) {
  .tt-tangcan-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
  .tt-tangcan-grid { grid-template-columns: 1fr; }
}

/* ── Trường Sinh hán tự upgrade ── */
.tt-ts-hantu {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.3rem;
  line-height: 1;
  opacity: .45;
  margin-bottom: 6px;
}

/* ── Thần Sát expand/collapse deep content ── */
.tt-thansat-expand {
  display: none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--tt-border);
}
.tt-thansat-card.is-expanded .tt-thansat-expand { display: block; }
.tt-thansat-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 10px;
  font-size: .75rem;
  color: var(--tt-jade);
  background: transparent;
  border: 1px solid rgba(200,80,64,.2);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
  font-family: 'Be Vietnam Pro', sans-serif;
}
.tt-thansat-toggle:hover { border-color: var(--tt-jade); color: var(--tt-jade-light); }
.tt-thansat-toggle .tt-tgl-arrow { transition: transform .2s; }
.tt-thansat-card.is-expanded .tt-thansat-toggle .tt-tgl-arrow { transform: rotate(180deg); }
.tt-thansat-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tt-thansat-detail-item {
  font-size: .78rem;
  line-height: 1.5;
  color: var(--tt-text);
}
.tt-thansat-detail-item strong {
  display: block;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tt-jade);
  margin-bottom: 2px;
  font-weight: 600;
}
@media (max-width: 600px) {
  .tt-thansat-detail-grid { grid-template-columns: 1fr; }
}

/* ── Nạp Âm Deep Interps ── */
.tt-napam-deep {
  margin-top: 20px;
}
.tt-napam-deep-title {
  font-family: 'Playfair Display', serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--tt-jade-light);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--tt-jade);
}
.tt-napam-deep-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.tt-napam-deep-card {
  padding: 14px;
  background: rgba(200,160,80,.03);
  border: 1px solid rgba(200,160,80,.1);
  border-left: 3px solid var(--tt-jade);
}
.tt-napam-deep-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.tt-napam-deep-icon {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.1rem;
  color: var(--tt-jade);
  opacity: .6;
}
.tt-napam-deep-label {
  font-family: 'Playfair Display', serif;
  font-size: .82rem;
  font-weight: 700;
  color: var(--tt-jade-light);
}
.tt-napam-deep-text {
  font-size: .82rem;
  line-height: 1.6;
  color: var(--tt-text);
  margin: 0;
}
@media (max-width: 600px) {
  .tt-napam-deep-grid { grid-template-columns: 1fr; }
}

/* ── Đại Vận Narrative Panel ── */
.tt-daivan-narrative {
  margin-top: 20px;
  padding: 18px;
  background: rgba(200,160,80,.03);
  border: 1px solid rgba(200,160,80,.1);
  border-left: 3px solid var(--dv-narr-color, var(--tt-jade));
}
.tt-daivan-narr-title {
  font-family: 'Playfair Display', serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--tt-jade-light);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tt-daivan-narr-title .tt-narr-char {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.2rem;
  opacity: .5;
}
.tt-daivan-narr-text {
  font-size: .84rem;
  line-height: 1.65;
  color: var(--tt-text);
  margin: 0 0 12px;
}
.tt-daivan-narr-text:last-child { margin-bottom: 0; }
.tt-daivan-giai-doan {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--tt-border);
}
.tt-daivan-giai-doan-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--tt-jade);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}

/* ── Luận Giải Đời Sống (NEW section) ── */
.tt-luangiai-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.tt-luangiai-card {
  position: relative;
  overflow: hidden;
  background: rgba(200,160,80,.04);
  border: 1px solid rgba(200,160,80,.12);
  border-left: 3px solid var(--lg-color, var(--tt-jade));
  padding: 16px 18px;
}
.tt-luangiai-illust {
  position: absolute;
  bottom: -8px;
  right: 12px;
  margin: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}
.tt-luangiai-illust svg {
  width: 80px;
  height: 80px;
  opacity: .06;
}
.tt-luangiai-head, .tt-luangiai-text { position: relative; z-index: 1; }
.tt-luangiai-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.tt-luangiai-icon {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.3rem;
  line-height: 1;
  opacity: .5;
}
.tt-luangiai-label {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tt-jade-light);
}
.tt-luangiai-text {
  font-size: .84rem;
  line-height: 1.65;
  color: var(--tt-text);
  margin: 0;
}

/* ── Không Vong mini-section ── */
.tt-khongvong-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.tt-khongvong-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(224,96,72,.06);
  border: 1px solid rgba(224,96,72,.2);
  border-radius: var(--tt-radius);
  font-size: .84rem;
  color: var(--tt-text);
}
.tt-khongvong-chi {
  font-family: 'Noto Serif SC', serif;
  font-size: 1rem;
  font-weight: 700;
  color: #e06048;
}
.tt-khongvong-note {
  margin-top: 10px;
  font-size: .78rem;
  color: var(--tt-text-dim);
  font-style: italic;
  line-height: 1.5;
}

/* ── Part Header upgrade (double-line top, watermark) ── */

/* ── Section header meander SVG after border ── */
.tt-sect-head {
  position: relative;
  flex-wrap: wrap;
}
.tt-sect-head .tt-sect-icon { flex-shrink: 0; }
.tt-sect-head .tt-sect-title { flex: 1; min-width: 0; }
.tt-sect-desc {
  flex-basis: 100%;
  font-size: .78rem;
  color: var(--tt-text-dim);
  margin: 8px 0 0;
}
.tt-sect-glossary {
  flex-basis: 100%;
}
.tt-sect-icon span {
  font-family: 'Noto Serif SC', 'KaiTi', serif;
  color: var(--tt-jade);
  opacity: .6;
}

/* ── Micro-fix: responsive patches ── */
@media (max-width: 480px) {
  .tt-dongdi-label { width: 110px; }
  .tt-thangtram-label { font-size: .75rem; }
}
@media (max-width: 320px) {
  .tt-section { padding: 18px 14px; }
  .tt-detail-card { padding: 12px; }
  .tt-battu-cell { padding: 8px 3px; }
  .tt-hantu { font-size: 1rem; }
}

/* ── Micro-fix: prefers-reduced-motion for all spinning ── */
@media (prefers-reduced-motion: reduce) {
  .tt-mandala-ring,
  .tt-mandala-orbit,
  .tt-cine-orbit,
  .tt-cine-energy,
  .tt-cine-taiji,
  .tt-bagua-ring-outer,
  .tt-bagua-ring-mid,
  .tt-bagua-ring-inner,
  .tt-seal-svg,
  .tt-rh-portal .tt-bagua-svg,
  .tt-gc-ring {
    animation: none !important;
  }
  .tt-section { animation-duration: .01ms !important; }
}

/* ── Napam card wrapper (basic info) ── */
.tt-napam-card {
  padding: 20px;
  background: var(--tt-jade-subtle);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius);
}
.tt-napam-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}
.tt-napam-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--tt-jade-light);
}
.tt-napam-hanh {
  display: inline-block;
  padding: 3px 10px;
  font-size: .82rem;
  font-weight: 600;
  border-radius: 2px;
}

/* ═══ CONTENT AUDIT — Glossary + Click-to-Expand ═══ */

/* Section glossary — Tầng 1: thuật ngữ inline */
.tt-sect-glossary {
  font-size: .75rem;
  color: var(--tt-text-dim);
  margin: 6px 0 0;
  line-height: 1.6;
  opacity: .6;
  max-width: 600px;
}
.tt-sect-glossary strong {
  color: var(--tt-jade-light);
  opacity: 1;
  font-weight: 600;
}

/* Lưu cards — clickable */
.tt-luu-card[role="button"] {
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.tt-luu-card[role="button"]:hover {
  transform: scale(1.04);
  box-shadow: 0 2px 8px rgba(200,80,64,.12);
}
.tt-luu-card--active {
  border-color: var(--tt-jade) !important;
  box-shadow: 0 0 12px var(--tt-jade-glow), inset 0 0 8px rgba(200,80,64,.06) !important;
  transform: scale(1.05) !important;
}
.tt-luu-card--active::after {
  content: '▼';
  display: block;
  font-size: .75rem;
  color: var(--tt-jade);
  opacity: .6;
  margin-top: 4px;
}

/* Lưu detail panel — expand below grid */
.tt-luu-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .35s ease, opacity .25s ease;
  opacity: 0;
  border-radius: var(--tt-radius);
}
.tt-luu-detail--open {
  max-height: 600px;
  opacity: 1;
  padding: 16px;
  margin-top: 12px;
  background: var(--tt-jade-subtle);
  border: 1px solid var(--tt-border);
  border-left: 3px solid var(--tt-jade);
}

/* Expand content rows */
.tt-luu-expand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tt-luu-ex-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.tt-luu-ex-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Serif SC', 'KaiTi', serif;
  font-size: .9rem;
  color: var(--tt-jade);
  background: rgba(200,80,64,.06);
  border-radius: 2px;
  opacity: .7;
}
.tt-luu-ex-row strong {
  display: block;
  font-size: .78rem;
  color: var(--tt-jade-light);
  margin-bottom: 2px;
}
.tt-luu-ex-row p {
  margin: 0;
  font-size: .75rem;
  line-height: 1.55;
  color: var(--tt-text);
  opacity: .85;
}
.tt-luu-ex-na {
  font-size: .75rem;
  color: var(--tt-text-dim);
  opacity: .6;
  margin: 0;
}

/* Đồng/Dị verdict explanation */
.tt-dongdi-explain {
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--tt-jade-subtle);
  border: 1px solid var(--tt-border);
  border-left: 3px solid var(--tt-jade);
  border-radius: var(--tt-radius);
}
.tt-dongdi-explain p {
  margin: 0;
  font-size: .75rem;
  line-height: 1.6;
  color: var(--tt-text);
  opacity: .85;
}
.tt-dongdi-explain strong {
  color: var(--tt-jade-light);
}
.tt-dongdi-explain em {
  color: var(--tt-jade);
  font-style: normal;
  font-weight: 500;
}

/* Responsive for expand panel */
@media (max-width: 480px) {
  .tt-luu-detail--open { padding: 12px 10px; }
  .tt-luu-ex-row { gap: 8px; }
  .tt-luu-ex-icon { width: 24px; height: 24px; font-size: .8rem; }
  .tt-luu-ex-row p { font-size: .75rem; }
  .tt-sect-glossary { font-size: .75rem; }
}

/* ═══ BẢN ĐỒ VẬN MỆNH — Thăng Trầm v2 ═══ */
.tt-tt-summary {
  margin: 12px 0;
  padding: 10px 14px;
  border: 1px solid var(--tt-border);
  border-radius: 4px;
  background: rgba(200,169,110,.03);
}
.tt-tt-sum-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: .78rem;
  color: var(--tt-text-dim);
  line-height: 1.4;
}
.tt-tt-sum-row strong { color: var(--tt-text); }
.tt-tt-sum-row--cur { color: var(--tt-text); font-weight: 600; }
.tt-tt-sum-han {
  font-family: 'Noto Serif SC', serif;
  font-size: 1rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.tt-tt-sum-han--peak { color: #50a870; }
.tt-tt-sum-han--valley { color: #e06048; }
.tt-tt-sum-han--cur { color: var(--tt-jade-light); }
.tt-tt-sum-why { font-size: .75rem; opacity: .65; }
.tt-fortune-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0;
  padding: 8px;
  overflow: hidden;
}
.tt-fortune-wrap svg {
  max-width: 600px;
  width: 100%;
  height: auto;
  display: block;
}
.tt-tt-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 6px 0;
  font-size: .75rem;
  color: var(--tt-text-dim);
  opacity: .55;
}
.tt-tt-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tt-tt-leg-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.tt-tt-glossary {
  font-size: .75rem;
  color: var(--tt-text-dim);
  text-align: center;
  margin: 4px 0 8px;
  opacity: .45;
  line-height: 1.5;
}
.tt-tt-glossary strong { color: var(--tt-jade-light); opacity: 1; }
/* Detail panel (click-to-expand) */
.tt-tt-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, opacity .3s ease, padding .3s ease;
  opacity: 0;
  border-radius: 4px;
}
.tt-tt-detail--open {
  max-height: 500px;
  opacity: 1;
  padding: 14px 16px;
  margin-top: 10px;
  background: rgba(200,169,110,.04);
  border: 1px solid var(--tt-border);
  border-left: 3px solid var(--tt-jade);
}
.tt-tt-det-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--tt-border);
}
.tt-tt-det-cc {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tt-text);
}
.tt-tt-det-pill {
  font-size: .75rem;
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(200,169,110,.1);
  color: var(--pill-c, var(--tt-jade-light));
  font-family: 'Noto Serif SC', serif;
}
.tt-tt-det-age, .tt-tt-det-years {
  font-size: .75rem;
  color: var(--tt-text-dim);
}
.tt-tt-det-score {
  font-size: .78rem;
  font-weight: 700;
  margin-left: auto;
}
.tt-tt-det-score--high { color: #50a870; }
.tt-tt-det-score--good { color: var(--tt-jade-light); }
.tt-tt-det-score--mid { color: #888; }
.tt-tt-det-score--low { color: #e06048; }
/* Hit areas */
.tt-tt-hit { transition: fill .2s, opacity .2s; }
/* Responsive */
@media (max-width: 480px) {
  .tt-tt-summary { padding: 8px 10px; }
  .tt-tt-sum-row { font-size: .75rem; gap: 6px; }
  .tt-tt-legend { gap: 8px; font-size: .75rem; }
  .tt-tt-det-head { gap: 6px; }
  .tt-tt-det-cc { font-size: .88rem; }
  .tt-tt-detail--open { padding: 10px 12px; }
}

/* ═══════════════════════════════════════════════════════════
   CHART v2 — Shared styles for 6 upgraded diagrams
   (Radar, Balance, Wheel, Interaction, KhongVong, WuXing)
   ═══════════════════════════════════════════════════════════ */

/* ── Summary bars (shared across all 6 charts) ── */
.tt-rdr-summary, .tt-bal-summary, .tt-wheel-summary,
.tt-inter-summary, .tt-kv-summary, .tt-wuxing-summary {
  background: rgba(201,169,110,.04);
  border: 1px solid rgba(201,169,110,.12);
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.tt-rdr-sum-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .78rem;
  color: var(--tt-text-dim, #b0a890);
  line-height: 1.4;
}
.tt-rdr-sum-row + .tt-rdr-sum-row { margin-top: 6px; }
.tt-rdr-sum-han {
  font-family: 'Noto Serif SC', serif;
  font-size: 1rem;
  min-width: 22px;
  text-align: center;
  opacity: .6;
}
.tt-rdr-sum-row--warn { color: #e06048; }
.tt-rdr-sum-row--warn .tt-rdr-sum-han { color: #e06048; }
.tt-rdr-sum-row--good { color: #50a870; }
.tt-rdr-sum-row--good .tt-rdr-sum-han { color: #50a870; }

/* ── Legend bars (shared) ── */
.tt-rdr-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  font-size: .75rem;
  color: var(--tt-text-dim, #b0a890);
  margin: 8px 0 4px;
  opacity: .7;
}
.tt-rdr-leg-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.tt-rdr-leg-line {
  display: inline-block;
  width: 16px;
  height: 0;
  border-top: 2px solid var(--tt-text-dim, #b0a890);
}
.tt-rdr-leg-line--dash { border-top-style: dashed; }
.tt-rdr-leg-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* ── Glossary text (shared) ── */
.tt-rdr-glossary {
  font-size: .75rem;
  text-align: center;
  color: var(--tt-text-dim, #b0a890);
  opacity: .5;
  margin: 6px 0 8px;
}

/* ── Detail panels (shared across all 6 charts) ── */
.tt-rdr-detail, .tt-bal-detail, .tt-wheel-detail,
.tt-inter-detail, .tt-kv-detail, .tt-wuxing-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, padding .3s ease, opacity .3s ease;
  opacity: 0;
  border: 1px solid transparent;
  border-radius: 4px;
}
.tt-rdr-detail--open, .tt-bal-detail--open, .tt-wheel-detail--open,
.tt-inter-detail--open, .tt-kv-detail--open, .tt-wuxing-detail--open {
  max-height: 600px;
  opacity: 1;
  padding: 14px 16px;
  margin-top: 10px;
  border-color: rgba(201,169,110,.15);
  background: rgba(201,169,110,.03);
}

/* ── Chart detail header (shared) ── */
.tt-chart-det-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(201,169,110,.1);
}
.tt-chart-det-han {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.3rem;
  color: var(--det-c, #c8a050);
  opacity: .7;
}
.tt-chart-det-name {
  font-size: .9rem;
  font-weight: 600;
  color: var(--det-c, #c8a050);
}
.tt-chart-det-cnt {
  font-size: .78rem;
  opacity: .6;
  margin-left: auto;
}
.tt-chart-det-miss {
  font-size: .75rem;
  font-weight: 600;
  color: #e06048;
  background: rgba(224,96,72,.08);
  padding: 2px 8px;
  border-radius: 3px;
}
.tt-chart-det-zone {
  font-size: .75rem;
  font-weight: 600;
}
.tt-chart-det-pillar {
  font-size: .75rem;
  background: rgba(201,169,110,.08);
  padding: 2px 8px;
  border-radius: 3px;
  color: var(--tt-text-dim, #b0a890);
}
.tt-chart-det-role {
  font-size: .75rem;
  font-weight: 700;
}

/* ── Balance ratio bar ── */
.tt-bal-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin: 8px 0 4px;
}
.tt-bal-bar-fill {
  height: 100%;
  opacity: .5;
  transition: width .8s ease;
}
.tt-bal-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  opacity: .6;
  margin-bottom: 6px;
}

/* ── Hit area transitions ── */
.tt-chart-hit { transition: fill .2s, opacity .2s; }

/* ── Hour Unknown Warning Banner ── */
.tt-hour-warn { margin: 0 0 20px; font-size: .88rem; }

/* ── Hình Xung Hợp Hại Remedy ── */
.tt-hxhh-remedy {
  margin-top: 8px; padding: 10px 14px;
  background: rgba(201,169,110,.06); border-left: 3px solid rgba(201,169,110,.3);
  font-size: .82rem; line-height: 1.6; color: var(--tt-text-muted, #b8b0a0);
}
.tt-hxhh-remedy-icon {
  display: inline-block; font-family: 'Noto Serif SC','KaiTi',serif;
  color: var(--tt-gold, #c9a96e); margin-right: 6px; font-size: 1rem;
}

/* ── Ngũ Hành Overview (hành vượng deep interp) ── */
.tt-nguhanhov {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(201,169,110,.1);
}
.tt-nguhanhov-title {
  font-family: 'Playfair Display', serif;
  font-size: 1rem; font-weight: 600; margin: 0 0 8px;
  color: var(--tt-text, #e8e0d0);
}
.tt-nguhanhov-desc {
  font-size: .85rem; line-height: 1.7;
  color: var(--tt-text-muted, #b8b0a0); margin: 0 0 14px;
}
.tt-nguhanhov-grid {
  display: grid; gap: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .tt-nguhanhov-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ── Ngũ Hành Phân Bổ → Dụng Thần link ── */
.tt-phanbo-link {
  margin-top: 12px; padding: 10px 14px;
  background: rgba(201,169,110,.06); border-left: 3px solid rgba(201,169,110,.3);
  font-size: .84rem; line-height: 1.6; color: var(--tt-text-muted, #b8b0a0);
}
.tt-link-gold {
  color: var(--tt-gold, #c9a96e); text-decoration: underline;
  text-underline-offset: 3px;
}
.tt-link-gold:hover { opacity: .8; }

/* ── Đại Vận per-phase advice ── */
.tt-daivan-advice {
  margin-top: 6px; padding: 6px 8px;
  font-size: .75rem; line-height: 1.5;
  color: var(--tt-text-muted, #b8b0a0);
  background: rgba(201,169,110,.04); border-radius: 3px;
}

/* ── Trường Sinh advice card ── */
.tt-ts-advice {
  margin-top: 8px; padding: 8px 10px;
  background: rgba(201,169,110,.05); border-left: 2px solid rgba(201,169,110,.25);
  font-size: .78rem; line-height: 1.55; color: var(--tt-text-muted, #b8b0a0);
}
.tt-ts-advice-icon {
  font-family: 'Noto Serif SC','KaiTi',serif;
  color: var(--tt-gold, #c9a96e); margin-right: 4px;
}

/* ── Tổng Quan han_tu accent ── */
.tt-tongquan-hantu {
  text-align: center; font-family: 'Noto Serif SC','KaiTi',serif;
  font-size: 1.6rem; opacity: .35; margin: -4px 0 8px; letter-spacing: 4px;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .tt-rdr-summary, .tt-bal-summary, .tt-wheel-summary,
  .tt-inter-summary, .tt-kv-summary, .tt-wuxing-summary {
    padding: 8px 10px;
  }
  .tt-rdr-sum-row { font-size: .75rem; gap: 6px; }
  .tt-rdr-legend { gap: 8px; font-size: .75rem; }
  .tt-rdr-detail--open, .tt-bal-detail--open, .tt-wheel-detail--open,
  .tt-inter-detail--open, .tt-kv-detail--open, .tt-wuxing-detail--open {
    padding: 10px 12px;
  }
  .tt-chart-det-head { gap: 6px; }
}

/* ═══ PERF: Disable decorative animations on mobile ═══ */
@media (max-width: 768px) {
  .tt-mandala-ring--outer,
  .tt-mandala-ring--mid,
  .tt-mandala-center,
  .tt-mandala-orbit--1,
  .tt-mandala-orbit--2,
  .tt-gc-ring-spin,
  .tt-cine-orbit--1,
  .tt-cine-orbit--2,
  .tt-cine-taiji,
  .tt-fate-spin-cw,
  .tt-fate-spin-ccw,
  .tt-bond-spin,
  .tt-cd-spin-cw,
  .tt-cd-spin-ccw,
  .tt-mau-ring-spin,
  .tt-pent-spin,
  .tt-pent-spin-rev,
  .tt-bagua-ring-outer,
  .tt-bagua-ring-mid,
  .tt-bagua-ring-inner,
  .tt-seal-svg,
  .tt-hero-ring-1,
  .tt-hero-ring-2,
  .tt-hero-ring-3,
  .tt-vb-icon,
  .tt-hado-ring,
  .tt-hado-ring-inner,
  .tt-portal-ring--outer,
  .tt-portal-ring--inner,
  .tt-fc-tri {
    animation: none !important;
    will-change: auto !important;
  }
}


/* ═══════════════════════════════════════════════
   D06 COMPOSITION CONTRACT — authoritative
   ═══════════════════════════════════════════════ */
.tt-toc {
  position: relative;
  top: auto;
  z-index: 2;
  display: block;
  padding: 0;
  margin: 0 0 28px;
  background: rgba(12,12,10,.58);
  border: 1px solid rgba(200,80,64,.16);
  border-radius: 8px;
  box-shadow: none;
  opacity: 1;
  transform: none;
  animation: none;
}
.tt-toc::before,.tt-toc::after { display: none; }
.tt-toc-toggle {
  width: 100%; min-height: 48px;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  color: var(--tt-jade-light);
  background: transparent;
  border: 0;
  cursor: pointer;
  font: 600 .78rem/1.3 'Be Vietnam Pro', sans-serif;
}
.tt-toc-toggle-count { margin-left: auto; color: var(--tt-text-dim); font-size: .75rem; font-weight: 500; }
.tt-toc-toggle-chevron { transition: transform .18s ease; }
.tt-toc--open .tt-toc-toggle-chevron { transform: rotate(180deg); }
.tt-toc-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1px;
  max-height: 0;
  overflow: hidden;
  border-top: 0 solid rgba(200,80,64,.12);
  transition: max-height .22s ease;
}
.tt-toc--open .tt-toc-links { max-height: 900px; border-top-width: 1px; }
.tt-toc-link {
  min-width: 0; min-height: 44px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  color: var(--tt-text-dim);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: 500 .75rem/1.3 'Be Vietnam Pro', sans-serif;
  text-decoration: none;
  transform: none;
}
.tt-toc-link:hover,.tt-toc-link:focus-visible,.tt-toc-link.is-active {
  color: var(--tt-jade-light);
  background: rgba(200,80,64,.075);
  box-shadow: inset 2px 0 0 var(--tt-jade);
  transform: none;
}
.tt-toc-link:focus-visible { outline: 2px solid var(--tt-jade); outline-offset: -2px; }
.tt-toc-link.is-active::after { display: none; }
.tt-toc-num { color: var(--tt-jade); opacity: .66; font: 600 .75rem/1 'Lexend Deca', sans-serif; }

#tt-results:not([hidden]) * {
  animation: none !important;
  will-change: auto !important;
}
/* A long report is a reading surface. Decorative hover/transition work across
   thousands of result nodes is imperceptible while scrolling but expensive on
   real pointer devices; controls still work, without animated card lifting. */
#tt-results:not([hidden]) * {
  transition: none !important;
}

/* The report has 22 independently readable chapters. Keep layout/style work
   inside each chapter while the reader scrolls, without content-visibility:
   no text is skipped or delayed when an off-screen section enters view. */
#tt-results > .tt-results-header,
#tt-results > .tt-summary-card,
#tt-results > .tt-toc,
#tt-results > .tt-part-header,
#tt-results > .tt-section,
#tt-results > .tt-results-actions,
#tt-results > .tt-results-footer {
  contain: layout style paint;
}

/* Reading chapters retain the element-coloured frame, but do not repaint a
   large soft glow for every scroll step. The former 20/40px shadows are
   decorative and compound across the 22-card report on lower-end devices. */
#tt-results > .tt-results-header,
#tt-results > .tt-summary-card,
#tt-results > .tt-toc,
#tt-results > .tt-section,
#tt-results > .tt-results-footer {
  box-shadow: inset 0 0 0 1px var(--tt-jade-subtle) !important;
}

/* Knowledge/FAQ is part of the user journey. The shared legacy script may add
   this marker after results render; on D06 it must never hide readable content. */
.tt-cosmos > #tc-section.tc-section--hidden {
  display: block !important;
}
/* Knowledge bodies share the summary's reading rail. The generic component
   intentionally starts at zero for other owners; this page must not leave
   prose against the accordion border after the result state is rendered. */
.tt-cosmos .tc-section details.tc-accordion > .tc-accordion-body {
  padding: 20px 20px 22px;
}
.tt-cosmos .tc-section details.tc-accordion > .tc-accordion-body > .tc-block {
  padding: 0 !important;
}
.tt-results-header,
.tt-results-footer,
.tt-summary-card,
.tt-section,
.tt-rh-stagger-1,
.tt-rh-stagger-2,
.tt-rh-stagger-3,
.tt-rh-stagger-4 {
  opacity: 1 !important;
  transform: none !important;
}
.tt-cinematic-active .tt-form-section * {
  animation: none !important;
  will-change: auto !important;
}
.tt-cinematic * { animation: none !important; will-change: auto !important; }
.tt-cinematic .tt-cine-orbit--1 { animation: ttCineOrbit 18s linear infinite !important; }
.tt-cinematic .tt-cine-taiji { animation: ttCineTaiji 10s linear infinite !important; }
.tt-cinematic .tt-cine-node:nth-of-type(2n) { animation: ttCineNodePulse 2.8s ease-in-out infinite !important; }

@media (max-width: 920px) {
  .tt-toc-links { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .tt-toc { margin: 0 0 20px; }
  .tt-toc-links { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tt-toc-link { min-height: 44px; padding: 7px 8px; font-size: .75rem; }
  .tt-cosmos .tc-section details.tc-accordion > .tc-accordion-body { padding: 16px 20px 18px; }
  .tt-interp-details,
  .tt-dungthan-deep-grid,
  .tt-napam-deep-grid,
  .tt-thansat-detail-grid,
  .tt-nhatchu-details,
  .tt-caivan-grid {
    grid-template-columns: 1fr !important;
  }
  .tt-truongsinh-grid {
    grid-template-columns: 1fr !important;
  }
  .tt-tangcan-grid {
    grid-template-columns: 1fr !important;
  }
  .tt-interp-block,
  .tt-luangiai-card,
  .tt-daivan-narrative,
  .tt-dungthan-deep {
    padding-left: 13px;
    padding-right: 13px;
  }
}
@media (max-width: 340px) {
  .tt-toc-links { grid-template-columns: 1fr; }
  .tt-cosmos .tc-section details.tc-accordion > .tc-accordion-body { padding: 14px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Result content remains fully visible, but decorative motion must stop,
     including pseudo-elements and inline SVG timelines. */
  #tt-results:not([hidden]) *,
  #tt-results:not([hidden]) *::before,
  #tt-results:not([hidden]) *::after {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  #tt-results:not([hidden]) svg animate,
  #tt-results:not([hidden]) svg animateTransform,
  #tt-results:not([hidden]) svg animateMotion { display: none !important; }
  .tt-toc-links { transition: none !important; }
  .tt-cinematic * { animation: none !important; transition: none !important; }
  .tt-cosmos .tc-accordion-body,
  .tt-cosmos .tc-cta-icon,
  .tt-cosmos .tc-block {
    animation: none !important;
    transition: none !important;
  }
  body:has(.tt-cosmos) .sm-logo strong { animation: none !important; }
}

/* The finished report is a reading surface. As its content passes beneath a
   stationary mouse during scrolling, card-lift and glow hover states create
   needless repaint work. Keep semantic controls and keyboard focus, but make
   these decorative result-card hovers visually stable on every device. */
#tt-results:not([hidden]) .tt-num-seal:hover .tt-seal-svg,
#tt-results:not([hidden]) .tt-num-seal--avoid:hover .tt-seal-svg {
  transform: none !important;
  filter: none !important;
}
#tt-results:not([hidden]) .tt-napam-section:hover,
#tt-results:not([hidden]) .tt-info-item:hover,
#tt-results:not([hidden]) .tt-luu-card[role="button"]:hover {
  transform: none !important;
  box-shadow: none !important;
}
#tt-results:not([hidden]) .tt-sect-icon:hover {
  background: var(--tt-jade-subtle) !important;
  box-shadow: inset 0 0 0 1px var(--tt-jade-subtle) !important;
}
#tt-results:not([hidden]) .tt-info-item:hover::after,
#tt-results:not([hidden]) .tt-info-item:hover .tt-info-icon {
  opacity: .2 !important;
}
#tt-results:not([hidden]) .tt-info-item:hover .tt-info-icon {
  opacity: .4 !important;
}