/* Tab 🔤 Bảng IPA và 📌 Deadline – dùng chung token của style.css; thêm màu theo phương thức cấu âm */
:root{
  --mp:#2F64A8; --mp-s:#E3ECF8; --ma:#0F7C86; --ma-s:#DDF1F2; --mf:#2F7D4F; --mf-s:#E3F2E8;
  --mn:#B56A12; --mn-s:#FBEEDB; --ml:#8E2A5C; --ml-s:#F6E1EC; --mr:#6B4BB5; --mr-s:#ECE6F8;
  --vs:#2F64A8; --vs-s:#E3ECF8; --vl:#B56A12; --vl-s:#FBEEDB; --vd:#862E72; --vd-s:#F5E2EF;
  --ipa-red:#B23A30;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --mp:#86AEF0; --mp-s:#1B2A44; --ma:#5FCAD4; --ma-s:#123438; --mf:#6CC08E; --mf-s:#173326;
    --mn:#E9B062; --mn-s:#3A2A14; --ml:#E28AB6; --ml-s:#3A1C2C; --mr:#B9A2F0; --mr-s:#2A2244;
    --vs:#86AEF0; --vs-s:#1B2A44; --vl:#E9B062; --vl-s:#3A2A14; --vd:#E08BCB; --vd-s:#3A1C33; --ipa-red:#F08C80;
  }
}
:root[data-theme="dark"]{
  --mp:#86AEF0; --mp-s:#1B2A44; --ma:#5FCAD4; --ma-s:#123438; --mf:#6CC08E; --mf-s:#173326;
  --mn:#E9B062; --mn-s:#3A2A14; --ml:#E28AB6; --ml-s:#3A1C2C; --mr:#B9A2F0; --mr-s:#2A2244;
  --vs:#86AEF0; --vs-s:#1B2A44; --vl:#E9B062; --vl-s:#3A2A14; --vd:#E08BCB; --vd-s:#3A1C33; --ipa-red:#F08C80;
}
.ipa .mp{--c:var(--mp);--cs:var(--mp-s)} .ipa .ma{--c:var(--ma);--cs:var(--ma-s)} .ipa .mf{--c:var(--mf);--cs:var(--mf-s)}
.ipa .mn{--c:var(--mn);--cs:var(--mn-s)} .ipa .ml{--c:var(--ml);--cs:var(--ml-s)} .ipa .mr{--c:var(--mr);--cs:var(--mr-s)}
.ipa .mv-short{--c:var(--vs);--cs:var(--vs-s)} .ipa .mv-long{--c:var(--vl);--cs:var(--vl-s)} .ipa .mv-diph{--c:var(--vd);--cs:var(--vd-s)}
.ipa{font-family:"Be Vietnam Pro","Noto Sans",sans-serif}
.ipa-head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.ipa-head>div:first-child{flex:1 1 320px;min-width:0}
.ipa-prog{min-width:170px;font-size:13px;color:var(--muted)}
.ipa-prog b{color:var(--accent-dark);font-size:18px}
.ipa-prog .bar{margin-top:6px}
.ipa-seg{display:flex;gap:6px;flex-wrap:wrap;padding:5px;border-radius:14px;background:var(--sunk);border:1px solid var(--border);margin-bottom:16px}
.ipa-seg button{font:inherit;font-size:13.5px;font-weight:700;padding:9px 14px;border-radius:10px;border:0;background:transparent;color:var(--muted);cursor:pointer;flex:1 1 auto;min-width:0}
.ipa-seg button:hover{color:var(--ink)}
.ipa-seg button[aria-selected="true"]{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow)}
.ipa-legend{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px;font-size:12.5px}
.ipa-legend .lg{padding:3px 11px;border-radius:999px;background:var(--cs);color:var(--c);font-weight:700;border:1px solid color-mix(in srgb,var(--c) 35%,transparent)}
.ipa-legend .lg2{color:var(--muted);margin-left:auto}
.ipa-rowt{font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:16px 0 8px}
.ipa-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.ipa-grid.v{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.ipa-cell{position:relative;font:inherit;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1px;padding:12px 6px 10px;border-radius:14px;
  background:var(--cs);border:1.5px solid color-mix(in srgb,var(--c) 30%,transparent);color:var(--ink);cursor:pointer;min-width:0;transition:transform .12s,box-shadow .12s}
.ipa-cell:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.ipa-cell.on{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 28%,transparent)}
.ipa-cell .sym{font-family:"Noto Sans","Be Vietnam Pro",sans-serif;font-size:30px;font-weight:700;line-height:1.15;color:var(--c)}
.ipa-cell .kw{font-size:13px;font-weight:700;letter-spacing:.02em;overflow-wrap:anywhere}
.ipa-cell .kw u{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;color:var(--ipa-red)}
.ipa-cell .hint{font-size:10.5px;line-height:1.3;color:var(--ipa-red);margin-top:4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ipa-cell .vc{position:absolute;top:6px;left:8px;font-size:11px;color:var(--c)}
.ipa-cell .ok-m{position:absolute;top:4px;right:7px;font-size:12px;font-weight:800;color:var(--ok)}
.ipa-cell.done{border-style:solid}
.ipa-vwrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:start}
.ipa-vtog{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.ipa-vq{width:100%;height:auto;max-width:520px;background:var(--card);border:1px solid var(--border);border-radius:16px;display:block}
.ipa-vq .vq{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.ipa-vq .vg{stroke:var(--border);stroke-width:1.2;stroke-dasharray:4 5}
.ipa-vq .vt{font-size:10.5px;fill:var(--muted);font-family:"Be Vietnam Pro",sans-serif}
.ipa-vq .vd,.ipa-vq .vdp{cursor:pointer;outline:none}
.ipa-vq .vd circle{fill:var(--card);stroke:var(--accent);stroke-width:1.5}
.ipa-vq .vd.rd circle{stroke-width:3.4}
.ipa-vq .vd text,.ipa-vq .vdp text{font-family:"Noto Sans",sans-serif;font-size:16px;font-weight:700;fill:var(--ink)}
.ipa-vq .vd:hover circle,.ipa-vq .vd:focus-visible circle,.ipa-vq .vd.on circle{fill:var(--accent);}
.ipa-vq .vd:hover text,.ipa-vq .vd.on text{fill:var(--on-accent)}
.ipa-vq .vdp .ln{fill:none;stroke:var(--vd);stroke-width:2.6}
.ipa-vq .vdp .hit{fill:none;stroke:transparent;stroke-width:16}
.ipa-vq .vdp.off .ln{stroke-width:1.6;opacity:.45}.ipa-vq .vdp.off .st{opacity:.45}
.ipa-vq .vdp .st{fill:var(--vd)}
.ipa-vq .vdp.off:hover .ln,.ipa-vq .vdp.off:focus-visible .ln{opacity:1} .ipa-vq .vdp .lb{fill:var(--card);stroke:var(--vd);stroke-width:1.2}
.ipa-vq .ahp{fill:var(--vd)}
.ipa-vq .vdp:hover .lb,.ipa-vq .vdp.on .lb,.ipa-vq .vdp:focus-visible .lb{fill:var(--vd-s);stroke-width:2.4}
.ipa-tb{width:100%;border-collapse:collapse;font-size:13.5px}
.ipa-tb th,.ipa-tb td{border:1px solid var(--border);padding:8px 10px;text-align:left;vertical-align:top}
.ipa-tb thead th{background:var(--sunk);font-size:12px}
.ipa-chart th{background:var(--sunk);font-size:12px;line-height:1.3;white-space:nowrap}
.ipa-chart td{text-align:center;min-width:76px;height:56px;vertical-align:middle;background:var(--card)}
.ipa-chart tbody tr th{background:var(--cs);color:var(--c)}
.ipa-ch{font-family:"Noto Sans",sans-serif;font-size:19px;min-width:38px;margin:2px;padding:5px 8px;border-radius:9px;border:1.5px solid var(--c, var(--accent));background:var(--cs, var(--accent-soft));color:var(--c, var(--accent-dark));cursor:pointer}
.ipa-ch.vd1{font-weight:800}
.ipa-ch.vd0{font-weight:400;background:transparent;border-style:dashed}
.ipa-ch:hover{background:var(--accent);color:var(--on-accent);border-color:transparent}
.ipa-pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.ipa-pairs .pr{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--border);border-radius:12px;background:var(--card)}
.ipa-pairs small{flex-basis:100%;color:var(--muted);font-size:12px}
.ipa-h3{font-size:14px;margin:16px 0 8px;color:var(--accent-dark)}
.ipa-theory{display:grid;gap:10px}
.ipa-d{border:1px solid var(--border);border-radius:14px;background:var(--card);overflow:hidden}
.ipa-d summary{cursor:pointer;padding:13px 16px;font-weight:700;color:var(--accent-dark);list-style:none}
.ipa-d summary::-webkit-details-marker{display:none}
.ipa-d summary::before{content:"▸";display:inline-block;margin-right:8px;transition:transform .15s}
.ipa-d[open] summary::before{transform:rotate(90deg)}
.ipa-db{padding:2px 18px 16px;font-size:14.5px}
.ipa-db p,.ipa-db ul,.ipa-db ol{margin:8px 0}
.ipa-db li{margin:4px 0}
.ipa-s{font-family:"Noto Sans",sans-serif;font-weight:700;color:var(--accent-dark);background:var(--accent-soft);padding:0 6px;border-radius:6px;white-space:nowrap}
.ipa-warn{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 35%,var(--border));font-size:13.5px}
.ipa-det{margin-top:18px;scroll-margin-top:70px}
.ipa-dh{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.ipa-big{flex:0 0 auto;min-width:78px;height:78px;padding:0 10px;display:flex;align-items:center;justify-content:center;border-radius:20px;background:var(--cs);border:2px solid var(--c);color:var(--c);font-family:"Noto Sans",sans-serif;font-size:42px;font-weight:700}
.ipa-dt{flex:1;min-width:0}
.ipa-kw{font-size:20px;font-weight:800;margin-bottom:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ipa-kw u{color:var(--ipa-red);text-decoration-thickness:2.5px;text-underline-offset:4px}
.ipa-x{align-self:flex-start;border:0;background:var(--sunk);color:var(--ink);width:34px;height:34px;border-radius:50%;font-size:20px;cursor:pointer;line-height:1}
.ipa-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.ipa-how{margin:0;padding-left:22px}.ipa-how li{margin:5px 0}
.ipa-vi,.ipa-err{margin-top:10px;padding:10px 12px;border-radius:12px;font-size:14px}
.ipa-vi{background:var(--ok-soft)}.ipa-err{background:var(--bad-soft)}
.ipa-ex{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}
.ipa-ex .pos{flex:0 0 66px;font-size:12px;color:var(--muted);font-weight:700}
.wd{font:inherit;font-size:13.5px;padding:5px 10px;border-radius:999px;border:1px solid var(--border);background:var(--sunk);color:var(--ink);cursor:pointer}
.wd:hover{border-color:var(--accent);background:var(--accent-soft)}
.wd i{font-family:"Noto Sans",sans-serif;font-style:normal;color:var(--accent-dark);margin-left:3px}
.ipa-mp{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0}
.mres{flex-basis:100%;font-size:13px}.mres.ok{color:var(--ok)}.mres.bad{color:var(--bad)}
.ipa-act{margin-top:16px;gap:8px;flex-wrap:wrap}
.ipa-toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--espresso);color:var(--bg);padding:10px 16px;border-radius:12px;z-index:50;font-size:13px}
@media (max-width:860px){
  .ipa-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ipa-vwrap,.ipa-cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .ipa-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ipa-grid.v{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ipa-seg button{flex:1 1 45%}
  .ipa-big{min-width:62px;height:62px;font-size:32px}
}
/* ---- 📌 Deadline ---- */
.tk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.tk-dl{padding:14px 16px;border-radius:16px;border:1px solid var(--border);background:var(--card);display:flex;flex-direction:column;gap:2px}
.tk-dl .d{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.tk-dl .n{font-weight:800;font-size:16px}
.tk-dl .cd{margin-top:6px;font-weight:700}
.tk-dl.soon{border-color:var(--warn);background:var(--warn-soft)}
.tk-dl.past{opacity:.6}
.tk-sec{margin-top:22px}
.tk-box{padding:16px 18px;border-radius:16px;border:1px solid var(--border);background:var(--card);margin-top:10px}
.tk-box h3{margin:0 0 8px;font-size:15px;color:var(--accent-dark)}
.tk-box ul,.tk-box ol{margin:6px 0;padding-left:22px}.tk-box li{margin:4px 0}
.tk-txt{white-space:pre-wrap;line-height:1.7;font-size:14.5px;margin:8px 0}
.tk-sample{border-left:3px solid var(--accent);padding-left:12px;margin:10px 0}