/* Hallmark · dismissed F7 · .o-nho, .chi-so, .mui-ten and .chu-ky are one tấm family in the số chủ đạo results, told apart by their headings and numbers */
/* Số chủ đạo: dùng chung bảng màu tím của site. */
:root { --vang: oklch(56% 0.13 70); --xanh: var(--moc); --do: var(--color-accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --vang: oklch(82% 0.13 80); } }
:root[data-theme="dark"] { --vang: oklch(82% 0.13 80); }
.doan { font-size: 15.5px; line-height: 1.75; margin: 0; max-width: 78ch; }
.hai-cot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.ba-cot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.o-nho { padding: var(--space-md) var(--space-md); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); min-width: 0; }
.o-nho h3 { margin: 0 0 var(--space-xs); font-size: 13px; font-weight: 600; color: var(--tu); }
.o-nho p { margin: 0; font-size: 14.5px; line-height: 1.7; }
.o-nho ul { margin: 0; padding-left: var(--space-md); font-size: 14.5px; line-height: 1.75; }
.o-nho.manh { border-top: var(--rule-bar) solid var(--xanh); } .o-nho.yeu { border-top: var(--rule-bar) solid var(--do); }
.nghe { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.nghe span { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--hl); font-size: 13.5px; font-weight: 500; }
.ket { margin: 0; padding: var(--space-md) var(--space-md); border-radius: var(--radius-sm); background: var(--hl); font-size: 15px; line-height: 1.7; }

/* Số lớn */
.so-lon { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xs) var(--space-lg); align-items: center; }
.so-lon > :not(.so) { grid-column: 2; }
.so-lon .so { grid-row: 1 / span 4; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; background: var(--tu); color: var(--cell); font: 500 44px/1 var(--f-display); }
.so-lon .so.nho { font-size: 34px; }
.so-lon h2 { margin: 0; font-family: var(--f-display); font-size: 28px; }
.so-lon p { margin: 0; }
.cach-tinh { font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--soft); }
.chi-so { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-sm); }
.chi-so > div { padding: var(--space-md) var(--space-md); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); display: flex; flex-direction: column; gap: var(--space-2xs); }
.chi-so .nhan { font-size: 12px; font-weight: 600; color: var(--soft); }
.chi-so b { font: 500 28px/1.1 var(--f-display); color: var(--tu); }
.chi-so small { font-size: 13px; color: var(--soft); }
.chi-so p { margin: 0; font-size: 14px; line-height: 1.6; }

/* Biểu đồ ngày sinh */
.bd-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.luoi { display: grid; grid-template-columns: repeat(3, 76px); grid-template-rows: repeat(3, 76px); border: 2px solid var(--tu); border-radius: var(--radius-sm); overflow: hidden; }
.luoi div { display: grid; place-items: center; border: 1px solid var(--line); font: 500 22px var(--f-display); color: var(--tu); position: relative; }
.luoi div.trong { color: var(--line); font-weight: 500; font-size: 16px; }
.luoi div span { position: absolute; top: 4px; left: 6px; font: 600 12px var(--f-ui); color: var(--soft); letter-spacing: 0; }
.mui-ten { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); }
.mui-ten li { font-size: 14.5px; line-height: 1.6; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--paper); }
.mui-ten li.manh { border-top: var(--rule-bar) solid var(--xanh); } .mui-ten li.trong { border-top: var(--rule-bar) solid var(--do); }

/* Chu kỳ cá nhân */
.chu-ky { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--space-xs); }
.chu-ky div { text-align: center; padding: var(--space-sm) var(--space-2xs); border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--paper); font-size: 12.5px; }
.chu-ky div b { display: block; font: 500 22px var(--f-display); color: var(--tu); }
.chu-ky div.nay { background: var(--tu); border-color: var(--tu); color: var(--cell); }
.chu-ky div.nay b { color: var(--cell); }
.lv { padding: var(--space-md) var(--space-md); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.lv-dau { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-xs); }
.lv p { margin: 0; font-size: 14.5px; line-height: 1.65; }
.sao-diem { color: var(--vang); white-space: nowrap; }
.sao-diem i { color: var(--line); font-style: normal; }

/* Kết quả, cách tính, bài học */
.kq { display: flex; flex-direction: column; gap: var(--space-lg); }
.buoc ol, .cau-hoi { margin: 0; padding-left: var(--space-lg); font-size: 14.5px; line-height: 1.75; font-variant-numeric: tabular-nums; }
.buoc .muted { margin-top: var(--space-xs); }
.panel .muted a { color: var(--tu); font-weight: 600; }
.nam-dau { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-sm); flex-wrap: wrap; }
.nam-dau .f { width: min(100%, 260px); }

/* Bốn đỉnh cao */
.dinh { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); }
.dinh > div { padding: var(--space-md) var(--space-md); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); display: flex; flex-direction: column; gap: var(--space-2xs); }
.dinh > div.toi { border: 2px solid var(--tu); background: var(--hl); }
.dinh .nhan { font-size: 12px; font-weight: 600; color: var(--soft); }
.dinh b { font: 500 32px/1.1 var(--f-display); color: var(--tu); }
.dinh h3 { margin: 0; font-family: var(--f-display); font-size: 19px; }
.dinh p { margin: 0; font-size: 14px; line-height: 1.6; }
.dinh .moc { font-weight: 600; }

/* So sánh hai số chủ đạo */
.th-chon { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-md); align-items: end; }
.th-chon .va { font-family: var(--f-display); font-size: 28px; color: var(--tu); padding-bottom: var(--space-2xs); }
.th-ben { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.th-ben .phu { display: flex; gap: var(--space-xs); align-items: center; font-size: 13px; color: var(--soft); flex-wrap: wrap; }
.th-ben .phu input { height: 34px; font-size: 14px; }
.th-dau { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); flex-wrap: wrap; text-align: center; }
.th-dau .ben { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); }
.th-dau .ben b { font: 500 40px/1 var(--f-display); color: var(--tu); }
.vong { --p: 50; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--tu) calc(var(--p) * 1%), var(--line) 0); }
.vong span { width: 88px; height: 88px; border-radius: 50%; background: var(--cell); display: grid; place-items: center; font: 500 26px var(--f-display); color: var(--tu); }
.bang-hop { width: 100%; border-collapse: collapse; font-size: 14px; }
.bang-hop th, .bang-hop td { text-align: left; padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--line); }
.bang-hop th { font-size: 12px; color: var(--soft); font-weight: 600; }
.bang-hop td.so { font-variant-numeric: tabular-nums; font-weight: 600; }
.bang-hop a { color: var(--ink); font-weight: 600; }

/* Chọn số để xem ý nghĩa */
.chon-so { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chon-so button { min-width: 48px; height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--cell); color: var(--ink); font: 500 17px var(--f-display); cursor: pointer; }
.chon-so button[aria-pressed="true"] { background: var(--tu); border-color: var(--tu); color: var(--cell); }

@media (max-width: 860px) {
  .hero, .hai-cot, .ba-cot, .bd-wrap, .th-chon { grid-template-columns: minmax(0, 1fr); }
  .dinh { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-chon .va { text-align: center; padding: 0; }
  .chu-ky { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .so-lon .so { width: 84px; height: 84px; font-size: 34px; }
  .so-lon .so.nho { font-size: 26px; }
  .luoi { grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 64px); }
  .dinh { grid-template-columns: minmax(0, 1fr); }
}

/* Sứ mệnh, quy tắc tên, 12 tháng cá nhân */
.tieu-muc { margin: var(--space-md) 0 0; font-size: 15px; font-weight: 600; color: var(--soft); }
.quy-tac-ten { margin-top: var(--space-md); }
.quy-tac-ten summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; font-size: 14px; }
.quy-tac-ten li { font-size: 14px; line-height: 1.6; }
.thang-12 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-xs); }
.thang-12 > div { border: 1px solid var(--line); background: var(--paper); padding: var(--space-xs); text-align: center; display: flex; flex-direction: column; gap: 2px; }
.thang-12 span, .thang-12 small { font-size: 12px; color: var(--soft); }
.thang-12 b { font: 500 22px var(--f-display); color: var(--tu); }
.thang-12 .nay { border: 2px solid var(--tu); background: var(--hl); }
.nam-sau { border: 1px solid var(--gold-soft); border-radius: var(--radius-sm); }
@media (max-width: 640px) { .thang-12 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }