/* ============================================================
   BASE — design system dùng chung cho mọi công cụ trong site
   Sửa ở đây là mọi trang đổi theo.
   ============================================================ */
:root{
  --bg:#F0F3EF; --surface:#FFFFFF; --sunk:#E9ECE7; --raise:#FBFCFA;
  --line:#DBDFD8; --line-2:#C3C9BF;
  --ink:#171A17; --ink-2:#535B54; --ink-3:#616A62;
  --accent:#1F6B3D; --accent-ink:#FFFFFF; --accent-wash:#E3EFE7;
  --pos:#0F6E6E;  --pos-wash:#E0EFEF;
  --flag:#1E5A8A; --flag-wash:#E3EDF5;
  --hot:#8A4B12;  --hot-wash:#F6EADC;
  --bad:#A32B21;  --bad-wash:#F7E8E6;
  --bar:rgba(31,107,61,.45);
  --sh-1:0 1px 2px rgba(20,24,20,.05);
  --sh-2:0 1px 2px rgba(20,24,20,.05), 0 10px 28px -14px rgba(20,24,20,.22);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px;
  --f1:11px; --f2:12px; --f3:13px; --f4:15px; --f5:17px; --f6:21px; --f7:28px; --f8:38px;
  --r:4px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111412; --surface:#191D1A; --sunk:#212623; --raise:#1F2420;
    --line:#2E3430; --line-2:#414942;
    --ink:#E8EBE6; --ink-2:#A6AFA8; --ink-3:#8B948D;
    --accent:#6DBF8A; --accent-ink:#191D1A; --accent-wash:#16291E;
    --pos:#5FBDBD;  --pos-wash:#15292A;
    --flag:#79B4E0; --flag-wash:#16242E;
    --hot:#D9A05B;  --hot-wash:#2C2318;
  --bad:#E4776A;  --bad-wash:#33211E;
    --bad:#E4776A;  --bad-wash:#33211E;
    --bar:rgba(109,191,138,.5);
    --sh-1:0 1px 2px rgba(0,0,0,.45);
    --sh-2:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --bg:#111412; --surface:#191D1A; --sunk:#212623; --raise:#1F2420;
  --line:#2E3430; --line-2:#414942;
  --ink:#E8EBE6; --ink-2:#A6AFA8; --ink-3:#8B948D;
  --accent:#6DBF8A; --accent-ink:#191D1A; --accent-wash:#16291E;
  --pos:#5FBDBD;  --pos-wash:#15292A;
  --flag:#79B4E0; --flag-wash:#16242E;
  --hot:#D9A05B;  --hot-wash:#2C2318;
  --bar:rgba(109,191,138,.5);
  --sh-1:0 1px 2px rgba(0,0,0,.45);
  --sh-2:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -14px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:var(--f4); line-height:1.5}
.num{font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric:tabular-nums}
.wrap{max-width:1160px; margin:0 auto; padding:0 var(--s5) 120px}
@media (min-width:961px){ .wrap{padding-bottom:var(--s8)} }
a{color:var(--accent)}

/* ---------- thanh điều hướng chung ---------- */
.sitenav{border-bottom:1px solid var(--line); background:var(--surface); margin-bottom:var(--s7)}
.sitenav-in{max-width:1160px; margin:0 auto; padding:0 var(--s5);
  display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap; min-height:52px}
.brand{display:inline-flex; align-items:center; gap:var(--s2); text-decoration:none; color:var(--ink);
  font-weight:600; font-size:var(--f3); letter-spacing:-.01em; white-space:nowrap;
  min-height:44px; padding-right:var(--s2)}
.brand svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.navlinks{display:flex; gap:var(--s1); flex-wrap:wrap; margin-left:auto}
.navlinks a{display:inline-flex; align-items:center; min-height:44px; padding:0 var(--s3);
  text-decoration:none; color:var(--ink-2); font-size:var(--f3); border-radius:var(--r);
  transition:background 160ms ease, color 160ms ease}
.navlinks a:hover{background:var(--sunk); color:var(--ink)}
.navlinks a[aria-current="page"]{color:var(--accent); font-weight:600}

/* ---------- đầu trang ---------- */
.pagehead{margin-bottom:var(--s6)}
.eyebrow{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); margin-bottom:var(--s3);
  font-size:var(--f1); font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
.eyebrow .kin{color:var(--accent)}
.eyebrow .live{display:inline-flex; align-items:center; gap:6px; color:var(--pos);
  background:var(--pos-wash); padding:3px var(--s2); border-radius:99px; letter-spacing:.08em}
.eyebrow .live i{width:6px;height:6px;border-radius:50%;background:var(--pos);display:block}
h1{font-size:clamp(26px,4vw,var(--f8)); line-height:1.1; font-weight:600; letter-spacing:-.025em; margin:0 0 var(--s3)}
.lede{margin:0; color:var(--ink-2); max-width:64ch}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:var(--s1); margin:var(--s6) 0 var(--s5); flex-wrap:wrap}
.tab{display:inline-flex; align-items:center; gap:var(--s2); cursor:pointer; min-height:44px;
  text-decoration:none;                 /* tab là thẻ <a> nên phải bỏ gạch chân mặc định */
  padding:0 var(--s4); border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--surface); color:var(--ink-2); font-family:inherit; font-size:var(--f3); font-weight:500;
  transition:background 160ms ease, color 160ms ease, border-color 160ms ease}
.tab svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tab:hover{background:var(--sunk); color:var(--ink)}
.tab[aria-selected="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}

/* ---------- bố cục hai cột ---------- */
.grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s6); align-items:start}
@media (max-width:960px){ .grid{grid-template-columns:minmax(0,1fr); gap:var(--s5)} }
@media (min-width:961px){ .col-out{position:sticky; top:var(--s5)} }

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-1)}
.card.out{box-shadow:var(--sh-2)}
.card-h{display:flex; justify-content:space-between; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s5); border-bottom:1px solid var(--line); background:var(--sunk); border-radius:var(--r) var(--r) 0 0}
.card-h h2{margin:0; font-size:var(--f1); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.card-h .meta{font-size:var(--f1); color:var(--ink-3)}

/* ---------- form ---------- */
.groups{display:flex; flex-direction:column}
.group{border-bottom:1px solid var(--line)}
.group:last-child{border-bottom:0}
.group > h3{margin:0; padding:var(--s4) var(--s5) var(--s2);
  font-size:var(--f1); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.group-body{padding:0 var(--s5) var(--s5); display:flex; flex-direction:column; gap:var(--s4)}
fieldset{border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--s3)}
legend{padding:0; font-size:var(--f1); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}

.lead-field{background:var(--raise); border:1px solid var(--line-2); border-radius:var(--r);
  padding:var(--s3) var(--s4) var(--s4); display:flex; flex-direction:column; gap:var(--s2)}
.lead-field label{font-size:var(--f2); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}
.lead-field .money input{font-size:var(--f6); padding:var(--s2) 30px var(--s2) 0; border:0;
  border-bottom:2px solid var(--line-2); border-radius:0; background:transparent; text-align:left}
.lead-field .money input:focus{border-bottom-color:var(--accent)}
.lead-field .money .unit{right:0; font-size:var(--f5)}
.lead-field .say{font-size:var(--f2); color:var(--ink-3); min-height:1.3em}

.field{display:flex; flex-direction:column; gap:6px}
.field > label{font-size:var(--f3); font-weight:500; color:var(--ink)}
.hint{font-size:var(--f2); color:var(--ink-3); line-height:1.45; margin:0}
.money{position:relative; display:flex; align-items:center}
.money input, input[type="number"], select{width:100%; min-height:44px; padding:var(--s2) var(--s3);
  border:1px solid var(--line-2); border-radius:var(--r); background:var(--surface); color:var(--ink);
  font-size:var(--f4); transition:border-color 160ms ease}
.money input{padding-right:30px; text-align:right}
.money input, input[type="number"]{font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums; font-weight:500}
select{font-family:inherit; font-size:var(--f3); cursor:pointer}
.money input:hover, input[type="number"]:hover, select:hover{border-color:var(--ink-3)}
.money .unit{position:absolute; right:var(--s3); color:var(--ink-3); pointer-events:none}
input:focus-visible, select:focus-visible, button:focus-visible, summary:focus-visible, a:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px}
.checks{display:flex; flex-direction:column}
.check{display:flex; gap:var(--s3); align-items:flex-start; cursor:pointer;
  font-size:var(--f3); line-height:1.45; min-height:44px; padding:var(--s2) 0}
.check input{margin:1px 0 0; accent-color:var(--accent); width:18px; height:18px; flex:none; cursor:pointer}
.two{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3)}
@media (max-width:440px){ .two{grid-template-columns:1fr} }

details{border:1px solid var(--line); border-radius:var(--r); background:var(--raise)}
details summary{cursor:pointer; list-style:none; min-height:44px; display:flex; align-items:center; gap:var(--s2);
  padding:0 var(--s3); font-size:var(--f3); font-weight:500; color:var(--ink-2)}
details summary::-webkit-details-marker{display:none}
details summary .chev{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;transition:transform 180ms ease;flex:none}
details[open] summary .chev{transform:rotate(90deg)}
details summary:hover{color:var(--ink)}
.details-body{padding:var(--s3); display:flex; flex-direction:column; gap:var(--s3); border-top:1px solid var(--line)}

/* ---------- kết quả ---------- */
.headline{padding:var(--s5); display:flex; flex-direction:column; gap:var(--s1); border-bottom:1px solid var(--line)}
.headline .k{font-size:var(--f1); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.headline .v{font-size:clamp(26px,4.6vw,var(--f7)); font-weight:600; letter-spacing:-.03em; line-height:1.08}
.headline .sub{font-size:var(--f3); color:var(--ink-2)}

.lines{padding:var(--s4) var(--s5); display:flex; flex-direction:column}
.line{padding:var(--s3) 0; border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}
.line .row{display:flex; align-items:baseline; gap:var(--s3)}
.line .name{font-size:var(--f4); font-weight:500; flex:1; min-width:0}
.line .amt{font-size:var(--f4); font-weight:600; flex:none}
.line .amt.zero{color:var(--ink-3); font-weight:500}
.line .amt.credit{color:var(--pos)}
.line .basis{font-size:var(--f2); color:var(--ink-3); line-height:1.5; margin-top:3px}
.badges{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.badge{display:inline-flex; align-items:center; gap:5px; flex:none;
  font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; border-radius:3px}
.badge svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.badge.ok{background:var(--pos-wash); color:var(--pos)}
.badge.who{background:var(--sunk); color:var(--ink-2)}
.badge.flag{background:var(--flag-wash); color:var(--flag)}

/* ---------- liên kết chéo sang công cụ khác ---------- */
.crosslink{margin:0 var(--s5) var(--s5); display:flex; gap:var(--s3); align-items:flex-start;
  border:1px solid var(--flag); background:var(--flag-wash); border-radius:var(--r); padding:var(--s3) var(--s4)}
.crosslink svg{width:18px;height:18px;flex:none;stroke:var(--flag);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.crosslink .t{font-size:var(--f3); line-height:1.5; color:var(--ink-2)}
.crosslink .t strong{color:var(--ink)}
.crosslink a{display:inline-flex; align-items:center; min-height:36px; margin-top:2px;
  font-weight:600; font-size:var(--f3); color:var(--flag)}

/* ---------- thanh tổng cố định (mobile) ---------- */
.dock{position:fixed; left:0; right:0; bottom:0; z-index:20; display:none;
  align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s3) var(--s5); padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom));
  background:var(--surface); border-top:1px solid var(--line-2); box-shadow:0 -6px 20px -12px rgba(0,0,0,.35)}
.dock .k{font-size:10px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3)}
.dock .v{font-size:var(--f6); font-weight:600; letter-spacing:-.02em}
.dock .st{font-size:var(--f2); font-weight:600; line-height:1.35; margin-top:2px}
.dock[data-state="ok"]  {border-top:3px solid var(--pos)}
.dock[data-state="warn"]{border-top:3px solid var(--hot)}
.dock[data-state="bad"] {border-top:3px solid var(--bad)}
.dock[data-state="ok"]   .st{color:var(--pos)}
.dock[data-state="warn"] .st{color:var(--hot)}
.dock[data-state="bad"]  .st{color:var(--bad)}
.dock .st:empty{display:none}
.dock .to{min-height:40px; display:inline-flex; align-items:center; padding:0 var(--s3); cursor:pointer;
  border:1px solid var(--line-2); border-radius:var(--r); background:var(--sunk); color:var(--ink-2);
  font-family:inherit; font-size:var(--f2); font-weight:600; white-space:nowrap}
@media (max-width:960px){ .dock{display:flex} }

/* ---------- chân trang ---------- */
footer{margin-top:var(--s7); padding-top:var(--s6); border-top:1px solid var(--line); color:var(--ink-3); font-size:var(--f2)}
footer h3{font-size:var(--f1); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); margin:0 0 var(--s3)}
footer ul{margin:0 0 var(--s4); padding-left:var(--s5); display:flex; flex-direction:column; gap:6px; max-width:80ch; line-height:1.6}
footer .note{border-left:2px solid var(--accent); padding:var(--s1) 0 var(--s1) var(--s3); color:var(--ink-2);
  font-size:var(--f3); max-width:74ch; line-height:1.6}

@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important; scroll-behavior:auto !important} }


/* ============================================================
   CSS riêng của từng công cụ.
   Để ở đây thay vì <style> trong Astro, vì Astro scope CSS mặc định
   mà DOM do JS sinh ra không mang thuộc tính scope -> style sẽ trượt.
   ============================================================ */
/* ---- riêng trang thuế & phí sang tên ---- */
.split{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); background:var(--sunk)}
.split > div{padding:var(--s3) var(--s5); display:flex; flex-direction:column; gap:2px}
.split > div + div{border-left:1px solid var(--line)}
.split .k{font-size:var(--f1); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.split .v{font-size:var(--f5); font-weight:600}

/* thanh tỷ trọng — biến danh sách khoản phí thành biểu đồ */
.mag{height:5px; background:var(--line); border-radius:3px; margin:10px 0 var(--s3); overflow:hidden}
.mag > span{display:block; height:100%; background:var(--bar); border-radius:3px; min-width:3px}
.mag > span.top{background:var(--accent)}

.compare{margin:0 var(--s5) var(--s5); border:1px solid var(--flag); border-radius:var(--r); background:var(--flag-wash)}
.compare .ch{display:flex; align-items:center; gap:var(--s2); padding:var(--s3) var(--s4) var(--s2);
  font-size:var(--f1); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--flag)}
.compare .ch svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.compare .cb{padding:0 var(--s4) var(--s4); display:flex; flex-direction:column; gap:var(--s2)}
.crow{display:flex; align-items:baseline; gap:var(--s2); font-size:var(--f3)}
.crow .lbl{flex:1; min-width:0; color:var(--ink-2)}
.crow .amt{font-weight:600; flex:none}
.verdict{font-size:var(--f3); color:var(--ink); border-top:1px solid var(--flag);
  padding-top:var(--s3); margin-top:2px; line-height:1.55}

/* ---- riêng trang tính lãi vay ---- */
.grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
@media (max-width:960px){ .grid{grid-template-columns:minmax(0,1fr)} }

.derived{display:grid; grid-template-columns:auto 1fr; gap:3px var(--s3); align-items:baseline;
  background:var(--accent-wash); border:1px solid var(--accent); border-radius:var(--r); padding:var(--s3) var(--s4)}
.derived .k{grid-column:1; font-size:var(--f1); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); white-space:nowrap}
.derived .v{grid-column:2; text-align:right; font-size:var(--f6); font-weight:600; color:var(--ink);
  letter-spacing:-.02em; white-space:nowrap}
.derived .s{grid-column:1 / -1; font-size:var(--f2); color:var(--ink-2)}
@media (max-width:400px){ .derived{grid-template-columns:1fr} .derived .v{grid-column:1; text-align:left} }

.chart{padding:var(--s4) var(--s5) var(--s2); border-bottom:1px solid var(--line)}
.chart svg{width:100%; height:auto; display:block}
.chart .grid{stroke:var(--line); stroke-width:1}
.chart .ax{fill:var(--ink-3); font-size:10px; font-family:"IBM Plex Mono", monospace}
.chart .ax.hi{fill:var(--hot); font-weight:600}
.chart .promo{fill:var(--pos-wash)}
.chart .mark{stroke:var(--hot); stroke-width:1.5; stroke-dasharray:3 3}
.chart .fill{fill:var(--accent-wash)}
.chart .plot{fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round}
.chart-key{display:flex; flex-wrap:wrap; gap:var(--s4); padding:0 var(--s5) var(--s3); font-size:var(--f2); color:var(--ink-3)}
.chart-key span{display:inline-flex; align-items:center; gap:6px}
.chart-key i{width:10px; height:10px; border-radius:2px; display:block}

.flags{display:flex; flex-direction:column; gap:var(--s2); padding:var(--s4) var(--s5) 0}
.flag{border-left:3px solid; padding:var(--s2) 0 var(--s2) var(--s3); border-radius:0 var(--r) var(--r) 0}
.flag .fh{font-size:var(--f3); font-weight:600}
.flag .fd{font-size:var(--f2); color:var(--ink-2); line-height:1.5; margin-top:2px}
.flag.ok{border-color:var(--pos); background:var(--pos-wash)}
.flag.ok .fh{color:var(--pos)}
.flag.warn{border-color:var(--hot); background:var(--hot-wash)}
.flag.warn .fh{color:var(--hot)}
.flag.bad{border-color:var(--bad); background:var(--bad-wash)}
.flag.bad .fh{color:var(--bad)}

.line.shock{background:var(--hot-wash); margin:0 calc(var(--s5) * -1); padding:var(--s3) var(--s5); border-bottom:0}
.line.shock .name, .line.shock .amt{color:var(--hot)}
.line.shock .basis{color:var(--ink-2)}
.empty{padding:var(--s6) var(--s5); color:var(--ink-3); font-size:var(--f3); margin:0}

.compare{margin:0 var(--s5) var(--s5); border:1px solid var(--line-2); border-radius:var(--r); background:var(--raise)}
.compare h4{margin:0; padding:var(--s3) var(--s4) var(--s2); font-size:var(--f1); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.cmp-body{padding:0 var(--s4) var(--s4)}
.crow{display:grid; grid-template-columns:1fr auto auto; gap:var(--s3); align-items:baseline;
  padding:var(--s2) 0; border-bottom:1px solid var(--line); font-size:var(--f3)}
.crow .lbl{color:var(--ink-2)}
.crow .amt{font-weight:600}
.crow .dd{color:var(--ink-3); font-size:var(--f2); min-width:8ch; text-align:right}
.crow.on{font-weight:600}
.crow.on .lbl, .crow.on .amt{color:var(--accent)}
.cnote{font-size:var(--f2); color:var(--ink-2); line-height:1.6; padding-top:var(--s3)}

/* bảng lãi suất tham khảo — bấm để điền */
.bankhead, .bank{display:grid; grid-template-columns:1.4fr .7fr .8fr .8fr; gap:var(--s2); align-items:baseline}
.bankhead{font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); padding:0 var(--s2) var(--s1)}
.bankhead span:not(:first-child){text-align:right}
.banklist{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.bank{width:100%; text-align:left; cursor:pointer; font-family:inherit; font-size:var(--f3);
  background:var(--surface); border:0; border-top:1px solid var(--line);
  padding:var(--s2) var(--s2); color:var(--ink); transition:background 140ms ease}
.bank:first-child{border-top:0}
.bank:hover{background:var(--accent-wash)}
.bank .bn{font-weight:600}
.bank .br, .bank .bm, .bank .bf{text-align:right; font-variant-numeric:tabular-nums;
  font-family:"IBM Plex Mono", ui-monospace, monospace}
.bank .br{font-weight:600; color:var(--accent)}
.bank .bm{color:var(--ink-2)}
.bank .bf.unk{color:var(--ink-3); font-size:var(--f2); font-family:inherit; font-style:italic}
.bank .bnote{grid-column:1 / -1; font-size:var(--f2); color:var(--ink-3); line-height:1.45; margin-top:2px}
#bank-picked:empty{display:none}
#bank-picked{border-left:2px solid var(--flag); padding-left:var(--s3); color:var(--ink-2)}

.sched{padding:0 var(--s5) var(--s5)}
.sched h4{margin:0 0 var(--s3); font-size:var(--f1); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2)}
.sched-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r)}
.sched table{border-collapse:collapse; width:100%; font-size:var(--f2); min-width:520px}
.sched th{text-align:right; padding:var(--s2) var(--s3); background:var(--sunk); color:var(--ink-3);
  font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap}
.sched th:first-child, .sched td:first-child{text-align:left}
.sched td{padding:var(--s2) var(--s3); text-align:right; border-top:1px solid var(--line); white-space:nowrap}
.sched td.strong{font-weight:600; color:var(--ink)}
.sched tr.uu td{background:var(--pos-wash)}
.sched tr.gap td{text-align:center; color:var(--ink-3); font-size:10px; background:var(--sunk); padding:3px}