/* Thiên Bàn — "The Celestial Atlas" design system. Light-first; indigo/bronze reserved for chart surfaces. */
:root{
  --ivory:#FAF6EF;--parchment:#F0E7D8;--ink:#282923;--cinnabar:#A7432C;--brass:#B08A53;--jade:#477B70;--blue:#547B97;--line:#D9CCB9;
  --indigo:#6E2C1D;--indigo2:#7D3626;--indigo3:#8B4130;
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;--sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;--han:"Songti SC","Noto Serif TC","STSong","SimSun",serif;
  /* semantic (re-pointed inside dark surfaces) */
  --bg:var(--ivory);--surface:var(--parchment);--raise:#FFFDF8;--text:var(--ink);--text2:#5A5648;--muted:#6F6859;--bd:var(--line);--accent:var(--cinnabar);--gold:#86642F;
  --pos:#35665B;--neg:#A7432C;--focus:#A7432C;
  --el-moc:#3A6A5F;--el-hoa:#A7432C;--el-tho:#86642F;--el-kim:#545A64;--el-thuy:#43667F;
  --r:14px;--r-sm:9px;--sh:0 1px 2px rgba(60,40,15,.06),0 8px 24px -10px rgba(60,40,15,.18);
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:112px;
}
.dark,.r-tuvi{
  --bg:var(--indigo);--surface:var(--indigo2);--raise:var(--indigo3);--text:#FAF1E4;--text2:#F0DCCB;--muted:#E1C2AE;--bd:#9A5643;--accent:#F7C9A4;--gold:#EBCB8E;
  --pos:#BFE0D4;--neg:#FFC4B0;--focus:#EBCB8E;
  --el-moc:#BFE0D4;--el-hoa:#FFC4B0;--el-tho:#EBCB8E;--el-kim:#E4DED6;--el-thuy:#C9DDEB;
}
*{box-sizing:border-box}[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body[data-view=home] #chart-view,body[data-view=chart] #home{display:none}
h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:500;line-height:1.12;margin:0;letter-spacing:-.01em}
p{margin:0 0 1em}ul,ol{margin:0;padding:0}
[lang=zh]{font-family:var(--han);font-weight:400}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;z-index:99;border-radius:8px}.skip:focus{left:8px}
.eyebrow{font:600 .72rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 var(--s4)}
.muted{color:var(--muted)}.small{font-size:.84rem}
.link{background:none;border:0;padding:0;font:500 .92rem var(--sans);color:var(--accent);cursor:pointer;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent);text-underline-offset:4px}
.link:hover{text-decoration-color:currentColor}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 .95rem/1 var(--sans);padding:14px 24px;border-radius:99px;border:1px solid var(--cinnabar);background:var(--cinnabar);color:#FFF8F0;cursor:pointer;text-decoration:none;transition:background .2s,transform .2s,box-shadow .2s;min-height:48px}
.btn:hover{background:#8F3622;box-shadow:0 8px 20px -8px rgba(167,67,44,.6);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--bd)}.btn-ghost:hover{background:var(--surface);box-shadow:none;border-color:var(--brass)}
.btn-light{background:#FAF6EF;color:#6E2C1D;border-color:#FAF6EF}.btn-light:hover{background:#fff}
.btn-sm{padding:10px 18px;min-height:40px;font-size:.88rem}.btn-lg{width:100%;padding:18px 24px;font-size:1.02rem}
.btn:disabled{opacity:.7;cursor:progress}
/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--ivory) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.site-header.stuck{border-color:var(--line);box-shadow:0 6px 20px -16px rgba(60,40,15,.4)}
.hdr{display:flex;align-items:center;gap:var(--s5);height:68px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand-mark{color:var(--ink);display:block}.brand-t{display:flex;flex-direction:column;line-height:1.1}
.brand-t b{font:600 1.3rem var(--serif);letter-spacing:.01em}.brand-t small{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{font-size:.9rem;font-weight:500;color:var(--text2);text-decoration:none;padding:10px 12px;border-radius:99px;transition:color .15s,background .15s}
.nav a:hover{color:var(--ink);background:var(--parchment)}
/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(900px 600px at 78% 45%,#F4E9D5 0,transparent 70%),var(--ivory);border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;color:var(--brass);pointer-events:none}
.hb-arcs{opacity:.28}.hb-cloud{opacity:.3}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s7);align-items:center;padding-top:clamp(40px,7vw,96px);padding-bottom:clamp(48px,7vw,104px)}
.hero h1{text-wrap:balance;font-size:clamp(2.5rem,5.4vw,5rem);line-height:1.02;letter-spacing:-.02em;font-weight:500}
.hero h1 em{font-style:italic;color:var(--cinnabar)}
.hero-lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--text2);max-width:34em;margin:var(--s5) 0 var(--s6)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-facts{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);font-size:.82rem;color:var(--muted);line-height:1.45}
.hero-facts b{display:block;color:var(--ink);font:600 .9rem var(--sans);margin-bottom:4px}
.hero-art{position:relative}.compass-wrap{width:100%;aspect-ratio:1;max-width:620px;margin:0 auto;color:var(--ink)}
.caption{font:italic .9rem var(--serif);color:var(--muted);text-align:center;margin:var(--s3) 0 0}
.compass{width:100%;height:100%;display:block;overflow:visible;--cp-line:var(--ink)}
.cp-disc{fill:var(--cp-fill,#FFFBF3);fill-opacity:.55;stroke:none}
.cp-line{stroke:var(--cp-line,currentColor);stroke-opacity:.38;stroke-width:1}.cp-strong{stroke-opacity:.8;stroke-width:1.3}.cp-star{stroke-dasharray:3 4}.cp-orb{fill:none;stroke:var(--brass);stroke-opacity:.8}
.cp-han{fill:var(--ink);font-size:23px}.cp-vn{fill:var(--muted);font:600 9px var(--sans);letter-spacing:.14em}.cp-stem{font-size:15px;fill:var(--gold)}
.cp-node circle{stroke-width:1.4;fill:#FFFBF3}.cp-node text{font:600 18px var(--han);fill:currentColor}
.cp-node.el-moc{color:var(--el-moc);stroke:var(--el-moc)}.cp-node.el-hoa{color:var(--el-hoa);stroke:var(--el-hoa)}.cp-node.el-tho{color:var(--el-tho);stroke:var(--el-tho)}.cp-node.el-kim{color:var(--el-kim);stroke:var(--el-kim)}.cp-node.el-thuy{color:var(--el-thuy);stroke:var(--el-thuy)}
.cp-node text{stroke:none}
.cp-cinnabar{fill:var(--cinnabar)}.cp-needle-hi{fill:#fff;opacity:.28}.cp-pin{fill:var(--ivory);stroke:var(--ink);stroke-width:1.5}
.cp-planet.a{fill:var(--cinnabar)}.cp-planet.b{fill:var(--brass)}.cp-planet.c{fill:var(--jade)}
.cp-ring{transform-origin:300px 300px;animation:rot 240s linear infinite}
.cp-orbit.spin{animation:rot var(--dur) linear infinite}
.spin-slow .compass{animation:rot 6s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.cp-orbit.spin{transform-box:view-box}
@keyframes rot2{to{transform:rotate(360deg)}}
/* ---------- sections ---------- */
section{position:relative}
.sec-h{margin-bottom:var(--s7);max-width:820px}
.sec-h h2,.create h2,.final h2{font-size:clamp(2rem,4.2vw,3.5rem);line-height:1.06;letter-spacing:-.018em}
.sec-sub{color:var(--text2);margin:var(--s3) 0 0;max-width:40em}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.cp-ring,.cp-orbit.spin,.spin-slow .compass{animation:none}html{scroll-behavior:auto}}
/* create */
.create{padding:var(--s9) 0;background:var(--ivory)}
.create-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:start}
.create-copy{position:sticky;top:100px}.create-copy p{color:var(--text2);max-width:30em;margin-top:var(--s5)}
.bform{background:var(--raise);border:1px solid var(--line);border-radius:22px;padding:clamp(20px,3.4vw,40px);box-shadow:var(--sh);display:grid;gap:var(--s5);position:relative}
.bform:before{content:"";position:absolute;inset:7px;border:1px solid color-mix(in srgb,var(--brass) 40%,transparent);border-radius:16px;pointer-events:none}
.f-set{border:0;padding:0;margin:0;min-width:0;display:grid;gap:var(--s3)}.f-set legend{padding:0;font:600 .78rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--text2);margin-bottom:var(--s3)}
.f-row{display:grid;gap:var(--s3)}.f-3{grid-template-columns:1fr 1.3fr 1.2fr}.f-2{grid-template-columns:1fr 1fr;align-items:start}
.fld{display:grid;gap:6px;min-width:0;border:0;padding:0;margin:0}.fld>span,.fld>legend{font:600 .78rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--text2);padding:0}
.fld legend{margin-bottom:6px}
input[type=number],input[type=time],input:not([type]),input[type=text],select{width:100%;font:500 1.05rem var(--sans);padding:0 16px;height:54px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s;appearance:none;-webkit-appearance:none}
input:hover,select:hover{border-color:var(--brass)}input:focus,select:focus{outline:0;border-color:var(--cinnabar);box-shadow:0 0 0 4px rgba(167,67,44,.12)}
.sel{position:relative}.sel:after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border:solid var(--text2);border-width:0 1.6px 1.6px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none}.sel select{padding-right:40px;cursor:pointer}
.hint,.help{font:400 .8rem/1.45 var(--sans);font-style:normal;color:var(--muted);margin:0}
.seg{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--bd);border-radius:12px;background:var(--surface)}
.seg button,.seg label span{display:inline-flex;align-items:center;justify-content:center;font:500 .9rem var(--sans);padding:0 18px;height:46px;border-radius:9px;border:0;background:transparent;color:var(--text2);cursor:pointer;transition:background .15s,color .15s;min-width:48px;white-space:nowrap}
.seg button[aria-pressed=true],.seg input:checked+span{background:var(--raise);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.14);font-weight:600}
.seg button:disabled{opacity:.5;cursor:not-allowed}.seg-wide{width:100%}.seg-wide button{flex:1}
.seg label{display:block;flex:1}.seg input{position:absolute;opacity:0;pointer-events:none}.seg input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.fld-radio .seg{display:flex}.fld-radio .seg label span{width:100%}
.adv{border-top:1px solid var(--line);padding-top:var(--s4)}.adv summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font:600 .92rem var(--sans);color:var(--text2);padding:6px 0}
.adv summary::-webkit-details-marker{display:none}.adv summary svg{transition:transform .2s}.adv[open] summary svg{transform:rotate(180deg)}.adv summary:hover{color:var(--ink)}
.adv-b{display:grid;gap:var(--s4);padding-top:var(--s4)}
.chk{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:.95rem}.chk input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--cinnabar)}.chk span{display:grid;gap:2px;font-weight:500}.chk small{color:var(--muted);font-weight:400;font-size:.82rem}
.privacy{font-size:.8rem;color:var(--muted);text-align:center;margin:0}
.btn-spin{display:none;width:16px;height:16px;border:2px solid #fff6;border-top-color:#fff;border-radius:50%;animation:rot .7s linear infinite}.btn.busy .btn-spin{display:block}
/* notice */
.notice{display:flex;gap:12px;padding:14px 16px;border:1px solid var(--bd);border-left:3px solid var(--brass);border-radius:10px;background:var(--surface);color:var(--text2);font-size:.9rem}
.notice svg{flex:none;margin-top:2px;color:var(--gold)}.notice b{color:var(--text);font-weight:600}.notice p{margin:4px 0 0}.notice.warn{border-left-color:var(--cinnabar)}.notice.warn svg{color:var(--cinnabar)}
.fe{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s5);align-items:center}
.fe-svg{width:100%;height:auto;overflow:visible}
.fe-node{cursor:pointer;outline:0}.fe-disc{stroke-width:1.6;fill:#FFFBF3;transition:fill .2s}.fe-ring{fill:none;stroke-width:1.4;opacity:0;transition:opacity .2s}
.fe-node.el-moc{color:var(--el-moc)}.fe-node.el-hoa{color:var(--el-hoa)}.fe-node.el-tho{color:var(--el-tho)}.fe-node.el-kim{color:var(--el-kim)}.fe-node.el-thuy{color:var(--el-thuy)}
.fe-disc,.fe-ring{stroke:currentColor}.fe-han{font:600 22px var(--han);fill:currentColor}.fe-name{font:600 8.5px var(--sans);fill:var(--text);letter-spacing:.05em}.fe-center{font:600 9px var(--sans);letter-spacing:.3em;fill:var(--muted)}
.fe-node:hover .fe-disc,.fe-node:focus-visible .fe-disc{fill:#fff}.fe-node.on .fe-ring{opacity:1}.fe-node.on .fe-disc{fill:color-mix(in srgb,currentColor 12%,#FFFBF3)}
.fe-node:focus-visible .fe-ring{opacity:1;stroke-dasharray:3 3}
.fe-sinh path,.fe-khac path{transition:opacity .25s}.fe-sinh,.fe-khac{transition:opacity .25s}
.fe-legend{display:flex;gap:16px;font-size:.78rem;color:var(--muted);margin:10px 0}.ln{display:inline-block;width:22px;border-top:2px solid;vertical-align:middle;margin-right:6px}.ln.sinh{color:var(--jade)}.ln.khac{color:var(--cinnabar);border-top-style:dashed}
.fe-detail h4{display:flex;align-items:center;gap:8px;font-size:1.6rem;margin-bottom:10px}.fe-detail h4 [lang]{font-size:1.9rem}
.fe-detail h4.el-moc{color:var(--el-moc)}.fe-detail h4.el-hoa{color:var(--el-hoa)}.fe-detail h4.el-tho{color:var(--el-tho)}.fe-detail h4.el-kim{color:var(--el-kim)}.fe-detail h4.el-thuy{color:var(--el-thuy)}
.fe-detail dl{display:grid;gap:6px;margin:0;font-size:.88rem}.fe-detail dl>div{display:flex;gap:10px;justify-content:space-between;border-bottom:1px solid color-mix(in srgb,var(--bd) 70%,transparent);padding-bottom:5px}.fe-detail dt{color:var(--muted)}.fe-detail dd{margin:0;font-weight:500;text-align:right}
.fe-hint{color:var(--muted);font-style:italic;font-family:var(--serif);font-size:1.05rem}.fe-count{font-size:.86rem;color:var(--text2);margin-top:10px}
/* element chips */
.el{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600;padding:2px 10px 2px 8px;border-radius:99px;border:1px solid currentColor;line-height:1.6}
.el-h{font:500 .95em var(--han)}.el-ico{flex:none}
.el.el-moc{color:var(--el-moc)}.el.el-hoa{color:var(--el-hoa)}.el.el-tho{color:var(--el-tho)}.el.el-kim{color:var(--el-kim)}.el.el-thuy{color:var(--el-thuy)}
/* inside */
.inside{padding:var(--s9) 0;background:var(--parchment);color:var(--text);border-block:1px solid var(--line)}
.sec-h-dark h2{color:var(--ink)}.sec-h-dark .sec-sub{color:var(--text2)}
.inside-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s8);align-items:center}
.mc-center{grid-column:2/4;grid-row:2/4;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;border:1px solid var(--brass);border-radius:10px;background:var(--parchment);text-align:center;color:var(--ink)}
.mc-center i{width:42px;height:42px;border-radius:50%;border:1px solid var(--brass);position:relative}.mc-center i:after{content:"";position:absolute;inset:14px 18px;background:var(--cinnabar);transform:rotate(0);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.mc-center b{font:500 1.2rem var(--serif)}.mc-center small{color:var(--muted);font-size:.74rem}
.inside-notes{list-style:none;display:grid;gap:var(--s5)}.inside-notes li{padding-left:20px;border-left:1px solid var(--brass);color:var(--text2);font-size:.95rem}.inside-notes b{display:block;color:var(--ink);font:500 1.3rem var(--serif);margin-bottom:4px}
.dlg{border:1px solid var(--line);border-radius:20px;padding:0;max-width:min(560px,92vw);background:var(--ivory);color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.45)}.dlg::backdrop{background:rgba(70,30,20,.5);backdrop-filter:blur(3px)}
.dlg form{padding:clamp(22px,4vw,36px);display:grid;gap:var(--s3);justify-items:start}.dlg h3{font-size:2rem}.dlg ul{padding-left:20px;color:var(--text2)}.dlg li{margin-bottom:8px}.lib-body{color:var(--text2);margin:0 0 var(--s3)}
/* final */
.final{padding:var(--s8) 0;background:var(--ivory);color:var(--text);overflow:hidden}
.final-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:center;gap:var(--s7)}
.final-art{width:min(100%,380px);color:var(--ink);margin-inline:auto}
.final h2{color:var(--ink);margin-bottom:var(--s4)}.final p{color:var(--text2);margin-bottom:var(--s5)}
.site-footer{background:var(--parchment);border-top:1px solid var(--line);color:var(--text2);margin-top:var(--s8);padding:var(--s6) 0;font-size:.85rem}.foot{display:flex;justify-content:space-between;gap:var(--s5);align-items:center;flex-wrap:wrap}
.foot-brand{display:flex;gap:12px;align-items:center;color:var(--ink)}.foot-brand .brand-mark{color:var(--ink)}.foot-brand b{font:600 1.2rem var(--serif)}.foot-brand p{margin:0;font-size:.8rem;color:var(--muted)}.foot-note{margin:0;max-width:44em}body[data-view=home] .site-footer{margin-top:0}
.loading{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:rgba(250,246,239,.88);backdrop-filter:blur(6px)}.loading[hidden]{display:none}
.loading-in{text-align:center;width:150px;color:var(--ink)}.loading-in p{font:italic 1.1rem var(--serif);margin-top:12px;color:var(--text2)}
/* ---------- results ---------- */

.res-sub{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:var(--s4);color:var(--text2);font-size:.95rem}.res-sub b{color:var(--ink)}
.res-hl{display:flex;flex-wrap:wrap;gap:10px;margin:var(--s4) 0}
.res-nav{position:sticky;top:68px;z-index:30;background:color-mix(in srgb,var(--ivory) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.res-nav .wrap{display:flex;gap:6px;overflow-x:auto}

.r-sec{padding:var(--s8) 0;scroll-margin-top:120px}.r-bazi{background:var(--ivory)}.r-tuvi{background:var(--bg);color:var(--text)}.r-report{background:var(--ivory)}
.r-sec .sec-h{margin-bottom:var(--s6)}.r-sec h2{font-size:clamp(2.2rem,4vw,3.2rem)}
.card-soft{background:var(--raise);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);box-shadow:var(--sh)}
.badge{display:inline-block;font:600 .7rem var(--sans);padding:3px 10px;border-radius:99px;background:var(--surface);border:1px solid var(--bd);color:var(--text2)}.badge.draft{border-color:var(--cinnabar);color:var(--accent)}.badge.ok{border-color:var(--jade);color:var(--pos)}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{display:inline-flex;align-items:baseline;gap:6px;font-size:.84rem;padding:5px 12px;border:1px solid var(--bd);border-radius:99px;background:var(--surface);color:var(--text2)}.chip b{font:600 1rem var(--serif);color:var(--gold)}
/* bazi */

.dm .gz-vn{font-weight:600}
.el-moc{--c:var(--el-moc)}.el-hoa{--c:var(--el-hoa)}.el-tho{--c:var(--el-tho)}.el-kim{--c:var(--el-kim)}.el-thuy{--c:var(--el-thuy)}

.tl{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x proximity}
.tl-i{flex:0 0 auto;min-width:128px;display:grid;gap:2px;text-align:left;padding:12px 14px;border:1px solid var(--bd);border-radius:12px;background:var(--raise);font:inherit;color:inherit;scroll-snap-align:start;position:relative}
.tl-i:before{content:"";position:absolute;left:14px;right:14px;top:0;height:3px;background:var(--c,var(--brass));border-radius:0 0 3px 3px}
.tl-age{font:600 .7rem var(--sans);letter-spacing:.06em;color:var(--muted)}.tl-han{font:500 1.35rem var(--serif);color:var(--c,var(--text))}.tl-s{font-size:.8rem;color:var(--text2)}
.tl-i.now{border-color:var(--cinnabar);box-shadow:0 0 0 3px rgba(167,67,44,.12)}.tl-now{margin-top:4px;font:600 .6rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--cinnabar)}
.accs{display:grid;gap:10px;margin-top:var(--s7)}
.acc{border:1px solid var(--bd);border-radius:var(--r);background:var(--raise);transition:border-color .2s}.acc[open]{border-color:var(--brass)}
.acc>summary{list-style:none;display:flex;align-items:center;gap:var(--s3);padding:16px 20px;cursor:pointer;min-height:56px}.acc>summary::-webkit-details-marker{display:none}
.acc-t{font:500 1.2rem var(--serif);color:var(--text)}.acc-s{font-size:.84rem;color:var(--muted);margin-left:auto;text-align:right}.acc-c{flex:none;color:var(--muted);transition:transform .2s;margin-left:var(--s2)}.acc[open]>summary .acc-c{transform:rotate(180deg)}
.acc>summary:hover .acc-t{color:var(--accent)}.acc-b{padding:4px 20px 20px;color:var(--text2);font-size:.95rem}
.acc .acc{background:var(--surface)}
.tg-rows{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.tg-rows>div{display:grid;padding:12px;border:1px solid var(--bd);border-radius:10px}.tg-rows .k{font:600 .66rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.tg-rows b{font:500 1.25rem var(--serif);color:var(--text)}
.tc-rows{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.tc-rows h5{font-size:1rem;margin-bottom:8px;color:var(--text)}.tc{margin-bottom:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rel-g{margin-bottom:var(--s4)}.rel-g h5{font-size:1.05rem;color:var(--text);margin-bottom:6px}.rel{list-style:none;display:grid;gap:6px}.rel li{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}.rel-p{font:600 .74rem var(--sans);padding:2px 10px;border-radius:99px;background:var(--surface);border:1px solid var(--bd)}
/* year explorer */
.yx-bar{display:grid;grid-template-columns:auto auto 1fr;gap:var(--s4);align-items:center;margin-bottom:var(--s4)}.yx-bar label{font:600 .72rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.yx-y{font:500 2rem var(--serif);color:var(--gold);min-width:3.2ch}
input[type=range]{height:28px;padding:0;border:0;background:transparent;accent-color:var(--cinnabar);appearance:auto;-webkit-appearance:auto}input[type=range]:focus{box-shadow:none}
.yx-out{transition:opacity .2s}.yx-out.loading{opacity:.5}.yx-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}.yx-grid h4{font-size:1.3rem;color:var(--text);margin-bottom:8px}.yx-grid h5{font:600 .7rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
.yx-big{display:flex;align-items:baseline;gap:10px;margin:0 0 4px;flex-wrap:wrap}.yx-big span{font-size:.78rem;color:var(--muted);min-width:80px}.yx-big b{font:500 1.5rem var(--serif);color:var(--text)}.yx-big em{font-style:normal;font-size:.84rem;color:var(--accent)}
.yx-list{margin:0;padding-left:18px;font-size:.9rem}.yx-list li{margin-bottom:3px}
/* tu vi */

/* drawer */

/* why panel */
.why h5{font:600 .68rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}.why-h{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.why code{font-size:.74rem;color:var(--muted)}
.chain{list-style:none;display:grid;gap:6px;position:relative;padding-left:16px}.chain:before{content:"";position:absolute;left:3px;top:6px;bottom:6px;border-left:1.5px dashed var(--brass)}
.rn{position:relative;display:flex;gap:10px;align-items:baseline;padding:8px 12px;border:1px solid var(--bd);border-radius:9px;background:var(--surface);font-size:.86rem}.rn:before{content:"";position:absolute;left:-17px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--bg);border:1.5px solid var(--brass)}
.rn-k{flex:none;font:600 .62rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-width:64px}.rn-finding{border-color:var(--accent)}.rn-t{color:var(--text);word-break:break-word}
.src{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;padding:3px 10px;border:1px solid var(--bd);border-radius:8px;color:var(--text2)}.src em{font-style:normal;font-size:.7rem;color:var(--accent)}
/* report */
.rp-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s8);align-items:start}
.rp-toc{position:sticky;top:132px}.rp-toc ol{list-style:none;display:grid;gap:2px;border-left:1px solid var(--line)}.rp-toc a{display:flex;gap:10px;padding:7px 14px;margin-left:-1px;border-left:2px solid transparent;font-size:.88rem;color:var(--muted);text-decoration:none}.rp-toc a span{font:500 .85rem var(--serif);color:var(--gold)}.rp-toc a:hover{color:var(--ink)}.rp-toc a.on{color:var(--ink);border-left-color:var(--cinnabar);font-weight:600}
.rp-body{max-width:760px}.chapter{padding:var(--s7) 0;border-top:1px solid var(--line);scroll-margin-top:130px}.chapter:first-child{border-top:0;padding-top:0}
.chapter header{display:flex;align-items:baseline;gap:16px;margin-bottom:var(--s3)}.ch-no{font:500 1.1rem var(--serif);color:var(--gold)}.chapter h3{font-size:clamp(1.8rem,3.2vw,2.5rem)}
.lead{font:400 1.25rem/1.55 var(--serif);color:var(--text);margin:0 0 var(--s5)}
.ch-calc,.ch-trad{margin-top:var(--s5);padding-left:20px;border-left:2px solid var(--line)}.ch-trad{border-left-color:var(--brass)}.ch-calc .eyebrow,.ch-trad .eyebrow{margin-bottom:10px;color:var(--muted)}.ch-trad .eyebrow{color:var(--gold)}
.ch-calc p,.ch-trad p{color:var(--text2)}.ch-calc h5{font:600 .72rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:var(--s4) 0 8px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:var(--s4)}.facts>div{background:var(--raise);padding:12px 14px;display:grid}.facts .k{font:600 .64rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.facts b{font:500 1.2rem var(--serif)}
.plist{list-style:none;display:grid;gap:12px;margin:0 0 var(--s4)}.plist li{display:grid;gap:2px;font-size:.95rem;color:var(--text2)}.li-h{display:flex;gap:10px;align-items:center}.plain{padding-left:18px;color:var(--text2)}
.ref{display:inline-flex;align-items:center;gap:4px;font:600 .9rem var(--serif);color:var(--accent);background:none;border:0;border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent);padding:0;cursor:pointer}.ref:hover{border-bottom-color:currentColor}
.finding-card{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--raise);margin-bottom:12px}.finding-card h5{font-size:1.2rem;margin-bottom:4px}
.prose-pre{white-space:pre-wrap;font:.9rem/1.7 var(--sans);margin:0}.trace-pre,pre.trace{font:.74rem/1.5 ui-monospace,Menlo,monospace;max-height:420px;overflow:auto;margin:0;white-space:pre-wrap;color:var(--muted)}
.ig-svg{width:100%;height:auto;margin:10px 0}.ig rect{fill:var(--raise);stroke:var(--bd)}.ig.finding rect{stroke:var(--cinnabar)}.ig.rule rect{stroke:var(--brass)}.ig-k{font:600 8.5px var(--sans);letter-spacing:.1em;fill:var(--muted)}.ig-t{font:500 12.5px var(--serif);fill:var(--text)}.ig-a{stroke:var(--brass);stroke-width:1.5;fill:none}#ig-m path{fill:var(--brass)}
/* ---------- responsive ---------- */

@media(max-width:980px){
  .hero-in,.create-in,.final-in,.inside-grid{grid-template-columns:minmax(0,1fr)}
  .create-copy{position:static}.hero-art{order:2;max-width:300px;margin:0 auto}.hero-in{padding-top:24px}
  .rp-layout{grid-template-columns:minmax(0,1fr);gap:var(--s5)}.rp-toc{position:sticky;top:116px;z-index:20;background:var(--ivory);margin:0 calc(-1*clamp(16px,4vw,40px));padding:0 clamp(16px,4vw,40px)}.rp-toc ol{display:flex;overflow-x:auto;border-left:0;border-bottom:1px solid var(--line)}.rp-toc a{white-space:nowrap;border-left:0;border-bottom:2px solid transparent;margin:0;padding:12px 12px}.rp-toc a.on{border-bottom-color:var(--cinnabar)}
  .final-art{width:220px}.nav{display:none}
}
@media(max-width:820px){
  
  [data-view=ov] .tv-scroll,[data-view=ov] .legend{display:none}[data-view=full] .tv-ov{display:none}
  
  
  .tg-rows,.tc-rows{grid-template-columns:1fr 1fr}.yx-grid{grid-template-columns:minmax(0,1fr)}.facts{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  
  .hero-facts{grid-template-columns:minmax(0,1fr);gap:12px}.hero-cta .btn{width:100%}.fe{grid-template-columns:minmax(0,1fr)}.f-3{grid-template-columns:1fr 1fr}.f-3 .fld:last-child{grid-column:1/-1}.f-2{grid-template-columns:minmax(0,1fr)}
  .hdr{height:60px}.res-nav{top:60px}
  .acc>summary{flex-wrap:wrap;padding:14px 16px}.acc-s{margin-left:0;text-align:left;order:3;width:100%}.acc-c{margin-left:auto}.yx-bar{grid-template-columns:auto 1fr}.yx-bar input{grid-column:1/-1}
  .brand-t small{display:none}
}
@media print{.site-header,.res-nav{display:none}}
/* dignity + finding cards */

.finding-card{margin:12px 0}.finding-card .eyebrow{margin-bottom:6px;color:var(--pos)}.finding-card.draft .eyebrow{color:var(--accent)}.f-claim{font:400 1.08rem/1.5 var(--serif);color:var(--text);margin:0 0 10px}

.ch-trad .finding-card{background:var(--raise);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.bz-read{margin-top:var(--s7)}.bz-read h3{font-size:1.8rem;margin-bottom:var(--s4)}.bz-read-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:12px}.bz-read .finding-card{margin:0;background:var(--raise);border:1px solid var(--line);border-radius:12px;padding:14px 16px}

/* ---- structure analysis blocks (layered prose) ---- */
.ch-an{margin-top:var(--s5);padding-left:20px;border-left:2px solid var(--gold)}.ch-an .eyebrow{margin-bottom:12px;color:var(--gold)}
.an-p{display:block;margin:0 0 16px;font:400 1.02rem/1.7 var(--serif);color:var(--text)}
.an-tag{display:inline-block;vertical-align:baseline;margin-right:8px;padding:1px 9px;border:1px solid var(--brass);border-radius:999px;font:600 .66rem/1.6 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);background:var(--raise)}
.an-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.an-b,.an-src{display:inline-block;padding:1px 8px;border-radius:6px;font:500 .7rem/1.6 var(--sans);color:var(--muted);border:1px solid var(--line)}
.an-sach{color:var(--pos);border-color:color-mix(in srgb,var(--pos) 45%,transparent)}.an-he_thong{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
/* monthly pillars */
.yx-months{margin-top:var(--s4)}.yx-mo{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.yx-mo li{display:grid;gap:1px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--raise)}.mo-j{font:600 .62rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.yx-mo b{font:500 1.05rem var(--serif)}.yx-mo em{font-style:normal;font-size:.8rem;color:var(--accent)}.mo-n{font-size:.72rem;color:var(--text2)}
/* mobile fixes */
.finding-card .eyebrow{line-height:1.7}.finding-card .eyebrow .ref{font-size:.82rem;letter-spacing:0;text-transform:none;vertical-align:baseline;line-height:1.3}
.finding-card .why h5,.why h5{font:600 .68rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px;line-height:1.5}
.rn-t,.chain code,.why code{overflow-wrap:anywhere;word-break:normal}
.chapter{scroll-margin-top:190px}
@media(max-width:980px){
  .rp-toc ol{scrollbar-width:none}.rp-toc ol::-webkit-scrollbar{display:none}
  .rp-toc{box-shadow:0 8px 12px -10px rgba(0,0,0,.25)}
  .ch-an,.ch-calc,.ch-trad{padding-left:14px}.an-p{font-size:1rem}
  .rn{flex-wrap:wrap;gap:4px 10px}.rn-k{min-width:0}
}
@media(max-width:600px){
  .chapter header{gap:10px}.chapter h3{font-size:1.7rem}
  .finding-card .eyebrow{font-size:.62rem;letter-spacing:.1em}
  .yx-mo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why-h{gap:4px}.why-h .badge{font-size:.66rem}
  .plist li{grid-template-columns:1fr}
}

/* insights */
.bz-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:var(--s4);margin-bottom:var(--s5)}.bz-facts h4{font-size:1.3rem;margin-bottom:var(--s3)}.bz-facts .eyebrow{margin-bottom:6px;color:var(--muted)}
.eb{display:grid;gap:10px}.eb-row{display:grid;grid-template-columns:minmax(96px,150px) 1fr 52px;gap:12px;align-items:center;font-size:.88rem}
.eb-n{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-weight:600;color:var(--c,var(--text))}.eb-n small{display:block;flex-basis:100%;font:400 .72rem var(--sans);color:var(--muted);margin-top:-2px}.eb-n [lang]{font-size:1.05rem}
.eb-bar{display:flex;height:12px;background:color-mix(in srgb,var(--bd) 45%,transparent);border-radius:99px;overflow:hidden}
.eb-v{background:var(--c,var(--brass));display:block;height:100%}.eb-v.gd-v{background:var(--brass)}.eb-h{display:block;height:100%;background:repeating-linear-gradient(45deg,var(--c,var(--brass)) 0 3px,transparent 3px 6px);opacity:.6}
.eb-c{font-size:.82rem;color:var(--muted);text-align:right;white-space:nowrap}.eb-c b{color:var(--text);font:600 1rem var(--serif)}
.eb-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.76rem;color:var(--muted)}.eb-legend span{display:inline-flex;align-items:center;gap:6px}.eb-legend .sw{width:16px;height:8px;border-radius:4px;display:inline-block}.eb-legend .eb-v.sw{background:var(--ink)}.eb-legend .eb-h.sw{background:repeating-linear-gradient(45deg,var(--ink) 0 3px,transparent 3px 6px)}
.tp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}.tp-p{display:grid!important;gap:1px;text-align:left;padding:10px 12px;border:1px solid var(--line)!important;border-radius:10px;background:var(--raise)!important;font:inherit!important;color:var(--text)!important;cursor:pointer;border-bottom:1px solid var(--line)!important}.tp-p:hover{border-color:var(--brass)!important}.tp-p .k{font:600 .6rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.tp-p b{font:500 1.1rem var(--serif);color:var(--accent)}.tp-p .muted{font-size:.78rem}.tp-l{margin:0}
.hl-sum{margin:0 0 10px}.hl-list{list-style:none;display:grid;gap:8px;margin-bottom:var(--s4)}.hl-list button{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:baseline;width:100%;text-align:left;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--raise);font:inherit;color:var(--text);cursor:pointer}.hl-list button:hover{border-color:var(--brass)}.hl-list .k{font:600 .66rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
@media(max-width:600px){.tp-grid{grid-template-columns:1fr 1fr}.hl-list button{grid-template-columns:1fr}.eb-row{grid-template-columns:1fr 52px}.eb-row .eb-bar{grid-column:1/-1;order:3}}

/* split pages */
.yx-grid.one{grid-template-columns:minmax(0,1fr)}
.tbl-wrap{overflow-x:auto}.tbl{width:100%;border-collapse:collapse;font-size:.9rem}.tbl th,.tbl td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}.tbl thead th{font:600 .68rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.tbl tbody th{font:500 1rem var(--serif);color:var(--text)}.tbl small{color:var(--muted);font:400 .75rem var(--sans)}
.res-tabs{display:flex;gap:6px}.res-tabs button{font:500 .95rem var(--sans);padding:14px 22px;border:0;border-bottom:2px solid transparent;background:none;color:var(--text2);cursor:pointer}.res-tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--cinnabar);font-weight:600}
.pane{display:none}#chart-view[data-tab=bazi] #pane-bazi,#chart-view[data-tab=tuvi] #pane-tuvi{display:block}
.p12 .acc{margin-bottom:8px}.p12-s{display:grid;gap:6px;font-size:.92rem}.p12-s .k{font:600 .64rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:8px}
.sys-switch{margin:var(--s5) 0 0;padding:14px 18px;border:1px dashed var(--brass);border-radius:12px;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;font-size:.92rem;color:var(--text2)}

/* unknown hour + calendar */
.hour-mode .res-nav{display:none}#chart-view[data-tab=hour] #pane-hour{display:block}
.hr-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--s4);margin-bottom:var(--s5)}.hr-l{margin:0;display:grid;gap:6px}.hr-t td,.hr-t th{white-space:nowrap}.hr-t small{display:block;margin-top:2px}
.fld .lbl{font:600 .78rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--text2)}.sel-sm select{height:44px;font-size:.92rem}.chk-sm{margin-top:6px;font-size:.88rem}
#time-box.off input,#time-box.off .sel{opacity:.45}
.sc{margin:0 0 var(--s5);padding:16px 18px;border:1px solid var(--bd);border-radius:14px;background:var(--surface);color:var(--text2);font-size:.9rem}.sc summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;list-style:none;color:var(--text)}.sc summary::-webkit-details-marker{display:none}
.sc b{color:var(--text)}.sc .sc-n{font:500 1.5rem var(--serif);color:var(--gold)}.sc ul{margin:10px 0 0;padding-left:18px;display:grid;gap:4px}.sc h5{font:600 .68rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:14px 0 4px}

.chu{display:inline-flex;gap:6px;align-items:baseline;font-size:.8rem;color:var(--text2)}.cc-list{display:grid;gap:10px;margin:0 0 var(--s4);padding:0;list-style:none}.cc-list li{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--raise)}.cc-list b{font:500 1.15rem var(--serif);color:var(--accent)}.cc-list .muted{display:block;font-size:.86rem;margin-top:2px}

/* ===== Beginner experience: depth modes, glossary, summary, learning, home ===== */
body[data-depth=easy] .pro-only,body[data-depth=pro] .easy-only{display:none!important}

.gl{cursor:pointer;text-decoration:underline dotted;text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent);text-underline-offset:3px;text-decoration-thickness:1.5px;border-radius:3px}
.gl:hover{text-decoration-style:solid;color:var(--accent)}
.gl-s{cursor:pointer}.gl-s:hover{text-decoration:underline dotted;text-underline-offset:3px}

.hl-chip{font:500 1.1rem var(--serif);padding:6px 16px;border:1px solid var(--brass);border-radius:99px;background:var(--ivory);color:var(--ink);cursor:pointer;text-decoration:none}.hl-chip:hover{background:var(--surface)}.hl-chip small{font:600 .66rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-left:6px}

.gl-dlg{width:min(520px,92vw);max-height:86vh;overflow:auto}
.gl-in{padding:clamp(22px,4vw,32px);display:grid;gap:var(--s3);justify-items:start}
.gl-in h3{font-size:2rem}.gl-han{font:400 1.3rem var(--han);color:var(--gold);margin-left:6px}
.gl-plain{font-size:1.05rem;line-height:1.6;color:var(--text);margin:0}.gl-ex{margin:0;padding:10px 14px;border-left:3px solid var(--brass);background:var(--surface);border-radius:0 10px 10px 0;color:var(--text2);font-size:.95rem}
.gl-facts{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0}.gl-facts div{display:grid}.gl-facts dt{font:600 .62rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.gl-facts dd{margin:0;font-size:.95rem}
.gl-here{width:100%;padding:12px 14px;border:1px solid var(--jade);border-radius:12px;background:color-mix(in srgb,var(--jade) 8%,var(--ivory))}.gl-here .eyebrow{color:var(--jade);margin-bottom:6px}.gl-here p{margin:0;font-size:.95rem}
.gl-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.gl-src{margin:0}

.depth{margin-left:auto;display:flex;align-items:center;gap:4px;padding:6px 0}.depth-l{font:600 .64rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.depth button{font:500 .85rem var(--sans);padding:8px 14px;border:1px solid var(--line);border-radius:99px;background:var(--ivory);color:var(--text2);cursor:pointer;min-height:36px}
.depth button[aria-pressed=true]{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.res-nav .wrap.res-tabs{flex-wrap:wrap;overflow:visible}
.res-tabs>button[role=tab]{padding:14px 20px}

.bs{margin:var(--s7) 0 var(--s6);padding:clamp(20px,3vw,36px);border:1px solid var(--brass);border-radius:20px;background:var(--raise);box-shadow:var(--sh)}
.bs h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}.bs h3{font:600 .72rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:var(--s6) 0 var(--s3)}
.bs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:var(--s3);margin-top:var(--s5)}
.bs-c{padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--ivory)}.bs-c .k{display:block;font:600 .62rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}.bs-c>b{display:block;font:500 1.45rem/1.15 var(--serif);margin-bottom:8px}.bs-c p{margin:0;font-size:.92rem;color:var(--text2)}
.bs-hoa{margin:var(--s4) 0 0;font-size:.95rem}.bs-lim{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--text2);font-size:.95rem}
.bs-next{display:flex;flex-wrap:wrap;gap:10px}
.ez-list{display:grid;gap:10px}
.ez-card{position:relative;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--ivory);margin:10px 0}.ez-t{font:400 1.12rem/1.45 var(--serif);margin:0 0 6px}.ez-b{margin:0 0 6px;font-size:.84rem;color:var(--muted)}.ez-tag{display:inline-block;font:600 .6rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--pos)}
.ez-care{margin:14px 0;border:1px solid var(--line);border-radius:12px;padding:6px 16px;background:var(--surface)}.ez-care summary{cursor:pointer;padding:10px 0;font-weight:600;font-size:.92rem}
.ez-empty{margin:12px 0;padding:14px 16px;border:1px dashed var(--brass);border-radius:12px;background:var(--surface)}.ez-empty p{margin:0 0 8px}.ez-empty .eyebrow{margin-bottom:6px;color:var(--gold)}.ez-draft{margin-top:10px}
.ch-what{margin:0 0 var(--s3);padding:10px 14px;border-radius:10px;background:color-mix(in srgb,var(--jade) 9%,var(--ivory));font-size:.94rem;color:var(--text2)}

/* home additions */
.form-sample-note{margin-top:var(--s4);padding:10px 14px;border-left:3px solid var(--cinnabar);background:var(--surface);border-radius:0 10px 10px 0;font-size:.9rem;color:var(--text2)}


@media(max-width:700px){
  .gl-dlg{margin:auto 0 0;width:100%;max-width:100%;border-radius:20px 20px 0 0}
  .depth{margin-left:auto;padding:0}.depth-l{display:none}.depth button{padding:6px 10px;font-size:.78rem;min-height:34px}
  .res-tabs>button[role=tab]{padding:12px 10px;font-size:.9rem}
  .bs{padding:18px}
}
/* chapter nav on small screens: fade hints that the strip scrolls */
@media(max-width:980px){
  .rp-toc{position:sticky}.rp-toc:after{content:"";position:absolute;right:0;top:0;bottom:1px;width:36px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--ivory))}
  .rp-toc ol{scroll-snap-type:x proximity;padding-right:36px}.rp-toc li{scroll-snap-align:center}
}

/* experimental formations (hidden mode) */
.exp-badge{font:600 .68rem var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:99px;border:1px dashed var(--cinnabar);background:transparent;color:var(--cinnabar);cursor:pointer}
.exp{margin:0 0 var(--s5);padding:16px 18px;border:1px dashed var(--cinnabar);border-radius:14px;background:color-mix(in srgb,var(--cinnabar) 4%,var(--raise))}.exp-tag{font:600 .7rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--cinnabar);margin:0 0 6px}
.exp-card{padding:12px 0;border-top:1px solid var(--line)}.exp-card h5{font-size:1.2rem;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}.exp-card p{margin:6px 0 0}.exp-pill{font:600 .68rem var(--sans);padding:2px 10px;border-radius:99px;border:1px solid currentColor;color:var(--muted)}

/* saved charts + this-year cards */
.saved{padding-top:var(--s6)}.saved h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.sv-list{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--s3)}
.sv-list li{display:flex;border:1px solid var(--line);border-radius:14px;background:var(--raise);overflow:hidden}
.sv-open{flex:1;text-align:left;padding:12px 16px;border:0;background:none;cursor:pointer;font:inherit;color:var(--ink);display:grid;gap:2px}.sv-open:hover{background:var(--surface)}
.sv-open b{font:500 1.2rem var(--serif)}.sv-open small{color:var(--muted)}.sv-rel{font:600 .62rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sv-del{border:0;border-left:1px solid var(--line);background:none;padding:0 14px;cursor:pointer;color:var(--muted);font:inherit;font-size:.85rem}.sv-del:hover{color:var(--ink);background:var(--surface)}
.res-act{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}.sv-host{display:flex;flex-direction:column;gap:10px}
.sv-form{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--raise);max-width:360px}.sv-form[hidden]{display:none}
.sv-form label{display:grid;gap:4px;font-size:.85rem;color:var(--text2)}.sv-form input,.sv-form select{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--ivory);color:var(--ink)}
.hour-mode .sv-host{display:none}

.bs-year{margin-top:var(--s5);padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--brass) 7%,var(--ivory))}.bs-year:empty{display:none}
.bs-year h3{margin:0 0 var(--s3)}.by-bar{display:flex;align-items:center;gap:12px;margin-bottom:var(--s3);font:500 1.2rem var(--serif)}.by-bar .btn{min-width:40px;padding:6px 12px}
.by-body p{margin:0 0 8px}.by-h{font:600 .72rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:12px!important}.by-hoa{margin:0 0 8px;padding-left:20px;display:grid;gap:4px;font-size:.95rem}

/* experimental cách cục: chain + clickable conditions */
.cx-chain{list-style:none;margin:10px 0;padding:0;display:grid;gap:6px;counter-reset:cx}.cx-chain li{display:grid;grid-template-columns:104px 1fr;gap:10px;font-size:.88rem;color:var(--text2)}.cx-chain b{font:600 .66rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.cx-conds{display:grid;gap:12px;margin-top:12px}.cx-g h6{margin:0 0 6px;font:600 .66rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.cx-g ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cx-cond{display:grid;gap:2px;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--raise);color:var(--text);font:inherit;cursor:pointer;transition:border-color .15s,box-shadow .15s}.cx-cond:hover,.cx-cond:focus-visible{border-color:var(--cinnabar);box-shadow:0 0 0 3px rgba(167,67,44,.1)}
.cx-l{font-weight:600;font-size:.92rem}.cx-b{font-size:.84rem;color:var(--text2)}.cx-off{padding:6px 12px;opacity:.55;display:grid}.cx-off .cx-l{font-weight:400}

@media(max-width:600px){.cx-chain li{grid-template-columns:1fr;gap:0}}

.cx-src{display:inline-block;margin-top:4px;font:500 .72rem var(--sans);padding:2px 9px;border-radius:99px;border:1px solid var(--bd);color:var(--text2);background:var(--surface)}.cx-src b{font-weight:600}
.cx-src-khop{border-color:var(--pos);color:var(--pos)}.cx-src-long_hon,.cx-src-chat_hon,.cx-src-khac{border-color:var(--cinnabar);color:var(--cinnabar)}.cx-src-lien_quan{border-color:var(--gold);color:var(--gold)}.cx-src-khong_co_nguon{opacity:.8}
.cx-note{display:block;margin-top:3px;font-size:.78rem;color:var(--muted);line-height:1.4}.cx-dead{color:var(--cinnabar)}.cx-sum{margin:6px 0 0;color:var(--text2)}

/* ---- unified two-chart comparison (js/compare.js + js/compare_ui.js) ---- */
.cpx-host{margin-top:var(--s4)}
.cpx-main{width:min(980px,96vw);max-width:min(980px,96vw);height:min(92vh,980px);max-height:92vh;padding:0;overflow:hidden}.cpx-main[open]{display:flex;flex-direction:column}
.cpx-head{flex:none;padding:clamp(14px,2.4vw,22px) clamp(16px,3vw,28px) 12px;border-bottom:1px solid var(--line);background:var(--ivory)}
.cpx-ht{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.cpx-ht h3{margin:0;font:500 clamp(1.4rem,3vw,1.9rem) var(--serif)}
.cpx-x{border:1px solid var(--line);background:var(--raise);width:40px;height:40px;border-radius:50%;font-size:1.4rem;line-height:1;cursor:pointer;color:var(--ink)}.cpx-x:hover{background:var(--surface)}
.cpx-pick{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end;margin-top:10px}.cpx-pick label{display:grid;gap:4px;font:600 .68rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-width:0}
.cpx-pick select{font:400 .95rem var(--sans);padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--raise);color:var(--ink);min-width:0;width:100%;text-overflow:ellipsis}.cpx-swap{height:42px;padding:0 14px}
.cpx-body{flex:1;overflow:auto;padding:clamp(14px,3vw,28px);overscroll-behavior:contain}
.cpx-pr{margin:0 0 10px}.cpx-nav{position:sticky;top:calc(-1 * clamp(14px,3vw,28px));z-index:3;display:flex;gap:8px;overflow-x:auto;padding:8px 0;margin:0 0 4px;background:var(--ivory);scrollbar-width:thin}
.cpx-nav button{flex:none;border:1px solid var(--line);background:var(--raise);color:var(--ink);border-radius:99px;padding:6px 14px;font:500 .85rem var(--sans);cursor:pointer}.cpx-nav button:hover{background:var(--surface);border-color:var(--brass)}
.cpx-sec{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);scroll-margin-top:56px}.cpx-sec h4{margin:0 0 4px;font:500 1.35rem var(--serif)}.cpx-sec h5{margin:var(--s4) 0 8px;font:600 .72rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cpx-fl{display:grid;gap:8px;margin-top:10px}
.cpx-f{display:flex;gap:10px;align-items:baseline;width:100%;text-align:left;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--ivory);color:var(--ink);font:inherit;font-size:.92rem;line-height:1.5;cursor:pointer}.cpx-f:hover{background:var(--surface);border-color:var(--brass)}
.cpx-f.x{border-style:dashed}.cpx-f.ins{background:transparent}.cpx-line{margin:10px 0}
.cpx-ev{flex:none;display:inline-block;padding:1px 8px;border-radius:99px;font:600 .68rem var(--sans);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;border:1px solid var(--line);color:var(--muted)}
.cpx-ev-src{border-color:#5a7d5a;color:#3f6b3f}.cpx-ev-calc{border-color:var(--line);color:var(--text2)}.cpx-ev-hyp{border-style:dashed;border-color:var(--brass);color:#7a5f20}
.cpx-tw{overflow-x:auto}.cpx-t{width:100%;border-collapse:collapse;font-size:.92rem}.cpx-t th,.cpx-t td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}.cpx-t thead th{font:600 .68rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.cpx-t small{color:var(--muted)}
.cpx-ov th[scope=row]{font-weight:500;min-width:150px}.cpx-ov td{min-width:150px}
.cpx-q{border:1px solid var(--line);background:var(--raise);width:28px;height:28px;border-radius:50%;font:600 .75rem var(--sans);color:var(--muted);cursor:pointer;padding:0;vertical-align:middle}.cpx-q:hover{border-color:var(--brass);color:var(--ink)}
.cpx-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--s3);margin-top:var(--s3)}
.cpx-c{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--ivory)}.cpx-c .k{display:block;font:600 .62rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.cpx-c>b{display:block;font:500 1.5rem var(--serif);margin:4px 0}
.cpx-sl{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:6px;font-size:.92rem;color:var(--text2)}.cpx-pl{margin:0;color:var(--muted);font-size:.85rem}
.cpx-list{margin:var(--s3) 0;padding-left:20px;display:grid;gap:8px;color:var(--text2)}.cpx-src,.cpx-leg{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--text2);font-size:.92rem}.cpx-leg{list-style:none;padding:0}
.cpx-dlg{width:min(720px,94vw);max-width:min(720px,94vw);max-height:90vh;overflow:auto}.cpx-dlg-b h4{margin:var(--s4) 0 6px;font:600 .72rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.cpx-dlg-b h4 small{text-transform:none;letter-spacing:0}.cpx-warn{padding:10px 12px;border:1px dashed var(--brass);border-radius:10px;font-size:.9rem}
@media(max-width:700px){.cpx-main{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:0}.cpx-head{padding:10px 14px 8px}.cpx-head .eyebrow{display:none}.cpx-pick{grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}.cpx-pick select{padding:8px;font-size:.88rem}.cpx-swap{order:3;grid-column:1/-1;height:30px;padding:0}.cpx-dlg{width:100%;max-width:100%;margin:auto 0 0;border-radius:20px 20px 0 0}.cpx-f{flex-direction:column;gap:4px}.cpx-ov thead{display:none}.cpx-ov tr{display:block;padding:8px 0;border-bottom:1px solid var(--line)}.cpx-ov th,.cpx-ov td{display:block;border:0;min-width:0;padding:4px 10px}.cpx-ov td::before{content:attr(data-l);display:block;font:600 .64rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}}
.cpx-near{display:inline-block;padding:0 8px;border-radius:99px;border:1px dashed var(--brass);color:#7a5f20;font-size:.75rem;white-space:nowrap}

/* ===== Trưởng thành (Personal Growth layer) ===== */
#chart-view[data-tab=growth] #pane-growth{display:block}.res-tabs button[hidden]{display:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.r-growth{--gr-sym:var(--gold);--gr-psy:var(--blue);--gr-life:var(--pos)}
.gr-legend{list-style:none;margin:var(--s4) 0;padding:0;display:grid;gap:6px;font-size:.86rem;color:var(--text2)}
.gr-legend li{padding-left:14px;border-left:3px solid}.gr-lg-bieu_tuong{border-color:var(--gr-sym)!important}.gr-lg-tam_ly{border-color:var(--gr-psy)!important}.gr-lg-doi_song{border-color:var(--gr-life)!important}
.gr-nav{position:sticky;top:122px;z-index:20;display:flex;gap:6px;flex-wrap:wrap;padding:10px 0;margin:0 0 var(--s5);background:color-mix(in srgb,var(--ivory) 94%,transparent);border-bottom:1px solid var(--line)}
.gr-nav a{font:500 .85rem var(--sans);color:var(--text2);text-decoration:none;padding:7px 12px;border:1px solid var(--bd);border-radius:99px;background:var(--raise)}.gr-nav a:hover{border-color:var(--brass);color:var(--text)}
.gr-sec{padding:var(--s6) 0 var(--s4);border-top:1px solid var(--line);scroll-margin-top:190px}.gr-sec>h3{font-size:clamp(1.6rem,3vw,2.1rem)}.gr-sec>.sec-sub{margin-bottom:var(--s5)}
.gr-stage{margin:0 0 var(--s5);padding:18px 20px;border:1px dashed var(--brass);border-radius:var(--r);background:var(--surface);color:var(--text2)}.gr-stage p{margin:4px 0}.gr-stage ul{margin:8px 0 0;padding-left:18px}
.gr-card{background:var(--raise);border:1px solid var(--bd);border-radius:var(--r);padding:clamp(16px,2.6vw,26px);margin:0 0 var(--s4);box-shadow:var(--sh)}
.gr-card h4{font-size:1.35rem;margin:0 0 10px;color:var(--text)}.gr-card .eyebrow{margin-bottom:8px}
.gr-skill{margin:0 0 12px;color:var(--text2);font-size:.95rem}
.gr-sh{display:grid;gap:8px;margin:0 0 14px;padding:12px 14px;border-radius:10px;background:var(--surface);font-size:.92rem}.gr-sh>div{display:grid;grid-template-columns:minmax(120px,170px) 1fr;gap:10px}
.gr-sh dt{font:600 .7rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:3px}.gr-sh dd{margin:0;color:var(--text)}.gr-sh ul{margin:0;padding-left:16px}
.gr-basis{margin:0 0 12px;font-size:.88rem;color:var(--text2)}.gr-basis summary{cursor:pointer;font-weight:600;color:var(--text2)}.gr-basis ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.gr-sys{display:inline-block;font:600 .64rem var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;margin-right:8px;border-radius:99px;border:1px solid var(--bd);color:var(--muted)}
.gr-layers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px;margin:0 0 12px}
.gr-l{padding:12px 14px;border-radius:10px;background:var(--surface);border-top:3px solid}.gr-l h5{font:600 .68rem var(--sans);letter-spacing:.12em;text-transform:uppercase;margin:0 0 6px}.gr-l p{margin:0 0 6px;font-size:.92rem;color:var(--text)}
.gr-l .gr-src{font-size:.76rem;color:var(--muted);margin:0}
.gr-l-sym{border-color:var(--gr-sym)}.gr-l-sym h5{color:var(--gold)}.gr-l-psy{border-color:var(--gr-psy)}.gr-l-psy h5{color:var(--blue)}.gr-l-life{border-color:var(--gr-life)}.gr-l-life h5{color:var(--pos)}
.gr-ex h5,.gr-h5{font:600 .68rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}.gr-ex ul,.gr-review ul{margin:0;padding-left:18px;display:grid;gap:5px}.gr-ex p{margin:0}
.gr-pl li{line-height:1.55}
.gr-res{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px}
.chip-b{font:500 .82rem var(--sans);padding:7px 12px;border:1px solid var(--bd);border-radius:99px;background:var(--raise);color:var(--text2);cursor:pointer;min-height:36px;text-align:left}.chip-b:hover{border-color:var(--brass);color:var(--text)}
.gr-form{display:grid;gap:var(--s4);padding:clamp(16px,2.6vw,24px);border:1px solid var(--bd);border-radius:var(--r);background:var(--raise);margin:0 0 var(--s4)}.gr-form h4{font-size:1.2rem}
.gr-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--s3)}
.gr-form textarea,.gr-form input[type=date]{width:100%;font:400 1rem/1.5 var(--sans);padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);box-sizing:border-box}.gr-form input[type=date]{height:54px}
.gr-form textarea:focus,.gr-form input:focus,.gr-form select:focus{outline:2px solid var(--focus);outline-offset:1px}
.gr-act{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.gr-file{cursor:pointer}
.gr-crow{display:grid;grid-template-columns:1fr minmax(150px,200px) auto;gap:8px;align-items:center;margin-bottom:8px}.gr-crow input{height:46px}
.gr-review{padding:clamp(16px,2.6vw,24px);border:1px solid var(--brass);border-radius:var(--r);background:var(--surface);color:var(--text2);display:grid;gap:8px;margin:0 0 var(--s4)}.gr-review p{margin:0}.gr-review b{color:var(--text)}
.gr-zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:10px}.gr-zones section{padding:10px 12px;border:1px solid var(--bd);border-radius:10px;background:var(--raise)}.gr-zones h5{font:600 .7rem var(--sans);letter-spacing:.1em;text-transform:uppercase;margin:0 0 6px;color:var(--text)}
.gr-hit{padding:10px 12px;border-left:3px solid var(--gr-psy);background:var(--raise);border-radius:6px}
.gr-track{list-style:none;margin:0 0 var(--s4);padding:0;display:grid;gap:10px}.gr-track>li{padding:14px 16px;border:1px solid var(--bd);border-radius:12px;background:var(--raise)}
.gr-tr-h{display:flex;gap:10px;justify-content:space-between;align-items:flex-start}.gr-tr-a{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.gr-bar{height:6px;border-radius:99px;background:var(--surface);margin:8px 0;overflow:hidden}.gr-bar i{display:block;height:100%;background:var(--pos);border-radius:99px}
.gr-cat summary{cursor:pointer;font-weight:600;color:var(--text2)}.gr-cat ul{margin:8px 0 0;padding-left:18px;display:grid;gap:6px;font-size:.92rem}
.gr-entries{list-style:none;padding:0;margin:0 0 var(--s4);display:grid;gap:8px}.gr-entries li{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--raise)}.gr-entries p{margin:4px 0 0;white-space:pre-wrap}
.gr-seg{flex-wrap:wrap;margin-bottom:var(--s3)}.gr-seg button{height:40px}
.gr-vals{display:flex;flex-wrap:wrap;gap:6px}.chip-c{position:relative;cursor:pointer}.chip-c input{position:absolute;opacity:0}.chip-c span{display:inline-block;font:500 .84rem var(--sans);padding:7px 12px;border:1px solid var(--bd);border-radius:99px;background:var(--raise);color:var(--text2)}
.chip-c input:checked+span{background:var(--pos);border-color:var(--pos);color:#fff}.chip-c input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.gr-ctx{margin:0 0 var(--s3);padding:12px 16px;border:1px solid var(--bd);border-radius:12px;background:var(--raise)}.gr-ctx summary{cursor:pointer;font-weight:600;color:var(--text2);margin-bottom:8px}.gr-ctx .fld{margin-bottom:8px}.gr-ctx textarea{width:100%;font:400 1rem/1.5 var(--sans);padding:10px 12px;border:1px solid var(--line);border-radius:10px;box-sizing:border-box}
.gr-log{display:grid;gap:10px;margin:0 0 var(--s3)}.gr-msg{padding:12px 16px;border-radius:14px;max-width:min(100%,780px)}.gr-msg.me{justify-self:end;background:var(--ink);color:var(--ivory)}.gr-msg.me p{margin:0}
.gr-msg.bot{background:var(--raise);border:1px solid var(--bd);display:grid;gap:8px}.gr-p{margin:0;padding-left:12px;border-left:3px solid var(--bd);font-size:.94rem;color:var(--text)}
.gr-tag{display:block;font:600 .64rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.gr-p-bieu_tuong{border-color:var(--gr-sym)}.gr-p-tam_ly{border-color:var(--gr-psy)}.gr-p-doi_song,.gr-p-thu{border-color:var(--gr-life)}.gr-p-ranh_gioi,.gr-p-an_toan{border-color:var(--cinnabar)}.gr-p-tu_ban{border-color:var(--brass)}
.gr-sugg{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--s3)}
.gr-ask{display:grid;grid-template-columns:1fr auto;gap:8px}.gr-ask input{height:48px}
@media (max-width:640px){.gr-nav{position:static;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}.gr-nav a{white-space:nowrap}.gr-sec{scroll-margin-top:120px}.gr-sh>div{grid-template-columns:1fr;gap:2px}.gr-crow{grid-template-columns:1fr}.gr-crow .link{justify-self:start}.gr-tr-h{flex-direction:column}}
@media print{.gr-nav,.gr-res,.gr-form,.gr-ask,.gr-sugg,.gr-ctx{display:none!important}.gr-card{box-shadow:none}}

/* 'Luận giải tổng hợp' (synthesis layer) */
.synth{margin:14px 0 18px;padding:18px 20px;border:1px solid var(--bd);border-left:3px solid var(--gold);border-radius:14px;background:var(--raise)}
.synth .eyebrow{color:var(--gold);margin-bottom:8px}
.sy-p{font:400 1.02rem/1.72 var(--serif);color:var(--text);margin:0 0 12px}.sy-p.sy-intro{color:var(--text2);font-size:.95rem}.sy-p.sy-synthesis{border-top:1px dashed var(--bd);padding-top:10px}
.sy-s[data-rules]{cursor:pointer;border-radius:4px;transition:background .15s}.sy-s[data-rules]:hover,.sy-s.on{background:color-mix(in srgb,var(--gold) 14%,transparent)}
.sy-s:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.sy-refl{font-style:italic;color:var(--text2)}
body[data-depth=pro] .sy-b-he_thong{text-decoration:underline dotted color-mix(in srgb,var(--muted) 60%,transparent);text-underline-offset:3px}
.sy-why{margin:4px 0 10px;padding:8px 12px;border-radius:10px;background:var(--surface);overflow-wrap:anywhere}
.sy-legend{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:4px 0 10px}
.sy-chip{padding:2px 8px;border-radius:999px;border:1px solid var(--bd);font-size:.74rem}.sy-chip.sy-b-sach{color:var(--jade)}.sy-chip.sy-b-dieu_kien{color:var(--blue)}.sy-chip.sy-b-he_thong{color:var(--muted)}.sy-chip.sy-b-tinh_toan{color:var(--gold)}
.sy-graph{margin:0;padding-left:18px;font-size:.88rem;line-height:1.55}.sy-graph ul{padding-left:16px;margin:4px 0 8px}.sy-graph .k{font-weight:600}
.sy-foot{margin:6px 0 0}
@media (max-width:640px){.synth{padding:14px 14px}.sy-p{font-size:.98rem;line-height:1.65}}
@media print{.synth{break-inside:auto;border-left-width:2px}.sy-legend,.sy-why{display:none!important}}

/* ===== Guides: Tử Tử & Vi Vi (Tử Vi), Bát Bát & Tự Tự (Bát Tự) ===== */
.gd-av{flex:none;overflow:visible}.gd-av .gd-face{fill:var(--mf)}.gd-av .gd-acc{fill:var(--ma)}.gd-av .gd-tuft{stroke:var(--ma)}.gd-av .gd-glass{fill:none;stroke:var(--ma);stroke-width:2.2}
.gd-av .gd-eye{fill:#2a2418}.gd-av .gd-cheek{fill:#e59a86;opacity:.55}.gd-av .gd-mouth{stroke:#2a2418}.gd-av .gd-glyph{font:700 11px var(--han);fill:var(--ma);opacity:.9}
.gd-tu1{--mf:#E8DDF5;--ma:#C79A2E}.gd-vi{--mf:#DDE6F7;--ma:#6C5BB5}.gd-bat{--mf:#F6DDD2;--ma:#A7432C}.gd-tu2{--mf:#F3E7C8;--ma:#8A6A2B}
.gd-eyes{transform-origin:32px 34px;animation:gd-blink 5s infinite}
@keyframes gd-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.gd-talk .gd-mouth{transform-origin:32px 44px;animation:gd-talk .24s infinite alternate}
@keyframes gd-talk{from{transform:scaleY(.4)}to{transform:scaleY(1.5)}}
.gd{margin:var(--s5) 0;border:1px solid var(--line);border-left:4px solid var(--ma0,var(--brass));border-radius:18px;background:var(--raise);box-shadow:var(--sh);overflow:hidden}
.gd-tv{--ma0:#6C5BB5}.gd-bt{--ma0:var(--cinnabar)}
.gd-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--ma0) 6%,var(--ivory))}
.gd-h .eyebrow{margin:0 0 2px}.gd-h h3{font-size:1.15rem}.gd-pair{display:flex}.gd-pair .gd-av+.gd-av{margin-left:-10px}.gd-act{margin-left:auto;display:flex;gap:8px}
.gd-log{display:grid;gap:12px;padding:16px 18px;min-height:96px;position:relative;max-height:min(70vh,560px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.gd-row{display:flex;gap:10px;align-items:flex-start;animation:gd-in .3s ease both}
@keyframes gd-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.gd-row.gd-vi,.gd-row.gd-tu2{flex-direction:row-reverse}
/* a bubble keeps its final size while it is typed (mascots.js): the whole text sits invisibly under the typed one, and a bubble not yet
   spoken holds its place hidden, so the conversation never grows while it plays */
.gd-row.gd-wait{visibility:hidden;animation:none}.gd-tx{display:grid}.gd-tx>*{grid-area:1/1}.gd-ghost{visibility:hidden;margin:0}.gd-tx .gd-dots{align-self:start}
.gd-bub{position:relative;max-width:min(560px,100%);padding:10px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);font-size:.96rem;line-height:1.55}
.gd-row.gd-tu1 .gd-bub,.gd-row.gd-bat .gd-bub{border-top-left-radius:4px}.gd-row.gd-vi .gd-bub,.gd-row.gd-tu2 .gd-bub{border-top-right-radius:4px;background:color-mix(in srgb,var(--ma0) 9%,var(--ivory))}
.gd-who{display:block;font:600 .64rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.gd-t{margin:0}.gd-talk .gd-t:after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:currentColor;animation:gd-caret .8s steps(1) infinite}
@keyframes gd-caret{50%{opacity:0}}
.gd-dots{display:none;gap:4px;padding:4px 0}.gd-typing:not(.gd-talk) .gd-dots{display:inline-flex}.gd-typing:not(.gd-talk) .gd-t{display:none}
.gd-dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:gd-dot 1s infinite}.gd-dots i:nth-child(2){animation-delay:.15s}.gd-dots i:nth-child(3){animation-delay:.3s}
@keyframes gd-dot{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.gd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ch-what.gd-chap{display:flex;gap:10px;align-items:flex-start;cursor:default}.ch-what.gd-chap .gd-bub{flex:1;max-width:none;background:transparent;border:0;padding:2px 0}.ch-what.gd-chap.gd-vi,.ch-what.gd-chap.gd-tu2{flex-direction:row}
.ch-what.gd-chap .gd-t{display:inline}
.gd-pal{display:flex;gap:10px;align-items:flex-start;margin:6px 0 10px}.gd-pal .gd-bub{flex:1;max-width:none}.gd-pal .gd-t{display:block;font-size:.92rem;line-height:1.55}
@media(max-width:600px){.gd-h{padding:12px}.gd-act{margin-left:0;width:100%}.gd-log{padding:12px}.gd-row .gd-av{width:36px;height:36px}.gd-bub{font-size:.92rem}}
@media(prefers-reduced-motion:reduce){.gd-eyes,.gd-talk .gd-mouth,.gd-dots i,.gd-row,.gd-talk .gd-t:after{animation:none!important}}

/* ===== Print / "Tải PDF": both systems, plain-language mode, no controls ===== */
.res-act{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.print-note{display:none}
body.hour-mode #print-btn{display:none}
@media print{
  @page{size:A4;margin:12mm}
  html,body{background:#fff!important;color:#222}
  body[data-view=chart] #chart-view .pane{display:block!important}
  body[data-view=chart] #chart-view #pane-hour{display:none!important}
  .site-header,.res-nav,.site-footer,.res-act,.depth,.gd,.tv-toggle,.tv-ov,.tv-hint,.drawer,.cx-bar,.legend,.rp-toc,.sys-switch,.bs-next,.by-bar button,.yx-bar,.ig-toggle,[data-mc],.btn,#exp-badge,dialog{display:none!important}
  .res-head,.atl-mast{padding:0 0 8px!important;background:none!important}.res-head h1,.atl-mast h1{font-size:22pt}.atl-side .res-hl{display:none}
  .wrap{max-width:none!important;padding:0!important}
  .r-sec{padding:14px 0!important;break-before:auto}
  #pane-tuvi{break-before:page}
  /* Bát Tự follows the header on page 1 (the hidden hour pane used to push it to page 2); long chapters may split across pages,
     only small blocks are kept whole (a whole-chapter 'avoid' left near-empty pages) */
  .rp-layout{display:block!important}.chapter{break-inside:auto}.chapter>header{break-after:avoid}
  .finding-card,.ez-card,.bs-c,.pillar,.ez-empty,.sy-p{break-inside:avoid}
  body.print-no-growth[data-view] #chart-view #pane-growth{display:none!important}
  /* observatory layout: the board stage is a CSS grid, which Chrome pushes whole to the next page (leaving a blank one) */
  .tv-stage,.bz-stage{display:block!important}.atl-stage{padding:0!important}.tv-stage>*+*{margin-top:12px}
  /* trailing padding of the Bát Tự pane spilled onto an otherwise empty page before the forced Tử Vi break */
  #pane-bazi,#pane-bazi>*:last-child,#pane-bazi .r-report,#pane-bazi .wrap,#bazi-report,#bazi-report .rp-layout,#bazi-report .rp-body{padding-bottom:0!important;margin-bottom:0!important}
  .chapter{margin-bottom:10pt}.reveal{opacity:1!important;transform:none!important}
  .tv-scroll{overflow:visible!important}.tv-board{zoom:.58!important}
  .tv-links{display:none}
  .tv-layout{display:block!important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a{color:inherit!important;text-decoration:none!important}.gl{text-decoration:none!important}
  .print-note{display:block;margin-top:14pt;padding-top:8pt;border-top:1px solid #bbb;font-size:9pt;color:#555}
  .acc{break-inside:auto}.acc-b{display:block!important}
  .gd-chap svg,.gd-chap .gd-who,.gd-sr{display:none!important}.gd-chap .gd-bub{padding:0}
}
.yx-year{margin:0 0 10px;font-size:.95rem;color:var(--text2)}

/* ===== Landing + journey (simplified home, header per view, next steps) ===== */
.nav button{font:500 .9rem var(--sans);color:var(--text2);background:none;border:0;padding:10px 12px;border-radius:99px;cursor:pointer;transition:color .15s,background .15s}
.nav button:hover{color:var(--ink);background:var(--parchment)}
.hdr-cta{margin-left:0}.hdr-pdf{display:none}
body[data-view=chart] .nav,body[data-view=chart] .hdr-home{display:none}
body[data-view=chart].mast-off:not(.hour-mode) .hdr-pdf{display:inline-flex;margin-left:auto}
.hero-in{padding-top:clamp(32px,5vw,72px);padding-bottom:clamp(40px,5vw,80px)}
.hero-lead{margin:var(--s5) 0}
.hero-facts{margin-top:var(--s6)}
.hero-art .compass-wrap{max-width:520px}
.create{padding:clamp(56px,7vw,var(--s9)) 0}
.create-copy h2{margin-bottom:0}.create-copy .link{margin-top:var(--s2)}
.inside{padding:clamp(56px,7vw,96px) 0}.inside .sec-h{margin-bottom:var(--s6)}
.mock{display:block;width:100%;padding:16px;background:var(--raise);border:1px solid var(--line);border-radius:20px;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:border-color .2s,transform .25s,box-shadow .25s}
.mock:hover{border-color:var(--brass);transform:translateY(-2px);box-shadow:var(--sh)}
.mock-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(78px,auto);gap:5px}
.mc{display:flex;flex-direction:column;gap:2px;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--ivory);min-width:0;position:relative}
.mc-p{font:600 .6rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mc-s{font:500 .86rem/1.25 var(--serif);color:var(--ink)}.mc-s i{color:var(--muted);font-size:.8rem}
.mc-b{margin-top:auto;font:500 .72rem var(--serif);color:var(--muted);text-align:right}
.mc.tp{border-color:var(--brass)}.mc.on{border-color:var(--cinnabar);box-shadow:0 0 0 2px rgba(167,67,44,.14);background:#FBF0EA}.mc.on .mc-p{color:var(--cinnabar)}
.mock-cap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;font-size:.8rem;color:var(--muted)}.mock-cap b{color:var(--cinnabar);font-weight:600}
.inside-notes{counter-reset:none}.inside-notes li{position:relative;padding-left:52px;border-left:0}
.in-n{position:absolute;left:0;top:2px;width:34px;height:34px;border-radius:50%;border:1px solid var(--cinnabar);display:grid;place-items:center;font:500 1rem var(--serif);color:var(--cinnabar)}
.sys-switch{margin-top:var(--s6);padding:18px 20px;border-style:solid;background:var(--raise)}.sys-switch>div:first-child{display:grid;gap:2px}.sys-switch b{font:500 1.2rem var(--serif);color:var(--text)}
.sys-act{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:980px){.hero-art{max-width:260px}.inside-grid{gap:var(--s6)}}
@media(max-width:600px){
  .hero h1{font-size:2.35rem}.hero-facts{margin-top:var(--s5);padding-top:var(--s4)}.hero-facts li{display:flex;gap:6px;flex-wrap:wrap}.hero-facts b{display:inline;margin:0}
  .hero-art{display:none}.hdr .btn-sm{padding:8px 14px;min-height:38px}
  .mock{padding:10px}.mock-board{grid-auto-rows:minmax(64px,auto);gap:4px}.mc{padding:5px}.mc-p{font-size:.5rem;letter-spacing:.04em}.mc-s{font-size:.7rem}.mc-b{font-size:.62rem}.mc-center b{font-size:.95rem}.mc-center small{font-size:.62rem}.mc-center i{width:30px;height:30px}.mc-center i:after{inset:10px 13px}
  .sys-act .btn{flex:1 1 auto}.bs-next .btn{flex:1 1 auto}
}
@media(max-width:980px){.hdr-home{margin-left:auto}}
#tuvi-host,#bazi-host,#tvr-h,#bzr-h{scroll-margin-top:136px}
@media(max-width:600px){.final-art{display:none}.final{padding:56px 0}.inside-notes{gap:var(--s4)}.inside-notes li{font-size:.9rem;padding-left:46px}.in-n{width:30px;height:30px;font-size:.9rem}.inside-notes b{font-size:1.15rem}}
@media(max-width:700px){.atl-mast .res-act{flex-wrap:nowrap;gap:6px;width:100%}.atl-mast .res-act .btn{padding:7px 11px;font-size:.78rem;white-space:nowrap}.atl-mast #print-btn{margin-left:auto}}

/* Account slot in the header (js/account.js) */
.acct{display:inline-flex;align-items:center;gap:.5rem}
.acct:empty{display:none}
.acct-name{font-size:.9rem;font-weight:600;max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){.acct-name{display:none}}
.acct-wallet{display:inline-flex;align-items:center;gap:.3em;font-size:.8rem;color:var(--text2);border:1px solid var(--line);border-radius:99px;padding:4px 10px 4px 8px;white-space:nowrap}
.aw-coins{display:inline-flex;align-items:center;gap:.3em}.aw-coins b{font:600 .86rem var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:1180px){.aw-free{display:none}.acct-wallet{padding:4px 9px 4px 6px}}
.acct .btn,.hdr-cta{white-space:nowrap}
/* phones: room for the coin chip — tighter header, admin link only on wider screens (admins can open /admin directly) */
@media (max-width:760px){.acct-admin{display:none}}
@media (max-width:600px){.hdr{gap:10px}.acct{gap:6px}.acct .btn-sm,.hdr-cta.btn-sm{padding:8px 12px}.aw-x{display:none}}
@media (max-width:400px){.brand{gap:8px}.brand-t b{font-size:1.12rem}.acct .btn-sm,.hdr-cta.btn-sm{padding:8px 10px}.acct-wallet{padding:4px 7px 4px 5px}}
/* the xu coin: gold rim and face from the brass/gold tokens, square hole in the page colour */
.coin{width:1.35em;height:1.35em;flex:none;display:block;filter:drop-shadow(0 1px 1px rgba(110,70,20,.25))}
.coin-rim{fill:#B08A53;stroke:#86642F;stroke-width:1}.coin-face{fill:#E2BF7E}.coin-ring{fill:none;stroke:#A9813F;stroke-width:.8;stroke-dasharray:1.2 1.1}
.coin-hole{fill:var(--bg,#FAF6EF);stroke:#86642F;stroke-width:.9}.coin-shine{fill:none;stroke:#FFF4DA;stroke-width:1.3;stroke-linecap:round;opacity:.85}
.acct-admin{font:600 .8rem var(--sans);color:var(--accent);text-decoration:none;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:99px;padding:5px 10px;white-space:nowrap}
.acct-admin:hover{background:var(--surface)}

/* Chat about the chart (js/ask.js) */
.ask-fab{position:fixed;right:20px;bottom:20px;z-index:60;font:600 .92rem var(--sans);color:var(--ivory);background:var(--cinnabar);border:0;border-radius:99px;padding:13px 20px;cursor:pointer;box-shadow:var(--sh)}
.ask-fab:hover{filter:brightness(1.06)}
.ask-panel{position:fixed;right:20px;bottom:76px;z-index:61;width:min(400px,calc(100vw - 24px));max-height:min(620px,calc(100vh - 110px));display:flex;flex-direction:column;background:var(--raise);color:var(--ink);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px -20px rgba(60,40,15,.35);overflow:hidden}
.ask-panel[hidden]{display:none}
.ask-h{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--parchment)}
.ask-h b{font:600 1.05rem var(--serif)}.ask-left{margin-left:auto}
.ask-x{border:0;background:none;font-size:1.4rem;line-height:1;cursor:pointer;color:var(--muted);padding:0 4px}
.ask-log{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:120px}
.ask-m{margin:0;padding:9px 13px;border-radius:14px;max-width:92%;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.95rem;line-height:1.55}
.ask-me{align-self:flex-end;background:var(--cinnabar);color:var(--ivory);border-bottom-right-radius:4px}
.ask-bot{align-self:flex-start;background:var(--parchment);border-bottom-left-radius:4px}
.ask-err{align-self:flex-start;background:none;border:1px solid var(--cinnabar);color:var(--cinnabar);font-size:.88rem}
.ask-note{margin:0;padding:10px 14px;background:var(--parchment);border-top:1px solid var(--line);font-size:.88rem;color:var(--text2)}
.ask-note a{color:var(--cinnabar);font-weight:600}
.ask-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);align-items:flex-end}
.ask-form textarea{flex:1;resize:none;font:inherit;font-size:.95rem;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--ivory);color:var(--ink);max-height:120px}
.ask-form textarea:disabled{opacity:.6}
.ask-fine{margin:0;padding:0 14px 10px}
@media print{.ask-fab,.ask-panel{display:none!important}}
@media(max-width:600px){.ask-fab{right:12px;bottom:12px}.ask-panel{right:12px;bottom:64px}}

.ask-deep{display:flex;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.ask-deep select{flex:1;min-width:0;font:inherit;font-size:.88rem;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--ivory);color:var(--ink);text-overflow:ellipsis}
.ask-deep .btn{white-space:nowrap}

/* Live counters on the landing page (js/live.js): a bordered box, a "Trực tiếp" header row, one cell per total */
.live{margin:var(--s5) 0 0;max-width:30rem;border:1px solid var(--bd);border-radius:var(--r-sm);background:color-mix(in srgb,var(--raise) 82%,transparent);overflow:hidden}
.live[hidden]{display:none}
.live-tag{display:flex;align-items:center;gap:8px;margin:0;padding:10px var(--s4);border-bottom:1px solid var(--bd);font:600 .7rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--jade)}
.live-cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.live-item{display:flex;flex-direction:column;gap:10px;padding:var(--s4);min-width:0}
.live-item+.live-item{border-left:1px solid var(--bd)}
.live-lbl{font:500 .68rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.live-item b{display:inline-flex;align-items:center;gap:10px;font:600 clamp(1.35rem,3.2vw,1.7rem)/1 ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.live-item [data-stat]:after{content:"+"}
.live-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--jade);position:relative}
.live-item .live-dot{width:10px;height:10px;box-shadow:0 0 0 4px color-mix(in srgb,var(--jade) 18%,transparent)}
.live-tag .live-dot:after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--jade);opacity:0;animation:livePing 2.4s ease-out infinite}
@keyframes livePing{0%{transform:scale(.4);opacity:.7}80%,100%{transform:scale(1.5);opacity:0}}
.live-item.bump b span{display:inline-block;animation:liveBump .9s ease-out}
@keyframes liveBump{0%{color:var(--jade);transform:translateY(-3px) scale(1.1)}100%{color:var(--ink);transform:none}}
@media(max-width:420px){.live-item{padding:var(--s3)}.live-item b{gap:8px}.live-item .live-dot{width:8px;height:8px;box-shadow:0 0 0 3px color-mix(in srgb,var(--jade) 18%,transparent)}}
@media(prefers-reduced-motion:reduce){.live-tag .live-dot:after{animation:none;opacity:.35;transform:scale(1.2)}.live-item.bump b span{animation:none}}
@media print{.live{display:none}}
/* reader prose (Luận giải cung Mệnh): clean text, evidence under the clicked sentence */
.prose .pr-s{cursor:pointer;border-radius:4px;transition:background .15s}.prose .pr-s:hover,.prose .pr-s.on{background:color-mix(in srgb,var(--gold) 14%,transparent)}
.prose .pr-s:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
/* pho_thong sentences (common meanings, not book-checked): a lighter ink, said in the chapter's footer */
.prose .pr-pt,.sy-foot .pr-pt{color:var(--text2)}
.an-tinh_toan{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 40%,transparent)}.an-pho_thong{color:var(--muted);border-color:color-mix(in srgb,var(--muted) 45%,transparent)}
.pr-why{margin:-4px 0 14px;padding:10px 14px;border:1px solid var(--bd);border-radius:10px;background:var(--bg)}.pr-why p{margin:0 0 6px}
.pr-rules{margin:6px 0 0;padding-left:18px}.pr-rules li{margin:3px 0;line-height:1.5}.pr-rules code{font-size:.78em;margin-left:4px}

/* the written reading comes first; the book-by-book evidence folds under it */
.ch-more{margin-top:var(--s5);border-top:1px solid var(--line);padding-top:var(--s3)}
.ch-more>summary{cursor:pointer;font:600 .9rem var(--sans);color:var(--cinnabar);padding:8px 0;list-style:none}
.ch-more>summary::-webkit-details-marker{display:none}
.ch-more>summary:before{content:"+";display:inline-block;width:1.2em;font-weight:700}
.ch-more[open]>summary:before{content:"−"}

.ask-buy{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--parchment)}
.ask-buy[hidden]{display:none}.ask-buy p{flex:1 0 100%;margin:0}
.ask-buy-btn{white-space:nowrap}