/* noto-sans-thai-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Noto Sans Thai';
    font-style: normal;
    font-weight: 400;
    src: url('https://thairentflow.com/fonts/noto-sans-thai-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  body {
    font-family: 'Noto Sans Thai', sans-serif;
    background-color: #f9fafb;
    color: #1f2937;
  }

  @keyframes fade-in-out {
    0% { opacity: 0; transform: translateY(-20px); }
    10% { opacity: 1; transform: translateY(0); }
    90% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); }
  }
  
  .animate-fade-in-out {
    animation: fade-in-out 3s ease-in-out forwards;
  }

@keyframes fadeInOut {
  0% { opacity: 0; transform: translate(-50%, 20px); }
  10% { opacity: 1; transform: translate(-50%, 0); }
  90% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 20px); }
}

.animate-fade-in-out {
  animation: fadeInOut 2.5s ease forwards;
}


  #menuToggle .top-bar {
    top: 8px;
  }
  #menuToggle .middle-bar {
    top: 18px;
  }
  #menuToggle .bottom-bar {
    top: 28px;
  }
  
  /* เมื่อ active เป็น X */
  #menuToggle.active .top-bar {
    transform: rotate(45deg);
    top: 18px;
  }
  #menuToggle.active .middle-bar {
    opacity: 0;
  }
  #menuToggle.active .bottom-bar {
    transform: rotate(-45deg);
    top: 18px;
  }

  #mainHeader.small {
    padding-top: 0.5rem; /* py-2 */
    padding-bottom: 0.5rem;
  }