/* ============================================================
sheet.css — v3.21 · BẢNG TÍNH trong khung CỬA SỔ PHẦN MỀM
Bỏ mọi dấu hiệu của trang web tiếp thị: không thẻ nổi bo góc,
không đổ bóng, không tab viên thuốc, không phụ đề quảng cáo.
Cấu trúc: thanh lệnh mảnh → tab dính liền → bảng tính tràn ngang → thanh trạng thái.
Load CUỐI CÙNG để đè bộ apple-style (rất nhiều !important).
============================================================ */
/* ---------- cửa sổ ---------- */
html{ background:#c8ccd1; }
body{ background:#c8ccd1 !important; padding:0 !important; margin:0 !important;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif !important;
font-size:14.5px; color:#1a1a1a !important; line-height:1.45 !important; }
.container{ max-width:none !important; margin:0 !important; padding:0 !important;
background:#f0f1f3; min-height:100vh; display:block; }
/* ---------- thanh lệnh ---------- */
/* ============================================================
v3.29 — DẢI TIÊU ĐỀ ĐƠN VỊ (mẫu ZLine của cùng xí nghiệp)
Nền PHẲNG một màu, không bo góc, không đổ bóng, không gradient — đây là tiêu đề hồ sơ
của đơn vị, không phải banner quảng cáo. Phụ đề là TÊN ĐƠN VỊ, không phải câu chào hàng.
============================================================ */
.app-brand{ display:flex !important; align-items:center; gap:26px;
background:#edeff4 !important; border:0 !important; border-bottom:1px solid #c3cad6 !important;
border-radius:0 !important; box-shadow:none !important; padding:12px 22px !important;
margin:0 !important; }
.app-brand .ab-logo{ height:84px; width:auto; display:block; flex:0 0 auto; }
.app-brand .ab-title{ border-left:1px solid #b9c2d0; padding-left:26px; min-width:0; }
.app-brand .ab-t1{ font-size:26px; font-weight:800; color:#1c3f94; line-height:1.15; }
/* v3.33: phần tên tiếng Việt trong ngoặc — ĐỒNG NHẤT với tên tiếng Anh (cùng cỡ, cùng màu,
cùng độ đậm), theo đúng mẫu dải tiêu đề của phần mềm EarthLine cùng xí nghiệp mà anh Nam gửi.
Bản đầu để phần ngoặc nhỏ và nhạt hơn — anh Nam đối chiếu mẫu và yêu cầu làm giống. */
.app-brand .ab-vn{ font-size:inherit; font-weight:inherit; color:inherit; }
.app-brand .ab-t2{ font-size:14px; color:#5a6472; margin-top:5px; }
@media (max-width:900px){
.app-brand{ gap:16px; padding:10px 14px !important; }
.app-brand .ab-logo{ height:60px; }
.app-brand .ab-title{ padding-left:16px; }
.app-brand .ab-t1{ font-size:19px; }
.app-brand .ab-t2{ font-size:12px; }
}
@media (max-width:640px){
.app-brand{ gap:12px; padding:8px 12px !important; }
.app-brand .ab-logo{ height:46px; }
.app-brand .ab-title{ padding-left:12px; }
.app-brand .ab-t1{ font-size:15px; }
.app-brand .ab-t2{ font-size:11px; }
}
.app-toolbar{ display:flex !important; align-items:center; gap:10px; flex-wrap:wrap;
background:linear-gradient(#fbfbfc,#eceef1) !important; border:0 !important;
border-bottom:1px solid #9aa1a9 !important; border-radius:0 !important; box-shadow:none !important;
padding:5px 10px !important; margin:0 !important; }
.ab-name{ font-size:14px; font-weight:700; color:#1a1a1a; }
.ab-std{ font-size:12.5px; color:#4d545c; }
.ab-sp{ flex:1; }
.ab-b{ font:inherit; font-size:13px; padding:3px 11px; border:1px solid #a8afb6;
background:linear-gradient(#fff,#eef0f2); color:#1a1a1a; cursor:pointer; }
.ab-b:hover{ background:linear-gradient(#fff,#e3e6ea); }
.ab-b:active{ background:#e0e3e7; }
.ab-b:focus-visible{ outline:1px dotted #1a1a1a; outline-offset:2px; }
/* ---------- tab: dính liền vùng nội dung như tab điều khiển cổ điển ---------- */
.tab-nav-wrapper{ display:block !important; text-align:left !important; background:#dfe2e6;
padding:5px 8px 0 !important; margin:0 !important; border-bottom:1px solid #9aa1a9; }
.tab-nav{ display:inline-flex !important; gap:0 !important; background:transparent !important;
border:0 !important; border-radius:0 !important; box-shadow:none !important;
padding:0 !important; margin:0 !important; }
.tab-btn{ border:1px solid #9aa1a9 !important; border-bottom:0 !important; border-radius:0 !important;
background:#d3d7dc !important; color:#2d343b !important; font-size:13.5px !important; font-weight:400 !important;
padding:4px 15px !important; margin:0 -1px -1px 0 !important; box-shadow:none !important; position:relative; }
.tab-btn:hover{ background:#dfe2e6 !important; }
.tab-btn.active{ background:#f0f1f3 !important; color:#12406b !important; font-weight:700 !important;
z-index:2; padding-bottom:5px !important; }
.tab-panel{ padding:10px 10px 22px !important; }
/* ---------- bảng tính ---------- */
.cs{ background:#fff; border:1px solid #9aa1a9; margin:0 0 12px; }
.cs-bar{ display:flex; align-items:center; gap:12px; background:#eceef1;
border-bottom:1px solid #b4bac1; padding:3px 7px; font-size:13.5px; color:#2d343b; }
.cs-file{ flex:1 1 auto; min-width:150px; }
.cs-file input{ width:100%; max-width:520px; font:inherit; font-size:14px; font-weight:700;
color:#1a1a1a; padding:2px 6px; }
.cs-meta{ display:flex; align-items:center; gap:6px; font-size:13px; color:#4d545c; }
.cs-meta input{ font:inherit; font-size:13px; padding:2px 6px; width:130px; color:#1a1a1a; }
.cs-meta b{ font-weight:400; }
/* v3.29 — TÊN CÔNG TRÌNH và TÊN KỸ SƯ cũng là Ô NGƯỜI DÙNG NHẬP nên phải theo đúng quy ước
thị giác của toàn phần mềm: nền vàng #fffdf2. Trước đây hai ô này nền trắng/trong suốt nên
nhìn không ra là ô phải điền.
Khác bảng tính ở một điểm: thanh này KHÔNG phải bảng, không có ô kẻ sẵn bao quanh, nên phải
tự kẻ viền mảnh để thấy phạm vi ô. Vẫn giữ khung navy khi bấm vào như mọi ô nhập khác. */
.cs-bar input{ background:#fffdf2 !important; border:1px solid #c9cfd6 !important;
border-radius:0 !important; box-shadow:none !important; }
.cs-bar input:hover{ background:#fffae4 !important; }
.cs-bar input:focus{ outline:2px solid #1e3f6b !important; outline-offset:-2px;
background:#fff !important; border-color:#c9cfd6 !important; }
.cs-bar input::placeholder{ color:#8a929b; font-weight:400; }
.cs-scroll{ overflow-x:auto; }
/* ===== BẢNG: tiêu đề nền xanh đậm, kẻ ô rõ, sọc xen kẽ ===== */
.bt{ width:100%; border-collapse:collapse; counter-reset:row; font-size:14px; background:#fff;
border:1.5px solid #1e3f6b; }
.bt col.c-rn{ width:40px; } .bt col.c-nm{ width:30%; } .bt col.c-v{ width:126px; }
.bt col.c-u{ width:74px; } .bt col.c-note{ width:auto; }
/* hàng tiêu đề */
.bt thead th{ background:#1e3f6b; color:#fff; font-weight:700; font-size:13px; text-align:center;
padding:7px 8px; border:1px solid #17335a; border-bottom:1.5px solid #17335a;
white-space:nowrap; letter-spacing:.01em; }
.bt thead th.rn{ width:40px; }
/* ô dữ liệu — kẻ dọc đậm hơn kẻ ngang để mắt lần theo cột
v3.33 (anh Nam duyệt phương án B): làm rõ nét đường kẻ. Kẻ ngang cũ #dde1e6 gần như vô hình
trên nền trắng nên bảng trông như các dòng trôi nổi, mắt khó dò ngang theo hàng.
Ngang #dde1e6 → #c3ccd6 · dọc #aeb6c0 → #98a2ae. VẪN GIỮ nguyên tắc kẻ dọc đậm hơn kẻ ngang
của v3.22 — đó là thứ dẫn mắt theo cột ở những bảng nhiều cột như mục 7. */
.bt td{ border-top:1px solid #c3ccd6; border-bottom:1px solid #c3ccd6;
border-left:1px solid #98a2ae; border-right:1px solid #98a2ae;
padding:0 8px; height:33px; vertical-align:middle; color:#1a1a1a; }
/* sọc xen kẽ + dòng đang trỏ */
.bt tbody tr:nth-child(even):not(.sec)>td{ background:#f7f9fc; }
.bt tbody tr:hover>td{ background:#e9f1fb; }
/* cột số thứ tự */
/* STT chỉ đếm dòng SỐ LIỆU — bỏ qua dòng nút Tính toán, dải cảnh báo, dòng ghi chú,
dòng tên dây và dòng thao tác, để số thứ tự dùng tham chiếu được. */
.bt tbody tr:not(.sec):not(.calcrow):not(.stale):not(.note-row):not(.act):not(.wname){ counter-increment:row; }
.bt td.rn{ background:#eef1f5 !important; color:#1e3f6b; font-size:12.5px; font-weight:700;
text-align:center; padding:0; border-right:1.5px solid #1e3f6b; }
.bt tbody tr:not(.sec):not(.calcrow):not(.stale):not(.note-row):not(.act):not(.wname)>td.rn::before{ content:counter(row); }
/* dòng tiêu đề nhóm */
.bt tr.sec>td{ background:#dbe4f0 !important; font-weight:700; font-size:13.5px; color:#1e3f6b;
border-top:1.5px solid #1e3f6b; border-bottom:1px solid #9fb2cc;
border-left:0; border-right:0; padding:5px 9px; height:auto; }
.bt tr.sec.grp>td{ cursor:pointer; background:#e8edf4 !important; font-weight:600; color:#2c4f7c; }
.bt tr.sec.grp>td:hover{ background:#dde5f0 !important; }
.bt tr.sec .tw{ display:inline-block; width:14px; color:#5b7ba6; }
.bt tr.hid{ display:none; }
/* ===== ô nhập = hộp trắng viền (như ảnh mẫu), nền ô ngả vàng để biết là ô nhập ===== */
/* v3.27 — Ô NHẬP LÀ CHÍNH Ô BẢNG, KHÔNG PHẢI HỘP ĐẶT TRONG Ô.
Trước đây mỗi ô nhập dựng thêm một hộp trắng viền bo bên trong ô đã kẻ → hai lớp khung lồng
nhau. Nay bỏ hẳn viền và nền của input/select: gõ thẳng vào ô như bảng tính. Phân biệt vai trò
bằng NỀN Ô: vàng nhạt = người dùng nhập · xám = phần mềm tự tính.
Chỉ khi bấm vào ô mới hiện khung navy mảnh — đúng lối bảng tính đánh dấu ô đang chọn. */
.bt td.in{ background:#fffdf2; padding:0; }
.bt tbody tr:nth-child(even)>td.in{ background:#fffdf2; }
.bt tbody tr:hover>td.in{ background:#fffae4; }
.bt td.in input, .bt td.in select{
width:100%; border:none; border-radius:0; background:transparent;
font:inherit; font-size:14px; color:#14406e; font-weight:600;
padding:5px 7px; height:30px; text-align:center; text-align-last:center;
font-variant-numeric:tabular-nums; box-shadow:none; }
.bt td.in.wide input, .bt td.in.wide select{ text-align:left; text-align-last:left; }
/* Bỏ mũi tên ▼ của MỌI ô chọn trong bảng tính — ô chọn trông như ô nhập bình thường.
Vẫn bấm vào là mở danh sách như cũ, chỉ bỏ phần trang trí của trình duyệt.
v3.27 làm cho riêng ô cấp điện áp; v3.29 áp cho tất cả để bảng không còn chỗ có chỗ không:
số dây chống sét · hai ô chọn dây · độ dẫn Aldrey · đấu nối pooctich (mục 7). */
.bt td.in select{
-webkit-appearance:none; -moz-appearance:none; appearance:none;
background-image:none; padding-right:7px; }
.bt td.in select::-ms-expand{ display:none; }
.bt td.in:hover{ background:#fff7d9; }
.bt td.in input:focus, .bt td.in select:focus{
outline:2px solid #1e3f6b; outline-offset:-2px; background:#fff; box-shadow:none; }
/* ô do phần mềm điền (thông số catalog) — chữ trần trên nền xám, không hộp */
.bt td.out{ background:#eef1f5; padding:0; }
.bt tbody tr:nth-child(even)>td.out{ background:#eef1f5; }
.bt td.out input{ width:100%; border:none; border-radius:0; background:transparent;
font:inherit; font-size:14px; color:#2d343b; font-weight:400; padding:5px 7px; height:30px;
text-align:center; font-variant-numeric:tabular-nums; box-shadow:none; }
.bt td.out input:focus{ outline:2px solid #8b96a3; outline-offset:-2px; background:#fff; }
/* v3.27: ghi chú nâng 11.5 → 12px cho dễ đọc, cân với cỡ 12.5px của ô số liệu */
/* v3.33 (phương án B): chữ số rõ nét hơn — cột Giá trị to và đậm màu hơn, cột Đơn vị và cột
Ghi chú/công thức cũng nhích cỡ và đậm màu. Không đổi chiều cao hàng, không đổi bố cục. */
.bt td.u{ text-align:center; color:#2d343b; font-size:14px; white-space:nowrap; }
.bt td.note{ color:#333b43; font-size:13.5px; }
.bt td.val{ text-align:center; font-variant-numeric:tabular-nums; font-weight:700; font-size:15.5px;
color:#0f1620; }
.bt td.f{ color:#333b43; font-family:Menlo,Consolas,monospace; font-size:13px; }
/* dòng kết luận */
.bt tr.r-ok>td{ background:#dcefd8 !important; color:#1d5c23; border-color:#a9cfa2; font-weight:600; }
.bt tr.r-no>td{ background:#fbdcd9 !important; color:#8e1d17; border-color:#e5b2ad; font-weight:600; }
.bt tr.r-ok:hover>td{ background:#d2ebcd !important; }
.bt tr.r-no:hover>td{ background:#f8d0cb !important; }
.bt tr.r-ok>td.rn, .bt tr.r-no>td.rn{ background:#eef1f5 !important; color:#1e3f6b; }
.bt tr.wname>td{ background:#eef1f5 !important; font-weight:700; color:#1e3f6b; }
.bt tr.wname>td.rn{ font-weight:700; }
.bt tr.note-row>td{ color:#414951; font-size:13px; background:#fff; }
.bt tr.note-row:nth-child(even)>td{ background:#f7f9fc; }
.bt tr.act>td{ background:#f2f5f9 !important; padding:7px 8px; }
.bt .b{ border:1px solid #9fabb8; border-radius:4px; background:linear-gradient(#fff,#eef1f5);
color:#1a1a1a; font:inherit; font-size:13.5px; padding:4px 13px; cursor:pointer; margin-right:6px; }
.bt .b:hover{ background:linear-gradient(#fff,#e2e8ef); border-color:#7d8ea1; }
.bt .b:focus-visible{ outline:2px solid #1e3f6b; outline-offset:1px; }
.bt .b.p{ font-weight:700; border-color:#1e3f6b; color:#14406e; }
/* ---------- dòng nút TÍNH TOÁN ---------- */
.bt tr.calcrow>td{ background:#eef1f5 !important; padding:9px 8px; border-top:1.5px solid #1e3f6b; }
.b-calc{ border:1px solid #17335a; border-radius:4px; background:#1e3f6b; color:#fff;
font:inherit; font-size:14.5px; font-weight:700; letter-spacing:.04em;
padding:7px 26px; cursor:pointer; margin-right:12px; }
.b-calc:hover{ background:#17335a; }
.b-calc:active{ background:#122845; }
.b-calc:focus-visible{ outline:2px solid #1e3f6b; outline-offset:2px; }
.calc-hint{ font-size:13px; color:#414951; }
.calc-hint.warn{ color:#8e1d17; font-weight:600; }
/* v3.33 — Ô CHƯA ĐIỀN / CHƯA CHỌN, tô sau khi bấm TÍNH TOÁN mà thiếu (anh Nam yêu cầu).
Tông cam #ffedd9 do anh Nam chọn: đủ nổi để thấy ngay nhưng KHÔNG lẫn với vàng #fdf3d4 đang
dùng cho "kết quả lạc hậu" — hai thứ mang ý nghĩa khác hẳn nhau, lẫn màu là lẫn nghĩa.
Dùng box-shadow inset thay border để không làm xê dịch bố cục ô (border sẽ cộng thêm bề rộng). */
.bt td.thieu{ background:#ffedd9 !important; box-shadow:inset 0 0 0 2px #e0a878; }
.bt tbody tr:hover>td.thieu{ background:#ffe4c6 !important; }
/* ---------- v3.30: PHẢN HỒI KHI ĐANG TÍNH ----------
Anh Nam: bấm TÍNH TOÁN thì kết quả hiện ra tức thì, không cảm nhận được phần mềm vừa làm gì.
Nút chuyển sang trạng thái "ĐANG TÍNH…" rồi kết quả hiện dần lên.
KHÔNG dùng vòng xoay tròn hay thanh tiến trình bo tròn — quy tắc giao diện #3 của dự án cấm
kiểu AI/SaaS. Ở đây chỉ đổi màu nền nút và đổi chữ, đúng lối bảng tính kỹ thuật. */
.b-calc.calculating{ background:#4a6893; border-color:#40597e; cursor:default; }
.b-calc.calculating:hover{ background:#4a6893; }
.b-calc[disabled]{ cursor:default; }
/* Nút "Áp dụng phương án này" (class .b.p, nền sáng) — v3.30 cũng có nhịp tính như nút TÍNH TOÁN.
Nút này nền sáng nên trạng thái đang tính làm NGƯỢC lại nút navy: nền xám đi, chữ nhạt bớt. */
.bt .b.calculating{ background:#dfe4ea; border-color:#9fabb8; color:#5c646d; cursor:default; }
.bt .b.calculating:hover{ background:#dfe4ea; }
@keyframes ketQuaHienDan{ from{ opacity:0; } to{ opacity:1; } }
/* Áp lên từng chứ không lên cả
: đặt animation lên tbody thì trình duyệt dựng lại
toàn khối một lần, dòng kẻ ô nhấp nháy theo. */
.bt tbody.vua-tinh > tr{ animation:ketQuaHienDan .3s ease-out both; }
.sim-fadein{ animation:ketQuaHienDan .3s ease-out both; }
/* Tôn trọng người dùng đã tắt hiệu ứng chuyển động trong cài đặt hệ điều hành */
@media (prefers-reduced-motion: reduce){
.bt tbody.vua-tinh > tr, .sim-fadein{ animation:none; }
}
/* kết quả đã lạc hậu do vừa sửa số liệu */
.bt tr.stale>td{ background:#fdf3d4 !important; color:#7a5b00; font-size:13px;
border-top:1.5px solid #d9b84a; border-bottom:1px solid #d9b84a; }
.bt tbody.stale-body tr:not(.stale):not(.r-ok):not(.r-no) td{ color:#666d75; }
/* Dòng kết luận giữ nguyên màu xanh/đỏ — đây là dòng quan trọng nhất, chỉ mờ nhẹ */
.bt tbody.stale-body tr.r-ok>td, .bt tbody.stale-body tr.r-no>td{ opacity:.7; }
/* ---------- thẻ phân bố dòng: nút tính + cảnh báo lạc hậu ---------- */
.sim-note{ margin-top:12px; padding:9px 12px; background:#f2f5f9; border-left:3px solid #1e3f6b;
font-size:13.5px; color:#2d343b; line-height:1.6; }
.sim-calcbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
margin-top:12px; padding:9px 12px; background:#eef1f5; border:1px solid #b4bac1;
border-top:1.5px solid #1e3f6b; }
.sim-stale{ margin-top:10px; padding:7px 12px; background:#fdf3d4; color:#7a5b00;
border:1px solid #d9b84a; font-size:13px; }
#results.stale-body{ opacity:.5; }
/* ---------- thanh trạng thái ---------- */
.cs-status{ background:#eceef1; border-top:1px solid #b4bac1; padding:3px 8px;
font-size:12.5px; color:#2d343b; display:flex; gap:16px; flex-wrap:wrap; }
.cs-status b{ font-weight:700; }
.cs-status .ok{ color:#245c2e; } .cs-status .no{ color:#8e1d17; }
/* ---------- diễn giải ---------- */
/* v3.30 — Ô diễn giải làm theo DẠNG DÒNG NÚT (anh Nam duyệt phương án D sau khi xem 5 bản demo).
Trước đây nền #f2f4f6 gần trùng màu thanh trạng thái ngay trên nó, chữ 13,5px — nhìn như một
dòng phụ nên "người không biết sẽ không bấm vào đó để xem" (nguyên văn anh Nam).
Vấn đề không phải chưa đủ đậm mà là người dùng KHÔNG NHẬN RA NÓ BẤM ĐƯỢC. Vì vậy làm hẳn thành
một nút, lặp lại đúng bố cục hàng nút TÍNH TOÁN phía trên, kèm câu mô tả nội dung bên trong để
người dùng có lý do mở ra. */
.cs-explain{ border-top:1.5px solid #1e3f6b; margin:0 !important; }
.cs-explain>summary{ cursor:pointer; list-style:none; padding:9px 10px;
background:#eef1f5 !important; border-radius:0 !important; display:flex; align-items:center;
flex-wrap:wrap; gap:12px; }
.cs-explain>summary::-webkit-details-marker{ display:none; }
.cs-explain>summary:hover .nut{ background:#e2e7ee; }
.cs-explain .nut{ display:inline-block; border:1px solid #1e3f6b;
background:linear-gradient(#fff,#eef1f5); color:#14406e; font-weight:700; font-size:13.5px;
letter-spacing:.02em; padding:4px 14px; white-space:nowrap; }
.cs-explain .mota{ font-size:13px; color:#414951; }
/* Đổi chữ nút khi mở — làm bằng CSS thuần, không cần JS */
.cs-explain .nhan-mo{ display:none; }
.cs-explain[open] .nhan-dong{ display:none; }
.cs-explain[open] .nhan-mo{ display:inline; }
.cs-explain>div{ padding:0 8px 8px !important; background:#fff !important; border:0 !important;
border-radius:0 !important; margin:0 !important; overflow-x:auto; }
/* ---------- các thẻ tuyến cột / ladder ---------- */
.step-cards-wrapper{ background:transparent !important; box-shadow:none !important; padding:0 !important; }
.step-cards-header{ padding:0 0 5px !important; border:0 !important; }
.step-cards-title{ font-size:12.5px !important; letter-spacing:.05em; text-transform:uppercase; color:#4d545c !important; }
.step-card{ background:#fff !important; border:1px solid #9aa1a9 !important; border-radius:0 !important;
box-shadow:none !important; margin-bottom:8px !important; }
.step-card>summary{ background:#eceef1 !important; border-radius:0 !important; font-size:14px !important;
padding:5px 8px !important; color:#1a1a1a !important; }
/* bỏ huy hiệu số tròn và nhãn bo tròn — dấu hiệu điển hình của giao diện web */
.step-card .step-num{ background:transparent !important; color:#2d343b !important; border:0 !important;
border-radius:0 !important; width:auto !important; height:auto !important; min-width:0 !important;
box-shadow:none !important; font-size:14px !important; font-weight:700 !important;
line-height:inherit !important; margin-right:5px !important; padding:0 !important; display:inline !important; }
.step-card .step-num::after{ content:'.'; }
.step-badge{ border-radius:0 !important; background:transparent !important; box-shadow:none !important;
border:1px solid #b4bac1 !important; color:#4d545c !important; font-weight:400 !important;
font-size:12px !important; text-transform:none !important; letter-spacing:0 !important;
padding:1px 6px !important; }
/* .step-badge.optional/.required trong apple-style dùng !important → phải ghi đè theo đúng lớp */
.step-badge.required{ background:transparent !important; color:#8e1d17 !important; border-color:#d9b3af !important; }
.step-badge.optional{ background:transparent !important; color:#4d545c !important; }
.step-badge.new{ background:transparent !important; color:#245c2e !important; }
.step-cards-actions button{ border-radius:0 !important; border:1px solid #a8afb6 !important;
background:linear-gradient(#fff,#eef0f2) !important; color:#1a1a1a !important;
font-size:13px !important; padding:3px 11px !important; box-shadow:none !important; }
.step-note{ border-radius:0 !important; }
.save-project-bar{ display:none !important; }
.footer{ font-size:12.5px !important; color:#4d545c !important; background:transparent !important;
border-top:1px solid #b4bac1; padding:8px 10px !important; margin:0 !important; }
/* ============================================================
ĐỒNG BỘ CÁC TAB CÒN LẠI (Catalog · Dự án đã lưu · Hướng dẫn)
và các bảng bên trong thẻ tuyến cột — cùng ngôn ngữ với bảng tính:
không bo góc, không đổ bóng, tiêu đề bảng nền navy, nút phẳng.
============================================================ */
.catalog-tab-wrapper, .help-cards-wrapper{
border-radius:0 !important; box-shadow:none !important;
border:1px solid #9aa1a9 !important; padding:12px 14px !important; background:#fff !important; }
.catalog-tab-wrapper h2, .help-cards-title{ font-size:15.5px !important; color:#1e3f6b !important;
font-weight:700 !important; letter-spacing:0 !important; }
.catalog-filter button, #tab-projects button, #tab-projects label,
.help-cards-actions button{
border-radius:4px !important; border:1px solid #9fabb8 !important;
background:linear-gradient(#fff,#eef1f5) !important; color:#1a1a1a !important;
font-size:13.5px !important; font-weight:600 !important; padding:4px 12px !important;
box-shadow:none !important; }
.catalog-filter button:hover, #tab-projects button:hover{ background:linear-gradient(#fff,#e2e8ef) !important; }
.catalog-filter select{ border-radius:4px !important; }
/* v3.27: bảng cấu hình trong thẻ phân bố dòng — dùng lại nguyên ngôn ngữ bảng tính chính */
.sim-bt{ margin:10px 0 14px !important; }
.sim-bt .hint-mat{ font-weight:400; color:#414951; font-size:13px; }
.manual-mark{ color:#8a6d00; font-weight:600; }
/* v3.31: nhãn "tự điền" của ô Z_g — thay cho span đặt màu nội tuyến kèm emoji 📥 */
.auto-mark{ color:#0c7d3e; font-weight:600; }
/* ---------- v3.27: bảng KẾT QUẢ phân bố dòng — cùng ngôn ngữ với bảng nhập ----------
Trước đây bảng này giữ kiểu cũ (tiêu đề xanh nhạt chữ hoa, không kẻ dọc, khung bo góc)
nên nhìn như của phần mềm khác. Nay: tiêu đề navy, kẻ ô đủ, viền ngoài 1,5 px. */
.result-table-wrap{ border:1.5px solid #1e3f6b !important; border-radius:0 !important;
margin:12px 0 !important; }
.result-table{ border-collapse:collapse !important; font-size:14px !important; }
/* apple-style.css dùng `.result-table thead th` (đặc hiệu hơn `.result-table th`) nên phải
viết selector ít nhất ngang bằng, chỉ !important thôi không đủ để đè. */
.result-table thead{ background:#1e3f6b !important; }
.result-table thead th, .result-table th{ background:#1e3f6b !important; color:#fff !important;
font-weight:700 !important; font-size:13px !important; text-align:center !important;
padding:6px 7px !important; border:1px solid #17335a !important; border-radius:0 !important; }
.result-table tbody td, .result-table td{ padding:5px 7px !important;
border-top:1px solid #dde1e6 !important; border-bottom:1px solid #dde1e6 !important;
border-left:1px solid #aeb6c0 !important; border-right:1px solid #aeb6c0 !important; }
.result-table tbody tr:nth-child(even)>td{ background:#f7f9fc !important; }
.result-table tbody tr:hover>td{ background:#e9f1fb !important; }
.result-table tbody tr.fault>td{ background:#fff3cd !important; }
.result-table tbody tr.weak>td{ background:#fdf2d0 !important; }
.result-table .value{ color:#1e3f6b !important; font-variant-numeric:tabular-nums !important; }
/* bảng catalog + bảng cột: cùng kiểu tiêu đề navy, kẻ ô rõ */
.catalog-table, .tower-input-table{ border:1.5px solid #1e3f6b !important; border-collapse:collapse !important; }
.catalog-table th, .tower-input-table th{
background:#1e3f6b !important; color:#fff !important; font-weight:700 !important;
font-size:13px !important; text-align:center !important; padding:7px 8px !important;
border:1px solid #17335a !important; border-radius:0 !important; }
.catalog-table td, .tower-input-table td{
border-top:1px solid #dde1e6 !important; border-bottom:1px solid #dde1e6 !important;
border-left:1px solid #aeb6c0 !important; border-right:1px solid #aeb6c0 !important;
font-size:14px !important; }
.catalog-table tbody tr:nth-child(even)>td,
.tower-input-table tbody tr:nth-child(even)>td{ background:#f7f9fc !important; }
.catalog-table tbody tr:hover>td, .tower-input-table tbody tr:hover>td{ background:#e9f1fb !important; }
.catalog-mat-row td{ background:#dbe4f0 !important; color:#1e3f6b !important; font-weight:700 !important; }
/* v3.29 — BỐ CỤC CỘT BẢNG CATALOG.
Vấn đề: mã dây dài nhất "OPGW 125 · SCC 111" bị xuống hai hàng vì trình duyệt tự chia cột
theo nội dung, mà tiêu đề dài lại giành hết chỗ. Nay bề rộng do quyết định
(table-layout:fixed) và cột mã dây cấm ngắt dòng.
Cột "Nguồn" để trống width trong colgroup nên nó nhận toàn bộ phần dư — co giãn theo cửa sổ. */
.catalog-table{ table-layout:fixed !important; width:100% !important; }
.catalog-table th, .catalog-table td{ overflow:hidden; }
.catalog-table th{ white-space:normal !important; word-break:normal; hyphens:none; }
/* cột 1 = mã dây: MỘT HÀNG, canh trái cho dễ đọc danh sách */
.catalog-table th:first-child, .catalog-table td:first-child{
white-space:nowrap !important; text-align:left !important; padding-left:10px !important; }
/* cột nguồn: được phép xuống dòng vì là câu chữ */
.catalog-table td:nth-last-child(2){ white-space:normal !important; }
@media (max-width:1200px){
/* màn hẹp: cho cuộn ngang thay vì bóp chữ */
.catalog-table{ table-layout:auto !important; min-width:1120px !important; }
}
/* ---------- v3.27: bảng nhập cột tuyến — ô nhập LÀ ô bảng ----------
Cùng ngôn ngữ với bảng tính chính: không có hộp nào lồng trong ô đã kẻ.
Nền vàng nhạt = ô người dùng nhập · nền xám = ô phần mềm tự tính. */
.tower-input-table td{ padding:0 !important; height:29px !important; }
.tower-input-table th{ padding:6px !important; }
/* ô nhập: không viền, không nền riêng — gõ thẳng vào ô */
.tower-input-table td.c-in, .tower-input-table td.c-name{ background:#fffdf2 !important; }
.tower-input-table tbody tr:nth-child(even)>td.c-in,
.tower-input-table tbody tr:nth-child(even)>td.c-name{ background:#fffdf2 !important; }
.tower-input-table tbody tr:hover>td.c-in,
.tower-input-table tbody tr:hover>td.c-name{ background:#fff7d9 !important; }
.tower-input-table input{ width:100% !important; border:none !important; border-radius:0 !important;
background:transparent !important; box-shadow:none !important;
font:inherit !important; font-size:14px !important; color:#14406e !important;
font-weight:600 !important; padding:4px 7px !important; height:27px !important;
text-align:center !important; font-variant-numeric:tabular-nums !important; }
.tower-input-table input:focus{ outline:2px solid #1e3f6b !important; outline-offset:-2px !important;
background:#fff !important; box-shadow:none !important; }
.tower-input-table td.c-name input{ text-align:left !important; color:#1a1a1a !important;
font-weight:400 !important; }
/* ô phần mềm tự tính: chữ trần đậm trên nền xám */
.tower-input-table td.c-calc{ background:#eef1f5 !important; text-align:center !important; }
.tower-input-table tbody tr:nth-child(even)>td.c-calc{ background:#eef1f5 !important; }
.tower-input-table .calc{ display:block !important; padding:4px 7px !important;
font-weight:700 !important; color:#1e3f6b !important; font-size:14px !important;
font-variant-numeric:tabular-nums !important; }
.tower-input-table .none{ display:block !important; padding:4px 7px !important; color:#6a7482 !important; }
/* cột đầu vẫn nhập được vị trí → renderTowers gắn thêm class c-in, nền vàng như ô nhập */
.tower-input-table td.c-calc.c-in,
.tower-input-table tbody tr:nth-child(even)>td.c-calc.c-in{ background:#fffdf2 !important; }
/* cột số thứ tự + cột thao tác */
.tower-input-table td.stt{ text-align:center !important; font-weight:700 !important;
color:#1e3f6b !important; background:#f2f4f7 !important; font-size:13px !important; }
.tower-input-table tbody tr:nth-child(even)>td.stt{ background:#f2f4f7 !important; }
.tower-input-table td.c-act{ text-align:center !important; }
.tower-input-table .del-btn{ border-radius:3px !important; padding:1px 7px !important;
font-size:14.5px !important; line-height:16px !important; background:#b3261e !important;
border:1px solid #8f1d17 !important; }
.tower-input-table .del-btn:hover{ background:#8f1d17 !important; }
/* nút trong các thẻ bên dưới */
.btn-row .btn, .step-card .btn, .btn-small{
border-radius:4px !important; box-shadow:none !important;
border:1px solid #9fabb8 !important; background:linear-gradient(#fff,#eef1f5) !important;
color:#1a1a1a !important; font-size:13.5px !important; font-weight:600 !important;
padding:5px 13px !important; width:auto !important; }
.btn-row .btn:hover, .step-card .btn:hover{ background:linear-gradient(#fff,#e2e8ef) !important; }
.step-card .btn-primary{ border-color:#1e3f6b !important; color:#14406e !important; font-weight:700 !important; }
.input-mode-tab{ border-radius:0 !important; }
.help-card, .step-note, .alert, .field-hint, .formula{ border-radius:0 !important; }
.help-card>summary{ border-radius:0 !important; background:#eceef1 !important; }
/* ---------- v3.27: nhập dữ liệu cột bằng cách chọn file Excel ---------- */
.imp-guide{ border:1px solid #c3ccd6 !important; border-left:3px solid #1e3f6b !important;
background:#f7f9fc !important; padding:10px 14px !important; margin-bottom:10px !important;
font-size:14px !important; color:#243447 !important; line-height:1.65 !important; }
.imp-guide ol{ margin:6px 0 0 18px !important; padding:0 !important; }
.imp-guide li{ margin:2px 0 !important; }
.imp-note{ margin-top:8px !important; padding:7px 10px !important;
background:#fffdf2 !important; border:1px solid #e3d9a8 !important;
font-size:13.5px !important; color:#4a4327 !important; }
.dropzone{ border:1px dashed #9fabb8 !important; background:#fbfcfd !important;
padding:20px 14px !important; text-align:center !important; cursor:pointer !important;
transition:background .12s, border-color .12s !important; }
.dropzone:hover{ background:#f2f6fb !important; border-color:#1e3f6b !important; }
.dropzone.drag{ background:#e9f1fb !important; border-color:#1e3f6b !important;
border-style:solid !important; }
.dropzone .dz-main{ font-size:15px !important; font-weight:700 !important; color:#1e3f6b !important; }
.dropzone .dz-sub{ font-size:13.5px !important; color:#434e5c !important; margin-top:3px !important; }
.import-msg{ font-size:14px !important; line-height:1.6 !important; margin-top:8px !important; }
.import-msg:empty{ display:none !important; }
.import-msg.ok{ border:1px solid #b6d3ae !important; border-left:3px solid #2f7d32 !important;
background:#f2f8f0 !important; color:#22391f !important; padding:8px 12px !important; }
.import-msg.err{ border:1px solid #e0b4ae !important; border-left:3px solid #a52a1e !important;
background:#fdf4f3 !important; color:#5c1f18 !important; padding:8px 12px !important; }
#towerPreviewWrap{ margin-top:10px !important; border:1px solid #9fabb8 !important; }
.preview-head{ background:#1e3f6b !important; color:#fff !important; font-size:14px !important;
font-weight:600 !important; padding:6px 12px !important; }
.preview-scroll{ max-height:260px !important; overflow:auto !important; }
#towerPreviewWrap table.tw{ width:100% !important; border-collapse:collapse !important;
font-size:14px !important; }
#towerPreviewWrap table.tw th{ background:#dbe4f0 !important; color:#1e3f6b !important;
font-weight:700 !important; text-align:center !important; padding:5px 8px !important;
border:1px solid #c3ccd6 !important; position:sticky !important; top:0 !important; }
#towerPreviewWrap table.tw td{ padding:4px 8px !important; border:1px solid #dfe4ea !important;
border-left-color:#c3ccd6 !important; border-right-color:#c3ccd6 !important; }
#towerPreviewWrap table.tw td.center{ text-align:center !important; }
#towerPreviewWrap table.tw tbody tr:nth-child(even) td{ background:#f7f9fc !important; }
#towerPreviewWrap table.tw tbody tr:hover td{ background:#e9f1fb !important; }
.preview-skip{ border-top:1px solid #c3ccd6 !important; background:#fffdf2 !important;
padding:8px 12px !important; font-size:13.5px !important; color:#4a4327 !important; }
.preview-skip ul{ margin:4px 0 0 18px !important; padding:0 !important; }
.preview-act{ border-top:1px solid #c3ccd6 !important; background:#f2f4f7 !important;
padding:8px 12px !important; }
/* ---------- màn hình hẹp ---------- */
@media (max-width:820px){
.bt col.c-note{ width:0; }
.bt td.note, .bt td.f, .bt th:last-child{ display:none; }
.ab-std{ display:none; }
}
/* v3.27: dải ghi chú trong các thẻ — làm phẳng cho đồng bộ với bảng tính,
bỏ kiểu thẻ bo góc nền xám của bản cũ. */
.step-note, .sim-note{
background:#f4f7fa !important; border:1px solid #d5dde6 !important;
border-left:3px solid #1e3f6b !important; border-radius:0 !important;
box-shadow:none !important; padding:8px 12px !important;
font-size:13.5px !important; color:#2d343b !important; margin:10px 0 !important; }
/* ============================================================
v3.27 — CĂN CHỮ TRONG BẢNG
============================================================ */
/* Bỏ nút tăng/giảm của ô số trong mọi bảng.
Nút này chiếm chỗ bên phải nên chữ trong ô nhập bị đẩy lệch trái, không thẳng hàng
với các ô chữ trần ở những dòng dưới (thấy rõ ở ô "0" dòng đầu cột chiều dài cộng dồn). */
.bt input[type=number]::-webkit-outer-spin-button,
.bt input[type=number]::-webkit-inner-spin-button,
.tower-input-table input[type=number]::-webkit-outer-spin-button,
.tower-input-table input[type=number]::-webkit-inner-spin-button{
-webkit-appearance:none !important; appearance:none !important; margin:0 !important; }
.bt input[type=number], .tower-input-table input[type=number]{
-moz-appearance:textfield !important; }
/* Bảng KẾT QUẢ phân bố dòng: căn giữa mọi cột, riêng cột 2 (Tên cột) căn trái */
.result-table tbody td{ text-align:center !important; }
.result-table tbody td:nth-child(2){ text-align:left !important; }
.result-table tbody td[colspan]{ text-align:left !important; }
/* Bảng NHẬP cột tuyến: căn giữa từ cột 3 trở đi; cột 1 STT giữa, cột 2 tên cột trái */
.tower-input-table tbody td:nth-child(n+3),
.tower-input-table tbody td:nth-child(n+3) input,
.tower-input-table tbody td:nth-child(n+3) .calc,
.tower-input-table tbody td:nth-child(n+3) .none{ text-align:center !important; }
/* v3.27 — nút LƯU KẾT QUẢ và trạng thái khóa của nút xuất báo cáo */
.bt tr.act .b.save{ background:#0f766e !important; border-color:#0b5c56 !important;
color:#fff !important; font-weight:700 !important; }
.bt tr.act .b.save:hover{ background:#0b5c56 !important; }
.bt tr.act .b.save.saved,
.btn-save-result.saved{ background:#e6f4ea !important; border:1px solid #86c79b !important;
color:#1d5c23 !important; cursor:default !important; }
.btn-save-result:hover{ background:#0b5c56 !important; }
/* nút xuất khi chưa chốt kết quả: mờ và không bấm được */
.bt tr.act .b[data-exp]:disabled,
.btn-export:disabled{ opacity:.45 !important; cursor:not-allowed !important;
filter:grayscale(.6) !important; }
/* dòng chú thích trạng thái: thêm sắc thái "xong" */
.calc-hint.ok, .sim-hint.ok{ color:#1d5c23 !important; font-weight:600 !important; }
/* ============================================================
PA2 — CHỐT CHẶN DIỆN MẠO (v3.34, anh Nam duyệt qua bản xem trước 01/08/2026)
apple-style.css còn 266 chỗ !important dựng kiểu thẻ web. sheet.css đã đè hầu
hết, nhưng .card/.result-card — tức TOÀN BỘ mục VII — chưa có luật nào đè, vẫn
bo góc 18px + hai lớp đổ bóng. Đây là chốt chặn cuối cùng: mọi lớp vỏ đều phẳng.
⚠ KHÔNG đụng overflow — .chart-wrap phải giữ overflow-x:auto của components.css,
không thì biểu đồ rộng tràn ngang.
⚠ KHÔNG đụng đệm và cỡ chữ — đó là phương án 3, anh Nam đã không chọn.
============================================================ */
.card, .result-card, .chart-wrap, .tag,
.help-card, .input-mode-tab, .imp-note{
border-radius:0 !important; box-shadow:none !important; }
/* mất đổ bóng thì thẻ trơ ra không có mép — kẻ viền như khung Catalog đã duyệt */
.card, .result-card{ border:1px solid #9aa1a9 !important; }
/* nhãn viên thuốc thành ô vuông kẻ viền (quy tắc #3).
Chỉ đổi trên MÀN HÌNH — hồ sơ Word gọi stripTags() nên không dính. */
.tag{ border:1px solid #a8b2bd !important; }
.tag.green{ border-color:#86c79b !important; }
.tag.yellow{ border-color:#d9bd6a !important; }
.tag.red{ border-color:#d99a9a !important; }
/* bỏ nhãn chữ hoa giãn cách (quy tắc #3) */
.section-title, .step-cards-title, .help-cards-title{
text-transform:none !important; letter-spacing:0 !important; }
/* xám #6e6e73 không thuộc bốn màu quy ước → navy như mọi tiêu đề khác */
.section-title{ color:#1e3f6b !important; }
/* ---- PA2 đợt 2 (anh Nam duyệt qua bản so sánh 01/08/2026) ----
Quét toàn trang sau đợt 1 còn 11 chỗ bo góc mà danh sách đợt 1 không phủ.
⚠ Nặng hơn bo góc: .step-inline-result dùng linear-gradient BA BIẾN THỂ —
đúng thứ quy tắc #3 cấm. Thay bằng nền phẳng lấy từ CHÍNH bộ màu trạng thái
đã duyệt ở trên trong file này (.bt tr.r-ok / .bt tr.r-no / vàng #fdf3d4),
KHÔNG đặt màu mới.
⚠ .result-summary phải có !important — apple-style.css đặt
background:#f5f5f7 !important + border-radius:12px !important, sửa nội tuyến
ở đợt 1 bị đè chết. */
.result-summary, .step-inline-result,
.step-cards-wrapper, .step-card-body, .step-card, .fault-selector{
border-radius:0 !important; box-shadow:none !important; }
.result-summary{ background:#eef1f5 !important; }
.step-inline-result{
background:#dcefd8 !important; border-left:3px solid #1d5c23 !important; }
.step-inline-result.warning{
background:#fdf3d4 !important; border-left-color:#1e3f6b !important; }
.step-inline-result.error{
background:#fbdcd9 !important; border-left-color:#8e1d17 !important; }