/* ============================================================================
   GroupPanel — gom vùng nhập liệu trong 1 panel cha thành các NHÓM co/mở được.
   Đi kèm: Script/MySystem/jsTemp/exComponent/06-grouppanel.js

   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,
       không phải sờ tới từng nút DOM (rẻ hơn hẳn khi panel có vài chục nhóm). */
    /* Màu bám TÔNG PHÂN HỆ (fb-20260817-191753 vòng 2): PHA LOÃNG tông của phân hệ ĐANG ĐỨNG
       rồi làm nhạt cùng màu — KHÔNG ép nguyên màu đặc (đậm quá lại rợn).
       ⚠ SỬA VÒNG 1: vòng trước bám --main-color, nhưng trong BÀN LÀM VIỆC (panel ② GroupPanel)
         chỉ có --accent được renderRole set theo TÔNG PHÂN HỆ (accentOf → block color); --main-color
         ở master.css cố định #2563eb (xanh) → header nhóm XANH trong khi phân hệ TÍM ⇒ lạc tông.
       ⇒ Ưu tiên --accent (tông phân hệ trong bàn làm việc). Nếu không có (ngoài .blv-root — module
         iframe/dialog) thì lùi về --main-color (banlamviec-dash.js set = màu phân hệ ở iframe),
         cuối cùng mới #2563eb.
       Cấu hình «Giao diện…» đặt màu riêng vẫn thắng: JS set trực tiếp --gp-nen-hd/--gp-chu-hd
       (inline lên .gp-cha) đè lên các giá trị mặc định này. */
    --gp-nen-hd: color-mix(in srgb, var(--accent, var(--main-color, #2563eb)) 12%, #fff);
    --gp-chu-hd: color-mix(in srgb, var(--accent, var(--main-color, #2563eb)) 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,
       nên các khối không thể mỗi nơi một font như trước. */
    --gp-font-nhan: 12px;
    --gp-mau-nhan: #334155;
    --gp-font-o: 13px;
    --gp-rong-nhan: 132px;
    --gp-vien-nhan: var(--accent, var(--main-color, #2563eb));
    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: 12.5px;
}
.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: #fff;
    font-size: 12.5px;
    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; }

/* 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; }

/* Nút trên header: cấu hình rồi caret — caret luôn ở SAU CÙNG. */
.gp-nut {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .55;
    cursor: pointer;
    border-radius: 3px;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
}
.gp-nut:hover { opacity: 1; background: rgba(0,0,0,.07); }
.gp-caret i { transition: transform var(--gp-thoigian) ease; display: inline-block; }
.gp-nhom.gp-mo > .gp-hd .gp-caret i { transform: rotate(180deg); }

/* ── 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 ──
   Mọi ô đều dùng chung một hàng này nên nút định dạng (A26) và nút chức năng riêng của
   control (A28) không bao giờ đè nhau hay lệch cao thấp. */
.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: #475569; 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: 11.5px; gap: 5px; }
.gp-cong .gp-vach { width: 1px; height: 14px; background: var(--line, #d0d7de); margin: 0 3px; }
html[data-theme='dark'] .gp-cong button { color: #cbd5e1; }
html[data-theme='dark'] .gp-cong button:hover { background: rgba(255,255,255,.10); }

/* ── Ô NHIỀU DÒNG: khung bao TRỌN ô (tiêu đề + vùng nhập), có vạch ngăn ──
   Trước đây chỉ có viền quanh vùng nhập nên tiêu đề trôi lơ lửng bên ngoài, nhìn rời rạc.
   Nay cả cụm nằm trong một khung; hàng tiêu đề có vạch ngăn với vùng nhập bên dưới. */
.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, #2563eb)); }
/* Ô nhiều dòng GIỮ khung dọc kể cả khi panel bật «nhãn ngang» — tiêu đề nằm trong khung. */
.gp-noi.gp-ngang > .gp-o.gp-o-nhieu { display: flex; }
html[data-theme='dark'] .gp-o.gp-o-nhieu { background: #1c1f25; border-color: #3a4150; }
html[data-theme='dark'] .gp-o.gp-o-nhieu > .gp-o-hd { background: rgba(255,255,255,.04); }

/* Dropdown của exComponent mở từ hộp cấu hình phải NỔI trên lớp phủ (99990). */
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: #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, #2563eb)); box-shadow: 0 0 3px 1px var(--tranfer-color2, rgba(37,99,235,.2)); }
.gp-rte:empty:before { content: attr(data-goi); color: #94a3b8; }
.gp-rte p { margin: 0 0 4px; }
.gp-rte ul, .gp-rte ol { margin: 0 0 4px; padding-left: 20px; }
html[data-theme='dark'] .gp-rte { background: #1c1f25; border-color: #3a4150; }

/* ── Ô 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; }

/* ── NHÃN NGANG HÀNG với ô nhập (tuỳ chọn, cả panel hoặc riêng từng nhóm) ──
   Nhãn chiếm đúng một cột rộng cố định ⇒ mọi ô thẳng hàng, không so le. */
.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; }
/* ô nào không có nhãn thì trải hết 2 cột, khỏi thụt lề vô cớ */
.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 ──
   (mặc định tắt; bật bằng lớp .gp-cuon hoặc cấu hình «Cuộn trong panel») */
.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 từ máy chủ, lúc người dùng chọn "không hiệu ứng",
   và khi hệ điều hành 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 TRÌNH DUYỆT PHÂN TÍCH
   HTML — không đợi DOMContentLoaded — nên không có khung hình nào thấy nhóm bung ra
   rồi mới thu lại. Thư viện gắn .gp-xong khi dựng xong là hiện.
   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 — dữ liệu lâm sàng không bao giờ được phép biến mất vì một lỗi JS. */
[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); }
.gp-tha-duoi { box-shadow: inset 0 -2px 0 0 var(--gp-vien-nhan); }

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

/* ── Hộp thoại cấu hình ──────────────────────────────────────────────────── */
.gp-phu {
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: rgba(15,23,42,.42);
    display: flex;
    align-items: center;
    justify-content: center;
}
.gp-hop {
    width: 940px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    background: #fff;
    color: #1f2937;
    border-radius: 6px;
    box-shadow: 0 18px 48px rgba(0,0,0,.3);
    font-size: 13px;
}
.gp-hop.nho { width: 520px; }
.gp-hop > .h { border-top: 2px solid var(--accent, var(--main-color, #2563eb));
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 8px 0 14px;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
}
.gp-hop > .h .sp { flex: 1; }
.gp-hop > .h .x { width: 28px; height: 28px; border: 0; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; color: #6b7280; border-radius: 4px; }
.gp-hop > .h .x:hover { background: #f3f4f6; color: #111827; }
.gp-hop > .b { flex: 1; overflow: auto; padding: 12px 14px; }
/* Chân hộp LUÔN một hàng: nowrap tuyệt đối, nhãn không ngắt dòng, ô chọn co được,
   nút giữ nguyên bề rộng. Trước đây để wrap nên thêm một nút là vỡ thành 2 hàng. */
.gp-hop > .f { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; padding: 10px 14px; border-top: 1px solid #e5e7eb; 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: 12.5px; color: #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 .gp-nut2 { flex: 0 0 auto; white-space: nowrap; }

.gp-tabs { display: flex; gap: 0; border-bottom: 1px solid #e5e7eb; padding: 0 14px; }
.gp-tabs button {
    border: 0; border-bottom: 2px solid transparent; background: transparent;
    padding: 9px 13px; font-size: 13px; color: #374151; cursor: pointer;
}
.gp-tabs button.on { border-bottom-color: var(--accent, var(--main-color, #2563eb)); color: var(--accent, var(--main-color, #2563eb)); font-weight: 600; }
.gp-pane { display: none; }
.gp-pane.on { display: block; }

/* ĐỒNG BỘ CHIỀU CAO / BỀ RỘNG — yêu cầu "không nhấp nhô".
   KHÔNG tự đặt chiều cao riêng: bám đúng token ô nhập dùng chung của hệ
   (--ex-input-height/pad/radius trong partCss/bootStrapCustom.css) để hộp cấu hình
   cao bằng mọi ô nhập khác trong sản phẩm, và tự theo khi hệ đổi chuẩn
   (vd window.setInputFlat bật .ex-input-flat). Ô màu, nút, TomSelect, nhãn
   checkbox đều lấy CÙNG một chiều cao ⇒ một hàng không thể nhấp nhô. */
.gp-hang { display: grid; grid-template-columns: 148px 1fr; gap: 8px 10px; align-items: center; margin-bottom: 9px; }
.gp-hang > label { font-size: 12.5px; color: #4b5563; }
.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 #cbd5e1; border-radius: var(--ex-input-radius, 2px); background: #fff; color: #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 #cbd5e1;
    border-radius: var(--ex-input-radius, 2px); background: #fff;
}
.gp-hop textarea { font-size: 13px; padding: var(--ex-input-pad-y, 4px) var(--ex-input-pad-x, 8px); border: 1px solid #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: 12.5px; color: #374151; cursor: pointer; margin: 0; }
.gp-hop label.ck input { width: 15px; height: 15px; margin: 0; }

.gp-nut2 {
    height: var(--ex-input-height, 32px); padding: 0 12px; font-size: 12.5px; cursor: pointer;
    border: 1px solid #cbd5e1; border-radius: var(--ex-input-radius, 2px); background: #fff; color: #374151;
    display: inline-flex; align-items: center; gap: 6px;
}
.gp-nut2:hover { border-color: #94a3b8; background: #f8fafc; }
.gp-nut2.chinh { background: var(--accent, var(--main-color, #2563eb)); border-color: var(--accent, var(--main-color, #2563eb)); color: #fff; }
.gp-nut2.chinh:hover { filter: brightness(1.07); }
.gp-nut2[disabled] { opacity: .5; cursor: not-allowed; }

.gp-bang { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.gp-bang th, .gp-bang td { border-bottom: 1px solid #eef2f7; padding: 5px 8px; text-align: left; vertical-align: middle; }
.gp-bang th { font-weight: 600; color: #4b5563; background: #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: 11.5px; border: 1px solid #cbd5e1; border-radius: 10px; background: #f8fafc; cursor: pointer; color: #334155; }
.gp-chip:hover { border-color: var(--gp-vien-nhan, #2563eb); color: var(--gp-vien-nhan, #2563eb); }
.gp-mo-ta { font-size: 11.5px; color: #6b7280; margin: 2px 0 10px; line-height: 1.55; }
.gp-canh { display: flex; gap: 8px; align-items: flex-start; padding: 7px 10px; border-radius: 4px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 12px; margin-bottom: 10px; }

/* ── Nền tối ─────────────────────────────────────────────────────────────── */
html[data-theme='dark'] .gp-cha {
    /* Nền tối cũng bám TÔNG PHÂN HỆ: pha một chút --main-color vào nền tối trung tính,
       giữ chữ sáng cho dễ đọc. Cấu hình màu riêng vẫn đè lên như ở nền sáng. */
    --gp-nen-hd: color-mix(in srgb, var(--accent, var(--main-color, #2563eb)) 26%, #2a2f3a);
    --gp-chu-hd: #e5e7eb;
    --gp-vien-con: 1px solid #3a4150;
}
html[data-theme='dark'] .gp-hd:hover { box-shadow: inset 0 0 0 999px rgba(255,255,255,.05); }
html[data-theme='dark'] .gp-nut:hover { background: rgba(255,255,255,.12); }
html[data-theme='dark'] .gp-menu { background: #23262d; border-color: #3a4150; color: #e5e7eb; }
html[data-theme='dark'] .gp-menu .mi:hover { background: #2f3542; }
html[data-theme='dark'] .gp-menu .ngan { background: #3a4150; }
html[data-theme='dark'] .gp-hop { background: #23262d; color: #e5e7eb; }
html[data-theme='dark'] .gp-hop > .h,
html[data-theme='dark'] .gp-hop > .f,
html[data-theme='dark'] .gp-tabs { border-color: #3a4150; }
html[data-theme='dark'] .gp-hop .form-control,
html[data-theme='dark'] .gp-hop input[type=text],
html[data-theme='dark'] .gp-hop input[type=number],
html[data-theme='dark'] .gp-hop select,
html[data-theme='dark'] .gp-hop textarea { background: #1c1f25; border-color: #3a4150; color: #e5e7eb; }
html[data-theme='dark'] .gp-nut2 { background: #2a2f3a; border-color: #3a4150; color: #e5e7eb; }
html[data-theme='dark'] .gp-bang th { background: #2a2f3a; color: #cbd5e1; }
html[data-theme='dark'] .gp-bang th, html[data-theme='dark'] .gp-bang td { border-color: #343b47; }
html[data-theme='dark'] .gp-chip { background: #2a2f3a; border-color: #3a4150; color: #cbd5e1; }