<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thư Viện – Trường Đại Học Nam Cần Thơ</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Be+Vietnam+Pro:wght@300;400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
<link rel="icon" href="https://thuvien.nctu.edu.vn/api/dist/image/2025_Jun_17_logoDNC.png" type="image/x-icon">
<link rel="stylesheet" href="https://thuvien.nctu.edu.vn/api/dist/assets/css/new/css_new_header.css?ver=1">
</head>
<body>

<!-- TOPBAR -->
<div class="topbar">
  <div class="topbar-inner">
    <span><i class="fa fa-map-marker-alt" style="color:var(--gold);margin-right:5px"></i> Số 168 Nguyễn Văn Cừ nối dài, Phường An Bình, TP. Cần Thơ</span>
    <div>
      <a href="#"><i class="fab fa-facebook"></i></a>
      <a href="#"><i class="fab fa-youtube"></i></a>
      <!-- <a href="#"><i class="fab fa-tiktok"></i></a> -->
      <a href="#" style="margin-left:18px"><i class="fa fa-phone"></i> 0292 3508 789</a>
    </div>
  </div>
</div>

<!-- HEADER -->
<header>
  <div class="header-inner">
    <a href="https://thuvien.nctu.edu.vn/api/index.php/new/home2" class="logo">
      <div class="logo-icon"></div>
      <img src="https://thuvien.nctu.edu.vn/api/dist/image/logo2.png" alt="Logo Thư Viện" class="logo-img">
      <div class="logo-text">
        
        <!-- <div class="brand">Thư Viện – Đại Học Nam Cần Thơ</div> -->
        <!-- <div class="sub">Southern Can Tho University Library</div> -->
      </div>
    </a>
    <nav>
      <a href="#" class="active">Trang chủ</a>
      
      <!-- Ebook dropdown -->
      <div class="nav-item">
        <a href="#news">Ebooks <i class="fa fa-chevron-down caret"></i></a>
        <div class="dropdown">
          <div class="dd-header">Ebooks </div>
          <a href="https://sachweb.com/ebookthuvien/tvdhnamcantho/"><i class="fa fa-comments"></i> Văn học - Chính trị - Xã hội</a>
          <a href="https://ebooknctu.sachbanquyen.com.vn/customer/login"><i class="fa fa-university"></i> Kiến Trúc - Y Dược</a>
          <a href="https://ebooknctu.nxbbachkhoa.vn/"><i class="fa fa-wrench"></i> Kỹ Thuật - BKHN</a>
          <a href="https://link.gale.com/apps/menu?u=vnnctu"><i class="fa fa-line-chart"></i> Kinh tế</a>
        </div>
      </div>

      <!-- Tài liệu điện tử dropdown -->
      <div class="nav-item">
        <a href="#gallery">Tài liệu điện tử <i class="fa fa-chevron-down caret"></i></a>
        <div class="dropdown">
          <div class="dd-header">Tài liệu điện tử</div>
          <a href="https://thuvien.nctu.edu.vn/api/index.php/news/file-tai-lieu-khoa-kinh-te"><i class="fa fa-line-chart"></i> Khoa Kinh tế</a>
          <a href="https://thuvien.nctu.edu.vn/api/index.php/news/tai-lieu-dien-tu"><i class="fa fa-stethoscope"></i> Khoa Y</a>
          <a href="https://thuvien.nctu.edu.vn/api/index.php/news/file-tai-lieu-khoa-duoc"><i class="fa fa-pills"></i> Khoa Dược</a>
          <a href="https://thuvien.nctu.edu.vn/api/index.php/news/file-tai-lieu-ngon-ngu-anh"><i class="fa fa-language"></i> Khoa Ngoại ngữ</a>
          <a href="https://thuvien.nctu.edu.vn/api/index.php/news/file-tai-lieu-khoa-co-khi-dong-luc"><i class="fa fa-cogs"></i> Khoa Cơ khí Động lực</a>
          <a href="https://thuvien.nctu.edu.vn/api/index.php/news/file-tai-lieu-khoa-cong-nghe-thong-tin"><i class="fa fa-laptop-code"></i> Khoa Công nghệ Thông tin</a>
          <a href="https://thuvien.nctu.edu.vn/api/index.php/news/file-tai-lieu-khoa-du-lich"><i class="fa fa-plane"></i> Khoa Du lịch</a>
        </div>
      </div>

      <!-- Tài liệu nội sinh dropdown -->
      <div class="nav-item">
        <a href="#video">Tài liệu nội sinh <i class="fa fa-chevron-down caret"></i></a>
        <div class="dropdown">
          <div class="dd-header">Tài liệu nội sinh</div>
          <a href="http://113.161.234.52:8080/digital/handle/123456789/1"><i class="fa fa-book"></i> Giáo trình - Bài giảng</a>
          <a href="http://113.161.234.52:8080/digital/handle/123456789/3"><i class="fa fa-graduation-cap"></i> Khóa luận Đại học</a>
          <a href="http://113.161.234.52:8080/digital/handle/123456789/274"><i class="fa fa-user-graduate"></i> Luận văn Thạc sĩ</a>
          <a href="http://113.161.234.52:8080/digital/handle/123456789/571"><i class="fa fa-flask"></i> Nghiên cứu Khoa học</a>
        </div>
      </div>

      <!-- Tin tức dropdown -->
      <div class="nav-item">
        <a href="#news">Tin tức <i class="fa fa-chevron-down caret"></i></a>
        <div class="dropdown">
          <div class="dd-header">Tin tức</div>
          <a href="https://thuvien.nctu.edu.vn/api/index.php/news/topic/2"><i class="fa fa-newspaper"></i> Tin tức & Sự kiện</a>
          <a href="https://thuvien.nctu.edu.vn/api/index.php/news/topic/8"><i class="fa fa-bullhorn"></i> Thông báo</a>
          <a href="https://thuvien.nctu.edu.vn/api/index.php/news/topic/7"><i class="fa fa-book"></i> Sách mới</a>
          <a href="https://thuvien.nctu.edu.vn/api/index.php/news/topic/6"><i class="fa fa-gift"></i> Sách tặng</a>
        </div>
      </div>

      <!-- CSDL dropdown -->
      <div class="nav-item">
        <a href="#database">Hướng dẫn <i class="fa fa-chevron-down caret"></i></a>
        <div class="dropdown">
          <div class="dd-header">Hướng dẫn</div>
          <a href="https://drive.google.com/file/d/1whN-XCSO2sDQNuytLKrUBKtA3bWc14_-/view?usp=sharing"><i class="fa fa-file-pdf"></i> File hướng dẫn</a>
          <a href="https://www.youtube.com/watch?v=Ji5-o8fNzYw"><i class="fa fa-video"></i> Video hướng dẫn</a>
        </div>
      </div>

      <a href="https://drive.google.com/file/d/1-qw4tUlxr8L92UNiTLnzOsQMoKe5zR70/view">Nội quy - Qui định</a>

      <a href="https://thuvien.nctu.edu.vn:8000/cgi-bin/koha/opac-user.pl">Gia hạn</a>
    </nav>
      <button class="burger" id="burgerBtn" aria-label="Menu">
        <span></span><span></span><span></span>
      </button>
  </div>
  <div class="mobile-nav" id="mobileNav">
    <a href="#">🏠 Trang chủ</a>
    <a href="#news" style="display:flex;align-items:center;justify-content:space-between" onclick="toggleMobSub(event,'mob-news')">📰 Ebooks <i class="fa fa-chevron-down" style="font-size:.65rem;opacity:.5"></i></a>
    <div class="mob-sub" id="mob-news" style="display:none">
      <a href="#news">Văn học - Chính trị - Xã hội</a>
      <a href="#news">KTr - Y Dược - KTế</a>
      <a href="#news">Kỹ Thuật - BKHN</a>
      <a href="#news">Kinh tế</a>
    </div>
    <a href="#news" style="display:flex;align-items:center;justify-content:space-between" onclick="toggleMobSub(event,'mob-news')">📰 Tin tức <i class="fa fa-chevron-down" style="font-size:.65rem;opacity:.5"></i></a>
    <div class="mob-sub" id="mob-news" style="display:none">
      <a href="#news">Tin tức & Sự kiện</a>
      <a href="#news">Thông báo</a>
      <a href="#news">Hoạt động nổi bật</a>
    </div>
    <a href="#gallery" style="display:flex;align-items:center;justify-content:space-between" onclick="toggleMobSub(event,'mob-gallery')">🖼️ Góc ảnh <i class="fa fa-chevron-down" style="font-size:.65rem;opacity:.5"></i></a>
    <div class="mob-sub" id="mob-gallery" style="display:none">
      <a href="#gallery">Ảnh hoạt động</a>
      <a href="#gallery">Không gian thư viện</a>
      <a href="#gallery">Sinh viên & Học tập</a>
    </div>
    <a href="#video">🎬 Video Clip</a>
    <a href="#books" style="display:flex;align-items:center;justify-content:space-between" onclick="toggleMobSub(event,'mob-books')">📖 Sách mới <i class="fa fa-chevron-down" style="font-size:.65rem;opacity:.5"></i></a>
    <div class="mob-sub" id="mob-books" style="display:none">
      <a href="#books">Công nghệ & CNTT</a>
      <a href="#books">Kinh tế & Quản trị</a>
      <a href="#books">Luật & Xã hội</a>
      <a href="#books">Y – Dược</a>
    </div>
    <a href="#database" style="display:flex;align-items:center;justify-content:space-between" onclick="toggleMobSub(event,'mob-db')">🗄️ Cơ sở dữ liệu <i class="fa fa-chevron-down" style="font-size:.65rem;opacity:.5"></i></a>
    <div class="mob-sub" id="mob-db" style="display:none">
      <a href="#database">CSDL trực tuyến</a>
      <a href="#database">Sách điện tử</a>
      <a href="#database">Tạp chí khoa học</a>
    </div>
    <a href="#hours">🕐 Giờ hoạt động</a>
  </div>
</header>
<script>

  // MOBILE NAV
  document.getElementById('burgerBtn').onclick = () => {
    document.getElementById('mobileNav').classList.toggle('open');
  };

  // DROPDOWN — JS-controlled with close delay so cursor can travel to menu
  (function() {
    const items = document.querySelectorAll('.nav-item');
    let closeTimers = new WeakMap();

    items.forEach(item => {
      // Open immediately on mouseenter
      item.addEventListener('mouseenter', () => {
        // Cancel any pending close for this item
        if (closeTimers.has(item)) {
          clearTimeout(closeTimers.get(item));
          closeTimers.delete(item);
        }
        // Close all others instantly
        items.forEach(other => {
          if (other !== item) {
            other.classList.remove('open');
            if (closeTimers.has(other)) {
              clearTimeout(closeTimers.get(other));
              closeTimers.delete(other);
            }
          }
        });
        item.classList.add('open');
      });

      // Close with 180ms delay — gives cursor time to reach the dropdown
      item.addEventListener('mouseleave', () => {
        const t = setTimeout(() => {
          item.classList.remove('open');
          closeTimers.delete(item);
        }, 180);
        closeTimers.set(item, t);
      });
    });

    // Close all when clicking outside
    document.addEventListener('click', (e) => {
      if (!e.target.closest('.nav-item')) {
        items.forEach(i => i.classList.remove('open'));
      }
    });
  })();

  // MOBILE SUBMENU TOGGLE
  function toggleMobSub(e, id) {
    e.preventDefault();
    const sub = document.getElementById(id);
    const icon = e.currentTarget.querySelector('.fa-chevron-down');
    if (sub.style.display === 'none' || sub.style.display === '') {
      sub.style.display = 'block';
      if(icon) icon.style.transform = 'rotate(180deg)';
    } else {
      sub.style.display = 'none';
      if(icon) icon.style.transform = '';
    }
  }
</script><link rel="stylesheet" href="https://thuvien.nctu.edu.vn/api/dist/assets/css/new/css_new_home.css?ver=1">
<style>
:root{
  --navy:#0a1a3b; --gold:#c9922a; --gold-light:#f0b84a;
  --cream:#fdf6ec; --accent:#1a4580;
  --gray-100:#f4f4f4; --gray-200:#e5e5e5; --gray-500:#888; --gray-700:#444;
  --green:#1a7a4a;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* Chặn scroll ngang toàn trang */
html, body{ max-width:100%; overflow-x:hidden; }
body{ font-family:'Be Vietnam Pro',sans-serif; background:#f7f8fc; color:var(--navy); }
a{ text-decoration:none; color:inherit; }
/* Tất cả phần tử không được vượt quá viewport */
.page-wrap, .page-layout, .detail-main, .doc-hero,
.doc-toolbar, .doc-list, .doc-card, .master-link{
  max-width:100%;
  box-sizing:border-box;
}
::-webkit-scrollbar{ width:4px; }
::-webkit-scrollbar-thumb{ background:var(--gold); border-radius:4px; }

/* READING PROGRESS */
#reading-bar{ position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg,var(--gold),var(--gold-light)); z-index:9999; transition:width .1s linear; }

/* BREADCRUMB */
.breadcrumb-bar{ background:#fff; border-bottom:1px solid var(--gray-200); overflow:hidden; max-width:100%; }
.breadcrumb{ max-width:min(88vw,1560px); margin:0 auto; padding:9px 14px; display:flex; align-items:center; gap:4px; font-size:.68rem; color:var(--gray-500); flex-wrap:wrap; overflow:hidden; }
.breadcrumb a{ color:var(--gray-700); transition:.15s; }
.breadcrumb a:hover{ color:var(--gold); }
.breadcrumb .sep{ color:var(--gray-200); }
.breadcrumb .cur{ color:var(--navy); font-weight:600; max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-block; vertical-align:middle; }

/* PAGE */
.page-wrap{ max-width:min(88vw,1560px); margin:0 auto; padding:32px 20px 72px; box-sizing:border-box; overflow:hidden; }
.page-layout{ display:grid; grid-template-columns:1fr 280px; gap:36px; align-items:start; max-width:100%; overflow:hidden; }
.detail-main, .detail-sidebar{ min-width:0; max-width:100%; box-sizing:border-box; overflow:hidden; }

/* ══ MAIN ══ */

/* HERO HEADER */
.doc-hero{
  background:linear-gradient(135deg, var(--navy) 0%, var(--accent) 100%);
  border-radius:16px; padding:32px 36px; margin-bottom:24px;
  position:relative; overflow:hidden;
}
.doc-hero::before{
  content:''; position:absolute; top:-40px; right:-40px;
  width:220px; height:220px; border-radius:50%;
  background:rgba(255,255,255,.04); pointer-events:none;
}
.doc-hero::after{
  content:''; position:absolute; bottom:-60px; right:60px;
  width:160px; height:160px; border-radius:50%;
  background:rgba(201,146,42,.08); pointer-events:none;
}
.doc-hero-badge{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(201,146,42,.2); color:var(--gold-light);
  font-size:.62rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; padding:5px 12px; border-radius:20px;
  margin-bottom:14px; border:1px solid rgba(201,146,42,.3);
}
.doc-hero-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.3rem,2.4vw,1.9rem);
  font-weight:900; color:#fff; line-height:1.3;
  margin-bottom:16px;
}
.doc-hero-meta{ display:flex; gap:20px; flex-wrap:wrap; }
.doc-hero-meta span{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.74rem; color:rgba(255,255,255,.65);
}
.doc-hero-meta i{ color:var(--gold-light); font-size:.7rem; }

/* SEARCH & FILTER BAR */
.doc-toolbar{
  display:flex; gap:12px; align-items:center;
  background:#fff; border-radius:12px; padding:14px 18px;
  margin-bottom:20px; border:1.5px solid var(--gray-200);
  flex-wrap:wrap;
}
.doc-search{
  flex:1; min-width:200px; display:flex; align-items:center;
  gap:8px; background:var(--gray-100); border-radius:8px;
  padding:8px 14px;
}
.doc-search i{ color:var(--gray-500); font-size:.8rem; }
.doc-search input{
  border:none; background:none; outline:none;
  font-family:'Be Vietnam Pro',sans-serif;
  font-size:.82rem; color:var(--navy); width:100%;
}
.doc-search input::placeholder{ color:var(--gray-500); }
.doc-count{
  font-size:.75rem; color:var(--gray-500); font-weight:600;
  white-space:nowrap;
}
.doc-count span{ color:var(--gold); font-weight:700; font-size:.9rem; }

/* MASTER FILE LINK */
.master-link{
  display:flex; align-items:center; gap:12px;
  background:rgba(26,122,74,.06); border:1.5px solid rgba(26,122,74,.2);
  border-radius:10px; padding:13px 18px; margin-bottom:20px;
  transition:.2s;
}
.master-link:hover{ background:rgba(26,122,74,.1); border-color:rgba(26,122,74,.35); }
.master-link-icon{
  width:40px; height:40px; border-radius:8px; flex-shrink:0;
  background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.9rem;
}
.master-link-info{ flex:1; min-width:0; }
.master-link-label{ font-size:.68rem; color:var(--gray-500); font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px; }
.master-link-name{ font-size:.85rem; font-weight:700; color:var(--green); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.master-link-arrow{ color:var(--green); font-size:.85rem; opacity:.7; }

/* DOC LIST */
.doc-list{ display:flex; flex-direction:column; gap:10px; }

.doc-card{
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1.5px solid var(--gray-200);
  border-radius:12px; padding:14px 18px;
  transition:.22s; cursor:pointer; position:relative;
}
.doc-card:hover{
  border-color:var(--gold); box-shadow:0 4px 20px rgba(201,146,42,.12);
  transform:translateY(-1px);
}
.doc-card.hidden{ display:none; }

/* Số thứ tự */
.doc-num{
  width:36px; height:36px; border-radius:8px; flex-shrink:0;
  background:var(--gray-100); color:var(--gray-500);
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:700; transition:.22s;
}
.doc-card:hover .doc-num{
  background:linear-gradient(135deg,var(--navy),var(--accent));
  color:#fff;
}

/* Icon loại file */
.doc-type-icon{
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; transition:.22s;
}
.doc-type-icon.pdf{ background:rgba(192,57,43,.1); color:#c0392b; }
.doc-type-icon.folder{ background:rgba(241,196,15,.15); color:#e67e22; }
.doc-type-icon.sheet{ background:rgba(26,122,74,.1); color:var(--green); }
.doc-type-icon.file{ background:rgba(26,69,128,.1); color:var(--accent); }
.doc-card:hover .doc-type-icon.pdf{ background:#c0392b; color:#fff; }
.doc-card:hover .doc-type-icon.folder{ background:#e67e22; color:#fff; }
.doc-card:hover .doc-type-icon.sheet{ background:var(--green); color:#fff; }
.doc-card:hover .doc-type-icon.file{ background:var(--accent); color:#fff; }

/* Thông tin */
.doc-info{ flex:1; min-width:0; }
.doc-name{
  font-size:.85rem; font-weight:600; color:var(--navy);
  line-height:1.4; margin-bottom:3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:.15s;
}
.doc-card:hover .doc-name{ color:var(--gold); }
.doc-author{
  font-size:.72rem; color:var(--gray-500); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}

/* Nút mở */
.doc-open{
  display:flex; align-items:center; gap:6px;
  background:var(--navy); color:#fff;
  font-size:.7rem; font-weight:600; padding:7px 14px;
  border-radius:7px; flex-shrink:0; transition:.22s;
  white-space:nowrap;
}
.doc-card:hover .doc-open{ background:var(--gold); color:var(--navy); }
.doc-open i{ font-size:.65rem; }

/* Không tìm thấy */
.no-result{
  display:none; text-align:center; padding:48px 20px;
  color:var(--gray-500); font-size:.85rem;
}
.no-result i{ font-size:2.5rem; color:var(--gray-200); margin-bottom:12px; display:block; }

/* ══ SIDEBAR ══ */
.detail-sidebar{ position:sticky; top:0px; display:flex; flex-direction:column; gap:16px; }
.sb-card{ background:#fff; border:1.5px solid var(--gray-200); border-radius:14px; overflow:hidden; }
.sb-head{ display:flex; align-items:center; gap:8px; padding:13px 16px; border-bottom:1px solid var(--gray-200); background:var(--cream); }
.sb-head i{ color:var(--gold); font-size:.82rem; }
.sb-head h3{ font-size:.82rem; font-weight:700; color:var(--navy); }

/* Danh sách khoa khác */
.sb-dept-list{ padding:8px 10px; }
.sb-dept-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 8px; border-radius:8px; transition:.2s; cursor:pointer;
  border-bottom:1px solid var(--gray-200);
}
.sb-dept-item:last-child{ border-bottom:none; }
.sb-dept-item:hover{ background:var(--gray-100); }
.sb-dept-item.active{ background:rgba(201,146,42,.08); }
.sb-dept-icon{
  width:32px; height:32px; border-radius:7px; flex-shrink:0;
  background:linear-gradient(135deg,var(--navy),var(--accent));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.7rem;
}
.sb-dept-item.active .sb-dept-icon{ background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--navy); }
.sb-dept-info{ flex:1; min-width:0; }
.sb-dept-name{ font-size:.75rem; font-weight:600; color:var(--navy); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sb-dept-count{ font-size:.65rem; color:var(--gray-500); margin-top:2px; }
.sb-dept-item.active .sb-dept-name{ color:var(--gold); }

/* Hướng dẫn truy cập */
.sb-guide{ padding:14px 16px; }
.sb-guide-item{ display:flex; gap:10px; margin-bottom:12px; }
.sb-guide-item:last-child{ margin-bottom:0; }
.guide-num{ width:22px; height:22px; border-radius:50%; flex-shrink:0; background:var(--navy); color:#fff; font-size:.6rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.guide-text{ font-size:.72rem; color:var(--gray-700); line-height:1.5; }
.guide-text strong{ color:var(--navy); }

/* BACK TO TOP */
#btt{ position:fixed; bottom:24px; right:20px; width:40px; height:40px; border-radius:10px; background:var(--navy); color:#fff; border:none; cursor:pointer; display:none; align-items:center; justify-content:center; font-size:.85rem; box-shadow:0 4px 16px rgba(10,26,59,.25); transition:.25s; z-index:100; }
#btt.show{ display:flex; }
#btt:hover{ background:var(--gold); color:var(--navy); transform:translateY(-2px); }

/* ══ RESPONSIVE ══ */
@media(max-width:1024px){
  .page-layout{ grid-template-columns:1fr 250px; gap:24px; }
}

@media(max-width:768px){
  .page-layout{ grid-template-columns:1fr; gap:0; }
  .detail-sidebar{ position:static; margin-top:24px; }
  .page-wrap{ max-width:100%; padding:14px 12px 48px; }

  /* Hero */
  .doc-hero{ padding:18px 16px; border-radius:12px; margin-bottom:12px; }
  .doc-hero::before,.doc-hero::after{ display:none; }
  .doc-hero-badge{ font-size:.58rem; padding:4px 10px; margin-bottom:10px; }
  .doc-hero-title{ font-size:1rem; margin-bottom:10px; }
  .doc-hero-meta{ gap:8px; }
  .doc-hero-meta span{ font-size:.65rem; }
  .doc-hero-meta span:nth-child(3){ display:none; }

  /* Master link */
  .master-link{ padding:9px 12px; gap:8px; border-radius:9px; margin-bottom:12px; }
  .master-link-icon{ width:30px; height:30px; font-size:.72rem; border-radius:7px; }
  .master-link-name{ font-size:.76rem; }
  .master-link-label{ font-size:.58rem; }

  /* Toolbar — dọc trên mobile */
  .doc-toolbar{ padding:9px 11px; gap:6px; border-radius:9px; margin-bottom:12px; flex-direction:column; align-items:stretch; }
  .doc-search{ padding:7px 10px; }
  .doc-search input{ font-size:.78rem; }
  .doc-count{ font-size:.68rem; text-align:right; }

  /* Card — 1 hàng ngang gọn */
  .doc-list{ gap:6px; }
  .doc-card{ padding:9px 11px; gap:8px; border-radius:9px; overflow:hidden; display:flex; align-items:center; width:100%; }
  .doc-num{ display:none; }
  .doc-type-icon{ width:30px; height:30px; min-width:30px; flex-shrink:0; border-radius:7px; font-size:.72rem; }
  .doc-info{ flex:1; min-width:0; width:0; overflow:hidden; }
  .doc-name{ font-size:.76rem; line-height:1.3; margin-bottom:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
  .doc-author{ display:none; }
  /* Nút icon cố định — không co */
  .doc-open{ width:32px; height:32px; min-width:32px; flex-shrink:0; padding:0; font-size:0; gap:0; border-radius:7px; display:flex; align-items:center; justify-content:center; }
  .doc-open i{ font-size:.75rem; margin:0; }

  /* Sidebar khoa scroll ngang */
  .sb-dept-list{ display:flex; flex-direction:row; overflow-x:auto; gap:7px; padding:10px; scrollbar-width:none; }
  .sb-dept-list::-webkit-scrollbar{ display:none; }
  .sb-dept-item{ flex-direction:column; align-items:center; text-align:center; min-width:74px; max-width:74px; flex-shrink:0; border-bottom:none; border:1.5px solid var(--gray-200); border-radius:9px; padding:8px 6px; }
  .sb-dept-item.active{ border-color:var(--gold); }
  .sb-dept-icon{ width:26px; height:26px; font-size:.62rem; margin:0 0 5px; border-radius:6px; }
  .sb-dept-name{ font-size:.6rem; -webkit-line-clamp:2; text-align:center; }
  .sb-dept-count{ font-size:.56rem; text-align:center; }

  .sb-guide{ padding:11px 13px; }
  .sb-guide-item{ margin-bottom:8px; gap:7px; }
  .guide-num{ width:20px; height:20px; font-size:.58rem; }
  .guide-text{ font-size:.68rem; }
}

@media(max-width:480px){
  .page-wrap{ padding:10px 8px 40px; }
  /* Ẩn cấp giữa breadcrumb — chỉ giữ Trang chủ + trang hiện tại */
  .breadcrumb a:nth-child(3),
  .breadcrumb .sep:nth-child(4){ display:none; }
  .breadcrumb .sep:nth-child(2){ display:none; }
  .breadcrumb a:nth-child(1)::after{ content:" /"; color:var(--gray-200); margin-left:4px; }
  .doc-hero{ padding:14px 13px; }
  .doc-hero-title{ font-size:.92rem; }
  .doc-card{ padding:8px 10px; gap:7px; }
  .doc-type-icon{ width:26px; height:26px; min-width:26px; font-size:.66rem; }
  .doc-name{ font-size:.72rem; }
  .doc-open{ width:30px; height:30px; min-width:30px; }
  .doc-open i{ font-size:.7rem; }
  .no-result{ padding:28px 14px; font-size:.78rem; }
  .no-result i{ font-size:1.8rem; }
}
</style>
</head>
<body>

<div id="reading-bar"></div>

<!-- BREADCRUMB -->
<div class="breadcrumb-bar">
  <div class="breadcrumb">
    <a href="https://thuvien.nctu.edu.vn/api/index.php"><i class="fa fa-home" style="font-size:.65rem"></i> Trang chủ</a>
    <span class="sep"><i class="fa fa-chevron-right" style="font-size:.55rem"></i></span>
    <a href="https://thuvien.nctu.edu.vn/api/index.php/documents">Tài liệu điện tử</a>
    <span class="sep"><i class="fa fa-chevron-right" style="font-size:.55rem"></i></span>
    <span class="cur">File tài liệu khoa Công nghệ thông&#8230;</span>
  </div>
</div>

<!-- MAIN -->
<div class="page-wrap">
  <div class="page-layout">

    <!-- ══ NỘI DUNG CHÍNH ══ -->
    <div class="detail-main">

      <!-- HERO HEADER -->
      <div class="doc-hero">
        <div class="doc-hero-badge">
          <i class="fa fa-folder-open"></i> Tài liệu điện tử
        </div>
        <div class="doc-hero-title">File tài liệu khoa Công nghệ thông tin</div>
        <div class="doc-hero-meta">
          <span>
            <i class="fa fa-calendar"></i>
            Cập nhật: 13/11/2020          </span>
          <span>
            <i class="fa fa-file-alt"></i>
            <span id="totalCount">...</span> tài liệu
          </span>
          <span>
            <i class="fa fa-lock"></i>
            Dành riêng sinh viên NCT
          </span>
        </div>
      </div>

      <!-- MASTER FILE LINK — JS render nếu có -->
      <div id="masterLinkWrap"></div>

      <!-- TOOLBAR -->
      <div class="doc-toolbar">
        <div class="doc-search">
          <i class="fa fa-search"></i>
          <input type="text" id="searchInput"
                 placeholder="Tìm tên tài liệu, tác giả..."
                 oninput="filterDocs()">
        </div>
        <div class="doc-count">
          Hiển thị: <span id="showCount">0</span> / <span id="totalCount2">0</span>
        </div>
      </div>

      <!-- DANH SÁCH TÀI LIỆU — JS render vào đây -->
      <div class="doc-list" id="docList"></div>
      <div class="no-result" id="noResult">
        <i class="fa fa-search"></i>
        Không tìm thấy tài liệu nào
      </div>

      <!-- Content gốc CKEditor — ẩn, JS quét -->
      <div id="rawContent" style="display:none">
        <p><span style="color:#3498db"><strong><span style="font-size:24px"><a href="https://docs.google.com/spreadsheets/d/1Pdh0OWzBHB0bW0VVg6MgKZ5J2eVkwbgo/edit?usp=sharing&amp;ouid=116256295741537120934&amp;rtpof=true&amp;sd=true">FILE T&Agrave;I LIỆU C&Ocirc;NG NGHỆ TH&Ocirc;NG TIN (1)</a></span></strong></span></p>

<p><span style="font-size:18px"><span style="color:#000000">1 -&nbsp;<a href="https://drive.google.com/file/d/1EIPcqyPxShx5rzgfHDhoirBIW6Ghl5L8/view?usp=sharing">Needs and solutions for digital transformation in the tourism sector in Can Tho city</a></span></span></p>

<p><span style="font-family:Arial,Helvetica,sans-serif"><span style="font-size:18px">2 -&nbsp;<a href="https://drive.google.com/file/d/1KWMMTG2_WsjR66rLKXMi2HAMvPPJuyrJ/view?usp=drive_link">Năng lực số ( S&aacute;ch chuy&ecirc;n khảo )</a></span></span></p>
      </div>

    </div>

    <!-- ══ SIDEBAR ══ -->
    <div class="detail-sidebar">

      <!-- DANH MỤC THEO KHOA -->
            <div class="sb-card">
        <div class="sb-head">
          <i class="fa fa-university"></i>
          <h3>Khoa / Bộ môn khác</h3>
        </div>
        <div class="sb-dept-list">
          <!-- Bài hiện tại -->
          <div class="sb-dept-item active">
            <div class="sb-dept-icon"><i class="fa fa-folder-open"></i></div>
            <div class="sb-dept-info">
              <div class="sb-dept-name">File tài liệu khoa Công nghệ thông tin</div>
              <div class="sb-dept-count" id="sideCount">... tài liệu</div>
            </div>
          </div>
                    <a href="https://thuvien.nctu.edu.vn/api/index.php/news/tap-chi-medpharmres"
             class="sb-dept-item">
            <div class="sb-dept-icon"><i class="fa fa-folder"></i></div>
            <div class="sb-dept-info">
              <div class="sb-dept-name">Tạp Chí MedPharmRes</div>
              <div class="sb-dept-count">Xem tài liệu</div>
            </div>
          </a>
                    <a href="https://thuvien.nctu.edu.vn/api/index.php/news/tap-chi-nha-nuoc-va-phap-luat1"
             class="sb-dept-item">
            <div class="sb-dept-icon"><i class="fa fa-folder"></i></div>
            <div class="sb-dept-info">
              <div class="sb-dept-name">Tạp chí Nhà nước và Pháp luật</div>
              <div class="sb-dept-count">Xem tài liệu</div>
            </div>
          </a>
                    <a href="https://thuvien.nctu.edu.vn/api/index.php/news/tai-lieu-dien-tu"
             class="sb-dept-item">
            <div class="sb-dept-icon"><i class="fa fa-folder"></i></div>
            <div class="sb-dept-info">
              <div class="sb-dept-name">File tài liệu khoa Y</div>
              <div class="sb-dept-count">Xem tài liệu</div>
            </div>
          </a>
                    <a href="https://thuvien.nctu.edu.vn/api/index.php/news/file-tai-lieu-khoa-kinh-te"
             class="sb-dept-item">
            <div class="sb-dept-icon"><i class="fa fa-folder"></i></div>
            <div class="sb-dept-info">
              <div class="sb-dept-name">File tài liệu khoa Kinh tế</div>
              <div class="sb-dept-count">Xem tài liệu</div>
            </div>
          </a>
                  </div>
      </div>
      
      <!-- HƯỚNG DẪN -->
      <div class="sb-card">
        <div class="sb-head">
          <i class="fa fa-info-circle"></i>
          <h3>Hướng dẫn sử dụng</h3>
        </div>
        <div class="sb-guide">
          <div class="sb-guide-item">
            <div class="guide-num">1</div>
            <div class="guide-text">
              <strong>Đăng nhập</strong> tài khoản sinh viên NCT để truy cập tài liệu
            </div>
          </div>
          <div class="sb-guide-item">
            <div class="guide-num">2</div>
            <div class="guide-text">
              Click nút <strong>Mở tài liệu</strong> để xem trên Google Drive
            </div>
          </div>
          <div class="sb-guide-item">
            <div class="guide-num">3</div>
            <div class="guide-text">
              Chỉ được <strong>xem</strong>, không sao chép hay tải về khi chưa được phép
            </div>
          </div>
          <div class="sb-guide-item">
            <div class="guide-num">4</div>
            <div class="guide-text">
              Liên hệ thư viện nếu link bị lỗi hoặc cần hỗ trợ
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<button id="btt" onclick="window.scrollTo({top:0,behavior:'smooth'})">
  <i class="fa fa-arrow-up"></i>
</button>

<script>
// READING PROGRESS
window.addEventListener('scroll', () => {
  const total = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  document.getElementById('reading-bar').style.width = (total > 0 ? window.scrollY / total * 100 : 0) + '%';
  document.getElementById('btt').classList.toggle('show', window.scrollY > 400);
});

// ── QUÉT NỘI DUNG CKEDITOR → RENDER CARD ──
(function buildDocList() {
  const raw  = document.getElementById('rawContent');
  const list = document.getElementById('docList');
  const docs = [];

  // 1. TÌM MASTER FILE (link đầu tiên dạng spreadsheet/folder tổng)
  //    Thường là dòng đầu tiên, chữ to, màu khác
  const firstStrong = raw.querySelector('strong a, a strong');
  if (firstStrong) {
    const masterA    = firstStrong.closest('a') || firstStrong.querySelector('a');
    const masterHref = masterA ? masterA.href : null;
    const masterText = firstStrong.textContent.trim();

    if (masterHref) {
      const type  = detectType(masterHref);
      document.getElementById('masterLinkWrap').innerHTML = `
        <a href="${masterHref}" target="_blank" class="master-link">
          <div class="master-link-icon">
            <i class="${getIcon(type)}"></i>
          </div>
          <div class="master-link-info">
            <div class="master-link-label">File tổng hợp</div>
            <div class="master-link-name">${masterText}</div>
          </div>
          <i class="fa fa-external-link-alt master-link-arrow"></i>
        </a>
      `;
      // Ẩn dòng này trong raw để không bị đếm vào list
      const p = masterA.closest('p');
      if (p) p.remove();
    }
  }

  // 2. QUÉT TẤT CẢ <a> CÒN LẠI → danh sách tài liệu
  const links = Array.from(raw.querySelectorAll('a[href]'));
  links.forEach(a => {
    const href    = a.href;
    const rawText = a.textContent.trim();
    if (!rawText || !href.includes('drive.google') && !href.includes('docs.google')) return;

    // Tách số thứ tự và tên: "1 - Kết cấu Ô tô - Tác giả"
    const numMatch = rawText.match(/^(\d+)\s*[-–]\s*/);
    const num      = numMatch ? parseInt(numMatch[1]) : docs.length + 1;
    const rest     = numMatch ? rawText.slice(numMatch[0].length).trim() : rawText;

    // Tách tên sách và tác giả (phần sau dấu ' - ' cuối cùng nếu có nhiều tác giả)
    // Heuristic: nếu có nhiều dấu phẩy ở cuối → là tác giả
    let title  = rest;
    let author = '';
    const dashParts = rest.split(/\s+-\s+/);
    if (dashParts.length >= 2) {
      // Phần cuối: kiểm tra xem có phải tên người không (có chữ hoa ở giữa)
      const lastPart = dashParts[dashParts.length - 1];
      // Nếu phần cuối chứa dấu phẩy (nhiều tác giả) → là tác giả
      if (lastPart.includes(',') || /[A-ZÁÀẢÃẠĂẮẶẲẴẰÂẤẦẨẪẬĐÉÈẺẼẸÊẾỀỂỄỆÍÌỈĨỊÓÒỎÕỌÔỐỒỔỖỘƠỚỜỞỠỢÚÙỦŨỤƯỨỪỬỮỰÝỲỶỸỴ]/.test(lastPart.charAt(0))) {
        author = lastPart;
        title  = dashParts.slice(0, -1).join(' - ');
      }
    }

    docs.push({ num, title, author, href, type: detectType(href) });
  });

  // Cập nhật số lượng
  const n = docs.length;
  document.getElementById('totalCount').textContent  = n;
  document.getElementById('totalCount2').textContent = n;
  document.getElementById('showCount').textContent   = n;
  document.getElementById('sideCount').textContent   = n + ' tài liệu';

  // Render card
  docs.forEach((doc, i) => {
    const card = document.createElement('div');
    card.className = 'doc-card';
    card.dataset.search = (doc.title + ' ' + doc.author).toLowerCase();
    card.innerHTML = `
      <div class="doc-num">${doc.num}</div>
      <div class="doc-type-icon ${doc.type}">
        <i class="${getIcon(doc.type)}"></i>
      </div>
      <div class="doc-info">
        <div class="doc-name">${doc.title}</div>
        ${doc.author ? `<div class="doc-author"><i class="fa fa-user" style="margin-right:4px;color:var(--gray-200)"></i>${doc.author}</div>` : ''}
      </div>
      <a href="${doc.href}" target="_blank" class="doc-open" onclick="event.stopPropagation()">
        <i class="fa fa-external-link-alt"></i> Mở
      </a>
    `;
    card.onclick = () => window.open(doc.href, '_blank');
    list.appendChild(card);
  });
})();

// DETECT LOẠI FILE
function detectType(href) {
  if (href.includes('spreadsheets') || href.includes('sheet')) return 'sheet';
  if (href.includes('drive/folders'))  return 'folder';
  if (href.includes('/file/'))         return 'pdf';
  return 'file';
}

function getIcon(type) {
  const icons = { pdf:'fa fa-file-pdf', folder:'fa fa-folder', sheet:'fa fa-file-excel', file:'fa fa-file-alt' };
  return icons[type] || 'fa fa-file';
}

// TÌM KIẾM
function filterDocs() {
  const q     = document.getElementById('searchInput').value.toLowerCase().trim();
  const cards = document.querySelectorAll('.doc-card');
  let   shown = 0;

  cards.forEach(card => {
    const match = !q || card.dataset.search.includes(q);
    card.classList.toggle('hidden', !match);
    if (match) shown++;
  });

  document.getElementById('showCount').textContent = shown;
  document.getElementById('noResult').style.display = shown === 0 ? 'block' : 'none';
}
</script>
<!-- FOOTER -->
<footer>
  <div class="footer-main">
    <div class="footer-brand">
      <div class="name">📚 Thư Viện – Trường ĐH Nam Cần Thơ</div>
      <p>Trung tâm học liệu phục vụ giảng dạy, nghiên cứu và học tập của cán bộ, giảng viên và sinh viên toàn trường.</p>
      <div class="social-links">
        <a href="#"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-youtube"></i></a>
        <a href="#"><i class="fab fa-tiktok"></i></a>
        <a href="#"><i class="fab fa-zalo"></i></a>
      </div>
    </div>
    <div class="footer-col">
      <h4>Dịch vụ</h4>
      <a href="#">Mượn trả sách</a>
      <!-- <a href="#">Đặt sách trước</a> -->
      <a href="#">Tra cứu tài liệu</a>
      <a href="#">Phòng học nhóm</a>
      <!-- <a href="#">In ấn & Photocopy</a> -->
    </div>
    <div class="footer-col">
      <h4>Tài nguyên</h4>
      <a href="#">CSDL trực tuyến</a>
      <a href="#">Sách điện tử</a>
      <a href="#">Tạp chí khoa học</a>
      <a href="#">Luận văn – Luận án</a>
      <a href="#">Tài liệu nội sinh</a>
    </div>
    <div class="footer-col">
      <h4>Hỗ trợ</h4>
      <a href="#">Hướng dẫn sử dụng</a>
      <!-- <a href="#">Câu hỏi thường gặp</a> -->
      <a href="#">Nội quy thư viện</a>
      <a href="#">Góp ý & Phản hồi</a>
      <a href="#">Liên hệ</a>
    </div>
  </div>
  <div class="footer-bottom">
    © 2025 Thư Viện Trường Đại Học Nam Cần Thơ. Bảo lưu mọi quyền.
  </div>
</footer>