/* ตั้งค่า Dropdown */
.dropdown { 
  position: relative; 
  display: inline-block; 
}

/* ปุ่มกดแบบโปร่งใส */
.dropbtn { 
  background-color: rgba(255, 255, 255, 0.2); /* โปร่งใส 20% */
  color: #333; 
  padding: 10px 20px; 
  border: 1px solid rgba(255, 255, 255, 0.3); 
  cursor: pointer; 
  border-radius: 8px;
  backdrop-filter: blur(5px); /* พื้นหลังเบลอแบบกระจก */
  transition: 0.3s;
}

.dropbtn:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

/* กล่องรายการแบบโปร่งใส (Glassmorphism) */
.dropdown-content {
  display: none;
  position: absolute;
  min-width: 180px;
  z-index: 1;
  margin-top: 5px;
  
  /* หัวใจหลักของความโปร่งใส */
  background-color: rgba(255, 255, 255, 0.6); /* ขาวโปร่งใส 60% */
  backdrop-filter: blur(10px); /* เอฟเฟกต์เบลอพื้นหลัง */
  -webkit-backdrop-filter: blur(10px);
  
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  overflow: hidden; /* เพื่อให้ขอบโค้งตัดส่วนข้างใน */
}

/* รายการลิงก์ */
.dropdown-content a { 
  padding: 12px 16px; 
  text-decoration: none; 
  display: block; 
  color: #333; 
  font-weight: 500;
  transition: 0.2s;
}

/* เอฟเฟกต์ตอนเอาเมาส์วางบนรายการ */
.dropdown-content a:hover { 
  background-color: rgba(255, 255, 255, 0.5); 
  color: #000;
  padding-left: 20px; /* ขยับนิดๆ ให้ดูมีลูกเล่น */
}

/* แสดงเมื่อ Hover */
.dropdown:hover .dropdown-content { 
  display: block; 
  animation: fadeIn 0.3s ease;
}

/* เพิ่ม Animation เบาๆ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.nav-tab{text-decoration:none;display:inline-block}
nav .dropdown{margin-left:8px}