body { font-family: 'KoHo', sans-serif; background-color: #f8f9fa;
 padding-top: 50px; /* เพื่อชดเชยความสูงของ fixed-top navbar */ }
.rank-card { border: none; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.avatar-sm { width: 45px; height: 45px; object-fit: cover; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.rank-number { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; font-size: 0.9rem; }

/* เพิ่มสไตล์สำหรับ badge ในตาราง */
.badge.bg-primary { background-color: #0d6efd !important; }

 
.rank-gold-border {
    outline: 3px solid #FFD700; /* Gold */
    outline-offset: 2px; /* Space between image and outline */
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6); /* Optional: add a subtle glow */
}
.rank-silver-border {
    outline: 3px solid #C0C0C0; /* Silver */
    outline-offset: 2px;
    box-shadow: 0 0 8px rgba(192, 192, 192, 0.6);
}
.rank-bronze-border {
    outline: 3px solid #CD7F32; /* Bronze */
    outline-offset: 2px;
    box-shadow: 0 0 8px rgba(205, 127, 50, 0.6);
}
/* Ensure the image itself doesn't have a conflicting border */
.rank-gold-border, .rank-silver-border, .rank-bronze-border { border: none; }

.top-1, .top-2, .top-3 {
    display: inline-flex; /* Use flex for easy centering */
    align-items: center;
    justify-content: center;
    width: 30px; /* Fixed width for circular shape */
    height: 30px; /* Fixed height for circular shape */
    border-radius: 50%; /* Make it circular */
    font-size: 0.9rem; /* Adjust font size */
    color: white; /* Default text color */
    font-weight: bold;
}
.top-1 { background-color: #FFD700; color: #333; } /* Gold background for 1st */
.top-2 { background-color: #C0C0C0; color: #333; } /* Silver background for 2nd */
.top-3 { background-color: #CD7F32; } /* Bronze background for 3rd */

/* การแสดงภาพขนาดใหญ่ตอนชี้เมาส์ (Hover Photo Preview) */
.avatar-hover-wrapper {
    position: relative;
    display: inline-block;
}

.avatar-hover-preview {
    display: none;
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: 15px;
    z-index: 1050;
    pointer-events: none; /* เพื่อไม่ให้ตัวมันเองขวางการชี้เมาส์ */
}

.avatar-hover-preview img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    background-color: #fff;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    animation: zoomFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.avatar-hover-wrapper:hover .avatar-hover-preview {
    display: block;
}

@keyframes zoomFadeIn {
    from {
        opacity: 0;
        transform: scale(0.7);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ป้องกันตารางบีบ/ตัดขอบของรูปพรีวิว */
.table-responsive {
    overflow: visible !important;
}
tr:hover {
    position: relative;
    z-index: 10;
}

/* Faculty badge styling for Light and Dark modes */
.faculty-badge,
.badge.bg-light.text-dark {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    padding: 0.35em 0.7em !important;
    border-radius: 6px !important;
}

.dark-theme .faculty-badge,
.dark-theme .badge.bg-light.text-dark,
.dark-theme .badge.bg-light {
    background-color: #1e293b !important;
    color: #38bdf8 !important;
    border: 1px solid #334155 !important;
}