/* Goku CRM V5.1 · contracts – bước Kế toán, link báo giá, hồ sơ hoàn thiện, phát sinh nghiệm thu, % hoa hồng */
:root{--v51c-0:#315be8;--v51c-0b:#eef3ff;--v51c-1:#e8590c;--v51c-1b:#fff1e6;--v51c-2:#b7791f;--v51c-2b:#fff8db;--v51c-3:#7048e8;--v51c-3b:#f1edff;--v51c-4:#16a34a;--v51c-4b:#e8f8ee;--v51c-line:#e3e8f2;--v51c-mut:#6b778c}
.v51c-flow{margin:16px 0 6px;display:flex;flex-direction:column;gap:12px}
.v51c-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--v51c-mut)}
.v51c-muted{color:var(--v51c-mut);font-size:13px;margin:6px 0 0}
.v51c-warn{display:block;margin-top:6px;color:#b45309;font-size:13px;font-weight:600}
.v51c-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
/* link báo giá */
.v51c-quote{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid #d6e2ff;background:linear-gradient(90deg,#f4f7ff,#fff);border-radius:14px}
.v51c-quote>div:first-child{min-width:0;display:flex;flex-direction:column;gap:2px}
.v51c-quote b{font-size:15px;overflow-wrap:anywhere}.v51c-quote small{color:var(--v51c-mut)}
.v51c-chips{display:flex;flex-wrap:wrap;gap:8px}
.v51c-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #cfdaf5;background:#fff;color:#1f3d9c;border-radius:999px;padding:7px 12px;font:600 13px/1.2 inherit;cursor:pointer;text-decoration:none;white-space:nowrap}
.v51c-chip:hover{border-color:var(--v51c-0)}.v51c-chip.pri{background:var(--v51c-0);border-color:var(--v51c-0);color:#fff}
.v51c-qlink{font-weight:600;color:var(--v51c-0)}
/* thanh bước */
.v51c-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;counter-reset:s}
.v51c-steps li{position:relative;display:flex;flex-direction:column;gap:2px;padding:10px 10px 9px;border-radius:12px;border:1px solid var(--v51c-line);background:#fafbfe;min-width:0}
.v51c-steps li b{font-size:13px;line-height:1.25}.v51c-steps li small{font-size:11px;color:var(--v51c-mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v51c-dot{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:12px;font-weight:700;background:#e9edf5;color:#5b6577;margin-bottom:4px}
.v51c-steps li.done{background:#fff}.v51c-steps li.done .v51c-dot{background:#dcf5e5;color:var(--v51c-4)}
.v51c-steps li.cur{box-shadow:0 0 0 2px var(--c) inset;background:var(--cb)}
.v51c-steps li.cur .v51c-dot{background:var(--c);color:#fff}.v51c-steps li.cur small{color:var(--c);font-weight:600}
.v51c-steps li.v51c-s0{--c:var(--v51c-0);--cb:var(--v51c-0b)}.v51c-steps li.v51c-s1{--c:var(--v51c-1);--cb:var(--v51c-1b)}.v51c-steps li.v51c-s2{--c:var(--v51c-2);--cb:var(--v51c-2b)}.v51c-steps li.v51c-s3{--c:var(--v51c-3);--cb:var(--v51c-3b)}.v51c-steps li.v51c-s4{--c:var(--v51c-4);--cb:var(--v51c-4b)}
/* bước hiện tại */
.v51c-now{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:14px;border-left:5px solid var(--v51c-0);background:var(--v51c-0b)}
.v51c-now p{margin:4px 0 2px;font-size:14px;color:#1d2840}.v51c-now small{color:var(--v51c-mut)}
.v51c-now.v51c-s1{border-color:var(--v51c-1);background:var(--v51c-1b)}.v51c-now.v51c-s2{border-color:var(--v51c-2);background:var(--v51c-2b)}.v51c-now.v51c-s3{border-color:var(--v51c-3);background:var(--v51c-3b)}.v51c-now.v51c-s4{border-color:var(--v51c-4);background:var(--v51c-4b)}
.v51c-acts{display:flex;flex-wrap:wrap;gap:8px}
.v51c-btn{border:0;border-radius:10px;padding:9px 14px;font:700 13px/1.2 inherit;cursor:pointer;color:#fff;background:var(--v51c-0);white-space:nowrap}
.v51c-btn.done{background:var(--v51c-4)}.v51c-btn.back{background:#fff;color:#a33a1a;border:1px solid #f1c7b8}
.v51c-btn:disabled{opacity:.45;cursor:not-allowed}
/* thẻ hồ sơ / tệp */
.v51c-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.v51c-card,.v51c-com{border:1px solid var(--v51c-line);border-radius:14px;padding:12px 14px;background:#fff;min-width:0}
.v51c-card.ok{border-color:#bfe8cf;background:linear-gradient(180deg,#f3fcf6,#fff)}
.v51c-cardhead{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.v51c-check{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px}
.v51c-check label{display:flex;gap:8px;align-items:flex-start;cursor:pointer}.v51c-check input{margin-top:2px;width:16px;height:16px;accent-color:var(--v51c-4)}
.v51c-pill{display:inline-block;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;background:#eef1f6;color:#4b5565;white-space:nowrap}
.v51c-pill.ok{background:#dcf5e5;color:#11803a}.v51c-pill.wait{background:#fff3d6;color:#9a6b00}.v51c-pill.x{background:#f3f4f6;color:#9ca3af}
.v51c-pill.v51c-s0{background:var(--v51c-0b);color:var(--v51c-0)}.v51c-pill.v51c-s1{background:var(--v51c-1b);color:var(--v51c-1)}.v51c-pill.v51c-s2{background:var(--v51c-2b);color:var(--v51c-2)}.v51c-pill.v51c-s3{background:var(--v51c-3b);color:var(--v51c-3)}.v51c-pill.v51c-s4{background:var(--v51c-4b);color:var(--v51c-4)}
.v51c-pill.src-director{background:#f1edff;color:#5b3cc4}.v51c-pill.src-policy{background:#eef3ff;color:#2a4fc7}
.v51c-mini{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;color:#11803a}
.v51c-flist{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.v51c-flist li{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"k n x" "k s x";column-gap:8px;align-items:center;padding:7px 9px;border-radius:10px;background:#f7f9fc;font-size:13px}
.v51c-flist li a,.v51c-flist li>span:not(.v51c-kind){grid-area:n;font-weight:600;overflow-wrap:anywhere}.v51c-flist li small{grid-area:s;color:var(--v51c-mut);font-size:11px}.v51c-flist li button{grid-area:x}
.v51c-kind{grid-area:k;font-size:11px;font-weight:700;border-radius:8px;padding:3px 7px;background:#eef1f6;color:#4b5565;white-space:nowrap}
.v51c-flist li.k-draft .v51c-kind{background:var(--v51c-1b);color:var(--v51c-1)}.v51c-flist li.k-official .v51c-kind{background:var(--v51c-4b);color:var(--v51c-4)}
.v51c-upl{cursor:pointer}
.v51c-log{margin-top:2px}.v51c-log summary{cursor:pointer;font-weight:600;color:#2a4fc7;font-size:13px}
.v51c-log ul{list-style:none;margin:8px 0 0;padding:0 0 0 10px;border-left:2px solid var(--v51c-line);display:flex;flex-direction:column;gap:6px;font-size:13px}
.v51c-log li{display:flex;flex-direction:column}.v51c-log li small{color:var(--v51c-mut);font-size:11px}
/* phát sinh nghiệm thu */
.v51c-acc{margin:16px 0 4px;padding:14px;border:1px solid #f0dcc6;border-radius:16px;background:linear-gradient(180deg,#fffaf3,#fff)}
.v51c-accsum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0}
.v51c-accsum>div{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:12px;background:#fff;border:1px solid var(--v51c-line);min-width:0}
.v51c-accsum span{font-size:12px;color:var(--v51c-mut)}.v51c-accsum b{font-size:15px}.v51c-accsum small{font-size:11px;color:var(--v51c-mut)}
.v51c-accsum .inc b{color:#11803a}.v51c-accsum .dec b{color:#c2410c}.v51c-accsum .res{border-color:#bcd0ff;background:#f4f7ff}.v51c-accsum .res b{color:#1f3d9c}
.v51c-arows{display:flex;flex-direction:column;gap:8px}
.v51c-arow{display:grid;grid-template-columns:minmax(0,2.2fr) 110px 150px 140px minmax(0,1.4fr) 36px;gap:8px;align-items:end;padding:9px 10px;border-radius:12px;background:#fff;border:1px solid var(--v51c-line);border-left:4px solid #22c55e}
.v51c-arow.dec{border-left-color:#f97316}
.v51c-arow label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--v51c-mut);min-width:0}
.v51c-arow .field{width:100%;min-width:0}
.v51c-arow .m{grid-column:1/-1;font-size:11px;color:var(--v51c-mut)}
/* % hoa hồng */
.v51c-com{margin-top:10px;background:#fbfaff;border-color:#e2dbff}
.v51c-comed label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--v51c-mut)}.v51c-comed .field{width:150px}
/* thanh lọc trên danh sách */
.v51c-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.v51c-fchips{display:flex;flex-wrap:wrap;gap:6px}
.v51c-fchip{border:1px solid var(--v51c-line);background:#fff;border-radius:999px;padding:6px 11px;font:600 12px/1.2 inherit;cursor:pointer;color:#344054}
.v51c-fchip b{margin-left:2px;color:#111827}
.v51c-fchip.v51c-s0.on{background:var(--v51c-0);border-color:var(--v51c-0);color:#fff}.v51c-fchip.v51c-s1.on{background:var(--v51c-1);border-color:var(--v51c-1);color:#fff}.v51c-fchip.v51c-s2.on{background:var(--v51c-2);border-color:var(--v51c-2);color:#fff}.v51c-fchip.v51c-s3.on{background:var(--v51c-3);border-color:var(--v51c-3);color:#fff}.v51c-fchip.v51c-s4.on{background:var(--v51c-4);border-color:var(--v51c-4);color:#fff}.v51c-fchip.warn.on{background:#b45309;border-color:#b45309;color:#fff}
.v51c-fchip.on b{color:#fff}
.v51c-fchip::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:currentColor;opacity:.75}
.v51c-fchip.v51c-s0{color:var(--v51c-0)}.v51c-fchip.v51c-s1{color:var(--v51c-1)}.v51c-fchip.v51c-s2{color:var(--v51c-2)}.v51c-fchip.v51c-s3{color:var(--v51c-3)}.v51c-fchip.v51c-s4{color:var(--v51c-4)}.v51c-fchip.warn{color:#b45309}
.v51c-barinfo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px}
.v51c-turn{font-weight:700;color:#c2410c}
.v51c-cfg{display:inline-flex;align-items:center;gap:6px;color:#344054}.v51c-cfg .field{width:64px}
@media (max-width:1100px){.v51c-arow{grid-template-columns:minmax(0,1fr) 110px 150px;}.v51c-arow .d,.v51c-arow .n{grid-column:span 1}.v51c-arow .n{grid-column:span 2}}
@media (max-width:820px){.v51c-grid2{grid-template-columns:1fr}.v51c-accsum{grid-template-columns:1fr 1fr}
  .v51c-steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}.v51c-steps li{flex:0 0 132px;scroll-snap-align:start}}
@media (max-width:560px){
  .v51c-arow{grid-template-columns:1fr 1fr;align-items:stretch}.v51c-arow .c,.v51c-arow .n{grid-column:1/-1}.v51c-arow>button{grid-column:1/-1;justify-self:end}
  .v51c-now{flex-direction:column;align-items:stretch}.v51c-acts{flex-direction:column}.v51c-btn{width:100%}
  .v51c-quote{flex-direction:column;align-items:stretch}.v51c-chip{white-space:normal}
  .v51c-comed .field{width:100%}.v51c-comed label{flex:1 1 40%}
  .v51c-bar{flex-direction:column;align-items:stretch}.v51c-fchips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.v51c-fchip{flex:0 0 auto}
}