/* CP2-LITE — Public Ranking "về đích": dải thưởng (chỉ tab Xếp hạng) + 4 thẻ KPI + Bảng tiến độ Công đoàn (Matrix 8 cột).
   Nạp SAU public.css; chỉ dùng class lt-*/reward-* mới, không ghi đè Header/Hero/Tabs/Countdown/Form. */

/* ---------- Dải thưởng liền dưới Hero — chỉ hiện khi đang ở tab Xếp hạng (body[data-view] do main.js đặt) ---------- */
.reward-wrap { padding-top: 10px; }
body:not([data-view="ranking"]) .reward-wrap { display: none; }
.reward-band {
  display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 14px;
  background: linear-gradient(90deg, #FFF8E1 0%, #FFFDF6 70%); border: 1px solid #F3DC9A; box-shadow: 0 1px 2px rgba(11, 27, 63, .04);
  font: 600 14px/1.35 var(--font); color: var(--ng-ink);
}
.reward-band .rw-ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(180deg, #FFE9A8, #F7D477); color: #8A5A00; }
.reward-band .rw-ic .icon { width: 18px; height: 18px; }
.reward-band b { color: #7A4F00; font-weight: 800; white-space: nowrap; }

/* ---------- Hero: đã gỡ dòng mô tả (UI Delta V2) — CHỈ mobile (<768px) được thấp đi.
   Từ 768px giữ đúng chiều cao V7.4 đã đo (trước khi gỡ) để khung cắt artwork/logo VinaPhone 5G không đổi. ---------- */
@media (min-width: 768px) {
  .hero { min-height: 411px; }
  body[data-view="ranking"] .hero { min-height: 342px; }
}
@media (min-width: 1024px) {
  .hero { min-height: 480px; }
  body[data-view="ranking"] .hero { min-height: 370px; }
}

/* ---------- Thông điệp thưởng TRONG Hero — chỉ desktop ≥1024px ở tab Xếp hạng: ngay dưới nút TikTok, canh trái theo tiêu đề,
   trong vùng lớp phủ tối (không chạm cúp/logo 5G). Khi đó ẩn dải thưởng dưới Hero → không lặp thông điệp. <1024px giữ nguyên dải thưởng V2. ---------- */
.hero-reward { display: none; }
@media (min-width: 1024px) {
  body[data-view="ranking"] .reward-wrap { display: none; }
  body[data-view="ranking"] .hero-copy { padding-bottom: 22px; }
  body[data-view="ranking"] .hero-reward {
    display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 6px; width: max-content; max-width: 100%; margin-top: 14px; padding: 5px 14px 6px;
    border-radius: 12px; background: linear-gradient(90deg, rgba(0, 62, 140, .78), rgba(9, 18, 51, .72)); /* đủ đậm: chữ ≥4,5:1 cả trên chấm sáng của artwork */ box-shadow: inset 0 0 0 1px rgba(236, 205, 130, .5);
    font: 600 14px/1.25 var(--font); color: #F1F4FA;
  }
  .hero-reward b { font-weight: 800; line-height: 1; color: #F4D58D; font-variant-numeric: tabular-nums; }
  /* 1024px: cỡ giảm để giữ 1 dòng, cách cúp ≥ 24px, không tăng chiều cao Hero */
  .hero-reward .hr-pct { font-size: 28px; }
  .hero-reward .hr-amt { font-size: 21px; }
}
@media (min-width: 1280px) {
  body[data-view="ranking"] .hero-reward { padding: 5px 16px 7px; font-size: 15px; }
  .hero-reward .hr-pct { font-size: 30px; }
  .hero-reward .hr-amt { font-size: 22px; }
}

/* ---------- 4 thẻ KPI: mobile 2×2, desktop 1×4 ---------- */
.lt-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lt-kpi {
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-width: 0; min-height: 76px; padding: 10px 12px;
  border-radius: 16px; background: var(--k-bg); border: 1px solid var(--k-line); box-shadow: 0 1px 2px rgba(11, 27, 63, .05);
}
.lt-kpi-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.lt-kpi-ic { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, .75); color: var(--k-label); }
.lt-kpi-ic .icon { width: 15px; height: 15px; stroke-width: 2; }
.lt-kpi-label { min-width: 0; font: 600 12.5px/1.25 var(--font); color: var(--k-label); }
.lt-kpi-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; min-width: 0; }
.lt-kpi-value { flex: none; font: 800 24px/1.1 var(--font-display); color: var(--k-ink); font-variant-numeric: tabular-nums; }
/* Sparkline trang trí: không phải dữ liệu, không chặn chạm, không đè số (cùng hàng flex, co giãn bên phải) */
.lt-spark { flex: 0 1 72px; min-width: 32px; height: 26px; color: var(--k-curve); pointer-events: none; }
.lt-spark .line { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .7; }
.lt-kpi.blue   { --k-bg: #EEF5FF; --k-line: #D6E6FF; --k-label: #2F5FA8; --k-ink: #0B3D91; --k-curve: #5B9BFF; }
.lt-kpi.red    { --k-bg: #FFF3F4; --k-line: #FBD9DE; --k-label: #9B2335; --k-ink: #9F1239; --k-curve: #F07A8C; }
.lt-kpi.yellow { --k-bg: #FFF8E1; --k-line: #F6E2A6; --k-label: #7A5600; --k-ink: #6E4A00; --k-curve: #E2AE2E; }
.lt-kpi.green  { --k-bg: #EDFAF1; --k-line: #CBEFD6; --k-label: #1F6E3E; --k-ink: #146C38; --k-curve: #45BC74; }

/* ---------- Bảng tiến độ Công đoàn về đích ---------- */
.lt-board { margin-top: 14px; }
.lt-board-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 12px; padding-bottom: 8px; }
.lt-board-head .rank-meta { margin: 0; padding: 0 16px 0 74px; font-size: 12.5px; color: var(--ng-muted); } /* mobile: dưới tiêu đề, thẳng chữ tiêu đề */
.lt-cols { display: none; }
.lt-rows { padding: 0 10px; }
/* Mobile compact: huy hiệu | tên (đủ rộng) | › ; dưới tên: ô % Hoàn thành (màu theo ngưỡng) … nhãn Kết quả (căn phải) */
.lt-toggle {
  grid-template-columns: 32px minmax(0, 1fr) auto 16px; grid-template-areas: "badge name name chev" "badge pct result chev";
  column-gap: 8px; row-gap: 6px; padding: 9px 6px;
}
.lt-cell-badge { grid-area: badge; display: grid; place-items: center; }
.lt-cell-name { grid-area: name; min-width: 0; font-weight: 600; }
.lt-cell.n { display: none; } /* mobile: 4 số nằm trong phần mở rộng */
.lt-cell-pct { grid-area: pct; justify-self: start; }
.lt-cell-result { grid-area: result; justify-self: end; }
.lt-toggle .rank-chev { grid-area: chev; }
/* Ô % Hoàn thành — conditional formatting kiểu Power BI: nền pastel theo ngưỡng (tính trên số lượng gốc), chữ đủ tương phản */
.lt-pct {
  display: inline-block; min-width: 62px; padding: 3px 8px; border-radius: 7px; text-align: center;
  font: 600 13px/18px var(--font); font-variant-numeric: tabular-nums; box-shadow: 0 1px 2px rgba(11, 27, 63, .07);
}
.lt-pct.low { background: #FDECEE; color: #A3243A; box-shadow: inset 0 0 0 1px #F7D3D9, 0 1px 2px rgba(11, 27, 63, .07); }
.lt-pct.mid { background: #FFF4D6; color: #6E4A00; box-shadow: inset 0 0 0 1px #F3DE9E, 0 1px 2px rgba(11, 27, 63, .07); }
.lt-pct.ok  { background: #DFF5E7; color: #0F6434; font-weight: 700; box-shadow: inset 0 0 0 1px #B5E5C6, 0 1px 2px rgba(11, 27, 63, .07); }
.lt-pct.na  { background: #F1F4F8; color: #4B5568; box-shadow: inset 0 0 0 1px #E1E6EE; }
.lt-result { display: inline-block; padding: 3px 10px; border-radius: 999px; font: 700 12px/18px var(--font); white-space: nowrap; }
.lt-result.ok { background: #E3F6EA; color: #136C36; box-shadow: inset 0 0 0 1px #BFE8CD; }
.lt-result.no { background: #FDF1F2; color: #8E2A39; box-shadow: inset 0 0 0 1px #F5D6DB; }
.lt-row .rank-more { margin-left: 46px; }

/* Huy hiệu: SVG nội tuyến (không tải ảnh) */
.lt-badge { display: inline-grid; width: 30px; height: 30px; }
.lt-badge svg { width: 100%; height: 100%; }
.lt-badge.none svg { fill: #F4F6F9; stroke: #B6C0CF; stroke-width: 1.6; stroke-linecap: round; }
.lt-badge .rib { fill: var(--b-rib); }
.lt-badge .disc { fill: var(--b-disc); stroke: var(--b-edge); stroke-width: 1.4; }
.lt-badge .ring { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.2; }
.lt-badge .star { fill: #fff; }
.lt-badge.gold   { --b-disc: #F2B705; --b-edge: #B98300; --b-rib: #E23A52; }
.lt-badge.silver { --b-disc: #A9B5C9; --b-edge: #7C889C; --b-rib: #3B7BFF; }
.lt-badge.bronze { --b-disc: #D9884B; --b-edge: #A85F28; --b-rib: #2F9E8F; }

@media (max-width: 359px) {
  .lt-kpi { padding: 9px 10px; }
  .lt-kpi-value { font-size: 22px; }
  .lt-kpi-label { font-size: 12px; }
  .lt-toggle { grid-template-columns: 30px minmax(0, 1fr) auto 14px; column-gap: 6px; }
  .lt-result { padding: 3px 8px; font-size: 11.5px; }
}
@media (min-width: 768px) {
  .lt-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .lt-kpi { min-height: 92px; padding: 13px 16px; }
  .lt-kpi-ic { width: 28px; height: 28px; }
  .lt-kpi-ic .icon { width: 16px; height: 16px; }
  .lt-kpi-label { font-size: 13.5px; }
  .lt-kpi-value { font-size: 28px; }
  .lt-spark { flex-basis: 110px; height: 32px; }
  .lt-board-head .rank-meta { padding: 18px 24px 4px; } /* desktop: góc phải khu tiêu đề */
  .lt-rows { padding: 0 20px; }
  .lt-row .rank-more { margin-left: 50px; }
}
@media (min-width: 1024px) {
  .reward-band { padding: 10px 18px; font-size: 15px; }
  /* Matrix 8 cột: Huy hiệu (giữa) · Đơn vị (trái) · 4 cột số (phải) · % Hoàn thành (giữa) · Kết quả (phải) · › */
  /* Tổng min ≈ 56+150+4×64+104+120+18+8×10 = 784px → vừa 1024px (vùng bảng ≈ 930px); từ 1366px các cột fr tự giãn */
  .lt-cols, .lt-toggle { grid-template-columns: 56px minmax(150px, 2.2fr) repeat(4, minmax(64px, 1fr)) 104px 120px 18px; column-gap: 10px; }
  .lt-cols {
    display: grid; align-items: end; margin: 0 20px; padding: 9px 10px; border-radius: 10px; background: #F1F5FB;
    font: 700 12px/1.3 var(--font); letter-spacing: .02em; text-transform: uppercase; color: #4A5872;
  }
  .lt-cols .n { text-align: right; }
  .lt-cols .c { text-align: center; }
  .lt-toggle { grid-template-areas: none; min-height: 52px; padding: 7px 10px; }
  .lt-toggle > * { grid-row: 1; }
  .lt-cell-badge { grid-area: auto; grid-column: 1; justify-self: center; }
  .lt-cell-name { grid-area: auto; grid-column: 2; }
  .lt-cell.n { display: block; text-align: right; font: 500 15px/1.2 var(--font); color: var(--ng-ink); font-variant-numeric: tabular-nums; }
  .lt-cell.c-total { grid-column: 3; } .lt-cell.c-notrep { grid-column: 4; } .lt-cell.c-rep { grid-column: 5; } .lt-cell.c-app { grid-column: 6; }
  .lt-cell.neg { color: #A3243A; }
  .lt-cell.pos { color: #146C38; }
  .lt-cell-pct { grid-area: auto; grid-column: 7; justify-self: center; }
  .lt-pct { min-width: 72px; padding: 4px 10px; font-size: 13.5px; }
  .lt-cell-result { grid-area: auto; grid-column: 8; justify-self: end; }
  .lt-toggle .rank-chev { grid-area: auto; grid-column: 9; }
  .lt-result { padding: 4px 12px; font-size: 12.5px; }
  .lt-row .rank-more { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-left: 90px; }
  /* Desktop: KPI to rõ hơn (chỉ ≥1024px; mobile/tablet giữ V2) — số 31px, nhãn 14,5px, icon 21px trong khung 36px */
  .lt-kpi { min-height: 0; gap: 6px; padding: 12px 18px 11px; }
  .lt-kpi-top { gap: 10px; }
  .lt-kpi-ic { width: 36px; height: 36px; border-radius: 10px; }
  .lt-kpi-ic .icon { width: 21px; height: 21px; }
  .lt-kpi-label { font-size: 14.5px; }
  .lt-kpi-value { font-size: 31px; }
  .lt-spark { flex-basis: 120px; height: 34px; }
  /* Matrix: số 15px ở 1024px (ưu tiên không tràn ngang), % 14px */
  .lt-cell.n { font-size: 15px; }
  .lt-pct { font-size: 14px; }
}
@media (min-width: 1280px) {
  /* cột Huy hiệu 64px: tiêu đề "HUY HIỆU" 12,5px giữ 1 dòng */
  .lt-cols, .lt-toggle { grid-template-columns: 64px minmax(150px, 2.2fr) repeat(4, minmax(64px, 1fr)) 104px 120px 18px; }
  .lt-cols { font-size: 12.5px; }
  .lt-row .rank-more { margin-left: 98px; }
  .lt-cell.n { font-size: 16px; }
  .lt-result { font-size: 13px; }
}