/* ═══════════════════════════════════════════════════════════════════════════════
   css/o-chon.css — dáng của ô chọn kiểu 21st.dev (đi cùng js/o-chon.js)

   Số lấy từ MẪU GỐC `21st.dev/@micka_design/components/select` (đọc mã, không đoán
   qua ảnh): nút cao 36px · chữ 13px · min-width 160px · hộp tối đa cao 300px ·
   khe giữa hai mục 2px · lòng hộp 4px · mục 8px trên dưới, 8px hai bên.

   ⛔ BO GÓC 8px, KHÔNG PHẢI 20px CỦA MẪU. Boss chọn bằng nút 16/09/2026: "giữ
      hiệu ứng, bo góc vừa (8-10px)". 20px trong một bảng dày đặc trông như bong
      bóng chat, lạc hẳn với mẫu gốc Google Sheets mà app đang theo.

   ⛔ KHÔNG `text-transform: uppercase`, KHÔNG `letter-spacing`, KHÔNG
      `font-weight: 800` — ba thứ Boss đã chê năm lần là "lộ rõ ui AI".

   ⛔ MÀU LẤY QUA BIẾN CỦA APP (`--the`, `--vien`, `--chu`…), đừng gõ mã màu cứng:
      app có chế độ tối, gõ cứng là nền tối chữ tối.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* `<select>` thật vẫn phải nằm trong trang (mã cũ đọc `.value` của nó), chỉ là
   không ai nhìn thấy.
   ⛔ ĐỪNG dùng `display:none`: một số trình duyệt bỏ qua phần tử ẩn hẳn khi gửi
      biểu mẫu, và `scrollIntoView` của mã cũ sẽ trượt. Giấu bằng cách kéo khỏi
      dòng chảy nhưng vẫn "có mặt". */
.ocm-an {
  position: absolute !important;
  /* ⛔ PHẢI CÓ `!important` — hỏi CSSOM 16/09/2026: luật này (0,1,0) THUA
     `.o select` (0,1,1) về `width` và thua `.sheet-moi tbody tr.sheet-hang td >
     select` (0,2,3) về `height`/`min-height`. Ô gốc đo ra **72×24px** chứ không
     phải 1×1px — nó chỉ không lộ ra nhờ `clip-path`, tức chỉ còn MỘT lớp giữ.
     Đây là luật GIẤU kỹ thuật, không phải bề rộng người dùng kéo tay, nên
     `!important` ở đây không giết tính năng nào. */
  width: 1px !important; height: 1px !important;
  min-height: 0 !important; max-height: none !important;
  padding: 0 !important; margin: -1px;
  overflow: hidden; clip-path: inset(50%); border: 0;
  pointer-events: none; opacity: 0 !important;
}

.ocm-nut {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  min-width: 0; width: 100%; min-height: 32px; padding: 6px 10px;
  font: inherit; font-size: 13px; line-height: 1.35; text-align: left;
  color: var(--chu); background: var(--the);
  border: 1px solid var(--vien); border-radius: 8px;
  cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.ocm-nut:hover:not(:disabled) { border-color: var(--vien-ro); }
.ocm-nut:disabled { cursor: default; opacity: .6; }
.ocm-nut.ocm-mo { border-color: var(--xanh); }
.ocm-nut.ocm-rong .ocm-chu { color: var(--chu-mo); }
/* Chữ dài phải cụt gọn chứ không được đẩy mũi tên ra khỏi ô — ô nằm trong cột
   hẹp, `min-width: 0` là thứ cho phép flex bóp lại. */
.ocm-chu { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 29/09/2026 — Boss: câu lựa chọn dài thì XUỐNG DÒNG, không cụt «…» (ảnh Boss: mục E Bài kiểm tra
   định kì mất nửa câu). Chỉ khung nào gắn lớp `ocm-xd` (Bài kiểm tra định kì · Progress test · hộp soạn
   Mẫu nhận xét — Boss chọn 3 chỗ); lưới Điểm danh giữ một dòng. Câu ngắn vừa ô thì vẫn một dòng. */
.ocm-xd .ocm-nut { align-items: flex-start; }
.ocm-xd .ocm-chu, .ocm-hop.ocm-xd .ocm-muc-chu { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.ocm-xd .ocm-mui { margin-top: 2px; }
.ocm-hop.ocm-xd .ocm-muc { align-items: flex-start; }
.ocm-mui {
  flex: 0 0 auto; width: 14px; height: 14px; fill: none;
  stroke: var(--chu-mo); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .16s ease;
}
.ocm-nut.ocm-mo .ocm-mui { transform: rotate(180deg); }

/* ── Hộp danh sách ───────────────────────────────────────────────────────────
   `position: fixed` + gắn thẳng vào <body> là cú chữa cho lỗi "lựa chọn bị tiêu
   đề cột che" (Boss 16/09). Lý do đầy đủ ở khối ① trong js/o-chon.js. */
.ocm-hop {
  position: fixed; z-index: 100000;
  max-height: 300px; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px; background: var(--the);
  border: 1px solid var(--vien); border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);
  transform-origin: top center;
  transition: opacity .16s ease, transform .16s cubic-bezier(.2, .8, .3, 1);
  opacity: 1; transform: translateY(0) scaleY(1);
}
.ocm-hop.ocm-len { transform-origin: bottom center; }
/* Hai trạng thái của hiệu ứng mở/đóng — đúng nhịp mẫu gốc (mờ, trượt 4px, cao .96) */
.ocm-hop.ocm-vao, .ocm-hop.ocm-ra { opacity: 0; transform: translateY(-4px) scaleY(.96); }
.ocm-hop.ocm-len.ocm-vao, .ocm-hop.ocm-len.ocm-ra { transform: translateY(4px) scaleY(.96); }

.ocm-ds { display: flex; flex-direction: column; gap: 2px; }

.ocm-muc {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px; border-radius: 6px; font-size: 13px; line-height: 1.35;
  color: var(--chu); cursor: pointer;
  transition: background .12s ease;
}
.ocm-muc-chu { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocm-muc.ocm-tat { color: var(--chu-mo); cursor: default; }
.ocm-muc.ocm-an-loc { display: none; }
/* Mục "— Để trống —": chữ mờ và nghiêng nhẹ để mắt nhận ra ngay đây không phải một
   lựa chọn thật mà là cách xoá ô. ⛔ Không dùng màu đỏ — xoá một ô chọn là việc
   thường ngày, tô đỏ là doạ người dùng. */
.ocm-muc.ocm-muc-rong .ocm-muc-chu { color: var(--chu-mo); font-style: italic; }

/* Hai dải nền chồng nhau như mẫu: mục ĐANG CHỌN đậm hơn, mục con trỏ đang tới nhạt hơn. */
.ocm-muc.ocm-dang { background: var(--nen2); }
.ocm-muc.ocm-sang { background: var(--nen2); }
.ocm-muc.ocm-dang.ocm-sang { background: var(--xanh-nhat); }
/* Danh sách quá dài thì tắt dải sáng — Boss chốt 16/09 ("tự tắt khi danh sách quá
   dài"). Vẫn giữ dấu mục đang chọn, vì đó là thông tin chứ không phải hiệu ứng. */
.ocm-hop.ocm-khong-sang .ocm-muc.ocm-sang:not(.ocm-dang) { background: transparent; }
.ocm-hop.ocm-khong-sang .ocm-muc:hover:not(.ocm-tat) { background: var(--nen2); }

/* Dấu tích VẼ NÉT CHẠY (mẫu gốc: pathLength 0→1 trong 0,08s). `stroke-dasharray`
   để đúng chiều dài nét nên nét chạy từ đầu này sang đầu kia, không nhấp nháy. */
.ocm-tich {
  flex: 0 0 auto; width: 14px; height: 14px; fill: none;
  stroke: var(--xanh); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
}
.ocm-tich path { stroke-dasharray: 26; stroke-dashoffset: 26; }
.ocm-muc.ocm-dang .ocm-tich { opacity: 1; }
.ocm-muc.ocm-dang .ocm-tich path { animation: ocm-net .08s ease-out forwards; }
@keyframes ocm-net { to { stroke-dashoffset: 0; } }

/* Ô gõ tìm — chỉ hiện khi danh sách trên 10 mục (Boss chốt 16/09). */
.ocm-timo { padding: 2px 2px 6px; }
.ocm-tim {
  width: 100%; padding: 6px 8px; font: inherit; font-size: 13px;
  color: var(--chu); background: var(--nen); border: 1px solid var(--vien); border-radius: 6px;
}
.ocm-tim:focus { outline: none; border-color: var(--xanh); }

/* Vòng tiêu điểm — mẫu gốc dùng #6B97FF. Giữ đúng màu ấy vì nó là màu "đang chạm
   tới" của bàn phím, không phải màu thương hiệu; trộn với teal của app sẽ lẫn với
   dấu tích. */
.ocm-nut:focus-visible { outline: 2px solid #6B97FF; outline-offset: 2px; }
.ocm-muc:focus-visible  { outline: 2px solid #6B97FF; outline-offset: -2px; }

/* ── ⑧ HỘP CHỌN NGOÀI BẢNG — nút "Cơ sở: …", "Xem: …" ────────────────────────
   Cùng một bộ mặt với hộp của `<select>`, nhưng KHÔNG đụng chỗ đứng và KHÔNG đổi
   animation (lý do đầy đủ ở khối `ocmKhoacTha` trong `js/o-chon.js`).

   ⛔ TÊN LỚP `.ocm-mat` PHẢI ĐỨNG CÙNG `.dnc-tha` cho đủ nặng: luật gốc của hộp
      nằm ở `css/lop.css` với selector `.dnc-tha .dnc-tha-muc` (0,2,0). File
      này nạp SAU nên luật ngang cơ đã thắng, nhưng "thắng nhờ thứ tự" là thứ vỡ
      im lặng ngay khi có người đổi thứ tự thẻ `<link>` — nên cứ nặng hơn hẳn. */
.dnc-tha.ocm-mat {
  border-radius: 8px;                                    /* mẫu gốc: bo 8px */
  box-shadow: 0 4px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  padding: 4px;
}
.dnc-tha.ocm-mat .dnc-tha-muc {
  display: flex; align-items: center; gap: 8px;
  padding: 8px; border-radius: 6px; font-size: 13px;
}
/* Mục đang chọn: nền nhạt + DẤU TÍCH, đúng mẫu gốc.
   ⛔ Bỏ `content:"✓ "` của luật cũ, không thì hai dấu tích cùng hiện.
   ⛔ Và bỏ cả chữ xanh đậm: mẫu gốc phân biệt bằng dấu tích chứ không đổi màu chữ,
      để mắt không phải đọc hai tín hiệu cho cùng một việc. */
.dnc-tha.ocm-mat .dnc-tha-muc.chon {
  background: var(--nen2); color: var(--chu); font-weight: 400;
}
.dnc-tha.ocm-mat .dnc-tha-muc.chon::before { content: none; }
.dnc-tha.ocm-mat .dnc-tha-muc .ocm-tich { margin-left: auto; }
.dnc-tha.ocm-mat .dnc-tha-muc.chon .ocm-tich { opacity: 1; }
.dnc-tha.ocm-mat .dnc-tha-muc.chon .ocm-tich path { animation: ocm-net .08s ease-out forwards; }
/* Dải sáng đuổi chuột — cùng luật hai lớp chồng nhau như hộp `<select>`. */
.dnc-tha.ocm-mat .dnc-tha-muc.ocm-sang { background: var(--nen2); }
.dnc-tha.ocm-mat .dnc-tha-muc.chon.ocm-sang { background: var(--xanh-nhat); }
.dnc-tha.ocm-mat.ocm-khong-sang .dnc-tha-muc.ocm-sang:not(.chon) { background: transparent; }

/* Máy nào tắt hiệu ứng thì bỏ hết chuyển động, giữ nguyên chức năng. */
@media (prefers-reduced-motion: reduce) {
  .ocm-hop, .ocm-mui, .ocm-muc { transition: none; }
  .ocm-muc.ocm-dang .ocm-tich path { animation: none; stroke-dashoffset: 0; }
  .dnc-tha.ocm-mat .dnc-tha-muc.chon .ocm-tich path { animation: none; stroke-dashoffset: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ⛔ Ô LỰA CHỌN Ở LƯỚI ĐIỂM DANH BÓ SÁT CHỮ — Boss 16/09/2026
   ──────────────────────────────────────────────────────────────────────────────
   Boss báo: *"Các ô lựa chọn điểm danh đang bị rộng thừa ra khoảng trắng"*.

   ĐO THẬT 16/09 (sân 6 học sinh, cỡ chữ 110% như máy Boss):
     ô "Đủ"      → ô rộng 120px · phần chữ chiếm 76px · mũi tên 14px
     đệm hai bên 10+10 · khe chữ↔mũi tên 8  ⇒ 42px KHÔNG phải chữ
   Cột phải đủ cho mục dài nhất ("Không đi học") nên không bóp được phần chữ,
   nhưng 42px phụ kia thì bóp được: còn 6+6 đệm và khe 4 ⇒ **tiết kiệm 12px mỗi
   cột chọn**, cột hẹp lại đúng nghĩa mà chữ vẫn nguyên.

   ⛔ HẸP ĐÚNG `table.luoi` — Boss chốt "chỉ màn Điểm danh". Ô chọn dùng chung
      cả app; nới ra mọi màn là đổi bố cục chỗ chưa ai xin.
   ⛔ GIỮ `min-height` 32px: đó là đích bấm. Chuẩn Apple 44px / Google 48px đã
      chật rồi, hạ nữa là trợ giảng bấm trượt ô — mà đây là màn họ gõ cả lớp.
   ⛔ GIỮ `justify-content: space-between`: mũi tên của MỌI ô phải thẳng một hàng
      dọc. Cho mũi tên chạy theo sau chữ thì mỗi hàng một chỗ, bảng thành răng cưa.
   ══════════════════════════════════════════════════════════════════════════════ */
.luoi .ocm-nut { gap: 4px; padding: 6px; }

/* ══════════════════════════════════════════════════════════════════════════════
   ⛔ NÚT Ô CHỌN PHẢI MANG MÀU CỦA GIÁ TRỊ — Boss báo 16/09/2026: *"bạn bỏ màu đi à"*
   ──────────────────────────────────────────────────────────────────────────────
   Màu ô điểm danh vốn tô bằng `.o select.gt-tot { background: var(--o-tot) }`
   (css/lop.css:922) — selector ĐÒI ĐÚNG THẺ `select`. Nút khoác ngoài là
   `<button>` nên **chưa bao giờ** được tô.

   Trước đây Boss vẫn thấy màu là vì ô gốc đang LỘ RA (lớp `ocm-an` bị
   `el.className =` cuốn mất — chính lỗi "ô hiện hai lần"). Vá xong, ô gốc bị
   giấu hẳn ⇒ chỉ còn cái nút trắng ⇒ mất màu. Tức màu biến mất là HỆ QUẢ của cú
   vá kia, không phải tôi gỡ màu.

   ⛔ Dùng ĐÚNG bốn biến màu của app (`--o-tot/--o-nghi/--o-thieu/--o-quen`) và
      đúng cặp màu chữ đã chốt ở `css/lop.css:858–861` — `gt-thieu` nền vàng
      nên chữ phải sẫm `#3A2A00`, ba cái kia chữ trắng. Đừng tự chọn màu mới.
   ⛔ Mũi tên cũng phải đổi theo, không thì nó xám trên nền đậm, nhìn như vết bẩn.
   ⛔ Hẹp đúng `.luoi` — Boss chốt "chỉ màn Điểm danh".
   ══════════════════════════════════════════════════════════════════════════════ */
.luoi .ocm-nut.gt-tot   { background: var(--o-tot);   color: #fff;     border-color: transparent; }
.luoi .ocm-nut.gt-nghi  { background: var(--o-nghi);  color: #fff;     border-color: transparent; }
.luoi .ocm-nut.gt-thieu { background: var(--o-thieu); color: #3A2A00;  border-color: transparent; }
.luoi .ocm-nut.gt-quen  { background: var(--o-quen);  color: #fff;     border-color: transparent; }
.luoi .ocm-nut.gt-tot   .ocm-mui,
.luoi .ocm-nut.gt-nghi  .ocm-mui,
.luoi .ocm-nut.gt-quen  .ocm-mui { stroke: #fff; }
.luoi .ocm-nut.gt-thieu .ocm-mui { stroke: #3A2A00; }