html {
  filter: grayscale(50%);

  -webkit-filter: grayscale(70%);

  filter: gray;
}








/* -------------------------------------------
           CSS ที่ใช้ร่วมกันทุกหน้า (Shared CSS)
           ------------------------------------------- */

    /* Progress Bar */
    #progress-bar {
      position: fixed;
      top: 0;
      left: 0;
      height: 4px;
      background: #2563eb;
      width: 0%;
      z-index: 100;
      transition: width 0.1s ease-out;
      will-change: width;
    }

    /* Back to Top */
    #back-to-top {
      position: fixed;
      bottom: -100px;
      right: 20px;
      z-index: 50;
      transition: bottom 0.4s ease-in-out;
    }

    #back-to-top.is-visible {
      bottom: 20px;
    }

    /* Toast */
    #toast-notification {
      position: fixed;
      bottom: -100px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 100;
      transition: bottom 0.5s ease-in-out, opacity 0.5s ease-in-out;
      opacity: 0;
      will-change: bottom, opacity;
    }

    #toast-notification.show {
      bottom: 30px;
      opacity: 1;
    }

    /* Scroll Reveal */
    .fade-in {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
      will-change: opacity, transform;
    }

    .fade-in.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Mobile Menu */
    #mobile-menu {
      display: none;
    }

    #mobile-menu.is-open {
      display: block;
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
      background: #f1f1f1;
    }

    ::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #94a3b8;
    }

    html.dark ::-webkit-scrollbar {
      background: #1f2937;
    }

    html.dark ::-webkit-scrollbar-thumb {
      background: #4b5563;
    }

    html.dark ::-webkit-scrollbar-thumb:hover {
      background: #6b7280;
    }