/* css/styles.css — Thần Số Học
   Bảng màu trầm, thanh lịch: nền mực đêm / than chì xanh, chữ ngà,
   điểm nhấn vàng đồng nhạt. Mobile-first. */

/* ─── Font Nunito — TỰ CHỨA (self-host), KHÔNG request CDN ngoài. Đây là điều
   kiện bắt buộc: cam kết "không gửi dữ liệu đi đâu" cấm mọi request ra host khác,
   kể cả Google Fonts (gửi IP người dùng cho Google). File woff2 nằm trong repo,
   tách subset Việt/Latin để tải tối thiểu. ─── */
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/nunito-vietnamese-400.woff2") format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/nunito-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/nunito-vietnamese-700.woff2") format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../assets/fonts/nunito-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../assets/fonts/nunito-vietnamese-800.woff2") format("woff2");
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../assets/fonts/nunito-latin-800.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ─── Hệ token: SƠN MÀI VIỆT — nền đen sơn mài ấm, son (đỏ mận) và DÁT VÀNG.
   Bảng màu văn hóa của tranh sơn mài / lá số cổ: sang, cổ điển, đáng tin — thay
   cho nền xanh ngọc hiện đại. Vàng = viền/nhãn/số; Đỏ mận = thanh tiêu đề/nhấn. ─── */
:root {
  color-scheme: dark;

  --color-bg: #17110d;             /* đen sơn mài ngả nâu đỏ */
  --color-bg-soft: #1f1611;
  --color-surface: #241a13;        /* mặt ô */
  --color-surface-raised: #2c2018;

  --color-ink: #f1e7d3;            /* chữ ngà/kem trên nền lacquer */
  --color-ink-muted: #c7b58f;
  --color-ink-faint: #948060;

  --color-accent: #cca451;         /* dát vàng */
  --color-accent-strong: #e3c377;  /* vàng sáng */
  --color-accent-soft: rgba(204, 164, 81, 0.12);
  --color-accent-border: rgba(204, 164, 81, 0.34);

  --color-red: #a3312f;            /* son / đỏ mận */
  --color-red-strong: #c24b42;
  --color-red-soft: rgba(163, 49, 47, 0.18);
  --color-red-border: rgba(163, 49, 47, 0.5);

  --color-error: #e0857a;
  --color-error-bg: rgba(224, 133, 122, 0.12);

  --color-border: rgba(204, 164, 81, 0.22);   /* viền vàng mảnh */
  --color-border-soft: rgba(204, 164, 81, 0.11);

  --font-sans: "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-serif: var(--font-sans);

  --radius-md: 10px;               /* góc bớt tròn cho cảm giác "văn bản" ngay ngắn */
  --radius-lg: 14px;
  --shadow-card: 0 14px 34px rgba(0, 0, 0, 0.5);

  --touch-min: 52px;
}

/* Tùy chọn NỀN KEM (đúng lá số cổ trong ảnh) — khi người dùng chọn data-theme="light". */
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f3ecdb; --color-bg-soft: #ece2cd;
  --color-surface: #fbf6ec; --color-surface-raised: #fffbf3;
  --color-ink: #2a2018; --color-ink-muted: #5c4f3d; --color-ink-faint: #8a795f;
  --color-accent: #9a7b2e; --color-accent-strong: #7c6220;
  --color-accent-soft: rgba(154,123,46,0.12); --color-accent-border: rgba(154,123,46,0.34);
  --color-red: #932420; --color-red-strong: #7d1c19;
  --color-red-soft: rgba(147,36,32,0.10); --color-red-border: rgba(147,36,32,0.4);
  --color-error: #a5261e; --color-error-bg: rgba(165,38,30,0.08);
  --color-border: rgba(147,36,32,0.22); --color-border-soft: rgba(120,90,40,0.14);
  --shadow-card: 0 8px 24px rgba(90,60,20,0.12);
}

/* Cỡ chữ gốc 18px — cả giao diện phóng theo (mọi kích thước dùng rem). */
html {
  font-size: 112.5%;
}

* {
  box-sizing: border-box;
}

/* Thuộc tính [hidden] LUÔN thắng — chặn bug rule display của class (vd
   .qr-placeholder display:flex) đè lên khiến phần tử vẫn hiện dù đã ẩn. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: radial-gradient(ellipse at top, var(--color-bg-soft) 0%, var(--color-bg) 55%);
  color: var(--color-ink);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

.page {
  max-width: 920px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
}

/* Phần nhập (hero giới thiệu + form) giữ cột hẹp cho gọn, dù trang rộng ra ở
   desktop — form 2 ô mà kéo dài cả 920px thì trống trải, kém chuyên nghiệp. */
.hero,
.form-card {
  max-width: 640px;
  margin-inline: auto;
}

/* ---------- Hero ---------- */

.hero {
  text-align: center;
  margin-bottom: 2.5rem;
}

.hero-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
}

.hero-title {
  margin: 0 0 0.85rem;
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 5vw + 0.5rem, 2.7rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--color-ink);
}

.hero-desc {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--color-ink-muted);
  font-size: 1rem;
}

/* ---------- Form ---------- */

.form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-card);
}

#numerology-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ---------- Form hai người (trang Tương hợp) ---------- */
#compat-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.compat-person {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1rem 1.2rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.compat-person legend {
  padding: 0 0.5rem;
  font-weight: 700;
  color: var(--color-accent);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

/* ---------- Lối vào "Buổi sáng của bạn" trên trang chính ---------- */
.morning-entry {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  max-width: 640px;
  margin: 0 auto 1.4rem;
  padding: 0.85rem 1.1rem;
  text-decoration: none;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.morning-entry:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.morning-entry:active { transform: translateY(1px); }
.morning-entry-icon { font-size: 1.55rem; line-height: 1; }
.morning-entry-body { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.morning-entry-eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  font-weight: 700;
}
.morning-entry-main { font-size: 0.94rem; color: var(--color-ink-muted); line-height: 1.5; }
.morning-entry-cta { color: var(--color-accent); font-size: 1.3rem; font-weight: 700; }

/* ---------- Khối nghi thức (tâm thái + việc nhỏ) trong thẻ chủ đề ngày ---------- */
.ritual {
  margin: 0.7rem auto 0;
  max-width: 40ch;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
}
.ritual-line { margin: 0; display: flex; flex-direction: column; gap: 0.12rem; }
.ritual-key {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-accent);
  font-weight: 700;
}
.ritual-val { color: var(--color-ink-muted); font-size: 0.95rem; line-height: 1.5; }

.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.field label {
  font-size: 0.88rem;
  color: var(--color-ink-muted);
  letter-spacing: 0.01em;
}

.field input {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.8rem 0.95rem;
  font-size: 1rem;
  color: var(--color-ink);
  font-family: var(--font-sans);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input::placeholder {
  color: var(--color-ink-faint);
}

.field input:focus {
  outline: none;
  border-color: var(--color-accent-border);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.field input[aria-invalid="true"] {
  border-color: var(--color-error);
}

.field-error {
  margin: 0;
  min-height: 1.1em;
  font-size: 0.85rem;
  color: var(--color-error);
}

.btn-primary,
.btn-secondary {
  border: none;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.85rem 1.5rem;
  transition: transform 0.12s ease, filter 0.15s ease, background 0.15s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-accent-strong), var(--color-accent));
  color: #1a1608;
  align-self: stretch;
}

.btn-primary:hover {
  filter: brightness(1.08);
}

.btn-primary:active {
  transform: translateY(1px);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--color-accent-border);
  color: var(--color-accent-strong);
}

.btn-secondary:hover {
  background: var(--color-accent-soft);
}

/* ---------- Kết quả ---------- */

.result-section {
  margin-top: 2.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.4rem;
  box-shadow: var(--shadow-card);
}

.card-label {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
}

.card-number {
  margin: 0 0 0.3rem;
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1;
  color: var(--color-accent-strong);
}

.card-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--color-ink);
}

.card-text {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: 0.96rem;
}

/* Thẻ Life Path nổi bật */

.card-lifepath {
  position: relative;
  text-align: center;
  background: linear-gradient(180deg, var(--color-surface-raised), var(--color-surface));
  border-color: var(--color-accent-border);
  padding: 2.75rem 1.5rem 2.25rem;
}

.card-app-tag {
  position: absolute;
  top: 0.9rem;
  left: 1.25rem;
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  font-weight: 600;
}

.card-lifepath .card-number {
  font-size: clamp(4rem, 22vw, 6.5rem);
}

.card-lifepath .card-title {
  font-size: 1.4rem;
}

.card-lifepath .card-text {
  max-width: 52ch;
  margin: 0 auto;
  font-size: 1.02rem;
}

/* Số master hiển thị dạng kép, vd 11/2 */

.num-main {
  font-size: 1em;
}

.num-sub {
  font-size: 0.42em;
  vertical-align: 0.12em;
  color: var(--color-ink-muted);
  margin-left: 0.05em;
}

.card-question {
  margin: 1.1rem auto 0;
  max-width: 48ch;
  font-style: italic;
  color: var(--color-ink-faint);
  font-size: 0.95rem;
}

/* ---------- Bài đọc hồ sơ (dệt các con số) ---------- */

.reading {
  width: 100%;
  max-width: 720px;      /* cột đọc: giữ dòng ngắn dễ đọc dù trang rộng */
  margin: 1.4rem auto 0.4rem;
  padding: 1.75rem 1.6rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.reading-heading {
  font-size: 1.35rem;
  color: var(--color-accent-strong);
  margin: 0;
}

.reading-sub {
  margin: 0.35rem 0 0;
  color: var(--color-ink-faint);
  font-size: 0.9rem;
}

.reading-body {
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.reading-block {
  padding-left: 0.9rem;
  border-left: 2px solid var(--color-accent-border);
}

.reading-block-title {
  font-size: 1.02rem;
  color: var(--color-accent);
  margin: 0 0 0.4rem;
  letter-spacing: 0.01em;
}

.reading-block-text {
  margin: 0;
  color: var(--color-ink);
  font-size: 1.02rem;
  line-height: 1.75;
}

.reading-question {
  border-left-color: var(--color-red-border);
}

.reading-question .reading-block-text {
  font-style: italic;
  color: var(--color-ink-muted);
}

.detail-heading {
  margin: 1.8rem 0 0.4rem;
  font-size: 1.1rem;
  color: var(--color-ink-muted);
  text-align: center;
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.card-grid .card-number {
  font-size: 2.6rem;
}

.card-grid .card-title {
  font-size: 1.05rem;
}

@media (min-width: 600px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 860px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Chú thích quy ước ---------- */

.convention-note {
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-ink-faint);
  max-width: 50ch;
  margin-inline: auto;
}

/* ---------- Chia sẻ ---------- */

.share-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  padding-top: 0.5rem;
}

.share-feedback {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.88rem;
  color: var(--color-accent-strong);
}

/* ---------- Ủng hộ ---------- */

.support-section {
  margin-top: 3rem;
  padding: 1.75rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.support-qr {
  display: flex;
  justify-content: center;
}

.qr-image {
  width: auto;
  height: auto;
  max-width: 230px;
  max-height: 380px;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
}

.qr-placeholder {
  margin: 0;
  width: 148px;
  height: 148px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  border: 1px dashed var(--color-accent-border);
  border-radius: 10px;
  background: var(--color-bg);
  color: var(--color-ink-faint);
  font-size: 0.78rem;
  line-height: 1.4;
  text-align: center;
}

.support-text {
  margin: 0;
  max-width: 46ch;
  color: var(--color-ink-muted);
  font-size: 0.95rem;
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border-soft);
  text-align: center;
  font-size: 0.82rem;
  color: var(--color-ink-faint);
}

.site-footer p {
  margin: 0.35rem 0;
  max-width: 56ch;
  margin-inline: auto;
}

.privacy-note {
  color: var(--color-ink-faint);
}

.footer-links a {
  color: var(--color-accent);
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* ---------- Animation kết quả ---------- */

.result-section {
  animation: fade-slide-in 0.5s ease both;
}

@keyframes fade-slide-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .result-section {
    animation: none;
  }

  .btn-primary:active {
    transform: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   Module hưu trí (huu-tri.html)
   Dùng lại toàn bộ token màu/typography ở :root phía trên.
   ───────────────────────────────────────────────────────────── */

.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1rem;
}
@media (min-width: 520px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

.field-optional {
  color: var(--color-ink-faint);
  font-weight: 400;
  font-size: 0.85em;
}

.field-radio {
  border: none;
  padding: 0;
  margin: 0 0 1.1rem;
}
.field-radio legend {
  padding: 0;
  margin-bottom: 0.45rem;
  color: var(--color-ink-muted);
  font-size: 0.92rem;
}
.radio-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 1.4rem;
  cursor: pointer;
}
.radio-inline input { accent-color: var(--color-accent); }

/* Dòng thời gian cửa sổ nghỉ */
.timeline {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--color-accent-strong);
  margin: 0.3rem 0 0.6rem;
  letter-spacing: 0.01em;
}

/* Hộp trạng thái đủ / không đủ điều kiện */
.trang-thai {
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.trang-thai.dat {
  border-color: var(--color-accent-border);
  background: var(--color-accent-soft);
}
.trang-thai.khong-dat {
  border-color: rgba(227, 154, 143, 0.4);
  background: var(--color-error-bg);
}
.trang-thai.canh-bao {
  border-color: rgba(227, 154, 143, 0.55);
  background: var(--color-error-bg);
}
.trang-thai-title {
  margin: 0 0 0.4rem;
  font-weight: 600;
  font-size: 1.02rem;
}
.trang-thai.khong-dat .trang-thai-title,
.trang-thai.canh-bao .trang-thai-title { color: var(--color-error); }
.trang-thai.dat .trang-thai-title { color: var(--color-accent-strong); }
.trang-thai-dong {
  margin: 0.4rem 0 0;
  font-size: 0.93rem;
  color: var(--color-ink-muted);
  line-height: 1.55;
}

/* Số tiền lớn */
.tien-lon {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--color-accent-strong);
  margin: 0.2rem 0 1rem;
  line-height: 1.2;
  word-break: break-word;
}

/* Ba khoản trợ cấp */
.khoan-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--color-border-soft);
}
.khoan-ten {
  margin: 0;
  font-weight: 600;
  font-size: 0.96rem;
}
.khoan-mota {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--color-ink-faint);
  line-height: 1.5;
}
.khoan-tien {
  margin: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-strong);
  font-weight: 600;
}
.khoan-tien-khong { color: var(--color-ink-faint); font-weight: 400; }

/* Khối công thức bung ra */
.cong-thuc {
  margin-top: 1rem;
  border-top: 1px solid var(--color-border-soft);
  padding-top: 0.8rem;
}
.cong-thuc summary {
  cursor: pointer;
  color: var(--color-accent);
  font-size: 0.92rem;
}
.cong-thuc ul {
  margin: 0.7rem 0 0;
  padding-left: 1.1rem;
  color: var(--color-ink-muted);
  font-size: 0.88rem;
  line-height: 1.65;
}
.cong-thuc li { margin-bottom: 0.35rem; }

/* Bảng so sánh — luôn cuộn ngang được trên điện thoại */
.bang-scroll { overflow-x: auto; margin-top: 0.6rem; }
.bang-sosanh {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.bang-sosanh th,
.bang-sosanh td {
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--color-border-soft);
  white-space: nowrap;
}
.bang-sosanh th {
  color: var(--color-ink-faint);
  font-weight: 500;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bang-sosanh td { font-variant-numeric: tabular-nums; }
.dong-noi-bat {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-weight: 600;
}
.o-khong-dat { color: var(--color-error); }

/* Hỏi đáp */
.giai-dap {
  border-top: 1px solid var(--color-border-soft);
  padding: 0.8rem 0;
}
.giai-dap summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.98rem;
}
.giai-dap .card-text { margin-top: 0.6rem; font-size: 0.92rem; }

.danh-sach {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
  color: var(--color-ink-muted);
  font-size: 0.92rem;
  line-height: 1.65;
}
.danh-sach li { margin-bottom: 0.45rem; }

/* Disclaimer riêng của module hưu trí — phải nổi hơn footer */
.disclaimer-box {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.05rem;
  background: var(--color-bg-soft);
  color: var(--color-ink-muted);
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 1.4rem 0 0.6rem;
}
.phien-ban {
  color: var(--color-ink-faint);
  font-size: 0.82rem;
  margin: 0;
}

/* Lời dặn đặt ngay trên kết quả hưu trí — nổi nhưng ấm, không phải cảnh báo đỏ */
.luu-y-dau {
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-ink);
  padding: 1rem 1.15rem;
  margin: 0 0 1.3rem;
  font-size: 0.95rem;
  line-height: 1.65;
}

/* ═════════════════════════════════════════════════════════════
   Nâng cấp giao diện v2 (24/07/2026)
   Thêm mới, không sửa quy tắc cũ. Mọi animation đều tôn trọng
   prefers-reduced-motion (tắt hoàn toàn ở khối cuối).
   ═════════════════════════════════════════════════════════════ */

/* ---------- Thanh điều hướng nhẹ giữa các trang ---------- */

.site-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 0 auto 1.6rem;
  padding-bottom: 0.2rem;
  font-size: 0.86rem;
}
.site-nav a {
  color: var(--color-ink-muted);
  text-decoration: none;
  padding: 0.3rem 0.1rem;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.site-nav a:hover { color: var(--color-accent-strong); }
.site-nav a[aria-current="page"] {
  color: var(--color-accent-strong);
  border-bottom-color: var(--color-accent);
}

/* ---------- Thẻ Ngày Cá Nhân — điểm nhấn mới, đổi mỗi ngày ---------- */

.card-personalday {
  position: relative;
  text-align: center;
  overflow: hidden;
  border-color: var(--color-accent-border);
  /* nền chi tiết đặt ở tầng v3 cuối file (dùng token accent) — chỉ giữ layout ở đây */
  padding: 2.4rem 1.5rem 2rem;
}
.card-personalday .card-app-tag {
  position: static;
  display: block;
  margin-bottom: 0.9rem;
  color: var(--color-accent);
  letter-spacing: 0.1em;
}
.card-personalday .card-number {
  font-size: clamp(3.4rem, 17vw, 5rem);
}
.card-personalday .card-title { font-size: 1.28rem; }
.card-personalday .card-text {
  max-width: 46ch;
  margin: 0 auto;
}
.card-personalday .card-question {
  color: var(--color-ink-muted);
}
.personalday-note {
  margin: 1.2rem auto 0;
  max-width: 44ch;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--color-ink-faint);
}

/* ---------- Thẻ trong lưới: nhấc nhẹ khi rê chuột ---------- */

.card-grid .card {
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
@media (hover: hover) {
  .card-grid .card:hover {
    transform: translateY(-3px);
    border-color: var(--color-accent-border);
  }
}

/* ---------- Kết quả xuất hiện mượt, so le ---------- */

.result-section:not([hidden]) > * {
  animation: card-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.result-section:not([hidden]) > *:nth-child(1) { animation-delay: 0.02s; }
.result-section:not([hidden]) > *:nth-child(2) { animation-delay: 0.08s; }
.result-section:not([hidden]) > *:nth-child(3) { animation-delay: 0.14s; }
.result-section:not([hidden]) > *:nth-child(4) { animation-delay: 0.2s; }
.result-section:not([hidden]) > *:nth-child(n+5) { animation-delay: 0.24s; }

@keyframes card-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Con số lớn hiện lên có nhịp */
.card-personalday .card-number,
.card-lifepath .card-number {
  animation: number-pop 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.18s;
}
@keyframes number-pop {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- Truy cập bằng bàn phím: viền focus rõ ràng ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent-strong);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Footer gọn hơn ---------- */

.site-footer {
  margin-top: 3.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--color-border-soft);
  text-align: center;
}
.footer-links a { color: var(--color-accent); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

/* ---------- Tôn trọng người tắt hiệu ứng ---------- */

@media (prefers-reduced-motion: reduce) {
  .result-section:not([hidden]) > *,
  .card-personalday .card-number,
  .card-lifepath .card-number {
    animation: none;
  }
  .card-grid .card:hover { transform: none; }
}

/* ═════════════════════════════════════════════════════════════
   Tầng DỄ DÙNG cho người ít rành công nghệ (v3, 24/07/2026)
   Nút to, ô lịch to, tương phản cao, vùng chạm ≥ 52px.
   ═════════════════════════════════════════════════════════════ */

/* Ô nhập & lịch bấm: to, rõ, dễ chạm */
.field input,
.field select {
  min-height: var(--touch-min);
  font-size: 1.05rem;
  padding: 0.85rem 1rem;
}
.field input[type="date"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
}
/* Biểu tượng lịch của trình duyệt: nhuộm theo màu nhấn cho dễ thấy */
.field input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.75;
  cursor: pointer;
  filter: saturate(0);
}

/* Dòng hướng dẫn nhỏ dưới nhãn */
.field-hint {
  margin: 0.1rem 0 0;
  font-size: 0.82rem;
  color: var(--color-ink-faint);
}

/* Nút lớn — hành động chính phải to, chạm dễ */
.btn-lg {
  min-height: var(--touch-min);
  font-size: 1.1rem;
  padding: 0.95rem 1.6rem;
}

/* Nút chính: nền ngọc bích, CHỮ TRẮNG (tương phản đủ trên nền sáng lẫn tối) */
.btn-primary {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-strong));
  color: #ffffff;
}
.btn-primary:hover { filter: brightness(1.06); }

/* Nút Chia sẻ: to, đầy chiều ngang, có mũi tên gửi đi */
.btn-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  max-width: 22rem;
}
.btn-share-icon {
  font-size: 1.2em;
  line-height: 1;
  transform: translateY(-1px);
}

/* Thẻ nổi (Ngày Cá Nhân, Đường Đời): nền pha nhẹ ngọc bích để tách khỏi thẻ thường */
.card-personalday,
.card-lifepath {
  background:
    radial-gradient(120% 80% at 50% -10%, var(--color-accent-soft), transparent 62%),
    var(--color-surface);
}

/* Nhãn & con số: đậm hơn cho dễ đọc trên nền sáng */
.card-label { color: var(--color-accent-strong); }
.card-number { color: var(--color-accent-strong); }

/* Thanh điều hướng: mục đang xem rõ hơn */
.site-nav a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

/* Liên kết trong thân bài: gạch chân rõ để người ít rành CN nhận ra bấm được */
.card-text a,
.privacy-note a {
  color: var(--color-accent-strong);
  text-decoration: underline;
}

/* Vùng ủng hộ trên nền sáng: viền rõ hơn */
.support-section { background: var(--color-surface); }

/* Ảnh QR trên nền sáng cần khung để không chìm */
.qr-image { border: 1px solid var(--color-border); }

/* ═════════════════════════════════════════════════════════════
   v4 (24/07/2026) — Nunito, nền tối, 3 ô chọn ngày, thẻ chia khối,
   responsive iPhone + desktop chuyên nghiệp.
   ═════════════════════════════════════════════════════════════ */

/* Nunito: tiêu đề & số đậm hơn cho ra "chất" */
.hero-title { font-weight: 800; letter-spacing: -0.01em; }
.card-title { font-weight: 700; }
.card-number { font-weight: 800; letter-spacing: -0.02em; }
.btn-primary, .btn-secondary { font-weight: 700; }

/* Nhãn trường (span thay label) */
.field-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-ink-muted);
}

/* ---------- 3 ô chọn Ngày / Tháng / Năm ---------- */
.date-select {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.3fr;
  gap: 0.5rem;
}
.date-select select {
  min-height: var(--touch-min);
  width: 100%;
  padding: 0.7rem 0.6rem;
  font-size: 1.02rem;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  -webkit-appearance: none;
  appearance: none;
  /* mũi tên xuống tự vẽ (data-uri, không request ngoài) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234cc79b' stroke-width='3' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  padding-right: 1.9rem;
  cursor: pointer;
}
.date-select select:focus {
  outline: none;
  border-color: var(--color-accent-border);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.date-select select[aria-invalid="true"] { border-color: var(--color-error); }

/* Ô "chọn nhanh từ lịch" (native date input) — bấm ra lịch HĐH hoặc gõ thẳng */
.date-quick-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.55rem;
  flex-wrap: wrap;
}
.date-quick-hint { font-size: 0.82rem; color: var(--color-ink-faint); }
.date-quick {
  min-height: var(--touch-min);
  padding: 0.5rem 0.7rem;
  font-size: 1rem;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color-scheme: dark;
}
:root[data-theme="light"] .date-quick { color-scheme: light; }
.date-quick:focus {
  outline: none;
  border-color: var(--color-accent-border);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* ---------- Thẻ hero (Ngày Cá Nhân + Đường Đời): chia khối rõ ---------- */
.card-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1.4rem 1.8rem;
}
/* Eyebrow: viên pill nhỏ thay dòng chữ trơ */
.card-eyebrow {
  margin: 0 0 0.2rem;
  display: inline-block;
  padding: 0.28rem 0.8rem;
  border-radius: 999px;
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-border);
  color: var(--color-accent-strong);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.card-hero .card-number { margin: 0; }
.card-hero .card-label {
  margin: 0;
  color: var(--color-ink-faint);
  font-size: 0.72rem;
}
.card-hero .card-title { margin: 0.1rem 0 0.2rem; }
.card-hero .card-text {
  max-width: 42ch;
  margin: 0 auto;
  color: var(--color-ink-muted);
}

/* ---------- Hàng chip từ khóa ---------- */
.card-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.2rem 0 0.4rem;
}
.chip {
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Câu hỏi tự vấn: khối trích dẫn có gạch bên ---------- */
.card-question {
  position: relative;
  margin: 0.6rem auto 0;
  max-width: 42ch;
  padding: 0.7rem 0 0.7rem 1rem;
  border-left: 3px solid var(--color-accent-border);
  text-align: left;
  font-style: italic;
  color: var(--color-ink-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Ghi chú nhỏ dưới thẻ Ngày Cá Nhân */
.personalday-note {
  margin: 0.8rem auto 0;
  max-width: 40ch;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--color-ink-faint);
}

/* ---------- Responsive ---------- */

/* iPhone tai thỏ: đệm theo vùng an toàn để không dính viền/thanh dưới */
.page {
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
  padding-bottom: max(3rem, env(safe-area-inset-bottom));
}

/* Điện thoại nhỏ (≤360px, iPhone SE): thu gọn số hero, ô ngày co lại đẹp */
@media (max-width: 360px) {
  .card-hero .card-number { font-size: clamp(3rem, 20vw, 4rem); }
  .date-select { gap: 0.35rem; }
  .date-select select { padding: 0.6rem 0.4rem; padding-right: 1.6rem; font-size: 0.95rem; }
  .page { padding-top: 1.6rem; }
}

/* Máy tính bàn: hai thẻ hero đứng cạnh nhau cho cân, đỡ dài trang */
@media (min-width: 760px) {
  .result-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 1.25rem;
  }
  .card-personalday, .card-lifepath { margin: 0; }
  /* Mọi khối KHÔNG phải hai thẻ hero đều trải hết chiều ngang, nằm dưới cặp hero.
     (Thiếu .reading + .detail-heading ở đây là nguyên nhân bố cục lộn xộn cũ.) */
  .reading,
  .detail-heading,
  .card-grid,
  .convention-note,
  .share-row,
  #trangthai-box,
  .result-section > .disclaimer-box,
  .result-section > .phien-ban { grid-column: 1 / -1; }
}

/* Không bao giờ cuộn ngang cả trang */
html, body { overflow-x: hidden; max-width: 100%; }

/* Dòng "đây là con số gì" — giải thích ngắn cho người mới, dưới nhãn mỗi thẻ */
.card-meaning {
  margin: 0 0 0.2rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-ink-muted);
}
.card-hero .card-meaning {
  max-width: 34ch;
  margin-inline: auto;
  text-align: center;
}
.card-grid .card-meaning { min-height: 2.4em; } /* căn đều chiều cao các thẻ lưới */

/* ---------- Bát Tự: sơ đồ 4 trụ + biểu đồ ngũ hành ---------- */
.tru-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  width: 100%;
  margin: 0.4rem 0 0.2rem;
}
.tru-col {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-bg);
  padding: 0.8rem 0.4rem 0.7rem;
  text-align: center;
}
.tru-label {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  font-weight: 700;
}
.tru-can {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-accent-strong);
  line-height: 1.1;
}
.tru-chi {
  margin: 0.1rem 0 0.4rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.1;
}
.tru-nguhanh {
  margin: 0;
  font-size: 0.68rem;
  color: var(--color-ink-faint);
}
@media (max-width: 360px) {
  .tru-can { font-size: 1.25rem; }
  .tru-chi { font-size: 1.1rem; }
  .tru-nguhanh { font-size: 0.6rem; }
}

.nguhanh-chart {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.8rem 0;
}
.nh-row {
  display: grid;
  grid-template-columns: 3.2rem 1fr 1.6rem;
  align-items: center;
  gap: 0.6rem;
}
.nh-name { font-weight: 700; font-size: 0.9rem; }
.nh-track {
  height: 12px;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  overflow: hidden;
}
.nh-bar {
  height: 100%;
  border-radius: 999px;
  min-width: 2px;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.nh-bar-empty { min-width: 0; }
.nh-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--color-ink-muted);
}

/* ═════════════════════════════════════════════════════════════
   v5 SƠN MÀI (24/07/2026) — khung "lá số" sang trọng: son đỏ + dát vàng
   trên nền đen sơn mài. Áp cho toàn site.
   ═════════════════════════════════════════════════════════════ */

/* Nền có chiều sâu + quầng vàng mờ như hoa văn lá số */
body {
  background:
    radial-gradient(1100px 520px at 50% -8%, var(--color-accent-soft), transparent 60%),
    radial-gradient(ellipse at top, var(--color-bg-soft) 0%, var(--color-bg) 60%);
}

/* Nút chính: SON ĐỎ MẬN, chữ ngà, viền vàng — như con dấu son */
.btn-primary {
  background: linear-gradient(135deg, var(--color-red-strong), var(--color-red));
  color: #fbf1dc;
  border: 1px solid var(--color-accent-border);
  box-shadow: 0 6px 18px rgba(163, 49, 47, 0.28);
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary {
  border: 1px solid var(--color-accent-border);
  color: var(--color-accent-strong);
}

/* Nhãn & tiêu đề: dát vàng */
.hero-eyebrow { color: var(--color-accent-strong); letter-spacing: 0.24em; }
.card-label { color: var(--color-accent-strong); }
.card-number { color: var(--color-accent-strong); }
.card-title { color: var(--color-ink); }
.tien-lon, .timeline { color: var(--color-accent-strong); }

/* Thẻ: viền vàng mảnh + vạch vàng trên đỉnh (cảm giác khung lá số) */
.card {
  border: 1px solid var(--color-border);
  position: relative;
}
.card-hero {
  border: 1px solid var(--color-accent-border);
  box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(204, 164, 81, 0.08);
}
.card-hero::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--color-border-soft);
  border-radius: calc(var(--radius-md) - 4px);
  pointer-events: none;
}

/* Eyebrow-pill: con dấu SON ĐỎ, chữ vàng — như thanh tên cung trong lá số */
.card-eyebrow {
  background: var(--color-red);
  border: 1px solid var(--color-red-border);
  color: #f3d9a8;
  letter-spacing: 0.1em;
}

/* Chip từ khóa: viền vàng, nền trong */
.chip {
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-border);
  color: var(--color-accent-strong);
}

/* Câu hỏi tự vấn: gạch bên SON ĐỎ cho tương phản với vàng */
.card-question { border-left-color: var(--color-red-border); }

/* Nav: mục đang xem gạch chân vàng */
.site-nav a[aria-current="page"] {
  color: var(--color-accent-strong);
  border-bottom-color: var(--color-accent);
}

/* ---------- Bát Tự: mỗi trụ = một ô lá số (thanh tiêu đề SON ĐỎ) ---------- */
.tru-col {
  border: 1px solid var(--color-accent-border);
  background: var(--color-surface);
  padding: 0;
  overflow: hidden;
}
.tru-label {
  margin: 0;
  padding: 0.4rem 0.2rem;
  background: var(--color-red);
  color: #f3d9a8;
  border-bottom: 1px solid var(--color-red-border);
  font-size: 0.7rem;
}
.tru-can { color: var(--color-accent-strong); margin-top: 0.7rem; }
.tru-chi { color: var(--color-ink); }
.tru-nguhanh { padding: 0 0.2rem 0.7rem; }

/* Khối trạng thái hưu trí "đủ điều kiện": viền vàng thay vì xanh */
.trang-thai.dat { border-color: var(--color-accent-border); background: var(--color-accent-soft); }
.trang-thai.dat .trang-thai-title { color: var(--color-accent-strong); }

/* Khoản tiền hưu trí: dát vàng */
.khoan-tien { color: var(--color-accent-strong); }
.dong-noi-bat { background: var(--color-accent-soft); color: var(--color-accent-strong); }

/* Disclaimer: gạch bên son đỏ (nghiêm túc) */
.disclaimer-box { border-left-color: var(--color-red-border); }

/* Con dấu góc trang trí nhẹ cho form-card lớn (tùy chọn, tinh tế) */
.form-card { border: 1px solid var(--color-border); }

/* Lá số Bát Tự dạng SVG (một thẻ, tải file được) */
.laso-svg {
  width: 100%;
  margin: 0.3rem auto 0;
  /* Lá số dày chữ: trên màn hẹp KHÔNG co nhỏ tới mức không đọc được, mà cho
     cuộn ngang trong khung riêng (không làm cả trang cuộn ngang). */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.laso-svg svg {
  display: block;
  width: 100%;
  height: auto;
  /* giữ tối thiểu để chữ bên trong luôn đủ lớn; hẹp hơn thì cuộn ngang */
  min-width: 680px;
}
.laso-actions {
  display: flex;
  justify-content: center;
  margin: 0.9rem 0 0.2rem;
}
.laso-actions .btn-secondary { min-height: 46px; padding: 0.6rem 1.3rem; }

/* Bảng chi tiết lá số (definition list) */
.chi-tiet {
  margin: 0.6rem 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
}
.chi-tiet dt {
  color: var(--color-accent-strong);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}
.chi-tiet dd {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
@media (max-width: 460px) {
  .chi-tiet { grid-template-columns: 1fr; gap: 0.15rem 0; }
  .chi-tiet dd { margin-bottom: 0.6rem; }
}

/* Trang Bát Tự: lá số là ngôi sao, luôn một cột, căn giữa (không chia 2 cột) */
#battu-result { display: block; }
#battu-result .laso-svg { max-width: 880px; margin: 0.3rem auto 0; }

/* ═══ Màn chủ "Buổi sáng của bạn" — DESKTOP-FIRST ═══ */
.today-wrap { margin-top: 1rem; }
.today-date {
  text-align: center;
  color: var(--color-accent-strong);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}
/* Câu thơ theo lứa tuổi — nét chiêm nghiệm, giữ xuống dòng của câu */
.today-tho {
  margin: 0 auto 1.2rem;
  max-width: 34ch;
  text-align: center;
  font-style: italic;
  color: var(--color-ink-muted);
  font-size: 1rem;
  line-height: 1.75;
  white-space: pre-line;
}
.today-tho:empty { display: none; }
/* Desktop: 2 cột (bản mệnh | chủ đề ngày) */
.today-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
.today-menh { padding: 1.8rem 1.6rem; }
.today-day { padding: 2rem 1.6rem; }

.menh-block { margin-top: 1.1rem; }
.menh-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.menh-label {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}
.menh-good { color: #8ecb98; }
.menh-avoid { color: var(--color-error); }
.swatch-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem 0.32rem 0.35rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-size: 0.86rem;
  color: var(--color-ink);
}
.swatch-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.menh-detail {
  margin: 1.3rem 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1rem;
  border-top: 1px solid var(--color-border-soft);
  padding-top: 1rem;
}
.menh-detail dt { color: var(--color-accent-strong); font-weight: 700; font-size: 0.86rem; white-space: nowrap; }
.menh-detail dd { margin: 0; color: var(--color-ink-muted); font-size: 0.9rem; }

.today-note {
  margin: 1.4rem auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: 0.82rem;
  color: var(--color-ink-faint);
  line-height: 1.55;
}
.today-actions {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}
.today-actions .btn-secondary { text-decoration: none; }
.btn-text {
  background: none; border: none; cursor: pointer;
  color: var(--color-ink-faint);
  text-decoration: underline;
  font-family: var(--font-sans);
  font-size: 0.9rem;
}

/* Mobile: xếp dọc */
@media (max-width: 720px) {
  .today-grid { grid-template-columns: 1fr; }
  .menh-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
  .menh-cols { grid-template-columns: 1fr; }
}

/* Màn chủ — các mục hồ sơ đầy đủ */
.hoso-section { margin-top: 1.5rem; }
.hoso-more { margin: 1rem 0 0; }
.hoso-more a { color: var(--color-accent-strong); text-decoration: none; font-weight: 700; }
.hoso-more a:hover { text-decoration: underline; }

.nam-tuoi {
  margin: 0.6rem 0 1rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-border);
  color: var(--color-ink);
  font-size: 0.9rem;
  line-height: 1.55;
}
.nam-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 700px) { .nam-grid { grid-template-columns: 1fr; } }
.nam-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  background: var(--color-bg);
}
.nam-head { margin: 0 0 0.4rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; }
.nam-year { font-size: 1.3rem; font-weight: 800; color: var(--color-accent-strong); font-family: var(--font-serif); }
.nam-num { font-size: 0.78rem; color: var(--color-ink-faint); font-weight: 700; }
.nam-tag {
  font-size: 0.7rem; font-weight: 700; color: var(--color-red-strong);
  background: var(--color-red-soft); border: 1px solid var(--color-red-border);
  padding: 0.1rem 0.5rem; border-radius: 999px;
}
.nam-title { margin: 0 0 0.3rem; font-weight: 700; color: var(--color-ink); }
.nam-text { margin: 0; font-size: 0.86rem; color: var(--color-ink-muted); line-height: 1.55; }

.so-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.7rem; }
@media (max-width: 640px) { .so-grid { grid-template-columns: repeat(3, 1fr); } }
.so-cell {
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.9rem 0.4rem;
  background: var(--color-bg);
}
.so-num { margin: 0; font-family: var(--font-serif); font-size: 1.9rem; font-weight: 800; color: var(--color-accent-strong); line-height: 1; }
.so-label { margin: 0.3rem 0 0; font-size: 0.74rem; color: var(--color-ink-muted); font-weight: 700; }
.so-note { grid-column: 1 / -1; margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--color-ink-faint); text-align: center; }
#hn-laso-svg { max-width: 640px; margin: 0.5rem auto 0; }