body {
    font-family: 'Poppins', sans-serif; /* Đặt font chữ chính cho toàn trang là Poppins, fallback sang sans-serif */
    background: #fafafa; /* Màu nền sáng nhạt cho toàn trang */
    display: flex; /* Sử dụng flexbox để dễ căn chỉnh nội dung con */
    justify-content: center; /* Căn giữa theo chiều ngang */
    align-items: center; /* Căn giữa theo chiều dọc */
    height: 100vh; /* Chiều cao bằng 100% chiều cao viewport (cửa sổ trình duyệt) */
}

.login-container {
    background: #fff; /* Nền màu trắng cho hộp login */
    padding: 40px 30px; /* Khoảng cách bên trong: 40px trên dưới, 30px trái phải */
    border-radius: 10px; /* Bo góc tròn 10px */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* Đổ bóng nhẹ phía dưới hộp để tạo chiều sâu */
    text-align: center; /* Căn chữ và nội dung bên trong hộp login ở giữa */
    width: 100%; /* Chiều rộng hộp bằng 100% phần tử cha */
    max-width: 400px; /* Giới hạn chiều rộng tối đa 400px để không quá rộng trên màn hình lớn */
}

.login-container h2 {
    margin-bottom: 20px; /* Khoảng cách dưới tiêu đề 20px để tách biệt với nội dung phía dưới */
    color: #333; /* Màu chữ xám đậm, không quá đen */
}

.login-container form {
    display: flex; /* Sử dụng flexbox cho form để dễ bố trí input và button */
    flex-direction: column; /* Xếp các phần tử con theo chiều dọc (cột) */
    gap: 15px; /* Khoảng cách đều 15px giữa các phần tử con trong form */
}

.login-container input {
    padding: 10px; /* Khoảng cách bên trong input giúp dễ nhập liệu */
    border: 1px solid #ddd; /* Viền mỏng màu xám nhạt */
    border-radius: 5px; /* Bo góc input tròn nhẹ */
}

.login-container button {
    padding: 10px; /* Khoảng cách bên trong nút */
    background-color: #000; /* Nền nút màu đen */
    color: #fff; /* Chữ màu trắng để tương phản với nền */
    font-weight: bold; /* Chữ đậm */
    border: none; /* Bỏ viền mặc định */
    border-radius: 5px; /* Bo góc nút tròn nhẹ */
    cursor: pointer; /* Con trỏ chuột chuyển thành tay khi hover để nhận biết nút bấm được */
    transition: background-color 0.3s; /* Hiệu ứng chuyển màu nền khi hover diễn ra mượt trong 0.3s */
}

.login-container button:hover {
    background-color: #333; /* Khi hover đổi màu nền nút thành xám đậm hơn */
}

.error {
    color: red; /* Màu chữ đỏ cho các thông báo lỗi */
    margin-bottom: 15px; /* Khoảng cách bên dưới để tách lỗi với các phần tử tiếp theo */
}

.register-link {
    margin-top: 20px; /* Khoảng cách trên để tách liên kết đăng ký với form */
    font-size: 14px; /* Cỡ chữ nhỏ hơn để phân biệt */
}

/* Media query cho màn hình có chiều rộng tối đa 768px (máy tính bảng, điện thoại lớn) */
@media (max-width: 768px) {
    body {
      padding: 20px; /* Thêm khoảng cách padding bên trong body để không sát mép màn hình */
      height: auto; /* Chiều cao tự động, không cố định 100vh nữa */
      align-items: flex-start; /* Căn nội dung lên trên thay vì giữa chiều dọc */
    }
  
    .login-container {
      padding: 30px 20px; /* Giảm padding bên trong để vừa màn hình nhỏ */
      box-shadow: 0 3px 10px rgba(0,0,0,0.08); /* Giảm độ đậm bóng */
    }
  
    .login-container h2 {
      font-size: 22px; /* Giảm kích thước tiêu đề */
    }
  
    .login-container input,
    .login-container button {
      font-size: 15px; /* Giảm kích thước chữ trong input và button */
    }
  
    .register-link {
      font-size: 13px; /* Giảm font size liên kết đăng ký */
    }
}

/* Media query cho màn hình nhỏ hơn hoặc bằng 480px (điện thoại nhỏ) */
@media (max-width: 480px) {
    .login-container {
      padding: 25px 15px; /* Giảm padding còn 25px trên dưới, 15px trái phải */
      border-radius: 8px; /* Bo góc nhỏ lại 8px để phù hợp kích thước nhỏ */
    }
  
    .login-container h2 {
      font-size: 20px; /* Tiêu đề nhỏ hơn nữa */
    }
  
    .login-container input {
      padding: 9px; /* Giảm padding input */
    }
  
    .login-container button {
      padding: 10px; /* Giữ padding button */
      font-size: 14px; /* Chữ trong nút nhỏ hơn */
    }
  
    .register-link {
      font-size: 12px; /* Liên kết đăng ký nhỏ nhất */
      margin-top: 15px; /* Giảm margin trên */
    }
}