/* Chiêm tinh – bản đồ sao (VP124_CT_VER). Tông tím – vàng kim của nhóm phương Tây; nền tối mặc định, html.tpv-light = nền sáng. */
.tpv-ct, .tpv-tsh--ct {
	--ct-bg: rgba(18, 12, 44, .78); --ct-card: rgba(30, 22, 66, .62); --ct-line: rgba(212, 175, 95, .28);
	--ct-tx: #ece6ff; --ct-mu: #b9b0d8; --ct-gold: #e3c27a; --ct-h: #f5dfa6; --ct-vi: #b79cff;
	--ct-lua: rgba(240, 120, 90, .30); --ct-dat: rgba(150, 190, 110, .28); --ct-khi: rgba(240, 215, 120, .26); --ct-nuoc: rgba(100, 160, 240, .30);
	--ct-hop: #4fa3ff; --ct-cang: #ff6b6b; --ct-trung: #e3c27a;
}
html.tpv-light .tpv-ct, html.tpv-light .tpv-tsh--ct {
	--ct-bg: #fffaf0; --ct-card: #fff; --ct-line: rgba(122, 86, 0, .22);
	--ct-tx: #2a2140; --ct-mu: #5d5470; --ct-gold: #7a5600; --ct-h: #3a2a00; --ct-vi: #5b2fc0;
	--ct-lua: rgba(230, 100, 70, .20); --ct-dat: rgba(110, 160, 80, .20); --ct-khi: rgba(220, 180, 60, .22); --ct-nuoc: rgba(70, 130, 220, .20);
	--ct-hop: #1f6fd1; --ct-cang: #d23c3c; --ct-trung: #8a6300;
}
.tpv-ct { color: var(--ct-tx); margin: 0 auto 28px; max-width: 1080px; font-size: 16px; line-height: 1.7; }
.tpv-ct p { margin: 0 0 .8em; }
.tpv-ct-nav { position: sticky; top: 0; z-index: 20; display: flex; gap: 4px; overflow-x: auto; padding: 8px; margin: 0 0 18px; background: var(--ct-bg); border: 1px solid var(--ct-line); border-radius: 12px; backdrop-filter: none; scrollbar-width: none; }
.tpv-ct-nav::-webkit-scrollbar { display: none; }
.tpv-ct-nav a, .tpv-ct-print { flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; color: var(--ct-tx); text-decoration: none; font-size: 14px; white-space: nowrap; border: 1px solid transparent; background: none; cursor: pointer; font-family: inherit; }
.tpv-ct-nav a:hover, .tpv-ct-print:hover { border-color: var(--ct-line); color: var(--ct-gold); }
.tpv-ct-sec { margin: 0 0 30px; padding: 22px 22px 8px; background: var(--ct-bg); border: 1px solid var(--ct-line); border-radius: 16px; scroll-margin-top: 70px; }
.tpv-ct-h2 { margin: 0 0 14px; font-size: 1.45rem; line-height: 1.3; color: var(--ct-h); font-weight: 600; }
.tpv-ct-h2 span { color: var(--ct-gold); margin-right: 4px; }
.tpv-ct-h3 { margin: 22px 0 10px; font-size: 1.15rem; color: var(--ct-h); font-weight: 600; }
.tpv-ct h4 { margin: 14px 0 6px; font-size: 1rem; color: var(--ct-gold); font-weight: 600; }
.tpv-ct-lead { color: var(--ct-mu); font-size: .95rem; }
.tpv-ct-muted { color: var(--ct-mu); font-size: .93rem; }
.tpv-ct-note { padding: 10px 14px; border-left: 3px solid var(--ct-gold); background: var(--ct-card); border-radius: 8px; font-size: .93rem; }
.tpv-ct-birth { font-size: .96rem; }
.tpv-ct-chart { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.tpv-ct-fig { margin: 0; }
.tpv-ct-fig figcaption { font-size: .82rem; color: var(--ct-mu); margin-top: 6px; line-height: 1.5; }
.tpv-ct-wheel { width: 100%; height: auto; display: block; max-width: 620px; margin: 0 auto; }
.tpv-ct-wheel text { font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", "DejaVu Sans", "Apple Symbols", sans-serif; dominant-baseline: central; text-anchor: middle; }
.tpv-ct-wheel .w-bg { fill: var(--ct-card); stroke: var(--ct-line); }
.tpv-ct-wheel .w-sign { stroke: var(--ct-line); stroke-width: 1; }
.tpv-ct-wheel .w-sg { font-size: 20px; fill: var(--ct-h); }
.tpv-ct-wheel .w-tick { stroke: var(--ct-mu); stroke-width: .7; opacity: .6; }
.tpv-ct-wheel .w-ring { fill: none; stroke: var(--ct-line); stroke-width: 1.2; }
.tpv-ct-wheel .w-in { fill: var(--ct-bg); stroke: var(--ct-line); }
.tpv-ct-wheel .w-cusp { stroke: var(--ct-mu); stroke-width: .8; opacity: .55; }
.tpv-ct-wheel .w-axis { stroke: var(--ct-gold); stroke-width: 1.8; }
.tpv-ct-wheel .w-hn { font-size: 12px; fill: var(--ct-mu); font-family: inherit; }
.tpv-ct-wheel .w-ax { font-size: 12px; font-weight: 700; fill: var(--ct-gold); font-family: inherit; }
.tpv-ct-wheel .w-asp { stroke-width: 1.3; }
.tpv-ct-wheel .w-asp.is-hop { stroke: var(--ct-hop); }
.tpv-ct-wheel .w-asp.is-sext { stroke-dasharray: 5 4; }
.tpv-ct-wheel .w-asp.is-cang { stroke: var(--ct-cang); }
.tpv-ct-wheel .w-lead { fill: none; stroke: var(--ct-mu); stroke-width: .8; }
.tpv-ct-wheel .w-pg { font-size: 22px; fill: var(--ct-tx); cursor: pointer; }
.tpv-ct-wheel .w-pg.is-node { font-size: 18px; fill: var(--ct-mu); }
.tpv-ct-wheel .w-pd { font-size: 10.5px; fill: var(--ct-mu); font-family: inherit; }
.tpv-ct-wheel .w-pl:hover .w-pg, .tpv-ct-wheel .w-pl.is-on .w-pg { fill: var(--ct-gold); }
.tpv-ct-wheel.is-focus .w-asp { opacity: .08 !important; }
.tpv-ct-wheel.is-focus .w-asp.is-on { opacity: 1 !important; stroke-width: 2.4; }
.tpv-ct-tbl-wrap { overflow-x: auto; }
.tpv-ct-tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tpv-ct-tbl th, .tpv-ct-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--ct-line); text-align: left; vertical-align: top; }
.tpv-ct-tbl th { color: var(--ct-gold); font-weight: 600; font-size: .85rem; }
.tpv-ct-tbl tr.is-on td { background: var(--ct-card); }
.tpv-ct-gl { display: inline-block; min-width: 1.5em; color: var(--ct-gold); font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif; }
.tpv-ct-dig { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .78rem; border: 1px solid var(--ct-line); white-space: nowrap; }
.tpv-ct-dig.is-mieu, .tpv-ct-dig.is-vuong { color: #3fb37f; border-color: rgba(63, 179, 127, .45); }
.tpv-ct-dig.is-ham, .tpv-ct-dig.is-tu { color: #e3936b; border-color: rgba(227, 147, 107, .45); }
.tpv-ct-dig.is-r { color: var(--ct-vi); border-color: rgba(183, 156, 255, .45); }
.tpv-ct-cusps { margin-top: 10px; font-size: .9rem; }
.tpv-ct-cusps ol { columns: 2; margin: 6px 0 0 1.2em; padding: 0; list-style: none; }
.tpv-ct-cusps summary, .tpv-ct-more > summary, .tpv-ct-adv > summary { cursor: pointer; color: var(--ct-gold); }
.tpv-ct-kl { list-style: none; margin: 10px 0 18px; padding: 0; display: grid; gap: 8px; }
.tpv-ct-kl li { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; padding: 10px 14px; background: var(--ct-card); border: 1px solid var(--ct-line); border-radius: 10px; }
.tpv-ct-kl__l { color: var(--ct-mu); font-size: .9rem; }
.tpv-ct-card { margin: 0 0 14px; padding: 16px 18px 8px; background: var(--ct-card); border: 1px solid var(--ct-line); border-radius: 12px; }
.tpv-ct-card.is-big { border-left: 3px solid var(--ct-gold); }
.tpv-ct-card__t { margin: 0 0 2px; font-size: 1.08rem; color: var(--ct-h); font-weight: 600; }
.tpv-ct-card__meta { margin: 0 0 10px !important; font-size: .84rem; color: var(--ct-mu); }
.tpv-ct-ak { color: var(--ct-gold); }
.tpv-ct-pc { font-size: .94rem; padding: 8px 12px; border-radius: 8px; background: rgba(127, 127, 160, .08); }
.tpv-ct-chip { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: .75rem; margin-right: 4px; vertical-align: 1px; }
.tpv-ct-chip.is-hop { background: rgba(79, 163, 255, .16); color: var(--ct-hop); }
.tpv-ct-chip.is-cang { background: rgba(255, 107, 107, .15); color: var(--ct-cang); }
.tpv-ct-chip.is-trung { background: rgba(227, 194, 122, .18); color: var(--ct-trung); }
.tpv-ct-bars { display: grid; gap: 8px; margin: 10px 0 16px; }
.tpv-ct-bar { display: grid; grid-template-columns: 90px minmax(0, 1fr) 48px; gap: 4px 10px; align-items: center; font-size: .92rem; }
.tpv-ct-bar__t { height: 10px; border-radius: 999px; background: rgba(127, 127, 160, .15); overflow: hidden; }
.tpv-ct-bar__t i { display: block; height: 100%; border-radius: 999px; background: var(--ct-gold); }
.tpv-ct-bar.is-lua i { background: #ef7a5a; } .tpv-ct-bar.is-dat i { background: #8fbc5c; } .tpv-ct-bar.is-khi i { background: #e6c35a; } .tpv-ct-bar.is-nuoc i { background: #5a9be6; } .tpv-ct-bar.is-tc i { background: var(--ct-vi); }
.tpv-ct-bar__p { grid-column: 2 / 4; font-size: .8rem; color: var(--ct-mu); margin-top: -4px; }
.tpv-ct-more { margin: 4px 0 16px; }
.tpv-ct-more > summary { padding: 10px 0; }
.tpv-ct-house { margin: 0 0 8px; border: 1px solid var(--ct-line); border-radius: 10px; background: var(--ct-card); }
.tpv-ct-house > summary { display: flex; gap: 10px; align-items: center; padding: 10px 14px; cursor: pointer; list-style: none; }
.tpv-ct-house > summary::-webkit-details-marker { display: none; }
.tpv-ct-house__n { flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ct-gold); color: var(--ct-gold); font-weight: 700; font-size: .9rem; }
.tpv-ct-house__t { font-weight: 600; color: var(--ct-h); }
.tpv-ct-house__s { margin-left: auto; color: var(--ct-mu); font-size: .88rem; text-align: right; font-family: inherit; }
.tpv-ct-house__b { padding: 0 16px 8px; }
.tpv-ct-tl { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--ct-line); }
.tpv-ct-tl__i { position: relative; margin: 0 0 16px; padding: 10px 14px 4px; background: var(--ct-card); border: 1px solid var(--ct-line); border-radius: 10px; }
.tpv-ct-tl__i::before { content: ""; position: absolute; left: -26px; top: 16px; width: 12px; height: 12px; border-radius: 50%; background: var(--ct-gold); box-shadow: 0 0 0 3px var(--ct-bg); }
.tpv-ct-tl__i.is-hop::before { background: var(--ct-hop); } .tpv-ct-tl__i.is-cang::before { background: var(--ct-cang); }
.tpv-ct-tl__d { font-size: .82rem; color: var(--ct-mu); }
.tpv-ct-tl__i h4 { margin-top: 2px; }
.tpv-ct-ul { margin: 0 0 14px 1.1em; padding: 0; }
.tpv-ct-ul li { margin-bottom: 6px; }
.tpv-ct-end { margin: 10px 0 0; }
/* Form */
.tpv-ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tpv-ct-custom { grid-template-columns: 1fr 1fr 1fr; margin-top: 10px; }
.tpv-ct-custom[hidden] { display: none; }
.tpv-ct-field { margin-bottom: 14px; }
.tpv-ct-date { display: grid; grid-template-columns: 1fr 1.3fr 1.2fr; gap: 8px; }
.tpv-ct-date--time { grid-template-columns: 1fr 1fr; }
.tpv-ct-date select:disabled { opacity: .45; }
.tpv-ct-check { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: .93rem; cursor: pointer; }
.tpv-ct-check[hidden] { display: none; }
.tpv-ct-adv { margin: 4px 0 16px; }
.tpv-ct-adv > summary { margin-bottom: 8px; font-size: .93rem; }
@media (max-width: 849px) {
	.tpv-ct-chart { grid-template-columns: minmax(0, 1fr); }
	.tpv-ct-sec { padding: 16px 14px 4px; border-radius: 12px; }
	.tpv-ct-kl li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.tpv-ct-h2 { font-size: 1.25rem; }
	.tpv-ct-card { padding: 14px 14px 6px; }
	.tpv-ct-custom { grid-template-columns: 1fr 1fr; }
	.tpv-ct-tl { padding-left: 14px; }
	.tpv-ct-tl__i::before { left: -22px; }
	.tpv-ct-house__s { display: none; }
}
@media print {
	.tpv-ct-nav, .tpv-tsh--ct, .tpv-tt-lock, .tpv-hg { display: none !important; }
	.tpv-ct-sec { break-inside: auto; border: 0; padding: 0; }
	.tpv-ct-card, .tpv-ct-house { break-inside: avoid; }
	.tpv-ct-house:not([open]) > .tpv-ct-house__b { display: block; }
}
.tpv-ct-tbl__m { display: none; }
@media (max-width: 849px) {
	.tpv-ct-tbl .tpv-ct-tbl__nc { display: none; }
	.tpv-ct-tbl__m { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
	.tpv-ct-sec#ct-ban-do { padding-left: 8px; padding-right: 8px; }
	.tpv-ct-wheel .w-pg { font-size: 26px; } .tpv-ct-wheel .w-sg { font-size: 23px; } .tpv-ct-wheel .w-pd { font-size: 13px; } .tpv-ct-wheel .w-hn { font-size: 14px; }
}
/* 1.1.0 – vận năm, chia sẻ, hợp đôi, tình duyên */
.tpv-ct-yr { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.tpv-ct-yr__a { padding: 6px 14px; border: 1px solid var(--ct-line); border-radius: 999px; text-decoration: none; color: var(--ct-gold); font-size: .9rem; }
.tpv-ct-share { margin: 0 0 30px; }
.tpv-ct-share__url input { width: 100%; margin-top: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--ct-line); background: var(--ct-card); color: var(--ct-mu); font-size: .82rem; }
.tpv-ct-duo { display: grid; grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr); gap: 16px; align-items: center; margin: 6px 0 18px; }
.tpv-ct-pc2 { padding: 14px 16px; background: var(--ct-card); border: 1px solid var(--ct-line); border-radius: 12px; font-size: .92rem; }
.tpv-ct-pc2 strong { display: block; font-size: 1.05rem; color: var(--ct-h); }
.tpv-ct-pc2__l { font-size: .78rem; color: var(--ct-gold); text-transform: uppercase; letter-spacing: .06em; }
.tpv-ct-pc2__m { display: block; color: var(--ct-mu); font-size: .82rem; margin-bottom: 6px; }
.tpv-ct-pc2 ul { list-style: none; margin: 0; padding: 0; }
.tpv-ct-pc2 li { margin: 2px 0; }
.tpv-ct-score { position: relative; width: 150px; height: 150px; margin: 0 auto; border-radius: 50%; display: grid; place-content: center; text-align: center;
	background: radial-gradient(closest-side, var(--ct-bg) 78%, transparent 79% 100%), conic-gradient(var(--ct-gold) calc(var(--p) * 1%), rgba(127, 127, 160, .2) 0); }
.tpv-ct-score__n { font-size: 2.4rem; font-weight: 700; color: var(--ct-h); line-height: 1; }
.tpv-ct-score__d { font-size: .85rem; color: var(--ct-mu); }
.tpv-ct-score__l { font-size: .85rem; color: var(--ct-gold); margin-top: 4px; max-width: 110px; }
.tpv-ct-fig--duo { max-width: 620px; margin: 10px auto 18px; }
.tpv-ct-wheel .w-pg.is-b { fill: var(--ct-vi); font-size: 19px; }
.tpv-ct-bars--td .tpv-ct-bar { grid-template-columns: 110px minmax(0, 1fr) 48px; }
.tpv-ct-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tpv-ct-person { margin: 0 0 12px; padding: 12px 14px 4px; border: 1px solid var(--ct-line); border-radius: 12px; min-width: 0; }
.tpv-ct-person__t { padding: 0 6px; font-weight: 600; color: var(--ct-gold); }
.tpv-ct-date--4 { grid-template-columns: .9fr 1fr 1.1fr 1.2fr; }
@media (max-width: 849px) {
	.tpv-ct-duo { grid-template-columns: minmax(0, 1fr); }
	.tpv-ct-pair { grid-template-columns: minmax(0, 1fr); }
	.tpv-ct-date--4 { grid-template-columns: 1fr 1fr; }
}