: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; /* สีข้อความให้อ่านง่ายขึ้นบนพื้นเข้ม */
  }
}

/* สไตล์เมื่อเลื่อนหน้าจอลงมา (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;
}

/* ตัวกล่อง 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 */

/* กล่องครอบ */
.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;
}

/* เปลี่ยน 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;
    }