/* Giao diện sáng: nền trắng, chữ xanh than, điểm nhấn đỏ son, một họ chữ Be Vietnam Pro */
:root {
  --bg: #ffffff;
  --bg-soft: #f6f7f9;
  --bg-tint: #fbf3f2;
  --ink: #141a26;
  --ink-2: #4b5466;
  --ink-3: #6b7486;
  --line: #e2e6ec;
  --line-2: #cdd4de;
  --son: #b42318;
  --son-hover: #931c12;
  --son-soft: #fdecea;
  --gold: #a16207;
  --gold-soft: #fdf6e7;
  --navy: #1d3a6b;
  --tot: #1f7a45;
  --tot-soft: #e9f6ee;
  --xau: #b42318;
  --xau-soft: #fdecea;
  --radius-s: 6px;
  --radius-m: 10px;
  --shadow: 0 1px 2px rgba(20, 26, 38, .05), 0 8px 24px -12px rgba(20, 26, 38, .12);
  --sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --serif: var(--sans);
  --maxw: 1180px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: var(--son); text-underline-offset: 3px; }
a:hover { color: var(--son-hover); }
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--sans); font-weight: 700; line-height: 1.2; color: var(--ink); margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); }
h3 { font-size: 1.15rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.muted { color: var(--ink-2); }
.small { font-size: .875rem; }
:focus-visible { outline: 2px solid var(--son); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 99; }
.skip:focus { left: 8px; }

/* Header */
.site-head { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.head-in { max-width: var(--maxw); margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 34px; height: 34px; }
.brand-name { font-size: 1.25rem; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -.02em; }
.brand-sub { display: block; font-size: .72rem; color: var(--ink-3); margin-top: 4px; letter-spacing: 0; }
.nav { margin-left: auto; display: flex; gap: 2px; }
.nav a { text-decoration: none; color: var(--ink-2); padding: 8px 12px; border-radius: 8px; font-size: .95rem; font-weight: 500; white-space: nowrap; }
.nav a:hover { background: var(--bg-soft); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--son); background: var(--son-soft); }
.nav a.cta { background: var(--son); color: #fff; margin-left: 8px; font-weight: 600; }
.nav a.cta:hover { background: var(--son-hover); color: #fff; }
.menu-btn { display: none; margin-left: auto; background: #fff; border: 1px solid var(--line-2); color: var(--ink); border-radius: 8px; padding: 8px 12px; font: 500 .95rem var(--sans); }
@media (max-width: 980px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; background: #fff; border-bottom: 1px solid var(--line); padding: 8px 12px 14px; box-shadow: var(--shadow); }
  .nav.open { display: flex; }
  .nav a { padding: 12px; }
  .nav a.cta { margin: 6px 0 0; text-align: center; }
}

main { display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.section { padding: 56px 0; }
.section-tight { padding-block: 28px; }
.band { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Buttons & forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 1rem var(--sans); border-radius: 8px; padding: 12px 22px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
.btn-primary { background: var(--son); color: #fff; }
.btn-primary:hover { background: var(--son-hover); color: #fff; }
.btn-gold { background: var(--ink); color: #fff; }
.btn-gold:hover { background: #2a3346; color: #fff; }
.btn-ghost { background: #fff; border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-3); color: var(--ink); background: var(--bg-soft); }
.btn-sm { padding: 7px 14px; font-size: .9rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); }
.field { display: flex; flex-direction: column; gap: 6px; grid-column: span 12; }
.field.s6 { grid-column: span 6; } .field.s4 { grid-column: span 4; } .field.s3 { grid-column: span 3; } .field.s8 { grid-column: span 8; }
@media (max-width: 640px) { .field.s6, .field.s4, .field.s8 { grid-column: span 12; } .field.s3 { grid-column: span 6; } .field.s4.keep { grid-column: span 4; } .field.s6.keep { grid-column: span 6; } }
label, .label { font-size: .875rem; font-weight: 500; color: var(--ink-2); }
input[type=text], input[type=number], input[type=email], input[type=tel], input[type=date], input[type=time], select, textarea {
  font: 1rem var(--sans); color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 8px; padding: 11px 12px; width: 100%; min-height: 46px;
}
input::placeholder, textarea::placeholder { color: #9aa2b1; }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--son); outline: none; box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }
.seg { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { padding: 8px 16px; border-radius: 8px; cursor: pointer; color: var(--ink-2); font-size: .95rem; font-weight: 500; }
.seg input:checked + label { background: #fff; color: var(--son); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 26, 38, .12), 0 0 0 1px var(--line); }
.seg input:focus-visible + label { outline: 2px solid var(--son); outline-offset: 2px; }
.check { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-size: .92rem; }
.check input { margin-top: 4px; accent-color: var(--son); width: 18px; height: 18px; }
.err { color: var(--xau); font-size: .9rem; min-height: 1.2em; }

.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); padding: 22px; box-shadow: var(--shadow); }
.panel-flat { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 18px; }
.paper { background: var(--bg-tint); color: var(--ink); border: 1px solid #f3d5d1; border-radius: var(--radius-m); }
.paper h2, .paper h3 { color: var(--ink); }

/* Hero */
.hero { padding: 48px 0 32px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; align-items: start; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero h1 { max-width: 16ch; }
.hero-lead { font-size: 1.1rem; color: var(--ink-2); max-width: 52ch; }
.hero-chart { position: relative; }
.hero-chart figcaption { font-size: .85rem; color: var(--ink-3); margin-top: 10px; }

/* Chart */
.chart-shell { background: #fff; padding: 8px; border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.chart-scroll { overflow: auto; -webkit-overflow-scrolling: touch; border-radius: 6px; }
.chart-scroll svg { display: block; width: 100%; height: auto; min-width: 700px; }
.chart-scroll.fit svg { min-width: 0; }
svg.laso { font-family: var(--sans); }
svg.laso .cell { cursor: pointer; }
svg.laso .cell:hover .cell-bg { fill: #fdf5f4; }
svg.laso .cell.sel .cell-bg { fill: #fbeceb; }
svg.laso .star { cursor: help; }
.chart-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: .82rem; color: var(--ink-2); margin-top: 10px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }

.tooltip { position: fixed; z-index: 80; max-width: 300px; background: #fff; color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 12px; font-size: .88rem; pointer-events: none; box-shadow: 0 12px 32px -8px rgba(20, 26, 38, .25); }
.tooltip b { color: var(--son); }

/* Layout tool pages */
.tool-head { padding: 36px 0 12px; }
.tool-head p { color: var(--ink-2); max-width: 64ch; }
.tool-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 1060px) { .tool-grid { grid-template-columns: minmax(0, 1fr); } }
.tool-grid > *, .hero-grid > *, .day-grid > * { min-width: 0; }
.sticky { position: sticky; top: 84px; }
@media (max-width: 1060px) { .sticky { position: static; } }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tabs button { background: none; border: none; color: var(--ink-3); font: 600 .95rem var(--sans); padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--son); border-bottom-color: var(--son); }

/* Reading */
.reading { max-width: 72ch; }
.reading h3 { font-size: 1.2rem; margin-top: 1.6em; }
.reading p { color: #2b3242; }
.cung-block { border-top: 1px solid var(--line); padding: 16px 0; }
.cung-block h3 { margin: 0 0 6px; }
.badge { display: inline-block; font-size: .78rem; font-weight: 500; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); background: #fff; margin-right: 6px; }
.badge.tot { border-color: #b7dfc5; color: var(--tot); background: var(--tot-soft); }
.badge.xau { border-color: #f3c2bd; color: var(--xau); background: var(--xau-soft); }
.badge.trung { border-color: #f0dcae; color: var(--gold); background: var(--gold-soft); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: .95rem; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; font-weight: 500; }

table.data { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
table.data th, table.data td { padding: 10px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.data th { color: var(--ink-3); font-weight: 600; font-size: .82rem; background: var(--bg-soft); }
.table-scroll { overflow-x: auto; }

/* Calendar */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal .dow { text-align: center; font-size: .8rem; font-weight: 600; color: var(--ink-3); padding: 6px 0; }
.cal button.day { background: #fff; border: 1px solid var(--line); border-radius: 8px; min-height: 74px; padding: 6px 7px; text-align: left; color: var(--ink); font: inherit; cursor: pointer; position: relative; display: flex; flex-direction: column; justify-content: space-between; }
.cal button.day:hover { border-color: var(--line-2); background: var(--bg-soft); }
.cal button.day.today { box-shadow: inset 0 0 0 2px var(--son); }
.cal button.day.sel { background: var(--son-soft); border-color: #f3c2bd; }
.cal .d-sol { font-weight: 700; font-size: 1.15rem; line-height: 1; font-variant-numeric: tabular-nums; }
.cal .d-sun { color: var(--son); }
.cal .d-lun { font-size: .78rem; color: var(--ink-3); }
.cal .d-lun.first { color: var(--son); font-weight: 600; }
.cal .dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; }
.cal .dot.hd { background: var(--tot); }
.cal .dot.hk { background: transparent; }
.cal .d-tag { font-size: .68rem; color: var(--gold); line-height: 1.1; }
@media (max-width: 560px) { .cal button.day { min-height: 58px; padding: 4px 5px; } .cal .d-sol { font-size: 1rem; } .cal .d-tag { display: none; } }

.day-big { display: flex; gap: 18px; align-items: center; }
.day-big .num { font-size: 4rem; font-weight: 700; line-height: 1; color: var(--ink); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.day-big .lun { font-size: 2rem; font-weight: 700; color: var(--son); line-height: 1; letter-spacing: -.02em; }
.hours { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
@media (max-width: 560px) { .hours { grid-template-columns: repeat(3, 1fr); } }
.hours div { border: 1px solid var(--line); border-radius: 8px; padding: 6px; text-align: center; font-size: .82rem; color: var(--ink-2); }
.hours div.tot { border-color: #b7dfc5; background: var(--tot-soft); color: var(--ink); }
.hours b { display: block; font-size: .95rem; color: var(--ink); }

/* Tools list on home */
.tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; }
@media (max-width: 1100px) { .tools { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tools { grid-template-columns: 1fr; } }
.tool { background: #fff; padding: 24px; text-decoration: none; color: var(--ink); display: flex; gap: 16px; align-items: flex-start; transition: background .15s; }
.tool:hover { background: var(--bg-soft); color: var(--ink); }
.tool:hover h3 { color: var(--son); }
.tool svg { flex: 0 0 auto; width: 44px; height: 44px; }
.tool h3 { margin: 0 0 4px; font-size: 1.08rem; }
.tool p { margin: 0; color: var(--ink-2); font-size: .93rem; }

.today-strip { display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; }
@media (max-width: 820px) { .today-strip { grid-template-columns: 1fr; } }

.day-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 28px; }
@media (max-width: 820px) { .day-grid { grid-template-columns: 1fr; } }
.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.6em; }
.check.consent { align-items: flex-start; line-height: 1.5; }
.check.consent input { margin-top: 4px; flex: 0 0 auto; }

/* Mùa Tết, 12 con giáp */
.tet-band { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 24px 28px; border-radius: var(--radius-m); background: var(--son-soft); border: 1px solid #f3c2bd; }
.tet-left { margin: 0 0 4px; color: var(--son); font-weight: 600; font-size: .95rem; }
.tet-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.cg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0 8px; }
@media (max-width: 760px) { .cg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 460px) { .cg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cg { display: flex; flex-direction: column; gap: 2px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-m); background: #fff; text-decoration: none; color: var(--ink); border-top: 3px solid var(--line-2); }
.cg:hover { background: var(--bg-soft); color: var(--ink); }
.cg.xau { border-top-color: var(--xau); }
.cg.tot { border-top-color: var(--tot); }
.cg-chi { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.cg-ten { font-size: .85rem; color: var(--ink-3); }
.cg-qh { font-size: .8rem; color: var(--ink-2); margin-top: 6px; line-height: 1.35; }
.cg.xau .cg-qh { color: var(--xau); }
.cg.tot .cg-qh { color: var(--tot); }
.cg-detail { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 28px; scroll-margin-top: 80px; }
.cg-detail h2 { font-size: 1.35rem; }

/* Hexagram */
.hex { display: inline-flex; flex-direction: column-reverse; gap: 7px; width: 96px; }
.hex .ln { height: 11px; display: flex; gap: 12px; position: relative; }
.hex .ln span { flex: 1; background: var(--ink); border-radius: 2px; }
.hex .ln.dong span { background: var(--son); }
.hex .ln.dong::after { content: '○'; position: absolute; right: -20px; top: -7px; color: var(--son); font-size: .9rem; }
.hex .ln.dong.am::after { content: '✕'; }
.hex-wrap { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-end; }
.hex-card { text-align: center; }
.hex-card .t { margin-top: 10px; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.coin-row { display: flex; gap: 10px; flex-wrap: wrap; }
.coin { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f6dd94, #b8862b); color: #3b2a08; display: grid; place-items: center; font-weight: 700; font-size: .78rem; box-shadow: inset 0 0 0 3px rgba(120, 80, 10, .25), 0 1px 2px rgba(20, 26, 38, .15); }
.coin.am { background: radial-gradient(circle at 35% 30%, #e7e9ee, #9aa2b1); color: #2b3242; }
@media (prefers-reduced-motion: no-preference) { .coin.spin { animation: spin .6s ease-out; } @keyframes spin { from { transform: rotateY(720deg) scale(.8); } to { transform: rotateY(0) scale(1); } } }

/* Bars */
.bars { display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: 56px 1fr 52px; gap: 10px; align-items: center; font-size: .92rem; }
.bar .track { height: 12px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.bar .fill { height: 100%; border-radius: 999px; }

.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pillar { min-width: 0; overflow-wrap: anywhere; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 12px; text-align: center; box-shadow: var(--shadow); }
.pillar .tt { font-size: .78rem; font-weight: 600; color: var(--ink-3); }
.pillar .gz { font-size: 1.6rem; font-weight: 700; line-height: 1.15; margin: 6px 0; letter-spacing: -.02em; }
.pillar .sub { font-size: .82rem; color: var(--ink-2); }
.pillar.day { border-color: var(--son); box-shadow: inset 0 0 0 1px var(--son), var(--shadow); }
.dv { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.dv div { flex: 0 0 auto; min-width: 88px; border: 1px solid var(--line); border-radius: 10px; padding: 8px; text-align: center; font-size: .85rem; color: var(--ink-2); background: #fff; }
.dv div.now { border-color: var(--son); background: var(--son-soft); color: var(--ink); }
.dv b { display: block; font-size: 1.1rem; font-weight: 700; color: var(--ink); }

.score-ring { width: 140px; height: 140px; }

/* Footer */
.site-foot { border-top: 1px solid var(--line); background: var(--bg-soft); margin-top: 64px; padding: 36px 0 40px; color: var(--ink-2); font-size: .9rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; } }
.site-foot a { color: var(--ink); text-decoration: none; }
.site-foot a:hover { color: var(--son); }
.site-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }

.notice { border-left: 3px solid var(--gold); background: var(--gold-soft); padding: 12px 16px; border-radius: 0 8px 8px 0; color: #4a3a12; font-size: .93rem; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 8px; font-weight: 600; z-index: 90; box-shadow: var(--shadow); }
.saved-list { display: grid; gap: 6px; }
.saved-list button { text-align: left; background: #fff; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 9px 12px; cursor: pointer; font: inherit; display: flex; justify-content: space-between; gap: 10px; }
.saved-list button:hover { border-color: var(--line-2); background: var(--bg-soft); }
details.adv summary { cursor: pointer; color: var(--son); font-size: .92rem; font-weight: 500; }
details.adv[open] summary { margin-bottom: 10px; }
.hide { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media print {
  body { background: #fff; color: #000; }
  .site-head, .site-foot, .no-print, .tool-grid > aside { display: none !important; }
  .tool-grid { display: block; }
  .chart-shell { box-shadow: none; border: none; padding: 0; }
  .chart-scroll svg { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ============ Lớp giao diện đỏ son – vàng kim ============ */
:root {
  --son-deep: #7a1212;
  --gold: #c8962c;
  --gold-2: #e4b955;
  --gold-text: #8a5a00;
  --gold-line: linear-gradient(90deg, #c8962c, #f1d48a 50%, #c8962c);
  --grad-hero: linear-gradient(118deg, #5e0d10 0%, #9b1519 34%, #b8321a 62%, #d08a2a 100%);
  --cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80' viewBox='0 0 160 80'%3E%3Cg fill='none' stroke='%23f6d98c' stroke-width='1.3' stroke-linecap='round' opacity='.22'%3E%3Cpath d='M10 52c0-9 7-15 15-15 3-9 11-14 20-12 6-8 19-8 25 1 9-2 17 4 18 13'/%3E%3Cpath d='M30 52c-6 0-9-6-6-10 3-3 8-2 9 2'/%3E%3Cpath d='M58 37c4-3 10-1 10 5 0 4-5 6-8 3'/%3E%3Cpath d='M96 22c0-7 6-12 13-11 4-7 15-7 19 0 8 0 13 6 12 13'/%3E%3Cpath d='M113 23c-3-3-1-8 3-8 4 0 5 5 2 7'/%3E%3C/g%3E%3C/svg%3E");
  --hanh-kim: #8a6400; --hanh-kim-bg: #fbf1d6;
  --hanh-moc: #1f7a45; --hanh-moc-bg: #e5f4ea;
  --hanh-thuy: #1d4f91; --hanh-thuy-bg: #e4edfa;
  --hanh-hoa: #b42318; --hanh-hoa-bg: #fdeaea;
  --hanh-tho: #9a5b12; --hanh-tho-bg: #fcefdd;
}
html, body { overflow-x: clip; }

/* Header: vạch vàng kim */
.site-head { border-bottom: 0; }
.site-head::after { content: ''; display: block; height: 3px; background: var(--grad-hero); }
.brand-name { background: linear-gradient(90deg, #8f1414, #b42318 55%, #c8962c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav a.cta, .btn-primary { background: linear-gradient(180deg, #c22a1e, #9c1a13); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px -8px rgba(156, 26, 19, .7); }
.nav a.cta:hover, .btn-primary:hover { background: linear-gradient(180deg, #a91f16, #841510); }
.btn-gold { background: linear-gradient(180deg, #f1cf7a, #d6a43c); color: #3d2600; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 6px 16px -8px rgba(160, 110, 20, .8); }
.btn-gold:hover { background: linear-gradient(180deg, #e8c264, #c8962c); color: #2e1c00; }

/* Dải tiêu đề trang: gradient đỏ son – vàng, hoa văn mây */
.tool-head, .hero { position: relative; color: #fff; isolation: isolate; }
.tool-head::before, .hero::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--cloud), var(--grad-hero); background-size: 160px 80px, cover; }
.tool-head::after, .hero::after { content: ''; position: absolute; z-index: -1; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); height: 3px; background: var(--gold-line); }
.tool-head { padding: 44px 20px 40px; margin-bottom: 32px; }
.tool-head h1, .hero h1 { color: #fff; text-shadow: 0 2px 18px rgba(60, 0, 0, .35); }
.tool-head p { color: rgba(255, 245, 230, .92); }
.tool-head a, .hero a:not(.btn) { color: #ffe9b0; }
.hero { padding: 52px 0 56px; margin-bottom: 8px; }
.hero > .wrap { position: relative; }
.hero-lead { color: rgba(255, 245, 230, .92); }
.hero .panel { box-shadow: 0 24px 48px -24px rgba(40, 0, 0, .6); border-color: rgba(255, 255, 255, .6); }
.hero-chart figcaption { color: rgba(255, 245, 230, .85); }
.hero .chart-shell { border: 1px solid #e9c46a; box-shadow: 0 0 0 4px rgba(255, 224, 150, .25), 0 30px 60px -30px rgba(40, 0, 0, .7); }
.gold-text { background: linear-gradient(90deg, #ffe6a3, #f3c35c 50%, #ffe6a3); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Tiêu đề phần có hoa văn */
.orn { display: flex; align-items: center; gap: 14px; }
.orn::before { content: ''; width: 34px; height: 12px; flex: 0 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M0 6h12' stroke='%23c8962c' stroke-width='1.5'/%3E%3Cpath d='M17 1l5 5-5 5-5-5z' fill='%23b42318'/%3E%3Cpath d='M22 6h12' stroke='%23c8962c' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain; }

/* Ô công cụ theo ngũ hành */
.tools { gap: 14px; background: none; border: 0; border-radius: 0; overflow: visible; }
.tool { border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: transform .15s, box-shadow .15s, border-color .15s; }
.tool:hover { background: #fff; border-color: var(--gold-2); transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(120, 60, 0, .45); }
.tool .ico { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; }
.tool .ico svg { width: 30px; height: 30px; }
.h-kim { --c: var(--hanh-kim); --bgc: var(--hanh-kim-bg); }
.h-moc { --c: var(--hanh-moc); --bgc: var(--hanh-moc-bg); }
.h-thuy { --c: var(--hanh-thuy); --bgc: var(--hanh-thuy-bg); }
.h-hoa { --c: var(--hanh-hoa); --bgc: var(--hanh-hoa-bg); }
.h-tho { --c: var(--hanh-tho); --bgc: var(--hanh-tho-bg); }
.tool .ico { background: var(--bgc); color: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent); }
.tool:hover h3 { color: var(--son); }

/* Dải đếm ngày Tết */
.tet-band { background: var(--cloud), linear-gradient(110deg, #fff6e0, #fde9c4 55%, #f9d7a6); background-size: 160px 80px, cover; border: 1px solid #ecc983; }
.tet-band h2 { color: #6e1010; }

/* 12 con giáp */
.cg { border: 1px solid #ecd9a8; border-top: 0; padding: 0; overflow: hidden; border-radius: 14px; }
.cg::before { content: ''; height: 4px; background: var(--gold-line); }
.cg-chi { display: grid; place-items: center; width: 48px; height: 48px; margin: 14px 14px 4px; border-radius: 50%; color: #fff; font-size: 1.05rem; background: var(--c, var(--son)); box-shadow: 0 0 0 3px var(--bgc, #fdeaea); }
.cg-ten, .cg-qh { padding: 0 14px; }
.cg-qh { padding-bottom: 14px; }
.cg:hover { border-color: var(--gold-2); background: #fffdf7; }

/* Lá số */
.chart-shell { border-color: #ecd9a8; }

/* Chân trang đỏ đậm */
.site-foot { background: var(--cloud), linear-gradient(160deg, #4a0a0c, #6e1013 60%, #7d2a10); background-size: 160px 80px, cover; color: rgba(255, 236, 214, .8); border-top: 3px solid var(--gold); }
.site-foot a { color: #fff3dc; }
.site-foot a:hover { color: var(--gold-2); }
.site-foot .brand-name { background: linear-gradient(90deg, #ffe6a3, #f3c35c); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Thẻ kết quả nổi bật */
.big-num { font-size: 3.2rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; background: linear-gradient(135deg, #9b1519, #c8501e 55%, #c8962c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #fff; }
.stat .k { font-size: .8rem; color: var(--ink-3); font-weight: 600; }
.stat .v { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.swatches { display: flex; gap: 6px; }
.swatches i { width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.stars { color: #d6a43c; letter-spacing: 1px; }
.stars .off { color: #e3e6eb; }

/* Menu nhóm */
.nav { align-items: center; }
.nav-g { position: relative; }
.nav-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; font: 500 .95rem var(--sans); color: var(--ink-2); padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.nav-btn svg { width: 10px; height: 6px; transition: transform .15s; }
.nav-btn:hover, .nav-g.open .nav-btn { background: var(--bg-soft); color: var(--ink); }
.nav-btn.on { color: var(--son); }
.nav-g.open .nav-btn svg { transform: rotate(180deg); }
.nav-pop { display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 280px; background: #fff; border: 1px solid #ecd9a8; border-radius: 14px; padding: 8px; box-shadow: 0 24px 48px -20px rgba(60, 20, 0, .35); z-index: 60; }
.nav-pop::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 14px 14px 0 0; background: var(--gold-line); }
.nav-g.open .nav-pop { display: grid; gap: 2px; }
.nav-pop a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.nav-pop a:hover { background: #fff7e8; }
.nav-pop a b { display: block; font-weight: 600; font-size: .95rem; }
.nav-pop a span { display: block; font-size: .8rem; color: var(--ink-3); }
.nav-pop a[aria-current="page"] b { color: var(--son); }
@media (max-width: 980px) {
  .nav { align-items: stretch; }
  .nav-btn { width: 100%; justify-content: space-between; padding: 12px; }
  .nav-pop { position: static; box-shadow: none; border: 0; padding: 0 0 6px 8px; min-width: 0; }
  .nav-pop::before { display: none; }
}
.foot-cols { columns: 2; column-gap: 24px; }
.foot-cols li { break-inside: avoid; margin-bottom: 6px; }
.foot-cols { display: block !important; }
.compass-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 760px) { .compass-wrap { grid-template-columns: minmax(0, 1fr); } .compass { max-width: 320px; margin: 0 auto; } }
.compass { width: 100%; height: auto; display: block; font-family: var(--sans); }
.hanh-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; background: var(--c); vertical-align: 1px; }
.tsh-hero { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; background: linear-gradient(120deg, #fff, #fff7e6); border-color: #ecd9a8; }
.tsh-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 680px) { .tsh-wrap, .tsh-hero { grid-template-columns: minmax(0, 1fr); } }
.tsh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; border-radius: 14px; background: linear-gradient(135deg, #9b1519, #c8962c); }
.tsh-cell { aspect-ratio: 1; background: #fff; border-radius: 9px; position: relative; display: grid; place-items: center; }
.tsh-cell span { font-weight: 800; font-size: 1.25rem; color: #9b1519; letter-spacing: 1px; word-break: break-all; text-align: center; }
.tsh-cell i { position: absolute; right: 6px; bottom: 3px; font-style: normal; font-size: .7rem; color: #b8bfca; }
.tsh-cell:not(.has) { background: #fbf6ec; }
.day-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; margin-bottom: 18px; }
.day-nav-mid { text-align: center; display: grid; }
.daily-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 980px) { .daily-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .daily-grid { grid-template-columns: minmax(0, 1fr); } }
.daily-grid.mini { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .daily-grid.mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dcard { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.dcard::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c); }
.dcard.tot { border-color: #b7dfc5; }
.dcard.xau { border-color: #f3c2bd; }
.dcard header { display: flex; gap: 12px; align-items: center; }
.dchi { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-weight: 700; font-size: .95rem; box-shadow: 0 0 0 3px var(--bgc); }
.dqh { display: flex; flex-wrap: wrap; gap: 4px; }
.dkv { display: grid; grid-template-columns: 78px 1fr; gap: 4px 10px; font-size: .9rem; margin: 6px 0 0; }
.dkv dt { color: var(--ink-3); font-weight: 600; font-size: .82rem; padding-top: 2px; }
.dkv dd { margin: 0; }
.dcard footer { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--ink-2); border-top: 1px dashed var(--line); padding-top: 8px; margin-top: auto; }
.mau { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
a.dcard-link { text-decoration: none; color: inherit; }
a.dcard-link:hover .dcard { border-color: var(--gold-2); }
.top-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.top-day { text-align: left; display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid #b7dfc5; background: var(--tot-soft); cursor: pointer; font: inherit; color: var(--ink); }
.top-day:hover { border-color: var(--tot); }
.td-n { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; }
.td-s { font-size: .82rem; color: var(--tot); font-weight: 600; }
.heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 8px 0 10px; }
.heat .dow { text-align: center; font-size: .78rem; font-weight: 600; color: var(--ink-3); }
.hm { border: 0; border-radius: 9px; padding: 7px 4px; cursor: pointer; font: inherit; color: #fff; background: var(--hc); display: grid; justify-items: center; gap: 1px; }
.hm b { font-size: 1rem; } .hm span { font-size: .72rem; opacity: .9; }
.hm:hover { outline: 2px solid var(--ink); outline-offset: 1px; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--hc); margin: 0 4px 0 10px; vertical-align: -1px; }
.nav-acc { color: var(--ink-2); text-decoration: none; padding: 8px 12px; border-radius: 8px; font-weight: 500; font-size: .95rem; display: inline-flex; align-items: center; gap: 6px; }
.nav-acc::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #c8962c, #b42318); box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #e9c46a; }
.nav-acc:hover { background: var(--bg-soft); color: var(--ink); }
.nav-acc.on { color: var(--son); font-weight: 600; }
.auth-wrap { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 760px) { .auth-wrap { grid-template-columns: minmax(0, 1fr); } }
.auth-side { padding: 22px; border-radius: 14px; background: var(--cloud), linear-gradient(140deg, #fff7e6, #fde9c4); background-size: 160px 80px, cover; border: 1px solid #ecc983; }
.prof { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.prof a { display: grid; text-decoration: none; color: var(--ink); }
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
@media (max-width: 900px) { .price-grid { grid-template-columns: minmax(0, 1fr); } }
.price { position: relative; display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 22px; }
.price h2 { margin: 0; font-size: 1.25rem; }
.price ul { margin: 6px 0 14px; padding-left: 18px; display: grid; gap: 6px; flex: 1; }
.price-num { font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; color: var(--son); }
.price.hot { border: 2px solid var(--gold); box-shadow: 0 24px 48px -26px rgba(150, 90, 0, .55); background: linear-gradient(180deg, #fffaf0, #fff 40%); }
.price-tag { position: absolute; top: -13px; left: 22px; background: var(--grad-hero); color: #fff; font-size: .78rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.pay-box { margin-top: 24px; border-color: #ecd9a8; }
.pay-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 640px) { .pay-grid { grid-template-columns: minmax(0, 1fr); } }
.pay-grid img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.code { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--gold-soft); padding: 1px 6px; border-radius: 4px; }

/* ==== _tich-hop.css ==== */
/* Tích hợp: nhóm công cụ, chân trang theo nhóm */
.tool-group + .tool-group { margin-top: 30px; }
.tg-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 1.15rem; margin: 0 0 12px; color: var(--son); }
.tg-h span { font-size: .9rem; font-weight: 500; color: var(--ink-2, #4a5263); }
.foot-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 3.4fr) minmax(0, .9fr); }
@media (max-width: 1060px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }
.foot-groups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1060px) { .foot-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .foot-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.foot-groups h4 { margin: 0 0 8px; font-size: .95rem; color: #f6d68c; }
.foot-groups ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }

/* ==== tuvi.css ==== */
/* ===== Trang Lá số Tử Vi (nhóm tuvi) — tiền tố tv- ===== */
.tv-toggles { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; }
.tv-toggles .check { align-items: center; cursor: pointer; }
.tv-toggles .check input { margin-top: 0; }
.tv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.tv-chip { font-size: .82rem; padding: 4px 10px; border-color: #f0c8c2; color: var(--son); }
.tv-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; margin-top: 8px; }
.tv-month { min-width: 0; border-left: 3px solid var(--line); }
.tv-month h4 { font-size: 1rem; }
.tv-month:has(.badge.tot) { border-left-color: var(--tot); }
.tv-month:has(.badge.xau) { border-left-color: var(--xau); }
.tv-month:has(.badge.trung) { border-left-color: var(--gold); }
.tv-month.tv-now { outline: 2px solid var(--gold); outline-offset: 1px; }
table.tv-dh tr.tv-cur td { background: var(--gold-soft); font-weight: 600; }
.tv-related a { color: var(--son); }

/* Điện thoại: lá số cuộn ngang trong khung, gợi ý vuốt */
@media (max-width: 640px) {
  .chart-shell { padding: 4px; }
  .chart-scroll { scroll-snap-type: x proximity; }
  .tv-toggles { gap: 6px 14px; }
}

/* In / Lưu PDF: chỉ giữ lá số và phần luận, khổ A4 dọc */
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  .tooltip, .tabs, .tv-chips, .tv-related, #cta-luan { display: none !important; }
  .chart-shell { page-break-after: always; break-after: page; }
  .chart-scroll { overflow: visible; }
  .tool-head { padding: 0 0 3mm !important; margin: 0 !important; background: none !important; color: #000 !important; min-height: 0 !important; }
  .tool-head h1 { color: #b42318 !important; font-size: 18pt !important; margin: 0 !important; text-shadow: none !important; }
  .tool-head p { display: none !important; }
  .tool-head::before, .tool-head::after { display: none !important; }
  .chart-scroll svg { width: auto; max-width: 100%; max-height: 240mm; margin: 0 auto; }
  #result .panel { border: none; box-shadow: none; padding: 0; margin-top: 0 !important; }
  .reading { max-width: none; }
  .reading h3 { break-after: avoid; }
  .cung-block, .tv-month, table.data tr { break-inside: avoid; }
  .tv-months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .badge { border-color: #999 !important; }
  a[href]::after { content: none !important; }
}

/* ==== tutru.css ==== */
/* Tứ Trụ · Bát Tự chuyên sâu (trang tu-tru.html). Tiền tố tt-. Dùng biến --c/--bgc của .h-kim/.h-moc/... */
.tt-c { color: var(--c, inherit); font-weight: 700; }
.tt-h { display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--bgc, var(--bg-soft)); color: var(--c, var(--ink)); font-weight: 600; font-size: .92em; line-height: 1.5; }
.tt-pillars .pillar { padding: 12px 8px; }
.tt-pillars .gz { font-size: 1.75rem; }
.tt-pillars .tt-tt { font-weight: 600; color: var(--son); }
.tt-tang { display: grid; gap: 1px; margin: 4px 0 6px; font-size: .78rem; color: var(--ink-2); }
.tt-tang i { font-style: normal; color: var(--ink-3); }
.tt-ts { margin-top: 2px; color: var(--ink-3); }
.tt-pane { min-width: 0; }
.tt-block { margin-top: 16px; min-width: 0; }
.tt-block > h3 { margin-top: 0; }
.tt-block h4 { font-size: 1rem; margin: 0 0 6px; }
.tt-stats { margin-bottom: 4px; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.tt-qh td:first-child { white-space: nowrap; }
.tt-stats .stat { min-width: 0; }
.tt-stats .stat .v { font-size: 1.2rem; line-height: 1.35; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tt-detail th[scope=row] { white-space: nowrap; }
.tt-detail th.tt-day, .tt-detail td:nth-child(4) { background: var(--son-soft); }
.tt-detail td { min-width: 96px; }
.tt-ts-item { display: block; font-size: .82rem; }
.tt-qh td:last-child { min-width: 220px; }
.tt-bars .bar { grid-template-columns: 112px minmax(0, 1fr) 56px; }
.tt-bars .fill { background: var(--c); }
.tt-me { font-style: normal; font-size: .72rem; color: var(--son); border: 1px solid #f3c2bd; border-radius: 999px; padding: 0 6px; margin-left: 2px; }
.tt-flags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tt-flag { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; min-width: 0; }
.tt-flag span { font-weight: 700; }
.tt-flag.ok span { color: var(--tot); }
.tt-flag.no span { color: var(--xau); }
.tt-flag small { color: var(--ink-2); font-size: .8rem; }
.tt-dk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tt-dk-i { border-radius: 12px; padding: 12px; background: var(--bgc); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); display: grid; gap: 2px; min-width: 0; }
.tt-dk-i .k { font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.tt-dk-i b { font-size: 1.35rem; color: var(--c); }
.tt-dk-i small { font-size: .78rem; color: var(--ink-2); }
.tt-dk-i.bad { background: #fff; border-style: dashed; }
.tt-goiy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
.tt-goiy p { margin: 0 0 8px; }
.tt-span2 { grid-column: 1 / -1; }
.tt-mau { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.tt-mau .swatches i { width: 20px; height: 20px; border-radius: 6px; }
.tt-mini { display: inline-block; width: 90px; height: 8px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.tt-mini i { display: block; height: 100%; background: linear-gradient(90deg, var(--son), #d08a2a); }
.tt-nhom { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tt-nhom > div { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: grid; gap: 2px; min-width: 0; }
.tt-nhom small { color: var(--ink-2); font-size: .78rem; line-height: 1.4; }
.tt-big { font-size: 1.4rem; font-weight: 800; color: var(--son); }
.tt-cards { display: grid; gap: 12px; }
.tt-card { border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 10px; padding: 12px 14px; }
.tt-dl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 12px; margin: 6px 0 0; font-size: .93rem; }
.tt-dl dt { color: var(--ink-3); font-weight: 600; }
.tt-dl dd { margin: 0; }
.tt-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tt-col { border: 1px solid var(--line); border-radius: 10px; padding: 10px; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.tt-col .badge { margin: 0; }
.tt-col-h { width: 100%; font-size: .82rem; color: var(--ink-3); }
.tt-col-h b { color: var(--ink); }
.tt-ts-row h4 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tt-dvt td, .tt-lnt td { vertical-align: middle; }
.tt-dvt .tt-why { min-width: 230px; max-width: 300px; margin-top: 4px; }
.tt-lnt td:nth-child(6) { min-width: 200px; }
table.data tr.tt-on > td { background: var(--gold-soft); }
table.data tr.tt-now > td:first-child { box-shadow: inset 3px 0 0 var(--son); }
.tt-nowtag { color: var(--son); font-weight: 600; margin-top: 2px; }
.tt-dv { white-space: nowrap; }
.tt-lnt .badge { margin: 2px 4px 2px 0; }
.tt-yr { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; text-align: center; }
@media (max-width: 760px) {
  .tt-nhom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt-dk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt-goiy { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .tt-flags { grid-template-columns: minmax(0, 1fr); }
  .tt-bars .bar { grid-template-columns: 92px minmax(0, 1fr) 50px; }
  .tt-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tt-dl dd { margin-bottom: 6px; }
  .tt-yr { flex-wrap: wrap; }
  .tt-yr p { order: -1; width: 100%; }
  .tt-pillars .gz { font-size: 1.55rem; }
  .tt-pane table.data { font-size: .88rem; }
  .tt-pane table.data th, .tt-pane table.data td { padding: 8px 7px; }
  .tt-block { padding: 16px 14px; }
}

/* ==== phongthuy.css ==== */
/* ===== Nhóm công cụ phong thủy: thước Lỗ Ban, la bàn, cửu tinh, xem tuổi (tiền tố pt-) ===== */
.pt-stack { display: grid; gap: 18px; }
.pt-stack > * { min-width: 0; }
.pt-h2 { margin: 0 0 6px; font-size: 1.3rem; }
.pt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-chip { border: 1px solid var(--line-2); background: #fff; color: var(--ink); border-radius: 999px; padding: 5px 12px; font: 500 .85rem var(--sans); cursor: pointer; }
.pt-chip:hover { border-color: var(--gold); background: #fffaf0; }
.pt-chip[aria-pressed="true"] { border-color: var(--son); color: var(--son); background: var(--son-soft); }
.pt-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pt-method { margin-top: 24px; }
.pt-method h3 { margin-top: 0; }
.pt-method ul, .pt-method ol { margin: 0 0 10px; padding-left: 20px; }
.pt-method li { margin-bottom: 4px; }
.pt-note { font-size: .85rem; color: var(--ink-3); }

/* --- Thước Lỗ Ban --- */
.pt-ruler-box { background: linear-gradient(180deg, #fffaf0, #fff); border: 1px solid #ecd9a8; border-radius: 14px; padding: 14px; }
.pt-ruler-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pt-ruler-val { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; color: var(--son); font-variant-numeric: tabular-nums; line-height: 1; }
.pt-ruler-val small { font-size: .95rem; font-weight: 600; color: var(--ink-3); margin-left: 4px; }
.pt-ruler { display: block; width: 100%; height: auto; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; border-radius: 8px; font-family: var(--sans); }
.pt-ruler:active { cursor: grabbing; }
.pt-ruler:focus-visible { outline: 2px solid var(--son); outline-offset: 3px; }
.pt-range { width: 100%; margin: 10px 0 2px; accent-color: var(--son); }
.pt-step { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.pt-res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) { .pt-res { grid-template-columns: minmax(0, 1fr); } }
.pt-card { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 14px 14px 12px; background: #fff; overflow: hidden; min-width: 0; }
.pt-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c, var(--line-2)); }
.pt-card.tot { --c: var(--son); border-color: #f3c2bd; }
.pt-card.xau { --c: #1b1b1b; }
.pt-card.main { box-shadow: 0 0 0 2px var(--gold-2), var(--shadow); }
.pt-card h3 { margin: 2px 0 2px; font-size: 1rem; }
.pt-card .pt-cung { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: 6px 0 2px; }
.pt-card.tot .pt-cung { color: var(--son); }
.pt-card.xau .pt-cung { color: #1b1b1b; }
.pt-card p { margin: 4px 0; font-size: .9rem; }
.pt-tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: #8a5a00; background: var(--gold-soft); border: 1px solid #f0dcae; border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: 2px; }
.pt-jump { background: none; border: 0; padding: 0; color: var(--son); font: 600 .88rem var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pt-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .82rem; color: var(--ink-2); margin-top: 6px; }
.pt-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; }

/* --- La bàn --- */
.pt-compass-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 20px; align-items: start; }
@media (max-width: 820px) { .pt-compass-wrap { grid-template-columns: minmax(0, 1fr); } }
.pt-compass-stage { position: relative; max-width: 520px; width: 100%; margin: 0 auto; }
.pt-compass { display: block; width: 100%; height: auto; font-family: var(--sans); touch-action: none; }
.pt-read { border-radius: 14px; padding: 16px; border: 1px solid var(--line); background: #fff; }
.pt-read.tot { border-color: #b7dfc5; background: linear-gradient(180deg, var(--tot-soft), #fff 70%); }
.pt-read.xau { border-color: #f3c2bd; background: linear-gradient(180deg, var(--xau-soft), #fff 70%); }
.pt-read .pt-deg { font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pt-read dl { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 10px; margin: 12px 0 0; font-size: .92rem; }
.pt-read dt { color: var(--ink-3); font-weight: 600; font-size: .84rem; padding-top: 1px; }
.pt-read dd { margin: 0; }
.pt-status { font-size: .88rem; color: var(--ink-2); margin: 8px 0 0; min-height: 1.3em; }
.pt-manual { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; align-items: center; }
.pt-manual input[type=range] { width: 100%; accent-color: var(--son); }

/* --- Cửu tinh --- */
.pt-ninegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px; border-radius: 16px; background: linear-gradient(135deg, #9b1519, #c8962c); max-width: 600px; margin: 0 auto; width: 100%; }
.pt-cell { position: relative; aspect-ratio: 1 / .92; background: #fff; border-radius: 10px; padding: 8px 8px 6px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; overflow: hidden; }
.pt-cell::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--sc, transparent); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.pt-cell.mid { background: #fff8e8; }
.pt-cell .pt-dir { font-size: .78rem; font-weight: 700; color: var(--ink-3); line-height: 1.2; }
.pt-cell .pt-num { font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.pt-cell .pt-num small { font-size: .9rem; font-weight: 700; color: var(--gold-text, #8a5a00); margin-left: 6px; letter-spacing: 0; }
.pt-cell .pt-sn { font-size: .78rem; font-weight: 600; line-height: 1.2; }
.pt-cell.tot .pt-num { color: var(--tot); }
.pt-cell.xau .pt-num { color: var(--xau); }
.pt-cell.trung .pt-num { color: #8a5a00; }
.pt-cell .pt-flag { font-size: .66rem; color: var(--xau); font-weight: 600; line-height: 1.15; }
@media (max-width: 460px) { .pt-cell { padding: 6px 6px 7px; } .pt-cell .pt-num { font-size: 1.6rem; } .pt-cell .pt-dir, .pt-cell .pt-sn { font-size: .7rem; } .pt-cell .pt-flag { display: none; } }
.pt-grid-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.pt-star { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 800; font-size: .9rem; color: #fff; background: var(--son); flex: 0 0 auto; }
.pt-star.tot { background: var(--tot); } .pt-star.trung { background: #c8962c; } .pt-star.xau { background: var(--xau); }
.pt-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.pt-month { text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 10px; font: inherit; color: var(--ink); cursor: pointer; display: grid; gap: 1px; }
.pt-month:hover { border-color: var(--gold-2); }
.pt-month[aria-pressed="true"] { border-color: var(--son); background: var(--son-soft); }
.pt-month b { font-size: .95rem; }
.pt-month span { font-size: .78rem; color: var(--ink-3); }

/* --- Xem tuổi --- */
.pt-years { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .pt-years { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pt-year { border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; background: #fff; min-width: 0; }
.pt-year.ok { border-color: #b7dfc5; background: var(--tot-soft); }
.pt-year.no { background: #fff; }
.pt-year b { display: block; font-size: 1.15rem; letter-spacing: -.02em; }
.pt-year .pt-yc { font-size: .78rem; color: var(--ink-3); }
.pt-year .pt-ys { font-size: .78rem; font-weight: 600; margin-top: 3px; line-height: 1.3; }
.pt-year.ok .pt-ys { color: var(--tot); }
.pt-year.no .pt-ys { color: var(--xau); }
.pt-verdict { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); margin-bottom: 14px; }
.pt-verdict.ok { border-color: #b7dfc5; background: var(--tot-soft); }
.pt-verdict.no { border-color: #f3c2bd; background: var(--xau-soft); }
.pt-verdict h3 { margin: 0; font-size: 1.15rem; }
.pt-verdict p { margin: 2px 0 0; font-size: .92rem; }
.pt-mark { flex: 0 0 auto; width: 40px; height: 40px; }
.pt-bars { display: grid; gap: 8px; }
.pt-bar { display: grid; grid-template-columns: 124px minmax(0, 1fr) 70px; gap: 10px; align-items: center; font-size: .9rem; }
.pt-bar .pt-track { height: 12px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); overflow: hidden; }
.pt-bar .pt-fill { height: 100%; border-radius: 999px; }
@media (max-width: 460px) { .pt-bar { grid-template-columns: 112px minmax(0, 1fr) 50px; gap: 8px; font-size: .84rem; } .pt-bar > span:first-child { white-space: nowrap; } }
.pt-tabpanel[hidden] { display: none; }
.pt-mgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 640px) { .pt-mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pt-m { border: 1px solid var(--line); border-radius: 10px; padding: 8px; text-align: center; background: #fff; min-width: 0; }
.pt-m b { display: block; font-size: .95rem; }
.pt-m span { display: block; font-size: .72rem; line-height: 1.25; color: var(--ink-3); }
.pt-m.tot { border-color: #b7dfc5; background: var(--tot-soft); }
.pt-m.tot span { color: var(--tot); font-weight: 600; }
.pt-m.xau { border-color: #f3c2bd; background: var(--xau-soft); }
.pt-m.xau span { color: var(--xau); }
.pt-m.trung { border-color: #f0dcae; background: var(--gold-soft); }
@media (max-width: 460px) { .pt-hs { display: none; } }
.pt-items { border-top: 1px solid var(--line); }
.pt-item { display: grid; grid-template-columns: 110px 160px minmax(0, 1fr); gap: 6px 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: .93rem; align-items: start; }
@media (max-width: 640px) { .pt-item { grid-template-columns: auto minmax(0, 1fr); } .pt-item > span:last-child { grid-column: 1 / -1; color: var(--ink-2); } }
.pt-hb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pt-hb-head h3 { margin: 0 6px 0 2px; font-size: 1.05rem; }
.pt-gy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pt-gy { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fff; min-width: 0; }
.pt-gy h3 { margin: 0 0 2px; font-size: 1rem; }
.pt-gy > p { margin: 0 0 6px; }
.pt-gy-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-top: 1px dashed var(--line); font-size: .9rem; }
.pt-gy-row > span:first-child { color: var(--ink-3); font-size: .84rem; padding-top: 1px; }

/* ==== boi.css ==== */
/* ===== Nhóm Bói & Huyền học: tarot, cung hoàng đạo, giải mộng, cân xương, giờ xuất hành, nhịp sinh học, bói tình yêu (tiền tố boi-) ===== */
.boi-sec { padding-top: 28px; padding-bottom: 28px; }
.boi-stack { display: grid; gap: 18px; }
.boi-stack > * { min-width: 0; }
.boi-h2 { margin: 0 0 6px; font-size: 1.3rem; }
.boi-lead { color: var(--ink-2); margin: 0 0 14px; }
.boi-lienquan { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.boi-lienquan a { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid #ecd9a8; background: #fffaf0; text-decoration: none; color: var(--ink); font-size: .9rem; }
.boi-lienquan a:hover { border-color: var(--gold); color: var(--son); }
.boi-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.boi-chip { font: 500 .88rem var(--sans); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); cursor: pointer; }
.boi-chip:hover { border-color: var(--gold); color: var(--ink); }
.boi-chip[aria-pressed="true"] { background: var(--son); border-color: var(--son); color: #fff; }
.boi-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: .95rem; }
.boi-kv dt { color: var(--ink-3); font-weight: 600; font-size: .85rem; padding-top: 2px; }
.boi-kv dd { margin: 0; min-width: 0; }
.boi-score { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.boi-score > div { min-width: 0; flex: 1 1 220px; }
.boi-bar { height: 10px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); overflow: hidden; }
.boi-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #c8962c, #b42318); }
.boi-parts { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.boi-parts li { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.boi-parts .t { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-weight: 600; }

/* ---- Tarot ---- */
.boi-tarot-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.boi-table { padding: 22px 14px; border-radius: 16px; background: var(--cloud), radial-gradient(ellipse at 50% 40%, #fff9ec, #f7e6c2); background-size: 160px 80px, cover; border: 1px solid #ecc983; }
.boi-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 14px; }
.boi-slot { display: grid; gap: 8px; justify-items: center; width: clamp(96px, 26vw, 150px); }
.boi-cards.n1 .boi-slot { width: clamp(150px, 46vw, 190px); }
.boi-vt { font-size: .82rem; font-weight: 600; color: #6e1010; text-align: center; line-height: 1.3; }
.boi-card { position: relative; width: 100%; aspect-ratio: 200 / 340; padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px; border-radius: 12px; }
.boi-card:focus-visible { outline: 3px solid var(--son); outline-offset: 4px; }
.boi-card-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.boi-card.up .boi-card-in { transform: rotateY(180deg); }
.boi-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 26px -14px rgba(80, 10, 10, .75); }
.boi-face svg { display: block; width: 100%; height: 100%; }
.boi-front { transform: rotateY(180deg); }
.boi-card.nguoc .boi-front svg { transform: rotate(180deg); }
.boi-card:not(.up):hover .boi-card-in { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .boi-card-in { transition: none; } .boi-card:not(.up):hover .boi-card-in { transform: none; } }
.boi-doc { display: grid; gap: 14px; margin-top: 18px; }
.boi-doc article { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.boi-doc article > div { min-width: 0; }
.boi-doc .mini { width: 92px; border-radius: 8px; overflow: hidden; box-shadow: 0 6px 14px -8px rgba(80, 10, 10, .6); }
.boi-doc .mini svg { display: block; width: 100%; height: auto; }
.boi-doc .mini.nguoc svg { transform: rotate(180deg); }
.boi-doc h3 { margin: 0 0 2px; font-size: 1.1rem; }
.boi-doc .vt { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-text, #8a5a00); }
.boi-doc dl { margin: 8px 0 0; }
@media (max-width: 520px) { .boi-doc article { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px; } .boi-doc .mini { width: 64px; } }
details.boi-ynghia { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; background: #fff; }
details.boi-ynghia + details.boi-ynghia { margin-top: 10px; }
details.boi-ynghia summary { cursor: pointer; }
details.boi-ynghia dl { margin: 10px 0 0; }
details.boi-ynghia dt { font-weight: 700; margin-top: 14px; color: var(--son); }
details.boi-ynghia dd { margin: 4px 0 0; }
details.boi-ynghia dd p { margin: 0 0 4px; }

/* ---- Cung hoàng đạo ---- */
.boi-zd-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
@media (max-width: 520px) { .boi-zd-hero { grid-template-columns: minmax(0, 1fr); } }
.boi-glyph { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #c22a1e, #6e1013); box-shadow: 0 0 0 4px #f6dd94, 0 14px 30px -14px rgba(80, 10, 10, .8); }
.boi-glyph svg { width: 56px; height: 56px; }
.boi-glyph.sm { width: 46px; height: 46px; box-shadow: 0 0 0 2px #f6dd94; }
.boi-glyph.sm svg { width: 28px; height: 28px; }
.boi-zd-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; margin: 0; padding-left: 18px; }
@media (max-width: 640px) { .boi-zd-list { grid-template-columns: minmax(0, 1fr); } }
.boi-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: end; }
.boi-pair .field { grid-column: auto; }
@media (max-width: 560px) { .boi-pair { grid-template-columns: minmax(0, 1fr); } .boi-pair .x { padding: 0; } }
.boi-pair .x { padding-bottom: 12px; color: var(--son); font-weight: 700; }
.boi-zd-day { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 980px) { .boi-zd-day { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .boi-zd-day { grid-template-columns: minmax(0, 1fr); } }
.boi-zd-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: #fff; display: grid; gap: 8px; position: relative; overflow: hidden; scroll-margin-top: 90px; }
.boi-zd-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c, var(--gold)); }
.boi-zd-card.me { border-color: var(--son); box-shadow: inset 0 0 0 1px var(--son); }
.boi-zd-card header { display: flex; gap: 12px; align-items: center; }
.boi-zd-card dl { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 6px 10px; margin: 0; font-size: .9rem; }
.boi-zd-card dt { color: var(--ink-3); font-weight: 600; font-size: .82rem; }
.boi-zd-card dd { margin: 0; }
.boi-zd-card footer { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--ink-2); border-top: 1px dashed var(--line); padding-top: 8px; }

/* ---- Giải mộng ---- */
.boi-mo-search { position: sticky; top: 70px; z-index: 5; display: grid; gap: 10px; padding: 14px; margin-bottom: 18px; background: rgba(255, 255, 255, .96); border: 1px solid #ecd9a8; border-radius: 14px; box-shadow: var(--shadow); }
@media (max-width: 980px) { .boi-mo-search { position: static; } .boi-mo-search .boi-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } .boi-mo-search .boi-chip { white-space: nowrap; } }
.boi-mo-search .field { grid-column: auto; }
.boi-mo-search .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.boi-mo-nhom { margin-top: 26px; scroll-margin-top: 170px; }
.boi-mo-nhom h2 { font-size: 1.3rem; }
.boi-dem { font-size: .8rem; font-weight: 600; color: var(--gold-text, #8a5a00); background: var(--gold-soft); border-radius: 999px; padding: 2px 9px; }
.boi-mo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .boi-mo-grid { grid-template-columns: minmax(0, 1fr); } }
.boi-mo { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #fff; scroll-margin-top: 170px; min-width: 0; }
.boi-mo h3 { margin: 0 0 8px; font-size: 1.05rem; color: #6e1010; }
.boi-mo p { margin: 0 0 6px; font-size: .93rem; }
.boi-mo p:last-child { margin: 0; }
.boi-mo:target, .boi-mo.hl { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200, 150, 44, .2); }
.boi-tag { display: inline-block; font-size: .72rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-right: 8px; vertical-align: 1px; }
.boi-tag.dg { background: var(--son-soft); color: var(--son); }
.boi-tag.tl { background: #e4edfa; color: #1d4f91; }

/* ---- Cân xương ---- */
.boi-thang { position: relative; margin: 40px 0 22px; }
.boi-thang .track { height: 12px; border-radius: 999px; background: linear-gradient(90deg, #e3d3b0, #e9c46a 45%, #c8501e 75%, #9b1519); }
.boi-thang .mark { position: absolute; top: -7px; width: 4px; height: 26px; border-radius: 2px; background: var(--ink); transform: translateX(-2px); }
.boi-thang .mark b { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .8rem; }
.boi-thang .ends { display: flex; justify-content: space-between; font-size: .78rem; color: var(--ink-3); margin-top: 4px; }
.boi-bang4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .boi-bang4 { grid-template-columns: minmax(0, 1fr); } }
.boi-bang4 table.data { font-size: .85rem; }
.boi-stack > .table-scroll:first-child td { white-space: nowrap; }
.boi-bang4 table.data td, .boi-bang4 table.data th { padding: 6px 8px; }

/* ---- Giờ xuất hành ---- */
.boi-gio { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 760px) { .boi-gio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .boi-gio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.boi-gio button { font: inherit; text-align: left; display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid #f3c2bd; background: var(--xau-soft); color: var(--ink); cursor: pointer; min-width: 0; }
.boi-gio button.tot { border-color: #b7dfc5; background: var(--tot-soft); }
.boi-gio button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.boi-gio button.now { outline: 2px dashed var(--son); outline-offset: 2px; }
.boi-gio .c { font-weight: 700; }
.boi-gio .k { font-size: .78rem; color: var(--ink-3); }
.boi-gio .n { font-size: .88rem; font-weight: 600; }
.boi-gio button.tot .n { color: var(--tot); }
.boi-gio button:not(.tot) .n { color: var(--xau); }
.boi-huong { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; align-items: center; }
@media (max-width: 560px) { .boi-huong { grid-template-columns: minmax(0, 1fr); } .boi-huong svg { max-width: 200px; margin: 0 auto; } }
.boi-huong svg { width: 100%; height: auto; display: block; font-family: var(--sans); }
.boi-ld { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .boi-ld { grid-template-columns: minmax(0, 1fr); } }
.boi-ld div { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fff; }
.boi-ld b { display: block; }

/* ---- Nhịp sinh học ---- */
.boi-chart { width: 100%; height: auto; display: block; font-family: var(--sans); }
.boi-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .85rem; color: var(--ink-2); margin-top: 8px; }
.boi-legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: 4px; margin-right: 6px; background: var(--c); }
.boi-nsh { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.boi-nsh .stat { border-top: 4px solid var(--c); }
.boi-nsh .v { color: var(--c); }

/* ---- Bói tình yêu ---- */
.boi-love-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .boi-love-form { grid-template-columns: minmax(0, 1fr); } }
.boi-love-form fieldset { border: 1px solid #ecd9a8; border-radius: 14px; padding: 14px; margin: 0; min-width: 0; background: #fffdf8; }
.boi-love-form legend { font-weight: 700; color: var(--son); padding: 0 6px; }
.boi-heart { width: 150px; height: auto; flex: 0 0 auto; }
.boi-ai { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 520px) { .boi-ai { grid-template-columns: minmax(0, 1fr); } }
.boi-ai > div { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fff; min-width: 0; }

/* ==== vanhoa.css ==== */
/* ===== Nhóm VĂN HÓA TÂM LINH: van-khan, ngay-le, sao-han, dat-ten-con =====
   Tiền tố: vk- (văn khấn), nl- (ngày lễ), sh- (sao hạn), dt- (đặt tên). */

/* ---- Văn khấn ---- */
.vk-tools { display: grid; gap: 12px; }
.vk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vk-chip { font: 500 .88rem var(--sans); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); cursor: pointer; }
.vk-chip:hover { border-color: var(--gold); color: var(--ink); }
.vk-chip[aria-pressed="true"] { background: var(--son); border-color: var(--son); color: #fff; }
.vk-list { display: grid; gap: 22px; }
.vk-group { display: grid; gap: 10px; min-width: 0; }
.vk-gh { font-size: 1.2rem; margin: 6px 0 2px; }
.vk-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow); scroll-margin-top: 90px; min-width: 0; }
.vk-item[open] { border-color: #ecd9a8; }
.vk-item > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; }
.vk-item > summary::-webkit-details-marker { display: none; }
.vk-item > summary:hover b { color: var(--son); }
.vk-sum { display: grid; gap: 2px; min-width: 0; flex: 1; }
.vk-sum b { font-size: 1.02rem; line-height: 1.35; }
.vk-chev { width: 12px; height: 8px; flex: 0 0 auto; color: var(--ink-3); transition: transform .15s; }
.vk-item[open] .vk-chev { transform: rotate(180deg); }
.vk-body { padding: 0 18px 18px; border-top: 1px solid var(--line); }
.vk-meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 22px; font-size: .93rem; }
.vk-meta h3, .vk-h { font-size: .95rem; margin: 16px 0 6px; color: var(--son); }
.vk-meta ul { margin: 0; padding-left: 18px; }
.vk-meta p { margin: 0; }
.vk-x { margin-top: 14px; max-width: 420px; }
.vk-van { white-space: pre-line; background: #fffdf7; border: 1px solid #f0e2bd; border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: 16px 18px; line-height: 1.75; font-size: 1rem; color: #2b2416; overflow-wrap: anywhere; }
.vk-fill { background: #fdf0c8; color: inherit; padding: 0 3px; border-radius: 3px; font-weight: 600; }
.vk-blank { display: inline-block; min-width: 4em; border-bottom: 1px dashed #b8892a; color: #b8892a; letter-spacing: .1em; line-height: 1.2; }
.vk-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
@media (max-width: 640px) {
  .vk-meta { grid-template-columns: minmax(0, 1fr); }
  .vk-item > summary { padding: 12px 14px; }
  .vk-body { padding: 0 14px 14px; }
  .vk-van { padding: 14px; font-size: .97rem; }
}
@media print {
  body.vk-print-one .tool-head, body.vk-print-one .vk-tools, body.vk-print-one #vk-count, body.vk-print-one .panel-flat,
  body.vk-print-one .vk-group:not(:has(.vk-printing)), body.vk-print-one .vk-item:not(.vk-printing), body.vk-print-one .vk-gh { display: none !important; }
  .vk-item { box-shadow: none; border: 0; }
  .vk-item > summary .vk-chev { display: none; }
  .vk-van { background: #fff; border: 0; padding: 0; font-size: 12.5pt; }
  .vk-fill { background: none; font-weight: 400; }
  .vk-blank { color: #000; }
  .vk-fill { padding: 0; }
  body.vk-print-one .toast { display: none !important; }
}

/* ---- Ngày lễ ---- */
.nl-next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nl-next-item { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid #f0dcae; background: var(--gold-soft); color: var(--ink); text-decoration: none; min-width: 0; }
.nl-next-item:hover { border-color: var(--gold); color: var(--ink); }
.nl-big { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; color: var(--son); line-height: 1.1; }
.nl-big small { font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.nl-month { font-size: 1rem; margin: 22px 0 8px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.nl-list { display: grid; gap: 10px; }
.nl-card { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 14px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; scroll-margin-top: 90px; }
.nl-card.nghi { border-left: 3px solid var(--son); }
.nl-date { display: grid; justify-items: center; text-align: center; padding: 6px 4px; border-radius: 10px; background: var(--son-soft); color: var(--son); }
.nl-date .small { white-space: nowrap; font-size: .76rem; }
.nl-d { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.nl-main { min-width: 0; }
.nl-main h3 { margin: 0 0 4px; font-size: 1.05rem; }
.nl-tags { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px 0; align-items: center; }
.nl-mo { margin: 0; color: var(--ink-2); }
.nl-vk { margin: 6px 0 0; }
.nl-cd { display: inline-block; font-size: .85rem; color: var(--ink-2); white-space: nowrap; }
.nl-cd b { color: var(--son); font-size: 1.05rem; }
.nl-cd.now { color: #fff; background: var(--son); padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.nl-cd.past { color: var(--ink-3); }
.nl-tk tr.nl-tiet td { background: #fffaf0; }
@media (max-width: 760px) {
  .nl-next-grid { grid-template-columns: minmax(0, 1fr); }
  .nl-card { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .nl-right { grid-column: 2; }
}

/* ---- Sao hạn ---- */
.sh-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sh-box { display: grid; gap: 6px; align-content: start; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #fff; min-width: 0; }
.sh-box.tot { border-color: #b7dfc5; background: var(--tot-soft); }
.sh-box.xau { border-color: #f0dcae; background: var(--gold-soft); }
.sh-box p { margin: 0; }
.sh-box .badge { justify-self: start; }
.sh-name { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.sh-cung { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: center; margin-bottom: 12px; }
.sh-svg { width: 100%; max-width: 200px; height: auto; }
.sh-ngay tr.sh-ke td { background: var(--gold-soft); font-weight: 600; }
.sh-bang { max-height: 560px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.sh-bang table.data { margin: 0; }
.sh-bang thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
.sh-bang tr.sh-me td { background: var(--son-soft); }
.sh-bang .badge { white-space: nowrap; }
@media (max-width: 640px) {
  .sh-pair, .sh-cung { grid-template-columns: minmax(0, 1fr); }
  .sh-svg { max-width: 170px; justify-self: center; }
  .sh-bang .badge { margin-right: 0; }
}

/* ---- Đặt tên con ---- */
.dt-need { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.dt-need > div { display: grid; gap: 4px; }
.dt-h { display: inline-flex; align-items: center; font-weight: 700; color: var(--c, var(--ink-2)); background: var(--bgc, var(--bg-soft)); border-radius: 999px; padding: 3px 12px 3px 10px; font-size: .95rem; margin-right: 4px; }
.dt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.dt-card { display: grid; gap: 3px; text-align: left; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; min-width: 0; }
.dt-card:hover { border-color: var(--gold); box-shadow: 0 10px 22px -16px rgba(120, 60, 0, .5); }
.dt-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.dt-card-top b { font-size: 1.08rem; }
.dt-score { font-weight: 800; color: var(--son); font-variant-numeric: tabular-nums; }
.dt-res { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.dt-res-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.dt-items { display: grid; gap: 14px; margin-top: 16px; }
.dt-item { min-width: 0; }
.dt-item-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.dt-pt { font-weight: 800; color: var(--son); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt-pt small { font-weight: 500; color: var(--ink-3); }
.dt-item .track { height: 8px; margin: 6px 0; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.dt-item .fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #c8962c, #b42318); }
.dt-item p { margin: 0; color: var(--ink-2); }
@media (max-width: 640px) { .dt-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==== Tích hợp 2: menu 5 nhóm, lưới công cụ gọn ==== */
.nav-btn { white-space: nowrap; }
@media (min-width: 981px) and (max-width: 1240px) {
  .brand-sub { display: none; }
  .nav-btn { padding: 8px 8px; font-size: .9rem; }
  .nav a.nav-acc { padding: 8px 8px; }
  .nav a.cta { padding: 8px 12px; }
}
@media (min-width: 981px) and (max-width: 1080px) { .nav a.cta { display: none; } }
.tool-group { margin-top: 22px; }
.tool-group .tools { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tool-group .tool { flex-direction: column; gap: 10px; padding: 18px 16px; }
.tool-group .tool h3 { font-size: 1rem; margin: 0 0 4px; }
.tool-group .tool p { font-size: .86rem; margin: 0; }
@media (max-width: 1100px) { .tool-group .tools { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tool-group .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tool-group .tool { padding: 14px 12px; } }
@media (max-width: 1360px) { .brand-sub { display: none; } }

/* ==== Thương hiệu: hình mờ vùng kết quả, tiêu đề khi in ==== */
.tool-grid > section { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='220'%3E%3Ctext x='20' y='150' transform='rotate(-24 170 110)' font-family='Arial,sans-serif' font-size='24' font-weight='800' letter-spacing='3' fill='%23b42318' fill-opacity='.045'%3ETH%C3%82Y T%E1%BB%AC VI%3C/text%3E%3C/svg%3E"); background-repeat: repeat; }
.print-brand { display: none; }
@media print {
  .print-brand { display: flex !important; align-items: center; gap: 12px; padding: 0 0 10px; margin-bottom: 14px; border-bottom: 2px solid #c8962c; }
  .print-brand .brand-mark { width: 34px; height: 34px; }
  .print-brand b { display: block; color: #b42318; font-size: 16pt; }
  .print-brand span { font-size: 9pt; color: #555; }
  .tool-grid > section { background-image: none; }
  body::after { content: "© Thiên Tử Vi — tài liệu chỉ dùng cho mục đích cá nhân, chia sẻ vui lòng ghi nguồn."; display: block; margin-top: 16px; font-size: 8.5pt; color: #666; text-align: center; }
}

/* ==== Luận giải chuyên sâu (AI) ==== */
.ai-box { border: 1.5px solid #e7c98a; background: linear-gradient(180deg, #fffaf0, #fff 60%); }
.ai-head { display: flex; gap: 16px; align-items: flex-start; }
.ai-head h3 { margin: 0 0 4px; font-size: 1.25rem; }
.ai-head p { margin: 0; }
.ai-seal { width: 52px; height: 52px; flex: none; }
.ai-pk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.ai-pk > div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.ai-pk ul { margin: 6px 0 0; padding-left: 18px; font-size: .92rem; display: grid; gap: 2px; }
@media (max-width: 640px) { .ai-pk { grid-template-columns: minmax(0, 1fr); } .ai-head { flex-direction: column; } }
.ai-act { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.ai-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 14px; margin: 16px 0; padding-left: 20px; font-size: .92rem; color: var(--ink-3, #6b7486); }
.ai-steps li.run { color: var(--son); font-weight: 700; }
.ai-steps li.run::after { content: " · đang viết…"; font-weight: 500; }
.ai-steps li.ok { color: var(--tot, #1f7a45); }
.ai-steps li.ok::after { content: " ✓"; }
.ai-sec { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 18px; }
.ai-sec h2, .ai-sec h3 { color: var(--son); margin: 0 0 8px; }
.ai-sec h4 { margin: 16px 0 6px; font-size: 1.02rem; }
.ai-sec p, .ai-sec li { line-height: 1.75; }
.ai-doc { max-width: 900px; margin: 0 auto; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='220'%3E%3Ctext x='20' y='150' transform='rotate(-24 170 110)' font-family='Arial,sans-serif' font-size='24' font-weight='800' letter-spacing='3' fill='%23b42318' fill-opacity='.04'%3ETH%C3%82Y T%E1%BB%AC VI%3C/text%3E%3C/svg%3E"); padding: 8px 0 24px; }
.ai-cover { display: flex; gap: 18px; align-items: center; padding: 22px; border: 2px solid #e7c98a; border-radius: 16px; background: linear-gradient(135deg, #fff7e6, #fff); }
.ai-cover .ai-seal { width: 72px; height: 72px; }
.ai-cover h1 { margin: 2px 0 4px; font-size: 1.7rem; }
.ai-chart { margin: 18px 0; }
.ai-toc { background: var(--bg-soft, #f6f7f9); border-radius: 12px; padding: 14px 18px; margin: 18px 0; }
.ai-toc ol { margin: 6px 0 0; padding-left: 20px; columns: 2; font-size: .95rem; }
.ai-note { margin-top: 24px; border-top: 1px dashed var(--line); padding-top: 12px; }
@media (max-width: 640px) { .ai-cover { flex-direction: column; align-items: flex-start; } .ai-toc ol { columns: 1; } }
@media print {
  .ai-doc { background-image: none; max-width: none; }
  .ai-sec { break-inside: auto; }
  .ai-sec h2 { break-after: avoid; }
  .ai-chart { break-after: page; }
  .ai-chart .chart-scroll { overflow: visible !important; }
}

/* ==== Kiến thức (bài viết) ==== */
.nav a.nav-kt { font-weight: 500; }
.nav a.nav-kt.on { color: var(--son); }
@media (min-width: 981px) and (max-width: 1240px) { .nav a.nav-kt { padding: 8px 8px; font-size: .9rem; } }
.kt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .kt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .kt-grid { grid-template-columns: minmax(0, 1fr); } }
.kt-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.kt-card:hover { border-color: #e7c98a; box-shadow: 0 14px 30px -22px rgba(150, 90, 0, .6); color: var(--ink); }
.kt-card h3 { margin: 0; font-size: 1.05rem; line-height: 1.4; }
.kt-card p { margin: 0; color: var(--ink-2); font-size: .92rem; flex: 1; }
.kt-cat { font-size: .8rem; font-weight: 700; color: var(--son); }
.kt-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 36px; padding-top: 24px; align-items: start; }
@media (max-width: 960px) { .kt-wrap { grid-template-columns: minmax(0, 1fr); } }
.kt-bc { grid-column: 1 / -1; color: var(--ink-3); }
.kt-bc a { color: var(--ink-2); }
.kt-art { min-width: 0; max-width: 760px; }
.kt-art h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.2; margin: 0 0 8px; letter-spacing: -.02em; }
.kt-lead { font-size: 1.12rem; color: var(--ink-2); line-height: 1.6; border-left: 3px solid var(--gold); padding-left: 14px; }
.kt-toc { background: #fffaf0; border: 1px solid #f0dcb0; border-radius: 12px; padding: 14px 18px; margin: 20px 0; }
.kt-toc ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.kt-body h2 { margin-top: 1.8em; color: var(--son); scroll-margin-top: 90px; }
.kt-body h3 { margin-top: 1.4em; }
.kt-body p, .kt-body li { line-height: 1.8; font-size: 1.04rem; }
.kt-body table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .95rem; display: block; overflow-x: auto; }
.kt-body th, .kt-body td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.kt-body th { background: var(--bg-soft, #f6f7f9); }
.kt-body blockquote { margin: 1.2em 0; padding: 10px 16px; border-left: 3px solid var(--son); background: #fff8f6; color: var(--ink-2); }
.kt-tools { margin-top: 28px; padding: 16px; border-radius: 12px; background: var(--bg-soft, #f6f7f9); }
.kt-tools div { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.kt-note { margin-top: 22px; }
.kt-side { position: sticky; top: 90px; }
.kt-cta { padding: 20px; border-radius: 16px; background: var(--cloud), linear-gradient(140deg, #fff7e6, #fde9c4); background-size: 160px 80px, cover; border: 1px solid #ecc983; display: grid; gap: 8px; }
.kt-cta p { margin: 0; }
@media (max-width: 960px) { .kt-side { position: static; } }
.kt-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.kt-chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; text-decoration: none; color: var(--ink-2); font-size: .92rem; font-weight: 500; }
.kt-chip span { color: var(--ink-3); font-weight: 400; margin-left: 2px; }
.kt-chip.on, .kt-chip:hover { border-color: var(--son); color: var(--son); }
.brand-name { white-space: nowrap; }
@media (min-width: 981px) and (max-width: 1360px) {
  .nav-btn, .nav a.nav-kt, .nav a.nav-acc { padding: 8px 7px; font-size: .9rem; }
  .nav a.cta { padding: 8px 12px; font-size: .9rem; }
}
@media (min-width: 981px) and (max-width: 1150px) { .nav a.cta { display: none; } }

/* ==== tudien.css ==== */
/* ===== Từ điển Tử Vi (gen/tudien-pages.mjs) — tiền tố td- ===== */
/* Lưu ý: main.css đã có .td-n, .td-s (trang khác) nên nhóm này không dùng hai tên đó. */
.td-page { max-width: 980px; padding-bottom: 40px; }
.td-page > * { min-width: 0; }
.td-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .88rem; margin-bottom: 14px; color: rgba(255, 245, 230, .85); }
.td-crumb a { color: #ffe9b0; text-decoration: none; }
.td-crumb a:hover { text-decoration: underline; color: #fff; }
.td-crumb [aria-current] { color: #fff; font-weight: 600; }
.td-sep { opacity: .7; }
.td-h2 { margin-top: 36px; }
.td-h3 { margin-top: 24px; }
.td-v-sm { font-size: 1.1rem !important; line-height: 1.3; padding-top: 4px; }

/* Chip và lưới thẻ */
.td-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.td-chip { display: inline-block; font-size: .9rem; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); text-decoration: none; line-height: 1.4; }
a.td-chip:hover { border-color: var(--son); color: var(--son); }
.td-chip-plain { background: var(--gold-soft); border-color: #f0dcae; color: #6b4a08; }
.td-chip.td-cat { border-color: #b7dfc5; }
.td-chip.td-hung { border-color: #f3c2bd; }
.td-chip.td-trung { border-color: #f0dcae; }
.td-chip.td-cat::before, .td-chip.td-hung::before, .td-chip.td-trung::before,
.td-legend i { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--tot); }
.td-chip.td-hung::before, .td-legend i.td-hung { background: var(--xau); }
.td-chip.td-trung::before, .td-legend i.td-trung { background: var(--gold); }
.td-legend { white-space: nowrap; }
.td-legend i { margin-left: 10px; }

.td-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; margin: 12px 0 8px; }
.td-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--c, var(--son)); border-radius: 10px; background: #fff; color: var(--ink); text-decoration: none; transition: box-shadow .15s, transform .15s; }
.td-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); color: var(--ink); }
.td-card-t { font-weight: 700; font-size: 1.05rem; }
.td-card-m { font-size: .82rem; color: var(--ink-3); font-weight: 600; }
.td-card-d { font-size: .88rem; color: var(--ink-2); }
.td-group { margin: 18px 0 6px; }
.td-group h3 { font-size: 1.02rem; margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.td-group h3 .small { font-weight: 400; }

/* Tìm nhanh */
.td-search { margin: 0 0 8px; }
.td-search label { display: block; margin-bottom: 8px; }
.td-search-row { display: flex; gap: 8px; }
.td-search-row input { flex: 1 1 auto; min-width: 0; font: inherit; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; }
.td-search-row input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.td-search p { margin: 8px 0 0; }

/* Trang sao, cung */
.td-sang { list-style: none; padding: 0; margin: 10px 0 16px; display: grid; gap: 6px; }
.td-sang li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.td-sang .badge { min-width: 64px; text-align: center; }
.td-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
.td-two h3 { font-size: 1rem; margin-bottom: 6px; }
.td-two p, .td-two ul, .td-two ol { margin-bottom: 0; }
.td-two ul, .td-two ol { padding-left: 20px; }
.td-good { border-left: 3px solid var(--tot); }
.td-bad { border-left: 3px solid var(--xau); }
@media (max-width: 720px) { .td-two { grid-template-columns: minmax(0, 1fr); } }
.td-table td { vertical-align: middle; }
.td-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; padding: 12px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; }
.td-toc a { font-size: .88rem; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); text-decoration: none; }
.td-toc a:hover { border-color: var(--son); }
.td-cung { scroll-margin-top: 80px; }
.td-cung h3 a { color: inherit; text-decoration: none; }
.td-cung h3 a:hover { color: var(--son); }
.td-cung p:last-child { margin-bottom: 0; }

/* Cách cục */
.td-cc-list { display: grid; gap: 12px; margin-top: 12px; }
.td-cc { scroll-margin-top: 80px; padding: 18px 20px; }
.td-cc h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.td-cc p { margin-bottom: .6em; }
.td-cc .td-auto { margin: 0; }

/* Kêu gọi, điều hướng, ghi chú */
.td-cta { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; padding: 18px 20px; margin-top: 32px; }
.td-cta > div:first-child { flex: 1 1 320px; min-width: 0; }
.td-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.td-pn { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; font-size: .95rem; }
.td-pn a { text-decoration: none; }
.td-note { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.td-steps { padding-left: 22px; }
.td-steps li { margin-bottom: 6px; }
@media (max-width: 640px) {
  .td-cta { padding: 16px; }
  .td-cc { padding: 16px; }
  .td-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .td-card { padding: 12px; }
}
@media (max-width: 360px) { .td-grid { grid-template-columns: minmax(0, 1fr); } }
@media print { .td-search, .td-toc, .td-cta, .td-pn { display: none !important; } }
.tv-td { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: #fffaf0; border: 1px solid #f0dcb0; }
.tv-td h4 { margin: 0 0 8px; color: var(--son); }
.tv-td p { margin: 0 0 10px; }

/* =====================================================================
   GIAO DIỆN "SƠN MÀI CUNG ĐÌNH" — lớp cuối cùng, ghi đè các lớp trên
   Đỏ sơn mài thẫm + vàng lá, nền lụa ngà có hoa văn trống đồng chìm,
   tiêu đề Playfair Display, thân chữ Be Vietnam Pro.
   ===================================================================== */
:root {
  --lac-0: #2e0707; --lac-1: #4a0b0b; --lac-2: #6e1414; --lac-3: #9b1f1a;
  --leaf: #d8b46a; --leaf-2: #b8892f; --leaf-hi: #f1dca2;
  --silk: #f4ecdf; --silk-2: #efe3cf; --ivory: #fffaf1;
  --bg: var(--silk); --bg-soft: #f1e6d3; --bg-tint: #f8eee0;
  --ink: #23150f; --ink-2: #5b4a3a; --ink-3: #7c6955;
  --line: #e2d0ab; --line-2: #d3bc8e;
  --son: #a81e1e; --son-hover: #861515; --son-soft: #f8e4dc;
  --gold: #b8892f; --gold-2: #d8b46a; --gold-soft: #f6ead0;
  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --serif: var(--display);
  --grad-hero: radial-gradient(circle at 20% 30%, rgba(216,180,106,.16) 0 1px, transparent 2px) 0 0/23px 23px, radial-gradient(circle at 70% 60%, rgba(216,180,106,.11) 0 1.5px, transparent 2.5px) 0 0/37px 41px, linear-gradient(160deg, var(--lac-1) 0%, var(--lac-2) 55%, var(--lac-3) 100%);
  --gold-line: linear-gradient(90deg, #a97c2f, #f1dca2 50%, #a97c2f);
  --cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'/%3E");
  --frame: inset 0 0 0 4px var(--ivory), inset 0 0 0 5px rgba(169, 124, 47, .22);
  --lift: 0 18px 36px -28px rgba(80, 40, 0, .55);
  --shadow: var(--frame), var(--lift);
  --drum: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%23a97c2f' stroke-opacity='.09'%3E%3Ccircle cx='120' cy='120' r='30'/%3E%3Ccircle cx='120' cy='120' r='56'/%3E%3Ccircle cx='120' cy='120' r='84'/%3E%3Ccircle cx='120' cy='120' r='112'/%3E%3Cpath d='M120 88 L129 113 L120 120 L111 113Z M152 120 L127 129 L120 120 L127 111Z M120 152 L111 127 L120 120 L129 127Z M88 120 L113 111 L120 120 L113 129Z'/%3E%3C/g%3E%3C/svg%3E");
}
body { background: var(--silk) var(--drum); background-size: 240px; color: var(--ink); }
::selection { background: #f1dca2; color: var(--lac-0); }
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.005em; }
h1 { line-height: 1.1; }
.tool h3, .kt-card h3, .card-title, .price h2, .ai-sec h2, .kt-body h2, .td-card h3 { font-family: var(--display); letter-spacing: 0; }
a { color: var(--son); }

/* --- Header sơn mài --- */
.site-head { background: var(--grad-hero); backdrop-filter: none; border-bottom: 1px solid rgba(216, 180, 106, .5); }
.site-head::after { background: var(--gold-line); height: 2px; }
.head-in { padding-top: 12px; padding-bottom: 12px; }
.brand-name, .site-foot .brand-name { font-family: var(--display); font-weight: 700; font-size: 1.45rem; letter-spacing: .005em; background: linear-gradient(180deg, #f6e3ad, #d8b46a 60%, #b8892f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-sub { color: rgba(241, 220, 162, .75); }
.site-head .brand-mark { width: 40px; height: 40px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(216, 180, 106, .7); }
.nav a, .nav-btn, .nav-acc { color: #f3e3c3; }
.nav a:hover, .nav-btn:hover, .nav-g.open .nav-btn, .nav-acc:hover { background: rgba(255, 236, 190, .1); color: #fff6dd; }
.nav-btn.on, .nav a.nav-kt.on, .nav a[aria-current="page"] { color: var(--leaf-hi); background: rgba(255, 236, 190, .12); }
.nav-acc::before { box-shadow: inset 0 0 0 2px var(--lac-2), 0 0 0 1px var(--leaf); }
.nav a.cta { background: linear-gradient(180deg, #f3dc9c, #c99a3f); color: #2a1606; border-radius: 999px; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 18px -10px rgba(0,0,0,.6); }
.nav a.cta:hover { background: linear-gradient(180deg, #f8e6b4, #d4a84c); color: #1d0e02; }
.menu-btn { background: transparent; color: var(--leaf-hi); border-color: rgba(216, 180, 106, .6); }
.nav-pop { background: var(--ivory); border-color: var(--line); }
.nav-pop a { color: var(--ink); }
.nav-pop a:hover { background: #f8ecd6; }
@media (max-width: 980px) {
  .nav { background: linear-gradient(180deg, var(--lac-1), var(--lac-2)); border-bottom: 1px solid var(--leaf-2); }
  .nav-pop { background: rgba(255, 246, 225, .06); }
  .nav-pop a { color: #f3e3c3; }
  .nav-pop a span { color: rgba(243, 227, 195, .7); }
  .nav-pop a:hover { background: rgba(255, 236, 190, .1); }
}

/* --- Dải đầu trang và hero sơn mài --- */
.tool-head::before, .hero::before { background: var(--grad-hero); }
.tool-head::after, .hero::after { height: 4px; background: linear-gradient(var(--leaf-2), var(--leaf-2)) top/100% 1px no-repeat, linear-gradient(var(--leaf-2), var(--leaf-2)) bottom/100% 1px no-repeat; }
.tool-head h1, .hero h1 { color: #fbf0d6; text-shadow: 0 2px 24px rgba(20, 0, 0, .45); }
.tool-head p, .hero-lead { color: #ead9b6; }
.tool-head a, .hero a:not(.btn) { color: var(--leaf-hi); }
.hero { padding: 64px 0 72px; }
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); max-width: 15ch; }
.hero .panel { background: rgba(255, 250, 238, .97); border: 1px solid var(--leaf); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .65); }
.hero .chart-shell, .ai-chart.chart-shell { background: var(--ivory); padding: 12px; border-radius: 6px; border: 0; box-shadow: 0 0 0 2px var(--leaf), 0 0 0 7px var(--lac-1), 0 0 0 8px var(--leaf-2), 0 40px 80px -30px rgba(0, 0, 0, .7); }
.hero-chart figcaption { color: var(--leaf); font-family: var(--display); font-style: italic; font-size: .95rem; text-align: center; margin-top: 16px; }
.kt-bc, .td-bc { color: var(--ink-3); }

/* --- Khối, thẻ, bảng --- */
.panel, .stat, .tool, .kt-card, .price, .cg, .dcard, .prof, .ai-pk > div, .card { background: var(--ivory); border-color: var(--line); }
.panel { box-shadow: var(--frame), var(--lift); }
.panel-flat { background: #f7eddc; border-color: var(--line); }
.paper { background: #f8ecd9; border-color: var(--line); }
.tool, .kt-card, .stat { box-shadow: var(--frame), var(--lift); }
.tool:hover, .kt-card:hover { border-color: var(--leaf); box-shadow: var(--frame), 0 22px 40px -24px rgba(110, 40, 0, .55); }
.tool .ico { background: linear-gradient(160deg, var(--lac-1), var(--lac-3)); color: var(--leaf-hi); box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .65), 0 6px 14px -8px rgba(60, 0, 0, .6); }
.tool h3 { font-size: 1.12rem; }
.tool:hover h3 { color: var(--son); }
.tg-h { font-family: var(--display); font-size: 1.35rem; color: var(--lac-2); }
.orn::before { width: 46px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 12'%3E%3Cpath d='M0 6h16M30 6h16' stroke='%23b8892f' stroke-width='1.4'/%3E%3Cpath d='M23 1l5 5-5 5-5-5z' fill='%23a81e1e'/%3E%3Ccircle cx='23' cy='6' r='1.6' fill='%23f1dca2'/%3E%3C/svg%3E") no-repeat center / contain; }
h2.orn { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
table.data th, .kt-body th { background: #f3e5cc; color: var(--ink); }
table.data td, table.data th { border-color: var(--line); }
input[type=text], input[type=number], input[type=email], input[type=tel], input[type=date], input[type=time], input[type=search], input[type=password], select, textarea { background: #fffdf8; border-color: #d9c49a; }
.seg { background: #f3e6cf; border-color: var(--line); }
.seg input:checked + label { background: var(--ivory); box-shadow: 0 1px 2px rgba(60, 30, 0, .15), 0 0 0 1px var(--line-2); }
.tabs [aria-selected="true"], .tabs .on { color: var(--son); }
.badge.trung { background: #f6ead0; }

/* --- Nút --- */
.btn-primary, .nav a.cta.btn-primary { background: linear-gradient(180deg, #b92a20, #7e1410); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 22px -12px rgba(110, 10, 0, .8); }
.btn-primary:hover { background: linear-gradient(180deg, #a3221a, #6c100c); color: #fff; }
.btn-gold { background: linear-gradient(180deg, #f3dc9c, #c99a3f); color: #2a1606; }
.btn-gold:hover { background: linear-gradient(180deg, #f8e6b4, #d4a84c); color: #1d0e02; }
.btn-ghost { background: var(--ivory); border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { background: #f8ecd6; border-color: var(--leaf-2); color: var(--ink); }

/* --- Dải Tết, CTA, khối nổi bật: sơn mài --- */
.tet-band, .kt-cta, .auth-side { background: var(--grad-hero); border: 1px solid var(--leaf-2); color: #f3e3c3; box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .35); }
.tet-band h2, .kt-cta b, .auth-side h3 { color: #fbf0d6; font-family: var(--display); }
.tet-band .tet-left, .tet-band p { color: var(--leaf-hi); }
.kt-cta p { color: #ead9b6; }
.tet-band .btn-ghost, .kt-cta .btn-ghost { background: transparent; color: #fbf0d6; border-color: rgba(216, 180, 106, .7); }
.tet-band .btn-primary, .kt-cta .btn-primary { background: linear-gradient(180deg, #f3dc9c, #c99a3f); color: #2a1606; }
.auth-side li { color: #ead9b6; }
.price.hot { background: linear-gradient(180deg, #fff6e2, var(--ivory) 45%); border-color: var(--leaf-2); }
.price-num { font-family: var(--display); color: var(--son); }
.big-num { font-family: var(--display); }
.ai-box { background: linear-gradient(180deg, #fff5df, var(--ivory) 60%); }
.ai-cover { background: var(--grad-hero); border-color: var(--leaf-2); color: #ead9b6; }
.ai-cover h1 { color: #fbf0d6; }
.ai-cover .muted, .ai-cover .small { color: #ead9b6; }
.kt-toc, .tv-td { background: #fbf1df; border-color: #e8d2a4; }
.kt-lead { border-left-color: var(--leaf-2); }
.kt-chip { background: var(--ivory); }

/* --- Lá số --- */
.chart-shell { background: var(--ivory); border-color: var(--line); }

/* --- Chân trang --- */
.site-foot { background: var(--grad-hero); border-top: 0; box-shadow: inset 0 3px 0 var(--leaf-2), inset 0 5px 0 var(--lac-1), inset 0 6px 0 var(--leaf-2); color: rgba(243, 227, 195, .8); }
.foot-groups h4 { font-family: var(--display); color: var(--leaf-hi); font-size: 1.05rem; }
.site-foot a { color: #f6e9cf; }
.site-foot a:hover { color: var(--leaf-hi); }

@media print {
  body { background: #fff; }
  .site-head, .site-foot { display: none; }
}
h1, h2, h3, .tg-h, .brand-name, .price-num, .big-num { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.tg-h span { font-family: var(--sans); font-size: .88rem; }
.nav-acc.on, .nav a.nav-acc.on { color: var(--leaf-hi); }

/* ==== vip.css ==== */
/* =====================================================================
   VIP — lớp giao diện dày dặn cho "Sơn mài cung đình" (tiền tố vp-)
   Gộp SAU lớp "SƠN MÀI CUNG ĐÌNH" ở cuối main.css. Dùng lại biến của lớp đó:
   --lac-0..3, --leaf, --leaf-2, --leaf-hi, --ivory, --display, --frame, --lift, --grad-hero.
   Ghi đè lớp có sẵn (đánh dấu [ghi đè]): .site-foot (chừa chỗ nút nổi), .kt-card (ảnh bìa), in ấn.
   ===================================================================== */
.vp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vp-dia { display: inline-block; width: 5px; height: 5px; flex: none; background: var(--leaf); transform: rotate(45deg); }

/* ---------- Dải trên cùng ---------- */
.vp-top { position: relative; z-index: 41; min-height: 32px; background: var(--lac-0); color: #e6d2a6; font-size: .8rem; border-bottom: 1px solid rgba(216, 180, 106, .22); }
.vp-top-in { max-width: var(--maxw); min-height: 32px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.vp-top-date { margin: 0; min-width: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; letter-spacing: .01em; }
.vp-top-hd { display: inline-flex; align-items: center; gap: 10px; color: var(--leaf-hi); }
.vp-top-links { display: flex; flex: none; }
.vp-top-links a { color: #e6d2a6; text-decoration: none; padding: 3px 11px; border-left: 1px solid rgba(216, 180, 106, .25); line-height: 1.3; }
.vp-top-links a:first-child { border-left: 0; }
.vp-top-links a:hover { color: var(--leaf-hi); }
.vp-top a:focus-visible { outline-color: var(--leaf-hi); }
@media (max-width: 760px) {
  .vp-top-links, .vp-top-hd { display: none; }
  .vp-top-in { justify-content: center; padding: 0 12px; }
}
@media (max-width: 400px) { .vp-top { font-size: .74rem; } .vp-top-date { gap: 7px; } }

/* ---------- Dải chữ chạy "Hôm nay" ---------- */
.vp-ticker { position: relative; z-index: 39; height: 40px; overflow: hidden; color: #f3e3c3; font-size: .875rem; background: linear-gradient(180deg, #2b0606, #3d0a0a); border-bottom: 1px solid rgba(216, 180, 106, .6); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
.vp-tk-in { height: 100%; display: flex; align-items: stretch; }
.vp-tk-label { position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 max(14px, calc((100vw - var(--maxw)) / 2 + 20px)); background: linear-gradient(180deg, #f3dc9c, #c99a3f); color: #2a1606; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.vp-tk-label::after { content: ''; position: absolute; top: 0; bottom: 0; right: -13px; width: 13px; background: linear-gradient(180deg, #f3dc9c, #c99a3f); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.vp-tk-label i { width: 7px; height: 7px; background: var(--lac-2); transform: rotate(45deg); }
.vp-tk-view { flex: 1; min-width: 0; position: relative; overflow: hidden; padding-left: 14px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent); }
.vp-tk-track { display: flex; width: max-content; height: 100%; animation: vp-marquee var(--vp-tk-dur, 150s) linear infinite; will-change: transform; }
.vp-ticker:hover .vp-tk-track, .vp-ticker.is-focus .vp-tk-track, .vp-ticker.is-paused .vp-tk-track { animation-play-state: paused; }
.vp-tk-list { flex: none; display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.vp-tk-list li { display: flex; align-items: center; white-space: nowrap; }
.vp-tk-list li::before { content: ''; flex: none; width: 6px; height: 6px; margin: 0 24px; background: var(--leaf); transform: rotate(45deg); box-shadow: 0 0 0 2px rgba(216, 180, 106, .18); }
.vp-tk-list a, .vp-tk-list span { color: #f3e3c3; text-decoration: none; line-height: 40px; }
.vp-tk-list b { margin-right: 7px; color: var(--leaf-hi); font-weight: 600; }
.vp-tk-list a:hover { color: #fff; }
.vp-tk-list a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.vp-tk-list a:focus-visible { outline: 2px solid var(--leaf-hi); outline-offset: -6px; border-radius: 6px; }
.vp-tk-promo a { color: #f8e9c4; }
.vp-tk-promo b { display: inline-block; padding: 0 9px; line-height: 20px; border: 1px solid rgba(216, 180, 106, .55); border-radius: 999px; background: rgba(216, 180, 106, .14); font-size: .76rem; font-weight: 700; letter-spacing: .02em; vertical-align: 1px; }
.vp-tk-pause { flex: none; width: 40px; padding: 0; border: 0; border-left: 1px solid rgba(216, 180, 106, .3); background: rgba(0, 0, 0, .18); color: var(--leaf-hi); cursor: pointer; display: grid; place-items: center; }
.vp-tk-pause svg { width: 11px; height: 11px; fill: currentColor; }
.vp-tk-pause .i-play, .vp-ticker.is-paused .vp-tk-pause .i-pause { display: none; }
.vp-ticker.is-paused .vp-tk-pause .i-play { display: inline; }
.vp-tk-pause:hover { background: rgba(216, 180, 106, .14); }
.vp-tk-pause:focus-visible { outline: 2px solid var(--leaf-hi); outline-offset: -4px; }
@keyframes vp-marquee { to { transform: translateX(-50%); } }
/* Giảm chuyển động: hiện tĩnh, cuộn ngang được */
.vp-ticker.is-static .vp-tk-track { animation: none; }
.vp-ticker.is-static .vp-tk-view { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
.vp-ticker.is-static .vp-tk-view::-webkit-scrollbar { display: none; }
.vp-ticker.is-static .vp-tk-list[aria-hidden], .vp-ticker.is-static .vp-tk-pause { display: none; }
@media (prefers-reduced-motion: reduce) {
  .vp-tk-track { animation: none; }
  .vp-tk-view { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .vp-tk-list[aria-hidden], .vp-tk-pause { display: none; }
}
@media (max-width: 600px) {
  .vp-ticker { height: 38px; font-size: .84rem; }
  .vp-tk-list a, .vp-tk-list span { line-height: 38px; }
  .vp-tk-label { padding: 0 8px 0 12px; font-size: .68rem; letter-spacing: .08em; }
  .vp-tk-pause { width: 36px; }
}

/* ---------- Hero trang chủ: vòng la bàn vàng lá ---------- */
.vp-hero { padding-bottom: 104px; }
.vp-hero-deco { position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); overflow: hidden; pointer-events: none; }
.vp-hero-deco::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 18% 45%, rgba(46, 7, 7, .55), transparent 70%); }
.vp-wheel { position: absolute; top: 50%; left: calc(50% + min(290px, 24vw)); width: min(1000px, 84vw); aspect-ratio: 1; transform: translate(-50%, -50%); color: var(--leaf); opacity: .42; }
.vp-w { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vp-w text { font-family: var(--display); }
.vp-w-outer { animation: vp-spin 150s linear infinite; }
.vp-w-mid { animation: vp-spin 210s linear infinite reverse; opacity: .9; }
.vp-w-sun { animation: vp-spin 360s linear infinite; opacity: .75; }
.vp-w-can { opacity: .62; }
.vp-w-gi { font-style: italic; opacity: .8; }
.vp-w-q { opacity: .85; }
@keyframes vp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vp-w { animation: none !important; } }
@media (max-width: 980px) {
  .vp-wheel { top: 250px; left: 50%; width: 760px; opacity: .26; }
  .vp-hero-deco::after { background: linear-gradient(180deg, rgba(46, 7, 7, .25), transparent 40%); }
}
@media (max-width: 600px) { .vp-wheel { top: 190px; width: 560px; } .vp-hero { padding-bottom: 88px; } }
.vp-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; color: var(--leaf-hi); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.vp-eyebrow::before { content: ''; flex: none; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--leaf)); }
.vp-hero-form { margin-top: 24px; }
.vp-form-cap { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-family: var(--display); font-size: 1.2rem; font-weight: 700; color: var(--lac-2); }
.vp-form-cap::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
@media (max-width: 600px) { .vp-eyebrow { font-size: .7rem; letter-spacing: .1em; } }

/* ---------- Dải số liệu tin cậy (đè lên mép dưới hero) ---------- */
.vp-trust-wrap { position: relative; z-index: 2; margin-top: -60px; }
.vp-trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; overflow: hidden; background: var(--line); border: 1px solid var(--leaf); border-radius: 6px; box-shadow: 0 0 0 5px rgba(255, 250, 241, .55), 0 28px 50px -28px rgba(40, 0, 0, .6); }
.vp-trust li { min-width: 0; background: var(--ivory); }
.vp-trust a, .vp-trust li > div { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 16px 10px 14px; text-align: center; text-decoration: none; color: var(--ink); }
.vp-trust a:hover { background: #f8ecd6; color: var(--ink); }
.vp-tr-v { font-family: var(--display); font-size: 2.1rem; font-weight: 700; line-height: 1.05; color: var(--son); font-variant-numeric: lining-nums; }
.vp-tr-v.is-ic { display: grid; place-items: center; height: 2.2rem; }
.vp-tr-v.is-ic svg { width: 32px; height: 32px; }
.vp-tr-t { font-size: .84rem; line-height: 1.35; color: var(--ink-2); }
.vp-trust a:hover .vp-tr-t { color: var(--son); }
@media (max-width: 760px) {
  .vp-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-trust li:last-child { grid-column: 1 / -1; }
  .vp-tr-v { font-size: 1.75rem; }
}

/* ---------- Khung phần ---------- */
.vp-sec { padding: 46px 0; }
.vp-sec-tight { padding: 6px 0 40px; }
.vp-sec-paper { background: rgba(230, 210, 175, .32); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vp-sec-h { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 22px; }
.vp-sec-h h2 { margin: 0; }
.vp-sec-h > a { flex: none; font-weight: 600; font-size: .95rem; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.vp-center { justify-content: center; text-align: center; }
.vp-kicker { margin: 0 0 6px; color: #8a5a00; font-size: .74rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.vp-band { position: relative; padding: 50px 0; }
.vp-band-lac { color: #ead9b6;
  background: linear-gradient(var(--leaf-2), var(--leaf-2)) top / 100% 1px no-repeat, linear-gradient(rgba(216, 180, 106, .45), rgba(216, 180, 106, .45)) 0 5px / 100% 1px no-repeat,
    linear-gradient(var(--leaf-2), var(--leaf-2)) bottom / 100% 1px no-repeat, linear-gradient(rgba(216, 180, 106, .45), rgba(216, 180, 106, .45)) 0 calc(100% - 5px) / 100% 1px no-repeat, var(--grad-hero); }
.vp-band-lac h2 { color: #fbf0d6; }
.vp-band-lac .vp-kicker { color: var(--leaf); }
.vp-band-lac .vp-sec-h > a { color: var(--leaf-hi); }
.vp-band-lac .dcard { color: var(--ink); }
.vp-band-lac a.dcard-link:hover .dcard { border-color: var(--leaf); box-shadow: 0 18px 36px -20px rgba(0, 0, 0, .7); }
@media (max-width: 600px) { .vp-sec { padding: 36px 0; } .vp-band { padding: 40px 0; } }

/* ---------- Hôm nay: 3 cột ---------- */
.vp-today { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.05fr); gap: 18px; align-items: stretch; }
@media (max-width: 1080px) { .vp-today { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vp-quick { grid-column: 1 / -1; } }
@media (max-width: 720px) { .vp-today { grid-template-columns: minmax(0, 1fr); } }
.vp-card { position: relative; min-width: 0; padding: 18px 20px 20px; background: var(--ivory); border: 1px solid var(--line); border-top: 3px solid var(--leaf-2); border-radius: 6px; box-shadow: var(--frame), var(--lift); }
.vp-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.vp-card-h h3 { margin: 0; font-family: var(--display); font-size: 1.22rem; color: var(--lac-2); }
.vp-card-h a { font-size: .88rem; font-weight: 600; }
/* lịch ngày */
.vp-cal { display: flex; flex-direction: column; padding: 0; overflow: hidden; border-top: 0; }
.vp-cal-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 18px; background: var(--grad-hero); color: var(--leaf-hi); border-bottom: 1px solid var(--leaf-2); }
.vp-cal-h b { font-family: var(--display); font-size: 1.15rem; color: #fbf0d6; }
.vp-cal-h span { font-size: .85rem; }
.vp-cal-main { display: flex; align-items: center; gap: 18px; padding: 16px 18px 6px; }
.vp-cal-d { min-width: 1.3em; font-family: var(--display); font-size: 4.6rem; font-weight: 700; line-height: .9; text-align: center; color: var(--son); font-variant-numeric: lining-nums; }
.vp-cal-am { display: grid; gap: 4px; padding-left: 18px; border-left: 1px solid var(--line); color: var(--ink-2); font-size: .9rem; }
.vp-cal-amd { font-family: var(--display); font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--ink); font-variant-numeric: lining-nums; }
.vp-cal-amd small { font-size: 1.15rem; color: var(--ink-3); }
.vp-cal-kv { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 10px; margin: 10px 18px 0; font-size: .92rem; }
.vp-cal-kv dt { padding-top: 2px; color: var(--ink-3); font-size: .8rem; font-weight: 600; }
.vp-cal-kv dd { margin: 0; }
.vp-cal-hd { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 18px 0; }
.vp-cal-hd .badge { margin: 0; }
.vp-cal-y { margin: 8px 18px 0; line-height: 1.5; }
.vp-gio { margin: 12px 18px 0; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.vp-gio b { font-size: .8rem; color: var(--ink-3); }
.vp-gio ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.vp-gio li { display: grid; padding: 5px 4px; text-align: center; line-height: 1.25; background: #fbf1df; border: 1px solid #e8d2a4; border-radius: 6px; }
.vp-gio li span { font-family: var(--display); font-weight: 700; color: var(--lac-2); }
.vp-gio li small { font-size: .74rem; color: var(--ink-3); }
.vp-cal-more { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: auto 18px 0; padding: 14px 0 16px; font-size: .9rem; font-weight: 600; }
/* tuổi may mắn */
.vp-rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.vp-rk { display: grid; grid-template-columns: 20px 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; border-radius: 6px; }
.vp-rk:nth-child(-n+3) { background: linear-gradient(90deg, #f9e9c8, rgba(249, 233, 200, 0)); }
.vp-rk-n { font-family: var(--display); font-weight: 700; text-align: center; color: var(--ink-3); font-variant-numeric: lining-nums; }
.vp-rk:nth-child(-n+3) .vp-rk-n { color: var(--son); }
.vp-rk-chi { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-size: .7rem; font-weight: 700; box-shadow: 0 0 0 2px var(--bgc); }
.vp-rk-t { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.vp-rk-t b { flex: none; font-size: .92rem; font-weight: 600; }
.vp-rk-t small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; color: var(--ink-3); }
.vp-rk-t small.tot { color: var(--tot); }
.vp-rk-t small.xau { color: var(--xau); }
.vp-rk .stars { font-size: .76rem; white-space: nowrap; }
/* xem nhanh */
.vp-quick-f { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: end; }
.vp-quick-f .field { grid-column: auto; }
.vp-quick-f .seg label { padding: 9px 14px; }
.vp-quick-f .btn { grid-column: 1 / -1; }
.vp-quick-note { margin: 6px 0 0; }
.vp-quick-out { margin-top: 12px; }
.vp-q-top { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bgc); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); border-radius: 6px; }
.vp-q-cc { flex: none; padding: 6px 10px; border-radius: 4px; background: var(--c); color: #fff; font-family: var(--display); font-size: 1.05rem; font-weight: 700; }
.vp-q-top b { display: block; font-family: var(--display); font-size: 1.15rem; line-height: 1.2; }
.vp-q-top small { color: var(--ink-2); font-size: .82rem; }
.vp-q-kv { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 6px 10px; margin: 12px 0 0; font-size: .9rem; }
.vp-q-kv dt { padding-top: 2px; color: var(--ink-3); font-size: .8rem; font-weight: 600; }
.vp-q-kv dd { margin: 0; }
.vp-sw { display: inline-flex; gap: 3px; margin-right: 6px; vertical-align: -3px; }
.vp-sw i { width: 15px; height: 15px; border-radius: 4px; }
.vp-q-more { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; font-size: .9rem; font-weight: 600; }

/* ---------- Vì sao chọn ---------- */
.vp-why-grid { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid rgba(216, 180, 106, .5); border-radius: 6px; background: rgba(20, 2, 2, .18); }
.vp-why-grid li { min-width: 0; margin: -1px 0 0 -1px; padding: 26px 22px 28px; border-top: 1px solid rgba(216, 180, 106, .3); border-left: 1px solid rgba(216, 180, 106, .3); }
.vp-why-n { position: relative; display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; font-family: var(--display); font-size: 1.05rem; font-weight: 700; color: var(--leaf-hi); }
.vp-why-n::before { content: ''; position: absolute; inset: 7px; border: 1px solid var(--leaf); background: rgba(216, 180, 106, .1); transform: rotate(45deg); }
.vp-why h3 { margin: 0 0 8px; font-family: var(--display); font-size: 1.2rem; color: #fbf0d6; }
.vp-why p { margin: 0; color: #e3cfa6; font-size: .93rem; line-height: 1.6; }
@media (max-width: 980px) { .vp-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vp-why-grid { grid-template-columns: minmax(0, 1fr); } .vp-why-grid li { padding: 22px 18px; } }

/* ---------- Luận giải chuyên sâu ---------- */
.vp-luan { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 34px; align-items: center; }
.vp-luan-main > .muted { max-width: 62ch; }
.vp-topics { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vp-topics li { position: relative; min-width: 0; padding: 12px 14px 12px 40px; background: var(--ivory); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--frame); }
.vp-topics li::before { content: ''; position: absolute; left: 16px; top: 19px; width: 9px; height: 9px; background: var(--son); border: 1px solid var(--leaf); transform: rotate(45deg); }
.vp-topics b { display: block; font-family: var(--display); font-size: 1.04rem; color: var(--lac-2); }
.vp-topics span { display: block; font-size: .86rem; line-height: 1.45; color: var(--ink-2); }
.vp-luan-card { display: grid; gap: 12px; padding: 26px 24px; text-align: center; color: #ead9b6; background: var(--grad-hero); border-radius: 6px; box-shadow: 0 0 0 1px var(--leaf), 0 0 0 5px var(--lac-1), 0 0 0 6px var(--leaf-2), 0 34px 60px -30px rgba(40, 0, 0, .7); }
.vp-luan-from { margin: 0; font-size: .95rem; }
.vp-luan-from b { display: block; font-family: var(--display); font-size: 2.6rem; line-height: 1.1; color: var(--leaf-hi); font-variant-numeric: lining-nums; }
.vp-pk { list-style: none; margin: 2px 0; padding: 10px 0; display: grid; gap: 6px; text-align: left; border-top: 1px solid rgba(216, 180, 106, .35); border-bottom: 1px solid rgba(216, 180, 106, .35); }
.vp-pk li { display: flex; justify-content: space-between; gap: 10px; font-size: .93rem; }
.vp-pk b { color: #fbf0d6; }
.vp-luan-alt { color: var(--leaf-hi); font-size: .92rem; font-weight: 600; }
.vp-luan-alt:hover { color: #fff; }
.vp-luan-note { margin: 0; font-size: .8rem; color: rgba(234, 217, 182, .8); }
@media (max-width: 900px) { .vp-luan { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .vp-topics { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Câu hỏi thường gặp ---------- */
.vp-faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 36px; align-items: start; }
.vp-faq details { margin-bottom: 8px; background: var(--ivory); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--frame); }
.vp-faq details[open] { border-color: var(--leaf); }
.vp-faq summary { position: relative; padding: 14px 48px 14px 18px; font-weight: 600; cursor: pointer; list-style: none; }
.vp-faq summary::-webkit-details-marker { display: none; }
.vp-faq summary::after { content: ''; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--leaf-2); border-bottom: 2px solid var(--leaf-2); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.vp-faq details[open] summary { color: var(--son); }
.vp-faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.vp-faq details p { margin: 0; padding: 0 18px 16px; color: var(--ink-2); }
@media (max-width: 860px) { .vp-faq-wrap { grid-template-columns: minmax(0, 1fr); gap: 12px; } }


/* ---------- Danh bạ công cụ (trang chủ) ---------- */
.vp-dir { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1180px) { .vp-dir { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .vp-dir { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.vp-dir-g { min-width: 0; overflow: hidden; background: var(--ivory); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--lift); }
.vp-dir-g header { padding: 12px 16px 11px; background: var(--grad-hero); border-bottom: 1px solid var(--leaf-2); }
.vp-dir-g h3 { margin: 0; font-family: var(--display); font-size: 1.16rem; color: #fbf0d6; }
.vp-dir-g header p { margin: 1px 0 0; font-size: .8rem; color: #e3cfa6; }
.vp-dir-g ul { list-style: none; margin: 0; padding: 6px; display: grid; gap: 1px; }
.vp-dir-g a { display: flex; align-items: flex-start; gap: 10px; padding: 8px; color: var(--ink); text-decoration: none; border-radius: 6px; transition: background .15s; }
.vp-dir-g a:hover { background: #f8ecd6; color: var(--ink); }
.vp-dir-g a:hover b { color: var(--son); }
.vp-dir-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; color: var(--leaf-hi); background: linear-gradient(160deg, var(--lac-1), var(--lac-3)); border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .6); }
.vp-dir-ic svg { width: 20px; height: 20px; }
.vp-dir-g b { display: block; font-size: .92rem; font-weight: 600; line-height: 1.3; }
.vp-dir-g small { display: block; margin-top: 1px; font-size: .78rem; line-height: 1.35; color: var(--ink-3); }
@media (max-width: 540px) {
  .vp-dir { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .vp-dir-g ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-dir-g a { align-items: center; padding: 7px 6px; gap: 8px; }
  .vp-dir-g small { display: none; }
  .vp-dir-g b { font-size: .86rem; }
  .vp-dir-ic { width: 30px; height: 30px; }
  .vp-dir-ic svg { width: 18px; height: 18px; }
}
.vp-faq-cta { display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; padding: 18px; background: var(--ivory); border: 1px solid var(--line); border-left: 3px solid var(--son); border-radius: 6px; box-shadow: var(--lift); }
.vp-faq-cta .vp-seal-svg { flex: none; width: 46px; height: 46px; transform: rotate(-5deg); }
.vp-faq-cta b { font-family: var(--display); font-size: 1.08rem; color: var(--lac-2); }
.vp-faq-cta p { margin: 4px 0 10px; font-size: .9rem; color: var(--ink-2); }

/* ---------- Nút nổi ---------- */
.vp-float { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
.vp-float > * { pointer-events: auto; }
.vp-pill { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; padding: 7px 20px 7px 7px; border-radius: 999px; background: linear-gradient(180deg, #f7e3aa, #c99a3f); color: #2a1606; font-weight: 700; font-size: .95rem; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 0 0 1px #8f6420, 0 0 0 3px var(--lac-1), 0 0 0 4px var(--leaf-2), 0 18px 32px -14px rgba(40, 0, 0, .7);
  transition: opacity .25s, transform .25s, visibility .25s; }
.vp-pill:hover { color: #1d0e02; background: linear-gradient(180deg, #fbecc2, #d4a84c); }
.vp-pill svg { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--lac-2); color: var(--leaf-hi); }
.vp-pill::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); animation: vp-gloss 7s ease-in-out 2s infinite; }
@keyframes vp-gloss { 0%, 78% { left: -60%; } 100% { left: 130%; } }
.vp-pill.is-off { opacity: 0; visibility: hidden; transform: translateY(14px); }
.vp-pill-s { display: none; }
.vp-pill:focus-visible, .vp-fab:focus-visible, .vp-seal:focus-visible { outline: 3px solid var(--leaf-hi); outline-offset: 4px; }
.vp-fab { width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--leaf); background: var(--grad-hero); color: var(--leaf-hi); text-decoration: none; cursor: pointer; box-shadow: 0 0 0 3px rgba(255, 250, 241, .7), 0 12px 24px -10px rgba(40, 0, 0, .7); }
.vp-fab[hidden] { display: none; }
.vp-fab svg { width: 20px; height: 20px; }
.vp-fab:hover { color: #fff; }
.vp-zalo span { font-size: .78rem; font-weight: 800; letter-spacing: .02em; }
.vp-seal { position: fixed; left: 18px; bottom: 18px; z-index: 50; width: 58px; height: 58px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 8px; transform: rotate(-6deg); filter: drop-shadow(0 10px 14px rgba(40, 0, 0, .45)); transition: transform .2s; }
.vp-seal:hover, .vp-seal.is-on { transform: rotate(0) scale(1.05); }
.vp-seal-svg { display: block; width: 100%; height: 100%; }
.vp-seal-tip { position: absolute; left: 50%; bottom: -7px; padding: 1px 8px; transform: translateX(-50%) rotate(6deg); white-space: nowrap; font-size: .66rem; font-weight: 700; letter-spacing: .04em; color: var(--lac-2); background: var(--ivory); border: 1px solid var(--leaf-2); border-radius: 999px; transition: transform .2s; }
.vp-seal:hover .vp-seal-tip, .vp-seal.is-on .vp-seal-tip { transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) { .vp-pill::after { animation: none; display: none; } .vp-pill, .vp-seal, .vp-as { transition: none; } }
@media (max-width: 600px) {
  .vp-float { right: 12px; bottom: 12px; gap: 8px; }
  .vp-seal { left: 12px; bottom: 14px; width: 52px; height: 52px; }
  .vp-pill { font-size: .9rem; padding-right: 16px; }
  .vp-pill svg { width: 30px; height: 30px; padding: 6px; }
  .vp-fab { width: 42px; height: 42px; }
}
@media (max-width: 400px) { .vp-pill-l { display: none; } .vp-pill-s { display: inline; } }
/* [ghi đè] chân trang chừa chỗ cho nút nổi */
.site-foot { padding-bottom: 96px; }

/* ---------- Khung Trợ lý ---------- */
.vp-as { position: fixed; left: 18px; bottom: 92px; z-index: 60; width: min(370px, calc(100vw - 24px)); max-height: min(580px, calc(100vh - 120px)); overflow: auto; overscroll-behavior: contain; background: var(--ivory); border: 1px solid var(--leaf-2); border-radius: 8px; box-shadow: 0 0 0 4px rgba(255, 250, 241, .6), 0 34px 70px -24px rgba(40, 0, 0, .6); opacity: 0; transform: translateY(10px) scale(.98); transform-origin: bottom left; transition: opacity .2s, transform .2s; }
.vp-as[hidden] { display: none; }
.vp-as.is-open { opacity: 1; transform: none; }
.vp-as-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; color: #ead9b6; background: var(--grad-hero); border-bottom: 1px solid var(--leaf-2); }
.vp-as-head .vp-seal-svg { flex: none; width: 40px; height: 40px; }
.vp-as-head b { display: block; font-family: var(--display); font-size: 1.1rem; color: #fbf0d6; }
.vp-as-head span { font-size: .8rem; }
.vp-as-x { flex: none; margin-left: auto; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; color: var(--leaf-hi); background: transparent; border: 1px solid rgba(216, 180, 106, .5); border-radius: 50%; cursor: pointer; }
.vp-as-x svg { width: 15px; height: 15px; }
.vp-as-x:hover { background: rgba(216, 180, 106, .15); }
.vp-as-x:focus-visible { outline: 2px solid var(--leaf-hi); outline-offset: 2px; }
.vp-as-body { padding: 14px 16px 4px; }
.vp-as-hi { margin: 0 0 12px; padding: 10px 12px; font-size: .92rem; line-height: 1.55; background: #fbf1df; border: 1px solid #e8d2a4; border-radius: 3px 12px 12px 12px; }
.vp-as-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vp-as-links a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; color: var(--ink); text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 6px; transition: border-color .15s, background .15s; }
.vp-as-links a:hover, .vp-as-links a:focus-visible { color: var(--ink); background: #fff8ea; border-color: var(--leaf); }
.vp-as-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; color: var(--leaf-hi); background: var(--grad-hero); border-radius: 6px; }
.vp-as-ic svg { width: 20px; height: 20px; }
.vp-as-links b { display: block; font-size: .94rem; font-weight: 600; }
.vp-as-links small { display: block; font-size: .8rem; line-height: 1.35; color: var(--ink-3); }
.vp-as-links a > svg { flex: none; width: 16px; height: 16px; margin-left: auto; color: var(--leaf-2); }
.vp-as-slot:empty { display: none; }
.vp-as-slot { margin-top: 12px; }
.vp-as-foot { margin: 0; padding: 10px 16px 14px; font-size: .78rem; color: var(--ink-3); }
@media (max-width: 600px) { .vp-as { left: 12px; right: 12px; width: auto; bottom: 80px; } }

/* ---------- Ảnh bìa bài viết (tools/posts.py → card) ---------- */
/* [ghi đè] .kt-card: cắt góc cho ảnh bìa tràn viền */
.kt-card { overflow: hidden; }
.vp-cover { position: relative; display: block; margin: -18px -20px 8px; aspect-ratio: 16 / 7; overflow: hidden; color: var(--leaf); background: var(--grad-hero); border-bottom: 1px solid var(--leaf-2); }
.vp-cover.v1 { background: radial-gradient(circle at 80% 30%, rgba(216, 180, 106, .14), transparent 55%), linear-gradient(150deg, #2e0707, #5a1010 60%, #7d1a14); }
.vp-cover.v2 { background: radial-gradient(circle at 25% 70%, rgba(216, 180, 106, .12), transparent 55%), linear-gradient(200deg, #3a1206, #6b2310 55%, #8a3a12); }
.vp-cover.v3 { background: radial-gradient(circle at 60% 50%, rgba(241, 220, 162, .12), transparent 60%), linear-gradient(120deg, #1f0505, #4a0b0b 50%, #6e1414); }
.vp-cover svg { display: block; width: 100%; height: 100%; }
.vp-cover .vp-cv-m { transition: transform .4s ease; transform-box: fill-box; transform-origin: 50% 50%; }
.kt-card:hover .vp-cover .vp-cv-m { transform: scale(1.05); }
.vp-cover-tag { position: absolute; left: 14px; bottom: 10px; padding: 2px 9px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #2a1606; background: linear-gradient(180deg, #f3dc9c, #c99a3f); border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .vp-cover .vp-cv-m { transition: none; } }

/* ---------- In ấn ---------- */
@media print {
  .vp-top, .vp-ticker, .vp-float, .vp-seal, .vp-as, .vp-hero-deco { display: none !important; }
}

/* ==== shop.css ==== */
/* ==== Mở khóa luận AI, bảng giá 4 thẻ, ví, trợ lý ==== */
.ul-box { margin-top: 16px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(180deg, #fff6e2, var(--ivory, #fffaf1)); border: 1px solid #e7c98a; box-shadow: inset 0 0 0 4px var(--ivory, #fffaf1), inset 0 0 0 5px rgba(169, 124, 47, .22); }
.ul-head { display: flex; gap: 12px; align-items: center; }
.ul-head b { display: block; font-family: var(--display, serif); font-size: 1.08rem; color: var(--lac-2, #6e1414); }
.ul-head span.small { display: block; }
.ul-seal { flex: none; width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; font: 800 .8rem var(--sans); color: #f6e3ad; background: linear-gradient(160deg, var(--lac-1, #4a0b0b), var(--lac-3, #9b1f1a)); box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .7); }
.ul-act { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.ul-msg { margin: 8px 0 0; }
.ul-text { margin-top: 12px; }
.ul-text h4 { color: var(--son); margin: 14px 0 6px; font-size: 1.02rem; }
.ul-text p, .ul-text li { line-height: 1.75; }
.ul-note { margin: 10px 0 0; }
.ul-wait { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.ul-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #ecd9a8; border-top-color: var(--son); animation: ul-rot 1s linear infinite; flex: none; }
@keyframes ul-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ul-spin { animation-duration: 3s; } }

.bg-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 4px 0 14px; }
.bg-tabs button { font: 600 .98rem var(--sans); padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--ivory, #fffaf1); color: var(--ink-2); cursor: pointer; }
.bg-tabs button[aria-selected="true"] { background: linear-gradient(160deg, var(--lac-1, #4a0b0b), var(--lac-3, #9b1f1a)); color: #f6e3ad; border-color: var(--leaf-2, #b8892f); }
.bg-lead { text-align: center; color: var(--ink-2); max-width: 70ch; margin: 0 auto 22px; }
.bg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; align-items: stretch; }
.bg-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 26px 22px 22px; border-radius: 16px; background: var(--ivory, #fffaf1); border: 1px solid var(--line); box-shadow: inset 0 0 0 4px var(--ivory, #fffaf1), inset 0 0 0 5px rgba(169, 124, 47, .22), 0 18px 36px -28px rgba(80, 40, 0, .55); }
.bg-card.hot { border: 2px solid var(--leaf-2, #b8892f); background: linear-gradient(180deg, #fff3d6, var(--ivory, #fffaf1) 45%); }
.bg-card.best { border: 2px solid #1f7a45; }
.bg-card h3 { margin: 0; font-family: var(--display, serif); font-size: 1.3rem; }
.bg-card ul { margin: 4px 0 8px; padding-left: 18px; display: grid; gap: 4px; font-size: .93rem; flex: 1; }
.bg-card .btn { margin-top: auto; }
.bg-tag { position: absolute; top: -12px; left: 20px; font-size: .78rem; font-weight: 700; padding: 3px 12px; border-radius: 999px; color: #2a1606; background: linear-gradient(180deg, #f3dc9c, #c99a3f); }
.bg-tag.best { color: #fff; background: #1f7a45; }
.bg-big { font-family: var(--display, serif); font-size: 2rem; font-weight: 700; color: var(--lac-2, #6e1414); }
.bg-big small { font-family: var(--sans); font-size: .95rem; color: var(--ink-3); font-weight: 500; }
.bg-price { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.bg-price b { font-family: var(--display, serif); font-size: 1.9rem; color: var(--son); font-variant-numeric: lining-nums; }
.bg-price s { color: var(--ink-3); }
.bg-save { margin: 0; color: #1f7a45; font-weight: 600; font-size: .9rem; }
.bg-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 26px 0 0; }
.bg-perks > div { padding: 16px 18px; border-left: 3px solid var(--leaf-2, #b8892f); background: rgba(255, 250, 241, .7); border-radius: 0 12px 12px 0; }
.bg-perks p { margin: 4px 0 0; }
@media (max-width: 760px) { .bg-perks { grid-template-columns: minmax(0, 1fr); } }
.bg-table { margin-top: 26px; }

.tk-ref { display: flex; gap: 8px; }
.tk-ref input { flex: 1; min-width: 0; }

.as-box { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.as-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.as-head b { font-family: var(--display, serif); font-size: 1.1rem; color: var(--lac-2, #6e1414); }
.as-ctx { margin: 0; color: var(--ink-2); }
.as-log { flex: 1; min-height: 160px; max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.as-m { padding: 9px 12px; border-radius: 12px; font-size: .93rem; line-height: 1.6; max-width: 92%; }
.as-m.me { align-self: flex-end; background: linear-gradient(160deg, var(--lac-2, #6e1414), var(--lac-3, #9b1f1a)); color: #fbf0d6; border-bottom-right-radius: 4px; }
.as-m.bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.as-m.wait { color: var(--ink-3); font-style: italic; }
.as-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.as-chip { font: 500 .8rem var(--sans); padding: 5px 10px; border-radius: 999px; border: 1px solid #e7c98a; background: #fff8e8; color: var(--ink-2); cursor: pointer; }
.as-form { display: flex; gap: 8px; align-items: flex-end; }
.as-form textarea { min-height: 46px; flex: 1; }

/* ==== laso-hub.css ==== */
/* ===== Trung tâm lá số Tử Vi (la-so-tu-vi.html) — tiền tố lh- =====
   Dùng biến giao diện "Sơn mài cung đình" của main.css: --lac-*, --leaf*, --ivory, --display, --son, --tot, --xau. */

/* Thanh thẻ dính ngay dưới header (chiều cao header đo bằng JS → --lh-top) */
.lh-tabs { position: sticky; top: var(--lh-top, 66px); z-index: 30; display: flex; gap: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  margin: 0 0 18px; padding: 6px; border-radius: 12px; background: var(--grad-hero); border: 1px solid var(--leaf-2);
  box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .35), 0 14px 26px -20px rgba(40, 0, 0, .8); }
.lh-tabs::-webkit-scrollbar { display: none; }
.lh-tabs button { flex: 0 0 auto; background: transparent; border: 0; border-radius: 8px; padding: 9px 14px; cursor: pointer; white-space: nowrap;
  font: 600 .95rem var(--sans); color: #f3e3c3; transition: background .15s, color .15s; }
.lh-tabs button:hover { background: rgba(255, 236, 190, .12); color: #fff6dd; }
.lh-tabs button[aria-selected="true"] { background: linear-gradient(180deg, #f3dc9c, #c99a3f); color: #2a1606; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.lh-tabs button:focus-visible { outline: 2px solid var(--leaf-hi); outline-offset: -2px; }
.lh-panel { min-width: 0; scroll-margin-top: calc(var(--lh-top, 66px) + 70px); }
.lh-panel:focus { outline: none; }

/* Khối nội dung */
.lh-sec { margin-top: 18px; min-width: 0; }
.lh-panel > .lh-sec:first-child { margin-top: 0; }
.lh-sec h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: 0; color: var(--lac-2); }
.lh-sec h3 { font-family: var(--display); color: var(--lac-2); font-size: 1.12rem; margin: 1.3em 0 .5em; }
.lh-sec h4 { margin: 14px 0 6px; font-size: .98rem; color: var(--son); }
.lh-sec p { color: var(--ink); }
.lh-sec-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.lh-sec-h h2 { margin-right: auto; }
.lh-sec-h .badge { margin: 0; }
.lh-eyebrow { margin: 0 0 6px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.lh-free { font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--tot); border: 1px solid #b7dfc5; background: var(--tot-soft); padding: 2px 9px; border-radius: 999px; }
.lh-score { font-size: .9rem; color: var(--ink-2); white-space: nowrap; }
.lh-score b { font-family: var(--display); font-size: 1.35rem; color: var(--ink); }
.lh-score.lh-tot b { color: var(--tot); }
.lh-score.lh-xau b { color: var(--xau); }
.lh-score.lh-binh b { color: var(--gold); }
.lh-link { background: none; border: 0; padding: 0; font: inherit; color: var(--son); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.lh-link .lh-score { text-decoration: none; display: inline-block; margin-left: 4px; }
.lh-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lh-list li { line-height: 1.5; }
.lh-ps { padding-left: 1.1em; margin: 0 0 8px; }
.lh-ps li { margin: 0 0 6px; line-height: 1.6; }
.lh-meter { display: block; width: 100%; height: 6px; margin: 6px 0 10px; }
.lh-how { margin: 14px 0 0; border: 1px solid var(--line); border-radius: 10px; background: #fbf3e4; padding: 10px 14px; }
.lh-how summary { cursor: pointer; font-weight: 600; color: var(--son); }
.lh-how .lh-tbl { font-size: .88rem; }
.lh-print-only { display: none; }

/* Biểu đồ */
.lh-chart { margin: 8px 0 6px; min-width: 0; }
.lh-chart svg { display: block; width: 100%; height: auto; }
.lh-chart .lh-pt { cursor: pointer; outline: none; }
.lh-chart .lh-pt:focus-visible circle:last-of-type, .lh-chart .lh-pt:focus-visible path { stroke: var(--son); stroke-width: 3; }
.lh-chart .lh-pt:hover path { fill-opacity: 1; }
.lh-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lh-scroll svg { min-width: 560px; }
.lh-radar-wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.lh-radar-fig { background: var(--ivory); border: 1px solid var(--line); border-radius: 12px; padding: 8px; margin: 0; }
.lh-radar-fig figcaption { padding: 0 6px 4px; }
.lh-my h4:first-child { margin-top: 4px; }
@media (max-width: 1180px) { .lh-radar-wrap { grid-template-columns: minmax(0, 1fr); } .lh-radar-fig { max-width: 520px; margin: 0 auto; width: 100%; } }

/* Thẻ chọn: cung, đại vận, tháng, chuyên đề, ngày */
.lh-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 116px), 1fr)); gap: 8px; margin: 0 0 4px; }
.lh-chip, .lh-card, .lh-month, .lh-topic, .lh-day { min-width: 0; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--ivory); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 10px; padding: 8px 10px; transition: border-color .15s, box-shadow .15s, background .15s; }
.lh-chip:hover, .lh-card:hover, .lh-month:hover, .lh-topic:hover, .lh-day:hover { border-color: var(--leaf-2); box-shadow: 0 10px 22px -18px rgba(80, 30, 0, .7); }
.lh-chip[aria-pressed="true"], .lh-card[aria-pressed="true"], .lh-month[aria-pressed="true"], .lh-topic[aria-pressed="true"], .lh-day[aria-pressed="true"] {
  background: #fff1d6; border-color: var(--leaf-2); box-shadow: 0 0 0 2px var(--leaf), 0 12px 24px -18px rgba(80, 30, 0, .8); }
.lh-tot.lh-chip, .lh-tot.lh-card, .lh-tot.lh-month, .lh-tot.lh-topic { border-left-color: var(--tot); }
.lh-xau.lh-chip, .lh-xau.lh-card, .lh-xau.lh-month, .lh-xau.lh-topic { border-left-color: var(--xau); }
.lh-chip span, .lh-topic span { display: block; font-weight: 600; font-size: .93rem; line-height: 1.3; }
.lh-chip small, .lh-topic small { display: block; color: var(--ink-3); font-size: .78rem; margin-top: 2px; }
.lh-cards, .lh-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; margin-top: 16px; }
.lh-months { margin-top: 10px; }
.lh-card-t { display: block; font-size: .8rem; color: var(--ink-3); font-weight: 600; }
.lh-card-m { display: block; font-family: var(--display); font-weight: 700; font-size: 1.08rem; line-height: 1.3; margin: 2px 0; }
.lh-card-m small { font-family: var(--sans); font-weight: 500; color: var(--ink-3); font-size: .78rem; }
.lh-card-s { display: block; font-size: .8rem; color: var(--ink-2); }
.lh-card-s .badge { margin: 0; }
.lh-card .lh-meter, .lh-month .lh-meter { margin: 6px 0 0; }
.lh-now { outline: 2px dashed var(--leaf-2); outline-offset: 2px; }
.lh-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: 8px; }

/* Thanh công cụ năm / ngày */
.lh-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 6px 0 10px; }
.lh-toolbar label { font-weight: 600; font-size: .9rem; }
.lh-toolbar select, .lh-toolbar input { min-width: 0; max-width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid #d9c49a; background: #fffdf8; font: inherit; }
.lh-toolbar select { flex: 1 1 200px; }

/* Vận năm dân gian */
.lh-dg { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.lh-dg-i { min-width: 0; padding: 10px 12px; border-radius: 10px; background: #fbf3e4; border: 1px solid var(--line); border-left: 3px solid var(--gold); display: grid; gap: 2px; }
.lh-dg-i.lh-tot { border-left-color: var(--tot); }
.lh-dg-i.lh-xau { border-left-color: var(--xau); }

/* Nhật vận */
.lh-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.lh-day { border-left-width: 1px; text-align: center; padding: 8px 4px; display: grid; justify-items: center; gap: 2px; }
.lh-day span { font-weight: 600; font-size: .8rem; color: var(--ink-3); line-height: 1.2; }
.lh-day b { font-size: .92rem; line-height: 1.2; }
.lh-day-n { display: none; font-style: normal; font-size: .72rem; font-weight: 700; color: var(--gold); }
.lh-day small { color: var(--ink-3); font-size: .72rem; white-space: nowrap; }
.lh-day .lh-stars { width: 100%; max-width: 92px; height: auto; }
.lh-stars-wrap { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink-2); flex-wrap: wrap; }
.lh-stars-wrap b { font-family: var(--display); font-size: 1.2rem; color: var(--ink); }
.lh-nv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 10px 0 4px; }
.lh-box { min-width: 0; border-radius: 12px; padding: 12px 16px; border: 1px solid var(--line); background: var(--ivory); }
.lh-box h3 { margin: 0 0 6px !important; font-size: 1.02rem !important; }
.lh-box ul { margin: 0; padding-left: 1.1em; }
.lh-box li { margin: 0 0 4px; }
.lh-box.lh-tot { border-top: 3px solid var(--tot); }
.lh-box.lh-tot h3 { color: var(--tot) !important; }
.lh-box.lh-xau { border-top: 3px solid var(--xau); }
.lh-box.lh-xau h3 { color: var(--xau) !important; }
.lh-hours { display: flex; flex-wrap: wrap; gap: 8px; }
.lh-hour { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--ivory); font-size: .9rem; }
.lh-hour.vang { border-color: var(--leaf-2); background: linear-gradient(180deg, #fff3d4, #f6e2b1); }
.lh-hour em { font-style: normal; font-size: .72rem; font-weight: 700; color: #6a4708; text-transform: uppercase; letter-spacing: .04em; }

/* Khung mở khóa: mountUnlock (unlock.js) tự định dạng bằng .ul-box trong css-add/shop.css; ở đây chỉ chừa khoảng cách */
.lh-ul { margin: 18px 0 14px; }

/* Điện thoại */
@media (max-width: 640px) {
  .lh-tabs { margin-inline: -4px; border-radius: 10px; padding: 5px; }
  .lh-tabs button { padding: 8px 11px; font-size: .9rem; }
  .lh-nv-grid { grid-template-columns: minmax(0, 1fr); }
  .lh-week { gap: 4px; }
  .lh-day { padding: 6px 2px; border-radius: 8px; }
  .lh-day b { font-size: .7rem; letter-spacing: -.02em; }
  .lh-day small { font-size: .64rem; }
  .lh-day .lh-stars { display: none; }
  .lh-day-n { display: block; }
  .lh-cards, .lh-months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lh-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lh-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lh-sec.panel { padding: 16px; }
  .lh-scroll svg { min-width: 680px; }
  .lh-score b { font-size: 1.2rem; }
}

/* In: hiện các thẻ đã mở, bỏ khung chọn và khối mở khóa */
@media print {
  .lh-tabs, .lh-ul, .lh-chips, .lh-cards, .lh-months, .lh-topics, .lh-toolbar, .lh-week { display: none !important; }
  .lh-print-only { display: block; }
  .lh-panel { break-before: auto; }
  .lh-scroll svg { min-width: 0; }
  .lh-sec { break-inside: auto; }
  .lh-radar-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.tk-ci { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin: -4px 0 16px; border-radius: 12px; background: linear-gradient(110deg, #fff3d6, #fde9c4); border: 1px solid #e7c98a; }
.tk-ci b { display: block; font-family: var(--display, serif); color: var(--lac-2, #6e1414); }
.tts-btn { margin: 4px 0 12px; }
.tts-btn::before { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ==== tvpro.css ==== */
/* =====================================================================
   Tử Vi chuyên gia (tiền tố tp-): phi-hoa-tu-vi, la-so-doi, hieu-chinh-gio-sinh, chon-gio-sinh-con.
   Gộp SAU lớp "Sơn mài cung đình" và laso-hub.css; dùng biến --lac-*, --leaf*, --ivory, --display, --son,
   --tot, --xau, --gold, --line của main.css. Dùng lại .lh-eyebrow, .lh-score, .lh-link của laso-hub.
   ===================================================================== */
.tp-sec { margin-top: 20px; min-width: 0; }
.tp-sec h2 { font-size: clamp(1.25rem, 2.3vw, 1.55rem); color: var(--lac-2); margin: 0 0 8px; }
.tp-sec h3 { font-family: var(--display); color: var(--lac-2); font-size: 1.08rem; margin: 1.1em 0 .4em; }
.tp-ul { margin: 0; padding-left: 1.15em; }
.tp-ul li { margin: 0 0 6px; line-height: 1.6; }
.tp-steps { padding-left: 1.3em; margin: 0; }
.tp-steps li { margin-bottom: 8px; }

/* ---- Phi hóa: chọn cung ---- */
.tp-pick { margin-bottom: 14px; }
.tp-cungs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.tp-cung { min-width: 0; font: inherit; cursor: pointer; text-align: center; padding: 7px 4px; border-radius: 9px; color: var(--ink);
  background: var(--ivory); border: 1px solid var(--line); border-bottom: 3px solid var(--gold); transition: background .15s, box-shadow .15s; }
.tp-cung span { display: block; font-weight: 700; font-size: .9rem; line-height: 1.2; }
.tp-cung small { display: block; font-size: .74rem; color: var(--ink-3); }
.tp-cung:hover { border-color: var(--leaf-2); }
.tp-cung[aria-pressed="true"] { background: var(--grad-hero); border-color: var(--leaf-2); color: #fbf0d6; box-shadow: 0 10px 22px -16px rgba(60, 0, 0, .9); }
.tp-cung[aria-pressed="true"] small { color: var(--leaf-hi); }
.tp-cung:focus-visible { outline: 2px solid var(--son); outline-offset: 2px; }
.tp-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .84rem; color: var(--ink-2); margin-top: 12px; }
.tp-legend i { display: inline-block; width: 22px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.tp-dash { display: inline-block; width: 24px; margin-right: 6px; vertical-align: middle; border-top: 2px dotted #141a26; }
.tp-box { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; border: 3px solid #c58a12; border-radius: 3px; }
#chart .cell { cursor: pointer; }
#chart .cell:focus-visible .cell-bg { stroke: var(--son); stroke-width: 3; }

.tp-hoa { display: inline-block; font-size: .78rem; font-weight: 700; color: #fff; background: var(--c, var(--son)); border-radius: 999px; padding: 1px 9px; vertical-align: 1px; }
.tp-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.tp-li { border-left: 3px solid var(--c, var(--gold)); background: #fbf3e4; border-radius: 0 10px 10px 0; padding: 9px 12px; min-width: 0; }
.tp-li p { margin: 4px 0 0; }
.tp-flags { display: grid; gap: 6px; margin: 8px 0 4px; }
.tp-flag { margin: 0; font-size: .92rem; padding: 7px 12px; border-radius: 8px; background: var(--gold-soft); border: 1px solid #ecd6a4; }
.tp-flag.tp-f-ky-xung, .tp-flag.tp-f-loc-ky { background: var(--xau-soft); border-color: #f3c2bd; }
.tp-flag.tp-f-nhap-menh { background: var(--tot-soft); border-color: #b7dfc5; }
.tp-the-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; }
.tp-the-grid h3 { margin-top: .6em; }
.tp-tbl { font-size: .9rem; }
.tp-tbl th[scope="row"] { white-space: nowrap; text-align: left; }
.tp-tbl td { min-width: 112px; vertical-align: top; }
.tp-tbl td.tp-tu { background: #fbefcf; }
.tp-tbl td.tp-xung { background: var(--xau-soft); }
.tp-tbl tr.tp-cur th, .tp-tbl tr.tp-cur td { box-shadow: inset 0 2px 0 var(--leaf-2), inset 0 -2px 0 var(--leaf-2); }

/* ---- Lá số đôi ---- */
.tp-two > * + * { margin-top: 14px; }
.tp-two select { width: 100%; max-width: 100%; }
.tp-person { border-top: 1px solid var(--line); padding-top: 12px; }
.tp-ph { font-family: var(--display); font-size: 1.12rem; color: var(--lac-2); margin: 0 0 10px; }
.tp-hide-submit [type="submit"] { display: none; }
.tp-hide-submit .err:empty { display: none; }
.tp-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 24px; align-items: center; }
.tp-score-n { text-align: center; padding: 10px 18px; border-radius: 14px; background: var(--grad-hero); box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .6); }
.tp-score-n .big-num { font-size: 3.4rem; line-height: 1; color: var(--leaf-hi); }
.tp-score-n .muted { color: #ead9b6; }
.tp-score-t h2 { margin: 0 0 6px; font-size: clamp(1.2rem, 2.4vw, 1.5rem); color: var(--lac-2); }
.tp-meter { display: block; width: 100%; height: 8px; margin: 4px 0 8px; }
.tp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.tp-mini { margin: 0; min-width: 0; }
.tp-mini figcaption { margin-bottom: 6px; line-height: 1.4; }
.tp-mini .chart-shell { padding: 4px; }
.tp-mini > a { display: inline-block; margin-top: 6px; }
.tp-crit th[scope="row"] { white-space: normal; min-width: 150px; }
.tp-crit td { min-width: 0; }
.tp-num { white-space: nowrap; }
.tp-num .badge { margin: 0; font-weight: 700; }
.tp-canvas { display: block; width: 100%; max-width: 432px; height: auto; margin: 6px auto 12px; border-radius: 10px; box-shadow: 0 24px 48px -28px rgba(60, 0, 0, .8); }
.tp-card-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* ---- Hiệu chỉnh giờ sinh ---- */
.tp-qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin-bottom: 8px; }
.tp-q { min-width: 0; }
.tp-qs > .field { grid-column: auto; }
.tp-q label { display: flex; flex: 1 0 auto; gap: 8px; align-items: flex-start; line-height: 1.4; }
.tp-qn { flex: 0 0 auto; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .75rem; font-weight: 700; color: #fbf0d6; background: var(--lac-3); margin-top: 1px; }
.tp-q select, .tp-q input { width: 100%; min-width: 0; }
.tp-ranks { display: grid; gap: 12px; margin-top: 10px; }
.tp-rank { min-width: 0; background: var(--ivory); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 12px; padding: 12px 14px; }
.tp-rank-1 { border-left-color: var(--son); background: linear-gradient(180deg, #fff5df, var(--ivory) 70%); }
.tp-rank-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 4px; }
.tp-rank-h .lh-score { margin-left: auto; }
.tp-rank-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; font-family: var(--display); font-weight: 700; color: var(--leaf-hi); background: var(--grad-hero); }
.tp-rank .tp-ul { margin-bottom: 8px; }
.tp-rank-a { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.tp-bars { display: grid; gap: 6px; }
.tp-bar { display: grid; grid-template-columns: 92px minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: .9rem; }
.tp-bar-l { line-height: 1.15; font-weight: 600; }
.tp-bar-l small { display: block; font-weight: 400; color: var(--ink-3); font-size: .74rem; }
.tp-bar-t { height: 10px; border-radius: 6px; background: #efe3cf; overflow: hidden; }
.tp-bar-t i { display: block; height: 100%; background: var(--leaf-2); border-radius: 6px; }
.tp-bar.on .tp-bar-t i { background: linear-gradient(90deg, var(--lac-3), var(--son)); }
.tp-bar b { text-align: right; }

/* ---- Chọn giờ sinh con ---- */
.tp-warn { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 24px; padding: 16px 18px; border-radius: 12px;
  background: var(--xau-soft); border: 2px solid var(--xau); color: #5a1610; font-size: .97rem; line-height: 1.6; }
.tp-warn svg { flex: 0 0 auto; width: 30px; height: 30px; color: var(--xau); margin-top: 2px; }
.tp-warn b { color: var(--xau); }
.field.tp-chk { flex-direction: row; align-items: flex-start; gap: 10px; }
.tp-heat { font-size: .86rem; text-align: center; }
.tp-heat th[scope="row"] { white-space: nowrap; text-align: left; }
.tp-heat thead th { white-space: nowrap; }
.tp-h { font-weight: 600; min-width: 44px; }
.tp-h1 { background: #fbf6ec; color: var(--ink-3); }
.tp-h2 { background: #f6ead0; }
.tp-h3 { background: #ecd29a; }
.tp-h4 { background: #d8b46a; color: #2a1606; }
.tp-heat td.tp-top { box-shadow: inset 0 0 0 2.5px var(--son); font-weight: 800; }

/* ---- Lối vào phi hóa trên trang lá số ---- */
.tp-entry { border-color: var(--leaf-2); }

/* ---- Điện thoại ---- */
@media (max-width: 760px) {
  .tp-pair, .tp-the-grid, .tp-qs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .tp-cungs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tp-cung { padding: 6px 2px; }
  .tp-cung span { font-size: .82rem; }
  .tp-score { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .tp-score-n { justify-self: center; }
  .tp-bar { grid-template-columns: 74px minmax(0, 1fr) 40px; gap: 8px; }
  .tp-warn { padding: 12px 14px; font-size: .92rem; }
  .tp-tbl td { min-width: 96px; }
  /* bảng đối chiếu lá số đôi: mỗi tiêu chí thành một khối */
  .tp-crit thead { display: none; }
  .tp-crit, .tp-crit tbody { display: block; }
  .tp-crit tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.tp-crit th[scope="row"], table.tp-crit td { display: block; border: 0; padding: 0; min-width: 0; background: none; }
  .tp-crit td:last-child { grid-column: 1 / -1; }
}
@media print {
  .tp-pick, .tp-card-tools, #card-box { display: none !important; }
}

/* ==== thienvan.css ==== */
/* ===== Bầu trời lúc bạn chào đời (bau-troi-ngay-sinh.html) — tiền tố tv2- =====
   Dùng biến giao diện "Sơn mài cung đình" của main.css: --lac-*, --leaf*, --ivory, --display, --son, --line, --grad-hero. */

.tv2-form .tv2-check { flex-direction: row; align-items: center; gap: 10px; }
.tv2-form .tv2-check input { margin-top: 0; flex: 0 0 auto; }

/* Tóm tắt */
.tv2-sum { min-width: 0; }
.tv2-eyebrow { margin: 0 0 4px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.tv2-when { margin: 0; font-size: clamp(1.35rem, 2.6vw, 1.8rem); color: var(--lac-2); }
.tv2-where { margin: 4px 0 12px; overflow-wrap: anywhere; }
.tv2-note { margin: 0 0 12px; }
.tv2-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.tv2-stat { min-width: 0; display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--grad-hero); border: 1px solid var(--leaf-2);
  box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .3); color: #ead9b6; }
.tv2-stat .k { font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--leaf); }
.tv2-stat .v { font-family: var(--display); font-weight: 700; font-size: 1.18rem; line-height: 1.25; color: #fbf0d6; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tv2-stat .s { font-size: .82rem; color: #ead9b6; }
.tv2-moonv svg { flex: 0 0 auto; }

/* Bản đồ */
.tv2-chart { margin-top: 18px; min-width: 0; }
.tv2-tabs { display: flex; gap: 2px; padding: 5px; margin: 0 0 14px; border-radius: 12px; background: var(--grad-hero); border: 1px solid var(--leaf-2); overflow-x: auto; scrollbar-width: none; }
.tv2-tabs::-webkit-scrollbar { display: none; }
.tv2-tabs button { flex: 1 1 0; min-width: max-content; background: transparent; border: 0; border-radius: 8px; padding: 9px 14px; cursor: pointer; font: 600 .95rem var(--sans); color: #f3e3c3; white-space: nowrap; }
.tv2-tabs button:hover { background: rgba(255, 236, 190, .12); color: #fff6dd; }
.tv2-tabs button[aria-selected="true"] { background: linear-gradient(180deg, #f3dc9c, #c99a3f); color: #2a1606; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.tv2-tabs button:focus-visible { outline: 2px solid var(--leaf-hi); outline-offset: -2px; }
.tv2-fig { margin: 0 auto; max-width: 760px; min-width: 0; }
.tv2-fig svg { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 30px 60px -34px rgba(40, 0, 0, .8); }
.tv2-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin: 14px 0 4px; font-size: .86rem; color: var(--ink-2); }
.tv2-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tv2-r { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #0b132b; color: #ff8a7a; font-size: .72rem; }
.tv2-cap { text-align: center; margin: 6px auto 0; max-width: 680px; }
.tv2-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }

/* Bảng & khối */
.tv2-sec { margin-top: 18px; min-width: 0; }
.tv2-h2 { margin: 0 0 12px; font-size: clamp(1.25rem, 2.3vw, 1.55rem); color: var(--lac-2); }
.tv2-table { min-width: 640px; }
.tv2-table td, .tv2-table th { vertical-align: top; }
.tv2-table td:not(:last-child) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tv2-table small { display: block; font-size: .76rem; color: var(--ink-3); font-weight: 400; }
.tv2-table th small { font-weight: 500; }
.tv2-body { display: inline-flex; align-items: center; gap: 8px; }
.tv2-body svg { flex: 0 0 auto; }
.tv2-note-cell { min-width: 180px; font-size: .88rem; color: var(--ink-2); }
.tv2-note-cell .badge { margin: 0 2px 2px 0; }

.tv2-callout { margin-top: 18px; padding: 18px 20px; border-radius: 14px; background: var(--grad-hero); border: 1px solid var(--leaf-2); box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .35), var(--lift); color: #ead9b6; }
.tv2-callout h2 { margin: 0 0 8px; font-size: clamp(1.2rem, 2.2vw, 1.45rem); color: #fbf0d6; }
.tv2-callout p { margin: 0; line-height: 1.65; }
.tv2-callout b { color: var(--leaf-hi); }

.tv2-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.tv2-card { min-width: 0; padding: 14px 16px; border-radius: 12px; background: var(--ivory); border: 1px solid var(--line); border-top: 3px solid var(--leaf-2); }
.tv2-card h3 { margin: 0 0 8px; font-family: var(--display); font-size: 1.08rem; color: var(--lac-2); line-height: 1.3; }
.tv2-card p { margin: 0 0 8px; font-size: .94rem; line-height: 1.6; }
.tv2-card p:last-child { margin-bottom: 0; }
.tv2-sci { border-top-color: var(--tot); background: #f6f8f1; }
.tv2-tu { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tv2-tu span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 4px; border-radius: 999px; border: 1px solid var(--line); background: #fbf3e4; font-size: .82rem; }

.tv2-ev { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; }
.tv2-ev li { line-height: 1.55; }
.tv2-ev .badge { margin-left: 4px; }

/* Khối kiến thức cuối trang */
.tv2-more { padding-top: 28px; padding-bottom: 36px; }
.tv2-know h2 { margin-top: 0; }
.tv2-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tv2-cols h3 { margin: 0 0 6px; font-family: var(--display); color: var(--lac-2); font-size: 1.08rem; }
.tv2-cols p { margin: 0 0 10px; font-size: .94rem; line-height: 1.65; }
.tv2-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.tv2-links a { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid #ecd9a8; background: #fffaf0; text-decoration: none; color: var(--ink); font-size: .9rem; }
.tv2-links a:hover { border-color: var(--gold); color: var(--son); }

@media (max-width: 900px) { .tv2-cols { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
@media (max-width: 640px) {
  .tv2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tv2-stat { padding: 10px 11px; }
  .tv2-stat .v { font-size: 1.02rem; }
  .tv2-stat .s { font-size: .76rem; }
  .tv2-fig svg { border-radius: 14px; }
  .tv2-callout { padding: 16px; }
  .tv2-sec.panel, .tv2-chart.panel { padding: 16px; }
}
@media print {
  .tv2-tabs, .tv2-actions { display: none !important; }
  .tv2-fig svg { box-shadow: none; }
}

/* ==== ptpro.css ==== */
/* ===== Nhóm "Phong thủy thông minh": bản đồ phong thủy nhà, thẻ bản mệnh, đặt tên thương hiệu, lịch cá nhân (tiền tố pp-) =====
   Dùng biến của giao diện "Sơn mài cung đình" trong main.css: --lac-*, --leaf*, --ivory, --display, --son, --tot, --xau, --line. */
.pp-stack { display: grid; gap: 18px; }
.pp-stack > * { min-width: 0; }
.pp-h2 { margin: 0 0 10px; font-size: 1.3rem; font-family: var(--display, var(--sans)); color: var(--lac-2, var(--ink)); }
.pp-method h3 { margin: 18px 0 6px; font-size: 1.05rem; }
.pp-method ol, .pp-method ul { margin: 0 0 10px; padding-left: 20px; }
.pp-method li { margin-bottom: 5px; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pp-actions .btn { flex: 1 1 auto; }
.pp-read { margin: 4px 0 0; }
.pp-privacy { display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; color: var(--tot, #1f7a45); margin: 8px 0 0; line-height: 1.45; }
.pp-privacy svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }

/* Form */
.pp-file { display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
.pp-file .btn { cursor: pointer; }
.pp-file-in { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.pp-file:focus-within label.btn { outline: 2px solid var(--son); outline-offset: 2px; }
.pp-seg4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
.pp-seg4 label { text-align: center; padding: 8px 4px; }
.pp-layers { border: 0; padding: 0; margin: 0; gap: 8px; }
.pp-layers legend { padding: 0; margin-bottom: 6px; }
.pp-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pp-form input[type=range], .pp-two input[type=range] { width: 100%; accent-color: var(--son); }
#pp-degr { width: 100%; accent-color: var(--son); }

/* Bản đồ */
.pp-stage-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pp-stage-bar .btn[aria-pressed="true"] { border-color: var(--son); color: var(--son); background: var(--son-soft); }
.pp-stage { position: relative; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 0 0 4px var(--ivory, #fffaf1), 0 0 0 5px var(--leaf-2, #b8892f); }
.pp-stage canvas { display: block; width: 100%; height: auto; touch-action: pan-y pinch-zoom; cursor: default; }
.pp-stage canvas.pp-picking { touch-action: none; cursor: crosshair; }
.pp-stage canvas:focus-visible { outline: 3px solid var(--son); outline-offset: -3px; }
.pp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr)); gap: 10px; margin: 6px 0 12px; }
.pp-facts > div { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: linear-gradient(180deg, #fffaf0, var(--ivory, #fff)); min-width: 0; }
.pp-facts span { display: block; font-size: .78rem; color: var(--ink-3); }
.pp-facts b { display: block; font-size: .98rem; line-height: 1.35; overflow-wrap: anywhere; }
.pp-verdict { border-radius: 10px; padding: 10px 14px; font-size: .93rem; margin: 0 0 12px; }
.pp-verdict.tot { background: var(--tot-soft); border: 1px solid #b7dfc5; }
.pp-verdict.xau { background: var(--xau-soft); border: 1px solid #f3c2bd; }
@media (max-width: 640px) {
  .pp-table thead { display: none; }
  .pp-table, .pp-table tbody { display: block; width: 100%; }
  .pp-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .pp-table.data td { display: block; border: 0; padding: 0; min-width: 0; }
  .pp-table td[data-l] { grid-column: 1 / -1; }
  .pp-table td[data-l]::before { content: attr(data-l) ': '; font-weight: 600; color: var(--ink-3); }
}
.pp-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-right: 6px; vertical-align: 0; }
.pp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.pp-card { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 14px 14px 12px; background: var(--ivory, #fff); min-width: 0; }
.pp-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: 12px 12px 0 0; background: linear-gradient(90deg, var(--lac-2, #6e1414), var(--leaf, #d8b46a)); }
.pp-card h3 { margin: 4px 0 6px; font-size: 1.08rem; font-family: var(--display, var(--sans)); }
.pp-card p { margin: 0 0 8px; }
.pp-k { font-size: .75rem !important; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8a5a00; margin: 8px 0 4px !important; }
.pp-rank { margin: 0 0 8px; padding-left: 20px; font-size: .9rem; }
.pp-rank li { margin-bottom: 3px; }
.pp-warn { display: block; font-size: .78rem; color: var(--xau); }

/* Thẻ bản mệnh */
.pp-card-stage { display: flex; justify-content: center; }
.pp-card-stage canvas { display: block; width: 100%; max-width: 520px; height: auto; border-radius: 12px; box-shadow: 0 30px 60px -30px rgba(60, 0, 0, .7), 0 0 0 1px var(--leaf-2, #b8892f); background: var(--lac-1, #4a0b0b); }
.pp-bm-head { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.pp-bm-head svg { flex: 0 0 auto; background: radial-gradient(circle at 40% 35%, #fffaf0, #ecd395); border-radius: 50%; padding: 6px; box-shadow: 0 0 0 2px var(--leaf-2, #b8892f); }
.pp-bm-head > div { min-width: 0; }

/* Đặt tên thương hiệu */
.pp-ip { margin: 0; }
.pp-names { display: grid; gap: 8px; }
.pp-name { border: 1px solid var(--line); border-radius: 12px; background: var(--ivory, #fff); padding: 0 14px; }
.pp-name[open] { padding-bottom: 12px; box-shadow: 0 0 0 1px var(--leaf, #d8b46a); }
.pp-name summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 0; cursor: pointer; list-style: none; }
.pp-name summary::-webkit-details-marker { display: none; }
.pp-name summary b { font-size: 1.08rem; font-family: var(--display, var(--sans)); flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.pp-rank-n { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: linear-gradient(160deg, var(--lac-1, #4a0b0b), var(--lac-3, #9b1f1a)); color: var(--leaf-hi, #f1dca2); font-weight: 700; font-size: .85rem; flex: 0 0 28px; }
.pp-score { font-weight: 800; font-size: 1.15rem; color: var(--c); font-variant-numeric: tabular-nums; }
.pp-score::after { content: '/10'; font-size: .72rem; font-weight: 600; color: var(--ink-3); margin-left: 2px; }
.pp-syls { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; }
.pp-syl { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font-size: .9rem; background: #fffdf8; min-width: 0; }
.pp-syl small { display: block; font-size: .75rem; color: var(--ink-3); }

/* Lịch cá nhân */
.pp-viec { border: 0; padding: 0; margin: 0; }
.pp-viec legend { padding: 0; margin-bottom: 6px; }
.pp-checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.pp-checks .check { align-items: center; gap: 8px; font-size: .9rem; }
.pp-checks .check input { margin-top: 0; }
.pp-sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: 0 0 10px; }
.pp-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--ink-2); }
.pp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-right: 6px; vertical-align: -1px; }
.pp-legend i.am { background: none; border: 2px solid var(--son); width: 10px; height: 10px; }
.pp-month { padding-top: 16px; }
.pp-month-t { margin: 0 0 10px; font-family: var(--display, var(--sans)); color: var(--lac-2, var(--ink)); }
.pp-month-g { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 760px) { .pp-month-g { grid-template-columns: minmax(0, 1fr); } }
.pp-cal-h, .pp-cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pp-cal-h span { text-align: center; font-size: .72rem; font-weight: 700; color: var(--ink-3); padding-bottom: 2px; }
.pp-cal-d { position: relative; display: grid; justify-items: center; gap: 0; padding: 5px 2px 4px; min-height: 48px; border: 1px solid var(--line); border-radius: 8px; background: #fffdf8; font: inherit; color: var(--ink); cursor: pointer; min-width: 0; }
.pp-cal-d:hover { border-color: var(--leaf-2, #b8892f); }
.pp-cal-d.has { background: linear-gradient(180deg, #fff6e2, #fffdf8); border-color: #e2c27f; }
.pp-cal-d.today { box-shadow: inset 0 0 0 2px var(--son); }
.pp-cal-d.out { opacity: .35; cursor: default; }
.pp-cal-n { font-weight: 700; font-size: .92rem; line-height: 1.1; }
.pp-cal-am { font-size: .66rem; color: var(--ink-3); line-height: 1.1; }
.pp-cal-am.r { color: var(--son); font-weight: 700; }
.pp-cal-dots { display: flex; gap: 2px; height: 7px; margin-top: 2px; }
.pp-cal-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.pp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pp-li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 10px; align-items: start; border-bottom: 1px dashed var(--line); padding-bottom: 8px; font-size: .9rem; }
.pp-li-d { display: grid; text-align: center; }
.pp-li-d b { font-size: 1rem; }
.pp-li-d small { font-size: .7rem; color: var(--ink-3); }
.pp-li-b small { display: block; font-size: .78rem; color: var(--ink-2); margin-top: 2px; }
.pp-gcal { grid-column: 2; font-size: .8rem; font-weight: 600; }
.pp-ev { display: inline-block; font-size: .74rem; font-weight: 700; color: #fff; background: var(--c); border-radius: 999px; padding: 1px 8px; margin-right: 4px; white-space: nowrap; }
.pp-ev-am { background: none; color: var(--son); border: 1px solid var(--son); }
.pp-day-ev { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.pp-day-ev:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.pp-guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.pp-guide h3 { margin-top: 4px; }
.pp-chk.field { flex-direction: row; align-items: flex-start; gap: 10px; }

/* ==== cothu.css ==== */
/* =====================================================================
   Thư viện cổ thư + Hỏi đáp tâm linh — tiền tố ct-
   Gộp SAU lớp "Sơn mài cung đình" của main.css. Dùng biến: --lac-0..3, --leaf, --leaf-2, --leaf-hi,
   --ivory, --display, --son, --gold, --line, --line-2, --ink, --ink-2, --ink-3, --frame, --lift, --grad-hero.
   Dùng lại td-crumb, td-sep, td-search, td-search-row, td-pn, orn, paper của main.css.
   ===================================================================== */
:root {
  --ct-han: 'Noto Serif CJK TC', 'Noto Serif CJK SC', 'Songti TC', 'Songti SC', 'SimSun', 'PMingLiU', serif;
  --ct-paper: #fbf3e2;
  --ct-paper-2: #f5e8cc;
  --ct-rule: rgba(168, 30, 30, .55);
}

/* ---------- Đầu trang ---------- */
.ct-head-han { margin: 0 0 4px; font-family: var(--ct-han); font-size: clamp(1.05rem, 2.2vw, 1.4rem); letter-spacing: .32em; color: var(--leaf-hi, #f1dca2); opacity: .9; }
.ct-head h1 { margin-bottom: .35em; }
.ct-wrap { min-width: 0; }

/* ---------- Bố cục trang sách ---------- */
.ct-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 36px; align-items: start; }
.ct-main { min-width: 0; }
.ct-main > section { margin: 0 0 34px; }
.ct-main > section > h2 { margin-bottom: .6em; }
.ct-main p { max-width: 72ch; }
.ct-side { position: sticky; top: 92px; min-width: 0; }
@media (max-width: 1060px) {
  .ct-layout { grid-template-columns: minmax(0, 1fr); }
  .ct-side { display: none; }
}

/* ---------- Bìa sách đóng chỉ (sơn mài) ---------- */
.ct-cover { position: relative; flex: 0 0 auto; display: inline-flex; justify-content: flex-start; align-items: flex-start; width: 66px; height: 92px; padding: 8px 0 0 9px; border-radius: 2px 5px 5px 2px;
  background: radial-gradient(circle at 30% 20%, rgba(255, 220, 160, .14), transparent 55%), linear-gradient(160deg, var(--lac-1, #4a0b0b), var(--lac-2, #6e1414) 60%, var(--lac-3, #9b1f1a));
  box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .55), inset -9px 0 0 -6px rgba(0, 0, 0, .25), 0 10px 18px -12px rgba(40, 0, 0, .8); }
.ct-cover::before { content: ''; position: absolute; top: 0; bottom: 0; right: 9px; width: 1px; background: rgba(241, 220, 162, .75); }
.ct-cover::after { content: ''; position: absolute; top: 8%; bottom: 8%; right: 5px; width: 9px;
  background: repeating-linear-gradient(180deg, transparent 0 calc(25% - 1px), rgba(241, 220, 162, .85) calc(25% - 1px) 25%); }
.ct-cover-label { writing-mode: vertical-rl; text-orientation: upright; font-family: var(--ct-han); font-size: 11px; line-height: 1; letter-spacing: .06em; color: var(--lac-0, #2e0707);
  background: #fbf3e2; border: 1px solid #c9a35a; box-shadow: inset 0 0 0 2px #fbf3e2, inset 0 0 0 3px rgba(168, 30, 30, .6); padding: 6px 3px; max-height: calc(100% - 12px); overflow: hidden; }
.ct-cover-lg { width: 104px; height: 146px; padding: 12px 0 0 14px; }
.ct-cover-lg .ct-cover-label { font-size: 16px; padding: 9px 5px; }
.ct-cover-lg::before { right: 13px; }
.ct-cover-lg::after { right: 7px; width: 13px; }
.ct-cover-sm { width: 42px; height: 58px; padding: 5px 0 0 6px; }
.ct-cover-sm .ct-cover-label { font-size: 8px; padding: 4px 2px; box-shadow: inset 0 0 0 1px #fbf3e2, inset 0 0 0 2px rgba(168, 30, 30, .6); }
.ct-cover-sm::before { right: 6px; }
.ct-cover-sm::after { right: 3px; width: 6px; }

/* ---------- Thẻ thư mục ---------- */
.ct-catalog { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: start; padding: 20px 22px; margin: 0 0 18px;
  background: linear-gradient(180deg, var(--ct-paper), var(--ct-paper-2)); border: 1px solid var(--line-2, #d3bc8e); border-radius: 6px; box-shadow: var(--frame), var(--lift); }
.ct-dl { margin: 0; display: grid; gap: 8px; min-width: 0; padding-right: 52px; }
.ct-dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding-bottom: 8px; border-bottom: 1px dashed rgba(169, 124, 47, .35); }
.ct-dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ct-dl dt { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold, #b8892f); padding-top: 3px; }
.ct-dl dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.ct-han-inline { font-family: var(--ct-han); font-size: 1.25rem; letter-spacing: .08em; color: var(--lac-2, #6e1414); }
.ct-seal { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; transform: rotate(-6deg); opacity: .92; }
@media (max-width: 640px) {
  .ct-catalog { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .ct-catalog .ct-cover-lg { width: 84px; height: 118px; padding: 9px 0 0 11px; }
  .ct-catalog .ct-cover-lg .ct-cover-label { font-size: 13px; }
  .ct-dl { padding-right: 0; }
  .ct-dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.ct-tt { padding: 12px 16px; border-left: 3px solid var(--leaf-2, #b8892f); background: #fbf1df; border-radius: 0 8px 8px 0; color: var(--ink-2); font-size: .95rem; margin: 0 0 30px; }

/* ---------- Cấu trúc & tư tưởng ---------- */
.ct-struct { list-style: none; counter-reset: ct; margin: 0; padding: 0; display: grid; gap: 10px; }
.ct-struct li { counter-increment: ct; position: relative; padding: 10px 14px 10px 54px; background: var(--ivory, #fffaf1); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 2px; min-width: 0; }
.ct-struct li::before { content: counter(ct); position: absolute; left: 12px; top: 10px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--display); font-weight: 700; color: var(--leaf-hi, #f1dca2); background: linear-gradient(160deg, var(--lac-1, #4a0b0b), var(--lac-3, #9b1f1a)); box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .7); }
.ct-struct b { color: var(--lac-2, #6e1414); }
.ct-struct span { color: var(--ink-2); }
.ct-ideas { list-style: none; counter-reset: cti; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ct-ideas li { counter-increment: cti; position: relative; padding: 16px 16px 14px; background: var(--ivory, #fffaf1); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--frame); min-width: 0; }
.ct-ideas li::before { content: counter(cti, decimal-leading-zero); display: block; font-family: var(--display); font-size: 1.5rem; line-height: 1; color: var(--son); margin-bottom: 6px; }
.ct-ideas h3 { font-family: var(--display); font-size: 1.08rem; margin: 0 0 6px; color: var(--ink); }
.ct-ideas p { margin: 0; color: var(--ink-2); font-size: .95rem; }
@media (max-width: 640px) { .ct-ideas { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Trang sách cổ: trích đoạn ---------- */
.ct-page { position: relative; margin: 0 0 20px; padding: 26px 26px 18px 30px; border-radius: 4px; min-width: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(169, 124, 47, .07) 0 2px, transparent 3px) 0 0 / 31px 29px,
    radial-gradient(circle at 70% 60%, rgba(120, 70, 20, .05) 0 1.5px, transparent 2.5px) 0 0 / 23px 37px,
    linear-gradient(180deg, #fdf6e6, #f6e9cf);
  border: 1px solid #c9a35a;
  box-shadow: inset 0 0 0 5px #fbf3e2, inset 0 0 0 6px var(--ct-rule), 0 16px 30px -24px rgba(80, 40, 0, .7); }
.ct-page::before { content: ''; position: absolute; top: 14px; bottom: 14px; left: 14px; width: 0; border-left: 1px solid var(--ct-rule); }
.ct-page-no { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 3px; font-family: var(--ct-han); font-size: 15px;
  color: #fbeed0; background: var(--son, #a81e1e); transform: rotate(-4deg); box-shadow: inset 0 0 0 2px #a81e1e, inset 0 0 0 3px rgba(251, 238, 208, .8); }
.ct-han { margin: 0 34px 14px 0; padding: 0; font-family: var(--ct-han); font-size: clamp(1.32rem, 2.5vw, 1.8rem); line-height: 1.9; letter-spacing: .1em; color: #24120a; font-weight: 600; overflow-wrap: anywhere; }
.ct-am { margin: 0 0 10px; font-style: italic; color: var(--lac-2, #6e1414); line-height: 1.65; }
.ct-dich { margin: 0 0 10px; color: var(--ink); font-size: 1.02rem; }
.ct-giai { margin: 0 0 12px; padding-top: 10px; border-top: 1px dashed rgba(169, 124, 47, .5); color: var(--ink-2); font-size: .95rem; }
.ct-lab { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 3px; font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px;
  color: var(--gold, #b8892f); border: 1px solid rgba(184, 137, 47, .55); background: rgba(255, 250, 238, .7); }
.ct-xuat { font-size: .8rem; color: var(--ink-3); text-align: right; font-family: var(--display); font-style: italic; }
@media (max-width: 640px) {
  .ct-page { padding: 22px 16px 14px 22px; }
  .ct-page::before { left: 9px; }
  .ct-han { margin-right: 28px; letter-spacing: .06em; line-height: 1.8; }
}

/* ---------- Ứng dụng, đọc thêm, sách liên quan ---------- */
.ct-apps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ct-apps a { display: flex; align-items: center; gap: 10px; height: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--ivory, #fffaf1); text-decoration: none; color: var(--ink); font-weight: 600; box-shadow: var(--frame); }
.ct-apps a::before { content: ''; flex: 0 0 auto; width: 10px; height: 10px; transform: rotate(45deg); background: var(--son); box-shadow: 0 0 0 3px rgba(168, 30, 30, .15); }
.ct-apps a:hover { border-color: var(--leaf); color: var(--son); }
@media (max-width: 640px) { .ct-apps { grid-template-columns: minmax(0, 1fr); } }
.ct-h3 { font-family: var(--display); font-size: 1.1rem; margin: 18px 0 8px; color: var(--lac-2, #6e1414); }
.ct-reads { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.ct-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ct-mini-item { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--ivory, #fffaf1); text-decoration: none; color: var(--ink); min-width: 0; }
.ct-mini-item:hover { border-color: var(--leaf); }
.ct-mini-item span { display: grid; min-width: 0; }
.ct-mini-item b { font-size: .95rem; line-height: 1.3; }
.ct-mini-item small { color: var(--ink-3); }
@media (max-width: 760px) { .ct-mini { grid-template-columns: minmax(0, 1fr); } }
.ct-src { padding: 16px 18px; border: 1px dashed var(--leaf-2, #b8892f); border-radius: 8px; background: #fbf1df; }
.ct-src h2 { font-size: 1.15rem; margin: 0 0 8px; color: var(--lac-2, #6e1414); }
.ct-src p { margin: 0 0 6px; font-size: .93rem; color: var(--ink-2); overflow-wrap: anywhere; }
.ct-pn { margin: 6px 0 14px; }
.ct-note { margin-top: 10px; }

/* ---------- Mục lục bên ---------- */
.ct-toc { padding: 16px 16px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--ivory, #fffaf1); box-shadow: var(--frame), var(--lift); max-height: calc(100vh - 120px); overflow: auto; }
.ct-toc-h { margin: 0 0 8px; font-family: var(--display); font-weight: 700; color: var(--lac-2, #6e1414); }
.ct-toc ol { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: .92rem; }
.ct-toc ol ol { margin: 4px 0 2px; padding-left: .9em; font-size: .84rem; list-style: none; }
.ct-toc a { text-decoration: none; color: var(--ink-2); }
.ct-toc a:hover { color: var(--son); text-decoration: underline; }
.ct-toc-back { margin-top: 12px; width: 100%; }

/* ---------- Trang chủ thư viện ---------- */
.ct-intro { display: grid; gap: 12px; margin-bottom: 26px; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-chips a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--ivory, #fffaf1); color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 500; }
.ct-chips a:hover { border-color: var(--leaf-2); color: var(--son); }
.ct-group { margin: 0 0 34px; scroll-margin-top: 90px; }
.ct-group > h2 { margin-bottom: .2em; flex-wrap: wrap; }
.ct-group-han { font-family: var(--ct-han); font-size: .62em; letter-spacing: .2em; color: var(--gold, #b8892f); font-weight: 500; }
.ct-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; margin-top: 12px; }
.ct-book { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(180deg, var(--ivory, #fffaf1), #fbf1df); text-decoration: none; color: var(--ink); box-shadow: var(--frame), var(--lift); transition: transform .15s, border-color .15s; min-width: 0; }
.ct-book:hover { transform: translateY(-2px); border-color: var(--leaf); color: var(--ink); }
.ct-book:hover b { color: var(--son); }
.ct-book-txt { display: grid; gap: 2px; min-width: 0; }
.ct-book-txt b { font-family: var(--display); font-size: 1.12rem; line-height: 1.25; }
.ct-book-han { font-family: var(--ct-han); color: var(--lac-2, #6e1414); letter-spacing: .08em; }
.ct-book-txt small { color: var(--ink-3); font-size: .82rem; }
.ct-book-mo { margin-top: 6px; color: var(--ink-2); font-size: .9rem; line-height: 1.5; }
.ct-timeline-wrap { margin: 10px 0 34px; }
.ct-timeline { list-style: none; margin: 14px 0 0; padding: 0 0 0 22px; border-left: 2px solid var(--leaf-2, #b8892f); columns: 2; column-gap: 48px; }
.ct-timeline li { position: relative; break-inside: avoid; padding: 0 0 12px 4px; display: grid; }
.ct-timeline li::before { content: ''; position: absolute; left: -29px; top: 6px; width: 10px; height: 10px; transform: rotate(45deg); background: var(--son); box-shadow: 0 0 0 3px var(--ct-paper); }
.ct-tl-y { font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--gold, #b8892f); text-transform: uppercase; }
.ct-timeline a { font-weight: 600; text-decoration: none; }
.ct-timeline a:hover { text-decoration: underline; }
@media (max-width: 760px) { .ct-timeline { columns: 1; } }
.ct-how { margin-bottom: 20px; }
.ct-paper { padding: 14px 18px; margin-top: 16px; font-size: .95rem; }

/* ---------- Hỏi đáp ---------- */
.ct-qa-group { margin: 0 0 30px; scroll-margin-top: 90px; }
.ct-qa-group > h2 { flex-wrap: wrap; }
.ct-count { font-family: var(--sans); font-size: .5em; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.ct-qa { border: 1px solid var(--line); border-radius: 8px; background: var(--ivory, #fffaf1); margin: 0 0 8px; box-shadow: var(--frame); scroll-margin-top: 90px; }
.ct-qa[open] { border-color: var(--leaf-2, #b8892f); background: linear-gradient(180deg, var(--ivory, #fffaf1), #fbf1df); }
.ct-qa summary { display: flex; gap: 12px; align-items: flex-start; padding: 13px 44px 13px 14px; cursor: pointer; list-style: none; position: relative; font-weight: 600; color: var(--ink); }
.ct-qa summary::-webkit-details-marker { display: none; }
.ct-qa summary::after { content: ''; position: absolute; right: 18px; top: 19px; width: 9px; height: 9px; border-right: 2px solid var(--son); border-bottom: 2px solid var(--son); transform: rotate(45deg); transition: transform .15s; }
.ct-qa[open] summary::after { transform: rotate(-135deg); top: 23px; }
.ct-qa summary:focus-visible { outline: 2px solid var(--son); outline-offset: -2px; border-radius: 8px; }
.ct-qa-no { flex: 0 0 auto; min-width: 28px; height: 28px; padding: 0 6px; display: grid; place-items: center; border-radius: 6px; font-family: var(--display); font-size: .9rem; color: var(--leaf-hi, #f1dca2); background: linear-gradient(160deg, var(--lac-1, #4a0b0b), var(--lac-3, #9b1f1a)); }
.ct-qa-q { min-width: 0; padding-top: 2px; line-height: 1.45; }
.ct-qa-a { padding: 0 16px 14px 54px; }
.ct-qa-a p { margin: 0 0 10px; color: var(--ink); max-width: 75ch; }
.ct-qa-links { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-qa-links a { padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(168, 30, 30, .35); background: #fff7ea; font-size: .88rem; text-decoration: none; }
.ct-qa-links a:hover { background: var(--son-soft, #f8e4dc); }
@media (max-width: 640px) {
  .ct-qa summary { padding: 12px 40px 12px 12px; gap: 10px; }
  .ct-qa-a { padding: 0 14px 14px 14px; }
}
@media print {
  .ct-side, .ct-search, .ct-chips, .ct-pn { display: none !important; }
  .ct-qa { break-inside: avoid; }
  .ct-qa .ct-qa-a { display: block; }
}

/* ==== tamlinh.css ==== */
/* ===== Nhóm TÂM LINH VIỆT: xin-xam, boi-kieu, lich-an-chay, niem-phat, so-gio-gia-tien, xam-quan-am-so-* =====
   Tiền tố tl-. Dùng biến giao diện "Sơn mài cung đình" của main.css: --lac-*, --leaf*, --ivory, --silk, --display, --son, --gold, --tot, --xau. */

.tl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tl-h2 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); color: var(--lac-2, #6e1414); margin: 0 0 10px; }
.tl-h3 { font-family: var(--display, serif); color: var(--lac-2, #6e1414); font-size: 1.1rem; margin: 18px 0 8px; }
.tl-eyebrow { margin: 0 0 4px; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.tl-sec { margin-top: 22px; min-width: 0; }
.tl-sec:first-child { margin-top: 0; }
.tl-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tl-links a { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--ivory, #fff); text-decoration: none; font-size: .9rem; color: var(--ink); }
.tl-links a:hover { border-color: var(--leaf-2, #b8892f); color: var(--son); }
.tl-note { font-size: .88rem; color: var(--ink-2); margin: 10px 0 0; }
.tl-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tl-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* Các bước nghi thức */
.tl-steps { list-style: none; counter-reset: tl; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.tl-steps li { counter-increment: tl; position: relative; padding-left: 38px; font-size: .93rem; line-height: 1.55; color: var(--ink); }
.tl-steps li::before { content: counter(tl); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--lac-1, #4a0b0b), var(--lac-3, #9b1f1a)); color: var(--leaf-hi, #f1dca2); font: 700 .8rem var(--sans); box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .7); }
.tl-steps b { color: var(--lac-2, #6e1414); }

/* Khung bài khấn mẫu */
.tl-khan { white-space: pre-line; background: #fffdf7; border: 1px solid #f0e2bd; border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: 12px 14px; font-size: .93rem; line-height: 1.7; margin: 0 0 14px; }

/* ---------- Ống xăm ---------- */
.tl-stage { position: relative; display: grid; place-items: center; padding: 18px 12px 8px; border-radius: 14px; background: var(--grad-hero); border: 1px solid var(--leaf-2, #b8892f);
  box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .35), 0 18px 36px -26px rgba(60, 0, 0, .8); overflow: hidden; }
.tl-stage svg { width: min(240px, 62vw); height: auto; display: block; overflow: visible; }
.tl-stage-cap { margin: 6px 0 0; color: #f3e3c3; font-size: .92rem; text-align: center; min-height: 1.5em; }
.tl-ong { transform-origin: 50% 92%; }
.tl-lac .tl-ong { animation: tl-lac .32s ease-in-out infinite alternate; }
.tl-lac .tl-thanh-g { animation: tl-nay .16s ease-in-out infinite alternate; }
@keyframes tl-lac { from { transform: rotate(-11deg); } to { transform: rotate(9deg); } }
@keyframes tl-nay { from { transform: translateY(0); } to { transform: translateY(-5px); } }
.tl-roi { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
.tl-roi.on { opacity: 1; animation: tl-roi .9s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes tl-roi { 0% { transform: translate(0, -150px) rotate(-8deg); opacity: 0; } 25% { opacity: 1; } 70% { transform: translate(64px, 20px) rotate(70deg); } 100% { transform: translate(70px, 26px) rotate(80deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .tl-lac .tl-ong, .tl-lac .tl-thanh-g, .tl-roi.on { animation: none; }
  .tl-roi.on { transform: translate(70px, 26px) rotate(80deg); }
}

/* ---------- Kết quả quẻ xăm ---------- */
.tl-que-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.tl-que-so { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 12px; background: linear-gradient(160deg, var(--lac-1, #4a0b0b), var(--lac-3, #9b1f1a));
  color: var(--leaf-hi, #f1dca2); font: 700 1.6rem var(--display, serif); box-shadow: inset 0 0 0 2px rgba(216, 180, 106, .7); font-variant-numeric: lining-nums; }
.tl-que-so small { display: block; font: 600 .62rem var(--sans); letter-spacing: .08em; text-transform: uppercase; margin-bottom: -6px; color: #ead9b6; }
.tl-que-ten { min-width: 0; flex: 1; }
.tl-que-ten h2 { margin: 0; font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: var(--lac-2, #6e1414); }
.tl-han { font-family: 'Noto Serif TC', 'Noto Serif CJK TC', 'Source Han Serif TC', 'Songti TC', 'PMingLiU', 'MingLiU', serif; letter-spacing: .06em; }
.tl-que-ten .tl-han { display: block; color: var(--ink-2); font-size: 1rem; margin-top: 2px; }
.tl-tho { display: grid; gap: 2px; margin: 14px 0 0; padding: 14px 16px; border-radius: 10px; background: #fbf3e4; border: 1px solid #ecd9ae; }
.tl-tho-dong { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 4px 18px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed #e7d3a6; }
.tl-tho-dong:last-child { border-bottom: 0; }
.tl-tho-dong .tl-han { font-size: 1.32rem; color: var(--lac-0, #2e0707); white-space: nowrap; }
.tl-tho-dong i { font-style: normal; color: var(--lac-2, #6e1414); font-weight: 500; }
.tl-dich { margin: 12px 0 0; font-size: .98rem; }
.tl-viec { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.tl-viec li { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--ivory, #fff); font-size: .94rem; line-height: 1.55; }
.tl-viec li.on { border-color: var(--leaf-2, #b8892f); box-shadow: 0 0 0 2px rgba(216, 180, 106, .35); background: #fffaf0; }
.tl-viec b { color: var(--lac-2, #6e1414); }
.tl-viec .badge { margin: 4px 0 0; justify-self: start; }
.tl-so-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.tl-so-grid a { display: grid; place-items: center; height: 32px; border-radius: 6px; border: 1px solid var(--line); background: var(--ivory, #fff); text-decoration: none; font-size: .86rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.tl-so-grid a:hover { border-color: var(--leaf-2, #b8892f); color: var(--son); }
.tl-so-grid a.thuong { border-color: #b7dfc5; }
.tl-so-grid a.ha { border-color: #f1c6bf; }
.tl-so-grid a[aria-current="page"] { background: var(--son); border-color: var(--son); color: #fff; }
.tl-pn { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--ink-2); margin: 8px 0 0; }
.tl-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; border: 1px solid; vertical-align: -1px; }
.tl-legend .l-t::before { border-color: #b7dfc5; } .tl-legend .l-h::before { border-color: #f1c6bf; } .tl-legend .l-g::before { border-color: var(--line); }

/* ---------- Bói Kiều ---------- */
.tl-kieu { margin: 14px 0 0; padding: 18px 18px 14px; border-radius: 12px; background: #fbf3e4; border: 1px solid #ecd9ae; position: relative; }
.tl-kieu::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--son); }
.tl-cap { margin: 0; font-family: var(--display, serif); font-size: clamp(1.12rem, 2.4vw, 1.36rem); line-height: 1.65; color: var(--lac-0, #2e0707); }
.tl-cap span { display: block; }
.tl-cap .luc { padding-left: 1.6em; }
.tl-cap-so { font: 500 .8rem var(--sans); color: var(--ink-3); margin: 6px 0 0; }
.tl-ngucanh { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.tl-ngucanh li { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: 8px; font-size: .93rem; line-height: 1.55; color: var(--ink-2); }
.tl-ngucanh li.on { color: var(--lac-0, #2e0707); font-weight: 600; }
.tl-ngucanh .so { font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: .8rem; padding-top: 2px; }
.tl-ngucanh li.on .so { color: var(--son); }
.tl-ngucanh .luc { padding-left: 1.2em; display: block; }
.tl-doan { margin-top: 14px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--ivory, #fff); }
.tl-doan h3 { margin: 0 0 6px; font-size: 1.05rem; }
.tl-doan p { margin: 0 0 8px; }
.tl-doan p:last-child { margin-bottom: 0; }
.tl-tim-kq { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; max-height: 360px; overflow: auto; overscroll-behavior: contain; }
.tl-tim-kq li { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); gap: 8px; font-size: .92rem; }
.tl-tim-kq button { background: none; border: 0; padding: 0; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.tl-tim-kq button:hover { color: var(--son); text-decoration: underline; text-underline-offset: 3px; }
.tl-tim-kq mark { background: #fdf0c8; color: inherit; padding: 0 1px; border-radius: 2px; }
.tl-tim-kq .so { font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: .82rem; padding-top: 2px; }
.tl-mucluc { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; font-size: .88rem; }
.tl-mucluc li { display: flex; gap: 8px; min-width: 0; }
.tl-mucluc .so { flex: none; width: 6.4em; white-space: nowrap; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tl-mucluc i { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--gold); }
.tl-mucluc i.lanh { background: var(--tot); } .tl-mucluc i.du { background: var(--xau); }

/* ---------- Lịch ăn chay ---------- */
.tl-homnay { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; align-items: center; padding: 16px 18px; border-radius: 12px; background: var(--grad-hero); color: #f3e3c3;
  border: 1px solid var(--leaf-2, #b8892f); box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .35); }
.tl-homnay b { color: #fbf0d6; font-family: var(--display, serif); font-size: 1.15rem; font-weight: 700; }
.tl-homnay p { margin: 2px 0 0; color: #ead9b6; font-size: .92rem; }
.tl-homnay .tl-dot { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 236, 190, .12); box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .7); color: var(--leaf-hi, #f1dca2); font: 700 1.05rem var(--display, serif); }
.tl-homnay.chay .tl-dot { background: linear-gradient(180deg, #f3dc9c, #c99a3f); color: #2a1606; }
.tl-thang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; margin-top: 12px; }
.tl-thang { border: 1px solid var(--line); border-radius: 12px; background: var(--ivory, #fff); padding: 12px 12px 10px; min-width: 0; }
.tl-thang h3 { margin: 0 0 8px; font-size: 1rem; color: var(--lac-2, #6e1414); display: flex; justify-content: space-between; gap: 8px; }
.tl-thang h3 small { font: 500 .78rem var(--sans); color: var(--ink-3); }
.tl-ngay-list { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.tl-ngay { display: grid; justify-items: center; min-width: 44px; padding: 4px 5px 3px; border-radius: 8px; border: 1px solid #ecd9ae; background: #fffaf0; line-height: 1.2; }
.tl-ngay b { font-size: 1rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.tl-ngay span { font-size: .68rem; color: var(--ink-3); }
.tl-ngay.qua { opacity: .55; }
.tl-ngay.homnay { border-color: var(--son); background: var(--son); }
.tl-ngay.homnay b, .tl-ngay.homnay span { color: #fff; }
.tl-ngay.via { border-color: var(--leaf-2, #b8892f); box-shadow: inset 0 -3px 0 var(--leaf, #d8b46a); }
.tl-via-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.tl-via-list li { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--ivory, #fff); font-size: .93rem; }
.tl-via-list li.qua { opacity: .6; }
.tl-via-list li.homnay { border-color: var(--son); box-shadow: 0 0 0 2px rgba(168, 30, 30, .15); }
.tl-via-list .d { font-variant-numeric: tabular-nums; }
.tl-via-list .d b { display: block; font-size: 1rem; color: var(--ink); }
.tl-via-list .d span { font-size: .78rem; color: var(--ink-3); }
.tl-via-list .t b { color: var(--lac-2, #6e1414); font-weight: 600; }
.tl-via-list .t small { display: block; color: var(--ink-3); }
.tl-via-list .c { font-size: .82rem; color: var(--ink-2); white-space: nowrap; }

/* ---------- Niệm Phật ---------- */
.tl-np { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.tl-np-chuoi { position: relative; display: grid; place-items: center; padding: 12px; border-radius: 16px; background: var(--grad-hero); border: 1px solid var(--leaf-2, #b8892f); box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .35); }
.tl-np-chuoi svg { width: min(100%, 460px); height: auto; display: block; touch-action: manipulation; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tl-np-chuoi svg:focus { outline: none; }
.tl-np-chuoi:has(svg:focus-visible) { outline: 2px solid var(--leaf-hi, #f1dca2); outline-offset: 3px; }
.tl-hat { transition: fill .18s; }
.tl-np-tam { position: absolute; inset: 0 0 14% 0; display: grid; place-items: center; pointer-events: none; text-align: center; }
.tl-np-tam div { display: grid; gap: 2px; }
.tl-np-tam b { font: 700 clamp(2.4rem, 8vw, 3.6rem) var(--display, serif); color: #fbf0d6; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.tl-np-tam span { color: #ead9b6; font-size: .86rem; }
.tl-np-cau { color: var(--leaf-hi, #f1dca2) !important; font-family: var(--display, serif); font-size: 1.02rem !important; max-width: 13em; margin: 0 auto; }
.tl-np-stat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.tl-np-stat div { padding: 10px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--ivory, #fff); text-align: center; }
.tl-np-stat b { display: block; font: 700 1.35rem var(--display, serif); color: var(--son); font-variant-numeric: lining-nums tabular-nums; }
.tl-np-stat span { font-size: .78rem; color: var(--ink-2); }
.tl-np-btn { width: 100%; padding: 16px; font-size: 1.08rem; border-radius: 999px; }
.tl-np-tuan { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; height: 120px; margin: 10px 0 0; padding: 0; list-style: none; }
.tl-np-tuan li { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; text-align: center; font-size: .72rem; color: var(--ink-3); gap: 3px; }
.tl-np-tuan .cot { align-self: end; width: 100%; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #d8b46a, #b8892f); min-height: 2px; }
.tl-np-tuan li.on .cot { background: linear-gradient(180deg, #b92a20, #7e1410); }
.tl-np-tuan b { font-size: .72rem; color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .tl-np { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Sổ giỗ ---------- */
.tl-gio-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.tl-gio { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 4px 16px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--ivory, #fff); box-shadow: var(--frame, none), var(--lift, none); }
.tl-gio.gan { border-color: var(--leaf-2, #b8892f); }
.tl-gio-dem { display: grid; place-items: center; align-content: center; border-radius: 10px; background: #fbf3e4; border: 1px solid #ecd9ae; padding: 8px 4px; text-align: center; grid-row: span 2; }
.tl-gio-dem b { font: 700 1.7rem var(--display, serif); color: var(--son); line-height: 1; font-variant-numeric: lining-nums; }
.tl-gio-dem span { font-size: .74rem; color: var(--ink-2); margin-top: 4px; }
.tl-gio.homnay .tl-gio-dem { background: var(--son); border-color: var(--son); }
.tl-gio.homnay .tl-gio-dem b, .tl-gio.homnay .tl-gio-dem span { color: #fff; }
.tl-gio h3 { margin: 0; font-size: 1.08rem; color: var(--lac-2, #6e1414); }
.tl-gio h3 small { font: 500 .84rem var(--sans); color: var(--ink-2); margin-left: 6px; }
.tl-gio p { margin: 2px 0 0; font-size: .92rem; }
.tl-gio .tl-act { margin-top: 8px; grid-column: 2; }
.tl-gio .btn-sm, .tl-act .btn-sm { padding: 6px 12px; font-size: .86rem; }
.tl-in { display: none; }
@media (max-width: 520px) {
  .tl-viec li { grid-template-columns: minmax(0, 1fr); }
  .tl-tho-dong { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tl-tho-dong .tl-han { font-size: 1.22rem; }
  .tl-via-list li { grid-template-columns: 78px minmax(0, 1fr); }
  .tl-via-list .c { grid-column: 2; }
  .tl-gio { grid-template-columns: 70px minmax(0, 1fr); padding: 12px; }
  .tl-gio .tl-act { grid-column: 1 / -1; }
  .tl-mucluc { grid-template-columns: minmax(0, 1fr); }
  .tl-so-grid a { height: 30px; font-size: .8rem; }
}
@media print {
  body.tl-print .tool-head, body.tl-print aside, body.tl-print .tl-no-print, body.tl-print .vp-top, body.tl-print .vp-ticker, body.tl-print .toast { display: none !important; }
  body.tl-print .tool-grid { display: block; }
  body.tl-print .tl-in { display: block; }
  body.tl-print .tl-gio-list { display: none; }
  .tl-in table { width: 100%; border-collapse: collapse; font-size: 11pt; }
  .tl-in th, .tl-in td { border: 1px solid #999; padding: 4px 6px; text-align: left; }
}
/* Nút chọn hai lựa chọn giãn đủ bề ngang, không xuống dòng */
.tl-seg { display: flex; width: 100%; }
.tl-seg label { flex: 1; text-align: center; padding: 8px 8px; white-space: nowrap; font-size: .92rem; }
.check.field.tl-check { flex-direction: row; align-items: center; }
.check.field.tl-check input { margin-top: 0; }
.tl-pn .btn { flex: 1 1 0; min-width: 0; white-space: normal; text-align: center; }

/* ==== Tích hợp 3: 7 nhóm menu ==== */
.vp-dir { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .vp-dir { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .vp-dir { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vp-dir { grid-template-columns: minmax(0, 1fr); } }
.foot-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 22px; }
@media (max-width: 1060px) { .foot-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .foot-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 981px) and (max-width: 1360px) { .nav-btn { padding: 8px 6px; font-size: .88rem; gap: 4px; } }
@media (min-width: 981px) and (max-width: 1240px) { .nav a.cta { display: none; } }

/* ==== denphu.css ==== */
/* ===== Nhóm ĐỀN PHỦ: cẩm nang đền chùa (den-chua-*.html), soạn sớ (soan-so.html), xông đất nhiều người (xong-dat.html)
   Tiền tố dp-. Dùng biến giao diện "Sơn mài cung đình" của main.css: --lac-*, --leaf*, --ivory, --display, --son, --tot, --xau, --lift. */

/* ---------- Khung trang ---------- */
.dp-page { padding-bottom: 40px; }
.dp-page > * { min-width: 0; }
.dp-sec { margin-top: 30px; min-width: 0; }
.dp-stats + .dp-sec, .dp-page > .dp-sec:first-child { margin-top: 22px; }
.dp-sec > h2.orn { margin-bottom: 10px; }
.dp-h3 { font-family: var(--display); color: var(--lac-2); font-size: 1.08rem; margin: 18px 0 8px; letter-spacing: 0; }
.panel > .dp-h3:first-child, .panel-flat > .dp-h3:first-child { margin-top: 0; }
.dp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.dp-sec .dp-two { margin-top: 0; }
.dp-two > * { min-width: 0; margin: 0; }
.dp-two > .panel h2 { font-size: 1.3rem; margin-top: 0; }
.dp-v-sm { font-size: 1.05rem !important; line-height: 1.3; }
.dp-list { margin: 0; padding-left: 1.15em; }
.dp-list li { margin: 0 0 6px; }
.dp-vk { margin: 0 0 8px; padding-left: 1.15em; }
.dp-vk li { margin: 0 0 4px; }
.dp-src { margin-top: 22px; }

/* ---------- Lễ hội của một điểm ---------- */
.dp-le { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dp-le-item { min-width: 0; background: var(--ivory); border: 1px solid var(--line); border-left: 3px solid var(--son); border-radius: 10px; padding: 12px 16px; }
.dp-le-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.dp-le-h b { font-size: 1.02rem; }
.dp-le-am { color: #8a5a00; font-weight: 600; font-size: .9rem; }
.dp-le-d { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin-top: 8px; font-size: .93rem; }
.dp-le-k { display: block; font-size: .74rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.dp-le-v { font-weight: 600; }
.dp-le-d .badge { margin: 0 0 0 4px; vertical-align: 1px; }
.dp-le-ghi { margin: 8px 0 0; }
.dp-tag { display: inline-block; padding: 3px 10px; margin: 2px 2px 2px 0; border-radius: 999px; border: 1px solid var(--line-2); background: var(--ivory); color: var(--ink-2); font-size: .85rem; text-decoration: none; }
.dp-tag:hover { border-color: var(--son); color: var(--son); }

/* ---------- Thẻ điểm đến ---------- */
.dp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.dp-card { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--ivory); border: 1px solid var(--line); border-top: 3px solid var(--leaf-2); border-radius: 12px; box-shadow: var(--lift); }
.dp-card[hidden] { display: none; }
.dp-card[data-loai="den"] { border-top-color: var(--son); }
.dp-card[data-loai="mau"] { border-top-color: var(--lac-3); }
.dp-card[data-loai="khac"] { border-top-color: var(--ink-3); }
.dp-card h3 { margin: 0; font-family: var(--display); font-size: 1.08rem; line-height: 1.3; letter-spacing: 0; }
.dp-card h3 a { color: var(--lac-2); text-decoration: none; }
.dp-card h3 a:hover { color: var(--son); text-decoration: underline; }
.dp-card-m { margin: 0; display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--ink-3); }
.dp-pin { flex: none; width: 10px; height: 13px; background: var(--son);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 13'%3E%3Cpath d='M5 0a5 5 0 0 1 5 5c0 3.6-5 8-5 8S0 8.6 0 5a5 5 0 0 1 5-5zm0 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 13'%3E%3Cpath d='M5 0a5 5 0 0 1 5 5c0 3.6-5 8-5 8S0 8.6 0 5a5 5 0 0 1 5-5zm0 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.dp-card-t { flex: 1; margin: 0; font-size: .92rem; color: var(--ink-2); }
.dp-card-n { margin: 6px 0 0; padding-top: 8px; border-top: 1px dashed var(--line-2); color: var(--ink-2); }

/* ---------- Lễ hội sắp tới ---------- */
.dp-up { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 10px; }
.dp-up li { min-width: 0; display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; background: var(--ivory); border: 1px solid var(--line); border-radius: 10px; }
.dp-up-d { flex: 0 0 64px; padding: 6px 4px; border-radius: 8px; text-align: center; line-height: 1.2; background: var(--grad-hero); color: var(--leaf-hi); box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .5); }
.dp-up-d b { display: block; font-family: var(--display); font-size: 1.12rem; color: #fff; }
.dp-up-d small { display: block; font-size: .7rem; }
.dp-up-t { min-width: 0; line-height: 1.45; }
.dp-up-t a { font-weight: 700; }

/* ---------- Bộ lọc ---------- */
.dp-filter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 10px; }
.dp-filter > .field { grid-column: auto; }
.dp-frow { display: flex; align-items: flex-start; gap: 8px 12px; }
.dp-fl { flex: 0 0 42px; padding-top: 6px; font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.dp-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dp-chip { font: 500 .86rem var(--sans); padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--ivory); color: var(--ink-2); cursor: pointer; }
.dp-chip:hover { border-color: var(--gold); color: var(--ink); }
.dp-chip[aria-pressed="true"] { background: var(--son); border-color: var(--son); color: #fff; }
.dp-faq { display: grid; gap: 8px; }
.dp-faq details { padding: 12px 16px; }
.dp-faq summary { cursor: pointer; font-weight: 600; }
.dp-faq p { margin: 8px 0 0; }
.dp-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-tools a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--ivory); font-size: .88rem; font-weight: 500; text-decoration: none; }
.dp-tools a:hover { border-color: var(--son); }

@media (max-width: 760px) {
  .dp-two, .dp-le-d { grid-template-columns: minmax(0, 1fr); }
  .dp-frow { flex-direction: column; gap: 6px; }
  .dp-fl { flex: none; padding: 0; }
  .dp-le-item { padding: 12px 14px; }
}

/* ---------- Soạn sớ: biểu mẫu ---------- */
.dp-seg3 { display: flex; }
.dp-seg3 label { flex: 1; text-align: center; padding: 8px 6px; }
.dp-fs { margin: 0; padding: 12px; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: #fffdf8; }
.dp-fs legend { padding: 0 6px; font-weight: 700; font-size: .92rem; color: var(--son); }
.dp-rows { display: grid; gap: 10px; margin-bottom: 10px; }
.dp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; grid-template-areas: "ten ten x" "nam gt ."; gap: 6px 8px; align-items: end; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.dp-row:last-child { border-bottom: 0; padding-bottom: 0; }
.dp-row-ten { grid-area: ten; min-width: 0; }
.dp-row-nam { grid-area: nam; min-width: 0; }
.dp-row-gt { grid-area: gt; min-width: 0; }
.dp-row label { display: block; margin-bottom: 3px; font-size: .76rem; }
.dp-row input, .dp-row select { width: 100%; min-width: 0; }
.dp-row-x { grid-area: x; width: 34px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line-2); border-radius: 8px; background: var(--ivory); color: var(--ink-3); cursor: pointer; }
.dp-row-x:hover { color: var(--xau); border-color: var(--xau); }
.dp-row-x svg { width: 14px; height: 14px; }

/* ---------- Soạn sớ: tờ sớ khổ dọc, viền đỏ ---------- */
.dp-so-info { margin-bottom: 18px; }
.dp-so-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dp-so { --so-do: #a81e1e; --so-giay: #fbf0d0; display: grid; max-width: 640px; aspect-ratio: 1 / 1.414; margin: 0 auto; padding: 12px; background: var(--so-giay);
  border: 2px solid var(--so-do); box-shadow: inset 0 0 0 5px var(--so-giay), inset 0 0 0 7px var(--so-do), var(--lift); }
.dp-so-in { min-width: 0; padding: 28px 30px; border: 1px solid rgba(168, 30, 30, .5); font-family: var(--display); font-size: 1rem; line-height: 1.75; color: #3a1208;
  background: radial-gradient(circle at 50% 0, rgba(255, 255, 255, .45), transparent 60%); }
.dp-so-mo { margin: 0 0 4px; text-align: center; font-size: .88rem; letter-spacing: .08em; color: var(--so-do); }
.dp-so-t { margin: 0 0 18px; text-align: center; font-family: var(--display); font-size: 1.7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--so-do); }
.dp-so-t::after { content: ''; display: block; width: 84px; height: 2px; margin: 10px auto 0; background: var(--so-do); box-shadow: 0 4px 0 -1px rgba(168, 30, 30, .4); }
.dp-so-p { margin: 0 0 12px; text-align: justify; overflow-wrap: anywhere; }
.dp-so-k { color: var(--so-do); }
.dp-so-p ul { margin: 4px 0; padding-left: 1.2em; }
.dp-so-p li { margin: 0 0 2px; }
.dp-so-p p { margin: 0; }
.dp-so-end { margin: 18px 0 0; text-align: right; font-style: italic; }
#dp-print { display: none; }
@media (max-width: 560px) {
  .dp-so { padding: 7px; box-shadow: inset 0 0 0 3px var(--so-giay), inset 0 0 0 4px var(--so-do), var(--lift); }
  .dp-so-in { padding: 18px 14px; font-size: .95rem; line-height: 1.7; }
  .dp-so-t { font-size: 1.32rem; }
}
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  body.dp-print-so > *:not(main), body.dp-print-so main > *:not(#dp-print) { display: none !important; }
  body.dp-print-so #dp-print { display: block !important; }
  #dp-print .dp-so { max-width: none; width: 100%; aspect-ratio: auto; min-height: 270mm; box-shadow: inset 0 0 0 5px var(--so-giay), inset 0 0 0 7px var(--so-do);
    -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; }
  #dp-print .dp-so-in { min-height: calc(270mm - 24px); font-size: 12.5pt; }
}

/* ---------- Xông đất: chế độ so nhiều người ---------- */
.dp-xd-tabs { margin-bottom: 12px; }
.dp-xd-tabs button { flex: 1; }
.dp-xd-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.dp-xd-card { min-width: 0; padding: 14px 16px; background: var(--ivory); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 12px; }
.dp-xd-tot { border-left-color: var(--tot); }
.dp-xd-xau { border-left-color: var(--xau); }
.dp-xd-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dp-xd-rank { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; font-family: var(--display); font-weight: 700; color: var(--leaf-hi); background: var(--grad-hero); box-shadow: 0 0 0 2px var(--leaf); }
.dp-xd-who { flex: 1 1 180px; min-width: 0; display: grid; }
.dp-xd-who b { font-size: 1.05rem; }
.dp-xd-score { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.dp-xd-score .badge { margin: 0; }
.dp-xd-ly { margin: 10px 0 0; padding-left: 1.1em; }
.dp-xd-plus { color: var(--tot); }
.dp-xd-minus { color: var(--xau); }
.dp-xd-gio { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-2); line-height: 2.1; }
.dp-gio { display: inline-block; padding: 0 9px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; line-height: 1.75; white-space: nowrap; }
.dp-gio small { color: var(--ink-3); }
.dp-gio-tot { border-color: var(--leaf-2); background: linear-gradient(180deg, #fff3d4, #f6e2b1); font-weight: 600; }
@media (max-width: 480px) {
  .dp-xd-score { width: 100%; flex-direction: row; align-items: center; padding-left: 48px; gap: 8px; }
}

/* ===== Tài khoản: đăng nhập / đăng ký (sơn mài) ===== */
.tool-head[hidden] { display: none; }
.au { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); max-width: 1040px; margin: 34px auto 56px; border-radius: 18px; overflow: hidden; background: var(--ivory); box-shadow: 0 0 0 1px var(--leaf-2), 0 0 0 5px rgba(216, 180, 106, .18), 0 30px 60px -36px rgba(60, 10, 0, .65); }
.au-brand { position: relative; padding: 38px 36px 32px; background: var(--grad-hero); color: #f3e3c3; display: flex; flex-direction: column; gap: 22px; }
.au-brand::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(241, 220, 162, .35); border-radius: 12px; pointer-events: none; }
.au-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.au-logo .brand-mark { width: 52px; height: 52px; border-radius: 9px; box-shadow: 0 0 0 1px var(--leaf), 0 8px 18px -8px rgba(0, 0, 0, .6); }
.au-logo b { display: block; font: 700 1.35rem var(--display); color: var(--leaf-hi); letter-spacing: .01em; }
.au-logo small { display: block; font-size: .82rem; color: #e2c999; }
.au-brand h2 { margin: 6px 0 0; font: 700 clamp(1.45rem, 2.4vw, 1.9rem)/1.25 var(--display); color: #fff3d8; }
.au-ben { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.au-ben li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; }
.au-ben svg { width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: rgba(241, 220, 162, .12); box-shadow: inset 0 0 0 1px rgba(241, 220, 162, .45); fill: none; stroke: var(--leaf-hi); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.au-ben b { display: block; color: #fff1cf; font-weight: 600; }
.au-ben small { display: block; color: #e0c9a0; font-size: .88rem; line-height: 1.45; }
.au-safe { margin: auto 0 0; display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: #dcc395; line-height: 1.5; border-top: 1px solid rgba(241, 220, 162, .25); padding-top: 16px; }
.au-safe svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--leaf); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.au-card { padding: 34px 44px 30px; background: var(--ivory) var(--drum) right -60px top -60px no-repeat; }
.au-switch { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--silk-2); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 22px; }
.au-switch button { border: 0; background: none; padding: 9px 12px; border-radius: 999px; font: 600 .95rem var(--sans); color: var(--ink-3); cursor: pointer; }
.au-switch button[aria-selected="true"] { background: #fff; color: var(--son); box-shadow: 0 1px 2px rgba(60, 20, 0, .15), 0 0 0 1px var(--line-2); }
.au-switch button:focus-visible { outline: 2px solid var(--son); outline-offset: 2px; }
.au-title { margin: 0; font: 700 1.9rem/1.2 var(--display); color: var(--lac-2); }
.au-sub { margin: 6px 0 20px; color: var(--ink-2); }
.au-social { display: grid; gap: 10px; }
.so-slot { min-height: 42px; display: flex; justify-content: center; }
.so-slot > div { width: 100%; display: flex; justify-content: center; }
.so-btn { width: 100%; max-width: 400px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; font: 600 .98rem var(--sans); cursor: pointer; padding: 0 18px; transition: background .15s, box-shadow .15s; }
.so-btn svg { width: 20px; height: 20px; flex: none; }
.so-google { background: #fff; color: #1f1f1f; border: 1px solid #c9c2b6; }
.so-google:hover { background: #f7f4ee; box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .3); }
.so-apple { background: #000; color: #fff; border: 1px solid #000; }
.so-apple:hover { background: #1c1c1c; }
.so-btn:focus-visible { outline: 2px solid var(--son); outline-offset: 2px; }
.so-btn:disabled { opacity: .6; cursor: progress; }
.au-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; color: var(--ink-3); font-size: .86rem; }
.au-or::before, .au-or::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); }
.au-form { display: grid; gap: 14px; }
.au-form .field { grid-column: auto; }
.au-opt { font-weight: 400; color: var(--ink-3); font-size: .8rem; margin-left: 4px; }
input[type=password] { font: 1rem var(--sans); color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; padding: 11px 12px; width: 100%; min-height: 46px; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 48px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 38px; border: 0; background: none; color: var(--ink-3); border-radius: 6px; cursor: pointer; display: grid; place-items: center; }
.pw-eye svg { width: 20px; height: 20px; }
.pw-eye[aria-pressed="true"] { color: var(--son); }
.pw-eye:hover { background: var(--silk-2); }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: -6px; }
.pw-meter i { height: 4px; border-radius: 2px; background: var(--line); transition: background .2s; }
.pw-meter span { grid-column: 1 / -1; font-size: .8rem; color: var(--ink-3); }
.pw-meter[data-s="0"] i:nth-child(-n+1), .pw-meter[data-s="1"] i:nth-child(-n+1) { background: #c0392b; }
.pw-meter[data-s="2"] i:nth-child(-n+2) { background: #d68910; }
.pw-meter[data-s="3"] i:nth-child(-n+3) { background: #7d9a2b; }
.pw-meter[data-s="4"] i { background: var(--tot); }
.au-row { display: flex; justify-content: space-between; margin-top: -6px; }
.au-link { font-size: .9rem; color: var(--son); }
.au-consent { font-size: .9rem; color: var(--ink-2); display: flex; gap: 10px; align-items: flex-start; }
.au-consent input { margin-top: 3px; accent-color: var(--son); width: 18px; height: 18px; flex: none; }
.au-form .err:empty { display: none; }
.au-ok { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--tot-soft, #e9f6ee); color: #155c33; font-size: .92rem; line-height: 1.5; box-shadow: inset 0 0 0 1px #b9dfc7; }
.au-submit { width: 100%; min-height: 48px; border-radius: 999px; font-size: 1.02rem; }
.au-submit.busy { position: relative; color: transparent; }
.au-submit.busy::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: au-spin .7s linear infinite; }
@keyframes au-spin { to { transform: rotate(360deg); } }
.au-foot { margin: 18px 0 0; text-align: center; color: var(--ink-2); font-size: .95rem; }
.au-foot a { color: var(--son); font-weight: 600; }
.au-legal { margin: 14px 0 0; text-align: center; font-size: .78rem; color: var(--ink-3); line-height: 1.5; }
@media (max-width: 860px) {
  .au { grid-template-columns: minmax(0, 1fr); margin: 18px auto 40px; }
  .au-card { order: -1; padding: 26px 20px 24px; }
  .au-brand { padding: 26px 22px; }
  .au-brand h2 { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) { .au-submit.busy::after { animation-duration: 2s; } }

/* Khu tài khoản: ảnh đại diện, bảo mật */
.acc-who { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.acc-who img, .acc-ini { width: 48px; height: 48px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px var(--ivory), 0 0 0 3px var(--leaf); object-fit: cover; }
.acc-ini { display: grid; place-items: center; background: var(--grad-hero); color: var(--leaf-hi); font: 700 1.3rem var(--display); }
.acc-who p { margin: 0; min-width: 0; }
.acc-who b, .acc-who span { display: block; overflow: hidden; text-overflow: ellipsis; }
.sec-prof { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: end; }
.sec-prof .field { grid-column: auto; }
.sec-h { font: 600 1.05rem var(--display); color: var(--lac-2); margin: 22px 0 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.sec-prov { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; }
.sec-prov + .sec-prov { border-top: 1px dashed var(--line); }
.sec-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.sec-ic svg { width: 20px; height: 20px; }
.sec-prov small { display: block; color: var(--ink-3); font-size: .85rem; }
.sec-link { width: 210px; }
.sec-link .so-btn { min-height: 38px; font-size: .9rem; }
.sec-pw { display: grid; gap: 12px; max-width: 420px; }
.sec-pw .field { grid-column: auto; }
@media (max-width: 560px) { .sec-prov { grid-template-columns: 40px 1fr; } .sec-prov > :last-child { grid-column: 1 / -1; width: 100%; } }
.nav-acc.has-av::before { background: var(--av) center / cover no-repeat; }

.as-auto { margin: 4px 0 8px; font-size: .78rem; }

/* ===== Luận chuyên sâu dưới kết quả công cụ (deep.js) ===== */
.dp { margin-top: 22px; padding: 20px 22px 18px; border-radius: 16px; background: linear-gradient(180deg, #fff7e4, var(--ivory)); box-shadow: 0 0 0 1px var(--leaf-2), 0 0 0 4px rgba(216, 180, 106, .16), 0 22px 40px -30px rgba(80, 30, 0, .55); }
.dp[hidden] { display: none; }
.dp-head { display: flex; gap: 12px; align-items: center; }
.dp-seal { flex: none; width: 42px; height: 42px; border-radius: 9px; display: grid; place-items: center; font: 700 1.25rem 'Noto Serif CJK TC', 'Songti TC', 'PMingLiU', 'SimSun', 'Microsoft JhengHei', serif; color: var(--leaf-hi); background: var(--grad-hero); box-shadow: inset 0 0 0 1px rgba(241, 220, 162, .6); }
.dp-head b { display: block; font: 700 1.2rem/1.3 var(--display); color: var(--lac-2); }
.dp-head span { display: block; font-size: .84rem; color: var(--ink-3); }
.dp-moi { margin: 12px 0 4px; color: var(--ink-2); line-height: 1.6; }
.dp-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.dp-sec { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--line); }
.dp-lock { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--silk-2); }
.dp-lock svg { width: 16px; height: 16px; fill: none; stroke: var(--son); stroke-width: 1.8; stroke-linecap: round; }
.dp-sec b { display: block; color: var(--ink); }
.dp-sec > div > span { display: block; font-size: .88rem; color: var(--ink-3); margin-top: 2px; }
.dp-blur { display: grid; gap: 6px; margin-top: 9px; filter: blur(2.5px); opacity: .7; }
.dp-blur i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #d9c49a, #eadcbc); }
.dp-cta { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.dp-go { min-height: 46px; border-radius: 999px; padding-inline: 24px; }
.dp-note { margin: 0; flex: 1 1 260px; font-size: .88rem; color: var(--ink-2); line-height: 1.5; }
.dp-err { margin: 10px 0 0; color: var(--xau); font-size: .9rem; }
.dp-trust { margin: 12px 0 0; font-size: .8rem; color: var(--ink-3); }
@media (max-width: 560px) { .dp { padding: 16px 14px; } .dp-go { width: 100%; } }

/* Bảng giá: ưu đãi, thanh toán, xác nhận đơn */
.bg-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 0 0 18px; }
.bg-offers > div { padding: 12px 14px; border-radius: 12px; background: var(--grad-hero); color: #f3e3c3; box-shadow: inset 0 0 0 1px rgba(241, 220, 162, .4); }
.bg-offers b { display: block; font: 700 1.15rem var(--display); color: var(--leaf-hi); }
.bg-offers span { font-size: .85rem; }
.bg-per { margin: -4px 0 0; font-size: .85rem; color: var(--ink-3); }
.bg-bonus { margin: 0; font-size: .85rem; font-weight: 600; color: var(--tot); }
.bg-paym { margin: 28px 0 0; padding: 22px; border-radius: 16px; background: var(--ivory); box-shadow: 0 0 0 1px var(--line-2); }
.bg-paym h2 { margin: 0 0 14px; font-size: 1.4rem; }
.bg-paym-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.bg-paym-row b { display: block; color: var(--lac-2); }
.bg-paym-row span { font-size: .9rem; color: var(--ink-2); }
.bg-paym .small { margin: 14px 0 0; }
.pay-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.pay-amt { font-size: 1.2rem; color: var(--son); }
.pay-steps { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 4px; color: var(--ink-2); }
.pay-warn { background: var(--gold-soft); padding: 8px 10px; border-radius: 8px; }
.pay-spin { display: inline-block; width: 14px; height: 14px; border-width: 2px; vertical-align: -2px; margin-right: 4px; }
.kv dd .btn-sm { padding: 3px 10px; font-size: .78rem; margin-left: 6px; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--son); text-decoration: underline; cursor: pointer; text-align: left; }
.dp-mine li { margin: 6px 0; }
.dp-mine .ul-text { margin: 8px 0 12px; padding: 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: .95rem; }
.foot-owner { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(241, 220, 162, .25); opacity: .9; }