* {
    margin: 0; /* ระบุให้ทุกองค์ประกอบไม่มี margin */
    padding: 0; /* ระบุให้ทุกองค์ประกอบไม่มี padding */
    box-sizing: border-box; /* ทำให้การคำนวณขนาดขององค์ประกอบรวม padding และ border */
}
body {
    font-family: Arial, sans-serif; /* กำหนดฟอนต์สำหรับทั้งหน้า */
    background: url(img/0111.jpg);
    background-size: cover; /* ปรับขนาดภาพพื้นหลังให้เต็มพื้นที่ */
    color: #333; /* กำหนดสีตัวอักษร */
}
nav {
    background-color: #5a1b1b;  /* กำหนดสีพื้นหลังของ navigation */
    overflow: hidden;  /* ซ่อนส่วนที่เกินออกจาก navigation */
    top: 0;  /* ทำให้ navigation อยู่ด้านบนของหน้า */
    position: fixed; /* ทำให้ navigation อยู่ด้านบนของหน้า */
    width: 100%; /* กำหนดความกว้างของ navigation ให้เต็มหน้าจอ */
    height: 70px; /* กำหนดความสูงของ navigation */
    z-index: 1000; /* ทำให้ navigation อยู่เหนือองค์ประกอบอื่นๆ */
}
nav img {
    float: left;  /* จัดรูปภาพให้อยู่ทางซ้าย */
    width: 70px;  /* กำหนดความกว้างของรูปภาพ */
    height: 70px;  /* กำหนดความสูงของรูปภาพ */
    margin-right: 10px;  /* กำหนดระยะห่างขวาของรูปภาพ */
    margin-left: 5px;  /* กำหนดระยะห่างซ้ายของรูปภาพ */

}

main {
    padding: 10px;  /* กำหนด padding ให้กับ main */
    
}

.img_01{
  width: min(100%, 1200px);  /* กำหนดความกว้างของกล่องให้เต็มหน้าจอแต่ไม่เกิน 1200px */
  max-width: 800px;   /* กำหนดความกว้างสูงสุดของกล่อง */
  margin: 12px auto;  /* จัดกึ่งกลางกล่อง */
  padding: 10px;  /* กำหนด padding ให้กับกล่อง */
  border-radius: 18px;  /* ให้เข้ากับมุมกล่อง */
  position: relative;  
  margin-top: 80px; /* กำหนดระยะห่างด้านบนของกล่องรูป */

  border: 3px solid transparent; /* กำหนดขอบเป็นโปร่งใสเพื่อให้เห็น background ที่อยู่ด้านหลัง */
  background:
    linear-gradient(#0b0b0f, #0b0b0f) padding-box,
    conic-gradient(from var(--a),
      #ffcc00, #ff3d77, #7c3aed, #00d4ff, #ffcc00
    ) border-box;

  animation: borderSpin 2.5s linear infinite;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

.img_01 img{
  width: 100%;  /* กำหนดความกว้างของรูปภาพในกล่อง */
  height: auto;  /* ให้ความสูงของรูปภาพปรับตามความกว้าง */
  display: block;  /* ทำให้รูปภาพเป็นบล็อกเพื่อให้จัดการกับ margin ได้ง่ายขึ้น */
  border-radius: 12px;  /* กำหนดมุมโค้งให้กับรูปภาพในกล่อง */
}

/* ทำให้ conic-gradient หมุนแบบลื่น */
@property --a{
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes borderSpin{
  to{ --a: 360deg; }
}

.img_02{
  width: min(100%, 1200px);  /* กำหนดความกว้างของกล่องให้เต็มหน้าจอแต่ไม่เกิน 1200px */
  max-width: 800px;   /* กำหนดความกว้างสูงสุดของกล่อง */
  margin: 12px auto;  /* จัดกึ่งกลางกล่อง */
  padding: 10px;  /* กำหนด padding ให้กับกล่อง */
  border-radius: 18px;  /* ให้เข้ากับมุมกล่อง */
  position: relative;  

  border: 3px solid transparent;
  background:
    linear-gradient(#0b0b0f, #0b0b0f) padding-box,
    conic-gradient(from var(--a),
      #ffcc00, #ff3d77, #7c3aed, #00d4ff, #ffcc00
    ) border-box;

  animation: borderSpin 2.5s linear infinite;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

.img_02 img{
  width: 100%;  /* กำหนดความกว้างของรูปภาพในกล่อง */
  height: auto;  /* ให้ความสูงของรูปภาพปรับตามความกว้าง */
  display: block;  /* ทำให้รูปภาพเป็นบล็อกเพื่อให้จัดการกับ margin ได้ง่ายขึ้น */
  border-radius: 12px;  /* กำหนดมุมโค้งให้กับรูปภาพในกล่อง */
}

/* ทำให้ conic-gradient หมุนแบบลื่น */
@property --a{
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes borderSpin{
  to{ --a: 360deg; }
}

button{
  background: transparent;
  border: 0;
  padding: 0;
}

.button img{
    width: 100%; /* กำหนดความกว้างของรูปภาพ */
    max-width: 200px; /* กำหนดความกว้างของรูปภาพ */
    position: fixed; /* ทำให้ปุ่มอยู่ในตำแหน่งที่กำหนด */
    bottom: 0px; /* ระยะห่างจากขอบล่าง */
    right: 20px;  /* ระยะห่างจากขอบขวา */
    left: 0px; /* ระยะห่างจากขอบซ้าย */
    z-index: 1000; /* ทำให้ปุ่มอยู่เหนือองค์ประกอบอื่นๆ */
}
@media screen and (min-width: 320px) {
    .button img {
        width: 30%; /* ปรับความกว้างของปุ่มสำหรับหน้าจอเล็ก */
        max-width: none; /* ยกเลิกการจำกัดความกว้างสูงสุด */
        left: 0px; /* ปรับระยะห่างจากขอบซ้ายสำหรับหน้าจอเล็ก */
    }
    
}
@media screen and (min-width: 480px) {
    .button img {
        width: 30%; /* ปรับความกว้างของปุ่มสำหรับหน้าจอเล็ก */
        max-width: none; /* ยกเลิกการจำกัดความกว้างสูงสุด */
        left: 0px; /* ปรับระยะห่างจากขอบซ้ายสำหรับหน้าจอเล็ก */
    }
    
}
@media screen and (min-width: 1024px) {
    .button img {
        width: 20%; /* ปรับความกว้างของปุ่มสำหรับหน้าจอเล็ก */
        max-width: none; /* ยกเลิกการจำกัดความกว้างสูงสุด */
        left: 0px; /* ปรับระยะห่างจากขอบซ้ายสำหรับหน้าจอเล็ก */
    }
    
}
@media screen and (min-width: 1200px) {
    .button img {
        width: 18%; /* ปรับความกว้างของปุ่มสำหรับหน้าจอเล็ก */
        max-width: none; /* ยกเลิกการจำกัดความกว้างสูงสุด */
        left: 250px; /* ปรับระยะห่างจากขอบซ้ายสำหรับหน้าจอเล็ก */
    }
    
}

.button1{
  background: transparent;
  border: 0;
  padding: 0;
}

.button1 img{
    width: 100%; /* กำหนดความกว้างของรูปภาพ */
    max-width: 200px; /* กำหนดความกว้างของรูปภาพ */
    position: fixed; /* ทำให้ปุ่มอยู่ในตำแหน่งที่กำหนด */
    bottom: 0px; /* ระยะห่างจากขอบล่าง */
    right: 20px;  /* ระยะห่างจากขอบขวา */
    left: 50%; /* ระยะห่างจากขอบซ้าย */
    transform: translateX(-50%); /* จัดกึ่งกลางปุ่ม */
    z-index: 1000; /* ทำให้ปุ่มอยู่เหนือองค์ประกอบอื่นๆ */
}
@media screen and (min-width: 320px) {
    .button1 img {
        width: 30%; /* ปรับความกว้างของปุ่มสำหรับหน้าจอเล็ก */
        max-width: none; /* ยกเลิกการจำกัดความกว้างสูงสุด */
        left: 50%; /* ปรับระยะห่างจากขอบซ้ายสำหรับหน้าจอเล็ก */
        transform: translateX(-50%); /* จัดกึ่งกลางปุ่มสำหรับหน้าจอเล็ก */
    }
    
}
@media screen and (min-width: 480px) {
    .button1 img {
        width: 30%; /* ปรับความกว้างของปุ่มสำหรับหน้าจอเล็ก */
        max-width: none; /* ยกเลิกการจำกัดความกว้างสูงสุด */
        left: 50%; /* ปรับระยะห่างจากขอบซ้ายสำหรับหน้าจอเล็ก */
        transform: translateX(-50%); /* จัดกึ่งกลางปุ่มสำหรับหน้าจอเล็ก */
    }
    
}
@media screen and (min-width: 1024px) {
    .button1 img {
        width: 20%; /* ปรับความกว้างของปุ่มสำหรับหน้าจอเล็ก */
        max-width: none; /* ยกเลิกการจำกัดความกว้างสูงสุด */
        left: 50%; /* ปรับระยะห่างจากขอบซ้ายสำหรับหน้าจอเล็ก */
        transform: translateX(-50%); /* จัดกึ่งกลางปุ่มสำหรับหน้าจอเล็ก */
    }
    
}
@media screen and (min-width: 1200px) {
    .button1 img {
        width: 18%; /* ปรับความกว้างของปุ่มสำหรับหน้าจอเล็ก */
        max-width: none; /* ยกเลิกการจำกัดความกว้างสูงสุด */
        left: 50%; /* ปรับระยะห่างจากขอบซ้ายสำหรับหน้าจอเล็ก */
        transform: translateX(-50%); /* จัดกึ่งกลางปุ่มสำหรับหน้าจอเล็ก */
    }
    
}

.button2{
  background: transparent;
  border: 0;
  padding: 0;
}

.button2 img{
    width: 100%; /* กำหนดความกว้างของรูปภาพ */
    max-width: 200px; /* กำหนดความกว้างของรูปภาพ */
    position: fixed; /* ทำให้ปุ่มอยู่ในตำแหน่งที่กำหนด */
    bottom: 0px; /* ระยะห่างจากขอบล่าง */
    right: 0px;  /* ระยะห่างจากขอบขวา */
    z-index: 1000; /* ทำให้ปุ่มอยู่เหนือองค์ประกอบอื่นๆ */
}

@media screen and (min-width: 320px) {
    .button2 img {
        width: 30%; /* ปรับความกว้างของปุ่มสำหรับหน้าจอเล็ก */
        max-width: none; /* ยกเลิกการจำกัดความกว้างสูงสุด */
        right: 0px; /* ปรับระยะห่างจากขอบขวาสำหรับหน้าจอเล็ก */
    }
    
}

@media screen and (min-width: 480px) {
    .button2 img {
        width: 30%; /* ปรับความกว้างของปุ่มสำหรับหน้าจอเล็ก */
        max-width: none; /* ยกเลิกการจำกัดความกว้างสูงสุด */
        right: 0px; /* ปรับระยะห่างจากขอบขวาสำหรับหน้าจอเล็ก */
    }
    
}

@media screen and (min-width: 600px) {
    .button2 img {
        width: 30%; /* ปรับความกว้างของปุ่มสำหรับหน้าจอเล็ก */
        max-width: none; /* ยกเลิกการจำกัดความกว้างสูงสุด */
        right: 0px; /* ปรับระยะห่างจากขอบขวาสำหรับหน้าจอเล็ก */
    }
    
}

@media screen and (min-width: 768px) {
    .button2 img {
        width: 30%; /* ปรับความกว้างของปุ่มสำหรับหน้าจอเล็ก */
        max-width: none; /* ยกเลิกการจำกัดความกว้างสูงสุด */
        right: 0px; /* ปรับระยะห่างจากขอบขวาสำหรับหน้าจอเล็ก */
    }
    
}
@media screen and (min-width: 900px) {
    .button2 img {
        width: 30%; /* ปรับความกว้างของปุ่มสำหรับหน้าจอเล็ก */
        max-width: none; /* ยกเลิกการจำกัดความกว้างสูงสุด */
        right: 0px; /* ปรับระยะห่างจากขอบขวาสำหรับหน้าจอเล็ก */
    }
    
}
@media screen and (min-width: 1024px) {
    .button2 img {
        width: 20%; /* ปรับความกว้างของปุ่มสำหรับหน้าจอเล็ก */
        max-width: none; /* ยกเลิกการจำกัดความกว้างสูงสุด */
        right: 0px; /* ปรับระยะห่างจากขอบขวาสำหรับหน้าจอเล็ก */
    }
    
}

@media screen and (min-width: 1024px) {
    .button2 img {
        width: 18%; /* ปรับความกว้างของปุ่มสำหรับหน้าจอเล็ก */
        max-width: none; /* ยกเลิกการจำกัดความกว้างสูงสุด */
        right: 250px; /* ปรับระยะห่างจากขอบขวาสำหรับหน้าจอเล็ก */
    }
    
}
.กล่อง {
    width: 100%; /* กำหนดความกว้างของกล่อง */
    max-width: 800px; /* กำหนดความกว้างสูงสุดของกล่อง */
    margin-top: -40px; /* กำหนดระยะห่างด้านบนของกล่อง */
    margin-left: auto; /* จัดกึ่งกลางกล่อง */
    margin-right: auto; /* จัดกึ่งกลางกล่อง */
    margin-bottom: 3rem; /* กำหนดระยะห่างด้านล่างของรูปภาพในกล่อง */
    display: grid; /* ใช้ grid layout สำหรับจัดรูปภาพในกล่อง */
    grid-template-columns: repeat(2,1fr); /* แบ่งกล่องเป็น 2 คอลัมน์เท่าๆ กัน */
    gap: 20px; /* กำหนดระยะห่างระหว่างรูป   ในกล่อง */
}

.กล่อง img {
    width: 100%; /* กำหนดความกว้างของรูปภาพในกล่อง */
    height: auto; /* ให้ความสูงของรูปภาพปรับตามความกว้าง */
    border-radius: 20px; /* กำหนดมุมโค้งให้กับรูปภาพในกล่อง */
}

.กล่อง1{
  width: min(100%, 1200px);
  margin: 12px auto;
  padding: 10px;
  border-radius: 18px;

  /* ขอบไล่สี */
  border: 3px solid transparent;
  background:
    linear-gradient(#0b0b0f, #0b0b0f) padding-box,
    linear-gradient(135deg, #ffcc00, #ff3d77, #7c3aed, #00d4ff) border-box;

  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

.กล่อง2 img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px; /* ให้เข้ากับมุมกล่อง */
}

.กล่อง2 {
  width: min(100%, 1200px);
  margin: 12px auto;  /* จัดกึ่งกลางกล่อง */
  padding: 10px;  /* กำหนด padding ให้กับกล่อง */
  border-radius: 18px;  /* ให้เข้ากับมุมกล่อง */

  /* ขอบไล่สี */
  border: 3px solid transparent;
  background:
    linear-gradient(#0b0b0f, #0b0b0f) padding-box,
    linear-gradient(135deg, #ffcc00, #ff3d77, #7c3aed, #00d4ff) border-box;

  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

.กล่อง3 img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px; /* ให้เข้ากับมุมกล่อง */
}

.กล่อง3 {
  width: min(100%, 1200px);
  margin: 12px auto;  /* จัดกึ่งกลางกล่อง */
  padding: 10px;  /* กำหนด padding ให้กับกล่อง */
  border-radius: 18px;  /* ให้เข้ากับมุมกล่อง */
  margin-top: -20px; /* กำหนดระยะห่างด้านบนของกล่อง */

  /* ขอบไล่สี */
  border: 3px solid transparent;
  background:
    linear-gradient(#0b0b0f, #0b0b0f) padding-box,
    linear-gradient(135deg, #ffcc00, #ff3d77, #7c3aed, #00d4ff) border-box;

  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

.กล่อง4 img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px; /* ให้เข้ากับมุมกล่อง */
}

.กล่อง4 {
  width: min(100%, 1200px);
  margin: 12px auto;  /* จัดกึ่งกลางกล่อง */
  padding: 10px;  /* กำหนด padding ให้กับกล่อง */
  border-radius: 18px;  /* ให้เข้ากับมุมกล่อง */
  margin-top: -20px; /* กำหนดระยะห่างด้านบนของกล่อง */


  /* ขอบไล่สี */
  border: 3px solid transparent;
  background:
    linear-gradient(#0b0b0f, #0b0b0f) padding-box,
    linear-gradient(135deg, #ffcc00, #ff3d77, #7c3aed, #00d4ff) border-box;

  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

.กล่อง4 img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px; /* ให้เข้ากับมุมกล่อง */
}