:root{
  /* TOKEN TRÍCH TỪ NHANH THẬT (getComputedStyle 10/07/2026):
     topbar vàng nhạt + logo HK cao 52px · nền trang #e2e6ed · chữ #1f2937 · font Inter 14px
     link/active XANH DƯƠNG · nút chính XANH LÁ #28a745 · Lọc teal #26a69a · input cao 42px bo 6px */
  --brand:#F5C518;--brand2:#E8B400;--accent:#2563eb; /* vàng Hamster (bộ nhận diện HK, giống hkbot hk-tokens.css) */
  --hk-yl:#2B2F3A;--hk-yl2:#2B2F3A;--hk-ink:#FFFFFF; /* thanh trên cùng tối kiểu Nhanh (trước: vàng nhạt #FFFBEB) */
  --ink:#1f2937;--muted:#6b7280;--line:#e5e7eb;--bg:#e2e6ed;--surface:#fff;
  --ok:#28a745;--okd:#1f8b38;--warn:#e23b3b;--blue:#2563eb;--teal:#26a69a;
  --radius:10px;--r-sm:6px;
  --font:Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans',sans-serif;
}
body{font-family:var(--font)}
/* ===== BỘ DA NHANH dùng chung (.nv-*) ===== */
.nv-top{height:52px;background:linear-gradient(90deg,var(--hk-yl),var(--hk-yl2));color:var(--hk-ink);display:flex;align-items:center;gap:12px;padding:0 16px;font-size:14px}
.nv-top .crumb{opacity:.92;font-size:13.5px}
.nv-top .right{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13.5px}
.nv-menu{background:#fff;border-bottom:1px solid var(--line);display:flex;gap:2px;padding:0 10px;overflow-x:auto}
.nv-menu>a{padding:12px 15px;color:var(--ink);font-size:13.6px;white-space:nowrap;text-decoration:none;cursor:pointer;border-radius:8px 8px 0 0}
.nv-menu>a:hover{background:#f3f4f6}
.nv-menu>a.on{background:#eef2f7;color:var(--blue);font-weight:700}
.nv-btn{border:none;border-radius:6px;padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer;color:#fff;background:var(--ok)}
.nv-btn:hover{filter:brightness(1.05)}
.nv-btn.loc{background:var(--teal)}
.nv-btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.nv-input,.nv-select{border:1px solid #d1d5db;border-radius:6px;padding:9px 13px;font-size:14px;height:42px;background:#fff;color:var(--ink);font-family:inherit}
.nv-input:focus,.nv-select:focus{outline:none;border-color:var(--blue)}
.nv-filter{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;padding:12px 0}
.nv-table{width:100%;border-collapse:collapse;font-size:14px}
.nv-table th{text-align:left;font-weight:600;color:var(--ink);padding:8px;border-bottom:1px solid var(--line);background:#f9fafb;white-space:nowrap}
.nv-table td{padding:8px;border-bottom:1px solid #f1f2f6;vertical-align:middle}
.nv-table tr:hover td{background:#f8fafc}
.nv-table a{color:var(--blue);text-decoration:none}
.nv-money{color:var(--ok);font-weight:600}
.nv-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line)}
.nv-tabs>*{padding:12px 16px;font-size:14px;color:var(--ink);cursor:pointer;border-bottom:2px solid transparent;background:none;border-top:none;border-left:none;border-right:none}
.nv-tabs>.on{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}
/* 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}

/* === Nhận diện Hamster Kingdom: thanh trên cùng tối (giống Nhanh) + logo thật (ghi đè style riêng từng trang) === */
.top{background:linear-gradient(90deg,var(--hk-yl),var(--hk-yl2))!important;color:var(--hk-ink)!important;border-bottom:0}
.top b{color:var(--hk-ink)!important}
.top .back{color:var(--hk-ink)!important;background:rgba(255,255,255,.12)!important}
.top .back:hover{background:rgba(255,255,255,.22)!important}
.top .acc{color:var(--hk-ink)!important}
.hk-logo{height:34px;width:auto;display:block}

/* === ĐIỆN THOẠI (<=900px): ô nhập 16px (iOS không tự phóng to), nút >=44px, modal cuộn được khi bàn phím bật === */
@media(max-width:900px){
  .nv-input,.nv-select{font-size:16px;min-height:44px}
  .nv-btn{min-height:44px}
  .nv-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nv-tabs::-webkit-scrollbar{display:none}
  .nv-tabs>*{white-space:nowrap;flex:none;min-height:44px}
  .nv-menu>a{min-height:44px;display:inline-flex;align-items:center}
  .hk-toast{max-width:calc(100vw - 32px);bottom:calc(16px + env(safe-area-inset-bottom))}
  .hk-ov{align-items:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:12px 8px calc(12px + env(safe-area-inset-bottom))}
  .hk-md{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);display:flex;flex-direction:column;margin:auto 0}
  .hk-md h3{flex:none}
  .hk-md .bd{overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto;min-height:0}
  .hk-md .bd input,.hk-md .bd select,.hk-md .bd textarea{font-size:16px;min-height:44px}
  .hk-md .quick button{min-height:44px}
  .hk-md .ft{flex:none}
  .hk-md .ft button{min-height:44px}
}