:root { --bg:#0b1020; --panel:#121a2f; --muted:#a8b3cf; --text:#e6ebff; --primary:#5b8cff; --accent:#22d3ee; --danger:#ff6b6b; }
    *{box-sizing:border-box}
    body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(180deg,#0b1020,#0d1430 40%,#0e1738);color:var(--text)}
    .container{max-width:1180px;margin:28px auto;padding:0 16px}
    .toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
    .card{background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.02));backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.06);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,0.25)}
    .panel{padding:16px}
    input,select{background:#0b1327;border:1px solid #203258;color:var(--text);padding:10px 12px;border-radius:12px}
    input::placeholder{color:#7a89ab}
    button{background:var(--primary);color:#fff;border:0;padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:600;box-shadow:0 6px 16px rgba(91,140,255,.25)}
    button.ghost{background:#17203a;color:var(--muted);border:1px solid #26365a}
    button.danger{background:var(--danger)}
    table{width:100%;border-collapse:collapse}
    th,td{padding:12px 10px;border-bottom:1px solid #203258}
    th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#9fb0d7}
    tr:hover{background:rgba(255,255,255,.02)}
    .badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px}
    .b-active{background:rgba(34,211,238,.15);color:#67e8f9}
    .b-inactive{background:rgba(255,107,107,.15);color:#ffadad}
    .b-prob{background:rgba(91,140,255,.18);color:#b9ccff}
    .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
    .col-12{grid-column:span 12}
    .col-6{grid-column:span 6}
    .col-4{grid-column:span 4}
    .col-3{grid-column:span 3}
    @media (max-width:860px){.col-6,.col-4,.col-3{grid-column:span 12}}
    dialog{border:1px solid #26365a;border-radius:16px;width:min(720px,95vw);background:#0c142b;color:var(--text)}
    dialog::backdrop{background:rgba(0,0,0,.6)}
    .dialog-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #213455}
    .dialog-body{padding:16px}
    .help{color:#9fb0d7;font-size:12px}
    .pill{padding:6px 10px;border-radius:999px;background:#0b1327;border:1px solid #203258;color:#9fb0d7}



/*--dangnhap---*/
@media (max-width:860px){  .card01 {margin-left: 20px !important }}
  .card01 {
      width: 100%; max-width: 380px; padding: 28px 24px; border-radius: 16px;
      background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.08);
      margin-left: 350px;

    }
   
    h1 { margin: 0 0 18px; font-size: 22px; text-align: center;color:black; }
    .field { margin-bottom: 14px; }
    label { display:block; font-size: 13px; margin-bottom: 6px; color:#333; }
    input[type="email"], input[type="password"] {
      width: 100%; padding: 12px 12px; border: 1px solid #d9dde3; border-radius: 10px;
      font-size: 15px; outline: none; transition: .2s border, .2s box-shadow;
    }
    input:focus { border-color:#6b8afd; box-shadow: 0 0 0 3px rgba(107,138,253,.15); }
    .row {
      display:flex; align-items:center; justify-content:space-between; gap: 8px; margin: 6px 0 16px;
      font-size: 13px;
    }
    .row a { text-decoration:none; color:#5161ff; }
    .btn {
      width:100%; padding:12px; border:none; border-radius: 10px; cursor:pointer;
      background:#5161ff; color:#fff; font-weight:600; font-size:15px; transition: .2s opacity;
    }
    .btn:hover { opacity: .92; }
    .btn1 {
      width:100%; padding:12px; border:none; border-radius: 10px; cursor:pointer;
      background:red; color:#fff; font-weight:600; font-size:15px; transition: .2s opacity;
    }
    .btn1:hover { opacity: .92; }
    .hint { color:#888; font-size:12px; text-align:center; margin-top:10px; }
    .toggle-pass { position: relative; }
    .toggle-pass button {
      position:absolute; right:8px; top:50%; transform: translateY(-50%);
      border:none; background:transparent; cursor:pointer; font-size:12px; color:#5161ff;
      padding:4px 6px;
    }
    .error { color:#c0392b; font-size:13px; margin-bottom:10px; display:none; }