/* CSS cho PWA Pull-to-Refresh: Theo Mẫu Custom Spinner CDPN của Sếp */

body {
    /* Quan trọng nhất để khoá dội màn hình (Rubber-banding) trên iOS */
    overscroll-behavior-y: none;
}

#pwa-ptr-wrapper {
    position: fixed;
    top: -90px; /* Giấu khỏi màn hình bên trên (Tương ứng với threshold mới) */
    left: 0;
    width: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

/* Thay vì tải từ s3 amazon của sếp, nhúng thẳng ảnh SVG vào đây bằng Base64 Data URI để chống phụ thuộc ngoài */
.pwa-loader-spinner {
    width: 32px; 
    height: 32px;
    display: block;
    /* Bức ảnh 12 vạch chuẩn xác, màu xám đục, siêu nhẹ (tương đương 1kb png của sếp báo) */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23cccccc'%3E%3Crect x='46' y='8' width='8' height='24' rx='4' opacity='0.10' transform='rotate(0 50 50)'/%3E%3Crect x='46' y='8' width='8' height='24' rx='4' opacity='0.18' transform='rotate(30 50 50)'/%3E%3Crect x='46' y='8' width='8' height='24' rx='4' opacity='0.25' transform='rotate(60 50 50)'/%3E%3Crect x='46' y='8' width='8' height='24' rx='4' opacity='0.34' transform='rotate(90 50 50)'/%3E%3Crect x='46' y='8' width='8' height='24' rx='4' opacity='0.43' transform='rotate(120 50 50)'/%3E%3Crect x='46' y='8' width='8' height='24' rx='4' opacity='0.50' transform='rotate(150 50 50)'/%3E%3Crect x='46' y='8' width='8' height='24' rx='4' opacity='0.59' transform='rotate(180 50 50)'/%3E%3Crect x='46' y='8' width='8' height='24' rx='4' opacity='0.66' transform='rotate(210 50 50)'/%3E%3Crect x='46' y='8' width='8' height='24' rx='4' opacity='0.75' transform='rotate(240 50 50)'/%3E%3Crect x='46' y='8' width='8' height='24' rx='4' opacity='0.84' transform='rotate(270 50 50)'/%3E%3Crect x='46' y='8' width='8' height='24' rx='4' opacity='0.91' transform='rotate(300 50 50)'/%3E%3Crect x='46' y='8' width='8' height='24' rx='4' opacity='1.00' transform='rotate(330 50 50)'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
}

/* 
 * KHI KÍCH HOẠT QUAY THEO NHỊP TẢI DỮ LIỆU
 * (Sau khi buông ngón tay và chuẩn bị reload trang)
 */
#pwa-ptr-wrapper.spin .pwa-loader-spinner {
    /* ĐỌC TỪ SOURCE SẾP CHỈ ĐỊNH: */
    -webkit-animation: spinLoader 600ms steps(12, end) infinite;
            animation: spinLoader 600ms steps(12, end) infinite;
}

/* KEYFRAMES THEO SOURCE BÀN GIAO */
@-webkit-keyframes spinLoader {
    /* Không dùng translate(-50%) nữa vì nó đã được căn giữa bằng Flexbox ở thẻ Wrapper, 
       chỉ sử dụng rotate(0turn) -> rotate(1turn) để chuẩn Animation Loading */
    from { transform: rotate(0turn); }
    to { transform: rotate(1turn); }
}

@keyframes spinLoader {
    from { transform: rotate(0turn); }
    to { transform: rotate(1turn); }
}