+ ·

· nút gửi </div>
       <div class="chat-duoi">
         <span class="gchip-bao">
           <button class="gchip" aria-expanded="false">…</button>
           <div class="gbang gbang-trai" hidden>…</div>
         </span>
         <span class="gchip-bao"> … .gbang.gbang-phai … </span>
       </div>
     </div>
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* ── NỀN CỦA Ô CHAT: khung, ô gõ, nút + và nút gửi ────────────────────────────────────── */
.chat-khu{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:26px 0 0}
.chat-o{flex:1;display:flex;align-items:flex-end;gap:11px;background:rgba(255,255,255,.05);
  border:1px solid transparent;border-radius:var(--gu-radius-lg);padding:11px 14px;min-width:0}
.chat-o:focus-within{border-color:rgba(47,107,255,.55);background:rgba(255,255,255,.07)}
.chat-cong{width:40px;height:40px;flex:none;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.11);color:var(--gu-text);font-size:var(--gu-fs-muc);line-height:1;font-weight:var(--gu-fw-body)}
.chat-cong:hover{background:rgba(255,255,255,.2)}
/* Nét cho dấu + và các icon trong khung. HST01 có luật `svg` chung của trang nên vẫn vẽ ra nét;
   HST02 thì không — đo được trên ảnh 1440px: nút `+` ra một vòng tròn RỖNG. Tệp chung phải tự
   đủ, đừng dựa vào luật của trang nào. */
.chat-o .chat-cong svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* 🔴 `var(--tx)` chứ KHÔNG phải `#fff` — sửa 17/08/2026.
   Màu trắng ghi cứng ở đây nên trên NỀN SÁNG là **chữ trắng trên nền trắng**: đo được
   độ sáng chữ 255 / nền 255 → chênh lệch **0**. Khách gõ xong không thấy mình gõ gì, chỉ
   khi bôi đen mới đọc được — đúng cảnh chủ dự án chụp lại lúc 12:39.
   Ô nhập là chỗ khách nhìn nhiều nhất; ghi cứng một màu ở đây là bỏ hẳn một nửa số người
   dùng (ai để nền sáng). */
.chat-o textarea{flex:1;background:transparent;border:0;color:var(--gu-text);font:inherit;font-size:var(--gu-fs-than);
  resize:none;padding:11px 2px;max-height:190px;min-width:0}
.chat-o textarea::placeholder{color:var(--gu-text-mut)}
.chat-o textarea:focus{outline:none}
.chat-gui{width:40px;height:40px;flex:none;border-radius:50%;border:0;cursor:pointer;
  background:var(--gu-btn-primary-bg);display:grid;place-items:center}
/* `--do-d` (#B0141A) dam den muc chinh cai nut mat ranh gioi voi nen #141518 (2,57 < 3).
 `--do` (#DB1920) vua du: nut noi len 3,64 so voi nen, va chu trang tren nut dat 5,07. */
.chat-gui:hover{background:var(--gu-btn-primary-bg)}
.chat-gui svg{width:18px;height:18px;fill:var(--gu-btn-primary-text);stroke:none}

/* ══ Ô NHẬP HAI HÀNG + HAI ĐIỀU KHIỂN KÍNH MỜ (OWNER 01/10/2026) ═══════════════════════
   Chủ dự án: *"CÁI Ô CHAT TO RA XÍU VÀ SỬA LẠI 3 NÚT NHƯ TÔI LÀM … THU NHỎ CÁC ICON VÀ CHỮ
   ĐỀU ĐỒNG NHẤT TINH GỌN HƠN TRONG KHUNG CÙNG KÍCH CỠ VỚI CÁC CHỮ MÔ TẢ KHÁC … thêm chút
   hiệu ứng mờ (glassmorphism)"*.

Ba điều khiển, mỗi cái một việc — trước đây cả ba nhét chung trong bảng `+`:
     `+`         → ĐƯA DỮ LIỆU VÀO (ảnh · tệp · video)
     chip kỹ năng → các SKILL gợi sẵn của khu đang mở (chính `#dsViec` cũ, chỉ dời chỗ)
     chip mức     → mức suy luận (Nhanh · Vừa · Cao · Chuyên sâu) — vẫn là `.cbai[data-ai]` cũ

Cỡ chữ: mọi mục menu dùng `--gu-fs-mo-ta` (13.5px) — ĐÚNG cỡ các câu mô tả khác trong
   trang, theo yêu cầu "đồng nhất". Icon 16px, không to hơn chữ. */
.chat-o{flex-direction:column;align-items:stretch;gap:6px;padding:14px 16px 10px;
  border-radius:var(--gu-radius-lg);
  /* Kính mờ: nền mờ + làm nét màu sau lưng. `-webkit-` cho Safari; trình duyệt không đỡ
     `backdrop-filter` thì vẫn còn nền `rgba` nên ô không bao giờ trong suốt hẳn. */
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  background:color-mix(in srgb,var(--gu-text) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--gu-text) 11%,transparent)}
.chat-hang{display:flex;align-items:flex-end;gap:11px;min-width:0}
.chat-o textarea{min-height:46px}
/* Hàng dưới: chip kỹ năng bên trái, chip mức bên phải — như ảnh mẫu của chủ dự án. */
.chat-duoi{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
/* Bọc chip + bảng của nó: bảng `position:absolute` đo theo CHÍNH cái bọc này, nên nó luôn
   bám đúng chip dù hàng dưới có xuống dòng ở màn hẹp. */
/* 🔴 KHÔNG dùng `font:` viết tắt với `inherit` làm họ chữ (`font:500 12px inherit`): theo chuẩn,
   họ chữ trong lối viết tắt không nhận `inherit`, nên CẢ câu bị bỏ và cỡ chữ rơi về 14px của
   thẻ cha. Đo được đúng thế ở bản đầu: chip khai 12px mà Chrome trả `font-size: 14px`.
   Khai rời `font-size` / `font-weight` / `line-height` thì không có chỗ nào để trượt. */
.gchip-bao{position:relative;display:inline-flex}
.gchip{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--gu-text) 13%,transparent);
  background:color-mix(in srgb,var(--gu-text) 6%,transparent);
  color:var(--gu-text-mut);border-radius:var(--gu-radius-pill);
  padding:5px 11px;font-size:var(--gu-fs-nhan);font-weight:var(--gu-fw-body);line-height:1.2}
.gchip:hover{background:color-mix(in srgb,var(--gu-text) 12%,transparent);color:var(--gu-text)}
.gchip[aria-expanded="true"]{color:var(--gu-text);border-color:color-mix(in srgb,var(--genup-blue) 55%,transparent)}
.gchip svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.gchip .gc-mui{width:11px;height:11px;opacity:.7}
/* Hai bảng mở ra từ chip. `position:absolute` trong `.chat-duoi` ⇒ không đẩy ô nhập nhảy chỗ. */
.gbang{position:absolute;bottom:calc(100% + 9px);z-index:40;min-width:232px;max-width:min(320px,92vw);
  padding:6px;border-radius:var(--gu-radius-md);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  background:color-mix(in srgb,var(--gu-surface-1) 82%,transparent);
  border:1px solid color-mix(in srgb,var(--gu-text) 13%,transparent);
  box-shadow:0 18px 44px rgba(0,0,0,.42);
  /* Mười kỹ năng là bảng cao hơn nửa màn ở laptop ⇒ cho cuộn, đừng để nó trùm lên ô nhập. */
  max-height:min(52vh,420px);overflow:auto;overscroll-behavior:contain}
.gbang[hidden]{display:none}
.gbang-trai{left:0}
.gbang-phai{right:0}
.gbang-nhom{font-size:var(--gu-fs-nhan);font-weight:var(--gu-fw-strong);letter-spacing:.09em;
  color:var(--gu-text-mut);text-transform:uppercase;padding:7px 9px 5px}
/* Mục menu: icon 16px + chữ 13.5px, một hàng, không xuống dòng — "tinh gọn" theo yêu cầu. */
.gbang .cb{gap:9px;padding:7px 9px;font-size:var(--gu-fs-mo-ta);font-weight:var(--gu-fw-body);line-height:1.35;color:var(--gu-text)}
.gbang .cb-ic{width:16px;height:16px;flex:none;display:grid;place-items:center;color:var(--gu-text-mut)}
.gbang .cb-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* `flex:1;min-width:0` — thiếu hai thứ này thì ô chữ co về 0 và mọi mục đọc ra "N…", "…".
   Đo được đúng thế ở bản đầu (ảnh 1440px). `min-width:0` là chỗ hay quên: mặc định một ô
   flex không co nhỏ hơn nội dung, nên `overflow:hidden` một mình không đủ. */
.gbang .cb-chu{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gbang .cb:hover .cb-ic{color:var(--gu-text)}
/* Bốn mức: một hàng nút bằng nhau; nút đang chọn sáng lên. Không dùng `<input type=range>` —
   bốn mức rời rạc thì nút nói rõ hơn, và đọc được bằng bàn phím lẫn trình đọc màn hình. */
.gmuc{display:flex;gap:4px;padding:6px}
.gmuc .cbai{flex:1;text-align:center;border:0;border-radius:var(--gu-radius-sm);
  padding:7px 9px;font-size:var(--gu-fs-nhan);font-weight:var(--gu-fw-body);line-height:1.2;
  background:color-mix(in srgb,var(--gu-text) 7%,transparent);color:var(--gu-text-mut)}
.gmuc .cbai:hover{background:color-mix(in srgb,var(--gu-text) 13%,transparent);color:var(--gu-text)}
.gmuc .cbai.on{background:color-mix(in srgb,var(--genup-blue) 34%,transparent);color:var(--gu-text)}
@media (max-width:560px){
  .chat-duoi{row-gap:8px}
  .gbang{min-width:min(260px,88vw)}
  /* 🔴 Ô gõ phải CAO HƠN ở khổ điện thoại. Câu gợi ý dài xuống hai dòng trong khi ô vẫn 46px,
     nên nó bị cắt NGANG CHỮ — đo trên ảnh 390px ngày 02/10, khách đọc được "Nhập ý tưởng — mô
     tả hình bạn muốn" rồi cụt. Bộ tự giãn chỉ chạy khi khách GÕ; chữ gợi ý thì không kích hoạt
     nó, nên phải cho sẵn chỗ. */
  .chat-o textarea{min-height:66px}
}