/*
 * ==========================================================================
 *  Table of Contents
 * ==========================================================================
 *  1. Imports & General Styles
 *  2. Reusable Components & Utilities
 *  3. Layout & Specific Sections
 *  4. Animations on Scroll
 *  5. Performance Optimizations
 *  6. Accessibility Enhancements
 *  7. Mourning Mode
 * ==========================================================================
 */
/* ==========================================================================
   1. Imports & General Styles
   ========================================================================== */

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

body {
    font-family: 'Sarabun', sans-serif;
    background-color: #f8f9fa; /* From both files */
    color: #343a40; /* From modern-style.css */
}

/* Remove top padding from main content area on all pages */
main {
    padding-top: 0 !important;
}

/* ==========================================================================
   2. Reusable Components & Utilities
   ========================================================================== */

/* Unified Section Title (replaces .section-title and .section-header) */
.section-title {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title h2 {
    font-weight: bold;
    color: #343a40;
    position: relative;
    display: inline-block;
    padding-bottom: 0.75rem;
}

.section-title h2::after {
    content: '';
    position: absolute;
    display: block;
    width: 60px;
    height: 3px;
    background: #0d6efd;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.section-title p {
    max-width: 600px;
    margin: 1rem auto 0;
    color: #6c757d;
}

/* Unified Content Card (replaces .mission-card and .card-mission) */
.content-card {
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 0.25rem;
}

.content-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.content-card .card-img-top {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.content-card .card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.content-card .card-text {
    flex-grow: 1;
}

/* Unified Icon Grid Item (replaces .item-grid-box, .procurement-item, .download-item) */
.icon-grid-item {
    background-color: #fff;
    padding: 1.5rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.icon-grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.12);
}

.icon-grid-item img {
    max-width: 70px;
    height: 70px;
    object-fit: contain;
    margin-bottom: 1rem;
}

.icon-grid-item a {
    text-decoration: none;
    color: #212529;
    font-weight: 500;
}

.icon-grid-item a:hover {
    color: #0d6efd;
}

/* Modern Card Design (for Mission, News, Articles) */
.modern-card {
    background-color: #fff;
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modern-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.modern-card .card-img-container {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #f8f9fa;
}

.modern-card .card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.modern-card:hover .card-img-top {
    transform: scale(1.05);
}

.modern-card .card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.modern-card .card-text {
    flex-grow: 1;
}

.modern-card .card-title a {
    text-decoration: none;
    color: #343a40;
    transition: color 0.3s ease;
}

.modern-card .card-title a:hover {
    color: #0d6efd;
}

/* Modern List Design (for Procurement & Downloads) */
.modern-list .list-group-item {
    border: none;
    border-bottom: 1px solid #e9ecef;
    padding: 1rem 0.5rem;
    transition: background-color 0.3s ease;
}

.modern-list .list-group-item:last-child {
    border-bottom: none;
}

.modern-list .list-group-item:hover {
    background-color: #f8f9fa;
}

.modern-list .list-group-item a {
    text-decoration: none;
    color: #343a40;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.modern-list .list-group-item i {
    font-size: 1.5rem;
    margin-right: 1rem;
    color: #6c757d;
}

/* Commander Card Design */
.commander-card-new {
    background-color: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.commander-card-new:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.commander-card-new .img-container {
    background-color: #e9ecef;
    padding: 1rem 1rem 0 1rem;
}

.commander-card-new img {
    width: 100%;
    height: 320px;
    object-fit: contain;
    border-radius: 0.5rem;
}

.commander-card-new .info-container {
    padding: 1.25rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.commander-card-new .commander-name { font-weight: 700; color: #343a40; margin-bottom: 0.25rem; }
.commander-card-new .commander-title { font-size: 0.9rem; color: #6c757d; }

/* --- History Page --- */
.history-content {
    background-color: #fff;
    padding: 2rem 2.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    line-height: 1.8;
    font-size: 1.1rem;
    color: #343a40;
}

.history-content p {
    margin-bottom: 1.5rem;
    text-indent: 2em; /* ย่อหน้า */
}

.history-content p:first-of-type::first-letter {
    font-size: 4rem;
    font-weight: bold;
    float: left;
    line-height: 1;
    margin-right: 0.5rem;
    color: #0d6efd;
}

.history-gallery {
    background-color: #fff;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.history-image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
}

.history-image-wrapper img {
    transition: transform 0.4s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history-image-wrapper:hover img {
    transform: scale(1.05);
}

.zoom-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(33, 37, 41, 0.6);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 0.5rem;
    pointer-events: none;
}

.history-image-wrapper:hover .zoom-overlay,
.structure-chart-container a:hover .zoom-overlay {
    opacity: 1;
}

.zoom-overlay i {
    font-size: 2.5rem;
}

/* --- Structure Page --- */
.structure-chart-container {
    position: relative;
    background-color: #fff;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.structure-chart-container a {
    display: block;
    position: relative;
}

.structure-chart-container img {
    border-radius: 0.5rem;
    transition: transform 0.4s ease;
}

.zoom-overlay i {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

/* --- About Us Page --- */
.contact-info-card {
    background-color: #fff;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    height: 100%;
}

.contact-info-card h3 { font-weight: 700; color: #343a40; margin-bottom: 1.5rem; }
.contact-info-list { list-style: none; padding-left: 0; }
.contact-info-list li { display: flex; align-items: flex-start; margin-bottom: 1.25rem; font-size: 1.1rem; }
.contact-info-list i { font-size: 1.5rem; color: #0d6efd; margin-right: 1rem; width: 25px; text-align: center; }
.contact-info-list a { text-decoration: none; color: #212529; transition: color 0.3s ease; }
.contact-info-list a:hover { color: #0d6efd; }

.map-container {
    background-color: #fff;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    height: 100%;
}

.map-container iframe {
    border-radius: 0.5rem;
}

/* --- Central Information Page --- */
.info-sidebar {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    height: 100%;
}

.info-sidebar .sidebar-title {
    font-weight: 700;
    color: #343a40;
    border-bottom: 2px solid #0d6efd;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.info-sidebar .list-group-item-action {
    border: none;
    padding: 0.75rem 1rem;
    color: #495057;
    font-weight: 500;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.info-sidebar .list-group-item-action:hover,
.info-sidebar .list-group-item-action:focus {
    background-color: #e9f2ff;
    color: #0d6efd;
}

.info-sidebar .list-group-item-action i {
    margin-right: 0.75rem;
    width: 20px;
    text-align: center;
    color: #0d6efd;
}

.main-content-panel {
    background-color: #fff;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- DVI Page --- */
.intro-text { background-color: #fff; padding: 2rem; border-radius: 0.75rem; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); line-height: 1.8; }
.dvi-timeline { position: relative; padding: 2rem 0; }
.dvi-timeline::before { content: ''; position: absolute; top: 0; left: 1.5rem; height: 100%; width: 4px; background: #e9ecef; border-radius: 2px; }
.timeline-item { position: relative; margin-bottom: 2.5rem; padding-left: 4rem; }
.timeline-item::before { content: ''; position: absolute; left: calc(1.5rem - 10px); top: 5px; width: 24px; height: 24px; border-radius: 50%; background-color: #fff; border: 4px solid #0d6efd; z-index: 1; }
.timeline-content { background-color: #fff; padding: 1.5rem 2rem; border-radius: 0.75rem; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); position: relative; }
.timeline-content h4 { font-weight: 700; color: #0d6efd; margin-bottom: 0.5rem; }
.timeline-content p { margin-bottom: 1rem; line-height: 1.7; }
.timeline-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.75rem; }
.timeline-gallery a { display: block; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
.timeline-gallery a:hover { transform: scale(1.05); }
.timeline-gallery img { width: 100%; height: 100%; object-fit: cover; }
.final-chart-container { background-color: #fff; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); }

/* DVI Process Tabs */
.dvi-process-tabs .nav-pills .nav-link {
    background-color: #f1f3f5;
    color: #495057;
    font-weight: 600;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin: 0 0.25rem;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.dvi-process-tabs .nav-pills .nav-link:hover {
    background-color: #e9ecef;
    transform: translateY(-2px);
}

.dvi-process-tabs .nav-pills .nav-link.active {
    background-color: #0d6efd;
    color: #fff;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
    transform: translateY(-2px);
}

.dvi-process-tabs .tab-content {
    background-color: #fff;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

/* Cookie Consent Banner */
.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(33, 37, 41, 0.95); /* Dark, slightly transparent */
    color: #fff;
    padding: 1rem;
    z-index: 1050; /* High z-index to be on top */
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    gap: 1rem;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}

.cookie-consent-banner.show { display: flex; }
.cookie-consent-banner p { margin: 0; font-size: 0.9rem; }
.cookie-consent-banner a { color: #86b7fe; text-decoration: underline; }
.cookie-consent-banner a:hover { color: #fff; }

@media (max-width: 768px) {
    .cookie-consent-banner {
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================================================
   3. Layout & Specific Sections
   ========================================================================== */

/* --- Headers (Choose one style in your HTML) --- */
/* Option 1: Image Banner Header */
.header-banner {
    background: linear-gradient(rgba(33, 37, 41, 0.6), rgba(33, 37, 41, 0.6)), url('../img/S__11157573.jpg') no-repeat center center;
    background-size: cover;
    padding: 4rem 2rem;
    color: white;
}

.header-banner h2 {
    font-weight: bold;
}

/* Option 2: Modern Gradient Hero */
.hero-header {
    background: linear-gradient(135deg, #0d6efd 0%, #005c97 100%);
    color: white;
    padding: 3rem 0;
}

.hero-header .hero-logo {
    width: 100px;
    margin-bottom: 1.5rem;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* --- Navbar --- */
.navbar-custom {
    background-color: #005c97;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
}

.navbar-custom .navbar-logo {
    width: 30px;
    height: auto;
}

.navbar-custom .nav-link {
    color: #cdeeff !important; /* สีฟ้าอ่อน, !important เพื่อให้แน่ใจว่าสไตล์ถูกใช้งาน */
    font-weight: 500;
    transition: color 0.3s ease, transform 0.2s ease;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active {
    color: #ffffff !important; /* สีขาวสว่างเมื่อใช้งาน/ชี้เมาส์ */
    transform: scale(1.05);
}

/* --- Carousel --- */
.section-bg-light {
    background-color: #f8f9fa;
}

#mainCarousel {
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    margin-top: -80px;
    position: relative;
    z-index: 10;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.carousel-item {
    aspect-ratio: 1200 / 450;
    background-color: #e9ecef;
    max-height: 450px;
}

/* --- Homepage Section-Specific Card Styles --- */
/* Override for article images on the homepage to prevent cropping */
.articles-section .modern-card .card-img-top {
    object-fit: contain;
    background-color: #f8f9fa;
}

.articles-section .section-header i {
    font-size: 1.5rem;
    vertical-align: -0.125em;
}

/* --- History Page --- */
.history-content {
    background-color: #fff;
    padding: 2rem 2.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    line-height: 1.8;
    font-size: 1.1rem;
    color: #343a40;
}

.history-content p {
    margin-bottom: 1.5rem;
    text-indent: 2em;
}

.history-content p:first-of-type::first-letter {
    font-size: 4rem;
    font-weight: bold;
    float: left;
    line-height: 1;
    margin-right: 0.5rem;
    color: #0d6efd;
}

.history-gallery {
    background-color: #fff;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.history-image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
}

.history-image-wrapper img {
    transition: transform 0.4s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history-image-wrapper:hover img {
    transform: scale(1.05);
}

.zoom-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(33, 37, 41, 0.6);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 0.5rem;
    pointer-events: none;
}

.history-image-wrapper:hover .zoom-overlay,
.structure-chart-container a:hover .zoom-overlay {
    opacity: 1;
}

.zoom-overlay i {
    font-size: 2.5rem;
}

/* --- Structure Page --- */
.structure-chart-container {
    position: relative;
    background-color: #fff;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.structure-chart-container a {
    display: block;
    position: relative;
}

.structure-chart-container img {
    border-radius: 0.5rem;
    transition: transform 0.4s ease;
}

.zoom-overlay i {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

/* --- About Us Page --- */
.contact-info-card {
    background-color: #fff;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    height: 100%;
}

.contact-info-card h3 { font-weight: 700; color: #343a40; margin-bottom: 1.5rem; }
.contact-info-list { list-style: none; padding-left: 0; }
.contact-info-list li { display: flex; align-items: flex-start; margin-bottom: 1.25rem; font-size: 1.1rem; }
.contact-info-list i { font-size: 1.5rem; color: #0d6efd; margin-right: 1rem; width: 25px; text-align: center; }
.contact-info-list a { text-decoration: none; color: #212529; transition: color 0.3s ease; }
.contact-info-list a:hover { color: #0d6efd; }

.map-container {
    background-color: #fff;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    height: 100%;
}

.map-container iframe {
    border-radius: 0.5rem;
}

/* Articles Section */
.articles-section .card-img-top {
    height: 150px;
    object-fit: contain;
    background-color: #f8f9fa;
}

/* --- Central Information Page --- */
.info-sidebar {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    height: 100%;
}

.info-sidebar .sidebar-title {
    font-weight: 700;
    color: #343a40;
    border-bottom: 2px solid #0d6efd;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.info-sidebar .list-group-item-action {
    border: none;
    padding: 0.75rem 1rem;
    color: #495057;
    font-weight: 500;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.info-sidebar .list-group-item-action:hover,
.info-sidebar .list-group-item-action:focus {
    background-color: #e9f2ff;
    color: #0d6efd;
}

.info-sidebar .list-group-item-action i {
    margin-right: 0.75rem;
    width: 20px;
    text-align: center;
    color: #0d6efd;
}

.main-content-panel {
    background-color: #fff;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- DVI Page --- */
.intro-text { background-color: #fff; padding: 2rem; border-radius: 0.75rem; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); line-height: 1.8; }
.dvi-timeline { position: relative; padding: 2rem 0; }
.dvi-timeline::before { content: ''; position: absolute; top: 0; left: 1.5rem; height: 100%; width: 4px; background: #e9ecef; border-radius: 2px; }
.timeline-item { position: relative; margin-bottom: 2.5rem; padding-left: 4rem; }
.timeline-item::before { content: ''; position: absolute; left: calc(1.5rem - 10px); top: 5px; width: 24px; height: 24px; border-radius: 50%; background-color: #fff; border: 4px solid #0d6efd; z-index: 1; }
.timeline-content { background-color: #fff; padding: 1.5rem 2rem; border-radius: 0.75rem; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); position: relative; }
.timeline-content h4 { font-weight: 700; color: #0d6efd; margin-bottom: 0.5rem; }
.timeline-content p { margin-bottom: 1rem; line-height: 1.7; }
.timeline-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.75rem; }
.timeline-gallery a { display: block; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
.timeline-gallery a:hover { transform: scale(1.05); }
.timeline-gallery img { width: 100%; height: 100%; object-fit: cover; }
.final-chart-container { background-color: #fff; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); }

/* --- Articles Page --- */
/* Override for article images on the articles.php page to prevent cropping */
.page-articles .modern-card .card-img-top {
    object-fit: contain;
}

/* --- News List (Modern Style) --- */
.news-list .list-group-item-action {
    transition: background-color 0.3s ease, border-left-color 0.3s ease;
    border-left: 4px solid transparent;
    border-radius: 0;
}

.news-list .list-group-item-action:hover {
    background-color: #e9ecef;
    border-left-color: #0d6efd;
}

/* --- News Article Card (Detailed View) --- */
.news-article-card {
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin-bottom: 2rem;
    overflow: hidden; /* Ensures border-radius is respected by child elements */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%; /* Make cards in the same row have equal height */
}

.news-article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.news-article-card .news-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.news-article-card .news-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.news-article-card:hover .news-image {
    transform: scale(1.05);
}

.news-article-card .news-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows the body to fill the card height */
}

.news-article-card .news-meta {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

.news-article-card .news-title {
    font-size: 1.25rem; /* Adjusted for card layout */
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.news-article-card .news-title a {
    text-decoration: none;
    color: #343a40;
    transition: color 0.3s ease;
}

.news-article-card .news-title a:hover {
    color: #0d6efd;
}

.news-article-card .news-content {
    color: #495057;
    line-height: 1.6;
    flex-grow: 1; /* Pushes footer content down */
}

/* For multiple images/videos inside a news article detail page */
.news-media-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.news-media-gallery .media-thumb-wrapper {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 0.375rem; /* 0.25rem is a bit small */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    aspect-ratio: 16 / 9;
    background-color: #e9ecef; /* Placeholder color */
}

.news-media-gallery img,
.news-media-gallery video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-media-gallery .media-thumb-wrapper:hover img,
.news-media-gallery .media-thumb-wrapper:hover video {
    transform: scale(1.1);
}

.play-icon-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.9);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Allows clicks to go through to the link */
}

.news-media-gallery .media-thumb-wrapper:hover .play-icon-overlay {
    opacity: 1;
}

/* --- Links Grid --- */
.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.links-grid a {
    display: block;
    background-color: #fff;
    padding: 1.5rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    text-align: center;
    text-decoration: none;
    color: #343a40;
    font-weight: 500;
}

.links-grid a:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.12);
    color: #0d6efd;
}

/* --- Contact Form --- */
.contact-form-section {
    background-color: #fff;
    padding: 3rem;
    border-radius: 0.5rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #495057;
}

.form-control {
    border: 1px solid #ced4da;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.form-control:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.btn-submit {
    background-color: #0d6efd;
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    border-radius: 0.25rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.btn-submit:hover {
    background-color: #0b5ed7;
    transform: translateY(-2px);
}

/* --- Data Table --- */
.table-responsive-container {
    overflow-x: auto;
    background-color: #fff;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin-bottom: 2rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* Ensures table has a minimum width before scrolling */
}

.data-table thead th {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 700;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #dee2e6;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e9ecef;
    color: #343a40;
    vertical-align: middle;
}

.data-table tbody tr:nth-of-type(even) {
    background-color: #f8f9fa; /* Zebra striping */
}

.data-table tbody tr:hover {
    background-color: #e9ecef;
}

/* --- Footer --- */
.site-footer {
    background-color: #212529;
    color: #adb5bd;
    padding: 4rem 0 2rem 0;
    margin-top: 4rem;
    font-size: 0.9rem;
}

.site-footer .footer-heading {
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.site-footer .footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: #0d6efd;
}

.site-footer .footer-logo {
    max-width: 80px;
    margin-top: 1rem;
    opacity: 0.8;
}

.site-footer .footer-contact-info li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.site-footer .footer-contact-info i {
    color: #0d6efd;
    font-size: 1.1rem;
    margin-right: 1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.site-footer .footer-link {
    color: #ced4da;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.site-footer .footer-link:hover {
    color: #ffffff;
    padding-left: 5px;
}

.site-footer .footer-contact-info .bi-facebook {
    color: #1877F2; /* Facebook blue */
}

.site-footer .visitor-counter {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 0.5rem;
    display: inline-block;
    letter-spacing: 4px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    font-family: 'Courier New', Courier, monospace;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

.site-footer .footer-bottom {
    border-top: 1px solid #343a40;
    text-align: center;
    color: #6c757d;
}

/* ==========================================================================
   4. Animations on Scroll
   ========================================================================== */

/* สถานะเริ่มต้นของ element ที่ต้องการให้มี animation (ซ่อนอยู่และเลื่อนลงเล็กน้อย) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition-delay: var(--stagger-delay, 0s); /* For staggered animation */
}

/* สถานะเมื่อ element ปรากฏในหน้าจอ (JavaScript จะเพิ่มคลาสนี้ให้) */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Back to Top Button --- */
#back-to-top-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #0d6efd;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 999;
    
    /* Initial state: hidden */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    
    /* Smooth transition */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    
    /* For centering the icon */
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 1.5rem; /* Make icon bigger */
}

#back-to-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#back-to-top-btn:hover {
    background-color: #0b5ed7;
    transform: translateY(-2px); /* Slight lift on hover */
}

/* ==========================================================================
   5. Performance Optimizations (e.g., Lazy Loading)
   ========================================================================== */

/* Style for lazy-loaded images */
.lazy-img {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.lazy-img.is-loaded {
    opacity: 1;
}

/* ==========================================================================
   6. Accessibility Enhancements
   ========================================================================== */

/*
 * Utility class to visually hide content but keep it accessible to screen readers.
 * Useful for adding context to icon-only buttons or links.
 */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * Improve focus visibility for keyboard users.
 * :focus-visible pseudo-class ensures the outline only appears for keyboard navigation,
 * not for mouse clicks, providing a better user experience.
*/
:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Respect user's preference for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   7. Mourning Mode
   ========================================================================== */

html.mourning-mode #page-wrapper {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%); /* For Safari */
}

html.mourning-mode::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100px; /* Adjust size as needed */
    height: 100px; /* Adjust size as needed */
    background: url('img/ribbon.png') no-repeat; /* Corrected path for front-end */
    background-size: contain;
    z-index: 10000;
    pointer-events: none; /* Allows clicking through the ribbon */
}