/* =====================================================================
   auth.css — Trang đăng nhập (form bên trái, minh họa bên phải).
   Nạp sau article.css + site.css trong layouts.article.
   ===================================================================== */
.is-auth{
  --au-primary:#1f6bff;
  --au-primary-600:#1557e0;
  background:
    radial-gradient(520px 420px at 92% 18%, color-mix(in srgb,var(--au-primary) 10%,transparent), transparent 70%),
    radial-gradient(600px 420px at 0% 100%, color-mix(in srgb,var(--au-primary) 8%,transparent), transparent 70%),
    #f4f7fd;
}
:root[data-theme="dark"] .is-auth{background:var(--paper);}

/* Không có footer: nội dung căn giữa trong phần còn lại của màn hình (trừ header) -> không cần cuộn */
.au-page{position:relative;max-width:1100px;margin:0 auto;padding:16px 24px 12px;
  min-height:calc(100vh - 66px);min-height:calc(100dvh - 66px);display:flex;flex-direction:column;justify-content:center;}
/* họa tiết chấm hai bên */
.au-page::before,.au-page::after{
  content:"";position:absolute;width:130px;height:150px;z-index:-1;opacity:.55;
  background:radial-gradient(circle, color-mix(in srgb,var(--au-primary) 35%,transparent) 1.4px, transparent 1.8px) 0 0 / 18px 18px;
}
.au-page::before{left:-40px;top:22%;}
.au-page::after{right:-40px;bottom:120px;}

.au-card{
  display:grid;grid-template-columns:1fr 1fr;overflow:hidden;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:24px;
}
:root:not([data-theme="dark"]) .au-card{background:#fff;}

/* ---------- FORM ---------- */
.au-form{padding:36px 46px 30px;}
.au-chip{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 12px;border-radius:9px;
  font-size:13px;font-weight:700;color:var(--au-primary);background:color-mix(in srgb,var(--au-primary) 10%,var(--surface));
}
.au-form h1{margin:0 0 8px;font-size:clamp(28px,3vw,34px);line-height:1.1;font-weight:800;letter-spacing:-.03em;color:var(--ink);}
.au-lead{margin:0 0 22px;font-size:15.5px;line-height:1.6;color:var(--ink-3);max-width:38ch;}

.au-errors{background:color-mix(in srgb,#dc2626 10%,var(--surface));border:1px solid color-mix(in srgb,#dc2626 35%,var(--line));
  color:#dc2626;padding:11px 14px;border-radius:12px;margin:0 0 18px;font-size:14px;}
.au-status{background:color-mix(in srgb,#10b981 10%,var(--surface));border:1px solid color-mix(in srgb,#10b981 35%,var(--line));
  color:#059669;padding:11px 14px;border-radius:12px;margin:0 0 18px;font-size:14px;}

.au-field{margin-bottom:16px;}
.au-field > label{display:block;margin:0 0 6px;font-size:14.5px;font-weight:700;color:var(--ink);}
.au-input{position:relative;display:flex;align-items:center;}
.au-input > i{position:absolute;left:18px;font-size:17px;color:var(--ink-3);pointer-events:none;}
.au-input input{
  width:100%;height:50px;padding:0 50px 0 52px;border-radius:13px;
  background:var(--surface-2);border:1px solid var(--line-soft);color:var(--ink);
  font-family:var(--sans);font-size:15.5px;transition:border-color .15s,background .15s;
}
.au-input input::placeholder{color:var(--ink-3);}
.au-input input:focus{outline:none;border-color:var(--au-primary);background:var(--surface);}
.au-eye{
  position:absolute;right:8px;width:40px;height:40px;border:0;border-radius:10px;background:none;
  color:var(--ink-3);cursor:pointer;display:grid;place-items:center;font-size:17px;
}
.au-eye:hover{color:var(--ink);}
.au-eye .fa-eye-slash{display:none;}
.au-eye.on .fa-eye{display:none;}
.au-eye.on .fa-eye-slash{display:inline;}

.au-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 20px;}
.au-remember{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-2);user-select:none;cursor:pointer;}
.au-remember input{width:20px;height:20px;margin:0;accent-color:var(--au-primary);}
.au-forgot{font-size:15px;font-weight:700;color:var(--au-primary);text-decoration:none;white-space:nowrap;}
.au-forgot:hover{text-decoration:underline;}

.au-submit{
  width:100%;height:54px;border:0;border-radius:13px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:var(--au-primary);color:#fff;font-family:var(--sans);font-size:17px;font-weight:700;
  transition:background .15s;
}
.au-submit:hover{background:var(--au-primary-600);}
.au-submit i{transition:transform .2s;}
.au-submit:hover i{transform:translateX(3px);}

.au-switch{margin:20px 0 0;text-align:center;font-size:15px;color:var(--ink-3);}
.au-switch a{color:var(--au-primary);font-weight:700;text-underline-offset:3px;}

/* ---------- MINH HỌA ---------- */
.au-side{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg, color-mix(in srgb,var(--au-primary) 9%,var(--surface)) 0%, color-mix(in srgb,var(--au-primary) 4%,var(--surface)) 100%);
}
.au-art{position:relative;flex:1 1 auto;min-height:220px;overflow:hidden;}
.au-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%;}
/* mờ dần xuống phần chữ */
.au-art::after{
  content:"";position:absolute;inset:auto 0 0 0;height:45%;
  background:linear-gradient(180deg,transparent, color-mix(in srgb,var(--au-primary) 5%,var(--surface)));
}
:root:not([data-theme="dark"]) .au-art::after{background:linear-gradient(180deg,transparent,#f2f6fe);}
:root:not([data-theme="dark"]) .au-side{background:linear-gradient(180deg,#eaf1fe 0%,#f2f6fe 100%);}
.au-submit-gap{margin-top:6px;}
.au-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;}
.au-pair .au-input > i{left:15px;}
.au-pair .au-input input{padding-left:42px;padding-right:44px;}

.au-pitch{position:relative;padding:0 38px 30px;}
.au-pitch h2{margin:0 0 8px;font-size:22px;line-height:1.25;font-weight:800;letter-spacing:-.02em;color:var(--ink);}
.au-pitch > p{margin:0 0 18px;font-size:14.5px;line-height:1.6;color:var(--ink-3);}
.au-feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.au-feats li{display:flex;flex-direction:column;gap:3px;}
.au-feats .ic{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:17px;margin-bottom:8px;
  color:var(--c);background:color-mix(in srgb,var(--c) 14%,var(--surface));
}
.au-feats b{font-size:15px;font-weight:800;color:var(--ink);}
.au-feats span{font-size:13px;line-height:1.45;color:var(--ink-3);}

.au-back{display:flex;justify-content:center;margin:10px 0 0;}
.au-back a{display:inline-flex;align-items:center;gap:10px;color:var(--ink-2);font-size:15px;font-weight:500;text-decoration:none;}
.au-back a:hover{color:var(--au-primary);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:920px){
  .au-card{grid-template-columns:1fr;}
  .au-side{display:none;}
  .au-card{max-width:560px;margin:0 auto;}
}
/* Màn hình thấp (laptop nhỏ, cửa sổ thu nhỏ): bỏ bớt chữ phụ để vẫn vừa một màn hình */
@media (max-height:720px) and (min-width:921px){
  .au-form{padding:26px 44px 22px;}
  .au-chip{display:none;}
  .au-lead{margin-bottom:16px;}
  .au-feats span{display:none;}
  .au-pitch > p{margin-bottom:14px;}
}
@media (max-width:560px){
  .au-page{padding:20px 14px 20px;justify-content:flex-start;}
  .au-page::before,.au-page::after{display:none;}
  .au-form{padding:30px 22px 28px;}
  .au-pair{grid-template-columns:1fr;}
  .au-input input{height:50px;}
  .au-submit{height:52px;}
}
.au-art-wide img{object-position:22% 40%;}