/* [11/11] Trang Kết quả (/ket-qua) — lịch tháng là trung tâm. Cấm cuộn ngang: mọi lưới minmax(0,…), biểu đồ theo bề rộng khung, bảng gập @container.
   Một màu nhấn (cam): ô lịch đậm theo hoa hồng (--kq-muc 0..1) · cột đậm = hoàn tất, nhạt = chờ. Chữ có dấu = phông chữ; số = phông số. */
.kq-thanh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.kq-chip { display: flex; flex-wrap: wrap; gap: 6px; }
.kq-chip .wow-nut.dang { background: var(--wow-cam-mo); border-color: var(--wow-cam-sang); color: var(--wow-cam-sang); }
.kq-chon-chu { min-width: 0; max-width: 100%; width: auto; flex: 0 1 220px; }
.kq-bao { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 12.5px var(--wow-font-chu); color: var(--wow-chu-3); cursor: help; }
.kq-khung { container-type: inline-size; min-width: 0; }
.kq-dai-so { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.kq-so-o .kq-so-lon { font-size: clamp(22px, 2.5vw, 32px); }
.kq-lech { font: 12px var(--wow-font-so); margin-top: 2px; }
.kq-tang { color: var(--wow-tot); } .kq-giam { color: var(--wow-xau); } .kq-phang { color: var(--wow-chu-3); }

/* lịch */
.kq-lich-dau, .kq-lich { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.kq-lich-dau { margin-bottom: 6px; }
.kq-lich-dau span { text-align: center; font: 11px var(--wow-font-chu); color: var(--wow-chu-3); letter-spacing: .04em; }
/* [12/11] CEO "lịch nhìn thô": nền tô nâu theo độ cao bỏ — nền trung tính, độ lớn đọc ở THANH đáy ô (cùng mã màu biểu đồ cột) */
.kq-o { position: relative; display: grid; grid-template-rows: auto 1fr auto auto 4px; gap: 3px; min-width: 0; min-height: 96px; padding: 8px 10px 0; text-align: left; overflow: hidden;
  border: 1px solid var(--wow-vien-nhat); border-radius: 8px; color: var(--wow-chu); font: inherit; cursor: pointer; background: rgb(255 255 255 / .025); }
.kq-o-dau { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.kq-o-nhan { font: 10.5px var(--wow-font-chu); color: var(--wow-cam-sang); white-space: nowrap; }
.kq-o-vs { font: 11px var(--wow-font-chu); color: var(--wow-tot); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1em; }
.kq-o-vs-khong { color: var(--wow-chu-3); }
.kq-o-khong .kq-o-tien { color: var(--wow-chu-3); font-weight: 400; }
.kq-o-cho { display: flex; align-items: center; gap: 5px; font: 11.5px var(--wow-font-chu); color: var(--wow-chu-3); white-space: nowrap; overflow: hidden; }
.kq-o-thanh { display: flex; align-self: end; margin: 0 -10px; height: 4px; background: rgb(255 255 255 / .04); }
.kq-o-thanh i { display: block; height: 100%; }
.kq-o-thanh-ht { background: var(--wow-cam-sang); }
.kq-o-thanh-cho { background: var(--wow-cam-sang); opacity: .4; }
.kq-o-thanh-rong { background: transparent; }
.kq-o:hover:not(:disabled) { filter: brightness(1.25); }
.kq-o:focus-visible { outline: 1px solid var(--wow-cam-sang); outline-offset: 1px; }
.kq-o-dem { visibility: hidden; }
.kq-o-sau { opacity: .35; cursor: default; }
.kq-o-nay { border-color: rgb(var(--wow-cam-sang-rgb) / .6); }
.kq-o-chon { box-shadow: 0 0 0 2px var(--wow-cam-sang); }
.kq-o-ngay { font: 12px var(--wow-font-so); color: var(--wow-chu-2); }
.kq-o-tien { align-self: center; font: 600 clamp(15px, 1.7vw, 20px) var(--wow-font-so); color: var(--wow-cam-sang); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kq-o-phu { font: 11px var(--wow-font-chu); color: var(--wow-chu-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kq-o-song { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--wow-tot); }

/* xu hướng */
.kq-bieu-do { min-width: 0; }
.kq-svg { display: block; width: 100%; height: auto; max-height: 170px; }
.kq-cot-ht { fill: var(--wow-cam-sang); }
.kq-cot-cho { fill: var(--wow-cam-sang); opacity: .4; }
.kq-chua-bao { fill: rgb(var(--wow-quet-rgb) / .06); }
.kq-tb7 { fill: none; stroke: var(--wow-chu); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.kq-chu { fill: var(--wow-chu-3); font: 11px var(--wow-font-so); }
/* [12/11] nhãn sát dữ liệu (TB 7 ngày) có thể nằm trên cột ở khung hẹp ⇒ viền màu nền quanh chữ, chữ luôn đọc được */
.kq-svg text.kq-chu { paint-order: stroke; stroke: var(--wow-nen); stroke-width: 3px; stroke-linejoin: round; }
.kq-re { fill: transparent; } .kq-re:hover { fill: rgb(var(--wow-quet-rgb) / .08); }

/* chi tiết ngày */
.kq-ct-dau { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.kq-ct-dau h2 { margin: 0; font: 600 16px var(--wow-font-chu); }
.kq-pheu { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.kq-tram { display: grid; gap: 2px; padding: 10px; border-radius: 8px; background: rgb(255 255 255 / .03); border: 1px solid var(--wow-vien-nhat); min-width: 0; }
.kq-tram b { font: 600 clamp(16px, 2vw, 22px) var(--wow-font-so); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kq-tram span { font: 11.5px var(--wow-font-chu); color: var(--wow-chu-3); }
.kq-tram-cho b { color: var(--wow-chu-3); font-weight: 400; }
.kq-bai-ds { display: grid; gap: 2px; margin-top: 10px; }
.kq-bai { position: relative; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.2fr) minmax(0, .8fr); gap: 4px 12px; align-items: center; padding: 7px 18px 7px 6px;
  border-top: 1px solid var(--wow-vien-nhat); color: var(--wow-chu); text-decoration: none; min-width: 0; }
a.kq-bai:hover { filter: brightness(1.3); }
.kq-bai-ten, .kq-bai-page { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 13px var(--wow-font-chu); }
.kq-bai-page { color: var(--wow-chu-3); }
.kq-bai-tien { font: 600 13px var(--wow-font-so); white-space: nowrap; text-align: right; }
.kq-bai .kq-o-song { top: 50%; right: 4px; transform: translateY(-50%); }

/* bảng theo chủ */
.kq-bang { display: grid; min-width: 0; }
.kq-dong { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, .8fr)) minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 4px 10px; align-items: center; padding: 8px 6px; border-top: 1px solid var(--wow-vien-nhat); min-width: 0; }
.kq-dong > * { min-width: 0; }
.kq-dau { border-top: 0; color: var(--wow-chu-3); font: 11px var(--wow-font-chu); letter-spacing: .04em; padding-top: 2px; }
.kq-dau > :not(:first-child), .kq-o-so { text-align: right; }
.kq-ten-o { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kq-ten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font: 600 14px var(--wow-font-chu); }
.kq-o-so { font: 13px var(--wow-font-so); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kq-chu[role="button"] { cursor: pointer; } .kq-chu[role="button"]:hover { filter: brightness(1.25); }
.kq-chon { background: var(--wow-cam-mo); box-shadow: inset 2px 0 0 var(--wow-cam-sang); }

/* chi + lãi */
.kq-chi { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.kq-chi-o { display: grid; gap: 2px; min-width: 0; }
.kq-chi-o span { font: 11.5px var(--wow-font-chu); color: var(--wow-chu-3); }
.kq-chi-o b { font: 600 16px var(--wow-font-so); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kq-lai b { color: var(--wow-tot); } .kq-lo b { color: var(--wow-xau); }

@container (max-width: 640px) {
  .kq-lich-dau, .kq-lich { gap: 3px; }
  .kq-o { min-height: 58px; padding: 4px 4px; border-radius: 6px; }
  .kq-o-phu { display: none; }
  .kq-o-ngay { font-size: 10.5px; }
  .kq-o-tien { font-size: 12px; }
  .kq-o-song { top: 4px; right: 4px; width: 6px; height: 6px; }
  .kq-o { grid-template-rows: auto 1fr 3px; min-height: 60px; padding: 5px 5px 0; gap: 2px; }
  .kq-o-thanh { margin: 0 -5px; height: 3px; }
  .kq-o-nhan, .kq-o-cho span { display: none; }
  /* [12/11] CEO "điện thoại cũng phải có chữ, không chỉ chấm": chữ nhỏ gói hai dòng thay chấm (ô ~46px ở 390) */
  .kq-o { grid-template-rows: auto 1fr auto 3px; }
  .kq-o-vs { font-size: 9.5px; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
  .kq-o-vs:empty { display: none; }
  .kq-pheu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kq-bai { grid-template-columns: minmax(0, 1fr) minmax(0, 7em); }
  .kq-bai-page { grid-column: 1; grid-row: 2; }
  .kq-dong { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .kq-dau { display: none; }
  .kq-ten-o { grid-column: 1 / -1; }
  .kq-o-so { text-align: left; font-size: 12px; }
  .kq-o-so::before { content: attr(data-nhan); display: block; color: var(--wow-chu-3); font: 10.5px var(--wow-font-chu); }
}
@media (max-width: 640px) {
  .kq-bao { margin-left: 0; }
  .kq-chon-chu { flex: 1 1 100%; }
}