{% if chart_data %}
<div class="sf-chart-container"
    style="display: flex; height: 260px; align-items: flex-end; justify-content: space-around; width: 100%; padding-bottom: 40px; box-sizing: border-box;">
    {% for item in chart_data %}
    <div class="sf-chart-col"
        style="flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; position: relative;">
        <!-- Hiển thị giá trị -->
        <div class="sf-chart-val"
            style="font-size: 10px; font-weight: bold; color: #b71c1c; margin-bottom: 4px; font-family: sans-serif;">
            {{ item.count if item.count > 0 else '' }}
        </div>

        <!-- Cột biểu đồ -->
        <div class="sf-chart-bar" style="
            width: 70%; 
            height: {{ item.percentage }}%; 
            background: linear-gradient(to top, #b71c1c, #ffca28); 
            border-radius: 4px 4px 0 0; 
            box-shadow: 0 0 12px rgba(183, 28, 28, 0.3);
            border: 1px solid rgba(255, 202, 40, 0.4);
            min-height: {{ '2px' if item.count > 0 else '0px' }};
        "></div>

        <!-- Nhãn thang đo -->
        <div class="sf-chart-tick" style="
            position: absolute; 
            bottom: -25px; 
            font-size: 10px; 
            color: #3e2723; 
            white-space: nowrap; 
            transform: rotate(-45deg);
            font-weight: bold;
        ">
            {{ "%02d"|format(item.hour) }}:00
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div
    style="display:flex; align-items:center; justify-content:center; height: 200px; width: 100%; color: #888; font-style: italic;">
    🏮 Chưa có dữ liệu hoạt động 🏮
</div>
{% endif %}