.iot-module-true-false-khtn {
    margin-bottom: 30px;
}

/* Ẩn bóng đèn mặc định của hệ thống lõi sinh ra ở vị trí tiêu đề để tránh thừa thãi */
.iot-module-true-false-khtn .iot-q-text .iot-explain-icon,
.iot-module-true-false-khtn .iot-q-text > .iot-explain-icon {
    display: none !important;
}

/* Bố cục khối câu hỏi */
.io-tfng-khtn-wrap {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
}

.io-tfng-khtn-letter {
    font-size: 18px;
    color: #000;
    min-width: 20px;
    padding-top: 2px;
}

.io-tfng-khtn-options-box { 
    display: flex; 
    gap: 10px; 
    margin-top: 0px;
}

/* Ô VUÔNG TRẮC NGHIỆM */
.io-tfng-khtn-box {
    position: relative;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #94a3b8; /* Viền mờ mặc định */
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.io-tfng-khtn-box:hover {
    border-color: #000;
}

.io-tfng-khtn-box input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
    z-index: 2;
}

/* Dấu tích và Dấu chéo mặc định làm mờ (opacity: 0.2) */
.io-tfng-khtn-mark {
    font-weight: 900;
    font-size: 18px;
    color: #000;
    opacity: 0.15; 
    transition: all 0.2s ease;
    user-select: none;
    font-family: Arial, sans-serif;
}
.io-mark-cross { font-size: 16px; margin-bottom: 2px; }

.io-tfng-khtn-box:hover .io-tfng-khtn-mark {
    opacity: 0.5;
}

/* Khi đã check thì hiện đen đậm */
.io-tfng-khtn-box:has(input:checked) { 
    border: 2px solid #000 !important; 
    background: #fff !important; 
    box-shadow: none !important; 
}

.io-tfng-khtn-box:has(input:checked) .io-tfng-khtn-mark { 
    opacity: 1; 
}


/* MÀU SẮC ĐÚNG/SAI CHUẨN ĐỂ HỆ THỐNG LÕI TỰ DỌN DẸP KHI CHẤM BÀI */
.io-tfng-khtn-box.iot-opt-wrong,
.io-tfng-khtn-box.iot-opt-wrong:has(input:checked) {
    background: #fee2e2 !important;
    border: 2px solid #ef4444 !important;
}
.io-tfng-khtn-box.iot-opt-wrong:has(input:checked) .io-tfng-khtn-mark { color: #dc2626; }

.io-tfng-khtn-box.iot-opt-correct,
.io-tfng-khtn-box.iot-opt-correct:has(input:checked) {
    background: #dcfce7 !important;
    border: 2px solid #22c55e !important;
}
.io-tfng-khtn-box.iot-opt-correct:has(input:checked) .io-tfng-khtn-mark { color: #16a34a; }


/* Nội dung Mệnh đề & Tooltip Bóng đèn */
.io-tfng-khtn-statement {
    position: relative; 
    margin-bottom: 0;
    font-size: 18px;
    color: #000;
    padding-top: 2px;
    flex: 1; 
}

/* ĐỊNH DẠNG BÓNG ĐÈN RIÊNG - Ẩn mặc định cho tới khi có kết quả */
.iot-khtn-explain-icon {
    display: none !important; /* BẮT BUỘC ĐỂ ẨN TRƯỚC KHI LÀM BÀI VÀ KHI RETAKE */
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #fef08a;
    border-radius: 50%;
    font-size: 13px;
    margin-right: 10px;
    vertical-align: baseline;
    z-index: 10;
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

/* Thêm class trạng thái hiển thị (Bật bằng JS sau khi có kết quả) */
.iot-khtn-explain-icon.show-result {
    display: inline-flex !important;
}

.iot-khtn-explain-icon:hover {
    transform: scale(1.15);
    background: #fde047;
}