@import
url('https://fonts.googleapis.com/css2?family=Sarabun:wght@200;300;400;500;600;700&family=Prompt:wght@300;400;500;600;700&display=swap');

:root {
--primary-color: #61049f;
--primary-light: #61049f22;
--secondary-color: #30025f;
--accent-color: #ffcc00;
--dark-bg: #212529;
--glass-white: rgba(255, 255, 255, 0.95);
--glass-dark: rgba(26, 26, 46, 0.9);
--card-bg: rgba(255, 255, 255, 0.92);
--shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--backdrop-blur: blur(12px);
}

body {
font-family: 'Sarabun', sans-serif;
background-color: #f8f9fa;
    background-image: linear-gradient(to top, #eef2ff 0%, #f8faff 30%, #ffffff 100%);
background-attachment: fixed;
color: #444;
font-size: 14.5px;
line-height: 1.6;
margin: 0;
padding: 0;
position: relative;
}

body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
    background-image: linear-gradient(135deg, var(--primary-light) 25%, transparent 25%), linear-gradient(225deg,
    var(--primary-light) 25%, transparent 25%), linear-gradient(45deg, var(--primary-light) 25%, transparent 25%),
    linear-gradient(315deg, var(--primary-light) 25%, transparent 25%);
    background-position: 15px 0, 15px 0, 0 0, 0 0;
    background-size: 30px 30px;

-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0));
mask-image: linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0));
z-index: -1;
pointer-events: none;
}

/* --- Container Width Override --- */
@media (min-width: 1300px) {
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
max-width: 1240px !important;
}
}

/* --- Content Wrapper (Replaces Boxed) --- */
.main-wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Prompt', sans-serif;
font-weight: 600;
color: #1a1a1a;
}

/* --- Topbar --- */
.topbar {
background-color: #001f3f;
color: rgba(255,255,255,0.85);
font-size: 13px;
padding: 10px 0;
font-weight: 300;
}
.topbar a {
color: white;
text-decoration: none;
transition: all 0.23s ease;
}
.topbar a:hover {
color: var(--accent-color);
opacity: 1;
}

/* --- Main Header / Combined Navbar --- */
.header-main {
background: var(--card-bg);
backdrop-filter: var(--backdrop-blur);
-webkit-backdrop-filter: var(--backdrop-blur);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
z-index: 1000;
transition: all 0.3s;
}
.brand-title {
font-family: 'Prompt', sans-serif;
font-weight: 700;
font-size: 1.3rem;
color: #002d5b;
letter-spacing: -0.5px;
}
.brand-subtitle {
font-size: 0.8rem;
color: #888;
font-weight: 300;
}

.navbar-nav .nav-link {
font-family: 'Prompt', sans-serif;
color: #444 !important;
font-weight: 500;
font-size: 15px;
padding: 25px 15px !important; /* Increased padding for clean height */
margin: 0 2px;
transition: all 0.3s ease;
background: transparent;
border: none;
position: relative;
}

.navbar-nav .nav-link:hover {
color: var(--primary-color) !important;
}

.navbar-nav .nav-link.active {
color: var(--primary-color) !important;
background: transparent;
}

.navbar-nav .nav-link.active::after {
content: '';
position: absolute;
bottom: 18px;
left: 15px;
right: 15px;
height: 3px;
background: var(--primary-color);
border-radius: 10px;
}

/* Dropdown Menu Styling */
.dropdown-menu {
border-radius: 12px;
padding: 8px 0;
min-width: 220px;
}

.dropdown-item {
font-family: 'Sarabun', sans-serif;
font-size: 14px;
font-weight: 400;
padding: 10px 20px;
color: #444;
transition: all 0.2s ease;
}

.dropdown-item:hover {
background-color: #f8f9fa;
color: var(--primary-color);
padding-left: 24px;
}

.dropdown-item i {
width: 20px;
text-align: center;
}

/* --- Quick Links (Icon Cards) --- */
.quick-link-card {
background: #fff;
border-radius: 16px;
padding: 24px 16px;
text-align: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.04);
transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
text-decoration: none;
color: #333;
display: block;
border: 1px solid #f8f9fa;
}
.quick-link-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 24px rgba(0,0,0,0.1);
border-color: var(--primary-light);
}
.quick-link-icon {
width: 64px;
height: 64px;
margin: 0 auto 15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 26px;
background: #f8fafc;
transition: all 0.3s;
}
.quick-link-card:hover .quick-link-icon {
background: white;
scale: 1.1;
}

/* --- News Cards --- */
.news-card {
border: none;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
transition: all 0.4s ease;
background: #fff;
}
.news-card:hover {
box-shadow: 0 15px 35px rgba(0,0,0,0.12);
transform: translateY(-5px);
}
.news-title {
font-family: 'Prompt', sans-serif;
font-weight: 600;
line-height: 1.5;
font-size: 1.1rem;
color: #2c3e50;
margin-bottom: 12px;
}

/* --- Unified Card System --- */
.modern-card {
background: var(--card-bg);
backdrop-filter: var(--backdrop-blur);
-webkit-backdrop-filter: var(--backdrop-blur);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 4px 20px rgba(0,0,0,0.04);
overflow: hidden;
margin-bottom: 24px;
transition: all 0.3s ease;
}

.modern-card-header {
padding: 18px 24px;
background: rgba(255, 255, 255, 0.5);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);,
display: flex;
align-items: center;
justify-content: space-between;
}

.modern-card-title {
font-family: 'Prompt', sans-serif;
font-weight: 700;
font-size: 16px;
color: #002d5b;
margin: 0;
display: flex;
align-items: center;
}

.modern-card-title i {
margin-right: 12px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary-light);
color: var(--primary-color);
border-radius: 10px;
}

/* --- Section Headers (Main Content) --- */
.main-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}

.main-section-title {
font-family: 'Prompt', sans-serif;
font-weight: 600;
font-size: 20px;
color: #1e293b;
display: flex;
align-items: center;
margin: 0;
background: linear-gradient(135deg, #d3dcff 0%, #e8edff 100%);
padding: 10px 25px;
border-radius: 50px;
border: 1px solid #b2bfff;
box-shadow: 0 4px 15px rgba(178, 191, 255, 0.4);
}

.main-section-title i {
margin-right: 12px;
color: var(--primary-color);
opacity: 1;
}

/* --- Sidebar Refinement --- */
.sidebar-card {
background: var(--card-bg);
backdrop-filter: var(--backdrop-blur);
-webkit-backdrop-filter: var(--backdrop-blur);
border-radius: 20px;
padding: 0;
box-shadow: 0 4px 20px rgba(0,0,0,0.04);
overflow: hidden;
margin-bottom: 24px;
border: none;
}

.sidebar-section-title {
font-family: 'Prompt', sans-serif;
font-weight: 700;
color: #1e293b;
font-size: 15px;
padding: 16px 20px;
background: linear-gradient(to right, #f1f5ff, #e5edff);
border-bottom: 2px solid #d3dcff;
display: flex;
align-items: center;
margin: 0;
}

.sidebar-section-title i {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border-radius: 8px;
margin-right: 10px;
color: var(--primary-color);
font-size: 12px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.side-menu-list {
padding: 10px;
}

.side-menu-link {
display: flex;
align-items: center;
padding: 12px 15px;
color: #555;
text-decoration: none !important;
border-radius: 12px;
transition: all 0.25s;
font-size: 14.5px;
margin-bottom: 4px;
border: 1px solid transparent;
}

.side-menu-link:hover {
background: #f8faff;
color: var(--primary-color);
border-color: #eef2ff;
padding-left: 18px;
}

.side-menu-link i {
font-size: 10px;
opacity: 0.4;
transition: all 0.25s;
}

.side-menu-link:hover i {
opacity: 1;
color: var(--primary-color);
transform: translateX(3px);
}

/* --- Footer --- */
footer {
background: rgba(26, 26, 46, 0.95);
backdrop-filter: var(--backdrop-blur);
-webkit-backdrop-filter: var(--backdrop-blur);
color: rgba(255,255,255,0.7);
padding: 60px 0 30px;
font-size: 14px;
}
footer h5, footer h6 {
color: #fff;
margin-bottom: 25px;
}
.footer-link {
color: rgba(255,255,255,0.6);
text-decoration: none;
transition: 0.3s;
}
.footer-link:hover {
color: #fff;
padding-left: 5px;
}

/* --- Buttons --- */
.btn-login {
background: #002d5b;
border: none;
border-radius: 8px;
padding: 8px 18px !important;
font-weight: 500;
font-family: 'Prompt', sans-serif;
font-size: 14px;
color: white !important;
box-shadow: 0 4px 10px rgba(0,45,91,0.2);
}
.btn-login:hover {
background: #004080;
box-shadow: 0 6px 15px rgba(0,45,91,0.3);
transform: translateY(-1px);
}

/* --- Result Progress Circle --- */
.result-progress-container {
display: flex;
justify-content: center;
align-items: center;
}

.result-progress-circle {
position: relative;
width: 180px;
height: 180px;
}

.progress-svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}

.progress-svg circle {
fill: none;
stroke-width: 8;
stroke-linecap: round;
}

.progress-svg .bg {
stroke: #f1f3f5;
}

.progress-svg .bar {
stroke: #28a745;
stroke-dasharray: 283;
transition: stroke-dashoffset 1s ease-out;
filter: drop-shadow(0 2px 4px rgba(40, 167, 69, 0.2));
}

.progress-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

.progress-label .percentage {
font-family: 'Prompt', sans-serif;
font-size: 36px;
font-weight: 700;
color: #28a745;
line-height: 1;
}

.hover-opacity-75:hover {
opacity: 0.75;
}

@keyframes pulse-red {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(220, 53, 69, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

.pulse-badge {
animation: pulse-red 2s infinite;
}

.ann-item {
transition: all 0.2s ease;
}

.ann-item:hover {
background-color: rgba(255, 255, 255, 0.6);
transform: translateX(5px);
}

/* ========================================
MOBILE RESPONSIVE STYLES
======================================== */

/* Mobile First - Base styles for mobile */
@media (max-width: 991px) {
/* Header & Navigation */
.brand-title {
font-size: 0.95rem !important;
}

.brand-subtitle {
font-size: 0.7rem !important;
}

.navbar-brand img {
height: 40px !important;
}

.navbar-nav .nav-link {
padding: 12px 15px !important;
font-size: 14px;
}

.navbar-nav .nav-link.active::after {
display: none !important;
}

/* Main Section Titles */
.main-section-title {
font-size: 16px !important;
padding: 6px 15px !important;
}

.main-section-title i {
font-size: 14px;
margin-right: 8px !important;
}

/* Sidebar Cards */
.sidebar-card {
margin-bottom: 20px !important;
}

.sidebar-section-title {
font-size: 14px !important;
padding: 12px 15px !important;
}

/* Stats List */
.stats-list .d-flex {
font-size: 13px !important;
}

.stats-list .fw-bold {
font-size: 15px !important;
}

/* Progress Circle */
.result-progress-circle {
width: 140px !important;
height: 140px !important;
}

.progress-label .percentage {
font-size: 28px !important;
}

/* News Cards */
.news-card {
margin-bottom: 15px;
}

.news-card img {
height: 180px !important;
}

/* Schedule Card */
.modern-card-header {
padding: 20px !important;
}

.modern-card-header h5 {
font-size: 14px !important;
}

.modern-card-header .small {
font-size: 11px !important;
}

/* Footer */
.footer {
padding: 20px 0 !important;
}

.footer .d-flex {
text-align: center;
}

.footer .small {
font-size: 11px !important;
}

/* Buttons */
.btn-sm {
font-size: 12px !important;
padding: 6px 12px !important;
}

/* Container Padding */
.container {
padding-left: 15px;
padding-right: 15px;
}
}

/* Tablet Adjustments */
@media (min-width: 768px) and (max-width: 991px) {
.brand-title {
font-size: 1.05rem !important;
}

.result-progress-circle {
width: 160px !important;
height: 160px !important;
}

.progress-label .percentage {
font-size: 32px !important;
}
}

/* Small Mobile Devices */
@media (max-width: 576px) {
body {
font-size: 13px;
}

.brand-title {
font-size: 0.85rem !important;
}

.brand-subtitle {
font-size: 0.65rem !important;
display: none; /* Hide subtitle on very small screens */
}

.navbar-brand img {
height: 35px !important;
}

.main-section-title {
font-size: 14px !important;
padding: 5px 12px !important;
}

.sidebar-section-title {
font-size: 13px !important;
padding: 10px 12px !important;
}

.result-progress-circle {
width: 120px !important;
height: 120px !important;
}

.progress-label .percentage {
font-size: 24px !important;
}

.news-card img {
height: 150px !important;
}

.modern-card-header {
padding: 15px !important;
}

.modern-card-header h5 {
font-size: 13px !important;
}

/* Hide some elements on very small screens */
.swiper {
height: 300px !important;
}

.slide-content {
padding: 20px !important;
}

/* Adjust spacing */
.mb-5 {
margin-bottom: 2rem !important;
}

.mt-5 {
margin-top: 2rem !important;
}

.py-5 {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
}

/* Extra Small Devices */
@media (max-width: 375px) {
.brand-title {
font-size: 0.75rem !important;
}

.navbar-brand img {
height: 30px !important;
}

.result-progress-circle {
width: 100px !important;
height: 100px !important;
}

.progress-label .percentage {
font-size: 20px !important;
}

.main-section-title {
font-size: 13px !important;
}
}

/* Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) {
.swiper {
height: 250px !important;
}

.navbar-nav .nav-link {
padding: 10px 12px !important;
}
}

/* Print Styles */
@media print {
.topbar,
.header-main,
.footer,
.btn,
.dropdown {
display: none !important;
}

body {
background: white;
}

.main-wrapper {
background: white;
}
}