/* Trang đăng nhập - GIAO DIỆN PHẲNG có hình nền trống đồng (cùng bộ với
   static/css/phang.css: thẻ trong, viền mảnh, bóng rất nhẹ, không nổi khối).
   Dùng biến --phang-* / --nm-* kèm giá trị dự phòng, nên đổi bảng màu ở
   phang.css là trang này đổi theo (nền sáng be ấm, nền tối xanh đen).

   CHỐNG NHÁY (người dùng: "có những lúc màn hình đăng nhập nháy liên tục"):
     - Không lớp làm mờ (backdrop-filter) nào: thẻ, dải giờ đều màu đặc /
       trong suốt thường. Safari iOS vẽ lại lớp mờ mỗi khi thứ bên dưới nhúc
       nhích (bàn phím mở, ô nhập nảy lên) - đúng kiểu nhấp nháy đã gặp.
     - Dải giờ / pin MÀU ĐẶC như mọi trang khác: mép trên trong suốt thì
       iOS 26 tự phủ lớp nhoè mép cuộn của nó, lớp ấy chớp theo mỗi lần cuộn.
     - Ô nhập KHÔNG nảy lên khi chạm (bỏ transform + transition dài): chạm
       vào là iOS vừa cuộn trang vừa mở bàn phím, ô còn nhảy thêm 2px là cả
       thẻ giật.
     - Không chuyển màu / bóng có hoạt ảnh trên nút.
     - Không tự tải lại trang khi quay lại bằng vuốt / mở lại ứng dụng
       (xem login.html). */

.dn-trang,
.dn-trang * { box-sizing: border-box; }

/* Django admin bọc trang trong #container/#content với lề và khung riêng;
   ở đây cần nền trải hết màn hình nên gỡ hết. */
.dn-trang #container,
.dn-trang #main,
.dn-trang #content {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}
.dn-trang #header,
.dn-trang .messagelist { display: none; }

/* Nền TRONG SUỐT: lộ lớp nền cố định của trang (body::before = --kinh-nen
   trong phang.css: màu be / xanh đen + hoa văn trống đồng ở giữa). */
.dn-nen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: transparent;
}

/* Nền <html> (phía sau lớp nền cố định) = màu ĐÁY của nền trống đồng, thay
   cho màu thanh trên mà liquid-glass.css đặt. Lúc iOS mở ứng dụng mà tính
   khung hụt, phần đáy màn hình ngoài khung chỉ có màu này - cùng màu với
   đáy nền thì không còn "dải màu không đồng bộ" (người dùng báo). */
html:root:has(body.dn-trang) {
  background: var(--phang-nen-day, #e0c9a1) !important;
}
/* Ứng dụng cài trên iPhone: vùng căn giữa thẻ đo theo CAO MÀN HÌNH
   (--man-cao, base_site.html) như nền trống đồng (phang.css), không theo
   khung trang - iOS tính khung hụt rồi bung ra thì thẻ không nhảy theo. */
html:root.la-webapp .dn-nen { min-height: var(--man-cao, 100dvh); }
/* --- Thẻ phẳng, trong một nửa: thấy trống đồng phía sau ------------------ */
.dn-the {
  --rong: 400px;
  width: var(--rong);
  max-width: 100%;
  flex: 0 0 auto;
  padding: 36px 32px 32px;
  border-radius: 24px;
  position: relative;
  background: var(--phang-o-menu, rgba(249, 239, 220, .65));
  border: 1px solid var(--phang-vien, #dfc69c);
  box-shadow: var(--phang-bong, 0 1px 2px rgba(90, 55, 20, .10), 0 3px 10px rgba(90, 55, 20, .09));
}

/* --- Form --------------------------------------------------------------- */
.dn-form {
  position: relative;
  z-index: 2;
  width: 100%;
}

.dn-logo {
  display: block;
  height: 54px;
  width: auto;
  margin: 0 auto 12px;
}

/* #content h1 của neumorphism.css (màu mực, độ ưu tiên một id) đè màu
   tiêu đề - nêu #content cho thắng. */
.dn-form h1,
#content .dn-form h1 {
  margin: 0 0 22px;
  text-align: center;
  /* "PHÂN XƯỞNG SỬA CHỮA" chữ hoa: vừa một dòng trên thẻ 360-400px; máy
     hẹp hơn thì xuống hai dòng chia đều (text-wrap: balance). */
  font-size: 23px;
  line-height: 1.3;
  text-wrap: balance;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--phang-nhan, #8a3412) !important;
  text-shadow: none;
}

.dn-loi {
  margin: 0 0 14px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--nm-red, #b91c1c);
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.22);
}

/* --- Ô nhập phẳng, icon nằm trong --------------------------------------- */
.dn-o {
  position: relative;
  margin-bottom: 14px;
}

/* Icon nằm trong ô, có vạch ngăn mảnh bên phải để chữ không dính vào icon. */
.dn-o-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 56px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--phang-vien, rgba(127, 145, 170, 0.28));
  color: var(--nm-ink-soft, #909090);
}

/* Nhắm cả input do Django dựng ra, không đặt được class lên nó.
   Thêm .dn-trang cho độ ưu tiên đủ cao: admin có nhiều luật chung cho
   input, thiếu nó là padding-left bị đè và con trỏ nhập dính vào icon.
   Mặt ĐẶC (--phang-o): chữ gõ vào đọc rõ trên nền trống đồng. */
.dn-trang .dn-o input {
  width: 100%;
  height: 50px;
  /* Ô icon rộng 56px, chừa thêm 10px là con trỏ nhấp nháy nằm ngay sau
     vạch ngăn - đủ tách khỏi icon mà không bị đẩy ra xa. */
  padding: 0 16px 0 66px;
  border: 1px solid var(--phang-vien, #dfc69c) !important;
  outline: 0;
  border-radius: 12px;
  background: var(--phang-o, #f9efdc);
  color: var(--nm-ink, #1f2a3a);
  font-family: inherit;
  /* 16px: chữ nhỏ hơn thì Safari phóng to trang khi chạm vào ô (thẻ
     viewport đã chặn bằng maximum-scale=1 - đây là lớp an toàn thứ hai). */
  font-size: 16px;
  font-weight: 500;
  box-shadow: none;
}

.dn-trang .dn-o input::placeholder { color: var(--nm-ink-soft, #a3a3a3); font-weight: 400; }

/* Chạm vào: chỉ đổi màu viền + vòng mảnh, KHÔNG dời ô. */
.dn-trang .dn-o input:focus {
  border-color: var(--phang-nut-mau, #2563eb) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--phang-nut-mau, #2563eb) 18%, transparent);
}
.dn-o:focus-within .dn-o-icon { color: var(--phang-nut-mau, #2563eb); }

/* iOS / Chrome tô nền ô đã tự điền (vàng / xanh) - giữ đúng mặt ô phẳng. */
.dn-trang .dn-o input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px var(--phang-o, #f9efdc) inset;
  -webkit-text-fill-color: var(--nm-ink, #1f2a3a);
}

/* Nhãn của Django không cần: icon đã nói rõ ô nào là ô nào, phần cho trình
   đọc màn hình do aria-label lo (xem core/forms.py). */
.dn-o label { display: none; }

/* --- Ghi nhớ đăng nhập ---------------------------------------------------- */
.dn-nho {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 2px 0; cursor: pointer; user-select: none;
  font-size: 14px; font-weight: 500; color: var(--nm-ink, #1f2a3a);
  -webkit-tap-highlight-color: transparent;
}
.dn-trang .dn-nho input[type="checkbox"] {
  width: 20px; height: 20px; margin: 0; flex: none; cursor: pointer;
  accent-color: var(--phang-nut-mau, #2563eb);
}

/* --- Nút phẳng: một khối màu nhấn, không bóng, không hoạt ảnh ----------- */
.dn-form button {
  position: relative;
  display: block;
  width: 100%;
  height: 50px;
  margin: 20px 0 0;
  border: 0;
  outline: 0;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: var(--phang-nut-mau, #2563eb);
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .dn-form button:hover { filter: brightness(1.06); }
}
.dn-form button:active { filter: brightness(.92); }
/* Nền tối: --phang-nut-mau là xanh SÁNG (cho chữ / viền) - chữ trắng trên
   đó không đủ tương phản; nút chính dùng xanh đậm. */
html[data-theme="dark"] .dn-form button:not(.dn-faceid) { background: #2563eb; }
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .dn-form button:not(.dn-faceid) { background: #2563eb; }
}

/* --- Face ID ------------------------------------------------------------
   Nút phụ: phẳng, trong (ánh màu nhấn) + viền mảnh, chữ thường - mắt vẫn
   thấy "Log in" là đường chính, Face ID là lối tắt. */
.dn-hoac {
  position: relative;
  margin: 16px 0 2px;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--nm-ink-soft, #9a9a9a);
}
/* Hai vạch kẻ hai bên chữ "hoặc", nhạt dần về phía chữ. */
.dn-hoac::before,
.dn-hoac::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 28px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--phang-vien, #c5cedb));
}
.dn-hoac::before { left: 0; }
.dn-hoac::after { right: 0; transform: scaleX(-1); }

.dn-form button.dn-faceid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* Cố ý KHÔNG đặt height: nhận đúng chiều cao nút "Log in" ở mọi khổ. */
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--nm-ink, #1f2a3a);
  background: color-mix(in srgb, var(--phang-nut-mau, #2563eb) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--phang-nut-mau, #2563eb) 40%, transparent);
}
.dn-form button.dn-faceid:disabled { cursor: default; opacity: 0.7; filter: none; }

.dn-faceid-icon {
  display: flex;
  flex: none;
  color: var(--phang-nut-mau, #2563eb);
}

/* --- Dải giờ / pin (ứng dụng cài trên iPhone): MÀU ĐẶC, không làm mờ -----
   liquid-glass.css cho trang đăng nhập một lớp kính mờ / dải sẫm trong
   suốt - chính kiểu mép trên trong suốt làm iOS phủ lớp nhoè chớp theo. Ở
   đây dùng đúng công thức màu dải giờ của mọi trang khác (cùng thẻ
   theme-color máy chủ ghi sẵn). */
@media (max-width: 860px) {
  html:root.la-webapp body.login::after,
  html:root.la-webapp:not([data-theme="dark"]) body.login::after {
    background: var(--nm-thanh);
    background: color-mix(in srgb, var(--nm-thanh-0),
                var(--nm-thanh-1) calc(var(--kinh-muc) * 100%));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* --- Màn hình nhỏ -------------------------------------------------------- */
@media (max-width: 600px) {
  .dn-the { --rong: 360px; padding: 30px 24px 26px; }
  .dn-logo { height: 46px; margin-bottom: 10px; }
  .dn-form h1, #content .dn-form h1 { font-size: 21px; margin-bottom: 20px; }
  /* Cùng độ ưu tiên với luật gốc (.dn-trang .dn-o input), thiếu .dn-trang
     là luật gốc thắng và khối này vô tác dụng. Giữ 16px - xem luật gốc. */
  .dn-trang .dn-o input { height: 48px; padding-left: 62px; }
  .dn-o-icon { width: 52px; height: 28px; }
  .dn-form button { height: 46px; font-size: 13.5px; }
}

@media (max-width: 420px) {
  .dn-nen { padding: 16px 12px; }
  .dn-the { --rong: 100%; padding: 26px 18px 22px; border-radius: 20px; }
  .dn-logo { height: 40px; }
  .dn-form h1, #content .dn-form h1 { font-size: 19px; margin-bottom: 18px; }
  .dn-o { margin-bottom: 12px; }
  .dn-trang .dn-o input { height: 46px; padding-left: 58px; }
  .dn-o-icon { width: 48px; height: 26px; }
  .dn-form button { height: 44px; font-size: 13px; }
  /* "Đăng nhập bằng Face ID" dài gấp ba "Log in" - nhỏ hơn một bậc cho
     khỏi xuống dòng trên máy hẹp. */
  .dn-form button.dn-faceid { font-size: 12.5px; }
  .dn-loi { font-size: 11.5px; padding: 8px 11px; }
}