.elementor-30107 .elementor-element.elementor-element-4a05d52{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-30107 .elementor-element.elementor-element-4a05d52:not(.elementor-motion-effects-element-type-background), .elementor-30107 .elementor-element.elementor-element-4a05d52 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-repeat:no-repeat;}.elementor-30107 .elementor-element.elementor-element-4a05d52.e-con{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}/* Start custom CSS for container, class: .elementor-element-4a05d52 */.banner {
  width: 100vw; /* กว้างเต็มจอ */
  height: 42rem; /* สูง 60% ของ viewport */
  background-size: cover;
  background-position: center bottom; /* จัดให้อยู่ตรงกลาง */
  background-repeat: no-repeat;
}

@media (min-width: 2000px) {
  .banner {
    height: 58rem; /* ลดความสูงลงเมื่อหน้าจอเล็ก */
    background-position: center bottom; /* จัดให้อยู่ตรงกลาง */
  }
}

@media (min-width: 1600px) and (max-width: 1999px) {
  .banner {
    height: 48rem; /* ลดความสูงลงเมื่อหน้าจอเล็ก */
    background-position: center bottom; /* จัดให้อยู่ตรงกลาง */
  }
}

@media (max-width: 1440px) {
  .banner {
    height: 36rem; /* ลดความสูงลงเมื่อหน้าจอเล็ก */
  }
}

@media (max-width: 1022px) {
  .banner {
    height: 32rem; /* ลดความสูงลงเมื่อหน้าจอเล็ก */
  }
}

@media (max-width: 766px) {
  .banner {
    height: 24rem; /* ลดความสูงลงเมื่อหน้าจอเล็ก */
  }
}

@media (max-width: 599px) {
  .banner {
    height: 22rem; /* ให้ banner ไม่กินพื้นที่มากเกินไป */
  }
}

@media (max-width: 480px) {
  .banner {
    position: relative;
    height: 14rem;
    overflow: hidden;
    margin-top: 40px; /* เพิ่ม margin ด้านบน */
  }

  /* เพิ่มสีขาวเฟดจากด้านบน */
  .banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%; /* เฟดจากด้านบนลงล่าง */
    z-index: 2;

    /* ไล่สีขาวจากด้านบนลงล่าง */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); 
  }

  .banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}/* End custom CSS */