/* Trang chủ "Oriental Modern": hero có vòng 12 địa chi vẽ nét, lập lá số nhanh, kết quả ba hệ, sáu công cụ,
 * ô hôm nay, bài viết mới, hướng dẫn, phương pháp tính. Nền giấy ngà, nhịp thoáng, không phải dashboard dày đặc. */
.wrap { gap: 0; }

/* Hero */
.hero-tc { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; padding-block: var(--space-3xl) var(--space-2xl); }
.hero-chu { display: flex; flex-direction: column; gap: var(--space-lg); align-items: flex-start; }
.hero-chu h1 { font-size: var(--text-display); font-weight: 600; line-height: 1.04; max-width: 14ch; text-wrap: balance; }
.hero-chu .lede { max-width: 36em; }
.hero-nut { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); margin-top: var(--space-xs); }
.hero-hinh { margin: 0; justify-self: center; width: min(100%, 480px); aspect-ratio: 1; color: var(--gold); position: relative; }
.hero-hinh::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: var(--color-paper-2); }
.la-ban { position: relative; width: 100%; height: 100%; }
.la-ban .chi { font-family: var(--font-display); font-weight: 600; fill: var(--color-ink-2); }
.la-ban .que { stroke: var(--color-gold-2); }
.la-ban .am-duong { color: var(--burgundy); }
.la-ban .sao-nho { color: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .la-ban > g:first-of-type, .la-ban .chi, .la-ban .que { transform-origin: 50% 50%; animation: xoay 240s linear infinite; }
}
@keyframes xoay { to { transform: rotate(360deg); } }

/* Lập lá số nhanh: lời dẫn bên trái, biểu mẫu bên phải */
.lap-nhanh { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: start; padding-top: var(--section-gap-s); scroll-margin-top: calc(var(--header-h) + var(--space-md)); }
.lap-dau { display: flex; flex-direction: column; gap: var(--space-md); position: sticky; top: calc(var(--header-h) + var(--space-xl)); }
.lap-dau h2 { margin: 0; }
.lap-dau .ghi-chu { margin: 0; color: var(--color-muted); font-size: var(--text-sm); max-width: 40ch; padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.quick { padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); }
.quick form { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "gt lich" "ngay ngay" "gio gio" "noi tz" "nut nut" "phu phu"; gap: var(--space-md) var(--space-lg); align-items: end; }
.quick form > :nth-child(1) { grid-area: gt; } .quick form > :nth-child(2) { grid-area: lich; }
.quick form > :nth-child(3) { grid-area: ngay; } .quick .f-gio { grid-area: gio; } .quick button.go { grid-area: nut; width: 100%; }
.quick .date input { width: 76px; } .quick .date input.y { width: 100px; }
.quick .f-gio select { width: 100%; }
.quick .f-noi { grid-area: noi; } .quick .f-tz { grid-area: tz; } .quick .f-noi select, .quick .f-tz select { width: 100%; min-width: 0; }
.quick .nut-phu { grid-area: phu; display: flex; flex-wrap: wrap; gap: var(--space-xs); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }

/* Kết quả ba hệ */
.kq { display: flex; flex-direction: column; gap: var(--space-md); padding-top: var(--section-gap-s); scroll-margin-top: calc(var(--header-h) + var(--space-md)); }
.kq > h2 { margin: 0; }
.ho-so { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.hs { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg); border: 1px solid var(--color-rule); border-top-color: var(--gold); border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); text-decoration: none; min-width: 0; transition: border-color var(--dur-short) var(--ease-out); }
.hs:hover { border-color: var(--gold); }
.hs .nhan { font: 600 var(--text-xs)/1.3 var(--font-body); color: var(--color-muted); }
.hs b { font: 600 var(--text-2xl)/1.15 var(--font-display); }
.hs .en { font: 400 var(--text-sm) var(--font-body); color: var(--color-muted); }
.hs p { margin: 0; color: var(--color-ink-2); font-size: var(--text-sm); }
.hs .more { margin-top: auto; padding-top: var(--space-xs); color: var(--color-accent); font-weight: 600; font-size: var(--text-sm); }
.ky-zodiac { font-family: var(--font-symbol); }
.ky-tab { display: flex; flex-wrap: wrap; gap: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.ky-tab button { min-height: 44px; padding: 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--color-ink-2); font: 500 var(--text-md) var(--font-body); cursor: pointer; }
.ky-tab button:hover { color: var(--color-ink); border-bottom-color: var(--gold); }
.ky-tab button[aria-pressed="true"] { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.ky-info { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.du-doan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.lv-the { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); min-width: 0; }
.lv-the header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-xs); }
.lv-the h3 { margin: 0; }
.lv-the .diem { font: 600 var(--text-3xl)/1 var(--font-display); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.lv-the .diem small { font: 500 var(--text-sm) var(--font-body); color: var(--color-muted); }
.thanh { height: 6px; border-radius: 3px; background: var(--color-paper-3); overflow: hidden; }
.thanh i { display: block; height: 100%; background: var(--gold); }
.lv-the.thap .thanh i { background: var(--burgundy); } .lv-the.cao .thanh i { background: var(--forest); }
.lv-the .tong-hop { margin: 0; font-size: var(--text-md); line-height: 1.6; font-weight: 500; }
.nguon { margin: 0; padding: var(--space-sm) 0 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); border-top: 1px solid var(--color-rule); }
.nguon li { display: flex; flex-direction: column; gap: var(--space-2xs); font-size: var(--text-sm); line-height: 1.6; color: var(--color-ink-2); }
.nguon .dau { display: flex; justify-content: space-between; gap: var(--space-xs); color: var(--color-ink); font: 600 var(--text-sm) var(--font-body); }
.nguon .pt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.thanh.mini { height: 3px; margin-bottom: var(--space-3xs); }
.them { margin: 0; padding: var(--space-sm); background: var(--color-paper); border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: 1.6; }
.lv-the.rong { grid-column: 1 / -1; }
.lv-the .muc-nhan { font: 600 var(--text-sm) var(--font-body); color: var(--color-muted); }
.lv-the.cao .muc-nhan { color: var(--forest); } .lv-the.thap .muc-nhan { color: var(--burgundy); }
.lv-the .ap-dung { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.lv-the .loi-khuyen { margin: 0; font-size: var(--text-sm); line-height: 1.6; padding: var(--space-sm); background: var(--color-paper); border-radius: var(--radius-sm); }
.chi-tiet summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: 600 var(--text-sm) var(--font-body); color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.25em; }
.cach-tinh { margin: 0; color: var(--color-muted); font-size: var(--text-sm); max-width: 90ch; }

/* Đầu mục chung */
.muc-dau { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-lg) var(--space-2xl); align-items: end; }
.muc-dau h2 { margin: 0; max-width: 16ch; }

/* Sáu công cụ */
.cong-cu { padding-top: var(--section-gap); display: flex; flex-direction: column; gap: var(--space-xl); scroll-margin-top: var(--header-h); }
.cc-ds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.cc { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-sm); padding: 0 0 var(--space-md); overflow: hidden;
  background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); color: var(--color-ink); text-decoration: none;
  transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.cc:hover { border-color: var(--gold); transform: translateY(-2px); }
.cc:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.cc-hinh { margin: 0 0 var(--space-xs); border-bottom: 1px solid var(--color-rule); background: #ECE3D2; }
.cc-hinh img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
.cc:hover .cc-hinh img { transform: scale(1.03); }
.cc h3 { font: 600 var(--text-2xl)/1.15 var(--font-display); margin: 0; }
.cc h3, .cc p, .cc-di { margin-inline: var(--space-lg); }
.cc p { margin-block: 0; color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.6; }
.cc-di { margin-top: auto; padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); color: var(--color-accent); font-size: var(--text-sm); font-weight: 600; }
.cc-di::after { content: " →"; }

/* Tra cứu nhanh: dải năm thẻ ảnh */
.tra-nhanh { padding-top: var(--section-gap-s); display: flex; flex-direction: column; gap: var(--space-lg); }
.tra-nhanh h2 { margin: 0; font-size: clamp(1.75rem, 1vw + 1.3rem, 2.25rem); }
.tn-ds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-md); }
.tn-ds a { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-2); color: var(--color-ink); text-decoration: none; transition: border-color var(--dur-short) var(--ease-out); }
.tn-ds a:hover { border-color: var(--gold); }
.tn-ds a:hover span { color: var(--color-accent); }
.tn-ds img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--color-rule); }
.tn-ds span { padding: var(--space-sm) var(--space-md); font: 600 var(--text-xl)/1.2 var(--font-display); }

/* Hôm nay, bài viết mới, hướng dẫn */
.noi-bat { padding-top: var(--section-gap); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 3fr); gap: var(--gap-columns); align-items: stretch; }
.noi-bat h3 { font: 600 var(--text-2xl)/1.15 var(--font-display); margin: 0; }
.hom-nay { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg); background: var(--navy); color: #F3EDE2; border-radius: var(--radius-card); }
.hom-nay h3 { color: #F3EDE2; }
.hn-dau { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; }
.hn-duong { font-size: var(--text-sm); color: #CFC6B6; }
.hn-am { margin: 0; display: flex; align-items: baseline; gap: var(--space-sm); padding-bottom: var(--space-md); border-bottom: 1px solid #3A4B5B; }
.hn-am b { font: 600 4rem/0.9 var(--font-display); color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.hn-am span { color: #CFC6B6; font-size: var(--text-sm); }
.hn-ds { margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.hn-ds div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: var(--space-sm); font-size: var(--text-sm); }
.hn-ds dt { color: #B4AC9E; } .hn-ds dd { margin: 0; color: #F3EDE2; }
.hn-van { padding: var(--space-sm) var(--space-md); border: 1px solid #3A4B5B; border-radius: var(--radius-sm); font-size: var(--text-sm); color: #D5CDBF; }
.hn-van p { margin: 0; }
.hn-van p + p { margin-top: var(--space-xs); }
.hn-diem { display: flex; align-items: baseline; gap: var(--space-sm); }
.hn-diem b { font: 600 var(--text-3xl)/1 var(--font-display); color: var(--gold-soft); }
.hn-diem small { font: 500 var(--text-sm) var(--font-body); }
.hom-nay .link-vang { color: #F3EDE2; margin-top: auto; align-self: flex-start; }
.hom-nay .link-vang:hover { color: var(--gold-soft); text-decoration-color: var(--gold-soft); }
.bai-moi, .huong-dan { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
.bai-dau { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.bai-dau .link-vang { font-size: var(--text-sm); }
.bv-ds { list-style: none; margin: 0; padding: 0; }
.bv-ds li + li { border-top: 1px solid var(--color-rule); }
.bv { display: flex; flex-direction: column; gap: var(--space-2xs); padding-block: var(--space-sm); color: var(--color-ink); text-decoration: none; }
.bv h3 { font: 600 var(--text-xl)/1.2 var(--font-display); transition: color var(--dur-short) var(--ease-out); }
.bv:hover h3 { color: var(--color-accent); }
.bv .meta { font-size: var(--text-xs); color: var(--color-muted); }
.huong-dan ol { list-style: none; margin: 0; padding: 0; counter-reset: b; display: flex; flex-direction: column; gap: var(--space-md); }
.huong-dan li { counter-increment: b; display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: var(--space-sm); }
.huong-dan li::before { content: counter(b); grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--gold); border-radius: 50%; font: 600 1.05rem/1 var(--font-display); color: var(--color-gold-2); }
.huong-dan b { font-size: var(--text-md); }
.huong-dan span { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.6; }

/* Phương pháp */
.phuong-phap { margin-top: var(--section-gap); padding-block: var(--section-gap-s); display: flex; flex-direction: column; gap: var(--space-xl); border-top: 1px solid var(--color-rule); }
.pp-dau { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-md); }
.pp-dau h2 { margin: 0; }
.pp-dau .lede { max-width: 52ch; }
.pp-ds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
.pp-ds li { display: flex; flex-direction: column; gap: var(--space-xs); padding-top: var(--space-md); border-top: 1px solid var(--gold); }
.pp-ds h3 { font: 600 var(--text-xl)/1.2 var(--font-display); margin: 0; }
.pp-ds p { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.7; }
.phuong-phap > .note { align-self: center; text-align: center; }
.phuong-phap + .foot { margin-top: 0; }

@media (max-width: 70rem) {
  .noi-bat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .huong-dan { grid-column: 1 / -1; }
  .huong-dan ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 60rem) {
  .hero-tc { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-2xl) var(--space-lg); }
  .hero-hinh { width: min(78%, 380px); order: -1; }
  .lap-nhanh, .muc-dau { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .lap-dau { position: static; }
  .ho-so, .du-doan, .pp-ds { grid-template-columns: minmax(0, 1fr); }
  .cc-ds { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tn-ds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cong-cu, .noi-bat { padding-top: var(--section-gap-s); }
  .phuong-phap { margin-top: var(--section-gap-s); }
}
@media (max-width: 40rem) {
  .hero-chu h1 { font-size: clamp(2.25rem, 9vw, 2.75rem); }
  .hero-hinh { width: min(70%, 300px); }
  .quick { padding: var(--space-lg) var(--space-md); }
  .quick form { grid-template-columns: minmax(0, 1fr); grid-template-areas: "gt" "lich" "ngay" "gio" "noi" "tz" "nut" "phu"; }
  .quick .date input { width: 64px; } .quick .date input.y { width: 84px; }
  .quick .nut-phu .btn2 { flex: 1 1 100%; }
  .cc-ds, .noi-bat, .huong-dan ol { grid-template-columns: minmax(0, 1fr); }
  .cc h3, .cc p, .cc-di { margin-inline: var(--space-md); }
  .cc-hinh img { aspect-ratio: 2 / 1; }
  .tn-ds { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); }
  .tn-ds span { font-size: var(--text-lg); padding: var(--space-xs) var(--space-sm); }
  .hn-am b { font-size: 3.25rem; }
}