/* Auth popup — tách riêng khỏi index/template để dễ bảo trì. */
.authx-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s ease}
.authx-modal.is-open{opacity:1;visibility:visible;pointer-events:auto}
.authx-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(32,34,40,.52);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);cursor:default}
.authx-dialog{position:relative;z-index:1;width:min(540px,100%);max-height:min(780px,calc(100dvh - 28px));overflow:auto;padding:22px;border:1px solid rgba(25,29,38,.07);border-radius:18px;background:#fff;box-shadow:0 26px 80px rgba(18,22,30,.28);transform:translateY(12px) scale(.985);transition:transform .22s ease;color:#30343d;outline:none}
.authx-modal.is-open .authx-dialog{transform:translateY(0) scale(1)}
.authx-close{position:absolute;top:7px;right:9px;z-index:3;width:31px;height:31px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#a2a5ad;font:400 24px/1 Arial,sans-serif;cursor:pointer;transition:.18s}
.authx-close:hover{background:#f5f5f7;color:#ec5669}
.authx-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:0 20px 23px;padding:4px;border-radius:8px;background:#f2f2f4}
.authx-tabs button{height:40px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:#646873;font-size:12px;font-weight:700;cursor:pointer;transition:.18s}
.authx-tabs button[aria-selected="true"]{background:linear-gradient(135deg,#f48a98,#ed596e);color:#fff;box-shadow:0 5px 14px rgba(237,89,110,.22)}
.authx-panels{min-height:220px}
.authx-form[hidden]{display:none!important}
.authx-form{display:flex;flex-direction:column;gap:15px;animation:authx-in .16s ease}
@keyframes authx-in{from{opacity:.2;transform:translateY(4px)}to{opacity:1;transform:none}}
.authx-field{display:flex;flex-direction:column;gap:7px}
.authx-field label{color:#343842;font-size:11px;font-weight:700}
.authx-control{position:relative;display:flex;align-items:center}
.authx-control input{width:100%!important;height:46px!important;min-height:46px!important;padding:0 42px!important;border:1px solid #e2e3e7!important;border-radius:7px!important;background:#f6f6f8!important;color:#30343d!important;font-size:12px!important;box-shadow:none!important;outline:0;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.authx-control input::placeholder{color:#b1b3bb}
.authx-control input:focus{border-color:#ec6b7d!important;background:#fff!important;box-shadow:0 0 0 3px rgba(236,107,125,.10)!important}
.authx-control.is-invalid input{border-color:#e35668!important;box-shadow:0 0 0 3px rgba(227,86,104,.08)!important}
.authx-control__icon{position:absolute;left:13px;top:50%;width:17px;height:17px;transform:translateY(-50%);color:#9a9da6;pointer-events:none}
.authx-control__icon svg,.authx-password-toggle svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.authx-password-toggle{position:absolute;right:9px;top:50%;width:30px;height:30px;padding:7px;border:0;border-radius:6px;background:transparent;color:#9296a0;transform:translateY(-50%);cursor:pointer}
.authx-password-toggle:hover{background:#ececef;color:#60646d}
.authx-field__hint{margin-top:-2px;color:#999da6;font-size:10px;line-height:1.4}
.authx-field__error{display:none;margin-top:-2px;color:#e3485d;font-size:10px;line-height:1.35}
.authx-field.has-error .authx-field__error{display:block}
.authx-submit{width:100%;height:46px;margin-top:3px;border:0;border-radius:6px;background:linear-gradient(135deg,#f48a98,#ed596e);color:#fff;font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 8px 18px rgba(237,89,110,.18);transition:transform .15s ease,filter .15s ease,opacity .15s ease}
.authx-submit:hover{filter:saturate(1.08) brightness(.985);transform:translateY(-1px)}
.authx-submit:disabled{opacity:.65;cursor:not-allowed;transform:none}
.authx-message{min-height:0;margin-top:0;padding:0;border-radius:7px;font-size:11px;line-height:1.45;text-align:center;transition:.16s}
.authx-message:not(:empty){margin-top:13px;padding:10px 12px}
.authx-message.is-error{background:#fff0f2;color:#c84052}
.authx-message.is-success{background:#eefaf3;color:#268557}
.authx-forgot-copy{display:flex;flex-direction:column;gap:5px;margin:-2px 0 1px}
.authx-forgot-copy strong{font-size:14px;color:#333741}
.authx-forgot-copy span{font-size:10px;color:#858993;line-height:1.5}
.authx-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
body.authx-lock{overflow:hidden}
.auth-route-stage{min-height:58vh;display:grid;place-items:center;padding:60px 18px;text-align:center}
.auth-route-stage__card{max-width:650px;padding:28px;border:1px solid rgba(150,112,55,.12);border-radius:22px;background:rgba(255,253,248,.85);box-shadow:0 18px 44px rgba(112,78,33,.08)}
.auth-route-stage__card img{width:min(310px,80%);height:auto}
.auth-route-stage__card h1{margin:14px 0 8px;color:#4d3b28;font-size:clamp(26px,5vw,42px)}
.auth-route-stage__card p{margin:0 0 18px;color:#83715b}
.auth-route-stage__actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.auth-route-stage__actions a{min-width:128px;min-height:42px;display:inline-flex;align-items:center;justify-content:center;padding:0 16px;border-radius:10px;text-decoration:none;font-size:12px;font-weight:800}
.auth-route-stage__actions a:first-child{background:linear-gradient(135deg,#f48a98,#ed596e);color:#fff}.auth-route-stage__actions a:last-child{background:#f3eee7;color:#6b5841}
@media(max-width:620px){
  .authx-modal{padding:12px}
  .authx-dialog{width:100%;padding:18px 14px 16px;border-radius:15px;max-height:calc(100dvh - 24px)}
  .authx-tabs{margin:0 7px 20px;gap:3px;padding:3px}
  .authx-tabs button{height:37px;padding:0 5px;font-size:10px}
  .authx-close{top:3px;right:3px}
  .authx-form{gap:13px}
  .authx-control input{height:44px!important;min-height:44px!important;font-size:11px!important}
  .authx-submit{height:44px}
}

/* PERF3 — avoid full-screen live blur while the auth modal is open. */
.authx-backdrop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(32,34,40,.62)}