/* Dùng chung cho 3 trang: đăng nhập, quên mật khẩu, đặt lại mật khẩu.
   Trước đây mỗi trang tự chép một cục <style>, dễ lệch nhau khi sửa 1 chỗ
   quên chỗ khác - giờ gộp về đây, style.css lo phần chung của cả site (màu,
   nút, input), file này chỉ lo riêng cái khung trang đăng nhập. */

body.trang-xac-thuc {
  display: grid; place-items: center; min-height: 100vh;
  padding: 24px;
  /* Hai quầng sáng mờ chứ không phẳng lì - vẫn tông giấy ấm, chỉ thêm chiều sâu */
  background:
    radial-gradient(560px circle at 14% 8%, rgba(63,140,103,.10), transparent 60%),
    radial-gradient(620px circle at 88% 96%, rgba(168,100,42,.09), transparent 60%),
    var(--giay);
}

/* Một thang bo góc DUY NHẤT cho cả thẻ, cho tới từng ô nhập - lớn nhỏ theo
   cùng một nhịp (20 -> 14 -> 12) thay vì mỗi chỗ bo một kiểu (icon rất tròn,
   ô nhập gần vuông, nút lại tròn hẳn) nhìn rời rạc như trước. */
.the-xac-thuc {
  --bo-ngoai: 22px;
  --bo-trong: 13px;
  width: min(380px, 100%);
  background: var(--giay-2);
  border: 1px solid var(--vien);
  border-radius: var(--bo-ngoai);
  box-shadow: var(--bong-sau);
  padding: 32px 28px 28px;
  animation: the-hien .35s ease both;
}
@keyframes the-hien {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
}

.the-xac-thuc .hieu {
  display: flex; align-items: center; gap: 13px;
  padding-bottom: 20px; margin-bottom: 22px;
  border-bottom: 1px solid var(--vien);
}
.the-xac-thuc .dau {
  width: 44px; height: 44px; flex: none; font-size: 20px;
  display: grid; place-items: center; border-radius: var(--bo-trong);
  background: linear-gradient(155deg, var(--che-sang), var(--che));
  box-shadow: 0 6px 16px -4px rgba(47,107,79,.45);
}
.the-xac-thuc .hieu strong { display: block; font-size: 15.5px; letter-spacing: -.01em; }
.the-xac-thuc .hieu small { color: var(--muc-mo); font-size: 12.5px; }

.the-xac-thuc h1 {
  font-size: 19px; margin: 0 0 4px;
}
.the-xac-thuc .dan-phu {
  color: var(--muc-nhat); font-size: 13px; margin: 0 0 22px; line-height: 1.6;
}

.the-xac-thuc label {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--muc-nhat);
  margin: 15px 0 6px;
}
.the-xac-thuc label:first-of-type { margin-top: 0; }
/* box-sizing kế thừa từ * { box-sizing: border-box } ở style.css - cả hai ô
   NHẤT ĐỊNH cùng width:100% của cùng một khối cha, không có lý do lệch nhau
   nữa một khi trình duyệt tải đúng bản CSS mới. */
.the-xac-thuc input {
  box-sizing: border-box; padding: 12px 14px; font-size: 14.5px;
  border-radius: var(--bo-trong);
}

/* Ô mật khẩu có con mắt ẩn/hiện - gõ sai một ký tự dễ lẫn (l/1/I, O/0) mà
   không thấy gì thì chỉ biết sai SAU khi bấm Đăng nhập và bị từ chối. */
.o-mat-khau { position: relative; }
.o-mat-khau input { padding-right: 42px; width: 100%; }
.nut-hien-mk {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer; font-size: 17px;
  color: var(--muc-mo); padding: 7px 8px; line-height: 1; border-radius: 8px;
}
.nut-hien-mk:hover { color: var(--che); background: var(--che-mo); }

.the-xac-thuc .nut {
  width: 100%; margin-top: 24px; padding: 13px 20px; font-size: 14.5px;
}

.lien-ket-phu { text-align: right; margin-top: 9px; }
.lien-ket-phu a, .quay-lai a {
  color: var(--muc-nhat); font-size: 12.5px; text-decoration: none;
}
.lien-ket-phu a:hover, .quay-lai a:hover { color: var(--che); text-decoration: underline; }
.quay-lai { text-align: center; margin-top: 18px; }

.thong-diep {
  font-size: 13px; margin-top: 14px; min-height: 1.4em; line-height: 1.55;
  display: none;
}
.thong-diep.hien { display: block; }
.thong-diep.loi { color: var(--do); }
.thong-diep.ok { color: var(--che); }