body {
     background: #e9eef3;
     font-family: 'Segoe UI', sans-serif;
     margin: 0;
     padding: 2rem;
 }

 [v-cloak] {
     display: none;
 }

 #loginApp {
     display: flex;
     justify-content: center;
     margin-top: 60px;
 }

 .glass-box {
     backdrop-filter: blur(14px) saturate(160%);
     -webkit-backdrop-filter: blur(14px) saturate(160%);
     background-color: rgba(255, 255, 255, 0.6);
     border-radius: 16px;
     border: 1px solid rgba(200, 200, 200, 0.4);
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
     max-width: 500px;
     width: 100%;
     padding: 50px 40px;
     color: #333;
 }


 .glass-box h4 {
     text-align: center;
     font-weight: 600;
     margin-bottom: 1.5rem;
     color: #222;
 }

 .form-control {
     background: rgba(255, 255, 255, 0.8);
     border: 1px solid rgba(180, 180, 180, 0.4);
     color: #333;
 }

 .form-control::placeholder {
     color: #888;
 }

 .form-control:focus {
     border-color: #6ea8fe;
     box-shadow: none;
     background-color: rgba(255, 255, 255, 0.95);
     color: #111;
 }

 .btn-primary {
     background-color: #3a6df0;
     border-color: #3a6df0;
 }

 .btn-primary:hover {
     background-color: #305ace;
 }

 .btn-glass {
     background: rgba(255, 255, 255, 0.4);
     border: 1px solid rgba(180, 180, 180, 0.4);
     color: #333;
 }

 .btn-glass:hover {
     background-color: rgba(255, 255, 255, 0.6);
 }

 /* 1. Flip Card */
 .transition-flip-enter-active,
 .transition-flip-leave-active {
     transition: transform 0.6s ease;
     transform-style: preserve-3d;
     backface-visibility: hidden;
 }

 .transition-flip-enter-from {
     transform: rotateY(180deg);
     opacity: 0;
 }

 .transition-flip-leave-to {
     transform: rotateY(-180deg);
     opacity: 0;
 }

 /* 2. Slide X */
 .transition-slide-x-enter-active,
 .transition-slide-x-leave-active {
     transition: all 0.4s ease;
 }

 .transition-slide-x-enter-from {
     transform: translateX(100%);
     opacity: 0;
 }

 .transition-slide-x-leave-to {
     transform: translateX(-100%);
     opacity: 0;
 }

 /* 3. Zoom */
 .transition-zoom-enter-active,
 .transition-zoom-leave-active {
     transition: all 0.3s ease;
 }

 .transition-zoom-enter-from {
     transform: scale(0.85);
     opacity: 0;
 }

 .transition-zoom-leave-to {
     transform: scale(1.15);
     opacity: 0;
 }

 /* 4. Fade */
 .transition-fade-enter-active,
 .transition-fade-leave-active {
     transition: opacity 0.3s ease;
 }

 .transition-fade-enter-from,
 .transition-fade-leave-to {
     opacity: 0;
 }

 /* 5. Transform Fancy */
 .transition-transform-enter-active,
 .transition-transform-leave-active {
     transition: all 0.4s ease;
 }

 .transition-transform-enter-from {
     opacity: 0;
     transform: translateY(20px) scale(0.95);
 }

 .transition-transform-leave-to {
     opacity: 0;
     transform: translateY(-20px) scale(1.05);
 }

 .glass-alert {
     padding: 0.75rem 1.25rem;
     margin-bottom: 1.25rem;
     font-size: 1rem;
     font-weight: 600;
     border-radius: 0.75rem;
     backdrop-filter: blur(6px);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
     display: flex;
     align-items: center;
     line-height: 1.4;
 }


 /* ⚠️ Lỗi */
 .glass-alert-error {
     background-color: rgba(255, 0, 0, 0.07);
     border-left: 4px solid rgba(255, 0, 0, 0.6);
     color: rgba(200, 0, 0, 0.9);
 }

 /* ℹ️ Thông tin */
 .glass-alert-info {
     background-color: rgba(0, 123, 255, 0.07);
     border-left: 4px solid rgba(0, 123, 255, 0.6);
     color: rgba(0, 100, 220, 0.95);
 }


 /* ✅ Thành công */
 .glass-alert-success {
     background-color: rgba(0, 200, 100, 0.07);
     border-left: 4px solid rgba(0, 200, 100, 0.6);
     color: rgba(0, 150, 70, 1);
 }

 /* ⏳ Đợi xử lý */
 .glass-alert-waiting {
     background-color: rgba(255, 200, 0, 0.07);
     border-left: 4px solid rgba(255, 200, 0, 0.6);
     color: rgba(180, 140, 0, 1);
 }