/* /Components/Calendar.razor.rz.scp.css */
/* General Calendar Container */
.calendar-container[b-gjtm0wp1px] {
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
    min-height: calc(100vh - 60px); /* Adjust based on your layout if there's a fixed header/footer */
    color: #333;
}

/* Header Section */
.header[b-gjtm0wp1px] {
    background-color: #6a1b9a; /* Deep Purple */
    color: white;
    padding: 15px 25px;
    border-radius: 10px;
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.header h1[b-gjtm0wp1px] {
    margin: 0;
    font-size: 2em;
    font-weight: 700;
}

.nav-buttons[b-gjtm0wp1px] {
    display: flex;
    align-items: center;
}

.nav-btn[b-gjtm0wp1px] {
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.nav-btn:hover[b-gjtm0wp1px] {
    background-color: rgba(255, 255, 255, 0.3);
}

.current-month[b-gjtm0wp1px] {
    font-size: 1.2em;
    font-weight: 600;
    margin: 0 20px;
    min-width: 150px; /* Ensure space for month name */
    text-align: center;
}

/* Stats Section */
.stats[b-gjtm0wp1px] {
    display: flex;
    justify-content: space-around;
    background-color: #ffffff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 25px;
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

.stat-item[b-gjtm0wp1px] {
    text-align: center;
    padding: 10px 15px;
    min-width: 120px;
}

.stat-number[b-gjtm0wp1px] {
    font-size: 2.2em;
    font-weight: bold;
    color: #6a1b9a; /* Deep Purple */
    margin-bottom: 5px;
}

.stat-label[b-gjtm0wp1px] {
    font-size: 0.9em;
    color: #555;
}

/* Calendar Grid */
.calendar-grid[b-gjtm0wp1px] {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 columns for days of week */
    gap: 10px;
    background-color: #ffffff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.day-header[b-gjtm0wp1px] {
    font-weight: bold;
    text-align: center;
    padding: 10px 0;
    background-color: #e0e0e0;
    border-radius: 5px;
    color: #444;
}

.day-cell[b-gjtm0wp1px] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px;
    min-height: 120px; /* Adjust height as needed */
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.day-cell:hover[b-gjtm0wp1px] {
    background-color: #f0f0f0;
}

.day-cell.other-month[b-gjtm0wp1px] {
    background-color: #f2f2f2;
    color: #bbb;
    pointer-events: none; /* Disable clicks on other month days */
}

.day-cell.today[b-gjtm0wp1px] {
    border: 2px solid #6a1b9a; /* Highlight today's date */
    background-color: #ffe0b2; /* Light orange background */
    box-shadow: 0 0 0 3px rgba(106, 27, 154, 0.2);
}

.day-number[b-gjtm0wp1px] {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

/* Tasks Styling */
.task[b-gjtm0wp1px], .training-event[b-gjtm0wp1px] {
    background-color: #e1bee7; /* Light purple for tasks */
    color: #4a148c; /* Darker purple text */
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 0.8em;
    margin-bottom: 4px;
    word-break: break-word; /* Prevent overflow */
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 4px solid;
}

.task.priority-low[b-gjtm0wp1px] { border-left-color: #4CAF50; } /* Green */
.task.priority-medium[b-gjtm0wp1px] { border-left-color: #FFC107; } /* Amber */
.task.priority-high[b-gjtm0wp1px] { border-left-color: #F44336; } /* Red */

.task.completed[b-gjtm0wp1px] {
    background-color: #c8e6c9; /* Lighter green for completed */
    color: #388e3c;
    text-decoration: line-through;
    opacity: 0.8;
}

.task-actions[b-gjtm0wp1px] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.task-delete[b-gjtm0wp1px] {
    background: none;
    border: none;
    color: #d32f2f; /* Red for delete */
    font-weight: bold;
    cursor: pointer;
    font-size: 1.1em;
    padding: 0 3px;
}
.task-delete:hover[b-gjtm0wp1px] {
    color: #b71c1c;
}

.training-event[b-gjtm0wp1px] {
    background-color: #bbdefb; /* Light blue for trainings */
    color: #1976d2; /* Darker blue text */
    border-left: 4px solid #2196F3; /* Blue border */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}
.training-event i[b-gjtm0wp1px] {
    font-size: 1.1em;
}


/* Add Task Button */
.add-task-btn[b-gjtm0wp1px] {
    background-color: #8bc34a; /* Light Green */
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    bottom: 5px;
    right: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
}

.add-task-btn:hover[b-gjtm0wp1px] {
    background-color: #7cb342;
}

/* Modal Styling */
.modal[b-gjtm0wp1px] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content[b-gjtm0wp1px] {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 450px;
    animation: fadeIn-b-gjtm0wp1px 0.3s ease-out;
}

@keyframes fadeIn-b-gjtm0wp1px {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-content h3[b-gjtm0wp1px] {
    margin-top: 0;
    color: #6a1b9a; /* Deep Purple */
    text-align: center;
    margin-bottom: 25px;
    font-size: 1.8em;
}

.form-group[b-gjtm0wp1px] {
    margin-bottom: 15px;
}

.form-group label[b-gjtm0wp1px] {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #555;
}

.form-group input[type="text"][b-gjtm0wp1px],
.form-group select[b-gjtm0wp1px] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box; /* Include padding in width */
}

.modal-buttons[b-gjtm0wp1px] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 25px;
}

.btn[b-gjtm0wp1px] {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.btn-primary[b-gjtm0wp1px] {
    background-color: #6a1b9a; /* Deep Purple */
    color: white;
}

.btn-primary:hover[b-gjtm0wp1px] {
    background-color: #4a148c;
}

.btn-secondary[b-gjtm0wp1px] {
    background-color: #cccccc;
    color: #333;
}

.btn-secondary:hover[b-gjtm0wp1px] {
    background-color: #bbbbbb;
}

/* Loading Overlay for API calls */
.loading-overlay[b-gjtm0wp1px] {
    position: absolute; /* Change to absolute to overlay just calendar content */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999; /* Below modal, above calendar */
    border-radius: 10px; /* Match calendar-grid radius */
}

.loading-overlay .loading-spinner[b-gjtm0wp1px] {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #6a1b9a; /* Deep purple */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

.loading-overlay p[b-gjtm0wp1px] {
    margin-top: 15px;
    color: #6a1b9a;
    font-weight: bold;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .header[b-gjtm0wp1px] {
        flex-direction: column;
        text-align: center;
        padding: 15px;
    }
    .header h1[b-gjtm0wp1px] {
        font-size: 1.5em;
        margin-bottom: 10px;
    }
    .nav-buttons[b-gjtm0wp1px] {
        flex-wrap: wrap;
        justify-content: center;
    }
    .current-month[b-gjtm0wp1px] {
        margin: 10px 0;
        min-width: unset;
    }
    .nav-btn[b-gjtm0wp1px] {
        padding: 6px 10px;
        font-size: 0.9em;
    }
    .stats[b-gjtm0wp1px] {
        flex-direction: column;
        align-items: center;
    }
    .stat-item[b-gjtm0wp1px] {
        margin-bottom: 10px;
    }
    .calendar-grid[b-gjtm0wp1px] {
        gap: 5px;
        padding: 10px;
    }
    .day-cell[b-gjtm0wp1px] {
        min-height: 100px;
        padding: 5px;
    }
    .day-number[b-gjtm0wp1px] {
        font-size: 1.2em;
    }
    .task[b-gjtm0wp1px], .training-event[b-gjtm0wp1px] {
        font-size: 0.75em;
        padding: 3px 5px;
    }
    .add-task-btn[b-gjtm0wp1px] {
        width: 25px;
        height: 25px;
        font-size: 1.2em;
        bottom: 3px;
        right: 3px;
    }
    .modal-content[b-gjtm0wp1px] {
        padding: 20px;
    }
    .modal-content h3[b-gjtm0wp1px] {
        font-size: 1.5em;
    }
}
/* /Components/Contact.razor.rz.scp.css */
/* Contact Section */
.blazor-contact-section[b-dsr75qw807] {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 100px 20px;
    position: relative;
    overflow: hidden;
}

.blazor-contact-container[b-dsr75qw807] {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.blazor-contact-section h2[b-dsr75qw807] {
    font-size: 3rem;
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 700;
}

.blazor-contact-subtitle[b-dsr75qw807] {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 60px;
    opacity: 0.8;
}

.blazor-contact-grid[b-dsr75qw807] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
}

.blazor-contact-card[b-dsr75qw807] {
    background: white;
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.blazor-contact-card[b-dsr75qw807]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.blazor-contact-card:hover[b-dsr75qw807]::before {
    transform: scaleX(1);
}

.blazor-contact-card:hover[b-dsr75qw807] {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.blazor-contact-icon[b-dsr75qw807] {
    font-size: 2.5rem;
    margin-bottom: 20px;
    display: block;
    transition: transform 0.3s ease;
}

.blazor-contact-card:hover .blazor-contact-icon[b-dsr75qw807] {
    transform: scale(1.2) rotate(5deg);
}

.blazor-contact-card h4[b-dsr75qw807] {
    font-size: 1.3rem;
    color: #2c3e50;
    margin-bottom: 10px;
}

.blazor-contact-card p[b-dsr75qw807] {
    color: #666;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.blazor-contact-btn[b-dsr75qw807] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.blazor-contact-btn:hover[b-dsr75qw807] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.blazor-contact-form-wrapper[b-dsr75qw807] {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.1);
}

.blazor-quick-contact h3[b-dsr75qw807] {
    font-size: 2rem;
    color: #2c3e50;
    margin-bottom: 30px;
}

.blazor-contact-form[b-dsr75qw807] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blazor-form-row[b-dsr75qw807] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.blazor-contact-form input[b-dsr75qw807],
.blazor-contact-form textarea[b-dsr75qw807] {
    padding: 15px 20px;
    border: 2px solid #f0f0f0;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: inherit;
}

.blazor-contact-form input:focus[b-dsr75qw807],
.blazor-contact-form textarea:focus[b-dsr75qw807] {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.blazor-contact-form textarea[b-dsr75qw807] {
    min-height: 120px;
    resize: vertical;
}

.blazor-submit-btn[b-dsr75qw807] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 18px 40px;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.blazor-submit-btn:hover[b-dsr75qw807] {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .blazor-contact-grid[b-dsr75qw807] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .blazor-form-row[b-dsr75qw807] {
        grid-template-columns: 1fr;
    }

    .blazor-contact-form-wrapper[b-dsr75qw807] {
        padding: 30px;
    }

    .blazor-contact-section h2[b-dsr75qw807] {
        font-size: 2.2rem;
    }
}

@media (max-width: 480px) {
    .blazor-contact-card[b-dsr75qw807] {
        padding: 30px 20px;
    }

    .blazor-contact-form-wrapper[b-dsr75qw807] {
        padding: 25px;
    }
}

/* Reveal Animation (ต้องมีใน Global CSS หรือ Component ที่ใช้งาน) */
.reveal[b-dsr75qw807] {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
}

.reveal.active[b-dsr75qw807] {
    opacity: 1;
    transform: translateY(0);
}
/* /Components/Heroshow.razor.rz.scp.css */
/* Existing blazor-hero styles (unchanged from your input for this section) */
.blazor-hero *[b-a34wui6kc7] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.blazor-hero[b-a34wui6kc7] {
    position: relative;
    height: 100vh;
    min-height: 600px;
    width: 100vw; /* ทำให้กว้างเท่า viewport */
    margin-left: calc(-50vw + 50%); /* จัดกึ่งกลางและชดเชย scrollbar */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.blazor-hero[b-a34wui6kc7]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23667eea;stop-opacity:0.1" /><stop offset="100%" style="stop-color:%23764ba2;stop-opacity:0.1" /></linearGradient></defs><circle cx="200" cy="200" r="300" fill="url(%23grad1)" opacity="0.3"/><circle cx="800" cy="400" r="200" fill="url(%23grad1)" opacity="0.4"/><circle cx="1000" cy="600" r="250" fill="url(%23grad1)" opacity="0.2"/></svg>') center/cover;
    animation: float-b-a34wui6kc7 20s ease-in-out infinite;
}

@keyframes float-b-a34wui6kc7 {

    0%,
    100% {
        transform: translateY(0px) scale(1);
    }

    50% {
        transform: translateY(-20px) scale(1.05);
    }
}

.blazor-hero-content[b-a34wui6kc7] {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    max-width: 900px;
    padding: 0 20px;
    animation: slideUp-b-a34wui6kc7 1s ease-out;
}

@keyframes slideUp-b-a34wui6kc7 {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.blazor-hero-image[b-a34wui6kc7] {
    position: relative;
    width: 320px;
    height: 320px;
    margin: 0 auto 50px;
    border-radius: 50%;
    background: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
    background-size: 400% 400%;
    animation: gradientShift-b-a34wui6kc7 3s ease-in-out infinite, pulse-b-a34wui6kc7 2s ease-in-out infinite alternate;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

@keyframes gradientShift-b-a34wui6kc7 {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes pulse-b-a34wui6kc7 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.08);
    }
}

.blazor-hero-image[b-a34wui6kc7]::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blazor-hero-icon[b-a34wui6kc7] {
    position: relative;
    z-index: 3;
    font-size: 140px;
    color: white;
    animation: rotate-b-a34wui6kc7 4s linear infinite;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

@keyframes rotate-b-a34wui6kc7 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.blazor-hero-title[b-a34wui6kc7] {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 25px;
    background: linear-gradient(45deg, #ffffff, #f0f0f0);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    animation: titleGlow-b-a34wui6kc7 2s ease-in-out infinite alternate;
    letter-spacing: -1px;
}

@keyframes titleGlow-b-a34wui6kc7 {
    0% {
        filter: brightness(1) drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
    }

    100% {
        filter: brightness(1.2) drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
    }
}

.blazor-hero-subtitle[b-a34wui6kc7] {
    font-size: 1.5rem;
    margin-bottom: 40px;
    opacity: 0.95;
    line-height: 1.7;
    animation: fadeIn-b-a34wui6kc7 1s ease-out 0.5s both;
    font-weight: 300;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

@keyframes fadeIn-b-a34wui6kc7 {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.95;
    }
}

.blazor-hero-buttons[b-a34wui6kc7] {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
    animation: fadeIn-b-a34wui6kc7 1s ease-out 1s both;
}

.blazor-hero-btn[b-a34wui6kc7] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 45px;
    text-decoration: none;
    border-radius: 60px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: none;
    outline: none;
}

.blazor-hero-btn-primary[b-a34wui6kc7] {
    background: linear-gradient(45deg, #ff6b6b, #feca57);
    color: white;
    box-shadow: 0 15px 35px rgba(255, 107, 107, 0.4);
}

.blazor-hero-btn-secondary[b-a34wui6kc7] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

.blazor-hero-btn[b-a34wui6kc7]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.blazor-hero-btn:hover[b-a34wui6kc7]::before {
    left: 100%;
}

.blazor-hero-btn:hover[b-a34wui6kc7] {
    transform: translateY(-4px) scale(1.05);
}

.blazor-hero-btn-primary:hover[b-a34wui6kc7] {
    box-shadow: 0 20px 50px rgba(255, 107, 107, 0.6);
}

.blazor-hero-btn-secondary:hover[b-a34wui6kc7] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.blazor-floating-elements[b-a34wui6kc7] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.blazor-floating-element[b-a34wui6kc7] {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: floatRandom-b-a34wui6kc7 8s ease-in-out infinite;
    backdrop-filter: blur(5px);
}

.blazor-floating-element:nth-child(1)[b-a34wui6kc7] {
    width: 120px;
    height: 120px;
    top: 15%;
    left: 8%;
    animation-delay: 0s;
}

.blazor-floating-element:nth-child(2)[b-a34wui6kc7] {
    width: 80px;
    height: 80px;
    top: 60%;
    right: 12%;
    animation-delay: 2s;
}

.blazor-floating-element:nth-child(3)[b-a34wui6kc7] {
    width: 150px;
    height: 150px;
    bottom: 25%;
    left: 15%;
    animation-delay: 4s;
}

.blazor-floating-element:nth-child(4)[b-a34wui6kc7] {
    width: 100px;
    height: 100px;
    top: 30%;
    right: 20%;
    animation-delay: 6s;
}

@keyframes floatRandom-b-a34wui6kc7 {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }

    25% {
        transform: translateY(-30px) translateX(15px) rotate(90deg);
    }

    50% {
        transform: translateY(-60px) translateX(-15px) rotate(180deg);
    }

    75% {
        transform: translateY(-30px) translateX(25px) rotate(270deg);
    }
}

/* Particle effects */
.blazor-particles[b-a34wui6kc7] {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.blazor-particle[b-a34wui6kc7] {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: particleFloat-b-a34wui6kc7 15s linear infinite;
}

@keyframes particleFloat-b-a34wui6kc7 {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

.blazor-parallax-section[b-a34wui6kc7] {
    position: relative;
    height: 100vh; /* ทำให้มีความสูงเท่ากับ viewport */
    min-height: 600px; /* กำหนดขั้นต่ำ */
    width: 100vw; /* ทำให้กว้างเต็ม viewport */
    margin-left: calc(-50vw + 50%); /* จัดกึ่งกลางสำหรับความกว้างเต็มจอ */
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, #fff9c4, #ffd93d, #ffb74d);
    overflow: hidden; /* ซ่อนส่วนเกิน */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* ใช้ font เดียวกัน */
}

.blazor-parallax-bg[b-a34wui6kc7] {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background: url('data:image/svg+xml,<svg xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" viewBox="0 0 1000 1000"><circle cx="100" cy="100" r="50" fill="%23ffd54f" opacity="0.3"/><circle cx="900" cy="200" r="30" fill="%23ffeb3b" opacity="0.4"/><circle cx="300" cy="800" r="40" fill="%23fff176" opacity="0.2"/><circle cx="700" cy="600" r="25" fill="%23ffcc02" opacity="0.5"/><circle cx="500" cy="400" r="35" fill="%23ffc107" opacity="0.3"/></svg>');
    background-size: cover; /* ทำให้ background image ครอบคลุมพื้นที่ */
    background-position: center; /* จัดกึ่งกลาง background image */
    animation: slowRotate-b-a34wui6kc7 40s linear infinite;
}

@keyframes slowRotate-b-a34wui6kc7 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.blazor-parallax-content[b-a34wui6kc7] {
    z-index: 2;
    text-align: center;
    color: #333;
    max-width: 700px;
    padding: 0 20px;
    animation: slideUp-b-a34wui6kc7 1s ease-out; /* เพิ่ม animation เข้ามา */
}

.blazor-floating-text[b-a34wui6kc7] {
    /* เปลี่ยนชื่อคลาส */
    font-size: 3.2rem;
    margin-bottom: 1.5rem;
    text-shadow: 0 4px 20px rgba(255, 193, 61, 0.3);
    color: #8d5524;
}

.blazor-parallax-description[b-a34wui6kc7] {
    /* เปลี่ยนชื่อคลาส */
    font-size: 1.4rem;
    text-shadow: 0 2px 10px rgba(255, 193, 61, 0.2);
    color: #6d4c41;
}


@media (max-width: 1024px) {
    .blazor-hero-title[b-a34wui6kc7] {
        font-size: 3.5rem;
    }

    .blazor-hero-subtitle[b-a34wui6kc7] {
        font-size: 1.3rem;
    }

    .blazor-hero-image[b-a34wui6kc7] {
        width: 280px;
        height: 280px;
    }

    .blazor-hero-icon[b-a34wui6kc7] {
        font-size: 120px;
    }

    .blazor-floating-text[b-a34wui6kc7] {
        font-size: 2.8rem; /* ปรับขนาด font สำหรับ responsive */
    }

    .blazor-parallax-description[b-a34wui6kc7] {
        font-size: 1.2rem; /* ปรับขนาด font สำหรับ responsive */
    }
}

@media (max-width: 768px) {

    .blazor-hero[b-a34wui6kc7],
    .blazor-parallax-section[b-a34wui6kc7] { /* เพิ่ม .blazor-parallax-section */
        min-height: 500px;
    }

    .blazor-hero-title[b-a34wui6kc7] {
        font-size: 2.8rem;
    }

    .blazor-hero-subtitle[b-a34wui6kc7] {
        font-size: 1.1rem;
        margin-bottom: 30px;
    }

    .blazor-hero-image[b-a34wui6kc7] {
        width: 220px;
        height: 220px;
        margin-bottom: 35px;
    }

    .blazor-hero-icon[b-a34wui6kc7] {
        font-size: 90px;
    }

    .blazor-hero-buttons[b-a34wui6kc7] {
        flex-direction: column;
        align-items: center;
    }

    .blazor-hero-btn[b-a34wui6kc7] {
        padding: 15px 35px;
        font-size: 1rem;
    }

    .blazor-floating-text[b-a34wui6kc7] {
        font-size: 2.2rem; /* ปรับขนาด font สำหรับ responsive */
    }

    .blazor-parallax-description[b-a34wui6kc7] {
        font-size: 1.1rem; /* ปรับขนาด font สำหรับ responsive */
    }
}

@media (max-width: 480px) {
    .blazor-hero-title[b-a34wui6kc7] {
        font-size: 2.2rem;
    }

    .blazor-hero-subtitle[b-a34wui6kc7] {
        font-size: 1rem;
    }

    .blazor-hero-image[b-a34wui6kc7] {
        width: 180px;
        height: 180px;
    }

    .blazor-hero-icon[b-a34wui6kc7] {
        font-size: 70px;
    }

    .blazor-floating-text[b-a34wui6kc7] {
        font-size: 1.8rem; /* ปรับขนาด font สำหรับ responsive */
    }

    .blazor-parallax-description[b-a34wui6kc7] {
        font-size: 1rem; /* ปรับขนาด font สำหรับ responsive */
    }
}
/* /Components/InnovationDashboard.razor.rz.scp.css */
/* !!! นี่คือกฎ Grid ที่คุณต้องการใช้ !!! */
.grid1[b-f2kjgdssup] {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
}

@media (min-width: 768px) {
    .grid1[b-f2kjgdssup] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .grid1[b-f2kjgdssup] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .grid1[b-f2kjgdssup] {
        grid-template-columns: repeat(6, 1fr);
    }
}

.category-item[b-f2kjgdssup] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.icon-circle[b-f2kjgdssup] {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 4px solid;
}

.icon-circle:hover[b-f2kjgdssup] {
    transform: scale(1.05);
}

.icon-circle.active[b-f2kjgdssup] {
    background-color: #1e40af;
    border-color: #1e40af;
}

.icon-circle.inactive[b-f2kjgdssup] {
    background-color: #ffffff;
    border-color: #d1d5db;
}

.icon-circle.inactive:hover[b-f2kjgdssup] {
    border-color: #9ca3af;
}

.icon[b-f2kjgdssup] {
    font-size: 1.5rem;
}

.icon.active[b-f2kjgdssup] {
    color: #ffffff;
}

.icon.inactive[b-f2kjgdssup] {
    color: #ef4444;
    /* คุณตั้งเป็นสีแดงไว้ ถ้าต้องการสีอื่นสำหรับ inactive icon ก็เปลี่ยนตรงนี้ */
}

.category-title[b-f2kjgdssup] {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    max-width: 8rem;
    margin-top: 0.5rem;
}

.category-title.active[b-f2kjgdssup] {
    color: #1e40af;
}

.category-title.inactive[b-f2kjgdssup] {
    color: #374151;
}
/* /Components/SharedTable.razor.rz.scp.css */
 .modern-table[b-h46p5u155s] {
     background: #fff;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
     border: none;
     margin: 0;
 }

 .modern-table thead[b-h46p5u155s] {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
 }

 .modern-table thead th[b-h46p5u155s] {
     padding: 1.2rem 1.5rem;
     font-weight: 600;
     font-size: 0.95rem;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     border: none;
     position: relative;
 }

 .modern-table tbody tr[b-h46p5u155s] {
     transition: all 0.3s ease;
     border-bottom: 1px solid #f1f3f4;
 }

 .modern-table tbody tr:hover[b-h46p5u155s] {
     background-color: #f8f9ff;
     transform: translateY(-1px);
     box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
 }

 .modern-table tbody tr:last-child[b-h46p5u155s] {
     border-bottom: none;
 }

 .modern-table tbody td[b-h46p5u155s] {
     padding: 1.2rem 1.5rem;
     vertical-align: middle;
     border: none;
     font-size: 0.95rem;
     color: #2d3748;
 }

 .modern-table tbody td:first-child[b-h46p5u155s] {
     font-weight: 600;
     color: #4a5568;
 }

 .modern-table tbody td:nth-child(2)[b-h46p5u155s] {
     color: #718096;
     font-family: 'Courier New', monospace;
     font-size: 0.9rem;
 }

 .approve-btn[b-h46p5u155s] {
     background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
     border: none;
     padding: 0.6rem 1.4rem;
     border-radius: 8px;
     color: white;
     font-weight: 500;
     font-size: 0.9rem;
     transition: all 0.3s ease;
     box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3);
     cursor: pointer;
     text-transform: none;
 }

 .approve-btn:hover[b-h46p5u155s] {
     background: linear-gradient(135deg, #38a169 0%, #2f855a 100%);
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(72, 187, 120, 0.4);
     color: white;
 }

 .approve-btn:active[b-h46p5u155s] {
     transform: translateY(0);
 }

 .table-container[b-h46p5u155s] {
     background: #fff;
     border-radius: 12px;
     padding: 0;
     margin: 1rem 0;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
 }

 .table-header[b-h46p5u155s] {
     padding: 1.5rem 1.5rem 0 1.5rem;
     border-bottom: 1px solid #e2e8f0;
     margin-bottom: 0;
 }

 .table-title[b-h46p5u155s] {
     font-size: 1.4rem;
     font-weight: 700;
     color: #2d3748;
     margin: 0 0 0.5rem 0;
 }

 .table-subtitle[b-h46p5u155s] {
     color: #718096;
     font-size: 0.95rem;
     margin: 0 0 1rem 0;
 }

 /* Responsive design */
 @media (max-width: 768px) {
     .modern-table thead[b-h46p5u155s] {
         display: none;
     }

     .modern-table tbody tr[b-h46p5u155s] {
         display: block;
         margin-bottom: 1rem;
         border-radius: 8px;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         border: none;
     }

     .modern-table tbody td[b-h46p5u155s] {
         display: block;
         padding: 0.8rem 1rem;
         border-bottom: 1px solid #f1f3f4;
         position: relative;
         padding-left: 45%;
     }

     .modern-table tbody td[b-h46p5u155s]:before {
         content: attr(data-label);
         position: absolute;
         left: 1rem;
         width: 40%;
         padding-right: 10px;
         white-space: nowrap;
         font-weight: 600;
         color: #4a5568;
     }

     .modern-table tbody td:last-child[b-h46p5u155s] {
         border-bottom: none;
         text-align: center;
         padding-left: 1rem;
     }

     .modern-table tbody td:last-child[b-h46p5u155s]:before {
         display: none;
     }
 }

 /* Loading animation for approved users */
 .approved-row[b-h46p5u155s] {
     background-color: #f0fff4 !important;
     animation: fadeOut-b-h46p5u155s 2s ease-in-out forwards;
 }

 @keyframes fadeOut-b-h46p5u155s {
     0% {
         opacity: 1;
     }

     50% {
         opacity: 0.5;
     }

     100% {
         opacity: 0.2;
     }
 }
/* /Components/TrainingProjectDashboard.razor.rz.scp.css */
/* --- General Dashboard Header --- */
.tpdb-dashboard-header[b-6cn26c9697] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem 0;
    margin-bottom: 2rem;
}

/* --- Card Base Styles --- */
.tpdb-card[b-6cn26c9697] {
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
    transition: transform 0.2s;
    border-radius: 0.375rem;
    background-color: #fff;
}

.tpdb-card:hover[b-6cn26c9697] {
    transform: translateY(-2px);
}

/* --- Card Body --- */
.tpdb-card-body[b-6cn26c9697] {
    flex: 1 1 auto;
    padding: 1.5rem;
    color: inherit;
}

.tpdb-tab-content[b-6cn26c9697] {
    /* อาจจะไม่ต้องมีสไตล์พิเศษ ขึ้นอยู่กับการใช้งาน */
    padding: 1rem;
    /* ตัวอย่าง */
}

.tpdb-card-header[b-6cn26c9697] {
    padding: 1rem 1.5rem;
    /* ตัวอย่าง padding */
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0.03);
    /* สีพื้นหลังอ่อนๆ */
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    /* เส้นขอบด้านล่าง */
    border-top-left-radius: calc(0.375rem - 1px);
    /* ให้โค้งตาม Card */
    border-top-right-radius: calc(0.375rem - 1px);
}

.tpdb-mb-0[b-6cn26c9697] {
    /* Utility class: margin-bottom: 0 */
    margin-bottom: 0 !important;
}

/* --- Stat Card Specific Styles --- */
.tpdb-stat-card[b-6cn26c9697] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    text-align: center;
    padding: 1.5rem;
}

.tpdb-stat-number[b-6cn26c9697] {
    font-size: 2.5rem;
    font-weight: bold;
}

/* --- Chart Container --- */
.tpdb-chart-container[b-6cn26c9697] {
    position: relative;
    height: 300px;
    margin: 1rem 0;
}

/* --- Table Responsive --- */
.tpdb-table-responsive[b-6cn26c9697] {
    max-height: 400px;
    overflow-y: auto;
}

/* --- Status Badges --- */
.tpdb-status-badge[b-6cn26c9697] {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}

.tpdb-status-completed[b-6cn26c9697] {
    background-color: #d4edda;
    color: #155724;
}

.tpdb-status-in-progress[b-6cn26c9697] {
    background-color: #fff3cd;
    color: #856404;
}

.tpdb-status-planned[b-6cn26c9697] {
    background-color: #cce5ff;
    color: #0056b3;
}

.tpdb-status-cancelled[b-6cn26c9697] {
    background-color: #f8d7da;
    color: #721c24;
}

/* --- Filter Section --- */
.tpdb-filter-section[b-6cn26c9697] {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 10px;
    margin-bottom: 2rem;
}

/* --- Form Elements (NEW) --- */
.tpdb-form-label[b-6cn26c9697] {
    /* สำหรับ <label> */
    display: inline-block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    /* ทำให้ Label ดูเด่นขึ้นเล็กน้อย */
    color: #343a40;
    /* สีข้อความ */
}

.tpdb-form-control[b-6cn26c9697] {
    /* สำหรับ <input type="text"> */
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.tpdb-form-control:focus[b-6cn26c9697] {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    /* สีเมื่อโฟกัส */
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
    /* เงาเมื่อโฟกัส */
}

.tpdb-form-select[b-6cn26c9697] {
    /* สำหรับ <select> */
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    /* เพิ่ม padding ขวาสำหรับ arrow */
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    /* Custom arrow SVG */
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* ลบ default arrow ของเบราว์เซอร์ */
}

.tpdb-form-select:focus[b-6cn26c9697] {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}


/* --- Navigation Tabs --- */
.tpdb-nav-tabs .tpdb-nav-link[b-6cn26c9697] {
    border-radius: 10px 10px 0 0;
    margin-right: 0.5rem;
    border: 1px solid transparent;
    padding: 0.5rem 1rem;
    display: block;
    text-decoration: none;
    color: #495057;
}

.tpdb-nav-tabs .tpdb-nav-link.active[b-6cn26c9697] {
    background-color: #667eea;
    border-color: #667eea;
    color: white;
}

/* --- Grid System --- */
.tpdb-row[b-6cn26c9697] {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

.tpdb-row>*[b-6cn26c9697] {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

.tpdb-col-md-3[b-6cn26c9697] {
    flex: 0 0 auto;
    width: 100%;
}

@media (min-width: 768px) {
    .tpdb-col-md-3[b-6cn26c9697] {
        flex: 0 0 auto;
        width: 25%;
    }
}

/* --- Margin/Padding Utilities --- */
.tpdb-mb-4[b-6cn26c9697] {
    margin-bottom: 1.5rem !important;
}

.tpdb-progress[b-6cn26c9697] {
    /* สำหรับ div รอบ progress-bar */
    display: flex;
    height: 1rem;
    /* ความสูงของ progress bar */
    overflow: hidden;
    font-size: 0.75rem;
    background-color: #e9ecef;
    border-radius: 0.25rem;
}

.tpdb-progress-bar[b-6cn26c9697] {
    /* สำหรับ div ภายใน tpdb-progress */
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #0d6efd;
    /* สีฟ้าเริ่มต้น */
    transition: width 0.6s ease;
}

/* --- Utilities (ตรวจสอบอีกครั้ง) --- */
.tpdb-badge[b-6cn26c9697] {
    /* ตรวจสอบว่ามี padding และ border-radius ที่ต้องการ */
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

.tpdb-bg-info[b-6cn26c9697] {
    background-color: #0dcaf0 !important;
}

/* สี Info Badge */
.tpdb-bg-primary[b-6cn26c9697] {
    background-color: #0d6efd !important;
}

/* สี Primary Badge (สำหรับ Visitor Count) */
/* สีอื่นๆ ของ badge ก็ต้องกำหนดด้วย tpdb-bg-X */

.tpdb-btn[b-6cn26c9697] {
    /* ตรวจสอบว่ามี padding และ border-radius ที่ต้องการ */
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.tpdb-btn-sm[b-6cn26c9697] {
    /* ปุ่มขนาดเล็ก */
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.2rem;
}

.tpdb-btn-outline-primary[b-6cn26c9697] {
    /* ปุ่ม Outline Primary */
    color: #0d6efd;
    border-color: #0d6efd;
}

.tpdb-btn-outline-primary:hover[b-6cn26c9697] {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.tpdb-btn-outline-danger[b-6cn26c9697] {
    /* ปุ่ม Outline Danger */
    color: #dc3545;
    border-color: #dc3545;
}

.tpdb-btn-outline-danger:hover[b-6cn26c9697] {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
/* /Components/UpcomingTrainings.razor.rz.scp.css */
/* /Components/UserSelectionModal.razor.rz.scp.css */
/* Custom Modal Backdrop */
.custom-modal-backdrop[b-uy0n0fowb2] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050; /* Adjust z-index as needed */
    transition: opacity 0.3s ease-in-out;
}

.custom-modal-backdrop.hide-backdrop[b-uy0n0fowb2] {
    opacity: 0;
    pointer-events: none; /* Make it unclickable when hidden */
}

.custom-modal-backdrop.show-backdrop[b-uy0n0fowb2] {
    opacity: 1;
    pointer-events: auto; /* Make it clickable when shown */
}

/* Custom Modal Content */
.custom-modal-content[b-uy0n0fowb2] {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    width: 90%; /* Adjust width as needed */
    max-width: 800px; /* Max width */
    max-height: 90vh; /* Max height to allow scrolling */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Hide overflow content */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transform: translateY(20px); /* Start slightly below */
    opacity: 0;
}

.custom-modal-content.hide-modal-content[b-uy0n0fowb2] {
    transform: translateY(20px);
    opacity: 0;
}

.custom-modal-content.show-modal-content[b-uy0n0fowb2] {
    transform: translateY(0);
    opacity: 1;
}

.custom-modal-header[b-uy0n0fowb2] {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-modal-title[b-uy0n0fowb2] {
    margin: 0;
    font-size: 1.25rem;
}

.custom-close-button[b-uy0n0fowb2] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
    padding: 0;
    line-height: 1;
}

.custom-close-button:hover[b-uy0n0fowb2] {
    color: #333;
}

.custom-modal-body[b-uy0n0fowb2] {
    padding: 20px;
    flex-grow: 1; /* Allows content to expand */
    overflow-y: auto; /* Enable scrolling for body if content overflows */
}

.custom-modal-footer[b-uy0n0fowb2] {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 10px; /* Space between buttons */
}

/* Basic button styles if you don't use Bootstrap buttons */
.custom-button[b-uy0n0fowb2] {
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    border: 1px solid transparent;
}

.custom-button.primary[b-uy0n0fowb2] {
    background-color: #007bff;
    color: white;
}

.custom-button.primary:hover:not(:disabled)[b-uy0n0fowb2] {
    background-color: #0056b3;
}

.custom-button.secondary[b-uy0n0fowb2] {
    background-color: #6c757d;
    color: white;
}

.custom-button.secondary:hover:not(:disabled)[b-uy0n0fowb2] {
    background-color: #5a6268;
}

.custom-button:disabled[b-uy0n0fowb2] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* Shared/MainLayout.razor.css */

/* === Header Navigation === */
.main-header[b-yikl53w0im] {
    background: var(--gradient);
    color: white;
    padding: 1rem 0;
    box-shadow: 0 2px 10px rgba(155, 89, 182, 0.2);
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 90px;
    /* เพิ่มหรือปรับค่านี้ให้ Header มีความสูงที่เหมาะสมกับโลโก้ */
    display: flex;
    align-items: center;
}

.header-container[b-yikl53w0im] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    /* เพื่อให้ [โลโก้+ข้อความ (ซ้าย)] [NavMenu (กลาง)] [ปุ่ม (ขวา)] */
    align-items: center;
    padding: 0 2rem;
    width: 100%;
}

/* === Header Right Section === */
.header-right[b-yikl53w0im] {
    display: flex;
    align-items: center;
}

.notification-btn[b-yikl53w0im],
.profile-btn[b-yikl53w0im] {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 1rem;
    position: relative;
    color: white;
    font-size: 1.2rem;
    padding: 0.5rem;
    border-radius: 50%;
    transition: var(--transition);
}

.notification-btn:hover[b-yikl53w0im],
.profile-btn:hover[b-yikl53w0im] {
    background-color: rgba(255, 255, 255, 0.2);
}

.badge[b-yikl53w0im] {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #e74c3c;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* สำหรับส่วนโลโก้และชื่อเว็บไซต์ (h1.site-logo) */
.site-logo[b-yikl53w0im] {
    display: flex;
    /* ใช้ Flexbox เพื่อจัดวางรูปภาพและข้อความให้อยู่ในบรรทัดเดียวกัน */
    align-items: center;
    /* จัดแนวตั้งให้อยู่กึ่งกลาง */
    gap: 0px;
    /* ระยะห่างระหว่างรูปภาพและข้อความ */
    margin: 0;
    /* ลบ margin เริ่มต้นของ h1 */
    padding: 0;
    /* ลบ padding เริ่มต้นของ h1 */
}

/* สำหรับลิงก์ที่ห่อโลโก้ */
.site-logo a[b-yikl53w0im] {
    display: flex;
    /* เพื่อให้ img จัดแนวได้ */
    align-items: center;
    text-decoration: none;
    /* ลบขีดเส้นใต้ของลิงก์ */
    color: inherit;
    /* ให้สีตัวอักษรเหมือน parent (main-header) */
    margin: 0;
    /* ลบ margin */
    padding: 0;
    /* ลบ padding */
}

/* สำหรับรูปภาพโลโก้ */
.site-logo img.header-logo1[b-yikl53w0im] {
    height: 10px !important;
    /* ปรับลดความสูงลงตามต้องการ เช่น 40px หรือ 50px */
    width: auto !important;
    /* สำคัญ: รักษาสัดส่วนของรูปภาพไว้ */
    object-fit: contain;
    border-radius: 5px;
    margin: 0;
    /* สำคัญ: ลบ margin */
    padding: 0;
    /* สำคัญ: ลบ padding */
    display: block;
    /* บางครั้งช่วยในการจัดวางรูปภาพ */
}

a img.header-logo1[b-yikl53w0im] {
    height: 60px !important;
    /* ลองค่า 60px ก่อน หรือ 50px */
    width: auto !important;
    object-fit: contain;
    border-radius: 5px;
    margin: 0;
    /* สำคัญ: ลบ margin */
    padding: 0;
    /* สำคัญ: ลบ padding */
    display: block;
    /* บางครั้งช่วยในการจัดวางรูปภาพ */
}

/* หรือถ้าคุณมั่นใจว่า class="header-logo1" มีแค่ element นี้ */
.header-logo1[b-yikl53w0im] {
    height: 60px !important;
    /* ลองค่า 60px ก่อน หรือ 50px */
    width: auto !important;
    object-fit: contain;
    border-radius: 5px;
}

/* === Mobile Menu Toggle === */
.mobile-menu-toggle[b-yikl53w0im] {
    display: none;
    /* Hidden on desktop */
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

.site-logo .site-title[b-yikl53w0im] {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
    color: #4A235A;
    /* ใช้สีม่วงเข้ม */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
    margin: 0;
    /* สำคัญ: ลบ margin */
    padding: 0;
    /* สำคัญ: ลบ padding */
}

/* สำหรับข้อความในบรรทัดที่สอง (มหาวิทยาลัยราชภัฏนครราชสีมา) */
.site-logo .site-title br+span[b-yikl53w0im] {
    font-size: 0.9rem;
    font-weight: 400;
    display: block;
    margin-top: 2px;
}

/* === Footer === */
.footer[b-yikl53w0im] {
    background: var(--gradient);
    color: white;
    padding: 3rem 2rem;
    border-radius: 20px;
    margin-top: 3rem;
    text-align: center;
}

.main-content[b-yikl53w0im] {
    padding: 1rem;
    /* หรือค่าอื่น */
}

.visitor-stats-container[b-yikl53w0im] {
    margin-top: 1rem; /* ลดระยะห่างจากข้อความลิขสิทธิ์ให้กระชับขึ้น */
    padding: 0.8rem; /* ลด padding ลง */
    background-color: #ffffff;
    border-radius: 5px; /* ลดขอบโค้งมนเล็กน้อย */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* ลดความเข้มของเงา */
    max-width: 400px; /* ✨ สำคัญ: กำหนดความกว้างสูงสุดเหลือ 400px */
    margin-left: auto;
    margin-right: auto; /* จัดกึ่งกลาง */
    text-align: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.visitor-stats-container h3[b-yikl53w0im] {
    text-align: center;
    color: #007bff;
    margin-bottom: 0.8rem; /* ลด margin-bottom */
    font-size: 1.1rem; /* ลดขนาด font หัวข้อ */
    font-weight: 600;
}

.stats-grid[b-yikl53w0im] {
    display: grid;
    /* ✨ สำคัญ: ปรับให้มีอย่างน้อย 1 คอลัมน์ และถ้ากว้างพอให้มี 2 คอลัมน์ */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* ลด minmax ลง */
    gap: 0.6rem; /* ลดระยะห่างระหว่าง Grid Items */
}

.stat-item[b-yikl53w0im] {
    padding: 0.7rem; /* ลด padding */
    border: 1px solid #e9ecef; /* ปรับสีขอบให้อ่อนลงเล็กน้อย */
    border-radius: 4px;
    background-color: #fcfcfc; /* ปรับสีพื้นหลังของแต่ละรายการให้อ่อนลงอีก */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.stat-item .stat-label[b-yikl53w0im] {
    font-weight: 500; /* ลดความหนา font */
    color: #495057; /* ปรับสีเข้มขึ้นเล็กน้อย */
    margin-bottom: 0.2rem; /* ลด margin-bottom */
    font-size: 0.85rem; /* ลดขนาด font label */
}

.stat-item .stat-value[b-yikl53w0im] {
    font-size: 1.2rem; /* ลดขนาด font ตัวเลขหลัก */
    font-weight: 700;
    color: #28a745;
    line-height: 1.1; /* กำหนด line-height ให้กระชับ */
}

.stat-item .stat-unique[b-yikl53w0im] {
    font-size: 0.7rem; /* ลดขนาด font สำหรับ "ไม่ซ้ำ" */
    color: #868e96; /* ปรับสีเทาให้อ่อนลง */
    margin-top: 0.1rem;
}

.stat-item.stat-total[b-yikl53w0im] {
    grid-column: 1 / -1; /* ให้ Total กินเต็มความกว้าง */
    background-color: #d4edda; /* สีพื้นหลังต่างจากรายการอื่น */
    border-color: #218838; /* ขอบสีเขียวเข้มขึ้นเล็กน้อย */
    text-align: center;
    align-items: center; /* จัดกึ่งกลางสำหรับ Total */
    padding: 0.8rem 1rem; /* ปรับ padding เล็กน้อย */
}

.stat-item.stat-total .stat-value[b-yikl53w0im] {
    color: #0056b3; /* เปลี่ยนสี Total Value เป็นน้ำเงินเข้มขึ้น */
    font-size: 1.5rem; /* ลดขนาด font รวมทั้งหมด */
}

/* === Responsive Design for MainLayout === */
@media (max-width: 992px) {
    .header-container[b-yikl53w0im] {
        padding: 0 1rem;
        /* ลด padding ของ header เมื่อหน้าจอเล็ก */
    }

    .visitor-stats-container[b-yikl53w0im] {
        padding: 1rem;
    }

    .stats-grid[b-yikl53w0im] {
        grid-template-columns: 1fr;
        /* บนมือถือให้เรียงแถวเดียว */
    }

    .stat-item[b-yikl53w0im] {
        align-items: center;
        /* บนมือถือให้จัดกึ่งกลาง */
    }

    .stat-item.stat-total[b-yikl53w0im] {
        grid-column: auto;
        /* บนมือถือไม่ต้องกินเต็มความกว้าง */
    }

    .mobile-menu-toggle[b-yikl53w0im] {
        display: block;
        /* แสดงปุ่ม toggle บนหน้าจอเล็ก */
    }

    .main-content[b-yikl53w0im] {
        padding: 1rem;
        /* คุณมีบรรทัดนี้อยู่แล้ว */
    }
}

@media (max-width: 576px) {

    /* คุณสามารถเพิ่มสไตล์สำหรับ header/footer ที่เล็กมากๆ ได้ที่นี่ */
    .header-container[b-yikl53w0im] {
        padding: 0 1rem;
        /* หากจำเป็นต้องลด padding อีก */
    }

    .visitor-stats-container[b-yikl53w0im] {
        padding: 1rem;
    }

    .stats-grid[b-yikl53w0im] {
        grid-template-columns: 1fr;
        /* บนมือถือให้เรียงแถวเดียว */
    }

    .stat-item[b-yikl53w0im] {
        align-items: center;
        /* บนมือถือให้จัดกึ่งกลาง */
    }

    .stat-item.stat-total[b-yikl53w0im] {
        grid-column: auto;
        /* บนมือถือไม่ต้องกินเต็มความกว้าง */
    }

    .main-content[b-yikl53w0im] {
        padding: 1rem;
        /* คุณมีบรรทัดนี้อยู่แล้ว */
    }
}
@media (max-width: 480px) { /* สำหรับจอที่แคบกว่า 480px */
    .visitor-stats-container[b-yikl53w0im] {
        padding: 0.6rem;
    }
    .stats-grid[b-yikl53w0im] {
        grid-template-columns: 1fr; /* บนมือถือขนาดเล็กสุดให้เรียง 1 คอลัมน์ */
        gap: 0.5rem;
    }
    .stat-item[b-yikl53w0im] {
        align-items: center; /* จัดกึ่งกลางเมื่อเป็น 1 คอลัมน์ */
    }
    .stat-item .stat-value[b-yikl53w0im] {
        font-size: 1.3rem; /* อาจจะเพิ่มขนาดเล็กน้อยให้ดูเด่นขึ้นบนจอเล็ก */
    }
    .stat-item.stat-total[b-yikl53w0im] {
        padding: 0.7rem 1rem;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* Shared/NavMenu.razor.css */

/* === Navigation Menu === */
.main-nav[b-63xxvwj8dp] {
    display: flex;
    /* แสดงแบบ flex บน Desktop */
    list-style: none;
    align-items: center;
}

.nav-item[b-63xxvwj8dp] {
    position: relative;
    margin: 0 0.5rem;
}

.nav-link[b-63xxvwj8dp] {
    display: flex;
    align-items: center;
    padding: 0.8rem 1.5rem;
    color: white;
    font-weight: 500;
    border-radius: 25px;
    transition: var(--transition);
    position: relative;

    /* คงค่านี้ไว้สำหรับการจัดตำแหน่ง dropdown-arrow */
}

.nav-link:hover[b-63xxvwj8dp],
.nav-link.active[b-63xxvwj8dp] {
    background: linear-gradient(135deg, #f1c40f, #f39c12);
    color: #333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(241, 196, 15, 0.3);
}

.nav-link i[b-63xxvwj8dp] {
    margin-right: 0.5rem;
    font-size: 1rem;
}

.dropdown-arrow[b-63xxvwj8dp] {
    margin-left: auto;
    /* ผลักลูกศรไปทางขวา */
    transition: transform 0.3s ease;
}

.dropdown-arrow.rotate[b-63xxvwj8dp] {
    transform: rotate(180deg);
}

/* === Dropdown Menu (พฤติกรรมเริ่มต้น/Desktop) === */
.dropdown-menu[b-63xxvwj8dp] {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    min-width: 220px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    /* สถานะเริ่มต้นที่ซ่อนสำหรับ Desktop (เมื่อไม่ได้ hover/คลิก) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition);
    z-index: 1100;
    margin-top: 0.5rem;
}

/* Desktop: แสดงเมื่อ Hover (สไตล์เดิมของคุณ) */
.nav-item:hover .dropdown-menu[b-63xxvwj8dp] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* **สำคัญ**: คลาส "show" นี้จะควบคุมการแสดงผลบน Desktop เมื่อ Blazor เปิดเมนู */
/* มันจะ override สไตล์ opacity/visibility/transform ของการซ่อนเริ่มต้น */
.dropdown-menu.show[b-63xxvwj8dp] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


.dropdown-item[b-63xxvwj8dp] {
    display: block;
    padding: 1rem 1.5rem;
    color: var(--text-color);
    font-weight: 500;
    transition: var(--transition);
    border-bottom: 1px solid #f0f0f0;
}

.dropdown-item:first-child[b-63xxvwj8dp] {
    border-radius: 15px 15px 0 0;
}

.dropdown-item:last-child[b-63xxvwj8dp] {
    border-bottom: none;
    border-radius: 0 0 15px 15px;
}

.dropdown-item:hover[b-63xxvwj8dp] {
    background-color: var(--light-bg);
    color: var(--primary-color);
    padding-left: 2rem;
}

.dropdown-item i[b-63xxvwj8dp] {
    margin-right: 0.8rem;
    color: var(--primary-color);
    width: 16px;
}

/* --- Mobile Menu Overlay/Dropdown (Overrides สำหรับหน้าจอขนาดเล็ก) --- */
@media (max-width: 992px) {
    .main-nav[b-63xxvwj8dp] {
        display: none;
        position: absolute;
        top: 100%;
        /* จะเริ่มต้นที่ใต้ Header */
        left: 0;
        right: 0;
        background: var(--primary-dark);
        flex-direction: column;
        padding: 1rem 0;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        z-index: 999;

        /* **สำคัญ: เพิ่มกฎเหล่านี้สำหรับ main-nav ใน Mobile** */
        /* ทำให้ main-nav มีความสูงที่สามารถเลื่อนได้ */
        height: calc(100vh - var(--header-height, 60px));
        /* ปรับค่า --header-height ตามความสูงจริงของ Header ของคุณ */
        /* ตัวอย่าง: ถ้า Header สูง 60px */
        overflow-y: auto;
        /* ทำให้ main-nav เลื่อนได้หากเนื้อหาทั้งหมดเกินความสูง */
        -webkit-overflow-scrolling: touch;
        /* เพื่อการเลื่อนที่ลื่นไหลบน iOS */
    }

    .main-nav.active[b-63xxvwj8dp] {
        display: flex;
        /* แสดงเมนูนำทางหลักบนมือถือ */
    }

    .nav-item[b-63xxvwj8dp] {
        margin: 0.5rem 0;
        width: 100%;
        position: relative;
    }

    .nav-link[b-63xxvwj8dp] {
        justify-content: center;
        margin: 0 1rem;
    }

    /* **การเปลี่ยนแปลงที่สำคัญสำหรับ Mobile Dropdown** */
    .dropdown-menu[b-63xxvwj8dp] {
        position: static;
        box-shadow: none;
        background: rgba(0, 0, 0, 0.5);
        transform: none;
        margin-top: 0;
        border-radius: 10px;
        margin: 0.5rem 1rem;

        /* คุณสมบัติสำหรับ Animation บนมือถือ */
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        transition: max-height 0.3s ease-out, opacity 0.3s ease-out;

        /* **สำคัญ**: ต้องให้ overflow-y เป็น hidden ในสถานะซ่อน */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        /* เพื่อการเลื่อนที่ลื่นไหลบน iOS */
    }

    /* **สำคัญ**: Mobile: แสดง dropdown เมื่อมีคลาส `.show` */
    .dropdown-menu.show[b-63xxvwj8dp] {
        max-height: 800px;
        /* หรือ 1000px, 1200px ขึ้นอยู่กับจำนวนรายการ */
        /* ลองใช้ค่าที่มากกว่าความสูงรวมของรายการเมนูทั้งหมด */

        opacity: 1;
        visibility: visible;

        /* **สำคัญ**: ต้องให้ overflow-y เป็น auto ในสถานะแสดง */
        overflow-y: auto;
        /* เมื่อแสดง ให้สามารถเลื่อนได้เฉพาะแนวตั้ง */
    }

    .dropdown-item[b-63xxvwj8dp] {
        color: white;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .dropdown-item:hover[b-63xxvwj8dp] {
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
    }

    /* **แก้ไขตรงนี้**: ลบกฎ .nav-link span { display: none; } ออก */
    /* เพื่อให้ข้อความของเมนูหลักยังคงแสดงบนมือถือ */

    /* กฎนี้ยังคงอยู่ เพื่อซ่อนข้อความ "จัดการระบบ" ของ Admin บนมือถือ */
    .nav-link .d-none.d-md-inline[b-63xxvwj8dp] {
        display: none !important;
    }

    /* ถ้ามีคลาสที่แสดงเฉพาะบนมือถือ ก็ยังคงให้แสดง */
    .nav-link .d-md-none[b-63xxvwj8dp] {
        display: inline-block !important;
    }
}
/* /Pages/admin/AdminApprove.razor.rz.scp.css */
/* --- Admin Page Layout --- */
.admin-page-container[b-6wqbe96x2p] {
    padding: 20px;
    max-width: 1200px; /* กำหนดความกว้างสูงสุด */
    margin: 0 auto; /* จัดกึ่งกลาง */
}

.page-title[b-6wqbe96x2p] {
    font-size: 2.2em;
    color: #343a40;
    margin-bottom: 25px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
}

/* --- Filter Controls & Search Bar --- */
.filter-controls[b-6wqbe96x2p] {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
}

.form-label[b-6wqbe96x2p] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 5px;
    display: block;
}

/* Custom styles for select and input */
.form-select-modern[b-6wqbe96x2p],
.form-control-modern[b-6wqbe96x2p] {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-select-modern:focus[b-6wqbe96x2p],
.form-control-modern:focus[b-6wqbe96x2p] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-select-modern[b-6wqbe96x2p] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}


/* --- Loading and Empty States --- */
.loading-full-page[b-6wqbe96x2p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #6c757d;
}

.loading-full-page .spinner-border[b-6wqbe96x2p] {
    width: 3rem;
    height: 3rem;
    margin-bottom: 15px;
}

.loading-overlay-inline[b-6wqbe96x2p] { /* สำหรับในตาราง */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    color: #6c757d;
}

.loading-overlay-inline .spinner-border[b-6wqbe96x2p] {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 10px;
}

.alert-info-custom[b-6wqbe96x2p] {
    background-color: #eaf6ff;
    color: #0c5460;
    border: 1px solid #bce2f4;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    margin-top: 20px;
}


/* --- SharedTable Overrides & Customizations --- */
.shared-table-container[b-6wqbe96x2p] { /* Assuming SharedTable has this class */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden; /* For rounded corners */
}

.shared-table-header[b-6wqbe96x2p] { /* Adjust based on your SharedTable's internal structure */
    background-color: #f0f2f5;
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.shared-table-title[b-6wqbe96x2p] {
    font-size: 1.5em;
    color: #343a40;
    margin-bottom: 5px;
}

.shared-table-subtitle[b-6wqbe96x2p] {
    font-size: 0.9em;
    color: #6c757d;
}

.shared-table table[b-6wqbe96x2p] {
    width: 100%;
    border-collapse: collapse;
}

.shared-table th[b-6wqbe96x2p],
.shared-table td[b-6wqbe96x2p] {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
}

.shared-table th[b-6wqbe96x2p] {
    background-color: #e9ecef;
    font-weight: 600;
    color: #495057;
    text-transform: uppercase;
    font-size: 0.85em;
}

/* Table Row Styling */
.shared-table tbody tr:hover[b-6wqbe96x2p] {
    background-color: #f5f5f5;
}

.shared-table tbody tr.processing-row[b-6wqbe96x2p] {
    background-color: #e6f7ff; /* Light blue background when processing */
    opacity: 0.8;
    pointer-events: none; /* Disable clicks during processing */
}

/* Status Badges */
.status-badge[b-6wqbe96x2p] {
    display: inline-block;
    padding: 0.3em 0.8em;
    border-radius: 0.375rem;
    font-size: 0.8em;
    font-weight: 600;
    color: #fff;
    text-align: center;
}

.status-approved[b-6wqbe96x2p] {
    background-color: #28a745; /* Green */
}

.status-pending[b-6wqbe96x2p] {
    background-color: #ffc107; /* Yellow */
    color: #343a40; /* Darker text for yellow background */
}

/* --- Action Buttons --- */
.actions-col[b-6wqbe96x2p] {
    width: 250px; /* กำหนดความกว้างของคอลัมน์ Action */
    white-space: nowrap; /* ป้องกันไม่ให้ปุ่มขึ้นบรรทัดใหม่ */
}

.btn-action[b-6wqbe96x2p] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin: 0 2px; /* ระยะห่างระหว่างปุ่ม */
    border: none;
    color: #fff;
}

.approve-btn[b-6wqbe96x2p] {
    background-color: #28a745; /* Green */
}
.approve-btn:hover[b-6wqbe96x2p] {
    background-color: #218838;
}

.reject-btn[b-6wqbe96x2p] {
    background-color: #ffc107; /* Yellow */
    color: #343a40;
}
.reject-btn:hover[b-6wqbe96x2p] {
    background-color: #e0a800;
}

.reset-password-btn[b-6wqbe96x2p] {
    background-color: #007bff; /* Blue */
}
.reset-password-btn:hover[b-6wqbe96x2p] {
    background-color: #0069d9;
}

.delete-btn[b-6wqbe96x2p] {
    background-color: #dc3545; /* Red */
}
.delete-btn:hover[b-6wqbe96x2p] {
    background-color: #c82333;
}

/* Custom Search & Clear Buttons */
.btn-primary-custom[b-6wqbe96x2p],
.btn-secondary-custom[b-6wqbe96x2p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
}

.btn-primary-custom[b-6wqbe96x2p] {
    background-color: #0d6efd;
    color: #fff;
}
.btn-primary-custom:hover[b-6wqbe96x2p] {
    background-color: #0a58ca;
}

.btn-secondary-custom[b-6wqbe96x2p] {
    background-color: #6c757d;
    color: #fff;
}
.btn-secondary-custom:hover[b-6wqbe96x2p] {
    background-color: #5c636a;
}

.btn-primary-custom i[b-6wqbe96x2p],
.btn-secondary-custom i[b-6wqbe96x2p] {
    margin-right: 8px;
}


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .admin-page-container[b-6wqbe96x2p] {
        padding: 15px;
    }

    .page-title[b-6wqbe96x2p] {
        font-size: 1.8em;
        margin-bottom: 20px;
    }

    .filter-controls .row > div[b-6wqbe96x2p] {
        margin-bottom: 15px; /* เพิ่มระยะห่างระหว่าง elements บนมือถือ */
    }

    .filter-controls .row > div:last-child[b-6wqbe96x2p] {
        margin-bottom: 0;
    }

    .filter-controls .col-md-3.col-lg-3[b-6wqbe96x2p] { /* For search and clear buttons */
        display: flex;
        justify-content: flex-start; /* จัดเรียงปุ่มให้ชิดซ้าย */
        gap: 10px; /* ระยะห่างระหว่างปุ่ม */
    }
    
    .btn-primary-custom[b-6wqbe96x2p],
    .btn-secondary-custom[b-6wqbe96x2p] {
        flex: 1; /* ทำให้ปุ่มขยายเต็มความกว้าง */
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }

    /* Table responsive styling (make it stack) */
    .shared-table table[b-6wqbe96x2p],
    .shared-table thead[b-6wqbe96x2p],
    .shared-table tbody[b-6wqbe96x2p],
    .shared-table th[b-6wqbe96x2p],
    .shared-table td[b-6wqbe96x2p],
    .shared-table tr[b-6wqbe96x2p] {
        display: block;
    }

    .shared-table thead tr[b-6wqbe96x2p] {
        position: absolute;
        top: -9999px; /* Hide table headers */
        left: -9999px;
    }

    .shared-table tr[b-6wqbe96x2p] {
        border: 1px solid #e9ecef;
        margin-bottom: 15px;
        border-radius: 8px;
        overflow: hidden;
    }

    .shared-table td[b-6wqbe96x2p] {
        border: none; /* Remove individual cell borders */
        position: relative;
        padding-left: 50%; /* Space for data-label */
        text-align: right;
    }

    .shared-table td[b-6wqbe96x2p]:before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        width: calc(50% - 30px);
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: 600;
        color: #495057;
    }

    .shared-table .actions-col[b-6wqbe96x2p] {
        width: auto; /* Reset width */
        text-align: center; /* Center actions */
        display: flex;
        flex-wrap: wrap; /* Wrap buttons if needed */
        justify-content: center; /* Center buttons */
        padding-top: 15px;
        padding-bottom: 15px;
        background-color: #f0f2f5; /* Background for actions row */
        border-top: 1px solid #e9ecef;
    }
    
    .btn-action[b-6wqbe96x2p] {
        margin: 5px; /* Adjust margin for wrapped buttons */
    }
}

@media (max-width: 576px) {
    .shared-table td[b-6wqbe96x2p] {
        padding-left: 40%;
    }
    .shared-table td[b-6wqbe96x2p]:before {
        width: calc(40% - 30px);
    }
}
/* /Pages/admin/AppConfigManagement.razor.rz.scp.css */
/* AppConfigManagement.razor scoped styles */

/* Modal Styles - Prefixed for uniqueness */
.appconfig-modal[b-uavknmv9b1] {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1050;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

.appconfig-modal.show[b-uavknmv9b1] {
    display: block;
}

.appconfig-modal-dialog[b-uavknmv9b1] {
    margin: 1.75rem auto;
    max-width: 500px;
    position: relative;
    pointer-events: none;
}

.appconfig-modal-content[b-uavknmv9b1] {
    background-color: #fefefe;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .3rem;
    outline: 0;
    pointer-events: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: #333;
    /* Darker text */
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

.appconfig-modal-header[b-uavknmv9b1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(.3rem - 1px);
    border-top-right-radius: calc(.3rem - 1px);
}

.appconfig-modal-title[b-uavknmv9b1] {
    margin-bottom: 0;
    line-height: 1.5;
}

.appconfig-modal-body[b-uavknmv9b1] {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}

.appconfig-modal-footer[b-uavknmv9b1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: .75rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: calc(.3rem - 1px);
    border-bottom-left-radius: calc(.3rem - 1px);
}

.appconfig-modal-backdrop[b-uavknmv9b1] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    opacity: .5;
}

/* Close button for modal */
.appconfig-modal-header .appconfig-modal-close[b-uavknmv9b1] {
    /* Changed class here */
    padding: 1rem 1rem;
    margin: -1rem -1rem -1rem auto;
    background-color: transparent;
    border: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

.appconfig-modal-header .appconfig-modal-close:hover[b-uavknmv9b1] {
    /* Changed class here */
    opacity: .75;
}
/* /Pages/Announcement/AnnouncementDetails.razor.rz.scp.css */
/* --- สไตล์ทั่วไปสำหรับหน้าแสดงรายละเอียดข่าวสาร (สามารถใช้จาก Bootstrap ได้) --- */
.container[b-wjwpi6p634] {
    max-width: 960px; /* กำหนดความกว้างสูงสุดของเนื้อหาบน Desktop */
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px; /* เพิ่ม padding ด้านข้าง */
}

/* คุณสามารถปรับแต่ง .card และ .card-body ได้ตามต้องการ */
.card[b-wjwpi6p634] {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card-body[b-wjwpi6p634] {
    padding: 30px;
}

.card-title[b-wjwpi6p634] {
    font-size: 2.2em; /* ขนาดใหญ่ขึ้น */
    color: #0056b3; /* สีน้ำเงินเข้ม */
    margin-bottom: 15px;
}

.card-subtitle[b-wjwpi6p634] {
    font-size: 0.9em;
    color: #6c757d;
    margin-bottom: 20px;
}

hr[b-wjwpi6p634] {
    border: none;
    border-top: 1px solid #eee;
    margin-top: 25px;
    margin-bottom: 25px;
}

/* --- สไตล์สำหรับเนื้อหาจาก Summernote (#announcementContent) --- */
#announcementContent[b-wjwpi6p634] {
    line-height: 1.7; /* ระยะห่างบรรทัด */
    font-size: 1.1em; /* ขนาดตัวอักษรเนื้อหา */
    color: #333;
}

#announcementContent p[b-wjwpi6p634] {
    margin-bottom: 1em; /* ระยะห่างระหว่างย่อหน้า */
}

#announcementContent h1[b-wjwpi6p634],
#announcementContent h2[b-wjwpi6p634],
#announcementContent h3[b-wjwpi6p634],
#announcementContent h4[b-wjwpi6p634],
#announcementContent h5[b-wjwpi6p634],
#announcementContent h6[b-wjwpi6p634] {
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    color: #212529;
}

#announcementContent ul[b-wjwpi6p634],
#announcementContent ol[b-wjwpi6p634] {
    margin-left: 20px;
    margin-bottom: 1em;
}

#announcementContent a[b-wjwpi6p634] {
    color: #007bff;
    text-decoration: underline;
}

/* สไตล์สำหรับรูปภาพที่แทรกในเนื้อหา (#announcementContent img) */
#announcementContent img[b-wjwpi6p634] {
    max-width: 100%;    /* สำคัญมาก: รูปภาพจะไม่เกินขอบ Container */
    height: auto;       /* รักษาสัดส่วน */
    display: block;     /* ทำให้รูปภาพอยู่คนละบรรทัด */
    margin: 20px auto;  /* จัดให้อยู่กึ่งกลางและมีระยะห่างบนล่าง */
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#announcementContent img:hover[b-wjwpi6p634] {
    transform: scale(1.01);
    transition: transform 0.3s ease;
}

/* --- สไตล์สำหรับพื้นที่แสดงรูปภาพหลัก (.main-image-display-area) --- */
.main-image-display-area[b-wjwpi6p634] {
    width: 100%;
    max-width: 700px; /* กำหนดความกว้างสูงสุดของพื้นที่แสดงรูปภาพหลัก */
    height: auto;
    margin: 20px auto;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
    display: flex; /* ใช้ Flexbox เพื่อจัดกึ่งกลางรูปภาพภายใน */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* ป้องกันรูปภาพเกินขอบถ้ามี border-radius */
    background-color: #fff; /* พื้นหลังสีขาว */
    min-height: 400px; /* กำหนดความสูงขั้นต่ำเพื่อรักษาสัดส่วนพื้นที่ */
}

.main-image-display-area img[b-wjwpi6p634] {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain; /* รักษาสัดส่วนและพอดีกับ Container */
}

.no-main-image-placeholder[b-wjwpi6p634] {
    color: #aaa;
    font-style: italic;
    text-align: center;
    padding: 50px;
}

/* --- สไตล์สำหรับ Thumbnail Gallery (.thumbnail-gallery-area) --- */
.thumbnail-gallery-area[b-wjwpi6p634] {
    display: flex; /* ใช้ Flexbox เพื่อจัดเรียง Thumbnail */
    justify-content: center; /* จัดกึ่งกลาง Thumbnail */
    align-items: center;
    flex-wrap: wrap; /* ให้ขึ้นบรรทัดใหม่ได้ถ้าหน้าจอเล็ก */
    gap: 12px; /* ระยะห่างระหว่าง Thumbnail */
    margin-top: 25px;
    margin-bottom: 30px;
}

.thumbnail-item[b-wjwpi6p634] {
    width: 90px; /* ขนาดของแต่ละ Thumbnail */
    height: 90px;
    border: 2px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer; /* แสดงว่าสามารถคลิกได้ */
    transition: all 0.25s ease-in-out;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    display: flex; /* จัดรูปภาพ Thumbnail ให้อยู่กึ่งกลาง */
    justify-content: center;
    align-items: center;
    background-color: #f8f8f8;
}

.thumbnail-item img[b-wjwpi6p634] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* รักษาสัดส่วนและพอดีกับกรอบ Thumbnail */
    display: block;
}

.thumbnail-item:hover[b-wjwpi6p634] {
    border-color: #007bff; /* สีขอบเมื่อ hover */
    transform: translateY(-3px); /* เลื่อนขึ้นเล็กน้อย */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.thumbnail-item.active[b-wjwpi6p634] {
    border-color: #007bff; /* สีขอบสำหรับรูปภาพที่เลือกอยู่ */
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.4); /* เรืองแสงรอบขอบ */
    transform: scale(1.08); /* ขยายเล็กน้อยเมื่อ active */
}

/* --- สไตล์สำหรับปุ่มกลับ (.btn) (สามารถใช้จาก Bootstrap ได้ หรือ override) --- */
.btn-secondary[b-wjwpi6p634] {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-secondary:hover[b-wjwpi6p634] {
    background-color: #5a6268;
    border-color: #545b62;
}

/* --- Responsive Adjustments (ปรับแต่งสำหรับมือถือ) --- */
@media (max-width: 767.98px) { /* สำหรับหน้าจอขนาดเล็กกว่า 768px (มือถือและแท็บเล็ตแนวตั้ง) */
    .card-body[b-wjwpi6p634] {
        padding: 20px; /* ลด padding บนมือถือ */
    }

    .card-title[b-wjwpi6p634] {
        font-size: 1.8em; /* ลดขนาดหัวข้อ */
    }

    #announcementContent[b-wjwpi6p634] {
        font-size: 1em; /* ลดขนาดตัวอักษรเนื้อหา */
    }

    #announcementContent img[b-wjwpi6p634] {
        margin: 15px auto; /* ลดระยะห่างบนล่างของรูปภาพในเนื้อหา */
    }

    .main-image-display-area[b-wjwpi6p634] {
        min-height: 280px; /* ลดความสูงขั้นต่ำบนมือถือ */
        margin: 15px auto;
    }

    .thumbnail-gallery-area[b-wjwpi6p634] {
        gap: 8px;
        margin-top: 15px;
        margin-bottom: 20px;
    }

    .thumbnail-item[b-wjwpi6p634] {
        width: 70px; /* เล็กขึ้นบนมือถือ */
        height: 70px;
    }

    .btn[b-wjwpi6p634] {
        width: 100%; /* ทำให้ปุ่มเต็มความกว้างบนมือถือ */
        margin-top: 20px;
    }
}

@media (max-width: 575.98px) { /* สำหรับหน้าจอขนาดเล็กกว่า 576px (มือถือจอเล็ก) */
    .container[b-wjwpi6p634] {
        padding: 0 10px;
    }
}
/* /Pages/Announcement/AnnouncementManagement.razor.rz.scp.css */
/* --- Base Modal Structure --- */
.my-custom-modal[b-eqa40nk6yc] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Backdrop color */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
    display: flex; /* ใช้ flex เพื่อจัดกึ่งกลางเนื้อหา Modal */
    align-items: center; /* จัดกึ่งกลางแนวตั้ง */
    justify-content: center; /* จัดกึ่งกลางแนวนอน */
}

.my-custom-modal.is-visible[b-eqa40nk6yc] {
    opacity: 1;
    visibility: visible;
    /* display: flex;  ไม่ต้อง override ถ้า default เป็น flex อยู่แล้ว */
}

.my-custom-modal-content[b-eqa40nk6yc] { /* ใช้แทน .modal-content */
    position: relative;
    background-color: #fff;
    border-radius: 0.3rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
    width: 90%; /* Default width */
    max-width: 800px; /* Max width for larger screens */
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 3.5rem);
    animation: slideIn-b-eqa40nk6yc 0.3s ease-out; /* เพิ่ม animation */
}

@keyframes slideIn-b-eqa40nk6yc {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Modal Responsive */
@media (max-width: 767.98px) {
    .my-custom-modal-content[b-eqa40nk6yc] {
        width: 95%;
        margin: 1rem auto;
        max-height: calc(100vh - 2rem);
    }
}
@media (max-width: 575.98px) {
    .my-custom-modal-content[b-eqa40nk6yc] {
        width: 100%;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
    }
}

/* --- Modal Sections --- */
.modal-header-custom[b-eqa40nk6yc] { /* Mimic Bootstrap's .modal-header */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1rem;
    border-bottom: 1px solid #e9ecef;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
}
.modal-title-custom[b-eqa40nk6yc] { /* Mimic Bootstrap's .modal-title */
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 1.25rem;
    font-weight: 500;
}
.btn-close-custom[b-eqa40nk6yc] { /* Mimic Bootstrap's .btn-close */
    padding: 0.5rem;
    margin: -0.5rem -0.5rem -0.5rem auto;
    background-color: transparent;
    border: 0;
    opacity: 0.5;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    color: #000;
}
.btn-close-custom:hover[b-eqa40nk6yc] { opacity: 0.75; }

.modal-body-custom[b-eqa40nk6yc] { /* Mimic Bootstrap's .modal-body */
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
    overflow-y: auto;
}

.modal-footer-custom[b-eqa40nk6yc] { /* Mimic Bootstrap's .modal-footer */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 0.75rem;
    border-top: 1px solid #e9ecef;
    border-bottom-right-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
    gap: 0.5rem;
}

/* --- Form Elements --- */
.mb-custom-3[b-eqa40nk6yc] { /* Mimic Bootstrap's .mb-3 */
    margin-bottom: 1rem;
}
.form-label-custom[b-eqa40nk6yc] { /* Mimic Bootstrap's .form-label */
    display: inline-block;
    margin-bottom: 0.5rem;
}
.form-control-custom[b-eqa40nk6yc] { /* Mimic Bootstrap's .form-control */
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control-custom:focus[b-eqa40nk6yc] {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-check-custom[b-eqa40nk6yc] { /* Mimic Bootstrap's .form-check */
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: 0.125rem;
}
.form-check-input-custom[b-eqa40nk6yc] { /* Mimic Bootstrap's .form-check-input */
    float: left;
    margin-left: -1.5em;
    width: 1em;
    height: 1em;
    margin-top: 0.25em;
    vertical-align: top;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.25);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25em;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-check-input-custom:checked[b-eqa40nk6yc] {
    background-color: #0d6efd;
    border-color: #0d6efd;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.form-check-label-custom[b-eqa40nk6yc] { /* เพิ่มถ้าต้องการ */
    margin-bottom: 0;
}

.validation-message-custom[b-eqa40nk6yc] {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
}

/* --- Buttons --- */
.btn-custom[b-eqa40nk6yc] {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-primary-custom[b-eqa40nk6yc] { color: #fff; background-color: #0d6efd; border-color: #0d6efd; }
.btn-primary-custom:hover[b-eqa40nk6yc] { color: #fff; background-color: #0b5ed7; border-color: #0a58ca; }
.btn-secondary-custom[b-eqa40nk6yc] { color: #fff; background-color: #6c757d; border-color: #6c757d; }
.btn-secondary-custom:hover[b-eqa40nk6yc] { color: #fff; background-color: #5c636a; border-color: #565e64; }
.btn-danger-custom[b-eqa40nk6yc] { color: #fff; background-color: #dc3545; border-color: #dc3545; }
.btn-danger-custom:hover[b-eqa40nk6yc] { color: #fff; background-color: #bb2d3b; border-color: #b02a37; }
.btn-warning-custom[b-eqa40nk6yc] { color: #000; background-color: #ffc107; border-color: #ffc107; }
.btn-warning-custom:hover[b-eqa40nk6yc] { color: #000; background-color: #ffca2c; border-color: #ffc720; }
.btn-sm-custom[b-eqa40nk6yc] { padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.2rem; }


/* --- Image Preview Section --- */
.existing-images-preview-custom[b-eqa40nk6yc] { margin-bottom: 1rem; }
.image-preview-item-custom[b-eqa40nk6yc] {
    border: 1px solid #dee2e6;
    padding: 0.25rem;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}
.img-thumbnail-custom[b-eqa40nk6yc] { /* Mimic Bootstrap's .img-thumbnail */
    max-width: 100px;
    max-height: 100px;
    object-fit: cover;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 0.25rem;
}

/* --- Position Utilities --- */
.position-relative-custom[b-eqa40nk6yc] { position: relative; }
.position-absolute-custom[b-eqa40nk6yc] { position: absolute; }
.top-0-custom[b-eqa40nk6yc] { top: 0; }
.end-0-custom[b-eqa40nk6yc] { right: 0; }
.rounded-circle-custom[b-eqa40nk6yc] { border-radius: 50% !important; }
.p-0-custom[b-eqa40nk6yc] { padding: 0 !important; }

/* --- Text & Spacing Utilities --- */
.d-flex-custom[b-eqa40nk6yc] { display: flex; }
.align-items-center-custom[b-eqa40nk6yc] { align-items: center; }
.me-custom-2[b-eqa40nk6yc] { margin-right: 0.5rem; }
.mb-custom-0[b-eqa40nk6yc] { margin-bottom: 0 !important; }
.mt-custom-2[b-eqa40nk6yc] { margin-top: 0.5rem; }
.text-danger-custom[b-eqa40nk6yc] { color: #dc3545 !important; }
.text-center-custom[b-eqa40nk6yc] { text-align: center; }

/* Table specific custom classes */
.modern-table[b-eqa40nk6yc] {
    width: 100%;
    margin-top: 1rem;
    border-collapse: collapse;
}
.modern-table th[b-eqa40nk6yc], .modern-table td[b-eqa40nk6yc] {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}
.modern-table th[b-eqa40nk6yc] {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
}
.modern-table tbody tr:hover[b-eqa40nk6yc] {
    background-color: #f2f2f2;
}
.modern-table .actions button[b-eqa40nk6yc] {
    margin-right: 0.25rem;
}
.processing-row[b-eqa40nk6yc] {
    background-color: #e6f7ff !important; /* Light blue for processing row */
    opacity: 0.7;
}
.spinner-border-custom[b-eqa40nk6yc] { /* Mimic Bootstrap spinner */
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: -0.125em;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: .75s linear infinite spinner-border-b-eqa40nk6yc;
}
@keyframes spinner-border-b-eqa40nk6yc {
  to { transform: rotate(360deg); }
}
.spinner-border-sm-custom[b-eqa40nk6yc] {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}
.text-primary-custom[b-eqa40nk6yc] { color: #0d6efd !important; }
.badge-custom[b-eqa40nk6yc] {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}
.bg-info-custom[b-eqa40nk6yc] { background-color: #0dcaf0 !important; }
.bg-secondary-custom[b-eqa40nk6yc] { background-color: #6c757d !important; }
/* /Pages/Dashboard/Dashboard.razor.rz.scp.css */
 .dashboard-container[b-mfzjr2ish2] {
     min-height: 100vh;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     padding-bottom: 2rem;
 }

 .dashboard-header[b-mfzjr2ish2] {
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
     padding: 1.5rem 0;
     margin-bottom: 2rem;
 }

 .header-content[b-mfzjr2ish2] {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 2rem;
 }

 .logo-section[b-mfzjr2ish2] {
     display: flex;
     align-items: center;
     gap: 1rem;
 }

 .logo[b-mfzjr2ish2] {
     font-size: 2.5rem;
     font-weight: 700;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin: 0;
 }

 .subtitle[b-mfzjr2ish2] {
     font-size: 1.25rem;
     color: #6b7280;
     font-weight: 500;
 }

 .categories-section[b-mfzjr2ish2] {
     max-width: 1400px;
     margin: 0 auto 3rem auto;
     padding: 0 2rem;
 }

 .categories-grid[b-mfzjr2ish2] {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     gap: 1.5rem;
     margin-bottom: 2rem;
 }

 @media (min-width: 1280px) {
     .categories-grid[b-mfzjr2ish2] {
         grid-template-columns: repeat(6, 1fr);
     }
 }

 .category-item[b-mfzjr2ish2] {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     cursor: pointer;
     transition: all 0.3s ease;
     padding: 1rem;
     border-radius: 16px;
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
 }

 .category-item:hover[b-mfzjr2ish2] {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.2);
 }

 .icon-circle[b-mfzjr2ish2] {
     width: 4rem;
     height: 4rem;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 0.75rem;
     transition: all 0.3s ease;
     font-size: 1.5rem;
 }

 .icon-circle.active[b-mfzjr2ish2] {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
 }

 .icon-circle.inactive[b-mfzjr2ish2] {
     background: rgba(255, 255, 255, 0.9);
     color: #667eea;
 }

 .category-title[b-mfzjr2ish2] {
     font-size: 0.8rem;
     font-weight: 500;
     line-height: 1.2;
     max-width: 7rem;
     color: white;
 }

 .title-active[b-mfzjr2ish2] {
     color: white;
     font-weight: 600;
 }

 .title-inactive[b-mfzjr2ish2] {
     color: rgba(255, 255, 255, 0.8);
 }

 .summary-section[b-mfzjr2ish2] {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 2rem;
 }

 .section-title[b-mfzjr2ish2] {
     font-size: 2rem;
     font-weight: 700;
     color: white;
     margin-bottom: 2rem;
     text-align: center;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 .loading-container[b-mfzjr2ish2] {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 3rem;
 }

 .loading-spinner[b-mfzjr2ish2] {
     width: 40px;
     height: 40px;
     border: 4px solid rgba(255, 255, 255, 0.3);
     border-left: 4px solid white;
     border-radius: 50%;
     animation: spin-b-mfzjr2ish2 1s linear infinite;
     margin-bottom: 1rem;
 }

 @keyframes spin-b-mfzjr2ish2 {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .loading-text[b-mfzjr2ish2] {
     color: rgba(255, 255, 255, 0.8);
     font-style: italic;
 }

 .dashboard-grid[b-mfzjr2ish2] {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 1.5rem;
     margin-bottom: 3rem;
 }

 .modern-card[b-mfzjr2ish2] {
     background: white;
     border-radius: 20px;
     padding: 1.5rem;
     position: relative;
     overflow: hidden;
     transition: all 0.3s ease;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 .modern-card:hover[b-mfzjr2ish2] {
     transform: translateY(-5px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }

 .card-purple[b-mfzjr2ish2] {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
 }

 .card-pink[b-mfzjr2ish2] {
     background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
     color: white;
 }

 .card-blue[b-mfzjr2ish2] {
     background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
     color: white;
 }

 .card-green[b-mfzjr2ish2] {
     background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
     color: white;
 }

 .card-orange[b-mfzjr2ish2] {
     background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
     color: white;
 }

 .card-teal[b-mfzjr2ish2] {
     background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
     color: #333;
 }

 .card-icon-wrapper[b-mfzjr2ish2] {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 1rem;
 }

 .card-icon-bg[b-mfzjr2ish2] {
     width: 50px;
     height: 50px;
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.2);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.25rem;
 }

 .card-teal .card-icon-bg[b-mfzjr2ish2] {
     background: rgba(0, 0, 0, 0.1);
 }

 .growth-indicator[b-mfzjr2ish2] {
     background: rgba(255, 255, 255, 0.2);
     padding: 0.25rem 0.5rem;
     border-radius: 12px;
     font-size: 0.75rem;
     font-weight: 600;
 }

 .card-teal .growth-indicator[b-mfzjr2ish2] {
     background: rgba(0, 0, 0, 0.1);
 }

 .card-number[b-mfzjr2ish2] {
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 0.5rem;
     line-height: 1;
 }

 .card-label[b-mfzjr2ish2] {
     font-size: 0.9rem;
     opacity: 0.9;
     font-weight: 500;
 }

 .analytics-section[b-mfzjr2ish2] {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
     gap: 2rem;
     margin-top: 2rem;
 }

 .analytics-card[b-mfzjr2ish2] {
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     border-radius: 20px;
     padding: 1.5rem;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 .analytics-header[b-mfzjr2ish2] {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 1.5rem;
     padding-bottom: 1rem;
     border-bottom: 1px solid #e5e7eb;
 }

 .analytics-header h4[b-mfzjr2ish2] {
     margin: 0;
     font-size: 1.25rem;
     font-weight: 600;
     color: #1f2937;
 }

 .analytics-header i[b-mfzjr2ish2] {
     color: #667eea;
     font-size: 1.25rem;
 }

 .category-analytics[b-mfzjr2ish2] {
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }

 .category-bar-item[b-mfzjr2ish2] {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
 }

 .category-info[b-mfzjr2ish2] {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .category-name[b-mfzjr2ish2] {
     font-size: 0.875rem;
     color: #374151;
     font-weight: 500;
 }

 .category-count[b-mfzjr2ish2] {
     font-weight: 700;
     color: #667eea;
     background: rgba(102, 126, 234, 0.1);
     padding: 0.25rem 0.75rem;
     border-radius: 12px;
     font-size: 0.75rem;
 }

 .progress-bar[b-mfzjr2ish2] {
     width: 100%;
     height: 6px;
     background: #e5e7eb;
     border-radius: 3px;
     overflow: hidden;
 }

 .progress-fill[b-mfzjr2ish2] {
     height: 100%;
     background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
     border-radius: 3px;
     transition: width 0.5s ease;
 }

 .category-detail-section[b-mfzjr2ish2] {
     max-width: 1400px;
     margin: 2rem auto 0 auto;
     padding: 0 2rem;
 }

 .category-detail-section h3[b-mfzjr2ish2] {
     color: white;
     margin-bottom: 1rem;
     font-size: 1.5rem;
     font-weight: 600;
 }

 .detail-cards[b-mfzjr2ish2] {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 1rem;
 }

 .detail-card[b-mfzjr2ish2] {
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     padding: 1.5rem;
     border-radius: 16px;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
     text-align: center;
     transition: all 0.3s ease;
 }

 .detail-card:hover[b-mfzjr2ish2] {
     transform: translateY(-3px);
     box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
 }

 .detail-card h5[b-mfzjr2ish2] {
     margin: 0 0 0.5rem 0;
     color: #6b7280;
     font-size: 0.875rem;
     font-weight: 500;
 }

 .detail-number[b-mfzjr2ish2] {
     font-size: 2rem;
     font-weight: 700;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin: 0;
 }

 @media (max-width: 768px) {
     .dashboard-grid[b-mfzjr2ish2] {
         grid-template-columns: 1fr;
     }

     .analytics-section[b-mfzjr2ish2] {
         grid-template-columns: 1fr;
     }

     .card-number[b-mfzjr2ish2] {
         font-size: 2rem;
     }
 }
/* /Pages/Experts/Index.razor.rz.scp.css */
.expert-card[b-eva95icqix] {
        height: 100%;
        display: flex;
        flex-direction: column;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        border-radius: 8px;
        overflow: hidden;
    }

    .expert-profile-img1[b-eva95icqix] {
        width: 120px;
        height: 120px;
        object-fit: cover;
        border-bottom: 1px solid #eee;
    }

    .expert-card .card-body[b-eva95icqix] {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .expert-card .card-title[b-eva95icqix] {
        font-size: 1.25rem;
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
    }

    .expert-card .text-muted[b-eva95icqix] {
        font-size: 0.9rem;
        margin-bottom: 10px;
    }

    .expert-card .card-text[b-eva95icqix] {
        font-size: 0.95rem;
        color: #555;
    }

    .biography-snippet[b-eva95icqix] {
        font-style: italic;
        color: #777;
        margin-bottom: 15px;
    }
    /* สำหรับจัดเรียงปุ่มเป็นแนวนอนและอยู่ตรงกลาง */
.pagination[b-eva95icqix] {
    display: flex; /* ทำให้รายการ (li) เรียงเป็นแนวนอน */
    list-style: none; /* ลบจุดนำหน้าลิสต์ */
    padding: 0;      /* ลบ padding เริ่มต้นของ ul */
    margin: 20px 0;  /* เพิ่ม margin ด้านบนและล่าง เพื่อแยกจากเนื้อหาอื่น */
    justify-content: center; /* จัดให้อยู่ตรงกลางแนวนอน */
    align-items: center; /* จัดให้อยู่ตรงกลางแนวตั้ง (ถ้า li มีความสูงไม่เท่ากัน) */
}

/* สำหรับปรับแต่งแต่ละปุ่ม (li) */
.page-item[b-eva95icqix] {
    margin: 0 4px; /* เพิ่มระยะห่างระหว่างแต่ละปุ่ม */
}

/* สำหรับปรับแต่งลิงก์ภายในปุ่ม (a) ให้ดูเป็นปุ่ม */
.page-link[b-eva95icqix] {
    display: block; /* ทำให้ลิงก์ครอบคลุมพื้นที่ทั้งหมดของปุ่ม */
    padding: 8px 12px; /* ขนาดของปุ่ม (สูง x กว้าง) */
    border: 1px solid #dee2e6; /* เส้นขอบของปุ่ม */
    border-radius: 4px; /* ความโค้งมนของมุมปุ่ม */
    color: #0d6efd; /* สีข้อความเริ่มต้น */
    text-decoration: none; /* ลบขีดเส้นใต้ลิงก์ */
    background-color: #fff; /* สีพื้นหลังเริ่มต้น */
    transition: all 0.3s ease; /* เพิ่มอนิเมชันเมื่อมีการเปลี่ยนสถานะ */
}

/* สถานะเมื่อเมาส์ชี้ (Hover) */
.page-link:hover[b-eva95icqix] {
    background-color: #e9ecef; /* สีพื้นหลังเมื่อเมาส์ชี้ */
    border-color: #0d6efd; /* สีขอบเมื่อเมาส์ชี้ */
    color: #0a58ca; /* สีข้อความเมื่อเมาส์ชี้ */
}

/* สถานะปุ่มที่ถูกเลือก (Active) */
.page-item.active .page-link[b-eva95icqix] {
    background-color: #0d6efd; /* สีพื้นหลังเมื่อปุ่ม Active */
    border-color: #0d6efd;     /* สีขอบเมื่อปุ่ม Active */
    color: white;             /* สีข้อความเมื่อปุ่ม Active */
    pointer-events: none;     /* ทำให้คลิกไม่ได้เมื่อเป็น Active */
}

/* สถานะปุ่มที่ไม่สามารถกดได้ (Disabled) */
.page-item.disabled .page-link[b-eva95icqix] {
    color: #6c757d;           /* สีข้อความเมื่อปุ่ม Disabled */
    background-color: #e9ecef; /* สีพื้นหลังเมื่อปุ่ม Disabled */
    border-color: #dee2e6;     /* สีขอบเมื่อปุ่ม Disabled */
    pointer-events: none;     /* ทำให้คลิกไม่ได้ */
    cursor: default;          /* เปลี่ยน cursor เป็น default */
}
/* /Pages/Innovations/InnovationDetails.razor.rz.scp.css */
/* Custom Image Styling */
.my-innovation-image[b-2a2nnbibll] {
    max-width: 100%; /* ทำให้รูปภาพไม่ล้นขอบของ container */
    height: auto;     /* รักษาอัตราส่วนของรูปภาพ */
    display: block;   /* กำจัดช่องว่างที่ไม่จำเป็นด้านล่างรูปภาพ */
    border: 1px solid #dee2e6; /* ขอบแบบ thumbnail */
    border-radius: 0.25rem; /* ทำให้มุมขอบโค้งมนเล็กน้อย */
    padding: 0.25rem; /* มี padding ด้านในขอบ */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* เพิ่มเงาเล็กน้อย */
}

/* คุณสามารถเพิ่ม responsive behavior ได้เอง เช่น */
@media (max-width: 767.98px) {
    .my-innovation-image[b-2a2nnbibll] {
        padding: 0.125rem; 
        border-radius: 0.125rem;
    }
}
/* /Pages/Profile.razor.rz.scp.css */
/* --- Profile Page Specific Styles --- */
.profile-picture-container[b-okwgboe0m1] {
    width: 150px; /* ขนาดของวงกลมรูปโปรไฟล์ */
    height: 150px;
    border-radius: 50%; /* ทำให้เป็นวงกลม */
    overflow: hidden; /* ซ่อนส่วนเกินของรูปภาพ */
    margin: 0 auto 20px auto; /* จัดกึ่งกลางและมีระยะห่างด้านล่าง */
    border: 3px solid #eee; /* ขอบรอบรูป */
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    display: flex; /* เพื่อจัดกึ่งกลางรูปภาพภายใน */
    align-items: center;
    justify-content: center;
}

.profile-picture[b-okwgboe0m1] {
    width: 100%; /* ทำให้รูปภาพเต็มพื้นที่ container */
    height: 100%;
    object-fit: cover; /* ครอบคลุมพื้นที่โดยไม่บิดเบี้ยว */
    display: block;
}

/* ปรับ InputFile ให้ดูดีขึ้น (ถ้าต้องการ) */
.card-body input[type="file"][b-okwgboe0m1] {
    display: block;
    margin: 10px auto;
    width: fit-content;
}
/* /Pages/Project/ProjectDetails.razor.rz.scp.css */
/* Custom CSS for Image Thumbnail Container (Default for larger screens) */
.image-thumbnail-container[b-4y1ti577co] {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    display: inline-block; /* หรือ block ขึ้นอยู่กับการจัดวางใน layout ของคุณ */
    vertical-align: middle; /* เพื่อจัดแนวรูปภาพถ้าอยู่ใน flow ของข้อความ */
}

/* ปรับสไตล์ image-thumbnail-container สำหรับหน้าจอขนาดเล็ก (มือถือ) */
@media (max-width: 767.98px) { /* สำหรับหน้าจอขนาดไม่เกิน 767.98px (ทั่วไปคือมือถือ) */
    .image-thumbnail-container[b-4y1ti577co] {
        padding: 0.125rem; /* ลด padding */
        border-radius: 0.25rem; /* ทำให้มุมมนน้อยลงเล็กน้อย */
        box-shadow: none; /* ลบเงาเพื่อความเรียบง่ายและประสิทธิภาพ */
        /* ถ้าต้องการให้มันเต็มความกว้างในบางกรณี */
        /* width: 100%; */
        /* display: block; */
    }
}


/* Custom CSS for Fluid Image with Rounded Corners (Default for larger screens) */
.img-fluid-custom[b-4y1ti577co] {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 0.375rem;
    /* margin: 0 auto; ถ้าต้องการจัดกึ่งกลางรูปภาพเมื่อ display: block; */
}

/* ปรับสไตล์ img-fluid-custom สำหรับหน้าจอขนาดเล็ก (มือถือ) */
@media (max-width: 767.98px) {
    .img-fluid-custom[b-4y1ti577co] {
        border-radius: 0.25rem; /* ทำให้มุมมนน้อยลงเล็กน้อย */
        /* ถ้าต้องการให้รูปภาพเล็กลงเมื่อหน้าจอเล็กมากๆ */
        /* max-width: 95%; */
        /* margin: 0 auto; */
    }
}


/* Custom CSS for Muted, Truncated, Block Text (Default for larger screens) */
.text-truncated-muted-block[b-4y1ti577co] {
    color: #6c757d;
    white-space: nowrap;      /* ข้อความไม่ขึ้นบรรทัดใหม่ */
    overflow: hidden;         /* ซ่อนส่วนที่เกิน */
    text-overflow: ellipsis;  /* แสดงจุดไข่ปลา (...) */
    display: block;           /* แสดงผลเป็น block element */
    line-height: 1.2;         /* ปรับ line-height หากต้องการ */
    font-size: 0.875rem;      /* ขนาด font มาตรฐาน */
}

/* ปรับสไตล์ text-truncated-muted-block สำหรับหน้าจอขนาดเล็ก (มือถือ) */
@media (max-width: 767.98px) {
    .text-truncated-muted-block[b-4y1ti577co] {
        font-size: 0.75rem; /* ลดขนาด font ลงสำหรับมือถือ */
        /* หากต้องการให้ข้อความตัดสั้นลงอีก หรือแสดงได้หลายบรรทัดบนมือถือ */
        white-space: normal; /* อนุญาตให้ข้อความขึ้นบรรทัดใหม่ */
        overflow: hidden;    /* ยังคงซ่อนส่วนที่เกิน */
        text-overflow: ellipsis; /* ยังคงแสดงจุดไข่ปลา */
        display: -webkit-box; /* ใช้สำหรับจำกัดจำนวนบรรทัดใน WebKit browsers (Chrome, Safari) */
        -webkit-line-clamp: 2; /* จำกัดให้แสดง 2 บรรทัด */
        -webkit-box-orient: vertical;
        /* ถ้าไม่ต้องการจุดไข่ปลาและให้แสดงเต็มที่: */
        /* white-space: normal; */
        /* overflow: visible; */
        /* text-overflow: clip; */
    }
}

/*
ถ้าคุณต้องการมี breakpoints อื่นๆ เช่นสำหรับ tablet (768px - 1023.98px)
คุณก็เพิ่ม Media Query สำหรับช่วงนั้นได้:

@media (min-width: 768px) and (max-width: 1023.98px) {
    .my-class {
        // สไตล์สำหรับ tablet
    }
}
*/
/* /Pages/Trainings/AllTrainings.razor.rz.scp.css */
 /* Scoped CSS for AllTrainings.razor */

 .all-trainings-section[b-ugi1pgajqq] {
     padding: 40px 20px;
     background-color: #f9f9f9;
     min-height: 80vh;
     /* เพื่อให้มีพื้นที่แสดงผล */
 }

 .all-trainings-header[b-ugi1pgajqq] {
     text-align: center;
     margin-bottom: 40px;
 }

 .all-trainings-header .section-title[b-ugi1pgajqq] {
     font-size: 2.5em;
     color: #333;
     font-weight: 700;
     position: relative;
     display: inline-block;
 }

 .all-trainings-header .section-title[b-ugi1pgajqq]::after {
     content: '';
     position: absolute;
     width: 60px;
     height: 4px;
     background-color: #007bff;
     bottom: -10px;
     left: 50%;
     transform: translateX(-50%);
     border-radius: 2px;
 }

 /* Filter Bar Styles */
 .filter-bar[b-ugi1pgajqq] {
     background-color: #ffffff;
     border: 1px solid #e0e0e0;
     border-radius: 8px;
     padding: 20px;
     margin-bottom: 30px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }

 .filter-bar .form-control[b-ugi1pgajqq],
 .filter-bar .form-select[b-ugi1pgajqq] {
     height: 45px;
     border-radius: 5px;
     border: 1px solid #ced4da;
 }

 .filter-bar .btn-secondary[b-ugi1pgajqq] {
     background-color: #6c757d;
     border-color: #6c757d;
     color: white;
     height: 45px;
     border-radius: 5px;
     font-size: 0.95em;
 }

 .filter-bar .btn-secondary:hover[b-ugi1pgajqq] {
     background-color: #5a6268;
     border-color: #5a6268;
 }

 /* Training Grid (similar to Upcoming, but optimized for full page) */
 .training-grid-full[b-ugi1pgajqq] {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 30px;
     padding: 0 15px;
 }

 .training-card[b-ugi1pgajqq] {
     background-color: #ffffff;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     position: relative;
     /* สำหรับ badge */
 }

 .training-card:hover[b-ugi1pgajqq] {
     transform: translateY(-8px);
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
 }

 .training-image[b-ugi1pgajqq] {
     position: relative;
     width: 100%;
     padding-bottom: 60%;
     /* 16:9 aspect ratio */
     overflow: hidden;
 }

 .training-image img[b-ugi1pgajqq] {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.3s ease;
 }

 .training-card:hover .training-image img[b-ugi1pgajqq] {
     transform: scale(1.05);
 }

 .training-overlay[b-ugi1pgajqq] {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
     padding: 15px;
     color: white;
     display: flex;
     justify-content: space-between;
     align-items: center;
     opacity: 1;
     /* Always visible for full page */
 }

 .training-duration[b-ugi1pgajqq] {
     font-size: 0.9em;
     display: flex;
     align-items: center;
 }

 .training-duration i[b-ugi1pgajqq] {
     margin-right: 5px;
     color: #ffc107;
 }

 .training-duration.past-label[b-ugi1pgajqq] {
     color: #dc3545;
     /* สีแดงสำหรับ "ที่ผ่านมาแล้ว" */
     font-weight: bold;
 }

 .training-duration.past-label i[b-ugi1pgajqq] {
     color: #dc3545;
 }

 .training-content[b-ugi1pgajqq] {
     padding: 20px;
     flex-grow: 1;
     /* ให้เนื้อหาขยายเต็มพื้นที่ */
     display: flex;
     flex-direction: column;
 }

 .training-date[b-ugi1pgajqq] {
     font-size: 0.85em;
     color: #6c757d;
     margin-bottom: 10px;
     display: flex;
     align-items: center;
 }

 .training-date i[b-ugi1pgajqq] {
     margin-right: 5px;
     color: #007bff;
 }

 .training-title[b-ugi1pgajqq] {
     font-size: 1.4em;
     color: #343a40;
     margin-bottom: 10px;
     font-weight: 600;
     line-height: 1.3;
 }

 .training-description[b-ugi1pgajqq] {
     font-size: 0.9em;
     color: #666;
     line-height: 1.6;
     margin-bottom: 15px;
     flex-grow: 1;
     /* เพื่อให้เนื้อหายาวดันส่วนอื่นลงไป */
 }

 .training-details[b-ugi1pgajqq] {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     /* จัดให้ราคาและ info ชิดล่าง */
     margin-top: auto;
     /* ดันลงไปอยู่ด้านล่างสุดของ card content */
 }

 .training-info[b-ugi1pgajqq] {
     display: flex;
     flex-direction: column;
     font-size: 0.8em;
     color: #555;
 }

 .training-info>div[b-ugi1pgajqq] {
     display: flex;
     align-items: center;
     margin-bottom: 5px;
 }

 .training-info i[b-ugi1pgajqq] {
     margin-right: 5px;
     color: #007bff;
 }

 .training-price[b-ugi1pgajqq] {
     text-align: right;
 }

 .training-price .price-label[b-ugi1pgajqq] {
     font-size: 0.8em;
     color: #666;
     display: block;
 }

 .training-price .price-amount[b-ugi1pgajqq] {
     font-size: 1.5em;
     font-weight: 700;
     color: #28a745;
     /* Green for price */
 }

 .training-price .price-amount.free[b-ugi1pgajqq] {
     color: #007bff;
     /* Blue for free */
     font-size: 1.2em;
 }

 .training-btn[b-ugi1pgajqq] {
     display: block;
     width: 100%;
     padding: 12px 15px;
     margin-top: 20px;
     background-color: #007bff;
     color: white;
     border: none;
     border-radius: 8px;
     font-size: 1.05em;
     font-weight: 600;
     cursor: pointer;
     transition: background-color 0.3s ease, transform 0.2s ease;
     text-align: center;
 }

 .training-btn:hover[b-ugi1pgajqq] {
     background-color: #0056b3;
     transform: translateY(-2px);
 }

 .training-btn i[b-ugi1pgajqq] {
     margin-right: 8px;
 }

 /* Training Badges */
 .training-badge[b-ugi1pgajqq] {
     position: absolute;
     top: 15px;
     right: 15px;
     background-color: #ffc107;
     /* Popular */
     color: #333;
     padding: 5px 12px;
     border-radius: 5px;
     font-size: 0.85em;
     font-weight: bold;
     z-index: 10;
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .training-badge.new[b-ugi1pgajqq] {
     background-color: #28a745;
     /* New (Green) */
     color: white;
 }

 .training-badge.limited[b-ugi1pgajqq] {
     background-color: #dc3545;
     /* Limited (Red) */
     color: white;
 }

 .training-badge.full[b-ugi1pgajqq] {
     background-color: #6c757d;
     /* Full (Gray) */
     color: white;
 }


 /* Pagination Styles */
 .pagination .page-item .page-link[b-ugi1pgajqq] {
     color: #007bff;
     border: 1px solid #dee2e6;
     border-radius: 5px;
     margin: 0 3px;
     transition: all 0.2s ease-in-out;
 }

 .pagination .page-item.active .page-link[b-ugi1pgajqq] {
     background-color: #007bff;
     border-color: #007bff;
     color: white;
 }

 .pagination .page-item.disabled .page-link[b-ugi1pgajqq] {
     color: #6c757d;
     pointer-events: none;
     background-color: #e9ecef;
     border-color: #dee2e6;
 }

 .pagination .page-item .page-link:hover:not(.disabled)[b-ugi1pgajqq] {
     background-color: #0056b3;
     border-color: #0056b3;
     color: white;
 }

 .pagination .page-link[b-ugi1pgajqq] {
     padding: .5rem .75rem;
 }

 /* Responsive adjustments */
 @media (max-width: 992px) {
     .training-grid-full[b-ugi1pgajqq] {
         grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     }

     .filter-bar .col-md-auto[b-ugi1pgajqq],
     .filter-bar .col-md-5[b-ugi1pgajqq],
     .filter-bar .col-md-3[b-ugi1pgajqq],
     .filter-bar .col-md-2[b-ugi1pgajqq] {
         flex: 0 0 100%;
         max-width: 100%;
     }
 }

 @media (max-width: 768px) {
     .all-trainings-header .section-title[b-ugi1pgajqq] {
         font-size: 2em;
     }

     .training-grid-full[b-ugi1pgajqq] {
         gap: 20px;
     }

     .filter-bar[b-ugi1pgajqq] {
         padding: 15px;
     }
 }

 @media (max-width: 576px) {
     .training-section[b-ugi1pgajqq] {
         padding: 20px 10px;
     }

     .training-grid-full[b-ugi1pgajqq] {
         grid-template-columns: 1fr;
         /* Single column on small screens */
         padding: 0;
     }

     .training-card[b-ugi1pgajqq] {
         margin: 0 auto;
         max-width: 350px;
     }

     .training-title[b-ugi1pgajqq] {
         font-size: 1.2em;
     }

     .training-description[b-ugi1pgajqq] {
         font-size: 0.85em;
     }
 }
/* /Pages/web/AcademicServices.razor.rz.scp.css */
/* /Pages/web/HighExpertise.razor.rz.scp.css */
/* expertise.css */

/* ใช้สไตล์ร่วมกับ ModernInnovations.css เพื่อความสอดคล้องกัน */
.expertise-container[b-c8svmwmnsl] {
    font-family: 'Arial', sans-serif;
    color: #333;
}

/* ปรับ hero section ให้เหมาะกับหน้านี้ */
.hero-expertise .hero-overlay h1[b-c8svmwmnsl] {
    font-size: 3em; /* อาจปรับให้เล็กกว่าหน้าแรกเล็กน้อยถ้าเนื้อหายาว */
}

/* ส่วนแสดงทีมงาน (Team Showcase) */
.team-showcase[b-c8svmwmnsl] {
    margin-top: 40px;
    margin-bottom: 50px;
}

.team-member-card[b-c8svmwmnsl] {
    border: 1px solid #ddd;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-member-card:hover[b-c8svmwmnsl] {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.team-member-card img[b-c8svmwmnsl] {
    width: 120px; /* ขนาดรูปภาพโปรไฟล์ */
    height: 120px;
    object-fit: cover;
    border: 3px solid #007bff; /* ขอบสีฟ้า */
}

.member-name[b-c8svmwmnsl] {
    font-weight: bold;
    color: #0056b3; /* สีน้ำเงินเข้มขึ้น */
    margin-top: 10px;
}

.member-role[b-c8svmwmnsl] {
    font-size: 0.9em;
    color: #777;
}

/* ส่วนคำคม (Quote Section) */
.quote-section[b-c8svmwmnsl] {
    background-color: #e9f7ff; /* สีพื้นหลังอ่อนๆ */
    border-left: 6px solid #007bff;
    padding: 30px;
    border-radius: 8px;
    margin-top: 50px;
}

.quote-section .lead[b-c8svmwmnsl] {
    font-size: 1.4em;
    font-style: italic;
    color: #444;
}

/* CTA Section (ใช้สไตล์เดิมจากหน้า innovation) */
.cta-section[b-c8svmwmnsl] {
    background-color: #f8f9fa;
    border-left: 5px solid #007bff;
    padding: 30px;
    border-radius: 8px;
    margin-top: 50px;
}

.cta-section h3[b-c8svmwmnsl] {
    color: #007bff;
    margin-bottom: 15px;
}

.cta-section .btn[b-c8svmwmnsl] {
    background-color: #007bff;
    border-color: #007bff;
    padding: 12px 30px;
    font-size: 1.2em;
    border-radius: 50px;
    transition: background-color 0.3s ease;
}

.cta-section .btn:hover[b-c8svmwmnsl] {
    background-color: #0056b3;
    border-color: #0056b3;
}


/* --- Media Queries สำหรับ Responsive (เหมือนกับหน้า Innovation) --- */
@media (max-width: 768px) {
    .hero-expertise[b-c8svmwmnsl] {
        height: 300px;
    }
    .hero-expertise .hero-overlay h1[b-c8svmwmnsl] {
        font-size: 2em;
    }
    .hero-expertise .hero-overlay p[b-c8svmwmnsl] {
        font-size: 1em;
    }
    .hero-overlay[b-c8svmwmnsl] {
        padding: 10px;
    }
    .team-member-card img[b-c8svmwmnsl] {
        width: 100px; /* ปรับขนาดรูปโปรไฟล์บนมือถือ */
        height: 100px;
    }
}

@media (max-width: 480px) {
    .hero-expertise[b-c8svmwmnsl] {
        height: 250px;
    }
    .hero-expertise .hero-overlay h1[b-c8svmwmnsl] {
        font-size: 1.5em;
    }
    .hero-expertise .hero-overlay p[b-c8svmwmnsl] {
        font-size: 0.8em;
        line-height: 1.4;
    }
    .quote-section .lead[b-c8svmwmnsl] {
        font-size: 1.1em; /* ลดขนาดฟอนต์คำคมบนมือถือเล็ก */
    }
}
/* /Pages/web/ModernInnovations.razor.rz.scp.css */
/* modern-innovations.css */

.modern-innovations-container[b-nvo2kglt88] {
    font-family: 'Arial', sans-serif; /* ใช้ฟอนต์ที่สะอาดและทันสมัย */
    color: #333;
}

.hero-section[b-nvo2kglt88] {
    position: relative;
    width: 100%;
    height: 450px; /* ปรับขนาดตามต้องการ */
    overflow: hidden;
    margin-bottom: 40px;
}

.hero-section img[b-nvo2kglt88] {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ตรวจสอบให้แน่ใจว่ารูปภาพครอบคลุมพื้นที่โดยไม่บิดเบี้ยว */
    filter: brightness(0.6); /* ทำให้รูปภาพมืดลงเล็กน้อยเพื่อให้อ่านข้อความได้ง่ายขึ้น */
}

.hero-overlay[b-nvo2kglt88] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    padding: 20px;
}

.hero-overlay h1[b-nvo2kglt88] {
    font-size: 3.5em; /* หัวข้อที่ใหญ่ขึ้นและมีผลกระทบมากขึ้น */
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.hero-overlay p[b-nvo2kglt88] {
    font-size: 1.5em;
    margin-top: 5px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.content-section[b-nvo2kglt88] {
    padding-top: 20px;
    padding-bottom: 50px;
    line-height: 1.8; /* ปรับปรุงการอ่าน */
    font-size: 1.1em;
}

.content-section p[b-nvo2kglt88] {
    margin-bottom: 1.5em;
}

.image-gallery[b-nvo2kglt88] {
    margin-top: 30px;
    margin-bottom: 30px;
}

.image-gallery img[b-nvo2kglt88] {
    border-radius: 8px; /* มุมโค้งมนเล็กน้อยสำหรับรูปภาพ */
    transition: transform 0.3s ease-in-out; /* เอฟเฟกต์โฮเวอร์ที่ราบรื่น */
}

.image-gallery img:hover[b-nvo2kglt88] {
    transform: scale(1.03);
}

.image-gallery p[b-nvo2kglt88] {
    font-style: italic;
    color: #555;
    font-size: 0.95em;
}

.cta-section[b-nvo2kglt88] {
    background-color: #f8f9fa; /* พื้นหลังสีอ่อนสำหรับคำกระตุ้นการตัดสินใจ */
    border-left: 5px solid #007bff; /* ขอบเน้น */
    padding: 30px;
    border-radius: 8px;
    margin-top: 50px;
}

.cta-section h3[b-nvo2kglt88] {
    color: #007bff;
    margin-bottom: 15px;
}

.cta-section .btn[b-nvo2kglt88] {
    background-color: #007bff;
    border-color: #007bff;
    padding: 12px 30px;
    font-size: 1.2em;
    border-radius: 50px; /* ปุ่มรูปเม็ดยา */
    transition: background-color 0.3s ease;
}

.cta-section .btn:hover[b-nvo2kglt88] {
    background-color: #0056b3;
    border-color: #0056b3;
}

@media (max-width: 768px) { /* สำหรับหน้าจอขนาดเล็กกว่าหรือเท่ากับ 768px (แท็บเล็ตและมือถือ) */
    .hero-section[b-nvo2kglt88] {
        height: 300px; /* ลดความสูงของส่วน hero บนมือถือ */
    }

    .hero-overlay h1[b-nvo2kglt88] {
        font-size: 2em; /* ลดขนาดหัวข้อ h1 สำหรับมือถือ */
    }

    .hero-overlay p[b-nvo2kglt88] {
        font-size: 1em; /* ลดขนาดข้อความ p สำหรับมือถือ */
    }

    .hero-overlay[b-nvo2kglt88] {
        padding: 10px; /* ลด padding เพื่อให้ข้อความมีพื้นที่มากขึ้น */
    }
}

@media (max-width: 480px) { /* สำหรับหน้าจอขนาดเล็กกว่าหรือเท่ากับ 480px (มือถือขนาดเล็ก) */
    .hero-section[b-nvo2kglt88] {
        height: 250px; /* ลดความสูงลงอีกสำหรับมือถือจอเล็ก */
    }

    .hero-overlay h1[b-nvo2kglt88] {
        font-size: 1.5em; /* ลดขนาดหัวข้อ h1 ลงอีก */
    }

    .hero-overlay p[b-nvo2kglt88] {
        font-size: 0.8em; /* ลดขนาดข้อความ p ลงอีก */
        line-height: 1.4; /* ปรับ line-height เพื่อให้อ่านง่ายขึ้น */
    }
}