/*
 * Reading progress bar.
 * Dùng CSS scroll-driven animations (animation-timeline) — Chrome 115+ hỗ trợ
 * natively, không cần JS. Trình duyệt cũ: bar ẩn (display: none qua @supports).
 *
 * Mục đích: người đọc biết mình đã đọc bao nhiêu phần bài viết dài, nhất là
 * với bài pháp luật nhiều trang. Đặt cố định đỉnh viewport nên không chiếm
 * chỗ trong luồng.
 */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: 100;
  pointer-events: none;
}
.reading-progress__bar {
  height: 100%;
  width: 100%;
  transform-origin: left;
  background: var(--color-accent-500);
  transform: scaleX(0);
}

@supports (animation-timeline: scroll()) {
  /* Khi browser hỗ trợ scroll-driven: bar phình theo tiến trình cuộn.
     animation-range 'cover' = từ đầu article đến cuối article. */
  .reading-progress__bar {
    animation: reading-progress-fill linear forwards;
    animation-timeline: scroll(root);
    animation-range: cover 0% cover 100%;
  }
  @keyframes reading-progress-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}