.popup {
  position: absolute;
  margin-top: 100px;
  width: 70vw;
  left: 15vw;
  object-fit: contain;
  object-position: center;
  cursor: pointer;
  display: inline-block;
  z-index: 155;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  border: none;
  font-size: 60px;
  color: gray;
  cursor: pointer;
  border: 3px solid gray;
  padding: 7px;
  border-radius: 12px;
  z-index: 160;
}

.close-btn.inside {
  top: 30px;
  right: 30px;
}

.close-btn:hover {
  color: red;
}

.popup_background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  touch-action: none;
  backdrop-filter: blur(8px) brightness(50%) saturate(150%);
  -webkit-backdrop-filter: blur(8px) brightness(50%) saturate(150%);
  z-index: 150;
}

@media (min-width: 992px) and (max-width: 1200px) {
    header .toggle-btn.toggle-btn-lg {
        right: 1%;
        top: 14%;
    }
    .lower-nav .navbar-nav .nav-item {
        margin-right: 10px;
    }
    .fixed-top.lower-nav .toggle-btn.toggle-btn-lg {
        right: 1%;
        top: 40%;
    }
    .fix-top .navbar .navbar-nav.right-nav .nav-item:last-child .nav-link {
        /*padding-right: 15px;*/
    }
    .upper-nav .top-detail li.social-links {
        /*text-align: left;*/
        margin-left: 0;
    }
}

#faqSearch {
    font-size: 1.2rem; /* ขยายขนาดตัวอักษร */
    height: 50px; /* เพิ่มความสูง */
    padding: 10px; /* เพิ่ม Padding */
}


.container-faq {
    background-color: white;
    color: black;
    border-radius: 20px;
    box-shadow: 0 5px 10px 0 rgb(0,0,0,0.25);
    margin: 20px 0;
  }

  
.question {
    font-size: 1.2rem;
    font-weight: 600;
    padding: 20px 80px 20px 20px;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  
  .question::after {
    content: "\002B";
    font-size: 2.2rem;
    position: absolute;
    right: 20px;
    transition: 0.2s;
  }
  
  .question.active::after {
    transform: rotate(45deg);
  }
  
  .answercont {
    max-height: 0;
    overflow: hidden;
    transition: 0.3s;
  }
  
  .answer {
    padding: 0 20px 20px;
    line-height: 1.5rem;
  }
  
  .question.active + .answercont {
  }



  .clickable-area {
    position: absolute;
    z-index: 160;
    cursor: pointer;

}

#evaluationArea {
    top: 68%; /* เปอร์เซ็นต์จากความสูงของรูป */
    left: 19%; /* เปอร์เซ็นต์จากความกว้างของรูป */
    width: 50%; /* ความกว้างสัมพันธ์กับรูป */
    height: 10%; /* ความสูงสัมพันธ์กับรูป */
    transform: translateY(-10%); /* ปรับตำแหน่งให้อยู่ในสัดส่วนของรูป */
}

/* พื้นที่สำหรับ "ดูรายงานผลการประเมิน" */
#reportArea {
    top: 81%; /* เปอร์เซ็นต์จากความสูงของรูป */
    left: 19%; /* เปอร์เซ็นต์จากความกว้างของรูป */
    width: 50%; /* ความกว้างสัมพันธ์กับรูป */
    height: 10%; /* ความสูงสัมพันธ์กับรูป */
    transform: translateY(-10%); /* ปรับตำแหน่งให้อยู่ในสัดส่วนของรูป */
}