.for-login {
  background: var(--ct-login-bg, inherit);
}

/* ================================================================
   KHUNG ĐĂNG NHẬP — HỢP NHẤT THÀNH 1 KHỐI DUY NHẤT
   Cập nhật 2026-08-13.

   Sự thật về DOM gốc (frappe/www/login.html, đã đọc lại trực tiếp
   trước khi viết file này — không đoán):
     <section class="for-login">
       <div class="page-card-head">        <!-- logo + h4, KHÔNG có
                                                 wrapper .page-card-head-text
                                                 hay .page-card-subtitle -->
         <img class="app-logo">
         <h4>...</h4>
       </div>
       <div id="login-clock">...</div>      <!-- JS chèn, nằm NGANG HÀNG
                                                 với page-card-head, không
                                                 lồng bên trong -->
       <div class="login-content page-card">
         <form>
           <div class="page-card-body">...<div class="form-group">...
           <div class="page-card-actions">...<button class="btn-login">
         </form>
       </div>
     </section>

   .page-card-head và .login-content.page-card là 2 PHẦN TỬ ANH EM
   NGANG HÀNG, không lồng nhau — đây chính là lý do lỗi cũ "vùng
   logo hiện khối bo góc không khớp phần còn lại" (ghi nhận trước
   đây, chưa sửa): mỗi phần tử tự có nền/padding riêng do core
   Frappe set (.page-card-head có padding riêng, .page-card có nền
   trắng/viền/bo góc riêng), nhìn tách rời thành 2 khối.

   Fix lần này: dồn TOÀN BỘ nền/viền/bo góc/đổ bóng/padding về
   đúng 1 chỗ — section.for-login (khối cha bọc ngoài cùng, chứa cả
   head lẫn đồng hồ lẫn card). .page-card-head và .login-content
   .page-card bên trong không còn set nền/bo góc/padding riêng nữa,
   chỉ còn là nội dung chảy tự nhiên bên trong 1 khung duy nhất.

   Màu sắc KHÔNG đổi — vẫn qua đúng biến --ct-login-* (cam ACHA SO).

   !important bắt buộc ở nhiều chỗ: core Frappe tự load
   login.bundle.css SAU custom_theme_login.css trên chính trang
   login (khác mọi trang khác, đã xác minh qua curl ở phiên trước),
   cùng độ đặc thù selector — không !important thì core luôn thắng.
   ================================================================ */

section.for-login {
  max-width: 420px;
  margin: 6vh auto 0 !important;
  background-color: var(--ct-login-box-bg, inherit);
  border: 1px solid #dadce0;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
  padding: 36px !important;
  overflow: hidden;
}

/* .page-card-head: bỏ padding/margin riêng của core (vốn để tạo
   khoảng cách khi nó còn là khối tách rời) — giờ nằm trong khung
   hợp nhất, chỉ cần chút khoảng cách trước đồng hồ bên dưới. */
.for-login .page-card-head {
  padding: 0 0 4px !important;
  margin: 0 !important;
}

.for-login .page-card-head h4 {
  color: var(--ct-page-heading, inherit);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* #login-clock: phần tử do login_clock.js tạo, chèn ngay sau
   .page-card-head (logic đồng hồ giữ nguyên 100%, không đổi) —
   chỉ đổi vị trí/khoảng cách cho khớp khung hợp nhất mới. Style
   (cỡ chữ/màu/khoảng cách) nằm hẳn ở đây, JS chỉ set nội dung chữ. */
#login-clock {
  font-size: 13.5px;
  color: var(--ct-page-heading, #1e293b);
  opacity: 0.62;
  text-align: center;
  margin: 4px 0 0;
}

/* .login-content.page-card: bỏ nền/viền/bo góc/padding riêng của
   core (--> chuyển hết lên section.for-login ở trên) — chỉ giữ lại
   1 đường kẻ mờ phân tách phía trên làm ranh giới giữa khối
   logo+đồng hồ và khối ô nhập, đúng yêu cầu "đường kẻ mờ đặt giữa
   khối đồng hồ và ô nhập email". */
.for-login .login-content.page-card {
  background-color: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: 100% !important;
  margin: 20px 0 0 !important;
  padding: 20px 0 0 !important;
}

.for-login .login-content.page-card form {
  max-width: 100%;
}

/* ================================================================
   Ô NHẬP LIỆU
   Sửa 1 lỗi ẩn: bản trước dùng selector ".frappe-control" để canh
   khoảng cách giữa 2 ô — SAI, vì email/password ở trang login là
   ".form-group" (Bootstrap thuần, viết tay trong login.html), không
   phải ".frappe-control" (chỉ có trên form Desk) — rule đó trước
   giờ chưa từng có tác dụng. Sửa đúng lại selector lần này.

   Bo góc ô nhập/nút: 11px — CHỦ Ý nhỏ hơn hẳn bo góc khung ngoài
   (18px) để tạo phân cấp rõ (khung lớn bao khối nhỏ hơn bên trong).
   ================================================================ */

.for-login .login-content.page-card .form-group {
  margin-bottom: 18px !important;
}

.for-login .login-content.page-card input[type="text"],
.for-login .login-content.page-card input[type="email"],
.for-login .login-content.page-card input[type="password"] {
  width: 100%;
  background-color: #fff;
  border: 1px solid #dadce0;
  border-radius: 11px;
  height: auto !important;
  padding: 13px 16px 13px 42px !important;
  font-size: 14.5px;
  line-height: 1.3;
}

/* "Show"/"Ẩn" mật khẩu: core định vị top:5px cố định, cần căn lại giữa ô */
.for-login .login-content.page-card .toggle-password {
  top: 50% !important;
  transform: translateY(-50%);
}

.for-login .login-content.page-card input[type="text"]:focus,
.for-login .login-content.page-card input[type="email"]:focus,
.for-login .login-content.page-card input[type="password"]:focus {
  border-color: var(--ct-login-btn-bg, #4f46e5);
  box-shadow: 0 0 0 1px var(--ct-login-btn-bg, #4f46e5);
  outline: none;
}

/* "Quên mật khẩu?" — giữ đúng vị trí bên phải, core Frappe đã tự
   set text-align:right (login.bundle.scss), không đụng tới. */

.for-login .login-content.page-card .page-card-actions {
  margin-top: 20px !important;
}

/* ================================================================
   NÚT ĐĂNG NHẬP
   Sửa 2026-08-13 (phản hồi từ anh Huy: "nút hơi béo, chiều cao hơi
   cao" trên PC) — nguyên nhân: trước đó chỉ set padding mà không
   set font-size/line-height, nút bị kế thừa cỡ chữ nhỏ của
   .btn-sm (Bootstrap) trong khi padding lại lớn (17px), tỷ lệ mất
   cân đối. Fix: set rõ font-size/line-height khớp với ô nhập, giảm
   padding dọc — vẫn cao hơn ô nhập MỘT CHÚT (13px của ô nhập so
   với 14px của nút, không phải chênh 3px như trước), bo góc 11px
   đồng bộ với ô nhập (không đồng bộ với khung ngoài 18px — đúng
   yêu cầu phân cấp). Vẫn 1 màu cam ĐẶC qua --ct-login-btn-bg,
   không gradient. Mũi tên (::after) giữ nguyên.
   ================================================================ */

.for-login .btn-primary.btn-login {
  background-color: var(--ct-login-btn-bg, inherit);
  color: var(--ct-login-btn-color, inherit);
  border-radius: 11px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: auto !important;
  padding: 14px 24px !important;
  font-size: 14.5px;
  line-height: 1.3;
  font-weight: 700;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.for-login .btn-primary.btn-login::after {
  content: "\2192";
  opacity: 0.85;
  transition: transform 0.2s ease;
}

.for-login .btn-primary.btn-login:hover {
  background-color: var(--ct-login-btn-hover-bg, inherit);
  color: var(--ct-login-btn-hover-color, inherit);
}

.for-login .btn-primary.btn-login:hover::after {
  transform: translateX(4px);
}

/* ================================================================
   "HOẶC" + NÚT PHỤ "ĐĂNG NHẬP BẰNG LIÊN KẾT EMAIL"
   Giữ nguyên nội dung/nút đã có sẵn của Frappe core
   (.social-logins > p.login-divider "hoặc" + .social-login-buttons
   .btn-login-option) — chỉ nới khoảng cách cho đều nhịp với các
   phần tử khác trong khung mới. Không đổi màu/bo góc/kích thước
   của chính nút phụ này.
   ================================================================ */

.for-login .social-logins {
  margin-top: 20px;
}

.for-login .social-logins .login-divider {
  margin: 18px 0;
}

/* ================================================================
   ĐIỆN THOẠI: khung dùng width 100% tương đối theo cha (không
   dùng đơn vị vw tuyệt đối để tránh tràn/xê dịch ngang).
   ================================================================ */

main.container:has(.for-login),
main.container:has(.for-signup),
main.container:has(.for-forgot) {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

@media (max-width: 480px) {
  section.for-login {
    width: 100% !important;
    max-width: none !important;
    margin: 8vh auto 0 !important;
    padding: 28px 22px !important;
    border-radius: 16px;
  }
}

/* ================================================================
   DÒNG LIÊN KẾT CÔNG TY — cuối khung đăng nhập
   Phần tử do login_branding.js chèn làm con cuối cùng của
   section.for-login (sau .login-content.page-card) — nằm bên
   trong khung hợp nhất, ở dưới cùng, đúng yêu cầu. Nhỏ/nhạt màu,
   có đường kẻ mờ phân tách phía trên như khối clock.
   ================================================================ */

#login-footer-link {
  text-align: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

#login-footer-link a {
  font-size: 12px;
  color: var(--ct-page-heading, #1e293b);
  opacity: 0.55;
  text-decoration: none;
}

#login-footer-link a:hover {
  opacity: 0.9;
  color: var(--ct-login-btn-bg, inherit);
}

/* ================================================================
   TRANG ĐĂNG KÝ (Signup) — KHÔNG thuộc phạm vi yêu cầu lần này
   ("khung đăng nhập"), giữ nguyên style khối đơn (1 card, không
   tách head) đã có từ trước, không áp dụng cấu trúc hợp nhất mới
   ở trên (section.for-login) vì DOM signup không đổi.
   ================================================================ */

.signup-content.page-card {
  background-color: var(--ct-login-box-bg, inherit);
  border: 1px solid #dadce0;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
  padding: 48px 44px !important;
  max-width: 480px !important;
  overflow: hidden;
}

.signup-content.page-card form {
  max-width: 100%;
}

.signup-content.page-card input[type="text"],
.signup-content.page-card input[type="email"],
.signup-content.page-card input[type="password"] {
  width: 100%;
  background-color: #fff;
  border: 1px solid #dadce0;
  border-radius: 20px;
  height: auto !important;
  padding: 16px 18px 16px 44px !important;
  font-size: 14.5px;
}

.signup-content.page-card .toggle-password {
  top: 50% !important;
  transform: translateY(-50%);
}

.signup-content.page-card input[type="text"]:focus,
.signup-content.page-card input[type="email"]:focus,
.signup-content.page-card input[type="password"]:focus {
  border-color: var(--ct-login-btn-bg, #4f46e5);
  box-shadow: 0 0 0 1px var(--ct-login-btn-bg, #4f46e5);
  outline: none;
}

.btn-primary.btn-forgot {
  background-color: var(--ct-login-btn-bg, inherit);
  color: var(--ct-login-btn-color, inherit);
  border-radius: 20px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: auto !important;
  padding: 16px 24px !important;
  font-weight: 700;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-primary.btn-forgot::after {
  content: "\2192";
  opacity: 0.85;
  transition: transform 0.2s ease;
}

.btn-primary.btn-forgot:hover {
  background-color: var(--ct-login-btn-hover-bg, inherit);
  color: var(--ct-login-btn-hover-color, inherit);
}

.btn-primary.btn-forgot:hover::after {
  transform: translateX(4px);
}

@media (max-width: 480px) {
  .signup-content.page-card {
    width: 100% !important;
    max-width: none !important;
    margin: 8vh auto !important;
    padding: 32px 24px !important;
    border-radius: 18px;
  }
}