/**
 * XEM TUỔI SINH CON (/xem-tuoi-sinh-con/) — 09/10/2026. Nạp SAU hoptuoi.css (dùng chung khung trang, khung nhập, ô ngày,
 * vòng điểm, ô tiêu chí, thẻ bảng tra .ht-*); file này chỉ thêm phần riêng: nhân vật bố / mẹ / bé, chọn kiểu xem, các con
 * đã có, bục 3 năm đẹp, lưới 12 năm, chi tiết hai cột Bố–con / Mẹ–con, dải ngày Tết.
 * Màu chỉ lấy từ biến của cute.css (--theme-*, --boi-pink/mint/butter/sky/apricot/peach, --boi-sticker-ink).
 */
body.page-template-page-xem-tuoi-sinh-con .page-header, body.page-template-page-xem-tuoi-sinh-con .nevo-breadcrumb { display: none !important; }

/* ---------- Giao diện trung tính (chủ site 09/10/2026: không emoji, không hình hoạt hình) ---------- */
/* Đầu khung: một dải màu dịu, bỏ các chấm tròn trang trí */
.sc-tool-head { background: linear-gradient(115deg, color-mix(in srgb, var(--boi-sky) 70%, var(--theme-bg-elevated)), color-mix(in srgb, var(--boi-apricot) 70%, var(--theme-bg-elevated)) 50%, color-mix(in srgb, var(--boi-pink) 70%, var(--theme-bg-elevated))); padding-top: 30px; }
/* Ô Bố / Mẹ: chữ "Bố" / "Mẹ" trên vòng màu; nhập xong đổi thành tên con giáp (Dậu, Tý…) */
.sc-av { width: 72px; height: 72px; }
.sc-mono, .sc .ht-who-giap { position: absolute; inset: 0; display: grid; place-items: center; font: 900 1.3rem/1 var(--boi-font-head); color: var(--boi-sticker-ink); letter-spacing: -.01em; }
.sc .ht-who-giap { font-size: 1.4rem; animation: none; }
.ht-who-av.is-known .sc-mono { opacity: 0; }
/* Dấu nối giữa hai ô */
.sc-plus { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--theme-bg-elevated);
    border: 2px solid var(--theme-border); box-shadow: var(--boi-card-shadow); font: 900 1.4rem/1 var(--boi-font-head); color: var(--theme-gold-text); }
/* Ô tròn tên con giáp trong kết quả: nền màu hành của mệnh, chữ nâu */
.sc-chi-b { display: grid; place-items: center; border-radius: 50%; background: var(--el); color: var(--boi-sticker-ink); font: 900 1.05rem/1 var(--boi-font-head); flex: none; }
/* Danh sách lợi ích: chấm nhỏ thay emoji */
.sc-perks li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--theme-gold-text); flex: none; }

/* ---------- Kiểu xem: hai thẻ chọn ---------- */
.sc-mode { grid-column: 1 / -1; margin: 6px 0 0; padding: 0; border: 0; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sc-mode-h, .sc-sibs-h { grid-column: 1 / -1; float: left; width: 100%; padding: 0; margin: 0 0 2px; text-align: center; font: 900 1.05rem/1.3 var(--boi-font-head); color: var(--theme-text-strong); }
.sc-sibs-h small { display: block; font: 600 .84rem/1.4 var(--boi-font-body); color: var(--theme-text-soft); }
.sc-mode-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--boi-r-lg, 24px); cursor: pointer;
    background: var(--theme-bg-elevated); border: 2px solid var(--theme-border); transition: border-color .15s, box-shadow .15s, background .15s; }
.sc-mode-opt input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--theme-gold-text); cursor: pointer; }
.sc-mode-opt:has(input:checked) { border-color: var(--theme-gold-text); background: color-mix(in srgb, var(--boi-apricot) 45%, var(--theme-bg-elevated)); box-shadow: var(--boi-card-shadow); }
.sc-mode-opt:has(input:focus-visible) { outline: 3px solid var(--theme-gold-text); outline-offset: 3px; }
.sc-mode-opt input:focus-visible { outline: none; }
.sc-mode-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-mode-t strong { font: 900 1rem/1.25 var(--boi-font-head); color: var(--theme-text-strong); }
.sc-mode-t small { font-size: .82rem; line-height: 1.4; color: var(--theme-text-soft); }

/* Ô ngày sinh của bé + các con đã có */
.sc-kid, .sc-sibs { grid-column: 1 / -1; margin: 0; padding: 16px 18px; border-radius: var(--boi-r-lg, 24px); text-align: center; min-width: 0; }
.sc-kid { --ht-c: var(--boi-pink); background: color-mix(in srgb, var(--boi-pink) 30%, var(--theme-bg-elevated)); border: 2px dashed var(--boi-pink); }
.sc-kid[hidden] { display: none; }
.sc-kid .ht-dmy, .sc-sib .ht-dmy { max-width: 420px; margin: 0 auto; }
.sc-sibs { --ht-c: var(--boi-mint); border: 1px solid var(--theme-border); background: var(--theme-bg-elevated); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.sc-sib { min-width: 0; }
.sc-sib[hidden] { display: none; }
.sc-add { grid-column: 1 / -1; justify-self: center; padding: 8px 16px; border-radius: 999px; border: 1px dashed var(--theme-border-strong); background: transparent;
    color: var(--theme-text-strong); font: 800 .9rem/1 var(--boi-font-body); cursor: pointer; }
.sc-add:hover { border-color: var(--theme-gold-text); color: var(--theme-gold-text); }
.sc-add:focus-visible { outline: 3px solid var(--theme-gold-text); outline-offset: 2px; }
.sc-add[hidden] { display: none; }
.sc-sib:only-of-type, .sc-sibs:has(#scAnh2Wrap[hidden]) .sc-sib { grid-column: 1 / -1; }

/* ---------- Kết quả: gia đình + bục 3 năm đẹp ---------- */
.sc-fam { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; margin: 0 auto 6px; }
.sc-fam-p { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-width: 96px; }
.sc-fam-g { width: 58px; height: 58px; margin-bottom: 4px; font-size: 1.1rem; }
.sc-fam-p strong { font: 900 1rem/1.2 var(--boi-font-head); color: var(--theme-text-strong); }
.sc-fam-p span:last-child { font-size: .8rem; color: var(--theme-text-soft); }
.sc-fam-plus { font: 900 1.4rem/1 var(--boi-font-head); color: var(--theme-gold-text); }
.sc-best-h { margin: 18px 0 12px; text-align: center; font: 900 1.2rem/1.3 var(--boi-font-head); color: var(--theme-text-strong); }
.sc-podium { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 900px; margin-inline: auto; align-items: end; }
.sc-pod-b { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 12px 14px; border-radius: var(--boi-r-lg, 24px); cursor: pointer;
    background: color-mix(in srgb, var(--boi-mint) 55%, var(--theme-bg-elevated)); border: 2px solid var(--boi-mint); color: var(--theme-text-strong); font-family: var(--boi-font-body);
    transition: transform .15s, box-shadow .15s; }
.sc-pod.is-first .sc-pod-b { padding-top: 22px; padding-bottom: 20px; background: color-mix(in srgb, var(--boi-butter) 70%, var(--theme-bg-elevated)); border-color: var(--theme-gold-text); box-shadow: var(--boi-card-shadow); }
.sc-pod-b:hover { transform: translateY(-2px); box-shadow: var(--boi-card-shadow-hover); }
.sc-pod-b:focus-visible { outline: 3px solid var(--theme-gold-text); outline-offset: 3px; }
.sc-pod-b .sc-pod-rank { padding: 2px 10px; border-radius: 999px; font-size: .74rem; font-weight: 900; background: var(--theme-bg-elevated); color: var(--theme-gold-text); }
.sc-pod-b strong { margin-top: 6px; font: 900 1.7rem/1.1 var(--boi-font-head); }
.sc-pod.is-first .sc-pod-b strong { font-size: 2.1rem; }
.sc-pod-b span { font-size: .84rem; color: var(--theme-text-secondary); }
.sc-pod-b b { margin-top: 2px; font: 900 1.05rem/1.2 var(--boi-font-head); color: var(--theme-gold-text); }
.sc-pod-b small { font-size: .76rem; color: var(--theme-text-soft); }
.sc-none { margin: 14px auto 0; max-width: 640px; text-align: center; line-height: 1.6; color: var(--theme-text-secondary); }

/* ---------- Lưới 12 năm ---------- */
.sc-years { margin-top: 16px; padding: 18px 20px 20px; border-radius: var(--boi-r-xl, 32px); background: var(--theme-bg-elevated); border: 1px solid var(--theme-border); }
.sc-years-h { margin: 0 0 14px; font: 900 1.15rem/1.3 var(--boi-font-head); color: var(--theme-text-strong); }
.sc-years-h small { margin-left: 6px; font: 600 .82rem var(--boi-font-body); color: var(--theme-text-soft); }
.sc-ygrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.sc-ycard { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px 12px; text-align: center; cursor: pointer;
    border-radius: var(--boi-r-md, 18px); border: 2px solid var(--theme-border); background: var(--theme-bg-elevated); color: var(--theme-text-strong); font-family: var(--boi-font-body);
    transition: border-color .15s, box-shadow .15s, transform .15s; }
.sc-ycard.is-good { --sc-t: var(--boi-mint); }
.sc-ycard.is-mid { --sc-t: var(--boi-butter); }
.sc-ycard.is-hard { --sc-t: var(--boi-pink); }
.sc-ycard { background: color-mix(in srgb, var(--sc-t) 30%, var(--theme-bg-elevated)); }
.sc-ycard:hover { transform: translateY(-2px); border-color: var(--sc-t); }
.sc-ycard:focus-visible { outline: 3px solid var(--theme-gold-text); outline-offset: 2px; }
.sc-ycard[aria-pressed="true"] { border-color: var(--theme-gold-text); box-shadow: var(--boi-card-shadow); }
.sc-ycard.is-best { border-color: var(--sc-t); }
.sc-ycard-best { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 2px 9px; border-radius: 999px; font-size: .7rem; font-weight: 900; white-space: nowrap;
    background: var(--theme-gold-text); color: var(--theme-bg-elevated); }
.sc-ycard-y { margin-top: 4px; font: 900 1.25rem/1.2 var(--boi-font-head); }
.sc-ycard-y small { display: block; font: 700 .68rem/1.2 var(--boi-font-body); color: var(--theme-gold-text); }
.sc-ycard-cc { font-size: .76rem; line-height: 1.3; color: var(--theme-text-secondary); }
.sc-bar { width: 86%; height: 7px; margin: 6px 0 2px; border-radius: 999px; background: var(--theme-border); overflow: hidden; }
.sc-bar i { display: block; height: 100%; border-radius: inherit; background: var(--theme-gold-text); }
.sc-ycard-sc { font-size: .78rem; color: var(--theme-text-secondary); }
.sc-ycard-sc b { font: 900 1rem/1 var(--boi-font-head); color: var(--theme-text-strong); }
.sc-ycard-meta { font-size: .7rem; line-height: 1.35; color: var(--theme-text-soft); }
.sc-ycard-meta em { font-style: normal; font-weight: 800; color: var(--theme-danger); }

/* ---------- Chi tiết một năm / một bé ---------- */
.sc-detail { margin-top: 16px; padding: 20px; border-radius: var(--boi-r-xl, 32px); background: var(--theme-bg-elevated); border: 1px solid var(--theme-border); box-shadow: var(--boi-card-shadow); scroll-margin-top: 90px; }
.sc-detail:focus { outline: none; }
.sc-detail-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.sc-detail-g { width: 64px; height: 64px; font-size: 1.3rem; }
.sc-detail-head h3 { margin: 0 0 4px; font: 900 1.3rem/1.25 var(--boi-font-head); color: var(--theme-text-strong); }
.sc-detail-head p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--theme-text-secondary); }
.sc-detail-sc { display: flex; flex-direction: column; align-items: center; min-width: 110px; padding: 10px 14px; border-radius: var(--boi-r-md, 18px); color: var(--boi-sticker-ink); }
.sc-detail-sc.is-good { background: var(--boi-mint); }
.sc-detail-sc.is-mid { background: var(--boi-butter); }
.sc-detail-sc.is-hard { background: var(--boi-pink); }
.sc-detail-sc strong { font: 900 2rem/1 var(--boi-font-head); }
.sc-detail-sc span { font-weight: 800; font-size: .8rem; }
.sc-detail-sc em { font-style: normal; font-weight: 800; font-size: .8rem; text-align: center; }
.sc-sib-tags { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sc-sib-tag { padding: 5px 12px; border-radius: 999px; font-size: .84rem; font-weight: 800; color: var(--boi-sticker-ink); background: var(--boi-butter); }
.sc-sib-tag.is-hop { background: var(--boi-mint); }
.sc-sib-tag.is-ky { background: var(--boi-pink); }
.sc-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.sc-pair { display: grid; gap: 10px; align-content: start; min-width: 0; }
.sc-pair-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 4px; font: 900 1.1rem/1.3 var(--boi-font-head); color: var(--theme-text-strong); }
.sc-pair-h b { font: 900 1.4rem/1 var(--boi-font-head); color: var(--theme-gold-text); }
.sc-pair-h small { font-size: .8rem; color: var(--theme-text-soft); }
.sc-tile .ht-tile-t { font-size: .98rem; }
.sc-tile .ht-dots i { width: 9px; height: 9px; }
.sc-tile .ht-tile-body { padding-left: 72px; }

/* ---------- Tuổi của một bé ---------- */
.sc-kid-hero { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 14px; flex-wrap: wrap; }
.sc-kid-t { text-align: left; }
.sc-kid-k { margin: 0; font-size: .86rem; font-weight: 700; color: var(--theme-text-soft); }
.sc-kid-t .ht-verdict { max-width: none; text-align: left; font-size: 1.4rem; }
.sc-kid-cc { margin: 4px 0 0; font-weight: 700; color: var(--theme-text-secondary); }
.sc-tet-note { margin: 14px auto 0; max-width: 680px; text-align: center; line-height: 1.6; color: var(--theme-text-secondary); }
.sc-tet-warn { margin: 16px auto 0; max-width: 760px; padding: 14px 16px; border-radius: var(--boi-r-lg, 24px); text-align: center; line-height: 1.55;
    background: color-mix(in srgb, var(--boi-butter) 60%, var(--theme-bg-elevated)); color: var(--theme-text-strong); }
.sc-both { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.sc-both-c { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 12px; border-radius: var(--boi-r-md, 18px); color: var(--boi-sticker-ink); }
.sc-both-c.is-good { background: var(--boi-mint); }
.sc-both-c.is-mid { background: var(--boi-butter); }
.sc-both-c.is-hard { background: var(--boi-pink); }
.sc-both-c small { font-size: .78rem; font-weight: 700; }
.sc-both-c strong { font: 900 1.1rem/1.2 var(--boi-font-head); }
.sc-both-c b { font: 900 1.2rem/1.2 var(--boi-font-head); }
.sc-both-c em { font-style: normal; font-size: .8rem; font-weight: 800; }

/* ---------- Bảng tra trong bài ---------- */
.sc-crit-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sc-ts-table td small { color: var(--theme-text-soft); }
.sc-ts-table td.is-good { background: color-mix(in srgb, var(--boi-mint) 55%, transparent); font-weight: 700; }
.sc-ts-table td.is-hard { background: color-mix(in srgb, var(--boi-pink) 55%, transparent); }
.sc-tet-list { list-style: none; margin: 16px 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.sc-tet-list li { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 12px 8px; text-align: center; border-radius: var(--boi-r-md, 18px);
    background: var(--theme-bg-elevated); border: 1px solid var(--theme-border); }
.sc-tet-list strong { font: 900 1.1rem/1.2 var(--boi-font-head); color: var(--theme-text-strong); }
.sc-tet-list span { font-size: .76rem; line-height: 1.35; color: var(--theme-text-secondary); }
.sc-tet-list em { margin-top: 4px; padding: 2px 9px; border-radius: 999px; font-style: normal; font-size: .76rem; font-weight: 800; color: var(--boi-sticker-ink); background: var(--boi-butter); }

/* ---------- Nền tối: pastel pha nhẹ vào nền nâu (pha 30–70% như nền sáng thì thành xám đục) ---------- */
:root:not([data-theme="light"]) .sc-tool-head { background: linear-gradient(115deg, var(--boi-sky), var(--boi-apricot) 50%, var(--boi-pink)); }
:root:not([data-theme="light"]) .sc-ycard { background: color-mix(in srgb, var(--sc-t) 12%, var(--theme-bg-elevated)); }
:root:not([data-theme="light"]) .sc-pod-b { background: color-mix(in srgb, var(--boi-mint) 14%, var(--theme-bg-elevated)); }
:root:not([data-theme="light"]) .sc-pod.is-first .sc-pod-b { background: color-mix(in srgb, var(--boi-butter) 16%, var(--theme-bg-elevated)); }
:root:not([data-theme="light"]) .sc-tet-warn { background: color-mix(in srgb, var(--boi-butter) 14%, var(--theme-bg-elevated)); }
:root:not([data-theme="light"]) .sc-mode-opt:has(input:checked) { background: color-mix(in srgb, var(--boi-apricot) 14%, var(--theme-bg-elevated)); }
:root:not([data-theme="light"]) .sc-kid { background: color-mix(in srgb, var(--boi-pink) 12%, var(--theme-bg-elevated)); }
:root:not([data-theme="light"]) .sc-ts-table td.is-good { background: color-mix(in srgb, var(--boi-mint) 14%, transparent); }
:root:not([data-theme="light"]) .sc-ts-table td.is-hard { background: color-mix(in srgb, var(--boi-pink) 14%, transparent); }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
    .sc-ygrid, .sc-tet-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sc-pairs { grid-template-columns: 1fr; }
}
@media (min-width: 641px) and (max-width: 1099px) { .sc-crit-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-crit-cards li:nth-child(4) { grid-column: auto; } }

/* ---------- Điện thoại ---------- */
@media (max-width: 768px) {
    .sc-mode, .sc-sibs { grid-template-columns: 1fr; }
    .sc-mode, .sc-kid, .sc-sibs { margin-top: 14px; }
    /* Gia đình + bục 3 năm: giữ một hàng, thu nhỏ */
    .sc-fam { flex-wrap: nowrap; gap: 4px; }
    .sc-fam-p { flex: 1 1 0; min-width: 0; }
    .sc-fam-g { width: 48px; height: 48px; font-size: .95rem; }
    .sc-fam-p strong { font-size: .9rem; }
    .sc-fam-p span:last-child { font-size: .72rem; line-height: 1.3; }
    .sc-fam-plus { font-size: 1.1rem; }
    .sc-podium { gap: 6px; }
    .sc-pod-b { padding: 12px 4px 10px; border-radius: var(--boi-r-md, 18px); }
    .sc-pod.is-first .sc-pod-b { padding: 16px 4px 12px; }
    .sc-pod-b strong { font-size: 1.15rem; }
    .sc-pod.is-first .sc-pod-b strong { font-size: 1.35rem; }
    .sc-pod-b span { font-size: .7rem; line-height: 1.3; }
    .sc-pod-b b { font-size: .95rem; }
    .sc-pod-b small { font-size: .66rem; line-height: 1.3; }
    .sc-best-h { font-size: 1.05rem; }
    .sc-ygrid, .sc-tet-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sc-years, .sc-detail { padding: 16px 12px; border-radius: var(--boi-r-lg, 24px); }
    .sc-detail-head { grid-template-columns: auto minmax(0, 1fr); }
    .sc-detail-sc { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 8px; }
    .sc-tile .ht-tile-body { padding-left: 16px; }
    .sc-both { grid-template-columns: 1fr; }
    .sc-kid-t, .sc-kid-t .ht-verdict { text-align: center; }
}
@media (max-width: 420px) {
    .sc-ygrid, .sc-tet-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sc-crit-cards { grid-template-columns: 1fr; }
}