/* ── Design tokens ──────────────────────────────────────────────────────
   8px grid, radius 16px, soft shadow — dùng song song với Tailwind CDN
   (Tailwind lo phần layout/spacing/màu; phần dưới đây bổ sung những gì
   Tailwind mặc định chưa có sẵn, và các biến dùng lại nhiều nơi). */
:root {
  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow-soft: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -12px rgba(16, 24, 40, 0.12);
  --shadow-soft-dark: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-serif-heading {
  font-family: "Literata", Georgia, serif;
}

.font-mono-code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* ── Thẻ / khối nội dung dùng chung ─────────────────────────────────── */
.card-surface {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.dark .card-surface {
  box-shadow: var(--shadow-soft-dark);
}

/* ── Thanh cuộn tối giản ─────────────────────────────────────────────── */
.scroll-thin::-webkit-scrollbar { height: 8px; width: 8px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-thin::-webkit-scrollbar-thumb {
  background: rgba(120, 130, 150, 0.35);
  border-radius: 999px;
}
.scroll-thin::-webkit-scrollbar-thumb:hover { background: rgba(120, 130, 150, 0.55); }

/* ── Đánh dấu từ khoá trong đoạn trích tìm kiếm chuyên sâu ──────────── */
mark.hit {
  background: rgba(22, 163, 74, 0.18);
  color: inherit;
  border-radius: 4px;
  padding: 0 2px;
  font-weight: 600;
}

/* ── Hiệu ứng chuyển động nhẹ (thay thế cho Framer Motion) ──────────── */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fade-in-up 0.35s ease-out both; }

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
.animate-pulse-soft { animation: pulse-soft 1.4s ease-in-out infinite; }

/* Stagger nhẹ cho các dòng bảng khi trang vừa tải xong */
tbody tr.stagger { animation: fade-in-up 0.3s ease-out both; }

/* ── Bảng dữ liệu: dòng tiêu đề dính khi cuộn ngang/dọc ─────────────── */
.doc-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* ── Nhãn "Loại văn bản" nhiều màu trong bảng Dashboard ─────────────── */
.loai-badge-0 { background: rgba(22, 163, 74, 0.12); color: #15803d; }
.loai-badge-1 { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; }
.loai-badge-2 { background: rgba(217, 119, 6, 0.14); color: #b45309; }
.loai-badge-3 { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }
.loai-badge-4 { background: rgba(124, 58, 237, 0.12); color: #6d28d9; }
.loai-badge-5 { background: rgba(8, 145, 178, 0.12); color: #0e7490; }
.dark .loai-badge-0 { background: rgba(22, 163, 74, 0.22); color: #4ade80; }
.dark .loai-badge-1 { background: rgba(37, 99, 235, 0.22); color: #60a5fa; }
.dark .loai-badge-2 { background: rgba(217, 119, 6, 0.24); color: #fbbf24; }
.dark .loai-badge-3 { background: rgba(220, 38, 38, 0.22); color: #f87171; }
.dark .loai-badge-4 { background: rgba(124, 58, 237, 0.24); color: #c4b5fd; }
.dark .loai-badge-5 { background: rgba(8, 145, 178, 0.22); color: #67e8f9; }

/* ── In ấn: ẩn sidebar/topbar khi in trang chi tiết văn bản ─────────── */
@media print {
  .no-print { display: none !important; }
  main { margin-left: 0 !important; }
}