/* Style chung cho form */
#checkoutForm {
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 20px;
}

.row_form {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.col-lg-8,
.col-md-6,
.col-lg-6 {
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* Style cho các cột lớn (8/12) */
.col-lg-8 {
  flex: 0 0 auto;
  width: calc(100% * 8 / 12);
  max-width: calc(100% * 8 / 12);
}

/* Style cho các cột vừa (6/12) */
.col-md-6 {
  flex: 0 0 auto;
  width: calc(100% * 6 / 12);
  max-width: calc(100% * 6 / 12);
}

/* Style cho các cột nhỏ (6/12 bên trong cột 8) */
.col-lg-6 {
  flex: 0 0 auto;
  width: calc(100% * 6 / 12);
  max-width: calc(100% * 6 / 12);
}

/* Style cho input group */
.checkout__input {
  margin-bottom: 20px;
}

.checkout__input p {
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.checkout__input input[type="text"],
.checkout__input input[type="email"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}

.checkout__input input::placeholder {
  color: #999;
}

/* Style cho checkbox */
.checkout__input__checkbox {
  margin-bottom: 20px;
}

.checkout__input__checkbox label {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #333;
}

.checkout__input__checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: relative;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-right: 10px;
}

/* Khi checkbox được checked */
.checkout__input__checkbox input:checked ~ .checkmark {
  background-color: #2196f3;
}

/* Tạo dấu checkmark/tick */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Hiển thị dấu checkmark khi được checked */
.checkout__input__checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style cho dấu checkmark */
.checkout__input__checkbox .checkmark:after {
  left: 6px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* Style cho error message */
.error-message {
  color: red;
  font-size: 14px;
  margin-top: 5px;
}

.site-btn {
  display: inline-block; /* Để có thể điều chỉnh margin */
  background-color: #2196f3; /* Màu xanh dương */
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s ease;
  margin-top: 20px; /* Tạo khoảng cách với các trường phía trên */
}

.site-btn:hover {
  transform: scale(1.05);
  background-color: #0b7dda; /* Màu xanh dương đậm hơn khi hover */
}

/* Căn giữa nút gửi nếu muốn */
#checkoutForm .row_form {
  display: flex;
  flex-wrap: wrap; /* Giữ các cột Tên/Họ trên cùng dòng */
  justify-content: flex-start; /* Các phần tử bắt đầu từ bên trái */
  align-items: center; /* Căn chỉnh dọc theo đường giữa */
  margin-left: -15px;
  margin-right: -15px;
  margin-bottom: 20px;
}

#checkoutForm > .row_form > .site-btn {
  width: auto; /* Để nút tự điều chỉnh kích thước theo nội dung */
  margin: 20px auto 0 auto; /* Căn giữa nút theo chiều ngang */
  flex-basis: auto; /* Không chiếm toàn bộ chiều rộng */
}

/* Responsive cho màn hình nhỏ hơn (ví dụ: mobile) */
@media (max-width: 767px) {
  .col-lg-8,
  .col-md-6,
  .col-lg-6 {
    width: 100%;
    max-width: 100%;
  }

  .row_form {
    flex-direction: column; /* Chuyển các trường xuống dòng */
  }

  .site-btn {
    width: 100%; /* Nút gửi chiếm toàn bộ chiều rộng */
    margin-left: auto;
    margin-right: auto;
  }
}

/* Responsive cho màn hình tablet (ví dụ: 768px đến 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .col-md-6 {
    flex: 0 0 calc(50% - 30px);
    max-width: calc(50% - 30px);
    margin-right: 30px;
  }

  /* Đảm bảo phần tử cuối cùng không có margin phải */
  .row_form > .col-md-6:nth-child(odd) {
    margin-right: 30px;
  }

  .row_form > .col-md-6:nth-child(even) {
    margin-right: 0;
  }
}