/* Overlay ครอบทุกองค์ประกอบ ทำสีจางลงแบบนุ่ม ๆ */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* ไม่ขวางการคลิก */
  background-color: rgba(255,255,255,0.15); /* ปรับความเข้ม/อ่อน */
  mix-blend-mode: lighten; /* ทำสีจางลงแบบนุ่ม */
  z-index: 9998;
}

/* ลดสีภาพ, svg ให้จางลงเล็กน้อย */
img, svg, video {
  filter: brightness(95%) saturate(85%);
  -webkit-filter: brightness(95%) saturate(85%);
}

/* ลดสีตัวอักษรและพื้นหลัง element ต่าง ๆ */
body, body * {
  color: inherit; /* ใช้สีเดิมแต่จางลงผ่าน overlay */
  background-color: inherit; 
}

/* แถบไว้อาลัย */
.bw-tribute-banner {
  background: #777;
  color: #f9f9f9;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  padding: 12px 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999; /* อยู่เหนือ overlay */
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* ป้องกันเนื้อหาทับแถบ */
body {
  margin-top: 50px;
  background-color: #fff;
  color: #333;
}

/* ripple effect */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  background-color: rgba(0, 0, 0, 0.08);
}

@keyframes ripple-animation {
  to {
    transform: scale(3.5);
    opacity: 0;
  }
}