.booking {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: stretch;
}
.card {
    border: 0.1rem solid #D9D9D9;
    padding: 1rem;
    display: inline-flex;
    flex-direction: column;
    background-color: #fff;
    color: #202020;
    justify-content: flex-start;
    align-items: stretch;
    width: 22rem;
    margin: 0 auto;
}
.borderXacNhan ~ h2 {
    width: 22rem;
    margin: 0 auto;
}
.card-title {
    font-size: 1.5rem;
    text-transform: uppercase;
}
.card-price {
    font-size: 1.5rem;
}
.select-date {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.select-date p {
    text-align: left; /* Đảm bảo văn bản luôn được căn trái */
    width: 100%;
}
.icon-delete {
    width: 1.5rem;
    height: auto;
}
.btn-clear-date {
    position: absolute;
    right: 1.5rem; /* Canh lề phải */
    top: 50%;
    transform: translateY(-50%); /* Canh chính giữa theo chiều dọc */
    z-index: 99; /* Đẩy nó nổi lên trên cùng, không ai đè được */
    background: transparent;
    border: none;
    padding: 0.5rem; /* Tăng diện tích bấm (hitbox) cho dễ chạm trên điện thoại */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-clear-date:focus {
    outline: none; /* Xóa viền xấu xí khi click */
}

/* Ép phần chữ của ô input phải nhường chỗ, không được tràn đè dưới dấu X */
#bookingDate {
    padding-right: 3.5rem !important;
}
.input-container {
    border: 0.1rem solid #DDDDDD;
    padding: 0.5rem 2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #fff;
    margin-top: 0.5rem;
    width: 100%;
    position: relative;
}
.nhom-nut-datban {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}
.border-datban {
    border: 0.1rem solid #DDDDDD;
    padding: 1.5rem 1.3rem;
    width: 100%;
    display: flex;
    color: #8E8E93;
}
.btn-datban-color {
    color: #8E8E93 !important;
    -webkit-appearance: none;
    appearance: none;
}
.active-btn {
    background-color: #AAAAAA;
    color: #FFFFFF !important;
}
.cho {
    margin: 3rem;
}
.luuY {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    text-align: left;
}
.luuYp {
    color: #202020;
    font-size: 2rem;
}
.luuYpp {
    font-size: 1.3rem;
}
.luuY .chinhSach {
    font-size: 1.2rem;
    color: #8E8E93;
}
.card ~ h2 {
    color: #000000;
}
.btn-xacnhan {
    padding: 1rem 3rem;
    background-color: #000000;
    color: #fff;
    border: none;
    font-family: inherit;
    cursor: pointer;
    margin-bottom: 1rem;
}
.booking-full-notice {
    width: 100%;
    max-width: 35rem;
    background-color: #e5e5e5;
    padding: 4rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.booking-full-notice p {
    color: #4D4D4D;
}
.booking-full-notice button {
    color: #4D4D4D;
}
.btn-choose-other {
    background-color: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
}
.space-slider-overlay {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.space-slider-overlay button {
    background-color: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
    padding: 1rem;
    flex-shrink: 0; /* Ngăn không cho nút bị bóp nhỏ lại */
}
.space-image-box {
    flex: 1; /* Cho ảnh chiếm toàn bộ không gian còn dư ở giữa */
    padding: 1rem 1rem;
}
.space-image-box img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.cardguest {
    border: 0.1rem solid #D9D9D9;
    padding: 1rem 0.5rem;
    display: inline-flex;
    flex-direction: column;
    background-color: #fff;
    color: #202020;
    justify-content: flex-start;
    align-items: stretch;
    gap: 1rem;
}
.group-of-guests {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.5rem;
}
.group-of-guests-op {
    display: flex;
    align-items: center; /* Căn giữa hình ảnh và nút theo chiều ngang */
    justify-content: center; /* Căn giữa cụm nội dung ra giữa màn hình */
    gap: 1rem;
}
.group-of-guests-op img {
    width: 1rem;
    height: 1rem;
    border-radius: 50%; /* Đảm bảo hình luôn tròn */
    object-fit: cover;
    display: block;
}
.group-of-guests-op button {
    background: transparent;
    border: none;
    padding: 0;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}
.chinhSach {
    font-size: 1.2rem;
    color: #8F8F8F;
}
.group-of-guests-op .fewer-than {
    margin-right: -0.5rem;
}

/* Custom giao diện cho dropdown Khung giờ */
select.booking-input {
    width: 100%;
    border: none;
    background-color: transparent;
    font-family: inherit;
    font-size: inherit;
    color: inherit; /* Kế thừa màu từ thẻ cha .input-container */
    cursor: pointer;

    /* Xóa style mặc định của trình duyệt */
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Vẽ lại mũi tên xuống */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%238E8E93%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 0.1rem center; /* Canh lề mũi tên */
    background-size: 1rem auto; /* Kích thước mũi tên */
}

/* Ẩn dòng "Chọn khung giờ..." khỏi danh sách xổ xuống sau khi đã click */
select.booking-input option[value=""][disabled] {
    display: none;
}
.booking-input {
    font-family: inherit;
    font-size: inherit;
}

/* -----------------------------------------
   CUSTOM FLATPICKR THEO THIẾT KẾ FIGMA
----------------------------------------- */
/* 1. Trạng thái ngày ĐÃ CHỌN (Đổi màu & ô vuông) */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: #8E8E93 !important;
    border-radius: 0 !important;
}
/* 2. Trạng thái HOVER (Khi rê chuột vào ngày chưa chọn) */
.flatpickr-day:hover {
    border-radius: 0 !important; /* Cho nó hình vuông luôn để đồng bộ */
}
.flatpickr-day.today {
    border-radius: 0 !important; /* Biến vòng tròn thành hình vuông */
    border-color: #8D8D8D !important; /* Đổi viền xanh dương mặc định thành màu xám */
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    border-radius: 0 !important;
    border-color: #8D8D8D !important;
    background: #f0f0f0 !important; /* Thêm chút màu nền xám nhạt khi hover */
    color: #333 !important;
}

/* GIAO DIỆN DROPDOWN MỚI */
/* Ẩn thẻ select mặc định của trình duyệt */
.custom-select-wrapper select {
    display: none;
}

/* Định dạng bộ khung ngoài */
.custom-select-wrapper {
    position: relative;
    width: 100%;
    user-select: none;
}

/* Định dạng ô hiển thị đang chọn */
.custom-select-trigger {
    background-color: #fff;
    color: #8E8E93;
    cursor: pointer;
    display: flex;
    padding: 0.3rem 5rem 0.3rem 0rem;
}

/* Danh sách các tùy chọn (Mặc định ẩn) */
.custom-options {
    position: absolute;
    display: block;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    border: 0.1rem solid #DDDDDD;
    border-top: none;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.2s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* Hiển thị danh sách khi click */
.custom-select-wrapper.open .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* Từng dòng giờ giấc */
.custom-option {
    padding: 0.8rem 2rem;
    color: #8E8E93;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* MÀU KHI RÊ CHUỘT (Thay thế màu xanh mặc định) */
.custom-option:hover {
    background-color: #AAAAAA;
    color: #fff;
}

/* Màu khi đang được chọn */
.custom-option.selected {
    background-color: #e5e5e5;
    font-weight: bold;
    color: #8E8E93;
}

/* Khung bọc bộ đếm số khách */
.guest-counter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1.5rem;
}

/* Nút bấm tròn + và - */
.btn-guest {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0;
}

.btn-guest svg {
    transition: stroke 0.2s ease;
}

/* Ô hiển thị số ở chính giữa */
.guest-input {
    text-align: center;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.6rem;
    color: #8E8E93;
    width: 6rem;
    font-family: inherit;
    cursor: default;
}

/* Ẩn hoàn toàn mũi tên tăng giảm mặc định của trình duyệt */
.guest-input::-webkit-outer-spin-button,
.guest-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.guest-input[type=number] {
    -moz-appearance: textfield;
}

/* Hiệu ứng chuyển màu mượt mà */
.btn-guest svg circle,
.btn-guest svg line {
    transition: all 0.15s ease;
}

/* Đổ nền xám, viền xám khi RÊ CHUỘT hoặc BẤM CLICK */
.btn-guest:hover svg circle,
.btn-guest:active svg circle {
    fill: #B5B5B5;   /* Màu nền xám (giống màu viền mặc định) */
    stroke: #B5B5B5; /* Viền xám */
}

/* Đổi dấu cộng (+) và trừ (-) thành màu trắng */
.btn-guest:hover svg line,
.btn-guest:active svg line {
    stroke: #ffffff;
}