:root{
  --brand:#5a3fa0;--brand2:#7a3fb8;--accent:#7a3fb8;
  --ink:#2b2b35;--muted:#7b7b88;--line:#e7e7ef;--bg:#f1f2f7;--surface:#fff;
  --ok:#22a861;--okd:#1c8f52;--warn:#e23b3b;--blue:#2f6df6;
  --radius:12px;--r-sm:8px;
}
/* trạng thái */
.hk-state{padding:50px 20px;text-align:center;color:var(--muted)}
.hk-state .sp{display:inline-block;width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:hkspin .8s linear infinite}
@keyframes hkspin{to{transform:rotate(360deg)}}
.hk-retry{margin-top:12px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 16px;cursor:pointer;color:var(--accent);font-weight:600}
.hk-retry:hover{border-color:var(--accent)}
/* toast */
.hk-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--ok);color:#fff;padding:14px 24px;border-radius:10px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.2);opacity:0;transition:.25s;z-index:9999;max-width:90%}
.hk-toast.show{opacity:1;transform:translate(-50%,0)}
.hk-toast.err{background:var(--warn)}
/* modal */
.hk-ov{position:fixed;inset:0;background:rgba(20,20,30,.45);display:none;align-items:center;justify-content:center;z-index:9998;padding:16px}
.hk-ov.show{display:flex}
.hk-md{background:#fff;border-radius:16px;width:min(420px,100%);box-shadow:0 24px 60px rgba(0,0,0,.3);overflow:hidden}
.hk-md h3{margin:0;padding:18px 20px;font-size:16px;border-bottom:1px solid var(--line)}
.hk-md .bd{padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.hk-md .bd label{font-size:13px;color:var(--muted)}
.hk-md .bd input,.hk-md .bd select{border:1px solid var(--line);border-radius:8px;padding:11px 12px;font-size:15px;outline:none;width:100%}
.hk-md .bd input:focus{border-color:var(--accent)}
.hk-md .quick{display:flex;gap:6px;flex-wrap:wrap}
.hk-md .quick button{flex:1;border:1px solid var(--line);background:#fafafe;border-radius:8px;padding:8px;cursor:pointer;font-size:13px;font-weight:600}
.hk-md .quick button:hover{border-color:var(--accent);color:var(--accent)}
.hk-md .ft{display:flex;gap:10px;padding:14px 20px;border-top:1px solid var(--line)}
.hk-md .ft button{flex:1;border:none;border-radius:9px;padding:12px;font-weight:700;cursor:pointer;font-size:14px}
.hk-md .ft .cancel{background:#eee;color:#444}
.hk-md .ft .ok{background:var(--ok);color:#fff}
.hk-md .ft .ok:hover{background:var(--okd)}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}