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à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);
  }