/* ==========================================================================
   DỊCH QUẺ — KINH DỊCH · CHU DỊCH
   Phong cách: Cổ phong tối giản, thanh lịch, huyền bí
   Bảng màu:
     - Nền đen ấm: #100e0b
     - Bề mặt: #1a1713
     - Vàng hổ phách: #c98f2e (phẳng, ấm, không vàng chói, không gradient kim loại)
     - Đỏ son: #b91c1c (chỉ dùng cho hào động)
     - Chữ chính: #e8e2d4 · Chữ phụ: #9a9284 · Chữ mờ: #6e675b
   ========================================================================== */

:root {
  --card-max: 640px;
  --gutter: clamp(16px, 4vw, 48px);
  --bg: #100e0b;
  --surface: #1a1713;
  --surface-hover: #221e18;

  --gold: #c98f2e;
  --gold-border: rgba(201, 143, 46, 0.22);
  --gold-border-hover: rgba(201, 143, 46, 0.48);
  --gold-soft: rgba(201, 143, 46, 0.10);
  --gold-glow: rgba(201, 143, 46, 0.18);

  --crimson: #b91c1c;
  --crimson-glow: rgba(185, 28, 28, 0.45);
  --crimson-soft: rgba(185, 28, 28, 0.12);

  --text-1: #e8e2d4;
  --text-2: #9a9284;
  --text-3: #6e675b;

  --divider: rgba(201, 143, 46, 0.12);

  --font-display: "Playfair Display", "Noto Serif", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Noto Serif", "Noto Serif SC", Georgia, serif;
  --font-han: "Noto Serif SC", "Noto Serif", serif;

  --radius-card: 16px;
  --radius-sm: 10px;
  --shadow-soft: 0 20px 50px rgba(0, 0, 0, 0.55);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
  background-color: var(--bg);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--text-1);
  overflow-x: clip;
  position: relative;
}

/* Không khí huyền bí: Hạt sáng li ti + Vầng sáng mờ + Vignette viền */
.ambient-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.particle-dot {
  position: absolute;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.35;
}

.ambient-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 68% 55% at 50% 32%, rgba(201, 143, 46, 0.08) 0%, rgba(201, 143, 46, 0.025) 50%, transparent 82%),
    radial-gradient(ellipse 92% 88% at 50% 50%, transparent 55%, rgba(7, 6, 4, 0.85) 100%);
}

header, main, footer {
  position: relative;
  z-index: 1;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: rgba(201, 143, 46, 0.25);
  border-radius: 3px;
}

/* Containers: max 640px for focused reading & hero */
.container-reading {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
}

.container-wide {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--gold);
  color: var(--bg);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  z-index: 999;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  top: 1rem;
}

/* Surface Card (chỉ dùng cho thẻ con hoặc hộp thoại, bỏ khung lớn bao toàn khối) */
.surface-card {
  background-color: var(--surface);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-card);
  padding: 28px 32px;
}

/* Section spacing: 80px - 110px (64-120px) */
.section-block {
  padding: 88px 0;
}

/* Typography Hierarchy */
.eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
}

.text-amber {
  color: var(--gold);
  font-weight: 600;
}

.section-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.22;
  color: var(--text-1);
}

.section-title-sm {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text-1);
}

.section-desc {
  margin: 0 auto;
  max-width: 560px;
  font-family: var(--font-sans);
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--text-2);
}

/* ================= 1. HEADER (Mỏng, trong suốt) ================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(16, 14, 11, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201, 143, 46, 0.1);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  gap: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-1);
  white-space: nowrap;
  flex-shrink: 0;
}

.brand-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--gold-border-hover);
  background: var(--gold-soft);
  color: var(--gold);
  font-family: var(--font-han);
  font-size: 1.02rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brand-title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-1);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-link {
  font-family: var(--font-sans);
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--gold);
  background-color: var(--gold-soft);
}

.header-actions {
  flex-shrink: 0;
}

.btn-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--gold-border);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.btn-icon:hover {
  border-color: var(--gold-border-hover);
  background-color: var(--gold-soft);
}

.btn-icon[aria-pressed="false"] {
  color: var(--text-2);
}

/* ================= 2. KHU GIEO QUẺ (HERO 100VH, MỘT ĐIỂM NHẤN DUY NHẤT) ================= */
.hero-section {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0 56px;
}

.hero-section.is-finished {
  min-height: auto;
  padding-bottom: 32px;
}

.hero-section .hero-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.hero-intro {
  width: 100%;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Khi đã bấm Gieo Quẻ: thu gọn/ẩn phần giới thiệu để sân khấu gieo quẻ chiếm màn hình */
.hero-intro.is-dimmed {
  display: none;
}

.hero-head {
  text-align: center;
  margin-bottom: 26px;
  position: relative;
  z-index: 1;
}

.hero-head::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: min(720px, 90vw);
  height: 280px;
  background: radial-gradient(ellipse at center, rgba(201, 143, 46, 0.16) 0%, rgba(201, 143, 46, 0.045) 52%, transparent 78%);
  filter: blur(18px);
  pointer-events: none;
  z-index: -1;
}


.hero-title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  line-height: 1.12;
}

.hero-title-line {
  font-size: clamp(2.35rem, 5vw, 3.6rem);
  letter-spacing: -0.01em;
}

.hero-title-ivory {
  color: var(--text-1);
}

.hero-title-amber {
  color: var(--gold);
}

.hero-clock-large {
  font-family: var(--font-display);
  font-size: clamp(2.65rem, 5.8vw, 4.1rem);
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.08;
}

.hero-subtitle {
  margin: 0 auto;
  max-width: 720px;
  font-family: var(--font-serif);
  font-size: clamp(1.06rem, 2.2vw, 1.32rem);
  line-height: 1.52;
  color: var(--text-2);
}

/* Châm ngôn tự viết & 3 chỉ số điểm tựa dưới nút hành động */
.hero-maxim {
  margin: 8px auto 2px;
  max-width: 520px;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-2);
}

.hero-stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(201, 143, 46, 0.16);
}

.hero-stat-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.hero-stat-num {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--gold);
}

.hero-stat-label {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--text-2);
}

.hero-stat-sep {
  color: var(--gold);
  opacity: 0.55;
}

.hero-bottom-cue {
  margin-top: 22px;
  text-align: center;
}

.hero-scroll-cue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(201, 143, 46, 0.07);
  border: 1px solid rgba(201, 143, 46, 0.24);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gold);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.hero-scroll-cue:hover {
  background: rgba(201, 143, 46, 0.14);
  border-color: var(--gold);
  transform: translateY(2px);
}

.hero-scroll-arrow {
  display: inline-block;
  font-size: 0.9rem;
}

/* ================= 4 PHẦN CUỘN CÓ CHIỀU SÂU TRÊN TRANG CHỦ (#/) ================= */
.home-depth-wrapper {
  width: 100%;
  max-width: 640px;
  margin: 104px auto 24px;
  display: flex;
  flex-direction: column;
  gap: 112px;
}

.home-depth-block {
  width: 100%;
}

.home-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-reveal.is-revealed,
.home-reveal.is-visible,
.reduce-motion .home-reveal {
  opacity: 1;
  transform: translateY(0);
}

.home-block-head {
  text-align: center;
  margin-bottom: 28px;
}

.home-block-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 1.88rem);
  font-weight: 700;
  color: var(--text-1);
}

.home-block-sub {
  margin: 0 auto;
  max-width: 520px;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-2);
}

/* Phần 1: 3 bước gieo quẻ nối bằng đường chỉ mảnh */
.home-steps-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.home-steps-timeline::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(201, 143, 46, 0.55) 0%,
    rgba(201, 143, 46, 0.28) 50%,
    rgba(201, 143, 46, 0.08) 100%
  );
}

.home-step-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
  position: relative;
}

.home-step-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #171410;
  border: 1px solid rgba(201, 143, 46, 0.48);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(201, 143, 46, 0.14);
  z-index: 1;
}

.home-step-body {
  background: var(--surface);
  border: 1px solid var(--gold-border);
  border-radius: 14px;
  padding: 16px 20px;
}

.home-step-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--gold);
}

.home-step-desc {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.62;
  color: var(--text-2);
}

/* Phần 2: Vòng Vũ Trụ 64 Quẻ thu nhỏ */
.home-wheel-preview-card {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 26px;
  padding: 26px 28px;
}

.home-wheel-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-mini-wheel-svg {
  width: 168px;
  height: 168px;
  display: block;
}

.home-cta-inline {
  min-height: 42px;
  text-decoration: none;
}

/* Phần 3: Quẻ Hôm Nay */
.home-daily-card {
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.home-daily-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--divider);
}

.home-daily-identity {
  display: flex;
  align-items: center;
  gap: 16px;
}

.home-daily-han {
  font-family: "Noto Serif SC", var(--font-serif);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
}

.home-daily-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-1);
}

.home-daily-meaning {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  color: var(--gold);
}

.home-daily-quote {
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--gold);
  font-family: var(--font-serif);
  font-size: 0.96rem;
  line-height: 1.68;
  color: var(--text-1);
}

.home-daily-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.home-daily-tri {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--text-2);
}


/* ==========================================================================
   Phần 4: Lịch Sử Gần Đây & Card Lịch Sử Chuẩn Hóa
   ========================================================================== */
.home-recent-list {
  max-width: var(--card-max);
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-recent-actions {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

/* Thẻ lịch sử gieo quẻ 3 cột */
.recent-card {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: var(--card-max);
  margin: 0 auto;
  padding: 16px 20px;
  background: rgba(26, 23, 19, 0.5);
  border: 1px solid rgba(201, 143, 46, 0.28);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  position: relative;
  opacity: 0;
  transform: translateY(12px);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, opacity 0.35s ease;
  cursor: pointer;
  height: auto;
}

.recent-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.recent-card:hover {
  border-color: rgba(224, 171, 69, 0.65);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.recent-card:focus-visible {
  outline: 2px solid #c98f2e;
  outline-offset: 2px;
}

/* Cột 1: Mini QueBlock */
.recent-mini-que {
  width: 28px;
  height: 38px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  padding: 0;
  align-self: center;
  justify-content: center;
  box-sizing: border-box;
}

.recent-mini-line {
  width: 28px;
  height: 3px;
  border-radius: 1.5px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.recent-mini-yang {
  background-color: var(--gold, #c98f2e);
}

.recent-mini-yang.is-moving {
  background-color: var(--crimson, #b91c1c);
}

.recent-mini-yin {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

.recent-mini-yin span {
  width: 12px;
  height: 3px;
  background-color: var(--gold, #c98f2e);
  border-radius: 1.5px;
  box-sizing: border-box;
}

.recent-mini-yin.is-moving span {
  background-color: var(--crimson, #b91c1c);
}

/* Cột 2: Thông tin quẻ & câu hỏi - mọi phần tử đều căn trái */
.recent-col-center {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 5px;
  text-align: left;
  align-items: flex-start;
  justify-content: center;
}

.recent-name-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: #e8e2d4;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.recent-name-primary {
  color: #e8e2d4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-arrow {
  color: var(--gold, #c98f2e);
  font-size: 13px;
  font-weight: normal;
  display: inline-block;
  flex-shrink: 0;
}

.recent-name-changed {
  color: #e8e2d4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-q-row {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Noto Serif', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: #b8ae98;
  line-height: 1.4;
  max-width: 60%;
}

.recent-legacy {
  color: #7d7566;
  font-style: italic;
  font-size: 13px;
  font-family: 'Noto Serif', Georgia, serif;
}

.recent-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #9a9284;
  font-family: 'Noto Serif', Georgia, serif;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.recent-meta-no {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #b8ae98;
  flex-shrink: 0;
}

.recent-meta-sep {
  color: #5a5448;
  flex-shrink: 0;
}

.recent-meta-tri {
  color: #9a9284;
  flex-shrink: 0;
}

.recent-meta-mobile-date,
.recent-meta-mobile-sep {
  display: none;
}

/* Chip trạng thái: một kiểu duy nhất, chữ hoa 11px, letter-spacing 0.08em, viền 1px, bo pill */
.recent-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.3;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid;
  flex-shrink: 0;
}

.recent-chip.chip-static {
  border-color: #7d7566;
  color: #a69f91;
  background: rgba(125, 117, 102, 0.1);
}

.recent-chip.chip-moving {
  border-color: #c98f2e;
  color: #f0c265;
  background: rgba(201, 143, 46, 0.12);
}

/* Cột 3: Ngày giờ & nút xóa - căn phải, không tách thành dòng riêng */
.recent-col-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
  align-self: center;
}

.recent-time {
  font-size: 12px;
  color: #9a9284;
  font-family: 'Noto Serif', Georgia, serif;
  white-space: nowrap;
}

/* Nút xóa trong trang #/lich-su */
.recent-card-del {
  background: transparent;
  border: 1px solid rgba(125, 117, 102, 0.3);
  color: #7d7566;
  font-size: 13px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.recent-card-del:hover {
  color: #e05345;
  border-color: rgba(224, 83, 69, 0.5);
  background: rgba(224, 83, 69, 0.12);
}

/* Nút phụ dạng pill */
.btn-pill-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(201, 143, 46, 0.35);
  background: rgba(26, 23, 19, 0.6);
  color: #e8e2d4;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  font-family: inherit;
}

.btn-pill-sub:hover {
  border-color: rgba(224, 171, 69, 0.8);
  background: rgba(201, 143, 46, 0.18);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Trạng thái rỗng */
.recent-empty-state,
.home-recent-empty,
.history-empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 20px;
  border: 1px dashed rgba(201, 143, 46, 0.25);
  border-radius: 14px;
  background: rgba(26, 23, 19, 0.3);
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.recent-empty-msg {
  font-size: 14px;
  color: #b8ae98;
  margin: 0 0 16px;
  font-family: 'Noto Serif', Georgia, serif;
  font-style: italic;
}

/* Nhóm lịch sử theo ngày (#/lich-su) */
.history-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  max-width: var(--card-max);
  margin: 0 auto;
  box-sizing: border-box;
}

.history-date-group {
  margin-bottom: 0;
  max-width: var(--card-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.history-date-heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  color: #c98f2e;
  margin: 0 0 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(201, 143, 46, 0.15);
  padding-bottom: 6px;
}

.history-date-count {
  font-size: 12px;
  color: #7d7566;
  font-family: 'Noto Serif', Georgia, serif;
  font-weight: normal;
}

.history-group-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* Responsive Mobile (<= 600px và 390px) */
@media (max-width: 600px) {
  .recent-card {
    grid-template-columns: 28px 1fr;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
  }
  .recent-col-right {
    display: none;
  }
  .recent-q-row {
    max-width: 100%;
  }
  .recent-meta-row {
    flex-wrap: wrap;
    gap: 6px;
    white-space: normal;
  }
  .recent-meta-tri {
    display: inline;
  }
  .recent-meta-mobile-date {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    color: #9a9284;
  }
  .recent-meta-mobile-sep {
    display: inline;
    color: #5a5448;
  }
  .home-recent-list,
  .history-group-cards {
    gap: 12px;
  }
}

@media (max-width: 390px) {
  .recent-card {
    padding: 12px 14px;
  }
  .recent-name-row {
    font-size: 15px;
    gap: 6px;
  }
  .recent-name-row .recent-arrow {
    font-size: 12px;
  }
  .recent-q-row {
    font-size: 13px;
  }
}

/* Prefers-reduced-motion: tắt hiệu ứng fade / trượt */
@media (prefers-reduced-motion: reduce) {
  .recent-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .btn-pill-sub {
    transition: none !important;
    transform: none !important;
  }
}


@media (max-width: 639px) {
  .home-depth-wrapper {
    margin-top: 72px;
    gap: 88px;
  }
  .home-wheel-preview-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 22px 18px;
  }
  .home-daily-card {
    padding: 20px 18px;
  }
}

/* Khung nhập câu hỏi nổi trên nền, viền vàng mảnh bo 16px */
.question-form-wrap {
  width: min(var(--card-max), 100% - 2 * var(--gutter));
  max-width: var(--card-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

@media (max-width: 679.98px) {
  .question-form-wrap {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
  }
}

.question-box {
  background-color: var(--surface);
  border: 1px solid rgba(201, 143, 46, 0.28);
  border-radius: 16px;
  padding: 22px 32px 20px;
  display: flex;
  flex-direction: column;
  row-gap: 0;
  contain: layout paint style;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
  box-sizing: border-box;
  width: 100%;
}

@media (min-width: 600px) and (max-width: 899.98px) {
  .question-box {
    padding: 20px 24px 18px;
  }
}

@media (max-width: 599.98px) {
  .question-box {
    padding: 20px 18px 16px;
  }
}

.how-to-ask {
  margin-bottom: 12px;
}

.dong-tam-inline {
  margin-bottom: 12px;
}

/* Cách đặt câu hỏi (gập mặc định) */
.how-to-ask {
  font-family: var(--font-sans);
  font-size: 0.84rem;
}

.how-to-summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gold);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.how-to-summary::-webkit-details-marker {
  display: none;
}

.how-icon {
  font-size: 0.78rem;
}

.how-chevron {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.how-to-ask[open] .how-chevron {
  transform: rotate(180deg);
}

.how-to-body {
  margin: 8px 0 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-2);
  font-size: 0.82rem;
  line-height: 1.55;
  max-width: 680px;
  box-sizing: border-box;
}

/* Giờ khởi niệm & Liên kết nhỏ Chỉnh giờ */
.dong-tam-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  color: var(--text-2);
}

.dong-tam-icon {
  color: var(--gold);
  font-size: 0.88rem;
}

.dong-tam-mode {
  color: var(--text-1);
  font-weight: 600;
}

.dong-tam-canchi {
  color: var(--text-3);
  font-size: 0.8rem;
}

.btn-link-inline {
  background: none;
  border: none;
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0 2px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.custom-time-panel {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(16, 14, 11, 0.65);
  border: 1px solid var(--gold-border);
}

.custom-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.custom-time-label {
  font-size: 0.82rem;
  color: var(--text-2);
}

.custom-time-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.input-time {
  background: var(--bg);
  border: 1px solid var(--gold-border-hover);
  color: var(--text-1);
  padding: 5px 10px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.84rem;
}

.input-textarea {
  width: 100%;
  background: #100e0b;
  border: 1px solid rgba(201, 143, 46, 0.28);
  border-radius: 12px;
  padding: 12px 16px;
  scrollbar-gutter: stable;
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  min-height: 64px;
  max-height: 170px;
  field-sizing: content;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 143, 46, 0.35) transparent;
  resize: none;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-textarea::-webkit-scrollbar {
  width: 6px;
}

.input-textarea::-webkit-scrollbar-thumb {
  background: rgba(201, 143, 46, 0.35);
  border-radius: 3px;
}

.input-textarea::-webkit-scrollbar-track {
  background: transparent;
}

.input-textarea::placeholder {
  color: #7d7566;
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.input-textarea:focus {
  border-color: rgba(201, 143, 46, 0.7);
  box-shadow: 0 0 0 3px rgba(201, 143, 46, 0.12);
  outline: none;
}

@media (max-width: 599.98px) {
  .input-textarea {
    font-size: 15px;
    min-height: 56px;
    max-height: 166px;
    padding: 12px 16px;
  }
}

/* Hàng nút dưới khung nhập: Gợi ý câu hỏi + Nút chính Gieo Quẻ */
.hero-action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 14px;
  box-sizing: border-box;
}

@media (max-width: 599.98px) {
  .hero-action-row {
    flex-direction: column;
    gap: 10px;
  }
  .btn-suggest-pill,
  .btn-primary-cta {
    width: 100%;
    height: 48px !important;
    min-height: 48px !important;
  }
}

.btn-suggest-pill {
  background: transparent;
  border: 1px solid var(--gold-border-hover);
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  height: 52px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}

.btn-suggest-pill:hover {
  background-color: var(--gold-soft);
  border-color: var(--gold);
}

.btn-primary-cta {
  flex: 1;
  height: 52px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #100e0b;
  background-color: var(--gold);
  border: 1px solid var(--gold);
  box-shadow: 0 6px 24px rgba(201, 143, 46, 0.22);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.btn-primary-cta:hover:not(:disabled) {
  transform: translateY(-1px);
  background-color: #d69b38;
  box-shadow: 0 10px 28px rgba(201, 143, 46, 0.32);
}

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

.btn-primary-cta:active:not(:disabled) {
  transform: translateY(0);
}

.topic-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.btn-chip {
  background: rgba(26, 23, 19, 0.8);
  border: 1px solid var(--gold-border);
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.btn-chip:hover {
  border-color: var(--gold);
  color: var(--gold);
  background-color: var(--gold-soft);
}

.hero-micro-note {
  margin: 8px 0 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 12px;
  color: #8a8070;
  width: 100%;
  box-sizing: border-box;
}

.casting-stage {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.casting-stage-header {
  text-align: center;
}

.active-question-banner {
  margin: 2px auto 0;
  max-width: 480px;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-style: italic;
  color: var(--text-2);
  line-height: 1.45;
}

/* Trạng thái Nghi thức: Tĩnh tâm… -> Hào thứ k / 6 */
.ritual-phase-box {
  min-height: 44px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ritual-calm-wrap {
  text-align: center;
  animation: ritual-fade-up 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ritual-calm-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.6vw, 2.2rem);
  font-weight: 600;
  line-height: 1.2;
  background: linear-gradient(135deg, #fff4cc 0%, #e7b95c 48%, #c98f2e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(201, 143, 46, 0.28);
}

.ritual-calm-sub {
  margin: 4px 0 0;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text-2);
  letter-spacing: 0.03em;
}

.ritual-step-counter {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  animation: ritual-fade-up 0.3s ease both;
}

@keyframes ritual-fade-up {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.coin-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: opacity 0.42s ease, transform 0.42s ease;
}

.coin-stage.is-fading-out {
  display: none;
}

.coins-pedestal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 6vw, 54px);
  padding: 84px 36px 20px;
  position: relative;
  border-radius: 26px;
  background:
    radial-gradient(ellipse 72% 38% at 50% 76%, rgba(201, 143, 46, 0.24) 0%, rgba(201, 143, 46, 0.07) 54%, transparent 82%),
    radial-gradient(ellipse 88% 68% at 50% 52%, rgba(32, 26, 19, 0.9) 0%, rgba(16, 13, 10, 0.96) 72%, rgba(11, 9, 7, 0.99) 100%);
  border: 1px solid rgba(201, 143, 46, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 232, 180, 0.12), inset 0 -20px 38px rgba(0, 0, 0, 0.56), 0 18px 42px rgba(0, 0, 0, 0.52);
  overflow: hidden;
}

.ritual-fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.coin-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 3;
}

.coin-stage-3d {
  width: 92px;
  height: 92px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 920px;
  perspective-origin: 50% 32%;
}

/* Bóng đổ elip mờ trên bệ đá: co giãn & đậm nhạt theo độ cao đồng xu */
.coin-shadow {
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 84px;
  height: 24px;
  margin-left: -42px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.94) 0%,
    rgba(8, 6, 4, 0.76) 44%,
    rgba(201, 143, 46, 0.18) 68%,
    rgba(0, 0, 0, 0) 84%
  );
  transform: scale(1);
  opacity: 0.88;
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity;
}

/* Gợn sáng vàng lan nhẹ trên mặt bệ ngay khoảnh khắc đồng xu chạm bệ */
.coin-impact-ring {
  position: absolute;
  bottom: -11px;
  left: 50%;
  width: 92px;
  height: 30px;
  margin-left: -46px;
  border-radius: 50%;
  border: 1.8px solid rgba(247, 204, 106, 0.9);
  background: radial-gradient(ellipse at center, rgba(235, 184, 82, 0.26) 0%, rgba(201, 143, 46, 0.08) 55%, transparent 78%);
  transform: scale(0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  will-change: transform, opacity;
}

.coin-lifter {
  width: 88px;
  height: 88px;
  position: relative;
  transform-style: preserve-3d;
  z-index: 3;
  will-change: transform;
}

.coin {
  width: 88px;
  height: 88px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  will-change: transform;
}

.coin[data-face="yin"]:not(.is-animating-3d) {
  transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg);
}

.coin[data-face="yang"]:not(.is-animating-3d) {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

/* 24 lớp mặt cắt xếp dọc trục Z (-4.4px .. +4.4px) tạo độ dày kim loại thật, thuần GPU không dùng clip-path */
.coin-edge-stack {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

.coin-edge-slice {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    #52350c 0%,
    #c68d2f 22%,
    #fae199 42%,
    #8a5d1b 62%,
    #3b2407 82%,
    #b68027 100%
  );
  border: 1px solid rgba(248, 216, 136, 0.42);
  backface-visibility: visible;
}

.coin-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* Mặt Dương (= 3, Ngửa) đặt ở +4.6px dọc trục Z */
.coin-front {
  transform: translateZ(4.6px);
}

/* Mặt Âm (= 2, Sấp) đặt ở -4.6px (xoay 180deg trục X rồi đẩy +4.6px) */
.coin-back {
  transform: rotateX(180deg) translateZ(4.6px);
}

.coin-svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Vệt sáng kim loại phản quang chạy qua mặt đồng xu khi xoay (thuần GPU transform + opacity) */
.coin-sheen {
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    118deg,
    rgba(255, 248, 220, 0) 36%,
    rgba(255, 246, 208, 0.34) 48%,
    rgba(255, 253, 240, 0.62) 50%,
    rgba(255, 246, 208, 0.32) 52%,
    rgba(255, 248, 220, 0) 64%
  );
  transform: translateX(-75%) rotate(12deg);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.coin-oriental-mark {
  font-family: var(--font-han);
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-3);
  transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

.coin-oriental-mark.is-yang {
  color: var(--gold);
  text-shadow: 0 0 10px rgba(201, 143, 46, 0.35);
}

.coin-oriental-mark.is-tossing {
  opacity: 0.22;
  transform: translateY(-3px);
}

.coin-caption {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.02em;
}

.toss-status {
  margin: 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--text-2);
}

.cast-stage-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 360px;
}

.cast-stage-actions .btn-primary-cta {
  width: 100%;
}

.cast-sub-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-secondary,
.btn-ghost {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.18s ease;
}

.btn-secondary {
  background: var(--gold-soft);
  color: var(--gold);
  border: 1px solid var(--gold-border-hover);
}
.btn-secondary:hover:not(:disabled) {
  background: rgba(201, 143, 46, 0.18);
}

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--gold-border);
}
.btn-ghost:hover:not(:disabled) {
  color: var(--text-1);
  border-color: var(--gold-border-hover);
}

.btn-sm {
  font-size: 0.78rem;
  padding: 6px 14px;
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ================= VẠCH QUẺ LÀ NHÂN VẬT CHÍNH (15px thick, rounded, subtle glow) ================= */
.progress-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.step-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-2);
}

.legend-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-3);
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.legend-static {
  background: var(--gold);
}
.legend-moving {
  background: var(--crimson);
  box-shadow: 0 0 8px var(--crimson);
}

.ritual-board-and-hex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4.5vw, 44px);
  flex-wrap: wrap;
  width: 100%;
}

.cast-board {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 460px;
  width: 100%;
  margin: 4px auto 0;
  transition: max-width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.ritual-board-and-hex.is-revealed .cast-board {
  max-width: 280px;
  margin: 0;
}

.hao-slot {
  display: grid;
  grid-template-columns: 76px 1fr 124px;
  align-items: center;
  gap: 16px;
  min-height: 28px;
}

.ritual-board-and-hex.is-revealed .hao-slot {
  grid-template-columns: 64px 1fr 48px;
  gap: 12px;
}

.ritual-board-and-hex.is-revealed .hao-meta-detail {
  display: none;
}

.hao-idx {
  font-size: 0.82rem;
  color: var(--text-3);
  transition: color 0.35s ease;
}
.hao-slot.is-filled .hao-idx {
  color: var(--text-2);
  font-weight: 600;
}

.hao-bar-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  height: 15px;
}

.hao-bar-empty {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(201, 143, 46, 0.09);
}

.hao-slot.is-next .hao-bar-empty {
  background: rgba(201, 143, 46, 0.24);
}

.hao-yang-bar {
  width: 100%;
  height: 15px;
  border-radius: 999px;
  background-color: var(--gold);
  box-shadow: 0 0 12px var(--gold-glow);
  transform-origin: center;
}

.hao-yin-bar {
  width: 100%;
  height: 15px;
  display: flex;
  justify-content: space-between;
  gap: 16%;
}

.hao-yin-seg {
  flex: 1;
  height: 100%;
  border-radius: 999px;
  background-color: var(--gold);
  box-shadow: 0 0 12px var(--gold-glow);
  transform-origin: center;
}

/* Hiệu ứng bung vạch hào mượt như lụa ngay khi đồng xu chạm bệ */
.hao-slot.is-just-landed .hao-yang-bar,
.hao-slot.is-just-landed .hao-yin-seg {
  animation: hao-bar-bloom 0.68s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes hao-bar-bloom {
  0% {
    transform: scaleX(0);
    opacity: 0;
    box-shadow: 0 0 26px rgba(235, 184, 82, 0.95);
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
    box-shadow: 0 0 12px var(--gold-glow);
  }
}

.hao-slot.is-moving .hao-yang-bar,
.hao-slot.is-moving .hao-yin-seg {
  background-color: var(--crimson);
  animation: crimson-pulse 2.4s ease-in-out infinite;
}

.hao-slot.is-moving.is-just-landed .hao-yang-bar,
.hao-slot.is-moving.is-just-landed .hao-yin-seg {
  animation: hao-bar-bloom-crimson 0.68s cubic-bezier(0.22, 1, 0.36, 1) both, crimson-pulse 2.4s ease-in-out 0.68s infinite;
}

@keyframes hao-bar-bloom-crimson {
  0% {
    transform: scaleX(0);
    opacity: 0;
    box-shadow: 0 0 28px rgba(220, 38, 38, 0.95);
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
    box-shadow: 0 0 14px rgba(185, 28, 28, 0.6);
  }
}

@keyframes crimson-pulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(185, 28, 28, 0.35), 0 0 0 0 rgba(185, 28, 28, 0.2);
  }
  50% {
    box-shadow: 0 0 18px rgba(185, 28, 28, 0.75), 0 0 0 4px rgba(185, 28, 28, 0.14);
  }
}

.hao-meta {
  font-size: 0.78rem;
  text-align: right;
  color: var(--text-3);
  white-space: nowrap;
}

.hao-slot.is-moving .hao-meta {
  color: var(--text-1);
}

.dong-badge {
  display: inline-block;
  font-family: var(--font-han);
  color: var(--crimson);
  font-weight: 700;
  margin-left: 4px;
}

/* Khai mở Đại tự Hán tự & Quái Từ sau khi gieo đủ 6 hào (giống web gốc) */
.ritual-hex-showcase {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 16px;
  animation: ritual-ink-reveal 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ritual-hex-halo {
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 143, 46, 0.26) 0%, rgba(201, 143, 46, 0.06) 55%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

.ritual-giant-hanzi {
  position: relative;
  z-index: 1;
  font-family: var(--font-han);
  font-size: clamp(4.2rem, 9vw, 6.2rem);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(180deg, #fff5d0 0%, #e4b254 52%, #b87d20 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 32px rgba(201, 143, 46, 0.34);
}

.ritual-hex-meta {
  position: relative;
  z-index: 1;
  margin-top: 10px;
}

.ritual-hex-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-1);
}

.ritual-hex-num {
  margin: 3px 0 0;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--text-2);
}

@keyframes ritual-ink-reveal {
  0% {
    opacity: 0;
    transform: scale(1.26);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.ritual-reveal-texts {
  width: 100%;
  max-width: 480px;
  margin: 8px auto 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  animation: ritual-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ritual-reveal-label {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.ritual-reveal-body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.68;
  color: var(--text-1);
}

.ritual-reveal-body.is-secondary {
  color: var(--text-2);
}

.ritual-word-token {
  display: inline-block;
  animation: ritual-word-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ritual-word-in {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.ritual-reveal-divider {
  height: 1px;
  width: 100%;
  background: var(--divider);
}

.ritual-reveal-cta-wrap {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ritual-open-reading-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 28px;
  border-radius: 999px;
  min-width: 200px;
}

.ritual-reading-progress-track {
  width: 168px;
  height: 3px;
  border-radius: 999px;
  background: rgba(232, 226, 212, 0.12);
  overflow: hidden;
}

.ritual-reading-progress-fill {
  width: 100%;
  height: 100%;
  background: var(--gold);
  transform-origin: left center;
  transform: scaleX(0);
}

.ritual-reading-progress-fill.is-running {
  animation: ritual-progress-run 3.2s linear forwards;
}

@keyframes ritual-progress-run {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

.ritual-reading-progress-note {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  color: var(--text-3);
}

/* ================= 3. KẾT QUẢ BỐC PHỆ (NỔI TRỰC TIẾP TRÊN NỀN, TỐI ĐA 640PX) ================= */
.result-section {
  padding-top: 48px;
}

.qkd-result-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.qkd-result-header {
  text-align: center;
  margin-bottom: 36px;
}

.qkd-result-eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
  font-weight: 600;
}

.qkd-result-question {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--text-1);
  font-style: italic;
}

.qkd-result-time {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--text-2);
}

/* Protagonist Hexagram Stage (Single or Dual Quẻ Chủ → Quẻ Biến) */
.qkd-pair-stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 36px;
  padding: 28px 24px;
  background-color: var(--surface);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-card);
}

@media (min-width: 640px) {
  .qkd-pair-stage.is-dual {
    grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    justify-items: center;
  }
}

.qkd-hex-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.qkd-showcase-tag {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-2);
  margin-bottom: 10px;
  font-weight: 600;
}

.qkd-hex-showcase.is-changed .qkd-showcase-tag {
  color: var(--gold);
}

.qkd-giant-hanzi {
  font-family: var(--font-han);
  font-size: 3.3rem;
  line-height: 1.08;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 16px;
}

/* Protagonist 6-Line Hexagram Diagram (15px thick bars, 11px vertical gap) */
.qkd-hex-diagram {
  width: 100%;
  max-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0 auto 18px;
}

.qkd-pair-stage.is-single .qkd-hex-diagram {
  max-width: 240px;
}

.qkd-diagram-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qkd-line-num {
  width: 18px;
  text-align: right;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  color: var(--text-3);
}

.qkd-line-bar {
  flex: 1;
  height: 15px;
  display: flex;
  align-items: center;
}

.qkd-bar-solid {
  width: 100%;
  height: 15px;
  border-radius: 999px;
  background-color: var(--gold);
  box-shadow: 0 0 12px var(--gold-glow);
}

.qkd-bar-broken {
  width: 100%;
  height: 15px;
  display: flex;
  justify-content: space-between;
  gap: 16%;
}

.qkd-bar-broken > span {
  flex: 1;
  height: 100%;
  border-radius: 999px;
  background-color: var(--gold);
  box-shadow: 0 0 12px var(--gold-glow);
}

.qkd-diagram-row.is-moving .qkd-bar-solid,
.qkd-diagram-row.is-moving .qkd-bar-broken > span {
  background-color: var(--crimson);
  animation: crimson-pulse 2.4s ease-in-out infinite;
}

.qkd-line-dong {
  width: 18px;
  text-align: left;
  font-size: 0.78rem;
  font-family: var(--font-han);
  font-weight: 700;
  color: var(--crimson);
}

.qkd-hex-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-1);
  margin: 0 0 6px;
}

.qkd-hex-meaning {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  color: var(--gold);
  margin: 0 0 8px;
  min-height: 2.8em;
}

.qkd-hex-tri {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  color: var(--text-2);
  margin: 0 0 14px;
  min-height: 2.4em;
}

.qkd-pair-bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
}

@media (min-width: 640px) {
  .qkd-pair-bridge {
  }
}

.qkd-bridge-arrow {
  font-size: 1.5rem;
  color: var(--crimson);
  line-height: 1;
}

.qkd-bridge-note {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--text-2);
  white-space: nowrap;
}

/* Chi tiết 6 lần gieo */
.qkd-cast-detail-box {
  width: 100%;
  padding: 18px 0;
  margin-bottom: 32px;
}

.qkd-subbox-title {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-2);
  margin: 0 0 12px;
  text-align: center;
  font-weight: 600;
}

.qkd-cast-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  text-align: center;
}

@media (max-width: 520px) {
  .qkd-cast-grid-6 {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 8px;
  }
}

.qkd-cast-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.qkd-cast-col-label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--text-2);
}

.qkd-mini-coins {
  display: flex;
  justify-content: center;
  gap: 3px;
}

.qkd-mini-coin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-family: var(--font-han);
  font-size: 0.56rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.qkd-mini-coin.is-yang {
  background: var(--gold-soft);
  color: var(--gold);
  border: 1px solid var(--gold-border-hover);
}

.qkd-mini-coin.is-yin {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.qkd-cast-sum {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  color: var(--text-2);
}

.qkd-cast-sum.is-moving {
  color: var(--crimson);
  font-weight: 700;
}

/* Editorial Reading Flow (Max 640px, Noto Serif for classical text) */
.qkd-reading-flow {
  font-family: var(--font-serif);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.qkd-reading-sec {
  padding-bottom: 24px;
}

.qkd-block-label {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  font-weight: 700;
  margin: 0 0 12px;
}

.qkd-classical-quote {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.75;
  color: var(--text-1);
}

.qkd-body-text {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.78;
  color: var(--text-1);
}

.qkd-tier-rule {
  margin: 0 0 18px;
  font-size: 0.94rem;
  color: var(--text-2);
  font-style: italic;
}

.qkd-interp-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.qkd-interp-item {
  padding-left: 20px;
  border-left: 2px solid var(--crimson);
}

.qkd-interp-item.is-secondary {
  border-left-color: var(--gold);
}

.qkd-interp-item h5 {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 1.04rem;
  font-weight: 700;
  color: var(--text-1);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.qkd-role-tag {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--crimson-soft);
  color: var(--crimson);
  border: 1px solid rgba(185, 28, 28, 0.35);
  font-weight: 600;
}

.qkd-role-tag.is-sub {
  background: var(--gold-soft);
  color: var(--gold);
  border-color: var(--gold-border-hover);
}

.qkd-interp-item p {
  margin: 0;
  font-size: 1.02rem;
  color: var(--text-1);
  line-height: 1.78;
}

/* Open Classical Epigraph */
.qkd-contemplation-box {
  padding: 8px 16px 4px;
  text-align: center;
}

.qkd-contemplation-quote {
  margin: 0 0 6px;
  font-style: italic;
  font-size: 0.98rem;
  color: var(--gold);
}

.qkd-contemplation-sub {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text-2);
}

.qkd-result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 8px;
}

/* ================= 4 & 5. LỊCH SỬ & THƯ VIỆN 64 QUẺ ================= */
.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}

.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.showcase-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* Thanh lọc thư viện nổi trên nền (bỏ hộp lớn nặng nề) */
.filter-bar {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: 820px;
  margin: 0 auto 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  contain: layout style paint;
}

.search-field {
  position: relative;
}

.search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  pointer-events: none;
}

.input-search {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--gold-border-hover);
  border-radius: 14px;
  padding: 13px 20px 13px 48px;
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: 0.95rem;
}

.input-search::placeholder {
  color: var(--text-2);
}

.input-search:focus {
  outline: none;
  border-color: var(--gold);
}

.trigram-filter-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.filter-label {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  color: var(--text-2);
}

.select-position {
  background: var(--surface);
  color: var(--text-1);
  border: 1px solid var(--gold-border);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: 0.84rem;
}

.library-count {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text-2);
  min-width: 148px;
  text-align: right;
  contain: layout paint;
}

.trigram-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  contain: layout paint;
}

.trigram-chip {
  background: var(--surface);
  border: 1px solid var(--gold-border);
  color: var(--text-2);
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.trigram-chip:hover {
  border-color: var(--gold-border-hover);
  color: var(--gold);
}

.trigram-chip.active {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
  font-weight: 600;
}

/* 64 Hexagrams Grid — Centered Hexagram Lines as the Star of each Card */
.hex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-auto-rows: minmax(304px, auto);
  gap: 20px;
}

.hex-card {
  min-height: 304px;
  height: 100%;
  background-color: var(--surface);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  text-align: center;
  color: var(--text-1);
  font-family: var(--font-sans);
  box-sizing: border-box;
}

.hex-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold-border-hover);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hex-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  line-height: 1.2;
}

.hex-card-num {
  font-size: 0.74rem;
  color: var(--text-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hex-card-han {
  font-family: var(--font-han);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--gold);
}

.hex-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 10px;
  padding: 2px 0;
}

.hex-figure {
  flex-shrink: 0;
}

.hex-card-name {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-1);
}

.hex-card-meaning {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.48;
  color: var(--text-2);
}

.hex-card-trigrams {
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--text-2);
  border-top: 1px solid var(--divider);
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}

/* History List & History Item aliases */
.history-item {
  /* Layout defined in .recent-card */
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px 20px;
  color: var(--text-2);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-card);
  background: var(--surface);
  font-size: 0.9rem;
}

/* ================= 6. FAQ ACCORDION ================= */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  padding: 0;
  overflow: hidden;
}

.faq-question {
  list-style: none;
  padding: 20px 24px;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-chevron {
  color: var(--gold);
  transition: transform 0.2s ease;
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 24px 22px;
  font-family: var(--font-serif);
  color: var(--text-1);
  font-size: 0.96rem;
  line-height: 1.75;
  border-top: 1px solid var(--divider);
}

.faq-answer p {
  margin: 16px 0 10px;
}

.faq-bullets {
  margin: 8px 0 0;
  padding-left: 20px;
}

.faq-bullets li {
  margin-bottom: 8px;
}

/* ================= 7. MODAL CHI TIẾT QUẺ ================= */
.detail-dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 680px;
  width: calc(100% - 24px);
  color: var(--text-1);
}

.detail-dialog[open] {
  position: fixed;
  inset: 0;
  margin: auto;
  display: block;
  z-index: 100;
}

.qkd-divider {
  height: 1px;
  background-color: var(--divider);
  margin: 4px 0;
}

.detail-dialog::backdrop {
  background: rgba(10, 8, 6, 0.86);
  backdrop-filter: blur(6px);
}

.detail-card {
  max-height: 88vh;
  overflow-y: auto;
  padding: 32px 36px;
}

.detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--divider);
}

.detail-nav-btns {
  display: flex;
  align-items: center;
  gap: 12px;
}

.detail-pos {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  color: var(--gold);
  font-weight: 600;
}

.btn-close {
  background: transparent;
  border: 1px solid var(--gold-border);
  color: var(--text-2);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-close:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.qkd-modal-hero {
  text-align: center;
  margin-bottom: 28px;
}

.qkd-modal-subgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 28px;
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold-border);
  background: rgba(255, 255, 255, 0.02);
}

.qkd-modal-subcard-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-2);
  margin: 0 0 4px;
}

.qkd-modal-subcard-val {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text-1);
  margin: 0;
}

.detail-hao-list {
  font-family: var(--font-serif);
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}

.detail-hao-item {
  padding-left: 16px;
  border-left: 2px solid var(--gold);
  line-height: 1.75;
}

.detail-hao-item.is-highlighted {
  border-left-color: var(--crimson);
  background: var(--crimson-soft);
  padding: 10px 14px;
  border-radius: 8px;
}

.detail-hao-item strong {
  color: var(--gold);
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--surface);
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  z-index: 200;
  font-size: 0.88rem;
}

/* ================= 8. FOOTER ================= */
.site-footer {
  border-top: 1px solid var(--gold-border);
  padding: 64px 0 40px;
  margin-top: 72px;
  background-color: #0b0907;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--divider);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 5fr 3fr 4fr;
    gap: 48px;
  }
}

.footer-heading {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 12px;
}

.footer-desc {
  margin: 12px 0 0;
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.7;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.18s ease;
}

.footer-links a:hover {
  color: var(--gold);
}

.footer-bottom {
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--text-2);
}

/* ================= 9. HASH ROUTER VIEWS & CHUYỂN TRANG (200-300MS) ================= */
#app-views {
  display: grid;
  grid-template-columns: 100%;
  align-items: start;
  position: relative;
  min-height: calc(100vh - 60px);
}

.route-view {
  grid-area: 1 / 1;
  width: 100%;
  opacity: 1;
  transform: translateX(0);
  z-index: 1;
  contain: layout style paint;
}

.route-view.hidden {
  display: none !important;
}

#app-views[data-wheel-detail="1"] > #view-wheel.hidden,
#app-views[data-wheel-detail="1"] > #view-detail.hidden {
  display: block !important;
  opacity: 0 !important;
  transform: translateX(-200vw) !important;
  z-index: -1 !important;
  transition: none !important;
  contain: layout style paint !important;
}

/* ================= 10. HEADER CTA & MENU NGĂN KÉO MOBILE (DRAWER) ================= */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-icon {
  min-width: 40px;
  min-height: 40px;
  width: 40px;
  height: 40px;
}

.btn-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 999px;
  background-color: var(--gold);
  color: #100e0b;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.18s ease;
}

.btn-header-cta:hover {
  background-color: #d69b38;
  transform: translateY(-1px);
}

.drawer-toggle {
  display: none;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 7, 5, 0.76);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 90;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(84vw, 310px);
  background-color: #16130f;
  border-left: 1px solid var(--gold-border-hover);
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.65);
  z-index: 95;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 20px 24px;
  animation: drawer-slide-in 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes drawer-slide-in {
  from { transform: translateX(100%); opacity: 0.4; }
  to { transform: translateX(0); opacity: 1; }
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--divider);
}

.brand-title-drawer {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-1);
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 0;
  flex: 1;
  overflow-y: auto;
}

.drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--text-2);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 500;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.drawer-link:hover,
.drawer-link.active {
  background-color: var(--gold-soft);
  color: var(--gold);
}

.drawer-link-icon {
  color: var(--gold);
  width: 20px;
  text-align: center;
  font-size: 0.95rem;
}

.drawer-footer {
  padding-top: 16px;
  border-top: 1px solid var(--divider);
}

.drawer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
}

/* ================= 11. SÂN KHẤU GIEO QUẺ TOÀN MÀN HÌNH (#/gieo-que) ================= */
.casting-view-section {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 0 32px;
}

.casting-top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.casting-top-nav .eyebrow {
  margin: 0;
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
}

@media (max-width: 520px) {
  .casting-top-nav .eyebrow {
    display: none;
  }
}

.casting-view-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.2vw, 2.2rem);
  font-weight: 700;
  color: var(--text-1);
}

/* ================= 12. VÒNG QUAY 64 QUẺ 3 LỚP ĐỒNG TÂM (#/64-que) ================= */
.library-section {
  padding-top: 18px;
}

.library-section .section-head {
  margin-bottom: 10px;
}

.library-section .section-title {
  margin-bottom: 6px;
}

.wheel-section-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 auto 36px;
}

.wheel-tooltip {
  height: 36px;
  max-width: 680px;
  width: 100%;
  padding: 0 14px;
  border-radius: 999px;
  background-color: rgba(26, 23, 19, 0.78);
  border: 1px solid var(--gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  contain: strict;
}

.wheel-tooltip-badge {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #100e0b;
  background-color: var(--gold);
  padding: 2px 9px;
  border-radius: 999px;
  flex-shrink: 0;
}

.wheel-tooltip-text {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wheel-viewport {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  overflow: hidden;
  contain: layout paint;
}

.hex-wheel {
  --wheel-size: 560px;
  --outer-radius: 236px;
  --mid-radius: 124px;
  position: relative;
  width: var(--wheel-size);
  height: var(--wheel-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  flex-shrink: 0;
  contain: layout paint;
}

.wheel-ambient-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(201, 143, 46, 0.14) 0%, rgba(201, 143, 46, 0.05) 46%, rgba(16, 14, 11, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.wheel-ring-guide {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.wheel-guide-outer {
  width: calc(var(--outer-radius) * 2 + 64px);
  height: calc(var(--outer-radius) * 2 + 64px);
  border: 1px solid rgba(201, 143, 46, 0.22);
}

.wheel-guide-mid {
  width: calc(var(--mid-radius) * 2 + 76px);
  height: calc(var(--mid-radius) * 2 + 76px);
  border: 1px dashed rgba(201, 143, 46, 0.2);
}

.wheel-guide-inner {
  width: 112px;
  height: 112px;
  border: 1px solid rgba(201, 143, 46, 0.28);
  background: radial-gradient(circle at center, rgba(26, 23, 19, 0.92) 0%, rgba(16, 14, 11, 0.7) 100%);
}

/* Lớp 1 (Vòng ngoài): 64 thẻ quẻ xếp tròn theo thứ tự Văn Vương, xoay chiều kim đồng hồ ~180s/vòng.
   will-change: transform CHỈ đặt trên 2 container xoay (.wheel-outer-ring và .wheel-middle-ring). */
.wheel-outer-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 3;
  animation: wheel-spin-cw 180s linear infinite;
  will-change: transform;
  transition: opacity 0.22s ease;
}

/* Tạm dừng vòng quay khi rê chuột vào container (giữ nguyên góc xoay, không nhảy góc) */
.hex-wheel:hover .wheel-outer-ring,
.hex-wheel:hover .wheel-middle-ring,
.hex-wheel.is-hovered .wheel-outer-ring,
.hex-wheel.is-hovered .wheel-middle-ring,
.hex-wheel.is-leaving .wheel-outer-ring,
.hex-wheel.is-leaving .wheel-middle-ring {
  animation-play-state: paused;
}

/* Khi click một thẻ quẻ trên vòng ngoài: zoom nhẹ + mờ dần 250ms trực tiếp trên thẻ đó rồi mới đổi route */
.wheel-hex-slot.is-clicked .wheel-hex-card {
  transform: scale(1.36) translateY(-5px);
  opacity: 0.08;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
}

@keyframes wheel-spin-cw {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes wheel-spin-ccw {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

.wheel-hex-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 58px;
  margin-left: -12px;
  margin-top: -29px;
  transform: rotate(var(--slot-angle)) translateY(calc(-1 * var(--outer-radius)));
  transform-origin: center center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  outline: none;
}

/* Thẻ quẻ con tĩnh bên trong: CHỈ animate transform và opacity khi hover/click trên 1 thẻ.
   Hiệu ứng sáng dùng ::after (opacity), KHÔNG animate box-shadow hay background-color, KHÔNG dùng filter/backdrop-filter. */
.wheel-hex-card {
  position: relative;
  width: 23px;
  height: 56px;
  border-radius: 6px;
  background-color: #1a1713;
  border: 1px solid rgba(201, 143, 46, 0.30);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px;
}

.wheel-hex-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 6px;
  border: 1.5px solid var(--gold);
  background: rgba(201, 143, 46, 0.18);
  opacity: 0;
  pointer-events: none;
}

.wheel-hex-num {
  font-family: var(--font-sans);
  font-size: 0.56rem;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1;
  letter-spacing: -0.02em;
}

.wheel-hex-han {
  font-family: var(--font-han);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gold);
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 1.05;
  letter-spacing: -1px;
}

.wheel-hex-slot:hover,
.wheel-hex-slot:focus-visible,
.wheel-hex-slot.is-clicked {
  z-index: 15;
}

.wheel-hex-slot:hover .wheel-hex-card,
.wheel-hex-slot:focus-visible .wheel-hex-card {
  transform: scale(1.24) translateY(-3px);
  transition: transform 0.16s ease, opacity 0.16s ease;
}

.wheel-hex-slot.is-clicked .wheel-hex-card {
  transform: scale(1.38) translateY(-5px);
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.wheel-hex-slot:hover .wheel-hex-card::after,
.wheel-hex-slot:focus-visible .wheel-hex-card::after,
.wheel-hex-slot.is-clicked .wheel-hex-card::after {
  opacity: 1;
  transition: opacity 0.16s ease;
}

/* Khi lọc theo 1 quái ở vòng giữa:
   - Các thẻ không khớp nhận .is-dim (hoặc .is-tri-dim): opacity 0.25, transition 250ms
   - Thẻ được làm sáng nhận .is-match (hoặc .is-tri-match): viền vàng, nổi nhẹ scale(1.14), KHÔNG animate box-shadow */
.wheel-hex-slot.is-dim .wheel-hex-card,
.wheel-hex-slot.is-tri-dim .wheel-hex-card,
.wheel-outer-ring[data-active-tri] .wheel-hex-slot .wheel-hex-card {
  opacity: 0.25;
  transition: opacity 250ms ease, transform 250ms ease;
}

.wheel-hex-slot.is-match,
.wheel-hex-slot.is-tri-match,
.wheel-outer-ring[data-active-tri="thien"] .wheel-hex-slot[data-upper="thien"],
.wheel-outer-ring[data-active-tri="thien"] .wheel-hex-slot[data-lower="thien"],
.wheel-outer-ring[data-active-tri="dia"] .wheel-hex-slot[data-upper="dia"],
.wheel-outer-ring[data-active-tri="dia"] .wheel-hex-slot[data-lower="dia"],
.wheel-outer-ring[data-active-tri="hoa"] .wheel-hex-slot[data-upper="hoa"],
.wheel-outer-ring[data-active-tri="hoa"] .wheel-hex-slot[data-lower="hoa"],
.wheel-outer-ring[data-active-tri="thuy"] .wheel-hex-slot[data-upper="thuy"],
.wheel-outer-ring[data-active-tri="thuy"] .wheel-hex-slot[data-lower="thuy"],
.wheel-outer-ring[data-active-tri="phong"] .wheel-hex-slot[data-upper="phong"],
.wheel-outer-ring[data-active-tri="phong"] .wheel-hex-slot[data-lower="phong"],
.wheel-outer-ring[data-active-tri="loi"] .wheel-hex-slot[data-upper="loi"],
.wheel-outer-ring[data-active-tri="loi"] .wheel-hex-slot[data-lower="loi"],
.wheel-outer-ring[data-active-tri="son"] .wheel-hex-slot[data-upper="son"],
.wheel-outer-ring[data-active-tri="son"] .wheel-hex-slot[data-lower="son"],
.wheel-outer-ring[data-active-tri="trach"] .wheel-hex-slot[data-upper="trach"],
.wheel-outer-ring[data-active-tri="trach"] .wheel-hex-slot[data-lower="trach"],
.wheel-outer-ring[data-active-tri="can"] .wheel-hex-slot[data-upper="thien"],
.wheel-outer-ring[data-active-tri="can"] .wheel-hex-slot[data-lower="thien"],
.wheel-outer-ring[data-active-tri="khon"] .wheel-hex-slot[data-upper="dia"],
.wheel-outer-ring[data-active-tri="khon"] .wheel-hex-slot[data-lower="dia"],
.wheel-outer-ring[data-active-tri="chan"] .wheel-hex-slot[data-upper="loi"],
.wheel-outer-ring[data-active-tri="chan"] .wheel-hex-slot[data-lower="loi"],
.wheel-outer-ring[data-active-tri="ton"] .wheel-hex-slot[data-upper="phong"],
.wheel-outer-ring[data-active-tri="ton"] .wheel-hex-slot[data-lower="phong"],
.wheel-outer-ring[data-active-tri="kham"] .wheel-hex-slot[data-upper="thuy"],
.wheel-outer-ring[data-active-tri="kham"] .wheel-hex-slot[data-lower="thuy"],
.wheel-outer-ring[data-active-tri="ly"] .wheel-hex-slot[data-upper="hoa"],
.wheel-outer-ring[data-active-tri="ly"] .wheel-hex-slot[data-lower="hoa"],
.wheel-outer-ring[data-active-tri="can2"] .wheel-hex-slot[data-upper="son"],
.wheel-outer-ring[data-active-tri="can2"] .wheel-hex-slot[data-lower="son"],
.wheel-outer-ring[data-active-tri="doai"] .wheel-hex-slot[data-upper="trach"],
.wheel-outer-ring[data-active-tri="doai"] .wheel-hex-slot[data-lower="trach"] {
  z-index: 10;
}

.wheel-hex-slot.is-match .wheel-hex-card,
.wheel-hex-slot.is-tri-match .wheel-hex-card,
.wheel-outer-ring[data-active-tri="thien"] .wheel-hex-slot[data-upper="thien"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="thien"] .wheel-hex-slot[data-lower="thien"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="dia"] .wheel-hex-slot[data-upper="dia"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="dia"] .wheel-hex-slot[data-lower="dia"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="hoa"] .wheel-hex-slot[data-upper="hoa"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="hoa"] .wheel-hex-slot[data-lower="hoa"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="thuy"] .wheel-hex-slot[data-upper="thuy"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="thuy"] .wheel-hex-slot[data-lower="thuy"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="phong"] .wheel-hex-slot[data-upper="phong"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="phong"] .wheel-hex-slot[data-lower="phong"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="loi"] .wheel-hex-slot[data-upper="loi"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="loi"] .wheel-hex-slot[data-lower="loi"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="son"] .wheel-hex-slot[data-upper="son"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="son"] .wheel-hex-slot[data-lower="son"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="trach"] .wheel-hex-slot[data-upper="trach"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="trach"] .wheel-hex-slot[data-lower="trach"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="can"] .wheel-hex-slot[data-upper="thien"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="can"] .wheel-hex-slot[data-lower="thien"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="khon"] .wheel-hex-slot[data-upper="dia"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="khon"] .wheel-hex-slot[data-lower="dia"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="chan"] .wheel-hex-slot[data-upper="loi"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="chan"] .wheel-hex-slot[data-lower="loi"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="ton"] .wheel-hex-slot[data-upper="phong"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="ton"] .wheel-hex-slot[data-lower="phong"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="kham"] .wheel-hex-slot[data-upper="thuy"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="kham"] .wheel-hex-slot[data-lower="thuy"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="ly"] .wheel-hex-slot[data-upper="hoa"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="ly"] .wheel-hex-slot[data-lower="hoa"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="can2"] .wheel-hex-slot[data-upper="son"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="can2"] .wheel-hex-slot[data-lower="son"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="doai"] .wheel-hex-slot[data-upper="trach"] .wheel-hex-card,
.wheel-outer-ring[data-active-tri="doai"] .wheel-hex-slot[data-lower="trach"] .wheel-hex-card {
  opacity: 1 !important;
  transform: scale(1.14) translateY(-2px);
  border-color: var(--gold);
  transition: opacity 250ms ease, transform 250ms ease;
}

.wheel-hex-slot.is-match .wheel-hex-card::after,
.wheel-hex-slot.is-tri-match .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="thien"] .wheel-hex-slot[data-upper="thien"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="thien"] .wheel-hex-slot[data-lower="thien"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="dia"] .wheel-hex-slot[data-upper="dia"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="dia"] .wheel-hex-slot[data-lower="dia"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="hoa"] .wheel-hex-slot[data-upper="hoa"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="hoa"] .wheel-hex-slot[data-lower="hoa"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="thuy"] .wheel-hex-slot[data-upper="thuy"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="thuy"] .wheel-hex-slot[data-lower="thuy"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="phong"] .wheel-hex-slot[data-upper="phong"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="phong"] .wheel-hex-slot[data-lower="phong"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="loi"] .wheel-hex-slot[data-upper="loi"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="loi"] .wheel-hex-slot[data-lower="loi"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="son"] .wheel-hex-slot[data-upper="son"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="son"] .wheel-hex-slot[data-lower="son"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="trach"] .wheel-hex-slot[data-upper="trach"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="trach"] .wheel-hex-slot[data-lower="trach"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="can"] .wheel-hex-slot[data-upper="thien"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="can"] .wheel-hex-slot[data-lower="thien"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="khon"] .wheel-hex-slot[data-upper="dia"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="khon"] .wheel-hex-slot[data-lower="dia"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="chan"] .wheel-hex-slot[data-upper="loi"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="chan"] .wheel-hex-slot[data-lower="loi"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="ton"] .wheel-hex-slot[data-upper="phong"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="ton"] .wheel-hex-slot[data-lower="phong"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="kham"] .wheel-hex-slot[data-upper="thuy"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="kham"] .wheel-hex-slot[data-lower="thuy"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="ly"] .wheel-hex-slot[data-upper="hoa"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="ly"] .wheel-hex-slot[data-lower="hoa"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="can2"] .wheel-hex-slot[data-upper="son"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="can2"] .wheel-hex-slot[data-lower="son"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="doai"] .wheel-hex-slot[data-upper="trach"] .wheel-hex-card::after,
.wheel-outer-ring[data-active-tri="doai"] .wheel-hex-slot[data-lower="trach"] .wheel-hex-card::after {
  opacity: 1 !important;
  transition: opacity 250ms ease;
}

/* Lớp 2 (Vòng giữa): 8 quái Bát Quái đặt z-index: 20 rõ ràng phía trên vòng ngoài (z: 2-10) */
.wheel-middle-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 20;
  pointer-events: none;
  animation: wheel-spin-ccw 240s linear infinite;
  will-change: transform;
  transition: opacity 0.22s ease;
}

.wheel-tri-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 66px;
  height: 66px;
  margin-left: -33px;
  margin-top: -33px;
  transform: rotate(var(--tri-angle)) translateY(calc(-1 * var(--mid-radius)));
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  z-index: 21;
}

.wheel-tri-card {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 14px;
  background-color: #1a1713;
  border: 1px solid rgba(201, 143, 46, 0.34);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px;
}

.wheel-tri-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  border: 1.5px solid var(--gold);
  background: rgba(201, 143, 46, 0.16);
  opacity: 0;
  pointer-events: none;
}

.wheel-tri-han {
  font-family: var(--font-han);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.05;
}

.wheel-tri-name {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  line-height: 1.1;
}

.wheel-tri-slot:hover .wheel-tri-card,
.wheel-tri-slot:focus-visible .wheel-tri-card,
.wheel-tri-slot.is-active .wheel-tri-card {
  transform: scale(1.1);
}

.wheel-tri-slot:hover .wheel-tri-card::after,
.wheel-tri-slot:focus-visible .wheel-tri-card::after,
.wheel-tri-slot.is-active .wheel-tri-card::after {
  opacity: 1;
}

/* Lớp 3 (Tâm): Biểu tượng Âm Dương SVG xoay rất chậm (~360s/vòng) */
.wheel-center-core {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wheel-taiji-btn {
  width: 72px;
  height: 72px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease;
}

.wheel-taiji-btn:hover {
  transform: scale(1.08);
}

.wheel-taiji-svg {
  display: block;
}

.wheel-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  contain: layout paint;
}

.wheel-clear-btn {
  opacity: 0;
  pointer-events: none;
}

.wheel-clear-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.btn-link-subtle {
  background: none;
  border: none;
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: 0.84rem;
  min-height: 40px;
  padding: 8px 14px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.btn-link-subtle:hover {
  color: var(--gold);
}

.library-grid-section {
  padding-top: 28px;
  border-top: 1px solid var(--divider);
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: auto 2400px;
}

.hex-card {
  text-decoration: none;
}

.hex-card.is-dimmed-card,
.hex-grid[data-active-tri] .hex-card {
  opacity: 0.18;
}

.hex-grid[data-active-tri="thien"] .hex-card[data-upper="thien"],
.hex-grid[data-active-tri="thien"] .hex-card[data-lower="thien"],
.hex-grid[data-active-tri="dia"] .hex-card[data-upper="dia"],
.hex-grid[data-active-tri="dia"] .hex-card[data-lower="dia"],
.hex-grid[data-active-tri="hoa"] .hex-card[data-upper="hoa"],
.hex-grid[data-active-tri="hoa"] .hex-card[data-lower="hoa"],
.hex-grid[data-active-tri="thuy"] .hex-card[data-upper="thuy"],
.hex-grid[data-active-tri="thuy"] .hex-card[data-lower="thuy"],
.hex-grid[data-active-tri="phong"] .hex-card[data-upper="phong"],
.hex-grid[data-active-tri="phong"] .hex-card[data-lower="phong"],
.hex-grid[data-active-tri="loi"] .hex-card[data-upper="loi"],
.hex-grid[data-active-tri="loi"] .hex-card[data-lower="loi"],
.hex-grid[data-active-tri="son"] .hex-card[data-upper="son"],
.hex-grid[data-active-tri="son"] .hex-card[data-lower="son"],
.hex-grid[data-active-tri="trach"] .hex-card[data-upper="trach"],
.hex-grid[data-active-tri="trach"] .hex-card[data-lower="trach"],
.hex-grid[data-active-tri="can"] .hex-card[data-upper="thien"],
.hex-grid[data-active-tri="can"] .hex-card[data-lower="thien"],
.hex-grid[data-active-tri="khon"] .hex-card[data-upper="dia"],
.hex-grid[data-active-tri="khon"] .hex-card[data-lower="dia"],
.hex-grid[data-active-tri="chan"] .hex-card[data-upper="loi"],
.hex-grid[data-active-tri="chan"] .hex-card[data-lower="loi"],
.hex-grid[data-active-tri="ton"] .hex-card[data-upper="phong"],
.hex-grid[data-active-tri="ton"] .hex-card[data-lower="phong"],
.hex-grid[data-active-tri="kham"] .hex-card[data-upper="thuy"],
.hex-grid[data-active-tri="kham"] .hex-card[data-lower="thuy"],
.hex-grid[data-active-tri="ly"] .hex-card[data-upper="hoa"],
.hex-grid[data-active-tri="ly"] .hex-card[data-lower="hoa"],
.hex-grid[data-active-tri="can2"] .hex-card[data-upper="son"],
.hex-grid[data-active-tri="can2"] .hex-card[data-lower="son"],
.hex-grid[data-active-tri="doai"] .hex-card[data-upper="trach"],
.hex-grid[data-active-tri="doai"] .hex-card[data-lower="trach"] {
  opacity: 1;
}

.hex-card.is-filtered-out {
  display: none;
}

/* ================= 13. TRANG CHI TIẾT QUẺ (#/que/:id) & TRANG 404 ================= */
.detail-page-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 20px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--divider);
}

.detail-page-article {
  display: flex;
  flex-direction: column;
  gap: 24px;
  contain: layout style paint;
}

.detail-page-article .qkd-modal-hero,
.detail-page-article .qkd-modal-subgrid,
.detail-page-article .qkd-reading-sec,
.detail-page-article .detail-hao-list,
.detail-page-article .detail-hao-item {
  contain: layout style paint;
}

.detail-bottom-pager {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--divider);
}

.detail-pager-card {
  background-color: var(--surface);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.detail-pager-card.is-next {
  text-align: right;
}

.detail-pager-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.detail-pager-dir {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  color: var(--text-2);
}

.detail-pager-name {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold);
}

.history-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.guide-cta-row,
.notfound-actions {
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.notfound-box,
.empty-result-card {
  text-align: center;
  padding: 48px 24px;
}

.notfound-symbol {
  font-size: 3.4rem;
  color: var(--gold);
  line-height: 1;
  margin: 8px 0 16px;
}

/* Đảm bảo kích thước cảm ứng tối thiểu 40px cho tất cả nút tương tác */
.btn-secondary,
.btn-ghost,
.btn-sm,
.btn-chip,
.trigram-chip,
.btn-suggest-pill,
.btn-link-inline {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-link-inline {
  padding: 4px 8px;
}

/* ================= REDUCED MOTION & MOBILE (390PX) ================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ambient-particles {
    display: none !important;
  }
  .wheel-outer-ring,
  .wheel-middle-ring,
  .wheel-tri-upright,
  .wheel-taiji-svg {
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .main-nav,
  .btn-header-cta {
    display: none;
  }
  .drawer-toggle {
    display: inline-flex;
  }
  /* Thu nhỏ vòng quay theo vw trên tablet/mobile để không bao giờ tràn ngang */
  .hex-wheel {
    --wheel-size: min(92vw, 358px);
    --outer-radius: min(39vw, 150px);
    --mid-radius: min(21.5vw, 84px);
  }
  .wheel-guide-outer {
    width: calc(var(--outer-radius) * 2 + 34px);
    height: calc(var(--outer-radius) * 2 + 34px);
  }
  .wheel-guide-mid {
    width: calc(var(--mid-radius) * 2 + 44px);
    height: calc(var(--mid-radius) * 2 + 44px);
  }
  .wheel-guide-inner {
    width: 64px;
    height: 64px;
  }
  .wheel-hex-slot {
    width: 14px;
    height: 34px;
    margin-left: -7px;
    margin-top: -17px;
  }
  .wheel-hex-card {
    width: 13px;
    height: 32px;
    padding: 2px 1px;
    border-radius: 4px;
  }
  .wheel-hex-num {
    font-size: 0.42rem;
  }
  .wheel-hex-han {
    font-size: 0.46rem;
    letter-spacing: -1px;
  }
  .wheel-tri-slot {
    width: 44px;
    height: 44px;
    min-width: 42px;
    min-height: 42px;
    margin-left: -22px;
    margin-top: -22px;
  }
  .wheel-tri-card {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    gap: 1px;
    padding: 2px;
  }
  .wheel-tri-han {
    font-size: 0.88rem;
  }
  .wheel-tri-name {
    font-size: 0.46rem;
  }
  .wheel-taiji-btn {
    width: 46px;
    height: 46px;
  }
  .wheel-taiji-svg {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 640px) {
  .container-reading,
  .container-wide {
    padding: 0 16px;
  }
  .surface-card,
  .detail-card {
    padding: 24px 18px;
  }
  .qkd-pair-stage {
    padding: 20px 16px;
    gap: 18px;
  }
  .dong-tam-canchi {
    display: none;
  }
  .section-block {
    padding: 56px 0;
  }
  .hero-section {
    padding: 24px 0 40px;
  }
  .casting-view-section {
    padding: 14px 0 28px;
  }
  .casting-stage {
    gap: 16px;
  }
  .coin-stage {
    gap: 12px;
  }
  .header-inner {
    height: 58px;
    gap: 8px;
  }
  .brand-badge {
    width: 32px;
    height: 32px;
    font-size: 0.98rem;
  }
  .coins-pedestal {
    gap: 14px;
    padding: 34px 12px 14px;
  }
  .coin-stage-3d {
    width: 74px;
    height: 74px;
  }
  .coin-lifter,
  .coin {
    width: 70px;
    height: 70px;
  }
  .coin-shadow {
    width: 60px;
    height: 18px;
    margin-left: -30px;
  }
  .coin-impact-ring {
    width: 68px;
    height: 22px;
    margin-left: -34px;
  }
  .hao-slot {
    grid-template-columns: 62px 1fr 106px;
    gap: 10px;
  }
  .detail-page-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 20px;
  }
  .detail-nav-btns {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .qkd-bridge-arrow {
    transform: rotate(90deg);
  }
  .qkd-modal-subgrid,
  .detail-bottom-pager {
    grid-template-columns: 1fr;
  }
  .detail-pager-card.is-next {
    text-align: left;
  }
}



/* ================= ACCORDION BỘ CHỌN GIỜ 24H (PHẦN 5) ================= */
.custom-time-accordion {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
}

.custom-time-accordion.is-open {
  grid-template-rows: 1fr;
  margin-top: 6px;
  margin-bottom: 12px;
}

.custom-time-accordion-inner {
  overflow: hidden;
}

.custom-time-box {
  background: #1a1713;
  border: 1px solid var(--border-amber, rgba(201, 143, 46, 0.3));
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  max-width: 520px;
  width: 100%;
  box-sizing: border-box;
}

.time-spinners-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 520px;
  width: 100%;
}

.time-spin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.time-spin-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.time-spin-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold, #c98f2e);
  font-weight: 600;
  font-family: var(--font-sans);
}

.time-spin-controls {
  display: flex;
  align-items: center;
  background: #100e0b;
  border: 1px solid var(--border-amber, rgba(201, 143, 46, 0.3));
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  justify-content: space-between;
}

.time-spin-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border: none;
  background: transparent;
  color: var(--gold, #c98f2e);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
  user-select: none;
}

.time-spin-btn:hover {
  background: rgba(201, 143, 46, 0.15);
}

.time-spin-input {
  width: 100%;
  height: 40px;
  text-align: center;
  border: none;
  background: transparent;
  color: #f5eedf;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
}

.time-spin-input:focus {
  outline: 2px solid var(--gold, #c98f2e);
  outline-offset: -2px;
}

.time-canchi-live {
  font-size: 13px;
  color: #d4a359;
  margin-top: 10px;
  text-align: center;
  font-style: italic;
  font-family: var(--font-serif);
}

.time-actions-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.btn-time-now {
  min-height: 40px;
  padding: 6px 14px;
  border-radius: 9999px;
  border: 1px solid var(--border-amber, rgba(201, 143, 46, 0.4));
  background: transparent;
  color: var(--gold, #c98f2e);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-time-now:hover {
  background: rgba(201, 143, 46, 0.1);
}

.btn-time-done {
  min-height: 40px;
  padding: 6px 18px;
  border-radius: 10px;
  border: none;
  background: #c98f2e;
  color: #100e0b;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-time-done:hover {
  background: #dfa33a;
}

/* ================= XÁC THỰC CÂU HỎI & COUNTER ================= */
.question-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 20px;
  height: 20px;
  max-height: 20px;
  margin-top: 6px;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

.question-msg {
  font-family: var(--font-sans);
  font-size: 13px;
  color: #c98f2e;
  line-height: 20px;
  min-height: 20px;
  height: 20px;
  max-height: 20px;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.question-msg.hidden {
  display: none;
}

.question-counter {
  margin-left: auto;
  font-size: 12px;
  color: #9a9284;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-sans);
  min-width: 48px;
  text-align: right;
  contain: strict;
  user-select: none;
  pointer-events: none;
  line-height: 20px;
  height: 20px;
}

#btn-cast.is-disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

.hero-micro-note {
  font-size: 12px;
  color: #8a8070;
  text-align: center;
  margin: 8px 0 0;
  width: 100%;
  font-family: var(--font-sans);
  box-sizing: border-box;
}

/* ================= THU DỌC TRÊN MÀN HÌNH CHIỀU CAO THẤP (PHẦN 2) ================= */
@media (max-height: 720px) {
  .hero-section {
    padding: 12px 0 18px;
    min-height: calc(100vh - 60px);
    justify-content: flex-start;
  }
  .hero-head {
    margin-bottom: 12px;
  }
  .hero-clock-large {
    font-size: 2.35rem;
    line-height: 1;
  }
  .hero-subtitle {
    font-size: 0.95rem;
    line-height: 1.35;
    margin-bottom: 0;
  }
  .dong-tam-inline {
    margin-bottom: 8px;
  }
  .how-to-ask {
    margin-bottom: 8px;
  }
  .question-form-wrap {
    gap: 10px;
  }
  .input-textarea {
    min-height: 60px;
    padding: 10px 14px;
  }
  .question-box {
    padding-top: 18px;
    padding-bottom: 16px;
  }
  .hero-action-row {
    margin-top: 8px;
  }
  .btn-suggest-pill,
  .btn-primary-cta {
    height: 48px;
    min-height: 48px;
  }
  .hero-micro-note {
    margin-top: 4px;
    font-size: 11px;
  }
  .hero-stats-row {
    margin-top: 8px;
  }
}