@font-face {
        font-family: 'promptlight';
        src: url('./Font-Prompt/prompt-light-webfont.woff2') format('woff2'), url('./Font-Prompt/prompt-light-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    
    @font-face {
        font-family: 'promptbold';
        src: url('./Font-Prompt/prompt-bold-webfont.woff2') format('woff2'), url('./Font-Prompt/prompt-bold-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    
    .carousel-container {
        position: relative;
        z-index: 0;
    }
    
    .bod-ab {
        position: absolute;
        z-index: 1;
    }
    
    @media only screen and (min-width: 960px) {
        .header-bg {
            background-image: url('assets/images/header/bansai.png');
            background-image: url('assets/images/header/bansai.png');
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        .logo-response {
            width: 100%;
            height: auto;
        }
        /* .bod {
        margin: 0;
        padding: 0;
        position: relative;
        height: 60vh;
    } */
    }
    
    @media only screen and (min-width: 768px) {
        .header-bg {
            background-image: url('assets/images/header/bansai.png');
            background-image: url('assets/images/header/banner.png');
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        .logo-response {
            width: 100%;
            height: auto;
        }
        /* .bod {
        margin: 0;
        padding: 0;
        position: relative;
        height: 30vh;
    } */
    }
    
    @media only screen and (max-device-width: 480px) {
        .header-bg {
            background-image: url('assets/images/header/bansai.png');
            background-image: url('assets/images/header/banner.png');
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        .logo-response {
            width: 100%;
            height: auto;
        }
    }
    
    @media only screen and (max-device-width: 375px) {
        .header-bg {
            background-image: url('assets/images/header/bansai.png');
            background-image: url('assets/images/header/banner.png');
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        .logo-response {
            width: 100%;
            height: auto;
        }
    }
    
    .nav-left {
        margin: 5% 0%;
        background-color: #fff;
        border-radius: 50px;
        padding: 10% 10%;
        width: 100px;
        height: 100px;
        position: relative;
        border: 4px solid #353dc2;
    }
    /* .nav-bt {
        margin-top: -200px;
        height: 115vh;
        background-image: url('../images/banner/banner36.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: -1;
    } */
    /* @media all and (max-width: 1533px) {
        .nav-bt {
            margin-top: -160px;
            height: 103vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 1374px) {
        .nav-bt {
            margin-top: -140px;
            height: 94vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 1255px) {
        .nav-bt {
            margin-top: -125px;
            height: 91vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 1254px) {
        .nav-bt {
            margin-top: -125px;
            height: 91vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 1246px) {
        .nav-bt {
            margin-top: -125px;
            height: 85vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 1240px) {
        .nav-bt {
            margin-top: -150px;
            height: 85vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 1178px) {
        .nav-bt {
            margin-top: -100px;
            height: 80vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 1114px) {
        .nav-bt {
            margin-top: -100px;
            height: 76vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 1066px) {
        .nav-bt {
            margin-top: -100px;
            height: 78vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 1032px) {
        .nav-bt {
            margin-top: -100px;
            height: 72vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 1032px) {
        .nav-bt {
            margin-top: -100px;
            height: 74vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 978px) {
        .nav-bt {
            margin-top: -85px;
            height: 67vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 870px) {
        .nav-bt {
            margin-top: -75px;
            height: 61vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 801px) {
        .nav-bt {
            margin-top: -69px;
            height: 58vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 767px) {
        .nav-bt {
            margin-top: -70px;
            height: 55vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 700px) {
        .nav-bt {
            margin-top: -65px;
            height: 51vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 644px) {
        .nav-bt {
            margin-top: -55px;
            height: 46vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 620px) {
        .nav-bt {
            margin-top: -53px;
            height: 44vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 601px) {
        .nav-bt {
            margin-top: -52px;
            height: 42vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 556px) {
        .nav-bt {
            margin-top: -48px;
            height: 39vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 512px) {
        .nav-bt {
            margin-top: -45px;
            height: 37vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 497px) {
        .nav-bt {
            margin-top: -42px;
            height: 35vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 453px) {
        .nav-bt {
            margin-top: -40px;
            height: 33vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 421px) {
        .nav-bt {
            margin-top: -37px;
            height: 30vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 390px) {
        .nav-bt {
            margin-top: -40px;
            height: 29vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    }
    
    @media all and (max-width: 360px) {
        .nav-bt {
            margin-top: -38px;
            height: 27vh;
            background-image: url('../images/banner/banner88.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: -1;
        }
    } */
    
    .footer-img {
        background-image: url("../images/banner/banneredit6.png");
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        height: 45vh;
    }
    
    @media (max-width: 1578px) {
        .footer-img {
            background-size: cover;
            /* หรือ background-size: contain; ขึ้นอยู่กับที่คุณต้องการ */
        }
    }
    /* @media all and (max-width: 1436px) {
        .footer-img {
            background-image: url("../images/banner/end.png");
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            height: 50vh;
        }
    }
    
    @media all and (max-width: 1158px) {
        .footer-img {
            background-image: url("../images/banner/end.png");
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            height: 40vh;
        }
    }
    
    @media all and (max-width: 800px) {
        .footer-img {
            background-image: url("../images/banner/end.png");
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            height: 30vh;
        }
    }
    
    @media all and (max-width: 558px) {
        .footer-img {
            background-image: url("../images/banner/end.png");
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            height: 20vh;
        }
    }
    
    @media all and (max-width: 390px) {
        .footer-img {
            background-image: url("../images/banner/end.png");
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            height: 25vh;
        }
    } */
    
    */ .themes {
        background-color: rgba(128, 128, 128, 0.219);
        height: 100vh;
    }
    
    .navnav {
        /* background: linear-gradient(to bottom, #0b14c7, #0b14c7); */
        background: #0b14c7;
        height: 60px;
        /* border: 0.5px solid #DCDCDC; */
        flex: auto;
        z-index: 1;
    }
    
    .navnav:after {
        content: '';
        clear: both;
        display: table;
    }
    
    .navnav ul {
        float: right;
        list-style: none;
        margin-right: 40px;
        position: relative;
        z-index: 1000;
    }
    
    .navnav ul li {
        float: left;
        display: inline-block;
        background: #0b14c7;
        margin: 0 2px;
    }
    
    .navnav ul li a {
        color: #ffffff;
        text-decoration: none;
        line-height: 58px;
        font-size: 22px;
        padding: 5px 8px;
        font-weight: bold;
    }
    
    .navnav ul li a:hover {
        color: #FFA500;
    }
    
    .navnav ul ul li a:hover {
        color: #FFA500;
        box-shadow: none;
    }
    
    .navnav ul ul {
        position: absolute;
        top: 70px;
        opacity: 0;
        visibility: hidden;
        transition: top .3s;
        padding-left: 0rem;
    }
    
    .navnav ul ul ul {
        border-top: none;
    }
    
    .navnav ul li:hover>ul {
        top: 58px;
        opacity: 1;
        visibility: visible;
    }
    
    .navnav ul ul li {
        position: relative;
        margin: 0px;
        width: 240px;
        float: none;
        display: list-item;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    .navnav ul ul li a {
        line-height: 50px;
    }
    
    .navnav ul ul ul li {
        position: relative;
        top: -58px;
        left: 240px;
        z-index: 1;
    }
    
    .show,
    .icon,
    .intnone {
        display: none;
    }
    
    @media all and (max-width: 1011px) {
        .navnav ul {
            margin-right: 70px;
            float: left;
        }
        .navnav ul li,
        .navnav ul ul li {
            display: block;
            width: 100%;
        }
        .navnav ul ul {
            top: 70px;
            position: static;
            border: none;
            float: none;
            display: none;
            opacity: 1;
            visibility: visible;
            width: 260px;
        }
        .navnav ul ul ul li {
            position: static;
        }
        .navnav ul ul li {
            border-bottom: 0px;
        }
        .navnav ul ul a {
            padding-left: 25px;
        }
        .navnav ul ul ul a {
            padding-left: 45px;
        }
        .show {
            display: block;
            color: #ffffff;
            font-size: 22px;
            padding: 0 8px;
            line-height: 70px;
            cursor: pointer;
            font-weight: bold;
        }
        .show:hover {
            color: #FFA500;
        }
        .icon {
            display: block;
            color: rgb(255, 255, 255);
            position: absolute;
            right: 40px;
            line-height: 70px;
            font-size: 18px;
            cursor: pointer;
        }
        .navnav ul li a:hover {
            box-sizing: none;
        }
        .show+a,
        ul {
            display: none;
        }
        [id^=btn]:checked+ul {
            display: block;
        }
    }
    
    .fnz {
        font-size: 28px;
        font-weight: bold;
    }
    
    .fcz {
        font-size: 28px;
        font-weight: bold;
        color: #0b14c7;
    }
    
    .fcz3 {
        font-size: 28px;
        font-weight: bold;
        color: #FFA500;
    }
    
    .fcz2 {
        font-size: 28px;
        font-weight: bold;
        color: #070707;
    }
    
    .inputid {
        margin: 0px 150px 30px 150px;
    }
    
    .inputtextid {
        border: 1px solid #3b5998;
        box-shadow: 0 0 5px rgb(59, 89, 152), 0 0 5px rgba(59, 88, 152, 0.692);
        font-size: 42px;
        font-weight: bold;
    }
    
    .btnlogin {
        background-color: rgb(59, 89, 152);
        box-shadow: 0 0 5px #0000FF, 0 0 5px #0000ffa1;
        border-radius: 10px;
        border: none;
        width: 40px;
        height: 40px;
        font-weight: bold;
        color: #ffffff;
    }
    
    .btnlogin:hover {
        background-color: rgba(59, 88, 152, 0.692);
        border-radius: 10px;
        border: none;
        width: 40px;
        height: 40px;
        font-weight: bold;
        color: #ffffff;
    }
    
    .nametitle {
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        color: #070707;
    }
    
    .indent {
        text-indent: 2em;
    }
    
    .content-image img {
        transition: transform 0.3s ease;
        border: 2px solid #0a0a0a;
    }
    
    .content-image {
        display: grid;
        grid-template-columns: 1fr;
    }
    
    .content-image:hover img {
        transform: scale(1.1);
    }
    
    .full-column-img {
        width: 100%;
        /* กำหนดให้รูปภาพเต็มความกว้างของคอลัมน์ */
        height: 38rem;
        /* อัตราส่วนสูงของรูปภาพเป็นอัตราส่วนต้นฉบับ */
    }
    
    .read-more {
        display: inline-block;
        padding: 8px 16px;
        background-color: #007bff;
        color: #fff;
        text-decoration: none;
        border-radius: 4px;
        text-align: center;
        width: 100%;
    }
    
    table {
        width: 100%;
        border-collapse: collapse;
        font-family: Arial, sans-serif;
    }
    
    th {
        background-color: #4CAF50;
        color: white;
        height: 40px;
        text-align: center;
    }
    
    td {
        text-align: center;
        height: 80px;
        vertical-align: top;
        border: 1px solid #ddd;
        width: 80px;
    }
    
    td:hover {
        background-color: #f5f5f5;
    }
    
    .today {
        background-color: #e0e0e0;
    }
    
    .fnb {
        font-size: 22px;
        font-weight: bold;
    }
    
    .imgstyle {
        height: 200px;
        width: 200px;
    }
    
    .title {
        font-size: 38px;
        font-weight: bold;
    }
    
    .box {
        border: 3px solid black;
        /* สีและขนาดของเส้นกรอบ */
        width: 500px;
        height: auto;
        padding: 20px;
        /* ระยะห่างระหว่างข้อความและกรอบ */
    }
    
    .isize {
        width: 50px;
        height: 50px;
    }
    
    .file-input {
        position: relative;
        display: inline-block;
    }
    
    .input-file {
        opacity: 0;
        width: 0.1px;
        height: 0.1px;
        position: absolute;
        z-index: -1;
    }
    
    .file-label {
        display: inline-block;
        background-color: #4CAF50;
        color: white;
        padding: 8px 17px;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        font-size: 26px;
    }
    
    .file-label:hover {
        background-color: #45a049;
    }
    
    #file-name {
        margin-left: 10px;
    }
    
    .button-blue {
        background-color: #0b14c7;
        border-radius: 3px;
        border-style: none;
        box-sizing: border-box;
        color: #FFFFFF;
        cursor: pointer;
        display: inline-block;
        font-family: "th_sarabun_newregular";
        font-size: 23px;
        /* font-weight: 500; */
        height: 35px;
        line-height: 15px;
        list-style: none;
        margin: 0;
        outline: none;
        padding: 10px 16px;
        position: relative;
        text-align: center;
        text-decoration: none;
        transition: color 100ms;
        vertical-align: baseline;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
    }
    
    .button-blue:hover,
    .button-blue:focus {
        background-color: #0b14c7;
    }
    
    .imgradius {
        border-radius: 20px;
    }
    
    .captcha {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-family: Arial, sans-serif;
        font-size: 18px;
    }
    
    .captcha-image {
        width: 200px;
        height: 80px;
        /* background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); */
        background-color: lavender;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 80px;
        margin-bottom: 10px;
        color: #020202;
        font-weight: bold;
        font-size: 28px;
        border-radius: 5px;
    }
    
    .captcha-refresh {
        cursor: pointer;
        color: blue;
        text-decoration: underline;
        margin-bottom: 10px;
    }
    /* ภาพสไลดฒ */
    
    .slide_show {
        position: relative;
        display: inline-block;
        width: 100%;
    }
    
    .slide_show img {
        position: absolute;
        left: 0;
        /* margin-top: 1vw; */
        width: 100%;
        max-width: 100%;
        height: auto;
        /* object-fit: contain; */
        /* speed ของ effect */
        transition: 1s;
        opacity: 0;
        z-index: -1;
    }
    
    .slide_show img.select {
        opacity: 1;
    }
    /* @media (min-width: 390px) and (max-width: 1595px) {
        .slide_show {
            position: relative;
            display: inline-block;
            width: 100%;
        }
        .slide_show img {
            position: absolute;
            left: 0;
            margin-top: 10vw;
            width: 100%;
            max-width: 100%;
            height: auto;
            transition: 1s;
            opacity: 0;
            z-index: -1;
        }
        .slide_show img.select {
            opacity: 1;
        }
    }
    
    @media (min-width: 390px) and (max-width: 1240px) {
        .slide_show {
            position: relative;
            display: inline-block;
            width: 100%;
        }
        .slide_show img {
            position: absolute;
            left: 0;
            margin-top: 12vw;
            width: 100%;
            max-width: 100%;
            height: auto;
            transition: 1s;
            opacity: 0;
            z-index: -1;
        }
        .slide_show img.select {
            opacity: 1;
        }
    }
    
    @media (min-width: 390px) and (max-width: 1178px) {
        .slide_show {
            position: relative;
            display: inline-block;
            width: 100%;
        }
        .slide_show img {
            position: absolute;
            left: 0;
            margin-top: 8.5vw;
            width: 100%;
            max-width: 100%;
            height: auto;
            transition: 1s;
            opacity: 0;
            z-index: -1;
        }
        .slide_show img.select {
            opacity: 1;
        }
    }
    
    @media (min-width: 390px) and (max-width: 978px) {
        .slide_show {
            position: relative;
            display: inline-block;
            width: 100%;
        }
        .slide_show img {
            position: absolute;
            left: 0;
            margin-top: 8.5vw;
            width: 100%;
            max-width: 100%;
            height: auto;
            transition: 1s;
            opacity: 0;
            z-index: -1;
        }
        .slide_show img.select {
            opacity: 1;
        }
    }
    
    @media (min-width: 390px) and (max-width: 767px) {
        .slide_show {
            position: relative;
            display: inline-block;
            width: 100%;
        }
        .slide_show img {
            position: absolute;
            left: 0;
            margin-top: 8.5vw;
            width: 100%;
            max-width: 100%;
            height: auto;
            transition: 1s;
            opacity: 0;
            z-index: -1;
        }
        .slide_show img.select {
            opacity: 1;
        }
    }
    
    @media (min-width: 390px) and (max-width: 607px) {
        .slide_show {
            position: relative;
            display: inline-block;
            width: 100%;
        }
        .slide_show img {
            position: absolute;
            left: 0;
            margin-top: 8.5vw;
            width: 100%;
            max-width: 100%;
            height: auto;
            transition: 1s;
            opacity: 0;
            z-index: -1;
        }
        .slide_show img.select {
            opacity: 1;
        }
    }
    
    @media (min-width: 390px) and (max-width: 515px) {
        .slide_show {
            position: relative;
            display: inline-block;
            width: 100%;
        }
        .slide_show img {
            position: absolute;
            left: 0;
            margin-top: 8.5vw;
            width: 100%;
            max-width: 100%;
            height: auto;
            transition: 1s;
            opacity: 0;
            z-index: -1;
        }
        .slide_show img.select {
            opacity: 1;
        }
    }
    
    @media (min-width: 390px) and (max-width: 450px) {
        .slide_show {
            position: relative;
            display: inline-block;
            width: 100%;
        }
        .slide_show img {
            position: absolute;
            left: 0;
            margin-top: 8.5vw;
            width: 100%;
            max-width: 100%;
            height: auto;
            transition: 1s;
            opacity: 0;
            z-index: -1;
        }
        .slide_show img.select {
            opacity: 1;
        }
    }
    
    @media (max-width: 390px) {
        .slide_show {
            position: relative;
            display: inline-block;
            width: 100%;
        }
        .slide_show img {
            position: absolute;
            left: 0;
            margin-top: 10vw;
            width: 100%;
            max-width: 100%;
            height: auto;
            transition: 1s;
            opacity: 0;
            z-index: -1;
        }
        .slide_show img.select {
            opacity: 1;
        }
    } */
    
    .map-container {
        position: relative;
        overflow: hidden;
        padding-bottom: 56.25%;
        /* สัดส่วนความสูงของแผนที่ ค่านี้จะเป็น 16:9 (56.25% = 9/16 * 100) แต่คุณสามารถปรับเปลี่ยนตามความต้องการ */
        height: 0;
    }
    
    .map-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .image-frame img {
        display: block;
        max-width: 100%;
        height: auto;
    }
    
    .fb-share-button {
        transform: scale(1.2);
    }
    
    .image-container {
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        border: 2px solid rgba(17, 17, 17, 0.116);
    }
    
    .image-container::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.308);
        /* สีพื้นหลังที่จะให้จางลง */
        opacity: 0;
        transition: opacity 0.3s ease;
        box-sizing: border-box;
        border: 2px solid rgba(17, 17, 17, 0.137);
        cursor: pointer;
    }
    
    .image-container:hover::after {
        opacity: 1;
    }
    
    .image-container img {
        transition: transform 0.3s ease;
    }
    
    .image-container:hover img {
        transform: scale(1.2);
        /* ปรับขนาดรูปภาพที่นูนขึ้นมา */
    }
    /* @media only screen and (max-width: 1178px) {
        .hidden-text {
            display: none;
        }
    } */
    
    @media only screen and (max-width: 1320px) {
        .hidden-text2 {
            display: none;
        }
    }