/* Tùy chỉnh chung — giữ tối giản, ưu tiên Bootstrap 5 */

/* Nút trong navbar trông như nav-link (form Đăng xuất) */
.navbar .btn-link.nav-link {
    border: 0;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.85);
}
.navbar .btn-link.nav-link:hover {
    color: #fff;
}

/* Công thức LaTeX và hình ảnh không tràn màn hình (mục 17.1) */
img {
    max-width: 100%;
    height: auto;
}
mjx-container {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Câu hiện tại trong lưới điều hướng */
.nut-cau.cau-hien-tai {
    outline: 3px solid #212529;
    outline-offset: 1px;
}

/* ------------------------------------------------------------------
   6 mức xếp loại điểm (thang 10) — xem App\Core\ScoreBand.
   Mỗi mức khai báo 3 biến; số điểm và huy hiệu cùng lấy từ bộ biến đó
   nên đổi màu chỉ cần sửa ở đây.
   ------------------------------------------------------------------ */
.muc-diem      { --muc-mau: #495057; --muc-nen: #f1f3f5; --muc-vien: #dee2e6; }
.muc-xuat-sac  { --muc-mau: #0f5132; --muc-nen: #d1e7dd; --muc-vien: #a3cfbb; }
.muc-gioi      { --muc-mau: #084298; --muc-nen: #cfe2ff; --muc-vien: #9ec5fe; }
.muc-kha       { --muc-mau: #055160; --muc-nen: #cff4fc; --muc-vien: #9eeaf9; }
.muc-tb        { --muc-mau: #664d03; --muc-nen: #fff3cd; --muc-vien: #ffe69c; }
.muc-yeu       { --muc-mau: #8a3d05; --muc-nen: #ffe5d0; --muc-vien: #fecba1; }
.muc-kem       { --muc-mau: #842029; --muc-nen: #f8d7da; --muc-vien: #f1aeb5; }

/* Con số điểm */
.diem-so {
    color: var(--muc-mau);
}

/* Huy hiệu xếp loại: icon + nhãn */
.huy-hieu-diem {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 2rem;
    color: var(--muc-mau);
    background-color: var(--muc-nen);
    border: 1px solid var(--muc-vien);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25;
    white-space: nowrap;
}
.icon-muc-diem {
    width: 1.05em;
    height: 1.05em;
    flex-shrink: 0;
}

/* Icon lớn đi kèm số điểm cỡ display */
.diem-so .icon-muc-diem,
.icon-muc-diem.icon-lon {
    width: 0.8em;
    height: 0.8em;
    vertical-align: -0.05em;
}