/* style.css */
body { font-family: 'Segoe UI', Tahoma, sans-serif; background-color: #f4f7f6; padding: 20px; color: #333; }
.container { max-width: 850px; margin: auto; background: white; padding: 40px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }

h1 { text-align: center; color: #2c3e50; margin-bottom: 30px; }

.exercise-header { background: #3498db; color: white; padding: 15px; border-radius: 8px; margin-top: 30px; }

.question-block { border-left: 5px solid #3498db; padding: 20px; margin: 25px 0; background: #fafafa; border-radius: 0 10px 10px 0; transition: 0.3s; }

.options-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 15px; }

.option-label { 
    display: block; 
    padding: 12px; 
    border: 2px solid #eee; 
    border-radius: 8px; 
    cursor: pointer; 
    transition: all 0.2s ease; 
    background: white;
    font-size: 0.95em;
}

.option-label:hover { border-color: #3498db; background: #f0f7ff; }

input[type="radio"] { margin-right: 10px; }

/* MÀU XANH MỚI CHO ĐÁP ÁN ĐÚNG (Emerald Green) */
.correct-highlight { 
    background: #ffffff !important; 
    border-color: #37c90b !important; 
    color: #2f09db !important; 
    font-weight: bold;
}

/* MÀU CHO ĐÁP ÁN SAI (Soft Red) */
.wrong-highlight { 
    background: #ffffff !important; 
    border-color: #ff0015 !important; 
    color: #f10518 !important; 
    font-weight: bold;
}

.answered { 
    /* Không dùng pointer-events: none ở đây nữa */
    border-left-color: #bdc3c7; /* Đổi màu viền để báo hiệu đã xong */
}

.submit-area { position: sticky; bottom: 0; background: white; padding: 15px; border-top: 2px solid #eee; text-align: center; z-index: 100; }

#score-board { margin-bottom: 20px; }

/* style.css */
/* ... giữ các phần trước và thêm: ... */

.translation-btn {
    margin-left: 10px;
    padding: 2px 8px;
    font-size: 0.8em;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    color: #666;
    transition: 0.2s;
}

.translation-btn:hover {
    background-color: #e0e0e0;
    color: #333;
}

.translation-text {
    display: none; /* Mặc định ẩn */
    margin-top: 8px;
    font-size: 0.9em;
    color: #6c757d;
    font-style: italic;
    background: #fff3cd;
    padding: 5px 10px;
    border-radius: 4px;
    border-left: 3px solid #ffc107;
}

.translation-text.show {
    display: block; /* Hiển thị khi có class .show */
}

/* THÊM class mới để chỉ khóa các nút chọn */
.options-disabled {
    pointer-events: none; /* Chỉ khóa tương tác trong vùng chọn đáp án */
    opacity: 0.8;
}

/* Giữ nguyên các phần khác cho nút dịch */
.translation-btn {
    position: relative;
    z-index: 10; /* Đảm bảo nút dịch luôn nằm trên cùng để click được */
    /* ... các thuộc tính khác ... */
}