/* CLINIC-SCOPE: shared */
/* ============================================================================
   GroupPanel — gom vùng nhập liệu trong 1 panel cha thành các NHÓM co/mở được.
   COMPONENT DÙNG CHUNG CỦA HOST (backlog D8). Đi kèm: Script/MySystem/jsTemp/exComponent/06-grouppanel.js
   Nạp ở _MainLayout — module KHÔNG chép bản riêng. Muốn đổi diện mạo cho MỘT màn thì khai lại
   biến --gp-* trên .gp-cha của màn đó (xem lam-bacsi-ttkham.css), đừng sửa luật chung ở đây.

   HAI ĐIỀU KIỆN THIẾT KẾ (đọc trước khi sửa):

   1) KHÔNG LẤP LOÉ. Thân nhóm ĐÓNG SẴN bằng CSS (grid-template-rows:0fr), JS chỉ
      THÊM lớp .gp-mo cho nhóm cần mở. Nhóm đặt mặc định ẩn/đóng vì thế không bao
      giờ "hiện ra rồi mới ẩn đi" — trạng thái đóng có ngay từ khung hình đầu tiên.

   2) KHÔNG TỐN HIỆU NĂNG. Hiệu ứng trượt chạy bằng grid-template-rows 0fr→1fr:
      hoàn toàn do trình duyệt hợp thành, KHÔNG đo chiều cao, KHÔNG JS mỗi khung
      hình (khác hẳn lối max-height/scrollHeight). Padding nằm ở lớp trong cùng
      nên không tham gia hoạt ảnh → không giật.
   ========================================================================== */

.gp-cha {
    /* Toàn bộ "Giao diện" cấu hình được đều là biến — đổi 1 biến, cả panel đổi.
       Màu bám TÔNG PHÂN HỆ: ưu tiên --accent (bàn làm việc KSK đặt theo phân hệ), lùi về
       --main-color rồi mới tới brand. Cấu hình «Giao diện…» đặt màu riêng vẫn thắng vì JS ghi
       thẳng --gp-nen-hd/--gp-chu-hd lên style của .gp-cha. */
    --gp-nen-hd: color-mix(in srgb, var(--accent, var(--main-color,#055952)) 12%, #fff);
    --gp-chu-hd: color-mix(in srgb, var(--accent, var(--main-color,#055952)) 60%, #1f2937);
    --gp-font-hd: 13px;
    --gp-dam-hd: 600;
    --gp-nen-than: transparent;
    --gp-vien-con: 1px solid var(--line, #d0d7de);
    --gp-vien-cha: 0;
    --gp-pad: 8px;
    --gp-mar: 6px;
    --gp-bo: 4px;
    --gp-thoigian: 180ms;
    /* ĐỒNG BỘ CHỮ trong mọi nhóm: nhãn và ô nhập chỉ lấy cỡ/màu từ 3 biến này. */
    --gp-font-nhan: 12px;
    --gp-mau-nhan: #334155;
    --gp-font-o: 13px;
    --gp-rong-nhan: 132px;
    --gp-vien-nhan: var(--accent, var(--main-color,#055952));
    border: var(--gp-vien-cha);
    position: relative;
}

.gp-nhom {
    margin: 0 0 var(--gp-mar) 0;
    border: var(--gp-vien-con);
    border-radius: var(--gp-bo);
    background: var(--gp-nen-than);
    overflow: hidden;
}

.gp-nhom.gp-an { display: none !important; }

/* fb-20260817-084549-141: khi TẤT CẢ nhóm bị ẩn, panel co về rỗng và mất chỗ bấm
   chuột phải. Dải này (JS bật khi mọi nhóm ẩn) giữ nút mở lại hộp cấu hình. */
.gp-trong {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 var(--gp-mar) 0;
    padding: 9px 12px;
    border: 1px dashed var(--gp-vien-nhan, #94a3b8);
    border-radius: var(--gp-bo);
    background: var(--gp-nen-hd);
    color: var(--gp-chu-hd);
    font-size: var(--fs-sm, 12px);
}
.gp-trong[hidden] { display: none !important; }
.gp-trong > i { opacity: .7; }
.gp-trong .gp-trong-chu { flex: 1 1 auto; }
.gp-trong .gp-trong-nut {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--gp-vien-nhan, #2563eb);
    border-radius: var(--gp-bo);
    background: var(--gp-vien-nhan, #2563eb);
    color: var(--surface);
    font-size: var(--fs-sm, 12px);
    cursor: pointer;
}
.gp-trong .gp-trong-nut:hover { filter: brightness(1.07); }

/* ── Header nhóm ─────────────────────────────────────────────────────────── */
.gp-hd {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 4px 0 10px;
    background: var(--gp-nen-hd);
    color: var(--gp-chu-hd);
    font-size: var(--gp-font-hd);
    font-weight: var(--gp-dam-hd);
    cursor: pointer;
    user-select: none;
    line-height: 1.2;
}
.gp-hd:hover { box-shadow: inset 0 0 0 999px rgba(0,0,0,.035); }

.gp-ten { white-space: nowrap; }
.gp-icon { flex: 0 0 auto; margin-right: -2px; }

/* Tóm tắt: chỉ hiện khi nhóm ĐANG THU — mở ra thì thông tin đã nằm trong thân. */
.gp-tt {
    flex: 1;
    min-width: 0;
    font-weight: 400;
    font-size: calc(var(--gp-font-hd) - 1px);
    opacity: .72;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gp-nhom.gp-mo > .gp-hd > .gp-tt { visibility: hidden; }
.gp-hd > .gp-dem { flex: 1; }
/* Khối data-gp-hd của màn nằm trên thanh tiêu đề (trước bánh răng): chữ/con trỏ thường, co được khi hẹp. */
.gp-hd > .gp-hd-cong {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    flex: 0 1 auto;
    min-width: 0;
    cursor: auto;
    user-select: text;
    font-weight: 400;
}

/* Nút trên header: cấu hình rồi caret — caret luôn ở SAU CÙNG.
   !important có chủ đích: giao-dien-phang.css ép MỌI nút trong vùng làm việc (.ws…) cao 32px bằng
   !important qua :where() (độ đặc hiệu 0) — nút 24px của nhóm phải thắng lại ở MỌI màn. */
.gp-cha .gp-nut {
    flex: 0 0 24px;
    width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    opacity: .55;
    cursor: pointer;
    border-radius: 3px;
    font-size: 12px !important;
    line-height: 24px !important;
    text-align: center;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.gp-cha .gp-nut:hover,
.gp-cha .gp-nut.gp-cfg[aria-expanded="true"] { opacity: 1; background: rgba(0,0,0,.07) !important; }
.gp-cha .gp-nut:focus-visible { opacity: 1; outline: 2px solid var(--gp-vien-nhan) !important; outline-offset: -2px; }
.gp-caret i { transition: transform var(--gp-thoigian) ease; display: inline-block; }
.gp-nhom.gp-mo > .gp-hd .gp-caret i { transform: rotate(180deg); }

/* Panel khoá cấu hình (chiAdmin với người không phải quản trị, hoặc khongCauHinh): giấu bánh răng
   (JS chặn thêm lần nữa). Kèm nút «Hiện lại nhóm…» của dải .gp-trong — cũng là một đường vào hộp. */
.gp-cha.gp-khoa-cfg .gp-cfg,
.gp-cha.gp-khoa-cfg .gp-trong-nut { display: none !important; }

/* ── Thân nhóm: ĐÓNG SẴN, mở bằng lớp .gp-mo ─────────────────────────────── */
.gp-than {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--gp-thoigian) ease;
}
.gp-nhom.gp-mo > .gp-than { grid-template-rows: 1fr; }

.gp-cat { overflow: hidden; min-height: 0; }
.gp-noi { padding: var(--gp-pad); display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* ── Đồng bộ chữ: nhãn & ô nhập trong nhóm đều theo biến, không tự đặt riêng ── */
.gp-noi label,
.gp-noi .gp-o > label,
.gp-noi .ktb-lbl-row > label { font-size: var(--gp-font-nhan) !important; color: var(--gp-mau-nhan) !important; font-weight: 500; }
.gp-noi input, .gp-noi textarea, .gp-noi select { font-size: var(--gp-font-o); }

/* ── A27: HÀNG TIÊU ĐỀ của ô — title dạt TRÁI, nút dạt PHẢI, căn giữa theo chiều dọc ── */
.gp-o-hd { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.gp-o-hd > label { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-o-hd .gp-cong { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.gp-cong button {
    width: 24px; height: 22px; padding: 0; line-height: 1; font-size: 12px;
    border: 1px solid transparent; border-radius: 3px; background: transparent;
    color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.gp-cong button:hover { background: rgba(0,0,0,.06); border-color: var(--gp-vien-nhan); color: var(--gp-vien-nhan); }
.gp-cong button.rong { width: auto; padding: 0 8px; font-size: var(--fs-xs, 11px); gap: 5px; }
.gp-cong .gp-vach { width: 1px; height: 14px; background: var(--line, #d0d7de); margin: 0 3px; }

/* ── Ô NHIỀU DÒNG: khung bao TRỌN ô (tiêu đề + vùng nhập), có vạch ngăn ── */
.gp-o.gp-o-nhieu {
    border: 1px solid var(--line, #d0d7de);
    border-radius: var(--gp-bo, 4px);
    background: var(--panel, #fff);
    display: flex; flex-direction: column; min-width: 0; overflow: hidden;
}
.gp-o.gp-o-nhieu > .gp-o-hd {
    padding: 2px 4px 2px 8px;
    border-bottom: 1px solid var(--line, #d0d7de);
    background: rgba(0,0,0,.025);
}
.gp-o.gp-o-nhieu > textarea,
.gp-o.gp-o-nhieu > .gp-rte {
    border: 0 !important; box-shadow: none !important; background: transparent !important;
    margin: 0; border-radius: 0;
}
.gp-o.gp-o-nhieu > textarea:focus, .gp-o.gp-o-nhieu > .gp-rte:focus { outline: none; }
.gp-o.gp-o-nhieu:focus-within { border-color: var(--accent, var(--main-color,#055952)); }
.gp-noi.gp-ngang > .gp-o.gp-o-nhieu { display: flex; }

/* Dropdown exComponent mở từ hộp cấu hình phải NỔI trên modal. */
body > .ts-dropdown.gp-tren { z-index: 100002 !important; }

/* ── A26/A29: ô soạn HTML (thay cho textarea khi ô được đặt kiểu «HTML») ── */
.gp-rte {
    min-height: 56px; padding: 4px 6px; overflow: auto;
    border: 1px solid var(--line, #d0d7de); background: var(--surface, #fff); color: inherit;
    font-size: var(--gp-font-o); line-height: 1.45; resize: vertical;
}
.gp-rte:focus { outline: none; border-color: var(--accent, var(--main-color,#055952)); box-shadow: 0 0 3px 1px var(--tranfer-color2, rgba(37,99,235,.2)); }
.gp-rte:empty:before { content: attr(data-goi); color: var(--muted-2); }
.gp-rte p { margin: 0 0 4px; }
.gp-rte ul, .gp-rte ol { margin: 0 0 4px; padding-left: 20px; }

/* ── Ô trong nhóm: ẩn/hiện + xếp thứ tự (thứ tự đặt bằng CSS order) ── */
.gp-o.gp-o-an { display: none !important; }

/* ── BỀ RỘNG ô = SỐ CỘT chiếm trong lưới thân nhóm ──
   Chỉ có tác dụng khi module tự khai thân nhóm (.gp-noi) là lưới CSS; nhóm xếp dọc (mặc định)
   thì grid-column vô nghĩa. Module đặt mặc định riêng thì đọc chính biến: span var(--gp-o-cot, 3). */
.gp-o.gp-o-cot { grid-column: span var(--gp-o-cot, 1); }

/* ── NHÃN NGANG HÀNG với ô nhập (tuỳ chọn, cả panel hoặc riêng từng nhóm) ── */
.gp-noi.gp-ngang > .gp-o {
    display: grid;
    grid-template-columns: var(--gp-rong-nhan) minmax(0, 1fr);
    align-items: start;
    column-gap: 10px;
    row-gap: 2px;
}
.gp-noi.gp-ngang > .gp-o > label,
.gp-noi.gp-ngang > .gp-o > .ktb-lbl-row { grid-column: 1; align-self: center; }
.gp-noi.gp-ngang > .gp-o > label { padding-top: 6px; align-self: start; }
.gp-noi.gp-ngang > .gp-o > input,
.gp-noi.gp-ngang > .gp-o > textarea,
.gp-noi.gp-ngang > .gp-o > select,
.gp-noi.gp-ngang > .gp-o > .ktb-cds-box,
.gp-noi.gp-ngang > .gp-o > .ktb-cd-box { grid-column: 2; }
.gp-noi.gp-ngang > .gp-o:not(:has(> label)) { display: block; }

/* ── Panel LẤP ĐẦY chiều cao còn lại và tự cuộn BÊN TRONG (bật bằng cuonTrong) ── */
.gp-cha.gp-cuon { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }

/* Tắt hiệu ứng: lúc áp cấu hình, lúc người dùng chọn "không hiệu ứng", và khi HĐH yêu cầu giảm chuyển động. */
.gp-cha.gp-im .gp-than,
.gp-cha.gp-im .gp-caret i { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
    .gp-than, .gp-caret i { transition: none !important; }
}

/* Panel tự dựng (data-gp-tudong): khối thô bị che NGAY TỪ LÚC PHÂN TÍCH HTML tới khi dựng xong.
   LƯỚI AN TOÀN: 06-grouppanel.js gắn .gp-xong cho MỌI panel sau 3s dù dựng được hay không. */
[data-gp-tudong]:not(.gp-xong) [data-gp-nhom] { visibility: hidden !important; }

/* ── Kéo thả sắp thứ tự (trong hộp cấu hình) ─────────────────────────────── */
.gp-keo { opacity: .45; }
.gp-tha-tren { box-shadow: inset 0 2px 0 0 var(--gp-vien-nhan, var(--brand, #1d6f5c)); }
.gp-tha-duoi { box-shadow: inset 0 -2px 0 0 var(--gp-vien-nhan, var(--brand, #1d6f5c)); }

/* ── Menu chuột phải ─────────────────────────────────────────────────────── */
.gp-menu {
    position: fixed;
    z-index: 100000;
    min-width: 208px;
    padding: 4px 0;
    background: var(--surface);
    border: 1px solid var(--grid-neutral-line, #d7dde5);
    border-radius: var(--radius, 2px);
    box-shadow: 0 8px 26px rgba(0,0,0,.16);
    font-size: 13px;
    color: var(--grid-neutral-text);
}
.gp-menu .mi { display: flex; align-items: center; gap: 9px; padding: 6px 14px; cursor: pointer; white-space: nowrap; }
.gp-menu .mi:hover { background: var(--surface-3, #eef2ff); }
.gp-menu .mi i { width: 14px; text-align: center; opacity: .7; }
.gp-menu .ngan { height: 1px; margin: 4px 0; background: var(--line); }
.gp-menu .nhan { padding: 4px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; opacity: .5; }

/* ── Popover neo theo nút (bánh răng «ẩn/hiện ô», danh sách «+N» của màn) ── */
.gp-pop {
    position: fixed;
    z-index: 1300;
    min-width: 230px;
    max-width: 300px;
    padding: 6px;
    background: var(--surface, #fff);
    border: 1px solid var(--line-2, #cbd5d0);
    border-radius: 4px;
    box-shadow: 0 10px 28px rgba(23,37,84, .16), 0 2px 6px rgba(23,37,84, .08);
    color: var(--text, #0f172a);
    font-size: 13px;
}
.gp-pop-h { padding: 4px 6px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line, #e5e7eb); font-weight: 600; color: var(--brand-dark, #13503f); }
.gp-pop label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 6px; border-radius: 3px; cursor: pointer; }
.gp-pop label:hover { background: var(--surface-hover, #f1f5f9); }
.gp-pop label > span { flex: 1 1 auto; }
.gp-pop label > small { color: var(--muted-2, #94a3b8); font-size: 11px; }
.gp-pop input[type=checkbox] { width: 15px; height: 15px; margin: 0; accent-color: var(--brand, #055952); }
.gp-pop input[type=checkbox]:disabled + span { color: var(--muted, #475569); }
.gp-pop-ghi { padding: 6px 6px 2px; margin-top: 4px; border-top: 1px solid var(--line, #e5e7eb); font-size: var(--fs-xs, 11px); color: var(--muted, #475569); line-height: 1.4; }
.gp-pop-chan { display: flex; justify-content: flex-end; padding: 6px 2px 0; }
.gp-pop .gp-pop-nut {
    height: 26px !important; min-height: 26px !important; padding: 0 10px !important; gap: 6px;
    display: inline-flex !important; align-items: center;
    border: 1px solid var(--line-2, #cbd5d0) !important; border-radius: 3px !important;
    background: var(--surface, #fff) !important; color: var(--brand-dark, #13503f) !important;
    font-size: 12px !important; cursor: pointer;
}
.gp-pop .gp-pop-nut:hover { border-color: var(--brand, #055952) !important; }
.gp-pop :focus-visible { outline: 2px solid var(--brand, #055952); outline-offset: 1px; }

/* ── Hộp thoại cấu hình (nội dung nằm trong modal của dialogDiv) ─────────── */
#gpHopLon_bs_body, #gpHopNho_bs_body { padding: 0 !important; }
.gp-hop { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 160px); color: var(--grid-neutral-text, var(--text, #0f172a)); font-size: 13px; }
.gp-hop > .b { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 14px; }
/* Chân hộp LUÔN một hàng: nhãn không ngắt dòng, ô chọn co được, nút giữ nguyên bề rộng. */
.gp-hop > .f { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); overflow: hidden; }
.gp-hop > .f .sp { flex: 1 1 10px; min-width: 6px; }
.gp-hop > .f label { white-space: nowrap; flex: 0 1 auto; font-size: var(--fs-sm, 12px); color: var(--pal-gray-500, #6b7280); margin: 0; overflow: hidden; text-overflow: ellipsis; }
.gp-hop > .f .o-muc { flex: 0 1 150px; min-width: 96px; }
.gp-hop > .f .o-pham { flex: 0 1 210px; min-width: 120px; }
.gp-hop > .f .ts-wrapper.o-muc { flex: 0 1 150px; min-width: 96px; width: auto; }
.gp-hop > .f .ts-wrapper.o-pham { flex: 0 1 210px; min-width: 120px; width: auto; }
.gp-hop > .f .gp-nut2 { flex: 0 0 auto; white-space: nowrap; }

.gp-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); padding: 0 14px; }
.gp-hop .gp-tabs button {
    border: 0 !important; border-bottom: 2px solid transparent !important; background: transparent !important;
    padding: 9px 13px; font-size: 13px; color: var(--pal-gray-700, #374151); cursor: pointer; border-radius: 0 !important;
}
.gp-hop .gp-tabs button.on { border-bottom-color: var(--accent, var(--main-color,#055952)) !important; color: var(--accent, var(--main-color,#055952)); font-weight: 600; }
.gp-pane { display: none; }
.gp-pane.on { display: block; }

/* ĐỒNG BỘ CHIỀU CAO / BỀ RỘNG — bám token ô nhập dùng chung (--ex-input-*), không tự đặt riêng. */
.gp-hang { display: grid; grid-template-columns: 148px 1fr; gap: 8px 10px; align-items: center; margin-bottom: 9px; }
.gp-hang > label { font-size: var(--fs-sm, 12px); color: var(--st-end-text, #4b5563); margin: 0; }
.gp-hang.doi { grid-template-columns: 148px 1fr 148px 1fr; }
.gp-hop .form-control,
.gp-hop input[type=text], .gp-hop input[type=number], .gp-hop select {
    height: var(--ex-input-height, 32px); min-height: var(--ex-input-height, 32px); box-sizing: border-box;
    font-size: 13px; width: 100%;
    padding: var(--ex-input-pad-y, 4px) var(--ex-input-pad-x, 8px);
    border: 1px solid var(--line-strong, #cbd5e1); border-radius: var(--ex-input-radius, 2px); background: var(--surface); color: var(--text-strong, #111827);
}
.gp-hop input[type=color] {
    height: var(--ex-input-height, 32px); min-height: var(--ex-input-height, 32px); width: 100%;
    padding: 2px; box-sizing: border-box; border: 1px solid var(--line-strong, #cbd5e1);
    border-radius: var(--ex-input-radius, 2px); background: var(--surface);
}
.gp-hop textarea { font-size: 13px; padding: var(--ex-input-pad-y, 4px) var(--ex-input-pad-x, 8px); border: 1px solid var(--line-strong, #cbd5e1); border-radius: var(--ex-input-radius, 2px); width: 100%; box-sizing: border-box; resize: vertical; }
.gp-hop .ts-wrapper { width: 100%; min-height: var(--ex-input-height, 32px); }
.gp-hop .ts-wrapper .ts-control { min-height: var(--ex-input-height, 32px); height: var(--ex-input-height, 32px); padding: 2px var(--ex-input-pad-x, 8px); font-size: 13px; border-radius: var(--ex-input-radius, 2px); }
.gp-hop label.ck { display: inline-flex; align-items: center; gap: 6px; height: var(--ex-input-height, 32px); font-size: var(--fs-sm, 12px); color: var(--pal-gray-700, #374151); cursor: pointer; margin: 0; }
.gp-hop label.ck input { width: 15px; height: 15px; margin: 0; }

.gp-hop .gp-nut2 {
    height: var(--ex-input-height, 32px) !important; min-height: var(--ex-input-height, 32px) !important; padding: 0 12px !important; font-size: var(--fs-sm, 12px) !important; cursor: pointer;
    border: 1px solid var(--line-strong, #cbd5e1); border-radius: var(--ex-input-radius, 2px); background: var(--surface); color: var(--pal-gray-700, #374151);
    display: inline-flex !important; align-items: center; gap: 6px;
}
.gp-hop .gp-nut2:hover { border-color: var(--muted-2); background: var(--surface-soft, #f8fafc); }
.gp-hop .gp-nut2.chinh { background: var(--accent, var(--main-color,#055952)); border-color: var(--accent, var(--main-color,#055952)); color: var(--btn-on, #fff); }
.gp-hop .gp-nut2.chinh:hover { filter: brightness(1.07); }
.gp-hop .gp-nut2[disabled] { opacity: .5; cursor: not-allowed; }

.gp-bang { width: 100%; border-collapse: collapse; font-size: var(--fs-sm, 12px); }
.gp-bang th, .gp-bang td { border-bottom: 1px solid var(--line, #eef2f7); padding: 5px 8px; text-align: left; vertical-align: middle; }
.gp-bang th { font-weight: 600; color: var(--st-end-text, #4b5563); background: var(--surface-soft, #f8fafc); position: sticky; top: 0; z-index: 1; }
.gp-bang tr.keo-duoc { cursor: grab; }
.gp-bang td.nut { width: 1%; white-space: nowrap; }

.gp-chip { display: inline-block; margin: 0 4px 4px 0; padding: 2px 7px; font-size: var(--fs-xs, 11px); border: 1px solid var(--line-strong, #cbd5e1); border-radius: var(--radius, 2px); background: var(--surface-soft, #f8fafc); cursor: pointer; color: var(--pal-slate-700, #334155); }
.gp-chip:hover { border-color: var(--gp-vien-nhan, #2563eb); color: var(--gp-vien-nhan, #2563eb); }
.gp-mo-ta { font-size: var(--fs-xs, 11px); color: var(--pal-gray-500, #6b7280); margin: 2px 0 10px; line-height: 1.55; }
.gp-mo-ta:empty { display: none; }

/* ── Hẹp (điện thoại): hàng 2 cặp xếp 1 cặp, chân hộp được xuống dòng, bảng cuộn ngang ── */
@media (max-width: 640px) {
    .gp-hang, .gp-hang.doi { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .gp-hop > .f { flex-wrap: wrap; }
    .gp-hop > .f .sp { flex-basis: 100%; height: 0; }
    .gp-pane[data-t="nhom"], .gp-pane[data-t="control"] { overflow-x: auto; }
    .gp-hop { max-height: calc(100vh - 110px); }
}