/* NGÂN HÀNG Ý TƯỞNG — phong cách hệ thống nghiệp vụ (tham chiếu capdo/nq57) */
:root{
  --font-term:'JetBrains Mono','Fira Code',monospace;
  --bg:#EEF2F6;--panel:#FFFFFF;--panel-sub:#F7F9FC;--border:#D9E1EA;
  --text:#1F2937;--muted:#64748B;
  --blue:#2563EB;--blue-glow:rgba(37,99,235,.10);
  --green:#1F7A35;--green-bg:#F7FBF6;--green-bd:#CFE6D3;
  --amber:#B45309;--amber-bg:#FFF9F2;--amber-bd:#E8D8C1;
  --red:#B91C1C;--red-bg:#FEF2F2;--red-bd:#FECACA;
  --purple:#6D28D9;--purple-bg:#F6F3FB;--purple-bd:#DDD3EE;
  --cyan:#0284C7;--cyan-bg:#F0F9FF;--cyan-bd:#BAE6FD;
  --radius:10px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;overflow-x:hidden}
body{font-family:var(--font-term);background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;font-size:13px;line-height:1.45}
button,input,select,textarea{font-family:var(--font-term)}
/* ===== TOPBAR ===== */
.topbar{position:sticky;top:0;z-index:50;background:var(--panel);border-bottom:1px solid var(--border)}
.header-inner{max-width:1240px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:14px}
.back{color:var(--muted);text-decoration:none;font-size:18px;padding:4px 8px;border:1px solid var(--border);border-radius:8px;background:var(--panel-sub)}
.back:hover{background:var(--blue-glow);color:var(--blue);border-color:var(--blue)}
.emblem{width:40px;height:40px;border-radius:8px;overflow:hidden;border:1px solid var(--border);flex-shrink:0}
.emblem img{width:100%;height:100%;object-fit:cover}
.titles h1{font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--text)}
.titles p{font-size:9.5px;color:var(--muted);font-weight:500;letter-spacing:.06em;margin-top:2px}
.spacer{flex:1}
/* ===== BUTTONS ===== */
.btn{height:34px;border-radius:8px;border:1px solid var(--border);padding:0 14px;font-size:11.5px;font-weight:600;letter-spacing:.03em;cursor:pointer;display:inline-flex;align-items:center;gap:6px;background:var(--panel);color:var(--text);transition:.15s}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:#1d4ed8}
.btn.ghost{background:var(--panel-sub);color:var(--muted)}
.btn.ghost:hover{border-color:var(--blue);color:var(--blue)}
.whoami{font-size:11px;color:var(--green);font-weight:600}
/* ===== NOTICE ===== */
.notice{margin:12px auto 0;max-width:1200px;padding:9px 14px;border-radius:8px;font-size:12px;font-weight:600}
.notice.ok{background:var(--green-bg);color:var(--green);border:1px solid var(--green-bd)}
.notice.err{background:var(--red-bg);color:var(--red);border:1px solid var(--red-bd)}
/* ===== CONTAINER ===== */
.container{max-width:1240px;margin:0 auto;padding:20px 18px 60px;flex:1}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.crumb{font-size:10px;color:var(--muted);font-weight:600;letter-spacing:.08em}
.crumb a{color:var(--blue);text-decoration:none}
.page-head h2{font-size:19px;font-weight:700;letter-spacing:.02em;margin-top:6px}
.page-head p{font-size:11.5px;color:var(--muted);margin-top:4px;max-width:620px;line-height:1.6}
.head-meta{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px 16px}
.head-meta .label{font-size:9.5px;color:var(--muted);letter-spacing:.1em;font-weight:600}
.head-meta .big-num{font-size:26px;font-weight:700;color:var(--blue)}
/* ===== KPI ===== */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
.kpi{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;cursor:pointer;transition:.15s;border-left:4px solid var(--blue)}
.kpi:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(15,23,42,.06)}
.kpi.active{outline:2px solid var(--blue);outline-offset:1px}
.kpi .k-label{font-size:8.5px;color:var(--muted);letter-spacing:.08em;font-weight:600;display:block;white-space:nowrap}
.kpi b{font-size:24px;font-weight:700;display:block;margin-top:4px;line-height:1.1}
.kpi.blue{border-left-color:var(--blue)}.kpi.blue b{color:var(--blue)}
.kpi.amber{border-left-color:var(--amber)}.kpi.amber b{color:var(--amber)}
.kpi.green{border-left-color:var(--green)}.kpi.green b{color:var(--green)}
.kpi.red{border-left-color:var(--red)}.kpi.red b{color:var(--red)}
/* ===== CHARTS ===== */
.charts-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.chart-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.chart-card h3{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}
.chart-wrap{height:210px;position:relative}
/* ===== TOOLBAR ===== */
.toolbar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.search{flex:1;min-width:220px;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:0 12px;height:36px}
.search input{border:none;outline:none;flex:1;font-size:12px;font-weight:500;background:transparent;color:var(--text)}
.search span{color:var(--muted);font-size:13px}
.toolbar select{height:36px;border:1px solid var(--border);border-radius:8px;background:var(--panel);padding:0 10px;font-size:10.5px;font-weight:600;color:var(--text);cursor:pointer}
.toolbar select:focus{outline:none;border-color:var(--blue)}
/* ===== TABLE ===== */
.table-panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.table-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--panel-sub)}
.table-head h3{font-size:11.5px;font-weight:700;letter-spacing:.06em}
.table-head .count{font-size:11px;color:var(--blue);font-weight:600;background:var(--blue-glow);padding:3px 10px;border-radius:999px}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:1080px}
thead th{background:var(--panel-sub);color:var(--muted);font-size:9px;text-transform:none;letter-spacing:.07em;font-weight:700;padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;cursor:pointer;user-select:none}
thead th:hover{color:var(--blue)}
tbody td{padding:10px 12px;border-bottom:1px solid #E8EDF3;font-size:11.5px;vertical-align:middle}
tbody tr{cursor:pointer;transition:background .12s}
tbody tr:hover{background:#F4F8FF}
tbody tr:last-child td{border-bottom:none}
td .nm{font-weight:600;line-height:1.4;max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td .muted{color:var(--muted);font-size:10px}
.badge{display:inline-block;padding:3px 9px;border-radius:5px;font-size:9.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.badge.new{background:var(--cyan-bg);color:var(--cyan);border:1px solid var(--cyan-bd)}
.badge.review{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-bd)}
.badge.trial{background:var(--purple-bg);color:var(--purple);border:1px solid var(--purple-bd)}
.badge.done{background:var(--green-bg);color:var(--green);border:1px solid var(--green-bd)}
.badge.spread{background:#F5F3FF;color:#6D28D9;border:1px solid #DDD3EE}
.badge.supplement{background:var(--red-bg);color:var(--red);border:1px solid var(--red-bd)}
.impact-hi{color:var(--green);font-weight:700}
.impact-mid{color:var(--amber);font-weight:700}
.impact-lo{color:var(--muted);font-weight:700}
.empty{text-align:center;padding:50px 20px;color:var(--muted);font-size:12px;letter-spacing:.05em}
/* ===== MODAL ===== */
.modal{position:fixed;inset:0;background:rgba(15,23,42,.5);display:none;align-items:center;justify-content:center;padding:16px;z-index:80}
.modal.show{display:flex}
.modal-box{width:min(820px,100%);max-height:92vh;overflow-y:auto;background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:0 22px 60px rgba(15,23,42,.25);animation:pop .18s ease}
.modal-box.small{width:min(400px,100%)}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--panel);z-index:2;border-radius:14px 14px 0 0}
.modal-head h2{font-size:13px;font-weight:700;letter-spacing:.05em}
.x{width:28px;height:28px;border:none;border-radius:6px;background:var(--panel-sub);color:var(--muted);cursor:pointer;font-size:12px}
.x:hover{background:var(--red-bg);color:var(--red)}
.modal-body{padding:18px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field.full{grid-column:1/-1}
.field label{display:block;font-size:9.5px;font-weight:700;color:var(--muted);letter-spacing:.06em;margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--border);border-radius:8px;padding:9px 11px;font-size:12px;font-weight:500;color:var(--text);background:var(--panel)}
.field textarea{min-height:72px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-glow)}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
/* ===== DETAIL ===== */
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px;padding:6px 0;border-bottom:1px dashed var(--border);font-size:12px}
.kv b{color:var(--muted);font-weight:600}
.kv span{font-weight:500;white-space:pre-line;line-height:1.55}
.block{margin-top:14px}
.block .blabel{font-size:9.5px;font-weight:700;color:var(--blue);letter-spacing:.08em;margin-bottom:5px}
.block .bcontent{font-size:12.5px;line-height:1.65;color:var(--text);background:var(--panel-sub);border:1px solid var(--border);border-radius:8px;padding:11px 13px;white-space:pre-line}
.section-title{margin:20px 0 4px;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--text);border-bottom:1px solid var(--border);padding-bottom:6px}
.log-item{padding:8px 0;border-bottom:1px dashed var(--border);display:flex;gap:10px}
.log-item:last-child{border:none}
.log-item .ldate{font-size:9.5px;font-weight:700;color:var(--blue);background:var(--blue-glow);border-radius:4px;padding:2px 7px;height:fit-content;white-space:nowrap}
.log-item p{font-size:12px;line-height:1.55;color:var(--text)}
.admin-zone{margin-top:16px;background:var(--panel-sub);border:1px solid var(--border);border-radius:10px;padding:14px}
.admin-zone h4{font-size:11px;font-weight:700;margin-bottom:10px;letter-spacing:.05em}
.admin-zone select,.admin-zone textarea{width:100%;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:12px;margin-bottom:8px;background:var(--panel)}
.admin-zone textarea{min-height:60px;resize:vertical}
.admin-zone .row{display:flex;gap:6px;flex-wrap:wrap}
.dbtn{height:30px;border-radius:6px;border:1px solid var(--border);background:var(--panel);padding:0 11px;font-size:10.5px;font-weight:600;cursor:pointer}
.dbtn:hover{border-color:var(--blue);color:var(--blue)}
.dbtn.danger{color:var(--red);border-color:var(--red-bd)}
.dbtn.danger:hover{background:var(--red-bg)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 12px) 50%,calc(100% - 7px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:26px}
/* ===== RESPONSIVE ===== */
@media(max-width:1080px){.kpis{grid-template-columns:repeat(3,1fr)}.charts-row{grid-template-columns:1fr}}
@media(max-width:760px){.header-inner{padding:9px 12px}.titles p{display:none}.kpis{grid-template-columns:repeat(2,1fr)}.page-head h2{font-size:16px}.btn{font-size:10px;padding:0 9px}.form-grid{grid-template-columns:1fr}.toolbar select{flex:1;min-width:130px}}