/* ============================================================
   BẢNG COMMENT SẢN PHẨM — MỘT LỚP, KIỂU MIRO (js/77-comment-board.js)
   ------------------------------------------------------------
   ⚠️ Lớp phủ TOÀN MÀN HÌNH → phải chừa safe-area (Convention #90):
   env() đặt TRỰC TIẾP trong property, KHÔNG qua --var (Convention #50/#53).
   z-index: dưới .modal-overlay do JS ép (99999) và dưới .toast (100010).

   MÀU: mặt phẳng để BE SÁNG kiểu Miro, còn bảng comment và thanh công cụ
   GIỮ TỐI như phần còn lại của phần mềm (chủ dự án chốt 2026-08-20).
   ============================================================ */

.cb-screen{
  /* Thứ tự từ trái sang: CỘT TÊN VÒNG · lưới ô · bảng so sánh · bảng comment.
     Thanh công cụ nổi ở MÉP PHẢI lưới ô (chủ dự án chốt 2026-08-22).
     Đảo sang phải để cột tên vòng dính hẳn mép trái màn hình — trước nó bị
     bảng comment + thanh công cụ đẩy vào giữa.
     --cb-rail = bề rộng cột tên vòng; --cb-tool = bề ngang thanh công cụ
     (nay chỉ dùng để chừa chỗ bên PHẢI, không cộng vào dải trái nữa). */
  --cb-tool:58px;
  --cb-rail:84px;
  position:fixed; inset:0; z-index:99000;
  background:var(--bg); color:var(--text);
  display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top, 0px);
  box-sizing:border-box; overflow:hidden;

  /* Bảng màu riêng của mặt phẳng — cố định, không theo chế độ sáng/tối của app,
     vì ảnh render phải nhìn đúng màu trên nền sáng. */
  --cb-canvas:#EFEBE3;
  --cb-canvas2:#E5E0D6;
  --cb-sep:#C9524A;
  --cb-cink:#3A362F;
  --cb-cink2:#7A7468;
}
body.cb-open{ overflow:hidden; }

/* ---------- Đi chỗ khác trong lúc bảng đang mở ---------- */
/* Bảng comment là lớp phủ toàn màn (z-index 99000) nên thanh bên của phần mềm
   nằm khuất hẳn dưới nó. Chủ dự án chốt 2026-08-25: rê chuột sang mép trái vẫn
   phải thấy thanh bên để nhảy sang trang khác.
   ⚠️ CHỈ nâng z-index. Cơ chế hiện/ẩn theo chuột đã có sẵn ở js/01
      (_setupHoverSidebar + #sidebar-hotspot) và KHÔNG viết lại ở đây
      (Convention #75). Điện thoại không đụng: hotspot vốn đã bị ẩn ≤768px.
   ⚠️ Bấm vào thanh bên thì js/77 (_cbBamThanhBen) tự đóng bảng trước, không
      thì trang mới nạp xong vẫn nằm khuất dưới lớp phủ. */
@media (min-width:769px){
  body.cb-open #sidebar,
  body.cb-open #emp-sidebar{ z-index:99200 !important; }
  body.cb-open #sidebar-hotspot,
  body.cb-open #emp-sidebar-hotspot{ z-index:99201 !important; }
}

.cb-loading,.cb-empty{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:var(--text2); font-size:13px; text-align:center; padding:24px;
}

/* ---------- Thanh trên: 54px giống .topbar (Convention #61) ---------- */
.cb-top{
  height:54px; min-height:54px; max-height:54px; flex-shrink:0;
  display:flex; align-items:center; gap:10px;
  padding:0 12px; border-bottom:1px solid var(--border); background:var(--bg2);
}
.cb-top-title{
  font-size:14px; font-weight:700; display:flex; align-items:center; gap:7px;
  min-width:0; white-space:nowrap; flex-shrink:0;
}
/* Logo là ẢNH JPG nền trắng (xem chú thích ở CB_IC.logo trong js/77). Bọc
   thành ô vuông trắng bo góc để nó ra dáng một biểu tượng ứng dụng — hợp cả
   nền tối lẫn nền sáng, thay vì lòi ra một mảng trắng vuông chằn chặn. */
/* Logo nay la PNG NEN TRONG SUOT (doi 2026-08-27) nen KHONG boc nen trang nua —
   truoc la JPG nen trang, phai boc o tron trang cho do choi tren nen toi. */
.cb-logo{ display:block; flex-shrink:0; object-fit:contain; }
.cb-top-title .cb-logo{ width:24px; height:24px; }
.cb-side-nhan{ display:inline-flex; align-items:center; gap:5px; }
.cb-side-nhan .cb-logo{ width:17px; height:17px; }
/* Tay nắm kéo tấm comment — chỉ điện thoại mới hiện (xem khối cuối tệp). */
.cb-sheet-grip{
  display:none; align-items:center; justify-content:center; flex-shrink:0;
  height:22px; cursor:grab; touch-action:none;
}
.cb-sheet-grip i{ width:46px; height:4px; border-radius:3px; background:var(--text3); opacity:.6; }
.cb-sheet-so{ display:none; }
/* Phần hình của nút "Công cụ của ô" — máy tính dùng chữ nên giấu đi. */
.cb-cc-ic{ display:none; align-items:center; justify-content:center; }
.cb-cc-ic .cb-ic{ width:16px; height:16px; }
.cb-top-proj{ font-size:11.5px; font-weight:500; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cb-tabs{ display:flex; gap:6px; margin-left:auto; }
.cb-tab{
  background:var(--bg3); color:var(--text2); border:1px solid var(--border);
  border-radius:7px; padding:5px 11px; font-size:12px; font-weight:600; cursor:pointer;
}
.cb-tab.active{ background:var(--blue); color:#fff; border-color:var(--blue); }
.cb-x{
  background:transparent; border:1px solid var(--border); color:var(--text2);
  width:32px; height:32px; border-radius:8px; font-size:15px; cursor:pointer; flex-shrink:0; margin-left:6px;
}
.cb-x:hover{ background:var(--bg3); color:var(--text); }
/* Nút về trang Playcomment. Bảng comment là lớp phủ nên ngoài ✕ ra không có
   đường quay lại nào — mà ✕ thì trả về đúng trang vừa mở, không phải trang
   danh sách (chủ dự án chốt 2026-08-25). */
.cb-ve{
  background:var(--bg3); border:1px solid var(--border); color:var(--text2);
  height:32px; border-radius:8px; padding:0 10px; font-size:12px; font-weight:600;
  cursor:pointer; flex-shrink:0; white-space:nowrap; margin-right:2px;
}
.cb-ve:hover{ background:var(--blue); border-color:var(--blue); color:#fff; }
.cb-zoom{ display:flex; align-items:center; gap:4px; }
.cb-zoom button{
  width:28px; height:28px; border-radius:7px; border:1px solid var(--border);
  background:var(--bg3); color:var(--text2); cursor:pointer; font-size:14px;
  display:grid; place-items:center;
}
.cb-zoom button:hover{ color:var(--text); }
.cb-zoom span{ font-size:11.5px; color:var(--text3); min-width:44px; text-align:center; }

.cb-work{ flex:1; min-height:0; display:flex; }
/* Đảo thứ tự bằng `order` chứ không xáo thẻ trong HTML — xáo thẻ là gãy những
   chỗ đang tìm theo vị trí. Trái → phải: lưới ô · so sánh · comment. */
.cb-canvas{ order:1; }
.cb-grip[data-cot="cmp"]{ order:2; }
.cb-cmp{ order:3; }
.cb-grip[data-cot="side"]{ order:4; }
.cb-side{ order:5; }

/* ============================================================
   KHU 2 — BẢNG COMMENT (giữ nền tối)
   ============================================================ */
.cb-side{
  width:290px; flex-shrink:0; border-left:1px solid var(--border);
  background:var(--bg2); display:flex; flex-direction:column; min-height:0;
}
.cb-side-round{
  padding:9px 12px; border-bottom:1px solid var(--border);
  display:flex; align-items:baseline; gap:8px; flex-shrink:0;
}
.cb-side-round .k{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); }
.cb-side-round .v{ font-weight:700; font-size:13.5px; }
.cb-side-who{
  padding:9px 12px; border-bottom:1px solid var(--border); flex-shrink:0;
  background:rgba(59,130,246,.10); border-left:3px solid var(--blue);
}
.cb-side-who .v{ font-weight:680; font-size:13px; }
.cb-side-who .k{ font-size:11px; color:var(--text2); margin-top:1px; }
.cb-side-cc{
  display:flex; align-items:center; gap:6px; width:100%; margin-top:7px;
  padding:5px 8px; border-radius:7px; cursor:pointer; min-height:0;
  font-size:10.5px; font-weight:700; color:var(--text2);
  background:var(--bg3); border:1px solid var(--border);
}
.cb-side-cc:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }
.cb-side-ccbox{ margin-top:2px; }
.cb-side-acts{ display:flex; gap:6px; margin-top:7px; }
.cb-side-acts button{
  flex:1; display:flex; align-items:center; justify-content:center; gap:4px;
  background:var(--bg3); border:1px solid var(--border); color:var(--text2);
  border-radius:7px; padding:5px 6px; font-size:10.5px; font-weight:600; cursor:pointer;
}
.cb-side-acts button:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }
.cb-side-acts .cb-ic{ width:13px; height:13px; }

.cb-side-head{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  padding:9px 12px; border-bottom:1px solid var(--border);
  font-size:12px; font-weight:700; flex-shrink:0;
}
.cb-side-new{ background:var(--red); color:#fff; font-size:10.5px; border-radius:6px; padding:1px 7px; }
.cb-side-readall{
  margin-left:auto; background:transparent; border:1px solid var(--border);
  color:var(--text3); font-size:10.5px; border-radius:6px; padding:3px 8px; cursor:pointer;
}
.cb-side-readall:hover{ color:var(--text); background:var(--bg3); }
.cb-side-empty{ padding:22px 14px; font-size:12px; color:var(--text3); line-height:1.6; }
.cb-side-list{ flex:1; min-height:0; overflow-y:auto; padding:8px; }
.cb-side-list > *{ flex:0 0 auto; }

.cb-cmt{
  border:1px solid var(--border); border-radius:9px; background:var(--bg);
  padding:9px 10px; margin-bottom:7px; cursor:pointer;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.cb-cmt:hover{ border-color:var(--text3); }
.cb-cmt.unread{ border-left:3px solid var(--red); }
.cb-cmt.active{ border-color:var(--blue); box-shadow:0 0 0 2px rgba(59,130,246,.22); background:var(--bg3); }
/* ĐO chứ không chọn bằng mắt (Convention #91): chữ comment đã sửa phải đạt
   4.5:1 mới đọc thoải mái. Mờ .82 mới được 4.31:1 ở nền tối — chưa đủ.
   Mờ .86 cho 4.61:1 (nền tối) và 5.70:1 (nền sáng). Trước đây là .6 + màu
   --text3, chỉ 1.59:1 — gần như không đọc nổi, đúng như chủ dự án báo. */
.cb-cmt.fixed{ opacity:.86; }
.cb-cmt-top{ display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.cb-cmt-no{
  width:19px; height:19px; border-radius:50%; color:#fff;
  font-size:10.5px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cb-cmt-au{ font-size:11.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cb-cmt-time{ font-size:10.5px; color:var(--text3); margin-left:auto; white-space:nowrap; }
.cb-cmt-body{ font-size:12px; line-height:1.55; white-space:pre-wrap; word-break:break-word; }
/* Sửa xong thì chỉ LÀM TỐI ĐI, KHÔNG gạch chéo (chủ dự án chốt 2026-08-20):
   gạch chéo làm chữ khó đọc, mà comment cũ vẫn cần đọc lại được. */
/* Sửa xong thì DỊU đi chứ không mờ hẳn — vẫn phải đọc lại được (chủ dự án
   báo 2026-08-21: trước để --text3 + mờ .6, tối quá không đọc nổi). */
.cb-cmt.fixed .cb-cmt-body{ color:var(--text2); }
.cb-cmt-actions{ display:flex; gap:6px; margin-top:7px; }
.cb-cmt-btn{
  background:var(--bg3); border:1px solid var(--border); color:var(--text2);
  font-size:10.5px; border-radius:6px; padding:3px 8px; cursor:pointer;
}
.cb-cmt-btn:hover{ color:var(--text); }
.cb-cmt-btn.done{ background:var(--green-bg); color:var(--green); border-color:transparent; font-weight:700; }
.cb-cmt-btn.del{ margin-left:auto; }
.cb-cmt-btn.del:hover{ background:var(--red-bg); color:var(--red); }

/* ============================================================
   MẶT PHẲNG — nền be sáng kiểu Miro
   ============================================================ */
.cb-canvas{ flex:1; min-width:0; position:relative; overflow:hidden; background:var(--cb-canvas); }
.cb-stage-wrap{ position:absolute; inset:0; overflow:hidden; touch-action:none; cursor:default; }
.cb-stage-wrap[data-tool="draw"]{ cursor:crosshair; }
.cb-stage-wrap[data-tool="text"],.cb-stage-wrap[data-tool="comment"],
.cb-stage-wrap[data-tool="erase"],.cb-stage-wrap[data-tool="erase_all"]{ cursor:cell; }
.cb-stage-wrap[data-tool="hand"]{ cursor:grab; }
.cb-stage-wrap.dragover{ outline:3px dashed var(--blue); outline-offset:-8px; }
/* ⚠️ Khung vẽ KHÔNG được cho bôi đen chữ, KHÔNG được cho trình duyệt tự kéo
   ảnh. Thiếu hai thứ này thì cú kéo để VẼ biến thành "bôi đen" rồi thành
   "kéo-thả ảnh" của trình duyệt: một bản ảnh mờ đi theo chuột, khung vẽ hiện
   viền xanh nét đứt, và không vẽ ra gì (chủ dự án báo 2026-08-26).
   Chặn ở JS (ondragstart) là chính; hai dòng này là lớp thứ hai cho chắc. */
.cb-stage-wrap, .cb-stage-wrap *{
  -webkit-user-select:none; user-select:none;
  -webkit-user-drag:none; -webkit-touch-callout:none;
}
/* Trừ những chỗ PHẢI gõ được / bôi đen được: ô soạn comment và khối gõ của
   thẻ note (cả hai đều nằm TRONG khung vẽ). */
.cb-stage-wrap input, .cb-stage-wrap textarea,
.cb-stage-wrap [contenteditable="true"], .cb-stage-wrap [contenteditable="true"] *,
.cb-stage-wrap .cb-composer, .cb-stage-wrap .cb-composer *{
  -webkit-user-select:text; user-select:text;
}

.cb-stage{ position:absolute; left:0; top:0; transform-origin:0 0; }

/* Ô: vạch đứt đỏ ngăn cột, giống Miro */
.cb-cellbox{
  position:absolute; box-sizing:border-box;
  border-right:2px dashed var(--cb-sep);
  border-bottom:1px solid rgba(0,0,0,.14);
}
/* Nét ngoài cùng bên trái + trên cùng của cả lưới — trước đây mỗi ô chỉ có nét
   phải và dưới nên mép trái bảng bị hụt (chủ dự án báo 2026-08-20). */
.cb-cellbox.cot-dau{ border-left:2px dashed var(--cb-sep); }
.cb-cellbox.hang-dau{ border-top:1px solid rgba(0,0,0,.14); }
.cb-imgbox{ position:absolute; box-shadow:0 2px 14px rgba(0,0,0,.22); background:#fff; }
.cb-imgbox .cb-img{ width:100%; height:100%; display:block; user-select:none; -webkit-user-drag:none; }
/* Ranh giới ảnh nền — biết đâu là ảnh, đâu là phần vẽ tràn ra ngoài */
.cb-imgbox::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  outline:1px solid rgba(0,0,0,.18);
}
.cb-empty-cell{
  position:absolute; display:grid; place-items:center;
  border:2px dashed rgba(0,0,0,.18); border-radius:10px; background:var(--cb-canvas2);
  color:var(--cb-cink2); font-size:34px; font-weight:600;
}
/* Nút "＋ Tải ảnh" giữa ô trống — phải là nút THẬT, bấm được. */
.cb-cell-up{
  border:0; background:rgba(0,0,0,.06); color:var(--cb-cink2);
  font:inherit; font-size:34px; font-weight:600; cursor:pointer;
  padding:14px 34px; border-radius:14px; min-height:0;
}
.cb-cell-up:hover{ background:var(--blue); color:#fff; }
.cb-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:hidden; }
.cb-pins{ position:absolute; pointer-events:none; }

.cb-rowline{ position:absolute; left:0; height:2px; background:rgba(0,0,0,.16); }
.cb-rowtag{
  position:absolute; left:0; padding:5px 14px 5px 10px;
  font-size:30px; font-weight:800;
  color:#fff; background:rgba(40,36,30,.72); border-bottom-right-radius:12px;
  white-space:nowrap; pointer-events:none;
}

/* Khu 1 — đầu cột, dính trên đỉnh khung nhìn */
.cb-heads{
  position:absolute; left:0; right:0; top:0; height:44px; pointer-events:none;
  overflow:hidden; background:rgba(255,255,255,.72); border-bottom:1px solid rgba(0,0,0,.12);
  backdrop-filter:blur(3px);
}
.cb-head{
  position:absolute; top:0; height:44px; box-sizing:border-box;
  border-right:2px dashed var(--cb-sep); color:var(--cb-cink); overflow:hidden;
}
/* Nhãn bám GIỮA PHẦN CÒN NHÌN THẤY của cột (JS đặt `left`). */
.cb-head-in{
  position:absolute; top:5px; transform:translateX(-50%);
  max-width:100%; padding:0 12px; box-sizing:border-box; text-align:center;
}
.cb-head-n{ font-weight:800; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cb-head-p{ font-size:11px; color:var(--cb-cink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Ghim comment — nhân ngược mức phóng nên luôn to bằng nhau trên màn */
.cb-pin{
  position:absolute; box-sizing:border-box;
  transform:translate(-50%,-50%) scale(var(--cb-iz,1));
  width:26px; height:26px; border-radius:50%; border:2px solid #fff;
  color:#fff; font-size:11.5px; font-weight:800;
  box-shadow:0 2px 8px rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center;
}
.cb-pin.unread{ animation:cb-pulse 1.6s ease-in-out infinite; }
/* Ghim "dang go" — hien NGAY cho vua bam, truoc ca khi luu. Vien dut +
   nhap nhay de phan biet ro voi ghim da luu. */
.cb-pin.tam{
  border-style:dashed; opacity:.92; z-index:7;
  animation:cb-pulse 1.1s ease-in-out infinite;
  box-shadow:0 0 0 3px rgba(255,255,255,.55), 0 2px 10px rgba(0,0,0,.5);
}
.cb-pin.active{ outline:3px solid var(--blue); outline-offset:2px; z-index:5; }
.cb-pin.picked{ box-shadow:0 0 0 3px rgba(255,255,255,.9), 0 2px 10px rgba(0,0,0,.5); z-index:6; }
/* Ghim đã sửa: giữ rõ nét (đã có màu xanh lá phân biệt rồi), chỉ dịu bớt. */
.cb-pin.fixed{ opacity:.9; }
@keyframes cb-pulse{ 0%,100%{ box-shadow:0 2px 8px rgba(0,0,0,.45); } 50%{ box-shadow:0 0 0 7px rgba(239,68,68,.28); } }

/* ============================================================
   KHU 3 — THANH CÔNG CỤ (sát cạnh bảng comment)
   ============================================================ */
/* Sát mép trái khung vẽ = ngay cạnh bảng comment (chủ dự án chốt 2026-08-20).
   Cột tên vòng nằm bên PHẢI thanh này, không còn bị đè. */
/* Nổi ở mép PHẢI lưới ô (chủ dự án chốt 2026-08-22) — nhường hẳn mép trái
   cho cột tên vòng. */
.cb-toolwrap{ position:absolute; right:6px; top:50%; transform:translateY(-50%); z-index:6; display:flex; align-items:flex-start; }
.cb-tools{
  background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  padding:6px; display:flex; flex-direction:column; gap:3px;
  box-shadow:0 6px 22px rgba(0,0,0,.3);
}
.cb-tool{
  position:relative; width:34px; height:34px; border-radius:8px; border:none; cursor:pointer;
  background:transparent; color:var(--text2); font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.cb-tool:hover{ background:var(--bg3); color:var(--text); }
.cb-tool.active{ background:var(--blue); color:#fff; }
.cb-tool-danger:hover{ background:var(--red-bg); color:var(--red); }
/* Nút ✂️ Tách nền — chỉ hiện khi đang chọn đúng một ảnh trên mặt phẳng.
   Ẩn hẳn chứ không làm mờ: một nút lúc nào cũng thấy mà phần lớn thời gian bấm
   vào chỉ ra lời nhắc thì chỉ tổ gây nhiễu. */
.cb-tool-tach{ display:none; font-size:15px; }
.cb-tool-tach.mo{ display:flex; }
.cb-tool-tach.mo:hover{ background:var(--green); color:#fff; }
.cb-tool-caret{
  position:absolute; right:2px; bottom:2px; width:0; height:0;
  border-left:4px solid transparent; border-top:4px solid currentColor; opacity:.55;
}
/* Ô tự chọn màu — trông như một ô màu, nhưng bên trong là ô chọn màu của
   hệ điều hành (giấu đi, chỉ mượn chức năng). */
.cb-color-tudo{ position:relative; overflow:hidden; cursor:pointer; padding:0; }
.cb-color-tudo input[type="color"]{
  position:absolute; inset:-6px; width:calc(100% + 12px); height:calc(100% + 12px);
  padding:0; border:none; background:transparent; cursor:pointer; opacity:0;
}
.cb-color-tudo::after{
  content:''; position:absolute; right:1px; bottom:1px; width:0; height:0;
  border-left:5px solid transparent; border-bottom:5px solid rgba(255,255,255,.9);
}
/* Nút hút màu — không phải ô màu nên vẽ viền rỗng cho khác hẳn. */
.cb-color-hut{
  background:var(--bg3) !important; color:var(--text2);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.cb-color-hut svg{ width:13px; height:13px; }
.cb-color-hut:hover{ color:var(--text); border-color:var(--blue) !important; }

/* Tay nắm thu/mở thanh công cụ — CHỈ điện thoại. Máy tính thừa chỗ, thu vào
   chỉ tổ thêm một cú bấm. */
/* Nút màu trên thanh công cụ điện thoại: một ô tròn mang đúng màu đang cầm. */
.cb-tool-mau i{
  width:17px; height:17px; border-radius:50%; display:block;
  border:1.5px solid rgba(255,255,255,.55); box-sizing:border-box;
}
.cb-tool-mau.active i{ border-color:#fff; }
/* Bảng màu nổi: xếp 4 ô một hàng cho vừa màn hẹp. */
.cb-pop-mau{ width:auto; padding:7px; }
.cb-pop-mau .cb-colors{ grid-template-columns:repeat(4, 1fr); gap:7px; }
.cb-pop-mau .cb-color{ width:26px; height:26px; }
.cb-pop-co{ width:186px; padding:9px 11px 11px; }
.cb-tool-tay{ display:none; }
.cb-tool-sep{ height:1px; background:var(--border); margin:4px 2px; }
.cb-colors{ display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:1px; }
.cb-color{ width:15px; height:15px; border-radius:50%; border:1.5px solid var(--border); cursor:pointer; padding:0; }
.cb-color.active{ outline:2px solid var(--blue); outline-offset:1px; }

.cb-popover{
  /* Mở về bên TRÁI: thanh công cụ đã sát mép phải, mở sang phải là ra ngoài màn. */
  position:absolute; right:52px; width:236px;
  background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  padding:6px; box-shadow:0 10px 30px rgba(0,0,0,.42); z-index:7;
}
.cb-pitem{
  width:100%; display:flex; align-items:center; gap:9px;
  background:transparent; border:none; color:var(--text2); cursor:pointer;
  font-size:12px; text-align:left; border-radius:8px; padding:7px 9px; line-height:1.35;
}
.cb-pitem:hover{ background:var(--bg3); color:var(--text); }
.cb-pitem.active{ background:var(--blue); color:#fff; font-weight:600; }
.cb-pitem-ic{ width:19px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cb-pitem-chu{ flex:1; min-width:0; }
/* Phím tắt nằm nép bên phải mỗi mục — thấy là nhớ, không phải đi tra ở đâu. */
.cb-pitem-phim{
  flex-shrink:0; font:600 10px/1 ui-monospace, Menlo, Consolas, monospace;
  color:var(--text3); background:var(--bg3); border:1px solid var(--border);
  border-radius:5px; padding:3px 5px; letter-spacing:.02em;
}
.cb-pitem.active .cb-pitem-phim{ color:#fff; background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.35); }
/* Bảng tra phím tắt */
/* Hộp bảng tra phím tắt — nổi trên lớp phủ tối dùng chung với "xem ảnh to". */
.cb-phim-hop{
  background:var(--bg2); color:var(--text); border:1px solid var(--border);
  border-radius:14px; padding:16px 18px 14px; width:min(620px, 92vw);
  max-height:82vh; overflow:auto; box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.cb-phim-top{
  display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700;
  margin-bottom:12px;
}
.cb-phim-top .cb-x{ margin-left:auto; }
.cb-phim-chan{
  margin-top:12px; padding-top:10px; border-top:1px solid var(--border);
  font-size:11.5px; color:var(--text3); line-height:1.5;
}
.cb-phim-nut{ font-size:14px; }
/* ⚠️ minmax(0,1fr) chứ không phải 1fr — 1fr vẫn nở theo chữ dài và làm tràn
   ngang (Convention #96). */
.cb-phim-luoi{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px 16px; }
.cb-phim-h{ grid-column:1 / -1; font-size:11px; font-weight:700; color:var(--text3);
  text-transform:uppercase; letter-spacing:.04em; margin-top:6px; }
.cb-phim-h:first-child{ margin-top:0; }
.cb-phim-d{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--text2); }
.cb-phim-d span{ flex:1; min-width:0; }
.cb-phim-d kbd{
  flex-shrink:0; font:600 10.5px/1 ui-monospace, Menlo, Consolas, monospace;
  color:var(--text); background:var(--bg3); border:1px solid var(--border);
  border-bottom-width:2px; border-radius:5px; padding:4px 6px; white-space:nowrap;
}
.cb-psize{ border-top:1px solid var(--border); margin-top:5px; padding:9px 9px 4px; }
.cb-psize-top{ display:flex; justify-content:space-between; font-size:11px; color:var(--text3); margin-bottom:6px; }
.cb-psize-top b{ color:var(--text); }
.cb-psize input[type=range]{ width:100%; accent-color:var(--blue); }
.cb-psize-prev{ height:42px; display:flex; align-items:center; justify-content:center; }
.cb-psize-prev i{ display:block; border-radius:50%; }
.cb-psize-note{ font-size:10.5px; color:var(--amber); line-height:1.45; padding-bottom:4px; }

/* Hình 2D trong nút */
.cb-ic{ width:19px; height:19px; display:block; flex-shrink:0; }
.cb-pitem .cb-ic{ width:17px; height:17px; }
.cb-zoom .cb-ic{ width:16px; height:16px; }

/* ---------- Hộp soạn comment ---------- */
.cb-composer{
  position:absolute; z-index:8; width:270px;
  background:var(--bg2); border:1px solid var(--border); border-radius:11px;
  padding:10px; box-shadow:0 10px 30px rgba(0,0,0,.42); color:var(--text);
}
.cb-composer-t{ font-size:11.5px; font-weight:700; color:var(--text2); margin-bottom:7px; }
.cb-composer textarea,.cb-composer input{
  width:100%; box-sizing:border-box; background:var(--bg); color:var(--text);
  border:1px solid var(--border); border-radius:8px; padding:7px 9px;
  font-size:12px; font-family:inherit; resize:vertical;
}
.cb-composer-a{ display:flex; gap:6px; justify-content:flex-end; margin-top:8px; }

/* ---------- Tay nắm chỉnh hình / khung chọn ---------- */
.cb-h{ fill:#fff; fill-opacity:.9; stroke:#2563eb; stroke-width:1.6px; vector-effect:non-scaling-stroke; }
.cb-h.ctrl{ fill:#2563eb; stroke:#fff; }
.cb-hline{ stroke:#2563eb; stroke-width:1px; stroke-dasharray:4 4; opacity:.75; vector-effect:non-scaling-stroke; }
.cb-selbox{
  fill:rgba(59,130,246,.10); stroke:#2563eb; stroke-width:2px; stroke-dasharray:7 5;
  vector-effect:non-scaling-stroke;
}
.cb-band{
  fill:rgba(59,130,246,.14); stroke:#2563eb;
  stroke-width:1px; stroke-dasharray:5 4; vector-effect:non-scaling-stroke;
}

/* ---------- Dòng nhắc dưới đáy ---------- */
.cb-tool-hint{
  position:absolute; left:calc(var(--cb-rail,84px) + 14px); right:calc(var(--cb-tool,58px) + 14px); bottom:12px; z-index:5; pointer-events:none;
  background:rgba(20,18,15,.80); color:#e5e7eb;
  border-radius:8px; padding:6px 11px; font-size:11.5px; line-height:1.45; text-align:center;
}
.cb-tool-hint b{ color:#fff; }
.cb-hint-sel{ color:#93c5fd; font-weight:600; }
.cb-hint-space{
  background:var(--amber); color:#111; font-weight:800;
  border-radius:6px; padding:2px 8px; margin-right:8px;
}

/* ---------- Nhãn số comment trên dòng view của bảng workflow ---------- */
.wf-cb-badge{
  display:inline-flex; align-items:center; gap:2px;
  font-size:10px; font-weight:700; border-radius:5px; padding:0 4px;
  background:var(--bg3); color:var(--text3); margin-left:3px;
}
.wf-cb-badge.unread{ background:var(--red); color:#fff; }

/* ---------- Điện thoại ---------- */
@media (max-width:768px){
  .cb-screen{ padding-top:env(safe-area-inset-top, 47px); }
  .cb-top{ padding:0 8px; gap:6px; }
  .cb-top-proj{ display:none; }
  /* Màn hẹp: nút về chỉ còn mũi tên. */
  /* Điện thoại không có bàn phím ⇒ giấu nút phím tắt cho đỡ chật. */
  .cb-phim-nut{ display:none !important; }
  .cb-phim-luoi{ grid-template-columns:minmax(0,1fr); }
  .cb-ve{ width:32px; padding:0; font-size:0; margin-right:0; }
  .cb-ve::before{ content:'←'; font-size:16px; }
  .cb-tab{ padding:4px 8px; font-size:11px; }
  .cb-work{ flex-direction:column; }
  /* Điện thoại xếp trên dưới, không có chỗ để kéo ngang. */
  .cb-grip{ display:none !important; }
  .cb-side{ width:auto !important; max-height:40%; border-right:none; border-top:1px solid var(--border); order:2; }
  .cb-cmp.open{ width:auto !important; }
  .cb-canvas{ order:1; min-height:0; flex:1; }
  .cb-toolwrap{ right:6px; left:auto; }
  /* Rộng ĐÚNG bằng một hình (chủ dự án chốt 2026-08-24): bảng màu 2 cột và
     thanh độ dày nét đã tách ra hai nút riêng, bấm mới mở. */
  .cb-tools{ padding:4px; gap:2px; width:38px; box-sizing:border-box; }
  .cb-tool{ width:30px; height:30px; }
  .cb-tool-hint{ left:8px; right:46px; bottom:8px; font-size:10.5px; padding:5px 8px; }
}

/* Khung bao hình đang chọn ở nhánh tay nắm 4 góc */
.cb-hbox{
  fill:none; stroke:#2563eb; stroke-width:1.5px; stroke-dasharray:5 4;
  vector-effect:non-scaling-stroke;
}

/* ============================================================
   BỔ SUNG 2026-08-20
   ============================================================ */

/* ---------- Cột tên vòng, dính hẳn bên trái ----------
   Không co giãn theo mức phóng: bề rộng cố định, chỉ vị trí dọc chạy theo. */
/* Từ 2026-08-22 thanh công cụ đã sang phải, nên dải này CHỈ còn cột tên vòng
   và dính hẳn mép trái màn hình — đúng thứ chủ dự án muốn. */
.cb-rows{
  position:absolute; left:0; top:0; bottom:0;
  width:var(--cb-rail,84px); pointer-events:none;
  overflow:hidden; background:rgba(255,255,255,.72); border-right:1px solid rgba(0,0,0,.14);
  backdrop-filter:blur(3px); z-index:3;
}
/* Vạch ngăn hàng chạy hết bề ngang dải. */
.cb-row{
  position:absolute; left:0; right:0; box-sizing:border-box;
  border-bottom:1px solid rgba(0,0,0,.12);
}
/* Nhãn bám GIỮA PHẦN CÒN NHÌN THẤY của hàng (JS đặt `top`), nên phóng to
   bao nhiêu tên vòng vẫn nằm giữa khoảng đang thấy chứ không trôi mất. */
.cb-row-n{
  position:absolute; left:0; right:0; padding:0 3px; transform:translateY(-50%);
  font-size:12px; font-weight:800; color:var(--cb-cink); line-height:1.2;
  overflow-wrap:anywhere; text-align:center;
}
/* Mỗi từ một dòng — cột hẹp mà vẫn đọc được. */
.cb-row-w{ display:block; }
/* ---------- Deadline của view đang chọn, ngay dưới tên vòng ----------
   Cùng một chỗ lưu với deadline trên bảng workflow (`views[i].deadline`) —
   sửa bên nào bên kia cũng đổi theo (Convention #75).
   ⚠️ Dải .cb-rows KHÔNG nhận chuột (để còn kéo được mặt phẳng), nên nhãn này
   phải tự bật `pointer-events` cho riêng nó. */
.cb-row-dl{
  display:inline-block; margin-top:3px; padding:1px 6px; border-radius:6px;
  font-size:10.5px; font-weight:700; line-height:1.5; white-space:nowrap;
  font-variant-numeric:tabular-nums;
  background:rgba(0,0,0,.07); color:#544e43;
}
.cb-row-dl.sua{ pointer-events:auto; cursor:pointer; }
.cb-row-dl.sua:hover{ background:#2563eb; color:#fff; }
/* Màu ĐO chứ không chọn bằng mắt (Convention #91). Nền thật của nhãn =
   rgba(255,255,255,.72) chồng trên nền be #EFEBE3, rồi chồng tiếp lớp nền
   của chính nhãn. Số đo trên nền đó:
     #544e43 thường  6.73:1 · #b91c1c quá hạn 4.71:1 · #92400e hôm nay 5.25:1
     #6b6558 chỗ trống 4.73:1 · chữ trắng trên #2563eb lúc rê vào 5.17:1
   Tất cả vượt ngưỡng 4.5:1. Bộ màu đầu tiên em chọn bằng mắt có hai màu chỉ
   3.0–3.8:1 — đo mới biết. */
.cb-row-dl.tre{ background:rgba(185,28,28,.16); color:#b91c1c; }
.cb-row-dl.gap{ background:rgba(146,64,14,.16); color:#92400e; }
.cb-row-dl.trong{ color:#6b6558; }
/* Ô góc trên-trái, che chỗ hai dải cắt nhau */
.cb-corner{
  position:absolute; left:0; top:0; width:var(--cb-rail,84px);
  height:44px; z-index:5; pointer-events:none;
  background:rgba(255,255,255,.9); border-right:1px solid rgba(0,0,0,.14);
  border-bottom:1px solid rgba(0,0,0,.12);
}
.cb-heads{ left:var(--cb-rail,84px); }

/* Ô cắt ở mép: thu nhỏ/dời nội dung trong ô không tràn sang ô bên cạnh */
.cb-cellbox{ overflow:hidden; }

/* ---------- Sửa lại comment đã viết ---------- */
.cb-cmt.dang-sua{ border-color:var(--blue); background:var(--bg3); cursor:default; }
.cb-cmt-in{
  width:100%; box-sizing:border-box; margin-top:6px; resize:vertical;
  background:var(--bg); color:var(--text); border:1px solid var(--border);
  border-radius:7px; padding:7px 9px; font-size:12px; line-height:1.55;
  font-family:inherit;
}
.cb-cmt-in:focus{ outline:none; border-color:var(--blue); }
.cb-cmt-btn.luu{ background:var(--blue); color:#fff; border-color:var(--blue); font-weight:700; }
.cb-cmt-btn.luu:hover{ filter:brightness(1.12); }
.cb-cmt-suaroi{ margin-top:4px; font-size:10.5px; color:var(--text3); font-style:italic; }

/* ---------- Thanh thu/phóng nội dung của ô đang làm ---------- */
.cb-side-zoom{
  display:flex; align-items:center; gap:6px; margin-top:6px;
  padding:4px 8px; border:1px solid var(--border); border-radius:8px; background:var(--bg2);
}
.cb-side-zoom .k{ font-size:11px; color:var(--text3); margin-right:auto; }
.cb-side-zoom b{ font-size:11.5px; min-width:38px; text-align:center; font-variant-numeric:tabular-nums; }
.cb-side-zoom button{
  width:24px; height:24px; min-height:24px; line-height:1; padding:0;
  border:1px solid var(--border); border-radius:6px; background:var(--bg3);
  color:var(--text2); font-size:14px; font-weight:700; cursor:pointer;
}
.cb-side-zoom button:hover{ color:var(--text); border-color:var(--blue); }

/* ---------- Nút "so sánh trước/sau" ở góc phải mỗi ô ---------- */
.cb-cell-cmp{
  position:absolute; right:10px; top:10px; z-index:4;
  transform:scale(var(--cb-iz,1)); transform-origin:100% 0;
  width:34px; height:34px; border-radius:9px; cursor:pointer;
  background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.22);
  color:#4a453c;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
}
.cb-cell-cmp:hover{ background:#fff; color:#111; }
.cb-cell-cmp.co{ background:var(--green); border-color:transparent; color:#fff; }
.cb-cell-cmp .cb-ic{ width:19px; height:19px; }

/* ---------- Bảng đặt quyền ---------- */
.cb-x.cb-chiase{
  width:auto; padding:0 11px; gap:5px; font-size:11.5px; font-weight:700;
  display:flex; align-items:center; flex-shrink:0;
}
.cb-x.cb-chiase .cb-ic{ width:14px; height:14px; }
/* Cao hơn mọi lớp phủ của bảng comment, vẫn thấp hơn toast 100010
   (Convention #67 + #76). */
.cb-quyen-lop{
  position:fixed; inset:0; z-index:100006; background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
  padding:calc(env(safe-area-inset-top, 0px) + 24px) 16px 24px; box-sizing:border-box;
}
.cb-quyen-hop{
  width:min(520px, 100%); max-height:100%; display:flex; flex-direction:column;
  background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.5); overflow:hidden;
}
.cb-quyen-hd{
  display:flex; align-items:center; gap:8px; padding:11px 14px; flex-shrink:0;
  font-size:13.5px; font-weight:700; border-bottom:1px solid var(--border);
}
.cb-quyen-hd .cb-ic{ width:16px; height:16px; }
.cb-quyen-hd button{
  margin-left:auto; width:28px; height:28px; min-height:0; padding:0; cursor:pointer;
  border:0; border-radius:7px; background:var(--bg3); color:var(--text2); font-size:13px;
}
.cb-quyen-hd button:hover{ background:var(--red); color:#fff; }
.cb-quyen-goi{
  padding:9px 14px; font-size:11.5px; line-height:1.55; color:var(--text2);
  background:rgba(59,130,246,.10); border-bottom:1px solid var(--border); flex-shrink:0;
}
.cb-cs-link{
  display:flex; gap:6px; padding:11px 14px; flex-shrink:0;
  border-bottom:1px solid var(--border);
}
.cb-cs-link.phu{ border-bottom:0; padding-top:0; }
.cb-cs-link input{
  flex:1; min-width:0; min-height:0; padding:7px 9px; border-radius:8px;
  font-size:11.5px; font-family:inherit;
  background:var(--bg3); border:1px solid var(--border); color:var(--text2);
}
.cb-cs-cop{
  flex-shrink:0; min-height:0; padding:0 12px; border-radius:8px; cursor:pointer;
  font-size:11.5px; font-weight:700; background:var(--blue); color:#fff; border:0;
}
.cb-cs-cop:hover{ filter:brightness(1.12); }
.cb-cs-nhan{
  padding:10px 14px 3px; font-size:10px; font-weight:800; letter-spacing:.5px;
  color:var(--text3); flex-shrink:0;
}
.cb-cs-hang{
  display:flex; align-items:center; gap:10px; padding:9px 14px; flex-shrink:0;
}
.cb-cs-hang.phu{ padding-top:4px; padding-bottom:7px; }
.cb-cs-ic{ font-size:19px; line-height:1; flex-shrink:0; width:24px; text-align:center; }
.cb-cs-t{ flex:1; min-width:0; }
.cb-cs-t b{ display:block; font-size:12.5px; }
.cb-cs-t i{ display:block; font-size:10.5px; font-style:normal; color:var(--text3); margin-top:1px; }
.cb-cs-chon{
  flex-shrink:0; width:148px; min-height:0; padding:6px 8px; border-radius:8px; cursor:pointer;
  font-size:11.5px; font-weight:600;
  background:var(--bg3); border:1px solid var(--border); color:var(--text2);
}
.cb-cs-chon:disabled{ cursor:default; opacity:.65; }
.cb-cs-nut{
  flex-shrink:0; min-height:0; padding:6px 11px; border-radius:8px; cursor:pointer;
  font-size:11.5px; font-weight:700;
  background:var(--bg3); border:1px solid var(--border); color:var(--text2);
}
.cb-cs-nut:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }
.cb-cs-khach{ border-top:1px solid var(--border); flex-shrink:0; }
.cb-cs-canh{
  margin:0 14px 10px; padding:7px 9px; border-radius:8px;
  font-size:10.5px; line-height:1.55; color:var(--amber);
  background:rgba(245,158,11,.14); border:1px solid rgba(245,158,11,.4);
}
.cb-quyen-ct{
  margin:0; padding:9px 14px 12px 30px; flex-shrink:0;
  font-size:10.5px; line-height:1.7; color:var(--text3);
  border-top:1px solid var(--border);
}
@media (max-width:768px){
  .cb-quyen-lop{ padding:calc(env(safe-area-inset-top, 47px) + 16px) 10px 10px; }
  .cb-x.cb-chiase span{ display:none; }
}

/* ---------- Ai đang cùng xem: chấm chuột + dãy tên ---------- */
/* Lớp chấm mang CÙNG phép biến đổi với mặt phẳng nên toạ độ mặt phẳng dùng
   thẳng được. Không bắt chuột — nếu bắt thì che mất thao tác vẽ. */
.cb-chuot{
  position:absolute; left:0; top:0; width:0; height:0;
  transform-origin:0 0; pointer-events:none; z-index:6;
}
.cb-chuot-1{
  position:absolute; display:flex; align-items:flex-start; gap:2px;
  transform:scale(var(--cb-iz,1)); transform-origin:0 0;
  transition:left .09s linear, top .09s linear;
  will-change:left, top;
}
.cb-chuot-1 svg{ flex-shrink:0; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.cb-chuot-ten{
  margin-top:12px; padding:2px 7px; border-radius:10px; white-space:nowrap;
  font-size:11px; font-weight:700; color:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.cb-ai-dang-xem{ display:flex; align-items:center; gap:3px; margin-left:auto; flex-shrink:0; }
.cb-ai-chip{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; line-height:1; font-weight:800; color:#fff;
  border:2px solid var(--bg2); margin-left:-6px; overflow:hidden;
}
.cb-ai-chip:first-child{ margin-left:0; }
.cb-ai-chip.them{ background:var(--bg4); color:var(--text2); }
.cb-ai-so{ font-size:10.5px; color:var(--text3); margin-left:6px; white-space:nowrap; }
@media (max-width:768px){
  .cb-ai-so{ display:none; }
  .cb-ai-chip{ width:22px; height:22px; font-size:12px; }
}

/* ---------- Menu "…" gom các thao tác của comment ---------- */
/* Menu "..." gan thang vao than trang (khong nam trong danh sach comment,
   vi danh sach co overflow-y:auto se CAT mat no). */
.cb-cmt-btn.cham{ font-size:14px; line-height:1; padding:3px 9px; letter-spacing:1px; }
.cb-cmt-btn.cham.on{ background:var(--blue); color:#fff; border-color:var(--blue); }
.cb-cmt-menu{
  position:fixed; z-index:100007;
  min-width:150px; padding:4px; border-radius:9px;
  background:var(--bg2); border:1px solid var(--border);
  box-shadow:0 8px 22px rgba(0,0,0,.35);
  display:flex; flex-direction:column; gap:1px;
}
.cb-cmt-menu .cb-cmt-btn, .cb-cmt-mi{
  display:flex; align-items:center; gap:7px; width:100%; min-height:0;
  padding:6px 9px; border-radius:6px; cursor:pointer; text-align:left;
  font-size:11.5px; font-weight:600; line-height:1.2;
  background:transparent; border:0; color:var(--text2);
}
.cb-cmt-menu .cb-cmt-btn:hover, .cb-cmt-mi:hover{ background:var(--bg3); color:var(--text); }
.cb-cmt-menu .cb-cmt-btn.del:hover{ background:var(--red); color:#fff; }
.cb-cmt-menu .cb-cmt-btn.mo-lai{ background:transparent; color:var(--amber); }
.cb-cmt-menu .cb-cmt-btn.mo-lai:hover{ background:var(--amber); color:#fff; }

/* ---------- Mạch trả lời dưới mỗi comment ---------- */
.cb-cmt-btn.mo-lai{ background:var(--amber-bg,rgba(245,158,11,.16)); color:var(--amber); border-color:transparent; }
.cb-cmt-btn.mo-lai:hover{ background:var(--amber); color:#fff; }
.cb-cmt-molai{
  margin-top:5px; font-size:10.5px; font-weight:700; color:var(--amber);
}
.cb-tl-box{
  margin-top:7px; padding:7px 8px; border-radius:8px;
  background:var(--bg3); border:1px solid var(--border);
}
.cb-tl{ padding:5px 0; border-bottom:1px solid var(--border); }
.cb-tl:last-of-type{ border-bottom:0; }
.cb-tl-top{ display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--text3); }
.cb-tl-top b{ color:var(--text2); font-size:11px; }
.cb-tl-nhan{ font-weight:800; }
.cb-tl.mo-lai .cb-tl-nhan{ color:var(--amber); }
.cb-tl.da-sua .cb-tl-nhan{ color:var(--green); }
.cb-tl-gio{ margin-left:auto; flex-shrink:0; }
.cb-tl-noi{ font-size:11.5px; line-height:1.5; color:var(--text); margin-top:3px; white-space:pre-wrap; }
.cb-tl-anhs{ display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.cb-tl-anh{
  width:66px; height:66px; object-fit:cover; border-radius:6px; cursor:zoom-in;
  border:1px solid var(--border);
}
.cb-tl-anh:hover{ border-color:var(--blue); }
.cb-tl-soan{ margin-top:6px; }
.cb-tl-hang{
  display:flex; align-items:flex-end; gap:2px;
  padding:2px 3px 2px 9px; border-radius:16px;
  background:var(--bg2); border:1px solid var(--border);
}
.cb-tl-hang:focus-within{ border-color:var(--blue); }
.cb-tl-soan.mo .cb-tl-hang{ border-radius:10px; border-color:var(--blue); }
.cb-tl-soan textarea{
  flex:1; min-width:0; box-sizing:border-box; resize:none; overflow:hidden;
  height:30px; min-height:0; max-height:120px;
  padding:7px 0 6px; border:0; background:transparent; outline:none;
  font:inherit; font-size:11.5px; line-height:1.4; color:var(--text);
}
.cb-tl-ic, .cb-tl-gui{
  flex-shrink:0; width:28px; height:28px; min-height:0; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; cursor:pointer;
  background:transparent; color:var(--text3);
}
.cb-tl-ic:hover{ background:var(--bg3); color:var(--blue); }
.cb-tl-gui{ color:var(--blue); }
.cb-tl-gui:hover{ background:var(--blue); color:#fff; }
.cb-tl-ic .cb-ic, .cb-tl-gui .cb-ic{ width:16px; height:16px; }
/* Lời trả lời xếp thành comment con, mỗi lời ghi rõ tên người viết. */
.cb-tl-box{ margin-top:6px; }
.cb-tl-x{
  width:18px; height:18px; min-height:0; padding:0; flex-shrink:0;
  border:0; border-radius:50%; cursor:pointer; font-size:10px; line-height:1;
  background:transparent; color:var(--text3);
}
.cb-tl-x:hover{ background:var(--red); color:#fff; }
.cb-tl-tams{ display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.cb-tl-tam{ position:relative; display:inline-flex; }
.cb-tl-tam img{ width:52px; height:52px; object-fit:cover; border-radius:6px; border:1px solid var(--border); }
.cb-tl-tam button{
  position:absolute; right:-5px; top:-5px; width:18px; height:18px; min-height:0;
  padding:0; border-radius:50%; cursor:pointer; font-size:10px; line-height:1;
  background:var(--red); color:#fff; border:0;
}

/* Xem ảnh tham khảo to. Cao hơn mọi lớp phủ khác của bảng comment nhưng vẫn
   thấp hơn toast 100010 (Convention #67 + #76). */
.cb-anh-to{
  position:fixed; inset:0; z-index:100005; cursor:zoom-out;
  background:rgba(0,0,0,.86);
  display:flex; align-items:center; justify-content:center;
  padding:calc(env(safe-area-inset-top, 0px) + 24px) 24px 24px;
  box-sizing:border-box;
}
.cb-anh-to img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; }
.cb-anh-to-x{
  position:absolute; right:16px; top:calc(env(safe-area-inset-top, 0px) + 16px);
  width:36px; height:36px; min-height:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.92); color:#111; border:0; font-size:15px; font-weight:800;
}
@media (max-width:768px){
  .cb-anh-to{ padding:calc(env(safe-area-inset-top, 47px) + 20px) 12px 12px; }
  .cb-anh-to-x{ top:calc(env(safe-area-inset-top, 47px) + 10px); }
}

/* ---------- Dải chuyển bản ảnh trên ô ----------
   Dùng cùng mẹo --cb-iz như nút so sánh: nhân ngược mức phóng để trên màn lúc
   nào cũng to bằng nhau, thu bảng nhỏ lại không bị bé như hạt bụi. */
.cb-ban-bar{
  position:absolute; left:10px; top:10px; z-index:4; display:flex; gap:4px;
  transform:scale(var(--cb-iz,1)); transform-origin:0 0;
}
.cb-ban-chip{
  min-height:0; height:26px; padding:0 10px; border-radius:8px; cursor:pointer;
  font-size:12px; font-weight:800; line-height:1;
  background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.22); color:#4a453c;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
}
.cb-ban-chip:hover{ background:#fff; color:#111; }
.cb-ban-chip.on{ background:var(--blue); border-color:transparent; color:#fff; }

/* ---------- Dải chuyển bản trong cột trái ---------- */
.cb-ban-row{ display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-top:7px; }
.cb-ban-lb{ font-size:10.5px; font-weight:700; color:var(--text3); margin-right:2px; }
.cb-ban-b{
  min-height:0; padding:4px 9px; border-radius:7px; cursor:pointer;
  font-size:11px; font-weight:700;
  background:var(--bg3); border:1px solid var(--border); color:var(--text2);
}
.cb-ban-b:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }
.cb-ban-b.on{ background:var(--blue); color:#fff; border-color:var(--blue); }

/* ---------- Dòng ngăn nhóm trong danh sách comment ---------- */
.cb-cmt-nhom{
  margin:10px 0 5px; padding:4px 8px; border-radius:6px; cursor:pointer;
  font-size:10.5px; font-weight:800; letter-spacing:.3px; text-transform:uppercase;
  color:var(--text3); background:var(--bg3); border:1px solid var(--border);
}
.cb-cmt-nhom:first-child{ margin-top:0; }
.cb-cmt-nhom:hover{ color:var(--text); }
.cb-cmt-nhom.on{ color:var(--blue); border-color:var(--blue); }

/* ---------- Hai ô chọn bản của bảng so sánh ---------- */
.cb-cmp-chon{
  display:flex; align-items:center; gap:5px; flex-shrink:0;
  font-size:10.5px; color:var(--text3);
}
.cb-cmp-s + .cb-cmp-btn{ margin-left:0; }
.cb-cmp-ban{
  min-height:0; height:28px; padding:0 6px; border-radius:7px; cursor:pointer;
  font-size:11px; font-weight:700; max-width:104px;
  background:var(--bg3); border:1px solid var(--border); color:var(--text2);
}

/* ---------- Nút trong bảng comment ---------- */
.cb-side-acts button.fix{ background:var(--green-bg); color:var(--green); border-color:transparent; }
.cb-side-acts button.fix:hover{ background:var(--green); color:#fff; }
.cb-side-acts button.on{ background:var(--blue); color:#fff; border-color:var(--blue); }

/* ============================================================
   BẢNG SO SÁNH TRƯỚC / SAU — cột thứ hai, cạnh bảng comment
   ============================================================ */
/* Thanh kéo đổi bề rộng. Rộng 6px cho dễ trúng, tô sáng khi rê vào. */
.cb-grip{
  flex:0 0 6px; align-self:stretch; cursor:col-resize; position:relative;
  background:transparent; touch-action:none;
}
.cb-grip::after{
  content:''; position:absolute; left:2px; top:0; bottom:0; width:2px;
  background:transparent; transition:background .12s ease;
}
.cb-grip:hover::after, .cb-grip.keo::after{ background:var(--blue); }
.cb-cmp{ width:0; overflow:hidden; flex-shrink:0; }
.cb-cmp.open{
  width:420px; border-left:1px solid var(--border); background:var(--bg2);
  display:flex; flex-direction:column; min-height:0;
}
.cb-screen.cmp-full .cb-cmp.open{ width:auto; flex:1; }
.cb-screen.cmp-full .cb-canvas{ display:none; }
.cb-screen.cmp-full .cb-side{ width:250px; }

.cb-cmp-head{
  display:flex; align-items:center; gap:8px; padding:9px 12px;
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.cb-cmp-t{ font-size:13px; font-weight:700; min-width:0; }
/* Cùng hàng với ô chọn bản, cắt bớt bằng dấu ba chấm khi hẹp — KHÔNG xuống
   dòng, xuống dòng là ăn mất một hàng chiều cao (chủ dự án chốt 2026-08-21). */
.cb-cmp-s{
  flex:1 1 auto; min-width:0; font-size:10.5px; font-weight:500; color:var(--text3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cb-cmp-btn{
  margin-left:auto; background:var(--bg3); border:1px solid var(--border); color:var(--text2);
  width:30px; height:30px; border-radius:8px; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.cb-cmp-btn + .cb-cmp-btn{ margin-left:0; }
.cb-cmp-btn:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }

.cb-cmp-view{
  flex:1; min-height:0; position:relative; overflow:hidden;
  background:#2a2723; cursor:grab; touch-action:none;
}
.cb-cmp-stage{
  position:absolute; inset:0; transform-origin:50% 50%;
  display:flex; align-items:center; justify-content:center;
}
.cb-cmp-img{
  position:absolute; inset:0; margin:auto;
  max-width:100%; max-height:100%; object-fit:contain;
  user-select:none; -webkit-user-drag:none;
}
/* Ảnh đã sửa nằm đè lên, bị cắt theo thanh trượt */
.cb-cmp-clip{ position:absolute; inset:0; overflow:hidden; clip-path:inset(0 50% 0 0); }
/* Lớp comment + nét vẽ trong bảng so sánh. Vị trí/kích thước do JS đặt cho
   trùng khít hộp ảnh thật (ảnh có viền trống vì object-fit:contain). */
.cb-cmp-marks{ position:absolute; z-index:3; pointer-events:none; }
.cb-cmp-marks > svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.cb-cmp-pin{
  position:absolute; transform:translate(-50%,-50%); pointer-events:auto;
  min-width:22px; height:22px; padding:0 5px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:#fff; cursor:help;
  border:2px solid rgba(255,255,255,.9); box-shadow:0 1px 5px rgba(0,0,0,.45);
}
.cb-cmp-btn.on{ background:var(--blue); color:#fff; border-color:var(--blue); }
.cb-cmp-btn.canh{ display:none; }
.cb-cmp-warn{
  flex-shrink:0; margin:0; padding:7px 12px; font-size:11.5px; line-height:1.5;
  background:rgba(245,158,11,.16); border-top:1px solid rgba(245,158,11,.45); color:var(--amber);
}
.cb-cmp-warn b{ color:var(--amber); }
.cb-cmp-bar{
  position:absolute; top:0; bottom:0; width:3px; background:#fff; left:50%;
  margin-left:-1.5px; cursor:ew-resize; z-index:4; box-shadow:0 0 8px rgba(0,0,0,.5);
}
.cb-cmp-bar i{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:28px; height:28px; border-radius:50%; background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.45);
}
.cb-cmp-bar i::before{
  content:'‹ ›'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; color:#111; letter-spacing:1px;
}
.cb-cmp-tag{
  position:absolute; top:10px; z-index:5; pointer-events:none;
  background:rgba(0,0,0,.6); color:#fff; font-size:10.5px; font-weight:700;
  border-radius:6px; padding:3px 9px;
}
.cb-cmp-tag.left{ left:10px; }
.cb-cmp-tag.right{ right:10px; }

.cb-cmp-foot{
  display:flex; align-items:center; gap:6px; padding:8px 10px;
  border-top:1px solid var(--border); flex-shrink:0; flex-wrap:wrap;
}
.cb-cmp-foot button{
  background:var(--bg3); border:1px solid var(--border); color:var(--text2);
  border-radius:7px; padding:4px 10px; font-size:11px; cursor:pointer;
}
.cb-cmp-foot button:hover{ color:var(--text); }
.cb-cmp-foot span{ font-size:11px; color:var(--text3); }
.cb-cmp-hint{ flex-basis:100%; font-size:10.5px; line-height:1.45; }

@media (max-width:768px){
  .cb-screen{ --cb-tool:50px; --cb-rail:64px; }
  .cb-row-n{ font-size:10.5px; padding:0 3px; }
  .cb-cmp.open{ width:auto; max-height:45%; border-right:none; border-bottom:1px solid var(--border); }
}


/* ============================================================
   ===== AI SOI COMMENT (js/78) =====
   Màu lấy từ biến chung nên tự đúng ở cả nền tối lẫn nền sáng
   (Convention #74 — đừng viết mã màu cứng ở đây).
   ============================================================ */

/* ---------- Khai khoá: MỖI NHÀ MỘT THẺ xếp dọc ----------
   KHÔNG dùng bảng nhiều cột ở đây: khung Cài đặt chỉ ~610px, bảng rộng sẽ đẩy
   cột "Khoá API" ra ngoài tầm nhìn và người dùng không tìm thấy ô nhập
   (lỗi thật 2026-08-20). Thẻ dọc thì màn nào cũng vừa. */
.ai-the{
  border:1px solid var(--border); border-radius:11px; background:var(--bg2);
  padding:11px 13px 12px; margin-top:10px;
}
.ai-the-hd{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.ai-the-hd b{ font-size:13px; }
.ai-the-hd .ai-mid{ margin:0; }
.ai-tt{ margin-left:auto; font-size:11px; white-space:nowrap; }
.ai-lb2{
  display:block; margin:9px 0 3px; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; color:var(--text3);
}
.ai-nho2{ text-transform:none; letter-spacing:0; font-weight:400; color:var(--text3); }
/* Nút nhỏ nằm ngay trên nhãn (vd "Lấy danh sách model") */
.ai-nut-nho{
  float:right; text-transform:none; letter-spacing:0; font-weight:600; font-size:10.5px;
  background:var(--bg3); border:1px solid var(--border); color:var(--text2);
  border-radius:6px; padding:2px 8px; min-height:0; cursor:pointer;
}
.ai-nut-nho:hover:not(:disabled){ color:var(--text); border-color:var(--blue); }
.ai-nut-nho:disabled{ opacity:.45; cursor:default; }
.ai-the-ft{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:11px; padding-top:10px; border-top:1px solid var(--border);
}
.ai-the-ft .ai-nho{ margin:0 auto 0 0; }
.ai-the-ft .btn{ font-size:11px; padding:5px 11px; min-height:0; margin:0; }

/* ---------- Bảng gợi ý model ---------- */
.ai-bang-wrap{ overflow-x:auto; margin-top:10px; }
.ai-tbl{ width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px; }
.ai-tbl th{
  text-align:left; padding:7px 9px; font-size:11px; font-weight:700; letter-spacing:.02em;
  color:var(--text3); text-transform:uppercase; white-space:nowrap;
  border-bottom:1px solid var(--border); background:var(--bg2);
}
.ai-tbl td{ padding:8px 9px; border-bottom:1px solid var(--border); vertical-align:top; }
.ai-tbl tr:last-child td{ border-bottom:none; }
/* Lời khuyên nằm dưới tên model — CHỈ hiện khi khung hẹp (cột riêng bị ẩn). */
.ai-y-hep{ display:none; font-size:11px; color:var(--text2); line-height:1.45; margin-top:3px; }
.ai-mid{ font-size:10.5px; color:var(--text3); font-family:ui-monospace,Menlo,Consolas,monospace; margin-top:2px; }
.ai-sao{ color:var(--amber); letter-spacing:1px; white-space:nowrap; }
.ai-gia{ white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--text2); }
.ai-y{ color:var(--text2); line-height:1.45; }
.ai-in{ width:100%; box-sizing:border-box; font-size:12px; padding:5px 7px; min-height:0; }
.ai-in-so{ text-align:right; font-variant-numeric:tabular-nums; max-width:90px; }
.ai-mdl-khac{ margin-top:5px; }
.ai-nho{ font-size:10.5px; color:var(--text3); margin-top:3px; }
.ai-co{ color:var(--green); font-weight:700; }
.ai-chua,.ai-het{ color:var(--red); font-weight:700; }
.ai-dung{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.ai-nut{ white-space:nowrap; }
.ai-nut .btn{ margin:0 0 4px 4px; font-size:11px; padding:4px 9px; min-height:0; }
.ai-dang-tai{ padding:14px; color:var(--text3); font-size:12.5px; }
.ai-thang{ margin-top:9px; font-size:11px; color:var(--text3); }
.ai-warn{
  margin:10px 0; padding:9px 12px; border-radius:9px; font-size:12px; line-height:1.55;
  background:rgba(245,158,11,.14); border:1px solid rgba(245,158,11,.42); color:var(--text2);
}

/* ---------- Khối kết quả trong bảng so sánh ---------- */
/* ⚠️ Khối này nằm trong #ai-box-wrap — mà thẻ đó TRƯỚC ĐÂY KHÔNG CÓ KIỂU NÀO.
   Hậu quả: `max-height:44%` tính theo thẻ bọc cao "auto" nên KHÔNG giải ra
   được, coi như bỏ; khối dài ra hết cỡ rồi bị #cb-cmp (overflow:hidden) CẮT
   CỤT ở đáy — đọc dở dang mà cuộn cũng không được (chủ dự án báo 2026-08-20).
   Nay thẻ bọc là một ô flex có chặn chiều cao, khối bên trong tự cuộn. */
#ai-box-wrap{
  flex:0 1 auto; min-height:0; display:flex; flex-direction:column;
  max-height:52%;
}
.cb-screen.cmp-full #ai-box-wrap{ max-height:62%; }
.ai-box{
  flex:1 1 auto; min-height:0; max-height:none;
  border-top:1px solid var(--border); padding:10px 12px 12px;
  overflow-y:auto; background:var(--bg2);
}
.ai-box-hd{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.ai-box-t{ font-size:12.5px; font-weight:700; }
.ai-btn-soi{
  margin-left:auto; background:var(--blue); color:#fff; border:none; border-radius:7px;
  padding:5px 11px; font-size:11.5px; font-weight:700; cursor:pointer; min-height:0;
}
.ai-btn-soi:hover{ filter:brightness(1.12); }
.ai-btn-thu{
  margin-left:auto; background:var(--bg3); color:var(--text2);
  border:1px solid var(--border); border-radius:7px;
  padding:5px 10px; font-size:11.5px; font-weight:700; cursor:pointer; min-height:0;
}
.ai-btn-soi + .ai-btn-thu{ margin-left:0; }
.ai-btn-thu:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }
/* Thu gọn rồi thì chỉ còn thanh tiêu đề — trả hết chỗ cho ảnh so sánh. */
.ai-box.thu{ overflow:visible; padding-bottom:10px; }
.ai-box.thu .ai-box-hd{ margin-bottom:0; }
.ai-btn-soi:disabled{ opacity:.6; cursor:default; }
.ai-trong{ font-size:11.5px; color:var(--text3); line-height:1.55; padding:4px 0; }
.ai-meta{ font-size:10.5px; color:var(--text3); margin-bottom:6px; }
.ai-tomtat{
  font-size:12px; line-height:1.55; color:var(--text); margin-bottom:9px;
  padding:7px 9px; border-radius:8px; background:var(--bg3);
}
.ai-nhom{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--text3); margin:9px 0 5px;
}
.ai-ds{ display:flex; flex-direction:column; gap:4px; }
.ai-row{
  display:flex; gap:7px; align-items:flex-start; font-size:11.5px; line-height:1.5;
  padding:6px 8px; border-radius:7px; background:var(--bg3); border-left:3px solid var(--text3);
}
.ai-row[onclick]{ cursor:pointer; }
.ai-row[onclick]:hover{ filter:brightness(1.15); }
.ai-row.ok{ border-left-color:var(--green); }
.ai-row.xau{ border-left-color:var(--red); }
.ai-row.ngo{ border-left-color:var(--amber); }
.ai-row.muc-nang{ border-left-color:var(--red); }
.ai-row.muc-vua{ border-left-color:var(--amber); }
.ai-row.muc-nhe{ border-left-color:var(--text3); }
.ai-so{
  flex-shrink:0; width:17px; height:17px; border-radius:50%; background:var(--bg);
  color:var(--text2); font-size:10px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.ai-kl,.ai-muc{ flex-shrink:0; font-weight:700; white-space:nowrap; }
.ai-row.ok  .ai-kl{ color:var(--green); }
.ai-row.xau .ai-kl{ color:var(--red); }
.ai-row.ngo .ai-kl{ color:var(--amber); }
.ai-row.muc-nang .ai-muc{ color:var(--red); }
.ai-row.muc-vua  .ai-muc{ color:var(--amber); }
.ai-vs{ color:var(--text2); min-width:0; }
.ai-cl{ display:flex; gap:9px; align-items:baseline; font-size:11.5px; line-height:1.55; color:var(--text2); }
.ai-diem{ font-size:15px; color:var(--blue); white-space:nowrap; }
.ai-canh{ margin-top:9px; font-size:10.5px; color:var(--text3); line-height:1.5; font-style:italic; }

/* ---------- Trao đổi với AI ---------- */
.ai-mot{ display:flex; flex-direction:column; gap:0; }
.ai-row.co-nguoi{ opacity:.62; }        /* người đã chốt thì lời AI mờ đi */
.ai-nguoi-chot{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:3px; padding:5px 9px; border-radius:7px; font-size:11.5px; font-weight:700;
}
.ai-nguoi-chot.ok { background:rgba(34,197,94,.16); border:1px solid rgba(34,197,94,.45); color:var(--green); }
.ai-nguoi-chot.xau{ background:rgba(239,68,68,.14); border:1px solid rgba(239,68,68,.42); color:var(--red); }
.ai-nguoi-chot .ai-nho{ font-weight:400; }

.ai-thread-bar{ display:flex; gap:5px; flex-wrap:wrap; margin:4px 0 2px; }
.ai-thread-nut{
  background:var(--bg3); border:1px solid var(--border); color:var(--text2);
  border-radius:6px; padding:3px 8px; font-size:10.5px; font-weight:600;
  cursor:pointer; min-height:0;
}
.ai-thread-nut:hover{ color:var(--text); border-color:var(--blue); }
.ai-thread-nut.ok{ color:var(--green); border-color:rgba(34,197,94,.45); }

.ai-thread{
  margin:2px 0 8px; padding:8px 9px; border-radius:8px;
  background:var(--bg); border:1px solid var(--border);
  display:flex; flex-direction:column; gap:6px;
}
.ai-thread-trong{ font-size:11px; color:var(--text3); line-height:1.5; }
.ai-msg{ font-size:11.5px; line-height:1.55; }
.ai-msg-ten{ font-size:10.5px; font-weight:700; color:var(--text3); margin-bottom:2px; }
.ai-msg-body{
  padding:6px 9px; border-radius:7px; background:var(--bg3); color:var(--text2);
  white-space:normal; overflow-wrap:anywhere;
}
.ai-msg.ai .ai-msg-body{ border-left:3px solid var(--blue); }
.ai-msg.nguoi .ai-msg-body{ border-left:3px solid var(--green); }
.ai-msg.chot{ font-size:11px; color:var(--green); }
.ai-thread-soan{ display:flex; gap:6px; align-items:flex-end; margin-top:2px; }
.ai-thread-soan textarea{
  flex:1; min-width:0; box-sizing:border-box; resize:vertical;
  background:var(--bg2); color:var(--text); border:1px solid var(--border);
  border-radius:7px; padding:6px 8px; font-size:11.5px; line-height:1.5; font-family:inherit;
}
.ai-thread-soan textarea:focus{ outline:none; border-color:var(--blue); }
.ai-thread-soan textarea:disabled{ opacity:.55; }
.ai-thread-soan .ai-btn-soi{ margin-left:0; flex-shrink:0; }
.ai-thread-canh{ font-size:10.5px; color:var(--text3); line-height:1.5; }

/* ---------- Hộp chọn model ---------- */
/* Mở TỪ TRONG màn hình bảng comment (z-index 99000) nên phải cao hơn nó,
   và vẫn thấp hơn toast 100010 (Convention #67 + #76). */
.ai-chon-overlay{
  position:fixed; inset:0; z-index:100000;
  background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center;
  padding:16px; box-sizing:border-box;
}
.ai-chon{
  width:min(420px,100%); background:var(--bg); color:var(--text);
  border:1px solid var(--border); border-radius:14px; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.ai-chon-hd{ padding:12px 15px; font-size:13.5px; font-weight:700; border-bottom:1px solid var(--border); }
.ai-chon-bd{ padding:13px 15px; display:flex; flex-direction:column; gap:5px; }
.ai-lb{ font-size:11px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.03em; margin-top:5px; }
.ai-chon-y{ font-size:11px; color:var(--text3); line-height:1.5; margin-top:4px; min-height:16px; }
.ai-chon-canh{
  margin-top:11px; padding:8px 10px; border-radius:8px; font-size:11px; line-height:1.55;
  background:rgba(245,158,11,.14); border:1px solid rgba(245,158,11,.42); color:var(--text2);
}
.ai-chon-ft{
  padding:11px 15px; display:flex; gap:8px; justify-content:flex-end;
  border-top:1px solid var(--border); background:var(--bg2);
}

/* Khung Cài đặt hẹp (hoặc điện thoại): giấu 2 cột ít quan trọng, đưa lời khuyên
   xuống dưới tên model. Nhờ vậy bảng gợi ý KHÔNG phải kéo ngang. */
@media (max-width:900px){
  .ai-an-hep{ display:none; }
  .ai-y-hep{ display:block; }
}
@media (max-width:768px){
  .ai-box{ max-height:50%; }
  .ai-tbl{ font-size:11.5px; }
  .ai-the-ft{ gap:5px; }
  .ai-the-ft .ai-nho{ flex-basis:100%; margin-bottom:4px; }
}

/* ============================================================
   TÁCH NỀN ẢNH (js/80)
   ============================================================ */
.cb-hint-nut{
  min-height:0; margin-left:8px; padding:3px 10px; border-radius:7px; cursor:pointer;
  font:inherit; font-size:11px; font-weight:700;
  background:var(--blue); color:#fff; border:0;
}
.cb-hint-nut:hover{ filter:brightness(1.12); }
/* Nổi trên bảng comment (99000) và trên mọi lớp phủ của nó, vẫn thấp hơn
   toast 100010 (Convention #67 + #76). */
.tn-lop{
  position:fixed; inset:0; z-index:100008; background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
  padding:calc(env(safe-area-inset-top, 0px) + 20px) 14px 20px; box-sizing:border-box;
}
.tn-hop{
  width:min(460px, 100%); max-height:100%; display:flex; flex-direction:column;
  background:var(--bg2); border:1px solid var(--border); border-radius:13px;
  box-shadow:0 18px 50px rgba(0,0,0,.5); overflow:hidden;
}
.tn-hd{
  display:flex; align-items:center; gap:8px; padding:12px 14px; flex-shrink:0;
  font-size:14px; font-weight:700; border-bottom:1px solid var(--border);
}
.tn-hd button{
  margin-left:auto; width:28px; height:28px; min-height:0; padding:0; cursor:pointer;
  border:0; border-radius:7px; background:var(--bg3); color:var(--text2); font-size:13px;
}
.tn-hd button:hover{ background:var(--red); color:#fff; }
.tn-than{ flex:1; min-height:0; overflow-y:auto; padding:12px 14px; }
.tn-chon{
  display:block; width:100%; text-align:left; min-height:0; cursor:pointer;
  margin-bottom:9px; padding:11px 13px; border-radius:10px;
  background:var(--bg3); border:1px solid var(--border); color:var(--text);
  font:inherit;
}
.tn-chon:hover{ border-color:var(--blue); background:var(--bg4); }
.tn-chon b{ display:block; font-size:13px; margin-bottom:3px; }
.tn-chon i{ display:block; font-style:normal; font-size:11px; line-height:1.55; color:var(--text3); }
.tn-chon i b{ display:inline; font-size:11px; color:var(--text2); }
.tn-nguong{
  display:flex; align-items:center; gap:9px; margin-top:12px;
  font-size:11px; font-weight:700; color:var(--text2);
}
.tn-nguong input{ flex:1; min-width:0; }
.tn-nguong span{ width:24px; text-align:right; font-variant-numeric:tabular-nums; }
.tn-goi{ margin-top:7px; font-size:10.5px; line-height:1.6; color:var(--text3); }
@media (max-width:768px){
  .tn-lop{ padding:calc(env(safe-area-inset-top, 47px) + 16px) 10px 10px; }
}


/* ============================================================
   DẢI "TỔNG HỢP INFO" + DẢI CHIP VÒNG TRỐNG + THẺ NOTE
   ------------------------------------------------------------
   Dải info nằm TRÊN vòng đầu tiên, rộng đúng từ mép thẻ đầu tới mép thẻ cuối,
   KHÔNG chia ô. Khung của nó chỉ gồm hai vạch dọc hai bên; vạch ngang giới hạn
   chiều cao do .cb-rowline lo (chủ dự án chốt 2026-08-22).
   ============================================================ */
.cb-infobox{
  background:rgba(255,255,255,.34);
  border-left:2px solid var(--cb-sep);
  border-right:2px solid var(--cb-sep);
}

/* Dải chip ở đáy lưới: vòng đã có người tới nhưng chưa có sản phẩm nào.
   ⚠️ Không có dải này thì dự án mới TẮC HẲN — không hàng nào ⇒ không ô nào ⇒
   không có nút "＋ Tải ảnh" nào để bấm. */
.cb-chipvong{
  position:absolute; left:0; display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; padding:0 26px; box-sizing:border-box;
}
.cb-chipvong-nhan{
  font-size:26px; font-weight:800; color:var(--cb-cink2); white-space:nowrap;
}
.cb-chipvong-nut{
  min-height:0; height:56px; padding:0 22px; border-radius:12px; cursor:pointer;
  font:inherit; font-size:26px; font-weight:800; line-height:1;
  background:rgba(255,255,255,.9); border:2px dashed var(--cb-sep); color:#4a453c;
}
.cb-chipvong-nut:hover{ background:#fff; border-style:solid; color:#111; }

/* ---------- Thẻ note ----------
   Chữ nằm trong <foreignObject> để tự XUỐNG DÒNG — <text> của SVG không tự
   xuống dòng được. Cỡ chữ do JS tính (xem _cbNoteCoChu), ở đây chỉ lo canh giữa
   và ngắt từ. */
.cb-note-chu{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  text-align:center; line-height:1.25; font-weight:700; overflow:hidden;
  font-family:inherit; white-space:pre-wrap; overflow-wrap:anywhere;
}
/* Thẻ ĐANG SỬA TẠI CHỖ (máy tính): khối chữ thành khối gõ được.
   ⚠️ Cả lớp .cb-svg để pointer-events:none nên riêng khung này phải bật lại,
      không thì gõ vào đâu cũng không ăn. */
.cb-svg foreignObject.cb-fo-sua{ pointer-events:auto; }
.cb-note-chu.dang-sua{ outline:none; cursor:text; }

/* Hộp soạn thẻ note — lớp phủ RIÊNG, không đi qua openM() (Convention #107). */
/* Nép ĐÁY màn, KHÔNG tấm nền mờ: đang gõ phải nhìn thấy chữ chạy vào thẻ và
   cỡ chữ tự co trên màn chính (chủ dự án chốt 2026-08-24). */
.cb-note-lop{
  position:fixed; left:0; right:0; bottom:0; top:auto; z-index:100000;
  display:flex; align-items:flex-end; justify-content:center;
  padding:0 14px calc(env(safe-area-inset-bottom, 0px) + 14px); box-sizing:border-box;
  /* Lớp ngoài KHÔNG ăn chuột ⇒ vẫn kéo/thu-phóng mặt phẳng được trong lúc gõ. */
  pointer-events:none;
}
.cb-note-hop{
  pointer-events:auto;
  width:min(400px, 100%); display:flex; flex-direction:column;
  background:var(--bg2); border:1px solid var(--border); border-radius:13px;
  box-shadow:0 -10px 40px rgba(0,0,0,.55); overflow:hidden;
}
.cb-note-hd{
  display:flex; align-items:center; gap:8px; padding:11px 13px; flex-shrink:0;
  font-size:13.5px; font-weight:700; border-bottom:1px solid var(--border);
}
.cb-note-hd button{
  margin-left:auto; width:28px; height:28px; min-height:0; padding:0; cursor:pointer;
  border:0; border-radius:7px; background:var(--bg3); color:var(--text2); font-size:13px;
}
.cb-note-hd button:hover{ background:var(--red); color:#fff; }
/* Ô gõ CÓ ĐỊNH DẠNG (contenteditable), không còn là <textarea>: phải chứa được
   chữ đậm / nghiêng / đổi màu từng đoạn. */
.cb-note-in{
  margin:10px 13px 0; padding:9px 11px; box-sizing:border-box;
  border-radius:9px; font:inherit; font-size:13px; line-height:1.5;
  /* Ba dòng là đủ — cao hơn thì lại che mất thẻ note trên màn chính. */
  min-height:64px; max-height:22vh; overflow-y:auto;
  background:var(--bg); border:1px solid var(--border); color:var(--text);
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.cb-note-in:focus{ outline:none; border-color:var(--blue); }
/* Khối gõ rỗng KHÔNG tự có chữ mờ gợi ý như <textarea> — phải tự vẽ. */
.cb-note-in:empty::before{ content:attr(data-trong); color:var(--text3); }

/* Thanh định dạng — CHỈ hiện khi đang quét chọn một vùng chữ. */
.cb-note-dinh{ display:none; }
.cb-note-dinh.mo{
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  margin:10px 13px -2px; padding:6px; border-radius:9px;
  background:var(--bg3); border:1px solid var(--border);
}
.cb-nd-phong,.cb-nd-nang{
  min-height:0; height:28px; padding:0 6px; border-radius:7px; cursor:pointer;
  font:inherit; font-size:11.5px; max-width:104px;
  background:var(--bg2); border:1px solid var(--border); color:var(--text2);
}
.cb-nd-nut{
  width:28px; height:28px; min-height:0; padding:0; cursor:pointer;
  border-radius:7px; font:inherit; font-size:12px; font-weight:800; line-height:1;
  background:var(--bg2); border:1px solid var(--border); color:var(--text2);
}
.cb-nd-nut:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }
.cb-nd-nut i{ font-style:italic; }
.cb-nd-mau{
  width:28px; height:28px; border-radius:7px; cursor:pointer; overflow:hidden;
  border:1px solid var(--border); display:flex;
}
.cb-nd-mau input{ width:150%; height:150%; margin:-25%; border:0; padding:0; cursor:pointer; background:none; }
/* Bốn ô màu nền, đứng luôn trên thanh định dạng (máy tính) — khỏi phải mở
   thêm hộp nào nữa. */
.cb-nd-mau-nen{ font-size:10.5px; font-weight:700; color:var(--text3); margin-left:3px; }
.cb-nd-o{
  width:24px; height:24px; min-height:0; padding:0; cursor:pointer;
  border-radius:6px; border:2px solid transparent;
}
.cb-nd-o:hover{ box-shadow:0 0 0 2px var(--blue); }
/* Thanh định dạng NỔI — bám ngay trên đầu thẻ đang sửa.
   Gắn vào thân trang chứ không vào SVG: nằm trong SVG thì bị khung ô cắt mất
   (Convention #119). z-index trên bảng comment (99000), dưới toast (100010). */
.cb-note-dinh.noi{
  position:fixed; z-index:100004; margin:0;
  box-shadow:0 8px 26px rgba(0,0,0,.42);
}
.cb-note-mau{ display:flex; align-items:center; gap:9px; padding:11px 13px 0; }
.cb-note-mau-nhan{ font-size:10.5px; font-weight:700; color:var(--text3); margin-right:1px; }
.cb-note-o{
  width:32px; height:32px; min-height:0; padding:0; cursor:pointer;
  border-radius:8px; border:2px solid transparent;
}
.cb-note-o.on{ box-shadow:0 0 0 2px var(--blue); }
.cb-note-ft{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px 13px 13px; margin-top:11px; border-top:1px solid var(--border);
}
.cb-note-goi{ flex:1 1 100%; font-size:10.5px; line-height:1.55; color:var(--text3); }
.cb-note-xoa,.cb-note-luu{
  min-height:0; padding:6px 14px; border-radius:8px; cursor:pointer;
  font:inherit; font-size:12px; font-weight:700; border:1px solid var(--border);
}
.cb-note-xoa{ background:transparent; color:var(--red); margin-left:auto; }
.cb-note-xoa:hover{ background:var(--red); color:#fff; border-color:var(--red); }
.cb-note-luu{ background:var(--blue); color:#fff; border-color:var(--blue); }
.cb-note-luu:hover{ filter:brightness(1.12); }

/* ============================================================
   ĐIỆN THOẠI — DỌN LẠI BẢNG COMMENT (chủ dự án chốt 2026-08-21)
   ------------------------------------------------------------
   Khối này CỐ Ý nằm cuối tệp: nó đè lên các khối @media cũ ở trên nhờ thứ tự
   nguồn, khỏi phải đi sửa rải rác rồi bỏ sót (Convention #73).
   Máy tính KHÔNG đụng tới một dòng nào.
   ============================================================ */
@media (max-width:768px){

  /* ---------- 1. Tên app: chỉ còn hình mèo, bỏ chữ ---------- */
  .cb-top-chu{ display:none; }
  .cb-top-title{ gap:0; }

  /* ---------- 2. Bỏ hết các dòng hướng dẫn ---------- */
  .cb-hint-chu{ display:none !important; }
  .cb-cmp-hint{ display:none !important; }
  .cb-psize-note{ display:none !important; }
  /* Thanh nhắc chỉ còn lý do tồn tại khi nó mang NÚT bấm được (✂️ Tách nền).
     Không có nút thì nó chỉ là chữ hướng dẫn → giấu hẳn. */
  .cb-tool-hint:not(:has(.cb-hint-nut)){ display:none !important; }
  .cb-tool-hint{
    right:auto; left:8px; width:auto; max-width:calc(100% - 70px);
    bottom:calc(var(--cb-sheet-h, 84px) + 8px);
  }

  /* ---------- 3. Bỏ hàng "VÒNG …" ---------- */
  /* Tên vòng đã nằm sẵn trong khối tên view ngay dưới ("… · vòng Draft Camera")
     nên hàng riêng này chỉ lặp lại, mà mỗi hàng là một mẩu chỗ quý. */
  .cb-side-round{ display:none; }

  /* ---------- 4. Công cụ của ô: thu về một nút hình ---------- */
  .cb-side-who{ position:relative; padding-right:48px; }
  .cb-side-cc{
    position:absolute; right:9px; top:8px; margin:0;
    width:32px; height:32px; padding:0; justify-content:center;
  }
  .cb-side-cc .cb-cc-mui, .cb-side-cc .cb-cc-chu{ display:none; }
  .cb-side-cc .cb-cc-ic{ display:flex; }

  /* ---------- 5. Bảng chọn nét: vừa khít hình, không rộng thừa ---------- */
  /* Bề rộng 236px là đặt cho MÁY TÍNH, nơi mỗi dòng còn có chữ. Bỏ chữ rồi mà
     giữ nguyên bề rộng thì hộp rỗng gần hết, che mất mặt phẳng đang vẽ. */
  .cb-pitem{ justify-content:center; padding:8px; gap:0; }
  .cb-pitem-chu{ display:none; }
  .cb-popover{ width:auto; min-width:0; padding:5px;
    /* Hàng nút hẹp hơn máy tính nên khoảng lùi cũng phải hẹp lại, không thì
       hộp hở một mảng giữa nó và thanh công cụ. */
    right:46px; }
  /* Thanh chỉnh độ dày nét thì vẫn cần chỗ — không có chỗ thì kéo không nổi. */
  .cb-psize{ width:150px; }

  /* ---------- 5b. Thanh công cụ thu vào mép ---------- */
  /* Tay nắm nằm TRONG khung thanh công cụ, đứng TRƯỚC hàng nút. Lúc thu chỉ
     cần đẩy cả khung sang phải đúng bề ngang hàng nút thì tay nắm còn lại ở
     mép — không phải tính toạ độ riêng cho nó. */
  .cb-tool-tay{
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:20px; height:56px; padding:0; margin-right:5px; cursor:pointer;
    align-self:center; min-height:0; touch-action:none;
    background:var(--bg2); border:1px solid var(--border); border-radius:8px;
    box-shadow:0 4px 14px rgba(0,0,0,.3);
  }
  .cb-tool-tay i{ width:4px; height:26px; border-radius:3px; background:var(--text3); opacity:.75; }
  .cb-toolwrap{ transition:transform .2s ease; }
  /* Thu: đẩy sang phải đúng (bề ngang khung − bề ngang tay nắm). */
  .cb-screen:not(.tool-mo) .cb-toolwrap{
    transform:translateY(-50%) translateX(calc(100% - 20px));
  }
  /* Lúc thu thì hàng nút không được ăn cú chạm — nó vẫn nằm đó, chỉ ở ngoài
     màn. Không chặn thì chạm mép phải là trúng nút vô hình. */
  .cb-screen:not(.tool-mo) .cb-tools,
  .cb-screen:not(.tool-mo) .cb-popover{ pointer-events:none; }

  /* ---------- 6. Bảng so sánh mở là chiếm cả màn ---------- */
  .cb-screen.cmp-open .cb-canvas{ display:none; }
  .cb-cmp{ position:relative; }
  .cb-cmp.open{
    width:auto !important; max-height:none; flex:1; min-height:0;
    border-right:none; border-bottom:none;
  }
  .cb-cmp-head{ padding:7px 9px; gap:6px; }
  /* Tấm comment nằm ĐÈ lên, nên phải chừa đúng chỗ nó chiếm — không thì
     hàng nút thu/phóng ở đáy bảng so sánh bị che, bấm không tới. */
  .cb-screen.cmp-open .cb-cmp.open{ padding-bottom:var(--cb-sheet-h, 84px); }
  .cb-cmp-btn.canh{ display:block; }
  /* Cảnh báo lệch tỉ lệ: giấu sau nút ⚠️. Bật lên thì ĐÈ LÊN ẢNH chứ không ăn
     thêm một hàng chiều cao — chỗ trên màn nhỏ đang rất chật. */
  .cb-cmp-warn{
    display:none; position:absolute; left:8px; right:8px; top:46px; z-index:9;
    margin:0; background:var(--bg2); border-color:var(--amber);
    box-shadow:0 10px 28px rgba(0,0,0,.5);
  }
  .cb-cmp-warn.mo{ display:block; }

  /* ---------- 7. Bảng comment = tấm kéo từ đáy ---------- */
  /* Tấm nằm ĐÈ lên mặt phẳng (position:absolute) chứ không chia đôi màn: nhờ
     vậy lúc nép xuống thì ảnh được gần trọn màn. Chiều cao do JS đặt qua biến
     --cb-sheet-h trên #cb-screen. */
  .cb-work{ position:relative; }
  .cb-canvas{ order:1; flex:1; min-height:0; }
  .cb-side{
    position:absolute; left:0; right:0; bottom:0; top:auto; z-index:8;
    width:auto !important; max-height:none;
    height:var(--cb-sheet-h, 84px);
    /* Cắt phần thừa thay vì bóp các hàng bên trong: các hàng đều
       flex-shrink:0 nên lúc tấm thấp thì hàng dưới bị cắt, chứ không
       dẹp lại thành một vệt không đọc nổi (Convention #98). */
    overflow:hidden;
    border-right:none; border-top:1px solid var(--border);
    border-radius:15px 15px 0 0;
    box-shadow:0 -10px 30px rgba(0,0,0,.4);
    padding-bottom:env(safe-area-inset-bottom, 0px);
    transition:height .18s ease;
  }
  /* Đang kéo thì bỏ hiệu ứng mượt, không thì tấm chạy trễ sau ngón tay. */
  .cb-screen.cb-keo-sheet .cb-side{ transition:none; }
  /* Nấc nép = ĐÚNG một thanh nhô lên. Số comment chưa xem đứng ngay trên đó
     nên vẫn liếc được mà không phải kéo lên. */
  .cb-sheet-so{ display:block; }
  .cb-sheet-grip{ display:flex; order:0; height:34px; gap:9px; position:relative; }
  .cb-sheet-so{
    font-size:10.5px; font-weight:800; line-height:1; white-space:nowrap;
    background:var(--red); color:#fff; border-radius:999px; padding:3px 8px;
  }
  /* Thứ tự trên điện thoại: tay nắm → hàng tiêu đề → khối tên view →
     danh sách. Nhờ vậy lúc nép sát đáy vẫn đọc được "còn mấy comment
     chưa xem" — đó là thứ đáng liếc nhất khi bảng đang thu nhỏ. */
  .cb-side-head{ order:1; padding:7px 12px; }
  /* ---------- 8. Hộp soạn thẻ note ---------- */
  .cb-note-lop{ padding:0 8px calc(env(safe-area-inset-bottom, 0px) + 10px); }
  .cb-note-in{ max-height:18vh; min-height:56px; }
  /* Ngón tay to hơn con trỏ — nới đích bấm ra. */
  .cb-note-dinh.mo{ gap:6px; padding:7px; }
  .cb-nd-nut,.cb-nd-mau{ width:34px; height:34px; }
  .cb-nd-phong,.cb-nd-nang{ height:34px; }
  .cb-nd-phong{ max-width:88px; }
  /* Điện thoại dùng hộp nép đáy, không dùng thanh nổi — có lọt ra cũng ẩn. */
  .cb-note-dinh.noi{ display:none !important; }
  /* Chip mở vòng: bấm bằng ngón tay nên đích phải to hơn. */
  .cb-chipvong-nut{ height:70px; font-size:30px; }
  .cb-chipvong-nhan{ font-size:28px; }
  .cb-side-who{ order:2; }
  .cb-side-empty{ order:3; }
  .cb-side-list{ order:3; }
  .cb-side > *{ flex-shrink:0; }
  .cb-side-list{ flex:1 1 auto; min-height:0; }
}


/* ============================================================
   TRANG PLAYCOMMENT (js/81) — chỗ chọn dự án
   ------------------------------------------------------------
   Trang này KHÔNG vẽ bảng comment. Bấm một thẻ là mở lớp phủ #cb-screen —
   đúng cái lớp phủ mà nút 💬 Comment bên Workflow vẫn mở (Convention #105).
   ============================================================ */
.pc-content{ padding:14px 16px 22px; }
.pc-tai,.pc-trong{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:44px 20px; text-align:center;
  color:var(--text3); font-size:13px; line-height:1.7;
}
.pc-thanh{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.pc-tim{
  flex:1; min-width:0; max-width:420px; box-sizing:border-box;
  padding:8px 12px; border-radius:9px; font-size:13px;
  background:var(--bg2); border:1px solid var(--border); color:var(--text);
}
.pc-tim:focus{ outline:none; border-color:var(--blue); }
.pc-dem{ font-size:11.5px; color:var(--text3); white-space:nowrap; }

/* minmax(0,1fr) chứ không phải 1fr: 1fr vẫn nở tới min-content nên tên dự án
   dài là ô phình ra và tràn ngang (Convention #96). */
.pc-luoi{
  display:grid; gap:11px;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.pc-the{
  display:flex; flex-direction:column; gap:5px; min-width:0; min-height:0;
  padding:12px 13px 11px; border-radius:12px; cursor:pointer; text-align:left;
  background:var(--bg2); border:1px solid var(--border); color:var(--text);
  font:inherit; transition:border-color .14s, background .14s, transform .14s;
}
.pc-the:hover{ border-color:var(--blue); background:var(--bg3); transform:translateY(-1px); }
.pc-the-hd{ display:flex; align-items:center; gap:8px; min-width:0; }
.pc-the-hd .cb-logo{ width:22px; height:22px; }
.pc-the-ten{
  font-size:13.5px; font-weight:700; line-height:1.35; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pc-the-kh{
  font-size:11.5px; color:var(--text3); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pc-the-ft{ display:flex; flex-wrap:wrap; gap:5px; margin-top:3px; }
.pc-nhan{
  font-size:10.5px; font-weight:700; border-radius:6px; padding:2px 7px;
  background:var(--bg3); color:var(--text2); white-space:nowrap;
}
.pc-nhan.tt{ background:rgba(59,130,246,.16); color:var(--blue); }
.pc-the-kieu{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.pc-kieu{ font-size:10.5px; color:var(--text3); white-space:nowrap; }

@media (max-width:768px){
  .pc-content{ padding:10px 10px 18px; }
  .pc-luoi{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap:9px; }
  .pc-tim{ max-width:none; }
}