/* Add to existing style.css */
html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
*,:after,:before{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit;font-family:"Sarabun", sans-serif;}
body, input, textarea, select, option, td, button{font-size:18px}
body{padding:0;margin:0;color:#333;margin:0;padding:0;background:#fbfbfb;}
a{text-decoration:none;color:#000;cursor:pointer;}
a:hover{text-decoration:underline;color:#000;}
a img{border:none;}
.entry-content a{color:#2f6dbd}
.entry-content a:hover{color:#1164d1;}

h1,h2,h3,h1 *,h2 *,h3 *{font-weight:normal;font-family: "Mitr", sans-serif;}
h1{font-size:1.8em;padding:10px 0;margin:0;}
h2,h3{font-size:1.5em;padding:10px 0;margin:0;}
p{margin:0 0 1.5em;padding:0;line-height:1.5em;}
.indent, .indent p{text-indent:40px;}
button{cursor:pointer;}

body.no-scroll {
    overflow: hidden; /* ป้องกันการเลื่อนหน้าจอหลักเมื่อ Mobile Menu เปิด */
}
#content{max-width:1000px;margin:0 auto;padding:3%;}
.site-header {
    padding: 10px 0;
}

.header-inner {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    padding: 0 15px;
    border-bottom: solid 2px #0002;
}
footer{background:#64646d;color:#fff;text-align: center;}
.content-wrap{max-width:1000px;padding:0 10px;margin:0 auto;}
.footer-content{padding-top:15px;padding-bottom:30px;}
.footer-content div{margin-bottom:10px;}
.footer-content a:hover{opacity:0.7;}
.site-branding .custom-logo-link{width:50px;height:50px;border-radius:100%;object-fit:cover;overflow:hidden;display:block;}
.site-branding img{    
    display: block;
    max-width:100%;max-height:100%;
}
.catg-header{background: #c2985f;
    text-align: center;
    padding: 25px 0;
    margin-bottom: 25px;}
.site-title {
    margin: 0;display:none;
}

.site-title a {
    text-decoration: none;
    color: #333;
    font-size: 1.5em;
}

.main-navigation {
    text-align: center;
    flex-grow: 1; /* ทำให้เมนูขยายเต็มพื้นที่ที่เหลือ */
    order: 2; /* กำหนดลำดับให้อยู่หลังโลโก้ */
    margin-left: auto; /* จัดให้เมนูอยู่กลางเมื่อมีโลโก้ */
    margin-right: auto; /* จัดให้เมนูอยู่กลางเมื่อมีโลโก้ */
}

.main-navigation ul {
    display: flex; /* ใช้ flex เพื่อจัดเรียงเมนูย่อยให้อยู่กลาง */
    justify-content: center; /* จัดให้อยู่ตรงกลาง */
    width: 100%; /* ให้ ul กินพื้นที่ 100% ของ parent (main-navigation) */
}


.main-navigation ul li {
    display: inline-block;
    position: relative;
}
.main-navigation ul li.current-menu-item a{border-bottom: solid 2px;}
.main-navigation .sub-menu li.current-menu-item a{border: none;background: #f0f0f0;font-weight: bold;}
.main-navigation ul li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #555;
    font-family: "Mitr", sans-serif;
}

.main-navigation ul li a:hover {
    color:#000;
}

/* Dropdown Sub-menu styles (for desktop) */
.main-navigation ul li ul {
    display: none;
    position: absolute;
    background-color: #fff;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    min-width: 260px;
    text-align: left;
    padding:0;margin:0;list-style:none;
}

.main-navigation ul li:hover > ul {
    display: block;
}

.main-navigation ul li ul li {
    display: block;
}

.main-navigation ul li ul li a {
    padding: 10px 15px;
    color: #333;
}

.main-navigation ul li ul li a:hover {
    background-color: #f1f1f1;
}

/* Hide mobile menu toggle on desktop */
@media screen and (min-width: 1000px) {
    .mobile-menu-toggle,
    .mobile-navigation,
    .mobile-menu-overlay {
        display: none !important;
    }
    .main-navigation.desktop-menu {
        display: block;
    }
}

/* ซ่อนเมนูเดสก์ท็อปในหน้าจอขนาดเล็ก */
.main-navigation.desktop-menu {
    display: block; /* ปกติสำหรับ Desktop */
}

.mobile-menu-toggle {
    display: none; /* ปกติสำหรับ Desktop */
}

.mobile-navigation {
    position: fixed;
    top: 0;
    right: -300px; /* ซ่อนไว้ทางขวาของจอ */
    width: 300px;
    height: 100%;
    background-color: #fff;
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    z-index: 999;
    transition: right 0.3s ease-in-out;
    overflow-y: auto;
    padding-top: 60px;
}

.watumong-shortcode-section {
    margin-bottom: 50px; /* เพิ่มระยะห่างด้านล่างของแต่ละ Shortcode Section */
    padding-bottom: 30px;
    border-bottom: 1px solid #eee; /* เส้นแบ่งด้านล่าง */
}

/* หากต้องการให้ส่วนสุดท้ายไม่มีเส้นแบ่ง */
.watumong-shortcode-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* หัวข้อของ Shortcode Section */
.watumong-shortcode-section .section-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.2em;
    color: #333;
}

#site-navigation{display:none;font-family: "Mitr", sans-serif;}
#mobile-menu ul li a{padding-left:30px;}
.list-item{margin-bottom:20px;}
.more{text-align:right;}
.more a{font-size:80%;}
.entry-cover{margin-bottom:20px;}
.entry-cover img{width:100%;height:auto;}
.entry-title{font-size:1.5em;padding:0 0 ;margin:0 0 20px;}
.entry-author{font-size:80%;color:#666;}
.entry-author a{color:#666;};

h1.entry-title{margin:0;font-size:24px;}
.entry-info{color: #333;margin-bottom:20px;}
h2.entry-title{font-size:1.1em;margin:0 0 2px;}
h3.entry-title{font-size:1.1em;
    max-height: 3.5em;
    overflow: hidden;
    text-overflow: ellipsis;}
.entry-content{line-height:1.5em;}
.post-thumbnail{margin-bottom:8px;}
.post-thumbnail img{width:100%;height:auto;object-fit:cover;object-position:center;height:55vw;}
.home-section2{display: block;
    border: solid 2px #0002;
    border-style: solid none;
    padding: 20px;
    margin: 30px 0;}
.home-section2 h2{text-align:center;}
.home-section2 .entry-title{margin:0 0 5px;}
.home-section2 article{margin-bottom:15px;}
.home-section2 .more{text-align:right;margin:10px 0;}
.sp-line{border-bottom:solid 2px #0002;padding:0;margin:4% 0;}
.home-section3{padding:30px;background:#a6a899;}
.home-section3 h2{text-align:center;}
.home-section4{background:#ede6e8;padding:30px;display: block;}
.home-section4 h2{text-align:center;}
.nav-links{display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0;
  margin: 20px 0;}
.nav-links > *{color: #333;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #000;
  margin: 0 4px;}
.nav-links a:hover{background-color: #ddd;text-decoration: none;}
.nav-links .current{background-color: #000;
  color: white;
  border: 1px solid #000;}
.entry-tags{margin:30px 0;border-top:solid 1px #ccc;padding:20px 0;}
.entry-tags a{display: inline-block;margin:0 5px 0 0;border-radius:5px;border:solid 1px #ccc;padding:1px 10px 2px;}
.entry-tags a:hover{background:#c0c0c0;text-decoration: none;}
.articles-related{margin:30px 0;}
.articles-related h3{margin:10px 0;}
.articles-related ul{list-style:none;padding:0;margin:0;}
.articles-related li{padding:10px;margin:0 10px 0;}
.articles-related .thumbnail{display: block;margin-bottom:10px;}
.articles-related .thumbnail img{height:50vw;object-fit: cover;object-position: center;width:100%;}

.footer-navigation ul{list-style:none;padding:30px 0 15px;margin:0;}
.footer-navigation ul li{padding:0;margin:0;}
.footer-navigation ul li a{display:block;line-height:1.5em;color:#fff9;}

@media (min-width:768px){
    .footer-navigation ul{display: flex;gap:10px;justify-content: center;}
    .articles-related ul{display:flex;margin:0 8px;
    }
    .articles-related ul li{width:33%;}
    .articles-related .thumbnail img{height:15vw;}
    #content{padding:10px;}
    #site-navigation{display:block;}
    #mobile-navigation{display:none;}
    /* .mobile-menu-toggle{display:none;} */
    .site-branding .custom-logo-link{width:100px;height:100px;margin:0 auto;}
    .site-title{display:block;text-align-last:center;}
    .post-thumbnail img{height:26vw;max-height:300px;}
    .home-section2{display:flex;}
    .home-section2 > div{width:50%;padding:2%;}
    .home-section2 .sp-line{border-left:solid 2px #0002;padding:0;width:0;margin:0 4%;}
    .home-history{display:flex;}
    .home-history > article{width:50%;padding:2%;}
    .home-history > article:last-child{border-left:solid 2px #0002;}

    .articles{display:flex;flex-wrap:wrap;}
    .articles article{width:50%;padding:1%;}
    .entry-info{display:flex;justify-content:space-between;}
}
@media (min-width:900px){
    .post-thumbnail img{height:17vw;}
    .articles article{width:33%;padding:1%;}
}