.booking-table-scroll {
    overflow-x: auto;
    max-width: 100%;
}

.booking-table-scroll table {
    width: max-content;
    /* bảng rộng đúng bằng nội dung */
    min-width: 100%;
    /* nhưng không nhỏ hơn màn hình */
    table-layout: auto;
    /* QUAN TRỌNG */
    border-collapse: collapse;
}

.booking-table-scroll th,
.booking-table-scroll td {
    white-space: nowrap;
    /* giữ 1 dòng → đúng width nội dung */
    vertical-align: middle;
}

.col-stt {
    width: 45px;
}

.col-hotel {
    width: 180px;
}

.col-date {
    width: 90px;
}

.col-night {
    width: 60px;
}

.col-roomtype {
    width: 120px;
}

.col-code {
    width: 140px;
}

.col-room {
    width: 70px;
}

.col-price {
    width: 90px;
}

.col-extra {
    width: 90px;
}

.col-total {
    width: 150px;
}

.col-paid {
    width: 90px;
}

.col-due {
    width: 100px;
}

.col-note {
    width: 260px;
}

.col-action {
    width: 160px;
}

.booking-table-scroll input,
.booking-table-scroll textarea {
    width: auto;
    /* không ép 100% */
    min-width: 80px;
    /* tránh quá nhỏ */
    max-width: 100%;
    box-sizing: border-box;
    font-size: 13px;
}

.booking-table-scroll .col-note,
.booking-table-scroll td:nth-child(14) {
    white-space: normal;
    /* cho xuống dòng */
}

.booking-table-scroll .view {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.booking-table-scroll tr.editing td input[data-field="cong_thuc_tong"],
.booking-table-scroll tr.editing td input[data-f="cong_thuc_tong_bookingtg"],
.booking-table-scroll tr.editing td input[data-f="cong_thuc_tong_vehicle"] {
    min-width: 500px;
}

.booking-table-scroll tr.editing td input[data-field="checkin"],
.booking-table-scroll tr.editing td input[data-field="checkout"] {
    min-width: 120px;
}

.booking-table-scroll tr.editing td input[data-field="price_booking"],
.booking-table-scroll tr.editing td input[data-field="phu_thu_booking"] {
    min-width: max-content;
}

.booking-itinerary-table {
    border-collapse: collapse;
    font-size: 14px;
}

.booking-itinerary-table th {
    background: #760d0d !important;
    text-align: center;
    color: white;
}

.booking-itinerary-table td {
    vertical-align: top;
}

.booking-itinerary-block {
    border-collapse: collapse;
    font-size: 14px;
}

.booking-itinerary-block td {
    vertical-align: top;
}

.itinerary-row-head {
    background: #f5f5f5;
    font-weight: bold;
}

.itinerary-row-service td {
    background: #fafafa;
    font-size: 13px;
}

.itinerary-row-content td {
    padding-top: 10px;
    text-align: left;
}

.itinerary-row-head td,
.itinerary-row-service td {
    background-color: #760d0d !important;
    color: white !important;
}

.booking-table-scroll td {
    position: relative;
}

/* icon i */
.note-icon {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 12px;
    height: 12px;
    font-size: 8px;
    line-height: 12px;
    text-align: center;
    border-radius: 50%;
    background: #ff9800;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
}

/* popup note */
.note-popup {
    position: absolute;
    bottom: 10px;
    right: 8px;
    margin-top: 6px;
    background: #222;
    color: #fff;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    z-index: 9999;
    white-space: nowrap;
}

.tour-code-color-red,
.cancel-deadline .view-text,
.cancel-deadline {
    color: red;
    font-weight: 600;
}

.expired-date {
    color: red;
    font-weight: bold;
}

.col-meals {
    width: 250px;
    max-width: 250px;
    white-space: pre-line;
    /* giữ xuống dòng từ textarea */
    word-break: break-word;
    /* tránh text dài bị tràn */
}

.col-meals .view {
    display: block;
    white-space: pre-line;
}

.col-meals input,
.col-meals textarea {
    width: 100%;
}

#booking-table-wrapper .editing td input[data-field="price_booking_formula"] {
    width: 150px;
}

.btn-add-row {
    background: #760D0D;
    color: #fbfbfb;
    border: 1px solid #ddd;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    justify-content: center;
}

#sync-booking-cost {
    padding: 8px 30px !important;
}

/*booking sales payment*/
.sale-payment-table input,
.sale-payment-table textarea {

    width: 100%;

    box-sizing: border-box;

}

.sale-payment-table td {

    vertical-align: middle;

}

.btn-payment-edit,
.btn-payment-save,
.btn-payment-delete {

    cursor: pointer;

    padding: 4px 8px;

    margin-right: 3px;

}

.sale-payment-table .view-text {

    display: block;

    min-height: 24px;

}

.sale-payment-table textarea {

    min-height: 70px;

}

.sale-payment-table tfoot {

    font-weight: bold;

    background: #fafafa;

}

.col-note-big,
th.col-note, th.col-note-big {
    min-width: 220px;
    width: 220px;
    white-space: pre-wrap;
}