:root {
  --qlda-blue-dark: #0a3d68;
  --qlda-blue: #0d5ca6;
  --qlda-blue-light: #e8f1fb;
  --qlda-text: #1a1a1a;
  --qlda-border: #d7e0ea;

  /* Accent palette (chart series + KPI identity, fixed order — never cycled) */
  --qlda-accent-blue: #0d5ca6;
  --qlda-accent-aqua: #1baf7a;
  --qlda-accent-violet: #4a3aa7;

  /* Status palette (state — never reused for series identity) */
  --qlda-status-good: #0ca30c;
  --qlda-status-good-bg: #e6f7e6;
  --qlda-status-warning: #c98500;
  --qlda-status-warning-bg: #fdf1d9;
  --qlda-status-serious: #c65a30;
  --qlda-status-serious-bg: #fbe9e0;
  --qlda-status-critical: #d03b3b;
  --qlda-status-critical-bg: #fbe4e4;

  /* Ink hierarchy */
  --qlda-ink-secondary: #52514e;
  --qlda-ink-muted: #898781;
  --qlda-gridline: #e9edf2;
}

/* Hiệu ứng đổi màu nền khi rê chuột vào 1 dòng - áp dụng chung cho MỌI bảng (class .table của Bootstrap) trong
   toàn hệ thống, không cần gắn thêm class "table-hover" thủ công ở từng bảng nên không sót bảng nào. Sao chép
   đúng luật của Bootstrap .table-hover (dùng biến --bs-table-accent-bg) để vẫn tôn trọng đúng màu nền theo
   ngữ cảnh đã gán cho dòng đó (vd .table-danger dòng quá hạn, .table-warning dòng sắp hết hạn...) - chỉ pha
   thêm màu hover lên trên, không thay hẳn màu gốc của dòng. */
.table > tbody > tr:hover {
  --bs-table-accent-bg: var(--bs-table-hover-bg);
  color: var(--bs-table-hover-color);
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 15px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  background-color: #ffffff;
  color: var(--qlda-text);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--qlda-blue);
}

/* Thanh trên đầu (rút gọn - chỉ còn logo + tài khoản/đăng xuất, menu điều hướng chuyển xuống .menu-doc) */
.app-topbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 1rem;
  background: linear-gradient(90deg, var(--qlda-blue-dark), var(--qlda-blue));
  box-shadow: 0 2px 10px rgba(10, 61, 104, 0.18);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.app-topbar-brand {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.app-topbar-brand:hover {
  color: #fff;
}

.app-topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

/* Logo (ảnh vuông nền trắng, hình tròn ở giữa): cắt tròn + phóng nhẹ để bỏ viền trắng thừa, nổi trên nền xanh của thanh header. */
.app-topbar-logo {
  width: 46px;
  height: 46px;
  margin: -6px;
  object-fit: cover;
  background: #fff;
  /* cắt tròn sát vòng ngoài của logo (bỏ viền trắng của ảnh vuông) */
  clip-path: circle(45%);
  flex: 0 0 auto;
}

/* Khung ngoài: nội dung bên trái, menu dọc bên phải - flexbox tự dàn lại khi menu thu gọn/mở rộng,
   không cần tính margin thủ công. */
.app-shell {
  display: flex;
  align-items: flex-start;
}

.app-shell > .app-main {
  flex: 1 1 auto;
  min-width: 0;
  /* Nội dung trang trước đây cách thanh menu ngang 1rem (class "mb-3" trên .app-navbar cũ) - .app-topbar
     mới không còn margin đó nên phải bù lại ở đây, không thì nội dung dính sát mép thanh trên đầu. */
  padding-top: .5rem;   /* trước là 1rem - giảm để tiết kiệm diện tích (tiêu đề chức năng ngay dưới thanh trên) */
}

/* Menu dọc bên phải (desktop, ẩn dưới lg - xem .offcanvas cho mobile) */
.menu-doc {
  --menu-doc-rong: 220px;
  --menu-doc-rong-thu-gon: 56px;
  flex: 0 0 auto;
  order: 2;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  width: var(--menu-doc-rong);
  background: linear-gradient(180deg, var(--qlda-blue-dark), var(--qlda-blue));
  color: #fff;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width .15s ease;
  flex-direction: column;
}

.menu-doc.thu-gon {
  width: var(--menu-doc-rong-thu-gon);
}

/* macOS: nút cửa sổ ở góc trái -> menu nằm bên trái (data-menu-side do wwwroot/js/menu-side.js đặt) */
html[data-menu-side="left"] .menu-doc {
  order: -1; /* .app-main có order mặc định 0 và đứng trước trong DOM -> phải âm mới nằm trước nó */
}

.menu-doc-thu-gon-btn {
  border: none;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  padding: .5rem;
  text-align: center;
  flex: 0 0 auto;
}

.menu-doc-thu-gon-btn:hover {
  background: rgba(255, 255, 255, .16);
}

.menu-doc-noidung {
  display: flex;
  flex-direction: column;
  padding-bottom: .5rem;
}

.menu-doc-link, .menu-doc-nhom-toggle {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .55rem .9rem;
  color: rgba(255, 255, 255, .92);
  text-decoration: none;
  background: transparent;
  border: none;
  text-align: left;
  font-size: .95rem;
}

.menu-doc-link:hover, .menu-doc-nhom-toggle:hover, .menu-doc-sublink:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

.menu-doc-link.active, .menu-doc-sublink.active {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-weight: 600;
}

.menu-doc-sublink {
  display: block;
  padding: .4rem .9rem .4rem 2.3rem;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  font-size: .88rem;
}

/* Nhóm con lồng trong 1 nhóm menu (vd Văn bản > Danh mục dùng chung): nút xổ ra trông như 1 mục con, các mục bên
   trong thụt thêm 1 cấp. */
.menu-doc-subtoggle {
  width: 100%;
  display: flex;
  align-items: center;
  background: none;
  border: 0;
  text-align: left;
}
.menu-doc-sublink-2 {
  padding-left: 3.4rem;
}

/* Dấu hiệu có menu con: chevron dạng "v" (vẽ bằng viền, thay ký tự ▾), xoay lên "^" khi nhóm đang mở. */
.menu-doc-caret {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-block;
  width: .5rem;
  height: .5rem;
  font-size: 0;
  line-height: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .18s ease;
  opacity: .85;
}

[aria-expanded="true"] > .menu-doc-caret,
.menu-doc-nhom-toggle[aria-expanded="true"] .menu-doc-caret,
.menu-doc-subtoggle[aria-expanded="true"] .menu-doc-caret {
  transform: rotate(-135deg) translate(-1px, -1px);
}

/* Mỗi dòng menu có đường kẻ mỏng nhạt để phân biệt các mục. */
.menu-doc-link, .menu-doc-nhom-toggle, .menu-doc-sublink {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.menu-doc-nhom > .collapse:last-child .menu-doc-sublink:last-child {
  border-bottom: 0;
}

.menu-doc.thu-gon .menu-doc-label,
.menu-doc.thu-gon .menu-doc-caret {
  display: none;
}

.menu-doc.thu-gon .menu-doc-link,
.menu-doc.thu-gon .menu-doc-nhom-toggle {
  justify-content: center;
}

/* Bản offcanvas (mobile): không có nút thu gọn riêng, chữ luôn hiện đầy đủ. Nền tối đặt riêng bằng CSS
   (không dùng tiện ích "text-bg-dark" của Bootstrap - phiên bản 5.1 đang dùng chưa có tiện ích gộp đó,
   thiếu nó thì nền mặc định là trắng khiến chữ trắng của menu-doc-link biến mất). */
.menu-doc-offcanvas {
  background: linear-gradient(180deg, var(--qlda-blue-dark), var(--qlda-blue));
  color: #fff;
}

.menu-doc-offcanvas .offcanvas-title {
  color: #fff;
}


.menu-doc-noidung-mobile .menu-doc-link,
.menu-doc-noidung-mobile .menu-doc-nhom-toggle {
  color: rgba(255, 255, 255, .92);
}

.menu-doc-noidung-mobile .menu-doc-link:hover,
.menu-doc-noidung-mobile .menu-doc-nhom-toggle:hover,
.menu-doc-noidung-mobile .menu-doc-sublink:hover {
  background: rgba(255, 255, 255, .12);
}

/* Buttons */
.btn-primary {
  background-color: var(--qlda-blue);
  border-color: var(--qlda-blue);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--qlda-blue-dark);
  border-color: var(--qlda-blue-dark);
}

.btn-outline-primary {
  color: var(--qlda-blue);
  border-color: var(--qlda-blue);
}

.btn-outline-primary:hover {
  background-color: var(--qlda-blue);
  border-color: var(--qlda-blue);
}

/* Compact layout: nội dung trải kín bề ngang màn hình (trước đây giới hạn 1600px nên màn hình rộng bị thừa lề trống 2 bên). */
.container-fluid {
  max-width: none;
}

h4, h5 {
  color: var(--qlda-blue-dark);
}

/* Cards */
.card {
  border: 1px solid var(--qlda-border);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(10, 61, 104, 0.06);
}

.card-header {
  border-bottom: 1px solid var(--qlda-border);
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}

.section-label {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .74rem;
  color: var(--qlda-ink-secondary);
}

/* KPI tiles */
.kpi-tile {
  position: relative;
  overflow: hidden;
  padding-left: 0.9rem;
}

.kpi-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--kpi-accent, var(--qlda-blue));
}

.kpi-tile .kpi-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  background: color-mix(in srgb, var(--kpi-accent, var(--qlda-blue)) 14%, white);
}

.kpi-tile .kpi-label {
  color: var(--qlda-ink-secondary);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.kpi-tile .kpi-value {
  color: var(--qlda-text);
  letter-spacing: -.01em;
}

/* Status colors (fixed roles — never reused for series identity) */
.badge-status-good, .btn-status-good {
  background-color: var(--qlda-status-good); border-color: var(--qlda-status-good); color: #fff;
}
.badge-status-warning, .btn-status-warning {
  background-color: var(--qlda-status-warning); border-color: var(--qlda-status-warning); color: #fff;
}
.badge-status-serious, .btn-status-serious {
  background-color: var(--qlda-status-serious); border-color: var(--qlda-status-serious); color: #fff;
}
.badge-status-critical, .btn-status-critical {
  background-color: var(--qlda-status-critical); border-color: var(--qlda-status-critical); color: #fff;
}
.btn-status-good:hover, .btn-status-warning:hover, .btn-status-serious:hover, .btn-status-critical:hover {
  filter: brightness(0.92);
  color: #fff;
}
.text-status-good { color: var(--qlda-status-good); }
.text-status-serious { color: var(--qlda-status-serious); }
.text-status-muted { color: var(--qlda-ink-muted); }

/* Tiến độ thực hiện: bước đã ghi nhận kết quả */
tr.tiendo-row-recorded > td {
  background-color: var(--qlda-status-good-bg);
}

/* Tiến độ thực hiện: hiệu ứng khi rê chuột qua từng dòng */
tr[data-tiendo-row] {
  transition: background-color .12s ease-in-out;
}
tr[data-tiendo-row]:hover > td {
  background-color: color-mix(in srgb, var(--qlda-accent-blue) 10%, white);
}

/* Progress bars */
.progress {
  border-radius: 999px;
  background-color: #eef1f5;
}

.progress-bar {
  border-radius: 999px;
}

.table {
  font-size: 0.92rem;
}

.table th, .table td {
  padding: 0.4rem 0.55rem;
  vertical-align: middle;
}

.table thead th {
  background-color: var(--qlda-blue-light);
  color: var(--qlda-blue-dark);
  border-bottom-width: 1px;
  font-weight: 600;
  white-space: nowrap;
}

.form-label {
  margin-bottom: 0.25rem;
  font-weight: 500;
  color: #333;
}

fieldset.border {
  border-color: var(--qlda-border) !important;
}

.quill-editor .ql-editor {
  min-height: 110px;
  background-color: #ffffff;
}

/* Khung soạn thảo rộng hơn mức mặc định - dùng cho Nội dung Ghi chú cá nhân (Pages/GhiChuCaNhan/Them,Sua.cshtml),
   nơi nội dung thường dài hơn các trường mô tả ngắn khác đang dùng Quill trong hệ thống. */
.quill-editor-rong .ql-editor {
  min-height: 400px;
}

fieldset legend {
  color: var(--qlda-blue-dark);
}

.alert-success {
  background-color: #eaf7ee;
  border-color: #b9e4c4;
  color: #1c5c30;
}

.alert-danger {
  background-color: #fdecec;
  border-color: #f3b8b8;
  color: #7a1f1f;
}

/* Login page */
.login-body {
  /* Ảnh nền (App_Data/system/bg.jpg) tông xanh dương - xanh ngọc nhạt; không có ảnh thì dùng gradient cùng tông. */
  background: url("/he-thong/nen-dang-nhap") center / cover no-repeat fixed,
              linear-gradient(135deg, #dbe9fb, #d7f4ee);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 1rem;
}

/* Khung kính mờ trắng, hợp với các khối kính 3D trong ảnh nền. */
.login-card {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  width: 100%;
  max-width: 400px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(20, 70, 120, 0.18);
}

/* Dải nền nhẹ (xanh dương - xanh ngọc rất nhạt) làm nổi bật logo và tên phần mềm. */
.login-header {
  text-align: center;
  padding: 1.75rem 1.5rem 1.25rem;
  background: linear-gradient(135deg, rgba(190, 215, 250, 0.55), rgba(190, 240, 230, 0.55));
  border-bottom: 1px solid rgba(18, 68, 143, 0.12);
}

.login-logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(15, 100, 140, 0.25);
  margin-bottom: 0.9rem;
}

.login-header h1 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 0.35rem;
  background: linear-gradient(90deg, #12448f, #0a9a95);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.login-header p {
  font-size: 0.9rem;
  color: #5b6b7c;
}

.login-body-form {
  padding: 1.5rem 2rem 2rem;
}

.login-card .form-control {
  background-color: rgba(255, 255, 255, 0.9);
}

.login-card .btn-primary {
  background: linear-gradient(90deg, #12448f, #0a9a95);
  border: 0;
  box-shadow: 0 4px 12px rgba(18, 68, 143, 0.25);
}

.login-card .btn-primary:hover {
  filter: brightness(1.08);
}

.docx-preview-container {
  background: #f5f5f5;
  padding: 1rem;
}

/* Đánh dấu tạm thời khi nhảy tới 1 anchor toạ độ (tạo bằng double-click trên trang PDF scan) - vị trí đặt bằng
   left/top % nên trang cha (.vbpl-pdf-trang) phải có position:relative, xem renderTrangPdf trong file-viewer.js. */
.vbpl-anchor-danh-dau {
  position: absolute;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  margin-top: -12px;
  border-radius: 50%;
  border: 3px solid #dc3545;
  background-color: rgba(220, 53, 69, 0.25);
  pointer-events: none;
  z-index: 10;
  animation: vbplAnchorNhapNhay 1s ease-in-out 3;
}

/* Khung kéo-thả tệp cho tính năng "Bóc tách tự động" (Văn bản pháp luật/tham khảo) - thay cho input file bé
   xíu trước đây, dễ nhắm kéo-thả hơn. Input file thật vẫn còn (chỉ ẩn), <label for=...> bao ngoài nên bấm
   vào bất kỳ đâu trong khung cũng mở hộp chọn tệp mà không cần JS; JS (boc-tach-van-ban-phap-luat.js) chỉ lo
   phần kéo-thả (dragover/drop) và hiện tên tệp đã chọn. */
.vbpl-boctach-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vbpl-boctach-group > .vbpl-boctach-dropzone {
  width: 100%;
}
.vbpl-boctach-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-height: 110px;
  padding: 1.25rem;
  border: 2px dashed var(--qlda-border);
  border-radius: .5rem;
  background-color: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background-color .15s ease;
}
.vbpl-boctach-dropzone:hover {
  border-color: var(--qlda-blue);
  background-color: var(--qlda-blue-light);
}
.vbpl-boctach-dropzone.vbpl-boctach-dangkeo {
  border-color: var(--qlda-blue);
  background-color: var(--qlda-blue-light);
}
.vbpl-boctach-icon {
  font-size: 2rem;
  line-height: 1;
}
.vbpl-boctach-text {
  font-size: .85rem;
  color: var(--qlda-ink-secondary);
}
.vbpl-boctach-lienket {
  color: var(--qlda-blue);
  text-decoration: underline;
}
.vbpl-boctach-tenfile {
  word-break: break-all;
}

/* Khung kéo-thả CCCD ở Khách hàng - cùng giao diện khung bóc tách của Văn bản (tiền tố kh- để script riêng). */
.kh-boctach-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kh-boctach-group > .kh-boctach-dropzone {
  width: 100%;
}
.kh-boctach-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-height: 110px;
  padding: 1.25rem;
  border: 2px dashed var(--qlda-border);
  border-radius: .5rem;
  background-color: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background-color .15s ease;
}
.kh-boctach-dropzone:hover {
  border-color: var(--qlda-blue);
  background-color: var(--qlda-blue-light);
}
.kh-boctach-dropzone.kh-boctach-dangkeo {
  border-color: var(--qlda-blue);
  background-color: var(--qlda-blue-light);
}
.kh-boctach-dropzone {
  min-height: 84px;
  padding: .6rem;
}
.kh-boctach-icon {
  font-size: 2rem;
  line-height: 1;
}
.kh-boctach-text {
  font-size: .85rem;
  color: var(--qlda-ink-secondary);
}
.kh-boctach-lienket {
  color: var(--qlda-blue);
  text-decoration: underline;
}
.kh-boctach-tenfile {
  word-break: break-all;
}

/* Khung kéo-thả bóc tách nội dung ở Giao dịch - cùng giao diện khung bóc tách của Văn bản (tiền tố kh- để script riêng). */
.gd-boctach-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gd-boctach-group > .gd-boctach-dropzone {
  width: 100%;
}
.gd-boctach-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-height: 110px;
  padding: 1.25rem;
  border: 2px dashed var(--qlda-border);
  border-radius: .5rem;
  background-color: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background-color .15s ease;
}
.gd-boctach-dropzone:hover {
  border-color: var(--qlda-blue);
  background-color: var(--qlda-blue-light);
}
.gd-boctach-dropzone.gd-boctach-dangkeo {
  border-color: var(--qlda-blue);
  background-color: var(--qlda-blue-light);
}
.gd-boctach-icon {
  font-size: 2rem;
  line-height: 1;
}
.gd-boctach-text {
  font-size: .85rem;
  color: var(--qlda-ink-secondary);
}
.gd-boctach-lienket {
  color: var(--qlda-blue);
  text-decoration: underline;
}
.gd-boctach-tenfile {
  word-break: break-all;
}

/* Đoạn văn bản đã "tô vàng" trong popup xem tệp (xem vbplAnchor.toVangVungChon trong file-viewer.js). Dùng màu
   nền thay vì mark mặc định của trình duyệt để không đổi màu chữ, tránh khó đọc trên nền đậm nếu có. Vàng đậm
   #ffea00 (thay vì #ffc107 cũ - ngả cam, không nổi bật bằng) để giống màu bút dạ quang thật, dễ nhận ra ngay. */
.tovang-mark {
  background-color: #ffea00;
  color: inherit;
  padding: 0;
}

/* Kết quả tìm kiếm trong nội dung tệp đang xem (xem fvTimKiem trong file-viewer.js) - kết quả đang chọn tô đậm
   hơn (cam) để phân biệt với các kết quả còn lại (xanh nhạt). */
.fv-timkiem-mark {
  background-color: #a5d8ff;
  color: inherit;
  padding: 0;
}
.fv-timkiem-mark.fv-timkiem-mark-hientai {
  background-color: #ff922b;
}

/* Nhãn nhỏ ở góc trang PDF/ảnh đã nhận dạng chữ bằng OCR (xem ganNhanDaOcr trong file-viewer.js) - phân biệt
   với trang có sẵn văn bản số hoá thật, vì OCR có thể sai sót. pointer-events:none để không chặn việc bôi đen
   chọn văn bản hay double-click thêm anchor ngay bên dưới nhãn. */
.fv-ocr-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background-color: rgba(25, 135, 84, 0.85);
  color: #fff;
  font-size: 11px;
  line-height: 1.4;
  padding: 2px 7px;
  border-radius: 4px;
  z-index: 5;
  pointer-events: none;
  user-select: none;
}

/* Dấu hiệu "OCR" ngay tại tên tệp PDF trong danh sách tệp đính kèm (không phải trong popup xem tệp - xem đoạn
   tự gắn nhãn cuối file-viewer.js) - nằm trong luồng văn bản (không position:absolute như .fv-ocr-badge) vì
   chèn cạnh tên tệp trong 1 dòng danh sách bình thường. */
/* Biểu tượng "tệp này có ghi chú" (tô vàng kèm ghi chú) cạnh tên tệp trong mọi danh sách tệp đính kèm - xem
   fvGhiChuTrongDanhSach trong file-viewer.js. */
.fv-ghichu-inline-badge {
  display: inline-block;
  margin-left: 4px;
  font-size: 12px;
  line-height: 1;
  vertical-align: middle;
  cursor: help;
}

.fv-ocr-inline-badge {
  display: inline-block;
  margin-left: 5px;
  background-color: rgba(25, 135, 84, 0.85);
  color: #fff;
  font-size: 10px;
  line-height: 1.4;
  padding: 1px 5px;
  border-radius: 4px;
  vertical-align: middle;
}

@keyframes vbplAnchorNhapNhay {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.4; }
}

/* Popup xem tệp đính kèm to gần đầy màn hình (thay vì modal-xl cố định, quá nhỏ để đọc/thao tác với tài liệu
   nhiều trang) - modal-content chuyển sang flex-column để phần nội dung (.modal-body) tự giãn lấp đầy khoảng
   còn lại giữa header/toolbar và footer, không cần tính cứng chiều cao bằng vh cho từng phần. Trên màn hình
   nhỏ (điện thoại) thì chiếm trọn màn hình luôn (không viền/khoảng trống quanh popup) cho dễ thao tác. */
.fileviewer-dialog-lon {
  width: 96vw;
  max-width: 96vw;
  height: 94vh;
  margin: 3vh auto;
}
.fileviewer-dialog-lon .modal-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.fileviewer-dialog-lon .modal-body {
  flex: 1 1 auto;
  min-height: 0;
}
@media (max-width: 576px) {
  .fileviewer-dialog-lon {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    margin: 0;
  }
  .fileviewer-dialog-lon .modal-content {
    border-radius: 0;
  }
}

/* Modal Thêm/Sửa văn bản pháp luật - rộng hơn modal-xl (1140px) để 3 cột (thông tin/nội dung/đính kèm) đủ
   chỗ, khớp với cách chia cột mới trong Index.cshtml (thay 2 cột col-lg-7/5 cũ). Giới hạn chiều cao theo
   viewport + modal-body tự cuộn riêng (không phải cuộn cả trang) CHỈ khi nội dung thật sự vượt màn hình (vd
   văn bản có rất nhiều tệp đính kèm/liên kết) - trường hợp thường gặp vẫn vừa khít, không cần cuộn. */
.vbpl-modal-rong {
  width: 92vw;
  max-width: 1600px;
  margin: 3vh auto;
}
.vbpl-modal-rong .modal-content {
  max-height: 94vh;
  display: flex;
  flex-direction: column;
}
.vbpl-modal-rong .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Popup xem tệp mặc định phóng to đầy màn hình: chiếm trọn màn hình và ẩn hẳn modal-header (tiêu đề + nút Đóng)
   để nhường chỗ cho nội dung - chỉ còn thanh công cụ (#fileViewerToolbar) ở trên cùng, có nút ✕ để đóng.
   Nút ⛶ là toàn màn hình của trình duyệt (xem fvBatTatToanManHinh trong file-viewer.js). */
.fileviewer-dialog-lon.fv-toan-man-hinh {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  margin: 0;
}
.fileviewer-dialog-lon.fv-toan-man-hinh .modal-content {
  border-radius: 0;
}
.fileviewer-dialog-lon.fv-toan-man-hinh .modal-header,
.fileviewer-dialog-lon.fv-toan-man-hinh .modal-footer {
  display: none;
}

/* Khung Anchor/Ghi chú tô vàng 2 bên popup xem tệp: co giãn được (kéo viền) và thu gọn lại còn 1 dải hẹp ở
   góc để nhường chỗ cho nội dung khi cần - xem ganThuGonKeoGian trong file-viewer.js. */
.fv-side-pane {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
}
.fv-side-pane .fv-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 5;
}
#fileViewerAnchorPane .fv-resize-handle { right: -3px; }
#fileViewerDanhDauPane .fv-resize-handle { left: -3px; }
.fv-side-pane .fv-nut-mo-rong {
  display: none;
  width: 100%;
  border: none;
  background: transparent;
}
.fv-side-pane.fv-thu-gon {
  width: 36px !important;
  overflow: hidden;
}
/* !important vì phần đầu khung (header) có sẵn class tiện ích "d-flex" của Bootstrap (display:flex !important)
   - phải thắng được nó mới ẩn đi khi thu gọn. */
.fv-side-pane.fv-thu-gon .fv-side-pane-noidung { display: none !important; }
.fv-side-pane.fv-thu-gon .fv-resize-handle { display: none; }
.fv-side-pane.fv-thu-gon .fv-nut-mo-rong { display: block; }

/* Tab "🖍️ Ghi chú" / "💬 Hỏi đáp AI" trong khung phải của popup xem tệp (xem [data-fv-tab] trong
   file-viewer.js): thêm viền dưới + nền nhạt cho tab đang chọn để phân biệt rõ với tab còn lại, thay vì chỉ
   đổi màu chữ (dễ bị nhầm là chưa chọn tab nào). */
.fv-tab-btn {
  border-radius: 4px 4px 0 0 !important;
  padding: 4px 8px !important;
  border-bottom: 2px solid transparent !important;
}
.fv-tab-btn.active {
  border-bottom-color: var(--bs-primary, #0d6efd) !important;
  background-color: rgba(13, 110, 253, 0.08);
}

/* #fileViewerHoiDapPane là flex item (flex-grow-1) bên trong #fileViewerDanhDauPane (chiều cao cố định) -
   mặc định flex item có min-height:auto (co giãn theo nội dung con), khiến khung này giãn cao vô hạn theo
   độ dài hội thoại thay vì giữ cố định trong pane rồi để #fileViewerHoiDapThread (đã có overflow-auto) tự
   cuộn bên trong. min-height:0 buộc nó tôn trọng chiều cao pane cha, trả lại đúng vai trò cuộn cho thread. */
#fileViewerHoiDapPane {
  min-height: 0;
}

/* Tab "🖼 Trang" (thumbnail từng trang PDF, pane trái popup xem tệp) - xem fvTaoThumbnailPdf trong
   file-viewer.js. Thumbnail đang xem viền xanh đậm để dễ nhận biết đang ở trang nào giữa danh sách dài. */
.fv-trang-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: .5rem;
}
.fv-trang-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  padding: .3rem;
  width: 100%;
  border: 2px solid transparent;
  border-radius: .35rem;
  cursor: pointer;
}
.fv-trang-thumb:hover {
  background-color: var(--qlda-blue-light);
}
.fv-trang-thumb.active {
  border-color: var(--qlda-blue);
  background-color: var(--qlda-blue-light);
}
.fv-trang-thumb canvas {
  max-width: 100%;
  height: auto;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  background-color: #fff;
}
.fv-trang-thumb-so {
  font-size: .75rem;
  color: var(--qlda-ink-secondary);
}

/* Giao diện tối cho popup xem tệp đính kèm: làm nổi bật trang tài liệu/ảnh (vốn nền trắng) và thumbnail nhờ
   độ tương phản với nền tối xung quanh - giống các trình xem PDF/ảnh chuyên nghiệp (Preview, Adobe Reader ở
   chế độ tối...). Bootstrap 5.1 (đang dùng) chưa có biến màu cho chế độ tối như 5.3 trở lên, nên phải tự đổi
   màu từng thành phần (nút/ô nhập/dropdown/viền...) ở đây thay vì chỉ bật 1 thuộc tính có sẵn. CHỈ đổi màu
   phần khung/công cụ xung quanh - trang PDF, ảnh, nội dung docx và thumbnail vẫn giữ nguyên nền trắng (xem
   .vbpl-pdf-trang, .fv-trang-thumb canvas bên dưới) vì đó chính là "giấy" cần được làm nổi bật, không phải
   thứ cần đổi màu. */
#fileViewerModal {
  --fv-dark-bg: #1c1c1e;
  --fv-dark-bg-canvas: #141414;
  --fv-dark-bg-2: #2a2a2d;
  --fv-dark-border: rgba(255, 255, 255, .14);
  --fv-dark-text: #e8e8ea;
  --fv-dark-text-muted: #9a9a9e;
  --fv-dark-hover: rgba(255, 255, 255, .1);
}
#fileViewerModal .modal-content {
  background-color: var(--fv-dark-bg);
  color: var(--fv-dark-text);
}
#fileViewerModal .modal-header,
#fileViewerModal #fileViewerToolbar.bg-light {
  background-color: var(--fv-dark-bg) !important;
  border-color: var(--fv-dark-border) !important;
  color: var(--fv-dark-text);
}
#fileViewerModal .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}
#fileViewerModal .border-bottom,
#fileViewerModal .border-top,
#fileViewerModal .border-start,
#fileViewerModal .border-end,
#fileViewerModal .border {
  border-color: var(--fv-dark-border) !important;
}
#fileViewerModal .text-muted {
  color: var(--fv-dark-text-muted) !important;
}
#fileViewerModal .fv-side-pane {
  background-color: var(--fv-dark-bg);
  color: var(--fv-dark-text);
}
#fileViewerModal .btn-outline-secondary {
  color: var(--fv-dark-text);
  border-color: var(--fv-dark-border);
}
#fileViewerModal .btn-outline-secondary:hover,
#fileViewerModal .btn-outline-secondary:not(:disabled):not(.disabled):active {
  background-color: var(--fv-dark-hover);
  border-color: var(--fv-dark-text-muted);
  color: var(--fv-dark-text);
}
#fileViewerModal .form-control,
#fileViewerModal .form-select {
  background-color: var(--fv-dark-bg-2);
  border-color: var(--fv-dark-border);
  color: var(--fv-dark-text);
}
#fileViewerModal .form-control:focus,
#fileViewerModal .form-select:focus {
  background-color: var(--fv-dark-bg-2);
  color: var(--fv-dark-text);
}
#fileViewerModal .form-control::placeholder {
  color: var(--fv-dark-text-muted);
}
/* Bootstrap 5.1 vẽ mũi tên form-select bằng background-image SVG màu tối cố định (chưa có biến CSS để đổi
   như 5.3+) - phải tự thay bằng SVG cùng hình dạng nhưng màu sáng, nếu không mũi tên gần như vô hình trên nền tối. */
#fileViewerModal .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e8e8ea' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
#fileViewerModal .dropdown-menu {
  background-color: var(--fv-dark-bg-2);
  border-color: var(--fv-dark-border);
}
#fileViewerModal .dropdown-item {
  color: var(--fv-dark-text);
}
#fileViewerModal .dropdown-item:hover,
#fileViewerModal .dropdown-item:focus {
  background-color: var(--fv-dark-hover);
  color: var(--fv-dark-text);
}
#fileViewerModal .list-group-item {
  background-color: var(--fv-dark-bg-2);
  border-color: var(--fv-dark-border);
  color: var(--fv-dark-text);
}
#fileViewerModal .list-group-item.active {
  background-color: var(--qlda-blue);
  border-color: var(--qlda-blue);
  color: #fff;
}
/* Liên kết/nút dạng liên kết (danh sách tệp đính kèm, văn bản liên quan, anchor, tab...) mặc định xanh đậm
   của Bootstrap rất khó đọc trên nền tối - dùng xanh nhạt đủ tương phản (≈6.8:1 trên nền #2a2a2d); hover sáng
   hơn nữa. Dòng ĐANG XEM (.active) vẫn giữ chữ trắng trên nền xanh như cũ (class text-white). */
#fileViewerModal {
  --fv-dark-link: #8ab4ff;
  --fv-dark-link-hover: #c2d7ff;
}
#fileViewerModal .btn-link,
#fileViewerModal a:not(.btn),
#fileViewerModal .text-primary {
  color: var(--fv-dark-link) !important;
}
#fileViewerModal .btn-link:hover,
#fileViewerModal a:not(.btn):hover,
#fileViewerModal .text-primary:hover {
  color: var(--fv-dark-link-hover) !important;
}
#fileViewerModal .list-group-item.active .btn-link,
#fileViewerModal .list-group-item.active .btn-link:disabled {
  color: #fff !important;
}
#fileViewerModal .list-group-item:not(.active):hover {
  background-color: var(--fv-dark-hover);
}

/* Khung nội dung chính (quanh trang PDF/ảnh/docx) tối hơn 1 chút so với phần khung/công cụ, tạo cảm giác
   "hộp đèn" (lightbox) - trang giấy trắng nổi bật hẳn lên giữa nền tối, đúng mục tiêu chính của yêu cầu. */
#fileViewerContentCol,
#fileViewerPdfContainer,
#fileViewerImageWrap,
#fileViewerDocx {
  background-color: var(--fv-dark-bg-canvas);
}
.vbpl-pdf-trang {
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
#fileViewerTrangList.fv-trang-list {
  background-color: var(--fv-dark-bg, #1c1c1e);
}

/* Câu trả lời AI trong khung "💬 Hỏi đáp AI" được render từ Markdown (marked.js, xem hienThiTraLoi trong
   file-viewer.js) - cùng quy ước với .hdht-noidung-markdown (Pages/HoiDapAI/Index.cshtml) nhưng đặt ở CSS
   dùng chung vì khung xem tệp được nhúng ở mọi module, không riêng 1 trang cụ thể nào. */
.fv-hoidap-markdown > :first-child { margin-top: 0; }
.fv-hoidap-markdown > :last-child { margin-bottom: 0; }
.fv-hoidap-markdown ul, .fv-hoidap-markdown ol { padding-left: 1.25rem; }
.fv-hoidap-markdown table { border-collapse: collapse; max-width: 100%; }
.fv-hoidap-markdown table, .fv-hoidap-markdown th, .fv-hoidap-markdown td { border: 1px solid #dee2e6; }
.fv-hoidap-markdown th, .fv-hoidap-markdown td { padding: 0.25rem 0.5rem; }
.fv-hoidap-markdown code { background: rgba(0, 0, 0, .06); padding: 0.1rem 0.3rem; border-radius: 3px; }
.fv-hoidap-markdown pre code { display: block; padding: 0.5rem; overflow-x: auto; }

/* Văn bản ĐANG XEM trong menu "🔗 Văn bản liên quan" (xem fvTaiVanBanLienQuan trong file-viewer.js) - chỉ tô
   đậm nền hơn 1 chút để phân biệt, không đổi thứ tự/kiểu chữ so với các mục khác trong cùng cấp bậc. */
.fv-vblq-dang-xem {
  background-color: rgba(0, 0, 0, .07);
}

/* Tham chiếu "Điều N" trong câu trả lời AI (xem ganLienKetThamChieu trong file-viewer.js) - bấm vào sẽ nhảy
   tới đúng đoạn đó trong nội dung tệp đang xem, gạch chân + đổi màu để người dùng nhận ra đây là bấm được. */
.fv-hoidap-thamchieu {
  color: var(--bs-primary, #0d6efd);
  text-decoration: underline dotted;
  cursor: pointer;
}
.fv-hoidap-thamchieu:hover {
  text-decoration: underline solid;
}

/* Nút "In" trong popup xem tệp (xem inTepDinhKemDangXem trong file-viewer.js): bật lớp "dang-in-tep-dinh-kem"
   trên <body> ngay trước khi gọi window.print() rồi gỡ lại sau khi in xong (sự kiện afterprint) - chỉ hiện
   đúng phần nội dung tệp đang xem (PDF/ảnh/docx), ẩn hết phần còn lại của trang lẫn phần khung popup không cần
   in (tiêu đề, sidebar anchor, nút bấm). Không đụng tới in trang bình thường (không bật lớp này) ở nơi khác.
*/
@media print {
  body.dang-in-tep-dinh-kem > *:not(#fileViewerModal) {
    display: none !important;
  }
  body.dang-in-tep-dinh-kem #fileViewerModal {
    position: static !important;
    display: block !important;
  }
  body.dang-in-tep-dinh-kem #fileViewerModal .modal-dialog {
    max-width: none;
    margin: 0;
  }
  body.dang-in-tep-dinh-kem #fileViewerModal .modal-header,
  body.dang-in-tep-dinh-kem #fileViewerModal .modal-footer,
  body.dang-in-tep-dinh-kem #fileViewerToolbar,
  body.dang-in-tep-dinh-kem #fileViewerAnchorPane,
  body.dang-in-tep-dinh-kem #fileViewerDanhDauPane,
  body.dang-in-tep-dinh-kem #fileViewerAnchorMenu,
  body.dang-in-tep-dinh-kem .fv-ocr-badge {
    display: none !important;
  }
  body.dang-in-tep-dinh-kem #fileViewerModal .modal-body,
  body.dang-in-tep-dinh-kem #fileViewerModal .row,
  body.dang-in-tep-dinh-kem #fileViewerContentCol,
  body.dang-in-tep-dinh-kem #fileViewerPdfContainer,
  body.dang-in-tep-dinh-kem #fileViewerImageWrap,
  body.dang-in-tep-dinh-kem #fileViewerDocx {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  /* In luôn ở trạng thái không zoom/xoay (bản thu phóng/xoay chỉ để xem trên màn hình) - tránh in ra trang bị
     cắt hoặc lệch hướng ngoài ý muốn. */
  body.dang-in-tep-dinh-kem #fileViewerPdfZoomWrap,
  body.dang-in-tep-dinh-kem #fileViewerImage,
  body.dang-in-tep-dinh-kem #fileViewerDocxZoomWrap {
    zoom: 100% !important;
    transform: none !important;
  }

  /* In ĐỦ MỌI TRANG: popup là modal có chiều cao cố định (94vh/100vh) + cuộn bên trong - nếu giữ nguyên thì chỉ in
     được phần vừa 1 màn hình (= 1 trang). Gỡ mọi giới hạn chiều cao/cuộn của modal, khung nội dung và cả <body>
     (Bootstrap khoá cuộn body khi mở modal) để nội dung dài tràn ra và trình duyệt tự ngắt thành nhiều trang. */
  html:has(body.dang-in-tep-dinh-kem),
  body.dang-in-tep-dinh-kem {
    height: auto !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }
  body.dang-in-tep-dinh-kem .modal-backdrop {
    display: none !important;
  }
  body.dang-in-tep-dinh-kem #fileViewerModal,
  body.dang-in-tep-dinh-kem #fileViewerModal .modal-dialog,
  body.dang-in-tep-dinh-kem #fileViewerModal .modal-content {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    border: 0 !important;
    display: block !important;
  }
  body.dang-in-tep-dinh-kem #fileViewerModal .modal-body {
    display: block !important;
    padding: 0 !important;
  }
  body.dang-in-tep-dinh-kem #fileViewerContentCol {
    flex: none !important;
    display: block !important;
    position: static !important;
  }

  /* Trang PDF: vừa khổ giấy (canvas co theo bề ngang, giữ tỉ lệ), mỗi trang PDF = 1 trang giấy, không cắt ngang trang,
     bỏ lớp chữ quét chọn/đổ bóng/khoảng cách giữa các trang dùng khi xem trên màn hình. */
  body.dang-in-tep-dinh-kem .vbpl-pdf-trang {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
    break-after: page;
    page-break-after: always;
  }
  body.dang-in-tep-dinh-kem .vbpl-pdf-trang:last-child {
    break-after: auto;
    page-break-after: auto;
  }
  body.dang-in-tep-dinh-kem .vbpl-pdf-trang canvas {
    width: 100% !important;
    height: auto !important;
    display: block;
  }
  body.dang-in-tep-dinh-kem .vbpl-pdf-trang .textLayer,
  body.dang-in-tep-dinh-kem #fileViewerImageTextLayer {
    display: none !important;
  }
  body.dang-in-tep-dinh-kem #fileViewerImage {
    max-width: 100% !important;
    max-height: 98vh !important;
    object-fit: contain;
  }
  /* Ảnh/HTML: iframe sandbox không in được từ trang cha (không truy cập nội dung) - nút In đã ẩn cho HTML. */
}
@page {
  margin: 8mm;
}

/* Bootstrap mặc định canh giữa chữ trong .btn (kể cả .btn-link) - với các nút dạng link hiển thị tên dài
   (tên tệp đính kèm, tên công việc...) có thể bị xuống dòng, canh giữa khiến các dòng lệch nhau rất khó đọc.
   Canh trái cho mọi .btn-link để khi xuống dòng vẫn thẳng hàng - không ảnh hưởng trường hợp 1 dòng (nhìn
   giống hệt như trước). */
.btn.btn-link {
  text-align: left;
}

/* Thu gọn/mở rộng từng nhóm theo chủ đề/chuyên đề - xem wwwroot/js/thu-gon-nhom.js */
.tg-da-thu-gon [data-thu-gon-noi-dung] { display: none !important; }

/* Khung kéo-thả đồng nhất cho mọi ô tải tệp - xem wwwroot/js/uploader-keo-tha.js. Cùng giao diện với khung bóc tách (nét đứt,
   đổi màu khi hover/đang kéo); input gốc chỉ ẩn bằng CSS (không display:none) để required/validate vẫn hoạt động. */
.up-khung {
  position: relative;
}
.up-khung > input.up-an {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  left: 0;
  bottom: 0;
}
.up-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  min-height: 72px;
  padding: .7rem;
  margin: 0;
  border: 2px dashed var(--qlda-border);
  border-radius: .5rem;
  background-color: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background-color .15s ease;
}
.up-dropzone:hover,
.up-khung.up-dangkeo .up-dropzone {
  border-color: var(--qlda-blue);
  background-color: var(--qlda-blue-light);
}
.up-icon {
  font-size: 1.3rem;
  line-height: 1;
  color: var(--qlda-blue);
}
.up-text {
  font-size: .85rem;
  color: var(--qlda-ink-secondary);
}
.up-lienket {
  color: var(--qlda-blue);
  text-decoration: underline;
}
.up-goiy {
  font-size: .75rem;
  color: #8a8f98;
}
.up-ds {
  width: 100%;
  margin-top: .15rem;
}
.up-tep {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .1rem .5rem;
  margin-top: .15rem;
  font-size: .8rem;
  text-align: left;
  background: rgba(0, 0, 0, .04);
  border-radius: .3rem;
}
.up-ten {
  word-break: break-all;
}
.up-bo {
  border: 0;
  background: none;
  color: #c0392b;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 .25rem;
  cursor: pointer;
}
/* Biến thể nhỏ (ô tải tệp form-control-sm: bảng tiến độ, nhập Excel...): xếp ngang, gọn. */
.up-nho .up-dropzone {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  min-height: 38px;
  padding: .35rem .6rem;
  text-align: left;
}
.up-nho .up-icon {
  font-size: 1rem;
}
.up-nho .up-text {
  font-size: .8rem;
}


/* Thanh menu nhóm/chuyên đề bên phải các màn hình danh sách (Văn bản, Tài liệu, Dự án): nền xanh nhẹ, mỗi mục có đường kẻ mỏng nhạt. */
.side-nav-nhom {
  background: linear-gradient(180deg, #eef5fc, #e6f2f6);
  border: 1px solid #d3e2f0;
  border-radius: .6rem;
  padding: .5rem .5rem .6rem;
  box-shadow: 0 1px 4px rgba(10, 61, 104, .06);
}

.side-nav-tieude {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--qlda-blue-dark);
  padding: .1rem .35rem .45rem;
  margin-bottom: .15rem;
  border-bottom: 1px solid #c3d7ea;
}

.side-nav-nhom .nav-link {
  font-size: .85rem;
  color: #2b4a66;
  padding: .38rem .45rem !important;
  border-bottom: 1px solid rgba(10, 61, 104, .09);
  border-radius: 0;
  transition: background-color .12s ease, color .12s ease, padding-left .12s ease;
}

.side-nav-nhom .nav-link:last-child {
  border-bottom: 0;
}

.side-nav-nhom .nav-link:hover,
.side-nav-nhom .nav-link:focus {
  background-color: rgba(13, 92, 166, .1);
  color: var(--qlda-blue-dark);
  padding-left: .7rem !important;
}


/* Soạn thảo Mô tả / Nội dung của Tài liệu (Quill, khởi tạo khi mở modal - xem wwwroot/js/tai-lieu-editor.js) */
.tl-quill-mota .ql-editor { min-height: 90px; max-height: 180px; overflow-y: auto; background: #fff; }
.tl-quill-noidung .ql-editor { min-height: 220px; max-height: 420px; overflow-y: auto; background: #fff; }
.tl-quill-mota.ql-container, .tl-quill-noidung.ql-container { font-size: .9rem; }

/* Hiển thị chỉ-đọc nội dung đã soạn bằng Quill: dùng lại CSS .ql-editor của Quill (danh sách chấm/số, tiêu đề...) nhưng bỏ khung/đệm. */
.ql-snow .ql-editor.tl-hien-thi { padding: 0; min-height: 0; height: auto; overflow: visible; white-space: normal; line-height: 1.45; }
.ql-snow .ql-editor.tl-hien-thi p, .ql-snow .ql-editor.tl-hien-thi li { margin-bottom: .2rem; }

/* Mô tả hiển thị ngay trong dòng danh sách Tài liệu: cỡ chữ nhỏ như cũ, giữ màu do người soạn chọn (không ép xám). */
.tl-mota-dong .ql-editor.tl-hien-thi { font-size: .8125rem; line-height: 1.35; }
.tl-mota-dong .ql-editor.tl-hien-thi p, .tl-mota-dong .ql-editor.tl-hien-thi li { margin-bottom: .1rem; }
.tl-mota-dong .ql-editor.tl-hien-thi { color: #6c757d; }


/* So sánh 2 tệp đã ghim trong popup xem tệp (xem fvMoSoSanh trong file-viewer.js) */
#fileViewerModal .fv-so-sanh { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; flex-direction: column; }
#fileViewerModal .fv-so-sanh-than { min-height: 0; }
#fileViewerModal .fv-so-sanh-than.fv-ss-dao { flex-direction: row-reverse !important; }   /* nút "Đổi vị trí 2 tệp" */
#fileViewerModal .fv-so-sanh-than.fv-ss-dao > .fv-so-sanh-cot + .fv-so-sanh-cot { border-left: 0; }
#fileViewerModal .fv-so-sanh-than.fv-ss-dao > .fv-so-sanh-cot:first-child { border-left: 3px solid #0d5ca6; }   /* đường kẻ giữa 2 cột khi đã đổi chỗ */
#fileViewerModal .fv-so-sanh-cot { flex: 1 1 0; min-width: 0; }
#fileViewerModal .fv-so-sanh-cot + .fv-so-sanh-cot { border-left: 3px solid #0d5ca6; }

/* 📌 ghim tệp trong danh sách tệp đính kèm: ẩn, chỉ hiện khi rê chuột vào dòng; tệp đã ghim luôn hiện */
#fileViewerModal .fv-pin-btn { opacity: 0; filter: grayscale(1); transition: opacity .12s ease; border: 0; background: transparent; line-height: 1; }
#fileViewerModal .list-group-item:hover .fv-pin-btn { opacity: .75; }
#fileViewerModal .fv-pin-btn:hover { opacity: 1 !important; filter: none; }
#fileViewerModal .fv-pin-btn.dang-ghim { opacity: 1; filter: none; }
/* Icon ghim (Font Awesome vẽ theo màu chữ): nút .btn mặc định màu chữ tối nên gần như vô hình trên nền tối của khung xem tệp - đặt màu sáng; đã ghim thì vàng + nghiêng. */
#fileViewerModal .fv-pin-btn { color: #b8c7d9; padding: 2px 4px !important; font-size: .95rem; }
#fileViewerModal .fv-pin-btn:hover { color: #fff; }
#fileViewerModal .fv-pin-btn.dang-ghim { color: #ffc107; }
#fileViewerModal .fv-pin-btn.dang-ghim .fa-e { transform: rotate(-30deg); }

/* Thanh tiêu đề màn hình so sánh: nền xanh đậm + chữ trắng để tương phản rõ; tên tệp mỗi bên nền xanh nhạt + chữ đậm tối màu. */
#fileViewerModal .fv-so-sanh-dau { background: #0a3d68; color: #fff; font-size: .95rem; }
#fileViewerModal .fv-so-sanh-dau .form-check-label { color: #fff; cursor: pointer; }
#fileViewerModal .fv-so-sanh-dau .form-check-input { cursor: pointer; }
#fileViewerModal .fv-so-sanh-ten { background: #dbe9f8; color: #0a2540; font-weight: 700; font-size: .9rem; border-bottom: 1px solid #8fb0d3; }
#fileViewerModal .fv-so-sanh-cuon { position: absolute; inset: 0; overflow: auto; background: #e9edf2; }


/* Icon Font Awesome thay emoji trong menu/nút (xem wwwroot/js/fa-icons.js): emoji gốc vẫn nằm trong DOM nhưng bị đẩy ra ngoài khung; icon vẽ bằng ::before theo màu chữ. */
.fa-e {
  display: inline-block;
  position: relative;
  width: 1.15em;
  height: 1em;
  line-height: 1;
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  vertical-align: -0.125em;
  flex: 0 0 auto;
}
.fa-e::before {
  content: attr(data-fa);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
  text-indent: 0;
  font: 900 1em/1 "Font Awesome 6 Free";
  font-style: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.fa-e.fa-e-hoi::before { font-weight: 400; }
.td-tile-icon .fa-e { width: 1em; font-size: 1.7rem; }
.td-nhom-icon .fa-e { width: 1em; }
.menu-doc-icon .fa-e { width: 1.15em; }


/* Khung nổi hiện menu con khi rê chuột vào 1 nhóm của menu đang thu gọn (xem wwwroot/js/menu-doc.js) */
.menu-doc-flyout {
  position: fixed;
  z-index: 1060;
  min-width: 210px;
  max-width: 300px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  background: linear-gradient(180deg, var(--qlda-blue-dark), var(--qlda-blue));
  color: #fff;
  border-radius: .5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .18);
  padding: .25rem 0;
}
.menu-doc-flyout-dau {
  padding: .5rem .9rem;
  font-weight: 700;
  font-size: .9rem;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.menu-doc-flyout .menu-doc-sublink {
  display: block;
  padding: .45rem .9rem;
}
.menu-doc-flyout .menu-doc-sublink-2 { padding-left: 1.9rem; }
.menu-doc-flyout-nhomcon {
  padding: .4rem .9rem .15rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .75;
}


/* Ghi chú nhanh nổi trong khung xem tệp / so sánh (xem wwwroot/js/file-viewer.js, khối "Ghi chú nhanh") */
.fv-ghichu { position: absolute; top: 140px; right: 18px; z-index: 60; }   /* thấp hơn nút 🔖/🖍️ ở mép 2 khung so sánh (top ~8px của khung) để không che nhau */
.fv-ghichu-nut { width: 40px; height: 40px; border-radius: 50%; padding: 0; font-size: 1.05rem; box-shadow: 0 3px 10px rgba(0,0,0,.35); cursor: grab; touch-action: none; }
.fv-ghichu-nut:active { cursor: grabbing; }
.fv-ghichu-khung { position: absolute; top: 46px; right: 0; width: 320px; background: #fff; color: #212529; border: 1px solid #c9d3de; border-radius: .5rem; box-shadow: 0 8px 24px rgba(0,0,0,.35); overflow: hidden; }
.fv-ghichu.fv-ghichu-trai .fv-ghichu-khung { right: auto; left: 0; }
.fv-ghichu-dau { display: flex; align-items: center; justify-content: space-between; padding: .35rem .6rem; background: #0a3d68; color: #fff; font-weight: 600; font-size: .85rem; cursor: grab; user-select: none; }
.fv-ghichu-editor .ql-editor { min-height: 120px; max-height: 240px; overflow-y: auto; font-size: .88rem; }
.fv-ghichu-khung { width: 360px; }

/* Gợi ý nhỏ cạnh ô "Đồng bộ cuộn": giữ Shift để tạm dừng; đổi màu vàng khi đang tạm dừng */
#fileViewerModal .fv-so-sanh-goiy { font-size: .72rem; color: rgba(255,255,255,.7); white-space: nowrap; }
#fileViewerModal .fv-so-sanh-goiy.dang-tam-dung { color: #ffc107; font-weight: 600; }
#fileViewerModal .fv-so-sanh-ten > .text-truncate { min-width: 0; }

/* Cột trái khung xem tệp: chưa có anchor -> "Tệp đính kèm" liệt kê hết (cuộn nếu quá dài), vùng anchor chỉ vừa dòng thông báo; có anchor -> chia đôi chiều cao 50/50. */
#fileViewerChiTietPane #fileViewerDsTepPane { max-height: none !important; flex: 0 1 auto; min-height: 0; overflow-y: auto; }
#fileViewerChiTietPane:not(.fv-co-anchor) #fileViewerAnchorList { flex: 0 0 auto !important; }
#fileViewerChiTietPane.fv-co-anchor #fileViewerDsTepPane { flex: 1 1 0; }
#fileViewerChiTietPane.fv-co-anchor #fileViewerAnchorList { flex: 1 1 0 !important; min-height: 0; overflow: auto; }

/* Ô tìm kiếm trong từng khung của màn hình so sánh: nền trắng, bo tròn (pill), chữ tối - nổi rõ trên thanh tên tệp xanh nhạt kể cả khi khung xem tệp ở nền tối */
#fileViewerModal .fv-ss-tim input {
  background-color: #fff !important;
  color: #212529 !important;
  border: 1px solid #9db8d6;
  border-radius: 999px;
  padding: .15rem .8rem;
  font-size: .8rem;
  font-weight: 400;
  box-shadow: inset 0 1px 2px rgba(10, 37, 64, .08);
}
#fileViewerModal .fv-ss-tim input::placeholder { color: #8a97a6; }
#fileViewerModal .fv-ss-tim input:focus { border-color: #0d6efd; box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .2); outline: 0; }
#fileViewerModal .fv-ss-tim .btn { border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border-color: #9db8d6; color: #0a3d68; font-size: .65rem; }
#fileViewerModal .fv-ss-tim .btn:hover { background: #e3f0fd; }
#fileViewerModal .fv-ss-tim span { color: #35506b !important; font-weight: 600; }

#fileViewerModal .fv-ss-tim { flex-shrink: 0; }
#fileViewerModal .fv-ss-tim .fv-ss-zoom-nhan { border-radius: 999px; width: 54px !important; min-width: 0; padding: 0 .3rem !important; font-size: .7rem; text-align: center; height: 24px; }

/* So sánh 2 tệp: nút mở/thu gọn danh sách Anchor (mép trái) và Ghi chú tô vàng (mép phải) của từng khung - danh sách là lớp phủ, không đổi bề rộng khung. */
#fileViewerModal .fv-ss-tab { position: absolute; top: 8px; z-index: 6; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #8fb0d3; background: #fff; color: #0a3d68; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.25); padding: 0; font-size: .85rem; }
#fileViewerModal .fv-ss-tab:hover { background: #e3f0fd; }
#fileViewerModal .fv-ss-tab.active { background: #0d5ca6; color: #fff; border-color: #0d5ca6; }
#fileViewerModal .fv-ss-tab-trai { left: 8px; }
#fileViewerModal .fv-ss-tab-phai { right: 20px; }
#fileViewerModal .fv-ss-panel { position: absolute; top: 0; bottom: 0; width: 270px; max-width: 80%; z-index: 5; background: #fff; display: flex; flex-direction: column; box-shadow: 0 0 10px rgba(0,0,0,.3); }
#fileViewerModal .fv-ss-panel-trai { left: 0; border-right: 2px solid #8fb0d3; }
#fileViewerModal .fv-ss-panel-phai { right: 14px; border-left: 2px solid #8fb0d3; }
#fileViewerModal .fv-ss-panel-dau { background: #dbe9f8; color: #0a2540; font-weight: 700; font-size: .85rem; padding: .45rem .5rem; border-bottom: 1px solid #8fb0d3; display: flex; align-items: center; justify-content: space-between; }
#fileViewerModal .fv-ss-panel-trai .fv-ss-panel-dau { padding-left: 44px; }
#fileViewerModal .fv-ss-panel-phai .fv-ss-panel-dau { padding-right: 52px; }
#fileViewerModal .fv-ss-ds { flex: 1 1 auto; overflow-y: auto; }
#fileViewerModal .fv-ss-ds .vbpl-anchor-tay-keo { display: none; }

/* Bảng dạng danh sách: cố định dòng tiêu đề khi cuộn (class .bang-co-dinh trên .table-responsive). Vùng bảng có chiều cao tối đa theo màn hình và tự cuộn (cả ngang lẫn dọc)
   nên position:sticky bám vào chính vùng này (sticky không hoạt động xuyên qua overflow-x của .table-responsive). Dòng tiêu đề thứ 2 trở đi được đặt "top" bằng JS
   (bang-co-dinh.js). Ô góc (cột STT/Tên dự án cố định bên trái) có z-index cao hơn cả tiêu đề thường lẫn ô cố định ở phần thân. */
.table-responsive.bang-co-dinh { max-height: calc(100vh - 70px); overflow: auto; }
.bang-co-dinh > .table > thead > tr > th { position: sticky; top: 0; z-index: 10; background-color: #f8f9fa; background-clip: padding-box; box-shadow: inset 0 -2px 0 #adb5bd; }
.bang-co-dinh > .table > thead > tr > th.col-stt, .bang-co-dinh > .table > thead > tr > th.col-tenduan { z-index: 12; }
/* Đang chụp bảng để xuất PDF: bỏ giới hạn chiều cao để chụp đủ toàn bộ bảng (xem bang-co-dinh.js). */
body.dang-xuat-pdf .table-responsive.bang-co-dinh { max-height: none !important; overflow: visible !important; }
body.dang-xuat-pdf .bang-co-dinh > .table > thead > tr > th { position: static !important; }

/* Tiêu đề chức năng (h4/h3 đầu trang): chữ 1.2rem, bớt khoảng cách quanh tiêu đề để tiết kiệm diện tích. Dòng tiêu đề thường là
   <div class="d-flex ... mb-3"><h4 class="mb-0">…</h4> …nút…</div>; một số trang đặt h4/h3 trực tiếp dưới main. */
.app-main h4.mb-0, .app-main > h4, .app-main > h3 { font-size: 1.2rem; line-height: 1.3; }
.app-main > h4.mb-3, .app-main > h3.mb-3 { margin-bottom: .5rem !important; }
.app-main > div:has(> h4.mb-0) { margin-bottom: .5rem !important; }

/* Menu tài khoản ở góc trên phải: rê chuột vào tên người dùng là hiện menu (màn hình có chuột); thiết bị cảm ứng bấm để mở như dropdown thường. */
.app-user .dropdown-menu { min-width: 12rem; margin-top: 0; }
@media (hover: hover) {
  .app-user:hover > .dropdown-menu { display: block; }
}

/* Theo dõi tiến độ - toàn màn hình (nút ⛶): chỉ còn bảng tiến độ, nền trắng, bảng cao tối đa bằng màn hình. */
#tienDoContent:fullscreen { background: #fff; overflow: auto; padding: .5rem .75rem; }
#tienDoContent:fullscreen .table-responsive.bang-co-dinh { max-height: calc(100vh - 1.5rem); margin-bottom: .5rem !important; }

/* Cột cố định bên trái (STT, Tên dự án ở Kế hoạch / Theo dõi tiến độ): nền xanh nhạt để phân biệt với các cột cuộn ngang; ô tiêu đề đậm hơn một chút. */
.bang-co-dinh > .table > tbody > tr > td.col-stt, .bang-co-dinh > .table > tbody > tr > td.col-tenduan { background-color: #eaf2fb; background-clip: padding-box; }
.bang-co-dinh > .table > thead > tr > th.col-stt, .bang-co-dinh > .table > thead > tr > th.col-tenduan { background-color: #d3e3f6; }
/* Tiêu đề cột của tuần (tháng) hiện tại: tô xanh đậm hơn nền cột (#d6ecff) để nhận ra ngay; phải đặt sau quy tắc nền chung của tiêu đề cố định ở trên (cùng độ ưu tiên thì quy tắc sau thắng). */
.bang-co-dinh > .table > thead > tr > th.col-tuan-hientai, .bang-co-dinh > .table > thead > tr > th.col-thang-hientai { background-color: #8fc4f5; color: #082b4d; font-weight: 700; }

/* Gợi ý chọn bước Vòng đời dự án (vong-doi-goi-y.js): bảng nổi, thụt lề theo cấp, cao tới ~60% màn hình. */
.vd-goiy-panel { display: none; position: fixed; z-index: 3000; background: #fff; border: 1px solid #9db8d6; border-radius: .4rem; box-shadow: 0 8px 24px rgba(0,0,0,.28); overflow-y: auto; padding: .25rem 0; font-size: .85rem; }
.vd-goiy-muc { padding: .22rem .6rem; cursor: pointer; line-height: 1.3; }
.vd-goiy-muc:hover, .vd-goiy-muc.dang-chon { background: #e3f0fd; }
.vd-goiy-goc { font-weight: 600; background: #f3f7fc; }
.vd-goiy-so { color: #6c7a89; font-variant-numeric: tabular-nums; }
.vd-goiy-trong { padding: .5rem .75rem; color: #6c7a89; }

/* Bộ lọc gọn (Danh sách dự án, Kế hoạch, Theo dõi tiến độ): 2 dòng, nút nhỏ lại để vừa 1 dòng trên màn hình thông thường. */
.bo-loc-gon .btn-group > .btn, .bo-loc-gon .btn-group > label.btn { padding: .2rem .45rem; font-size: .8rem; }
.bo-loc-gon .btn.btn-sm { padding: .2rem .5rem; font-size: .8rem; }

/* Bộ lọc gọn: chỉ tăng khoảng cách giữa 2 nhóm toggle button (Hiển thị và Loại dự án) để dễ phân biệt; các control khác giữ nguyên khoảng cách. */
.bo-loc-gon > .col-auto:has(> .btn-group) + .col-auto:has(> .btn-group) { margin-left: 1.25rem; }

/* Menu xổ xuống (vd "Xuất MS Word") nằm trong ô cố định của cột Tên dự án: ô này là 1 stacking context (position: sticky + z-index) nên các ô cố định của dòng bên dưới (cùng z-index, đứng sau trong DOM) che mất phần dưới của menu.
   Khi menu đang mở, nâng z-index của ô chứa nó lên trên các ô cố định khác (vẫn thấp hơn dòng tiêu đề dính). */
.bang-co-dinh td.col-tenduan:has(.dropdown-menu.show), .bang-co-dinh td.col-stt:has(.dropdown-menu.show) { z-index: 8 !important; }

/* Mô tả chi tiết của Công việc (Quill): chiều cao vừa phải, tự cuộn khi dài. */
.cv-mota-quill { background: #fff; font-size: .875rem; }
.cv-mota-quill .ql-editor { min-height: 140px; max-height: 360px; overflow-y: auto; }
.ql-toolbar.ql-snow + .cv-mota-quill { border-top: 0; }

/* Biểu tượng "tệp có ghi chú" màu vàng (cả trong danh sách ngoài trang lẫn danh sách tệp bên trái popup xem tệp). */
.fv-ghichu-inline-badge, .fv-ghichu-inline-badge .fa-e { color: #f2b600; }
.fv-ghichu-inline-badge .fa-e::before { color: #f2b600; }
#fileViewerDsTepList > .list-group-item > .fv-ghichu-inline-badge { flex: 0 0 auto; margin-left: auto; }

/* Bảng nằm trong nhóm (Dự án: kiểu hiển thị theo tỉnh/tháng/...): hiển thị dài hết cỡ, KHÔNG giới hạn chiều cao/cuộn riêng trong từng nhóm - cả trang cuộn 1 lần. */
.table-responsive.bang-co-dinh.bang-co-dinh-dai { max-height: none !important; overflow-y: visible; }

/* Ảnh trong nội dung soạn bằng Quill (ghi chú cá nhân...): không tràn khung, giữ tỉ lệ. */
.quill-editor .ql-editor img, .ql-editor.tl-hien-thi img { max-width: 100%; height: auto; }

/* Khung đổi cỡ ảnh trong editor (xem giaNhapDoiCoAnh trong quill-fields.js). */
.ql-anh-doi-co { position: absolute; z-index: 20; border: 2px solid #0d6efd; pointer-events: none; box-sizing: border-box; }
.ql-anh-goc { position: absolute; width: 11px; height: 11px; background: #0d6efd; border: 2px solid #fff; border-radius: 2px; pointer-events: auto; box-sizing: border-box; }
.ql-anh-goc-nw { left: -7px; top: -7px; cursor: nwse-resize; }
.ql-anh-goc-ne { right: -7px; top: -7px; cursor: nesw-resize; }
.ql-anh-goc-sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.ql-anh-goc-se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.ql-anh-nhan { position: absolute; left: 4px; top: 4px; background: rgba(13,110,253,.9); color: #fff; font-size: 11px; line-height: 1; padding: 2px 5px; border-radius: 3px; pointer-events: none; }
.quill-editor .ql-editor img { cursor: pointer; }

/* Ô chọn có tìm kiếm (select[data-tim-kiem], xem chon-co-tim-kiem.js). */
.cts-bao { position: relative; }
.cts-nut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.cts-khung { position: fixed; z-index: 2000; background: #fff; border: 1px solid #86b7fe; border-radius: .375rem; box-shadow: 0 6px 18px rgba(0,0,0,.15); padding: 6px; min-width: 240px; }
.cts-ds { list-style: none; margin: 6px 0 0; padding: 0; max-height: 280px; overflow-y: auto; }
.cts-nhom { padding: 4px 8px 2px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #6c757d; background: #f8f9fa; position: sticky; top: 0; }
.cts-muc { padding: 4px 10px; font-size: .85rem; cursor: pointer; border-radius: 3px; }
.cts-muc-rong { color: #6c757d; font-style: italic; }
.cts-muc.cts-da-chon { font-weight: 600; }
.cts-muc.cts-active, .cts-muc:hover { background: #e7f1ff; }
.cts-khong-co { padding: 6px 10px; font-size: .85rem; color: #6c757d; }

/* Menu nổi "Thêm vào Công việc / Kế hoạch / Tiến độ" hiện dưới đoạn đang bôi chọn trong editor Ghi chú cá nhân (ghi-chu-them-vao.js). */
.gc-bong { position: absolute; z-index: 40; display: none; align-items: center; gap: 2px; background: #212529; color: #fff; border-radius: 6px; padding: 3px 4px; box-shadow: 0 4px 14px rgba(0,0,0,.3); white-space: nowrap; }
.gc-bong-nhan { font-size: .72rem; opacity: .75; padding: 0 4px; }
.gc-bong button { border: 0; background: transparent; color: #fff; font-size: .78rem; padding: 2px 8px; border-radius: 4px; cursor: pointer; }
.gc-bong button:hover { background: #0d6efd; }

/* Bảng trong nội dung soạn bằng Quill (ghi chú cá nhân...): hiển thị chỉ-đọc ở danh sách/xem lại. */
.ql-editor.tl-hien-thi table { border-collapse: collapse; margin: .3rem 0; table-layout: fixed; max-width: 100%; }
.ql-editor.tl-hien-thi td, .ql-editor.tl-hien-thi th { border: 1px solid #555; padding: 2px 6px; vertical-align: top; word-break: break-word; }
.ql-editor.tl-hien-thi table p { margin: 0; }

/* Tab "Mục lục" của file Word trong màn hình xem tệp (xem fvDungMucLucDocx). */
#fileViewerModal .fv-muc-luc { padding: 2px 0; }
/* Màn hình xem tệp dùng giao diện TỐI: chữ mục lục phải sáng (trước đây #333 trên nền tối nên rất mờ). */
#fileViewerModal .fv-muc-luc-muc { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 4px 8px; font-size: .85rem; line-height: 1.35; color: #f1f1f3; cursor: pointer; white-space: normal; border-left: 3px solid transparent; }
#fileViewerModal .fv-muc-luc-muc:hover { background: rgba(255, 255, 255, .14); color: #fff; }
#fileViewerModal .fv-muc-luc-muc.active { background: rgba(13, 110, 253, .45); border-left-color: #6ea8fe; color: #fff; font-weight: 600; }
#fileViewerModal .fv-muc-luc-goc { font-weight: 700; color: #ffffff; }
#fileViewerModal .fv-muc-luc .text-muted { color: #b5b5ba !important; }

/* Thanh công cụ xem tệp: các nút canh giữa; nút ✕ đóng neo ở mép phải (không làm lệch nhóm nút ở giữa). */
#fileViewerModal .fv-thanh-cong-cu { position: relative; padding-right: 3rem !important; padding-left: 3rem !important; }
#fileViewerModal .fv-thanh-cong-cu .fv-nut-dong-goc { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); }
.cts-muc-moi { color: #146c43; font-weight: 600; background: #f0faf4; border: 1px dashed #8fd3ac; margin-bottom: 3px; }
.cts-muc-moi.cts-active, .cts-muc-moi:hover { background: #d9f2e3; }

/* Kéo chuột để cuộn bảng (keo-cuon-bang.js): con trỏ bàn tay ở bảng có thể cuộn, bàn tay nắm khi đang kéo; trong lúc kéo không chọn chữ. */
.table-responsive.bang-cuon-duoc { cursor: grab; }
.table-responsive.bang-cuon-duoc a, .table-responsive.bang-cuon-duoc button, .table-responsive.bang-cuon-duoc input, .table-responsive.bang-cuon-duoc select, .table-responsive.bang-cuon-duoc textarea, .table-responsive.bang-cuon-duoc label { cursor: pointer; }
.table-responsive.bang-cuon-duoc input[type="text"], .table-responsive.bang-cuon-duoc input[type="number"], .table-responsive.bang-cuon-duoc input[type="date"], .table-responsive.bang-cuon-duoc textarea, .table-responsive.bang-cuon-duoc .ql-editor { cursor: text; }
body.bang-dang-nam, body.bang-dang-nam * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }

/* Khung nhập của editor (Ghi chú nhanh trong màn hình xem tệp) luôn NỀN TRẮNG, chữ tối - dù màn hình xem tệp dùng giao diện tối (ghi đè các quy tắc #fileViewerModal .form-control tối ở trên). */
#fileViewerModal .fv-ghichu-khung .form-control,
#fileViewerModal .fv-ghichu-khung .form-control:focus,
#fileViewerModal .fv-ghichu-khung .ql-toolbar,
#fileViewerModal .fv-ghichu-khung .ql-container,
#fileViewerModal .fv-ghichu-khung .ql-editor { background-color: #ffffff !important; color: #212529 !important; }
#fileViewerModal .fv-ghichu-khung .form-control,
#fileViewerModal .fv-ghichu-khung .ql-toolbar.ql-snow,
#fileViewerModal .fv-ghichu-khung .ql-container.ql-snow { border-color: #c9d3de !important; }
#fileViewerModal .fv-ghichu-khung .form-control::placeholder, #fileViewerModal .fv-ghichu-khung .ql-editor.ql-blank::before { color: rgba(33, 37, 41, .5) !important; }

/* Bảng "tiêu đề dính theo TRANG" (.bang-co-dinh-trang, vd Theo dõi tiến độ): bảng không còn cuộn dọc riêng - cuộn trang thì các thanh công cụ phía trên cuộn đi, chỉ dòng tiêu đề bảng được
   cố định ở mép trên màn hình (bản sao nổi .dau-bang-noi do dau-bang-theo-trang.js dựng, vì vùng cuộn ngang làm position:sticky không bám theo màn hình được). Toàn màn hình thì giữ cách cũ. */
#tienDoContent:not(:fullscreen) .table-responsive.bang-co-dinh.bang-co-dinh-trang { max-height: none !important; }
.dau-bang-noi { position: fixed; top: 0; z-index: 1020; overflow: hidden !important; max-height: none !important; margin: 0 !important; background: #f8f9fa; box-shadow: 0 2px 6px rgba(0,0,0,.18); pointer-events: auto; }
.dau-bang-noi > .table { margin-bottom: 0 !important; table-layout: fixed; }


/* Ứng dụng: ghi chú hiện khi rê chuột vào thẻ (Pages/QuanLyUngDung, Trang chủ > Tiện ích, _UngDungCongKhai) */
.ud-ghichu-pop { display: none; position: absolute; left: 0; top: calc(100% - 4px); z-index: 30; min-width: 240px; max-width: 380px; max-height: 260px; overflow: auto;
    background: #fff; border: 1px solid #c5cbe0; border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); padding: 8px 10px; font-size: .85rem; line-height: 1.45; text-align: left; }
.ud-ghichu-pop .ql-editor.tl-hien-thi { padding: 0; font-size: inherit; line-height: inherit; height: auto; }
.ud-ghichu-pop .ql-editor.tl-hien-thi p, .ud-ghichu-pop .ql-editor.tl-hien-thi li { margin: 0; }
.ud-card-co-ghichu:hover { z-index: 25; }
.ud-card-co-ghichu:hover .ud-ghichu-pop { display: block; }


/* Bảng tính trong editor (wwwroot/js/bang-tinh.js, quill-fields.js): ô công thức hiện kết quả khi con trỏ không nằm trong ô; menu Σ; chip địa chỉ ô */
.ql-editor td[data-kq] { position: relative; }
.ql-editor td[data-kq] p { color: transparent; caret-color: #212529; }
.ql-editor td[data-kq]::after { content: attr(data-kq); position: absolute; left: 6px; top: 50%; transform: translateY(-50%); color: #0b5ed7; font-weight: 600; pointer-events: none; }
.ql-toolbar .ql-bang-tinh { width: auto !important; font-weight: 700; font-size: 1.05rem; padding: 0 6px !important; }
.ql-toolbar .ql-bt-chip { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px; background: #e7f1ff; color: #0b5ed7; font-size: .75rem; vertical-align: middle; }
.ql-bt-menu { display: none; position: fixed; z-index: 2000; min-width: 280px; max-width: 340px; background: #fff; border: 1px solid #c5cbe0; border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); padding: 4px 0; font-size: .85rem; }
.ql-bt-menu .ql-bt-muc { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 5px 12px; cursor: pointer; }
.ql-bt-menu .ql-bt-muc:hover:not(:disabled) { background: #eef2fb; }
.ql-bt-menu .ql-bt-muc:disabled { color: #aaa; cursor: default; }
.ql-bt-menu .ql-bt-tieude { padding: 6px 12px 2px; font-weight: 600; font-size: .78rem; color: #3b4a6b; border-top: 1px solid #e3e6ee; margin-top: 4px; }
.ql-bt-menu .ql-bt-goiy { padding: 6px 12px 4px; font-size: .74rem; color: #6c757d; border-top: 1px solid #e3e6ee; margin-top: 4px; line-height: 1.35; }

/* Nút ? và popup hướng dẫn bảng tính */
.ql-toolbar button.ql-bt-tro-giup { width: 24px; height: 24px; padding: 3px; border: 0; background: none; color: #0b5ed7; cursor: pointer; font-size: 1rem; vertical-align: middle; }
.ql-toolbar button.ql-bt-tro-giup:hover { color: #084298; }
.ql-bt-hd { display: none; position: fixed; inset: 0; z-index: 3000; background: rgba(0, 0, 0, .45); align-items: center; justify-content: center; padding: 16px; }
.ql-bt-hd-hop { background: #fff; border-radius: 8px; width: min(680px, 100%); max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.ql-bt-hd-dau { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid #dee2e6; }
.ql-bt-hd-dong { border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: #666; }
.ql-bt-hd-than { padding: 8px 18px 14px; overflow-y: auto; font-size: .9rem; line-height: 1.5; text-align: left; }
.ql-bt-hd-than h6 { margin: 14px 0 4px; color: #0b5ed7; font-weight: 700; }
.ql-bt-hd-than p { margin: 0 0 6px; }
.ql-bt-hd-than ul { margin: 0 0 6px; padding-left: 20px; }
.ql-bt-hd-than code { background: #f1f3f9; padding: 1px 5px; border-radius: 4px; color: #b02a37; font-size: .85rem; }
.ql-bt-hd-than .ql-bt-chip { display: inline-block; padding: 0 8px; border-radius: 10px; background: #e7f1ff; color: #0b5ed7; font-size: .75rem; }
.ql-bt-hd-bang { border-collapse: collapse; width: 100%; margin-bottom: 6px; }
.ql-bt-hd-bang td { border: 1px solid #dee2e6; padding: 3px 8px; vertical-align: top; }
.ql-bt-hd-bang td:first-child { white-space: nowrap; width: 38%; }

/* Nút Xem trước + popup xem trước nội dung editor */
.ql-toolbar .ql-xem-truoc, .ql-toolbar .ql-ma-nguon { width: auto !important; padding: 0 8px !important; font-size: .8rem; color: #0b5ed7; white-space: nowrap; }
.ql-toolbar .ql-xem-truoc:hover, .ql-toolbar .ql-ma-nguon:hover { color: #084298; }
.ql-xt { display: none; position: fixed; inset: 0; z-index: 3000; background: rgba(0, 0, 0, .45); align-items: center; justify-content: center; padding: 16px; }
.ql-xt-hop { background: #fff; border-radius: 8px; width: min(920px, 100%); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.ql-xt-dau { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid #dee2e6; }
.ql-xt-dong { border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: #666; }
.ql-xt-than { padding: 12px 18px; overflow-y: auto; }
.ql-xt-than .ql-editor.tl-hien-thi { height: auto; padding: 0; overflow: visible; }
.ql-xt-than .ql-ms-noidung { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; white-space: pre; }

/* MÀU CHỮ MENU: Pages/Shared/_Layout.cshtml.css có luật "a { color: #0077cc }" - Razor biên dịch thành a[b-xxxx] (độ ưu tiên 0,1,1) nên THẮNG .menu-doc-sublink (0,1,0) và làm một số mục menu đổi sang xanh.
   Các luật dưới đây có độ ưu tiên cao hơn (0,2,1+) và áp dụng cho cả menu desktop, offcanvas mobile và flyout khi menu thu gọn, ở mọi trạng thái (thường/đã xem/hover/đang chọn). */
.menu-doc a.menu-doc-link, .menu-doc-noidung a.menu-doc-link, .menu-doc-flyout a.menu-doc-link { color: rgba(255, 255, 255, .92); }
.menu-doc a.menu-doc-sublink, .menu-doc-noidung a.menu-doc-sublink, .menu-doc-flyout a.menu-doc-sublink, .menu-doc-offcanvas a.menu-doc-sublink { color: rgba(255, 255, 255, .85); }
.menu-doc a.menu-doc-link:visited, .menu-doc-noidung a.menu-doc-link:visited, .menu-doc-offcanvas a.menu-doc-link:visited { color: rgba(255, 255, 255, .92); }
.menu-doc a.menu-doc-sublink:visited, .menu-doc-noidung a.menu-doc-sublink:visited, .menu-doc-flyout a.menu-doc-sublink:visited, .menu-doc-offcanvas a.menu-doc-sublink:visited { color: rgba(255, 255, 255, .85); }
.menu-doc a.menu-doc-link:hover, .menu-doc a.menu-doc-sublink:hover, .menu-doc a.menu-doc-link.active, .menu-doc a.menu-doc-sublink.active,
.menu-doc-noidung a.menu-doc-link:hover, .menu-doc-noidung a.menu-doc-sublink:hover, .menu-doc-noidung a.menu-doc-link.active, .menu-doc-noidung a.menu-doc-sublink.active,
.menu-doc-flyout a.menu-doc-sublink:hover, .menu-doc-flyout a.menu-doc-sublink.active,
.menu-doc a.menu-doc-link:focus, .menu-doc a.menu-doc-sublink:focus, .menu-doc-noidung a.menu-doc-link:focus, .menu-doc-noidung a.menu-doc-sublink:focus { color: #fff; }

/* Xem trực tiếp tệp Excel trong khung xem tệp (wwwroot/js/file-viewer.js: fvVeExcel) */
.fv-xlsx { background: #fff; color: #212529; min-height: 100%; display: flex; flex-direction: column; }
.fv-xlsx-thanh { display: flex; gap: 4px; flex-wrap: wrap; padding: 6px 8px; background: #f1f3f9; border-bottom: 1px solid #cfd5e6; position: sticky; top: 0; z-index: 5; }
.fv-xlsx-tab { border: 1px solid #c3cae0; background: #fff; border-radius: 4px 4px 0 0; padding: 3px 12px; font-size: .82rem; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.fv-xlsx-tab.active { background: #0b5ed7; border-color: #0b5ed7; color: #fff; font-weight: 600; }
.fv-xlsx-vung { padding: 0 0 12px; }   /* không tự cuộn riêng: khung xem tệp cuộn chung nên tiêu đề cột/dòng dính theo khung đó */
.fv-xlsx-bang { border-collapse: collapse; font-size: .82rem; table-layout: fixed; }
.fv-xlsx-bang td { border: 1px solid #d5dae8; padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: clip; vertical-align: bottom; height: 22px; }
.fv-xlsx-bang th { background: #eceff7; border: 1px solid #c3cae0; font-weight: 600; font-size: .74rem; color: #55607a; text-align: center; padding: 1px 4px; position: sticky; z-index: 3; }
.fv-xlsx-bang thead th { top: 38px; }   /* ngay dưới thanh trang tính */
.fv-xlsx-bang tbody th.fv-xlsx-dong { left: 0; z-index: 2; }
.fv-xlsx-bang thead th.fv-xlsx-goc { left: 0; z-index: 4; }
.fv-xlsx-so { text-align: right; }
.fv-xlsx-giua { text-align: center; }
.fv-xlsx-canh-bao { background: #fff3cd; color: #664d03; font-size: .8rem; padding: 4px 10px; }

/* Nội dung soạn bằng editor đầy đủ hiển thị trong ô danh sách (Trích yếu văn bản, Ghi chú nhắc nhở) */
.vbpl-trichyeu .ql-editor.tl-hien-thi, .nn-ghichu .ql-editor.tl-hien-thi { padding: 0; height: auto; overflow: visible; font-size: inherit; line-height: inherit; }
.vbpl-trichyeu .ql-editor.tl-hien-thi p, .nn-ghichu .ql-editor.tl-hien-thi p { margin: 0 0 .25rem; }
.vbpl-trichyeu img, .nn-ghichu img { max-width: 100%; height: auto; }

/* Nhãn chọn font chữ của editor cơ bản (window.taoQuillCoBan, quill-fields.js) */
.ql-snow .ql-picker.ql-font { width: 140px; }
.ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before { content: 'Font mặc định'; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before { content: 'Arial'; font-family: Arial; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times New Roman"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times New Roman"]::before { content: 'Times New Roman'; font-family: 'Times New Roman'; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Tahoma"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Tahoma"]::before { content: 'Tahoma'; font-family: Tahoma; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Verdana"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Verdana"]::before { content: 'Verdana'; font-family: Verdana; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Courier New"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Courier New"]::before { content: 'Courier New'; font-family: 'Courier New'; }

/* Liên kết trong nội dung tệp xem (file-viewer.js: vbplAnchor, "Liên kết"): kiểu liên kết quen thuộc trên web - chữ xanh, gạch dưới; bấm mở tệp đích ở thẻ mới.
   Tệp PDF: chữ thật nằm ở ảnh (canvas) bên dưới còn lớp chữ trong suốt (để bôi đen được) nên không đổi màu chữ được - dùng gạch dưới xanh đậm + nền xanh nhạt để nổi bật. */
a.lienket-mark, a.lienket-mark:visited { color: #0645ad !important; text-decoration: underline !important; text-decoration-color: #0645ad !important; text-decoration-thickness: 2px; text-underline-offset: 2px; background: rgba(6, 69, 173, .08); border-radius: 2px; cursor: pointer; }
/* Chữ bên trong cũng ép cùng màu (tệp Word có thể đã đặt màu/kiểu riêng cho từng đoạn chữ - vd chữ xanh nhạt/xanh ngọc khó đọc trên nền trắng) */
a.lienket-mark *, a.lienket-mark:visited * { color: #0645ad !important; text-decoration: inherit !important; background: transparent !important; }
a.lienket-mark:hover, a.lienket-mark:hover * { color: #0645ad !important; }
a.lienket-mark:hover { text-decoration-color: #0645ad !important; background: rgba(6, 69, 173, .18); }
/* PDF: lớp chữ của PDF.js (.textLayer) bị làm mờ (opacity 0.25) nên link trong đó chỉ dùng để bấm/rê chuột (chữ trong suốt); màu chữ #0645ad thật được vẽ ở lớp phủ .lienket-lop (file-viewer.js: veLopLienKetPdf) */
.textLayer a.lienket-mark, .textLayer a.lienket-mark:visited, #fileViewerModal .vbpl-pdf-trang .textLayer a.lienket-mark, #fileViewerModal .vbpl-pdf-trang .textLayer a.lienket-mark:visited,
.textLayer a.lienket-mark *, #fileViewerModal .vbpl-pdf-trang .textLayer a.lienket-mark * { color: transparent !important; background: transparent; text-decoration: none !important; border: 0; border-radius: 0; }
.textLayer a.lienket-mark:hover, #fileViewerModal .vbpl-pdf-trang .textLayer a.lienket-mark:hover { background: rgba(6, 69, 173, .45); color: transparent !important; }
.vbpl-pdf-trang .lienket-lop { position: absolute; inset: 0; pointer-events: none; user-select: none; z-index: 3; overflow: hidden; line-height: 1; }
.lienket-lop > span { position: absolute; white-space: pre; transform-origin: 0% 0%; color: transparent; }
.lienket-lop .lk-p::before, .lienket-lop .lk-l::before { content: attr(data-t); }
.lienket-lop .lk-p::before { visibility: hidden; }
.lienket-lop .lk-l::before { color: #0645ad; background: #fff; text-decoration: underline; text-decoration-color: #0645ad; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Biểu tượng 🔗 cạnh tên tệp có liên kết (file-viewer.js: fvGanBieuTuongLienKet) - đi cặp với 📝 ghi chú */
.fv-lienket-inline-badge, .fv-lienket-inline-badge .fa-e, .fv-lienket-inline-badge .fa-e::before { color: #0b5ed7; }
.fv-lienket-inline-badge { display: inline-block; margin-left: 4px; font-size: 12px; line-height: 1; vertical-align: middle; cursor: help; }
#fileViewerDsTepList > .list-group-item > .fv-lienket-inline-badge { flex: 0 0 auto; margin-left: .25rem; }
.fv-hoidap-inline-badge, .fv-hoidap-inline-badge .fa-e, .fv-hoidap-inline-badge .fa-e::before { color: #198754; }
.fv-hoidap-inline-badge { display: inline-block; margin-left: 4px; font-size: 12px; line-height: 1; vertical-align: middle; cursor: help; }
#fileViewerDsTepList > .list-group-item > .fv-hoidap-inline-badge { flex: 0 0 auto; margin-left: .25rem; }

/* Tab "🔗 Link" (cột phải popup xem tệp): đoạn chữ + tên tệp đích; nháy viền khi nhảy tới liên kết */
.lienket-dich { color: #8ab4f8; text-decoration: underline; font-size: .78rem; }   /* cột phải nền tối: xanh sáng (màu #0645ad chỉ dùng cho link TRONG NỘI DUNG tệp) */
.lienket-dich:hover { color: #d2e3fc; }
/* Trong cửa sổ xem tệp, quy tắc chữ-link-sáng cho nền tối (#fileViewerModal a:not(.btn) ...) có id + !important nên thắng các quy tắc trên: đặt lại đúng màu #0645ad cho link nằm trong NỘI DUNG tệp (khung chữ nền trắng) */
#fileViewerModal a.lienket-mark, #fileViewerModal a.lienket-mark:visited, #fileViewerModal a.lienket-mark:hover,
#fileViewerModal a.lienket-mark *, #fileViewerModal a.lienket-mark:hover * { color: #0645ad !important; }
#fileViewerModal a.lienket-mark:not(.btn), #fileViewerModal a.lienket-mark:not(.btn):hover { color: #0645ad !important; }
a.lienket-mark.lienket-chop { outline: 3px solid #ffc107; outline-offset: 1px; transition: outline-color .3s; }

/* Màu link theo NỀN: trong nội dung tệp (nền trắng) dùng xanh đậm #0645ad; ở các cột/danh sách của popup xem tệp (giao diện nền tối) dùng xanh sáng để đủ tương phản */
#fileViewerModal .fv-side-pane .fv-hoidap-inline-badge, #fileViewerModal .fv-side-pane .fv-hoidap-inline-badge .fa-e, #fileViewerModal .fv-side-pane .fv-hoidap-inline-badge .fa-e::before { color: #75b798; }
#fileViewerModal .fv-side-pane .lienket-dich { color: #8ab4f8; }
#fileViewerModal .fv-side-pane .lienket-dich:hover { color: #d2e3fc; }
#fileViewerModal .fv-side-pane .fv-lienket-inline-badge, #fileViewerModal .fv-side-pane .fv-lienket-inline-badge .fa-e, #fileViewerModal .fv-side-pane .fv-lienket-inline-badge .fa-e::before { color: #8ab4f8; }

/* Thêm/Sửa dự án: cột phải gom Nguồn vốn, Phân loại, Phương án thiết kế, Loại dự án */
@media (min-width: 992px) { .duan-cot-phai { border-left: 1px solid var(--bs-border-color, #dee2e6); padding-left: 1rem; } }

/* Quill: ẩn placeholder ngay khi đang soạn chữ bằng bộ gõ (xem compositionstart trong site.js) */
.ql-editor.ql-dang-go::before { display: none !important; }