:root{
  --bg-start:#3b0a0a;
  --bg-end:#120606;
  --stroke: rgba(255,255,255,.15);
  --text:#f4f5f7;
  --muted:#c9cbd1;
  --brand:#8b0b0b;          /* đồng bộ primary đỏ */
  --brand-600:#700909;
  --brand-glow: 0 10px 25px rgba(139,11,11,.4);
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --blur: blur(10px);
}

*{ box-sizing: border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(800px 400px at 10% 90%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, var(--bg-start), var(--bg-end));
  overflow:hidden;
}

/* line trang trí */
.frame-lines::before,
.frame-lines::after{
  content:"";
  position:fixed; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, #e3c19a, transparent);
  opacity:.7;
  z-index:0;
}
.frame-lines::before{ top:48px; }
.frame-lines::after{ bottom:48px; }

/* overlay ảnh nền (tuỳ chọn) */
.background{
  position:fixed; inset:0; z-index:-1;
  background-image:url('../img/backgroud.png');
  background-size:cover; background-position:center;
  opacity:.13; pointer-events:none;
}

/* ===== Card login ===== */
.login-wrap{
  position:fixed; top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:min(95vw, 420px);
  padding:28px;
  border-radius:calc(var(--radius) + 6px);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  backdrop-filter: var(--blur);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
  z-index:10;
}

/* header nhỏ trong card */
.brand{
  display:flex; align-items:center; gap:12px; margin-bottom:18px; justify-content:center;
}
.brand .logo{
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg, #ffd9a3, #e3c19a);
  display:grid; place-items:center; color:#5a2d10; font-weight:800;
  box-shadow: 0 6px 18px rgba(227,193,154,.35);
}
.brand h1{ font-size:20px; margin:0; font-weight:700; letter-spacing:.3px; }
.brand p{ margin:2px 0 0; font-size:12px; color:var(--muted); text-align:center; width:100%; }

/* ===== Form ===== */
.form{ margin-top:18px; display:grid; gap:14px; }
.input{ position:relative; }

/* ô nhập & select chung — dùng .login-wrap để đủ specificity vượt components.css */
.login-wrap .input input,
.login-wrap .input select{
  width:100%;
  height:44px;
  padding:12px 44px 12px 40px; /* chừa icon trái + nút mắt phải */
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.06);
  color:#f4f5f7;
  outline:none;
  transition:.2s border, .2s background;
}

.login-wrap .input input:focus,
.login-wrap .input select:focus {
  border-color:rgba(255,255,255,.35);
  background:rgba(255,255,255,.10);
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
  outline: none;
}

/* icon trái trong mỗi ô */
.input svg{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; opacity:.9; pointer-events:none;
}

/* placeholder */
.login-wrap .input input::placeholder{ color:#cfd2d9; opacity:.7 }

/* Chống browser autofill đổi background sang trắng/vàng khiến chữ trắng biến mất */
.login-wrap .input input:-webkit-autofill,
.login-wrap .input input:-webkit-autofill:hover,
.login-wrap .input input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f4f5f7;
  -webkit-box-shadow: 0 0 0px 1000px rgba(45, 8, 8, 0.92) inset;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: #f4f5f7;
}

/* select custom mũi tên + đảm bảo chữ rõ */
.login-wrap .input select{
  appearance:none; cursor:pointer;
  color:var(--text) !important;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 24px) 50%, calc(100% - 16px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:48px;
}
/* màu menu option (một số OS có thể bỏ qua) */
.login-wrap .input select option{
  color:#111 !important;
  background:#fff !important;
}

/* nút 👁️ hiện/ẩn mật khẩu */
.btn-eye{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  padding:0; border:0; border-radius:8px;
  background:transparent; color:#d5d7dd; cursor:pointer;
}
.btn-eye:hover{ background:rgba(255,255,255,.08); }
.btn-eye svg{ width:18px; height:18px; pointer-events:none; }

/* ẩn nút reveal mặc định của Edge/IE để không chồng lên */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear{ display:none; }

/* ===== Actions ===== */
.actions{ display:grid; gap:12px; margin-top:6px; }
.btn{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid transparent;
  background:var(--brand); color:#fff; font-weight:600; cursor:pointer;
  box-shadow: var(--brand-glow);
  transition:.15s transform, .2s background;
}
.btn:hover{ background:var(--brand-600); transform:translateY(-1px); }

/* helper text */
.helper{
  display:flex; justify-content:center; gap:10px; color:var(--muted); font-size:12px;
  margin-top:6px;
}
.helper a{ color:#e3c19a; text-decoration:none; }
.helper a:hover{ text-decoration:underline; }

/* Responsive nhỏ */
@media (max-width:420px){
  .login-wrap{ padding:22px; }
  .brand h1{ font-size:18px; }
}

/* Khi chiều cao màn hình thấp, scale nhẹ card cho gọn */
@media (max-height: 600px){
  .login-wrap{ transform: translate(-50%, -50%) scale(.95); }
}