/* NQ Work sign-in v8 (owner 2026-10-21: modern UI) for Templates/login.html, plus the /forgot-password page.
   Computers: photo with a deep-blue overlay and the message on the left, a clean white sign-in panel on the right.
   Phones: a short photo strip on top, the panel full width below. No external fonts or requests. */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;color:#16294a;background:#f4f7fc;-webkit-font-smoothing:antialiased}
.auth-page{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(400px,1fr)}

/* left: photo + message (the photo from Thư viện hình ảnh "login" when uploaded, as --auth-photo; otherwise the office photo) */
/* 2026-10-23: on a computer only the building part of the office photo (nqwork-login-photo.jpg, cut from
   nqwork-login-background.png): the slogan printed on the right of the full picture showed cut in half on wide or zoomed-out screens */
/* the photo itself, with only the logo on a light top shade (owner 2026-10-21: no slogan or feature list) */
.auth-hero{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:24px;padding:36px 44px;color:#fff;overflow:hidden;
 background:linear-gradient(180deg,rgba(8,30,72,.72) 0%,rgba(8,30,72,.25) 18%,rgba(8,30,72,0) 34%,rgba(8,30,72,0) 82%,rgba(8,30,72,.5) 100%),var(--auth-photo,url('/images/ui/login/nqwork-login-photo.jpg')) 73% center/cover no-repeat,#0a2350}
.auth-hero::after{content:"";position:absolute;inset:-30% -20% auto auto;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(90,163,255,.22),transparent);pointer-events:none}
.auth-hero-brand{display:flex;align-items:center;gap:12px;position:relative}
.auth-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.25);flex:none;overflow:hidden}
.auth-mark svg{width:36px;height:36px}
.auth-mark img{width:100%;height:100%;object-fit:contain}
.auth-hero-name{display:grid;line-height:1.2}
.auth-hero-name strong{font-size:19px;font-weight:800}
.auth-hero-name small{font-size:13px;color:#c5d7f2}
.auth-hero-main{position:relative;max-width:560px;margin-top:clamp(12px,5vh,56px)}
.auth-eyebrow{margin:0 0 14px;color:#9fc6ff;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.auth-hero h1{margin:0;font-size:clamp(34px,3.6vw,52px);line-height:1.12;font-weight:800;letter-spacing:-.02em}
.auth-hero h1 em{font-style:normal;color:#ffc35a}

.auth-hero-team{position:relative;margin:4px 0 0;font-size:15px;color:#fff!important;text-shadow:0 1px 6px rgba(0,0,0,.75),0 0 2px rgba(0,0,0,.6)}
.auth-hero-foot{position:relative;margin:auto 0 0;color:#e3ecfa;font-size:13px;text-shadow:0 1px 3px rgba(0,0,0,.6)}

/* right: a soft tinted side with a faint dot grid and glow, the sign-in card floating on it */
.auth-main{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:40px 24px 28px;overflow-x:hidden;
 background:radial-gradient(circle at 85% 12%,rgba(11,99,229,.12),transparent 42%),radial-gradient(circle at 10% 92%,rgba(255,195,90,.14),transparent 40%),
  radial-gradient(rgba(10,35,80,.09) 1px,transparent 1.4px) 0 0/22px 22px,linear-gradient(180deg,#f3f7fd,#eaf1fb)}
.auth-main::before{content:"";position:absolute;right:-60px;top:28%;width:260px;height:260px;pointer-events:none;opacity:.06;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6l1-8Z' fill='%230a2350'/%3E%3C/svg%3E") center/contain no-repeat}
.auth-panel{position:relative;width:min(100%,440px);padding:34px 34px 28px;background:#fff;border:1px solid #e3eaf5;border-radius:22px;box-shadow:0 24px 60px rgba(10,35,80,.12),0 2px 6px rgba(10,35,80,.05)}
.auth-panel-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid #edf1f7}
.auth-panel-brand .auth-mark{width:40px;height:40px;border-radius:11px;box-shadow:0 4px 12px rgba(10,35,80,.15)}
.auth-panel-brand .auth-mark svg{width:31px;height:31px}
.auth-greeting{margin:0 0 4px;color:#0b63e5;font-size:14px;font-weight:700}
.auth-help-links{position:relative;width:min(100%,440px);display:grid;grid-template-columns:1fr 1fr;gap:10px}
.auth-help-link{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid #dde6f3;border-radius:14px;background:rgba(255,255,255,.82);backdrop-filter:blur(4px);color:#16294a;font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,background-color .15s}
.auth-help-link:hover{border-color:#b9cdea;background:#fff;box-shadow:0 8px 20px rgba(10,35,80,.08)}
.auth-help-link:focus-visible{outline:2px solid #0b63e5;outline-offset:2px}
.auth-help-link svg{flex:none;width:22px;height:22px;fill:#0b63e5}
.auth-help-link span{display:grid;gap:2px;min-width:0}
.auth-help-link strong{font-size:13px}
.auth-help-link small{font-size:12px;color:#5d6f8c;line-height:1.35}
.auth-help-link[hidden]{display:none}
.auth-steps p{margin:8px 0 4px}
.auth-steps ol,.auth-steps-list{margin:0 0 6px;padding-left:20px;line-height:1.6;font-size:14px}
.auth-steps-list li{margin-bottom:8px}
.auth-panel-brand strong{display:block;font-size:18px;font-weight:800;color:#0a2350}
.auth-panel-brand small{color:#5d6f8c;font-size:13px}
.auth-panel h2{margin:0;font-size:30px;font-weight:800;color:#0a2350;letter-spacing:-.01em}
.auth-sub{margin:8px 0 26px;color:#5d6f8c;font-size:15px;line-height:1.5}
.auth-login-error{display:flex;gap:10px;align-items:flex-start;margin:-6px 0 20px;padding:12px 14px;border-radius:12px;background:#fdecec;border:1px solid #f5c2c2;color:#a11d1d;font-size:14px;line-height:1.45}
.auth-label{display:block;margin:0 0 7px;font-size:14px;font-weight:700;color:#24385c}
.auth-field{position:relative;display:flex;align-items:center;margin-bottom:18px}
.auth-field-icon{position:absolute;left:14px;width:20px;height:20px;fill:#7d90ad;pointer-events:none}
.auth-input{width:100%;height:50px;padding:0 48px 0 44px;border:1.5px solid #d3dceb;border-radius:12px;background:#f8fafd;color:#16294a;font:inherit;font-size:16px;transition:border-color .15s,box-shadow .15s,background-color .15s}
.auth-input::placeholder{color:#97a6bd}
.auth-input:hover{border-color:#b9c7dd}
.auth-input:focus{outline:none;border-color:#0b63e5;background:#fff;box-shadow:0 0 0 4px rgba(11,99,229,.15)}
.auth-field:focus-within .auth-field-icon{fill:#0b63e5}
.auth-eye{position:absolute;right:6px;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:10px;background:transparent;cursor:pointer}
.auth-eye svg{width:21px;height:21px;fill:#6b7f9e}
.auth-eye:hover{background:#eef3fb}
.auth-eye:focus-visible{outline:2px solid #0b63e5}
.auth-eye .is-hide,.auth-eye[aria-pressed="true"] .is-show{display:none}
.auth-eye[aria-pressed="true"] .is-hide{display:block}
.auth-caps{margin:-10px 0 14px;color:#9a5b00;font-size:13px;font-weight:600}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 22px;font-size:14px}
.auth-remember{display:flex;align-items:center;gap:8px;color:#3b4f72;cursor:pointer}
.auth-remember input{width:18px;height:18px;accent-color:#0b63e5}
.auth-link{color:#0b63e5;font-weight:600;text-decoration:none}
.auth-link:hover{text-decoration:underline}
.auth-submit{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;border:0;border-radius:12px;background:linear-gradient(180deg,#1474f0,#0b5fd6);color:#fff;font:inherit;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 8px 20px rgba(11,99,229,.28);transition:filter .15s,box-shadow .15s,transform .05s}
.auth-submit:hover{filter:brightness(1.06);box-shadow:0 10px 24px rgba(11,99,229,.34)}
.auth-submit:active{transform:translateY(1px)}
.auth-submit:focus-visible{outline:3px solid #9cc6ff;outline-offset:2px}
.auth-submit:disabled{cursor:progress;filter:saturate(.8)}
.auth-spinner{display:none;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;animation:auth-spin .7s linear infinite}
.auth-submit.is-busy .auth-spinner{display:block}
@keyframes auth-spin{to{transform:rotate(360deg)}}
.auth-submit.is-small{width:auto;height:44px;padding:0 22px;margin-top:6px}
.auth-submit[hidden],.auth-dialog [hidden]{display:none!important}
.auth-foot{position:relative;margin:4px 0 0;text-align:center;color:#7d8fab;font-size:13px}

/* "Quên mật khẩu?" */
.auth-dialog{width:min(92vw,420px);padding:26px;border:0;border-radius:18px;box-shadow:0 24px 60px rgba(6,24,58,.35);color:#16294a}
.auth-dialog::backdrop{background:rgba(6,24,58,.55)}
.auth-dialog h3{margin:0 0 10px;font-size:20px;color:#0a2350}
.auth-dialog p{margin:0 0 10px;line-height:1.6;font-size:15px}
.auth-dialog-note{color:#5d6f8c;font-size:13px!important}

/* /forgot-password (without dialog support or opened directly) */
.auth-help-page{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:20px;background:linear-gradient(160deg,#0c2f68,#0a2350)}
.auth-help-card{width:min(100%,480px);padding:32px;background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.auth-help-card .auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-weight:800;color:#0a2350}
.auth-help-card .auth-brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#eaf2fd}
.auth-help-card h1{margin:0 0 10px;font-size:26px;color:#0a2350}
.auth-help-card p{line-height:1.65;font-size:15px;color:#2b3f62}
.auth-back{display:inline-block;margin-top:10px;padding:12px 18px;border-radius:12px;background:#0b63e5;color:#fff;text-decoration:none;font-weight:700}

/* tablets */
/* short laptop screens: everything fits without cutting the bottom */
@media(min-width:801px) and (max-height:820px){
 .auth-main{justify-content:flex-start;padding-top:28px;gap:14px}
 .auth-panel{padding:24px 30px 22px}
 .auth-panel-brand{margin-bottom:14px;padding-bottom:12px}
 .auth-sub{margin-bottom:18px}
 .auth-field{margin-bottom:14px}
 .auth-row{margin-bottom:16px}
}
@media(max-width:1100px) and (min-width:801px){
 .auth-page{grid-template-columns:minmax(0,1fr) minmax(380px,1fr)}
 .auth-hero{padding:28px 30px}
 
}
/* phones */
@media(max-width:800px){
 .auth-page{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
 .auth-hero{min-height:170px;padding:22px 20px 40px;justify-content:flex-end;
  background:linear-gradient(180deg,rgba(8,30,72,0) 0%,rgba(8,30,72,.1) 45%,rgba(8,30,72,.8) 100%),var(--auth-photo,url('/images/ui/login/nqwork-login-background.png')) 37% 78%/350% auto no-repeat,#0a2350}   /* zoomed on the building sign */
 .auth-hero-main,.auth-hero-foot,.auth-hero-team{display:none}
 .auth-main{z-index:1;justify-content:flex-start;gap:14px;margin-top:-24px;padding:0 0 24px;background:#fff;border-radius:24px 24px 0 0}
 .auth-main::before{display:none}
 .auth-panel{width:100%;padding:26px 20px 4px;border:0;border-radius:24px 24px 0 0;box-shadow:none}
 .auth-panel-brand{display:none}
 .auth-help-links{grid-template-columns:minmax(0,1fr);width:100%;padding:0 20px}
 .auth-panel h2{font-size:26px}
 .auth-sub{margin-bottom:22px}
}
@media (prefers-reduced-motion:reduce){.auth-spinner{animation-duration:2s}.auth-input,.auth-submit{transition:none}}