/* "Tổng quan lá số" tab (js/overview.js): frame, theses and four SVG charts of system indices. Paper surface like the rest of the result.
   Series colours validated with the dataviz palette checks on the light surface (CVD ΔE ≥ 10); the limit series also has a dashed line /
   hatched-free outline so identity never rests on colour alone. */
#chart-view[data-tab=overview] #pane-overview{display:block}
.r-overview{background:var(--ivory);padding:var(--s6) 0 var(--s8)}
.ov{--ov-s:#0A8570;--ov-l:#BC4A2E;--ov-s-wash:rgba(10,133,112,.12);--ov-l-wash:rgba(188,74,46,.10);--ov-grid:#E6DCCB;--ov-axis:#BFAF95;display:grid;gap:var(--s5)}
.dark .ov{--ov-s:#7FD3BC;--ov-l:#FFB59A;--ov-s-wash:rgba(127,211,188,.16);--ov-l-wash:rgba(255,181,154,.14);--ov-grid:#8B4A39;--ov-axis:#B8705C}
.ov-disc{margin:0;padding:12px 16px;border:1px solid var(--hair,#CDBFA4);border-left:3px solid var(--brass);border-radius:10px;background:var(--raise,#FFFDF8);color:var(--text2);font-size:.94rem;max-width:62em}
.ov-disc b{color:var(--text)}

.ov-frame{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--s5) var(--s6);padding:var(--s5);border:1px solid var(--hair,#CDBFA4);border-radius:var(--r);background:var(--raise,#FFFDF8)}
.ov-frame .eyebrow{margin-bottom:8px}
.ov-frame h3{margin:0;font:500 clamp(1.3rem,2.4vw,1.7rem)/1.25 var(--serif)}
.ov-frame h3 small{font:400 .8em var(--sans);color:var(--muted)}
.ov-marks,.ov-centre,.ov-forms{margin:8px 0 0;color:var(--text2);font-size:.94rem}
.ov-form{display:inline-block;margin:4px 6px 0 0;padding:2px 10px;border:1px solid var(--line);border-radius:99px;background:var(--ivory)}
.ov-form small,.ov-th small{color:var(--muted)}
.ov-ths{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ov-th-h{margin:0;font:500 1.08rem/1.3 var(--serif);display:flex;gap:10px;align-items:baseline}
.ov-no{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--parchment);font:600 .75rem var(--sans);color:var(--accent)}
.ov-th>ul{margin:4px 0 0 32px;padding:0;color:var(--text2);font-size:.94rem}
.ov-th details{margin:4px 0 0 32px;font-size:.86rem}
.ov-th summary,.ov-tbl summary,.ov-method summary{cursor:pointer;color:var(--accent);font-weight:500}
.ov-rules{margin:6px 0 0;padding-left:18px;color:var(--text2);display:grid;gap:3px}
.ov-rules code,.ov-src code{font-size:.82em;color:var(--muted);word-break:break-all}
.ov-tag{display:inline-block;padding:0 7px;border:1px solid var(--line);border-radius:99px;font-size:.74rem;color:var(--muted);white-space:nowrap}
.ov-b-thong_le{border-style:dashed;color:#7a5f20}.ov-b-sach_dien_giai{border-style:dotted}
.ov-note{margin:10px 0 0;font-size:.82rem;color:var(--muted)}

.ov-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.ov-card{min-width:0;container-type:inline-size;padding:var(--s4) var(--s4) var(--s3);border:1px solid var(--hair,#CDBFA4);border-radius:var(--r);background:var(--raise,#FFFDF8)}
.ov-card header h3{margin:0;font:500 1.25rem/1.25 var(--serif)}
.ov-card header p{margin:4px 0 0;font-size:.86rem;color:var(--text2)}
.ov-leg{display:flex;flex-wrap:wrap;gap:4px 16px;margin:10px 0 4px;font-size:.84rem;color:var(--text2)}
.ov-leg span{display:inline-flex;align-items:center;gap:6px}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px}.sw-s{background:var(--ov-s)}.sw-l{background:var(--ov-l)}
.sw-line{width:18px;height:0;border-radius:0;border-top:2px solid var(--ov-s);background:none}.sw-line.sw-l{border-top-color:var(--ov-l)}.sw-dash{border-top-style:dashed}
.ov-plot{width:100%;min-height:200px;touch-action:pan-y}
.ov-svg{display:block;max-width:100%;overflow:visible;font-family:var(--sans)}
.ov-svg .ov-grid{stroke:var(--ov-grid);stroke-width:1;fill:none}.ov-svg .ov-base{stroke:var(--ov-axis);stroke-width:1}
.ov-tick{font-size:10.5px;fill:var(--muted)}
.ov-xl{font-size:11px;fill:var(--text2)}.ov-xl.is-cur{font-weight:600;fill:var(--text)}.ov-xl2{font-size:10px;fill:var(--muted)}
.ov-axl{font-size:11.5px;fill:var(--text2);cursor:pointer}
.ov-col-s{fill:var(--ov-s)}.ov-col-l{fill:var(--ov-l)}
.ov-ln-s,.ov-ln-l{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.ov-ln-s{stroke:var(--ov-s)}.ov-ln-l{stroke:var(--ov-l);stroke-dasharray:5 4}
.ov-dot-s,.ov-dot-l{stroke:var(--raise,#FFFDF8);stroke-width:2}.ov-dot-s{fill:var(--ov-s)}.ov-dot-l{fill:var(--ov-l)}
.ov-poly-s{fill:var(--ov-s-wash);stroke:var(--ov-s);stroke-width:2;stroke-linejoin:round}
.ov-poly-l{fill:var(--ov-l-wash);stroke:var(--ov-l);stroke-width:2;stroke-dasharray:5 4;stroke-linejoin:round}
.ov-typ{fill:none;stroke:var(--brass);stroke-width:1.5}.ov-typl{paint-order:stroke;stroke:var(--raise,#FFFDF8);stroke-width:3px;fill:var(--brass-d,#7F6736)}
.ov-now{stroke:var(--brass);stroke-width:1.5}
.ov-curband{fill:var(--parchment)}.ov-curlbl{font-size:10.5px;font-weight:600;fill:var(--accent);letter-spacing:.04em}
.ov-hit{fill:transparent}
.ov-grp{cursor:pointer;outline:none}
.ov-grp:hover .ov-col-s,.ov-grp:hover .ov-col-l,.ov-grp:focus-visible .ov-col-s,.ov-grp:focus-visible .ov-col-l{opacity:.82}
.ov-grp:focus-visible .ov-hit{stroke:var(--focus);stroke-width:1.5;stroke-dasharray:3 3}
.ov-grp.is-pick .ov-hit{fill:rgba(176,138,83,.12)}.ov-grp.is-pick .ov-axl{font-weight:600;fill:var(--text)}
.ov-cap{margin:6px 0 0;font-size:.78rem;color:var(--muted);font-style:italic}

.ov-why{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line);font-size:.88rem}
.ov-why h4{margin:0 0 4px;font:500 1.02rem/1.3 var(--serif)}
.ov-hint,.ov-none{margin:0;color:var(--muted);font-size:.84rem}
.ov-vals{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 6px}
.ov-vals span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.ov-vals .v-s::before{background:var(--ov-s)}.ov-vals .v-l::before{background:var(--ov-l)}
.ov-parts{margin:0 0 8px;padding-left:18px;color:var(--text2)}.ov-parts small{color:var(--muted)}
.ov-sides{display:grid;grid-template-columns:1fr;gap:var(--s3)}
@container (min-width:620px){.ov-sides{grid-template-columns:1fr 1fr;gap:var(--s4)}}
.ov-sides h5{margin:0 0 4px;font:600 .7rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ov-sides ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-height:300px;overflow:auto;overscroll-behavior:contain}
.ov-sides li p{margin:0}.ov-src{font-size:.78rem;color:var(--muted)}
.ov-tbl{margin-top:var(--s3);font-size:.86rem}
.ov-table{width:100%;border-collapse:collapse;margin-top:6px;font-variant-numeric:tabular-nums}
.ov-table th,.ov-table td{padding:4px 6px;border-bottom:1px solid var(--line);text-align:left}.ov-table td:nth-child(n+3),.ov-table th:nth-child(n+3){text-align:right}
.ov-table tr.is-cur td{font-weight:600;background:var(--parchment)}
.ov-method{font-size:.88rem;color:var(--text2)}.ov-method ul{margin:6px 0 0;padding-left:18px;display:grid;gap:4px}
.ov-ch{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.ov-ch .eyebrow{width:100%;margin-bottom:2px}
.ov-chip{font:500 .9rem var(--sans);padding:6px 14px;border:1px solid var(--line);border-radius:99px;background:var(--raise,#FFFDF8);color:var(--text);cursor:pointer}
.ov-chip:hover,.ov-chip:focus-visible{border-color:var(--accent);color:var(--accent)}
.ov-tip{position:fixed;z-index:60;max-width:260px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#FFFDF8;color:var(--ink);font:400 .8rem/1.45 var(--sans);box-shadow:var(--sh);pointer-events:none}
.ov-loading{padding:var(--s6) 0;color:var(--muted)}

@media(max-width:900px){.ov-frame{grid-template-columns:1fr}.ov-grid{grid-template-columns:1fr}}
@media(max-width:560px){
  .r-overview{padding-top:var(--s4)}
  .ov-frame,.ov-card{padding:var(--s3)}
  .ov-th>ul,.ov-th details{margin-left:0}
}
@media print{.ov-why,.ov-tbl,.ov-ch{display:none}}