.news-split-container {
  display: flex;
  gap: 24px;
  padding: 50px 200px 50px 200px;
  box-sizing: border-box;
  width: 100%;
  min-height: 400px;
  align-items: stretch;
}

/* โซนซ้าย ไฮไลท์ */
.highlight-zone {
  flex: 0 0 40%;
  background-color: #3c4a44;
  color: white;
  padding: 30px 20px;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  min-width: 280px;
  height: 100%;
}

/* Label */
.highlight-zone label {
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  font-size: 30px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: left;
}

/* wrapper slider ปรับความสูง */
.highlight-wrapper {
  width: 100%;
  height: 520px;
  position: relative;
}

/* slick slider container */
.highlight-slider {
  display: flex;
  gap: 20px;
  height: 100%;
}

/* กล่องไฮไลท์ */
.highlight-box {
  background: #f4f5f3;
  color: #333;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px;
  width: 350px;
  box-sizing: border-box;
  height: 100%;
}

.highlight-box img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
  display: block;
}

.highlight-content {
  padding: 0;
  flex-grow: 1;
}

.highlight-content .date {
  font-size: 12px;
  color: #4caf50;
  margin-bottom: 5px;
}

.highlight-content h3 {
  font-size: 20px;
  margin: 0 0 10px 0;
  font-weight: 600;
  color: #333;
}

/* โซนขวา ข่าวทั่วไป */
.general-news-zone {
  flex: 1 1 60%;
  background-color: #d0d2cd;
  padding: 30px 30px;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: visible;
}

.general-news-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-grow: 1;
}
.summary {
  font-size: 14px;
  color: #555;
  margin-top: 8px;
  line-height: 1.4;
  max-height: 4.2em; /* ประมาณ 3 บรรทัด */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* ตัดบรรทัดเกิน 3 */
  -webkit-box-orient: vertical;
}


/* การ์ดข่าวทั่วไป */
.news-card {
  background: #f4f5f3;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  display: flex;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-height: 180px; /* เพิ่มความสูง */
  box-sizing: border-box;
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.news-card img {
  width: 250px;
  height: 100%; /* สูงเต็มการ์ด */
  object-fit: cover;
  border-radius: 12px 0 0 12px;
  flex-shrink: 0;
  display: block;
}

.card-content {
  padding: clamp(10px, 3vw, 20px);
  flex-grow: 1;
  background: transparent;
  border-radius: 0 12px 12px 0;
  color: #333;
  transition: background-color 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.news-card:hover .card-content {
  background-color: #81c784;
  color: #fff;
}

.card-content .date {
  font-size: clamp(8px, 1.3vw, 12px);
  color: #4caf50;
  margin-bottom: 3px;
}

.card-content h4 {
  font-size: clamp(10px, 2vw, 16px);
  margin: 0 0 10px 0;
  font-weight: 600;
  color: inherit;
}

.card-content .type {
  font-size: clamp(8px, 1.3vw, 12px);
  color: #4caf50;
}
.sdgs-tag {
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  font-weight: 600;
  font-size: 12px;
  color: white;
  padding: 6px 10px;
  margin-right: 6px;
  margin-top: 5px;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  user-select: none;
  cursor: default;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* เพิ่มเอฟเฟกต์ hover เล็กน้อย */
.sdgs-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

/* ไล่สีสำหรับแต่ละ SDG (ปรับสีให้ดูสดใส) */
.sdg-1  { background: linear-gradient(135deg, #E5243B, #B71C1C); }
.sdg-2  { background: linear-gradient(135deg, #DDA63A, #A57C1A); }
.sdg-3  { background: linear-gradient(135deg, #4C9F38, #2E6F1A); }
.sdg-4  { background: linear-gradient(135deg, #C5192D, #8B101F); }
.sdg-5  { background: linear-gradient(135deg, #FF3A21, #B72212); }
.sdg-6  { background: linear-gradient(135deg, #26BDE2, #0E8ABD); }
.sdg-7  { background: linear-gradient(135deg, #FCC30B, #B28707); }
.sdg-8  { background: linear-gradient(135deg, #A21942, #6F0F2D); }
.sdg-9  { background: linear-gradient(135deg, #FD6925, #B7490E); }
.sdg-10 { background: linear-gradient(135deg, #DD1367, #8B0E47); }
.sdg-11 { background: linear-gradient(135deg, #FD9D24, #B27608); }
.sdg-12 { background: linear-gradient(135deg, #BF8B2E, #7D5A14); }
.sdg-13 { background: linear-gradient(135deg, #3F7E44, #275527); }
.sdg-14 { background: linear-gradient(135deg, #0A97D9, #05638B); }
.sdg-15 { background: linear-gradient(135deg, #56C02B, #357810); }
.sdg-16 { background: linear-gradient(135deg, #00689D, #003E5C); }
.sdg-17 { background: linear-gradient(135deg, #19486A, #0E2A3F); }

.sdg-default {
  background: linear-gradient(135deg, #777, #444);
}

@media (min-width: 1441px) and (max-width: 1920px) {
  .news-split-container {
    padding: 50px 125px;
    min-height: auto; /* เพิ่มความสูงขั้นต่ำ */
  }

  .highlight-zone {
    min-width: 200px;
    height: auto; /* ปรับให้ความสูงอัตโนมัติ */
  }

  .highlight-wrapper {
    height: auto; /* ปรับความสูง slider */
  }
  
  .highlight-box {
    width: 100%;
  }
  
  .highlight-box img {
    height: 300px; /* ปรับความสูงของรูปภาพ */
  }
}

/* สำหรับหน้าจอเดสก์ท็อป */
@media (max-width: 1440px) {
  .news-split-container {
    padding: 30px 100px;
    min-height: auto;
  }

  .highlight-wrapper {
    height: auto; /* ลดความสูง slider */
  }
  .highlight-zone {
    min-width: 200px;
    height: auto;
  }
  .highlight-box {
    width: 100%;
  }
  .highlight-box img {
    height: 300px;
  }
  
  .general-news-zone {
    width: 100%;
    padding: 20px 15px;
    height: auto !important; /* ลบการตั้งค่าสูงคงที่ */
  }

  .news-card-img {
    max-width: 250px;
    height: 250px;
    border-radius: 12px 12px 0 0;
    object-fit: cover;
  }
}

@media (max-width:1332px) {
  .news-split-container {
    padding: 30px 100px;
    min-height: auto;
  }

  .highlight-zone {
    min-width: 150px;
    height: 640px; /* ปรับให้ความสูงอัตโนมัติ */
  }

  .highlight-wrapper {
    height: 640px; /* ลดความสูง slider */
  }

  .highlight-box {
    width: 100%;
    height: 300px;
  }

  .highlight-box img {
    height: 300px; /* ปรับความสูงของรูปภาพ */
  }

  .general-news-zone {
    width: 100%;
    padding: 20px 15px;
    height: auto !important; /* ลบการตั้งค่าสูงคงที่ */
  }
  .news-card {
    min-height: auto;
    align-items: center;
  }
  .news-card img {
    max-width: 200px;
    height: 200px;
    border-radius: 12px 12px 0 0;
    object-fit: cover;
  }
}

@media (max-width: 1244px) {
  .news-split-container {
    padding: 30px 80px;
    min-height: auto;
  }

  .highlight-zone {
    min-width: 150px;
    height: auto; /* ปรับให้ความสูงอัตโนมัติ */
  }

  .highlight-wrapper {
    height: auto; /* ลดความสูง slider */
  }

  .highlight-box {
    width: 100%;
    height: auto;
  }

  .highlight-box img {
    height: 300px; /* ปรับความสูงของรูปภาพ */
  }
  .highlight-box h3 {
    font-size: 18px;
  }

  .general-news-zone {
    width: 100%;
    padding: 20px 15px;
    height: auto !important; /* ลบการตั้งค่าสูงคงที่ */
  }
  .news-card {
    min-height: auto;
    align-items: center;
  }
  .news-card img {
    max-width: 200px;
    height: 200px;
    border-radius: 12px 12px 0 0;
    object-fit: cover;
  }
  .card-content {
    padding: 15px 10px;
  }
  .card-content h4 {
    font-size: 14px;
  }
  .card-content .date {
    font-size: 10px;
    margin-bottom: 5px;
  }
  .card-content .type {
    font-size: 10px;
    margin-bottom: 5px;
  }
  .sdgs-tag {
    font-size: 10px;
    padding: 5px 10px;
    margin-right: 6px;
  }
  
}

/* สำหรับหน้าจอแท็บเล็ตขนาดกลาง (iPad portrait/landscape) */
@media (max-width: 1024px) {
  .news-split-container {
    flex-direction: column;
    gap: 20px;
    min-height: auto;
  }

  .highlight-zone {
    flex: none;
    width: 100%;
    min-width: auto;
    padding: 20px 15px;
    height: auto;
  }

  .highlight-wrapper {
    height: 500px; /* ลดความสูง slider */
  }

  .highlight-box {
    width: 100%;
  }

  .highlight-box img {
    height: 350px;
  }

  .general-news-zone {
    flex: none;
    width: 100%;
    padding: 20px 15px;
    height: auto !important; /* ลบการตั้งค่าสูงคงที่ */
  }

  .news-card {
    min-height: auto;
    align-items: center;
  }

  .news-card img {
    max-width: 350px;
    height: 350px;
    border-radius: 12px 12px 0 0;
    object-fit: cover;
  }

  .card-content {
    padding: 15px 10px;
  }

  .sdgs-tag {
    font-size: 12px;
    padding: 5px 12px;
  }
}

@media (max-width: 768px) {
  .news-split-container {
    flex-direction: column;
    padding: 20px;
  }
  .highlight-zone {
    width: 100%;
    min-width: 600px;
    padding: 20px 15px;
    height: 500px;
  }

  .highlight-slider {
    height: 400px; /* ปรับความสูงของ slider */
  }
  .highlight-box img {
    height: 250px;
    object-fit: cover;
  }
  .highlight-box h3 {
    font-size: 18px;
  }
  .card-content h4 {
    font-size: 13px;
  }
}


/* สำหรับมือถือ (สมาร์ตโฟนทั่วไป) */
@media (max-width: 600px) {
  .news-split-container {
    flex-direction: column;
    gap: 16px;
    padding: 10px;
  }

  .highlight-zone {
    flex: none;
    width: 100%;
    min-width: auto;
    padding: 20px 15px;
    height: 420px;
  }

  .highlight-zone label {
    font-size: 16px;
    text-align: center;
  }

  .highlight-wrapper {
    height: auto;
  }

  .highlight-slider {
    height: auto;
    display: block; /* เปลี่ยนเป็นบล็อกเพื่อให้แสดงเต็มความกว้าง */
  }

  .highlight-box img {
    height: 200px;
    object-fit: cover;
  }

  .highlight-box h3{
    font-size: 16px;
  }

  .general-news-zone {
    padding: 15px 10px;
  }

  .news-card {
    min-height: auto;
    align-items: center;
  }

  .news-card img {
    max-width: 200px;
    height: auto;
    border-radius: 12px 12px 0 0;
    margin: 0 auto 8px auto;
  }

  .card-content {
    padding: 12px 8px;
    border-radius: 0 0 12px 12px;
  }

  .card-content h4 {
    font-size: 11px;
    margin: 0 0 8px 0;
  }

  .sdgs-tag {
    font-size: 8px;
    padding: 4px 8px;
    margin-right: 6px;
  }

  /* ซ่อน arrows slick slider บนมือถือ (ถ้าต้องการ) */
  .slick-arrow {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .general-news-zone {
    padding: 15px 10px;
  }

  .news-card {
    min-height: auto;
    align-items: center;
  }

  .card-content {
    padding: 12px 8px;
    border-radius: 0 0 12px 12px;
  }

  .card-content .date {
    font-size: 6px;
    margin-bottom: 3px;
  } 

  .card-content .type {
    font-size: 6px;
    margin-bottom: 5px;
  }

  .sdgs-tag {
    font-size: 5px;
    padding: 4px 5px;
    margin-right: 6px;
  }

  /* ซ่อน arrows slick slider บนมือถือ (ถ้าต้องการ) */
  .slick-arrow {
    display: none !important;
  }
}

@media(max-width: 425px) {
  .highlight-box {
    width: 100%;
    height: auto;
  }

  .highlight-box img {
    height: 200px;
    object-fit: cover;
  }

  .highlight-content h3 {
    font-size: 14px;
  }

  .highlight-content .date {
    font-size: 10px;
  }
  .highlight-content p {
    font-size: 12px;
  }
  .news-card img {
    max-width: 150px;
    height: auto;
    border-radius: 12px 12px 0 0;
  }
  .card-content h4 {
    font-size: 12px;
  }
  .card-content .date {
    font-size: 8px;
    margin-bottom: 3px;
  }
  .card-content .type {
    font-size: 8px;
    margin-bottom: 5px;
  }
  .sdgs-tag {
    font-size: 6px;
    padding: 3px 5px;
    margin-right: 4px;
  }
  .news-split-container {
    padding: 10px;
  }
}

@media (max-width: 375px) {
  .highlight-zone {
    padding: 15px;
  }

  .highlight-wrapper {
    height: auto;
  }

  .highlight-box img {
    height: 180px;
  }

  .highlight-content h3 {
    font-size: 14px;
  }

  .highlight-content .date {
    font-size: 10px;
  }
  
  .news-card {
    flex-direction: column;
    align-items: center;
    max-height: none; /* ลบความสูงคงที่ */
  }
  
  .news-card img {
    max-width: 200px;
    height: auto;
    margin-top: 10px;
    border-radius:  10px;

  }
  
  .card-content h4 {
    font-size: 12px;
  }
  
}