/* ==========================================================================
   STSV — Giao diện công khai (tone sáng HCMUS). Dùng kèm Tailwind Play CDN.
   File này chỉ chứa các "component" tuỳ biến; layout dùng utility của Tailwind.
   ========================================================================== */
:root{
  --brand:#003f88; --brand2:#0f62c4; --azure:#1e83d6; --teal:#00acad;
  --cyan:#22d3ee; --ink:#12294a; --paper:#eef4fb; --navy:#07213f; --text3:#94a3b8;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; }
body{ background:#fff; color:#334155; font-family:'Inter',system-ui,sans-serif; overflow-x:clip; margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }
.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ left:8px; top:8px; background:#fff; padding:8px 12px; border-radius:8px; z-index:100; }

/* ===== Đèn theo chuột (toàn trang) ===== */
#spot{ position:fixed; top:0; left:0; width:260px; height:260px; margin:-130px 0 0 -130px;
  border-radius:50%; pointer-events:none; z-index:60; opacity:0;
  background:radial-gradient(circle, rgba(120,190,255,.34) 0%, rgba(30,131,214,.16) 40%, transparent 72%);
  filter:blur(16px); transition:transform 2s cubic-bezier(.22,1,.36,1), opacity .8s ease; will-change:transform; }

/* ===== Hero ===== */
.hero-bg{ background:linear-gradient(135deg,#0a54b8 0%,#003f88 52%,#062a5c 100%); }
.hero-glow{ position:absolute; border-radius:9999px; filter:blur(80px); pointer-events:none; }

/* ===== Banner trang nội dung (gradient + chấm lưới) ===== */
.banner-bg{ background:linear-gradient(120deg,#06203f 0%,#003f88 42%,#0f62c4 72%,#1e83d6 100%); }
.dot-grid{ position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.1px, transparent 1.4px); background-size:22px 22px;
  -webkit-mask-image:linear-gradient(100deg, transparent, #000 45%, #000 100%);
          mask-image:linear-gradient(100deg, transparent, #000 45%, #000 100%); }
.banner-h1{ line-height:1.28; padding-top:.12em; }
.gradient-text{
  background:linear-gradient(100deg,#eaf4ff 0%,#7cc0ff 30%,#fff 55%,#7cc0ff 80%,#eaf4ff 100%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 7s linear infinite; }
@keyframes shimmer{ to{ background-position:220% center; } }

/* ===== Hiệu ứng xuất hiện ===== */
.rise{ opacity:0; transform:translateY(46px); filter:blur(7px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s ease; }
.rise.in{ opacity:1; transform:none; filter:none; }
.pop{ opacity:0; transform:scale(.86) translateY(10px); transition:opacity .55s ease, transform .55s cubic-bezier(.34,1.56,.64,1); }
.pop.in{ opacity:1; transform:none; }
.reveal-2{ opacity:0; transform:translateY(48px); transition:opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1); }
.reveal-2.in{ opacity:1; transform:none; }

/* ===== Vật thể hero chuyển động ===== */
@keyframes floatA{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes floatB{ 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-10px) rotate(2deg)} }
@keyframes floatC{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(10px)} }
.float-a{ animation:floatA 6s ease-in-out infinite; }
.float-b{ animation:floatB 7.5s ease-in-out infinite; }
.float-c{ animation:floatC 5.2s ease-in-out infinite; }
@keyframes spinS{ to{ transform:rotate(360deg) } }
.spin-slow{ animation:spinS 22s linear infinite; transform-origin:50% 50%; }
.orbit-1{ animation:spinS 6s linear infinite; transform-origin:60px 60px; }
.orbit-2{ animation:spinS 9s linear infinite reverse; transform-origin:60px 60px; }
.orbit-3{ animation:spinS 12s linear infinite; transform-origin:60px 60px; }
@keyframes bubble{ 0%{transform:translateY(6px);opacity:0} 30%{opacity:1} 100%{transform:translateY(-16px);opacity:0} }
.bub{ animation:bubble 2.6s ease-in infinite; } .bub2{ animation:bubble 2.6s ease-in .9s infinite; } .bub3{ animation:bubble 2.6s ease-in 1.7s infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
.scroll-cue{ animation:bob 1.6s ease-in-out infinite; }

/* ===== Thẻ ===== */
.card{ background:#fff; border:1px solid #e5edf7; box-shadow:0 4px 14px rgba(15,41,74,.05); transition:transform .25s, box-shadow .25s, border-color .25s; }
.card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(15,98,196,.16); border-color:#bcd6f5; }
.yf{ border:1px solid #cfe0f5; background:#fff; color:#12294a; transition:.2s; cursor:pointer; }
.yf:hover{ border-color:#0f62c4; color:#0f62c4; }
.yf.active{ background:linear-gradient(100deg,#0f62c4,#1e83d6); color:#fff; border-color:transparent; box-shadow:0 8px 18px rgba(15,98,196,.28); }
.yc.hidden{ display:none; }

/* ===== Trang CHUYÊN MỤC: danh sách bài viết (lưới thẻ, gom nhóm) ===== */
.cat-bar{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:flex-end; margin-bottom:1.25rem; }
.cat-search{ position:relative; display:flex; align-items:center; flex:1 1 260px; max-width:360px; }
.cat-search svg{ position:absolute; left:.85rem; color:#94a3b8; pointer-events:none; }
.cat-search input{ width:100%; border:1px solid #d8e4f3; border-radius:999px; background:#fff; padding:.6rem 1rem .6rem 2.4rem;
  font-size:.9rem; color:#12294a; transition:.18s; }
.cat-search input::placeholder{ color:#9aa9bd; }
.cat-search input:focus{ outline:none; border-color:#0f62c4; box-shadow:0 0 0 3px rgba(15,98,196,.12); }

.cat-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.cat-chip{ display:inline-flex; align-items:center; gap:.4rem; border:1px solid #dbe6f5; background:#fff; color:#334155;
  border-radius:999px; padding:.4rem .9rem; font-size:.85rem; font-weight:500; transition:.18s; }
.cat-chip:hover{ border-color:#0f62c4; color:#0f62c4; background:#f4f9ff; }
.cat-chip b{ font-size:.72rem; font-weight:700; color:#0f62c4; background:#eaf3ff; border-radius:999px; padding:.05rem .45rem; }

/* Mỗi mục cấp 1 là một section tách bạch — kể cả mục chỉ có 1 bài */
.cat-group{ scroll-margin-top:5.5rem; margin-bottom:2.75rem; }
.cat-group:last-child{ margin-bottom:0; }

/* Mục cấp 1 chỉ là MỘT bài (hoặc liên kết): hàng rộng cả trang, không xếp chung lưới với mục khác */
.solo-row{ display:flex; align-items:center; gap:1rem; border-radius:1rem; padding:1.15rem 1.35rem; width:100%; }
.solo-num{ flex-shrink:0; min-width:2.4rem; height:2.4rem; padding:0 .5rem; border-radius:.7rem;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(100deg,#0f62c4,#1e83d6); color:#fff;
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:.95rem; }
.solo-main{ min-width:0; flex:1; }
.solo-title{ display:block; font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.15rem; color:#12294a; line-height:1.35; }
.solo-row:hover .solo-title{ color:#0f62c4; }
.solo-sum{ display:block; margin-top:.25rem; color:#64748b; font-size:.88rem; line-height:1.55; }
.cat-group-head{ display:flex; flex-wrap:wrap; align-items:center; gap:.65rem; padding-bottom:.7rem; margin-bottom:1.1rem;
  border-bottom:1px solid #e8eef6; }
.cat-group-num{ display:inline-flex; align-items:center; justify-content:center; min-width:2rem; height:2rem; padding:0 .4rem;
  border-radius:.6rem; background:linear-gradient(100deg,#0f62c4,#1e83d6); color:#fff;
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:.9rem; }
.cat-group-title{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.25rem; color:#12294a; margin:0;
  display:inline-flex; align-items:center; gap:.5rem; }

/* Nhóm con (cấp 3), vd "Học phí & Học bổng" nằm trong "Chế độ chính sách" */
.cat-sub{ margin:1.5rem 0 0; padding-left:1rem; border-left:2px solid #e2ecf9; }
.cat-sub-title{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:1.02rem; color:#0f4c9e; margin:0 0 .8rem;
  display:flex; align-items:center; gap:.5rem; }
.cat-sub-num{ font-size:.75rem; font-weight:800; color:#0f62c4; background:#eaf3ff; border-radius:.4rem; padding:.1rem .45rem; }
.cat-group-ic{ font-size:1.15rem; }
.cat-group-count{ font-size:.78rem; font-weight:600; color:#0f62c4; background:#eaf3ff; border-radius:999px; padding:.15rem .6rem; }
.cat-group-years{ margin-left:auto; display:inline-flex; gap:.3rem; }

.art-grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:640px){ .art-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1280px){ .art-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.art-card{ display:flex; align-items:flex-start; gap:.9rem; border-radius:1rem; padding:1.15rem 1.15rem 1rem; }
.art-card.is-hidden{ display:none; }
.art-ic{ font-size:1.5rem; line-height:1.2; flex-shrink:0; }
.art-num{ flex-shrink:0; min-width:2rem; height:2rem; padding:0 .4rem; border-radius:.6rem; display:inline-flex; align-items:center; justify-content:center;
  background:#eff5fd; color:#0f62c4; font-family:'Montserrat',sans-serif; font-weight:800; font-size:.8rem; letter-spacing:.02em;
  white-space:nowrap; transition:background .22s, color .22s; }
.art-card:hover .art-num{ background:#0f62c4; color:#fff; }
.art-main{ min-width:0; flex:1; }
.art-title{ display:block; font-weight:600; color:#12294a; font-size:1rem; line-height:1.45; }
.art-card:hover .art-title{ color:#0f62c4; }
.art-sum{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin-top:.3rem; color:#64748b; font-size:.85rem; line-height:1.55; }
.art-foot{ display:block; margin-top:.55rem; color:#9aa9bd; font-size:.75rem; }
.art-arrow{ flex-shrink:0; color:#cbd5e1; align-self:center; transition:transform .22s, color .22s; }
.art-card:hover .art-arrow{ color:#0f62c4; transform:translateX(3px); }
.cat-empty{ text-align:center; color:#64748b; padding:2.5rem 0; }

/* Bảng rộng (dán từ Word) cuộn ngang trong khung riêng, không đẩy tràn cả trang */
.article-body{ min-width:0; }
/* Đồng bộ KIỂU chữ (font Word dán kèm bị bỏ), nhưng KHÔNG ép cỡ chữ —
   người soạn chọn cỡ chữ trong trình soạn thảo thì phải có hiệu lực. */
.article-body, .article-body *{ font-family:'Inter',system-ui,sans-serif !important; }
.article-body .MsoNormal{ margin:0 0 .9rem; }

/* Liên kết tệp đính kèm (PDF, Word, Excel…) chèn từ trình soạn thảo */
.article-body a.file-link{ display:inline-flex; align-items:center; gap:.5rem;
  background:#eff5fd; border:1px solid #cfe0f5; border-radius:10px; padding:.6rem 1rem;
  color:#0f62c4; font-weight:600; text-decoration:none; margin:.35rem .4rem .35rem 0; transition:.18s; }
.article-body a.file-link::before{ content:''; width:16px; height:20px; flex-shrink:0;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M14 2v6h6' fill='white'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M14 2v6h6' fill='white'/></svg>") center/contain no-repeat; }
.article-body a.file-link:hover{ background:#0f62c4; color:#fff; border-color:#0f62c4; }
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1rem 0; }
.table-wrap > table{ margin:0; }

/* ===== Khối giới thiệu từng Khoa (bài "Giới thiệu về Khoa") =====
   Bản gốc nhét 9 Khoa chung một hộp nên dính liền nhau; mỗi Khoa giờ là một khối riêng,
   có sẵn ô logo để phòng/ban bấm đúp thay ảnh trong trình soạn thảo. */
.article-body .khoa-block{ border:1px solid #dbe6f5; border-radius:16px; background:#fff;
  padding:1.25rem 1.4rem 1.4rem; margin:1.75rem 0; box-shadow:0 4px 14px rgba(15,41,74,.05); }
.article-body .khoa-head{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  padding-bottom:.85rem; margin-bottom:1.1rem; border-bottom:2px solid #eaf3ff; }
.article-body .khoa-logo{ flex-shrink:0; width:64px; height:64px; border:1px solid #e5edf7; border-radius:12px;
  background:#fff; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; }
.article-body .khoa-logo img{ max-width:52px; max-height:52px; object-fit:contain; margin:0; }
.article-body .khoa-no{ flex-shrink:0; width:2rem; height:2rem; border-radius:.6rem;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(100deg,#0f62c4,#1e83d6); color:#fff;
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:.9rem; }
.article-body .khoa-name{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.1rem;
  color:#12294a; line-height:1.35; }
.article-body .khoa-block > .table-wrap:first-of-type{ margin-top:0; }

/* ===== Thanh tiến trình đọc (trang bài viết) ===== */
.read-progress-track{ position:sticky; top:4rem; z-index:40; height:3px; background:transparent; }
.read-progress-track > span{ display:block; height:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,#0f62c4,#22d3ee); }

/* Mục "Xem tất cả …" đầu menu con */
.nav-drop-all{ font-weight:600; color:#0f62c4 !important; border-bottom:1px solid #eef4fb; margin-bottom:.2rem; padding-bottom:.5rem; }

/* ===== Mục lục tài liệu (TOC) ===== */
.doc-nav-link{ display:block; padding:.5rem .75rem; border-left:2px solid transparent; border-radius:0 .5rem .5rem 0; color:#475569; font-size:.9rem; transition:.15s; }
.doc-nav-link:hover{ color:#0f62c4; }
.doc-nav-link.active{ border-left-color:#0f62c4; color:#0f62c4; background:#eff5fd; font-weight:600; }
.doc-nav-link.toc-sub{ padding-left:1.5rem; font-size:.83rem; color:#64748b; }
.doc-nav-link.toc-sub2{ padding-left:2.5rem; font-size:.8rem; color:#94a3b8; }
.doc-pane{ scroll-margin-top:5.5rem; }

/* Mục lục ẩn/hiện: đóng -> nội dung căn giữa, to hơn; mở -> đẩy phải, nhỏ lại */
.doc-layout{ display:grid; gap:2rem; align-items:start; }
.doc-layout.doc-closed{ grid-template-columns:minmax(0,1fr); }
.doc-layout.doc-closed .doc-toc{ display:none; }
.doc-layout.doc-closed .doc-main{ max-width:100%; margin-left:0; margin-right:0; }
.doc-layout.doc-closed .doc-main .article-body{ font-size:1.06rem; line-height:1.85; }
.doc-layout.doc-closed .doc-main article > h2{ font-size:1.6rem; }
@media (min-width:1024px){
  /* Mở mục lục: ô mục lục bên trái, nội dung chiếm HẾT phần còn lại để bảng cân xứng màn hình
     (trước đây bó cứng 800px nên bảng bị nhỏ so với màn hình rộng). */
  .doc-layout.doc-open{ grid-template-columns:260px minmax(0,1fr); gap:2.5rem; }
}
/* Dưới 1024px: mục lục KHÔNG mở sẵn (chiếm hết màn hình) — chỉ hiện khi người dùng bấm nút,
   và khi đó giới hạn chiều cao để vẫn thấy phần đầu nội dung. */
@media (max-width:1023px){
  .doc-layout.doc-open:not(.toc-user) .doc-toc{ display:none; }
  .doc-layout.doc-open.toc-user .reader-toc-inner{ max-height:50vh; overflow:auto; }
}

/* ===== Trang đọc bài liền mạch (mục lục dính + cuộn mượt theo mục) ===== */
.reader{ display:grid; gap:2.5rem; align-items:start; }
@media (min-width:1024px){ .reader{ grid-template-columns:250px minmax(0,1fr); } }
.reader-toc{ }
@media (min-width:1024px){ .reader-toc{ position:sticky; top:5.75rem; align-self:start; } }
.reader-toc-inner{ border:1px solid #e5edf7; border-radius:16px; background:#fff; padding:.6rem; box-shadow:0 4px 14px rgba(15,41,74,.05); }
.reader-toc-inner .lbl{ font-size:.7rem; font-weight:800; letter-spacing:.12em; color:#0f62c4; padding:.25rem .6rem .4rem; }
.reader-main{ min-width:0; }
/* Mặc định: liền mạch — mỗi mục cách nhau bằng đường kẻ mảnh, không đóng khung */
.reader-section{ scroll-margin-top:5.5rem; padding-bottom:2.5rem; margin-bottom:2.5rem; border-bottom:1px solid #e8eef6; }
.reader-section:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.reader-section .sec-title{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.5rem; line-height:1.3; color:#12294a; margin:0 0 1rem; display:flex; gap:.55rem; align-items:baseline; scroll-margin-top:5.5rem; }
.reader-section .sec-title .sec-ic{ font-size:1.25rem; }
.reader-sub{ margin:1.75rem 0; }
.reader-sub > h3{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:1.2rem; color:#0f4c9e; margin:0 0 .6rem; }
.reader-body{ font-size:1.05rem; line-height:1.85; }
/* Tuỳ chọn "Khung hộp từng mục" (giống trang Danh bạ) */
.reader.boxed .reader-section{ border:1px solid #e5edf7; border-radius:18px; background:#fff; padding:1.5rem 1.75rem; box-shadow:0 4px 14px rgba(15,41,74,.05); margin-bottom:1.25rem; }
.reader.boxed .reader-section:last-child{ padding-bottom:1.5rem; }
.reader.boxed .reader-sub{ border-top:1px dashed #dbe6f5; padding-top:1.25rem; }
.reader.boxed .reader-sub:first-of-type{ border-top:0; padding-top:0; }
/* Cuộn mượt "snap" theo mục — chỉ bật ở trang đọc bài (JS thêm .reader-snap) */
html.reader-snap{ scroll-snap-type:y proximity; }
html.reader-snap .reader-section{ scroll-snap-align:start; }

/* ===== Nội dung bài viết (do CMS soạn) ===== */
.article-body{ line-height:1.75; color:#334155; }
.article-body p{ margin:.6rem 0; }
.article-body ul{ margin:.5rem 0 .5rem 1.2rem; list-style:disc; }
.article-body ol{ margin:.5rem 0 .5rem 1.2rem; list-style:decimal; }
.article-body li{ margin:.3rem 0; }
/* Văn bản quy chế lồng nhiều cấp (khoản → điểm → gạch đầu dòng):
   mỗi cấp thụt thêm và đổi kiểu đánh số để nhìn ra ngay cấp nào thuộc cấp nào. */
.article-body ol ol{ list-style:lower-alpha; }
.article-body ol ol ol{ list-style:lower-roman; }
.article-body ol ul, .article-body ul ul{ list-style:circle; }
/* Mỗi cấp con thụt hẳn vào để thấy ngay nhóm mục nào nằm trong mục nào. */
.article-body li > ol, .article-body li > ul{
    margin:.4rem 0 .6rem 1.1rem; padding-left:1.2rem;
}
.article-body li > ol > li, .article-body li > ul > li{ margin:.25rem 0; }
.article-body li::marker{ color:#0f62c4; font-weight:600; }
.article-body li li::marker{ color:#5b7fa6; }
@media (max-width:640px){
    .article-body li > ol, .article-body li > ul{ margin-left:.35rem; padding-left:.9rem; }
}
.article-body h2{ font-family:'Montserrat',sans-serif; font-weight:800; color:#12294a; font-size:1.3rem; margin:1.5rem 0 .5rem; }
.article-body h3{ font-family:'Montserrat',sans-serif; font-weight:700; color:#12294a; font-size:1.05rem; margin:1.1rem 0 .4rem; }
.article-body h4{ font-weight:700; color:#0f62c4; margin:.8rem 0 .3rem; }
.article-body a{ color:#0f62c4; text-decoration:underline; }
.article-body strong{ color:#12294a; }
.pill{ display:inline-block; padding:.24rem .7rem; border-radius:9999px; font-size:.82rem; font-weight:600; margin:.15rem .3rem .15rem 0; }
.p-blue{background:#e3edfb;color:#0f4c9e} .p-teal{background:#d7f2f2;color:#036b6b} .p-amber{background:#fdf0d6;color:#8a5a00}
.p-purple{background:#eae3fb;color:#5b3aa8} .p-gray{background:#eef1f5;color:#475569} .p-coral{background:#fde5e2;color:#b3403a}
.info-box{ background:#eff5fd; border:1px solid #cfe0f5; border-left:4px solid #0f62c4; border-radius:10px; padding:.75rem 1rem; margin:.9rem 0; font-size:.92rem; color:#334155; }
.warn-box{ background:#fff7ed; border:1px solid #fed7aa; border-left:4px solid #f59e0b; border-radius:10px; padding:.75rem 1rem; margin:.9rem 0; font-size:.92rem; color:#7c2d12; }
.data-table{ width:100%; border-collapse:collapse; margin:.9rem 0; font-size:.9rem; }
.data-table th{ background:#003f88; color:#fff; text-align:left; padding:.55rem .7rem; font-weight:600; }
.data-table td{ border:1px solid #e5edf7; padding:.5rem .7rem; vertical-align:top; }
.data-table tr:nth-child(even) td{ background:#f7fafe; }

/* Bảng do editor tạo (không có class .data-table) -> vẫn có khung viền, tiêu đề */
.article-body table{ width:100%; border-collapse:collapse; margin:1rem 0; font-size:.92rem; }
.article-body table th,
.article-body table td{ border:1px solid #cbd8ea; padding:.55rem .7rem; text-align:left; vertical-align:top; }
.article-body table th{ background:#003f88; color:#fff; font-weight:600; }
.article-body table thead td{ background:#e8f0fb; font-weight:600; color:#12294a; }
.article-body table tr:nth-child(even) td{ background:#f7fafe; }
.article-body table caption{ caption-side:top; text-align:left; font-weight:700; color:#12294a; margin-bottom:.4rem; }
.article-body figure.table{ margin:1rem 0; max-width:100%; overflow-x:auto; }
.article-body figure.table > table{ margin:0; }
/* Ảnh trong bài: không vỡ khung (ảnh ngang phóng to quá cỡ) */
.article-body img{ max-width:100%; height:auto; }
.article-body figure{ max-width:100%; margin:1rem 0; }
.article-body figure img{ border-radius:12px; }
.article-body figure figcaption{ font-size:.85rem; color:#64748b; text-align:center; margin-top:.35rem; }
.contact-grid{ display:grid; grid-template-columns:1fr; gap:.8rem; margin:.9rem 0; }
@media(min-width:640px){ .contact-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .contact-grid{ grid-template-columns:repeat(4,1fr); } }
.toc-btn-on{ border-color:#0f62c4 !important; color:#0f62c4 !important; background:#eff5fd; }
.contact-card{ border:1px solid #e5edf7; border-radius:14px; padding:1rem; background:#fff; box-shadow:0 4px 14px rgba(15,41,74,.05); transition:transform .2s, box-shadow .2s; }
.contact-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(15,98,196,.14); }
.contact-dept{ font-weight:700; color:#12294a; margin-bottom:.35rem; }
.ci-label{ color:#94a3b8; }
.contact-info{ font-size:.9rem; color:#475569; line-height:1.7; }
.contact-info a{ color:#0f62c4; }
.doc-figure{ margin:.8rem 0; }
.doc-figure img{ border-radius:12px; border:1px solid #e5edf7; }
.img-ph{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; height:150px; border-radius:12px; background:#f1f5fb; border:1px dashed #cbd5e1; color:#94a3b8; font-size:.85rem; text-align:center; }
.merged-sub{ padding-top:.4rem; }

/* Badge năm học (từ year_badges) */
.y-badge{ display:inline-block; padding:.12rem .5rem; border-radius:9999px; font-size:.72rem; font-weight:600; margin-left:.3rem; background:#e3edfb; color:#0f4c9e; }
.y-badge.y1{background:#ede9fe;color:#6d28d9} .y-badge.y2{background:#d1fae5;color:#047857}
.y-badge.y3{background:#fef3c7;color:#92600a} .y-badge.y4{background:#ffedd5;color:#9a3412} .y-badge.y-all{background:#e2e8f0;color:#475569}

/* ===== Menu con (dropdown) trên thanh menu chính ===== */
.nav-drop{ position:absolute; top:100%; left:0; padding-top:.55rem; opacity:0; visibility:hidden;
  transform:translateY(6px); transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:65; }
.group:hover .nav-drop, .group:focus-within .nav-drop{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-drop-box{ min-width:240px; max-width:320px; background:#fff; border:1px solid #e5edf7; border-radius:14px;
  box-shadow:0 20px 44px rgba(15,41,74,.16); padding:.4rem; }
.nav-drop-item{ display:flex; align-items:center; gap:.5rem; padding:.55rem .7rem; border-radius:9px;
  font-size:.86rem; font-weight:500; color:#334155; line-height:1.35; white-space:normal; }
.nav-drop-item:hover{ background:#eff5fd; color:#0f62c4; }
.nav-drop-item.active{ background:#eff5fd; color:#0f62c4; font-weight:600; }
.nav-drop-ic{ flex:none; }

/* ===== Ô tìm kiếm ở header (kết quả live) ===== */
#search-results{ position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border:1px solid #e5edf7; border-radius:12px; box-shadow:0 18px 40px rgba(15,41,74,.14); overflow:hidden; display:none; z-index:70; }
#search-results.visible{ display:block; }
.sr-item{ display:block; padding:.6rem .9rem; border-bottom:1px solid #f1f5f9; }
.sr-item:hover{ background:#f7fafe; }
.sr-title{ font-weight:600; color:#12294a; font-size:.92rem; }
.sr-sub{ font-size:.78rem; color:#64748b; }
.sr-empty{ padding:.8rem .9rem; color:#94a3b8; font-size:.9rem; }

/* Back-to-top */
#btt{ position:fixed; bottom:1.5rem; right:1.5rem; z-index:55; width:2.75rem; height:2.75rem; border:none; border-radius:9999px; background:#0f62c4; color:#fff; font-size:1.1rem; cursor:pointer; box-shadow:0 8px 20px rgba(15,98,196,.35); display:none; align-items:center; justify-content:center; }
#btt.visible{ display:flex; }

/* Menu mobile overlay */
#overlay{ position:fixed; inset:0; background:rgba(7,33,63,.5); opacity:0; visibility:hidden; transition:.25s; z-index:48; }
#overlay.visible{ opacity:1; visibility:visible; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  html.reader-snap{ scroll-snap-type:none; }
  .rise,.pop,.reveal-2{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .float-a,.float-b,.float-c,.spin-slow,.orbit-1,.orbit-2,.orbit-3,.bub,.bub2,.bub3,.scroll-cue,.gradient-text{ animation:none !important; }
  #spot{ display:none !important; }
}