/*
 * TUHA — màn ĐĂNG NHẬP / QUÊN MẬT KHẨU giao diện mới (phong cách Apple).
 * Chỉ nạp khi ui_new() (layouts/sign_in.php, layouts/password_recovery.php); giao diện cũ giữ nguyên bản gốc.
 * Dùng bộ biến --ta-* của tuha-apple.css (sáng/tối theo body.light / body.dark) — có giá trị dự phòng phòng khi tệp đó chưa nạp.
 * Mobile-first: thẻ vừa bề ngang, ô nhập ≥16px (iOS không tự phóng to), vùng bấm ≥44px, tôn trọng vùng an toàn của tai thỏ.
 */
.lg-page {
  --lg-card: var(--ta-card, #ffffff); --lg-text: var(--ta-text, #1c1c1e); --lg-sub: var(--ta-sub, #6c6c70);
  --lg-line: var(--ta-line, rgba(60, 60, 67, .16)); --lg-fill: var(--ta-fill, rgba(120, 120, 128, .12));
  --lg-blue: var(--ta-blue, #007aff); --lg-blue-bg: var(--ta-blue-bg, rgba(0, 122, 255, .12));
  --lg-red: #d70015; --lg-red-bg: rgba(255, 59, 48, .10); --lg-green: #1e9e50; --lg-green-bg: rgba(52, 199, 89, .14);
  --lg-field: rgba(120, 120, 128, .08);
  position: relative; box-sizing: border-box; width: 100%; flex: 1 1 100%; min-width: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  font-family: var(--ta-font, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif);
  color: var(--lg-text); -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(0, 122, 255, .11), transparent 62%),
    radial-gradient(820px 480px at 100% 108%, rgba(88, 86, 214, .10), transparent 62%),
    var(--ta-side, #f5f5f7);
}
body.tuha-apple.dark .lg-page { --lg-field: rgba(120, 120, 128, .20); --lg-red: #ff6961; --lg-red-bg: rgba(255, 69, 58, .16); --lg-green: #32d74b; --lg-green-bg: rgba(48, 209, 88, .18);
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(10, 132, 255, .16), transparent 62%),
    radial-gradient(820px 480px at 100% 108%, rgba(94, 92, 230, .14), transparent 62%),
    var(--ta-side, #1c1c1e); }
/* theme gốc: body là flex hàng + có chân trang tuyệt đối «Bản quyền…» — màn này có dòng bản quyền riêng nên ẩn chân trang cũ */
body:has(> .lg-page) > .footer { display: none }
.lg-page *, .lg-page *::before, .lg-page *::after { box-sizing: border-box }

.lg-card {
  width: 100%; max-width: 408px; margin: 0; padding: 34px 30px 26px;
  background: var(--lg-card); border: .5px solid var(--lg-line); border-radius: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 18px 48px rgba(0, 0, 0, .09);
}
body.tuha-apple.dark .lg-card { box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 48px rgba(0, 0, 0, .45) }

.lg-brand { display: flex; justify-content: center; margin: 0 0 22px }
.lg-brand a { display: inline-flex; line-height: 0; border-radius: 10px }
.lg-brand a:focus-visible { outline: 2px solid var(--lg-blue); outline-offset: 4px }
.lg-logo { display: block; height: 44px; width: auto; max-width: 100% }
.lg-logo-dk { display: none }
body.tuha-apple.dark .lg-logo-lt { display: none }
body.tuha-apple.dark .lg-logo-dk { display: block }

.lg-title { margin: 0; text-align: center; font-size: 26px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; color: var(--lg-text) }
.lg-sub { margin: 6px 0 24px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--lg-sub) }

/* thông báo: lỗi do Form::error_messages() in ra (.alert.alert-danger) + cảnh báo mã bảo vệ + thông báo thành công */
.lg-card .row { margin: 0 !important; display: block }
.lg-card .row > [class*="col-"] { padding: 0 !important; width: 100% !important; max-width: none !important; flex: none !important }
.lg-card .alert, .lg-note { margin: 0 0 16px; padding: 11px 14px; border: 0; border-radius: 12px; font-size: 13.5px; line-height: 1.5; text-align: left }
.lg-card .alert-danger { background: var(--lg-red-bg); color: var(--lg-red) }
.lg-card .alert-danger i { margin-right: 4px }
.lg-card .alert-danger b { font-weight: 700 }
.lg-card .alert-success { background: var(--lg-green-bg); color: var(--lg-green) }
.lg-card .alert-warning, .lg-note { background: rgba(255, 159, 10, .14); color: #a15c00 }
body.tuha-apple.dark .lg-card .alert-warning, body.tuha-apple.dark .lg-note { color: #ffb340 }
.lg-card .alert-danger div + div { margin-top: 4px }

.lg-field { margin: 0 0 14px }
.lg-field > label, .lg-card .form-label { display: block; margin: 0 0 6px 2px; font-size: 13px; font-weight: 600; color: var(--lg-sub); letter-spacing: -.005em }
.lg-in, .lg-card .form-control {
  display: block; width: 100%; height: 50px; min-height: 50px; padding: 0 16px; margin: 0;
  font: inherit; font-size: 16px; line-height: 1.3; color: var(--lg-text);
  background: var(--tf-bg); border: 1px solid var(--tf-bd); border-radius: 13px; box-shadow: var(--tf-shadow, none); outline: 0; border-bottom-color: var(--tf-bd-bot)
  transition: background-color .15s, border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.lg-in::placeholder, .lg-card .form-control::placeholder { color: var(--tf-ph); opacity: 1 }
.lg-in:hover, .lg-card .form-control:hover { border-color: var(--tf-bd-hover) }
.lg-in:focus, .lg-card .form-control:focus { background: var(--lg-card); border-color: var(--lg-blue); box-shadow: 0 0 0 4px var(--lg-blue-bg); color: var(--lg-text) }
.lg-in.is-err, .lg-card .form-control.error { border-color: var(--tf-err); background: var(--lg-red-bg) }
.lg-in:-webkit-autofill, .lg-card .form-control:-webkit-autofill { -webkit-text-fill-color: var(--lg-text); box-shadow: 0 0 0 50px var(--tf-bg) inset; transition: background-color 9999s }
.lg-in:-webkit-autofill:focus, .lg-card .form-control:-webkit-autofill:focus { box-shadow: 0 0 0 50px var(--lg-card) inset, 0 0 0 4px var(--lg-blue-bg) }

.lg-pw { position: relative }
.lg-pw .lg-in { padding-right: 52px }
.lg-eye { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 11px; background: transparent; color: var(--lg-sub); cursor: pointer; -webkit-tap-highlight-color: transparent }
.lg-eye:hover { color: var(--lg-text) }
.lg-eye:focus-visible { outline: 2px solid var(--lg-blue); outline-offset: -2px }
.lg-eye svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.lg-eye .lg-eye-off { display: none }
.lg-eye[aria-pressed="true"] .lg-eye-on { display: none }
.lg-eye[aria-pressed="true"] .lg-eye-off { display: block }

.lg-cap { display: flex; align-items: center; gap: 10px }
.lg-cap img { display: block; height: 46px; width: auto; border-radius: 10px; background: #fff; border: .5px solid var(--lg-line) }
.lg-cap .lg-in { flex: 1 1 auto; min-width: 0; letter-spacing: .12em; text-transform: none }

.lg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 18px }
.lg-chk { position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 36px; margin: 0; font-size: 13.5px; font-weight: 500; color: var(--lg-text); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent }
.lg-chk input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0 }
.lg-chk-box { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 6px; background: var(--tf-bg); border: 1px solid var(--tf-bd-bot); display: flex; align-items: center; justify-content: center; transition: background-color .15s, border-color .15s; box-shadow: var(--tf-shadow, none); border-bottom-color: var(--tf-bd-bot) }
.lg-chk:hover .lg-chk-box { border-color: var(--lg-blue) }
.lg-chk input:checked + .lg-chk-box { background: var(--ta-blue-fill, var(--lg-blue)); border-color: var(--lg-blue) }
.lg-chk input:checked + .lg-chk-box::after { content: ""; width: 5px; height: 10px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) }
.lg-chk input:focus-visible + .lg-chk-box { outline: 3px solid var(--lg-blue-bg); outline-offset: 1px; border-color: var(--lg-blue) }
.lg-link, .lg-card a.lg-link { display: inline-flex; align-items: center; min-height: 32px; padding: 0 2px; font-size: 13.5px; font-weight: 500; color: var(--lg-blue); text-decoration: none; border-radius: 8px }
.lg-link:hover { text-decoration: underline }
.lg-link:focus-visible { outline: 2px solid var(--lg-blue); outline-offset: 2px }

.lg-btn, .lg-card .btn-primary {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; min-height: 50px; padding: 0 18px; margin: 0;
  font: inherit; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: #fff;
  background: var(--ta-blue-fill, var(--lg-blue)); border: 0; border-radius: 13px; box-shadow: 0 1px 2px rgba(0, 122, 255, .25), 0 6px 16px rgba(0, 122, 255, .22);
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: filter .15s, transform .08s, box-shadow .15s, opacity .15s;
}
.lg-btn:hover, .lg-card .btn-primary:hover { filter: brightness(1.06); color: #fff; background: var(--ta-blue-fill, var(--lg-blue)) }
.lg-btn:active, .lg-card .btn-primary:active { transform: scale(.985); filter: brightness(.96) }
.lg-btn:focus-visible, .lg-card .btn-primary:focus-visible { outline: 3px solid var(--lg-blue-bg); outline-offset: 2px }
.lg-btn[disabled], .lg-btn[aria-busy="true"] { cursor: progress; opacity: .85; filter: none; transform: none }
.lg-spin { display: none; width: 17px; height: 17px; border: 2.2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: lg-spin .7s linear infinite }
.lg-btn[aria-busy="true"] .lg-spin { display: inline-block }
@keyframes lg-spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .lg-spin { animation-duration: 1.6s } .lg-btn, .lg-in { transition: none } }
.lg-btn-2, .lg-card .btn-light, .lg-card .btn-outline-secondary { display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; margin: 0; font: inherit; font-size: 15px; font-weight: 600; color: var(--lg-text); background: var(--lg-fill); border: 0; border-radius: 13px; text-decoration: none; cursor: pointer }
.lg-btn-2:hover, .lg-card .btn-light:hover, .lg-card .btn-outline-secondary:hover { background: rgba(120, 120, 128, .2); color: var(--lg-text) }

.lg-sep { display: flex; align-items: center; gap: 12px; margin: 24px 0 14px; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--lg-sub) }
.lg-sep::before, .lg-sep::after { content: ""; flex: 1 1 0; height: .5px; background: var(--lg-line) }
.lg-help { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px }
.lg-help a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; font-size: 13.5px; font-weight: 600; color: var(--lg-text); text-decoration: none; background: var(--lg-fill); border-radius: 999px; transition: background-color .15s }
.lg-help a:hover { background: rgba(120, 120, 128, .2) }
.lg-help a:focus-visible { outline: 2px solid var(--lg-blue); outline-offset: 2px }
.lg-reg { margin: 18px 0 0; text-align: center; font-size: 13.5px; color: var(--lg-sub) }
.lg-reg a { font-weight: 600; color: var(--lg-blue); text-decoration: none }
.lg-foot { margin: 0; font-size: 12px; color: var(--lg-sub); text-align: center }

/* Màn «đang đăng nhập» */
.lg-me { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 12px 14px; text-decoration: none; background: var(--lg-fill); border-radius: 14px; color: var(--lg-text); min-width: 0 }
.lg-me:hover { background: rgba(120, 120, 128, .2); color: var(--lg-text) }
.lg-me:focus-visible { outline: 2px solid var(--lg-blue); outline-offset: 2px }
.lg-me-av { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; color: var(--lg-blue); background: var(--lg-blue-bg) }
.lg-me-tx { min-width: 0; display: flex; flex-direction: column; text-align: left }
.lg-me-tx small { font-size: 12px; color: var(--lg-sub); line-height: 1.3 }
.lg-me-tx b { font-size: 15px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
a.lg-btn { text-decoration: none }
.lg-btn-2 { margin-top: 10px }
.lg-btn-out { color: var(--lg-red) !important }

/* Quên mật khẩu (nội dung do PasswordRecoveryForm sinh ra: bootstrap + .pwr-*) */
.lg-card #pwr_root h5 { margin: 0 0 6px; text-align: center; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: var(--lg-text) }
.lg-card #pwr_root > p.text-muted { margin: 0 0 20px !important; text-align: center; font-size: 14px; line-height: 1.5 }
.lg-card #pwr_root form { margin: 0 }
.lg-card #pwr_root .btn + .btn, .lg-card #pwr_root .btn.mb-2 + .btn { margin-top: 0 }
.lg-card #pwr_root .btn.mb-2 { margin-bottom: 10px !important }
.lg-card .input-group { position: relative; display: block }
.lg-card .input-group .form-control { padding-right: 52px }
.lg-card .input-group .btn-outline-light { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 44px; height: 44px; min-height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--lg-sub); font-size: 16px }
.lg-card .btn-sm { width: auto; height: 38px; min-height: 38px; padding: 0 16px; font-size: 13.5px; margin-bottom: 14px }
.lg-card .btn-link { display: inline-flex; width: auto; min-height: 36px; padding: 0 6px; font-size: 14px; font-weight: 500; color: var(--lg-blue); background: none; border: 0; text-decoration: none }
.lg-card .btn-link[disabled] { color: var(--lg-sub); opacity: .8 }
.lg-card .btn-primary[disabled] { cursor: progress; opacity: .8 }
.lg-card .text-center a.text-muted { font-size: 13.5px; font-weight: 500; text-decoration: none }
.lg-card .pwr-rules { padding: 0 2px }
.lg-card .small { font-size: 13px }
.lg-card .pwr-help { background: var(--lg-fill); color: var(--lg-sub); border-radius: 12px; padding: 11px 14px; font-size: 13.5px }
.lg-card .pwr-code { min-height: 56px; font-size: 28px; border-radius: 13px }
.lg-card .pwr-ok { background: var(--lg-green-bg); color: var(--lg-green) }
.lg-card .pwr-rules li.ok { color: var(--lg-green) }
.lg-card .text-muted { color: var(--lg-sub) !important }
.lg-card a:not(.lg-link):not(.lg-btn):not(.lg-btn-2):not(.lg-me):not(.btn) { color: var(--lg-blue) }
a.lg-btn, a.lg-btn:hover { color: #fff }
.lg-card .mb-3, .lg-card .mb-2 { margin-bottom: 14px !important }
.lg-card .pwr-card, .lg-card #pwr_root { padding: 0 !important }

@media (max-width: 480px) {
  .lg-page { justify-content: flex-start; padding-top: max(36px, calc(env(safe-area-inset-top) + 20px)); gap: 14px }
  .lg-card { padding: 28px 20px 22px; border-radius: 22px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 30px rgba(0, 0, 0, .07) }
  .lg-title { font-size: 24px }
  .lg-sub { margin-bottom: 20px }
  .lg-logo { height: 40px }
  .lg-cap img { height: 44px }
}
@media (max-height: 560px) and (min-width: 481px) { .lg-page { justify-content: flex-start } }