# -*- coding: utf-8 -*-
"""Portal HTML báo cáo MUA HÀNG tháng 8/2026 — Kỳ T8 (8 ngày đầu tháng 8).
Nguồn: BAO_CAO_SO_SANH_MUA_HANG_T8.docx (2 bảng: KPI + chi tiết 186 KH).
Lưu: Baocaomuahangthang8-T1.html — cạnh file DOCX gốc."""
import json, re
from docx import Document

import os
BASE = os.path.dirname(os.path.abspath(__file__))
SRC = os.path.join(BASE, "BAO_CAO_SO_SANH_MUA_HANG_T8.docx")
OUT = os.path.join(BASE, "Baocaomuahangthang8-T1.html")
KY = 'Kỳ T8 (1-15): 01/08 → 15/08/2026'

def pnum(s):
    """'1,458' → 1458; '-'/''/None → None"""
    if s is None:
        return None
    s = str(s).strip().replace(',', '').replace(' ', '')
    if s in ('', '-', '—'):
        return None
    try:
        return int(float(s))
    except (ValueError, TypeError):
        return None

doc = Document(SRC)
t0, t1 = doc.tables[0], doc.tables[1]

# ── Bảng KPI (Table 0): Kỳ | Tổng Kg | Số ngày | TB/ngày | So với tháng trước | Tăng/Giảm ──
peri = []
for r in t0.rows[1:]:
    cells = [c.text.strip() for c in r.cells]
    if not cells[0]:
        continue
    pct_val = cells[5] if len(cells) > 5 else (cells[4] if len(cells) > 4 else "")
    peri.append(dict(ten=cells[0], tong=pnum(cells[1]), ngay=pnum(cells[2]),
                     tb=pnum(cells[3]), pct=pct_val))
tong8 = [p['tong'] for p in peri]          # Tổng Kg 8 kỳ
tb8 = [p['tb'] for p in peri]              # TB/ngày 8 kỳ
ngay8 = [p['ngay'] for p in peri]
last_days = ngay8[-1] if ngay8 else 22
KY = f'Kỳ T8 (1-{last_days}): 01/08 → {last_days:02d}/08/2026'
MONTHS = ['T1','T2','T3','T4','T5','T6','T7', f'T8 ({last_days} ngày)']

# ── Bảng chi tiết KH (Table 1): STT|Mã|Tên|TB T1..T7|TB T8|Chênh lệch Kg|% ──
kh = []
for r in t1.rows[1:]:
    cells = [c.text.strip() for c in r.cells]
    if len(cells) < 13:
        continue
    stt, ma, ten = cells[0], cells[1], cells[2]
    if not ma or not ten or ten.upper().startswith('TỔNG CỘNG'):
        continue
    tb = [pnum(cells[i]) for i in range(3, 11)]      # TB T1..T7, T8
    tb = [0 if v is None else v for v in tb]
    chenh = pnum(cells[11]) or 0
    pct = cells[12]
    try:
        pct = float(pct.replace('%', '').replace('+', '').strip())
    except (ValueError, TypeError):
        pct = 0.0
    if chenh == 0 and cells[11].startswith('-'):
        pass
    kh.append(dict(stt=int(stt) if stt.isdigit() else len(kh)+1, ma=ma, ten=ten,
                   tb=tb, chenh=chenh, pct=pct))

# ── Thống kê ──
n_tang = sum(1 for k in kh if k['chenh'] > 0)
n_giam = sum(1 for k in kh if k['chenh'] < 0)
n_dung = sum(1 for k in kh if k['chenh'] == 0)
ch_t8 = tb8[7] - tb8[6]
pct_t8 = (ch_t8 / tb8[6] * 100) if tb8[6] else 0

print('KH:', len(kh), '| Tang:', n_tang, '| Giam:', n_giam, '| Dung:', n_dung)
print('Tong Kg T8:', f"{tong8[7]:,}", '| TB/ngay T8:', f"{tb8[7]:,}", '| Chenh vs T7:', f"{ch_t8:+,} ({pct_t8:+.1f}%)")

html = """<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Báo cáo Mua hàng — Tháng 8/2026 (Kỳ T8) | BT Chem</title>
<style>
:root{
  --xanh:#1F3A5F; --xanh2:#2E5E9E; --do:#C00000; --vang:#E6A817; --xanhla:#1E7D32;
  --xam:#f4f6f9; --xam2:#e9edf3; --den:#1a1a1a; --trang:#fff; --tim:#6a3fc0;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Tahoma,Arial,sans-serif;background:var(--xam);color:var(--den);font-size:14px;line-height:1.5}
.wrap{max-width:1280px;margin:0 auto;padding:0 16px}

/* ===== HEADER ===== */
header{background:linear-gradient(135deg,var(--xanh) 0%,var(--xanh2) 100%);color:#fff;padding:26px 0 18px;box-shadow:0 3px 12px rgba(0,0,0,.18)}
header .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between}
.logo h1{font-size:22px;font-weight:700;letter-spacing:.3px}
.logo p{font-size:12.5px;opacity:.92;margin-top:3px}
.kpi{display:flex;gap:10px;flex-wrap:wrap}
.kpi .box{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:10px;padding:8px 16px;text-align:center;min-width:96px}
.kpi .box b{display:block;font-size:20px;line-height:1.2}
.kpi .box span{font-size:10.5px;opacity:.9;text-transform:uppercase;letter-spacing:.5px}

/* ===== NAV ===== */
nav{background:var(--xanh);border-top:1px solid rgba(255,255,255,.15)}
nav .wrap{display:flex;gap:4px;flex-wrap:wrap}
nav button{background:transparent;color:#cfd8e8;border:none;padding:12px 18px;font-size:14px;cursor:pointer;border-bottom:3px solid transparent;font-weight:600;transition:.15s}
nav button:hover{color:#fff;background:rgba(255,255,255,.08)}
nav button.on{color:#fff;border-bottom-color:var(--vang);background:rgba(255,255,255,.10)}

/* ===== SECTIONS ===== */
section{display:none;padding:22px 0 40px}
section.on{display:block}
h2.sec{font-size:19px;color:var(--xanh);margin:6px 0 4px;border-left:5px solid var(--do);padding-left:10px}
p.sub{color:#5a6472;font-size:12.5px;margin-bottom:14px}

/* ===== CARDS ===== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:14px 0}
.card{background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 1px 4px rgba(0,0,0,.08);border-top:4px solid var(--xanh2)}
.card b{font-size:26px;display:block;color:var(--xanh)}
.card span{font-size:12px;color:#5a6472}
.card.red{border-top-color:var(--do)} .card.green{border-top-color:var(--xanhla)} .card.yellow{border-top-color:var(--vang)} .card.purple{border-top-color:var(--tim)} .card.orange{border-top-color:#e07b00}

/* ===== CHART ===== */
.chart-box{background:#fff;border-radius:12px;padding:16px;box-shadow:0 1px 4px rgba(0,0,0,.08);margin:12px 0}
.chart-box h3{font-size:14.5px;color:var(--xanh);margin-bottom:12px}
.bar-row{display:flex;align-items:center;gap:8px;margin:5px 0}
.bar-row .lbl{width:220px;font-size:12px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-row .track{flex:1;background:var(--xam2);border-radius:6px;height:22px;position:relative;overflow:hidden}
.bar-row .fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--xanh2),#4a8ad4);display:flex;align-items:center;justify-content:flex-end;padding-right:8px;color:#fff;font-size:11px;font-weight:700;min-width:34px;white-space:nowrap;transition:width .5s}
.bar-row .fill.red{background:linear-gradient(90deg,var(--do),#e04545)}
.bar-row .fill.green{background:linear-gradient(90deg,var(--xanhla),#35a54e)}
.bar-row .val{width:70px;font-size:12px;font-weight:700;color:var(--xanh)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;margin-top:8px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px;vertical-align:-1px}

/* ===== TABLE ===== */
.controls{background:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 1px 4px rgba(0,0,0,.08);margin:12px 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.controls input[type=text]{flex:1;min-width:180px;padding:8px 12px;border:1px solid #c9d2dd;border-radius:8px;font-size:13px}
.controls select{padding:8px 10px;border:1px solid #c9d2dd;border-radius:8px;font-size:13px;background:#fff}
.controls label{font-size:12px;color:#5a6472}
.tbl-wrap{background:#fff;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,.08);overflow:auto;max-height:640px}
table{border-collapse:collapse;width:100%;font-size:12.5px;min-width:1100px}
thead th{position:sticky;top:0;background:var(--xanh);color:#fff;padding:9px 10px;text-align:left;cursor:pointer;user-select:none;white-space:nowrap;z-index:2}
thead th:hover{background:var(--xanh2)}
thead th.asc::after{content:' ▲';font-size:10px}
thead th.desc::after{content:' ▼';font-size:10px}
tbody td{padding:7px 10px;border-bottom:1px solid #e7ebf1;vertical-align:top}
tbody tr:nth-child(even){background:#f8fafc}
tbody tr:hover{background:#eef4fb}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
.pill.duong{background:#e8f5e9;color:var(--xanhla)}
.pill.do{background:#fdecea;color:var(--do)}
.pill.xam{background:#eef0f3;color:#5a6472}
.hint{font-size:11.5px;color:#7b8494;margin-top:6px;font-style:italic}
.diff-up{color:var(--xanhla);font-weight:700}
.diff-down{color:var(--do);font-weight:700}
.diff-zero{color:#7b8494}

footer{background:var(--xanh);color:#c9d4e4;padding:18px 0;text-align:center;font-size:12px;margin-top:30px}
.src{font-size:11px;color:#8a94a6;margin-top:4px}
@media(max-width:768px){.bar-row .lbl{width:130px}.kpi .box{min-width:78px}.kpi .box b{font-size:16px}}
</style>
</head>
<body>

<header>
  <div class="wrap">
    <div class="logo">
      <h1>🛒 BÁO CÁO MUA HÀNG — THÁNG 8/2026</h1>
      <p>CÔNG TY TNHH SX–TM HÓA KEO BÌNH THẠNH · PHÒNG KINH DOANH · <b>__KY__</b></p>
    </div>
    <div class="kpi">
      <div class="box"><b>__N_KH__</b><span>Khách hàng mua</span></div>
      <div class="box"><b>__TONG8__</b><span>Tổng Kg Kỳ T8</span></div>
      <div class="box"><b>__TB8__</b><span>TB/ngày Kỳ T8</span></div>
      <div class="box"><b>__CHENH__</b><span>vs Tháng 7</span></div>
    </div>
  </div>
</header>

<nav>
  <div class="wrap">
    <button class="on" data-tab="tongquan">🏠 Tổng quan</button>
    <button data-tab="chitiet">🏭 Chi tiết khách hàng</button>
    <button data-tab="top">📈 Top tăng / giảm</button>
    <button data-tab="sosanh">⚖️ So sánh khách hàng</button>
  </div>
</nav>

<div class="wrap">

<!-- ==================== TỔNG QUAN ==================== -->
<section id="tongquan" class="on">
  <h2 class="sec">Tổng quan toàn công ty — 7 tháng đầu năm + Kỳ T8 (01/08 → 08/08/2026)</h2>
  <p class="sub">Lượng bán trung bình ngày (Kg/ngày) quy đổi từ tổng sản lượng mua hàng theo số ngày thực tế từng kỳ. Kỳ T8 = __TB8__ Kg/ngày (__CHENH_PCT__ so với Tháng 7).</p>

  <div class="cards">
    <div class="card"><b>__TB8__</b><span>TB/ngày Kỳ T8 (8 ngày)</span></div>
    <div class="card green"><b>__N_TANG__</b><span>KH tăng so với T7</span></div>
    <div class="card red"><b>__N_GIAM__</b><span>KH giảm so với T7</span></div>
    <div class="card yellow"><b>__N_DUNG__</b><span>KH không đổi</span></div>
  </div>

  <div class="chart-box">
    <h3>📊 Tổng sản lượng (Kg) theo kỳ</h3>
    <div id="chartTong"></div>
  </div>

  <div class="chart-box">
    <h3>📈 Lượng bán trung bình ngày (Kg/ngày) theo kỳ</h3>
    <div id="chartTB"></div>
  </div>

  <div class="chart-box">
    <h3>🏆 Top 15 khách hàng theo TB/ngày Kỳ T8 (Kg/ngày)</h3>
    <div id="chartTop"></div>
    <div class="legend"><span><i style="background:var(--xanhla)"></i>Tăng so T7</span><span><i style="background:var(--do)"></i>Giảm so T7</span></div>
  </div>
</section>

<!-- ==================== CHI TIẾT ==================== -->
<section id="chitiet">
  <h2 class="sec">Chi tiết từng khách hàng (__N_KH__ KH)</h2>
  <p class="sub">Bấm tiêu đề cột để sắp xếp. Chênh lệch = TB/ngày Kỳ T8 so với Tháng 7.</p>
  <div class="controls">
    <input type="text" id="khSearch" placeholder="🔍 Tìm mã KH, tên khách hàng...">
    <select id="khTrend"><option value="">Tất cả xu hướng</option><option value="up">📈 Tăng</option><option value="down">📉 Giảm</option><option value="flat">➖ Không đổi</option></select>
    <select id="khMin"><option value="0">Tất cả TB/ngày</option><option value="100">≥ 100 Kg/ngày</option><option value="300">≥ 300 Kg/ngày</option><option value="500">≥ 500 Kg/ngày</option><option value="1000">≥ 1.000 Kg/ngày</option></select>
    <button class="btn-ghost" id="khReset" style="border:none;padding:9px 16px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;background:#fff;border:1.5px solid var(--xanh);color:var(--xanh)">⟲ Reset</button>
  </div>
  <div class="tbl-wrap">
    <table id="khTable">
      <thead><tr>
        <th data-k="stt">STT</th><th data-k="ma">Mã KH</th><th data-k="ten">Tên khách hàng</th>
        <th data-k="t1" class="num">TB T1</th><th data-k="t2" class="num">TB T2</th><th data-k="t3" class="num">TB T3</th>
        <th data-k="t4" class="num">TB T4</th><th data-k="t5" class="num">TB T5</th><th data-k="t6" class="num">TB T6</th>
        <th data-k="t7" class="num">TB T7</th><th data-k="t8" class="num">TB T8</th>
        <th data-k="chenh" class="num">Chênh lệch</th><th data-k="pct" class="num">%</th>
      </tr></thead>
      <tbody></tbody>
    </table>
  </div>
  <p class="hint" id="khCount"></p>
</section>

<!-- ==================== TOP TĂNG/GIẢM ==================== -->
<section id="top">
  <h2 class="sec">Top khách hàng tăng / giảm mạnh nhất (Kỳ T8 vs Tháng 7)</h2>
  <p class="sub">Theo chênh lệch TB/ngày tuyệt đối (Kg/ngày).</p>

  <div class="chart-box">
    <h3 style="color:var(--xanhla)">📈 Top 10 tăng mạnh nhất</h3>
    <div id="topUp"></div>
  </div>

  <div class="chart-box">
    <h3 style="color:var(--do)">📉 Top 10 giảm mạnh nhất</h3>
    <div id="topDown"></div>
  </div>
</section>

<!-- ==================== SO SÁNH KH ==================== -->
<section id="sosanh">
  <h2 class="sec">So sánh 2 khách hàng</h2>
  <p class="sub">Chọn 2 khách hàng để đối chiếu TB/ngày qua 8 kỳ (T1 → T8).</p>
  <div class="controls">
    <select id="cmpA" style="flex:1;min-width:220px"></select>
    <select id="cmpB" style="flex:1;min-width:220px"></select>
    <button style="border:none;padding:9px 16px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;background:var(--xanh);color:#fff" id="cmpGo">⚖️ So sánh</button>
  </div>
  <div id="cmpResult" class="chart-box" style="display:none"></div>
</section>

</div>

<footer>
  <div class="wrap">
    Báo cáo mua hàng tháng 8/2026 (Kỳ T8: 01/08 → 08/08/2026) — Phòng Kinh doanh, Công ty TNHH SX–TM Hóa Keo Bình Thạnh
    <div class="src">Nguồn: BAO_CAO_SO_SANH_MUA_HANG_T8.docx (8 ngày đầu tháng 8) — Dữ liệu nhúng, mở offline bằng double-click</div>
  </div>
</footer>

<script>
const KH = __KH__;
const DAYS = __DAYS__;
const MONTHS = __MONTHS__;

const esc = s => String(s==null?'':s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/\"/g,'&quot;');
const num = n => (n==null||isNaN(n))?'—':Number(n).toLocaleString('vi-VN');
const fmtPct = p => (p>0?'+':'') + (Math.round(p*10)/10).toLocaleString('vi-VN') + '%';
const diffHtml = (v,p) => {
  if(v>0) return `<span class="diff-up">+${num(v)}</span> <span class="diff-up">(${fmtPct(p)})</span>`;
  if(v<0) return `<span class="diff-down">${num(v)}</span> <span class="diff-down">(${fmtPct(p)})</span>`;
  return `<span class="diff-zero">0 (0%)</span>`;
};
const trendPill = v => v>0?'<span class="pill duong">📈 Tăng</span>' : v<0?'<span class="pill do">📉 Giảm</span>' : '<span class="pill xam">➖ Không đổi</span>';

/* ---------- Tabs ---------- */
document.querySelectorAll('nav button').forEach(b=>b.addEventListener('click',()=>{
  document.querySelectorAll('nav button').forEach(x=>x.classList.remove('on'));
  document.querySelectorAll('section').forEach(x=>x.classList.remove('on'));
  b.classList.add('on');
  document.getElementById(b.dataset.tab).classList.add('on');
  if(b.dataset.tab==='sosanh') fillCmp();
}));

/* ---------- Tổng quan ---------- */
(function(){
  const tong = __TONG__;
  const tb = __TBARR__;
  const maxT = Math.max(...tong), maxTB = Math.max(...tb);

  document.getElementById('chartTong').innerHTML = MONTHS.map((m,i)=>`
    <div class="bar-row"><div class="lbl">${m}</div>
    <div class="track"><div class="fill ${i===7?'red':''}" style="width:${Math.min(96,tong[i]/maxT*100).toFixed(1)}%">${num(tong[i])}</div></div>
    <div class="val">${num(tong[i])} Kg</div></div>`).join('');

  document.getElementById('chartTB').innerHTML = MONTHS.map((m,i)=>`
    <div class="bar-row"><div class="lbl">${m} (${DAYS[i]} ngày)</div>
    <div class="track"><div class="fill ${i===7?'red':''}" style="width:${Math.min(96,tb[i]/maxTB*100).toFixed(1)}%">${num(tb[i])}</div></div>
    <div class="val">${num(tb[i])} Kg/ngày</div></div>`).join('');

  const top = [...KH].sort((a,b)=>b.tb[7]-a.tb[7]).slice(0,15);
  const maxTop = top[0].tb[7];
  document.getElementById('chartTop').innerHTML = top.map(k=>`
    <div class="bar-row"><div class="lbl" title="${esc(k.ten)}">${esc(k.ten)}</div>
    <div class="track"><div class="fill ${k.chenh<0?'red':'green'}" style="width:${Math.min(96,k.tb[7]/maxTop*100).toFixed(1)}%">${num(k.tb[7])}</div></div>
    <div class="val">${diffHtml(k.chenh,k.pct)}</div></div>`).join('');
})();

/* ---------- Chi tiết ---------- */
const khState = {q:'', trend:'', min:0, sortK:'t8', sortD:-1};
function renderKh(){
  const rows = KH.filter(k=>{
    if(khState.q && !(k.ma+k.ten).toLowerCase().includes(khState.q)) return false;
    if(khState.trend==='up' && k.chenh<=0) return false;
    if(khState.trend==='down' && k.chenh>=0) return false;
    if(khState.trend==='flat' && k.chenh!==0) return false;
    if(k.tb[7] < khState.min) return false;
    return true;
  }).sort((a,b)=>{
    const av=a[khState.sortK], bv=b[khState.sortK];
    if(typeof av==='number' && typeof bv==='number') return (av-bv)*khState.sortD;
    return String(av).localeCompare(String(bv),'vi')*khState.sortD;
  });
  document.querySelector('#khTable tbody').innerHTML = rows.map(k=>`
    <tr>
      <td>${k.stt}</td><td>${esc(k.ma)}</td><td><b>${esc(k.ten)}</b></td>
      ${MONTHS.map((m,i)=>`<td class="num">${k.tb[i]?num(k.tb[i]):'—'}</td>`).join('')}
      <td class="num">${diffHtml(k.chenh,k.pct)}</td>
    </tr>`).join('');
  document.getElementById('khCount').textContent = `Hiển thị ${rows.length}/${KH.length} khách hàng.`;
}
['khSearch','khTrend','khMin'].forEach(id=>{
  const el = document.getElementById(id);
  el.addEventListener('input',()=>{
    if(id==='khSearch') khState.q = el.value.trim().toLowerCase();
    if(id==='khTrend') khState.trend = el.value;
    if(id==='khMin') khState.min = Number(el.value);
    renderKh();
  });
});
document.getElementById('khReset').addEventListener('click',()=>{
  khState.q=''; khState.trend=''; khState.min=0;
  ['khSearch','khTrend','khMin'].forEach(id=>document.getElementById(id).value=id==='khMin'?'0':'');
  renderKh();
});
document.querySelectorAll('#khTable thead th').forEach(th=>th.addEventListener('click',()=>{
  const k = th.dataset.k;
  if(khState.sortK===k) khState.sortD*=-1; else {khState.sortK=k; khState.sortD=1;}
  document.querySelectorAll('#khTable thead th').forEach(t=>{t.classList.remove('asc','desc')});
  th.classList.add(khState.sortD===1?'asc':'desc');
  renderKh();
}));
renderKh();

/* ---------- Top tăng/giảm ---------- */
(function(){
  const up = [...KH].filter(k=>k.chenh>0).sort((a,b)=>b.chenh-a.chenh).slice(0,10);
  const down = [...KH].filter(k=>k.chenh<0).sort((a,b)=>a.chenh-b.chenh).slice(0,10);
  const maxU = Math.max(...up.map(k=>k.chenh)), maxD = Math.max(...down.map(k=>-k.chenh));
  document.getElementById('topUp').innerHTML = up.map(k=>`
    <div class="bar-row"><div class="lbl" title="${esc(k.ten)}">${esc(k.ten)}</div>
    <div class="track"><div class="fill green" style="width:${(k.chenh/maxU*100).toFixed(1)}%">+${num(k.chenh)}</div></div>
    <div class="val">${fmtPct(k.pct)}</div></div>`).join('');
  document.getElementById('topDown').innerHTML = down.map(k=>`
    <div class="bar-row"><div class="lbl" title="${esc(k.ten)}">${esc(k.ten)}</div>
    <div class="track"><div class="fill red" style="width:${(-k.chenh/maxD*100).toFixed(1)}%">${num(k.chenh)}</div></div>
    <div class="val">${fmtPct(k.pct)}</div></div>`).join('');
})();

/* ---------- So sánh ---------- */
function fillCmp(){
  const opts = [...KH].sort((a,b)=>a.ten.localeCompare(b.ten,'vi')).map(k=>`<option value="${k.stt}">${esc(k.ten)} (${esc(k.ma)})</option>`).join('');
  ['cmpA','cmpB'].forEach(id=>{ if(document.getElementById(id).options.length<2) document.getElementById(id).innerHTML=opts; });
}
document.getElementById('cmpGo').addEventListener('click',()=>{
  const a = KH.find(k=>k.stt==Number(document.getElementById('cmpA').value));
  const b = KH.find(k=>k.stt==Number(document.getElementById('cmpB').value));
  if(!a||!b){ document.getElementById('cmpResult').innerHTML='<p class="hint">⚠️ Chọn đủ 2 khách hàng.</p>'; document.getElementById('cmpResult').style.display='block'; return; }
  const max = Math.max(...a.tb, ...b.tb);
  const card = k => `
    <div style="flex:1;min-width:300px;background:#f8fafc;border-radius:10px;padding:14px;border:1px solid #e3e8ef">
      <h4 style="color:var(--xanh);margin-bottom:8px;font-size:13.5px">${esc(k.ten)} <span style="color:#8a94a6;font-weight:400">(${esc(k.ma)})</span></h4>
      ${MONTHS.map((m,i)=>`
        <div class="bar-row" style="margin:3px 0"><div class="lbl" style="width:74px;font-size:11px">${m}</div>
        <div class="track" style="height:16px"><div class="fill" style="width:${(k.tb[i]/max*100).toFixed(1)}%;font-size:10px;min-width:26px">${num(k.tb[i])}</div></div>
        <div class="val" style="width:44px;font-size:11px">${num(k.tb[i])}</div></div>`).join('')}
      <p style="font-size:12px;margin-top:8px">TB/ngày Kỳ T8: <b style="color:var(--xanh)">${num(k.tb[7])}</b> Kg/ngày — ${diffHtml(k.chenh,k.pct)}</p>
    </div>`;
  document.getElementById('cmpResult').innerHTML = `<div style="display:flex;gap:14px;flex-wrap:wrap">${card(a)}${card(b)}</div>`;
  document.getElementById('cmpResult').style.display='block';
});
</script>
</body>
</html>
"""

html = html.replace('__KY__', KY)
html = html.replace('__N_KH__', str(len(kh)))
html = html.replace('__TONG8__', f"{tong8[7]:,}")
html = html.replace('__TB8__', f"{tb8[7]:,}")
html = html.replace('__CHENH__', f"{ch_t8:+,} ({pct_t8:+.1f}%)")
html = html.replace('__CHENH_PCT__', f"{pct_t8:+.1f}%")
html = html.replace('__N_TANG__', str(n_tang))
html = html.replace('__N_GIAM__', str(n_giam))
html = html.replace('__N_DUNG__', str(n_dung))
html = html.replace('__KH__', json.dumps(kh, ensure_ascii=False))
html = html.replace('__DAYS__', json.dumps(ngay8))
html = html.replace('__MONTHS__', json.dumps(MONTHS, ensure_ascii=False))
html = html.replace('__TONG__', json.dumps(tong8))
html = html.replace('__TBARR__', json.dumps(tb8))

with open(OUT, 'w', encoding='utf-8') as f:
    f.write(html)
print('SAVED:', OUT)
print('Size:', len(html), 'chars')
