﻿/* Đăng nhập / đăng ký / quên mật khẩu: khung hai cột (bên trái giới thiệu, bên phải biểu mẫu) + nút đăng nhập bên thứ ba nổi bật. Dùng token màu của lms.css / lms-skin.css nên tự đổi theo giao diện sáng / tối. */
.au{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);max-width:1040px;margin:28px auto 0;border-radius:24px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-lg)}
.au-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:26px;padding:44px 38px;color:#fff;background:linear-gradient(rgba(0,0,0,.14),rgba(0,0,0,.14)),var(--grad)}
.au-hero::before,.au-hero::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.09);pointer-events:none}
.au-hero::before{width:340px;height:340px;right:-130px;top:-130px}
.au-hero::after{width:230px;height:230px;left:-90px;bottom:-100px}
.au-hero>*{position:relative}
.au-hero h1{color:#fff;font-size:clamp(26px,3vw,34px);line-height:1.2}
.au-hero p{color:rgba(255,255,255,.9);margin-top:10px;max-width:42ch}
.au-eyebrow{display:inline-block;margin-bottom:10px;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.18);font-size:12px;font-weight:600;letter-spacing:.04em}
.au-brand{display:flex;align-items:center;gap:12px;font-family:var(--f-display);font-weight:600;font-size:18px}
.au-brand .logo-mark{background:rgba(255,255,255,.2);box-shadow:none;color:#fff}
.au-points{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.au-points li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5}
.au-points .pi{width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.au-points svg.i{width:18px;height:18px}
.au-main{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:40px 44px}
.au-main h2{font-size:24px}
.au-sub{color:var(--muted);font-size:14px;margin-top:-10px}
.au-social{display:grid;gap:10px}
.au-sbtn{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;border-radius:13px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-weight:600;font-size:15px;text-decoration:none;box-shadow:var(--sh);transition:transform .15s,box-shadow .15s,background .15s}
.au-sbtn:hover{transform:translateY(-1px);box-shadow:var(--sh-lg);background:var(--subtle);color:var(--ink)}
.au-sbtn .si{width:26px;height:26px;display:grid;place-items:center;flex:none}
.au-sbtn .si svg{width:22px;height:22px}
.au-sbtn .t{flex:1;text-align:center;margin-right:26px}
.au-sbtn.au-facebook{background:#1877F2;border-color:#1877F2;color:#fff}
.au-sbtn.au-facebook:hover{background:#1568d6;color:#fff}
.au-sbtn.au-engnote{background:var(--grad);border-color:transparent;color:#fff;box-shadow:var(--sh-glow)}
.au-sbtn.au-engnote:hover{filter:brightness(1.06);background:var(--grad);color:#fff}
.au-sbtn.is-busy{opacity:.7;pointer-events:none}
.au-form{display:grid;gap:14px}
.au-form .field input{min-height:46px}
.au-form .btn.primary{min-height:50px;font-size:15px;width:100%}
.au-pw{position:relative}
.au-pw input{width:100%;padding-right:46px}
.au-pw button{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:8px;display:grid;place-items:center}
.au-pw button:hover{color:var(--ink);background:var(--subtle)}
.au-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--brand-soft);font-size:13.5px;line-height:1.55}
.au-note svg.i{color:var(--brand);margin-top:2px}
.au-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px}
.au-links a{font-weight:600;color:var(--brand)}
.au-foot{font-size:14px;color:var(--muted);text-align:center}
.au-foot a{font-weight:600;color:var(--brand)}
.au-terms{font-size:12.5px;color:var(--muted);text-align:center}
.au-terms a{text-decoration:underline}
:root[data-theme="dark"] .au-hero{background:linear-gradient(rgba(0,0,0,.36),rgba(0,0,0,.36)),var(--grad)}
@media (max-width:860px){
  .au{grid-template-columns:minmax(0,1fr);margin-top:10px;border-radius:18px}
  .au-hero{padding:18px 20px;gap:0}
  .au-hero h1{font-size:22px}
  .au-brand,.au-eyebrow,.au-hero p,.au-points{display:none}          /* điện thoại: chỉ giữ tiêu đề cho gọn */
  .au-main{padding:24px 20px}
}
@media (prefers-reduced-motion:reduce){.au-sbtn{transition:none}.au-sbtn:hover{transform:none}}
