/* Shared PrintX calculator palette. Scoped to pricing surfaces. */
:root {
  --px-brand-navy: #1c2e60;
  --px-brand-orange: #c84012;
  --px-brand-orange-hover: #aa340d;
  --px-brand-teal: #087f75;
  --px-brand-selection: #edf7f6;
  --px-brand-total: #446084;
  --px-brand-payment: #ededed;
  --px-brand-border: #dce3ea;
  --px-brand-surface: #f5f7f9;
}
html body #tem_module,
html body #pxm-multi { color: var(--px-brand-navy); }
html body #tem_info_lines { background: #eef6fa !important; border-color: #d3e5ef !important; border-left-color: var(--px-brand-teal) !important; }
html body #tem_info_lines strong,
html body #tem_left h3,
html body #tem_right h3 { color: var(--px-brand-navy) !important; }
html body #tem_module #range_option { color: var(--px-brand-navy) !important; }
html body .printx-module-tabs .printx-popular-products { background: var(--px-brand-surface) !important; border-color: var(--px-brand-border) !important; }
html body .printx-module-tabs .printx-popular-item { border-color: var(--px-brand-border) !important; background: #fff !important; }
html body .printx-module-tabs .printx-popular-copy strong { color: var(--px-brand-navy) !important; }
html body .printx-module-tabs .printx-popular-copy em { color: #64748b !important; }
html body .printx-module-tabs .printx-popular-table { background: #fff !important; color: var(--px-brand-teal) !important; border-color: #b8d8d3 !important; }
html body .printx-module-tabs .printx-popular-table:hover { background: #edf9f5 !important; }
html body #tem_totals .pxco_copy_quote_btn,
html body #tem_totals .pxco_add_item_btn,
html body #pxm-multi .pxco_copy_quote_btn,
html body #pxm-multi .pxco_add_item_btn { background: #fff !important; color: var(--px-brand-navy) !important; border: 1px solid #cbd5e1 !important; box-shadow: none !important; }
html body #tem_totals .pxco_copy_quote_btn:hover,
html body #tem_totals .pxco_add_item_btn:hover,
html body #pxm-multi .pxco_copy_quote_btn:hover,
html body #pxm-multi .pxco_add_item_btn:hover { background: #eef3f7 !important; border-color: #96a7ba !important; }
html body #tem_totals .pxco_inline_btn,
html body #pxm-multi .pxco_inline_btn { background: var(--px-brand-orange) !important; border-color: var(--px-brand-orange) !important; color: #fff !important; }
html body #tem_totals .pxco_inline_btn:hover,
html body #pxm-multi .pxco_inline_btn:hover { background: var(--px-brand-orange-hover) !important; border-color: var(--px-brand-orange-hover) !important; }
html body #tem_total_excl,
html body #tem_total_incl,
html body #tem_unit_price,
html body #pxm-grand-total,
html body #tem_totals .pxco_total_base_value { color: var(--px-brand-total) !important; }

html body #option_donGiaGiay.printx-paper-price-low,
html body #tui_donGiaGiay.printx-paper-price-low,
html body #interiorPaperReam.printx-paper-price-low { border-color: #dc2626 !important; color: #b91c1c !important; background: #fff1f2 !important; outline-color: #dc2626 !important; }
.printx-paper-price-warning { display: block; flex: 1 0 100%; margin: 4px 0; color: #b91c1c; font-size: 12px; line-height: 1.4; }
.printx-paper-price-warning[hidden], .printx-paper-price-suggestion[hidden] { display: none !important; }
.printx-paper-price-suggestion { display: block; margin: 4px 0 8px; color: #0f766e; font-size: 12px; }
.printx-paper-options { position: fixed; z-index: 100020; overflow-y: auto; padding: 4px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; box-shadow: 0 5px 18px #0002; box-sizing: border-box; }
.printx-paper-options[hidden] { display: none !important; }
.printx-paper-option { padding: 8px 10px; font-size: 13px; line-height: 1.4; color: #1f2937; cursor: pointer; overflow-wrap: anywhere; }
.printx-paper-option.is-recommended { color: #047857; background: #e8f8ee; font-weight: 700; }
.printx-paper-option:hover, .printx-paper-option[aria-selected="true"] { outline: 1px solid #0f766e; outline-offset: -1px; background: #e0f2fe; }
.printx-paper-option.is-recommended:hover, .printx-paper-option.is-recommended[aria-selected="true"] { background: #ccedd9; }
.printx-paper-options-empty { padding: 8px 10px; color: #64748b; font-size: 13px; }
html body #tui_loaiGiay_search.is-recommended { color: #047857 !important; border-color: #16a34a !important; }
/* One palette for the sheet, multi-product and dimension calculators. */
html body #pxm-multi {
  --pxm-border: var(--px-brand-border);
  --pxm-zone-1: var(--px-brand-surface);
  --pxm-zone-2: #fff;
  --pxm-zone-3: var(--px-brand-payment);
  --pxm-money: var(--px-brand-total);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
html body #pxm-multi .pxm-a3-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
html body #pxm-multi .pxm-summary-right { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body #pxm-multi :is(.pxm-a3-left, .pxm-a3-right, .pxm-a3-group, .pxm-a3-inline .col, .pxm-s-card, .pxm-table-wrap) { min-width: 0; }
html body #pxm-multi .pxm-a3-left,
html body #pxm-multi .pxm-a3-right,
html body #pxm-multi #pxm-extra-card { background: #fff !important; border-color: var(--px-brand-border) !important; }
html body #pxm-multi #pxm-order-card,
html body #tem_totals { background: var(--px-brand-payment) !important; border-color: var(--px-brand-border) !important; }
html body #pxm-multi #pxm-table thead th { background: var(--px-brand-teal) !important; color: #fff !important; }
html body #pxm-multi .pxm-control-bar { background: var(--px-brand-surface) !important; }

html body #pxm-multi :is(#pxm-add-row, #pxm-toggle-costs, #pxm-reset-form, #pxm-add-extra, #a3-dump-to-multi, #a3-reset-fast) {
  background: #fff !important;
  border-color: #cbd5e1 !important;
  color: var(--px-brand-navy) !important;
  box-shadow: none !important;
}
html body #pxm-multi :is(#pxm-add-row, #pxm-toggle-costs, #pxm-reset-form, #pxm-add-extra, #a3-dump-to-multi, #a3-reset-fast):hover {
  background: #eef3f7 !important;
  border-color: #96a7ba !important;
}
html body #pxm-multi .pxm-combine-pill { background: #fff !important; border-color: #cbd5e1 !important; color: var(--px-brand-navy) !important; }
html body #pxm-multi .pxm-combine-pill:has(input:checked),
html body #pxm-multi .active-red,
html body #pxm-multi .pill-tri label.active,
html body #pxm-multi :is(#a3-color-group, #a3-gia-cong-group) label:has(input:checked) {
  background: var(--px-brand-selection) !important;
  border-color: var(--px-brand-teal) !important;
  color: var(--px-brand-teal) !important;
  box-shadow: none !important;
}
html body #pxm-multi input[type="checkbox"],
html body #pxm-multi input[type="radio"],
html body #tem_module input[type="checkbox"],
html body #tem_module input[type="radio"] { accent-color: var(--px-brand-teal); }
html body #pxm-multi button:focus-visible { outline: 2px solid var(--px-brand-teal); outline-offset: 2px; }

html body #pxm-order-card > .pxm-line:has(#pxm-grand-total) { background: transparent !important; border-color: #cbd5e1 !important; box-shadow: none !important; }
html body #pxm-order-card .pxco_total_benefit_sync { border-top: 1px dotted #475569 !important; }
html body #pxm-order-card .pxco_total_sync_payable {
  margin: 6px 0 0 !important;
  padding: 8px 0 2px !important;
  border: 0 !important;
  border-top: 3px solid var(--px-brand-total) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
html body #pxm-order-card .pxco_total_sync_payable strong,
html body #pxm-order-card .pxco_total_base_value,
html body #pxm-order-card #pxm-total-vat { color: var(--px-brand-total) !important; }
html body #pxm-order-card .pxco_inline_btn { box-shadow: none !important; }
html body #pxm-digital-finishing { background: var(--px-brand-surface) !important; border-color: var(--px-brand-border) !important; box-shadow: none !important; }
html body #pxm-digital-finishing .pxm-finishing-count { background: var(--px-brand-teal) !important; }
html body #pxm-digital-finishing .pxm-finishing-toggle { background: #fff !important; color: var(--px-brand-teal) !important; border-color: #b8d8d3 !important; }
html body #pxm-digital-finishing .pxm-finishing-toggle:hover,
html body #pxm-digital-finishing .pxm-finishing-row.is-on { background: var(--px-brand-selection) !important; border-color: var(--px-brand-teal) !important; }
html body #pxm-digital-finishing .pxm-finishing-row.is-on { box-shadow: inset 3px 0 0 var(--px-brand-teal) !important; }
html body .tem-layout-modal .tem-layout-dialog { background: #f0f3f6 !important; border-color: var(--px-brand-border) !important; }
html body .tem-layout-modal .tem-layout-head,
html body .tem-layout-modal .tem-layout-actions { background: #fff !important; border-color: var(--px-brand-border) !important; }
html body .tem-layout-modal .tem-layout-head h3 { color: var(--px-brand-navy); }
html body .tem-layout-modal .tem-method-options .method-chip,
html body .tem-layout-modal .tem-method-options .method-custom { color: var(--px-brand-navy) !important; background: #fff !important; border: 1px solid #d5dee7 !important; }
html body .tem-layout-modal .tem-method-options [data-active="1"] { color: var(--px-brand-teal) !important; background: #edf9f5 !important; border-color: var(--px-brand-teal) !important; box-shadow: inset 0 0 0 1px var(--px-brand-teal); }
html body .tem-layout-modal .tem-method-options [data-active="1"]::after { border-top-color: var(--px-brand-teal) !important; }
html body .tem-layout-modal #tem_layout_apply { background: var(--px-brand-teal) !important; border-color: var(--px-brand-teal) !important; color: #fff !important; }
html body .tem-layout-modal #tem_dump_to_multi { background: #fff !important; color: var(--px-brand-navy) !important; border-color: #cbd5e1 !important; }
html body .printx-module-tabs .printx-tab-btn { color: var(--px-brand-navy) !important; box-shadow: none !important; }
html body .printx-module-tabs .printx-tab-btn.is-active { background: #edf7fa !important; color: var(--px-brand-navy) !important; border-color: #00a9ce !important; }
html body .printx-module-tabs .printx-tab-btn.is-active:is([data-target$="-tab1"], [data-target$="-tab3"]) { background: var(--px-brand-selection) !important; border-color: var(--px-brand-teal) !important; }
.printx-unified-digital .printx-legacy-dimension-tab,
.printx-unified-digital #pxm-multi > .pxm-mode { display: none !important; }
.printx-digital-navigation[hidden] { display: none !important; }
.printx-digital-navigation { margin: 12px 0; padding: 0 12px; box-sizing: border-box; }
.printx-digital-navigation .printx-popular-products { margin: 0 0 12px !important; }
.printx-digital-modes { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 6px 6px; background: #bfe9e6; }
.printx-digital-modes button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; margin: 0; padding: 0 14px; border: 1px solid #dce3ea; border-radius: 6px; background: #fff; color: #1c2e60; font-size: 13px; font-weight: 700; letter-spacing: 0; cursor: pointer; box-shadow: none; }
.printx-digital-modes button:hover { background: #f5f7f9; }
.printx-digital-modes button.is-active { background: var(--px-brand-selection); border-color: var(--px-brand-teal); color: var(--px-brand-teal); }
.printx-digital-modes [data-digital-mode="dimension"] i::before { content: "\e2ca"; }
#tem_quote_restore_notice { padding: 9px 12px; border-left: 3px solid #b45309; background: #fff7ed; color: #8b362d; font-size: 13px; }
#tem_quote_restore_notice[hidden] { display: none; }
@media (max-width: 900px) {
  html body #pxm-multi .pxm-summary-right { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  html body #pxm-multi .pxm-a3-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .printx-digital-navigation { padding-inline: 8px; }
  .printx-digital-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .printx-digital-modes button { padding: 6px 4px; gap: 4px; font-size: 11px; white-space: normal; line-height: 1.3; }
  html body #pxm-multi .pxm-a3-row > label { min-width: 0; width: 100%; }
  html body #pxm-multi .pxm-a3-group { flex-wrap: wrap; flex-basis: 100%; }
  html body #pxm-multi .pxm-a3-inline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body #pxm-multi .pxm-a3-inline::before,
  html body #pxm-multi .pxm-a3-inline::after { display: none; }
  html body #pxm-multi .pxm-a3-inline .col:nth-child(2) { grid-column: 1; grid-row: 1; }
  html body #pxm-multi .pxm-a3-inline .col:nth-child(3) { grid-column: 2; grid-row: 1; }
  html body #pxm-multi .pxm-a3-inline .col:nth-child(1) { grid-column: 1; grid-row: 2; }
  html body #pxm-multi .pxm-a3-inline .col:nth-child(4) { grid-column: 2; grid-row: 2; }
  html body #pxm-multi .pxm-extra-item { grid-template-columns: 22px minmax(0, 1fr) 30px; }
  html body #pxm-multi .pxm-extra-label { grid-column: 1 / -1; grid-row: 1; }
  html body #pxm-multi .pxm-extra-check { grid-column: 1; grid-row: 2; }
  html body #pxm-multi .pxm-extra-amount { grid-column: 2 / -1; grid-row: 2; }
  html body #pxm-multi .pxm-extra-apply { grid-column: 1 / 3; grid-row: 3; }
  html body #pxm-multi .pxm-extra-item .pxm-del { grid-column: 3; grid-row: 3; width: 30px; min-width: 30px; }
}