/* News cards */
.row-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    margin: -15px;
}

.row-flex > .col-md-4 {
    padding: 15px;
}

.news-card {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 0;
    transition: all 0.3s ease;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.row-flex > .col-md-4 {
    padding: 15px;
}

.news-card {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 0;
    transition: all 0.3s ease;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.row-flex > .col-md-4 {
    padding: 15px;
}

.news-card {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 0;
    transition: all 0.3s ease;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.row-flex > .col-md-4 {
    padding: 15px;
}

.news-card {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 0;
    transition: all 0.3s ease;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.row-flex > .col-md-4 {
    padding: 15px;
}

.news-card {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 0;
    transition: all 0.3s ease;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.row-flex > .col-md-4 {
    padding: 15px;
}

.news-card {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 0;
    transition: all 0.3s ease;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.row-flex > .col-md-4 {
    padding: 15px;
}

.news-card {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 0;
    transition: all 0.3s ease;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
    border-color: #28a745;
}

.news-img-wrap {
    height: 200px;
    overflow: hidden;
    background-color: #f4f4f4;
    border-bottom: 1px solid #eee;
    position: relative;
}

.news-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.news-card:hover .news-img-wrap img {
    transform: scale(1.1);
}

.news-body {
    padding: 15px;
}

.news-date {
    font-size: 13px;
    color: #888;
    margin-bottom: 10px;
    border-bottom: 1px dashed #ddd;
    padding-bottom: 8px;
}

.news-detail {
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

.badge-new {
    float: right;
    background: #d9534f;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Legacy page styles moved from indy.php */
.py-5 .container {

            background-color: #FFF;

            padding: 10px;

        }



        .center_1 {

            margin: auto;

        }



        #news {

            margin: auto;

        }



        html,

        body {

            overflow-x: hidden;

        }



        body {

            position: relative;

            background-color: white;

        }



        .container-me {

            margin: auto;

            max-width: 60%;

        }



        .center {

            margin: auto;

            width: 50%;

            border: 3px solid green;

            padding: 10px;

        }



        .img-center {

            display: block;

            margin-left: auto;

            margin-right: auto;

            width: 50%;

        }



        .myButton {

            box-shadow: 3px 4px 0px 0px #8a2a21;

            background: linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);

            background-color: #c62d1f;

            border-radius: 18px;

            border: 1px solid #d02718;

            display: inline-block;

            cursor: pointer;

            color: #ffffff;

            font-family: Arial;

            font-size: 24px;

            padding: 7px 25px;

            text-decoration: none;

            text-shadow: 0px 1px 0px #810e05;

        }



        .myButton:hover {

            background: linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);

            background-color: #f24437;

        }



        .myButton:active {

            position: relative;

            top: 1px;

        }



        .topic-banner {

            background-color: green;

            /* Green */

            border: none;

            color: white;

            padding: 2px;

            text-align: center;

            text-decoration: none;

            display: inline-block;

            /* font-size: 16px; */

            margin: 1px 2px;

            cursor: non;

        }



        .banner1 {

            border-radius: 12px;

        }



        * {

            box-sizing: border-box;

        }



        /* body {

      font-family: Verdana, sans-serif;

    } */



        .mySlides2023 {

            display: none;

        }



        img {

            vertical-align: middle;

        }



        /* Slideshow container */

        .slideshow-container2023 {

            max-width: 1000px;

            position: relative;

            margin: auto;

        }



        /* Caption text */

        .text2023 {

            color: #f2f2f2;

            font-size: 15px;

            padding: 8px 12px;

            position: absolute;

            bottom: 8px;

            width: 100%;

            text-align: center;

        }



        /* Number text (1/3 etc) */

        .numbertext2023 {

            color: #f2f2f2;

            font-size: 12px;

            padding: 8px 12px;

            position: absolute;

            top: 0;

        }



        /* The dots/bullets/indicators */

        .dot2023 {

            height: 15px;

            width: 15px;

            margin: 0 2px;

            background-color: #bbb;

            border-radius: 50%;

            display: inline-block;

            transition: background-color 0.6s ease;

        }



        .active2023 {

            background-color: #717171;

        }



        /* Fading animation */

        .fade2023 {

            animation-name: fade2023;

            /* animation-duration: 3s; */

            animation: fade2023 8s linear forwards;

        }



        @keyframes fade2023 {



            50% {

                opacity: 1;

            }



            0%,

            100% {

                opacity: 0;

            }

        }



        /* On smaller screens, decrease text size */

        @media only screen and (max-width: 300px) {

            .text2023 {

                font-size: 11px
            }

        }



        .img2023 {

            display: block;

            margin-left: auto;

            margin-right: auto;

            width: 900px;

            border-radius: 12px;

        }



        /* กำหนด container สำหรับจัดภาพ */

        .image-container {

            display: flex;

            /* ใช้ Flexbox */

            justify-content: center;

            /* จัดให้อยู่กึ่งกลางแนวนอน */

            align-items: center;

            /* จัดให้อยู่กึ่งกลางแนวตั้ง */

            /* height: 100vh; */

            /* กำหนดความสูงเต็มหน้าจอ */

            margin: 10px 0;

        }



        .image-container img {

            /* margin: 0 10px; */

            /* ระยะห่างระหว่างภาพ */

            max-width: 100%;

            /* ป้องกันภาพล้น */

            height: auto;

            /* รักษาอัตราส่วนภาพ */

        }



        ul {

            list-style-type: none;

            /* เอา bullet ออก */

            padding-left: 20px;

            /* เพิ่มระยะห่างให้ bullet */

        }



        ul li::before {

            content: "\2022";

            /* ใช้ Unicode bullet symbol */

            color: green;

            /* เปลี่ยนสีของ bullet */

            font-size: 15px;

            /* ปรับขนาดของ bullet */

            margin-right: 10px;

            /* เพิ่มระยะห่างระหว่าง bullet กับข้อความ */

        }

/* Modern page refresh */
html,
body {
    background: #ffffff;
    color: #1f2a24;
    font-family: Tahoma, Arial, sans-serif;
    line-height: 1.65;
}

body {
    border-top: 5px solid #1b7f5a;
}

a {
    color: #126c80;
    transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

a:hover,
a:focus {
    color: #0f4f42;
    text-decoration: none;
}

.site-header {
    margin: 0;
    padding: 22px 16px 18px;
    background: #ffffff;
}

.site-logo {
    display: block;
    margin: 0 auto;
    max-width: 820px;
    width: 100%;
}

.container-me,
.main-content {
    width: calc(100% - 32px);
    max-width: 1180px;
    margin: 0 auto;
}

.intro-panel {
    margin-top: 11px;
    margin-bottom: 24px;
    padding: 11px 22px 22px;
    background: #ffffff;
    border: 1px solid #dce8df;
    border-radius: 8px;
}

.intro-panel > .row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}

.link-panel,
.poster-panel {
    padding-top: 8px;
    padding-bottom: 8px;
}

.link-panel-main {
    border-right: 1px solid #e3ece5;
}

.topic-banner {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    margin: 6px 0 8px !important;
    background: #1b7f5a;
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    line-height: 1.35;
    box-shadow: 0 4px 12px rgba(27, 127, 90, 0.18);
}

.topic-program {
    background: #1b7f5a !important;
    box-shadow: 0 4px 12px rgba(27, 127, 90, 0.18) !important;
}

.topic-research {
    background: #0f70b7 !important;
    box-shadow: 0 4px 12px rgba(15, 112, 183, 0.18) !important;
}

.topic-publication {
    background: #7b4ab7 !important;
    box-shadow: 0 4px 12px rgba(123, 74, 183, 0.18) !important;
}

.topic-department {
    background: #f4a340 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(244, 163, 64, 0.3) !important;
}

.topic-service {
    background: #c73667 !important;
    box-shadow: 0 4px 12px rgba(199, 54, 103, 0.18) !important;
}

.topic-links {
    background: #2d6a4f !important;
    box-shadow: 0 4px 12px rgba(45, 106, 79, 0.18) !important;
}

.intro-panel ul {
    padding-left: 0;
    margin-bottom: 18px;
}

.intro-panel ul li {
    position: relative;
    margin: 7px 0;
    padding-left: 0;
    list-style: none;
}

.intro-panel ul li::before {
    display: none;
}

.intro-panel a {
    border-bottom: 1px solid rgba(18, 108, 128, 0.2);
}

.intro-panel a:hover {
    border-color: rgba(18, 108, 128, 0.65);
}

.facebook-page-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #1877f2;
    font-weight: 700;
    border-bottom: 0 !important;
}

.fb-page,
.fb-page iframe {
    border: none !important;
    box-shadow: none !important;
}

.facebook-page-link .fa {
    font-size: 40px;
    line-height: 1;
}

.facebook-page-link:hover {
    color: #0f5fc0;
}

.poster-stack {
    max-width: 230px;
    min-width: 190px;
    margin: 0 auto;
}

.poster-stack img,
.featured-poster img {
    border-radius: 8px;
    border: 1px solid #e0e8e2;
    box-shadow: 0 10px 26px rgba(29, 58, 39, 0.12);
}

.main-content {
    padding: 0 0 30px;
}

.main-content > .row {
    margin-left: -10px;
    margin-right: -10px;
}

.featured-poster {
    text-align: center;
    margin: 0 0 18px;
}

.featured-poster a {
    display: inline-block;
}

.featured-poster img {
    background: #fff;
}

.section-heading {
    margin: 26px 0 16px;
    padding: 0 !important;
    background: transparent !important;
}

.section-heading strong {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    color: #193f32;
    background: #e6f2ec;
    border-left: 5px solid #1b7f5a;
    border-radius: 8px;
    font-size: 18px;
    line-height: 1.35;
}

.section-heading.heading-knowledge strong {
    color: #7a4a00 !important;
    background: #fff2d8 !important;
    border-left-color: #d08a24 !important;
}

.section-heading.heading-books strong {
    color: #1f5a3f !important;
    background: #e2f3ea !important;
    border-left-color: #2f9a64 !important;
}

.section-heading.heading-video strong {
    color: #8a3028 !important;
    background: #f9e2df !important;
    border-left-color: #d3483b !important;
}

.section-heading.heading-news strong {
    color: #1f4f8d !important;
    background: #e2eefc !important;
    border-left-color: #2d79c7 !important;
}

.section-heading em,
.section-heading i {
    color: #1b7f5a;
}

.section-heading.heading-knowledge em,
.section-heading.heading-knowledge i {
    color: #d08a24 !important;
}

.section-heading.heading-books em,
.section-heading.heading-books i {
    color: #2f9a64 !important;
}

.section-heading.heading-video em,
.section-heading.heading-video i {
    color: #d3483b !important;
}

.section-heading.heading-news em,
.section-heading.heading-news i {
    color: #2d79c7 !important;
}

.main-content .col-md-2 {
    margin-bottom: 18px;
    color: #33423a;
}

.main-content .col-md-2 > a {
    display: block;
    margin-bottom: 10px;
}

.main-content .col-md-2 > a img {
    width: 100%;
    max-width: 165px !important;
    max-height: 220px;
    object-fit: contain;
    padding: 6px;
    background: #fff;
    border: 1px solid #e0e8e2;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(31, 62, 44, 0.1);
}

.main-content .col-md-2 > a:hover img {
    transform: translateY(-2px);
    box-shadow: 0 14px 24px rgba(31, 62, 44, 0.16);
}

.news-card {
    border: 1px solid #dfe9e1;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(31, 63, 43, 0.09);
}

.news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(31, 63, 43, 0.15);
    border-color: #87bf9e;
}

.news-img-wrap {
    background: #edf3ef;
}

.news-date {
    color: #66756d;
}

.news-detail {
    color: #26352d;
}

.badge-new {
    background: #c04b3d;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

.btn-default.btn-xs {
    padding: 7px 12px;
    color: #1b5f49;
    background: #fff;
    border-color: #bdd8c8;
    border-radius: 999px;
}

.btn-default.btn-xs:hover {
    color: #fff;
    background: #1b7f5a;
    border-color: #1b7f5a;
}

.map-panel {
    text-align: center;
    margin-bottom: 0;
}

.map-panel iframe,
.map-panel img {
    width: 100%;
    max-width: 430px;
    height: 300px;
    object-fit: cover;
    border: 1px solid #dce8df !important;
    border-radius: 8px;
}

.site-footer {
    padding: 18px 12px;
    color: #42524a;
    text-align: center;
    font-size: 13px;
}

.site-footer-bottom {
    border-top: 1px solid #dfe8e2;
}

hr {
    border-top-color: #dce8df;
}

@media (max-width: 991px) {
    .container-me,
    .main-content {
        width: calc(100% - 24px);
    }

    .intro-panel {
        padding: 16px;
    }

    .intro-panel > .row {
        display: block;
    }

    .link-panel-main {
        border-right: 0;
        border-bottom: 1px solid #e3ece5;
        padding-bottom: 16px;
        margin-bottom: 12px;
    }

    .poster-stack {
        max-width: 260px;
    }
}

@media (max-width: 767px) {
    .site-header {
        padding: 14px 10px;
    }

    .topic-banner {
        width: 100%;
        justify-content: center;
        white-space: normal;
    }

    .section-heading strong {
        font-size: 16px;
    }

    .row-flex {
        display: block;
    }

    .news-card {
        height: auto;
    }

    .map-panel iframe,
    .map-panel img {
        height: 240px;
    }
}