@import "tailwindcss";

/* Manuscript canvas — mực tàu, vàng đồng hun, triện son trầm */
:root {
  --ctkp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ctkp-ink-deep: #0b0a08;
  --ctkp-ink-mid: #12100d;
  --ctkp-ink-raised: #17130f;
  --ctkp-canvas: var(--ctkp-ink-mid);
  --ctkp-canvas-navy: #15120e;
  --ctkp-hero-deep: #0b0a08;
  --ctkp-gold-dark: #8f6a34;
  --ctkp-gold: #b08a4a;
  --ctkp-gold-bright: #c9a15d;
  --ctkp-gold-muted: rgba(201, 161, 93, 0.55);
  --ctkp-seal: #6e2f22;
  --ctkp-seal-deep: #7f3a2a;
  --ctkp-text-main: #f3eadb;
  --ctkp-text-secondary: #c8b79c;
  --ctkp-border-gold: rgba(201, 161, 93, 0.18);
  --ctkp-border-gold-strong: rgba(201, 161, 93, 0.28);
  --ctkp-glow-gold-soft: rgba(201, 161, 93, 0.12);
  --ctkp-vermilion: #9a4a3d;
  --ctkp-vermilion-muted: rgba(110, 47, 34, 0.45);
  --ctkp-gold-line: rgba(201, 161, 93, 0.35);

  /*
   * Canonical TuVi chart design tokens.
   * Future chart UI changes should go through these variables/classes first,
   * not one-off component colors, so the printed Nam Phái sheet stays cohesive.
   */
  --tuvi-chart-paper: #e9dfc7;
  --tuvi-chart-paper-raised: #f1e7cf;
  --tuvi-chart-paper-muted: #ddd0b5;
  --tuvi-chart-border: #3b2d1b;
  --tuvi-chart-border-soft: rgba(59, 45, 27, 0.34);
  --tuvi-chart-ink: #1f1a13;
  --tuvi-chart-ink-muted: #6f6657;
  --tuvi-chart-blue-ink: #18365d;
  --tuvi-chart-vermilion: #a61f1f;
  --tuvi-chart-good: #24683d;
  --tuvi-chart-orange: #b65b16;
  --tuvi-chart-weak: #777;
  --tuvi-chart-cell-pad: 0.45rem;
  --tuvi-chart-cell-gap: 0.35rem;
  --tuvi-chart-font-xs: 0.625rem;
  --tuvi-chart-font-sm: 0.72rem;
  --tuvi-chart-font-md: 0.875rem;
  --tuvi-chart-font-lg: 1.02rem;
  --tuvi-chart-leading-tight: 1.22;
  --tuvi-chart-leading-body: 1.42;
  --tuvi-palace-min-h: 220px;
}

@keyframes ctkp-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ctkp-fade-in-slow {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ctkp-shimmer {
  0%,
  100% {
    opacity: 0.03;
  }
  50% {
    opacity: 0.055;
  }
}

/* AI / async placeholders — soft opacity drift, no sweep or bounce */
@keyframes ctkp-skeleton-breathe {
  0%,
  100% {
    opacity: 0.38;
  }
  50% {
    opacity: 0.62;
  }
}

/* Tử Vi — Mệnh cung: soft pulsing gold aura (ket-qua grid) */
@keyframes ctkp-tuvi-menh-aura {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(201, 161, 93, 0.5),
      0 0 18px rgba(201, 161, 93, 0.14),
      0 0 40px rgba(201, 161, 93, 0.07);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(222, 188, 118, 0.72),
      0 0 26px rgba(201, 161, 93, 0.26),
      0 0 52px rgba(201, 161, 93, 0.12);
  }
}

/* Tử Vi khung lá — bụi vàng/tím rất nhẹ, chuyển chậm */
@keyframes ctkp-tuvi-mystic-dust-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.42;
  }
  35% {
    transform: translate3d(2.5%, -2%, 0) scale(1.015);
    opacity: 0.52;
  }
  70% {
    transform: translate3d(-1.8%, 2.2%, 0) scale(1.008);
    opacity: 0.46;
  }
}

@keyframes ctkp-tuvi-bagua-drift-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Quét sáng trên từng ô — một vòng ~10s, không gấp */
@keyframes ctkp-tuvi-palace-sweep {
  0% {
    transform: translateX(-140%) skewX(-8deg);
  }
  100% {
    transform: translateX(240%) skewX(-8deg);
  }
}

@theme inline {
  --ease-ctkp: cubic-bezier(0.22, 1, 0.36, 1);
}

@layer utilities {
  .ctkp-fade-in {
    animation: ctkp-fade-in 0.35s var(--ctkp-ease-out) both;
  }

  .ctkp-fade-in-slow {
    animation: ctkp-fade-in-slow 1.15s var(--ctkp-ease-out) both;
  }

  @media (prefers-reduced-motion: reduce) {
    .ctkp-fade-in {
      animation: none;
    }
    .ctkp-fade-in-slow {
      animation: none;
    }
  }

  .ctkp-skeleton-breathe {
    animation: ctkp-skeleton-breathe 2.4s ease-in-out infinite;
    background-color: rgb(28 25 23 / 0.55);
  }

  @media (prefers-reduced-motion: reduce) {
    .ctkp-skeleton-breathe {
      animation: none;
      opacity: 0.48;
    }
  }

  .ctkp-tuvi-menh-aura {
    animation: ctkp-tuvi-menh-aura 3.15s ease-in-out infinite;
    box-shadow:
      0 0 0 1px rgba(201, 161, 93, 0.5),
      0 0 20px rgba(201, 161, 93, 0.18);
  }

  @media (prefers-reduced-motion: reduce) {
    .ctkp-tuvi-menh-aura {
      animation: none;
    }
  }

  .ctkp-tuvi-mystic-particles {
    position: absolute;
    inset: -18%;
    opacity: 0.38;
    background-image:
      radial-gradient(ellipse 70% 55% at 48% 18%, rgba(124, 58, 237, 0.045), transparent 62%),
      radial-gradient(ellipse 50% 40% at 78% 88%, rgba(201, 161, 93, 0.035), transparent 58%),
      radial-gradient(circle 1.2px at 8% 12%, rgba(201, 161, 93, 0.34), transparent 100%),
      radial-gradient(circle 1px at 22% 76%, rgba(255, 250, 235, 0.12), transparent 100%),
      radial-gradient(circle 1.3px at 91% 22%, rgba(201, 161, 93, 0.22), transparent 100%),
      radial-gradient(circle 1px at 73% 48%, rgba(201, 161, 93, 0.16), transparent 100%),
      radial-gradient(circle 1.1px at 41% 91%, rgba(213, 195, 155, 0.14), transparent 100%),
      radial-gradient(circle 1.15px at 15% 44%, rgba(201, 161, 93, 0.12), transparent 100%),
      radial-gradient(circle 1px at 56% 31%, rgba(167, 139, 250, 0.12), transparent 100%),
      radial-gradient(circle 1.2px at 88% 71%, rgba(201, 161, 93, 0.1), transparent 100%),
      radial-gradient(circle 0.9px at 34% 63%, rgba(255, 252, 245, 0.09), transparent 100%),
      radial-gradient(circle 1px at 64% 8%, rgba(201, 161, 93, 0.11), transparent 100%);
    animation: ctkp-tuvi-mystic-dust-drift 108s ease-in-out infinite;
    pointer-events: none;
  }

  .ctkp-tuvi-mystic-bagua-wrap {
    position: absolute;
    left: 50%;
    top: clamp(11rem, 38%, 22rem);
    width: min(92vw, 500px);
    max-width: 100%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    opacity: 0.085;
    color: rgb(201 161 93);
    pointer-events: none;
  }

  @media (min-width: 640px) {
    .ctkp-tuvi-mystic-bagua-wrap {
      opacity: 0.072;
      width: min(78vw, 520px);
    }
  }

  .ctkp-tuvi-mystic-bagua {
    width: 100%;
    height: 100%;
    animation: ctkp-tuvi-bagua-drift-rotate 168s linear infinite;
  }

  .ctkp-tuvi-palace-shell {
    position: relative;
    transition:
      filter 1.25s ease-out,
      border-color 1.2s ease-out;
  }

  .ctkp-tuvi-palace-shell:hover {
    filter: brightness(1.045) drop-shadow(0 0 22px rgba(201, 161, 93, 0.11));
  }

  .ctkp-tuvi-palace-shell[data-tuvi-tier="than"]:hover {
    filter: brightness(1.04) drop-shadow(0 0 18px rgba(167, 139, 250, 0.13))
      drop-shadow(0 0 16px rgba(201, 161, 93, 0.08));
  }

  .ctkp-tuvi-palace-shell[data-tuvi-tier="menh"]:hover {
    filter: brightness(1.06) drop-shadow(0 0 26px rgba(201, 161, 93, 0.16))
      drop-shadow(0 0 44px rgba(201, 161, 93, 0.07));
  }

  .ctkp-tuvi-palace-sweep-track {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
  }

  .ctkp-tuvi-palace-sweep-beam {
    position: absolute;
    top: -15%;
    left: 0;
    width: 52%;
    height: 130%;
    background: linear-gradient(
      98deg,
      transparent 0%,
      rgba(255, 252, 245, 0.02) 38%,
      rgba(201, 161, 93, 0.06) 49.5%,
      rgba(255, 252, 245, 0.025) 60%,
      transparent 100%
    );
    filter: blur(5px);
    opacity: 0.72;
    animation: ctkp-tuvi-palace-sweep 10.5s linear infinite;
    animation-delay: var(--ctkp-palace-sweep-delay, 0s);
  }

  @media (prefers-reduced-motion: reduce) {
    .ctkp-tuvi-mystic-particles,
    .ctkp-tuvi-mystic-bagua {
      animation: none !important;
    }

    .ctkp-tuvi-mystic-particles {
      opacity: 0.32;
      transform: none;
    }

    .ctkp-tuvi-mystic-bagua {
      transform: rotate(18deg);
    }

    .ctkp-tuvi-palace-sweep-beam {
      animation: none !important;
      opacity: 0;
    }
  }
}

@layer components {
  /* Eyebrow — vàng đồng nhạt, tracking rộng */
  .ctkp-eyebrow {
    @apply text-[10px] font-semibold uppercase tracking-[0.42em] text-[color:var(--ctkp-gold-bright)]/72;
  }

  .ctkp-eyebrow--hero {
    letter-spacing: 0.38em;
    color: color-mix(in oklab, var(--ctkp-gold-bright) 58%, transparent);
  }

  /* Inline / footer text links on dark UI */
  .ctkp-text-link {
    @apply text-[color:var(--ctkp-gold-bright)]/55 underline-offset-[5px] transition-colors duration-300 ease-ctkp hover:text-[color:var(--ctkp-text-main)] hover:underline;
  }

  .ctkp-text-link-muted {
    @apply text-stone-500 underline-offset-4 transition-colors duration-200 ease-ctkp hover:text-stone-300 hover:underline;
  }

  /* Footer primary link row */
  .ctkp-footer-nav-link {
    @apply text-sm text-stone-500 underline-offset-4 transition-colors duration-200 ease-ctkp hover:text-stone-300 hover:underline;
  }

  /* Secondary ghost buttons */
  .ctkp-btn-ghost {
    @apply rounded-xl border border-amber-900/30 bg-black/20 px-5 py-2.5 text-sm font-medium text-amber-100/82 transition-colors duration-200 ease-ctkp hover:border-amber-800/40 hover:bg-black/30 hover:text-amber-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-700/30;
  }

  /* Header nav — vàng đồng khi hover, active tinh tế */
  .ctkp-nav-item {
    @apply rounded-md px-3 py-2 text-[13px] font-medium leading-none transition-[color,background-color,box-shadow] duration-300 ease-ctkp focus-visible:outline-none sm:text-[13px];
    color: var(--ctkp-text-secondary);
  }

  .ctkp-nav-item:hover {
    color: var(--ctkp-gold-bright);
    background-color: color-mix(in oklab, var(--ctkp-gold) 10%, transparent);
  }

  .ctkp-nav-item:focus-visible {
    box-shadow:
      0 0 0 2px var(--ctkp-ink-mid),
      0 0 0 4px color-mix(in oklab, var(--ctkp-gold-muted) 35%, transparent);
  }

  .ctkp-nav-item--active {
    color: var(--ctkp-gold-bright);
    background-color: color-mix(in oklab, var(--ctkp-gold) 12%, transparent);
    box-shadow: inset 0 0 0 1px var(--ctkp-border-gold);
  }

  /* Nghi lễ — nền đồng / viền son, không bóng SaaS */
  .ctkp-btn-primary {
    @apply inline-flex min-h-[2.85rem] items-center justify-center rounded-[10px] border px-8 py-2.5 text-sm font-semibold tracking-[0.06em] shadow-[inset_0_1px_0_rgba(255,245,220,0.22)] transition-[filter,box-shadow,border-color,background-color] duration-300 ease-ctkp focus-visible:outline-none;
    border-color: color-mix(in oklab, var(--ctkp-gold-dark) 55%, transparent);
    background: linear-gradient(
      to bottom,
      color-mix(in oklab, var(--ctkp-gold) 92%, black),
      color-mix(in oklab, var(--ctkp-gold-dark) 88%, black)
    );
    color: var(--ctkp-ink-deep);
  }

  .ctkp-btn-primary:hover {
    filter: brightness(1.1);
    border-color: color-mix(in oklab, var(--ctkp-gold-bright) 65%, transparent);
  }

  .ctkp-btn-primary:focus-visible {
    outline: 2px solid var(--ctkp-glow-gold-soft);
    outline-offset: 3px;
  }

  /* Tu vi — section trong thẻ */
  .ctkp-form-section-label {
    font-family: var(--font-ctkp-display), "Times New Roman", serif;
    @apply text-[0.8125rem] font-semibold tracking-[0.14em] text-[color:var(--ctkp-gold-bright)]/88;
  }

  .ctkp-form-section-rule {
    height: 1px;
    margin: 0.65rem 0 0;
    background: linear-gradient(
      90deg,
      var(--ctkp-border-gold),
      color-mix(in oklab, var(--ctkp-seal) 35%, transparent) 50%,
      var(--ctkp-border-gold)
    );
    opacity: 0.85;
  }

  /* Mystic card frame — góc ornament */
  .ctkp-mystic-card {
    position: relative;
    border-radius: 14px;
    background: linear-gradient(
      165deg,
      color-mix(in oklab, var(--ctkp-ink-raised) 94%, var(--ctkp-gold)) 0%,
      var(--ctkp-ink-deep) 48%,
      #0a0907 100%
    );
    border: 1px solid var(--ctkp-border-gold);
    box-shadow:
      inset 0 1px 0 rgba(255, 248, 235, 0.04),
      inset 0 -1px 0 rgba(0, 0, 0, 0.35),
      0 0 0 1px rgba(0, 0, 0, 0.25),
      0 24px 48px -28px rgba(0, 0, 0, 0.85),
      0 0 80px -40px var(--ctkp-glow-gold-soft);
  }

  .ctkp-mystic-card::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 10px;
    border: 1px solid var(--ctkp-border-gold);
    opacity: 0.22;
    pointer-events: none;
  }

  /* Secondary — vermillion seal tone */
  .ctkp-btn-secondary {
    @apply inline-flex min-h-[2.75rem] items-center justify-center rounded-lg border border-red-950/45 bg-red-950/12 px-7 py-2.5 text-sm font-medium text-stone-200/92 transition-colors duration-200 ease-ctkp hover:border-red-900/50 hover:bg-red-950/20 hover:text-stone-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-900/35 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0e0c0b];
  }

  /* Segmented — triện / thẻ gỗ */
  .ctkp-segmented {
    @apply inline-flex w-full gap-1 rounded-[11px] border border-[color:var(--ctkp-border-gold-strong)] bg-[color:var(--ctkp-ink-deep)]/90 p-1 shadow-[inset_0_2px_8px_rgba(0,0,0,0.45)] sm:w-auto;
  }

  .ctkp-segmented-btn {
    @apply flex-1 rounded-[9px] px-4 py-2.5 text-[13px] font-medium tracking-wide text-[color:var(--ctkp-text-secondary)] transition-[color,background-color,box-shadow,transform] duration-300 ease-ctkp focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ctkp-gold-muted)]/28 sm:flex-none;
  }

  .ctkp-segmented-btn--on {
    @apply bg-gradient-to-b from-[color:var(--ctkp-seal-deep)]/95 to-[color:var(--ctkp-seal)]/88 text-[color:var(--ctkp-text-main)] shadow-[inset_0_1px_0_rgba(255,220,200,0.12),0_1px_0_rgba(0,0,0,0.35)];
  }

  .ctkp-segmented-btn--off:hover {
    background-color: color-mix(in oklab, var(--ctkp-gold) 10%, transparent);
    color: var(--ctkp-gold-bright);
  }
}

/* Deep manuscript ground — chàm than, sương mực, không tím */
.bg-ctkp-night {
  background-color: var(--ctkp-ink-deep);
  background-image:
    radial-gradient(ellipse 130% 70% at 50% -15%, rgba(201, 161, 93, 0.04), transparent 55%),
    radial-gradient(ellipse 85% 55% at 100% 100%, rgba(23, 19, 15, 0.85), transparent 50%),
    radial-gradient(ellipse 70% 50% at 0% 80%, rgba(14, 12, 10, 0.9), transparent 48%),
    radial-gradient(circle at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.35) 100%),
    repeating-linear-gradient(
      -9deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.04) 2px,
      rgba(0, 0, 0, 0.04) 3px
    ),
    repeating-linear-gradient(
      88deg,
      transparent,
      transparent 1px,
      rgba(243, 234, 219, 0.018) 1px,
      rgba(243, 234, 219, 0.018) 2px
    ),
    linear-gradient(178deg, var(--ctkp-ink-mid) 0%, var(--ctkp-ink-deep) 45%, #070605 100%);
}

/* Hero — quyển mở, ánh vàng cổ */
.ctkp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--ctkp-hero-deep);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(201, 161, 93, 0.055), transparent 58%),
    linear-gradient(180deg, var(--ctkp-hero-deep) 0%, var(--ctkp-ink-mid) 52%, var(--ctkp-ink-raised) 100%);
}

.ctkp-hero-glow {
  position: absolute;
  inset: -22% -8% auto;
  height: 56%;
  left: 50%;
  width: 100%;
  max-width: 44rem;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse closest-side,
    rgba(201, 161, 93, 0.055) 0%,
    rgba(176, 138, 74, 0.02) 40%,
    transparent 70%
  );
  pointer-events: none;
}

/* Giấy / sương — rất nhẹ */
.ctkp-hero-dust {
  position: absolute;
  inset: 0;
  opacity: 0.045;
  background-image:
    radial-gradient(ellipse 80% 60% at 30% 40%, rgba(243, 234, 219, 0.14), transparent),
    radial-gradient(ellipse 50% 40% at 72% 58%, rgba(200, 183, 156, 0.06), transparent);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .ctkp-hero-shimmer {
    animation: ctkp-shimmer 14s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ctkp-hero-shimmer {
    animation: none;
    opacity: 0.035;
  }
}

/* Vòng thiên bàn / bát quái — chỉ 6–10% */
.ctkp-hero-orbit {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(92vw, 520px);
  height: min(92vw, 520px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0.085;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(201, 161, 93, 0.14) 0deg 22.5deg,
      transparent 22.5deg 45deg
    ),
    radial-gradient(circle, transparent 62%, rgba(201, 161, 93, 0.09) 62.5%, transparent 64%),
    radial-gradient(circle, rgba(201, 161, 93, 0.04) 0%, transparent 68%);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle, black 0%, black 52%, transparent 70%);
  mask-image: radial-gradient(circle, black 0%, black 52%, transparent 70%);
}

.ctkp-hero-orbit::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px solid rgba(201, 161, 93, 0.12);
  opacity: 0.6;
}

.font-ctkp-display {
  font-family: var(--font-ctkp-display), "Times New Roman", serif;
}

.font-ctkp-serif {
  font-family: var(--font-ctkp-serif), Georgia, serif;
}

/* Lá số — chữ Nôm/Hán nổi khỏi nền, như mực son trên giấy */
.ctkp-han-glyph {
  font-family: var(--font-ctkp-serif), "Songti SC", "STSong", "SimSun", "PMingLiU", "Microsoft YaHei", serif;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: color-mix(in oklab, var(--ctkp-gold-bright) 70%, var(--ctkp-text-main) 30%);
  text-shadow:
    0 0 14px rgba(201, 161, 93, 0.28),
    0 0 30px rgba(201, 161, 93, 0.11),
    0 1px 1px rgba(0, 0, 0, 0.48);
}

.ctkp-han-glyph--than {
  color: color-mix(in oklab, #e9d5ff 38%, var(--ctkp-gold-bright) 62%);
  text-shadow:
    0 0 12px rgba(167, 139, 250, 0.22),
    0 0 26px rgba(201, 161, 93, 0.1),
    0 1px 1px rgba(0, 0, 0, 0.48);
}

.ctkp-han-glyph--banner-menh {
  font-size: 1.34em;
  line-height: 1;
  vertical-align: -0.06em;
  margin-inline-end: 0.14em;
}

.ctkp-han-glyph--banner-than {
  font-size: 1.22em;
  line-height: 1;
  vertical-align: -0.05em;
  margin-inline-end: 0.12em;
}

.ctkp-han-glyph--cell {
  font-size: 1.38em;
  line-height: 1;
  vertical-align: -0.05em;
  margin-inline-end: 0.06em;
}

/* Chú thích sổ — nhỏ, nhạt, không như dashboard */
.ctkp-manuscript-note {
  font-size: 0.8125rem;
  line-height: 1.88;
  letter-spacing: 0.01em;
  color: rgba(115, 108, 100, 0.95);
}

@media (min-width: 640px) {
  .ctkp-manuscript-note {
    font-size: 0.84375rem;
  }
}

/* Parchment sheet for long-form reading */
.ctkp-article-sheet {
  background: linear-gradient(175deg, #faf7f0 0%, #ebe4d6 48%, #e4d9c8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 0 1px rgba(28, 25, 23, 0.05),
    0 20px 40px -14px rgba(0, 0, 0, 0.32);
}

/* Sanitized post body */
.ctkp-article-sheet .post-content {
  font-size: 1.0625rem;
  line-height: 1.82;
  color: #292524;
}

.ctkp-article-sheet .post-content > * + * {
  margin-top: 0.85rem;
}

.ctkp-article-sheet .post-content h1 {
  font-family: var(--font-ctkp-display), serif;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  color: #1c1917;
}

.ctkp-article-sheet .post-content h2 {
  font-family: var(--font-ctkp-display), serif;
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 2.25rem;
  margin-bottom: 0.5rem;
  color: #1c1917;
}

.ctkp-article-sheet .post-content h3 {
  font-family: var(--font-ctkp-display), serif;
  font-size: 1.28rem;
  font-weight: 600;
  margin-top: 1.75rem;
  margin-bottom: 0.45rem;
  color: #292524;
}

@media (max-width: 639px) {
  .ctkp-article-sheet .post-content {
    font-size: 1rem;
    line-height: 1.78;
  }

  .ctkp-article-sheet .post-content h1 {
    font-size: 1.45rem;
    margin-top: 1.5rem;
  }

  .ctkp-article-sheet .post-content h2 {
    font-size: 1.3rem;
    margin-top: 1.75rem;
  }

  .ctkp-article-sheet .post-content h3 {
    font-size: 1.15rem;
    margin-top: 1.35rem;
  }

  .ctkp-article-sheet .post-content ul,
  .ctkp-article-sheet .post-content ol {
    padding-left: 1.15rem;
  }
}

.ctkp-article-sheet .post-content ul,
.ctkp-article-sheet .post-content ol {
  padding-left: 1.35rem;
}

.ctkp-article-sheet .post-content li {
  margin-top: 0.35rem;
}

.ctkp-article-sheet .post-content a {
  color: #7c2d12;
  text-decoration: underline;
  text-decoration-color: rgba(124, 45, 18, 0.35);
  text-underline-offset: 3px;
}

.ctkp-article-sheet .post-content a:hover {
  text-decoration-color: rgba(124, 45, 18, 0.65);
}

.ctkp-article-sheet .post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.35rem;
  margin: 1.15rem 0;
  border: 1px solid rgba(41, 37, 36, 0.12);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.2);
}

.ctkp-article-sheet .post-content blockquote {
  border-left: 3px solid rgba(120, 53, 15, 0.35);
  padding-left: 1.1rem;
  font-style: italic;
  color: #57534e;
}

/* Decorative rule — aged gold, quiet */
.ctkp-rule {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--ctkp-gold-line) 22%,
    rgba(184, 151, 94, 0.45) 50%,
    var(--ctkp-gold-line) 78%,
    transparent
  );
}

/* Result pages only — deep ink ground, subtle seal circles & grain (no glow) */
.ctkp-result-canvas {
  background-color: #05060c;
  background-image:
    radial-gradient(ellipse 55% 42% at 50% 0%, rgba(45, 55, 75, 0.22), transparent 58%),
    radial-gradient(circle at 18% 72%, rgba(30, 38, 52, 0.14) 0%, transparent 38%),
    radial-gradient(circle at 88% 28%, rgba(25, 32, 48, 0.12) 0%, transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.2) 0%, transparent 65%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(255, 255, 255, 0.008) 3px,
      rgba(255, 255, 255, 0.008) 4px
    ),
    linear-gradient(178deg, #080a12 0%, #05060c 45%, #03040a 100%);
}

/* Tử Vi dashboard — lớp nền: navy/đen, quầng nhẹ quanh vùng thiên bàn, hoạ tiết cực nhạt */
.ctkp-tuvi-dashboard-canvas {
  --tuvi-gold: #d4af37;
  --tuvi-gold-bright: #f5d878;
  --tuvi-text-body: rgba(255, 255, 255, 0.92);
  --tuvi-text-muted: #94a3b8;
  position: relative;
  isolation: isolate;
  background-color: #02040a;
  /* Cơ sở: gradient sâu — không lưới carô */
  background-image: linear-gradient(185deg, #0c1226 0%, #070c18 32%, #050910 58%, #020308 82%, #010205 100%);
}

/* Quầng vùng bàn + vòng “thiềm” cực nhạt (chỉ gradient, một pseudo) */
.ctkp-tuvi-dashboard-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(
      circle at 50% 36%,
      transparent 44%,
      rgba(212, 175, 55, 0.02) 48.5%,
      rgba(212, 175, 55, 0.035) 50%,
      rgba(212, 175, 55, 0.018) 51.5%,
      transparent 56%
    ),
    radial-gradient(circle at 50% 36%, transparent 58%, rgba(255, 248, 235, 0.014) 62%, transparent 67%),
    radial-gradient(ellipse 88% 56% at 50% 38%, rgba(212, 175, 55, 0.065) 0%, transparent 52%),
    radial-gradient(ellipse 72% 48% at 50% 36%, rgba(48, 64, 100, 0.28) 0%, transparent 58%),
    radial-gradient(ellipse 110% 85% at 50% 112%, rgba(18, 26, 48, 0.42) 0%, transparent 48%),
    radial-gradient(ellipse 100% 70% at 50% -8%, rgba(32, 48, 82, 0.2) 0%, transparent 45%),
    radial-gradient(ellipse 130% 90% at 50% 50%, transparent 32%, rgba(0, 0, 0, 0.52) 100%);
}

/* TuViPageShell: hạt bay tắt để nền đỡ “nhiễu”; chỉ còn chấm rất nhạt */
.ctkp-tuvi-dashboard-canvas > .ctkp-tuvi-dash-particles {
  z-index: 0;
  opacity: 0.07;
  animation: none;
}

.ctkp-tuvi-dashboard-canvas > .ctkp-tuvi-dash-particles-fine {
  z-index: 0;
  opacity: 0.04;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .ctkp-tuvi-dashboard-canvas > .ctkp-tuvi-dash-particles,
  .ctkp-tuvi-dashboard-canvas > .ctkp-tuvi-dash-particles-fine {
    animation: none;
  }
}

/* Canonical chart UI — printed Nam Phái astrology sheet. */
.ctkp-tuvi-chart-arena {
  position: relative;
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border-radius: 0.35rem;
  border: 1px solid color-mix(in oklab, var(--tuvi-chart-border) 82%, transparent);
  background:
    radial-gradient(ellipse 92% 72% at 50% 42%, rgba(255, 255, 255, 0.16), transparent 64%),
    var(--tuvi-chart-paper);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 0 28px rgba(73, 48, 19, 0.05),
    0 16px 36px -28px rgba(0, 0, 0, 0.42);
  color: var(--tuvi-chart-ink);
}

/* Nền thiên bàn: một lớp sáng nhẹ, không carô / không pattern lặp */
.ctkp-tuvi-chart-arena::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.09;
  background: radial-gradient(ellipse 88% 64% at 50% 38%, rgba(255, 255, 255, 0.5), transparent 58%);
}

@media (min-width: 640px) {
  .ctkp-tuvi-chart-arena {
    border-radius: 0.45rem;
  }
}

@media (min-width: 1024px) {
  .ctkp-tuvi-chart-arena {
    overflow-x: visible;
  }
}

/* Lưới 4×4: desktop không scroll ngang; màn nhỏ vẫn có thể cuộn ngang nếu cần. */
.ctkp-tuvi-chart-board-scroll {
  overflow-x: auto;
  overflow-y: visible;
  max-height: none;
  max-width: 100%;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .ctkp-tuvi-chart-board-scroll {
    overflow-x: visible;
  }
}

.ctkp-tuvi-board-print-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  box-sizing: border-box;
}

/* Lưới 4×4 — ô vuông đều (1fr × 1fr); nội dung cung cuộn trong ô */
.ctkp-tuvi-board-4x4 {
  width: 100%;
  max-width: min(100%, min(92vw, 88vh));
  margin-inline: auto;
  aspect-ratio: 1;
  min-width: 0;
  box-sizing: border-box;
  gap: 0;
  align-items: stretch;
  align-content: stretch;
  background: transparent;
}

.ctkp-tuvi-board-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}

/* Trên thiên bàn in — không dùng min-height theo nội dung; ô co giãn theo lưới */
.ctkp-tuvi-board-cell .ctkp-tuvi-palace-surface {
  min-height: 0;
  height: 100%;
  flex: 1 1 auto;
}

@media (min-width: 1024px) {
  :root {
    --tuvi-palace-min-h: 232px;
  }
}

@media (min-width: 1440px) {
  :root {
    --tuvi-palace-min-h: 252px;
  }
}

/* L-shaped corners (chart instrument) */
.ctkp-tuvi-chart-corner {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-color: color-mix(in oklab, var(--tuvi-chart-border-soft) 42%, transparent);
  border-style: solid;
  pointer-events: none;
  z-index: 2;
  opacity: 0.55;
}

.ctkp-tuvi-chart-corner--tl {
  top: 0.65rem;
  left: 0.65rem;
  border-width: 1px 0 0 1px;
}

.ctkp-tuvi-chart-corner--tr {
  top: 0.65rem;
  right: 0.65rem;
  border-width: 1px 1px 0 0;
}

.ctkp-tuvi-chart-corner--bl {
  bottom: 0.65rem;
  left: 0.65rem;
  border-width: 0 0 1px 1px;
}

.ctkp-tuvi-chart-corner--br {
  bottom: 0.65rem;
  right: 0.65rem;
  border-width: 0 1px 1px 0;
}

.ctkp-tuvi-palace-surface {
  --tuvi-palace-grid-line: rgba(72, 50, 28, 0.52);
  border-radius: 0;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  min-height: var(--tuvi-palace-min-h, 220px);
  flex: 1 1 auto;
  height: 100%;
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    filter 0.3s ease;
}

.ctkp-tuvi-palace-surface[data-tuvi-palace-focus="quiet"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 38%),
    var(--tuvi-chart-paper);
  border: 1px solid var(--tuvi-palace-grid-line);
  box-shadow: none;
  filter: none;
}

.ctkp-tuvi-palace-surface[data-tuvi-palace-focus="selected"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 40%),
    var(--tuvi-chart-paper-raised);
  border: 1px solid rgba(72, 50, 28, 0.62);
  box-shadow: 0 4px 14px -12px rgba(0, 0, 0, 0.35);
  filter: none;
}

/* Lá in cổ điển — phẳng, không bóng/gradient “dashboard” */
.ctkp-tuvi-palace-surface.ctkp-tuvi-palace--print {
  --tuvi-palace-footer-h: 18px;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

/* Header cung: một dòng, không xuống dòng */
.ctkp-tuvi-palace-print-header {
  white-space: nowrap;
}

.ctkp-tuvi-palace-print-header > * {
  white-space: nowrap;
}

/* Chính tinh — xếp dọc, đủ mọi sao major từ API; không cắt / không clamp */
.ctkp-tuvi-palace-main-stars {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 34px;
  margin-top: 2px;
  margin-bottom: 4px;
  overflow: visible;
  flex-shrink: 0;
}

.ctkp-tuvi-palace-main-star-row {
  font-size: 14px;
  line-height: 1.15;
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
  overflow: visible;
  max-height: none;
}

.ctkp-tuvi-palace-surface.ctkp-tuvi-palace--print[data-tuvi-palace-focus="quiet"] {
  background: var(--tuvi-chart-paper);
  border: 1px solid var(--tuvi-palace-grid-line);
  box-shadow: none;
  filter: none;
}

.ctkp-tuvi-palace-surface.ctkp-tuvi-palace--print[data-tuvi-palace-focus="selected"] {
  background: color-mix(in oklab, var(--tuvi-chart-paper-raised) 88%, #b8893a 12%);
  border: 1px solid rgba(72, 50, 28, 0.68);
  box-shadow: inset 0 0 0 1px rgba(72, 50, 28, 0.18);
  filter: none;
}

/* Quiet palaces: Mệnh / Thân / “tứ hóa” cungs read slightly above generic idle cells */
.ctkp-tuvi-palace-surface[data-tuvi-palace-focus="quiet"][data-tuvi-tier="menh"],
.ctkp-tuvi-palace-surface[data-tuvi-palace-focus="quiet"][data-tuvi-tier="than"],
.ctkp-tuvi-palace-surface[data-tuvi-palace-focus="quiet"][data-tuvi-tier="focus"] {
  filter: none;
}

/* Ô trung cung 2×2: minmax(0,1fr) — không cuộn nội bộ (bố cục 2 cột gọn) */
.ctkp-tuvi-chart-center-cell {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  align-self: stretch;
  box-sizing: border-box;
  filter: none;
}

.ctkp-tuvi-chart-center-inner {
  min-height: min-content;
}

@media (prefers-reduced-motion: reduce) {
  .ctkp-tuvi-chart-center-cell {
    filter: none;
  }
}

.ctkp-tuvi-print-header {
  position: relative;
  z-index: 0;
}

/* Hàng Tuần (trên header) / Triệt (trước footer) — luồng bình thường, không absolute đè chính tinh */
.ctkp-tuvi-boundary-badge-row {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.ctkp-tuvi-boundary-badge-row--top {
  padding-bottom: 0.2rem;
}

.ctkp-tuvi-boundary-badge-row--pre-footer {
  padding-top: 0.35rem;
  padding-bottom: 0.25rem;
}

.ctkp-tuvi-tuan-triet-badge,
.ctkp-tuvi-overlay-badge {
  position: relative;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 16px;
  padding: 0 6px;
  border-radius: 3px;
  border: 1px solid color-mix(in oklab, var(--tuvi-chart-border) 58%, transparent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 45%),
    #f5ecd8;
  box-shadow: 0 0 0 1px var(--tuvi-chart-paper);
  font-family: var(--font-ctkp-serif), Georgia, serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.04em;
  color: var(--tuvi-chart-ink);
  white-space: nowrap;
}

.ctkp-tuvi-overlay-badge--bottom {
  box-shadow:
    0 0 0 1px var(--tuvi-chart-paper),
    0 -1px 2px rgba(59, 45, 27, 0.08);
}

/* Chính tinh (Nam Phái) — pill tách Tứ Hóa */
.ctkp-tuvi-main-pill {
  display: flex;
  width: 100%;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  border-radius: 0.3rem;
  border-width: 1px;
  border-style: solid;
  padding: 0.12rem 0.32rem 0.2rem;
  text-align: center;
}
.ctkp-tuvi-main-pill--favorable {
  border-color: rgba(122, 90, 42, 0.45);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 250, 230, 0.25)), #e8d3a4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.ctkp-tuvi-main-pill--adverse {
  border-color: rgba(160, 40, 32, 0.42);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 220, 210, 0.1)), #e4c4a8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.ctkp-tuvi-main-pill__label {
  color: #2a1f12;
  font-family: var(--font-ctkp-serif), Georgia, serif;
  font-size: var(--tuvi-chart-font-sm);
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.ctkp-tuvi-main-pill--adverse .ctkp-tuvi-main-pill__label {
  color: #6b1c18;
}
.ctkp-tuvi-main-pill__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
}
.ctkp-tuvi-hoa-badge {
  display: inline-block;
  border-radius: 0.2rem;
  border: 1px solid rgba(160, 95, 30, 0.45);
  background: rgba(255, 255, 255, 0.45);
  padding: 0.04rem 0.22rem 0.06rem;
  font-family: var(--font-ctkp-serif), Georgia, serif;
  font-size: 0.55rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: #6b3a0e;
  white-space: nowrap;
}
.ctkp-tuvi-tu-hoa-standalone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2rem 0.35rem;
  border-top: 1px dashed rgba(59, 45, 27, 0.2);
  padding-top: 0.2rem;
}
.ctkp-tuvi-luu-block {
  border-top: 1px solid rgba(59, 45, 27, 0.2);
  padding-top: 0.18rem;
}
.ctkp-tuvi-minor-line,
.ctkp-tuvi-luu-line {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  font-family: var(--font-ctkp-serif), Georgia, serif;
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
  .ctkp-tuvi-minor-line,
  .ctkp-tuvi-luu-line {
    font-size: 0.625rem;
  }
}
.ctkp-tuvi-palace-footer-trangsinh {
  color: #5c5347;
  font-family: var(--font-ctkp-serif), Georgia, serif;
  font-size: 0.58rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.ctkp-tuvi-palace-footer-stem {
  margin-top: 0.1rem;
  color: #777;
  font-family: var(--font-ctkp-serif), Georgia, serif;
  font-size: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.ctkp-tuvi-major-plaque {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  justify-content: center;
  border: 1px solid rgba(97, 71, 38, 0.42);
  border-radius: 0.28rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent), #ead9b5;
  padding: 0.08rem 0.48rem 0.12rem;
}

.ctkp-tuvi-major-text {
  max-width: 100%;
  color: var(--tuvi-chart-ink);
  font-family: var(--font-ctkp-serif), Georgia, serif;
  font-size: var(--tuvi-chart-font-lg);
  font-weight: 700;
  line-height: var(--tuvi-chart-leading-tight);
  overflow-wrap: anywhere;
  text-align: center;
}

/* Sao phụ: lưới 2 cột gọn — layout trực tiếp trong `TuViStarChips` (Tailwind). */

.ctkp-tuvi-minor-text {
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  font-family: var(--font-ctkp-serif), Georgia, serif;
  font-size: 0.595rem;
  font-weight: 600;
  line-height: 1.22;
}

.ctkp-tuvi-stage-label {
  color: var(--tuvi-chart-weak);
  font-family: var(--font-ctkp-serif), Georgia, serif;
  font-size: var(--tuvi-chart-font-xs);
  font-weight: 500;
  line-height: var(--tuvi-chart-leading-body);
  text-align: center;
}

.ctkp-tuvi-center-block {
  border: 1px solid rgba(72, 50, 28, 0.55);
  background: var(--tuvi-chart-paper-raised);
  color: var(--tuvi-chart-ink);
}

/* Trung cung: nền âm/dương nhẹ — không chiếm chỗ trong flow chiều cao */
.ctkp-tuvi-center-block--classic {
  position: relative;
  isolation: isolate;
}

.ctkp-tuvi-center-block--classic::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 72% 52% at 50% 42%,
    rgba(255, 255, 255, 0.16),
    transparent 68%
  );
}

.ctkp-tuvi-center-divider {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  margin: 8px 0;
}

.ctkp-tuvi-center-divider--compact {
  margin: 6px 0;
}

/* Hai cột: Thông tin sinh (rộng hơn) | Luận mệnh — không vạch dọc */
.center-info-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 6px 12px;
  align-items: start;
}

.center-section {
  min-width: 0;
}

.center-row,
.ctkp-tuvi-center-field {
  display: grid;
  grid-template-columns: 72px 1fr;
  column-gap: 6px;
  line-height: 1.35;
  align-items: baseline;
  margin-bottom: 2px;
}

.ctkp-tuvi-center-field:last-child {
  margin-bottom: 0;
}

.ctkp-tuvi-center-section .ctkp-tuvi-center-section__title {
  margin-bottom: 4px;
}

.ctkp-tuvi-center-field__label {
  font-family: var(--font-ctkp-serif), Georgia, serif;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.35;
  color: #4a3828;
}

.ctkp-tuvi-center-field__value {
  min-width: 0;
  text-align: left;
  font-family: var(--font-ctkp-serif), Georgia, serif;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 1023px) {
  .ctkp-tuvi-center-oracle-vert {
    font-size: 0.92rem;
    letter-spacing: 0.14em;
  }

  .ctkp-tuvi-center-seal {
    width: 42px;
    height: 42px;
    font-size: 13px;
  }
}

/* Radial depth behind hero chart: gold → deep blue → black */
.ctkp-tuvi-hero-depth {
  position: absolute;
  inset: -42% -35% -38% -35%;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 48%,
    rgba(212, 175, 55, 0.28) 0%,
    rgba(212, 175, 55, 0.08) 18%,
    rgba(35, 55, 90, 0.55) 42%,
    rgba(12, 18, 32, 0.92) 68%,
    rgba(0, 0, 0, 0.98) 88%,
    #000000 100%
  );
  z-index: 0;
}

/* Slow rotating outer ring (Bagua-adjacent décor) */
@keyframes ctkp-tuvi-hero-bg-ring-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.ctkp-tuvi-hero-bg-ring {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 128%;
  height: 128%;
  max-width: 26rem;
  max-height: 26rem;
  translate: -50% -50%;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.14);
  box-shadow:
    0 0 72px rgba(212, 175, 55, 0.07),
    inset 0 0 48px rgba(30, 64, 110, 0.12);
  animation: ctkp-tuvi-hero-bg-ring-spin 140s linear infinite;
}

.ctkp-tuvi-hero-bg-ring--ccw {
  width: 112%;
  height: 112%;
  max-width: 22rem;
  max-height: 22rem;
  border-style: dashed;
  border-color: rgba(212, 175, 55, 0.1);
  box-shadow: inset 0 0 36px rgba(15, 30, 55, 0.2);
  animation-direction: reverse;
  animation-duration: 200s;
}

@media (prefers-reduced-motion: reduce) {
  .ctkp-tuvi-hero-bg-ring,
  .ctkp-tuvi-hero-bg-ring--ccw {
    animation: none;
  }
}

@keyframes ctkp-tuvi-dash-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.5;
  }
  50% {
    transform: translate3d(-1.5%, 1.2%, 0);
    opacity: 0.62;
  }
}

@keyframes ctkp-tuvi-hero-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(212, 175, 55, 0.45),
      0 0 32px rgba(212, 175, 55, 0.18),
      0 0 64px rgba(212, 175, 55, 0.08),
      inset 0 0 48px rgba(212, 175, 55, 0.04);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(212, 175, 55, 0.62),
      0 0 42px rgba(212, 175, 55, 0.26),
      0 0 88px rgba(212, 175, 55, 0.11),
      inset 0 0 56px rgba(212, 175, 55, 0.055);
  }
}

.ctkp-tuvi-dash-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.24;
  background-image:
    radial-gradient(circle 0.85px at 12% 18%, rgba(212, 175, 55, 0.22), transparent 100%),
    radial-gradient(circle 0.8px at 88% 22%, rgba(212, 175, 55, 0.14), transparent 100%),
    radial-gradient(circle 0.9px at 44% 91%, rgba(255, 252, 245, 0.06), transparent 100%),
    radial-gradient(circle 0.7px at 71% 54%, rgba(148, 163, 184, 0.12), transparent 100%),
    radial-gradient(circle 0.75px at 28% 67%, rgba(212, 175, 55, 0.1), transparent 100%);
  animation: ctkp-tuvi-dash-drift 72s ease-in-out infinite;
}

/* Second, subtler floating speck layer */
@keyframes ctkp-tuvi-particles-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -6px, 0);
  }
}

.ctkp-tuvi-dash-particles-fine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.14;
  background-image:
    radial-gradient(circle 0.55px at 22% 44%, rgba(212, 175, 55, 0.18), transparent 100%),
    radial-gradient(circle 0.5px at 76% 63%, rgba(212, 175, 55, 0.1), transparent 100%),
    radial-gradient(circle 0.5px at 51% 12%, rgba(255, 255, 255, 0.05), transparent 100%),
    radial-gradient(circle 0.45px at 38% 81%, rgba(100, 130, 180, 0.1), transparent 100%);
  animation:
    ctkp-tuvi-dash-drift 96s ease-in-out infinite reverse,
    ctkp-tuvi-particles-float 22s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ctkp-tuvi-dash-particles {
    animation: none;
    opacity: 0.18;
  }

  .ctkp-tuvi-dash-particles-fine {
    animation: none;
    opacity: 0.1;
  }
}

/* Glass cards — specified frost + gold rim */
.ctkp-tuvi-glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 4px 24px rgba(0, 0, 0, 0.25);
}

/* Hover glow for tabs, cards, buttons */
.ctkp-tuvi-interactive {
  transition:
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ctkp-tuvi-interactive:hover {
  box-shadow:
    0 0 32px rgba(212, 175, 55, 0.14),
    0 12px 40px -12px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border-color: rgba(212, 175, 55, 0.38);
}

.ctkp-tuvi-interactive:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(12, 14, 22, 0.9),
    0 0 0 4px rgba(212, 175, 55, 0.28);
}

/* Typography tiers — Tu Vi dashboard */
.ctkp-tuvi-text-title {
  color: var(--tuvi-gold-bright);
}

.ctkp-tuvi-text-title-soft {
  color: rgba(245, 216, 120, 0.88);
}

.ctkp-tuvi-text-body {
  color: var(--tuvi-text-body);
}

.ctkp-tuvi-text-muted {
  color: var(--tuvi-text-muted);
}

.ctkp-tuvi-hero-orbit {
  position: relative;
  border-radius: 9999px;
  animation: ctkp-tuvi-hero-glow 4.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ctkp-tuvi-hero-orbit {
    animation: none;
    box-shadow:
      0 0 0 1px rgba(212, 175, 55, 0.5),
      0 0 28px rgba(212, 175, 55, 0.16),
      inset 0 0 40px rgba(212, 175, 55, 0.04);
  }
}

.ctkp-tuvi-hero-bagua-rotate {
  animation: ctkp-tuvi-bagua-drift-rotate 180s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ctkp-tuvi-hero-bagua-rotate {
    animation: none;
    transform: rotate(22deg);
  }
}

/* Thin section rule — book gutter, low contrast */
.ctkp-result-section-divider {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(120, 113, 108, 0.2) 12%,
    rgba(120, 113, 108, 0.14) 50%,
    rgba(120, 113, 108, 0.2) 88%,
    transparent
  );
}

/* Tử vi kết quả — phân phần sách, không khung app */
.ctkp-manuscript-part-trail {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(154, 123, 74, 0.1);
}

@media (min-width: 640px) {
  .ctkp-manuscript-part-trail {
    margin-top: 3.5rem;
    padding-top: 3rem;
  }
}

.ctkp-manuscript-part-label {
  margin-bottom: 0.75rem;
  font-family: var(--font-ctkp-serif), Georgia, serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(154, 123, 74, 0.4);
}

/* Ẩn gạch ngang thừa sau mục luận cuối trong khối chữ */
.ctkp-manuscript-reading-body > section:last-of-type > hr.ctkp-result-section-divider {
  display: none;
}

/* Tử Vi — trục định mệnh: một dải ngang Mệnh | Thân */
.ctkp-tuvi-destiny-banner {
  position: relative;
  overflow: hidden;
  border-radius: 0.875rem;
  border: 1px solid rgba(201, 161, 93, 0.2);
  background:
    radial-gradient(ellipse 90% 140% at 12% 42%, rgba(201, 161, 93, 0.11), transparent 58%),
    radial-gradient(ellipse 75% 100% at 96% 58%, rgba(124, 58, 237, 0.075), transparent 55%),
    radial-gradient(ellipse 60% 55% at 52% -8%, rgba(45, 55, 85, 0.22), transparent 48%),
    linear-gradient(168deg, rgba(9, 11, 20, 0.96) 0%, rgba(5, 6, 14, 0.98) 42%, rgba(6, 8, 18, 0.97) 100%);
  box-shadow:
    inset 0 1px 0 rgba(201, 161, 93, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(0, 0, 0, 0.25);
}

.ctkp-tuvi-destiny-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.28;
  pointer-events: none;
  background-image:
    radial-gradient(circle 1px at 8% 18%, rgba(201, 161, 93, 0.5), transparent),
    radial-gradient(circle 1.1px at 24% 72%, rgba(255, 250, 240, 0.14), transparent),
    radial-gradient(circle 1px at 78% 28%, rgba(167, 139, 250, 0.28), transparent),
    radial-gradient(circle 0.9px at 91% 84%, rgba(201, 161, 93, 0.35), transparent),
    radial-gradient(circle 1.2px at 44% 11%, rgba(201, 161, 93, 0.22), transparent),
    radial-gradient(circle 1px at 62% 88%, rgba(201, 161, 93, 0.16), transparent),
    radial-gradient(circle 1px at 15% 48%, rgba(124, 58, 237, 0.2), transparent),
    radial-gradient(circle 1.1px at 53% 52%, rgba(255, 252, 245, 0.08), transparent),
    radial-gradient(circle 0.95px at 36% 38%, rgba(201, 161, 93, 0.14), transparent),
    radial-gradient(circle 1px at 88% 44%, rgba(201, 161, 93, 0.12), transparent);
}

.ctkp-tuvi-destiny-banner-sep-v {
  width: 1px;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 8rem;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(201, 161, 93, 0.08) 12%,
    rgba(201, 161, 93, 0.42) 48%,
    rgba(167, 139, 250, 0.25) 52%,
    rgba(201, 161, 93, 0.1) 88%,
    transparent 100%
  );
  box-shadow:
    0 0 10px rgba(201, 161, 93, 0.22),
    0 0 22px rgba(124, 58, 237, 0.07),
    0 0 28px rgba(201, 161, 93, 0.06);
}

.ctkp-tuvi-destiny-banner-sep-h {
  height: 1px;
  width: 100%;
  flex-shrink: 0;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(201, 161, 93, 0.12) 15%,
    rgba(201, 161, 93, 0.38) 50%,
    rgba(167, 139, 250, 0.2) 55%,
    rgba(201, 161, 93, 0.12) 85%,
    transparent 100%
  );
  box-shadow: 0 0 14px rgba(201, 161, 93, 0.15), 0 0 22px rgba(124, 58, 237, 0.05);
}

/* —— Luận giải khái quát: cổ thư Nam Phái (số hóa), ưu tiên đọc —— */
:root {
  --ctkp-narrative-paper: #efe6d3;
  --ctkp-narrative-paper-warm: #e8dcc6;
  --ctkp-narrative-ink: #2d2418;
  --ctkp-narrative-ink-soft: #3a2f22;
  --ctkp-narrative-ink-strong: #221c15;
  --ctkp-narrative-caption: #6b5d4a;
  --ctkp-narrative-accent: #7a5c32;
  --ctkp-narrative-border: rgba(74, 58, 40, 0.2);
  --ctkp-narrative-divider: rgba(90, 72, 52, 0.36);
  --ctkp-narrative-entity-bg: rgba(92, 67, 40, 0.09);
  --ctkp-narrative-seal: rgba(142, 42, 38, 0.38);
}

.ctkp-narrative-root {
  position: relative;
  border: 1px solid var(--ctkp-narrative-border);
  border-radius: 2px;
  background-color: var(--ctkp-narrative-paper);
  background-image:
    linear-gradient(180deg, rgba(255, 252, 245, 0.28) 0%, transparent 38%),
    linear-gradient(165deg, transparent 40%, var(--ctkp-narrative-paper-warm) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 250, 240, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.ctkp-narrative-root::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.038;
  background-image: repeating-conic-gradient(
    from 2deg at 50% 50%,
    rgba(74, 56, 36, 0.55) 0deg 3.5deg,
    transparent 3.5deg 11deg
  );
  mask-image: radial-gradient(ellipse 92% 78% at 50% 45%, #000 0%, transparent 72%);
}

.ctkp-narrative-root::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.055;
  background-image:
    radial-gradient(ellipse 120% 90% at 8% 12%, rgba(45, 36, 24, 0.12), transparent 55%),
    radial-gradient(ellipse 100% 80% at 96% 88%, rgba(45, 36, 24, 0.1), transparent 52%);
}

.ctkp-narrative-enso {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(120vw, 52rem);
  height: min(120vw, 52rem);
  translate: -50% -50%;
  border-radius: 9999px;
  border: 1px solid rgba(90, 72, 52, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 250, 240, 0.06);
  opacity: 0.55;
}

.ctkp-narrative-ink-bleed {
  position: absolute;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  filter: blur(38px);
  opacity: 0.11;
  background: radial-gradient(circle, rgba(45, 36, 24, 0.45) 0%, transparent 68%);
}

.ctkp-narrative-ink-bleed--tl {
  left: -4rem;
  top: -3.5rem;
}

.ctkp-narrative-ink-bleed--br {
  right: -3.5rem;
  bottom: -3rem;
}

.ctkp-narrative-seal {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 1.5px solid var(--ctkp-narrative-seal);
  border-radius: 2px;
  rotate: -8deg;
  opacity: 0.42;
  box-shadow: inset 0 0 0 1px rgba(255, 250, 245, 0.12);
}

.ctkp-narrative-seal::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(142, 42, 38, 0.22);
  border-radius: 1px;
  opacity: 0.65;
}

.ctkp-narrative-masthead-rule {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ctkp-narrative-divider) 22%,
    var(--ctkp-narrative-divider) 78%,
    transparent 100%
  );
}

.ctkp-narrative-section-inkline {
  height: 1px;
  background: linear-gradient(90deg, var(--ctkp-narrative-divider) 0%, transparent 100%);
  min-height: 1px;
}

.ctkp-narrative-body {
  text-indent: 0;
}

.ctkp-narrative-body:first-line {
  text-indent: 1.05em;
}

.ctkp-narrative-entity {
  font-weight: 600;
  color: var(--ctkp-narrative-ink-strong);
  text-decoration: none;
  background: linear-gradient(180deg, transparent 62%, var(--ctkp-narrative-entity-bg) 62%);
}

.ctkp-narrative-aside-panel {
  border-radius: 4px;
  border: 1px solid rgba(148, 128, 98, 0.38);
  background: linear-gradient(165deg, rgba(255, 252, 245, 0.55) 0%, rgba(232, 220, 198, 0.35) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.ctkp-tuvi-visual-panel {
  max-width: 100%;
}

@media print {
  .ctkp-tuvi-visual-panel {
    break-inside: avoid;
    page-break-inside: avoid;
    max-width: 100% !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  [data-tuvi-visual] {
    transform: none !important;
    animation: none !important;
  }

  .ctkp-tuvi-signal-bar-fill {
    background: #666666 !important;
    background-image: none !important;
  }
}

.ctkp-narrative-phase-card {
  border-radius: 4px;
  border: 1px solid rgba(120, 52, 48, 0.28);
  background: linear-gradient(165deg, rgba(255, 250, 242, 0.75) 0%, rgba(232, 220, 198, 0.55) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}