/* Áp dụng cho tất cả các phần tử trong trang */
* {
  box-sizing: border-box; /* Bao gồm padding và border trong kích thước tổng của phần tử */
}

/* Container chính chứa toàn bộ form thanh toán */
.checkout-container {
  max-width: 600px;               /* Giới hạn chiều rộng tối đa 600px */
  margin: 40px auto;              /* Cách đều 40px trên dưới, căn giữa theo chiều ngang */
  padding: 30px;                  /* Khoảng cách bên trong container là 30px */
  background: #fff;               /* Màu nền trắng */
  border-radius: 12px;            /* Bo góc viền tròn 12px */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); /* Tạo bóng đổ nhẹ dưới container */
  font-family: 'Poppins', sans-serif; /* Sử dụng font Poppins, nếu không có thì font sans-serif mặc định */
}

/* Tiêu đề trong container */
.checkout-container h2 {
  text-align: center;             /* Căn giữa văn bản */
  font-size: 26px;                /* Cỡ chữ 26px */
  margin-bottom: 30px;            /* Khoảng cách bên dưới 30px */
  font-weight: 600;               /* Độ đậm chữ vừa phải (semi-bold) */
  color: #333;                   /* Màu chữ xám đậm */
}

/* Form thanh toán */
.checkout-form {
  display: flex;                 /* Sử dụng flexbox */
  flex-direction: column;        /* Xếp các phần tử con theo chiều dọc */
  gap: 20px;                    /* Khoảng cách giữa các phần tử con là 20px */
}

/* Nhóm mỗi trường input trong form */
.form-group {
  display: flex;                 /* Flexbox */
  flex-direction: column;        /* Xếp dọc nhãn và input */
}

/* Nhãn (label) cho input */
.form-group label {
  font-weight: 500;              /* Độ đậm chữ trung bình */
  margin-bottom: 6px;            /* Khoảng cách bên dưới label 6px */
  color: #444;                   /* Màu chữ xám hơi tối */
}

/* Các trường input, select và textarea chung */
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;                  /* Chiếm toàn bộ chiều ngang container cha */
  padding: 12px 14px;           /* Khoảng cách bên trong: trên/dưới 12px, trái/phải 14px */
  font-size: 15px;              /* Cỡ chữ 15px */
  border: 1px solid #ccc;       /* Viền màu xám nhạt, dày 1px */
  border-radius: 6px;           /* Bo tròn viền 6px */
  font-family: inherit;         /* Kế thừa font của phần tử cha */
  outline: none;                /* Bỏ đường viền mặc định khi focus */
  transition: border 0.2s ease; /* Hiệu ứng chuyển màu viền trong 0.2 giây mượt mà */
}

/* Khi input, select, textarea được focus (chọn) */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #888;           /* Viền đổi thành màu xám đậm hơn */
}

/* Riêng textarea */
.form-group textarea {
  resize: vertical;             /* Cho phép thay đổi kích thước theo chiều dọc */
  min-height: 90px;             /* Chiều cao tối thiểu 90px */
}

/* Phần tóm tắt (summary) */
.summary {
  font-size: 18px;              /* Cỡ chữ 18px */
  text-align: center;           /* Căn giữa chữ */
  font-weight: 600;             /* Đậm vừa phải */
  color: #000;                  /* Màu chữ đen */
  margin-top: 10px;             /* Khoảng cách trên 10px */
}

/* Nút gửi form thanh toán */
.btn-checkout {
  background-color: #000;       /* Nền màu đen */
  color: #fff;                  /* Chữ màu trắng */
  padding: 14px;                /* Khoảng cách bên trong 14px đều */
  font-size: 16px;              /* Cỡ chữ 16px */
  border: none;                 /* Không viền */
  border-radius: 8px;           /* Bo góc viền 8px */
  cursor: pointer;              /* Con trỏ chuột biến thành tay khi hover */
  transition: background 0.3s ease; /* Hiệu ứng chuyển màu nền mượt trong 0.3 giây */
}

/* Hiệu ứng khi hover vào nút thanh toán */
.btn-checkout:hover {
  background-color: #333;       /* Nền đổi thành màu xám đậm hơn */
}

/* Responsive cho màn hình nhỏ hơn hoặc bằng 480px */
@media (max-width: 480px) {
  .checkout-container {
    padding: 20px;             /* Giảm padding container xuống 20px */
  }

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

  .btn-checkout {
    font-size: 15px;           /* Giảm cỡ chữ nút xuống 15px */
  }
}