/*===== thay đổi chiều rộng modal chi tiết đăng ký thí nghiệm 90%*/
.modal-90vw .modal-dialog, /* Áp dụng cho Bootstrap 4 nếu modal-90vw đặt ở modal-dialog */
.modal-dialog.modal-90vw { /* Áp dụng cho Bootstrap 5 nếu modal-90vw đặt ở modal-dialog */
    max-width: 90vw !important; /* Chiều rộng tối đa là 90% chiều rộng của viewport (khung nhìn) */
    width: 90vw !important; /* Đặt cả width để đảm bảo nếu cần */
    margin: 1.75rem auto; /* Giữ margin mặc định của Bootstrap để căn giữa và có khoảng cách trên dưới */
}

/* Điều chỉnh cho màn hình nhỏ hơn nếu 90vw vẫn quá lớn hoặc bạn muốn khác đi */
@media (max-width: 768px) { /* Ví dụ: cho màn hình nhỏ hơn 768px */
    .modal-90vw .modal-dialog,
    .modal-dialog.modal-90vw {
        max-width: 95vw !important; /* Có thể tăng lên 95% cho màn hình nhỏ */
        width: 95vw !important;
    }
}

/* Đảm bảo modal-content chiếm toàn bộ chiều rộng của modal-dialog mới */
.modal-90vw .modal-content,
.modal-dialog.modal-90vw .modal-content {
    width: 100%;
}
/* ======= Tăng chiều rộng cho ô input tìm kiếm của bảng dungCuAnToanTable và dangkythinghiemTable*/
#dungCuAnToanTable_filter input[type="search"] {
    width: 300px !important; /* Đặt chiều rộng bạn muốn, ví dụ 300px */
    /* Hoặc bạn có thể thử với % nếu muốn nó co giãn theo container, ví dụ: width: 50% !important; */
    /* display: inline-block; */ /* Đảm bảo nó không chiếm toàn bộ dòng nếu không cần thiết */
    /* margin-left: 0.5em; */ /* Thêm một chút lề trái nếu cần */
}
#dangKyThiNghiemTable_filter input[type="search"] {
    width: 300px !important; /* Đặt chiều rộng bạn muốn, ví dụ 300px */
    /* Hoặc bạn có thể thử với % nếu muốn nó co giãn theo container, ví dụ: width: 50% !important; */
    /* display: inline-block; */ /* Đảm bảo nó không chiếm toàn bộ dòng nếu không cần thiết */
    /* margin-left: 0.5em; */ /* Thêm một chút lề trái nếu cần */
}
/*======== Style cho tên file bị cắt ngắn với dấu "..." */
#danhSachFileContainer .filename-truncate {
    flex-grow: 1; /* Cho phép tên file chiếm không gian còn lại */
    flex-shrink: 1; /* Cho phép tên file co lại nếu cần */
    min-width: 0; /* Rất quan trọng để text-overflow hoạt động trong flex item */

    white-space: nowrap; /* Giữ văn bản trên một dòng */
    overflow: hidden; /* Ẩn phần văn bản bị tràn */
    text-overflow: ellipsis; /* Hiển thị dấu "..." */

    margin-right: 15px; /* Tạo khoảng cách với phần ngày tháng bên phải */
    /* vertical-align: middle; */ /* Không cần thiết nếu div cha đã có align-items-center */
}

/* Đảm bảo phần ngày tháng không bị co lại quá nhiều */
#danhSachFileContainer .list-group-item-action .d-flex small.text-nowrap {
    flex-shrink: 0; /* Không cho phép co lại */
}

/* Tùy chỉnh thêm cho list-group-item nếu cần để đảm bảo hiển thị đẹp */
#danhSachFileContainer .list-group-item-action {
    /* Có thể bạn muốn giới hạn chiều cao tối đa của mỗi item nếu tên file quá dài và wrap (mặc dù nowrap ở trên) */
}

/* ======== Thay đổi kích thước các nút nhấn trên các dòng dụng cụ an toàn, dang ky thi nghiem*/
.btn-table-action {
    padding: 0.4rem 0.6rem; /* Giảm padding trên dưới và trái phải */
    font-size: 0.9rem; /* Giảm kích thước font chữ (và cả icon nếu nó kế thừa) */
    line-height: 1.2; /* Điều chỉnh chiều cao dòng nếu cần */
    /* margin-bottom: 2px; */ /* Thêm một chút margin dưới nếu các nút quá sát nhau khi bảng hẹp */
}


/*========= Áp dụng màu nền cho các dòng dụng cụ an toàn trong bảng chi tiết đăng ký thí nghiệm */
.bg-quahan {
    background-color: #f8d7da !important;
}

.bg-saphethan {
    background-color: #fff3cd !important;
}   

    
/* ========== Thay đổi màu nền cho các dòng dụng cụ an toàn có trạng thái hết hạn hoặc sắp hết hạn*/
.bg-quahan {
    background-color: #f8d7da !important; /* Màu đỏ rất nhạt của Bootstrap danger alert */
    /* Hoặc một màu bạn thích: background-color: rgba(255, 0, 0, 0.1) !important; */
}

/* Tùy chọn: CSS cho trạng thái "Sắp hết hạn" */
.bg-saphethan {
    background-color: #fff3cd !important; /* Màu vàng rất nhạt của Bootstrap warning alert */
    /* Hoặc: background-color: rgba(255, 255, 0, 0.1) !important; */
}

    /* Đảm bảo text vẫn đọc được trên nền màu */
    .bg-quahan td, .bg-saphethan td {
        /* color: #58151c; */ /* Nếu cần đổi màu chữ cho dễ đọc hơn */
    }

/*Các nút Thêm Mới, Cập Nhật Thí Nghiệm đưa sát xuống lề dưới*/
#actionButtonsContainer {
    display: flex;
    align-items: flex-end; /* Căn các nút xuống sát lề dưới của container này */
    gap: 0.5rem;
    
}


/*Bảng danh sách dụng cụ an toàn*/
#dungCuAnToanTable {
    /* Bạn có thể chọn kiểu viền, độ dày và màu sắc mong muốn */
    border-top: 2px solid #dee2e6; /* Đây là màu viền mặc định của Bootstrap cho bảng */
    border-bottom: 2px solid #dee2e6; /* Đây là màu viền mặc định của Bootstrap cho bảng */
    /* Hoặc một màu khác rõ hơn nếu bạn muốn, ví dụ: */
    /* border-top: 2px solid #6c757d; */ /* Màu xám đậm hơn */
}

/*Bảng danh sách đăng ký thí nghiệm dụng cụ an toàn*/
#dangKyThiNghiemTable {
    /* Bạn có thể chọn kiểu viền, độ dày và màu sắc mong muốn */
    border-top: 2px solid #dee2e6; /* Đây là màu viền mặc định của Bootstrap cho bảng */
    border-bottom: 2px solid #dee2e6; /* Đây là màu viền mặc định của Bootstrap cho bảng */
    /* Hoặc một màu khác rõ hơn nếu bạn muốn, ví dụ: */
    /* border-top: 2px solid #6c757d; */ /* Màu xám đậm hơn */
}