html {
  scroll-behavior: smooth;
}

body {
  font-family: "Mitr", sans-serif;
  padding-top: 60px; /* เว้นช่อง Navbar fixed */
}

.mitr-extralight {
  font-family: "Mitr", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.header {
  color: #4a4a4a;
}

.general {
  color: #8c8c8c;
}

.mitr-light {
  font-family: "Mitr", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.mitr-regular {
  font-family: "Mitr", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.mitr-medium {
  font-family: "Mitr", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.mitr-semibold {
  font-family: "Mitr", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.mitr-bold {
  font-family: "Mitr", sans-serif;
  font-weight: 700;
  font-style: normal;
}
ul {
  list-style-type: disc !important; /* บังคับให้แสดงจุดกลม */
  padding-left: 20px; /* กำหนดระยะห่างด้านซ้ายให้มีที่วางจุด */
}
.navbar {
  position: fixed; /* ติดตำแหน่งแบบคงที่ */
  top: 0; /* อยู่บนสุด */
  min-height: fit-content;
  padding-top: 20px;
  padding-bottom: 10px;
  background-color: white; /* กำหนดพื้นหลัง (สำคัญถ้า navbar ทับเนื้อหา) */
  z-index: 1000; /* ให้ navbar อยู่บนเนื้อหาอื่น */
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); ใส่เงาเพิ่มความชัด */
}
.menumain {
  background-color: #f0ede9;
  color: #4a4a4a;
  border: #f0ede9 solid 1px;
  font-family: "Mitr", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.95rem;
}
.menumain:hover {
  background-color: #2d2d2d;
  color: #f0ede9;
  border: #2d2d2d solid 1px;
  font-family: "Mitr", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.95rem;
}
.menumain-active {
  background-color: #2d2d2d;
  color: #f0ede9;
  border: #2d2d2d solid 1px;
  font-family: "Mitr", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.95rem;
}
.menulist {
  color: #8c8c8c;
  font-family: "Mitr", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.95rem;
}
.menulist:hover {
  text-decoration: underline;
  color: #4a4a4a;
  font-family: "Mitr", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-underline-offset: 8px;
  text-decoration-thickness: 2px;
}

.menulist.active {
  text-decoration: underline;
  color: #4a4a4a;
  font-family: "Mitr", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-underline-offset: 8px;
  text-decoration-thickness: 2px;
}

.no-transition {
  transition: none !important;
}
.wavy-underline {
  position: relative;
  display: inline-block;
  /* font-size: 2.5rem;
        font-weight: bold;
  color: #4a4a4a;
  font-weight: 600; */
}

.wavy-underline svg {
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 25px;
  bottom: -30px;
  fill: none;
  stroke: #000; /* สีเส้น */
  stroke-width: 2;
}

.wavy-underline path {
  stroke: #737373;
  stroke-width: 4;
  fill: transparent;
  stroke-linecap: round;

  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: drawWave 5s linear infinite;
}

@keyframes drawWave {
  0% {
    stroke-dashoffset: 520;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .menulist,
  .menumain {
    font-size: 0.85rem;
  }
}

/* Home and Decor */

.perspective {
  perspective: 1000px;
}

.flip-card-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
  transform: rotateX(180deg);
}

.flip-card-front,
.flip-card-back {
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateX(180deg);
}

.group:hover .flip-card-inner {
  transform: rotateX(180deg);
}

#modal.hide {
  display: none;
}
#modal {
  display: flex;
  animation: fadeIn 0.25s ease-out;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}