/* --- Base Button Responsive --- */
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  min-width: 180px; /* เพิ่มขนาดขั้นต่ำเพื่อความสวยงาม */
  max-width: 100%;  /* ไม่ให้กว้างเกินหน้าจอ */
  overflow: hidden;
  height: 3.5rem;   /* ความสูงคงเดิมแต่จะเล็กลงตามสัดส่วนจอ */
  background-size: 300% 300%;
  cursor: pointer;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
  transition: 0.5s;
  animation: gradient_301 5s ease infinite;
  border: double 1px transparent;
  background-image: linear-gradient(#212121, #212121),
    linear-gradient(
      137.48deg,
      #8f51ea 10%,
      #ff8067 67%,
      #0044ff 87%
    );
  background-origin: border-box;
  background-clip: content-box, border-box;
  position: relative; /* เพื่อให้ container-stars อ้างอิงได้ถูกต้อง */
}

/* ปรับขนาดตัวอักษรให้ Responsive */
strong {
  z-index: 2;
  font-size: clamp(0.8rem, 2.5vw, 1rem); /* ยืดหยุ่นตามหน้าจอ */
  letter-spacing: 3px; /* ลดลงเล็กน้อยเพื่อให้พอดีมือถือ */
  color: #ffffff;
  padding: 0 20px;
  white-space: nowrap; /* ป้องกันตัวหนังสือขึ้นบรรทัดใหม่ในการ์ดเล็กๆ */
}

/* --- Responsive Media Queries --- */

/* สำหรับ Tablet (จอเล็กกว่า 768px) */
@media (max-width: 768px) {
  .btn {
    height: 3.2rem;
    min-width: 160px;
    display: flex;        /* มั่นใจว่าเป็น flex เพื่อให้ content ข้างในกลาง */
    margin-left: auto;    /* ดันพื้นที่ด้านซ้าย */
    margin-right: auto;   /* ดันพื้นที่ด้านขวา */
    
    /* กรณีที่ปุ่มอยู่ใน Parent ที่เป็น Flexbox อยู่แล้ว (เช่น cta-buttons) 
       ต้องแน่ใจว่ามันจะไม่โดนเบียด */
    float: none;          
    position: relative;
    
    /* ปรับขนาดให้เหมาะกับนิ้วมือ */
    width: 90%;           
    max-width: 320px;
  }
  
  #glow {
    width: 10rem; /* ลดขนาดแสงฟุ้ง */
  }
}

/* สำหรับมือถือ (จอเล็กกว่า 480px) */
@media (max-width: 480px) {
  .btn {
    height: 3rem;
    min-width: 140px;
    padding: 0 10px;
  }

  strong {
    letter-spacing: 2px;
    font-size: 0.85rem;
  }

  .btn:hover {
    transform: scale(1.05); /* ลดแรงขยายตอน Hover บนมือถือเพื่อไม่ให้ล้น */
  }

  #glow {
    width: 8rem;
  }
}

/* --- แก้ไขตำแหน่ง Animation พื้นฐาน (คงเดิมจากที่คุณให้มา) --- */
#container-stars {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: 0.5s;
  backdrop-filter: blur(1rem);
  border-radius: 5rem;
  top: 0;
  left: 0;
}

#glow {
  position: absolute;
  display: flex;
  width: 12rem;
}

.circle {
  width: 100%;
  height: 20px;
  filter: blur(2rem);
  animation: pulse_3011 4s infinite;
  z-index: -1;
}

.circle:nth-of-type(1) {
  background: rgba(254, 83, 186, 0.636);
}

.circle:nth-of-type(2) {
  background: rgba(142, 81, 234, 0.704);
}

.btn:hover #container-stars {
  z-index: 1;
  background-color: #212121;
}

.btn:active {
  border: double 1px #fe53bb;
  background-origin: border-box;
  background-clip: content-box, border-box;
  animation: none;
}

/* --- Animations (คงเดิม) --- */
@keyframes gradient_301 {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes pulse_3011 {
  0% { transform: scale(0.75); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); }
  100% { transform: scale(0.75); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

.tech-stack-container {
    width: 100%;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.tech-stack-title {
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

/* แก้ไขส่วนนี้ */
.logos-slider {
    position: relative;
    width: 100%;
    max-width: 100vw; /* ล็อกความกว้างห้ามเกินหน้าจอ */
    overflow: hidden; /* ตัดส่วนที่เกินทิ้งทันที */
    display: flex;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.logos-slide-track {
    display: flex;
    width: max-content; /* ให้กว้างเท่ากับจำนวนไอคอนที่มีจริง */
    animation: scrollLogos 30s linear infinite;
    will-change: transform; /* ช่วยให้แอนิเมชันลื่นขึ้นบนมือถือ */
}

@keyframes scrollLogos {
    0% { transform: translateX(0); }
    /* เลื่อนไปแค่ครึ่งหนึ่งของความกว้างทั้งหมดเพื่อให้ Loop เนียน */
    100% { transform: translateX(-50%); } 
}

.slide-logo {
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem; /* ขนาดไอคอน */
    color: rgba(255, 255, 255, 0.4);
    transition: 0.3s;
}

.slide-logo:hover {
    color: #8f51ea; /* เปลี่ยนสีเมื่อเอาเมาส์วาง */
    transform: scale(1.1);
}

@keyframes scrollLogos {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-100px * 9)); } /* เลื่อนไปครึ่งหนึ่งของจำนวนโลโก้ทั้งหมด */
}

/* ปรับขนาดบนมือถือ */
@media (max-width: 768px) {
    .slide-logo {
        width: 80px;
        font-size: 1.8rem;
    }
}