{% extends "base.html" %}
{% block title %}Hướng dẫn sử dụng{% endblock %}
{% block page_subtitle %}Hướng dẫn sử dụng{% endblock %}
{% block content %}
<style>
  .hd-hero {
    background: linear-gradient(135deg, #4a0000, #8b0000);
    border-radius: 24px; color: #fff; padding: 28px 24px;
  }
  .hd-step {
    display: flex; align-items: flex-start; gap: 12px;
    background: #fff; border: 1.5px solid #e5e7eb; border-radius: 16px;
    padding: 12px 14px; position: relative;
  }
  .hd-step-num {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 14px; color: #fff;
    background: linear-gradient(135deg, #4a0000, #8b0000);
  }
  .hd-arrow { text-align: center; color: #d1d5db; font-size: 18px; line-height: 1; margin: 2px 0; }
  .hd-matrix th, .hd-matrix td { border: 1px solid #e5e7eb; }
  .hd-matrix thead th { position: sticky; top: 0; background: #4a0000; color: #fff; z-index: 1; }
  .hd-full { background: #dcfce7; color: #166534; font-weight: 800; }
  .hd-view { background: #fef9c3; color: #854d0e; font-weight: 700; }
  .hd-none { color: #d1d5db; }
  .hd-role-card { border: 1.5px solid #e5e7eb; border-radius: 16px; padding: 14px; background: #fff; }
  .hd-bang { width: 100%; border-collapse: collapse; font-size: 13px; }
  .hd-bang th, .hd-bang td { border: 1px solid #e5e7eb; padding: 6px 10px; text-align: left; }
  .hd-bang thead th { background: #4a0000; color: #fff; font-weight: 700; }
  .hd-guide-card { border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; padding: 16px; }
  .hd-guide-card select { min-height: 42px; width: 100%; border: 1px solid #d1d5db; border-radius: 9px; padding: 7px 9px; background: #fff; }
  @media print {
    .no-print, header, nav, footer { display: none !important; }
    .hd-hero { border-radius: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .hd-matrix thead th { position: static; }
    body { background: #fff !important; }
  }
</style>

<div class="max-w-6xl mx-auto px-3 py-5 space-y-6">

  <!-- ── HERO ── -->
  <div class="hd-hero">
    <div class="flex items-center justify-between gap-3 flex-wrap">
      <div>
        <div class="text-2xl font-black">📖 Hướng Dẫn Sử Dụng App {{ brand.ten_hien_thi }}</div>
        <div class="text-sm opacity-80 mt-1">Phân quyền theo vai trò · Quy trình vận hành 1 ngày · Nguyên tắc bảo mật</div>
        <div class="text-xs opacity-60 mt-1.5">Ma trận quyền bên dưới đọc trực tiếp từ hệ thống — chỉnh quyền trong "Quản lý tài khoản" là trang này tự cập nhật theo.</div>
      </div>
      <button onclick="window.print()" class="no-print btn-ios px-5 py-2.5 font-bold rounded-xl" style="background:#fff;color:#8b0000">🖨️ In trang này</button>
    </div>
  </div>

  <section aria-labelledby="hd-topics-title" class="space-y-3">
    <div>
      <h2 id="hd-topics-title" class="font-black text-gray-800 text-lg">Học theo từng nghiệp vụ</h2>
      <p class="text-sm text-gray-600 mt-1">Chọn nội dung cần xem lại. Hướng dẫn chỉ làm nổi bật từng mục và giải thích chức năng; không tạo hay sửa giao dịch thay anh/chị.</p>
    </div>
    <div>
      <label for="hd-tim-kiem" class="block text-sm font-semibold text-gray-700 mb-1">Tìm nhanh chủ đề hướng dẫn</label>
      <input id="hd-tim-kiem" type="search" class="w-full rounded-xl border border-gray-300 px-4 py-3"
             placeholder="Ví dụ: cầm hàng, trả hàng, bán hàng" autocomplete="off" aria-describedby="hd-ket-qua-tim-kiem">
      <p id="hd-ket-qua-tim-kiem" class="text-xs text-gray-500 mt-1" role="status" aria-live="polite"></p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
      {% for topic_id, topic in huong_dan_noi_dung.items() %}
      <article class="hd-guide-card" data-hd-topic-card>
        <h3 class="font-bold text-gray-800">{{ topic.ten }}</h3>
        <p class="text-xs text-gray-500 mt-1 mb-3">{{ topic.cac_buoc|length }} bước · tiến độ được lưu theo tài khoản</p>
        <label class="block text-xs font-semibold text-gray-600 mb-1" for="huong-dan-buoc-{{ topic_id }}">Bắt đầu từ nội dung</label>
        <select id="huong-dan-buoc-{{ topic_id }}" data-huong-dan-buoc="{{ topic_id }}">
          <option value="0">Từ đầu</option>
          {% for buoc in topic.cac_buoc %}
          <option value="{{ loop.index0 }}">{{ loop.index }}. {{ buoc.tieu_de }}</option>
          {% endfor %}
        </select>
        <div class="flex flex-wrap gap-2 mt-3">
          <button type="button" data-huong-dan-bat-dau="{{ topic_id }}" class="btn-ios px-4 py-2 rounded-lg font-bold text-white" style="background:#710000">Xem từ mục đã chọn</button>
          <button type="button" data-huong-dan-bat-dau="{{ topic_id }}" data-huong-dan-tu-dau class="btn-ios px-4 py-2 rounded-lg font-semibold border">Học lại từ đầu</button>
        </div>
      </article>
      {% endfor %}
    </div>
  </section>
  <script src="{{ url_for('static', filename='js/huong-dan-tim-kiem.js') }}?v=1" defer></script>

  <section aria-labelledby="hd-setup-title" class="space-y-3" id="hd-checklist-cau-hinh">
    <div>
      <h2 id="hd-setup-title" class="font-black text-gray-800 text-lg">✅ Tự kiểm tra cấu hình cửa hàng</h2>
      <p class="text-sm text-gray-600 mt-1">Chỉ hiện trạng thái đã cấu hình, không hiển thị mã số thuế, số tài khoản hay thông tin đăng nhập hóa đơn.</p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
      <article class="hd-guide-card" data-checklist-doi-tuong="ho_so_cua_hang">
        <h3 class="font-bold text-gray-800">Hồ sơ cửa hàng</h3>
        <p class="text-sm text-gray-600 mt-1">Thương hiệu, pháp nhân, địa chỉ và mã số thuế.</p>
        <p class="text-sm font-semibold mt-3" data-checklist-trang-thai aria-live="polite">Đang kiểm tra…</p>
        <ul class="text-xs text-gray-600 mt-2 space-y-1" data-checklist-con-thieu></ul>
        <a href="/thiet-lap-cua-hang" class="inline-block mt-3 text-sm font-bold underline" style="color:#710000">Mở thiết lập cửa hàng</a>
      </article>
      <article class="hd-guide-card" data-checklist-doi-tuong="tai_khoan_nhan_tien">
        <h3 class="font-bold text-gray-800">Tài khoản nhận tiền</h3>
        <p class="text-sm text-gray-600 mt-1">Ngân hàng, số tài khoản và tên chủ tài khoản để tạo QR thanh toán.</p>
        <p class="text-sm font-semibold mt-3" data-checklist-trang-thai aria-live="polite">Đang kiểm tra…</p>
        <ul class="text-xs text-gray-600 mt-2 space-y-1" data-checklist-con-thieu></ul>
        <a href="/thiet-lap-cua-hang" class="inline-block mt-3 text-sm font-bold underline" style="color:#710000">Mở thiết lập cửa hàng</a>
      </article>
      <article class="hd-guide-card" data-checklist-doi-tuong="hoa_don_dien_tu">
        <h3 class="font-bold text-gray-800">Hóa đơn điện tử</h3>
        <p class="text-sm text-gray-600 mt-1">Cần nhập thông tin nhà cung cấp và kiểm tra kết nối riêng.</p>
        <p class="text-sm font-semibold mt-3" data-checklist-trang-thai aria-live="polite">Đang kiểm tra…</p>
        <ul class="text-xs text-gray-600 mt-2 space-y-1" data-checklist-con-thieu></ul>
        <a href="/cong-thuc" class="inline-block mt-3 text-sm font-bold underline" style="color:#710000">Mở phần hóa đơn điện tử</a>
      </article>
    </div>
    <p class="text-xs text-gray-500" id="hd-checklist-loi" role="status" aria-live="polite"></p>
  </section>
  <script src="{{ url_for('static', filename='js/huong-dan-checklist.js') }}?v=1" defer></script>

  <!-- ── QUY TRÌNH 1 NGÀY ── -->
  <div>
    <h2 class="font-black text-gray-800 text-lg mb-3">🕐 Quy trình vận hành một ngày</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div class="space-y-1.5">
        <div class="hd-step">
          <span class="hd-step-num">1</span>
          <div><b>Mở ca — Kiểm tiền đầu ca</b><div class="text-xs text-gray-500 mt-0.5">Vào <b>Sổ quỹ → Kiểm tiền</b>, đếm từng mệnh giá, lưu phiếu <b>Đầu ca</b>, in phiếu 2 người ký bàn giao. Số đếm này là MỐC đối chiếu cả ca — đếm sai là lệch cả ngày.</div></div>
        </div>
        <div class="hd-arrow">▼</div>
        <div class="hd-step">
          <span class="hd-step-num">2</span>
          <div><b>Cập nhật bảng giá vàng</b><div class="text-xs text-gray-500 mt-0.5">GĐ/PGĐ/Quản lý vào trang chủ nhập giá mới → màn hình TV tự đổi sau tối đa 30 giây.</div></div>
        </div>
        <div class="hd-arrow">▼</div>
        <div class="hd-step">
          <span class="hd-step-num">3</span>
          <div><b>Giao dịch trong ca</b><div class="text-xs text-gray-500 mt-0.5">
            💎 <b>Bán hàng</b>: quét mã vạch → chọn hình thức TM/CK/cả hai (nhập đúng số tiền từng khoản) → Tạo hóa đơn → in giấy đảm bảo.<br>
            🛒 <b>Mua hàng</b> · 💍 <b>Cầm hàng</b> · 🛍️ <b>Đặt hàng</b> · 🔧 <b>Gia công</b>: tạo phiếu tương ứng, tiền tự ghi vào sổ quỹ đúng hình thức thanh toán.<br>
            🔄 Khách đổi hàng: dùng nút <b>"Đổi hàng"</b> trong 👁️ Xem hóa đơn — KHÔNG xóa hóa đơn để tạo lại (sẽ lệch quỹ).</div></div>
        </div>
      </div>
      <div class="space-y-1.5">
        <div class="hd-step">
          <span class="hd-step-num">4</span>
          <div><b>Cần sửa phiếu đã chốt / bổ sung cọc?</b><div class="text-xs text-gray-500 mt-0.5">Nhân viên bấm <b>📤 Gửi Duyệt</b> → GĐ/PGĐ nhận chuông báo, vào <b>Duyệt yêu cầu</b> xem đối chiếu trước–sau, bấm Duyệt/Từ chối (kèm PIN) → nhân viên nhận chuông kết quả ngay, in phiếu mới nếu được duyệt.</div></div>
        </div>
        <div class="hd-arrow">▼</div>
        <div class="hd-step">
          <span class="hd-step-num">5</span>
          <div><b>Xuất hóa đơn điện tử (nếu khách cần)</b><div class="text-xs text-gray-500 mt-0.5">Trong danh sách hóa đơn bấm 📤 → extension tự điền form IAM MyInvoice trên Chrome.</div></div>
        </div>
        <div class="hd-arrow">▼</div>
        <div class="hd-step">
          <span class="hd-step-num">6</span>
          <div><b>Đóng ca — Kiểm tiền cuối ca</b><div class="text-xs text-gray-500 mt-0.5">Đếm tiền thực tế, so với <b>"Tổng theo sổ quỹ (dự kiến)"</b>. Nếu lệch: mở bảng <b>"Chi tiết cách tính dự kiến"</b> ngay bên dưới để soi từng dòng, tìm đúng giao dịch gây lệch rồi báo quản lý — không tự ý sửa.</div></div>
        </div>
      </div>
    </div>
  </div>

  <!-- ── VAI TRÒ TỪNG BỘ PHẬN ── -->
  <div>
    <h2 class="font-black text-gray-800 text-lg mb-3">👥 Vai trò của từng bộ phận</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
      <div class="hd-role-card">
        <div class="font-black text-red-800">👑 Giám đốc</div>
        <div class="text-xs text-gray-500 mt-1">Toàn quyền, kể cả sao lưu/khôi phục dữ liệu. Duyệt yêu cầu sửa phiếu, sửa/xóa sổ quỹ (kèm PIN), đổi hàng, chỉnh quyền các vai trò.</div>
      </div>
      <div class="hd-role-card">
        <div class="font-black text-red-700">🎖️ Phó Giám đốc</div>
        <div class="text-xs text-gray-500 mt-1">Toàn quyền vận hành như GĐ, <b>trừ</b> sao lưu/reset/khôi phục dữ liệu hệ thống.</div>
      </div>
      <div class="hd-role-card">
        <div class="font-black text-amber-700">🧑‍💼 Quản lý</div>
        <div class="text-xs text-gray-500 mt-1">Điều hành toàn bộ nghiệp vụ hằng ngày; xem danh sách tài khoản nhưng không tạo/sửa tài khoản, không đụng dữ liệu hệ thống.</div>
      </div>
      <div class="hd-role-card">
        <div class="font-black text-blue-700">🧾 Kế toán</div>
        <div class="text-xs text-gray-500 mt-1">Sổ quỹ, kiểm tiền, báo cáo, lương/KPI. Các nghiệp vụ bán/mua/cầm chỉ xem để đối chiếu, không tự tạo phiếu.</div>
      </div>
      <div class="hd-role-card">
        <div class="font-black text-green-700">📦 Thủ kho</div>
        <div class="text-xs text-gray-500 mt-1">Tồn kho, kiểm kho, phiếu mua hàng (nhập hàng). Xem bảng giá và đơn đặt để chuẩn bị hàng.</div>
      </div>
      <div class="hd-role-card">
        <div class="font-black text-purple-700">🛍️ Nhân viên bán hàng</div>
        <div class="text-xs text-gray-500 mt-1">Trực quầy: bán, mua, cầm, đặt hàng, gia công, kiểm tiền giao ca, CRM. Sửa phiếu đã chốt phải gửi GĐ/PGĐ duyệt.</div>
      </div>
      <div class="hd-role-card">
        <div class="font-black text-teal-700">💰 Thủ quỹ</div>
        <div class="text-xs text-gray-500 mt-1">Chuyên trách sổ quỹ + kiểm tiền giao ca; xem bảng giá, tồn kho, báo cáo để đối chiếu.</div>
      </div>
      <div class="hd-role-card">
        <div class="font-black text-gray-600">🔨 Thợ</div>
        <div class="text-xs text-gray-500 mt-1">Xem danh sách đơn gia công cần làm, bảng giá và tồn kho. Không thao tác tiền.</div>
      </div>
    </div>
  </div>

  <!-- ── MA TRẬN PHÂN QUYỀN (live từ DB) ── -->
  <div>
    <h2 class="font-black text-gray-800 text-lg mb-1">🔐 Ma trận phân quyền chi tiết</h2>
    <div class="text-xs text-gray-400 mb-3">
      <span class="hd-full px-2 py-0.5 rounded">✓ Toàn quyền</span>
      <span class="hd-view px-2 py-0.5 rounded ml-1">👁 Chỉ xem</span>
      <span class="ml-1">— Không truy cập</span>
      · Dữ liệu thời gian thực từ hệ thống{% for role, info in role_perms.items() %}{% if info.is_custom %}{% if loop.first %} (đã tùy chỉnh: {% endif %}{{ role_labels[role] }}{% if not loop.last %}, {% endif %}{% endif %}{% endfor %})
    </div>
    <div class="overflow-x-auto rounded-2xl border border-gray-200">
      <table class="hd-matrix data-card-table w-full text-xs bg-white" style="border-collapse:collapse">
        <thead>
          <tr>
            <th class="px-3 py-2 text-left">Chức năng</th>
            {% for role, label in role_labels.items() %}
            <th class="px-2 py-2 text-center whitespace-nowrap">{{ label }}</th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          {% for group, perms in groups.items() %}
          <tr><td colspan="{{ role_labels|length + 1 }}" class="px-3 py-1.5 font-black text-gray-500 uppercase text-[10px] dct-group" style="background:#f9fafb">{{ group }}</td></tr>
            {% for key, label in perms %}
            <tr>
              <td class="px-3 py-1.5 font-semibold text-gray-700 dct-title">{{ label }}</td>
              {% for role in role_labels %}
                {% set v = matrix[role][key] %}
                <td class="px-2 py-1.5 text-center {{ 'hd-full' if v == 'full' else ('hd-view' if v == 'view' else 'hd-none') }}" data-label="{{ role_labels[role] }}">
                  {{ '✓' if v == 'full' else ('👁' if v == 'view' else '—') }}
                </td>
              {% endfor %}
            </tr>
            {% endfor %}
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>


  <!-- ── CHÍNH SÁCH KPI CHO NHÂN VIÊN BÁN HÀNG ── -->
  <div id="kpi">
    <h2 class="font-black text-gray-800 text-lg mb-1">💰 Chính sách KPI nhân viên bán hàng</h2>
    <p class="text-xs text-gray-500 mb-3">
      Áp dụng từ tháng 8/2026 · xem kết quả của bạn tại
      <a href="/kpi-cua-toi" class="font-semibold" style="color:#8b0000">KPI của tôi</a>
    </p>

    <!-- BẢN THÔNG BÁO (dán bảng tin) -->
    <div class="ios-card p-4 mb-4" style="background:#fffbeb;border:2px solid #fde68a">
      <div class="font-black text-base mb-2" style="color:#78350f">📢 THÔNG BÁO</div>
      <p class="text-sm mb-2" style="color:#78350f;line-height:1.7">
        Kể từ <b>tháng 8/2026</b>, ngoài lương cứng, mỗi nhân viên bán hàng được hưởng thêm
        <b>hoa hồng theo kết quả bán hàng của chính mình</b>.
      </p>
      <ul class="text-sm mb-2" style="color:#78350f;line-height:1.8;margin-left:18px;list-style:disc">
        <li>Hoa hồng tính trên <b>từng món bạn bán được</b>, cộng dồn cả tháng.</li>
        <li>Không phải món nào cũng như nhau: món càng cần bạn tư vấn, thuyết phục thì
            phần ghi nhận cho bạn càng lớn.</li>
        <li>Khách <b>lần đầu</b> đến tiệm, khách <b>bạn chủ động mời</b>, khách được
            <b>giới thiệu</b> — đều được ghi nhận cao hơn.</li>
        <li>Cuối tháng có <b>điểm tháng</b> chấm chung 5 mặt: doanh thu, hồ sơ khách,
            khách quay lại, kỷ luật. Điểm càng cao, phần hoa hồng được hưởng càng nhiều.</li>
        <li>Vào <b>Thêm → KPI của tôi</b> để xem mình đang ở đâu, cập nhật ngay sau mỗi hóa đơn.</li>
      </ul>
      <p class="text-sm font-semibold" style="color:#78350f">
        ⚠️ Điều kiện bắt buộc: <b>đăng nhập đúng tài khoản của mình</b> khi bán hàng, và
        <b>ghi đầy đủ thông tin khách</b>. Hóa đơn không có tên người bán thì không tính cho ai cả.
      </p>
    </div>

    <!-- HƯỚNG DẪN CHI TIẾT -->
    <div class="ios-card p-4 mb-3">
      <div class="font-black text-base mb-3" style="color:#8b0000">📖 Hướng dẫn chi tiết</div>

      <div class="mb-4">
        <b class="text-sm">1. Thu nhập của tôi gồm những gì?</b>
        <div class="text-sm text-gray-600 mt-1" style="line-height:1.75">
          <b>Lương cứng</b> (không đổi) <b>+ hoa hồng bán hàng</b> (mới). Hoa hồng cộng vào
          bảng lương cuối tháng, hiện ở cột KPI.
        </div>
      </div>

      <div class="mb-4">
        <b class="text-sm">2. Hoa hồng của mỗi món tính thế nào?</b>
        <div class="text-sm text-gray-600 mt-1" style="line-height:1.75">
          Mỗi món bán ra được tính theo <b>giá trị món</b> nhân với <b>phần công của bạn</b>
          trong món đó. Phần công ấy phụ thuộc ba điều:
          <ul style="margin:6px 0 0 18px;list-style:disc">
            <li><b>Món hàng gì</b> — vàng ta khách xem giá sẵn trên mạng rồi mới tới nên
                phần công thấp; trang sức và bạc cần bạn tư vấn mẫu, cho thử, thuyết phục
                nên phần công cao hơn nhiều.</li>
            <li><b>Bán cho ai</b> — khách lần đầu tới tiệm là công của bạn lớn nhất; khách
                đã mua nhiều lần thì phần lớn là nhờ uy tín tiệm nên phần công giảm dần.</li>
            <li><b>Bán bằng cách nào</b> — bạn gọi mời, khách được giới thiệu, khách quay
                lại tìm đúng bạn, hoặc bạn bán kèm được món thứ hai: đều là công của bạn.
                Khách tự vào mua đúng thứ họ định mua thì thấp hơn.</li>
          </ul>
        </div>
      </div>

      <div class="mb-4">
        <b class="text-sm">3. Điểm tháng là gì, ảnh hưởng ra sao?</b>
        <div class="text-sm text-gray-600 mt-1" style="line-height:1.75">
          Cuối tháng bạn được chấm điểm trên <b>5 mặt</b>, mỗi mặt có <b>tỷ trọng</b> khác nhau
          (mặt nào tỷ trọng cao thì ảnh hưởng điểm tổng nhiều hơn):
          <div class="mt-2 overflow-x-auto"><table class="hd-bang" style="min-width:340px">
            <thead><tr><th>Mặt chấm điểm</th><th>Tỷ trọng</th></tr></thead>
            <tbody>
              <tr><td>Doanh thu trang sức + bạc</td><td class="font-semibold">25</td></tr>
              <tr><td>Doanh thu vàng cao tuổi</td><td>20</td></tr>
              <tr><td>Hồ sơ khách — phần khó</td><td>20</td></tr>
              <tr><td>Kỷ luật — an ninh</td><td>20</td></tr>
              <tr><td>Khách cũ quay lại</td><td>15</td></tr>
            </tbody>
          </table></div>
          <div class="mt-2">
            Mỗi mặt, bạn có một <b>"mức đạt"</b> = kết quả của bạn so với chỉ tiêu của mặt đó
            (chỉ tiêu riêng từng người, xem ở <b>KPI của tôi</b>) — <b>đạt đúng chỉ tiêu = mức đạt
            100%</b>, đạt hơn thì mức đạt tăng theo nhưng <b>tối đa 120%</b> (vượt bao nhiêu cũng
            chỉ tính tới đó). <b>Điểm tháng = trung bình cộng có tỷ trọng</b> của 5 mức đạt này.
          </div>
          <div class="mt-2 font-semibold" style="color:#8b0000">
            → Cách hiểu đơn giản nhất: <u>đạt đúng 100% chỉ tiêu ở CẢ 5 mặt = điểm tháng 100</u>,
            tự động rơi vào mức nhận 100% hoa hồng. Muốn lên mức 120% thì cần có mặt vượt hẳn
            chỉ tiêu (bù cho các mặt khác).
          </div>
          <div class="mt-3 overflow-x-auto"><table class="hd-bang" style="min-width:320px">
            <thead><tr><th>Điểm tháng</th><th>Được hưởng</th></tr></thead>
            <tbody>
              <tr><td>Dưới 70</td><td class="text-red-600 font-semibold">Không có hoa hồng</td></tr>
              <tr><td>70 – 85</td><td>70% phần đã tích</td></tr>
              <tr><td>85 – 100</td><td class="font-semibold">100% phần đã tích</td></tr>
              <tr><td>Trên 100</td><td class="text-emerald-600 font-bold">120% phần đã tích</td></tr>
            </tbody>
          </table></div>
          <div class="mt-2 text-xs text-gray-500">
            Nghĩa là: bán tốt nhưng để lệch quỹ, đi muộn nhiều, sai kiểm kho — vẫn mất hoa hồng.
          </div>

          <div class="mt-3 p-3 rounded-xl" style="background:#f8fafc;border:1px solid #e2e8f0">
            <b class="text-xs" style="color:#334155">📐 Ví dụ minh họa (số giả định, không phải chỉ tiêu thật của bạn)</b>
            <div class="mt-2 overflow-x-auto"><table class="hd-bang" style="min-width:480px;font-size:11.5px">
              <thead><tr><th>Tình huống</th><th>Trang sức+bạc</th><th>Vàng cao</th><th>Hồ sơ khách</th><th>Kỷ luật</th><th>Khách quay lại</th><th>→ Điểm tháng</th></tr></thead>
              <tbody>
                <tr><td>Vừa đủ ngưỡng thấp nhất</td><td>70%</td><td>70%</td><td>70%</td><td>70%</td><td>70%</td><td class="font-semibold">70</td></tr>
                <tr><td>Đạt tròn chỉ tiêu mọi mặt</td><td>100%</td><td>100%</td><td>100%</td><td>100%</td><td>100%</td><td class="font-semibold">100</td></tr>
                <tr><td>Bán trang sức rất tốt, còn lại vừa đủ</td><td class="text-emerald-600 font-bold">120%</td><td>100%</td><td>100%</td><td>100%</td><td>70%</td><td class="text-emerald-600 font-bold">100,5</td></tr>
                <tr><td>Kỷ luật kém kéo tụt dù bán tốt</td><td>110%</td><td>110%</td><td>100%</td><td class="text-red-600 font-bold">50%</td><td>100%</td><td>94,5</td></tr>
              </tbody>
            </table></div>
            <div class="mt-1.5 text-xs text-gray-500">Dòng cuối cho thấy: dù 2 mặt doanh thu đều vượt chỉ tiêu (110%), kỷ luật tụt còn
            50% vẫn kéo điểm tổng xuống 94,5 (rớt khỏi mức 100% hoa hồng) — vì kỷ luật chiếm tỷ trọng 20, không nhỏ.</div>
          </div>

          <div class="mt-3">
            <b class="text-xs">🔎 Kỷ luật tính cụ thể ra sao?</b>
            <div class="text-xs text-gray-500 mt-1">Khởi điểm <b>100 điểm</b>, mỗi vi phạm bị trừ:</div>
            <div class="mt-1.5 overflow-x-auto"><table class="hd-bang" style="min-width:280px;font-size:11.5px">
              <thead><tr><th>Vi phạm</th><th>Trừ mỗi lần</th></tr></thead>
              <tbody>
                <tr><td>Đi muộn (theo chấm công)</td><td>−5 điểm</td></tr>
                <tr><td>Sai kiểm kho</td><td>−10 điểm</td></tr>
                <tr><td>Lệch quỹ ĐÃ CHỐT là lỗi của bạn</td><td>−20 điểm</td></tr>
              </tbody>
            </table></div>
            <div class="mt-1 text-xs text-gray-500">Không vi phạm gì → giữ nguyên 100 điểm ở mặt này, không cần "cố gắng thêm" — chỉ cần đừng vi phạm.</div>
          </div>
        </div>
      </div>

      <div class="mb-4">
        <b class="text-sm">4. Ví dụ cụ thể: mỗi loại hàng hoa hồng bao nhiêu %?</b>
        <div class="text-sm text-gray-600 mt-1" style="line-height:1.75">
          Tính bình quân trên <b>doanh số thực tế bán ra gần đây</b> của cả tiệm, hoa hồng
          <b>CƠ SỞ</b> (trước khi nhân hệ số điểm tháng ở mục 3) mỗi loại hàng là:
          <div class="mt-2 overflow-x-auto"><table class="hd-bang" style="min-width:520px">
            <thead><tr><th>Loại hàng</th><th>Hoa hồng bình quân</th><th>Ví dụ</th></tr></thead>
            <tbody>
              {% if kpi_hh_bq.trang_suc.du_lieu %}
              <tr>
                <td>💍 Trang sức / vàng tây (10K, 14K, 18K...)</td>
                <td class="font-semibold text-emerald-600">≈ {{ '%.2f'|format(kpi_hh_bq.trang_suc.pct) }}% doanh số<br>
                  <span class="text-xs text-gray-400">(~{{ '{:,.0f}'.format(kpi_hh_bq.trang_suc.per_trieu) }}đ / 1 triệu)</span></td>
                <td>Bán 1 vòng tay 18K giá <b>10.800.000đ</b><br>→ hoa hồng cơ sở ≈
                  <b>{{ '{:,.0f}'.format(10.8*kpi_hh_bq.trang_suc.per_trieu) }}đ</b></td>
              </tr>
              {% endif %}
              {% if kpi_hh_bq.bac.du_lieu %}
              <tr>
                <td>🥈 Bạc (925...)</td>
                <td class="font-semibold text-emerald-600">≈ {{ '%.2f'|format(kpi_hh_bq.bac.pct) }}% doanh số<br>
                  <span class="text-xs text-gray-400">(~{{ '{:,.0f}'.format(kpi_hh_bq.bac.per_trieu) }}đ / 1 triệu)</span></td>
                <td>Bán 1 nhẫn bạc giá <b>850.000đ</b><br>→ hoa hồng cơ sở ≈
                  <b>{{ '{:,.0f}'.format(0.85*kpi_hh_bq.bac.per_trieu) }}đ</b></td>
              </tr>
              {% endif %}
              {% if kpi_hh_bq.vang_cao.du_lieu %}
              <tr>
                <td>🟡 Vàng cao tuổi (9999, 995, 24K...)</td>
                <td class="font-semibold" style="color:#92400e">≈ {{ '%.3f'|format(kpi_hh_bq.vang_cao.pct) }}% doanh số<br>
                  <span class="text-xs text-gray-400">(~{{ '{:,.0f}'.format(kpi_hh_bq.vang_cao.per_trieu) }}đ / 1 triệu)</span></td>
                <td>Bán 2 chỉ vàng 9999 giá <b>29.000.000đ</b><br>→ hoa hồng cơ sở ≈
                  <b>{{ '{:,.0f}'.format(29*kpi_hh_bq.vang_cao.per_trieu) }}đ</b></td>
              </tr>
              {% endif %}
            </tbody>
          </table></div>
          {% if not (kpi_hh_bq.vang_cao.du_lieu and kpi_hh_bq.trang_suc.du_lieu and kpi_hh_bq.bac.du_lieu) %}
          <div class="mt-2 text-xs text-red-500">⚠️ Một vài loại hàng chưa đủ dữ liệu bán ra gần
            đây để tính bình quân — bảng trên hiện chỉ những loại đã có số liệu, sẽ tự đủ khi có
            thêm hóa đơn.</div>
          {% endif %}
          <div class="mt-2 text-xs text-gray-500">
            Vì sao vàng cao tuổi thấp hơn hẳn? Giá vàng ta niêm yết công khai trên bảng giá, khách
            xem trước rồi mới tới tiệm nên phần công của bạn ít — khác hẳn trang sức/bạc cần bạn
            tư vấn mẫu, tuổi, size mới chốt được (đúng như mục 2). Con số trên là <b>bình quân
            chung</b> của cả tiệm{% if kpi_hh_bq.thang_dung %} (theo doanh số tháng
            {{ kpi_hh_bq.thang_dung|join(', ') }}){% endif %}, <b>tự cập nhật</b> theo doanh số
            thực tế — món cụ thể của bạn có thể cao/thấp hơn một chút tùy cách bán, nhưng cộng dồn
            cả tháng thì đúng theo tỷ lệ này.
          </div>
          <div class="mt-2 text-xs font-semibold" style="color:#8b0000">
            ⚠️ Đây mới là hoa hồng CƠ SỞ. Số bạn <u>thực nhận</u> còn phải nhân với hệ số theo
            điểm tháng (mục 3) — xem ví dụ đầy đủ ở mục 5.
          </div>
        </div>
      </div>

      <div class="mb-4">
        <b class="text-sm">5. Ước tính cả tháng bạn nhận được bao nhiêu?</b>
        <div class="text-sm text-gray-600 mt-1" style="line-height:1.75">
          <div class="p-3 rounded-xl" style="background:#f8fafc;border:1px solid #e2e8f0">
            <b class="text-xs" style="color:#334155">📐 Tháng bình thường (số giả định để minh
              họa cách tính, không phải doanh số thật của bạn)</b>
            <div class="mt-1.5 text-xs text-gray-500">Giả sử trong 1 tháng bạn bán được:</div>
            {% set vc_hh = (1000*kpi_hh_bq.vang_cao.per_trieu)|round|int %}
            {% set ts_hh = (100*kpi_hh_bq.trang_suc.per_trieu)|round|int %}
            {% set bac_hh = (20*kpi_hh_bq.bac.per_trieu)|round|int %}
            {% set tong_hh = vc_hh + ts_hh + bac_hh %}
            <ul class="text-xs mt-1" style="margin-left:16px;list-style:disc;color:#475569">
              <li>Vàng cao tuổi: <b>1.000.000.000đ</b> → hoa hồng cơ sở ≈ <b>{{ '{:,.0f}'.format(vc_hh) }}đ</b></li>
              <li>Trang sức: <b>100.000.000đ</b> → hoa hồng cơ sở ≈ <b>{{ '{:,.0f}'.format(ts_hh) }}đ</b></li>
              <li>Bạc: <b>20.000.000đ</b> → hoa hồng cơ sở ≈ <b>{{ '{:,.0f}'.format(bac_hh) }}đ</b></li>
            </ul>
            <div class="mt-1.5 text-xs font-semibold">→ Tổng hoa hồng cơ sở cả tháng ≈
              <b>{{ '{:,.0f}'.format(tong_hh) }}đ</b></div>
            <div class="mt-2 overflow-x-auto"><table class="hd-bang" style="min-width:420px;font-size:11.5px">
              <thead><tr><th>Điểm tháng của bạn</th><th>Mức hưởng</th><th>Số thực nhận (cộng vào lương cứng)</th></tr></thead>
              <tbody>
                <tr><td>Dưới 70</td><td class="text-red-600 font-semibold">0%</td><td class="text-red-600 font-semibold">0đ</td></tr>
                <tr><td>70 – 85</td><td>70%</td><td>≈ {{ '{:,.0f}'.format((tong_hh*0.7)|round) }}đ</td></tr>
                <tr><td>85 – 100</td><td class="font-semibold">100%</td><td class="font-semibold">≈ {{ '{:,.0f}'.format(tong_hh) }}đ</td></tr>
                <tr><td>Trên 100</td><td class="text-emerald-600 font-bold">120%</td><td class="text-emerald-600 font-bold">≈ {{ '{:,.0f}'.format((tong_hh*1.2)|round) }}đ</td></tr>
              </tbody>
            </table></div>
            <div class="mt-1.5 text-xs text-gray-500">
              Cùng một doanh số bán ra, chỉ khác điểm tháng — số thực nhận có thể là <b>0đ</b>
              hoặc gấp rưỡi số ở mức 70%. Đây là lý do 5 mặt chấm điểm ở mục 3 (đặc biệt kỷ luật,
              hồ sơ khách, khách quay lại) quan trọng không kém doanh thu — bán tốt mà điểm dưới
              70 vẫn <b>0đ</b>.
            </div>
          </div>

          <div class="p-3 rounded-xl mt-3" style="background:#fff7ed;border:1px solid #fed7aa">
            <b class="text-xs" style="color:#9a3412">🔥 Tháng cao điểm (VD: mùa cưới, lễ Tết —
              số giả định)</b>
            <div class="mt-1.5 text-xs text-gray-500">Giả sử tháng đó bạn bán được:</div>
            {% set vc_hh2 = (15000*kpi_hh_bq.vang_cao.per_trieu)|round|int %}
            {% set ts_hh2 = (250*kpi_hh_bq.trang_suc.per_trieu)|round|int %}
            {% set bac_hh2 = (50*kpi_hh_bq.bac.per_trieu)|round|int %}
            {% set tong_hh2 = vc_hh2 + ts_hh2 + bac_hh2 %}
            <ul class="text-xs mt-1" style="margin-left:16px;list-style:disc;color:#7c2d12">
              <li>Vàng cao tuổi: <b>15.000.000.000đ</b> → hoa hồng cơ sở ≈ <b>{{ '{:,.0f}'.format(vc_hh2) }}đ</b></li>
              <li>Trang sức: <b>250.000.000đ</b> → hoa hồng cơ sở ≈ <b>{{ '{:,.0f}'.format(ts_hh2) }}đ</b></li>
              <li>Bạc: <b>50.000.000đ</b> → hoa hồng cơ sở ≈ <b>{{ '{:,.0f}'.format(bac_hh2) }}đ</b></li>
            </ul>
            <div class="mt-1.5 text-xs font-semibold" style="color:#9a3412">→ Tổng hoa hồng cơ sở
              cả tháng ≈ <b>{{ '{:,.0f}'.format(tong_hh2) }}đ</b></div>
            <div class="mt-2 overflow-x-auto"><table class="hd-bang" style="min-width:420px;font-size:11.5px">
              <thead><tr><th>Điểm tháng của bạn</th><th>Mức hưởng</th><th>Số thực nhận (cộng vào lương cứng)</th></tr></thead>
              <tbody>
                <tr><td>Dưới 70</td><td class="text-red-600 font-semibold">0%</td><td class="text-red-600 font-semibold">0đ</td></tr>
                <tr><td>70 – 85</td><td>70%</td><td>≈ {{ '{:,.0f}'.format((tong_hh2*0.7)|round) }}đ</td></tr>
                <tr><td>85 – 100</td><td class="font-semibold">100%</td><td class="font-semibold">≈ {{ '{:,.0f}'.format(tong_hh2) }}đ</td></tr>
                <tr><td>Trên 100</td><td class="text-emerald-600 font-bold">120%</td><td class="text-emerald-600 font-bold">≈ {{ '{:,.0f}'.format((tong_hh2*1.2)|round) }}đ</td></tr>
              </tbody>
            </table></div>
            <div class="mt-1.5 text-xs text-gray-500">
              Doanh số vàng cao gấp 15 lần tháng bình thường, nhưng hoa hồng cơ sở chỉ tăng theo
              đúng tỷ lệ vàng cao đóng góp — trang sức + bạc bán nhiều hơn trong mùa cao điểm vẫn
              là phần đóng góp lớn cho hoa hồng, dù doanh số nhỏ hơn nhiều so với vàng cao.
            </div>
          </div>
        </div>
      </div>

      <div class="mb-4">
        <b class="text-sm">6. Làm gì để được nhiều hơn?</b>
        <div class="text-sm text-gray-600 mt-1" style="line-height:1.75">
          <ul style="margin:0 0 0 18px;list-style:disc">
            <li><b>Luôn đăng nhập tài khoản của mình</b> trước khi bán — nếu không, hóa đơn
                không tính cho ai.</li>
            <li><b>Ghi đủ tên và số điện thoại khách</b> — hóa đơn để trống thông tin khách
                bị tính ở mức thấp nhất.</li>
            <li><b>Mặt "Hồ sơ khách" tính riêng</b> — SĐT/CCCD chỉ là điều kiện sàn, KHÔNG được
                tính điểm ở mặt này. Muốn ăn điểm mặt này, hóa đơn phải có thêm ít nhất MỘT trong
                hai: <b>ngày sinh của khách</b> (điền trong hồ sơ CRM) hoặc <b>ghi chú chăm sóc</b>
                (sở thích, thói quen, dịp đặc biệt...). Hỏi thêm ngày sinh khi lập hóa đơn là cách
                nhanh nhất để ăn điểm mặt này.</li>
            <li><b>Chọn ô "Khách đến từ đâu"</b> trên trang Bán hàng. Nếu bạn gọi mời khách
                hoặc khách được người quen giới thiệu, chọn đúng mục đó.</li>
            <li><b>Bấm "📞 Đã liên hệ"</b> trong hồ sơ khách mỗi khi bạn gọi/nhắn hỏi thăm.
                Khách quay lại mua trong 30 ngày sau đó sẽ được ghi nhận là công của bạn.</li>
            <li><b>Giới thiệu thêm trang sức, bạc</b> — đây là nhóm hàng phần công của bạn
                lớn nhất.</li>
            <li><b>Bán kèm món thứ hai</b> cho cùng một khách.</li>
          </ul>
        </div>
      </div>

      <div class="mb-4">
        <b class="text-sm">7. Tôi xem kết quả của mình ở đâu?</b>
        <div class="text-sm text-gray-600 mt-1" style="line-height:1.75">
          <b>Thêm → KPI của tôi</b>. Trang đó hiện: điểm tháng, mức đang hưởng, còn bao
          nhiêu điểm nữa lên mức trên, tiến độ từng chỉ tiêu, số tiền tạm tính, và
          từng món bạn đã bán kèm phần công được ghi nhận. Số cập nhật ngay sau mỗi hóa đơn.
          <br class="mt-1">
          <b>📅 Không cần đợi cuối tháng mới biết</b> — ngay từ những ngày đầu tháng, trang này
          còn hiện thêm khung <b>"Tiến độ dự kiến"</b>: nếu bạn giữ đúng tốc độ bán hàng như hiện
          tại tới hết tháng thì điểm tháng sẽ khoảng bao nhiêu — để biết SỚM có đang trên đà đạt
          mốc 70 điểm hay không, còn kịp điều chỉnh thay vì tới cuối tháng mới biết là không đạt.
          Khung này tự biến mất khi tháng đã kết thúc (lúc đó chỉ còn số chính thức).
        </div>
      </div>

      <div class="mb-4">
        <b class="text-sm">8. Đang thử việc thì sao?</b>
        <div class="text-sm text-gray-600 mt-1" style="line-height:1.75">
          Kết quả vẫn được ghi nhận đầy đủ và là căn cứ xét lên chính thức. Hoa hồng bắt
          đầu nhận từ khi thành nhân viên chính thức.
        </div>
      </div>

      <div>
        <b class="text-sm">9. Thấy số chưa đúng thì báo ai?</b>
        <div class="text-sm text-gray-600 mt-1" style="line-height:1.75">
          Báo quản lý ngay trong tháng, kèm mã hóa đơn cụ thể. Mỗi món đều có ghi rõ lý do
          được chấm như vậy trong trang KPI của tôi nên rất dễ đối chiếu. Số chốt cuối tháng
          mới là số chính thức.
        </div>
      </div>
    </div>
  </div>

  <!-- ── NGUYÊN TẮC BẢO MẬT ── -->
  <div>
    <h2 class="font-black text-gray-800 text-lg mb-3">🛡️ Nguyên tắc bảo mật — mọi người phải thuộc</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
      <div class="hd-role-card"><b>🔑 Mỗi người 1 tài khoản riêng</b><div class="text-xs text-gray-500 mt-1">Không dùng chung, không cho mượn. Mọi thao tác đều ghi nhật ký theo tên đăng nhập — dùng chung tài khoản là mất dấu vết khi cần truy lại.</div></div>
      <div class="hd-role-card"><b>🔢 Mã PIN là lớp khóa thứ hai</b><div class="text-xs text-gray-500 mt-1">Các thao tác chạm đến tiền đã chốt (sửa/xóa hóa đơn, sổ quỹ, đổi hàng, duyệt) đều đòi thêm PIN. Không đọc PIN cho người khác, kể cả qua điện thoại.</div></div>
      <div class="hd-role-card"><b>📤 Sửa phiếu đã chốt = phải qua duyệt</b><div class="text-xs text-gray-500 mt-1">Nhân viên không sửa trực tiếp phiếu đã hoàn tất — gửi yêu cầu để GĐ/PGĐ xem đối chiếu trước–sau rồi mới duyệt. Đây là quy trình, không phải làm khó.</div></div>
      <div class="hd-role-card"><b>🚫 Không xóa phiếu để "làm lại"</b><div class="text-xs text-gray-500 mt-1">Xóa hóa đơn đã chốt rồi tạo lại sẽ làm quỹ dự kiến tính trùng tiền (đã xảy ra thật). Sai thì dùng ✏️ Sửa hoặc 🔄 Đổi hàng — hệ thống tự giữ sổ quỹ đúng.</div></div>
      <div class="hd-role-card"><b>💰 Kiểm tiền đầu/cuối ca đủ 2 chữ ký</b><div class="text-xs text-gray-500 mt-1">Người giao và người nhận cùng đếm, cùng ký. Lệch quỹ phải soi bảng chi tiết và báo quản lý ngay trong ca — để qua ca sau là khó truy.</div></div>
      <div class="hd-role-card"><b>🚪 Rời máy là đăng xuất</b><div class="text-xs text-gray-500 mt-1">Nhất là máy dùng chung ở quầy. Trên điện thoại cá nhân không lưu mật khẩu vào trình duyệt của người khác.</div></div>
    </div>
  </div>

  <div class="text-center text-xs text-gray-300 pb-4">{{ brand.ten_hien_thi }} — trang này tự cập nhật theo phân quyền hiện hành · truy cập tại <b>/huong-dan</b></div>
</div>
{% endblock %}