.chips{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 10px}
.chip{font:inherit;font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer;line-height:1.4}
.chip:hover{color:var(--text);border-color:var(--text)}
.chip.on{background:var(--blue-bg);color:var(--blue);border-color:var(--blue)}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.seg button{font:inherit;font-size:13px;padding:7px 12px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;text-align:left;flex:1 1 140px;min-width:0}
.seg button.on{border-color:var(--blue);background:var(--blue-bg);color:var(--blue);font-weight:600}
.seg button small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.seg button.on small{color:var(--blue)}
#presets button{flex:1 1 40%}
.dyn-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 38px;gap:8px;margin-bottom:8px;align-items:center}
.dyn-r .lab{font-size:13px;color:var(--muted);grid-column:1 / 3}
.pct{position:relative;display:block;min-width:0}
.pct .input{padding-right:40px;text-align:right;font-variant-numeric:tabular-nums}
.pct::after{content:'%/năm';position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:12px;pointer-events:none}
.unit{position:relative;display:block;min-width:0}
.unit .input{padding-right:52px;text-align:right;font-variant-numeric:tabular-nums}
.unit::after{content:attr(data-unit);position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:12px;pointer-events:none}
.eq{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:14px;margin:6px 0 12px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.eq b{font-variant-numeric:tabular-nums}
.hero.loan{background:var(--blue-bg);color:var(--blue);border-color:rgba(39,131,222,.25)}
.hero.loan .meta{color:var(--text);opacity:.8}
.hero .amount.mid{font-size:26px}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
.stat{border:1px solid var(--border);border-radius:8px;padding:10px 12px;background:var(--card)}
.stat .t{font-size:12px;color:var(--muted)}
.stat .v{font-size:17px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat .s{font-size:12px;color:var(--muted);margin-top:2px}
.stat.warn .v{color:var(--orange)}
.stat.good .v{color:var(--green)}
.stat.bad .v{color:var(--red)}
.chart{width:100%;height:auto;max-height:360px;display:block;margin-top:6px}
.chart text{font-family:inherit;font-size:11px;fill:var(--muted)}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted);margin-top:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px;margin-right:4px}
.tbl tr.yr{cursor:pointer}
.tbl tr.yr td:first-child{white-space:nowrap}
.tbl tr.yr td:first-child::before{content:'›';display:inline-block;width:14px;color:var(--muted);transition:transform .15s}
.tbl tr.yr.open td:first-child::before{transform:rotate(90deg)}
.tbl tr.sub td{background:var(--bg2);font-size:13px;padding:5px 8px}
.tbl tr.sub.shock td{background:var(--orange-bg)}
.tbl tr.sub.pre td{background:var(--green-bg)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.toolbar .sp{flex:1}
.mini{font-size:12px;color:var(--muted)}
.pill.red{background:#fdecea;color:var(--red)}
@media (prefers-color-scheme: dark){.pill.red{background:#3d2220}}
.cmp3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
.cmp3 .opt{padding:8px 10px}
.cmp3 .opt .t{font-size:12px}
.cmp3 .opt .v{font-size:14px}
.opt.cur{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.barrow{display:flex;align-items:center;gap:8px;font-size:13px;margin:4px 0}
.barrow .bl{width:120px;flex:none;color:var(--muted)}
.barrow .bar{flex:1;height:10px;background:var(--bg2);border-radius:5px;overflow:hidden}
.barrow .bar i{display:block;height:100%;background:var(--blue);border-radius:5px}
.barrow .bv{width:120px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
@media (max-width:560px){.stats{grid-template-columns:1fr 1fr}.cmp3{grid-template-columns:1fr}.barrow .bl{width:90px}.barrow .bv{width:100px}}
@media print{.tabs,.toolbar,.btn{display:none !important}.panel{display:block !important}.grid{grid-template-columns:1fr}}
