html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-size: 14px;
    font-family: 'Arial', sans-serif; 
    
}
body, #main-content {
  opacity: 1;
  transition: opacity 0.4s ease;
}

body.fade-out, #main-content.fade-out {
  opacity: 0;
}

body {
  animation: fadeIn 0.4s forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }

}.content {
    position: relative;
    z-index: 2;
    background-color: #ffffff;
      transition: 
    border-radius 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.4s ease;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* ซ้าย-ขวา */
  gap: 90px;
  max-width: 1300px;
  margin: 0 auto;
  align-items: start;
}

/* ฝั่งซ้าย */
.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr; /* ซ้าย-ขวา */
  align-items: center;            /* จัดให้อยู่กลางแนวตั้งทั้งคอลัมน์ */
}
.left-content {
  text-align: left;
  padding: 30px;
  
}
.row2 .right  p {
    font-size: 16px;
    line-height: 1.6;
        font-weight: lighter;
}

.right-images {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.left-content p {
    font-size: 16px;
    line-height: 1.6;
        font-weight: lighter;
}

/* กล่องของรูปหลัก */
.top-row {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 16; /* ✅ ล็อกอัตราส่วนภาพให้เท่ากัน เช่น 16:9 */
  overflow: hidden;     /* ซ่อนส่วนเกินของภาพ */
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* รูปหลัก */
.top-row img {
  width: 100%;
  height: 100%;        /* ✅ ให้ภาพเต็มกรอบ */
  object-fit: cover;   /* ✅ ครอบภาพให้เต็มกรอบโดยไม่ยืด */
  border-radius: 15px;
  transition: opacity 0.3s ease;
}
.image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 15px;
}

.image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* เริ่มต้นซ่อนไว้ */
#nextImage {
  opacity: 0;
  transform: translateX(100%);
}


/* ปุ่มซ้าย-ขวา ให้อยู่ข้างรูปหลัก */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-30%);
  font-size: 22px;
  color: white;
  background: rgba(0,0,0,0.4);
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s ease;
}

.prev:hover, .next:hover {
  background: rgba(0,0,0,0.7);
}

/* วางตำแหน่งซ้าย-ขวา ของปุ่ม */
.prev {
  left: -70px;  /* ขยับออกไปนอกกรอบเล็กน้อย */
}

.next {
  right: -70px;
}

/* คอนเทนเนอร์แถวล่าง */
.carousel-container {
  margin-top: 25px;
  display: flex;
  justify-content: center;
}

.bottom-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.bottom-row img {
  width: 100%;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bottom-row img:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}



@media (max-width: 768px) {
  /* เปลี่ยน layout เป็นคอลัมน์เดียว */
  .grid-container {
    display: flex;
    flex-direction: column; /* text บน รูปล่าง */
    gap: 20px;
  }

  /* ฝั่งซ้าย: บทความ */
  .left-content {
    order: 1; /* อยู่บน */
    margin-top: 0; /* ลด margin-top ของ mobile */
    padding: 0 16px;
  }

  /* ฝั่งขวา: รูปภาพ */
.right-images {
  order: 2;
  width: 100%;
  position: relative;
  padding: 0 16px;
  box-sizing: border-box; /* 🔹 รวม padding เข้า width 100% */
}

  /* carousel wrapper */
  .carousel-container {
    position: relative;
    width: 100%;
  }

  /* ปุ่ม prev/next อยู่บนรูป */
  .prev,
  .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
    font-size: 18px;
    background: rgba(0,0,0,0.45);
    color: #fff;
    border-radius: 50%;
  }

  .prev {
    left: 10px;
  }

  .next {
    right: 10px;
  }

  /* รูปใหญ่เต็ม container */
  .top-row {
    width: 100%;
    height: 520px;       /* ความสูงคงที่ ให้รูปไม่เกินจอ */
    max-height: 550px;   /* ปรับสูงสุดได้ถ้าต้องการ */
    overflow: hidden;    /* ซ่อนส่วนเกิน */
    position: relative;
    border-radius: 8px;  /* ถ้าต้องการมุมโค้ง */
  }

  .top-row img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* เติมเต็ม container โดยไม่บิด */
    display: block;
  }
}



@media (max-width: 425px) {


h1 {
  font-size: 18px;
  white-space: nowrap;      /* ห้ามขึ้นบรรทัดใหม่ */
  overflow: hidden;         /* กันล้น */
  text-overflow: ellipsis;  /* … เมื่อยาวเกิน */
  line-height: 1.3;
  max-width: 100%;
}

h2 {
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  max-width: 100%;
}



  .left-content p,
  .row2 .right p {
    font-size: 14px;
  }

  .prev {
    left: 10px;
  }

  .next {
    right: 10px;
  }

  .bottom-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .left-content p,
  .row2 .right p {
    font-size: 14px;
  }
    .top-row {
    width: 100%;
    height: 420px;       /* ความสูงคงที่ ให้รูปไม่เกินจอ */
    max-height: 450px;   /* ปรับสูงสุดได้ถ้าต้องการ */
    overflow: hidden;    /* ซ่อนส่วนเกิน */
    position: relative;
    border-radius: 8px;  /* ถ้าต้องการมุมโค้ง */
  }

  .top-row img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* เติมเต็ม container โดยไม่บิด */
    display: block;
  }
}



@media (max-width: 375px) {
  .top-row {
      position: relative; /* 🔹 จำเป็นสำหรับ absolute ของปุ่ม */
    border-radius: 10px;
  }

  .bottom-row {
    gap: 10px;
  }

.prev,
.next {
  position: absolute;
  top: 50%;                    /* กลางแนวตั้ง */
  transform: translateY(-50%);
  width: 30px;                  /* ขนาดปุ่ม */
  height: 30px;
  font-size: 16px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 5;
}

/* ขยับเข้ามาภายในรูป */
.prev {
  left: 20px;   /* ระยะจากขอบซ้ายของรูป */
}

.next {
  right: 20px;  /* ระยะจากขอบขวาของรูป */
}
    body {
    font-size: 12px;
  }
    .right-images img {
    max-width: 350px;   /* ย่อรูปลง */
  }

  .left-content p,
  .row2 .right p {
    font-size: 13.5px;
  }
  
.container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0px;
  box-sizing: border-box;
}

  .grid-container {
    display: grid;
    grid-template-columns: 1fr; /* บังคับให้เป็นแถวเดียว */
    gap: 12px;
  }
  .page-title h1 {
    font-size: 18px;
    line-height: 1.3;
    word-break: break-word;   /* ⭐ สำคัญ */
      overflow-wrap: break-word;    /* สำรองอีกตัว */
  margin: 0;   
  }

  .page-title h2 {
    font-size: 14px;
    margin-top: 8px;
  }

  .page-title p {
    font-size: 12px;
    line-height: 1.6;
    word-break: break-word;
  }
    .left-content.page-title {
    width: 100%;
    max-width: 100%;
    padding: 0 12px;       /* บีบซ้าย-ขวา */
    margin-top: 20px;     /* ลดจาก 40 */
    box-sizing: border-box;
  }
    .right-images {
  width: 100%;
  padding: 0 12px;  /* หรือปรับน้อยลงถ้าจำเป็น */
  box-sizing: border-box; /* 🔹 รวม padding เข้า width */
}
      .top-row {
    width: 100%;
    height: 320px;       /* ความสูงคงที่ ให้รูปไม่เกินจอ */
    max-height: 320px;   /* ปรับสูงสุดได้ถ้าต้องการ */
    overflow: hidden;    /* ซ่อนส่วนเกิน */
    position: relative;
    border-radius: 8px;  /* ถ้าต้องการมุมโค้ง */
  }

  .top-row img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* เติมเต็ม container โดยไม่บิด */
    display: block;
  }
}
@media (max-width: 320px) {
 .top-row {
    border-radius: 10px;
  }

  .bottom-row {
    gap: 10px;
  }

  .prev,
  .next {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
    body {
    font-size: 12px;
  }


  .left-content p,
  .row2 .right p {
    font-size: 13.5px;
  }
.container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0px;
  box-sizing: border-box;
}

  .grid-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
.page-title h1 {
  font-size: 14px;
  line-height: 1.3;
  word-break: break-word;       /* ตัดคำยาว */
  overflow-wrap: break-word;    /* สำรองอีกตัว */
  margin: 0;                     /* ลบ margin default */
}

.page-title h2 {
  font-size: 10px;
  margin-top: 8px;
  word-break: break-word;
  overflow-wrap: break-word;
}

  .page-title p {
    font-size: 8px;
    line-height: 1.6;
    word-break: break-word;
  }
.left-content.page-title {
  width: 100%;
  max-width: 100%;
  padding: 0 6px;   /* ลด padding ซ้าย-ขวา */
  margin-top: 20px;
  box-sizing: border-box; /* รวม padding เข้า width */
}

  .right-images {
  width: 100%;
  padding: 0 12px;  /* หรือปรับน้อยลงถ้าจำเป็น */
  box-sizing: border-box; /* 🔹 รวม padding เข้า width */
}
      .top-row {
    width: 100%;
    height: 320px;       /* ความสูงคงที่ ให้รูปไม่เกินจอ */
    max-height: 320px;   /* ปรับสูงสุดได้ถ้าต้องการ */
    overflow: hidden;    /* ซ่อนส่วนเกิน */
    position: relative;
    border-radius: 8px;  /* ถ้าต้องการมุมโค้ง */
  }

  .top-row img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* เติมเต็ม container โดยไม่บิด */
    display: block;
  }
}