:root {
    --school-blue: #0056b3; 
    --school-light-blue: #e6f2ff;
    --school-yellow: #ffc107;
    --school-yellow-hover: #e0a800;
}

body {
    font-family: 'Kanit', sans-serif;
    background-color: #f8f9fa;
    color: #333;
}

/* =========================================
   1. Utility Classes: สีข้อความ (Text Colors)
========================================= */
.text-school-blue { color: var(--school-blue) !important; }
.text-school-yellow { color: var(--school-yellow) !important; }
.text-school-light { color: var(--school-light-blue) !important; }

/* =========================================
   2. Utility Classes: สีพื้นหลัง (Backgrounds)
========================================= */
.bg-school-blue { background-color: var(--school-blue) !important; }
.bg-school-yellow { background-color: var(--school-yellow) !important; }
.bg-school-light { background-color: var(--school-light-blue) !important; }

/* =========================================
   3. Utility Classes: เอฟเฟกต์ตอนชี้เมาส์ (Hover Effects)
========================================= */
.nav-link:hover {
    color: var(--school-yellow) !important;
    transition: color 0.2s ease;
}
.nav-link{
    color: white!important;
    transition: color 0.2s ease;
}
.hover-text-yellow:hover {
    color: var(--school-yellow) !important;
}

.hover-bg-yellow {
    transition: background-color 0.2s ease;
}
.hover-bg-yellow:hover {
    background-color: var(--school-yellow-hover) !important;
    color: #000 !important;
}

/* =========================================
   4. Custom Components (ส่วนที่เฉพาะเจาะจงจริงๆ)
========================================= */
.navbar-school {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.school-logo-box {
    width: 40px; height: 40px; font-weight: bold;
}
.section-heading {
    border-bottom: 2px solid var(--school-yellow);
    padding-bottom: 5px;
}