/* QT EDU – giao diện xác thực (đăng nhập / đăng ký / quên & đặt lại mật khẩu). Mọi selector bắt đầu bằng .qau để không ảnh hưởng trang khác. */
.qau { --red:#d80b27; --deep:#a80d24; --gold:#d9aa46; --ink:#202b3d; --mute:#64748b; --line:#e5e7eb; font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--ink); min-height:100vh; display:grid; grid-template-rows:1fr auto; align-items:center; justify-items:center; padding:clamp(16px,4vw,40px) clamp(12px,3vw,32px) calc(16px + env(safe-area-inset-bottom)); background:radial-gradient(1200px 500px at 85% -10%,#fde4e8 0,transparent 60%),radial-gradient(900px 500px at 0% 100%,#fdeef0 0,transparent 55%),#f8f9fc; box-sizing:border-box; }
.qau *, .qau *::before, .qau *::after { box-sizing:border-box; }
.qau-shell { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); width:100%; max-width:1120px; background:#fff; border-radius:24px; overflow:hidden; box-shadow:0 20px 60px rgba(168,13,36,.14),0 2px 8px rgba(32,43,61,.06); border:1px solid #f3dde0; }
.qau-brand { position:relative; display:flex; flex-direction:column; gap:10px; padding:32px 36px 0; color:#fff; background:linear-gradient(160deg,#ee2b45 0%,#d80b27 45%,#a80d24 100%); overflow:hidden; min-height:600px; }
.qau-brand::before { content:""; position:absolute; inset:auto -20% -10% -20%; height:55%; background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent); }
.qau-logo { display:flex; align-items:center; gap:12px; position:relative; }
.qau-badge { background:#fff; border-radius:999px; padding:6px 14px; display:inline-grid; place-items:center; } .qau-badge img { display:block; height:36px; width:auto; }
.qau-label { font-weight:800; font-size:.8rem; letter-spacing:.06em; }
.qau-brand h2 { margin:14px 0 0; font-size:clamp(1.7rem,2.6vw,2.3rem); line-height:1.15; font-weight:800; position:relative; max-width:14em; color:#fff; }
.qau-brand > p { margin:0; font-size:1rem; opacity:.95; position:relative; max-width:22em; color:#fff; }
.qau-i { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.qau-panda { position:relative; align-self:center; margin:auto 0 -6px; width:min(58%,250px); height:auto; filter:drop-shadow(0 12px 18px rgba(0,0,0,.25)); pointer-events:none; z-index:1; }
.qau-benefits { list-style:none; margin:0 -36px 0; padding:16px 18px 20px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; position:relative; background:rgba(168,13,36,.55); backdrop-filter:blur(2px); }
.qau-benefits li { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; font-size:.82rem; line-height:1.3; color:#fff; } .qau-benefits li + li { border-left:1px solid rgba(255,255,255,.25); }
.qau-benefits .qau-i { width:26px; height:26px; }
.qau-card { padding:clamp(24px,4vw,48px); display:flex; flex-direction:column; justify-content:center; max-width:560px; width:100%; margin-inline:auto; }
.qau-card h1 { margin:0 0 8px; font-size:clamp(1.55rem,2.6vw,2.1rem); line-height:1.2; font-weight:800; color:var(--ink); }
.qau-sub { margin:0 0 20px; color:#475569; font-size:1rem; line-height:1.5; }
.qau-form { display:grid; gap:14px; }
.qau-field label { display:flex; align-items:center; gap:8px; font-weight:700; font-size:.95rem; margin-bottom:6px; color:var(--ink); } .qau-field label .qau-i { width:18px; height:18px; color:var(--ink); }
.qau-inwrap { position:relative; } .qau-inwrap input { width:100%; height:52px; border:1px solid #d6dae3; border-radius:12px; padding:0 48px 0 16px; background:#fff; font-size:1rem; color:var(--ink); transition:border-color .15s, box-shadow .15s; }
.qau-inwrap input::placeholder { color:#94a3b8; } .qau-inwrap input:focus { outline:0; border-color:var(--red); box-shadow:0 0 0 4px rgba(216,11,39,.12); }
.qau-field.has-err input { border-color:#d92d20; box-shadow:0 0 0 3px rgba(217,45,32,.1); }
.qau-eye { position:absolute; right:4px; top:50%; transform:translateY(-50%); width:44px; height:44px; border:0; background:none; color:#64748b; cursor:pointer; border-radius:10px; display:grid; place-items:center; } .qau-eye:hover { background:#f3f5fa; } .qau-eye .qau-i { width:20px; height:20px; }
.qau-err { min-height:0; margin:5px 2px 0; color:#d92d20; font-size:.86rem; } .qau-err:empty { display:none; }
.qau-row { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.qau a { color:var(--red); font-weight:700; text-decoration:none; } .qau a:hover { text-decoration:underline; }
.qau-check { display:flex; align-items:flex-start; gap:10px; font-size:.92rem; line-height:1.45; color:#334155; cursor:pointer; }
.qau-check input { width:20px; height:20px; margin:2px 0 0; flex:none; accent-color:var(--red); } .qau-check em { color:var(--mute); font-style:normal; }
.qau-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; height:54px; border:0; border-radius:12px; background:linear-gradient(180deg,#e51c35,#c8102e); color:#fff !important; font-size:1.05rem; font-weight:700; cursor:pointer; text-decoration:none !important; box-shadow:0 8px 18px rgba(216,11,39,.28); transition:transform .15s, box-shadow .15s, opacity .15s; font-family:inherit; }
.qau-btn:hover { transform:translateY(-1px); box-shadow:0 10px 22px rgba(216,11,39,.34); } .qau-btn:focus-visible { outline:3px solid var(--gold); outline-offset:2px; } .qau-btn:disabled { opacity:.7; cursor:progress; transform:none; }
.qau-btn.ghost { background:#fff; color:var(--red) !important; border:1px solid var(--red); box-shadow:none; } .qau-btn .qau-i { width:20px; height:20px; }
.qau-spin { display:none; width:18px; height:18px; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; animation:qau-s .7s linear infinite; } .qau-form.is-busy .qau-spin { display:inline-block; }
@keyframes qau-s { to { transform:rotate(360deg); } }
.qau-links { margin-top:18px; text-align:center; color:#334155; } .qau-links p { margin:0; }
.qau-or { display:flex; align-items:center; gap:14px; color:var(--mute); margin:6px 0 14px; font-size:.9rem; } .qau-or::before, .qau-or::after { content:""; flex:1; height:1px; background:var(--line); }
.qau-alert { margin:0 0 14px; padding:12px 14px; border-radius:12px; background:#fdecec; color:#b42318; font-size:.95rem; border:1px solid #f9c9c4; } .qau-alert.ok { background:#e6f6ee; color:#146c43; border-color:#bfe5d0; } .qau-alert[hidden] { display:none; }
.qau-meter { display:grid; grid-template-columns:repeat(4,1fr) auto; gap:6px; align-items:center; margin-top:-6px; } .qau-meter i { height:6px; border-radius:99px; background:#e5e7eb; } .qau-meter span { font-size:.8rem; color:var(--mute); min-width:70px; text-align:right; }
.qau-meter[data-s="1"] i:nth-child(-n+1) { background:#d92d20; } .qau-meter[data-s="2"] i:nth-child(-n+2) { background:#f79009; } .qau-meter[data-s="3"] i:nth-child(-n+3) { background:#84cc16; } .qau-meter[data-s="4"] i { background:#16a34a; }
.qau-done { text-align:center; display:grid; gap:12px; justify-items:center; } .qau-done[hidden] { display:none; } .qau-done h2 { margin:0; } .qau-ok { width:64px; height:64px; border-radius:50%; background:#e6f6ee; color:#16a34a; display:grid; place-items:center; font-size:2rem; font-weight:800; } .qau-small { color:#475569; font-size:.92rem; margin:0; } .qau-done-btns { display:grid; gap:10px; width:100%; }
.qau-shell-min { padding:40px 16px; text-align:center; }
/* Nút liên hệ nổi của website: nhỏ gọn, không bị cắt mép phải trên trang xác thực */
body.qtedu-auth-page #button-contact-vr { transform:scale(.62); transform-origin:right bottom; right:6px !important; bottom:max(8px,env(safe-area-inset-bottom)) !important; opacity:.92; }
@media (max-width:900px) {
  .qau { align-items:start; padding-top:max(12px,env(safe-area-inset-top)); }
  .qau-shell { grid-template-columns:1fr; max-width:520px; border-radius:20px; }
  .qau-brand { min-height:0; padding:18px 20px 0; gap:6px; }
  .qau-brand h2 { font-size:1.25rem; margin-top:8px; max-width:12em; } .qau-brand > p { font-size:.9rem; max-width:16em; }
  .qau-panda { position:absolute; width:112px; right:8px; margin:0; top:44px; } .qau-benefits { display:none; }
  .qau-brand { padding-bottom:18px; } .qau-badge img { height:28px; } .qau-label { font-size:.7rem; }
  .qau-card { padding:22px 18px 24px; } .qau-inwrap input { height:50px; }
}
@media (max-width:380px) { .qau-panda { width:92px; } .qau-brand h2 { font-size:1.1rem; } .qau-card h1 { font-size:1.4rem; } }