*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{font-family:Arial,Helvetica,sans-serif;background:#dfe5eb;color:#111;font-size:12px}
button,input{font:inherit}
.topbar{height:55px;background:#17324d;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:6px 12px;box-shadow:0 1px 4px #0004}
.brand h1{margin:0;font-size:18px;line-height:21px}.brand span{font-size:11px;opacity:.85}
.actions{display:flex;align-items:center;gap:6px}
.actions button{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:38px;height:38px;padding:0;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#eaf1f8;border-radius:9px;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s,transform .05s}
.actions button[hidden]{display:none}   /* #calc ẩn nhưng vẫn nằm trong trang vì app.js gắn sự kiện vào nó; ứng dụng tự tính lại sau mỗi lần sửa */
.actions button svg{width:20px;height:20px;display:block;pointer-events:none}
.actions button:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3)}
.actions button:active{transform:translateY(1px)}
.actions button:focus-visible{outline:2px solid #8cc8ff;outline-offset:2px}
.actions button:disabled{opacity:.35;cursor:default;background:rgba(255,255,255,.05)}
.actions button:disabled:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
/* Xuất Excel: ô xanh lá + chữ X trắng giống biểu tượng Excel */
.actions #export{background:linear-gradient(135deg,#21a366 0%,#107c41 100%);border-color:#185c37;color:#fff;box-shadow:0 1px 3px #0004}
.actions #export svg{width:24px;height:24px}
.actions #export:hover{background:linear-gradient(135deg,#2bb673 0%,#15894b 100%);border-color:#1f8a56}
.act-sep{width:1px;height:22px;background:rgba(255,255,255,.18);margin:0 4px}
/* Tooltip tự vẽ (thay cho chữ trên nút): nhãn lấy từ data-tip, đồng thời có aria-label cho trình đọc màn hình */
.actions [data-tip]{position:relative}
.actions [data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 9px);left:50%;transform:translate(-50%,-2px);background:#0b1620;color:#fff;border:1px solid rgba(255,255,255,.14);font:600 12px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:0;padding:7px 10px;border-radius:7px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s,transform .12s;z-index:80;box-shadow:0 6px 16px #0006}
.actions [data-tip]:hover::after,.actions button:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.actions>:last-child::after{left:auto;right:0;transform:translateY(-2px)}
.actions>:last-child:hover::after,.actions>:last-child:focus-visible::after{transform:none}
@media (hover:none){.actions [data-tip]::after{display:none}}
/* Trạng thái lưu: chỉ hiện biểu tượng (chữ vẫn do JS gán để trình đọc màn hình + tooltip dùng) */
.save-state{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;font-size:0!important;line-height:0;margin-right:2px;color:#8fe3b3;cursor:default;--ico:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M17.5%2019H9a7%207%200%201%201%206.71-9h1.79a4.5%204.5%200%201%201%200%209Z'/%3E%3Cpath%20d='m9.5%2013.5%202%202%203.5-3.5'/%3E%3C/svg%3E")}
.save-state::before{content:"";width:22px;height:22px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.status-ok{color:#8fe3b3}
.status-saving{color:#ffd27a;--ico:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2012a9%209%200%201%201-6.219-8.56'/%3E%3C/svg%3E")}
.status-saving::before{animation:ss-spin .9s linear infinite}
.save-state[data-state="error"]{color:#ff9b8f;--ico:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cline%20x1='12'%20x2='12'%20y1='8'%20y2='12'/%3E%3Cline%20x1='12'%20x2='12.01'%20y1='16'%20y2='16'/%3E%3C/svg%3E")}
.save-state[data-state="error"]::before{animation:none}
@keyframes ss-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.status-saving::before{animation:none}}
.projectbar{height:44px;background:#fff;border-bottom:1px solid #b7c1cc;display:flex;align-items:center;gap:14px;padding:5px 9px;white-space:nowrap}
.projectbar label{font-weight:700}.projectbar input{height:29px;margin-left:5px;padding:4px 7px;border:1px solid #b8c4cf;border-radius:2px;background:#fff;width:150px}.projectbar input[type=number]{width:92px}.autosave{margin-left:auto;color:#087443;font-weight:700}
.tabs{height:36px;display:flex;background:#d7e0e8;border-bottom:1px solid #9eabb8;padding-left:4px;overflow:hidden}.tabs button{height:36px;border:1px solid #b5c0cb;border-bottom:0;background:#dce5ed;padding:0 16px;cursor:pointer;color:#111;white-space:nowrap}.tabs button+button{border-left:0}.tabs button.active{background:#fff;font-weight:700;border-top:3px solid #17324d;padding-top:1px}
.sheet-area{height:calc(100vh - 135px);padding:0 7px 24px;background:#e6ebf0}.tab{display:none;height:100%;min-height:0}.tab.active{display:flex;flex-direction:column}
.sheet-toolbar{height:35px;display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #aeb9c4;border-top:0;padding:4px 7px;color:#4e5b67}.sheet-toolbar button{border:1px solid #aeb9c4;background:#f7f9fb;border-radius:2px;padding:4px 9px;font-weight:700;cursor:pointer}
.excel-sheet{height:100%;min-height:0;overflow:auto;background:#fff;border:1px solid #aeb9c4;position:relative}
.excel-table{border-collapse:collapse;table-layout:auto;background:#fff;width:max-content;min-width:0;font-size:11px;max-width:none}.excel-table td,.excel-table th{border:1px solid #9faab5;padding:3px 5px;height:23px;vertical-align:middle;overflow:hidden}.excel-table th{font-weight:700;text-align:center;white-space:normal;background:#d9e2f3}.excel-table .title{font-size:15px;font-weight:700;text-align:center;background:#17324d;color:#fff;height:28px}.excel-table .subtitle{font-size:10px;text-align:center;height:22px;background:#fff}.excel-table .project{font-weight:700;text-align:left;height:22px;background:#fff}.excel-table .right-head{font-weight:700;text-align:right;height:22px;background:#fff}.excel-table .section{font-weight:700;background:#fff}.excel-table .grouphead{background:#d9e2f3;font-weight:700;text-align:center}.excel-table .subhead{background:#eaf0f7;font-weight:700;text-align:center}.excel-table .num{text-align:right;font-variant-numeric:tabular-nums}.excel-table .center{text-align:center}.excel-table .wrap{white-space:normal;line-height:15px}.excel-table .total{font-weight:700;background:#e2f0d9}.excel-table .soft-total{font-weight:700;background:#f2f2f2}.excel-table .note{font-size:11px}.excel-table input{border:0;background:transparent;width:100%;height:21px;padding:2px 3px;outline:none}.excel-table input:focus{outline:2px solid #5b9bd5;background:#fff}.excel-table input.num-input{text-align:right}.excel-table .code-cell{position:relative;overflow:visible}.excel-table .suggest{position:absolute;left:0;top:24px;bottom:auto;background:#fff;border:1px solid #71879a;z-index:1000;width:440px;max-height:220px;overflow:auto;box-shadow:0 4px 12px #0003}.suggest-item{padding:6px 8px;border-bottom:1px solid #e4e8ec;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.suggest-item.active,.suggest-item:hover{background:#dbeaf8}
.sheet-empty{padding:30px;text-align:center;color:#66727e}
.price-input{border:1px solid #aeb9c4!important;background:#fff!important;border-radius:2px;text-align:right}.price-missing{background:#fff0f0!important;border-color:#df9b9b!important}
.warn{margin:7px;background:#fff0f0;border:1px solid #df9b9b;color:#8d1e1e;padding:7px}.missing-tag{color:#a11;font-weight:700}
footer{position:fixed;left:0;right:0;bottom:0;height:22px;background:#e2e7ec;border-top:1px solid #adb8c3;color:#5d6975;padding:4px 8px;font-size:10px}

/* Công trình - giống bố cục cột A:L của Excel mẫu */
.work-table col:nth-child(1){width:36px}.work-table col:nth-child(2){width:100px}.work-table col:nth-child(3){width:240px}.work-table col:nth-child(4){width:50px}.work-table col:nth-child(5){width:60px}.work-table col:nth-child(6){width:55px}.work-table col:nth-child(7){width:55px}.work-table col:nth-child(8){width:55px}.work-table col:nth-child(9){width:60px}.work-table col:nth-child(10){width:85px}.work-table col:nth-child(11){width:85px}.work-table col:nth-child(12){width:65px}
.work-table .detail-row td{background:#fff}.work-table .detail-row .detail-text{padding-left:10px;color:#333}.work-table .work-row td{height:26px}.work-table .work-row td:nth-child(2),.work-table .work-row td:nth-child(4){text-align:center}.work-table .work-row td:nth-child(3){white-space:normal;line-height:15px}
.row-handle{cursor:pointer;user-select:none}
.work-table tr.row-selected td{background:#cfe3f7!important}
/* Khung viền riêng cho các ô CÓ THỂ NHẬP LIỆU ở sheet Công trình (mã hiệu,
   danh mục công tác khi đang chờ chốt dòng, số bộ phận/dài/rộng/cao/hệ số,
   khối lượng toàn bộ khi nhập tay, ký hiệu bản vẽ) — để phân biệt trực quan
   với các ô chỉ hiển thị (STT, đơn vị, tên công tác đã tra định mức, khối
   lượng tính toán...) vốn không có <input> nên không bị khung này ảnh
   hưởng. Ghi đè lại "border:0" dùng chung cho input ở các sheet khác (xem
   ".excel-table input" phía trên) — CHỈ áp dụng cho sheet Công trình theo
   đúng yêu cầu, các sheet còn lại giữ nguyên như cũ. */
.work-table input{border:1px solid #8fb2d6;background:#f4f9ff;border-radius:2px}
.work-table input:focus{border-color:#2f6fb0;background:#fff}
.work-table input::placeholder{color:#93a3b3;font-style:italic}

/* Các sheet tổng hợp */
/* Độ rộng cột thật của sheet Vật liệu/Nhân công/Máy thi công và Hao phí VT
   nằm ở khối "Resource sheets now have 7 columns..." bên dưới — không khai
   báo trùng ở đây để tránh 2 nguồn định nghĩa mâu thuẫn nhau. */
.summary-table col:nth-child(1){width:45px}.summary-table col:nth-child(2){width:250px}.summary-table col:nth-child(3){width:240px}.summary-table col:nth-child(4){width:110px}.summary-table col:nth-child(5){width:60px}.summary-table td{height:25px}.summary-table .big-total td{font-weight:700;background:#e2f0d9}.summary-table .section-row td{font-weight:700;background:#f2f2f2}

@media(max-width:1100px){.projectbar{gap:7px}.tabs button{padding:0 10px}.sheet-area{padding-left:3px;padding-right:3px}.excel-table{font-size:10px}}
/* Trước đây 2 ô (unquantified_rate, pretax_profit_rate) bị ẩn hẳn dưới
   1100px — mất chức năng chỉnh 2 tỉ lệ này trên màn hình nhỏ. Bỏ ẩn, thay
   bằng cho projectbar tự xuống dòng (flex-wrap) — mọi ô luôn thấy và sửa
   được ở mọi kích thước màn hình. */
.projectbar{flex-wrap:wrap;height:auto;min-height:44px;row-gap:6px}

/* Cột tự co giãn theo nội dung nhưng luôn có giới hạn để không làm bảng quá rộng. */
.excel-table td,.excel-table th{max-width:300px}
/* Số liệu/số tiền: không ép xuống hàng trong cùng 1 ô, và không áp trần
   300px như các cột mô tả — độ rộng cột cho các ô này do app.js
   (autosizeColumns/liveFitColumn) tự tính và nới theo đúng độ dài số liệu. */
.excel-table td.num,.excel-table th.num{white-space:nowrap;max-width:none}
.work-table td:nth-child(3),.hp-table td:nth-child(3),.resource-table td:nth-child(3),.summary-table td:nth-child(2),.summary-table td:nth-child(3){max-width:260px}
.resource-detail td{background:#fafafa;color:#4f5b66;font-size:10.5px}
.resource-group td{background:#fff}

/* Bố cục màn hình MVP: 6 sheet nằm sát cạnh dưới màn hình. */
.tabs{position:fixed;left:0;right:0;bottom:0;height:38px;z-index:2000;box-shadow:0 -1px 4px #0002;padding-left:4px;overflow-x:auto;overflow-y:hidden}
.tabs button{height:38px}
.sheet-area{height:calc(100vh - 55px);padding-bottom:4px}
.summary-settings{min-height:42px;background:#fff;border:1px solid #aeb9c4;border-bottom:0;display:flex;align-items:center;gap:10px;padding:5px 8px;overflow-x:auto;white-space:nowrap}
.summary-settings label{font-weight:700;display:flex;align-items:center;gap:4px}
.summary-settings input{height:28px;padding:3px 6px;border:1px solid #b8c4cf;border-radius:2px;width:82px}
.summary-settings label:first-child input{width:180px}
#thdt .excel-sheet{height:calc(100% - 42px)}
/* Resource sheets now have 7 columns after removing TT vật tư. */
.resource-table col:nth-child(1){width:36px}.resource-table col:nth-child(2){width:80px}.resource-table col:nth-child(3){width:230px}.resource-table col:nth-child(4){width:50px}.resource-table col:nth-child(5){width:70px}.resource-table col:nth-child(6){width:90px}.resource-table col:nth-child(7){width:100px}
.hp-table col:nth-child(1){width:36px}.hp-table col:nth-child(2){width:80px}.hp-table col:nth-child(3){width:220px}.hp-table col:nth-child(4){width:50px}.hp-table col:nth-child(5){width:65px}.hp-table col:nth-child(6){width:62px}.hp-table col:nth-child(7){width:62px}.hp-table col:nth-child(8){width:62px}.hp-table col:nth-child(9){width:55px}.hp-table col:nth-child(10){width:70px}.hp-table col:nth-child(11){width:70px}.hp-table col:nth-child(12){width:70px}

.work-table td:nth-child(12),.work-table th:nth-child(12),.summary-table td:nth-child(5),.summary-table th:nth-child(5){text-align:center}

/* Đơn giá chi tiết / Dự thầu — cùng ngôn ngữ trực quan với các sheet còn lại:
   dòng đầu công tác đậm màu xanh lá như "Hao phí VT", dòng nhóm vật tư nền
   xanh nhạt như .subhead, dòng T/G/Gxd và Tổng cộng dùng lại .soft-total/.total. */
.dgct-table col:nth-child(1){width:36px}.dgct-table col:nth-child(2){width:80px}.dgct-table col:nth-child(3){width:50px}.dgct-table col:nth-child(4){width:85px}.dgct-table col:nth-child(5){width:220px}.dgct-table col:nth-child(6){width:50px}.dgct-table col:nth-child(7){width:65px}.dgct-table col:nth-child(8){width:80px}.dgct-table col:nth-child(9){width:45px}.dgct-table col:nth-child(10){width:95px}
.dgct-table td:nth-child(5){white-space:normal;line-height:15px}
.dgct-item td{font-weight:700;color:#0a6b1d}
.dgct-group td{background:#eaf0f7;font-weight:700}
.dutau-table col:nth-child(1){width:36px}.dutau-table col:nth-child(2){width:80px}.dutau-table col:nth-child(3){width:230px}.dutau-table col:nth-child(4){width:50px}.dutau-table col:nth-child(5){width:70px}.dutau-table col:nth-child(6){width:90px}.dutau-table col:nth-child(7){width:100px}
.dutau-table td:nth-child(3){white-space:normal;line-height:15px}
.dgct-diff td{font-style:italic;color:#5d6975}
body[data-theme="dark"] .dgct-diff td{color:#8a97a3}

/* Sheet nội bộ "Báo cáo" (CTRL+1) — chỉ hiển thị trên web app, không xuất Excel. */
.baocao-summary{margin:0 0 8px;padding:9px 11px;border-radius:3px;font-size:11.5px;line-height:1.6}
.baocao-changelog-link{margin:0 0 10px}
.baocao-changelog-link button{border:1px solid #d6dee6;background:#fff;color:#17324d;border-radius:4px;padding:6px 12px;font-weight:700;cursor:pointer}
.baocao-changelog-link button:hover{background:#eef4f8}
body[data-theme="dark"] .baocao-changelog-link button{background:#1f2a36;color:#cfe0f0;border-color:#3a4b5c}
body[data-theme="dark"] .baocao-changelog-link button:hover{background:#28384a}
.baocao-summary p{margin:0 0 6px}.baocao-summary p:last-child{margin-bottom:0}
.baocao-warn{background:#fff6e9;border:1px solid #e0b877;color:#6b4a12}
.baocao-ok{background:#eef7ec;border:1px solid #9dc9a0;color:#1e5c22}
.baocao-table col:nth-child(1){width:36px}.baocao-table col:nth-child(2){width:80px}.baocao-table col:nth-child(3){width:230px}.baocao-table col:nth-child(4){width:90px}.baocao-table col:nth-child(5){width:70px}.baocao-table col:nth-child(6){width:90px}.baocao-table col:nth-child(7){width:90px}
.baocao-table td:nth-child(3){white-space:normal;line-height:15px}
.baocao-table td:nth-child(4){font-family:'Consolas',monospace;font-size:10.5px}
body[data-theme="dark"] .baocao-warn{background:#3a2f14;border-color:#8a6a2c;color:#f0d9a8}
body[data-theme="dark"] .baocao-ok{background:#16301a;border-color:#3f7a45;color:#bfe8c3}

/* Storage usage panel trong sheet Báo cáo */
.baocao-storage-panel{margin-top:12px;padding:0}
.storage-loading{display:block;padding:8px 0;color:#888;font-style:italic;font-size:11.5px}
.storage-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 10px;background:#f0f4fb;border:1px solid #c5d3e8;border-radius:3px 3px 0 0;font-size:11.5px}
.storage-total{margin-left:4px;color:#2456a0}
.storage-ts{margin-left:auto;color:#888;font-size:10.5px;white-space:nowrap}
.storage-refresh-btn{padding:2px 8px;font-size:11px;border:1px solid #aac;border-radius:3px;background:#fff;cursor:pointer;color:#2456a0;transition:background .15s}
.storage-refresh-btn:hover{background:#e8eef8}
.storage-table{margin-top:0!important;border-top:none!important}
.storage-table thead th{background:#e8eef8;color:#1a3a6b;font-size:11px}
.storage-table td{font-size:11px}
.storage-table td.num{font-family:'Consolas',monospace;font-size:10.5px}
.storage-meters{padding:10px 12px 8px;background:#f7f9fc;border:1px solid #d0dcea;border-top:none;border-bottom:none}
.storage-meter-row{display:flex;align-items:baseline;gap:6px;font-size:12px}
.storage-label{min-width:70px;color:#555;font-weight:bold}
.storage-value{font-family:'Consolas',monospace;font-size:13px;font-weight:bold}
.storage-value.used{color:#c03000}
.storage-value.remaining{color:#1a6e2e}
.storage-pct{color:#888;font-size:11px}
.storage-bar-wrap{height:10px;background:#e0e6ef;border-radius:5px;margin:5px 0 2px;overflow:hidden}
.storage-bar-fill{height:100%;border-radius:5px;transition:width .4s}
.storage-details-toggle{border:1px solid #d0dcea;border-top:none;padding:4px 10px 0;font-size:11px;color:#2456a0;cursor:pointer;background:#f7f9fc}
.storage-details-toggle summary{padding:4px 0;user-select:none}
body[data-theme="dark"] .storage-header{background:#1e2a3a;border-color:#3a5070;color:#c8d8ee}
body[data-theme="dark"] .storage-total{color:#7eb8f7}
body[data-theme="dark"] .storage-refresh-btn{background:#243040;border-color:#4a6080;color:#7eb8f7}
body[data-theme="dark"] .storage-refresh-btn:hover{background:#2e4060}
body[data-theme="dark"] .storage-table thead th{background:#1a2a3a;color:#a0c0e8}
body[data-theme="dark"] .storage-meters{background:#1a2230;border-color:#2a3a50}
body[data-theme="dark"] .storage-label{color:#a0b0c8}
body[data-theme="dark"] .storage-value.used{color:#ff7050}
body[data-theme="dark"] .storage-value.remaining{color:#60d080}
body[data-theme="dark"] .storage-bar-wrap{background:#2a3a4a}
body[data-theme="dark"] .storage-details-toggle{background:#1a2230;border-color:#2a3a50;color:#7eb8f7}

/* Spreadsheet usability: visible headers, unobstructed scrolling, compact sheet tabs. */
.excel-sheet{overflow:auto;overscroll-behavior:contain;padding-bottom:8px;}
.excel-table thead th{border:1px solid #7f8b96 !important;position:sticky;z-index:8;background:#e8edf2;}
.excel-table thead tr:first-child th{z-index:10;}
.excel-table thead tr:nth-child(2) th{z-index:9;}
.excel-table thead tr:nth-child(3) th{z-index:9;}
.excel-table thead tr:nth-child(4) th{z-index:9;}
.excel-table thead tr:nth-child(5) th{z-index:9;}
.excel-table thead tr:nth-child(6) th{z-index:9;}
/* :not(.mobile-open) — bảng chọn sheet dạng hamburger (≤820px, xem khối
   RESPONSIVE/MOBILE-FIRST ở cuối file) cần chiều cao/kích thước nút KHÁC
   hẳn (mỗi nút 1 dòng, cao ~48px, dễ chạm) so với thanh tab gọn 30px này —
   thanh 30px chỉ đúng khi ĐANG hiển thị dạng thanh ngang (desktop/tablet
   rộng, hoặc trước khi bấm mở menu trên điện thoại). */
.tabs:not(.mobile-open){height:30px !important;align-items:stretch !important;}
.tabs:not(.mobile-open) button{height:30px !important;min-height:30px !important;padding:0 13px !important;line-height:28px !important;}
.sheet-area{padding-bottom:34px !important;}
@media(max-width:820px){.sheet-area{padding-bottom:0 !important;}}  /* đã trừ đúng 48px cho thanh hamburger ở khối cuối file, không cộng thêm nữa */
.context-menu{position:fixed;z-index:5000;min-width:210px;background:#fff;border:1px solid #9da8b2;box-shadow:0 4px 16px #0003;border-radius:3px;padding:4px 0;font-size:13px;}
.context-menu button{display:flex;width:100%;justify-content:space-between;gap:18px;border:0;background:#fff;padding:8px 12px;text-align:left;cursor:pointer;color:#18222c;}
.context-menu button:hover{background:#e9eef3;}
.context-menu kbd{font-size:11px;color:#64717d;background:#f2f4f6;border:1px solid #ccd2d8;border-radius:2px;padding:1px 4px;}
.norm-popover{position:fixed;z-index:4999;max-width:min(680px,calc(100vw - 24px));max-height:min(520px,calc(100vh - 24px));overflow:auto;background:#fff;border:1px solid #8997a5;box-shadow:0 6px 22px #0004;border-radius:4px;padding:12px;font-size:12px;}
.norm-popover h4{margin:0 0 8px;font-size:14px;}.norm-popover table{border-collapse:collapse;width:100%;table-layout:fixed;}.norm-popover col.c1{width:19%}.norm-popover col.c2{width:43%}.norm-popover col.c3{width:14%}.norm-popover col.c4{width:24%}.norm-popover td{overflow-wrap:anywhere;}.norm-popover th,.norm-popover td{border:1px solid #c5ccd3;padding:4px 6px;}.norm-popover th{background:#edf1f5;}

/* Yêu cầu dự án: mọi ô trong mọi sheet luôn bật Wrap Text. */
.excel-table td,.excel-table th,.excel-table td *, .excel-table th *{white-space:normal !important;overflow-wrap:anywhere;word-break:normal;}

/* Hao phí VT: cột co vừa nội dung (không ép tràn hết khung nhìn) — chữ dài
   tự xuống dòng nhờ wrap text đã bật toàn cục, không làm bảng phình rộng. */
.hp-table td,.hp-table th{
  overflow-wrap:anywhere;
  word-break:break-word;
}
@media(max-width:900px){
  .hp-table{font-size:10px}
  .hp-table td,.hp-table th{padding:2px 3px}
}

/* Search suggestions always align left, regardless of the parent cell's own
   text-align (the Mã hiệu công tác cell is centered, and text-align is an
   inherited property, so the dropdown was inheriting that centering). */
.suggest,.suggest-item{text-align:left}

/* Mobile viewport: 100vh is unreliable across phone browsers (address bar
   show/hide changes the visible height, and iOS/Android differ on when).
   100dvh ("dynamic viewport height") tracks the actual visible area on
   every modern mobile browser; vh stays as the fallback for older ones.
   Safe-area insets keep content clear of notches/home-indicator bars. */
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.sheet-area{height:calc(100vh - 55px);height:calc(100dvh - 55px)}
@supports (height:100dvh){
  .sheet-area{height:calc(100dvh - 55px)}
}
.tabs{padding-bottom:env(safe-area-inset-bottom)}
@media(max-width:480px){
  .topbar{padding:6px 8px}
  .brand h1{font-size:15px}
  .tabs button{padding:0 9px;font-size:11px}
}

/* Export progress overlay */
.export-overlay{position:fixed;inset:0;z-index:6000;background:#0006;display:flex;align-items:center;justify-content:center}
/* The native [hidden] attribute only sets display:none via the browser's
   default (lowest-priority) stylesheet — the class rule above has equal
   specificity and comes from an author stylesheet, so it was winning the
   cascade and keeping the overlay visible (and blocking every click on the
   page) from the moment the page loaded, export or not. This rule must
   explicitly override it. */
.export-overlay[hidden]{display:none}
.export-modal{background:#fff;border-radius:6px;box-shadow:0 8px 30px #0005;padding:22px 26px;width:min(360px,86vw);text-align:center}
.export-title{font-weight:700;font-size:14px;margin-bottom:14px;color:#17324d}
.export-bar{height:10px;border-radius:6px;background:#e3e8ed;overflow:hidden}
.export-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,#2f6fb0,#17324d);border-radius:6px;transition:width .25s ease}
.export-status{margin-top:10px;font-size:12px;color:#54606c}

/* ---------- Dark mode ---------- */
body[data-theme="dark"]{background:#12181f;color:#e7ecf1}
body[data-theme="dark"] .topbar{background:#0d141b;box-shadow:0 1px 4px #0008}
body[data-theme="dark"] .actions #export{background:linear-gradient(135deg,#1c9660 0%,#0c6b3a 100%);border-color:#14583a}
body[data-theme="dark"] .actions #export:hover{background:linear-gradient(135deg,#25a86e 0%,#11804a 100%)}
body[data-theme="dark"] .actions [data-tip]::after{background:#05090d}
body[data-theme="dark"] .tabs{background:#1a222b;border-color:#2c3742}
body[data-theme="dark"] .tabs button{background:#1c252f;border-color:#2c3742;color:#c9d4de}
body[data-theme="dark"] .tabs button.active{background:#12181f;border-top-color:#5b9bd5;color:#fff}
body[data-theme="dark"] .sheet-area{background:#141b23}
body[data-theme="dark"] .sheet-toolbar{background:#1a222b;border-color:#2c3742;color:#c9d4de}
body[data-theme="dark"] .sheet-toolbar button{background:#1f2932;border-color:#33404c;color:#dbe6f0}
body[data-theme="dark"] .excel-sheet{background:#161e26;border-color:#2c3742}
body[data-theme="dark"] .excel-table{background:#161e26;color:#dbe6f0}
body[data-theme="dark"] .excel-table td,body[data-theme="dark"] .excel-table th{border-color:#2c3742}
body[data-theme="dark"] .excel-table th{background:#212c38;color:#e7ecf1}
body[data-theme="dark"] .excel-table thead th{background:#212c38}
body[data-theme="dark"] .excel-table .title{background:#0d141b;color:#fff}
body[data-theme="dark"] .excel-table .subtitle,body[data-theme="dark"] .excel-table .project,body[data-theme="dark"] .excel-table .right-head{background:#161e26;color:#c9d4de}
body[data-theme="dark"] .excel-table .grouphead,body[data-theme="dark"] .excel-table .subhead{background:#212c38}
body[data-theme="dark"] .excel-table .total{background:#213524}
body[data-theme="dark"] .excel-table .soft-total{background:#242c33}
body[data-theme="dark"] .excel-table .section{background:#161e26}
body[data-theme="dark"] .summary-table .big-total td{background:#213524}
body[data-theme="dark"] .summary-table .section-row td{background:#242c33}
body[data-theme="dark"] .work-table .detail-row td{background:#1a222b}
body[data-theme="dark"] .work-table .detail-row .detail-text{color:#c9d4de}
body[data-theme="dark"] .work-table tr.row-selected td{background:#2c445c!important}
body[data-theme="dark"] .excel-table input{color:#e7ecf1}
body[data-theme="dark"] .excel-table input:focus{background:#1f2932;outline-color:#5b9bd5}
body[data-theme="dark"] .work-table input{border-color:#3d6fa8;background:#1a2734}
body[data-theme="dark"] .work-table input:focus{border-color:#5b9bd5;background:#1f2932}
body[data-theme="dark"] .work-table input::placeholder{color:#7c8a99}
body[data-theme="dark"] .price-input{background:#1f2932!important;border-color:#33404c!important;color:#e7ecf1}
body[data-theme="dark"] .price-missing{background:#3a2020!important;border-color:#a75959!important}
body[data-theme="dark"] .resource-detail td{background:#1a222b;color:#aab6c1}
body[data-theme="dark"] .resource-group td{background:#161e26}
body[data-theme="dark"] .excel-table .suggest{background:#1c2530;border-color:#3c4a58}
body[data-theme="dark"] .suggest-item{border-color:#2c3742}
body[data-theme="dark"] .suggest-item.active,body[data-theme="dark"] .suggest-item:hover{background:#26374a}
body[data-theme="dark"] .sheet-empty{color:#8a97a3}
body[data-theme="dark"] .warn{background:#3a2020;border-color:#a75959;color:#f0b7b7}
body[data-theme="dark"] footer{background:#0d141b;border-color:#2c3742;color:#9aa7b2}
body[data-theme="dark"] .summary-settings{background:#1a222b;border-color:#2c3742}
body[data-theme="dark"] .summary-settings input,body[data-theme="dark"] .projectbar input{background:#1f2932;border-color:#33404c;color:#e7ecf1}
body[data-theme="dark"] .context-menu{background:#1c2530;border-color:#3c4a58;color:#e7ecf1}
body[data-theme="dark"] .context-menu button{background:#1c2530;color:#e7ecf1}
body[data-theme="dark"] .context-menu button:hover{background:#26313d}
body[data-theme="dark"] .context-menu kbd{background:#2a343e;border-color:#3c4a58;color:#c9d4de}
body[data-theme="dark"] .norm-popover{background:#1c2530;border-color:#3c4a58;color:#e7ecf1}
body[data-theme="dark"] .norm-popover th{background:#212c38}
body[data-theme="dark"] .norm-popover th,body[data-theme="dark"] .norm-popover td{border-color:#33404c}
body[data-theme="dark"] .export-modal{background:#1c2530;color:#e7ecf1}
body[data-theme="dark"] .export-title{color:#dbe6f0}
body[data-theme="dark"] .export-bar{background:#2c3742}
body[data-theme="dark"] .export-status{color:#aab6c1}
body[data-theme="dark"] #themeToggle{background:#1c2530!important;color:#dbe6f0!important}
body[data-theme="dark"] .dgct-item td{color:#4fd67a}
body[data-theme="dark"] .dgct-group td{background:#212c38}

/* ---- Hộp thông báo lỗi dạng POPUP NỔI (không phải banner chiếm hết
   chiều ngang, không có lớp phủ nền che bảng tính) — chỉ hiện khi thật sự
   phát hiện lỗi, tự "nhảy lên" ở góc trên bên phải màn hình bằng hiệu ứng
   errorPopIn, và người dùng vẫn thao tác/gõ được bình thường vào ô vừa
   được tự động nhảy tới/focus phía dưới nó. Xem showErrorPopup()/
   showMissingCodePopup()/liveValidateMissingCode() trong app.js. ---- */
.error-popup{position:fixed;top:64px;right:16px;z-index:1500;display:flex;gap:10px;align-items:flex-start;
  width:380px;max-width:calc(100% - 32px);background:#fdecea;border:1px solid #e53935;border-left:5px solid #e53935;
  color:#611a15;padding:12px 14px;border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.28);
  animation:errorPopIn .18s ease-out}
/* QUAN TRỌNG: quy tắc display:flex ở trên sẽ đè luôn cả khi phần tử có
   thuộc tính "hidden" (CSS do người viết luôn thắng CSS mặc định của trình
   duyệt dù cùng độ ưu tiên) — nếu thiếu dòng dưới đây, popup lỗi sẽ HIỆN
   THƯỜNG TRỰC ngay cả khi chưa có lỗi nào cả. */
.error-popup[hidden]{display:none}
@keyframes errorPopIn{0%{opacity:0;transform:translateY(-10px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
.error-popup-icon{font-size:18px;line-height:1.3}
.error-popup-content{flex:1;min-width:0}
.error-popup-title{font-weight:700;margin-bottom:2px}
.error-popup-body{font-size:13px;line-height:1.5;max-height:280px;overflow:auto}
.error-popup-body p{margin:4px 0}
.error-popup-body ul.error-list{margin:6px 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.error-popup-body .jump-link{background:#fff;border:1px solid #e53935;color:#611a15;
  border-radius:4px;padding:4px 8px;font-size:12.5px;cursor:pointer;text-align:left}
.error-popup-body .jump-link:hover{background:#e53935;color:#fff}
.error-popup-body .error-more{font-style:italic;color:#8a4a44}
.error-popup-close{border:none;background:transparent;color:#611a15;font-size:16px;
  cursor:pointer;line-height:1;padding:2px 4px}
.error-popup-close:hover{color:#e53935}
body[data-theme="dark"] .error-popup{background:#3a1a18;border-color:#e57373;color:#f6c9c5}
body[data-theme="dark"] .error-popup-close{color:#f6c9c5}
body[data-theme="dark"] .error-popup-body .jump-link{background:#2a1615;border-color:#e57373;color:#f6c9c5}
body[data-theme="dark"] .error-popup-body .jump-link:hover{background:#e57373;color:#2a1615}
body[data-theme="dark"] .error-popup-body .error-more{color:#e3a19c}
@media(max-width:640px){.error-popup{left:12px;right:12px;top:56px;width:auto}}

/* Ô cần sửa được nhảy/cuộn tới và focus tự động sẽ nhấp nháy viền đỏ vài
   giây để người dùng nhận ra ngay, không cần dò tìm thủ công. */
@keyframes jumpFlash{0%{box-shadow:0 0 0 4px rgba(229,57,53,.6)}100%{box-shadow:0 0 0 0 rgba(229,57,53,0)}}
.jump-highlight{outline:2px solid #e53935 !important;animation:jumpFlash 1.1s ease-out 2}


.excel-table input.formula-error{background:#fde2e2;outline:2px solid #d9534f}

.tgcm-est{background:#fff8e1}
.tgcm-est-tag{font-size:10px;font-weight:700;color:#8a6d00;background:#ffe9a8;border-radius:3px;padding:1px 4px;margin-left:3px}
body[data-theme="dark"] .tgcm-est{background:#3a331a}
.summary-settings select{height:28px;padding:3px 6px;border:1px solid #b8c4cf;border-radius:2px}
body[data-theme="dark"] .summary-settings select{background:#1f2932;border-color:#33404c;color:#e7ecf1}

/* ================================================================
   RESPONSIVE / MOBILE-FIRST — bổ sung cho điện thoại, tablet, iPad.
   Không đổi hành vi/giao diện ở màn hình rộng (desktop/laptop): mọi
   rule dưới đây chỉ có hiệu lực trong các @media tương ứng, hoặc là
   cải tiến trung tính (cuộn mượt, sticky header) áp dụng mọi kích cỡ.
   ================================================================ */

/* Cuộn mượt bằng ngón tay (iOS momentum scrolling) cho mọi vùng cuộn được —
   không có rule này, cuộn ngang bảng/tab trên iPhone/iPad giật cục. */
.excel-sheet,.tabs,.summary-settings,.suggest,.norm-popover{-webkit-overflow-scrolling:touch}


/* Không cho input/select tự phóng to (auto-zoom) khi chạm vào ô nhập liệu
   trên Safari iOS — trình duyệt tự zoom nếu font-size ô nhập < 16px, gây
   vỡ layout và người dùng phải tự zoom lại thủ công. Chỉ áp dụng từ mức
   tablet nhỏ trở xuống (nơi thao tác chạm là chính); desktop/laptop giữ cỡ
   chữ nhỏ gọn như cũ vì dùng chuột, không bị lỗi auto-zoom này. */
@media(max-width:820px){
  .excel-table input,.projectbar input,.summary-settings input,.summary-settings select,
  .sheet-toolbar input,.sheet-toolbar select{font-size:16px}
}

/* ---- Menu sheet dạng hamburger (điện thoại/tablet dọc, ≤820px) ----
   Thanh tab ngang gốc (.tabs) vẫn nguyên hành vi, chỉ đổi CÁCH HIỂN THỊ:
   thu gọn thành 1 nút "☰ Tên sheet đang mở" cố định đáy màn hình; bấm vào
   bung thành bảng chọn toàn màn hình (dễ chạm, không phải cuộn ngang dò
   từng tab). Mọi sheet/chức năng giữ nguyên — chỉ đổi trình bày. */
.mobile-tabbar{display:none}
.mobile-tab-overlay{display:none}
@media(max-width:820px){
  .mobile-tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:2100;
    padding-bottom:env(safe-area-inset-bottom);background:#17324d;border-top:1px solid #0d1f30;
  }
  .mobile-tab-toggle{
    flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
    min-height:48px;border:0;background:transparent;color:#fff;font-weight:700;font-size:14px;cursor:pointer;
  }
  .mobile-tab-toggle:active{background:#1f3f5f}
  .hamburger-icon{font-size:17px;line-height:1}
  .mobile-tab-caret{transition:transform .15s}
  #tabsNav.mobile-open ~ .mobile-tabbar .mobile-tab-caret,
  .mobile-tab-toggle[aria-expanded="true"] .mobile-tab-caret{transform:rotate(180deg)}

  .mobile-tab-overlay:not([hidden]){
    display:block;position:fixed;inset:0;z-index:2050;background:#0006;
  }

  /* Thanh tab gốc: ẩn theo mặc định trên màn hình hẹp, bung thành bảng
     chọn full-width phía trên nút hamburger khi có class .mobile-open
     (bật/tắt bởi JS trong activateTab()/mobileTabToggle — xem app.js). */
  .tabs{
    display:none;position:fixed;left:0;right:0;bottom:48px;top:auto;height:auto;max-height:70vh;
    flex-direction:column;overflow-y:auto;overflow-x:hidden;padding:6px;
    background:#17324d;box-shadow:0 -4px 18px #0005;z-index:2100;
    padding-bottom:calc(6px + env(safe-area-inset-bottom));
  }
  .tabs.mobile-open{display:flex}
  .tabs button{
    height:auto;min-height:48px;width:100%;border:0;border-radius:6px;background:#1f3f5f;
    color:#fff;text-align:left;padding:0 16px;margin-bottom:4px;font-size:15px;white-space:normal;
  }
  .tabs button+button{border-left:0}
  .tabs button.active{background:#fff;color:#17324d;border-top:0;padding-top:0}

  /* Vùng nội dung sheet phải chừa chỗ cho thanh hamburger cố định ở đáy
     (thay cho thanh tab 38px cũ). */
  .sheet-area{height:calc(100vh - 55px - 48px);height:calc(100dvh - 55px - 48px)}
  @supports (height:100dvh){.sheet-area{height:calc(100dvh - 55px - 48px)}}
}

/* ---- Vùng chạm đủ lớn cho ngón tay (tối thiểu ~44px theo khuyến nghị
   Apple/Google) trên điện thoại và tablet — các nút hiện tại quá nhỏ để
   bấm chính xác bằng ngón tay (topbar/toolbar dùng chuột là chính). ---- */
@media(max-width:900px){
  .actions button{width:40px;height:40px;min-height:40px}
  .sheet-toolbar button{min-height:36px;padding:6px 10px}
  .projectbar input{min-height:36px}
  .summary-settings input,.summary-settings select{min-height:36px}
  .excel-table input{min-height:28px}
  /* Ô chọn công tác (autocomplete) — hàng gợi ý cao hơn, dễ chạm đúng dòng
     hơn là để nguyên cỡ cho desktop (vốn chỉ 6px padding). */
  .suggest-item{padding:10px 10px;font-size:13px}
  .suggest{width:min(440px,92vw)}
}

/* ---- Điện thoại nhỏ (≤480px): co gọn thêm phần đầu trang, giữ nguyên
   MỌI chức năng — chỉ thu nhỏ khoảng đệm/cỡ chữ cho vừa màn hình hẹp. ---- */
@media(max-width:480px){
  .topbar{flex-wrap:wrap;height:auto;min-height:48px;row-gap:6px}
  .actions{flex-wrap:wrap;justify-content:flex-end}
  .act-sep{display:none}
  .projectbar{padding:6px}
  .projectbar input{width:min(150px,38vw)}
  .projectbar input[type=number]{width:70px}
  .autosave{margin-left:0;flex-basis:100%}
  /* flex-shrink:0 — không có dòng này, khối cài đặt (giá nhiên liệu/Vùng...)
     bị flexbox ép thấp hơn cả nội dung thật (bảng bên dưới "giành" chỗ),
     cắt mất vài ô cuối dù đã cho flex-wrap xuống dòng. Bảng dữ liệu bên
     dưới tự có thanh cuộn riêng nên nhường chỗ cho khối này là đúng. */
  .summary-settings{flex-wrap:wrap;height:auto;flex-shrink:0;max-height:45vh;overflow-y:auto}
  /* Ô "22.260,00" cần ≥9 ký tự — 82px mặc định (tính cho desktop) bị cắt chữ
     số cuối trên khổ hẹp. */
  .summary-settings input,.summary-settings select{width:150px}
  .summary-settings label:first-child input{width:150px}
}

/* ---- Tablet/iPad khổ dọc và ngang (giữa điện thoại và laptop): giữ
   thanh tab ngang gốc (đủ chỗ hiển thị, không cần thu vào hamburger) nhưng
   nới cỡ chạm để dùng bằng ngón tay thuận tiện hơn chuột. ---- */
@media(min-width:821px) and (max-width:1200px){
  .tabs button{min-height:42px;padding:0 14px}
  .actions button{width:40px;height:40px;min-height:40px}
}

/* Đảm bảo trang không bao giờ phải cuộn ngang TOÀN TRANG (chỉ cuộn ngang
   bên trong từng bảng/thanh cuộn riêng) — tràn ngang toàn trang là lỗi vỡ
   layout kinh điển trên mobile mà yêu cầu đầu bài nhắc tới. */
html,body{max-width:100%;overflow-x:hidden}

/* ---- Khung nhìn: bố cục flex thay cho chiều cao cố định (calc(100dvh - 55px)).
   Topbar tự xuống dòng trên điện thoại nên cao hơn 55px → phần đáy bảng bị che.
   Nay sheet-area chiếm đúng phần còn lại, mọi sheet thấy đủ nội dung. ---- */
body{display:flex;flex-direction:column;height:100vh;height:100dvh}
.topbar{flex:0 0 auto;height:auto;min-height:55px}
.sheet-area{flex:1 1 auto;min-height:0;height:auto !important;display:flex;flex-direction:column;padding-bottom:34px !important}
.tab.active{flex:1 1 auto;height:auto;min-height:0}
.tab .excel-sheet{flex:1 1 auto;height:auto !important;min-height:0}
#thdt .summary-settings,#tgcm .summary-settings{flex:0 0 auto}
@media(max-width:820px){
  .sheet-area{padding:0 0 calc(48px + env(safe-area-inset-bottom)) 0 !important}
  .excel-table{font-size:10px}
  .excel-table td,.excel-table th{padding:2px 3px}
  .summary-settings{flex-wrap:wrap;max-height:40vh;overflow-y:auto;white-space:normal}
}

/* Màn hình chờ (flash) khi mở trên điện thoại: hiện "Dự toán IO". */
.splash{display:none}
@media(max-width:820px){
  .splash{display:flex;position:fixed;inset:0;z-index:9000;align-items:center;justify-content:center;background:#17324d;transition:opacity .3s}
  .splash-name{color:#fff;font-size:26px;font-weight:700;letter-spacing:.5px;font-family:Arial,Helvetica,sans-serif}
  .splash.splash-out{opacity:0;pointer-events:none}
}
/* Khi bàn phím mở: chừa khoảng trống cuối bảng để cuộn dòng cuối lên giữa màn hình. */
@media(max-width:820px){
  body.kb-open #workSheet{padding-bottom:45vh}
  body.kb-open .mobile-tabbar{display:none}
}

/* Sheet TMĐT / DP trượt giá / ĐM chi phí */
.tm-table col:nth-child(1){width:46px}.tm-table col:nth-child(2){width:300px}.tm-table col:nth-child(3){width:82px}.tm-table col:nth-child(4){width:48px}.tm-table col:nth-child(5){width:200px}.tm-table col:nth-child(6),.tm-table col:nth-child(7),.tm-table col:nth-child(8){width:112px}.tm-table col:nth-child(9){width:62px}
.tm-table td{height:25px;vertical-align:top}.tm-table td.wrap{white-space:normal}.tm-table .b{font-weight:700}
.tm-table .tm-helper td{background:#ffffcc}
.tm-table .section-row td{background:#f2f5f9;font-weight:700}.tm-table .big-total td{font-weight:700;background:#e6f2e6}
.tm-rate{width:66px;background:#dce6f1!important}
.tg-table td.num,.tg-table th{white-space:nowrap}.tg-table td.wrap{white-space:normal}.tg-table td{height:25px}
.tg-table .big-total td{font-weight:700;background:#e6f2e6}
.tg-gap{height:14px}
.tm-note{margin:8px 4px 16px;color:#5a6773;font-size:11px;font-style:italic;max-width:900px}
.dm-head{font-size:15px;font-weight:700;padding:8px 6px}.dm-src{display:block;font-size:11px;font-weight:400;color:#66727e;font-style:italic}
.dm-text{padding:2px 6px;font-size:12px}.dm-law{font-weight:700;padding-top:14px;color:#17324d}.dm-unit{font-style:italic;color:#66727e;text-align:right;max-width:900px}
.dm-tbl-wrap{margin:4px 0 12px}.dm-tbl-key{font-size:11px;color:#66727e;padding:2px 6px}
.dm-table td.num{white-space:nowrap}.dm-table td.wrap{white-space:normal;max-width:300px}
.dm-table .section-row td{background:#eaf0f7}
body[data-theme="dark"] .tm-table .tm-helper td{background:#4a4726}
body[data-theme="dark"] .tm-table .section-row td,body[data-theme="dark"] .dm-table .section-row td{background:#242c33}
body[data-theme="dark"] .tm-table .big-total td,body[data-theme="dark"] .tg-table .big-total td{background:#213524}
body[data-theme="dark"] .tm-rate{background:#26384a!important}
body[data-theme="dark"] .dm-law{color:#9db7d1}

.pct-wrap{display:inline-flex;align-items:center;justify-content:flex-end;gap:2px}.pct-sign{user-select:none}

.excel-table thead tr.head-scroll th{position:static !important;}

#btnTraGia{height:28px;padding:0 10px;border:1px solid #7f8b96;border-radius:2px;background:#e8edf2;font-weight:700;cursor:pointer}
#btnTraGia:disabled{opacity:.6;cursor:wait}
/* Nút "Tính giá ca máy" trong ô tiêu đề Thành tiền của sheet Máy thi công (hàng tiêu đề này cố định khi cuộn) */
.th-action{display:flex;flex-direction:column;align-items:center;gap:3px}
.btn-open-tgcm{height:22px;padding:0 8px;border:1px solid #17324d;border-radius:3px;background:#17324d;color:#fff;font-family:inherit;font-weight:700;font-size:11px;line-height:1;white-space:nowrap;cursor:pointer}
.excel-table th .btn-open-tgcm{white-space:nowrap !important}   /* ghi đè luật ép xuống dòng cho mọi phần tử trong <th> */
.btn-open-tgcm:hover{background:#24507c;border-color:#24507c}
.btn-open-tgcm:focus-visible{outline:2px solid #2b7de9;outline-offset:1px}
body[data-theme="dark"] .btn-open-tgcm{background:#2d5f8e;border-color:#2d5f8e}
body[data-theme="dark"] .btn-open-tgcm:hover{background:#3a74aa;border-color:#3a74aa}
.tra-gia-status{font-size:12px;font-weight:600;line-height:1.5;white-space:normal;overflow-wrap:anywhere;padding:5px 8px;background:#fff;border:1px solid #aeb9c4;border-top:0;border-bottom:0}
.tra-gia-status:empty{display:none}.tra-gia-status.ok{color:#1b7f3b}.tra-gia-status.warn{color:#b45309}

.locked-price{display:inline-block;padding:0 4px;font-weight:600;color:#1b4f8a}

/* Nút "Tính giá ca máy": đứng cạnh, bên ngoài bảng tổng hợp máy thi công */
.mtc-wrap{display:flex;align-items:flex-start;gap:10px;width:max-content}
.mtc-side{position:sticky;top:8px;align-self:flex-start;padding-top:6px}
.mtc-side .btn-open-tgcm{height:28px;padding:0 12px;font-size:12px}
@media(max-width:820px){.mtc-side{left:6px}}

/* Mặc định phóng khung nhìn 125% trên máy tính (màn hình rộng); điện thoại giữ nguyên 100% */
:root{--ui-zoom:1.25}
@media(min-width:821px){
  /* vh/dvh không bị zoom bù trừ → chia cho hệ số zoom để khung vẫn vừa đúng màn hình */
  body{zoom:var(--ui-zoom);height:calc(100vh / var(--ui-zoom));height:calc(100dvh / var(--ui-zoom))}
  .sheet-area{height:calc(100vh / var(--ui-zoom) - 55px);height:calc(100dvh / var(--ui-zoom) - 55px)}
}

/* Dòng tick "Không sử dụng hàm làm tròn (Round)" ở sheet THDT hạng mục */
.no-round-bar{background:#fff;border:1px solid #aeb9c4;border-bottom:0;padding:4px 8px}
.no-round-bar label{display:inline-flex;align-items:center;gap:6px;font-weight:700;cursor:pointer}
.no-round-bar input{width:16px;height:16px;margin:0;cursor:pointer}
body[data-theme="dark"] .no-round-bar{background:#1a222b;border-color:#2c3742}

/* Nút ≡ "Các sheet ẩn" ở cuối (bên phải) thanh sheet + bảng chọn nhanh */
.tabs:not(.mobile-open){padding-right:40px}
.hs-btn{position:fixed;right:0;bottom:0;height:30px;width:36px;z-index:2050;display:flex;align-items:center;justify-content:center;
  border:0;border-left:1px solid #b5c0cb;background:#d7e0e8;cursor:pointer;padding:0}
.hs-btn svg{fill:#e03131}
.hs-btn:hover{background:#c9d6e2}
.hs-menu{position:fixed;right:4px;bottom:32px;z-index:2200;min-width:190px;max-height:60vh;overflow:auto;background:#fff;color:#111;
  border:1px solid #9eabb8;box-shadow:0 4px 14px #0004;padding:3px 0}
.hs-menu[hidden]{display:none}
.hs-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:6px 22px;font-size:13px;color:inherit;cursor:pointer;white-space:nowrap}
.hs-menu button:hover,.hs-menu button:focus{background:#dbe8f5;outline:0}
.hs-menu button.is-current{font-weight:700}
body[data-theme="dark"] .hs-btn{background:#1a222b;border-left-color:#2c3742}
body[data-theme="dark"] .hs-btn:hover{background:#243140}
body[data-theme="dark"] .hs-menu{background:#1a222b;color:#c9d4de;border-color:#2c3742}
body[data-theme="dark"] .hs-menu button:hover,body[data-theme="dark"] .hs-menu button:focus{background:#2a3a4c}
@media(max-width:820px){.hs-btn,.hs-menu{display:none !important}}

/* Sheet TMĐT: nút "Dự phòng trượt giá" — cùng định dạng nút "Tính giá ca máy"; cạnh dòng tiêu đề, ngoài bảng; dính mép trên khi cuộn.
   .tm-side = cột cao bằng bảng (padding-top đẩy xuống ngang dòng tiêu đề cột); .tm-side-in = phần tử sticky (không có margin). */
.tm-wrap{display:flex;align-items:flex-start;gap:10px;width:max-content;position:relative}
.tm-side{align-self:stretch;box-sizing:border-box}
.tm-side-in{position:sticky;top:2px;display:flex;align-items:center;z-index:5;min-height:32px}
.tm-side .btn-open-tgcm{height:28px;padding:0 12px;font-size:12px;white-space:nowrap}

/* Thông báo sau khi dán hàng loạt (cắt dòng / mã không có trong định mức) */
.paste-notice{position:fixed;left:50%;transform:translateX(-50%);bottom:44px;z-index:2300;max-width:min(640px,92vw);padding:9px 34px 9px 14px;border-radius:4px;
  background:#17324d;color:#fff;font-size:13px;line-height:1.45;box-shadow:0 4px 14px #0005;cursor:pointer}
.paste-notice.warn{background:#8a4b00}
.paste-notice[hidden]{display:none}
.paste-notice .pn-x{position:absolute;right:10px;top:5px;font-size:18px;line-height:1;opacity:.8}

/* Hộp tiến trình dùng chung: phân biệt 2 việc bằng biểu tượng + màu thanh (xuất Excel = xanh lá, nhập mã hiệu = xanh dương) */
.export-title{display:flex;align-items:center;justify-content:center;gap:8px}
.export-ico{flex:0 0 auto;display:none}
.export-overlay[data-kind="export"] .ico-export,.export-overlay[data-kind="paste"] .ico-paste{display:block}
.export-overlay[data-kind="export"] .export-ico{color:#1e7e45}
.export-overlay[data-kind="paste"] .export-ico{color:#2f6fb0}
.export-overlay[data-kind="export"] .export-bar-fill{background:linear-gradient(90deg,#3aa869,#1e7e45)}
.export-overlay[data-kind="paste"] .export-bar-fill{background:linear-gradient(90deg,#2f6fb0,#17324d)}
.paste-notice{z-index:6100}