.center{
    display: flex;
    justify-content: center;
    align-self: center;
}
.custom-separator{
    width: 100%;
    height: 10px;
    position: relative;
}
.custom-separator::after{
    content: "";
    position: absolute; 
    top:50%;
    border: 1px dashed var(--bs-gray-200);
    width: 100%;
    transform: translateY(-50%);
}
.table tr:hover{
    background: var(--bs-primary-light);
    color: var(--bs-primary);
    cursor: pointer;
}
.modal.show{
    background: rgb(0, 0, 0, 0.3);
}
.card-submit{
    padding:2.5rem;
    padding-top: 0;
    justify-content: end;
    display: flex;
}
.no-results-cell {
    text-align: center;
    pointer-events: none;
    -webkit-user-select: none;
    position: relative;
    padding: 50px 0 50px 0 !important ;
    position: relative;
    background-image: url("/media/no-results-bg.svg");
    background-repeat: no-repeat;
    background-position: center;
}
.no-results-cell::after {
    content: 'Không tìm thấy kết quả'; 
    display: block;
    font-size: 16px;
    color: #888;
    font-style: italic;
    opacity: 0.8;
    margin-top: 15px;
}
.no-results-cell img{
    width: 200px;
    display: block;
    margin: 0 auto;
}
.flex-item-grow{
    flex:1;
    transition: all 0.5s ease-in-out;
}
.flex-item-grow:hover{
    flex:2;
}
thead{
    background-color: var(--bs-gray-100);
}
.modal-body .card:not(.card-full){
    padding-top: 1.25rem;
}
.color-preview{
    position: absolute;
    transform: translateY(-50%);
    top:50%;
    left: 5px;
    border-radius: calc( 0.475rem  - 2px);
    height: calc(100% - 10px);
    aspect-ratio: 1;
}

#button-toggle-menu{
    margin-bottom: 2rem;
    background-color: #007bff;
    color: white;
    padding-top: 25px; 
    padding-bottom: 25px;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    box-shadow: none !important;
    /* width: 75px; */
    /* padding-left: 35px; */
}
#button-toggle-menu svg{
    height: 3.5rem !important; 
    width: 3.5rem !important;
}
#button-toggle-menu.active {
    /* padding-left: 35px; */
    transition: 0.3s;
}
.alert-message {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: max-content;
    z-index: 200;
    animation: animation-float-right 1s ease-out 1, animation-float-left 2s ease-in 1 5s;
    animation-fill-mode: forwards;
}

@keyframes animation-float-right {
    from {
        margin-right: -300px;
    }
    to {
        margin-right: 0;
    }
}

@keyframes animation-float-left {
    from {
        margin-right: 0;
    }
    to {
        margin-right: calc(-100% - 30px);
    }
}
.field-validation-error{
    color:  var(--bs-danger)
}
/* .dirty{
    font-weight: bold;
    color: var(--bs-primary)  !important;
} */
.dirty ~.select2 .select2-selection__rendered{
    color: var(--bs-primary)  !important;
    font-weight: bold;
}
.cell-image{
    aspect-ratio: 1;
    object-fit: cover;
    width: 100%;
}
.date-range{
    transition: all ease-out .4s;
}
/* .date-range:hover{
    width: 300px !important;
}
*/
.pointer{
    cursor: pointer !important;
} 
#date-label{
    field-sizing: content;
    min-width: 250px;
}
input[type='checkbox']{
    cursor: pointer !important;
}
label[for]{
    cursor: pointer !important;
    user-select: none;   
}

.jstree-checked{
    background-color: #c6b1f8 !important;
    color: var(--bs-primary);
}

.jstree li.jstree-open > a.jstree-anchor > i.jstree-checkbox,
    .jstree li.jstree-closed > a.jstree-anchor > i.jstree-checkbox {
        display: none;
    }
.dz-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.dirty:not(form){
    color: var(--bs-primary);
    font-weight: bold;
}
.nav-link.pe-none.discount-label{
    color: var(--bs-gray-500) !important;
}

.quantity-container {
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: end;
    font-family: Arial, sans-serif;
}

.input-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.quanlity-product-return {
    width: 40px;
    height: 30px;
    text-align: center;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-right: 5px;
}

.quanlity-product-value {
    font-size: 14px;
    color: #666;
}
.w-fit-content{
    width: fit-content;
}
.table td{
    border: none !important;
}
.no-promo-cell {
    text-align: center;
    pointer-events: none;
    -webkit-user-select: none;
    position: relative;
    padding: 0 !important ;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
}
.no-promo-cell::after {
    content: attr(data-message); 
    display: block;
    font-size: 16px;
    color: #888;
    font-style: italic;
    opacity: 0.8;
    margin-top: 15px;
}
.no-promo-cell img{
    width: 200px;
    display: block;
    margin: 0 auto;
}
.ratio-1{
    aspect-ratio: 1;
}

.custom-ribbon
{
    transform: rotate(-45deg); 
    width: 200px;
    height: 20px;
    top:20px;
    left:-70px;
    display: flex;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

.collapsed .collapse-icon {        
    transform: rotate(180deg);
    position: absolute;
    transform-origin: 50% 50%; /* Xoay quanh tâm */
}

.collapse-icon {  
    transform: rotate(0deg);
    position: absolute;
    transition: all ease-in-out .5s;
    transform-origin: 50% 50%; /* Xoay quanh tâm */

    bottom: 20%;
    padding-top: 0;
    line-height: 0;
    font-size: 30px;
    vertical-align: middle;

}
.text-stroke {
    -webkit-text-stroke: 0.5px white; /* Viền chữ màu đen */
}
@keyframes fadeInMove {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dom-animation {
    animation: fadeInMove .5s ease-in-out forwards;
}

.btn-gray {
    background-color: #e0e0e0;
    color: #9e9e9e;
    cursor: not-allowed;
    border: 1px solid #d6d6d6;
}

[data-tooltip] {
    position: relative;
    cursor: not-allowed;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 8px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 1000;
}
[data-tooltip]:hover::after {
    opacity: 1;
}