/**
 * Scrollbar mỏng, mờ — áp dụng toàn site (ngang + dọc).
 */
:root {
    --scrollbar-size: 5px;
    --scrollbar-track: transparent;
    --scrollbar-thumb: rgba(100, 116, 139, 0.22);
    --scrollbar-thumb-hover: rgba(100, 116, 139, 0.42);
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*,
*::before,
*::after {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 999px;
    border: 1px solid transparent;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

/* Vùng log/console tối — thumb nhạt hơn */
.srv-log,
.server-console-log,
pre[class*="log"] {
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

.srv-log::-webkit-scrollbar-thumb,
.server-console-log::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.3);
}

/* Admin sidebar tối */
.admin-sidebar,
.admin-nav-wrap {
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.admin-sidebar::-webkit-scrollbar-thumb,
.admin-nav-wrap::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.14);
}

.admin-sidebar::-webkit-scrollbar-thumb:hover,
.admin-nav-wrap::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.28);
}