{% extends "base.html" %}
{% block title %}Tải về — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Tải về{% endblock %}

{% block extra_style %}
<style>
  .tv-nhom { font-size: 13px; font-weight: 800; color: #7a1010; letter-spacing: .04em;
             text-transform: uppercase; margin: 22px 0 10px; }
  .tv-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 16px;
             box-shadow: 0 1px 3px rgba(0,0,0,.05); }
  .tv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
  .tv-head { display: flex; align-items: flex-start; gap: 12px; }
  .tv-ico  { width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid;
             place-items: center; font-size: 24px;
             background: linear-gradient(135deg, #fff7e6, #ffe9c7); border: 1px solid #f0d9a8; }
  .tv-ten  { font-size: 15px; font-weight: 800; color: #1f2937; line-height: 1.35; }
  .tv-mota { font-size: 13px; color: #4b5563; margin-top: 5px; line-height: 1.5; }
  .tv-nut  { display: inline-flex; align-items: center; gap: 8px; margin-top: 13px;
             padding: 11px 18px; border-radius: 12px; font-size: 14px; font-weight: 800;
             color: #fff; text-decoration: none; width: 100%; justify-content: center;
             background: linear-gradient(135deg, #7a1010, #a52a2a); }
  .tv-nut:active { transform: scale(.98); }
  .tv-cai  { margin-top: 13px; border-top: 1px dashed #e5e7eb; padding-top: 11px; }
  .tv-cai summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #7a1010;
                    list-style: none; }
  .tv-cai summary::-webkit-details-marker { display: none; }
  .tv-cai ol { margin: 9px 0 0 18px; padding: 0; }
  .tv-cai li { font-size: 12.5px; color: #4b5563; line-height: 1.6; margin-bottom: 5px; }
  .tv-luu { background: #fffbeb; border: 1px solid #fde68a; border-radius: 13px;
            padding: 13px 15px; font-size: 13px; color: #78350f; line-height: 1.6; }
  @media (max-width: 640px) { .tv-grid { grid-template-columns: 1fr; } }
</style>
{% endblock %}

{% block content %}
<div class="max-w-5xl mx-auto px-3 pb-8">

  <div class="tv-luu mb-4">
    <b>Tải xong làm gì?</b> Mỗi ô đều có mục <b>“Hướng dẫn cài”</b> — bấm vào để xem các bước.
    File cài đặt (extension, agent in) phải chép sang <b>đúng máy</b> cần dùng rồi mới cài.
  </div>

  {% set nhom_hien = [] %}
  {% for m in muc %}
    {% if m.nhom not in nhom_hien %}
      {% if nhom_hien.append(m.nhom) %}{% endif %}
      <div class="tv-nhom">{{ m.nhom }}</div>
      <div class="tv-grid">
      {% for x in muc if x.nhom == m.nhom %}
        <div class="tv-card">
          <div class="tv-head">
            <div class="tv-ico">{{ x.icon }}</div>
            <div style="min-width:0">
              <div class="tv-ten">{{ x.ten }}</div>
              <div class="tv-mota">{{ x.mo_ta }}</div>
            </div>
          </div>
          <a class="tv-nut" href="{{ x.link }}">⬇️ {{ x.nut }}</a>
          {% if x.cai %}
          <details class="tv-cai">
            <summary>📖 Hướng dẫn cài</summary>
            <ol>{% for b in x.cai %}<li>{{ b }}</li>{% endfor %}</ol>
          </details>
          {% endif %}
        </div>
      {% endfor %}
      </div>
    {% endif %}
  {% endfor %}

</div>
{% endblock %}