{# Bảng giá gói VangPOS — dữ liệu từ app/thuong_mai/bang_gia.json qua bang_gia.cho_hien_thi().
   CẤM ghi cứng con số giá trong template này. #}
<section id="bang-gia" style="border-top:1px solid #eee;padding-top:14px;margin-top:6px">
  <div style="font-size:11px;font-weight:800;color:#6b7280;text-transform:uppercase;margin-bottom:8px">Bảng giá gói VangPOS</div>
  <div style="display:grid;gap:8px">
    {% for g in bang_gia.goi %}
    <div class="bg-goi" data-ma="{{ g.ma }}" style="border:1.5px solid #f1e3e3;border-radius:12px;padding:10px 12px;background:#fff">
      <div style="display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap">
        <b style="color:#4a0000">{{ g.ten }}</b>
        <span style="font-weight:800;color:#8b0000">{{ g.gia_hien_thi }}/năm</span>
      </div>
      <div style="font-size:12px;color:#374151;margin-top:2px">
        {% if g.so_chi_nhanh_toi_da %}Tối đa {{ g.so_chi_nhanh_toi_da }} chi nhánh{% else %}Gồm {{ g.so_chi_nhanh_kem }} chi nhánh{% endif %}
        · không giới hạn tài khoản
      </div>
      <div style="font-size:12px;color:#6b7280;margin-top:2px">{{ g.mo_ta }}</div>
    </div>
    {% endfor %}
  </div>
  <p style="font-size:12px;color:#374151;margin-top:8px">Chi nhánh bổ sung: <b>{{ bang_gia.chi_nhanh_bo_sung.gia_hien_thi }}/năm</b> cho mỗi chi nhánh.</p>
  {% if bang_gia.nhieu_nam %}
  <div id="bang-gia-nhieu-nam" style="margin-top:10px">
    <div style="font-size:11px;font-weight:800;color:#6b7280;text-transform:uppercase;margin-bottom:6px">Mua nhiều năm &amp; gia hạn</div>
    <div style="overflow-x:auto">
      <table style="width:100%;min-width:420px;border-collapse:collapse;font-size:12px">
        <thead><tr style="color:#6b7280;text-align:right">
          <th style="text-align:left;padding:4px 6px">Gói</th><th style="padding:4px 6px">1 năm</th>
          <th style="padding:4px 6px">Gia hạn 1 năm</th><th style="padding:4px 6px">2 năm</th><th style="padding:4px 6px">3 năm</th></tr></thead>
        <tbody>
        {% for g in bang_gia.nhieu_nam.goi %}
          <tr style="border-top:1px solid #f1e3e3;text-align:right">
            <th style="text-align:left;padding:4px 6px;color:#4a0000">{{ g.ten }}</th>
            <td style="padding:4px 6px">{{ g.muc[0].gia_hien_thi }}<br><span style="color:#6b7280">{{ g.muc[0].so_thang }} tháng</span></td>
            <td style="padding:4px 6px">{{ g.gia_han_1_nam.gia_hien_thi }}<br><span style="color:#6b7280">{{ g.gia_han_1_nam.so_thang }} tháng</span></td>
            {% for m in g.muc[1:] %}<td style="padding:4px 6px">{{ m.gia_hien_thi }}<br><span style="color:#6b7280">{{ m.so_thang }} tháng</span></td>{% endfor %}
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
    {% for k in ['gia', 'noi_han', 'dieu_kien'] %}{% if bang_gia.nhieu_nam.van_ban[k] %}<p style="font-size:12px;color:#374151;margin-top:4px">{{ bang_gia.nhieu_nam.van_ban[k] }}</p>{% endif %}{% endfor %}
  </div>
  {% endif %}
  <p style="font-size:12px;color:#374151;margin-top:4px">{{ bang_gia.van_ban.tai_khoan }}</p>
  <p style="font-size:12px;color:#374151;margin-top:4px">{{ bang_gia.van_ban.thue }}</p>
  <p style="font-size:12px;color:#374151;margin-top:4px">{{ bang_gia.van_ban.hieu_luc }}</p>
  <p style="font-size:12px;color:#374151;margin-top:4px">{{ bang_gia.van_ban.cap_nhat }}
    <a href="{{ bang_gia.website }}" target="_blank" rel="noopener noreferrer" style="color:#8b0000;text-decoration:underline">{{ bang_gia.website_hien_thi }}</a></p>
</section>