จสอบคะแนน</a>
            <a href="database/data_nsstudent.html" class="block px-4 py-2 hover:bg-gray-50">สารสนเทศสำหรับนิสิต</a>
            <a href="data_ns02.html" class="block px-4 py-2 hover:bg-gray-50">ทุนการศึกษา</a>
          </div>
        </div>

        <div class="relative group">
          <button class="nav-link-main px-3 py-2">ผู้สนใจเข้าศึกษา <svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7" stroke-width="2"></path></svg></button>
          <div class="dropdown-menu absolute right-0 mt-0 w-64 bg-white shadow-xl border-t-2 border-swu-red py-2">
            <a href="https://nurse.swu.ac.th/academic/ac1.html#programs" class="block px-4 py-2 hover:bg-gray-50">ข้อมูลหลักสูตร</a>
            <a href="https://nurse.swu.ac.th/academic/ac1.html#admission" class="block px-4 py-2 hover:bg-gray-50">วิธีการเข้าศึกษา</a>
            <a href="info_01.html" class="block px-4 py-2 hover:bg-gray-50">ทุนการศึกษา</a>
            <a href="info_02.html" class="block px-4 py-2 hover:bg-gray-50">ชีวิตความเป็นอยู่</a>
            <a href="info_03.html" class="block px-4 py-2 hover:bg-gray-50">ค่าธรรมเนียมการศึกษา</a>
          </div>
        </div>

        <a href="webnews/indexnews.html" class="nav-link-main px-3 py-2 font-semibold text-swu-orange">ข่าว/ประกาศ</a>
        <a href="contact.php" class="nav-link-main px-3 py-2">ติดต่อเรา</a>
      </nav>

      <button class="lg:hidden p-2" id="menu-btn"><svg class="h-7 w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg></button>
    </div>

  <!-- Banner Slideshow -->
  <header class="relative max-w-7xl mx-auto mt-4 h-[280px] sm:h-[320px] md:h-[360px] lg:h-[420px] banner-curve">
    <div class="slider-container rounded-2xl">
      <div class="slider-wrapper" id="slider-wrapper">
        <div class="slide"><a href="link/nogift/ประกาศ No Gift Policy[EN].pdf" target="_blank" rel="noopener"><img src="slide_picture/20251204_นโยบาย No Gift Policy 2569-01.jpg" alt="No Gift Policy"></a></div>
        <div class="slide"><a href="link/ประชุมวิชาการ69/ประชุมฟื้นฟูวิชาการประจำปี 2568.png" target="_new"><img src="slide_picture/ประชุมวิชาการ69.png" alt="Vision"></a></div>
        <div class="slide"><a href="#"><img src="slide_picture/vision.png" alt="Vision"></a></div>
        <div class="slide"><a href="link/222.png" target="_new" rel="noopener"><img src="slide_picture/4.1.png" alt="AUN-QA"></a></div>
        <div class="slide"><img src="slide_picture/QS.jpg" alt="qs"></a></div>
        <div class="slide"><img src="slide_picture/Covid.png" alt="Covid"></a></div>
        <div class="slide"><img src="slide_picture/RDU.png" alt="RDU"></a></div>
        <div class="slide"><img src="slide_picture/ประกาศเจตจำนง1.png" alt="ประกาศเจตจำนง"></a></div>
        <div class="slide"><a href="link/master69/รับสมัคร master69_2.pdf" target="_blank" rel="noopener"><img src="slide_picture/master69.png" alt="รับสมัครปโท"></a></div>
        <div class="slide"><a href="link/pn 69/ใช้ ระเบียบการสมัครผู้ช่วย ปี69.pdf" target="_new" rel="noopener"><img src="slide_picture/bannerpn69.png" alt="ประกาศนียบัตรพนักงานให้"></a></div>
        <div class="slide"><a href="link/np 37-40/ประชาสัมพันธ์ 40-41.png" target="_new" rel="noopener"><img src="slide_picture/np 37-40.png" alt="NP 37-40"></a></div>
        <div class="slide"><a href="link/care 67/(ขยายเวลารับสมัคร)ประกาศนียบัตรพนักงานให้.pdf" target="_new" rel="noopener"><img src="slide_picture/หลักสูตรผู้ดูแล.png" alt="หลักสูตรผู้ดูแล"></a></div>
      </div>
      <button id="prev-btn" class="absolute left-4 top-1/2 -translate-y-1/2 nav-btn text-white p-2 rounded-full" aria-label="previous">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
      </button>
      <button id="next-btn" class="absolute right-4 top-1/2 -translate-y-1/2 nav-btn text-white p-2 rounded-full" aria-label="next">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </button>
      <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2" id="dot-container"></div>
    </div>
  </header>

  <!-- Main -->
  <main class="max-w-7xl mx-auto px-6 pt-3 pb-6">
    <div class="grid grid-cols-1 lg:grid-cols-5 gap-8 mb-8 items-start">
      <!-- ฝั่งซ้าย: ข่าว + ปฏิทิน -->
      <div class="lg:col-span-3">
  <div class="mb-6">
    <h2 class="text-xl font-bold text-[#003366] mb-1">
      ข่าว กิจกรรม และประชาสัมพันธ์
    </h2>
    

    <div class="h-[3px] w-40 bg-gradient-to-r from-[#f97316] via-[#f97316] to-transparent"></div>
  </div>

        <!-- skeleton until loaded -->
        <div id="news-container" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
          <div class="col-span-full">
            <div class="w-full h-24 bg-white/60 rounded-xl animate-pulse"></div>
          </div>
        </div>

        <!-- ปุ่มอ่านต่อ + รีเฟรช -->
        <div class="text-center flex flex-wrap gap-3 justify-center mb-6">
          <a href="webnews/indexnews.html" target="_blank" rel="noopener" class="inline-block bg-gradient-to-r from-royal-blue via-sky-blue to-emerald text-white px-8 py-3 rounded-full hover:shadow-lg transform hover:scale-105 transition-all duration-300 font-semibold">อ่านทั้งหมด</a>
          <button onclick="newsManager && newsManager.refresh && newsManager.refresh()" class="inline-flex items-center space-x-2 bg-white border-2 border-royal-blue text-royal-blue px-6 py-3 rounded-full hover:bg-royal-blue hover:text-white transition-all duration-300 font-semibold">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
            <span>รีเฟรช</span>
          </button>
        </div>

        <!-- ปฏิทินกิจกรรม -->
        <div class="mt-4">
          <div class="bg-white rounded-xl card-shadow p-4">
            <h3 class="text-lg font-bold text-royal-blue mb-3"> ปฏิทินกิจกรรม </h3>

            <!-- ปฏิทิน: ดูรายละเอียด/เลื่อนดูได้ + ปุ่มเล็กสำหรับเข้าสู่โหมดแก้ไข -->
            <div class="calendar-embed-wrapper relative">
              <!-- iframe แสดงปฏิทิน (interactive ดู+เลื่อนเดือนได้) -->
              <div class="calendar-embed-inner"><iframe
                  src="https://nurse.swu.ac.th/calendar/activity_calendar.html"
                  frameborder="0"
                  scrolling="no">
                </iframe>
                
              </div>

                <!-- ปุ่มเฉพาะเจ้าหน้าที่ สำหรับแก้ไข/เพิ่มกิจกรรม -->
              <button
                type="button"
                id="calendar-edit-btn"
                class="absolute bottom-3 right-3 z-10 text-[11px] md:text-xs px-3 py-1 rounded-full bg-white/85 border border-royal-blue/60 text-royal-blue shadow-sm hover:bg-royal-blue hover:text-white transition"
                title="สำหรับเจ้าหน้าที่: เพิ่ม/แก้ไขกิจกรรม">
                + เพิ่ม/แก้ไขกิจกรรม
              </button>
            </div>
            <p class="mt-2 text-xs text-gray-400 italic">
              * ปฏิทินนี้ใช้สำหรับแสดงกิจกรรม หากต้องการเพิ่ม/แก้ไขกิจกรรม โปรดเข้าสู่ระบบสำหรับเจ้าหน้าที่
            </p>
          </div>
        </div>
        <!-- จบส่วนปฏิทินฝั่งซ้าย -->
      </div>

      <!-- ฝั่งขวา: Quick Links + Highlight -->
      <div class="lg:col-span-2 lg:self-start" id="right-panel">
        <div class="bg-white rounded-xl card-shadow p-4 mb-6 lg:-mt-6">
          <h3 class="text-lg font-bold text-royal-blue mb-3">Quick Links</h3>
          <div class="flex items-center gap-3 sm:gap-4 overflow-x-auto flex-nowrap pb-1">
            <a href="https://www.facebook.com/nurseswu" target="_blank" title="Facebook" class="shrink-0"><img src="slide_picture/iconactivity/iconfb.png" alt="Facebook" height="45" class="h-10 md:h-11"></a><a href="http://ipass.swu.ac.th/" target="_blank" title="Internet Passport" class="shrink-0"><img src="slide_picture/iconactivity/i-pass.png" alt="i-pass" class="h-10 md:h-11"></a><a href="https://nurse.swu.ac.th/webscoretest/index.html" target="_blank" title="NS Score" class="shrink-0"><img src="slide_picture/iconactivity/score.jpg" alt="NS Score" height="45" class="h-10 md:h-11"></a><a href="http://search.swu.ac.th:1701/" target="_blank" title="OPAC" class="shrink-0"><img src="slide_picture/iconactivity/opac.png" alt="OPAC" class="h-10 md:h-11"></a><a href="http://supreme.swu.ac.th/" target="_blank" title="SUPREME" class="shrink-0"><img src="slide_picture/iconactivity/course_supreme.png" alt="SUPREME" class="h-10 md:h-11"></a><a href="https://forms.gle/8dJ5ExAmmeDVScs8A" target="_blank" title="ส่งข้อความหาเรา" class="shrink-0"><img src="slide_picture/iconactivity/mailns.png" alt="ส่งข้อความหาเรา" class="h-10 md:h-11"></a>
          </div>
        </div>

        <div class="bg-white rounded-xl card-shadow p-4 mb-6">
          <h3 class="text-lg font-bold text-royal-blue mb-3">Highlight</h3>
          <div class="space-y-3">
            <p><a href="https://nurse.swu.ac.th/nurse2559/สารคณบดี/likenurse.html" target="_blank" class="block overflow-hidden rounded-lg"><img src="slide_picture/สายตรง.png" class="w-full h-auto" alt="สายตรงคณบดี (LikeNurse)"></a>
              <a href="nurse2559/about/Jan%2030_ประกาศจรรยาบรรณวิชาชีพคณะพยาบาลศาสตร์2.pdf" target="_blank" class="block overflow-hidden rounded-lg"><img src="slide_picture/จรรยาบรรณ banner.png" class="w-full h-auto" alt="ประกาศจรรยาบรรณวิชาชีพ"></a>
              <a href="qaKM.html" target="_blank" class="block overflow-hidden rounded-lg"><img src="slide_picture/km.jpg" class="w-full h-auto" alt="KM"></a>
              <a href="https://pdpa.swu.ac.th/" target="_blank" class="block overflow-hidden rounded-lg"><img src="slide_picture/pdpa.jpg" class="w-full h-auto" alt="PDPA"></a>
              <a href="nurse2559/lawnurse/indexcovid.html" class="block overflow-hidden rounded-lg"><img src="slide_picture/prlawnurse.gif" class="w-full h-auto" alt="PR Law Nurse"></a>
              <a href="firenurse.html" target="_blank" class="block overflow-hidden rounded-lg"><img src="slide_picture/firenurse.gif" class="w-full h-auto" alt="Fire Nurse"></a>
            </p>
            <td height="203" align="left" valign = "top"><div class="fb-page" data-tabs="timeline,events,messages"data-href="https://www.facebook.com/nurseswu/" data-tabs="timeline" data-width="480" data-height="700" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false"><blockquote cite="https://www.facebook.com/nurseswu/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/nurseswu/">คณะพยาบาลศาสตร์ มศว</a></blockquote>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- ===== Popup กล่องใส่รหัสผ่านสำหรับจัดการปฏิทิน ===== -->
  <div
    id="calendar-modal-backdrop"
    class="fixed inset-0 bg-black/40 flex items-center justify-center hidden"
    style="z-index:60;">
    <div class="bg-white rounded-2xl shadow-xl max-w-sm w-full mx-4 p-6">
      <h3 class="text-lg font-bold text-royal-blue mb-2">
        เข้าสู่ระบบจัดการปฏิทินกิจกรรม
      </h3>
      <p class="text-sm text-gray-600 mb-4">
        สำหรับเจ้าหน้าที่เท่านั้น กรุณาใส่รหัสผ่านเพื่อเข้าสู่หน้าจัดการกิจกรรม
      </p>
      <label for="calendar-password-input" class="block text-sm font-medium text-gray-700 mb-1">
        รหัสผ่าน
      </label>
      <input
        id="calendar-password-input"
        type="password"
        class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-royal-blue focus:border-royal-blue"
        placeholder="กรอกรหัสผ่าน..."
        autocomplete="off">
      <p id="calendar-password-error" class="text-xs text-red-500 mt-2 hidden">
        รหัสผ่านไม่ถูกต้อง กรุณาลองใหม่อีกครั้ง
      </p>
      <div class="flex justify-end gap-2 mt-5">
        <button
          type="button"
          id="calendar-password-cancel"
          class="px-4 py-2 text-sm rounded-full border border-gray-300 text-gray-600 hover:bg-gray-100">
          ยกเลิก
        </button>
        <button
          type="button"
          id="calendar-password-submit"
          class="px-4 py-2 text-sm rounded-full bg-gradient-to-r from-royal-blue via-sky-blue to-emerald text-white font-semibold hover:shadow-md">
          เข้าสู่หน้าจัดการ
        </button>
      </div>
    </div>
  </div>

  <footer class="bg-[#FF4500] text-white mt-16 border-t-4 border-black/10">
  <div class="max-w-7xl mx-auto px-6 py-12">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
      
      <div class="md:col-span-1">
        <h4 class="text-xl font-bold mb-4">คณะพยาบาลศาสตร์</h4>
        <p class="text-sm leading-relaxed opacity-90">
          มหาวิทยาลัยศรีนครินทรวิโรฒ<br>
          Faculty of Nursing,<br>
          Srinakharinwirot University
        </p>
        <div class="mt-6">
           <img src="images/swu_logo.png" alt="Logo" class="h-16 opacity-90">
        </div>
      </div>

      <div>
        <h4 class="font-bold mb-4 text-lg border-b border-white/20 pb-2 text-white">หน่วยงานภายใน</h4>
        <ul class="space-y-2 text-sm">
          <li><a href="personnel/teachers_1.html" class="hover:underline opacity-80 hover:opacity-100 transition-opacity">ภาควิชา</a></li>
          <li><a href="personnel/office.html" class="hover:underline opacity-80 hover:opacity-100 transition-opacity">สำนักงานคณบดี</a></li>
          <li><a href="#" class="hover:underline opacity-80 hover:opacity-100 transition-opacity">งานกิจการนิสิต</a></li>
          <li><a href="https://nurse.swu.ac.th/calendar/activity_calendar.html" class="hover:underline opacity-80 hover:opacity-100 transition-opacity">ปฏิทินกิจกรรมคณะ</a></li>
        </ul>
      </div>

      <div>
        <h4 class="font-bold mb-4 text-lg border-b border-white/20 pb-2 text-white">ลิงก์ที่เกี่ยวข้อง</h4>
        <ul class="space-y-2 text-sm">
          <li><a href="https://www.swu.ac.th/" target="_blank" class="hover:underline opacity-80 hover:opacity-100 transition-opacity">มหาวิทยาลัยศรีนครินทรวิโรฒ</a></li>
          <li><a href="https://supreme.swu.ac.th/" target="_blank" class="hover:underline opacity-80 hover:opacity-100 transition-opacity">ระบบทะเบียนนิสิต (SUPREME)</a></li>
          <li><a href="https://swu-moodle.swu.ac.th/" target="_blank" class="hover:underline opacity-80 hover:opacity-100 transition-opacity">ระบบการเรียนการสอน (e-Learning)</a></li>
          <li><a href="https://ir.swu.ac.th/" target="_blank" class="hover:underline opacity-80 hover:opacity-100 transition-opacity">หอจดหมายเหตุ มศว</a></li>
        </ul>
      </div>

      <div>
        <h4 class="font-bold mb-4 text-lg border-b border-white/20 pb-2 text-white">ติดต่อสอบถาม</h4>
        <div class="space-y-3 text-sm opacity-90 mb-6">
          <p>📍 63 หมู่ 7 ถ.รังสิต-นครนายก อ.องครักษ์ จ.นครนายก 26120</p>
          <p>📞 โทร: 0-2649-5000 ต่อ 21800, 21802, 21843 มือถือ 089-922-2549</p>
          <p><a href="mailto:nurse@g.swu.ac.th" target="_new">✉️ nurse@g.swu.ac.th</a><br>
            <a href="mailto:nurse@g.swu.ac.th" class="hover:underline"></a></p>
        </div>
        <div class="flex space-x-3">
          <a href="#" class="w-9 h-9 rounded-full bg-white/10 flex items-center justify-center hover:bg-white hover:text-[#FF4500] transition-all border border-white/20">
            <i class="fab fa-facebook-f text-sm"></i>
          </a>
          <a href="#" class="w-9 h-9 rounded-full bg-white/10 flex items-center justify-center hover:bg-white hover:text-[#FF4500] transition-all border border-white/20">
            <i class="fab fa-youtube text-sm"></i>
          </a>
          <a href="#" class="w-9 h-9 rounded-full bg-white/10 flex items-center justify-center hover:bg-white hover:text-[#FF4500] transition-all border border-white/20">
            <i class="fas fa-globe text-sm"></i>
          </a>
        </div>
      </div>

    </div>
  </div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<div class="bg-black/10 py-4 text-white">
  <div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center text-[10px] uppercase tracking-wider opacity-70">
    <p>© 2026 Faculty of Nursing, SWU. All Rights Reserved.</p>
    
    <div class="flex space-x-6 mt-2 md:mt-0">
      <a href="https://www.facebook.com/nurseswu" class="hover:text-white flex items-center gap-2 transition-colors">
        <i class="fas fa-shield-alt text-[12px]"></i> <span>Privacy Policy</span>
      </a>
      
      <a href="https://www.youtube.com/channel/UCoK_8_Ro14Rxw-jt2PfeqjA" class="hover:text-white flex items-center gap-2 transition-colors">
        <i class="fas fa-file-contract text-[12px]"></i> <span>Terms of Service</span>
      </a>
      
      <a href="#" class="hover:text-white flex items-center gap-2 transition-colors">
        <i class="fas fa-user-shield text-[12px]"></i> <span>Contact Webmaster</span>
      </a>
    </div>
  </div>
</div>
</footer>

  <script>
// --- ส่วนควบคุมเมนูมือถือแบบอัตโนมัติ (Clone จาก Desktop) ---
  document.addEventListener('DOMContentLoaded', function() {
    const desktopNav = document.querySelector('nav.hidden.lg\\:flex');
    const mobileMenuContent = document.getElementById('mobile-menu-content');
    const menuBtn = document.getElementById('menu-btn');
    const mobileMenuContainer = document.getElementById('mobile-menu');

    if (desktopNav && mobileMenuContent) {
      mobileMenuContent.innerHTML = ''; // ล้างค่าเก่า
      const navItems = desktopNav.children;
  
// ✅ เมนู Topbar + ภาษา (มือถือ)
const topMenuHtml = `
  <div class="border-b border-gray-200 pb-2 mb-2">
    <a href="database/data_nsstudent.html" class="block px-3 py-2 text-sm text-gray-700">นิสิต</a>
    <a href="database/data_master.html" target="_new" class="block px-3 py-2 text-sm text-gray-700">บุคลากร</a>
    <a href="#" class="block px-3 py-2 text-sm text-gray-700">ศิษย์เก่า</a>

    <!-- ภาษา -->
    <div class="flex items-center space-x-2 px-3 py-2 text-sm">
      <span class="font-bold text-gray-800">TH</span>
      <span class="text-gray-400">|</span>
      <a href="?lang=en" class="text-gray-600 hover:text-swu-orange">EN</a>
    </div>
  </div>
`;
mobileMenuContent.insertAdjacentHTML('beforeend', topMenuHtml);
  
  
      Array.from(navItems).forEach((item, index) => {
        const subMenuId = `sub-mobile-${index}`;
        
        // ถ้าเป็นเมนูแบบมี Dropdown (class group)
        if (item.classList.contains('group')) {
          const btn = item.querySelector('button');
const btnText = btn.childNodes[0].textContent.trim();
          const dropdownLinks = item.querySelectorAll('.dropdown-menu a');

let subHtml = `
  <div class="border-b border-gray-100">
    <button onclick="event.preventDefault(); toggleMobileSub('${subMenuId}')" 
      class="w-full flex justify-between items-center px-3 py-3 text-base font-medium text-gray-700 hover:text-swu-red">
      ${btnText}
      <svg id="icon-${subMenuId}" class="w-4 h-4 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path d="M19 9l-7 7-7-7" stroke-width="2"></path>
      </svg>
    </button>

    <div id="${subMenuId}" class="hidden bg-gray-50">
`;
          
          dropdownLinks.forEach(link => {
           subHtml += `<a href="${link.getAttribute('href')}" 
  class="block px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-swu-red">
  ${link.innerText}
</a>`;
          });

          subHtml += `</div></div>`;
          mobileMenuContent.insertAdjacentHTML('beforeend', subHtml);
        } 
        // ถ้าเป็นลิงก์เดี่ยวๆ (เช่น หน้าหลัก, ข่าว)
        else if (item.tagName === 'A') {
          const isOrange = item.classList.contains('text-swu-orange');
          const linkHtml = `<a href="${item.getAttribute('href')}" class="block px-3 py-3 text-base font-medium ${isOrange ? 'text-swu-orange' : 'text-gray-700'} border-b border-gray-50">${item.innerText}</a>`;
          mobileMenuContent.insertAdjacentHTML('beforeend', linkHtml);
        }
      });
    }

    if (menuBtn && mobileMenuContainer) {
      menuBtn.addEventListener('click', () => mobileMenuContainer.classList.toggle('hidden'));
    }
  });

  // ฟังก์ชันเปิด-ปิดเมนูย่อยในมือถือ
  function toggleMobileSub(id) {
    const sub = document.getElementById(id);
    const icon = document.getElementById('icon-' + id);
    if (sub) {
      sub.classList.toggle('hidden');
      if(icon) icon.classList.toggle('rotate-180');
    }
  }

// ฟังก์ชันสำหรับเปิด/ปิดเมนูย่อยในมือถือ
function toggleSubMenu(id) {
  const subMenu = document.getElementById(id);
  if (subMenu) {
    subMenu.classList.toggle('hidden');
    // เพิ่ม: หมุนลูกศร (ถ้าต้องการความสวยงามสามารถเพิ่ม class rotate ได้)
  }
}

    /*---------- Drive helpers ---------- */
    function extractDriveId(url){
      if(!url) return '';
      let m = url.match(/\/file\/d\/([a-zA-Z0-9_-]+)(?:\/view)?/);
      if(m && m[1]) return m[1];
      m = url.match(/[?&]id=([a-zA-Z0-9_-]+)/);
      if(m && m[1]) return m[1];
      m = url.match(/\/thumbnail\?.*?id=([a-zA-Z0-9_-]+)/);
      if(m && m[1]) return m[1];
      m = url.match(/([a-zA-Z0-9_-]{20,})/);
      if(m && m[1] && !url.includes('http')) return m[1];
      return '';
    }

    function normalizeImageUrl(url){
      if(!url || typeof url!=='string') return '';
      const u = url.trim();
      if(!u) return '';
      if(u.includes('uc?export=view') || u.includes('uc?id=')) return u;
      const id = extractDriveId(u);
      if(id) return `https://drive.google.com/uc?export=view&id=${id}`;
      return u;
    }

    function driveAlternatives(url){
      const id = extractDriveId(url) || extractDriveId(normalizeImageUrl(url));
      if(!id) return [];
      return [
        `https://drive.google.com/uc?export=view&id=${id}`,
        `https://drive.google.com/thumbnail?id=${id}&sz=w1024`,
        `https://lh3.googleusercontent.com/d/${id}=w1024`,
        `https://lh3.googleusercontent.com/d/${id}=w800`,
        `https://drive.google.com/uc?id=${id}`
      ];
    }

    function handleDriveImageError(img){
      const orig = img.getAttribute('data-orig') || img.src || '';
      const alts = driveAlternatives(orig);
      let tries = parseInt(img.getAttribute('data-drive-tries') || '0', 10);
      if(tries < alts.length){
        img.setAttribute('data-drive-tries', String(tries + 1));
        img.src = alts[tries];
      }else{
        if(window.newsManager){
          img.src = window.newsManager.getRandomImage();
        }
      }
    }

    /* ---------- Banner slider ---------- */
    class BannerSlider{
      constructor(){
        this.slider=document.getElementById('slider-wrapper');
        this.dotContainer=document.getElementById('dot-container');
        this.prevBtn=document.getElementById('prev-btn');
        this.nextBtn=document.getElementById('next-btn');
        this.currentIndex=0;
        this.autoPlayInterval=null;
        this.init();
      }
      init(){
        if(!this.slider||!this.dotContainer){
          console.error('Slider wrapper/dot container not found');
          return;
        }
        this.slides=[...this.slider.querySelectorAll('.slide')];
        this.totalSlides=this.slides.length;
        if(this.totalSlides<=1){return;}
        this.createDots();
        this.updateSlider();
        this.bindEvents();
        this.startAutoPlay();
      }
      createDots(){
        this.dotContainer.innerHTML='';
        for(let i=0;i<this.totalSlides;i++){
          const dot=document.createElement('span');
          dot.className='dot w-3 h-3 bg-white/50 rounded-full cursor-pointer';
          dot.addEventListener('click',()=>this.goToSlide(i));
          this.dotContainer.appendChild(dot);
        }
      }
      updateSlider(){
        const translateX=-(this.currentIndex*100);
        this.slider.style.transform=`translateX(${translateX}%)`;
        const dots=this.dotContainer.querySelectorAll('.dot');
        dots.forEach((d,i)=>d.classList.toggle('active',i===this.currentIndex));
      }
      nextSlide(){
        this.currentIndex=(this.currentIndex+1)%this.totalSlides;
        this.updateSlider();
      }
      prevSlide(){
        this.currentIndex=(this.currentIndex-1+this.totalSlides)%this.totalSlides;
        this.updateSlider();
      }
      goToSlide(i){
        this.currentIndex=i;
        this.updateSlider();
        this.resetAutoPlay();
      }
      bindEvents(){
        if(this.nextBtn)this.nextBtn.addEventListener('click',()=>{this.nextSlide();this.resetAutoPlay();});
        if(this.prevBtn)this.prevBtn.addEventListener('click',()=>{this.prevSlide();this.resetAutoPlay();});
        const container=this.slider.parentElement;
        container.addEventListener('mouseenter',()=>this.stopAutoPlay());
        container.addEventListener('mouseleave',()=>this.startAutoPlay());
        let startX=0;
        this.slider.addEventListener('touchstart',(e)=>{startX=e.touches[0].clientX;});
        this.slider.addEventListener('touchend',(e)=>{
          const endX=e.changedTouches[0].clientX;
          const diff=startX-endX;
          if(Math.abs(diff)>50){
            diff>0?this.nextSlide():this.prevSlide();
            this.resetAutoPlay();
          }
        });
      }
      startAutoPlay(){
        this.stopAutoPlay();
        this.autoPlayInterval=setInterval(()=>this.nextSlide(),5000);
      }
      stopAutoPlay(){
        if(this.autoPlayInterval){
          clearInterval(this.autoPlayInterval);
          this.autoPlayInterval=null;
        }
      }
      resetAutoPlay(){
        this.stopAutoPlay();
        this.startAutoPlay();
      }
    }

    /* ---------- News manager ---------- */
    class NewsManager{
      constructor(){
        this.newsContainer=document.getElementById('news-container');
        this.newsData=[];
        this.init();
      }
      init(){this.loadNewsData();}
      async loadNewsData(){
        try{
          await this.fetchFromGoogleSheet();
        }
        catch(e){
          console.warn('Sheet fetch failed, using fallback:',e);
          this.loadFallbackData();
        }
      }
      async fetchFromGoogleSheet(){
        const sheetID='1d6QnQl0OK-SJncLnk5prMMLi7TwJOjsn7UvgZ8XqvLw';
        const sheetName='news';
        const query=encodeURIComponent('SELECT *');
        const url=`https://docs.google.com/spreadsheets/d/${sheetID}/gviz/tq?sheet=${sheetName}&tq=${query}`;
        const resp=await fetch(url,{cache:'no-store'});
        const text=await resp.text();
        const match=text.match(/google\.visualization\.Query\.setResponse\((.*)\)/s);
        if(!match) throw new Error('GViz response not found');
        const json=JSON.parse(match[1]);
        const rows=json.table?.rows||[];
        rows.sort((a,b)=>new Date(this.readCell(b,0))-new Date(this.readCell(a,0)));
        this.newsData=rows.slice(0,6).map(r=>({
          date:this.readCell(r,0),
          title:this.readCell(r,1),
          desc:this.readCell(r,2),
          img:normalizeImageUrl(this.readCell(r,3))||this.getRandomImage(),
          link:this.readCell(r,4)||'https://nurse.swu.ac.th/webnews/indexnews.html',
          type:this.readCell(r,5)||'ข่าวทั่วไป'
        })).filter(n=>n.title);
        this.renderNews();
      }
      loadFallbackData(){
        this.newsData=[
          {date:'15 ก.ย. 2568',title:'รับสมัครนิสิตใหม่ ปีการศึกษา 2568',desc:'เปิดรับสมัครนิสิตใหม่หลักสูตรพยาบาลศาสตรบัณฑิต ประจำปีการศึกษา 2568 โดยรับสมัครผ่านระบบ TCAS',img:'https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop',link:'https://nurse.swu.ac.th/webnews/indexnews.html',type:'การศึกษา'},
          {date:'12 ก.ย. 2568',title:'การประชุมวิชาการพยาบาลศาสตร์ระดับชาติ',desc:'จัดการประชุมวิชาการพยาบาลศาสตร์ระดับชาติ หัวข้อ "นวัตกรรมการพยาบาลเพื่อสังคมผู้สูงอายุ"',img:'https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=400&h=300&fit=crop',link:'https://nurse.swu.ac.th/webnews/indexnews.html',type:'งานวิชาการ'},
          {date:'10 ก.ย. 2568',title:'โครงการบริการวิชาการแก่ชุมชน',desc:'คณะพยาบาลศาสตร์ร่วมกับโรงพยาบาลท้องถิ่น จัดโครงการตรวจสุขภาพฟรีสำหรับประชาชนในพื้นที่',img:'https://images.unsplash.com/photo-1582750433449-648ed127bb54?w=400&h=300&fit=crop',link:'https://nurse.swu.ac.th/webnews/indexnews.html',type:'บริการวิชาการ'},
          {date:'8 ก.ย. 2568',title:'การรับรองคุณภาพการศึกษาจาก TQA',desc:'คณะพยาบาลศาสตร์ได้รับการรับรองคุณภาพการศึกษาจากสำนักงานรับรองคุณภาพการศึกษา (TQA)',img:'https://images.unsplash.com/photo-1434030216411-0b793f4b4173?w=400&h=300&fit=crop',link:'https://nurse.swu.ac.th/webnews/indexnews.html',type:'รางวัล'},
          {date:'6 ก.ย. 2568',title:'กิจกรรมปฐมนิเทศนิสิตใหม่',desc:'ต้อนรับนิสิตใหม่ ด้วยกิจกรรมปฐมนิเทศและแนะแนวการใช้ชีวิตในรั้วมหาวิทยาลัย',img:'https://images.unsplash.com/photo-1551601651-2a8555f1a136?w=400&h=300&fit=crop',link:'https://nurse.swu.ac.th/webnews/indexnews.html',type:'กิจกรรม'},
          {date:'4 ก.ย. 2568',title:'สมาคมศิษย์เก่าพบปะนิสิต',desc:'กิจกรรมเชื่อมความสัมพันธ์ระหว่างศิษย์เก่ากับนิสิตปัจจุบัน พร้อมบอกเล่าประสบการณ์ทำงานจริง',img:'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=300&fit=crop',link:'https://nurse.swu.ac.th/webnews/indexnews.html',type:'เครือข่ายศิษย์เก่า'}
        ];
        this.renderNews();
      }
      readCell(row,i){return row.c[i]&&row.c[i].v?row.c[i].v:''}
      getRandomImage(){
        const imgs=[
          'https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop',
          'https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=400&h=300&fit=crop',
          'https://images.unsplash.com/photo-1582750433449-648ed127bb54?w=400&h=300&fit=crop',
          'https://images.unsplash.com/photo-1434030216411-0b793f4b4173?w=400&h=300&fit=crop',
          'https://images.unsplash.com/photo-1551601651-2a8555f1a136?w=400&h=300&fit=crop'
        ];
        return imgs[Math.floor(Math.random()*imgs.length)];
      }
      renderNews(){
        if(!this.newsContainer) return;
        if(!this.newsData||this.newsData.length===0){
          this.newsContainer.innerHTML=`
            <div class="col-span-full text-center py-8">
              <p class="text-gray-500">ไม่พบข้อมูลข่าวสาร</p>
              <a href="https://nurse.swu.ac.th/webnews/indexnews.html" target="_blank" rel="noopener" class="text-blue-600 hover:underline text-sm">ดูข่าวสารทั้งหมด →</a>
            </div>`;
          return;
        }
        this.newsContainer.innerHTML='';
        this.newsData.forEach(news=>{
          const card=document.createElement('div');
          card.className='bg-white rounded-xl card-shadow overflow-hidden transform hover:-translate-y-2 hover:shadow-xl transition-all duration-300 flex flex-col group cursor-pointer';
          const imgSrc=normalizeImageUrl(news.img);
          card.innerHTML=`
            <div class="w-full overflow-hidden" style="aspect-ratio: 4 / 3;">
              <img src="${imgSrc}" alt="${news.title}" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110" referrerpolicy="no-referrer" data-orig="${news.img}" data-drive-tries="0" onerror="handleDriveImageError(this)">
            </div>
            <div class="p-4 flex-1 flex flex-col justify-between">
              <div>
                <h3 class="font-bold text-gray-800 mb-2 group-hover:text-royal-blue transition-colors duration-300 line-clamp-2 text-sm">${news.title}</h3>
                <p class="text-gray-600 text-xs mb-3 line-clamp-3">${news.desc}</p>
              </div>
              <div class="flex justify-between items-center text-xs">
                <span class="text-gray-400">${news.date}</span>
                <span class="px-2 py-1 bg-gradient-to-r from-sky-blue/20 to-emerald/20 text-sky-blue rounded-full font-medium">${news.type}</span>
              </div>
            </div>`;
          card.addEventListener('click',()=>{window.open(news.link,'_blank','noopener');});
          this.newsContainer.appendChild(card);
        });
      }
      refresh(){
        if(this.newsContainer){
          this.newsContainer.innerHTML=`
            <div class="col-span-full text-center py-8">
              <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-2"></div>
              <p class="text-gray-500">กำลังโหลดข่าวสาร...</p>
            </div>`;
        }
        this.loadNewsData();
      }
    }

    // Boot
    window.addEventListener('DOMContentLoaded',()=>{
      try{window.bannerSlider=new BannerSlider();}catch(e){console.error('BannerSlider error:',e);}
      try{window.newsManager=new NewsManager();}catch(e){console.error('NewsManager error:',e);}
      console.log('🏥 เว็บไซต์โหลดสำเร็จ');

      /* ===== Logic popup รหัสผ่านปฏิทิน ===== */
      const calendarEditBtn = document.getElementById('calendar-edit-btn');
      const modalBackdrop = document.getElementById('calendar-modal-backdrop');
      const passwordInput = document.getElementById('calendar-password-input');
      const passwordError = document.getElementById('calendar-password-error');
      const cancelBtn = document.getElementById('calendar-password-cancel');
      const submitBtn = document.getElementById('calendar-password-submit');

      // TODO: เปลี่ยนรหัสผ่านและลิงก์ได้ตามต้องการ
      const CALENDAR_PASSWORD = 'nurse11';
      const CALENDAR_EDIT_URL = 'https://nurse.swu.ac.th/calendar/activity_calendar.html';

      if (calendarEditBtn && modalBackdrop && passwordInput && passwordError) {
        const openModal = () => {
          modalBackdrop.classList.remove('hidden');
          passwordError.classList.add('hidden');
          passwordInput.value = '';
          setTimeout(() => {
            passwordInput.focus();
          }, 50);
        };

        const closeModal = () => {
          modalBackdrop.classList.add('hidden');
          passwordInput.value = '';
          passwordError.classList.add('hidden');
        };

      const handleSubmit = () => {
  const val = (passwordInput.value || '').trim();
  if (val === CALENDAR_PASSWORD) {
    passwordError.classList.add('hidden');
    passwordInput.value = '';
    // ไปหน้าจัดการปฏิทินใน "แท็บใหม่"
    window.open(CALENDAR_EDIT_URL, '_blank', 'noopener');
  } else {
    passwordError.classList.remove('hidden');
    passwordInput.focus();
    passwordInput.select();
  }
};


        calendarEditBtn.addEventListener('click', openModal);
        cancelBtn && cancelBtn.addEventListener('click', closeModal);
        submitBtn && submitBtn.addEventListener('click', handleSubmit);

        // ปิดเมื่อคลิกนอกกล่อง
        modalBackdrop.addEventListener('click', (e) => {
          if (e.target === modalBackdrop) {
            closeModal();
          }
        });

        // กด Enter เพื่อยืนยัน
        passwordInput.addEventListener('keydown', (e) => {
          if (e.key === 'Enter') {
            e.preventDefault();
            handleSubmit();
          }
        });
      }
    });

    // Fallback: generic IMG error
    document.addEventListener('error',(e)=>{
      if(e.target.tagName==='IMG'){
        const tries=parseInt(e.target.getAttribute('data-drive-tries')||'0',10);
        if(tries>0) return;
        if(window.newsManager) e.target.src=window.newsManager.getRandomImage();}
    },true);
  
  </script>
  <div id="fb-root"></div>
  <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v24.0&appId=APP_ID"></script>
</body>
</html>