/* === SDP TASK MODAL STYLES === */



/* Lớp phủ toàn màn hình */

.sdp-task-modal {

    display: none;

    position: fixed;

    z-index: 99999;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: auto;

    background-color: rgba(0,0,0,0.7);

    -webkit-animation: fadeIn 0.3s;

    animation: fadeIn 0.3s;

}



/* Nội dung modal */

.sdp-task-modal-content-wrapper {

    position: relative;

    background-color: #fefefe;

    margin: 5% auto;

    padding: 25px;

    border: 1px solid #888;

    width: 90%;

    max-width: 660px;

    border-radius: 10px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.3);

}



.sdp-task-modal-inner {

    text-align: left;

}

.sdp-task-modal-inner * {

    box-sizing: border-box;

}



/* Nút đóng modal */

.sdp-task-modal-close {

    color: #aaa;

    float: right;

    font-size: 28px;

    font-weight: bold;

    cursor: pointer;

}

.sdp-task-modal-close:hover,

.sdp-task-modal-close:focus {

    color: black;

    text-decoration: none;

}



/* Các thành phần trong modal */

.sdp-task-txt-highlight {

    display: block;

    text-align: center;

    font-size: 1em;

    font-weight: bold;

    color: #d9534f;

    margin-bottom: 15px;

}



.sdp-task-form-input {

    display: flex;

    gap: 10px;

    margin-bottom: 15px;

}

.sdp-task-form-input .sdp-task-keypass {

    flex-grow: 1;

    padding: 10px;

    border: 1px solid #ccc;

    border-radius: 5px;

}

#sdp-task-get-result-btn {

    padding: 10px 20px;

    background-color: #007BFF;

    color: white;

    border: none;

    border-radius: 5px;

    cursor: pointer;

    white-space: nowrap;

}

#sdp-task-get-result-btn.button-disabled {

    background-color: #6c757d;

    cursor: not-allowed;

}



.sdp-task-step-container {

    margin-bottom: 15px;

}

.sdp-task-txt-step {

    font-weight: bold;

    color: #333;

}

.sdp-task-txt-danger {

    color: #d9534f;

    font-weight: bold;

}

#sdp-task-copy-keyword {

    display: inline-block;

    margin-left: 10px;

    padding: 3px 8px;

    background-color: #f0f0f0;

    border: 1px solid #ccc;

    border-radius: 5px;

    cursor: pointer;

    font-size: 0.9em;

}



/* Hình ảnh minh họa */

.sdp-task-image-demo-search {

    position: relative;

    text-align: center;

    margin-bottom: 15px;

    max-width: 400px;

    margin-left: auto;

    margin-right: auto;

}

.sdp-task-image-demo-search img {

    max-width: 100%;

    height: auto;

    border-radius: 5px;

}

.sdp-task-image-demo-search .sdp-task-keyword {

    position: absolute;

    top: 66%;

    left: 28%;

    font-size: 14px;

    color: black;

}



/* Phần hiển thị kết quả cần tìm có ẩn pass */

.danger-mask-txt-sdp {

    text-align: center;

    padding: 10px;

}



.box-danger-mask-sdp {

   background-color: red;

    border-radius: 7px;

    display: inline-block;

    width: 35px;

    height: 18px;

    vertical-align: sub;

    margin-left: -2px;

}



/* Phần hiển thị kết quả cần tìm */

.sdp-task-box-img-result {

    border-top: 1px solid #eee;

    padding-top: 15px;

    text-align: center;

}

.sdp-task-box-img-result .image img {

    max-width: 100%;

    border: 1px solid #ccc;

    border-radius: 5px;

}

.sdp-task-box-img-result p.note-find-txt {

    font-style: italic;

    color: #555;

    font-size: 0.9em;

}

.sdp-task-box-img-result .image-view-more {

    margin: 10px 0;

}

.sdp-task-box-img-result .image-view-more img {

    max-width: 380px;

    border-radius: 5px;

}



.sdp-task-change-task-container {

    margin-top: 15px;

    text-align: center;

}

#sdp-task-change-task {

    /* cursor: pointer; */

    /* text-decoration: underline; */

    /* color: #007BFF; */

    font-size: 14px;

    color: #000000;

    cursor: pointer;

    border: 1px solid #000000;

    padding: 5px 23px;

    border-radius: 7px;

    display: inline-block;

    vertical-align: text-bottom;

    opacity: .7;

}


.sdp-task-change-task-note {
    font-size: 14px;
    text-align: center;
}



/* Cảnh báo lỗi */

.sdp-task-keypass-warning {

    color: red !important;

    font-size: 12px !important;

    margin-bottom: 5px;

    display: block;

    text-align: left;

}



/* Thông báo */

.sdp-task-custom-notification {

    position: fixed;

    top: 20px;

    left: 50%;

    transform: translateX(-50%);

    background-color: #28a745;

    color: white;

    padding: 10px 20px;

    border-radius: 5px;

    z-index: 100000;

    box-shadow: 0 2px 5px rgba(0,0,0,0.2);

}



.sdp-iframe-tutorials {

     width: 100%;

    height: 315px;

    margin-top: 20px;

}



/* Spinner loading */

.sdp-task-loading-spinner {

    border: 4px solid #f3f3f3;

    border-top: 4px solid #3498db;

    border-radius: 50%;

    width: 40px;

    height: 40px;

    animation: spin 1s linear infinite;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 10;

}

@keyframes spin {

  0% { transform: translate(-50%, -50%) rotate(0deg); }

  100% { transform: translate(-50%, -50%) rotate(360deg); }

}



/* Dừng hoạt động của trang nền */

body.sdp-task-modal-active {

    overflow: hidden; /* Chặn cuộn trang */

}



/* Làm mờ và vô hiệu hóa trang mô phỏng */

body.sdp-task-modal-active .simulation-container-wrapper,

body.sdp-task-modal-active .simulation-wrapper {

    filter: blur(5px);

    pointer-events: none;

    user-select: none;

}



/* ========================================================================= */

/* === TỐI ƯU RESPONSIVE CHO MODAL NHIỆM VỤ === */

/* ========================================================================= */



@media (max-width: 768px) {

    

    /* Điều chỉnh font chữ gốc của modal để các phần tử co lại tương ứng */

    .sdp-task-modal-inner {

        font-size: 14px;

    }



    .sdp-task-modal-content-wrapper {

        width: 95%; /* Chiếm gần hết chiều rộng màn hình */

        margin: 15px auto; /* Giảm khoảng cách lề trên/dưới */

        padding: 15px;

        max-height: 90vh; /* Giới hạn chiều cao và cho phép cuộn nội dung bên trong */

        overflow-y: auto;

    }

    

    .sdp-task-txt-highlight {

        font-size: 1.1em; /* Tương đương ~15.4px */

        line-height: 1.4;

    }



    /* Xếp chồng ô nhập và nút bấm theo chiều dọc */

    .sdp-task-form-input {

        flex-direction: column; 

        gap: 10px;

    }

    

    .sdp-task-form-input .sdp-task-keypass {

        font-size: 1.1em;

        text-align: center;

    }



    #sdp-task-get-result-btn {

        width: 100%;

        padding: 12px;

        font-size: 1.1em;

        text-align: center;

    }

    

    .sdp-task-step-container span,

    .sdp-task-box-img-result span,

    .sdp-task-box-img-result p.note-find-txt {

        font-size: 1em; /* Tương đương 14px */

        line-height: 1.5;

    }

    

    /* Điều chỉnh vị trí từ khóa trên ảnh minh họa cho phù hợp */

    .sdp-task-image-demo-search .sdp-task-keyword {

        top: 65%; /* Vị trí có thể cần tinh chỉnh tùy ảnh */

        font-size: 12px;

        left: 26%;

    }

    

    .sdp-task-box-img-result .image-view-more img {

        max-width: 100%; /* Cho ảnh "Xem thêm" vừa với chiều rộng modal */

    }



    /* Tự động điều chỉnh chiều cao video hướng dẫn theo tỷ lệ 16:9 */

    .sdp-iframe-tutorials {

        height: auto;

        aspect-ratio: 16 / 9;

    }



    /* Đảm bảo spinner loading không quá lớn */

    .sdp-task-loading-spinner {

        width: 30px;

        height: 30px;

        border-width: 3px;

    }

}