/* =========================================================
   CSS ĐỊNH DẠNG NỘI DUNG CÂU HỎI
   ========================================================= */
.tinymce-content img { max-width: 100%; height: auto !important; border-radius: 8px; }
.tinymce-content table { width: 100% !important; border-collapse: collapse; margin-bottom: 1rem; }
.tinymce-content table td, .tinymce-content table th { border: 1px solid #dee2e6; padding: 0.5rem; }
.tinymce-content p:last-child { margin-bottom: 0; }
.border-dashed { border-style: dashed !important; border-width: 2px !important; }

/* =========================================================
   CSS CHO VÙNG CHỌN TRÊN ẢNH (HOTSPOT)
   ========================================================= */
/* Trạng thái mặc định: Vàng mờ, viền xanh đậm */
.hotspot-area {
    background-color: rgba(255, 235, 59, 0.4); /* Vàng mờ (độ trong suốt 40%) */
    border: 2px solid #003399; /* Xanh dương đậm */
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

/* Hiệu ứng di chuột (giúp tăng trải nghiệm UX) */
.hotspot-area:hover {
    background-color: rgba(255, 235, 59, 0.6); /* Vàng mờ đậm hơn một chút khi hover */
}

/* Trạng thái khi được click chọn: Xanh dương */
.hotspot-area.selected {
    background-color: rgba(13, 110, 253, 0.4) !important; /* Nền xanh dương mờ */
    border-color: #0d6efd !important; /* Viền xanh dương sáng */
}

/* Tùy chỉnh thêm cho Dark Mode (nếu website dùng data-bs-theme="dark") */
[data-bs-theme="dark"] .hotspot-area {
    background-color: rgba(255, 235, 59, 0.2); /* Vàng mờ nhạt hơn cho chế độ tối */
    border-color: rgba(0, 51, 153, 0.8);
}
[data-bs-theme="dark"] .hotspot-area.selected {
    background-color: rgba(110, 168, 254, 0.4) !important; /* Xanh dương dịu cho Dark mode */
    border-color: #6ea8fe !important;
}