/* Bản 1.18.0 — giao diện các trang bên trong theo bản mẫu anh Việt duyệt 30/10/2026
   (thẻ cán bộ, thẻ công trình, dải giai đoạn, trang lĩnh vực, khung nhập trượt, thanh nút nổi trên điện thoại).
   Giữ nguyên thanh bên đỏ, băng chào đỏ, Bảng điều hành và bảng màu hiện có: chỉ dùng biến màu sẵn có (--dau*, --tt-*, --the, --vien). */

/* ---- chip lọc, ô tìm dạng viên thuốc ---- */
.v18-dau{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.v18-dau b.v18-tieu-de{font-size:17px}
.v18-tim{flex:1;min-width:200px;max-width:420px;border-radius:999px!important}
.v18-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.v18-chip{border:1px solid var(--vien);border-radius:999px;padding:5px 12px;font-size:13px;background:var(--the);color:var(--chu);cursor:pointer}
.v18-chip.on{background:var(--dau2,#A61B1B);color:#fff;border-color:var(--dau2,#A61B1B)}

/* ---- B1: lưới thẻ cán bộ ---- */
.v18-luoi3{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:14px}
.v18-the{border:1px solid var(--vien);border-radius:14px;overflow:hidden;background:var(--the);box-shadow:var(--bong)}
.v18-dai{min-height:46px;padding:10px 14px;color:#fff;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:linear-gradient(90deg,var(--mau-lv,#6B7280),color-mix(in srgb,var(--mau-lv,#6B7280) 70%,#fff))}
.v18-nhan{background:rgba(255,255,255,.25);border-radius:999px;padding:2px 10px;font-size:12px;white-space:nowrap}
.v18-than{padding:12px 14px}
.v18-ten{font-weight:700;font-size:15px}
.v18-phu{color:var(--mo);font-size:12px}
.v18-o3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0;border-top:1px solid var(--vien);padding-top:10px}
.v18-o3 small{display:block;color:var(--mo);font-size:11px}.v18-o3 b{font-size:16px}
.v18-o3 .cham b,.v18-so-cham{color:var(--tt-cham)}
.v18-nut2{display:flex;gap:6px}
.v18-nut{display:block;flex:1;text-align:center;background:var(--tt-cham-nhat);color:var(--dau2,#A61B1B);font-weight:700;border-radius:10px;padding:8px;border:0;cursor:pointer;font:inherit;font-weight:700}
.v18-nut.chinh{background:var(--dau2,#A61B1B);color:#fff}

/* ---- B2: thẻ công trình 2 cột ---- */
.v18-luoi2{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr));gap:12px}
.v18-dong{min-width:0;display:flex;gap:12px;align-items:center;border:1px solid var(--vien);border-left:5px solid var(--mau-nguon,#2563EB);border-radius:12px;
  padding:10px 12px;background:var(--the);cursor:pointer;position:relative}
.v18-dong:hover{background:var(--hover)}
.v18-dong .ttx{flex:1;min-width:0}
.v18-dong .v18-ten{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v18-thanh{height:6px;background:var(--vien-nhat);border-radius:6px;margin-top:6px;overflow:hidden}.v18-thanh i{display:block;height:100%}
.v18-vong{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;flex:none}
.v18-dong .v18-nut-nho{display:none;gap:6px;margin-top:6px}
.v18-dong:hover .v18-nut-nho,.v18-dong:focus-within .v18-nut-nho{display:flex}
.v18-nutnho{border:1px solid var(--dau2,#A61B1B);color:var(--dau2,#A61B1B);border-radius:8px;padding:3px 8px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--the);cursor:pointer}
.v18-tong{font-weight:700}
.c-nen-dat{background:var(--tt-dat)}.c-nen-dang{background:var(--tt-dang)}.c-nen-cham{background:var(--tt-cham)}.c-nen-chua{background:var(--tt-chua)}

/* ---- B3: dải 5 giai đoạn ---- */
.v18-buoc{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0 0 14px}
.v18-buoc button{border:1px solid var(--vien);border-radius:12px;padding:12px;background:var(--the);position:relative;text-align:left;cursor:pointer;font:inherit;color:var(--chu)}
.v18-buoc button.on{border-color:var(--dau2,#A61B1B);box-shadow:0 0 0 2px var(--tt-cham-nhat)}
.v18-buoc b{font-size:24px;display:block}.v18-buoc small{color:var(--mo);display:block;padding-right:28px}
.v18-buoc .so{position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;background:var(--dau2,#A61B1B);color:#fff;font-size:12px;display:grid;place-items:center}

/* ---- B4: trang lĩnh vực ---- */
.v18-hai{display:grid;grid-template-columns:260px minmax(0,1fr);gap:14px;align-items:start}
.v18-hai>*{min-width:0}
.v18-dm{border:1px solid var(--vien);border-radius:12px;padding:8px;background:var(--the);position:sticky;top:72px}
.v18-dm button{display:flex;width:100%;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:8px;font:inherit;font-size:13px;border:0;background:none;color:var(--chu);cursor:pointer;text-align:left}
.v18-dm button.on{background:var(--tt-cham-nhat);color:var(--dau2,#A61B1B);font-weight:700}
.v18-dm em{font-style:normal;background:var(--vien-nhat);border-radius:999px;padding:0 8px;font-size:12px;align-self:center}
.v18-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.v18-kpi div{border:1px solid var(--vien);border-radius:12px;padding:12px;background:var(--the)}
.v18-kpi b{font-size:24px;display:block}.v18-kpi small{color:var(--mo);font-size:12px;display:block}
.v18-len{color:var(--tt-dat);font-size:12px;font-weight:600}.v18-xuong{color:var(--tt-cham);font-size:12px;font-weight:600}.v18-bang-nhau{color:var(--mo);font-size:12px}
.v18-o-vang{background:#FFF7CC!important;border:1px solid #E6C84A!important;border-radius:6px;padding:4px 8px;min-width:90px;width:110px;text-align:right;font:inherit;color:#1F2937}
.v18-o-xam{background:var(--vien-nhat);border-radius:6px;padding:4px 8px;display:inline-block;min-width:60px;text-align:right}
.v18-o-vang.da-luu{box-shadow:0 0 0 2px var(--tt-dat-vien)}.v18-o-vang.loi{box-shadow:0 0 0 2px var(--tt-cham)}
.v18-ho-so{margin-top:16px}
.v18-ho-so ul{list-style:none;margin:0;padding:0}
.v18-ho-so li{display:flex;gap:8px;justify-content:space-between;border-bottom:1px solid var(--vien-nhat);padding:6px 2px;font-size:13px}
.v18-ho-so li a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v18-ho-so h3{font-size:14px;margin:12px 0 4px}

/* ---- B5: khung nhập trượt bên phải ---- */
.v18-khung-nhap{position:fixed;top:56px;right:0;bottom:0;width:400px;max-width:100%;background:var(--the);border-left:1px solid var(--vien);
  box-shadow:-6px 0 18px rgba(0,0,0,.12);z-index:60;display:flex;flex-direction:column;transform:translateX(105%);transition:transform .18s ease}
.v18-khung-nhap.mo{transform:none}
.v18-khung-nhap .v18-kn-dau{background:linear-gradient(90deg,var(--dau1,#7F1414),var(--dau2,#A61B1B));color:#fff;padding:12px 14px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:8px}
.v18-khung-nhap .v18-kn-dau button{background:rgba(255,255,255,.2);color:#fff;border:0;border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:16px}
.v18-kn-than{padding:14px;overflow:auto;flex:1}
.v18-kn-than label{display:block;font-size:12px;color:var(--mo);margin:10px 0 4px}
.v18-kn-than .o{width:100%}
.v18-kn-than .o.vang{background:#FFF7CC;border-color:#E6C84A;color:#1F2937}
.v18-kn-than .o.xam{background:var(--vien-nhat);border-color:var(--vien);color:var(--mo)}
.v18-keo{border:2px dashed #E6C84A;border-radius:10px;padding:12px;text-align:center;color:var(--mo);font-size:12px;background:#FFFDF3;cursor:pointer}
.v18-kn-chan{padding:12px 14px;border-top:1px solid var(--vien);display:flex;gap:8px;justify-content:flex-end}
.v18-anh-nho{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.v18-anh-nho img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--vien)}

/* ---- B6: thanh 5 nút nổi ở đáy (chỉ điện thoại) ---- */
.v18-noi{display:none}
@media (max-width:760px){
  .v18-noi{display:flex;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));background:var(--the);border-radius:999px;
    box-shadow:0 4px 16px rgba(0,0,0,.18);justify-content:space-around;padding:6px 4px;z-index:55;border:1px solid var(--vien)}
  .v18-noi a,.v18-noi button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--mo);text-decoration:none;background:none;border:0;font-family:inherit;padding:2px 8px;border-radius:999px;cursor:pointer}
  .v18-noi .bt{width:20px;height:20px}
  .v18-noi .on{color:var(--dau2,#A61B1B);font-weight:700;background:var(--tt-cham-nhat)}
  body.co-noi main{padding-bottom:90px}
  body.co-noi .gop-y-nut,body.co-noi #gop-y-nut{bottom:84px}
  .v18-hai{grid-template-columns:minmax(0,1fr)}.v18-dm{position:static;max-height:240px;overflow:auto}
  .v18-dm button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .v18-kpi{grid-template-columns:repeat(2,1fr)}.v18-buoc{grid-template-columns:repeat(2,1fr)}.v18-luoi2{grid-template-columns:1fr}
  .v18-dong .v18-nut-nho{display:flex}
  .v18-khung-nhap{top:0;width:100%}
}