/*Overright*/

.slide-in {
    animation: slideIn 0.3s ease-out forwards;
}

.slide-out {
    animation: slideOut 0.3s ease-out forwards;
}

@keyframes slideIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(20px);
        opacity: 0;
    }
}

.bootstrap-select.form-control base .form-control {
    border: 1px solid var(--input-form-light);
}

.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
    padding-inline-start: 2.5rem;
    font-size: 0.95em;
}

.bootstrap-select .dropdown-toggle .filter-option {
    padding-inline-start: 1.5em;
}

@media (min-width: 1200px) {
    .modal-xl {
        --bs-modal-width: 65%;
    }

    .modal-lg {
        --bs-modal-width: 45%;
    }
}

.modal.fade .modal-dialog {
    transition: transform .3s ease-out;
}

.table-custom .dx-header-row {
    background-color: var(--neutral-50) !important;
    font-weight: bold;
    color: var(--text-primary-light) !important;
    font-weight: 600;
    padding: 25px;
}

.dx-datagrid-content .dx-datagrid-table .dx-row > td, .dx-datagrid-content .dx-datagrid-table .dx-row > tr > td {
    font-size: 0.85rem;
}

/* Giữ nguyên style wowdash, chỉ nhấn mạnh khi active */
.range-btn.range-active {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border-color: var(--bs-primary) !important;
}


/* Skeleton shimmer cho bảng */
.tbl-skeleton .skel-cell {
    position: relative;
    overflow: hidden;
    height: 14px;
    border-radius: 6px;
    background: #e9ecef; /* màu xám nhạt */
}

    .tbl-skeleton .skel-cell.long {
        width: 70%;
    }

    .tbl-skeleton .skel-cell.mid {
        width: 40%;
    }

    .tbl-skeleton .skel-cell.sm {
        width: 24%;
    }

    .tbl-skeleton .skel-cell::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
        animation: shimmer 1.2s infinite;
    }

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Nhẹ nhàng khi hover hàng thật */
.table tbody tr:hover {
    background-color: rgba(0,0,0,.03);
    transition: background-color .25s ease;
}

/* Gỡ transform toàn cục gây lệch */
/* đặt sau wowdash css */