*{font-family:"Sarabun",sans-serif}
body{background:#f4f7fb;color:#24324a}
.topbar{background:linear-gradient(135deg,#173a6b,#245f9e)}
.sidebar{min-height:calc(100vh - 56px);background:#fff;border-right:1px solid #e7ecf3}
.sidebar .nav-link{color:#3d4d67;padding:.72rem 1rem;margin:.1rem .55rem;border-radius:.65rem}
.sidebar .nav-link:hover{background:#eef4fb;color:#174f8b}
.sidebar .nav-link i{width:1.5rem}
.sidebar-heading{font-size:.76rem;text-transform:uppercase;color:#8a97aa;padding:.5rem 1.5rem;font-weight:700}
.level-early{border-left:4px solid #ec7fa8}
.level-basic{border-left:4px solid #4594d8}
.card{border:0;border-radius:1rem;box-shadow:0 .3rem 1rem rgba(40,65,100,.08)}
.stat-card{overflow:hidden;position:relative}
.stat-card .icon{font-size:2.5rem;opacity:.18;position:absolute;right:1rem;top:.7rem}
.card-early{background:linear-gradient(135deg,#fff3f8,#ffe4ee)}
.card-basic{background:linear-gradient(135deg,#eff8ff,#dceeff)}
.progress{height:.75rem;border-radius:99px}
.table thead th{background:#edf3f9;color:#42516a;border:0;white-space:nowrap}
.table td{vertical-align:middle}
.badge{font-weight:600}
.login-wrap{min-height:calc(100vh - 130px);display:flex;align-items:center;justify-content:center}
.login-card{max-width:440px;width:100%}
.section-title{font-weight:700;color:#203758}
.form-label{font-weight:600}
.btn{border-radius:.65rem}
.form-control,.form-select{border-radius:.65rem}
@media(max-width:991px){.sidebar{min-height:auto}}