/* ============================================================
   LOGIN (Đăng nhập) - CSS riêng cho trang đăng nhập: layout chia
   đôi màn hình (panel thương hiệu + panel form), không dùng
   sidebar/topbar của app-shell nên KHÔNG nạp app-shell làm layout,
   chỉ nạp app-shell.css để dùng chung design tokens, reset, flag
   ribbon và component .toast.
   Nạp SAU assets/css/app-shell.css.
   ============================================================ */

/* Trang đăng nhập dùng cỡ chữ gốc lớn hơn mật độ dashboard (ít dữ liệu, ưu tiên dễ đọc) */
html, body{height:100%; overflow:hidden;}
body{font-size:14px; min-height:100dvh;}

/* ===== Layout chia đôi màn hình ===== */
.auth-shell{display:flex; height:calc(100dvh - 3px); min-height:0;}

/* ---- Panel trái: thương hiệu ---- */
.brand-panel{
  width:40%; min-width:420px; position:relative; overflow:hidden;
  /* Khách hàng chỉ định chính xác ba mã màu cho gradient thương hiệu - giữ làm background-color
     nền dưới cùng (hiện ra nếu ảnh lỗi/đang tải) và làm lớp gradient dự phòng thứ 2.
     Ảnh minh hoạ PNG (background-login-left.png) là lớp TRÊN CÙNG (liệt kê trước trong
     background-image) - kích thước CỐ ĐỊNH 1000px (không dùng cover) để không phóng to
     chèn lên nội dung chữ khi viewport thấp, neo góc dưới-trái panel. */
  background-color:#0B214A;
  /* background-image:url("../img/background-login-left.png"), linear-gradient(170deg, #0B214A 0%, #163A74 55%, #1C467F 100%); */
  background-size:1000px auto, cover;
  background-position:left bottom, center;
  background-repeat:no-repeat, no-repeat;
  color:#fff; display:flex; flex-direction:column; padding:48px 56px;
}
.brand-top{display:flex; align-items:center; gap:12px; position:relative; z-index:1;}
.brand-top img{width: 79px;height: 79px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));}
.brand-top .name{font-weight:700;font-size: 19px;}
.brand-top .sub{font-size: 13px;color:#8CA3C6;margin-top:1px;}

.brand-mid{position:relative; z-index:1; margin-top:auto; margin-bottom:auto; max-width:420px;}
.brand-mid h1{font-size: 34px;font-weight:700;line-height:1.55;letter-spacing:-.02em;}
.brand-title-accent{width:48px; height:3px; margin-top:20px; background:var(--gold-600);}
.brand-mid .lead{font-size:14px; color:#C1CFE3; margin-top:24px; line-height:1.65; max-width:390px;}

.brand-features{list-style:none; margin-top:28px; display:flex; flex-direction:column; gap:13px; position:relative; z-index:1;}
.brand-features li{display:flex; align-items:center; gap:13px; font-size:13px; color:#DCE6F5; font-weight:600;}
.brand-features .f-ic{
  width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--gold-600); flex-shrink:0;
}
.brand-foot{position:relative; z-index:1; margin-top:40px; display:flex; flex-direction:column; gap:4px; font-size:10.5px; color:#8CA3C6;}
.brand-foot a{width:max-content; color:#DCE6F5; font-size:14px; font-weight:700;}
.brand-foot a:hover{color:#fff;}

/* ---- Panel phải: form ---- */
.form-panel{flex:1; display:flex; flex-direction:column; background:var(--bg); min-width:0; min-height:0;}
.form-topbar{display:flex; align-items:center; justify-content:space-between; padding:22px 40px 0;}
.mobile-brand{display:none; align-items:center; gap:10px;}
.mobile-brand img{width:32px; height:32px;}
.mobile-brand .name{font-weight:700; font-size:14px; color:var(--text-900);}
.form-topbar-actions{
  display:flex; align-items:center; gap:2px; margin-left:auto; padding:3px;
  background:var(--card); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-sm);
}
.topbar-globe{color:var(--text-400); font-size:12px; margin:0 4px 0 6px;}
.lang-switch{display:flex; gap:1px;}
.lang-switch button{padding:5px 10px; font-size:11px; font-weight:700; border-radius:7px; color:var(--text-600);}
.lang-switch button.active{background:var(--navy-900); color:#fff;}
.topbar-sep{width:1px; height:18px; background:var(--border); margin:0 2px;}
.topbar-help{display:flex; align-items:center; gap:5px; padding:5px 8px; font-size:11.5px; font-weight:600; color:var(--text-600);}
.topbar-help:hover{color:var(--text-900);}
/* .brand-theme-toggle: nút đổi tông panel thương hiệu - KHÔNG dùng chung tên .theme-toggle với
   nút đổi tông sidebar của app-shell.css vì kích thước/khung khác nhau, tránh nhầm lẫn khi bảo trì */
.brand-theme-toggle{
  width:30px; height:30px; border-radius:7px; border:none; background:transparent;
  color:var(--text-600); display:flex; align-items:center; justify-content:center; font-size:13px;
  transition:background-color .15s, color .15s, transform .12s;
}
.brand-theme-toggle:hover{background:var(--bg); color:var(--text-900);}
.brand-theme-toggle:active{transform:scale(.92);}

.form-wrap{
  flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
  padding:18px 32px 24px; overflow-y:auto; scrollbar-width:none;
}
.form-wrap::-webkit-scrollbar{display:none;}
.form-card{width:100%;max-width: 581px;}
.login-card{
  padding:32px 40px; background:var(--card); border:1px solid #E6EAF1; border-radius:16px;
  box-shadow:0 20px 60px rgba(10,42,77,.08);
}

.form-emblem{display:flex; justify-content:center; margin-bottom:12px;}
.form-emblem img{width:109px; height:109px; object-fit:contain; filter:drop-shadow(0 4px 10px rgba(10,42,77,.18));}
.form-kicker{
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--navy-900); margin-bottom:8px; text-align:center;
}
.office-name{
  max-width:100%; font-size:22px; font-weight:700; letter-spacing:.01em; text-transform:uppercase;
  color:var(--text-900); line-height:1.3; text-align:center; overflow-wrap:anywhere;
}
.title-divider{display:flex; align-items:center; justify-content:center; gap:8px; margin:12px 0 22px;}
.title-divider span{width:32px; height:1px; background:var(--border);}
.title-divider i{font-size:5px; color:var(--gold-600);}

.field-group{margin-bottom:10px;}
.field-label{display:block; font-size:14px; font-weight:600; color:var(--text-900); margin-bottom:7px;}
.field-box{
  position:relative; display:flex; align-items:center; min-height:56px;
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  transition:border-color .15s, box-shadow .15s;
}
.field-box:focus-within{border-color:var(--blue-600); box-shadow:0 0 0 3px var(--blue-50);}
.field-box.has-error{border-color:var(--red-600); box-shadow:0 0 0 3px var(--red-100);}
.field-box i.f-ic{width:40px; text-align:center; color:var(--text-400); font-size:13.5px;}
.field-box input{
  flex:1; border:none; outline:none; background:transparent; font-family:inherit;
  min-width:0; font-size:15px; color:var(--text-900); padding:15px 12px 15px 0;
}
.field-box input::placeholder{color:var(--text-400);}
.field-toggle-eye{width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:var(--text-400); font-size:13px; flex-shrink:0;}
.field-toggle-eye:hover{color:var(--text-600);}
.field-error{
  display:flex; align-items:center; gap:6px; min-height:18px; font-size:11.5px;
  color:var(--red-700); font-weight:600; margin-top:4px; visibility:hidden; opacity:0;
  transition:opacity .15s;
}
.field-error.show{visibility:visible; opacity:1;}

.field-row{display:flex; align-items:center; justify-content:space-between; margin:2px 0 18px;}
.forgot-link{font-size:12.5px; font-weight:600; color:var(--blue-600);}
.forgot-link:hover{color:var(--blue-700); text-decoration:underline;}

.btn-submit{
  width:100%; display:flex; align-items:center; justify-content:center; gap:9px;
  height:56px; padding:0 16px; border-radius:12px; background:#173B75;
  color:#fff; font-size:14px; font-weight:700; box-shadow:var(--shadow-sm);
  transition:background-color .15s, box-shadow .15s, transform .12s;
}
.btn-submit:hover{background:#20498B; filter:none; box-shadow:0 10px 30px rgba(23,59,117,.35);}
.btn-submit:active{transform:scale(.98);}
.btn-submit i{color:#fff;}
.btn-submit.loading i{color:#fff;}

.trust-divider{display:flex; align-items:center; gap:12px; margin-top:20px;}
.trust-divider span:not(.trust-divider-label){flex:1; height:1px; background:var(--border);}
.trust-divider-label{font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-400); white-space:nowrap;}
.trust-badges{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; text-align:center;}
.trust-badge{display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0;}
.trust-ic{width:34px; height:34px; border-radius:50%; background:var(--blue-50); color:var(--blue-700); display:flex; align-items:center; justify-content:center; font-size:13px;}
.trust-badge b{font-size:11px; font-weight:700; color:var(--text-900); display:block;}
.trust-badge span{font-size:10.5px; color:var(--text-400); display:block; margin-top:1px; line-height:1.4;}

.notice-box{
  display:flex; align-items:center; justify-content:space-between; gap:9px; margin-top:12px; padding:11px 13px;
  background:var(--blue-50); border:1px solid #D6E4FA; border-radius:10px;
}
.notice-box > i{color:var(--blue-700); font-size:13px; flex-shrink:0;}
.notice-box span{flex:1; font-size:12px; color:var(--text-600); line-height:1.35; white-space:nowrap;}
.notice-link{color:var(--blue-600); font-weight:700; font-size:11px; white-space:nowrap; flex-shrink:0;}
.notice-link:hover{text-decoration:underline;}
.notice-link i{font-size:10px; margin-left:3px;}

.form-foot{text-align:center; padding:12px 24px 16px; font-size:12px; font-weight:400; color:var(--text-400);}
.form-foot a{color:var(--blue-600); font-weight:600;}
.form-foot a:hover{color:var(--blue-700); text-decoration:underline;}
.foot-sep{color:var(--border); margin:0 2px;}

/* Rung nhẹ khi validate lỗi lúc submit */
@keyframes shake{10%,90%{transform:translateX(-1px);}20%,80%{transform:translateX(2px);}30%,50%,70%{transform:translateX(-4px);}40%,60%{transform:translateX(4px);}}

/* ===== Tông sáng/tối cho panel trái (đồng bộ nút chuyển tông ở dashboard) ===== */
.auth-shell.light-brand .brand-panel{
  background:linear-gradient(170deg, #FFFFFF 0%, #F2F6FB 100%); color:var(--text-900);
}
.auth-shell.light-brand .brand-top .name{color:var(--text-900);}
.auth-shell.light-brand .brand-top .sub{color:var(--text-400);}
.auth-shell.light-brand .brand-mid h1{color:var(--text-900);}
.auth-shell.light-brand .brand-mid .lead{color:var(--text-600);}
.auth-shell.light-brand .brand-features li{color:var(--text-600);}
.auth-shell.light-brand .brand-features .f-ic{background:var(--card); border-color:var(--border); box-shadow:var(--shadow-sm);}
.auth-shell.light-brand .brand-foot{color:var(--text-400);}
.auth-shell.light-brand .brand-foot a{color:var(--text-600);}

/* ===== Responsive ===== */
@media (min-width:981px) and (max-width:1200px){
  .brand-panel{padding:40px 36px;}
  .form-wrap{padding-right:24px; padding-left:24px;}
}
@media (max-width:980px){
  .brand-panel{display:none;}
  .mobile-brand{display:flex;}
  .form-panel{width:100%;}
}
@media (max-width:640px){
  .form-topbar{padding:16px 18px 0; flex-wrap:wrap; row-gap:10px;}
  .form-wrap{padding:12px 16px 16px;}
  .login-card{padding:22px 24px;}
  .office-name{font-size:19px;}
  .notice-box{align-items:flex-start; flex-wrap:wrap; padding:11px 13px;}
  .notice-box span{min-width:calc(100% - 28px); white-space:normal;}
  .notice-link{margin-left:25px;}
  .trust-badges{gap:6px;}
  .form-foot{padding:8px 16px 12px;}
}
@media (max-width:380px){
  .topbar-help{padding:5px 4px;}
  .lang-switch button{padding:5px 8px; font-size:10.5px;}
  .login-card{padding:20px 18px;}
  .office-name{font-size:16.5px;}
  .field-box input{font-size:14px;}
  .trust-badge b{font-size:10px;}
  .trust-badge span{font-size:9.5px;}
}

@media (max-height:800px){
  .brand-panel{padding-top:32px; padding-bottom:28px;}
  .brand-mid .lead{margin-top:16px;}
  .brand-features{margin-top:18px; gap:8px;}
  .brand-foot{margin-top:20px;}
  .form-topbar{padding-top:10px;}
  .form-wrap{padding-top:8px; padding-bottom:8px;}
  .login-card{padding-top:18px; padding-bottom:18px;}
  .form-emblem{margin-bottom:6px;}
  .form-emblem img{width:46px; height:46px;}
  .form-kicker{margin-bottom:4px;}
  .office-name{font-size:19px;}
  .title-divider{margin:7px 0 12px;}
  .field-group{margin-bottom:5px;}
  .field-label{margin-bottom:4px;}
  .field-box{min-height:46px;}
  .field-box input{padding-top:11px; padding-bottom:11px;}
  .field-error{min-height:16px; margin-top:2px;}
  .field-row{margin:0 0 10px;}
  .btn-submit{height:48px;}
  .trust-divider{margin-top:12px;}
  .trust-badges{margin-top:8px;}
  .trust-ic{width:28px; height:28px;}
  .notice-box{margin-top:8px; padding-top:8px; padding-bottom:8px;}
  .form-foot{padding-top:6px; padding-bottom:8px;}
}

@media (max-width:640px) and (max-height:700px){
  .form-topbar{padding-top:7px;}
  .form-topbar-actions{transform:scale(.92); transform-origin:right center;}
  .form-wrap{padding-top:5px; padding-bottom:5px;}
  .login-card{padding-top:12px; padding-bottom:12px;}
  .form-emblem img{width:38px; height:38px;}
  .form-kicker{font-size:10px;}
  .office-name{font-size:16px;}
  .title-divider{margin:5px 0 8px;}
  .field-label{font-size:12.5px;}
  .field-box{min-height:42px;}
  .field-error{font-size:10.5px; min-height:14px;}
  .field-row{margin-bottom:7px;}
  .btn-submit{height:44px;}
  .trust-divider{margin-top:8px;}
  .trust-badges{margin-top:5px;}
  .trust-badge{gap:3px;}
  .trust-ic{width:24px; height:24px; font-size:11px;}
  .notice-box{margin-top:6px; padding-top:6px; padding-bottom:6px;}
  .form-foot{font-size:10.5px; padding-top:4px; padding-bottom:5px;}
}