/* Reset và base styles cho plugin */
* {
    box-sizing: border-box;
}

.oem-exam-container {
    display: grid;
    grid-template-columns: 4fr 1fr; /* 80-20 ratio */
    gap: 20px; /* Ít khoảng trắng ở giữa hơn */
    padding: 0; /* Không chừa viền */
    height: auto; /* Không cuộn, mở rộng dọc tự nhiên */
}
.oem-exam-description {
    overflow: visible; /* Đảm bảo mô tả mở rộng dọc */
    overflow-y: visible; /* Không scrollbar, mở rộng tự nhiên */
    /* Bỏ max-height để ảnh và nội dung dài có thể mở rộng */
    scrollbar-gutter: stable; /* Dự trữ không gian cho scrollbar, hỗ trợ Chrome/Edge */
}
.oem-exam-description h3 {
    margin-top: 0;
    color: #333;
    text-align: center; /* Canh giữa tiêu đề bài thi */
}
/* Style cho ảnh trong description để responsive và hiện đầy đủ */
.oem-exam-description img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto; /* Canh giữa ảnh nếu cần */
}
.oem-exam-form {
    padding: 20px;
    background: #f9f9f9;
    border-radius: 5px;
}
.oem-answer-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
.oem-answer-table th, .oem-answer-table td {
    border: 1px solid #dee2e6;
    padding: 8px;
    text-align: center;
}
.oem-answer-table th {
    background-color: #f2f2f2;
}
/* Custom scrollbar cho Chrome/Edge (nếu muốn style đẹp hơn, nhưng giờ ít dùng vì visible) */
.oem-exam-description::-webkit-scrollbar {
    width: 8px;
}
.oem-exam-description::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.oem-exam-description::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}
.oem-exam-description::-webkit-scrollbar-thumb:hover {
    background: #555;
}
@media (max-width: 768px) {
    .oem-exam-container {
        grid-template-columns: 1fr;
        height: auto; /* Hiện hết chiều dọc trên mobile */
        overflow: visible; /* Không cuộn, mở rộng tự nhiên */
        padding: 10px; /* Giảm padding cho mobile */
        gap: 5px; /* Giảm gap trên mobile nếu cần */
    }
    .oem-exam-description {
        /* Bỏ max-height và overflow-y để mở rộng tự nhiên trên mobile */
        overflow-y: visible; /* Không scrollbar trên mobile */
        order: -1; /* Đặt description lên trên form */
    }
    .oem-exam-description h3 {
        text-align: center; /* Giữ canh giữa trên mobile */
    }
    .oem-exam-description img {
        width: 100%;
        height: auto;
    }
}

/* Thêm responsive cho table trên mobile (từ Bootstrap, nhưng tinh chỉnh) */
@media (max-width: 768px) {
    .table-responsive {
        font-size: 0.8em;
    }
    
    .oem-answer-table th,
    .oem-answer-table td {
        padding: 4px 2px;
        white-space: nowrap;
    }
    
    .btn {
        margin-top: 10px;
    }
}

/* Styling cho header của bảng phần 1 và 2 */
.oem-answer-table thead th {
    background-color: #0A763C !important;
    color: white !important;
    font-weight: bold;
}

/* Đảm bảo không ảnh hưởng đến phần 3 */
@media (max-width: 768px) {
    .oem-answer-table thead th {
        background-color: #0A763C !important;
        color: white !important;
    }
}

/* Styling cho header phần 3 */
.oem-part3-header td {
    background-color: #0A763C !important;
    color: white !important;
    font-weight: bold !important;
    text-align: center !important;
    font-size: 1em;
}

/* Đảm bảo responsive trên mobile */
@media (max-width: 768px) {
    .oem-part3-header td {
        background-color: #0A763C !important;
        color: white !important;
        font-weight: bold !important;
        padding: 8px !important; /* Giữ padding đều */
    }
}