/* File: css/ahc-task-styles.css */

.ahc-task-modal {
    display: none;
    position: fixed;
    z-index: 10000000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    font-family: "Roboto", Arial, sans-serif;
}
.ahc-task-modal-content {
    background-color: #fff;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #888;
    width: 660px;
    max-width: 95%;
    text-align: center;
    font-size: 16px;
    border-radius: 7px;
    box-sizing: border-box;
}
.ahc-task-modal .ahc-task-inner-content {
    width: 100%;
    max-width: 620px;
    margin: auto;
    text-align: left;
}
.ahc-task-modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.ahc-task-modal-close:hover, .ahc-task-modal-close:focus { color: black; }
.ahc-task-highlight {
    color: rgb(196, 0, 0);
    font-size: 15px;
    text-align: center;
    display: block;
    font-weight: 600;
}
.ahc-task-step { font-weight: 600; }
.ahc-task-inner-content a { color: #007fff; text-decoration: none; }
.ahc-task-danger, #ahc-task-keyword-display { color: rgb(196, 0, 0); font-weight: 600; }
.ahc-task-form { display: flex; margin: 8px auto; justify-content: space-evenly; flex-wrap: wrap; gap: 10px;}
.ahc-task-input { display: block; width: 250px; padding: 0.375rem 0.75rem; font-size: 1rem; border: 1px solid #ced4da; border-radius: 0.25rem; }
.ahc-task-input:focus { border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
.ahc-task-submit-btn { background-color: #5d6cf9; color: #ffffff; font-size: 14px; padding: 6px 36px; border-radius: 8px; width: 200px; cursor: pointer; text-align: center; border: none; }
.ahc-task-img-demo, .ahc-task-result-img img { width: 100%; }
.ahc-task-img-demo { text-align: center; position: relative; }
.ahc-task-keyword-overlay { position: absolute; left: 156px; top: 160px; font-size: 15px; }
.ahc-task-result-img-box { display: inline-block; border: 2px solid red; margin: 10px 0; }
.ahc-task-note { color: #007fff; text-align: center; margin: 0 0 10px; }
.ahc-task-img-viewmore { text-align: center; margin: 10px 0; }
.ahc-task-spoil-wrapper { margin-top: 5px; display: block; text-align: center; }
.ahc-task-spoil-mask { background-color: red; border-radius: 7px; display: inline-block; width: 35px; height: 18px; vertical-align: sub; margin-left: -2px; }
#ahc-task-copy-keyword, #ahc-task-change-task { font-size: 12px; color: #000000; cursor: pointer; border: 1px solid #000000; padding: 2px 10px; border-radius: 7px; display: inline-block; }
#ahc-task-change-task { padding: 5px 23px; opacity: .7; }
#ahc-task-copy-keyword:hover, #ahc-task-change-task:hover { color: #4d4d4d; transition: .5s; background-color: #f7f7f7; border-color: #515151; opacity: 1; }
.ahc-task-change-container { text-align: center; margin-top: 10px; }
.ahc-task-video { width: 100%; height: 350px; margin-top: 10px; border: none;}
.ahc-task-notification { position: fixed; top: 20px; right: 10%; background-color: #4caf50; color: white; padding: 10px 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); font-size: 14px; z-index: 10000001; display: none; }
.ahc-task-loader-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.7); z-index: 10000001; display: none; }
.ahc-task-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; animation: ahc-task-spin 1s linear infinite; }
@keyframes ahc-task-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
body.ahc-body-no-scroll { overflow: hidden; }
.ahc-task-pass-warning { margin-top: 10px; color: red !important; text-align: center; display: block; width: 100%; }
@media screen and (max-width: 600px) {
    .ahc-task-modal-content { height: 90vh; overflow-y: auto; margin: 5vh auto; }
    .ahc-task-keyword-overlay { left: 43px; top: 85px; }
    .ahc-task-video { height: calc((95vw - 40px) * 9 / 16); }
    .ahc-task-form { justify-content: center; }
    .ahc-task-input, .ahc-task-submit-btn { width: 100%; max-width: 300px; }
}

/* === THÊM VÀO CUỐI FILE css/ahc-task-styles.css === */

/* --- Nâng cấp giao diện Modal Thuyết phục --- */
.ahc-task-header {
    text-align: center;
    padding: 10px 15px;
    margin-bottom: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.ahc-task-title {
    font-size: 22px;
    color: #00A99D; /* Màu chủ đạo của plugin */
    margin: 0 0 5px 0;
}

.ahc-task-subtitle {
    font-size: 15px;
    color: #666;
    margin: 0 0 15px 0;
    line-height: 1.6;
}

.ahc-task-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    display: inline-block; /* Để căn giữa danh sách */
}

.ahc-task-benefits-list li {
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #333;
    margin-bottom: 8px;
}

.ahc-task-benefits-list .ahc-task-icon {
    font-size: 20px;
    margin-right: 12px;
    width: 24px; /* Đảm bảo các icon thẳng hàng */
    text-align: center;
}

/* Tách biệt phần hướng dẫn rõ ràng hơn */
.ahc-task-instructions {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #ccc;
}

/* Đổi chữ trên nút submit */
#ahc-task-submit-btn {
    background-color: #ff6b6b; /* Màu cam đỏ nổi bật */
}
#ahc-task-submit-btn:hover {
    background-color: #e95a5a;
}

.ahc-task-change-task-note {
    padding: 5px;
    font-size: 13px;
    text-align: center;
}

/* === THÊM VÀO CUỐI FILE css/ahc-task-styles.css === */

/* --- Style cho dòng giải thích lý do --- */
.ahc-task-reasoning {
    margin-top: 15px;
    padding: 10px 15px;
    background-color: #eef7ff; /* Màu xanh nhạt */
    border-radius: 6px;
    font-size: 14px;
    color: #34495e; /* Màu xanh đậm hơn */
    line-height: 1.6;
    text-align: center;
}

/* === THÊM VÀO CUỐI FILE css/ahc-task-styles.css === */

/* Style cho văn bản lợi ích để sửa lỗi dính chữ */
.ahc-task-benefit-text {
    flex: 1; /* Đảm bảo nó chiếm không gian còn lại */
}

/* === THÊM VÀO CUỐI FILE === */
/* --- Cải tiến Modal Nhiệm vụ --- */
.ahc-task-comparison {
    margin-top: 15px;
    padding: 10px 15px;
    background-color: #eef7ff;
    border-radius: 6px;
    font-size: 14px;
    color: #34495e;
    line-height: 1.6;
    text-align: center;
    border: 1px solid #d2e7ff;
}
.ahc-task-comparison p {
    margin: 0;
}

.ahc-task-social-proof {
    display: inline-flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    padding: 6px 12px;
    border-radius: 50px;
    margin-top: 15px;
    font-size: 13px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.ahc-social-proof-icon {
    margin-right: 8px;
    animation: tada 1.5s infinite;
}
.ahc-social-proof-text strong {
    color: var(--ahc-primary-color, #00A99D);
}

@keyframes tada {
    0% {transform: scale(1);}
    10%, 20% {transform: scale(0.9) rotate(-3deg);}
    30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
    40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
    100% {transform: scale(1) rotate(0);}
}

#ahc-task-submit-btn {
    background-color: #28a745; /* Màu xanh lá cây */
}
#ahc-task-submit-btn:hover {
    background-color: #218838;
}

/* Bỏ các lợi ích cũ */
.ahc-task-benefits-list, .ahc-task-reasoning {
    display: none;
}

/* === THÊM VÀO CUỐI FILE === */
/* --- Style cho Bộ đếm Lượt hoàn thành --- */
.ahc-task-counter {
    margin-top: 15px;
    background-color: #f0fdf4; /* Màu xanh lá cây rất nhạt */
    border: 1px solid #bbf7d0; /* Viền xanh nhạt */
    padding: 10px 15px;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #166534; /* Màu xanh lá cây đậm */
}
.ahc-task-counter strong {
    font-weight: 700;
    font-size: 16px;
}
.ahc-task-counter-icon {
    display: inline-block;
    margin-right: 8px;
    animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-8px);}
  60% {transform: translateY(-4px);}
}