/* ==========================================================================
   THR — các trang thử thách phụ (giao diện mới), tiền tố .cx-
   Dùng KÈM challenge-team.css (khung .cm: hero, thẻ, mục thu gọn, tab, hạng…):
     · Đồng Nhịp (show_dong_nhip) + trang chi tiết VĐV (_dong_nhip_detail)
     · Nhập mật khẩu (password) · Báo cáo (report)
     · Popup chi tiết VĐV CL626 (_626_detail, nạp vào .cm-modal-b)
   Mốc di động 860px.
   ========================================================================== */
.cx *, .cx *::before, .cx *::after { box-sizing: border-box; }
.cx p { margin: 0; }

/* ---------- Ô nhập / nút nhỏ dùng chung ---------- */
.cx-in { min-height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--cm-in, #d3e0e6); background: #fff; font-size: 15px; color: var(--t-navy); outline: none; min-width: 0; font-family: inherit; }
.cx-in:focus { border-color: var(--t-teal); box-shadow: 0 0 0 3px rgba(23, 152, 122, .12); }
.cx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 18px; border: none; border-radius: 999px; background: var(--t-grad-btn); color: #fff !important; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: inherit; }
.cx-btn:hover { filter: brightness(1.05); }
.cx-btn.navy { background: var(--t-navy); }
.cx-btn.line { background: #fff; color: var(--t-navy) !important; border: 1.5px solid var(--t-navy); }
.cx-btn.sm { min-height: 34px; padding: 0 14px; font-size: 13px; }
.cx-btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; }

/* ==========================================================================
   ĐỒNG NHỊP
   ========================================================================== */
/* Tiêu đề có dấu nặng (Ị, Ạ): .cm-h1 cao .92 làm dòng sau đè mất dấu → giãn dòng, chừa đáy cho chữ gradient */
.cx .cm-h1 { line-height: 1.04; }
.cx .cm-h1 .t-grad-text { display: inline-block; padding: .16em 0 .1em; margin-top: -.12em; line-height: 1; }
.cx-hero-sub { font-size: 14px; line-height: 1.6; color: var(--t-hero-text); max-width: 620px; }
.cx-hero-sub b { color: #fff; }
.cx-motto { font-size: 13px; font-style: italic; color: #7fe0bd; }

/* Khung bên phải hero: đăng ký / của tôi */
.cx-join p { font-size: 13px; line-height: 1.55; color: var(--t-hero-text); }
.cx-join form { margin: 0; }
.cx-join .t-btn { width: 100%; }
.cx-join-note { font-size: 12px !important; color: var(--t-hero-muted) !important; }
.cx-lock { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); font-size: 13px; color: var(--t-hero-text); }

/* Giới thiệu */
.cx-intro { position: relative; overflow: hidden; padding: 28px 32px 28px 40px; }
.cx-intro::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--t-grad-btn); background-size: 100% 200%; }
.cx-intro-q { font-family: Georgia, serif; font-size: 64px; line-height: 1; height: 34px; color: var(--t-mint-bg); user-select: none; }
.cx-intro-lead { font-size: 19px !important; font-weight: 600; line-height: 1.6; color: var(--t-navy); }
.cx-intro-lead span { color: var(--t-teal); }
.cx-intro-body { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; font-size: 15px; line-height: 1.75; color: var(--t-text-2); }
.cx-intro-body b { color: var(--t-navy); }
.cx-intro-body .w1 { color: var(--t-teal); }
.cx-intro-body .w2 { color: var(--t-navy-2); }
.cx-intro-body .w3 { color: #c9733a; }
.cx-intro-body .big { font-size: 16px; font-weight: 700; color: var(--t-navy); }

/* Khối nội dung luật */
.cx-stack { display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.65; color: var(--t-text-2); }
.cx-stack b, .cx-stack strong { color: var(--t-navy); }
.cx-blk { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--cm-line2, #e3ebef); background: #fff; min-width: 0; }
.cx-blk.mint { background: #f3fbf8; border-color: #cdebe0; }
.cx-blk.blue { border-color: #cfe2ec; }
.cx-blk.warm { border-color: #f1d9c6; }
.cx-blk.gold { background: #fffaf0; border-color: #f5d9a0; }
.cx-blk-t { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 15px; font-weight: 700; color: var(--t-navy); margin-bottom: 6px; line-height: 1.4; }
.cx-blk-t small { font-size: 12px; font-weight: 500; color: var(--t-muted); }
.cx-blk.blue .cx-blk-t { color: var(--t-navy-2); }
.cx-blk.warm .cx-blk-t { color: #b85f22; }
.cx-blk.gold .cx-blk-t { color: #9a6a00; }
.cx-num { flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--t-navy); color: #fff; font-family: var(--t-display); font-size: 15px; display: inline-flex; align-items: center; justify-content: center; align-self: center; }
.cx-sec-t { font-size: 15px; font-weight: 700; color: var(--t-navy); display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.cx-stack ul { margin: 6px 0 0; padding-left: 20px; list-style: disc; display: flex; flex-direction: column; gap: 4px; }
.cx-stack ul li::marker { color: var(--t-teal); }
.cx-stack p + p { margin-top: 6px; }
.cx-red { color: var(--t-red) !important; font-weight: 700; }
.cx-ex { margin-top: 8px; padding: 9px 12px; border-radius: 12px; border: 1px dashed #c6d5dc; background: #fbfdfd; font-size: 13px; line-height: 1.6; color: var(--t-text-2); }
.cx-ex::before { content: 'VD'; display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; padding: 1px 7px; border-radius: 6px; background: var(--t-mint-bg); color: var(--t-teal); font-size: 10px; font-weight: 700; letter-spacing: .06em; vertical-align: 1px; }
.cx-eq { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--t-dark); color: #fff; text-align: center; font-family: var(--t-display); font-weight: 700; font-size: 20px; letter-spacing: .02em; }
.cx-eq i { font-style: normal; color: #7fe0bd; margin: 0 6px; }
.cx-ok { display: inline-block; white-space: nowrap; padding: 2px 8px; border-radius: 8px; background: var(--t-mint-bg); color: var(--t-teal); font-weight: 700; font-size: 12px; }

.cx-tscroll { overflow-x: auto; margin-top: 8px; border-radius: 12px; border: 1px solid var(--cm-line2, #e3ebef); }
.cx-tbl { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
.cx-tbl th { padding: 9px 12px; background: #f7fafb; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--t-muted); text-align: left; white-space: nowrap; }
.cx-tbl td { padding: 9px 12px; border-top: 1px solid var(--cm-line, #f1f5f7); color: var(--t-text-2); vertical-align: top; }
.cx-tbl td b { color: var(--t-navy); }
.cx-tbl td small { color: var(--t-muted-2); font-size: 11px; }
.cx-tbl tr.hl td { background: #fff7f0; }
.cx-tbl .r { text-align: right; }
.cx-tbl .nw { white-space: nowrap; }
.cx-foot { font-size: 12px; color: var(--t-muted); }

/* Thể lệ */
.cx-law { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.cx-law > div { padding: 16px 18px; border-radius: 16px; background: #f7fafb; min-width: 0; }
.cx-law > div.wide { grid-column: 1 / -1; }
.cx-law h3 { margin: 0 0 6px; font-family: var(--t-font) !important; font-size: 15px; font-weight: 700; color: var(--t-navy); }
.cx-law ul { margin: 0; padding-left: 18px; list-style: disc; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.6; color: var(--t-text-2); }
.cx-law p { font-size: 14px; line-height: 1.6; color: var(--t-text-2); }
.cx-law b { color: var(--t-navy); }

/* Của tôi */
.cx-me-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.cx-me-head .cm-h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cx-team { display: inline-flex; align-items: center; gap: 6px; font-family: var(--t-font); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--t-mint-bg); color: var(--t-teal); white-space: nowrap; }
.cx-me-sum { display: flex; gap: 8px; flex-wrap: wrap; }
.cx-me-sum span { padding: 6px 12px; border-radius: 10px; background: var(--t-soft); font-size: 13px; color: var(--t-text-2); }
.cx-me-sum b { font-family: var(--t-display); font-size: 18px; color: var(--t-navy); margin-left: 4px; }
.cx-paces { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.cx-pace { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--cm-line2, #e3ebef); min-width: 0; }
.cx-pace-t { font-size: 13px; font-weight: 700; color: var(--t-text-2); }
.cx-pace-v { font-family: var(--t-display); font-weight: 700; font-size: 34px; line-height: 1.1; color: var(--t-navy); margin-top: 4px; }
.cx-pace-v small { font-size: 16px; color: var(--t-muted); }
.cx-pace-n { font-size: 12px; color: var(--t-muted); margin-top: 4px; }
.cx-pace-n.warn { color: var(--cm-warn, #b86a14); }
.cx-pace-n.bad { color: var(--t-red); font-weight: 600; font-size: 13px; }
.cx-pace form { display: flex; gap: 8px; margin-top: 10px; }
.cx-pace form .cx-in { width: 120px; }
.cx-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cx-acts form { margin: 0; }
.cx-act { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 12px; border: 1px solid; font-size: 13px; font-weight: 600; cursor: pointer; background: #fff; font-family: inherit; }
.cx-act.gold { background: var(--t-gold-bg); border-color: #f5d27a; color: #8a5a00; }
.cx-act.blue { background: var(--cm-blue-bg, #dcecf3); border-color: #b9d6e3; color: var(--t-navy-2); }
.cx-act.mute { border-color: var(--cm-line2, #e3ebef); color: var(--t-muted); }
.cx-act.mute:hover { color: var(--t-red); border-color: #f3c4c4; }
.cx-act.done, .cx-act[disabled] { background: #f1f5f7; border-color: #e3ebef; color: var(--t-muted-2); cursor: not-allowed; }
.cx-act.done:hover { color: var(--t-muted-2); border-color: #e3ebef; }
.cx-weeks { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.cx-week { padding: 14px 16px; border-radius: 16px; background: #f7fafb; min-width: 0; }
.cx-week-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cx-week-t { font-weight: 700; font-size: 14px; }
.cx-week-s { font-size: 13px; color: var(--t-text-2); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.cx-week-s b { color: var(--t-teal); }
.cx-week-s .busy { color: #9a6a00; font-weight: 600; }
.cx-week-s .dns { color: var(--t-red); font-weight: 600; }
.cx-sess { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-ses { padding: 6px 10px; border-radius: 10px; font-size: 12px; border: 1px solid; background: #fff; }
.cx-ses.ok { border-color: #bfe3d6; color: #11744f; background: #f0faf5; }
.cx-ses.dns { border-color: #f3c4c4; color: #a32b2b; background: #fdf1f1; }
.cx-ses.off { border-color: #e3ebef; color: var(--t-muted-2); text-decoration: line-through; }
.cx-ses .lr { display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 5px; background: var(--t-navy); color: #fff; margin: 0 2px; vertical-align: 1px; text-decoration: none; }
.cx-more-link { display: flex; justify-content: flex-end; margin-top: 12px; }
.cx-more-link a { font-size: 13px; font-weight: 600; color: var(--t-teal) !important; }

/* Tab tuần (bố cục giống .cm-tabs) */
.cx-tabs { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: #eef3f6; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cx-tabs::-webkit-scrollbar { display: none; }
.cx-tabs button { flex: none; min-height: 34px; padding: 0 16px; border: none; border-radius: 999px; background: transparent; color: var(--t-text-2); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: inherit; }
.cx-tabs button.on { background: var(--t-grad-btn); color: #fff; }
.cx-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

/* Hàng BXH */
.cx-rows { display: flex; flex-direction: column; }
.cx-r { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 8px; border-bottom: 1px solid var(--cm-line, #f1f5f7); border-radius: 10px; color: inherit; }
.cx-r.top { background: #f7fbfa; }
.cx-r.me { background: var(--cm-me, #e6f4ef); }
a.cx-r:hover { background: #f4f8f9; }
.cx-r-rk { display: flex; align-items: center; justify-content: center; }
.cx-r-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cx-r-id { min-width: 0; display: flex; flex-direction: column; }
.cx-r-n { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; font-size: 15px; color: var(--t-navy); }
.cx-r-n .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-r-s { font-size: 12px; color: var(--t-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-r-s .g { color: var(--t-teal); font-weight: 600; }
.cx-r-s .bad { color: var(--t-red); }
.cx-r-v { text-align: right; }
.cx-r-v b { display: block; font-family: var(--t-display); font-weight: 700; font-size: 22px; line-height: 1; color: var(--t-navy); white-space: nowrap; }
.cx-r-v small { display: block; font-size: 10px; color: var(--t-muted-2); margin-top: 3px; white-space: nowrap; }
.cx-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cx-showall { display: block; margin: 12px auto 0; min-height: 40px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--t-navy); background: #fff; color: var(--t-navy); font-weight: 600; font-size: 13px; cursor: pointer; font-family: inherit; }
.cx-showall:hover { background: var(--t-navy); color: #fff; }

/* Đội hình */
.cx-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.cx-tm { padding: 14px; border-radius: 16px; border: 1px solid var(--cm-line2, #e3ebef); min-width: 0; }
.cx-tm-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cx-tm-h b { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-tm-h span { margin-left: auto; font-size: 11px; color: var(--t-muted); white-space: nowrap; }
.cx-tm a { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; color: var(--t-text-2); min-width: 0; }
.cx-tm a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-tm-e { font-size: 12px; color: var(--t-muted-2); }

/* Khu BTC */
.cx-btc { border: 1.5px solid #f5d27a; }
.cx-btc .cm-h2 { color: #8a5a00; }
.cx-btc-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px; }
.cx-btc-b { padding: 16px; border-radius: 16px; border: 1px solid var(--cm-line2, #e3ebef); min-width: 0; }
.cx-btc-t { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.cx-grun { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.cx-grun .full { grid-column: 1 / -1; }
.cx-grun .cx-in { width: 100%; font-size: 14px; }
.cx-grun input[type=file] { font-size: 12px; color: var(--t-muted); min-width: 0; max-width: 100%; }
.cx-li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #f7fafb; font-size: 13px; color: var(--t-text-2); margin-top: 6px; }
.cx-li > span { min-width: 0; }
.cx-li a { color: var(--t-teal) !important; font-weight: 600; }
.cx-li form { margin: 0; }
.cx-li-acts { display: flex; gap: 10px; flex: none; }
.cx-lk { border: none; background: none; padding: 0; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.cx-lk.ok { color: var(--t-teal); }
.cx-lk.no { color: var(--t-red); }
.cx-lock-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cx-pill { min-height: 34px; padding: 0 14px; border: none; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.cx-pill.on { background: #fdecec; color: #a32b2b; }
.cx-pill.off { background: var(--t-mint-bg); color: var(--t-teal); }
.cx-info { white-space: pre-line; font-size: 14px; line-height: 1.7; color: var(--t-text-2); }

/* ==========================================================================
   ĐỒNG NHỊP — trang chi tiết 1 VĐV
   ========================================================================== */
.cx-mem { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.cx-mem .cm-av { width: 76px; height: 76px; font-size: 22px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.cx-mem-id { min-width: 0; flex: 1; }
.cx-mem-id .cm-h1 { font-size: clamp(34px, 4.6vw, 52px); text-transform: none; overflow-wrap: anywhere; }
.cx-mem-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cx-ses-list { display: flex; flex-direction: column; gap: 8px; }
.cx-sd { border: 1px solid var(--cm-line2, #e3ebef); border-radius: 14px; background: #fff; min-width: 0; }
.cx-sd.dns { border-color: #f3c4c4; background: #fff8f8; }
.cx-sd.off { background: #f9fbfc; }
.cx-sd > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 11px 14px; font-size: 13px; color: var(--t-text-2); }
.cx-sd > summary::-webkit-details-marker { display: none; }
.cx-sd-d { font-weight: 700; color: var(--t-navy); font-size: 14px; min-width: 46px; }
.cx-sd-k { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #eef3f6; color: var(--t-text-2); white-space: nowrap; }
.cx-sd-k.lr { background: var(--t-navy); color: #fff; }
.cx-sd-v { font-family: var(--t-display); font-weight: 700; font-size: 18px; color: var(--t-teal); }
.cx-sd.dns .cx-sd-v { color: var(--t-red); }
.cx-sd-note { color: var(--t-red); font-size: 12px; min-width: 0; overflow-wrap: anywhere; }
.cx-sd-off { font-size: 11px; padding: 1px 7px; border-radius: 6px; background: #e3ebef; color: var(--t-muted); }
.cx-sd-ch { margin-left: auto; display: flex; color: var(--t-muted-2); transition: transform .2s; }
.cx-sd[open] .cx-sd-ch { transform: rotate(180deg); }
.cx-sd-b { padding: 0 14px 14px; font-size: 13px; color: var(--t-text-2); }
.cx-sd-b a { color: var(--t-strava) !important; font-weight: 600; }
.cx-sd-b .cx-tscroll { margin-top: 8px; }

/* ==========================================================================
   NHẬP MẬT KHẨU
   ========================================================================== */
.cx-pw { min-height: calc(100vh - 0px); display: flex; align-items: center; justify-content: center; padding: 140px 16px 72px; }
.cx-pw-card { position: relative; width: 100%; max-width: 440px; background: #fff; border-radius: 22px; box-shadow: var(--t-shadow-lg); padding: 36px 32px 30px; text-align: center; color: var(--t-navy); }
.cx-pw-ic { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 22px; background: var(--t-grad-btn); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(23, 152, 122, .3); }
.cx-pw-k { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t-teal); }
.cx-pw-card h1 { margin: 6px 0 0; font-family: var(--t-display); font-weight: 700; font-size: 34px; line-height: 1; }
.cx-pw-n { margin-top: 10px !important; font-size: 14px; line-height: 1.55; color: var(--t-text-2); overflow-wrap: anywhere; }
.cx-pw-n b { color: var(--t-navy); }
.cx-pw form { margin-top: 22px; text-align: left; }
.cx-pw label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--t-text-2); margin-bottom: 6px; }
.cx-pw .cx-in { width: 100%; min-height: 48px; font-size: 16px; }
.cx-pw-acts { display: flex; gap: 10px; margin-top: 18px; }
.cx-pw-acts > * { flex: 1; min-height: 48px; }
.cx-pw .t-flash { margin: 16px 0 0; text-align: left; }

/* ==========================================================================
   BÁO CÁO
   ========================================================================== */
.cx-rp .cm-hero-body { padding-bottom: 32px; max-width: 1040px; }
.cx-rp .cm-h1 { font-size: clamp(36px, 4.6vw, 52px); }
.cx-rp-main { max-width: 1040px; }
.cx-period { display: flex; flex-direction: column; gap: 14px; }
.cx-period-k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t-muted); margin-bottom: 8px; }
.cx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-chips a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cm-in, #d3e0e6); background: #fff; font-size: 13px; font-weight: 600; color: var(--t-text-2); white-space: nowrap; }
.cx-chips a:hover { border-color: var(--t-teal); color: var(--t-teal); }
.cx-chips a.on { background: var(--t-grad-btn); border-color: transparent; color: #fff; }
.cx-pform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding-top: 14px; border-top: 1px solid var(--t-line); }
.cx-pform:first-child { padding-top: 0; border-top: none; }
.cx-pform label.f { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t-muted); }
.cx-pform .cx-in { width: 100%; font-size: 14px; }
.cx-chk { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; font-size: 13px; font-weight: 600; color: var(--t-text-2); cursor: pointer; user-select: none; }
.cx-chk input { width: 16px; height: 16px; accent-color: var(--t-teal); }

/* Khối báo cáo (được chụp thành ảnh bằng html2canvas — dùng màu đặc, không chữ gradient) */
.cx-rep { background: #fff; border-radius: 22px; box-shadow: var(--t-shadow); overflow: hidden; }
.cx-rep-h { background: #0e2a3c; color: #fff; padding: 24px 26px; position: relative; overflow: hidden; }
.cx-rep-h::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 85% 120%, rgba(23, 152, 122, .55) 0%, rgba(14, 42, 60, 0) 60%); pointer-events: none; }
.cx-rep-h > * { position: relative; z-index: 1; }
.cx-rep-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cx-rep-brand { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7fe0bd; }
.cx-rep-brand img { width: 22px; height: 22px; object-fit: contain; }
.cx-rep-h h2 { margin: 6px 0 4px; font-family: var(--t-display); font-weight: 700; font-size: 30px; line-height: 1.05; color: #fff; text-transform: uppercase; overflow-wrap: anywhere; }
.cx-rep-per { font-size: 14px; color: var(--t-hero-text); }
.cx-rep-src { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: var(--t-hero-text); white-space: nowrap; }
.cx-rep-src i { width: 7px; height: 7px; border-radius: 50%; background: var(--t-gold); }
.cx-rep-src.snap i { background: var(--t-mint); }
.cx-rep-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.cx-rep-stats > div { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.cx-rep-stats b { display: block; font-family: var(--t-display); font-weight: 700; font-size: 30px; line-height: 1; color: #fff; }
.cx-rep-stats b.ok { color: var(--t-mint); }
.cx-rep-stats b.bad { color: #ff9b9b; }
.cx-rep-stats span { display: block; font-size: 11px; color: var(--t-hero-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: .06em; }
.cx-rep-b { padding: 22px 26px; display: flex; flex-direction: column; gap: 26px; }
.cx-targets { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-targets span { padding: 6px 12px; border-radius: 10px; font-size: 13px; background: var(--t-soft); color: var(--t-text-2); }
.cx-targets b { color: var(--t-navy); }
.cx-tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.cx-h3 { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-family: var(--t-display) !important; font-weight: 700; font-size: 22px; color: var(--t-navy); }
.cx-h3 small { font-family: var(--t-font); font-size: 13px; font-weight: 600; color: var(--t-red); }
.cx-g { width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-family: var(--t-font); flex: none; }
.cx-g.m { background: var(--cm-blue-bg, #dcecf3); color: var(--t-navy-2); }
.cx-g.f { background: #fbe9dd; color: #c9733a; }
.cx-g.ic { background: var(--t-mint-bg); color: var(--t-teal); }
.cx-g.bad { background: #fdecec; color: var(--t-red); }
.cx-top-r { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #f7fafb; margin-bottom: 8px; min-width: 0; }
.cx-top-r .cm-medal { width: 30px; height: 30px; }
.cx-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; display: block; background: #eef3f6; }
.cx-av.sm { width: 26px; height: 26px; }
.cx-top-id { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; line-height: 1.25; }
.cx-top-id b { display: block; font-size: 15px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-top-id span { display: block; font-size: 12px; line-height: 1.2; color: var(--t-muted); }
.cx-top-km { font-family: var(--t-display); font-weight: 700; font-size: 20px; white-space: nowrap; }
.cx-top-km.m { color: var(--t-navy-2); }
.cx-top-km.f { color: #c9733a; }
.cx-rtbl { width: 100%; min-width: 500px; border-collapse: collapse; font-size: 13px; }
.cx-rtbl th { padding: 9px 10px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t-muted); text-align: left; border-bottom: 2px solid var(--t-line); white-space: nowrap; }
.cx-rtbl td { padding: 8px 10px; border-bottom: 1px solid var(--cm-line, #f1f5f7); color: var(--t-text-2); }
.cx-rtbl .r { text-align: right; }
.cx-rtbl .c { text-align: center; }
.cx-rtbl .n { color: var(--t-muted-2); font-size: 12px; }
.cx-rtbl .who { display: flex; align-items: center; gap: 8px; }
.cx-rtbl .who b { font-weight: 600; color: var(--t-navy); }
.cx-rtbl .adj { font-size: 10px; color: var(--t-teal); }
.cx-rtbl .ok { color: var(--t-green); font-weight: 700; }
.cx-rtbl .bad { color: var(--t-red); font-weight: 700; }
.cx-rtbl tfoot td { border-top: 2px solid #e3ebef; border-bottom: none; font-weight: 700; color: var(--t-navy); }
.cx-rscroll { overflow-x: auto; }
.cx-pay { padding: 18px; border-radius: 18px; background: #f3fbf8; border: 1px solid #cdebe0; }
.cx-pay-g { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.cx-pay-l { flex: 1 1 260px; min-width: 0; }
.cx-pay-l > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #d9eee6; font-size: 14px; }
.cx-pay-l > div:last-child { border-bottom: none; }
.cx-pay-l span { color: var(--t-muted); flex: none; }
.cx-pay-l b { color: var(--t-navy); text-align: right; overflow-wrap: anywhere; }
.cx-pay-l b.mono { font-family: ui-monospace, monospace; }
.cx-pay-l b.tl { color: var(--t-teal); }
.cx-pay img { width: 150px; height: 150px; border-radius: 14px; border: 1px solid #e3ebef; background: #fff; padding: 4px; flex: none; }
.cx-rep-f { text-align: center; font-size: 11px; color: var(--t-muted-2); padding-top: 12px; border-top: 1px solid var(--t-line); }
.cx-rp-empty { text-align: center; padding: 48px 24px; }
.cx-rp-empty .cx-pw-ic { width: 64px; height: 64px; border-radius: 20px; }
.cx-rp-empty h3 { margin: 0 0 6px; font-family: var(--t-display) !important; font-size: 26px; }
.cx-rp-empty p { color: var(--t-muted); font-size: 14px; }

@media print {
    body.thr header, body.thr footer, .cm-hero, .cx-period, .cx-noprint { display: none !important; }
    .cx-rep { box-shadow: none !important; }
}

/* ==========================================================================
   POPUP CHI TIẾT VĐV CL626 (_626_detail, nằm trong .cm-modal-b)
   ========================================================================== */
.cx-md { color: var(--t-navy); font-size: 14px; }
.cx-md-who { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cx-md-who .cm-av { width: 50px; height: 50px; font-size: 15px; }
.cx-md-id { min-width: 0; flex: 1; }
.cx-md-n { font-weight: 700; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.cx-md-n small { font-weight: 400; font-size: 13px; color: var(--t-muted-2); }
.cx-md-s { font-size: 12px; color: var(--t-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 2px; }
.cx-md-s .bad { color: var(--t-red); }
.cx-md-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.cx-md-sum > div { padding: 10px 8px; border-radius: 14px; background: #f7fafb; text-align: center; min-width: 0; }
.cx-md-sum > div.tot { background: var(--t-dark); color: #fff; }
.cx-md-sum b { display: block; font-family: var(--t-display); font-weight: 700; font-size: 26px; line-height: 1.05; }
.cx-md-sum span { display: block; font-size: 11px; color: var(--t-muted); margin-top: 2px; }
.cx-md-sum .tot span { color: var(--t-hero-muted); }
.cx-md-sum em { display: block; font-style: normal; font-size: 10px; margin-top: 3px; color: var(--t-muted-2); }
.cx-md-sum em.ok { color: var(--t-teal); font-weight: 700; }
.cx-md-h, .cm-modal-b .cx-md-h { margin: 0 0 8px; font-family: var(--t-display) !important; font-weight: 700; font-size: 19px; color: var(--t-navy); display: flex; align-items: baseline; gap: 6px; }
.cx-md-h small { font-family: var(--t-font); font-size: 12px; font-weight: 600; color: var(--t-muted); }
.cx-md .cx-tscroll { margin: 0 0 18px; }
.cx-md .cx-tbl td, .cx-md .cx-tbl th { padding: 8px 10px; }
.cx-md .cx-tbl tr.long td { background: #fafdfc; }
.cx-md .cx-tbl .pt { font-weight: 700; color: var(--t-navy); }
.cx-md .cx-tbl .g { color: var(--t-teal); }
.cx-md-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--t-mint-bg); color: var(--t-teal); margin-left: 4px; }
.cx-md-tag.ph { background: none; color: var(--t-muted-2); font-weight: 500; }
.cx-md-empty { font-size: 13px; color: var(--t-muted); margin-bottom: 18px !important; }

.cx-md-add { margin-bottom: 12px; border: 1px solid #cdebe0; border-radius: 14px; overflow: hidden; }
.cx-md-add > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f3fbf8; color: var(--t-teal); font-size: 13px; font-weight: 700; }
.cx-md-add > summary::-webkit-details-marker { display: none; }
.cx-md-add > summary small { font-weight: 500; color: var(--t-muted); }
.cx-md-form { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid #e3f2ec; }
.cx-md-form label.f { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--t-muted); min-width: 0; }
.cx-md-form .cx-in { width: 100%; min-height: 40px; font-size: 14px; }
.cx-md-g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.cx-md-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cx-md-g3 .cx-in { text-align: center; }
.cx-md-form .cx-chk { min-height: 0; }
.cx-md-form p { font-size: 11px; line-height: 1.5; color: var(--t-muted); }
.cx-md-form .cx-btn { width: 100%; }

.cx-trk { display: flex; flex-direction: column; gap: 8px; }
.cx-tk { padding: 12px; border-radius: 14px; border: 1px solid var(--cm-line2, #e3ebef); min-width: 0; }
.cx-tk.warn { background: #fff7f6; border-color: #f6d4d0; }
.cx-tk-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cx-tk-id { min-width: 0; }
.cx-tk-n { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; font-size: 14px; color: var(--t-navy); }
.cx-tk-n span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
a.cx-tk-n { color: var(--t-navy) !important; }
a.cx-tk-n:hover span { text-decoration: underline; }
a.cx-tk-n em { flex: none; font-style: normal; font-size: 11px; font-weight: 700; color: var(--t-strava); white-space: nowrap; }
.cx-tk-m { font-size: 11px; color: var(--t-muted); margin-top: 2px; }
.cx-tk-st { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.cx-st { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.cx-st.ok { background: var(--t-mint-bg); color: var(--t-teal); }
.cx-st.ex { background: var(--t-gold-bg); color: #8a5a00; }
.cx-st.bad { background: #fdecec; color: #a32b2b; }
.cx-st.bad i { width: 14px; height: 14px; border-radius: 50%; background: var(--t-red); color: #fff; font-style: normal; font-size: 9px; display: inline-flex; align-items: center; justify-content: center; }
.cx-tk-by { font-size: 10px; font-weight: 600; }
.cx-tk-by.ok { color: var(--t-teal); }
.cx-tk-by.no { color: var(--t-red); }
.cx-tk-w { margin-top: 6px; font-size: 11px; color: var(--t-red); display: flex; align-items: center; gap: 5px; }
.cx-tk-w.amber { color: #9a6a00; }
.cx-tk-w.seen { color: var(--t-muted-2); text-decoration: line-through; }
.cx-tk-w i { width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--t-gold); color: #fff; font-style: normal; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.cx-tk-w.seen i { background: #c6d5dc; }
.cx-tk-seen { margin-top: 4px; font-size: 10px; color: var(--t-muted); }
.cx-tk-btc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px dashed #e3ebef; }
.cx-tk-btc > span { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--t-muted-2); }
.cx-tk-btc button { min-height: 30px; padding: 0 11px; border: none; border-radius: 9px; background: #eef3f6; color: var(--t-text-2); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.cx-tk-btc button:hover { background: #e3ebef; }
.cx-tk-btc button.ok-on { background: var(--t-teal); color: #fff; }
.cx-tk-btc button.no-on { background: var(--t-red); color: #fff; }
.cx-tk-btc button.seen-on { background: var(--t-navy); color: #fff; }
.cx-tk-btc button[disabled] { opacity: .6; cursor: wait; }

/* ==========================================================================
   DI ĐỘNG (≤ 860px)
   ========================================================================== */
@media (max-width: 860px) {
    .cx .cm-stats.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cx .cm-stats.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cx-teams { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .cx-tm { padding: 10px; border-radius: 14px; }
    .cx-tm-h b { font-size: 14px; }
    .cx-hero-sub { font-size: 13px; }
    .cx-intro { padding: 18px 16px 18px 22px; }
    .cx-intro::before { width: 4px; }
    .cx-intro-q { font-size: 48px; height: 24px; }
    .cx-intro-lead { font-size: 16px !important; }
    .cx-intro-body { font-size: 14px; gap: 10px; line-height: 1.7; }
    .cx-stack { font-size: 13px; gap: 10px; }
    .cx-blk { padding: 12px 14px; border-radius: 14px; }
    .cx-blk-t { font-size: 14px; }
    .cx-ex { font-size: 12px; }
    .cx-eq { font-size: 17px; }
    .cx-law > div { padding: 12px 14px; border-radius: 14px; }
    .cx-law ul, .cx-law p { font-size: 13px; }
    .cx-pace { padding: 14px; }
    .cx-pace-v { font-size: 30px; }
    .cx-pace form .cx-in { flex: 1; width: auto; }
    .cx-act { min-height: 40px; font-size: 12px; padding: 0 12px; }
    .cx-acts form { flex: 1 1 auto; }
    .cx-acts .cx-act { width: 100%; justify-content: center; }
    .cx-week { padding: 12px; }
    .cx-head-row { flex-direction: column; align-items: stretch; gap: 10px; }
    .cx-tabs { align-self: stretch; }
    .cx-tabs button { flex: 1 0 auto; padding: 0 12px; }
    .cx-r { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; padding: 9px 4px; }
    .cx-r-n { font-size: 14px; }
    .cx-r-v b { font-size: 19px; }
    .cx-r-s { font-size: 11px; }
    .cx-btc-b { padding: 12px; }
    .cx-li { flex-wrap: wrap; }

    .cx-mem { gap: 12px; margin-top: 14px; }
    .cx-mem .cm-av { width: 58px; height: 58px; font-size: 18px; }
    .cx-mem-id .cm-h1 { font-size: 32px; }
    .cx-sd > summary { padding: 10px 12px; gap: 4px 10px; }
    .cx-sd-b { padding: 0 12px 12px; }

    .cx-pw { padding: 92px 16px 48px; min-height: 0; }
    .cx-pw-card { padding: 28px 20px 22px; border-radius: 20px; }
    .cx-pw-card h1 { font-size: 30px; }

    .cx-rp .cm-h1 { font-size: 36px; }
    .cx-rep { border-radius: 20px; }
    .cx-rep-h { padding: 18px 16px; }
    .cx-rep-h h2 { font-size: 24px; }
    .cx-rep-stats b { font-size: 24px; }
    .cx-rep-stats > div { padding: 10px; }
    .cx-rep-stats span { font-size: 10px; }
    .cx-rep-b { padding: 16px; gap: 20px; }
    .cx-rscroll { margin: 0 -16px; padding: 0 16px; }
    .cx-pay { padding: 14px; }
    .cx-pay-g { flex-direction: column; align-items: center; }
    .cx-pay-l { flex: none; width: 100%; }
    .cx-pay-l > div { font-size: 13px; }

    .cx-md-sum b { font-size: 22px; }
    .cx-md .cx-tbl td, .cx-md .cx-tbl th { padding: 7px 6px; font-size: 12px; }
    .cx-md .cx-tbl th { font-size: 10px; letter-spacing: .02em; }
    .cx-md-tag.ph { display: none; }
    .cx-md-sum span { font-size: 10px; }
}
@media (max-width: 380px) {
    .cx-tabs button { padding: 0 9px; font-size: 12px; }
    .cx-md-g2 { grid-template-columns: minmax(0, 1fr); }
    .cx-pw-acts { flex-direction: column-reverse; }
}

/* Bản sao dùng để XUẤT ẢNH (html2canvas, lớp thêm trong onclone): html2canvas vẽ chữ thấp hơn trình duyệt
   vài px → chữ trong ô overflow:hidden bị xén chân, ảnh & chữ lệch hàng. Nới dòng, bỏ xén, cho tên xuống dòng. */
.cx-xuat b, .cx-xuat span, .cx-xuat td, .cx-xuat th, .cx-xuat div { line-height: 1.4 !important; }
.cx-xuat .cx-top-id b { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; padding-bottom: 2px; }
.cx-xuat .cx-top-r, .cx-xuat .cx-rtbl .who { align-items: center !important; }
.cx-xuat .cx-av { flex: none !important; }
.cx-xuat .cx-rtbl td { vertical-align: middle !important; }
/* Đo trên ảnh xuất: trong ô bảng, html2canvas vẽ chữ thấp hơn ~7px so với ảnh → hạ ảnh xuống cho khớp */
@media (min-width: 861px) { .cx-xuat .cx-rtbl .who img { position: relative; top: 7px; } }


/* ================= Báo cáo — làm đẹp (máy tính + di động) ================= */
.cx-h3 { flex-wrap: wrap; row-gap: 6px; }
.cx-phat-pill { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; background: #fdecec; border: 1px solid #f6c9c9; color: var(--t-red) !important; font-size: 12px !important; font-weight: 700 !important; white-space: nowrap; }
.cx-rtbl thead th { background: #f7fafb; }
.cx-rtbl thead th:first-child { border-radius: 10px 0 0 10px; }
.cx-rtbl thead th:last-child { border-radius: 0 10px 10px 0; }
.cx-rtbl tbody tr { transition: background .15s; }
.cx-rtbl tbody tr:hover { background: #f4fbf8; }
.cx-rtbl td.km { white-space: nowrap; color: var(--t-muted); }
.cx-rtbl td.km b { font-family: var(--t-display); font-weight: 700; font-size: 17px; color: var(--t-navy); margin-right: 2px; }
.cx-rtbl td.mt { white-space: nowrap; }
.cx-km-mt { display: none; }
@media (max-width: 860px) { .cx-km-mt { display: inline; font-size: 12px; color: var(--t-muted); margin-left: 1px; } }
.cx-rtbl td.phat { font-family: var(--t-display); font-size: 16px; white-space: nowrap; }
.cx-rtbl td.thieu, .cx-rtbl td.kq { white-space: nowrap; }
.cx-rtbl tfoot td { background: #fff7f7; padding-top: 12px; padding-bottom: 12px; }
.cx-rtbl tfoot td.tong-l { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--t-muted); }
.cx-rtbl tfoot td.tong-v { font-family: var(--t-display); font-size: 20px; }

@media (max-width: 860px) {
    /* Bộ lọc: mỗi ô một dòng, nút Xem rộng hết */
    .cx-pform { flex-direction: column; align-items: stretch; gap: 12px; }
    .cx-pform label.f { flex: none; width: 100%; }
    .cx-pform .cx-in { font-size: 15px; }
    .cx-chk-all { min-height: 0; }
    .cx-pform .cx-btn { width: 100%; justify-content: center; min-height: 46px; }

    /* Bảng → thẻ dọc: không vuốt ngang, đủ cột Thiếu / Phạt / Kết quả */
    .cx-rscroll { overflow: visible; margin: 0; padding: 0; }
    .cx-rtbl { min-width: 0; }
    .cx-rtbl thead { display: none; }
    .cx-rtbl tbody tr { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; padding: 10px 2px; border-bottom: 1px solid var(--t-line); }
    .cx-rtbl tbody tr:hover { background: none; }
    .cx-rtbl tbody td { border: none; padding: 0; }
    .cx-rtbl tbody td.n { order: 1; width: 26px; flex: none; font-size: 12px; }
    .cx-rtbl tbody td:nth-child(2) { order: 2; width: calc(100% - 26px - 96px); min-width: 0; }
    .cx-rtbl tbody td.km { order: 3; width: 96px; text-align: right; }
    .cx-rtbl tbody td.km b { font-size: 19px; }
    .cx-rtbl .who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cx-rtbl tbody td.gt, .cx-rtbl tbody td.mt, .cx-rtbl tbody td.thieu, .cx-rtbl tbody td.phat, .cx-rtbl tbody td.kq {
        order: 4; flex: none; text-align: left; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--t-soft); }
    .cx-rtbl tbody td.gt, .cx-rtbl tbody td.mt { color: var(--t-text-2); }
    .cx-rtbl tbody td.thieu, .cx-rtbl tbody td.phat, .cx-rtbl tbody td.kq.bad { background: #fdecec; }
    .cx-rtbl tbody td.kq.ok { background: #e6f7ef; }
    .cx-rtbl tbody td.phat { font-family: var(--t-font); font-size: 12px; }
    .cx-rtbl tbody td[data-l]:not(.km)::before { content: attr(data-l) ' '; font-weight: 500; color: var(--t-muted); }
    /* Mục tiêu gộp cạnh số km («22.4/40 km») → dòng chip chỉ còn Thiếu+Phạt / GT+Kết quả, vừa 1 dòng */
    .cx-rtbl tbody td.mt { display: none; }
    .cx-rtbl tbody td.thieu, .cx-rtbl tbody td.gt { margin-left: 26px; }
    .cx-rtbl tbody td.phat, .cx-rtbl tbody td.kq { margin-left: 6px; }
    .cx-rtbl tbody td.km { width: 110px; }
    .cx-rtbl tbody td:nth-child(2) { width: calc(100% - 26px - 110px); }
    .cx-rtbl tfoot tr { display: flex; justify-content: space-between; align-items: center; border-radius: 12px; margin-top: 10px; padding: 10px 14px; background: #fff7f7; border: 1px solid #f6d6d6; }
    .cx-rtbl tfoot td { border: none; display: block; background: none; padding: 0; }
}