.table-wrapper {
    width: 100%;
    margin: auto;
    overflow: auto;
    max-height: calc(100vh - 150px); /*74vh*/
    border: 1px solid #ccc;
    background: #fafafa;
    position: relative; /* ✅ để header sticky bám chính xác */
}

.data-table {
    border-collapse: collapse !important; /* collapse or separate */
    border-spacing: 0 !important; /* loại bỏ khoảng cách giữa ô */
    width: max-content !important;
    min-width: 100% !important;
}

.data-table th,
.data-table td {
    padding: 5px 10px !important;
    border: 1px solid #ccc !important;
    white-space: nowrap !important;
    background: #eee;
}

.data-table thead th {
    position: sticky !important;
    top: 0 !important;
    background: #eee !important;
    font-weight: bold !important;
    text-align: left;
    z-index: 5;
    border-top: none !important; /* ✅ tránh đè lên border ngoài */
}

/* Màu header + giữ màu khi sticky */
.data-table thead th,
.data-table thead th[style*="position: sticky"] {
    color: #243447 !important;
}

.data-table thead th[style*="position: sticky"] {
    top: 0;
    background: #eee !important;
    z-index: 5;
    line-height: 1.5 !important;
}

/* ✅ Thêm màu xen kẽ cho các dòng */
.data-table tbody tr:nth-child(odd) td {
    background-color: #ffffff; /* dòng lẻ */
}

.data-table tbody tr:nth-child(even) td {
    background-color: #f9f9f9; /* dòng chẵn */
}

/* ✅ Khi hover dòng, làm nổi bật */
.data-table tbody tr:hover td {
    background-color: #e6f2ff !important;
}

/* Nếu có cột sticky, đảm bảo nền cột đó cũng đổi theo */
.data-table tbody tr:nth-child(odd) td[style*="position: sticky"] {
    background-color: #ffffff !important;
}

.data-table tbody tr:nth-child(even) td[style*="position: sticky"] {
    background-color: #f9f9f9 !important;
}

.data-table tbody tr:hover td[style*="position: sticky"] {
    background-color: #e6f2ff !important;
}

/* ✅ Cột cố định bên trái */
.data-table th[style*="left:"],
.data-table td[style*="left:"] {
    box-shadow: 1px 0 0 #ccc;
    border-left: none !important;
    border-right: none !important;
}

/* ✅ Cột cố định bên phải */
.data-table th[style*="right:"],
.data-table td[style*="right:"] {
    box-shadow: -1px 0 0 #ccc;
    border-left: none !important;
    border-right: none !important;
}