html{scroll-behavior:smooth}
.container-xl{max-width:1200px}
.t{transition:all .25s ease}
.shadow-soft{box-shadow:0 10px 30px rgba(0,0,0,.07)}
.hero-bg{background-image:url('assets/bg/lab-equipment-theme.svg');background-repeat:repeat}
@supports not (background-image:url("data:image/svg+xml,<svg></svg>")){
  .hero-bg{background-image:url('assets/bg/lab-equipment-fallback.png')}
}

.hero {
  background-image: url('assets/bg/bannerBg.png');
  background-repeat: no-repeat;
  background-position: 80% center; /* เน้นฟ้า */
  background-size: cover;
  min-height: 50vh;  /* เดสก์ท็อป: ลดลงจาก 60vh เป็น 50vh */
}

/* มือถือ: เต็มจอ + เน้นฟ้า */
@media (max-width: 767px){
  .hero {
    min-height: 100svh;       /* เต็มจอมือถือ */
    background-size: cover;
    background-position: 80% center; /* ดึงไปทางฟ้า */
    background-color: #fff;
  }
}
/* ค่าพื้นฐานมือถือใช้ 100svh ตามที่ตั้งไว้ก่อนหน้า */
@media (min-width: 768px){   /* Tablet */
  .hero{ min-height: 48vh; } /* เดิม 60vh -> 48vh */
}
@media (min-width: 1024px){  /* Desktop */
  .hero{ min-height: 42vh; } /* ให้เตี้ยลงอีกบนจอใหญ่ */
}

/* PRODUCTS background */
.products-section {
  background-image: url('assets/bg/products-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* ให้สีเข้มชัดขึ้น (ลดการซีดจาก overlay เดิม) */
.products-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.25); /* เดิม 0.5 → ลดให้เห็น BG ชัดขึ้น */
  z-index: -1;
}

/* มือถือ: เน้นฟ้า */
@media (max-width: 767px) {
  .products-section {
    background-position: right center; /* ดึงไปฝั่งฟ้า */
  }
}