:root{
  --vb-blue:#0000FF;
  --vb-blue-700:#0000e6;
  --vb-blue-50:#f0f3ff;
  --vb-text:#0f172a;
  --vb-muted:#64748b;
  --vb-border:#e5e7eb;
  --vb-danger:#ef4444;
}
.vb-card{border-radius:18px;border:1px solid var(--vb-border);padding:18px;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.vb-form .field label{font-weight:700;color:#334155}
.vb-form input[type="text"]{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;outline:none;transition:border .15s, box-shadow .15s}
.vb-form input[type="text"]:focus{border-color:var(--vb-blue);box-shadow:0 0 0 3px rgba(0,0,255,.18)}
.vb-row{display:flex;gap:12px;flex-wrap:wrap}
.vb-row .field{flex:1;min-width:220px}
.vb-btn{background:var(--vb-blue);color:#fff;border:none;border-radius:12px;padding:10px 16px;cursor:pointer;font-weight:800}
.vb-btn:hover{background:var(--vb-blue-700)}
.vb-help{margin-top:6px;color:#475569}
.vb-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.vb-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:14px;overflow:hidden;margin-top:14px}
.vb-table thead{background:linear-gradient(90deg, var(--vb-blue), #3a3aff);color:#fff}
.vb-table th,.vb-table td{padding:12px;border-bottom:1px solid #eef2f7;vertical-align:top}
.vb-table tbody tr:nth-child(odd){background:#fafbff}
.vb-table tbody tr:hover{background:#f5f7ff}
.vb-user{display:flex;align-items:center;gap:10px}
.vb-av{width:34px;height:34px;border-radius:50%;background:var(--vb-blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;letter-spacing:0.5px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.1)}
.vb-user-meta{line-height:1.2}
.vb-name{font-weight:800;color:#0f172a}
.vb-sub{font-size:12px;color:#64748b}
.vb-chip{display:inline-block;border-radius:999px;padding:6px 10px;font-weight:800;font-size:12px;border:1px solid transparent}
.vb-chip.gioi{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.vb-chip.kha{background:#fff7ed;color:#9a3412;border-color:#fed7aa}
.vb-chip.trungbinh{background:#f1f5f9;color:#334155;border-color:#cbd5e1}
.vb-chip.yeu{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.vb-chip.khac{background:#eef2ff;color:#3730a3;border-color:#c7d2fe}
.vb-actions .btn-toggle{border-radius:12px;padding:8px 14px;border:1.5px solid var(--vb-blue);cursor:pointer;background:#fff;color:var(--vb-blue);font-weight:800}
.vb-actions .btn-toggle.is-open{background:var(--vb-danger);border-color:var(--vb-danger);color:#fff}
.vb-detail-row td{background:#f0f4ff;padding:0;border-bottom:none}
.vb-detail-card{padding:16px 16px 8px;border-top:4px solid var(--vb-blue);background:#f8faff}
.vb-detail-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.vb-detail-badge{display:inline-flex;align-items:center;gap:6px;background:#e9edff;border:1px solid #d7ddff;color:#001a7a;padding:6px 12px;border-radius:999px;font-weight:800}
.vb-section{margin-top:10px}
.vb-section-title{font-weight:900;color:#1e293b;margin:8px 0 8px 0}
.vb-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vb-kv{background:#ffffff;border:1px dashed #dbeafe;border-radius:12px;padding:10px}
.vb-kv .k{font-size:12px;color:#64748b;margin-bottom:4px}
.vb-kv .v{font-weight:800;color:#0f172a}
.vb-meter{margin-top:8px;height:8px;background:#e5e7eb;border-radius:999px;overflow:hidden}
.vb-meter span{display:block;height:100%;background:var(--vb-blue)}
.vb-side{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-top:12px}
.vb-qr{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:10px;display:inline-block}
.vb-qr img{width:140px;height:140px;object-fit:contain}
.vb-actions2{display:flex;gap:10px;flex-wrap:wrap}
.vb-outline{background:#fff;color:#0000FF;border:1.5px solid #0000FF;border-radius:12px;padding:9px 14px;font-weight:800}
.vb-outline:hover{background:#eef2ff}
.vb-note{font-size:12px;color:#64748b}
.vb-spacer{height:6px}
.vb-collapse{overflow:hidden;max-height:0;transition:max-height .32s ease}
.vb-collapse.open{max-height:1400px}
@media (max-width: 768px){
  .vb-table{width:100%; border-radius:0; border-spacing:0}
  .vb-table thead{display:none}
  .vb-table tbody{display:block}
  .vb-table tr{display:block; background:#fff; border:1px solid #e5e7eb; border-radius:16px; margin:12px 0; box-shadow:0 4px 10px rgba(0,0,0,.04); overflow:hidden}
  .vb-table td{display:flex; gap:8px; justify-content:space-between; align-items:flex-start; padding:10px 12px; border-bottom:1px solid #eef2f7}
  .vb-table td:last-child{border-bottom:none}
  .vb-table td::before{content:attr(data-label); font-weight:900; color:#334155; flex:0 0 46%; max-width:52%; padding-right:8px}
  .vb-table td > *{flex:1}
  .vb-actions{ text-align:left !important }
  .vb-detail-row td::before{content:"" !important}
  .vb-detail-row td{display:block}
  .vb-detail-card{border-top-width:0}
}
@media (max-width:800px){ .vb-detail-grid{grid-template-columns:1fr} }
@media (max-width:640px){
  .vb-row{flex-direction:column}
  .vb-row .field{min-width:100%}
  .vb-detail-head{flex-direction:column;align-items:flex-start}
  .vb-side{flex-direction:column}
  .vb-card{padding:14px}
}