# CupSize
Nhóm chọn cỡ ly M hoặc L: hình ly vẽ bằng clip-path, kèm phụ phí "Size L +7k".

## Khi nào dùng
- Chọn ly cho đơn ở quầy hoặc trong bảng giá khi khách gọi size.
- Ly nhỏ `tt-cupsize__mini` còn dùng làm biểu tượng size trong ô thành phần của thẻ khách (CustomerCard).

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Nhóm chọn | `tt-cupsize` | `role="radiogroup"`, hai lựa chọn chia đều |
| Lựa chọn | `tt-cupsize__option` | Nút `role="radio"` cao tối thiểu 52px |
| Ly M / L | `tt-cupsize__cup` · `tt-cupsize__cup--l` | 15×19 và 17×27, tô theo màu chữ |
| Ly nhỏ | `tt-cupsize__mini` · `tt-cupsize__mini--l` | 12×13 và 13×19, màu `soft`, dùng trong ô thẻ khách |

## Cấu trúc
```html
<div class="tt-cupsize" role="radiogroup" aria-label="Chọn cỡ ly">
  <button type="button" class="tt-cupsize__option" role="radio" aria-checked="true" tabindex="0" data-size="M">
    <span class="tt-cupsize__cup" aria-hidden="true"></span><span>M</span>
  </button>
  <button type="button" class="tt-cupsize__option" role="radio" aria-checked="false" tabindex="-1" data-size="L"
          aria-label="Size L, phụ phí 7k">
    <span class="tt-cupsize__cup tt-cupsize__cup--l" aria-hidden="true"></span><span>L</span>
    <small class="tt-cupsize__fee">+7k</small>
  </button>
</div>
```

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| `aria-checked="true"` | Viền `pink`, nền `pink` 18% |
| Focus bàn phím | Vòng `focus-ring` 3px (từ `.tt-app`) |

## Hành vi JS
`TTMU.cupSize(root, { onChange })` → `{ value, set(size), destroy() }` (hoặc `null` nếu đã gắn).
```js
var size = TTMU.cupSize(document.querySelector('.tt-cupsize'), {
  onChange: function (s) { /* s = "M" hoặc "L" */ }
});
size.set('L');
```
Mũi tên (trái/phải/lên/xuống) đổi lựa chọn và dời focus, Home/End nhảy đầu/cuối; chỉ lựa chọn đang bật có `tabindex="0"`. Quy ước `onChange`: chỉ người dùng (bấm, phím) mới gọi, và chỉ khi cỡ ly đổi; `set()` từ code thì im lặng.

## Token sử dụng
`line`, `pink`, `shadow-on` (vòng trong của cỡ đang chọn ở `hc`), `soft`, `radius-12`, `space-8/10`.

## Khả năng tiếp cận
- Nhóm `role="radiogroup"` có `aria-label`; mỗi lựa chọn `role="radio"` + `aria-checked`.
- Hình ly `aria-hidden`; phụ phí nằm trong nhãn đọc ("Size L, phụ phí 7k").
- Lựa chọn đang bật có viền và nền, không chỉ dựa vào màu chữ.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Ghi phụ phí cạnh L (+7k) | Giấu giá thêm tới lúc thanh toán |
| Mỗi nhóm đúng một lựa chọn bật | Để cả hai `aria-checked="false"` |

## Nguồn
`.mcup`, `.mcup.L` (css/style.css dòng 362–363), `.bigsz`, `.bigsz.on`, `.bigsz .mcup` (dòng 245–248), `.chip.ic2 .mcup` (dòng 206); `sizeIc()` trong js/game.js; lấy ly M/L ở quầy (`data-a="size:M|L"`).
- `.bigsz` không còn được game gọi trong JS; DS dựng nhóm chọn từ phần CSS còn lại.
- Phụ phí 7k theo yêu cầu của DS (giá L của game cấu hình theo `S.sell.L`).
- `.chip.ic2 .mcup` (ly trong chip, `currentColor` .75) trùng kiểu với `tt-cupsize__cup`.