` giữ nguyên vì thứ tự mục **có** nghĩa với trình
đọc màn hình; chỉ phần hiển thị số là bỏ. */
.legal__toc a {
display: block;
padding: 0.3rem 0 0.3rem 0.7rem;
border-left: 2px solid transparent;
color: var(--muted);
text-decoration: none;
line-height: 1.4;
}
.legal__toc a:hover {
color: var(--fg);
border-left-color: var(--accent);
text-decoration: underline;
}
.legal__toc a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 60rem) {
/* `minmax(0, …)` ở cột chữ: không có nó thì một `` hay một bảng rộng
sẽ bơm cả cột ra và lưới tràn ngang — lỗi kinh điển của grid. */
.legal {
grid-template-columns: 16rem minmax(0, var(--measure));
gap: 3.5rem;
align-items: start;
}
/* Mục lục đi theo khi cuộn. `max-height` + `overflow` để trang nào nhiều mục
cũng không bị cắt cụt ở màn thấp. */
.legal__toc {
position: sticky;
top: 2rem;
max-height: calc(100vh - 4rem);
overflow-y: auto;
}
}
/* In ra giấy thì mục lục chỉ tốn mực — các neo không bấm được trên giấy. */
@media print {
.legal { display: block; }
.legal__toc { display: none; }
.legal__body { max-width: none; }
}