@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
margin: 0;
    padding: 0;
    font-family: sans-serif;
    /* ?????: ??????????????? ::before ??????????????????????????????? */
    position: relative; 
    min-height: 100vh;
    /* ???????????????????????????? ??????????????????? */
    background-color: #000000;
  
}
body::before {
content: ""; /* ????????????? ???????? Pseudo-element ????? */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:url("img/bg13.gif") ;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    opacity: 0.5;
    z-index: -1;
}
h1{
    font-size: 20px;
}
.box {
    margin: 50px 0px;
  display: flex;
  justify-content: center;
  align-items: center;     
}

.box1 {
 
       
  background:  linear-gradient(to left, #000000, #0000ff, #000000);
  border: 0 solid #E5E7EB;
  box-sizing: border-box;
  color: #ffffff;
  
  font-family: ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size: 1rem;
  font-weight: 700;
  line-height: 2.75rem;
  padding: .75rem 1.65rem;
  position: relative; 
  text-align: center; 
  text-decoration: none #000000 solid;
  text-decoration-thickness: auto; 
  width: 100%;
  max-width: 410px;
 cursor: pointer;
  transform: rotate(-2deg);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.box1:focus {
  outline: 0;
}

.box1:after {
  content: '';
  position: absolute;
  border: 1px solid #FFFFFF;
  bottom: 4px;
  left: 4px;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
}

.box1:hover:after {
  bottom: 2px;
  left: 2px;
}

@media (min-width: 768px) {
.box1 {
    padding: .75rem 3rem;
    font-size: 1.25rem;
  }
}

    

.navbar {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to left, #000000, #0000ff, #000000);
    padding: 30px 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* สไตล์ของโลโก้ */
.logo {
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    test-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
    cursor: pointer;
}
.logo img {
    height: 50px; /* ปรับความสูงของโลโก้ตามต้องการ (เช่น 40px, 50px, 60px) */
    width: auto; /* ให้ความกว้างปรับตามสัดส่วนของรูปอัตโนมัติ (รูปจะไม่เบี้ยว) */
    display: block; /* ลบช่องว่างส่วนเกินด้านล่างของรูป */
}

/* จัดกลุ่มลิงก์เมนู */
.nav-links {
    list-style: none;
    display: flex;
    gap: 0px;
}

.nav-links li {
    display: inline-block;
}

/* สไตล์ของตัวอักษรลิงก์ */
.nav-links a {
    text-decoration: none;
    color: #a0a0a0;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 15px;
}

/* สร้างเส้นใต้ซ่อนไว้สำหรับแอนิเมชัน */
.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #00d4ff;
    transition: width 0.3s ease;
    box-shadow: 0 0 8px #00d4ff;
}

    .nav-links button-44::after {
        content: '';
        position: absolute;
        width: 40;
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: #00d4ff;
        transition: width 0.3s ease;
        box-shadow: 0 0 8px #00d4ff;
    }

/* เมื่อเอาเมาส์ชี้ (Hover) */
.nav-links a:hover {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
}


.nav-links a:hover::after {
    width: 100%;
}




.slideshow-container {
    width: 60%; /* ขนาด 80% ของหน้าจอ */
    margin: 40px auto; /* หัวใจสำคัญ: บน-ล่างห่าง 40px, ซ้าย-ขวาปรับ auto เพื่อให้กึ่งกลาง */
    aspect-ratio: 16 / 9; 
    position: relative; 
    overflow: hidden;
    border-radius: 12px; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.slide {
    position: absolute; 
    top: 0;
    left: 0;
    width: 110%;
    height: 100%;
    object-fit: cover; 
    opacity: 0; 
    transition: opacity 2.5s ease-in-out; 
}

/* คลาสสำหรับรูปที่กำลังแสดงผล */
.slide.active {
    opacity: 1; /* แสดงรูปภาพ */
}

/* พื้นที่รอบนอกของกล่อง 3 คอลัมน์ */
.card-section {
    width: 60%; /* ขนาดเท่ากับ slideshow เพื่อความสวยงาม */
    margin: 60px auto;
}

/* จัดเป็น 3 คอลัมน์ด้วย CSS Grid */
.card-container {
    display: grid;
    /* แนวนอน 3 ช่องเท่าๆ กัน แต่ถ้าจอมือถือเล็กกว่า 768px จะย่อให้อัตโนมัติ */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px; /* ระยะห่างระหว่างกล่อง */
}
.card-container2 {
    display: grid;
    /* แนวนอน 3 ช่องเท่าๆ กัน แต่ถ้าจอมือถือเล็กกว่า 768px จะย่อให้อัตโนมัติ */
    grid-template-columns: repeat(auto-fit, minmax(375px, 1fr));
    gap: 25px; 
}
/* ตัวครอบหลัก */
.image-grid {
    padding: 10px 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* แบ่งเป็น 4 คอลัมน์ กว้างเท่าๆ กัน (1 fraction เท่ากัน) */
  gap: 16px; /* ระยะห่างระหว่างรูปภาพ */

}

/* ตั้งค่าให้รูปภาพขยายเต็มคอลัมน์และไม่เบี้ยว */
.image-grid img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover; /* ช่วยให้รูปไม่บีบเบี้ยว */
  border-radius: 12px; 
 box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;

    
}




.card {
    background-color:hsla(230,100%,50%,0.00);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;

    /* กำหนดสถานะเริ่มต้น: ซ่อนไว้และขยับลงมาด้านล่าง 40px */
    opacity: 0;
    transform: translateY(140px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* สไตล์รูปภาพในการ์ด */
.card img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* สไตล์ข้อความในการ์ด */
.card-content {
    padding: 20px;
}

.card-content h3 {
    margin: 0 0 10px 0;
    font-size: 1.25rem;
    color: #333;
}

.card-content p {
    margin: 0;
    font-size: 0.95rem;
    color: #FFFFFF;
    line-height: 1.5;
    background-color: hsla(0,0%,0%,0.4);
    background-size: cover;
    padding: 24px;
    border-radius: 16px; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}


.card.show {
    opacity: 1;
    transform: translateY(0);
}
.card:nth-child(1) {
    transition-delay: .5s;
}

.card:nth-child(2) {
    transition-delay: 1.0s;
}
.card:nth-child(3) {
    transition-delay: 1.5s;
}

.site-footer {
    background: linear-gradient(to left, #0b214e, #000000);
    color: #a0aec0;
    padding-top: 50px;
    margin-top: 80px; 
}
  .scrolling-image {
    width: 150px;
      margin: 15px;
    /* Loops an animation called 'slide' every 5 seconds infinitely */
    animation: slide 15s linear infinite; 
  }

  @keyframes slide {
    from { transform: translateX(-150%); } /* Starts off-screen right */
    to { transform: translateX(150%); }  /* Ends off-screen left */
  }
/* คุมความกว้างให้ตรงกับ Slideshow (80%) เพื่อความสมดุล */
.footer-container {
    width: 60%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* แบ่งสัดส่วน 3 คอลัมน์ (ซ้ายกว้างกว่าเล็กน้อย) */
    gap: 40px;
    padding-bottom: 40px;
}
.footer-col img {
    width:300px;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

/* หัวข้อใน Footer */
.footer-col h3 {
    color: #ffffff;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.footer-col h4 {
    color: #ffffff;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

/* รายการเมนูลัด */
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col a {
    color:AccentColorText;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* เมื่อเอาเมาส์ชี้ให้เปลี่ยนสี */
.footer-col a:hover {
    color: #38bdf8; /* สีไฮไลต์ (ปรับตามธีมเว็บได้) */
}

.footer-col p {
    line-height: 1.6;
    margin: 0 0 10px 0;
    font-size: 0.95rem;
}

/* เส้นคั่นและแถบ Copyright */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    padding: 20px 0;
    font-size: 0.85rem;
    color: #0509C5;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
.title {
  position: relative;
  padding-bottom: 8px; /* เว้นระยะห่างระหว่างตัวหนังสือกับเส้น */
}
.your-element {
  position: relative; /* จำเป็นต้องใส่เพื่อให้เส้นอ้างอิงตำแหน่งกับกล่องนี้ */
}

.your-element::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;          /* จัดให้เส้นชิดขวา */
  width: 30%;        /* กำหนดความยาวของเส้นตามที่ต้องการ (เช่น 30% หรือเป็น px ก็ได้) */
  border-bottom: 2px solid red; /* กำหนดขนาดและสีของเส้นที่นี่ */
}

.title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; /* หรือปรับความยาวตามต้องการ เช่น 50% */
  height: 4px; /* กำหนดความหนาของเส้นฝั่งที่หนาที่สุด (ฝั่งซ้าย) */
  
  /* 🪄 ใช้การไล่เฉดสีเพื่อทำเอฟเฟกต์แหลมและจางลง */
  background: linear-gradient(to right, #007bff, transparent);
  
  /* ✂️ ใช้ clip-path เพื่อตัดปลายด้านขวาให้เป็นทรงสามเหลี่ยม/แหลม */
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.card2 {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden; /* ✂️ สำคัญมาก: เพื่อตัดภาพส่วนที่ขยายเกินขอบไม่ให้ล้นออกมา */
}

.card2-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url( "img/bg12.gif");
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease; /* 🪄 ควบคุมความเร็วในการขยาย */
  z-index: 1;
}

/* 🚀 เมื่อเมาส์มาชี้ที่กล่องแม่ ให้กล่องภาพขยายขึ้น 1.1 เท่า */
.card2:hover .card2-bg {
  transform: scale(1.1); 
}

.card-content2 {
  position: relative;
  z-index: 2; /* ดันข้อความให้อยู่เหนือภาพพื้นหลัง */
  color: white;
  padding: 20px;
}
.simple-card {
  width: 300px;
  height: 200px;
  color: white;
  background-image:  url( "img/bg12.gif");
  
  /* 🪄 เริ่มต้นให้ขนาดเป็น cover (พอดีกล่อง) */
  background-size: 10px auto; 
  background-position: center;
  transition: background-size 0.5s ease; /* 🪄 ควบคุมความเร็วในการขยาย */
}

/* 🚀 เมื่อเมาส์ชี้ ให้เพิ่มเปอร์เซ็นต์ของ background-size */
.simple-card:hover {
  background-size: 115% auto; /* ขยายขนาดของภาพพื้นหลังขึ้น */
}
.text-box {
  width: 350px;
  height: 220px;
  padding: 20px;
  color: #ffffff; /* สีตัวอักษร */
  
  /* 🖼️ ตั้งค่ารูปพื้นหลัง */
/* แทนที่บรรทัด background-image เดิมด้วยโค้ดนี้ */
background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url("img/bg12.gif");

  background-repeat: no-repeat; /* ❌ แก้ปัญหาภาพซ้ำหลายๆ รูป */
  background-position: center;   /* จัดให้อยู่กึ่งกลางกล่อง */

  background-size: 0% auto; 
  
  /* เพิ่มเอฟเฟกต์เบลอที่ข้อความตอนเริ่มต้น (ตัวเลือกเสริมเพื่อให้ยิ่งอ่านยากขึ้น) */
  text-shadow: 0 0 8px rgba(255,255,255,0.8); 
  
  /* ควบคุมความเร็วในการขยายและปรับโฟกัส */
  transition: background-size 0.4s ease, text-shadow 0.4s ease; 
  cursor: pointer;
}

/* 🚀 เมื่อเอาเมาส์มาชี้ (Hover) */
.text-box:hover {
  background-size: 100% ; 
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8); 
}



.button-39 {
  border: 0;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 700;
  color: #fff;
  transition: all .15s cubic-bezier(.4, 0, .2, 1);
  background-image: linear-gradient(180deg, #C387F2 0%, #6E31A1 100%);
  box-shadow: #6E31A1BA 0 0 0 1px, #FFFFFF47 0 1px 0px 0 inset, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  position: relative;
}

.button-39:hover {
  filter: brightness(1.08);
}

.button-39:active {
  transform: scale(0.95);
  filter: none;
}

.button-92 {
  --c: #fff;
  /* text color */
  background: linear-gradient(90deg, #0000 33%, #fff5, #0000 67%) var(--_p,100%)/300% no-repeat,
    #004dff;
  /* background color */
  color: #0000;
  border: none;
  transform: perspective(500px) rotateY(calc(20deg*var(--_i,-1)));
  text-shadow: calc(var(--_i,-1)* 0.08em) -.01em 0   var(--c),
    calc(var(--_i,-1)*-0.08em)  .01em 2px #0004;
  outline-offset: .1em;
  transition: 0.3s;
}

.button-92:hover,
.button-92:focus-visible {
  --_p: 0%;
  --_i: 1;
}

.button-92:active {
  text-shadow: none;
  color: var(--c);
  box-shadow: inset 0 0 9e9q #0005;
  transition: 0s;
}

.button-92 {
  font-weight: bold;
  font-size: 2rem;
  margin: 0;
  cursor: pointer;
  padding: .1em .3em;
}
.button-26 {
  background: #fff;
  border: 2px solid #888;
  font-size: 18px;
  cursor: pointer;
  border-radius: 10px;
  outline: none;
  padding: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15), 5px 14px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.1s ease-in-out;
}
.button-26__content {
  padding: 24px 40px;
  border-radius: 8px;
  box-shadow: inset 0 -6px #d5d7de, 0 -2px #ffffff;
  transition: all 0.1s ease-in-out;
}
.button-26__text {
  color: #888;
  display: block;
  transform: translate3d(0, -4px, 0);
  transition: all 0.1s ease-in-out;
}
.button-26:active {
  box-shadow: none;
}
.button-26:active .button-26__content {
  box-shadow: none;
}
.button-26:active .button-26__text {
  transform: translate3d(0, 0, 0);
}

.button-19 {
  appearance: button;
  background-color: #1899D6;
  border: solid transparent;
  border-radius: 16px;
  border-width: 0 0 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: din-round,sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .8px;
  line-height: 20px;
  margin: 0;
  outline: none;
  overflow: visible;
  padding: 13px 16px;
  text-align: center;
  text-transform: uppercase;
  touch-action: manipulation;
  transform: translateZ(0);
  transition: filter .2s;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  width: 100%;
}

.button-19:after {
  background-clip: padding-box;
  background-color: #1CB0F6;
  border: solid transparent;
  border-radius: 16px;
  border-width: 0 0 4px;
  bottom: -4px;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.button-19,
.button-19:focus {
  user-select: auto;
}

.button-19:hover:not(:disabled) {
  filter: brightness(1.1);
  -webkit-filter: brightness(1.1);
}

.button-19:disabled {
  cursor: auto;
}

.button-19:active {
  border-width: 4px 0 0;
  background: none;
}
.button-20 {
  appearance: button;
  background-color: #4D4AE8;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));
  border: 1px solid #4D4AE8;
  border-radius: 1rem;
  box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0 inset,rgba(46, 54, 80, 0.075) 0 1px 1px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Inter,sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  padding: .5rem 1rem;
  text-align: center;
  text-transform: none;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
}

.button-20:focus:not(:focus-visible),
.button-20:focus {
  outline: 0;
}

.button-20:hover {
  background-color: #3733E5;
  border-color: #3733E5;
}

.button-20:focus {
  background-color: #413FC5;
  border-color: #3E3BBA;
  box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0 inset, rgba(46, 54, 80, 0.075) 0 1px 1px, rgba(104, 101, 235, 0.5) 0 0 0 .2rem;
}

.button-20:active {
  background-color: #3E3BBA;
  background-image: none;
  border-color: #3A38AE;
  box-shadow: rgba(46, 54, 80, 0.125) 0 3px 5px inset;
}

.button-20:active:focus {
  box-shadow: rgba(46, 54, 80, 0.125) 0 3px 5px inset, rgba(104, 101, 235, 0.5) 0 0 0 .2rem;
}

.button-20:disabled {
  background-image: none;
  box-shadow: none;
  opacity: .65;
  pointer-events: none;
}


.button-29 {
  align-items: center;
  appearance: none;
  background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
  border: 0;
  border-radius: 6px;
  box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: "JetBrains Mono",monospace;
  height: 48px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
  font-size: 18px;
}

.button-29:focus {
  box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
}

.button-29:hover {
  box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
  transform: translateY(-2px);
}

.button-29:active {
  box-shadow: #3c4fe0 0 3px 7px inset;
  transform: translateY(2px);
}


.button-44 {
    background: #4162a8;
    border-top: 1px solid #38538c;
    border-right: 1px solid #1f2d4d;
    border-bottom: 1px solid #151e33;
    border-left: 1px solid #1f2d4d;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
    -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
    box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
    color: #fff;
    font: bold 20px "helvetica neue", helvetica, arial, sans-serif;
    line-height: 1;
    padding: 10px 10px 12px 0;
    text-align: center;
    text-shadow: 0px -1px 1px #1e2d4d;
    width: 150px;
    -webkit-background-clip: padding-box;
}

    .button-44:hover {
        -webkit-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
        -moz-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
        box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
        cursor: pointer;
    }

    .button-44:active {
        -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
        -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
        box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
        transform: translateY(4px);
    }



/* CSS */
.button-85 {
  padding: 0.6em 2em;
  border: none;
  outline: none;
  color: rgb(255, 255, 255);
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-85:before {
  content: "";
  background: linear-gradient(
    45deg,
    #660099,
    #33FFFF,
    #6633FF,
    
    #00ffd5,
    #002bff,
    #7a00ff,
   #33FFFF
    
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing-button-85 20s linear infinite;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

.box86{
  all: unset;
  width: 375px;
  height: 150px;
     
  letter-spacing: 0.2px;

  font-size: 16px;
  background: transparent;
  border: none;
  position: relative;
  color: #333;
  cursor: pointer;
  z-index: 1;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.box86::after,
.box86::before {
  content: '';
  letter-spacing: 1px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -99999;
  transition: all .4s;
}

.box86::before {
     letter-spacing: 1px;
  transform: translate(0%, 0%);
  width: 100%;
  height: 100%;
  background: #28282d;
  border-radius: 10px;
}

.box86::after {
letter-spacing: 1px;
  transform: translate(10px, 10px);
  width: 35px;
  height: 35px;
  background: #FFFFFF;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 50px;
}

.box86:hover::before {
     letter-spacing: 3px;
  transform: translate(5%, 20%);
  width: 110%;
  height: 110%;
}

.box86:hover::after {
      
  border-radius: 10px;
  transform: translate(0, 0);
    letter-spacing: 3px;
  width: 100%;
  height: 100%;
}

.box86:active::after {
  transition: 0s;
  transform: translate(0, 5%);
}
@keyframes glowing-button-85 {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.button-85:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222;
  left: 0;
  top: 0;
  border-radius: 10px;
}




/* รองรับจอมือถือ (Responsive) */
@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr; /* บนมือถือปรับเป็นแถวเดี่ยวตอนลึก */
        gap: 30px;
    }
    .image-grid{
         grid-template-columns: 1fr;
    }
    .scrolling-image{
        display:none;
    }
}

/* การรองรับหน้าจอขนาดเล็ก (Mobile Responsive เบื้องต้น) */
@media (max-width: 768px) {
    .navbar {
        padding: 15px 20px;
    }
    .nav-links {
        display: none; /* ซ่อนเมนูไว้ก่อนสำหรับจอเล็ก (สามารถไปต่อยอดทำ Hamburger menu ได้) */
    }
}

/* --- เพิ่มสไตล์ซ่อนแถบด้านล่างในหน้าจอเดสก์ท็อป --- */
.mobile-bottom-bar {
    display: none;
}

/* --- อัปเดตส่วนของ Mobile Responsive --- */
@media (max-width: 768px) {
    .navbar {
        padding: 15px 20px;
    }
    
    .nav-links {
        display: none; /* ซ่อนเมนูเดิมไว้ในจอเล็ก */
    }

    /* เว้นพื้นที่ด้านล่างของหน้าเว็บ ไม่ให้เนื้อหาถูกแถบปุ่มบัง */
    body {
        padding-bottom: 60px; 
    }

    /* แสดงแถบปุ่มด้านล่างแบบติดขอบจอ */
    .mobile-bottom-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #1e1e1e;
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.5); /* เงายิงขึ้นด้านบน */
        z-index: 1000; /* ดันให้อยู่เลเยอร์บนสุด */
    }
    .card-section {
    width: 80%; /* ขนาดเท่ากับ slideshow เพื่อความสวยงาม */
    margin: 0px auto;
}
    .slideshow-container {
    width: 100%; /* ขนาด 80% ของหน้าจอ */
    margin: 40px auto; /* หัวใจสำคัญ: บน-ล่างห่าง 40px, ซ้าย-ขวาปรับ auto เพื่อให้กึ่งกลาง */
    aspect-ratio: 16 / 9; 
    position: relative; 
    overflow: hidden;
    border-radius: 12px; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.card img {
    width:100%;
    height:auto;
    object-fit: cover;
    display: block;
}
    
    /* สไตล์การจัดวางปุ่ม */
    .bottom-btn {
        flex: 1; /* แบ่งพื้นที่ความกว้างให้เท่ากัน (50% / 50%) */
        padding: 18px 0;
        border: none;
        border-radius: 16px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s ease, color 0.3s ease;
    }
    .bottom-btn img {
        width:auto;
            
 
    }

    /* ปุ่มที่ 1 (โทนสีสว่างเรืองแสง) */
    .primary-btn {
        background-color: #0099FF;
        color: #FFFFFF;
    }

    .primary-btn:hover {
        background-color: #00a3cc;
    }

    /* ปุ่มที่ 2 (โทนสีกลืนกับพื้นหลัง) */
    .secondary-btn {
        background-color: transparent;
        color: #00d4ff;
        border-top: 2px solid #1e1e1e;
    }

    .secondary-btn:hover {
        background-color: rgba(0, 212, 255, 0.1);
    }
}