/* CSS riêng để trang chủ đẹp hơn */
body {
  background: linear-gradient(135deg, #4686ab 0%, #539fb5 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
}
/* Tùy chỉnh Navbar hiệu ứng kính mờ */
.navbar {
  background-color: rgba(0, 0, 0, 0.02) !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  transition: background-color 0.3s ease;
}
.hero-text {
  color: #e3eaed;
}
.login-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.hidden {
  display: none;
}

.hero-section {
  text-align: center;
  padding: 50px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  backdrop-filter: blur(5px);
  margin-top: 80px;
}
/* Sửa body để dùng Flexbox dọc */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0; /* Đảm bảo không có margin thừa */
}

/* Phần container chính sẽ chiếm hết khoảng trống còn lại */
.container.d-flex {
  flex: 1; /* Quan trọng: Đẩy footer xuống dưới */
}

/* Footer */
footer {
  margin-top: auto; /* Đẩy footer xuống đáy nếu nội dung ngắn */
  width: 100%;
}