/*Đây là file site.formlist.css*/

.my-table {
    width: 100%; /* Bảng chiếm toàn bộ chiều ngang container */
    border-collapse: collapse; /* Gộp viền nếu có border */
    font-size: 13px; /* Font nhỏ gọn cho bảng */
}
    .my-table thead th {
        position: sticky;
        top: 0;
        z-index: 2; /* để nổi lên trên */
        line-height: 2rem;
    }
    .my-table th {
        /*font-weight: bold; *//* Chữ in đậm ở tiêu đề cột */
        padding: 2px 3px; /* Padding nhỏ gọn: 6px top/bottom, 8px left/right */
        text-align: left; /* Căn lề trái tiêu đề */
        /*background-color: #f9f9f9; */
        background-color: dodgerblue #f9f9f9; /* Màu nền nhẹ để nổi bật tiêu đề */
        
    }

    .my-table td {
        padding: 2px 4px; /* Padding nhỏ hơn th để bảng gọn gàng */
        vertical-align: middle; /* Căn giữa theo chiều dọc */
        /*display: inline-block;*/
    }

    .my-table tr {
        margin-left: 4px; /* Khoảng cách nhỏ bên trái từng dòng (nếu có spacing giữa các dòng) */
    }

    td .btn {
        display: inline-flex; /* Giữ các nút nằm cùng hàng */
        align-items: center;
        gap: 4px; /* Khoảng cách icon và text */
        margin-right: 6px;
        white-space: nowrap; /* Ngăn text xuống dòng */
        font-size: 12px; 
        padding: 1px 4px;
    }



.table thead th {
    /*position: sticky;*/
    /*top: 0; *//* Gắn dính vào đỉnh của phần tử cuộn */
    /*background-color: #f8f9fa; /* Màu nền cho tiêu đề khi dính, để nó không trong suốt */
    /*z-index: 2;*/ /* Đảm bảo tiêu đề nằm trên nội dung cuộn */
    /* Bạn có thể dùng màu nền .table-light hoặc .table-primary nếu muốn khớp */
    /* background-color: var(--bs-table-bg); */ /* Sử dụng biến CSS của Bootstrap nếu có */
    /* Nếu bạn muốn màu primary: */
    /* background-color: var(--bs-primary); */
    /* color: white; */

}

.my-table tr:hover td,
.my-table tr:focus td
{
    color: #113afe;
    /*border: 1px solid #113afe;*/
    /*background-color: #7abeff; */
}



/* Trong file CSS của bạn, ví dụ site.css */

/* Đặt chiều cao tối đa cho phần tử chứa bảng để kích hoạt cuộn */
/* Chọn class hoặc ID phù hợp với div chứa bảng */
.my-table .table-responsive {
    max-height: 400px; /* Điều chỉnh chiều cao tối đa theo ý muốn của bạn */
    overflow-y: auto; 
    /* Thêm thanh cuộn dọc khi nội dung tràn */
    /* Có thể cần overflow-x: auto; nếu bảng quá rộng */
}


/* dòng đang kéo */
.detail-row.dragging {
    opacity: .6;
    background: #f0f8ff;
}

/* vị trí drop */
.detail-row.drag-over {
    outline: 2px dashed #0d6efd;
}