/* LaDo-GPMB 2.5.0 — giao diện theo dõi giải phóng mặt bằng (tông sáng) */

.lado-gpmb-root, .gpmb-overlay {
  --nen:#EFF4F7; --tam:#FFFFFF; --noi:#FFFFFF; --noi2:#E8EFF3; --vien:#D6E1E8;
  --vien2:#C3D2DB; --chu:#16262E; --chu2:#4F6774; --chu3:#7A909C;
  --b1:#6B7A8C; --b2:#2E6FA0; --b3:#12869A; --b4:#0E8F6C; --b5:#409B47;
  --b6:#7BA412; --b7:#DD8500; --canh:#C33B36;
  --do1:0 1px 2px rgba(22,38,46,.06); --do2:0 4px 14px rgba(22,38,46,.10);
  --do3:0 12px 34px rgba(22,38,46,.16);
  /* Xếp trước các họ font có đủ dấu tiếng Việt. Bỏ Helvetica Neue vì thiếu nhiều
     ký tự có dấu, trình duyệt phải chắp glyph từ font khác nên chữ so le. */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI","Noto Sans",
    Roboto,"Source Sans 3","Liberation Sans",Tahoma,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,"Liberation Mono","DejaVu Sans Mono",monospace;
}

/* ---------- khung ---------- */
.lado-gpmb-root { font-family:var(--font); font-size:14px; color:var(--chu);
  background:var(--nen); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  line-height:1.6; text-rendering:optimizeLegibility; font-variant-ligatures:none;
  font-kerning:normal; }
/* Tiếng Việt có dấu chồng hai tầng (ế ộ ữ ẩ), chiều cao dòng dưới 1,3 sẽ cắt mất dấu. */
.lado-gpmb-root h1, .lado-gpmb-root h2, .lado-gpmb-root h3, .lado-gpmb-root h4,
.gpmb-overlay h1, .gpmb-overlay h2, .gpmb-overlay h3, .gpmb-overlay h4 { line-height:1.38; }
.lado-gpmb-root *, .gpmb-overlay * { box-sizing:border-box; }
.lado-gpmb-root button, .gpmb-overlay button { font:inherit; color:inherit; background:none;
  border:0; cursor:pointer; }
.lado-gpmb-root input, .lado-gpmb-root select, .lado-gpmb-root textarea,
.gpmb-overlay input, .gpmb-overlay select, .gpmb-overlay textarea {
  font:inherit; color:var(--chu); background:#fff; border:1px solid var(--vien2);
  border-radius:7px; padding:7px 10px; width:100%; max-width:100%; }
.lado-gpmb-root input:focus, .lado-gpmb-root select:focus, .lado-gpmb-root textarea:focus,
.gpmb-overlay input:focus, .gpmb-overlay select:focus, .gpmb-overlay textarea:focus {
  outline:2px solid var(--b3); outline-offset:1px; border-color:var(--b3); }
.lado-gpmb-root ::-webkit-scrollbar, .gpmb-overlay ::-webkit-scrollbar { width:9px; height:9px; }
.lado-gpmb-root ::-webkit-scrollbar-thumb, .gpmb-overlay ::-webkit-scrollbar-thumb {
  background:var(--vien2); border-radius:5px; }

.gpmb-takeover { position:fixed; inset:0; z-index:999999; overflow:hidden; }
body.gpmb-khoa { overflow:hidden !important; }
body.gpmb-trang-rieng { margin:0; background:#EFF4F7; }
.gpmb-tai { display:flex; align-items:center; justify-content:center; height:100%;
  min-height:220px; color:var(--chu3); font-family:var(--font); }
.gpmb-ung { display:grid; grid-template-rows:auto auto 1fr; height:100%; min-height:0; }
.gpmb-trong { padding:44px 24px; text-align:center; color:var(--chu2); }
.gpmb-trong .gi { font-size:26px; color:var(--chu3); }
p.trong { font-size:12px; color:var(--chu3); margin:8px 0 0; }

.lado-gpmb-root .gi, .gpmb-overlay .gi { width:1em; height:1em; display:inline-block;
  vertical-align:-.13em; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* chống tràn: mọi ô lưới và ô co giãn đều được phép thu nhỏ */
.gpmb-dau > *, .gpmb-so > *, .gpmb-luoi > *, .gpmb-moc > *, .gpmb-hop h4 > *,
.gpmb-bac .t > *, .xt-so > *, .the-da > *, .gpmb-thanhchon > * { min-width:0; }

/* ---------- màn hình chọn dự án ---------- */
.gpmb-chon { height:100%; overflow-y:auto; padding:40px 22px 54px;
  background:linear-gradient(180deg,#E4EEF4 0%, #EFF4F7 46%); }
.gpmb-chon .bo { max-width:1080px; margin:0 auto; }
.gpmb-chon .dinh h2 { margin:0 0 3px; font-size:24px; font-weight:700;
  color:#16262E !important; letter-spacing:-.01em; }
.gpmb-chon .dinh p { margin:0 0 24px; color:var(--chu2); font-size:13.5px; }
.the-luoi { display:grid; grid-template-columns:repeat(auto-fill,minmax(292px,1fr)); gap:14px; }
.the-da { position:relative; text-align:left; border:1px solid var(--vien);
  border-radius:15px; padding:18px 19px 17px; overflow:hidden;
  background:linear-gradient(155deg,#FFFFFF 0%, #FAFDFE 55%, #F2F8FA 100%);
  box-shadow:0 1px 2px rgba(22,38,46,.05), 0 12px 30px -18px rgba(22,38,46,.42);
  transition:box-shadow .18s, transform .18s, border-color .18s; }
.the-da::before { content:''; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg,var(--b3),var(--b4),var(--b7)); }
.the-da:hover { border-color:var(--b3); box-shadow:var(--do2); transform:translateY(-2px); }
.the-da .ma { font-family:var(--mono); font-size:10.5px; color:var(--b7);
  letter-spacing:.08em; margin-bottom:5px; }
.the-da h3 { margin:0 0 3px; font-size:16px; font-weight:650; color:#16262E !important;
  line-height:1.42; overflow-wrap:anywhere; }
.the-da .dd { margin:0 0 13px; font-size:12px; color:var(--chu3); overflow-wrap:anywhere; }
.the-da .ct { display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px;
  color:var(--chu2); margin-bottom:9px; }
.the-da .ct b { color:#16262E !important; font-size:14.5px; font-weight:700; margin-right:3px; }
.the-da .ph { height:5px; border-radius:3px; background:var(--noi2); overflow:hidden; }
.the-da .ph i { display:block; height:100%; background:var(--b7); border-radius:3px; }
.the-da .han { margin-top:9px; font-size:11.5px; color:var(--b4); }
.the-da .han.qua { color:var(--canh); font-weight:600; }
.the-da.them { display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  border-style:dashed; color:var(--chu3); box-shadow:none; background:transparent; }
.the-da.them .gi { font-size:22px; margin-bottom:7px; }
.the-da.them h3 { color:var(--chu2) !important; }

/* ---------- thanh đầu ---------- */
.gpmb-dau { display:flex; align-items:center; gap:14px; padding:11px 18px; flex-wrap:wrap;
  background:linear-gradient(118deg,#0B3B4A 0%, #10505F 44%, #16626B 100%);
  color:#EAF3F5; position:relative; z-index:5;
  box-shadow:0 2px 0 rgba(255,255,255,.06) inset, 0 6px 22px -10px rgba(11,59,74,.75); }
.gpmb-dau::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,#DD8500 0%, #93AC1C 42%, #12869A 100%); }

.gpmb-doida { display:flex; align-items:center; gap:12px; padding:5px 12px 5px 6px;
  border-radius:11px; text-align:left; flex:0 1 auto; min-width:0; max-width:100%;
  color:inherit; transition:background .15s; }
.gpmb-doida:hover { background:rgba(255,255,255,.10); }
.gpmb-doida:hover .dd em { opacity:1; }
.gpmb-an { display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:11px; flex:none; color:#FFCE7A;
  background:linear-gradient(150deg,rgba(255,255,255,.18),rgba(255,255,255,.05));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
.gpmb-an svg { width:23px; height:23px; }
.gpmb-ten { min-width:0; }
.gpmb-ten .ht { display:block; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:#8FC3CE; font-weight:600; line-height:1.7; }
.gpmb-hieu { display:block; font-weight:700; font-size:16.5px; line-height:1.4;
  color:#FFFFFF !important; letter-spacing:-.01em; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:42ch; }
.gpmb-ten .dd { display:flex; align-items:center; gap:8px; font-size:11px; color:#8FC3CE;
  line-height:1.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42ch; }
.gpmb-ten .dd em { font-style:normal; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  color:#0B3B4A; background:#FFCE7A; border-radius:20px; padding:1px 8px; opacity:.72;
  transition:opacity .15s; flex:none; }

.gpmb-so { display:flex; margin-left:auto; align-items:stretch; flex:0 1 auto;
  min-width:0; overflow:hidden; }
.gpmb-so .o { padding:2px 16px; border-left:1px solid rgba(255,255,255,.16);
  text-align:right; min-width:0; }
.gpmb-so .o b { display:block; font-size:20px; font-weight:700; line-height:1.34;
  color:#FFFFFF !important; white-space:nowrap; }
.gpmb-so .o i { font-style:normal; font-size:9.5px; color:#8FC3CE; letter-spacing:.05em;
  text-transform:uppercase; display:block; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.gpmb-so .o.sang b { color:#FFCE7A !important; }

.gpmb-dem { display:flex; align-items:center; gap:9px; border-radius:11px; padding:7px 14px;
  flex:none; color:#fff !important;
  background:linear-gradient(140deg,#12866B,#0F6E58);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
.gpmb-dem.qua { background:linear-gradient(140deg,#C4392F,#A32C24); }
.gpmb-dem .gi { font-size:19px; opacity:.85; }
.gpmb-dem b { display:block; font-size:19px; font-weight:700; line-height:1.3;
  color:#fff !important; }
.gpmb-dem i { font-style:normal; font-size:9.5px; opacity:.9; letter-spacing:.03em;
  white-space:nowrap; display:block; }

.gpmb-nguoi { display:flex; align-items:center; gap:8px; font-size:12px; color:#BFDDE4;
  padding:6px 10px; border-radius:10px; flex:none; max-width:200px;
  background:rgba(255,255,255,.08); }
.gpmb-nguoi span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gpmb-nguoi button { color:#8FC3CE; }
.gpmb-nguoi button:hover { color:#FFCE7A; }

/* ---------- thanh menu ---------- */
.gpmb-tab { background:var(--tam); border-bottom:1px solid var(--vien); overflow-x:auto;
  position:relative; z-index:4; box-shadow:0 3px 12px -8px rgba(22,38,46,.5); }
.gpmb-tab-bo { display:flex; gap:4px; padding:8px 14px; min-width:max-content; }
.gpmb-tab button { display:flex; align-items:center; gap:8px; padding:9px 15px; font-size:13.5px;
  font-weight:600; color:var(--chu2); white-space:nowrap; border-radius:10px;
  transition:background .14s, color .14s, box-shadow .14s; }
.gpmb-tab button .gi { font-size:16px; opacity:.7; }
.gpmb-tab button:hover { background:var(--noi2); color:var(--chu); }
.gpmb-tab button.on { color:#FFFFFF !important;
  background:linear-gradient(135deg,#12869A,#0E6E80);
  box-shadow:0 3px 10px -3px rgba(18,134,154,.6); }
.gpmb-tab button.on .gi { opacity:1; }
.gpmb-than { overflow:auto; min-height:0; position:relative; }

/* ---------- tổng quan ---------- */
.gpmb-tong { display:grid; grid-template-columns:400px 1fr; height:100%; min-height:0; }
.gpmb-canh-trai { background:var(--tam); border-right:1px solid var(--vien);
  overflow-y:auto; overflow-x:hidden; padding:16px 16px 34px; }
.gpmb-canh-phai { overflow-y:auto; overflow-x:hidden; padding:16px 20px 34px; }
.gpmb-cn { padding:18px 20px 40px; max-width:1180px; margin:0 auto; }
.gpmb-khoi { margin-bottom:26px; }

.gpmb-nhan { font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--chu2); font-weight:700; margin:0 0 11px; display:flex; line-height:1.7;
  justify-content:space-between; align-items:baseline; gap:10px; position:relative;
  padding-left:11px; }
.gpmb-nhan::before { content:''; position:absolute; left:0; top:.42em; width:4px; height:12px;
  border-radius:2px; background:linear-gradient(180deg,var(--b7),var(--b3)); }
.gpmb-nhan em { font-style:normal; color:var(--chu2); text-transform:none;
  letter-spacing:0; font-weight:400; font-size:11px; text-align:right; }

/* bậc thang: nhãn tách khỏi thanh nên không bao giờ tràn */
/* bậc thang kiểu phễu, giữa hai bước là mức rơi rụng */
.bt { position:relative; }
.bt-b { display:flex; gap:11px; width:100%; text-align:left; padding:9px 11px 10px;
  border-radius:11px; border:1px solid transparent; transition:background .14s, border-color .14s; }
.bt-b:hover { background:#fff; border-color:var(--vien);
  box-shadow:0 6px 18px -12px rgba(22,38,46,.5); }
.bt-b.mo { background:#FFF8EC; border-color:#F0DDB6; }
.bt-n { flex:none; width:23px; height:23px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:11px; font-weight:700; font-family:var(--mono);
  color:#fff; background:var(--m); margin-top:1px;
  box-shadow:0 0 0 3px rgba(22,38,46,.09); }
.bt-noi { flex:1; min-width:0; }
.bt-t { display:flex; align-items:baseline; gap:10px; font-size:12.5px; font-weight:600;
  color:var(--chu); line-height:1.45; margin-bottom:6px; }
.bt-t span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bt-t u { text-decoration:none; margin-left:auto; flex:none; font-family:var(--mono);
  font-size:13px; font-weight:700; color:var(--m); }
.bt-thanh { display:block; height:11px; border-radius:6px; overflow:hidden;
  background:linear-gradient(180deg,#E4EDF1,#DCE7EC); box-shadow:inset 0 1px 2px rgba(22,38,46,.09); }
.bt-thanh i { display:block; height:100%; border-radius:6px; background:var(--m);
  background-image:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,0));
  transition:width .55s cubic-bezier(.3,1,.4,1); }
.bt-so { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--chu3);
  margin-top:6px; font-family:var(--mono); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.bt-so .dt { font-style:normal; font-family:var(--font); font-size:10.5px; font-weight:700;
  padding:1px 7px; border-radius:20px; flex:none; }
.bt-so .dt.len { background:#E4F5EE; color:#0A6B4F; }
.bt-so .dt.giam { background:#FBECEB; color:#A6322C; }

.bt-roi { display:flex; align-items:center; gap:8px; margin:0 0 0 22px; padding:3px 0 4px 22px;
  font-size:10.5px; color:var(--chu3); position:relative; }
.bt-roi::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,var(--vien2),transparent); }
.bt-roi i { width:6px; height:6px; border-radius:50%; background:var(--vien2); flex:none; }
.bt-roi.vua { color:#A96A15; }
.bt-roi.vua i { background:#DD8500; }
.bt-roi.nang { color:#A6322C; font-weight:600; }
.bt-roi.nang i { background:var(--canh); box-shadow:0 0 0 3px rgba(195,59,54,.16); }

.gpmb-nut { margin:6px 0 8px 30px; padding:9px 12px; border-left:3px solid var(--canh);
  background:#FBECEB; border-radius:0 7px 7px 0; }
.gpmb-nut b { font-size:15px; font-weight:700; color:var(--canh); }
.gpmb-nut p { margin:1px 0 0; font-size:11.5px; color:var(--chu2); line-height:1.45; }

.gpmb-hop { position:relative; border:1px solid var(--vien); border-radius:11px;
  padding:13px 14px; margin-bottom:10px; overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF 0%, #FBFDFE 58%, #F5F9FB 100%);
  box-shadow:0 1px 2px rgba(22,38,46,.05), 0 6px 18px -10px rgba(22,38,46,.22); }
.gpmb-hop::before { content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--b3),var(--b7)); opacity:.5; }
.gpmb-hop h4 { margin:0 0 6px; font-size:12.5px; font-weight:650; display:flex;
  justify-content:space-between; gap:10px; color:#16262E !important; line-height:1.45; }
.gpmb-hop h4 u { text-decoration:none; font-family:var(--mono); font-size:11.5px;
  color:var(--canh); flex:none; }
.gpmb-hop p { margin:0; font-size:11.5px; color:var(--chu2); line-height:1.5;
  overflow-wrap:anywhere; }
.gpmb-hop.bam { cursor:pointer; transition:box-shadow .16s, transform .16s, border-color .16s; }
.gpmb-hop.bam:hover { border-color:var(--b3); transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(22,38,46,.06), 0 14px 30px -14px rgba(18,134,154,.45); }
.gpmb-moc { display:flex; gap:10px; align-items:baseline; padding:6px 0;
  border-bottom:1px solid var(--vien); font-size:12px; }
.gpmb-moc:last-child { border-bottom:0; }
.gpmb-moc code { font-family:var(--mono); font-size:11px; color:var(--chu3);
  width:48px; flex:none; }
.gpmb-moc span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gpmb-moc.qua code { color:var(--canh); }
.gpmb-moc em { font-style:normal; margin-left:auto; font-size:10px; padding:1px 8px;
  border-radius:20px; flex:none; }
.gpmb-moc.qua em { background:#FBECEB; color:var(--canh); }
.gpmb-moc.toi em { background:#FDF4E3; color:var(--b7); }

.gpmb-luoi { display:grid; grid-template-columns:repeat(auto-fit,minmax(152px,1fr));
  gap:10px; margin-bottom:16px; }
.gpmb-o { position:relative; border:1px solid var(--vien); border-radius:12px;
  padding:14px 15px; overflow:hidden;
  background:linear-gradient(160deg,#FFFFFF 0%, #F7FBFC 100%);
  box-shadow:0 1px 2px rgba(22,38,46,.05), 0 8px 20px -14px rgba(22,38,46,.35); }
.gpmb-o b { display:block; font-size:21px; font-weight:700; line-height:1.34;
  color:#16262E !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gpmb-o span { display:block; font-size:11px; color:var(--chu3); margin-top:3px;
  overflow-wrap:anywhere; }
.gpmb-o .ph { height:4px; border-radius:3px; background:var(--noi2); margin-top:9px;
  overflow:hidden; }
.gpmb-o .ph i { display:block; height:100%; border-radius:3px; }
.gpmb-cot { display:block; }
.gpmb-cot .ct { cursor:pointer; }

/* ---------- ba thẻ kết quả ---------- */
.kq-luoi { display:grid; grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); gap:11px; }
.kq-the { position:relative; text-align:left; border:1px solid var(--vien);
  border-left:5px solid var(--m); border-radius:13px; padding:15px 16px 14px; overflow:hidden;
  background:linear-gradient(150deg,#FFFFFF 0%, #FBFDFE 52%, #F4F9FB 100%);
  box-shadow:0 1px 2px rgba(22,38,46,.05), 0 10px 26px -16px rgba(22,38,46,.4);
  transition:box-shadow .18s, transform .18s; }
.kq-the::after { content:''; position:absolute; right:-38px; top:-38px; width:118px; height:118px;
  border-radius:50%; background:var(--m); opacity:.07; }
.kq-the:hover { transform:translateY(-3px);
  box-shadow:0 3px 6px rgba(22,38,46,.07), 0 20px 40px -18px rgba(22,38,46,.45); }
.kq-the .n { display:block; font-size:11px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--m); overflow-wrap:anywhere; }
.kq-the b { display:block; font-size:31px; font-weight:800; line-height:1.22; margin:4px 0 2px;
  color:#16262E !important; letter-spacing:-.02em; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.kq-the b u { text-decoration:none; font-size:14px; font-weight:600; color:var(--chu3);
  margin-left:5px; }
.kq-the .ph { display:block; height:6px; border-radius:4px; background:var(--noi2);
  overflow:hidden; margin:8px 0 7px; }
.kq-the .ph i { display:block; height:100%; border-radius:4px; background:var(--m); }
.kq-the .d { display:block; font-size:11.5px; color:var(--chu2); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.kq-the .d em { font-style:normal; font-weight:700; color:var(--m); font-size:13px; }
.kq-the .mo { display:block; font-size:11px; color:var(--chu3); margin-top:5px; line-height:1.4;
  overflow-wrap:anywhere; }

/* ---------- đánh giá tiến độ so với kỳ trước ---------- */
.sk { margin-top:12px; border:1px solid #C9DFE4; border-radius:13px; padding:13px 15px 14px;
  overflow:hidden; background:linear-gradient(155deg,#F4FBFC 0%, #FFFFFF 55%, #F6FAFC 100%);
  box-shadow:0 1px 2px rgba(22,38,46,.05), 0 10px 26px -18px rgba(18,134,154,.5); }
.sk.trong { display:flex; align-items:center; gap:13px; flex-wrap:wrap; }
.sk.trong .gi { font-size:24px; color:var(--b3); flex:none; }
.sk.trong b { display:block; font-size:13.5px; color:var(--chu); }
.sk.trong p { margin:2px 0 0; font-size:11.5px; color:var(--chu2); line-height:1.5; }
.sk.trong > div { flex:1; min-width:200px; }
.sk-dau { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:8px; }
.sk-dau .gi { font-size:17px; color:var(--b3); }
.sk-dau b { font-size:13.5px; color:#16262E !important; }
.sk-dau select { width:auto; max-width:220px; font-size:12px; padding:5px 9px; margin-left:auto; }
.sk-nut { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:650;
  color:#fff !important; background:linear-gradient(135deg,#12869A,#0E6E80); border-radius:8px;
  padding:6px 13px; box-shadow:0 3px 9px -3px rgba(18,134,154,.6); }
.sk-nut:hover { filter:brightness(1.1); }
.sk-mo { margin:0 0 10px; font-size:11.5px; color:var(--chu2); overflow-wrap:anywhere; }
.sk-luoi { display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:9px; }
.sk-o { position:relative; border:1px solid var(--vien); border-radius:11px; padding:11px 12px;
  background:#fff; overflow:hidden; }
.sk-o::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--m); }
.sk-o .n { display:block; font-size:10.5px; color:var(--chu3); letter-spacing:.03em;
  overflow-wrap:anywhere; }
.sk-o .v { display:block; font-size:22px; font-weight:800; line-height:1.3; color:#16262E !important;
  white-space:nowrap; }
.sk-o .v u { text-decoration:none; font-size:12px; font-weight:600; color:var(--chu3); margin-left:4px; }
.sk-o .d { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700;
  border-radius:20px; padding:2px 9px; margin-top:4px; }
.sk-o .d .gi { font-size:12px; }
.sk-o .d em { font-style:normal; font-weight:500; font-size:10.5px; opacity:.85; }
.sk-o.len .d { background:#E4F5EE; color:#0A6B4F; }
.sk-o.giam .d { background:#FBECEB; color:#A6322C; }
.sk-o.bang .d { background:var(--noi2); color:var(--chu3); }
.sk-o .c { display:block; font-size:10.5px; color:var(--chu3); margin-top:5px;
  font-family:var(--mono); }
.sk-nhan { margin:11px 0 0; font-size:12.5px; line-height:1.6; color:var(--chu);
  padding:9px 12px; border-radius:9px; background:rgba(232,239,243,.66); overflow-wrap:anywhere; }
.sk-nhan b { font-weight:700; }
.sk-nhan .canh { color:#A6322C; font-weight:600; }

/* ---------- đối chiếu với báo cáo gốc ---------- */
.dc { margin-top:11px; background:var(--noi); border:1px solid var(--vien); border-radius:10px;
  padding:10px 13px 11px; box-shadow:var(--do1); }
.dc.lech { border-color:#EBC9A6; background:#FEFAF3; }
.dc-dau { display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; color:var(--chu2); margin-bottom:8px; }
.dc.lech .dc-dau { color:#A96A15; }
.dc-dau .gi { font-size:14px; }
.dc-dau em { font-style:normal; font-weight:400; text-transform:none; letter-spacing:0;
  font-size:10.5px; color:var(--chu3); margin-left:auto; text-align:right; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dc-tieu, .dc-h { display:grid; grid-template-columns:1fr 108px 108px 84px; gap:8px;
  align-items:center; }
.dc-tieu { font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--chu3);
  padding-bottom:4px; border-bottom:1px solid var(--vien); }
.dc-tieu .v, .dc-tieu .d { text-align:right; }
.dc-h { padding:7px 0; border-bottom:1px solid var(--vien); }
.dc-h:last-of-type { border-bottom:0; }
.dc-h .n { font-size:12.5px; font-weight:600; color:var(--chu); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dc-h .v { text-align:right; font-family:var(--mono); font-size:13px; color:var(--chu);
  min-width:0; }
.dc-h .v em { display:block; font-style:normal; font-family:var(--font); font-size:10px;
  color:var(--chu3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dc-h .d { text-align:right; font-family:var(--mono); font-size:13px; font-weight:700;
  color:var(--b4); }
.dc-h .d.lech { color:#C0710B; }
.dc-mo { margin:9px 0 0; font-size:11px; line-height:1.5; color:var(--chu2);
  overflow-wrap:anywhere; }

/* ---------- thanh chồng nhiều màu ---------- */
.chong { display:flex; height:26px; border-radius:7px; overflow:hidden; background:var(--noi2);
  box-shadow:var(--do1); }
.chong .k { height:100%; min-width:2px; transition:filter .15s; }
.chong .k:hover { filter:brightness(1.18); }
.cg-luoi { display:grid; grid-template-columns:repeat(auto-fill,minmax(292px,1fr)); gap:2px;
  margin-top:11px; }
.cg { display:flex; align-items:flex-start; gap:10px; text-align:left; padding:7px 9px;
  border-radius:7px; }
.cg:hover { background:var(--noi2); }
.cg i { width:12px; height:12px; border-radius:3px; flex:none; margin-top:3px; }
.cg .ten { flex:1; min-width:0; font-size:12.5px; font-weight:600; color:var(--chu);
  line-height:1.45; }
.cg .ten em { display:block; font-style:normal; font-size:11px; font-weight:400;
  color:var(--chu3); overflow-wrap:anywhere; }
.cg .sl { flex:none; text-align:right; font-size:11px; color:var(--chu3); font-family:var(--mono); }
.cg .sl b { display:block; font-size:13px; color:var(--chu); }

/* ---------- vì sao chưa xong ---------- */
.vs { border:1px solid var(--vien); border-radius:12px; padding:6px 13px 11px; overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF 0%, #F8FBFC 100%);
  box-shadow:0 1px 2px rgba(22,38,46,.05), 0 8px 22px -14px rgba(22,38,46,.35); }
.vs-h:nth-child(even) { background:rgba(232,239,243,.42); }
.vs-dau { display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; color:var(--chu2); padding:11px 0 7px;
  border-bottom:1px solid var(--vien); margin-bottom:4px; }
.vs-dau.canh { color:var(--canh); }
.vs-dau .gi { font-size:14px; }
.vs-dau u { text-decoration:none; margin-left:auto; font-family:var(--mono); font-size:12px;
  color:var(--chu); text-transform:none; letter-spacing:0; }
.vs-h { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:7px 6px;
  border-radius:7px; }
.vs-h:hover { background:var(--noi2); }
.vs-h .n { flex:0 0 40%; min-width:0; font-size:12.5px; font-weight:600; color:var(--chu);
  line-height:1.3; }
.vs-h .n em { display:block; font-style:normal; font-size:10.5px; font-weight:400;
  color:var(--chu3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vs-h .b { flex:1; min-width:40px; height:13px; background:var(--noi2); border-radius:4px;
  overflow:hidden; }
.vs-h .b i { display:block; height:100%; border-radius:4px; min-width:3px; }
.vs-h .s { flex:none; text-align:right; font-size:10.5px; color:var(--chu3);
  font-family:var(--mono); min-width:78px; }
.vs-h .s b { display:block; font-size:12.5px; color:var(--chu); }

/* ---------- chip bộ lọc ---------- */
.chip-hang { display:flex; gap:7px; flex-wrap:wrap; align-items:center; padding:9px 16px;
  background:var(--tam); border-bottom:1px solid var(--vien); }
.chip { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  color:var(--chu); background:var(--noi2); border-radius:20px; padding:4px 5px 4px 10px;
  max-width:100%; overflow:hidden; }
.chip i { width:9px; height:9px; border-radius:50%; background:var(--m); flex:none; }
.chip button { display:flex; align-items:center; justify-content:center; width:19px; height:19px;
  border-radius:50%; color:var(--chu3); font-size:11px; flex:none; }
.chip button:hover { background:var(--vien); color:var(--canh); }
.bochip { font-size:12px; color:var(--b3); font-weight:600; padding:4px 6px; }
.bochip:hover { text-decoration:underline; }

/* ---------- bản đồ ---------- */
.gpmb-bando { position:relative; height:100%; min-height:380px; overflow:hidden;
  touch-action:none; background:#DCE6EC; }
.gpmb-bando svg#gpmb-svg { display:block; width:100%; height:100%; cursor:grab; }
.gpmb-bando svg#gpmb-svg.keo { cursor:grabbing; }
.gpmb-bando #gpmb-nen image { image-rendering:auto; }
.gpmb-bando .th { stroke:#5C7180; stroke-width:.7; vector-effect:non-scaling-stroke;
  fill-opacity:.55; transition:fill-opacity .12s; }
.gpmb-bando .th:hover { fill-opacity:.85; }
.gpmb-bando .th.chon { stroke:#111; stroke-width:2.6; fill-opacity:.9; }
.gpmb-bando .th.ht-gt { stroke:#7C8B96; stroke-dasharray:5 4; fill-opacity:.3; }
.gpmb-bando .th.ht-nuoc { stroke:#2E86B8; stroke-width:1.2; fill-opacity:.34; }
.gpmb-bando.co-nen .th { stroke:#FFFFFF; stroke-width:.9; fill-opacity:.48; }
.gpmb-bando.co-nen .th:hover { fill-opacity:.8; }
.gpmb-bando.co-nen .th.chon { stroke:#FFEB3B; stroke-width:2.8; fill-opacity:.75; }
.gpmb-bando .soc { pointer-events:none; stroke:none; }
.gpmb-bando text { pointer-events:none; user-select:none; }

.gpmb-dieu { position:absolute; right:12px; top:12px; display:flex; flex-direction:column;
  gap:5px; z-index:3; }
.gpmb-dieu button { width:33px; height:33px; background:#fff; border:1px solid var(--vien2);
  border-radius:8px; font-size:14px; color:var(--chu2); display:flex; align-items:center;
  justify-content:center; font-family:var(--mono); box-shadow:var(--do1); }
.gpmb-dieu button:hover { color:var(--b3); border-color:var(--b3); }
.gpmb-dieu button.on { background:var(--b7); color:#fff !important; border-color:var(--b7); }

.gpmb-tomau { position:absolute; left:50%; transform:translateX(-50%); top:12px; display:flex;
  background:#fff; border:1px solid var(--vien2); border-radius:8px; overflow:hidden;
  box-shadow:var(--do1); z-index:3; max-width:calc(100% - 320px); }
.gpmb-tomau button { padding:7px 13px; font-size:11.5px; color:var(--chu2); white-space:nowrap;
  border-right:1px solid var(--vien); }
.gpmb-tomau button:last-child { border-right:0; }
.gpmb-tomau button:hover { background:var(--noi2); }
.gpmb-tomau button.on { background:var(--b7); color:#fff !important; font-weight:600; }

.gpmb-nen-chon { position:absolute; right:56px; top:12px; display:flex; gap:0;
  background:#fff; border:1px solid var(--vien2); border-radius:8px; overflow:hidden;
  box-shadow:var(--do1); z-index:3; }
.gpmb-nen-chon button { padding:7px 11px; font-size:11.5px; color:var(--chu2);
  white-space:nowrap; border-right:1px solid var(--vien); }
.gpmb-nen-chon button:last-child { border-right:0; }
.gpmb-nen-chon button:hover { background:var(--noi2); }
.gpmb-nen-chon button.on { background:var(--b3); color:#fff !important; font-weight:600; }
.gpmb-nguon { position:absolute; right:8px; bottom:6px; display:flex; align-items:center;
  z-index:2; }
.gpmb-nguon button { width:17px; height:17px; border-radius:50%; flex:none; font-size:10px;
  font-style:italic; font-weight:700; font-family:Georgia,serif; color:#4A5C66;
  background:rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center;
  cursor:default; transition:background .15s; }
.gpmb-nguon span { max-width:0; overflow:hidden; white-space:nowrap; font-size:9.5px;
  color:#33454F; opacity:0; transition:max-width .25s ease, opacity .18s, padding .25s;
  border-radius:4px; padding:2px 0; }
.gpmb-nguon:hover button, .gpmb-nguon:focus-within button { background:rgba(255,255,255,.95); }
.gpmb-nguon:hover span, .gpmb-nguon:focus-within span { max-width:360px; opacity:1;
  padding:2px 7px; background:rgba(255,255,255,.92); margin-left:4px; }

.gpmb-labang { position:absolute; right:14px; bottom:26px; opacity:.9; z-index:2; }
.gpmb-labang svg { width:24px; height:30px; filter:drop-shadow(0 1px 2px rgba(255,255,255,.9)); }
.gpmb-thuoc { position:absolute; left:14px; bottom:10px; font-family:var(--mono);
  font-size:10.5px; color:#33454F; background:rgba(255,255,255,.82); padding:3px 7px;
  border-radius:5px; z-index:2; }
.gpmb-thuoc i { display:block; height:5px; border-left:1px solid #33454F;
  border-right:1px solid #33454F; border-bottom:1px solid #33454F; margin-bottom:2px; }

.gpmb-timbd { position:absolute; left:14px; top:12px; width:238px; z-index:4; }
.gpmb-timbd input { font-size:12.5px; padding:8px 11px; box-shadow:var(--do1); }
.gpmb-timbd #bd-goi { margin-top:4px; background:#fff; border:1px solid var(--vien2);
  border-radius:8px; overflow:hidden; box-shadow:var(--do2); }
.gpmb-timbd #bd-goi:empty { display:none; }
.gpmb-timbd #bd-goi button { display:flex; gap:9px; width:100%; text-align:left;
  padding:7px 11px; font-size:12px; color:var(--chu2); }
.gpmb-timbd #bd-goi button:hover { background:var(--noi2); color:var(--chu) !important; }
.gpmb-timbd #bd-goi b { font-family:var(--mono); color:var(--b7); flex:none; min-width:36px; }
.gpmb-timbd #bd-goi button span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.gpmb-chugiai { position:absolute; left:14px; bottom:46px; background:rgba(255,255,255,.95);
  border:1px solid var(--vien2); border-radius:9px; padding:11px 13px; max-width:248px;
  box-shadow:var(--do2); z-index:2; }
.gpmb-chugiai .gpmb-nhan { margin-bottom:7px; }
.gpmb-chugiai label { display:flex; align-items:center; gap:9px; padding:3px 0;
  cursor:pointer; font-size:11.5px; color:var(--chu2); }
.gpmb-chugiai label i { width:11px; height:11px; border-radius:3px; flex:none; }
.gpmb-chugiai label .tn { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.gpmb-chugiai label u { text-decoration:none; margin-left:auto; font-family:var(--mono);
  font-size:10.5px; color:var(--chu3); flex:none; text-align:right; }
.gpmb-chugiai label u em { display:block; font-style:normal; font-size:9.5px; opacity:.8; }
.gpmb-chugiai label.tat { opacity:.35; }
.soc-chu { margin-top:8px; padding-top:8px; border-top:1px solid var(--vien);
  font-size:10.5px; color:var(--chu3); display:flex; align-items:center; gap:9px; }
.soc-chu i { width:11px; height:11px; flex:none; border-radius:3px; background:var(--chu3);
  background-image:repeating-linear-gradient(45deg,#fff 0 2px,transparent 2px 5px); }

.gpmb-thecon { position:absolute; display:none; z-index:6; pointer-events:none;
  background:#fff; border:1px solid var(--vien2); border-radius:9px; padding:10px 12px;
  max-width:238px; font-size:11.5px; line-height:1.5; box-shadow:var(--do3); }
.gpmb-thecon b { display:block; font-size:13.5px; color:#16262E !important; }
.gpmb-thecon .cs { display:block; color:var(--chu); overflow-wrap:anywhere; }
.gpmb-thecon .d { display:block; color:var(--chu3); font-family:var(--mono); font-size:10.5px; }
.gpmb-thecon .tt { display:flex; align-items:center; gap:7px; margin-top:4px; color:var(--chu2); }
.gpmb-thecon .tt i { width:8px; height:8px; border-radius:50%; flex:none; }
.gpmb-thecon .v { display:block; margin-top:3px; color:var(--canh); font-size:11px; }

/* ---------- danh mục ---------- */
/* ---------- thanh lọc danh mục ---------- */
.dm-loc { position:relative; background:linear-gradient(180deg,#FFFFFF 0%, #F3F8FA 100%);
  border-bottom:1px solid var(--vien); box-shadow:0 3px 12px -8px rgba(22,38,46,.4); }
.dm-loc::before { content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,#12869A 0%, #0F8A62 34%, #93AC1C 62%, #DD8500 100%);
  opacity:.85; }
.dm-hang1 { display:flex; gap:10px; align-items:center; padding:11px 16px 0; flex-wrap:wrap; }
.dm-tim { position:relative; display:flex; align-items:center; flex:1 1 300px;
  min-width:230px; max-width:440px; }
.dm-tim .gi { position:absolute; left:11px; font-size:15px; color:var(--chu3); pointer-events:none; }
.dm-tim input { padding:9px 12px 9px 34px; font-size:13px; border-radius:9px; }
.dm-truoc { display:flex; gap:6px; flex-wrap:wrap; }
.dm-truoc button { display:inline-flex; align-items:center; gap:7px; font-size:12px;
  font-weight:600; color:var(--chu2); background:#fff; border:1px solid var(--vien2);
  border-radius:20px; padding:6px 13px; transition:background .14s, color .14s, border-color .14s; }
.dm-truoc button i { width:8px; height:8px; border-radius:50%; background:var(--m); flex:none; }
.dm-truoc button:hover { border-color:var(--m); color:var(--chu); }
.dm-truoc button.on { background:var(--m); border-color:var(--m); color:#fff !important; }
.dm-truoc button.on i { background:rgba(255,255,255,.9); }

.dm-hang2 { display:flex; gap:9px; align-items:flex-end; padding:11px 16px 0; flex-wrap:wrap; }
.dm-o { display:flex; flex-direction:column; gap:3px; min-width:0; }
.dm-o span { font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--chu3);
  font-weight:600; padding-left:2px; }
.dm-o select, .dm-o input { width:auto; min-width:132px; font-size:12.5px; padding:6px 9px;
  border-radius:8px; }
.dm-o.hep select, .dm-o.hep input { min-width:84px; width:84px; }
.dm-dao, .dm-xuat { font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:8px;
  border:1px solid var(--vien2); background:#fff; color:var(--chu2); white-space:nowrap; }
.dm-dao:hover, .dm-xuat:hover { border-color:var(--b3); color:var(--b3); }
.dm-dao.on { background:var(--noi2); }
.dm-xuat { margin-left:auto; color:var(--b3); border-color:#B6D9DF; background:#F2FAFB; }
.dm-xuat .gi { font-size:14px; }

.dm-ketqua { display:flex; gap:13px; align-items:center; flex-wrap:wrap; padding:12px 16px 14px; }
.dm-tk { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; flex:1 1 460px;
  min-width:0; }
.tk { position:relative; border:1px solid var(--vien); border-radius:11px; padding:10px 13px 11px;
  overflow:hidden; min-width:0;
  background:linear-gradient(155deg,#FFFFFF 0%, #F8FBFC 100%);
  box-shadow:0 1px 2px rgba(22,38,46,.05), 0 8px 20px -16px rgba(22,38,46,.4); }
.tk::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--m); }
.tk::after { content:''; position:absolute; right:-26px; top:-26px; width:78px; height:78px;
  border-radius:50%; background:var(--m); opacity:.07; }
.tk.so { --m:#12869A; }
.tk.dt { --m:#0F8A62; }
.tk.pc { --m:#DD8500; }
.tk.pc2 { --m:#8C6BA8; }
.tk b { display:block; font-size:23px; font-weight:800; line-height:1.28; letter-spacing:-.02em;
  color:#16262E !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tk b u { text-decoration:none; font-size:12px; font-weight:600; color:var(--chu3); margin-left:5px; }
.tk span { display:block; font-size:10.5px; color:var(--chu3); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tk .ph { display:block; height:4px; border-radius:3px; background:var(--noi2); margin-top:7px;
  overflow:hidden; }
.tk .ph em { display:block; height:100%; border-radius:3px; background:var(--m); }
.dm-tk.loc .tk.so b, .dm-tk.loc .tk.dt b { color:var(--m) !important; }
.dm-chip { display:flex; gap:7px; flex-wrap:wrap; align-items:center; flex:1 1 200px;
  justify-content:flex-end; }
.dm-bang { overflow-x:auto; }
.dm-them { display:flex; align-items:center; gap:12px; justify-content:center; padding:16px;
  flex-wrap:wrap; }
.dm-them button { font-size:13px; font-weight:650; color:var(--b3); background:#fff;
  border:1px solid #B6D9DF; border-radius:9px; padding:9px 20px; box-shadow:var(--do1); }
.dm-them button:hover { background:#F2FAFB; }
.dm-them span { font-size:11.5px; color:var(--chu3); font-family:var(--mono); }
.gpmb-bang tr.trongbang td { text-align:center; padding:40px 20px; color:var(--chu3);
  background:#fff; }
.gpmb-bang tr.trongbang .gi { font-size:26px; color:var(--vien2); display:block;
  margin:0 auto 10px; }
.gpmb-bang tr.trongbang b { display:block; font-size:14px; color:var(--chu2); }
.gpmb-bang tr.trongbang span { display:block; font-size:12px; margin-top:3px; }
.gpmb-bang tr.trongbang:hover { background:#fff; box-shadow:none; cursor:default; }
.gpmb-bang td b { font-weight:600; }
.gpmb-bang td em { display:block; font-style:normal; font-size:11px; color:var(--chu3);
  font-family:var(--font); margin-top:1px; }
.gpmb-bang td.sn em { font-family:var(--mono); }

.gpmb-thanhchon { display:flex; align-items:center; gap:10px; padding:9px 16px;
  background:#FDF4E3; border-bottom:1px solid #F0DDB6; flex-wrap:wrap; font-size:12.5px; }
.gpmb-thanhchon b { color:var(--b7); font-size:14px; }
.gpmb-thanhchon button { padding:6px 13px; font-size:12.5px; }

.gpmb-bang { width:100%; border-collapse:collapse; font-size:13px; }
.gpmb-bang th { position:sticky; top:0; text-align:left;
  background:linear-gradient(180deg,#EDF3F6 0%, #E4ECF1 100%);
  padding:9px 11px; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--chu2); font-weight:700; border-bottom:1px solid var(--vien);
  white-space:nowrap; cursor:pointer; z-index:2; }
.gpmb-bang th:hover { color:var(--b3); }
.gpmb-bang th.ck, .gpmb-bang td.ck { width:34px; cursor:default; padding-right:0; }
.gpmb-bang td.ck input, .gpmb-bang th.ck input { width:15px; height:15px; padding:0;
  accent-color:#DD8500; }
.gpmb-bang td { padding:8px 11px; border-bottom:1px solid var(--vien); vertical-align:top;
  overflow-wrap:anywhere; }
.gpmb-bang tbody tr { background:#fff; }
.gpmb-bang tbody tr:nth-child(even) { background:#FAFCFD; }
.gpmb-bang tbody tr:hover { background:#E9F3F6; cursor:pointer;
  box-shadow:inset 3px 0 0 var(--b3); }
.gpmb-bang tbody tr.dachon { background:#FDF4E3; }
.gpmb-bang .sn { font-family:var(--mono); text-align:right; white-space:nowrap; }
.gpmb-bang.nho { font-size:12px; }
.gpmb-bang.nho th { position:static; font-size:10px; padding:6px 8px; cursor:default; }
.gpmb-bang.nho td { padding:5px 8px; }
.gpmb-bang.nho tbody tr { cursor:default; }
.gpmb-bang.nho tr.moi td { background:#FBECEB; }
.gpmb-cham { display:inline-flex; align-items:center; gap:7px; font-size:11.5px;
  font-weight:600; padding:3px 10px 3px 7px; border-radius:20px; background:#F1F5F7;
  box-shadow:inset 0 0 0 1px rgba(22,38,46,.06); }
.gpmb-cham i { width:9px; height:9px; border-radius:50%; flex:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.9); }
.gpmb-bang td em.ld { display:inline-block; margin-top:3px; font-family:var(--mono);
  font-size:10px; font-weight:700; color:#fff !important; background:var(--m);
  border-radius:5px; padding:1px 6px; letter-spacing:.03em; }
.gpmb-huy { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; padding:2px 9px;
  border-radius:20px; background:#F2F5F7; color:var(--m,var(--canh)); font-weight:600;
  box-shadow:inset 0 0 0 1px currentColor; }
.gpmb-huy::before { content:''; width:6px; height:6px; border-radius:50%;
  background:currentColor; flex:none; }
.gpmb-huy.ok { background:#E4F5EE; color:var(--b4); box-shadow:none; font-weight:400; }
.gpmb-huy.ok::before { display:none; }

/* ---------- nhập tệp ---------- */
.gpmb-tai-tep { position:relative; border:1.5px dashed var(--vien2); border-radius:11px;
  padding:28px 18px; text-align:center; cursor:pointer; background:var(--tam);
  transition:border-color .15s, background .15s; }
.gpmb-tai-tep:hover, .gpmb-tai-tep.tren { border-color:var(--b7); background:#FDF7EC; }
.gpmb-tai-tep .gi { font-size:24px; color:var(--chu3); display:block; margin:0 auto 8px; }
.gpmb-tai-tep b { display:block; font-size:14px; color:#16262E !important; }
.gpmb-tai-tep span { display:block; font-size:11.5px; color:var(--chu3); margin-top:3px; }
.gpmb-tai-tep input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; }

.gpmb-hop.nhap { margin-top:12px; padding:15px 16px; }
.nhap-dinh { display:flex; align-items:center; gap:10px; margin-bottom:12px;
  padding-bottom:10px; border-bottom:1px solid var(--vien); }
.nhap-dinh b { font-size:13px; color:#16262E !important; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.gpmb-nut-p.nho { margin-left:auto; padding:5px 11px; font-size:12px; flex:none; }
.ghep-cot { display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:10px; margin-bottom:13px; }
.ghep-cot .gpmb-truong { margin:0; }
.xt { margin-top:14px; padding-top:13px; border-top:1px solid var(--vien); }
.xt-so { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:11px; }
.xt-so span { flex:1 1 130px; background:var(--noi2); border-radius:9px; padding:10px 12px;
  font-size:11.5px; color:var(--chu2); }
.xt-so b { display:block; font-size:20px; font-weight:700; color:#16262E !important; }
.xt-so .b b { color:var(--b4) !important; }
.xt-so .c b { color:var(--canh) !important; }
.xt-nut { margin-top:12px; }
.xt .gpmb-bang { display:block; overflow-x:auto; }

/* ---------- chú giải ký hiệu loại đất ---------- */
.ld-cg { margin:14px 16px 4px; border:1px solid var(--vien); border-radius:12px;
  padding:12px 14px 13px; overflow:hidden;
  background:linear-gradient(170deg,#FFFFFF 0%, #F7FBFC 100%);
  box-shadow:0 1px 2px rgba(22,38,46,.05), 0 8px 20px -16px rgba(22,38,46,.35); }
.ld-dau { display:flex; align-items:center; gap:9px; margin-bottom:11px; flex-wrap:wrap; }
.ld-dau .gi { font-size:16px; color:var(--b3); }
.ld-dau b { font-size:12.5px; font-weight:700; color:#16262E !important; }
.ld-dau em { font-style:normal; font-size:11px; color:var(--chu3); margin-left:auto; }
.ld-luoi { display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:7px; }
.ld-o { display:flex; align-items:flex-start; gap:10px; text-align:left; padding:7px 9px;
  border-radius:9px; border:1px solid transparent; transition:background .14s, border-color .14s; }
.ld-o:hover { background:#fff; border-color:var(--vien); box-shadow:var(--do1); }
.ld-o .ma { flex:none; min-width:38px; text-align:center; font-family:var(--mono); font-size:11px;
  font-weight:700; color:#fff !important; background:var(--m); border-radius:6px; padding:3px 6px; }
.ld-o.thieu .ma { background:#fff; color:var(--m) !important; box-shadow:inset 0 0 0 1px var(--m); }
.ld-o .tn { flex:1; min-width:0; font-size:12px; color:var(--chu); line-height:1.42; }
.ld-o .tn em { display:block; font-style:normal; font-size:10.5px; color:var(--chu3);
  font-family:var(--mono); margin-top:1px; }

/* ---------- báo cáo ---------- */
.bc-luoi { display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:12px; }
.bc-the { position:relative; text-align:left; border:1px solid var(--vien);
  border-radius:13px; padding:17px 18px; overflow:hidden;
  background:linear-gradient(150deg,#FFFFFF 0%, #FCFAF5 100%);
  box-shadow:0 1px 2px rgba(22,38,46,.05), 0 10px 24px -16px rgba(22,38,46,.38);
  transition:box-shadow .18s, transform .18s, border-color .18s; }
.bc-the::after { content:''; position:absolute; right:-30px; top:-30px; width:96px; height:96px;
  border-radius:50%; background:var(--b7); opacity:.07; }
.bc-the:hover { border-color:var(--b7); box-shadow:var(--do2); transform:translateY(-2px); }
.bc-the .gi { font-size:21px; color:var(--b7); }
.bc-the h4 { margin:9px 0 5px; font-size:14px; font-weight:650; color:#16262E !important;
  line-height:1.45; }
.bc-the p { margin:0; font-size:11.5px; color:var(--chu2); line-height:1.5; }
.bc-the .tai { display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  font-size:12px; color:var(--b3); font-weight:650; }

/* ---------- quy trình ---------- */
.gpmb-qt { display:grid; grid-template-columns:repeat(auto-fill,minmax(276px,1fr)); gap:12px; }
.gpmb-qt .b { position:relative; border:1px solid var(--vien); border-radius:12px;
  padding:14px 15px; overflow:hidden;
  background:linear-gradient(165deg,#FFFFFF 0%, #F7FBFC 100%);
  box-shadow:0 1px 2px rgba(22,38,46,.05), 0 8px 20px -14px rgba(22,38,46,.35);
  transition:box-shadow .16s, transform .16s; }
.gpmb-qt .b:hover { transform:translateY(-2px);
  box-shadow:0 2px 5px rgba(22,38,46,.07), 0 16px 32px -16px rgba(22,38,46,.4); }
.gpmb-qt .b::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,var(--b7),var(--b3)); }
.gpmb-qt .b .s { font-family:var(--mono); font-size:10.5px; color:var(--b7); font-weight:600; }
.gpmb-qt .b h4 { margin:2px 0 8px; font-size:13.5px; font-weight:650; color:#16262E !important; }
.gpmb-qt .b dl { display:grid; grid-template-columns:auto 1fr; gap:4px 10px; margin:0;
  font-size:11.5px; }
.gpmb-qt .b dt { color:var(--chu3); }
.gpmb-qt .b dd { margin:0; color:var(--chu2); min-width:0; overflow-wrap:anywhere; }

/* ---------- lớp phủ ---------- */
.gpmb-overlay { position:fixed; inset:0; z-index:1000000; background:rgba(20,36,44,.42);
  display:flex; align-items:flex-start; justify-content:center; padding:26px 16px;
  overflow-y:auto; font-family:var(--font); color:var(--chu); font-size:14px; line-height:1.55; }
.gpmb-tam { width:100%; max-width:668px; background:var(--tam); border:1px solid var(--vien);
  border-radius:14px; box-shadow:var(--do3); overflow:hidden; }
.gpmb-tam header { display:flex; align-items:flex-start; gap:12px; padding:16px 18px 13px;
  border-bottom:1px solid var(--vien); background:var(--noi2); }
.gpmb-tam header h3 { margin:0; font-size:18px; font-weight:700; color:#16262E !important;
  overflow-wrap:anywhere; }
.gpmb-tam header h3 .to { font-size:12px; font-weight:400; color:var(--chu3); }
.gpmb-tam header p { margin:2px 0 0; font-size:12px; color:var(--chu2); overflow-wrap:anywhere; }
.gpmb-tam header > div { min-width:0; }
.gpmb-tam header button { margin-left:auto; font-size:19px; line-height:1.25; color:var(--chu3);
  padding:2px 5px; flex:none; }
.gpmb-tam .noi-dung { padding:16px 18px 20px; }
.gpmb-tam .chan { display:flex; gap:9px; justify-content:flex-end; padding:12px 18px;
  border-top:1px solid var(--vien); flex-wrap:wrap; background:#FBFDFE; }

.hs-thanh { display:flex; gap:3px; margin-bottom:15px; }
.hs-thanh .o { flex:1; min-width:0; height:27px; border-radius:5px; background:var(--noi2);
  color:var(--chu3); font-size:10.5px; font-family:var(--mono); display:flex;
  align-items:center; justify-content:center; }
.hs-thanh .o.xong { background:var(--b4); color:#fff !important; }
.hs-thanh .o.xong.mo { background:#9BD3BF; color:#0B4835 !important; }
.hs-thanh .o.ke { background:var(--b7); color:#fff !important; font-weight:700; }
.hs-thanh .o:hover { outline:2px solid var(--b3); outline-offset:1px; }

.gpmb-cap { display:grid; grid-template-columns:auto 1fr; gap:7px 14px; font-size:13px;
  margin:0 0 15px; }
.gpmb-cap dt { color:var(--chu3); }
.gpmb-cap dd { margin:0; text-align:right; font-family:var(--mono); font-size:12.5px;
  min-width:0; overflow-wrap:anywhere; }
.gpmb-cap dd.tx { font-family:var(--font); }

.gpmb-tt { list-style:none; margin:0; padding:0; }
.gpmb-tt li { position:relative; padding:0 0 13px 26px; border-left:1.5px solid var(--vien);
  border-radius:5px; transition:background .3s; }
.gpmb-tt li:last-child { border-left-color:transparent; padding-bottom:0; }
.gpmb-tt li.nhay { background:#FDF4E3; }
.gpmb-tt li::before { content:''; position:absolute; left:-6.5px; top:4px; width:11px;
  height:11px; border-radius:50%; background:#fff; border:2px solid var(--vien2); }
.gpmb-tt li.xong::before { background:var(--b4); border-color:var(--b4); }
.gpmb-tt li.dang::before { background:var(--b7); border-color:var(--b7);
  box-shadow:0 0 0 3px #FBE7C4; }
.gpmb-tt li.tre::before { background:var(--canh); border-color:var(--canh); }
.gpmb-tt .tieu { font-size:13px; font-weight:600; display:flex; gap:8px; align-items:baseline;
  flex-wrap:wrap; color:var(--chu); }
.gpmb-tt .tieu span { font-family:var(--mono); font-size:10.5px; color:var(--chu3);
  font-weight:400; }
.gpmb-tt .mo { font-size:11.5px; color:var(--chu3); margin-top:1px; overflow-wrap:anywhere; }
.gpmb-tt .ghi { font-size:11.5px; color:var(--b4); font-family:var(--mono); margin-top:2px;
  overflow-wrap:anywhere; }
.gpmb-tt button.tick { font-size:11.5px; color:var(--b3); padding:3px 10px 3px 0;
  font-weight:600; }
.gpmb-tt button.tick:hover { color:var(--b7); }
.gpmb-tt button.tick.xoa { color:var(--chu3); font-weight:400; }
.gpmb-tt button.tick.xoa:hover { color:var(--canh); }

.gpmb-nut-c { padding:9px 17px; border-radius:8px; font-size:13px; font-weight:650;
  background:var(--b3); color:#fff !important; box-shadow:var(--do1); }
.gpmb-nut-c:hover { filter:brightness(1.1); }
.gpmb-nut-p { padding:9px 17px; border-radius:8px; font-size:13px; font-weight:500;
  background:var(--noi2); color:var(--chu) !important; }
.gpmb-nut-p:hover { background:var(--vien); }

.gpmb-truong { margin-bottom:12px; min-width:0; }
.gpmb-truong label { display:block; font-size:11.5px; color:var(--chu3); margin-bottom:4px; }
.gpmb-hang { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.gpmb-bao { padding:10px 12px; border-radius:8px; font-size:12.5px; margin-bottom:12px;
  background:var(--noi2); color:var(--chu2); overflow-wrap:anywhere; }
.gpmb-bao.loi { background:#FBECEB; color:#8E2622; }
.gpmb-bao.ok { background:#E4F5EE; color:#0A5B45; }
.gpmb-bao .nho { font-size:11px; color:var(--chu3); }
.gpmb-bao .dong-vm { display:block; margin-top:6px; font-size:11.5px; color:var(--b3);
  font-weight:600; }

/* ---------- đăng nhập ---------- */
.gpmb-vao { display:flex; align-items:center; justify-content:center; height:100%; padding:20px;
  background:linear-gradient(180deg,#DDEBF2 0%, #EFF4F7 60%); }
.gpmb-vao .the { width:100%; max-width:360px; background:var(--tam); border:1px solid var(--vien);
  border-radius:14px; padding:28px 26px; box-shadow:var(--do2); }
.gpmb-vao h2 { margin:0 0 4px; font-size:19px; font-weight:700; color:#16262E !important; }
.gpmb-vao p.mo { margin:0 0 18px; font-size:12.5px; color:var(--chu3); }

/* ---------- màn hình vừa ---------- */
@media (max-width:1240px) {
  .gpmb-tong { grid-template-columns:340px 1fr; }
  .gpmb-hieu, .gpmb-hieu span { max-width:30ch; }
  .gpmb-so .o { padding:0 11px; }
  .gpmb-so .o b { font-size:17px; }
}

/* ---------- điện thoại ---------- */
@media (max-width:900px) {
  .gpmb-dau { padding:10px 12px; gap:9px; }
  .gpmb-doida { order:1; flex:1 1 auto; }
  .gpmb-hieu, .gpmb-ten .dd { max-width:100%; }
  .gpmb-hieu { font-size:14.5px; }
  .gpmb-an { width:34px; height:34px; }
  .gpmb-nguoi { order:2; flex:none; }
  .gpmb-dem { order:3; padding:6px 11px; }
  .gpmb-dem b { font-size:16px; }
  .gpmb-so { order:4; width:100%; margin:0; flex:1 1 100%; }
  .gpmb-so .o { flex:1; padding:2px 8px 2px 0; text-align:left; border-left:0;
    border-right:1px solid rgba(255,255,255,.16); }
  .gpmb-tab-bo { padding:7px 10px; }
  .gpmb-tab button { padding:8px 12px; font-size:12.5px; }
  .sk-dau select { margin-left:0; width:100%; max-width:none; }
  .gpmb-so .o:last-child { border-right:0; }
  .gpmb-so .o b { font-size:17px; }
  .gpmb-tong { grid-template-columns:1fr; }
  .gpmb-canh-trai { border-right:0; border-bottom:1px solid var(--vien); padding-bottom:20px; }
  .gpmb-bando { min-height:70vh; }
  .gpmb-timbd { width:calc(100% - 62px); }
  .gpmb-nen-chon { right:12px; top:52px; }
  .gpmb-tomau { left:12px; transform:none; top:92px; max-width:calc(100% - 24px);
    overflow-x:auto; }
  .kq-the b { font-size:26px; }
  .gpmb-dieu { top:12px; }
  .gpmb-chugiai { max-width:190px; padding:9px 10px; bottom:44px; }
  .gpmb-chugiai label { font-size:10.5px; padding:2px 0; }
  .gpmb-thecon { display:none !important; }
  .dm-tim { flex:1 1 100%; max-width:none; }
  .dm-tk { grid-template-columns:repeat(2,minmax(0,1fr)); flex:1 1 100%; }
  .tk b { font-size:20px; }
  .dm-chip { justify-content:flex-start; }
  .ld-cg { margin:12px 12px 4px; }
  .ld-luoi { grid-template-columns:1fr; }
  .gpmb-nguon span { display:none; }
  .dm-hang1, .dm-hang2, .dm-ketqua { padding-left:12px; padding-right:12px; }
  .dm-o select, .dm-o input { min-width:118px; }
  .dm-xuat { margin-left:0; }
  .dm-chip { margin-left:0; }
  .dm-truoc { width:100%; }
  .gpmb-bang thead { display:none; }
  .gpmb-bang tbody tr { display:block; border-bottom:1px solid var(--vien); padding:10px 12px; }
  .gpmb-bang td { display:flex; justify-content:space-between; gap:12px; border:0; padding:2px 0; }
  .gpmb-bang td::before { content:attr(data-nhan); color:var(--chu3); font-size:11px; flex:none; }
  .gpmb-bang td.ck { width:auto; }
  .gpmb-bang .sn { text-align:right; }
  .gpmb-bang.nho { font-size:11px; }
  .gpmb-bang.nho tbody tr { display:table-row; padding:0; }
  .gpmb-bang.nho td { display:table-cell; }
  .gpmb-bang.nho td::before { content:none; }
  .gpmb-overlay { padding:0; align-items:stretch; }
  .gpmb-tam { max-width:none; border-radius:0; border:0; min-height:100%; }
  .gpmb-hang { grid-template-columns:1fr; }
  .gpmb-tam .chan { position:sticky; bottom:0; }
  .hs-thanh .o { font-size:9.5px; height:24px; }
  .gpmb-cn { padding:15px 12px 32px; }
}

@media (prefers-reduced-motion:reduce) {
  .lado-gpmb-root *, .gpmb-overlay * { transition:none !important; animation:none !important; }
}
.lado-gpmb-root :focus-visible, .gpmb-overlay :focus-visible {
  outline:2px solid var(--b3); outline-offset:2px; }