html {
    font-size: clamp(14px, 0.9vw, 18px);
    box-sizing: border-box;
}
h1 {
    font-size: clamp(28px, 4vw, 48px);
}
h2 {
    font-size: clamp(22px, 3vw, 36px);
}
body {
    font-size: 1rem;
}
.user_accept span:not(:last-child){
    margin-right: 6px;
}
.user_accept span:not(:last-child):after{
    position: absolute;
    content: ',';
    margin-left: 3px;
}
.pointer-events-none{
    pointer-events: none;
}
.shop-stats ul li:last-child{border-bottom:none!important}
.detail-stats-sumary .shop-stats{width: 200px}
.star {color: #f59e0b;}
.detail-stats-sumary .small{font-size: 14px;}
.progress{height: 6px; border-radius: 99px;}
.progress-bar{border-radius: 99px;}
.popover {max-width: fit-content;}
.popover .shop-stats{width: 180px!important;}
.popover .shop-detail-review{width: 300px!important;}
.star { color: #f59e0b; }
.avatar { width: 36px; height: 36px; border-radius: 50%; font-size: 0.85rem; }
.thumb { width: 72px; height: 72px; border-radius: 8px; font-size: 0.7rem; line-height: 1.3; }
.progress{height: 6px; border-radius: 99px;}
.progress-bar{border-radius: 99px;}
.recommends { color: #16a34a; font-size: 0.8rem; }
.purchased a { color: #2563eb; font-size: 0.8rem; }
.purchased { font-size: 0.8rem; }
.w-32{width: 32px;}
.shop-stats ul li:last-child{border-bottom:none!important}

.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1) !important; transition: transform .2s, box-shadow .2s; }
#urgent-list a:hover{box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);}
.kpi-bar { height: 3px; border-radius: 99px; }
.donut-wrap { position: relative; display: inline-flex; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.status-badge { border-radius: 99px; font-size: 11px; font-weight: 600; padding: 3px 12px; border: 1px solid; }
.filter-pill { border-radius: 20px !important; }
#donut-svg{animation: spinIn 1s ease;}
@keyframes spinIn {
    from {
        transform: rotate(-270deg) scale(.7);
        opacity: 0;
    }
    to {
        transform: rotate(-90deg) scale(1);
        opacity: 1;
    }
}
.list-notification{
    position: fixed;
    right: 15px;
    top: 60px;
    width: 300px;
    z-index: 10000;
    overflow-y: scroll;
}
.item-notification{
    background: white;
    padding: 10px;
    margin: 10px 5px;
    border-left: 3px solid #E24B4A;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    position: relative;
    font-size: 13px;
}
.item-notification .close-noti{
    color: red;
    position: absolute;
    right: 0px;
    top: -5px;
    font-size: 23px;
    cursor: pointer;
}
#dateDashboardStatis{width: auto!important;font-family: sans-serif !important;font-size: 15px;}