/**
 * XEM TUỔI VỢ CHỒNG (/xem-tuoi-vo-chong/) — giao diện "Đôi nhẫn" (08/10/2026).
 * Màu chỉ lấy từ biến của cute.css (--theme-*, --boi-pink/mint/butter/apricot, --boi-sticker-ink), bo góc --boi-r-*,
 * bóng --boi-card-shadow. Rộng tối đa var(--site-w, 1500px), lề 32px (>768px) / 16px (≤768px).
 */
/* Thoát khung hẹp của theme (giống .love-page) rồi căn giữa trong 1500px. */
.hoptuoi-page { display: block; box-sizing: border-box; width: 100vw; position: relative; left: 50%; right: 50%; margin: 0 -50vw !important; padding: 28px 32px 0; overflow-x: clip; }
body.page-template-page-xem-tuoi-vo-chong .page-header, body.page-template-page-xem-tuoi-vo-chong .nevo-breadcrumb { display: none !important; }
.ht { max-width: var(--site-w, 1500px); margin: 0 auto; color: var(--theme-text-body); font-family: var(--boi-font-body); }
.ht .flow-crosslinks { max-width: none; margin: 34px 0 0; }
/* Một khung duy nhất: mọi khối (khung nhập, kết quả, link công cụ, bài viết) cùng mép với logo/menu — rộng 1500px, lề 32px / 16px do .hoptuoi-page lo.
   Khối chữ của Phòng nội dung (.bc-wrap) vốn tự thêm lề 32px → bỏ ở đây để không thụt hai lần. */
.ht-learn .bc-wrap { max-width: none; padding-inline: 0; }

/* ---------- Đầu trang ---------- */
.ht-head { text-align: center; max-width: 900px; margin: 0 auto 22px; }
.ht-kicker { margin: 0 0 6px; font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--theme-gold-text); }
.ht-h1 { margin: 0 0 12px; font-family: var(--boi-font-head); font-weight: 900; font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.12; letter-spacing: -.015em; color: var(--theme-text-strong); text-wrap: balance; }
.ht-lead, .ht-lead p { margin: 0; font-size: 1.06rem; line-height: 1.7; color: var(--theme-text-secondary); }

/* ---------- Khung nhập "Đôi nhẫn": dải trời xanh–hồng, hai thẻ Chú rể / Cô dâu, đôi nhẫn ở giữa ---------- */
.ht-tool { position: relative; margin: 0; padding: 0 0 26px; border-radius: var(--boi-r-xl, 32px);
    background: var(--theme-bg-elevated); border: 1px solid var(--theme-border); box-shadow: var(--boi-card-shadow); overflow: hidden; }
.ht-tool-head { position: relative; padding: 26px 24px 58px; text-align: center;
    background: radial-gradient(circle at 12% 30%, color-mix(in srgb, var(--boi-butter) 70%, transparent) 0 46px, transparent 47px),
                radial-gradient(circle at 90% 22%, color-mix(in srgb, var(--boi-mint) 70%, transparent) 0 34px, transparent 35px),
                linear-gradient(115deg, var(--boi-sky), var(--boi-apricot) 50%, var(--boi-pink)); color: var(--boi-sticker-ink); }
.ht-tool-badge { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--theme-bg-elevated); box-shadow: var(--boi-card-shadow); margin-bottom: 8px; }
.ht-tool-badge .ht-rings2 { width: 38px; }
.ht-tool-h { margin: 0; font: 900 clamp(1.35rem, 2.6vw, 1.7rem)/1.2 var(--boi-font-head); color: var(--boi-sticker-ink); }
.ht-tool-sub { margin: 4px 0 0; font-size: .95rem; font-weight: 600; color: var(--boi-sticker-ink); opacity: .82; }

.ht-rings2 { display: block; width: 100%; height: auto; overflow: visible; }
.ht-rings2 circle { fill: none; stroke-width: 3.4; }
.ht-r1 { stroke: var(--theme-gold-text); }
.ht-r2 { stroke: var(--theme-gold-text); opacity: .6; }
.ht-gem { fill: var(--boi-sky); stroke: var(--theme-gold-text); stroke-width: 1.4; stroke-linejoin: round; }

.ht-form { position: relative; max-width: 1180px; margin: -36px auto 0; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); gap: 16px 0; align-items: stretch; }
.ht-person { margin: 0; padding: 18px 18px 16px; min-width: 0; text-align: center; border-radius: var(--boi-r-xl, 28px); background: var(--theme-bg-elevated);
    border: 2px solid var(--ht-c); box-shadow: var(--boi-card-shadow); }
.ht-person.is-chong { --ht-c: var(--boi-sky); }
.ht-person.is-vo { --ht-c: var(--boi-pink); }
.ht-who { float: left; width: 100%; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ht-who-av { position: relative; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: var(--ht-c);
    border: 4px solid var(--theme-bg-elevated); box-shadow: 0 0 0 2px var(--ht-c), 0 8px 18px rgba(var(--boi-tint-rgb), .25); }
.ht-av-svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .2s, transform .2s; }
.ht-av-skin { fill: var(--boi-peach); }
.ht-av-ink, .ht-av-hair, .ht-av-suit { fill: var(--boi-sticker-ink); }
.ht-av-smile { fill: none; stroke: var(--boi-sticker-ink); stroke-width: 1.6; stroke-linecap: round; }
.ht-av-cheek { fill: var(--theme-gold-text); opacity: .28; }
.ht-av-shirt, .ht-av-dress { fill: var(--boi-butter); }
.ht-av-bow, .ht-av-flower { fill: var(--theme-gold-text); }
.ht-av-veil { fill: var(--boi-apricot); opacity: .95; }
.ht-who-giap { position: absolute; inset: 0; display: grid; place-items: center; font-size: 46px; line-height: 1;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; animation: ht-pop .35s ease-out; }
.ht-who-av.is-known .ht-av-svg { opacity: 0; transform: scale(.7); }
@keyframes ht-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ht-who-giap { animation: none; } .ht-av-svg { transition: none; } }
.ht-who-t { display: flex; flex-direction: column; line-height: 1.15; }
.ht-who-t strong { font: 900 1.25rem/1.2 var(--boi-font-head); color: var(--theme-text-strong); }
.ht-who-t small { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--theme-text-soft); }
.ht-label { display: block; clear: both; margin: 0 0 6px; font-size: .84rem; font-weight: 700; color: var(--theme-text-secondary); }
.ht-dmy { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ht-in { width: 100%; height: 50px; padding: 0 12px; border-radius: var(--boi-r-sm, 14px); border: 1.5px solid var(--theme-border-strong);
    background: var(--theme-bg-elevated) !important; color: var(--theme-text-strong) !important; font: 800 1.05rem/1 var(--boi-font-body); text-align: center; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.ht-in:focus { outline: none; border-color: var(--theme-gold-text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ht-c, var(--boi-pink)) 80%, transparent); }
.ht-dmy .ht-in { padding: 0 6px; }
.ht-dmy-d, .ht-dmy-m { flex: 0 0 74px; }
.ht-dmy-y { flex: 1 1 auto; min-width: 88px; }
.ht-dmy-s { color: var(--theme-text-faint); font-weight: 700; }
.ht-peek { margin: 10px 0 0; min-height: 2.1em; display: flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 999px;
    font-size: .84rem; font-weight: 700; line-height: 1.3; color: var(--theme-text-soft); background: color-mix(in srgb, var(--ht-c) 30%, transparent); }
.ht-peek.is-known { color: var(--boi-sticker-ink); background: var(--ht-c); font-weight: 800; }

.ht-knot { grid-column: 2; display: grid; place-items: center; position: relative; }
.ht-knot::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; border-top: 2px dashed var(--theme-border-strong); }
.ht-knot .ht-rings2 { position: relative; width: 44px; padding: 9px 7px 5px; box-sizing: content-box; border-radius: 50%; background: var(--theme-bg-elevated);
    border: 2px solid var(--theme-border); box-shadow: var(--boi-card-shadow); }

.ht-perks { grid-column: 1 / -1; list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ht-perks li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .84rem; font-weight: 700;
    color: var(--theme-text-secondary); border: 1px solid var(--theme-border); }
.ht-perks li span { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; color: var(--theme-gold-text); }
.ht-note { grid-column: 1 / -1; margin: 0; font-size: .86rem; color: var(--theme-text-soft); text-align: center; }
.ht-error { grid-column: 1 / -1; margin: 0; padding: 10px 14px; border-radius: var(--boi-r-sm, 12px); background: var(--theme-danger-bg); border: 1px solid var(--theme-danger-border); color: var(--theme-danger); font-weight: 700; text-align: center; }
.ht-error[hidden] { display: none; }
.ht-btn { grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px;
    border: 0; border-radius: 999px; background: var(--gk-btn); color: var(--gk-btn-ink); font: 800 1.05rem/1 var(--boi-font-head);
    text-decoration: none; cursor: pointer; box-shadow: var(--boi-card-shadow); transition: transform .15s, box-shadow .15s; }
.ht-btn:hover { transform: translateY(-1px); box-shadow: var(--boi-card-shadow-hover); color: var(--gk-btn-ink); }
.ht-btn:focus-visible { outline: 3px solid var(--theme-gold-text); outline-offset: 3px; }
.ht-btn[disabled] { opacity: .7; cursor: wait; transform: none; }
.ht-go { gap: 10px; min-height: 56px; padding: 0 34px; font-size: 1.1rem; }
.ht-go .ht-rings2 { width: 30px; }
.ht-go .ht-rings2 circle { stroke: currentColor; }
.ht-go .ht-gem { fill: currentColor; stroke: currentColor; }
.ht-btn.is-ghost { background: transparent; color: var(--theme-text-strong); border: 1px solid var(--theme-border-strong); box-shadow: none; }

/* ---------- Kết quả (giao diện "Đôi nhẫn" v2 — hình trước, chữ mở sẵn) ---------- */
.ht-result { margin: 26px 0 0; scroll-margin-top: 90px; }
.ht-result[hidden] { display: none; }
.ht-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Màu ngũ hành — pastel của cute.css */
.el-kim { --el: var(--boi-butter); }
.el-moc { --el: var(--boi-mint); }
.el-thuy { --el: var(--boi-sky); }
.el-hoa { --el: var(--boi-pink); }
.el-tho { --el: var(--boi-apricot); }

/* Hai người + vòng điểm */
.ht-hero { padding: 26px 22px 22px; border-radius: var(--boi-r-xl, 32px); background: var(--theme-bg-elevated); border: 1px solid var(--theme-border); box-shadow: var(--boi-card-shadow); }
.ht-couple { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 18px; }
.ht-av { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 0; }
.ht-av-ring { position: relative; width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center;
    background: radial-gradient(circle at 50% 42%, var(--theme-bg-elevated) 0 55%, transparent 56%), var(--el); border: 3px solid var(--el);
    box-shadow: 0 6px 18px rgba(var(--boi-tint-rgb), .28); }
.ht-av-giap { font-size: 52px; line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.ht-av-tag { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); padding: 3px 12px; border-radius: 999px; font: 800 .8rem/1.2 var(--boi-font-head);
    background: var(--theme-bg-elevated); border: 1px solid var(--theme-border-strong); color: var(--theme-text-strong); white-space: nowrap; }
.ht-av-name { margin-top: 16px; font: 900 1.35rem/1.2 var(--boi-font-head); color: var(--theme-text-strong); }
.ht-av-sub { font-size: .88rem; color: var(--theme-text-soft); }
.ht-av-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.ht-el, .ht-que { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: .82rem; font-weight: 800; color: var(--boi-sticker-ink); }
.ht-el { background: var(--el); }
.ht-el .ht-ic { width: 22px; height: 22px; margin: -3px 0; } /* ảnh mệnh chủ site vẽ (cần ≥ 20px để rõ) */
.ht-que { background: var(--theme-surface-2, rgba(0,0,0,.04)); color: var(--theme-text-secondary); border: 1px solid var(--theme-border); }
.ht-que b { font-size: 1.05rem; line-height: 1; color: var(--theme-gold-text); font-weight: 400; }
.ht-av-note { margin: 4px 0 0; font-size: .78rem; line-height: 1.4; color: var(--theme-text-soft); }

.ht-mid { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 2px; }
.ht-ring { position: relative; width: 132px; height: 132px; }
.ht-ring-svg { width: 100%; height: 100%; }
.ht-ring-bg { fill: none; stroke: var(--theme-border); stroke-width: 11; }
.ht-ring-fg { fill: none; stroke: var(--theme-gold-text); stroke-width: 11; stroke-linecap: round; }
.ht-ring-num { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; gap: 1px; color: var(--theme-gold-text); }
.ht-ring-num strong { font: 900 3rem/1 var(--boi-font-head); }
.ht-ring-num span { font-weight: 800; color: var(--theme-text-soft); margin-top: 14px; }
.ht-verdict { margin: 4px 0 0; max-width: 200px; text-align: center; font: 900 1.12rem/1.25 var(--boi-font-head); color: var(--theme-text-strong); }
.ht-gap { margin: 0; font-size: .8rem; color: var(--theme-text-soft); }
.ht-verdict-sub { margin: 16px auto 0; max-width: 640px; text-align: center; line-height: 1.6; color: var(--theme-text-secondary); }

/* Biểu đồ + 5 ô tiêu chí */
.ht-board { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.ht-radar-box { padding: 16px 14px 18px; border-radius: var(--boi-r-xl, 32px); background: var(--theme-bg-elevated); border: 1px solid var(--theme-border); }
.ht-radar { display: block; width: 100%; height: auto; overflow: visible; }
.ht-radar-g { fill: none; stroke: var(--theme-border-strong); stroke-width: 1; }
.ht-radar-v { fill: rgba(var(--boi-tint-rgb), .35); stroke: var(--theme-gold-text); stroke-width: 2.2; stroke-linejoin: round; }
.ht-radar-d { stroke: var(--theme-bg-elevated); stroke-width: 2; }
.ht-radar-d { fill: var(--theme-gold-text); }
.ht-radar-d.is-hard { fill: var(--theme-bg-elevated); stroke: var(--theme-gold-text); }
.ht-radar-t { font: 800 11px/1 var(--boi-font-body); fill: var(--theme-text-secondary); }
.ht-radar-s { font-weight: 900; fill: var(--theme-gold-text); }
.ht-chips { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ht-chip { padding: 5px 12px; border-radius: 999px; font-size: .84rem; font-weight: 800; color: var(--boi-sticker-ink); }
.ht-chip.is-good { background: var(--boi-mint); }
.ht-chip.is-hard { background: var(--boi-pink); }

.ht-tiles { display: grid; gap: 10px; }
.ht-tiles-h { margin: 2px 4px 2px; font: 900 1.15rem/1.3 var(--boi-font-head); color: var(--theme-text-strong); }
.ht-tiles-h small { margin-left: 6px; font: 600 .82rem var(--boi-font-body); color: var(--theme-text-soft); }
.ht-tile { border-radius: var(--boi-r-lg, 24px); background: var(--theme-bg-elevated); border: 1px solid var(--theme-border); border-left: 6px solid var(--ht-t); overflow: hidden; }
.ht-tile.is-good { --ht-t: var(--boi-mint); }
.ht-tile.is-mid { --ht-t: var(--boi-butter); }
.ht-tile.is-hard { --ht-t: var(--boi-pink); }
.ht-tile-h { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px 8px; }
.ht-tile-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--boi-sticker-ink); background: var(--ht-t); }
.ht-tile-ic .ht-ic { width: 24px; height: 24px; }
.ht-tile-t { margin: 0; font: 800 1.04rem/1.25 var(--boi-font-head); color: var(--theme-text-strong); min-width: 0; }
.ht-tile-t small { display: block; font: 600 .8rem/1.35 var(--boi-font-body); color: var(--theme-text-soft); }
.ht-tile-r { display: flex; align-items: center; gap: 10px; }
.ht-tile-pill { padding: 4px 11px; border-radius: 999px; font-size: .8rem; font-weight: 800; color: var(--boi-sticker-ink); white-space: nowrap; background: var(--ht-t); }
.ht-dots { display: inline-flex; gap: 4px; }
.ht-dots i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--theme-gold-text); }
.ht-dots i.is-on { background: var(--theme-gold-text); }
.ht-tile-body { padding: 0 18px 16px 72px; line-height: 1.65; color: var(--theme-text-body); }
.ht-tile-body p { margin: 0 0 6px; }
.ht-tile-body p:last-child { margin-bottom: 0; }
.ht-tile-ab { display: flex; flex-wrap: wrap; gap: 6px; font-size: .86rem; color: var(--theme-text-secondary); }
.ht-tile-ab span { display: inline-flex; align-items: center; gap: 2px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ht-t) 45%, transparent); }
.ht-tile-ab b { color: var(--theme-text-strong); margin-right: 3px; }
@media (min-width: 769px) { .ht-radar-box { position: sticky; top: 96px; } }

/* Việc nên làm */
.ht-do { margin-top: 16px; padding: 16px 20px; border-radius: var(--boi-r-xl, 32px); background: color-mix(in srgb, var(--boi-mint) 35%, var(--theme-bg-elevated)); border: 1px solid var(--theme-border); }
.ht-do h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 900 1.08rem/1.3 var(--boi-font-head); color: var(--theme-text-strong); }
.ht-do ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ht-do li { position: relative; padding-left: 20px; line-height: 1.6; }
.ht-do li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--theme-gold-text); }

/* Cưới năm nào đẹp — dải năm */
.ht-wed { 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); }
.ht-wed h3 { margin: 0 0 14px; font: 900 1.08rem/1.3 var(--boi-font-head); color: var(--theme-text-strong); }
.ht-wed h3 small { display: block; font: 600 .82rem/1.4 var(--boi-font-body); color: var(--theme-text-soft); }
.ht-wed-line { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.ht-wed-line::before { content: ""; position: absolute; left: 8%; right: 8%; top: 17px; height: 3px; border-radius: 3px; background: var(--theme-border-strong); }
.ht-wed-line li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; }
.ht-wed-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: var(--boi-sticker-ink); border: 3px solid var(--theme-bg-elevated); margin-bottom: 6px; }
.ht-wed-line li.is-good .ht-wed-dot { background: var(--boi-mint); }
.ht-wed-line li.is-hard .ht-wed-dot { background: var(--boi-pink); }
.ht-wed-line strong { font: 900 1.05rem/1.2 var(--boi-font-head); color: var(--theme-text-strong); }
.ht-wed-line span { font-size: .78rem; color: var(--theme-text-soft); }
.ht-wed-line em { margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: .74rem; font-weight: 800; color: var(--boi-sticker-ink); }
.ht-wed-line li.is-good em { background: var(--boi-mint); }
.ht-wed-line li.is-hard em { background: var(--boi-pink); }

.ht-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 0; }
.ht-actions .ht-btn { min-height: 46px; padding: 0 22px; font-size: .98rem; }

/* ---------- Chữ giới thiệu + bảng tra ---------- */
.ht-learn { margin: 34px 0 0; }
.ht-sec { margin: 0 0 30px; }
.ht-sec h2 { text-align: center; font: 900 clamp(1.4rem, 3vw, 1.9rem)/1.25 var(--boi-font-head); color: var(--theme-text-strong); }
.ht-table-wrap { overflow-x: auto; margin: 14px 0; }
.ht-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--theme-border); border-radius: var(--boi-r-md, 18px); overflow: hidden; background: var(--theme-bg-elevated); }
.ht-table caption { caption-side: top; padding: 0 0 8px; font-weight: 700; color: var(--theme-text-soft); text-align: center; }
.ht-table th, .ht-table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--theme-border); line-height: 1.55; }
.ht-table thead th { background: var(--boi-apricot); color: var(--boi-sticker-ink); font-weight: 800; }
.ht-table tbody th { color: var(--theme-text-strong); font-weight: 800; }
.ht-table tr:last-child th, .ht-table tr:last-child td { border-bottom: 0; }
.ht-kimlau { list-style: none; margin: 14px auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; }
.ht-kimlau li { display: flex; flex-direction: column; align-items: center; min-width: 76px; padding: 10px 8px; border-radius: var(--boi-r-md, 18px); background: var(--boi-pink); color: var(--boi-sticker-ink); }
.ht-kimlau strong { font: 900 1.25rem/1.1 var(--boi-font-head); }
.ht-kimlau span { font-size: .78rem; font-weight: 700; }
/* Bảng tra nằm trong mục chữ của Phòng nội dung (boi-page-copy) */
.ht-learn .bc .ht-table-wrap, .ht-learn .bc .ht-dunien, .ht-learn .bc .ht-kimlau { margin-top: 16px; margin-bottom: 16px; }

/* ---------- Nền tối: pastel pha nhẹ vào nền nâu (pha 45% như nền sáng thì thành xám đục) ---------- */

/* ---------- Điện thoại ---------- */
@media (max-width: 768px) {
    .hoptuoi-page { padding: 18px 16px 0; }
    .ht-tool { padding-bottom: 20px; border-radius: var(--boi-r-lg, 24px); }
    .ht-tool-head { padding: 22px 16px 50px; }
    .ht-form { padding: 0 14px; grid-template-columns: 1fr; gap: 0; }
    .ht-knot { grid-column: 1; height: 54px; margin: -8px 0; z-index: 1; }
    .ht-knot::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px dashed var(--theme-border-strong); }
    .ht-knot .ht-rings2 { width: 38px; padding: 7px 6px 4px; }
    .ht-perks { margin-top: 16px; }
    .ht-note, .ht-error { margin-top: 12px; }
    .ht-form .ht-btn { margin-top: 14px; }
    .ht-board { grid-template-columns: 1fr; }
    .ht-couple { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
    .ht-mid { grid-column: 1 / -1; grid-row: 1; }
    .ht-av-ring { width: 88px; height: 88px; }
    .ht-av-giap { font-size: 42px; }
    .ht-av-name { font-size: 1.15rem; }
    .ht-wed-line { grid-template-columns: repeat(3, 1fr); row-gap: 14px; }
    .ht-wed-line::before { display: none; }
    .ht-tile-h { grid-template-columns: 40px minmax(0, 1fr); }
    .ht-tile-r { grid-column: 2; }
    .ht-tile-ic { width: 40px; height: 40px; }
    .ht-tile-body { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 380px) {
    .ht-dmy-d, .ht-dmy-m { flex-basis: 60px; }
    .ht-perks li { font-size: .8rem; }
    .ht-av-badges { flex-direction: column; align-items: center; }
}

/* ---------- Bảng tra dạng thẻ (v2): 5 tiêu chí + nhãn điểm du niên ---------- */
.ht-crit-cards { list-style: none; margin: 16px 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ht-crit-cards li { display: flex; flex-direction: column; gap: 4px; padding: 16px 14px; border-radius: var(--boi-r-lg, 24px); background: var(--theme-bg-elevated);
    border: 1px solid var(--theme-border); box-shadow: var(--boi-card-shadow); text-align: center; align-items: center; }
.ht-cc-ic { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--boi-apricot); color: var(--boi-sticker-ink); margin-bottom: 4px; }
.ht-cc-ic .ht-ic { width: 26px; height: 26px; }
.ht-crit-cards strong { font: 900 1rem/1.25 var(--boi-font-head); color: var(--theme-text-strong); }
.ht-cc-about { font-size: .84rem; font-weight: 700; color: var(--theme-gold-text); }
.ht-cc-by { font-size: .8rem; line-height: 1.45; color: var(--theme-text-soft); }
.ht-cc-pts { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: 6px; }
.ht-cc-pts em { font-style: normal; font-size: .76rem; font-weight: 800; line-height: 1.35; padding: 4px 8px; border-radius: 10px; color: var(--boi-sticker-ink); }
.ht-cc-pts .is-good { background: var(--boi-mint); }
.ht-cc-pts .is-mid { background: var(--boi-butter); }
.ht-cc-pts .is-hard { background: var(--boi-pink); }
@media (max-width: 1100px) { .ht-crit-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ht-crit-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .ht-crit-cards { grid-template-columns: 1fr; } }
@media (min-width: 381px) and (max-width: 640px) { .ht-crit-cards li:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* Thẻ trong bài: trải đều đủ hàng, không để khoảng trống bên phải hay một thẻ lẻ rơi xuống dòng */
.ht-learn .bc-tiles.is-mini { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (min-width: 1100px) { .ht-learn .bc-tiles:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 641px) and (max-width: 1099px) { .ht-learn .bc-tiles:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 641px) and (max-width: 1099px) {
    .ht-learn .bc-tiles:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ht-learn .bc-tiles.is-mini:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* 5 thẻ tiêu chí: 3 trên, 2 dưới căn giữa */
    .ht-crit-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .ht-crit-cards li { grid-column: span 2; }
    .ht-crit-cards li:nth-child(4) { grid-column: 2 / span 2; }
}
@media (min-width: 641px) and (max-width: 1099px) { .ht-learn .bc-tiles:not(.is-mini):has(> li:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .ht-learn .bc-tiles:not(.is-mini):has(> li:nth-child(5):last-child) > li { grid-column: span 2; }
    .ht-learn .bc-tiles:not(.is-mini):has(> li:nth-child(5):last-child) > li:nth-child(4) { grid-column: 2 / span 2; } }

/* ---------- Icon dạng ảnh tự vẽ + con giáp bằng chữ (09/10/2026) ---------- */
.ht-tile-ic .boi-ic { width: 30px; height: 30px; }
.ht-cc-ic .boi-ic { width: 32px; height: 32px; }
.ht-el .boi-ic { width: 16px; height: 16px; }
.ht-que-ic { width: 22px; height: 22px; margin: -3px 2px -3px 0; } /* ảnh quẻ chủ site vẽ */
.ht-que-g { width: 18px; height: 18px; vertical-align: -4px; }
.ht-do h3 .boi-ic { width: 24px; height: 24px; }
.ht-tool-badge .ht-rings2 { width: 38px; height: 38px; }
.ht-knot .ht-rings2 { width: 44px; height: 44px; padding: 8px; box-sizing: content-box; }
.ht-go .ht-rings2 { width: 30px; height: 30px; }
.ht-who-giap.is-chi { font: 900 1.4rem/1 var(--boi-font-head); color: var(--boi-sticker-ink); animation: none; }
.ht-av-giap.is-chi { display: grid; place-items: center; width: 74%; height: 74%; border-radius: 50%; background: var(--el); color: var(--boi-sticker-ink);
    font: 900 1.6rem/1 var(--boi-font-head); }
.ht-perks.sc-perks li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--theme-gold-text); flex: none; }
/* Lối sang Xem tuổi kết hôn dưới dải năm cưới (09/10/2026) */
.ht-wed-more { margin: 14px 0 0; text-align: center; font-size: .9rem; line-height: 1.55; color: var(--theme-text-secondary); }
.ht-wed-more a { font-weight: 800; color: var(--theme-gold-text); }

/* ---------- Ảnh 12 con giáp chủ site vẽ (09/10/2026): thay chữ Tý, Sửu… trong vòng tròn ---------- */
.ht-who-giap.is-img { position: absolute; inset: -6%; display: block; animation: ht-pop .35s ease-out; }
.ht-who-giap.is-img img, .ht-av-giap.is-img img, .sc-chi-b.is-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ht-av-giap.is-img { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: none; }
.sc-chi-b.is-img { background: none; border-radius: 0; overflow: visible; }
@media (prefers-reduced-motion: reduce) { .ht-who-giap.is-img { animation: none; } }

/* ---------- Bát trạch (10/10/2026): hai nhóm tứ mệnh + 8 sao du niên, cặp cung dạng chip có quẻ ---------- */
.ht-bt-que { display: inline-block !important; flex: none; width: 22px; height: 22px; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.ht-bt-nhom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0 14px; }
.ht-bt-g { padding: 14px 16px 16px; border-radius: var(--boi-r-lg, 24px); background: var(--theme-bg-elevated); border: 1px solid var(--theme-border); box-shadow: var(--boi-card-shadow); }
.ht-bt-gname { margin: 0 0 10px !important; text-align: center; }
.ht-bt-gname strong { display: inline-block; padding: 3px 14px; border-radius: 999px; font: 900 .95rem/1.5 var(--boi-font-head); color: var(--boi-sticker-ink); }
.ht-bt-g.is-dong .ht-bt-gname strong { background: var(--boi-sky); }
.ht-bt-g.is-tay .ht-bt-gname strong { background: var(--boi-butter); }
.ht-bt-gl { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ht-bt-gl li { margin: 0 !important; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 8px; border-radius: var(--boi-r-md, 18px); background: var(--theme-bg); }
.ht-bt-gl li::before { display: none !important; }
.ht-bt-gl .ht-bt-que { width: 40px; height: 40px; margin-bottom: 2px !important; }
.ht-bt-gl strong { font: 900 1rem/1.2 var(--boi-font-head); color: var(--theme-text-strong); }
.ht-bt-gl span { font-size: .78rem; font-weight: 700; color: var(--theme-text-soft); }

.ht-dunien { list-style: none; margin: 14px 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ht-dunien > li { margin: 0 !important; display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 14px; border-radius: var(--boi-r-lg, 24px); color: var(--boi-sticker-ink); }
.ht-dunien > li::before { display: none !important; }
.ht-dunien > li.is-good { background: var(--boi-mint); }
.ht-dunien > li.is-hard { background: var(--boi-pink); }
.ht-dn-h { margin: 0 !important; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ht-dn-h strong { font: 900 1.08rem/1.25 var(--boi-font-head); color: inherit; }
.ht-dn-h em { flex: none; font-style: normal; padding: 2px 10px; border-radius: 999px; font: 900 .76rem/1.5 var(--boi-font-body); background: rgba(255, 255, 255, .65); color: inherit; }
.ht-dn-about { margin: 0 0 4px !important; font-size: .86rem !important; line-height: 1.45 !important; font-weight: 600; color: inherit !important; }
.ht-dn-pairs { list-style: none; margin: auto 0 0 !important; padding: 0 !important; display: grid; gap: 6px; }
.ht-dn-pairs li { margin: 0 !important; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px; border-radius: 14px; background: rgba(255, 255, 255, .62); font-size: .86rem; font-weight: 800; line-height: 1.2; }
.ht-dn-pairs li::before { display: none !important; }
.ht-bt-cung { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.ht-bt-plus { opacity: .55; font-weight: 900; }
.ht-bt-same { padding: 8px 0; text-align: center; }
.ht-dn-pairs li:only-child { grid-column: 1 / -1; }
@media (max-width: 1100px) { .ht-dunien { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .ht-bt-nhom { grid-template-columns: 1fr; }
    .ht-dn-pairs { grid-template-columns: 1fr 1fr; }
    .ht-dn-pairs li { padding: 6px 4px; font-size: .8rem; gap: 3px; }
    .ht-dn-pairs .ht-bt-que { width: 18px; height: 18px; }
}
@media (max-width: 640px) { .ht-dunien { grid-template-columns: 1fr; } }