body {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: 'Jost', sans-serif;

}

html {

  scroll-behavior: smooth;

}


html, body {

  overflow-x: hidden;

}



*, *::before, *::after {

  box-sizing: border-box;

}



.hero {

  background: url("img/banner_1.jpg")  no-repeat center center/cover;

  display: flex;

  background-size: cover;

  height: 100vh; /* หรือปรับตามต้องการ */

  flex-direction: column;

  color: #003366;

}



.top-bar {

  background-color: #2d73b9;

  padding: 10px 80px;

  position: fixed; /* <<< ตรงนี้คือสิ่งที่ล็อกไว้ */

  top: 0;

  left: 0;

  width: 100%;

  z-index: 1000;

  box-shadow: 0 2px 8px rgba(0,0,0,0.1);

}



.logo {

  height: 80px;

}



.navbar {

  display: flex;

  justify-content: center;

  margin-top: 80px;

  font-size: 33px;





  /* border-bottom: 3px solid #1a2b57;

  width: fit-content;

  margin: 0 auto; */

 

}

.menu-underline {

  border: none;

  border-top: 3px solid #031d67;

  width: 64%; /* หรือจะใช้ width: fit-content; แล้วครอบด้วย container */

  margin: -30px auto 20px auto; /* <— ขยับเส้นขึ้นด้วย margin-top ติดลบ */

}





.navbar ul {

  list-style: none;

  display: flex;

  gap: 30px;

  align-items: center;

 

}

/* .navbar ul {

  transition: all 0.3s ease;

} */



.navbar li a {

  text-decoration: none;

  color: #003366;

  margin: 0 20px;

  font-weight: bold;

}



.paw-icon {

  height: 64px;

}



.hamburger {

  display: none;

  font-size: 28px;

  cursor: pointer;

  color: #003366;

  padding: 10px;

  position: absolute;

  right: 20px;

  top: 25px;

}



/* Responsive for Mobile */

@media (max-width: 768px) {

  .hero {

    background-image: url('img/banner_12.jpg');

  }



  .navbar ul {

    display: none;

    flex-direction: column;

    gap: 10px;

    background-color: white;

    position: absolute;

    top: 80px;

    left: 0;

    width: 100%;

    padding: 20px 0;

    box-shadow: 0 4px 10px rgba(0,0,0,0.1);

    z-index: 999;

  }

  .navbar ul {

  transition: all 0.3s ease-in-out;

  opacity: 0;

  transform: translateY(-20px);

  pointer-events: none;

}



.navbar ul.show {

  opacity: 1;

  transform: translateY(0);

  pointer-events: auto;

}

  .menu-underline {

    display: none;

    width: 90%;

    margin: -20px auto 16px auto;

  }





  .navbar ul.show {

    display: flex;

  }

 





  @media (max-width: 768px) {

  .hamburger {

    display: block !important;

    position: absolute;

    top: 20px;

    right: 20px;

    z-index: 2000;

    color: #003366;

  }

}

 

}

.section1 {

  position: relative;

  text-align: center;

  margin: 60px auto;

  width: fit-content;

  max-width: 90%;

}



.section1 p {

  font-weight: bold;

  color: #031d67;

  font-size: clamp(24px, 6vw, 60px); /* ปรับอัตโนมัติระหว่าง 24–60px */

  font-family: "Jost", sans-serif;

  margin: 0;

  position: relative;

  z-index: 1;

  background-color: #ffffff;

  padding: 0 20px;

  line-height: 1.2;

  word-break: break-word;

}





/* ซ่อน banner mobile 2 ในสถานะปกติ (Desktop) */

.section-banner-2-mobile {

  display: none;

  width: 100%;

  height: auto;

  margin-top: 20px; /* ปรับระยะห่างตามต้องการ */

}



.section-banner-2-mobile img {

  width: 100%;

  height: auto;

  display: block;

}

.section-banner-3-mobile {

  display: none;

  width: 100%;

  height: auto;

  margin-top: 20px; /* ปรับระยะห่างตามต้องการ */

}



.section-banner-3-mobile img {

  width: 100%;

  height: auto;

  display: block;

}

/* .section1::before,

.section1::after {

  content: "";

  position: absolute;

  top: 50%;

  width: 600px;

  height: 5px;

  background-color: #3878b8;

} */



.section1::before {

  right: 100%;

  margin-right: 10px;

}



.section1::after {

  left: 100%;

  margin-left: 10px;

}



/* ✅ ซ่อนเส้นบนจอแคบ */

@media (max-width: 768px) {

  .section1::before,

  .section1::after {

    display: none;

  }



  .section1 {

    margin: 40px auto;

  }

   


  /* 🌟 ซ่อน icon_42.png และ icon_43.png เมื่อหน้าจอเล็ก 🌟 */

  .section1-1,

  .section1-2 {

    display: none;

  }

 

  /* 🌟 แสดง banner_19.png (section-banner-2-mobile) เมื่อหน้าจอเล็ก 🌟 */

  .section-banner-2-mobile {

    display: block;

  }



  /* 🌟 ซ่อน icon_40.png และ icon_41.png เมื่อหน้าจอเล็ก 🌟 */

  .section1-3,

  .section1-4 {

    display: none;

  }

 

  /* 🌟 แสดง banner_20.png (section-banner-3-mobile) เมื่อหน้าจอเล็ก 🌟 */

  .section-banner-3-mobile {

    display: block;

  }

}




.product-container {

  display: flex;

  flex-direction: column;

  gap: 40px;

}



/* สินค้าแต่ละแถว: รูปซ้าย ข้อความขวา (หรือสลับได้) */

.product {

  display: flex;

  align-items: center;

  justify-content: space-between;

 

}



.image-wrapper {

  position: relative;

  width: 100%;

  max-width: 1000px; /* ปรับตามต้องการ เช่น 1000px */

  height: auto;

  aspect-ratio: 5 / 2; /* รักษาสัดส่วนแบบ responsive */

  flex-shrink: 0;

}



.image-wrapper img.bg {

  display: block;

  width: 100%;

  height: auto;

  object-fit: cover;

  border-radius: 8px;

}



.image-wrapper a img.fg {

  position: absolute;

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 60%; /* หรือปรับขนาดตามต้องการ */

  height: auto;

  z-index: 2;

  object-fit: contain;

  transition: transform 0.2s;

}





.image-wrapper a img.fg:hover {

  transform: translateX(-50%) scale(1.10);

}





/* แถวคี่: รูปอยู่ซ้าย (ค่า default) */

.product:nth-child(odd) {

  flex-direction: row;

}



/* แถวคู่: สลับฝั่งให้รูปอยู่ขวา ข้อความอยู่ซ้าย */

.product:nth-child(even) {

  flex-direction: row-reverse;

}



.product-name {

  text-align: center;

  font-size: 54px;

  font-weight: bold;

  color: #031d67;

  width: 100%;

}

.product-name a {

  text-decoration: none !important;

}



/* สลับทิศทางภาพ-ข้อความ ทุกแถวคู่ */

.product:nth-child(even) {

  flex-direction: row-reverse;

}





/* Responsive สำหรับมือถือ */

@media (max-width: 768px) {

  .product {

    flex-direction: column !important;

    text-align: center;

    gap: 12px;

  }


.product-name {
        font-size: 24px;
        padding: 16px 16px 0 16px; /* เพิ่ม padding ด้านบนเล็กน้อย */
        order: 1; /* 👈 สั่งให้ product-name ขึ้นมาเป็นอันดับที่ 1 */
    }

    .image-wrapper {
        width: 100%;
        max-width: 90vw;
        aspect-ratio: 5 / 2;
        order: 2; /* 👈 สั่งให้ image-wrapper เป็นอันดับที่ 2 */
    }

}



 .diamond-container {

      display: flex;

       background-color: #fff1d2;

      flex-direction: column;

      align-items: center;

      position: relative;

      gap: 1px;

    }



    .diamond-row {

      display: flex;

      justify-content: center;

      gap: 100px;

      flex-wrap: wrap;

    }



    .diamond-img {

      width: 800px;

      height: 500px;

      object-fit: contain;

      transition: transform 0.2s;

    }



    .diamond-img:hover {

      transform: scale(1.20);

    }



    a {

      display: inline-block;

    }



    @media (max-width: 768px) {

  .product-container, .product-container1 {

    flex-direction: column;

    align-items: center;

  }



  .diamond-row {

    flex-direction: column;

    align-items: center;

  }



  .diamond-img {

    width: 60%;

    margin: 10px 0;

  }



  .product-row {

    margin: 60px 0;

   

  }

}



.product-container1 {

  display: block;

  width: 100%;

  /*max-width: 1200px; /* ปรับความกว้างสูงสุดของ layout */

  margin: 0 auto;

  height: auto;

   

}



.product-row {

  align-items: center;

  justify-content: center;

}



.product-flex {

  display: flex;

  gap: 80px; /* ระยะห่างระหว่าง icon กับ pouch */

  width: 100%;

  height: auto;

}





/* สลับ pouch อยู่ซ้ายบ้างขวาบ้าง */

.product-row:nth-child(even) .product-flex {

  flex-direction: row-reverse;

}



/* รูป background (icon) */

.product-flex {

  display: flex;

  gap: 80px;

  align-items: center;

  justify-content: center;

  width: 100%;

  height: auto;

}



/* ทำให้สองฝั่งกินพื้นที่เท่ากัน */

.icon-img,

.product-flex a {

  flex: 1;

  display: flex;

  justify-content: center;

  align-items: center;

}



/* ขนาดภาพ icon */

.icon-img {

  max-width: 100%;

  width: 80%;

  height: auto;

  padding: 20px;

  object-fit: contain;

}



/* ขนาด pouch */

.pouch-img {

  max-width: 100%;

  width: 100%;

  height: auto;

  object-fit: contain;

  transition: transform 0.3s ease;

  max-width: 250px; /*ขนาดสูงสุดของซองอาหาร*/

  width: auto;

}



.pouch-img:hover {

  transform: scale(1.2);

}





/* lightbox */

.lightbox-overlay {

  display: none;

  position: fixed;

  z-index: 999;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  background: rgba(0, 0, 0, 0.85);

  justify-content: center;

  align-items: center;

}



.lightbox-overlay img {

  max-width: 90%;

  max-height: 90%;

  border-radius: 12px;

}





/* Responsive */

@media (max-width: 768px) {

  .product-row {

    flex-direction: column;

    align-items: center;

  }



  .product-flex {

    flex-direction: column !important;

    gap: 20px;

    max-width: 100%;

    padding: 0 12px;

  }



  .icon-img {

    width: 100%;

    max-width: 90vw;

    height: auto;

  }



  .pouch-img {

    position: inherit;

    width: 50%;

    max-width: 90vw;

    height: auto;

  }

  .pouch-img:hover {

    transform: none;

  }

}



.section1-1 img  {

        width: 100%;

        height: auto;

        display: flex;

    }

    .section1-2 img  {

        width: 100%;

        height: auto;

        display: flex;

    }

    .section1-3 img  {

        width: 100%;

        height: auto;

        display: flex;

    }

    .section1-4 img  {

        width: 100%;

        height: auto;

        display: flex;

    }



    @media (max-width: 768px) {

  .product-container,

  .product-container1,

  .section1 {

    padding: 0 20px;

  }

}









.footer {

  background-color: #f0eee5;

  padding:  0;

  font-family: 'Jost', sans-serif;

  color: #1a1a1a;

}



.footer-container {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-around;

  text-align: center;

  padding-bottom: 20px;

}



.footer-section {

  max-width: 300px;

  margin-bottom: 30px;

}



.footer-section h3 {

  color: #3366b8;

  margin-bottom: 10px;

  font-weight: bold;

}



.footer-section h4 {

  color: #3366b8;

  margin: 20px 0 10px;

  font-weight: bold;

}



.footer-section a {

  color: inherit;

  text-decoration: none;

}



.social-icons img,

.shop-icons img {

  width: 60px;

  height: 60px;

  margin: 5px;

}



.footer-bottom {

  background-color: #3375b9;

  color: white;

  text-align: center;

  padding: 10px 0;

  font-size: 14px;

}