/* Màu toast*/
/* Riêng success */
.jq-icon-success {
    background-color: #28a745 !important;
}

/* Riêng error */
.jq-icon-error {
    background-color: #dc3545 !important;
}

/* Riêng warning */
.jq-icon-warning {
    background-color: #e0a800 !important;
}

/* Riêng info */
.jq-icon-info {
    background-color: #17a2b8 !important;
}
/* Màu toast end*/

/* Dropzone css*/

/* Giao diện vùng preview ảnh */
.custom-preview {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    text-align: center;
    cursor: pointer;
}

/* Ảnh gốc, rõ nét, co giãn phù hợp */
.custom-preview-img {
    display: block;
    max-width: 100%;
    max-height: 300px;
    margin: auto;
    object-fit: contain;
}

#myId {
    min-height: 160px !important;
}
    /* Ảnh preview rõ nét, căn giữa, tự co nếu quá to */
    #myId img[data-dz-image] {
        display: block;
        max-width: 100%;
        max-height: 212px;
        margin: auto;
        object-fit: contain;
    }
/* Nút "×" tùy chỉnh, rõ ràng ở mọi nền */
.custom-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    text-decoration: none;
}

.dz-details, .dz-progress, .dz-success-mark, .dz-error-mark {
    display: none;
}

#myId {
    padding: 0 !important;
}

    /* Preview wrapper click được */
    #myId .dz-preview.dz-file-preview {
        position: relative;
        width: 100%;
        padding: 0;
        margin: 0;
        text-align: center;
        cursor: pointer;
    }

    #myId .dz-remove {
        position: absolute;
        top: 6px;
        right: 6px;
        z-index: 10;
        width: 22px;
        height: 22px;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
        border-radius: 50%;
        background-color: white; /* Nền tối bán trong suốt */
        color: #fff;
        border: 1px solid #d99494; /* Viền trắng đậm rõ nét */
        transition: background-color 0.2s ease, transform 0.1s ease;
    }

        #myId .dz-remove:hover {
            transform: scale(1.1);
        }
.bxs-cloud-upload:before {
    content: "\ec1d";
}
.status-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: 4px 12px;
    border-radius: 6px;
    font-weight: 600;
}

.status-approved {
    background-color:  #b8f3c5;
    color: #01c954;
}

.status-pending {
    background-color:  #f8f4b9;
    color: #d3ad04;
}

.status-reject {
    background-color:  #f3baba;
    color: #dc3545;
}
.status-draft {
    background-color:  rgba(108, 117, 125, 0.15);
    color: #6c757d;
}
.status-return {
    background-color:  rgb(252, 222, 179);
    color: rgb(230, 144, 25);
}

/* Dropzone css end*/