/* con-giap: css riêng của trang, nạp sau shared/site.css */
/* Chọn con giáp (lưới 12 ô) → chọn kỳ (ngày/tuần/tháng/năm) → một thẻ kết quả */
.picker { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-xs); }
.picker a { text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); text-align: center; padding: var(--space-md) var(--space-xs) var(--space-sm); border-radius: var(--radius-card); border: 1px solid var(--color-rule); background: var(--color-paper-2); color: var(--color-ink); min-width: 0; transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.picker a:hover { border-color: var(--gold); transform: translateY(-2px); }
.picker a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.picker .g { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--space-2xs); border: 1px solid var(--gold-soft); border-radius: 50%; font-family: var(--font-display); font-size: 28px; line-height: 1; color: var(--color-gold-2); background: var(--color-paper); }
.picker b { font: 600 1.15rem/1.15 var(--font-display); }
.picker small { color: var(--soft); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-variant-numeric: tabular-nums; }
.picker a[aria-current="page"] { border-color: var(--burgundy); box-shadow: inset 0 0 0 1px var(--burgundy); background: var(--color-paper-2); }
.picker a[aria-current="page"] .g { background: var(--burgundy); border-color: var(--burgundy); color: var(--color-accent-ink); }
.picker a[aria-current="page"] b { color: var(--burgundy); }

.bar { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: flex-end; }
.bar .seg span { padding: 0 var(--space-md); }
.f-date input { width: 170px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: 500 15px var(--f-ui); padding: 0 var(--space-sm); }
.bar .today { height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--cell); color: var(--ink); font: 500 14px var(--f-ui); cursor: pointer; }

.card { background: var(--cell); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
.card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-sm) var(--space-lg); }
.card-head h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(22px, 3vw, 28px); line-height: 1.25; margin: 0; text-wrap: balance; }
.card-head p { margin: var(--space-2xs) 0 0; color: var(--soft); font-size: 14px; }
.rate { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-xs); }
.pips { display: flex; gap: var(--space-2xs); }
.pips i { width: 22px; height: 8px; border-radius: var(--radius-sm); background: var(--line); }
.pips i.on { background: currentColor; }
.lv { font-weight: 500; font-size: 14px; }
.lv-5, .lv-4 { color: var(--moc); } .lv-3 { color: var(--soft); } .lv-2 { color: var(--tho); } .lv-1 { color: var(--hoa); }
.notes { margin: 0; padding: var(--space-md) var(--space-md); background: var(--hl); border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: var(--space-xs); font-size: 15px; line-height: 1.6; }
.notes p { margin: 0; }
.aspects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); }
.aspects h3 { margin: 0 0 var(--space-2xs); font-size: 12px; font-weight: 600; color: var(--soft); }
.aspects p { margin: 0; font-size: 15px; line-height: 1.65; }
.advice { margin: 0; font-size: var(--text-md); border-top: var(--rule-hair) solid var(--color-gold); padding: var(--space-sm) 0 0; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-lg); padding-top: var(--space-md); border-top: 1px dashed var(--line); font-size: 14px; }
.facts dt { font-size: 12px; font-weight: 600; color: var(--soft); margin-bottom: var(--space-3xs); }
.facts dd { margin: 0; }
.facts .full { grid-column: 1 / -1; }

.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-xs); }
.day { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-xs); text-align: center; display: flex; flex-direction: column; gap: var(--space-2xs); font-size: 12.5px; min-width: 0; }
.day b { font-size: 13px; }
.day .d { font-variant-numeric: tabular-nums; color: var(--soft); }
.day .bar5 { height: 6px; border-radius: var(--radius-sm); background: currentColor; opacity: .85; }
.day.now { border-color: var(--tu); box-shadow: inset 0 0 0 1px var(--tu); }
.day .t { font-size: 12px; color: var(--soft); overflow-wrap: anywhere; }

.sao { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: flex-end; padding: var(--space-md) var(--space-md); border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.sao p { margin: 0; flex: 1 1 100%; font-size: 14px; color: var(--soft); }
.sao input { width: 96px; }
.sao button { height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-sm); border: 0; background: var(--tu); color: var(--cell); font: 600 14px var(--f-ui); cursor: pointer; }

@media (max-width: 900px) { .picker { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card { padding: var(--space-md); }
  .aspects { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .rate { align-items: flex-start; }
  .day { padding: var(--space-xs) var(--space-3xs); font-size: 12px; }
  .day .t { display: none; }
}

/* Trang riêng từng con giáp */
.cg { background: var(--cell); border: 1px solid var(--line); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-lg); min-width: 0; }
.cg-dau { display: flex; gap: var(--space-md); align-items: flex-start; }
.cg-g { display: grid; place-items: center; flex: none; width: 88px; height: 88px; border: 1px solid var(--gold); outline: 1px solid var(--gold-soft); outline-offset: 4px; border-radius: 50%; font-family: var(--font-display); font-size: 48px; line-height: 1; color: var(--burgundy); background: var(--color-paper); margin: 5px; }
.cg-dau h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(24px, 3.4vw, 32px); margin: 0; }
.cg-dau p { margin: var(--space-2xs) 0 0; font-size: 16px; line-height: 1.6; max-width: 70ch; }
.cg h3, .hop h3 { margin: 0 0 var(--space-sm); font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--line); padding-bottom: var(--space-2xs); }
.cg-dl, .cg-co-ban { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-lg); margin: 0; }
.cg-dl dt, .cg-co-ban dt { font-size: 12px; font-weight: 600; color: var(--soft); margin-bottom: var(--space-3xs); }
.cg-dl dd, .cg-co-ban dd { margin: 0; font-size: 15px; line-height: 1.6; }
.muted { color: var(--soft); font-size: 14px; }
.cg-cuon { position: relative; overflow-x: auto; max-height: 360px; overflow-y: auto; border: 1px solid var(--line); }
.cg-bang { border-collapse: collapse; width: 100%; font-size: 14px; }
.cg-bang th { position: sticky; top: 0; background: var(--cell); text-align: left; color: var(--soft); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cg-bang td { padding: 4px 10px; border-bottom: 1px solid var(--line); }
.cg-bang tr.chon td { background: var(--hl); font-weight: 600; }
.nam-btn { min-height: 32px; min-width: 64px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: 600 14px var(--f-ui); cursor: pointer; }
.nam-btn[aria-pressed="true"] { background: var(--tu); border-color: var(--tu); color: var(--cell); }
.cg-nam { margin-top: var(--space-sm); padding: var(--space-md); background: var(--hl); }
.cg-nam h4 { margin: 0 0 var(--space-xs); font-size: 16px; }
.cg-nam p { margin: var(--space-2xs) 0 0; font-size: 15px; line-height: 1.6; }
.cg-van, .hop { display: flex; flex-direction: column; gap: var(--space-md); }
.cg-van > h2, .hop > h2 { font-family: var(--f-display); font-weight: 600; font-size: 27px; margin: 0; }

/* Tra tuổi hợp */
.hop-form { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: flex-end; }
.hop-form input { width: 140px; }
#hop-kq { display: flex; flex-direction: column; gap: var(--space-md); }
#hop-kq:empty { display: none; }
.hop-hai { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.hop-hai > div { display: flex; flex-direction: column; gap: var(--space-3xs); padding: var(--space-md); border-top: 2px solid var(--ink); background: var(--cell); }
.hop-hai b { font-family: var(--f-display); font-weight: 600; font-size: 22px; }
.hop-md { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-sm); }
.md { border: 1px solid var(--line); border-top: 3px solid var(--soft); padding: var(--space-md); background: var(--cell); display: flex; flex-direction: column; gap: var(--space-xs); }
.md.m-tot { border-top-color: var(--moc); } .md.m-xau { border-top-color: var(--hoa); }
.md h4 { margin: 0; font-size: 16px; }
.md p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.md-muc { font-weight: 600; } .m-tot .md-muc { color: var(--moc); } .m-xau .md-muc { color: var(--hoa); }
.md-khuyen { border-top: 1px dashed var(--line); padding-top: var(--space-xs); }
@media (max-width: 640px) {
  .cg { padding: var(--space-md); }
  .cg-dl, .cg-co-ban, .hop-hai { grid-template-columns: minmax(0, 1fr); }
  .cg-g { width: 64px; height: 64px; font-size: 34px; }
}