/* ============================================================================
 * scrollbar.css - MỘT kiểu thanh cuộn cho cả ứng dụng, mọi trình duyệt.
 *
 * Nạp ở <head> của mọi layout (hsafe_backend, hsafe_monitor, hsafe_map, login).
 * Đừng khai thanh cuộn ở chỗ nào khác - xem hai cái bẫy bên dưới.
 *
 * ---- HAI HỌ TRÌNH DUYỆT, HAI CÁCH ----------------------------------------
 *
 * Chrome / Edge / Safari: ::-webkit-scrollbar - vẽ được tuỳ ý: 6px, bo tròn,
 * không mũi tên.
 *
 * Firefox: KHÔNG hiểu ::-webkit-scrollbar. Chỉ có hai thuộc tính chuẩn:
 *   scrollbar-width  auto | thin | none   (không chỉnh được số px)
 *   scrollbar-color  màu thumb, màu track (không bo góc được)
 * nên "thin" + màu là mức gần Chrome nhất CSS làm được trên Firefox.
 *
 * ---- BẪY 1: scrollbar-width KHÔNG kế thừa ----------------------------------
 *
 * Khai `thin` ở body hay #map không xuống tới vùng cuộn con - Firefox vẽ thanh
 * mặc định 17px có mũi tên ở mọi chỗ không được khai riêng. Đó là cái thanh
 * "vừa thô vừa to". Trước đây sửa bằng cách khai lẻ ở từng vùng cuộn (#gridview2,
 * .sidebar-inner, .mn-menu-panel...) và chỗ nào quên là chỗ đó thô.
 * Nay khai cho MỌI phần tử (*) - không còn chỗ nào quên được.
 *
 * ---- BẪY 2: Chrome 121+ bỏ ::-webkit-scrollbar nếu thấy thuộc tính chuẩn ---
 *
 * Phần tử nào có scrollbar-width / scrollbar-color khác auto thì Chrome dùng
 * thanh chuẩn của nó (có mũi tên hai đầu) và BỎ QUA kiểu ::-webkit-scrollbar bo
 * tròn. scrollbar-color lại kế thừa, nên một khai báo ở cha làm hỏng cả cây con.
 * Vì vậy hai thuộc tính chuẩn chỉ được bật cho trình duyệt KHÔNG hiểu
 * ::-webkit-scrollbar - đúng điều kiện @supports bên dưới.
 *
 * Muốn ẩn hẳn thanh cuộn ở một chỗ (dải tab vuốt ngang...): khai
 *   .x { scrollbar-width: none; }  .x::-webkit-scrollbar { display: none; }
 * Một class đặc hiệu hơn `*` nên thắng quy tắc dưới đây.
 * ========================================================================== */

/* ---- Chrome / Edge / Safari ---- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a3acb9;
}

/* ---- Firefox (và mọi trình duyệt không có ::-webkit-scrollbar) ---- */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: #c1c1c1 transparent;
    }
}