/* Tử vi hàng ngày 12 con giáp (includes/tu-vi-hang-ngay). Dùng biến màu --pg-* chung để tự theo nền sáng/tối. */
.tpv-tvhn { --tvhn-tot: #4fbf8f; --tvhn-xau: #e0a341; --tvhn-binh: #a9a3c9; }
.tpv-tvhn__h1 { font-size: clamp(24px, 4vw, 34px); line-height: 1.25; margin: 4px 0 10px; }
.tpv-tvhn__lead { font-size: 16px; line-height: 1.7; margin: 0 0 14px; }
.tpv-tvhn.is-loading { opacity: .55; pointer-events: none; transition: opacity .15s; }

.tpv-tvhn-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.tpv-tvhn-nav__a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--pg-line, rgba(255,255,255,.18)); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.tpv-tvhn-nav__a:hover, .tpv-tvhn-nav__a.is-today { border-color: var(--pg-gold, #c9a54a); }
.tpv-tvhn-nav__pick { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.tpv-tvhn-nav__pick span { color: var(--pg-muted, #b8b2d8); }
.tpv-tvhn-nav__pick input { padding: 6px 10px; border-radius: 10px; border: 1px solid var(--pg-line, rgba(255,255,255,.18)); background: transparent; color: inherit; font: inherit; }
.tpv-tvhn-nav .is-next { margin-left: auto; }

.tpv-tvhn-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; }
.tpv-tvhn-chip { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: 12px; text-decoration: none; border: 1px solid var(--pg-line, rgba(255,255,255,.14)); background: var(--pg-card-2, rgba(255,255,255,.04)); font-size: 14px; }
.tpv-tvhn-chip span { font-size: 22px; line-height: 1.1; }
.tpv-tvhn-chip small { font-size: 12.5px; color: var(--pg-muted, #b8b2d8); }
.tpv-tvhn-chip.is-tot { box-shadow: inset 0 -3px var(--tvhn-tot); } .tpv-tvhn-chip.is-xau { box-shadow: inset 0 -3px var(--tvhn-xau); }
.tpv-tvhn-chip.is-on, .tpv-tvhn-chip.is-me { border-color: var(--pg-gold, #c9a54a); background: rgba(201,165,74,.14); }
.tpv-tvhn-chip:hover { border-color: var(--pg-gold, #c9a54a); }

.tpv-tvhn-me { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--pg-line, rgba(255,255,255,.2)); font-size: 14.5px; }
.tpv-tvhn-me[hidden] { display: none; }
.tpv-tvhn-me select { margin-left: 6px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--pg-line, rgba(255,255,255,.2)); background: transparent; color: inherit; font: inherit; }
.tpv-tvhn-me select option { color: #222; }

.tpv-tvhn-st { position: relative; display: inline-block; font-size: 15px; line-height: 1; letter-spacing: 2px; color: var(--pg-line, rgba(160,150,190,.45)); white-space: nowrap; vertical-align: middle; }
.tpv-tvhn-st::before { content: "★★★★★"; }
.tpv-tvhn-st i { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--pg-gold-2, #e8b94a); font-style: normal; }
.tpv-tvhn-st i::before { content: "★★★★★"; }
.tpv-tvhn-st.is-big { font-size: 20px; }

.tpv-tvhn-rank { margin: 0 0 18px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--pg-line, rgba(255,255,255,.14)); background: var(--pg-card-2, rgba(255,255,255,.04)); }
.tpv-tvhn-rank h2 { font-size: 20px; margin: 0 0 8px; } .tpv-tvhn-rank h3 { font-size: 16px; margin: 14px 0 6px; }
.tpv-tvhn-rank__ol { margin: 0; padding-left: 22px; }
.tpv-tvhn-rank__ol li { margin: 4px 0; line-height: 1.6; }
.tpv-tvhn-rank__ol li a { text-decoration: none; }
.tpv-tvhn-rank__ol small { display: block; font-size: 13px; color: var(--pg-muted, #b8b2d8); }

.tpv-tvhn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tpv-tvhn-card { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--pg-line, rgba(255,255,255,.14)); background: var(--pg-card-2, rgba(255,255,255,.04)); scroll-margin-top: 80px; }
.tpv-tvhn-card.is-tot { border-top: 3px solid var(--tvhn-tot); } .tpv-tvhn-card.is-xau { border-top: 3px solid var(--tvhn-xau); } .tpv-tvhn-card.is-binh { border-top: 3px solid var(--tvhn-binh); }
.tpv-tvhn-card.is-me { outline: 2px solid var(--pg-gold, #c9a54a); outline-offset: 2px; order: -1; }
.tpv-tvhn-card.is-me .tpv-tvhn-card__t::after { content: "Tuổi của bạn"; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 12px; vertical-align: middle; background: var(--pg-gold, #c9a54a); color: #1a1030; }
.tpv-tvhn-card__h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tpv-tvhn-card__em { font-size: 36px; line-height: 1; }
.tpv-tvhn-card__t { font-size: 20px; margin: 0; } .tpv-tvhn-card__t small { font-size: 14px; font-weight: 400; color: var(--pg-muted, #b8b2d8); }
.tpv-tvhn-card__y { margin: 2px 0 0; font-size: 12.5px; color: var(--pg-muted, #b8b2d8); }
.tpv-tvhn-card__s { margin-left: auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.tpv-tvhn-card__s b { font-size: 13px; font-weight: 600; }
.tpv-tvhn-card__tong { margin: 0 0 10px; font-size: 14.5px; line-height: 1.7; }
.tpv-tvhn-lv { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.tpv-tvhn-lv li { padding: 8px 10px; border-radius: 10px; background: var(--pg-card, rgba(0,0,0,.12)); border-left: 3px solid var(--tvhn-binh); }
.tpv-tvhn-lv li.is-tot { border-left-color: var(--tvhn-tot); } .tpv-tvhn-lv li.is-xau { border-left-color: var(--tvhn-xau); }
.tpv-tvhn-lv__h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14.5px; }
.tpv-tvhn-lv p { margin: 3px 0 0; font-size: 14px; line-height: 1.6; }
.tpv-tvhn-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 6px 14px; margin: 0 0 10px; }
.tpv-tvhn-meta div { font-size: 14px; line-height: 1.55; }
.tpv-tvhn-meta dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pg-muted, #b8b2d8); }
.tpv-tvhn-meta dd { margin: 0; } .tpv-tvhn-meta dd small { color: var(--pg-muted, #b8b2d8); }
.tpv-tvhn-card__kh { margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; }
.tpv-tvhn-why summary { cursor: pointer; font-size: 13.5px; color: var(--pg-gold, #c9a54a); }
.tpv-tvhn-why ul { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
.tpv-tvhn-why li.is-tot::marker { color: var(--tvhn-tot); } .tpv-tvhn-why li.is-xau::marker { color: var(--tvhn-xau); }
.tpv-tvhn-card__more { margin: 8px 0 0; font-size: 14px; font-weight: 600; }

.tpv-tvhn-7, .tpv-tvhn-nam, .tpv-tvhn-day { margin: 22px 0 0; }
.tpv-tvhn-7 h2, .tpv-tvhn-nam h2, .tpv-tvhn-day h2 { font-size: 21px; margin: 0 0 10px; }
.tpv-tvhn-7 td small { display: block; font-size: 12.5px; color: var(--pg-muted, #b8b2d8); }
.tpv-tvhn-7 tr.is-tot td:first-child { box-shadow: inset 3px 0 var(--tvhn-tot); } .tpv-tvhn-7 tr.is-xau td:first-child { box-shadow: inset 3px 0 var(--tvhn-xau); }
.tpv-tvhn-nam__ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.tpv-tvhn-nam__ul li { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--pg-line-soft, rgba(255,255,255,.12)); font-size: 14px; }
.tpv-tvhn-nam__ul small { display: block; font-size: 12.5px; color: var(--pg-muted, #b8b2d8); }
.tpv-tvhn-note { font-size: 13.5px; color: var(--pg-muted, #b8b2d8); }
.tpv-tvhn-day { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--pg-line, rgba(255,255,255,.14)); }
.tpv-tvhn-day__more { margin: 6px 0 0; font-size: 14px; }
.tpv-tvhn-back { margin: 16px 0 0; font-weight: 600; }
.tpv-tvhn-cta { margin: 20px 0 6px; padding: 16px 18px; border-radius: 16px; background: rgba(201,165,74,.1); border: 1px solid rgba(201,165,74,.35); }
.tpv-tvhn-cta p { margin: 0 0 10px; line-height: 1.65; } .tpv-tvhn-cta p:last-child { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tpv-tvhn-cta__2 { font-weight: 600; font-size: 14.5px; }

@media (max-width: 760px) {
	.tpv-tvhn-grid { grid-template-columns: minmax(0, 1fr); }
	.tpv-tvhn-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.tpv-tvhn-card { padding: 14px; }
	.tpv-tvhn-nav__pick span { display: none; }
}

/* Ghi đè kiểu dl/label chung của giao diện Đông phương */
.tpv-tvhn .tpv-tvhn-meta dt { display: block; }
.tpv-tvhn .tpv-tvhn-meta dd { text-transform: none; letter-spacing: normal; font-size: 14px; }
.tpv-tvhn .tpv-tvhn-meta dd small { text-transform: none; font-size: 12.5px; }
.tpv-tvhn-nav__pick span { white-space: nowrap; }
.tpv-tvhn-me label { font: inherit; font-size: 14.5px; font-weight: 600; letter-spacing: normal; text-transform: none; }
.tpv-tvhn-st i { color: #e0a21b; }

/* Trang ngày /tu-vi-12-con-giap-dd-mm-yyyy/ + khối "Xem tử vi ngày mai" (1.1.0) */
.tpv-tvhn-badge { display: inline-block; margin: 0 0 10px; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--pg-gold, #c9a54a); color: #1a1030; }
.tpv-tvhn-nav .is-off { opacity: .6; cursor: default; font-weight: 500; }
.tpv-tvhn-mai { margin-top: 22px; }
.tpv-tvhn-mai p { margin: 0 0 10px; line-height: 1.65; } .tpv-tvhn-mai p:last-child { margin: 0; }
.tpv-tvhn-arc { margin: 22px 0 0; }
.tpv-tvhn-arc h2 { font-size: 21px; margin: 0 0 10px; }
.tpv-tvhn-arc ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 6px; }
.tpv-tvhn-arc li { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--pg-line-soft, rgba(255,255,255,.12)); font-size: 14px; }
.tpv-tvhn-arc a { text-decoration: none; }