:root {
     --primary-dark: #0f4a3b;
     /* สีเขียวเข้ม Navbar/Footer */
     --primary-light: #5a8a50;
     /* สีเขียวอ่อน ปุ่ม/เน้น */
     --bg-color: #f4f7f6;
     /* สีพื้นหลัง */
     --text-dark: #333333;
 }

 body {
     font-family: 'Prompt', sans-serif;
     background-color: var(--bg-color);
     color: var(--text-dark);
 }

 /* Navbar */
 .navbar-custom {
     background-color: var(--primary-dark);
     padding: 10px 0;
 }

 .navbar-custom .nav-link {
     color: #d1dfdb;
     font-weight: 300;
     padding: 10px 15px;
     margin: 0 5px;
     transition: 0.3s;
 }

 .navbar-custom .nav-link:hover {
     color: #fff;
 }

 .navbar-custom .nav-link.active {
     color: #fff;
     border-bottom: 3px solid var(--primary-light);
     font-weight: 400;
 }

 .navbar-brand-text {
     color: #fff;
     line-height: 1.2;
 }

 .brand-subtitle {
     font-size: 0.75rem;
     color: #a3c2ba;
 }

 /* Hero Section */
 .hero-section {

     background-size: cover;
     background-position: center;
     padding: 60px 0;
     border-bottom: 1px solid #e0e0e0;
 }

 .hero-title {
     color: var(--primary-dark);
     font-weight: 500;
 }

 .hero-subtitle {
     color: var(--primary-light);
     font-style: italic;
     font-weight: 500;
 }

 /* Cards */
 .card {
     border: none;
     border-radius: 12px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
     margin-bottom: 20px;
 }

 .card-header-bg-white {
     background-color: #fff;
     border-bottom: 1px solid #eee;
     border-radius: 12px 12px 0 0 !important;
     padding: 15px 20px;
     font-weight: 500;
 }

 /* Sidebar Menu */
 .sidebar-menu .list-group-item {
     border: none;
     padding: 12px 20px;
     color: #555;
     transition: 0.2s;
     background-color: transparent;
 }

 .sidebar-menu .list-group-item:hover {
     background-color: #f9f9f9;
 }

 .sidebar-menu .list-group-item.active {
     background-color: #f1f8f3;
     color: var(--primary-dark);
     border-left: 4px solid var(--primary-light);
     font-weight: 500;
 }

 .sidebar-menu .list-group-item i {
     width: 25px;
     color: var(--primary-light);
 }

 /* Calendar */
 .calendar-table th {
     font-weight: 400;
     color: #666;
     text-align: center;
     border-bottom-width: 1px;
     font-size: 0.9rem;
 }

 .calendar-table td {
     height: 90px;
     width: 14.28%;
     vertical-align: top;
     padding: 8px;
     font-size: 0.9rem;
     color: #555;
 }

 .calendar-table td.text-muted {
     color: #bbb !important;
 }

 .event-badge {
     display: block;
     font-size: 0.75rem;
     padding: 3px 6px;
     border-radius: 4px;
     margin-top: 4px;
     text-align: left;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .bg-event-approved {
     background-color: #aed581;
     color: #33691e;
 }

 .bg-event-pending {
     background-color: #ffe082;
     color: #ff8f00;
 }

 .bg-event-done {
     background-color: #90caf9;
     color: #1565c0;
 }

 .btn-outline-custom {
     color: #666;
     border-color: #ddd;
 }

 .btn-outline-custom:hover {
     background-color: #f0f0f0;
 }

 .btn-custom-active {
     background-color: var(--primary-light);
     color: white;
     border-color: var(--primary-light);
 }

 .btn-custom-active:hover {
     background-color: #4a7541;
     color: white;
 }

 /* Status Dot */
 .status-dot {
     height: 10px;
     width: 10px;
     border-radius: 50%;
     display: inline-block;
     margin-right: 5px;
 }

 /* Lists */
 .booking-list .badge {
     font-weight: 400;
     padding: 5px 10px;
 }

 .news-item {
     border-left: 3px solid #ccc;
     padding-left: 15px;
     margin-bottom: 15px;
 }

 .news-item.news-green {
     border-left-color: var(--primary-light);
 }

 .news-item.news-yellow {
     border-left-color: #ffca28;
 }

 /* Stats Card */
 .stat-icon {
     width: 50px;
     height: 50px;
     border-radius: 12px;
     background-color: #e8f3ec;
     color: var(--primary-light);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
 }

 .stat-value {
     font-size: 1.8rem;
     font-weight: 600;
     line-height: 1;
     color: var(--primary-dark);
 }

 /* Footer */
 .footer {
     background-color: var(--primary-dark);
     color: #fff;
     padding: 20px 0;
     font-size: 0.9rem;
     font-weight: 300;
 }