/* Khoa man hinh khi di vang */
.pre-locked #app-screen { visibility: hidden; }
body.app-locked #app-screen { filter: blur(18px) saturate(.6); pointer-events: none; user-select: none; }
body.app-locked #ai-panel, body.app-locked .image-viewer { display: none !important; }
.lock-screen {
  position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(800px 500px at 20% 10%, rgba(59, 147, 255, .35), transparent 70%),
              radial-gradient(700px 500px at 90% 90%, rgba(91, 91, 240, .35), transparent 70%), rgba(10, 16, 30, .72);
  backdrop-filter: blur(6px); animation: lock-in .25s ease;
}
@keyframes lock-in { from { opacity: 0; } }
.lock-card {
  width: 360px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 30px 26px 20px; border-radius: 22px; background: var(--surface); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); text-align: center;
}
.lock-card.shake { animation: lock-shake .35s; }
@keyframes lock-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.lock-avatar {
  width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--grad); color: #fff; font-size: 30px; font-weight: 700; box-shadow: var(--glow);
}
.lock-user { font-size: 18px; font-weight: 700; color: var(--text); }
.lock-sub { font-size: 13px; color: var(--muted); }
.lock-news { font-size: 13px; font-weight: 600; color: var(--primary); background: var(--primary-soft); padding: 4px 12px; border-radius: 999px; }
.lock-form { display: flex; gap: 8px; width: 100%; margin-top: 8px; }
.lock-form input { flex: 1; min-width: 0; padding: 11px 14px !important; border-radius: 12px !important; font-size: 14px; }
.lock-form button {
  border: none; border-radius: 12px; padding: 0 16px; cursor: pointer; font-weight: 600; color: #fff; background: var(--grad); box-shadow: var(--glow);
}
.lock-form button:disabled { opacity: .6; }
.lock-error { min-height: 18px; font-size: 12.5px; color: var(--danger); }
.lock-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.lock-foot label { display: flex; align-items: center; gap: 6px; }
.lock-foot select { padding: 3px 6px; font-size: 12px; border-radius: 6px; }
.lock-logout { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; text-decoration: underline; }
.lock-logout:hover { color: var(--danger); }