.breadcrumb-area {
    height: 30vh;
}

/* Blog Detail */
.blog-detail {
    width: 100%;
    max-width: 1400px;
    /* เพิ่มขนาดสูงสุดของ container */
    margin: 40px auto;
    padding: 30px;
    /* เพิ่มพื้นที่ให้เยอะขึ้น */
    background-color: #f9f9f9;
    border-radius: 15px;
    /* ขอบมนที่มุม */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* เงาที่นุ่มนวล */
}

/* Blog Banner */
.blog-banner {
    position: relative;
    height: 400px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    margin-bottom: 20px;
    /* ปรับลดระยะห่างจากหัวข้อ */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out;
}


.blog-banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
}

.blog-title {
    font-size: 36px;
    color: #333;
    font-weight: bold;
    margin-top: 20px;
    text-align: center;
    text-shadow: none;
    /* ลบเงา */
    padding: 40px;
    /* เพิ่ม padding ให้เยอะขึ้นเพื่อให้ card ยาวขึ้น */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 1350px;
    /* ขยายความกว้างของ card */
    margin: 20px auto;
    min-height: 100px;
    /* เพิ่มความสูงขั้นต่ำเพื่อให้ card ดูเต็มยิ่งขึ้น */
}



/* Blog Content */
.blog-content {
    background-color: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease-in-out;
}

.blog-content:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    /* เพิ่มเงาเมื่อลากเมาส์ผ่าน */
}

/* Blog Meta */
.blog-meta {
    margin-bottom: 30px;
    font-size: 18px;
    color: #555;
    display: flex;
  justify-content: space-between; /* กระจายซ้าย-ขวา */
  align-items: center;
  flex-wrap: wrap;
}

.blog-meta .blog-date {
    flex: 1;
    color: #888;
    text-align: left;
}

.blog-meta .blog-category {
    background-color: #ffcc00;
    color: #fff;
    padding: 5px 20px;
    border-radius: 25px;
    position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Blog Description */
.blog-description {
    font-size: 20px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 40px;
}

.blog-info {
  display: flex;
  flex-direction: column;
  gap: 3px; /* ระยะห่างแต่ละบรรทัด */
  font-size: 18px;
  color: #888;
  margin-top: 15px;
}

.blog-info span {
  display: block;
  margin-bottom: 3px;
}

/* SDGs Logo */
.sdgs-logo img {
    width: 60px;
    height: auto;
    margin-top: 40px;
    margin-bottom: 40px;
    transition: transform 0.3s ease-in-out;
}

.sdgs-logo img:hover {
    transform: scale(1.15);
}

/* Blog Images */
.blog-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* เพิ่มคอลัมน์ 3 คอลัมน์ */
    gap: 30px;
    /* เพิ่มระยะห่างระหว่างภาพ */
    margin-top: 30px;
}

.blog-images img {
    width: 100%;
    height: auto;
    max-width: 100%;
    transition: transform 0.3s ease-in-out;
    object-fit: cover;
}

.blog-images img:hover {
    transform: scale(1.05);
    /* ขยายรูปเมื่อ hover */
}

/* เพิ่มการใช้งาน VenoBox */
.venobox img {
    object-fit: contain;
}

/* ข่าวอื่นๆ */
/* ข่าวอื่นๆ */
.other-news {
    background-color: #f9f9f9;
    padding: 40px 0;
}

.section-title {
    font-size: 28px;
    /* ขนาดตัวอักษรหัวข้อเล็กลง */
    text-align: center;
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
}

.news-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);  /* เงาบางๆ เพื่อให้ดูไม่รก */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 3rem;  /* เพิ่มระยะห่างระหว่างการ์ดเป็น 3rem */
    height: 350px;  /* กำหนดความสูงของการ์ด */
    max-width: 100%;  /* ความกว้างของการ์ดเต็มที่ */
    display: flex;
    flex-direction: column;  /* ทำให้การ์ดสามารถขยายตามความสูง */
}

.news-card:hover {
    transform: translateY(-3px);  /* ขยับเล็กน้อยเมื่อนำเมาส์ไปอยู่เหนือการ์ด */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);  /* เพิ่มเงาเล็กน้อยเมื่อ hover */
}



.news-image {
    height: 300px;
    /* ลดความสูงของภาพให้เล็กลง */
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid #eaeaea;
    /* ขอบล่างระหว่างภาพกับข้อความ */
}

.news-info {
    padding: 15px;
    /* ลดการเว้นระยะให้ดูเรียบง่าย */
    height: calc(100% - 180px);
    /* ให้ข้อความภายในการ์ดมีพื้นที่มากขึ้น */
    overflow: hidden;
}

.news-title {
    font-size: 18px;
    /* ขนาดตัวอักษรของหัวข้อข่าวเล็กลง */
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.news-date {
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
}

.news-excerpt {
    font-size: 14px;
    color: #555;
    margin-bottom: 20px;
}

.news-read-more {
    text-decoration: none;
    font-weight: bold;
    color: #007bff;
    transition: color 0.3s;
    font-size: 14px;
    /* ขนาดตัวอักษรเล็กลง */
}

.news-read-more:hover {
    color: #0056b3;
}

/* เพิ่มการจัดตำแหน่งลูกศร */
.slick-prev,
.slick-next {
    font-size: 24px;
    background: #fff;
    border: none;
    color: #333;
    border-radius: 50%;
    padding: 10px;
    z-index: 2;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.slick-prev {
    left: 10px;
}

.slick-next {
    right: 10px;
}

.slick-prev:hover,
.slick-next:hover {
    background-color: #007bff;
    color: white;
}

.slick-prev:focus,
.slick-next:focus {
    outline: none;
}

/* ปรับแต่งลูกศรและจุดเลื่อน */
.slick-dots {
    bottom: -30px;
    text-align: center;
}

.slick-dots li button {
    background-color: #007bff;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    opacity: 0.6;
}

.slick-dots li.slick-active button {
    background-color: #ffcc00;
    opacity: 1;
}

/* สำหรับขนาดหน้าจอเล็ก */
@media (max-width: 768px) {
    .blog-title {
        font-size: 35px;
    }

    .blog-description {
        font-size: 18px;
    }

    .blog-images {
        grid-template-columns: 1fr;
        /* ให้แสดงภาพใน 1 คอลัมน์บนหน้าจอเล็ก */
    }

    .blog-meta {
        font-size: 14px;
        flex-direction: column;
        align-items: flex-start;
    }

    .news-card {
        height: 300px;  /* ความสูงเล็กลงในมือถือ */
        margin-bottom: 2rem;  /* ลดระยะห่างระหว่างการ์ด */
    }
    .section-title {
        font-size: 24px;
        /* ขนาดหัวข้อเล็กลงในมือถือ */
    }

    .news-title {
        font-size: 16px;
        /* ขนาดหัวข้อข่าวเล็กลงในมือถือ */
    }

    .news-excerpt {
        font-size: 12px;
        /* ขนาดเนื้อหาข่าวเล็กลงในมือถือ */
    }

    .news-read-more {
        font-size: 12px;
        /* ขนาดข้อความ "อ่านเพิ่มเติม" เล็กลง */
    }
}