/* Nút cuộn lên đầu trang: đĩa tròn góc phải dưới, quanh nút là vòng tiến trình đọc trang.
   Ô ngoài cùng bên phải để trống dành cho bot chat sẽ nhúng sau.
   Ghi đè khối #scrollUp cũ trong theme.css và responsive.css nên file này phải nạp sau cùng. */

:root {
    /* khoảng cách nút với đáy khung nhìn khi footer chưa lộ ra */
    --mlb-top-gap: 24px;
}

#scrollUp {
    /* plugin scrollUp tự đặt position và z-index inline, ở đây chỉ lo chỗ đứng với hình dáng */
    inset-inline-start: auto;
    inset-inline-end: calc(var(--mlb-dock-center, 117px) - 25px);
    bottom: var(--mlb-top-gap);
    width: 50px;
    height: 50px;
    padding: 0;
    background: transparent;
    border-radius: 50%;
    font-size: 0;
    line-height: 0;
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease;
}

#scrollUp:hover,
#scrollUp:focus-visible {
    background: transparent;
    transform: translateY(-3px);
}

/* Hai vòng chồng nhau, đảo màu của nhau. JS dò đúng mép giữa hai section phía sau nút rồi
   che (mask) theo mép đó: phần nằm trên nền cùng tông cam lộ vòng trắng, phần còn lại lộ vòng cam.
   Mask nằm ở thẻ bọc chứ không nằm ở thẻ svg, vì svg bị xoay -90deg sẽ xoay luôn cả mask. */
.mlb-top__ring {
    position: absolute;
    inset: 0;
}

.mlb-top__ring-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.mlb-top__ring circle {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
}

/* --mlb-top-len là chu vi vòng, --mlb-top-progress là phần trang đã đọc, cả hai do JS đặt */
/* không đặt transition: giá trị đã cập nhật mỗi khung hình, thêm transition chỉ tốn thêm việc */
.mlb-top__ring-bar {
    stroke-dasharray: var(--mlb-top-len, 144.51);
    stroke-dashoffset: calc(var(--mlb-top-len, 144.51) * (1 - var(--mlb-top-progress, 0)));
}

.mlb-top__ring--brand .mlb-top__ring-track {
    stroke: rgba(26, 74, 138, 0.26);
    stroke: color-mix(in srgb, var(--primary-color, #e4762c) 26%, transparent);
}

.mlb-top__ring--brand .mlb-top__ring-bar {
    stroke: var(--primary-color, #e4762c);
}

.mlb-top__ring--light .mlb-top__ring-track {
    stroke: rgba(255, 255, 255, 0.4);
}

.mlb-top__ring--light .mlb-top__ring-bar {
    stroke: #fff;
}

/* đĩa giữ nguyên màu chính ở mọi nền, chỉ vòng tiến trình mới đổi màu */
#scrollUp .mlb-top__icon {
    position: absolute;
    inset: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-color, #e4762c);
    color: #fff;
    font-size: 17px;
    line-height: 1;
    transition: background 0.25s ease;
}

#scrollUp:hover .mlb-top__icon {
    background: var(--primary-color-hover, #be5c1a);
}

/* ---- Footer lộ ra thì mũi tên nằm trong lỗ khoét ở mép rèm lo, nút tròn lui đi ---- */

body.mlb-footer-open #scrollUp {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}

@media (prefers-reduced-motion: reduce) {
    #scrollUp {
        transition: none;
    }
}

@media (max-width: 767px) {
    :root {
        --mlb-top-gap: 16px;
    }

    #scrollUp {
        inset-inline-end: 80px;
        width: 44px;
        height: 44px;
    }

    #scrollUp .mlb-top__icon {
        inset: 5px;
        font-size: 15px;
    }
}