/* =========================================================
   Giao diện xác thực — Cổng Quản lý Hành chính, Khoa Kinh tế
   Dùng cho: login.php (2 bước) và change_password.php
   ========================================================= */
:root{
  --navy-900:#171F5C;
  --navy-800:#1E2A77;
  --navy-700:#233A93;
  --blue-600:#1E50A5;
  --blue-500:#2A66C9;
  --gold:#FEB319;
  --red:#D8232A;
  --green:#1B6B3A;
  --ink:#1B2036;
  --ink-soft:#5D6580;
  --field:#EDF0FA;
  --line:#DCE1F0;
  --white:#fff;
  --radius:15px;

  /* Bề rộng thẻ — đã nới rộng theo yêu cầu để form thoáng và dễ đọc hơn */
  --card-w:clamp(340px,17vw + 122px,452px);
  --pad-x:clamp(18px,.9vw + 12px,26px);
  --pad-y:clamp(16px,.8vw + 11px,22px);
  --logo-w:clamp(150px,10vw + 30px,196px);
  --gap:clamp(10px,.5vw + 6px,13px);
  --input-py:clamp(9.5px,.4vw + 7px,11.5px);
  --radius-s:clamp(8px,.3vw + 6px,10px);
  --fs-xs:clamp(10.8px,.12vw + 10.3px,11.6px);
  --fs-sm:clamp(11.6px,.16vw + 11px,12.6px);
  --fs-md:clamp(12.8px,.18vw + 12.2px,13.9px);
  --fs-lg:clamp(13.6px,.2vw + 12.9px,14.8px);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{
  margin:0;
  font-family:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:#0F1A44 url("../img/login-bg.jpg") 30% center/cover no-repeat fixed;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:
    linear-gradient(260deg, rgba(16,28,78,.9) 0%, rgba(20,38,102,.68) 34%, rgba(24,48,120,.24) 60%, rgba(255,255,255,0) 86%),
    linear-gradient(180deg, rgba(10,20,60,.3), rgba(10,20,60,0) 40%);
}

.page{
  position:relative;min-height:100vh;min-height:100dvh;
  display:flex;align-items:center;justify-content:flex-end;
  padding:clamp(20px,4vh,44px) clamp(16px,6vw,96px);
}

/* ---------------- thẻ ---------------- */
.card{
  width:min(var(--card-w),100%);
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 26px 60px rgba(8,18,55,.4), 0 2px 6px rgba(8,18,55,.18);
  animation:rise .34s cubic-bezier(.22,.8,.3,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.card__head{
  background:linear-gradient(118deg,var(--blue-600) 0%,var(--navy-700) 52%,var(--navy-800) 100%);
  padding:var(--pad-y) var(--pad-x) calc(var(--pad-y) * .78);
  border-bottom:3px solid var(--gold);
}
.card__head img{display:block;width:var(--logo-w);max-width:100%;height:auto}
.card__head p{margin:calc(var(--gap) * .8) 0 0;font-size:var(--fs-sm);line-height:1.45;color:#C9D5F2}
.card__body{padding:calc(var(--pad-y) * .95) var(--pad-x)}
.card__foot{
  padding:calc(var(--gap) * .9) var(--pad-x) calc(var(--gap) * 1.25);
  border-top:1px solid #EEF1F8;font-size:var(--fs-xs);color:#8A92AC;text-align:center;
}
.card__foot strong{color:var(--navy-700);font-weight:600}

/* ---------------- chỉ dẫn 2 bước ---------------- */
.steps{display:flex;align-items:center;gap:7px;margin:0 0 calc(var(--gap) * 1.15)}
.steps li{display:flex;align-items:center;gap:7px;list-style:none;font-size:var(--fs-xs);color:#98A0BA;font-weight:500}
.steps .dot{
  width:19px;height:19px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:#EDF0FA;color:#8F98B5;font-size:10.5px;font-weight:700;
  transition:background-color .2s,color .2s;
}
.steps li.is-done .dot{background:var(--green);color:#fff}
.steps li.is-active .dot{background:var(--blue-600);color:#fff;box-shadow:0 0 0 3px rgba(30,80,165,.15)}
.steps li.is-active{color:var(--navy-800);font-weight:600}
.steps li.is-done{color:#5D6580}
.steps .bar{flex:1;height:2px;border-radius:2px;background:#E4E9F7}
.steps li.is-done + .bar{background:var(--green)}

/* ---------------- chip người dùng ---------------- */
.chip{
  display:flex;align-items:center;gap:11px;margin:0 0 var(--gap);
  padding:9px 12px 9px 9px;border:1.5px solid var(--line);border-radius:calc(var(--radius-s) + 2px);
  background:linear-gradient(180deg,#F9FBFF,#F2F5FD);
}
.chip__ava{
  flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(125deg,var(--blue-500),var(--navy-700));
  color:#fff;font-size:13px;font-weight:700;letter-spacing:.3px;
}
.chip__info{min-width:0;flex:1}
.chip__info b{display:block;font-size:var(--fs-md);font-weight:600;color:var(--navy-900);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip__info span{display:block;margin-top:1px;font-size:var(--fs-xs);color:var(--ink-soft)}
.chip__change{
  flex:none;padding:0;border:0;background:none;font:inherit;font-size:var(--fs-xs);
  color:var(--blue-600);cursor:pointer;text-decoration:underline;
}
.chip__change:hover{color:var(--navy-800)}

/* ---------------- trường nhập ---------------- */
.field{margin-bottom:var(--gap)}
.field label{display:block;margin-bottom:5px;font-size:var(--fs-sm);font-weight:600;color:#39415F}
.control{position:relative;display:flex;align-items:center}
.control svg.lead{position:absolute;left:11px;width:16px;height:16px;color:#8F98B5;pointer-events:none}
input[type=text],input[type=password],input[type=tel],textarea{
  width:100%;font:inherit;font-size:var(--fs-md);color:var(--ink);
  background:var(--field);border:1.5px solid transparent;border-radius:var(--radius-s);
  padding:var(--input-py) 12px;
  transition:border-color .15s,background-color .15s,box-shadow .15s;
}
.control svg.lead ~ input{padding-left:36px}
.control input.has-toggle{padding-right:42px}
textarea{resize:vertical;min-height:70px;line-height:1.5;font-family:inherit}
input::placeholder,textarea::placeholder{color:#9AA2BB}
textarea:focus{outline:none;background:#fff;border-color:var(--blue-600);box-shadow:0 0 0 4px rgba(30,80,165,.14)}
input:hover:not([readonly]){background:#E7EBF8}
input:focus{outline:none;background:#fff;border-color:var(--blue-600);box-shadow:0 0 0 4px rgba(30,80,165,.13)}
input[readonly]{background:#F4F6FC;color:#2C3350;font-weight:600;cursor:default;border-color:#E6EAF6}
input[readonly]:focus{box-shadow:none;border-color:#E6EAF6;background:#F4F6FC}
input[aria-invalid="true"]{border-color:var(--red);background:#FFF6F6}
input[inputmode="numeric"]{letter-spacing:.8px}
.err{display:block;margin-top:5px;font-size:var(--fs-xs);color:#9E1B22}
.hint{display:block;margin-top:5px;font-size:var(--fs-xs);color:var(--ink-soft);line-height:1.5}

.toggle{
  position:absolute;right:5px;display:grid;place-items:center;width:32px;height:32px;
  border:0;border-radius:7px;background:transparent;color:#767F9D;cursor:pointer;
}
.toggle:hover{color:var(--blue-600);background:rgba(30,80,165,.08)}
.toggle svg{width:17px;height:17px}

/* ---------------- nút ---------------- */
.btn{
  width:100%;font:inherit;font-size:var(--fs-lg);font-weight:600;border-radius:var(--radius-s);
  padding:calc(var(--input-py) + 1.5px) 16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:9px;
  transition:filter .15s,background-color .15s,border-color .15s,transform .08s;
}
.btn--primary{color:#fff;border:0;background:linear-gradient(115deg,var(--blue-500),var(--navy-700));box-shadow:0 8px 18px rgba(30,58,147,.26)}
.btn--primary:hover{filter:brightness(1.08)}
.btn--primary:active{transform:translateY(1px);filter:brightness(.95)}
.btn--primary[aria-busy="true"]{filter:saturate(.55);cursor:progress}
.btn--primary svg{width:17px;height:17px}
.btn--ghost{color:var(--navy-800);background:#fff;border:1.5px solid var(--line)}
.btn--ghost:hover{border-color:var(--blue-600);background:#F7F9FF}
.btn + .btn{margin-top:9px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

a{color:var(--blue-600);text-decoration:none}
a:hover{text-decoration:underline}
.linkbtn{padding:0;border:0;background:none;font:inherit;font-size:var(--fs-sm);color:var(--blue-600);cursor:pointer}
.linkbtn:hover{text-decoration:underline}
.meta{display:flex;align-items:center;justify-content:flex-end;margin:calc(var(--gap) * -.2) 0 var(--gap);font-size:var(--fs-sm)}

/* ---------------- độ mạnh mật khẩu ---------------- */
.strength{margin:calc(var(--gap) * -.35) 0 var(--gap)}
.strength__bar{display:flex;gap:4px;margin-bottom:6px}
.strength__bar i{flex:1;height:4px;border-radius:3px;background:#E4E9F7;transition:background-color .2s}
.strength[data-level="1"] .strength__bar i:nth-child(-n+1){background:#D8232A}
.strength[data-level="2"] .strength__bar i:nth-child(-n+2){background:#E8890C}
.strength[data-level="3"] .strength__bar i:nth-child(-n+3){background:#C9A11B}
.strength[data-level="4"] .strength__bar i{background:var(--green)}
.strength__text{font-size:var(--fs-xs);color:var(--ink-soft)}
.strength__text b{font-weight:600;color:#39415F}

.rules{margin:0 0 var(--gap);padding:9px 11px;list-style:none;background:#F6F8FE;border:1px solid #E4E9F7;border-radius:var(--radius-s)}
.rules li{display:flex;align-items:center;gap:7px;font-size:var(--fs-xs);color:#5D6580;line-height:1.75}
.rules li::before{
  content:"";flex:none;width:12px;height:12px;border-radius:50%;background:#DDE3F2;
  background-image:none;transition:background-color .18s;
}
.rules li.ok{color:var(--green)}
.rules li.ok::before{
  background:var(--green);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size:9px 9px;background-position:center;background-repeat:no-repeat;
}

/* ---------------- thông báo ---------------- */
.alert{
  display:flex;align-items:flex-start;gap:8px;margin-bottom:var(--gap);padding:9px 11px;
  border-radius:var(--radius-s);background:#FDECEC;border:1px solid #F6C9C9;color:#9E1B22;
  font-size:var(--fs-sm);line-height:1.45;
}
.alert svg{width:15px;height:15px;flex:none;margin-top:1.5px}
.alert--ok{background:#EAF7EF;border-color:#BFE5CD;color:var(--green)}
.alert--info{background:#EEF3FD;border-color:#C8D8F5;color:#1E3F86}

.notice{margin:var(--gap) 0 0;padding-top:calc(var(--gap) * .95);border-top:1px solid #EEF1F8;text-align:center}
.notice p{margin:0 0 7px;font-size:var(--fs-xs);color:var(--ink-soft);line-height:1.6}
.notice p:last-child{margin-bottom:0}

/* ---------------- hộp thoại ---------------- */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.modal__backdrop{position:absolute;inset:0;background:rgba(9,17,48,.62);backdrop-filter:blur(3px)}
.modal__panel{
  position:relative;width:min(calc(var(--card-w) + 34px),100%);max-height:calc(100dvh - 40px);overflow:auto;
  background:#fff;border-radius:var(--radius);box-shadow:0 30px 70px rgba(6,14,45,.45);
  animation:rise .26s cubic-bezier(.22,.8,.3,1) both;
}
.modal__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:calc(var(--pad-y) * .8) var(--pad-x);
  background:linear-gradient(118deg,var(--blue-600),var(--navy-800));border-bottom:3px solid var(--gold);
}
.modal__head h2{margin:0;font-size:var(--fs-lg);font-weight:700;color:#fff}
.modal__head p{margin:3px 0 0;font-size:var(--fs-xs);color:#C9D5F2}
.modal__close{
  flex:none;width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:7px;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;font-size:19px;line-height:1;
}
.modal__close:hover{background:rgba(255,255,255,.26)}
.modal__body{padding:calc(var(--pad-y) * .85) var(--pad-x) calc(var(--pad-y) * .95);font-size:var(--fs-sm);line-height:1.65;color:#3A4160}
.modal__body p{margin:0 0 9px}
.modal__body ul{margin:0 0 11px;padding-left:18px}
.modal__body li{margin-bottom:5px}

/* ---------------- màn hình nhỏ / thấp ---------------- */
@media (max-width:820px){
  .page{justify-content:center;padding:clamp(16px,3.5vh,30px) 16px}
  .card{width:min(444px,100%)}
  .modal__panel{width:min(470px,100%)}
  body::before{background:linear-gradient(180deg,rgba(16,28,78,.84),rgba(20,38,102,.6))}
}
@media (max-width:420px){
  .page{padding:14px 12px}
  .card{border-radius:13px}
}
@media (max-height:740px) and (min-width:821px){
  .page{padding-block:16px}
  :root{--pad-y:16px;--gap:10px;--input-py:9px;--logo-w:162px}
}
@media (max-height:580px){
  .page{align-items:flex-start}
  :root{--pad-y:13px;--gap:9px;--input-py:8.5px;--logo-w:150px}
}
@media (min-width:1800px){:root{--card-w:466px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------------- theme riêng cho trang đăng nhập quản trị ---------------- */
body.theme-admin{
  --gold:#3AAFA0;
  background:#101826 url("../img/login-bg.jpg") 30% center/cover no-repeat fixed;
}
body.theme-admin::before{
  background:
    linear-gradient(260deg, rgba(10,16,26,.94) 0%, rgba(16,26,42,.72) 34%, rgba(20,34,54,.28) 60%, rgba(255,255,255,0) 86%),
    linear-gradient(180deg, rgba(6,10,18,.35), rgba(6,10,18,0) 40%);
}
body.theme-admin .card__head{
  background:linear-gradient(118deg,#16324A,#0E1B2B);border-bottom:3px solid var(--gold);
}


/* =========================================================
   Thẻ RỘNG dùng cho bước kích hoạt tài khoản
   (hiển thị đầy đủ họ tên để người dùng tự kiểm tra)
   ========================================================= */
body.wide-card{--card-w:clamp(360px,26vw + 168px,596px)}
@media (max-width:820px){ body.wide-card .card{width:min(520px,100%)} }

/* Họ tên khi kích hoạt: cho phép xuống dòng, cỡ chữ lớn hơn, không cắt chữ */
.chip--big{align-items:flex-start;padding:13px 14px}
.chip--big .chip__ava{width:44px;height:44px;font-size:15px}
.chip--big .chip__info b{
  white-space:normal;overflow:visible;text-overflow:clip;
  font-size:calc(var(--fs-lg) + 2px);line-height:1.35;word-break:break-word;
}
.chip--big .chip__info span{margin-top:4px;font-size:var(--fs-sm);line-height:1.5}
.chip--big .chip__change{margin-top:2px}
.identity{
  margin:0 0 var(--gap);padding:11px 13px;border-radius:var(--radius-s);
  background:#F6F8FE;border:1px solid #E4E9F7;font-size:var(--fs-sm);color:#3A4160;line-height:1.6;
}
.identity dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0}
.identity dt{color:var(--ink-soft);white-space:nowrap}
.identity dd{margin:0;font-weight:600;color:var(--navy-900);word-break:break-word}

/* Hàng liên kết phụ dưới form đăng nhập (Quên mật khẩu · Đăng nhập lần đầu) */
.linkrow{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.linkrow a{font-size:var(--fs-sm);font-weight:600}