/* ═══ GỬI HỒ SƠ CHO TRƯỜNG — giáo viên cá nhân (migration_140, 21/10/2026) ═══════════════════════════════════════
   Ba tab: Soạn gửi · Đã gửi · Người nhận & kết nối. Dùng lại .pq-tabs, .og-modal/.og-hop, .badge, .qm của quanly.html.
   Bảng xem trước KHÔNG có nút nên cuộn được cả hai chiều trong khung 350px; bảng Đã gửi / Người nhận có nút nên màn hẹp
   đổi hàng thành thẻ dọc (nhãn cột lấy từ data-nhan), không bọc overflow-x. */
#gh-tabs button[hidden] { display:none; }
#view-guihoso .gh-bar { display:flex; flex-wrap:wrap; gap:var(--k3); align-items:flex-end; margin:0 0 var(--k4); }
#view-guihoso .gh-o, #gh-modal-gui .gh-o, #gh-modal-nn .gh-o, #gh-modal-lk .gh-o { flex:1 1 200px; min-width:0; margin-bottom:var(--k3); }
#view-guihoso .gh-bar .gh-o { margin-bottom:0; }
#view-guihoso .gh-o[hidden] { display:none; }
#view-guihoso .gh-o-rong { flex-basis:320px; }
#view-guihoso .gh-o > label, #gh-modal-gui .gh-o > label, #gh-modal-nn .gh-o > label { display:block; font-size:var(--t-nho); color:var(--n-600); margin-bottom:var(--k1); }
#view-guihoso .gh-o > .nhan-o { display:flex; align-items:center; gap:6px; margin-bottom:var(--k1); }
#view-guihoso .gh-o > .nhan-o > label { margin:0; font-size:var(--t-nho); color:var(--n-600); }
#view-guihoso .gh-o input, #view-guihoso .gh-o select, #gh-modal-gui .gh-o input, #gh-modal-gui .gh-o select,
#gh-modal-gui .gh-o textarea, #gh-modal-nn .gh-o input, #gh-modal-nn .gh-o select { margin:0; }
#gh-dot-tim { margin-bottom:var(--k2) !important; }
#gh-modal-gui textarea { min-height:72px; }
.gh-phu { font-size:var(--t-sm); color:var(--n-500); margin:var(--k1) 0 0; overflow-wrap:anywhere; }
.gh-thong-bao { border:1px solid var(--n-200); background:var(--n-50); border-radius:var(--r-vua); padding:var(--k3) var(--k4); color:var(--n-700); font-size:var(--t-nho); }
.gh-thong-bao[hidden], .gh-xem[hidden], .gh-doc[hidden], #gh-nn-bang[hidden] { display:none; }
.gh-hang-nut { display:flex; flex-wrap:wrap; align-items:center; gap:var(--k2); margin-top:var(--k3); }
.gh-hang-nut button, #gh-gui-bang .gh-thaotac button, #gh-nn-bang .gh-thaotac button,
#gh-modal-gui .og-hang-nut button, #gh-modal-nn .og-hang-nut button, #gh-modal-lk .og-hang-nut button, #view-guihoso .gh-bar > button,
.gh-lk-nut button { margin:0; padding:6px 12px; font-size:var(--t-sm); white-space:nowrap; }
#gh-modal-gui .og-hang-nut, #gh-modal-nn .og-hang-nut, #gh-modal-lk .og-hang-nut { display:flex; flex-wrap:wrap; gap:var(--k2); }
.gh-nho { display:flex; align-items:center; gap:6px; font-size:var(--t-nho); margin:0 0 var(--k3); }
#gh-g-kq .ok, #gh-g-kq .canh { margin:0 0 var(--k3); padding:var(--k3); border-radius:var(--r-vua); font-size:var(--t-nho); }
#gh-g-kq .ok { background:var(--muc-50); color:var(--muc-800); }
#gh-g-kq .canh { background:var(--luu-nen); color:var(--n-800); border:1px solid var(--luu-vien); }

/* Xem trước: khung cuộn hai chiều, đầu cột dính */
.gh-xem { margin:0 0 var(--k3); }
.gh-xem h3 { margin:0; font-size:var(--t-lon); overflow-wrap:anywhere; }
.gh-cuon { max-height:350px; overflow:auto; border:1px solid var(--n-200); border-radius:var(--r-vua); margin-top:var(--k3); }
#gh-xem-bang { border-collapse:collapse; font-size:var(--t-nho); min-width:100%; }
#gh-xem-bang th, #gh-xem-bang td { padding:6px 8px; border-bottom:1px solid var(--n-100); text-align:left; vertical-align:top; white-space:nowrap; }
#gh-xem-bang th { position:sticky; top:0; z-index:1; background:var(--trang); font-size:var(--t-sm); color:var(--n-600); border-bottom:1px solid var(--n-300); }
#gh-xem-bang td.so { text-align:center; font-variant-numeric:tabular-nums; }
#gh-xem-bang td.dai { white-space:normal; min-width:200px; }

/* Đã gửi · Người nhận */
#gh-gui-bang, #gh-nn-bang { width:100%; table-layout:fixed; border-collapse:collapse; font-size:var(--t-nho); }
#gh-gui-bang th, #gh-nn-bang th { text-align:left; padding:var(--k2) 6px; font-size:var(--t-sm); color:var(--n-600); border-bottom:1px solid var(--n-300); background:var(--trang); }
#gh-gui-bang td, #gh-nn-bang td { padding:var(--k2) 6px; border-bottom:1px solid var(--n-100); vertical-align:top; overflow-wrap:anywhere; }
#gh-gui-bang td small, #gh-nn-bang td small { display:block; color:var(--n-500); font-size:var(--t-sm); }
#gh-gui-bang .badge { margin-left:0; }
#gh-gui-bang .badge.ngung { background:var(--n-100); color:var(--n-600); border-color:var(--n-200); }
#gh-gui-bang tr.het td { color:var(--n-500); }
.gh-doc { max-height:520px; overflow-y:auto; overflow-x:hidden; }
.gh-doc thead th { position:sticky; top:0; z-index:1; }
#gh-gui-bang .gh-thaotac, #gh-nn-bang .gh-thaotac { display:flex; flex-wrap:wrap; gap:var(--k1); justify-content:flex-end; }

@media (max-width:640px) {
  #gh-gui-bang colgroup, #gh-nn-bang colgroup, #gh-gui-bang thead, #gh-nn-bang thead { display:none; }
  #gh-gui-bang, #gh-gui-bang tbody, #gh-gui-bang tr, #gh-gui-bang td,
  #gh-nn-bang, #gh-nn-bang tbody, #gh-nn-bang tr, #gh-nn-bang td { display:block; width:auto; }
  #gh-gui-bang tr, #gh-nn-bang tr { border:1px solid var(--n-200); border-radius:var(--r-vua); margin:0 0 var(--k2); padding:var(--k1) var(--k2); background:var(--trang); }
  #gh-gui-bang tr[hidden], #gh-nn-bang tr[hidden] { display:none; }
  #gh-gui-bang td, #gh-nn-bang td { border:0; padding:4px 0; }
  #gh-gui-bang td[data-nhan]::before, #gh-nn-bang td[data-nhan]::before { content:attr(data-nhan); display:block; font-size:var(--t-xs); color:var(--n-500); }
  #gh-gui-bang .gh-thaotac, #gh-nn-bang .gh-thaotac { justify-content:flex-start; }
}

/* Kết nối hệ của trường (migration_141): một khối ở đầu tab Người nhận & kết nối */
.gh-lk { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--k3); margin:0 0 var(--k4);
         border:1px solid var(--n-200); background:var(--n-50); border-radius:var(--r-vua); padding:var(--k3) var(--k4); }
.gh-lk.co { border-color:var(--muc-200); background:var(--muc-50); }
.gh-lk-chu { flex:1 1 280px; min-width:0; }
.gh-lk-chu b { display:block; overflow-wrap:anywhere; }
.gh-lk-nut { display:flex; flex-wrap:wrap; align-items:center; gap:var(--k2); }
.gh-lk-nut button[hidden] { display:none; }