/* --- 1. MODAL STYLE (GIỮ NGUYÊN LAYOUT CHUẨN) --- */
#tvp-task-modal { display: none; position: fixed; z-index: 999999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.7); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
#tvp-task-modal .tvp-task-content { background-color: #fff; margin: 30px auto; padding: 0; width: 95%; max-width: 650px; border-radius: 12px; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.3); overflow: hidden; }
#tvp-task-modal .tvp-task-inner { padding: 25px; text-align: left; }
#tvp-task-modal .tvp-task-close { color: #333; position: absolute; right: 15px; top: 10px; font-size: 30px; font-weight: bold; cursor: pointer; z-index: 10; line-height: 1; }
#tvp-task-modal .tvp-task-header-txt { color: #d63031; font-size: 17px; text-align: center; display: block; font-weight: 700; margin-bottom: 20px; line-height: 1.4; }
#tvp-task-modal .tvp-task-step-title { font-weight: 700; color: #2d3436; }
#tvp-task-modal .tvp-task-keyword-highlight { color: #d63031; font-weight: 700; border-bottom: 2px solid #d63031; padding: 0 4px; }
#tvp-task-modal .tvp-task-form-group { display: flex; gap: 10px; margin: 20px 0; background: #f1f2f6; padding: 15px; border-radius: 8px; }
#tvp-task-modal .tvp-task-input { flex: 1; padding: 12px; border: 2px solid #dfe6e9; border-radius: 6px; font-size: 16px; outline: none; transition: border-color 0.3s; }
#tvp-task-modal .tvp-task-input:focus { border-color: #0984e3; }
#tvp-task-modal .tvp-task-btn-submit { background-color: #0984e3; color: #fff; padding: 12px 25px; border-radius: 6px; font-weight: 700; cursor: pointer; border: none; transition: background 0.3s; }
#tvp-task-modal .tvp-task-btn-submit:hover { background-color: #0b7ada; }
#tvp-task-modal .tvp-task-btn-submit.loading { opacity: 0.7; cursor: not-allowed; }
#tvp-task-modal .tvp-task-img-guide { width: 100%; border-radius: 8px; border: 1px solid #dfe6e9; margin: 15px 0; }
#tvp-task-modal .tvp-task-search-demo { position: relative; text-align: center; }
#tvp-task-modal .tvp-task-keyword-overlay { position: absolute; left: 24%; top: 46%; font-size: 14px; color: #333; font-weight: 500; }
#tvp-task-modal .tvp-task-note-blue { color: #0984e3; font-weight: 600; text-align: center; margin: 10px 0; font-size: 14px; }
#tvp-task-modal .tvp-task-copy-btn, #tvp-task-modal .tvp-task-change-btn { font-size: 12px; color: #636e72; cursor: pointer; border: 1px solid #b2bec3; padding: 4px 12px; border-radius: 20px; transition: all 0.3s; }
#tvp-task-modal .tvp-task-copy-btn:hover { background: #636e72; color: #fff; }
#tvp-task-modal .tvp-task-spoil-area { text-align: center; margin: 15px 0; font-size: 18px; }
#tvp-task-modal .tvp-task-mask { background-color: #d63031; display: inline-block; width: 45px; height: 22px; border-radius: 4px; vertical-align: middle; margin-left: 5px; }
#tvp-task-modal .tvp-task-video { width: 100%; height: 350px; border-radius: 8px; margin-top: 20px; border: none; }
.tvp-task-no-scroll { overflow: hidden; }
@media screen and (max-width: 600px) {
    #tvp-task-modal .tvp-task-form-group { flex-direction: column; }
    #tvp-task-modal .tvp-task-keyword-overlay { left: 18%; top: 43%; font-size: 11px; }
    #tvp-task-modal .tvp-task-video { height: 200px; }
}

/* --- 2. LOGIC LÀM MỜ THÔNG MINH (FIX LỖI MỜ NÚT) --- */

/* Class gán cho khung cha */
.tvp-blurred-element {
    position: relative !important;
    /* QUAN TRỌNG: Chặn toàn bộ sự kiện chuột vào thành phần bị khóa */
    pointer-events: none !important; 
    cursor: default;
}

/* Làm mờ các phần tử con (trừ cái nút khóa overlay) */
.tvp-blurred-element > *:not(.tvp-section-lock-overlay) {
    filter: blur(5px);
    opacity: 0.5;
    user-select: none;
}

/* --- 3. NÚT KHÓA TRUNG TÂM LÁ SỐ (GRID) --- */
.tvp-master-lock-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999; /* Nổi lên trên cùng */
    
    background: #c0392b;
    color: #fff;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 4px 20px rgba(192, 57, 43, 0.4);
    cursor: pointer;
    border: 3px solid #fff;
    
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    animation: tvpPulseBtn 2s infinite;
}

.tvp-master-lock-btn:hover {
    background: #a93226;
    transform: translate(-50%, -50%) scale(1.05);
}

.tvp-master-lock-btn i { font-style: normal; font-size: 18px; }

/* --- 4. NÚT KHÓA CHO CÁC PHẦN LUẬN GIẢI (FIX LỖI OVERLAY) --- */

/* Lớp phủ chứa nút khóa cho các section */
.tvp-section-lock-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    
    /* QUAN TRỌNG: Bật lại sự kiện chuột cho lớp phủ này */
    pointer-events: auto !important; 
}

/* Nút khóa chi tiết */
.tvp-section-lock-btn {
    background: #fff;
    border: 2px solid #c0392b;
    color: #c0392b;
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    pointer-events: auto !important; 
}

.tvp-section-lock-btn:hover {
    background: #c0392b;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(192, 57, 43, 0.3);
}

/* --- 4. SPINNER LOADING (FIX LỖI KHÔNG XOAY) --- */

/* 1. Định nghĩa chuyển động xoay */
@keyframes tvpSpinFixed {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 2. Class icon spinner chung */
.tvp-spinner-icon {
    /* QUAN TRỌNG: Phải là inline-block mới xoay được */
    display: inline-block !important; 
    
    width: 18px;
    height: 18px;
    border-radius: 50%;
    
    /* Viền mặc định (cho nút đỏ) */
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    
    /* Gọi animation */
    animation: tvpSpinFixed 0.8s linear infinite;
    
    vertical-align: middle;
    margin-right: 6px;
    margin-bottom: 2px; /* Căn chỉnh cho thẳng hàng với chữ */
}