/* aha-cmp-close.css · khối C1 “Băng trượt (carousel/slider) + chấm phân trang” (lane `cmp-close`).
   Vì sao có file: đối chiếu 22 nhóm control/component của bản gương (21 màn, đo bằng CDP ở
   `docs/evidence/cmp-close/probe.py`) với `wwwroot/aha.html` còn ĐÚNG 1 nhóm thiếu — băng trượt kiểu
   `swiper` (gương s17: `.swiper-wrapper`/`.swiper-slide` ×12/`.swiper-pagination`, 17 phần tử;
   aha.html trước khối: 0). Xem `docs/evidence/cmp-close/matrix-*.tsv` + `report.md`.

   Ràng buộc: 100 % token (`bnn-tokens.css` + `--jx-*`) ⇒ 0 mã màu rời; có bảng TỐI cho đúng những chỗ
   dùng token KHÔNG đổi theo theme (L-0225: phải có CẢ `:root[data-theme=dark]` và `:root.dark`);
   không bundle, không CDN, không mượn class Tailwind (tránh L-0229: rule không-layer thắng tiện ích);
   sàn chữ 12px = `--bnn-fs-small` (cổng §4: chữ < 12px chỉ còn ở `.bnn-tag`/`.bnn-size-sub`). */

/* ── Khung mục danh mục (đồng bộ khối `#aha-all-cmp` / `#aha-ctrl-more`) ───────────────────────── */
#aha-cmp-carousel{display:block}
#aha-cmp-carousel .acc-h4{margin:16px 0 8px;font-size:14px;font-weight:var(--bnn-fw-semibold);color:var(--jx-text)}
#aha-cmp-carousel .acc-cls{font-family:var(--bnn-font-mono);font-size:12px;color:var(--jx-text-2)}
#aha-cmp-carousel .acc-hint{margin:0 0 10px;color:var(--jx-text-2)}
#aha-cmp-carousel .acc-note{margin:10px 0 0;font-size:var(--bnn-fs-small);color:var(--jx-text-2)}
#aha-cmp-carousel code{font-family:var(--bnn-font-mono);font-size:12px;color:var(--jx-text)}

/* ── Băng trượt: khung cuộn có bắt điểm (scroll-snap) ─────────────────────────────────────────── */
.cmp-slider{display:grid;gap:10px;margin:0;padding:10px 12px 12px;
  border:1px solid var(--jx-border);border-radius:var(--bnn-radius-12);background:var(--jx-surface)}
.cmp-slider__track{
  display:flex;gap:12px;margin:0;padding:2px 2px 8px;list-style:none;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;
}
.cmp-slider__track:focus-visible{outline:2px solid var(--jx-focus);outline-offset:2px}
.cmp-slide{flex:0 0 auto;width:196px;scroll-snap-align:start}
.cmp-slide__card{
  display:grid;gap:6px;justify-items:center;align-content:center;height:120px;padding:10px 8px;
  border:1px solid var(--jx-border);border-radius:var(--bnn-radius-12);
  background:var(--jx-surface);color:var(--jx-text);text-align:center;
}
.cmp-slide__day{font-size:var(--bnn-fs-small);font-weight:var(--bnn-fw-semibold);color:var(--jx-text-2)}
.cmp-slide__ic{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--bnn-radius-pill);
  background:color-mix(in srgb, var(--bnn-color-primary-50) 14%, var(--jx-surface));
  color:var(--bnn-color-primary-70)}
.cmp-slide__x{font-size:var(--bnn-fs-body);font-weight:var(--bnn-fw-bold);color:var(--jx-text)}
.cmp-slide__meta{font-size:var(--bnn-fs-small);color:var(--jx-text-2)}
.cmp-slide--done .cmp-slide__ic{background:color-mix(in srgb, var(--bnn-ok) 14%, var(--jx-surface));color:var(--bnn-ok)}
.cmp-slide--now .cmp-slide__card{border-color:var(--bnn-color-primary-60);box-shadow:var(--bnn-shadow-card)}
.cmp-slide--locked .cmp-slide__card{background:var(--jx-alt);border-color:var(--jx-border)}
.cmp-slide--locked .cmp-slide__ic{background:var(--jx-sunken);color:var(--jx-text-2)}
.cmp-slide--locked .cmp-slide__x{color:var(--jx-text-2)}

/* ── Chấm phân trang (chấm kiểu swiper → chấm dài khi đang chọn) + mũi tên ─────────────────────── */
.cmp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cmp-arrows{display:flex;gap:8px}
.cmp-flip{transform:rotate(180deg)}
.cmp-dots{display:flex;align-items:center;gap:6px;padding:0;margin:0}
.cmp-dot{width:10px;height:10px;padding:0;border:0;border-radius:var(--bnn-radius-pill);
  background:var(--jx-border-strong);cursor:pointer}
.cmp-dot:hover{background:var(--jx-text-2)}
.cmp-dot.is-on{width:22px;background:var(--bnn-color-primary-60)}
.cmp-dot:focus-visible{outline:2px solid var(--jx-focus);outline-offset:2px}

/* ── Biến thể cuộn tự do (free-mode) ──────────────────────────────────────────────────────────── */
.cmp-strip{display:flex;gap:10px;align-items:center;margin:0;padding:2px 2px 8px;list-style:none;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.cmp-strip__item{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 10px;
  border:1px solid var(--jx-border);border-radius:var(--bnn-radius-10);background:var(--jx-surface);
  color:var(--jx-text);font-size:var(--bnn-fs-small)}
.cmp-strip__item b{font-weight:var(--bnn-fw-semibold);color:var(--jx-text)}
.cmp-strip__item .bnn-ic{color:var(--jx-text-2)}

/* ── Bảng TỐI: chỉ cho token KHÔNG tự đổi theo theme (dải màu cam/đặc) — L-0225 ────────────────── */
:root[data-theme="dark"] .cmp-slide__ic,
:root.dark .cmp-slide__ic,
:is(.dark,[data-theme="dark"]):is(.dark,[data-theme="dark"]) .cmp-slide__ic{
  background:color-mix(in srgb, var(--bnn-dark-solid) 18%, var(--jx-surface));
  color:var(--bnn-dark-solid);
}
:root[data-theme="dark"] .cmp-slide--done .cmp-slide__ic,
:root.dark .cmp-slide--done .cmp-slide__ic,
:is(.dark,[data-theme="dark"]):is(.dark,[data-theme="dark"]) .cmp-slide--done .cmp-slide__ic{
  background:color-mix(in srgb, var(--bnn-color-green-30) 18%, var(--jx-surface));
  color:var(--bnn-color-green-30);
}
:root[data-theme="dark"] .cmp-dot.is-on,
:root.dark .cmp-dot.is-on,
:is(.dark,[data-theme="dark"]):is(.dark,[data-theme="dark"]) .cmp-dot.is-on{background:var(--bnn-dark-solid)}

/* Khổ hẹp: không bỏ phần tử nào, chỉ đổi cách xếp (cuộn dọc chấm + mũi tên) ─────────────────── */
@media (max-width:640px){
  .cmp-row{justify-content:flex-start}
  .cmp-slide{width:118px}
  .cmp-slide__card{height:112px}
}
/* Khổ >=1180px: 6 thẻ vẫn dài hơn khung ⇒ giữ đúng hành vi “cuộn tự do + chấm” của gương (không tự
   dưng hết cuộn ở màn rộng). Chiều rộng thẻ suy từ bề rộng khung: 6 thẻ + 5 khe 12px > khung. */
@media (min-width:1180px){.cmp-slide{width:210px}}