/* css/empire.css — "Chiến Tranh Đế Chế" (#/empire).
 *
 * MỌI bộ chọn bắt đầu bằng `.emp-root`, không ngoại lệ. Cùng luật mà Lò Rèn (`.fg-root`) và
 * My Gang đặt ra, và vì cùng lý do: sáu game dùng chung một trang, nên một bộ chọn trần ở
 * đây là một luật rơi vào năm game kia. Dùng thang biến chung của ispeak.css.
 *
 * CHƯA CÓ TRANH NỀN (E3). Bản đồ là màu phẳng trên canvas — một trạng thái hợp lệ, không
 * phải bản tạm: E3 chỉ thêm một `drawImage` phía dưới lưới.
 *
 * ⚠ KHÔNG đặt `touch-action` lên `.emp-stage` hay `.emp-canvas`. Bài học My Room 3D: nó lan
 * ra ngoài và giết cuộn cả trang trên điện thoại.
 */
.emp-root { display: block; }

.emp-root .emp-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.emp-root .emp-head h1 { margin: 0; font-size: var(--fs-xl, 22px); }

.emp-root .emp-bar { display: flex; gap: 10px; flex-wrap: wrap; }
.emp-root .emp-res { background: var(--surface-2, #f1f4f8); border-radius: var(--r-pill, 999px);
  padding: 4px 12px; font-size: var(--fs-sm, 13px); white-space: nowrap; }
.emp-root .emp-res b { font-variant-numeric: tabular-nums; }

/* Một cột trên điện thoại, hai cột khi đủ rộng. Bản đồ luôn đứng TRƯỚC — nó là thứ người
 * chơi mở game để nhìn. */
.emp-root .emp-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.emp-root .emp-stage { min-width: 0; }
.emp-root .emp-canvas { display: block; width: 100%; height: auto;
  background: var(--surface-2, #eef2f6); border-radius: var(--r-md, 12px); cursor: pointer; }

.emp-root .emp-hexbox { margin-top: 10px; }
.emp-root .emp-hexcard { background: var(--surface, #fff); border: 1px solid var(--line, #dde3ea);
  border-radius: var(--r-md, 12px); padding: 12px; }
.emp-root .emp-hexcard header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.emp-root .emp-key { font-size: var(--fs-xs, 11px); color: var(--dimmed, #7a8794);
  font-variant-numeric: tabular-nums; }

.emp-root .emp-hint, .emp-root .emp-sub, .emp-root .emp-note, .emp-root .emp-gloss {
  color: var(--dimmed, #7a8794); font-size: var(--fs-sm, 13px); margin: 6px 0 0; }
.emp-root .emp-warn { color: var(--warn, #b4532a); font-size: var(--fs-sm, 13px); margin: 6px 0 0; }

.emp-root .emp-side > section { margin-bottom: 18px; }
.emp-root .emp-side h2 { font-size: var(--fs-md, 16px); margin: 0 0 8px; }

.emp-root .emp-tiers { display: flex; gap: 8px; flex-wrap: wrap; }
.emp-root .emp-tier { flex: 1 1 30%; display: flex; flex-direction: column; align-items: flex-start; }
.emp-root .emp-tier small { color: var(--dimmed, #7a8794); font-weight: 400; }

.emp-root .emp-phrase { font-size: var(--fs-lg, 19px); font-weight: 700; margin: 4px 0 0; }
.emp-root .emp-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ĐỘI HÌNH: một hàng một suất, emoji trái — số sức mạnh phải. Không dùng grid nhiều cột ở
 * đây dù thẻ nâng cấp có: một suất chỉ có ba mẩu chữ ngắn, xếp hai cột là mắt phải nhảy
 * qua lại để đọc một đội năm người. */
.emp-root .emp-slots { list-style: none; margin: 0 0 4px; padding: 0; }
.emp-root .emp-rowname { font-size: var(--fs-sm, 13px); color: var(--dimmed, #7a8794);
  font-weight: 700; margin: 10px 0 4px; text-transform: uppercase; letter-spacing: .04em; }
.emp-root .emp-slot { display: grid; grid-template-columns: auto 1fr auto; gap: 10px;
  align-items: center; background: var(--surface, #fff);
  border: 1px solid var(--line, #dde3ea); border-radius: var(--r-md, 12px);
  padding: 8px 10px; margin-bottom: 6px; }
.emp-root .emp-slot-em { display: grid; place-items: end center; width: 42px; height: 44px;
  overflow: hidden; border-radius: var(--r-sm, 8px);
  background: color-mix(in srgb, var(--emp-r, #dde3ea) 22%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--emp-r, #dde3ea); }
.emp-root .emp-slot-em .emp-por { margin-bottom: -2px; }
.emp-root .emp-slot-body { display: flex; flex-direction: column; min-width: 0; }
.emp-root .emp-slot-body b { font-size: var(--fs-sm, 13px); }
.emp-root .emp-slot-body small { color: var(--dimmed, #7a8794); font-size: 12px; }
.emp-root .emp-slot-pw { font-size: var(--fs-sm, 13px); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--dimmed, #7a8794); }

/* ---- THẺ BÀI ---------------------------------------------------------------------------
 * Một game sưu tập được đọc bằng cách LƯỚT, không bằng cách đọc. Nên bậc hiếm nói ba lần
 * cùng lúc — viền, dải tên, chữ — chứ không chỉ một màu: ở cỡ 13px một sắc độ đơn lẻ là thứ
 * người mù màu không phân biệt được, và cũng là thứ mắt thường bỏ qua khi lướt nhanh.
 * Biến `--emp-r` do lớp .emp-r-* đặt, và MỌI thứ trong thẻ ăn theo nó — thêm bậc thứ sáu là
 * thêm đúng một luật màu. */
.emp-root .emp-r-common    { --emp-r: #a8a095; }
.emp-root .emp-r-rare      { --emp-r: #8fd0e6; }
.emp-root .emp-r-epic      { --emp-r: #c4a6e0; }
.emp-root .emp-r-legendary { --emp-r: #ffcf4d; }
.emp-root .emp-r-mythic    { --emp-r: #e0655f; }
.emp-root .emp-r-celestial { --emp-r: #7ee0c4; }
.emp-root .emp-r-divine    { --emp-r: #fff0b0; }

.emp-root .emp-card { position: relative; background: var(--surface, #fff);
  border: 2px solid var(--emp-r, #dde3ea); border-radius: var(--r-md, 12px);
  padding: 8px 10px 12px; overflow: hidden; }
/* Vệt sáng theo màu bậc, đủ nhạt để chữ trên nền vẫn đạt tương phản. */
.emp-root .emp-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 92px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--emp-r) 34%, transparent), transparent); }
.emp-root .emp-card > * { position: relative; }
.emp-root .emp-card-head { display: flex; justify-content: space-between; align-items: center;
  gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.emp-root .emp-card-rar { color: var(--ink, #1d2530); background: var(--emp-r);
  border-radius: var(--r-pill, 999px); padding: 2px 8px; }
.emp-root .emp-card-lv { color: var(--dimmed, #7a8794); }
.emp-root .emp-card-art { display: flex; align-items: flex-end; justify-content: center;
  height: 100px; margin: 2px 0 4px; }
.emp-root .emp-card-name { text-align: center; font-weight: 700; font-size: var(--fs-md, 15px); }
.emp-root .emp-pips { display: flex; gap: 4px; justify-content: center; margin: 6px 0; }
.emp-root .emp-pip { width: 9px; height: 9px; transform: rotate(45deg);
  border: 1.5px solid var(--emp-r); border-radius: 2px; }
.emp-root .emp-pip-on { background: var(--emp-r); }
.emp-root .emp-card-stats { list-style: none; margin: 0 auto; padding: 0; display: grid;
  grid-template-columns: 1fr 1fr; gap: 2px 14px; max-width: 240px;
  font-size: var(--fs-sm, 13px); font-variant-numeric: tabular-nums; }
.emp-root .emp-card-stats li { display: flex; justify-content: space-between; }
.emp-root .emp-card-stats span { color: var(--dimmed, #7a8794); }
.emp-root .emp-card .emp-sub { text-align: center; margin: 8px 0 0; }
.emp-root .emp-card .btn { margin-top: 8px; width: 100%; }

/* QUAN HỆ: một dòng một cặp, emoji của hai con đứng đầu. Đọc bằng cách LƯỚT — hai emoji nói
 * "ai với ai" nhanh hơn hai cái tên, và tên đứng sau để trả lời câu hỏi thứ hai. */
.emp-root .emp-bonds { list-style: none; margin: 0 0 4px; padding: 0; }
.emp-root .emp-bond { display: flex; gap: 8px; align-items: center; padding: 5px 8px;
  margin-bottom: 4px; border-radius: var(--r-sm, 8px); font-size: var(--fs-sm, 13px);
  background: color-mix(in srgb, var(--ok, #2f7d4f) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok, #2f7d4f) 34%, transparent); }

/* Chân dung: một khung cắt ra từ chính tấm atlas mà trận dùng. `image-rendering` để mặc
 * định — art là vector đã bake, làm sắc bằng pixelated chỉ tạo răng cưa. */
.emp-root .emp-por { display: block; background-repeat: no-repeat; }
.emp-root .emp-por-em { display: grid; place-items: center; line-height: 1; }

.emp-root .emp-units { display: grid; grid-template-columns: 1fr; gap: 10px; }
.emp-root .emp-unit { background: var(--surface, #fff); border: 1px solid var(--line, #dde3ea);
  border-radius: var(--r-md, 12px); padding: 12px; }
.emp-root .emp-unit header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.emp-root .emp-lv { font-size: var(--fs-sm, 13px); color: var(--dimmed, #7a8794); }
.emp-root .emp-unit .btn { margin-top: 10px; width: 100%; }
.emp-root .emp-cost { margin-left: 6px; opacity: .85; font-variant-numeric: tabular-nums; }

/* CỬA ĐỘT PHÁ phải trông KHÁC một bước thường — nếu không người chơi tưởng mình thiếu Uy
 * Danh trong khi thứ thiếu là Mảnh Gia Huy, kiếm ở một chỗ hoàn toàn khác. */
.emp-root .emp-unit-gate { border-color: var(--accent, #f0a92b); }
.emp-root .emp-gate { color: var(--accent-ink, #8a5b06); font-weight: 700;
  font-size: var(--fs-sm, 13px); margin: 8px 0 0; }
.emp-root .emp-cost-break { font-weight: 700; }

.emp-root .emp-progress ul { list-style: none; margin: 0; padding: 0; }
.emp-root .emp-prog { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px;
  align-items: center; padding: 6px 0; font-size: var(--fs-sm, 13px); }
.emp-root .emp-prog-bar { background: var(--surface-2, #eef2f6); border-radius: var(--r-pill, 999px);
  height: 8px; overflow: hidden; }
.emp-root .emp-prog-bar i { display: block; height: 100%; background: var(--ok, #2f7d4f); }
.emp-root .emp-prog-n { color: var(--dimmed, #7a8794); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.emp-root .emp-prog-done .emp-prog-name { font-weight: 700; }

.emp-root .emp-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(0, 0, 0, .45); padding: 16px; }
.emp-root .emp-result { background: var(--surface, #fff); border-radius: var(--r-lg, 16px);
  padding: 20px; max-width: 420px; width: 100%; text-align: center; }
.emp-root .emp-result h2 { margin: 0 0 8px; }
.emp-root .emp-award { margin: 12px 0 0; font-weight: 700; }
.emp-root .emp-award small { font-weight: 400; color: var(--dimmed, #7a8794); }
.emp-root .emp-result .btn { margin-top: 16px; }

/* Hai cột chỉ khi thật sự rộng. Dưới ngưỡng này bản đồ chiếm trọn bề ngang — ở 375px một
 * bản đồ 95 ô chia đôi màn hình thì không ô nào bấm trúng. */
@media (min-width: 900px) {
  .emp-root .emp-grid { grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); }
  .emp-root .emp-units { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

/* Vùng Tranh Chấp (188) — lớp đất chung cả lớp. */
.emp-root .emp-hexcard-contest { border-color: var(--dimmed, #7a8794); }
.emp-root .emp-contest ul { list-style: none; margin: 8px 0 0; padding: 0; }
.emp-root .emp-ct { display: grid; grid-template-columns: auto 1fr auto; gap: 8px;
  align-items: center; padding: 5px 0; font-size: var(--fs-sm, 13px); }
.emp-root .emp-ct-who { color: var(--dimmed, #7a8794); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.emp-root .emp-ct-mine .emp-ct-who { color: var(--ok, #2f7d4f); font-weight: 700; }
.emp-root .emp-ct-sh { font-size: var(--fs-xs, 11px); color: var(--dimmed, #7a8794);
  white-space: nowrap; }

/* MÁY QUAY của sân khấu. Nút nổi TRÊN canvas ở góc phải-dưới: góc trái-dưới là chỗ thanh máu
 * của phe mình hay chạm tới, và góc trên là chỗ số sát thương bay lên. */
/* KHÔNG CHỌN CHỮ khi kéo sân khấu. Kéo một cái là bôi xanh cả dòng chữ dưới canvas — trên
 * điện thoại còn kéo theo cả cái bong bóng Copy/Sao chép. `user-select` KHÔNG phải
 * `touch-action`: nó không đụng gì tới cuộn trang, nên lệnh cấm kia không áp vào đây. */
.emp-root .emp-stagewrap { position: relative; user-select: none; -webkit-user-select: none; }
.emp-root .emp-arena { display: block; cursor: grab; }
.emp-root .emp-arena:active { cursor: grabbing; }
.emp-root .emp-zoom { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; }
.emp-root .emp-zoom .btn { min-width: 36px; height: 36px; padding: 0; font-size: 18px;
  line-height: 1; font-weight: 700; background: rgba(255,255,255,.92);
  border: 1px solid var(--line, #dde3ea); border-radius: var(--r-sm, 8px); }
.emp-root .emp-draghint { margin: 6px 0 0; text-align: center;
  font-size: var(--fs-xs, 11px); color: var(--dimmed, #7a8794); }

/* Sân khấu trận (E10) — phát lại cuốn phim mà `simulate()` vừa dựng.
 *
 * ĐẶT CUỐI FILE có chủ ý: cùng độ cụ thể thì thứ tự nguồn quyết định, nên luật mới không
 * phải đua độ cụ thể với khối .emp-result ở trên.
 *
 * KHÔNG có `touch-action` ở đây, và đó không phải sơ ý — bài học My Room 3D: đặt nó lên
 * sân khấu thì thuộc tính lan ra ngoài và giết luôn thao tác cuộn của cả trang. Có một bài
 * kiểm canh đúng điều này trong tools/test.mjs. */
.emp-root .emp-fight { width: min(94vw, 560px); }
.emp-root .emp-fight-head { display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 8px; align-items: center; margin: 0 0 8px; color: #fff;
  font-size: var(--fs-sm, 13px); font-weight: 700; }
.emp-root .emp-fight-side { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-root .emp-fight-foe { text-align: right; }
.emp-root .emp-fight-vs { opacity: .75; }
/* Chiều cao do engine đặt theo bề ngang (tỉ lệ 0.62) — CSS chỉ khai bề ngang, nếu không
 * hai nơi cùng quyết định một con số và canvas bị kéo méo. */
.emp-root .emp-arena { display: block; width: 100%; border-radius: var(--r-lg, 16px);
  background: #eef2f7; }
.emp-root .emp-skip { display: block; margin: 10px auto 0; background: rgba(255,255,255,.92); }

/* (E12) Khoảng cách từ quân đoàn tới mặt trận của một đế chế. Hàng thứ tư trong một hàng
 * vốn đã ba cột, nên nó xuống dòng riêng và co lại — con số này là thứ ĐỌC THÊM, không
 * được đẩy tên đế chế hay thanh tiến độ ra khỏi chỗ. */
.emp-root .emp-prog-far { grid-column: 1 / -1; text-align: right; margin-top: -2px;
  font-size: var(--fs-xs, 11px); color: var(--dimmed, #7a8794); }

/* ---- Bản Phaser (P1): sân khấu là một IFRAME ------------------------------------------
 * Tỉ lệ khung DỌC 9:16 — cùng khổ thiết kế 720×1280 mà empirewar/src/main.js dùng, nên
 * Scale.FIT không phải cắt dải nào ở hai bên. `aspect-ratio` chứ không phải chiều cao cố
 * định: chiều cao cố định trên một khung co giãn là hai nơi cùng quyết định một con số.
 *
 * ⚠ VẪN KHÔNG có `touch-action` ở đây, và bây giờ lý do còn mạnh hơn: cử chỉ nằm TRONG
 * iframe, nên đặt thuộc tính ở ngoài chỉ chặn được cuộn của trang chủ chứ không giúp gì
 * cho game. Phaser tự đặt `touch-action: none` lên đúng thẻ canvas của nó — phạm vi hẹp
 * đúng chỗ cần, và đó là phạm vi được phép. */
/* ⚠ CHIEU CAO lam chu, be ngang theo sau — KHONG phai `width:100%` + `max-height`.
 * Ban dau viet the va no SAI hien nhien khi nhin: `max-height` kep chieu cao lai nhung
 * be ngang van la 100%, nen `aspect-ratio` bi bo qua va khung ra be ngang. Phaser FIT
 * khi do ve canvas 9:16 vao giua mot cai hop rong => hai dai den hai ben.
 * Do la loai loi khong mot bai kiem chu nao bat duoc. */
.emp-root .emp-frame { display: block; height: min(78vh, 720px); width: auto;
  aspect-ratio: 9 / 16; max-width: 100%; margin: 0 auto;
  border: 0; border-radius: var(--r-md, 12px); background: #14100c; }

/* ---- Bộ chọn ĐỘI HÌNH (P6) ------------------------------------------------------------
 * Ba nút cạnh nhau, nút đang chọn viền đậm. Sàn chạm 44px là bắt buộc: nó nằm ngay trên nút
 * Tấn công và bấm nhầm ở đây là đánh nhầm đội hình — đo được là tụt từ 96% xuống 20%. */
.emp-root .emp-forms { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 6px; }
.emp-root .emp-form { flex: 1 1 auto; min-height: 44px; padding: 6px 10px;
  border: 2px solid var(--line, #dde3ea); border-radius: var(--r-md, 12px);
  background: var(--surface, #fff); font-size: var(--fs-sm, 13px); cursor: pointer;
  white-space: nowrap; }
.emp-root .emp-form.is-on { border-color: var(--brand, #2f7d4f);
  background: var(--surface-2, #eef6f1); font-weight: 700; }
/* Dòng hệ số: nó là LÝ DO của cả bộ chọn, nên nó không được nhỏ tới mức không ai đọc. */
.emp-root .emp-formhint { margin: 0 0 8px; font-size: var(--fs-xs, 11px);
  color: var(--dimmed, #7a8794); }

/* ---- NỘI TẠI (P6b) ---------------------------------------------------------------------
   Luật mới đặt CUỐI file: cùng độ cụ thể thì THỨ TỰ NGUỒN quyết định, nên một quy tắc muốn
   đè lên quy tắc trên nó phải đứng sau. (Xem sổ cổng kiểm CSS.) */

/* ⭐N trên chính nút đội hình — con số này là cả cơ chế hiện ra trong một liếc mắt, nên nó
   phải ĐỌC ĐƯỢC chứ không phải một chấm trang trí. */
.emp-root .emp-form-n { margin-left: 4px; font-weight: 700;
  color: var(--accent-ink, #8a5b06); }

/* Danh sách nội tại đang bật trên ô đang chọn. Đứng dưới dòng hệ số, trên nút Tấn công. */
.emp-root .emp-trhex { list-style: none; margin: 0 0 8px; padding: 8px 10px;
  border: 1px solid var(--line, #dde3ea); border-radius: var(--r-md, 12px);
  background: var(--surface-2, #eef6f1); font-size: var(--fs-xs, 11px);
  display: grid; gap: 3px; }
.emp-root .emp-trhex-h { font-weight: 700; color: var(--ink, #1f2933); }

/* Trên thẻ bài: hai dòng, cái chưa mở thì mờ nhưng VẪN ĐỌC ĐƯỢC — nó là thứ người chơi sắp
   trả Mảnh Gia Huy để lấy, nên nó không được mờ tới mức thành trang trí. */
.emp-root .emp-traits { list-style: none; margin: 4px 0 6px; padding: 0;
  display: grid; gap: 2px; font-size: var(--fs-xs, 11px); text-align: left; }
.emp-root .emp-trait { line-height: 1.35; }
.emp-root .emp-trait.is-off { color: var(--dimmed, #7a8794); }

/* ---- CHỌN AI RA TRẬN (P6c) --------------------------------------------------------------
   Đặt CUỐI file theo luật của kho: cùng độ cụ thể thì thứ tự nguồn quyết định. */

/* Nút Đổi đội nằm ngay trong tiêu đề — đó là chỗ người chơi đang nhìn khi hỏi "đội tôi gồm
   ai", nên nó là chỗ họ sẽ tìm nút đổi. */
.emp-root .emp-squad h2 { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap; }
.emp-root .emp-squad-edit { min-height: 44px; padding: 6px 14px; font-size: var(--fs-sm, 13px); }

/* Sàn chạm 44px cho CẢ nút bỏ lẫn nút thêm: hai nút này đứng cạnh nhau trong một danh sách
   dày, và bấm nhầm là đổi mất một suất quân. */
.emp-root .emp-slot-x, .emp-root .emp-pick-add {
  min-width: 44px; min-height: 44px; padding: 0 10px; cursor: pointer;
  border: 2px solid var(--line, #dde3ea); border-radius: var(--r-md, 12px);
  background: var(--surface, #fff); font-size: var(--fs-sm, 13px); font-weight: 700; }
.emp-root .emp-slot-x { color: var(--danger-ink, #a3312a); }
.emp-root .emp-pick-add { color: var(--brand, #2f7d4f); }
.emp-root .emp-slot-x[disabled], .emp-root .emp-pick-add[disabled] {
  opacity: .45; cursor: not-allowed; }

/* Kho quân để thêm. Cùng khuôn hàng với .emp-slot để hai danh sách đọc như một. */
.emp-root .emp-picks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.emp-root .emp-pick { display: flex; align-items: center; gap: 10px; padding: 6px 8px;
  border: 1px solid var(--line, #dde3ea); border-radius: var(--r-md, 12px);
  background: var(--surface, #fff); }
/* Loài đã đủ trần VẪN HIỆN, chỉ mờ đi: một con biến mất khỏi danh sách trông như mất khoá. */
.emp-root .emp-pick.is-capped { opacity: .6; }

/* ---- P6c: BA KHUYẾT ĐIỂM ĐO ĐƯỢC SAU KHI NGỒI NHÌN ------------------------------------ */

/* (1) Hàng kho quân phải dùng ĐÚNG lưới của hàng đội, nếu không nút + đứng lệch.
   Đo được: bốn nút ✕ thẳng hàng ở x=308, còn bảy nút + rơi vào 206/212/248 — ba mép phải
   khác nhau, trong cùng một bảng, cách nhau 100px. `.emp-slot` là GRID `auto 1fr auto` nên
   cột giữa giãn; `.emp-pick` bản đầu là flex không có gì giãn. */
/* Đệm phải khớp `.emp-slot` (8px 10px) — lệch đệm thì hai cột nút lệch nhau 2px. Nhỏ, nhưng
   hai danh sách nằm ngay cạnh nhau nên mắt bắt được là "chưa thẳng" mà không nói ra được. */
.emp-root .emp-pick { display: grid; grid-template-columns: auto 1fr auto; padding: 8px 10px; }

/* (2) Chữ "Đủ 3 suất" là LỜI GIẢI THÍCH cho cái nút đang tắt, mà nó lại mờ nhất hàng:
   opacity .6 của hàng NHÂN với .45 của nút = 0.27. Đúng ngược. Mờ chân dung thôi, giữ chữ. */
.emp-root .emp-pick.is-capped { opacity: 1; background: var(--surface-2, #eef6f1); }
.emp-root .emp-pick.is-capped .emp-slot-em { opacity: .55; }
.emp-root .emp-pick-add[disabled] { opacity: 1; cursor: not-allowed;
  color: var(--dimmed, #7a8794); background: var(--surface-2, #f2f4f7); }

/* (3) Dòng phụ của kho quân chở BỘ ĐẾM SUẤT — thông tin chính của bảng chọn — mà nó đang ở
   tương phản 3.67:1, dưới ngưỡng AA 4.5:1 cho cỡ 12,5px. Đậm lên cho riêng bảng này. */
.emp-root .emp-pick small { color: #5a6673; }