/* ===== Trang Group (/group) — style riêng ===== */

/* Kho tính năng: kéo-thả + nút ẩn */
.drag-handle:hover { color: #888 !important; }
.sortable-ghost { opacity: 0.4; }
.sortable-chosen { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); }
.btn-hide-feature:hover { color: #ef4444 !important; }

/* ===== Modal "Cấu hình tải dữ liệu Group" (dùng chung style .bm-* của page/bm/ads) ===== */
.bm-modal-body { padding: 0 4px 4px; text-align: left; }
.bm-modal-header { display: flex; align-items: center; gap: 12px; padding: 16px 6px 14px; margin-bottom: 16px; border-bottom: 1px solid #eef0f2; }
.bm-modal-header-icon { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, var(--primary-end, #8b5cf6), #a855f7); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 21px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); }
.bm-modal-header-title { font-size: 15.5px; font-weight: 700; color: #1a1a1a; line-height: 1.25; }
.bm-modal-header-sub { font-size: 11.5px; color: #9ca3af; font-weight: 500; margin-top: 3px; line-height: 1.4; }

.bm-section-title { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--primary-end, #8b5cf6); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.bm-section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #e5e7eb, transparent); }

.bm-radio-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
/* Chia đều theo SỐ Ô của cụm: 2 ô (Phương thức tải) → 50/50, 3 ô (Quyền) → 3 trên 1 hàng.
   min-width 140px để cụm đông ô hơn vẫn xuống dòng thay vì bóp nát chữ. */
.bm-radio-card { flex: 1 1 0; min-width: 140px; position: relative; cursor: pointer; display: flex; }
.bm-radio-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.bm-radio-card .bm-radio-content { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 2px solid #e5e7eb; border-radius: 12px; background: #fff; transition: all 0.2s ease; flex: 1; box-sizing: border-box; text-align: left; }
.bm-radio-card input[type="radio"]:checked + .bm-radio-content { border-color: var(--primary-end, #8b5cf6); background: linear-gradient(135deg, #f5f3ff, #ede9fe); box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15); }
.bm-radio-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; background: #fff; }
.bm-radio-card:nth-child(1) .bm-radio-icon { color: #3b82f6; }
.bm-radio-card:nth-child(2) .bm-radio-icon { color: #ec4899; }
.bm-radio-card:nth-child(3) .bm-radio-icon { color: #f59e0b; }
.bm-radio-card input[type="radio"]:checked + .bm-radio-content .bm-radio-icon { color: var(--primary-end, #8b5cf6); }
.bm-radio-text-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bm-radio-text { font-size: 13px; font-weight: 600; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-radio-card input[type="radio"]:checked + .bm-radio-content .bm-radio-text { color: #6d28d9; }
.bm-radio-desc { font-size: 10px; font-weight: 500; color: #9ca3af; line-height: 1.25; }
.bm-radio-card input[type="radio"]:checked + .bm-radio-content .bm-radio-desc { color: var(--primary-end, #8b5cf6); }

/* Ô nhập ID — copy nguyên #adLoadIdInput / #pageLoadIdInput (scripts.js 2441 / 3882).
   ⚠ box-shadow focus dùng var(--primary-end-rgb): bản cũ hardcode rgba(139,92,246) nên đại lý
   đổi màu thương hiệu thì viền tím còn vệt sáng vẫn tím cũ. */
#grpIdInput { position: relative; }
#grpIdInput textarea { width: 100%; font-size: 13.5px; font-weight: 500; border-radius: 8px; border: 1px solid #e5e7eb; padding: 10px 12px; background: #fff; resize: none; box-sizing: border-box; transition: border-color 0.2s ease; font-family: "SFProDisplay", sans-serif; color: #374151; }
#grpIdInput textarea:focus { outline: none; border-color: var(--primary-end, #8b5cf6); box-shadow: 0 0 0 3px rgba(var(--primary-end-rgb, 139, 92, 246), 0.1); }
#grpIdInput textarea::placeholder { color: #9ca3af; }
/* Badge đếm ID — copy nguyên #adLoadIdCount / #pageLoadIdCount (scripts.js 2464 / 3886). */
#grpIdCount { position: absolute; top: 6px; right: 8px; background: var(--primary-end, #8b5cf6); color: #fff; font-size: 11px; font-weight: 600; min-width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 10px; padding: 0 6px; pointer-events: none; }

/* Footer 2 nút — CHỈ khai báo LAYOUT, đúng phần mà didOpen của Page thực sự làm được
   (showLoadPageDataModal, scripts.js ~4046): 2 nút flex:1 chia đôi full width, gap 10px, nowrap.
   ⚠ CỐ TÌNH KHÔNG đặt màu / shadow / font-weight / bo góc ở đây. Bên Page các dòng inline
   backgroundImage/boxShadow/color/border trong didOpen phần lớn VÔ TÁC DỤNG — author !important
   thắng inline style — nên cái render thật là:
     · confirm ← .swal2-confirm (modern-theme.css): --primary-gradient #6366f1→#8b5cf6,
       --shadow-primary rgba(99,102,241,.25), radius 10px, weight 600
     · cancel  ← <style> mà scripts.js inject lúc $(document).ready (~866): sáng #fff/#333/
       viền #e0e0e0/shadow rgba(0,0,0,.15); tối #243044/#e2e8f0/không shadow; weight 400
   Tự khai màu ở đây = lệch màu & lệch cỡ/độ đậm chữ so với Page. Để trống thì Group rơi vào
   ĐÚNG các rule chung đó → giống hệt, và sau này sửa chung 1 chỗ là cả 2 trang cùng đổi.
   Riêng padding ngang 4px (Page dùng 38px) vì popup Group giữ padding 20px mặc định và
   .bm-modal-body đã có 0 4px → nút thẳng cột với nội dung; style.css ép padding:0 nên cần !important. */
.swal2-popup.grp-load-modal .swal2-actions { display: flex !important; flex-wrap: nowrap; gap: 10px; width: 100%; box-sizing: border-box; padding: 0 4px !important; }
.swal2-popup.grp-load-modal .swal2-actions button { flex: 1; margin: 0; }

/* Khối "Giới hạn" — copy nguyên .bm-limit-* của popup Tải dữ liệu bm/page (scripts.js).
   Dark mode KHÔNG cần viết: popup group mang class fx-load-modal nên ăn sẵn
   [data-bs-theme="dark"] .fx-load-modal .bm-limit-row / .bm-limit-label trong modern-theme.css. */
.bm-limit-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: #fff; border: 1.5px solid #f0f0f0; border-radius: 10px; }
.bm-limit-icon { width: 34px; height: 34px; background: #fff; color: #f59e0b; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.bm-limit-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bm-limit-label { font-size: 12.5px; font-weight: 600; color: #374151; }
.bm-limit-desc { font-size: 10px; font-weight: 500; color: #9ca3af; line-height: 1.3; }
.bm-limit-input { width: 80px; font-size: 13px; font-weight: 600; border-radius: 8px; padding: 8px 10px; border: 1.5px solid #e5e7eb; background: #f9fafb; text-align: center; color: #374151; box-sizing: border-box; }

.bm-toggle-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.bm-toggle-item { display: flex; align-items: center; flex: 1 1 calc(50% - 4px); max-width: calc(50% - 4px); min-width: calc(50% - 4px); gap: 10px; padding: 8px 12px; box-sizing: border-box; border: 1.5px solid #f0f0f0; border-radius: 11px; cursor: pointer; background: #fff; transition: all 0.2s ease; }
.bm-toggle-item:hover { border-color: #d4d4d8; background: #fafafa; }
.bm-toggle-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.bm-toggle-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bm-toggle-label { font-size: 12px; font-weight: 600; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-toggle-desc { font-size: 10px; font-weight: 500; color: #9ca3af; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-switch { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
.bm-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.bm-switch-slider { position: absolute; cursor: pointer; inset: 0; background: #d1d5db; transition: 0.25s ease; border-radius: 20px; }
.bm-switch-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background: #fff; transition: 0.25s ease; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.bm-switch input:checked + .bm-switch-slider { background: linear-gradient(135deg, var(--primary-end, #8b5cf6), #a855f7); }
.bm-switch input:checked + .bm-switch-slider::before { transform: translateX(16px); }

[data-bs-theme="dark"] .bm-radio-card .bm-radio-content,
[data-bs-theme="dark"] .bm-toggle-item,
[data-bs-theme="dark"] #grpIdInput textarea { background: #171c24; border-color: #2a313c; }
[data-bs-theme="dark"] .bm-radio-text,
[data-bs-theme="dark"] .bm-toggle-label { color: #e5e7eb; }
[data-bs-theme="dark"] .bm-modal-header { border-color: #262c36; }
[data-bs-theme="dark"] .bm-modal-header-title { color: #f3f4f6; }

/* ===== Workspace "Quản lý nội dung nhóm" (/quan-ly-nhom) — mirror shell .pqm-* của /quan-ly-bai =====
   Cột trái (Xem trước + Danh sách bài), cột phải (Nhóm đã chọn + tiến trình) và Monitor dùng CHUNG .pqm-*
   trong modern-theme.css. Ở đây chỉ style riêng phần Soạn thảo (cột giữa). */
.gmw-soon { opacity: 0.6; }

/* Cột soạn thảo — layout PHẲNG GIỐNG HỆT page-dang-bai (label + hàng .db-arow, KHÔNG bọc card).
   Panel nay chỉ còn MỘT cột này (Nhóm áp dụng và Xem trước đã ra 2 thẻ nổi hai bên), nên padding
   ở đây cũng là lề trong của cả thẻ soạn bài. */
.gmw-compose3 .pqm-cmid { padding: 16px 16px; }
/* Bộ chọn nhóm nằm trong thẻ .pqm-npg-card — thẻ đó đã có `gap:10px` giữa các khối con, nên phải
   bỏ margin riêng của 2 khối này, không thì khe cộng dồn thành 18px/16px rộng hơn hẳn thẻ bên phải. */
.pqm-navpg .gmw-gsearch { margin-bottom: 0; }
.pqm-navpg .gmw-gall { margin-bottom: 0; padding-bottom: 10px; }
.gmw-editor { display: flex; flex-direction: column; gap: 13px; }
.gmw-charcount { font-size: 11px; color: #9ca3af; font-variant-numeric: tabular-nums; }
.gmw-ed-foot { display: flex; justify-content: flex-end; margin-top: 6px; }
.gmw-sec-hint { font-weight: 500; color: #9ca3af; font-size: 11px; }
.gmw-msg { width: 100%; border: 1px solid #e5e7eb; border-radius: 10px; padding: 11px 13px; font-size: 14px; line-height: 1.5; resize: vertical; box-sizing: border-box; min-height: 130px; font-family: inherit; color: #334155; }
.gmw-msg:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1); }

/* Label + hàng cài đặt nâng cao — copy nguyên .db-* của page-dang-bai (re-scope .gmw-editor) */
.gmw-editor .db-label { font-size: 12px; font-weight: 700; color: #64748b; margin-bottom: 1px; }
.gmw-editor .db-bglabel { font-size: 12px; font-weight: 600; color: #64748b; }
.gmw-editor .db-bglabel span { color: #94a3b8; font-weight: 400; }
.gmw-editor .db-adv-lbl { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #94a3b8; margin-top: 4px; }
.gmw-editor .db-adv { display: flex; flex-direction: column; gap: 9px; }
.gmw-editor .db-arow { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid #eef2f7; border-radius: 12px; background: #fff; }
/* ---- Card soạn bài kiểu Facebook "Tạo bài viết" ---- */
.gmw-editor .gmw-fb-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.gmw-editor .gmw-fb-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #e5e7eb; }
.gmw-editor .gmw-fb-hdmeta { min-width: 0; }
.gmw-editor .gmw-fb-nm { font-weight: 600; font-size: 15px; color: #1c1e21; line-height: 1.2; }
.gmw-editor .gmw-fb-priv { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #65676b; background: #e4e6eb; border-radius: 6px; padding: 2px 8px; margin-top: 3px; }
/* Khối soạn kiểu FB: ô chữ + ảnh + hàng công cụ chung 1 khung */
.gmw-editor .gmw-fb-box { border: 1px solid #dddfe2; border-radius: 12px; overflow: hidden; margin-bottom: 12px; background: #fff; }
.gmw-editor .gmw-fb-ed { transition: background .15s; }
/* Ô chữ TỰ GIÃN theo nội dung (autoGrowMsg); sàn chiều cao do thuộc tính rows quyết định, không đặt min-height */
.gmw-editor .gmw-fb-ed .gmw-msg { width: 100%; box-sizing: border-box; border: 0; outline: 0; resize: none; overflow: hidden; background: transparent; font-size: 19px; line-height: 1.45; color: #1c1e21; min-height: 0; padding: 14px; font-family: inherit; display: block; }
.gmw-editor .gmw-fb-ed .gmw-msg::placeholder { color: #65676b; }
/* Bấm vào ô chữ KHÔNG vẽ thêm viền/vòng sáng — trong khung chỉ còn 1 đường kẻ của hàng công cụ */
.gmw-editor .gmw-fb-ed .gmw-msg:focus { border: 0; box-shadow: none; }
.gmw-editor .gmw-fb-ed.hasbg { min-height: 180px; display: flex; align-items: center; justify-content: center; padding: 24px; }
.gmw-editor .gmw-fb-ed.hasbg .gmw-msg { min-height: auto; padding: 0; text-align: center; font-size: 26px; font-weight: 700; color: inherit; text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.gmw-editor .gmw-fb-ed.hasbg .gmw-msg::placeholder { color: rgba(255,255,255,.85); }
.gmw-editor .gmw-fb-media { margin: 0 14px 10px; }
/* Chưa có ảnh thì dải ảnh KHÔNG chiếm chỗ — tránh hở 10px giữa ô chữ và đường kẻ */
.gmw-editor .gmw-fb-media:empty { display: none; }

/* ---- Lưới ảnh thông minh kiểu Facebook: bố cục đổi theo SỐ ảnh, tối đa 5 ô ---- */
/* Khối ảnh có viền nhẹ bao ngoài để tách khỏi ô chữ, đệm trong cho lưới không dính mép */
.gmw-editor .gmw-fb-mwrap { border: 1px solid #dddfe2; border-radius: 10px; padding: 8px; }
.gmw-editor .gmw-fb-grid { display: grid; gap: 2px; border-radius: 8px; overflow: hidden; background: #dddfe2; }
.gmw-editor .gmw-fb-tile { position: relative; background-size: cover; background-position: center; background-color: #f0f2f5; display: flex; align-items: center; justify-content: center; min-width: 0; }
/* 1 ảnh: khung rộng thoáng. 2 ảnh: chia đôi. 4 ảnh: ô vuông 2×2 */
.gmw-editor .gmw-fb-grid[data-n="1"] { grid-template-columns: 1fr; }
.gmw-editor .gmw-fb-grid[data-n="1"] .gmw-fb-tile { aspect-ratio: 3 / 2; }
.gmw-editor .gmw-fb-grid[data-n="2"], .gmw-editor .gmw-fb-grid[data-n="4"] { grid-template-columns: 1fr 1fr; }
/* 3 ảnh: một ô rộng nằm trên, hai ô vuông bên dưới */
.gmw-editor .gmw-fb-grid[data-n="3"] { grid-template-columns: 1fr 1fr; }
.gmw-editor .gmw-fb-grid[data-n="3"] .gmw-fb-tile:first-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
/* 5 ô: hàng trên 2 ô (mỗi ô 3/6 cột), hàng dưới 3 ô (mỗi ô 2/6 cột) — đúng bố cục FB */
.gmw-editor .gmw-fb-grid[data-n="5"] { grid-template-columns: repeat(6, 1fr); }
.gmw-editor .gmw-fb-grid[data-n="5"] .gmw-fb-tile:nth-child(-n+2) { grid-column: span 3; aspect-ratio: 3 / 2; }
.gmw-editor .gmw-fb-grid[data-n="5"] .gmw-fb-tile:nth-child(n+3) { grid-column: span 2; }
.gmw-editor .gmw-fb-grid[data-n="2"] .gmw-fb-tile,
.gmw-editor .gmw-fb-grid[data-n="3"] .gmw-fb-tile:nth-child(n+2),
.gmw-editor .gmw-fb-grid[data-n="4"] .gmw-fb-tile,
.gmw-editor .gmw-fb-grid[data-n="5"] .gmw-fb-tile:nth-child(n+3) { aspect-ratio: 1 / 1; }
/* Ô cuối khi còn ảnh chưa hiện: phủ đen mờ + số còn lại */
.gmw-editor .gmw-fb-more { position: absolute; inset: 0; background: rgba(0,0,0,.45); color: #fff; font-size: 26px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
/* Thanh nút trên lưới — hai đầu, gọn để vừa cột soạn hẹp */
.gmw-editor .gmw-fb-mtools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.gmw-editor .gmw-fb-mbtn { display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 8px; background: #f0f2f5; color: #1c1e21; font-size: 12.5px; font-weight: 600; padding: 6px 10px; cursor: pointer; white-space: nowrap; min-width: 0; transition: background .15s; }
.gmw-editor .gmw-fb-mbtn i { font-size: 14px; flex-shrink: 0; }
.gmw-editor .gmw-fb-mbtn:hover { background: #e4e6eb; }
.gmw-editor .gmw-fb-mclear { color: #dc2626; }
.gmw-editor .gmw-fb-mclear:hover { background: #fef2f2; }

/* ---- Hộp thoại "Chỉnh sửa tất cả" (dùng lại vỏ .gmw-bgmodal) ---- */
.gmw-edall-card { width: min(680px, 94vw); }
.gmw-edall-hd { align-items: flex-start; }
.gmw-edall-ic { width: 40px; height: 40px; border-radius: 11px; background: #e7f0ff; color: #1877f2; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.gmw-edall-ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gmw-edall-ttl small { font-size: 13px; font-weight: 400; color: #65676b; }
.gmw-edall-list { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
/* ⚠ Hộp thoại gắn thẳng lên S.ov, KHÔNG nằm trong .gmw-editor → mọi rule `.gmw-editor .db-m*`
   KHÔNG với tới. Phải khai đầy đủ tại đây, đừng trông chờ dùng lại. */
.gmw-edall-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid #eef2f7; border-radius: 12px; background: #fff; }
.gmw-edall-row .db-mgrip { flex-shrink: 0; cursor: grab; color: #cbd5e1; font-size: 18px; line-height: 1; padding-top: 24px; }
.gmw-edall-row .db-mgrip:active { cursor: grabbing; }
.gmw-edall-row .db-mthumb { flex-shrink: 0; width: 66px; height: 66px; border-radius: 10px; background-size: cover; background-position: center; background-color: #f1f5f9; }
.gmw-edall-txt { flex: 1; min-width: 0; border: 1px solid #e5e7eb; border-radius: 10px; padding: 9px 11px; font-size: 13.5px; line-height: 1.5; font-family: inherit; color: #334155; resize: vertical; box-sizing: border-box; background: #fff; }
.gmw-edall-txt:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.1); }
.gmw-edall-row .db-mdel { flex-shrink: 0; margin-top: 19px; width: 28px; height: 28px; border: 0; background: transparent; color: #94a3b8; border-radius: 7px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.gmw-edall-row .db-mdel:hover { background: #fef2f2; color: #dc2626; }
/* Bản "ma" lúc kéo — Sortable chạy forceFallback nên nó là bản sao gắn ở body */
.gmw-edall-row.sortable-ghost { opacity: .35; }
.gmw-edall-ft { display: flex; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid #e4e6eb; flex-shrink: 0; }
.gmw-edall-done { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 9px; background: #1877f2; color: #fff; font-size: 14px; font-weight: 600; padding: 9px 22px; cursor: pointer; }
.gmw-edall-done i { font-size: 17px; }
.gmw-edall-done:hover { background: #166fe5; }
[data-bs-theme="dark"] .gmw-editor .gmw-anon-note { color: #fcd34d; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.32); }
[data-bs-theme="dark"] .gmw-editor .gmw-fb-mwrap { border-color: #3a3b3c; }
[data-bs-theme="dark"] .gmw-editor .gmw-fb-grid { background: #3a3b3c; }
[data-bs-theme="dark"] .gmw-editor .gmw-fb-tile { background-color: #3a3b3c; }
[data-bs-theme="dark"] .gmw-editor .gmw-fb-mbtn { background: #3a3b3c; color: #e4e6eb; }
[data-bs-theme="dark"] .gmw-editor .gmw-fb-mbtn:hover { background: #4e4f50; }
[data-bs-theme="dark"] .gmw-editor .gmw-fb-mclear { color: #f87171; }
[data-bs-theme="dark"] .gmw-editor .gmw-fb-mclear:hover { background: rgba(220,38,38,.18); }
[data-bs-theme="dark"] .gmw-edall-ic { background: rgba(24,119,242,.22); color: #6bb0ff; }
[data-bs-theme="dark"] .gmw-edall-ttl small { color: #b0b3b8; }
[data-bs-theme="dark"] .gmw-edall-txt { background: #3a3b3c; border-color: #4e4f50; color: #e4e6eb; }
[data-bs-theme="dark"] .gmw-edall-ft { border-top-color: #3a3b3c; }
.gmw-editor .gmw-swwrap { margin-bottom: 12px; }
/* Ghi chú vì sao 2 mục biến mất khi bật ẩn danh */
.gmw-editor .gmw-anon-note { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 1.45; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 8px 11px; }
.gmw-editor .gmw-anon-note i { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
/* Hàng công cụ nằm TRONG khung, ngăn bằng đường kẻ trên */
.gmw-editor .gmw-fb-add { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #dddfe2; padding: 9px 12px; }
.gmw-editor .gmw-fb-addlbl { font-size: 14px; font-weight: 600; color: #1c1e21; }
.gmw-editor .gmw-fb-addic { display: flex; align-items: center; gap: 8px; }
/* Aa và Ảnh cùng cỡ, cùng bo góc — nhìn là một cặp */
.gmw-editor .gmw-fb-addbtn { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 21px; border: 0; flex-shrink: 0; transition: filter .15s, background .15s; }
.gmw-editor .gmw-aa-btn { background: linear-gradient(135deg,#f09433,#dc2743 50%,#bc1888); color: #fff; font-weight: 800; font-size: 14px; }
.gmw-editor .gmw-aa-btn:hover { filter: brightness(1.06); }
.gmw-editor .gmw-aa-btn.on { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #1877f2; }
.gmw-editor .gmw-add-photo { background: #e3f5e8; color: #36a852; }
.gmw-editor .gmw-add-photo:hover { background: #d5efdc; }
/* Không dùng pointer-events:none — nuốt luôn cả tooltip "Bỏ nền để thêm ảnh" lẫn con trỏ báo khoá,
   nút thành xám câm không lý do. Là <span> không chứa input và không handler nào khớp → bấm vẫn vô hại. */
.gmw-editor .gmw-add-photo.disabled { background: #f0f2f5; color: #bcc0c4; cursor: not-allowed; }
/* Popup lưới đầy đủ "Chọn phông nền" */
.gmw-bgmodal { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 3000; }
.gmw-bgmodal-card { background: #fff; border-radius: 14px; width: min(600px,92vw); max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,.28); }
.gmw-bgmodal-hd { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #e4e6eb; font-weight: 700; font-size: 18px; color: #1c1e21; flex-shrink: 0; }
.gmw-bgmodal-x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #e4e6eb; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 19px; color: #1c1e21; }
.gmw-bgmodal-x:hover { background: #d8dadf; }
.gmw-bgmodal-ttl { flex: 1; min-width: 0; }
/* "Không nền" nằm trên đầu popup, tách khỏi 3 mục nền */
.gmw-bgnone { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; border: 1px solid #dddfe2; background: #fff; color: #1c1e21; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.gmw-bgnone i { font-size: 15px; }
.gmw-bgnone:hover { background: #f0f2f5; }
.gmw-bgnone.on { border-color: #1877f2; background: #e7f0ff; color: #1877f2; }
.gmw-bgmodal-scroll { overflow: auto; padding-bottom: 8px; }
/* 3 mục tách bạch: tiêu đề đậm kèm số lượng, vạch ngăn giữa các mục */
.gmw-bgsec + .gmw-bgsec { border-top: 1px solid #e4e6eb; }
.gmw-bgmodal-sec { display: flex; align-items: center; gap: 8px; padding: 14px 16px 6px; font-weight: 700; color: #1c1e21; font-size: 15px; }
.gmw-bgsec-n { font-size: 12px; font-weight: 600; color: #65676b; background: #f0f2f5; border-radius: 999px; padding: 1px 8px; }
.gmw-bgmodal-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; padding: 6px 16px 14px; }
.gmw-bgcell { aspect-ratio: 1/1; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #65676b; font-size: 22px; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.gmw-bgcell.on { border-color: #1877f2; }
[data-bs-theme="dark"] .gmw-bgmodal-card { background: #242526; }
[data-bs-theme="dark"] .gmw-bgmodal-hd { color: #e4e6eb; border-color: #3a3b3c; }
[data-bs-theme="dark"] .gmw-bgmodal-x { background: #3a3b3c; color: #e4e6eb; }
[data-bs-theme="dark"] .gmw-bgnone { background: #3a3b3c; border-color: #4e4f50; color: #e4e6eb; }
[data-bs-theme="dark"] .gmw-bgnone:hover { background: #4e4f50; }
[data-bs-theme="dark"] .gmw-bgnone.on { background: rgba(24,119,242,.2); border-color: #2d88ff; color: #6bb0ff; }
[data-bs-theme="dark"] .gmw-bgsec + .gmw-bgsec { border-top-color: #3a3b3c; }
[data-bs-theme="dark"] .gmw-bgmodal-sec { color: #e4e6eb; }
[data-bs-theme="dark"] .gmw-bgsec-n { background: #3a3b3c; color: #b0b3b8; }
[data-bs-theme="dark"] .gmw-editor .gmw-fb-nm { color: #e4e6eb; }
[data-bs-theme="dark"] .gmw-editor .gmw-fb-priv { background: #3a3b3c; color: #b0b3b8; }
/* ⚠ Phải trừ .hasbg: hai luật này cùng độ ưu tiên (0,4,0) với `.gmw-fb-ed.hasbg .gmw-msg{color:inherit}`
   nhưng nằm sau nên thắng → ô soạn có nền mất màu chữ của preset, nền sáng thì chữ gần như tàng hình. */
[data-bs-theme="dark"] .gmw-editor .gmw-fb-ed:not(.hasbg) .gmw-msg { color: #e4e6eb; }
[data-bs-theme="dark"] .gmw-editor .gmw-fb-ed:not(.hasbg) .gmw-msg::placeholder { color: #b0b3b8; }
[data-bs-theme="dark"] .gmw-editor .gmw-fb-box { border-color: #3a3b3c; background: #242526; }
[data-bs-theme="dark"] .gmw-editor .gmw-fb-add { border-top-color: #3a3b3c; }
[data-bs-theme="dark"] .gmw-editor .gmw-fb-addlbl { color: #e4e6eb; }
[data-bs-theme="dark"] .gmw-editor .gmw-add-photo { background: rgba(54,168,82,.2); color: #5fd07d; }
[data-bs-theme="dark"] .gmw-editor .gmw-add-photo:hover { background: rgba(54,168,82,.3); }
[data-bs-theme="dark"] .gmw-editor .gmw-add-photo.disabled { background: #3a3b3c; color: #6b6e70; }
[data-bs-theme="dark"] .gmw-editor .gmw-aa-btn.on { box-shadow: inset 0 0 0 2px #242526, 0 0 0 2px #2d88ff; }
.gmw-editor .db-ac { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.gmw-editor .db-ac-green { background: #dcfce7; color: #16a34a; }
.gmw-editor .db-ac-sky { background: #e0f2fe; color: #0284c7; }
.gmw-editor .db-ac-pink { background: #fce7f3; color: #db2777; }
.gmw-editor .db-ac-violet { background: #ede9fe; color: #7c3aed; }
.gmw-editor .db-ac-indigo { background: #e0e7ff; color: #4f46e5; }
.gmw-editor .db-at { flex: 1; min-width: 0; }
.gmw-editor .db-at b { font-size: 13px; font-weight: 600; color: #334155; display: block; }
.gmw-editor .db-at small { font-size: 11.5px; color: #94a3b8; line-height: 1.4; }
.gmw-editor .db-sw2 { position: relative; width: 42px; height: 24px; flex-shrink: 0; cursor: pointer; margin: 0; }
.gmw-editor .db-sw2 input { position: absolute; opacity: 0; width: 0; height: 0; }
.gmw-editor .db-sw2 span { position: absolute; inset: 0; border-radius: 999px; background: #cbd5e1; transition: background .16s; }
.gmw-editor .db-sw2 span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .16s; }
.gmw-editor .db-sw2 input:checked + span { background: #7c3aed; }
.gmw-editor .db-sw2 input:checked + span::after { left: 21px; }

/* Chữ nền (text format presets) — copy NGUYÊN giá trị của page-dang-bai
   (style.css 1353-1435 / 1545 / 1569-1590), chỉ đổi bộ chọn [data-feature="page-dang-bai"]
   → .gmw-editor, đúng cách khối Media/Bình luận bên dưới đang re-scope.
   Bản cũ .gmw-sw* tự chế (lưới wrap, chọn = đổi màu viền) đã bỏ vì không đồng bộ với Trang. */
/* Dải nền chữ kiểu Facebook: ô vuông bo góc lớn, nút ◄ / ▦ xám vuông, chọn = viền xanh */
.gmw-editor .db-swswrap { display: flex; align-items: center; gap: 8px; }
/* padding 6px: chừa chỗ cho viền chọn phồng ra 4px — overflow-x:auto kéo overflow-y cắt ở mép padding, thiếu chỗ là cắt viền */
.gmw-editor .db-sws { display: flex; gap: 8px; overflow-x: auto; padding: 6px 4px; flex: 1; min-width: 0; scroll-behavior: smooth; scrollbar-width: none; }
.gmw-editor .db-sws::-webkit-scrollbar { display: none; }
.gmw-editor .db-swnav { flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; border: 0; background: #e4e6eb; color: #050505; display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; transition: background 0.15s; }
.gmw-editor .db-swnav:hover:not(:disabled) { background: #d8dadf; }
.gmw-editor .db-swnav:disabled { opacity: 0.4; cursor: default; }
.gmw-editor .gmw-swexpand i { font-size: 20px; }
.gmw-editor .db-swx { width: 46px; height: 46px; border-radius: 14px; cursor: pointer; flex: none; position: relative; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); background-size: cover; background-position: center; }
.gmw-editor .db-swx.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1877f2; }
.gmw-editor .db-swx-none { display: flex; align-items: center; justify-content: center; background: #f0f2f5; color: #65676b; box-shadow: inset 0 0 0 1px #e4e6eb; }
.gmw-editor .db-swx-none i { font-size: 22px; }
.gmw-editor .db-bgload { font-size: 12px; color: #9099a9; padding: 6px 2px; align-self: center; }
.gmw-editor .db-bgerr { color: #ef4444; cursor: pointer; text-decoration: underline; }
[data-bs-theme="dark"] .gmw-editor .db-swnav { background: #3a3b3c; color: #e4e6eb; }
[data-bs-theme="dark"] .gmw-editor .db-swnav:hover:not(:disabled) { background: #4e4f50; }
[data-bs-theme="dark"] .gmw-editor .db-swx.on { box-shadow: 0 0 0 2px #242526, 0 0 0 4px #2d88ff; }
[data-bs-theme="dark"] .gmw-editor .db-swx-none { background: #3a3b3c; color: #b0b3b8; box-shadow: inset 0 0 0 1px #4e4f50; }

/* Media (ảnh/video) — dùng LẠI markup .db-* của page-dang-bai, re-scope .gmw-editor */
.gmw-editor .db-uploadbox { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 22px 16px; border: 1.5px dashed #cbd5e1; border-radius: 12px; background: #fafbfc; color: #6d28d9; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.gmw-editor .db-uploadbox:hover { border-color: #8b5cf6; background: #f5f3ff; }
.gmw-editor .db-uploadbox i { font-size: 27px; }
.gmw-editor .db-uploadbox span { font-size: 13px; font-weight: 600; }
.gmw-editor .db-uploadbox small { font-size: 11.5px; color: #94a3b8; font-weight: 400; }
.gmw-editor .db-medialist { display: flex; flex-direction: column; gap: 7px; }
.gmw-editor .db-medialist.has { margin-top: 10px; }
.gmw-editor .db-mvid { background: #0f172a; }
.gmw-editor .db-mvid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gmw-editor .db-mplay { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-size: 18px; text-shadow: 0 1px 3px rgba(0,0,0,.55); pointer-events: none; }
.gmw-editor .db-mup { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #8b5cf6; font-size: 16px; }

/* Bình luận sau khi đăng — nhiều bình luận đánh số, delay + upload + camera (mirror page-dang-bai) */
.gmw-editor .db-cmt { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.gmw-editor .db-cmtopts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.gmw-editor .db-cmtfld { display: flex; flex-direction: column; gap: 5px; }
.gmw-editor .db-cmtfld > label { font-size: 12px; font-weight: 600; color: #64748b; }
.gmw-editor .db-cmtnum { display: flex; align-items: center; gap: 6px; border: 1px solid #dfe3ec; background: #fff; border-radius: 10px; padding: 0 12px; }
.gmw-editor .db-cmtnum:focus-within { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.gmw-editor .db-cmtnum input { width: 74px; border: 0; outline: none; background: transparent; font-size: 14px; font-weight: 600; padding: 9px 0; color: #334155; font-family: inherit; }
.gmw-editor .db-cmtnum span { font-size: 12px; color: #94a3b8; }
.gmw-editor .db-cmtbulk { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #bae6fd; background: #f0f9ff; color: #0284c7; border-radius: 10px; padding: 10px 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.gmw-editor .db-cmtbulk:hover { background: #e0f2fe; border-color: #7dd3fc; }
.gmw-editor .db-cmtbulk i { font-size: 16px; }
.gmw-editor .db-cmtlist { display: flex; flex-direction: column; gap: 12px; }
.gmw-editor .db-cmtblock { display: flex; flex-direction: column; gap: 7px; }
.gmw-editor .db-cmthd { display: flex; align-items: center; justify-content: space-between; }
.gmw-editor .db-cmtlbl { font-size: 13px; font-weight: 700; color: #334155; }
.gmw-editor .db-cmtbody { display: flex; gap: 10px; align-items: stretch; }
.gmw-editor .db-cmttawrap { position: relative; flex: 1; min-width: 0; }
.gmw-editor .db-cmtin { width: 100%; border: 1px solid #dfe3ec; border-radius: 12px; padding: 12px 14px 36px; font-size: 13.5px; line-height: 1.5; resize: vertical; min-height: 84px; font-family: inherit; background: #fff; box-sizing: border-box; color: #334155; }
.gmw-editor .db-cmtin:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.gmw-editor .db-cmttatools { position: absolute; right: 12px; bottom: 10px; display: flex; gap: 2px; }
.gmw-editor .db-cmtcam { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #64748b; font-size: 18px; cursor: pointer; }
.gmw-editor .db-cmtcam:hover { background: #f1f5f9; color: #7c3aed; }
.gmw-editor .db-cmtdel { border: 0; background: transparent; color: #94a3b8; font-size: 16px; cursor: pointer; padding: 3px 5px; border-radius: 6px; }
.gmw-editor .db-cmtdel:hover { color: #dc2626; background: #fef2f2; }
.gmw-editor .db-cmtmedia { position: relative; width: 88px; flex-shrink: 0; }
.gmw-editor .db-cmtthumb { display: block; width: 88px; height: 100%; min-height: 88px; border-radius: 10px; background-size: cover; background-position: center; background-color: #f1f5f9; position: relative; overflow: hidden; }
.gmw-editor .db-cmtmdel { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: #0f172a; color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.gmw-editor .db-cmtadd { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #bbf7d0; background: #f0fdf4; color: #16a34a; border-radius: 10px; padding: 10px 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.gmw-editor .db-cmtadd:hover { background: #dcfce7; border-color: #86efac; }

/* Ẩn loader #loading của grid khi mở workspace (tránh 'hở chân') */
body.gmw-mgr-open #loading { display: none !important; }

[data-bs-theme="dark"] .gmw-msg { background: #171c24; border-color: #2a313c; color: #e5e7eb; }
[data-bs-theme="dark"] .gmw-editor .db-arow { background: #1e2530; border-color: #2e3947; }
[data-bs-theme="dark"] .gmw-editor .db-at b { color: #e5e7eb; }
[data-bs-theme="dark"] .gmw-editor .db-sw2 span { background: #3a4658; }
[data-bs-theme="dark"] .gmw-editor .db-ac-green { background: rgba(22,163,74,.22); color: #4ade80; }
[data-bs-theme="dark"] .gmw-editor .db-ac-sky { background: rgba(2,132,199,.22); color: #38bdf8; }
[data-bs-theme="dark"] .gmw-editor .db-ac-pink { background: rgba(219,39,119,.22); color: #f472b6; }
[data-bs-theme="dark"] .gmw-editor .db-ac-violet { background: rgba(124,58,237,.26); color: #a78bfa; }
[data-bs-theme="dark"] .gmw-editor .db-ac-indigo { background: rgba(99,102,241,.24); color: #a5b4fc; }
[data-bs-theme="dark"] .gmw-editor .db-uploadbox { background: rgba(255,255,255,.03); border-color: #3a4658; color: #c4b5fd; }
[data-bs-theme="dark"] .gmw-edall-row { background: #242526; border-color: #3a3b3c; }
[data-bs-theme="dark"] .gmw-edall-row .db-mthumb { background-color: #3a3b3c; }
[data-bs-theme="dark"] .gmw-editor .db-cmtfld > label { color: #94a3b8; }
[data-bs-theme="dark"] .gmw-editor .db-cmtnum { background: #171d27; border-color: #333c4e; }
[data-bs-theme="dark"] .gmw-editor .db-cmtnum input { color: #e5e7eb; }
[data-bs-theme="dark"] .gmw-editor .db-cmtlbl { color: #e5e7eb; }
[data-bs-theme="dark"] .gmw-editor .db-cmtin { background: #171d27; border-color: #333c4e; color: #e5e7eb; }
[data-bs-theme="dark"] .gmw-editor .db-cmtbulk { background: rgba(14,165,233,.12); border-color: rgba(14,165,233,.4); color: #7dd3fc; }
[data-bs-theme="dark"] .gmw-editor .db-cmtadd { background: rgba(22,163,74,.14); border-color: rgba(22,163,74,.4); color: #4ade80; }

/* Cột phải: danh sách TẤT CẢ nhóm (tìm + chọn tất cả + tick) — inline, thay chip+modal */
.gmw-gsearch { position: relative; margin-bottom: 8px; flex-shrink: 0; }
.gmw-gsearch > i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 15px; }
.gmw-gsearch-in { width: 100%; border: 1px solid #e5e7eb; border-radius: 8px; padding: 7px 10px 7px 32px; font-size: 13px; box-sizing: border-box; font-family: inherit; color: #334155; }
.gmw-gsearch-in:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1); }
.gmw-gall { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #6b7280; padding: 2px 2px 8px; cursor: pointer; border-bottom: 1px solid #f0f0f0; margin-bottom: 6px; flex-shrink: 0; }
.gmw-gall input { accent-color: #8b5cf6; }
.gmw-glist { flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.gmw-git { display: flex; align-items: center; gap: 9px; padding: 6px; border-radius: 8px; cursor: pointer; }
.gmw-git:hover { background: #f8f7ff; }
.gmw-git > input { flex-shrink: 0; accent-color: #8b5cf6; }
.gmw-git > img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #eef2f7; }
.gmw-git-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; flex: 1; }
.gmw-git-name { font-size: 13px; font-weight: 600; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gmw-git-sub { font-size: 11px; color: #9ca3af; }
.gmw-git-prog { display: inline-flex; align-items: center; gap: 4px; }
.gmw-git-prog i { font-size: 13px; flex-shrink: 0; }
.gmw-git-prog span { font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gmw-git.run .gmw-git-prog { color: #8b5cf6; }
.gmw-git.ok .gmw-git-prog { color: #10b981; }
.gmw-git.err .gmw-git-prog { color: #ef4444; }
.gmw-git.run { background: #f5f3ff; }
.gmw-git.err { background: #fef2f2; }
.gmw-git-open { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; color: #6366f1; font-size: 16px; cursor: pointer; }
.gmw-git-open:hover { background: #eef2ff; color: #4f46e5; }
[data-bs-theme="dark"] .gmw-gsearch-in { background: #171c24; border-color: #2a313c; color: #e5e7eb; }
[data-bs-theme="dark"] .gmw-gall { color: #9ca3af; border-color: #262c36; }
[data-bs-theme="dark"] .gmw-git-name { color: #e5e7eb; }
[data-bs-theme="dark"] .gmw-git:hover { background: #1f2630; }
[data-bs-theme="dark"] .gmw-git.run { background: #211c33; }
[data-bs-theme="dark"] .gmw-git.err { background: rgba(239, 68, 68, 0.12); }
[data-bs-theme="dark"] .gmw-git-open:hover { background: rgba(99, 102, 241, 0.16); }

/* ===== Tìm & tham gia nhóm (/tim-nhom) — group-finder.js. Thân riêng .tnf-*, dùng chung
   shell .pmb-overlay/.pqm-topbar/.pqm-back với /quan-ly-nhom. ===== */
.tnf-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 350px minmax(0, 1fr); background: #f1f5f9; overflow: hidden; }

/* Hub "Công cụ nhóm": panel Tìm = vùng nền xám; .tnf-filters & .tnf-results là 2 THẺ nổi RIÊNG (như cụm nội dung) */
.pqm-ws-finder .pqm-panel.tnf-flush { inset: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 14px 13px; }
.pqm-ws-finder .pqm-panel.tnf-flush .tnf-body { height: 100%; background: transparent; gap: 13px; overflow: visible; }
.pqm-ws-finder .tnf-filters,
.pqm-ws-finder .tnf-results { border: 1px solid #e8eaf1; border-radius: 14px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05); overflow: hidden; }
[data-bs-theme="dark"] .pqm-ws-finder .tnf-filters,
[data-bs-theme="dark"] .pqm-ws-finder .tnf-results { border-color: #2a3341; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }

/* ===== Công cụ Quét thành viên nhóm — dùng chung khung .pqm-* như "Quét tương tác bài viết" ===== */
.pqm-ws-finder .pqm-panel[data-panel="quet-tv"] .pqm-pbody { overflow: hidden; display: flex; flex-direction: column; }
.pqm-ws-finder .pqm-panel[data-panel="quet-tv"] .pqm-gfoot { padding-right: 88px; }
.gms-listwrap { flex: 1; min-height: 0; overflow: auto; }
.pqm-ws-finder .pqs-user .pqm-gth { border-radius: 50%; }

/* Left Sidebar Filters Container */
.tnf-filters { border-right: 1px solid #e2e8f0; display: flex; flex-direction: column; overflow: hidden; background: #f8fafc; height: 100%; position: relative; }
.tnf-filters-scroll { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.tnf-filters-scroll::-webkit-scrollbar { width: 5px; }
.tnf-filters-scroll::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); border-radius: 4px; }
.tnf-filters-scroll::-webkit-scrollbar-track { background: transparent; }

/* Section Cards */
.tnf-sec-card { background: #ffffff; border: 1px solid rgba(226, 232, 240, 0.85); border-radius: 12px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.tnf-sec-card:hover { border-color: #cbd5e1; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06); }
.tnf-sec-hd { padding: 9px 12px; background: #fcfdfe; border-bottom: 1px solid #f1f5f9; font-size: 11.5px; font-weight: 700; color: #475569; display: flex; align-items: center; gap: 7px; text-transform: uppercase; letter-spacing: 0.03em; }
.tnf-sec-ic { font-size: 14px; color: #6366f1; }
.tnf-sec-body { padding: 12px; display: flex; flex-direction: column; gap: 11px; }

/* Field & Inputs */
.tnf-field { display: flex; flex-direction: column; }
.tnf-field label { display: block; font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 5px; }
.tnf-input-wrap { position: relative; display: flex; align-items: center; width: 100%; }
.tnf-input-ic { position: absolute; left: 11px; font-size: 15px; color: #94a3b8; pointer-events: none; z-index: 1; }
.tnf-in { width: 100%; height: 36px; padding: 0 11px; border-radius: 8px; border: 1px solid #cbd5e1; background: #ffffff; color: #0f172a; font-size: 13px; font-family: inherit; outline: none; transition: all 0.15s ease; }
.tnf-input-wrap .tnf-in { padding-left: 32px; }
.tnf-in:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); background: #ffffff; }
.tnf-in::placeholder { color: #94a3b8; font-size: 12.5px; }
select.tnf-in { cursor: pointer; padding-right: 28px; }

/* Range Box (Min - Max) */
.tnf-range-row { display: flex; align-items: center; gap: 6px; width: 100%; }
.tnf-range-box { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; }
.tnf-range-lbl { position: absolute; left: 9px; font-size: 11px; font-weight: 600; color: #94a3b8; pointer-events: none; text-transform: uppercase; letter-spacing: 0.02em; }
.tnf-range-box .tnf-in { padding-left: 36px; }
.tnf-range-sep { color: #94a3b8; font-size: 13px; flex-shrink: 0; }
.tnf-num, .tnf-numc, .tnf-numh { font-variant-numeric: tabular-nums; }

/* Grid 2 Cols */
.tnf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Input with Unit Suffix */
.tnf-input-unit { position: relative; display: flex; align-items: center; width: 100%; }
.tnf-input-unit .tnf-in { padding-right: 46px; }
.tnf-unit { position: absolute; right: 10px; font-size: 11.5px; color: #64748b; font-weight: 500; pointer-events: none; }

/* Switch Toggle Card */
.tnf-toggle-card { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer; transition: all 0.15s ease; user-select: none; margin: 0; }
.tnf-toggle-card:hover { border-color: #cbd5e1; background: #f1f5f9; }
.tnf-toggle-info { display: flex; flex-direction: column; gap: 2px; }
.tnf-toggle-title { font-size: 12.5px; font-weight: 600; color: #1e293b; display: flex; align-items: center; gap: 6px; }
.tnf-toggle-title i { font-size: 14px; }
.tnf-toggle-desc { font-size: 11px; color: #64748b; }
.tnf-switch { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
.tnf-switch input { opacity: 0; width: 0; height: 0; }
.tnf-slider { position: absolute; inset: 0; cursor: pointer; background-color: #cbd5e1; border-radius: 20px; transition: .2s; }
.tnf-slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.tnf-switch input:checked + .tnf-slider { background-color: #6366f1; }
.tnf-switch input:checked + .tnf-slider:before { transform: translateX(16px); }

/* Segmented Control (Mode) */
.tnf-seg { display: flex; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; padding: 3px; gap: 3px; }
.tnf-seg button { flex: 1; border: none; background: transparent; color: #64748b; font-family: inherit; font-size: 12px; font-weight: 600; padding: 7px 8px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; transition: all 0.15s ease; }
.tnf-seg button i { font-size: 14px; }
.tnf-seg button.on { background: #ffffff; color: #6366f1; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1); }

/* Safety Box */
.tnf-safety { display: none; flex-direction: column; gap: 10px; padding: 11px; border-radius: 9px; background: rgba(99, 102, 241, 0.04); border: 1px solid rgba(99, 102, 241, 0.18); margin-top: 4px; }
.tnf-safety.show { display: flex; }
.tnf-safety-hd { display: flex; align-items: center; justify-content: space-between; }
.tnf-badge-safe { font-size: 10.5px; font-weight: 700; color: #059669; background: #ecfdf5; border: 1px solid rgba(16, 185, 129, 0.3); padding: 1px 7px; border-radius: 20px; }

/* Sticky Action Footer */
.tnf-filters-footer { padding: 11px 14px; background: #ffffff; border-top: 1px solid #e2e8f0; flex-shrink: 0; box-shadow: 0 -3px 12px rgba(15, 23, 42, 0.04); }
.tnf-btn-reset { width: 38px; height: 38px; border-radius: 8px; border: 1px solid #e2e8f0; background: #f8fafc; color: #64748b; font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s ease; flex-shrink: 0; }
.tnf-btn-reset:hover { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; }
.tnf-btn { height: 38px; padding: 0 14px; border-radius: 8px; border: none; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: filter 0.12s, transform 0.08s; white-space: nowrap; }
.tnf-btn i { font-size: 16px; }
.tnf-btn:active { transform: scale(0.985); }
.tnf-btn-primary { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; box-shadow: 0 3px 10px rgba(99, 102, 241, 0.3); }
.tnf-btn-primary:hover { filter: brightness(1.06); }
.tnf-btn-primary[disabled] { opacity: 0.6; cursor: default; }
.tnf-btn-join { background: linear-gradient(135deg, #10b981, #059669); color: #fff; box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3); }
.tnf-btn-join:hover { filter: brightness(1.06); }
.tnf-btn-stop { background: #fee2e2; color: #dc2626; border: 1px solid rgba(220, 38, 38, 0.35); }
.tnf-results { display: flex; flex-direction: column; min-width: 0; background: #fff; }
.tnf-rbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #eef2f7; flex-wrap: wrap; }
.tnf-count { font-size: 13px; color: #334155; }
.tnf-count b { color: #0f172a; font-variant-numeric: tabular-nums; }
.tnf-chip { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: #eef2ff; color: #6366f1; }
.tnf-rbar-sp { flex: 1; }
.tnf-link { background: none; border: none; color: #6366f1; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 6px 8px; border-radius: 7px; display: inline-flex; align-items: center; gap: 5px; }
.tnf-link i { font-size: 15px; }
.tnf-link:hover { background: #eef2ff; }
.tnf-prog { display: none; padding: 11px 16px; border-bottom: 1px solid #eef2f7; background: #f8fafc; gap: 10px; align-items: center; }
.tnf-prog.show { display: flex; }
.tnf-prog-bar { flex: 1; height: 8px; border-radius: 20px; background: #e5e7eb; overflow: hidden; }
.tnf-prog-fg { height: 100%; width: 0%; border-radius: 20px; background: linear-gradient(90deg, #6366f1, #8b5cf6); transition: width 0.35s ease; }
.tnf-prog-txt { font-size: 12.5px; font-weight: 700; color: #6366f1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tnf-prog-state { font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tnf-tablewrap { flex: 1; min-height: 0; overflow: auto; }
table.tnf-tbl { width: 100%; border-collapse: collapse; min-width: 620px; }
.tnf-tbl thead th { position: sticky; top: 0; background: #fff; z-index: 1; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; padding: 10px 12px; border-bottom: 1px solid #e2e8f0; }
.tnf-tbl th.tnf-numh, .tnf-tbl td.tnf-numc { text-align: right; }
.tnf-tbl th.tnf-mid, .tnf-tbl td.tnf-mid { text-align: center; }
.tnf-tbl tbody td { padding: 11px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.tnf-tbl tbody tr:hover { background: #f8fafc; }
.tnf-cb { width: 17px; height: 17px; accent-color: #6366f1; cursor: pointer; }
.tnf-g { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tnf-av { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; object-fit: cover; background: #eef2ff; }
.tnf-gname { font-weight: 600; color: #0f172a; font-size: 13.5px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tnf-gname a { color: inherit; text-decoration: none; }
.tnf-gname a:hover { color: #6366f1; }
.tnf-gid { font-size: 11.5px; color: #94a3b8; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tnf-val { font-weight: 600; color: #0f172a; font-size: 13.5px; }
.tnf-sub { font-size: 11px; color: #94a3b8; }
.tnf-badge { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; display: inline-block; }
.tnf-badge.s-wait { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
.tnf-badge.s-doing { background: #fef3c7; color: #d97706; }
.tnf-badge.s-done { background: #dcfce7; color: #16a34a; }
.tnf-badge.s-pending { background: #dbeafe; color: #2563eb; }
.tnf-badge.s-err { background: #fef3c7; color: #b45309; }
.tnf-badge.s-fail { background: #fee2e2; color: #dc2626; }
.tnf-join { padding: 6px 13px; border-radius: 8px; border: 1px solid rgba(99, 102, 241, 0.4); background: #eef2ff; color: #6366f1; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.tnf-join:hover { background: #6366f1; color: #fff; }
.tnf-join[disabled] { opacity: 0.55; cursor: default; background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.tnf-empty { padding: 54px 20px; text-align: center; color: #64748b; }
.tnf-empty i { font-size: 40px; color: #cbd5e1; display: block; margin-bottom: 8px; }
.tnf-empty p { margin: 0; font-size: 13.5px; }
.tnf-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #334155; cursor: pointer; user-select: none; }
.tnf-check input { width: 16px; height: 16px; accent-color: #6366f1; cursor: pointer; }
.tnf-ta { position: relative; }
.tnf-ta-clear { position: absolute; right: 9px; top: 9px; font-size: 17px; color: #94a3b8; cursor: pointer; }
.tnf-ta-clear:hover { color: #ef4444; }
.tnf-ta-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); max-height: 240px; overflow-y: auto; padding: 4px; }
.tnf-ta-item { padding: 8px 10px; border-radius: 7px; font-size: 13px; color: #0f172a; cursor: pointer; }
.tnf-ta-item:hover { background: #eef2ff; color: #4f46e5; }
.tnf-ta-msg { padding: 9px 10px; font-size: 12.5px; color: #94a3b8; }
.tnf-spin { display: inline-block; animation: tnfSpin 0.7s linear infinite; }
@keyframes tnfSpin { to { transform: rotate(360deg); } }
@media (max-width: 860px) { .tnf-body { grid-template-columns: 1fr; overflow-y: auto; } .tnf-filters { border-right: none; border-bottom: 1px solid #eef2f7; } }
@media (prefers-reduced-motion: reduce) { .tnf-spin, .tnf-prog-fg { animation: none; transition: none; } }

/* Dark mode */
[data-bs-theme="dark"] .tnf-body { background: #0f1420; }
[data-bs-theme="dark"] .tnf-filters { background: #131823; border-color: #232b36; }
[data-bs-theme="dark"] .tnf-filters-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); }
[data-bs-theme="dark"] .tnf-sec-card { background: #181f2c; border-color: #262e3d; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
[data-bs-theme="dark"] .tnf-sec-card:hover { border-color: #384357; }
[data-bs-theme="dark"] .tnf-sec-hd { background: #1c2433; border-color: #262e3d; color: #cbd5e1; }
[data-bs-theme="dark"] .tnf-sec-ic { color: #818cf8; }
[data-bs-theme="dark"] .tnf-field label { color: #cbd5e1; }
[data-bs-theme="dark"] .tnf-in { background: #111622; border-color: #2a3341; color: #f1f5f9; }
[data-bs-theme="dark"] .tnf-in:focus { border-color: #818cf8; background: #111622; box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2); }
[data-bs-theme="dark"] .tnf-in::placeholder { color: #64748b; }
[data-bs-theme="dark"] .tnf-range-lbl { color: #64748b; }
[data-bs-theme="dark"] .tnf-toggle-card { background: #111622; border-color: #262e3d; }
[data-bs-theme="dark"] .tnf-toggle-card:hover { background: #151b29; border-color: #384357; }
[data-bs-theme="dark"] .tnf-toggle-title { color: #f1f5f9; }
[data-bs-theme="dark"] .tnf-toggle-desc { color: #94a3b8; }
[data-bs-theme="dark"] .tnf-slider { background-color: #334155; }
[data-bs-theme="dark"] .tnf-seg { background: #111622; border-color: #262e3d; }
[data-bs-theme="dark"] .tnf-seg button { color: #94a3b8; }
[data-bs-theme="dark"] .tnf-seg button.on { background: #263145; color: #a5b4fc; }
[data-bs-theme="dark"] .tnf-safety { background: rgba(99, 102, 241, 0.08); border-color: rgba(99, 102, 241, 0.25); }
[data-bs-theme="dark"] .tnf-badge-safe { background: rgba(16, 185, 129, 0.15); color: #34d399; border-color: rgba(16, 185, 129, 0.4); }
[data-bs-theme="dark"] .tnf-filters-footer { background: #161b22; border-color: #232b36; box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.25); }
[data-bs-theme="dark"] .tnf-btn-reset { background: #111622; border-color: #2a3341; color: #cbd5e1; }
[data-bs-theme="dark"] .tnf-btn-reset:hover { background: #1a2230; color: #ffffff; border-color: #384357; }
[data-bs-theme="dark"] .tnf-unit { color: #94a3b8; }
[data-bs-theme="dark"] .tnf-results { background: #161b22; border-color: #232b36; }
[data-bs-theme="dark"] .tnf-btn-stop { background: #3a1a1a; color: #f87171; border-color: rgba(248, 113, 113, 0.35); }
[data-bs-theme="dark"] .tnf-rbar, [data-bs-theme="dark"] .tnf-prog { border-color: #232b36; }
[data-bs-theme="dark"] .tnf-count { color: #cbd5e1; }
[data-bs-theme="dark"] .tnf-count b, [data-bs-theme="dark"] .tnf-val, [data-bs-theme="dark"] .tnf-gname { color: #f1f5f9; }
[data-bs-theme="dark"] .tnf-chip { background: #232b45; color: #a5b4fc; }
[data-bs-theme="dark"] .tnf-link { color: #a5b4fc; }
[data-bs-theme="dark"] .tnf-link:hover { background: #232b45; }
[data-bs-theme="dark"] .tnf-prog { background: #1b212c; }
[data-bs-theme="dark"] .tnf-prog-bar { background: #2a3341; }
[data-bs-theme="dark"] .tnf-prog-txt { color: #a5b4fc; }
[data-bs-theme="dark"] .tnf-prog-state { color: #94a3b8; }
[data-bs-theme="dark"] .tnf-tbl thead th { background: #161b22; color: #94a3b8; border-color: #2a3341; }
[data-bs-theme="dark"] .tnf-tbl tbody td { border-color: #232b36; }
[data-bs-theme="dark"] .tnf-tbl tbody tr:hover { background: #1b212c; }
[data-bs-theme="dark"] .tnf-gid, [data-bs-theme="dark"] .tnf-sub { color: #64748b; }
[data-bs-theme="dark"] .tnf-badge.s-wait { background: #1b212c; color: #94a3b8; border-color: #2a3341; }
[data-bs-theme="dark"] .tnf-badge.s-doing, [data-bs-theme="dark"] .tnf-badge.s-err { background: #3a2c0a; color: #fbbf24; }
[data-bs-theme="dark"] .tnf-badge.s-done { background: #14331f; color: #4ade80; }
[data-bs-theme="dark"] .tnf-badge.s-pending { background: #12233f; color: #60a5fa; }
[data-bs-theme="dark"] .tnf-badge.s-fail { background: #3a1a1a; color: #f87171; }
[data-bs-theme="dark"] .tnf-join { background: #232b45; color: #a5b4fc; border-color: rgba(129, 140, 248, 0.4); }
[data-bs-theme="dark"] .tnf-join:hover { background: #6366f1; color: #fff; }
[data-bs-theme="dark"] .tnf-join[disabled] { background: #1b212c; color: #64748b; border-color: #2a3341; }
[data-bs-theme="dark"] .tnf-empty { color: #94a3b8; }
[data-bs-theme="dark"] .tnf-empty i { color: #3a4658; }
[data-bs-theme="dark"] .tnf-check { color: #cbd5e1; }
[data-bs-theme="dark"] .tnf-ta-menu { background: #1b212c; border-color: #2a3341; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
[data-bs-theme="dark"] .tnf-ta-item { color: #f1f5f9; }
[data-bs-theme="dark"] .tnf-ta-item:hover { background: #232b45; color: #a5b4fc; }
[data-bs-theme="dark"] .tnf-ta-msg { color: #64748b; }