@font-face {
  font-family: "Roboto";
  src: url("../font/Roboto-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../font/Roboto-Italic-VariableFont_wdth,wght.ttf")
    format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}

:root {
  --brand: #1267f1;
  --brand-dark: #0d3f94;
  --text: #132448;
  --muted: #687793;
  --soft: #f3f6fb;
  --line: #dde6f3;
  --card: #ffffff;
  --shadow: 0 18px 45px rgba(26, 43, 79, 0.08);
  --radius: 20px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: #f4f6fa;
  color: var(--text);
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial,
    sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

.pageShell {
  width: min(92vw, 1660px);
  margin: 0 auto;
  padding: 12px 0 44px;
}

.siteHeader {
  display: grid;
  grid-template-columns: auto minmax(320px, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 0;
  padding: 10px 18px;
}

.brandBlock {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.brandIcon {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brandIcon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.brandText strong {
  display: block;
  color: var(--brand);
  font-size: clamp(16px, 1.25vw, 23px);
  font-weight: 720;
  line-height: 1.12;
  text-transform: uppercase;
}

.brandText strong span {
  display: block;
}

.noticeBar {
  width: min(557px, 100%);
  height: 37px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-self: end;
  gap: 8px;
  min-width: 0;
  padding: 0 6px 0 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: none;
  overflow: hidden;
}

.noticeLabel {
  height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 0;
  border-radius: 999px;
  color: var(--brand);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
}

.noticeIcon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-size: 14px;
}

.noticeTrack {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* Nội dung được lặp 2 lần (.noticeGroup), chạy đúng nửa chiều rộng rồi lặp lại
   liền mạch. Thời lượng do JS đặt theo chiều rộng thực (updateTickerSpeed) để tốc
   độ luôn cố định, không phụ thuộc số chữ hay lúc font vừa tải xong. */
.noticeInner {
  display: inline-flex;
  align-items: center;
  width: max-content;
}

.noticeInner.isScrolling {
  animation: marquee var(--ticker-duration, 120s) linear infinite;
}

.noticeGroup {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 30px;
  padding-right: 30px;
}

.noticeTrack:hover .noticeInner {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .noticeInner.isScrolling {
    animation-duration: calc(var(--ticker-duration, 120s) * 2);
  }
}

.noticeItem {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #1d3157;
  font-size: 12px;
  font-weight: 400;
}

.noticeItem::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(18, 103, 241, 0.1);
}

.noticeItem.noticeLuat::before {
  background: #1267f1;
  box-shadow: 0 0 0 4px rgba(18, 103, 241, 0.1);
}

.noticeItem.noticeNghiDinh::before {
  background: #7c3aed;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}

.noticeItem.noticeThongTu::before {
  background: #16a34a;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
}

.mainMenu {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  padding: 0 18px;
  color: var(--brand);
}

/* Căn giữa bằng margin auto thay cho justify-content: center, để khi menu tràn
   vẫn cuộn được tới mục đầu tiên thay vì bị cắt cả hai đầu. */
.menuLinks {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  min-width: 0;
  max-width: 100%;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 200);
  border-radius: 27px;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0 14px 34px rgba(31, 44, 68, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow-x: auto;
}

.menuLinks a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 999px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease;
}

.menuLinks a:first-child {
  margin-left: auto;
}

.menuLinks a:last-child {
  margin-right: auto;
}

.menuLinks a i {
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
}

@media (hover: hover) {
  .menuLinks a:hover {
    color: #fff;
    background: var(--brand);
  }
}

.menuToggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--brand);
  background: #fff;
  box-shadow: 0 8px 20px rgba(31, 44, 68, 0.06);
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.menuToggle i {
  font-size: 24px;
  line-height: 1;
}

.menuToggle[aria-expanded="true"] {
  color: #fff;
  border-color: var(--brand);
  background: var(--brand);
}

.menuClock {
  justify-self: end;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-align: right;
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.clockStack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  line-height: 1.15;
}

#currentTime {
  color: var(--brand);
  font-size: 19px;
}

#currentDate {
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.searchWrap {
  width: min(470px, 100%);
  margin: 0 0 0 auto;
  position: relative;
  flex: 0 1 470px;
}

.searchWrap i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #6d7b98;
}

.searchWrap .ti-search {
  left: 18px;
  font-size: 22px;
}

.clearSearch {
  right: 16px;
  display: none;
  font-size: 20px;
  cursor: pointer;
  z-index: 2;
}

.searchWrap input {
  width: 100%;
  height: 48px;
  padding: 0 50px 0 54px;
  border: 1px solid #6fa5ff;
  border-radius: 999px;
  outline: 0;
  color: #1d3157;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: none;
  font-size: 14px;
  font-weight: 400;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.searchWrap input:focus {
  border-color: var(--brand);
  box-shadow: none;
}

.searchPrompt {
  position: absolute;
  top: 50%;
  left: 54px;
  right: 50px;
  height: 20px;
  transform: translateY(-50%);
  color: #4d6fa6;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.searchPrompt span {
  position: absolute;
  inset: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  animation: searchPromptFade 7s ease-in-out infinite;
}

.searchPrompt span:last-child {
  opacity: 0;
  animation-delay: 3.5s;
}

.searchWrap:focus-within .searchPrompt,
.searchWrap.hasValue .searchPrompt {
  opacity: 0;
}

@keyframes searchPromptFade {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }

  10%,
  42% {
    opacity: 1;
    transform: translateY(0);
  }

  50%,
  92% {
    opacity: 0;
    transform: translateY(-12px);
  }

  100% {
    opacity: 0;
    transform: translateY(12px);
  }
}

.statsGrid {
  --stat-columns: 5;
  display: grid;
  grid-template-columns: repeat(var(--stat-columns), minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 28px;
}

.statsGrid.withInternal {
  --stat-columns: 6;
}

.statCard {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border: 0;
  border-radius: var(--radius);
  background: var(--card-gradient);
  box-shadow: 0 10px 25px rgba(30, 48, 82, 0.08);
  cursor: pointer;
  text-align: left;
  transform: translateZ(0);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

@media (hover: hover) {
  .statCard:hover {
    transform: scale(1.025);
    box-shadow: 0 18px 38px rgba(30, 48, 82, 0.14);
  }
}

.statCard.active {
  box-shadow: 0 10px 25px rgba(30, 48, 82, 0.08);
}

.statMain {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.statIcon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  font-size: 34px;
  line-height: 1;
}

.statIcon svg {
  width: 24px;
  height: 24px;
  line-height: 1;
  stroke-width: 1.55;
}

.statCard strong {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 650;
}

.statMain > span:not(.statIcon) > span {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
}

.statCard .statChevron {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  color: #fff;
  stroke-width: 1.75;
}

.stat-blue {
  --accent: #1267f1;
  --card-gradient: linear-gradient(135deg, #1f7bff 0%, #0b4bc2 100%);
}

.stat-purple {
  --accent: #8a3ffc;
  --card-gradient: linear-gradient(135deg, #9b5cff 0%, #5b21b6 100%);
}

.stat-green {
  --accent: #129447;
  --card-gradient: linear-gradient(135deg, #22c55e 0%, #047857 100%);
}

.stat-orange {
  --accent: #f97316;
  --card-gradient: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
}

.stat-rose {
  --accent: #ff334e;
  --card-gradient: linear-gradient(135deg, #fb7185 0%, #dc2626 100%);
}

.stat-teal {
  --accent: #0f766e;
  --card-gradient: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
}

.mainGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 22px;
  align-items: start;
}

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.panelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px 26px;
  border-bottom: 1px solid var(--line);
}

.panelHeader h1,
.panelHeader h2 {
  margin: 0;
  color: var(--brand);
  font-size: 20px;
  font-weight: 750;
  text-transform: uppercase;
}

.panelHeader h1 {
  font-size: 23px;
}

.tabs {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 0 26px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.tabBtn {
  min-height: 58px;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 0;
  color: #263b61;
  background: transparent;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.tabBtn.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

@media (hover: hover) {
  .tabBtn:hover {
    color: var(--brand);
    border-bottom-color: var(--brand);
  }
}

.tabBtn i {
  margin-right: 6px;
  font-size: 15px;
  vertical-align: -1px;
}

.docList {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.docCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  padding: 18px 22px;
  border: 1px solid #dfe7f3;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 10px 25px rgba(28, 45, 81, 0.045);
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.docCard.activeRow {
  transform: translateY(-2px) scale(1.012);
  border-color: #9fc2ff;
  box-shadow: 0 18px 40px rgba(28, 45, 81, 0.1);
}

@media (hover: hover) {
  .docCard:hover {
    transform: translateY(-2px) scale(1.012);
    border-color: #9fc2ff;
    box-shadow: 0 18px 40px rgba(28, 45, 81, 0.1);
  }
}

.docTitleRow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 15px;
}

.docNumber {
  display: block;
  margin-bottom: 8px;
  color: #9aa5b5;
  font-size: 12px;
  font-weight: 500;
}

.docTitle {
  margin: 0;
  color: #172a52;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}

.docActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.docActions:empty {
  display: none;
}

.docAction {
  height: 35px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid #dce5f1;
  border-radius: var(--radius);
  color: #676767;
  background: #fff;
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

@media (hover: hover) {
  .docAction:hover {
    border-color: #9fc2ff;
    color: var(--brand);
    background: #f8fbff;
  }
}

/* Cột thông tin co theo nội dung (nhãn | giá trị), để tiêu đề chiếm phần còn lại */
.docMeta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 5px 14px;
  align-content: center;
  align-items: center;
  /* Rộng cố định để cột thông tin thẳng hàng giữa các thẻ; giá trị căn phải sát mép thẻ. */
  width: 290px;
  color: #263b61;
  font-size: 13px;
}

.metaLine {
  display: contents;
}

.metaLine > span:first-child {
  color: #676767;
  font-weight: 400;
}

.metaLine > span:first-child::after {
  content: ":";
}

.metaLine > span:last-child {
  font-weight: 450;
  text-align: right;
  overflow-wrap: anywhere;
}

.status-ok,
.status-edit,
.status-x,
.status-empty {
  display: inline-flex;
  justify-self: end;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
}

.status-ok {
  color: #22c55e;
  background: #dcfce7;
  border-color: #22c55e;
}

.status-edit {
  color: #f97316;
  background: #ffedd5;
  border-color: #f97316;
}

.status-x {
  color: #ef4444;
  background: #fee2e2;
  border-color: #ef4444;
}

.status-empty {
  color: #334155;
  background: #e2e8f0;
  border-color: #cbd5e1;
}

.tableFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 26px 18px;
}

.pageInfo {
  color: #63718d;
  font-size: 14px;
  font-weight: 600;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pageBtn {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dbe4f1;
  border-radius: var(--radius);
  color: #3f4f6c;
  background: #fff;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.pageBtn.active {
  border-color: var(--brand);
  color: #fff;
  background: var(--brand);
}

@media (hover: hover) {
  .pageBtn:hover {
    border-color: var(--brand);
    color: #fff;
    background: var(--brand);
  }
}

.pageSize {
  height: 34px;
  border: 1px solid #dbe4f1;
  border-radius: var(--radius);
  padding: 0 10px;
  color: #253a61;
  background: #fff;
  font-size: 13px;
  font-weight: 750;
}

.sideStack {
  display: grid;
  gap: 22px;
}

.sidePanel {
  padding-bottom: 16px;
}

.sidePanel .panelHeader {
  padding: 20px 22px 12px;
  border-bottom: 0;
}

.sidePanel .panelHeader h2 {
  font-size: 19px;
}

.compactList {
  display: grid;
  gap: 15px;
  padding: 0 22px;
}

.compactItem {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: start;
  color: #192d55;
  cursor: pointer;
}

.compactIndex {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--rank-color, var(--brand));
  background: var(--rank-bg, #e8f1ff);
  font-size: 13px;
  font-weight: 850;
}

.compactItem:nth-child(2) {
  --rank-color: #129447;
  --rank-bg: #e6f8ee;
}

.compactItem:nth-child(3) {
  --rank-color: #f97316;
  --rank-bg: #ffeddf;
}

.compactItem:nth-child(4) {
  --rank-color: #1267f1;
  --rank-bg: #e8f1ff;
}

.compactItem.latestLuat {
  --rank-color: #1267f1;
  --rank-bg: #e8f1ff;
}

.compactItem.latestNghiDinh {
  --rank-color: #7c3aed;
  --rank-bg: #ede9fe;
}

.compactItem.latestThongTu {
  --rank-color: #16a34a;
  --rank-bg: #e6f8ee;
}

.compactText strong {
  display: block;
  font-size: 14px;
  line-height: 1.35;
}

.compactText span {
  display: -webkit-box;
  margin-top: 6px;
  overflow: hidden;
  color: #3c4e6d;
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.compactDate {
  color: #65748f;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

/* ---------- Mã QR mở trang trên điện thoại ---------- */

.qrBody {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 22px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #eaf2ff, #f6f9ff);
}

/* Nền trắng quanh mã là "vùng yên tĩnh" giúp camera nhận mã nhanh hơn. */
.qrFrame {
  flex: 0 0 auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(26, 43, 79, 0.08);
}

/* pixelated: phóng/thu ảnh mà cạnh ô mã vẫn sắc nét, không bị nhòe. */
.qrFrame img {
  display: block;
  width: 124px;
  height: 124px;
  image-rendering: pixelated;
}

.qrText {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.qrText strong {
  color: #192d55;
  font-size: 14.5px;
  line-height: 1.35;
}

.qrHint {
  color: #3c4e6d;
  font-size: 13px;
  line-height: 1.5;
}

/* Thiếu chỗ thì xuống dòng ở dấu chấm (thẻ <wbr> trong HTML), không cắt giữa tên miền. */
.qrLink {
  justify-self: start;
  max-width: 100%;
  margin-top: 2px;
  padding: 3px 10px;
  border-radius: 10px;
  color: var(--brand);
  background: #fff;
  font-size: 12.5px;
  font-weight: 650;
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: #e7edf6;
  border-radius: var(--radius);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0 0 0 -100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.65),
    transparent
  );
  animation: skeleton-loading 1.2s infinite;
}

@keyframes skeleton-loading {
  100% {
    left: 100%;
  }
}

.skeletonCard {
  min-height: 126px;
}

.noData {
  min-height: 220px;
  display: grid;
  place-items: center;
  gap: 8px;
  color: #66758f;
  font-weight: 700;
  text-align: center;
}

.noData i {
  color: var(--brand);
  font-size: 34px;
}

/* ---------- Hộp Giới thiệu ---------- */

.aboutModal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(19, 36, 72, 0.34);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.aboutModal.open {
  opacity: 1;
  pointer-events: auto;
}

.aboutDialog {
  position: relative;
  width: min(820px, 100%);
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(23, 42, 82, 0.2);
  overflow: hidden;
  outline: 0;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.aboutModal.open .aboutDialog {
  opacity: 1;
  transform: none;
}

.aboutClose {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.aboutClose i {
  font-size: 20px;
}

.aboutScroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 34px 26px;
}

/* Header đứng yên, chỉ phần nội dung bên dưới cuộn. */
.aboutHero {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 20px 18px 34px;
  border-bottom: 1px solid var(--line);
}

.aboutHeroText {
  flex: 1 1 auto;
  min-width: 0;
}

.aboutHero img {
  flex: 0 0 auto;
  object-fit: contain;
}

.aboutEyebrow {
  display: block;
  color: var(--brand);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aboutHero h2 {
  margin: 2px 0 0;
  color: #172a52;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
}

.aboutSection {
  margin-top: 22px;
}

.aboutSection h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: #172a52;
  font-size: 15px;
  font-weight: 750;
}

.aboutSectionIcon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--brand);
  background: #e8f1ff;
  font-size: 18px;
}

.aboutSection p {
  margin: 0 0 8px;
  color: #3f5074;
  font-size: 14.5px;
  line-height: 1.65;
}

.aboutSources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.aboutSources li {
  min-width: 0;
  padding-left: 12px;
  border-left: 2px solid var(--line);
}

.aboutSources a {
  display: block;
  color: var(--brand);
  font-size: 14px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.aboutSources span {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
}

.aboutDisclaimer {
  padding: 18px 20px;
  border: 1px solid #fcdcae;
  border-radius: 16px;
  background: #fff8ec;
}

.aboutSection.aboutDisclaimer h3 {
  color: #7c2d12;
}

.aboutDisclaimer .aboutSectionIcon {
  color: #ea580c;
  background: #ffedd5;
}

.aboutDisclaimer ul {
  margin: 0;
  padding-left: 20px;
  color: #5f4631;
  font-size: 14px;
  line-height: 1.6;
}

.aboutDisclaimer li + li {
  margin-top: 6px;
}

.aboutDisclaimer li::marker {
  color: #ea580c;
}

.aboutDisclaimer strong {
  color: #7c2d12;
}

.aboutSection p strong {
  color: #172a52;
  font-weight: 650;
}

.aboutCopy {
  margin: 26px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: #97a3b8;
  font-size: 12.5px;
  text-align: center;
}

.contactDialog {
  width: min(560px, 100%);
}

.contactList {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.contactList li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcff;
}

.contactIcon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: var(--brand);
  font-size: 21px;
}

.contactText {
  flex: 1 1 auto;
  min-width: 0;
}

.contactText span {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
}

.contactText strong {
  display: block;
  color: #172a52;
  font-size: 16px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.contactAction {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--brand);
  background: #e8f1ff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.18s ease;
}

.contactAction i {
  font-size: 16px;
}

.linksDialog {
  width: min(640px, 100%);
}

.linksIntro {
  margin: 20px 0 0;
  color: #3f5074;
  font-size: 14px;
  line-height: 1.6;
}

.linkList {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cả thẻ là một liên kết; mũi tên góc phải báo hiệu mở trang ngoài. */
.linkCard {
  position: relative;
  display: block;
  padding: 13px 44px 13px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcff;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.linkCard:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.linkCard strong {
  display: block;
  color: #172a52;
  font-size: 15px;
  font-weight: 750;
}

.linkDomain {
  display: block;
  margin-top: 1px;
  color: var(--brand);
  font-size: 12.5px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.linkDesc {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.linkArrow {
  position: absolute;
  top: 13px;
  right: 14px;
  color: var(--muted);
  font-size: 18px;
  transition: color 0.18s ease, transform 0.18s ease;
}

@media (hover: hover) {
  .contactAction:hover {
    background: #d6e6ff;
  }

  .aboutClose:hover {
    color: #172a52;
    background: var(--soft);
  }

  .aboutSources a:hover {
    text-decoration: underline;
  }

  .linkCard:hover {
    border-color: #b9d1fb;
    background: #f2f7ff;
  }

  .linkCard:hover .linkArrow {
    color: var(--brand);
    transform: translate(2px, -2px);
  }
}

.securityModal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(19, 36, 72, 0.34);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.securityModal.open {
  opacity: 1;
  pointer-events: auto;
}

.securityDialog {
  position: relative;
  width: min(390px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 20px;
  padding: 22px 30px 24px;
  background: rgba(255, 255, 255);
  box-shadow: 0 24px 70px rgba(23, 42, 82, 0.24);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.22s ease, opacity 0.22s ease;
  opacity: 0;
  text-align: center;
}

.securityModal.open .securityDialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.securityDialog h2 {
  margin: 12px 0 0;
  color: #172a52;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.34;
}

.securityDialog p {
  margin: 0;
  color: #687793;
  font-size: 15px;
  font-weight: 700;
}

.securityClose {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  color: #172a52;
  background: #fff;
  cursor: pointer;
}

.securityClose i {
  font-size: 22px;
}

.securityIcon {
  width: 52px;
  height: 52px;
  margin: 0 auto;
  display: grid;
  place-items: center;
}

.securityIcon::before {
  content: none;
}

.securityIcon::after {
  content: none;
}

.securityIconCore {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #116cff;
}

.securityIconCore i {
  font-size: 28px;
}

.loginForm {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.loginField {
  position: relative;
  display: block;
}

.loginField i {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: #7597c8;
  font-size: 19px;
  pointer-events: none;
}

.loginField input {
  width: 100%;
  height: 48px;
  padding: 0 14px 0 42px;
  border: 1px solid #d8e2f3;
  border-radius: 10px;
  color: var(--text);
  background: #fff;
  font: inherit;
  font-size: 15px;
  outline: 0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.loginField input:focus {
  border-color: #0b63f6;
  box-shadow: 0 0 0 3px rgba(17, 108, 255, 0.12);
}

.loginSubmit {
  height: 48px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: #116cff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s ease;
}

.loginSubmit:hover {
  background: var(--brand-dark);
}

.loginForm :disabled {
  opacity: 0.65;
  cursor: wait;
}

.securityHint {
  width: calc(100% + 30px);
  margin-top: 16px;
  margin-left: -15px;
  color: #6a7893;
  font-size: 14px;
}

.securityHint i {
  color: #7597c8;
  font-size: 16px;
  margin-right: 4px;
}

.securityError {
  min-height: 18px;
  margin-top: 8px;
  color: #dc2626;
  font-size: 13px;
  font-weight: 400;
  overflow: hidden;
}

.securityError.success {
  color: #166534;
}

.securityError.reveal {
  animation: securityStatusReveal 0.34s ease-out both;
}

@keyframes securityStatusReveal {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0.2;
  }

  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

/* ---------- Trình xem văn bản ---------- */

.viewerModal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(9, 19, 38, 0.58);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.viewerModal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.2s ease;
}

.viewerDialog {
  width: min(1200px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
  outline: none;
  transform: translateY(12px) scale(0.985);
  transition: transform 0.22s ease;
}

.viewerModal.open .viewerDialog {
  transform: none;
}

.viewerDialog:fullscreen {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

/* Một thanh duy nhất phía trên văn bản: tên | chọn bản, tìm kiếm, công cụ | toàn màn hình, đóng. */
.viewerHeader {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px 14px;
  padding: 7px 10px 7px 18px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

/* Khối tiêu đề: biểu tượng tài liệu | tên văn bản (một dòng) và bên dưới là số hiệu · trạng thái. */
.viewerHeading {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 180px;
  cursor: default;
}

.viewerHeading.expanded {
  align-items: flex-start;
}

.viewerDocIcon {
  width: 38px;
  height: 38px;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  border-radius: 11px;
  color: var(--brand);
  background: linear-gradient(135deg, #e8f0ff, #d6e4fd);
  box-shadow: inset 0 0 0 1px rgba(18, 103, 241, 0.12);
  font-size: 20px;
}

.viewerHeadingText {
  flex: 1 1 auto;
  min-width: 0;
}

/* Tên văn bản giữ một dòng; rê chuột (thuộc tính title) hoặc bấm vào để xem đầy đủ. */
.viewerHeading h2 {
  margin: 0;
  overflow: hidden;
  color: #172a52;
  font-size: 15px;
  font-weight: 700;
  line-height: 21px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.viewerHeading.expanded h2 {
  white-space: normal;
}

.viewerMeta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 1px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.viewerNumber {
  min-width: 0;
  overflow: hidden;
  color: #50607e;
  font-weight: 600;
  text-overflow: ellipsis;
}

/* Trạng thái dạng chấm màu + chữ, nhẹ hơn nhãn viền trên thẻ văn bản. */
.viewerMeta .status-ok,
.viewerMeta .status-edit,
.viewerMeta .status-x,
.viewerMeta .status-empty {
  flex-shrink: 0;
  gap: 5px;
  min-height: 0;
  padding: 0 0 0 9px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: none;
  font-size: 12px;
  font-weight: 600;
}

.viewerMeta [class^="status-"]::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
}

.viewerMeta .status-ok {
  color: #16a34a;
}

.viewerMeta .status-edit {
  color: #ea580c;
}

.viewerMeta .status-x {
  color: #dc2626;
}

.viewerMeta .status-empty {
  color: var(--muted);
}

.viewerToolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.viewerHeaderActions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  padding-left: 8px;
  border-left: 1px solid var(--line);
}

.viewerIconBtn {
  width: 36px;
  height: 36px;
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  border: 0;
  border-radius: 10px;
  color: #50607e;
  background: transparent;
  font-size: 19px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.viewerTabs {
  display: inline-flex;
  flex-shrink: 0;
  gap: 2px;
  padding: 2px;
  border-radius: 11px;
  background: #eef2f8;
}

.viewerTab {
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 11px;
  border: 0;
  border-radius: 9px;
  color: #50607e;
  background: transparent;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.viewerTab i {
  font-size: 17px;
}

.viewerTab.active {
  color: var(--brand);
  background: #fff;
  box-shadow: 0 1px 2px rgba(19, 36, 72, 0.12), 0 3px 10px rgba(19, 36, 72, 0.06);
}

.viewerSearch {
  flex: 0 1 250px;
  min-width: 150px;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 3px 0 10px;
  border: 1px solid #d5deec;
  border-radius: 10px;
  background: #f8fafd;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.viewerSearch:focus-within {
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(18, 103, 241, 0.14);
}

.viewerSearch > i {
  margin-right: 4px;
  color: #8a97ad;
  font-size: 16px;
}

.viewerSearch input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  color: var(--text);
  background: transparent;
  font-size: 13.5px;
  text-overflow: ellipsis;
}

.viewerSearch input::placeholder {
  color: #93a0b5;
}

.viewerSearch input:placeholder-shown ~ .viewerSearchClear {
  display: none;
}

.viewerSearchCount {
  padding: 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.viewerSearchCount.empty {
  color: #e11d48;
}

.viewerSearchNav {
  width: 28px;
  height: 28px;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  border: 0;
  border-radius: 7px;
  color: #50607e;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
}

.viewerSearchNav:disabled {
  opacity: 0.35;
  cursor: default;
}

.viewerActions {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
}

.viewerZoom {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 6px;
  padding: 2px;
  border: 1px solid #d5deec;
  border-radius: 10px;
  background: #fff;
}

.viewerDialog:not([data-mode="word"]) .viewerZoom {
  display: none;
}

.viewerZoom .viewerIconBtn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 15px;
}

.viewerZoom span {
  min-width: 40px;
  color: #263b61;
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.viewerBtn {
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid #d5deec;
  border-radius: 10px;
  color: #263b61;
  background: #fff;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.viewerBtn i {
  font-size: 17px;
}

.viewerBtnPrimary {
  border-color: var(--brand);
  color: #fff;
  background: var(--brand);
}

/* Tải về là thao tác chính của thanh công cụ nên có màu nhấn nhẹ. */
.viewerDownload {
  margin-right: 2px;
  border-color: #cfe0ff;
  color: var(--brand);
  background: #eef4ff;
}

/* Màn hình rộng: "In" và "Mở tab mới" là nút biểu tượng nằm ngay trên thanh.
   Điện thoại: hai nút này vào menu ⋮ (xem phần responsive cuối file). */
.viewerMoreBtn {
  display: none;
}

.viewerMenu {
  display: contents;
}

.viewerMenuItem span {
  display: none;
}

.viewerIconBtn:focus-visible,
.viewerTab:focus-visible,
.viewerBtn:focus-visible,
.viewerSearchNav:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

@media (hover: hover) {
  .viewerIconBtn:hover,
  .viewerSearchNav:not(:disabled):hover {
    color: var(--brand);
    background: #eef3fb;
  }

  .viewerClose:hover {
    color: #e11d48;
    background: #fdecef;
  }

  .viewerTab:not(.active):hover {
    color: var(--brand);
  }

  .viewerBtn:hover {
    border-color: #9fc2ff;
    color: var(--brand);
    background: #f8fbff;
  }

  .viewerDownload:hover {
    background: #e2edff;
  }

  .viewerBtnPrimary:hover {
    border-color: var(--brand-dark);
    color: #fff;
    background: var(--brand-dark);
  }
}

.viewerBody {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #e9eef6;
}

.viewerFrame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  visibility: hidden;
}

.viewerFrame.active {
  visibility: visible;
}

.viewerLoading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 22px;
  padding: 24px;
  background: #e9eef6;
  text-align: center;
  transition: opacity 0.25s ease, visibility 0s;
}

.viewerLoading.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.viewerLoadingPaper {
  width: min(280px, 64vw);
  aspect-ratio: 0.72;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 11px;
  padding: 30px 26px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(19, 36, 72, 0.1), 0 14px 40px rgba(19, 36, 72, 0.1);
}

.viewerLoadingPaper .skeleton {
  display: block;
  height: 9px;
  border-radius: 999px;
}

.viewerLoadingPaper .viewerLoadingGap {
  height: 0;
  margin-top: 6px;
}

.viewerLoadingText {
  display: grid;
  gap: 4px;
  max-width: 420px;
  color: var(--muted);
  font-size: 13px;
}

.viewerLoadingText strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #172a52;
  font-size: 15px;
}

.viewerSpinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid #cfe0ff;
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: viewerSpin 0.8s linear infinite;
}

@keyframes viewerSpin {
  to {
    transform: rotate(360deg);
  }
}

.viewerNotice {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--muted);
  background: #e9eef6;
  text-align: center;
}

.viewerNotice > i {
  color: #f59e0b;
  font-size: 40px;
}

.viewerNotice strong {
  color: #172a52;
  font-size: 16px;
}

.viewerNoticeActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

/* Đặt ở mép trên: mép dưới là thanh chuyển trang của trình xem Google Drive. */
.viewerToast {
  position: absolute;
  left: 50%;
  top: 16px;
  z-index: 4;
  width: max-content;
  min-width: 240px;
  max-width: calc(100% - 32px);
  padding: 12px 16px;
  border-radius: 14px;
  color: #fff;
  background: rgba(19, 36, 72, 0.95);
  box-shadow: 0 16px 40px rgba(9, 19, 38, 0.3);
  font-size: 13.5px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -10px);
  transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s;
}

.viewerToast.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.2s, transform 0.2s;
}

@keyframes menuReveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Tablet (≤ 1180px) ---------- */

@media (max-width: 1180px) {
  .pageShell {
    width: auto;
    padding: 12px 24px 40px;
  }

  .siteHeader {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand clock"
      "notice notice";
    gap: 12px 16px;
    padding: 6px 0 4px;
  }

  .brandBlock {
    grid-area: brand;
  }

  .menuClock {
    grid-area: clock;
  }

  .noticeBar {
    grid-area: notice;
    width: 100%;
    justify-self: stretch;
  }

  .mainMenu {
    margin: 10px 0 20px;
    padding: 0;
  }

  .menuLinks {
    gap: 6px;
    padding: 6px 10px;
  }

  .menuLinks a {
    padding: 8px 12px;
    font-size: 13.5px;
  }

  /* Lưới 6 cột: 5 thẻ xếp 3 + 2, 6 thẻ (khi có tài liệu nội bộ) xếp 3 + 3, không bị lẻ ô. */
  .statsGrid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
  }

  .statsGrid .statCard {
    grid-column: span 2;
  }

  .statsGrid:not(.withInternal) .statCard:nth-child(n + 4) {
    grid-column: span 3;
  }

  /* minmax(0, 1fr) thay cho 1fr: không để hàng tab dài kéo rộng cả khung tra cứu. */
  .mainGrid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .sideStack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  /* Hai cột: "Văn bản mới cập nhật" bên trái, mã QR và thống kê xếp chồng bên phải. */
  .latestPanel {
    grid-row: span 2;
  }

  .tabs {
    gap: 28px;
  }
}

/* ---------- Tablet dọc (≤ 900px): menu thu gọn, thẻ văn bản xếp dọc ---------- */

@media (max-width: 900px) {
  /* Cột phụ hẹp (hai cột trên tablet dọc): thu nhỏ mã QR để phần chữ bên cạnh đủ chỗ. */
  .qrBody {
    gap: 12px;
    padding: 12px;
  }

  .qrFrame {
    padding: 6px;
  }

  .qrFrame img {
    width: 100px;
    height: 100px;
  }

  .siteHeader {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "brand clock toggle"
      "notice notice notice";
    margin-bottom: 18px;
  }

  .menuToggle {
    grid-area: toggle;
    display: inline-flex;
  }

  .mainMenu {
    display: none;
    min-height: 0;
    margin: -6px 0 18px;
  }

  .mainMenu.open {
    display: block;
    animation: menuReveal 0.2s ease-out;
  }

  .menuLinks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
  }

  .menuLinks a,
  .menuLinks a:first-child,
  .menuLinks a:last-child {
    min-height: 46px;
    margin: 0;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    white-space: normal;
  }

  .menuLinks a i {
    flex: 0 0 auto;
    font-size: 19px;
  }

  .panelHeader {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .searchWrap {
    width: 100%;
    flex: none;
    margin: 0;
  }

  /* Thứ tự trên màn hình hẹp: số hiệu → trích yếu → thông tin → nút PDF/Word. */
  .docCard {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .docMain {
    display: contents;
  }

  .docNumber {
    order: 1;
  }

  .docTitleRow {
    order: 2;
    margin-bottom: 14px;
  }

  .docMeta {
    order: 3;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 16px;
    align-content: start;
    align-items: stretch;
    width: auto;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }

  .docActions {
    order: 4;
    margin-top: 14px;
  }

  .metaLine {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    align-items: start;
  }

  .metaLine > span:first-child {
    color: #7a8599;
    font-size: 12px;
  }

  .metaLine > span:first-child::after {
    content: none;
  }

  .metaLine > span:last-child {
    text-align: left;
    font-weight: 500;
    overflow-wrap: anywhere;
  }
}

/* ---------- Điện thoại (≤ 760px) ---------- */

@media (max-width: 760px) {
  .pageShell {
    padding: 8px 12px 28px;
  }

  .siteHeader {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand toggle"
      "notice notice";
    gap: 10px 12px;
    margin-bottom: 14px;
    padding: 4px 0 0;
  }

  /* Điện thoại đã hiển thị giờ trên thanh trạng thái. */
  .menuClock {
    display: none;
  }

  .brandBlock {
    gap: 10px;
  }

  .brandIcon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
  }

  .brandText strong {
    font-size: 14.5px;
    line-height: 1.2;
  }

  .noticeBar {
    height: 36px;
    gap: 8px;
    padding: 0 6px;
  }

  .noticeLabel {
    padding: 0;
  }

  .noticeLabel > span:not(.noticeIcon) {
    display: none;
  }

  .noticeItem {
    font-size: 13px;
  }

  .mainMenu {
    margin: -4px 0 14px;
  }

  .menuLinks {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 6px;
  }

  .menuLinks a,
  .menuLinks a:first-child,
  .menuLinks a:last-child {
    min-height: 48px;
    gap: 10px;
    padding: 10px 12px;
    font-size: 15px;
  }

  .statsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
  }

  .statsGrid .statCard,
  .statsGrid:not(.withInternal) .statCard:nth-child(n + 4) {
    grid-column: auto;
  }

  .statsGrid:not(.withInternal) .statCard:nth-child(5) {
    grid-column: 1 / -1;
  }

  .statCard {
    min-height: 60px;
    padding: 10px 12px;
    border-radius: 16px;
  }

  .statMain {
    gap: 10px;
  }

  .statIcon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  .statIcon svg {
    width: 20px;
    height: 20px;
  }

  .statCard strong {
    font-size: 13px;
    line-height: 1.25;
    text-wrap: balance;
  }

  .statMain > span:not(.statIcon) > span {
    margin-top: 2px;
    font-size: 12px;
  }

  .statCard .statChevron {
    display: none;
  }

  .mainGrid,
  .sideStack {
    gap: 16px;
  }

  .sideStack {
    grid-template-columns: minmax(0, 1fr);
  }

  .latestPanel {
    grid-row: auto;
  }

  /* Đang xem trên điện thoại thì mã QR không còn tác dụng. */
  .qrPanel {
    display: none;
  }

  .panelHeader {
    gap: 12px;
    padding: 16px 14px 14px;
  }

  .panelHeader h1 {
    font-size: 19px;
  }

  .searchWrap .ti-search {
    left: 15px;
    font-size: 20px;
  }

  .searchWrap input {
    height: 46px;
    padding: 0 44px;
  }

  .searchPrompt {
    left: 44px;
    right: 44px;
    font-size: 13.5px;
  }

  .clearSearch {
    right: 6px;
    padding: 8px;
  }

  /* Tab thành dạng chip cuộn ngang, mờ dần ở mép phải để báo còn nội dung. */
  .tabs {
    gap: 8px;
    padding: 10px 28px 10px 14px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 14px,
      #000 calc(100% - 28px),
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 14px,
      #000 calc(100% - 28px),
      transparent 100%
    );
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tabBtn {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f5f8fd;
    font-size: 13.5px;
    font-weight: 600;
  }

  .tabBtn.active {
    color: #fff;
    border-color: var(--brand);
    background: var(--brand);
  }

  .docList {
    gap: 10px;
    padding: 12px;
  }

  .docCard {
    padding: 14px;
    border-radius: 16px;
  }

  .docNumber {
    margin-bottom: 6px;
  }

  .docTitleRow {
    margin-bottom: 12px;
  }

  .docTitle {
    font-size: 15px;
    line-height: 1.5;
  }

  .docMeta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
  }

  .docActions {
    gap: 8px;
    margin-top: 12px;
  }

  .docAction {
    flex: 1 1 0;
    justify-content: center;
    height: 40px;
    border-radius: 12px;
    font-size: 14px;
  }

  .tableFooter {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 2px 12px 16px;
  }

  .pageInfo {
    font-size: 13px;
    text-align: center;
  }

  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }

  .pageBtn {
    min-width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .pageGap {
    min-width: 16px;
    border-color: transparent;
    background: transparent;
  }

  .sidePanel .panelHeader {
    padding: 16px 16px 10px;
  }

  .sidePanel .panelHeader h2 {
    font-size: 17px;
  }

  .compactList {
    gap: 14px;
    padding: 0 16px;
  }

  .compactItem {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .compactDate {
    grid-column: 2;
    margin-top: -8px;
    font-size: 12px;
  }

  .securityModal {
    padding: 16px;
  }

  .securityDialog {
    padding: 22px 20px 20px;
  }

  .securityHint {
    width: auto;
    margin-left: 0;
    font-size: 13px;
  }
}

/* ---------- Điện thoại nhỏ (≤ 380px) ---------- */

@media (max-width: 380px) {
  .pageShell {
    padding-left: 10px;
    padding-right: 10px;
  }

  .brandIcon {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }

  .brandText strong {
    font-size: 13px;
  }

  .statCard {
    padding: 10px;
  }

  .statMain {
    gap: 8px;
  }

  .statIcon {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
  }

  .statCard strong {
    font-size: 12.5px;
  }

  .pageBtn {
    min-width: 34px;
    height: 34px;
  }
}

/* Laptop nhỏ, tablet ngang: nút tải chỉ còn biểu tượng để tên văn bản đủ chỗ. */
@media (min-width: 1025px) and (max-width: 1180px) {
  .viewerDownload {
    width: 36px;
    padding: 0;
  }

  .viewerDownload span {
    display: none;
  }
}

/* Tablet, điện thoại dọc và mọi màn hình rất hẹp: tên văn bản ở hàng trên, công cụ xuống hàng dưới. */
@media (max-width: 1024px) and (min-height: 501px), (max-width: 560px) {
  .viewerHeader {
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 7px 8px 8px 14px;
  }

  .viewerHeading {
    min-width: 0;
  }

  .viewerToolbar {
    order: 3;
    flex: 1 1 100%;
  }

  .viewerSearch {
    flex: 1 1 auto;
    min-width: 0;
  }

  .viewerHeaderActions {
    padding-left: 0;
    border-left: 0;
  }
}

/* Điện thoại (dọc hoặc xoay ngang): xem toàn màn hình, nút chỉ còn biểu tượng, "In" và "Mở tab mới" vào menu ⋮. */
@media (max-width: 760px), (max-height: 500px) {
  .viewerModal {
    padding: 0;
  }

  .viewerDialog {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .viewerHeader {
    gap: 6px 8px;
    padding: 6px 6px 8px 12px;
  }

  .viewerDocIcon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 18px;
  }

  .viewerTab {
    padding: 0 10px;
  }

  .viewerZoom,
  .viewerDialog:not([data-mode="word"]) .viewerZoom {
    display: none;
  }

  .viewerDownload {
    width: 36px;
    padding: 0;
  }

  .viewerDownload span {
    display: none;
  }

  /* Nút chuyển kết quả chỉ hiện khi có từ hai kết quả, để ô nhập rộng hơn. */
  .viewerSearchNav:disabled {
    display: none;
  }

  .viewerMoreBtn {
    display: inline-grid;
  }

  .viewerMenu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    gap: 2px;
    min-width: 200px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(9, 19, 38, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0s linear 0.15s;
  }

  .viewerMenu.open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.15s, transform 0.15s;
  }

  .viewerMenuItem {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 12px;
    color: #263b61;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
  }

  .viewerMenuItem i {
    color: #50607e;
    font-size: 18px;
  }

  .viewerMenuItem span {
    display: inline;
  }
}

/* Điện thoại dọc: lúc đang tìm (ô tìm có focus hoặc có chữ), ô tìm kiếm chiếm cả hàng công cụ.
   Bấm × trong ô để xoá và trở lại hàng công cụ đầy đủ. */
@media (max-width: 760px) and (min-height: 501px), (max-width: 560px) {
  .viewerToolbar:has(.viewerSearch:focus-within) > :not(.viewerSearch),
  .viewerToolbar:has(.viewerSearch input:not(:placeholder-shown)) > :not(.viewerSearch) {
    display: none;
  }
}

/* Điện thoại xoay ngang: giữ một hàng, bỏ biểu tượng và dòng số hiệu để dành chỗ cho văn bản. */
@media (max-height: 500px) {
  .viewerMeta,
  .viewerDocIcon {
    display: none;
  }

  .viewerHeader {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .viewerHeading {
    min-width: 120px;
  }
}

/* Hộp Giới thiệu trên điện thoại: gần tràn màn hình, danh sách nguồn về một cột. */
@media (max-width: 760px) {
  .aboutModal {
    padding: 10px;
  }

  .aboutDialog {
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 18px;
  }

  .aboutHero {
    gap: 12px;
    padding: 14px 10px 14px 20px;
  }

  .aboutScroll {
    padding: 0 20px 20px;
  }

  .aboutHero h2 {
    font-size: 17px;
  }

  .aboutSection p {
    font-size: 14px;
  }

  .aboutDisclaimer {
    padding: 16px;
  }

  .aboutDisclaimer ul {
    font-size: 13.5px;
  }

  .aboutSources {
    grid-template-columns: minmax(0, 1fr);
  }

  .contactList li {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 14px;
  }

  /* Nút Nhắn Zalo / Gửi email xuống dòng, thẳng hàng với chữ (42px icon + 12px khoảng cách). */
  .contactText {
    flex-basis: calc(100% - 54px);
  }

  .contactAction {
    margin-left: 54px;
  }

  .linkCard {
    padding: 12px 40px 12px 14px;
  }

  .linkDesc {
    font-size: 13px;
  }
}

@media (max-height: 500px) {
  .aboutModal {
    padding: 8px;
  }

  .aboutDialog {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
}

/* Hộp đăng nhập cao hơn màn hình (điện thoại xoay ngang): cho cuộn, không bị cắt mép trên. */
@media (max-height: 500px) {
  .securityModal {
    align-items: flex-start;
    overflow-y: auto;
  }

  .securityDialog {
    margin: auto;
  }
}

@media (max-width: 1180px), (hover: none) {
  html.modalOpen,
  html.modalOpen body {
    overflow: hidden;
  }

  .viewerModal,
  .securityModal,
  .aboutModal {
    overscroll-behavior: contain;
  }
}

/* Thiết bị cảm ứng */
@media (hover: none) and (pointer: coarse) {
  /* iOS tự phóng to trang khi ô nhập có chữ nhỏ hơn 16px. */
  .searchWrap input,
  .loginField input,
  .viewerSearch input {
    font-size: 16px;
  }

  .statCard:active {
    transform: scale(0.98);
  }

  .docCard:active {
    border-color: #9fc2ff;
  }

  .docAction:active,
  .pageBtn:not(.active):active {
    border-color: var(--brand);
    color: var(--brand);
  }

  .menuLinks a:active {
    background: #eef4ff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mainMenu.open {
    animation: none;
  }

  .viewerModal,
  .viewerDialog,
  .viewerMenu,
  .viewerToast,
  .aboutModal,
  .aboutDialog {
    transition: none;
  }
}