/* Trang đăng ký, đăng nhập học thử, bố cục ver 1 (27/10, theo prototype working/tfa-redesign/hocthu-v1/dang-ky.html):
   cột trái tối có lưới (AuthSide), bên phải thẻ form trắng có tab Đăng ký, Đăng nhập (AuthTabs). Ô nhập, chip, lỗi giữ
   luật của trial.css; trong .a1 đổi bộ biến màu emerald sang xanh của ver 1 nên focus, chip đã chọn, ô tick, nút "Hiện"
   mật khẩu đổi màu theo. Nền mesh không dùng ở hai trang này. */
html:has(.a1),html:has(.a1) body{background:#F6F7F9}
.a1{
  --c-emerald:#2563EB;--c-emerald-text:#1D4ED8;--c-on-emerald:#fff;--c-emerald-tint:#EEF4FF;--c-emerald-tint-2:#DCE7FE;--c-emerald-ring:rgba(37,99,235,.15);
  min-height:100vh;display:flex;flex-wrap:wrap;color:#0B1220
}

/* Cột trái */
/* Cột trái 2/5 màn hình (người dùng 27/10), tính theo vw để đăng ký (trang dài, có thanh cuộn) và đăng nhập rộng bằng nhau */
.a1-side{flex:0 0 max(360px,40vw);min-width:0;padding:40px 44px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;color:#fff;
  background-color:#0B1220;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:40px 40px}
.a1-logo img{height:36px;width:auto;display:block}
.a1-logo .a1-logo-c,.a1-logo .a1-logo-s{display:none}
.a1-mid{display:flex;flex-direction:column;gap:24px;max-width:520px}
.a1-side h2{color:#fff;font-size:38px;line-height:1.12;font-weight:800;letter-spacing:-.02em}
.a1-lead{font-size:16px;line-height:1.6;color:#C9D3E3}
/* Ảnh bìa 16:9 các khoá (người dùng 27/10, thay danh sách tên khoá) */
.a1-covers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.a1-covers img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:#1A2233;border:1px solid rgba(255,255,255,.12)}
.a1-stats{display:flex;flex-wrap:wrap;gap:24px}
.a1-stats div{display:flex;flex-direction:column}
.a1-stats b{font-size:20px;font-weight:800}
.a1-stats span{font-size:12px;color:#9FB3D1}

/* Cột phải: thẻ form */
.a1-main{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;padding:40px 32px}
.a1-card{width:100%;max-width:440px;background:#fff;border:1px solid #E5E7EB;border-radius:16px;padding:32px}
.a1-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;background:#F1F3F6;padding:4px;border-radius:10px;margin-bottom:24px}
.a1-tabs a{display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:8px;font-size:14px;font-weight:600;color:#4B5563}
.a1-tabs a:hover{color:#0B1220;text-decoration:none}
.a1-tabs a[aria-current=page]{background:#fff;color:#0B1220;box-shadow:0 1px 2px rgba(11,18,32,.12)}
.a1-card h1{font-size:24px;line-height:1.3;font-weight:700;letter-spacing:-.01em;color:#0B1220;margin:0 0 20px}
.a1-card .lead{font-size:14px;color:#566070;margin:-14px 0 24px}
.a1-card .btn-primary,.a1-card .btn-primary:hover{background:#2563EB;color:#fff;min-height:48px;font-size:15px;font-weight:700}
.a1-card .btn-primary:hover{filter:brightness(1.08)}
.a1-card .btn-primary[aria-busy=true]:hover{background:#2563EB}
.a1-card .spin{border-color:rgba(255,255,255,.35);border-top-color:#fff}
.a1-card .auth-foot{font-size:14px;color:#566070;margin-top:20px}
.a1-card .auth-foot a,.a1-card .field-row a,.a1-card .alert a{color:#1D4ED8}
.a1-card .hint{text-align:center}
/* Form đăng ký (người dùng 27/10): họ tên một hàng; email | số điện thoại; bạn là | nghề nghiệp (ngành học); còn lại đủ hàng */
.pg-dang-ky .a1-card{max-width:580px}
@media (min-width:901px){
  .pg-dang-ky .a1-card #f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .pg-dang-ky .a1-card #f>*{grid-column:1/-1}
  .pg-dang-ky .a1-card #f>#g-email,.pg-dang-ky .a1-card #f>#g-phone,
  .pg-dang-ky .a1-card #f>#g-role,.pg-dang-ky .a1-card #f>#g-occ{grid-column:auto}
}

/* Màn nhỏ: cột trái thu gọn thành dải tiêu đề trên form */
@media (max-width:900px){
  .a1{flex-direction:column}
  .a1-side{flex:none;padding:24px 20px;gap:16px}
  .a1-mid{gap:12px}
  .a1-side h2{font-size:28px}
  .a1-lead,.a1-covers,.a1-stats{display:none}
  .a1-logo img{height:30px}
  .a1-main{padding:20px 16px 40px;align-items:flex-start}
  .a1-card{padding:24px 20px}
}

/* Kiểm tra email, quên mật khẩu, đặt mật khẩu mới (27/10, cùng khung ver 1): icon vẽ sẵn màu xanh lá cũ đổi sang xanh ver 1;
   các khối thông báo, bước, quy tắc mật khẩu đã đổi màu theo bộ biến trong .a1 */
.a1 svg[stroke="#00806A"]{stroke:#1D4ED8}
.a1 svg[stroke="#04231D"]{stroke:#fff}
.a1-card .mailicon{background:#EEF4FF}
.a1-card .notice,.a1-card .safe{border-radius:12px}
.a1-card .resend-btn,.a1-card .linkbtn,.a1-card .copy{color:#1D4ED8}
.a1-card .backline a{color:#1D4ED8}
/* Trong thẻ form: bỏ khoảng trên đầu (thẻ đã có đệm), thanh 3 bước gọn trong một hàng, icon thư cách tiêu đề */
.a1-card .steps3{margin:0 0 20px;gap:5px;flex-wrap:wrap;font-size:12px}
.a1-card .steps3 li{gap:6px}
.a1-card .steps3 .dot{width:18px;height:18px}
.a1-card .steps3 li+li::before{width:8px}
.a1-card .mailicon{margin:0 0 16px}
.a1-card .ke-pill+.mailicon{margin-top:12px}