/* Reset */
/* Áp dụng cho tất cả các phần tử (*) trên trang:
   - margin = 0: loại bỏ khoảng cách ngoài mặc định của trình duyệt
   - padding = 0: loại bỏ khoảng cách trong mặc định của trình duyệt
   - box-sizing = border-box: tính cả padding và border vào kích thước tổng của phần tử */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Container chỉnh sửa tài khoản */
/* .account-container là khung chứa chính của form chỉnh sửa tài khoản */
.account-container {
  max-width: 600px; /* giới hạn chiều rộng tối đa 600px */
  margin: 50px auto; /* căn giữa khối theo chiều ngang, khoảng cách trên dưới 50px */
  background: #fff; /* nền trắng */
  padding: 30px; /* khoảng cách bên trong 30px */
  border-radius: 8px; /* bo góc tròn bán kính 8px */
  box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* bóng đổ nhẹ phía dưới */
  font-family: 'Poppins', sans-serif; /* font chữ chính sử dụng Poppins, nếu không có dùng sans-serif */
}

/* Tiêu đề trong container */
.account-container h2 {
  text-align: center; /* căn giữa chữ */
  margin-bottom: 30px; /* khoảng cách phía dưới 30px */
  font-size: 28px; /* cỡ chữ 28px */
  color: #333; /* màu chữ xám đậm */
}

/* Thông tin tài khoản */
.account-info p {
  font-size: 16px; /* cỡ chữ 16px */
  margin: 10px 0; /* khoảng cách trên dưới 10px, trái phải 0 */
  color: #555; /* màu chữ xám vừa */
}

/* Form chỉnh sửa */
/* Thiết lập form bên trong .account-container */
.account-container form {
  display: flex; /* sử dụng flexbox */
  flex-direction: column; /* các phần tử con xếp dọc theo cột */
  gap: 15px; /* khoảng cách giữa các phần tử con 15px */
}

/* Label cho form */
.account-container label {
  font-weight: 500; /* chữ đậm vừa phải */
  font-size: 16px; /* cỡ chữ 16px */
  margin-bottom: 5px; /* cách dưới label 5px */
  color: #555; /* màu chữ xám vừa */
}

/* Các input và select trong container */
.account-container input,
.account-container select {
  padding: 10px; /* khoảng cách bên trong 10px */
  border: 1px solid #ddd; /* viền 1px màu xám nhạt */
  border-radius: 6px; /* bo góc viền tròn 6px */
  font-size: 16px; /* cỡ chữ 16px */
  transition: border-color 0.3s; /* hiệu ứng chuyển màu viền trong 0.3 giây khi thay đổi */
}

/* Hiệu ứng khi input hoặc select được focus */
.account-container input:focus,
.account-container select:focus {
  border-color: #e91e63; /* đổi màu viền thành hồng đậm */
  outline: none; /* bỏ viền outline mặc định */
}

/* Nút Save */
.btn-save {
  margin-top: 20px; /* cách trên 20px */
  padding: 12px; /* padding trong nút 12px */
  background: #e91e63; /* nền hồng đậm */
  color: #fff; /* chữ màu trắng */
  border: none; /* bỏ viền */
  border-radius: 6px; /* bo góc tròn 6px */
  font-size: 18px; /* cỡ chữ 18px */
  font-weight: 500; /* chữ đậm vừa */
  cursor: pointer; /* con trỏ chuột đổi thành tay khi hover */
  transition: background 0.3s; /* hiệu ứng chuyển nền 0.3 giây */
}

/* Hiệu ứng khi hover vào nút Save */
.btn-save:hover {
  background: #d81b60; /* đổi nền thành hồng đậm hơn */
}

/* Nút Back */
.btn-back {
  display: inline-block; /* hiển thị dạng khối nội tuyến */
  margin-top: 20px; /* cách trên 20px */
  text-align: center; /* căn giữa chữ */
  text-decoration: none; /* bỏ gạch chân */
  font-size: 16px; /* cỡ chữ 16px */
  color: #e91e63; /* màu chữ hồng đậm */
}

/* Thông báo lỗi */
.error {
  color: red; /* màu chữ đỏ */
  text-align: center; /* căn giữa chữ */
  margin-bottom: 20px; /* khoảng cách dưới 20px */
}

/* Thông báo thành công */
.success {
  color: green; /* màu chữ xanh lá */
  text-align: center; /* căn giữa chữ */
  margin-bottom: 20px; /* khoảng cách dưới 20px */
}

/* Hành động tài khoản (các link liên quan) */
.account-actions {
  text-align: center; /* căn giữa toàn bộ nội dung */
  margin-top: 30px; /* cách trên 30px */
}

/* Các liên kết trong phần hành động */
.account-actions a {
  display: inline-block; /* hiển thị dạng khối nội tuyến */
  background: #000; /* nền đen */
  color: white; /* chữ trắng */
  padding: 10px 20px; /* padding trên dưới 10px, trái phải 20px */
  border-radius: 5px; /* bo góc tròn 5px */
  text-decoration: none; /* bỏ gạch chân */
  margin: 0 10px; /* cách trái phải 10px */
}

/* Hiệu ứng hover cho liên kết */
.account-actions a:hover {
  background: #333; /* nền xám đậm */
}

/* ✅ Responsive Mobile */
/* Khi màn hình nhỏ hơn hoặc bằng 768px (máy tính bảng và điện thoại lớn) */
@media (max-width: 768px) {
  .account-container {
    margin: 30px 20px; /* khoảng cách trên dưới 30px, trái phải 20px */
    padding: 20px; /* padding bên trong giảm còn 20px */
  }

  .account-container h2 {
    font-size: 24px; /* giảm cỡ chữ tiêu đề xuống 24px */
  }

  .account-container input,
  .account-container select {
    font-size: 15px; /* giảm cỡ chữ input/select còn 15px */
  }

  .btn-save {
    font-size: 16px; /* giảm cỡ chữ nút Save còn 16px */
  }

  .account-actions a {
    display: block; /* chuyển sang dạng khối, chiếm hết chiều ngang */
    margin: 10px auto; /* khoảng cách trên dưới 10px, căn giữa ngang */
    width: 100%; /* rộng 100% container */
    max-width: 280px; /* giới hạn rộng tối đa 280px */
  }
}

/* Khi màn hình nhỏ hơn hoặc bằng 480px (điện thoại nhỏ) */
@media (max-width: 480px) {
  .account-container {
    padding: 15px; /* giảm padding bên trong còn 15px */
  }

  .btn-save {
    padding: 10px; /* giảm padding nút Save còn 10px */
    font-size: 15px; /* giảm cỡ chữ nút Save còn 15px */
  }

  .account-container h2 {
    font-size: 20px; /* giảm cỡ chữ tiêu đề còn 20px */
  }
}