/* ============ MÀN HÌNH ĐĂNG NHẬP ============ */
/* overflow-y:auto + margin:auto trên thẻ con -> màn hình thấp (laptop 13", xoay ngang điện thoại)
   vẫn cuộn được để thấy nút Đăng nhập, thay vì bị cắt mất phần trên. */
#loginScreen{position:fixed;inset:0;z-index:190;display:none;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1200px 700px at 15% 10%,#f4f0ff 0%,#eef0fb 42%,#e9ecf7 100%);
  overflow-x:hidden;overflow-y:auto}
#loginScreen.on{display:flex}
#loginScreen.leaving{animation:lgOut .5s cubic-bezier(.4,0,1,1) forwards}
@keyframes lgOut{to{opacity:0;transform:scale(1.02);visibility:hidden}}
/* quầng sáng nền chuyển động chậm */
.lg-orb{position:fixed;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;will-change:transform}
.lg-orb.a{width:520px;height:520px;left:-140px;top:-160px;background:radial-gradient(circle,#c4b5fd,#a78bfa00 70%);animation:lgOrbA 19s ease-in-out infinite}
.lg-orb.b{width:460px;height:460px;right:-120px;bottom:-140px;background:radial-gradient(circle,#a5b4fc,#818cf800 70%);animation:lgOrbB 23s ease-in-out infinite}
.lg-orb.c{width:360px;height:360px;left:52%;top:-180px;background:radial-gradient(circle,#f0abfc,#e879f900 70%);animation:lgOrbC 27s ease-in-out infinite;opacity:.35}
@keyframes lgOrbA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(90px,70px) scale(1.14)}}
@keyframes lgOrbB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-80px,-60px) scale(1.1)}}
@keyframes lgOrbC{0%,100%{transform:translate(0,0)}50%{transform:translate(-60px,50px)}}

.lg-card{position:relative;width:100%;max-width:980px;margin:auto;border-radius:28px;overflow:hidden;background:#fff;
  box-shadow:0 40px 110px rgba(49,26,94,.20),0 4px 14px rgba(49,26,94,.06);
  display:grid;grid-template-columns:1fr;opacity:0;transform:translateY(26px) scale(.965);
  animation:lgCard .82s cubic-bezier(.16,1,.3,1) .06s forwards}
@media(min-width:900px){.lg-card{grid-template-columns:1.05fr .95fr}}
@keyframes lgCard{to{opacity:1;transform:none}}

.lg-left{padding:46px 46px 38px;display:flex;flex-direction:column;justify-content:center;min-height:540px}
@media(max-width:520px){.lg-left{padding:32px 24px 28px;min-height:auto}}
@media(max-height:700px){.lg-left{min-height:auto;padding:32px 40px 30px}}
.lg-rise{opacity:0;transform:translateY(14px);animation:lgRise .62s cubic-bezier(.16,1,.3,1) forwards}
@keyframes lgRise{to{opacity:1;transform:none}}

/* ô nhập: viền sáng dần + icon đổi màu khi focus */
.lg-field{position:relative}
.lg-field>.ms{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:20px;color:#9ca3af;transition:color .2s;pointer-events:none}
.lg-input{width:100%;height:52px;padding:0 46px;border:1.5px solid #e7e5ee;border-radius:15px;font-size:14.5px;color:#111827;background:#fcfcfe;
  transition:border-color .2s,box-shadow .25s,background .2s}
.lg-input::placeholder{color:#b6b6c2}
.lg-input:hover{border-color:#d8d3ea}
.lg-input:focus{border-color:rgb(var(--brand-500));background:#fff;box-shadow:0 0 0 4px rgba(124,58,237,.13)}
.lg-field:focus-within>.ms{color:rgb(var(--brand-500))}
.lg-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#9ca3af;transition:background .15s,color .15s}
.lg-eye:hover{background:#f4f1fd;color:rgb(var(--brand-500))}

.lg-btn{position:relative;width:100%;height:52px;border-radius:15px;border:0;cursor:pointer;overflow:hidden;
  background:linear-gradient(120deg,rgb(var(--brand-500)) 0%,rgb(var(--brand-600)) 45%,rgb(var(--brand-cham)) 100%);color:#fff;font-size:14.5px;font-weight:600;
  box-shadow:0 12px 28px rgb(var(--brand-600) / .32);transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s,filter .18s}
.lg-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 18px 38px rgb(var(--brand-600) / .38)}
.lg-btn:active:not(:disabled){transform:translateY(0)}
.lg-btn:disabled{filter:saturate(.55) brightness(1.06);cursor:not-allowed;box-shadow:none}
.lg-btn::after{content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);transition:left .6s ease}
.lg-btn:hover:not(:disabled)::after{left:120%}
.lg-spin{display:inline-block;width:17px;height:17px;border:2.2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}

.lg-err{max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .25s ease,margin .3s ease;margin:0}
.lg-err.on{max-height:160px;opacity:1;margin:0 0 14px}
.lg-shake{animation:lgShake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes lgShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}

/* ---- Bảng trang trí bên phải: KHÔNG hiển thị bất kỳ số liệu hay tính năng nào ---- */
.lg-right{position:relative;display:none;overflow:hidden;
  background:linear-gradient(150deg,rgb(var(--brand-500)) 0%,rgb(var(--brand-600)) 38%,rgb(var(--brand-cham)) 74%,#4338ca 100%)}
@media(min-width:900px){.lg-right{display:block}}
.lg-right::before{content:'';position:absolute;inset:-40%;
  background:conic-gradient(from 0deg,rgba(255,255,255,.16),transparent 28%,rgba(236,72,153,.22) 52%,transparent 76%,rgba(255,255,255,.16));
  animation:lgSpin 22s linear infinite}
@keyframes lgSpin{to{transform:rotate(360deg)}}
.lg-right::after{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:42px 42px;mask-image:radial-gradient(circle at 50% 45%,#000 12%,transparent 74%);
  -webkit-mask-image:radial-gradient(circle at 50% 45%,#000 12%,transparent 74%)}
.lg-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;z-index:2}
.lg-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.20)}
.lg-ring.r1{width:250px;height:250px;animation:lgPulse 4.4s ease-in-out infinite}
.lg-ring.r2{width:340px;height:340px;animation:lgPulse 4.4s ease-in-out .55s infinite}
.lg-ring.r3{width:430px;height:430px;animation:lgPulse 4.4s ease-in-out 1.1s infinite}
@keyframes lgPulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.06);opacity:.16}}
.lg-mark{position:relative;width:112px;height:112px;border-radius:30px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(6px);
  box-shadow:0 22px 54px rgba(23,10,60,.34);animation:lgFloat 5.2s ease-in-out infinite}
@keyframes lgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
.lg-word{color:#fff;font-size:29px;font-weight:700;letter-spacing:-.02em;text-shadow:0 3px 18px rgba(23,10,60,.32)}
.lg-sub{color:rgba(255,255,255,.72);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase}
.lg-dust{position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55);animation:lgDust linear infinite}
@keyframes lgDust{0%{transform:translateY(0);opacity:0}12%{opacity:.85}100%{transform:translateY(-360px);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .lg-card,.lg-rise{animation:none;opacity:1;transform:none}
  .lg-orb,.lg-right::before,.lg-ring,.lg-mark,.lg-dust{animation:none}
}

/* ---- Ẩn nút theo quyền: gắn class lên khung trang là cả nhóm nút biến mất ---- */
.no-write .perm-write{display:none !important}
.no-delete .perm-delete{display:none !important}