/* ==========================================
   🕯 โหมดไว้อาลัย (mourning.css)
   ปรับให้ทำงานปกติ ไม่เร่ง ไม่กระตุก
   ========================================== */

/* --- เอฟเฟกต์ขาวดำทั่วทั้งเว็บไซต์ --- */
html, body {
  filter: grayscale(90%) brightness(0.9);
  background: rgba(0, 0, 0, 0.8) !important;
  color: #e0e0e0 !important;
  transition: background 1.2s ease, filter 1.2s ease, color 1.2s ease;
}

/* --- ทำให้รูปภาพ วิดีโอ และ iframe ขาวดำด้วย --- */
 video, iframe {
  filter: grayscale(90%) brightness(1) contrast(1.05);
  transition: filter 1.2s ease, opacity 1.2s ease;
}

/* --- ปรับสีตัวอักษรให้เหมาะกับพื้นหลังมืด --- */
*, a, a:visited, a:hover, a:active {
  color: #000000 !important;
  text-decoration-color: #aaa !important;
  /* border-color: #777 !important; */
}

/* --- ไม่เร่ง animation หรือ transition เดิมของเว็บ --- */
/* ❌ ไม่บังคับลดเวลา animation ทุก element */
* {
  animation-play-state: running !important;
}

/* --- ริบบิ้นไว้อาลัยมุมบนซ้าย --- */
.mourning-ribbon {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 80px;
  opacity: 0.9;
  z-index: 999999;
  pointer-events: none;
}
.mourning-ribbon img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- แสงเคลื่อนไหวเบา ๆ บนพื้นหลัง (เสริมความสงบ) --- */
@keyframes shineMove {
  0%   { left: -150%; opacity: 0; }
  10%  { opacity: 0.25; }
  90%  { opacity: 0.25; left: 150%; }
  100% { opacity: 0; left: 150%; }
}

#bg_wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    45deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.5) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-25deg);
  animation: shineMove 18s infinite ease-in-out; /* ⏱ ช้าลง */
  pointer-events: none;
}

/* --- ปรับความสว่างปุ่ม hover ให้ดูนุ่มนวล --- */
button:hover,
.btn:hover,
input[type="submit"]:hover {
  filter: brightness(1.1) grayscale(90%);
  transition: filter 0.5s ease;
}
/* ✅ คืนค่าการมองเห็นของเมนูย่อย */
#navmenu li ul {
  position: absolute !important;
  z-index: 99999 !important;
  display: none;
  background: rgba(255,255,255,0.95);
  border-radius: 6px;
  padding: 6px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* ✅ แสดงเมื่อ hover */
#navmenu li:hover > ul {
  display: block !important;
}

/* ✅ ปรับสีลิงก์ภายในเมนูให้ตัดกับพื้นหลังมืด */
#navmenu li ul li a {
  color: #111 !important;
  padding: 8px 18px;
  display: block;
  text-decoration: none;
  transition: background 0.3s ease;
}
#navmenu li ul li a:hover {
  background: rgba(0,0,0,0.1);
  color: #000 !important;
}