.header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #eee; margin-bottom: 20px; padding-bottom: 10px; }
.answer-btn { padding: 6px 16px; border: 1px solid #ff4d4d; color: #ff4d4d; background: white; cursor: pointer; font-weight: bold; border-radius: 4px; }
.question-text { line-height: 1.7; margin-bottom: 30px; color: #333; }
.highlight { background-color: #91ff9a !important; font-weight: bold; padding: 0 2px; }
.options { list-style: none; padding: 0; margin-bottom: 30px; }
.option { padding: 15px; border-top: 1px solid #eee; color: #333; }
.is-correct { background-color: #e8f5e9 !important; color: #2e7d32 !important; font-weight: bold; }
#explanation { margin-top: 20px; padding: 20px; background-color: #f8f9fa; border-radius: 8px; text-align: center; }
.hidden { display: none; }
.nav-buttons { display: flex; justify-content: space-between; margin-top: 30px; }
.nav-buttons button { width: 48%; padding: 12px; border: 1px solid #ccc; background: white; cursor: pointer; border-radius: 6px; font-size: 1rem; font-weight: 500; }

.xet-layout .layout-sub-top {padding-top: 3.5rem;}
.xet-layout .layout-sub-top .layout-sub-top__container {display: none !important;}

@media (max-width: 767px){ /*sm*/
    .question-text { font-size: 1rem}
    .quiz-container {padding: 10px;}
}
@media (min-width: 768px){ 
    .question-text { font-size: 1.2rem}
    .quiz-container {padding: 30px;}
    .boardReadHeader .title_info {display: none;}
}