/* Giằng kháng chấn — Pi-Tools › Tính toán tiêu âm › tab Giằng kháng chấn.
   Hợp đồng: _mockups/MOCKUP_GIANG_KHANG_CHAN_V1_2026-11-10.html (Alex duyệt 10/11 02:47). Số đo chép từ mockup.
   Thang TCGD · Tối mặc định (0s, bảng biến navy) · màu nhóm Pi-Tools (tl) chỉ cho điều hướng · cam = hành động. */
:root{
  color-scheme:dark;
  --nhan:#FB923C; --nhan-sang:#FDBA74; --nhan-nhat:#2A1508; --nhan-chu:#1C1917;
  --ok:#4ADE80; --ok-nen:#0D2617; --chan:#FB7185; --chan-nen:#2A0D14; --tin:#7DD3FC; --tin-nen:#0A1F2E;
  --nen:#101A2C; --the:#172238; --chim:#1E2B44; --chim-2:#273856; --mo:#16253E;
  --vien:#2A3A56; --vien-dam:#3A4C6B;
  --chu:#E8ECF2; --chu-2:#C3CCD8; --chu-3:#A3AEBF; --chu-4:#8C98AB; --chu-5:#6F7B8F;
  --nhom:#FACC15; --nhom-nhat:#422006;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,"Segoe UI",Roboto,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --bong-the:0 0 0 .5px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.4),0 8px 20px -10px rgba(0,0,0,.6);
}
:root[data-theme="light"]{
  color-scheme:light;
  --nhan:#C2410C; --nhan-sang:#E8620F; --nhan-nhat:#FFF7ED; --nhan-chu:#FFFFFF;
  --ok:#15803D; --ok-nen:#F0FDF4; --chan:#BE123C; --chan-nen:#FFF1F2; --tin:#0369A1; --tin-nen:#F0F9FF;
  --nen:#F5F5F4; --the:#FFFFFF; --chim:#EFEEEC; --chim-2:#E7E5E4; --mo:#FAFAF9;
  --vien:#D8D5D2; --vien-dam:#C4C0BC;
  --chu:#1C1917; --chu-2:#44403C; --chu-3:#57534E; --chu-4:#78716C; --chu-5:#A8A29E;
  --nhom:#A16207; --nhom-nhat:#FEFCE8;
  --bong-the:0 0 0 .5px rgba(28,25,23,.10),0 1px 2px rgba(28,25,23,.05),0 8px 20px -10px rgba(28,25,23,.16);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--nen);color:var(--chu);font:13px/18px var(--font)}
button,input,select{font:inherit;color:inherit}
.app{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
.app>*{min-width:0}
/* dải đầu: dự án + chip điều kiện + nút */
.dau{display:flex;align-items:center;gap:8px;padding:8px 12px;flex-wrap:wrap;box-shadow:inset 0 -.5px 0 var(--vien)}
.o{height:28px;padding:0 8px;border:0;border-radius:6px;background:var(--chim);box-shadow:inset 0 0 0 .5px var(--vien-dam)}
.o:focus{outline:none;box-shadow:inset 0 0 0 .5px var(--nhan),0 0 0 3px color-mix(in srgb,var(--nhan) 40%,transparent)}
.o.da{width:340px;max-width:100%}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:6px;background:var(--chim);color:var(--chu-3);font-size:12px;white-space:nowrap;border:0}
.chip b{color:var(--chu);font-weight:600}
.chip select,.chip input{height:22px;border:0;border-radius:4px;background:var(--chim-2);color:var(--chu);font-weight:600;font-size:12px;padding:0 4px}
.chip input{width:48px;text-align:right}
.dau .sp{flex:1}
.ma{font-size:12px;color:var(--chu-4);white-space:nowrap}
.nut{height:28px;padding:0 10px;border:0;border-radius:6px;background:var(--chim);color:var(--chu-2);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.nut:hover{background:var(--chim-2)}
.nut:disabled{opacity:.5;cursor:default}
.nut.chinh{background:linear-gradient(180deg,var(--nhan-sang),var(--nhan));color:var(--nhan-chu);font-weight:600}
/* dải số (chip lọc) */
.so{display:flex;gap:6px;padding:8px 12px 0;flex-wrap:wrap}
.so .k{display:inline-flex;align-items:baseline;gap:6px;height:28px;padding:0 10px;border-radius:6px;background:var(--chim);font-size:12px;color:var(--chu-4);border:0;cursor:pointer}
.so .k b{font-size:13px;color:var(--chu);font-variant-numeric:tabular-nums}
.so .k[aria-pressed="true"]{background:var(--nhom-nhat);color:var(--nhom)} .so .k[aria-pressed="true"] b{color:var(--nhom)}
/* hai ngăn: bảng | chi tiết */
.lam{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:10px;padding:8px 12px 12px;min-height:0}
.bk{background:var(--the);border-radius:10px;box-shadow:var(--bong-the);min-height:0;overflow:auto}
table.b{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums;font-size:12px}
table.b th{position:sticky;top:0;z-index:1;background:var(--the);font-weight:600;font-size:11px;line-height:14px;color:var(--chu-5);text-align:right;padding:6px 6px;box-shadow:inset 0 -.5px 0 var(--vien);white-space:nowrap;vertical-align:bottom}
table.b th.n{color:var(--chu-4)}
table.b td{height:30px;padding:0 6px;text-align:right;box-shadow:inset 0 -.5px 0 var(--vien);white-space:nowrap}
table.b th.t,table.b td.t{text-align:left}
table.b tr{cursor:pointer}
table.b tbody tr:hover td{background:var(--chim)}
table.b tr.dang td{background:var(--nhom-nhat)}
table.b tr.dang td:first-child{box-shadow:inset 3px 0 0 var(--nhom),inset 0 -.5px 0 var(--vien)}
table.b td.nhap{color:var(--chu-2);padding:0 2px}
table.b td.fh{font-weight:700}
table.b td.gh{color:var(--chu-4)}
.vach{box-shadow:inset .5px 0 0 var(--vien),inset 0 -.5px 0 var(--vien)!important}
.oi{height:24px;border:0;border-radius:4px;background:transparent;color:var(--chu-2);padding:0 4px;font-size:12px}
.oi:hover,.oi:focus{background:var(--chim-2);outline:none}
input.oi{width:56px;text-align:right}
input.oi.ten{width:52px;text-align:left}
select.oi{appearance:none;-webkit-appearance:none;padding-right:4px}
.xoa{width:24px;height:24px;border:0;border-radius:4px;background:transparent;color:var(--chu-5);cursor:pointer}
.xoa:hover{background:var(--chan-nen);color:var(--chan)}
.vien{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:4px;font-size:11px;background:var(--chim);color:var(--chu-3);white-space:nowrap}
.vien.ok{background:var(--ok-nen);color:var(--ok)} .vien.chan{background:var(--chan-nen);color:var(--chan)} .vien.lam{background:var(--tin-nen);color:var(--tin)}
.gioi{color:var(--tin);font-weight:600}
.trong{padding:24px;text-align:center;color:var(--chu-4)}
/* ngăn chi tiết */
.ct{background:var(--the);border-radius:10px;box-shadow:var(--bong-the);overflow:auto;min-height:0}
.ct h2{font:600 15px/20px var(--serif);margin:0;padding:12px 12px 2px}
.ct .phu{padding:0 12px;color:var(--chu-4);font-size:12px}
.ct h3{font:600 11px/16px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--chu-5);margin:12px 12px 4px}
.ct .d{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:0 12px;font-size:12px;color:var(--chu-4)}
.ct .d b{color:var(--chu);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.ct .d b.min{color:var(--nhan)}
.ct .ghi{margin:8px 12px 12px;font-size:12px;color:var(--chu-4);line-height:16px}
.thanh{height:6px;border-radius:3px;background:var(--chim-2);margin:2px 12px 6px;position:relative;overflow:hidden}
.thanh i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--chu-5)}
.thanh i.min{background:var(--nhan)}
.chan-man{padding:0 12px 8px;font-size:11px;color:var(--chu-5)}
/* hộp thoại */
.hop{position:fixed;inset:0;background:color-mix(in srgb,var(--nen) 70%,transparent);display:none;place-items:center;padding:16px;z-index:20}
.hop.mo{display:grid}
.hop .the{width:min(620px,100%);max-height:86vh;overflow:auto;background:var(--the);border-radius:10px;box-shadow:var(--bong-the);padding:12px}
.hop h2{font:600 15px/20px var(--serif);margin:0 0 4px}
.hop p{color:var(--chu-4);font-size:12px;margin:0 0 8px}
.hop textarea{width:100%;height:160px;border:0;border-radius:6px;background:var(--chim);box-shadow:inset 0 0 0 .5px var(--vien-dam);padding:8px;font:12px/16px ui-monospace,Consolas,monospace;color:var(--chu)}
.hop .hang{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.hop table.b tr td{cursor:pointer}
.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--chim-2);color:var(--chu);padding:8px 12px;border-radius:8px;box-shadow:var(--bong-the);z-index:30;font-size:12px;max-width:calc(100% - 32px);display:none}
.toast.mo{display:block}
/* Nhập BOQ (gkc-nhap.js) — số đo theo MOCKUP_GIANG_NHAP_BOQ_LENA_V1: hộp inset 24/64, lưới 4 hàng, giữa bảng | 300 */
#gn-hop{padding:24px 64px;place-items:stretch}
#gn-hop .the.gn{width:100%;max-width:none;max-height:none;height:100%;padding:0;display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;overflow:hidden}
.gn-dau{display:flex;align-items:center;gap:12px;padding:10px 16px;box-shadow:inset 0 -.5px 0 var(--vien)}
.gn-dau h2{margin:0}
.gn-buoc{display:flex;gap:6px;font-size:12px;color:var(--chu-4)} .gn-buoc b{color:var(--nhom)}
.gn-tep{display:flex;gap:8px;padding:10px 16px;flex-wrap:wrap;align-items:center;box-shadow:inset 0 -.5px 0 var(--vien)}
.gn-tep .gn-goi{font-size:12px;color:var(--chu-4)}
#gn-hop .gn-tep textarea{flex:1 1 320px;height:32px;min-height:32px;resize:vertical}
.gn-ds{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px} .gn-ds:not(:empty){padding:8px 16px 0}
.gn-ds .f{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:6px;background:var(--chim);font-size:12px} .gn-ds .f small{color:var(--chu-4)}
.gn-giua{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:start;gap:12px;padding:12px 16px;min-height:0;overflow:hidden}
.gn-giua>.bk,.gn-giua>.ben{max-height:100%}
.gn-giua>.trong{grid-column:1/-1}
.gn-giua .bk{box-shadow:none;border-radius:8px;background:var(--nen);overflow:auto;min-height:0}
.gn-giua .ben{overflow:auto;min-height:0}
.gn-giua .ben h3{font:600 11px/16px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--chu-5);margin:0 0 6px}
.gn-giua .o2{background:var(--chim);border-radius:8px;padding:8px 10px;margin-bottom:8px;font-size:12px;color:var(--chu-3)} .gn-giua .o2 b{color:var(--chu)}
.gn-giua .o2.canh{background:var(--tin-nen);color:var(--tin)}
.gn-giua select.oi{height:28px;padding:0 6px;border:0;border-radius:6px;background:var(--chim);box-shadow:inset 0 0 0 .5px var(--vien-dam);color:var(--chu);font:inherit;font-size:12px}
.gn-giua select.oi:invalid,.gn-giua select.oi.trong{box-shadow:inset 0 0 0 1px var(--tin);color:var(--tin)}
.gn-giua td.gh{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gn-chan{display:flex;gap:8px;align-items:center;padding:10px 16px;box-shadow:inset 0 .5px 0 var(--vien);flex-wrap:wrap}
.gn-chan .ghi{font-size:12px;color:var(--chu-4);flex:1 1 300px}
/* Báo giá theo bộ (gkc-baogia.js) — MOCKUP_GIANG_BAO_GIA_V1 */
.view{display:inline-flex;gap:2px;padding:2px;background:var(--chim);border-radius:8px}
.view button{height:24px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--chu-3);font:inherit;font-size:12px;cursor:pointer}
.view button[aria-pressed="true"]{background:var(--nhom-nhat);color:var(--nhom);font-weight:600}
.chip.canh{background:var(--tin-nen);color:var(--tin)} .chip.canh b{color:var(--tin)}
.bg-chi{display:none;gap:8px;align-items:center;flex-wrap:wrap}
.bg-so,#bg-lam{display:none}
.app.che-bg .bg-chi{display:inline-flex}
.app.che-bg .bg-so{display:flex}
.app.che-bg #bg-lam{display:grid}
.app.che-bg #so,.app.che-bg>.lam:not(.bg),.app.che-bg .ds-dt,.app.che-bg #b-dan,.app.che-bg #b-them,.app.che-bg .dau .chip:not(.bg-chi .chip){display:none}
.bg-so .k{cursor:default}
.lam.bg{grid-template-columns:minmax(0,1fr) 300px}
.lam.bg .bg-dt{display:none}
.ct .d.tong b{font-size:13px}
.ct .o3{margin:4px 12px;display:grid;grid-template-columns:1fr 104px;gap:4px 8px;font-size:12px;color:var(--chu-4);align-items:center}
.ct .o3 input{height:24px;border:0;border-radius:4px;background:var(--chim);box-shadow:inset 0 0 0 .5px var(--vien-dam);color:var(--chu);text-align:right;padding:0 6px;font:inherit;min-width:0}
/* điện thoại (ĐT1–ĐT15): thẻ mỗi bộ, lọc chip, nút 44 */
.ds-dt,.hanh-dt{display:none}
@media (max-width:768px){
  .app{grid-template-rows:auto minmax(0,1fr) auto}
  .dau{padding:8px 16px}
  .dau .chip,.dau .ma,.dau .nut:not(.chinh){display:none}
  .dau .nut.chinh{display:none}
  .o.da{width:100%;height:44px;font-size:17px}
  .so{padding:8px 16px 0;overflow-x:auto;flex-wrap:nowrap}
  .so .k{height:36px;flex:none}
  .lam{display:none}
  .ds-dt{display:flex;flex-direction:column;gap:8px;overflow:auto;padding:8px 16px;min-height:0}
  .hanh-dt{display:flex;gap:8px;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));box-shadow:inset 0 .5px 0 var(--vien);background:var(--the)}
  .hanh-dt .nut{height:44px;flex:1;justify-content:center;font-size:15px}
  .tdt{background:var(--the);border-radius:10px;box-shadow:var(--bong-the);padding:10px 12px}
  .tdt .h1{display:flex;align-items:center;gap:8px}
  .tdt .h1 b{font-size:15px}
  .tdt .h1 .sp{flex:1}
  .tdt .h2{color:var(--chu-4);font-size:12px;margin:2px 0 6px}
  .tdt .g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .tdt .g div{background:var(--chim);border-radius:6px;padding:4px 8px;min-width:0}
  .tdt .g span{display:block;font-size:11px;color:var(--chu-4)}
  .tdt .g b{font-size:15px;font-variant-numeric:tabular-nums}
  .tdt .g b.nho{font-size:12px}
  .app.che-bg #bg-lam{display:flex;flex-direction:column;overflow:auto;padding:8px 16px;min-height:0}
  .lam.bg .bk,.lam.bg .ct{display:none}
  .lam.bg .bg-dt{display:flex;flex-direction:column;gap:8px}
  .bg-chi .chip{display:none}
  .bg-so{padding:8px 16px 0;overflow-x:auto;flex-wrap:nowrap}
  #gn-hop{padding:0}
  #gn-hop .the.gn{border-radius:0}
  .gn-dau{padding:8px 16px} .gn-buoc{display:none}
  .gn-giua{grid-template-columns:minmax(0,1fr);overflow:auto}
  .gn-giua .ben{overflow:visible} .gn-giua .bk{overflow:auto;max-height:60vh}
  .gn-tep .nut,.gn-chan .nut,.gn-dau .nut{height:44px}
  .gn-chan .ghi{display:none}
  #gn-hop .gn-tep textarea{font-size:16px;height:44px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}