/* ============================================================================
 *  calcsheet.css — Giao diện "Phiếu tính sống" (Living Calc-Sheet) v0.3
 *  Apple-clean, phẳng. Màn hình chính = bản thuyết minh tính toán.
 * ========================================================================== */
/* Font nhúng cục bộ (offline) — Be Vietnam Pro nạp qua fonts/bvp.css ở <head>. */

:root{
  /* [2026-07-29, user chốt qua minh hoạ 4 mức — phương án B "rõ ràng"] TĂNG TƯƠNG PHẢN.
     User: "giao diện nhiều lúc sáng quá xem không rõ". Đo WCAG thì MÀU CHỮ KHÔNG PHẢI vấn đề
     (--ink 15,46 · --muted 4,66 · --accent 9,04 · các màu trạng thái 5,7-6,5 — đều đạt AA);
     vấn đề là CẤU TRÚC: nền trang so với nền thẻ chỉ 1,089 lần (1,0 = không phân biệt được)
     và viền --line chỉ 1,26 nên mắt không có mốc bám. Vì vậy CHỈ làm đậm nền + viền + chữ mờ,
     GIỮ NGUYÊN mọi màu chữ và xanh EVN.
       --bg    #f5f5f7 -> #dfe1e7   thẻ tách khỏi nền 1,09 -> 1,31
       --line  #e5e5ea -> #c2c4cc   viền trên thẻ     1,26 -> 1,74
       --line2 #d2d2d7 -> #a2a5b0                     1,51 -> 2,46
       --hint  #8a8a8e -> #63636a   chữ mờ 3,16 -> 5,96 (trước đó DƯỚI ngưỡng AA 4,5)
       --muted #6e6e73 -> #55555a   BUỘC PHẢI đổi, không phải tuỳ chọn (xem dưới)
     ⚠ HỆ QUẢ KHÔNG LƯỜNG TRƯỚC, do test TP7 bắt được: nền trang đậm lên thì chữ phụ --muted
     nằm THẲNG TRÊN NỀN TRANG (.pane-sub, nhãn dưới tiêu đề) tụt từ 4,66 xuống 3,88 — DƯỚI
     chuẩn AA. Tức "chỉ đổi nền, giữ nguyên màu chữ" là KHÔNG LÀM ĐƯỢC: nền đậm ép dải xám
     hẹp lại. Trên nền #dfe1e7, mọi xám nhạt hơn ~#636368 đều trượt AA, nên --hint bị ghim
     sát ngưỡng và --muted phải đậm hơn nữa để còn phân cấp. Khoảng cách muted/hint vì thế
     HẸP HƠN bản cũ (trên thẻ 7,41 và 5,96; bản cũ 5,07 và 3,44) — đó là giá của nền đậm.
     ⚠ --bg còn được dùng làm NỀN CHÌM cho .fx, .kbadge, .lpill-mute, các th bảng
     phụ và nền hover — đậm lên là CÓ LỢI (thấy rõ khối) nhưng phải soi lại phiếu vì ở đó có
     nhiều khối .fx liền nhau. .app-nav ghim cũng ăn --bg: ĐÚNG, nó phải trùng nền trang mới
     che được nội dung cuộn phía dưới. */
  --bg:#dfe1e7; --card:#ffffff; --ink:#1d1d1f; --muted:#55555a; --hint:#63636a;
  /* [2026-07-26] MỘT hệ màu nhấn duy nhất = XANH EVN #0C447C. Trước đó app dùng SONG SONG
     #0071e3 (xanh Apple mặc định, 12 chỗ) cho nút/nhấn và #0C447C (xanh EVN, 9 chỗ) cho
     tiêu đề bảng/Word/Excel — hai hệ màu ngang cơ nhau, không có quy tắc phân vai. */
  --line:#c2c4cc; --line2:#a2a5b0; --accent:#0C447C; --accent-hov:#15589b; --accent-bg:#e8eff7;
  /* lưới bảng tính toàn tuyến — "rất đậm kiểu bản vẽ kỹ thuật" (user chốt 2026-07-22).
     Nền tiêu đề = XANH EVN #0C447C (user chốt) — đúng màu đã dùng cho tiêu đề Word/Excel,
     dải phân khu và sơ đồ render.js, KHÔNG dùng xám đen. */
  --grid-line:#86868b; --grid-out:#3a3a3c; --grid-hdr:#0C447C; --grid-zebra:#eff0f4;
  /* [2026-08-09, user chốt qua minh hoạ 3 phương án] DẢI NHÓM THƯ VIỆN có màu RIÊNG, nhạt hơn
     tiêu đề bảng một nấc. Trước đây nó mượn --grid-hdr, mà dải nhóm là VỎ ĐIỀU HƯỚNG chứ không
     phải nội dung ⇒ đậm ngang tiêu đề bảng là nặng hơn vai của nó.
     ⚠ Token RIÊNG, KHÔNG dùng lại --accent-hov dù cùng trị số #15589b: token đó đang mang vai
     "nút chính khi rê chuột", ghép hai vai vào một token là sau này chỉnh nút thì dải nhóm đổi theo.
     ⚠ ĐỔI TRỊ SỐ THÌ ĐO LẠI TƯƠNG PHẢN: chữ trắng 13px đậm cần ≥ 4,5 ở CẢ trạng thái thường LẪN
     trạng thái rê chuột (.lib-grp:hover sáng lên brightness 1,16). #15589b: thường 7,24 · hover 5,84.
     Test LG1–LG4 khoá điều kiện này — làm nhạt quá tay là test ĐỎ. */
  --lib-grp-bg:#15589b;
  --ok:#0f6e56; --ok-bg:#e1f5ee; --no:#a32d2d; --no-bg:#fceaea;
  --warn:#854f0b; --warn-bg:#faeeda; --info:#185fa5; --info-bg:#e6f1fb;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",monospace;
  /* [2026-07-29, user chốt] bóng đậm hơn để khối NỔI mà không phải làm nền xám thêm nữa */
  --sh-1:0 1px 2px rgba(0,0,0,.05),0 2px 8px rgba(0,0,0,.07);
  --sh-2:0 2px 5px rgba(0,0,0,.07),0 10px 28px rgba(0,0,0,.13);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,"SF Pro Text",'Inter','Segoe UI',Roboto,sans-serif;
  font-size:14px;line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-weight:600;margin:0;letter-spacing:-.01em}
button{font-family:inherit}
::selection{background:rgba(12,68,124,.18)}

/* ---------- Header thương hiệu EVNNPC / NPSC — XẾP NGANG ----------
   [2026-07-30, user chốt theo mẫu ZLine] Trước đây xếp DỌC 5 tầng (logo → eyebrow → tên → mô tả →
   tiêu chuẩn), đo được header cao 218px và nội dung mãi 317px mới bắt đầu: mất 44% màn hình 720px
   trước khi người dùng thấy gì. Nay một hàng ngang: logo | vạch ngăn | (tên + mô tả + đơn vị) |
   tiêu chuẩn nép phải  ⇒  header 93px, nội dung bắt đầu ở 194px.
   ⚠ Bỏ quyết định cũ "không thu nhỏ logo 156px": chính chiều cao logo là chỗ tốn nhất. Bù lại đã
   CẮT LỀ TRẮNG của file logo.png (1920×1080 → 1411×827, lề trắng 14% mỗi phía) nên ở cùng chiều
   cao hiển thị, hình thật to hơn 31% so với trước khi cắt.
   Dùng chung trần 1600px + đệm clamp() như 5 thẻ để mép header thẳng mép nội dung. */
.brand-header{display:flex;flex-direction:row;align-items:center;gap:16px;text-align:left;
  padding:7px clamp(8px,3vw,32px);max-width:1600px;margin:0 auto;
  border-bottom:1px solid var(--line)}
.brand-logo{height:74px;width:auto;object-fit:contain;flex:0 0 auto}
.brand-text{display:flex;flex-direction:column;justify-content:center;min-width:0;
  border-left:1px solid var(--line2);padding-left:16px}
/* [2026-07-30, user chốt theo mẫu] Tên phần mềm ĐẬM màu xanh EVN, kèm mô tả trong ngoặc trên CÙNG
   một dòng; dòng dưới là tên đơn vị đầy đủ. Cỡ chữ hạ so với lúc tên còn ngắn ("EarthLine (OLGC)")
   vì dòng nay dài gấp đôi, để chữ không tràn xuống hàng khi màn hẹp.
   Đã XOÁ .brand-eyebrow / .brand-code-inline / .brand-sub: bỏ "(OLGC)" và dòng viết tắt "NPSC"
   xong thì không thẻ nào mang các lớp này nữa — mã chết, dự án từng dính hậu quả thật vì để lại. */
.brand-title{font-size:clamp(17px,1.85vw,22px);font-weight:800;letter-spacing:-.02em;color:var(--accent);
  line-height:1.15;margin:0}
.brand-tagline{font-size:14px;font-weight:500;color:var(--muted);margin:3px 0 0}
.brand-standards{margin-left:auto;text-align:right;font-size:11.5px;color:var(--hint);white-space:nowrap;flex:0 0 auto}
.app-nav{margin:8px 0 12px}
/* [2026-07-30] ĐÃ GỘP hai bộ giá trị làm một. Trước đây có bộ "nền" (logo 96px) và bộ
   `.app-shell.working` (logo 74px) đè lên. Nhưng `main.js:964` chỉ THÊM lớp `working` và KHÔNG BAO
   GIỜ gỡ ⇒ bộ nền chỉ sống được khoảnh khắc trước khi main.js chạy, rồi co xuống kèm transition
   0,28s ⇒ header GIẬT MỘT NHỊP mỗi lần tải trang, mà bộ nền thì thành mã chết. Nay một bộ duy nhất,
   không transition, không giật. Muốn có chế độ header cao lại thì thêm luật `.app-shell:not(.working)`. */
/* Màn hẹp: danh mục tiêu chuẩn là thứ bỏ được đầu tiên, rồi mới tới thu logo */
@media (max-width:900px){ .brand-standards{display:none} }
@media (max-width:560px){ .brand-logo,.app-shell.working .brand-logo{height:58px} }

/* Nút Tra cứu NỔI (fixed góc dưới phải, hơi trong suốt, tinh tế) */
.fab-ref{position:fixed;right:24px;bottom:24px;z-index:44;width:54px;height:54px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--accent);font-size:22px;
  background:rgba(255,255,255,.62);backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);
  border:.5px solid rgba(0,0,0,.10);box-shadow:0 6px 20px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.07);
  opacity:.6;transition:opacity .18s,transform .18s,box-shadow .18s}
.fab-ref:hover{opacity:1;transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.20)}
.fab-ref:active{transform:scale(.94)}
.fab-ref .fab-lbl{position:absolute;right:62px;background:rgba(28,28,30,.92);color:#fff;font-size:12px;font-weight:500;
  padding:5px 11px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transform:translateX(4px);transition:opacity .18s,transform .18s}
.fab-ref:hover .fab-lbl{opacity:1;transform:translateX(0)}

/* Thanh CUỐI: Lưu kết quả → Xuất (khóa Xuất tới khi đã lưu) */
.result-actions{margin:18px 0 0;padding:15px 18px;background:var(--card);border:.5px solid var(--line);border-radius:16px;
  box-shadow:var(--sh-1);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ra-hint{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px;line-height:1.4}
.ra-hint i{font-size:15px}
.ra-btns{display:flex;gap:10px;flex-wrap:wrap}
.btn.locked{opacity:.45;filter:grayscale(.35)}
.btn.locked:hover{opacity:.55;background:#fff}
#btnSaveResult.done{background:var(--ok);border-color:var(--ok)}
#btnSaveResult.done:hover{background:var(--ok)}

/* ---------- Nav: thanh viên thuốc căn giữa + hàng hành động ---------- */
/* [2026-07-26] GHIM thanh 5 thẻ lên đỉnh khi cuộn. Khối thương hiệu (226px, logo 156px
   do user chốt ở 252a6f3) vẫn cuộn đi bình thường — cuộn qua là lấy lại trọn 226px mà
   vẫn còn lối chuyển thẻ. Không gập/thu nhỏ logo để giữ đúng quyết định cũ. */
.app-nav{display:flex;flex-direction:column;align-items:center;gap:12px;margin:6px 0 12px;
  position:sticky;top:0;z-index:55;background:var(--bg);padding:8px 0 9px}
.head-actions{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;padding:4px 12px;border-radius:999px}
.chip-ok{background:var(--ok-bg);color:var(--ok)} .chip-warn{background:var(--warn-bg);color:var(--warn)}
.btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;padding:7px 15px;border-radius:999px;
  background:#fff;border:.5px solid var(--line2);color:var(--ink);cursor:pointer;
  transition:background .18s,box-shadow .18s,transform .12s,border-color .18s}
.btn:hover{background:var(--bg);border-color:var(--line2)} .btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hov);border-color:var(--accent-hov)}
/* [2026-07-26] BA HẠNG NÚT thay vì 5 nút trắng giống hệt nhau:
   .btn-primary = việc chính (đặc màu) · .btn-key = lối vào dữ liệu chính (viền màu, chữ màu)
   · .btn = việc phụ (trắng). Trước đó "Nhập Excel" (luồng chính) trông y hệt "Tải lại thư viện". */
.btn-key{border-color:var(--accent);color:var(--accent);font-weight:600}
.btn-key:hover{background:var(--accent-bg);border-color:var(--accent)}
/* Dòng chú thích dưới tiêu đề thẻ — nêu PHẠM VI áp dụng, không phải câu hướng dẫn thao tác */
.pane-sub{font-size:12.5px;color:var(--muted);margin:2px 0 0}

/* ---------- Body: 2 BƯỚC full-khung (Đầu vào → Kết quả) ---------- */
.app-body{padding:14px 24px 96px}   /* chừa đáy để FAB Tra cứu không đè thanh Xuất khi cuộn hết */
/* Tab = segmented control kiểu Apple: khay xám, nút chọn nổi trắng */
.tabbar{display:inline-flex;gap:3px;background:rgba(120,120,128,.13);border-radius:999px;padding:5px;border:0}
.tab{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:10px 22px;cursor:pointer;
  color:var(--muted);background:none;border:0;border-radius:999px;margin:0;
  transition:color .18s,background .18s,box-shadow .18s}
.tab .tnum{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  background:rgba(0,0,0,.08);color:var(--muted);font-size:12px;transition:background .18s,color .18s}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--accent);background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.10)}
.tab.active .tnum{background:var(--accent);color:#fff}
.tabpane{display:none} .tabpane.active{display:block}
.input-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:13px;align-items:start}
#cardDienCuc{grid-column:span 2}
@media(max-width:760px){#cardDienCuc{grid-column:auto}}
.cta-bar{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:18px;padding-top:15px;border-top:.5px solid var(--line)}
.btn-lg{font-size:15px;font-weight:500;padding:12px 26px;border-radius:999px}
.btn-lg.btn-primary{box-shadow:0 2px 8px rgba(12,68,124,.30)}
.btn-lg.btn-primary:hover{box-shadow:0 4px 14px rgba(12,68,124,.36)}
/* ===== Thẻ 1: Thiết lập dự án — bố cục 2 cột cân đối (tông Apple) ===== */
.setup-head{max-width:1160px;margin:2px auto 18px}
.setup-head h3{font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.02em;margin:0}
.setup-head p{font-size:12.5px;color:var(--muted);margin:5px 0 0;max-width:760px;line-height:1.5}
.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;max-width:1160px;margin:0 auto}
.setup-col{display:flex;flex-direction:column;gap:18px}
.setup-cta{max-width:1160px;margin-left:auto;margin-right:auto}
/* hàng trên 2 thẻ cao bằng nhau (stretch) + thẻ Bộ tiếp địa rộng full bên dưới */
.setup-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch;max-width:1160px;margin:0 auto}
.setup-grid2 .wide{grid-column:1 / -1}
.setup-set{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:20px;align-items:start}
.setup-set-preview{margin:0;align-self:center}
@media(max-width:820px){.setup-grid{grid-template-columns:1fr}.setup-grid2{grid-template-columns:1fr}.setup-grid2 .wide{grid-column:auto}.setup-set{grid-template-columns:1fr}}
.result-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.result-sheet{max-width:920px}
#paneResult{max-width:1600px;margin:0 auto;padding:0 clamp(8px,3vw,32px)}   /* [2026-07-29] đồng bộ luật độ rộng 5 thẻ (xem .line-page) */
#paneResult .result-sheet{max-width:none}
/* Thanh "Tính toán" (bấm mới chạy) + làm mờ kết quả khi số liệu đã đổi */
.compute-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px;padding:11px 16px;
  background:var(--card);border:.5px solid var(--line);border-radius:14px;box-shadow:var(--sh-1);transition:background .18s,border-color .18s}
.compute-bar .btn-lg{font-size:15px;padding:10px 24px}
.compute-hint{font-size:12.5px;color:var(--muted)}
.compute-bar.dirty{border-color:var(--warn);background:var(--warn-bg)}
/* [2026-09-23, rà giao diện PH-12] thanh Tính toán thành CHÂN của khung "Dữ liệu vị trí" (trước đứng tách một thanh riêng) */
#posInputPanel > .icard{margin-bottom:0 !important;border-bottom-left-radius:0 !important;border-bottom-right-radius:0 !important}
#posInputPanel + .compute-bar{margin-top:0;border-top-left-radius:0;border-top-right-radius:0;border-top:.5px dashed var(--line2)}
.compute-bar.dirty .compute-hint{color:var(--warn);font-weight:600}
.compute-bar.dirty .btn-primary{animation:pulseCompute 1.5s ease-in-out infinite}
@keyframes pulseCompute{0%,100%{box-shadow:0 0 0 0 rgba(12,68,124,0)}50%{box-shadow:0 0 0 5px rgba(12,68,124,.16)}}
.result-sheet.stale{opacity:.42;filter:grayscale(.2);transition:opacity .2s}
/* [2026-09-23, rà giao diện HS-2] dải báo phiếu cũ — hiện cả trên màn hình lẫn khi in */
.stale-banner{display:flex;gap:8px;align-items:flex-start;max-width:960px;margin:0 auto 10px;padding:9px 14px;border:1px solid #e3aa55;border-radius:10px;background:#fff3df;color:#6b3d00;font-size:13.5px;font-weight:500;line-height:1.45}
.stale-banner[hidden]{display:none}
.stale-banner .ti{margin-top:2px}
@media print{ .stale-banner{border:1.5pt solid #000;background:none;color:#000;font-size:11pt;margin:0 0 8pt;border-radius:0} .stale-banner[hidden]{display:none} }

/* dải KẾT QUẢ tóm tắt + điều hướng mục */
.result-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin-bottom:12px}
.sumcard{background:#fff;border:.5px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:var(--sh-1)}
.sumcard .s-lbl{font-size:11px;color:var(--muted)} .sumcard .s-num{font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:2px}
.sumcard.verdict-ok{background:var(--ok-bg)} .sumcard.verdict-ok .s-num{color:var(--ok)}
.sumcard.verdict-no{background:var(--no-bg)} .sumcard.verdict-no .s-num{color:var(--no)}
.sumcard.verdict-cond{background:var(--warn-bg)} .sumcard.verdict-cond .s-num{color:var(--warn)}
/* [2026-09-23, rà giao diện PH-8] dải mục phiếu ghim ngay dưới thanh thẻ khi cuộn; chip là nút thật */
.sec-nav{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-bottom:13px;position:sticky;top:var(--ghim-tren,69px);z-index:6;
  background:#fff;padding:8px 0}
.secnav-chip{font-size:11.5px;padding:4px 10px;border-radius:999px;border:.5px solid var(--line2);background:#fff;cursor:pointer;color:var(--muted);
  font-family:inherit;line-height:1.3}
/* [PH-1] ô "Hiện các dòng thay số": cuối dải mục; chỉ ẩn dòng thay số trên màn hình, khi in phiếu luôn đủ */
.sec-nav .toggle-trace{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer;padding:4px 2px}
.sec-nav .toggle-trace input{width:auto;margin:0}
@media screen{ #sheetBody.an-thay-so .tr-thay{display:none} }
/* [PH-15] biểu tượng quay khi nút đang xuất */
.ti.quay{display:inline-block;animation:quay 1s linear infinite}
@keyframes quay{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .ti.quay{animation:none} }
.secnav-chip:hover{background:var(--bg)}
.secnav-chip.active{background:var(--accent-bg);border-color:var(--accent);color:var(--info)}

/* Card thiết lập — tông Apple: nền trắng, viền tóc, bóng mềm, bo 16 */
.icard{background:var(--card);border:.5px solid var(--line);border-radius:16px;padding:17px 19px;
  box-shadow:var(--sh-1);transition:box-shadow .22s,transform .22s,border-color .22s}
.icard:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.icard h4{font-size:14.5px;font-weight:700;color:var(--ink);margin:0 0 14px;display:flex;align-items:center;gap:10px;letter-spacing:-.01em}
.icard h4 i{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;background:var(--accent);color:#fff;font-size:16px;flex:none;box-shadow:0 2px 6px rgba(12,68,124,.28)}
.fld{margin-bottom:11px} .fld:last-child{margin-bottom:0}
.fld label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px}
.row{display:flex;gap:6px} .row>div{flex:1}
input,select{width:100%;font-family:inherit;font-size:13px;padding:7px 10px;border:.5px solid var(--line2);
  border-radius:10px;background:#fff;color:var(--ink);transition:border-color .18s,box-shadow .18s}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(12,68,124,.14)}
input[readonly]{background:var(--bg);color:var(--muted);cursor:not-allowed}

/* ---------- Lưới nhập 3 cột (thẻ Tính) ---------- */
/* [2026-07-29] Ba cột nay đều là .gbox (khai ở cuối file). Đã BỎ các quy tắc thành mã chết theo đó:
   .pcol .pcol-h .pcol-h-sub .pcol-btns .pcol-rht .pcol-soil .pchk — giữ lại chỉ tổ mai sau có
   người sửa nhầm vào, đúng bệnh apple-style.css. */
/* [2026-07-31, user chốt] `align-items:start` cho mỗi khung tự co theo số dòng bên trong ⇒ ba khung
   "Vị trí cột / Điện trở suất đất nền / Bộ tiếp địa" cao thấp khác nhau, nhìn lệch hẳn (khung giữa
   đổi chiều cao theo SỐ LỚP ĐẤT nên còn nhảy lên nhảy xuống khi thêm/bớt lớp). Nay `stretch`:
   cả ba cao bằng khung cao nhất, mép dưới thẳng hàng. */
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px 26px;align-items:stretch}
.pcol-addlayer{font-size:12px;padding:4px 12px;border:.5px solid var(--line2);border-radius:8px;background:#fff;color:var(--ink);cursor:pointer}
.pcol-addlayer:hover{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
/* Bảng lớp đất — căn cột thẳng (ρ / dày thẳng hàng mọi lớp) */
/* [2026-07-26, user chốt] Bảng lớp đất ở thẻ TÍNH RIÊNG dùng chung ngôn ngữ với bảng
   TOÀN TUYẾN: tiêu đề nền xanh EVN chữ trắng, kẻ lưới, sọc chẵn/lẻ. Đây là lưới CSS chứ
   không phải <table>, nên dựng khung bằng border của .pcol-soil + border-top từng dòng.
   Bỏ luôn 5 màu hard-code lạc hệ ở đây (#94a3b8 #2563eb #9aa7b4 #cbd5e1 #dc2626) —
   riêng #2563eb là màu XANH THỨ BA của app, không thuộc hệ EVN. */
.soil-hd,.soil-row{display:grid;grid-template-columns:44px 74px 74px 1fr 20px;gap:7px;align-items:center;padding:4px 8px}
/* [2026-07-29] .soil-hd hạ xuống TIÊU ĐỀ CỘT (nền xám), vì thanh xanh EVN nay dành riêng cho
   TÊN NHÓM (.gbox-h) — mỗi khung đúng một thanh xanh, ba cột nhìn ngang hàng nhau. */
.soil-hd{font-size:10.5px;color:var(--ink);background:var(--grid-zebra);font-weight:700;letter-spacing:.02em;
  text-align:center;border-bottom:1px solid var(--grid-line)}
.soil-row+.soil-row{border-top:1px solid var(--grid-line)}
/* Sọc chẵn lẻ tính TRONG .soil-body — trước đây dùng nth-child(odd) trên .pcol-soil nên phụ thuộc
   việc .soil-hd là con đầu tiên; thêm bất kỳ thanh nào phía trên là đảo hết sọc. */
.soil-body .soil-row:nth-child(even){background:var(--grid-zebra)}
.s-lyr{font-size:11px;color:var(--muted)}
.soil-row input[type=number]{text-align:right}

/* ===== KHUNG BẢNG NHÃN / GIÁ TRỊ — DÙNG CHUNG Thẻ 3 và Thẻ 4 =====
   [2026-07-29, user chốt "Phương án A"] Trước đây chỉ khối "Điện trở suất đất nền" ở giữa theo
   ngôn ngữ bảng tính, còn "Vị trí cột" và "Bộ tiếp địa" là biểu mẫu web nhãn-đè-trên-ô, không
   khung: ba cột đọc ra như ba thứ khác nhau. Nay cả ba cùng một khuôn.
   ⚠ Khai Ở ĐÂY một lần cho cả hai thẻ — không chép mã màu sang line.js (nguyên tắc dùng chung).
   Nhãn nằm BÊN TRÁI ô thay vì bên trên: mỗi trường bớt ~17px chiều cao. */
/* [2026-07-31, user chốt] BO GÓC cho mềm mắt. Khung bo thì thanh tiêu đề nền xanh phải bo THEO ở
   hai góc trên, nếu không màu nền vuông sẽ thò ra khỏi đường bo. `overflow:hidden` để mọi thứ bên
   trong (thanh tiêu đề, sọc chẵn lẻ, hàng cuối) bị cắt gọn theo đường bo.
   `display:flex;flex-direction:column` + `.gfoot{margin-top:auto}` để khi ba khung kéo cao bằng
   nhau thì phần thừa dồn xuống dưới, nút "+ thêm lớp" luôn nằm sát đáy khung. */
.gbox{border:1.5px solid var(--grid-out);background:var(--card);min-width:0;
  border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.gbox-h{background:var(--grid-hdr);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.02em;
  text-align:center;padding:5px 8px;border-bottom:1.5px solid var(--grid-out);flex:0 0 auto}
.gbox .gfoot{margin-top:auto}
.gbox-h i{font-weight:400;font-style:normal;opacity:.82}
.grow{display:grid;grid-template-columns:96px minmax(0,1fr);font-size:12px;min-width:0}
.grow+.grow{border-top:1px solid var(--grid-line)}
.glab{padding:5px 8px;background:var(--grid-zebra);border-right:1px solid var(--grid-line);
  color:var(--muted);font-size:11.5px;display:flex;align-items:center}
.gval{padding:4px 7px;min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gval input,.gval select{font-size:12.5px;padding:4px 7px;border-radius:6px;min-width:0}
.gval .btn{font-size:12px;padding:4px 11px}
.gchk{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--ink)}
.gchk input[type=checkbox]{width:auto;flex:none;margin:0}
.ghint{color:var(--hint);font-size:11.5px}
.gfoot{border-top:1px solid var(--grid-line);background:var(--grid-zebra);padding:4px 7px}
.gicon{border:.5px solid var(--line2);background:#fff;color:var(--muted);cursor:pointer;
  border-radius:6px;padding:3px 7px;font-size:13px;line-height:1;flex:none}
.gicon:hover{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}
.gicon{min-width:28px;min-height:28px}   /* [2026-09-23, rà giao diện DD-4] trước 29×22 px */
.lt-chk{display:inline-flex;align-items:center;justify-content:center;min-width:26px;min-height:26px;cursor:pointer;margin:0}
.lt-chk input{margin:0}
.s-inf{font-weight:700;color:var(--accent);font-size:15px;text-align:center;line-height:1}
.s-dep{font-size:10.5px;color:var(--hint);white-space:nowrap}
.s-del{border:0;background:none;color:var(--hint);cursor:pointer;font-size:12px;padding:0;line-height:1}
.s-del:hover{color:var(--no)}
input[type=checkbox]{width:auto}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.echip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:5px 12px;border-radius:999px;
  border:.5px solid var(--line2);background:#fff;cursor:pointer;user-select:none;
  transition:background .18s,border-color .18s,color .18s}
.echip:hover{background:var(--bg)}
.echip.on{background:var(--accent-bg);border-color:var(--accent);color:var(--info)}
.echip.gem.on{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.sub-group{border-top:.5px solid var(--line);padding-top:9px;margin-top:9px}
.kbadge{font-family:var(--mono);font-size:12px;background:var(--bg);border-radius:6px;padding:2px 7px;color:var(--info)}

/* [2026-08-02] ĐÃ XOÁ .diagram-box / .diagram-cap cùng `js/diagram.js` — nhánh vẽ duy nhất dùng
   tới chúng (render.js) canh `r.diagramCfg`, mà main.js gán cứng null từ khi app chuyển sang bộ
   vẽ ⇒ chưa bao giờ chạy. Sơ đồ trong phiếu do `sectionSVG` vẽ. */

/* ---------- Calc-sheet ---------- */
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.blk{background:var(--card);border:.5px solid var(--line);border-radius:14px;padding:15px 17px;margin-bottom:12px;box-shadow:var(--sh-1)}
.blk.accent{border-color:var(--line2)}
.blk-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.blk-top .b-name{font-size:14px;font-weight:600;letter-spacing:-.01em}
/* [2026-07-26] THỨ BẬC TIÊU ĐỀ MỤC cho phiếu web — mirror bản Word (export.js secHead:
   đậm + gạch chân + page-break-after:avoid). Trước đó tiêu đề mục chỉ 14px/600, gần như
   bằng chữ thường, nên phiếu dài 5263px cho MỘT vị trí đọc ra một dải chữ đều tăm tắp,
   không phân biệt được đâu là mục. Chỉ áp cho khối CẤP 1 (.blk > .blk-top), không áp cho
   .subblk để mục con không bị kẻ dày ngang cấp mục chính. */
.blk > .blk-top{border-bottom:1px solid var(--line2);padding-bottom:7px;margin-bottom:11px}
.blk > .blk-top .b-name{font-size:16px;font-weight:700;color:var(--ink)}
/* [2026-07-29] Nền trang nay là xám thật (#dfe1e7), không còn gần trắng như #f5f5f7. In phiếu mà
   bật "Background graphics" là phủ xám kín khổ A4; tắt thì tiêu đề bảng (chữ TRẮNG trên nền xanh
   EVN) biến mất trên giấy trắng. Nên khi in: ép nền trang về trắng, và ép giữ nền các ô tiêu đề. */
@media print{
  .blk > .blk-top{break-after:avoid;page-break-after:avoid}
  body{background:#fff}
  thead th,.ltab thead th,.gbox-h,.lib-grp{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.b-val{font-size:22px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.b-val .u{font-size:12px;color:var(--muted);font-weight:400}
.fx{background:var(--bg);border-radius:10px;padding:9px 12px;margin:7px 0;font-size:13px;color:var(--ink);overflow-x:auto;font-family:var(--mono)}   /* [2026-07-12] hộp công thức dùng CÙNG font mono như vết tính (đồng bộ toàn phiếu) */
.fx sub{font-size:.72em} .fx sup{font-size:.72em}
/* Phân số kiểu sách giáo khoa: tử trên · gạch ngang · mẫu dưới (fracify)
   position:relative → alignFracBars() (render.js) đặt style.top=(mẫuH−tửH)/2 đưa GẠCH phân số về
   đúng trục dòng (nơi vertical-align:middle căn tới); vá dấu =/toán tử "lơ lửng" khi tử–mẫu lệch cao
   (phân số con lồng). Phân số cân bằng → top≈0 (không đổi). */
.frac{display:inline-flex;flex-direction:column;text-align:center;vertical-align:middle;margin:0 .18em;line-height:1.25;position:relative}
.frac>.fr-n{padding:0 .55em 1px} .frac>.fr-d{padding:1px .55em 0;border-top:1.1px solid currentColor}
/* Khối "định nghĩa biến & quy ước" (thu gọn được — <details>) */
details.meta{margin:6px 0;border:.5px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
details.meta>summary{cursor:pointer;list-style:none;user-select:none;font-size:11.5px;color:var(--info);
  background:var(--info-bg);padding:6px 11px;display:flex;align-items:center;gap:6px}
details.meta>summary::-webkit-details-marker{display:none}
details.meta>summary::before{content:"\203A";font-size:14px;line-height:1;transition:transform .15s;display:inline-block}
details.meta[open]>summary::before{transform:rotate(90deg)}
.mv-list{padding:8px 11px 4px}
.mv-row{display:flex;gap:9px;font-size:12px;line-height:1.5;padding:2px 0;align-items:baseline}
.mv-sym{font-family:var(--mono);color:var(--ink);font-weight:600;min-width:46px;flex:none}
.mv-sym sub{font-size:.72em} .mv-sym sup{font-size:.72em}
.mv-desc{color:var(--muted)} .mv-unit{color:var(--hint);font-family:var(--mono)}
/* [Mục 2] định nghĩa nội dòng "ký hiệu: mô tả [đơn vị]" (gọn, kiểu dòng chú giải) */
.def-list{margin:7px 0 3px;font-size:12px;line-height:1.65}
.def-list .dl-row{padding:1px 0;color:var(--muted)}
.def-list .dl-sym{font-family:var(--mono);color:var(--ink);font-weight:600}
.def-list .dl-sym sub{font-size:.72em}
.mv-conv-h{font-size:11px;font-weight:600;color:var(--ink);padding:4px 11px 0}
ul.mv-conv{margin:3px 0 9px;padding-left:27px;font-size:11.5px;color:var(--muted);line-height:1.55}
ul.mv-conv li{padding:1px 0}
/* [2026-09-11 de-AI] khối Giả thiết + đoạn văn thường (dự phòng khi không có mẫu in) */
ol.gt-list{margin:3px 0 9px;padding-left:27px;font-size:11.5px;color:var(--muted);line-height:1.55}
ol.gt-list li{padding:1px 0}
p.tm-p{margin:4px 0 8px;font-size:12.5px;color:var(--ink);line-height:1.55}
ul.mv-conv sub{font-size:.72em} ul.mv-conv sup{font-size:.72em}
ul.mv-terms li{padding:2px 0} ul.mv-terms b{color:var(--ink);font-weight:600}
.mv-fx{font-family:var(--mono);color:var(--ink)}
.trace{font-family:var(--mono);font-size:11.5px;color:var(--muted);line-height:1.9}
.trace .tr-row{white-space:normal;overflow-wrap:break-word;padding:2px 0}   /* CHO XUỐNG DÒNG — khỏi cuộn ngang; phân số vẫn nguyên khối (inline-flex) */
.trace .tr-row b{color:var(--ink);font-weight:500;white-space:nowrap}       /* giữ "84,22 Ω" không vỡ giữa số & đơn vị */
.frac{max-width:100%}                                                       /* phân số dài không tràn khung */
.frac>.fr-n,.frac>.fr-d{white-space:normal;overflow-wrap:break-word}         /* tử/mẫu dài tự xuống dòng thay vì đẩy ngang */
/* KHỐI TOÁN thay số (.tr-eq): KHÔNG cho gãy dòng giữa biểu thức (vd đứt sau "[ln(") — dài quá thì
   tự cuộn ngang trong khối; nhãn trước "=" và kết quả "→ …" vẫn xuống dòng bình thường. */
.trace .tr-eq{white-space:nowrap;display:inline-block;max-width:100%;overflow-x:auto;vertical-align:middle}
/* [2026-10-18, chủ trì: "dấu = thể hiện vị trí chưa chính xác ở giữa dấu phân số"] khối toán KaTeX đứng theo ĐƯỜNG CHÂN chữ,
   nhờ đó hai dấu "=" chữ thường hai bên nằm ngang trục toán, tức ngang gạch phân số chính. Căn giữa hộp (middle) sai ở phân số
   lồng: mẫu cao hơn tử nên tâm hộp thấp hơn gạch chính, dấu "=" tụt xuống 10,15 px. Dùng inline-flex vì khối có overflow-x:auto:
   inline-block cuộn được thì lấy MÉP DƯỚI làm đường chân (CSS 2.1), inline-flex vẫn lấy đường chân của công thức.
   Phân số HTML dự phòng (không có KaTeX) giữ cách căn giữa như cũ. */
.trace .tr-eq:has(> .katex){display:inline-flex;vertical-align:baseline;overflow-y:hidden}
/* [2026-10-18] overflow-y:hidden: khối cuộn ngang (overflow-x:auto) thì chiều dọc cũng thành auto, mà hộp đệm vô hình của KaTeX
   nhô 1-5 px khỏi khung ở 75/203 công thức, nên máy có thanh cuộn luôn hiện (Windows) lộ một thanh cuộn dọc cạnh công thức.
   Đã so ảnh từng loại công thức có bật và tắt phần cắt: không mất nét chữ, gạch phân số hay dấu ngoặc nào. */
/* [2026-10-18] "= công thức" và "= kết quả" là một khối không ngắt (render.js traceRows): dòng dài xuống dòng TRƯỚC dấu "=".
   Chừa chỗ cho "= " để khối toán dài nhất (đang cuộn ngang) cộng dấu "=" vẫn vừa bề ngang dòng. */
.trace .tr-dau{white-space:nowrap}
.trace .tr-dau > .tr-eq{max-width:calc(100% - 1.4em)}
/* [2026-10-18] công thức bằng chữ thuần (không thẻ con, vd "max(điện cực sâu nhất 0,8 m; ½ × bề rộng dàn 6,0 m)" ở dòng độ sâu
   dòng tản): chạy liền như chữ thường để cùng đường chân với nhãn (khối căn giữa làm chữ tụt 1,42 px) và tự xuống dòng
   trên điện thoại thay cho cuộn ngang. */
.trace .tr-eq:not(:has(*)){display:inline;white-space:normal;vertical-align:baseline}
.trace .tr-head{font-family:var(--mono);font-size:11.5px;color:var(--ink);font-weight:600;padding:5px 0 1px;white-space:normal;
  display:flex;flex-wrap:wrap;align-items:center;column-gap:.15em}   /* nhãn/dấu "=" căn GIỮA chiều cao phân số */
.trace .tr-head .th-fx{font-weight:400;color:var(--ink)}   /* [2026-07-12] công thức cùng MÀU MỰC với nhãn (bỏ xanh cho đỡ rối) — phân biệt bằng weight */
/* Bảng tra số liệu inline (thu gọn <details>) — dòng/ô ĐÃ DÙNG tô đậm */
details.reftbl{margin:5px 0 9px;border:.5px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
details.reftbl>summary{cursor:pointer;list-style:none;user-select:none;font-size:11.5px;color:var(--muted);
  background:var(--bg);padding:5px 11px;display:flex;align-items:center;gap:6px}
details.reftbl>summary::-webkit-details-marker{display:none}
details.reftbl>summary::before{content:"\203A";font-size:14px;line-height:1;transition:transform .15s;display:inline-block}
details.reftbl[open]>summary::before{transform:rotate(90deg)}
/* [2026-07-26] Bảng tra trong PHIẾU cũng kẻ đậm như bảng tính (user chốt: "thể hiện rõ
   ràng để theo dõi"). Cùng bộ biến --grid-* với .ltab / .panel table / .guide-mtx. */
table.reftab{border-collapse:collapse;width:auto;margin:7px 11px 3px;font-size:11.5px;
  border:1.5px solid var(--grid-out);background:var(--card)}
table.reftab th,table.reftab td{border:1px solid var(--grid-line);padding:4px 10px;text-align:center;color:var(--ink);white-space:nowrap}
table.reftab th{background:var(--grid-hdr);color:#fff;font-weight:700;border-bottom:1.5px solid var(--grid-out)}
/* ⚠ cố ý viết NGẮN (.reftab, không 'table.reftab tbody') để độ ưu tiên (0,2,2) THẤP HƠN
   .hi-row/.hi-col (0,2,3) bên dưới — nếu không, sọc chẵn/lẻ sẽ đè mất ô ĐANG TRA được tô sáng. */
.reftab tr:nth-child(even) td{background:var(--grid-zebra)}
table.reftab th sub{font-size:.72em}
/* [2026-07-29] #fff6e0 -> #ffe4a0. Nền đậm lên kéo theo --grid-zebra (#f7f7f9 -> #eff0f4, độ chói
   0,872) nhưng màu nhấn này viết CỨNG nên đứng yên: nó thành SÁNG HƠN sọc (0,9255 > 0,872) trong
   khi vẫn tối hơn hàng lẻ trắng — cùng một dấu hiệu "đang tra" cho hai chiều ngược nhau tùy hàng
   chẵn hay lẻ. Trị mới tối hơn CẢ HAI (0,7928), cùng chiều với .hi-col #ffdf85 vốn đã đúng. */
table.reftab tr.hi-row td{background:#ffe4a0;color:var(--ink)}
table.reftab td.hi-col{background:#ffdf85;color:var(--ink);font-weight:700}
.reftab-note{font-size:11px;color:var(--hint);padding:1px 11px 8px;line-height:1.5}
.reftab-note sub{font-size:.72em}
.trace .tr-head sub{font-size:.72em} .trace .tr-head sup{font-size:.72em}
.src{border-left:2.5px solid var(--accent);background:var(--info-bg);border-radius:0 10px 10px 0;padding:6px 11px;
  font-size:11.5px;color:var(--info);margin-top:8px}
.note{border-radius:10px;padding:7px 11px;font-size:12px;margin-top:7px;display:flex;gap:7px;align-items:flex-start}
.note i{margin-top:1px}
.note.warn{background:var(--warn-bg);color:var(--warn)} .note.no{background:var(--no-bg);color:var(--no)}
.note.info{background:var(--info-bg);color:var(--info)}
.subblk{border-top:.5px solid var(--line);padding-top:10px;margin-top:10px}
.subblk:first-child{border-top:0;padding-top:0;margin-top:0}

/* gauge */
.gauge-wrap{margin:12px 0 6px;position:relative;height:34px}
/* [2026-08-14, rà lần hai] `.gauge-na` do bản vá 2e0fecd thêm vào render.js mà QUÊN khai luật CSS
   — câu "chưa đủ số liệu" rơi ra không định dạng, lọt thỏm giữa phiếu. Thêm một class ở JS thì
   phải thêm luật ở CSS: dự án đã dính đúng họ này với viền kép hàng Thư viện. */
.gauge-na{display:flex;align-items:center;height:34px;padding:0 10px;border:1px dashed var(--line,#c9ced6);
  border-radius:6px;color:var(--muted,#6b7280);font-size:13px;font-style:italic;background:var(--bg-soft,#fafbfc)}
.gauge-track{position:absolute;left:0;right:0;top:13px;height:10px;border-radius:999px;overflow:hidden;display:flex;background:var(--line)}
.gauge-green{background:var(--ok-bg)} .gauge-red{background:var(--no-bg)}
.gauge-thr{position:absolute;top:7px;width:2px;height:22px;background:var(--muted);transform:translateX(-1px)}
.gauge-thr-lbl{position:absolute;top:-6px;font-size:10px;color:var(--muted);transform:translateX(-50%)}
.gauge-mark{position:absolute;top:1px;transform:translateX(-50%);transition:left .35s ease;text-align:center;color:var(--ink)}
.gauge-scale{display:flex;justify-content:space-between;font-size:10.5px;color:var(--hint)}
.verdict{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;padding:8px 16px;border-radius:999px;margin-top:10px}
.verdict.ok{background:var(--ok-bg);color:var(--ok)} .verdict.no{background:var(--no-bg);color:var(--no)}
.verdict.cond{background:var(--warn-bg);color:var(--warn)}

.toggle-trace{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:5px;cursor:pointer}
.mini-grid{display:flex;gap:9px;flex-wrap:wrap}
.mini{flex:1;min-width:150px;background:var(--card);border:.5px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:var(--sh-1)}
.mini .m-name{font-size:12.5px;font-weight:600} .mini .m-sub{font-size:11.5px;color:var(--muted);margin-top:2px}

/* slide panel (Tra cứu / Hướng dẫn) */
/* [2026-07-26] z-index 50 -> 900. Từ lúc GHIM thanh 5 thẻ (.app-nav z-index 55) thì lớp phủ
   này nằm DƯỚI thanh thẻ, nên thanh thẻ vẽ đè lên hộp thoại (bảng "Chọn cấu hình theo địa
   chất" và cả hộp "Vẽ bộ tiếp địa" đều dùng chung .scrim này).
   THỨ TỰ LỚP đang dùng — thêm lớp mới phải soi lại bảng này:
     6 tiêu đề cột bảng · 44 nút Tra cứu nổi · 55 thanh 5 thẻ (ghim) ·
     900 .scrim (hộp thoại) · 1000 .ssov/.li-overlay · 9999 tooltip + menu ⋮ */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.34);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:900;display:none}
.scrim.open{display:block}
/* Hộp nổi VẼ BỘ TIẾP ĐỊA (composer trong iframe) */
.cmp-modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(96vw,1240px);height:94vh;
  background:var(--card);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 28px 90px rgba(0,0,0,.30),0 6px 20px rgba(0,0,0,.12)}
.cmp-modal-bar{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:.5px solid var(--line);flex:0 0 auto}
.cmp-modal-bar>i{color:var(--accent);font-size:18px}
.cmp-modal-bar>b{font-size:15px;color:var(--ink);white-space:nowrap}
.cmp-modal-sub{font-size:11.5px;color:var(--hint);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-modal-x{position:static;border-radius:999px;padding:6px 14px;white-space:nowrap}
.cmp-modal-luu{position:static;border-radius:999px;padding:6px 14px;white-space:nowrap}   /* [2026-09-23, DL-5] nút lưu trên thanh đầu hộp vẽ */
#composerFrame{border:0;flex:1;width:100%;background:var(--bg)}
.panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(780px,94vw);max-height:86vh;background:var(--card);
  border:.5px solid var(--line);border-radius:20px;box-shadow:0 28px 90px rgba(0,0,0,.30),0 6px 20px rgba(0,0,0,.12);
  overflow:auto;padding:24px 26px}
.panel h3{font-size:16px;margin-bottom:10px}
.panel .x{position:absolute;top:14px;right:16px;cursor:pointer;font-size:20px;color:var(--muted);background:none;border:0}
.app-shell{position:relative;min-height:100vh}

/* ============================================================================
 *  Thẻ 3 — BẢNG TOÀN TUYẾN (line.js): tông Apple thống nhất với thẻ 1/2.
 *  Trước đây line.js hardcode bảng màu slate → nay dùng biến/lớp chung.
 * ========================================================================== */
/* Bố cục thẻ 3 = các CARD trắng nổi (đồng bộ thẻ 1/2) */
/* [2026-07-29, user chốt qua minh hoạ] MỘT luật độ rộng cho CẢ 5 thẻ = luật cũ của thẻ Toàn tuyến
   (trần 1600px + đệm hai bên co giãn). Trước đó 4 khung 4 cỡ: 1160 (Thẻ 1 .setup-*) / 1120
   (.line-page Thẻ 2, 5) / 1318 (Thẻ 3) / 1100 (#paneResult) — chuyển thẻ là mép nội dung nhảy.
   Luật riêng #paneLine .line-page đã GỘP vào đây; Thẻ 1 và Thẻ 4 không có .line-page nên nhận
   luật qua #paneInput/#paneResult ngay dưới. Test CRW1-CRW4 khoá cả cụm. */
.line-page{max-width:1600px;margin:0 auto;display:flex;flex-direction:column;gap:16px;padding:0 clamp(8px,3vw,32px)}
#paneInput{max-width:1600px;margin:0 auto;padding:0 clamp(8px,3vw,32px)}
#paneInput .setup-head,#paneInput .setup-grid,#paneInput .setup-grid2,#paneInput .setup-cta{max-width:none}
.line-page .setup-head{max-width:none;margin:0}
.icard-head-row{display:flex;justify-content:space-between;align-items:center;gap:12px 16px;flex-wrap:wrap;margin-bottom:14px}
.icard-head-row h4{margin:0}
.line-tools{display:flex;gap:8px;flex-wrap:wrap}
/* Vùng TÍNH TOÁN (dưới bảng, sau khi nhập đủ số liệu) — kẻ ngăn với vùng nhập */
.line-run{margin-top:0}
/* DÒNG 1: Tính nghiệm thu — căn phải. [2026-09-23, rà giao diện TT-1] thanh ghim ở đáy màn hình khi bảng dài (con trực tiếp
   của khung thẻ nên chỉ ghim trong phạm vi bảng; bảng ngắn thì đứng yên dưới bảng như cũ). */
.line-run-calc{display:flex;justify-content:flex-end;align-items:center;gap:10px;position:sticky;bottom:0;z-index:7;
  background:var(--card);margin-top:14px;padding:10px 14px 10px 0;border-top:1px solid var(--line)}   /* chừa lề phải: nút Tra cứu nổi ở góc dưới */
.line-run-opt{margin-top:0;padding-top:14px;border-top:.5px dashed var(--line2)}     /* DÒNG 2: Tối ưu — ngăn mờ với dòng Tính */
/* [2026-09-23, rà giao diện TT-1] hàng lọc, tìm, sắp NGAY TRÊN bảng */
.line-loc{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;margin:0 0 12px}
.line-loc-cong{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.line-tim{width:170px;font-size:13px;padding:6px 10px;border-radius:8px}
.line-sap{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.line-sap select{font-size:12.5px;padding:5px 8px;border-radius:8px;max-width:230px}
.line-rhtcot{display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
.line-rhtcot input{width:auto;margin:0}
.lsum-loc{border:1px solid transparent;cursor:pointer;font-family:inherit;line-height:1.35}
.lsum-loc:hover{border-color:currentColor}
.lsum-loc.on{border-color:currentColor;box-shadow:0 0 0 2px var(--card),0 0 0 3.5px currentColor}
.lsum-dang-loc{font-size:12.5px;color:var(--muted)}
.ltab>tbody>tr>td.lt-khong-khop{padding:14px;color:var(--muted)}
.line-actions-bottom{display:flex;gap:9px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.line-page .icard:hover{transform:none}   /* card bảng lớn: giữ yên, chỉ đậm bóng khi hover */
.ltab-wrap{overflow-x:auto}
/* [2026-07-26] GHIM dòng tiêu đề cột. Bảng có min-width 900px nên từ 1000px trở lên là
   vừa khung, bỏ được overflow-x — cần bỏ vì phần tử sticky bám vào KHUNG CUỘN gần nhất,
   còn overflow-x:auto thì overflow-y tự thành auto và biến .ltab-wrap thành khung cuộn,
   khiến thead dính vào nó (không cuộn dọc) thay vì dính vào màn hình.
   Dưới 1000px giữ nguyên overflow-x:auto để không đẩy cả trang trôi ngang. */
@media (min-width:1000px){
  .ltab-wrap{overflow:visible}
  /* 🔴 GHIM HÀNG TIÊU ĐỀ CHỈ DÀNH CHO BẢNG TOÀN TUYẾN, phải chọn bằng lớp RIÊNG `.ltab-sticky`.
     `.ltab` là bộ trang phục dùng chung cho nhiều bảng (quy tắc đặt tên ở Thẻ 5 + panel, bảng
     tra…), mà `top:69px` chỉ đúng cho ngữ cảnh Thẻ 3. Dán ghim cho mọi `.ltab` thì ở panel /
     thẻ khác — nơi có KHUNG CUỘN RIÊNG — tiêu đề ghim vào khung đó rồi tụt 69px, TRÔI VÀO GIỮA
     BẢNG che mất mấy dòng đầu (user bắt lỗi 2026-08-01 ở "Quy tắc đặt tên").
     ⚠ CON TRỰC TIẾP nữa, kẻo rò xuống bảng LỒNG bên trong (`.cm-tab` từng dính đúng vậy). */
  .ltab.ltab-sticky>thead>tr>th{position:sticky;top:var(--ghim-tren,69px);z-index:6}   /* [2026-09-23] bề cao thanh thẻ đo thật (main.js _datGhimTren) */
}
/* [2026-07-22, user chốt "rất đậm kiểu bản vẽ kỹ thuật"] Trước đây bảng CHỈ có kẻ ngang 0,5px #e5e5ea
   và KHÔNG có kẻ dọc nào → 9 cột rộng ≥900px, mắt dò ngang lạc dòng/lạc cột. Nay kẻ đủ lưới dọc+ngang
   1px #86868b, viền ngoài 1,5px gần đen, hàng tiêu đề nền xám đậm chữ trắng.
   Dùng border-collapse:collapse để nét kề nhau chập làm MỘT (separate sẽ ra nét đôi dày mỏng không đều). */
.ltab{width:100%;min-width:900px;border-collapse:separate;border-spacing:0;font-size:13px;
  border:1.5px solid var(--grid-out);background:var(--card);border-radius:12px}
/* [2026-07-31, user chốt] BO GÓC bảng. Với `border-collapse:collapse` thì bo trên <table> KHÔNG đủ:
   nền của ô tiêu đề (xanh đặc) vẫn vuông và thò ra khỏi đường bo. Cũng KHÔNG bọc `overflow:hidden`
   được vì từ 1000px `.ltab-wrap` phải `overflow:visible` cho hàng tiêu đề ghim (sticky bám vào khung
   cuộn gần nhất). ⇒ Bo thẳng vào BỐN Ô GÓC. */
/* ⚠ Bốn luật này phải viết CON TRỰC TIẾP. Viết kiểu con cháu (`.ltab thead th`) thì chúng RÒ
   xuống mọi bảng lồng bên trong — `.cm-tab` (so sánh bộ) vẽ vào một hàng mở rộng của chính
   `.ltab` nên đã ăn nhầm bo 10,5px ở 4 ô góc trong khi thân bảng nó vẫn vuông. */
.ltab>thead>tr>th:first-child{border-top-left-radius:10.5px}
.ltab>thead>tr>th:last-child{border-top-right-radius:10.5px}
.ltab>tbody>tr:last-child>td:first-child{border-bottom-left-radius:10.5px}
.ltab>tbody>tr:last-child>td:last-child{border-bottom-right-radius:10.5px}
/* Viền lưới chỉ đặt PHẢI + DƯỚI, cột cuối/hàng cuối bỏ ⇒ nét vẫn ĐƠN dù dùng `separate`.
   🔴 [2026-08-01, user chốt] MỌI luật cấu trúc của bảng này phải viết CON TRỰC TIẾP (`>`).
   Bảng so sánh `.cm-tab` vẽ vào một hàng mở rộng của chính `.ltab`, nên luật kiểu con-cháu
   rò thẳng xuống nó: trước đây toàn bộ diện mạo `.cm-tab` (nền tiêu đề xanh, lưới dọc, cỡ chữ,
   đệm) đều là ăn nhầm của bảng cha, và `position:sticky` rò xuống còn làm hàng tiêu đề bảng con
   TRÔI 69px vào giữa bảng che mất một dòng. Nay `.cm-tab` tự khai lấy (xem khối .cm-tab). */
.ltab>thead>tr>th{background:var(--grid-hdr);color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em;
  padding:10px 11px;white-space:nowrap;
  border:none;border-right:1px solid var(--grid-line);border-bottom:1.5px solid var(--grid-out)}
.ltab>thead>tr>th:last-child{border-right:none}
/* [user chốt] chữ tiêu đề CĂN GIỮA ô — phải nêu cả .num/.ctr vì `.ltab .num{text-align:right}`
   có độ ưu tiên (0,2,0) cao hơn `.ltab>thead>tr>th` (0,1,3)… thực ra (0,1,3) đã thắng, nhưng
   giữ nguyên khai tường minh cho khỏi lệ thuộc vào phép đếm độ ưu tiên.
   Ô DỮ LIỆU giữ căn cũ (số phải, badge giữa) — chỉ hàng tiêu đề đổi. */
.ltab>thead>tr>th,.ltab>thead>tr>th.num,.ltab>thead>tr>th.ctr{text-align:center}
.ltab>thead>tr>th .info-tip{background:rgba(255,255,255,.22);color:#fff;border-color:rgba(255,255,255,.45)}
.ltab>tbody>tr>td{padding:5px 9px;border:none;border-right:1px solid var(--grid-line);
  border-bottom:1px solid var(--grid-line);vertical-align:middle;color:var(--ink)}
.ltab>tbody>tr>td:last-child{border-right:none}
.ltab>tbody>tr:last-child>td{border-bottom:none}
/* [2026-07-26] Ô "Vị trí cột": tên + cờ >40m CÙNG HÀNG. Trước đó cờ nằm dòng dưới nên
   mọi dòng cao 68px; ở laptop 1366×768 chỉ thấy 4 dòng cho tuyến hàng chục cột. */
.lt-namecell{display:flex;align-items:center;gap:7px}
.lt-namecell>input{flex:1 1 auto;min-width:0}
.lt-namecell>input.lt-tower{flex:0 0 66px;width:66px}   /* [2026-09-23, HS-7] ô chủng loại cột cạnh tên vị trí */
.lt-namecell>input[data-ln-name]{min-width:62px}   /* tên vị trí không bị ô chủng loại cột ép còn "VT-" */
.lt-namecell>input.lt-dup{border-color:#b8860b;background:#fdf8e7}   /* [TT-4] tên trùng với vị trí khác */
.ltab .lt-tall{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;margin:0;
  font-size:11px;color:var(--muted);cursor:pointer;white-space:nowrap}
.ltab .lt-tall input{width:auto;margin:0;flex:0 0 auto;padding:0}
/* [2026-07-29, user chốt] BỎ sọc chẵn/lẻ ở bảng toàn tuyến: sau khi tăng tương phản thì lưới
   1px #86868b đã đủ dò ngang, thêm sọc thành ra rối và làm hàng chẵn trông như đang được chọn.
   Các bảng khác (reftab, guide-mtx, panel, soil-body) GIỮ sọc — chúng không có lưới đậm này. */
.ltab>tbody>tr:hover>td{background:var(--accent-bg)}   /* con TRỰC TIẾP: rê chuột hàng cha không được tô cả bảng con */
.ltab .num{text-align:right;font-variant-numeric:tabular-nums} .ltab .ctr{text-align:center}
/* [2026-09-23, rà giao diện DD-5] viên kết quả, viên cảnh báo là nút (chạm để đọc lý do) */
button.lpill-nut{border:0;font-family:inherit;line-height:inherit;cursor:pointer}
button.lpill-nut:hover{filter:brightness(.96)}
.ltab input,.ltab select{font-size:12.5px;padding:5px 8px;border-radius:8px}
.ltab select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:none;padding-right:8px;cursor:pointer}   /* bỏ mũi tên xổ xuống → tên bộ hiển thị rõ hơn (vẫn bấm chọn được) */
.ltab input[type=number]{text-align:right}
/* [2026-07-23] căn cứ [Rđ] nhập tay (CĐT…) + cảnh báo ngưỡng lỏng hơn quy phạm */
.ltab .lt-rdtag select{font-size:10.5px;padding:2px 4px;border-radius:6px;max-width:104px}
.ltab .lt-rdloose{margin-top:3px;font-size:10.5px;font-weight:700;color:var(--no);
  background:var(--no-bg);border-radius:6px;padding:2px 5px;white-space:normal;line-height:1.35}
/* [2026-07-26] ƯU TIÊN BỀ RỘNG CHO CỘT KẾT QUẢ. Đợt trước hạ chiều cao dòng, chỗ dôi ra
   từ ô tên lại chảy sang cột "Bộ tiếp địa" (197->280px) trong khi "R tổng" tụt 102->83px —
   sai ưu tiên: thứ kỹ sư liếc là CON SỐ R, không phải tên bộ. Nay ghìm bề rộng 2 cột mô tả
   và dành tối thiểu cho 2 cột kết quả. Cột 6 = R tổng, cột 8 = Kết quả. */
/* [2026-07-29] 190 -> 232px. Ghim chip ρ rộng đều nhau xong thì bề rộng cũ chỉ còn 103px cho
   chip, cắt mất lớp thứ ba ("34,3; 69,7; …") — đều mà mất số liệu thì không đáng. Đo chuỗi dài
   nhất cần 142px; cột 232 cho chip ~145px, đủ hiện cả ba lớp. Thẻ rộng 1318px vẫn dư chỗ. */
/* con TRỰC TIẾP: các trần/sàn bề rộng theo số thứ tự cột chỉ đúng cho bảng toàn tuyến,
   rò xuống bảng lồng là ghìm nhầm cột của bảng khác hẳn. */
/* [2026-09-23, rà giao diện TT-2] luật theo LỚP TÊN CỘT (c-stt … c-tt) thay cho số thứ tự cột: thêm cột Môi trường từng làm
   luật "cột 6 = R tổng", "cột 8 = Kết quả" rơi sang cột R hiện trạng và [Rđ], R tổng còn 83 px. Bề rộng tối thiểu dời từ
   thuộc tính style trong mã sang đây để khổ màn hẹp chỉnh được. */
.ltab>thead>tr>th.c-stt{width:46px}
.ltab>thead>tr>th.c-vt{min-width:205px}
.ltab>thead>tr>th.c-rho{min-width:170px}
.ltab>thead>tr>th.c-rho,.ltab>tbody>tr>td.c-rho{max-width:232px}
.ltab>thead>tr>th.c-bo{min-width:148px}
.ltab>thead>tr>th.c-bo,.ltab>tbody>tr>td.c-bo{max-width:232px}
.ltab>thead>tr>th.c-env{min-width:136px}
.ltab>thead>tr>th.c-rht{min-width:150px;white-space:normal}   /* tiêu đề xuống hai dòng: bảng có cột này vẫn vừa khổ 1440 */
.ltab>thead>tr>th.c-rtong,.ltab>tbody>tr>td.c-rtong{min-width:92px}
.ltab>thead>tr>th.c-rd{min-width:86px;white-space:normal}
.ltab>thead>tr>th.c-kq,.ltab>tbody>tr>td.c-kq{min-width:110px}
.ltab>thead>tr>th.c-tt{min-width:104px}
.ltab>tbody>tr>td.c-bo select{text-overflow:ellipsis}
/* [TT-10] ô nhập bị khóa trong bảng (R hiện trạng khi chưa tích) trông khác ô nhập được */
.ltab input:disabled,.ltab select:disabled{background:var(--bg);border-color:var(--line);color:var(--hint);cursor:not-allowed}
/* [2026-09-23, rà giao diện TT-2, DD-2] khung cuộn riêng khi bảng rộng hơn khung (lineKhungCuon gắn lớp .cuon):
   cuộn ngang trong khung, ghim hai cột STT và Vị trí cột ở mép trái. */
.ltab-wrap.cuon{overflow:auto;overscroll-behavior-x:contain}
.ltab-wrap.cuon>.ltab>thead>tr>th.c-stt,.ltab-wrap.cuon>.ltab>tbody>tr>td.c-stt{position:sticky;left:0;z-index:3}
.ltab-wrap.cuon>.ltab>thead>tr>th.c-vt,.ltab-wrap.cuon>.ltab>tbody>tr>td.c-vt{position:sticky;left:var(--c1w,46px);z-index:3;box-shadow:2px 0 0 var(--grid-line)}
.ltab-wrap.cuon>.ltab>tbody>tr>td.c-stt,.ltab-wrap.cuon>.ltab>tbody>tr>td.c-vt{background:var(--card)}
.ltab-wrap.cuon>.ltab>tbody>tr:hover>td.c-stt,.ltab-wrap.cuon>.ltab>tbody>tr:hover>td.c-vt{background:var(--accent-bg)}
.ltab-wrap.cuon>.ltab>tbody>tr.ln-doi-td>td.c-stt,.ltab-wrap.cuon>.ltab>tbody>tr.ln-doi-td>td.c-vt{background:#fff5d6}
.ltab-wrap.cuon>.ltab>thead>tr>th.c-stt,.ltab-wrap.cuon>.ltab>thead>tr>th.c-vt{z-index:8}
@media (min-width:1000px){
  .ltab-wrap.cuon{max-height:calc(100vh - 150px)}
  .ltab-wrap.cuon>.ltab.ltab-sticky>thead>tr>th{top:0}
}
@media (max-width:999px){
  /* [DD-2] điện thoại: tên vị trí một dòng riêng đủ rộng, chủng loại cột và cờ >40m dòng dưới; cột STT hẹp lại để hai cột
     ghim không ăn hết bề ngang khung */
  .ltab>thead>tr>th.c-stt{width:36px}
  .ltab>thead>tr>th.c-vt{min-width:136px}
  .lt-namecell{flex-wrap:wrap;gap:5px}
  .lt-namecell>input[data-ln-name]{flex:1 1 100%}
  .lt-namecell>input.lt-tower{flex:0 0 58px;width:58px}
}
/* [2026-07-29, user chốt] R tổng CĂN GIỮA ô và CỠ CHỮ BẰNG các cột khác (trước: căn phải,
   14,5px in đậm). Bỏ font-size để nó thừa kế cỡ chung của bảng; text-align phải khai ở đây
   với độ ưu tiên cao hơn `.ltab .num{text-align:right}` (cùng 0,2,0 nhưng đứng sau). */
.ltab .r-tong{font-weight:700;color:var(--ink);text-align:center}
.ltab .r-tong.stale{font-weight:400}
.ltab .r-tong.stale{color:var(--hint);font-weight:400}
/* [2026-09-23, rà giao diện DL-1] dòng vừa được "Tính toán tự động" đổi bộ: tô nền tới khi sửa dòng đó hoặc hoàn tác */
.ltab tr.ln-doi-td > td{background:#fff5d6}                       /* chưa tính → mờ */
/* nút biểu tượng trong bảng (mở chi tiết / xóa / tính / tối ưu) */
/* icon thao tác — phẳng đơn sắc (kiểu SF Symbols): xám mặc định, hover xanh, Xóa đỏ */
.lt-ico{border:0;background:none;cursor:pointer;line-height:1;padding:5px;border-radius:8px;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s;
  min-width:26px;min-height:26px}   /* [2026-09-23, rà giao diện DD-4, TT-7] vùng bấm tối thiểu 26 px (WCAG 2.5.8: 24 px) */
.lt-tt{display:inline-flex;align-items:center;gap:4px}
.lt-ico i.ti{font-size:16px}
.lt-ico:hover{background:var(--accent-bg);color:var(--info)}
.lt-ico:disabled{opacity:.32;cursor:not-allowed}
.lt-ico:disabled:hover{background:none;color:var(--muted)}
.lt-ico.idx{color:var(--accent);font-weight:600;font-size:12.5px}            /* nút số # (mở chi tiết) */
.lt-ico.del:hover{background:var(--warn-bg);color:var(--no)}                 /* Xóa → đỏ */
/* dropdown "Tối ưu theo" (chế độ tối ưu) */
.lopt-mode{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.lopt-mode select{font-size:12.5px;padding:5px 8px;border:1px solid var(--line,#ddd);border-radius:8px;background:#fff;color:var(--fg,#111);cursor:pointer}
/* bảng SO SÁNH phương án tối ưu */
.line-cmp{background:var(--bg,#f7f7f8);border:1px solid var(--line,#e9e9ec);border-radius:12px;padding:10px 12px}
.line-cmp-hd{font-size:13px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.line-cmp-hd i.ti{color:var(--accent);font-size:15px}
.line-cmp-x{margin-left:auto;border:0;background:none;cursor:pointer;color:var(--muted);padding:3px 6px;border-radius:6px;display:inline-flex;align-items:center}
.line-cmp-x i.ti{font-size:14px}
.line-cmp-x:hover{background:var(--warn-bg);color:var(--no)}
.cm-wrap{overflow-x:auto}
/* [2026-08-01, user chốt "một bán kính duy nhất"] Trước khai `border-radius:8px` mà vẫn để
   `border-collapse:collapse` ⇒ trình duyệt NHẬN rồi BỎ QUA khi vẽ, bảng vuông trơn.
   Nay `separate` + `border-spacing:0` cho radius có tác dụng thật, kèm bo 4 ô góc vì hàng
   tiêu đề có nền đặc (nền vuông sẽ thò ra ngoài đường bo). */
.cm-tab{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;background:#fff;
  border:1px solid var(--line,#eee);border-radius:12px}
/* [2026-08-01, user chốt] Bảng này vẽ vào một hàng mở rộng của chính `.ltab`, nên TOÀN BỘ diện
   mạo nó đang có (nền tiêu đề xanh EVN, lưới dọc, cỡ chữ 11px, đệm 10/11) là ĂN NHẦM luật
   con-cháu của bảng cha. Nay `.ltab` đã chặn rò hết, phải khai THẲNG ở đây — user chốt GIỮ
   nguyên hình thức, chỉ đổi từ tình cờ thành có chủ đích. Trị số chép từ số đo thật trên
   trình duyệt trước khi chặn rò, không phải đoán. */
.cm-tab th,.cm-tab td{padding:5px 9px;text-align:left;white-space:nowrap;vertical-align:middle;
  border:none;border-right:1px solid var(--grid-line);border-bottom:1px solid var(--grid-line)}
.cm-tab th:last-child,.cm-tab td:last-child{border-right:none}
.cm-tab>thead>tr>th:first-child{border-top-left-radius:11px}
.cm-tab>thead>tr>th:last-child{border-top-right-radius:11px}
.cm-tab>tbody>tr:last-child>td:first-child{border-bottom-left-radius:11px}
.cm-tab>tbody>tr:last-child>td:last-child{border-bottom-right-radius:11px}
.cm-tab th{background:var(--grid-hdr);color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em;
  padding:10px 11px;border-bottom:1.5px solid var(--grid-out)}
.cm-tab td{color:var(--ink)}
.cm-tab td.num{text-align:right}
.cm-tab th,.cm-tab th.num{text-align:center}   /* tiêu đề căn GIỮA kể cả cột số (nếp .ltab) */
.cm-tab .cm-crit{font-weight:700;color:var(--accent)}
.cm-tab tbody tr:last-child td{border-bottom:0}
.cm-pick{border:1px solid var(--accent);background:var(--accent);color:#fff;font-size:11.5px;font-weight:600;padding:4px 12px;border-radius:7px;cursor:pointer}
.cm-pick:hover{filter:brightness(1.08)}
.line-cmp-conv{font-size:12px;color:var(--ok,#127a3e);background:var(--ok-bg,#e7f6ec);padding:6px 10px;border-radius:8px;margin-bottom:8px}
.cm-tab .cm-crit{white-space:normal;min-width:120px}
.line-cmp-note{font-size:11px;color:var(--hint);margin-top:7px;line-height:1.5}
.cm-sub{font-size:11.5px;font-weight:600;color:var(--muted);margin:11px 0 4px}   /* [2026-07-12] tiêu đề phụ 2 bảng so sánh (best-per-tiêu-chí · xếp theo biên) */
/* [2026-07-12 Lô C] Ma trận chọn cấu hình theo địa chất (Thẻ 5) */
/* [2026-07-26] MỌI bảng tra cứu / gợi ý dùng CHUNG ngôn ngữ thị giác với bảng tính toàn
   tuyến (.ltab): tiêu đề nền xanh EVN chữ trắng CĂN GIỮA, kẻ lưới đậm kiểu bản vẽ kỹ thuật.
   Gộp 1 bộ luật cho cả hai nơi (hộp "Tra cứu số liệu chuẩn" và bảng gợi ý cấu hình) để
   không thể lệch nhau; dùng ĐÚNG bộ biến --grid-* nên đổi token là mọi bảng cùng đổi.
   ⚠ Bảng trong hộp Tra cứu dựng bằng <table><tr><th> KHÔNG có <thead> (main.js) → phải
   nhắm 'th' trực tiếp, không dùng 'thead th'. */
/* [2026-08-01, user chốt] BO GÓC 12px. Phải đổi `collapse` → `separate` (radius trên <table>
   bị bỏ qua dưới collapse) và dời viền lưới sang CHỈ PHẢI + DƯỚI, cột cuối / hàng cuối bỏ —
   nếu để `border` bốn phía như cũ thì với `separate` nét kề nhau thành NÉT ĐÔI. Cùng cách
   `.ltab` đang chạy. ⚠ Bảng trong hộp "Tra cứu" KHÔNG có <thead> nên nhắm `tr:first-child th`. */
.guide-mtx,.panel table{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;margin:8px 0;
  border:1.5px solid var(--grid-out);background:var(--card);border-radius:12px}
.guide-mtx th,.guide-mtx td,.panel th,.panel td{border:none;
  border-right:1px solid var(--grid-line);border-bottom:1px solid var(--grid-line);
  padding:8px 10px;text-align:left;vertical-align:top;line-height:1.5}
.guide-mtx th:last-child,.guide-mtx td:last-child,.panel th:last-child,.panel td:last-child{border-right:none}
.guide-mtx>tbody>tr:last-child>td,.panel table>tbody>tr:last-child>td{border-bottom:none}
.guide-mtx th,.panel th{background:var(--grid-hdr);color:#fff;font-weight:700;font-size:11.5px;
  letter-spacing:.02em;text-align:center;white-space:nowrap;vertical-align:middle;
  border-bottom:1.5px solid var(--grid-out)}
.guide-mtx tr:first-child th:first-child,.panel table tr:first-child th:first-child{border-top-left-radius:10.5px}
.guide-mtx tr:first-child th:last-child,.panel table tr:first-child th:last-child{border-top-right-radius:10.5px}
.guide-mtx>tbody>tr:last-child>td:first-child,.panel table>tbody>tr:last-child>td:first-child{border-bottom-left-radius:10.5px}
.guide-mtx>tbody>tr:last-child>td:last-child,.panel table>tbody>tr:last-child>td:last-child{border-bottom-right-radius:10.5px}
/* sọc chẵn/lẻ: .guide-mtx có <thead> nên đếm trong tbody; bảng tra cứu không có thead
   nên đếm cả bảng (hàng 1 là tiêu đề, các hàng chẵn vẫn ra so le đúng). */
.guide-mtx tbody tr:nth-child(even) td,.panel table tr:nth-child(even) td{background:var(--grid-zebra)}
.guide-mtx tbody tr:hover td,.panel table tr:hover td{background:var(--accent-bg)}
/* [2026-08-01, user chốt] Hai bảng của PHIẾU dựng bằng chuỗi style nội tuyến trong render.js
   ("Điện trở của từng bộ" — `_setTable`; "Chú thích ký hiệu" — `sectionLegend`). Hàm sau DÙNG
   CHUNG với bản Word qua cờ `forWord`, nên lớp này chỉ gắn ở NHÁNH WEB: Word không nạp
   stylesheet ⇒ hồ sơ không đổi một nét. Nhánh web đã bỏ `border` khỏi chuỗi nội tuyến để
   viền vẽ hẳn ở đây (không phải chèn !important đè style nội tuyến). */
.rt-round{border-collapse:separate;border-spacing:0;
  border:1.5px solid var(--grid-out);border-radius:12px;background:var(--card)}
.rt-round>thead>tr>th,.rt-round>tbody>tr>td{
  border-right:1px solid var(--grid-line);border-bottom:1px solid var(--grid-line)}
.rt-round>thead>tr>th{border-bottom:1.5px solid var(--grid-out)}
.rt-round>thead>tr>th:last-child,.rt-round>tbody>tr>td:last-child{border-right:none}
.rt-round>tbody>tr:last-child>td{border-bottom:none}
.rt-round>thead>tr>th:first-child{border-top-left-radius:10.5px}
.rt-round>thead>tr>th:last-child{border-top-right-radius:10.5px}
.rt-round>tbody>tr:last-child>td:first-child{border-bottom-left-radius:10.5px}
.rt-round>tbody>tr:last-child>td:last-child{border-bottom-right-radius:10.5px}
.guide-mtx td b{color:var(--ink)}
.guide-mtx .gm-sub{font-size:11px;color:var(--hint)}
.line-cmp-none{font-size:12.5px;color:var(--no);background:var(--warn-bg,#fdecec);padding:8px 10px;border-radius:8px}
/* BẢNG TRA vật liệu điện cực (Thẻ Thư viện) */
.matref-h{font-size:12.5px;font-weight:700;color:var(--accent);margin:0 0 8px;display:flex;align-items:center;gap:6px}
.matref-wrap{overflow-x:auto;border:1px solid var(--line,#e9e9ec);border-radius:12px}
.matref-tab{width:100%;border-collapse:collapse;font-size:12.5px;background:#fff}
.matref-tab th,.matref-tab td{padding:6px 10px;border-bottom:1px solid var(--line,#eee);text-align:left;white-space:nowrap}
.matref-tab th{background:var(--bg,#f2f2f4);font-weight:600;color:var(--muted)}
.matref-tab td.num,.matref-tab th.num{text-align:right}
.matref-tab tbody tr:last-child td{border-bottom:0}
.matref-grp td{background:var(--accent-bg,#eef4ff);font-weight:700;color:var(--accent);font-size:11px;text-transform:uppercase;letter-spacing:.02em}
.matref-note{color:var(--hint);white-space:normal;font-size:11px}
/* [2026-09-23, rà giao diện TV-6] `.matref-tab td{white-space:nowrap}` (0,1,1) thắng `.matref-note` (0,1,0) nên ghi chú dài
   chạy quá mép và bị khung cắt ("kiểm lại khối lượng thép tr…"). Nâng độ ưu tiên, bề rộng tối thiểu cho cột ghi chú. */
.matref-tab td.matref-note{white-space:normal;min-width:260px}
.matref-ds{color:var(--hint);font-weight:400;font-size:10.5px;font-style:italic}
.matref-foot{font-size:11px;color:var(--hint);margin-top:11px;line-height:1.55}
/* nút ≡ mở lớp đất + thẻ "N lớp" */
.lt-layer-btn{border:.5px solid var(--line2);background:#fff;border-radius:8px;padding:4px 7px;cursor:pointer;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,color .15s}
.lt-layer-btn i.ti{font-size:15px}
.lt-layer-btn:hover{background:var(--bg)} .lt-layer-btn.on{background:var(--accent-bg);border-color:var(--accent);color:var(--info)}
.lt-multitag{font-size:10px;color:var(--accent);font-weight:600;margin-left:4px;white-space:nowrap}
/* chip ρ: hiển thị ρ MỌI lớp; bấm để bung bảng lớp chỉnh sửa */
/* [2026-07-29, user chốt] Chip ρ phải RỘNG ĐỀU NHAU giữa các hàng, không co giãn theo độ dài
   số liệu (trước: "1000; 208; 27,5" dài hơn hẳn "64,0; 42,9; 59,1" nên mép phải răng cưa,
   mắt dò dọc cột bị vấp). Nay cell trải hết bề ngang ô, chip chiếm phần còn lại sau nút lớp
   đất, và số dài quá thì cắt bằng dấu ba chấm thay vì đẩy rộng ô. */
.lt-rhocell{display:flex;align-items:center;gap:5px;width:100%}
.lt-rhocell .lt-rhochip{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Ô CỐ ĐỊNH cho viên cảnh báo tương phản đất: luôn chiếm chỗ dù hàng đó không có cảnh báo,
   nhờ vậy chip ρ mọi hàng rộng bằng nhau. Rộng bằng đúng viên (icon 13px + đệm). */
/* ⚠ Phải ghim CẢ BA (width/min/max): chỉ khai flex-basis là KHÔNG chặn được — viên bên trong
   rộng 27px vẫn đẩy ô ra 31px (đo thấy), chip lại lệch 9px. */
.lt-rhocell .lt-noteslot{flex:0 0 28px;width:28px;min-width:28px;max-width:28px;
  display:inline-flex;justify-content:center;align-items:center}
.lt-rhocell .lt-noteslot .lpill{margin:0}
/* [2026-08-05, user chốt PA C — vòng minh hoạ 2, thay PA 1 viên báo] Ô cột "Môi trường vị trí":
   select + NÚT BUNG vuông (tái dùng .lt-layer-btn cho đồng bộ nút ▤ lớp đất). Bộ nghịch ngữ cảnh
   thì TÔ CAM nguyên ô chọn + nút — tín hiệu đọc được không cần rê chuột; bấm nút mở dòng bung. */
.lt-envcell{display:flex;align-items:center;gap:4px}
.lt-envcell select{flex:1;min-width:0;font-size:11px}
.lt-envcell select.lt-env-canh{background:#fdf3e5;border-color:#e8a44e;color:#7c4a03;font-weight:600}
/* [2026-08-09, user: "phần cảnh báo nên tô màu ô điện trở suất VÀ ô môi trường để người đọc
   thấy sự liên quan"] Cảnh báo "ρ chưa khớp môi trường khai" nói về QUAN HỆ giữa hai ô, nên
   tô CẢ HAI cùng một tông vàng sẫm (#b8860b / #fdf8e7) — đúng tông đã dùng cho khối cùng nội
   dung ở dòng bung (.env-bung .khoi.nghi, .ln-rhoenv), và khác hẳn tông CAM của "bộ chưa phù
   hợp môi trường" nên hai loại cảnh báo không lẫn nhau.
   ⚠ Luật cho `select.lt-env-canh` đặt SAU luật cam ở trên và cùng độ đặc hiệu ⇒ khi một hàng
   dính CẢ HAI thì vàng thắng: cảnh báo cam dựng trên chính môi trường đang bị nghi, nghi cái
   gốc thì phải thấy trước. Nút ⚠ cạnh ô vẫn cam nên không mất tín hiệu "bộ chưa phù hợp". */
.lt-rhocell.rho-nghi .lt-rhochip,
.lt-envcell.rho-nghi select,
.lt-envcell.rho-nghi select.lt-env-canh{background:#fdf8e7;border-color:#b8860b;color:#6b4d02}
.lt-rhocell.rho-nghi .lt-rhochip:hover,
.lt-envcell.rho-nghi select:hover{background:#faf1d4;border-color:#8f6a09}
.lt-envbtn[disabled]{opacity:.35;cursor:default}
/* [2026-09-23, rà giao diện TT-3] nhóm môi trường phần mềm đọc từ mô tả khảo sát, kỹ sư chưa xác nhận:
   khác hẳn hàng đã chốt (viền đứt, chữ nghiêng, màu nhạt) và nút mở thẳng hộp xác nhận */
.lt-envcell select.lt-env-cho{border-style:dashed;border-color:#b8860b;font-style:italic;color:var(--muted)}
.lt-envbtn.cho{border-style:dashed;border-color:#b8860b;color:#7c4a03}
.lnn-vt{font-size:11px;color:var(--muted);font-weight:400;margin-top:2px;white-space:normal}
.lt-envbtn.canh{background:#fdf3e5;border-color:#e8a44e;color:var(--warn)}
.lt-envbtn.canh.on,.lt-envbtn.canh:hover{background:#fbe8cf}
/* dòng bung môi trường (PA C) — khối khuyến nghị viền trái xanh, khối cảnh báo viền trái cam */
.env-bung .khoi{border:.5px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;
  background:var(--card);padding:8px 12px;font-size:12.3px;line-height:1.55;margin:4px 0}
.env-bung .khoi.canh{border-left-color:var(--warn);background:#fdf3e5}
/* [2026-08-06] khối "ρ chưa khớp môi trường khai" — nghi vấn SỐ LIỆU ĐẦU VÀO, khác loại với
   .canh (cảnh báo về BỘ tiếp địa). Viền trái vàng sẫm, nền vàng nhạt để phân biệt khi cùng hiện. */
.env-bung .khoi.nghi{border-left-color:#b8860b;background:#fdf8e7}
/* cùng câu ấy khi hiện trong dòng bung LỚP ĐẤT (khối này không dùng khuôn .khoi của env-bung) */
.ln-rhoenv{border:.5px solid var(--line);border-left:3px solid #b8860b;background:#fdf8e7;border-radius:8px;
  padding:8px 10px;margin-top:8px;font-size:12.5px;line-height:1.55;color:var(--ink)}
.env-bung .khoi .lydo{color:var(--muted)}
/* [2026-07-29] ĐẢO lại cho đúng quy ước hover của toàn app: nghỉ TRẮNG, rê chuột thì TỐI đi
   (giống .btn:hover, .secnav-chip:hover, .echip:hover, .lt-layer-btn:hover). Chip này trước làm
   ngược — nghỉ var(--bg), hover #fff. Hồi nền còn nhạt thì hai chiều đều ~1,09 nên không ai thấy;
   nền đậm lên là chip nghỉ tương phản 1,31 với ô trắng, rê chuột nó BẬT TRẮNG giữa hàng đang
   được tô xanh nhạt (.ltab tbody tr:hover), đọc ra như ô bị khoét thủng. */
.lt-rhochip{border:.5px solid var(--line2);background:var(--card);border-radius:9px;padding:5px 10px;cursor:pointer;font-size:12.5px;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;transition:background .15s,border-color .15s,color .15s}
.lt-rhochip:hover{background:var(--bg);border-color:var(--accent);color:var(--info)}
.lt-rhochip.on{border-color:var(--accent);background:var(--accent-bg);color:var(--info)}
.lt-rhochip .rc-unit{color:var(--hint);font-size:11px;margin-left:1px}
.lt-rhochip:hover .rc-unit,.lt-rhochip.on .rc-unit{color:var(--info)}
/* ρ mỗi điện cực dùng khi tính R (trong bảng lớp mở rộng) */
.ln-rhouse{margin-top:7px;padding-top:7px;border-top:.5px dashed var(--line2);font-size:11px;color:var(--ink);display:flex;align-items:center;gap:5px;flex-wrap:wrap;line-height:1.6}
.ln-rhouse i{color:var(--accent)} .ln-rhouse b{color:var(--info);font-weight:600}
.ln-rhouse.muted{color:var(--hint);font-style:italic}
.ln-rhouse-flag{margin-top:4px;font-size:10.5px;color:var(--wn-ink,#854f0b);background:var(--wn-bg,#faeeda);border-radius:7px;padding:4px 8px;line-height:1.5}
.ln-rhouse-note{margin-top:4px;font-size:10.5px;color:var(--hint,#5a6270);background:var(--info-bg,#eef4fb);border-radius:7px;padding:4px 8px;line-height:1.5}   /* cảnh báo NHẸ (tia lớp tốt, sát ranh giới lớp xấu bên dưới) */
/* ô Bộ tiếp địa: select + nút 👁 xem hình dáng */
.lt-setcell{display:flex;align-items:center;gap:5px}
.lt-ico.eye{flex:0 0 auto}   /* kế thừa ghost .lt-ico — icon 👁 phẳng cạnh ô chọn bộ */
/* overlay mặt cắt bộ tiếp địa */
.ssov{position:fixed;inset:0;background:rgba(20,28,44,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:1000;padding:24px}
.ssov.open{display:flex}
.ssov-box{background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.28);max-width:920px;width:100%;max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.ssov-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 18px;border-bottom:.5px solid var(--line2);font-size:14px;color:var(--ink)}
.ssov-x{border:0;background:none;font-size:17px;color:var(--muted);cursor:pointer;line-height:1}
.ssov-x:hover{color:var(--no)}
.ssov-body{padding:14px 16px;overflow:auto}
.ssov-body svg{max-width:100%;height:auto;display:block;margin:0 auto}
.ssov-sub{font-size:12px;color:var(--muted);font-weight:600;margin:14px 2px 8px}
.ssov-body>.ssov-sub:first-child{margin-top:0}
.ssov-ft{padding:10px 18px;border-top:.5px solid var(--line2);font-size:11px;color:var(--hint);line-height:1.5}
/* ---- [2026-08-01, user chốt] Hộp thoại CHUẨN HOÁ TÊN bộ tiếp địa ----
   Bảng đối chiếu "tên cũ → tên đề xuất". Dùng ĐÚNG một luật bo góc 12px như mọi bảng khác:
   separate + border-spacing 0 + bo 4 ô góc (hàng tiêu đề nền đặc nên phải bo ô, không thì
   nền vuông thò ra ngoài đường bo). KHÔNG dùng overflow:hidden để cắt góc. */
.lnn-lead{font-size:12.5px;color:var(--muted);line-height:1.55;margin:0 0 12px}
.lnn-tab{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;
  border:1.5px solid var(--grid-out);border-radius:12px;background:var(--card)}
.lnn-tab th,.lnn-tab td{border:none;border-right:1px solid var(--grid-line);
  border-bottom:1px solid var(--grid-line);padding:7px 10px;text-align:left;vertical-align:middle}
.lnn-tab th:last-child,.lnn-tab td:last-child{border-right:none}
.lnn-tab>tbody>tr:last-child>td{border-bottom:none}
.lnn-tab>thead>tr>th{background:var(--grid-hdr);color:#fff;font-size:10.5px;font-weight:700;
  letter-spacing:.02em;text-align:center;white-space:nowrap;border-bottom:1.5px solid var(--grid-out)}
.lnn-tab>thead>tr>th:first-child{border-top-left-radius:10.5px}
.lnn-tab>thead>tr>th:last-child{border-top-right-radius:10.5px}
.lnn-tab>tbody>tr:last-child>td:first-child{border-bottom-left-radius:10.5px}
.lnn-tab>tbody>tr:last-child>td:last-child{border-bottom-right-radius:10.5px}
.lnn-tab .lnn-tick{width:34px;text-align:center}
.lnn-tab .lnn-old{color:var(--muted);white-space:nowrap}
.lnn-tab .lnn-ar{color:var(--hint);width:18px;text-align:center}
.lnn-tab .lnn-new{font-weight:700;color:var(--grid-hdr);white-space:nowrap}
.lnn-tab .lnn-why{color:var(--muted);font-size:11.5px;line-height:1.45}
.lnn-tab tr.lnn-off td{background:var(--bg);color:var(--hint)}
.lnn-tab tr.lnn-off .lnn-new{color:var(--hint);font-weight:400;font-style:italic}
.lnn-flag{display:inline-block;font-size:10px;font-weight:700;padding:1px 7px;border-radius:999px;
  background:var(--warn-bg);color:var(--warn);white-space:nowrap}
.lnn-ok{margin:11px 0 0;font-size:12px;color:var(--ok);display:flex;align-items:center;gap:6px}
/* pill Đạt / Thiếu / chưa bộ (badge trong bảng & đếm ở tóm tắt) */
.lpill{display:inline-block;padding:3px 11px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.lpill-ok{background:var(--ok-bg);color:var(--ok)} .lpill-no{background:var(--no-bg);color:var(--no)}
.lpill-cond{background:var(--warn-bg);color:var(--warn);cursor:help}
/* [2026-09-23, rà giao diện HS-6] viên "ĐẠT CÓ ĐIỀU KIỆN" viết đủ chữ: trong ô bảng thì xuống hai dòng thay vì viết tắt */
.ltab>tbody>tr>td>.lpill-cond{white-space:normal;max-width:7.2em;text-align:center;line-height:1.25;padding:3px 9px}
.lpill-mute{background:var(--bg);color:var(--hint);font-weight:600}
.lpill-stale{background:var(--warn-bg);color:var(--warn);font-weight:600}       /* chưa tính (cần bấm ▶) */
.lpill-warn{background:var(--warn-bg);color:var(--warn)}                          /* ⚠ thiếu R hiện trạng (đã tích nhưng chưa nhập) — weight 700 kế thừa .lpill, đậm hơn "chưa tính" */
.lpill-note{background:var(--warn-bg);color:var(--warn);padding:3px 7px;margin-left:4px;cursor:help;vertical-align:middle}  /* ⚠ có lưu ý (cọc tương phản mạnh / tia·phên giáp ranh) — icon-only, hover xem chi tiết */
.lpill-note .ti{font-size:13px;vertical-align:-1px}
/* [2026-08-06] ρ chưa khớp môi trường khai — cùng chỗ, cùng cỡ với .lpill-note nhưng ĐẬM hơn
   và đổi biểu tượng (dấu hỏi): đây là câu HỎI LẠI SỐ LIỆU, không phải lưu ý về cách tính. */
.lpill-nghi{background:#fdf3e5;color:#7c4a03;border:.5px solid #e8a44e;padding:3px 7px;margin-left:4px;cursor:help;vertical-align:middle;font-weight:600}
.lpill-nghi .ti{font-size:13px;vertical-align:-1px}
.ln-rht-miss{border:1.5px solid var(--warn)!important;background:var(--warn-bg)!important}   /* ô R hiện trạng đã tích nhưng chưa nhập */

/* Nhập Excel — modal xem trước */
.li-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.li-modal{background:var(--card);border-radius:16px;box-shadow:var(--sh-2);max-width:560px;width:100%;max-height:85vh;display:flex;flex-direction:column;padding:18px 20px}
.li-h{font-size:16px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;margin-bottom:10px}
.li-err{background:var(--warn-bg);color:var(--warn);border-radius:10px;padding:8px 11px;font-size:12px;margin-bottom:10px;display:flex;gap:7px;align-items:flex-start;
  max-height:38vh;overflow:auto}   /* [đợt 3] hiện ĐỦ mọi câu (hết cắt-6) mà nút "Thêm/Thay thế" không bao giờ bị đẩy khỏi màn — đo 20/8: từ 28 dòng bị bỏ là không bấm được nút */
/* [2026-08-15] DẢI "PHẢI XỬ LÝ" — dòng bị bỏ hoặc con số cần xem lại. Phải KHÁC HẲN dải lưu ý
   vô hại, nếu không thì việc xếp nó lên đầu chẳng để làm gì: đo được ca tuyến 20 vị trí, hai câu
   báo mất vị trí nằm lẫn giữa 20 câu vô hại cùng màu cam nhạt nên trôi tuột.
   ⚠ Dùng biến --no/--no-bg đã có (cùng màu với kết luận KHÔNG ĐẠT) để người dùng đọc được ngay
   mức độ, không phải học thêm một mã màu mới. Viền trái dày là tín hiệu thứ hai cho người khó
   phân biệt màu. */
.li-err-nang{background:var(--no-bg);color:var(--no);border-left:4px solid var(--no);font-weight:600}
/* [đợt 3] mức "kiem" (con số cần xem lại, KHÔNG mất dòng nào) — vàng đậm, tách khỏi màu đỏ
   KHÔNG ĐẠT: dải đỏ kêu cả khi không mất gì thì lần mất thật không còn ai tin. */
.li-err-kiem{border-left:4px solid var(--warn);font-weight:600}
.li-err .li-nhan-lai{margin:6px 0 0;display:inline-flex;font-size:12px;padding:5px 10px}   /* [2026-11-05] nút nhận lại dòng trùng hàng mẫu cũ, nằm dưới câu giải thích */
.ln-rho-nghi{border:1.5px solid var(--warn)!important;background:var(--warn-bg)!important}   /* ô ρ gõ kiểu "1.500" */
.li-bo{color:var(--no);font-weight:700}
.li-tblwrap{overflow:auto;border:.5px solid var(--line);border-radius:12px;max-height:48vh}   /* [DL-7] cuộn đủ mọi vị trí */
.li-tbl{border-collapse:collapse;width:100%;font-size:12.5px}
.li-tbl th{position:sticky;top:0;background:var(--bg);color:var(--ink);font-weight:600;text-align:left;padding:6px 11px;border-bottom:.5px solid var(--line)}
.li-tbl td{padding:5px 11px;border-bottom:.5px solid var(--line);color:var(--muted)}
.li-tbl tr:last-child td{border-bottom:0}
.li-more{padding:6px 11px;font-size:12px;color:var(--hint)}
.li-note{font-size:11.5px;color:var(--hint);margin:10px 0 0;line-height:1.5}
.li-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:14px}
/* POOL chọn bộ dùng cho Tối ưu (chip bật/tắt) */
.optpool{margin:2px 0 14px} .optpool:empty{display:none}
/* [2026-08-03] Nhãn thành hàng ngang để nút "Dùng lại tất cả" đứng ngay sau câu chữ. */
.optpool-lbl{font-size:12.5px;color:var(--muted);margin-bottom:7px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.optpool-lbl .optchip-all{font-size:11.5px;padding:3px 11px}
.optpool-lbl .optchip-all:disabled{opacity:.55;cursor:default}   /* [TT-6] đang dùng đủ thì nút đặt lại tắt */
.optpool-chips{display:flex;flex-wrap:wrap;gap:7px}
.optchip{border:1px solid var(--line2);background:#fff;color:var(--muted);border-radius:999px;padding:5px 12px;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:background .15s,border-color .15s,color .15s}
.optchip:hover{border-color:var(--accent)}
.optchip.on{background:var(--accent-bg);border-color:var(--accent);color:var(--info)}
.optchip-all{font-weight:600}
/* [2026-08-03, user chốt qua minh hoạ "cách B"] Xếp ngăn THEO NHÓM TIẾP ĐỊA: cột trái là nút
   bật/tắt cả nhóm, cột phải là dãy chip của nhóm đó. Cùng trật tự SET_GROUPS với Thư viện Thẻ 2.
   ⚠ KHÔNG dùng dải xanh đặc .lib-grp như Thẻ 2 dù cùng một nhóm: ở Thẻ 2 nhóm LÀ nội dung, còn ở
   đây nhóm chỉ là bộ lọc nằm ngay trên bảng toàn tuyến — bốn dải đậm sẽ nặng hơn chính cái bảng
   nó lọc. Đã dựng cả ba cách cho user nhìn rồi mới chốt. */
.optpool-grid{display:grid;grid-template-columns:132px 1fr;gap:8px 10px;align-items:start}
.optgrp{border:1px solid var(--line2);background:#fff;color:var(--muted);border-radius:8px;
  padding:5px 9px;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;
  gap:6px;width:100%;text-align:left;transition:background .15s,border-color .15s,color .15s}
.optgrp:hover{border-color:var(--accent)}
.optgrp .n{margin-left:auto;font-weight:400;font-size:11.5px;opacity:.85}
.optgrp.on{background:var(--accent-bg);border-color:var(--accent);color:var(--info)}
.optgrp.part{border-color:var(--accent);color:var(--info)}   /* bật DỞ: viền + chữ đậm màu, nền vẫn trắng */
/* Màn hẹp: bỏ cột, tên nhóm nằm TRÊN dãy chip (thành "cách A") — 132px + chip là tràn ngang. */
@media(max-width:760px){
  .optpool-grid{grid-template-columns:1fr;gap:5px 0}
  .optpool-grid>.optgrp{margin-top:9px}
  .optpool-grid>.optgrp:first-child{margin-top:0}
}
/* [2026-09-25, chủ trì chốt, rà giao diện TT-6] Điện thoại: khối chip gập còn một dòng "Bộ dùng khi Tính toán tự động: 10/10",
   bấm mới mở. Máy tính và máy tính bảng giữ khối luôn mở như đã duyệt 03/8/2026 (nút gập ẩn). */
.optpool-gon,.optpool-cau-gon{display:none}
@media (max-width:560px){
  .optpool-gon{display:flex;align-items:center;gap:7px;width:100%;min-height:40px;border:1px solid var(--line2);background:#fff;
    color:var(--muted);border-radius:8px;padding:8px 11px;font-size:12.5px;text-align:left;cursor:pointer}
  .optpool-gon b{font-weight:700}
  .optpool-gon .kn{white-space:nowrap}   /* màn quá hẹp thì chỉ ngắt trước cụm "Tính toán tự động: 10/10", số không rơi lẻ xuống dòng */
  .optpool-gon-mui{margin-left:auto;transition:transform .15s}
  .optpool-khung.mo .optpool-gon-mui{transform:rotate(180deg)}
  .optpool-khung:not(.mo) .optpool-noi{display:none}
  .optpool-khung.mo .optpool-noi{margin-top:10px}
  .optpool-cau{display:none}
  .optpool-cau-gon{display:inline}
}
/* ô [Rđ] nhập tay (mặc định tự tra II.5.5) */
/* [2026-07-29, user chốt] [Rđ] căn GIỮA ô (trước căn phải). ⚠ Phải nêu kèm `.ltab` mới thắng:
   `.ltab input[type=number]{text-align:right}` ở dòng 469 có độ ưu tiên (0,2,1) cao hơn
   `.lt-rd` trơn (0,1,0) — khai mỗi `.lt-rd` là không ăn, đã đo thấy vẫn "right". */
.ltab input.lt-rd{width:64px;font-size:13px;padding:5px 7px;border-radius:8px;text-align:center}
.lt-rd.man{border-color:var(--warn);background:var(--warn-bg)}
.lt-rdtag{font-size:9.5px;text-align:right;margin-top:2px;color:var(--hint)}
.lt-rdtag:empty{margin-top:0}
.lt-rdtag.man{color:var(--warn)} .lt-rdtag a{cursor:pointer;text-decoration:underline;color:inherit}
/* bộ soạn lớp đất mở rộng (chiếm cả dòng) */
/* [2026-07-29] Bộ soạn lớp đất của Thẻ 4 nay dùng CHUNG .gbox + .soil-* với Thẻ 3, nên khung nét
   đứt bo góc 12px và các quy tắc .ln-lrow/.lidx/.ldepth/.ldel/.ln-ladd/.ln-layers-h đã thành
   mã chết và bị bỏ. .ln-layers chỉ còn là chỗ đặt, không tự vẽ khung nữa. */
/* Ghìm bề ngang: bộ soạn nằm trong dòng bảng toàn tuyến rộng >1200px, để tự do thì cột "đáy"
   giãn ra ~935px thành một dải trống, không còn ra dáng bảng. */
.ln-layers{margin:2px 0}
/* Bản NÉN cho Thẻ 4: cùng lưới, cùng màu với Thẻ 3 nhưng đệm mỏng hơn và không thanh tiêu đề —
   khối này bung trong dòng bảng nên mỗi px chiều cao đều phải trả giá. */
.ln-layers .gbox{max-width:560px}
.ln-layers .soil-hd,.ln-layers .soil-row{padding:2px 8px}
.ln-layers .gfoot{padding:3px 7px}
.ln-layers .pcol-addlayer{padding:2px 10px;font-size:11.5px}
.ln-layers-note{font-size:10.5px;color:var(--hint);margin:5px 0 0}
/* tóm tắt đếm Đạt/Thiếu + hai bảng tổng hợp cuối Thẻ 3 */
.lsum{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px}

/* ===== [2026-08-03, user chốt qua ảnh so khung "cách A"] HAI BẢNG TỔNG HỢP CUỐI THẺ 3 DÙNG
   ĐÚNG KHUNG CỦA BẢNG TÍNH TOÁN Ở TRÊN =====
   Trước đây là khung .mtab nét 0,5 px, tiêu đề nền xám chữ xám, chỉ kẻ ngang — đứng ngay dưới
   bảng .ltab lưới đậm thì trông như hai hồ sơ khác nhau. Nay: viền ngoài 1,5 px, tiêu đề nền
   xanh đậm chữ trắng căn giữa, lưới 1 px CẢ DỌC LẪN NGANG, bo góc 4 ô.
   ⚠ VÌ SAO KHÔNG DÙNG THẲNG `.ltab`: bảng đó khai `min-width:900px`, `max-width` cho cột 3/4/6
   và cả một loạt luật cho input/select bên trong ô. Hai bảng này không có ô nhập và không cần
   ràng cột, dùng chung là ăn nguyên mớ ràng buộc không liên quan. Chép RIÊNG phần diện mạo.
   ⚠ Bốn luật bo góc viết CON TRỰC TIẾP (`>`) — đúng bài học của `.ltab`: viết kiểu con-cháu thì
   luật rò xuống mọi bảng lồng bên trong. */
.gtab{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;
  border:1.5px solid var(--grid-out);background:var(--card);border-radius:12px}
.gtab>thead>tr>th:first-child{border-top-left-radius:10.5px}
.gtab>thead>tr>th:last-child{border-top-right-radius:10.5px}
.gtab>tbody>tr:last-child>td:first-child{border-bottom-left-radius:10.5px}
.gtab>tbody>tr:last-child>td:last-child{border-bottom-right-radius:10.5px}
.gtab>thead>tr>th{background:var(--grid-hdr);color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em;
  padding:10px 11px;white-space:nowrap;text-align:center;
  border:none;border-right:1px solid var(--grid-line);border-bottom:1.5px solid var(--grid-out)}
.gtab>thead>tr>th:last-child{border-right:none}
.gtab>tbody>tr>td{padding:6px 10px;border:none;border-right:1px solid var(--grid-line);
  border-bottom:1px solid var(--grid-line);vertical-align:middle;color:var(--ink)}
.gtab>tbody>tr>td:last-child{border-right:none}
.gtab>tbody>tr:last-child>td{border-bottom:none}
/* [user chốt] Số VT và Tỉ lệ CĂN GIỮA ô, không căn phải: đó là số ĐẾM và phần trăm, không phải
   trị số đo — căn phải làm chúng dạt hẳn sang mép, xa tiêu đề cột vốn căn giữa. */
.gtab .ctr{text-align:center;font-variant-numeric:tabular-nums}
.gtab .num{text-align:right;font-variant-numeric:tabular-nums}
.gtab>tbody>tr.grp>td{background:var(--accent-bg);color:var(--info);font-weight:700;font-size:12px;padding:6px 11px}
.gtab>tbody>tr.miss>td{background:#fdf6e9}   /* vị trí chưa gán bộ — không có dòng này thì tổng lệch âm thầm */
.gtab>tbody>tr.total>td{background:var(--grid-zebra);font-weight:700;border-top:1.5px solid var(--grid-out)}
.gtab .ct-vt{font-size:12px;color:var(--muted)}
.gtab-sub{font-size:11.5px;color:var(--hint);line-height:1.45;margin-top:2px}
.mtab-empty,.mtab-note{font-size:11px;color:var(--hint);line-height:1.5} .mtab-note{margin-top:6px}

/* ===== THẺ 2 — THƯ VIỆN BỘ TIẾP ĐỊA: BA TẦNG GẤP VÀO NHAU =====
   [2026-07-29, user chốt qua minh hoạ] Trước đây là LƯỚI THẺ, mỗi thẻ có ô hình 150px luôn
   hiện: 8 bộ cao 1715px, phải cuộn nhiều lần. Nay:
     tầng 1  .lib-grp        dải nhóm, mở app là ĐÓNG HẾT  -> đo được ~178px
     tầng 2  .lib-grp-than   các hàng bộ, hiện khi mở nhóm
     tầng 3  .lib-plan       mặt bằng, hiện khi bấm hàng (210px, TO HƠN ô hình cũ 150px)
   .lib-grid thôi làm lưới, chuyển thành cột dọc; .lib-card* thành MÃ CHẾT và đã bỏ. */
.lib-grid{display:flex;flex-direction:column;gap:0}
.lib-grp{margin:9px 0 0;padding:7px 12px;background:var(--lib-grp-bg);color:#fff;
  border-radius:8px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;cursor:pointer;
  user-select:none;transition:filter .12s}
.lib-grp:first-child{margin-top:0}
.lib-grp:hover{filter:brightness(1.16)}
.lib-grp:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.lib-grp.on{border-radius:8px 8px 0 0}
.lib-grp-mui{font-size:16px;width:16px;flex:0 0 16px;opacity:.95;display:inline-flex;align-items:center}
.lib-grp-mui i{display:inline-block;transition:transform .15s}
.lib-grp.on .lib-grp-mui i{transform:rotate(90deg)}   /* [2026-09-23, TV-8] mũi tên xoay xuống khi mở */
.lib-grp-ten{font-size:13px;font-weight:700}
.lib-grp-mo{font-size:11.5px;font-weight:600;opacity:.92;margin-left:auto;text-decoration:underline;text-underline-offset:2px}
/* [2026-09-23, TV-7] nút dạng chữ + menu "Công cụ thư viện" */
.linkbtn{background:none;border:0;padding:0;margin:0;color:var(--accent);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
details.lib-congcu{position:relative;display:inline-block}
details.lib-congcu>summary{list-style:none;cursor:pointer}
details.lib-congcu>summary::-webkit-details-marker{display:none}
details.lib-congcu[open]>summary{background:var(--bg)}
.lib-congcu-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:240px;display:flex;flex-direction:column;gap:4px;
  padding:8px;background:var(--card);border:.5px solid var(--line2);border-radius:12px;box-shadow:var(--sh-2,0 6px 24px rgba(0,0,0,.12))}
.lib-congcu-menu .btn{justify-content:flex-start;width:100%}
/* thân nhóm: đóng thì KHÔNG chiếm chỗ (display:none, không phải max-height 0) */
/* viền thân nhóm dùng CHUNG token với dải — đổi màu dải mà quên viền là hai thứ rời nhau ra */
.lib-grp-than{display:none;border:1px solid var(--lib-grp-bg);border-top:0;border-radius:0 0 10px 10px;
  padding:7px 8px;background:var(--bg)}
.lib-grp-than.mo{display:block}

.lib-row{display:flex;align-items:center;gap:12px;padding:7px 11px;background:var(--card);
  border:1px solid var(--line);border-radius:9px;margin:4px 0;cursor:pointer;user-select:none}
.lib-row:first-child{margin-top:0}
.lib-row:last-child{margin-bottom:0}
.lib-row:hover{border-color:var(--accent)}
.lib-row:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.lib-row.on{border-color:var(--accent);border-radius:9px 9px 0 0;margin-bottom:0}
.lib-row-ten{font-size:13px;font-weight:650;flex:0 0 300px;line-height:1.3}
.lib-row-tt{font-size:12px;color:var(--muted);flex:1;min-width:0}
.lib-row-cv{font-size:11.5px;color:var(--accent);font-weight:600;flex:0 0 88px;text-align:right}
.lib-row-acts{display:flex;gap:6px;flex:0 0 auto}
.lib-row-acts .btn{padding:3px 10px;font-size:11.5px}
.lib-plan{display:none;background:var(--card);border:1px solid var(--accent);border-top:0;
  border-radius:0 0 9px 9px;padding:8px;margin:0 0 4px}
.lib-plan.mo{display:flex;align-items:center;justify-content:center}
.lib-plan svg{max-width:100%!important;max-height:210px!important;width:auto!important;height:auto!important;
  border:0!important;border-radius:0!important;margin:0!important;box-shadow:none!important}
/* [2026-08-04] Khung của mặt bằng nay là <rect class="plan-khung"> BÊN TRONG SVG (dời từ `border`
   của CSS vào, để viền thôi ăn mất px bề rộng khung vẽ — xem chú thích ở setPlanSVG, render.js).
   Vì thế `border:0!important` ở trên KHÔNG còn với tới nó; phải tắt bằng luật riêng, nếu không
   hàng Thư viện có HAI viền lồng nhau: viền của ô .lib-plan + khung vẽ trong hình.
   ⚠ Ở đây co hình bằng max-width/max-height là ĐÚNG CHỦ Ý (ô xem nhanh, không cần gióng thẳng với
   mặt cắt) — khác với phiếu Thẻ 4, nơi đúng hai thứ này là bẫy đã phải gỡ. */
.lib-plan svg .plan-khung{display:none}
.tm-hinh svg .plan-khung{stroke:none!important}   /* [2026-09-23, PH-7] Hình 1 trong phiếu đã có khung của .tm-hinh: bỏ khung bo góc bên trong (khung kép) */
.lib-badge{font-size:10px;font-weight:600;color:#0a7d34;background:#e6f6ec;border-radius:999px;padding:1px 7px;vertical-align:middle}
@media(max-width:760px){
  .lib-row{flex-wrap:wrap;gap:5px}
  .lib-row-ten,.lib-row-tt{flex:1 1 100%}
  .lib-row-cv{flex:0 0 auto;text-align:left}
}

/* ===== Mục đang phát triển (tạm khóa, làm mờ, không tương tác) ===== */
.dev-soon{opacity:.6;cursor:not-allowed}
.dev-soon *{pointer-events:none}
.dev-badge{white-space:nowrap;flex:none;display:inline-block;font-size:10.5px;font-weight:700;color:#8a5a00;background:#fff3d6;border:.5px solid #f0d089;border-radius:999px;padding:1px 9px;margin-left:8px;vertical-align:middle}

/* Cảnh báo "chưa nhập R hiện trạng" — đỏ ở thanh Tính toán */
.hint-warn{color:#b42318!important;font-weight:700}

/* ===== Dải thông báo tạm (showToast — tooltip.js) =====
   [2026-07-29] TRƯỚC ĐÂY VÔ HÌNH: tooltip.js dựng <div class="toast"> nhưng quy tắc .toast chỉ nằm
   trong apple-style.css và components.css — hai file index.html KHÔNG nạp. Thẻ div thành khối trần
   nối vào cuối trang (phiếu dài ~5.400px) nên người dùng bấm "Nhập Excel", "Tải file mẫu",
   "Khôi phục phiên trước"… đều không thấy phản hồi nào.
   THỨ TỰ LỚP: phải nằm TRÊN .ssov/.li-overlay (1000) thì thông báo phát khi đang mở hộp thoại mới
   thấy được, và DƯỚI tooltip/menu ⋮ (9999). Bảng thứ tự lớp nay là:
   6 thead · 44 .fab-ref · 55 .app-nav ghim · 900 .scrim · 1000 .ssov/.li-overlay · 1200 .toast · 9999 tooltip. */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:1200;
  max-width:min(560px,92vw);padding:11px 20px;border-radius:8px;
  background:var(--accent);color:#fff;font-size:13.5px;font-weight:600;line-height:1.45;
  box-shadow:0 6px 20px rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.18)}
.toast.warn{background:var(--warn);color:#fff}
/* [2026-11-05, rà soát toàn bộ — B26] Thông báo nổi sống ít nhất 3,5 giây và đứng cố định trên màn hình: bấm "Lưu kết quả tính toán"
   rồi "In phiếu (PDF)" ngay thì hộp "Đã lưu kết quả…" in đè lên đáy MỌI trang của phiếu (đo: 6/6 trang). Khung giải thích cũng vậy. */
@media print{ .toast, .tip-popup{ display:none !important; } }

/* Ô nhập lớp đất mang số ÂM — chặn ở handler, tô đỏ để thấy ngay (cùng quy ước .ln-rht-miss) */
.ln-bad{border:1.5px solid #b42318!important;background:#fdeceb!important}

/* [2026-08-22, đợt 7] MOBILE 375px: thanh 5 thẻ từng TRÀN cả hai phía (thẻ "1 Dữ liệu đầu vào"
   chỉ còn 12px bấm được). Cho phép cuộn ngang trong thanh — không đổi gì ở khổ rộng. */
@media (max-width:480px){
  .tabbar{ max-width:calc(100vw - 16px); overflow-x:auto; -webkit-overflow-scrolling:touch;
           scrollbar-width:none; }
  .tabbar::-webkit-scrollbar{ display:none; }
  .tabbar > *{ flex:0 0 auto; }
}

/* [2026-09-07, KaTeX] Công thức dựng toán: chữ Việt trong \text{} (tt, mùa, lớp) theo chữ thân bài. LUẬT TOÀN CỤC có chủ đích:
   probe đo bề rộng ảnh công thức Word (wordfx.js) nằm ngoài .result-sheet — quy tắc scope trong mẫu in không với tới,
   đo lệch là ảnh bị cắt. */
.katex .text, .katex .textrm{ font-family:'Barlow','Be Vietnam Pro',system-ui,sans-serif; font-weight:500 }   /* KaTeX đặt font: shorthand → weight về normal; chữ Việt trong công thức phải cùng 500 với thân phiếu */
.tr-head.tr-eqd{ display:block }
.mv-val{ white-space:nowrap }
.fx .katex-display{ margin:.3em 0 }
.fx-cite{ font-size:11.5px; color:var(--muted); text-align:center }

/* ==========================================================================
   [2026-09-23, rà giao diện đợt 3C] ĐIỆN THOẠI VÀ TIẾP CẬN
   ========================================================================== */
/* [DD-1, DD-3, DD-10] khung cuộn ngang còn nội dung khuất thì mép đó mờ dần (main.js _mep gắn lớp) */
.mep-phai{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
.mep-trai{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px);mask-image:linear-gradient(90deg,transparent,#000 34px)}
.mep-trai.mep-phai{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent)}
@media print{ .mep-phai,.mep-trai{-webkit-mask-image:none;mask-image:none} }
/* [DD-3] bảng chủng loại, bảng vật tư toàn tuyến có khung cuộn ngang riêng */
.gtab-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.gtab .ma-bo{white-space:nowrap}
/* [DD-10] bảng vật liệu: cột đầu ghim khi cuộn ngang */
.matref-tab tr:not(.matref-grp)>th:first-child,.matref-tab tr:not(.matref-grp)>td:first-child{position:sticky;left:0;z-index:1;background:#fff}
.matref-tab thead tr:not(.matref-grp)>th:first-child{background:var(--bg,#f2f2f4)}   /* ô tiêu đề ghim giữ nền tiêu đề (độ ưu tiên cao hơn luật ghim nền trắng) */
/* [DD-6] nút đóng hộp Tra cứu ghim ở đầu hộp (trước trôi theo bảng dài), vùng bấm 34 px */
.panel>.x{position:sticky;top:0;float:right;z-index:3;width:34px;height:34px;min-width:34px;display:inline-flex;align-items:center;justify-content:center}
/* [DD-7] vòng con trỏ bàn phím rõ ràng cho mọi điều khiển (trước: vòng mờ tương phản 1,27:1) */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
button.info-tip:focus-visible{outline-offset:3px}
/* [DD-9] nút Tra cứu nổi: màn cảm ứng hiện chữ thường trực (không có rê chuột); màn hẹp gọn lại, ẩn khi đang cuộn xuống */
@media (hover:none){
  .fab-ref{width:auto;padding:0 16px 0 14px;border-radius:999px;gap:7px;opacity:.94}
  .fab-ref .fab-lbl{position:static;opacity:1;transform:none;background:none;color:var(--accent);padding:0;font-weight:600;font-size:13px;order:2}
}
@media (max-width:560px){
  .icard h4{flex-wrap:wrap}
  .fab-ref{right:12px;bottom:12px;height:44px;min-width:44px;transition:transform .2s,opacity .2s}
  .fab-ref.fab-an{transform:translateY(80px);opacity:0;pointer-events:none}
  #libCountBadge{flex:1 1 100%;padding-left:40px;margin-top:-6px}
}
/* [DD-10] bảng chọn cấu hình theo địa chất: màn hẹp xếp mỗi dòng thành một thẻ dọc, ô nào cũng có nhãn cột */
@media (max-width:560px){
  table.guide-mtx,table.guide-mtx tbody,table.guide-mtx tr,table.guide-mtx td{display:block;width:auto}
  table.guide-mtx thead{display:none}
  table.guide-mtx{border:0 !important;background:none}
  table.guide-mtx tr{border:1px solid var(--line);border-radius:10px;margin:0 0 10px;padding:6px 10px;background:#fff}
  table.guide-mtx tbody tr:nth-child(even) td{background:transparent}
  table.guide-mtx td{border:0 !important;padding:4px 0 !important;white-space:normal}
  table.guide-mtx td[data-label]::before{content:attr(data-label);display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:none}
  table.guide-mtx td[data-label="Địa chất và mặt bằng"]::before{display:none}
}
/* [DD-11] màn cảm ứng: chữ trong ô nhập 16 px (Safari trên iPhone tự phóng trang khi chạm ô chữ nhỏ hơn); màn hẹp: chữ nhỏ nhất 12 px */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px}
}
@media (max-width:560px){
  .ltab>thead>tr>th{font-size:12px}
  .ltab .lt-rdtag select,.ltab .lt-rdloose{font-size:12px}
  .gauge-thr-lbl,.gauge-scale,.gauge-mark span{font-size:12px !important}
  .gbox-h{font-size:12px}
  .gtab>thead>tr>th{white-space:normal}
}
/* [DD-12] thẻ 1 màn hẹp: hai ô chọn trong hàng xếp dọc (tên quy phạm, chế độ [Rđ] đọc đủ chữ); phần phụ của tiêu đề khung xuống dòng */
.h4-phu{font-weight:400;font-size:11px;color:var(--hint)}
@media (max-width:480px){
  .row{flex-direction:column;gap:0}
  .icard h4{flex-wrap:wrap}
  .icard h4 .h4-phu{flex:1 1 100%;padding-left:40px;margin-top:-6px}
}