/*
 * Thanh cuộn trang + nút "lên đầu trang" — dùng chung cho khu khách v7 và các
 * trang công khai (resources/views/sites/). Nạp qua partial
 * frontend/includes/page-scroll.blade.php. Không đụng v6, pwa, admin.
 *
 * 1) Thanh cuộn: để mặc định của trình duyệt, không tô màu, không đổi bề rộng.
 *    Chỉ giữ body { overflow-y: scroll } để trang ngắn cũng hiện thanh cuộn,
 *    nhờ vậy bề rộng vùng nhìn giống nhau giữa trang dài và trang ngắn — hết
 *    cảnh nội dung nhảy ngang khi chuyển trang. Đặt trên BODY chứ không phải
 *    HTML: Bootstrap 5 khi mở modal ghi overflow:hidden + padding-right vào
 *    body, nếu để trên html thì thanh cuộn không tắt được và nội dung bị dịch
 *    ngang. Không dùng scrollbar-gutter (cần Chrome 94+, dự án phải chạy máy cũ).
 *    Chỉ nhắm body, KHÔNG dùng selector toàn cục: các vùng cuộn riêng bên trong
 *    trang (menu ngang, hộp thông báo, modal...) giữ nguyên thanh cuộn của chúng.
 *
 * 2) Nút "lên đầu trang": do JS trong partial dựng ra và chèn cuối <body>, nên
 *    không nằm xen giữa nội dung. z-index 1040: cao hơn mọi lớp nổi trong trang
 *    (kh-history-pop z-index 20, kh-deposit-bar z-index 9) nhưng THẤP HƠN
 *    backdrop của modal Bootstrap 5 (1050) và modal (1055), nên mở modal là nút
 *    bị phủ đúng cách.
 */

body {
    overflow-y: scroll;
}

.kh-totop {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(33, 37, 41, 0.72);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
    cursor: pointer;

    /* Ẩn mặc định: không nhận chuột, không đọc bởi trình đọc màn hình. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.kh-totop.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.kh-totop:hover,
.kh-totop:focus {
    background: rgba(33, 37, 41, 0.92);
    color: #ffffff;
    outline: none;
}

.kh-totop svg {
    width: 20px;
    height: 20px;
    display: block;
}

/*
 * Trang có thanh thao tác bám đáy (.kh-deposit-bar ở trang chờ cọc): đẩy nút
 * lên trên thanh đó để không che nút "Cọc". Lớp .has-bottom-bar do JS gắn.
 * Giá trị bottom dưới đây chỉ là dự phòng cho khoảnh khắc trước khi JS đo
 * xong (page-scroll.blade.php, hàm positionTopBtn); JS sẽ ghi đè bằng inline
 * style tính theo chiều cao thật của thanh, vì thanh cao khác nhau tuỳ độ
 * phân giải và tuỳ nội dung xuống dòng.
 */
.kh-totop.has-bottom-bar {
    bottom: 96px;
}

/* Màn hẹp: nút nhỏ lại, sát mép ít hơn để không che nút bấm ở đáy trang. */
@media (max-width: 576px) {
    .kh-totop {
        right: 12px;
        bottom: 12px;
        width: 38px;
        height: 38px;
    }

    .kh-totop svg {
        width: 17px;
        height: 17px;
    }

    .kh-totop.has-bottom-bar {
        bottom: 110px;
    }
}