/* ==========================================================================
   Kcoffee BI — cổng đăng nhập
   Dựng theo login-template.png: một tấm panel bo góc lớn nằm trên nền trang,
   góc dưới bên trái panel bị khoét một vịnh cong để đặt khối liên hệ.

   Bảng màu lấy theo nhận diện Kcoffee thay cho tông tím của mẫu:
     panel  #172554   nút  #1e3a8a   nhấn  #6b8cf0   thẻ  #ffffff

   Sáng/tối: tấm panel giữ navy ở CẢ hai chế độ (nó là mặt nhận diện). Thứ đổi
   là nền trang bao quanh panel và cái vịnh — nên nút chuyển chế độ vẫn thấy
   được tác dụng, mà bố cục của mẫu không bị phá.

   Hình khối: panel bo 32px, thẻ 24px, ô nhập và nút 12px.
   ========================================================================== */

/* Chế độ SÁNG: nền của cả trang là một mặt xanh xám nhạt, thẻ trắng nổi lên
   nhờ viền và bóng. Chế độ TỐI: chính mặt đó chuyển thành navy sẫm. Đây là thứ
   đổi màu chứ không chỉ mảng vịnh dưới đáy. */
.k-login {
  --k-lg-panel:    #e8eef7;   /* nền chính, chứa cả khung login lẫn hình */
  --k-lg-accent:   #1e3a8a;   /* nút chính */
  --k-lg-glow-a:   rgb(30 58 138 / 0.10);   /* vệt sáng sau hình minh hoạ */
  --k-lg-glow-b:   rgb(30 58 138 / 0.06);

  --k-lg-ink:      #0f172a;   /* chữ đậm trên nền chính */
  --k-lg-nav:      #475569;   /* chữ nav */
  --k-lg-nav-on:   #0f172a;   /* chữ nav khi rê chuột */
  --k-lg-foot:     #64748b;   /* dải bản quyền */
  --k-lg-btn-bg:   #1e3a8a;   /* nút trên nav */
  --k-lg-btn-ink:  #ffffff;
  --k-lg-card-line: #e2e8f0;  /* viền thẻ, chỉ cần ở chế độ sáng */

  /* Vịnh cố tình đi ngược chế độ đang bật: nền sáng thì vịnh tối và ngược lại.
     Nhờ vậy khối liên hệ luôn là một mảng tương phản rõ ở góc màn hình thay vì
     chìm vào nền. */
  --k-lg-bay:      #172554;
  --k-lg-bay-ink:  #ffffff;
  --k-lg-bay-dim:  #94a3b8;

  background: var(--k-lg-panel);
}

.dark .k-login {
  --k-lg-panel:    #172554;
  --k-lg-glow-a:   rgb(107 140 240 / 0.20);
  --k-lg-glow-b:   rgb(107 140 240 / 0.10);

  --k-lg-ink:      #ffffff;
  --k-lg-nav:      rgb(226 232 240 / 0.75);
  --k-lg-nav-on:   #ffffff;
  --k-lg-foot:     #94a3b8;
  --k-lg-btn-bg:   #6b8cf0;
  --k-lg-btn-ink:  #0b1324;
  --k-lg-card-line: transparent;

  /* Đảo lại: nền tối thì vịnh sáng. */
  --k-lg-bay:      #eef2f9;
  --k-lg-bay-ink:  #172554;
  --k-lg-bay-dim:  #64748b;
}

/* Đổi theme là đổi cả một mặt phẳng lớn, chuyển sắc thay vì nhảy phịch. */
.k-login,
.k-login-panel,
.k-login-card,
.k-login-bay { transition: background-color 400ms var(--k-ease), color 400ms var(--k-ease); }

/* Tấm panel -------------------------------------------------------------- */
/* Tràn kín màn hình, không bo góc và không chừa viền: trang này không có gì
   nằm ngoài panel để phải chừa chỗ. */
.k-login-panel {
  position: relative;
  background: var(--k-lg-panel);
  overflow: hidden;
  /* Vệt sáng rất nhẹ sau khu vực hình minh hoạ, đóng vai trò nguồn sáng của
     khung cảnh chứ không phải hoa văn rời. */
  background-image:
    radial-gradient(55rem 42rem at 26% 42%, var(--k-lg-glow-a), transparent 68%),
    radial-gradient(40rem 34rem at 92% 8%, var(--k-lg-glow-b), transparent 62%);
}

/* Vịnh cong góc dưới trái ------------------------------------------------ */
/* Tô bằng đúng màu nền trang, nên khi đổi sáng/tối vịnh đổi theo. Dùng SVG vì
   đường cong hình chữ S không diễn đạt được bằng border-radius. */
.k-login-bay {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52%;
  /* Co lại trên màn thấp để không lấn vào chỗ của hình minh hoạ. */
  height: clamp(128px, 22vh, 168px);
  color: var(--k-lg-bay);
  pointer-events: none;
}
.k-login-bay svg { display: block; width: 100%; height: 100%; }

/* Bản lật gương cho trang quên mật khẩu: cùng một đường path, chỉ soi ngược
   trục ngang, nên hai trang chắc chắn có cùng độ cong. */
.k-login-bay--right { left: auto; right: 0; }
.k-login-bay--right svg { transform: scaleX(-1); }

/* Nội dung trong vịnh phải nhận được chuột, còn lớp SVG thì không. */
.k-login-bay-content { pointer-events: auto; }

/* Nav -------------------------------------------------------------------- */
.k-login-brand { color: var(--k-lg-ink); }

.k-login-navlink {
  color: var(--k-lg-nav);
  transition: color 200ms var(--k-ease);
}
.k-login-navlink:hover { color: var(--k-lg-nav-on); }

.k-login-navbtn {
  border-radius: 10px;
  background: var(--k-lg-btn-bg);
  color: var(--k-lg-btn-ink);
  transition: transform 200ms var(--k-ease), box-shadow 260ms var(--k-ease), filter 200ms var(--k-ease);
  box-shadow: 0 8px 20px -10px rgb(15 23 42 / 0.55);
}
.k-login-navbtn:hover  { filter: brightness(1.1); box-shadow: 0 12px 26px -10px rgb(15 23 42 / 0.6); }
.k-login-navbtn:active { transform: translateY(1px); }

.k-login-foot { color: var(--k-lg-foot); }

/* Hình minh hoạ ---------------------------------------------------------- */
/* Chặn theo chiều cao màn hình, không chỉ theo bề ngang. Máy xách tay màn thấp
   mà hình cứ nở theo bề ngang là đẩy cả trang dài ra, sinh thanh cuộn. */
.k-login-art {
  width: auto;
  height: auto;
  /* Không còn chặn cứng theo rem: hình lấy trọn bề ngang của cột. Chặn chiều
     cao tính từ chiều cao màn hình trừ đi phần khung cố định (nav + đệm + dải
     bản quyền ~13rem), nên dù màn thấp cỡ nào cũng không đẻ ra thanh cuộn. */
  max-width: min(100%, 40rem);
  max-height: min(calc(100dvh - 13rem), 35rem);
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgb(15 23 42 / 0.16));
}
.dark .k-login-art { filter: drop-shadow(0 30px 60px rgb(5 10 35 / 0.55)); }

/* Biến thể Lottie: <div> rỗng không có kích thước nội tại như <img> nên phải
   tự giữ chỗ, nếu không thẻ bên phải sẽ nhảy lúc ảnh động vẽ xong. */
/* aspect-ratio đặt inline trong view theo đúng w/h đọc được từ file Lottie. */
/* <div> không có kích thước nội tại như <img>, nên ở đây phải cho chiều cao cụ
   thể rồi để aspect-ratio (đặt inline theo đúng w/h của file) suy ra bề ngang. */
.k-login-lottie {
  width: 100%;
  height: auto;
  max-width: 40rem;
  max-height: min(calc(100dvh - 13rem), 35rem);
  opacity: 0;
  transition: opacity 500ms var(--k-ease);
  /* Bóng đổ trên SVG động phải tính lại mỗi khung hình, rất tốn GPU. */
  filter: none;
}
/* Bản nhỏ hơn, dùng cho trang quên mật khẩu: hình ở đó là phụ, việc chính là
   cái biểu mẫu bên trái. Đè cả hai chặn nên áp được cho ảnh tĩnh lẫn Lottie.

   Hình của trang này gần vuông (429x444) chứ không nằm ngang như hình trang
   đăng nhập (638x420), nên cùng một mức chặn bề ngang nó sẽ cao hơn nhiều.
   Vì vậy chặn ở đây phải nhỏ hơn hẳn.

   Đặt width thẳng chứ không chỉ dùng max-width: khối Lottie có sẵn width:100%,
   chặn bằng max-* thì kích thước thật vẫn do khung cha quyết định, còn đặt
   tường minh thì không còn phụ thuộc vào đâu nữa. */
/* Viết hai lớp chồng nhau để độ ưu tiên cao hơn .k-login-art và .k-login-lottie,
   nên không phụ thuộc vào thứ tự dòng trong tệp nữa. */
.k-login-art.k-login-art--sm {
  width: min(100%, 32rem);
  height: auto;
  max-width: min(100%, 32rem);
  max-height: min(calc(100dvh - 14rem), 33rem);
}

.k-login-lottie.is-ready { opacity: 1; }
.k-login-lottie svg { display: block; }

/* Thẻ đăng nhập ---------------------------------------------------------- */
/* Thẻ giữ trắng ở cả hai chế độ (đúng như mẫu). Ở chế độ sáng nền quanh nó
   cũng nhạt nên phải thêm một đường viền, không thì thẻ tan vào nền. */
.k-login-card {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid var(--k-lg-card-line);
  box-shadow:
    0 2px 6px rgb(15 23 42 / 0.06),
    0 36px 72px -28px rgb(15 23 42 / 0.28);
}

.dark .k-login-card {
  box-shadow:
    0 2px 6px rgb(5 10 35 / 0.10),
    0 36px 72px -28px rgb(5 10 35 / 0.55);
}

.k-login-title {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: -0.005em;
  /* Dấu tiếng Việt nhô cao hơn chữ Latin, leading chặt quá là cắt mất dấu. */
  line-height: 1.2;
}

/* Ô nhập ----------------------------------------------------------------- */
.k-login-field {
  width: 100%;
  height: 52px;
  padding: 0 3rem 0 1.125rem;   /* chừa chỗ bên phải cho icon */
  font-size: 14.5px;
  font-weight: 500;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #e6e8f0;
  border-radius: 12px;
  transition: border-color 220ms var(--k-ease), box-shadow 220ms var(--k-ease);
}

.k-login-field::placeholder { color: #a3aab9; font-weight: 400; }

.k-login-field:focus {
  outline: none;
  border-color: var(--k-lg-accent);
  box-shadow: 0 0 0 4px rgb(30 58 138 / 0.10);
}

.k-login-field.is-invalid {
  border-color: #f43f5e;
  box-shadow: 0 0 0 4px rgb(244 63 94 / 0.09);
}

/* Autofill vẽ nền vàng đè lên và background-color không ghi đè được, phải ép
   lại bằng inset shadow. */
.k-login-field:-webkit-autofill,
.k-login-field:-webkit-autofill:focus {
  -webkit-text-fill-color: #0f172a;
  box-shadow: 0 0 0 100px #ffffff inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* Nút gửi ---------------------------------------------------------------- */
.k-login-submit {
  height: 52px;
  border-radius: 12px;
  background: var(--k-lg-accent);
  color: #fff;
  transition: transform 200ms var(--k-ease), box-shadow 300ms var(--k-ease), background-color 200ms var(--k-ease);
  box-shadow: 0 12px 26px -12px rgb(30 58 138 / 0.85);
}
.k-login-submit:hover  { background: #24469f; box-shadow: 0 18px 34px -14px rgb(30 58 138 / 0.95); }
.k-login-submit:active { transform: translateY(1px); box-shadow: 0 5px 14px -8px rgb(30 58 138 / 0.8); }
.k-login-submit:disabled { opacity: 0.7; pointer-events: none; }

/* Mũi tên nhích sang phải khi rê chuột: gợi hướng đi tiếp, không phải trang trí. */
.k-login-arrow { transition: transform 260ms var(--k-ease); }
.k-login-submit:hover .k-login-arrow { transform: translateX(4px); }

.k-login-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgb(255 255 255 / 0.35);
  border-top-color: #fff;
  border-radius: 999px;
  animation: k-login-spin 620ms linear infinite;
}
@keyframes k-login-spin { to { transform: rotate(360deg); } }

/* Nhịp vào trang --------------------------------------------------------- */
/* Chạy đúng một lần, theo thứ tự đọc. Không có vòng lặp vô hạn nào. */
@media (prefers-reduced-motion: no-preference) {
  /* Loại trừ biến thể Lottie: animation có `forwards` sẽ ghi đè opacity mà
     .is-ready đang điều khiển, làm mất nhịp hiện ra của ảnh động. */
  .k-login-art:not(.k-login-lottie) {
    opacity: 0;
    animation: k-login-art-in 900ms var(--k-ease) 120ms forwards;
  }

  .k-login-card {
    opacity: 0;
    animation: k-login-card-in 800ms var(--k-ease) 180ms forwards;
  }

  .k-login-in {
    opacity: 0;
    animation: k-login-rise 620ms var(--k-ease) forwards;
    animation-delay: calc(420ms + var(--i, 0) * 60ms);
  }
}

@keyframes k-login-art-in  { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes k-login-card-in { from { opacity: 0; transform: translateY(22px); }             to { opacity: 1; transform: none; } }
@keyframes k-login-rise    { from { opacity: 0; transform: translateY(8px); }              to { opacity: 1; transform: none; } }

/* Mốc gãy ---------------------------------------------------------------- */
/* Dưới 1024px: một cột, và bỏ vịnh cùng khối liên hệ — đường cong đó chỉ có ý
   nghĩa khi còn chỗ trống ở góc, ở màn hẹp nó chỉ đẩy thẻ xuống dưới nếp gấp. */
@media (max-width: 1023px) {
  .k-login-bay { display: none; }
  .k-login-art { max-width: 26rem; }
}