body {
  font-family: Arial, sans-serif;
  margin: 0;
  background-color: #f5f5f5;
}
.container {
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: none;
}
.container.active {
  display: block;
}
h2 {
  text-align: center;
  color: #333;
}
.button-group {
  text-align: center;
  margin-top: 20px;
}
.button-group button {
    background: #00adef !important;
    border: none;
    color: #fff;
}
button {
  background: #007bff;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin: 5px;
}
button:hover {
  background: #0056b3;
}
.date-picker {
  text-align: center;
  margin-bottom: 20px;
}
.date-picker input {
  padding: 5px;
  font-size: 16px;
}
.legend {
  text-align: center;
  margin-bottom: 20px;
}
.legend span {
  display: inline-block;
  padding: 5px 10px;
  margin: 5px;
  border-radius: 4px;
  font-size: 14px;
}
.trong {
  background: white;
  color: black;
  border: 1px solid #ccc !important;
}
.da-chon {
  background: #4CAF50 !important;
  color: white;
}
.het-han {
  background: #ccc !important;
  color: white;
}
.da-dat {
  background: red !important;
  color: white;
}


table.confirm-table th,
table.confirm-table td {
  border: none;
  text-align: left;
  padding: 5px;
}

#bb-booking-app table tbody > tr:nth-child(odd) > td,
#bb-booking-app table tbody > tr:nth-child(odd) > th {
  /* Chỉ áp dụng cho bảng của plugin */
  background-color: white;
}
#bb-booking-app table tbody > tr:hover > td,
#bb-booking-app table tbody > tr:hover > th {
  background-color: white;
}

img#bank-qr-image {
    width: 50%;
}
form#booking-form label{
	line-height:2;
}
form#booking-form {
    display: grid !important;
    align-items: center;
    align-content: space-between;
}
.acf-postbox>.inside {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

@media (max-width: 768px) {
  .time-slot { 
    width: 40px; 
    height: 30px; 
  }
  #booking-table th, #booking-table td { 
    padding: 4px; 
    font-size: 10px; 
  }
  #booking-table .court-name { 
    min-width: 60px; 
  }
  .button-group button { 
    padding: 6px 12px; 
    font-size: 12px; 
  }
  .legend span { 
    margin-right: 8px; 
    padding: 3px 6px; 
    font-size: 10px; 
  }
  .container { padding: 10px; }
	
}
@media(max-width:480px){
	img#bank-qr-image {
    width: 100%;
}
	.table-wrapper{
		overflow-x:scroll;
	}
	
}