@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/inter-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Brand: change --primary and --app-font here. Shared across Admin Khung and Khách Khung. */
:root{--primary:#184b43;--primary-hover:#28665b;--primary-foreground:#ffffff;--app-font:Inter,"Segoe UI",Arial,sans-serif;--background:#f4f6f3;--surface:#ffffff;--foreground:#253c36;--muted:#596b62;--border:#edf0eb;--border-strong:#dce3d9;--ring-focus:#184b431a;--error-text:#c10007;--warning:#886224;--danger:#c70036;--radius:12px;font-family:var(--app-font);color:var(--foreground);background:var(--background);font-size:14px}
body{-webkit-font-smoothing:antialiased}input,select,button{font-family:var(--app-font)}input,select{font-size:14px}button{font-weight:500;border-radius:var(--radius);min-height:40px;transition:background-color .15s,color .15s;cursor:pointer}button:focus-visible,a:focus-visible{outline:none}input:focus-visible{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px var(--ring-focus)}[hidden]{display:none!important}.topbar{height:64px;padding:0 24px}.brand{font-size:16px;letter-spacing:0}.brand small{font-size:10px;letter-spacing:.8px}.brand-icon{width:36px;height:36px;font-size:24px;border-radius:12px}.header-actions{display:flex;align-items:center;gap:16px}.access{font-size:12px;padding:6px 10px;color:var(--muted);background:var(--background)}.logout{background:transparent;color:var(--danger);padding:0 12px}.logout:hover{background:#ff20561a}main{max-width:1560px;padding:20px 24px 16px}.intro{margin-bottom:16px;min-height:44px}.intro h1{font-size:20px;line-height:1.5;letter-spacing:0;margin:0;font-weight:600}.intro p:not(.eyebrow){font-size:12px;margin-top:3px}.workspace{grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:20px}.workspace>*{min-width:0}.panel{padding:20px;margin-bottom:12px;border:1px solid var(--border);border-radius:12px}.section-title{margin-bottom:20px;gap:0}.section-title h2,h2{font-size:16px;line-height:1.5;letter-spacing:0}.section-title p{font-size:12px;margin-top:4px;line-height:1.5}.input-grid{gap:20px 16px}.number-field{background:var(--surface);border-color:var(--border-strong);border-radius:12px;margin-top:8px;height:40px}.number-field:focus-within{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px var(--ring-focus)}.number-field input{padding:10px 12px;font-size:14px;color:var(--foreground)}.number-field input:focus-visible{box-shadow:none}.number-field span{font-size:12px;white-space:nowrap}label{font-size:12px;font-weight:500;color:var(--foreground)}select{height:40px;min-height:40px;border-radius:12px;background:var(--surface);font-size:14px;margin-top:8px;padding:8px 12px}.derived{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);font-size:12px}.derived strong{background:none;padding:0;color:var(--foreground);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}.materials label+label{margin-top:16px}.cost-inputs{gap:16px}.cost-inputs label+label{margin-top:0}.overhead-table{margin:16px 0}.overhead-table th,.overhead-table td{padding:8px 4px}.input-hint{font-size:12px;line-height:1.5;margin-top:8px}.shipping-inputs{gap:16px}.form-tabs{display:flex;gap:4px;align-items:stretch;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:4px;margin-bottom:12px}.form-tabs button{flex:1;background:none;color:var(--muted);font-size:12px;padding:8px;min-height:36px;border-radius:8px}.form-tabs button:hover{background:var(--background)}.form-tabs button[aria-selected=true]{background:#e7ece6;color:var(--foreground);font-weight:600}.bottom-actions{margin:0;display:flex;justify-content:flex-end;gap:12px;padding:4px 0}.primary{border:1px solid transparent;background:var(--primary);color:var(--primary-foreground);font-size:14px;font-weight:500;padding:8px 20px;min-height:40px;justify-content:center;flex:0 1 auto}.primary:hover{background:var(--primary-hover)}.reset{background:var(--surface);border:1px solid var(--border-strong);padding:8px 16px;font-size:14px;color:var(--foreground)}.reset:hover{background:#e4e4e7}.results{position:static;display:flex;flex-direction:column;gap:12px;min-width:0}.price-card{border-radius:12px;padding:20px 20px 12px;margin:0;background:var(--primary);overflow:visible}.price-heading{font-size:12px;letter-spacing:0;line-height:1.5;color:#e4eee9}.pill{font-size:12px;padding:3px 8px;border-radius:8px;background:#ffffff12;color:#e4eee9;border:0}.price-value{margin-top:8px;gap:8px;line-height:1.2;min-height:43px}.price-value output{font-size:32px;letter-spacing:0;font-weight:600;word-break:normal}.price-value>span{font-size:20px;color:#d8e6df}.price-card>p{font-size:12px;margin:10px 0 0;line-height:1.5;color:#e4eee9}.price-footer{padding:12px 0 0;margin:12px 0 0;background:none;border-color:#ffffff26;font-size:12px;gap:12px}.price-footer label{color:#e4eee9}.multiplier-actions{display:flex;align-items:center;gap:8px}.multiplier-actions input{width:84px;height:36px;min-width:0;border:1px solid #ffffff40;background:#ffffff;color:var(--foreground);border-radius:8px;padding:6px 10px;text-align:center}.multiplier-actions button{min-height:36px;border-radius:8px;padding:6px 12px;background:#ffffff14;color:#ffffff;border:1px solid #ffffff40;font-size:12px}.multiplier-actions button:hover{background:#ffffff26}#settings-status{min-height:18px;font-size:12px;color:#d3e5da;margin-top:8px}.breakdown{padding:16px 20px;margin:0}.breakdown-title{margin-bottom:8px}.breakdown-title h2{font-size:16px}.breakdown-title>span{font-size:12px;padding:0;border:0}table{font-size:12px}thead{font-size:12px}th,td{padding:9px 4px}tbody td:first-child{width:46%;max-width:none;font-size:12px;line-height:1.5}tbody td small{display:none}tbody td:not(:first-child){font-size:12px}tfoot th,tfoot td{padding-top:10px;padding-bottom:8px;font-size:12px}.cost-lines{padding-top:0;margin-top:4px}.cost-lines>div{margin-top:10px;font-size:12px;color:var(--muted);line-height:1.5}.cost-lines strong{color:var(--foreground)}.cost-lines .base-cost{padding-top:10px;margin-top:10px}.formula{margin-top:12px;font-size:12px;padding:8px;line-height:1.5}.message{margin:0;font-size:12px;padding:12px;line-height:1.5}.results .message{max-height:100px;overflow:auto}.customer-workspace .material-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.customer-workspace .materials label+label{margin:0}.customer-summary h2{margin:0 0 16px}.customer-summary dl{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px 16px;margin:0;font-size:12px}.customer-summary dt{color:var(--muted)}.customer-summary dd{margin:0;text-align:right;overflow-wrap:anywhere}.customer-summary .derived{margin-top:16px}.login-page{min-height:100dvh;display:grid;place-items:center}.login-shell{width:min(100%,440px);padding:40px 24px;margin:auto}.login-shell>.brand{margin-bottom:36px}.demo-label{display:inline-block;color:var(--muted);font-size:12px;margin-bottom:8px}.login-shell h1{font-size:20px;letter-spacing:0;margin:0;font-weight:600;line-height:1.5}.login-intro{color:var(--muted);font-size:14px;line-height:1.6;margin:8px 0 24px}.login-field{margin-top:20px}.login-field>label{display:inline-block;margin-bottom:8px;font-size:14px;cursor:pointer}.login-field input{width:100%;height:48px;border:1px solid var(--border-strong);border-radius:12px;background:var(--surface);padding:12px 16px;font-size:16px;color:var(--foreground)}.password-field{position:relative}.password-field input{padding-right:52px}.password-field button{position:absolute;inset:0 4px 0 auto;margin:auto 0;width:40px;height:40px;padding:10px;background:none;color:var(--muted);border:0}.password-field button:hover{color:var(--foreground)}svg{width:100%;height:100%}.login-error{min-height:24px;line-height:1.5;color:var(--error-text);font-size:12px;margin:12px 0}.login-submit{width:100%;min-height:48px}.demo-account{padding:16px 0;border-top:1px solid var(--border-strong);margin-top:24px;display:flex;flex-direction:column;gap:8px;font-size:12px}.demo-account>span{color:var(--muted)}.demo-account strong{font-size:14px;font-weight:500}.demo-account button{align-self:flex-start;background:var(--surface);border:1px solid var(--border-strong);color:var(--foreground);padding:8px 12px}.demo-account button:hover{background:#e4e4e7}.login-note{font-size:12px;color:var(--muted);line-height:1.5}.switch-portal{display:inline-block;font-size:14px;color:var(--primary);text-decoration:underline;text-underline-offset:4px;margin-top:8px;min-height:32px;padding:6px 0}.select-wrapper{margin-top:8px}select[data-enhanced]{display:none}.select-trigger{height:40px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border:1px solid var(--border-strong);background:var(--surface);color:var(--foreground);text-align:left;font-size:14px}.select-trigger>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-trigger[aria-expanded=true],.select-trigger:focus-visible{border-color:var(--primary);box-shadow:0 0 0 2px var(--ring-focus)}.select-popover{position:fixed;z-index:1000;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:8px;box-shadow:0 10px 15px -3px #0000001a;animation:popover-in .15s ease-out}.select-popover>input{height:40px;width:100%;padding:8px 12px;border:1px solid var(--border-strong);border-radius:12px;min-width:0;background:var(--surface);color:var(--foreground);margin-bottom:8px}.select-options{overflow:auto;display:flex;flex-direction:column;gap:4px}.select-options button{flex-shrink:0;text-align:left;padding:8px 12px;background:none;color:var(--foreground);border:0;font-size:14px;min-height:40px}.select-options button:hover,.select-options button:focus-visible{background:var(--background)}.select-options button[aria-selected=true]{background:#e7ece6;font-weight:600}.select-options p{padding:12px;color:var(--muted);font-size:14px}@keyframes popover-in{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}
.breakdown th,.breakdown td{padding-top:6px;padding-bottom:6px}.breakdown tfoot th,.breakdown tfoot td{padding-top:8px;padding-bottom:8px}.form-tabs{position:sticky;top:0;z-index:2}
/* Keep the complete result visible while the admin input panel scrolls independently. */
@media(min-width:1000px){body[data-role=admin]{height:100dvh;overflow:hidden}body[data-role=admin] main{height:calc(100dvh - 64px);display:flex;flex-direction:column}body[data-role=admin] .workspace{min-height:0;flex:1}body[data-role=admin] #calculator{min-height:0;overflow:auto;padding:0 4px 8px 0}body[data-role=admin] .results{min-height:0}body[data-role=admin] .price-card{flex-shrink:0}body[data-role=admin] .breakdown{flex-shrink:0}}@media(max-width:999px){.workspace{grid-template-columns:minmax(0,1fr)}.results{grid-row:1}.results .breakdown{margin:0}.results{margin-bottom:16px}.price-value output{font-size:28px}.results.is-stale{opacity:.7}.customer-workspace .results{margin-bottom:16px}}@media(max-width:767px){button{min-height:44px}.topbar{height:64px;padding:0 16px}.header-actions{gap:4px}.access{display:none}main{padding:16px}.intro{margin-bottom:16px}.intro h1{font-size:20px}.panel{padding:16px}.number-field,.select-trigger,select{height:44px;min-height:44px}.number-field input,select,.select-trigger{font-size:16px}.input-grid,.shipping-inputs,.customer-workspace .material-grid{grid-template-columns:1fr;gap:16px}.price-card{padding:16px}.price-value output{font-size:28px}.price-footer{padding-top:12px}.form-tabs button{font-size:12px;padding:6px;min-height:40px}.multiplier-actions input{width:72px;height:40px;font-size:16px}.multiplier-actions button{min-height:40px}.breakdown{padding:16px}body[data-role=admin] .results{display:grid;grid-template-columns:minmax(0,1fr)}.customer-summary dl{grid-template-columns:100px minmax(0,1fr);gap:12px}.login-shell{padding:32px 24px}.select-wrapper{display:none}select[data-enhanced]{display:block}}@media(max-height:720px) and (min-width:1000px){main{padding-top:12px;padding-bottom:12px}.intro{margin-bottom:12px}.price-card{padding:12px 16px 8px}.price-value{min-height:34px}.price-value output{font-size:28px}.price-footer{margin-top:8px;padding-top:8px}#settings-status{margin-top:4px}.breakdown{padding:12px 16px}.breakdown-title{margin-bottom:4px}th,td{padding-top:6px;padding-bottom:6px}.cost-lines>div{margin-top:6px}.cost-lines .base-cost{margin-top:6px;padding-top:6px}.formula{margin-top:8px;padding:6px}.results{gap:8px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
*{--scrollbar-thumb:transparent}*:hover{--scrollbar-thumb:color-mix(in srgb,var(--foreground) 16%,transparent)}.is-scrolling{--scrollbar-thumb:color-mix(in srgb,var(--foreground) 28%,transparent)}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:9999px}::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--foreground) 40%,transparent)}@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:transparent transparent}*:hover{scrollbar-color:color-mix(in srgb,var(--foreground) 18%,transparent) transparent}}