/* Build PC — Hacom-style layout using the NovaTech theme palette (variables from the theme's commerce.css). */
.nb { --nb-accent: var(--green, #00876f); --nb-dark: var(--dark, #003e35); --nb-line: var(--line, #e2eae7); --nb-red: var(--red, #d9343c); --nb-muted: var(--muted, #687c77); font-size: 14px; }
.nb button { font: inherit; cursor: pointer; }
.nb-print-head { display: none; }
.nb-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.nb-intro { margin: 0; color: var(--nb-muted); flex: 1 1 320px; }
.nb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.nb-btn { border: 1px solid var(--nb-line); background: #fff; color: var(--nb-dark); border-radius: 6px; padding: 8px 12px; font-weight: 600; }
.nb-btn:hover { border-color: var(--nb-accent); color: var(--nb-accent); }
.nb-btn--zalo { background: #0068ff; border-color: #0068ff; color: #fff; }
.nb-btn--zalo:hover { color: #fff; filter: brightness(1.08); }
.nb-notice { flex-basis: 100%; margin: 0; padding: 10px 12px; border-left: 4px solid #d99a00; border-radius: 6px; background: #fff6e0; color: #6b4800; font-weight: 600; }
.nb-notice[hidden] { display: none; }
.nb-share { flex-basis: 100%; margin: 0; padding: 10px 12px; background: #ecf9f3; border-radius: 6px; overflow-wrap: anywhere; }

.nb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.nb.is-busy .nb-table { opacity: .65; transition: opacity .15s; }
.nb-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--nb-line); }
.nb-table th { width: 160px; text-align: left; vertical-align: top; padding: 14px 12px; background: #f7faf9; border-bottom: 1px solid var(--nb-line); font-weight: 700; color: var(--nb-dark); }
.nb-table td { padding: 10px 12px; border-bottom: 1px solid var(--nb-line); }
.nb-table tr.has-error th { box-shadow: inset 4px 0 0 var(--nb-red); }
.nb-table tr.is-filled:not(.has-error) th { box-shadow: inset 4px 0 0 var(--nb-accent); }
.nb-index { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--nb-dark); color: #fff; font-size: 11px; }
.nb-pick { border: 1px dashed var(--nb-accent); background: #fff; color: var(--nb-accent); border-radius: 6px; padding: 7px 14px; font-weight: 700; }
.nb-pick:hover { background: var(--nb-accent); color: #fff; }

.nb-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) 120px 92px 110px 64px; gap: 12px; align-items: center; padding: 6px 0; }
.nb-item + .nb-item, .nb-item + .nb-pick { margin-top: 8px; }
.nb-item img, .nb-part img { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--nb-line); border-radius: 4px; background: #fff; }
.nb-item__body, .nb-part__body { display: grid; gap: 2px; min-width: 0; }
.nb-item__body a { font-weight: 600; color: var(--nb-dark); }
.nb-item__body small, .nb-part__body small { color: var(--nb-muted); }
.nb-stock { color: var(--nb-accent) !important; }
.nb-stock--out { color: var(--nb-red) !important; }
.nb-item__price, .nb-part__price { display: grid; text-align: right; }
.nb-item__price del, .nb-part__price del { color: var(--nb-muted); font-size: 12px; }
.nb-item__price strong, .nb-part__price strong { color: var(--nb-red); }
.nb-item__qty { display: flex; align-items: center; justify-content: center; gap: 6px; }
.nb-item__qty button { width: 26px; height: 26px; border: 1px solid var(--nb-line); background: #fff; border-radius: 4px; }
.nb-item__total { text-align: right; font-weight: 700; }
.nb-item__tools { display: flex; gap: 4px; justify-content: flex-end; }
.nb-item__tools button { border: 1px solid var(--nb-line); background: #fff; border-radius: 4px; padding: 3px 7px; }
.nb-item__tools [data-nb-remove] { color: var(--nb-red); }

.nb-summary { position: sticky; top: 16px; background: #ecf9f3; border-radius: 8px; padding: 18px; }
.nb-summary h2 { margin: 0 0 10px; font-size: 18px; }
.nb-figures { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 0 0 12px; }
.nb-figures dt { color: var(--nb-muted); }
.nb-figures dd { margin: 0; text-align: right; font-weight: 600; }
.nb-total { font-size: 22px; color: var(--nb-red); font-weight: 800 !important; }
.nb-issues { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.nb-issue { padding: 8px 10px; border-radius: 6px; font-size: 13px; line-height: 1.45; }
.nb-issue--error { background: #fdecec; color: #9b1c1c; }
.nb-issue--warning { background: #fff6e0; color: #7a5200; }
.nb-issue--info { background: #fff; color: var(--nb-muted); }
.nb-issue--ok { background: #e1f6ea; color: #0b6b3a; font-weight: 600; }
.nb-order { width: 100%; border: 0; border-radius: 6px; padding: 12px; margin-bottom: 8px; background: var(--nb-red); color: #fff; font-weight: 800; text-transform: uppercase; }
.nb-order:disabled { background: #b8c4c1; cursor: not-allowed; }
.nb-summary .nb-cart { background: #fff; color: var(--nb-red); border: 2px solid var(--nb-red); }
.nb-summary .nb-cart:disabled { color: #9aa7a3; border-color: #cfd8d5; background: #fff; }
.nb-promo { color: #00876f; font-weight: 700; }
.nb-issue--info { background: #eef6ff; border-color: #2f7fd8; }
.nb-slots { margin: 10px 0 0; padding: 12px; border: 1px dashed #cfdcd8; border-radius: 8px; background: #fbfdfc; }
.nb-slots[hidden] { display: none; }
.nb-slots__note { margin: 0 0 8px; font-size: 13px; }
.nb-slots__note a { color: #00876f; font-weight: 700; }
.nb-slots__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.nb-slot { display: flex; flex-direction: column; gap: 3px; padding: 10px; border: 1px solid #e2eae7; border-radius: 6px; background: #fff; font-size: 13px; }
.nb-slot.is-used { border-color: #9fd9c8; }
.nb-slot small { color: #687c77; }
.nb-slot span { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.nb-cart, .nb-mobilebar button { width: 100%; border: 0; border-radius: 6px; padding: 12px; background: var(--nb-red); color: #fff; font-weight: 800; text-transform: uppercase; }
.nb-cart:disabled, .nb-mobilebar button:disabled { background: #b8c4c1; cursor: not-allowed; }
.nb-note { margin: 10px 0 0; font-size: 12px; color: var(--nb-muted); }
.nb-mobilebar { display: none; }

/* Save / Excel / image / share / print row under the summary (Hacom-style, NovaTech green). */
.nb-exports { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; max-width: 1120px; margin: 22px auto 0; }
.nb-export { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 8px 14px; border: 0; border-radius: 4px; background: var(--nb-accent); color: #fff; font-weight: 700; line-height: 1.3; text-align: center; transition: filter .15s, transform .15s; }
.nb-export svg { flex: 0 0 auto; }
.nb-export:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.nb-export:focus-visible { outline: 3px solid var(--mint, #00cba5); outline-offset: 2px; }
.nb-export--share { background: var(--nb-dark); }
/* Disabled: light fill, dark text (≈6:1) so the labels stay readable. */
.nb-export:disabled { background: #e4ebe9; color: #475955; box-shadow: inset 0 0 0 1px #cfdad6; cursor: not-allowed; }
.nb-exports__hint { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 13px; color: var(--nb-muted); }
.nb-exports__hint[hidden] { display: none; }

.nb-dialog { width: min(980px, 96vw); max-height: 90vh; padding: 0; border: 0; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.nb-dialog::backdrop { background: rgba(0, 30, 25, .45); }
.nb-dialog__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: var(--nb-dark); color: #fff; margin: 0; }
.nb .nb-dialog__head h2 { margin: 0; font-size: 17px; line-height: 1.3; color: #fff; }
.nb .nb-close { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; margin: -8px -10px -8px 0; background: none; border: 0; border-radius: 6px; color: #fff; font-size: 26px; line-height: 1; }
.nb-close:hover { background: rgba(255, 255, 255, .12); }

/* In-page prompt/confirm/link dialog. */
.nb-ask { width: min(460px, 94vw); }
.nb-ask__body { display: grid; gap: 10px; padding: 16px 18px 4px; }
.nb-ask__body p { margin: 0; }
.nb-ask__body [hidden] { display: none; }
.nb-ask__field { display: grid; gap: 6px; font-weight: 600; color: var(--nb-dark); }
.nb-ask__field input, .nb-ask__link input { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid #c9d8d3; border-radius: 6px; background: #fff; font: inherit; }
.nb-ask__link { display: flex; gap: 8px; }
.nb-ask__link input { flex: 1; min-width: 0; background: #f7faf9; }
.nb-ask__status { min-height: 1.4em; font-size: 13px; color: var(--nb-muted); }
.nb-ask__actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 18px 16px; }
.nb-ask__actions .nb-btn, .nb-ask__link .nb-btn { min-height: 42px; min-width: 84px; }
.nb-btn--primary { background: var(--nb-accent); border-color: var(--nb-accent); color: #fff; }
.nb-btn--primary:hover { color: #fff; filter: brightness(1.08); }
.nb-btn[hidden] { display: none; }
.nb-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--nb-line); background: #f7faf9; }
.nb-filters input[type=search] { flex: 1 1 220px; }
.nb-filters input[type=search], .nb-filters select { padding: 7px 9px; border: 1px solid var(--nb-line); border-radius: 6px; background: #fff; }
.nb-filters [data-nb-facets] { display: contents; }
.nb-compatible { display: flex; gap: 6px; align-items: center; font-weight: 600; }
.nb-list { padding: 6px 18px; max-height: 60vh; overflow: auto; }
.nb-part { display: grid; grid-template-columns: 64px minmax(0, 1fr) 140px 90px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--nb-line); }
.nb-part.is-incompatible { opacity: .75; }
.nb-part__problem { color: var(--nb-red) !important; }
.nb-choose { border: 0; border-radius: 6px; padding: 8px 12px; background: var(--nb-accent); color: #fff; font-weight: 700; }
.nb-choose:disabled { background: #b8c4c1; }
.nb-empty { padding: 30px 0; text-align: center; color: var(--nb-muted); }
.nb-more { padding: 8px 18px 16px; text-align: center; }
.nb-more-error { margin: 8px 0; padding: 10px 12px; border-radius: 6px; background: #fdecec; color: #9b1c1c; text-align: center; }
.nb-retry { margin-left: 4px; min-height: 32px; padding: 4px 12px; border: 1px solid currentColor; border-radius: 6px; background: #fff; color: inherit; font-weight: 700; }

@media (max-width: 1080px) {
  .nb-layout { grid-template-columns: 1fr; }
  .nb-summary { position: static; }
  .nb-item { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "img body body" "img price qty" "img total tools"; }
  .nb-item img { grid-area: img; width: 56px; height: 56px; }
  .nb-item__body { grid-area: body; }
  .nb-item__price { grid-area: price; text-align: left; }
  .nb-item__qty { grid-area: qty; justify-content: flex-end; }
  .nb-item__total { grid-area: total; text-align: left; }
  .nb-item__tools { grid-area: tools; }
}
@media (max-width: 640px) {
  .nb-table, .nb-table tbody, .nb-table tr, .nb-table th, .nb-table td { display: block; width: 100%; }
  .nb-table th { border-bottom: 0; padding-bottom: 4px; }
  .nb-table td { padding-top: 4px; }
  .nb-part { grid-template-columns: 56px minmax(0, 1fr); }
  .nb-part img { width: 56px; height: 56px; }
  .nb-part__price { grid-column: 2; text-align: left; }
  .nb-choose { grid-column: 2; justify-self: start; }
  /* Chips wrap to a second line instead of scrolling out of view ("Gửi Zalo tư vấn" was cut off at 360px). */
  .nb-actions { flex-wrap: wrap; }
  .nb-btn { flex: 0 0 auto; white-space: nowrap; min-height: 40px; }
  .nb-item__tools button, .nb-item__qty button, .nb-retry { min-width: 40px; min-height: 40px; }
  .nb-slot .nb-btn { min-width: 40px; }
  .nb .nb-close { min-width: 44px; min-height: 44px; }
  .nb-filters select, .nb-filters input[type=search] { min-height: 40px; flex: 1 1 calc(50% - 8px); }
  .nb-dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
  .nb-list { max-height: none; flex: 1; }
  .nb-dialog[open] { display: flex; flex-direction: column; }
  .nb-ask { width: min(460px, 94vw); height: fit-content; max-height: 90dvh; margin: auto; border-radius: 10px; }
  .nb-ask[open] { display: block; }
  .nb-exports { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
  .nb-export { min-height: 48px; padding: 8px 10px; font-size: 13px; gap: 8px; }
  .nb-export--quote { grid-column: 1 / -1; }
  .nb-mobilebar { display: flex; position: sticky; bottom: 0; z-index: 20; gap: 10px; align-items: center; justify-content: space-between; margin: 14px -12px 0; padding: 10px 12px; background: #fff; box-shadow: 0 -4px 16px rgba(0, 0, 0, .1); }
  .nb-mobilebar span { font-weight: 800; color: var(--nb-red); font-size: 17px; white-space: nowrap; }
  .nb-mobilebar button { width: auto; flex: 0 0 auto; min-height: 44px; padding: 10px 14px; }
  .nb-summary .nb-cart, .nb-summary .nb-order { display: none; }
  .nb-mobilebar .nb-mobilebar__cart { background: #fff; color: var(--nb-red); border: 2px solid var(--nb-red); padding: 8px 10px; }
  .nb-mobilebar span { margin-right: auto; }
  .nb-mobilebar span small { display: block; font-size: 12px; font-weight: 600; }
  .nb-mobilebar .nb-mobilebar__cart:disabled { background: #fff; color: #b8c4c1; border-color: #b8c4c1; }
}

@media print {
  body * { visibility: hidden; }
  .nb, .nb * { visibility: visible; }
  .nb { position: absolute; inset: 0 auto auto 0; width: 100%; }
  .nb-print-head { display: block; margin-bottom: 12px; font-size: 13px; }
  .nb-toolbar, .nb-pick, .nb-item__tools, .nb-item__qty button, .nb-cart, .nb-order, .nb-slots, .nb-exports, .nb-mobilebar, .nb-note, .nb-dialog, .nb-notice, .nb-issue--info { display: none !important; }
  .nb-table tr:not(.is-filled) { display: none; }
  .nb-layout { grid-template-columns: 1fr; }
  .nb-summary { position: static; background: none; padding: 0; }
}
@media (max-width: 360px) {
  .nb-mobilebar { gap: 6px; }
  .nb-mobilebar span { font-size: 14px; }
  .nb-mobilebar button { padding: 8px 10px; font-size: 13px; }
}