/* aha-ctrl2.css · control bổ sung cho thư viện thành phần AHA (lane `aha-ctrl2`, wave W2).
   Vì sao có file này: đối chiếu THẬT thư viện thành phần của bản gương AhaMove (20 màn dựng từ phiên
   MITM + host demo đang chạy, API trả từ catalog) với `wwwroot/aha.html` (24 mục `#aha-all-cmp` +
   khối `#ah-styleguide`) còn thiếu nhóm "Form/Overlay" mà lane `aha-ctrl-more` KHÔNG làm:
     · A · Lịch chọn ngày (mirror: react-day-picker — `.rdp-months/.rdp-nav/.rdp-weekday/.rdp-day_button`)
     · B · Chọn giờ dạng bánh xe (mirror: cột số `05 : 30` trong sheet "Hẹn giờ lấy hàng")
     · C · Ô chọn + mã quốc gia (mirror: `role="combobox"` + tiền tố `+84` ở /sign-in)
     · D · Sheet chọn danh sách 1-chọn / nhiều-chọn + thanh hành động (mirror: sheet "Xuất dữ liệu"
           dùng `<span role="radio" data-unchecked>`, sheet "Tags" dùng `<label for="tag-…">`)
   Ràng buộc: 100 % token của `bnn-tokens.css` (0 mã màu rời ⇒ dark parity tự động), không bundle,
   không CDN, không đụng `jira-skin.css`/`app.min.css`, không xoá phần tử nào của lane khác.
   Bằng chứng DOM (text, không ảnh): `docs/evidence/aha-controls/targets-*.html`, `targets.json`,
   `signin-otp.json`, `mirror-chunks.txt` (chunk `DayPicker`, `calendar`, `selectors`, `checkbox`, `radio`).

   §E vá TRÀN NGANG mobile: chỉ giới hạn/offset theo viewport, KHÔNG bỏ phần tử nào (L-0227: mốc đo là
   `document.scrollingElement.scrollWidth - clientWidth`, không dùng `innerWidth`). */

/* ══ Khung mục danh mục (đồng bộ cách `#aha-all-cmp`/`#ah-styleguide` đang dùng) ═══════════════ */
#aha-ctrl2{display:block}
#aha-ctrl2 .acc-hint{margin:0 0 10px;color:var(--jx-text-2)}
#aha-ctrl2 .acc-h4{margin:16px 0 8px;font-size:14px;font-weight:var(--bnn-fw-semibold);color:var(--jx-text)}
#aha-ctrl2 .acc-sub{border-top:1px dashed var(--jx-border);padding-top:12px;margin-top:12px}
#aha-ctrl2 .acc-c2{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
#aha-ctrl2 .acc-cls{font-family:var(--bnn-font-mono);font-size:12px;color:var(--jx-text-2)}
#aha-ctrl2 .acc-note{margin:8px 0 0;font-size:var(--bnn-fs-small);color:var(--jx-text-2)}
#aha-ctrl2 .acc-demo{border:1px solid var(--jx-border);border-radius:var(--bnn-radius-12);background:var(--jx-surface);padding:14px}

/* ══ A · LỊCH CHỌN NGÀY (`--aha-cal-*`) ════════════════════════════════════════════════════════ */
.aha-cal{display:grid;gap:10px;width:100%;max-width:320px;padding:12px;
  background:var(--jx-surface);border:1px solid var(--jx-border);border-radius:var(--bnn-radius-14);
  box-shadow:var(--bnn-shadow-card);color:var(--jx-text)}
.aha-cal__head{display:flex;align-items:center;gap:8px}
.aha-cal__month{font-size:var(--bnn-fs-body);font-weight:var(--bnn-fw-semibold);line-height:var(--bnn-lh-body)}
.aha-cal__nav{margin-left:auto;display:flex;gap:6px}
.aha-cal__btn{width:28px;height:28px;display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid var(--jx-border);border-radius:var(--bnn-radius-6);background:var(--jx-surface);color:var(--jx-text-2)}
.aha-cal__btn:hover{border-color:var(--jx-border-strong);color:var(--jx-text)}
.aha-cal__btn:focus-visible{outline:2px solid var(--jx-focus);outline-offset:1px}
.aha-cal__dows,.aha-cal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.aha-cal__dow{font-size:var(--bnn-fs-small);line-height:var(--bnn-lh-small);color:var(--jx-text-2);
  text-align:center;font-weight:var(--bnn-fw-medium)}
.aha-cal__day{height:34px;display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid transparent;border-radius:var(--bnn-radius-6);background:none;
  color:var(--jx-text);font:inherit;font-size:var(--bnn-fs-small)}
.aha-cal__day:hover{background:var(--jx-alt)}
.aha-cal__day:focus-visible{outline:2px solid var(--jx-focus);outline-offset:1px}
.aha-cal__day.is-out{color:var(--jx-text-sub)}
.aha-cal__day.is-today{border-color:var(--jx-focus);color:var(--jx-text)}
.aha-cal__day.is-on,.aha-cal__day[aria-pressed="true"]{background:var(--bnn-orange);border-color:var(--bnn-orange);
  color:hsl(var(--bnn-primary-fg));font-weight:var(--bnn-fw-semibold)}
.aha-cal__day:disabled{color:var(--jx-text-sub);opacity:.5;cursor:not-allowed}
.aha-cal__day:disabled:hover{background:none}
.aha-cal__foot{display:flex;align-items:center;gap:8px;font-size:var(--bnn-fs-small);color:var(--jx-text-2)}
.aha-cal__chip{margin-left:auto;padding:3px 8px;border-radius:var(--bnn-radius-pill);
  background:var(--jx-alt);color:var(--jx-text-2);font-family:var(--bnn-font-mono);font-size:12px}

/* ══ B · CHỌN GIỜ — bánh xe 2 cột (`--aha-time-*`) ═════════════════════════════════════════════ */
.aha-time{display:flex;align-items:center;gap:6px;font-family:var(--bnn-font-mono)}
.aha-time__col{display:grid;gap:2px;max-height:132px;overflow-y:auto;padding:4px;scroll-snap-type:y mandatory;
  background:var(--jx-alt);border:1px solid var(--jx-border);border-radius:var(--bnn-radius-10)}
.aha-time__item{scroll-snap-align:center;min-width:44px;padding:4px 8px;border:1px solid transparent;cursor:pointer;
  border-radius:var(--bnn-radius-6);background:none;color:var(--jx-text-2);font:inherit;font-size:var(--bnn-fs-small)}
.aha-time__item:hover{color:var(--jx-text)}
.aha-time__item.is-on{background:var(--jx-sel);border-color:var(--jx-focus);color:var(--jx-text);
  font-weight:var(--bnn-fw-semibold)}
.aha-time__sep{font-size:var(--bnn-fs-body);font-weight:var(--bnn-fw-semibold);color:var(--jx-text-2)}

/* ══ C · Ô CHỌN + MÃ QUỐC GIA (`--aha-select-*`) — mirror: `role="combobox"` + `+84` ═══════════ */
.aha-select{display:flex;align-items:stretch;width:100%;max-width:340px;overflow:hidden;
  border:1px solid var(--jx-border-strong);border-radius:var(--bnn-radius-10);background:var(--jx-surface)}
.aha-select:focus-within{border-color:var(--jx-focus);box-shadow:0 0 0 3px var(--jx-sel)}
.aha-select__cc{display:inline-flex;align-items:center;gap:6px;padding:0 10px;white-space:nowrap;
  border-right:1px solid var(--jx-border);background:var(--jx-alt);color:var(--jx-text);
  font-size:var(--bnn-fs-small)}
.aha-select__flag{width:18px;height:12px;border-radius:2px;background:var(--bnn-color-red-40);flex:0 0 auto}
.aha-select__field{position:relative;flex:1 1 auto;display:flex;align-items:center;min-width:0}
.aha-select__field>input,.aha-select__field>select{flex:1 1 auto;min-width:0;height:40px;padding:0 34px 0 10px;
  border:0;background:none;color:var(--jx-text);font:inherit;font-size:var(--bnn-fs-body)}
.aha-select__field>select{appearance:none;cursor:pointer}
.aha-select__chev{position:absolute;right:10px;pointer-events:none;color:var(--jx-text-2);font-size:12px}
.aha-select--plain{max-width:260px}
.aha-select--plain .aha-select__field>select{border-radius:0}

/* ══ D · SHEET CHỌN DANH SÁCH (`--aha-pick-*`) — mirror: sheet "Xuất dữ liệu"/"Tags" ═══════════ */
.aha-pick{display:grid;gap:0;width:100%;max-width:420px;overflow:hidden;color:var(--jx-text);
  background:var(--jx-surface);border:1px solid var(--jx-border);border-radius:var(--bnn-radius-14);
  box-shadow:var(--bnn-shadow-sheet)}
.aha-pick__grab{width:36px;height:4px;margin:8px auto 0;border-radius:var(--bnn-radius-pill);background:var(--jx-border-strong)}
.aha-pick__head{display:grid;gap:2px;padding:10px 14px 6px}
.aha-pick__title{font-size:var(--bnn-fs-body);font-weight:var(--bnn-fw-semibold)}
.aha-pick__desc{font-size:var(--bnn-fs-small);color:var(--jx-text-2)}
.aha-pick__list{list-style:none;margin:0;padding:0 6px 6px;display:grid;gap:2px;max-height:236px;overflow-y:auto}
.aha-pick__row{display:flex;align-items:center;gap:10px;padding:9px 10px;cursor:pointer;
  border-radius:var(--bnn-radius-10);color:var(--jx-text)}
.aha-pick__row:hover{background:var(--jx-alt)}
.aha-pick__row.is-on{background:var(--jx-sel)}
.aha-pick__mark{flex:0 0 18px;width:18px;height:18px;display:grid;place-items:center;
  border:1.5px solid var(--jx-border-strong)}
/* Chỉ báo vẽ bằng CSS (không dùng ký tự) ⇒ trong khối không còn chữ nào < 12px (cổng §5.4). */
.aha-pick__row.is-on .aha-pick__mark::after{content:"";display:block;background:hsl(var(--bnn-primary-fg))}
.aha-pick--one .aha-pick__row.is-on .aha-pick__mark::after{width:8px;height:8px;border-radius:var(--bnn-radius-pill)}
.aha-pick--many .aha-pick__row.is-on .aha-pick__mark::after{width:4px;height:9px;background:none;
  border-right:2px solid hsl(var(--bnn-primary-fg));border-bottom:2px solid hsl(var(--bnn-primary-fg));
  transform:rotate(45deg) translate(-1px,-1px)}
.aha-pick--one .aha-pick__mark{border-radius:var(--bnn-radius-pill)}
.aha-pick--many .aha-pick__mark{border-radius:var(--bnn-radius-6)}
.aha-pick__row.is-on .aha-pick__mark{border-color:var(--bnn-orange);background:var(--bnn-orange)}
.aha-pick__text{flex:1 1 auto;font-size:var(--bnn-fs-small)}
.aha-pick__n{font-family:var(--bnn-font-mono);font-size:12px;color:var(--jx-text-2)}
.aha-pick__foot{display:flex;gap:8px;align-items:center;padding:10px 14px;
  border-top:1px solid var(--jx-border);background:var(--jx-alt)}
.aha-pick__b{margin:0;padding:8px 14px;border-radius:var(--bnn-radius-10);cursor:pointer;font:inherit;
  font-size:var(--bnn-fs-small);font-weight:var(--bnn-fw-medium)}
.aha-pick__b--ghost{border:1px solid var(--jx-border-strong);background:var(--jx-surface);color:var(--jx-text)}
.aha-pick__b--go{margin-left:auto;border:1px solid var(--bnn-navy);background:var(--bnn-navy);color:var(--bnn-card)}
.aha-pick__b--go:hover{background:var(--bnn-navy-700)}
.aha-pick__b:focus-visible{outline:2px solid var(--jx-focus);outline-offset:1px}
.aha-pick__inner{display:flex;flex-wrap:wrap;gap:12px;padding:0 14px 10px}
.aha-pick__inner>.aha-cal{box-shadow:none;border-color:var(--jx-border)}

/* ══ E · VÁ TRÀN NGANG MOBILE — chỉ offset/giới hạn/bố cục, KHÔNG bỏ phần tử ═══════════════════════
   Đo trên cây hiện tại (`probe-controls.py --aha` + `probe-overflow.py`, L-0227: mốc đo là
   `document.scrollingElement.scrollWidth - clientWidth`, KHÔNG dùng `innerWidth`):

   E1 · LỊCH THEME (flatpickr) — `#aha-all-cmp` có `<input data-provider="flatpickr">`; app.js dựng
        `.flatpickr-calendar` ngay cuối `<body>`. Ở 390px, 42 ô `.flatpickr-day` là phần tử INLINE nằm
        chung một hàng (không xuống dòng) ⇒ mép phải vươn tới x=470, kéo layout viewport lên 470 và
        làm cả trang tràn 80px. Bản gương dùng lịch 7 cột (`.rdp-weeks`), nên ở đây ép lại thành lưới
        7 cột bằng token — KHÔNG xoá ô ngày nào, số ô giữ nguyên 42.
   E2 · `.bnn-toast-stack` (khối `#aha-all-cmp`): `position:fixed;right:16px` tính theo layout viewport
        (đang bị nới 470) ⇒ mép phải 454. Sau khi E1 đưa layout viewport về 390 thì khai báo gốc đã
        đúng; khối này chỉ siết thêm ở khổ hẹp để không phụ thuộc thứ tự chèn CSS của lane khác.
   E3 · `.bnn-tip__bub--r` (lane `aha-ctrl-more`) đã tự đổi sang bong bóng phía trên ở `@media 640px`.
   Đo lại sau vá: xem `docs/evidence/aha-controls/overflow-after.txt` + report §4 (trước → sau). */

.flatpickr-calendar{width:min(340px,100%);max-width:100%}
.flatpickr-calendar .dayContainer{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;
  width:auto;min-width:0;max-width:100%}
.flatpickr-calendar .flatpickr-day{display:block;width:auto;min-width:0;max-width:none;flex-basis:auto;
  height:34px;line-height:34px;padding:0;text-align:center;border-radius:var(--bnn-radius-6);
  color:var(--jx-text);font-size:var(--bnn-fs-small)}
.flatpickr-calendar .flatpickr-day:hover,
.flatpickr-calendar .flatpickr-day:focus{background:var(--jx-alt);border-color:var(--jx-border)}
.flatpickr-calendar .flatpickr-day.today{border-color:var(--jx-focus)}
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange{background:var(--bnn-orange);border-color:var(--bnn-orange);
  color:hsl(var(--bnn-primary-fg));font-weight:var(--bnn-fw-semibold)}
.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled{color:var(--jx-text-sub)}
.flatpickr-calendar .flatpickr-weekday{color:var(--jx-text-2);font-size:var(--bnn-fs-small);
  font-weight:var(--bnn-fw-medium)}

@media (max-width:640px){
  .bnn-toast-stack{left:auto;right:12px;width:min(320px,calc(100% - 24px))}
  #aha-ctrl2 .acc-demo{padding:12px}
  #aha-ctrl2 .aha-pick__inner{padding:0 12px 10px}
  .flatpickr-calendar{width:min(320px,100%)}
}