
.pgpi-badge{display:inline-block;margin-left:8px;background:#0ea5e9;color:#fff;border-radius:999px;padding:2px 10px;font-size:12px;vertical-align:middle}
.pgpi-tabs{display:flex;gap:8px;margin:10px 0 14px}
.pgpi-tabs button{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:8px 14px;cursor:pointer;box-shadow:0 1px 1px rgba(0,0,0,.04)}
.pgpi-tabs button.active{border-color:#0ea5e9;box-shadow:0 0 0 2px rgba(14,165,233,.15) inset}
.pgpi-card{background:#fff;border:1px solid #ebedf0;border-radius:14px;padding:12px;box-shadow:0 1px 3px rgba(0,0,0,.05);margin-bottom:8px}
.pgpi-inline{display:inline-flex;gap:10px;align-items:center;flex-wrap:wrap}
.pgpi-wrap input[type="text"], .pgpi-wrap input[type="number"], .pgpi-wrap select, .pgpi-wrap textarea{
  border:1px solid #e5e7eb;border-radius:10px;padding:8px 10px;box-shadow:none;outline:none;transition:border .15s ease;background:#fff
}
.pgpi-wrap textarea{min-height:110px}
.pgpi-table-edit{width:100%;border-collapse:separate;border-spacing:0 6px}
.pgpi-table-edit thead th{font-weight:600;color:#111827;background:#f8fafc;border:none;padding:10px}
.pgpi-table-edit tbody td{background:#fff;border:1px solid #eef2f7;border-left:0;border-right:0;padding:6px 8px}
.pgpi-table-edit tbody tr{box-shadow:0 1px 0 rgba(0,0,0,.02)}
.pgpi-table-edit tbody tr:hover td{background:#fcfcfd}
.pgpi-table-edit td:first-child, .pgpi-table-edit th:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px}
.pgpi-table-edit td:last-child, .pgpi-table-edit th:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px}
.pgpi-status{color:#059669}
.pgpi-muted{color:#64748b; font-size:12px; padding:2px 6px; background:#f8fafc; border-radius:6px}
.pgpi-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#111827;color:#fff;padding:10px 14px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;box-shadow:0 10px 30px rgba(0,0,0,.18);z-index:10000}
.pgpi-toast.ok{background:#16a34a}
.pgpi-toast.err{background:#dc2626}
.pgpi-toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}

.pgpi-suggest-box{position:absolute; left:0; right:0; background:#fff; border:1px solid #e5e7eb; border-radius:10px; margin-top:4px; box-shadow:0 10px 30px rgba(0,0,0,.08); z-index:9999; max-height:260px; overflow:auto}
.pgpi-suggest-item{padding:8px 10px; cursor:pointer; font-size:13px}
.pgpi-suggest-item:hover{background:#f3f4f6}

/* v1.8.8 layout fixes */
.pgpi-scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%}
.pgpi-table-edit{min-width:1000px; border-collapse:separate; border-spacing:0}
.pgpi-table-edit thead th{position:sticky; top:0; z-index:1}
.pgpi-card{overflow:hidden}
.pgpi-inline .button{border-radius:999px; padding:8px 16px}
/* keep inputs compact so table doesn't overflow */
.pgpi-table-edit input{width:100%; min-width:120px}
.pgpi-table-edit td:nth-child(1) input{min-width:240px} /* Tên vật tư */
.pgpi-table-edit td:nth-child(2) input{min-width:140px} /* Mã SKU */
.pgpi-table-edit td:nth-child(3) input,
.pgpi-table-edit td:nth-child(4) input{min-width:110px; text-align:right} /* số lượng */
.pgpi-table-edit td:nth-child(5) input{min-width:140px} /* Vị trí */
.pgpi-table-edit td:nth-child(6) input{min-width:160px} /* Ghi chú */

/* ===== v1.9.0 Segmented Pro UI ===== */
:root{ --pgpi-brand:#0ea5e9; --pgpi-ink:#0f172a; --pgpi-sub:#64748b; --pgpi-bg:#f8fafc; --pgpi-card:#ffffff; }
.pgpi-wrap{max-width:1200px}
.pgpi-steps{display:flex;gap:10px;list-style:none;padding:0;margin:8px 0 14px}
.pgpi-steps li{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:6px 12px;cursor:pointer}
.pgpi-steps li span{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;background:var(--pgpi-brand);color:#fff;font-weight:600}
.pgpi-steps li.active{border-color:var(--pgpi-brand);box-shadow:0 0 0 2px rgba(14,165,233,.12) inset}
.pgpi-section{background:var(--pgpi-card);border:1px solid #ebedf0;border-radius:16px;padding:12px;margin:14px 0;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.pgpi-section-head{display:flex;align-items:center;gap:12px;margin-bottom:8px;position:relative}
.pgpi-stepchip{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;background:var(--pgpi-brand);color:#fff;font-weight:700}
.pgpi-section-head h3{margin:0;color:var(--pgpi-ink)}
.pgpi-section-head p{margin:0;color:var(--pgpi-sub);font-size:12px}
.pgpi-card{border-radius:14px}
.pgpi-inline label{font-size:12px;color:var(--pgpi-sub)}
/* Inputs grid look */
.pgpi-inline input, .pgpi-inline select{background:#fff}
/* Buttons: round pills */
.pgpi-wrap .button{border-radius:999px;padding:8px 16px}
/* Subtle section background to separate blocks */
.pgpi-section-pcb{background:linear-gradient(180deg,#ffffff 0%,#ffffff 60%,#f9fbff 100%)}
.pgpi-section-bom{background:linear-gradient(180deg,#ffffff 0%,#ffffff 60%,#f9fffb 100%)}
.pgpi-section-sx{background:linear-gradient(180deg,#ffffff 0%,#ffffff 60%,#fff9ff 100%)}

