/*Modal sizes*/
.modal-60 { max-width: 60% !important; }
.modal-65 { max-width: 65% !important; }
.modal-70 { max-width: 70% !important; }
.modal-75 { max-width: 75% !important; }
.modal-80 { max-width: 80% !important; }
.modal-85 { max-width: 85% !important; }
.modal-90 { max-width: 90% !important; }
.modal-95 { max-width: 95% !important; }

@media (min-width: 768px) {
    .modal-60 { max-width: 60% !important; }
    .modal-65 { max-width: 65% !important; }
    .modal-70 { max-width: 70% !important; }
    .modal-75 { max-width: 75% !important; }
    .modal-80 { max-width: 80% !important; }
    .modal-85 { max-width: 85% !important; }
    .modal-90 { max-width: 90% !important; }
    .modal-95 { max-width: 95% !important; }
}

/*choics*/
/*.choices .choices__inner {
    font-size: 0.8rem !important;
}*/

a.disabled {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}

/*linktimnhanh*/
.linktimnhanh a {
    cursor: pointer;
}

/*Fulcalendar*/
.fc .fc-h-event .fc-event-main::after, .fc .fc-daygrid-event .fc-event-main::after {
    content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    display: inline-block;
    margin: 0 4px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    width: 0;
    border-radius: 4px;
    border: 4px solid !important;
}
/*Fulcalendar*/

.color-red {
    color: red;
}

.fake-readonly {
    pointer-events: none; /* Chặn nhập liệu */
    background-color: #e9ecef; /* Màu giống readonly */
}

/*DropZone*/
.dropzone {
    border-color: #cbd0dd !important;
}

    .dropzone .dz-preview .dz-image {
        border-radius: 20px;
        overflow: hidden;
        width: 35px !important;
        height: 35px !important;
        position: relative;
        display: block;
        z-index: 10;
    }

.itp-import-dropzone, .itp-import-dropzone .dz-preview {
    min-height: 0px !important;
}

.itp_dz_message {
    padding: 60px 2rem !important;
    border: 1px dashed var(--phoenix-border-color);
}
/*Ẩn icon validate*/
.was-validated .form-control:valid,
.was-validated .form-control:invalid {
    background-image: none !important;
    padding-right: 0px !important;
}

.form-control.is-valid,
    .form-control.is-invalid {
        background-image: none !important;  
        padding-right: 0; 
    }
 .form-control.is-invalid {
        border-color: #fa3b1d !important;
    }

.was-validated .form-select:valid,
.was-validated .form-select:invalid {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDE1MCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik03NS4zNDggMTI3LjE5MkM3Mi40MzgxIDEyNy4xOTIgNjkuODUxNCAxMjYuMjIyIDY3LjkxMTUgMTI0LjI4Mkw1LjgzMjE1IDYyLjIwMjNDMS42Mjg4NyA1OC4zMjIzIDEuNjI4ODcgNTEuNTMyNCA1LjgzMjE1IDQ3LjY1MjVDOS43MTIxMSA0My40NDkyIDE2LjUwMiA0My40NDkyIDIwLjM4MiA0Ny42NTI1TDc1LjM0OCAxMDIuMjk1TDEyOS45OTEgNDcuNjUyNUMxMzMuODcxIDQzLjQ0OTIgMTQwLjY2MSA0My40NDkyIDE0NC41NDEgNDcuNjUyNUMxNDguNzQ0IDUxLjUzMjQgMTQ4Ljc0NCA1OC4zMjIzIDE0NC41NDEgNjIuMjAyM0w4Mi40NjEzIDEyNC4yODJDODAuNTIxMyAxMjYuMjIyIDc3LjkzNDcgMTI3LjE5MiA3NS4zNDggMTI3LjE5MloiIGZpbGw9IiMzMTM3NEEiLz4KPC9zdmc+Cg==') !important;
    padding-right: unset !important;
}

.was-validated .form-control:not(.is-invalid):valid,
.form-control.is-valid {
    border-color: #cbd0dd !important;
    background-image: none !important;
    padding-right: 0px !important;
}


.was-validated .form-select:valid, .form-select.is-valid {
    border-color: #cbd0dd !important;
}

.was-validated .form-check-input:valid, .form-check-input.is-valid {
    border-color: #cbd0dd !important;
}

    .was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
        color: #222834 !important;
    }

    .was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked {
        background-color: #3874ff !important;
    }

.was-validated .choices.valid .choices__inner {
    border-color: #cbd0dd !important;
    padding-right: 1em !important;
    background-image: none !important;
}

.was-validated .choices.invalid .choices__inner {
    padding-right: 1em !important;
    background-image: none !important;
}

/*Alert*/
/* Container chứa alert, đặt ở giữa màn hình phía trên */
#alert-container {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%; /* Mặc định chiếm 90% màn hình */
    max-width: 400px; /* Giới hạn tối đa 400px trên màn hình lớn */
    z-index: 9999 !important;
    text-align: center;
}

/* Alert có hiệu ứng xuất hiện từ dưới lên */
.alert-custom {
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 10px 15px;
    margin-bottom: 10px;
    opacity: 0;
    transform: translateY(50px); /* Bắt đầu từ dưới */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    z-index: 9999 !important;
}

    /* Khi alert xuất hiện */
    .alert-custom.show {
        opacity: 1;
        transform: translateY(0);
    }


/* Responsive cho mobile */
@media (max-width: 576px) {
    #alert-container {
        width: 95%; /* 95% màn hình cho mobile */
        max-width: 320px; /* Giới hạn tối đa 320px */
    }

    .alert-custom {
        padding: 10px 12px; /* Giảm padding để phù hợp hơn với màn hình nhỏ */
        font-size: 14px; /* Giảm kích thước chữ */
    }
}
/*Alert*/

/*ImgFor*/


.ImgFor_container {
    position: relative;
}

label.ImgFor input[type="file"] {
    display: none;
    position: relative;
    top: -1000px;
}

.ImgFor {
    /*border: 1px solid #aaa;
    border-radius: 3px;*/
    padding: 4px 5px;
    margin-bottom: 4px;
    width: 100%;
    background: #eee;
    display: inline-block;
}

    .ImgFor:hover {
        background: #ccc;
    }

    .ImgFor:active {
        background: #ccf;
    }

    .ImgFor:invalid + span {
        color: #a44;
    }

    .ImgFor:valid + span {
        color: #4a4;
    }

.ImgForDelete {
    min-width: 5px !important;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 4px;
    margin: 0;
    padding: 5px 11px 5px !important;
    color: red;
    /* border: 1px solid #aaa !important; */
    z-index: 201;
    border-radius: 0 3px 3px 0;
    height: 100%;
}

.ImgForDeleteHide {
    min-width: 5px !important;
    position: absolute;
    left: 121px;
    margin: 0;
    padding: 4px 5px 6px !important;
    color: red;
    border: 1px solid #aaa !important;
    z-index: 0;
}

label.FileFor input[type="file"] {
    position: relative;
    top: -1000px;
}

.FileFor {
    border: 1px solid #aaa;
    border-radius: 3px;
    background: #eee;
    overflow: hidden;
}

    .FileFor:hover {
        background: #ccc;
    }

    .FileFor:active {
        background: #ccf;
    }

    .FileFor:invalid + span {
        color: #a44;
    }

    .FileFor:valid + span {
        color: #4a4;
    }

.FileForDelete {
    min-width: 5px !important;
    position: absolute;
    right: 3px;
    margin: 0 -3px 0 0;
    padding: 10px 6px 15px 5px !important;
    color: red;
    border: 1px solid #aaa !important;
    border-radius: 0 3px 3px 0;
    z-index: 201;
    background-color: #eee;
}

.FileForDeleteHide {
    min-width: 5px !important;
    position: absolute;
    right: 3px;
    margin: 0;
    padding: 4px 5px 6px !important;
    color: red;
    border: 1px solid #aaa !important;
    z-index: 0;
}

.FileForDeleteHide {
    min-width: 5px !important;
    position: absolute;
    right: 3px;
    margin: 0 0 0 0;
    padding: 4px 5px 6px 5px !important;
    color: red;
    border: 1px solid #aaa !important;
    z-index: 0;
}

.ImgForPasteTong { /*position: absolute;*/
    top: 30px;
    left: 0px;
    max-width: 800px;
    height: auto;
    z-index: 90;
    display: flex;
    flex-wrap: wrap;
}

.ImgForPasteTong_divImg {
    position: relative;
    min-width: 100px;
    height: 160px;
    border: 1px solid silver;
    margin-right: 10px;
    margin-bottom: 3px;
}

.btnXoaImg {
    position: absolute;
    right: 1px;
    bottom: 0px;
    color: #c5c5c5;
    opacity: 0;
}

.ImgForPasteTong_divImg:hover .btnXoaImg {
    opacity: 1;
    color: red;
}

.ImgForPasteTong_Img {
    min-width: 110px;
}

.FileForPasteTong {
    width: 100%;
    height: auto;
    z-index: 90;
    display: flex;
    flex-wrap: wrap;
}

.FileForPasteTong_divFile {
    position: relative;
    max-width: 100%;
    height: auto;
    margin-right: 18px;
    margin-bottom: 3px;
}

.FileForPasteTong_btnXoaFile {
    position: absolute;
    bottom: 2px;
    margin-left: 3px;
    color: #c5c5c5;
    opacity: 0;
}

.FileForPasteTong_divFile:hover .FileForPasteTong_btnXoaFile {
    opacity: 1;
    color: red;
}

.FileForPasteTong_File {
    position: absolute;
    left: 0;
    border: 1px solid red;
    padding: 20px;
    opacity: 0;
    width: 30px !important;
    height: 30px !important;
    top: 1px;
}

.FileForPasteTong_div-upload {
    width: 20px;
    height: 15px;
    background: #fff;
    padding: 6px 6px;
    position: absolute;
    right: 8px;
    top: 0px;
}

.FileForPasteTong_File:hover {
    cursor: pointer;
    cursor: hand;
}
/*ImgFor*/