{{-- Tab: 全体数値 --}}
<div class="wrap-scroll-table">
    <table class="monthly-bill-table">
        <thead>
            <tr>
                <th rowspan="2" class="col-date col-date-divider" style="vertical-align:middle; background:#F8F8F8 !important; font-weight: 500 !important;">日付</th>
                <th colspan="6" class="th-group th-group--default">全体売上</th>
                <th colspan="3" class="th-group th-group--new">新規</th>
                <th colspan="3" class="th-group th-group--renew">更新</th>
                <th colspan="2" class="th-group th-group--upgrade">S → P アップグレード 日割り</th>
                <th colspan="2" class="th-group th-group--usage">従量課金</th>
                <th colspan="1" class="th-group th-group--cancel">解約</th>
            </tr>
            <tr>
                <th class="sub-col" rowspan="2">MRR累積</th>
                {{-- Thứ tự theo Figma (node 1:2097): 決済件数 TRƯỚC 月次売上 — giống tab
                     スタンダード/プロ. Đổi chỗ 2 cột này là bug "trường data sai thứ tự" (#39564). --}}
                <th class="sub-col">決済件数</th>
                <th class="sub-col">月次売上</th>
                <th class="sub-col">前年同月比</th>
                <th class="sub-col">売上高/1日</th>
                <th class="sub-col">前月比</th>
                <th class="sub-col sub-col--new">決済件数</th>
                <th class="sub-col sub-col--new">決済額</th>
                <th class="sub-col sub-col--new">前年同月比</th>
                <th class="sub-col sub-col--renew">決済件数</th>
                <th class="sub-col sub-col--renew">決済額</th>
                <th class="sub-col sub-col--renew">前年同月比</th>
                <th class="sub-col sub-col--upgrade">決済件数</th>
                <th class="sub-col sub-col--upgrade">決済額</th>
                <th class="sub-col sub-col--usage">決済件数</th>
                <th class="sub-col sub-col--usage">決済額</th>
                <th class="sub-col sub-col--cancel">件数</th>
            </tr>
            {{-- Dòng 平均 PHẢI nằm TRONG <thead>, ngay dưới hàng sub-header — KHÔNG chuyển
                 xuống cuối <tbody> (đã xét và bác đề xuất của Redmine #40225):
                 1. Figma (screens/images/SCR-08-s3-monthly-a/b/c.png) vẽ 平均 ngay dưới header,
                    TRÊN 12 dòng tháng, ở CẢ 3 tab; 合計 mới là dòng cuối (chỉ tab 全体).
                 2. Ràng buộc kỹ thuật: <th rowspan="2">MRR累積</th> ở hàng trên phủ xuống chính
                    dòng này, nên dòng 平均 cố tình THIẾU 1 <td>. rowspan KHÔNG vượt qua ranh giới
                    thead/tbody ⇒ chuyển xuống tbody sẽ mất ô phủ, mọi số liệu lệch trái 1 cột —
                    đúng bug #39508 đã fix.
                 Muốn đổi vị trí thì phải ĐỒNG THỜI: bỏ rowspan="2" của MRR累積 + thêm lại ô
                 MRR累積 cho dòng này (cho đủ số ô như dòng tháng). Chờ BA chốt trước. --}}
            <tr class="header-avg-row">
                <td class="avg-label col-date col-date-divider" style="font-weight: 500 !important;">平均</td>
                <td class="num-cell">@{{ avgAll.payment_count }}</td>
                <td class="num-cell">@{{ avgAll.monthly_sales }}</td>
                <td class="num-cell" style="text-align:center !important;">@{{ avgAll.yoy_ratio }}</td>
                <td class="num-cell">@{{ avgAll.sales_per_day }}</td>
                <td class="num-cell" style="text-align:center !important;">@{{ avgAll.mom_ratio }}</td>
                <td class="num-cell">@{{ avgAll.new_count }}</td>
                <td class="num-cell">@{{ avgAll.new_amount }}</td>
                <td class="num-cell">@{{ avgAll.new_yoy }}</td>
                <td class="num-cell">@{{ avgAll.renew_count }}</td>
                <td class="num-cell">@{{ avgAll.renew_amount }}</td>
                <td class="num-cell">@{{ avgAll.renew_yoy }}</td>
                <td class="num-cell">@{{ avgAll.upgrade_count }}</td>
                <td class="num-cell">@{{ avgAll.upgrade_amount }}</td>
                <td class="num-cell">@{{ avgAll.usage_count }}</td>
                <td class="num-cell">@{{ avgAll.usage_amount }}</td>
                <td class="num-cell">@{{ avgAll.cancel_num }}</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="row in tableRows" :key="row.month">
                <td class="col-date col-date-divider">@{{ row.month }}</td>
                <td class="num-cell">@{{ row.mrr }}</td>
                <td class="num-cell">@{{ row.payment_count }}</td>
                <td class="num-cell">@{{ row.monthly_sales }}</td>
                <td class="num-cell"
                    :class="ratioClass(row.yoy_ratio)">
                    @{{ row.yoy_ratio }}
                </td>
                <td class="num-cell">@{{ row.sales_per_day }}</td>
                <td class="num-cell">@{{ row.mom_ratio }}</td>
                <td class="num-cell">@{{ row.new_count }}</td>
                <td class="num-cell">@{{ row.new_amount }}</td>
                <td class="num-cell">@{{ row.new_yoy }}</td>
                <td class="num-cell">@{{ row.renew_count }}</td>
                <td class="num-cell">@{{ row.renew_amount }}</td>
                <td class="num-cell">@{{ row.renew_yoy }}</td>
                <td class="num-cell">@{{ row.upgrade_count }}</td>
                <td class="num-cell">@{{ row.upgrade_amount }}</td>
                <td class="num-cell">@{{ row.usage_count }}</td>
                <td class="num-cell">@{{ row.usage_amount }}</td>
                <td class="num-cell">@{{ row.cancel_num }}</td>
            </tr>
            <tr class="bill-total-row">
                <td class="avg-label col-date col-date-divider">合計</td>
                <td class="num-cell">@{{ totalsAll.mrr }}</td>
                <td class="num-cell">@{{ totalsAll.payment_count }}</td>
                <td class="num-cell">@{{ totalsAll.monthly_sales }}</td>
                {{-- 前年同月比: không cộng dồn được → 「-」 --}}
                <td class="num-cell" style="text-align:center !important;">-</td>
                <td class="num-cell">@{{ totalsAll.sales_per_day }}</td>
                {{-- 前月比: không cộng dồn được → 「-」 --}}
                <td class="num-cell" style="text-align:center !important;">-</td>
                <td class="num-cell">@{{ totalsAll.new_count }}</td>
                <td class="num-cell">@{{ totalsAll.new_amount }}</td>
                <td class="num-cell">-</td>
                <td class="num-cell">@{{ totalsAll.renew_count }}</td>
                <td class="num-cell">@{{ totalsAll.renew_amount }}</td>
                <td class="num-cell">-</td>
                <td class="num-cell">@{{ totalsAll.upgrade_count }}</td>
                <td class="num-cell">@{{ totalsAll.upgrade_amount }}</td>
                <td class="num-cell">@{{ totalsAll.usage_count }}</td>
                <td class="num-cell">@{{ totalsAll.usage_amount }}</td>
                <td class="num-cell">@{{ totalsAll.cancel_num }}</td>
            </tr>
        </tbody>
    </table>
</div>