/* RF-15: standalone presentation for login and forced password-change surfaces. */
:root{
  --font:'Be Vietnam Pro', 'Segoe UI', system-ui, Arial, sans-serif;
  --white:#FFFFFF;
  --bg:#EEF1F6;
  --bg-soft:#F5F7FA;
  --line:#E1E5EC;
  --navy:#1A1F6B;
  --orange:#FF6600;
  --orange-dark:#E25A00;
  --orange-tint:#FFF0E6;
  --red:#DC2626;
  --red-tint:#FBE6E6;
  --text:#161A33;
  --text-muted:#667085;
  --radius-sm:10px;
}

*{box-sizing:border-box;}
html{overflow-y:scroll;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); -webkit-font-smoothing:antialiased; line-height:1.55;
  font-size:14px;
}
h1{margin:0; color:var(--text); font-weight:700;}
img{max-width:100%; display:block;}
button,input{font-family:var(--font);}
input:focus-visible,button:focus-visible{
  outline:2px solid var(--navy); outline-offset:1px;
}

.btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; border:1px solid transparent;
  padding:9px 16px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:700;
  transition:background .14s, border-color .14s, color .14s, box-shadow .14s, transform .14s;
  white-space:nowrap;
}
.btn-cam{background:var(--orange); color:#fff;}
.btn-cam:hover{background:var(--orange-dark);}
.btn:hover{box-shadow:0 4px 12px rgba(16,24,40,.13);}
.btn:active{box-shadow:0 2px 6px rgba(16,24,40,.11);}
.btn:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}
.btn:disabled,.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none !important; box-shadow:none !important;}
.btn:disabled:hover,.btn[disabled]:hover{transform:none !important; box-shadow:none !important;}

.login-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#EEF1F6,#E0E5F2); padding:24px;
}
.login-box{
  width:100%; max-width:400px; background:var(--white);
  border:1px solid var(--line); border-radius:20px;
  box-shadow:0 20px 50px rgba(16,24,40,.14);
  padding:38px 34px; text-align:center;
}
.login-box .logo-row{display:flex; justify-content:center; margin-bottom:14px;}
.login-box .logo-row img{width:88px; height:88px; object-fit:contain;}
.login-box h1{font-size:22px; font-weight:800; color:var(--navy); letter-spacing:.3px;}
.login-box .sub{font-size:13px; color:var(--text-muted); margin-top:2px; margin-bottom:24px;}
.login-box form{display:flex; flex-direction:column; gap:6px; text-align:left;}
.login-box label{font-size:12.5px; font-weight:700; color:var(--text-muted); margin-top:8px;}
.login-box input{
  padding:11px 14px; border:1px solid var(--line); border-radius:10px;
  font-size:14px; background:var(--bg-soft); color:var(--text); transition:border-color .12s, background .12s;
}
.login-box input:focus{outline:none; border-color:var(--navy); background:var(--white);}
.login-box .btn{margin-top:18px; width:100%; justify-content:center; padding:12px; font-size:15px;}
.login-loi{
  background:var(--red-tint,#FDECEC); color:var(--red); border:1px solid var(--red);
  border-radius:10px; padding:10px 14px; font-size:13px; margin-bottom:14px; font-weight:600;
}

input[type=text],input[type=password]{
  transition:border-color .15s, box-shadow .15s;
}
input[type=text]:hover,input[type=password]:hover{
  border-color:var(--orange) !important;
}
input[type=text]:focus,input[type=password]:focus{
  border-color:var(--orange) !important;
  box-shadow:0 0 0 3px var(--orange-tint) !important;
  outline:none !important;
}
.mk-manh{margin:7px 0 2px;}
.mk-thanh{height:6px; border-radius:99px; background:var(--line); overflow:hidden;}
.mk-thanh i{display:block; height:100%; border-radius:99px; transition:width .18s, background .18s;}
.mk-chu{font-size:11.5px; margin-top:4px; color:var(--text-muted); text-align:left;}
.mk-yeu .mk-thanh i{background:var(--red);}
.mk-yeu .mk-chu b{color:var(--red);}
.mk-vua .mk-thanh i{background:var(--orange);}
.mk-vua .mk-chu b{color:var(--orange-dark);}
.mk-kha .mk-thanh i{background:#EAB308;}
.mk-kha .mk-chu b{color:#A16207;}
.mk-tot .mk-thanh i{background:#22A45D;}
.mk-tot .mk-chu b{color:#1E7B45;}
.mk-yeucau{font-size:11.5px; color:var(--text-muted); line-height:1.6; text-align:left;}
.mk-yeucau b{color:var(--navy);}
[data-mk-doi-form] [data-mk-submit]:disabled,
[data-mk-doi-form] [data-mk-submit]:disabled:hover{
  opacity:1!important; cursor:not-allowed; color:#fff!important;
  border-color:#F3A267!important; background:#F5B27F!important;
  box-shadow:none!important; filter:none!important; transform:none!important;
}
.login-box .mk-yeucau{text-align:center; margin-top:12px;}
.login-box .mk-manh{margin-bottom:2px;}

.login-quenmk{
  margin:14px 0 0; text-align:center;
  font-size:12px; color:var(--text-muted); line-height:1.6;
}
.login-quenmk b{color:var(--navy);}

.login-input-wrap{position:relative; display:block; width:100%;}
.login-input-wrap .login-input-ic{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; display:flex; color:var(--text-muted); pointer-events:none;
}
.login-input-wrap .login-input-ic svg{width:18px; height:18px;}
.login-box .login-input-wrap input{display:block; width:100%; padding-left:42px;}
.login-input-wrap:focus-within .login-input-ic{color:var(--orange);}