/* login.css — chỉ dùng cho trang đăng nhập (phục vụ công khai) */
:root {
  --sky-1: #0e2a3d;
  --sky-2: #143c52;
  --deep: #0a1c28;
  --line: rgba(126, 224, 178, .22);
  --leaf: #6fe0a4;
  --sun: #ffd479;
  --sun-d: #e8a12f;
  --txt: #dff3ea;
  --dim: #7fa5ac;
}

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

body {
  min-height: 100vh;
  color: var(--txt);
  font-family: 'Baloo 2', 'Quicksand', 'Segoe UI', system-ui, sans-serif;
  background:
    radial-gradient(1200px 620px at 12% -8%, #1d5570 0%, transparent 62%),
    radial-gradient(1000px 560px at 88% 4%, #24614a 0%, transparent 58%),
    linear-gradient(180deg, var(--sky-2) 0%, var(--sky-1) 42%, var(--deep) 100%);
  background-attachment: fixed;
  overflow: hidden;
}
body::after {
  content: '';
  position: fixed; left: 0; right: 0; bottom: 0; height: 230px; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 100% at 22% 100%, rgba(53, 168, 116, .32) 0%, transparent 62%),
    radial-gradient(120% 100% at 78% 100%, rgba(53, 168, 116, .22) 0%, transparent 60%);
}
#bgfx { position: fixed; inset: 0; z-index: -1; pointer-events: none; width: 100%; height: 100%; }

.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }

.login-box {
  position: relative; z-index: 2; width: 100%; max-width: 402px; padding: 34px 32px 26px;
  text-align: center; border-radius: 20px; border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(20, 52, 68, .94), rgba(9, 26, 38, .97));
  box-shadow: 0 26px 64px rgba(0, 0, 0, .55);
  animation: boxIn .45s cubic-bezier(.2, .9, .3, 1);
}
@keyframes boxIn { from { opacity: 0; transform: translateY(26px) scale(.96); } }

.login-sphere {
  width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%; position: relative;
  background: linear-gradient(180deg, #ff7d7d 0 47%, #f4f7f5 47% 53%, #e9eeec 53% 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5), inset 0 -8px 16px rgba(0, 0, 0, .22),
              inset 0 8px 16px rgba(255, 255, 255, .35);
  animation: bob 3.4s ease-in-out infinite;
}
.login-sphere::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
  background: #fff; border: 5px solid #cfd8d4;
  box-shadow: 0 0 20px rgba(255, 255, 255, .8);
  animation: glow 2.4s ease-in-out infinite;
}
.login-sphere::before {
  content: ''; position: absolute; inset: 8px 30px 62% 11px; border-radius: 50%;
  background: rgba(255, 255, 255, .45); filter: blur(3px); transform: rotate(-20deg);
}
@keyframes bob { 50% { transform: translateY(-6px) rotate(-5deg); } }
@keyframes glow { 50% { box-shadow: 0 0 34px rgba(255, 255, 255, 1); } }

.login-title { font-size: 24px; font-weight: 800; letter-spacing: 1.4px; margin-bottom: 4px; color: #f4fff9; }
.login-sub { font-size: 10.5px; font-weight: 700; letter-spacing: 2.6px; color: var(--leaf); margin-bottom: 26px; text-transform: uppercase; }

.field { text-align: left; margin-bottom: 14px; }
.field label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: #6cc9ff; margin-bottom: 5px;
}
input {
  font: inherit; width: 100%; outline: none; padding: 12px 13px;
  color: var(--txt); background: rgba(4, 18, 26, .72);
  border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
input:focus {
  border-color: var(--leaf); background: rgba(4, 22, 32, .9);
  box-shadow: 0 0 0 3px rgba(111, 224, 164, .18);
}

button.act {
  position: relative; overflow: hidden; font: inherit; font-weight: 700;
  border: none; border-radius: 11px; cursor: pointer;
  transition: transform .13s ease, filter .16s, box-shadow .16s;
}
.login-btn {
  width: 100%; margin-top: 6px; padding: 13px; font-size: 13.5px; letter-spacing: .8px;
  color: #3b2708; background: linear-gradient(180deg, #ffe3a3, var(--sun-d));
  box-shadow: 0 4px 0 rgba(155, 109, 23, .35), 0 6px 16px rgba(0, 0, 0, .3);
}
.login-btn:hover { filter: brightness(1.07); transform: translateY(-2px); }
.login-btn:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(155, 109, 23, .35); }
.login-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; filter: grayscale(.35); }

.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, .45); transform: scale(0); opacity: .7;
  animation: rip .6s ease-out forwards;
}
@keyframes rip { to { transform: scale(1); opacity: 0; } }

.login-err { color: #ffb3b3; font-size: 12.5px; min-height: 19px; margin: 2px 0 4px; font-weight: 600; line-height: 1.4; }
.login-foot { margin-top: 18px; font-size: 10.5px; letter-spacing: .8px; color: var(--dim); line-height: 1.5; }

.shake { animation: shk .45s; }
@keyframes shk { 25% { transform: translateX(-8px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}