  :root {
    --red: #c62828; --red-dark: #8e0000; --bg: #f5f5f5; --card: #ffffff;
    --text: #212121; --muted: #757575; --green: #2e7d32; --border: #e0e0e0;
    /* ═══ ĐỢT 3 (05/09/2026) — BẢNG CỠ CHỮ + SÀN VÙNG CHẠM ═══
       Sáu cỡ, không hơn. Trước đợt này riêng tệp `trao.html` đã có 15 cỡ khác nhau và
       `index.html` có 22 — nhiều cỡ đến mức không ai còn phân biệt được cỡ nào mang nghĩa gì.
       ⛔ Thêm cỡ thứ bảy là quay lại đúng chỗ cũ: cần cỡ khác thì sửa BẢNG, đừng khai px rời.
       Ngoại lệ được phép, đã ghi tại chỗ: biểu tượng thanh đáy (19/17px — là HÌNH, không phải chữ)
       và luật nền ô nhập (phải giữ dạng px để cổng và người canh grep được). */
    --fs-1: 11px;   /* nhãn nhỏ nhất — chip, huy hiệu, nhãn thanh đáy */
    --fs-2: 12px;   /* nhãn, dòng phụ */
    --fs-3: 13px;   /* SÀN cho mọi chữ đọc */
    --fs-4: 14px;   /* thân bài */
    --fs-5: 16px;   /* nhấn, ô nhập, nút chính */
    --fs-6: 19px;   /* tiêu đề màn */
    --cham: 44px; /* @dot3_quet_not */   /* sàn vùng chạm — mọi thứ bấm được */
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; background: var(--bg); color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; -webkit-text-size-adjust: 100%; }
  /* 18:4x 04/09 (TV nêu): thanh đỏ nay có nút ← về trang chính ở góc TRÁI, nên chừa 52px bên trái
     đúng như đã chừa 56px bên phải cho nút Làm mới — chữ không bao giờ chui xuống dưới nút. */
  header.topbar { position: sticky; top: 0; z-index: 20; background: var(--red); color: #fff; padding: 12px 56px 12px 52px;
    box-shadow: 0 2px 6px rgba(0,0,0,.15); position: -webkit-sticky; }
  /* Là thẻ <a> chứ không phải <button>: bấm giữ để mở tab mới được, và vẫn về được trang chính
     kể cả khi một đoạn JS nào đó hỏng. Vùng chạm đủ 44px (mốc ngón cái). */
  .gnt-ve { position: absolute; top: 50%; left: 6px; transform: translateY(-50%); width: 44px; height: 44px;
    padding: 10px; color: #fff; opacity: .85; -webkit-tap-highlight-color: transparent; display: block; }
  .gnt-ve svg { width: 100%; height: 100%; display: block; }
  header.topbar h1 { margin: 0; font-size: var(--fs-6); font-weight: 700; letter-spacing: .3px; }
  header.topbar .sub { font-size: var(--fs-2); opacity: .9; margin-top: 2px; }
  .gnt-lammoi { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 44px; height: 44px; border: 0;
    background: transparent; padding: 10px; color: #fff; opacity: .85; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .gnt-lammoi svg { width: 100%; height: 100%; display: block; }
  .gnt-lammoi.dang-quay svg { animation: gntQuay .8s linear infinite; }
  @keyframes gntQuay { to { transform: rotate(360deg); } }
  main { padding: 16px; max-width: 640px; margin: 0 auto; padding-bottom: 60px; }
  .hidden { display: none !important; }

  /* 🔤 LUẬT NỀN Ô NHẬP — ARCHITECTURE nguyên tắc 1d + 15. Dưới 16px thì iPhone TỰ PHÓNG TO
     trang khi chạm vào ô, và bảng chọn dấu tiếng Việt hiện lệch chỗ. Đây là selector thẻ trần
     nên mọi luật có class đều đè được — luật nào đè thì cũng phải ≥16px. */
  /* 🔴 GIỮ NGUYÊN DẠNG PX, đừng đổi sang var(--fs-5): cả cổng phát hành lẫn `nguoi_canh.ps1`
     đều tìm luật nền này bằng grep CHUỖI. Đổi sang biến là hai lớp canh cùng mù một lúc
     mà không lớp nào kêu. Giá trị vẫn đúng bằng --fs-5. */
  input, textarea, select { font-size: 16px; }
  .mang { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: #333; color: #fff; font-size: var(--fs-3);
    padding: 9px 14px; border-radius: 20px; z-index: 30; box-shadow: 0 2px 8px rgba(0,0,0,.3); max-width: 90vw; text-align: center; }
  .mang.xanh { background: var(--green); }

  /* ---------- Chép y index.html / SoThanhTuuUI.html (để TV so bằng mắt) ---------- */
  .login-card { background: var(--card); border-radius: 12px; padding: 24px 20px; margin-top: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08); text-align: center; }
  .login-card h2 { margin: 0 0 4px; font-size: var(--fs-6); color: var(--red); }
  .login-card p { color: var(--muted); font-size: var(--fs-4); line-height: 1.5; margin: 6px 0 0; }
  a.primary, button.primary { display: block; background: var(--red); color: #fff; border: none; border-radius: 8px; padding: 14px 20px;
    font-size: var(--fs-5); font-weight: 700; width: 100%; cursor: pointer; margin-top: 16px; font-family: inherit; text-decoration: none; text-align: center; }
  button.primary:disabled { background: #ccc; cursor: default; }
  .stt-back { display: flex; align-items: center; width: fit-content; min-height: var(--cham); background: none; border: none; color: var(--red); font-weight: 700; font-size: var(--fs-3); cursor: pointer;
    padding: 8px 0; margin-bottom: 6px; font-family: inherit; white-space: normal; max-width: 100%; }
  .stt-tieu-de { font-weight: 800; font-size: var(--fs-6); color: var(--red); margin: 0 0 4px; }
  /* Ô nhập: cỡ chữ 16px BẮT BUỘC (nguyên tắc 15), lang="vi" + tắt tự sửa (1d). Tự cao chỉ qua sttAutoGrow_ có cờ composition (1c). */
  .stt-o { width: 100%; box-sizing: border-box; font-family: inherit; font-size: var(--fs-5); line-height: 1.5;
           color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: 8px;
           padding: 10px 12px; min-height: 76px; resize: vertical; }
  .stt-o:focus { outline: none; border-color: var(--red); }
  .stt-o-nho { min-height: 56px; }
  .stt-o-dong { min-height: 0; height: 46px; resize: none; }
  .stt-o-nhan { display: block; font-size: var(--fs-3); font-weight: 700; color: var(--text); margin: 0 0 6px; line-height: 1.4; }
  .stt-field { margin: 14px 0; }
  .stt-hotro-note { font-size: var(--fs-2); color: var(--muted); }
  /* Khối "phạm vi" — chép y .stt-chi-xem của SoThanhTuuUI.html: nói trước việc này sẽ hiện ở đâu (04 §3.4) */
  .stt-chi-xem { font-size: var(--fs-2); color: #8d6e00; background: #fff8e1; border: 1px solid #f0d98c; border-radius: 8px;
                 padding: 8px 12px; margin-bottom: 12px; line-height: 1.5; }
  .stt-empty-note { text-align: center; color: var(--muted); padding: 30px 10px; font-size: var(--fs-4); }
  .stt-nhom-nhan { font-size: var(--fs-2); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
                   color: var(--muted); margin: 16px 0 7px; }
  .stt-cn-vung { background: #fafafa; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 18px 0; }
  .stt-luu-btn { width: 100%; font-family: inherit; font-size: var(--fs-4); font-weight: 800; padding: 14px 16px; margin: 4px 0 0;
                 border-radius: 10px; cursor: pointer; background: var(--red); color: #fff; border: 1px solid var(--red); }
  .stt-luu-btn[disabled] { opacity: .55; cursor: default; }
  .stt-cn-bao { font-size: var(--fs-3); margin-top: 8px; line-height: 1.45; }
  .stt-cn-bao.hong { color: var(--red-dark); }
  .stt-cn-bao.duoc { color: var(--green); }
  .stt-cong-tac-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; }
  .stt-cong-tac { font-family: inherit; font-size: var(--fs-3); font-weight: 700; padding: 12px 16px; border-radius: 10px; cursor: pointer;
                  background: #fafafa; color: var(--text); border: 1px solid var(--border); margin: 0; }
  .stt-cong-tac.bat { background: #fff8e1; color: #8d6e00; border: 1.5px solid #f0b400; }
  .stt-cong-tac[disabled] { opacity: .5; cursor: default; }
  .stt-cong-tac-loi { font-size: var(--fs-2); color: var(--red-dark); margin: 4px 0 8px; line-height: 1.45; }
  .stt-card { background: var(--card); border-radius: 12px; margin-bottom: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.08); border: 1px solid var(--border); overflow: hidden; cursor: pointer; }
  .stt-card-title { font-weight: 700; font-size: var(--fs-4); }
  .stt-card-sub { font-size: var(--fs-2); color: var(--muted); margin-top: 3px; }
  /* Khối ảnh: chép y 2d-5 (index.html) */
  .stt-cc-moc { font-size: var(--fs-2); font-weight: 700; color: var(--muted); margin: 12px 0 6px; }
  .stt-cc-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 7px; }
  #trCcNhap { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .stt-cc-o { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden;
              border: 1px solid var(--border); background: #f0f0f0; cursor: pointer; }
  .stt-cc-o img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .stt-cc-o .lui { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center;
                   justify-content: center; gap: 4px; font-size: var(--fs-6); color: var(--muted); background: #f7f7f7; }
  .stt-cc-o.hong .lui { display: flex; }
  .stt-cc-o.hong img { display: none; }
  .stt-cc-o .ten-lui { font-size: var(--fs-1); line-height: 1.2; padding: 0 4px; text-align: center;
                       word-break: break-word; max-height: 24px; overflow: hidden; }
  .stt-cc-x { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 999px;
              border: none; background: rgba(0,0,0,.62); color: #fff; font-size: var(--fs-4); line-height: 1;
              cursor: pointer; font-family: inherit; padding: 0; }
  .stt-cc-tai { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
  .stt-cc-nhan-tep { font-family: inherit; font-size: var(--fs-3); font-weight: 700; padding: 12px 16px; border-radius: 10px;
                     cursor: pointer; background: var(--card); color: var(--red); border: 1px solid var(--red); }
  .stt-cc-tien { font-size: var(--fs-2); color: var(--muted); }
  .stt-xem { position: fixed; inset: 0; z-index: 60; background: #111; display: flex; flex-direction: column; }
  .stt-xem-tren { display: flex; align-items: center; justify-content: space-between; gap: 8px;
                  padding: 10px 12px; color: #fff; font-size: var(--fs-3); flex: none; }
  .stt-xem-tren button { font-family: inherit; font-size: var(--fs-3); font-weight: 700; padding: 9px 13px; border-radius: 8px;
                         cursor: pointer; background: rgba(255,255,255,.14); color: #fff; border: none; }
  .stt-xem-than { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: pan-y; }
  .stt-xem-than img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .stt-xem-duoi { flex: none; padding: 10px 12px 16px; color: #cfcfcf; font-size: var(--fs-2); text-align: center; }

  /* ---------- Riêng Trao việc (T3) ---------- */
  .trao-homnay { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin-bottom: 12px;
    font-size: var(--fs-3); line-height: 1.45; }
  .trao-homnay .so b { color: var(--red-dark); }
  .trao-nut-trao { display: inline-flex; align-items: center; justify-content: center; min-height: var(--cham);
    font-family: inherit; font-size: var(--fs-3); font-weight: 800; padding: 0 15px; border-radius: 10px;
    cursor: pointer; background: var(--red); color: #fff; border: 1px solid var(--red); margin: 0; white-space: nowrap; }
  .trao-tabs { display: flex; border-bottom: 1px solid var(--border); margin: 4px 0 12px; }
  .trao-tab { flex: 1; min-height: var(--cham); font-family: inherit; font-size: var(--fs-3); font-weight: 700;
    color: var(--muted); background: none;
    border: none; border-bottom: 3px solid transparent; padding: 4px 4px 3px; cursor: pointer; margin: 0; white-space: nowrap; }
  .trao-tab.mo { color: var(--red); border-bottom-color: var(--red); }
  /* T3b: hàng lọc + sắp xếp — nút lọc vai là viên thuốc chọn được (khác chip trạng thái: có viền, cao ≥36px cho ngón tay);
     hai ô chọn là <select> gốc của điện thoại (bảng chọn tự hiện), chữ 16px để iPhone không phóng to (nguyên tắc 15). */
  .trao-loc-hang { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -4px 0 12px; }
  .trao-loc-vai { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 100%; }   /* hàng 1: ba nút vai; hàng 2: hai ô chọn chia đôi */
  .trao-loc-nut { font-family: inherit; font-size: var(--fs-3); font-weight: 700; padding: 8px 12px; min-height: 36px; border-radius: 999px;
    cursor: pointer; background: var(--card); color: var(--text); border: 1px solid var(--border); margin: 0; }
  .trao-loc-nut.chon { background: #fff5f5; color: var(--red-dark); border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
  .trao-loc-chon { font-family: inherit; font-size: var(--fs-5); min-height: 36px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--card); color: var(--text); max-width: 100%; flex: 1 1 0; min-width: 0; }
  .trao-loc-chon.dang { color: var(--red-dark); border-color: var(--red); background: #fff5f5; font-weight: 700; }
  .trao-loc-trong { text-align: center; color: var(--muted); padding: 24px 10px; font-size: var(--fs-4); line-height: 1.5; }
  /* Thẻ việc: khuôn .stt-card + khối ruột tự mang khoảng hở 14px 16px (nguyên tắc 23) */
  .trao-the-than { padding: 14px 16px; }
  .trao-the .stt-card-title { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
  .trao-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .trao-chip { font-size: var(--fs-2); font-weight: 700; padding: 4px 9px; border-radius: 20px; white-space: nowrap; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; background: #eeeeee; color: var(--muted); }
  .trao-chip.xanh { background: #e8f5e9; color: var(--green); }
  .trao-chip.vang { background: #fff8e1; color: #8d6e00; }
  .trao-chip.do   { background: #fff5f5; color: var(--red-dark); }
  .trao-chip.moi  { background: #e3f2fd; color: #1565c0; }
  .trao-chip.cam  { background: #fff3e0; color: #e65100; }
  .trao-trang-thai { font-size: var(--fs-4); font-weight: 700; margin-top: 10px; line-height: 1.45; overflow-wrap: anywhere; }
  .trao-nd { font-size: var(--fs-4); line-height: 1.55; margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
  .trao-nd.gap { max-height: calc(1.55em * 6); overflow: hidden; }
  .trao-xem-them { display: block; background: none; border: none; color: var(--red); font-weight: 700; font-size: var(--fs-3);
    cursor: pointer; padding: 6px 0 0; font-family: inherit; }
  .trao-nut-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
  .trao-nut-row button { margin: 0; }
  .trao-dai-xanh { background: #e8f5e9; border: 1px solid #c8e6c9; border-radius: 10px; padding: 12px 16px; color: var(--green);
    font-weight: 700; font-size: var(--fs-4); margin: 0 0 12px; line-height: 1.45; }
  .trao-loi-ds { text-align: center; color: var(--muted); padding: 24px 10px 10px; font-size: var(--fs-4); line-height: 1.5; }
  /* Người nhận: nút tròn chữ cái đầu + tên, chọn đúng một */
  .trao-loc { margin-bottom: 8px; }
  /* Lưới 2 cột ở 320px, 3 cột ở 414px: 12 người = 4–6 hàng thay vì 12 hàng (một nút một hàng là cuộn 700px mới tới ô tiêu đề).
     Tên GỌI in đậm, họ đệm nhỏ bên dưới — người trong cửa hàng nhận nhau bằng tên gọi. */
  .trao-nguoi-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
  .trao-nguoi { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1px solid var(--border);
    border-radius: 999px; background: var(--card); font-family: inherit; font-size: var(--fs-4); color: var(--text); cursor: pointer;
    margin: 0; min-width: 0; text-align: left; min-height: 44px; }
  .trao-nguoi .vong { width: 28px; height: 28px; border-radius: 50%; background: #fce4e4; color: var(--red-dark); font-weight: 800;
    display: flex; align-items: center; justify-content: center; font-size: var(--fs-3); flex: none; }
  .trao-nguoi .ten { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
  .trao-nguoi .ten b { font-size: var(--fs-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .trao-nguoi .ten small { font-size: var(--fs-1); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .trao-nguoi.chon .ten small { color: var(--red-dark); opacity: .8; }
  .trao-nguoi.chon { border-color: var(--red); background: #fff5f5; color: var(--red-dark); box-shadow: inset 0 0 0 1px var(--red); }
  .trao-nguoi.chon .vong { background: var(--red); color: #fff; }
  .trao-han-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .trao-han-row button { margin: 0; }
  .trao-han-chon { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
  .trao-han-chon input { font-family: inherit; font-size: var(--fs-5); padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--card); color: var(--text); min-height: 44px; }
  .trao-dem { font-size: var(--fs-2); color: var(--muted); text-align: right; margin-top: 4px; }

  /* ---------- T4: chi tiết + luồng ---------- */
  /* Hàng nút theo vai: chỉ nút HỢP LỆ với trạng thái hiện tại mới có mặt (04 §8 — nút sai vai là nút không tồn tại). */
  .trao-nut-vai { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
  .trao-nut-vai button { margin: 0; font-family: inherit; font-size: var(--fs-4); font-weight: 700; padding: 12px 16px; min-height: 44px;
    border-radius: 10px; cursor: pointer; background: var(--card); color: var(--red); border: 1.5px solid var(--red); }
  .trao-nut-vai button.chinh { background: var(--red); color: #fff; }
  .trao-nut-vai button.nhe { color: var(--text); border-color: var(--border); background: #fafafa; font-weight: 700; }
  .trao-nut-vai button[disabled] { opacity: .55; cursor: default; }
  /* Chip nhanh (đã xem / cần chỉnh) CỐ Ý nhỏ hơn nút hành động: khác cỡ = khác loại, không đọc thành một hàng 4 nút ngang nhau */
  .trao-nut-vai button.chip { font-size: var(--fs-2); font-weight: 700; padding: 8px 12px; min-height: 38px; border-radius: 999px;
    background: #fafafa; color: var(--text); border: 1px solid var(--border); }
  /* Nhóm phụ = hành động đóng việc: tách hẳn bằng một đường kẻ, chữ nhỏ, xám — không nằm sát nút chính (dễ bấm nhầm trên điện thoại) */
  .trao-nut-phu { margin: 2px 0 14px; padding-top: 10px; border-top: 1px dashed var(--border); }
  .trao-nut-phu:empty { border-top: none; padding-top: 0; margin: 0; }
  .trao-nut-phu button { font-family: inherit; font-size: var(--fs-2); font-weight: 700; padding: 9px 13px; min-height: 38px; border-radius: 8px;
    cursor: pointer; background: none; color: var(--muted); border: 1px solid var(--border); margin: 0; }
  .trao-nut-phu button.hoi { color: var(--red-dark); border-color: #f3c9c9; background: #fff5f5; }
  /* Hộp mở TẠI CHỖ thay cho confirm() (nguyên tắc 21) — tự mang khoảng hở 14px 16px (nguyên tắc 23) */
  .trao-hop { background: #fafafa; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 0 0 12px; }
  .trao-hop-tieu { font-size: var(--fs-3); font-weight: 700; color: var(--text); margin: 0 0 8px; line-height: 1.4; }
  .trao-hop-nut { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
  .trao-hop-nut button { margin: 0; font-family: inherit; font-size: var(--fs-4); font-weight: 700; padding: 11px 16px; min-height: 42px;
    border-radius: 8px; cursor: pointer; }
  .trao-hop-gui { background: var(--red); color: #fff; border: 1px solid var(--red); }
  .trao-hop-thoi { background: var(--card); color: var(--text); border: 1px solid var(--border); }
  .trao-chon-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
  .trao-chon-row button { margin: 0; font-family: inherit; font-size: var(--fs-3); font-weight: 700; padding: 10px 14px; min-height: 40px;
    border-radius: 999px; cursor: pointer; background: var(--card); color: var(--text); border: 1px solid var(--border); }
  .trao-chon-row button.chon { background: #fff5f5; color: var(--red-dark); border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
  /* Luồng: cũ trên, mới dưới */
  .trao-luong { margin: 6px 0 10px; display: flex; flex-direction: column; gap: 10px; }
  .trao-luong-tieu { font-size: var(--fs-2); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; }
  /* ===== V8 "Thẻ nổi mềm" (TV chốt 04/09/2026) — khoảng cách giữa các dòng do `gap` của
     .trao-luong lo, KHÔNG dùng margin-bottom nữa (dùng cả hai thì hở gấp đôi). ===== */
  /* Thẻ sự kiện: không viền, chỉ bóng rất nhẹ. Mắt bắt HÀNG NHÃN trước rồi mới đọc câu. */
  .trao-the { background: #fff; border-radius: 16px; padding: 12px 15px;
    box-shadow: 0 1px 2px rgba(40,50,70,.05), 0 8px 20px rgba(40,50,70,.06); }
  .trao-the-h { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
  .trao-the-ch { width: 22px; height: 22px; border-radius: 7px; background: var(--sk-n); flex: none; position: relative; }
  .trao-the-ch:after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--sk-c); }
  /* Nhãn có thể dài ("KHÔNG LÀM TIẾP") — cho phép xuống dòng gọn thay vì đẩy giờ ra khỏi thẻ. */
  .trao-the-lb { font-size: var(--fs-1); font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: var(--sk-c); min-width: 0; overflow-wrap: anywhere; }
  .trao-the-gio { font-size: var(--fs-1); color: #a9b0b9; margin-left: auto; flex: none; }
  .trao-the-n { font-size: var(--fs-4); line-height: 1.42; color: #2b3038; font-weight: 600; overflow-wrap: anywhere; }
  .trao-the-p { font-size: var(--fs-2); color: #7b828c; margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
  /* 6 nhóm màu — bốn nhóm đầu trùng đúng 4 màu nhãn bảng tin Tiến Độ của app, không bịa thêm hệ màu mới. */
  .sk-ok   { --sk-c: #2e7d32; --sk-n: #eaf5eb; }
  .sk-chuy { --sk-c: #e8730c; --sk-n: #fdf0e3; }
  .sk-chay { --sk-c: #1565c0; --sk-n: #e8f1fb; }
  .sk-xong { --sk-c: #6a1b9a; --sk-n: #f3eaf8; }
  /* Dừng lại: NÂU ĐẤT — TV chốt 21:1x 04/09. Cố ý KHÔNG đỏ: từ chối một việc là chuyện bình
     thường trong công việc, không phải lỗi của ai; đỏ đọc ra thành "có gì đó sai". */
  .sk-dung { --sk-c: #8d6e63; --sk-n: #f2ece9; }
  .sk-tep  { --sk-c: #b8860b; --sk-n: #fdf6e3; }   /* vàng kem — TV đổi từ xám ("xám rất u tối") */
  /* Tin nhắn người: vẫn là bong bóng, để phân biệt với thẻ sự kiện của hệ thống. */
  .trao-dong.toi { display: flex; justify-content: flex-end; }
  .trao-tin { max-width: 76%; background: #fff; border: 1px solid #e6eaef; border-radius: 18px; padding: 11px 15px; }
  .trao-dong.toi .trao-tin { background: linear-gradient(135deg,#d84a4a,#b62b2b); border: 0;
    border-radius: 18px 18px 5px 18px; box-shadow: 0 6px 16px rgba(182,43,43,.22); }
  .trao-tin-ai { font-size: var(--fs-1); font-weight: 700; color: #8d949e; margin-bottom: 2px; }
  .trao-dong.toi .trao-tin-ai { color: #ffd6d6; }
  .trao-tin-nd { font-size: var(--fs-4); line-height: 1.45; color: #2b3038; white-space: pre-wrap; overflow-wrap: anywhere; }
  .trao-dong.toi .trao-tin-nd { color: #fff; }
  /* @thu_hoi_tin_0609 — chỉ tin chữ có cử chỉ; giữ pan/pinch mặc định. */
  .trao-tin[data-tin-id] { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; touch-action:auto; cursor:context-menu; }
  .trao-tin[data-tin-id]:focus-visible { outline:2px solid #8d6e63; outline-offset:3px; }
  .trao-dong .trao-tin.thu-hoi, .trao-dong.toi .trao-tin.thu-hoi { background:#f3f1ee; border:1px solid #e6e1da; box-shadow:none; }
  .trao-tin.thu-hoi .trao-tin-ai, .trao-dong.toi .trao-tin.thu-hoi .trao-dong-gio { color:#858079; }
  .trao-dong .trao-tin .trao-tin-thu-hoi { font-size:14px; line-height:1.45; font-style:italic; color:#77716a; overflow-wrap:anywhere; }
  .ct-tin-menu { position:fixed; z-index:210; width:250px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow-y:auto; padding:6px; border:1px solid #dfd9d0; border-radius:14px; background:#fff; box-shadow:0 5px 22px rgba(0,0,0,.2); }
  .ct-tin-menu button { display:block; width:100%; min-height:44px; margin:0; padding:10px 12px; text-align:left; border:0; border-radius:8px; background:#fff; font:inherit; font-size:16px; color:#292522; }
  .ct-tin-menu button:hover, .ct-tin-menu button:focus-visible { background:#f4f0e9; }
  .ct-tin-menu button:disabled { color:#8b8580; }
  #ctTinThuHoi { color:var(--red); }
  #ctTinMenu.ct-tin-confirm { width:min(420px,calc(100vw - 24px)); padding:18px; border:1px solid #cda85e; background:#fff8e5; }
  #ctTinMenu #ctTinXacNhanNoiDung { font-size:16px; line-height:1.5; margin:0 0 16px; color:#292522; overflow-wrap:anywhere; }
  #ctTinMenu.ct-tin-confirm #ctTinThuHoi { border:2px solid #b52228; color:#b52228; padding:10px 16px; }
  #ctTinMenu.ct-tin-confirm #ctTinDongNut { position:static; width:auto; height:auto; min-width:44px; min-height:44px; padding:10px 16px; border:1px solid #d8d8d8; overflow:visible; clip-path:none; }
  #ctTinMenu.ct-tin-confirm #ctTinThuHoi:disabled { opacity:.6; }
  #ctTinMenu [hidden] { display:none!important; }

  #ctTinMenuBao { font-size:13px; line-height:1.45; padding:4px 12px; color:#77716a; overflow-wrap:anywhere; }
  #ctTinChepO { width:100%; min-height:90px; font:inherit; font-size:16px; -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
  .trao-he-thong { text-align: center; font-size: var(--fs-2); color: #8d949e; line-height: 1.5; padding: 2px 8px; overflow-wrap: anywhere; }
  .trao-dong-gio { font-size: var(--fs-1); color: #a9b0b9; margin-top: 3px; }
  .trao-dong.toi .trao-dong-gio { color: #ffcaca; text-align: right; }
  .trao-xem-truoc { display: block; width: 100%; background: none; border: 1px dashed var(--border); color: var(--red); font-weight: 700;
    font-size: var(--fs-3); cursor: pointer; padding: 10px; border-radius: 8px; font-family: inherit; margin-bottom: 10px; }
  /* Ô soạn dính đáy — nút Gửi KHÔNG bao giờ đổi chiều cao ô khi đang gõ (nguyên tắc 1c) */
  .trao-soan { position: sticky; bottom: 0; background: var(--bg); padding: 8px 0 4px; margin-top: 6px; border-top: 1px solid var(--border); }
  /* ===== B phần 1 (04/09): THANH ĐIỀU HƯỚNG ĐÁY — nằm trọn vùng ngón cái =====
     🔴 MẶC ĐỊNH TẮT (`THANH_DAY_BAT = false`) cho tới khi `index.html` cũng có thanh này; bật một bên
     thì thanh nhấp nháy mỗi lần chuyển trang. Xem `_THIET_KE\09_vi_tri_nut_quay_lai\` §6b. */
  .thanh-day { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex;
    background: var(--card); border-top: 1px solid var(--border); box-shadow: 0 -2px 10px rgba(40,50,70,.06); }
  .thanh-day a { flex: 1; min-height: 56px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; text-decoration: none; color: var(--muted); font-size: var(--fs-3);
    font-weight: 700; -webkit-tap-highlight-color: transparent; padding: 6px 2px; }
  .thanh-day a .bi { font-size: 19px; line-height: 1; }
  .thanh-day a.dang { color: var(--red); }
  /* Máy nhỏ (iPhone SE cao 568): 56px là 9,9% chiều cao màn — rút còn 50, vùng chạm vẫn > 44. */
  @media (max-height: 600px) {
    .thanh-day a { min-height: 50px; font-size: var(--fs-3); }
    .thanh-day a .bi { font-size: 17px; }
  }
  /* Chừa chỗ cho thanh đáy, chỉ khi nó đang hiện — thân trang không bị che dòng cuối. */
  body.co-thanh-day main { padding-bottom: 76px; }
  /* Dòng báo ngắn phải nổi LÊN TRÊN thanh, không thì nó báo vào chỗ không ai thấy. */
  body.co-thanh-day .mang { bottom: 74px; }
  body.co-thanh-day .trao-soan { bottom: 56px; }
  @media (max-height: 600px) { body.co-thanh-day main { padding-bottom: 70px; } body.co-thanh-day .trao-soan { bottom: 50px; } body.co-thanh-day .mang { bottom: 68px; } }
  .trao-anh-luoi { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px; }
  .trao-anh-luoi .stt-cc-o { width:100%; height:auto; aspect-ratio:1; min-width:0; }
  .trao-anh-luoi .stt-cc-o:only-child { grid-column:1/-1; max-width:280px; }
  .trao-anh-nut { font:inherit; cursor:pointer; padding:0; touch-action:manipulation; }
  .trao-anh-thu { margin-top:8px; min-height:44px; font-size:var(--fs-1); }
  .trao-anh-bao { font-size:var(--fs-1); color:var(--muted); margin-top:8px; }
  .trao-soan .stt-cc-tai { margin:0 0 6px; }
  #ctCcNhapVung { padding:10px 0; }
  #ctCcNhap { max-height:220px; overflow-y:auto; }
  .trao-soan-hang { display: flex; gap: 10px; align-items: center; }
  .trao-soan-hang textarea { flex: 1; min-height: 46px; background: #fff; border: 1px solid #e6eaef;
    border-radius: 16px; padding: 13px 16px; box-shadow: 0 1px 2px rgba(40,50,70,.04); }
  /* Nút Gửi: nền trắng, viền hồng nhạt, icon máy bay giấy. 46×46 đạt mốc vùng chạm ngón cái.
     Màu lấy từ biến --red sẵn có, KHÔNG gõ cứng mã màu thương hiệu vào đây. */
  .trao-soan-hang button { flex: none; width: 46px; height: 46px; padding: 0; border-radius: 16px;
    background: #fff; border: 1.5px solid #edd3d3; color: var(--red); cursor: pointer;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(198,40,40,.12); margin: 0; }
  .trao-soan-hang button svg { width: 20px; height: 20px; display: block; }
  .trao-soan-hang button[disabled] { opacity: .5; cursor: default; }

  /* Dải nhắc một lần khi vào đây bằng 📌 — chép y `nhatky.html`. */
  .nk-nhac { display: flex; align-items: center; gap: 10px; background: #fff8e1; border: 1px solid #f0e0b0;
             border-radius: 12px; padding: 11px 13px; margin: 0 0 12px; font-size: var(--fs-3); line-height: 1.5; color: #6b5a20; }
  .nk-nhac-nut { flex: none; min-height: 44px; padding: 0 14px; border: 1px solid #e0cf95; background: #fff;
                 border-radius: 10px; font-size: var(--fs-3); font-weight: 700; color: #6b5a20; cursor: pointer; }

  /* @thanh_day_nhay_0609: phản hồi cả ô; không đổi kích thước/vùng chạm. */
  .thanh-day a { position: relative; -webkit-tap-highlight-color: rgba(198,40,40,.14); }
  .thanh-day a:active, .thanh-day a.td-cho { background: #fbe9e7; color: var(--red); }
  .thanh-day a:focus-visible { outline: 2px solid var(--red); outline-offset: -3px; }
  .thanh-day a.td-cho::after { content: 'Đang mở…'; position: absolute; bottom: 100%;
    left: 0; right: 0; padding: 4px 2px; background: #fbe9e7; color: var(--red);
    font-size: var(--fs-3); text-align: center; border-radius: 6px 6px 0 0; }

  /* @chu_nguoi_viet_30 — TV 06/09: chỉ nội dung nghiệp vụ +30%.
     Bảng --fs-1..6 của nhãn/nút giữ nguyên; các cỡ đọc dưới đây ánh xạ
     12/13/14/16/19px × 1.30, không nhân cỡ chữ theo phần tử cha. */
  :root {
    --chu-12: 15.6px; --chu-13: 16.9px; --chu-14: 18.2px;
    --chu-16: 20.8px; --chu-19: 24.7px;
    --chu-tranh: 21.45px; --chu-tranh-nho: 20.15px;
  }

  #tTieuDe, #tNoiDung, #ctTraoSoan, #gsTen, #gsKetQua, #gsBangChung,
  #ctHopO, #ctHopTieuDe { font-size: var(--chu-16); }
  #tTieuDe::placeholder, #tNoiDung::placeholder, #ctTraoSoan::placeholder,
  #gsTen::placeholder, #gsKetQua::placeholder, #gsBangChung::placeholder,
  #ctHopO::placeholder, #ctHopTieuDe::placeholder { font-size: var(--fs-5); }
  /* Input một dòng 46px cũ thiếu chỗ cho line-height 31.2px + đệm/viền. */
  #tTieuDe, #gsTen, #ctHopTieuDe { height: auto; min-height: 58px; }
  .stt-card-title, .trao-nd, .trao-tin-nd { font-size: var(--chu-14); overflow-wrap: anywhere; }
  #ctTraoTieuDe { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .trao-the-p.chu-ly-do { font-size: var(--chu-12); line-height: 1.5; }

.trao-doc {font-size:13px;line-height:1.5;opacity:.9;margin-top:5px;text-align:right;overflow-wrap:anywhere}
.toi .trao-doc {color:#fff}
.trao-tin.thu-hoi .trao-doc {color:#666}
.trao-moi-card {padding:14px;margin:12px 0;background:#fff;border:1px solid #ddd;border-radius:14px;font-size:14px}
.trao-moi-card p {line-height:1.5}.trao-moi-card textarea,.trao-moi-card select {width:100%;margin:8px 0}
.trao-moi-card input[type=checkbox]{width:20px;height:20px;vertical-align:middle}.trao-moi-card button{min-height:44px}
.td-ban-phim.co-thanh-day {padding-bottom:0}
.sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
/* @tq_0709: shared visual vocabulary, scoped to the new controls. */
.tq-note{font-size:13px;color:#6b6259;line-height:1.5;overflow-wrap:anywhere}
.tq-panel,.tq-roster,.tq-notice{padding:14px;margin:12px 0;border:1px solid #ded7cd;border-radius:14px;background:#fffdf8;overflow-wrap:anywhere}
.tq-panel{box-shadow:0 4px 20px #493c2610}
.tq-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tq-member{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid #e8e1d8;flex-wrap:wrap}
.tq-panel button,.tq-sao,.tq-admin button{min-height:44px;min-width:44px;border:1px solid #d5ccbd;border-radius:10px;background:#fffdf8;color:#514431;padding:8px 12px;font-family:inherit;font-size:14px;cursor:pointer}
.tq-panel button:disabled,.tq-admin button:disabled{opacity:.55;cursor:default}
.tq-panel input,.tq-admin input,.tq-admin select{box-sizing:border-box;width:100%;min-height:44px;padding:10px;border:1px solid #d5ccbd;border-radius:10px;background:white;color:#342f2a;font:inherit;font-size:16px}
.tq-panel label{display:block;margin-top:12px;font-size:14px}
.tq-sao{align-self:flex-start;flex:none;font-size:24px;background:transparent;border-color:transparent;color:#ad751b;padding:4px}
.tq-sao[aria-pressed=true]{background:#fff1c7}
.tq-roster ul{padding-left:20px;margin:8px 0}
.tq-roster span{font-size:13px;color:#6b6259}
.tq-admin{max-width:900px;margin:auto;padding-bottom:24px;color:#342f2a}
.tq-admin .tq-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.tq-admin .tq-toolbar>*{flex:1;min-width:130px}
.tq-admin .tq-card{display:block;width:100%;text-align:left;padding:14px;margin:8px 0;background:#fffdf8;border:1px solid #e1d9cc;border-radius:14px;overflow-wrap:anywhere}
.tq-admin .tq-card b{font-size:16px;line-height:1.5}
.tq-admin .tq-card p{font-size:14px;line-height:1.6;margin:6px 0;white-space:pre-wrap}
.tq-admin .tq-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.tq-admin .tq-tabs button[aria-pressed=true]{background:#534532;color:white;border-color:#534532}
.tq-admin .tq-title{font-size:19px;font-weight:700;margin:14px 0 6px}
.tq-admin .tq-check{width:22px;height:22px;min-height:22px;accent-color:#736044}
.tq-admin label.tq-row{min-height:44px}
.tq-admin .tq-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.tq-admin .tq-photos img{display:block;width:100%;height:110px;object-fit:cover;border-radius:10px}
.tq-admin pre{white-space:pre-wrap;overflow-wrap:anywhere;font-family:inherit;font-size:14px;margin:8px 0}
.tq-admin .tq-undo{position:sticky;bottom:12px;background:#fff1c7;padding:12px;border-radius:14px;box-shadow:0 4px 18px #493c2620;z-index:3}
.tq-admin .tq-bread{font-size:13px;color:#746551;overflow-wrap:anywhere}


/* TV 08/09: three filters share a fixed 70px list card. Full detail is unchanged. */
#vDanhSach .trao-the { position:relative;height:70px;min-height:70px;box-sizing:border-box;border-width:2px;padding:0;margin-bottom:8px; }
#vDanhSach .trao-the .trao-the-than { height:100%;box-sizing:border-box;min-width:0;padding:5px 58px 5px 12px;display:grid;grid-template-rows:20px 16px 18px;gap:1px; }
#vDanhSach .trao-the .stt-card-title { display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px;font-size:var(--chu-13); }
#vDanhSach .trao-the .stt-card-sub { margin:0;font-size:var(--fs-3);line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
#vDanhSach .trao-the .trao-chips { margin:0;gap:4px;flex-wrap:nowrap;align-items:center;overflow:hidden;min-height:18px;padding:0; }
#vDanhSach .trao-the .trao-chip { min-width:0;flex-shrink:1;font-size:var(--fs-3);line-height:16px;padding:1px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
#vDanhSach .trao-the .trao-chip:first-child { flex-shrink:0;max-width:55%; }
#vDanhSach .trao-the .trao-chip.moi { flex-shrink:0; }
#vDanhSach .tq-sao { position:absolute;right:6px;top:11px; }

/* YC07: fixed closed cards; expanded text keeps native selection and the original draft. */
.trao-tin.ct-tin-gon{box-sizing:border-box;width:min(100%,620px);max-width:100%;padding:0;border:1px solid #e6eaef;border-radius:12px;overflow:hidden}
.trao-tin.ct-tin-gon>summary{box-sizing:border-box;height:68px;padding:6px 10px;display:flex;flex-direction:column;gap:0;list-style:none;cursor:pointer;overflow:hidden}
.trao-tin.ct-tin-gon>summary::-webkit-details-marker{display:none}.ct-tin-dau{display:flex;align-items:center;gap:6px;min-height:20px;max-height:20px;overflow:hidden}
.ct-tin-dau .trao-tin-ai{font-size:17px;line-height:20px;min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.ct-tin-dau .trao-dong-gio{font-size:11px;line-height:16px;white-space:nowrap;margin:0;flex-shrink:0}
.ct-tin-preview{font-size:16px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ct-tin-nho{font-size:11px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-tin-day-du{padding:10px;user-select:text;-webkit-user-select:text}.ct-tin-day-du button,.ct-tra-loi button{min-height:44px;min-width:44px;font-size:16px}.ct-tin-day-du .trao-tin-nd{font-size:var(--chu-14);line-height:1.5}
.trao-dong.toi .trao-tin.ct-tin-gon{border:1px solid #b62b2b}.ct-cam-xuc{display:flex;gap:2px;flex-wrap:wrap}.ct-cam-xuc button{min-width:44px;padding:6px;flex:1}.ct-cam-xuc button[aria-pressed="true"]{background:#ffe5ac}
.ct-tra-loi{display:flex;gap:8px;align-items:center;padding:8px;background:#fff8e8;border-left:3px solid #c88b22}.ct-tra-loi span{flex:1;font-size:14px;overflow-wrap:anywhere}.ct-quote{display:block;width:100%;text-align:left;white-space:normal;overflow-wrap:anywhere;background:#fff2;border:1px solid currentColor;border-radius:6px;color:inherit;margin-bottom:8px}

/* Approved cream work overview, keeps existing 70px work cards and their actions. */
body:has(#manViec:not(.hidden)){background:#f8f4e9}
#manViec .trao-homnay{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border-radius:16px;margin:0 0 14px;background:#fff;border:1px solid #e0ddd4}
#manViec .trao-summary{min-width:0;font-size:14px}
#manViec #vHomNay{font-size:13px;line-height:1.45;color:#716f69}
#manViec .trao-nut-trao{flex:none;min-height:44px;padding:10px 14px;margin:0;font-size:14px;border-radius:12px}
#manViec .trao-tabs{display:flex;gap:3px;background:#ebe7dc;border:0;border-radius:14px;padding:3px;margin-bottom:10px}
#manViec .trao-tab{flex:1;min-height:44px;border:0;border-radius:11px;font-size:13px;padding:8px 2px;color:#655f52}
#manViec .trao-tab.mo{background:#fff;color:#302c25;box-shadow:0 1px 3px #52462d15}
#manViec .trao-loc-hang{gap:6px;flex-wrap:nowrap;margin:0 0 16px}
#manViec .trao-loc-vai{flex:1 1 auto;flex-wrap:nowrap;gap:5px}
#manViec .trao-loc-nut{font-size:12px;padding:5px 9px;min-height:44px;white-space:nowrap}
#manViec .trao-loc-nut.chon{background:#49432b;color:white;box-shadow:none;border-color:#49432b}
#vBoLoc{width:calc(100% - 32px);max-width:420px;border:1px solid #dfd9cd;border-radius:20px;background:#fffdf8;padding:20px;color:#302c25}
#vBoLoc::backdrop{background:#28271e66}
#vBoLoc select{display:block;width:100%;font-size:16px;min-height:44px;margin:8px 0 18px}
.trao-filter-actions{display:flex;justify-content:flex-end;gap:10px}
.trao-filter-actions button{min-height:44px;border-radius:10px;padding:10px 16px}
.trao-empty{padding:32px 12px;text-align:center}
.trao-empty>span{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#eeeadd;color:#9c9686;margin:0 auto 14px;font-size:30px}
.trao-empty strong{display:block;font-size:16px;color:#39352d}
.trao-empty p{font-size:14px;line-height:1.5;color:#7a756c}
@media(max-width:359px){#manViec .trao-loc-nut{font-size:11px;padding-inline:6px}#manViec .trao-loc-vai{gap:3px}}

#manViec{min-height:calc(100dvh - 140px)}#manViec .trao-homnay{flex-wrap:nowrap}#manViec .trao-summary{flex:1 1 0}#manViec .trao-summary strong{font-size:14px}#manViec .trao-homnay #vHomNay{font-size:12px}

/* YC06 — nút menu thao tác trong cột nút ô soạn, đặt TRÊN nút ảnh. */
.ct-ui-menu-btn{position:relative}
.ct-ui-menu-btn .ct-ui-menu-cham{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:#c62828;border:1.5px solid #fff}
/* Tấm KHÔNG chặn trang: chỉ phủ trong #ctUiSurface, để các bảng khác của luồng
   (bảng thành viên, #tqHop) vẫn bấm được — modal từng làm rụng 30 ca của trao_quan_ly_ui. */
.ct-ui-menu-hop{position:absolute;left:0;right:0;bottom:0;top:0;z-index:60;display:flex;align-items:flex-end;pointer-events:none}
.ct-ui-menu-hop[hidden]{display:none}
.ct-ui-menu-mo{position:absolute;inset:0;border:0;padding:0;background:#17342c33;pointer-events:auto}
.ct-ui-menu-tam{position:relative;pointer-events:auto;width:100%;border:1px solid #a6cfc1;border-radius:18px 18px 0 0;background:#f7fcf8;max-height:78%;display:flex;flex-direction:column;box-shadow:0 -10px 34px #123a3028}
/* YC05 - M-C (TV duyet 12/09/2026): menu NOI neo nut khi con du cho; thieu cho thi tro ve
   sheet day man. Che do do ctUiMenuDatCho_() quyet dinh bang so do that cua vung nhin, ghi
   vao data-hc-che-do; CSS chi doi hinh, khong tu chon che do. Sheet van la duong lui hop le,
   khong phai M-A: M-A la LUON sheet. */
.ct-ui-menu-hop[data-hc-che-do=noi]{align-items:flex-start}
.ct-ui-menu-hop[data-hc-che-do=noi] .ct-ui-menu-mo{background:#17342c1f}
.ct-ui-menu-hop[data-hc-che-do=noi] .ct-ui-menu-tam{position:absolute;width:auto;border-radius:16px;box-shadow:0 10px 30px #123a3033;max-height:none}
.ct-ui-menu-hop[data-hc-che-do=noi] .ct-ui-menu-tam:after{content:'';position:absolute;right:14px;bottom:-7px;width:12px;height:12px;background:#f7fcf8;border-right:1px solid #a6cfc1;border-bottom:1px solid #a6cfc1;transform:rotate(45deg)}
.ct-ui-menu-hop[data-hc-che-do=noi] .ct-ui-menu-than{max-height:none}
.ct-ui-menu-dau{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 8px 10px 14px;border-bottom:1px solid #c2ddcf;flex-shrink:0}
.ct-ui-menu-dau strong{font-size:var(--fs-5);color:#246f60}
.ct-ui-menu-than{padding:12px;overflow-y:auto;min-height:0}
.ct-ui-menu-than>div{margin:0 0 8px}
.ct-ui-menu-than .trao-nut-vai,.ct-ui-menu-than .trao-nut-phu{display:flex;flex-direction:column;gap:8px}
.ct-ui-menu-than .trao-nut-vai button,.ct-ui-menu-than .trao-nut-phu button{width:100%;min-height:44px;text-align:left}
.ct-ui-menu-trong{padding:0 14px 14px;color:#5d7a71;font-size:13px}
/* M-C đã duyệt: các dòng gọn, icon tĩnh, kết thúc việc tách cuối. */
.ct-ui-menu-dau strong{font-size:16px}
#ctUiMenuDong{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border:0;border-radius:12px;background:transparent;color:#33564c;cursor:pointer}
#ctUiMenuDong svg{width:22px;height:22px}
.ct-ui-menu-than .trao-nut-phu{gap:0;border:0;padding:0;margin:0}
.ct-ui-menu-than .trao-nut-phu button{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 4px;border:0;border-bottom:1px solid #e7eee8;border-radius:0;background:transparent;box-shadow:none;font:500 14px/1.4 system-ui,sans-serif;color:#244c41}
.ct-ui-menu-icon{flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ct-ui-menu-than button[data-hc-menu-loai=star] .ct-ui-menu-icon{color:#9b751c}
.ct-ui-menu-than button[data-hc-menu-loai=end]{margin-top:6px;border-top:1px solid #dce6dc;border-bottom:0;color:#a33329}
.ct-ui-menu-than .trao-nut-phu button:hover{background:#eaf3ed}
.ct-ui-menu-than .trao-nut-phu button:focus-visible,#ctUiMenuDong:focus-visible{outline:2px solid #287768;outline-offset:-2px}
