:root {
  --primary: #680268;
  --primary-light: #9e059e;
  --hover-bg: rgba(104, 2, 104, 0.8);
  --text: #fff;
  --radius: 6px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------- ใช้กับทุกหน้าจอ (All Devices) --------------- */

/* 1. Dropdown Animation (ทำให้ Dropdown ค่อยๆ เลื่อนขึ้นลง) */
.navbar-nav .dropdown-menu {
  font-size: 14px;
  /* บังคับให้แสดง block เพื่อรอ animate (Override Bootstrap) */
  display: block !important;

  /* ซ่อนด้วย opacity แทน display:none */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: var(--transition);

  /* ตกแต่ง */
  border: none;
  border-radius: var(--radius);
  background: var(--hover-bg);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* สั่งให้แสดงเมื่อ Hover (บนมือถือจะติดเมื่อแตะ) */
.navbar-nav .nav-item.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 2. Link Zoom & Glow Effect (เอฟเฟกต์ขยายและแสงวิ้ง) */
.navbar-nav .nav-link {
  position: relative;
  transition: var(--transition);
  transform-origin: center;
}

/* สร้างวงแสง Glow รอไว้ */
.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--primary-light) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition:
    width 0.3s,
    height 0.3s,
    opacity 0.3s;
  opacity: 0;
  z-index: -1;
}

/* Action: เมื่อเอาเมาส์ชี้ หรือ นิ้วแตะ */
.navbar-nav .nav-item:hover .nav-link {
  transform: scale(1.05); /* ขยายตัว */
}

.navbar-nav .nav-item:hover .nav-link::after {
  width: 120%; /* ขยายวงแสง */
  height: 120%;
  opacity: 0.25; /* แสดงแสง */
}

/* --------------- ทั่วไป --------------- */
.navbar-toggler {
  border: none;
}

.navbar-toggler:focus {
  box-shadow: none;
}

/* บังคับลบ Padding ที่เกินมาออก */
.navbar-nav {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important; /* ดันไปขวาสุด */
}

/* (เผื่อไว้) ปรับแต่ง Container ให้ชิดขอบมากขึ้นถ้าต้องการ */
.custom_nav-container {
  padding: 0;
}

/* เพิ่มต่อท้ายไฟล์ CSS */

/* จัดการ Dropdown ในหน้าจอเล็ก (Mobile/Tablet) */
@media (max-width: 991px) {
  /* ให้ Dropdown แทรกตัวลงมาในเนื้อหา ไม่ลอยบังเมนูอื่น */
  .navbar-nav .dropdown-menu {
    position: static; /* ยกเลิกการลอย */
    float: none;
    width: auto;
    margin-top: 0;
    background-color: rgba(
      255,
      255,
      255,
      0.1
    ); /* พื้นหลังจางๆ ให้รู้ว่าเป็นเมนูย่อย */
    box-shadow: none; /* ลบเงาออก */
    transform: none !important; /* ยกเลิก Animation เลื่อนขึ้นลง เพื่อความลื่นไหล */
    transition: none; /* ปิด Transition ชั่วคราวเพื่อความไว */

    /* สำคัญ: ต้องซ่อนไว้ก่อน */
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* สั่งให้แสดงเมื่อ Hover หรือคลิก (ใน Mobile จะเป็นการแตะ) */
  .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
    display: block !important; /* บังคับแสดงผล */
  }

  /* จัดย่อหน้าเมนูย่อยให้น่าอ่าน */
  .dropdown-item {
    padding-left: 30px;
    color: #ddd; /* สีข้อความให้อ่านง่ายขึ้นบนพื้นเข้ม */
  }

  .navbar-brand img {
    height: 40px;
  }

  /* 1. จัดคอนเทนเนอร์หลักให้อยู่กึ่งกลาง */
  .navbar-collapse .search_box_container {
    display: flex;
    justify-content: center !important; /* จัดแว่นขยายให้อยู่ตรงกลาง */
    width: 100%;
    margin-top: 15px;
  }

  /* 2. จัดพิกัดกล่องพิมพ์ข้อความ (แก้ปัญหาเป็นวงกลม/ล้นซ้าย) */
  .navbar-collapse .search_input {
    top: 150%;
    right: auto !important;
    left: 50% !important;

    transform: translate(-50%, -10px) !important;

    /* 🌟 เปลี่ยนจาก % เป็น vw เพื่อบังคับให้กว้างตามหน้าจอมือถือ */
    width: 85vw !important;
    max-width: 350px !important;

    padding: 12px 20px !important; /* คืนค่าความหนาให้กล่อง */
  }

  /* 3. สถานะเมื่อกดแว่นขยาย (Active) */
  .navbar-collapse .search_box_container.active .search_input {
    transform: translate(-50%, 0) !important;
    opacity: 1;
    visibility: visible;
  }

  /* 4. จัดลูกศรแหลมๆ สีขาว ให้ชี้ตรงกลางแว่นขยายเป๊ะๆ */
  .navbar-collapse .search_input::before {
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) rotate(45deg) !important;
  }

  /* 5. จัดไอคอน Login ให้อยู่กึ่งกลางด้วย (ไม่หลุดไปซ้าย) */
  .navbar-collapse .user_option {
    display: flex !important;
    justify-content: center !important;
    width: 100%;
    margin-top: 20px;
  }
}

/* สไตล์เมื่อเลื่อนหน้าจอลงมา (Sticky Mode) */
.header_section.header_sticky {
  position: fixed; /* 📜 บังคับให้อยู่กับที่ */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999; /* ให้อยู่บนสุดทับทุกอย่าง */

  /* เปลี่ยนสีพื้นหลังเป็นสีทึบ (ไล่เฉดม่วงเข้ม) เพื่อให้อ่านง่าย */
  background: linear-gradient(to right, #4a148c, #6a1b9a);

  /* เพิ่มเงาให้ดูมิติ */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

  /* เอฟเฟกต์นุ่มนวลตอนเปลี่ยน */
  transition: all 0.3s ease-in-out;
  padding: 10px 0; /* ลดความสูงลงนิดหน่อยให้ดูสวย */
}

/* (เผื่อไว้) ป้องกันเนื้อหากระโดด */
.header_section {
  transition: all 0.3s ease-in-out;
}

/* Login */
/* --- CSS ตกแต่งพิเศษ --- */

/* หัวข้อ Modal ไล่สี */
/* .login-header-modern {
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  border: none;
  border-radius: 15px 15px 0 0;
  padding: 20px;
} */

/* ใช้ Selector ที่เจาะจงถึง ID และ Class เพื่อความชัวร์ */
#loginModal .modal-content .login-header-modern {
  background: #ffa500 !important; /* บังคับสีส้ม/เหลือง */
  padding-top: 5px !important; /* เพิ่มความสูงด้านบน */
  padding-bottom: 5px !important; /* เพิ่มความสูงด้านล่าง */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-top-left-radius: 15px !important;
  border-top-right-radius: 15px !important;
  min-height: 90px !important; /* หรือจะกำหนดความสูงขั้นต่ำไปเลย */
}

/* ปรับตำแหน่งปุ่มปิด x ให้ลอยตามลงมา */
#loginModal .login-header-modern .close {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  margin: 0 !important;
  z-index: 10 !important;
}

/* ตัวกล่อง Modal */
.login-content-modern {
  border-radius: 15px !important;
  border: none !important;
  overflow: hidden; /* เพื่อให้มุมโค้งตัดกับ header พอดี */
}

.login-header-modern .modal-title {
  color: #ffffff !important;
  font-size: 1.5rem;
}

/* .login-header-modern .close {
    opacity: 0.8;
    text-shadow: none;
} */

/* ตัวกล่อง Modal */
.login-content-modern {
  border-radius: 15px;
  border: none;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* ช่องกรอกข้อมูล */
.input-group-modern {
  border: 1px solid #e1e1e1;
  border-radius: 50px;
  padding: 5px 15px;
  background: #f8f9fa;
  transition: all 0.3s;
}

.input-group-modern:focus-within {
  border-color: #ffc107;
  background: #fff;
  box-shadow: 0 4px 10px rgba(255, 193, 7, 0.2);
}

.input-modern {
  border: none;
  background: transparent;
  font-size: 1rem;
  padding-left: 10px;
}

.input-modern:focus {
  background: transparent;
  box-shadow: none;
}

/* ไอคอนข้างหน้า */
.icon-modern {
  color: #aaa;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
}

/* ปุ่มรูปตา (Show Password) */
.toggle-password {
  cursor: pointer;
  color: #aaa;
  transition: color 0.2s;
}

.toggle-password:hover {
  color: #ffc107;
}

/* ปุ่ม Login */
.btn-login-modern {
  background: linear-gradient(to right, #ffc107, #ff9800);
  border: none;
  border-radius: 50px;
  color: white;
  font-weight: bold;
  padding: 12px;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.btn-login-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 152, 0, 0.4);
  color: white;
}
/* Login */
/* =========================================
   ลูกเล่นปุ่ม Login (กระพริบ + ไฟวิ่งสีเหลือง)
========================================= */
.btn-premium-login {
  /* สีเริ่มต้นของปุ่ม (น้ำเงิน) */
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #ffffff !important;
  border: none;
  border-radius: 25px;
  padding: 8px 22px;
  /* font-size: 15px; */
  /* font-weight: 600; */
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 0.3s ease;

  /* 1. เรียกใช้อนิเมชั่นกระพริบ (คลื่นแผ่ออก) ตอนที่ยังไม่ได้เอาเมาส์ชี้ */
  animation: pulse-glow-blue 2s infinite;
}

/* 2. เมื่อเอาเมาส์ชี้ (Hover) เปลี่ยนเป็นสีเหลืองและมีไฟวิ่ง */
.btn-premium-login:hover {
  /* ปิดการกระพริบเดิม */
  animation: none;

  /* ตั้งค่าโทนสีเหลือง-ทอง-ส้ม สลับกันเพื่อให้เกิดการไล่เฉด */
  background: linear-gradient(
    90deg,
    #fcd34d,
    #f59e0b,
    #fbbf24,
    #f59e0b,
    #fcd34d
  );
  background-size: 300% 100%; /* ขยายพื้นหลังให้กว้างเพื่อเตรียมวิ่ง */
  color: #78350f !important; /* เปลี่ยนสีตัวหนังสือเป็นน้ำตาลเข้มให้อ่านง่ายบนสีเหลือง */

  /* เรียกใช้อนิเมชั่นไฟวิ่งที่พื้นหลัง */
  animation: running-light-yellow 1.5s linear infinite;

  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(245, 158, 11, 0.5); /* เงาสีเหลืองส้ม */
}

/* ไอคอนขยับเมื่อเอาเมาส์ชี้ */
.icon-sign-in {
  margin-right: 8px;
  transition: transform 0.3s ease;
}
.btn-premium-login:hover .icon-sign-in {
  transform: translateX(4px);
}

/* =========================================
   ชุดคำสั่ง Keyframes (กลไกการเคลื่อนไหว)
========================================= */

/* อนิเมชั่นกระพริบแบบวงแหวนแผ่ออก (Pulse Effect) */
@keyframes pulse-glow-blue {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(59, 130, 246, 0); /* วงแหวนขยายออกแล้วจางหาย */
  }
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

/* อนิเมชั่นไฟวิ่งไล่เฉดสี (เลื่อนตำแหน่ง Background) */
@keyframes running-light-yellow {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

/* กล่องครอบ */
.search_box_container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ตัวกล่องค้นหา (เหมือนรูปเป๊ะๆ) */
.search_input {
  position: absolute;
  top: 140%; /* ดันลงมา */
  right: -15px; /* ขยับขวาให้ตรงกับไอคอน */
  width: 280px;

  /* การซ่อน */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;

  /* --- ปรับดีไซน์ให้เหมือนรูป --- */
  background-color: #ffffff;
  color: #333;
  border: none; /* ไม่มีเส้นขอบ */
  border-radius: 50px; /* ขอบมนแบบแคปซูล */
  padding: 12px 20px; /* เพิ่มระยะห่างภายใน */
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); /* เงาฟุ้งๆ */
  font-size: 16px; /* ตัวหนังสือใหญ่ขึ้น */
  z-index: 1000;
}

/* =========================================
   ลูกเล่นปุ่ม Sign in with PSU SSO (ไฟสีขาววิ่งไล่เฉดสีน้ำเงิน)
========================================= */
.btn-sso-login {
    /* สร้างแถบสี: น้ำเงิน -> น้ำเงินอ่อน -> ขาว (แสงไฟ) -> น้ำเงินอ่อน -> น้ำเงิน */
    background: linear-gradient(90deg, #1d4ed8, #3b82f6, #ffffff, #3b82f6, #1d4ed8);
    background-size: 300% 100%; /* ขยายภาพพื้นหลังให้ยาวมากๆ เตรียมรอวิ่ง */
    
    color: white !important;
    border-radius: 12px;
    padding: 14px;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.35);
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* เอฟเฟกต์: เมื่อเอาเมาส์ชี้ ให้ปุ่มขยายตัว และสั่งให้ไฟวิ่ง */
.btn-sso-login:hover {
    transform: scale(1.05); /* ขยายปุ่ม (Zoom) ขึ้น 5% */
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.55);
    
    /* สั่งให้พื้นหลังวิ่งวนซ้ำแบบไม่มีที่สิ้นสุด */
    animation: running-light-blue 1.5s linear infinite;
    
    /* เปลี่ยนสีตัวอักษรเป็นน้ำเงินเข้มตอนเมาส์ชี้ เพื่อให้อ่านตัดกับแสงสีขาวได้ชัดเจนขึ้น */
    color: #1e3a8a !important; 
}

/* ลูกเล่นเสริม: ให้ไอคอนมหาวิทยาลัยขยับขยายขึ้นนิดนึงตอนเมาส์ชี้ */
.btn-sso-login i {
    transition: transform 0.3s ease;
}
.btn-sso-login:hover {
    transform: scale(1.05); /* ขยายปุ่ม (Zoom) ขึ้น 5% */
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.55);
    
    /* 💡 เพิ่มคำว่า alternate ต่อท้าย เพื่อสั่งให้วิ่งไปแล้ววิ่งย้อนกลับ */
    animation: running-light-blue 1.2s linear infinite alternate;
    
    color: #1e3a8a !important; 
}

/* =========================================
   ชุดคำสั่ง Keyframes สั่งพื้นหลังวิ่ง
========================================= */
@keyframes running-light-blue {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: 0 0;
    }
}

/* เปลี่ยน Placeholder เป็นสีเทา */
.search_input::placeholder {
  color: #888;
}

/* สถานะเปิด */
.search_box_container.active .search_input {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* --- สร้างลูกศรชี้ขึ้น (สีขาว) --- */
.search_input::before {
  content: "";
  position: absolute;
  top: -8px; /* ดันขึ้นไป */
  right: 22px; /* จัดให้ตรงกับแว่นขยาย */

  width: 16px;
  height: 16px;
  background-color: #ffffff; /* สีขาวเดียวกับกล่อง */

  /* ไม่ต้องมี border เพราะในรูปไม่มี */
  transform: rotate(45deg);
  border-radius: 3px; /* ลบมุมลูกศรนิดนึง */
}

/* ปุ่มแว่นขยาย (สีเหลือง) */
.nav_search-btn {
  background: transparent;
  border: none;
  color: #ffc107; /* 👈 สีเหลือง */
  font-size: 24px; /* ใหญ่ขึ้น */
  cursor: pointer;
  padding: 5px;
  transition: transform 0.2s;
}

.nav_search-btn i {
  font-weight: normal !important; /* 👈 สำคัญ: บังคับปิดตัวหนา */
  -webkit-text-stroke: 0; /* 👈 แก้ปัญหาขอบไอคอนบวมในบางเบราว์เซอร์ */
  font-size: 20px; /* 👈 ปรับขนาดลงหน่อย (ถ้าเดิม 24-26px อาจจะดูหนาไป) */
}

.nav_search-btn:hover {
  transform: scale(1.1); /* ขยายเมื่อชี้ */
}

/* --- ปุ่มกระดิ่ง --- */
.notification-btn {
  position: relative;
  cursor: pointer;
  transition: transform 0.2s;
}
.notification-btn:hover {
  transform: scale(1.1); /* ขยายเล็กน้อยเมื่อชี้ */
}

/* --- Badge (ตัวเลขแจ้งเตือน) พร้อม Animation --- */
.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  background-color: #ff3b30;
  color: white;
  font-size: 10px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff; /* ขอบขาวตัดกับพื้นหลัง */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* เอฟเฟกต์คลื่นหัวใจเต้น (Pulse) */
.notification-badge.pulse {
  animation: pulse-animation 2s infinite;
}
@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(255, 59, 48, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
  }
}

/* --- กล่อง Dropdown --- */
.notification-list-menu {
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  padding: 0;
  border: none;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
/* Hover รายการ */
.notification-item:hover {
  background-color: #f8f9fa;
  text-decoration: none;
}
/* หัวข้อ */
.dropdown-header-custom {
  background: linear-gradient(to right, #6f42c1, #8e44ad); /* ไล่สีม่วง */
  color: white;
  padding: 15px 20px;
  font-size: 16px;
}

/* พื้นที่รายการ (Scrollbar สวยๆ) */
.notification-body {
  max-height: 350px;
  overflow-y: auto;
}
/* ปรับแต่ง Scrollbar */
.notification-body::-webkit-scrollbar {
  width: 6px;
}
.notification-body::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.notification-body::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}
.notification-body::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

/* --- รายการแจ้งเตือนแต่ละอัน --- */
.notify-item {
  padding: 15px 20px;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  align-items: start;
  text-decoration: none !important;
  transition: background 0.2s;
  color: #333;
}
.notify-item:hover {
  background-color: #f9f9f9; /* เปลี่ยนสีเมื่อชี้ */
  color: #000;
}
.notify-item.unread {
  background-color: #f0f8ff; /* สีฟ้าจางๆ สำหรับอันที่ยังไม่อ่าน */
  border-left: 4px solid #007bff; /* ขีดสีฟ้าด้านซ้าย */
}

/* ไอคอนในรายการ */
.notify-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
}
.notify-content h6 {
  margin: 0 0 5px 0;
  font-size: 14px;
  font-weight: 600;
}
.notify-content p {
  margin: 0;
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}
.notify-time {
  font-size: 11px;
  color: #999;
  margin-top: 5px;
  display: block;
}

/* --- CSS ปรับแต่ง Dropdown User --- */

/* ตัวกล่อง Dropdown */
.user-dropdown-menu {
  border: none;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* เงาฟุ้งๆ */
  padding: 0;
  overflow: hidden;
  margin-top: 15px; /* เว้นระยะห่างจาก Header นิดหน่อย */
  min-width: 220px; /* กำหนดความกว้างขั้นต่ำ */
}

/* ส่วนหัว Dropdown (แสดงชื่อ/Role) */
.dropdown-user-header {
  background: linear-gradient(
    to right,
    #ffc107,
    #ff9800
  ); /* พื้นหลังไล่สีเหลือง */
  padding: 15px 20px;
  color: white;
}
.dropdown-user-header h6 {
  margin: 0;
  font-weight: bold;
  font-size: 16px;
}
.dropdown-user-header small {
  opacity: 0.8;
  font-size: 12px;
}

/* รายการเมนู (Items) */
.dropdown-item {
  padding: 12px 20px;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #f1f1f1; /* เส้นคั่นบางๆ */
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}

/* ไอคอนในเมนู */
.dropdown-item i {
  width: 25px; /* กำหนดความกว้างไอคอนให้เท่ากัน */
  text-align: center;
  margin-right: 10px;
  font-size: 16px;
  color: #888; /* สีไอคอนปกติ */
}

/* Hover Effect */
.dropdown-item:hover {
  background-color: #fff8e1; /* สีพื้นหลังตอนชี้ (เหลืองอ่อนๆ) */
  color: #ff8f00; /* เปลี่ยนสีตัวหนังสือ */
  padding-left: 25px; /* ขยับขวานิดนึง (ลูกเล่น) */
}
.dropdown-item:hover i {
  color: #ff8f00; /* เปลี่ยนสีไอคอนตาม */
}

/* เมนูสุดท้าย (Logout) */
.dropdown-item.text-danger {
  color: #dc3545;
}
.dropdown-item.text-danger:hover {
  background-color: #ffebee; /* สีแดงอ่อนๆ */
  color: #c62828;
}
.dropdown-item.text-danger:hover i {
  color: #c62828;
}

/* ลบเส้นคั่นเดิม (เพราะเราใส่ border-bottom แล้ว) */
.dropdown-divider {
  margin: 0;
  border: none;
}

/* --------------- การจัดการสลับ Logo --------------- */

/* ตั้งค่าเริ่มต้นให้รูปภาพ */
.navbar-brand img {
  height: 50px;
  width: auto;
  transition: all 0.3s ease-in-out; /* ให้สมูทเท่ากับแถบ Header */
}

/* 1. สถานะปกติ: ซ่อน logo-sticky ไว้ก่อน */
.logo-sticky {
  display: none !important;
}

/* 2. สถานะเมื่อเลื่อนหน้าจอลงมา (Sticky Mode) */
/* เมื่อ .header_section มีคลาส .header_sticky ต่อท้าย */
.header_section.header_sticky .logo-default {
  display: none !important; /* ซ่อน logo-default */
}

.header_section.header_sticky .logo-sticky {
  display: block !important; /* แสดง logo-sticky */
  height: 40px; /* ✅ ย่อขนาดลงเล็กน้อยเพื่อให้เข้ากับ Padding (10px 0) ที่คุณตั้งไว้ */
}