/* =============================================================================
 * 4T REPORTING · BIEU DO
 * Nguon: DATA-VISUALIZATION-CONTRACT.md §4–§5.
 *
 * ⛔ RANG BUOC DA DO, KHONG TU Y PHA:
 *   Bang mau thuong hieu KHONG dung lam bang mau chuoi du lieu duoc.
 *   leaf #458763 · camel-border #AF6928 · gray-mid #777777 chenh nhau 1.01–1.04:1
 *   — in den trang la BA VET XAM GIONG HET NHAU. Da vet can 39 ung vien: KHONG
 *   TON TAI bo 5 mau nao tren nen #FCFBF6 dat 3:1 tung cap.
 *   ⇒ DUNG HAI chuoi phan biet bang mau (#155446 vs #CF9156 = 3.28:1 — dung ca
 *     "ky nay vs ky truoc"). ⛔ TU CHUOI THU BA BAT BUOC kieu net + nhan truc tiep.
 *
 * ⭐ HAI <svg> CHO MOT BO SO — co chu dich, khong phai thua:
 *   hop dong chot chieu cao CO DINH 220px (<=849) va 320px (>=850). Mot SVG duy
 *   nhat khong the dat hai chieu cao co dinh o hai be rong khac nhau ma khong
 *   `preserveAspectRatio="none"` — tuc la lam BIEN DANG net. Hai viewBox la cach
 *   duy nhat giu net dung 2px o ca hai kho. Ban mobile con TUAN THU §5.6: toi da
 *   2 chuoi, toi da 4 nhan truc X, ⛔ khong cuon ngang.
 * ============================================================================= */

.bieu-do { margin: 0; }
/* ⚠ W3-D — TRAN CHIEU CAO, DUNG BO. Khung <=849 nay rong toi 720px (truoc chi
 * 352). `width: 100%; height: auto` tren mot <svg> co viewBox nghia la NHAN
 * TOAN BO hinh ve theo he so be rong: o kho 768 bieu do 312×220 ra 678×478 —
 * cao gap 2,17 lan thiet ke, VA moi nhan chu ben trong cung to len 2,17 lan
 * (nhan 12px ve ra 26px). Do la pha vo thang chu, khong phai "bieu do to hon".
 * ⛔ Do duoc, khong suy dien: 678×478,1 va 678×569,3 trong 60 phep do truoc khi
 *    co hai dong nay.
 * `max-height` giu dung `--chart-h` cua DATA-VISUALIZATION §6 ⇒ hinh ve giu
 * nguyen ty le va co chu; phan rong du la khoang tho, khong phai bieu do bi keo.
 * ⛔ Khai MOBILE-FIRST: luat nen la <=849, lop de la `min-width: 850px`. */
.bieu-do svg { display: block; width: 100%; height: auto; max-height: var(--chart-h); }
@media (min-width: 850px) {
  .bieu-do svg { max-height: var(--chart-h-lg); }
}
.bieu-do .kho-lon { display: none; }
.bieu-do .kho-nho { display: block; }

.luoi-ngang    { stroke: var(--chart-grid); stroke-width: 1; }
.duong-truc    { stroke: var(--chart-axis-line); stroke-width: 1; }
.nhan-truc     { fill: var(--chart-axis-label); font: 500 11px/16px var(--font-numeric); }
.nhan-truc-x   { fill: var(--chart-axis-label); font: 500 11px/16px var(--font-body); }

/* Duong: 2px desktop, 2.5px mobile, dau tron. */
.duong { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.duong-1 { stroke: var(--chart-line-1); stroke-dasharray: var(--chart-dash-1); }
.duong-2 { stroke: var(--chart-line-2); stroke-dasharray: var(--chart-dash-2); }
.duong-3 { stroke: var(--chart-line-3); stroke-dasharray: var(--chart-dash-3); }
.duong-4 { stroke: var(--chart-line-4); stroke-dasharray: var(--chart-dash-4); }

/* ⛔ Doan CHUA CHOT phai ve KHAC doan da chot. Google Ads tre quy ket 1–3 ngay;
 *   ve giong nhau la hua voi khach mot con so chua chac.                       */
.duong.chua-chot { stroke-dasharray: 4 4; opacity: .6; }
.vach-chot { stroke: var(--chart-neutral); stroke-width: 1; stroke-dasharray: 3 3; }
.nhan-vach-chot { fill: var(--chart-neutral); font: 500 10px/14px var(--font-body); }

/* Vung to duoi duong — CHI khi co DUNG MOT chuoi. */
.vung-to { fill: var(--chart-series-1); opacity: .12; }

/* Diem moc: luon hien khi <= 12 diem. */
.diem { fill: var(--chart-line-1); }
.diem-2 { fill: var(--chart-line-2); }

/* ⭐ NHAN TRUC TIEP thang CHU GIAI — chu giai bat mat di chuyen qua lai giua
 *   duong va chu thich; nhan truc tiep thi khong.                             */
.nhan-duong { font: 600 11px/16px var(--font-body); }
.nhan-duong-1 { fill: var(--chart-line-1); }
.nhan-duong-2 { fill: var(--chart-line-2); }

/* Cot — ⭐ COT NGANG la MAC DINH cho ten chien dich tieng Viet:
 *   "Shopping | Banh trung thu doanh nghiep" lam nhan truc X doc bi vo, ma xoay
 *   cheo thi dau tieng Viet gan nhu khong doc duoc (§5.1 da cam xoay).          */
.cot   { fill: var(--chart-series-1); }
.cot-2 { fill: var(--chart-series-2); stroke: var(--chart-series-2-stroke); stroke-width: 1; }
.nhan-cot      { fill: var(--text-primary); font: 600 11px/16px var(--font-numeric); }
.nhan-cot-trong{ fill: #FFFFFF; font: 600 11px/16px var(--font-numeric); }
.nhan-cot-ten  { fill: var(--text-primary); font: 500 12px/18px var(--font-body); }

/* Chu giai: TREN bieu do, xep doc o mobile. ⛔ khong dat ben phai. */
.chu-giai { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.chu-giai li { display: flex; align-items: center; gap: var(--space-2); font: 500 13px/20px var(--font-body); color: var(--chart-legend-fg); }
.chu-giai .net { width: 22px; height: 0; border-top-width: 3px; border-top-style: solid; flex: none; }
.chu-giai .net-1 { border-top-color: var(--chart-line-1); border-top-style: solid; }
.chu-giai .net-2 { border-top-color: var(--chart-line-2); border-top-style: dashed; }

@media (min-width: 850px) {
  .bieu-do .kho-lon { display: block; }
  .bieu-do .kho-nho { display: none; }
  .duong { stroke-width: 2; }
  .chu-giai { gap: var(--space-2) var(--space-6); }
}