.customer-page{background-color:var(--bg-soft-blue,#f0fdfa);width:100%;font-family:var(--font-sans,"Be Vietnam Pro", sans-serif);box-sizing:border-box;padding:4px 8px 32px}.customer-topbar{border-bottom:1px solid var(--blue-border,#99f6e4);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:16px;display:flex}.customer-topbar-title{align-items:center;gap:12px;display:flex}.customer-topbar-icon{border-radius:var(--radius-sm,14px);background:var(--blue-primary,#0f766e);color:#fff;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex;box-shadow:0 4px 12px #0f766e40}.customer-topbar-text h1{color:var(--text-main,#111827);letter-spacing:-.02em;align-items:center;gap:10px;margin:0;font-size:1.45rem;font-weight:800;display:flex}.customer-topbar-text p{color:var(--text-muted,#4b5563);margin:4px 0 0;font-size:.8rem;font-weight:500}.btn-primary-pill{background:var(--blue-primary,#0f766e);color:#fff;cursor:pointer;border:1px solid var(--blue-primary,#0f766e);white-space:nowrap;box-sizing:border-box;border-radius:6px;align-items:center;gap:6px;height:34px;padding:0 16px;font-size:13px;font-weight:500;text-decoration:none;transition:all .15s;display:inline-flex;box-shadow:0 1px 2px #0f766e33}.btn-primary-pill:hover{background:var(--blue-hover,#115e59);border-color:var(--blue-hover,#115e59)}.btn-secondary-pill{color:var(--text-muted,#4b5563);border-radius:var(--radius-pill,9999px);cursor:pointer;border:1px solid var(--border-subtle,#e5edf8);white-space:nowrap;background:#fff;align-items:center;gap:6px;padding:8px 16px;font-size:.82rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-secondary-pill:hover{background:var(--blue-subtle,#ccfbf1);color:var(--blue-primary,#0f766e);border-color:var(--blue-border,#99f6e4)}.btn-danger-pill{color:#fff;border-radius:var(--radius-pill,9999px);cursor:pointer;background:#dc2626;border:none;align-items:center;gap:6px;padding:8px 16px;font-size:.82rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-danger-pill:hover{background:#b91c1c}.action-icon-btn{border-radius:var(--radius-pill,9999px);color:#64748b;cursor:pointer;background:#fff;border:1px solid #cbd5e1;justify-content:center;align-items:center;width:32px;height:32px;transition:all .15s;display:inline-flex}.action-icon-btn:hover{background:var(--blue-subtle,#ccfbf1);color:var(--blue-primary,#0f766e);border-color:var(--blue-border,#99f6e4)}.action-icon-btn.collect-btn{color:#059669;background:#ecfdf5;border-color:#a7f3d0}.action-icon-btn.collect-btn:hover{color:#fff;background:#059669}.customer-kpi-grid{grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px;display:grid}@media (width<=1024px){.customer-kpi-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=640px){.customer-kpi-grid{grid-template-columns:1fr}}.customer-kpi-card{border-radius:var(--radius-lg,24px);border:1px solid var(--border-subtle,#e5edf8);box-shadow:var(--shadow-card,0 10px 30px #0f766e0f);background:#fff;flex-direction:column;justify-content:space-between;padding:20px;transition:transform .2s,box-shadow .2s;display:flex;position:relative}.customer-kpi-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px #0f766e1a}.customer-kpi-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.customer-kpi-title{color:var(--text-muted,#4b5563);text-transform:uppercase;letter-spacing:.03em;font-size:.78rem;font-weight:600}.customer-kpi-icon{border-radius:var(--radius-sm,14px);justify-content:center;align-items:center;width:40px;height:40px;display:flex}.kpi-icon-teal{background:var(--blue-subtle,#ccfbf1);color:var(--blue-primary,#0f766e)}.kpi-icon-amber{color:#d97706;background:#fef3c7}.kpi-icon-red{color:#dc2626;background:#fee2e2}.kpi-icon-green{color:#059669;background:#ecfdf5}.customer-kpi-value{color:var(--text-main,#111827);letter-spacing:-.02em;font-size:1.55rem;font-weight:800;line-height:1.2}.customer-kpi-subtext{color:var(--text-faint,#9ca3af);margin-top:6px;font-size:.76rem;font-weight:500}.customer-filter-bar{background:#fff;border:1px solid #cbd5e1;border-radius:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-bottom:24px;padding:16px 20px;display:flex;box-shadow:0 1px 3px #0000000d}.customer-filter-left{flex-wrap:wrap;flex:1;align-items:center;gap:12px;display:flex}.customer-search-box{flex:1;min-width:280px;max-width:420px;position:relative}.customer-search-icon{color:#94a3b8;pointer-events:none;position:absolute;top:50%;left:14px;transform:translateY(-50%)}.customer-search-input{background:var(--bg-soft-blue,#f0fdfa);width:100%;color:var(--text-main,#111827);box-sizing:border-box;border:1px solid #cbd5e1;border-radius:8px;outline:none;padding:8px 36px 8px 40px;font-family:inherit;font-size:.83rem;transition:all .2s}.customer-search-input:focus{border-color:var(--blue-primary,#0f766e);background:#fff;box-shadow:0 0 0 3px #0f766e1f}.customer-clear-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;align-items:center;padding:0;display:flex;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.customer-select{background:var(--bg-soft-blue,#f0fdfa);color:var(--text-main,#111827);cursor:pointer;border:1px solid #cbd5e1;border-radius:8px;outline:none;padding:8px 16px;font-family:inherit;font-size:.83rem;font-weight:500;transition:border-color .2s}.customer-select:focus{border-color:var(--blue-primary,#0f766e);background:#fff}.customer-table-container{border-radius:var(--radius-lg,24px);border:1px solid var(--border-subtle,#e5edf8);box-shadow:var(--shadow-card,0 10px 30px #0f766e0f);background:#fff;overflow:hidden}.customer-table{border-collapse:collapse;text-align:left;width:100%;font-size:.84rem}.customer-table thead th{color:#475569;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:14px 16px;font-size:.77rem;font-weight:700}.customer-table tbody td{color:#334155;vertical-align:middle;border-bottom:1px solid #f1f5f9;padding:13px 16px}.customer-table tbody tr{cursor:pointer;transition:background-color .15s}.customer-table tbody tr:hover{background:#f0fdfa}.customer-name{color:var(--text-main,#111827);font-size:.88rem;font-weight:700;transition:color .15s}.customer-table tbody tr:hover .customer-name{color:var(--blue-primary,#0f766e)}.customer-phone{font-family:var(--font-mono,monospace);color:#475569;font-size:.82rem;font-weight:600}.tier-badge{border-radius:var(--radius-pill,9999px);letter-spacing:.02em;white-space:nowrap;align-items:center;gap:4px;padding:3px 10px;font-size:.72rem;font-weight:700;display:inline-flex}.tier-badge-vip{color:#7e22ce;background:#f3e8ff;border:1px solid #e9d5ff}.tier-badge-gold{color:#b45309;background:#fef3c7;border:1px solid #fde68a}.tier-badge-silver{color:#475569;background:#f1f5f9;border:1px solid #e2e8f0}.tier-badge-standard{color:#64748b;background:#f8fafc;border:1px solid #e2e8f0}.debt-progress-box{flex-direction:column;gap:4px;min-width:120px;display:flex}.debt-progress-bar{background:#e2e8f0;border-radius:999px;width:100%;height:6px;overflow:hidden}.debt-progress-fill{border-radius:999px;height:100%;transition:width .3s}.debt-fill-safe{background:#059669}.debt-fill-warning{background:#d97706}.debt-fill-danger{background:#dc2626}.badge-over-limit{color:#dc2626;border-radius:var(--radius-pill,9999px);background:#fee2e2;border:1px solid #fecaca;align-items:center;gap:3px;padding:2px 8px;font-size:.7rem;font-weight:700;display:inline-flex}.customer-drawer-backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:1000;background:#0f172a73;justify-content:flex-end;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.customer-drawer-panel{background:#fff;flex-direction:column;width:100%;max-width:560px;height:100%;animation:.25s cubic-bezier(.16,1,.3,1) slideInRight;display:flex;box-shadow:-10px 0 30px #00000026}.customer-drawer-header{background:linear-gradient(135deg,#f0fdfa 0%,#fff 100%);border-bottom:1px solid #f1f5f9;justify-content:space-between;align-items:center;padding:22px 24px;display:flex}.customer-drawer-avatar{background:linear-gradient(135deg, var(--blue-primary,#0f766e), var(--blue-dark,#134e4a));color:#fff;border-radius:16px;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.15rem;font-weight:800;display:flex;box-shadow:0 4px 12px #0f766e40}.customer-drawer-tabs{background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:0 16px;display:flex}.customer-drawer-tab-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;padding:12px 18px;font-size:.82rem;font-weight:600;transition:all .15s}.customer-drawer-tab-btn:hover{color:var(--blue-primary,#0f766e)}.customer-drawer-tab-btn.active{color:var(--blue-primary,#0f766e);border-bottom-color:var(--blue-primary,#0f766e);background:#fff}.customer-drawer-body{flex:1;padding:24px;overflow-y:auto}.customer-drawer-footer{background:#fff;border-top:1px solid #f1f5f9;justify-content:flex-end;align-items:center;gap:12px;padding:16px 24px;display:flex}.customer-modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1050;background:#0f172a73;justify-content:center;align-items:center;padding:16px;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.customer-modal-dialog{border-radius:var(--radius-xl,28px);background:#fff;flex-direction:column;width:100%;max-width:620px;animation:.25s cubic-bezier(.16,1,.3,1) scaleIn;display:flex;overflow:hidden;box-shadow:0 20px 48px #0f766e2e}.customer-modal-header{border-bottom:1px solid #f1f5f9;justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.customer-modal-title{align-items:center;gap:10px;display:flex}.customer-modal-title h3{color:var(--text-main,#111827);margin:0;font-size:1.15rem;font-weight:800}.customer-modal-body{max-height:75vh;padding:24px;overflow-y:auto}.customer-modal-footer{background:#fff;border-top:1px solid #f1f5f9;justify-content:flex-end;align-items:center;gap:12px;padding:16px 24px;display:flex}.form-group{margin-bottom:16px}.form-label{color:#334155;margin-bottom:6px;font-size:.8rem;font-weight:600;display:block}.form-input,.form-select,.form-textarea{background:var(--bg-soft-blue,#f0fdfa);border:1px solid var(--blue-border,#99f6e4);border-radius:var(--radius-pill,9999px);width:100%;color:var(--text-main,#111827);box-sizing:border-box;outline:none;padding:9px 16px;font-family:inherit;font-size:.84rem;transition:all .2s}.form-textarea{resize:vertical;border-radius:16px;padding:10px 16px}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--blue-primary,#0f766e);background:#fff;box-shadow:0 0 0 3px #0f766e1f}.form-input.error,.form-select.error{background:#fff5f5;border-color:#ef4444}.form-error{color:#ef4444;margin-top:4px;font-size:.74rem;font-weight:500}.vietqr-card{border:1px solid var(--blue-border,#99f6e4);border-radius:var(--radius-lg,20px);text-align:center;background:linear-gradient(#f0fdfa 0%,#e6fffa 100%);padding:18px}.vietqr-image-box{box-shadow:var(--shadow-sm,0 4px 14px #0f766e14);border:1px solid var(--blue-subtle,#ccfbf1);background:#fff;border-radius:16px;margin-bottom:12px;padding:12px;display:inline-block}.vietqr-image-box img{object-fit:contain;width:180px;height:180px;display:block}.vietqr-info-table{border:1px solid var(--blue-subtle,#ccfbf1);text-align:left;background:#ffffffe0;border-radius:14px;flex-direction:column;gap:8px;padding:12px 14px;font-size:.8rem;display:flex}.vietqr-info-row{justify-content:space-between;align-items:center;display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}