.exam-btn{
    text-align:center;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0066cc;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
}

.btn:hover {
    background-color: #0055aa;
}

.filter-wrapper {
    margin: 15px 0;
    display: flex;
    gap: 10px;
}

.filter-wrapper select {
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
}

.tabs-wrapper {
    max-width: 100%;
    margin-top: 15px;
}

.tabs-container {
    display: flex;
    gap: 8px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .tabs-container {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .tabs-container::-webkit-scrollbar {
        display: none;
    }
}

.tab {
    background-color: #e5e7eb;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.tab:hover {
    background-color: #d1d5db;
}

.tab.active {
    background-color: #2563eb;
    color: #fff;
}

.tab.critical {
    background-color: #ff68007a;
}

.tab.critical:hover {
    background-color: #e86b0d;
}

.tab.critical.active {
    background-color: #d55e00;
    color: #fff;
}

.tab.correct::after {
    /*content: url('data:image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 13L9 17L19 7" stroke="%23ffffff" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/> <path d="M5 13L9 17L19 7" stroke="%232ecc71" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>');*/
    content: url('data:image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 13L9 17L19 7" stroke="%232ecc71" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    margin-left: 7px; /* Khoảng cách sau dấu ... */
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.tab.incorrect::after {
    /*content: url('data:image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 6L18 18M6 18L18 6" stroke="%23ffffff" stroke-width="7" stroke-linecap="round"/> <path d="M6 6L18 18M6 18L18 6" stroke="%23e63946" stroke-width="4" stroke-linecap="round"/></svg>');*/
    content: url('data:image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 6L18 18M6 18L18 6" stroke="%23e63946" stroke-width="4" stroke-linecap="round"/></svg>');
    margin-left: 7px; /* Khoảng cách sau dấu ... */
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.tab.not-answered::after {
    /*content: url('data:image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 12H20" stroke="%23ffffff" stroke-width="6" stroke-linecap="round"/><path d="M4 12H20" stroke="%236b7280" stroke-width="4" stroke-linecap="round"/></svg>');*/
    content: url('data:image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="8" stroke="%236b7280" stroke-width="4" stroke-linecap="round"/></svg>');
    margin-left: 4px;
    margin-left: 4px;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.legend {
    margin-top: 10px;
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: var(--text-color);
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.legend-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
}
.legend-icon.not-answered {
    width: 14px;
    height: 14px;
}

.description li{
    line-height:1.5em;
}

.question-content {
    margin-top: 15px;
}

.question-details {
    display: none;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.question-details.active {
    display: block;
    opacity: 1;
}

.question-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 10px;
}

.question-details .question {
    font-size: 15.5px;
    font-weight: bold;
    flex: 1;
}

.options {
    list-style: none;
    padding: 0;
}

.options li {
    font-size: 14px;
    margin: 8px 0;
}

.options .correct-answer {
    color: #15803d;
    font-weight: bold;
}

.explanation {
    margin-top: 15px;
    padding: 8px;
    background-color: #f3f4f6;
    border-radius: 4px;
}

.explanation p {
    font-size: 14px;
    margin: 5px 0;
}