/* Trang đăng nhập gauux.com/dang-nhap
 *
 * KHÔNG định nghĩa màu — mọi màu lấy từ /css/thuong-hieu.css.
 *
 * Bố cục: một thẻ nổi ở giữa, đặt trên nền tối có quầng sáng nhiều lớp.
 * Chọn thẻ giữa thay vì chia đôi màn hình vì đây là trang một việc — bấm một nút.
 * Chia đôi làm loãng tiêu điểm, và trên điện thoại phải bỏ mất nửa bên trái.
 *
 * Tỉ lệ 70·20·10: nền tối chiếm phần lớn, cam ở viền và điểm nhấn,
 * gradient chỉ xuất hiện ở ba chỗ — quầng nền, viền tóc của thẻ, và một từ
 * trong tiêu đề.
 */

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:var(--font-than);
  background:var(--nen);
  color:var(--chu);
  font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:40px 20px;
  position:relative;overflow-x:hidden;
}

/* Quầng sáng nhiều lớp — "vân tay" thương hiệu. Đặt rất mờ và rất lớn để
   cảm nhận được chứ không nhìn thấy rõ; nhìn thấy rõ là thành loè loẹt. */
body::before{
  content:"";position:fixed;inset:-30% -20% auto -20%;height:820px;z-index:0;
  background:
    radial-gradient(52% 62% at 22% 8%, rgba(255,106,0,.20), transparent 64%),
    radial-gradient(48% 58% at 78% 4%, rgba(123,97,255,.20), transparent 64%),
    radial-gradient(44% 54% at 52% 30%, rgba(34,211,197,.11), transparent 64%);
  filter:blur(24px);pointer-events:none;
}
/* Vệt sáng mảnh ở đáy, cân lại bố cục cho khỏi nặng đầu */
body::after{
  content:"";position:fixed;left:50%;bottom:-260px;transform:translateX(-50%);
  width:min(820px,120vw);height:420px;z-index:0;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,106,0,.10), transparent 70%);
  filter:blur(26px);
}

.khung{position:relative;z-index:1;width:100%;max-width:400px}

/* ---------------- thương hiệu ---------------- */

.hieu{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:30px}
.hieu img{width:38px;height:38px;display:block}
.hieu b{
  font-family:var(--font-hieu);
  font-weight:700;font-size:26px;letter-spacing:-.035em;
}

/* ---------------- thẻ ---------------- */

.the{
  position:relative;
  background:var(--be-mat);
  border-radius:18px;
  padding:34px 30px 28px;
  box-shadow:
    0 50px 120px -24px rgba(0,0,0,.75),
    0 0 0 1px var(--vien);
}

/* Viền tóc gradient chạy quanh thẻ. Dùng mặt nạ để chỉ tô đúng đường viền
   1px, không tô đặc cả thẻ. */
.the::before{
  content:"";position:absolute;inset:0;border-radius:18px;padding:1px;
  background:var(--grad);opacity:.5;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}

h1{
  font-family:var(--font-tieu-de);
  font-size:26px;line-height:1.25;letter-spacing:-.025em;font-weight:700;
  margin-bottom:8px;
}
/* Một từ chạy gradient — nhấn duy nhất trong phần chữ */
h1 em{
  font-style:normal;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

.d{color:var(--chu-2);font-size:14.5px;margin-bottom:24px}

/* Nút Facebook giữ nguyên xanh #1877F2 của Meta — người dùng nhận ra ngay,
   và Meta yêu cầu không đổi màu nút đăng nhập của họ.
   Chữ trắng trên nền này đo được 4.23, dưới ngưỡng AA 4.5 một chút. ĐÂY LÀ
   NGOẠI LỆ CÓ CHỦ Ý: cặp màu do Meta quy định, đổi đi là vi phạm hướng dẫn
   thương hiệu của họ và người dùng cũng khó nhận ra nút. Mọi cặp màu khác
   trên trang đều đạt AA trở lên — xem scripts/kiem-tuong-phan.js. */
.btn-fb{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:14px 20px;border-radius:12px;
  background:#1877F2;color:#fff;
  font-family:var(--font-than);font-weight:600;font-size:15.5px;
  text-decoration:none;border:0;cursor:pointer;
  transition:transform .12s, box-shadow .12s, background .12s;
  box-shadow:0 10px 28px -10px rgba(24,119,242,.75);
}
.btn-fb:hover{background:#1465D8;transform:translateY(-1px);box-shadow:0 14px 34px -10px rgba(24,119,242,.85)}
.btn-fb:active{transform:translateY(0)}
.btn-fb svg{flex-shrink:0}

/* ---------------- ba điểm tin cậy ---------------- */

.tin{display:flex;flex-direction:column;gap:9px;margin-top:22px}
.tin div{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--chu-2);line-height:1.45}
.tin svg{flex-shrink:0;margin-top:2px;color:var(--aqua)}

/* ---------------- ghi chú & lỗi ---------------- */

.note{
  display:flex;gap:9px;align-items:flex-start;
  background:var(--ember-mo);border-left:3px solid var(--ember);
  border-radius:10px;padding:11px 13px;margin-top:22px;
  font-size:12.5px;line-height:1.5;color:var(--chu-2);
}
.note svg{flex-shrink:0;margin-top:2px;color:var(--ember)}

/* Đỏ #FF4D5E — sắc riêng cho "bị chặn", khác hẳn hổ phách "cần chú ý" */
.loi{
  background:var(--do-mo);border-left:3px solid var(--do);
  border-radius:10px;padding:12px 14px;margin-bottom:18px;
  font-size:13px;line-height:1.5;color:var(--chu);
}
.loi b{display:block;margin-bottom:4px;color:var(--do)}
.loi .ma{font-family:var(--font-so);font-size:11.5px;color:var(--chu-3);margin-top:7px}

.tiny{
  font-size:12.5px;color:var(--chu-3);line-height:1.5;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--vien);
}
.tiny a{color:var(--chu-2);text-decoration:none;border-bottom:1px solid var(--vien-2)}
.tiny a:hover{color:var(--orange);border-bottom-color:currentColor}

/* ---------------- lời chứng thực dưới thẻ ---------------- */

.chung{
  margin-top:26px;text-align:center;
  font-size:13.5px;line-height:1.6;color:var(--chu-2);
}
.chung q{font-style:normal;quotes:'“' '”'}
.chung .ai{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:12px;font-size:12.5px;color:var(--chu-3);
}
.chung .av{
  width:26px;height:26px;border-radius:50%;
  background:var(--cam-mo);color:var(--orange);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-so);font-weight:700;font-size:10.5px;
}

.ve{margin-top:22px;text-align:center;font-size:13px}
.ve a{color:var(--chu-3);text-decoration:none}
.ve a:hover{color:var(--chu-2)}

@media(max-width:420px){
  .the{padding:28px 22px 24px}
  h1{font-size:23px}
}