@charset "UTF-8";

/* Mỗi danh mục bài viết 1 màu cố định (--cat-fg: màu chữ/đậm, --cat-bg: nền nhạt).
   Dùng chung cho trang admin và trang Tin tức & Cẩm nang qua thuộc tính data-cat="<tên danh mục>". */
[data-cat] { --cat-fg: #475569; --cat-bg: #e2e8f0; }
[data-cat="Từ vựng"]            { --cat-fg: #1d4ed8; --cat-bg: #dbeafe; }
[data-cat="Ngữ pháp"]           { --cat-fg: #6d28d9; --cat-bg: #ede9fe; }
[data-cat="Phương pháp học"]    { --cat-fg: #0f766e; --cat-bg: #ccfbf1; }
[data-cat="Luyện thi HSK"]      { --cat-fg: #b91c1c; --cat-bg: #fee2e2; }
[data-cat="Du học"]             { --cat-fg: #15803d; --cat-bg: #dcfce7; }
[data-cat="Tin tức & Tuyển dụng"] { --cat-fg: #c2410c; --cat-bg: #ffedd5; }
[data-cat="Cẩm nang"]           { --cat-fg: #a2247e; --cat-bg: #fae0f3; }
[data-cat="Tổng hợp"]           { --cat-fg: #475569; --cat-bg: #e2e8f0; }

/* Nhãn danh mục (badge) */
.cat-badge,
.badge.cat-badge {
  background-color: var(--cat-bg);
  color: var(--cat-fg);
  font-weight: 700;
}

/* Chữ danh mục không có nền (vd: bài liên quan) */
.cat-text { color: var(--cat-fg); }

/* Nút lọc danh mục (pill): nhạt khi chưa chọn, đậm khi đang chọn */
.cat-pill {
  background-color: var(--cat-bg);
  color: var(--cat-fg);
  transition: filter .15s ease, background-color .15s ease, color .15s ease;
}
.cat-pill:hover { filter: brightness(.95); }
.cat-pill.is-active {
  background-color: var(--cat-fg);
  color: #fff;
}

/* Phân trang ghim ở đáy màn hình, không phải kéo xuống cuối trang */
.pager-sticky {
  position: sticky;
  bottom: 12px;
  z-index: 30;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.pager-sticky > .pager-sticky__inner {
  pointer-events: auto;
  max-width: 100%;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  padding: 6px 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
}