:root{--red:#d72f36;--red2:#b91f27;--nav:#141821;--nav2:#202633;--ink:#172033;--muted:#667085;--line:#e4e7ec;--bg:#f5f7fa;--blue:#243e6d;--ok:#16794b;--warn:#b54708}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}.app-shell{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{background:linear-gradient(180deg,var(--nav),#0d1017);color:#fff;padding:18px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{display:flex;gap:10px;align-items:center;padding:4px 6px 18px;border-bottom:1px solid #303744}.brand img{width:48px;height:48px;object-fit:contain}.brand strong{font-size:16px;display:block}.brand small{font-size:9px;color:#c7ccd4;display:block;margin-top:4px}.sidebar nav{padding-top:16px}.nav-btn{width:100%;border:0;background:transparent;color:#d9dee7;text-align:left;padding:11px 12px;border-radius:8px;margin:3px 0;cursor:pointer}.nav-btn:hover,.nav-btn.active{background:var(--nav2);color:#fff}.nav-btn.active{border-left:3px solid var(--red)}.sidebar-footer{margin-top:auto;display:grid;gap:8px}.ghost{background:transparent;border:1px solid #3a4352;color:#e8ecf2;padding:8px 10px;border-radius:7px;cursor:pointer;text-align:center}.sidebar-footer small{color:#8d97a6;font-size:10px;text-align:center}.content{padding:28px}.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px}.page-head h1{font-size:26px;margin:0}.page-head p{margin:5px 0 0;color:var(--muted)}.actions{display:flex;gap:8px;flex-wrap:wrap}.btn{border:0;border-radius:7px;padding:9px 14px;cursor:pointer;font-weight:600}.btn.primary{background:var(--red);color:#fff}.btn.primary:hover{background:var(--red2)}.btn.secondary{background:#fff;border:1px solid var(--line);color:var(--ink)}.btn.danger{background:#fff0f0;color:#b42318;border:1px solid #fecdca}.grid{display:grid;gap:16px}.grid.kpi{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:0 1px 2px rgba(16,24,40,.04)}.kpi-card .label{color:var(--muted);font-size:13px}.kpi-card .value{font-size:28px;font-weight:800;margin-top:8px}.kpi-card .sub{font-size:12px;color:var(--muted);margin-top:6px}.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.field label{display:block;color:#475467;font-size:12px;font-weight:600;margin-bottom:5px}.field input,.field select,.field textarea{width:100%;border:1px solid #d0d5dd;border-radius:7px;background:#fff;padding:9px 10px;color:#101828}.field textarea{min-height:72px;resize:vertical}.span-2{grid-column:span 2}.span-4{grid-column:span 4}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px;background:#fff}table{border-collapse:collapse;width:100%;font-size:13px}th{background:#f8fafc;color:#475467;text-align:left;padding:10px;border-bottom:1px solid var(--line);white-space:nowrap}td{padding:10px;border-bottom:1px solid #eef1f5;vertical-align:top}tr:last-child td{border-bottom:0}.num{text-align:right;font-variant-numeric:tabular-nums}.pill{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700}.pill.hsnl{background:#ecfdf3;color:#027a48}.pill.ref{background:#eff8ff;color:#175cd3}.pill.formula{background:#fff7ed;color:#b54708}.pill.manual{background:#fff1f3;color:#c01048}.muted{color:var(--muted)}.section-title{font-size:16px;margin:0 0 12px}.quote-lines{margin-top:16px}.quote-lines table input,.quote-lines table select{min-width:86px;width:100%;border:1px solid #d0d5dd;border-radius:5px;padding:6px}.quote-lines .spec-select{min-width:220px}.quote-lines .standard-select{min-width:170px}.quote-lines .grade-input{min-width:100px}.quote-lines .factory-input{min-width:120px}.totals{margin-left:auto;width:min(460px,100%);margin-top:16px}.total-row{display:flex;justify-content:space-between;padding:7px 0}.total-row.grand{border-top:2px solid #111827;margin-top:6px;padding-top:12px;font-size:18px;font-weight:800}.notice{border:1px solid #fedf89;background:#fffaeb;color:#7a2e0e;padding:10px 12px;border-radius:8px;font-size:12px}.source-note{font-size:12px;color:#667085;line-height:1.55}.standard-list td:first-child{font-weight:700}.quote-paper{background:#fff;padding:24px;border:1px solid var(--line);border-radius:10px}.quote-header{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-bottom:2px solid var(--red);padding-bottom:15px;margin-bottom:16px}.quote-company{display:flex;gap:12px;align-items:flex-start}.quote-company img{width:70px;height:70px;object-fit:contain}.quote-company h2{margin:0;color:var(--red);font-size:20px}.quote-title{text-align:right}.quote-title h1{font-size:30px;margin:0;color:var(--blue)}.quote-meta{font-size:12px;color:#475467;line-height:1.7}.compact td,.compact th{padding:7px 8px}.right{text-align:right}.search{max-width:320px}.toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px;flex-wrap:wrap}.empty{padding:34px;text-align:center;color:var(--muted)}.danger-text{color:#b42318}.ok-text{color:var(--ok)}
@media(max-width:1100px){.app-shell{grid-template-columns:210px 1fr}.grid.kpi{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:repeat(2,1fr)}.span-4{grid-column:span 2}}
@media(max-width:760px){.app-shell{display:block}.sidebar{position:relative;height:auto}.content{padding:14px}.grid.kpi,.form-grid{grid-template-columns:1fr}.span-2,.span-4{grid-column:auto}.quote-header{grid-template-columns:1fr}.quote-title{text-align:left}}
@media print{body{background:#fff}.no-print,.page-head .actions,.editor-only{display:none!important}.app-shell{display:block}.content{padding:0}.quote-paper{border:0;padding:0}.quote-lines .table-wrap{overflow:visible;border:0}table{font-size:10px}th,td{padding:5px}.quote-paper{font-size:11px}}

/* V2: custom specification + internal costing */
.spec-preview{font-size:11px;color:#667085;margin-top:4px;max-width:220px;white-space:normal}.detail-row td{background:#fbfcfe;padding:0 10px 12px;border-bottom:1px solid #d9e0ea}.detail-sections{display:grid;grid-template-columns:1fr 1.2fr;gap:12px;padding:12px;border:1px dashed #cfd6e2;border-radius:9px;background:#fff}.detail-section{min-width:0}.detail-section h4{margin:0 0 10px;font-size:13px;color:#344054}.formula-grid,.cost-grid{display:grid;grid-template-columns:repeat(4,minmax(100px,1fr));gap:8px;align-items:end}.mini-field label{display:block;font-size:10px;font-weight:700;color:#667085;margin-bottom:3px}.mini-field input,.mini-field select{width:100%;border:1px solid #d0d5dd;border-radius:6px;padding:7px 8px;background:#fff}.mini-field.wide{grid-column:span 2}.mini-note{grid-column:1/-1;font-size:11px;color:#667085;background:#f8fafc;border-radius:6px;padding:8px}.formula-result{font-size:11px;margin-top:8px;color:#475467}.cost-summary{grid-column:span 3;background:#f0f9ff;border:1px solid #b9e6fe;border-radius:7px;padding:8px 10px;font-size:11px;line-height:1.55;color:#344054}.sell-highlight{color:#b42318;font-size:13px}.cost-apply{background:#243e6d;color:#fff;min-height:38px}.cost-apply:hover{background:#1c3157}.conditions-editor{margin-top:16px}.quote-conditions{margin-top:20px;border-top:1px solid #d0d5dd;padding-top:14px;font-size:12px;line-height:1.55}.quote-conditions h3{font-size:14px;color:#243e6d;margin:0 0 8px}.quote-conditions ol{margin:0 0 8px;padding-left:20px}.quote-conditions li{margin:4px 0}
@media(max-width:1200px){.detail-sections{grid-template-columns:1fr}.formula-grid,.cost-grid{grid-template-columns:repeat(3,minmax(100px,1fr))}}
@media(max-width:760px){.formula-grid,.cost-grid{grid-template-columns:1fr 1fr}.mini-field.wide,.cost-summary{grid-column:1/-1}}
@media print{.quote-conditions{break-inside:avoid}.detail-row{display:none!important}}
.fixed-value{min-height:38px;display:flex;align-items:center;padding:8px 10px;border:1px solid #d9dde3;border-radius:8px;background:#f7f8fa;color:#222}

.readonly-mini{border:1px solid #d0d5dd;border-radius:6px;padding:7px 8px;background:#f8fafc;font-size:12px;min-height:34px}.profit-positive{color:#067647;font-weight:700}.profit-negative{color:#b42318;font-weight:700}

/* V2.4: customer master */
.field-hint{font-size:10px;color:#667085;margin-top:4px;line-height:1.4}.customer-editor{margin-bottom:16px;border-left:4px solid var(--red)}.row-actions{display:flex;gap:6px;white-space:nowrap}.customer-editor .actions{display:flex}
@media(max-width:760px){.row-actions{flex-wrap:wrap}.customer-editor .form-grid{grid-template-columns:1fr}.customer-editor .span-2{grid-column:auto}}

/* V2.7 - giá bán nội bộ tự động */
input[readonly]{background:#f3f4f6;color:#111827;font-weight:700;cursor:not-allowed}
.mini-field select:disabled,.mini-field input:disabled{background:#f3f4f6;color:#9ca3af;cursor:not-allowed}

/* V2.9 - khu vực xác nhận báo giá */
.quote-signatures{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:28px;padding-top:4px;break-inside:avoid;page-break-inside:avoid}
.signature-box{text-align:center;min-height:155px}
.signature-title{font-weight:800;font-size:13px;color:#172033;text-transform:uppercase;line-height:1.35}
.signature-space{height:105px}
.signature-note{font-size:10px;color:#667085;font-style:italic}
@media(max-width:760px){.quote-signatures{grid-template-columns:1fr;gap:20px}.signature-box{min-height:130px}.signature-space{height:80px}}
@media print{.quote-signatures{display:grid!important;grid-template-columns:1fr 1fr!important;gap:42px;margin-top:24px;break-inside:avoid!important;page-break-inside:avoid!important}.signature-box{min-height:145px}.signature-space{height:95px}.signature-note{font-size:9px}}


/* V3.0 Mobile / PWA */
.mobile-header,.mobile-overlay,.sidebar-close{display:none}
@media(max-width:760px){
 html,body{max-width:100%;overflow-x:hidden}
 body{padding-top:58px;-webkit-text-size-adjust:100%}
 body.nav-open{overflow:hidden}
 .mobile-header{display:flex;position:fixed;z-index:1000;top:0;left:0;right:0;height:58px;background:linear-gradient(90deg,var(--nav),#0d1017);color:#fff;align-items:center;justify-content:space-between;padding:6px 10px;box-shadow:0 2px 10px rgba(0,0,0,.18)}
 .mobile-menu-btn,.mobile-quick-add{width:44px;height:44px;border:0;border-radius:10px;background:#232a38;color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer}
 .mobile-quick-add{background:var(--red);font-size:26px;font-weight:300}
 .mobile-brand{display:flex;align-items:center;gap:8px;min-width:0}
 .mobile-brand img{width:38px;height:38px;object-fit:contain}
 .mobile-brand strong{display:block;font-size:13px;line-height:1.05;letter-spacing:.3px}
 .mobile-brand small{display:block;color:#cbd2dc;font-size:10px;margin-top:3px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .mobile-overlay{display:block;position:fixed;inset:58px 0 0 0;background:rgba(8,12,20,.52);z-index:998;opacity:0;visibility:hidden;transition:.2s}
 .mobile-overlay.show{opacity:1;visibility:visible}
 .app-shell{display:block;min-height:calc(100vh - 58px)}
 .sidebar{position:fixed;z-index:999;top:0;left:0;width:min(86vw,320px);height:100dvh;transform:translateX(-105%);transition:transform .22s ease;box-shadow:8px 0 24px rgba(0,0,0,.28);padding-top:12px;overflow-y:auto}
 .sidebar.mobile-open{transform:translateX(0)}
 .sidebar-close{display:flex;position:absolute;right:10px;top:8px;width:36px;height:36px;border:0;border-radius:9px;background:#252c39;color:#fff;font-size:25px;align-items:center;justify-content:center;cursor:pointer}
 .brand{padding-right:42px}
 .nav-btn{min-height:44px;font-size:14px;padding:12px}
 .ghost{min-height:44px}
 .content{padding:12px 10px 28px}
 .page-head{display:block;margin-bottom:12px}
 .page-head h1{font-size:21px;line-height:1.25}
 .page-head p{font-size:12px;line-height:1.5}
 .page-head .actions{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;width:100%}
 .page-head .actions .btn{width:100%;min-height:44px}
 .card{padding:13px;border-radius:10px}
 .grid[style*="grid-template-columns"]{grid-template-columns:1fr!important}
 .grid.kpi{grid-template-columns:1fr 1fr;gap:10px}
 .kpi-card{padding:12px}
 .kpi-card .value{font-size:22px;margin-top:5px}
 .kpi-card .label{font-size:11px}
 .kpi-card .sub{font-size:10px}
 .form-grid{grid-template-columns:1fr!important;gap:10px}
 .span-2,.span-4{grid-column:auto!important}
 .field label{font-size:11px}
 .field input,.field select,.field textarea,.mini-field input,.mini-field select{font-size:16px;min-height:44px;padding:10px}
 .toolbar{align-items:stretch}
 .toolbar .search,.toolbar input.search,.toolbar select{max-width:none;width:100%;min-height:44px}
 .toolbar .btn{min-height:44px}
 .quote-lines{padding:12px;margin-top:12px}
 .quote-lines .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px;box-shadow:inset -12px 0 12px -14px rgba(0,0,0,.5)}
 .quote-lines table{min-width:1480px}
 .quote-lines th,.quote-lines td{padding:7px}
 .quote-lines table input,.quote-lines table select{min-height:40px;font-size:14px}
 .detail-row td{padding:0 7px 10px}
 .detail-sections{grid-template-columns:1fr!important;padding:9px;gap:10px}
 .formula-grid,.cost-grid{grid-template-columns:1fr 1fr!important;gap:8px}
 .mini-field.wide,.mini-note,.cost-summary{grid-column:1/-1!important}
 .cost-apply{grid-column:1/-1;width:100%;min-height:46px;font-size:15px}
 .cost-summary{font-size:12px;line-height:1.65}
 .quote-paper{padding:12px;overflow-x:auto;-webkit-overflow-scrolling:touch}
 .quote-paper>.quote-header{min-width:0}
 .quote-header{grid-template-columns:1fr!important;gap:12px}
 .quote-company img{width:52px;height:52px}
 .quote-company h2{font-size:16px}
 .quote-title{text-align:left!important}
 .quote-title h1{font-size:23px}
 .quote-meta{font-size:11px}
 .quote-paper .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
 .quote-paper table{min-width:920px}
 .totals{width:100%}
 .total-row{font-size:12px;gap:12px}
 .total-row.grand{font-size:16px}
 .quote-conditions{font-size:11px}
 .quote-signatures{grid-template-columns:1fr 1fr!important;gap:12px}
 .signature-title{font-size:10px}
 .signature-box{min-height:112px}
 .signature-space{height:66px}
 .signature-note{font-size:8px}
 .row-actions{display:grid;grid-template-columns:repeat(3,minmax(70px,1fr));gap:5px;min-width:230px}
 .row-actions .btn{min-height:38px;padding:7px 9px;font-size:12px}
 .standard-list,.customer-editor+ .card table{min-width:850px}
 .sidebar-footer{padding-bottom:max(10px,env(safe-area-inset-bottom))}
}
@media(max-width:390px){
 .grid.kpi{grid-template-columns:1fr}
 .formula-grid,.cost-grid{grid-template-columns:1fr!important}
 .quote-signatures{grid-template-columns:1fr!important}
 .mobile-brand small{max-width:120px}
}
@supports(padding:max(0px)){
 @media(max-width:760px){.mobile-header{padding-top:max(6px,env(safe-area-inset-top));height:calc(58px + env(safe-area-inset-top));}.mobile-overlay{top:calc(58px + env(safe-area-inset-top));}body{padding-top:calc(58px + env(safe-area-inset-top));}}
}

/* V3.1 Online */
.login-overlay{position:fixed;inset:0;background:rgba(15,20,28,.94);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}.login-overlay.hidden{display:none}.login-card{width:min(430px,100%);background:#fff;border-radius:18px;padding:26px;box-shadow:0 24px 80px rgba(0,0,0,.35)}.login-logo{height:58px;max-width:210px;object-fit:contain;display:block;margin:0 auto 14px}.login-card h1{text-align:center;margin:0 0 8px;font-size:24px}.login-card p{text-align:center;color:#667085;margin:0 0 18px;line-height:1.5}.login-card form{display:grid;gap:12px}.login-card label{display:grid;gap:6px;font-size:13px;font-weight:700;color:#344054}.login-card input{width:100%;box-sizing:border-box;padding:12px 13px;border:1px solid #cfd6df;border-radius:9px;font-size:16px}.login-submit{width:100%;justify-content:center;margin-top:4px}.login-message{min-height:18px;font-size:13px;color:#b42318;text-align:center}.login-card>small{display:block;text-align:center;color:#7b8493;margin-top:12px}.online-account{border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);padding:12px 0;margin-bottom:10px;display:grid;gap:6px}.online-account strong{color:#fff}.online-account small{color:#b9c1ce}.sync-state{display:flex;align-items:center;gap:7px;color:#d0d5dd;font-size:12px}.sync-dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:#98a2b3}.sync-dot.ok{background:#32d583}.sync-dot.busy{background:#fdb022}.sync-dot.error{background:#f04438}.sync-dot.offline{background:#667085}.online-banner{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:9px;background:#eef8ff;color:#175cd3;font-size:13px;margin-bottom:12px}.online-banner.warn{background:#fff7ed;color:#b54708}.user-form{display:grid;grid-template-columns:1.2fr 1.4fr 1fr 1.2fr auto;gap:10px;align-items:end}.user-form .field{min-width:0}.role-badge{display:inline-flex;padding:3px 8px;border-radius:999px;background:#eef2f6;font-size:12px;font-weight:700}.role-badge.admin{background:#fee4e2;color:#b42318}.role-badge.sales{background:#e0f2fe;color:#026aa2}.role-badge.viewer{background:#f2f4f7;color:#475467}@media(max-width:900px){.user-form{grid-template-columns:1fr 1fr}.user-form .actions-cell{grid-column:1/-1}}@media(max-width:620px){.login-overlay{padding:12px}.login-card{padding:20px;border-radius:14px}.user-form{grid-template-columns:1fr}}