/* ============================================================================
   THANH CUỘN DÙNG CHUNG TOÀN HỆ — nạp trong _MainLayout nên áp cho MỌI màn.
   Trước đây mỗi trình duyệt vẽ một kiểu (Chrome để mặc định dày 15px, xám cổ),
   nền tối thì thanh cuộn vẫn sáng trắng — lạc hẳn tông.

   Dùng CẢ hai chuẩn: `scrollbar-width/color` (Firefox + Chrome mới) và
   `::-webkit-scrollbar` (Chrome/Edge/Safari) để không phụ thuộc một đường.
   Thumb bo tròn, có viền trong suốt + background-clip nên nhìn thanh mảnh mà
   vùng bắt chuột vẫn đủ rộng — không phải đánh đổi «đẹp» lấy «khó trỏ».
   ========================================================================== */
:root {
    --sb-day: 10px;
    --sb-ray: transparent;
    --sb-tay: #c5cdd9;
    --sb-tay-hover: #9aa7b8;
    --sb-tay-keo: #7c8b9f;
}
html[data-theme='dark'] {
    --sb-tay: #454c59;
    --sb-tay-hover: #5b6474;
    --sb-tay-keo: #6b7484;
}

/* Firefox + Chrome ≥121 */
* { scrollbar-width: thin; scrollbar-color: var(--sb-tay) var(--sb-ray); }

/* WebKit/Blink */
::-webkit-scrollbar { width: var(--sb-day); height: var(--sb-day); }
::-webkit-scrollbar-track { background: var(--sb-ray); }
::-webkit-scrollbar-thumb {
    background: var(--sb-tay);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--sb-tay-hover); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--sb-tay-keo); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* Vùng cuộn lồng nhau (panel trong panel) dùng thanh mảnh hơn cho đỡ rối */
.gp-cha::-webkit-scrollbar, .asst-log::-webkit-scrollbar,
.gp-hop > .b::-webkit-scrollbar, .modal-body::-webkit-scrollbar { width: 8px; height: 8px; }

/* Cuộn trong panel/hộp thoại KHÔNG được kéo theo trang nền khi chạm đáy. */
.gp-cha, .gp-hop > .b, .asst-log, .gp-hop > .b, .asst-his { overscroll-behavior: contain; }