.slider-container {
      perspective: 1200px;
      position: relative;
      width: 100%;
      max-width: 1400px;
      height: 820px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
  }

  .slide {
      position: absolute;
      /* width: 395px;
      height: 850px; */
      width: 340px;
      height: 750px;
      border-radius: 5px;
      overflow: hidden;
      transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
      cursor: pointer;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  }

  .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all 0.6s ease;
  }

  .slide.active {
      transform: translateZ(0) scale(1.1);
      z-index: 100;
      filter: brightness(1);
  }

  .nav-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 200;

      background: transparent;
      width: 60px;
      height: 60px;
      padding: 5px;
      border: 2px solid transparent;
      border-radius: 50%;

      display: flex;
      align-items: center;
      justify-content: center;

      cursor: pointer;
      transition: all 0.3s ease;
  }

  .nav-button:hover {
      filter: drop-shadow(0px 0px 5px #c7bb0f);
  }

  .nav-button.left {
      left: 300px;
  }

  .nav-button.right {
      right: 300px;
  }

  .dots-container {
      width: 100%;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;

      /* background: #000; */
  }

  .dot {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: url("../images/icon/icon_dot.png");
      background-position: center;
      background-size: cover;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  .dot.active {
      background: url("../images/icon/icon_dot_active.png");
      background-position: center;
      background-size: cover;
      filter: drop-shadow(0px 0px 3px #fff);
  }

  .dot:hover {
      background: url("../images/icon/icon_dot_active.png");
      background-position: center;
      background-size: cover;
      filter: drop-shadow(0px 0px 3px #fff);
  }

  /* Slides 2  */
  .slider-container2 {
      perspective: 1200px;
      position: relative;
      width: 100%;
      max-width: 1400px;
      height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
  }

  .slide2 {
      position: absolute;
      width: 500px;
      height: 500px;
      border-radius: 5px;
      overflow: hidden;

      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
      cursor: pointer;
      /* box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); */
  }

  .slide2 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all 0.6s ease;
  }

  .slide2.active {
      transform: translateZ(0) scale(1.1);
      z-index: 100;
      filter: brightness(1);
  }

  .dots-container2 {
      width: 100%;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
  }

  .dot2 {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: url("../images/icon/icon_dot.png");
      background-position: center;
      background-size: cover;
      cursor: pointer;
      transition: all 0.3s ease;
  }

  .dot2.active {
      background: url("../images/icon/icon_dot_active.png");
      background-position: center;
      background-size: cover;
      filter: drop-shadow(0px 0px 3px #fff);
  }

  .dot2:hover {
      background: url("../images/icon/icon_dot_active.png");
      background-position: center;
      background-size: cover;
      filter: drop-shadow(0px 0px 3px #fff);
  }

  /* ≤ 576px (sm และต่ำกว่า — mobile เล็กสุด) */
  @media (max-width: 575.98px) {
      .slider-container {
          height: 580px;
      }

      .slider-container2 {
          height: 580px;
      }

      .slide {
          position: absolute;
          width: 230px;
          height: 517px;
      }

      .dot {
          width: 20px;
          height: 20px;
      }
  }

  @media (max-width: 380px) {
      .slider-container2 {
          height: 380px;
      }

      .slide2 {
          position: absolute;
          width: 300px;
          height: 300px;
      }
  }