:root{--brand:#2b6ef2;--ink:#0f172a;--muted:#64748b;--bg:#f8fafc;--card:#fff;--ring:rgba(43,110,242,.35);--shadow:0 10px 20px rgba(2,6,23,.06),0 6px 8px rgba(2,6,23,.04);--radius:14px;--danger:#dc2626}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:16px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid #e2e8f0;background:#fff;box-shadow:var(--shadow);font-weight:700;cursor:pointer}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.ghost{background:transparent}
.badge{display:inline-flex;align-items:center;gap:8px;background:#e8f1ff;color:#1746a2;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px}
header{background:linear-gradient(180deg,var(--brand) 0%, #1a4ccf 100%);color:#fff}
header .row{display:flex;align-items:center;gap:12px;padding:12px 16px}
header .brand{display:flex;align-items:center;gap:10px}
header .mark{width:34px;height:34px;border-radius:8px;background:#fff;display:grid;place-items:center;color:var(--brand);font-weight:900}

.grid{display:grid;grid-template-columns:240px 1fr;gap:16px}
@media (max-width: 920px){.grid{grid-template-columns:1fr}}
aside{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px}
aside .h{font-weight:900;color:#0b2a6a;margin-bottom:8px}

main .panel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel .head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #eef2f7}
.panel .title{font-weight:900;color:#0b2a6a}

.toolbar{display:flex;gap:8px;flex-wrap:wrap}
.filters{display:flex;gap:8px;align-items:center}
.filters select,.filters input{border:1px solid #e5e7eb;border-radius:10px;padding:8px 10px}

table{width:100%;border-collapse:separate;border-spacing:0 8px;padding:12px}
thead th{font-size:12px;color:#64748b;text-align:left;padding:4px 8px}
tbody tr{background:#fff;border:1px solid #e5e7eb}
tbody td{padding:10px 8px;vertical-align:middle}
tbody tr{border-radius:12px}

.pill{background:#f1f5ff;color:#0b2a6a;border:1px solid #dbe3f7;padding:6px 10px;border-radius:999px;font-weight:700}

dialog{border:none;border-radius:16px;box-shadow:var(--shadow);max-width:720px;width:95vw}
form.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
form.grid label{font-size:12px;color:#475569}
form.grid input,form.grid textarea, form.grid select{width:100%;padding:10px;border:1px solid #e5e7eb;border-radius:10px}
form.grid textarea{grid-column:1/-1;min-height:90px}

/* Login */
.auth{max-width:420px;margin:40px auto;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:18px}
.auth h1{margin:0 0 10px}
.muted{color:var(--muted)}
.error{color:var(--danger);font-weight:700}
/*dangky*/
* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .login-container {
      background: white;
      border-radius: 24px;
      padding: 48px 40px;
      max-width: 480px;
      width: 100%;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }

    .logo {
      text-align: center;
      color: #5b7cfc;
      font-size: 36px;
      font-weight: 900;
      margin-bottom: 24px;
      letter-spacing: 2px;
    }

    .tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 32px;
      background: #f1f5f9;
      border-radius: 12px;
      padding: 4px;
    }

    .tab-btn {
      flex: 1;
      padding: 12px;
      border: none;
      background: transparent;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s;
      color: #64748b;
      font-family: 'Inter', sans-serif;
    }

    .tab-btn.active {
      background: white;
      color: #5b7cfc;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    h1 {
      text-align: center;
      font-size: 32px;
      font-weight: 800;
      color: #1e293b;
      margin-bottom: 8px;
    }

    .subtitle {
      text-align: center;
      color: #64748b;
      margin-bottom: 32px;
      font-size: 15px;
    }

    .form-section {
      display: none;
    }

    .form-section.active {
      display: block;
    }

    .form-group {
      margin-bottom: 20px;
    }

    label {
      display: block;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 8px;
      font-size: 14px;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"] {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      font-size: 15px;
      outline: none;
      transition: all 0.2s;
      font-family: 'Inter', sans-serif;
    }

    input:focus {
      border-color: #5b7cfc;
      box-shadow: 0 0 0 3px rgba(91, 124, 252, 0.1);
    }

    input::placeholder {
      color: #94a3b8;
    }

    .checkbox-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 16px 0 24px;
      font-size: 14px;
    }

    .checkbox-label {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #475569;
      cursor: pointer;
    }

    .forgot-link {
      color: #5b7cfc;
      text-decoration: none;
      font-weight: 600;
    }

    .forgot-link:hover {
      text-decoration: underline;
    }

    .btn-login {
      width: 100%;
      padding: 16px;
      background: #5b7cfc;
      color: white;
      border: none;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      transition: 0.2s;
      font-family: 'Inter', sans-serif;
    }

    .btn-login:hover {
      background: #4c6eeb;
      transform: translateY(-1px);
      box-shadow: 0 8px 20px rgba(91, 124, 252, 0.4);
    }

    .divider {
      text-align: center;
      color: #94a3b8;
      margin: 28px 0;
      font-size: 14px;
      position: relative;
    }

    .divider::before,
    .divider::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 42%;
      height: 1px;
      background: #e2e8f0;
    }

    .divider::before {
      left: 0;
    }

    .divider::after {
      right: 0;
    }

    .social-btn {
      width: 100%;
      padding: 14px;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-weight: 600;
      cursor: pointer;
      margin-bottom: 12px;
      transition: 0.2s;
      font-size: 15px;
      color: #1e293b;
    }

    .social-btn:hover {
      background: #f8fafc;
      border-color: #cbd5e1;
    }

    .social-btn svg {
      flex-shrink: 0;
    }


    @media (max-width: 600px) {
      .login-container {
        padding: 32px 24px;
      }

      h1 {
        font-size: 28px;
      }
    }
    /* Ngăn tràn ngang toàn trang */
html, body { height: 100%; overflow-x: hidden; }

/* Nền + căn giữa form theo chiều dọc */
.auth-page{
  min-height: 100dvh;                 /* phủ kín màn hình (an toàn trên mobile) */
  display: grid;
  place-items: center;                 /* căn giữa cả dọc lẫn ngang */
  padding: 24px;                       /* chừa biên cho màn nhỏ */
  background: linear-gradient(135deg,#6a77d8,#7c4ad1); /* nền của bạn */
}

/* Thẻ card chứa form */
.auth-card{
  width: min(520px, 92vw);             /* KHÔNG vượt quá màn hình */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  padding: 22px;
}

/* Input/btn full width, không đẩy card nở rộng */
.auth-card input,
.auth-card button,
.auth-card select { width: 100%; }

/* Hàng nút tab có thể xuống dòng nếu hẹp */
.tabbar{ display:inline-flex; gap:6px; flex-wrap:wrap }


/*==đăng ký */
:root{
  --brand:#2b6ef2; --brand-600:#1f5ae0; --ink:#0f172a; --muted:#64748b; --bg:#f8fafc;
  --card:#ffffff; --ring:rgba(43,110,242,.35);
  --shadow:0 10px 20px rgba(2,6,23,.06),0 6px 8px rgba(2,6,23,.04);
  --radius:18px; --danger:#dc2626
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:var(--bg);color:var(--ink)}

.auth-wrap{min-height:100%;display:grid;place-items:center;padding:24px}
.auth-card{width:min(96vw,560px);background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px}

.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;margin-bottom:12px}
.brand-mark{width:38px;height:38px;border-radius:10px;background:#eaf1ff;color:var(--brand);display:grid;place-items:center;font-weight:900}
.brand-text{font-weight:800}

.tabs{display:flex;gap:8px;margin:6px 0 8px}
.tab-btn{border:1px solid #e5e7eb;background:#fff;padding:8px 14px;border-radius:10px;font-weight:700;cursor:pointer}
.tab-btn.active{background:var(--brand);border-color:var(--brand);color:#fff}

.title{margin:10px 0 4px;font-size:24px;font-weight:800}
.subtitle{margin:0 0 16px;color:var(--muted);font-size:14px}

.form-group{margin-bottom:12px}
label{display:block;font-weight:700;margin-bottom:6px}
input{width:100%;padding:12px 14px;border:1px solid #e5e7eb;border-radius:12px;font-size:14px;outline:none;transition:.15s}
input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:600px){.form-row{grid-template-columns:1fr}}

.err{display:block;color:var(--danger);font-size:12px;margin-top:6px;min-height:16px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;font-weight:700;cursor:pointer}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn:disabled{opacity:.6;cursor:not-allowed}
.w-full{width:100%}

.divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:#94a3b8;font-size:14px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:#e5e7eb}

.socials{display:grid;gap:10px}
.btn.social{background:#fff}

.swap{margin-top:14px;color:var(--muted);text-align:center}
.swap a{color:var(--brand);font-weight:700;text-decoration:none}