.customerCreateOverlay { position:fixed; inset:0; z-index:1000; background:#0007; display:flex; align-items:center; justify-content:center; padding:24px; }
.customerCreatePopup { width:900px; max-width:100%; max-height:calc(100dvh - 48px); display:flex; flex-direction:column; background:white; border-radius:6px; overflow:hidden; }
.customerPopupHeader { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid #d7dfe8; flex-shrink:0; }
.customerPopupHeader h2 { margin:0; font-size:23px; }
.customerPopupHeader button { border:0; font-size:25px; background:none; }
.customerPopupForm { min-height:0; display:flex; flex-direction:column; }
.customerPopupBody { overflow:auto; padding:24px; min-height:0; }
.customerPopupBody details { margin-top:24px; }
.customerPopupBody summary { color:#0088ff; cursor:pointer; padding:12px 0; }
.customerPopupFooter { flex-shrink:0; display:flex; justify-content:flex-end; gap:12px; padding:16px 24px; border-top:1px solid #d7dfe8; }
.customerCreatePopup .customerCreatePage { padding:0; overflow:auto; background:white; }
.customerCreatePopup form { display:flex; flex-direction:column; }
.customerCreatePopup .customerCreateGrid { display:block; padding:20px 24px; margin:0; }
.customerCreatePopup .customerCreateRight { margin-top:20px; }
.customerCreatePopup .customerCreateActionBar { position:sticky; bottom:0; top:auto; order:2; padding:16px 24px; margin:0; justify-content:flex-end; border-top:1px solid #d7dfe8; z-index:40; background:white; }
.customerCreatePopup .card { box-shadow:none; border:0; }
.customerAddressMode { display:flex; align-items:center; gap:10px; padding:12px; background:#f4f5f7; }
.customerAddressMode input { appearance:none; width:36px; min-height:20px; height:20px; padding:0; border:0; border-radius:12px; background:#a9b1bc; position:relative; cursor:pointer; flex-shrink:0; }
.customerAddressMode input::after { content:""; position:absolute; width:16px; height:16px; left:2px; top:2px; border-radius:50%; background:white; }
.customerAddressMode input:checked { background:#0088ff; }
.customerAddressMode input:checked::after { left:18px; }
@media(max-width:600px) { .customerCreateOverlay {padding:8px;} .customerCreatePopup {max-height:calc(100dvh - 16px);} .customerCreatePopup .customerCreateGrid {padding:12px;} .customerPopupHeader {padding:14px;} }
.customerAddressPicker { position:relative; min-width:0; }
.customerAddressPicker .customerAddressTrigger { width:100%; min-height:42px; text-align:left; padding:10px 32px 10px 14px; white-space:normal; position:relative; font:inherit; }
.customerAddressTrigger::after { content:""; position:absolute; right:14px; top:45%; border:5px solid transparent; border-top-color:#8994a3; }
.customerAddressPicker .customerAddressPopup { position:absolute; top:100%; left:0; right:0; z-index:30; background:white; border:1px solid #d7dfe8; border-radius:4px; box-shadow:0 4px 14px #0002; padding:8px; }
.customerAddressPicker [hidden] { display:none !important; }
.customerAddressPopup input { width:100%; min-width:0; margin-bottom:8px; }
.customerAddressOptions { max-height:260px; overflow-y:auto; }
.customerAddressOptions button { display:block; width:100%; border:0; border-radius:0; text-align:left; padding:12px; white-space:normal; font:inherit; background:white; }
.customerAddressOptions button:hover,.customerAddressOptions button:focus,.customerAddressOptions button[aria-selected=true] { background:#edf6ff; color:#0088ff; }
.customerAddressEmpty { padding:12px; color:#637184; }

:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-2: #f0f3f6;
  --text: #17202a;
  --muted: #637083;
  --line: #d9e0e7;
  /* Sapo blue and ink; many rules used these without a definition. */
  --blue: #008cff;
  --ink: #17202a;
  --strong: #0f5d4f;
  --strong-2: #0b7a63;
  --danger: #b42318;
  --warn: #a35f00;
  --ok: #0f6b45;
  --shadow: 0 14px 40px rgba(20, 31, 44, 0.08);
}

.paymentSettingsMain {
  display: block;
  min-height: calc(100vh - 65px);
  background: #f3f4f6;
}

.paymentSettingsHeader {
  margin: 0;
}

.paymentSettingsSheet {
  margin: 0 34px 44px;
  padding: 12px 34px 34px;
  background: #fff;
}

.paymentSettingsToolbar {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 72px;
  border-bottom: 1px solid var(--line);
}

.paymentSettingsToolbar .primaryAction {
  min-height: 42px;
  padding: 0 28px;
  font-size: 18px;
}

.paymentSettingsToolbar .linkButton {
  color: var(--blue);
  font-size: 18px;
}

.paymentMethodSection {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 56px;
  padding: 30px 0 34px;
}

.paymentSectionIntro h2,
.paymentIntegratedSection h2 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 22px;
}

.paymentSectionIntro p,
.paymentIntegratedSection > p {
  max-width: 400px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.35;
}

.paymentTablePanel {
  background: #f4f6f8;
  padding: 18px 22px;
}

.paymentSettingsTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.paymentSettingsTable th,
.paymentSettingsTable td {
  height: 52px;
  border-bottom: 1px dotted #d3dae3;
  padding: 0 22px;
  color: var(--text);
  font-size: 18px;
  text-align: left;
  vertical-align: middle;
}

.paymentSettingsTable th {
  height: 44px;
  border-bottom-style: solid;
  font-weight: 700;
}

.paymentSettingsTable .mutedRow td {
  color: #9aa4b2;
}

.paymentSettingsTable .iconCell {
  width: 54px;
  padding-right: 6px;
  text-align: right;
}

.editIconButton,
.docIconButton {
  border: 0;
  background: transparent;
  color: #9aa4b2;
  font-size: 28px;
  line-height: 1;
}

.paymentWarning {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid #ff4d4f;
  border-radius: 999px;
  color: #ff4d4f;
  font-weight: 700;
}

.paymentIntegratedSection {
  padding: 26px 0 0;
}

.paymentIntegratedSection > p {
  max-width: none;
  margin-bottom: 28px;
  color: var(--text);
}

.paymentIntegrationGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 28px;
}

.paymentIntegrationCard {
  position: relative;
  min-height: 238px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
  padding: 28px 34px 24px;
  overflow: hidden;
  background: #f1f3f6;
}

.paymentLogo {
  min-height: 58px;
  display: flex;
  align-items: center;
  color: #767f89;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0;
}

.paymentIntegrationTitle,
.paymentIntegrationNote {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.35;
}

.paymentIntegrationNote span {
  color: #ff4d4f;
}

.paymentIntegrationFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.paymentIntegrationFooter .primaryAction {
  min-width: 94px;
  min-height: 42px;
  font-size: 18px;
}

.paymentEditModal {
  width: min(760px, calc(100vw - 40px));
}

.paymentEditForm {
  display: grid;
  gap: 18px;
}

.paymentBankModal {
  width: min(1180px, calc(100vw - 40px));
}

.bankAccountModal {
  width: min(980px, calc(100vw - 40px));
}

.bankAccountForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 30px;
  padding: 28px 34px 18px;
}

.bankAccountForm .settingsFormField {
  gap: 10px;
  font-size: 18px;
  color: #4f5b6b;
}

.bankAccountForm input,
.bankAccountForm select {
  min-height: 58px;
  font-size: 20px;
}

.requiredMark {
  color: #ff4d4f;
}

.bankAccountFooter {
  justify-content: flex-end;
  gap: 22px;
  padding: 24px 34px 32px;
}

.bankAccountFooter button {
  min-width: 96px;
}

.compactDangerButton {
  min-width: 96px;
}

.compactToolbar {
  min-height: 54px;
  margin-bottom: 14px;
  border-bottom: 0;
}

.modalPaymentLogo {
  min-height: 44px;
}

.vietQrRibbon {
  position: absolute;
  top: 0;
  right: 0;
  width: 112px;
  height: 66px;
  display: grid;
  place-items: center;
  transform: translate(28px, -8px) rotate(45deg);
  border: 2px solid #ff2f45;
  color: #ff2f45;
  font-size: 13px;
  font-weight: 800;
  background: #fff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-size: 14px;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Links everywhere (SKU, mã phiếu, tên…): the app's blue, no underline. Element-level, so any class rule still wins. */
a {
  color: #008cff;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  padding: 0 12px;
  cursor: pointer;
}

:where(button):hover:not(:disabled) {
  background-color: #f2f9ff;
}

:where(button):disabled {
  background-color: #f3f4f5;
  border-color: #f3f4f5;
  color: #a3a8af;
  cursor: not-allowed;
}

input,
select {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  padding: 0 10px;
}

.shell {
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
}

.shell.navCollapsed {
  grid-template-columns: 64px minmax(0, 1fr);
}

.nav {
  background: #111820;
  color: #fff;
  padding: 18px 14px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 160ms ease;
}

.brand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 10px;
  align-items: center;
  margin-bottom: 22px;
}

.brandMark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #16a17d;
  font-weight: 800;
}

.brandLogo {
  color: #fff;
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.navToggle {
  width: 28px;
  min-width: 28px;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  justify-content: center;
}

.navToggle:hover {
  border-color: transparent;
  background: #1d2a35;
}

.brand strong,
.brand span {
  display: block;
}

.brand span {
  color: #aebac7;
  font-size: 12px;
  margin-top: 2px;
}

.nav.collapsed {
  padding-inline: 10px;
}

.nav.collapsed .brand {
  grid-template-columns: 1fr;
  gap: 4px;
  justify-items: center;
}

.nav.collapsed .brandLogo {
  width: 44px;
  font-size: 32px;
}

.nav.collapsed .brandLogo::first-letter {
  color: #fff;
}

.nav.collapsed .brand > div:last-child,
.nav.collapsed .navItems {
  display: none;
}

.navItems {
  display: grid;
  gap: 6px;
}

.navButton {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  background: transparent;
  color: #d7dee7;
  border-color: transparent;
}

.navButton.active,
.navButton:hover {
  background: #1d2a35;
  border-color: #2d3c49;
  color: #fff;
}

.navSub {
  display: grid;
  gap: 4px;
  margin: -2px 0 10px;
  padding-left: 34px;
}

.navSub button {
  min-height: 34px;
  border: 0;
  background: transparent;
  color: #d7dee7;
  text-align: left;
  padding: 0 4px;
}

.navSub button.active,
.navSub button:hover {
  color: #2d9cff;
}

.workspace {
  min-width: 0;
  min-height: 0;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.topbar {
  min-height: 64px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.connection,
.topActions,
.filters {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.connection label {
  color: var(--muted);
  font-size: 12px;
}

.connection input:first-of-type {
  width: 260px;
}

.health {
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  border: 1px solid var(--line);
}

.health.ok {
  color: var(--ok);
  background: #ecf8f2;
  border-color: #b7e1ce;
}

.health.warn {
  color: var(--warn);
  background: #fff7e8;
  border-color: #f4d28f;
}

.topActions a {
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
}

.userBubble {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #7d3ca0;
  color: #fff;
  font-weight: 700;
}

.userName {
  white-space: nowrap;
}

.main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 16px;
  padding: 18px 20px;
}

.ordersMain {
  display: block;
  padding: 0;
}

/* Order-list parity is scoped so other workflow layouts remain unchanged. */
.orderListShell {
  grid-template-columns: 230px minmax(0, 1fr);
  font-size: 14px;
}

.orderListShell .nav {
  padding: 0 4px;
  background: #1c2838;
}

.orderListShell .brand {
  height: 56px;
  margin: 0 -4px 6px;
  padding: 0 12px;
  border-bottom: 1px solid #304052;
}

.orderListShell .brand > div:last-child {
  display: none;
}

/* Collapsed menu: the P sits in the middle of the 56px band, level with the page title, and ⋮ goes just under the line
   (stacked inside the band the P was pushed above the window and left of centre, owner 17/10/2026). */
.orderListShell .nav.collapsed .brand {
  position: relative;
  grid-template-columns: 1fr;
  padding: 0;
  justify-items: center;
}

.orderListShell .nav.collapsed .brandLogo {
  width: auto;
  text-align: center;
}

.orderListShell .nav.collapsed .navToggle {
  position: absolute;
  top: 62px;
  left: 50%;
  transform: translateX(-50%);
}

.orderListShell .navItems {
  gap: 4px;
}

.orderListShell .navButton {
  min-height: 48px;
  padding: 0 16px;
  border-radius: 3px;
  font-size: 14px;
}

.orderListShell .navButton.active {
  background: #3388ee;
  border-color: transparent;
}

.orderListShell .navButton:not(.active) + .navSub {
  display: none;
}

.orderListShell .navSub {
  padding-left: 40px;
  gap: 0;
}

.orderListShell .navSub button {
  min-height: 44px;
  font-size: 14px;
}

.orderListTopbar {
  min-height: 56px;
  padding: 0 32px;
  box-shadow: 0 2px 4px #17202a0d;
}

.orderListTopbar h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
}

.orderListTopbar .topActions {
  gap: 24px;
  font-size: 14px;
}

.orderListTopbar .userBubble {
  width: 32px;
  height: 32px;
  font-weight: 400;
}

.orderConnectionSettings { position: relative; }
.orderConnectionSettings summary { cursor: pointer; list-style: none; padding: 8px; }
.orderConnectionPanel {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 40;
  width: min(340px, calc(100vw - 40px));
  padding: 20px;
  display: grid;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.orderConnectionPanel label { display: grid; gap: 6px; }
.orderConnectionPanel input { width: 100%; min-width: 0; }

.orderListMain .ordersContent {
  background: #eff1f1;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0 32px 24px;
  min-height: calc(100vh - 56px);
}

.orderListMain .sapoPageTitle {
  padding: 8px 0 12px;
  border: 0;
  background: transparent;
}
.orderListMain .toolbarActions { width: 100%; }
.orderListMain .toolbarActions button { background: transparent; font-weight: 400; }
.orderListMain .toolbarActions .primaryAction { margin-left: auto; background: #3388ee; }
.orderListMain .orderSummary { margin: 0 0 16px; border: 0; }
.orderListMain .summaryHeader { padding: 8px 16px; border: 0; }
.orderListMain .summaryHeader strong { font-weight: 500; }
.orderListMain .summaryCard { min-height: 52px; padding: 6px 16px; grid-template-columns: auto 1fr; column-gap: 8px; }
.orderListMain .summaryCard b { height: 20px; min-width: 22px; font-weight: 400; font-size: 13px; }
.orderListMain .summaryCard span { font-size: 13px; }
.orderListMain .summaryCard strong { font-size: 14px; font-weight: 400; }
.orderListMain .orderTabsRail,
.orderListMain .orderFilters,
.orderListMain .orderActiveFilterChips,
.orderListMain .ordersTableWrap { margin-left: 0; margin-right: 0; border-color: #edf0f2; }
.orderListMain .orderTab,
.orderListMain .orderTabsArrow,
.orderListMain .orderTabLabel { min-height: 48px; font-size: 14px; }
.orderListMain .orderFilters { padding: 16px; }
.orderListMain .orderFilters button,
.orderListMain .orderFilters input,
.orderListMain .orderFilters select { border-radius: 3px; font-size: 14px; }
.orderListMain .ordersTable th,
.orderListMain .ordersTable td { height: 52px; padding: 8px 12px; border-color: #edf0f2; font-weight: 400; }
.orderListMain .ordersTable th { background: #f4f6f8; }
.orderListMain .ordersTable .controlCell { width: 32px; padding: 0 6px; }
.orderListMain .ordersTable .pill { padding: 2px 12px; font-size: 13px; }

@media (max-width: 760px) {
  .shell.orderListShell { grid-template-columns: minmax(0, 1fr); }
  .orderListShell .nav { position: static; max-height: none; }
  .orderListShell .navItems { display: flex; overflow-x: auto; gap: 4px; padding-bottom: 6px; }
  .orderListShell .navItems > .navButton { flex: 0 0 auto; width: auto; min-height: 38px; }
  .orderListShell .navSub { display: none; }
  .orderListShell .navButton.active + .navSub { display: flex; flex: 0 0 auto; width: auto; gap: 8px; padding: 0 8px; }
  .orderListShell .navSub button { flex: 0 0 auto; padding: 0 8px; }
  .orderListShell .workspace { min-width: 0; }
  .orderListShell .orderListMain { padding: 0; }
  .orderListTopbar { padding: 12px 16px; flex-wrap: wrap; }
  .orderListTopbar h1 { font-size: 20px; }
  .orderListTopbar .topActions { gap: 12px; }
  .orderListTopbar .topActions > span:not(.userBubble):not(.userName) { display: none; }
  .orderListMain .ordersContent { padding: 0 12px 20px; }
  .orderListMain .orderFilters .search { flex-basis: 100%; }
  .orderListMain .summaryHeader { align-items: flex-start; }
  .orderListMain .summaryHeader > div { min-width: 0; }
}

.paymentSettingsMain {
  display: block;
  grid-template-columns: none;
  gap: 0;
  padding: 0;
}

.paymentSettingsMain .paymentSettingsSheet {
  margin: 0 34px 44px;
}

.ordersContent {
  min-height: calc(100vh - 65px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #f3f4f6;
}

.content,
.detail {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.content {
  overflow: hidden;
}

.pageTitle {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.pageTitle h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.pageTitle p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.filters {
  padding: 14px 18px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}

.search {
  width: min(460px, 100%);
}

.tableWrap {
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

th,
td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}

th {
  color: var(--muted);
  background: #fbfcfd;
  font-size: 12px;
  text-transform: uppercase;
}

tbody tr {
  cursor: pointer;
}

tbody tr:hover {
  background: #f3faf7;
}

.statusCell {
  color: var(--strong);
  font-weight: 700;
}

.empty {
  color: var(--muted);
  text-align: center;
  height: 180px;
}

.detail {
  align-self: start;
  padding: 16px;
  max-height: calc(100vh - 100px);
  overflow: auto;
}

.emptyDetail {
  color: var(--muted);
}

.detailHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.detail h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}

.detail h3 {
  margin: 18px 0 8px;
  font-size: 14px;
}

.detail p {
  margin: 4px 0 0;
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.fact {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px;
  min-width: 0;
}

.fact span,
.fact strong {
  display: block;
  overflow-wrap: anywhere;
}

.fact span {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.fact strong {
  font-size: 13px;
}

.command {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  padding: 12px;
  border-radius: 8px;
  background: #eef8f5;
  border: 1px solid #c5e6dc;
}

.command button {
  grid-column: 2;
  background: var(--strong-2);
  color: #fff;
  border-color: var(--strong-2);
}

.relatedRow {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.relatedRow span,
.muted {
  color: var(--muted);
}

.raw {
  margin-top: 14px;
}

.raw summary {
  cursor: pointer;
  color: var(--strong);
  font-weight: 700;
}

pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #111820;
  color: #eaf0f5;
  border-radius: 8px;
  padding: 12px;
  font-size: 12px;
}

.error,
.notice {
  margin: 12px 18px;
  border-radius: 6px;
  padding: 10px 12px;
}

.error {
  color: var(--danger);
  background: #fff1ef;
  border: 1px solid #ffd1cc;
}

.notice {
  color: var(--ok);
  background: #ecf8f2;
  border: 1px solid #b7e1ce;
}

.sapoPageTitle {
  background: #fff;
  padding: 12px 20px;
}

.sapoPageTitle h1 {
  font-size: 26px;
}

.toolbarActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toolbarActions button {
  border-color: transparent;
}

.splitAction {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

.splitActionMain {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.splitActionToggle {
  min-width: 34px;
  padding: 0 9px;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.splitActionMenu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 260px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
}

.splitActionMenu button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  padding: 10px 12px;
  background: #fff;
  color: var(--text);
  text-align: left;
  font-weight: 600;
}

.splitActionMenu button:hover {
  background: #f3f7fb;
}

.primaryAction {
  background: #008cff;
  border-color: #008cff;
  color: #fff;
  font-weight: 700;
}

.secondaryAction {
  background: #fff;
  border-color: #008cff !important;
  color: #008cff;
  font-weight: 700;
}

.orderSummary {
  margin: 16px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(20, 31, 44, 0.08);
}

.summaryHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.summaryHeader strong {
  margin-right: 14px;
}

.linkButton {
  border: 0;
  background: transparent;
  color: #008cff;
  padding: 0;
}

.summaryCards {
  display: grid;
  grid-template-columns: repeat(7, minmax(150px, 1fr));
  overflow-x: auto;
}

.summaryCard {
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  gap: 4px 8px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  text-align: left;
  padding: 10px 18px;
}

.summaryCard.active {
  background: #eef7ff;
  box-shadow: inset 0 -2px 0 #008cff;
}

.summaryCard span {
  color: var(--muted);
}

.summaryCard b {
  justify-self: start;
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #008cff;
  background: #eaf4ff;
}

.summaryCard strong {
  grid-column: 1 / -1;
  font-size: 18px;
}

.orderTabs,
.orderTabsScroller {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-bottom: 0;
}

.orderTabsRail {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: stretch;
  margin: 0 20px;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: #fff;
}

.orderTabsRail .orderTabsScroller {
  min-width: 0;
  margin: 0;
  border: 0;
}

.orderTabsScroller {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.orderTabsScroller::-webkit-scrollbar {
  display: none;
}

.orderTabsArrow {
  display: grid;
  min-width: 44px;
  min-height: 54px;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: #98a2ad;
  background: #fff;
  font-size: 30px;
  line-height: 1;
}

.orderTab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 54px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--muted);
  background: #fff;
  padding: 0 18px;
  white-space: nowrap;
}

.orderTab.active {
  color: #008cff;
  border-bottom-color: #008cff;
}

.orderTabLabel {
  min-height: 52px;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  padding: 0;
  white-space: nowrap;
}

.tabClose,
.tabCloseButton {
  display: grid;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  place-items: center;
  border: 1px solid #008cff;
  border-radius: 999px;
  color: #008cff;
  background: #fff;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}

.orderFilters {
  margin: 0 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-bottom: 0;
}

.orderFilters .search {
  width: min(840px, 100%);
  flex: 1 1 420px;
}

.filterButton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.filterButton b {
  color: #98a2ad;
  font-size: 15px;
  line-height: 1;
}

.filterButton.active {
  color: #008cff;
  border-color: #008cff;
  background: #f1f8ff;
}

.orderActiveFilterChips {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
}

.activeFilterChip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  border-color: #b7dbff;
  border-radius: 999px;
  color: #008cff;
  background: #f1f8ff;
  padding: 0 10px 0 12px;
}

.activeFilterChip b {
  font-size: 17px;
  line-height: 1;
}

.filterDrawerBackdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: flex-end;
  background: rgba(15, 23, 42, 0.28);
}

.filterDrawer {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(420px, 100vw);
  height: 100%;
  background: #fff;
  box-shadow: -12px 0 30px rgba(15, 23, 42, 0.18);
  animation: filterDrawerIn 160ms ease-out;
}

@keyframes filterDrawerIn {
  from {
    transform: translateX(28px);
    opacity: 0.7;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.filterDrawerHeader,
.filterDrawerFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.filterDrawerHeader h2 {
  margin: 0;
  font-size: 22px;
}

.filterDrawerHeader p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.drawerCloseButton {
  width: 34px;
  min-width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  color: #667085;
  background: #f4f6f8;
  font-size: 22px;
  line-height: 1;
}

.filterDrawerBody {
  display: grid;
  align-content: start;
  gap: 18px;
  overflow: auto;
  padding: 20px;
}

.filterDrawerBody label {
  display: grid;
  gap: 8px;
}

.filterDrawerBody label span,
.quickFilterGroup strong {
  color: var(--text);
  font-weight: 700;
}

.filterDrawerBody select {
  background: #fff;
}

.quickFilterGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.quickFilterGroup strong {
  flex-basis: 100%;
}

.filterDrawerFooter {
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.bulkActionBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 20px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: #f6fbff;
}

.bulkActionBar strong {
  margin-right: 8px;
}

.iconButton {
  border: 0;
  background: transparent;
  padding: 0;
  min-height: auto;
  color: var(--muted);
}

.ordersTableWrap {
  margin: 0 20px;
  border: 1px solid var(--line);
  background: #fff;
}

.ordersTable {
  min-width: 1840px;
  table-layout: auto;
}

.deliveryCollationsTable {
  min-width: 1180px;
}

.shipmentsTable {
  min-width: 1640px;
}

.shipmentDetailPage {
  padding-bottom: 88px;
}

.shipmentTopBar {
  align-items: center;
}

.shipmentDetailPage .orderTitleBlock {
  align-items: flex-start;
}

.shipmentDetailPage .orderTitleBlock h1 {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.shipmentDetailPage .orderTitleBlock h1 small {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.shipmentPrintActions {
  margin-top: 14px;
}

.shipmentDetailGrid {
  grid-template-columns: minmax(0, 1fr) 304px;
}

.shipmentInfoHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.shipmentInfoHeader strong {
  font-size: 16px;
}

.shipmentBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: #d9eef4;
  color: #415466;
  padding: 3px 10px;
  font-size: 13px;
}

.shipmentBadge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
}

.shipmentAddressGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
  gap: 44px;
  padding-top: 18px;
}

.shipmentAddressGrid .metaRow,
.shipmentDetailPage .orderSideColumn .metaRow {
  grid-template-columns: 160px minmax(0, 1fr);
}

.shipmentLineTable {
  border-collapse: collapse;
  margin: -18px -24px 0;
  width: calc(100% + 48px);
}

.shipmentLineTable th,
.shipmentLineTable td {
  border-bottom: 1px solid var(--line);
  padding: 16px 18px;
  text-align: left;
  vertical-align: top;
}

.shipmentLineTable th {
  background: #f5f6f8;
  color: var(--text);
  font-weight: 700;
}

.shipmentLineTable td:nth-child(n+3),
.shipmentLineTable th:nth-child(n+3) {
  text-align: right;
}

.shipmentLineTable td small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.redText {
  color: var(--danger);
}

.shipmentTotalBox {
  width: min(340px, 100%);
  margin: 28px 0 0 auto;
  display: grid;
  gap: 10px;
}

.shipmentTotalBox .summaryLine strong {
  text-align: right;
}

.shipmentDetailPage .orderSideColumn select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px 12px;
  font: inherit;
  background: white;
}

/* "Tình trạng" card of a shipment's page (Sapo's status select). */
.shipmentDetailPage .orderSideColumn .shipmentStateRow {
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: center;
  margin-bottom: 0;
}

/* Sửa Tiền thu hộ COD on a shipment with a POS waybill: reminder to change the carrier's COD on its site. */
.sapoShipmentActionModal .codCarrierReminder {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 4px;
  background: #fff7ed;
  color: #b45309;
}

/* Vận đơn list: ticked rows and Sapo's "Đã chọn N … / Chọn thao tác" in the header row. */
.shipmentsTable tr.selectedRow td {
  background: #f5faff;
}

.shipmentsTable th.shipmentBulkHead {
  font-weight: 500;
}

.shipmentBulkHead span {
  margin-right: 24px;
}

.shipmentBulkSelect {
  min-width: 220px;
  min-height: 34px;
  border: 1px solid #0088ff;
  border-radius: 4px;
  padding: 4px 10px;
  font: inherit;
  background: #fff;
}

.shipmentBulkResults {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.shipmentBulkResults th,
.shipmentBulkResults td {
  border-bottom: 1px solid var(--line);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}

.shipmentBulkOrdersModal {
  width: min(760px, calc(100vw - 32px));
}

.shipmentBottomActions {
  position: fixed;
  left: var(--sidebar-width);
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 48px;
  border-top: 1px solid var(--line);
  background: #f4f6f8;
}

.ordersTable th,
.ordersTable td {
  height: 56px;
  font-size: 14px;
  background: #fff;
}

.ordersTable th {
  color: var(--text);
  background: #f4f6f8;
  font-weight: 700;
  text-transform: none;
}

.controlCell {
  width: 42px;
  text-align: center;
}

.expandButton,
.orderLink,
.gearButton {
  border: 0;
  background: transparent;
  min-height: 24px;
  padding: 0;
}

.expandButton {
  color: #98a2ad;
  font-size: 26px;
}

.orderLink {
  color: #008cff;
}

/* A list's code / name as a real link (listDetailLink in app.js), boxed like the button it replaced. */
a.orderLink {
  display: inline-block;
  min-height: 0;
}

.pill {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border-radius: 999px;
  padding: 0 12px;
  color: #56616f;
  background: #eef2f7;
  border: 1px solid #d7dee7;
}

.pill.orange {
  color: #d67900;
  background: #fff7e8;
  border-color: #f6c56f;
}

.pill.purple {
  color: #6956e5;
  background: #f2f0ff;
  border-color: #bdb8ff;
}

.pill.red {
  color: var(--danger);
  background: #fff1ef;
  border-color: #ffd1cc;
}

.pill.green {
  color: #06915f;
  background: #ebfff7;
  border-color: #8eeac9;
}

.pill.blue {
  color: #0078e8;
  background: #eef7ff;
  border-color: #9bd0ff;
}

.pill.gray {
  color: #667085;
  background: #f4f6f8;
  border-color: #cfd6de;
}

.dotCell {
  text-align: center;
  font-size: 22px;
}

.expandedRow td {
  height: auto;
  background: #f8fafc;
}

.expandedPanel {
  display: flex;
  gap: 18px;
  padding: 10px 20px;
  color: var(--muted);
}

.paginationFooter {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin: 0 20px 24px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-top: 0;
  background: #fff;
  color: var(--muted);
}

.pages {
  display: flex;
  gap: 4px;
}

.pages button {
  min-width: 32px;
}

.pages button.active {
  color: #fff;
  background: #008cff;
  border-color: #008cff;
}

.pageSizeButton {
  min-width: 62px;
  margin: 0 6px;
}

.modalBackdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.28);
}

.columnConfigModal {
  width: min(980px, calc(100vw - 40px));
  max-height: calc(100vh - 52px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.22);
}

.smallModal {
  width: min(560px, calc(100vw - 40px));
  max-height: calc(100vh - 52px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.22);
}

.historyModal {
  width: min(1120px, calc(100vw - 40px));
  max-height: calc(100vh - 52px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.22);
}

.smallModalBody {
  min-height: 0;
  overflow: auto;
  padding: 20px 22px;
}

.modalHeader,
.modalFooter {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}

.modalHeader h2 {
  margin: 0;
  font-size: 20px;
}

.modalHeader button {
  min-width: 34px;
  border: 0;
  font-size: 24px;
}

.columnConfigBody {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  overflow: hidden;
}

.columnPicker,
.columnOrder {
  min-height: 0;
  overflow: auto;
  padding: 20px 22px;
}

.columnPicker {
  border-right: 1px solid var(--line);
}

.columnPicker h3,
.columnOrder h3 {
  margin: 0 0 14px;
  font-size: 16px;
}

.columnOptionList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin-top: 16px;
}

.columnOptionList.oneColumn {
  grid-template-columns: 1fr;
  margin-top: 0;
}

.columnOption {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 32px;
  color: var(--text);
}

.columnOrderList {
  display: grid;
  gap: 8px;
}

.columnOrderItem {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #f8fafc;
}

.columnOrderItem span {
  color: #98a2ad;
}

.modalFooter {
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.modalFooter > div {
  display: flex;
  gap: 10px;
}

.assistantBubble {
  display: none !important;
}

.receiptVouchersTable th,
.receiptVouchersTable td {
  white-space: nowrap;
}

.receiptVoucherForm {
  display: grid;
  gap: 16px;
}

.receiptVoucherDetailMain .ordersContent {
  min-height: calc(100vh - 65px);
  padding: 0 32px 56px;
  background: #eef0f2;
}

.receiptVoucherDetailMain .sapoPageTitle,
.receiptVoucherDetailMain .receiptVoucherDetailGrid {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.receiptVoucherDetailMain .settingsDetailHeader {
  min-height: 56px;
  margin: 0 -32px 22px;
  padding: 0 max(32px, calc((100% - 1180px) / 2 + 32px));
  border-bottom: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 1px 5px rgba(20, 31, 44, 0.08);
}

.receiptVoucherDetailMain .sapoPageTitle {
  display: block;
  padding: 0 0 14px;
  margin-bottom: 10px;
  border-bottom: 0;
  background: transparent;
}

.receiptVoucherDetailMain .settingsDetailHeader .backButton {
  color: #6b7787;
}

.receiptVoucherDetailMain .sapoPageTitle > div:first-child {
  display: flex;
  align-items: center;
  gap: 14px;
}

.receiptVoucherDetailMain .sapoPageTitle h1 {
  margin-bottom: 0;
}

.receiptVoucherDetailMain .sapoPageTitle p {
  margin: 0;
}

.receiptVoucherPrintGroup {
  display: inline-flex;
  align-items: stretch;
  margin-top: 8px;
}

.receiptVoucherPrintGroup button {
  border: 1px solid var(--line);
  background: #fff;
  font-weight: 700;
  min-height: 44px;
}

.receiptVoucherPrintGroup button:first-child {
  border-radius: 4px 0 0 4px;
  padding: 0 24px;
}

.receiptVoucherPrintCaret {
  width: 48px;
  border-left: 0 !important;
  border-radius: 0 4px 4px 0;
  color: #9aa3af;
}

.receiptVoucherDetailGrid {
  display: grid;
  grid-template-columns: minmax(680px, 1fr) 320px;
  gap: 28px;
  align-items: start;
  margin-top: 12px;
}

.receiptVoucherCreatePage .settingsDetailHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.receiptVoucherCreatePage .settingsDetailHeader h1 {
  font-size: 20px;
  margin: 12px 0;
}
.receiptVoucherCreatePage .receiptVoucherDetailGrid {
  grid-template-columns: minmax(0, 2.12fr) minmax(280px, 1fr);
}

.receiptVoucherCreatePage .ordersContent { min-height: 100vh; }
.receiptVoucherCreatePage .settingsDetailHeader h1 { font-size: 14px; font-weight: 400; color: #637381; }
.receiptVoucherCreatePage .settingsDetailHeader { position: sticky; top: 0; z-index: 3; }
.receiptVoucherCreatePage .receiptVoucherDetailCard h2 { font-size: 16px; font-weight: 500; padding: 16px 24px; }
.receiptVoucherCreatePage .receiptVoucherDetailForm.twoColumns { align-items: start; gap: 20px 24px; }
.receiptVoucherCreatePage .receiptVoucherDetailForm > label,
.receiptVoucherCreatePage .receiptVoucherDetailForm > .settingsFormField,
.receiptVoucherCreatePage .receiptVoucherSideForm > label {
  align-content: start; gap: 8px; font-size: 14px; font-weight: 400; line-height: 20px;
}
.receiptVoucherCreatePage .receiptVoucherDetailForm input,
.receiptVoucherCreatePage .receiptVoucherDetailForm select,
.receiptVoucherCreatePage .receiptVoucherSideForm input,
.receiptVoucherCreatePage .receiptVoucherSideForm select {
  box-sizing: border-box; width: 100%; min-width: 0; height: 40px; min-height: 40px;
  padding: 0 12px; font-size: 14px; font-weight: 400;
}
.receiptVoucherCreatePage .receiptVoucherSideForm textarea {
  box-sizing: border-box; height: 72px; min-height: 72px; padding: 10px 12px;
  font-size: 14px; font-weight: 400; resize: vertical;
}
.receiptVoucherCreatePage .receiptVoucherOptions label { font-size: 14px; font-weight: 400; }
.receiptVoucherCreatePage .receiptVoucherOptions input[type="checkbox"] { min-height: 16px; width: 16px; height: 16px; margin: 0; padding: 0; }
.receiptVoucherCreatePage .receiptVoucherDetailForm > .settingsFormField > button { font-size: 13px; font-weight: 400; min-height: 28px; }
.receiptVoucherCreatePage .receiptVoucherDetailForm label > button,
.receiptVoucherCreatePage .voucherLocationField > button {
  justify-self: start; padding: 0; min-height: 24px; background: none; border: 0;
  color: #0088ff; font-size: 13px; font-weight: 400; text-align: left;
}
.receiptVoucherCreatePage .receiptVoucherDetailCard > .orderLink { margin: 0 24px 20px; }
.voucherCreateNotice {
  max-width: 1180px; margin: 0 auto 16px; padding: 12px 16px; box-sizing: border-box;
  border: 1px solid #f4b4b4; border-radius: 4px; background: #fff3f1;
  color: #b42318; font-size: 14px; line-height: 20px; overflow-wrap: anywhere;
}
.receiptVoucherCreatePage .receiptVoucherDetailForm > label,
.receiptVoucherCreatePage .receiptVoucherDetailSide {
  min-width: 0;
}
@media (max-width: 1100px) {
  .receiptVoucherCreatePage .receiptVoucherDetailGrid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .receiptVoucherCreatePage .receiptVoucherDetailForm.twoColumns { grid-template-columns: 1fr; }
}

.receiptVoucherDetailLeft,
.receiptVoucherDetailSide {
  display: grid;
  gap: 22px;
}

.receiptVoucherDetailCard {
  background: #fff;
  border: 1px solid #dfe5ec;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(20, 31, 44, 0.08);
  margin-top: 0;
  padding: 0;
  overflow: hidden;
}

.receiptVoucherDetailCard h2 {
  margin: 0;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 18px;
}

.receiptVoucherFacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 8px 22px 22px;
}

.receiptVoucherFact {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #eef2f7;
}

.receiptVoucherFact span {
  color: var(--muted);
}

.receiptVoucherFact strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.receiptVoucherDetailForm {
  padding: 22px 24px 24px;
}

.receiptVoucherDetailForm.twoColumns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
  row-gap: 20px;
}

.receiptVoucherDetailForm label,
.receiptVoucherSideForm label {
  display: grid;
  gap: 10px;
  color: #5f6b7a;
  font-weight: 500;
}

.receiptVoucherDetailForm input,
.receiptVoucherDetailForm select,
.receiptVoucherSideForm textarea {
  width: 100%;
  border: 1px solid #d5dbe3;
  border-radius: 4px;
  min-height: 46px;
  padding: 0 14px;
  background: #fff;
  color: #17212f;
  font: inherit;
}

.receiptVoucherDetailForm input:disabled,
.receiptVoucherDetailForm select:disabled {
  background: #f4f6f8;
  color: #7a8491;
  opacity: 1;
}

.receiptVoucherDetailForm .moneyInput {
  text-align: right;
}

.receiptVoucherPayerLink {
  justify-self: start;
  min-height: 46px;
  padding: 0;
  font-weight: 500;
}

.receiptVoucherOptions {
  display: grid;
  gap: 18px;
  padding: 0 24px 22px;
}

.receiptVoucherOptions label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  color: #17212f;
}

.receiptVoucherOptions input {
  width: 18px;
  height: 18px;
}

.receiptVoucherAutoNote {
  margin: 0;
  padding: 0 24px 24px;
  color: #17212f;
}

.receiptVoucherSideCard {
  margin-top: 0;
}

.receiptVoucherSideFacts {
  display: grid;
  gap: 14px;
  padding: 20px 24px 24px;
}

.receiptVoucherSideFacts > div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 8px;
}

.receiptVoucherSideFacts span {
  color: #17212f;
}

.receiptVoucherSideFacts strong {
  font-weight: 600;
  color: #17212f;
}

.receiptVoucherSideForm {
  display: grid;
  gap: 22px;
  padding: 20px 24px 24px;
}

.receiptVoucherSideForm textarea {
  min-height: 92px;
  padding: 14px;
  resize: vertical;
}

@media (max-width: 1100px) {
  .receiptVoucherDetailGrid {
    grid-template-columns: 1fr;
  }

  .receiptVoucherDetailMain .sapoPageTitle,
  .receiptVoucherDetailMain .receiptVoucherDetailGrid {
    max-width: 100%;
  }
}

.statusGreen {
  color: #16a36a;
}

.statusRed {
  color: #ef4444;
}

.receiptVoucherTypeManager {
  width: min(1480px, calc(100vw - 44px));
  max-height: calc(100vh - 44px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 4px;
  background: #f3f5f7;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
}

.receiptVoucherTypeManagerHeader {
  background: #fff;
}
.main.voucherTypePage { display:block; min-width:0; }
.voucherTypePage .receiptVoucherTypeManager { width:100%; max-height:none; border-radius:0; box-shadow:none; }
.voucherTypePage .receiptVoucherTypeManagerBody { margin:0 20px; }
.voucherTypePage .receiptVoucherTypeManagerBody > .search { width:min(480px,calc(100% - 32px)); }
.voucherTypePage .receiptVoucherTypeTable td { white-space:normal; overflow-wrap:anywhere; }
.voucherTypePage .receiptVoucherTypeTable th { white-space:normal; text-overflow:clip; }
.voucherTypePage .receiptVoucherTypeTable { min-width:780px; }
@media (max-width:700px) {
  .voucherTypePage .receiptVoucherTypeManagerBody { margin:0 8px; }
  .voucherTypePage .receiptVoucherTypeManagerHeader h2 { font-size:20px; }
}

.receiptVoucherTypeManagerHeader > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.receiptVoucherTypeManagerHeader h2 {
  font-size: 24px;
}

.receiptVoucherTypeManagerToolbar {
  display: flex;
  justify-content: flex-end;
  padding: 14px 24px;
}

.receiptVoucherTypeManagerBody {
  min-height: 0;
  overflow: auto;
  margin: 0 24px;
  background: #fff;
}

.receiptVoucherTypeManagerBody > .search {
  width: calc(100% - 32px);
  margin: 16px;
}

.receiptVoucherTypeTable th,
.receiptVoucherTypeTable td {
  height: 52px;
  white-space: nowrap;
}

.receiptVoucherTypeEditModal {
  width: min(900px, calc(100vw - 48px));
}

.receiptVoucherTypeEditForm {
  display: grid;
  gap: 18px;
}

.receiptTypeCountedOption {
  justify-content: flex-start;
  font-size: 18px;
}

.receiptTypeNestedBackdrop {
  z-index: 24;
}

.infoDot {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid #1688ff;
  border-radius: 999px;
  color: #1688ff;
  font-size: 12px;
  font-weight: 700;
}

.orderDetailPage {
  padding: 0 20px 28px;
  background: #f3f4f6;
}

.productDetailPage {
  min-height: calc(100vh - 65px);
  padding: 0 20px 28px;
  background: #f3f4f6;
}

.orderActionBar,
.orderTitleBlock {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--line);
  margin: 0 -20px;
  padding: 10px 20px;
}

.orderActionBar button {
  border-color: transparent;
}

.detailActions,
.inlineActions,
.cardActions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.rightAlignedActions {
  justify-content: flex-end;
}

.sourceTraceNotice {
  margin: 16px 24px 0;
}

.dangerButton {
  color: #ef1f1f;
  border-color: #ff4d4d;
  background: #fff;
}

.dangerOutlineButton {
  min-width: 188px;
  color: #ff3b3b;
  border-color: #ff6868 !important;
  background: #fff;
  font-weight: 600;
}

.orderTitleBlock {
  align-items: flex-start;
  padding-top: 14px;
}

.orderTitleBlock h1 {
  display: inline-block;
  margin: 0 14px 0 0;
  font-size: 24px;
}

.orderSupplierTitleBlock {
  justify-content: flex-start;
}

.orderSupplierTitleBlock small {
  margin-right: 14px;
  color: var(--muted);
}

.orderSupplierInlineActions {
  margin: 18px 0;
}

.orderSupplierDetailGrid {
  margin-top: 0;
}

.orderSupplierProductPanel {
  margin-top: 18px;
}

.orderSupplierProductFooter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  padding: 18px 20px;
  border-top: 1px solid var(--line);
}

.notesBlock h4 {
  margin: 0 0 8px;
}

.notesBlock p {
  margin: 0 0 18px;
}

.orderSupplierLineProduct {
  display: grid;
  gap: 4px;
  min-width: 260px;
}

.orderSupplierLineSku {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.orderSupplierLineSku a {
  color: #008cff;
  text-decoration: none;
}

.orderSupplierLineNote {
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  overflow-wrap: anywhere;
}

.orderSupplierLineName {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}

.orderSupplierLineInfo {
  flex-shrink: 0;
  min-height: 0;
  padding: 0 2px;
  border: 0;
  background: none;
  color: #008cff;
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
}

.orderSupplierLinePreview {
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 24px 28px;
  background: #fff;
  border-radius: 6px;
}

.orderSupplierLinePreviewHeader {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
}

.orderSupplierLinePreviewHeader h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 500;
}

.orderSupplierLinePreviewLink {
  color: #008cff;
  text-decoration: none;
}

.orderSupplierLinePreviewPrice {
  display: flex;
  gap: 32px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px dashed var(--line);
}

.orderSupplierLinePreviewPrice strong {
  font-size: 18px;
}

.orderSupplierLinePreview h3 {
  margin: 18px 0 12px;
  font-size: 16px;
  font-weight: 500;
}

.orderSupplierLinePreviewFooter {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

/* Supplier and order cards like Sapo. Scoped with the page class so they outrank the shared
   .documentDetail rules that come later in this file. */
.orderSupplierDetailPage .orderSupplierDetailGrid .detailCardHeader {
  min-height: 0;
  padding: 16px 20px 0;
  border-bottom: 0;
}

.orderSupplierDetailPage .orderSupplierDetailGrid .detailCardHeader h3 {
  font-size: 17px;
  font-weight: 500;
}

.orderSupplierDetailPage .orderSupplierDetailGrid .detailCardBody {
  padding: 10px 20px 18px;
  font-size: 14px;
}

.orderSupplierDetailPage .orderSupplierDetailGrid .supplierCreateBody {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 45%);
  gap: 24px;
}

.orderSupplierDetailPage .orderSupplierDetailGrid .supplierNameLine {
  margin: 0 0 10px;
  font-size: 17px;
}

.orderSupplierDetailPage .orderSupplierDetailGrid .supplierCreateBody p {
  margin: 0 0 6px;
}

.orderSupplierDetailPage .orderSupplierDetailGrid .supplierCreateBody p > strong {
  font-weight: 400;
}

.orderSupplierDetailPage .orderSupplierDetailGrid .supplierStatsBox {
  max-width: none;
  margin-top: 0;
  gap: 0;
  padding: 8px 22px;
}

.orderSupplierDetailPage .orderSupplierDetailGrid .supplierStatsBox .summaryLine {
  min-height: 34px;
}

/* Both cards as tall as the taller one; with 34px lines the supplier card is no taller than
   Thông tin đơn đặt hàng (owner 15/10/2026). */
.orderSupplierDetailPage .orderSupplierDetailGrid > :is(.orderMainColumn, .orderSideColumn) {
  align-content: stretch;
}

.orderSupplierDetailPage .orderSupplierDetailGrid .supplierStatsBox .summaryLine span {
  color: var(--text);
}

.orderSupplierDetailPage .orderSupplierDetailGrid .supplierStatsBox .summaryLine strong {
  font-weight: 400;
}

.orderSupplierDetailPage .orderSupplierDetailGrid .orderSideColumn .metaRow {
  grid-template-columns: minmax(110px, 36%) minmax(0, 1fr);
  gap: 24px;
  margin: 0 0 14px;
  font-size: 14px;
}

.orderSupplierDetailPage .orderSupplierDetailGrid .orderSideColumn .metaRow span {
  color: var(--muted);
}

.orderSupplierDetailPage .orderSupplierDetailGrid .orderSideColumn .metaRow strong {
  position: relative;
  font-weight: 400;
}

.orderSupplierDetailPage .orderSupplierDetailGrid .orderSideColumn .metaRow strong::before {
  content: ":";
  position: absolute;
  left: -16px;
  color: var(--muted);
}

@media (max-width: 760px) {
  .orderSupplierDetailPage .orderSupplierDetailGrid .supplierCreateBody {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Purchase order detail like Sapo; the page class outranks the shared .documentDetail rules. */
.purchaseOrderDetailPage .purchaseOrderTopGrid .detailCardHeader {
  min-height: 0;
  padding: 16px 20px 0;
  border-bottom: 0;
}

.purchaseOrderDetailPage .purchaseOrderTopGrid .detailCardHeader h3 {
  font-size: 17px;
  font-weight: 500;
}

.purchaseOrderDetailPage .purchaseOrderTopGrid .detailCardBody {
  padding: 10px 20px 18px;
  font-size: 14px;
}

.purchaseOrderDetailPage .purchaseOrderTopGrid .purchaseOrderSupplierBody {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 45%);
  gap: 24px;
}

.purchaseOrderDetailPage .purchaseOrderTopGrid .supplierNameLink {
  margin-bottom: 8px;
  font-size: 17px;
}

.purchaseOrderDetailPage .purchaseOrderTopGrid .purchaseOrderSupplierBody p {
  margin: 0 0 8px;
}

.purchaseOrderDetailPage .purchaseOrderTopGrid .supplierPhoneLine {
  font-size: 17px;
}

.purchaseOrderDetailPage .purchaseOrderTopGrid .supplierAddressLabel {
  font-weight: 500;
}

.purchaseOrderDetailPage .purchaseOrderTopGrid .supplierDebtBox {
  gap: 0;
  padding: 8px 22px;
}

.purchaseOrderDetailPage .purchaseOrderTopGrid .supplierDebtBox > div {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 34px;
}

.purchaseOrderDetailPage .purchaseOrderTopGrid .supplierDebtBox strong {
  font-weight: 400;
}

.purchaseOrderDetailPage .purchaseOrderTopGrid .purchaseOrderInfoGrid .metaRow {
  grid-template-columns: minmax(110px, 36%) minmax(0, 1fr);
  gap: 16px;
  margin: 0 0 12px;
  font-size: 14px;
}

.purchaseOrderDetailPage .purchaseOrderTopGrid .purchaseOrderInfoGrid .metaRow span {
  color: var(--muted);
}

.purchaseOrderDetailPage .purchaseOrderTopGrid .purchaseOrderInfoGrid .metaRow strong {
  position: relative;
  font-weight: 400;
}

.purchaseOrderDetailPage .purchaseOrderTopGrid .purchaseOrderInfoGrid .metaRow strong::before {
  content: ":";
  position: absolute;
  left: -10px;
}

.purchaseOrderDetailPage .purchaseOrderStatusPanel .compactPanelHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 760px) {
  .purchaseOrderDetailPage .purchaseOrderTopGrid .purchaseOrderSupplierBody {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Stock transfer detail like Sapo; the page class outranks the shared .documentDetail rules. */
.stockTransferDetailPage .stockTransferTimeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  width: auto;
  min-width: 420px;
  padding-top: 0;
}

.stockTransferDetailPage .stockTransferStep {
  display: grid;
  justify-items: center;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.stockTransferDetailPage .stockTransferStep strong {
  margin: 6px 0 2px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 400;
}

.stockTransferDetailPage .stockTransferStepLine {
  position: relative;
  width: 100%;
  height: 26px;
  display: grid;
  place-items: center;
}

.stockTransferDetailPage .stockTransferStepLine::after {
  content: "";
  position: absolute;
  top: 12px;
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 2px;
  background: #d7dee7;
}

.stockTransferDetailPage .stockTransferStep.done .stockTransferStepLine::after {
  background: var(--blue);
}

.stockTransferDetailPage .stockTransferStep:last-child .stockTransferStepLine::after {
  display: none;
}

.stockTransferDetailPage .stockTransferDot {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid #d7dee7;
  border-radius: 999px;
  background: #fff;
  color: #98a2ad;
  font-size: 13px;
  font-weight: 700;
}

.stockTransferDetailPage .stockTransferStep.done .stockTransferDot {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.stockTransferDetailPage .stockTransferInfoGrid .metaRow {
  grid-template-columns: minmax(110px, 40%) minmax(0, 1fr);
  gap: 20px;
  margin: 0 0 10px;
  font-size: 14px;
}

.stockTransferDetailPage .stockTransferInfoGrid .metaRow span {
  color: var(--muted);
}

.stockTransferDetailPage .stockTransferInfoGrid .metaRow strong {
  position: relative;
  font-weight: 400;
}

.stockTransferDetailPage .stockTransferInfoGrid .metaRow strong::before {
  content: ":";
  position: absolute;
  left: -14px;
  color: var(--muted);
}

.stockTransferDetailPage .stockTransferTotals {
  width: min(460px, 100%);
  margin-left: auto;
  padding: 16px 24px 20px;
  display: grid;
  gap: 0;
  font-size: 14px;
}

.stockTransferDetailPage .stockTransferTotals > .stockTransferTotalsGroup {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 0;
}

.stockTransferDetailPage .stockTransferTotals > .stockTransferTotalsGroup:not(:last-child) {
  border-bottom: 1px dashed var(--line);
}

.stockTransferDetailPage .stockTransferTotalsGroup > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 0;
  border: 0;
}

.stockTransferDetailPage .stockTransferTotalsGroup > div > :last-child {
  text-align: right;
}

.stockTransferDetailPage .stockTransferTotalsGroup strong {
  font-weight: 500;
}

/* Stocktake detail info labels like Sapo: muted, with a ':' column. */
.stockAdjustmentDetailPage .stockAdjustmentInfoGrid .metaRow {
  grid-template-columns: minmax(110px, 40%) minmax(0, 1fr);
  gap: 20px;
  margin: 0 0 10px;
  font-size: 14px;
}

.stockAdjustmentDetailPage .stockAdjustmentInfoGrid .metaRow span {
  color: var(--muted);
}

.stockAdjustmentDetailPage .stockAdjustmentInfoGrid .metaRow strong {
  position: relative;
  font-weight: 400;
}

.stockAdjustmentDetailPage .stockAdjustmentInfoGrid .metaRow strong::before {
  content: ":";
  position: absolute;
  left: -14px;
  color: var(--muted);
}

/* Price adjustment info labels like Sapo: muted, with a ':' column. */
.priceAdjustmentDetailPage .priceAdjustmentInfoGrid .metaRow {
  grid-template-columns: minmax(100px, 40%) minmax(0, 1fr);
  gap: 20px;
  margin: 0 0 10px;
  font-size: 14px;
}

.priceAdjustmentDetailPage .priceAdjustmentInfoGrid .metaRow span {
  color: var(--muted);
}

.priceAdjustmentDetailPage .priceAdjustmentInfoGrid .metaRow strong {
  position: relative;
  font-weight: 400;
}

.priceAdjustmentDetailPage .priceAdjustmentInfoGrid .metaRow strong::before {
  content: ":";
  position: absolute;
  left: -14px;
  color: var(--muted);
}

.imagePlaceholder {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #c7cdd6;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.orderTimeline {
  min-width: 560px;
  display: grid;
  grid-template-columns: repeat(5, minmax(90px, 1fr));
  gap: 8px;
}

.timelineStep {
  position: relative;
  display: grid;
  gap: 4px;
  color: var(--muted);
  text-align: center;
}

.timelineStep span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  border-radius: 50%;
  background: #eef2f7;
  color: #9aa4b1;
}

.timelineStep.active span {
  background: #1188ff;
  color: #fff;
}

.timelineStep strong {
  font-weight: 500;
}

.orderDetailGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  margin-top: 18px;
}

.orderMainColumn,
.orderSideColumn {
  display: grid;
  gap: 18px;
  align-content: start;
}

.orderDetailPage .orderMainColumn,
.orderDetailPage .orderSideColumn {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

.sapoSyncActions {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sapoSyncActions select {
  max-width: 100%;
  min-width: 0;
}

.sapoSyncActions button {
  max-width: 100%;
  white-space: normal;
}

.detailCard,
.productPanel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(20, 31, 44, 0.08);
}

.detailCardHeader,
.productPanelHeader {
  min-height: 58px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
}

.detailCardHeader h3 {
  margin: 0;
  font-size: 20px;
}

.stackedHeader {
  display: block;
}

.stackedHeader p {
  margin: 8px 0 0;
  max-width: 760px;
  color: var(--muted);
  line-height: 1.45;
}

.detailCardBody {
  padding: 18px 20px;
}

.detailCardBody hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 18px 0;
}

.customerLine {
  font-size: 18px;
}

.customerLine a,
.productDetailTable a {
  color: #008cff;
  text-decoration: none;
}

.centerLink {
  display: block;
  margin: 18px auto 0;
}

.paymentStrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  background: #f0f7ff;
  padding: 14px 18px;
}

.orderPrintActions {
  position: relative;
}

.orderPrintMenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 5;
  display: grid;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  box-shadow: var(--shadow);
}

.orderPrintMenu button {
  justify-content: flex-start;
  border: 0;
  background: #fff;
}

.transferCodeBody {
  display: grid;
  gap: 12px;
}

.mockQr {
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  justify-self: center;
  border: 8px solid #111827;
  color: #111827;
  background:
    linear-gradient(90deg, #111827 12px, transparent 12px) 14px 14px / 28px 28px,
    linear-gradient(#111827 12px, transparent 12px) 14px 14px / 28px 28px,
    #fff;
  font-weight: 800;
}

/* Xác nhận thanh toán (order page): compact like Sapo's, labels above the fields (owner 18/10/2026: "Form này to quá"). */
.orderPaymentConfirmModal {
  width: min(600px, calc(100vw - 32px));
}

.orderPaymentConfirmModal .modalHeader {
  padding: 12px 20px;
}

.orderPaymentConfirmModal .modalHeader h2 {
  font-size: 18px;
  font-weight: 500;
}

.orderPaymentConfirmModal .modalHeader button {
  min-height: 0;
  color: #9aa3af;
  font-size: 22px;
}

.paymentFormBody {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  padding: 16px 20px;
}

.orderPaymentConfirmModal .createFormField {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  color: #4b5563;
  font-size: 14px;
}

.orderPaymentConfirmModal .createFormField input,
.orderPaymentConfirmModal .createFormField select {
  min-height: 36px;
  padding: 0 10px;
  font-size: 14px;
}

.orderPaymentConfirmModal .createFormField input {
  text-align: right;
}

.orderPaymentConfirmModal .createFormField:nth-child(3) input,
.orderPaymentConfirmModal .createFormField:nth-child(4) input {
  text-align: left;
}

.orderPaymentConfirmModal .paymentFormBody .error {
  grid-column: 1 / -1;
  margin: 0;
}

.orderPaymentConfirmModal .modalFooter {
  justify-content: flex-end;
  gap: 10px;
  padding: 0 20px 16px;
  border-top: 0;
}

.orderPaymentConfirmModal .modalFooter button {
  min-width: 80px;
  min-height: 36px;
  font-size: 14px;
}

.historyTableWrap {
  min-height: 0;
  overflow: auto;
}

.historyTable {
  width: 100%;
  border-collapse: collapse;
}

.historyTable th,
.historyTable td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 16px;
}

.historyTable th {
  background: #f5f6f8;
  font-weight: 700;
}

.dueText {
  color: #ff2d2d;
  text-align: right;
}

.metaRow {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin-bottom: 14px;
}

.metaRow span {
  color: var(--text);
}

.metaRow strong {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.metaRow .metaUrl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--blue);
  text-decoration: none;
}

.metaRow .metaUrl:hover {
  text-decoration: underline;
}

.orderProcessingStatusControl select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
  color: var(--text);
  background: #fff;
  font: inherit;
}

.orderProcessSettingsSheet {
  max-width: 1680px;
  margin: 24px auto;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--border);
}

.orderProcessTablePanel {
  overflow: hidden;
}

.settingsDataTable {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.settingsDataTable th,
.settingsDataTable td {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.settingsDataTable th {
  background: #f3f5f7;
  font-weight: 700;
}

.settingsDataTable .statusActive {
  color: #0aa86b;
}

.settingsDataTable .statusInactive {
  color: #ff4d4f;
}

.metaLink {
  color: #008cff;
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.detailMetaGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 36px;
}

.wideMetaGrid {
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}

.orderReturnDetailPage {
  background: #eef0f2;
  padding: 0 24px 32px;
}

.orderReturnTopBar {
  margin: 0 -24px 22px;
  padding: 10px 24px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.orderReturnTopBar button {
  border-color: transparent;
  background: transparent;
}

.orderReturnTopBar .detailActions button {
  border-color: var(--line);
  background: #fff;
}

.orderReturnTopBar .detailActions button:disabled {
  color: #7a8492;
  background: #f6f7f9;
  cursor: default;
}

.orderReturnTitleBlock {
  display: grid;
  gap: 14px;
  justify-items: start;
  margin-bottom: 18px;
}

.orderReturnTitleLine {
  display: flex;
  align-items: center;
  gap: 12px;
}

.orderReturnTitleBlock h1 {
  margin: 0;
  font-size: 24px;
}

.orderReturnTitleBlock > button {
  min-height: 42px;
  padding: 0 20px;
  font-weight: 600;
}

.orderReturnDetailPage .detailCard,
.orderReturnDetailPage .productPanel {
  margin-top: 0;
  border-color: #dce3eb;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(20, 31, 44, 0.08);
}

.orderReturnInfoGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: start;
  margin-bottom: 22px;
}

.orderReturnTicketBody {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
}

.orderReturnInfoColumn {
  display: grid;
  gap: 14px;
}

.orderReturnInfoRow {
  display: grid;
  grid-template-columns: 170px 12px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.orderReturnInfoRow span {
  color: #526071;
}

.orderReturnInfoRow b {
  font-weight: 500;
  color: #526071;
}

.orderReturnInfoRow strong {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.orderReturnInfoRow a {
  color: #008cff;
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.orderReturnSupplementBody {
  display: grid;
  gap: 24px;
  min-height: 180px;
}

.orderReturnSupplementBody strong {
  display: block;
  margin-bottom: 8px;
}

.orderReturnSupplementBody p {
  margin: 0;
  line-height: 1.45;
}

.cardTitleIcon {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  margin-right: 8px;
  color: #9aa4b1;
  font-weight: 700;
}

.orderReturnProductsPanel {
  overflow-x: auto;
  margin-bottom: 22px;
}

.orderReturnProductsPanel .productDetailTable {
  min-width: 960px;
}

.orderReturnProductsPanel .productDetailTable th,
.orderReturnProductsPanel .productDetailTable td {
  padding: 16px;
}

.orderReturnProductSummary {
  display: grid;
  justify-content: end;
  gap: 12px;
  padding: 20px 24px 24px;
  border-top: 1px solid var(--line);
}

.orderReturnProductSummary .metaRow {
  width: 520px;
  grid-template-columns: minmax(0, 1fr) 160px;
  margin: 0;
}

.orderReturnProductSummary .metaRow strong {
  text-align: right;
  font-weight: 600;
}

.orderReturnStageCard {
  margin-bottom: 22px;
}

.deliveryCollationDetailPage {
  display: block;
  grid-template-columns: none;
  gap: 0;
  min-width: 0;
  min-height: 100vh;
  padding: 0;
  background: #eef0f2;
  overflow-x: hidden;
}

.deliveryCollationTopBar {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 32px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(20, 31, 44, 0.08);
}

.deliveryCollationTopBar > button:first-child {
  border: 0;
  background: transparent;
  color: #6a7482;
  font-weight: 600;
}

/* Hủy phiếu đối soát (red outline) before Sửa, as on Sapo; its dialog's Hủy is filled red like Sapo's. */
.deliveryCollationTopActions { display: flex; align-items: center; gap: 12px; }
.deliveryCollationCancelDialog .dangerButton:not(:disabled) { background: #ff4d4f; border-color: #ff4d4f; color: #fff; }
.deliveryCollationCancelDialog .dangerButton:hover:not(:disabled) { background: #e8383b; }

.deliveryCollationShell {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 28px 48px;
}

.deliveryCollationTitleBlock {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin: 4px 0 14px;
}

.deliveryCollationTitleLine {
  display: flex;
  align-items: center;
  gap: 14px;
}

.deliveryCollationTitleLine h1 {
  margin: 0;
  font-size: 22px;
}

.deliveryCollationInfoGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px;
  align-items: start;
}

.deliveryCollationInfoGrid > *,
.deliveryCollationShipmentsCard,
.deliveryCollationPaymentCard {
  min-width: 0;
}

.deliveryCollationTicketBody {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px;
}

.deliveryCollationInfoColumn {
  display: grid;
  gap: 14px;
}

.deliveryCollationInfoRow {
  display: grid;
  grid-template-columns: 150px 12px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.deliveryCollationInfoRow span,
.deliveryCollationInfoRow b {
  color: #526071;
  font-weight: 500;
}

.deliveryCollationInfoRow strong {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.deliveryCollationInlineLink {
  justify-self: start;
  font-weight: 500;
}

.deliveryCollationSupplementBody {
  display: grid;
  gap: 18px;
  min-height: 110px;
}

.deliveryCollationSupplementBody strong {
  display: block;
  margin-bottom: 8px;
}

.deliveryCollationSupplementBody p {
  margin: 0;
}

.deliveryCollationPaymentCard,
.deliveryCollationShipmentsCard {
  margin-top: 22px;
}

.deliveryCollationPaidTitle {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
}

.deliveryCollationPaidTitle h3 {
  margin: 0;
  font-size: 18px;
}

/* Thanh toán (not paid in full yet): the title and Sapo's "Thanh toán" button on the right. */
.deliveryCollationPayTitle { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.deliveryCollationPayTitle h3 { margin: 0; font-size: 18px; }
.deliveryCollationPaymentCard > .notice { margin: 12px 18px 0; }
.collationPaymentModal { width: min(720px, calc(100vw - 32px)); }
.collationPaymentKinds { display: flex; gap: 48px; margin: 8px 0 16px; }
.collationPaymentKinds label { display: flex; align-items: center; gap: 8px; }
.collationPaymentKinds input { width: 16px; height: 16px; min-height: 0; margin: 0; }
.collationPaymentGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.collationPaymentGrid label { display: grid; gap: 6px; }
@media (max-width: 640px) { .collationPaymentGrid { grid-template-columns: 1fr; } }

/* Thanh toán from the collation list: the selection bar, the row's own button, the payment box of several collations. */
.collationListSelection { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #f2f9ff; border-bottom: 1px solid #dde2e8; }
.collationListSelection span { font-weight: 500; }
.collationPaymentCell { white-space: nowrap; }
.collationRowPay { margin-left: 8px; min-height: 26px; padding: 2px 10px; font-size: 13px; color: #0088ff; border-color: #0088ff; background: #fff; }
.collationBulkPaymentModal { width: min(820px, calc(100vw - 32px)); }
.collationBulkTableWrap { max-height: 320px; overflow: auto; border: 1px solid #dde2e8; border-radius: 3px; margin-bottom: 12px; }
.collationBulkTableWrap table { min-width: 0; }
.collationBulkTotals { margin: 0 0 14px; }
.deliveryCollationDocActions { display: flex; gap: 8px; }

.deliveryCollationCheck {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #16c784;
  font-weight: 700;
}

.deliveryCollationPaymentStrip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin: 14px 18px 0;
  padding: 12px 14px;
  background: #eef7ff;
}

.deliveryCollationPaymentEvent {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px;
  color: #667085;
}

.deliveryCollationPaymentEvent strong {
  color: var(--text);
  font-weight: 500;
}

.blueDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #008cff;
}

.deliveryCollationTabs {
  display: flex;
  min-height: 56px;
  align-items: end;
  gap: 18px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
}

.deliveryCollationTabs button {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #7a8492;
  font-weight: 600;
}

.deliveryCollationTabs button.active {
  color: #008cff;
  border-bottom: 2px solid #008cff;
}

.deliveryCollationTableWrap {
  max-height: 560px;
  overflow: auto;
}

.deliveryCollationDetailTable {
  min-width: 1080px;
}

.deliveryCollationDetailTable th,
.deliveryCollationDetailTable td {
  padding: 14px 18px;
  white-space: nowrap;
}

.deliveryCollationDetailTable .summaryRow td {
  background: #fff;
  font-weight: 600;
}

.deliveryCollationDetailTable td:nth-child(n + 4) {
  text-align: right;
}

.stageHeader {
  min-height: 58px;
}

.stageHeader h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
}

.statusSuccessIcon {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #12b76a;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.orderReturnRefundBand {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 14px 18px;
  background: #eef7ff;
}

.orderReturnRefundBand strong {
  font-weight: 500;
}

.orderReturnRefundBand strong:nth-child(2) {
  text-align: center;
}

.orderReturnRefundBand strong:nth-child(3) {
  text-align: right;
}

.dangerText {
  color: #ff2d2d;
}

.refundTimelineRow {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 18px 4px 0;
}

.timelineDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #008cff;
}

.refundTimelineRow time {
  color: #7a8492;
}

@media (max-width: 1180px) {
  .orderReturnInfoGrid {
    grid-template-columns: 1fr;
  }

  .orderReturnTicketBody {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .orderReturnProductSummary {
    justify-content: stretch;
  }

  .orderReturnProductSummary .metaRow {
    width: auto;
  }

  .orderReturnRefundBand {
    grid-template-columns: 1fr;
  }

  .orderReturnRefundBand strong:nth-child(2),
  .orderReturnRefundBand strong:nth-child(3) {
    text-align: left;
  }
}

.shippingSettingsMain {
  min-height: 100vh;
  background: #f3f4f6;
}

.shippingSettingsTopbar {
  min-height: 56px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 0 32px;
  background: #fff;
  box-shadow: 0 1px 8px rgba(20, 31, 44, 0.12);
}

.shippingSettingsTopbar h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
}

.shippingSettingsTopLinks {
  display: flex;
  gap: 18px;
  align-items: center;
  color: #1f2937;
}

.shippingSettingsBody {
  padding: 24px 32px 80px;
}

.shippingSettingsTabs {
  display: flex;
  gap: 18px;
  align-items: end;
  min-height: 50px;
  margin-bottom: 26px;
  padding: 0 14px;
  background: #fff;
}

.feeSettingsBody .shippingSettingsTabs {
  width: 336px;
  margin-bottom: 20px;
  padding: 0;
  border-bottom: 1px solid #d8dde5;
  background: transparent;
}

.shippingSettingsTabs button {
  min-height: 50px;
  border: 0;
  border-radius: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #64748b;
  padding: 0 0;
  font-weight: 500;
}

.shippingSettingsTabs button.active {
  border-bottom-color: #1688ff;
  color: #1688ff;
}

.dimensionGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.dimensionGrid label {
  display: grid;
  gap: 4px;
}

.dimensionGrid span {
  color: var(--text);
}

.switchRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 32px;
}

.settingsMain {
  min-height: calc(100vh - 65px);
  padding: 0 36px 42px;
  background: #f3f4f6;
}

.settingsHero {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -36px 22px;
  padding: 0 36px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(20, 31, 44, 0.08);
}

.settingsHero h1 {
  margin: 0;
  font-size: 26px;
}

.settingsHeaderRight {
  display: flex;
  gap: 24px;
  align-items: center;
  color: var(--text);
}

.settingsHeaderRight .avatar {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #7f35a6;
  color: #fff;
  font-weight: 700;
}

.settingsSearchWrap {
  display: flex;
  justify-content: center;
  margin: 22px 0;
}

.settingsSearchWrap .search {
  width: min(760px, 100%);
  min-height: 40px;
}

.settingsNotice {
  margin: 0 0 16px;
}

.settingsSection {
  margin-bottom: 26px;
  background: #fff;
}

.settingsSection h2 {
  margin: 0;
  padding: 14px 26px;
  border-bottom: 1px solid var(--line);
  font-size: 22px;
}

.settingsCardGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 26px;
  padding: 26px;
}

.settingsCard {
  position: relative;
  min-height: 104px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 20px 18px;
  border-color: transparent;
  border-radius: 2px;
  background: #eef6ff;
  text-align: left;
}

.settingsCard:hover,
.settingsCard.highlighted {
  border-color: var(--blue);
}

.settingsCardIcon {
  color: var(--blue);
  font-size: 26px;
  line-height: 1;
}

.settingsCardCopy {
  display: grid;
  gap: 8px;
}

.settingsCardCopy strong {
  font-size: 16px;
  color: var(--text);
}

.settingsCardCopy small {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.35;
}

.settingsRibbon {
  position: absolute;
  top: 22px;
  right: 12px;
  padding: 1px 8px;
  background: #ff4d5a;
  color: #fff;
  font-size: 13px;
}

.settingsToggle {
  position: absolute;
  top: 28px;
  right: 14px;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: #cfd6df;
}

.settingsToggle::after {
  content: "";
  position: absolute;
  top: -2px;
  right: 0;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #7c8794;
}

.settingsToggle.on {
  background: #d7ebff;
}

.settingsToggle.on::after {
  background: var(--blue);
}

.productStockSettingsMain {
  display: block;
  min-height: calc(100vh - 65px);
  padding: 0 22px 34px;
  background: #f3f4f6;
}

.productStockSettingsHeader {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 -22px 32px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 1px 5px rgba(20, 31, 44, 0.08);
}

.productStockSettingsHeader h1 {
  margin: 0;
  font-size: 28px;
}

.settingsTopbarRight {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--text);
}

.settingsTopbarRight .avatar {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #7f35a6;
  color: #fff;
  font-weight: 700;
}

.productStockSettingsSheet {
  min-height: 720px;
  padding: 34px;
  background: #fff;
}

.productStockSettingsRow {
  display: grid;
  grid-template-columns: 560px minmax(0, 1fr);
  gap: 54px;
  margin-bottom: 32px;
}

.productStockSettingsIntro h2 {
  margin: 0 0 12px;
  font-size: 22px;
}

.productStockSettingsIntro p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
}

.productStockSettingsBox {
  padding: 30px 34px;
  background: #f4f6f8;
}

.productStockSelectLabel {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 18px;
}

.productStockSelectLabel select {
  min-height: 50px;
  border: 1px solid #cfd6df;
  border-radius: 4px;
  padding: 0 14px;
  background: #fff;
  font: inherit;
}

.settingsCheckboxLine {
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 40px;
  font-size: 18px;
  color: var(--text);
}

.settingsCheckboxLine input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.warrantySettingsBox {
  min-height: 96px;
  display: flex;
  align-items: center;
}

.productStockSettingsActions {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  margin-top: 64px;
}

.productStockSettingsActions button {
  min-width: 84px;
  min-height: 48px;
}

.productStockSettingsNotice {
  margin: 16px 0 0;
}

.saleSettingsMain {
  padding-bottom: 90px;
}

.saleSettingsSheet {
  min-height: 720px;
  padding: 26px 34px 90px;
  background: #fff;
  position: relative;
}

.saleSettingsRow {
  display: grid;
  grid-template-columns: 410px minmax(0, 1fr);
  gap: 52px;
  margin-bottom: 26px;
}

.saleSettingsIntro h2 {
  margin: 0 0 12px;
  font-size: 20px;
}

.saleSettingsIntro p {
  max-width: 360px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.45;
}

.saleSettingsBox {
  display: grid;
  gap: 16px;
  padding: 26px 32px;
  background: #f4f6f8;
}

.saleSettingsBox .productStockSelectLabel {
  margin-bottom: 2px;
}

.saleSettingsActions {
  position: sticky;
  right: 0;
  bottom: 0;
  margin-top: 26px;
  padding: 20px 0 0;
  background: #fff;
}

.settingsPlaceholderPanel {
  min-height: 280px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 12px;
}

.settingsPlaceholderIcon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: #eef6ff;
  color: var(--text);
  font-size: 26px;
}

.settingsPlaceholderPanel h3 {
  margin: 0;
  font-size: 24px;
}

.settingsPlaceholderPanel p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
}

.otherSettingsSheet {
  min-height: 500px;
  margin: 0 18px;
  padding: 38px;
  background: #fff;
}

.otherSettingsRow {
  display: grid;
  grid-template-columns: 460px minmax(0, 1fr);
  gap: 52px;
  margin-bottom: 34px;
}

.otherSettingsIntro h2 {
  margin: 0 0 14px;
  font-size: 22px;
}

.otherSettingsIntro p {
  margin: 0;
  max-width: 380px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.45;
}

.otherSettingsBox {
  display: grid;
  gap: 12px;
  padding: 28px 32px;
  background: #f4f6f8;
  color: var(--text);
  font-size: 18px;
  line-height: 1.45;
}

.otherSettingsBox p {
  margin: 0;
}

.warningNote strong {
  color: #ff3b30;
  font-weight: 500;
}

.warningNote a {
  color: var(--blue);
  text-decoration: none;
}

.otherSettingsActions {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  margin-top: 30px;
}

.otherSettingsActions button {
  min-width: 86px;
  min-height: 50px;
}

.orderSourceSettingsMain {
  padding-bottom: 48px;
}

.orderSourceSheet {
  margin: 0 18px;
  padding: 32px 34px 42px;
  min-height: 760px;
  display: grid;
  grid-template-columns: 430px minmax(0, 1fr);
  gap: 54px;
  background: #fff;
}

.orderSourceIntro h2 {
  margin: 0 0 20px;
  font-size: 22px;
}

.orderSourceIntro p {
  max-width: 360px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.45;
}

.orderSourceIntro .primaryAction {
  min-width: 202px;
  min-height: 48px;
  margin-top: 26px;
  font-size: 17px;
}

.orderSourceTableWrap {
  min-width: 0;
}

.orderSourceTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.orderSourceTable th {
  height: 58px;
  padding: 0 24px;
  background: #f4f6f8;
  color: var(--text);
  text-align: left;
  font-size: 17px;
  font-weight: 700;
}

.orderSourceTable td {
  height: 64px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 17px;
  vertical-align: middle;
}

.orderSourceRow {
  cursor: pointer;
}

.orderSourceRow:hover td {
  background: #f7fbff;
}

.orderSourceTable th:nth-child(1),
.orderSourceTable td:nth-child(1) {
  width: 36%;
}

.orderSourceTable th:nth-child(2),
.orderSourceTable td:nth-child(2) {
  width: 44%;
}

.orderSourceTable th:nth-child(3),
.orderSourceTable td:nth-child(3) {
  width: 20%;
  text-align: center;
}

.greenText {
  color: #18b368 !important;
}

.redText {
  color: #ff3b30 !important;
}

.defaultSourceCell {
  color: var(--blue) !important;
  font-size: 30px !important;
  font-weight: 700;
}

.orderSourceModal {
  width: min(1080px, calc(100vw - 48px));
}

.orderSourceModalBody {
  display: grid;
  gap: 24px;
  padding: 30px 34px 42px;
}

.orderMetadataModal {
  width: min(760px, calc(100vw - 32px));
}

.orderMetadataModal .orderSourceModalBody {
  min-height: 0;
  overflow: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 24px;
}

.orderMetadataModal .settingsFormField {
  min-width: 0;
  margin: 0;
}

.orderMetadataModal .settingsFormField:first-of-type,
.orderMetadataModal .error {
  grid-column: 1 / -1;
}

.orderMetadataModal input,
.orderMetadataModal textarea {
  min-width: 0;
  width: 100%;
}

@media (max-width: 600px) {
  .orderMetadataModal .orderSourceModalBody {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }
}

.orderSourceNameField {
  gap: 10px;
  color: var(--muted);
  font-size: 20px;
}

.orderSourceNameField input {
  min-height: 58px;
  padding: 0 18px;
  font-size: 20px;
}

.orderSourceCheckbox {
  gap: 14px;
  min-height: 42px;
  font-size: 20px;
}

.orderSourceCheckbox input {
  width: 22px;
  height: 22px;
}

.cancelReasonSettingsMain {
  padding-bottom: 54px;
}

.cancelReasonTopActions {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  margin: -20px 86px 18px;
}

.cancelReasonTopActions button {
  min-height: 48px;
  padding: 0 24px;
  font-size: 17px;
}

.ghostPrimaryButton {
  border: 1px solid var(--blue);
  background: #fff;
  color: var(--blue);
  border-radius: 4px;
  font-weight: 600;
}

.cancelReasonPanel {
  max-width: 1734px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.cancelReasonTabs {
  display: flex;
  min-height: 64px;
  border-bottom: 1px solid var(--line);
}

.cancelReasonTabs button {
  min-width: 142px;
  padding: 0 22px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: #fff;
  color: #777f8d;
  font-size: 18px;
  font-weight: 600;
}

.cancelReasonTabs button.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.cancelReasonTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.cancelReasonTable th {
  height: 72px;
  padding: 0 22px;
  background: #f4f6f8;
  color: var(--text);
  text-align: left;
  font-size: 17px;
  font-weight: 700;
}

.cancelReasonTable td {
  height: 68px;
  padding: 0 22px;
  border-bottom: 1px solid #edf0f2;
  color: var(--text);
  font-size: 17px;
  vertical-align: middle;
}

.cancelReasonTable th:nth-child(1),
.cancelReasonTable td:nth-child(1) {
  width: 32%;
}

.cancelReasonTable th:nth-child(2),
.cancelReasonTable td:nth-child(2) {
  width: 13%;
}

.cancelReasonTable th:nth-child(3),
.cancelReasonTable td:nth-child(3) {
  width: 32%;
}

.cancelReasonTable th:nth-child(4),
.cancelReasonTable td:nth-child(4) {
  width: 9%;
}

.cancelReasonTable th:nth-child(5),
.cancelReasonTable td:nth-child(5) {
  width: 14%;
}

.cancelReasonRow {
  cursor: pointer;
}

.cancelReasonRow:hover td {
  background: #f7fbff;
}

.cancelReasonPagination {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 0 28px;
  color: var(--text);
  font-size: 17px;
}

.cancelReasonPagination button {
  min-width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 4px;
  color: var(--text);
  font-size: 17px;
}

.cancelReasonPagination button.active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.cancelReasonPagination button.disabled {
  color: #c7ced7;
}

.cancelReasonToggleModal {
  width: min(750px, calc(100vw - 48px));
}

.cancelReasonToggleBody {
  display: grid;
  gap: 18px;
  padding: 28px 34px 34px;
}

.cancelReasonCheckbox {
  gap: 12px;
  min-height: 34px;
  font-size: 18px;
}

.cancelReasonCheckbox input {
  width: 22px;
  height: 22px;
}

.cancelReasonWarning {
  margin: 8px 0 0;
  font-size: 18px;
  line-height: 1.45;
}

.cancelReasonWarning strong {
  color: #ff3b30;
  font-weight: 500;
}

.cancelReasonFormModal {
  width: min(1050px, calc(100vw - 48px));
}

.cancelReasonFormBody {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 36px;
  padding: 28px 34px 38px;
}

.cancelReasonFormBody .settingsFormField {
  gap: 10px;
  color: #4b5563;
  font-size: 18px;
}

.cancelReasonFormBody input,
.cancelReasonFormBody select {
  min-height: 58px;
  padding: 0 18px;
  border: 1px solid #cfd7df;
  border-radius: 4px;
  background: #fff;
  color: var(--text);
  font-size: 18px;
}

.cancelReasonFormBody select {
  appearance: auto;
}

.cancelReasonNoteField,
.cancelReasonApplyCheck {
  grid-column: 1 / -1;
}

.dangerOutlineButton {
  border: 1px solid #ff3b30;
  background: #fff;
  color: #ff3b30;
}

.settingsDetailPage {
  display: block;
  min-height: calc(100vh - 65px);
  padding: 0 26px 44px;
  background: #f3f4f6;
}

.settingsDetailHeader {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 -26px 32px;
  padding: 0 26px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 1px 5px rgba(20, 31, 44, 0.08);
}

.settingsDetailHeader h1 {
  margin: 0;
  font-size: 28px;
}

.settingsDetailHeaderActions {
  margin-left: auto;
  display: flex;
  gap: 18px;
}

.settingsDetailHeaderActions button {
  min-width: 86px;
  min-height: 48px;
}

.settingsDetailSheet {
  min-height: 720px;
  padding: 32px;
  background: #fff;
}

.settingsDetailRow {
  display: grid;
  grid-template-columns: 520px minmax(0, 1fr);
  gap: 54px;
  margin-bottom: 54px;
}

.settingsDetailIntro h2 {
  margin: 0 0 14px;
  font-size: 22px;
}

.settingsDetailIntro p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.4;
}

.settingsDetailPanel {
  padding: 32px;
  background: #f4f6f8;
}

.storeInfoPanel {
  display: grid;
  gap: 20px;
}

.settingsLogoUpload {
  display: flex;
  gap: 22px;
  align-items: center;
  margin-bottom: 6px;
}

.wowLogoBox {
  width: 160px;
  height: 160px;
  display: grid;
  place-items: center;
  border: 1px dashed #cfd6df;
  border-radius: 6px;
  background: #fff;
  color: #7f8791;
}

.wowLogoBox strong {
  display: block;
  font-size: 88px;
  line-height: 0.8;
}

.wowLogoBox span {
  display: block;
  margin-top: -34px;
  font-size: 28px;
  font-weight: 700;
}

.settingsLogoUpload p {
  margin: 4px 0 0;
  color: var(--text);
}

.settingsFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.settingsFormField {
  display: grid;
  gap: 9px;
  color: var(--muted);
  font-size: 18px;
}

.settingsFormField input,
.settingsFormField select,
.settingsFormField textarea {
  width: 100%;
  min-height: 50px;
  border: 1px solid #cfd6df;
  border-radius: 4px;
  padding: 0 14px;
  background: #fff;
  color: var(--text);
  font: inherit;
}

.settingsFormField textarea {
  min-height: 58px;
  padding-top: 10px;
  resize: vertical;
}

.settingsDetailActions {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  margin-top: 42px;
}

.settingsDetailActions button {
  min-width: 84px;
  min-height: 48px;
}

.settingsTableCard {
  margin: 70px 14px 0;
  background: #fff;
}

.locationSettingsModalBackdrop {
  background: rgba(0, 0, 0, 0.55);
}

.locationSettingsModal {
  width: min(860px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
}

.locationSettingsModalHeader {
  min-height: 64px;
  padding: 16px 24px;
}

.locationSettingsModalHeader h2 {
  font-size: 22px;
  font-weight: 500;
}

.locationSettingsModalHeader button {
  color: #8a96a3;
  background: transparent;
  font-size: 28px;
  line-height: 1;
}

.locationSettingsModalBody {
  min-height: 0;
  overflow: auto;
  padding: 20px 24px;
  overscroll-behavior: contain;
}

.locationSettingsModalBody .settingsFormGrid {
  gap: 18px;
}

.locationSettingsModalBody .settingsFormField {
  min-width: 0;
  font-size: 14px;
}

.locationSettingsModalBody .settingsFormField input,
.locationSettingsModalBody .settingsFormField select {
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  font-size: 16px;
}

.locationAddressPanel {
  display: grid;
  gap: 18px;
  margin-top: 20px;
  padding: 0 16px 18px;
  border: 1px solid #cfd6df;
  background: #fff;
}

.locationAddressToggle {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 -16px;
  padding: 0 16px;
  border-bottom: 1px solid #cfd6df;
  background: #f4f4f5;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
}

.locationAddressToggle .settingsToggle {
  position: relative;
  inset: auto;
  flex-shrink: 0;
}

.locationDefaultLine {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  color: var(--text);
  font-size: 16px;
}

.locationDefaultLine input {
  width: 18px;
  height: 18px;
}

.locationSettingsWarning {
  margin: 24px 0 0;
  color: var(--text);
  font-size: 24px;
}

.locationSettingsWarning span {
  color: #ff4d4f;
}

.locationSettingsModalFooter {
  justify-content: flex-end;
  gap: 12px;
  min-height: 72px;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  padding: 14px 24px;
}

.locationSettingsModalFooter button {
  min-width: 84px;
  min-height: 42px;
  font-size: 16px;
}

@media (max-width: 600px) {
  .locationSettingsModalBody .settingsFormGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .locationSettingsModalHeader,
  .locationSettingsModalBody,
  .locationSettingsModalFooter {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.settingsListTable th,
.settingsListTable td {
  height: 68px;
  padding-left: 28px;
  padding-right: 28px;
  font-size: 18px;
}

.settingsStatus.green {
  color: #1fbd72;
}

.settingsStatus.red {
  color: #ff4d4f;
}

.settingsDefaultTick {
  color: var(--blue);
  font-size: 34px;
  font-weight: 700;
}

.settingsStaffActions {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  margin: 0 0 70px;
}

.settingsStaffActions button {
  min-height: 42px;
}

.staffTableCard {
  margin-top: 0;
}

.settingsTabs {
  display: flex;
  min-height: 60px;
  border-bottom: 1px solid var(--line);
}

.settingsTabs button {
  padding: 0 22px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
}

.settingsTabs button.active {
  border-bottom-color: var(--blue);
  color: var(--blue);
}

.settingsStaffFilters {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 132px 138px 132px 118px;
  gap: 14px;
  padding: 18px 20px;
}

.settingsStaffFilters .search {
  width: 100%;
}

.mutedButton {
  color: #8b95a1;
  background: #f1f3f5;
}

.staffDetailCard {
  margin: 36px 14px 0;
  padding: 32px 36px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(20, 31, 44, 0.08);
}

.staffDetailTitle {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}

.staffDetailTitle h2,
.staffDetailCard h2 {
  margin: 0;
  font-size: 28px;
}

.settingsInfoList {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px 22px;
  margin: 0 0 16px;
  font-size: 22px;
}

.settingsInfoList dt {
  color: var(--text);
}

.settingsInfoList dd {
  margin: 0;
}

.staffProfileNote {
  margin: 18px 0;
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
}

.sectionHeadingLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}

.roleGrid {
  max-width: 1700px;
}

.settingsDataPermissions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 70px;
  margin-top: 28px;
}

.settingsSwitchLine {
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 20px;
}

.settingsSwitchLine .settingsToggle {
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 auto;
}

.roleTopActions {
  margin-bottom: 16px;
}

.roleTableCard {
  margin-top: 0;
}

.roleListTable th:nth-child(2),
.roleListTable th:nth-child(3),
.roleListTable td:nth-child(2),
.roleListTable td:nth-child(3) {
  text-align: center;
}

.roleListTable .subtleRow {
  background: #f6f7f9;
}

.settingsRoleFooter {
  justify-content: flex-end;
  gap: 16px;
  min-height: 70px;
  padding: 0 28px;
}

.roleCreatePage {
  padding-top: 0;
}

.roleCreateTitle {
  margin: -12px 0 26px 36px;
  font-size: 24px;
}

.roleCreateNotice {
  margin: -12px 36px 16px;
}

.roleCreateInfoCard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin: 0 36px 22px;
  padding: 22px 26px 28px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(20, 31, 44, 0.08);
}

.rolePermissionCard {
  margin: 0 36px 40px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(20, 31, 44, 0.08);
}

.rolePermissionCard h3 {
  margin: 0;
  padding: 22px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 18px;
}

.roleDetailPage .roleCreateInfoCard {
  margin-top: 0;
}

.rolePermissionList {
  padding: 0 26px 28px;
}

.rolePermissionList.compact .rolePermissionGrid,
.rolePermissionList.compact .rolePermissionNote {
  display: none;
}

.rolePermissionSection {
  padding: 26px 0;
  border-bottom: 1px solid #edf0f3;
}

.rolePermissionGroupTitle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-size: 18px;
}

.rolePermissionGroupTitle input,
.rolePermissionCheck input {
  width: 17px;
  height: 17px;
  accent-color: var(--blue);
}

.rolePermissionGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 20px 120px;
  margin: 24px 0 0 8px;
}

.rolePermissionCheck {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 24px;
  color: var(--text);
  font-size: 17px;
}

.rolePermissionNote {
  margin: 24px 0 0 8px;
  color: var(--muted);
  font-size: 17px;
  font-style: italic;
}

.switchRow {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px;
  gap: 20px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #edf1f5;
}

.switch {
  position: relative;
  width: 44px;
  height: 24px;
  display: inline-block;
}

.switch input {
  position: absolute;
  opacity: 0;
}

.switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #aab3bd;
}

.switch span::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(20, 31, 44, 0.25);
}

.switch input:checked + span {
  background: #008cff;
}

.switch input:checked + span::after {
  transform: translateX(20px);
}

.shippingPartnersMain {
  background: #f3f4f6;
}

.shippingInfoBand {
  margin: 0 20px;
  padding: 14px 18px;
  background: #eef7ff;
  color: var(--text);
  border: 1px solid var(--line);
  border-top: 0;
}

.shippingPartnerSection {
  display: grid;
  gap: 18px;
  margin: 28px 20px;
}

.shippingPartnerSection h2 {
  margin: 0;
  font-size: 22px;
}

.sectionTitleRow {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.sapoExpressCard,
.providerCard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px 28px;
  box-shadow: 0 2px 8px rgba(20, 31, 44, 0.05);
}

.sapoExpressCard {
  min-height: 210px;
}

.providerGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.providerCard {
  min-height: 190px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
}

.mutedProvider {
  background: #f7f8fa;
}

.emptyPartnerCard {
  min-height: 120px;
}

.providerCardTop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 36px;
  gap: 14px;
  align-items: center;
  position: relative;
}

.providerActionMenuWrap {
  position: relative;
}

.providerActionMenu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 5;
  width: 220px;
  display: grid;
  padding: 10px 0;
  border: 1px solid #d7dde5;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
}

.providerActionMenu button {
  min-height: 46px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 18px;
  text-align: left;
  padding: 0 18px;
}

.providerActionMenu button:hover {
  background: #f3f7fb;
}

.providerLogoText,
.sapoExpressLogo {
  min-width: 0;
  overflow: hidden;
  color: #0b84ff;
  font-size: 22px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.providerLogo-grab {
  color: #16a34a;
}

.providerLogo-viettel_post,
.providerLogo-vnpost,
.providerLogo-spx,
.providerLogo-best_express,
.providerLogo-nhat_tin,
.providerLogo-jt_express {
  color: #9aa3ad;
}

.sapoExpressLogo {
  font-size: 28px;
}

.providerLogoStrip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 10px 0 6px;
}

.providerLogoStrip span {
  color: #f26b3a;
  font-weight: 800;
}

.providerCard p,
.sapoExpressCard p {
  margin: 0;
  color: #334155;
}

.providerMetaLine,
.sapoExpressMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.providerMetaLine span,
.sapoExpressMeta span {
  border: 1px solid #d8e4ef;
  border-radius: 999px;
  color: #64748b;
  font-size: 13px;
  line-height: 1;
  padding: 6px 10px;
}

.sapoExpressMeta {
  margin-top: 4px;
}

.providerCardActions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.shippingConnectModal {
  width: min(1050px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: auto;
}

.shippingConnectHeader h2 {
  font-size: 30px;
}

.shippingConnectBody {
  padding: 28px 36px 18px;
}

.shippingConnectBrandRow {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-bottom: 24px;
}

.shippingConnectLogo,
.shippingConnectSapoLogo {
  min-width: 180px;
  color: #1287ff;
  font-size: 58px;
  font-weight: 800;
  line-height: 0.95;
  white-space: pre-line;
}

.shippingConnectLogo-grab {
  color: #11a64a;
  font-family: Arial, sans-serif;
  letter-spacing: -2px;
}

.shippingConnectLogo-viettel {
  color: #ee1b2e;
  font-size: 44px;
}

.shippingConnectLogo-ghtk {
  color: #111827;
  font-size: 34px;
}

.shippingConnectSapoLogo {
  background: linear-gradient(90deg, #22c55e, #0b84ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.shippingConnectChain {
  color: #0b84ff;
  font-size: 44px;
  font-weight: 800;
}

.shippingConnectBody h3 {
  margin: 22px 0 12px;
  color: var(--text);
  font-size: 24px;
}

.shippingConnectIntro {
  margin: 0;
  font-size: 19px;
  line-height: 1.45;
  white-space: pre-line;
}

.shippingConnectFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 24px;
}

.shippingConnectField {
  display: grid;
  gap: 8px;
  color: #667085;
  font-size: 18px;
}

.shippingConnectField span::first-letter {
  color: inherit;
}

.shippingConnectField input {
  width: 100%;
  min-height: 60px;
  border: 1px solid #cfd8e3;
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  padding: 0 16px;
}

.shippingConnectReferral {
  width: min(480px, 100%);
}

.shippingConnectPolicy {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  color: var(--text);
  font-size: 19px;
}

.shippingConnectPolicy input {
  width: 22px;
  height: 22px;
}

.shippingConnectLinks {
  display: grid;
  gap: 10px;
  margin-top: 26px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}

.shippingConnectLinks p {
  margin: 0;
  color: var(--text);
  font-size: 18px;
}

.shippingConnectLink {
  justify-self: start;
  padding: 0;
  font-size: 18px;
}

.shippingConnectFooter {
  padding: 20px 36px 36px;
}

.shippingConnectFooter button {
  min-width: 110px;
  min-height: 56px;
  font-size: 20px;
}

.ghtkSettingsModal {
  width: min(1180px, calc(100vw - 72px));
  height: min(860px, calc(100vh - 72px));
  max-height: calc(100vh - 72px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.ghtkSettingsTabs {
  display: flex;
  gap: 12px;
  min-height: 64px;
  padding: 0 26px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.ghtkSettingsTabs button {
  min-height: 64px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #777;
  font-size: 22px;
  font-weight: 700;
  padding: 0 8px;
}

.ghtkSettingsTabs button.active {
  border-bottom: 4px solid #008cff;
  color: #008cff;
}

.ghtkSettingsBody {
  min-height: 0;
  overflow: auto;
  padding: 24px 40px 26px;
}

.ghtkSettingsBrandRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 18px;
}

.ghtkSettingsBrandRow .shippingConnectLogo-ghtk {
  min-width: 300px;
  font-size: 34px;
}

.ghtkConnectedBadge {
  min-width: 176px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #19b46b;
  border-radius: 999px;
  background: #ecfff5;
  color: #18a963;
  font-size: 22px;
}

.ghtkSettingsBody h3 {
  margin: 22px 0 14px;
  color: var(--text);
  font-size: 24px;
}

.ghtkSettingField {
  display: grid;
  gap: 10px;
  color: #657386;
  font-size: 18px;
}

.ghtkSettingField input,
.ghtkSettingField select,
.ghtkWarehouseRow select {
  width: 100%;
  min-height: 52px;
  border: 1px solid #cfd8e3;
  border-radius: 4px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 18px;
  padding: 0 14px;
}

.ghtkReadonlyEmail input:disabled {
  background: #f3f4f6;
  color: #7b8794;
}

.ghtkCredentialGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 16px;
}

.ghtkReconnectButton {
  justify-self: start;
  margin-top: 10px;
  padding: 0;
  font-size: 20px;
}

.ghtkSettingsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 18px;
}

.ghtkSettingLabel {
  display: block;
  margin-bottom: 10px;
  color: #657386;
  font-size: 18px;
}

.ghtkRadioLine {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  align-items: center;
  font-size: 18px;
}

.ghtkRadioLine label,
.ghtkSettingCheck {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--text);
}

.ghtkRadioLine input,
.ghtkSettingCheck input {
  width: 22px;
  height: 22px;
}

.ghtkCheckStack {
  display: grid;
  gap: 18px;
}

.ghtkSettingCheck {
  font-size: 18px;
}

.ghtkSettingCheck small {
  color: #008cff;
  font-size: 18px;
}

.ghtkSettingsNote {
  margin: 22px 0 0;
  color: var(--text);
  font-size: 18px;
}

.ghtkReferralField {
  width: min(560px, 100%);
}

.ghtkSettingsLinks {
  margin-top: 28px;
}

.ghtkSettingsFooter {
  justify-content: flex-end;
  gap: 18px;
  padding: 16px 40px;
  background: #fff;
}

.ghtkSettingsFooter button {
  min-width: 120px;
  min-height: 50px;
  font-size: 20px;
}

.ghtkWarehouseTable {
  display: grid;
  margin-top: 22px;
  border-bottom: 1px solid var(--line);
}

.ghtkWarehouseHead,
.ghtkWarehouseRow {
  display: grid;
  grid-template-columns: 220px minmax(260px, 1fr) 360px;
  align-items: center;
  gap: 22px;
  padding: 20px 24px;
}

.ghtkWarehouseHead {
  min-height: 72px;
  background: #f4f6f8;
  color: var(--text);
  font-size: 20px;
  font-weight: 500;
}

.ghtkWarehouseRow {
  min-height: 100px;
  border-top: 1px solid var(--line);
  background: #eef7ff;
  color: var(--text);
  font-size: 18px;
}

.ghtkWarehouseNote {
  margin-top: 30px;
  padding: 22px 28px;
  border-top: 5px solid #ffd100;
  background: #fff7e8;
  box-shadow: 0 2px 8px rgba(20, 31, 44, 0.12);
  color: var(--text);
  font-size: 18px;
}

.ghtkWarehouseNote strong {
  display: block;
  margin-bottom: 8px;
  font-size: 24px;
}

.ghtkWarehouseNote ul {
  margin: 0;
  padding-left: 36px;
  line-height: 1.45;
}

.manualPartnerSection {
  gap: 0;
}

.manualPartnerToolbar {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 300px auto;
  gap: 16px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-bottom: 0;
  padding: 0 20px;
}

.embeddedTabs {
  margin: 0;
  border: 0;
}

.shippingPartnerTableWrap {
  background: #fff;
  border: 1px solid var(--line);
}

.shippingProviderDetailPage {
  padding-top: 0;
}

.shippingProviderSummary {
  margin: 24px 0;
}

.providerSummaryActions {
  display: flex;
  gap: 14px;
  align-items: center;
}

.shippingProviderMetaGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 54px;
}

.shippingDebtCard {
  margin-bottom: 28px;
}

.shippingDebtTable {
  min-width: 1320px;
}

.iconButton {
  min-width: 34px;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
}

.orderCreateTopGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px;
  margin-bottom: 28px;
}

.createCustomerCard {
  min-height: 320px;
}

.invoiceCheck,
.productCardTools {
  display: flex;
  gap: 12px;
  align-items: center;
}

.orderCreateProductCard .detailCardHeader {
  min-height: 64px;
  padding: 0 20px;
}

.orderCreateProductCard .detailCardHeader h3 {
  display: flex;
  align-items: center;
  min-height: 64px;
}

.orderCreateProductCard .productCardTools {
  align-self: stretch;
  gap: 0;
}

.orderCreateProductCard .productCardTools label,
.orderCreateProductCard .productCardTools .linkButton,
.orderCreateProductCard .productCardTools .iconButton {
  min-height: 64px;
  display: inline-flex;
  align-items: center;
}

.orderCreateProductCard .productCardTools label {
  gap: 8px;
  padding: 0 18px;
  color: var(--text);
}

.orderCreateProductCard .productCardTools label input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.orderCreateProductCard .productCardTools .linkButton {
  padding: 0 22px;
  border-left: 1px solid var(--line);
  border-radius: 0;
  font-weight: 500;
}

.orderCreateProductCard .productCardTools .iconButton {
  width: 52px;
  min-width: 52px;
  border-left: 1px solid var(--line);
  border-radius: 0;
  color: #98a2ad;
  font-size: 22px;
}

.invoiceCheck {
  font-weight: 600;
}

.orderExtraCard {
  overflow: visible;
}

.orderExtraCard .iconButton {
  color: #98a2ad;
}

.iconButton {
  width: 36px;
  padding: 0;
}

.orderCreatePage .detailCardHeader .iconButton,
.orderCreateProductCard .productCardTools .iconButton {
  width: 62px;
  min-width: 62px;
  min-height: 62px;
  color: #98a2ad;
  font-size: 34px;
}

.productSearchLine {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 110px 180px;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.orderCreateEmptyProduct {
  min-height: 260px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: #98a2ad;
}

.orderCreateBelowGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 500px;
  gap: 32px;
  padding: 24px 28px 30px;
  border-top: 1px solid var(--line);
}

.createNotesCard {
  display: grid;
  gap: 16px;
}

.createNotesCard label {
  display: grid;
  gap: 8px;
}

.createNotesCard input,
.createNotesCard textarea {
  width: min(440px, 100%);
}

.createNotesCard textarea {
  min-height: 84px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  font: inherit;
}

.selectedCustomerCard {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px dashed #b8c2cf;
  border-radius: 4px;
  background: #fff;
}

.selectedCustomerCard a {
  color: var(--blue);
  font-size: 18px;
  font-weight: 600;
}

.clearCustomerButton {
  position: absolute;
  top: 12px;
  right: 12px;
  color: #98a2ad;
}

.supplierStatsBox {
  display: grid;
  gap: 8px;
  max-width: 360px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.summaryInputLine {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: 16px;
  align-items: center;
}

.summaryInputLine input {
  min-height: 34px;
  text-align: right;
}

.orderCreatePaymentBlock {
  display: grid;
  gap: 8px;
  padding: 12px 0 16px;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}

.paidSummaryLine {
  font-weight: 600;
}

.paymentMethodEditLine {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 150px;
  gap: 12px;
  align-items: center;
}

.paymentMethodEditLine select,
.paymentMethodEditLine input {
  min-height: 38px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
}

.paymentMethodEditLine input {
  text-align: right;
}

.removePaymentButton {
  width: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ff3b3b;
  font-size: 28px;
  line-height: 1;
}

.transferCodeLink,
.addPaymentMethodButton {
  justify-self: start;
}

.summaryButtonLine {
  width: 100%;
  border: 0;
  background: transparent;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: 16px;
  align-items: center;
  padding: 7px 0;
  color: #0088ff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.summaryButtonLine strong {
  color: var(--text);
  font-weight: 500;
  text-align: right;
}

.promoLink {
  justify-self: start;
  margin-bottom: 16px;
}

.shippingModeCard {
  margin-top: 28px;
}

.shippingModeTabs {
  display: flex;
  gap: 24px;
  padding: 28px 36px;
  border-bottom: 1px solid var(--line);
}

.shippingModeTabs button {
  min-height: 74px;
  min-width: 260px;
  padding-inline: 24px;
  border-radius: 6px;
  font-size: 24px;
}

.shippingModeTabs .active {
  border-color: #008cff;
  color: #008cff;
  position: relative;
}

.shippingModeTabs .active::after {
  content: "✓";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  background: #008cff;
  color: white;
  font-size: 12px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  padding-left: 6px;
  padding-top: 5px;
}

.shippingHint {
  margin: 0;
  padding: 20px;
}

.carrierShippingPanel {
  /* Fits the card (it used to be fixed at 520px + 980px): the rates sit beside the address box when there is room
     for a readable table, otherwise below it at full width. */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
  padding: 24px 20px 32px;
}

.carrierShippingPanel > .carrierAddressBox {
  flex: 0 1 340px;
  min-width: 260px;
}

.carrierShippingPanel > .carrierRatesBox {
  flex: 999 1 560px;
}

.carrierAddressBox {
  border: 1px dashed #9da8b5;
  border-radius: 6px;
  padding: 34px 36px;
  display: grid;
  gap: 18px;
  align-content: start;
}

.shippingPanelHeaderLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.shippingPanelHeaderLine h4,
.carrierAddressBox h4,
.carrierPartnerBox h4 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
}

.carrierAddressBox p {
  margin: 0;
  color: var(--text);
  line-height: 1.45;
}

.carrierShippingField {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
}

.carrierShippingField input,
.carrierShippingField select,
.carrierShippingField textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: white;
  color: var(--text);
  padding: 8px 12px;
  font: inherit;
}

.carrierShippingField input[type="number"] {
  text-align: right;
}

.carrierShippingField textarea {
  min-height: 74px;
  resize: vertical;
}

.dimensionGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sampleSizeButton {
  justify-self: start;
  padding: 0;
}

.carrierPartnerBox {
  display: grid;
  grid-template-columns: 420px 420px;
  align-content: start;
  justify-content: start;
  gap: 22px 48px;
  width: 888px;
  max-width: 100%;
  padding-top: 2px;
}

.carrierRatesBox {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
  padding-top: 4px;
}

.carrierRecommendedRates {
  display: grid;
  gap: 12px;
  font-size: 15px;
}

.carrierRecommendedRates label {
  display: flex;
  gap: 14px;
  align-items: center;
  color: var(--text);
  font-weight: 600;
}

.fastRate {
  color: #1688ff;
  font-style: italic;
  font-weight: 700;
}

.cheapRate {
  color: #ff5a1f;
  font-style: italic;
  font-weight: 700;
}

.carrierRatesBox h4 {
  margin: 6px 0 0;
  font-size: 16px;
}

.carrierRateTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
}

.carrierRateTable th {
  height: 48px;
  background: #f3f3f4;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  padding: 10px 12px;
}

.carrierRateTable th:first-child {
  width: 24%;
}

.carrierRateTable th:nth-child(2) {
  width: 36%;
}

.carrierRateTable th:nth-child(3) {
  width: 20%;
}

.carrierRateTable td {
  min-height: 44px;
  border-bottom: 1px solid #e6e9ee;
  padding: 10px 12px;
  color: var(--text);
  font-size: 14px;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.carrierRateTable td:first-child {
  vertical-align: top;
}

.carrierRateServiceCell {
  display: flex;
  align-items: center;
  gap: 14px;
}

.carrierRateServiceCell input {
  flex: 0 0 auto;
}

.sapoExpressLogo {
  display: block;
  margin: 8px 0 12px;
  color: #1688ff;
  font-size: 20px;
}

.ghnLogo {
  display: block;
  margin: 8px 0 12px;
  color: #ff5a1f;
  font-size: 16px;
}

.carrierRateTable .linkButton {
  display: block;
  margin: 8px 0 0;
  white-space: normal;
  text-align: left;
}

.oldRatePrice {
  color: #ef4444;
  text-decoration: line-through;
}

.rateSaleBadge {
  display: inline-grid;
  place-items: center;
  min-height: 18px;
  margin-left: 8px;
  padding: 0 5px;
  border-radius: 2px;
  background: #ff5a5f;
  color: #fff;
  font-size: 12px;
  vertical-align: middle;
}

.carrierGroupDivider td {
  height: 16px;
  padding: 0;
  border-bottom: 1px solid #e6e9ee;
}

.carrierPartnerBox h4,
.carrierPartnerFull {
  grid-column: 1 / -1;
}

.carrierFeeField {
  grid-column: 1;
  grid-row: 3;
}

.carrierProviderSelectField {
  grid-column: 2;
  grid-row: 3;
}

.carrierFeePayerField {
  grid-column: 2;
  grid-row: 4;
}

.shippingMiniLabel {
  display: block;
  margin-bottom: 10px;
  color: var(--text);
  font-weight: 500;
}

.shippingRadioLine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}

.shippingRadioLine label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.orderDeliveryActions {
  position: relative;
}

.orderDeliveryButton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  justify-content: center;
}

.orderDeliveryCaret {
  font-size: 16px;
  line-height: 1;
}

.orderDeliveryMenu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 260px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
  z-index: 35;
  padding: 8px 0;
}

.orderDeliveryMenu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  border: 0;
  background: white;
  color: var(--text);
  font: inherit;
  text-align: left;
  padding: 0 18px;
  cursor: pointer;
}

.orderDeliveryMenu button:hover {
  background: #f2f7ff;
  color: var(--primary);
}

.deliveryMenuIcon {
  color: #9aa3af;
  font-size: 18px;
}

.orderDeliveryModal {
  width: min(1520px, calc(100vw - 64px));
  max-height: calc(100vh - 56px);
  overflow: auto;
}

.orderDeliveryModalTabs {
  display: flex;
  gap: 24px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--line);
}

.orderDeliveryModalTabs button {
  position: relative;
  min-height: 58px;
  border: 1px solid #aeb7c3;
  border-radius: 6px;
  background: white;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  padding: 0 26px;
  cursor: pointer;
}

.orderDeliveryModalTabs button.active {
  border-color: var(--primary);
  color: var(--primary);
}

.orderDeliveryModalTabs button.active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  border-left: 20px solid transparent;
  border-bottom: 20px solid var(--primary);
}

.orderDeliveryModalBody {
  display: grid;
  grid-template-columns: minmax(360px, 460px) minmax(0, 1fr);
  gap: 34px;
  padding: 34px 40px 28px;
}

.orderDeliveryAddressBox {
  background: #fbfbfc;
}

.orderDeliveryRatePanel {
  display: grid;
  align-content: start;
  gap: 18px;
}

.orderDeliveryQuickRates {
  display: grid;
  gap: 16px;
  font-weight: 600;
}

.orderDeliveryQuickRates label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.orderDeliveryQuickRates em {
  color: var(--primary);
  font-style: italic;
  font-weight: 700;
}

.orderDeliveryQuickRates .orangeText {
  color: #f97316;
}

.orderDeliveryRatePanel h4 {
  margin: 4px 0 0;
  font-size: 15px;
}

.orderDeliveryRateTable {
  border: 1px solid var(--line);
}

.orderDeliveryRateHead {
  display: grid;
  grid-template-columns: 190px minmax(280px, 1fr) 160px 150px;
  gap: 0;
  background: #f3f5f7;
  color: var(--text);
  font-weight: 700;
}

.orderDeliveryRateHead span {
  padding: 14px 16px;
}

.orderDeliveryRateGroup {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  border-top: 1px solid var(--line);
}

.orderDeliveryPartnerLogo {
  padding: 22px 20px;
  color: var(--primary);
  font-size: 26px;
  font-weight: 800;
  align-self: start;
}

.ghnLogo {
  color: #f97316;
  font-size: 19px;
}

.ahamoveLogo {
  color: #ff6d00;
  font-size: 19px;
}

.ahamoveRateGroup .orderDeliveryServiceList > p,
.ahamoveRateGroup .linkButton {
  margin: 6px 12px;
  justify-self: start;
}

.orderDeliveryServiceList {
  display: grid;
}

.orderDeliveryRateRow {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 160px 150px;
  align-items: center;
  min-height: 46px;
  border-bottom: 1px solid var(--line);
  gap: 12px;
  padding: 0 16px;
}

.orderDeliveryRateRow:last-child {
  border-bottom: 0;
}

.orderDeliveryRateRow small {
  display: inline-block;
  margin-left: 8px;
  color: #fff;
  background: #ff4d4f;
  border-radius: 2px;
  padding: 1px 5px;
  font-size: 12px;
}

.orderDeliveryRateRow del {
  color: #ef4444;
  margin-right: 6px;
}

.orderDeliveryUnavailable {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 120px;
  align-items: center;
  min-height: 76px;
  border-top: 1px solid var(--line);
  padding: 0 20px;
  gap: 18px;
  color: #9aa3af;
}

.orderDeliveryUnavailable span {
  font-size: 22px;
  font-weight: 800;
}

.orderDeliveryUnavailable p {
  margin: 0;
}

.orderDeliveryExternalBox {
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  padding-top: 6px;
}

.orderDeliveryPickupBody {
  min-height: 24px;
  border-bottom: 1px solid var(--line);
}

.orderDeliveryModalFooter {
  position: sticky;
  bottom: 0;
  background: white;
  border-top: 1px solid var(--line);
}

.orderAddressModal {
  width: min(1050px, calc(100vw - 64px));
}

.orderAddressModalBody {
  display: grid;
  gap: 24px;
  padding: 24px 36px 0;
}

.addressModalInfo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background: #f2f8ff;
  color: var(--text);
  padding: 18px 24px;
}

.addressModalInfo > span {
  color: var(--primary);
  font-size: 22px;
}

.addressModalInfo p {
  margin: 0;
  line-height: 1.45;
}

.addressModalInfo > button {
  border: 0;
  background: transparent;
  color: #9aa3af;
  font-size: 34px;
  cursor: pointer;
}

.addressModalGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 36px;
}

.addressModalField {
  display: grid;
  gap: 8px;
  color: #5f6b7a;
  font-size: 15px;
}

.addressModalField input,
.addressModalField select {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: white;
  color: var(--text);
  padding: 10px 16px;
  font: inherit;
}

.addressNewToggle {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f7f7f8;
  border: 1px solid var(--line);
  border-bottom: 0;
  padding: 18px 20px;
}

.toggleSwitch {
  width: 54px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: #e5e7eb;
  padding: 3px;
  cursor: pointer;
}

.toggleSwitch span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #8b95a1;
}

.toggleSwitch.on {
  background: #d6ecff;
}

.toggleSwitch.on span {
  margin-left: auto;
  background: var(--primary);
}

.addressRegionGrid {
  border: 1px solid var(--line);
  border-top: 0;
  background: #fbfbfc;
  padding: 24px 20px;
}

.addressWideField {
  grid-column: 1 / -1;
}

.orderAddressModalFooter {
  justify-content: space-between;
  padding: 28px 36px 36px;
}

.orderAddressModalFooter > div {
  display: flex;
  gap: 16px;
}

.addressConvertLink {
  font-size: 18px;
}

.orderShipmentSummary {
  display: grid;
  gap: 18px;
  width: 100%;
}

.shipmentStatusLine {
  display: grid;
  grid-template-columns: auto auto auto auto auto 1fr;
  align-items: center;
  gap: 14px;
}

.shipmentDot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
}

.copyTinyButton {
  border: 0;
  background: transparent;
  color: #9aa3af;
  font-size: 18px;
  cursor: pointer;
}

.shipmentState {
  color: var(--primary);
}

.shipmentTools {
  justify-self: end;
  color: #9aa3af;
  font-size: 18px;
}
.shipmentTools button { border:0; background:transparent; color:inherit; font:inherit; cursor:pointer; padding:4px; }
.shipmentTools button:disabled { cursor:wait; opacity:.55; }

.shipmentMetaGrid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
  gap: 10px 64px;
}

.cloneCompletedFulfillment { display:grid; gap:18px; }
.cloneCompletedShipment { display:grid; gap:20px; }
.cloneCompletedShipment + .cloneCompletedShipment { border-top:1px solid var(--line); padding-top:20px; }
.cloneCompletedShipment .shipmentState.delivered { color:#20b26b; }
.cloneCompletedShipment .metaRow strong { font-weight:400; }
.cloneCompletedCodeInput { width:clamp(220px,32vw,430px); height:38px; border:1px solid var(--line); border-radius:4px; padding:0 12px; font:inherit; }
.cloneCompletedEditField input,.cloneCompletedEditField textarea { width:100%; border:1px solid var(--line); border-radius:4px; padding:9px 12px; font:inherit; color:inherit; background:#fff; }
.cloneCompletedEditField textarea { min-height:74px; resize:vertical; }
.cloneCompletedEditField input:focus,.cloneCompletedEditField textarea:focus,.cloneCompletedCodeInput:focus { border-color:var(--primary); outline:1px solid var(--primary); }
.completedCustomerStats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 20px; margin:18px 0 6px; padding:14px; border:1px dashed #c9d0d8; }
.completedCustomerStats .metaRow strong { color:#08f; font-weight:400; }
@media(max-width:700px) {
  .cloneCompletedShipment .shipmentStatusLine { grid-template-columns:auto minmax(0,1fr) auto; gap:8px; }
  .cloneCompletedShipment .shipmentStatusLine .muted,.cloneCompletedShipment .shipmentTools { grid-column:2 / -1; justify-self:start; }
  .cloneCompletedShipment .shipmentMetaGrid { grid-template-columns:1fr; gap:8px; }
  .completedCustomerStats { grid-template-columns:1fr; }
}

.shipmentMetaGrid .metaRow {
  grid-template-columns: 170px minmax(0, 1fr);
}

@media (max-width: 980px) {
  .carrierShippingPanel,
  .carrierPartnerBox,
  .orderDeliveryModalBody,
  .orderDeliveryRateGroup,
  .addressModalGrid,
  .shipmentMetaGrid {
    grid-template-columns: 1fr;
  }

  .orderDeliveryModalTabs {
    flex-wrap: wrap;
  }

  .orderDeliveryRateHead {
    display: none;
  }

  .orderDeliveryRateRow,
  .orderDeliveryUnavailable {
    grid-template-columns: 1fr;
    padding: 14px 16px;
  }
}

.vietQrModal {
  width: min(720px, calc(100vw - 40px));
}

.vietQrHeader {
  justify-content: center;
  position: relative;
}

.vietQrHeader h2 {
  font-size: 28px;
}

.vietQrHeader button {
  position: absolute;
  right: 24px;
}

.vietQrBody {
  display: grid;
  justify-items: center;
  padding: 22px 28px 12px;
}

.vietQrCard {
  width: min(500px, 100%);
  min-height: 610px;
  display: grid;
  place-items: center;
  border: 12px solid #d6ecff;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  position: relative;
}

.vietQrCard img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  position: relative;
  z-index: 2;
}

.vietQrCard img[src=""] {
  display: none;
}

.vietQrFallback {
  position: absolute;
  inset: 20px;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 12px;
  color: #1f2a37;
  background: #fff;
}

.vietQrFallback > p {
  margin: 0;
  font-size: 18px;
  color: #6b7280;
}

.vietQrFallback > strong {
  color: #e32332;
  font-size: 32px;
}

.qrGrid {
  width: 250px;
  height: 250px;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 3px;
  padding: 12px;
  background: #fff;
}

.qrGrid span {
  background: #fff;
}

.qrGrid .dark {
  background: #111;
}

.vietQrFallback .summaryLine {
  width: 340px;
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  font-size: 16px;
}

.vietQrFooter {
  justify-content: center;
  gap: 26px;
  padding-bottom: 26px;
}

.orderTransferQrModal {
  width: min(750px, calc(100vw - 40px));
}

.orderTransferQrBody {
  justify-items: stretch;
  gap: 22px;
  padding: 24px 68px 18px;
}

.transferFormField {
  display: grid;
  gap: 10px;
  color: #4b5563;
  font-size: 18px;
}

.transferFormField input,
.transferFormField select {
  width: 100%;
  min-height: 60px;
  padding: 0 18px;
  border: 1px solid #cfd7df;
  border-radius: 4px;
  background: #fff;
  color: var(--text);
  font-size: 20px;
}

.transferFormField input {
  text-align: right;
}

.transferFormField:nth-child(3) input {
  text-align: left;
}

.orderTransferQrCard {
  width: 100%;
  min-height: 690px;
}

.orderTransferQrFooter {
  justify-content: center;
  gap: 24px;
  padding: 24px 68px 32px;
}

.orderTransferQrFooter button {
  min-height: 54px;
  min-width: 128px;
  padding: 0 24px;
  font-size: 18px;
}

.orderTransferQrFooter .primaryAction {
  min-width: 278px;
}

.stockCheckModal {
  width: min(1540px, calc(100vw - 48px));
}

.stockCheckModal .modalHeader {
  min-height: 64px;
  padding: 0 30px;
}

.stockCheckModal .modalHeader h2 {
  font-size: 26px;
}

.stockCheckToolbar {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  padding: 20px 30px;
}

.stockCheckToolbar select,
.stockCheckToolbar button {
  min-width: 250px;
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--text);
  font: inherit;
  text-align: left;
  padding: 0 18px;
}

.stockColumnDropdown {
  position: relative;
}

.stockColumnDropdown > button.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
}

.stockColumnMenu {
  position: absolute;
  z-index: 25;
  top: calc(100% + 8px);
  right: 0;
  width: 270px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(20, 31, 44, 0.16);
  padding: 8px 0;
}

.stockColumnMenu label {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  font-size: 19px;
  cursor: pointer;
}

.stockColumnMenu label.checked {
  background: #eef6ff;
  color: var(--blue);
}

.stockColumnMenu input {
  width: 20px;
  height: 20px;
  margin: 0;
}

.stockCheckTableWrap {
  padding: 0 30px 28px;
  overflow: auto;
}

.stockCheckTable {
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
  table-layout: fixed;
}

.stockCheckTable th,
.stockCheckTable td {
  height: 62px;
  border: 1px solid var(--line);
  padding: 10px 12px;
  background: #fff;
  vertical-align: middle;
}

.stockCheckTable th {
  background: #f4f6f8;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  text-transform: none;
}

.stockCheckTable a {
  color: var(--blue);
  text-decoration: none;
}

.stockCheckModal .modalFooter {
  padding: 0 30px 28px;
}

.orderFieldSortModal {
  width: min(980px, calc(100vw - 48px));
}

.orderFieldSortHeader {
  align-items: flex-start;
  padding: 28px 30px 24px;
}

.orderFieldSortHeader h2 {
  margin: 0;
  font-size: 28px;
}

.orderFieldSortHeader p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 20px;
}

.orderFieldSortHeader > button {
  color: #9aa3af;
  font-size: 34px;
}

.orderFieldSortList {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.orderFieldSortRow {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  font-size: 20px;
}

.orderFieldSortRow:last-child {
  border-bottom: 0;
}

.dragHandle {
  width: 28px;
  height: 28px;
  display: grid;
  grid-template-columns: repeat(3, 4px);
  grid-auto-rows: 4px;
  gap: 2px;
  align-content: center;
  justify-content: center;
  cursor: grab;
}

.dragHandle:active {
  cursor: grabbing;
}

.dragHandle i {
  display: block;
  width: 4px;
  height: 4px;
  background: #9aa3af;
  border-radius: 1px;
}

.orderFieldSortFooter {
  justify-content: flex-end;
  gap: 22px;
  padding: 28px 30px;
}

.orderFieldSortFooter button {
  min-width: 104px;
  min-height: 52px;
  font-size: 20px;
}

.productDisplayModal {
  width: min(980px, calc(100vw - 48px));
}

.productDisplayHeader {
  min-height: 70px;
  padding: 0 34px;
}

.productDisplayHeader h2 {
  font-size: 28px;
}

.productDisplayHeader button {
  color: #9aa3af;
  font-size: 34px;
}

.productDisplayBody {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  padding: 22px 34px 0;
}

.productDisplayPanel {
  min-height: 438px;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.productDisplayPanel h3 {
  margin: 0;
  padding: 24px;
  font-size: 24px;
}

.productDisplayOptionList label,
.productDisplaySelectedRow {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 30px;
  border-top: 1px solid var(--line);
  font-size: 20px;
}

.productDisplayOptionList label.selected {
  background: #eef6ff;
}

.productDisplayOptionList input {
  width: 20px;
  height: 20px;
}

.productDisplaySelectedRow {
  justify-content: space-between;
}

.productDisplaySelectedRow button {
  border: 0;
  background: transparent;
  color: #9aa3af;
  font-size: 28px;
}

.productDisplaySettings {
  display: grid;
  gap: 18px;
  padding: 28px 34px 8px;
  font-size: 20px;
}

.toggleLine,
.segmentedSetting,
.radioSetting {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.toggleLine input {
  width: 52px;
  height: 28px;
  accent-color: var(--blue);
}

.segmentedSetting button {
  min-width: 58px;
  min-height: 36px;
  border: 1px solid var(--blue);
  background: #fff;
  color: var(--blue);
}

.segmentedSetting button.active {
  background: var(--blue);
  color: #fff;
}

.radioSetting > span {
  min-width: 260px;
}

.radioSetting input {
  width: 22px;
  height: 22px;
  margin-right: 10px;
  accent-color: var(--blue);
}

.productDisplayFooter {
  justify-content: space-between;
  padding: 26px 34px 32px;
}

.advancedSettingsLink {
  font-size: 20px;
}

.productDisplayActions {
  display: flex;
  gap: 22px;
}

.productDisplayActions button {
  min-width: 104px;
  min-height: 52px;
  font-size: 20px;
}

.tagPill {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border: 1px solid #80bdff;
  border-radius: 999px;
  color: #008cff;
  padding: 0 14px;
}

.tagPillList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tagPillList .tagPill {
  max-width: 100%;
  min-height: 28px;
  padding: 2px 12px;
  overflow-wrap: anywhere;
}

.productPanelHeader {
  padding: 0 20px;
}

.productDetailTitle {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  margin: 0 -20px 18px;
  background: #f3f4f6;
}

.productDetailTitle h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
}

.productDetailTitle button {
  justify-self: start;
}

.productEditTitle small {
  color: var(--muted);
}

.productEditLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 24px;
  align-items: start;
}

.productEditMain,
.productEditSide {
  display: grid;
  gap: 24px;
}

.productEditCard {
  margin-bottom: 0;
}

.productEditGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
}

.productEditField {
  display: grid;
  gap: 8px;
  color: var(--muted);
}

.productEditField.full {
  grid-column: 1 / -1;
}

.productEditField input,
.productEditField select,
.productEditField textarea,
.productEditInventoryTable input {
  width: 100%;
  min-height: 40px;
  border: 1px solid #cfd6df;
  border-radius: 4px;
  padding: 8px 12px;
  background: #fff;
  font: inherit;
  color: var(--text);
}

.productEditField textarea {
  min-height: 72px;
  resize: vertical;
}

.productEditSideFields {
  display: grid;
  gap: 18px;
}

.productEditImages {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.imageAddTile,
.productEditImage {
  width: 92px;
  height: 92px;
  border: 1px dashed #c4ccd6;
  border-radius: 2px;
  background: #fff;
}

.productEditImage {
  border-style: solid;
  object-fit: contain;
  box-shadow: 0 4px 12px rgba(20, 31, 44, 0.16);
}

.productEditSwitch {
  border-bottom: 0;
  padding: 0;
}

.productCreatePage .orderActionBar {
  position: sticky;
  top: 0;
  z-index: 12;
  box-shadow: 0 2px 8px rgba(20, 31, 44, 0.1);
}

.productCreateTypeTitle {
  margin: 12px 0 16px;
  color: var(--muted);
  font-size: 15px;
}

.productCreateManagement .detailCardHeader {
  justify-content: space-between;
}

.productCreateRadioGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.productCreateRadio {
  display: flex;
  min-height: 54px;
  gap: 12px;
  align-items: center;
  color: var(--text);
}

.productCreateRadio input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.productCreateDescriptionLink,
.productCreateMorePrice {
  justify-self: start;
}

.productCreateDropzone {
  min-height: 88px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  border: 1px dashed #cfd6df;
  color: var(--muted);
}

.productCreateComboHeader h3,
.productCreateComboHeader p {
  margin: 0;
}

.productCreateComboHeader p {
  margin-top: 8px;
}

.productCreateComboTools {
  padding: 22px 28px;
  border-bottom: 1px solid var(--line);
}

.productCreateComboTools .search {
  width: 100%;
  min-height: 44px;
}

.productCreateComboTableWrap {
  border: 0;
  border-bottom: 1px solid var(--line);
}

.productCreateComboTable th {
  height: 44px;
}

.productCreateEmptyBlock {
  min-height: 210px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  color: var(--muted);
}

.productCreateEmptyBlock .emptyIcon {
  color: #d9dee5;
  font-size: 58px;
}

.productCreateEmptyBlock button,
.productCreateSpecialBody button {
  min-height: 42px;
  border-color: var(--blue);
  color: var(--blue);
  background: #fff;
}

.productCreateSpecialBody {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.productEditSwitch strong,
.productEditSwitch span {
  display: block;
}

.compactEditCard .detailCardBody {
  display: grid;
  gap: 10px;
}

.inventoryEditCard {
  margin-top: 24px;
}

.productEditInventoryTable input {
  min-width: 120px;
}

.productComboCard {
  margin-bottom: 26px;
}

.comboTitle {
  display: flex;
  gap: 16px;
  align-items: center;
}

.productComboBody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 24px;
  align-items: center;
  padding: 22px 20px;
}

.productMetaGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 48px;
}

.productMetaGrid .metaRow,
.productPriceGrid .metaRow {
  grid-template-columns: 190px minmax(0, 1fr);
  margin-bottom: 0;
}

.productDescriptionButton {
  justify-self: start;
  min-height: 28px;
}

.productDetailImage {
  width: 150px;
  height: 150px;
  justify-self: center;
  object-fit: contain;
}

.productDetailGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 560px;
  gap: 28px;
  margin-bottom: 28px;
}

.productPriceGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 44px;
}

.readonlyCheckbox {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  color: var(--muted);
}

.readonlyCheckbox small {
  color: #008cff;
}

.productInventoryPanel {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(20, 31, 44, 0.08);
}

.productDetailTabs {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
}

.productInventoryTable {
  min-width: 1360px;
  table-layout: auto;
}

.productInventoryTable th,
.productInventoryTable td {
  height: 58px;
  background: #fff;
  text-transform: none;
  font-size: 15px;
}

.productInventoryTable th {
  background: #f4f6f8;
  color: var(--text);
}

.productStockHistoryPane {
  background: #fff;
}

.productStockHistoryToolbar {
  display: flex;
  justify-content: flex-end;
  padding: 18px 24px 10px;
}

.productStockHistoryToolbar select {
  min-width: 220px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 14px;
  background: #fff;
  color: var(--text);
  font-size: 15px;
}

.productStockHistoryWrap {
  border-top: 0;
}

.productStockHistoryTable {
  min-width: 1180px;
}

.productStockHistoryTable th,
.productStockHistoryTable td {
  height: 62px;
  padding: 0 24px;
}

.productComboComponentsTable {
  min-width: 1180px;
}

.productComboComponentsTable th,
.productComboComponentsTable td {
  vertical-align: middle;
}

.comboComponentName {
  max-width: 520px;
  line-height: 1.35;
}

.comboTotalRow td {
  background: #fff;
  font-weight: 600;
}

.comboTotalLabel {
  text-align: right;
  color: var(--text);
}

.linkText {
  color: #008cff;
  text-decoration: none;
  font-weight: 500;
}

.linkText:hover {
  text-decoration: underline;
}

.sectionHeading {
  margin: 22px 0 16px;
  font-size: 20px;
}

.variantDetailGrid {
  display: grid;
  grid-template-columns: 600px minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}

.variantRightColumn {
  display: grid;
  gap: 18px;
}

.variantListCard {
  align-self: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(20, 31, 44, 0.08);
}

.variantListHeader,
.variantRow {
  display: grid;
  grid-template-columns: 28px 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 58px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  text-align: left;
}

.variantListHeader {
  grid-template-columns: 28px minmax(0, 1fr);
  padding: 0 14px;
}

.variantRow {
  min-height: 76px;
  padding: 10px 14px;
}

.variantRow.active {
  background: #008cff;
  color: #fff;
}

.variantRow strong,
.variantRow span {
  display: inline-block;
  margin-right: 22px;
}

.variantRow span {
  color: inherit;
  opacity: 0.8;
}

.variantInfoBody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 20px;
  align-items: center;
}

.variantInfoGrid {
  grid-template-columns: 1fr;
}

.variantInfoGrid .metaRow {
  grid-template-columns: 360px minmax(0, 1fr);
}

.variantDetailImage {
  width: 110px;
  height: 140px;
  justify-self: center;
  object-fit: contain;
}

.wideProductImage {
  width: 260px;
  height: 120px;
}

.variantPriceGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.purchaseOrderCreatePage {
  min-height: calc(100vh - 65px);
  padding: 0 28px 36px;
  background: #f3f4f6;
}

.deliveryCollationCreatePage {
  min-height: calc(100vh - 65px);
  padding: 0 0 64px;
  background: #eef0f2;
}

.deliveryCollationCreateBar {
  min-height: 56px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 8px 64px;
  border-bottom: 1px solid #d9dde3;
  background: #fff;
  box-shadow: 0 1px 4px rgba(20, 31, 44, 0.08);
}

.deliveryCollationBackButton {
  border-color: transparent;
  background: transparent;
  color: #697586;
  font-size: 15px;
  font-weight: 600;
}

.deliveryCollationBackButton:hover {
  background: #f5f7f9;
}

.deliveryCollationCreateActions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.deliveryCollationCreateActions button {
  min-height: 40px;
  padding-inline: 20px;
  border-radius: 3px;
  font-weight: 600;
}

.deliveryCollationCreateContent,
.deliveryCollationCreateShipments {
  width: min(1400px, calc(100% - 96px));
  margin-inline: auto;
}

.deliveryCollationCreateContent {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 304px;
  gap: 24px;
  padding-top: 26px;
}

.deliveryCollationCreatePage .detailCard {
  border-color: #e0e4ea;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(20, 31, 44, 0.08);
}

.deliveryCollationCreatePage .detailCardHeader {
  min-height: auto;
  padding: 16px 18px 8px;
  border-bottom: 0;
}

.deliveryCollationCreatePage .detailCardHeader h3 {
  font-size: 18px;
  font-weight: 700;
}

.deliveryCollationInfoForm {
  min-height: 216px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 26px;
  align-content: start;
  padding: 8px 18px 22px;
}

.deliveryCollationField {
  display: grid;
  gap: 8px;
  color: #1f2937;
  font-size: 14px;
}

.deliveryCollationField input,
.deliveryCollationField select,
.deliveryCollationField textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid #d8dde5;
  border-radius: 3px;
  background: #fff;
  color: #1f2937;
  padding: 0 12px;
  font: inherit;
}

.deliveryCollationField select:invalid,
.deliveryCollationField select option[value=""] {
  color: #a0a8b3;
}

.deliveryCollationCodeField {
  grid-column: 1 / 2;
}

.infoMark {
  color: #1688ff;
  font-size: 12px;
  font-weight: 600;
}

.deliveryCollationExtraForm {
  display: grid;
  gap: 18px;
  padding: 8px 18px 22px;
}

.deliveryCollationExtraForm textarea {
  min-height: 78px;
  padding-block: 10px;
  resize: vertical;
}

.deliveryCollationCreateShipments {
  margin-top: 26px;
}

.deliveryCollationShipmentTools {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 122px;
  align-items: center;
  padding: 16px 16px;
  border-top: 1px solid #eef1f5;
  border-bottom: 1px solid #dde2e8;
}

.deliveryCollationShipmentTools .searchIcon {
  color: #9aa3af;
  font-size: 30px;
  line-height: 1;
  justify-self: center;
}

.deliveryCollationShipmentTools .search {
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #1f2937;
}

.deliveryCollationShipmentTools button {
  min-height: 40px;
  border-radius: 0 3px 3px 0;
  border-color: #d8dde5;
  background: #fff;
}

.deliveryCollationCreateShipments .tableWrap {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.deliveryCollationCreateShipments table {
  table-layout: fixed;
}

.deliveryCollationCreateShipments th {
  height: 56px;
  background: #f2f3f5;
  color: #1f2937;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
}

.deliveryCollationCreateShipments td {
  height: 56px;
}

.deliveryCollationEmptyCell {
  height: 328px !important;
  padding: 0 !important;
  background: #fff;
}

.deliveryCollationEmptyBox {
  min-height: 328px;
  display: grid;
  gap: 14px;
  place-items: center;
  align-content: center;
  color: #9aa3af;
}

.emptyPackageIcon {
  color: #e1e4e8;
  font-size: 76px;
  line-height: 0.8;
}

.deliveryCollationEmptyBox p {
  margin: 0;
}

.deliveryCollationEmptyBox button {
  min-height: 40px;
  min-width: 136px;
  border-color: #1688ff;
  color: #1688ff;
  background: #fff;
}

/* Tạo phiếu đối soát: tick the shipments of the collation (or scan their code), totals of the ticked ones on top. */
.deliveryCollationCreateShipments col.deliveryCollationPickCol { width: 52px; }
.deliveryCollationCreateShipments col.deliveryCollationIndexCol { width: 72px; }
.deliveryCollationCreateShipments .deliveryCollationDetailTable :is(th, td):first-child { padding: 0 0 0 18px; text-overflow: clip; }
/* The detail table right-aligns from its 4th cell (5 columns there); here the 4th is Mã đơn hàng, money starts at the 5th. */
.deliveryCollationCreateShipments .deliveryCollationDetailTable tbody:not(.deliveryCollationPickedTotal) td:nth-child(4) { text-align: left; }
.deliveryCollationCreateShipments input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; margin: 0; vertical-align: middle; }
.deliveryCollationCreateShipments tr.deliveryCollationPicked td { background: #f0f7ff; }
.deliveryCollationPickedTotal td { height: 44px; background: #fafbfc; font-weight: 600; border-bottom: 1px solid #dde2e8; }

/* Sửa phiếu đối soát (delivery-collation-edit-ui.js): the create page's layout; partner figures typed in the lines. */
.deliveryCollationEditShipments { width: min(1400px, calc(100% - 96px)); margin: 26px auto; }
.deliveryCollationEditShipments .tableWrap { border: 0; border-radius: 0; box-shadow: none; }
.deliveryCollationEditShipments th { height: 56px; background: #f2f3f5; color: #1f2937; font-size: 14px; font-weight: 600; text-transform: none; }
.deliveryCollationEditShipments td { height: 56px; }
.deliveryCollationEditPage .deliveryCollationField :is(input, textarea):disabled { background: #f4f6f8; color: #6a7482; cursor: not-allowed; }
.deliveryCollationEditShipments .deliveryCollationDetailTable { min-width: 0; }
.deliveryCollationEditShipments .deliveryCollationDetailTable td:nth-child(n + 4) { text-align: right; }
.deliveryCollationEditShipments input.deliveryCollationFigure { width: 120px; min-height: 32px; padding: 4px 8px; text-align: right; }
.deliveryCollationEditShipments input.deliveryCollationFigureDiffers { color: #e5383b; border-color: #f0a3a4; }
.deliveryCollationRemoveCell { width: 56px; text-align: center !important; }
.deliveryCollationRemove { min-height: 28px; width: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.deliveryCollationRemove:hover:not(:disabled) { background: #fff1f1; border-radius: 3px; }
.deliveryCollationEditTotals { display: flex; flex-wrap: wrap; gap: 32px; padding: 12px 18px; background: #f2f9ff; }
.deliveryCollationEditLocked { margin: 0; padding: 12px 18px; border-top: 1px solid #eef1f5; }
.deliveryCollationEditLoading { padding: 48px; text-align: center; }
.deliveryCollationPicker { margin: 0 16px 12px; border: 1px solid #dde2e8; border-radius: 3px; max-height: 360px; overflow: auto; }
.deliveryCollationPickerBar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: #fafbfc; border-bottom: 1px solid #dde2e8; position: sticky; top: 0; z-index: 1; }
.deliveryCollationPickerBar > div { display: flex; gap: 8px; }
.deliveryCollationPickerTable { min-width: 0; }
.deliveryCollationPickerTable :is(th, td):first-child { width: 44px; padding: 0 0 0 14px; }
.deliveryCollationPickerTable input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; margin: 0; }
.deliveryCollationPickerEmpty { margin: 0; padding: 16px; }

/* Nhập file đối soát (Sapo's import box). */
.collationImportModal { width: min(640px, calc(100vw - 32px)); }
.collationImportChoices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.collationImportField { display: grid; gap: 6px; }
.collationImportNotes { margin: 8px 0 16px; padding-left: 20px; display: grid; gap: 6px; }
.collationImportFile { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px dashed #c4cdd5; border-radius: 3px; cursor: pointer; }
.collationImportFile input { max-width: 220px; }
.collationImportLoading { padding: 24px; text-align: center; }
.collationImportDone { margin: 0; line-height: 1.6; }
@media (max-width: 640px) { .collationImportChoices { grid-template-columns: 1fr; } }

.purchaseOrderDetailPage {
  min-height: calc(100vh - 65px);
  padding: 0 36px 36px;
  background: #f3f4f6;
}

.purchaseOrderActionBar {
  margin: 0 -36px 0;
  padding: 10px 36px;
}

.purchaseOrderTitleRow {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  padding-top: 18px;
  margin-bottom: 16px;
}

.purchaseOrderTitleRow h1 {
  display: inline-block;
  margin: 0 10px 0 0;
  font-size: 26px;
}

.purchaseOrderTitleRow .pill {
  margin-left: 12px;
}

.purchaseOrderDetailButtons {
  margin-bottom: 46px;
}

.purchaseOrderDetailButtons button {
  min-height: 42px;
  padding: 0 22px;
}

.purchaseOrderTimeline {
  display: grid;
  grid-template-columns: repeat(3, 128px);
}

.purchaseOrderStep {
  color: var(--muted);
  font-size: 14px;
}

.purchaseOrderStep strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  margin-top: 8px;
}

.purchaseOrderStep small {
  display: block;
  margin-top: 3px;
  color: #657385;
}

.purchaseOrderStepLine {
  position: relative;
  height: 22px;
}

.purchaseOrderStepLine::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 28px;
  right: 8px;
  height: 2px;
  background: #cfd6de;
}

.purchaseOrderStep:last-child .purchaseOrderStepLine::after {
  display: none;
}

.purchaseOrderStepLine span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #eef2f7;
  color: #98a2ad;
  font-weight: 700;
}

.purchaseOrderStep.done .purchaseOrderStepLine span {
  background: var(--blue);
  color: #fff;
}

.purchaseOrderStep.done:last-child .purchaseOrderStepLine span {
  background: #ff4d5a;
}

.purchaseOrderTopGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  gap: 28px;
  margin-bottom: 28px;
}

.purchaseOrderSupplierBody {
  min-height: 250px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  gap: 34px;
  align-items: start;
}

.supplierNameLink {
  display: block;
  margin-bottom: 12px;
  padding: 0;
  font-size: 18px;
}

.supplierDebtBox {
  border: 1px dashed #aeb7c2;
  padding: 18px 20px;
  display: grid;
  gap: 14px;
}

.supplierDebtBox > div,
.purchaseOrderTotals > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: 18px;
  align-items: center;
}

.supplierDebtBox strong,
.purchaseOrderTotals strong {
  text-align: right;
  font-weight: 500;
}

.blueText {
  color: var(--blue);
}

.dangerText {
  color: #ff3338;
}

.purchaseOrderInfoGrid .metaRow {
  grid-template-columns: 140px minmax(0, 1fr);
  margin-bottom: 14px;
}

.purchaseOrderHistoryLink {
  display: block;
  width: 100%;
  margin: 16px -20px -20px;
  padding: 18px 20px 0;
  border-top: 1px solid var(--line);
  text-align: center;
}

.purchaseOrderStatusPanel {
  margin-bottom: 28px;
  background: #fff;
}

.compactPanelHeader {
  min-height: 68px;
  padding: 0 28px;
}

.compactPanelHeader h2 {
  font-size: 18px;
}

.purchaseOrderReceiptLine {
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 28px;
  border-top: 1px solid var(--line);
}

.purchaseOrderReceiptLine .receiptCaret {
  margin-left: 8px;
  color: var(--blue);
  font-size: 18px;
  line-height: 1;
  vertical-align: -2px;
}

.purchaseOrderReceiptInfo {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: -16px 0 0;
  padding: 0 28px 18px 51px;
  font-size: 13px;
}

.purchaseOrderReceiptInfo dt {
  color: var(--muted);
}

.purchaseOrderReceiptInfo dd {
  margin: 0;
}

.purchaseOrderReceiptInfo dd::before {
  content: ": ";
}

.sapoSectionTitle {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sapoSectionIcon {
  flex: none;
  width: 20px;
  height: 20px;
}

.purchaseOrderPayments {
  padding: 0 28px 16px;
}

.purchaseOrderPayments .orderPayments {
  margin-top: 0;
}

/* As on Sapo's purchase order page: a blue arrow, the time right after it. */
.purchaseOrderPayments .orderPayment summary::after {
  color: var(--blue);
}

.purchaseOrderPayments .orderPaymentTime {
  margin-left: 0;
}

.blueDot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--blue);
}

.purchaseOrderPaymentStrip {
  margin: 20px 28px;
  min-height: 46px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  background: #eef6ff;
}

.purchaseOrderPaymentStrip span:nth-child(2) {
  text-align: center;
}

.purchaseOrderPaymentStrip span:last-child {
  text-align: right;
}

.purchaseOrderProductsPanel {
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 31, 44, 0.08);
}

.purchaseOrderDetailTabs {
  min-height: 56px;
  display: flex;
  align-items: flex-end;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
}

.purchaseOrderDetailTabs .gearButton {
  margin-left: auto;
  align-self: center;
}

.purchaseOrderProductWrap {
  border: 0;
}

.purchaseOrderProductTable {
  min-width: 1420px;
}

.purchaseOrderProductTable th,
.purchaseOrderProductTable td {
  height: 118px;
}

.purchaseOrderProductTable th:nth-child(3),
.purchaseOrderProductTable td:nth-child(3) {
  min-width: 430px;
}

.purchaseOrderProductFooter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 34px;
  padding: 28px;
  border-top: 1px solid var(--line);
}

.purchaseOrderProductFooter p {
  margin: 8px 0 18px;
}

.purchaseOrderTotals {
  display: grid;
  gap: 10px;
  font-size: 14px;
}

/* Sapo: a cancelled purchase order's last step is a red ✕ "Hủy". */
.purchaseOrderStep.cancelled .purchaseOrderStepLine span { background: #ff4d5a; color: #fff; }
.purchaseOrderStep.done:not(.cancelled):last-child .purchaseOrderStepLine span { background: var(--blue); }

.createActionBar {
  margin: 0 -28px 28px;
}

.sourcePurchaseTitle {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin: 0 0 24px;
}

.sourcePurchaseTitle h1 {
  margin: 0;
  font-size: 22px;
}

.sourceOrderLink {
  font-size: inherit;
  font-weight: 700;
}

.sourcePurchaseQuickActions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.sourceBottomBar {
  position: sticky;
  bottom: 0;
  z-index: 15;
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  align-items: center;
  margin: 28px -28px -36px;
  padding: 12px 28px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.08);
}

.createTopGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  gap: 28px;
  margin-bottom: 28px;
}

.supplierCreateBody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  gap: 32px;
  min-height: 190px;
  align-items: start;
}

.supplierEmptyBody {
  min-height: 190px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 20px;
}

.supplierSearchWrap {
  position: relative;
}

.supplierSearchWrap .search {
  width: 100%;
}

.supplierSuggestDropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 35;
  max-height: 360px;
  overflow: auto;
  background: #fff;
  border: 1px solid #d7dee7;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}

.supplierSuggestRow {
  display: grid;
  gap: 6px;
  width: 100%;
  min-height: 66px;
  padding: 12px 18px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.supplierSuggestRow.active,
.supplierSuggestRow:hover {
  background: #eef7ff;
}

.supplierEmptyState {
  display: grid;
  place-content: center;
  justify-items: center;
  color: #98a2ad;
}

.emptyIcon {
  margin-bottom: 10px;
  color: #d7dee7;
  font-size: 34px;
}

.supplierNameLine {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 20px;
}

.supplierNameLine a {
  color: #008cff;
  text-decoration: none;
}

.supplierStatsBox {
  border: 1px dashed #b7c1ce;
  padding: 18px 22px;
}

.summaryLine {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  min-height: 34px;
}

.blueText {
  color: #008cff;
}

.createFormGrid {
  display: grid;
  gap: 18px;
}

.createFormField {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.createFormField span,
.createNotesCard span {
  color: var(--text);
}

.createFormField input,
.createFormField select,
.createFormField textarea {
  min-height: 48px;
}

.createFormField textarea {
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px;
  font: inherit;
}

.orderCreateSelectField {
  align-items: start;
}

.orderCreateSelect {
  position: relative;
  min-width: 0;
}

.orderCreateSelectButton {
  width: 100%;
  min-height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-color: var(--line);
  background: #fff;
  text-align: left;
}

.orderCreateSelectButton::after {
  content: "⌄";
  color: #7a8797;
}

.orderCreateSelectButton.active {
  border-color: #008cff;
  box-shadow: 0 0 0 3px rgba(0, 140, 255, 0.12);
}

.orderCreateSelectMenu {
  position: absolute;
  z-index: 70;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow: auto;
  border: 1px solid #d7dee7;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.orderCreateSelectMenu button {
  width: 100%;
  min-height: 44px;
  display: grid;
  gap: 2px;
  justify-items: start;
  border: 0;
  border-bottom: 1px solid #edf1f5;
  border-radius: 0;
  background: #fff;
  text-align: left;
}

.orderCreateSelectMenu button:hover,
.orderCreateSelectMenu button.selected {
  background: #eef7ff;
  color: #008cff;
}

.orderCreateSelectMenu small {
  color: var(--muted);
}

.createProductsCard {
  margin-bottom: 0;
}

.createProductHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.sourceProductHeader {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.inlineCheckbox {
  display: flex;
  gap: 8px;
  align-items: center;
}

.createProductTools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px 130px 180px;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  overflow: visible;
  position: relative;
}

.sourceProductTools {
  grid-template-columns: auto auto;
  justify-content: flex-end;
}

.createProductTools .search {
  width: 100%;
}

.productSearchWrap {
  position: relative;
  min-width: 0;
}

.clearSearchButton {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #9aa3af;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  transform: translateY(-50%);
}

.productSuggestDropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(1120px, calc(100vw - 380px));
  max-height: 540px;
  overflow: hidden;
  z-index: 30;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #fff;
  border: 1px solid #d7dee7;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);
}

.suggestCreateProduct {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  color: var(--blue);
  font-size: 14px;
  text-align: left;
}

.suggestPlus {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--blue);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

/* Lô - HSD of a branch in the ⓘ stock preview */
.orderSupplierLinePreview .lotChips { display: inline-flex; flex-wrap: wrap; gap: 4px; }

.suggestList {
  overflow: auto;
}

/* Product / customer suggestions under a search box: tight rows like the stock document search (owner 12/10/2026:
   "chiều cao mỗi row ngắn lại"), 40px picture, name and SKU on two close lines. */
.suggestProductRow {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 190px;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: 6px 22px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  color: var(--text);
  text-align: left;
}

.suggestProductRow.active,
.suggestProductRow:hover {
  background: #eef7ff;
}

.suggestProductThumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #f7fafc;
}

.customerSuggestAvatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #c8ddf5;
  border-radius: 50%;
  background: #eef7ff;
  color: var(--blue);
  font-size: 16px;
  font-weight: 700;
}

.suggestProductInfo {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.suggestProductInfo strong {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggestProductMeta {
  display: grid;
  gap: 2px;
  color: #98a2ad;
  justify-items: end;
}

.stockOk {
  color: var(--blue);
}

.stockZero {
  color: #ef4444;
}

.suggestEmpty {
  padding: 24px;
}

.createProductTable {
  min-width: 1280px;
  table-layout: auto;
}

.createProductTable th,
.createProductTable td {
  height: 72px;
  background: #fff;
  text-transform: none;
}

.createProductTable th {
  background: #fff;
  color: var(--text);
  font-size: 15px;
}

.lineNumberInput {
  width: 92px;
  border-width: 0 0 1px;
  border-radius: 0;
  text-align: right;
}

.removeLineButton {
  font-size: 28px;
  color: #98a2ad;
}

.createBottomGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 560px;
  gap: 28px;
  padding: 28px 20px 48px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 0;
}

.createNotesCard {
  display: grid;
  gap: 20px;
  align-content: start;
  max-width: 420px;
}

.createNotesCard label {
  display: grid;
  gap: 10px;
}

.createNotesCard textarea {
  min-height: 88px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px;
  font: inherit;
}

.createNotesCard input {
  min-height: 88px;
}

.createTotalsCard {
  display: grid;
  gap: 4px;
  align-content: start;
}

.createTotalsCard h3 {
  margin: 14px 0 4px;
  font-size: 16px;
}

.totalLink {
  justify-self: start;
  margin-bottom: 10px;
}

.productPickerModal {
  width: min(1040px, calc(100vw - 48px));
  max-height: calc(100vh - 64px);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.22);
}

.pickerFilters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 130px 150px;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}

.pickerFilters .search {
  width: 100%;
}

.selectAllProducts {
  padding: 12px 22px;
  border-bottom: 1px solid var(--line);
}

.selectAllProducts button {
  margin-left: auto;
}

.pickerError {
  margin: 10px 22px;
}

.pickerProductList {
  overflow: auto;
}

.pickerProductRow {
  display: grid;
  grid-template-columns: 28px 48px minmax(0, 1fr) 140px 90px 120px;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: 6px 22px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  text-align: left;
}

.pickerProductRow:hover {
  background: #f8fafc;
}

/* Tạo đơn hàng → Chọn nhanh: picture, name / SKU, price and stock — the six columns above are Tạo đơn nhập's (with a
   checkbox), and squeezed the name into 48px here. */
.pickerProductRow.orderPickerRow {
  grid-template-columns: 40px minmax(0, 1fr) 220px;
}

.productPanelHeader .orderTab {
  padding: 0;
}

.productDetailTable {
  table-layout: auto;
}

.productDetailTable th,
.productDetailTable td {
  height: 58px;
  background: #fff;
  text-transform: none;
}

/* The global th, td rule keeps every cell on one line: a long product name ("Set Viên uống Tylenol Cold + Flu …
   (72 LiquidGels)") then pushed the order's product table past its panel. Text cells wrap; numbers stay on one line,
   and a table still too wide scrolls inside its panel. Money cells too: "anywhere" let the table squeeze Đơn giá
   below its figure, "885,00" over "0" (Đặt hàng nhập, owner 15/10/2026). */
.productDetailTable td:not(.numberCell):not(.moneyCell):not(.orderDetailLineTotal) {
  white-space: normal;
  overflow-wrap: anywhere;
}

.productPanel {
  overflow-x: auto;
}

.productThumb {
  width: 34px;
  height: 48px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.productListThumb {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.productsTable {
  min-width: 1320px;
}

.inventoryTable {
  min-width: 1780px;
}

.stockAdjustmentsMain .orderTabs { margin: 0; background: #fff; }
.stockAdjustmentsMain .stockAdjustmentsTable { min-width: 1280px; }
.stockAdjustmentsMain .stockAdjustmentNote { max-width: 240px; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .stockAdjustmentsMain .toolbarActions { flex-wrap: wrap; }
}

.stockAdjustmentsTable {
  min-width: 1560px;
}

.stockTransfersMain .orderTabs { margin: 0; background: #fff; }
.stockTransfersMain .stockTransfersTable { min-width: 1280px; }
/* Columns chosen in ⚙ (list-columns-ui.js), so by class, not position: branches wrap, Ghi chú stays one line as on Sapo. */
.stockTransfersMain .stockTransfersTable .documentCodeCell { min-width: 120px; }
.stockTransfersMain .stockTransfersTable .documentWrapCell,
.priceAdjustmentsMain .priceAdjustmentsTable .documentWrapCell { max-width: 240px; white-space: normal; overflow-wrap: anywhere; }
.stockTransfersMain .stockTransfersTable .documentNoteCell,
.priceAdjustmentsMain .priceAdjustmentsTable .documentNoteCell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .stockTransfersMain .toolbarActions { flex-wrap: wrap; }
  .stockTransfersMain .orderTabs { flex-wrap: nowrap; overflow-x: auto; }
  .stockTransfersMain .orderTab { flex: 0 0 auto; }
}

.suppliersMain.orderListMain { background: #f5f6f8; }
.suppliersMain.orderListMain .ordersContent { padding: 24px 16px; }
.supplierListHeading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.supplierListHeading h1 { font-size: 26px; font-weight: 600; margin: 0; }
.suppliersMain .sapoPageTitle { min-height: 48px; margin-bottom: 16px; }
.suppliersMain .sapoPageTitle .toolbarActions { justify-content: flex-start; flex-wrap: wrap; }
.suppliersMain .orderTabs { margin: 0; background: #fff; }
.suppliersMain .suppliersTable { min-width: 1120px; }
.suppliersMain .suppliersTable th { background: #fff; }
.suppliersMain .suppliersTable td:nth-child(3),
.suppliersMain .suppliersTable td:nth-child(4) { max-width: 320px; white-space: normal; overflow-wrap: anywhere; }
.suppliersMain .suppliersTable .pill { border: 0; background: transparent; border-radius: 0; padding: 0; }
.suppliersMain .suppliersTable .moneyCell { text-align: right; }
@media (max-width: 760px) {
  .supplierListHeading { align-items: flex-start; flex-wrap: wrap; }
  .suppliersMain .orderTabs { flex-wrap: nowrap; overflow-x: auto; }
  .suppliersMain .orderTab { flex: 0 0 auto; }
}

.stockTransfersTable {
  min-width: 1680px;
}

.priceAdjustmentsMain .orderTabs { margin: 0; background: #fff; }
.priceAdjustmentsMain .priceAdjustmentsTable { min-width: 1120px; }
@media (max-width: 760px) {
  .priceAdjustmentsMain .toolbarActions { flex-wrap: wrap; }
  .priceAdjustmentsMain .orderTabs { flex-wrap: nowrap; overflow-x: auto; }
  .priceAdjustmentsMain .orderTab { flex: 0 0 auto; }
}

.priceAdjustmentsTable {
  min-width: 1460px;
}

/* Mã phiếu kiểm: after the ⚙ and checkbox columns. */
.stockAdjustmentsTable th:nth-child(3),
.stockAdjustmentsTable td:nth-child(3) {
  min-width: 170px;
}

/* ⚙ Điều chỉnh cột hiển thị trên trang danh sách (list-columns-ui.js): Sapo's two boxes side by side. */
.listColumnsModal { width: min(560px, calc(100vw - 32px)); }
.listColumnsModal .columnConfigBody { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 18px; overflow: auto; }
/* Tall enough for Chuyển hàng's 18 columns without scrolling, as on Sapo; shorter screens scroll the boxes. */
.listColumnsModal .columnPicker, .listColumnsModal .columnOrder { max-height: min(820px, calc(100vh - 200px)); padding: 12px; border: 1px solid var(--line); border-radius: 4px; }
.listColumnsModal .columnPicker h3, .listColumnsModal .columnOrder h3 { margin: 0 0 10px; font-size: 14px; }
.listColumnsModal .columnPicker .search { width: 100%; box-sizing: border-box; margin-bottom: 6px; }
.listColumnsModal .columnOption { min-height: 30px; }
.listColumnsModal .columnOption[hidden] { display: none; }
.listColumnsModal .columnOptionGroup { display: grid; gap: 10px 18px; }
.listColumnsModal .columnOptionGroup[hidden] { display: none; }
.listColumnsModal .columnGroupTitle { margin: 6px 0 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.listColumnsModal .columnOption input { width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; }
.listColumnsModal .columnOrderList { gap: 0; }
.listColumnsModal .columnOrderItem { grid-template-columns: minmax(0, 1fr) auto; min-height: 32px; padding: 0 4px; border: 0; background: transparent; cursor: grab; }
.listColumnsModal .columnOrderItem.locked { cursor: default; }
.listColumnsModal .columnOrderItem span { color: var(--text); }
.listColumnsModal .columnRemove { min-width: 0; min-height: 0; padding: 0 4px; border: 0; background: transparent; color: #98a2ad; font-size: 18px; line-height: 1; }
.listColumnsModal .columnRemove:hover { color: var(--text); }
@media (max-width: 560px) {
  .listColumnsModal .columnConfigBody { grid-template-columns: minmax(0, 1fr); }
  .listColumnsModal .modalFooter { flex-wrap: wrap; }
}

/* Xuất file of the stock document lists: Sapo's "Giới hạn kết quả xuất" (and Chuyển hàng's "Loại xuất file") choice. */
.exportScopeModal { width: min(545px, calc(100vw - 32px)); }
.exportScopeModal .smallModalBody { display: grid; gap: 10px; }
.exportScopeModal .smallModalBody strong:not(:first-child) { margin-top: 6px; }
.exportScopeOption { display: flex; align-items: center; gap: 8px; }
.exportScopeOption input { width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; }

.stockAdjustmentFilters .search {
  flex-basis: 680px;
}

.stockTransferFilters .search {
  flex-basis: 680px;
}

.priceAdjustmentFilters .search {
  flex-basis: 680px;
}

.activeFilterChips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 22px 18px;
  background: #fff;
}

.filterChip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: #e9f5ff;
  color: #334e68;
  font-weight: 500;
}

.stockAdjustmentDetailPage {
  min-height: calc(100vh - 65px);
  padding: 0 42px 38px;
  background: #f3f4f6;
}

.stockTransferDetailPage {
  min-height: calc(100vh - 65px);
  padding: 0 42px 38px;
  background: #f3f4f6;
}

.priceAdjustmentDetailPage {
  min-height: calc(100vh - 65px);
  padding: 0 42px 38px;
  background: #f3f4f6;
}

.stockAdjustmentActionBar {
  margin: 0 -42px 28px;
  padding: 10px 42px;
}

.stockTransferActionBar {
  margin: 0 -42px 28px;
  padding: 10px 42px;
}

.priceAdjustmentActionBar {
  margin: 0 -42px 28px;
  padding: 10px 42px;
}

.priceAdjustmentActionBar .dangerOutline {
  border-color: #ff4d4f;
  color: #ff3338;
  background: #fff;
}

.stockAdjustmentTitleRow {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 28px;
}

.stockTransferTitleRow {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.priceAdjustmentTitleRow {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 24px;
}

.stockAdjustmentTitleRow h1 {
  display: inline-block;
  margin: 0 14px 0 0;
  font-size: 30px;
}

.stockTransferTitleRow h1 {
  display: inline-block;
  margin: 0 14px 20px 0;
  font-size: 30px;
}

.priceAdjustmentTitleRow h1 {
  margin: 0;
  font-size: 30px;
}

.stockTransferDetailActions {
  justify-content: flex-start;
}

.stockTransferDetailActions button {
  min-height: 52px;
  padding: 0 24px;
}

.stockTransferTimeline {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  gap: 0;
  padding-top: 10px;
}

.stockTransferStep {
  color: var(--muted);
  font-size: 16px;
}

.stockTransferStep strong {
  display: block;
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  margin: 8px 0 4px;
}

.stockTransferStepLine {
  position: relative;
  height: 24px;
}

.stockTransferStepLine::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 28px;
  right: 0;
  height: 2px;
  background: var(--blue);
}

.stockTransferStep:last-child .stockTransferStepLine::after {
  display: none;
}

.stockTransferDot {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.stockAdjustmentDetailGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 640px;
  gap: 38px;
  align-items: stretch;
  margin-bottom: 36px;
}

.stockTransferDetailGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 570px;
  gap: 34px;
  align-items: stretch;
  margin-bottom: 36px;
}

.priceAdjustmentDetailGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 630px;
  gap: 36px;
  align-items: start;
}

.priceAdjustmentSidePanels {
  display: grid;
  gap: 36px;
}

.stockAdjustmentInfoGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 76px;
  padding: 18px 20px 32px 0;
}

.stockTransferInfoGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 72px;
  padding: 18px 20px 32px 0;
}

.priceAdjustmentInfoGrid {
  padding: 18px 0 20px;
}

.stockAdjustmentInfoGrid .metaRow {
  grid-template-columns: 240px minmax(0, 1fr);
  margin: 0;
  font-size: 18px;
}

.stockTransferInfoGrid .metaRow {
  grid-template-columns: 220px minmax(0, 1fr);
  margin: 0;
  font-size: 18px;
}

.priceAdjustmentInfoGrid .metaRow {
  grid-template-columns: 190px minmax(0, 1fr);
  margin: 0 0 14px;
  font-size: 18px;
}

.stockAdjustmentLinesPanel {
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 31, 44, 0.08);
}

.stockTransferProductsPanel {
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 31, 44, 0.08);
}

.priceAdjustmentProductsPanel {
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 31, 44, 0.08);
}

.panelHeader {
  min-height: 78px;
  display: flex;
  align-items: center;
  padding: 0 38px;
  border-bottom: 1px solid var(--line);
}

.panelHeader h2 {
  margin: 0;
  font-size: 24px;
}

.stockAdjustmentDetailTabs {
  min-height: 70px;
  display: flex;
  align-items: flex-end;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
}

.stockTransferDetailTabs {
  min-height: 70px;
  display: flex;
  align-items: flex-end;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
}

.stockAdjustmentDetailTabs .orderTab {
  min-height: 70px;
  padding: 0 24px;
  border-radius: 0;
}

.stockTransferDetailTabs .orderTab {
  min-height: 70px;
  padding: 0 24px;
  border-radius: 0;
}

.stockAdjustmentLineWrap {
  border: 0;
}

.stockTransferProductWrap {
  border: 0;
}

.priceAdjustmentProductWrap {
  border: 0;
}

.stockAdjustmentLineTable {
  min-width: 1700px;
}

.stockTransferProductTable {
  min-width: 1600px;
}

.priceAdjustmentProductTable {
  min-width: 1180px;
}

.stockAdjustmentLineTable th,
.stockAdjustmentLineTable td {
  height: 86px;
}

.stockTransferProductTable th,
.stockTransferProductTable td {
  height: 92px;
}

.priceAdjustmentProductTable th,
.priceAdjustmentProductTable td {
  height: 116px;
}

.stockAdjustmentLineTable th:nth-child(3),
.stockAdjustmentLineTable td:nth-child(3) {
  min-width: 420px;
}

.stockTransferProductTable th:nth-child(3),
.stockTransferProductTable td:nth-child(3) {
  min-width: 420px;
}

.priceAdjustmentProductTable th:nth-child(2),
.priceAdjustmentProductTable td:nth-child(2) {
  min-width: 480px;
}

.stockAdjustmentDetailFooter {
  margin: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}

.priceAdjustmentDetailFooter {
  margin: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}

.stockTransferTotals {
  width: min(620px, 100%);
  margin-left: auto;
  padding: 24px 28px 30px;
  display: grid;
  gap: 16px;
  font-size: 18px;
}

.stockTransferTotals > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 24px;
  align-items: center;
}

.stockTransferTotals > div:not(:last-child) {
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}

.stockTransferTotals strong {
  text-align: right;
  font-weight: 600;
}

.skuLink {
  margin-top: 6px;
  padding: 0;
}

/* Columns chosen in ⚙ (list-columns-ui.js), so by class, not position. */
.purchaseOrdersTable {
  min-width: 1280px;
}
.purchaseOrdersTable .documentCodeCell, .orderSuppliersTable .documentCodeCell { min-width: 120px; }
.purchaseOrdersTable .documentWrapCell, .orderSuppliersTable .documentWrapCell, .shipmentsTable .documentWrapCell { max-width: 260px; white-space: normal; overflow-wrap: anywhere; }
.purchaseOrdersTable .documentNoteCell, .orderSuppliersTable .documentNoteCell, .shipmentsTable .documentNoteCell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Columns chosen in ⚙ (list-columns-ui.js), so by class, not position. */
.productsTable .productNameCell {
  min-width: 360px;
}

.inventoryTable th:nth-child(3),
.inventoryTable td:nth-child(3) {
  min-width: 380px;
}

.customerGroupsTable th:nth-child(1),
.customerGroupsTable td:nth-child(1) {
  min-width: 260px;
}

.customerGroupsTable th:nth-child(4),
.customerGroupsTable td:nth-child(4) {
  min-width: 320px;
}

.customerGroupsMain .customerGroupsTable { min-width: 960px; width: 100%; table-layout: fixed; }
.customerGroupsMain .customerGroupsTable th:nth-child(1) { width: 20%; }
.customerGroupsMain .customerGroupsTable th:nth-child(2) { width: 10%; }
.customerGroupsMain .customerGroupsTable th:nth-child(3) { width: 14%; }
.customerGroupsMain .customerGroupsTable th:nth-child(4) { width: 28%; }
.customerGroupsMain .customerGroupsTable th:nth-child(5) { width: 16%; }
.customerGroupsMain .customerGroupsTable th:nth-child(6) { width: 12%; }
.customerGroupsMain .customerGroupsTable th,
.customerGroupsMain .customerGroupsTable td { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.customerGroupsMain .customerGroupsTable th:nth-child(5),
.customerGroupsMain .customerGroupsTable td:nth-child(5) { text-align: center; }
.customerGroupsMain .paginationFooter { display: flex; justify-content: flex-end; gap: 20px; flex-wrap: wrap; margin: 0; }
.customerGroupsMain .toolbarActions { flex-wrap: wrap; }
.customerGroupsMain tbody tr { cursor: default; }

@media (max-width: 760px) {
  .customerGroupsMain .paginationFooter { justify-content: space-between; gap: 12px; }
}

.customersTable {
  min-width: 1500px;
}

.customerGroupCreatePage { min-height: 100vh; background: #eef0f0; }
.groupTypeBackdrop { align-items: flex-start; padding: 50px 16px 16px; }
.groupTypeDialog { width: min(600px, 100%); max-height: calc(100dvh - 66px); overflow-y: auto; background: #fff; border-radius: 4px; }
.groupTypeHeader { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--line); gap: 16px; }
.groupTypeHeader h2 { margin: 0; font-size: 20px; font-weight: 500; }
.groupTypeHeader button { width: 32px; height: 32px; padding: 0; border: 0; font-size: 24px; }
.groupTypeOptions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 32px 24px; }
.groupTypeOptions button { min-height: 140px; white-space: normal; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; font-size: 14px; }
.groupTypeOptions button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (max-width: 480px) {
  .groupTypeBackdrop { padding-top: 16px; }
  .groupTypeDialog { max-height: calc(100dvh - 32px); }
  .groupTypeOptions { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px; }
  .groupTypeOptions button { min-height: 96px; }
}
.groupCreateActions { min-height: 56px; padding: 8px 32px; background: white; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.groupCreateActions > button { border: 0; background: transparent; color: #637381; text-align: left; }
.groupCreateActions > div { display: flex; gap: 16px; flex-shrink: 0; }
.groupCreateColumns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 24px 32px; }
.groupGeneralColumn { display: grid; gap: 24px; min-width: 0; }
.dynamicGroupCreate .groupGeneralColumn > .groupCreateSection:first-child .groupCreateFields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dynamicGroupCreate .groupGeneralColumn > .groupCreateSection:first-child .createFormField:last-child { grid-column: 1 / -1; }
.groupMatchOption { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.groupCreateFields .groupMatchOption input { width: 16px; min-height: 16px; height: 16px; }
.groupConditionRow { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(0, 2fr) 32px; align-items: center; gap: 8px; }
.groupConditionRow > span { grid-column: 1 / -1; }
.groupConditionRow button { padding: 0; width: 32px; height: 32px; }
.groupMatchPreview p { margin: 32px 24px; text-align: center; }
.groupConditionAdd { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.groupGenderRow { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 12px; align-items: center; }
.groupGenderRow fieldset { border: 1px solid var(--line); margin: 0; padding: 12px; display: flex; flex-wrap: wrap; gap: 16px; min-width: 0; }
.groupGenderRow legend { font-size: 14px; padding: 0 4px; }
.groupGenderRow button { width: 32px; height: 32px; padding: 0; }
.groupTagsRow { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 12px; align-items: center; }
.groupTagsRow fieldset { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); }
.groupTagsRow legend { font-size: 14px; padding: 0 4px; }
.groupTagsRow button { width: 32px; height: 32px; padding: 0; flex: 0 0 32px; }
.groupTagValues { display: flex; flex-wrap: wrap; gap: 8px; }
.groupTag { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; background: #f3f4f5; border-radius: 4px; padding-left: 8px; margin-bottom: 8px; }
.groupTag > span { min-width: 0; overflow-wrap: anywhere; }
.groupTagInput { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 8px; align-items: center; }
.groupAgeRow { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 12px; align-items: center; }
.groupAgeRow fieldset { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); display: grid; gap: 12px; }
.groupAgeRow legend { font-size: 14px; padding: 0 4px; }
.groupAgeRow button { width: 32px; height: 32px; padding: 0; }
.groupAgeValues { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 12px; }
.groupAgeValues label { display: grid; gap: 8px; min-width: 0; font-size: 14px; }
.groupAgeValues .groupMatchOption { display: flex; grid-column: 1 / -1; }
.groupYearValues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.groupYearValues input:disabled { background: #f3f4f5; color: #637381; }
@media (max-width: 1100px) {
  .groupConditionRow { grid-template-columns: minmax(0, 1fr) 32px; }
  .groupConditionRow > span { grid-column: 1 / -1; }
  .groupConditionRow select { grid-column: 1; }
  .groupConditionRow input { grid-column: 1; }
  .groupConditionRow button { grid-column: 2; grid-row: 3; }
}
.groupCreateSection { min-width: 0; background: white; }
.groupCreateSection h2 { margin: 0; padding: 16px 24px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 500; }
.groupCreateFields { padding: 16px 24px 24px; display: grid; gap: 16px; }
.groupCreateFields .createFormField { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; font-size: 14px; }
.groupCreateFields input,
.groupCreateFields select,
.groupCreateFields textarea { width: 100%; min-width: 0; min-height: 40px; font-size: 14px; border-radius: 3px; }
.groupCreateFields textarea { min-height: 72px; resize: vertical; padding: 10px; border: 1px solid var(--line); }
.groupCreateFields input[type="number"] { text-align: right; }
.groupDraftNotice { margin: 16px 32px 0; }
@media (max-width: 760px) {
  .groupCreateColumns { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 16px; }
  .groupCreateActions { flex-wrap: wrap; padding: 12px 16px; }
  .groupCreateActions > div { margin-left: auto; }
  .groupDraftNotice { margin: 16px 16px 0; }
}

.customersMain .orderTabs { margin: 0; background: #fff; flex-wrap: nowrap; overflow-x: auto; }
.customersMain .orderTab { flex: 0 0 auto; }
.customersMain .toolbarActions { flex-wrap: wrap; }
.customersMain .customersTable { min-width: 1400px; }
/* Columns chosen in ⚙ (list-columns-ui.js), so by class, not position. */
.customersMain .customersTable .customerCodeCell { min-width: 132px; }
.customersMain .customersTable .customerGroupCell { min-width: 150px; }
.customersMain .customersTable td.customerNameCell,
.customersMain .customersTable td.customerGroupCell { white-space: normal; overflow-wrap: anywhere; max-width: 220px; }
.customersMain .customersTable td.customerNameCell .orderLink { color: inherit; white-space: normal; text-align: left; }
.customersMain .customersTable th.moneyCell { text-align: right; }
.customersMain .customersTable .documentWrapCell { max-width: 260px; white-space: normal; overflow-wrap: anywhere; }

.customersTable .customerCodeCell {
  min-width: 220px;
}

.customersTable th:nth-child(5),
.customersTable td:nth-child(5) {
  min-width: 240px;
}

.truncateCell {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moneyCell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.productNameLink {
  max-width: 100%;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.productTypeLine {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.numberCell {
  /* Owner 09/10/2026: quantities centred; money columns (.moneyCell) right-aligned. */
  text-align: center;
  white-space: pre-line;
}

.singleTab {
  margin-top: 16px;
}

.productFilters .search {
  flex-basis: 520px;
}

.block {
  display: block;
  margin: 4px 0;
}

.customerCreatePage {
  min-height: calc(100vh - 65px);
  padding: 0 28px 36px;
  background: #f3f4f6;
}

.customerDetailPage {
  min-height: calc(100vh - 65px);
  min-width: 0;
  padding: 0 24px 32px;
  background: #f3f4f6;
}

.customerDetailActionBar {
  margin: 0 -24px 20px;
  padding: 10px 24px;
}

.customerDetailName {
  margin: 0 0 20px;
  font-size: 24px;
  line-height: 1.2;
}

.customerDetailGrid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.customerProfileModal { width: min(780px, calc(100vw - 32px)); }
.customerProfileModal[role="dialog"] { background: #fff; display: flex; flex-direction: column; max-height: calc(100dvh - 32px); border-radius: 6px; overflow: hidden; }
.customerProfileModalBody { padding: 20px; overflow: auto; min-height: 0; }
.customerProfileModalBody table { width: 100%; border-collapse: collapse; font-size: 14px; }
.customerProfileModalBody th, .customerProfileModalBody td { padding: 10px; text-align: left; border-bottom: 1px solid #e4e8ee; overflow-wrap: anywhere; white-space: normal; text-overflow: clip; }
.customerProfileModalBody .linkButton { white-space: normal; overflow-wrap: anywhere; max-width: 100%; text-align: left; }
.customerProfileModalBody input[type="file"] { display: block; width: 100%; margin-top: 12px; }
.customerProfileModal > .modalHeader, .customerProfileModal > .modalFooter { flex-shrink: 0; }
.customerProfileModal > .modalHeader h2 { font-size: 20px; }
.customerProfileModal > .modalFooter { flex-wrap: wrap; gap: 8px; }
.sapoApprovalReview > .modalFooter { justify-content: flex-end; }
.sapoApprovalReview .primaryAction:disabled { background: #eef0f2; color: #737d89; border-color: #e2e6ea; cursor: not-allowed; }
.sapoApprovalReview .customerProfileModalBody { overflow-wrap: anywhere; }
.customerProfileModal .settingsFormField { min-width: 0; }
.customerProfileModal textarea { width: 100%; resize: vertical; }
.ledgerTotal { margin: 0; padding: 12px 20px; border-bottom: 1px solid #e4e8ee; font-size: 14px; }
.ledgerFilters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ledgerFilters > select { width: auto; max-width: 240px; min-width: 140px; }
.ledgerFilters > label { width: auto; }
.voucherPresets, .voucherPresetEditor { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; }
.voucherPresets select, .voucherPresetEditor input { width:200px; max-width:100%; min-width:0; }
.voucherAdvancedFilters { flex-basis:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:12px 0; border-top:1px solid #e5e7eb; }
.voucherAdvancedFilters select { width:100%; min-width:0; }
@media (max-width:700px) { .voucherAdvancedFilters { grid-template-columns:minmax(0,1fr); } .voucherPresets { flex-basis:100%; } }
.receiptVoucherCreatePage .settingsFormField { min-width: 0; overflow-wrap: anywhere; }
.ledgerFilters > input[type="search"] { flex: 1 1 240px; min-width: 0; }
.ledgerFilters label { display: flex; align-items: center; gap: 6px; }
.ledgerPagination { flex-wrap: wrap; gap: 12px; }
.ledgerPagination label { display: flex; align-items: center; gap: 8px; }
.ledgerPagination .pages { display: flex; align-items: center; gap: 10px; }
.customerRelatedActions { display: flex; justify-content: flex-end; padding: 12px 16px; border-bottom: 1px solid #e2e5e9; }
.customerRowActions { white-space: nowrap; }
.customerRowActions button + button { margin-left: 12px; }
.customerProfileModal .settingsFormGrid { gap: 16px; }
.customerCreatePage .settingsFormField { margin-bottom: 0; min-width: 0; font-size: 14px; line-height: 20px; align-content: start; }
.customerCreatePage .settingsFormGrid { gap: 18px 24px; }
.customerCreatePage .settingsFormField input,
.customerCreatePage .settingsFormField select { min-height: 42px; height: 42px; }
.customerCreatePage .settingsFormField textarea { min-height: 100px; padding: 10px 12px; resize: vertical; }
.customerCreatePage .customerCreateRight .settingsFormField + .settingsFormField { margin-top: 16px; }
@media (max-width: 640px) {
  .customerCreatePage .settingsFormGrid { grid-template-columns: minmax(0, 1fr); }
}

.customerDetailLeft,
.customerDetailRight {
  display: grid;
  min-width: 0;
  gap: 24px;
  align-content: start;
}

.customerDetailMetaGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
}

.customerDetailRight .customerDetailMetaGrid,
.customerDetailRight .detailCardBody {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.customerDetailMetaRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.3;
}

.customerDetailRight .customerDetailMetaRow {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.customerDetailMetaRow strong {
  color: var(--text);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.customerDetailPage .detailCardHeader {
  min-height: 48px;
  padding: 12px 16px;
  flex-wrap: wrap;
}

.customerDetailPage .detailCardHeader h3 { font-size: 16px; font-weight: 500; }
.customerDetailPage .detailCardBody { padding: 16px; }
.customerDetailMetaRow > * { min-width: 0; overflow-wrap: anywhere; }

.inlineLink {
  min-height: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
  font-weight: 500;
  vertical-align: baseline;
}

.customerDetailTabsPanel {
  min-width: 0;
  margin-top: 24px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 31, 44, 0.08);
}

.customerDetailTabs {
  min-height: 48px;
  display: flex;
  align-items: flex-end;
  gap: 0;
  padding: 0 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}

.customerDetailTabs .orderTab {
  min-height: 48px;
  padding: 0 16px;
  font-size: 14px;
  border-radius: 0;
}

.customerDetailTableWrap {
  border: 0;
}

.customerDetailTable {
  min-width: 1440px;
}

.customerMembershipTable { min-width: 640px; }

@media (max-width: 640px) {
  .customerDetailPage { padding: 0 12px 24px; }
  .customerDetailActionBar { margin: 0 -12px 16px; padding: 10px 12px; flex-wrap: wrap; }
  .customerDetailPage .detailActions { flex-wrap: wrap; }
}

.customerDetailTable th,
.customerDetailTable td {
  height: 58px;
}

.customerDetailFooter {
  margin: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}

.customerCreateActionBar {
  margin: 0 -28px 22px;
}

.backLink {
  color: var(--muted);
}

.customerCreateNotice {
  margin: 0 0 18px;
}

.customerCreateGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 28px;
  align-items: start;
}

.supplierDetailHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.supplierDetailMetaGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 44px;
  padding-top: 18px;
}

.supplierDetailMetaGrid .metaRow {
  grid-template-columns: 150px minmax(0, 1fr);
  margin-bottom: 0;
}

.supplierDetailTabsPanel {
  margin-top: 22px;
}

.supplierDetailTableWrap {
  border-top: 1px solid var(--line);
}

.productListShell .supplierDetailPage { padding: 24px clamp(20px, 5vw, 88px) 40px; font-size: 14px; }
.supplierDetailPage .customerCreateActionBar { margin: 0 0 16px; padding: 0; background: transparent; border: 0; box-shadow: none; min-height: 40px; }
.supplierDetailPage .supplierCreateTitle { margin: 0 0 28px; }
.supplierDetailPage .supplierCreateTitle h1 { margin: 0; font-size: 26px; line-height: 1.4; }
.supplierDetailPage .supplierInfoCard { border-radius: 4px; }
.supplierDetailPage .supplierDetailHeader { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 18px 20px; gap: 20px; min-height: 58px; }
.supplierDetailPage .supplierDetailHeader h3 { font-size: 16px; font-weight: 500; margin: 0; }
.supplierDetailPage .supplierDetailHeader .pill { justify-self: start; align-self: center; }
.supplierDetailPage .supplierDetailMetaGrid { grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 12px 36px; padding: 22px 20px 28px; }
.supplierDetailPage .supplierDetailMetaGrid .metaRow { grid-template-columns: minmax(100px, 38%) minmax(0, 1fr); gap: 18px; line-height: 1.5; font-size: 13px; align-items: start; }
.supplierDetailPage .metaRow strong { position: relative; font-weight: 400; overflow-wrap: anywhere; }
.supplierDetailPage .metaRow strong::before { content: ":"; position: absolute; left: -12px; }
.supplierDetailPage .supplierDetailTabsPanel { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding-bottom: 24px; }
.supplierDetailPage .supplierDetailTabs { display: flex; margin: 0; padding: 0 16px; overflow-x: auto; flex-wrap: nowrap; background: #fff; }
.supplierDetailPage .supplierDetailTabs .orderTab { flex-shrink: 0; font-size: 14px; padding: 16px 12px; }
.supplierDetailPage .supplierDetailTable th { font-weight: 500; }
.supplierDetailPage .supplierDetailTable { min-width: 1020px; width: 100%; }
.supplierDetailPage .supplierDetailTable th, .supplierDetailPage .supplierDetailTable td { padding: 18px 20px; font-size: 13px; }
.supplierActions { position: relative; justify-self: end; }
.supplierActions summary { cursor: pointer; padding: 8px 0 8px 12px; }
.supplierActionsMenu { position: absolute; z-index: 20; right: 0; top: 100%; width: 280px; max-width: calc(100vw - 48px); background: white; border: 1px solid var(--line); border-radius: 4px; padding: 6px; box-shadow: 0 4px 16px #14202d20; }
.supplierActionsMenu a, .supplierActionsMenu button { display: block; width: 100%; text-align: left; padding: 12px; border: 0; background: transparent; text-decoration: none; font-size: 13px; }
.supplierActionsMenu a:hover { background: #f3f7fb; }
.supplierActionsMenu p { margin: 6px 12px 10px; font-size: 12px; line-height: 1.5; }
.supplierDebtFilters { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 12px 20px; }
.supplierDebtFilterMenu { position: relative; }
.supplierDebtFilterMenu summary { padding: 10px 14px; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.supplierDebtFilterForm { position: absolute; z-index: 10; top: 100%; left: 0; display: grid; gap: 14px; width: 300px; max-width: calc(100vw - 70px); padding: 20px; background: white; border: 1px solid var(--line); box-shadow: 0 4px 12px #14202d20; border-radius: 4px; }
.supplierDebtFilterForm label { display: grid; gap: 6px; }
.supplierDebtFilterForm input { width: 100%; min-width: 0; }
.supplierDebtFilterChip { display: flex; align-items: center; gap: 10px; padding: 4px 12px; background: #edf0f3; }
.supplierDebtFilterChip button { border: 0; background: transparent; }
.supplierDebtNotice { margin: 0; padding: 12px 20px; background: #fff8e6; line-height: 1.6; }
@media (max-width: 1100px) {
  .supplierDetailPage .supplierDetailMetaGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); }
}
@media (max-width: 700px) {
  .productListShell .supplierDetailPage { padding: 16px 12px 28px; }
  .supplierDetailPage .customerCreateActionBar { flex-wrap: wrap; }
  .supplierDetailPage .supplierDetailHeader { grid-template-columns: 1fr auto; gap: 12px; }
  .supplierDetailPage .supplierDetailHeader .supplierActions { grid-column: 1 / -1; }
  .supplierDetailPage .supplierDetailMetaGrid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; gap: 14px; }
}

.centerCell {
  text-align: center;
}

.customerHistoryStatus {
  display: inline-block;
  width: 24px;
  line-height: 24px;
  text-align: center;
  vertical-align: middle;
}

.customerCreateLeft,
.customerCreateRight {
  display: grid;
  gap: 28px;
  align-content: start;
}

.customerFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 26px;
}

.customerFormGrid .createFormField,
.customerCreateRight .createFormField {
  grid-template-columns: 1fr;
  gap: 8px;
}

.customerCreateRight .createFormField {
  margin-bottom: 18px;
}

.customerFormGrid .createFormField input,
.customerFormGrid .createFormField select,
.customerCreateRight .createFormField input,
.customerCreateRight .createFormField select,
.customerCreateRight .createFormField textarea {
  width: 100%;
  min-height: 48px;
}

.customerCreateRight textarea,
.fullField textarea {
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  resize: vertical;
  font: inherit;
}

.addressPanel {
  margin-top: 20px;
  border: 1px solid var(--line);
  background: #fbfcfd;
}

.toggleLine {
  min-height: 54px;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: #f3f4f6;
}

.toggleLine input {
  width: 34px;
  height: 18px;
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: #8b95a1;
  position: relative;
}

.toggleLine input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
}

.addressPanel .customerFormGrid {
  padding: 18px 14px;
}

.fullField {
  grid-column: 1 / -1;
}

.advancedRadioGroup {
  display: grid;
  gap: 14px;
}

.advancedRadioGroup > span {
  font-weight: 600;
}

.customerCreateRight .detailCardBody {
  padding-bottom: 12px;
}

.totals {
  display: grid;
  justify-content: end;
  padding: 18px 22px;
}

.totals .metaRow {
  width: 500px;
  grid-template-columns: minmax(0, 1fr) 150px;
}

/* Totals under a document's product table sit against the right edge with right-aligned amounts, like Sapo.
   div.totals outranks the later .documentDetail .metaRow rule. */
div.totals > .metaRow {
  width: min(460px, 100%);
  grid-template-columns: minmax(0, 1fr) 160px;
  margin: 0 0 12px;
}

div.totals > .metaRow strong {
  text-align: right;
}

@media (max-width: 1180px) {
  .orderTitleBlock,
  .orderActionBar {
    align-items: stretch;
    flex-direction: column;
  }

  .orderTimeline {
    min-width: 0;
  }

  .orderDetailGrid {
    grid-template-columns: 1fr;
  }

  .detailMetaGrid,
  .wideMetaGrid {
    grid-template-columns: 1fr;
  }

  .providerGrid {
    grid-template-columns: 1fr;
  }

  .customerCreateGrid,
  .customerDetailGrid,
  .customerFormGrid {
    grid-template-columns: 1fr;
  }

  .customerDetailMetaGrid {
    grid-template-columns: 1fr;
  }

  .customerDetailMetaRow,
  .customerDetailRight .customerDetailMetaRow {
    grid-template-columns: 170px minmax(0, 1fr);
  }
}

@media (max-width: 1080px) {
  .shell {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .nav {
    position: sticky;
    top: 0;
    z-index: 3;
    max-height: 45vh;
  }

  .workspace {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .navItems {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .main {
    grid-template-columns: 1fr;
  }

  .detail {
    max-height: none;
  }

  .deliveryCollationCreateBar {
    padding-inline: 20px;
  }

  .deliveryCollationCreateContent,
  .deliveryCollationCreateShipments,
  .deliveryCollationEditShipments {
    width: calc(100% - 32px);
  }

  .deliveryCollationCreateContent,
  .deliveryCollationInfoForm {
    grid-template-columns: 1fr;
  }

  .deliveryCollationCodeField {
    grid-column: auto;
  }
}

@media (max-width: 720px) {
  .topbar,
  .pageTitle {
    align-items: stretch;
    flex-direction: column;
  }

  .connection input:first-of-type,
  .connection input,
  .filters input,
  .filters select,
  .filters button {
    width: 100%;
  }

  .navItems {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .main {
    padding: 12px;
  }

  .facts {
    grid-template-columns: 1fr;
  }
}

.cashbookMain .ordersContent {
  max-width: none;
}

.cashbookTitleRow {
  margin-bottom: 8px;
}

.cashbookDateBar {
  align-items: center;
  display: flex;
  gap: 12px;
  padding: 12px 0;
}

.cashbookDateBar select,
.cashbookDateBar input {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  height: 40px;
  padding: 0 12px;
}

.cashbookDateBar input {
  width: 260px;
}

.cashbookSummary {
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  display: grid;
  grid-template-columns: 1fr 44px 1fr 44px 1fr 44px 1fr;
  margin: 0 0 24px;
}

.cashbookSummaryItem {
  padding: 14px 12px;
  text-align: center;
}

.cashbookSummaryItem span {
  color: var(--muted);
  display: block;
  margin-bottom: 4px;
}

.cashbookSummaryItem strong {
  display: block;
  font-size: 18px;
}

.cashbookSummaryItem strong.receipt {
  color: #10b981;
}

.cashbookSummaryItem strong.payment {
  color: #ef4444;
}

.cashbookSummaryItem strong.ending {
  color: #0b84ff;
}

.cashbookOperator {
  align-items: center;
  color: #9aa4b2;
  display: flex;
  font-size: 28px;
  font-weight: 700;
  justify-content: center;
}

.cashbookLedgerCard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.cashbookTabs {
  border-bottom: 1px solid var(--line);
  padding-left: 0;
}

.cashbookFilterArea {
  border-bottom: 1px solid var(--line);
  padding: 16px 18px;
}

.cashbookFilterRow {
  align-items: center;
  display: flex;
  gap: 8px;
}

.cashbookSearch {
  border: 1px solid var(--line);
  border-radius: 4px;
  flex: 1;
  font: inherit;
  height: 40px;
  min-width: 320px;
  padding: 0 14px;
}

.cashbookFilterButton {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  height: 40px;
  padding: 0 14px;
}

.cashbookFilterButton.active {
  background: #eef6ff;
  border-color: #0b84ff;
  color: #0b84ff;
}

.cashbookFilterChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.cashbookFilterChip {
  align-items: center;
  background: #eaf4ff;
  border-radius: 16px;
  color: #1d4ed8;
  display: inline-flex;
  gap: 8px;
  padding: 6px 10px;
}

.cashbookFilterChip button {
  background: transparent;
  border: 0;
  color: #0b84ff;
  cursor: pointer;
  font-size: 18px;
}

.cashbookTableWrap {
  overflow: auto;
}

.cashbookTable {
  border-collapse: collapse;
  table-layout: auto;
  width: 100%;
}

.cashbookTable th {
  background: #29476b;
  border-right: 1px solid rgba(15, 23, 42, 0.18);
  color: #fff;
  font-weight: 700;
  padding: 14px 16px;
  text-align: left;
  white-space: nowrap;
}

.cashbookTable td {
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #eef2f7;
  padding: 14px 16px;
  vertical-align: middle;
}

.cashbookTable tbody tr:nth-child(even) {
  background: #f3f4f6;
}

.cashbookTable .numeric {
  text-align: right;
}

.cashbookGearHead {
  text-align: center !important;
  width: 54px;
}

.cashbookGearHead .gearIconButton {
  background: transparent;
  border-color: transparent;
  color: #fff;
  font-size: 20px;
}

.cashbookTableFooter {
  align-items: center;
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  gap: 24px;
  justify-content: flex-end;
  padding: 14px 18px;
}

.cashbookFilterBackdrop {
  align-items: stretch;
  justify-content: flex-end;
}

.cashbookFilterDrawer {
  background: #fff;
  box-shadow: -12px 0 30px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 92vw;
  width: 390px;
}

.cashbookFilterDrawer.wide {
  width: 460px;
}

.cashbookDrawerHeader {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 20px 22px;
}

.cashbookDrawerHeader h2 {
  font-size: 22px;
  margin: 0;
}

.cashbookDrawerHeader button {
  background: transparent;
  border: 0;
  color: #9aa4b2;
  cursor: pointer;
  font-size: 30px;
}

.cashbookDrawerOptions,
.cashbookDrawerForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
  padding: 16px 22px;
}

.cashbookFilterOption {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  padding: 12px 14px;
  text-align: left;
}

.cashbookFilterOption.active,
.cashbookFilterOption:hover {
  background: #eef6ff;
  border-color: #0b84ff;
  color: #0b84ff;
}

.cashbookDrawerField {
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cashbookDrawerField input,
.cashbookDrawerField select {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  height: 40px;
  padding: 0 12px;
}

.cashbookDrawerFooter {
  border-top: 1px solid var(--line);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: auto;
  padding: 16px 22px;
}

.cashbookColumnModal,
.cashbookTermsModal {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 18px 60px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  width: min(1060px, calc(100vw - 80px));
}

.cashbookTermsModal {
  width: min(620px, calc(100vw - 80px));
}

.cashbookColumnsBody {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 1fr;
  padding: 24px;
}

.cashbookColumnPanel {
  border: 1px solid var(--line);
  border-radius: 4px;
  min-height: 420px;
  overflow: hidden;
}

.cashbookColumnPanel h3 {
  border-bottom: 1px solid var(--line);
  font-size: 22px;
  margin: 0;
  padding: 18px 20px;
}

.cashbookColumnChoice {
  align-items: center;
  display: flex;
  font-size: 18px;
  gap: 12px;
  padding: 14px 20px;
}

.cashbookColumnChoice.selected {
  background: #eef6ff;
}

.cashbookSelectedColumn {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  font-size: 18px;
  justify-content: space-between;
  padding: 14px 20px;
}

.cashbookSelectedColumn button {
  background: transparent;
  border: 0;
  color: #9aa4b2;
  cursor: pointer;
  font-size: 20px;
  padding: 2px 6px;
}

.cashbookTermList {
  padding: 20px 24px;
}

.cashbookTermList > div {
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.cashbookTermList strong {
  display: block;
  margin-bottom: 4px;
}

.orderSectionShell .orderCreatePage,
.orderSectionShell .orderReturnDetailPage {
  --order-gutter: max(24px, calc((100% - 1304px) / 2));
  padding: 0 var(--order-gutter) 32px;
  background: #eff1f1;
  font-size: 14px;
  min-width: 0;
}
.orderSectionShell .orderCreatePage .createActionBar,
.orderSectionShell .orderReturnDetailPage .orderActionBar {
  margin: 0 calc(-1 * var(--order-gutter)) 20px;
  padding: 8px var(--order-gutter);
  min-height: 56px;
  background: white;
}
.orderSectionShell .orderCreateTopGrid {
  grid-template-columns: minmax(0, 1fr) 342px;
  gap: 24px;
  margin-bottom: 24px;
}
.orderSectionShell .orderCreatePage .productSearchWrap,
.orderSectionShell .orderCreatePage .productSearchWrap input { width: 100%; max-width: none; }
.orderSectionShell .orderCreatePage .productSearchLine > button { padding: 6px 10px; white-space: nowrap; }
.orderSectionShell .orderCreateFooter { display: flex; justify-content: flex-end; gap: 12px; padding-top: 24px; }
.orderSectionShell .shippingModeTabs { gap: 16px; padding: 16px; flex-wrap: wrap; }
.orderSectionShell .shippingModeTabs button { min-width: 0; min-height: 48px; font-size: 14px; padding: 10px 16px; }
.orderSectionShell .orderCreatePage .createActionBar,
.orderSectionShell .orderReturnDetailPage .orderActionBar { box-shadow: -40vw 0 white, 40vw 0 white; }
.orderSectionShell .orderCreatePage .detailCardHeader {
  min-height: 48px;
  padding: 0 16px;
}
.orderSectionShell .orderCreatePage .detailCardHeader h3,
.orderSectionShell .orderReturnDetailPage .detailCardHeader h3 {
  font-size: 16px;
  font-weight: 500;
  min-height: 0;
}
.orderSectionShell .createCustomerCard { min-height: 294px; }
.orderSectionShell .orderExtraCard { max-height: none; overflow: visible; }
.orderSectionShell .orderExtraCard .detailCardBody { padding: 12px 16px; }
.orderSectionShell .createFormGrid { gap: 12px; }
.orderSectionShell .createFormField { grid-template-columns: 100px minmax(0, 1fr); gap: 10px; }
.orderSectionShell .orderCreatePage input:not([type=checkbox]):not([type=radio]),
.orderSectionShell .orderCreatePage select,
.orderSectionShell .orderCreateSelectButton {
  min-height: 36px;
  padding: 7px 10px;
  font-size: 14px;
  min-width: 0;
}
.orderSectionShell .orderCreatePage .detailCardHeader .iconButton {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  font-size: 20px;
}
.orderSectionShell .productCardTools label,
.orderSectionShell .productCardTools .linkButton,
.orderSectionShell .productCardTools .iconButton { min-height: 48px; padding: 0 12px; }
.orderSectionShell .productSearchLine {
  grid-template-columns: minmax(0, 1fr) 100px 70px 130px;
  gap: 0;
  padding: 12px 16px;
}
.orderSectionShell .orderCreateEmptyProduct { min-height: 180px; }
.orderSectionShell .orderCreateBelowGrid {
  grid-template-columns: minmax(0, 1fr) 400px;
  padding: 20px 16px;
  gap: 32px;
}
.orderSectionShell .orderCreatePage .createNotesCard { width: 100%; max-width: 360px; }
.orderSectionShell .orderCreatePage .createNotesCard textarea { min-height: 64px; }
.orderSectionShell .orderReturnInfoGrid { grid-template-columns: minmax(0, 1fr) 376px; gap: 24px; }
.orderSectionShell .orderReturnTicketBody { gap: 24px; }
.orderSectionShell .orderReturnDetailPage .detailCardBody { padding: 16px; }
.orderSectionShell .orderReturnDetailPage .detailCardHeader { min-height: 48px; padding: 12px 16px; }
.orderSectionShell .orderReturnInfoRow { grid-template-columns: 140px 8px minmax(0, 1fr); font-size: 14px; }
.orderSectionShell .orderReturnInfoRow > * { overflow-wrap: anywhere; }
.orderSectionShell .orderReturnTitleLine h1 { font-size: 24px; font-weight: 500; }
.orderSectionShell .orderReturnTitleBlock { background: transparent; padding: 0; margin-left: 0; margin-right: 0; }
.orderSectionShell .orderReturnInfoColumn { gap: 10px; align-content: start; }
.orderSectionShell .orderReturnInfoRow { min-height: 24px; }
.orderSectionShell .orderReturnTicketBody { min-height: 194px; }
.returnListMain .orderTabs,
.invoiceListMain .orderTabs { margin: 0; background: #fff; }
@media (max-width: 1200px) {
  .orderSectionShell .orderReturnInfoGrid { grid-template-columns: minmax(0, 1fr) 280px; }
  .orderSectionShell .orderReturnTicketBody { grid-template-columns: 1fr; gap: 0; }
  .orderSectionShell .orderCreateTopGrid { grid-template-columns: minmax(0, 1fr) 310px; }
  .orderSectionShell .orderCreateBelowGrid { grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
}
@media (max-width: 800px) {
  .orderSectionShell .orderCreatePage,
  .orderSectionShell .orderReturnDetailPage { --order-gutter: 12px; }
  .orderSectionShell .orderCreateTopGrid,
  .orderSectionShell .orderCreateBelowGrid,
  .orderSectionShell .orderReturnInfoGrid { grid-template-columns: minmax(0, 1fr); }
  .orderSectionShell .orderExtraCard { max-height: none; }
  .orderSectionShell .productSearchLine { grid-template-columns: minmax(0, 1fr) 90px; gap: 8px; }
  .orderSectionShell .orderCreateProductCard .detailCardHeader { flex-wrap: wrap; gap: 8px; padding: 12px; }
  .orderSectionShell .productCardTools { flex-wrap: wrap; }
  .orderSectionShell .orderCreatePage .createNotesCard { max-width: none; }
  .orderSectionShell .orderReturnInfoRow { grid-template-columns: 120px 8px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .orderSectionShell .navButton.active + .navSub {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    grid-column: 1 / -1;
    padding: 0 8px;
    overflow-x: auto;
    gap: 8px;
  }
  .orderSectionShell .navSub button { flex: 0 0 auto; padding: 0 8px; }
  .orderSectionShell .orderTabs { flex-wrap: nowrap; overflow-x: auto; }
  .orderSectionShell .orderTab { flex: 0 0 auto; }
}

.productListMain .orderTabs,
.inventoryListMain .orderTabs { margin: 0; background: white; }
.productListMain .splitAction { margin-left: auto; }
.productListMain .splitAction .primaryAction { margin-left: 0; }
.productListMain .productsTable td { height: 60px; }
.productImageMissing { display: inline-grid; place-items: center; color: #98a2ad; background: #f5f6f7; }
.productListMain .productNameLink { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.productListMain .productListThumb,
.inventoryListMain .productListThumb { width: 36px; height: 36px; object-fit: contain; }
@media (max-width: 760px) {
  .productListShell .navButton.active + .navSub { display: flex; flex: 0 0 auto; width: auto; gap: 8px; padding: 0 8px; }
  .productListShell .navSub button { flex: 0 0 auto; padding: 0 8px; }
  .productListMain .toolbarActions,
  .inventoryListMain .toolbarActions { flex-wrap: wrap; }
}

.productPurchasingListMain .orderTabs { margin: 0; background: #fff; }
.productListShell .productDetailPage {
  --product-gutter: clamp(20px, 2vw, 40px);
  padding: 0 var(--product-gutter) 32px;
  background: #eff1f1;
  min-width: 0;
  font-size: 14px;
}
.productListShell .productDetailPage .orderActionBar {
  margin: 0 0 20px;
  padding: 8px 0;
  min-height: 56px;
  box-shadow: -40vw 0 white, 40vw 0 white;
}
.productListShell .productDetailTitle { padding: 0; margin: 20px 0 24px; gap: 12px; }
.productListShell .productDetailTitle h1 { font-size: 20px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.productListShell .productDetailPage .detailCardHeader { min-height: 54px; padding: 16px 20px; }
.productListShell .productDetailPage .detailCardHeader h3,
.productListShell .productDetailPage .sectionHeading { font-size: 16px; font-weight: 500; }
.productListShell .productDetailPage .detailCardBody { padding: 20px; }
.productListShell .variantDetailGrid { grid-template-columns: minmax(240px, 22%) minmax(0, 1fr); gap: 28px; }
.productListShell .variantRow { grid-template-columns: 18px 36px minmax(0, 1fr); gap: 10px; }
.productListShell .variantRow strong { display: block; margin: 0 0 6px; font-weight: 500; overflow-wrap: anywhere; }
.productListShell .variantRow span { margin-right: 10px; font-size: 13px; }
.productListShell .productComboBody { grid-template-columns: minmax(0, 1fr) minmax(160px, 22%); padding: 20px; gap: 32px; align-items: center; }
.productListShell .productMetaGrid { gap: 14px 32px; }
.productListShell .productMetaGrid .metaRow,
.productListShell .productPriceGrid .metaRow { grid-template-columns: minmax(100px, 43%) minmax(0, 1fr); gap: 20px; line-height: 1.5; align-items: start; font-size: 13px; }
.productListShell .productDetailPage .metaRow > span:first-child { color: #858d99; }
.productListShell .productDetailPage .metaRow > :nth-child(2) { position: relative; min-width: 0; }
.productListShell .productDetailPage .metaRow > :nth-child(2)::before { content: ":"; position: absolute; left: -14px; color: #434c58; }
.productListShell .productDetailPage .metaRow strong { font-weight: 400; overflow-wrap: anywhere; }
.productListShell .variantInfoBody { grid-template-columns: minmax(0, 1fr) minmax(140px, 22%); gap: 32px; }
.productListShell .variantInfoGrid { grid-template-columns: 1fr; }
.productListShell .productDetailPage .wideProductImage { width: 100%; max-width: 240px; height: 180px; }
.productListShell .productDetailGrid { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 28px; align-items: start; }
.productListShell .productDetailPage .detailCard { min-width: 0; border-radius: 4px; box-shadow: 0 2px 5px #14202d08; }
.productListShell .productDetailPage .productDetailTitle { background: transparent; }
.productListShell .productDetailImage { width: 100%; max-width: 240px; height: 180px; }
.productListShell .variantDetailImage { width: 100%; max-width: 180px; height: 180px; }
.productListShell .variantRightColumn { min-width: 0; gap: 28px; align-content: start; }
.productListShell .productDetailPage .productPriceGrid { gap: 14px 32px; }
.productListShell .productDetailPage .variantPriceLayout { margin: 0; grid-template-columns: minmax(0, 2fr) minmax(210px, 1fr); gap: 24px; }
.productListShell .variantPriceLayout .productPriceGrid { grid-template-columns: minmax(0, 1fr); }
.productListShell .productDetailPage .readonlyCheckbox { font-size: 13px; min-height: 40px; }
.productListShell .productDetailPage .productInventoryTable th { font-weight: 500; }
.productListShell .productDetailPage .variantRow { padding: 16px; }
@media (max-width: 1200px) {
  .productListShell .productMetaGrid:not(.variantInfoGrid) { grid-template-columns: 1fr; }
  .productListShell .variantDetailGrid { grid-template-columns: 240px minmax(0, 1fr); }
  .productListShell .variantPriceGrid { grid-template-columns: 1fr; }
  .productListShell .productDetailPage .variantPriceLayout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .productListShell .productDetailPage { --product-gutter: 12px; }
  .productListShell .productPriceGrid { grid-template-columns: minmax(0, 1fr); }
  .productListShell .variantDetailGrid,
  .productListShell .productDetailGrid,
  .productListShell .productComboBody,
  .productListShell .variantInfoBody { grid-template-columns: minmax(0, 1fr); }
  .productListShell .productDetailPage .orderActionBar { flex-wrap: wrap; }
  .productListShell .productDetailPage .detailCardHeader,
  .productListShell .productDetailPage .detailCardBody,
  .productListShell .productComboBody { padding: 18px 16px; }
  .productListShell .productDetailPage .metaRow { grid-template-columns: minmax(100px, 40%) minmax(0, 1fr); gap: 12px; }
  .productListShell .productDetailPage .productPriceGrid { gap: 18px; }
  .productPurchasingListMain .orderTabs { flex-wrap: nowrap; overflow-x: auto; }
  .productPurchasingListMain .orderTab { flex: 0 0 auto; }
  .productPurchasingListMain .toolbarActions { flex-wrap: wrap; }
}

.productListShell .purchaseCreateLayout {
  --purchase-gutter: max(24px, calc((100% - 1304px) / 2));
  padding: 0 var(--purchase-gutter) 32px;
  min-width: 0;
  background: #eff1f1;
  font-size: 14px;
}
.purchaseCreateLayout .createActionBar {
  margin: 0 0 24px;
  padding: 8px 0;
  min-height: 56px;
  box-shadow: -40vw 0 #fff, 40vw 0 #fff;
}
.purchaseCreateLayout .createTopGrid { grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; margin-bottom: 24px; }
.purchaseCreateLayout .detailCard { border: 0; border-radius: 0; box-shadow: none; min-width: 0; }
.purchaseCreateLayout .detailCardHeader { padding: 16px 24px; min-height: 52px; border: 0; }
.purchaseCreateLayout .detailCardHeader h3 { font-size: 16px; font-weight: 500; }
.purchaseCreateLayout .detailCardBody { padding: 0 24px 16px; }
.purchaseCreateLayout .supplierEmptyBody { min-height: 168px; }
.purchaseCreateLayout .supplierCreateBody { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 24px; min-height: 168px; }
/* Tạo đơn nhập: Sapo's supplier card (owner 14/10/2026): 15px name, phone, address; a tight dashed box, black labels. */
.purchaseCreateLayout .createSupplierCard .supplierCreateBody p { margin: 0 0 8px; }
.purchaseCreateLayout .createSupplierCard .supplierNameLine { font-size: 15px; gap: 6px; }
.purchaseCreateLayout .createSupplierCard .supplierNameLine .linkButton { min-height: 0; padding: 0 4px; color: var(--muted); }
.purchaseCreateLayout .createSupplierCard .supplierPhoneLine { font-size: 15px; font-weight: 500; }
.purchaseCreateLayout .createSupplierCard .supplierStatsBox { max-width: none; margin: 0; padding: 8px 16px; gap: 0; border: 1px dashed #c4cdd5; border-radius: 3px; }
.purchaseCreateLayout .createSupplierCard .supplierStatsBox .summaryLine { min-height: 30px; }
.purchaseCreateLayout .createSupplierCard .supplierStatsBox .summaryLine strong { font-weight: 400; }
/* "Gợi ý: N" under SL nhập (owner 14/10/2026): small and blue; a click fills SL nhập. */
/* "Đã thêm từ gợi ý": the heading row above the lines added from Gợi ý nhập (owner 14/10/2026). */
.purchaseCreateLayout .createProductTable tr.purchaseLinesGroup td { height: 34px; padding: 6px 16px; background: #f5f6f7; font-size: 13px; font-weight: 500; text-align: left; }
/* "Gợi ý nhập" under the lines (owner 14/10/2026): the chosen supplier's products to buy, tight rows, "Thêm" per row. */
.purchaseCreateLayout .purchaseSuggest { padding: 12px 24px 16px; border-top: 1px solid var(--line); }
.purchaseCreateLayout .purchaseSuggestHead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 8px; }
.purchaseCreateLayout .purchaseSuggestHead strong { font-size: 14px; font-weight: 500; }
.purchaseCreateLayout .purchaseSuggestHead .linkButton { min-height: 0; padding: 0; }
.purchaseCreateLayout .purchaseSuggestLoading { min-height: 40px; }
.purchaseCreateLayout .purchaseSuggestTable { width: 100%; min-width: 760px; }
.purchaseCreateLayout .purchaseSuggestTable th { background: #f5f6f7; font-weight: 400; }
.purchaseCreateLayout .purchaseSuggestTable th,
.purchaseCreateLayout .purchaseSuggestTable td { height: 44px; padding: 4px 10px; font-size: 13px; }
/* Tables here are table-layout: fixed: fixed widths for the picture, the figures and the button; the name takes the rest. */
.purchaseCreateLayout .purchaseSuggestTable :is(th, td) { white-space: nowrap; }
.purchaseCreateLayout .purchaseSuggestTable :is(th, td):nth-child(1) { width: 56px; }
.purchaseCreateLayout .purchaseSuggestTable :is(th, td):nth-child(2) { width: auto; white-space: normal; }
.purchaseCreateLayout .purchaseSuggestTable :is(th, td):nth-child(3) { width: 96px; }
.purchaseCreateLayout .purchaseSuggestTable :is(th, td):nth-child(4) { width: 80px; }
.purchaseCreateLayout .purchaseSuggestTable :is(th, td):nth-child(5) { width: 100px; }
.purchaseCreateLayout .purchaseSuggestTable :is(th, td):nth-child(6) { width: 150px; }
.purchaseCreateLayout .purchaseSuggestTable :is(th, td):nth-child(7) { width: 70px; }
.purchaseCreateLayout .purchaseSuggestTable :is(th, td):nth-child(8) { width: 84px; }
.purchaseCreateLayout .purchaseSuggestTable .orderSupplierLineSku { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
.purchaseCreateLayout .purchaseSuggestTable .productListThumb { width: 36px; height: 36px; }
.purchaseCreateLayout .purchaseSuggestAdd { min-height: 28px; padding: 0 12px; }
.purchaseCreateLayout .createProductTable .purchaseRestockHint { display: block; min-height: 0; margin: 4px 0 0 auto; padding: 0; border: 0; background: none;
  font-size: 12px; line-height: 16px; color: var(--blue); text-align: right; white-space: nowrap; cursor: pointer; }
.purchaseCreateLayout .createMetaCard { max-height: 220px; overflow: auto; }
.purchaseCreateLayout .createFormGrid { gap: 16px; }
.purchaseCreateLayout .createFormField { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; }
.purchaseOrderCreatePage.purchaseCreateLayout:not(.orderSupplierCreatePage) .createFormField { grid-template-columns: 116px minmax(0, 1fr); }
.purchaseCreateLayout .createFormField input,
.purchaseCreateLayout .createFormField select { min-height: 40px; width: 100%; min-width: 0; }
.purchaseCreateLayout .createProductTools { padding: 12px 24px 16px; }
.purchaseCreateLayout .createProductTable { min-width: 950px; }
.purchaseCreateLayout .createProductTable th,
.purchaseCreateLayout .createProductTable td { height: 52px; font-size: 14px; font-weight: 400; }
.purchaseCreateLayout .createProductTable th { background: #f5f6f7; }
.purchaseCreateLayout .createTotalsCard .summaryLine { min-height: 28px; padding: 4px 0; }
.purchaseCreateLayout .createTotalsCard strong { font-weight: 400; }
.purchaseCreateLayout .createTotalsCard h3 { font-size: 14px; font-weight: 500; margin: 8px 0 4px; }
.purchaseCreateLayout .createTotalsCard select { width: 100%; min-width: 0; min-height: 40px; }
.purchaseCreateLayout .createProductTools .productSearchWrap { flex: 1; min-width: 0; }
.purchaseCreateLayout .detailActions { flex-wrap: wrap; }
.purchaseOrderCreatePage.purchaseCreateLayout:not(.orderSupplierCreatePage) .createBottomGrid { grid-template-columns: minmax(0, 1fr) 440px; }
.purchaseCreateLayout .createBottomGrid { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; padding: 24px; border: 0; border-top: 1px solid var(--line); }
.purchaseCreateLayout .createNotesCard { max-width: 300px; gap: 16px; }
.purchaseCreateLayout .createNotesCard textarea,
.purchaseCreateLayout .createNotesCard input { min-height: 72px; }
@media (max-width: 1100px) {
  .purchaseCreateLayout .createTopGrid { grid-template-columns: minmax(0, 1fr) 340px; }
  .purchaseCreateLayout .supplierCreateBody { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .productListShell .purchaseCreateLayout { --purchase-gutter: 12px; }
  .purchaseCreateLayout .createTopGrid,
  .purchaseCreateLayout .createBottomGrid { grid-template-columns: minmax(0, 1fr); }
  .purchaseCreateLayout .createMetaCard { max-height: none; }
  .purchaseCreateLayout .createActionBar,
  .purchaseCreateLayout .createProductHeader,
  .purchaseCreateLayout .createProductTools { flex-wrap: wrap; }
  .purchaseCreateLayout .createNotesCard { max-width: none; }
  .purchaseOrderCreatePage.purchaseCreateLayout:not(.orderSupplierCreatePage) .createBottomGrid { grid-template-columns: minmax(0, 1fr); }
  .purchaseCreateLayout .createProductTools .productSearchWrap { flex: 1 0 100%; width: 100%; min-width: 0; }
  .purchaseCreateLayout .createProductTools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purchaseCreateLayout .createProductTools .productSearchWrap { grid-column: 1 / -1; }
  .purchaseCreateLayout .createProductTools > * { min-width: 0; }
}

.cashbookTermList p {
  color: var(--muted);
  margin: 0;
}

@media (max-width: 900px) {
  .cashbookSummary {
    grid-template-columns: 1fr;
  }

  .cashbookOperator {
    display: none;
  }

  .cashbookFilterRow {
    flex-wrap: wrap;
  }

  .cashbookSearch {
    min-width: 100%;
  }

  .cashbookColumnsBody {
    grid-template-columns: 1fr;
  }
}
.groupSaveSuccess {
  color: #087f5b;
  background: #edf9f3;
  border: 1px solid #b6e4cb;
}
.customerGroupCreatePage .groupSaveSuccess { padding: 12px 16px; border-radius: 4px; }
.groupMemberSearch {
  display: flex;
  gap: 8px;
}
.groupMemberSearch input { flex: 1; min-width: 0; }
.groupMemberOption {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #e5e9ee;
  overflow-wrap: anywhere;
}
.groupMemberOption input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 16px; }
.groupMemberOption .muted { margin-left: auto; }
.groupPreviewActions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.groupPreviewActions button { width: 36px; height: 36px; }
.groupMemberSection .groupCreateFields,
.groupMatchPreview .groupCreateFields { display: block; }
.groupMemberSection .groupTagValues { margin: 12px 0; }
.groupMatchPreview { min-width: 0; }
.voucherLocationField { width: 100%; max-width: 360px; margin-bottom: 16px; }
.voucherLocationField select { min-width: 0; width: 100%; }
.groupMatchPreview [data-group-preview-results] { max-height: 520px; overflow-y: auto; }
.groupMatchPreview .groupCreateFields p { margin: 12px 0; padding: 0; text-align: left; }
@media (max-width: 600px) {
  .groupMemberOption { flex-wrap: wrap; }
  .groupMemberOption .muted { margin-left: 0; }
}
.cashbookOpeningModal{width:min(720px,calc(100vw - 32px));max-height:calc(100dvh - 32px);display:flex;flex-direction:column;background:#fff;border-radius:6px;overflow:hidden}
.cashbookOpeningModal .modalHeader,.cashbookOpeningModal .modalFooter{flex-shrink:0}
.cashbookOpeningModal h2{font-size:20px}
.cashbookOpeningBody{padding:20px;overflow:auto;min-height:0}
.cashbookOpeningFields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:20px}
.cashbookOpeningField{display:flex;flex-direction:column;gap:8px;min-width:0}
.cashbookOpeningField input,.cashbookOpeningField select{width:100%;min-width:0;box-sizing:border-box}
.cashbookOpeningHistory{border-top:1px solid #e4e7eb;padding:12px 0;overflow-wrap:anywhere}
.cashbookOpeningHistory p{margin:6px 0}
.cashbookOpeningToggle{display:flex;align-items:center;gap:8px}
.cashbookOpeningToggle input{width:16px;height:16px;margin:0;flex-shrink:0}
@media(max-width:600px){.cashbookOpeningFields{grid-template-columns:1fr}}
/* Clone fulfillment keeps controls reachable on short and narrow screens. */
.cloneFulfillmentModal { background:#fff; width:min(900px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); display:flex; flex-direction:column; border-radius:6px; color:#202a35; }
.cloneFulfillmentModal header,.cloneFulfillmentModal footer { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:16px 20px; flex-shrink:0; border-bottom:1px solid #dfe3e8; }
.cloneFulfillmentModal header h2 { font-size:20px; margin:0; flex:1; overflow-wrap:anywhere; }
.cloneFulfillmentModal footer { border-top:1px solid #dfe3e8; border-bottom:0; justify-content:flex-end; }
.cloneShipmentCreateReason { flex:1 1 240px; margin:0; color:#637381; font-size:13px; line-height:1.4; }
.cloneShipmentApprovalDialog { width:min(860px,calc(100vw - 32px)); }
.cloneShipmentApprovalDialog .cloneFulfillmentBody p { margin:0 0 8px; }
.cloneDeliveryActions,.cloneDeliverySplit { display:flex; align-items:center; gap:8px; }
.cloneDeliverySplit { gap:0; }
.cloneDeliveryDropdown { position:relative; }
.cloneDeliveryDropdown > summary { cursor:pointer; list-style:none; background:#08f; color:white; padding:10px 14px; border-left:1px solid #ffffff50; }
.cloneDeliveryDropdown > button { position:absolute; right:0; bottom:100%; white-space:nowrap; background:white; z-index:5; box-shadow:0 3px 12px #0002; }
.cloneDeliveryActions .cloneDeliveryDropdown > button { top:100%; bottom:auto; }
.cloneCancelShippingDialog { width:min(820px,calc(100vw - 32px)); }
.cloneCancelShippingDialog > header { border:0; padding:28px 32px 16px; }
.cloneCancelShippingDialog > header h2 { font-weight:500; font-size:23px; }
.cloneCancelShippingDialog .cloneFulfillmentBody { padding:12px 32px 20px; }
.cloneCancelShippingDialog .cloneCancelReason { display:grid; grid-template-columns: minmax(140px,1fr) minmax(0,2fr); align-items:center; gap:20px; }
.cloneCancelReasonControl { display:block; min-width:0; position:relative; }
.cloneCancelReason input { width:100%; min-width:0; height:44px; }
.cloneCancelReasonSuggestions { position:absolute; inset:calc(100% + 4px) 0 auto; z-index:10; display:block; max-height:220px; overflow:auto; background:#fff; border:1px solid #dfe3e8; box-shadow:0 6px 18px #0002; }
.cloneCancelReasonSuggestions button { display:block; width:100%; padding:12px 14px; border:0; border-bottom:1px solid #eef0f2; background:#fff; color:#202a35; text-align:left; }
.cloneCancelReasonSuggestions button:hover,.cloneCancelReasonSuggestions button:focus { background:#f2f8ff; }
.cloneCancelReason .required,.cloneCancelNote > span { color:#ff4d4f; }
.cloneCancelNote { line-height:1.6; margin-top:24px; }
.cloneCancelShippingDialog > footer { border:0; padding:16px 32px 28px; gap:16px; }
.cloneCancelShippingDialog .dangerButton { color:#ff4d4f; border:1px solid #ff4d4f; }
.cloneCancelShippingDialog .cloneCancelPrimary { background:#ff4d4f; color:white; border:1px solid #ff4d4f; }
@media(max-width:600px) { .cloneCancelShippingDialog .cloneCancelReason { grid-template-columns:1fr; gap:8px; } .cloneCancelShippingDialog > footer { gap:8px; } }
.cloneFulfillmentBody { padding:20px; overflow:auto; min-height:0; }
.cloneFulfillmentFields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.cloneOrderFulfillmentEmpty { padding:24px 0; color:#637381; font-size:14px; }
.cloneCollectionDialog { width:min(700px,calc(100vw - 32px)); }
.cloneCollectionSummary { margin-bottom:20px; color:#637381; font-size:13px; }
.cloneCollectionDialog input[type=number] { text-align:right; }
.cloneCollectionDialog .cloneFulfillmentBody { padding:24px; }
.cloneShipmentCreateDialog { width:min(1088px,calc(100vw - 32px)); }
.cloneDeliveryTabs { display:flex; gap:16px; padding:4px 20px 20px; border-bottom:1px solid #dfe3e8; flex-shrink:0; flex-wrap:wrap; }
.cloneDeliveryTabs button { position:relative; min-height:48px; padding:12px 20px; border:1px solid #c4cdd5; border-radius:6px; background:#fff; color:#202a35; font-size:15px; }
.cloneDeliveryTabs button.active { color:#0088ff; border-color:#0088ff; }
.cloneDeliveryTabs button.active::after { content:'✓'; position:absolute; bottom:0; right:0; width:20px; height:20px; background:#0088ff; color:white; border-radius:6px 0 4px 0; font-size:13px; }
.cloneDeliveryTabs button:focus-visible { outline:2px solid #0088ff; outline-offset:2px; }
@media(max-width:640px) { .cloneDeliveryTabs { gap:8px; padding:8px 16px 16px; } .cloneDeliveryTabs button { flex:1 1 100%; font-size:14px; text-align:left; } }
.cloneShipmentCreateFields { display:grid; grid-template-columns:minmax(240px,1fr) minmax(0,2fr); gap:24px; }
.cloneShipmentAddress { background:#f4f4f5; border:1px dashed #c4cdd5; border-radius:4px; padding:20px; }
.cloneShipmentAddressHeader { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.cloneShipmentAddressHeader .linkButton { padding:0; border:0; background:transparent; color:#0088ff; white-space:nowrap; }
.cloneShipmentAddressText { white-space:pre-line; line-height:1.5; margin:0 0 24px; overflow-wrap:anywhere; }
.cloneExternalPartnerFields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-bottom:24px; }
.cloneShippingRadios { border:0; padding:0; margin:0; min-width:0; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.cloneShippingRadios legend { margin-bottom:14px; font-size:14px; }
.cloneShippingRadios label { display:flex !important; flex-direction:row !important; align-items:center; gap:8px; flex:1; }
.cloneShippingRadios input[type=radio] { min-height:0; height:18px; width:18px; flex:0 0 18px; accent-color:#0088ff; }
.cloneShipmentAddress textarea { min-height:90px; resize:vertical; width:100%; border:1px solid #d3dbe2; border-radius:4px; padding:10px 12px; font:inherit; }
.clonePartnerDialog textarea { min-height:80px; resize:vertical; border:1px solid #d3dbe2; border-radius:4px; padding:10px 12px; font:inherit; }
.cloneParcelPreset { margin-top:16px; }
.cloneShipmentCreateDialog input[type=number] { text-align:right; }
.cloneCarrierRates { width:100%; table-layout:fixed; }
.cloneCarrierRates th { background:#f4f4f5; text-align:left; font-weight:500; padding:16px 12px; }
.cloneCarrierRates td { padding:24px 12px; line-height:1.5; }
@media(max-width:640px) { .cloneExternalPartnerFields { grid-template-columns:1fr; } }
.cloneShipmentPartner { padding:0; }
.cloneParcelDimensions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.cloneParcelDimensions input { text-align:right; }
.cloneShipmentCreateFields h3 { margin:0 0 20px; font-size:16px; font-weight:600; }
.cloneShipmentCreateFields input,.cloneShipmentCreateFields select,.cloneCollectionDialog input,.cloneCollectionDialog select { min-height:40px; font-size:14px; }
.cloneShipmentCreateDialog .cloneFulfillmentBody > div { display:flex; flex-direction:column; }
.cloneShipmentCreateDialog .cloneShipmentCreateFields { order:-2; margin-bottom:20px; }
.cloneShipmentCreateDialog .cloneSplitPacking { margin-top:0; }
@media(max-width:640px) { .cloneShipmentCreateFields { grid-template-columns:1fr; } }
.cloneFulfillmentBody label { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.cloneFulfillmentBody input,.cloneFulfillmentBody select { width:100%; min-width:0; box-sizing:border-box; }
.cloneFulfillmentBody dl { display:grid; grid-template-columns:minmax(100px,1fr) minmax(0,2fr); gap:10px; }
.cloneFulfillmentBody dd { margin:0; overflow-wrap:anywhere; }
.cloneFulfillmentBody details { border-top:1px solid #dfe3e8; padding:14px 0; }
.cloneFulfillmentBody .cloneFulfillmentCheck { flex-direction:row; align-items:center; margin-top:12px; }
.cloneFulfillmentCheck input { width:18px; height:18px; }
@media(max-width:600px) { .cloneFulfillmentFields { grid-template-columns:1fr; } .cloneFulfillmentModal footer { padding:10px; } .cloneFulfillmentModal footer button { white-space:normal; } }
.cloneFulfillmentConfirm { flex: 1 0 100%; padding: 12px; background: #fff8e6; border: 1px solid #e9c769; }
.cloneFulfillmentConfirm p { margin: 0 0 12px; }
.cloneFulfillmentConfirm button + button { margin-left: 12px; }
.cloneFulfillmentModal table th,
.cloneFulfillmentModal table td { white-space: normal; text-overflow: clip; overflow-wrap: anywhere; padding: 10px 8px; }
.cloneFulfillmentModal table th:first-child { width: 40%; }
.cloneShipmentSources { display: flex; border-bottom: 1px solid #d9e0e7; gap: 8px; }
.cloneShipmentSources button { border: 0; border-radius: 0; padding: 14px 20px; background: transparent; }
.cloneShipmentSources button[aria-selected="true"] { color: #008cff; border-bottom: 2px solid #008cff; }
.cloneShipmentFilters { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; padding: 16px; }
.cloneShipmentFilters label { flex: 1 1 160px; min-width: 0; }
.cloneShipmentFilters span,.cloneSettlementToolbar span { display: block; margin-bottom: 6px; }
.cloneShipmentFilters input,.cloneShipmentFilters select { width: 100%; }
.cloneSettlementToolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; padding: 12px 0; }
.cloneSettlementToolbar select { min-width: 220px; }
.cloneSettlementReview { padding: 16px; background: #f1f8ff; border-block: 1px solid #bbd7f0; overflow-wrap: anywhere; }
.cloneSettlementReview button { margin-right: 12px; }
.cloneSettlementReview h2 { font-size: 20px; margin: 0 0 12px; }
.cloneSettlementReview table { width: 100%; min-width: 620px; margin-top: 16px; background: white; }
.cloneSettlementReview th,.cloneSettlementReview td { padding: 12px; text-align: left; }
.cloneCollationVoucher { display: inline-block; margin-right: 12px; }
.cloneShipmentContent > button { margin: 12px 16px; }
.cloneShipmentContent a { color: #008cff; }
.cloneShipmentTableWrap { overflow-x: auto; }
.cloneShipmentTable { min-width: 1050px; width: 100%; table-layout: auto; }
.cloneShipmentTable th,.cloneShipmentTable td { padding: 14px 10px; white-space: normal; overflow-wrap: anywhere; }
.cloneShipmentTable td:first-child { max-width: 210px; }
.cloneCollationResolution { border-block:1px solid #bbd7f0; padding:16px 0; margin-top:16px; }
.cloneCollationResolution label { display:block; margin-bottom:12px; }
.cloneCollationResolution textarea { display:block; width:100%; max-width:640px; min-height:80px; box-sizing:border-box; }
.clonePartialFulfillment { border-block:1px solid #dfe3e8; padding:16px 0; margin:16px 0; }
.clonePartialFulfillment h3,.cloneCollationResolution h3 { font-size:16px; margin:0 0 14px; }
.clonePartialFulfillment table { min-width:620px; width:100%; margin-bottom:16px; }
.clonePartialFulfillment table input { width:88px; }
.clonePartialActions { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.cloneFulfillmentModal footer { max-height:45dvh; overflow-y:auto; }
.cloneSplitShipments,.cloneSplitPacking { border-block:1px solid #dfe3e8; padding:16px 0; margin:16px 0; }
.cloneSplitShipments h3,.cloneSplitPacking h3 { font-size:16px; margin:0 0 12px; }
.cloneSplitShipments table,.cloneSplitPacking table { min-width:540px; width:100%; margin-bottom:12px; }
.cloneSplitPacking input { width:88px; }
.cloneSplitShipments tr[aria-current="true"] { background:#eef7ff; }
.cloneOrderFulfillment table { min-width:640px; width:100%; margin-bottom:16px; }
.cloneOrderFulfillment .linkButton { white-space:normal; overflow-wrap:anywhere; }
.clonePrintPreview { z-index:10000; }
.clonePrintDialog { background:white; width:min(1000px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); display:flex; flex-direction:column; border-radius:6px; overflow:hidden; }
.clonePrintControls { display:flex; gap:12px; padding:16px; border-bottom:1px solid #dfe3e8; flex-shrink:0; flex-wrap:wrap; }
.clonePrintPaper { padding:24px; overflow:auto; color:#202a35; }
.clonePrintPaper h1 { font-size:24px; margin:0 0 20px; }
.clonePrintPaper dl { display:grid; grid-template-columns:minmax(110px,1fr) minmax(0,3fr); gap:8px 16px; }
.clonePrintPaper dd { margin:0; overflow-wrap:anywhere; }
.clonePrintTable { overflow:auto; }
.clonePrintPaper table { width:100%; min-width:600px; border-collapse:collapse; }
.main.clonePurchaseMain { display:block; padding:24px; min-width:0; }
.clonePurchaseMain .toolbarActions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:16px; }
.clonePurchaseMain h1 { font-size:22px; margin:0; overflow-wrap:anywhere; }
.clonePurchaseMain table { width:100%; min-width:680px; border-collapse:collapse; background:white; }
.clonePurchaseMain td,.clonePurchaseMain th { padding:12px; text-align:left; border-bottom:1px solid #dfe3e8; white-space:normal; overflow-wrap:anywhere; max-width:none; }
.clonePurchaseMeta { display:grid; grid-template-columns:180px minmax(0,1fr); gap:12px 20px; margin:24px 0; }
.clonePurchaseMeta dd { margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }
.clonePurchaseDetailColumns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; background:#fff; border-block:1px solid #dfe3e8; padding:20px 0; margin:20px 0; }
.clonePurchaseDetailColumns section { min-width:0; }
.clonePurchaseMain h2 { font-size:18px; margin:0 0 16px; }
.clonePurchaseDetailColumns .clonePurchaseMeta { margin:0; }
.clonePurchaseMain details { border-bottom:1px solid #dfe3e8; padding:16px 0; }
.clonePurchaseMain summary { cursor:pointer; overflow-wrap:anywhere; }
.clonePurchaseReceiptForm { border-block:1px solid #dfe3e8; padding:20px 0; margin:20px 0; }
.clonePurchasePaymentForm { border-block:1px solid #dfe3e8; padding:20px 0; margin:20px 0; }
.clonePurchasePaymentFields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:900px; margin-bottom:16px; }
.clonePurchasePaymentFields label { display:flex; flex-direction:column; gap:8px; min-width:0; }
.clonePurchasePaymentFields input,.clonePurchasePaymentFields select { width:100%; min-width:0; box-sizing:border-box; }
@media(max-width:600px) { .clonePurchasePaymentFields { grid-template-columns:1fr; } }
.clonePurchaseReceiptForm input[type=number] { width:120px; max-width:100%; }
.clonePurchaseReceiptForm .toolbarActions { margin-top:16px; }
.cloneSupplierPayables { padding:20px; }
.cloneSupplierPayables .toolbarActions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.cloneSupplierPayables h2 { font-size:18px; margin:0; }
.clonePurchaseReceiptForm table { min-width:0; table-layout:fixed; }
.clonePurchaseReceiptForm th:first-child { width:55%; }
.clonePurchaseReceiptForm th:nth-child(2) { width:20%; }
.clonePurchaseMain > .cloneShipmentTableWrap th:nth-child(2) { width:30%; }
@media(max-width:900px) { .clonePurchaseDetailColumns { grid-template-columns:minmax(0,1fr); gap:24px; } }
@media(max-width:600px) { .main.clonePurchaseMain { padding:16px; } .clonePurchaseMeta { grid-template-columns:110px minmax(0,1fr); } }
.clonePrintPaper th,.clonePrintPaper td { border:1px solid #dfe3e8; padding:10px; text-align:left; white-space:normal; overflow-wrap:anywhere; }
@media print {
  body:has(.clonePrintPreview) #app>.shell { display:none !important; }
  .clonePrintPreview { position:static !important; display:block !important; padding:0 !important; background:white !important; }
  .clonePrintDialog { display:block; width:100%; max-height:none; overflow:visible; }
  .clonePrintControls { display:none !important; }
  .clonePrintPaper,.clonePrintTable { padding:0; overflow:visible; }
  .clonePrintPaper table { min-width:0; table-layout:fixed; font-size:10pt; }
  .clonePrintPaper tr { break-inside:avoid; }
  .clonePrintPaper thead { display:table-header-group; }
}

/* Cashbook list shell, matched to the source's compact toolbar and table bands. */
.cashbookSectionShell .workspace { background:#eff1f1; min-width:0; }
.cashbookSectionShell .cashbookVoucherList > .ordersContent,
.cashbookSectionShell .cashbookMain > .ordersContent {
  padding:0 32px 24px; background:#eff1f1; border:0; border-radius:0;
  box-shadow:none; min-height:calc(100vh - 56px); min-width:0;
}
.cashbookVoucherList .sapoPageTitle { padding:10px 0 12px; border:0; background:transparent; }
.cashbookVoucherList .sapoPageTitle > div:first-child { display:none; }
.cashbookVoucherList .toolbarActions { width:100%; gap:12px; }
.cashbookVoucherList .toolbarActions button { font-size:14px; font-weight:400; background:transparent; border-color:transparent; }
.cashbookVoucherList .toolbarActions .primaryAction { margin-left:auto; background:#3388ee; color:#fff; border-radius:3px; }
.cashbookSectionShell .orderTabs { background:#fff; padding:0; }
.cashbookVoucherList .orderTabs,
.cashbookVoucherList .ledgerFilters,
.cashbookVoucherList .tableWrap,
.cashbookVoucherList .ledgerPagination { margin:0; }
.cashbookSectionShell .orderTab { min-height:48px; padding:0 16px; font-size:14px; font-weight:400; }
.cashbookVoucherList .ledgerFilters { background:#fff; padding:16px; gap:8px; border:0; }
.cashbookVoucherList .ledgerFilters input,
.cashbookVoucherList .ledgerFilters select,
.cashbookVoucherList .ledgerFilters button { font-size:14px; min-height:36px; border-radius:3px; }
.cashbookVoucherList .ledgerFilters > input[type=search] { flex:1 1 300px; }
.cashbookVoucherList .ledgerFilters > select { min-width:150px; max-width:180px; }
.cashbookVoucherList .voucherPresets select { width:145px; }
.voucherDateMenu { position:relative; flex:0 0 auto; }
.voucherLocalTools { position:relative; order:2; }
.voucherLocalTools summary { list-style:none; cursor:pointer; padding:8px; }
.voucherLocalPanel { position:absolute; right:0; top:100%; z-index:30; width:190px; background:white; padding:12px; border:1px solid #dfe3e8; box-shadow:0 6px 18px #17202a20; }
.voucherDateMenu summary { cursor:pointer; padding:8px 12px; border:1px solid #dfe3e8; background:#fff; border-radius:3px; list-style:none; }
.voucherDateMenu summary::after { content:"⌄"; margin-left:18px; color:#9199a3; }
.voucherDatePanel { position:absolute; top:calc(100% + 6px); left:0; z-index:25; width:280px; max-width:calc(100vw - 48px); background:white; border:1px solid #dfe3e8; border-radius:4px; padding:16px; box-shadow:0 6px 18px #17202a20; display:grid; gap:12px; }
.voucherDatePanel select { width:100%; }
.voucherDatePanel label { justify-content:space-between; }
.voucherDatePanel input { width:190px; min-width:0; }
.cashbookVoucherList .ledgerTotal { background:#fff; color:#637381; font-size:12px; padding:8px 16px; border-top:1px solid #f0f1f3; }
.cashbookSectionShell .tableWrap { border-radius:0; box-shadow:none; }
.cashbookSectionShell .ordersTable { font-size:14px; }
.cashbookSectionShell .ordersTable th { background:#f4f5f7; font-weight:500; text-transform:none; padding:14px 16px; height:52px; }
.cashbookSectionShell .ordersTable td { padding:8px 16px; height:52px; border-bottom:1px solid #eceef1; background:inherit; }
.cashbookSectionShell .ordersTable .controlCell { padding:10px 8px; width:32px; min-width:32px; }
.cashbookSectionShell .ordersTable tbody tr:nth-child(even) { background:#f5f6f7; }
.cashbookSectionShell .ordersTable tbody tr:hover { background:#eef5fc; }
.cashbookSectionShell .ordersTable .orderLink { font-weight:400; min-height:0; padding:0; }
.cashbookSectionShell .ledgerPagination { background:#fff; padding:12px 16px; border:1px solid #eceef1; font-size:14px; }
.cashbookSectionShell .cashbookTitleRow { background:transparent; border:0; margin:0; padding:8px 0 0; }
.cashbookSectionShell .cashbookTitleRow h1 { display:none; }
.cashbookSectionShell .cashbookTitleRow .tableActions { margin-left:auto; }
.cashbookSectionShell .cashbookMain > .ordersContent { display:grid; grid-template-columns:auto minmax(0,1fr); align-content:start; }
.cashbookSectionShell .cashbookMain > .ordersContent > * { grid-column:1 / -1; }
.cashbookSectionShell .cashbookMain .cashbookTitleRow { grid-column:2; grid-row:1; align-self:center; padding:0; }
.cashbookSectionShell .cashbookMain .cashbookDateBar { grid-column:1; grid-row:1; }
.cashbookSectionShell .cashbookMain .cashbookTitleRow .tableActions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; }
.cashbookSectionShell .cashbookMain [data-cashbook-results] > p { font-size:12px; margin:0 0 8px; color:#637381; }
.cashbookSectionShell .cashbookTitleRow button { background:transparent; border-color:transparent; font-weight:400; font-size:14px; }
.cashbookSectionShell .cashbookSummary { border:0; border-radius:3px; box-shadow:none; margin-bottom:24px; }
.cashbookSectionShell .cashbookSummaryItem { padding:12px; }
.cashbookSectionShell .cashbookSummaryItem strong { font-size:14px; font-weight:400; }
.cashbookSectionShell .cashbookSummaryItem span { color:#17202a; }
.cashbookSectionShell .cashbookLedgerCard { border:0; border-radius:3px; box-shadow:none; }
.cashbookSectionShell .cashbookLedgerCard .orderTabs { margin:0; }
.cashbookSectionShell .cashbookTable { table-layout:fixed; min-width:1400px; width:100%; font-size:14px; }
.cashbookSectionShell .cashbookTable th { text-transform:none; font-weight:400; height:52px; padding:12px 16px; }
.cashbookSectionShell .cashbookTable td { height:52px; padding:8px 16px; overflow:hidden; text-overflow:ellipsis; }
.cashbookSectionShell .cashbookTable th:first-child { width:48px; }
.cashbookSectionShell .cashbookTable th:nth-child(2) { width:180px; }
.cashbookSectionShell .cashbookTable th:nth-child(3) { width:200px; }
.cashbookSectionShell .cashbookTable th:nth-child(4),
.cashbookSectionShell .cashbookTable th:nth-child(5) { width:140px; }
.cashbookSectionShell .cashbookTable th:nth-child(6) { width:130px; }
.cashbookSectionShell .cashbookTable th:nth-child(7) { width:180px; }
.cashbookSectionShell .cashbookTable button { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-height:0; padding:0; font-weight:400; }
.cashbookSectionShell .cashbookFilterChips:empty { display:none; }
.cashbookSectionShell .cashbookFilterRow { flex-wrap:wrap; }
.cashbookSectionShell .cashbookSearch { min-width:220px; }
.timelineStep.cancelled > span { background:#ff4d4f; border-color:#ff4d4f; color:#fff; }
.timelineStep:not(:last-child)::after { content:''; position:absolute; height:2px; background:#d7dade; top:11px; left:calc(50% + 20px); width:calc(100% - 32px); }
.timelineStep.active:has(+ .timelineStep.active)::after { background:#1188ff; }
.orderCustomerExtra { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px; }
.orderCustomerExtra > div { min-width:0; overflow-wrap:anywhere; }
.orderCustomerExtra .metaRow { grid-template-columns:95px minmax(0,1fr); }
.orderActionBar button:disabled { background:#f3f4f5; color:#8b929c; border-color:transparent; cursor:not-allowed; }
@media(max-width:700px) {
  .orderCustomerExtra { grid-template-columns:1fr; }
  .orderDetailPage .orderTimeline { grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }
  .orderDetailPage .timelineStep { min-width:0; font-size:12px; overflow-wrap:anywhere; }
  .orderDetailPage .orderDetailGrid { grid-template-columns:minmax(0,1fr); }
  .orderDetailPage .orderMainColumn, .orderDetailPage .orderSideColumn { min-width:0; grid-template-columns:minmax(0,1fr); }
  .orderDetailPage .detailCard { min-width:0; max-width:100%; overflow-x:auto; }
}
@media(max-width:900px) {
  .cashbookSectionShell .cashbookMain > .ordersContent { display:block; }
  .cashbookSectionShell .cashbookVoucherList > .ordersContent,
  .cashbookSectionShell .cashbookMain > .ordersContent { padding:0 12px 16px; }
  .cashbookSectionShell .topActions > span:not(.userBubble):not(.userName) { display:none; }
  .cashbookVoucherList .toolbarActions { flex-wrap:wrap; }
}
@media(max-width:700px) {
  .cashbookSectionShell .navButton.active + .navSub { display:flex; flex:0 0 auto; padding:0 8px; gap:12px; }
  .cashbookSectionShell .navSub button { flex:0 0 auto; }
  .cashbookSectionShell .orderListTopbar { padding:8px 12px; }
  .cashbookSectionShell .orderTabs { overflow-x:auto; flex-wrap:nowrap; }
  .cashbookSectionShell .orderTab { flex-shrink:0; }
  .cashbookSectionShell .cashbookDateBar { flex-wrap:wrap; }
  .cashbookSectionShell .cashbookDateBar input { max-width:100%; }
  .cashbookSectionShell .cashbookTitleRow .tableActions { flex-wrap:wrap; justify-content:flex-start; }
  .cashbookVoucherList .ledgerFilters > input[type=search] { flex-basis:100%; }
}

.cloneProductEditor .cloneProductSection { background:#fff; padding:24px; border-bottom:1px solid #dce2e8; }
.cloneProductEditor .cloneProductSection h3 { font-size:17px; margin:0 0 20px; }
.cloneProductEditor .productEditField { margin-bottom:16px; min-width:0; }
.cloneProductEditor .productEditField input,.cloneProductEditor .productEditField textarea { width:100%; box-sizing:border-box; }
.cloneProductEditor .cloneProductStatus { display:flex; align-items:center; gap:10px; margin:16px 0; }
.cloneProductEditor .cloneProductStatus input { flex:0 0 18px; width:18px; height:18px; }
.cloneProductEditor button:disabled { cursor:not-allowed; opacity:.55; }
@media(max-width:760px) {
  .cloneProductEditor .productEditLayout,.cloneProductEditor .productEditGrid { grid-template-columns:minmax(0,1fr); }
  .cloneProductEditor .orderActionBar,.cloneProductEditor .detailActions { flex-wrap:wrap; gap:8px; }
  .cloneProductEditor .cloneProductSection { padding:16px; }
}

.cloneReturnDialog { width:min(860px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid #dce3eb; border-radius:6px; color:#18212b; }
.cloneReturnDialog::backdrop { background:rgb(0 0 0 / 40%); }
.cloneReturnDialog > header,.cloneReturnDialog > footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; background:white; position:sticky; z-index:1; }
.cloneReturnDialog > header { top:0; border-bottom:1px solid #dce3eb; }
.cloneReturnDialog > header h2 { margin:0; font-size:21px; }
.cloneReturnDialog > footer { bottom:0; justify-content:flex-end; flex-wrap:wrap; border-top:1px solid #dce3eb; }
.cloneReturnBody { padding:24px; display:grid; gap:16px; overflow-wrap:anywhere; }
.cloneReturnBody label { display:grid; gap:8px; }
.cloneReturnBody input,.cloneReturnBody select { min-width:0; width:100%; box-sizing:border-box; }
.cloneReturnBody table { width:100%; table-layout:fixed; border-collapse:collapse; }
.cloneReturnBody td,.cloneReturnBody th { padding:8px; text-align:left; overflow-wrap:anywhere; border-bottom:1px solid #dce3eb; }
.cloneReturnFilters { display:flex; flex-wrap:wrap; align-items:end; gap:12px; padding:16px; }
.cloneReturnFilters label { display:grid; gap:6px; min-width:140px; flex:1; }
.cloneReturnFilters input,.cloneReturnFilters select { min-width:0; width:100%; }
.cloneReturnPagination { display:flex; gap:12px; align-items:center; justify-content:flex-end; padding:16px; }
.posLogin { max-width:440px; margin:12vh auto; padding:24px; color:#202831; letter-spacing:0; }
.posLogin h1 { font-size:27px; line-height:1.3; margin:0 0 24px; }

/* Compact operational surfaces; keep touch targets usable on narrow screens. */
.orderDetailPage { font-size:14px; }
.orderDetailPage .detailCardHeader { min-height:48px; padding:10px 16px; }
.orderDetailPage .detailCardHeader h3 { font-size:16px; font-weight:500; }
.orderDetailPage .detailCardBody { padding:14px 16px; }
.orderDetailPage .detailCardBody p { margin:10px 0; line-height:1.5; }
.orderDetailPage .customerLine { font-size:15px; }
.orderDetailPage .orderTitleBlock h1 { font-size:22px; font-weight:500; }
.orderDetailPage .orderDetailGrid { gap:24px; grid-template-columns:minmax(0,1fr) 300px; }
.orderDetailPage .orderMainColumn,.orderDetailPage .orderSideColumn { gap:20px; }
/* Chi tiết đơn hàng: Thông tin sản phẩm is a full-width row under both columns, like Sapo. */
.orderDetailPage .orderDetailGrid > .productPanel { grid-column:1 / -1; min-width:0; }
.orderDetailPage .metaRow { gap:8px; font-size:13px; }
.orderDetailPage .metaRow strong { font-weight:400; overflow-wrap:anywhere; }
.orderDetailPage .detailCardBody:has(> .orderCustomerStats) { display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,30%); column-gap:20px; align-content:start; }
.orderDetailPage .detailCardBody:has(> .orderCustomerStats) > :not(.orderCustomerStats) { grid-column:1; }
/* The stats box spans the five rows on the left plus an empty flexible sixth one, which takes the height the box needs beyond them (otherwise the rows are stretched apart). */
.orderDetailPage .detailCardBody:has(> .orderCustomerStats) { grid-template-rows:repeat(5,auto) 1fr; }
.orderDetailPage .detailCardBody:has(> .orderCustomerStats) > p { margin:4px 0; }
.orderDetailPage .detailCardBody:has(> .orderCustomerStats) > p.customerLine { margin:0; }
.orderDetailPage .detailCardBody:has(> .orderCustomerStats) > hr { margin:12px 0; }
.orderDetailPage .detailCardBody > .orderCustomerStats { grid-column:2; grid-row:1 / span 6; align-self:start; padding:12px; border:1px dashed #c9d0d8; border-radius:4px; min-width:0; }
.orderCustomerStats .metaRow { display:flex; justify-content:space-between; margin:0 0 12px; }
.orderCustomerStats .metaRow:last-child { margin-bottom:0; }
.orderCustomerStats .metaRow strong { text-align:right; color:#0088ff; }
.orderDetailPage .detailCardBody:has(> .orderCustomerStats) > .centerLink,
.orderDetailPage .detailCardBody:has(> .orderCustomerStats) > .orderCustomerExtra { grid-column:1 / -1; }
.orderProcessingReadonly { text-align:left; min-width:0; font-size:13px; font-weight:400; }
.orderProcessingReadonly::after { content:'▾'; float:right; color:#637083; }
.columnSettingsGear,.gearButton,.gearIconButton { font-size:24px; min-width:36px; min-height:36px; line-height:1; }
.ordersTable .controlCell:has(> .columnSettingsGear) { width:44px; min-width:44px; }
@media(max-width:1100px) {
  .orderDetailPage .orderDetailGrid { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:700px) {
  .orderDetailPage .detailCardBody:has(> .orderCustomerStats) { grid-template-columns:minmax(0,1fr); grid-template-rows:none; }
  .orderDetailPage .detailCardBody > .orderCustomerStats { grid-column:1; grid-row:auto; margin-top:12px; }
  .orderDetailPage button,.orderDetailPage select { min-height:40px; }
}
.posLogin p { line-height:1.6; overflow-wrap:anywhere; }
.posLoginRemember { display:flex; gap:8px; align-items:flex-start; margin:0 0 16px; line-height:1.5; font-size:14px; color:#4b5563; }
.posLoginRemember input { margin-top:3px; min-height:0; }
.posLogin button { display:block; width:100%; min-height:48px; margin-top:16px; padding:12px; border:1px solid #cdd4dc; border-radius:4px; background:#fff; color:#202831; white-space:normal; }
.posLogin button:disabled { opacity:.55; cursor:default; }
.posLogin button[hidden], .posLoginRemember[hidden] { display:none; }
.productTags { display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0; }
.productTagChip { display:block; max-width:180px; border-radius:16px; background:#d9efff; padding:4px 12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400; }
.productTagsMore { position:relative; }
.productTagsMore summary { cursor:pointer; color:#637083; list-style:none; padding:4px; }
.productTagsPopover { position:absolute; right:0; top:100%; z-index:20; width:300px; max-width:70vw; background:white; border:1px solid #d3d9df; border-radius:6px; padding:14px; display:flex; flex-direction:column; gap:8px; box-shadow:0 3px 12px #0002; }
.productTagsPopover .productTagChip { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.orderDetailPage .orderTitleBlock { background:transparent; border:0; margin:0; padding:16px 0 0; align-items:center; }
.orderHeadingIdentity { min-width:0; }
.orderHeadingIdentity h1 { overflow-wrap:anywhere; }
.orderHeadingIdentity .orderPrintActions { margin-top:10px; gap:6px; }
.orderDetailPage .orderActionBar { padding-top:6px; padding-bottom:6px; }
.orderDetailPage .orderTimeline { min-width:0; width:52%; max-width:680px; }
.orderDetailPage .orderDetailGrid { margin-top:16px; }
.documentDetail { padding:0 24px 28px; font-size:14px; min-width:0; }
.documentDetail .orderActionBar { margin:0 -24px 18px; padding:6px 24px; min-height:48px; }
.documentDetail :is(.detailCardHeader,.panelHeader) { padding:12px 16px; min-height:48px; }
.documentDetail :is(.detailCardHeader h3,.panelHeader h2) { font-size:16px; font-weight:500; margin:0; }
.documentDetail .detailCardBody { padding:16px; }
.documentDetail .detailCardBody :is(h3,h4) { font-size:13px; font-weight:500; }
.documentDetail .detailCardBody p { margin:8px 0; line-height:1.5; }
.documentDetail :is(.stockAdjustmentTitleRow,.stockTransferTitleRow,.priceAdjustmentTitleRow,.purchaseOrderTitleRow) { margin:0 0 16px; gap:16px; }
.documentDetail :is(.stockAdjustmentTitleRow,.stockTransferTitleRow,.priceAdjustmentTitleRow,.purchaseOrderTitleRow) h1 { font-size:22px; font-weight:500; margin:0 12px 0 0; }
.documentDetail .stockAdjustmentTitleRow { flex-direction:column; align-items:flex-start; }
.documentDetail :is(.purchaseOrderTopGrid,.stockAdjustmentDetailGrid,.stockTransferDetailGrid,.priceAdjustmentDetailGrid,.orderSupplierDetailGrid) { grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:24px; margin:0 0 24px; align-items:stretch; }
.documentDetail :is(.purchaseOrderTopGrid,.stockAdjustmentDetailGrid,.stockTransferDetailGrid,.priceAdjustmentDetailGrid,.orderSupplierDetailGrid) > * { min-width:0; }
.documentDetail :is(.stockAdjustmentInfoGrid,.stockTransferInfoGrid) { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 24px; padding:8px 0 16px; }
.documentDetail .metaRow { grid-template-columns:minmax(105px,45%) minmax(0,1fr); gap:8px; font-size:13px; margin:0 0 10px; align-items:start; }
.documentDetail .metaRow > * { min-width:0; overflow-wrap:break-word; word-break:normal; }
.documentDetail .metaRow strong { font-weight:400; }
.documentDetail .purchaseOrderSupplierBody { min-height:180px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
.documentDetail .supplierCreateBody { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
.documentDetail :is(.supplierDebtBox,.supplierStatsBox) { min-width:0; padding:12px; gap:12px; }
.documentDetail .supplierDebtBox > div { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.documentDetail .supplierNameLink { font-size:15px; text-align:left; }
.documentDetail .purchaseOrderHistoryLink { margin:16px 0 0; padding:12px 0 0; }
.documentDetail :is(.purchaseOrderDetailButtons,.orderSupplierInlineActions) { margin:0 0 24px; gap:8px; }
.documentDetail .toolbarActions { flex-wrap:wrap; gap:8px; }
.documentDetail .toolbarActions button { min-height:34px; padding:6px 14px; font-size:13px; }
.documentDetail .purchaseOrderTimeline { width:40%; min-width:0; grid-template-columns:repeat(3,minmax(0,1fr)); }
.documentDetail .purchaseOrderStep { min-width:0; font-size:13px; }
.documentDetail .purchaseOrderStep.done:last-child .purchaseOrderStepLine span { background:var(--blue); }
.documentDetail .purchaseOrderStatusPanel { margin-bottom:20px; }
.documentDetail .purchaseOrderPaymentStrip { padding:12px 16px; margin:0 16px 16px; gap:16px; font-size:13px; flex-wrap:wrap; }
.documentDetail .priceAdjustmentSidePanels { gap:20px; }
.documentDetail .priceAdjustmentProductsPanel { display:flex; flex-direction:column; }
.documentDetail .priceAdjustmentDetailFooter { margin-top:auto; }
.documentDetail .stockTransferTimeline { width:40%; min-width:0; grid-template-columns:repeat(3,minmax(0,1fr)); }
.documentDetail .stockTransferStep,.documentDetail .stockTransferStep strong { font-size:13px; font-weight:400; }
.documentDetail .priceAdjustmentInfoGrid { padding:0; }
.documentDetail .tableWrap { min-width:0; max-width:100%; overflow-x:auto; }
.documentDetail table { width:100%; min-width:900px; }
.documentDetail .priceAdjustmentProductTable { min-width:600px; }
.documentDetail table :is(th,td) { padding:12px; height:auto; font-size:13px; }
.documentDetail table th { font-weight:500; white-space:nowrap; }
.documentDetail table td strong { font-weight:400; }
.documentDetail :is(.stockAdjustmentLineTable,.stockTransferProductTable) :is(th,td):nth-child(3) { min-width:260px; max-width:400px; white-space:normal; }
.documentDetail .priceAdjustmentProductTable :is(th,td):nth-child(2) { min-width:220px; max-width:320px; white-space:normal; }
.documentDetail .orderTab { min-height:44px; padding:10px 16px; font-size:13px; }
.documentDetail .paginationFooter { padding:12px 16px; font-size:13px; }
@media(max-width:1250px) {
  .documentDetail :is(.stockAdjustmentInfoGrid,.stockTransferInfoGrid) { grid-template-columns:minmax(0,1fr); }
  .documentDetail :is(.purchaseOrderSupplierBody,.supplierCreateBody) { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:900px) {
  .documentDetail :is(.purchaseOrderTopGrid,.stockAdjustmentDetailGrid,.stockTransferDetailGrid,.priceAdjustmentDetailGrid,.orderSupplierDetailGrid) { grid-template-columns:minmax(0,1fr); }
  .documentDetail :is(.purchaseOrderTitleRow,.stockTransferTitleRow) { flex-direction:column; align-items:stretch; }
  .documentDetail :is(.purchaseOrderTimeline,.stockTransferTimeline) { width:100%; min-width:0; }
}
@media(max-width:600px) {
  .documentDetail { padding:0 12px 20px; }
  .documentDetail .orderActionBar { margin:0 -12px 16px; padding:8px 12px; flex-wrap:wrap; }
  .documentDetail .metaRow { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .documentDetail :is(.purchaseOrderProductFooter,.orderSupplierProductFooter) { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:700px) {
  .orderDetailPage .orderTitleBlock { flex-direction:column; align-items:stretch; gap:16px; }
  .orderDetailPage .orderTimeline { width:100%; }
}

.carrierRatesNotice {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
}

/* Hóa đơn điện tử: invoice detail modal */
.einvoiceDetailModal .modalHeader h2 { display: flex; align-items: center; gap: 8px; }
.einvoiceDetailGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; padding: 12px 20px; }
.einvoiceDetailGrid .metaRow { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; }
.einvoiceDetailGrid .metaRow span { color: #637381; }
.einvoiceDetailGrid .metaRow strong { font-weight: 500; text-align: right; }
.einvoiceDetailModal .totals { padding: 8px 20px 16px; display: grid; justify-content: end; gap: 4px; }
.einvoiceDetailModal .totals .metaRow { display: flex; gap: 32px; justify-content: space-between; }
@media (max-width: 720px) { .einvoiceDetailGrid { grid-template-columns: 1fr; } }

/* Kênh Social → Hội thoại (social-inbox.js): list, chat and customer panes like Sapo Social. */
.socialMain { display:flex; flex-direction:column; height:100vh; background:#f3f4f6; color:var(--text); }
.socialTop { display:flex; align-items:center; gap:14px; padding:10px 20px; background:#fff; border-bottom:1px solid var(--line); }
.socialTop h1 { margin:0; font-size:18px; }
.socialPageName { padding:4px 12px; border:1px solid var(--line); border-radius:16px; font-size:13px; color:var(--muted); }
.socialPanes { flex:1; min-height:0; display:grid; grid-template-columns:minmax(300px,380px) minmax(0,1fr) minmax(240px,300px); }
.socialList { display:flex; flex-direction:column; min-height:0; background:#fff; border-right:1px solid var(--line); }
.socialChips, .socialTypes { display:flex; flex-wrap:wrap; gap:6px; padding:10px 12px 0; }
.socialChips button, .socialTypes button { border:0; border-radius:14px; padding:5px 12px; background:var(--panel-2); color:var(--text); font:inherit; font-size:13px; cursor:pointer; }
.socialChips button.active { background:#e6f3ff; color:var(--blue); font-weight:600; }
.socialTypes button { background:none; border-radius:0; padding:5px 4px; border-bottom:2px solid transparent; }
.socialTypes button.active { color:var(--blue); border-bottom-color:var(--blue); }
.socialTagFilter { margin-left:auto; max-width:130px; font:inherit; font-size:13px; border:1px solid var(--line); border-radius:6px; padding:3px 6px; }
.socialSearch { display:flex; gap:8px; padding:10px 12px; }
.socialSearch input { flex:1; min-width:0; border:1px solid var(--line); border-radius:6px; padding:8px 10px; font:inherit; }
.socialSort { border:1px solid var(--line); background:#fff; border-radius:6px; padding:0 10px; font:inherit; font-size:13px; cursor:pointer; white-space:nowrap; }
.socialBanner { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 12px 8px; padding:6px 10px; border-radius:6px; background:var(--panel-2); color:var(--muted); font-size:12px; }
.socialBanner.warn { background:#fff4e5; color:var(--warn); }
.socialRows { flex:1; min-height:0; overflow-y:auto; }
.socialRow { display:flex; gap:12px; width:100%; padding:12px; border:0; border-bottom:1px solid #f0f2f4; background:#fff; text-align:left; font:inherit; cursor:pointer; }
.socialRow:hover { background:#f7fafd; }
.socialRow.active { background:#e6f3ff; }
.socialRowAvatar { position:relative; flex:none; }
.socialDot { position:absolute; top:0; right:0; width:10px; height:10px; border-radius:50%; background:#e53935; border:2px solid #fff; }
.socialKind { position:absolute; right:-2px; bottom:-2px; width:16px; height:16px; border-radius:50%; border:2px solid #fff; background:#0a7cff; }
.socialKind.comment { background:#42b72a; }
.socialRowBody { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.socialRowTop { display:flex; justify-content:space-between; gap:8px; }
.socialRowTop strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.socialRowTop time { flex:none; color:var(--muted); font-size:12px; }
.socialSnippet { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:13px; }
.socialRow.unread strong, .socialRow.unread .socialSnippet { font-weight:700; color:var(--text); }
.socialRowTags { display:flex; flex-wrap:wrap; gap:4px; }
.socialTag { --tag:#5b6b7f; display:inline-flex; align-items:center; gap:4px; padding:1px 8px; border-radius:10px; font-size:12px; color:#fff; background:var(--tag); }
.socialAvatar { position:relative; display:inline-grid; place-items:center; width:42px; height:42px; flex:none; border-radius:50%; overflow:hidden; background:#d8e6f5; color:#305070; font-weight:600; font-size:14px; }
.socialAvatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.socialAvatar.small { width:30px; height:30px; font-size:11px; }
.socialAvatar.large { width:56px; height:56px; font-size:18px; }
.socialEmpty { padding:24px 16px; text-align:center; color:var(--muted); }
.socialEmpty.error { color:var(--danger); }
.socialMore { display:block; width:calc(100% - 24px); margin:10px 12px; padding:8px; border:1px solid var(--line); border-radius:6px; background:#fff; font:inherit; cursor:pointer; }
.socialChat { display:flex; flex-direction:column; min-width:0; min-height:0; background:#eef0f3; }
.socialChat.empty { justify-content:center; align-items:center; color:var(--muted); }
.socialChatHead { display:flex; align-items:center; gap:12px; padding:10px 16px; background:#fff; border-bottom:1px solid var(--line); }
.socialChatHead > div { flex:1; min-width:0; display:flex; flex-direction:column; }
.socialChatHead span { color:var(--muted); font-size:13px; }
.socialChatHead b { color:var(--blue); font-weight:500; }
.socialIconButton { border:1px solid var(--line); background:#fff; border-radius:6px; width:34px; height:34px; font-size:18px; cursor:pointer; color:var(--blue); }
.socialMessages { flex:1; min-height:0; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:8px; }
.socialDay { align-self:center; padding:2px 10px; border-radius:10px; background:#dfe3e8; color:var(--muted); font-size:12px; }
.socialMessage { display:flex; align-items:flex-end; gap:8px; max-width:75%; }
.socialMessage.out { align-self:flex-end; justify-content:flex-end; }
.socialBubbleWrap { display:flex; flex-direction:column; gap:4px; min-width:0; }
.socialMessage.out .socialBubbleWrap { align-items:flex-end; }
.socialBubble { padding:8px 12px; border-radius:16px; background:#fff; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.4; box-shadow:0 1px 1px rgba(0,0,0,.04); }
.socialMessage.out .socialBubble { background:#1877f2; color:#fff; }
.socialImage img { display:block; max-width:240px; max-height:260px; border-radius:12px; border:1px solid var(--line); background:#fff; }
.socialFile { padding:8px 12px; border-radius:12px; background:#fff; color:var(--blue); }
.socialBy { color:var(--muted); font-size:12px; }
.socialBy b { color:var(--blue); font-weight:500; }
.socialNotice { margin:0 16px 8px; padding:8px 12px; border-radius:6px; background:#fff4e5; color:var(--warn); font-size:13px; }
.socialTagBar { display:flex; flex-wrap:wrap; gap:6px; padding:8px 16px; background:#fff; border-top:1px solid var(--line); }
.socialMuted { color:var(--muted); font-size:13px; }
.socialComposer { display:flex; gap:8px; padding:10px 16px 14px; background:#fff; }
.socialComposer textarea { flex:1; resize:none; border:1px solid var(--line); border-radius:18px; padding:9px 14px; font:inherit; line-height:1.4; }
.socialComposer textarea:disabled { background:var(--panel-2); }
.socialSend { border:0; border-radius:18px; padding:0 18px; background:var(--blue); color:#fff; font:inherit; font-weight:600; cursor:pointer; }
.socialSend:disabled { opacity:.45; cursor:default; }
.socialCustomer { min-height:0; overflow-y:auto; background:#fff; border-left:1px solid var(--line); padding:16px; display:flex; flex-direction:column; gap:16px; }
.socialCustomerHead { display:flex; align-items:center; gap:12px; }
.socialCustomerHead > div { display:flex; flex-direction:column; min-width:0; }
.socialCustomerHead strong { font-size:16px; }
.socialCustomerHead span { color:var(--muted); font-size:13px; }
.socialCustomer h3 { margin:0 0 8px; font-size:14px; }
.socialCustomer dl { display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin:0; font-size:13px; }
.socialCustomer dt { color:var(--muted); }
.socialCustomer dd { margin:0; }
.socialCreateOrder { margin-top:auto; border:0; border-radius:22px; padding:12px; background:var(--blue); color:#fff; font:inherit; font-weight:600; cursor:pointer; }
@media (max-width: 1100px) {
  .socialPanes { grid-template-columns:minmax(260px,320px) minmax(0,1fr); }
  .socialCustomer { display:none; }
}
@media (max-width: 720px) {
  .socialPanes { grid-template-columns:1fr; grid-template-rows:minmax(200px,40%) 1fr; }
  .socialList { border-right:0; border-bottom:1px solid var(--line); }
}

/* Tổng quan (dashboard) */
.main.overviewMain { display: block; padding: 20px 24px 40px; background: var(--bg); overflow: auto; }
.overviewGrid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 20px; align-items: start; max-width: 1400px; }
.overviewColumn { display: grid; gap: 20px; min-width: 0; }
.overviewCard { background: var(--panel); border-radius: 6px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); padding: 16px 20px; min-width: 0; }
.overviewCardHeader { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.overviewCardHeader:has(h2:empty) { display: none; }
.overviewCardHeader h2 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: #1f2d3d; }
.overviewCardActions { display: flex; align-items: center; gap: 12px; }
.overviewMuted { color: var(--muted); font-size: 13px; }
.overviewStats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.overviewStat { display: grid; gap: 6px; padding: 4px 0 4px 14px; border-left: 3px solid var(--line); }
.overviewStat span { color: var(--muted); font-size: 13px; }
.overviewStat strong { font-size: 22px; font-weight: 600; color: #1f2d3d; }
.overviewStat.revenue { border-left-color: var(--blue); }
.overviewStat.revenue strong { color: var(--blue); }
.overviewCheckBadge { border: 0; border-radius: 10px; padding: 2px 10px; font-size: 12px; font-weight: 600; cursor: pointer; min-height: 0; white-space: nowrap; }
.overviewStockCheck { margin-top: 10px; }
.cashCheck { margin: 0 0 12px; padding: 10px 14px; background: var(--panel); border-radius: 6px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); font-size: 13px; }
.cashCheck .overviewCheckHead { justify-content: flex-start; }
.cashCheck .overviewCheckHead .linkButton { margin-left: auto; }
.overviewCheckBadge.good { background: #e6f6ec; color: #18794e; }
.overviewCheckBadge.bad { background: #fdecec; color: #c92a2a; }
.overviewCheck { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 13px; }
.overviewCheck p { margin: 0; }
.overviewCheckHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.overviewCheckError { color: #c92a2a; }
.overviewCheckDay { display: grid; gap: 4px; }
.overviewCheckNumbers { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.overviewCheckNumbers strong { color: #1f2d3d; }
.overviewCheckOrders { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.overviewCheckOrders li { display: flex; gap: 10px; color: var(--muted); }
.overviewCheckOrders li strong { color: #1f2d3d; font-weight: 600; min-width: 92px; }
.overviewTabs { display: flex; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.overviewTabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 0; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; }
.overviewTabs button.active { color: var(--blue); border-bottom-color: var(--blue); }
.overviewRange { margin-left: auto; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.overviewChart { width: 100%; height: auto; display: block; }
.overviewChart .gridLine { stroke: #e8edf2; stroke-width: 1; }
.overviewChart .axisLabel { fill: #8392a5; font-size: 11px; }
.overviewChart .bar { fill: var(--blue); }
.overviewChart .bar:hover { fill: #006bd6; }
.overviewChartTotal { margin: 8px 0 0; text-align: center; color: var(--muted); font-size: 13px; }
.overviewChartTotal strong { color: #1f2d3d; }
.overviewEmpty { color: var(--muted); text-align: center; padding: 32px 0; margin: 0; }
.overviewShare { display: flex; align-items: center; gap: 32px; padding: 12px 0; flex-wrap: wrap; }
.overviewDonut { width: 180px; height: 180px; border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%); mask: radial-gradient(circle, transparent 52%, #000 53%); flex: none; }
.overviewLegend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1; min-width: 220px; }
.overviewLegend li { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 10px; font-size: 13px; }
.overviewLegend .swatch { width: 12px; height: 12px; border-radius: 3px; }
.overviewLegend .legendValue { color: var(--muted); min-width: 90px; text-align: right; }
.overviewPending { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.overviewPendingItem { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); cursor: pointer; text-align: left; font-size: 14px; color: #1f2d3d; }
.overviewPendingItem:hover:not(:disabled) { border-color: var(--blue); }
.overviewPendingItem strong { font-size: 18px; color: var(--blue); }
.overviewTop { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.overviewTop li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.overviewTop .rank { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e6f3ff; color: var(--blue); font-size: 12px; font-weight: 700; }
.overviewTop .topName { display: grid; gap: 2px; min-width: 0; }
.overviewStock { display: grid; }
.overviewStockRow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border: 0; border-bottom: 1px solid #eef1f4; background: none; font-size: 14px; color: #1f2d3d; text-align: left; }
.overviewStockRow:last-child { border-bottom: 0; }
button.overviewStockRow { cursor: pointer; }
button.overviewStockRow:hover span { color: var(--blue); }
/* Tổng quan like Sapo's /admin/dashboard (owner 25/10/2026: "Dashboard nhìn vẫn còn đơn giản quá"): round icons, figures
   that open what they count, the chart's day box, Top sản phẩm with pictures, Hoạt động gần đây. */
.overviewIcon { --icon-bg: #0088ff; --icon-ink: #fff; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--icon-bg); flex: none; }
.overviewIcon::before { content: ""; width: 18px; height: 18px; background: var(--icon-ink); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.overviewIcon.soft { --icon-bg: #e6f4ff; --icon-ink: #0088ff; }
.overviewIcon.red { --icon-bg: #fff6f6; --icon-ink: #ee4747; }
.overviewIcon.icon-revenue { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%226%22%20width%3D%2219%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M6%209.5v.01M18%2014.5v.01%22%2F%3E%3C%2Fsvg%3E"); }
.overviewIcon.icon-cart { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%204h2.2l2.3%2010.2a1%201%200%200%200%201%20.8h8.8a1%201%200%200%200%201-.8L20%208H6.2%22%2F%3E%3Ccircle%20cx%3D%229.5%22%20cy%3D%2219%22%20r%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2219%22%20r%3D%221.4%22%2F%3E%3C%2Fsvg%3E"); }
.overviewIcon.icon-return { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2014%204%209l5-5%22%2F%3E%3Cpath%20d%3D%22M4%209h10.5a5.5%205.5%200%200%201%200%2011H11%22%2F%3E%3C%2Fsvg%3E"); }
.overviewIcon.icon-cancel { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m9%209%206%206M15%209l-6%206%22%2F%3E%3C%2Fsvg%3E"); }
.overviewIcon.icon-draft { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%224.5%22%20width%3D%2214%22%20height%3D%2216.5%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%203h6v3H9z%22%2F%3E%3Cpath%20d%3D%22m9%2013.5%202%202%204-4%22%2F%3E%3C%2Fsvg%3E"); }
.overviewIcon.icon-card { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225.5%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18M7%2015h3%22%2F%3E%3C%2Fsvg%3E"); }
.overviewIcon.icon-box { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%207.5%2012%203.5l8.5%204v9L12%2020.5l-8.5-4z%22%2F%3E%3Cpath%20d%3D%22M3.5%207.5%2012%2011.5l8.5-4M12%2011.5v9%22%2F%3E%3C%2Fsvg%3E"); }
.overviewIcon.icon-clock { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E"); }
.overviewIcon.icon-truck { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h11v10H3zM14%2010h4l3%203v3h-7%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2218%22%20r%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2218%22%20r%3D%221.8%22%2F%3E%3C%2Fsvg%3E"); }
.overviewIcon.icon-alert { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203.5%2021.5%2020h-19z%22%2F%3E%3Cpath%20d%3D%22M12%2010v4.5M12%2017.2v.01%22%2F%3E%3C%2Fsvg%3E"); }
.overviewIcon.icon-coins { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%226.5%22%20rx%3D%227%22%20ry%3D%223%22%2F%3E%3Cpath%20d%3D%22M5%206.5V12c0%201.7%203.1%203%207%203s7-1.3%207-3V6.5%22%2F%3E%3Cpath%20d%3D%22M5%2012v5.5c0%201.7%203.1%203%207%203s7-1.3%207-3V12%22%2F%3E%3C%2Fsvg%3E"); }
.overviewKpis { gap: 0; }
.overviewKpi { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 6px 12px; border-radius: 3px; color: #0f1824; text-decoration: none; }
.overviewKpi + .overviewKpi { box-shadow: inset 1px 0 0 #e8eaeb; }
a.overviewKpi:hover { background: #f2f9ff; }
.overviewKpi .kpiText { display: grid; gap: 2px; min-width: 0; }
.overviewKpi .kpiLabel { color: #747c87; font-size: 13px; }
.overviewKpi .kpiValue { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.overviewKpi .kpiValue strong { font-size: 20px; font-weight: 600; line-height: 26px; }
.overviewKpi .kpiCompare { color: #747c87; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overviewKpi.revenue strong { color: #0088ff; }
.overviewKpi.created strong { color: #0db473; }
.overviewKpi.created .overviewIcon { --icon-bg: #0db473; }
.overviewKpi.returned strong { color: #e49c06; }
.overviewKpi.returned .overviewIcon { --icon-bg: #ffb200; }
.overviewKpi.cancelled strong { color: #ee4747; }
.overviewKpi.cancelled .overviewIcon { --icon-bg: #ee4747; }
.overviewChange { display: inline-block; padding: 0 6px; border-radius: 10px; background: #f3f4f5; color: #747c87; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.overviewChange.up { background: #f3fcf9; color: #0db473; }
.overviewChange.down { background: #fff6f6; color: #ee4747; }
.overviewChartWrap { position: relative; }
.overviewChart .slot { outline: none; }
.overviewChart .slot.open { cursor: pointer; }
.overviewChart .band { fill: transparent; }
.overviewChart .slot:hover .band, .overviewChart .slot:focus-visible .band { fill: #f2f4f8; }
.overviewChart .slot:hover .bar, .overviewChart .slot:focus-visible .bar { fill: #006bd6; }
.overviewChartTip { position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - 10px)); min-width: 160px; padding: 8px 10px; border: 1px solid #d3d5d7; border-radius: 3px; background: #fff; box-shadow: 0 2px 8px rgba(15, 24, 36, 0.15); color: #0f1824; font-size: 12px; white-space: nowrap; pointer-events: none; }
.overviewChartTip[hidden] { display: none; }
.overviewChartTip::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; background: #fff; border-right: 1px solid #d3d5d7; border-bottom: 1px solid #d3d5d7; transform: translateX(-50%) rotate(45deg); }
.overviewChartTip.fromLeft { transform: translate(-22px, calc(-100% - 10px)); }
.overviewChartTip.fromLeft::after { left: 22px; }
.overviewChartTip.fromRight { transform: translate(calc(-100% + 22px), calc(-100% - 10px)); }
.overviewChartTip.fromRight::after { left: calc(100% - 22px); }
.overviewChartTip .tipDay { margin-bottom: 4px; color: #747c87; }
.overviewChartTip .tipRow { display: flex; justify-content: space-between; gap: 16px; line-height: 18px; }
.overviewChartTip .tipRow strong { font-weight: 600; }
.overviewChartTip .tipHint { margin-top: 4px; color: #0088ff; }
.overviewChartTotal { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.overviewChartTotalLink { color: inherit; }
.overviewChartTotalLink:hover strong { color: #0088ff; }
.overviewMain .overviewPendingItem { justify-content: flex-start; gap: 10px; }
.overviewMain .overviewPendingItem > span:not(.overviewIcon) { flex: 1; }
.overviewPendingItem .overviewIcon { width: 32px; height: 32px; }
.overviewPendingItem .overviewIcon::before { width: 16px; height: 16px; }
.overviewPair { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }
.overviewCardActions .overviewRange { margin-left: 0; padding: 4px 6px; font-size: 13px; }
.overviewTopCard .overviewCardHeader { flex-wrap: wrap; }
.overviewTop li { grid-template-columns: 26px 40px minmax(0, 1fr) auto; }
.overviewTop .rank { background: #0088ff; color: #fff; }
.overviewTop .rank2 { background: #0db473; }
.overviewTop .rank3 { background: #ffb200; }
.overviewTop .rank4 { background: #ee4747; }
.overviewTop .rank5 { background: #5bb5ff; }
.overviewTop .topThumb img { display: block; width: 40px; height: 40px; object-fit: contain; border: 1px solid #e8eaeb; border-radius: 3px; background: #fff; }
.overviewTop .topLink { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overviewTop .topValue { font-weight: 600; }
.overviewCardFoot { margin-top: 14px; padding-top: 10px; border-top: 1px solid #e8eaeb; text-align: center; font-size: 13px; }
.overviewStockRow { justify-content: flex-start; color: #1f2d3d; }
.overviewStockRow > span:not(.overviewIcon) { flex: 1; }
.overviewStockRow .overviewIcon { width: 28px; height: 28px; }
.overviewStockRow .overviewIcon::before { width: 15px; height: 15px; }
a.overviewStockRow:hover span { color: var(--blue); }
.overviewActivity { list-style: none; margin: 0; padding: 0; }
.overviewActivity li { position: relative; display: grid; gap: 2px; padding: 0 0 14px 22px; font-size: 13px; }
.overviewActivity li::before { content: ""; position: absolute; left: 4px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #0088ff; box-shadow: 0 0 0 3px #e6f4ff; }
.overviewActivity li::after { content: ""; position: absolute; left: 7.5px; top: 17px; bottom: 1px; border-left: 1px dashed #c4cdd5; }
.overviewActivity li:last-child { padding-bottom: 0; }
.overviewActivity li:last-child::after { display: none; }
.overviewActivity li.delivered::before { background: #0db473; box-shadow: 0 0 0 3px #f3fcf9; }
.overviewActivity li.cancelled::before { background: #ee4747; box-shadow: 0 0 0 3px #fff6f6; }
.overviewActivity li.returned::before { background: #ffb200; box-shadow: 0 0 0 3px #fff7e7; }
.overviewActivity .overviewMuted, .overviewActivity time { font-size: 12px; }
@media (max-width: 1100px) { .overviewGrid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .overviewMain { padding: 12px 16px 32px; }
  .overviewStats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overviewPending { grid-template-columns: 1fr; }
  .overviewTabs { flex-wrap: wrap; gap: 4px 16px; }
  .overviewTabs button { white-space: nowrap; }
  .overviewRange { margin-left: 0; }
}
.socialProduct { width:220px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.socialProduct img { display:block; width:100%; max-height:220px; object-fit:contain; background:#fff; }
.socialProduct strong { display:block; padding:8px 10px; font-size:13px; font-weight:600; }

/* Báo cáo */
.reportHubMain, .salesReportMain { display: grid; gap: 20px; align-content: start; }
.reportOverview { display: grid; gap: 20px; }
.reportCardRow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.reportBigFigure { margin: 0 0 8px; font-size: 24px; font-weight: 600; color: #1f2d3d; }
.reportCardLinks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; }
.reportCardLinks.column { flex-direction: column; align-items: flex-start; }
.reportStatusList { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.reportStatusList li { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.reportStatusList .linkButton { padding: 0; }
.reportHubList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.reportHubItem { display: grid; gap: 4px; text-align: left; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); cursor: pointer; }
.reportHubItem strong { color: var(--blue); font-size: 14px; }
.reportHubItem span { color: var(--muted); font-size: 13px; }
.reportHubItem em { color: #b26b00; font-size: 12px; font-style: normal; }
.reportHubItem:hover:not(:disabled) { border-color: var(--blue); }
.reportHubItem.unavailable { cursor: default; background: #fafbfc; }
.reportHubItem.unavailable strong { color: #637083; }
.salesReportBar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.salesReportBar .linkButton { padding: 0; font-size: 14px; }
.salesReportFilters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: var(--panel); border-radius: 6px; padding: 12px 16px; }
.salesReportFilters select, .salesReportFilters input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.salesReportTable .moneyCell { text-align: right; }
.salesReportTable .reportTotalRow td { font-weight: 700; background: #f4f8fc; }
.salesReportPager { display: flex; justify-content: flex-end; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
@media (max-width: 1100px) { .reportCardRow { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .reportHubList { grid-template-columns: 1fr; } }
.socialButtons { display:flex; flex-direction:column; min-width:200px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.socialButtons > * { padding:8px 12px; text-align:center; color:var(--blue); border-top:1px solid var(--line); text-decoration:none; }
.socialButtons > :first-child { border-top:0; }
.reportRevenueCard .overviewChart { max-height: 280px; }
.salesReportMain .tableWrap { overflow-x: auto; }
.ordersTable.salesReportTable { min-width: 0; width: 100%; table-layout: auto; }
.salesReportTable td, .salesReportTable th { white-space: normal; }
.salesReportTable .moneyCell { white-space: nowrap; }
.socialProduct small { display:block; padding:0 10px 8px; color:var(--muted); font-size:12px; }

/* Marketing */
.campaignDetailMain, .marketingSettingsMain { display: grid; gap: 20px; align-content: start; max-width: 1200px; }
.campaignTitle { display: grid; gap: 4px; }
.campaignTitle h1 { margin: 0; font-size: 22px; }
.campaignGrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; align-items: start; }
.campaignRow { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; padding: 7px 0; font-size: 14px; }
.campaignRow span { color: var(--muted); }
.campaignRow strong { font-weight: 500; overflow-wrap: anywhere; }
.campaignMessage { margin: 0; padding: 12px 14px; background: #f4f8fc; border-radius: 6px; white-space: pre-wrap; line-height: 1.5; }
.ordersTable.campaignTable { min-width: 0; width: 100%; }
.campaignListMain .salesReportPager { padding: 12px 16px; }
.marketingConnection { display: grid; gap: 10px; font-size: 14px; }
.marketingConnection p { margin: 0; }
.marketingConnection .linkButton { justify-self: start; padding: 0; }
.marketingPages { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.marketingPages li { display: flex; align-items: center; gap: 10px; }
.marketingPages img, .marketingPages .pageAvatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.marketingPages .pageAvatar { display: inline-grid; place-items: center; background: #e6f3ff; color: var(--blue); font-weight: 700; }
@media (max-width: 900px) { .campaignGrid { grid-template-columns: 1fr; } .campaignRow { grid-template-columns: 120px minmax(0, 1fr); } }

/* Cấu hình: pages showing the Sapo configuration copied into the Clone */
.configSettingsPage .settingsDetailSheet { display: grid; gap: 16px; align-content: start; grid-auto-rows: auto; }
.configSyncedAt { margin: 0; }
.configStore { display: flex; gap: 20px; align-items: flex-start; }
.configStoreLogo { width: 72px; height: 72px; border-radius: 8px; object-fit: contain; border: 1px solid var(--line); display: inline-grid; place-items: center; font-size: 28px; font-weight: 700; color: var(--blue); background: #fff; flex: none; }
.configFields { display: grid; flex: 1; min-width: 0; }
.configFilters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.configTable { width: 100%; }
.configTable td { vertical-align: middle; }
.configBack { justify-self: start; padding: 0; }
@media (max-width: 640px) { .configStore { flex-direction: column; } }
.configSettingsPage .configFilters { padding: 0; border: 0; background: none; box-shadow: none; }
.configBlock { display: grid; gap: 8px; }
.configBlock h2 { margin: 0; font-size: 16px; }
.configBlock > p { margin: 0 0 6px; }
.configSettingsPage .tableWrap { overflow-x: auto; }
@media (max-width: 720px) { .configTable { min-width: 620px; } .configSettingsPage .settingsDetailSheet { padding: 16px; } }
.socialTagBar { overflow-x:auto; flex-wrap:nowrap; }
.socialTagToggle { --tag:#5b6b7f; flex:none; border:1px solid var(--tag); border-radius:12px; padding:2px 10px; background:#fff; color:var(--tag); font:inherit; font-size:12px; cursor:pointer; }
.socialTagToggle.active { background:var(--tag); color:#fff; }
.socialTagToggle:disabled { cursor:default; opacity:.7; }

/* Kênh Social → Tạo đơn beside the chat (social-order.js): order lines in the centre, customer and payment on the right. */
.socialPanes.withOrder { grid-template-columns:minmax(240px,300px) minmax(300px,1fr) minmax(380px,1.1fr) clamp(280px, 24vw, 380px); }
.socialOrder { position:relative; display:flex; flex-direction:column; min-width:0; min-height:0; background:#fff; border-left:1px solid var(--line); }
.socialOrderHead { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line); }
.socialOrderHead strong { margin-right:auto; font-size:16px; white-space:nowrap; }
.socialOrderHead select { max-width:150px; border:1px solid var(--line); border-radius:6px; padding:5px 6px; font:inherit; font-size:13px; background:#fff; }
.socialOrderBack { border:0; background:none; font-size:18px; color:var(--muted); cursor:pointer; }
.socialOrderSearchWrap { position:relative; padding:10px 12px 0; }
.socialOrderSearch { width:100%; border:1px solid var(--line); border-radius:6px; padding:8px 10px; font:inherit; }
.socialOrderSearch:focus { border-color:var(--blue); outline:none; }
.socialOrderResults { position:absolute; left:12px; right:12px; top:calc(100% + 4px); z-index:5; max-height:55vh; overflow-y:auto; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); }
.socialOrderResultsTitle { position:sticky; top:0; display:flex; justify-content:space-between; padding:6px 10px; background:#e8f7ef; color:#0f7a4a; font-size:12px; font-weight:600; }
.socialOrderProduct { display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:0; border-top:1px solid #f0f2f4; background:#fff; text-align:left; font:inherit; cursor:pointer; }
.socialOrderProduct:hover { background:#f5f9ff; }
.socialOrderProduct img, .socialOrderNoImage, .socialOrderLine > img { width:40px; height:40px; flex:none; object-fit:contain; border:1px solid var(--line); border-radius:4px; background:#fafafa; }
.socialOrderProductBody { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.socialOrderProductBody strong { font-weight:500; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.socialOrderProductBody small, .socialOrderLineMain small { color:var(--muted); font-size:12px; }
.socialOrderProductBody b, .socialOrderLineMain b { color:var(--blue); font-weight:500; }
.socialOrderProductBody em, .socialOrderLineMain em { font-style:normal; color:var(--text); }
.socialOrderProductBody em.none, .socialOrderLineMain em.none { color:var(--danger); }
.socialOrderPrice { flex:none; font-weight:600; font-size:13px; }
.socialOrderBody { flex:1; min-height:0; overflow-y:auto; padding:10px 12px; display:flex; flex-direction:column; gap:10px; }
.socialOrderListHead { display:flex; align-items:center; gap:6px; }
.socialOrderBadge { min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#e53935; color:#fff; font-size:11px; display:inline-grid; place-items:center; }
.socialOrderLines { display:flex; flex-direction:column; }
.socialOrderLine { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid #f0f2f4; }
.socialOrderLineMain { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.socialOrderLineTop { display:flex; gap:8px; align-items:flex-start; }
.socialOrderLineTop strong { flex:1; font-weight:500; font-size:13px; }
.socialOrderLineControls { display:flex; align-items:center; gap:8px; }
.socialOrderUnitPrice { width:100px; border:1px solid var(--line); border-radius:4px; padding:4px 6px; font:inherit; font-size:13px; text-align:right; }
.socialOrderTimes { color:var(--muted); }
.socialOrderStepper { display:flex; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.socialOrderStepper button { width:28px; border:0; background:#fff; font-size:16px; cursor:pointer; }
.socialOrderStepper button:disabled { color:#c5ccd4; cursor:default; }
.socialOrderStepper input { width:44px; border:0; border-left:1px solid var(--line); border-right:1px solid var(--line); text-align:center; font:inherit; font-size:13px; -moz-appearance:textfield; }
.socialOrderStepper input::-webkit-inner-spin-button { -webkit-appearance:none; }
.socialOrderLineTotal { margin-left:auto; font-size:13px; font-weight:600; }
.socialOrderRemove { border:0; background:none; font-size:18px; line-height:1; color:var(--muted); cursor:pointer; }
.socialOrderDone { display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:8px; background:#e8f7ef; color:#0f5d3b; font-size:13px; }
.socialOrderDone div { display:flex; gap:16px; }
.socialOrderSide { display:flex; flex-direction:column; min-height:0; background:#f3f4f6; border-left:1px solid var(--line); }
.socialOrderSideBody { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding-bottom:8px; }
.socialOrderSide .socialCustomerHead { padding:12px 14px; background:#fff; }
.socialOrderCard { padding:10px 14px; background:#fff; }
.socialOrderCardHead { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.socialOrderCard h3, .socialOrderTotals h3 { margin:0; font-size:14px; }
.socialOrderIcon { border:0; background:none; color:var(--muted); cursor:pointer; font-size:15px; }
.socialOrderAddress { display:flex; flex-direction:column; gap:2px; font-size:13px; }
.socialOrderAddress span { color:var(--muted); }
.socialOrderGrid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.socialOrderGrid .wide { grid-column:1 / -1; }
.socialOrderGrid input, .socialOrderCard textarea, .socialOrderLabel input { width:100%; border:1px solid var(--line); border-radius:6px; padding:7px 9px; font:inherit; font-size:13px; }
.socialOrderSave { border:1px solid var(--blue); border-radius:6px; padding:6px; background:#fff; color:var(--blue); font:inherit; font-size:13px; cursor:pointer; }
.socialOrderNote { margin:0; font-size:13px; white-space:pre-wrap; }
.socialOrderLabel { display:flex; flex-direction:column; gap:4px; margin-bottom:8px; font-size:12px; color:var(--muted); }
.socialOrderDelivery { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.socialOrderDelivery button { border:1px solid var(--line); border-radius:6px; padding:8px 6px; background:#fff; font:inherit; font-size:13px; cursor:pointer; }
.socialOrderDelivery button.active { border-color:var(--blue); color:var(--blue); background:#f0f8ff; }
.socialOrderDelivery button:disabled { color:#aab3be; cursor:not-allowed; }
.socialOrderTotals { padding:10px 14px; background:#fff; border-top:1px solid var(--line); }
.socialOrderTotals dl { display:grid; grid-template-columns:1fr 110px; gap:6px 12px; margin:6px 0 0; font-size:13px; align-items:center; }
.socialOrderTotals dd { margin:0; text-align:right; }
.socialOrderTotals input { width:100%; border:1px solid var(--line); border-radius:4px; padding:4px 6px; font:inherit; font-size:13px; text-align:right; }
.socialOrderTotals .strong { font-weight:700; font-size:14px; }
.socialOrderFoot { display:flex; gap:8px; padding:10px 14px; background:#fff; border-top:1px solid var(--line); }
.socialOrderCancel { border:1px solid #f3c1bd; border-radius:6px; padding:0 16px; background:#fff; color:var(--danger); font:inherit; cursor:pointer; }
.socialOrderSplit { position:relative; flex:1; display:flex; }
.socialOrderSplit .socialCreateOrder { flex:1; margin:0; border-radius:6px 0 0 6px; padding:10px; }
.socialCreateOrderMore { border:0; border-left:1px solid rgba(255,255,255,.4); border-radius:0 6px 6px 0; padding:0 12px; background:var(--blue); color:#fff; cursor:pointer; }
.socialOrderSplit button:disabled { opacity:.5; cursor:default; }
.socialOrderMenu { position:absolute; right:0; bottom:calc(100% + 4px); min-width:140px; background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); }
.socialOrderMenu button { display:block; width:100%; padding:9px 12px; border:0; background:none; text-align:left; font:inherit; cursor:pointer; }
.socialOrderMenu button:hover { background:#f5f9ff; }
@media (max-width: 1500px) {
  .socialPanes.withOrder { grid-template-columns:minmax(280px,1fr) minmax(380px,1.1fr) clamp(280px, 24vw, 380px); }
  .socialPanes.withOrder .socialList { display:none; }
}
@media (max-width: 1000px) {
  .socialPanes.withOrder { grid-template-columns:1fr; grid-auto-rows:minmax(420px,auto); overflow-y:auto; }
  .socialPanes.withOrder .socialChat { display:none; }
}

/* Kênh Social customer column: linked Sapo customer, phone matches, addresses and orders. */
.socialCustomer { padding:0; gap:0; background:#f3f4f6; }
.socialCustomerCardBody { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding-bottom:8px; }
.socialCustomer > .socialCreateOrder { margin:10px 14px 14px; }
.socialCustomer .socialCustomerHead { padding:14px; background:#fff; }
.socialCustomerHead strong.linked { color:var(--blue); }
.socialCustomerMeta { display:flex; align-items:center; gap:6px; }
.socialCustomerMeta em.group { font-style:normal; padding:0 6px; border:1px solid #9fdbb6; border-radius:4px; color:#1a8a4f; font-size:12px; }
.socialCustomerPad { padding:0 14px; }
.socialCustomerMatch { margin:0 10px; border:1px solid #b9e3c8; border-radius:8px; background:#fff; font-size:13px; }
.socialCustomerMatch > strong { display:block; padding:8px 12px; background:#f1faf4; border-bottom:1px solid #d7efe0; font-weight:500; }
.socialCustomerMatchRow { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; }
.socialCustomerMatchRow div { display:flex; flex-direction:column; }
.socialCustomerMatchRow b { color:var(--blue); font-weight:500; }
.socialCustomerMatchRow button { border:1px solid var(--blue); border-radius:6px; padding:5px 12px; background:#fff; color:var(--blue); font:inherit; cursor:pointer; }
.socialCustomerMatchRow button:disabled { opacity:.5; cursor:default; }
.socialCustomerCard { padding:10px 14px; background:#fff; display:flex; flex-direction:column; gap:6px; }
.socialCustomerCardHead { display:flex; align-items:center; justify-content:space-between; }
.socialCustomerCard h3 { margin:0; font-size:14px; }
.socialCustomerAdd { width:22px; height:22px; border:0; border-radius:50%; background:#9aa4b0; color:#fff; font-size:16px; line-height:22px; cursor:pointer; }
.socialCustomerAddress { display:flex; gap:8px; align-items:flex-start; font-size:13px; cursor:pointer; }
.socialCustomerAddress input { margin-top:3px; }
.socialCustomerAddress span { display:flex; flex-direction:column; }
.socialCustomerAddress b { font-weight:500; }
.socialCustomerOrder { display:grid; grid-template-columns:auto 1fr auto; gap:8px; padding:4px 0; font-size:13px; color:inherit; text-decoration:none; border-top:1px solid #f0f2f4; }
.socialCustomerOrder b { color:var(--blue); font-weight:500; }
.socialCustomerOrder span { color:var(--muted); }
.socialCustomerOrder em { font-style:normal; }
.socialCustomer .socialCustomerHead { position:relative; }
.socialCustomerDetailLink { position:absolute; top:12px; right:14px; font-size:13px; }
.socialDetailHead { display:flex; align-items:center; gap:8px; padding:12px 14px; background:#fff; border-bottom:1px solid var(--line); }
.socialDetailHead strong { font-size:16px; }
.socialDetailLink { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; }
.socialDetailIdentity { display:flex; align-items:center; gap:8px; min-width:0; padding:8px 10px; border-radius:6px; background:var(--panel-2); font-size:13px; }
.socialDetailIdentity.sapo { background:#eef6ff; }
.socialDetailIdentity.empty { color:var(--muted); }
.socialDetailIdentity span { display:flex; flex-direction:column; min-width:0; }
.socialDetailIdentity b { font-weight:500; }
.socialDetailSapo { display:grid !important; place-items:center; width:28px; height:28px; flex:none; border-radius:6px; background:#34c77b; color:#fff; font-weight:700; }
.socialDetailChain { color:#c5ccd4; font-size:18px; }
.socialDetailChain.on { color:var(--blue); }
.socialDetailActions { display:flex; justify-content:flex-end; gap:16px; font-size:13px; }
.socialDetailActions .danger { color:var(--danger); }
.socialDetailGrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.socialDetailBox { display:flex; flex-direction:column; gap:2px; padding:8px 12px; border-radius:6px; background:var(--panel-2); font-size:13px; }
.socialDetailBox.wide { grid-column:1 / -1; }
.socialDetailBox small { color:var(--muted); }
.socialDetailBox b { font-size:14px; font-weight:600; }
.socialDetailBox.muted { color:var(--muted); }
.socialCustomerCard h4 { margin:6px 0 0; font-size:13px; font-weight:600; }
.socialNote { position:relative; padding:8px 56px 8px 10px; border-radius:6px; background:#fff8e1; font-size:13px; }
.socialNote p { margin:0 0 2px; white-space:pre-wrap; }
.socialNote small { color:var(--muted); }
.socialNoteTools { position:absolute; top:6px; right:6px; display:flex; gap:2px; }
.socialNoteTools button { border:0; background:none; cursor:pointer; color:var(--muted); font-size:13px; }
.socialNoteEditor { display:flex; flex-direction:column; gap:6px; }
.socialNoteEditor textarea { width:100%; border:1px solid var(--line); border-radius:6px; padding:7px 9px; font:inherit; font-size:13px; }
.socialNoteActions { display:flex; justify-content:flex-end; gap:12px; }
.socialNoteSave { border:0; border-radius:6px; padding:5px 14px; background:var(--blue); color:#fff; font:inherit; cursor:pointer; }
.socialNoteSave:disabled { opacity:.5; }
.socialMediaRow { flex-direction:row !important; justify-content:space-between; align-items:center; border:0; text-align:left; font:inherit; cursor:pointer; }
.socialMediaRow span { color:var(--muted); font-size:20px; }
.socialMediaBody { padding:10px 14px; background:#fff; }
.socialMediaGroup { display:flex; flex-direction:column; gap:6px; }
.socialMediaGroup small { color:var(--muted); }
.socialMediaGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.socialMediaItem { aspect-ratio:1; overflow:hidden; border-radius:6px; background:var(--panel-2); }
.socialMediaItem img, .socialMediaItem video { width:100%; height:100%; object-fit:cover; display:block; }
.socialAssign { position:relative; }
.socialAssignButton { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid var(--line); border-radius:16px; padding:5px 12px; background:#fff; font:inherit; font-size:13px; cursor:pointer; }
.socialAssignMenu { position:absolute; right:0; top:calc(100% + 4px); z-index:6; min-width:220px; max-height:320px; overflow-y:auto; padding:6px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); }
.socialAssignMenu label { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; font-size:13px; cursor:pointer; }
.socialAssignMenu label:hover { background:#f5f9ff; }
.socialQuickToggle { width:36px; flex:none; border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--blue); font-weight:700; cursor:pointer; }
.socialQuickList { margin:0 16px; max-height:260px; overflow-y:auto; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); }
.socialQuickHead { position:sticky; top:0; display:flex; justify-content:space-between; padding:6px 10px; background:#f5f9ff; font-size:12px; }
.socialQuickItem { display:grid; grid-template-columns:auto 1fr auto; gap:8px; width:100%; padding:7px 10px; border:0; border-top:1px solid #f0f2f4; background:#fff; text-align:left; font:inherit; font-size:13px; cursor:pointer; }
.socialQuickItem:hover { background:#f5f9ff; }
.socialQuickItem b { color:var(--blue); font-weight:500; }
.socialQuickItem span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.socialQuickItem em { font-style:normal; color:var(--muted); }
.socialTypes .socialTagFilter + .socialTagFilter { margin-left:0; }
.socialMessage.hidden .socialBubble { opacity:.5; }
.socialMessage.deleted .socialBubble { text-decoration:line-through; opacity:.5; }
.socialCommentActions { display:flex; flex-wrap:wrap; gap:10px; padding-left:4px; }
.socialCommentActions button { border:0; padding:0; background:none; color:var(--muted); font:inherit; font-size:12px; cursor:pointer; }
.socialCommentActions button:hover { color:var(--blue); text-decoration:underline; }
.socialCommentActions button.danger:hover { color:var(--danger); }
.socialCommentActions button:disabled { opacity:.5; cursor:default; text-decoration:none; }
.socialReplyTo { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 16px; background:#f5f9ff; border-top:1px solid var(--line); font-size:13px; }
.socialReplyTo em { color:var(--muted); }
.socialReplyMode { display:flex; flex:none; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.socialReplyMode button { border:0; padding:4px 10px; background:#fff; font:inherit; font-size:12px; cursor:pointer; }
.socialReplyMode button.active { background:var(--blue); color:#fff; }
.socialImagePick { display:inline-grid; place-items:center; height:36px; cursor:pointer; font-weight:400; }
.socialImagePick.disabled { opacity:.5; cursor:default; }
.socialPendingImages { display:flex; gap:8px; padding:8px 16px 0; background:#fff; overflow-x:auto; }
.socialPendingImage { position:relative; flex:none; width:64px; height:64px; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.socialPendingImage img { width:100%; height:100%; object-fit:cover; }
.socialPendingImage button { position:absolute; top:2px; right:2px; width:18px; height:18px; border:0; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; line-height:18px; font-size:13px; cursor:pointer; padding:0; }
.socialShippingRequest { align-self:center; border:0; background:none; color:var(--blue); font:inherit; font-size:13px; cursor:pointer; }
.socialShippingRequest:disabled { opacity:.5; cursor:default; }
.socialSections { display:flex; gap:4px; }
.socialSections button { border:0; border-radius:6px; padding:6px 14px; background:none; font:inherit; font-size:16px; font-weight:600; color:var(--muted); cursor:pointer; }
.socialSections button.active { color:var(--text); background:var(--panel-2); }
.socialPosts { flex:1; min-height:0; display:flex; flex-direction:column; background:#fff; }
.socialNavGroup { margin:14px 4px 4px; padding-top:12px; border-top:1px solid #2d3c49; color:#8a99a8; font-size:12px; font-weight:600; letter-spacing:.04em; }
.socialNavBack { margin-top:10px; color:#8fb8ff; }
.socialTopTitle { margin:0; font-size:18px; }
.socialSettings { display:flex; flex:1; min-height:0; }
.socialSettingMenu { width:200px; flex:none; display:flex; flex-direction:column; gap:2px; padding:12px; border-right:1px solid var(--line); overflow:auto; }
.socialSettingMenu button { justify-content:flex-start; text-align:left; background:transparent; border-color:transparent; }
.socialSettingMenu button.active { background:var(--panel-2); color:var(--accent, #0088ff); font-weight:600; }
.socialSettingMain { flex:1; min-width:0; overflow:auto; padding:16px 20px; }
.socialSettingTitle { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.socialSettingTitle h3 { margin:0; }
.socialSettingBody { display:flex; flex-direction:column; gap:8px; }
.socialSettingHead { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.socialSettingGroup { margin:12px 0 0; font-size:14px; }
.socialSettingRow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.socialSettingRow.nested { margin-left:16px; }
.socialQuickText { flex:1; min-width:0; white-space:pre-wrap; overflow-wrap:anywhere; text-align:left; }
.socialRadio { display:flex; align-items:flex-start; gap:8px; }
.socialRadio input { margin-top:3px; }
.socialSettingIndent { display:flex; flex-direction:column; gap:6px; margin-left:26px; padding-left:12px; border-left:2px solid var(--line); }
.socialStaffPick { display:flex; flex-wrap:wrap; gap:6px 16px; }
.socialRatioRow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.socialRatioRow input[type=number] { width:72px; }
.socialRoleTable td:not(:first-child), .socialRoleTable th { text-align:center; }
.socialFulfillmentRow { display:flex; flex-direction:column; gap:6px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.socialFulfillmentRow textarea { width:100%; resize:vertical; font:inherit; }
.socialTransferText { width:100%; resize:vertical; font:inherit; }
.socialRecurringImage { max-width:240px; border-radius:8px; border:1px solid var(--line); }
.socialShopLayout { display:grid; grid-template-columns:minmax(300px, 1fr) 260px; gap:20px; align-items:start; }
.socialShopFields { display:flex; flex-wrap:wrap; gap:16px 32px; }
.socialShopField { display:flex; flex-direction:column; gap:4px; }
.socialShopPreview { width:100%; border-radius:12px; border:1px solid var(--line); }
@media (max-width: 900px) { .socialShopLayout { grid-template-columns:1fr; } .socialShopPreview { max-width:260px; } }
.socialInlineSelect { margin-left:8px; }
.socialWorkDay { display:grid; grid-template-columns:140px 1fr; gap:12px; align-items:start; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.socialWorkRanges { display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.socialDanger { color:#b42318; }
.socialOrderFee { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.socialOrderFee select { max-width:220px; }
.socialOnlineSwitch { display:flex; align-items:center; gap:10px; }
.socialOnlineBadge { padding:2px 8px; border-radius:10px; font-size:12px; background:var(--panel-2); color:var(--muted); }
.socialOnlineBadge.online { background:#e6f4ea; color:#0f7b3f; }
.socialOnlineBadge.offline { background:#fdecec; color:#b42318; }
.socialScriptDialog { width:min(880px, 100%); max-height:92vh; display:flex; flex-direction:column; gap:10px; padding:18px 20px; border-radius:10px; background:var(--panel, #fff); box-shadow:0 12px 40px rgba(0,0,0,.2); }
.socialScriptDialog h3 { margin:0; }
.socialScriptBody { overflow:auto; display:flex; flex-direction:column; gap:10px; padding-right:4px; }
.socialScriptKeyword { display:flex; flex-direction:column; gap:6px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.socialScriptVariant { display:flex; align-items:center; gap:10px; }
.socialScriptVariant img, .socialScriptVariant .socialLiveThumb { width:40px; height:40px; object-fit:cover; border-radius:6px; flex:none; }
.socialScriptVariantName { flex:1; min-width:0; }
.socialScriptQty { width:72px; }
.socialScriptSearch { position:relative; }
.socialScriptSearch input { width:100%; }
.socialScriptResults { position:absolute; z-index:5; left:0; right:0; top:100%; max-height:240px; overflow:auto; background:var(--panel, #fff); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.12); }
.socialScriptResults button { display:block; width:100%; text-align:left; padding:8px 10px; border:0; border-bottom:1px solid var(--line); background:transparent; }
.socialScriptCandidate { display:block; width:100%; text-align:left; padding:6px 8px; margin-top:4px; border:1px solid var(--line); border-radius:6px; background:transparent; }
.socialCloneDialog { width:min(560px, 100%); max-height:88vh; overflow:auto; }
.socialCloneList { display:flex; flex-direction:column; gap:6px; max-height:280px; overflow:auto; padding:4px 0; }
.socialFileButton { position:relative; overflow:hidden; cursor:pointer; }
.socialFileButton input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.socialFileButton.disabled { opacity:.5; pointer-events:none; }
.socialCustomers { display:flex; flex-direction:column; min-height:0; flex:1; }
.socialCustomerBar { flex-wrap:wrap; }
.socialCustomerBar input[type=search] { min-width:220px; flex:1; }
.socialCustomerLayout { flex:1; min-height:0; display:grid; grid-template-columns:1fr; gap:12px; padding:10px 20px; }
.socialCustomerLayout.withDetail { grid-template-columns:minmax(0, 1fr) 360px; }
.socialCustomerTable { overflow:auto; min-height:0; }
.socialCustomerRow { cursor:pointer; }
.socialCustomerRow:hover, .socialCustomerRow.active { background:var(--panel-2); }
.socialCustomerName { display:flex; align-items:center; gap:8px; }
.socialCustomerName img { width:28px; height:28px; border-radius:50%; flex:none; }
.socialCustomerDetail { overflow:auto; display:flex; flex-direction:column; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.socialCustomerDetail h3 { margin:0; }
.socialCustomerHead { display:flex; gap:10px; align-items:center; }
.socialCustomerHead img, .socialCustomerHead .socialLiveAvatar { width:48px; height:48px; border-radius:50%; }
.socialCustomerHead div { display:flex; flex-direction:column; gap:2px; }
@media (max-width: 900px) { .socialCustomerLayout.withDetail { grid-template-columns:1fr; } }
/* Kênh Social: Sapo Social look (menu icons, list, chat, composer, customer column). */
.socialNavItem.icon-inbox > i { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16v10H9l-5%204z%22/%3E%3Cpath%20d%3D%22M8%209h8M8%2012h5%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16v10H9l-5%204z%22/%3E%3Cpath%20d%3D%22M8%209h8M8%2012h5%22/%3E%3C/svg%3E"); }
.socialNavItem.icon-livestream > i { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%2213%22%20height%3D%2212%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M16%2010l5-3v10l-5-3%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%2213%22%20height%3D%2212%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M16%2010l5-3v10l-5-3%22/%3E%3C/svg%3E"); }
.socialNavItem.icon-chatbot > i { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%227%22%20width%3D%2216%22%20height%3D%2212%22%20rx%3D%223%22/%3E%3Cpath%20d%3D%22M12%203v4M9%2012h.01M15%2012h.01M9%2016h6%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%227%22%20width%3D%2216%22%20height%3D%2212%22%20rx%3D%223%22/%3E%3Cpath%20d%3D%22M12%203v4M9%2012h.01M15%2012h.01M9%2016h6%22/%3E%3C/svg%3E"); }
.socialNavItem.icon-tools > i { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a4%204%200%200%200-5.4%205.1L4%2016.7V20h3.3l5.3-5.3a4%204%200%200%200%205.1-5.4l-2.5%202.5-2.4-.6-.6-2.4z%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a4%204%200%200%200-5.4%205.1L4%2016.7V20h3.3l5.3-5.3a4%204%200%200%200%205.1-5.4l-2.5%202.5-2.4-.6-.6-2.4z%22/%3E%3C/svg%3E"); }
.socialNavItem.icon-customers > i { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M2.5%2020c.8-3.6%203.5-5.5%206.5-5.5s5.7%201.9%206.5%205.5%22/%3E%3Cpath%20d%3D%22M16%204.5a3.5%203.5%200%200%201%200%207M18%2014.5c1.7.7%203%202.5%203.5%205.5%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M2.5%2020c.8-3.6%203.5-5.5%206.5-5.5s5.7%201.9%206.5%205.5%22/%3E%3Cpath%20d%3D%22M16%204.5a3.5%203.5%200%200%201%200%207M18%2014.5c1.7.7%203%202.5%203.5%205.5%22/%3E%3C/svg%3E"); }
.socialNavItem.icon-posts > i { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203h9l4%204v14H6z%22/%3E%3Cpath%20d%3D%22M15%203v4h4M9%2012h7M9%2016h7%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203h9l4%204v14H6z%22/%3E%3Cpath%20d%3D%22M15%203v4h4M9%2012h7M9%2016h7%22/%3E%3C/svg%3E"); }
.socialNavItem.icon-reports > i { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020V10M10%2020V4M16%2020v-7M22%2020H2%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020V10M10%2020V4M16%2020v-7M22%2020H2%22/%3E%3C/svg%3E"); }
.socialNavItem.icon-settings > i { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22/%3E%3Cpath%20d%3D%22M19.4%2015a1.7%201.7%200%200%200%20.3%201.8l.1.1a2%202%200%201%201-2.8%202.8l-.1-.1a1.7%201.7%200%200%200-1.8-.3%201.7%201.7%200%200%200-1%201.5V21a2%202%200%201%201-4%200v-.1a1.7%201.7%200%200%200-1.1-1.5%201.7%201.7%200%200%200-1.8.3l-.1.1a2%202%200%201%201-2.8-2.8l.1-.1a1.7%201.7%200%200%200%20.3-1.8%201.7%201.7%200%200%200-1.5-1H3a2%202%200%201%201%200-4h.1a1.7%201.7%200%200%200%201.5-1.1%201.7%201.7%200%200%200-.3-1.8l-.1-.1a2%202%200%201%201%202.8-2.8l.1.1a1.7%201.7%200%200%200%201.8.3H9a1.7%201.7%200%200%200%201-1.5V3a2%202%200%201%201%204%200v.1a1.7%201.7%200%200%200%201%201.5%201.7%201.7%200%200%200%201.8-.3l.1-.1a2%202%200%201%201%202.8%202.8l-.1.1a1.7%201.7%200%200%200-.3%201.8V9a1.7%201.7%200%200%200%201.5%201H21a2%202%200%201%201%200%204h-.1a1.7%201.7%200%200%200-1.5%201z%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22/%3E%3Cpath%20d%3D%22M19.4%2015a1.7%201.7%200%200%200%20.3%201.8l.1.1a2%202%200%201%201-2.8%202.8l-.1-.1a1.7%201.7%200%200%200-1.8-.3%201.7%201.7%200%200%200-1%201.5V21a2%202%200%201%201-4%200v-.1a1.7%201.7%200%200%200-1.1-1.5%201.7%201.7%200%200%200-1.8.3l-.1.1a2%202%200%201%201-2.8-2.8l.1-.1a1.7%201.7%200%200%200%20.3-1.8%201.7%201.7%200%200%200-1.5-1H3a2%202%200%201%201%200-4h.1a1.7%201.7%200%200%200%201.5-1.1%201.7%201.7%200%200%200-.3-1.8l-.1-.1a2%202%200%201%201%202.8-2.8l.1.1a1.7%201.7%200%200%200%201.8.3H9a1.7%201.7%200%200%200%201-1.5V3a2%202%200%201%201%204%200v.1a1.7%201.7%200%200%200%201%201.5%201.7%201.7%200%200%200%201.8-.3l.1-.1a2%202%200%201%201%202.8%202.8l-.1.1a1.7%201.7%200%200%200-.3%201.8V9a1.7%201.7%200%200%200%201.5%201H21a2%202%200%201%201%200%204h-.1a1.7%201.7%200%200%200-1.5%201z%22/%3E%3C/svg%3E"); }
.socialNavItem.icon-main-orders > i { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%2214%22%20height%3D%2218%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M9%203v3h6V3M9%2011h6M9%2015h6%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%2214%22%20height%3D%2218%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M9%203v3h6V3M9%2011h6M9%2015h6%22/%3E%3C/svg%3E"); }
.socialNavItem.icon-main-shipments > i { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207h11v9H3zM14%2010h4l3%203v3h-7z%22/%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2218%22%20r%3D%221.8%22/%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2218%22%20r%3D%221.8%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207h11v9H3zM14%2010h4l3%203v3h-7z%22/%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2218%22%20r%3D%221.8%22/%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2218%22%20r%3D%221.8%22/%3E%3C/svg%3E"); }
.socialNavItem.icon-main-products > i { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l8%204.5v9L12%2021l-8-4.5v-9z%22/%3E%3Cpath%20d%3D%22M4%207.5l8%204.5%208-4.5M12%2012v9%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l8%204.5v9L12%2021l-8-4.5v-9z%22/%3E%3Cpath%20d%3D%22M4%207.5l8%204.5%208-4.5M12%2012v9%22/%3E%3C/svg%3E"); }
.socialNavItem.icon-main-customers > i { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M4%2021c1-4%204-6%208-6s7%202%208%206%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M4%2021c1-4%204-6%208-6s7%202%208%206%22/%3E%3C/svg%3E"); }
.socialNavItem.icon-back > i { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%205l-7%207%207%207%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%205l-7%207%207%207%22/%3E%3C/svg%3E"); }

.socialNavItem { display:flex; align-items:center; gap:12px; }
.socialNavItem > i { flex:none; width:22px; height:22px; background:currentColor; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:contain; mask-size:contain; }
.socialNavItem > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.socialNav .navButton.active { background:#0a7cff; border-color:#0a7cff; color:#fff; }
.socialBrand { display:flex; align-items:baseline; gap:2px; }
.socialBrand small { font-size:16px; font-weight:400; color:#cfd8e3; }
.nav.collapsed.socialNav .navItems { display:grid; }
.nav.collapsed.socialNav .navItems > .socialNavItem > span, .nav.collapsed.socialNav .socialNavGroup { display:none; }
.nav.collapsed.socialNav .socialNavItem { justify-content:center; padding-inline:0; }
.socialTop { gap:12px; padding:8px 16px; }
.socialTopTitle { font-size:20px; font-weight:600; }
.socialTopSpacer { flex:1; }
.socialCollapse, .socialSyncStatus, .socialRefresh, .socialFunnel, .socialAssignButton { flex:none; border:0; background:currentColor; cursor:pointer; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; }
.socialCollapse { width:28px; height:28px; color:#7a8594; -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%206l-6%206%206%206M19%206l-6%206%206%206%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%206l-6%206%206%206M19%206l-6%206%206%206%22/%3E%3C/svg%3E"); -webkit-mask-size:22px; mask-size:22px; }
.socialSyncStatus { width:30px; height:30px; color:#0a7cff; -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2011a8%208%200%200%200-14.9-3M4%205v4h4M4%2013a8%208%200%200%200%2014.9%203M20%2019v-4h-4%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2011a8%208%200%200%200-14.9-3M4%205v4h4M4%2013a8%208%200%200%200%2014.9%203M20%2019v-4h-4%22/%3E%3C/svg%3E"); -webkit-mask-size:22px; mask-size:22px; }
.socialSyncStatus.warn { color:#d97706; }
.socialPagePick { min-width:220px; max-width:340px; border:1px solid #cfd8e3; border-radius:18px; padding:6px 14px; font:inherit; font-weight:500; background:#fff; }
.socialChips { align-items:center; }
.socialChips button { border-radius:16px; padding:5px 14px; }
.socialChips .socialMoreChip { letter-spacing:1px; color:#7a8594; }
.socialChips .socialFunnel { width:30px; height:30px; margin-left:auto; padding:0; border-radius:0; color:#7a8594; background:#7a8594; -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205h18l-7%208v6l-4%202v-8z%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205h18l-7%208v6l-4%202v-8z%22/%3E%3C/svg%3E"); -webkit-mask-size:20px; mask-size:20px; }
.socialChips .socialFunnel.on { background:#0a7cff; }
.socialMorePanel { display:flex; flex-direction:column; gap:8px; margin:8px 12px 0; padding:10px; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.06); }
.socialMorePanel label { display:flex; align-items:center; gap:8px; font-size:13px; }
.socialMorePanel select { flex:1; }
.socialMoreGroup { display:flex; flex-wrap:wrap; gap:6px; }
.socialMoreGroup button { border:1px solid var(--line); border-radius:14px; padding:3px 10px; background:#fff; font:inherit; font-size:12px; cursor:pointer; }
.socialMoreGroup button.active { background:#e6f3ff; border-color:#0a7cff; color:#0a7cff; }
.socialMoreGroup .socialMoreTag { --tag:#5b6b7f; border-color:var(--tag); color:var(--tag); }
.socialMoreGroup .socialMoreTag.active { background:var(--tag); color:#fff; }
.socialTypes { gap:18px; padding:10px 14px 0; border-bottom:1px solid var(--line); }
.socialTypeTab { position:relative; display:flex; align-items:center; gap:6px; padding:6px 2px 8px !important; font-size:15px !important; color:#4b5563; }
.socialTypeTab.active { color:#0a7cff !important; }
.socialTabBadge { min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#e53935; color:#fff; font-size:11px; font-style:normal; font-weight:600; line-height:18px; text-align:center; }
.socialSearch input { border-radius:4px; }
.socialRow { padding:14px 12px; gap:12px; }
.socialRow.active { background:#f0f2f5; box-shadow:inset 3px 0 0 #0a7cff; }
.socialRowAvatar .socialAvatar { width:50px; height:50px; }
.socialDot { top:1px; right:1px; width:12px; height:12px; }
.socialKind { width:18px; height:18px; right:-3px; bottom:-3px; background:#a334fa linear-gradient(135deg,#0a7cff,#a334fa); }
.socialKind.comment { background:#42b72a; }
.socialRowTop strong { font-weight:500; font-size:15px; }
.socialRow.unread .socialRowTop strong { font-weight:700; }
.socialRowMid { display:flex; align-items:center; gap:8px; min-width:0; }
.socialRowMid .socialSnippet { flex:1; min-width:0; color:#344054; }
.socialReplied { display:inline-block; width:14px; height:14px; margin-right:4px; vertical-align:-2px; background:#0a7cff; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%208L4%2013l6%205M4%2013h10a6%206%200%200%201%206%206%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%208L4%2013l6%205M4%2013h10a6%206%200%200%201%206%206%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialRowIcons { display:flex; gap:4px; flex:none; }
.socialRowIcons i { width:18px; height:18px; border-radius:50%; }
.socialHasPhone { position:relative; background:#22a45d; }
.socialHasPhone::after, .socialHasOrder::after { content:""; position:absolute; inset:3px; background:#fff; -webkit-mask:var(--glyph) center/contain no-repeat; mask:var(--glyph) center/contain no-repeat; }
.socialHasPhone { --glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%204h4l2%205-2.5%201.5a11%2011%200%200%200%205%205L15%2013l5%202v4a2%202%200%200%201-2%202A16%2016%200%200%201%203%206a2%202%200%200%201%202-2%22/%3E%3C/svg%3E"); }
.socialHasOrder { position:relative; background:#f5a623; --glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%207h12l-1%2013H7z%22/%3E%3Cpath%20d%3D%22M9%207a3%203%200%200%201%206%200%22/%3E%3C/svg%3E"); }
.socialTag { border-radius:3px; padding:1px 6px; font-weight:500; }
.socialAvatar.noPhoto { background:#e4e6eb; }
.socialAvatar.noPhoto::after { content:""; position:absolute; inset:18% 18% 0; background:#b8bcc4; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M4%2021c1-4%204-6%208-6s7%202%208%206%22/%3E%3C/svg%3E") center bottom/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M4%2021c1-4%204-6%208-6s7%202%208%206%22/%3E%3C/svg%3E") center bottom/contain no-repeat; }
.socialChatHead { gap:10px; padding:8px 14px; }
.socialChatWho strong { font-size:16px; font-weight:600; }
.socialChatWho span { font-size:12px; }
.socialAssign { position:relative; margin-right:auto; }
.socialAssignButton { position:relative; width:40px; height:40px; border-radius:50%; background:#eef4ff; }
.socialAssignButton::before { content:""; position:absolute; inset:9px; background:#0a7cff; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M2.5%2020c.8-3.6%203.5-5.5%206.5-5.5s5.7%201.9%206.5%205.5M19%208v6M16%2011h6%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M2.5%2020c.8-3.6%203.5-5.5%206.5-5.5s5.7%201.9%206.5%205.5M19%208v6M16%2011h6%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialAssignButton .socialTabBadge { position:absolute; top:-2px; right:-2px; background:#0a7cff; }
.socialAssigned { color:var(--muted); font-size:12px; }
/* Ảnh nhân viên (17/10/2026): beside the name of who the chat is given to, and in the staff menus. */
.staffFace { flex:none; width:24px; height:24px; border-radius:50%; object-fit:cover; background:#eef2f6; }
.staffFace.initials { display:inline-flex; align-items:center; justify-content:center; background:hsl(var(--face-hue, 210) 55% 88%); color:hsl(var(--face-hue, 210) 45% 30%); font-size:10px; font-weight:600; letter-spacing:0; line-height:1; }
.socialAssigned { display:flex; align-items:center; gap:10px; min-width:0; }
.socialAssignedStaff { display:inline-flex; align-items:center; gap:6px; min-width:0; color:#344054; font-size:13px; white-space:nowrap; }
.socialAssignedStaff .staffFace { width:28px; height:28px; }
.socialAssignMenu label .staffFace, .socialBulkStaff .staffFace { flex:none; width:26px; height:26px; }
.socialChatSub { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 14px; background:#fff; border-bottom:1px solid var(--line); font-size:13px; color:#344054; }
.socialChatSub b { color:#0a7cff; font-weight:500; }
.socialRefresh { width:24px; height:24px; background:#0a7cff; -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2011a8%208%200%200%200-14.9-3M4%205v4h4M4%2013a8%208%200%200%200%2014.9%203M20%2019v-4h-4%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2011a8%208%200%200%200-14.9-3M4%205v4h4M4%2013a8%208%200%200%200%2014.9%203M20%2019v-4h-4%22/%3E%3C/svg%3E"); -webkit-mask-size:18px; mask-size:18px; }
.socialLoadOlder { align-self:center; border:1px solid #d0d5dd; border-radius:16px; padding:5px 14px; background:#fff; color:#0a7cff; font:inherit; font-size:13px; cursor:pointer; }
.socialDay { background:none; color:#667085; font-size:13px; padding:4px 0; }
.socialPhone { display:inline-block; margin:0 1px; padding:0 8px; border:0; border-radius:10px; background:#22a45d; color:#fff; font:inherit; font-weight:600; cursor:pointer; }
.socialMessage.in .socialBubble { border:1px solid #e4e7ec; }
.socialTagBar { align-items:center; gap:8px; padding:8px 14px; }
.socialTagList { flex:1; min-width:0; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
.socialTagBar.open .socialTagList { flex-wrap:wrap; overflow:visible; }
.socialTagToggle { display:inline-flex; align-items:center; gap:6px; max-width:130px; border:1px solid #e4e7ec; border-radius:4px; padding:4px 10px; color:#344054; background:#fff; }
.socialTagToggle i { flex:none; width:10px; height:10px; border-radius:50%; background:var(--tag); }
.socialTagToggle span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.socialTagToggle.active { background:#fff; color:#344054; border-color:var(--tag); box-shadow:inset 0 0 0 1px var(--tag); font-weight:600; }
.socialAllTags { flex:none; border:1px solid #0a7cff; border-radius:4px; padding:4px 10px; background:#fff; color:#0a7cff; font:inherit; font-size:12px; cursor:pointer; }
.socialComposer { align-items:center; gap:6px; padding:8px 14px 12px; }
.socialComposer textarea { border-radius:20px; background:#f2f4f7; border-color:#f2f4f7; }
.socialComposerIcon { position:relative; flex:none; width:30px; height:30px; border:0; background:none; cursor:pointer; }
.socialComposerIcon::before { content:""; position:absolute; inset:4px; background:#667085; -webkit-mask:var(--glyph) center/contain no-repeat; mask:var(--glyph) center/contain no-repeat; }
.socialComposerIcon.plus { --glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%208v8M8%2012h8%22/%3E%3C/svg%3E"); }
.socialComposerIcon.image { --glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2210%22%20r%3D%222%22/%3E%3Cpath%20d%3D%22M21%2016l-5-5-9%209%22/%3E%3C/svg%3E"); }
.socialComposerIcon.emoji { --glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M8%2014s1.5%202%204%202%204-2%204-2M9%209h.01M15%209h.01%22/%3E%3C/svg%3E"); }
.socialComposerIcon.disabled, .socialComposerIcon:disabled { opacity:.4; cursor:default; }
.socialComposerIcon input { display:none; }
.socialEmojiWrap { position:relative; }
.socialEmojiPanel { position:absolute; bottom:38px; right:0; z-index:5; display:grid; grid-template-columns:repeat(8, 30px); gap:2px; padding:6px; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.12); }
.socialEmojiPanel button { border:0; background:none; font-size:18px; cursor:pointer; border-radius:4px; }
.socialEmojiPanel button:hover { background:#f2f4f7; }
.socialLike { flex:none; width:36px; height:36px; border:0; background:#0a7cff; cursor:pointer; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2011v9H4v-9zM7%2011l4-8a2%202%200%200%201%202.8%202.2L13%209h6a2%202%200%200%201%202%202.3l-1.3%207A2%202%200%200%201%2017.7%2020H7%22/%3E%3C/svg%3E") center/26px no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2011v9H4v-9zM7%2011l4-8a2%202%200%200%201%202.8%202.2L13%209h6a2%202%200%200%201%202%202.3l-1.3%207A2%202%200%200%201%2017.7%2020H7%22/%3E%3C/svg%3E") center/26px no-repeat; }
.socialLike:disabled { opacity:.4; cursor:default; }
.socialCustomer { position:relative; }
.socialCustomerWho { flex:1; min-width:0; }
.socialCustomerNameRow { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.socialCustomerNameRow strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:18px; color:#0a7cff; }
.socialCustomer .socialCustomerDetailLink { position:static; flex:none; color:#0a7cff; }
.socialCustomerPhone { display:flex; align-items:center; gap:10px; padding:4px 14px 12px; background:#fff; font-size:15px; }
.socialCustomerPhone i { width:18px; height:18px; background:#7a8594; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%204h4l2%205-2.5%201.5a11%2011%200%200%200%205%205L15%2013l5%202v4a2%202%200%200%201-2%202A16%2016%200%200%201%203%206a2%202%200%200%201%202-2%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%204h4l2%205-2.5%201.5a11%2011%200%200%200%205%205L15%2013l5%202v4a2%202%200%200%201-2%202A16%2016%200%200%201%203%206a2%202%200%200%201%202-2%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialCustomer > .socialCreateOrder.floating { position:sticky; bottom:14px; align-self:flex-end; display:inline-flex; align-items:center; gap:8px; margin:auto 14px 14px auto; padding:12px 26px; border-radius:26px; box-shadow:0 6px 18px rgba(10,124,255,.35); }
.socialCreateOrder.floating i { width:18px; height:18px; background:#fff; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%207h12l-1%2013H7z%22/%3E%3Cpath%20d%3D%22M9%207a3%203%200%200%201%206%200%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%207h12l-1%2013H7z%22/%3E%3Cpath%20d%3D%22M9%207a3%203%200%200%201%206%200%22/%3E%3C/svg%3E") center/contain no-repeat; }

.socialSendError { width:16px; height:16px; background:#e02424; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202L1%2021h22z%22%20fill%3D%22black%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202L1%2021h22z%22%20fill%3D%22black%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialSeen { align-self:flex-end; display:inline-flex; margin-top:2px; }
.socialSeen .socialAvatar, .socialSeen img { width:14px !important; height:14px !important; min-width:14px; font-size:8px; }
/* Kênh Social: list toolbar closer to Sapo (one chip row, tab icons with badges, search icon, messenger badge). */
.socialChips { flex-wrap:nowrap; }
.socialChips button { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:0 1 auto; }
.socialChips .socialFunnel, .socialChips .socialMoreChip { flex:none; }
.socialTypes { align-items:center; gap:14px; }
.socialTabIcon { position:relative; width:22px; height:22px; flex:none; }
.socialTabIcon::before { content:""; position:absolute; inset:0; background:currentColor; -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat; }
.socialTabIcon .socialTabBadge { position:absolute; top:-8px; left:-6px; z-index:1; }
.socialTypeTools { margin-left:auto; display:flex; gap:6px; padding-bottom:4px; }
.socialToolIcon { width:32px; height:32px; border:1px solid transparent !important; border-radius:4px !important; background:transparent !important; padding:0 !important; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.socialToolIcon::before { content:""; width:20px; height:20px; background:#6b7280; -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat; }
.socialToolIcon.on { border-color:#0a7cff !important; background:#edf6ff !important; }
.socialToolIcon.on::before { background:#0a7cff; }
.socialSearch { align-items:stretch; }
.socialSearch input.socialSearchBox { padding-left:32px; background:#fff var(--search) 9px center/16px no-repeat; }
.socialPickToggle { background:#f3f4f6; border-color:#e5e7eb; border-radius:4px; color:#1f2933; }
.socialSearch .socialSort { border:0; background:transparent; padding:0 4px; }
.socialKind { background:linear-gradient(135deg,#0a7cff,#a334fa 70%,#ff5f7e); }
.socialKind::after { content:""; position:absolute; inset:2px; background:#fff; -webkit-mask:var(--glyph) center/contain no-repeat; mask:var(--glyph) center/contain no-repeat; }
.socialKind { --glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M4%2014l5-5%203%203%206-5-5%206-3-3z%22%20fill=%22black%22/%3E%3C/svg%3E"); }
.socialKind.comment { background:#0a7cff; --glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%205h16v10H9l-5%204z%22%20fill=%22black%22/%3E%3C/svg%3E"); }
.socialTypeTab.all .socialTabIcon { --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2013h5l2%203h4l2-3h5%22/%3E%3Cpath%20d=%22M5%205h14l2%208v6H3v-6z%22/%3E%3C/svg%3E"); }
.socialTypeTab.message .socialTabIcon { --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%203C7%203%203%206.6%203%2011c0%202.4%201.2%204.6%203.2%206v4l3.6-2c.7.1%201.4.2%202.2.2%205%200%209-3.6%209-8s-4-8-9-8z%22/%3E%3Cpath%20d=%22M7.5%2013l3-3%202.5%202%203.5-3%22/%3E%3C/svg%3E"); }
.socialTypeTab.comment .socialTabIcon { --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%204h16v12H9l-5%204z%22/%3E%3C/svg%3E"); }
.socialToolIcon.unread { --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%225%22%20width=%2218%22%20height=%2214%22%20rx=%222%22/%3E%3Cpath%20d=%22M3%207l9%206%209-6%22/%3E%3C/svg%3E"); }
.socialToolIcon.advanced { --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%206h16M7%2012h10M10%2018h4%22/%3E%3C/svg%3E"); }
.socialSearch { --search:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2211%22%20cy=%2211%22%20r=%226.5%22/%3E%3Cpath%20d=%22M16%2016l4.5%204.5%22/%3E%3C/svg%3E"); }
.socialCustomerHead .socialCustomerNameRow { flex-direction:row; align-items:baseline; justify-content:space-between; }
.socialCustomerMeta em.carrier { font-style:normal; padding:0 6px; border:1px solid #9fdbb6; border-radius:4px; color:#1a8a4f; font-size:12px; }
/* Kênh Social: Địa chỉ (F2) add / edit. */
.socialCustomerAddressRow { display:flex; align-items:flex-start; gap:6px; }
.socialCustomerAddressRow .socialCustomerAddress { flex:1; min-width:0; }
.socialAddressEdit { flex:none; width:28px; height:28px; border:0; border-radius:4px; background:transparent; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.socialAddressEdit::before { content:""; width:18px; height:18px; background:#a3a8af; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020h4L19%209l-4-4L4%2016z%22/%3E%3Cpath%20d%3D%22M13.5%206.5l4%204%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020h4L19%209l-4-4L4%2016z%22/%3E%3Cpath%20d%3D%22M13.5%206.5l4%204%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialAddressEdit:hover:not(:disabled)::before { background:#0088ff; }
.socialCustomer .socialAddressEdit { padding:0; min-height:0; height:28px; }
.socialAddressEdit::before { flex:none; }
.socialAddressEdit:disabled { opacity:.4; cursor:not-allowed; }
.socialAddressForm { display:grid; gap:8px; }
.socialAddressField { display:grid; gap:3px; font-size:12px; color:#6b7280; }
.socialAddressField input, .socialAddressField select { width:100%; min-width:0; border:1px solid var(--line); border-radius:4px; padding:7px 9px; font:inherit; font-size:13px; color:#1f2933; background:#fff; }
.socialAddressField input:focus, .socialAddressField select:focus { outline:none; border-color:#0088ff; }
.socialAddressActions { display:flex; justify-content:flex-end; gap:8px; }
.socialAddressActions button { border:1px solid #0088ff; background:#0088ff; color:#fff; border-radius:4px; padding:6px 14px; font:inherit; font-size:13px; cursor:pointer; }
.socialAddressActions button.ghost { background:#fff; color:#1f2933; border-color:var(--line); }
.socialAddressActions button:disabled { opacity:.6; cursor:not-allowed; }
/* Kênh Social: Cài đặt bộ lọc nhanh (default / on top / on the left / custom). */
.socialToolIcon.settings { --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%207h10M18%207h2M4%2017h2M10%2017h10%22/%3E%3Ccircle%20cx=%2216%22%20cy=%227%22%20r=%222%22/%3E%3Ccircle%20cx=%228%22%20cy=%2217%22%20r=%222%22/%3E%3C/svg%3E"); }
.socialTypeTab.has_unread .socialTabIcon { --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%225%22%20width=%2218%22%20height=%2214%22%20rx=%222%22/%3E%3Cpath%20d=%22M3%207l9%206%209-6%22/%3E%3C/svg%3E"); }
.socialTypeTab.has_unreply .socialTabIcon { --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%205h16v10H9l-5%204z%22/%3E%3Cpath%20d=%22M12%208v3M12%2013.5v.01%22/%3E%3C/svg%3E"); }
.socialTypeTab.has_phone .socialTabIcon { --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M5%204h4l2%205-2.5%201.5a11%2011%200%200%200%205%205L15%2013l5%202v4a2%202%200%200%201-2%202A16%2016%200%200%201%203%206a2%202%200%200%201%202-2%22/%3E%3C/svg%3E"); }
.socialTypeTab.has_order .socialTabIcon { --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6%207h12l-1%2013H7z%22/%3E%3Cpath%20d=%22M9%207a3%203%200%200%201%206%200%22/%3E%3C/svg%3E"); }
.socialTypeTab.assigned_to_me .socialTabIcon { --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%228%22%20r=%224%22/%3E%3Cpath%20d=%22M4%2021c1-4%204-6%208-6s7%202%208%206%22/%3E%3C/svg%3E"); }
.socialTypes.horizontal, .socialTypes.custom { gap:10px; overflow-x:auto; scrollbar-width:thin; }
.socialTypes.horizontal .socialTypeTab, .socialTypes.custom .socialTypeTab { flex-direction:column; gap:2px; font-size:11px !important; white-space:nowrap; }
.socialTypes.horizontal .socialTypeTab span, .socialTypes.custom .socialTypeTab span { font-size:11px; }
.socialTypeTab:disabled { opacity:.4; cursor:not-allowed; }
.socialQuickSettingsWrap { position:relative; display:inline-flex; }
.socialQuickSettings { position:absolute; top:36px; right:0; z-index:40; width:280px; padding:12px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgb(0 0 0 / 16%); display:grid; gap:8px; font-size:13px; }
.socialQuickSettingsHead { display:flex; align-items:center; justify-content:space-between; }
.socialQuickSettingsHead button { border:0; background:none; font-size:20px; line-height:1; cursor:pointer; color:#6b7280; }
.socialQuickSettings hr { width:100%; border:0; border-top:1px solid var(--line); margin:2px 0; }
.socialQuickMode { display:flex; align-items:center; gap:8px; cursor:pointer; }
.socialQuickMode input, .socialQuickItem input { min-height:0; width:16px; height:16px; margin:0; accent-color:#0088ff; }
.socialQuickItems { display:grid; gap:2px; padding-left:24px; }
.socialQuickItem { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:3px 0; }
.socialQuickItem label { display:flex; align-items:center; gap:8px; cursor:pointer; min-width:0; }
.socialQuickMove { display:inline-flex; gap:2px; }
.socialQuickMove button { width:24px; height:22px; border:1px solid var(--line); border-radius:4px; background:#fff; cursor:pointer; font-size:12px; line-height:1; }
.socialQuickMove button:disabled { opacity:.35; cursor:not-allowed; }
.socialList.quickVertical { flex-direction:row; }
.socialListMain { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; }
.socialList.quickVertical > .socialQuickColumn { flex:none; width:64px; display:flex; flex-direction:column; gap:4px; padding:10px 4px; border-right:1px solid var(--line); background:#fafbfc; overflow-y:auto; }
.socialQuickColumn .socialTypeTab { flex-direction:column; gap:2px; padding:6px 2px !important; border:0 !important; border-radius:6px !important; background:none; font-size:10px !important; text-align:center; cursor:pointer; color:#4b5563; }
.socialQuickColumn .socialTypeTab span { font-size:10px; line-height:1.2; }
.socialQuickColumn .socialTypeTab.active { background:#e6f3ff !important; color:#0a7cff !important; }
.socialTypes.vertical { justify-content:space-between; }
.socialQuickHint { font-weight:600; color:#0a7cff; padding:6px 0 8px; }
/* Kênh Social: unread rows as Sapo (red dot on the avatar, bold name, snippet and time). */
.socialRowAvatar .socialDot { top:0; right:0; z-index:1; width:10px; height:10px; border:0; outline:1px solid #fff; background:#ff4d4d; }
.socialRow.unread .socialRowTop strong { color:#0f1824; font-weight:700; }
.socialRow.unread .socialSnippet { color:#0f1824; font-weight:700; }
.socialRow.unread .socialRowTop time { color:#212b35; font-weight:700; }
/* Kênh Social: list column as wide as Sapo's (about 30% of the window, 340–495px), so the chips and tools fit one row. */
.socialPanes { grid-template-columns:clamp(340px, 32vw, 495px) minmax(0,1fr) clamp(260px, 22vw, 340px); }
.socialChips button { flex:none; }
.socialChips button:nth-child(3) { flex:0 1 auto; min-width:48px; }
@media (max-width: 1100px) { .socialPanes { grid-template-columns:clamp(300px, 34vw, 380px) minmax(0,1fr); } }
@media (max-width: 720px) { .socialPanes { grid-template-columns:1fr; } }
/* Kênh Social: chat header actions (Sapo's six buttons) and their dialogs. */
.socialHeadActions { margin-left:auto; display:flex; align-items:center; gap:8px; position:relative; }
.socialChatHead > .socialHeadActions { flex:none; flex-direction:row; min-width:auto; }
.socialHeadIcon { position:relative; width:28px; height:28px; min-height:0; padding:0; border:1px solid #d3d5d7; border-radius:6px; background:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.socialHeadIcon::before { content:""; width:18px; height:18px; background:#46515f; -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat; }
.socialHeadIcon:hover:not(:disabled), .socialHeadIcon.on { background:#f2f9ff; border-color:#99cfff; }
.socialHeadIcon:hover:not(:disabled)::before, .socialHeadIcon.on::before { background:#0088ff; }
.socialHeadIcon.block.on::before { background:#e02424; }
.socialHeadIcon:disabled { opacity:.45; cursor:not-allowed; }
.socialHeadCount { position:absolute; top:-7px; right:-7px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:#0088ff; color:#fff; font-size:10px; font-style:normal; line-height:18px; text-align:center; }
.socialChatNameRow { display:flex; align-items:center; gap:6px; min-width:0; }
.socialGender { font-style:normal; font-size:14px; line-height:1; }
.socialGender.male { color:#0088ff; } .socialGender.female { color:#e0457b; }
.socialBlockedChip { font-style:normal; font-size:11px; color:#e02424; border:1px solid #f5b5b5; border-radius:4px; padding:0 5px; }
.socialModalBackdrop { position:fixed; inset:0; z-index:200; background:rgb(15 24 36 / 45%); display:flex; align-items:center; justify-content:center; padding:16px; }
.socialModal { width:min(480px, 100%); max-height:calc(100vh - 32px); overflow:auto; background:#fff; border-radius:8px; box-shadow:0 12px 40px rgb(0 0 0 / 25%); padding:16px; display:grid; gap:12px; }
.socialModal.wide { width:min(1100px, 100%); }
.socialModalHead { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:16px; }
.socialModalHead button { border:0; background:none; font-size:22px; line-height:1; cursor:pointer; color:#6b7280; }
.socialModal textarea { width:100%; min-width:0; border:1px solid var(--line); border-radius:4px; padding:7px 9px; font:inherit; font-size:13px; resize:vertical; }
.socialAddressActions button.danger { background:#e02424; border-color:#e02424; }
.socialHistoryGrid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
@media (max-width: 900px) { .socialHistoryGrid { grid-template-columns:1fr; } }
.socialHistoryCol { border:1px solid var(--line); border-radius:6px; padding:10px; display:grid; gap:8px; align-content:start; max-height:60vh; overflow:auto; }
.socialHistoryCol h4 { margin:0; font-size:14px; }
.socialHistoryRow { display:grid; gap:4px; font-size:13px; padding-bottom:8px; border-bottom:1px solid #f0f2f4; }
.socialHistoryRow time { color:#6b7280; font-size:12px; }
.socialHistoryDot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.socialHistoryDot.green { background:#0fd186; } .socialHistoryDot.red { background:#eb5757; }
.socialHeadIcon.history { --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2012a9%209%200%201%200%203-6.7L3%208%22/%3E%3Cpath%20d=%22M3%203v5h5%22/%3E%3Cpath%20d=%22M12%207v5l3%202%22/%3E%3C/svg%3E"); }
.socialHeadIcon.unread { --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%225%22%20width=%2218%22%20height=%2214%22%20rx=%222%22/%3E%3Cpath%20d=%22M3%207l9%206%209-6%22/%3E%3C/svg%3E"); }
.socialHeadIcon.filter { --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%2013h4l2%203h4l2-3h4%22/%3E%3Cpath%20d=%22M6%205h12l2%208v6H4v-6z%22/%3E%3C/svg%3E"); }
.socialHeadIcon.meta { --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2015c0-4%202-8%204.5-8C11%207%2013%2017%2016.5%2017%2019%2017%2021%2014%2021%2011c0-2.5-1.2-4-3-4-3%200-5%205-6%207-1%202-3%204-5%204-2.2%200-4-1.5-4-3z%22/%3E%3C/svg%3E"); }
.socialHeadIcon.report { --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M12%207v6M12%2016.5v.01%22/%3E%3C/svg%3E"); }
.socialHeadIcon.block { --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M5.6%205.6l12.8%2012.8%22/%3E%3C/svg%3E"); }
/* Kênh Social: Thư viện ảnh and "@" gửi ảnh nhanh. */
.socialComposerIcon.gallery { --glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%227%22%20y=%223%22%20width=%2214%22%20height=%2214%22%20rx=%222%22/%3E%3Cpath%20d=%22M3%207v12a2%202%200%200%200%202%202h12%22/%3E%3Ccircle%20cx=%2212%22%20cy=%228%22%20r=%221.5%22/%3E%3Cpath%20d=%22M21%2014l-4-4-7%207%22/%3E%3C/svg%3E"); }
.socialAtStrip { display:flex; gap:6px; overflow-x:auto; padding:4px 2px; }
.socialAtImage { flex:none; width:64px; height:64px; padding:0; border:2px solid transparent; border-radius:6px; background:#f3f4f6; cursor:pointer; overflow:hidden; }
.socialAtImage img { width:100%; height:100%; object-fit:cover; display:block; }
.socialAtImage.active { border-color:#0088ff; }
.socialLibraryTabs { display:flex; gap:4px; border-bottom:1px solid var(--line); }
.socialLibraryTabs button { border:0; border-bottom:2px solid transparent; background:none; padding:8px 12px; font:inherit; cursor:pointer; color:#4b5563; }
.socialLibraryTabs button.active { color:#0088ff; border-bottom-color:#0088ff; font-weight:600; }
.socialLibraryBar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.socialLibraryBar input, .socialLibraryBar select { min-width:0; flex:1; max-width:320px; border:1px solid var(--line); border-radius:4px; padding:7px 9px; font:inherit; font-size:13px; }
.socialLibraryGrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:8px; max-height:52vh; overflow:auto; }
.socialLibraryImage { position:relative; aspect-ratio:1; padding:0; border:2px solid transparent; border-radius:6px; background:#f3f4f6; cursor:pointer; overflow:hidden; }
.socialLibraryImage img { width:100%; height:100%; object-fit:cover; display:block; }
.socialLibraryImage i { position:absolute; top:6px; right:6px; width:18px; height:18px; border:1.5px solid #fff; border-radius:4px; background:rgb(0 0 0 / 25%); }
.socialLibraryImage.picked { border-color:#0088ff; }
.socialLibraryImage.picked i { background:#0088ff url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222.2%22%3E%3Cpath%20d%3D%22M3.5%208.5l3%203%206-7%22/%3E%3C/svg%3E") center/12px no-repeat; border-color:#0088ff; }
.socialLibraryAlbum { display:grid; gap:4px; padding:0 0 6px; border:1px solid var(--line); border-radius:6px; background:#fff; cursor:pointer; overflow:hidden; text-align:left; }
.socialLibraryAlbum img, .socialLibraryNoCover { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:#f3f4f6; }
.socialLibraryAlbum b, .socialLibraryAlbum small { padding:0 8px; font-size:12px; }
.socialLibraryAlbum small { color:#6b7280; }
.socialLibrary .socialAddressActions { align-items:center; }
.socialLibrary .socialAddressActions .socialMuted { margin-right:auto; }
/* Kênh Social: Trả lời tự động editor. */
.socialArEditor { gap:14px; }
.socialArGrid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; max-height:64vh; overflow:auto; }
@media (max-width: 900px) { .socialArGrid { grid-template-columns:1fr; } }
.socialArSection { border:1px solid var(--line); border-radius:6px; padding:12px; display:grid; gap:10px; align-content:start; }
.socialArSection.wide { grid-column:1 / -1; }
.socialArSection h4 { margin:0; font-size:14px; }
.socialArSection label { font-size:13px; display:flex; align-items:center; gap:6px; }
.socialArSection label.socialAddressField { display:grid; gap:3px; }
.socialArSection input[type=checkbox], .socialArSection input[type=radio] { width:16px; height:16px; min-height:0; margin:0; accent-color:#0088ff; }
.socialArBody { display:grid; gap:8px; padding-left:22px; }
.socialArInline { display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:13px; }
.socialArInline select { border:1px solid var(--line); border-radius:4px; padding:5px 8px; font:inherit; font-size:13px; }
.socialArKeys { display:flex; flex-wrap:wrap; gap:6px; align-items:center; border:1px solid var(--line); border-radius:4px; padding:6px; }
.socialArKeys input { flex:1; min-width:140px; border:0; outline:none; font:inherit; font-size:13px; }
.socialArKey { display:inline-flex; align-items:center; gap:4px; background:#e6f3ff; color:#0a4a8f; border-radius:12px; padding:2px 4px 2px 10px; font-size:12px; }
.socialArKey button { border:0; background:none; cursor:pointer; color:#0a4a8f; font-size:14px; line-height:1; padding:0 4px; }
.socialArBlock { border:1px solid #eef0f2; border-radius:6px; padding:10px; margin:0; display:grid; gap:8px; }
.socialArBlock.off { background:#fafbfc; }
.socialArToggle { display:flex; align-items:center; gap:8px; }
.socialArBlock textarea { width:100%; min-width:0; border:1px solid var(--line); border-radius:4px; padding:7px 9px; font:inherit; font-size:13px; resize:vertical; }
.socialArImages { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.socialArPosts { margin:0; padding-left:18px; font-size:12px; color:#4b5563; }
.socialArPicker { border:1px solid var(--line); border-radius:6px; padding:12px; display:grid; gap:10px; background:#fff; }
.socialArFeed { display:flex; align-items:center; gap:8px; font-size:13px; }
.socialArFeed img, .socialArFeed > i { flex:none; width:40px; height:40px; border-radius:4px; object-fit:cover; background:#f3f4f6; }
.socialArFeed span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.socialArFeed button { border:0; background:none; cursor:pointer; font-size:16px; color:#6b7280; }
.socialArFeedPicker { display:grid; gap:6px; max-height:260px; overflow:auto; border:1px solid var(--line); border-radius:6px; padding:8px; }
.socialArUpload { display:inline-flex; align-items:center; cursor:pointer; padding:4px 10px; }
.socialReportRow { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.socialReportRow p { margin:0; }
.socialReportTools { display:inline-flex; gap:8px; flex:none; }
.socialReportTools .linkButton { padding:0; font-size:12px; }
.socialReportEdit { display:grid; gap:6px; }
.socialReportEdit textarea { width:100%; min-width:0; border:1px solid var(--line); border-radius:4px; padding:6px 8px; font:inherit; font-size:13px; }
.socialBulkIcon.broadcast { --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2011l18-8-8%2018-2-8z%22/%3E%3Cpath%20d=%22M11%2013l10-10%22/%3E%3C/svg%3E"); }
.socialBulkHistory { margin-left:auto; font-size:12px; color:#0088ff; padding:0 4px; white-space:nowrap; }
/* Kênh Social: top bar icons, page avatar, template / tag / customer card icons (Sapo's details). */
.socialPagePickWrap { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:18px; padding:2px 4px 2px 4px; background:#fff; }
.socialPagePickWrap .socialPagePick { border:0 !important; background:transparent; }
.socialPagePickAvatar { width:26px; height:26px; border-radius:50%; object-fit:cover; flex:none; }
.socialPagePickAvatar.all { background:#e6f3ff; -webkit-mask:none; }
.socialTopIcon { flex:none; width:34px; height:34px; border:0; border-radius:50%; background:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; margin-left:6px; }
button.socialTopIcon { padding:0; min-height:0; }
.socialTopIcon::before { flex:none; content:""; width:22px; height:22px; background:var(--tint, #0a7cff); -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat; }
.socialTopIcon.messenger { background:linear-gradient(135deg,#0a7cff,#a334fa 70%,#ff5f7e); border-radius:8px; --tint:#fff; --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%203C7%203%203%206.6%203%2011c0%202.4%201.2%204.6%203.2%206v4l3.6-2c.7.1%201.4.2%202.2.2%205%200%209-3.6%209-8s-4-8-9-8z%22/%3E%3Cpath%20d=%22M7.5%2013l3-3%202.5%202%203.5-3%22/%3E%3C/svg%3E"); }
.socialTopIcon.help { border:1.5px solid #0a7cff; --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M9.5%209a2.5%202.5%200%201%201%203.5%202.3c-.6.3-1%20.9-1%201.6V14M12%2017v.01%22/%3E%3C/svg%3E"); }
.socialTopIcon.process { border:1.5px solid #f5a623; --tint:#f5a623; --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M13%203L5%2013h6l-1%208%208-10h-6z%22/%3E%3C/svg%3E"); }
.socialTopAccount { flex:none; width:34px; height:34px; margin:0 4px 0 8px; border-radius:50%; background:#0a7cff; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.socialComposerIcon.template { --glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%224%22%20y=%223%22%20width=%2216%22%20height=%2218%22%20rx=%222%22/%3E%3Cpath%20d=%22M8%208h8M8%2012h8M8%2016h5%22/%3E%3C/svg%3E"); }
.socialAllTags { display:inline-flex; align-items:center; gap:4px; }
.socialAllTags::before { content:""; width:14px; height:14px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2012V4h8l9%209-8%208z%22/%3E%3Ccircle%20cx=%227.5%22%20cy=%228.5%22%20r=%221.3%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2012V4h8l9%209-8%208z%22/%3E%3Ccircle%20cx=%227.5%22%20cy=%228.5%22%20r=%221.3%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialCustomerCardIcon { margin-left:auto; width:28px; height:28px; min-height:0; padding:0; border:1px solid #f5a623; border-radius:6px; background:#fffaf2; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.socialCustomerCardIcon::before { content:""; width:18px; height:18px; background:#f5a623; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%225%22%20width=%2218%22%20height=%2214%22%20rx=%222%22/%3E%3Ccircle%20cx=%229%22%20cy=%2211%22%20r=%222%22/%3E%3Cpath%20d=%22M6%2016c.6-1.5%201.7-2.2%203-2.2s2.4.7%203%202.2M14%2010h4M14%2013h3%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%225%22%20width=%2218%22%20height=%2214%22%20rx=%222%22/%3E%3Ccircle%20cx=%229%22%20cy=%2211%22%20r=%222%22/%3E%3Cpath%20d=%22M6%2016c.6-1.5%201.7-2.2%203-2.2s2.4.7%203%202.2M14%2010h4M14%2013h3%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialCustomerCardIcon:disabled { opacity:.4; cursor:not-allowed; }
.socialCustomerPhone { display:flex; align-items:center; gap:8px; }
.socialArSpacer { flex:1; }
.socialAddressActions button.danger-text { color:#e02424; border-color:#f5b5b5; }
/* Kênh Social: chatbot steps (read-only). */
.socialFlowActions { display:inline-flex; gap:6px; flex-wrap:wrap; }
.socialFlowSteps { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px; max-height:60vh; overflow:auto; }
.socialFlowStep { border:1px solid var(--line); border-radius:6px; padding:10px; display:grid; gap:8px; align-content:start; }
.socialFlowStep.root { border-color:#0088ff; }
.socialFlowStep h4 { margin:0; font-size:14px; }
.socialFlowMessage { display:grid; gap:6px; background:#f7f9fb; border-radius:6px; padding:8px; font-size:13px; }
.socialFlowMessage p { margin:0; white-space:pre-wrap; }
.socialFlowMessage img { max-width:100%; border-radius:4px; }
.socialFlowButton { display:block; border:1px solid #cfe3fb; background:#fff; border-radius:4px; padding:4px 8px; font-size:12px; color:#0a4a8f; }
.socialFlowButton.editing { display:flex; align-items:center; gap:6px; }
.socialFlowButton.editing input { flex:1; min-width:0; border:1px solid var(--line); border-radius:4px; padding:3px 6px; font:inherit; font-size:12px; }
.socialFlowMessage textarea { width:100%; min-width:0; border:1px solid var(--line); border-radius:4px; padding:6px 8px; font:inherit; font-size:13px; resize:vertical; background:#fff; }
/* Kênh Social: menu (+) cạnh ô soạn (Gửi chatbot, Gửi sản phẩm, Nhãn dán, Up-Sell, Xin địa chỉ). */
.socialPlusWrap { position:relative; display:inline-flex; flex:none; }
.socialComposerIcon.plus.on::before { background:#0088ff; }
.socialPlusMenu { position:absolute; left:0; bottom:calc(100% + 6px); z-index:60; min-width:230px; background:#fff; border:1px solid #e4e7ec; border-radius:8px; box-shadow:0 8px 24px rgb(16 24 40 / 16%); padding:6px 0; display:grid; }
.socialPlusMenu p { margin:0; padding:8px 12px; font-size:13px; }
button.socialPlusItem { display:flex; align-items:center; gap:10px; width:100%; min-height:0; padding:8px 14px; border:0; border-radius:0; background:none; color:#1f2937; font-size:14px; font-weight:400; text-align:left; cursor:pointer; }
button.socialPlusItem:hover { background:#f2f7ff; }
.socialPlusItem i { flex:none; width:20px; height:20px; background:#0088ff; -webkit-mask:var(--glyph) center/contain no-repeat; mask:var(--glyph) center/contain no-repeat; }
.socialPlusItem.chatbot { --glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%224%22%20y=%228%22%20width=%2216%22%20height=%2212%22%20rx=%222%22/%3E%3Cpath%20d=%22M12%208V4M9%2013h.01M15%2013h.01M9%2017h6%22/%3E%3C/svg%3E"); }
.socialPlusItem.product { --glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M21%208l-9-5-9%205%209%205%209-5zM3%208v8l9%205%209-5V8M12%2013v8%22/%3E%3C/svg%3E"); }
.socialPlusItem.sticker { --glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M15%203H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h10l6-6V5a2%202%200%200%200-2-2h-4z%22/%3E%3Cpath%20d=%22M8%2013s1.5%202%204%202%204-2%204-2M9%209h.01M15%209h.01%22/%3E%3C/svg%3E"); }
.socialPlusItem.upsell { --glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2017l6-6%204%204%208-8M15%207h6v6%22/%3E%3C/svg%3E"); }
.socialPlusItem.address { --glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2021s-7-6.5-7-12a7%207%200%200%201%2014%200c0%205.5-7%2012-7%2012z%22/%3E%3Ccircle%20cx=%2212%22%20cy=%229%22%20r=%222.5%22/%3E%3C/svg%3E"); }
.socialStickerPanel { position:absolute; left:0; bottom:calc(100% + 6px); z-index:60; width:min(340px, calc(100vw - 32px)); background:#fff; border:1px solid #e4e7ec; border-radius:8px; box-shadow:0 8px 24px rgb(16 24 40 / 16%); padding:10px; display:grid; gap:8px; }
.socialStickerGrid { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; max-height:260px; overflow:auto; }
button.socialSticker { min-height:0; padding:4px; border:0; border-radius:6px; background:none; cursor:pointer; }
button.socialSticker:hover { background:#f2f4f7; }
.socialSticker img { width:100%; aspect-ratio:1; object-fit:contain; display:block; }
.socialPendingProducts { display:flex; flex-wrap:wrap; gap:6px; padding:6px 10px 0; }
.socialPendingProduct { display:inline-flex; align-items:center; gap:6px; max-width:260px; padding:3px 4px 3px 3px; border:1px solid #d0d5dd; border-radius:6px; background:#f9fafb; font-size:12px; }
.socialPendingProduct img { width:28px; height:28px; object-fit:cover; border-radius:4px; flex:none; }
.socialPendingProduct span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.socialPendingProduct button { min-height:0; padding:0 4px; border:0; background:none; color:#667085; font-size:16px; line-height:1; cursor:pointer; }
.socialProductSearch { width:100%; }
.socialProductList { display:grid; gap:2px; max-height:52vh; overflow:auto; }
.socialProductRow { display:flex; align-items:center; gap:10px; padding:6px 4px; border-radius:6px; cursor:pointer; }
.socialProductRow:hover, .socialProductRow.picked { background:#f2f7ff; }
.socialProductRow img, .socialProductRow > i { width:40px; height:40px; flex:none; object-fit:cover; border-radius:4px; background:#f2f4f7; }
.socialProductRow > span { display:grid; min-width:0; }
.socialProductRow b { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.socialProductModal { width:min(620px, 100%); }
.socialProductLocation { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.socialProductLocation select { min-width:200px; max-width:60%; }
.socialProductTop { justify-self:start; margin:4px 0 2px; padding:2px 10px; border-radius:4px 12px 12px 4px; background:#e5a830; color:#fff; font-size:13px; font-weight:500; }
.socialProductRow > span:nth-of-type(1) { flex:1; }
.socialProductRow small { display:flex; align-items:center; gap:6px; }
.socialProductSku { color:#0088ff; }
.socialProductOut { padding:0 6px; border-radius:4px; background:#fdecec; color:#e53935; }
.socialProductZero { color:#e53935; }
.socialProductPrice { flex:none; font-weight:500; white-space:nowrap; }

/* Kênh Social: kịch bản bình luận theo ảnh trong album / video reel. */
.socialArPhotos { display:grid; grid-template-columns:repeat(auto-fill, minmax(64px, 1fr)); gap:6px; }
.socialArPhoto { position:relative; display:block; aspect-ratio:1; border:2px solid transparent; border-radius:6px; overflow:hidden; background:#f2f4f7; cursor:pointer; }
.socialArPhoto.on { border-color:#0088ff; }
.socialArPhoto img { width:100%; height:100%; object-fit:cover; display:block; }
.socialArPhoto input { position:absolute; top:4px; left:4px; margin:0; }
button.socialArAlbum { width:100%; min-height:0; padding:4px; border:0; background:none; color:inherit; font-weight:400; text-align:left; cursor:pointer; }
button.socialArAlbum:hover { background:#f2f7ff; }
.socialArAlbumHead { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.socialArAlbumHead b { flex:1; min-width:0; }

.socialUtilityPreview { padding:10px 12px; border-radius:8px; background:#f2f4f7; white-space:pre-wrap; font-size:13px; }

/* Kênh Social: tạo / sửa chatbot (danh sách bước). */
.socialFlowBuilder { width:min(860px, 100%); }
.socialFlowBuilder .socialFlowSteps { display:grid; grid-template-columns:1fr; gap:12px; }
.socialFlowBuildBlock { display:grid; gap:8px; padding:10px 12px; border:1px solid #e4e7ec; border-radius:8px; }
.socialFlowBuildRow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.socialFlowBuildRow > input:not([type=radio]), .socialFlowBuildRow > select { flex:1; min-width:140px; }
.socialFlowBuildRow.button { padding-left:12px; border-left:3px solid #cfe5ff; }
.socialFlowBuildRow.button > input:first-child { flex:0 1 170px; min-width:120px; }
.socialFlowImage { display:flex; align-items:center; gap:10px; }
.socialFlowImage img { width:96px; height:96px; object-fit:cover; border-radius:6px; background:#f2f4f7; }

/* Kênh Social: "Thêm vào đơn" on a product card in the chat. */
.socialProduct { position:relative; overflow:visible; }
.socialProduct > img { border-radius:12px 12px 0 0; }
button.socialProductAdd { position:absolute; top:50%; right:calc(100% + 12px); transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:36px; height:36px; min-height:0; padding:0; border:0; border-radius:50%; background:#e6f3ff; color:#0088ff; box-shadow:0 1px 3px rgb(16 24 40 / 12%); cursor:pointer; }
.socialMessage.in button.socialProductAdd { right:auto; left:calc(100% + 12px); }
button.socialProductAdd:hover { background:#d0e8ff; }
button.socialProductAdd::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); padding:8px 12px; border-radius:6px; background:#1f2937; color:#fff; font-size:13px; font-weight:400; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s; }
button.socialProductAdd::before { content:""; position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:#1f2937; border-bottom:0; opacity:0; pointer-events:none; transition:opacity .12s; }
button.socialProductAdd:hover::after, button.socialProductAdd:hover::before, button.socialProductAdd:focus-visible::after, button.socialProductAdd:focus-visible::before { opacity:1; }
.socialProductAdd i { flex:none; width:20px; height:20px; background:currentColor; -webkit-mask:var(--glyph) center/contain no-repeat; mask:var(--glyph) center/contain no-repeat;
  --glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%204h2l2.4%2011h11.2L21%207H7%22/%3E%3Ccircle%20cx=%2210%22%20cy=%2219%22%20r=%221.5%22/%3E%3Ccircle%20cx=%2217%22%20cy=%2219%22%20r=%221.5%22/%3E%3Cpath%20d=%22M14%209v4M12%2011h4%22/%3E%3C/svg%3E"); }

/* Kênh Social: Tạo đơn → Đẩy qua ĐTVC (GHN, Ahamove của Clone). */
.socialCarrierBody { flex:1; min-height:0; overflow:auto; display:grid; grid-template-columns:1fr; gap:12px; padding:12px 16px; align-content:start; }
.socialCarrierForm { display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; padding:12px; border:1px solid var(--line); border-radius:8px; background:#fafbfc; }
.socialCarrierForm > strong, .socialCarrierForm > p, .socialCarrierForm > .socialCarrierDims, .socialCarrierForm > label:last-child { grid-column:1 / -1; }
.socialCarrierForm p { margin:0; font-size:13px; }
.socialCarrierDims { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.socialCarrierRates { display:grid; gap:4px; }
.socialCarrierRatesHead { display:flex; justify-content:space-between; align-items:center; padding-bottom:6px; border-bottom:1px solid var(--line); }
.socialCarrierGroup { margin-top:8px; padding:4px 8px; border-radius:4px; background:#f2f4f7; font-size:12px; font-weight:600; color:#475467; }
.socialCarrierOption { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:8px; border-radius:6px; cursor:pointer; }
.socialCarrierOption:hover, .socialCarrierOption.on { background:#f2f7ff; }
.socialCarrierOption.disabled { opacity:.55; cursor:default; }
.socialCarrierName { display:grid; }
.socialCarrierName small { color:#667085; }
.socialCarrierName small.none { color:#d92d20; }
.socialCarrierFee { font-weight:600; white-space:nowrap; }
.socialCarrierPicked { display:grid; gap:6px; margin-top:8px; padding-top:8px; border-top:1px solid var(--line); }
.socialCarrierPickedHead { display:flex; justify-content:space-between; align-items:center; gap:8px; font-weight:500; }
.socialCarrierPicked dl { display:grid; grid-template-columns:1fr auto; gap:6px 10px; margin:0; font-size:13px; }
.socialCarrierPicked dd { margin:0; font-weight:600; text-align:right; }
.socialOrderBookError { color:#b42318; }

/* Kênh Social: Sửa đơn in the order panel. */
.socialOrderEditCode { color:#0088ff; font-weight:600; text-decoration:none; }
.socialOrderPaid { display:grid; grid-template-columns:1fr auto; gap:6px 10px; margin:0; }
.socialOrderPaid dd { margin:0; font-weight:600; text-align:right; }

/* Kênh Social: thẻ đơn mở rộng (Thao tác khác: Gửi hóa đơn, Gửi link chi tiết đơn hàng, Sửa đơn). */
.socialOrderCardWrap { display:grid; border:1px solid #b9dcff; border-radius:8px; background:#f5faff; }
.socialOrderCardWrap > .socialOrderCard { border:0; border-bottom:1px solid #d6e9fb; border-radius:8px 8px 0 0; background:transparent; }
.socialOrderMore { display:grid; gap:10px; padding:10px 14px 14px; }
.socialOrderMore dl { display:grid; grid-template-columns:1fr auto; gap:4px 12px; margin:0; font-size:14px; }
.socialOrderMore dd { margin:0; text-align:right; }
.socialOrderMoreActions { position:relative; display:flex; }
button.socialOrderMoreBtn { flex:1; min-height:36px; border:1px solid #0088ff; border-radius:6px; background:#e6f3ff; color:#0088ff; font-weight:500; cursor:pointer; }
.socialOrderActionMenu { position:absolute; top:calc(100% + 4px); left:0; z-index:40; min-width:240px; display:grid; padding:6px 0; background:#fff; border:1px solid #e4e7ec; border-radius:8px; box-shadow:0 8px 24px rgb(16 24 40 / 16%); }
button.socialOrderAction { display:flex; align-items:center; gap:10px; min-height:0; padding:9px 14px; border:0; border-radius:0; background:none; color:#1f2937; font-weight:400; text-align:left; cursor:pointer; }
button.socialOrderAction:hover:not(:disabled) { background:#f2f7ff; }
button.socialOrderAction:disabled { opacity:.45; cursor:default; }
.socialOrderAction i { flex:none; width:20px; height:20px; background:#0088ff; -webkit-mask:var(--glyph) center/contain no-repeat; mask:var(--glyph) center/contain no-repeat; }
.socialOrderAction.bill { --glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%225%22%20y=%223%22%20width=%2214%22%20height=%2218%22%20rx=%222%22/%3E%3Cpath%20d=%22M9%208h6M9%2012h6M9%2016h4%22/%3E%3C/svg%3E"); }
.socialOrderAction.link { --glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M10%2014a4%204%200%200%200%205.7%200l3-3a4%204%200%200%200-5.7-5.7l-1%201M14%2010a4%204%200%200%200-5.7%200l-3%203a4%204%200%200%200%205.7%205.7l1-1%22/%3E%3C/svg%3E"); }
.socialOrderAction.edit { --glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%2020h4L19%209l-4-4L4%2016v4z%22/%3E%3C/svg%3E"); }
.socialBill { display:grid; gap:12px; max-height:60vh; overflow:auto; }
.socialBillShop { font-size:18px; }
.socialBillLine { display:grid; grid-template-columns:72px 1fr; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.socialBillLine img { width:72px; height:72px; object-fit:contain; border:1px solid var(--line); border-radius:6px; }
.socialBillLine > div { display:grid; gap:2px; }
.socialBillLine small { color:#98a2b3; }
.socialBill dl { display:grid; gap:4px; margin:0; }
.socialBill dt { color:#98a2b3; font-size:13px; margin-top:6px; }
.socialBill dd { margin:0; }
.socialBill dl.socialBillSum { grid-template-columns:1fr auto; }
.socialBill dl.socialBillSum dt { margin:0; color:inherit; }
.socialBill dl.socialBillSum .strong { font-weight:600; }

/* Kênh Social: thẻ đơn — Duyệt đơn / Giao hàng, In đơn, Xác nhận thanh toán, Hủy đơn; panel Giao hàng. */
.socialOrderMoreActions { gap:8px; }
button.socialOrderMainBtn { flex:1; min-height:36px; border:0; border-radius:6px; background:#0088ff; color:#fff; font-weight:500; cursor:pointer; }
button.socialOrderMainBtn:disabled { opacity:.6; cursor:default; }
.socialOrderAction.print { --glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M7%209V3h10v6M7%2017H5a2%202%200%200%201-2-2v-4a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202v4a2%202%200%200%201-2%202h-2M7%2014h10v7H7z%22/%3E%3C/svg%3E"); }
.socialOrderAction.pay { --glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%222%22%20y=%226%22%20width=%2220%22%20height=%2212%22%20rx=%222%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%222.5%22/%3E%3Cpath%20d=%22M6%2012h.01M18%2012h.01%22/%3E%3C/svg%3E"); }
.socialOrderAction.cancel { --glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M9%209l6%206M15%209l-6%206%22/%3E%3C/svg%3E"); }
.socialOrderAction.cancel i { background:#e53935; }
.socialShipTabs { margin:8px 16px 0; }
.socialSort.on { border-color:#0088ff; color:#0088ff; background:#e6f3ff; }

.socialBillImage { max-height:60vh; overflow:auto; border:1px solid var(--line); border-radius:8px; background:#f7f9fb; text-align:center; }
.socialBillImage img { max-width:100%; display:block; margin:0 auto; }
.socialBillImage.phone img { width:320px; max-width:100%; box-shadow:0 2px 10px rgb(16 24 40 / 12%); margin:12px auto; }

/* Kênh Social: chi tiết đơn ở cột phải (như Sapo Social). */
.socialOrderView { display:flex; flex-direction:column; min-height:0; background:#f3f4f6; }
.socialOrderViewTop { display:flex; align-items:center; gap:10px; padding:12px 14px; background:#fff; border-bottom:1px solid var(--line); }
.socialOrderViewTop strong { font-size:17px; }
.socialOrderViewTop strong a { color:#0088ff; text-decoration:none; }
.socialOrderViewTop .socialOrderStatus { margin-left:auto; }
.socialOrderViewBody { flex:1; min-height:0; overflow:auto; display:grid; gap:8px; align-content:start; padding-bottom:8px; }
.socialOrderSteps { display:grid; grid-template-columns:repeat(5, 1fr); margin:0; padding:14px 8px; list-style:none; background:#fff; }
.socialOrderSteps li { position:relative; display:grid; justify-items:center; gap:6px; font-size:12px; color:#6b7280; text-align:center; }
.socialOrderSteps li::before { content:""; position:absolute; top:13px; left:-50%; width:100%; height:2px; background:#d1d5db; z-index:0; }
.socialOrderSteps li:first-child::before { display:none; }
.socialOrderSteps li.done::before { background:#0088ff; }
.socialOrderSteps i { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; border:2px solid #d1d5db; background:#fff; font-style:normal; font-size:12px; }
.socialOrderSteps li.done i { background:#0088ff; border-color:#0088ff; color:#fff; }
.socialOrderSteps li.done { color:#111827; }
.socialOrderViewCard { display:grid; gap:6px; padding:12px 14px; background:#fff; }
.socialOrderViewCard p { margin:0; font-size:14px; }
.socialOrderViewHead { display:flex; justify-content:space-between; align-items:center; }
.socialOrderViewHead h3 { margin:0; font-size:15px; }
.socialOrderViewWho { grid-template-columns:auto 1fr; align-items:center; gap:12px; }
.socialOrderViewWho > div { display:grid; }
.socialOrderViewWho b { color:#0088ff; }
.socialOrderViewLine { display:grid; grid-template-columns:48px 1fr; gap:10px; padding:6px 0; border-bottom:1px solid #f0f1f3; }
.socialOrderViewLine img, .socialOrderViewLine .socialOrderNoImage { width:48px; height:48px; object-fit:contain; border:1px solid var(--line); border-radius:4px; }
.socialOrderViewLine > div { display:grid; gap:2px; min-width:0; font-size:13px; }
.socialOrderViewLine small { color:#0088ff; }
.socialOrderViewQty { display:flex; justify-content:space-between; color:#6b7280; }
.socialOrderViewQty b { color:#111827; }
/* Sold at the sale price: "419,000 × 1" with the price red, the regular price struck, smaller, under it. */
.socialOrderViewQty .onSalePrice { align-items:flex-start; }
.socialOrderViewMoney { display:grid; grid-template-columns:1fr auto; gap:6px 12px; margin:6px 0 0; padding:10px 12px; border:1px solid #cfe5ff; border-radius:8px; background:#f5faff; font-size:14px; }
.socialOrderViewMoney dd { margin:0; text-align:right; }
.socialOrderViewMoney .strong { font-weight:700; }
.socialOrderViewFoot { padding:10px 14px; background:#fff; border-top:1px solid var(--line); }
.socialOrderActionMenu.up { top:auto; bottom:calc(100% + 4px); }
/* Giao hàng's menu in POS Chat's order view (the order page's three ways), under the button at the right. */
.socialOrderActionMenu.socialOrderShipMenu { left:auto; right:0; }
/* The order page's shipping dialog opened over POS Chat: above the chat's top bar (.omniTop, z-index 30). */
.socialShell ~ .modalBackdrop { z-index:200; }
/* What Giao hàng just did, while Sapo Social does not list the shipment yet (followShipment). */
.socialShipFollow { display:grid; gap:2px; margin:6px 0 4px; padding:8px 10px; border-left:3px solid #0088ff; border-radius:4px; background:#f0f7ff; }
.socialShipFollow small { color:#5b6b7f; }
/* Its frame while the order is still being read (openChatOrderShipping): about the dialog's height, loader in the middle. */
.ghnOrderModal.chatShippingOpening .cloneFulfillmentBody { min-height:420px; display:flex; align-items:center; justify-content:center; }
.socialOrderAction.truck { --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3z'/%3E%3Cpath d='M14 9h4l3 3v4h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.6'/%3E%3Ccircle cx='17' cy='17.5' r='1.6'/%3E%3C/svg%3E"); }
.socialOrderAction.shipper { --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='17' r='2.5'/%3E%3Ccircle cx='18' cy='17' r='2.5'/%3E%3Cpath d='M8.5 17h7M15 6h2l2 6M5 12h7l2 5M9 9h3'/%3E%3C/svg%3E"); }
.socialOrderAction.store { --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9l1.5-5h13L20 9'/%3E%3Cpath d='M4 9h16v2a3 3 0 0 1-5.3 1.9A3 3 0 0 1 12 14a3 3 0 0 1-2.7-1.1A3 3 0 0 1 4 11z'/%3E%3Cpath d='M5 13v7h14v-7'/%3E%3Cpath d='M10 20v-4h4v4'/%3E%3C/svg%3E"); }

/* Kênh Social: order cards in the customer column (Sapo's order-customer-item-v4). */
.socialOrderCard { display:grid; gap:6px; margin:0 0 8px; padding:10px 12px; border:1px solid #e8eaed; border-radius:6px; background:#fff; box-shadow:0 1px 3px rgb(0 0 0 / 6%); color:inherit; text-decoration:none; }
.socialOrderCard:hover { border-color:#0088ff; }
.socialOrderTop { display:flex; align-items:center; gap:6px; min-width:0; }
.socialOrderTop b { color:#0088ff; font-weight:600; }
.socialOrderDate { flex:1; min-width:0; font-size:12px; color:#1f2933; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.socialOrderDate small { color:#747c87; font-size:12px; }
.socialOrderStatus { flex:none; font-style:normal; font-size:12px; border:1px solid; border-radius:12px; padding:1px 10px; white-space:nowrap; }
.socialOrderShip { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; }
.socialOrderTracking { min-width:0; color:#0088ff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.socialOrderDelivery { --status:#5b6b7f; flex:none; display:inline-flex; align-items:center; gap:4px; color:var(--status); }
.socialOrderDelivery i { width:8px; height:8px; border-radius:50%; background:var(--status); }
.socialOrdersAll { display:block; margin:2px auto 0; color:#0088ff; }
/* Kênh Social: Chọn nhiều (bulk actions on conversations). */
.socialPickToggle { border:1px solid var(--line); background:#fff; border-radius:4px; padding:0 10px; font:inherit; font-size:13px; cursor:pointer; white-space:nowrap; }
.socialPickToggle.on { border-color:#0088ff; color:#0088ff; background:#edf6ff; }
.socialPickToggle:disabled { opacity:.5; cursor:not-allowed; }
.socialBulkBar { display:flex; align-items:center; gap:4px; padding:6px 12px; border-top:1px solid #f0f2f4; border-bottom:1px solid #f0f2f4; background:#f7f9fb; }
.socialBulkAll { display:flex; align-items:center; gap:8px; flex:1; min-width:0; font-size:13px; cursor:pointer; }
.socialBulkAll input { width:16px; height:16px; min-height:0; margin:0; accent-color:#0088ff; }
.socialBulkIcon { width:32px; height:32px; border:0; border-radius:4px; background:transparent; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.socialBulkIcon::before { content:""; width:18px; height:18px; background:#46515f; -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat; }
.socialBulkIcon:hover:not(:disabled), .socialBulkIcon.on { background:#e6f3ff; }
.socialBulkIcon:hover:not(:disabled)::before, .socialBulkIcon.on::before { background:#0088ff; }
.socialBulkIcon.delete:hover:not(:disabled)::before { background:#e02424; }
.socialBulkIcon:disabled { opacity:.4; cursor:not-allowed; }
.socialBulkIcon.read { --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%2013l4%204%207-8%22/%3E%3Cpath%20d=%22M11%2017l1%200%208-9%22/%3E%3C/svg%3E"); }
.socialBulkIcon.unread { --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%225%22%20width=%2218%22%20height=%2214%22%20rx=%222%22/%3E%3Cpath%20d=%22M3%207l9%206%209-6%22/%3E%3C/svg%3E"); }
.socialBulkIcon.assign { --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%229%22%20cy=%228%22%20r=%223.5%22/%3E%3Cpath%20d=%22M2.5%2020c.8-3.6%203.5-5.5%206.5-5.5s5.7%201.9%206.5%205.5%22/%3E%3Cpath%20d=%22M19%208v6M16%2011h6%22/%3E%3C/svg%3E"); }
.socialBulkIcon.delete { --icon:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%207h16M9%207V4h6v3M6%207l1%2013h10l1-13%22/%3E%3C/svg%3E"); }
.socialBulkAssignWrap { position:relative; display:inline-flex; }
.socialBulkAssign { position:absolute; top:36px; right:-40px; z-index:30; width:260px; max-height:320px; overflow:auto; padding:10px; background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:0 6px 20px rgb(0 0 0 / 14%); display:grid; gap:6px; }
.socialBulkStaff { display:flex; align-items:center; gap:6px; font-size:13px; }
.socialBulkStaff span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.socialBulkStaff button { border:1px solid #0088ff; background:#0088ff; color:#fff; border-radius:4px; padding:3px 8px; font:inherit; font-size:12px; cursor:pointer; }
.socialBulkStaff button.ghost { background:#fff; color:#0088ff; }
.socialRow.picking { align-items:center; }
.socialRowCheck { flex:0 0 16px; width:16px; height:16px; border:1.5px solid #a3adb8; border-radius:3px; background:#fff; }
.socialRow.picked { background:#f0f7ff; }
.socialRow.picked .socialRowCheck { border-color:#0088ff; background:#0088ff url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222.2%22%3E%3Cpath%20d%3D%22M3.5%208.5l3%203%206-7%22/%3E%3C/svg%3E") center/12px no-repeat; }

.socialPrintOverlay { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:16px; background:rgba(15, 23, 42, .35); }
.socialPrintDialog { width:min(420px, 100%); display:flex; flex-direction:column; gap:10px; padding:18px 20px; border-radius:10px; background:var(--panel, #fff); box-shadow:0 12px 40px rgba(0,0,0,.2); }
.socialPrintDialog h3 { margin:0; }
.socialPrintDialog label { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.socialPrintDialog select { min-width:200px; }
.socialPrintActions { display:flex; justify-content:flex-end; gap:8px; }
.socialNotice.ok { background:#e6f4ea; color:#0f7b3f; }
.socialPrintLayout { display:grid; grid-template-columns:minmax(300px, 1fr) minmax(280px, 1fr); gap:16px; align-items:start; }
.socialPrintSetting { display:flex; flex-direction:column; gap:8px; }
.socialPrintType { display:flex; gap:16px; }
.socialPrintType label, .socialPrintShow { display:flex; align-items:center; gap:6px; }
.socialPrintRows { display:flex; flex-direction:column; gap:4px; }
.socialPrintRow { display:flex; align-items:center; gap:6px; padding:6px 8px; border:1px solid var(--line); border-radius:6px; }
.socialPrintShow { flex:1; min-width:0; }
.socialPrintRow .socialSort { min-width:30px; padding:2px 6px; }
.socialPrintRow .socialSort.active { font-weight:700; background:var(--panel-2); }
.socialPrintPreview { display:flex; flex-direction:column; gap:6px; position:sticky; top:0; }
.socialPrintFrame { width:100%; height:560px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.socialPrintFrame.receipt { max-width:320px; }
@media (max-width: 900px) { .socialPrintLayout { grid-template-columns:1fr; } }
.socialSettingItems { display:flex; flex-direction:column; gap:6px; }
.socialSettingItem { padding:8px 10px; border:1px solid var(--line); border-radius:6px; }
.socialSettingList { display:grid; grid-template-columns:minmax(140px, 220px) 1fr; gap:6px 12px; margin:0; }
.socialSettingList dt { color:var(--muted); }
.socialSettingList dd { margin:0; overflow-wrap:anywhere; }
.socialTagEditor { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--line); border-radius:8px; }
.socialTagColors { display:flex; gap:4px; }
.socialTagColors button { width:22px; min-width:22px; height:22px; min-height:22px; padding:0; border-radius:50%; border:2px solid transparent; }
.socialTagColors button.active { border-color:var(--text, #111); }
.socialTagTable { display:flex; flex-direction:column; gap:6px; }
.socialTagRow { display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.socialTagDot { width:12px; height:12px; border-radius:50%; flex:none; }
.socialTagRowActions { margin-left:auto; display:flex; gap:6px; }
.socialSort.danger { color:#e02424; }
@media (max-width: 720px) { .socialSettings { flex-direction:column; } .socialSettingMenu { width:auto; flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); } }
.socialLiveVideo { display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); cursor:pointer; }
.socialLiveVideo:hover { border-color:var(--accent, #2f6fed); }
.socialLiveVideo img, .socialLiveThumb { width:96px; height:54px; object-fit:cover; border-radius:6px; background:var(--panel-2); flex:none; }
.socialLiveBadge { display:inline-block; margin-right:6px; padding:1px 6px; border-radius:4px; background:#e02424; color:#fff; font-size:11px; }
.socialLiveDetail { display:flex; flex-direction:column; min-height:0; flex:1; }
.socialLiveTitle { max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.socialLiveStats { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; padding:10px 20px 0; }
.socialLiveRow { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.socialLiveRow img, .socialLiveAvatar { width:36px; height:36px; border-radius:50%; background:var(--panel-2); flex:none; }
.socialLiveRowBody { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.socialLiveRowBody p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.socialLiveRowSide { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.socialLiveOrder { padding:2px 6px; border-radius:4px; background:#e6f4ea; color:#0f7b3f; font-size:12px; }
.socialLiveGroup { border-top:1px dashed var(--line); padding-top:6px; margin-top:4px; }
.socialLiveGroupHead { display:flex; justify-content:space-between; align-items:center; gap:8px; }
@media (max-width: 720px) { .socialLiveStats { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.socialAutomation { display:flex; flex-direction:column; min-height:0; flex:1; }
.socialAutomationHint { margin:8px 20px 0; font-size:12px; }
.socialAutomationList { flex:1; overflow:auto; padding:10px 20px; display:flex; flex-direction:column; gap:8px; }
.socialAutomationRow { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.socialAutomationInfo { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.socialAutomationInfo p { margin:2px 0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; }
.socialSwitch { width:40px; height:22px; border-radius:11px; border:0; padding:2px; background:var(--line); cursor:pointer; flex:none; }
.socialSwitch span { display:block; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .15s; }
.socialSwitch.on { background:#0f9d58; }
.socialSwitch.on span { transform:translateX(18px); }
.socialSwitch:disabled { opacity:.5; cursor:wait; }
.socialPostsBar { display:flex; align-items:center; gap:10px; padding:10px 20px; border-bottom:1px solid var(--line); }
.socialPostsBar select, .socialPostsBar input { border:1px solid var(--line); border-radius:6px; padding:7px 10px; font:inherit; font-size:13px; }
.socialPostsBar input { flex:1; max-width:420px; }
.socialPostList { flex:1; min-height:0; overflow-y:auto; padding:14px 20px; display:grid; grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); gap:12px; align-content:start; }
.socialPost { display:flex; gap:12px; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.socialPost > img, .socialPostNoImage { width:120px; height:120px; flex:none; object-fit:cover; border-radius:8px; background:var(--panel-2); }
.socialPostNoImage { display:grid; place-items:center; color:var(--muted); font-size:12px; }
.socialPostBody { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.socialPostBody small { color:var(--muted); }
.socialPostBody p { margin:0; font-size:13px; white-space:pre-wrap; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.socialPostStats { display:flex; flex-wrap:wrap; gap:12px; font-size:13px; }
.socialPostActions { display:flex; align-items:center; gap:14px; margin-top:auto; font-size:13px; }
.socialPostPager { display:flex; align-items:center; justify-content:center; gap:12px; padding:10px; border-top:1px solid var(--line); font-size:13px; }
.socialPostFilter { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 12px 8px; padding:6px 10px; border-radius:6px; background:#eef6ff; font-size:12px; }
.socialPostFilter em { font-style:normal; font-weight:600; }
.socialPostFilter button { border:0; background:none; font-size:16px; cursor:pointer; color:var(--muted); }
@media (max-width: 720px) { .socialPostList { grid-template-columns:1fr; padding:10px; } .socialPost > img, .socialPostNoImage { width:80px; height:80px; } }
.socialReports { flex:1; min-height:0; display:flex; flex-direction:column; background:#f3f4f6; }
.socialReportBar { flex-wrap:wrap; background:#fff; }
.socialReportGroups { display:flex; gap:4px; margin-right:auto; }
.socialReportGroups button { border:0; border-radius:6px; padding:6px 12px; background:none; font:inherit; font-size:14px; cursor:pointer; color:var(--muted); }
.socialReportGroups button.active { background:#e6f3ff; color:var(--blue); font-weight:600; }
.socialReportRange { display:flex; align-items:center; gap:6px; font-size:13px; }
.socialReportRange input { max-width:none !important; flex:none !important; }
.socialReportCards { flex:1; min-height:0; overflow-y:auto; padding:14px 20px; display:grid; grid-template-columns:repeat(auto-fill,minmax(460px,1fr)); gap:12px; align-content:start; }
.socialReportCard { padding:14px; border-radius:10px; background:#fff; border:1px solid var(--line); min-width:0; }
.socialReportCard h3 { margin:0 0 10px; font-size:15px; }
.socialReportCard h4 { margin:10px 0 6px; font-size:13px; }
.socialReportTiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; }
.socialReportTile { display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:8px; background:var(--panel-2); }
.socialReportTile small { color:var(--muted); font-size:12px; }
.socialReportTile b { font-size:18px; }
.socialReportTableWrap { overflow-x:auto; }
.socialReportTable { width:100%; border-collapse:collapse; font-size:13px; }
.socialReportTable th, .socialReportTable td { padding:6px 8px; border-bottom:1px solid #f0f2f4; text-align:left; white-space:nowrap; }
.socialReportTable th { color:var(--muted); font-weight:500; }
.socialReportTable td.num { text-align:right; font-variant-numeric:tabular-nums; }
@media (max-width: 720px) { .socialReportCards { grid-template-columns:1fr; padding:10px; } }

.ghnDirectLine {
  margin: 4px 0 0;
  font-size: 13px;
}

.ghnDirectShop {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.ghnDirectRow {
  display: flex;
  gap: 12px;
}

.ghnDirectRow span {
  min-width: 96px;
}

.ghnLocations,
.ghnShopJoin {
  display: grid;
  gap: 8px;
  justify-items: start;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.ghnLocations .shippingConnectField,
.ghnShopJoin .shippingConnectField {
  width: 100%;
}

.ghnShopJoin p {
  margin: 0;
}

.ghnShopJoinFields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  width: 100%;
}

.ghnShopJoinActions {
  display: flex;
  gap: 8px;
}

/* GHN / GHTK accounts (renderCarrierAccountsModal): Sapo's carrier settings, one row per account. */
.carrierAccountsModal {
  width: min(900px, calc(100vw - 32px));
  /* Header, tabs, body, footer: only the body scrolls (.smallModal has three rows, so the tabs took the 1fr row and
     were squeezed to nothing once the account list grew taller than the screen). */
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.carrierAccountsBody {
  display: grid;
  gap: 12px;
}

.carrierAccountsBody p {
  margin: 0;
}

.carrierAccountRow,
.carrierPickupAccount,
.carrierAccountAdd {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

.carrierAccountHead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.carrierAccountActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.carrierAccountActions input {
  flex: 1 1 200px;
  min-width: 0;
}

/* The account's GHN shops / GHTK pick addresses under its row (renderCarrierAccountPickups). */
.carrierAccountPickups {
  display: grid;
  gap: 6px;
}

.carrierAccountPickup {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #f8fafc;
}

.carrierAccountPickup .carrierAccountActions {
  justify-content: space-between;
}

.carrierAccountAdd h3 {
  margin: 0;
}

.carrierAccountAdd > button {
  justify-self: start;
  min-width: 140px;
}

.carrierAccountFields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.carrierAccountFields .shippingConnectField {
  width: 100%;
}

.carrierPickupsTab {
  display: grid;
  gap: 12px;
}

/* One text size in the box (owner 24/10/2026: "Giao diện có text to nhỏ bất thường"): the Sapo look's 14px text and
   36px controls everywhere, instead of the old connect form's 30px title, 24px headings, 18px labels, 60px inputs and
   20px footer buttons next to the 14px account rows. */
.carrierAccountsModal .shippingConnectHeader h2 {
  font-size: 20px;
}

.carrierAccountsModal .ghtkSettingsTabs,
.carrierAccountsModal .ghtkSettingsTabs button {
  min-height: 44px;
}

.carrierAccountsModal .ghtkSettingsTabs button {
  font-size: 14px;
  font-weight: 600;
}

.carrierAccountsModal h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.carrierAccountsModal .shippingConnectField {
  gap: 4px;
  font-size: 14px;
}

.carrierAccountsModal .shippingConnectField input,
.carrierAccountsModal .carrierAccountActions input {
  min-height: 36px;
  padding: 0 10px;
  font-size: 14px;
}

.carrierAccountsModal .shippingConnectFooter {
  padding: 12px 20px;
}

.carrierAccountsModal .shippingConnectFooter button {
  min-height: 36px;
  font-size: 14px;
}

.carrierAccountPickupButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.carrierAccountsModal .ghtkSettingsBody {
  padding: 16px 20px;
}

.carrierAccountsModal .ghtkWarehouseTable {
  margin-top: 0;
}

.carrierAccountsModal .ghtkWarehouseHead,
.carrierAccountsModal .ghtkWarehouseRow {
  grid-template-columns: minmax(110px, 0.8fr) minmax(150px, 1.2fr) minmax(200px, 1.5fr);
  gap: 12px;
  min-height: 0;
  padding: 10px 12px;
  font-size: 14px;
}

.carrierAccountsModal .ghtkWarehouseRow select {
  width: 100%;
  min-width: 0;
  min-height: 36px;
}

@media (max-width: 640px) {
  .carrierAccountsModal .ghtkWarehouseHead {
    display: none;
  }

  .carrierAccountsModal .ghtkWarehouseRow {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.ghnCandidates {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
}

.cloneFulfillmentBody .cloneCarrierRates td label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.cloneFulfillmentBody .cloneCarrierRates td label input {
  width: auto;
  margin: 0;
}

/* Tổng quan vận chuyển */
.shippingOverviewMain > * + * { margin-top: 16px; }
.shippingOverviewMain > .overviewCard { max-width: 1400px; }
.shippingLocations { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; }
.shippingLocations label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.shippingSection { margin: 8px 0 0; font-size: 16px; font-weight: 700; color: #1f2d3d; }
.shippingGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shippingStatus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shippingStatus .overviewPendingItem { display: grid; grid-template-columns: 1fr auto; cursor: default; }
.shippingStatus .overviewPendingItem .overviewMuted { grid-column: 2; text-align: right; }
.shippingTable { width: 100%; border-collapse: collapse; font-size: 13px; }
.shippingTable th, .shippingTable td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; }
.shippingTable th:first-child, .shippingTable td:first-child { text-align: left; }
.shippingTable th { color: var(--muted); font-weight: 600; }
.shippingTable tr.total td { font-weight: 700; }
.shippingFilters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 1400px; }
.shippingFilters .shippingSection { margin: 0 auto 0 0; }
.shippingFilters .overviewRange { margin-left: 0; }
.shippingTerm { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.shippingTerm button { background: var(--panel); border: 0; padding: 5px 10px; font-size: 13px; cursor: pointer; color: var(--muted); }
.shippingTerm button.active { background: var(--blue); color: #fff; }
.shippingSummary { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 12px; }
.shippingSummary .overviewStat strong { font-size: 18px; }
@media (max-width: 900px) {
  .shippingGrid, .shippingStatus, .shippingSummary { grid-template-columns: minmax(0, 1fr); }
  .shippingTable { display: block; overflow-x: auto; }
  .shippingOverviewMain .overviewCardHeader, .shippingOverviewMain .overviewCardActions { flex-wrap: wrap; }
  .shippingOverviewMain .overviewCardActions .overviewRange { max-width: 100%; }
}

.ghnOrderRow {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid #e5e7eb;
}

.ghnOrderRow > div:first-child {
  display: flex;
  gap: 10px;
  align-items: center;
}

.ghnOrderRow p {
  margin: 0;
}

.ghnOrderActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ghnOrderBody {
  display: grid;
  gap: 12px;
  padding: 16px 20px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.ghnOrderGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ghnOrderGrid4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ghnOrderField {
  display: grid;
  gap: 4px;
}

.ghnOrderField input,
.ghnOrderField select,
.ghnOrderField textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
}

.ghnOrderServices {
  display: grid;
  gap: 6px;
}

.ghnOrderService {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  align-items: center;
}

.ghnOrderConfirm {
  padding: 12px;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  background: #fffbeb;
}

.ghnOrderConfirm p {
  margin: 4px 0 0;
}

@media (max-width: 640px) {
  .ghnOrderGrid,
  .ghnOrderGrid4 {
    grid-template-columns: 1fr 1fr;
  }
}

.ghnOrderEvents summary {
  cursor: pointer;
  font-size: 13px;
  color: #6b7280;
}

.ghnOrderEvents ul {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13px;
}

.cloneShipmentRecipient { margin:0 0 6px; }
.carrierQuickPicks { display:grid; gap:14px; margin-bottom:24px; }
.carrierQuickPick { display:flex !important; flex-direction:row !important; align-items:center; gap:10px; margin:0 !important; font-size:15px; }
.carrierQuickPick input,.carrierServiceOption input { width:18px !important; height:18px; min-height:0 !important; flex:0 0 18px; accent-color:#0088ff; margin:0; }
.rateBadge { font-weight:600; font-size:14px; }
.rateBadgeFast { color:#0088ff; }
.rateBadgeCheap { color:#f26522; }
.carrierRatesPanel .cloneCarrierRates td { padding:14px 12px; vertical-align:middle; border-bottom:1px solid #eef0f2; }
.carrierRatesPanel .cloneCarrierRates th:first-child,.carrierLogoCell { width:24%; }
.carrierRatesPanel .cloneCarrierRates th:last-child { text-align:right; }
.carrierLogoCell { text-align:center; vertical-align:top !important; }
.carrierLogo { font-weight:800; font-style:italic; font-size:15px; white-space:nowrap; margin-bottom:10px; }
.carrierLogoGhn { color:#f26522; }
.carrierLogoAhamove { color:#ff6d00; }
.carrierLogoGhtk { color:#069255; }
.carrierLogoGrab { color:#00b14f; }
.carrierRatesNote { margin:8px 0 0; font-size:13px; }
.ghnDetailWide { grid-column:1 / -1; }
.carrierAccount { display:inline-block; background:#f4f6f8; color:#0088ff; border-radius:4px; padding:8px 14px; font-size:14px; }
.carrierServiceOption { display:flex !important; flex-direction:row !important; align-items:center; gap:10px; margin:0 !important; }
.carrierFee { text-align:right; font-variant-numeric:tabular-nums; }
.ghnOrderModal .cloneDeliveryTabs button:disabled,.ghnOrderModal footer button:disabled { opacity:.55; cursor:not-allowed; }
.ghnWardPicker { margin-top:10px; display:grid; gap:10px; }
.ghnWardPicker p { margin:0; }
.ghnWardPickerRow { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:8px; align-items:center; }
.ghnWardPickerRow select { min-height:36px; }
@media(max-width:640px) { .ghnWardPickerRow { grid-template-columns:1fr; } }
.codPendingLine { display:flex; align-items:center; gap:8px; margin:14px 0 0 12px; }
.codPendingDot { width:10px; height:10px; border-radius:50%; background:#ffb020; flex:0 0 10px; }
.ghnWaybillActions { display:flex; gap:6px; flex-wrap:wrap; }
.ghnWaybillError { font-size:12px; margin-top:4px; max-width:260px; }
.ghnWaybillIntro { padding:0 16px; margin:12px 0 0; }
.ghnWaybillSummary { border-bottom:1px solid #eef0f2; padding-bottom:12px; margin-bottom:12px; }
.ghnWaybillTools { margin-left:auto; display:flex; gap:12px; }
.sapoOrderEditModal { width:min(720px,calc(100vw - 32px)); }
.sapoOrderEditGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
.sapoOrderEditModal textarea { width:100%; box-sizing:border-box; font:inherit; border:1px solid #d3dbe2; border-radius:4px; padding:10px 12px; }
@media(max-width:640px) { .sapoOrderEditGrid { grid-template-columns:1fr; } }
.shipmentBadgeCancelled { background:#ffe8e6; color:#c0392b; }
.shipmentTimeline { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.shipmentTimeline li { display:grid; grid-template-columns:170px 1fr; gap:16px; }
.blueText { color:#0088ff; }
.shipmentDetailPage .shipmentLineTable th:nth-child(2) { width:40%; }
.shipmentDetailPage .shipmentLineTable td:nth-child(2) { white-space:normal; overflow:visible; text-overflow:clip; }
.shipmentDetailPage .shipmentLineTable td:nth-child(2) strong, .shipmentDetailPage .shipmentLineTable td:nth-child(2) small { display:block; white-space:normal; }
.sapoSessionBanner { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; padding:10px 16px; background:#fdecea; color:#8a1f11; border-bottom:1px solid #f5c6c0; font-size:14px; }
.sapoSessionBanner .linkButton { margin-left:auto; }
.sapoShipmentActionModal { width:min(576px,calc(100vw - 32px)); }

/* Tạo đơn: "Thêm địa chỉ giao hàng" (Sapo-style) */
.orderCreateAddressModal { width: min(760px, calc(100vw - 32px)); }
.orderCreateAddressModal label { display: grid; gap: 6px; color: var(--text); font-size: 14px; }
.orderCreateAddressModal input:not([type=checkbox]), .orderCreateAddressModal select { width: 100%; box-sizing: border-box; min-height: 40px; border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; font: inherit; background: white; }
.addressModalTwoCols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.addressModalArea { display: grid; gap: 16px; margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: #f8f9fa; }
.addressModalArea .addressModalSwitch { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.orderCreateAddressModal footer { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 640px) { .addressModalTwoCols { grid-template-columns: 1fr; } }

/* GHN ward picker: suggestions from Sapo's new->old address conversion */
.ghnWardSuggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }

/* GHN "Gửi thông tin sang đối tác vận chuyển": step 2 (Sapo-style details after a service is picked) */
.ghnOrderDetails { display: grid; gap: 14px; align-content: start; min-width: 0; }
.ghnOrderDetails h3 { margin: 0; font-size: 16px; }
.ghnDetailPartner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 6px; background: #eef4ff; }
.ghnDetailGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.ghnDetailField { display: grid; gap: 6px; align-content: start; font-size: 14px; color: var(--text); }
.ghnDetailField > span { color: var(--muted); }
.ghnDetailField select, .ghnDetailField input:not([type=checkbox]):not([type=radio]) { width: 100%; box-sizing: border-box; min-height: 40px; border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; font: inherit; background: white; }
.ghnDetailRadios { display: flex; gap: 24px; min-height: 40px; align-items: center; }
.ghnDetailRadios label, .ghnDetailCheck { display: inline-flex; align-items: center; gap: 8px; }
.ghnCouponRow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.ghnDetailFee { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); font-size: 16px; }
.ghnOfficialNote { margin: 0 0 8px; }
@media (max-width: 760px) { .ghnDetailGrid { grid-template-columns: 1fr; } }

/* Amount fields (moneyInputAttrs): right-aligned like Sapo, tabular digits. */
input.moneyField { text-align: right; font-variant-numeric: tabular-nums; }

/* Checkboxes and radios: one compact, consistent look (blue accent). Dialog rules that size every input
   (.cloneFulfillmentBody input { width:100% }, .cloneShipmentCreateFields input { min-height:40px }) must not
   stretch them. */
input[type=checkbox], input[type=radio] { accent-color: #0a6cff; cursor: pointer; }
input[type=checkbox]:disabled, input[type=radio]:disabled { cursor: not-allowed; }
.cloneFulfillmentBody input:is([type=checkbox], [type=radio]),
.cloneShipmentCreateFields input:is([type=checkbox], [type=radio]),
.orderCreateAddressModal input:is([type=checkbox], [type=radio]) {
  width: 18px; height: 18px; min-width: 18px; min-height: 0; margin: 0; padding: 0; flex: 0 0 18px;
}
.cloneFulfillmentBody .ghnDetailRadios label,
.cloneFulfillmentBody .ghnDetailCheck,
.cloneFulfillmentBody .carrierServiceOption {
  display: inline-flex; flex-direction: row; align-items: center; gap: 10px; font-size: 14px; color: var(--text); cursor: pointer;
}
.cloneFulfillmentBody .ghnDetailRadios { display: flex; gap: 28px; min-height: 40px; align-items: center; }
.cloneFulfillmentBody .ghnDetailCheck { min-height: 40px; }
.cloneFulfillmentBody .ghnDetailField:has(.ghnDetailCheck) { align-content: end; }
.cloneFulfillmentBody .ghnDetailCheck:has(input:disabled) { color: var(--muted); cursor: not-allowed; }
.cloneFulfillmentBody .ghnDetailRadios { flex-wrap: wrap; row-gap: 8px; }
.cloneFulfillmentBody .ghnDetailRadios label { white-space: nowrap; }

/* Cấu hình → Hiển thị ngày giờ */
.timeZoneSetting { display: grid; gap: 10px; }
.timeZoneSetting > p { margin: 0; font-size: 13px; }
.timeZoneOption { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); cursor: pointer; max-width: 720px; }
.timeZoneOption:has(input:checked) { border-color: var(--blue); }
.timeZoneOption input { margin-top: 3px; }
.timeZoneOption span { display: grid; gap: 2px; }
.timeZoneOption small { color: var(--muted); font-size: 13px; }

/* "Thêm địa chỉ giao hàng" (Sapo-style, shared): info banner, "Địa chỉ mới" switch, required marks, convert panel. */
.sapoAddressBackdrop { z-index: 1200; }
.addressModalInfo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; margin-bottom: 18px; padding: 14px 16px; border: 1px solid #0a6cff; border-radius: 8px; background: #f0f6ff; font-size: 14px; }
.addressModalInfo p { margin: 0; line-height: 1.5; }
.addressModalInfo .linkButton { padding: 0; font: inherit; }
.addressModalInfoIcon { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid #0a6cff; border-radius: 50%; color: #0a6cff; font-size: 12px; font-weight: 700; margin-top: 2px; }
.addressModalInfoClose { border: 0; background: none; color: #8a94a3; font-size: 20px; line-height: 1; cursor: pointer; }
.addressModalArea { padding: 0; overflow: hidden; background: white; gap: 0; }
.addressModalArea .addressModalSwitch { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #f3f4f6; border-bottom: 1px solid var(--line); font-weight: 500; cursor: pointer; }
.addressModalFields { display: grid; gap: 16px; padding: 16px 18px 18px; }
.cloneFulfillmentBody .addressModalSwitch input[type=checkbox] { appearance: none; -webkit-appearance: none; position: relative; width: 36px; height: 20px; min-width: 36px; flex: 0 0 36px; border-radius: 999px; background: #c9ced6; transition: background .15s; }
.cloneFulfillmentBody .addressModalSwitch input[type=checkbox]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.cloneFulfillmentBody .addressModalSwitch input[type=checkbox]:checked { background: #0a6cff; }
.cloneFulfillmentBody .addressModalSwitch input[type=checkbox]:checked::after { transform: translateX(16px); }
.requiredMark { color: #e5484d; font-style: normal; }
.addressModalConvert { display: grid; gap: 10px; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fafbfc; font-size: 14px; }
.cloneFulfillmentBody .addressModalConvertOption { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.addressModalConvertActions { display: flex; justify-content: flex-end; gap: 8px; }
.addressModalFooter { display: flex; align-items: center; gap: 8px; }
.addressModalFooterSpacer { flex: 1; }
.addressModalConvertLink { font-size: 15px; }
.cloneFulfillmentBody .addressModalArea label.addressModalSwitch { flex-direction: row; justify-content: flex-start; }
.cloneFulfillmentBody .addressModalArea label.addressModalSwitch input[type=checkbox] { height: 20px; min-height: 0; max-height: 20px; }

/* Sapo shipment actions with a menu ("Hủy giao hàng ▾", "Đã giao hàng ▾"), as Sapo's order page. */
.splitAction { position: relative; display: inline-flex; }
.splitAction > button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.splitAction > .splitActionCaret { min-width: 32px; padding: 0 8px; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgba(255, 255, 255, 0.35); }
.splitAction > .dangerButton.splitActionCaret { border-left-color: currentColor; }
.splitActionMenu { width: 220px; }
.splitActionMenu button { min-height: 40px; }
/* "Phí trả ĐTVC" with its pencil. */
.freightValue { display: inline-flex; align-items: center; gap: 6px; }
.metaRow strong .freightEditButton { width: 24px; height: 24px; min-width: 24px; padding: 0; border: 0; background: transparent; color: var(--blue); cursor: pointer; font-size: 14px; line-height: 1; }
.metaRow strong .freightEditButton:hover { background: #f2f7ff; border-radius: 4px; }
.shipmentStatusLine strong .metaLink { font-weight: 600; }

/* "Đóng gói và giao hàng" shipment rows, as Sapo's order page. */
.shipmentCard { display: grid; gap: 16px; padding: 16px 0; }
.shipmentCard + .shipmentCard { border-top: 1px solid var(--line); }
.shipmentCard:first-child { padding-top: 4px; }
.shipmentCard:last-child { padding-bottom: 4px; }
.shipmentCardHead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 32px; }
.shipmentCardHead .shipmentDot { width: 10px; height: 10px; flex: none; background: var(--blue); }
.shipmentCardHead > a { color: var(--blue); font-weight: 500; text-decoration: none; }
.shipmentCardHead > a:hover { text-decoration: underline; }
.shipmentCopy, .shipmentToolButton { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 4px; background: transparent; color: #8a94a3; font-size: 18px; cursor: pointer; padding: 0; }
.shipmentCopy:hover, .shipmentToolButton:hover:not(:disabled) { background: #f2f7ff; color: var(--blue); }
.shipmentToolButton:disabled { cursor: wait; opacity: .5; }
.shipmentToolText { width: auto; padding: 0 6px; font-size: 12px; font-weight: 600; border: 1px solid var(--line); height: 24px; }
.shipmentHeadDivider { width: 1px; height: 22px; background: var(--line); }
.shipmentStatus { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; font: inherit; padding: 2px 4px; cursor: pointer; border-radius: 4px; }
.shipmentStatus:hover { background: #f5f7fa; }
.shipmentStatus.active { color: #e8940c; }
.shipmentStatus.done { color: #20b26b; }
.shipmentStatus.cancelled { color: #ee4747; }
.shipmentCaret { color: #8a94a3; font-size: 12px; }
.shipmentTime { color: #6b7684; margin-left: 8px; }
.shipmentCardTools { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.shipmentCardBody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; padding-left: 38px; }
.shipmentMetaColumn { display: grid; gap: 12px; align-content: start; }
.shipmentMetaRow { display: grid; grid-template-columns: 170px 16px minmax(0, 1fr); align-items: baseline; }
.shipmentMetaLabel { color: var(--text); }
.shipmentMetaColon { color: var(--text); }
.shipmentMetaValue { overflow-wrap: anywhere; }
.shipmentMetaValue a, .shipmentMetaValue.link { color: var(--blue); text-decoration: none; }
.shipmentMetaValue a:hover { text-decoration: underline; }
.shipmentMetaValue.danger { color: #ee4747; }
.shipmentMetaValue.success { color: #20b26b; }
.shipmentCard .ghnOrderEvents { padding-left: 38px; }
.shipmentCard > .dangerText, .shipmentCard > .error { margin: 0; padding-left: 38px; }
@media (max-width: 980px) {
  .shipmentCardBody { grid-template-columns: 1fr; gap: 12px; padding-left: 0; }
  .shipmentMetaRow { grid-template-columns: 140px 12px minmax(0, 1fr); }
  .shipmentTime { margin-left: 0; }
}
/* Split buttons in the card header: outlined red "Hủy giao hàng ▾", blue "Đã giao hàng ▾". */
.splitAction > .splitActionCaret { min-width: 44px; }
.splitAction > .splitActionCaret { font-size: 14px; line-height: 1; }

/* Danh sách sản phẩm like Sapo: » opens a combo's components or a product's versions under its row. */
.productListMain .productsTable .productStockCell { text-align: center; }
.productListMain .productStockCell > span { display: block; }
.productVariantCount { margin-top: 2px; color: var(--muted); font-size: 12px; }
.productListMain .productTextCell { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.productExpandButton { border: 0; background: none; color: #8a9199; font-size: 20px; line-height: 1; padding: 2px 6px; cursor: pointer; transition: transform .15s; }
.productExpandButton:hover { color: var(--blue); }
.productExpandButton.open { color: var(--blue); transform: rotate(90deg); }
.productListMain .productRowExpanded > td,
.productListMain .productChildrenRow > td { background: #eef6ff; }
.productListMain .productsTable .productChildrenRow > td { height: auto; padding: 0 16px 24px 72px; }
.productChildrenTable { width: auto; min-width: 680px; max-width: 1100px; background: white; border-collapse: collapse; }
.productChildrenTable th { padding: 12px 20px; font-weight: 600; text-align: left; background: white; border-bottom: 1px solid var(--line); white-space: nowrap; }
.productChildrenTable td { padding: 10px 20px; height: auto; background: white; }
.productChildrenTable th:first-child, .productChildrenTable td:first-child { min-width: 420px; padding-left: 20px; }
.productChildrenTable .numberCell { text-align: right; }
.productChildItem { display: flex; align-items: center; gap: 14px; }
.productChildItem .productListThumb { width: 36px; height: 36px; object-fit: contain; border: 0; }
.productChildName { display: block; max-width: 440px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.productChildSku { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.productsTable .productChildrenTable th:nth-child(n+2),
.productsTable .productChildrenTable td:nth-child(n+2) { min-width: 120px; }

/* Đơn hàng: an opened row shows the order like Sapo (info, customer, note, lines, totals). */
.ordersTable .orderExpandedRow > td { padding: 0 20px 20px 20px; background: #eef6ff; }
.orderExpandTop { display: flex; align-items: flex-start; gap: 20px; }
.orderExpandCard { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(240px, 1fr) minmax(240px, 1fr); max-width: 1180px; flex: 1; background: white; border-radius: 4px; padding: 20px 24px; }
.orderExpandCard > div { padding: 0 20px; white-space: normal; }
.orderExpandCard > div:first-child { padding-left: 0; }
.orderExpandCard > div + div { border-left: 1px solid var(--line); }
.orderExpandCard h4 { margin: 0 0 14px; font-size: 15px; font-weight: 500; }
.orderExpandCard h4 + p, .orderExpandCard p { margin: 0 0 12px; line-height: 1.5; }
.orderExpandMeta { display: flex; gap: 10px; margin-bottom: 10px; }
.orderExpandMeta > span:first-child { min-width: 150px; color: var(--muted); }
.orderExpandActions { display: flex; flex-direction: column; gap: 14px; min-width: 160px; }
.orderExpandActions button { min-height: 44px; }
.orderExpandActions button:not(.primaryAction) { color: var(--blue); border-color: var(--blue); background: white; }
.orderExpandProducts { max-width: 1360px; margin-top: 24px; background: white; border-radius: 4px; }
.orderExpandProducts table { width: 100%; border-collapse: collapse; }
.orderExpandProducts th { padding: 16px; font-weight: 500; text-align: left; border-bottom: 1px solid var(--line); }
.orderExpandProducts td { height: auto; padding: 14px 16px; border-bottom: 1px solid var(--line); white-space: normal; }
.orderExpandProducts .numberCell { text-align: right; }
.orderExpandLineName { min-width: 320px; max-width: 420px; }
.orderExpandFooter { display: flex; justify-content: space-between; align-items: flex-end; padding: 20px 20px 16px; }
.orderExpandTotals { min-width: 380px; }
.orderExpandTotals .orderExpandMeta { justify-content: space-between; }
.orderExpandTotals .orderExpandMeta > span:first-child { color: inherit; }
.orderExpandDue { font-weight: 600; }
/* The order table scrolls sideways; the opened order stays in view at the left, as wide as the screen allows. */
.orderExpandInner { position: sticky; left: 20px; width: min(1400px, calc(100vw - 340px)); min-width: 900px; }
.navCollapsed .orderExpandInner { width: min(1400px, calc(100vw - 176px)); }
.orderExpandProducts { max-width: none; }
.orderExpandProducts th:nth-child(1), .orderExpandProducts td:nth-child(1) { width: 64px; white-space: nowrap; }
.orderExpandProducts th:nth-child(2), .orderExpandProducts td:nth-child(2) { width: 72px; }
.orderExpandProducts th:nth-child(3), .orderExpandProducts td:nth-child(3) { width: 160px; white-space: nowrap; }
.orderExpandProducts th:nth-child(4) { width: 34%; }

/* Kênh Social → Quản lý trang: channel icons, connected pages and the Kết nối / Zalo QR dialogs (social-channels.js). */
.socialChannelIcon { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:5px; color:#fff; font-size:9px; font-weight:700; line-height:1; flex:none; background:#64748b; letter-spacing:-.2px; }
.socialChannelIcon.sapo, .socialChannelIcon.facebook { background:#1877f2; font-size:13px; font-family:Arial, sans-serif; }
.socialChannelIcon.instagram { background:linear-gradient(45deg, #f09433, #dc2743 55%, #bc1888); }
.socialChannelIcon.zalo_oa { background:#0068ff; }
.socialChannelIcon.zalo { background:#fff; color:#0068ff; border:1.5px solid #0068ff; font-size:7px; }
.socialChannelIcon.tiktok { background:#111; font-size:12px; }
.socialChannelIcon.shopee { background:#ee4d2d; font-size:12px; }
.socialChannelIcon.large { width:40px; height:40px; border-radius:10px; font-size:15px; }
.socialChannelIcon.large.zalo { font-size:11px; border-width:2px; }
.socialChannelIcon.large.sapo, .socialChannelIcon.large.facebook { font-size:26px; }
/* Corner badge on an avatar: the channel's own logo (Facebook: white f on the blue disc; Zalo: blue wordmark on white). */
.socialChannelIcon.corner { position:absolute; right:-5px; bottom:-4px; width:22px; height:22px; border:2px solid #fff; border-radius:50%; font-size:8px; box-sizing:border-box; }
.socialChannelIcon.corner.sapo, .socialChannelIcon.corner.facebook { background:#fff url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22%231877f2%22%20d=%22M9.101%2023.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085%201.848-5.978%205.858-5.978.401%200%20.955.042%201.468.103a8.68%208.68%200%200%201%201.141.195v3.325a8.623%208.623%200%200%200-.653-.036%2026.805%2026.805%200%200%200-.733-.009c-.707%200-1.259.096-1.675.309a1.686%201.686%200%200%200-.679.622c-.258.42-.374.995-.374%201.752v1.297h3.919l-.386%202.103-.287%201.564h-3.246v8.245C19.396%2023.238%2024%2018.179%2024%2012.044c0-6.627-5.373-12-12-12s-12%205.373-12%2012c0%205.628%203.874%2010.35%209.101%2011.647Z%22/%3E%3C/svg%3E") center/100% 100% no-repeat; color:transparent; font-size:0; }
.socialChannelIcon.corner.zalo { background:#fff; color:#0068ff; border:0; box-shadow:0 0 0 1px #c9d3e0, 0 0 0 2.5px #fff; font-family:Arial, sans-serif; font-size:7.5px; font-weight:800; letter-spacing:-.3px; }
.socialRowIcons .socialIsComment { width:16px; height:16px; border-radius:0; flex:none; background:#8a94a3; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M4%205h16v10H9l-5%204z%22%20fill=%22black%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M4%205h16v10H9l-5%204z%22%20fill=%22black%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialRowAvatar, .socialPageCardAvatar { position:relative; }
.socialChannelTabs { display:flex; flex-wrap:wrap; gap:4px; }
.socialChannelTabs button { display:inline-flex; align-items:center; gap:6px; border:0; border-bottom:2px solid transparent; background:none; padding:8px 10px; font:inherit; font-size:13px; color:#334155; cursor:pointer; }
.socialChannelTabs button.active { border-bottom-color:#0088ff; color:#0088ff; font-weight:600; }
.socialConnectBadge { position:absolute; top:-9px; left:10px; padding:1px 8px; border-radius:10px; background:#e0edff; color:#0b5bd3; font-size:11px; font-weight:600; }
.socialConnectBadge.inline { position:static; }
.socialPageGroup { display:grid; gap:8px; }
.socialPageGroup h4 { margin:8px 0 0; font-size:12px; color:#64748b; letter-spacing:.3px; }
.socialPageGrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px; }
.socialPageCard { display:flex; align-items:flex-start; gap:10px; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--panel, #fff); min-width:0; }
.socialPageCardAvatar { width:40px; height:40px; border-radius:50%; background:#e2e8f0; flex:none; }
.socialPageCardAvatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.socialPageCardText { display:grid; gap:2px; min-width:0; flex:1; }
.socialPageCardText b, .socialPageCardText span { overflow:hidden; text-overflow:ellipsis; }
.socialPageState { font-size:12px; font-weight:600; }
.socialPageState.ok { color:#0f9d58; }
.socialPageState.warn { color:#d97706; }
.socialPageCardActions { display:flex; flex-direction:column; gap:6px; flex:none; }
.socialSort.danger { color:#e02424; border-color:#f3b4b4; }
.socialConnect { width:min(760px, 100%); }
.socialConnectGrid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 12px; padding-top:6px; }
.socialConnectItem { position:relative; display:flex; align-items:center; gap:14px; padding:18px 16px; border:1px solid var(--line); border-radius:10px; background:#fff; font:inherit; font-size:15px; text-align:left; cursor:pointer; }
.socialConnectItem:hover:not(:disabled) { border-color:#0088ff; }
.socialConnectItem:disabled { cursor:not-allowed; opacity:.65; }
.socialConnectItem b { flex:1; font-weight:600; }
.socialConnectAction { color:#0088ff; font-size:14px; }
.socialConnectItem.soon .socialConnectAction { color:#94a3b8; }
.socialZaloQr { width:min(760px, 100%); }
.socialZaloQrBody { display:grid; grid-template-columns:minmax(0, 260px) minmax(0, 1fr); gap:24px; align-items:start; }
.socialZaloQrCode { display:grid; justify-items:center; gap:8px; }
.socialZaloQrCode img { width:100%; max-width:260px; aspect-ratio:1; border:2px solid #0068ff; border-radius:8px; padding:6px; background:#fff; }
.socialZaloQrCode small { color:#64748b; }
.socialZaloQrWait { width:100%; aspect-ratio:1; max-width:260px; display:grid; place-content:center; justify-items:center; gap:10px; border:2px dashed #cbd5e1; border-radius:8px; color:#64748b; text-align:center; padding:12px; }
.socialZaloQrSteps { display:grid; gap:10px; font-size:14px; }
.socialZaloQrSteps ol { margin:0; padding-left:18px; display:grid; gap:8px; }
.socialZaloQrNote { border:1px solid #0088ff; background:#f0f7ff; border-radius:6px; padding:10px 12px; font-size:13px; line-height:1.5; }
@media (max-width: 640px) {
  .socialConnectGrid { grid-template-columns:1fr; }
  .socialZaloQrBody { grid-template-columns:1fr; }
}

/* Kênh Social → Zalo messages: group authors, quoted replies, @mentions, stickers, voice and video. */
.socialSender { display:block; margin:0 0 2px 4px; color:#64748b; font-size:12px; }
.socialAvatarGap { width:30px; flex:none; }
.socialMessage.followUp { margin-top:-6px; }
.socialQuote { display:grid; gap:2px; margin:0 0 6px; padding:6px 10px; border-left:3px solid #0068ff; border-radius:6px; background:rgb(0 104 255 / 7%); font-size:13px; }
.socialQuote b { font-weight:600; }
.socialQuote span { color:#475569; white-space:pre-wrap; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
/* Trả lời: a quote of a line POS has opens it (the chat scrolls there and the line flashes), like Zalo. */
.socialQuote.link { cursor:pointer; }
.socialQuote.link:hover { background:rgb(0 104 255 / 13%); }
.socialQuote.link:focus-visible { outline:2px solid #0068ff; outline-offset:1px; }
.socialQuote.withPicture { grid-template-columns:40px minmax(0,1fr); column-gap:8px; align-items:center; }
.socialQuote.withPicture img { grid-row:span 2; width:40px; height:40px; object-fit:cover; border-radius:4px; background:#f2f4f7; }
/* The quoted line after a click on its quote: a still blue frame 12 px bigger than its bubbles, then it fades (3.2 s =
   FLASH_MS in social-inbox.js; the line's inline animation-delay is how far it already is after a redraw). Owner
   15/10/2026: the first light blue behind the whole row could hardly be seen; no amber, no blinking — a blue frame
   bigger than the message. */
.socialMessage.flash .socialBubbleWrap { border-radius:14px; animation:socialFlash 3.2s ease-out both; animation-delay:inherit; }
@keyframes socialFlash {
  0%, 75% { background:rgb(0 104 255 / 22%); box-shadow:0 0 0 12px rgb(0 104 255 / 22%); }
  100% { background:rgb(0 104 255 / 0%); box-shadow:0 0 0 12px rgb(0 104 255 / 0%); }
}
.socialMention { color:#0068ff; font-weight:500; }
.socialImage.sticker img { max-width:120px; max-height:120px; border:0; background:transparent; }
.socialVideo { display:block; max-width:280px; max-height:320px; border-radius:12px; background:#000; }
.socialAudio { display:block; max-width:280px; }
/* Zalo cá nhân: Trả lời / Thả cảm xúc on hover and the reactions under a message. */
.socialBubbleWrap { position:relative; }
/* Right beside the bubble; the padding is an invisible bridge so the pointer never leaves the hover area on the way. */
.socialMsgTools { position:absolute; top:50%; left:100%; transform:translateY(-50%); display:none; align-items:center; gap:2px; padding:0 4px 0 6px; z-index:3; }
.socialMessage.out .socialMsgTools { left:auto; right:100%; padding:0 6px 0 4px; }
.socialMessage:hover .socialMsgTools, .socialMsgTools:has(.socialReactPick) { display:flex; }
.socialMsgTools > button { width:24px; height:24px; padding:0; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:50%; background:#fff; color:#475569; font-size:13px; line-height:1; cursor:pointer; box-shadow:0 1px 3px rgb(0 0 0 / 8%); }
.socialMsgTools > button:hover { color:#0068ff; border-color:#0068ff; }
.socialReactPick { position:absolute; top:calc(100% + 4px); left:0; display:flex; gap:2px; padding:4px 6px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 4px 14px rgb(0 0 0 / 12%); }
.socialMessage.out .socialReactPick { left:auto; right:0; }
.socialReactPick button { border:0; background:none; font-size:20px; line-height:1; padding:2px; border-radius:50%; cursor:pointer; }
.socialReactPick button:hover, .socialReactPick button.mine { background:#e8f1ff; }
.socialReactions { display:flex; flex-wrap:wrap; gap:4px; margin-top:-8px; }
.socialMessage.out .socialReactions { justify-content:flex-end; }
.socialReactions span { padding:1px 6px; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:12px; }
.socialReactions span.mine { border-color:#0068ff; background:#e8f1ff; }
.socialQuoteReply { border-left:3px solid #0068ff; }
.socialMessage.out .socialQuote { background:rgb(255 255 255 / 20%); border-left-color:#fff; }
.socialMessage.out .socialQuote span { color:rgb(255 255 255 / 85%); }
.socialMessage.out .socialQuote.link:hover { background:rgb(255 255 255 / 30%); }
.socialMessage.out .socialQuote.link:focus-visible { outline-color:#fff; }

/* Kênh Social: in-page picture viewer (social-inbox.js renderViewer). */
.socialViewer { position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; background:rgb(10 14 20 / 94%); padding:56px 72px 96px; }
.socialViewerBar { position:absolute; top:0; left:0; right:0; display:flex; align-items:center; gap:14px; padding:10px 16px; color:#e2e8f0; font-size:13px; }
.socialViewerBar a { color:#e2e8f0; text-decoration:none; padding:5px 10px; border:1px solid rgb(255 255 255 / 25%); border-radius:6px; }
.socialViewerBar a:hover { background:rgb(255 255 255 / 12%); }
.socialViewerClose { border:0; background:none; color:#fff; font-size:30px; line-height:1; cursor:pointer; padding:0 6px; }
.socialViewerMedia { max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; cursor:zoom-in; box-shadow:0 10px 40px rgb(0 0 0 / 40%); }
.socialViewerMedia.zoomed { max-width:none; max-height:none; cursor:zoom-out; }
.socialViewer:has(.zoomed) { overflow:auto; align-items:flex-start; justify-content:flex-start; }
video.socialViewerMedia { cursor:default; background:#000; }
.socialViewerNav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border:0; border-radius:50%; background:rgb(255 255 255 / 14%); color:#fff; font-size:30px; line-height:1; cursor:pointer; }
.socialViewerNav:hover { background:rgb(255 255 255 / 26%); }
.socialViewerNav.prev { left:16px; }
.socialViewerNav.next { right:16px; }
.socialViewerStrip { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); display:flex; gap:6px; max-width:calc(100% - 32px); overflow-x:auto; padding:4px; }
.socialViewerStrip button { flex:none; width:56px; height:56px; padding:0; border:2px solid transparent; border-radius:6px; background:#1e293b; color:#fff; cursor:pointer; overflow:hidden; opacity:.6; }
.socialViewerStrip button.active { border-color:#fff; opacity:1; }
.socialViewerStrip img { width:100%; height:100%; object-fit:cover; }
@media (max-width: 640px) { .socialViewer { padding:52px 8px 84px; } .socialViewerNav { width:36px; height:36px; } }
/* Customer column: Ảnh/Video preview row; chat header: "Đã xem bởi". */
.socialMediaPreview .socialCustomerCardHead h3 { display:flex; align-items:baseline; gap:2px; }
.socialMediaThumbs { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; }
.socialMediaThumb { aspect-ratio:1; padding:0; border:1px solid var(--line); border-radius:8px; background:#f1f5f9; overflow:hidden; cursor:zoom-in; color:#475569; font-size:16px; }
.socialMediaThumb img { width:100%; height:100%; object-fit:cover; display:block; }
.socialViewedBy { display:block; color:#64748b; font-size:12px; }
.socialRowAvatar .socialMembers { position:absolute; left:-4px; top:-2px; z-index:2; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:#e2e8f0; color:#334155; font-size:10px; font-style:normal; font-weight:600; line-height:18px; text-align:center; border:1.5px solid #fff; }
.socialChatWho > * { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.socialChatWho .socialChatNameRow { display:flex; min-width:0; }
.socialChatWho .socialChatNameRow strong { overflow:hidden; text-overflow:ellipsis; }

/* Kênh Social Zalo: customer stats and ✎ form, Aa bar, 📎 files, Zalo stickers, call icon. */
.socialCustomerStats { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; font-size:12px; color:#475569; }
.socialProfileEdit { border:0; background:none; color:#0088ff; font-size:15px; cursor:pointer; padding:0 4px; }
.socialProfileForm { display:grid; gap:8px; padding:10px 12px; margin:6px 0; border:1px solid var(--line); border-radius:8px; background:#f8fafc; }
.socialProfileForm label { display:grid; gap:3px; font-size:12px; color:#475569; }
.socialProfileForm input { border:1px solid var(--line); border-radius:6px; padding:6px 8px; font:inherit; font-size:13px; }
.socialProfileActions { display:flex; justify-content:flex-end; gap:6px; }
.socialComposerText { display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 4px; border:0; border-radius:6px; background:none; color:#475569; font:inherit; font-size:15px; font-weight:600; cursor:pointer; }
.socialComposerText:hover, .socialComposerText.on { background:#e8f1ff; color:#0068ff; }
.socialComposerText.disabled { opacity:.4; pointer-events:none; }
.socialFormatBar { display:flex; gap:4px; padding:4px 16px; border-top:1px solid var(--line); background:#fff; }
.socialFormatBar button { width:30px; height:26px; border:1px solid var(--line); border-radius:5px; background:#fff; cursor:pointer; font-family:Georgia, serif; font-size:14px; }
.socialFormatBar .fmt-b { font-weight:700; } .socialFormatBar .fmt-i { font-style:italic; } .socialFormatBar .fmt-u { text-decoration:underline; } .socialFormatBar .fmt-s { text-decoration:line-through; }
.socialPendingFiles { display:flex; flex-wrap:wrap; gap:6px; padding:6px 16px; border-top:1px solid var(--line); background:#fff; }
.socialPendingFile { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border:1px solid var(--line); border-radius:12px; font-size:12px; background:#f8fafc; }
.socialPendingFile button { border:0; background:none; cursor:pointer; color:#64748b; font-size:14px; }
.socialStickerSearch { width:100%; border:1px solid var(--line); border-radius:6px; padding:6px 8px; font:inherit; font-size:13px; margin-bottom:8px; }
.socialHasCall { font-style:normal; font-size:11px; }

/* Kênh Social → Cảnh báo đơn “rơi” and Tình trạng hoạt động. */
.socialChips button.socialMissedChip { background:#fff4e5; color:#b54708; font-weight:600; }
.socialChips button.socialMissedChip.active { background:#f79009; color:#fff; }
.socialMissedNumber { width:90px; padding:5px 8px; border:1px solid var(--line); border-radius:6px; font:inherit; background:var(--panel); color:var(--text); }
.socialMissedRow { align-items:flex-start; }
.socialMissedWho { display:flex; flex-direction:column; gap:2px; min-width:0; }
.socialMissedSnippet { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:520px; }
.socialHealthRow { display:flex; flex-direction:column; gap:6px; padding:12px 14px; border:1px solid var(--line); border-left:4px solid #12b76a; border-radius:8px; background:var(--panel); }
.socialHealthRow.warn { border-left-color:#f79009; }
.socialHealthRow.error { border-left-color:#d92d20; }
.socialHealthRow.off { border-left-color:#98a2b3; }
.socialHealthHead { display:flex; align-items:center; gap:8px; }
.socialHealthName { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.socialHealthBadge { padding:2px 8px; border-radius:10px; font-size:12px; font-weight:600; background:#e6f4ea; color:#0f7b3f; }
.socialHealthBadge.warn { background:#fff4e5; color:#b54708; }
.socialHealthBadge.error { background:#fdecec; color:#b42318; }
.socialHealthBadge.off { background:var(--panel-2); color:var(--muted); }
.socialHealthMessage { margin:0; font-size:13px; }
.socialHealthDetails { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:6px 16px; font-size:12px; }
.socialHealthDetails span { display:flex; flex-direction:column; gap:1px; min-width:0; }
.socialHealthDetails small { color:var(--muted); font-size:12px; }
.socialHealthDetails b { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Zalo like Chat OmniAI: group avatars from members' faces, picture + caption cards, contact lines, inline notes. */
.socialAvatarGroup { display:grid; gap:1px; overflow:hidden; background:#fff; place-items:stretch; }
/* The base .socialAvatar img is absolute (one picture); in the grid each face takes its own cell. */
.socialAvatarGroup img { position:static; inset:auto; width:100%; height:100%; min-width:0; min-height:0; object-fit:cover; display:block; }
.socialAvatarGroup.n2 { grid-template-columns:1fr 1fr; }
.socialAvatarGroup.n3, .socialAvatarGroup.n4 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.socialAvatarGroup.n3 img:first-child { grid-row:span 2; }
.socialPhotoCard { max-width:280px; border-radius:14px; background:#fff; border:1px solid var(--line); overflow:hidden; box-shadow:0 1px 2px rgb(0 0 0 / 5%); }
.socialMessage.out .socialPhotoCard { background:#e5efff; }
.socialPhotoCardImage { display:block; background:#f8fafc; cursor:zoom-in; }
.socialPhotoCardImage img { display:block; width:100%; max-height:320px; object-fit:contain; }
.socialPhotoCardImage.expired { min-height:120px; display:grid; place-items:center; }
.socialPhotoCardImage.expired::after { content:"Ảnh đã hết hạn"; color:#64748b; font-size:12px; }
.socialPhotoCardText { padding:8px 12px 10px; white-space:pre-wrap; word-break:break-word; font-size:14px; }
.socialZaloContact { display:grid; gap:6px; padding:4px 12px 8px; font-size:13px; color:#334155; }
.socialZaloContactRow { display:flex; gap:8px; align-items:flex-start; }
.socialZaloContactRow .icon { width:16px; flex:none; text-align:center; }
.socialZaloContactRow select { border:0; background:none; font:inherit; color:inherit; padding:0; cursor:pointer; }
.socialNoteInline { width:100%; border:0; border-radius:10px; background:#f1f5f9; padding:10px 12px; font:inherit; font-size:13px; }
.socialNotesEmpty { display:block; text-align:center; padding:4px 0; }
.socialCustomerCardHead kbd { font:inherit; font-size:11px; padding:1px 6px; border-radius:4px; background:#f1f5f9; color:#475569; }

/* Kênh Social → Phân quyền and Công cụ AI. */
.socialOrderMore { align-self:center; }
.socialPermRow { display:flex; flex-direction:column; gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.socialPermHead { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.socialPermHead b { flex:1; min-width:200px; }
.socialPermCheck { display:inline-flex; align-items:center; gap:4px; font-size:13px; cursor:pointer; }
.socialPermPages { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px 16px; }
.socialPermGroup { display:flex; flex-direction:column; gap:4px; }
.socialPermEmail { width:260px; }
.socialReadOnly { margin:0 12px 8px; padding:8px 12px; border-radius:6px; background:#fff4e5; color:#b54708; font-size:13px; }
.socialAiToggle { font-size:13px; white-space:nowrap; }
.socialAiPanel { margin:0 12px 8px; padding:10px 12px; border:1px solid #c7d7fe; border-radius:8px; background:#f5f8ff; display:flex; flex-direction:column; gap:8px; max-height:260px; overflow:auto; }
.socialAiHead { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.socialAiHead > button:not(.socialAiIcon) { border:0; border-radius:14px; padding:4px 10px; background:#fff; color:var(--text); font:inherit; font-size:12px; cursor:pointer; }
.socialAiHead > button.active { background:#0068ff; color:#fff; }
.socialAiIcon { border:0; background:none; font-size:16px; cursor:pointer; color:#475569; padding:0 4px; }
.socialAiReplies { display:flex; flex-direction:column; gap:6px; }
.socialAiReply { text-align:left; border:1px solid #c7d7fe; border-radius:8px; padding:6px 10px; background:#fff; color:var(--text); font:inherit; font-size:13px; cursor:pointer; white-space:pre-wrap; }
.socialAiReply:hover { border-color:#0068ff; }
.socialAiRow { display:flex; gap:8px; font-size:13px; padding:2px 0; }
.socialAiRow small { flex:none; width:90px; color:var(--muted); }
.socialAiProducts { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:6px 12px; }
.socialAiProduct { border:1px dashed #0068ff; border-radius:14px; padding:3px 10px; background:#f5f8ff; color:#0068ff; font:inherit; font-size:12px; cursor:pointer; }
.socialAiProduct.picking { background:#0068ff; color:#fff; }
.socialAiProduct.added { border-style:solid; border-color:#12b76a; background:#e6f4ea; color:#0f7b3f; }
.socialMediaThumb.expired { display:grid; place-items:center; font-size:10px; color:#94a3b8; cursor:default; }
.socialMediaThumb.expired::after { content:"Hết hạn"; }
.socialAiKeyInput { width:280px; }
.socialAiTest { padding:8px 12px; border-radius:6px; font-size:13px; }
.socialAiTest.ok { background:#e6f4ea; color:#0f7b3f; }
.socialAiTest.bad { background:#fdecec; color:#b42318; }

/* Kênh Social → Cấu hình hệ thống, laid out like Sapo Social's: grey page, white menu card with folding groups and line
   icons, white content card with Sapo's sections, tables, warning boxes and blue switches. */
.socialSettings { gap:16px; padding:16px; background:#f0f2f5; }
.socialSettings .socialSettingMenu { width:270px; padding:10px; gap:2px; border:0; border-radius:8px; background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.06); }
.socialSetItem, .socialSetGroup { display:flex; align-items:center; gap:12px; width:100%; padding:11px 14px; border:0; border-radius:6px; background:none; color:#1f2937; font:inherit; font-size:15px; text-align:left; cursor:pointer; }
.socialSetItem:hover { background:#f3f6fa; }
.socialSetItem.top, .socialSetGroup { font-size:17px; font-weight:500; color:#111827; padding:12px 10px; }
.socialSetItem.active { background:#e8f3ff; color:#0088ff; }
.socialSetGroup { justify-content:space-between; }
.socialSetCaret { width:14px; height:14px; background:#6b7280; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%2015l6-6%206%206%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%2015l6-6%206%206%22/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .15s; }
.socialSetGroup.closed .socialSetCaret { transform:rotate(180deg); }
.socialSetIcon { flex:none; width:22px; height:22px; background:currentColor; opacity:.75; -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat; }
.socialSetItem.active .socialSetIcon { opacity:1; }
.socialSettings .socialSettingMain { padding:20px 24px; border-radius:8px; background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.06); }
.socialSettings .socialSettingTitle { margin-bottom:16px; }
.socialSettings .socialSettingTitle h3 { font-size:22px; font-weight:500; color:#111827; }
.socialSettings .socialSettingBody { gap:12px; }
.socialSettings .socialSettingGroup { margin:20px 0 4px; font-size:17px; font-weight:500; color:#111827; }
.socialSettings .socialSettingRow { padding:16px 0; border:0; border-bottom:1px solid #eef0f3; border-radius:0; background:none; font-size:15px; }
.socialSettings .socialSettingRow.nested { margin-left:0; padding-left:20px; }
.socialSettings .socialSwitch.on { background:#0088ff; }
.socialSwitch.readonly { display:inline-block; cursor:default; opacity:.8; }
.socialSetPage { position:relative; display:flex; align-items:center; gap:10px; min-width:280px; padding:8px 36px 8px 10px; border:1px solid #e5e7eb; border-radius:8px; cursor:pointer; }
.socialSetPage img, .socialSetPageAvatar { width:36px; height:36px; border-radius:50%; object-fit:cover; background:#e5e7eb; flex:none; }
.socialSetPageText { display:flex; flex-direction:column; line-height:1.3; }
.socialSetPageText small { color:#6b7280; }
.socialSetPage::after { content:""; position:absolute; right:12px; top:50%; width:0; height:0; border:5px solid transparent; border-top-color:#6b7280; margin-top:-2px; }
.socialSetPage select { position:absolute; inset:0; opacity:0; cursor:pointer; }
.socialSetToolbar { display:flex; align-items:center; gap:10px; }
.socialSetSearch { flex:1; min-width:0; padding:10px 12px 10px 38px; border:1px solid #e5e7eb; border-radius:6px; font:inherit; font-size:15px; background:#fff; }
.socialSetToolbar { position:relative; }
.socialSetToolbar::before { content:""; position:absolute; left:12px; top:50%; width:18px; height:18px; margin-top:-9px; background:#9ca3af; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%2019a8%208%200%201%200%200-16%208%208%200%200%200%200%2016zM21%2021l-4.35-4.35%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%2019a8%208%200%201%200%200-16%208%208%200%200%200%200%2016zM21%2021l-4.35-4.35%22/%3E%3C/svg%3E") center/contain no-repeat; pointer-events:none; }
.socialSetPrimary, .socialSetGhost { padding:9px 18px; border-radius:6px; font:inherit; font-size:15px; cursor:pointer; white-space:nowrap; }
.socialSetPrimary { border:1px solid #0088ff; background:#0088ff; color:#fff; }
.socialSetGhost { border:1px solid #0088ff; background:#fff; color:#0088ff; }
.socialSetPrimary:disabled, .socialSetGhost:disabled { opacity:.5; cursor:default; }
.socialSetLink { padding:0; border:0; background:none; color:#0088ff; font:inherit; cursor:pointer; }
.socialSetTable { width:100%; border-collapse:collapse; font-size:15px; }
.socialSetTable th { padding:14px 16px; background:#f3f4f6; color:#111827; font-weight:500; text-align:left; }
.socialSetTable td { padding:14px 16px; border-bottom:1px solid #eef0f3; vertical-align:middle; }
.socialSetTable .center { text-align:center; }
.socialSetTable tr.muted td:first-child { color:#4b5563; }
.socialSetSwatch { display:inline-block; width:36px; height:28px; border-radius:3px; vertical-align:middle; }
.socialSetActions { white-space:nowrap; text-align:right; }
.socialSetIconBtn { width:30px; height:30px; margin-left:6px; border:0; border-radius:6px; background:#9ca3af; cursor:pointer; vertical-align:middle; }
.socialSetIconBtn:hover { background:#0088ff; }
.socialSetIconBtn.edit { -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%203a2.83%202.83%200%201%201%204%204L7.5%2020.5%202%2022l1.5-5.5z%22/%3E%3C/svg%3E") center/18px no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%203a2.83%202.83%200%201%201%204%204L7.5%2020.5%202%2022l1.5-5.5z%22/%3E%3C/svg%3E") center/18px no-repeat; }
.socialSetIconBtn.edit.on { background:#0088ff; }
.socialSetIconBtn.delete { -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18M8%206V4h8v2M19%206l-1%2014H6L5%206M10%2011v6M14%2011v6%22/%3E%3C/svg%3E") center/19px no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18M8%206V4h8v2M19%206l-1%2014H6L5%206M10%2011v6M14%2011v6%22/%3E%3C/svg%3E") center/19px no-repeat; }
.socialSetIconBtn.delete:hover { background:#d92d20; }
.socialSetShortcut { display:inline-block; padding:8px 10px; border-radius:4px; background:#f3f4f6; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.socialSetClamp { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-wrap; }
.socialSetThumb { width:56px; height:56px; object-fit:cover; border-radius:4px; vertical-align:middle; }
.socialSetWarn { position:relative; padding:12px 16px 12px 44px; border-radius:4px; background:#fff8ec; color:#1f2937; font-size:14px; line-height:1.6; }
.socialSetWarn::before { content:""; position:absolute; left:14px; top:13px; width:20px; height:20px; background:#f5a524; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.29%203.86L1.82%2018a2%202%200%200%200%201.71%203h16.94a2%202%200%200%200%201.71-3L13.71%203.86a2%202%200%200%200-3.42%200zM12%209v4M12%2017h.01%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.29%203.86L1.82%2018a2%202%200%200%200%201.71%203h16.94a2%202%200%200%200%201.71-3L13.71%203.86a2%202%200%200%200-3.42%200zM12%209v4M12%2017h.01%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialSetSection { display:flex; flex-direction:column; gap:10px; padding:18px 0; border-bottom:1px solid #eef0f3; }
.socialSetSection b { font-size:17px; font-weight:500; color:#111827; }
.socialSetSection p { margin:4px 0 0; }
.socialSetSectionHead { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.socialSetRadios { display:flex; flex-wrap:wrap; gap:10px 48px; }
.socialSetRadios label { display:inline-flex; align-items:center; gap:10px; font-size:15px; cursor:pointer; }
.socialSetRadios input { width:18px; height:18px; accent-color:#0088ff; }
.socialSetCards { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; padding:16px; border-radius:8px; background:#f3f4f6; }
.socialSetCard { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px; border-radius:6px; background:#fff; }
.socialSetCard > div { display:flex; flex-direction:column; gap:4px; min-width:0; }
.socialSetBadge { align-self:flex-start; padding:1px 6px; border-radius:3px; background:#0088ff; color:#fff; font-size:12px; }
.socialSetStar { flex:none; width:26px; height:26px; border:0; background:#9ca3af; cursor:pointer; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202l3.09%206.26L22%209.27l-5%204.87%201.18%206.88L12%2017.77l-6.18%203.25L7%2014.14%202%209.27l6.91-1.01z%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202l3.09%206.26L22%209.27l-5%204.87%201.18%206.88L12%2017.77l-6.18%203.25L7%2014.14%202%209.27l6.91-1.01z%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialSetStar.on { background:#f5a524; cursor:default; }
.socialSetStar:disabled:not(.on) { opacity:.4; cursor:default; }
.socialSetWhen { width:26%; vertical-align:top !important; }
.socialSetOff { color:#9ca3af; }
.socialSetMessage { white-space:pre-wrap; line-height:1.55; }
.socialSetTextarea { width:100%; padding:8px 10px; border:1px solid #d1d5db; border-radius:6px; font:inherit; resize:vertical; }
.socialSetFooter { display:flex; justify-content:flex-end; gap:10px; padding-top:8px; }
.socialSetBanner { position:relative; padding:14px 16px 14px 46px; border-top:4px solid #12b76a; border-radius:4px; background:#ecfdf3; color:#111827; font-size:17px; }
.socialSetBanner::before { content:""; position:absolute; left:14px; top:50%; width:22px; height:22px; margin-top:-11px; background:#12b76a; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2011.08V12a10%2010%200%201%201-5.93-9.14M22%204L12%2014.01l-3-3%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2011.08V12a10%2010%200%201%201-5.93-9.14M22%204L12%2014.01l-3-3%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialSetBanner.warn { border-top-color:#f5a524; background:#fff8ec; }
.socialSetBanner.warn::before { background:#f5a524; -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.29%203.86L1.82%2018a2%202%200%200%200%201.71%203h16.94a2%202%200%200%200%201.71-3L13.71%203.86a2%202%200%200%200-3.42%200zM12%209v4M12%2017h.01%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.29%203.86L1.82%2018a2%202%200%200%200%201.71%203h16.94a2%202%200%200%200%201.71-3L13.71%203.86a2%202%200%200%200-3.42%200zM12%209v4M12%2017h.01%22/%3E%3C/svg%3E"); }
.socialSetBanner.error { border-top-color:#d92d20; background:#fef3f2; }
.socialSetBanner.error::before { background:#d92d20; -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.29%203.86L1.82%2018a2%202%200%200%200%201.71%203h16.94a2%202%200%200%200%201.71-3L13.71%203.86a2%202%200%200%200-3.42%200zM12%209v4M12%2017h.01%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.29%203.86L1.82%2018a2%202%200%200%200%201.71%203h16.94a2%202%200%200%200%201.71-3L13.71%203.86a2%202%200%200%200-3.42%200zM12%209v4M12%2017h.01%22/%3E%3C/svg%3E"); }
.socialSettingMenu .socialSetGroup { justify-content:space-between; }
.socialSettings .socialSetTable th { text-transform:none; letter-spacing:normal; font-size:15px; white-space:nowrap; }
.socialSettings .socialSetTable td { white-space:normal; overflow:visible; text-overflow:clip; max-width:none; font-size:15px; }
.socialSettings .socialSetTable td.socialSetActions { white-space:nowrap; }
.socialSetTable.fulfillment th:nth-child(1) { width:24%; }
.socialSetTable.fulfillment th:nth-child(3), .socialSetTable.fulfillment th:nth-child(4) { width:110px; }
.socialSettings .socialSetTable .socialSwitch { vertical-align:middle; }

/* Thời gian hoạt động của cửa hàng: Sapo's weekday rows with a 0–24h track (6h grid, blue working bars). */
.socialWorkTime { display:flex; flex-direction:column; gap:8px; }
.socialWorkGrid { display:grid; grid-template-columns:330px minmax(0, 1fr) 48px; align-items:center; gap:0 16px; }
.socialWorkHeader { margin-bottom:4px; }
.socialWorkHeader > span { font-size:13px; }
.socialWorkScale { display:grid; grid-template-columns:repeat(4, 1fr); padding:10px 0; border-radius:4px; background:#eef5ff; font-weight:600; font-size:15px; }
.socialWorkScale span { text-align:right; padding-right:6px; }
.socialWorkLeft { display:flex; flex-direction:column; gap:8px; }
.socialWorkLine { display:flex; align-items:center; gap:8px; }
.socialWorkDayName { display:inline-flex; align-items:center; gap:8px; width:96px; flex:none; font-size:15px; cursor:pointer; }
.socialWorkDayName input { width:17px; height:17px; accent-color:#0088ff; }
.socialWorkPick { width:92px; padding:7px 8px; border:1px solid #d1d5db; border-radius:4px; font:inherit; font-size:15px; background:#fff; }
.socialWorkDash { color:#9ca3af; }
.socialWorkAdd, .socialWorkRemove { width:22px; height:22px; flex:none; border:0; background:#6b7280; cursor:pointer; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022a10%2010%200%201%200%200-20%2010%2010%200%200%200%200%2020zM12%208v8M8%2012h8%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022a10%2010%200%201%200%200-20%2010%2010%200%200%200%200%2020zM12%208v8M8%2012h8%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialWorkRemove { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022a10%2010%200%201%200%200-20%2010%2010%200%200%200%200%2020zM8%2012h8%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022a10%2010%200%201%200%200-20%2010%2010%200%200%200%200%2020zM8%2012h8%22/%3E%3C/svg%3E"); }
.socialWorkAdd:hover { background:#0088ff; }
.socialWorkRemove:hover { background:#d92d20; }
.socialWorkAdd:disabled, .socialWorkRemove:disabled { opacity:.35; cursor:default; background:#6b7280; }
.socialWorkTrack { position:relative; align-self:stretch; min-height:36px; border:1px solid #eef0f3; border-radius:4px;
  background:linear-gradient(90deg, transparent calc(25% - 1px), #eef0f3 calc(25% - 1px), #eef0f3 25%, transparent 25%, transparent calc(50% - 1px), #eef0f3 calc(50% - 1px), #eef0f3 50%, transparent 50%, transparent calc(75% - 1px), #eef0f3 calc(75% - 1px), #eef0f3 75%, transparent 75%); }
.socialWorkBar { position:absolute; top:50%; height:16px; margin-top:-8px; border-radius:3px; background:#0a6cff; }
.socialWorkRest { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#9ca3af; font-size:13px; }
.socialWorkRow.rest .socialWorkPick { color:#9ca3af; }
.socialWorkTime.off .socialWorkBar { background:#9ca3af; }
.socialWorkTime.off .socialWorkRow { opacity:.6; }
.socialWorkDayName { width:104px; white-space:nowrap; }

/* Cấu hình hệ thống, the remaining screens: Sapo's lines (question left, control right), blue buttons, grey-header
   tables, blue radios/checkboxes and the Lưu lại footer on the right, applied to every settings screen. */
.socialSettings .socialNoteSave { padding:9px 20px; border:1px solid #0088ff; border-radius:6px; background:#0088ff; color:#fff; font:inherit; font-size:15px; cursor:pointer; }
.socialSettings .socialNoteSave:disabled { opacity:.5; cursor:default; }
.socialSettings .socialSort { padding:7px 14px; border:1px solid #d0d5dd; border-radius:6px; background:#fff; color:#1f2937; font:inherit; font-size:14px; cursor:pointer; }
.socialSettings .socialSort:hover:not(:disabled) { border-color:#0088ff; color:#0088ff; }
.socialSettings .socialSort.danger { color:#d92d20; }
.socialSettings .socialSort.danger:hover:not(:disabled) { border-color:#d92d20; color:#d92d20; }
.socialSettings .socialSettingHead:has(> .socialNoteSave:last-child) { justify-content:flex-end; padding-top:12px; border-top:1px solid #eef0f3; margin-top:8px; }
.socialSettings input[type=radio], .socialSettings input[type=checkbox] { accent-color:#0088ff; width:17px; height:17px; }
.socialSettings .socialRadio { display:inline-flex; align-items:center; gap:10px; font-size:15px; }
.socialSettings .socialSettingMain select, .socialSettings .socialSettingMain input[type=text], .socialSettings .socialSettingMain input[type=number],
.socialSettings .socialSettingMain input[type=email], .socialSettings .socialSettingMain input[type=password], .socialSettings .socialSettingMain input[type=time],
.socialSettings .socialSettingMain textarea { padding:8px 10px; border:1px solid #d0d5dd; border-radius:6px; font:inherit; font-size:15px; background:#fff; color:#111827; }
.socialSettings .socialSettingMain textarea { width:100%; resize:vertical; line-height:1.5; }
.socialSettings .socialRatioRow { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid #eef0f3; font-size:15px; }
.socialSettings .socialRatioRow select, .socialSettings .socialRatioRow input { min-width:220px; }
.socialSettings .socialReportTableWrap { overflow:auto; border:0; }
.socialSettings .socialReportTable { width:100%; border-collapse:collapse; font-size:15px; }
.socialSettings .socialReportTable th { padding:13px 16px; background:#f3f4f6; color:#111827; font-weight:500; text-align:left; text-transform:none; letter-spacing:normal; }
.socialSettings .socialReportTable td { padding:13px 16px; border-bottom:1px solid #eef0f3; white-space:normal; }
.socialSettings .socialNotice { border-radius:4px; }
.socialSettings .socialSettingGroup.first { margin-top:0; }
.socialSettings .socialTagEditor { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px 16px; border:1px solid #d6e8ff; border-radius:8px; background:#f5faff; }
.socialSetLine { display:grid; grid-template-columns:minmax(0, 1fr) 340px; align-items:center; gap:8px 24px; padding:16px 0; border-bottom:1px solid #eef0f3; font-size:15px; }
.socialSetLineText { display:flex; flex-direction:column; gap:2px; }
.socialSetLineText small { color:#6b7280; font-size:14px; }
.socialSetLineControl { display:flex; justify-content:flex-end; }
.socialSetLineExtra { grid-column:1 / -1; }
.socialSettings .socialSetSelect { width:100%; min-height:44px; }
.socialSetFixed { width:100%; min-height:44px; display:flex; align-items:center; padding:8px 14px; border-radius:6px; background:#f3f4f6; color:#1f2937; }
.socialSetCheck { display:inline-flex; align-items:center; gap:10px; font-size:15px; cursor:pointer; }
.socialSetChecks { display:flex; flex-wrap:wrap; gap:10px 28px; }
.socialSetChecks.indent { padding-left:28px; }
.socialSetRadios.column { flex-direction:column; gap:14px; }
.socialComposerText.big { font-size:20px; }
.socialCardEmpty { display:block; text-align:center; padding:4px 0; }
.socialSettings .socialRatioRow select, .socialSettings .socialRatioRow input:not([type=checkbox]):not([type=radio]) { width:340px; min-width:0; }

/* Zalo tag bar like Chat OmniAI: pastel full-width buttons, white text, a fold tab above, (+) for all tags. */
.socialOmniTags { position:relative; padding:6px 10px 6px; background:#fff; border-top:1px solid var(--line); }
.socialOmniTags.folded { padding:0; height:0; border-top-color:transparent; }
.socialOmniFold { position:absolute; left:50%; top:-15px; transform:translateX(-50%); width:44px; height:15px; padding:0; border:1px solid var(--line); border-bottom:0; border-radius:8px 8px 0 0;
  background:#fff; color:#667085; font-size:12px; line-height:14px; cursor:pointer; z-index:2; }
.socialOmniTagLine { display:flex; align-items:center; gap:4px; }
.socialOmniTagRow { flex:1; min-width:0; display:flex; align-items:center; gap:4px; overflow-x:auto; scrollbar-width:thin; }
.socialOmniTags.open .socialOmniTagRow { flex-wrap:wrap; overflow:visible; }
/* Full names (the row scrolls sideways; (+) stays visible to open every tag on several lines). */
.socialOmniTag { --tag:#5b6b7f; flex:1 0 auto; min-width:72px; height:28px; padding:0 12px; border:0; border-radius:3px; background:color-mix(in srgb, var(--tag) 45%, #fff);
  color:#fff; font:inherit; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; text-shadow:0 0 1px rgb(0 0 0 / 15%); }
.socialOmniTag:hover:not(:disabled) { background:color-mix(in srgb, var(--tag) 70%, #fff); }
.socialOmniTag.active { background:var(--tag); font-weight:600; }
.socialOmniTag:disabled { cursor:default; opacity:.75; }
.socialOmniMore { flex:none; width:24px; height:24px; margin-left:4px; padding:0; border:1.5px solid #0088ff; border-radius:50%; background:#fff; color:#0088ff; font-size:16px; line-height:20px; cursor:pointer; }

/* Nút gạt: the app-wide `button { min-height:36px }` stretched it into a 40×36 block. A 44×24 pill everywhere. */
.socialSwitch { width:44px; height:24px; min-height:0; padding:2px; border:0; border-radius:12px; background:#d0d5dd; line-height:0; transition:background .15s; }
.socialSwitch span { width:20px; height:20px; box-shadow:0 1px 2px rgba(16,24,40,.2); }
.socialSwitch.on span { transform:translateX(20px); }

/* ── Cấu hình hệ thống: one design system for every screen ──────────────────────────────────────────────────────
   Text 15px (#111827), notes 14px (#6b7280), section titles 17px/500, one row style (16px padding, hairline under),
   every control 40px high with 6px corners, one primary and one secondary button, Lưu lại bottom right. */
.socialSettings { --set-blue:#0088ff; --set-blue-soft:#e8f3ff; --set-text:#111827; --set-muted:#6b7280; --set-border:#d0d5dd; --set-line:#eef0f3; --set-h:40px; }
.socialSettings .socialSettingMain { color:var(--set-text); font-size:15px; }
.socialSettings .socialSettingMain .socialMuted { color:var(--set-muted); font-size:14px; }
.socialSettings .socialSettingMain p { margin:0; line-height:1.55; }
.socialSettings .socialSettingBody { gap:0; }
.socialSettings .socialSettingBody > .socialMuted:first-child { margin-bottom:8px; }
.socialSettings .socialSettingBody > * + .socialSetWarn, .socialSettings .socialSettingBody > * + .socialNotice,
.socialSettings .socialSettingBody > * + .socialSetBanner, .socialSettings .socialSettingBody > * + .socialSetToolbar,
.socialSettings .socialSettingBody > * + .socialSetTable, .socialSettings .socialSettingBody > * + .socialSetCards,
.socialSettings .socialSettingBody > * + .socialReportTableWrap, .socialSettings .socialSettingBody > * + .socialTagEditor { margin-top:12px; }
.socialSettings .socialSettingGroup, .socialSettings .socialSetSection > b { margin:28px 0 6px; font-size:17px; font-weight:500; color:var(--set-text); }
.socialSettings .socialSettingGroup.first, .socialSettings .socialSettingBody > .socialSettingGroup:first-child { margin-top:0; }
.socialSettings .socialSetSection > b { margin:0; }
.socialSettings .socialSettingGroup + p.socialMuted { margin-bottom:10px; }

/* Rows: a label (with an optional note under it) and its control on the right. */
.socialSettings .socialSettingRow, .socialSettings .socialSetLine, .socialSettings .socialRatioRow, .socialSettings .socialSetSection {
  min-height:64px; padding:12px 0; border:0; border-bottom:1px solid var(--set-line); border-radius:0; background:none; font-size:15px; }
.socialSettings .socialSetSection { padding:16px 0; }
.socialSettings .socialSetLine { grid-template-columns:minmax(0, 1fr) 360px; }
.socialSettings .socialSetLineText span { color:var(--set-text); }
.socialSettings .socialSetLineText small { color:var(--set-muted); font-size:14px; }
.socialSettings .socialSetLineControl > .socialSwitch { margin-left:auto; }
.socialSettings .socialSetLineExtra { padding-top:4px; }

/* Controls: one height, one border, one radius. */
.socialSettings .socialSettingMain :is(select, input[type=text], input[type=number], input[type=email], input[type=password], input[type=time], input[type=search], input[type=date]) {
  height:var(--set-h); padding:0 12px; border:1px solid var(--set-border); border-radius:6px; font:inherit; font-size:15px; color:var(--set-text); background-color:#fff; }
.socialSettings .socialSettingMain :is(select, input):focus-visible, .socialSettings .socialSettingMain textarea:focus-visible { outline:none; border-color:var(--set-blue); box-shadow:0 0 0 3px rgba(0,136,255,.15); }
.socialSettings .socialSettingMain :is(select, input):disabled { background-color:#f3f4f6; color:#9ca3af; }
.socialSettings .socialSettingMain textarea { padding:10px 12px; border:1px solid var(--set-border); border-radius:6px; font-size:15px; }
.socialSettings .socialSetSelect, .socialSettings .socialSetInput { width:100%; }
.socialSettings .socialSetFixed { min-height:var(--set-h); border-radius:6px; }
.socialSettings .socialSetSearch { height:var(--set-h); padding-left:38px !important; }
.socialSettings .socialSetPage { min-height:52px; }
.socialSettings .socialWorkPick { width:96px; height:36px; }

/* Buttons: primary (blue), secondary (white, blue on hover), danger text, small icon buttons. */
.socialSettings .socialSettingMain :is(.socialSetPrimary, .socialNoteSave) { height:var(--set-h); min-height:0; padding:0 20px; border:1px solid var(--set-blue); border-radius:6px; background:var(--set-blue); color:#fff; font-size:15px; font-weight:500; }
.socialSettings .socialSettingMain :is(.socialSetPrimary, .socialNoteSave):hover:not(:disabled) { background:#0077e0; border-color:#0077e0; }
.socialSettings .socialSettingMain :is(.socialSetGhost, .socialSort) { height:var(--set-h); min-height:0; padding:0 16px; border:1px solid var(--set-border); border-radius:6px; background:#fff; color:#344054; font-size:15px; }
.socialSettings .socialSettingMain :is(.socialSetGhost, .socialSort):hover:not(:disabled) { border-color:var(--set-blue); color:var(--set-blue); }
.socialSettings .socialSettingMain :is(.socialSetGhost, .socialSort).danger { color:#d92d20; }
.socialSettings .socialSettingMain :is(.socialSetGhost, .socialSort).danger:hover:not(:disabled) { border-color:#d92d20; color:#d92d20; }
.socialSettings .socialSettingMain :is(.socialSetPrimary, .socialNoteSave, .socialSetGhost, .socialSort):disabled { opacity:.45; cursor:default; }
.socialSettings .socialSettingMain .socialSetIconBtn, .socialSettings .socialSettingMain .socialSetStar,
.socialSettings .socialSettingMain .socialWorkAdd, .socialSettings .socialSettingMain .socialWorkRemove, .socialSettings .socialSettingMain .socialSetLink,
.socialSettings .socialSettingMain .socialSetGroup, .socialSettings .socialSettingMain .socialTagColors button { min-height:0; }
.socialSetInlineActions { display:flex; justify-content:flex-end; gap:8px; }

/* Footer: Lưu lại (and Huỷ thay đổi) bottom right, above a hairline; a note may sit on the left. */
.socialSettings .socialSetFooter, .socialSettings .socialSettingHead:has(> .socialNoteSave:last-child) {
  display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--set-line); }
.socialSetFooterNote { margin-right:auto; }

/* Messages. */
.socialSettings .socialSettingMain .socialNotice { padding:10px 14px; border:0; border-radius:6px; background:#eef5ff; color:#1d4ed8; font-size:14px; }
.socialSettings .socialSettingTitle + .socialNotice { margin-bottom:12px; }
.socialSettings .socialSetWarn { font-size:14px; }
.socialSettings .socialAiTest { margin-top:12px; border-radius:6px; }

/* Badges and checks. */
.socialSettings :is(.socialOnlineBadge, .socialHealthBadge, .socialSetBadge) { padding:2px 10px; border-radius:999px; font-size:12px; font-weight:500; }
.socialSettings :is(.socialSetCheck, .socialPermCheck, .socialRadio, .socialSetRadios label) { font-size:15px; gap:10px; }
.socialSettings .socialPermRow, .socialSettings .socialHealthRow { border-radius:8px; }
.socialSettings .socialSettingBody > :is(.socialHealthRow, .socialPermRow) + :is(.socialHealthRow, .socialPermRow) { margin-top:10px; }
.socialSettings .socialSettingBody > .socialSetBanner + * { margin-top:8px; }
/* Type scale: page title 22 → group title 17/600 → row label 15/500 → note 14 grey. */
.socialSettings .socialSettingGroup, .socialSettings .socialSetSection > b { font-weight:600; }
.socialSettings .socialSetSectionHead b, .socialSettings .socialSetLineText > span,
.socialSettings .socialSettingRow > span:first-child, .socialSettings .socialSettingRow > b:first-child, .socialSettings .socialRatioRow > span:first-child { font-size:15px; font-weight:500; color:var(--set-text); }
.socialSettings .socialSetSectionHead p { font-size:14px; }
.socialSettings .socialSetSection:has(> .socialSetSectionHead) { padding:12px 0; min-height:64px; justify-content:center; }
/* Composer: Zalo sticker as a line icon and Aa in the same grey, size and baseline as the other composer icons. */
.socialComposerIcon.sticker { --glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012.5V6a3%203%200%200%200-3-3H6a3%203%200%200%200-3%203v12a3%203%200%200%200%203%203h6.5z%22/%3E%3Cpath%20d%3D%22M21%2012.5h-5.5a3%203%200%200%200-3%203V21%22/%3E%3Cpath%20d%3D%22M8%2014s1.2%201.5%203%201.5M9%209h.01M15%209h.01%22/%3E%3C/svg%3E"); }
.socialComposerIcon.sticker.on::before { background:#0068ff; }
.socialComposerText { color:#667085; font-size:15px; font-weight:600; line-height:1; vertical-align:middle; }

/* Kênh Social, like the original Sapo Social: light chips with a colour dot, and a grey message box holding emoji
   and templates, with a grey 👍 outside it. Success notices count down and close themselves. */
.socialTagBar { gap:8px; padding:8px 14px; background:#fff; }
.socialTagToggle { max-width:190px; height:28px; border:1px solid #eaecf0; border-radius:4px; padding:0 10px; background:#f9fafb; color:#344054; font-size:13px; font-weight:400; box-shadow:none; }
.socialTagToggle:hover:not(:disabled) { background:#f2f4f7; }
.socialTagToggle.active { background:#fff; border-color:var(--tag); box-shadow:none; color:#101828; font-weight:500; }
.socialAllTags { height:28px; padding:0 10px; font-size:13px; }
.socialComposer { align-items:flex-end; gap:4px; }
.socialComposer > .socialComposerIcon, .socialComposer > .socialPlusWrap { margin-bottom:4px; }
.socialInputBox { flex:1; min-width:0; display:flex; align-items:flex-end; gap:2px; padding:3px 6px 3px 0; border-radius:20px; background:#f2f4f7; }
.socialInputBox textarea, .socialComposer .socialInputBox textarea { flex:1; min-width:0; border:0; border-radius:20px; background:transparent; padding:8px 14px; outline:none; }
.socialInputBox textarea:disabled { background:transparent; }
.socialInputBox .socialEmojiWrap { display:inline-flex; align-items:center; flex:none; }
.socialComposerIcon.template { --glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4%205h16v11H9l-5%204z%22/%3E%3Cpath%20d=%22M8%209h8M8%2012.5h5%22/%3E%3C/svg%3E"); }
.socialLike { width:34px; height:34px; margin-bottom:3px; background:#98a2b3; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M2%2010h4v11H2zM8%2021V10l4.5-7.5c.9-1.2%203-.6%202.9%201.1L15%209h5.2c1.2%200%202.1%201.1%201.8%202.3l-1.8%207.9A2.5%202.5%200%200%201%2017.8%2021z%22/%3E%3C/svg%3E") center/24px no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M2%2010h4v11H2zM8%2021V10l4.5-7.5c.9-1.2%203-.6%202.9%201.1L15%209h5.2c1.2%200%202.1%201.1%201.8%202.3l-1.8%207.9A2.5%202.5%200%200%201%2017.8%2021z%22/%3E%3C/svg%3E") center/24px no-repeat; }
.socialLike:hover:not(:disabled) { background:#667085; }
.socialChatNotice { display:flex; align-items:center; gap:10px; }
.socialChatNotice > span { flex:1; min-width:0; }
.socialNoticeCountdown { flex:none; font-size:12px; opacity:.75; white-space:nowrap; }
.socialNoticeClose { flex:none; width:22px; height:22px; border:0; border-radius:50%; background:none; color:inherit; font-size:17px; line-height:1; cursor:pointer; }
.socialNoticeClose:hover { background:rgba(0,0,0,.08); }
.socialNoticeAction { flex:none; height:28px; padding:0 12px; border:1px solid currentColor; border-radius:6px; background:#fff; color:inherit; font-weight:600; white-space:nowrap; cursor:pointer; }
.socialComposer .socialSend { height:36px; margin-bottom:2px; }
/* Sapo Social: a tag on the conversation is filled with its colour, with white text and no dot. */
.socialTagToggle.active, .socialTagToggle.active:hover:not(:disabled) { background:var(--tag); border-color:var(--tag); color:#fff; font-weight:500; }
.socialTagToggle.active i { display:none; }

/* Nút (+) of the customer column (Địa chỉ, Đơn hàng, Ghi chú): the app-wide `button { min-height:36px }` stretched the
   22px circle into a grey pill cut at the edge. A 28px white circle with a drawn plus, blue on hover. */
.socialCustomerAdd { position:relative; flex:none; width:28px; height:28px; min-height:0; padding:0; border:1px solid #d0d5dd; border-radius:50%;
  background:#fff; color:transparent; font-size:0; line-height:0; cursor:pointer; transition:border-color .15s, background .15s; }
.socialCustomerAdd::before { content:""; position:absolute; inset:0; margin:auto; width:16px; height:16px; background:#475467;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialCustomerAdd:hover:not(:disabled) { border-color:#0088ff; background:#e8f3ff; }
.socialCustomerAdd:hover:not(:disabled)::before { background:#0088ff; }
.socialCustomerAdd:disabled { opacity:.4; cursor:default; }
/* Kênh Social: the app-wide `button { min-height:36px }` stretched 27 of its buttons (chips, tool and composer icons,
   tag buttons, text links). Every Social button keeps its own size; the filter chips get an explicit 30px. */
.socialMain button, .socialNav button { min-height:0; }
.socialChips button, .socialMoreGroup button { height:30px; display:inline-flex; align-items:center; justify-content:center; }
.socialChips .socialFunnel { height:30px; }
.socialChips button.socialMissedChip { flex:none; }

/* Cấu hình → Mẫu in: list of Mẫu 1/2/3 and the editor (preview left, options right), like Sapo's Cấu hình mẫu in */
.printTemplatePage { display: flex; flex-direction: column; gap: 12px; }
.ptplList { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.ptplDocs { display: flex; flex-direction: column; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); padding: 6px 12px; min-width: 190px; }
.ptplDocs button { background: none; border: 0; border-bottom: 1px solid #e5e7eb; text-align: left; padding: 12px 4px; color: #1f2937; cursor: pointer; font: inherit; }
.ptplDocs button:last-child { border-bottom: 0; }
.ptplDocs button.active { color: #0f62fe; }
.ptplCards { display: flex; gap: 16px; flex-wrap: wrap; flex: 1; justify-content: center; }
.ptplCard { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); padding: 12px; width: 230px; display: flex; flex-direction: column; gap: 10px; }
.ptplThumb { position: relative; height: 270px; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; padding: 0; cursor: pointer; }
.ptplThumbFrame { width: 794px; height: 1100px; border: 0; transform: scale(.26); transform-origin: 0 0; pointer-events: none; background: #fff; }
.ptplSizes { display: flex; gap: 8px; flex-wrap: wrap; }
.ptplSizes button { border: 1px solid #d1d5db; background: #f8fafc; border-radius: 6px; padding: 4px 12px; cursor: pointer; font: inherit; color: #1f2937; }
.ptplSizes button:hover { border-color: #0f62fe; color: #0f62fe; }
.ptplSizes button.applied { background: #e8f0ff; border-color: #0f62fe; color: #0f62fe; font-weight: 600; }
.ptplEditor { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.ptplPreview { background: #eef1f5; border-radius: 8px; padding: 20px; display: flex; justify-content: center; overflow: auto; min-height: 480px; }
.ptplPreviewFrame { background: #fff; border: 0; box-shadow: 0 2px 8px rgba(15, 23, 42, .15); max-width: 100%; min-height: 400px; }
.ptplPanel { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); display: flex; flex-direction: column; position: sticky; top: 12px; max-height: max(420px, calc(100vh - 190px)); }
.ptplPanelBody { overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ptplPanel h3 { margin: 4px 0 0; font-size: 15px; }
.ptplText { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #374151; }
.ptplText input, .ptplText select, .ptplText textarea { border: 1px solid #d1d5db; border-radius: 6px; padding: 7px 9px; font: inherit; color: #111827; background: #fff; }
.ptplSection { border: 1px solid #e5e7eb; border-radius: 6px; }
.ptplSection.off .ptplSectionHead span { color: #6b7280; }
.ptplSectionHead { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; }
.ptplSectionHead label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.ptplChevron { background: none; border: 0; cursor: pointer; font-size: 18px; line-height: 1; color: #6b7280; transition: transform .15s; padding: 2px 6px; }
.ptplChevron.open { transform: rotate(180deg); }
.ptplSectionBody { border-top: 1px solid #f1f5f9; padding: 8px 10px 10px 32px; display: flex; flex-direction: column; gap: 7px; }
.ptplField { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ptplLink { background: none; border: 0; padding: 0; color: #0f62fe; cursor: pointer; text-align: left; font: inherit; font-size: 13px; }
.ptplApplied { color: #047857; font-size: 13px; margin: 0; }
.ptplMuted { color: #6b7280; font-size: 13px; margin: 0; }
.ptplNotice { margin: 0 16px; color: #047857; font-size: 13px; }
.ptplError { margin: 0 16px; color: #b91c1c; font-size: 13px; }
.ptplActions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid #e5e7eb; }
.ptplActions button { border-radius: 6px; padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer; border: 1px solid #d1d5db; background: #fff; color: #1f2937; }
.ptplActions button.primary { background: #0f62fe; border-color: #0f62fe; color: #fff; }
.ptplActions button:disabled { opacity: .6; cursor: default; }
.ptplModalBackdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .4); display: flex; align-items: center; justify-content: center; z-index: 60; }
.ptplModal { background: #fff; border-radius: 8px; width: min(520px, calc(100vw - 32px)); max-height: 80vh; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ptplModal header { display: flex; justify-content: space-between; align-items: center; }
.ptplModal header button { background: none; border: 0; font-size: 22px; cursor: pointer; }
.ptplHistory { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ptplHistory li { border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 10px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.ptplHistory li small { color: #6b7280; }
.ptplHistory li button { grid-row: 1 / span 2; grid-column: 2; align-self: center; border: 1px solid #0f62fe; color: #0f62fe; background: #fff; border-radius: 6px; padding: 5px 10px; cursor: pointer; font: inherit; font-size: 13px; }
@media (max-width: 900px) {
  .ptplEditor { grid-template-columns: 1fr; }
  .ptplPanel { position: static; max-height: none; }
}

/* Cảnh báo đơn “rơi” and Cấu hình chung laid out like Chat OmniAI: a switch followed by its sentence, conditions under
   it, ⓘ hints on the group titles, stacked radios and notes inside a section, and switched-off rows greyed. */
.socialAlertRow { display:flex; flex-wrap:wrap; align-items:center; gap:12px 14px; padding:10px 0 10px 24px; font-size:15px; color:var(--set-text, #111827); }
.socialAlertRow > .socialSwitch { margin-right:2px; }
.socialSettings .socialSettingMain .socialAlertSelect { width:220px; }
.socialAlertConditions { display:flex; flex-direction:column; gap:14px; padding:6px 0 8px 82px; }
.socialSettings .socialSettingMain .socialAlertKeywords { width:min(520px, 100%); }
.socialAlertListTitle { padding-top:20px; border-top:1px solid var(--set-line, #eef0f3); }
.socialAlertNote { padding-left:24px; }
.socialSetInfo { display:inline-block; width:18px; height:18px; margin-left:4px; vertical-align:-3px; background:#98a2b3; cursor:help;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022a10%2010%200%201%200%200-20%2010%2010%200%200%200%200%2020zM12%2016v-4M12%208h.01%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022a10%2010%200%201%200%200-20%2010%2010%200%200%200%200%2020zM12%2016v-4M12%208h.01%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialSetInfo:hover, .socialSetInfo:focus-visible { background:#0088ff; outline:none; }
.socialMissedName { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.socialAlertBadge { padding:1px 8px; border-radius:999px; font-size:12px; font-weight:500; background:#fff4e5; color:#b54708; }
.socialAlertBadge.unreplied { background:#eef4ff; color:#3538cd; }
.socialAlertBadge.no_shipment { background:#ecfdf3; color:#067647; }
.socialSetStack { display:flex; flex-direction:column; gap:12px; }
.socialSettings .socialSetSection .socialSetSectionHead.disabled b { color:#98a2b3; font-weight:400; }
.socialSettings .socialSetSection:has(> .socialSetSectionHead.disabled) { gap:14px; }
.socialSettings .socialSettingMain .socialAlertSelect { width:170px; }
/* Cấu hình tables: numbers and their headers right-aligned, the ✎/🗑 column fixed at the row's end, one row height. */
.socialSettings .socialSetTable th.num, .socialSettings .socialSetTable td.num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.socialSettings .socialSetTable th.socialSetActions, .socialSettings .socialSetTable td.socialSetActions { width:96px; text-align:right; white-space:nowrap; }
.socialSettings .socialSetTable td { height:56px; }
.socialSetIconSlot { display:inline-block; width:30px; height:30px; margin-left:6px; vertical-align:middle; }
.socialSettings .socialSetTable tr.socialFeeCont td { border-top:0; }
.socialSettings .socialSetTable tr.socialFeeCont td:first-child { border-bottom-color:transparent; }
.socialSettings .socialSetTable tbody tr:has(+ tr.socialFeeCont) td:first-child { border-bottom-color:transparent; }
.socialSettings .socialSetTable tbody tr:hover td { background:#f9fafb; }
.socialSettings .socialSettingBody > .socialSettingGroup + .socialMuted + .socialSetTable { margin-top:12px; }
/* Every other table in Cấu hình (Phân chia hội thoại, …) takes the same look. */
.socialSettings .socialReportTable th { padding:14px 16px; font-size:15px; font-weight:500; background:#f3f4f6; color:#111827; }
.socialSettings .socialReportTable td { height:56px; padding:14px 16px; font-size:15px; }
.socialSettings .socialFeeTable th { white-space:normal; }

/* Cấu hình → Mẫu in → Chỉnh sửa nâng cao (Sapo's editor): chooser dialog, toolbar with line icons, the template on a
   sheet of the paper size (cell guides shown only while editing), Từ khóa mẫu in panel, HTML view. */
.ptplChooser { width:min(720px, calc(100vw - 32px)); padding:0; gap:0; }
.ptplChooser > header { padding:18px 22px; border-bottom:1px solid #e5e7eb; } .ptplChooser > header strong { font-size:20px; font-weight:600; }
.ptplChoices { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:20px 22px; }
.ptplChoice { display:flex; align-items:center; gap:16px; padding:22px 20px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; text-align:left; font:inherit; color:#111827; cursor:pointer; min-height:0; transition:border-color .15s, box-shadow .15s; }
.ptplChoice:hover, .ptplChoice:focus-visible { border-color:#0088ff; box-shadow:0 0 0 3px rgba(0,136,255,.12); outline:none; }
.ptplChoice.current { border-color:#9ec9ff; }
.ptplChoice > span { display:flex; flex-direction:column; gap:6px; } .ptplChoice b { font-size:16px; font-weight:600; } .ptplChoice > span > span { color:#6b7280; font-size:14px; line-height:1.5; } .ptplChoice small { color:#0088ff; font-size:12px; }
.ptplChoiceIcon { flex:none; width:52px; height:52px; border-radius:8px; background:#eef5ff; position:relative; }
.ptplChoiceIcon::after { content:""; position:absolute; inset:12px; background:#2f80ed; -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat; }
.ptplChooserFoot { display:flex; justify-content:flex-end; padding:14px 22px; border-top:1px solid #e5e7eb; }
.ptplChooserFoot button { height:40px; min-height:0; padding:0 22px; border:1px solid #0088ff; border-radius:6px; background:#fff; color:#0088ff; font:inherit; cursor:pointer; }
.ptplAdvEditor { grid-template-columns:minmax(0, 1fr) 320px; }
.ptplAdvArea { background:#fff; border-radius:8px; box-shadow:0 1px 3px rgba(15,23,42,.12); display:flex; flex-direction:column; min-width:0; }
.ptplToolbar { display:flex; flex-direction:column; gap:4px; padding:8px 10px; border-bottom:1px solid #e5e7eb; position:sticky; top:0; background:#fff; z-index:5; border-radius:8px 8px 0 0; }
.ptplToolRow { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.ptplToolGroup { display:inline-flex; align-items:center; gap:2px; padding-right:6px; margin-right:2px; border-right:1px solid #e5e7eb; }
.ptplToolGroup:last-child { border-right:0; }
.ptplTool { display:inline-flex; align-items:center; gap:6px; height:32px; min-height:0; min-width:32px; padding:0 6px; border:0; border-radius:4px; background:none; color:#1f2937; font:inherit; font-size:14px; cursor:pointer; }
.ptplTool:hover, .ptplTool.on { background:#eef5ff; color:#0088ff; } .ptplTool.disabled { opacity:.4; pointer-events:none; }
.ptplToolIcon { width:20px; height:20px; flex:none; background:currentColor; -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat; }
.ptplToolSelect { height:32px; min-height:0; min-width:112px; padding:0 8px; border:1px solid transparent; border-radius:4px; background:#fff; font:inherit; font-size:14px; color:#1f2937; cursor:pointer; }
.ptplToolSelect:hover { border-color:#d0d5dd; }
.ptplColor { position:relative; display:inline-flex; align-items:center; justify-content:center; width:34px; height:32px; border-radius:4px; cursor:pointer; color:#1f2937; }
.ptplColor:hover { background:#eef5ff; } .ptplColor input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.ptplKeywordWrap { position:relative; display:inline-flex; }
.ptplKeywordPanel { position:absolute; top:36px; left:0; z-index:20; width:420px; max-height:460px; display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; box-shadow:0 12px 32px rgba(15,23,42,.18); }
.ptplKeywordHead { display:flex; gap:8px; } .ptplKeywordHead input { flex:1; height:36px; padding:0 10px; border:1px solid #d0d5dd; border-radius:6px; font:inherit; }
.ptplKeywordClose { width:36px; height:36px; min-height:0; border:0; background:none; font-size:20px; cursor:pointer; color:#6b7280; }
.ptplKeywordList { overflow:auto; display:flex; flex-direction:column; gap:10px; }
.ptplKeywordGroup { display:flex; flex-direction:column; gap:2px; } .ptplKeywordGroup > b { font-size:13px; color:#475467; padding:2px 4px; }
.ptplKeyword { display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:0; padding:6px 8px; border:0; border-radius:4px; background:none; font:inherit; font-size:13px; text-align:left; cursor:pointer; }
.ptplKeyword:hover { background:#eef5ff; } .ptplKeyword code { color:#0b5bd3; font-size:12px; } .ptplKeyword span { color:#6b7280; text-align:right; }
.ptplSpecialPanel { position:absolute; top:36px; left:0; z-index:20; display:grid; grid-template-columns:repeat(8, 32px); gap:2px; padding:8px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; box-shadow:0 12px 32px rgba(15,23,42,.18); }
.ptplSpecialPanel button { width:32px; height:32px; min-height:0; border:0; border-radius:4px; background:none; font-size:16px; cursor:pointer; } .ptplSpecialPanel button:hover { background:#eef5ff; }
.ptplAdvPage { background:#eef1f5; padding:20px; display:flex; justify-content:center; overflow:auto; min-height:560px; border-radius:0 0 8px 8px; }
.ptplAdvCanvas { box-sizing:border-box; max-width:100%; min-height:520px; padding:24px; background:#fff; box-shadow:0 2px 8px rgba(15,23,42,.15); color:#111; font-family:Arial, Helvetica, sans-serif; line-height:1.35; outline:none; overflow-wrap:anywhere; }
.ptplAdvCanvas:focus { box-shadow:0 0 0 2px #9ec9ff, 0 2px 8px rgba(15,23,42,.15); }
.ptplAdvCanvas table { width:100%; border-collapse:collapse; } .ptplAdvCanvas td, .ptplAdvCanvas th { outline:1px dashed #cfd6e0; outline-offset:-1px; }
.ptplAdvCanvas table[border] td, .ptplAdvCanvas table[border] th { border:1px solid #333; } .ptplAdvCanvas img { max-width:100%; } .ptplAdvCanvas p { margin:4px 0; } .ptplAdvCanvas h1, .ptplAdvCanvas h2, .ptplAdvCanvas h3 { margin:6px 0; }
.ptplAdvSource { width:100%; min-height:560px; padding:14px; border:1px solid #d0d5dd; border-radius:6px; font:13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; color:#111827; background:#fff; resize:vertical; }
.ptplAdvHint { margin:0; padding:8px 20px 14px; }
.ptplHeadActions { margin-left:auto; display:flex; gap:18px; }
.ptplHeadAction { display:inline-flex; align-items:center; gap:8px; min-height:0; padding:6px 4px; border:0; background:none; color:#1f2937; font:inherit; font-size:15px; cursor:pointer; }
.ptplHeadAction::before { content:""; width:20px; height:20px; background:#6b7280; -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat; }
.ptplHeadAction:hover { color:#0088ff; } .ptplHeadAction:hover::before { background:#0088ff; }
.ptplPreviewModal { width:min(900px, calc(100vw - 32px)); max-height:90vh; } .ptplPreviewModal .ptplPreview { min-height:0; }
@media (max-width: 1100px) { .ptplAdvEditor { grid-template-columns:1fr; } }
.ptplToolIcon.i-keyword { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h11l5%205v11H4zM15%204v5h5M8%2013h8M8%2017h5%22/%3E%3C/svg%3E"); }
.ptplToolIcon.i-html { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%208l-4%204%204%204M16%208l4%204-4%204M13.5%205l-3%2014%22/%3E%3C/svg%3E"); }
.ptplToolIcon.i-undo { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2014L4%209l5-5M4%209h11a5%205%200%200%201%200%2010h-3%22/%3E%3C/svg%3E"); }
.ptplToolIcon.i-redo { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2014l5-5-5-5M20%209H9a5%205%200%200%200%200%2010h3%22/%3E%3C/svg%3E"); }
.ptplToolIcon.i-bold { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ctext%20x%3D%2212%22%20y%3D%2217%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%22%20font-size%3D%2215%22%20font-weight%3D%22700%22%20fill%3D%22black%22%20stroke%3D%22none%22%20%3EB%3C/text%3E%3C/svg%3E"); }
.ptplToolIcon.i-italic { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ctext%20x%3D%2212%22%20y%3D%2217%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%22%20font-size%3D%2215%22%20font-weight%3D%22400%22%20fill%3D%22black%22%20stroke%3D%22none%22%20font-style%3D%22italic%22%20font-family%3D%22Georgia%22%3EI%3C/text%3E%3C/svg%3E"); }
.ptplToolIcon.i-underline { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ctext%20x%3D%2212%22%20y%3D%2217%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%22%20font-size%3D%2214%22%20font-weight%3D%22400%22%20fill%3D%22black%22%20stroke%3D%22none%22%20%3EU%3C/text%3E%3Cpath%20d%3D%22M6%2021h12%22/%3E%3C/svg%3E"); }
.ptplToolIcon.i-strikeThrough { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ctext%20x%3D%2212%22%20y%3D%2217%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%22%20font-size%3D%2215%22%20font-weight%3D%22400%22%20fill%3D%22black%22%20stroke%3D%22none%22%20%3ES%3C/text%3E%3Cpath%20d%3D%22M5%2012h14%22/%3E%3C/svg%3E"); }
.ptplToolIcon.i-subscript { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ctext%20x%3D%2212%22%20y%3D%2217%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%22%20font-size%3D%2214%22%20font-weight%3D%22400%22%20fill%3D%22black%22%20stroke%3D%22none%22%20x%3D%2210%22%3Ex%3C/text%3E%3Ctext%20x%3D%2218%22%20y%3D%2221%22%20font-family%3D%22Arial%22%20font-size%3D%229%22%20fill%3D%22black%22%20stroke%3D%22none%22%3E2%3C/text%3E%3C/svg%3E"); }
.ptplToolIcon.i-superscript { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ctext%20x%3D%2212%22%20y%3D%2217%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%22%20font-size%3D%2214%22%20font-weight%3D%22400%22%20fill%3D%22black%22%20stroke%3D%22none%22%20x%3D%2210%22%3Ex%3C/text%3E%3Ctext%20x%3D%2218%22%20y%3D%2210%22%20font-family%3D%22Arial%22%20font-size%3D%229%22%20fill%3D%22black%22%20stroke%3D%22none%22%3E2%3C/text%3E%3C/svg%3E"); }
.ptplToolIcon.i-ol { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%206h10M10%2012h10M10%2018h10%22/%3E%3Ctext%20x%3D%223%22%20y%3D%229%22%20font-family%3D%22Arial%22%20font-size%3D%227%22%20fill%3D%22black%22%20stroke%3D%22none%22%3E1%3C/text%3E%3Ctext%20x%3D%223%22%20y%3D%2215%22%20font-family%3D%22Arial%22%20font-size%3D%227%22%20fill%3D%22black%22%20stroke%3D%22none%22%3E2%3C/text%3E%3Ctext%20x%3D%223%22%20y%3D%2221%22%20font-family%3D%22Arial%22%20font-size%3D%227%22%20fill%3D%22black%22%20stroke%3D%22none%22%3E3%3C/text%3E%3C/svg%3E"); }
.ptplToolIcon.i-ul { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%206h10M10%2012h10M10%2018h10%22/%3E%3Ccircle%20cx%3D%225%22%20cy%3D%226%22%20r%3D%221.4%22%20fill%3D%22black%22/%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2212%22%20r%3D%221.4%22%20fill%3D%22black%22/%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2218%22%20r%3D%221.4%22%20fill%3D%22black%22/%3E%3C/svg%3E"); }
.ptplToolIcon.i-outdent { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16M11%2010h9M11%2014h9M4%2019h16M8%209l-3%203%203%203%22/%3E%3C/svg%3E"); }
.ptplToolIcon.i-indent { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16M11%2010h9M11%2014h9M4%2019h16M5%209l3%203-3%203%22/%3E%3C/svg%3E"); }
.ptplToolIcon.i-left { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16M4%2010h10M4%2014h16M4%2018h10%22/%3E%3C/svg%3E"); }
.ptplToolIcon.i-center { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16M7%2010h10M4%2014h16M7%2018h10%22/%3E%3C/svg%3E"); }
.ptplToolIcon.i-right { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16M10%2010h10M4%2014h16M10%2018h10%22/%3E%3C/svg%3E"); }
.ptplToolIcon.i-justify { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16M4%2010h16M4%2014h16M4%2018h16%22/%3E%3C/svg%3E"); }
.ptplToolIcon.i-ltr { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%204v16M14%204v16M10%204h6M10%204a4%204%200%200%200%200%208M17%2017l3%202-3%202M4%2019h16%22/%3E%3C/svg%3E"); }
.ptplToolIcon.i-rtl { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%204v16M14%204v16M10%204h6M10%204a4%204%200%200%200%200%208M7%2017l-3%202%203%202M4%2019h16%22/%3E%3C/svg%3E"); }
.ptplToolIcon.i-image { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16v14H4zM4%2016l5-5%204%204%203-3%204%204%22/%3E%3Ccircle%20cx%3D%2215.5%22%20cy%3D%229%22%20r%3D%221.5%22/%3E%3C/svg%3E"); }
.ptplToolIcon.i-table { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16v14H4zM4%2010h16M4%2014.5h16M9.5%205v14M14.5%205v14%22/%3E%3C/svg%3E"); }
.ptplToolIcon.i-hr { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012h16M4%207h7M4%2017h7%22/%3E%3C/svg%3E"); }
.ptplToolIcon.i-omega { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ctext%20x%3D%2212%22%20y%3D%2217%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%22%20font-size%3D%2216%22%20font-weight%3D%22400%22%20fill%3D%22black%22%20stroke%3D%22none%22%20%3E%CE%A9%3C/text%3E%3C/svg%3E"); }
.ptplToolIcon.i-color { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ctext%20x%3D%2212%22%20y%3D%2217%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%22%20font-size%3D%2214%22%20font-weight%3D%22700%22%20fill%3D%22black%22%20stroke%3D%22none%22%20y%3D%2215%22%3EA%3C/text%3E%3Cpath%20d%3D%22M5%2020h14%22/%3E%3C/svg%3E"); }
.ptplToolIcon.i-highlight { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020h16%22/%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%221.5%22%20fill%3D%22black%22/%3E%3Ctext%20x%3D%2212%22%20y%3D%2214%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%22%20font-size%3D%2210%22%20font-weight%3D%22700%22%20fill%3D%22white%22%20stroke%3D%22none%22%3EA%3C/text%3E%3C/svg%3E"); }
.ptplHeadAction.i-eye { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012s3.5-7%2010-7%2010%207%2010%207-3.5%207-10%207S2%2012%202%2012z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22/%3E%3C/svg%3E"); }
.ptplHeadAction.i-print { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209V3h12v6M6%2018H4a2%202%200%200%201-2-2v-5a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v5a2%202%200%200%201-2%202h-2M6%2014h12v7H6z%22/%3E%3C/svg%3E"); }
.ptplHeadAction.i-history { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%201%200%203-6.7L3%208M3%203v5h5M12%207v5l3%202%22/%3E%3C/svg%3E"); }
.ptplChoiceIcon.pencil { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16.5%203.5a2.1%202.1%200%200%201%203%203L7%2019l-4%201%201-4z%22%20fill%3D%22black%22/%3E%3C/svg%3E"); }
.ptplChoiceIcon.braces { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203H7a2%202%200%200%200-2%202v4a2%202%200%200%201-2%202%202%202%200%200%201%202%202v4a2%202%200%200%200%202%202h1M16%203h1a2%202%200%200%201%202%202v4a2%202%200%200%200%202%202%202%202%200%200%200-2%202v4a2%202%200%200%201-2%202h-1%22/%3E%3C/svg%3E"); }
.ptplToolIcon.i-italic { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ctext%20x%3D%2212%22%20y%3D%2217%22%20text-anchor%3D%22middle%22%20font-family%3D%22Georgia%22%20font-size%3D%2216%22%20font-weight%3D%22400%22%20font-style%3D%22italic%22%20fill%3D%22black%22%20stroke%3D%22none%22%3EI%3C/text%3E%3C/svg%3E"); }
.ptplToolIcon.i-subscript { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ctext%20x%3D%229%22%20y%3D%2217%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%22%20font-size%3D%2215%22%20font-weight%3D%22400%22%20font-style%3D%22normal%22%20fill%3D%22black%22%20stroke%3D%22none%22%3Ex%3C/text%3E%3Ctext%20x%3D%2218%22%20y%3D%2221%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%22%20font-size%3D%229%22%20font-weight%3D%22400%22%20font-style%3D%22normal%22%20fill%3D%22black%22%20stroke%3D%22none%22%3E2%3C/text%3E%3C/svg%3E"); }
.ptplToolIcon.i-superscript { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ctext%20x%3D%229%22%20y%3D%2217%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%22%20font-size%3D%2215%22%20font-weight%3D%22400%22%20font-style%3D%22normal%22%20fill%3D%22black%22%20stroke%3D%22none%22%3Ex%3C/text%3E%3Ctext%20x%3D%2218%22%20y%3D%2210%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%22%20font-size%3D%229%22%20font-weight%3D%22400%22%20font-style%3D%22normal%22%20fill%3D%22black%22%20stroke%3D%22none%22%3E2%3C/text%3E%3C/svg%3E"); }
.ptplToolIcon.i-color { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ctext%20x%3D%2212%22%20y%3D%2215%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%22%20font-size%3D%2214%22%20font-weight%3D%22700%22%20font-style%3D%22normal%22%20fill%3D%22black%22%20stroke%3D%22none%22%3EA%3C/text%3E%3Cpath%20d%3D%22M5%2020h14%22%20stroke-width%3D%222.5%22/%3E%3C/svg%3E"); }
/* The app's table rules (uppercase grey headers, row borders, padding) stay out of the template sheet. */
.ptplAdvCanvas th, .ptplAdvCanvas td { padding:0; border:0; background:none; color:inherit; font-size:inherit; text-transform:none; letter-spacing:normal; font-weight:inherit; height:auto; white-space:normal; }
.ptplAdvCanvas th { font-weight:700; }
.ptplAdvCanvas tr:hover td { background:none; }

.ptplToolIcon.i-italic { --i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%204h8M6%2020h8M14%204l-4%2016%22/%3E%3C/svg%3E"); }

/* Cấu hình → Mẫu in, laid out like Sapo's "Cấu hình mẫu in": bordered ← and the document name with In thử / Lịch sử
   chỉnh sửa on the right; the paper on a grey desk and the settings card side by side at equal width; Mẫu in and Khổ in
   next to each other; sections as flat rows (tri-state box, name, hint, ›) that open their own page; buttons bottom right. */
.printTemplatePage .ptplHead { display:flex; align-items:center; gap:18px; padding:18px 24px; }
.printTemplatePage .ptplHead h1 { margin:0; font-size:28px; font-weight:500; color:#111827; }
.ptplBack { width:48px; height:48px; min-height:0; padding:0; border:1px solid #d0d5dd; border-radius:6px; background:#fff; cursor:pointer; position:relative; }
.ptplBack::after { content:""; position:absolute; inset:13px; background:#6b7280; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2012H5M11%2018l-6-6%206-6%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2012H5M11%2018l-6-6%206-6%22/%3E%3C/svg%3E") center/contain no-repeat; }
.ptplBack:hover { border-color:#0088ff; } .ptplBack:hover::after { background:#0088ff; }
.ptplAppliedTag { padding:3px 10px; border-radius:999px; background:#ecfdf3; color:#067647; font-size:13px; font-weight:500; }
.printTemplatePage .ptplHeadActions { margin-left:auto; display:flex; gap:28px; }
.printTemplatePage .ptplHeadAction { font-size:17px; color:#1f2937; }
.ptplBasic, .ptplAdvEditor { grid-template-columns:minmax(0, 1fr) minmax(400px, 1fr); gap:24px; }
.ptplBasic .ptplPreview { background:#a3aab5; border-radius:4px; padding:16px; align-items:flex-start; }
.ptplBasic .ptplPreviewFrame { width:100% !important; max-width:820px; box-shadow:0 2px 10px rgba(0,0,0,.18); border-radius:2px; }
.ptplBasic .ptplPanel, .ptplAdvEditor .ptplPanel { border-radius:8px; box-shadow:0 1px 3px rgba(15,23,42,.12); }
.ptplBasic .ptplPanelBody, .ptplAdvEditor .ptplPanelBody { padding:24px 30px; gap:0; }
.ptplBasic .ptplPanel h3, .ptplAdvEditor .ptplPanel h3 { margin:0 0 16px; font-size:22px; font-weight:500; color:#111827; }
.ptplTypeGrid { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding-bottom:22px; border-bottom:1px solid #e5e7eb; margin-bottom:6px; }
.printTemplatePage .ptplText { font-size:16px; color:#6b7280; gap:8px; }
.printTemplatePage .ptplText select, .printTemplatePage .ptplText input, .printTemplatePage .ptplText textarea { height:52px; padding:0 16px; border:1px solid #d0d5dd; border-radius:6px; font-size:17px; color:#111827; background-color:#fff; }
.printTemplatePage .ptplText textarea { height:auto; padding:12px 16px; }
.ptplAdvEditor .ptplText { margin-bottom:14px; }
.ptplRows { display:flex; flex-direction:column; }
.ptplRow { display:flex; align-items:center; gap:16px; padding:20px 4px; cursor:pointer; border-radius:6px; }
.ptplRow:hover { background:#f7f9fc; }
.ptplRow:focus-visible { outline:2px solid #9ec9ff; outline-offset:-2px; }
.ptplRowBox { display:inline-flex; }
.ptplRowBox input, .ptplField input { width:22px; height:22px; accent-color:#0088ff; cursor:pointer; }
.ptplRowText { flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.ptplRowText b { font-size:19px; font-weight:500; color:#111827; }
.ptplRow.off .ptplRowText b { color:#374151; }
.ptplRowText small { font-size:16px; color:#6b7280; }
.ptplRowText .ptplLink { font-size:16px; min-height:0; color:#0088ff; }
.ptplRowChevron { width:22px; height:22px; flex:none; background:#475467; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%206l6%206-6%206%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%206l6%206-6%206%22/%3E%3C/svg%3E") center/contain no-repeat; }
.ptplSectionPage { display:flex; flex-direction:column; gap:14px; }
.ptplSectionBack { display:flex; align-items:center; gap:12px; min-height:0; padding:0 0 14px; border:0; border-bottom:1px solid #e5e7eb; background:none; font:inherit; font-size:21px; font-weight:500; color:#111827; cursor:pointer; text-align:left; }
.ptplSectionBack i { width:22px; height:22px; background:#475467; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2012H5M11%2018l-6-6%206-6%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2012H5M11%2018l-6-6%206-6%22/%3E%3C/svg%3E") center/contain no-repeat; }
.ptplSectionBack:hover i { background:#0088ff; }
.ptplFieldList { display:flex; flex-direction:column; gap:14px; padding:4px 0 6px; }
.printTemplatePage .ptplField { gap:12px; font-size:17px; color:#111827; }
.ptplFieldMain { padding-bottom:12px; border-bottom:1px solid #f1f3f6; font-weight:500; }
.ptplBasic .ptplActions, .ptplAdvEditor .ptplActions { gap:22px; padding:22px 30px; border-top:1px solid #e5e7eb; }
.ptplBasic .ptplActions button, .ptplAdvEditor .ptplActions button { height:54px; min-height:0; padding:0 24px; border:1px solid #0088ff; border-radius:6px; background:#fff; color:#0088ff; font-size:19px; }
.ptplBasic .ptplActions button.primary, .ptplAdvEditor .ptplActions button.primary { background:#0088ff; color:#fff; }
.ptplBasic .ptplActions button:hover:not(:disabled), .ptplAdvEditor .ptplActions button:hover:not(:disabled) { box-shadow:0 0 0 3px rgba(0,136,255,.15); }
.ptplBasic .ptplNotice, .ptplBasic .ptplError, .ptplAdvEditor .ptplNotice, .ptplAdvEditor .ptplError { margin:0 30px 12px; font-size:15px; }
@media (max-width: 1100px) { .ptplBasic, .ptplAdvEditor { grid-template-columns:1fr; } }
.ptplAdvEditor { grid-template-columns:minmax(0, 2fr) minmax(380px, 1fr); }
@media (max-width: 1100px) { .ptplAdvEditor { grid-template-columns:1fr; } }
.ptplAdvEditor .ptplActions { gap:12px; padding:20px 24px; flex-wrap:nowrap; }
.ptplAdvEditor .ptplActions button { height:48px; padding:0 16px; font-size:16px; white-space:nowrap; }

/* Cấu hình theo Sapo Omni mà Clone tự lưu (clone-settings.js) */
.settingsDetailRow.omniRow { grid-template-columns: minmax(220px, 360px) minmax(0, 1fr); gap: 32px; margin-bottom: 8px; }
/* Settings pages with wide tables (Giá bán tự động, Google Merchant Center): a narrow title column. */
.posTableSettingsPage .settingsDetailRow.omniRow { grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); gap: 20px; }
@media (max-width: 900px) { .posTableSettingsPage .settingsDetailRow.omniRow { grid-template-columns: 1fr; gap: 12px; } }
/* Giá bán tự động → Theo ngành hàng: fixed columns, each category name on one line (the table scrolls sideways on narrow screens). */
.priceRuleTable { table-layout: fixed; width: 100%; min-width: 880px; }
.priceRuleTable th, .priceRuleTable td { white-space: nowrap; max-width: none; overflow: hidden; text-overflow: clip; }
.priceRuleTable td:first-child { overflow: visible; }
.omniRow .settingsDetailIntro h2 { font-size: 17px; margin-bottom: 6px; }
.omniRow .settingsDetailIntro p { font-size: 14px; }
.omniPanel { display: grid; gap: 14px; padding: 20px 24px; border-radius: 6px; align-content: start; }
.omniRadios { display: grid; gap: 10px; }
.omniRadio, .omniCheck { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.omniRadio { padding: 12px 14px; border: 1px solid #dfe3e8; border-radius: 6px; background: #fff; }
.omniRadio.active { border-color: #0088ff; box-shadow: 0 0 0 1px #0088ff inset; }
.omniRadio input, .omniCheck input { margin-top: 3px; width: 16px; height: 16px; accent-color: #0088ff; flex: none; }
.omniRadio span, .omniCheck span { display: grid; gap: 2px; }
.omniRadio strong, .omniCheck strong { font-size: 15px; font-weight: 500; }
.omniRadio small, .omniCheck small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.omniField { display: grid; gap: 6px; font-size: 14px; }
.omniField > span, .omniLabel { font-size: 14px; font-weight: 500; }
.omniField input, .omniField select, .omniField textarea { height: 40px; min-height: 0; padding: 0 12px; border: 1px solid #d3d8de; border-radius: 6px; background: #fff; font: inherit; }
.omniField textarea { height: auto; padding: 8px 12px; resize: vertical; }
.omniUnit { display: flex; align-items: center; border: 1px solid #d3d8de; border-radius: 6px; background: #fff; overflow: hidden; }
.omniUnit input { border: 0; flex: 1; min-width: 0; height: 38px; }
.omniUnit em { padding: 0 12px; color: var(--muted); font-style: normal; }
.omniPair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.omniTriple { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.omniFooter { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-end; padding-top: 12px; border-top: 1px solid #e5e7eb; }
.omniFooter > span:first-child { margin-right: auto; }
.omniFooter button { height: 40px; min-height: 0; padding: 0 20px; border-radius: 6px; }
.omniError { margin: 0; }
.omniLink { justify-self: start; height: 32px; min-height: 0; padding: 0; border: 0; background: none; color: #0088ff; font: inherit; cursor: pointer; }
.omniIcon { width: 32px; height: 32px; min-height: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.omniList { display: grid; gap: 8px; }
.omniList input, .omniList select, .omniRates input, .omniRates select { height: 36px; min-height: 0; padding: 0 8px; border: 1px solid #d3d8de; border-radius: 6px; font: inherit; width: 100%; }
.omniList select[multiple] { height: auto; }
.omniWarn { display: grid; gap: 4px; }
.omniWarn p { margin: 0; }
.omniChips, .omniProvinces { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.omniProvinces { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-height: 260px; overflow: auto; padding: 8px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; }
.omniInline { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.omniRange { display: flex; gap: 6px; align-items: center; }
.omniRange input { width: 110px; }
.omniRates .omniUnit input { border: 0; }
.omniFeeGroups { display: grid; gap: 12px; }
.omniFeeGroup { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid #dfe3e8; border-radius: 6px; background: #fff; }
.omniFeeGroup h3 { margin: 0; font-size: 15px; }
.omniFeeItem { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.omniFeeItem div { display: grid; gap: 2px; }
.omniFeeItem small { color: var(--muted); }
.omniEmailRow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.shippingSettingsBody .omniRow, .paymentMethodSection.omniSettingsPage .omniRow { background: #fff; }
@media (max-width: 900px) { .settingsDetailRow.omniRow { grid-template-columns: 1fr; gap: 12px; } .omniPair, .omniTriple { grid-template-columns: 1fr; } }

/* Cấu hình → Quản lý trang, laid out like Chat OmniAI: a tab bar of every platform (icon, Beta/New), then two panels —
   Trang chưa kích hoạt (search, Chọn tất cả, empty-state picture, unlink + Kích hoạt →) and Trang đã kích hoạt (N)
   (Chọn tất cả, search, pages grouped by channel as tiles with a checkbox, avatar and channel badge, name, ID and →;
   page count, ← Gỡ kích hoạt, Truy cập). */
.socialConnectButton { display:inline-flex; align-items:center; gap:8px; }
.socialConnectButton i { width:20px; height:20px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%208v8M8%2012h8%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%208v8M8%2012h8%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialSettings .socialChannelTabs { display:flex; flex-wrap:wrap; gap:0; margin:0 0 16px; border-bottom:1px solid #e5e7eb; }
.socialSettings .socialChannelTabs button { display:inline-flex; align-items:center; gap:8px; height:52px; min-height:0; padding:0 18px; border:0; border-bottom:3px solid transparent;
  border-radius:0; background:none; color:#344054; font:inherit; font-size:15px; cursor:pointer; margin-bottom:-1px; }
.socialSettings .socialChannelTabs button:hover { color:#0088ff; }
.socialSettings .socialChannelTabs button.active { border-bottom-color:#0088ff; color:#111827; font-weight:500; }
.socialConnectBadge.inline { position:static; padding:2px 8px; border-radius:999px; background:#e0edff; color:#0b5bd3; font-size:12px; font-weight:600; }
.socialConnectBadge.inline.new { background:#ffe4e6; color:#e11d48; }
.socialPageColumns { display:grid; grid-template-columns:minmax(300px, 0.9fr) minmax(0, 2fr); gap:20px; align-items:stretch; }
.socialPageColumn { display:flex; flex-direction:column; min-height:560px; border:1px solid #eaecf0; border-radius:8px; background:#fff; }
.socialPageColumnHead { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 18px 12px; }
.socialPageColumnHead h4 { margin:0; font-size:18px; font-weight:500; color:#111827; }
.socialPageColumnTools { display:flex; align-items:center; gap:16px; }
.socialPageColumn.on .socialPageColumnHead { flex-wrap:wrap; }
.socialPageColumn.on .socialPageColumnTools { flex:1 1 100%; justify-content:space-between; padding-top:6px; }
.socialPageColumnTools.stacked { flex-direction:column; align-items:stretch; gap:14px; padding:0 18px 12px; border-bottom:1px solid #f1f3f6; }
.socialPageSearch { position:relative; display:flex; min-width:260px; }
.socialPageSearch i { position:absolute; left:12px; top:50%; width:18px; height:18px; margin-top:-9px; background:#98a2b3; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22/%3E%3Cpath%20d%3D%22M21%2021l-4.3-4.3%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22/%3E%3Cpath%20d%3D%22M21%2021l-4.3-4.3%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialSettings .socialSettingMain .socialPageSearch input { width:100%; height:44px; padding-left:40px; }
.socialPageSelectAll { display:inline-flex; align-items:center; gap:10px; font-size:15px; color:#111827; cursor:pointer; }
.socialPageSelectAll input, .socialPageTile input { width:18px; height:18px; accent-color:#0088ff; cursor:pointer; }
.socialPageColumnBody { flex:1; overflow:auto; padding:8px 18px 12px; }
.socialPageColumn.on .socialPageColumnBody { border-top:1px solid #f1f3f6; }
.socialPageGroup { margin:8px 0 14px; }
.socialPageGroup h5 { margin:6px 0 10px; font-size:14px; font-weight:500; color:#667085; letter-spacing:.3px; }
.socialPageTiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.socialPageTile { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid #eaecf0; border-radius:6px; background:#fff; min-width:0; transition:border-color .15s; }
.socialPageTile:hover { border-color:#bcd7ff; }
.socialPageTile.picked { border-color:#0088ff; background:#f5faff; }
.socialPageTile .socialPageCardAvatar { width:42px; height:42px; flex:none; }
.socialPageTileText { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.socialPageTileText b { font-size:15px; font-weight:500; color:#111827; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.socialPageTileText .socialMuted { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.socialPageLinks { display:flex; gap:10px; }
.socialPageLink { min-height:0; padding:0; border:0; background:none; color:#0088ff; font:inherit; font-size:13px; cursor:pointer; }
.socialPageOpen { flex:none; width:26px; height:26px; min-height:0; padding:0; border:0; background:#0088ff; cursor:pointer; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M8%2012h8M13%208l4%204-4%204%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M8%2012h8M13%208l4%204-4%204%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialPageOpen:hover { background:#0068cc; }
.socialPageEmpty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:360px; text-align:center; color:#667085; font-size:15px; }
.socialPageEmpty b { color:#111827; font-size:17px; font-weight:500; }
.socialPageEmpty span b { color:#0088ff; font-size:15px; }
.socialPageEmptyArt { width:120px; height:100px; margin-bottom:10px; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20120%20100%22%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%2278%22%20height%3D%2262%22%20rx%3D%226%22%20fill%3D%22%23eef4ff%22%20stroke%3D%22%233b82f6%22%20stroke-width%3D%223%22/%3E%3Cpath%20d%3D%22M14%2030h78%22%20stroke%3D%22%233b82f6%22%20stroke-width%3D%223%22/%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2222%22%20r%3D%222.5%22%20fill%3D%22%233b82f6%22/%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2222%22%20r%3D%222.5%22%20fill%3D%22%233b82f6%22/%3E%3Cpath%20d%3D%22M34%2044l6%206M40%2044l-6%206M58%2044l6%206M64%2044l-6%206M44%2062h18%22%20stroke%3D%22%2393c5fd%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22/%3E%3Ccircle%20cx%3D%2284%22%20cy%3D%2270%22%20r%3D%2215%22%20fill%3D%22%23f59e0b%22/%3E%3Ccircle%20cx%3D%2282%22%20cy%3D%2268%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223%22/%3E%3Cpath%20d%3D%22M87%2073l6%206%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M8%2050l3%203M104%2018l3%203M100%2012v4%22%20stroke%3D%22%2334d399%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialPageColumnFoot { display:flex; align-items:center; gap:12px; padding:12px 18px; border-top:1px solid #eaecf0; }
.socialPageQuota { font-size:15px; color:#344054; }
.socialPageUnlink { width:60px; height:44px; min-height:0; flex:none; border:1px solid #eaecf0; border-radius:6px; background:#fff; cursor:pointer; position:relative; }
.socialPageUnlink::after { content:""; position:absolute; inset:11px 19px; background:#667085; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2017H7a5%205%200%200%201%200-10h2M15%207h2a5%205%200%200%201%204%208M8%2012h3M3%203l18%2018%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2017H7a5%205%200%200%201%200-10h2M15%207h2a5%205%200%200%201%204%208M8%2012h3M3%203l18%2018%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialPageActivate, .socialPageDeactivate, .socialPageAccess { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:44px; min-height:0; padding:0 20px;
  border:1px solid #eaecf0; border-radius:6px; background:#f2f4f7; color:#344054; font:inherit; font-size:16px; cursor:pointer; }
.socialPageActivate { flex:1; }
.socialPageActivate i, .socialPageDeactivate i { width:20px; height:20px; background:currentColor; }
.socialPageActivate i { -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M8%2012h8M13%208l4%204-4%204%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M8%2012h8M13%208l4%204-4%204%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialPageDeactivate i { -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M16%2012H8M11%208l-4%204%204%204%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M16%2012H8M11%208l-4%204%204%204%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialPageActivate:not(:disabled), .socialPageAccess:not(:disabled) { background:#0088ff; border-color:#0088ff; color:#fff; }
.socialPageDeactivate:not(:disabled) { background:#fff; border-color:#d92d20; color:#d92d20; }
.socialPageUnlink:not(:disabled):hover { border-color:#d92d20; } .socialPageUnlink:not(:disabled):hover::after { background:#d92d20; }
.socialPageColumnFoot button:disabled { opacity:.6; cursor:default; }
@media (max-width: 1100px) { .socialPageColumns { grid-template-columns:1fr; } }
.socialSettings .socialChannelTabs { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; }
.socialSettings .socialChannelTabs button { padding:0 12px; flex:none; white-space:nowrap; }

/* Cấu hình: menu trái theo Sapo Omni (renderSettingsNav / withSettingsNav) */
.main.omniSettingsShell { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 0; padding: 0; align-items: start; min-height: calc(100vh - 65px); }
.omniSettingsNav { position: sticky; top: 0; display: grid; gap: 8px; align-content: start; max-height: 100vh; overflow-y: auto; padding: 16px 12px; border-right: 1px solid #e5e7eb; background: #fff; }
.omniSettingsNav h2 { margin: 0 8px 4px; font-size: 20px; }
.omniSettingsNav .search { height: 36px; min-height: 0; width: 100%; }
.omniSettingsNavList, .omniSettingsNavGroup { display: grid; gap: 2px; }
.omniSettingsNavGroup + .omniSettingsNavGroup { margin-top: 10px; padding-top: 10px; border-top: 1px solid #eef0f3; }
.omniSettingsNavGroup h3 { margin: 0 8px 4px; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.omniSettingsNav button { height: 36px; min-height: 0; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.omniSettingsNav button:hover { background: #f2f4f6; }
.omniSettingsNav button.active { background: #e6f3ff; color: #0088ff; font-weight: 600; }
.omniSettingsContent { min-width: 0; }
.omniSettingsContent .settingsDetailRow { grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: 24px; margin-bottom: 24px; }
.omniSettingsContent .settingsTableCard { overflow-x: auto; }
.omniSettingsContent .paymentSettingsHeader { margin-left: 0; margin-right: 0; }
.paymentMethodSection.omniSettingsPage { display: block; }
.omniSettingsContent .settingsDetailHeader .backLink, .omniSettingsContent .productStockSettingsHeader .backLink, .omniSettingsContent .paymentSettingsHeader .backLink { display: none; }
@media (max-width: 900px) {
  .main.omniSettingsShell { grid-template-columns: 1fr; }
  .omniSettingsNav { position: static; max-height: none; grid-template-columns: 1fr; border-right: 0; border-bottom: 1px solid #e5e7eb; }
  .omniSettingsNavList { display: flex; gap: 4px; overflow-x: auto; }
  .omniSettingsNavGroup { display: flex; gap: 4px; }
  .omniSettingsNavGroup + .omniSettingsNavGroup { margin: 0; padding: 0 0 0 8px; border-top: 0; border-left: 1px solid #eef0f3; }
  .omniSettingsNavGroup h3 { display: none; }
  .omniSettingsNav button { white-space: nowrap; flex: none; }
  .omniSettingsContent .settingsDetailRow { grid-template-columns: 1fr; gap: 12px; }
}

/* Đơn hàng → 💬: the order's Kênh Social / Zalo conversation, beside the customer name. */
.orderChatLink { display:inline-block; width:18px; height:18px; margin-left:6px; vertical-align:-3px; background:#0088ff; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22/%3E%3C/svg%3E") center/contain no-repeat; }
.orderChatLink.zalo, .orderChatLink.zalo_oa { background:#0068ff; }
.orderChatLink:hover { background:#0059b3; }

/* Kênh liên hệ (customer detail, Omni step 3) */
.customerChannelList{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.customerChannelItem{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0}
.customerChannelItem>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.customerChannelChats{display:flex;flex-direction:column;gap:6px}
.customerChannelChat{display:grid;gap:2px;padding:8px;border:1px solid var(--line,#e5e7eb);border-radius:6px;text-decoration:none;color:inherit;font-size:13px}
.customerChannelChat:hover{background:var(--hover,#f5f7fa)}
.customerChannelChat .muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.customerMergeNote{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0 0 8px;font-size:13px}
.customerMergeList{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.customerMergeOption{display:flex;align-items:flex-start;gap:10px;padding:10px;border:1px solid var(--line,#e5e7eb);border-radius:6px;cursor:pointer}
.customerMergeOption>span{display:grid;gap:2px;min-width:0}
.customerMergeOption small{overflow-wrap:anywhere}
.customerMergeConfirm{display:flex;align-items:flex-start;gap:8px;font-size:13px}
.customerMergedPill{margin-left:6px;font-size:12px;white-space:nowrap}

/* Cấu hình → Kết nối (Omni bước 1) */
.connectionsSummary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px; }
.connectionsHeading { margin: 20px 0 8px; font-size: 15px; font-weight: 600; }
.settingsDataTable tr.connectionsOk td { color: var(--muted, #747c87); }
.settingsDataTable.connectionsTable th, .settingsDataTable.connectionsTable td { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; }

/* Menu trái theo Sapo Omni (docs/omni-architecture.md §4): icons, nhóm KẾ TOÁN VÀ THUẾ / KÊNH BÁN HÀNG / ỨNG DỤNG, nút Bán hàng. */
.omniNav .navButton { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.omniNav .navIcon { flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; opacity: .9; }
.omniNav .navLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Mục con thẳng hàng với chữ của mục cha (viền 1 + đệm 16 + icon 18 + khe 10 = 45px); khối .navSub không thụt thêm. */
.omniNav .navSub { padding-left: 0; }
.omniNav .navSub button { padding-left: 45px; }
.omniNav .navSell { background: #0a6cff; color: #fff; border-radius: 6px; margin-bottom: 6px; }
.omniNav .navSell:hover, .omniNav .navSell.active { background: #0a5fe0; color: #fff; }
.omniNav .navDivider { height: 1px; margin: 8px 0; background: rgba(255, 255, 255, .12); }
.omniNav .navSection { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 2px; padding: 8px 12px 4px; border-top: 1px solid rgba(255, 255, 255, .12); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.omniNav .navSectionAdd { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 50%; color: #c9d1dc; font-size: 14px; line-height: 1; text-decoration: none; }
.omniNav .navSectionAdd:hover { color: #fff; }
/* Thu gọn menu: còn cột icon (tên mục hiện khi rê chuột qua title), nhóm KẾ TOÁN… / KÊNH BÁN HÀNG… thành vạch ngăn, mục con ẩn
   (chủ dự án 18/10/2026: "Sau khi Main menu sidebar collapsed thì hiển thị icon của các mục sidebar thay vì để trống"). */
.nav.omniNav.collapsed .navItems { display: grid; }
.nav.omniNav.collapsed .navLabel, .nav.omniNav.collapsed .navSection > * { display: none; }
.nav.omniNav.collapsed .navButton { justify-content: center; gap: 0; padding: 0; }
.nav.omniNav.collapsed .navSection { height: 0; margin: 6px 0; padding: 0; }
.nav.omniNav.collapsed .navDivider { margin: 6px 0; }
/* ⋮ sits just under the P band (top 62px, 34px tall), so the icons start below it. */
.orderListShell .nav.omniNav.collapsed .navItems { padding-top: 36px; }
/* Rê chuột / focus lên icon có mục con: khung mục con (tên mục ở đầu) bật ra sát mép phải menu, ngang icon; position: fixed
   để không bị overflow của menu cắt, top/left do placeNavFlyout() đặt (chủ dự án 18/10/2026: "Làm thêm phần rê chuột hiện mục con đi"). */
.nav.omniNav.collapsed .navSub { display: grid; gap: 0; position: fixed; z-index: 60; top: var(--nav-flyout-top, 8px); left: var(--nav-flyout-left, 64px); min-width: 200px; margin: 0; padding: 0 0 6px; background: #1c2838; border-radius: 0 4px 4px 0; box-shadow: 4px 4px 12px rgba(0, 0, 0, .3); visibility: hidden; }
.nav.omniNav.collapsed .navButton:hover + .navSub, .nav.omniNav.collapsed .navButton:focus-visible + .navSub,
.nav.omniNav.collapsed .navSub:hover, .nav.omniNav.collapsed .navSub:focus-within { visibility: visible; }
/* Invisible bridge over the menu's 4px right padding, so moving from the icon to the box does not close it. */
.nav.omniNav.collapsed .navSub::before { content: ""; position: absolute; top: 0; bottom: 0; left: -4px; width: 4px; }
.nav.omniNav.collapsed .navSubTitle { padding: 0 16px; min-height: 48px; display: flex; align-items: center; margin-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .12); color: #fff; font-weight: 600; white-space: nowrap; }
.nav.omniNav.collapsed .navSub button { min-height: 36px; padding: 0 16px; white-space: nowrap; }
.nav.omniNav.collapsed .navSub button:hover { background: rgba(255, 255, 255, .06); }
.omniNav .navIcon.icon-home { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2011l8-7%208%207v9h-5v-6H9v6H4z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2011l8-7%208%207v9h-5v-6H9v6H4z%22%2F%3E%3C%2Fsvg%3E"); }
.omniNav .navIcon.icon-orders { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203h12v18H6z%22%2F%3E%3Cpath%20d%3D%22M9%208h6M9%2012h6M9%2016h4%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203h12v18H6z%22%2F%3E%3Cpath%20d%3D%22M9%208h6M9%2012h6M9%2016h4%22%2F%3E%3C%2Fsvg%3E"); }
.omniNav .navIcon.icon-shipping { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h11v10H3zM14%2010h4l3%203v3h-7%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2218%22%20r%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2218%22%20r%3D%221.8%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h11v10H3zM14%2010h4l3%203v3h-7%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2218%22%20r%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2218%22%20r%3D%221.8%22%2F%3E%3C%2Fsvg%3E"); }
.omniNav .navIcon.icon-products { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l8%204.5v9L12%2021l-8-4.5v-9z%22%2F%3E%3Cpath%20d%3D%22M4%207.5l8%204.5%208-4.5M12%2012v9%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l8%204.5v9L12%2021l-8-4.5v-9z%22%2F%3E%3Cpath%20d%3D%22M4%207.5l8%204.5%208-4.5M12%2012v9%22%2F%3E%3C%2Fsvg%3E"); }
.omniNav .navIcon.icon-warehouse { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209l9-5%209%205v11H3z%22%2F%3E%3Cpath%20d%3D%22M7%2020v-7h10v7M7%2016h10%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209l9-5%209%205v11H3z%22%2F%3E%3Cpath%20d%3D%22M7%2020v-7h10v7M7%2016h10%22%2F%3E%3C%2Fsvg%3E"); }
.omniNav .navIcon.icon-customers { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021c1-4%204-6%208-6s7%202%208%206%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021c1-4%204-6%208-6s7%202%208%206%22%2F%3E%3C%2Fsvg%3E"); }
.omniNav .navIcon.icon-marketing { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2010v4h3l6%204V6L7%2010z%22%2F%3E%3Cpath%20d%3D%22M17%209a4%204%200%200%201%200%206%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2010v4h3l6%204V6L7%2010z%22%2F%3E%3Cpath%20d%3D%22M17%209a4%204%200%200%201%200%206%22%2F%3E%3C%2Fsvg%3E"); }
.omniNav .navIcon.icon-cashbook { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%2216%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%208h8M8%2012h8M8%2016h5%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%2216%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%208h8M8%2012h8M8%2016h5%22%2F%3E%3C%2Fsvg%3E"); }
.omniNav .navIcon.icon-reports { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020V10M10%2020V4M16%2020v-7M22%2020H2%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020V10M10%2020V4M16%2020v-7M22%2020H2%22%2F%3E%3C%2Fsvg%3E"); }
.omniNav .navIcon.icon-chat { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16v10H9l-5%204z%22%2F%3E%3Cpath%20d%3D%22M8%209h8M8%2012h5%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16v10H9l-5%204z%22%2F%3E%3Cpath%20d%3D%22M8%209h8M8%2012h5%22%2F%3E%3C%2Fsvg%3E"); }
.omniNav .navIcon.icon-invoice { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203h12v18l-3-2-3%202-3-2-3%202z%22%2F%3E%3Cpath%20d%3D%22M9%208h6M9%2012h6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203h12v18l-3-2-3%202-3-2-3%202z%22%2F%3E%3Cpath%20d%3D%22M9%208h6M9%2012h6%22%2F%3E%3C%2Fsvg%3E"); }
.omniNav .navIcon.icon-facebook { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%208h3V4h-3a4%204%200%200%200-4%204v3H7v4h3v6h4v-6h3l1-4h-4V8z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%208h3V4h-3a4%204%200%200%200-4%204v3H7v4h3v6h4v-6h3l1-4h-4V8z%22%2F%3E%3C%2Fsvg%3E"); }
.omniNav .navIcon.icon-instagram { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%225%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M17%207h.01%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%225%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M17%207h.01%22%2F%3E%3C%2Fsvg%3E"); }
.omniNav .navIcon.icon-zalo { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2215%22%20rx%3D%224%22%2F%3E%3Cpath%20d%3D%22M8%209h5l-5%206h5M16%209v6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2215%22%20rx%3D%224%22%2F%3E%3Cpath%20d%3D%22M8%209h5l-5%206h5M16%209v6%22%2F%3E%3C%2Fsvg%3E"); }
.omniNav .navIcon.icon-print { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%208V3h10v5M7%2017H4v-7h16v7h-3%22%2F%3E%3Cpath%20d%3D%22M7%2014h10v7H7z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%208V3h10v5M7%2017H4v-7h16v7h-3%22%2F%3E%3Cpath%20d%3D%22M7%2014h10v7H7z%22%2F%3E%3C%2Fsvg%3E"); }
.omniNav .navIcon.icon-settings { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M12%202v3M12%2019v3M4.2%204.2l2.1%202.1M17.7%2017.7l2.1%202.1M2%2012h3M19%2012h3M4.2%2019.8l2.1-2.1M17.7%206.3l2.1-2.1%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M12%202v3M12%2019v3M4.2%204.2l2.1%202.1M17.7%2017.7l2.1%202.1M2%2012h3M19%2012h3M4.2%2019.8l2.1-2.1M17.7%206.3l2.1-2.1%22%2F%3E%3C%2Fsvg%3E"); }
.omniNav .navIcon.icon-sell { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%204h2l2%2011h11l2-8H6%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2219%22%20r%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2219%22%20r%3D%221.5%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%204h2l2%2011h11l2-8H6%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2219%22%20r%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2219%22%20r%3D%221.5%22%2F%3E%3C%2Fsvg%3E"); }
.omniNav .navIcon.icon-logout { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%204h4v16h-4M10%208l-4%204%204%204M6%2012h10%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%204h4v16h-4M10%208l-4%204%204%204M6%2012h10%22%2F%3E%3C%2Fsvg%3E"); }
/* Cấu hình stays at the bottom of the menu like Omni's, over the items scrolling under it. */
.omniNav .navSettings { position: sticky; bottom: -18px; z-index: 1; margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, .12); border-radius: 0; background: #111820; }
.omniNav .navSettings.active { background: #0a6cff; }
@media (max-width: 760px) {
  /* The menu becomes a horizontal strip on phones: no group titles or rules in it, Cấu hình not pinned. */
  .omniNav .navSection, .omniNav .navDivider { display: none; }
  .omniNav .navSettings { position: static; margin-top: 0; border-top: 0; border-radius: 6px; }
  .omniNav .navSell { margin-bottom: 0; }
}

/* Kênh Social → customer column: the phone is a field staff can fill ("Chưa có số điện thoại" → input) */
.socialPhoneField { background: none; border: 0; border-bottom: 1px dashed transparent; padding: 0; margin: 0; min-height: 0; font: inherit; color: inherit; cursor: text; text-align: left; }
.socialPhoneField:hover { border-bottom-color: #9ca3af; }
.socialPhoneField.noPhone { color: #6b7280; }
.socialPhoneField.noPhone::after { content: " ✎"; color: #2563eb; }
.socialPhoneForm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.socialPhoneForm input { width: 140px; min-height: 0; padding: 3px 7px; border: 1px solid #2563eb; border-radius: 6px; font: inherit; }
.socialPhoneForm button { min-height: 0; width: 26px; height: 26px; padding: 0; border-radius: 6px; border: 1px solid #d1d5db; background: #fff; cursor: pointer; line-height: 1; }
.socialPhoneForm button.save { background: #2563eb; border-color: #2563eb; color: #fff; }
.socialPhoneError { flex-basis: 100%; color: #b91c1c; font-size: 12px; }

/* ===== Kênh Social theo Sapo Chat OmniAI: thanh trên tối, thanh lọc dọc bên trái, ba cột ===== */
:root {
  --omni-i-inbox: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 12h-6l-2 3h-4l-2-3H2%22/%3E%3Cpath d=%22M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z%22/%3E%3C/svg%3E");
  --omni-i-chat: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z%22/%3E%3C/svg%3E");
  --omni-i-mail: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2220%22 height=%2216%22 x=%222%22 y=%224%22 rx=%222%22/%3E%3Cpath d=%22m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7%22/%3E%3C/svg%3E");
  --omni-i-bubble: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7.9 20A9 9 0 1 0 4 16.1L2 22Z%22/%3E%3C/svg%3E");
  --omni-i-comment: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z%22/%3E%3Cpath d=%22M8 9h8M8 13h6%22/%3E%3C/svg%3E");
  --omni-i-phone: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z%22/%3E%3C/svg%3E");
  --omni-i-receipt: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z%22/%3E%3Cpath d=%22M16 8H8M16 12H8M13 16H8%22/%3E%3C/svg%3E");
  --omni-i-reply: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolyline points=%229 17 4 12 9 7%22/%3E%3Cpath d=%22M20 18v-2a4 4 0 0 0-4-4H4%22/%3E%3C/svg%3E");
  --omni-i-clock: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpolyline points=%2212 6 12 12 16 14%22/%3E%3C/svg%3E");
  --omni-i-alert: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 8v4M12 16h.01%22/%3E%3C/svg%3E");
  --omni-i-user: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%228%22 r=%225%22/%3E%3Cpath d=%22M20 21a8 8 0 0 0-16 0%22/%3E%3C/svg%3E");
  --omni-i-warn: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z%22/%3E%3Cpath d=%22M12 9v4M12 17h.01%22/%3E%3C/svg%3E");
  --omni-i-funnel: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolygon points=%2222 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3%22/%3E%3C/svg%3E");
  --omni-i-video: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m22 8-6 4 6 4V8Z%22/%3E%3Crect width=%2214%22 height=%2212%22 x=%222%22 y=%226%22 rx=%222%22/%3E%3C/svg%3E");
  --omni-i-chart: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 3v18h18%22/%3E%3Cpath d=%22M18 17V9M13 17V5M8 17v-3%22/%3E%3C/svg%3E");
  --omni-i-gear: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3Cpath d=%22M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z%22/%3E%3C/svg%3E");
  --omni-i-target: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%226%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%222%22/%3E%3C/svg%3E");
  --omni-i-help: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3%22/%3E%3Cpath d=%22M12 17h.01%22/%3E%3C/svg%3E");
  --omni-i-bolt: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M13 2 3 14h9l-1 8 10-12h-9l1-8z%22/%3E%3C/svg%3E");
  --omni-i-refresh: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 12a9 9 0 1 1-3-6.7L21 8%22/%3E%3Cpath d=%22M21 3v5h-5%22/%3E%3C/svg%3E");
}

.shell.socialShell, .shell.socialShell.navCollapsed { grid-template-columns: minmax(0, 1fr); grid-template-rows: 52px minmax(0, 1fr); }
.shell.socialShell > .workspace { min-height: 0; }
.shell.socialShell .socialMain { height: 100%; min-height: 0; }
.omniTop { display: flex; align-items: center; gap: 6px; height: 52px; padding: 0 14px 0 10px; background: #1b2433; color: #cfd6e2; overflow: visible; position: relative; z-index: 30; }
.omniTop button, .omniTop a, .omniTop select { min-height: 0; font: inherit; }
.omniLogo { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #3b475b; background: #283346; color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; flex: none; }
.omniLogo span { font-weight: 800; font-size: 15px; border: 1.6px solid #fff; border-radius: 5px; width: 18px; height: 18px; display: grid; place-items: center; line-height: 1; }
.omniBrand { color: #fff; font-size: 18px; font-weight: 700; margin: 0 14px 0 6px; white-space: nowrap; }
.omniTabs { display: flex; align-items: center; gap: 2px; min-width: 0; }
.omniTab { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: #cfd6e2; cursor: pointer; white-space: nowrap; font-size: 14px; }
.omniTab:hover { background: #283346; color: #fff; }
.omniTab.active { background: #2d3a50; color: #fff; font-weight: 600; }
.omniTab i { width: 17px; height: 17px; background: currentColor; -webkit-mask: var(--omni-i-chat) center/contain no-repeat; mask: var(--omni-i-chat) center/contain no-repeat; }
.omniTab.icon-orders i { -webkit-mask-image: var(--omni-i-receipt); mask-image: var(--omni-i-receipt); }
.omniTab.icon-ai i { -webkit-mask-image: var(--omni-i-target); mask-image: var(--omni-i-target); }
.omniTab.icon-livestream i { -webkit-mask-image: var(--omni-i-video); mask-image: var(--omni-i-video); }
.omniTab.icon-reports i { -webkit-mask-image: var(--omni-i-chart); mask-image: var(--omni-i-chart); }
.omniTab.icon-settings i { -webkit-mask-image: var(--omni-i-gear); mask-image: var(--omni-i-gear); }
.omniAi { font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: #1f7aff; border-radius: 4px; padding: 1px 4px; }
.omniBadge { position: absolute; top: -7px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #f04438; color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; font-style: normal; }
.omniToolsWrap, .omniAccountWrap { position: relative; }
.omniMenu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 190px; background: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, .18); padding: 6px; display: flex; flex-direction: column; z-index: 40; }
.omniMenu.right { left: auto; right: 0; }
.omniMenu button, .omniMenu a { text-align: left; border: 0; background: none; color: #1f2937; padding: 9px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; text-decoration: none; }
.omniMenu button:hover, .omniMenu a:hover, .omniMenu .active { background: #eef4ff; color: #1f6feb; }
.omniMenuWho { display: flex; flex-direction: column; padding: 8px 10px; border-bottom: 1px solid #eef0f3; margin-bottom: 4px; color: #1f2937; }
.omniMenuWho small { color: #6b7280; }
.omniSpacer { flex: 1; }
.omniHelp { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid #3b475b; border-radius: 6px; color: #cfd6e2; text-decoration: none; font-size: 14px; }
.omniHelp i, .omniIconButton::before { width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--omni-i-help) center/contain no-repeat; mask: var(--omni-i-help) center/contain no-repeat; }
.omniIconButton { width: 34px; height: 34px; border: 1px solid #3b475b; border-radius: 6px; background: none; color: #cfd6e2; display: grid; place-items: center; cursor: pointer; padding: 0; }
.omniIconButton::before { content: ""; display: block; }
.omniIconButton.bolt::before { -webkit-mask-image: var(--omni-i-bolt); mask-image: var(--omni-i-bolt); }
.omniIconButton.sync::before { -webkit-mask-image: var(--omni-i-refresh); mask-image: var(--omni-i-refresh); }
.omniIconButton.sync.warn { color: #fbbf24; border-color: #a16207; }
.omniHelp:hover, .omniIconButton:hover { background: #283346; color: #fff; }
.omniPagePick { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 8px; border-radius: 6px; background: #3a4558; color: #fff; max-width: 260px; }
.omniPageAvatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; background: #fff; }
.omniPageAvatar.all { background: #fff; border: 3px solid #cfd6e2; box-sizing: border-box; }
.omniPageSelect { background: transparent; border: 0; color: #fff; font-size: 14px; font-weight: 600; max-width: 210px; cursor: pointer; outline: none; }
.omniPageSelect option, .omniPageSelect optgroup { color: #111827; }
.omniAccount { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #fde7b0; color: #8a5a00; font-weight: 700; cursor: pointer; padding: 0; }
.omniSectionHead { padding: 12px 20px; background: #fff; border-bottom: 1px solid #e5e7eb; }
.omniSectionHead h2 { margin: 0; font-size: 18px; }

/* Thanh lọc dọc */
.socialMain.omni .socialPanes { grid-template-columns: 50px clamp(300px, 26vw, 400px) minmax(0, 1fr) clamp(280px, 24vw, 380px); }
/* Owner 09/10/2026: while an order is created / edited, the right column keeps the width it has beside the chat
   (clamp(280px, 24vw, 380px)), the order lines take the rest. */
.socialMain.omni .socialPanes.withOrder { grid-template-columns: 50px minmax(240px, 300px) minmax(300px, 1fr) minmax(380px, 1.1fr) clamp(280px, 24vw, 380px); }
.omniRail { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; background: #1b2433; min-height: 0; overflow: visible; position: relative; z-index: 20; }
.omniRailItem { position: relative; }
.omniRailButton { position: relative; width: 36px; height: 36px; border: 0; border-radius: 7px; background: none; color: #aeb7c6; display: grid; place-items: center; cursor: pointer; padding: 0; min-height: 0; }
.omniRailButton:hover { background: #2a3547; color: #fff; }
.omniRailButton.on, .omniRailButton.open { background: #33415a; color: #fff; }
.omniRailButton i { width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--omni-i-inbox) center/contain no-repeat; mask: var(--omni-i-inbox) center/contain no-repeat; }
.omniRailButton.icon-read i { -webkit-mask-image: var(--omni-i-mail); mask-image: var(--omni-i-mail); }
.omniRailButton.icon-message i { -webkit-mask-image: var(--omni-i-bubble); mask-image: var(--omni-i-bubble); }
.omniRailButton.icon-comment i { -webkit-mask-image: var(--omni-i-comment); mask-image: var(--omni-i-comment); }
.omniRailButton.icon-phone i { -webkit-mask-image: var(--omni-i-phone); mask-image: var(--omni-i-phone); }
.omniRailButton.icon-order i { -webkit-mask-image: var(--omni-i-receipt); mask-image: var(--omni-i-receipt); }
.omniRailButton.icon-reply i { -webkit-mask-image: var(--omni-i-reply); mask-image: var(--omni-i-reply); }
.omniRailButton.icon-time i { -webkit-mask-image: var(--omni-i-clock); mask-image: var(--omni-i-clock); }
.omniRailButton.icon-errors i { -webkit-mask-image: var(--omni-i-alert); mask-image: var(--omni-i-alert); }
.omniRailButton.icon-staff i { -webkit-mask-image: var(--omni-i-user); mask-image: var(--omni-i-user); }
.omniRailButton.icon-warn i { -webkit-mask-image: var(--omni-i-warn); mask-image: var(--omni-i-warn); }
.omniRailButton.icon-funnel i { -webkit-mask-image: var(--omni-i-funnel); mask-image: var(--omni-i-funnel); }
.omniRailButton .omniBadge { top: -4px; right: -6px; }
.omniRailButton .omniBadge.new { background: #f04438; }
.omniRailSpacer { flex: 1; }
.omniRailPop { position: absolute; left: 44px; top: -4px; width: 280px; background: #fff; color: #1f2937; border-radius: 8px; box-shadow: 0 8px 28px rgba(15, 23, 42, .22); padding: 14px 16px 0; z-index: 50; display: flex; flex-direction: column; gap: 10px; }
.omniRailPop > strong { font-size: 15px; }
.omniRailOptions { display: flex; flex-direction: column; gap: 10px; max-height: 280px; overflow-y: auto; }
.omniRailOptions label { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.omniRailOptions input { width: 17px; height: 17px; margin: 0; }
.omniRailPop footer { display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid #eef0f3; margin: 4px -16px 0; padding: 10px 16px; }
.omniRailPop footer button { min-height: 0; height: 34px; padding: 0 18px; border-radius: 6px; border: 0; cursor: pointer; font: inherit; }
.omniRailPop footer .cancel { background: none; color: #ef4444; }
.omniRailPop footer .apply { background: #1f6feb; color: #fff; }
.omniRailPop footer .apply:disabled { background: #eef0f3; color: #9ca3af; cursor: default; }

/* Danh sách hội thoại (Chat OmniAI) */
.socialList.omniList { background: #fff; border-right: 1px solid #e5e7eb; }
.omniListHead { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #eef0f3; }
.omniSearch { flex: 1; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 6px; background: #f1f3f6; min-width: 0; }
.omniSearch i { width: 18px; height: 18px; flex: none; background: #9aa3b2; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%227%22/%3E%3Cpath d=%22m21 21-4.3-4.3%22/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%227%22/%3E%3Cpath d=%22m21 21-4.3-4.3%22/%3E%3C/svg%3E") center/contain no-repeat; }
.omniSearch input { border: 0; background: transparent; outline: none; font: inherit; font-size: 14px; width: 100%; min-width: 0; padding: 0; min-height: 0; }
.omniTagPick { width: 130px; height: 38px; border: 0; border-radius: 6px; background: #f1f3f6; color: #9aa3b2; padding: 0 10px; font: inherit; font-size: 14px; cursor: pointer; min-height: 0; }
.omniTagPick.on { color: #1f2937; background: #e8f0ff; }
.omniListTools { display: flex; justify-content: flex-end; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid #eef0f3; }
.omniListTool { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: #6b7280; cursor: pointer; font-size: 12px; min-height: 0; }
.omniListTool::before { content: ""; width: 19px; height: 19px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m3 16 4 4 4-4M7 20V4M21 8l-4-4-4 4M17 4v16%22/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m3 16 4 4 4-4M7 20V4M21 8l-4-4-4 4M17 4v16%22/%3E%3C/svg%3E") center/contain no-repeat; }
.omniListTool.pick::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 6 7 17l-5-5M22 10l-7.5 7.5L13 16%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 6 7 17l-5-5M22 10l-7.5 7.5L13 16%22/%3E%3C/svg%3E"); }
.omniListTool:hover, .omniListTool.on { background: #eef4ff; color: #1f6feb; }
.omniListTool:disabled { opacity: .45; cursor: default; }
.omniChips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid #eef0f3; }
.omniChip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 12px; background: #e3efff; color: #1f6feb; font-size: 12.5px; }
.omniChip button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0; font-size: 15px; line-height: 1; min-height: 0; }
.omniFunnel { width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; cursor: pointer; padding: 0; min-height: 0; color: #6b7280; }
.omniFunnel::before { content: ""; display: block; margin: auto; width: 19px; height: 19px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolygon points=%2222 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3%22/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolygon points=%2222 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3%22/%3E%3C/svg%3E") center/contain no-repeat; }
.omniFunnel.on, .omniFunnel:hover { color: #1f6feb; background: #eef4ff; }
.omniList .socialRows { background: #fff; }
.omniList .socialRow { padding: 12px 12px 10px; border: 0; border-bottom: 1px solid #eef0f3; border-left: 3px solid transparent; gap: 12px; background: #fff; }
.omniList .socialRow.unread { background: #eaf3ff; }
.omniList .socialRow.active { background: #e3edfb; border-left-color: #1f6feb; }
.omniList .socialRow:hover:not(.active) { background: #f5f8fc; }
.omniList .socialRowTop strong { font-size: 15px; font-weight: 500; color: #1f2937; }
.omniList .socialRow.unread .socialRowTop strong { font-weight: 600; }
.omniList .socialRowTop time { font-size: 12.5px; color: #6b7280; }
.omniList .socialSnippet { font-size: 13.5px; color: #374151; }
.omniList .socialRow.unread .socialSnippet { color: #111827; font-weight: 500; }
.socialMain.omni .socialList.omniList { display: flex; flex-direction: column; grid-template-rows: none; }
.socialMain.omni .socialList.omniList > * { flex: none; }
.socialMain.omni .socialList.omniList > .socialRows { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.socialMain.omni .omniListHead .omniSearch { flex: 1 1 auto; width: auto; }
.socialMain.omni .omniListHead .omniTagPick { flex: 0 0 130px; width: 130px; }

/* Khung chat (Chat OmniAI) */
.socialMain.omni .socialChat { background: #e9ebef; }
.socialMain.omni .socialChatHead { min-height: 82px; padding: 10px 16px; background: #fff; border-bottom: 1px solid #e5e7eb; gap: 12px; }
.socialMain.omni .socialChatHead .socialChatNameRow strong { font-size: 17px; font-weight: 600; color: #111827; }
.socialMain.omni .socialChatWho > span:not(.socialChatNameRow) { font-size: 12.5px; color: #6b7280; }
.socialMain.omni .socialViewedBy { font-size: 12.5px; color: #6b7280; }
.socialMain.omni .socialHeadActions { gap: 8px; }
.socialMain.omni .socialHeadIcon, .socialMain.omni .socialAssignButton { width: 38px; height: 38px; border-radius: 6px; background: #f1f3f6; border: 0; color: #374151; }
.socialMain.omni .socialHeadIcon:hover, .socialMain.omni .socialAssignButton:hover { background: #e5e9f0; }
.socialMain.omni .socialChatSub { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 10px 16px; font-size: 14px; color: #374151; }
.socialMain.omni .socialChatSub b { color: #1f6feb; font-weight: 500; }
.socialMain.omni .socialMessages { background: #e9ebef; }
.socialMain.omni .socialBubble, .socialMain.omni .socialMessage:not(.mine) .socialBubble { border-radius: 18px; }
/* Nhãn: dải ô màu liền nhau */
.socialMain.omni .socialTagBar { position: relative; gap: 0; padding: 0 44px 0 6px; height: 34px; align-items: center; background: #fff; border-top: 1px solid #e5e7eb; overflow: visible; }
.socialMain.omni .socialTagBar::before { content: ""; position: absolute; left: 50%; top: -16px; width: 60px; height: 16px; margin-left: -30px; border-radius: 8px 8px 0 0; background: #fff;
  -webkit-mask: none; box-shadow: 0 -1px 0 #e5e7eb; }
.socialMain.omni .socialTagBar::after { content: ""; position: absolute; left: 50%; top: -14px; width: 14px; height: 14px; margin-left: -7px; background: #9ca3af; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m17 11-5-5-5 5M17 18l-5-5-5 5%22/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m17 11-5-5-5 5M17 18l-5-5-5 5%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialMain.omni .socialTagList { display: flex; flex: 1; min-width: 0; gap: 2px; overflow: hidden; height: 26px; }
.socialMain.omni .socialTagBar.open { height: auto; padding-top: 4px; padding-bottom: 4px; }
.socialMain.omni .socialTagBar.open .socialTagList { flex-wrap: wrap; height: auto; overflow: visible; row-gap: 2px; }
.socialMain.omni .socialTagToggle { flex: 1 1 0; min-width: 72px; max-width: none; height: 26px; padding: 0 8px; border: 0; border-radius: 0; justify-content: center;
  background: color-mix(in srgb, var(--tag) 62%, #fff); color: #fff; font-size: 13.5px; font-weight: 500; box-shadow: none; }
.socialMain.omni .socialTagToggle i { display: none; }
.socialMain.omni .socialTagToggle:hover:not(:disabled) { background: color-mix(in srgb, var(--tag) 80%, #fff); }
.socialMain.omni .socialTagToggle.active { background: var(--tag); color: #fff; font-weight: 700; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.socialMain.omni .socialTagToggle.active span::before { content: "✓ "; }
.socialMain.omni .socialAllTags { position: absolute; right: 8px; top: 4px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: #1f6feb; cursor: pointer; font-size: 0; min-height: 0; }
.socialMain.omni .socialAllTags::before { content: ""; display: block; width: 24px; height: 24px; margin: auto; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 8v8M8 12h8%22/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 8v8M8 12h8%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialMain.omni .socialAllTags.on::before { transform: rotate(45deg); }
/* Soạn tin */
.socialMain.omni .socialComposer { padding: 10px 14px 12px; gap: 6px; background: #fff; }
.socialMain.omni .socialInputBox { border-radius: 22px; background: #f1f3f6; border: 0; padding: 4px 8px 4px 16px; }
.socialMain.omni .socialInputBox textarea { background: transparent; font-size: 14.5px; }
.socialMain.omni .socialComposerIcon { color: #6b7280; }

/* Cột khách hàng (Chat OmniAI) */
.socialMain.omni .socialCustomer { background: #f3f4f6; padding: 0 0 72px; gap: 8px; }
.socialMain.omni .socialCustomer > .socialCustomerCardBody { background: #fff; }
.socialMain.omni .socialCustomerHead { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: start; padding: 18px 16px 14px; text-align: left; }
.socialMain.omni .socialCustomerHead > :first-child { width: 56px; height: 56px; }
.socialMain.omni .socialCustomerWho { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; text-align: left; }
.socialMain.omni .socialCustomerNameRow { display: flex; align-items: center; gap: 6px; justify-content: flex-start; }
.socialMain.omni .socialCustomerNameRow strong { font-size: 18px; font-weight: 600; color: #111827; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.socialMain.omni .socialCustomerNameRow strong.linked { color: #1f6feb; }
.socialMain.omni .socialCustomerDetailLink { margin-left: auto; font-size: 13px; white-space: nowrap; }
.socialMain.omni .socialCustomerMeta { justify-content: flex-start; font-size: 14px; color: #374151; }
.socialMain.omni .socialCustomerMeta::before { content: ""; width: 16px; height: 16px; flex: none; background: #6b7280; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z%22/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialMain.omni .socialCustomerStats { order: -1; display: flex; gap: 12px; justify-content: flex-start; font-size: 14px; color: #374151; }
.socialMain.omni .socialCustomerCard { background: #fff; padding: 14px 16px; margin: 0; border: 0; border-radius: 0; }
.socialMain.omni .socialCustomerCardHead h3 { font-size: 17px; font-weight: 600; color: #111827; }
.socialMain.omni .socialCreateOrder.floating { position: absolute; left: 12px; right: 12px; bottom: 12px; width: auto; height: 48px; border-radius: 8px; justify-content: center; font-size: 16px; font-weight: 600; background: #1f6feb; }
.shell.socialShell > .workspace { height: auto; min-height: 0; overflow: hidden; }
.socialCustomerMeta .socialPhoneField { width: auto; height: auto; min-height: 0; min-width: 0; padding: 0; border-radius: 0; flex: none; align-self: center; line-height: 1.4; }
.socialCustomerMeta .socialPhoneForm button { flex: none; }
.socialMain.omni .socialCustomerStats { order: 0; }
/* Nhãn như Chat OmniAI: tên đầy đủ, chỉ hiện những ô vừa một dòng (ô không vừa xuống dòng ẩn), ⊕ mở hết */
.socialMain.omni .socialTagBar:not(.open) .socialTagList { flex-wrap: wrap; height: 26px; overflow: hidden; }
.socialMain.omni .socialTagToggle { flex: 1 0 auto; min-width: 0; padding: 0 14px; }
.socialMain.omni .socialTagToggle span { overflow: visible; text-overflow: clip; white-space: nowrap; }
/* Cột khách → Đơn hàng: "Xem thêm N đơn" drops the rest of the orders down, "Thu gọn" folds them back. */
.socialOrdersAll { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin:4px 0 0; padding:6px 0; }
.socialOrdersAll::after { content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); }
.socialOrdersAll.open::after { transform:translateY(2px) rotate(-135deg); }
/* Zalo: a product sent from the Clone is a photo card with Thêm vào đơn hàng beside it, like the Facebook card. */
.socialPhotoCardWrap { position:relative; max-width:280px; }
.socialPhotoCardText a { color:#0068ff; word-break:break-all; }
/* The product button sits beside the caption, below the ↩ ☺ hover tools (which stay at mid-height). */
.socialPhotoCardWrap > button.socialProductAdd { top:auto; bottom:14px; transform:none; }

/* Đơn hàng → "Đã liên hệ qua": chips of the customer's Facebook / Zalo chats; "trùng SĐT" marks a phone-only match */
.orderContactChannels { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; vertical-align: middle; }
.orderContactChip { display: inline-flex; padding: 2px; border: 1px solid transparent; border-radius: 8px; text-decoration: none; line-height: 1; }
.orderContactChip .socialChannelIcon { width: 20px; height: 20px; }
.orderContactChip.samePhone { border: 1px dashed #b45309; }
.orderContactChip:hover { filter: brightness(.92); }
.orderAddressHeading { display: flex; align-items: center; gap: 16px; }
.orderAddressHeading .linkButton { min-height: 0; padding: 0; }

/* Đơn hàng (danh sách): nhãn kênh khách đã liên hệ cạnh tên khách — đặc = đã liên kết khách, viền đứt = chỉ trùng SĐT */
.orderChatLink, .orderChatLink.zalo, .orderChatLink.zalo_oa { display: inline-flex; align-items: center; gap: 4px; width: auto; height: auto; margin-left: 6px; padding: 1px 8px 1px 6px; vertical-align: 0;
  -webkit-mask: none; mask: none; border: 1px solid #b6d4fe; border-radius: 10px; background: #eef5ff; color: #1d4ed8; font-size: 12px; line-height: 1.5; text-decoration: none; white-space: nowrap; }
.orderChatLink::before { content: ""; width: 13px; height: 13px; flex: none; background: currentColor; -webkit-mask: var(--omni-i-chat) center/contain no-repeat; mask: var(--omni-i-chat) center/contain no-repeat; }
.orderChatLink.zalo, .orderChatLink.zalo_oa { border-color: #a5d8ff; background: #e7f5ff; color: #0b6bcb; }
.orderChatLink.samePhone, .orderChatLink.zalo.samePhone, .orderChatLink.zalo_oa.samePhone { border-style: dashed; background: #fff; color: #92400e; border-color: #f0c36d; }
.orderChatLink:hover, .orderChatLink.zalo:hover, .orderChatLink.zalo_oa:hover { background: #dbeafe; }
.orderChatLink.samePhone:hover { background: #fef3c7; }

/* Kênh Social → cột khách: địa chỉ của hội thoại bấm được để thêm / đổi */
.socialMain button.socialChatAddress { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; min-height: 0; width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 6px; }
.socialMain button.socialChatAddress:hover:not(:disabled) { background: #f1f5fb; }
.socialMain button.socialChatAddress.card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 8px; margin: 0 -8px; width: calc(100% + 16px); font-size: 13.5px; line-height: 1.4; }
.socialMain button.socialChatAddress.card b { font-weight: 600; color: #111827; }
.socialMain button.socialChatAddress.card span { color: #4b5563; }

/* Kênh Social → cột khách: tên khách là ô sửa trực tiếp (bấm vào tên), như ô số điện thoại */
.socialMain button.socialNameField { background: none; border: 0; border-bottom: 1px dashed transparent; box-shadow: none; padding: 0; margin: 0; min-height: 0; min-width: 0; font: inherit; color: inherit; text-align: left; cursor: text; border-radius: 0; overflow: hidden; }
.socialMain button.socialNameField:hover { border-bottom-color: #9ca3af; }
.socialMain button.socialNameField strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.socialMain.omni .socialCustomerNameRow .socialNameField.linked strong { color: #1f6feb; }
.socialMain .socialNameForm { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }
.socialMain .socialNameForm input { flex: 1 1 auto; width: auto; min-width: 0; font-size: 16px; font-weight: 600; }
.socialMain .socialNameForm .socialPhoneError { flex-basis: auto; }

/* Kênh Social: cảnh báo ngoài 24 giờ của Facebook, phía trên ô soạn tin */
.socialWindowWarn { margin: 0; padding: 7px 14px; background: #fff7e6; border-top: 1px solid #f5d48f; color: #7a4b00; font-size: 13px; line-height: 1.4; }
.socialWindowWarn b { color: #92400e; }

/* Kênh Social → chi tiết đơn: mỗi phiếu giao một dòng màu (mã vận đơn, hãng, trạng thái), và dòng Chờ thanh toán COD */
.socialShipRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; margin-top: 6px; border-radius: 6px;
  background: color-mix(in srgb, var(--status, #f2c94c) 14%, #fff); font-size: 13.5px; }
.socialShipCode { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #374151; }
.socialShipCode a { color: #1f6feb; font-weight: 600; text-decoration: none; }
.socialShipRow em { flex: none; font-style: normal; color: var(--status, #e49c06); white-space: nowrap; }
.socialShipRow em::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--status, #f2c94c); }
.socialShipRow.cancelled em { color: #ee4747; }
.socialOrderCod { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 8px 12px; border-left: 4px solid #f2c94c; border-radius: 6px; background: #fdf6e3; font-size: 14px; }
.socialOrderView .socialOrderViewBody { grid-template-columns: minmax(0, 1fr); }
.socialShipRow { min-width: 0; }
.socialShipRow .socialShipCode { flex: 1 1 0; }
.socialMain.omni .socialOrderViewFoot .socialOrderMoreBtn, .socialMain.omni .socialOrderViewFoot .socialOrderMainBtn { min-height: 40px; font-size: 14.5px; font-weight: 600; }
/* A draft has three buttons (Duyệt đơn, Thao tác khác, Giao hàng), like Sapo: one line each in the narrow column. */
.socialMain.omni .socialOrderViewFoot .socialOrderMoreActions:has(> button:nth-of-type(3)) > button { padding: 0 6px; font-size: 13.5px; white-space: nowrap; }

/* Kênh Social → chi tiết đơn: chọn lại địa chỉ sẵn có của khách khi bấm Thay đổi */
.socialMain button.socialOrderAddressOption { border: 1px solid #e5e7eb; margin: 6px 0 0; width: 100%; }
.socialMain button.socialOrderAddressOption:hover:not(:disabled) { border-color: #1f6feb; background: #f1f6ff; }
.socialOrderAddressPickActions { display: flex; justify-content: space-between; margin-top: 8px; }
/* Sửa on each of the customer's addresses, at the card's top right (the card itself picks the address). */
.socialOrderAddressOptionRow { position: relative; }
.socialMain .socialOrderAddressOptionRow button.socialOrderAddressOption { padding-right: 48px; }
.socialOrderAddressOptionRow .socialOrderAddressEdit { position: absolute; top: 14px; right: 12px; }

/* Kênh Social chat: room under the newest message (the tag strip's handle sits over the end of the log), and a reply
   shown from the composer while it is being sent. */
.socialMessages { padding-bottom:44px; }
.socialMessage.sending .socialBubble, .socialMessage.sending .socialImage, .socialMessage.sending .socialProduct, .socialMessage.sending .socialFile { opacity:.6; }
.socialMessage.sending .socialProductAdd { display:none; }

/* Kênh Social composer: one line high, growing with the text; ❤ in place of 👍; the tags the chat does not carry are
   pale in the strip. */
.socialMain.omni .socialComposer { padding:6px 14px 8px; }
.socialMain.omni .socialInputBox { padding:2px 8px 2px 14px; }
.socialMain.omni .socialInputBox textarea { padding:7px 6px; min-height:34px; max-height:132px; line-height:1.4; field-sizing:content; }
.socialMain.omni .socialInputBox textarea::placeholder { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.socialLike { -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M20.8%205.6a5.3%205.3%200%200%200-7.6%200L12%206.8l-1.2-1.2a5.3%205.3%200%201%200-7.6%207.6L12%2022l8.8-8.8a5.3%205.3%200%200%200%200-7.6z%22/%3E%3C/svg%3E") center/24px no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M20.8%205.6a5.3%205.3%200%200%200-7.6%200L12%206.8l-1.2-1.2a5.3%205.3%200%201%200-7.6%207.6L12%2022l8.8-8.8a5.3%205.3%200%200%200%200-7.6z%22/%3E%3C/svg%3E") center/24px no-repeat; }
.socialMain.omni .socialTagToggle { background:color-mix(in srgb, var(--tag) 38%, #fff); }
.socialMain.omni .socialTagToggle:hover:not(:disabled) { background:color-mix(in srgb, var(--tag) 60%, #fff); }
.socialMain.omni .socialTagToggle.active, .socialMain.omni .socialTagToggle.active:hover:not(:disabled) { background:var(--tag); }

/* Kênh Social, the customer's orders: the website (Woo) order number under the Sapo code. */
.socialOrderWoo { margin-top:-4px; color:var(--muted); font-size:12px; }

/* Kênh Social, chi tiết đơn: the customer's name is a link to the POS customer page. */
.socialOrderViewName { color:#0088ff; font-weight:700; text-decoration:none; justify-self:start; }
.socialOrderViewName:hover { text-decoration:underline; }

/* Kênh Social chat, product cards: each card's buttons under it; Xem chi tiết opens the POS product box. */
.socialProduct .socialCardButtons { min-width:0; border:0; border-top:1px solid var(--line); border-radius:0 0 12px 12px; }
.socialButtons > button { border:0; border-top:1px solid var(--line); background:none; min-height:0; padding:8px 12px; font:inherit; color:var(--blue); cursor:pointer; }
.socialButtons > button:first-child { border-top:0; }
.socialButtons > button:hover, .socialButtons > a:hover { background:#f5f9ff; }
/* Kênh Social chat, a wowmart.vn link from the customer as the POS product's card: picture, name, SKU, price, stock. */
.socialProduct.socialWebProduct { width:min(380px, 100%); }
.socialWebProductMain { display:grid; grid-template-columns:64px minmax(0,1fr); gap:10px; align-items:center; padding:8px 10px; }
.socialWebProductImage { display:block; width:64px; height:64px; border-radius:8px; overflow:hidden; background:#f2f4f7; }
.socialProduct .socialWebProductImage img { width:64px; height:64px; max-height:none; object-fit:contain; border-radius:0; background:#fff; }
.socialWebProductInfo { display:grid; gap:2px; min-width:0; font-size:13px; line-height:1.35; }
.socialWebProductInfo > b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; color:#1f2937; }
.socialProduct .socialWebProductInfo small { display:flex; gap:6px; align-items:center; padding:0; font-size:12px; }
.socialWebProductLine { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 4px; }
.socialWebProductLine .onSalePrice { flex-direction:row; align-items:baseline; gap:6px; }
.socialProductView { width:min(560px, 100%); }
.socialProductViewTop { display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; align-items:start; }
.socialProductViewTop > img, .socialProductViewNoImage { width:150px; height:150px; object-fit:contain; border:1px solid var(--line); border-radius:8px; background:#fff; }
.socialProductViewTop > div { display:grid; gap:4px; }
.socialProductViewTop h3 { margin:0; font-size:15px; line-height:1.35; }
.socialProductViewPrice { color:#0088ff; font-size:18px; }
.socialProductViewLine { display:flex; gap:8px; font-size:13px; }
.socialProductViewLine span { flex:none; width:104px; color:var(--muted); }
.socialProductViewLine b { font-weight:500; overflow-wrap:anywhere; }
.socialProductViewStock { width:100%; border-collapse:collapse; font-size:13px; }
.socialProductViewStock th, .socialProductViewStock td { padding:6px 8px; border-bottom:1px solid var(--line); text-align:right; }
.socialProductViewStock th:first-child, .socialProductViewStock td:first-child { text-align:left; }
.socialProductViewStock th { color:var(--muted); font-weight:500; background:#f9fafb; }

/* Kênh Social: Giỏ hàng của khách (the POS's own cart page) as staff see it. */
.socialCartView { width:min(640px, 100%); }
.socialCartLink { display:flex; gap:8px; }
.socialCartLink input { flex:1; min-width:0; border:1px solid var(--line); border-radius:6px; padding:7px 9px; font:inherit; font-size:13px; color:#475467; background:#f9fafb; }
.socialCartLines td:first-child b { display:block; font-weight:500; }
.socialCartLines tr.off td { color:#98a2b3; }
.socialCartLines tfoot td { font-weight:600; border-bottom:0; }
.socialCartRemove { border:0; background:none; min-height:0; padding:0 4px; color:#98a2b3; font-size:18px; cursor:pointer; }
.socialCartContact { display:grid; gap:2px; padding:10px 12px; border-radius:6px; background:#f5f9ff; font-size:13px; }
.socialCartEmpty { display:grid; gap:10px; justify-items:start; }
.socialPlusItem.cart { --glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%229%22%20cy=%2220%22%20r=%221.5%22/%3E%3Ccircle%20cx=%2218%22%20cy=%2220%22%20r=%221.5%22/%3E%3Cpath%20d=%22M2%203h3l2.7%2012.4a1%201%200%200%200%201%20.8h9.7a1%201%200%200%200%201-.8L21%207H6%22/%3E%3C/svg%3E"); }
.socialCartLines { table-layout:fixed; }
.socialCartLines th:first-child { width:48%; }
.socialCartLines th:last-child { width:28px; }
.socialCartLines td:first-child { white-space:normal; overflow-wrap:anywhere; }

/* Hội thoại list rows, like Chat Omni: page picture › customer, time (⋮ on the row in hand), the snippet, and plain
   icons at the bottom right (phone, order, message / comment). */
.omniList .socialRow { position:relative; padding:14px 12px 10px 14px; gap:12px; }
.omniList .socialRowAvatar .socialAvatar { width:46px; height:46px; }
.omniList .socialRowBody { gap:5px; }
.omniList .socialRowTop { align-items:center; justify-content:flex-start; gap:6px; min-height:22px; }
.omniList .socialRowTop strong { flex:1; min-width:0; font-size:15px; font-weight:500; color:#1f2937; }
.socialRowPage { flex:none; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; overflow:hidden; background:#e4e7ec; }
.socialRowPage img { width:100%; height:100%; object-fit:cover; }
.socialRowPage b { display:none; font-size:10px; font-weight:600; color:#475467; }
.socialRowPage.noPhoto b { display:block; }
.socialRowArrow { flex:none; width:11px; height:11px; background:#98a2b3; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M9%205l7%207-7%207%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M9%205l7%207-7%207%22/%3E%3C/svg%3E") center/contain no-repeat; }
.omniList .socialRowMid .socialSnippet { color:#8a919c; font-size:13.5px; }
.omniList .socialRowMid .socialSnippet:has(.socialReplied) { color:#1f2937; }
.omniList .socialReplied { background:#98a2b3; }
.omniList .socialRow.unread .socialSnippet { color:#111827; font-weight:600; }
.socialRowFoot { display:flex; justify-content:flex-end; min-height:16px; }
.omniList .socialRowIcons { gap:8px; align-items:center; }
.omniList .socialRowIcons i { position:static; width:16px; height:16px; border-radius:0; }
.omniList .socialRowIcons .socialHasPhone { background:#34c38f; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M6.6%2010.8a15.1%2015.1%200%200%200%206.6%206.6l2.2-2.2a1%201%200%200%201%201-.25c1.1.37%202.3.57%203.6.57a1%201%200%200%201%201%201V20a1%201%200%200%201-1%201A17%2017%200%200%201%203%204a1%201%200%200%201%201-1h3.5a1%201%200%200%201%201%201c0%201.25.2%202.45.57%203.57a1%201%200%200%201-.25%201z%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M6.6%2010.8a15.1%2015.1%200%200%200%206.6%206.6l2.2-2.2a1%201%200%200%201%201-.25c1.1.37%202.3.57%203.6.57a1%201%200%200%201%201%201V20a1%201%200%200%201-1%201A17%2017%200%200%201%203%204a1%201%200%200%201%201-1h3.5a1%201%200%200%201%201%201c0%201.25.2%202.45.57%203.57a1%201%200%200%201-.25%201z%22/%3E%3C/svg%3E") center/contain no-repeat; }
.omniList .socialRowIcons .socialHasOrder { background:#e9a23b; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M7%2018a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm10%200a2%202%200%201%200%200%204%202%202%200%200%200%200-4zM1%202v2h2l3.6%207.6-1.35%202.45A2%202%200%200%200%207%2017h12v-2H7.4a.25.25%200%200%201-.22-.37L8.1%2013h7.45a2%202%200%200%200%201.75-1.03l3.58-6.5A1%201%200%200%200%2020%204H5.2l-.94-2z%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M7%2018a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm10%200a2%202%200%201%200%200%204%202%202%200%200%200%200-4zM1%202v2h2l3.6%207.6-1.35%202.45A2%202%200%200%200%207%2017h12v-2H7.4a.25.25%200%200%201-.22-.37L8.1%2013h7.45a2%202%200%200%200%201.75-1.03l3.58-6.5A1%201%200%200%200%2020%204H5.2l-.94-2z%22/%3E%3C/svg%3E") center/contain no-repeat; }
.omniList .socialRowIcons .socialHasPhone::after, .omniList .socialRowIcons .socialHasOrder::after { content:none; }
.omniList .socialRowIcons .socialIsMessage { background:#a0a7b1; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M12%203C6.5%203%202%206.8%202%2011.5c0%202.4%201.2%204.6%203.1%206.1L4.4%2021l3.9-1.7c1.2.4%202.4.6%203.7.6%205.5%200%2010-3.8%2010-8.4S17.5%203%2012%203z%22/%3E%3Ccircle%20cx=%228%22%20cy=%2211.5%22%20r=%221.2%22%20fill=%22white%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2211.5%22%20r=%221.2%22%20fill=%22white%22/%3E%3Ccircle%20cx=%2216%22%20cy=%2211.5%22%20r=%221.2%22%20fill=%22white%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M12%203C6.5%203%202%206.8%202%2011.5c0%202.4%201.2%204.6%203.1%206.1L4.4%2021l3.9-1.7c1.2.4%202.4.6%203.7.6%205.5%200%2010-3.8%2010-8.4S17.5%203%2012%203z%22/%3E%3Ccircle%20cx=%228%22%20cy=%2211.5%22%20r=%221.2%22%20fill=%22white%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2211.5%22%20r=%221.2%22%20fill=%22white%22/%3E%3Ccircle%20cx=%2216%22%20cy=%2211.5%22%20r=%221.2%22%20fill=%22white%22/%3E%3C/svg%3E") center/contain no-repeat; }
.omniList .socialRowIcons .socialIsComment { background:#a0a7b1; }
.omniList .socialRow.active { background:#eceef1; border-left-color:#1f6feb; }
.omniList .socialRow.unread.active { background:#e3edfb; }
.socialRowMenuWrap { position:relative; flex:none; display:none; }
.omniList .socialRow:hover .socialRowMenuWrap, .omniList .socialRow.active .socialRowMenuWrap, .omniList .socialRow.menuOpen .socialRowMenuWrap { display:inline-flex; }
.omniList .socialRow:hover:not(.picking) .socialRowTop time, .omniList .socialRow.active:not(.picking) .socialRowTop time, .omniList .socialRow.menuOpen .socialRowTop time { display:none; }
.socialRowMenuButton { display:inline-block; width:26px; height:26px; margin:-4px 0; border:1px solid #e4e7ec; border-radius:6px; background:#fff; box-shadow:0 1px 2px rgb(16 24 40 / 6%); cursor:pointer; position:relative; }
.socialRowMenuButton::after { content:""; position:absolute; inset:5px; background:#98a2b3; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Ccircle%20cx=%2212%22%20cy=%225%22%20r=%222%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%222%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2219%22%20r=%222%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Ccircle%20cx=%2212%22%20cy=%225%22%20r=%222%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%222%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2219%22%20r=%222%22/%3E%3C/svg%3E") center/contain no-repeat; }
.socialRowMenuButton:hover::after { background:#475467; }
/* ⋮ → Tắt thông báo (admin): a grey bell-off beside the time; the row is never shown unread. */
.socialMutedIcon { flex:none; width:14px; height:14px; background:#98a2b3; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.7 3A6 6 0 0 1 18 8a21.3 21.3 0 0 0 .6 5'/%3E%3Cpath d='M17 17H3s3-2 3-9a4.67 4.67 0 0 1 .3-1.7'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.7 3A6 6 0 0 1 18 8a21.3 21.3 0 0 0 .6 5'/%3E%3Cpath d='M17 17H3s3-2 3-9a4.67 4.67 0 0 1 .3-1.7'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E") center/contain no-repeat; }
/* ⋮ → Kết thúc: a grey check in the row's icons, and an internal line in the chat (staff only). */
.omniList .socialRowIcons .socialEndedIcon, .socialEvent i, .socialEndHint i { background:#98a2b3; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E") center/contain no-repeat; }
.socialEvent { align-self:center; display:flex; align-items:center; gap:6px; margin:6px 0; padding:3px 12px; border:1px dashed #d0d5dd; border-radius:12px; color:#667085; font-size:12.5px; }
.socialEvent i { flex:none; width:14px; height:14px; }
.socialEvent.reopened i { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E"); }
.socialEvent.hidden i { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.7 5.1A10.4 10.4 0 0 1 12 5c7 0 10 7 10 7a13 13 0 0 1-1.7 2.7'/%3E%3Cpath d='M6.6 6.6A13.5 13.5 0 0 0 2 12s3 7 10 7a9.7 9.7 0 0 0 5.4-1.6'/%3E%3Cpath d='M9.9 9.9a3 3 0 1 0 4.2 4.2'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.7 5.1A10.4 10.4 0 0 1 12 5c7 0 10 7 10 7a13 13 0 0 1-1.7 2.7'/%3E%3Cpath d='M6.6 6.6A13.5 13.5 0 0 0 2 12s3 7 10 7a9.7 9.7 0 0 0 5.4-1.6'/%3E%3Cpath d='M9.9 9.9a3 3 0 1 0 4.2 4.2'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E"); }
.socialEvent.unhidden i { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.socialEvent.sourcing i { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
/* Báo phí ship: the customer's pick on shop.wowmart.vn/g/<code> ("Khách chọn Ship hoả tốc: 59,000đ …"), green so it is seen. */
/* Báo phí ship: the way the customer picked (Hoả tốc / Nhanh) beside Phí vận chuyển in the order view. */
.socialFeeBadge { display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; background:#fff1e6; color:#c2410c; border:1px solid #fdba74; font-size:12px; font-weight:600; line-height:18px; vertical-align:1px; }
/* Báo phí ship (Messenger): the buttons as the customer sees them under the text. */
.socialFeeButtons { display:grid; gap:6px; max-width:280px; }
.socialFeeButtons span { padding:8px 12px; border-radius:10px; background:#f0f2f5; color:#050505; font-weight:600; text-align:center; }
.socialEvent.shipping_choice { border-style:solid; border-color:#9fd8b0; background:#f1faf3; color:#1e6b35; font-weight:600; }
.socialEvent.shipping_choice i { background:#1e6b35; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3z'/%3E%3Cpath d='M14 9h4l3 3v4h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.6'/%3E%3Ccircle cx='17' cy='17.5' r='1.6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3z'/%3E%3Cpath d='M14 9h4l3 3v4h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.6'/%3E%3Ccircle cx='17' cy='17.5' r='1.6'/%3E%3C/svg%3E") center/contain no-repeat; }
.socialRowMenu { position:absolute; right:0; top:28px; z-index:5; display:grid; min-width:190px; padding:4px; border:1px solid #e4e7ec; border-radius:8px; background:#fff; box-shadow:0 8px 24px rgb(16 24 40 / 14%); }
.socialRowMenu [role=menuitem] { padding:8px 10px; border-radius:6px; font-size:13.5px; font-weight:400; color:#1f2937; white-space:nowrap; cursor:pointer; }
.socialRowMenu [role=menuitem]:hover { background:#f2f4f7; }
.socialRowFoot { justify-content:space-between; align-items:center; gap:8px; }
.socialRowFoot .socialRowTags { min-width:0; overflow:hidden; }
/* The account's picture before › a little larger and on white; the avatar's box hugs the picture so the channel badge
   stays on its corner whatever the row's height. */
.socialRowPage { width:20px; height:20px; background:#fff; box-shadow:0 0 0 1px #e4e7ec; }
.socialRowPage.noPhoto { background:#e4e7ec; }
.omniList .socialRowAvatar { align-self:flex-start; display:inline-flex; }

/* Phone width (05/10/2026): the settings header kept only the avatar (the three static links squeezed the title onto four
   lines), and Cấu hình pages with tables lost 66 px each side to three nested paddings, leaving 258 px of a 390 px
   screen; their tables (global fixed layout + ellipsis) cut every cell to "S…". Less padding, and tables keep a
   desktop-like width and scroll sideways inside their .tableWrap. */
@media (max-width: 600px) {
  .settingsTopbarRight > span:not(.avatar), .settingsTopbarRight > strong { display: none; }
  .settingsDetailHeader h1 { font-size: 22px; }
  .posTableSettingsPage.settingsDetailPage { padding: 0 10px 32px; }
  .posTableSettingsPage .settingsDetailHeader { margin: 0 -10px 16px; padding: 0 12px; }
  .posTableSettingsPage .settingsDetailSheet { padding: 8px; }
  .posTableSettingsPage .settingsDetailPanel.omniPanel { padding: 12px; }
  .posTableSettingsPage .omniPanel .tableWrap > table:not(.priceRuleTable) { min-width: 900px; }
}

/* Kênh SMS (social-channels.js, social-inbox.js): the shop's Android phones. */
.socialChannelIcon.sms { background:#16a34a; font-size:7px; }
.socialChannelIcon.large.sms { font-size:12px; }
.socialSmsPair { width:min(640px, 100%); }
.socialSmsPairBody { display:grid; gap:14px; padding:4px 2px; }
.socialSmsPairCode { display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px; border:1px dashed #cbd5e1; border-radius:8px; background:#f8fafc; }
.socialSmsPairCode b { font:700 34px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:4px; color:#0f172a; }
.socialSmsPairCode small { color:#64748b; }
.socialSmsPairSteps { margin:0; padding-left:20px; display:grid; gap:6px; line-height:1.45; }
.socialSmsPairSteps a { word-break:break-all; color:var(--blue); text-decoration:none; }
.socialSmsBar { display:flex; align-items:center; gap:12px; padding:4px 10px; font-size:12px; color:#475569; }
.socialSmsBar label { display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.socialSmsBar input { margin:0; }
.socialSmsCount { margin-left:auto; color:#64748b; }
.socialSmsCount.warn { color:#b45309; }
.socialSmsState { display:block; margin-top:2px; font-size:11px; color:#64748b; text-align:right; }
.socialSmsState.delivered, .socialSmsState.sent { color:#15803d; }
.socialSmsState.failed, .socialSmsState.cancelled { color:#b91c1c; }
.omniListTool.sms::before { display:none; }
.omniListTool.sms { color:#15803d; font-weight:600; }
.socialSmsNew { width:min(460px, 100%); display:grid; gap:10px; }
.socialSmsNew label { display:grid; gap:4px; font-size:13px; color:#334155; }
.socialSmsNew input, .socialSmsNew select, .socialSmsNew textarea { font:inherit; padding:7px 9px; border:1px solid #cbd5e1; border-radius:6px; }
.socialSmsNew .socialSmsBar { padding:0; }
.socialSmsNew .socialModalFoot { display:flex; justify-content:flex-end; gap:8px; }
.socialEvent.zaloFriendEvent i { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6M22 11h-6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6M22 11h-6'/%3E%3C/svg%3E"); }
/* POS Chat → Zalo cá nhân (zalo-friends-ui.js): Kết bạn beside "Tin nhắn trên", the request / Kết bạn bar under the header, ✉ Zalo mới. */
.zaloFriend, .zaloFriendAdd { margin-left:10px; font-size:12.5px; vertical-align:middle; }
.zaloFriend { display:inline-flex; align-items:center; gap:4px; padding:1px 8px; border-radius:10px; background:#f2f4f7; color:#475467; }
.zaloFriend.friend { background:#ecfdf3; color:#067647; }
.zaloFriend.asked { background:#fff6ed; color:#c4320a; }
.zaloFriend.error { background:#fef3f2; color:#b42318; }
.zaloFriend button { min-height:0; border:0; padding:0 4px; background:none; color:#0068ff; font:inherit; cursor:pointer; }
.zaloFriendAdd { min-height:0; border:1px solid #0068ff; border-radius:12px; padding:1px 10px; background:#fff; color:#0068ff; font:inherit; font-size:12.5px; font-weight:500; cursor:pointer; }
.zaloFriendAdd.on, .zaloFriendAdd:hover { background:#e8f1ff; }
.zaloFriendAdd:disabled { opacity:.55; cursor:default; }
.zaloFriendBar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 14px; background:#f5f9ff; border-bottom:1px solid var(--line); font-size:13px; color:#344054; }
.zaloFriendBar.asked { background:#fff6ed; }
.zaloFriendBar label { display:flex; align-items:center; gap:8px; flex:1 1 280px; min-width:0; }
.zaloFriendBar label span { flex:none; }
.zaloFriendBar input { flex:1; min-width:0; border:1px solid #d0d5dd; border-radius:6px; padding:5px 8px; font:inherit; font-size:13px; }
.zaloFriendBar button { min-height:0; border:1px solid #d0d5dd; border-radius:6px; padding:4px 12px; background:#fff; color:#344054; font:inherit; font-size:13px; cursor:pointer; }
.zaloFriendBar button.primary { border-color:#0068ff; background:#0068ff; color:#fff; }
.zaloFriendBar button:disabled { opacity:.55; cursor:default; }
.zaloFriendAsk { flex:1 1 240px; min-width:0; }
.zaloFriendAsk q { display:block; color:#667085; font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zaloFriendError { flex-basis:100%; color:#b42318; font-size:12.5px; }
.omniListTool.zalo::before { display:none; }
.omniListTool.zalo { color:#0068ff; font-weight:600; }
.zaloNewPhone { display:flex; gap:8px; }
.zaloNewPhone input { flex:1; min-width:0; }
.zaloNewPhone button { border:1px solid #cbd5e1; border-radius:6px; padding:0 14px; background:#fff; font:inherit; cursor:pointer; }
.zaloNewFound { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid #d1e3ff; border-radius:8px; background:#f5f9ff; }
.zaloNewFound > span { display:grid; gap:2px; }
.zaloNewFound small { color:#667085; }
.socialSmsNew label.zaloNewFriend { display:flex; align-items:flex-start; gap:8px; }
.socialSmsNew label.zaloNewFriend input { flex:none; width:16px; height:16px; min-height:0; margin:2px 0 0; padding:0; }
.socialSmsNew label.zaloNewFriend span { flex:1; min-width:0; }

/* Product list: each SKU's state on the sales channels (web, Merchant Center, Google Ads); reasons on hover. */
.inventoryTable.channelStatusTable { table-layout: fixed; width: 100%; min-width: 0; } /* not the 1780px of Tồn kho */
.channelStatusTable td, .channelStatusTable th { white-space: normal; overflow-wrap: anywhere; }
.channelStatusTable td:first-child { text-overflow: clip; overflow: visible; }
.channelStatusTable .productNameLink { white-space: normal; text-align: left; }
.channelStatusTable .channelState { font-weight: 600; }
.channelStatusTable .channelState.ok { color: #1f7a3a; }
.channelStatusTable .channelState.warn { color: #9a6700; }
.channelStatusTable .channelState.bad { color: #c62828; }
.channelStatusTable .channelIssues { font-size: 12px; color: #56616f; max-width: 320px; white-space: normal; }
.channelStatusTable .channelStateLine { display: flex; align-items: center; gap: 8px; }
.channelStatusTable .competitorButtons { display: flex; flex-wrap: wrap; gap: 4px; }
.channelStatusTable .competitorButton { display: inline-block; padding: 2px 8px; border: 1px solid #c9d2dc; border-radius: 4px; font-size: 12px; line-height: 18px; color: #0b6bcb; background: #fff; white-space: nowrap; text-decoration: none; }
.channelStatusTable .competitorButton:hover { background: #eef5fc; }
.channelStatusTable .competitorButton.out { color: #8a94a0; background: #f4f5f7; }
.channelStatusTable .channelIssues.hint.ok { color: #1f7a3a; }
.channelStatusTable .channelIssues.hint.warn { color: #9a6700; }
.channelStatusTable .channelIssues.error { color: #c62828; }
.channelStatusTable .channelIssues.contentWarning { color: #b45309; cursor: help; }
.customerCallTable td, .customerCallTable th { padding:5px 8px; }
.customerCallTable tr.missed td { color:#b91c1c; }
.customerCallTable a { text-decoration:none; color:inherit; }

/* Sổ quỹ → Giao dịch ngân hàng */
.ordersTable.bankTransactionsTable { table-layout: fixed; width: 100%; min-width: 960px; }
.bankTransactionsTable td { vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
.bankTransactionsTable .bankNote { overflow-wrap: anywhere; }
.bankTransactionsTable .channelState.ok { color: #1f7a3a; }
.bankTransactionsTable .channelState.warn { color: #9a6700; }
.bankTransactionsTable .bankMatch + .bankMatch { margin-top: 4px; }
.bankWhatsapp { background: #fff; border-radius: 3px; box-shadow: var(--sapo-shadow); padding: 12px 16px; margin: 0 0 12px; }
.bankWhatsapp p { margin: 6px 0; }
.bankWhatsappHead { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bankWhatsappRow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.bankWhatsappRow select { min-width: 260px; max-width: 100%; }
.bankWhatsappRow input[type=tel] { width: 230px; }
.bankWhatsapp .channelState.ok { color: #1f7a3a; }
.bankWhatsapp .channelState.warn { color: #9a6700; }
.bankWhatsappQr { display: block; width: 240px; height: 240px; image-rendering: pixelated; border: 1px solid var(--sapo-divider); }
.bankWhatsappCode { font: 600 28px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 4px; }

/* Sản phẩm → Sửa mô tả web */
.descriptionRewritesMain .rewriteCard { border: 1px solid #e3e8ee; border-radius: 6px; padding: 12px 14px; margin: 10px 0; background: #fff; }
.descriptionRewritesMain .rewriteHead { margin-bottom: 8px; }
.descriptionRewritesMain .rewriteTable { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.descriptionRewritesMain .rewriteTable { table-layout: fixed; }
.descriptionRewritesMain .rewriteTable td { vertical-align: top; padding: 4px 6px; border-top: 1px solid #f0f2f5; width: 50%; font-size: 13px;
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; max-width: none; }
.descriptionRewritesMain .rewriteOld { color: #b42318; text-decoration: line-through; }
.descriptionRewritesMain .rewriteNew { color: #1f7a3a; }
.descriptionRewritesMain .rewriteTable textarea { width: 100%; font: inherit; font-size: 13px; color: #1f7a3a; }

/* Product page "Xem mô tả" */
.webDescriptionModal .webDescriptionItem { padding: 8px 16px 12px; border-top: 1px solid #eef1f4; }
.webDescriptionModal .webDescriptionItem .toolbarActions { gap: 14px; margin: 4px 0 8px; }
.webDescriptionModal .webDescriptionText { white-space: pre-line; font-size: 14px; line-height: 1.55; max-height: 55vh; overflow: auto; }

/* Kênh Social, left rail: each icon names itself at once on hover (a tooltip to the right), not after the browser's
   title delay. Hidden while its own filter box is open. */
.omniRailButton[data-tip]:hover::after, .omniRailButton[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  z-index: 60; padding: 6px 10px; border-radius: 6px; background: #111827; color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; pointer-events: none;
  box-shadow: 0 6px 18px rgb(0 0 0 / 25%); }
.omniRailButton[data-tip]:hover::before, .omniRailButton[data-tip]:focus-visible::before { content: ""; position: absolute; left: calc(100% + 4px); top: 50%; transform: translateY(-50%);
  z-index: 60; border: 6px solid transparent; border-right-color: #111827; border-left-width: 0; pointer-events: none; }
.omniRailButton.open[data-tip]::after, .omniRailButton.open[data-tip]::before { display: none; }

/* Kênh Social, Thao tác khác: Sao chép đơn hàng. */
.socialOrderAction.copy { --glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%229%22%20y=%229%22%20width=%2212%22%20height=%2212%22%20rx=%222%22/%3E%3Cpath%20d=%22M5%2015H4a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h9a2%202%200%200%201%202%202v1%22/%3E%3C/svg%3E"); }

/* Kênh Social: a SKU opens a small menu (Mở trên web / Mở trong POS). */
.skuLink { position:relative; display:inline-block; }
.skuLinkCode { display:inline; list-style:none; color:#0088ff; cursor:pointer; }
.skuLinkCode::-webkit-details-marker { display:none; }
.skuLink:not([open]) .skuLinkMenu { display:none; }
.skuLinkCode:hover { color:#0068cc; }
.skuLinkMenu { position:absolute; left:0; top:calc(100% + 4px); z-index:80; display:grid; min-width:150px; padding:4px; border:1px solid #e4e7ec; border-radius:8px; background:#fff; box-shadow:0 8px 24px rgb(16 24 40 / 16%); }
.skuLinkMenu a { padding:7px 10px; border-radius:6px; color:#1f2937; font-size:13px; font-weight:400; white-space:nowrap; text-decoration:none; }
.skuLinkMenu a:hover { background:#f2f4f7; }

/* A detail card still waiting for its data (detailPending): the loader in place of the body. */
.detailCardLoading { min-height:64px; display:flex; align-items:center; justify-content:center; }
.detailCardLoading .wmLoader { padding:12px 0; }

/* Loading, in the Wowmart colours (the three strokes of the logo's W): three dots that bounce in turn. */
.wmLoader { display:flex; gap:10px; align-items:center; justify-content:center; padding:28px 0; }
.wmLoader span { width:12px; height:12px; border-radius:50%; animation:wmBounce 1.1s ease-in-out infinite; }
.wmLoader span:nth-child(1) { background:#3e7fc4; }
.wmLoader span:nth-child(2) { background:#4fb26f; animation-delay:.15s; }
.wmLoader span:nth-child(3) { background:#ea4f6e; animation-delay:.3s; }
@keyframes wmBounce { 0%, 70%, 100% { transform:translateY(0) scale(1); opacity:.55; } 35% { transform:translateY(-10px) scale(1.15); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .wmLoader span { animation:none; opacity:1; } }

/* Chọn sản phẩm gửi cho khách: a product not sold any more (no stock, web backorders off) is faded. */
.socialProductRow.stopped { opacity:.45; }
.socialProductRow.stopped:hover, .socialProductRow.stopped.picked { opacity:.8; }
/* ... and so in Tạo đơn hàng's suggestions / Chọn nhanh and POS Chat Tạo đơn's results, with the "Dừng bán" label. */
.suggestProductRow.stopped, .pickerProductRow.stopped, .socialOrderProduct.stopped { opacity:.45; }
.suggestProductRow.stopped:hover, .suggestProductRow.stopped.active, .pickerProductRow.stopped:hover, .socialOrderProduct.stopped:hover { opacity:.8; }
.stopBadge { display:inline-block; margin-left:8px; padding:0 6px; border-radius:4px; background:#fdecec; color:#e53935; font-size:12px; line-height:18px; }

/* The loader inside a button, a label or a line of text: small, on the line. */
.wmLoader.inline { display:inline-flex; gap:4px; padding:0 2px; vertical-align:middle; }
.wmLoader.inline span { width:6px; height:6px; animation-name:wmBounceSmall; }
@keyframes wmBounceSmall { 0%, 70%, 100% { transform:translateY(0); opacity:.55; } 35% { transform:translateY(-4px); opacity:1; } }

/* Tạo đơn: today's price under a copied line, and the wait for the new order to reach POS. */
.socialOrderCurrentPrice { display: block; margin-top: 4px; color: #b45309; font-size: 12px; }
.socialOrderCurrentPrice b { color: #92400e; }
.socialOrderCurrentPrice .linkButton { padding: 0; min-height: 0; font-size: 12px; }
.socialOrderWaiting { display: inline-flex; align-items: center; gap: 6px; }

/* SKU menu → Gửi tìm hàng, and the short toast that reports it (above the product picker as well). */
.skuLinkMenu button { min-height:0; padding:7px 10px; border:0; border-radius:6px; background:none; color:#1f2937; font:inherit; font-size:13px; font-weight:400; text-align:left; white-space:nowrap; cursor:pointer; }
.skuLinkMenu button:hover { background:#f2f4f7; }
.skuLinkSourcing { display:inline-flex; align-items:center; gap:2px; }
.skuLinkAsk { display:inline-flex; align-items:center; gap:4px; padding:3px 8px 3px 4px; color:#475467; font-size:12px; white-space:nowrap; cursor:pointer; user-select:none; }
.skuLinkAsk input { width:14px; height:14px; min-height:0; margin:0; cursor:pointer; }
.socialProductRow .skuLink { margin-right:6px; }
.wmToast { position:fixed; left:50%; bottom:28px; z-index:1200; transform:translateX(-50%); max-width:min(520px, calc(100vw - 32px)); padding:10px 16px; border-radius:8px; background:#1f2937; color:#fff; font-size:13px; box-shadow:0 8px 24px rgb(16 24 40 / 24%); }
.wmToast.error { background:#b42318; display:flex; align-items:center; gap:10px; }
.wmToast .wmToastRetry, .wmToast .wmToastClose { flex:none; min-height:0; padding:3px 10px; border:1px solid rgb(255 255 255 / 60%); border-radius:6px; background:transparent; color:#fff; font-size:13px; cursor:pointer; }
.wmToast .wmToastClose { padding:0 4px; border:0; font-size:18px; line-height:1; }
/* In the picker the list scrolls (overflow clips a floating menu): the SKU menu opens inline under the row text. */
.socialProductRow .skuLink[open] { display:block; }
.socialProductRow .skuLinkMenu { position:static; display:flex; flex-wrap:wrap; gap:2px; min-width:0; margin:4px 0 2px; padding:2px; box-shadow:none; }
.socialProductRow .skuLinkMenu a, .socialProductRow .skuLinkMenu button { padding:3px 8px; font-size:12px; }

/* Gộp theo khách: the customer's other channels on the row's avatar, and the channel tabs above the messages. */
.socialChannelIcon.corner.more1 { right:12px; z-index:1; }
.socialChannelIcon.corner.more2 { right:29px; z-index:0; }
.socialRowAvatar .socialChannelIcon.corner:not(.more1):not(.more2) { z-index:2; }
.socialLinkedTabs { display:flex; gap:6px; padding:6px 16px; overflow-x:auto; border-bottom:1px solid #e4e7ec; background:#fff; }
.socialLinkedTab { display:inline-flex; align-items:center; gap:6px; min-height:0; padding:4px 10px 4px 6px; border:1px solid #e4e7ec; border-radius:999px; background:#fff; color:#344054; font-size:12.5px; white-space:nowrap; cursor:pointer; }
.socialLinkedTab:hover { background:#f5f8ff; }
.socialLinkedTab.active { border-color:#0088ff; background:#eaf4ff; color:#0057b8; font-weight:600; }
.socialLinkedTab.unread span::after { content:""; display:inline-block; width:7px; height:7px; margin-left:5px; border-radius:50%; background:#ef4444; vertical-align:middle; }
.socialLinkedTab time { color:#98a2b3; font-size:11px; font-weight:400; }
.socialLinkedTab .socialChannelIcon { width:18px; height:18px; border-radius:50%; }

/* Chi tiết đơn: product names at most two lines; the full name is the tooltip (fullTitle). */
.socialOrderViewProduct { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }

/* Giỏ hàng của khách: product names at most two lines; the full name is the tooltip (fullTitle). */
.socialCartLines td:first-child b.socialCartProductName { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }

/* Chi tiết sản phẩm: the name at most three lines; the full name is the tooltip (fullTitle). */
.socialProductViewTop h3.socialProductViewName { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }

/* Chi tiết đơn hàng: ⓘ beside the product name (stock per branch), Thành tiền right-aligned. */
.productDetailTable .orderDetailLineInfo { margin-left: 4px; vertical-align: baseline; }
.productDetailTable th.orderDetailLineTotal, .productDetailTable td.orderDetailLineTotal { text-align: right; }

/* Tạo đơn hàng (like Sapo): short top cards — the customer in one line with the stats beside it, Thông tin bổ sung
   showing its first fields with Xem thêm / Rút gọn; ⓘ on a line coloured by Có thể bán. */
.orderCreateTopGrid { align-items: start; }
.createCustomerCard, .orderSectionShell .createCustomerCard { min-height: 0; }
.createCustomerCompact { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); align-items: start; gap: 16px; padding: 12px 16px; }
.createCustomerCompact .createCustomerName { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; padding-right: 0; }
.createCustomerCompact .createCustomerName a { font-size: 16px; }
.createCustomerCompact .createCustomerName strong { font-size: 16px; }
.createCustomerCompact .clearCustomerButton { position: static; margin-left: 6px; min-height: 0; padding: 0 4px; font-size: 18px; line-height: 1; }
.createCustomerCompact .createCustomerMain p { margin: 6px 0 0; }
.createCustomerCompact .createCustomerAddressHeading { margin-top: 12px; font-size: 13px; }
.createCustomerCompact .createCustomerMain > .linkButton { min-height: 0; padding: 0; margin-top: 6px; }
.createCustomerCompact .supplierStatsBox { margin: 0; padding: 6px 14px; }
.orderExtraCard .orderExtraMore { justify-self: center; grid-column: 1 / -1; min-height: 0; padding: 4px 0 0; }
.createProductTable .orderCreateLineInfo { margin-left: 4px; vertical-align: baseline; }
.orderCreateLineInfo.ok { color: #0088ff; }
.orderCreateLineInfo.low { color: #f79009; }
.orderCreateLineInfo.none { color: #d92d20; }
.createCustomerCard .supplierEmptyBody:has(.createCustomerCompact) { min-height: 0; }
/* Chi tiết đơn hàng: the totals' amounts end where Thành tiền ends (its 14px cell padding) and use its 14px text. */
.productPanel:has(.orderDetailLineTotal) .totals { padding-right: 14px; }
.productPanel:has(.orderDetailLineTotal) .totals .metaRow, .productPanel:has(.orderDetailLineTotal) .totals .metaRow > * { font-size: 14px; }

/* POS Chat → đơn hàng: ⓘ beside a product (Có thể bán at the order's branch), its stock table, and Xử lý đơn hàng. */
.socialOrderViewItem { display:flex; align-items:flex-start; gap:4px; min-width:0; }
.socialStockInfo { flex:none; min-height:0; padding:0 2px; border:0; background:none; color:#98a2b3; font-size:14px; line-height:1.3; cursor:pointer; }
.socialStockInfo.ok { color:#0088ff; }
.socialStockInfo.low { color:#f79009; }
.socialStockInfo.none { color:#d92d20; }
.socialStockSub { margin:-4px 0 10px; font-size:13px; }
.socialStockTable { width:100%; border-collapse:collapse; font-size:13px; }
.socialStockTable th, .socialStockTable td { padding:8px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
.socialStockTable th:first-child, .socialStockTable td:first-child { text-align:left; }
.socialStockTable th:last-child, .socialStockTable td:last-child { text-align:left; }
.socialStockTable th { color:var(--muted); font-weight:500; background:#f9fafb; }
.socialStockTable td.zero { color:#d92d20; }
.socialStockTable td.plus { color:#0088ff; }
.socialStockTable tr.here td { background:#f2f7ff; }
.socialStockView { width:min(700px, calc(100vw - 32px)); }
.socialStockTable th, .socialStockTable td { overflow:visible; text-overflow:clip; max-width:none; text-transform:none; }

/* POS Chat → đơn hàng: Trạng thái xử lý (Sapo's processing statuses) in the card head. */
.socialProcessStatus { min-width:0; max-width:60%; height:32px; padding:0 8px; border:1px solid var(--line); border-radius:6px; background:#fff; font:inherit; font-size:13px; color:var(--text); }

/* Chi tiết đơn hàng: "✎ Ghi chú" beside a line's SKU, the note under the line and its editor. */
.orderLineSkuRow { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.orderLineNoteButton { min-height:0; padding:0; border:0; background:none; color:#0088ff; font-size:13px; cursor:pointer; }
.orderLineNoteButton:disabled { color:#98a2b3; cursor:not-allowed; }
.orderLineNotePencil { min-height:0; margin-left:6px; padding:0 2px; border:0; background:none; color:#98a2b3; font-size:14px; font-style:normal; cursor:pointer; }
.orderLineNotePencil:hover { color:#0088ff; }
.orderLineNote { display:block; margin-top:4px; color:#667085; font-size:13px; white-space:pre-wrap; }
.orderLineNoteEdit { display:grid; gap:6px; margin-top:6px; max-width:420px; }
.orderLineNoteEdit textarea { width:100%; padding:6px 8px; border:1px solid var(--line); border-radius:6px; font:inherit; font-size:13px; resize:vertical; }

/* POS Chat → đơn hàng: ✎ Ghi chú of a line (plain blue text), the note with its pencil, and the editor. */
.socialOrderViewSkuRow { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.socialLineNoteButton { min-height:0; padding:0; border:0; background:none; color:#0088ff; font-size:12px; cursor:pointer; }
.socialLineNote { display:block; color:#667085; font-size:12.5px; white-space:pre-wrap; }
.socialLineNotePencil { min-height:0; margin-left:4px; padding:0 2px; border:0; background:none; color:#98a2b3; font-size:13px; cursor:pointer; }
.socialLineNotePencil:hover { color:#0088ff; }
.socialLineNoteEdit { display:grid; gap:4px; }
.socialLineNoteEdit textarea { width:100%; padding:5px 7px; border:1px solid var(--line); border-radius:6px; font:inherit; font-size:12.5px; resize:vertical; }
.socialLineNoteError { color:#d92d20; }

/* Đơn hàng: the customer's chat channels beside the name as round badges. */
.orderContactChip { border-radius: 50%; }
.orderContactChip .socialChannelIcon { border-radius: 50%; }

/* Chi tiết đơn hàng: the status badge is not part of a double-click / drag on the order code; "Đổi trả hàng" of a
   Sapo order is a link styled as the button. */
.orderHeadingIdentity h1 + span { user-select: none; -webkit-user-select: none; }
.orderReturnLink { display: inline-flex; align-items: center; text-decoration: none; }

/* Đơn hàng: the chat channel badges as black-and-white line icons (sketch). */
a.orderContactChip, a.orderContactChip:visited { padding: 1px; color: #344054; border-radius: 6px; }
a.orderContactChip:hover { color: #0088ff; filter: none; }
.sketchChannelIcon { display: inline-flex; width: 20px; height: 20px; }
.omniFeeActions { display: flex; gap: 16px; flex-wrap: wrap; }
.omniOverStep { flex-wrap: wrap; margin-top: 8px; }
.omniOverStep input { width: 90px; }
.shippingFeeHint { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); margin: -4px 0 4px; }
/* Đơn hàng list: the customer's chat as the channel's line icon (black and white); red when the chat is not linked to
   the customer and only shares the order's phone ("trùng SĐT"). Same red on the order page's channel icons. */
a.orderChatIcon, a.orderChatIcon:visited { display: inline-flex; align-items: center; margin-left: 6px; vertical-align: -4px; color: #344054; text-decoration: none; }
a.orderChatIcon:hover { color: #0088ff; }
a.orderChatIcon .sketchChannelIcon { width: 18px; height: 18px; }
a.orderChatIcon.samePhone, a.orderChatIcon.samePhone:visited, a.orderContactChip.samePhone, a.orderContactChip.samePhone:visited { color: #d92d20; }
a.orderContactChip.samePhone { border-color: transparent; }
a.orderChatIcon.samePhone:hover, a.orderContactChip.samePhone:hover { color: #b42318; }
a.orderChatIcon .sketchChannelIcon svg { width: 100%; height: 100%; }

/* Lô - HSD (stock-lots-ui.js): lot chips, the inline editor, Kho → Khai báo HSD. */
.lotChip { display: inline-block; margin: 0 6px 4px 0; padding: 1px 8px; border-radius: 10px; background: #e8f4ff; color: #0b5cad; font-size: 13px; line-height: 20px; white-space: nowrap; }
.lotChip.near { background: #fff4e0; color: #9a5b00; }
.lotChip.expired { background: #fdecec; color: #c62828; }
.lotChip.unknown { background: #f1f3f5; color: #59636e; }
.lotEditor { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
.lotEditorRows { display: flex; flex-direction: column; gap: 6px; }
.lotEditorRow { display: flex; align-items: center; gap: 8px; }
.lotEditorRow input { width: 130px; min-height: 32px; }
.lotEditorRow input.lotQty { width: 80px; text-align: right; }
.lotEditorActions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.lotEditorActions button { min-height: 32px; }
.lotEditorActions .linkButton, .lotEditorRow .linkButton, .variantLotLine .linkButton, .purchaseOrderLotTable .linkButton { min-height: 0; }
.lotNoExpiry { display: inline-flex; align-items: center; gap: 4px; }
.lotProgress { margin: 8px 0; }
.ordersTable.stockLotsTable { table-layout: fixed; width: 100%; min-width: 860px; }
.stockLotsTable td { vertical-align: middle; white-space: normal; overflow-wrap: anywhere; }
.stockLotsTable td:last-child button { white-space: nowrap; }
.stockLotsTable tr.lotRowOpen td, .stockLotsTable tr.lotEditorTr td { background: #f7fbff; }
.stockLotsTable tr.lotEditorTr td { padding-top: 0; }
.variantLotCard .detailCardBody { display: flex; flex-direction: column; gap: 8px; }
.variantLotLine { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.variantLotLine .lotChip { margin: 0; }
.purchaseOrderLotPanel .panelHeader { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ordersTable.purchaseOrderLotTable { table-layout: auto; width: 100%; min-width: 0; }
.purchaseOrderLotTable td { vertical-align: middle; white-space: normal; }
.ordersTable.lotHistoryTable { min-width: 0; width: 100%; table-layout: auto; margin-top: 4px; }
.lotHistoryTable td { white-space: nowrap; vertical-align: middle; }
/* POS Chat → chi tiết đơn: bấm mã vận đơn mở menu (xem phiếu giao, trang theo dõi của hãng, gửi link theo dõi cho khách, sao chép mã) */
.socialShipRow { position: relative; }
.socialShipRow.menuOpen { z-index: 5; }
button.socialShipCodeBtn { min-height: 0; padding: 0; border: 0; background: none; color: #1f6feb; font: inherit; font-weight: 600; cursor: pointer; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
button.socialShipCodeBtn:hover { text-decoration: none; color: #0b5bd3; }
.socialShipMenu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 230px; padding: 4px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14); display: flex; flex-direction: column; }
.socialShipMenu a, .socialShipMenu button { display: block; min-height: 0; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: #1f2937; font: inherit; font-size: 14px;
  text-align: left; text-decoration: none; cursor: pointer; }
.socialShipMenu a:hover, .socialShipMenu button:hover:not(:disabled) { background: #f1f5f9; }
.socialShipMenu button:disabled { color: #9ca3af; cursor: default; }
.socialShipMenu button.danger:not(:disabled) { color: #dc2626; }
.lotTiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 8px 0; }
.lotTile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border: 1px solid #dfe3e8; border-radius: 6px; background: #fff; text-align: left; min-height: 0; }
.lotTile.active { border-color: #008cff; box-shadow: 0 0 0 1px #008cff inset; }
.lotTile.bad strong { color: #c62828; }
.lotTile.warn strong { color: #9a5b00; }
.lotTile.ok strong { color: #1f7a3a; }
.lotTileLabel { font-size: 13px; color: #59636e; }
.lotMonths { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; }
.lotMonths .lotChip { margin: 0; }
.lotChip.suggested { background: #f3f0ff; color: #5b3fc4; }
.lotConfirm { margin-left: 8px; }
/* Nhập hàng → Bộ lọc (purchase-order-filters-ui.js). */
.poFilterDrawer .filterDrawerBody { display: flex; flex-direction: column; gap: 12px; }
.poFilterField { display: flex; flex-direction: column; gap: 4px; }
.poFilterLabel { font-size: 13px; color: #59636e; }
.poFilterChecks { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.poFilterCheck { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.poFilterChips, .poFilterApplied { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.poFilterApplied { margin: 0 0 8px; }
.poFilterSearch { position: relative; }
.poFilterResults { display: flex; flex-direction: column; border: 1px solid #dfe3e8; border-radius: 6px; background: #fff; margin-top: 2px; max-height: 220px; overflow: auto; }
.poFilterResults button { min-height: 0; padding: 6px 10px; border: 0; background: #fff; text-align: left; }
.poFilterResults button:hover { background: #f1f5f9; }
.poFilterNote { margin-top: 4px; color: #c62828; font-size: 13px; }
.poFilterHint { margin-top: 4px; color: #637381; font-size: 13px; }
/* Xóa sản phẩm: the products about to be deleted on Sapo. */
.productDeleteList { margin: 8px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.productDeleteList li { display: flex; flex-direction: column; gap: 2px; }
.productDeleteWarn { color: #b42318; }
.poFilterDrawer.settled { animation: none; }
.poFilterDate select, .poFilterField > div > select, .poFilterField input:not([type=checkbox]) { width: 100%; }
.poFilterDateRange { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.poFilterDateRange input { flex: 1; }
.poFilterCheck input[type=checkbox] { width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; flex: none; }
.poFilterCheck { flex-direction: row; white-space: nowrap; }
.filterDrawerBody label.poFilterCheck { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; }
.poFilterButton { display: inline-flex; align-items: center; gap: 2px; border: 1px solid #008cff; color: #008cff; background: #fff; border-radius: 4px; padding: 0 12px; font-weight: 500; white-space: nowrap; }
.poFilterButton.active { background: #008cff; color: #fff; }
.poFilterIcon { font-size: 12px; }
/* Nhập hàng: the filter bar like Sapo's (segments, popovers, Lưu bộ lọc). */
.poFilterBar { display: flex; align-items: center; gap: 12px; position: relative; flex: none; }
.poSegments { display: inline-flex; border: 1px solid #d3d9e0; border-radius: 4px; background: #fff; }
.poSegmentWrap { position: relative; }
.poSegmentWrap + .poSegmentWrap .poSegment, .poSegments > .poMore { border-left: 1px solid #d3d9e0; }
.poSegment { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 150px; height: 38px; min-height: 38px; padding: 0 14px;
  border: 0; border-radius: 0; background: #fff; color: #212b36; font-size: 15px; white-space: nowrap; cursor: pointer; }
.poSegment:hover, .poSegment.open { background: #f4f6f8; }
.poSegment.active { color: #008cff; font-weight: 500; }
.poCaret { color: #919eab; font-size: 13px; }
.poFunnel { display: inline-block; width: 16px; height: 16px; background: #919eab;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 2h14l-5.5 6.5V14l-3-1.5V8.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 2h14l-5.5 6.5V14l-3-1.5V8.5z'/%3E%3C/svg%3E") center/contain no-repeat; }
.poMore.active .poFunnel { background: #008cff; }
.poSaveFilter { height: 38px; min-height: 38px; padding: 0 18px; border: 0; border-radius: 4px; background: #f4f6f8; color: #919eab; font-size: 15px; }
.poPopoverBackdrop { position: fixed; inset: 0; z-index: 40; }
.poPopover { position: absolute; top: calc(100% + 6px); left: 0; z-index: 41; min-width: 300px; max-width: 420px; padding: 12px; background: #fff;
  border: 1px solid #dfe3e8; border-radius: 6px; box-shadow: 0 8px 24px rgba(15, 23, 42, .14); display: flex; flex-direction: column; gap: 10px; }
.poPopover .poFilterChecks { flex-direction: column; flex-wrap: nowrap; gap: 8px; max-height: min(320px, 55vh); overflow-y: auto; }
.poFilterPick { display: flex; flex-direction: column; gap: 8px; }
.poOptionFind { width: 100%; min-height: 34px; padding: 0 10px; border: 1px solid #d3d9e0; border-radius: 4px; font-size: 14px; }
.poMultiDrop { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.poMultiDrop .poMultiList { margin-top: 0; }
.poPopover label.poFilterCheck { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; }
.poPopover .poFilterCheck input[type=checkbox] { width: 16px; height: 16px; min-height: 0; margin: 0; }
.poPopover select, .poPopover input:not([type=checkbox]) { width: 100%; }
.poPopoverActions { display: flex; justify-content: flex-end; }
.poCaret { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #919eab; font-size: 0; }
.poSaveFilter.ready { background: #fff; color: #008cff; border: 1px solid #008cff; cursor: pointer; }
.poSavePopover { left: auto; right: 0; min-width: 320px; }
.savedFilterTab { gap: 6px; }
.savedFilterDelete { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; color: #637381; font-size: 15px; line-height: 1; }
.savedFilterDelete:hover { background: #fdecec; color: #c62828; }
/* Bộ lọc khác: status lists as select-like dropdowns with checkboxes. */
.poMulti { position: relative; }
.poMultiBox { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 38px; padding: 0 12px;
  border: 1px solid #d3d9e0; border-radius: 4px; background: #fff; color: #212b36; font-size: 14px; text-align: left; cursor: pointer; }
.poMultiBox:not(.chosen) .poMultiText { color: #637381; }
.poMultiBox.open { border-color: #008cff; }
.poMultiText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poMultiList { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 10px 12px; border: 1px solid #dfe3e8; border-radius: 4px; background: #fff; box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
  max-height: 260px; overflow-y: auto; }
.filterDrawerBody .poMultiList label.poFilterCheck { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; }
.poMultiList .poFilterCheck input[type=checkbox] { width: 16px; height: 16px; min-height: 0; margin: 0; }
/* 📅 Hạn sử dụng beside the SKU of a purchase order line. */
.orderSupplierLineSku { display: flex; align-items: center; gap: 6px; }
.lotCalendarButton { min-height: 0; height: 22px; padding: 0 4px; border: 0; background: transparent; font-size: 14px; line-height: 1; cursor: pointer; opacity: .75; }
.lotCalendarButton:hover { opacity: 1; background: #f1f5f9; border-radius: 4px; }
.lotLineHsd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 2px; }
.lotLineHsd .lotChip { margin: 0; }
.lotLineHsd .lotEditor { flex-basis: 100%; }
.lineHsdInput { display: block; width: 100%; max-width: 320px; margin-top: 4px; min-height: 30px; padding: 4px 8px; border: 1px solid #d3d9e0; border-radius: 4px; font-size: 13px; }
.createLineName { font-weight: 400; }

/* Tạo đơn nhập (owner 08/10/2026): ⚙ columns, date shown after the box closes, Chiết khấu (F6), chi phí and payment rows. */
.createProductTable.hideCol-image [data-col="image"],
.createProductTable.hideCol-unit [data-col="unit"],
.createProductTable.hideCol-discount [data-col="discount"],
.createProductTable.hideCol-tax [data-col="tax"] { display: none; }
.purchaseColumnsWrap { position: relative; }
.purchaseColumnsMenu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 170px; padding: 10px 12px; display: grid; gap: 6px;
  background: var(--panel, #fff); border: 1px solid var(--line, #dfe3e8); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.purchaseColumnsMenu strong { font-weight: 600; font-size: 13px; }
.lineHsdText { display: inline-block; margin-top: 2px; padding: 0; min-height: 0; border: 0; background: none; color: var(--muted, #637381); font-size: 12px; cursor: pointer; }
.lineHsdText:hover { color: var(--blue, #0088ff); }
/* Sửa đơn nhập / Nhập hàng từ đơn đặt: the product cell is a grid, which would stretch and centre the date. */
.orderSupplierLineProduct > .lineHsdText { justify-self: start; text-align: left; }
.orderSupplierLineProduct .noteLotSubmit { gap: 12px; align-items: center; }
.purchaseDiscountBox { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; margin: 4px 0 8px; }
.purchaseDiscountBox .segmented { display: inline-flex; border: 1px solid var(--line, #dfe3e8); border-radius: 4px; overflow: hidden; }
.purchaseDiscountBox .segmented button { min-height: 30px; padding: 0 10px; border: 0; border-radius: 0; background: none; }
.purchaseDiscountBox .segmented button.active { background: var(--blue, #0088ff); color: #fff; }
.purchaseDiscountBox input { text-align: right; }
.purchaseCostRow { display: grid; grid-template-columns: 1fr 120px 20px; gap: 6px; align-items: center; margin: 4px 0; }
.purchaseCostRow input.moneyField { text-align: right; }

/* Document details (owner 09/10/2026): amounts right-aligned like Sapo, and the totals under the product table end on
   the same line as the last column (the table's cells keep 12px on the right). */
.purchaseOrderProductTable td.moneyCell,
.stockTransferDetailPage .stockTransferProductsPanel td.moneyCell { text-align: right; }
.documentDetail .purchaseOrderProductFooter { padding-right: 12px; }
.stockTransferDetailPage .stockTransferProductsPanel .stockTransferTotals { padding-right: 12px; }
.orderSupplierDetailPage .orderSupplierProductFooter { padding-right: 12px; }
.orderSupplierDetailPage .orderSupplierProductFooter > div.totals { padding-right: 0; }

/* Chi tiết đơn → Đơn hàng đã thanh toán: các lần thanh toán của đơn Sapo */
.orderPayments { margin-top: 12px; }
.orderPayment { padding: 8px 0; }
.orderPayment + .orderPayment { border-top: 1px solid #edf0f2; }
.orderPayment summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.orderPayment summary::-webkit-details-marker { display: none; }
.orderPayment summary::after { content: "▾"; color: #8a94a6; font-size: 12px; order: 2; }
.orderPayment[open] summary::after { content: "▴"; }
.orderPaymentDot { width: 12px; height: 12px; border-radius: 50%; background: #2f6fed; flex: none; }
.orderPayment.cancelled .orderPaymentDot { background: #c4cad4; }
.orderPayment.cancelled .orderPaymentTitle { color: #8a94a6; text-decoration: line-through; }
.orderPaymentTitle { order: 1; }
.orderPaymentTime { order: 3; margin-left: auto; color: #8a94a6; }
.orderPaymentDetail { display: grid; grid-template-columns: 160px 16px 1fr; gap: 0; padding: 6px 0 0 22px; white-space: pre-line; overflow-wrap: anywhere; }

/* Lô - HSD 4/5: morning near-expiry digest (Tổng quan card, Gợi ý xả hàng) */
.lotReportTabs { margin-bottom: 12px; }
.lotDigestBox { background: var(--panel, #fff); border: 1px solid var(--line, #dfe3e8); border-radius: 6px; padding: 12px 16px; margin-bottom: 12px; }
.lotDigest p { margin: 0 0 8px; }
.lotDigestRows { display: grid; gap: 6px; margin-bottom: 8px; }
.lotDigestRow { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; }
.lotDigestRow .muted { grid-column: 1 / -1; font-size: 12px; }
.lotDigestRow.bad strong { color: #d92d20; }
.lotDigestRow.warn strong { color: #b54708; }
.lotDigestRow strong { font-weight: 500; text-align: right; }
.lotDigest:not(.compact) .lotDigestRows { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: 24px; }
.lotDigestNew { font-weight: 500; }
.lotDigestList { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 2px; font-size: 13px; }
.clearanceTable td:last-child { white-space: normal; }

/* Đối soát COD: dòng tổng Tiền về NH / Lệch đối soát */
.deliveryCollationsTable .collationBankTotal td { background: #f6f8fa; font-weight: 600; vertical-align: top; }
.deliveryCollationsTable .collationBankTotal .muted { font-weight: 400; }
/* POS Chat → Hủy đơn: chọn lý do hủy của Sapo (Cài đặt → Lý do hủy trả → Hủy đơn hàng) */
.socialCancelDialog { max-width: 440px; }
.socialCancelDialog > p { margin: 0 0 10px; }
.socialCancelReason { display: grid; gap: 6px; margin-bottom: 12px; }
.socialCancelReason > span { font-weight: 600; color: #1f2937; }
.socialCancelReason select { width: 100%; padding: 8px 10px; border: 1px solid #d0d5dd; border-radius: 6px; background: #fff; font: inherit; }
.socialCancelDialog .socialAddressActions button.danger { background: #d92d20; border-color: #d92d20; color: #fff; }
.socialCancelDialog .socialAddressActions button.danger:disabled { opacity: .5; }
/* Chi tiết đơn → Hủy đơn hàng (đơn Sapo): chọn lý do hủy của Sapo */
.sapoOrderCancelModal { max-width: 460px; }
.sapoCancelReason { display: grid; gap: 6px; margin-top: 12px; }
.sapoCancelReason > span { font-weight: 600; }
.sapoCancelReason select { width: 100%; padding: 8px 10px; border: 1px solid #d0d5dd; border-radius: 6px; background: #fff; font: inherit; }
/* Inside .cloneFulfillmentBody, whose labels stack their content in a column. */
.sapoOrderCancelModal .sourcingCancelOption { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; margin: 12px 0 0; line-height: 1.45; cursor: pointer; }
.sapoOrderCancelModal .sourcingCancelOption input { flex: none; margin-top: 3px; }

/* Quản lý kho (owner 09/10/2026): a narrower name column, so every column fits like Sapo. */
.inventoryListMain .inventoryTable { min-width: 1180px; width: 100%; }
.inventoryListMain .inventoryTable th:nth-child(3),
.inventoryListMain .inventoryTable td:nth-child(3) { min-width: 240px; width: 300px; max-width: 320px; white-space: normal; }
.inventoryListMain .inventoryTable .productNameLink { display: block; white-space: normal; overflow: visible; text-overflow: clip; max-width: none; text-align: left; }
/* Quản lý kho / Tình trạng kênh bán, like Sapo (owner 16/10/2026): the name link on one line cut with "…", the SKU under it. */
a.orderLink.variantListName { display: block; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
/* Có bản POS mới: thanh nhắc tải lại trang (watchPosRelease) */
.posReleaseBar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 9999; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px; background: #1f2937; color: #fff; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.posReleaseBar button { min-height: 0; padding: 6px 12px; border: 0; border-radius: 6px; background: #0088ff; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
/* POS Chat: tab kênh vừa bấm quay vòng tải cho tới khi tin nhắn và khung khách về */
.socialTabSpinner { width: 12px; height: 12px; flex: none; border: 2px solid #b6d4fe; border-top-color: #0088ff; border-radius: 50%; animation: socialTabSpin .7s linear infinite; }
@keyframes socialTabSpin { to { transform: rotate(360deg); } }

/* Khai báo HSD: "Theo SP… ×N" of a combo / pack size on its own line under the status. */
.lotComboNote { display: block; margin-top: 2px; font-size: 12px; }

/* Sản phẩm → Tồn kho: a figure above 0 opens its orders / purchase orders / stock history (owner 09/10/2026). */
.productInventoryTable .stockFigureLink { padding: 0; min-height: 0; border: 0; background: none; color: var(--blue, #0088ff); font: inherit; cursor: pointer; }

/* Sản phẩm → Tồn kho popups (owner 09/10/2026, like Sapo's). */
.stockBreakdownModal { width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 80px); overflow: auto; background: var(--panel, #fff); border-radius: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.2); }
.stockBreakdownModal .modalHeader { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--line, #dfe3e8); }
.stockBreakdownModal .modalHeader h2 { margin: 0; font-size: 18px; font-weight: 500; }
.stockBreakdownModal .modalHeader button { font-size: 22px; min-height: 0; }
.stockBreakdownSum { margin: 12px 24px 0; }
.stockBreakdownTable { width: 100%; border-collapse: collapse; }
.stockBreakdownTable th { background: #f4f6f8; font-weight: 500; text-align: left; padding: 12px 24px; }
.stockBreakdownTable td { padding: 12px 24px; border-bottom: 1px solid var(--line, #dfe3e8); }
.stockBreakdownTable .numberCell { text-align: center; }
.stockBreakdownFooter { display: flex; justify-content: flex-end; align-items: center; gap: 24px; padding: 12px 24px; }
.stockBreakdownFooter .pages { display: flex; gap: 4px; }
.stockBreakdownActions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 0 24px 20px; }

/* Chi tiết phiếu giao hàng: product name on its own line, regular weight (owner 09/10/2026). */
.shipmentLineTable .shipmentLineName { display: block; font-weight: 400; }

/* Owner 09/10/2026: product names in regular weight everywhere — the product suggestions and pickers of the create pages
   and the lines of the POS's own stock documents. */
.suggestProductInfo strong, .pickerProductRow strong { font-weight: 400; }

/* Chi tiết phiếu giao hàng: Số lượng and Thuế % centred, money columns right (owner 09/10/2026). */
.shipmentLineTable td:nth-child(4), .shipmentLineTable th:nth-child(4), .shipmentLineTable td:nth-child(6), .shipmentLineTable th:nth-child(6) { text-align: center; }
/* Thêm địa chỉ giao hàng: Khu vực / Phường xã có ô tìm kiếm (customerAddressPicker) trông như các ô chọn của form */
.orderCreateAddressModal .customerAddressPicker { display: grid; gap: 6px; align-content: start; align-self: start; color: var(--text); font-size: 14px; }
.orderCreateAddressModal .customerAddressPicker .customerAddressTrigger { min-height: 40px; border: 1px solid #d0d5dd; border-radius: 6px; background: #fff; color: var(--text); }
.orderCreateAddressModal .customerAddressPicker .customerAddressTrigger:disabled { background: #f5f6f8; color: #98a2b3; }
/* The list is placed fixed by renderCustomerAddressPicker (over the dialog, never pushing the form); fixed height. */
.customerAddressPopup .customerAddressOptions { height: 260px; max-height: 260px; }
/* POS Chat → Tạo đơn theo giao diện Sapo (09/10/2026): khách một dòng có ảnh, thẻ trắng tách nhau, Xác nhận thanh toán,
   Giao hàng 2×2 có dấu chọn ở góc, Chi tiết thanh toán trong khung xanh nhạt; Kho / Bảng giá gộp một nhóm bo tròn. */
.socialOrderHead select { border-radius:999px; padding:6px 12px; min-width:120px; max-width:170px; }
.socialOrderSide .socialOrderSideBody { display:flex; flex-direction:column; gap:8px; }
.socialOrderSide .socialOrderCustomer { display:flex; align-items:center; gap:12px; padding:12px 14px; }
.socialOrderSide .socialOrderCustomer > div { flex:1 1 auto; min-width:0; }
.socialOrderSide .socialOrderCustomer strong { color:#0088ff; font-size:17px; line-height:1.25; overflow-wrap:anywhere; }
.socialOrderSide .socialOrderAvatar { width:44px; height:44px; flex:none; border-radius:50%; object-fit:cover; display:inline-flex; align-items:center; justify-content:center;
  background:#e7f1ff; color:#0088ff; font-weight:700; font-size:18px; }
.socialOrderSide .socialOrderCard { display:block; margin:0; padding:12px 14px; border:0; border-radius:0; box-shadow:none; }
.socialOrderSide .socialOrderCard:hover { border-color:transparent; }
.socialOrderSide .socialOrderCardHead { margin-bottom:8px; }
.socialOrderSide .socialOrderCard h3 { font-size:15px; }
.socialOrderSide .socialOrderAddress { display:grid; gap:2px; }
.socialOrderPayRow { display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 28px; gap:6px; align-items:center; margin-bottom:6px; }
.socialOrderPayRow select, .socialOrderPayRow input { width:100%; min-width:0; border:1px solid var(--line); border-radius:6px; padding:6px 8px; font:inherit; font-size:13px; background:#fff; }
.socialOrderPayRow input[inputmode=numeric] { text-align:right; }
.socialOrderSide .socialOrderAddPay { padding:2px 0; font-size:14px; }
.socialOrderSide .socialOrderDelivery { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.socialOrderSide .socialOrderDelivery button { position:relative; min-height:40px; padding:8px; border-radius:6px; font-size:13.5px; text-align:center; }
.socialOrderSide .socialOrderDelivery button.active::after { content:"✓"; position:absolute; right:0; bottom:0; width:16px; height:16px; border-radius:6px 0 5px 0;
  background:var(--blue); color:#fff; font-size:10px; line-height:16px; text-align:center; }
.socialOrderSide .socialOrderTotals { margin:0 10px 8px; padding:12px 14px; border:1px solid #b9d7ff; border-radius:8px; background:#f5f9ff; }
.socialOrderSide .socialOrderTotals h3 { font-size:15px; }
.socialOrderSide .socialOrderTotals dl { grid-template-columns:1fr 120px; }
.socialOrderSide .socialOrderTotals input { background:#fff; }
/* POS Chat: mã đơn trong tin nhắn (#622411, SON197051) — bấm để sao chép */
.socialOrderCode { display:inline-block; margin:0 1px; padding:0 8px; border:0; border-radius:10px; background:#fff1d6; color:#9a5b00; font:inherit; font-weight:600; cursor:copy; }
.socialOrderCode:hover { background:#ffe2a8; }
.socialMessage.out .socialOrderCode { background:rgb(255 255 255 / 25%); color:#fff; }

/* Danh sách đơn hàng: Tags on one short line, the rest on hover (owner 09/10/2026). */
.ordersTable td.orderTagsCell { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Báo cáo → Kiểm hàng theo sản phẩm (stocktake-report-ui.js): Sapo-like list footer and a sortable column. */
.sapoPager { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 20px 24px; padding: 12px 20px;
  border: 1px solid var(--line); border-top: 0; background: #fff; color: #1f2933; }
.sapoPagerSize { display: inline-flex; align-items: center; gap: 10px; }
.sapoPagerSize select { min-height: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.sapoPagerPages { display: inline-flex; align-items: center; gap: 4px; }
.sapoPagerPages button { min-width: 32px; min-height: 32px; height: 32px; padding: 0 6px; border: 0; border-radius: 50%; background: transparent; color: #1f2933; box-shadow: none; }
.sapoPagerPages button:hover:not([disabled]):not(.active) { background: #f0f4f8; }
.sapoPagerPages button.active { background: #008cff; color: #fff; }
.sapoPagerPages .sapoPagerArrow { font-size: 18px; color: #6b7785; }
.sapoPagerPages button[disabled] { opacity: .4; cursor: default; }
.sapoPagerGap { min-width: 28px; text-align: center; color: #1f2933; }
.sortableHeader { cursor: pointer; user-select: none; white-space: nowrap; }
.sortableHeader .sortArrow { color: #9aa5b1; }
.sortableHeader.sorted, .sortableHeader.sorted .sortArrow { color: #008cff; }

.socialCallButton { margin-left:6px; padding:1px 8px; border:1px solid #16a34a; border-radius:12px; background:#f0fdf4; color:#15803d; font:inherit; font-size:12px; cursor:pointer; min-height:0; }
.socialCallButton:disabled { opacity:.6; cursor:default; }
.customerCallsHead { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.posCall { display:inline-flex; align-items:center; gap:6px; margin-left:8px; vertical-align:middle; }
.posCallButton { padding:1px 9px; border:1px solid #16a34a; border-radius:12px; background:#f0fdf4; color:#15803d; font:inherit; font-size:13px; cursor:pointer; min-height:0; line-height:1.6; }
.posCallButton:disabled { opacity:.6; cursor:default; }
.posCallNote { font-size:12px; color:#15803d; }
.posCallNote.error { color:#b91c1c; }
.socialSetField { display:grid; gap:4px; font-size:13px; color:#334155; }
.socialSetField textarea, .socialSetField input { font:inherit; padding:7px 9px; border:1px solid #cbd5e1; border-radius:6px; width:100%; box-sizing:border-box; }
.orderConfirmLine { margin:6px 0 0; font-size:13px; color:#475569; }
.orderConfirmLine summary { cursor:pointer; font-weight:600; color:#334155; width:fit-content; }
.orderConfirmLine.confirmed summary { color:#15803d; }
.orderConfirmLine ul { margin:4px 0 0; padding-left:20px; }
.orderConfirmLine li { margin:2px 0; }
.orderConfirmLine a { text-decoration:none; }
.socialSetInline { display:flex; gap:8px; flex-wrap:wrap; }
.socialSetInline select, .socialSetInline input { flex:1 1 200px; font:inherit; padding:7px 9px; border:1px solid #cbd5e1; border-radius:6px; }

/* Cấu hình: one type scale on every settings page (owner 09/10/2026 — some pages had 17–18px tables and 22px intros).
   Body text and tables 14px, section titles 17px, small notes 13px, like Cấu hình chung / Kho / Thuế. */
.omniSettingsShell :is(.settingsListTable, .cancelReasonTable, .orderSourceSheet table, .paymentSettingsTable) :is(th, td) { font-size: 14px; }
.omniSettingsShell :is(.settingsDetailIntro, .saleSettingsIntro, .orderSourceIntro, .otherSettingsIntro, .paymentSectionIntro, .paymentIntegratedSection) h2,
.omniSettingsShell .roleCreateTitle, .omniSettingsShell .rolePermissionCard h3 { font-size: 17px; }
.omniSettingsShell :is(.settingsDetailIntro, .saleSettingsIntro, .orderSourceIntro, .otherSettingsIntro, .paymentSectionIntro, .paymentIntegratedSection) p,
.omniSettingsShell .paymentWarning, .omniSettingsShell .paymentSettingsToolbar :is(.linkButton, .primaryAction),
.omniSettingsShell :is(.settingsCheckboxLine, .productStockSelectLabel, .otherSettingsBox, .settingsFormField, .rolePermissionCheck),
.omniSettingsShell :is(.cancelReasonTabs, .cancelReasonPagination, .cancelReasonTopActions, .orderSourceIntro, .paymentIntegrationFooter) button,
.omniSettingsShell .cancelReasonPagination { font-size: 14px; }
.omniSettingsShell :is(.paymentIntegrationTitle, .rolePermissionGroupTitle) { font-size: 15px; }
.omniSettingsShell :is(.paymentIntegrationNote, .rolePermissionNote) { font-size: 13px; }
.omniSettingsShell :is(.settingsDefaultTick, .defaultSourceCell) { font-size: 18px; }
.omniSettingsShell :is(.settingsListTable, .paymentSettingsTable) .editIconButton { font-size: 18px; }

/* POS Chat → khung khách hàng: one type scale (owner 10/10/2026 — sizes jumped 12…18px). Name 16px, section titles
   15px, everything inside the cards 13px, chips / dates / status 12px. */
.socialMain.omni .socialCustomerNameRow strong { font-size: 16px; }
.socialMain.omni .socialCustomerCardHead h3, .socialMain.omni .socialCustomerCardHead > span { font-size: 15px; }
.socialMain.omni .socialCustomerCardBody, .socialMain.omni .socialCustomerPhone, .socialMain.omni .socialCustomerCardBody b { font-size: 13px; }
.socialMain.omni .socialCustomerMeta em { white-space: nowrap; }

/* Trang chi tiết: one type scale (owner 10/10/2026 — e.g. product detail had 13px info rows above a 15px Tồn kho
   table; each page had its own 12/13/15px rules). Text, info rows, tables and toolbars 14px like Sapo; names 15px;
   small dates 12px. Page titles (h1), card titles (h3), pills and badges keep their own sizes. !important because
   the per-page rules are more specific; this is the scale, not a one-off. */
:is(.orderDetailPage, .documentDetail, .supplierDetailPage, .productDetailPage, .customerDetailPage) :is(table th, table td, .metaRow, .customerLine,
  .supplierPhoneLine, .purchaseOrderPaymentStrip, .purchaseOrderStep strong, .stockTransferStep, .paginationFooter, .readonlyCheckbox,
  .customerChannelItem, .toolbarActions button, .supplierActionsMenu a, .supplierActionsMenu button) { font-size: 14px !important; }
:is(.orderDetailPage, .documentDetail, .supplierDetailPage) :is(.supplierNameLink, .supplierNameLine) { font-size: 15px !important; }
:is(.orderDetailPage, .documentDetail, .supplierDetailPage, .customerDetailPage) small { font-size: 12px; }

/* Đơn POS trước: the order's send to Sapo (renderPosOrderSend). */
.posOrderSend { display:flex; align-items:center; gap:12px; margin:0 0 12px; padding:10px 14px; border:1px solid #b2ddff; border-radius:8px; background:#eff8ff; color:#175cd3; font-size:14px; }
.posOrderSend.failed { border-color:#fecdca; background:#fef3f2; color:#b42318; }
.posOrderSend button { margin-left:auto; }
.posOrderSend.sourcingCancelNotice.done { border-color:#d0d5dd; background:#f9fafb; color:#475467; }

/* POS Chat → Chi tiết thanh toán like Sapo Social: ⊕ Chiết khấu / ⊕ Phí vận chuyển open the amount for typing. */
.socialOrderTotals .socialTotalsAdd { display:inline-flex; align-items:center; gap:6px; padding:0; min-height:0; border:0; background:none; color:#1677ff; font:inherit; cursor:pointer; }
.socialOrderTotals .socialTotalsAdd:disabled { color:#94a3b8; cursor:default; }
.socialOrderTotals .socialTotalsAdd i { display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; background:#1677ff; color:#fff; font-style:normal; font-weight:700; font-size:13px; line-height:1; }
.socialOrderTotals .socialTotalsAdd:disabled i { background:#94a3b8; }
.socialOrderTotals .socialTotalsInfo { color:#94a3b8; cursor:help; font-size:12px; }
.socialOrderTotals dd .socialMuted { color:#64748b; }

/* POS Chat → Tạo đơn / Sửa đơn / Giao hàng footer: the same square buttons as the order view's "Thao tác khác" /
   "Duyệt đơn" (owner 10/10/2026: Hủy was a rounded box and Lưu lại a pill). Two equal halves, 6px corners, 40px high. */
.socialMain .socialOrderFoot { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:10px; padding:10px 14px; }
.socialMain .socialOrderFoot > button, .socialMain .socialOrderFoot > .socialOrderSplit { flex:1 1 0; min-width:0; box-sizing:border-box; }
.socialMain .socialOrderFoot button.socialOrderCancel, .socialMain .socialOrderFoot button.socialCreateOrder, .socialMain .socialOrderFoot .socialCreateOrderMore {
  min-height:40px; margin:0; font-size:14.5px; font-weight:600; box-shadow:none; }
.socialMain .socialOrderFoot button.socialOrderCancel { border:1px solid #f3c1bd; border-radius:6px; padding:0 12px; background:#fff; color:var(--danger); }
.socialMain .socialOrderFoot > button.socialCreateOrder { border:0; border-radius:6px; padding:0 12px; background:#0088ff; color:#fff; }
.socialMain .socialOrderFoot .socialOrderSplit .socialCreateOrder { border:0; border-radius:6px 0 0 6px; padding:0 12px; background:#0088ff; }
.socialMain .socialOrderFoot .socialCreateOrderMore { border-radius:0 6px 6px 0; background:#0088ff; }
.socialMain .socialOrderFoot button:disabled { opacity:.6; cursor:default; }

/* Nút đồng bộ (owner 10/10/2026): one button shape across POS — 6px corners, 36px high (POS Chat's order panel 40px).
   These were the outliers: 3px corners in the list filter bars and Sổ quỹ toolbars, 48px buttons in three Cấu hình
   pages, and POS Chat's floating Tạo đơn at 48px / 16px. Chips, tabs and the option tiles keep their own shapes. */
.orderListMain .orderFilters :is(button, input, select), .cashbookVoucherList .ledgerFilters :is(button, input, select),
.cashbookVoucherList .toolbarActions .primaryAction, .poSaveFilter { border-radius: 6px; }
.orderSourceIntro .primaryAction, .cancelReasonTopActions button, .settingsDetailHeaderActions button { min-height: 36px; height: auto; }
.socialMain.omni .socialCreateOrder.floating { height: 40px; border-radius: 6px; font-size: 14.5px; }

/* POS Chat: the same customer wrote on another channel (renderOtherChannelNotice), over the composer. */
.socialOtherChannelNotice { display:flex; align-items:center; gap:8px; width:calc(100% - 24px); min-height:0; margin:6px 12px 0; padding:7px 12px; border:1px solid #fedf89; border-radius:8px; background:#fffaeb; color:#93370d; font-size:13px; font-weight:400; text-align:left; cursor:pointer; }
.socialOtherChannelNotice > span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.socialOtherChannelNotice > b { color:#175cd3; font-weight:600; }
.socialOtherChannelNotice:hover { background:#fef0c7; }

/* POS Chat order view: a cancelled order's last step is a red ✕ "Đã hủy". */
.socialOrderSteps li.cancelled { color:#d92d20; font-weight:600; }
.socialOrderSteps li.cancelled i { background:#d92d20; border-color:#d92d20; color:#fff; }
.socialOrderSteps li.cancelled::before { background:#f3c1bd; }

/* Kiểm hàng → Tạo phiếu kiểm hàng (stocktake-create-ui.js), Sapo's layout: action bar, Thông tin phiếu + Thông tin bổ
   sung, then the lines with Tất cả / Chưa kiểm / Khớp / Lệch. */
.stocktakeCreatePage { --stocktake-gutter: max(16px, calc((100% - 1016px) / 2)); padding: 0 var(--stocktake-gutter) 32px; min-height: 100vh; background: #f4f6f8; }
.stocktakeCreatePage .stocktakeActionBar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding: 8px 0; min-height: 56px;
  position: sticky; top: 0; z-index: 5; background: #fff; box-shadow: -50vw 0 #fff, 50vw 0 #fff; }
.stocktakeCreatePage .stocktakeActionBar > .linkButton { color: #637381; font-size: 14px; min-height: 0; padding: 0; }
.stocktakeCreatePage .stocktakeActionBar .toolbarActions { display: flex; gap: 8px; flex-wrap: wrap; }
.stocktakeCreatePage .error, .stocktakeCreatePage .notice { margin: 0 0 12px; }
/* Sửa phiếu kiểm: code, day and state above the cards, like Sapo's edit screen. */
.stocktakeEditTitle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.stocktakeEditTitle h1 { margin: 0; font-size: 22px; }
.stocktakeCreateGrid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; margin-bottom: 20px; }
.stocktakeCard { background: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); min-width: 0; }
.stocktakeCard > h3 { margin: 0; padding: 16px 20px; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--line); }
.stocktakeFields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; padding: 16px 20px 20px; }
.stocktakeFields.single { grid-template-columns: minmax(0, 1fr); }
.stocktakeField { display: grid; gap: 6px; font-size: 14px; color: var(--text); min-width: 0; }
.stocktakeField input, .stocktakeField select { width: 100%; min-width: 0; min-height: 38px; box-sizing: border-box; font-size: 14px; border-radius: 4px; }
.stocktakeTags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 38px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.stocktakeTags input { flex: 1 1 140px; border: 0; min-height: 32px; padding: 0 4px; }
.stocktakeTags .tagPill .linkButton { min-height: 0; padding: 0 0 0 4px; }
.stocktakeLines { overflow: visible; }
.stocktakeLines .stocktakeTabs { margin: 0; padding: 0 12px; border-bottom: 1px solid var(--line); background: #fff; flex-wrap: nowrap; overflow-x: auto; }
.stocktakeLines .stocktakeTabs .orderTab { flex: 0 0 auto; }
.stocktakeSearch { position: relative; padding: 14px 20px; }
.stocktakeSearch .search { width: 100%; box-sizing: border-box; min-height: 38px; }
.stocktakeSearchResults { position: absolute; left: 20px; right: 20px; top: calc(100% - 10px); z-index: 6; max-height: 360px; overflow: auto; background: #fff; border-radius: 4px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .18); }
.stocktakeSearchResults .empty { padding: 14px 16px; }
.stocktakeSearchRow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 56px; padding: 8px 16px; border: 0;
  border-radius: 0; background: #fff; text-align: left; }
.stocktakeSearchRow:hover, .stocktakeSearchRow:focus-visible { background: #f2f9ff; }
.stocktakeSearchRow img, .stocktakeSearchRow .stocktakeNoImage, .stocktakeThumb, .stocktakeLine .stocktakeNoImage { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; background: #f4f6f8; display: block; }
.stocktakeSearchName { display: grid; gap: 2px; min-width: 0; }
.stocktakeSearchName > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stocktakeSearchStock { color: #637381; font-size: 13px; white-space: nowrap; }
.stocktakeSearchStock .bad { color: var(--danger); }
.stocktakeTable { width: 100%; min-width: 900px; border-collapse: collapse; table-layout: auto; }
/* The shared table rules cut cells to one line and capitalise headings; Sapo shows them in full. */
.stocktakeTable th, .stocktakeTable td { overflow: visible; text-overflow: clip; text-transform: none; }
.stocktakeTable td { white-space: normal; }
.stocktakeTable td:nth-child(3) { min-width: 220px; }
.stocktakeTable .createLineName { white-space: normal; }
.stocktakeTable th { padding: 12px 10px; font-size: 14px; font-weight: 500; color: #212b36; background: #f4f6f8; text-align: left; white-space: nowrap; }
.stocktakeTable td { padding: 8px 10px; border-top: 1px solid var(--line); vertical-align: middle; }
.stocktakeTable .numberCell { text-align: center; }
.stocktakeTable .stocktakeSku { color: #637381; font-size: 13px; }
.stocktakeTable .stocktakeCount { width: 90px; min-height: 34px; text-align: center; border-width: 0 0 1px; border-radius: 0; }
.stocktakeTable select { min-height: 34px; max-width: 140px; font-size: 14px; border-radius: 4px; }
.stocktakeTable td:nth-child(9) input { width: 150px; min-height: 34px; font-size: 14px; border-radius: 4px; }
.stocktakeTable .stocktakeUp { color: var(--ok); }
.stocktakeTable .stocktakeDown { color: var(--danger); }
.stocktakeLine.highlight td { background: #f2f9ff; }
.stocktakeRemove { min-height: 0; font-size: 18px; color: #98a2ad; padding: 0 4px; }
.stocktakeEmpty { text-align: center; padding: 40px 16px !important; color: #637381; }
.stocktakeEmpty .emptyIcon { font-size: 40px; color: #c4cdd5; }
.stocktakeEmpty p { margin: 8px 0 0; }
.stocktakeLines .paginationFooter { padding: 10px 20px; }
@media (max-width: 760px) {
  .stocktakeCreateGrid, .stocktakeFields { grid-template-columns: minmax(0, 1fr); }
  .stocktakeSearchRow { grid-template-columns: 40px minmax(0, 1fr); }
  .stocktakeSearchStock { grid-column: 2; }
}

/* Chuyển kho → Tạo phiếu chuyển hàng, Điều chỉnh giá vốn → Tạo phiếu điều chỉnh (stock-document-create-ui.js): the page and
   cards of Tạo phiếu kiểm hàng (.stocktake*), plus Sapo's transfer footer (totals, Chi phí chuyển hàng). */
.stockDocLines > h3 { margin: 0; padding: 16px 20px 0; font-size: 16px; font-weight: 500; border-bottom: 0; }
.stockDocCreatePage .stocktakeField select:disabled { background: #f4f6f8; color: #637381; }
.stockDocTable .moneyCell { text-align: right; }
.stockDocTable .stockDocPrice { width: 140px; min-height: 34px; text-align: right; border-width: 0 0 1px; border-radius: 0; }
.stockDocTable.transferLines .stocktakeCount { width: 80px; }
.stockDocLines .stocktakeEmpty { display: grid; justify-items: center; gap: 8px; }
.stockDocLines .stocktakeEmpty button { min-width: 140px; color: var(--blue); border-color: var(--blue); background: #fff; }
.stockDocTotals { display: grid; justify-content: end; gap: 10px; padding: 16px 20px 20px; border-top: 1px solid var(--line); }
.stockDocTotals > div { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(110px, auto); gap: 24px; font-size: 14px; }
.stockDocTotals > div > :last-child { text-align: right; }
.stockDocTotals .stockDocCosts { grid-template-columns: minmax(220px, 1fr) minmax(110px, auto); padding-top: 10px; border-top: 1px solid var(--line); }
.stockDocTotals .stockDocCosts > strong, .stockDocTotals .stockDocCosts > .linkButton { grid-column: 1 / -1; justify-self: start; }
.stockDocTotals .stockDocCosts > .linkButton, .stockDocCostRow .linkButton { min-height: 0; padding: 0; }
.stockDocTotals .stockDocCosts > div { display: contents; }
.stockDocCostModal { width: min(560px, calc(100vw - 32px)); }
.stockDocCostModal .smallModalBody { display: grid; gap: 10px; }
.stockDocCostRow { display: grid; grid-template-columns: minmax(0, 1fr) 150px 28px; gap: 10px; align-items: center; }
.stockDocCostRow.head { font-size: 14px; color: #637381; }
.stockDocCostRow input { min-height: 38px; min-width: 0; border-radius: 4px; }
.stockDocCostRow.total > span:first-child { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
@media (max-width: 760px) {
  .stockDocTotals { justify-content: stretch; }
  .stockDocTotals > div, .stockDocTotals .stockDocCosts { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Đặt hàng nhập → Sửa đơn (order-supplier-edit-ui.js), on the stocktake create layout; the status bar of an edit not on
   Sapo yet on the order's page. */
.orderSupplierEditTitle { margin: 4px 0 16px; font-size: 22px; font-weight: 600; }
.orderSupplierEditSupplier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 16px; padding: 16px 20px 20px; }
.orderSupplierEditSupplier p { margin: 0 0 8px; }
.orderSupplierEditSupplier .supplierNameLine { color: var(--blue); font-size: 15px; }
.orderSupplierEditSupplier .supplierDebtBox { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--line); border-radius: 4px; }
.orderSupplierEditSupplier .supplierDebtBox div { display: flex; justify-content: space-between; gap: 12px; }
.orderSupplierEditNoteLine { display: flex; align-items: center; gap: 6px; min-height: 20px; }
.orderSupplierEditNoteLine .linkButton { min-height: 0; padding: 0 2px; color: var(--muted); }
.orderSupplierEditNote { width: 100%; margin-top: 4px; }
.orderSupplierEditSupplierSearch { padding: 16px 20px 20px; }
/* A supplier result has no picture: its name takes the row, not the 40px picture column ("Tâm US (K…" before). */
.orderSupplierEditSupplierSearch .stocktakeSearchRow { grid-template-columns: minmax(0, 1fr); }
.orderSupplierEditSupplier .supplierNameLine { display: flex; align-items: center; gap: 6px; }
.orderSupplierEditSupplier .supplierNameLine .linkButton { min-height: 0; padding: 0 4px; color: var(--muted); }
/* Sapo's discount box (Giá trị | %) under a line's Chiết khấu or the order's Chiết khấu (F6). */
.orderSupplierDiscountCell { position: relative; }
.orderSupplierEditTotals .orderSupplierDiscountCell { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.orderSupplierEditTotals .orderSupplierDiscountCell .linkButton { min-height: 0; padding: 0; }
.orderSupplierDiscountValue { display: inline-grid; justify-items: end; min-height: 0; padding: 2px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; font: inherit; color: inherit; cursor: pointer; min-width: 80px; }
.orderSupplierDiscountPercent { color: var(--danger); font-size: 12px; }
.orderSupplierDiscountBox { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: flex; gap: 12px; align-items: center; padding: 10px 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 12px rgba(15, 23, 42, .12); }
.orderSupplierDiscountTypes { display: inline-flex; border: 1px solid var(--blue); border-radius: 4px; overflow: hidden; }
.orderSupplierDiscountTypes button { min-height: 0; padding: 3px 10px; border: 0; border-radius: 0; background: #fff; color: var(--blue); white-space: nowrap; }
.orderSupplierDiscountTypes button.active { background: var(--blue); color: #fff; }
.orderSupplierDiscountBox input { width: 120px; text-align: right; }
/* Sửa đơn hàng: the line's Chiết khấu box (Giá trị | %) hangs below its row; the table does not clip it while open. */
.tableWrap.orderLineDiscountOpen { overflow: visible; }
/* Table cells clip their content (th, td overflow: hidden): this one lets its box out. */
.createProductTable td.orderSupplierDiscountCell { text-align: right; overflow: visible; }
.orderSupplierEditFixed { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; }
.orderSupplierEditFixed span { color: var(--muted); }
.orderSupplierEditFixed strong { font-weight: 400; }
/* Sapo's date pickers on the edit pages (sapo-date-picker-ui.js): Sửa đơn đặt hàng → Ngày nhập (times above the days),
   Sửa đơn nhập → Ngày hẹn giao / Ngày hoá đơn (half hours beside them). */
.sapoPicker { position: relative; }
.sapoPickerField { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border-radius: 4px; text-align: left; background: #fff; }
.sapoPickerField.pickerUnset span:first-child { color: var(--muted); }
.sapoPickerIcon { flex: none; width: 18px; height: 18px; background: var(--blue); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%225%22%20width%3D%2217%22%20height%3D%2215.5%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M3.5%2010h17M8%203v4M16%203v4M7.5%2014h2M11%2014h2M14.5%2014h2M7.5%2017h2M11%2017h2%22/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%225%22%20width%3D%2217%22%20height%3D%2215.5%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M3.5%2010h17M8%203v4M16%203v4M7.5%2014h2M11%2014h2M14.5%2014h2M7.5%2017h2M11%2017h2%22/%3E%3C/svg%3E") center/contain no-repeat; }
.sapoPickerBackdrop { position: fixed; inset: 0; z-index: 30; }
.sapoPickerPopup { position: absolute; right: 0; top: calc(100% + 4px); z-index: 31; width: 244px; padding: 10px 8px 6px; background: #fff;
  border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 12px rgba(15, 23, 42, .12); }
.sapoPickerPopup.withSide { display: grid; grid-template-columns: 228px 84px; gap: 8px; width: auto; }
.sapoPickerMonth { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sapoPickerMonth strong { font-weight: 600; }
.sapoPickerMonth button { min-height: 0; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: #eef6ff; color: var(--blue); line-height: 1; }
.sapoPickerTimes { display: flex; align-items: center; justify-content: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.sapoPickerTimes select { min-height: 30px; width: 84px; border-radius: 4px; padding: 0 6px; }
.sapoPickerGrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding-top: 6px; text-align: center; }
.sapoPickerGrid span { padding: 4px 0; color: var(--muted); font-size: 13px; }
.sapoPickerGrid button { min-height: 0; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; font-size: 13px; }
.sapoPickerGrid button:hover { background: #eef6ff; border-color: transparent; }
.sapoPickerGrid button.pickerOtherMonth { color: #b8bcc4; }
.sapoPickerGrid button.pickerToday { border-color: var(--line); }
.sapoPickerGrid button.pickerChosen { background: var(--blue); border-color: var(--blue); color: #fff; }
.sapoPickerSide { display: grid; align-content: start; gap: 6px; max-height: 268px; overflow-y: auto; padding-right: 2px; }
.sapoPickerSide button { min-height: 0; height: 34px; padding: 0; border-radius: 4px; font-size: 13px; }
.sapoPickerSide button.pickerChosen { background: var(--blue); border-color: var(--blue); color: #fff; }
/* Sửa đơn nhập (purchase-order-edit-ui.js): the lines are changed on Sapo. */
.purchaseOrderEditLinesHint { margin: -4px 0 10px; }
.orderSupplierEditPage textarea { width: 100%; font: inherit; }
.orderSupplierEditQty { display: inline-flex; align-items: center; gap: 4px; }
.orderSupplierEditQty .linkButton { min-height: 0; width: 22px; height: 22px; padding: 0; border-radius: 50%; }
.orderSupplierEditQty input { width: 64px; text-align: center; }
.orderSupplierEditTable .stockDocPrice { width: 120px; text-align: right; }
.orderSupplierEditTotals { display: grid; gap: 10px; align-content: start; padding: 16px 20px 20px; }
.orderSupplierEditTotals div { display: flex; justify-content: space-between; gap: 12px; }
/* Ghi chú đơn / totals under the product list: the same 20px gap as between the top cards and the list (owner 11/10/2026). */
.orderSupplierEditBottom { margin-top: 20px; }
.orderSupplierEditStatus { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 12px 18px; padding: 10px 12px; border-radius: 6px;
  color: #8a5a00; background: #fff8e6; border: 1px solid #f5d48a; }
.orderSupplierEditStatus > div:first-child { display: grid; gap: 2px; }
.orderSupplierEditStatus.conflict { color: var(--danger); background: #fff1ef; border-color: #ffd1cc; }
@media (max-width: 760px) {
  .orderSupplierEditSupplier { grid-template-columns: minmax(0, 1fr); }
  .orderSupplierEditStatus { flex-direction: column; align-items: stretch; }
}
/* Nhập hàng từ đơn đặt (purchase-from-order-supplier-ui.js), as Sapo's: labels left of the controls, "Tách dòng" beside the
   title, the price list beside the search, what is still ordered under SL nhập, the Chi phí nhập hàng rows. */
.purchaseFromOrderPage .orderSupplierEditTitle a { color: var(--blue); }
.purchaseFromOrderInfo .stocktakeField { grid-template-columns: 140px minmax(0, 1fr); align-items: center; }
.purchaseFromOrderLinesHead { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-right: 20px; border-bottom: 1px solid var(--line); }
.purchaseFromOrderLinesHead h3 { margin: 0; padding: 16px 20px; font-size: 16px; font-weight: 500; }
.purchaseFromOrderTools { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 12px; align-items: center; padding-right: 20px; }
.purchaseFromOrderTools select { min-height: 38px; border-radius: 4px; }
.purchaseFromOrderOrdered { margin-top: 2px; color: var(--muted); font-size: 13px; text-align: center; }
/* The supplier's order link of a line (line-note-url.js): a link icon beside the SKU, grey without a link, blue with one
   (a mask, so it takes the colour); on the edit pages it opens a box with the address and ↗. */
.lineUrlButton { display: inline-block; flex: none; width: 16px; height: 16px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: #a3a8af;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71%22%2F%3E%3Cpath%20d%3D%22M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71%22%2F%3E%3Cpath%20d%3D%22M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; cursor: pointer; align-self: center; }
.lineUrlButton.hasUrl { background: var(--blue); }
.lineUrlButton:hover { background: var(--blue); opacity: .75; }
.lineUrlButton:disabled { cursor: default; opacity: .5; }
.lineUrlBox { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.lineUrlBox input { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.lineUrlOpen { flex: none; color: var(--blue); font-size: 16px; text-decoration: none; }
/* The order modal of a line (supplier-invoices-ui.js): its link and the invoice tiles (pictures / PDF), + to attach. */
.lineUrlWithCount { display: inline-flex; align-items: center; gap: 3px; }
.lineInvoiceCount { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #e6f4ff; color: var(--blue); font-size: 11px; line-height: 16px; text-align: center; }
.supplierInvoiceModal { width: min(680px, calc(100vw - 32px)); }
.supplierInvoiceBody { display: grid; gap: 16px; }
.supplierInvoiceBody .lineUrlBox { margin-top: 0; }
.supplierInvoiceBody .lineUrlBox input { min-height: 38px; }
.invoiceUrlText { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.invoiceGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.invoiceTile { position: relative; display: grid; gap: 2px; min-width: 0; }
.invoiceTileView { display: grid; place-items: center; width: 100%; height: 120px; min-height: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: #f8f9fa; cursor: zoom-in; }
.invoiceTileView img { width: 100%; height: 100%; object-fit: cover; }
.invoicePdf { color: var(--muted); font-weight: 600; }
.invoiceTileName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.invoiceTileMeta { font-size: 12px; }
.invoiceRemove { position: absolute; top: 4px; right: 4px; min-height: 0; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: rgba(255, 255, 255, .92); color: var(--muted); }
.invoiceRemove.confirm { color: var(--danger); font-weight: 600; }
.invoiceAdd { display: grid; place-content: center; justify-items: center; gap: 4px; height: 120px; min-height: 0; border: 1px dashed var(--blue); border-radius: 4px; background: #fff; color: var(--blue); }
.invoiceAdd:disabled { border-color: var(--line); color: var(--muted); }
.invoiceAddPlus { font-size: 24px; line-height: 1; }
.invoiceHint { margin: 6px 0 0; font-size: 13px; }
/* ⓘ of a document line by the stock at its branch: none to sell but some on the way, none at all (blue otherwise). */
.orderSupplierLineInfo.stockIncoming { color: #ffae06; }
.orderSupplierLineInfo.stockOut { color: #ee4747; }
.purchaseFromOrderPage .orderSupplierEditTotals .purchaseFromOrderCostsTitle { font-weight: 500; }
.orderSupplierEditTotals .purchaseFromOrderCost { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; gap: 8px; align-items: center; }
.purchaseFromOrderCost input { min-width: 0; min-height: 32px; }
.purchaseFromOrderCost input[inputmode] { text-align: right; }
.purchaseFromOrderAddCost { justify-self: start; min-height: 0; padding: 0; }
@media (max-width: 760px) {
  .purchaseFromOrderInfo .stocktakeField, .purchaseFromOrderTools { grid-template-columns: minmax(0, 1fr); }
  .purchaseFromOrderTools { padding: 0 20px 12px 0; }
}

/* Chuyển hàng → » opens the transfer under its row, Sapo's layout (renderStockTransferExpandedRow, on the order list's
   .orderExpand* frame): Thông tin phiếu chuyển hàng + Ghi chú / Tags, then the lines and Sapo's totals. */
/* One » for every list (Đơn hàng, Vận đơn, Nhập hàng, Đặt hàng nhập, Chuyển hàng, Điều chỉnh giá vốn), like Sapo's: grey
   », ︾ in blue on a light circle once open. */
.listRowToggle { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; min-width: 0; min-height: 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: #8c95a1; font-size: 17px; line-height: 1; }
.listRowToggle:hover { background: #f0f3f7; color: #212b36; }
.listRowToggle.open { color: var(--blue); background: #e6f2ff; }
/* Nhập hàng / Đặt hàng nhập → » (renderSupplierDocumentExpandedRow): Thông tin đơn | Nhà cung cấp | Ghi chú, Tags, then
   Sapo's buttons in a column on the right. */
.supplierDocExpandTop { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 24px; align-items: start; }
.supplierDocExpandCard { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.supplierDocExpandCard .orderExpandMeta > span:first-child { min-width: 110px; }
.supplierDocExpandCard .supplierDocExpandSupplier p { margin: 4px 0 0; }
/* The name column takes the room: the order list's frame sets column 3 (its SKU) to 160px on one line and column 4 (its name) to 34%. */
.supplierDocExpandProducts th.orderExpandLineName, .supplierDocExpandProducts td.orderExpandLineName { width: 34%; white-space: normal; }
.supplierDocExpandProducts th:nth-child(4):not(.orderExpandLineName) { width: auto; }
.supplierDocExpandNote { padding-left: 24px; border-left: 1px solid var(--line); }
.supplierDocExpandNote p { margin: 0 0 12px; }
.supplierDocExpandActions { display: grid; gap: 10px; }
.supplierDocExpandActions button { width: 100%; }
@media (max-width: 760px) {
  .supplierDocExpandTop, .supplierDocExpandCard { grid-template-columns: minmax(0, 1fr); }
  .supplierDocExpandNote { padding-left: 0; border-left: 0; }
}
.transferExpandTop { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(260px, 1fr); gap: 32px; align-items: stretch; }
.transferExpandCard { min-width: 0; padding: 20px 24px; background: #fff; border-radius: 4px; white-space: normal; }
.transferExpandCard h4 { margin: 0 0 14px; font-size: 15px; font-weight: 500; }
.transferExpandCard p { margin: 0 0 18px; line-height: 1.5; }
.transferExpandGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.transferExpandProducts .moneyCell { text-align: right; }
.transferExpandProducts .numberCell { text-align: center; }
.transferExpandTotals > div + div { margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--line); }
.costExpandedRow .costUp { color: var(--ok); }
.costExpandedRow .costDown { color: var(--danger); }
@media (max-width: 760px) {
  .transferExpandTop, .transferExpandGrid { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Sapo look (owner 10/10/2026: "Chỉnh lại toàn bộ frame và style của POS sao cho gần giống với Sapo nhất") =====
   Measured on shopwm2.mysapogo.com: system font, ink #0f1824, muted #747c87, page #f0f1f1, control borders #d3d5d7,
   white cards r3 with a soft shadow and no border, 36px buttons r3 (500), table heads #f4f6f8 14px/500, detail and create
   pages at most 1366px wide with 32px sides. Kept last so it restyles the shared parts over the older page rules. */
:root {
  --bg: #f0f1f1;
  --text: #0f1824;
  --ink: #0f1824;
  --muted: #747c87;
  --line: #e3e5e8;
  --blue: #0088ff;
  --sapo-border: #d3d5d7;
  --sapo-divider: #e8eaeb;
  --sapo-shadow: 0 2px 4px rgba(168, 168, 168, 0.25);
  --shadow: var(--sapo-shadow);
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
}
a { color: #0088ff; }

/* Buttons: 36px, r3, grey border; primary blue, secondary blue outline, danger red outline (Sapo hover tints). */
button { border-radius: 3px; border-color: var(--sapo-border); }
.primaryAction, .secondaryAction, .dangerButton { font-weight: 500; border-radius: 3px; padding-left: 16px; padding-right: 16px; }
.primaryAction { background: #0088ff; border-color: #0088ff; color: #fff; }
.primaryAction:hover:not(:disabled) { background: #33a0ff; border-color: #33a0ff; }
.secondaryAction:hover:not(:disabled) { background: #e6f4ff; }
.dangerButton { color: #ff4d4d; border-color: #ff4d4d; }
.dangerButton:hover:not(:disabled) { background: #fff1f1; }
:is(.detailActions, .toolbarActions, .inlineActions, .cardActions, .detailCardHeader, .settingsDetailHeaderActions) > button:not(.linkButton):not(.iconButton):not(.columnSettingsGear) { font-weight: 500; }

/* Inputs: r3, Sapo grey border, blue when focused. Element-level so any page rule still wins. */
input:where(:not([type=checkbox]):not([type=radio]):not([type=range])), select, textarea { border-radius: 3px; border-color: var(--sapo-border); }
input:where(:not([type=checkbox]):not([type=radio]):not([type=range])):focus, select:focus, textarea:focus { border-color: #0088ff; }

/* Tables: grey head 14px/500 in ink, no capitals; light row lines. */
.workspace th { color: var(--text); background-color: #f4f6f8; font-size: 14px; font-weight: 500; text-transform: none; }
.workspace td { border-bottom-color: var(--sapo-divider); }

/* Cards: white, r3, soft shadow, no visible border; headers split by a faint line. */
.workspace :is(.detailCard, .productPanel, .stocktakeCard, .orderSummary, .productInventoryPanel, .variantListCard, .purchaseOrderProductsPanel,
  .stockAdjustmentLinesPanel, .stockTransferProductsPanel, .priceAdjustmentProductsPanel, .customerDetailTabsPanel, .content:not(.ordersContent)) {
  border-color: transparent;
  border-radius: 3px;
  box-shadow: var(--sapo-shadow);
}
.workspace :is(.detailCardHeader, .productPanelHeader) { border-bottom-color: var(--sapo-divider); }
.workspace :is(.detailCardHeader h3, .productPanelHeader h3) { color: var(--text); font-weight: 500; }

/* Top bars of detail and create pages: white, 52px; the back link grey, actions outlined like Sapo. */
.workspace :is(.orderActionBar, .createActionBar) { min-height: 52px; border-bottom-color: var(--sapo-divider); box-shadow: 0 1px 2px rgba(168, 168, 168, 0.2); }
.workspace .orderActionBar > :is(button, span):first-child:not(.primaryAction) { color: var(--muted); font-weight: 500; padding-left: 0; }
.workspace :is(.orderActionBar, .createActionBar) :is(.detailActions, .toolbarActions) > :is(button, a):not(.primaryAction):not(.dangerButton):not(.dangerOutlineButton):not(:disabled) {
  border-color: #0088ff;
  color: #0088ff;
  background: #fff;
}
.workspace :is(.orderActionBar, .createActionBar) :is(.detailActions, .toolbarActions) > button:not(.primaryAction):not(.dangerButton):not(.dangerOutlineButton):hover:not(:disabled) { background: #e6f4ff; }
.workspace :is(.orderActionBar, .createActionBar) :is(.detailActions, .toolbarActions) > :is(.dangerButton, .dangerOutlineButton):not(:disabled) { border-color: #ff4d4d; color: #ff4d4d; background: #fff; }

/* Frame: detail and create pages keep Sapo's 1366px content (1302 + 32px sides), centred on wide screens; the top bar
   still spans the whole width (white copies left and right, like Tạo đơn hàng's --order-gutter bar). */
.workspace > :is(.orderDetailPage, .documentDetail, .productDetailPage, .customerDetailPage, .stocktakeCreatePage, .customerCreatePage) {
  --order-gutter: max(24px, calc((100% - 1302px) / 2));
  padding-left: var(--order-gutter);
  padding-right: var(--order-gutter);
}
.workspace > :is(.orderDetailPage, .documentDetail, .productDetailPage, .customerDetailPage, .stocktakeCreatePage, .customerCreatePage) > .orderActionBar {
  margin-left: calc(-1 * var(--order-gutter));
  margin-right: calc(-1 * var(--order-gutter));
  padding-left: var(--order-gutter);
  padding-right: var(--order-gutter);
}
.workspace > main > :is(.orderActionBar, .createActionBar) {
  box-shadow: -40vw 0 #fff, 40vw 0 #fff, -40vw 1px var(--sapo-divider), 40vw 1px var(--sapo-divider), 0 1px 2px rgba(168, 168, 168, 0.2);
}

/* Search boxes carry Sapo's magnifier on the left. */
.workspace input.search { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a3a8af' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.8-4.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px center; padding-left: 38px; }
.deliveryCollationShipmentTools input.search { background-image: none; }

/* Tạo đơn hàng like Sapo: no header lines, cards of one height, search joined to "Chọn nhanh", an empty box without a
   table head, the service/promotion row, plain totals with underlined fields, outlined "Thoát". */
.orderSectionShell .workspace .orderCreatePage .detailCardHeader { border-bottom-color: transparent; }
.orderSectionShell .workspace .orderCreatePage .orderCreateTopGrid { align-items: stretch; }
.orderSectionShell .workspace .orderCreatePage input.search { padding-left: 38px; }
.workspace .orderCreatePage .createCustomerCard .emptyIcon { width: 64px; height: 52px; margin: 12px 0 10px; font-size: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 52'%3E%3Crect x='3' y='3' width='58' height='46' rx='4' fill='none' stroke='%23d9dde3' stroke-width='5'/%3E%3Ccircle cx='22' cy='21' r='7' fill='%23d9dde3'/%3E%3Cpath d='M10 41c1-8 6-11 12-11s11 3 12 11z' fill='%23d9dde3'/%3E%3Crect x='38' y='17' width='16' height='5' rx='1' fill='%23d9dde3'/%3E%3Crect x='38' y='28' width='16' height='5' rx='1' fill='%23d9dde3'/%3E%3C/svg%3E") center / contain no-repeat; }
.orderSectionShell .workspace .orderCreatePage .productSearchLine { grid-template-columns: minmax(0, 1fr) auto auto minmax(120px, 140px); gap: 0; padding: 0 16px 16px; border-bottom: 0; align-items: center; }
.orderSectionShell .workspace .orderCreatePage .productSearchLine .productSearchWrap input.search { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.orderSectionShell .workspace .orderCreatePage .productSearchLine > button:nth-child(2) { margin-left: -1px; padding: 0 20px; border-radius: 0 3px 3px 0; font-weight: 500; }
.orderSectionShell .workspace .orderCreatePage .productSearchLine > button:nth-child(3),
.orderSectionShell .workspace .orderCreatePage .productSearchLine > select { margin-left: 12px; }
.workspace .orderCreatePage .orderCreateEmptyProducts { display: grid; justify-items: center; gap: 10px; padding: 20px 16px 28px; color: var(--muted); }
.workspace .orderCreatePage .orderCreateEmptyProducts p { margin: 0; }
.workspace .orderCreatePage .emptyBoxIcon { width: 72px; height: 72px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='%23d9dde3'%3E%3Cpath d='M36 14 14 23l22 9 22-9z'/%3E%3Cpath d='M12 27v24l22 10V37z'/%3E%3Cpath d='M60 27v24L38 61V37z'/%3E%3Cpath d='M14 23 6 31l22 9 8-8zM58 23l8 8-22 9-8-8z' fill='%23e6e9ed'/%3E%3C/svg%3E") center / contain no-repeat; }
.workspace .orderCreatePage .createProductTable th { height: 42px; padding: 10px 12px; background: #f3f4f5; font-size: 14px; }
.workspace .orderCreatePage .createProductTable th.numberCell { text-align: center; }
.workspace .orderCreatePage .createProductTable th.moneyCell { text-align: right; }
.workspace .orderCreatePage .orderCreateExtrasRow { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--sapo-divider); border-bottom: 1px solid var(--sapo-divider); }
.workspace .orderCreatePage .orderCreateExtrasRow .linkButton { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 28px; margin: 0; color: #0088ff; }
.workspace .orderCreatePage .orderCreateExtrasRow .linkButton::before { content: ""; width: 20px; height: 20px; background: center / contain no-repeat; }
.workspace .orderCreatePage .orderCreateExtrasRow .addServiceLink::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230088ff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v9M7.5 12h9'/%3E%3C/svg%3E"); }
.workspace .orderCreatePage .orderCreateExtrasRow .promoLink::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230088ff'%3E%3Cpath d='M3 8h18v4H3zM4.5 13h6v8h-6zM13.5 13h6v8h-6zM10.5 8h3v13h-3z'/%3E%3Cpath d='M12 8C10 4 6.5 3.5 6 5.5S9 8 12 8zm0 0c2-4 5.5-4.5 6-2.5S15 8 12 8z' fill='none' stroke='%230088ff' stroke-width='1.6'/%3E%3C/svg%3E"); }
.orderSectionShell .workspace .orderCreatePage .orderCreateBelowGrid { border-top: 0; padding-top: 16px; }
.workspace .orderCreatePage .orderCreateBelowGrid .totals { padding: 0; }
.workspace .orderCreatePage .orderCreateBelowGrid .totals .summaryLine { min-height: 30px; }
.workspace .orderCreatePage .orderCreateBelowGrid .totals .summaryLine strong { font-weight: 400; }
.workspace .orderCreatePage .orderCreateBelowGrid .totals .summaryTotalLine { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--sapo-divider); }
.workspace .orderCreatePage .orderCreateBelowGrid .totals .summaryTotalLine > * { font-weight: 500; }
.workspace .orderCreatePage .orderCreateBelowGrid .totals .summaryTotalLine strong { font-size: 15.75px; }
.workspace .orderCreatePage .orderCreateBelowGrid .totals .summaryDueLine { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--sapo-divider); }
.workspace .orderCreatePage .orderCreateBelowGrid .totals .summaryDueLine span { font-weight: 500; }
.workspace .orderCreatePage .totals .summaryButtonLine { color: var(--text); padding: 4px 0; min-height: 30px; }
.workspace .orderCreatePage .totals .summaryButtonLine strong { justify-self: end; width: 110px; padding-bottom: 4px; border-bottom: 1px solid var(--sapo-border); font-weight: 400; }
.workspace .orderCreatePage .totals .summaryInputLine span { color: #0088ff; }
.orderSectionShell .workspace .orderCreatePage .totals .summaryInputLine input { justify-self: end; width: 110px; min-height: 30px; padding: 0 0 4px; border-width: 0 0 1px; border-radius: 0; background: transparent; }
.workspace .orderCreatePage .orderCreateFooter > button:not(.primaryAction) { border-color: #0088ff; color: #0088ff; font-weight: 500; }
@media (max-width: 800px) {
  .orderSectionShell .workspace .orderCreatePage .productSearchLine { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .orderSectionShell .workspace .orderCreatePage .productSearchLine > button:nth-child(3) { margin-left: 0; }
  .workspace .orderCreatePage .orderCreateExtrasRow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* Tạo đơn hàng, second pass: totals as wide as Sapo's column, the empty customer box centred, Sapo's scanner button and
   delivery icons (masks take the text colour: grey, blue when chosen). */
.workspace .orderCreatePage .orderCreateBelowGrid .totals { justify-content: stretch; }
.workspace .orderCreatePage .createCustomerCard { display: flex; flex-direction: column; }
.workspace .orderCreatePage .createCustomerCard > .detailCardBody { flex: 1; display: flex; flex-direction: column; }
.workspace .orderCreatePage .createCustomerCard > .detailCardBody > .productSearchWrap { flex: 1; display: flex; flex-direction: column; }
.workspace .orderCreatePage .createCustomerCard .supplierEmptyState { flex: 1; }
.barcodeModeButton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 400; }
.barcodeModeButton::before { content: ""; width: 18px; height: 18px; background-color: var(--muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10v7l-2 3H9L7 10z'/%3E%3Cpath d='M9 6.5h6M10 13v8M14 13v8'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10v7l-2 3H9L7 10z'/%3E%3Cpath d='M9 6.5h6M10 13v8M14 13v8'/%3E%3C/svg%3E") center / contain no-repeat; }
.barcodeModeButton::after { content: ""; border: 4px solid transparent; border-top: 5px solid var(--muted); border-bottom: 0; margin-left: 2px; }
.shippingModeTabs button[data-mode] { display: inline-flex; align-items: center; gap: 8px; }
.shippingModeTabs button[data-mode]::before { content: ""; flex: none; width: 22px; height: 22px; background-color: var(--muted); }
.shippingModeTabs button.active[data-mode]::before { background-color: #0088ff; }
.shippingModeTabs button[data-mode=carrier]::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='11' height='9.5' rx='1'/%3E%3Cpath d='M13.5 9.5h4l3 3.2v2.8h-7'/%3E%3Ccircle cx='6.5' cy='17.5' r='1.8'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.8'/%3E%3Cpath d='M5.5 10.5l2 1.5 3-3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='11' height='9.5' rx='1'/%3E%3Cpath d='M13.5 9.5h4l3 3.2v2.8h-7'/%3E%3Ccircle cx='6.5' cy='17.5' r='1.8'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.8'/%3E%3Cpath d='M5.5 10.5l2 1.5 3-3'/%3E%3C/svg%3E") center / contain no-repeat; }
.shippingModeTabs button[data-mode=external]::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='17' r='2.6'/%3E%3Ccircle cx='18.5' cy='17' r='2.6'/%3E%3Cpath d='M8 17h7.5l-2.5-8H9.5M13 9h3.5l2 5.5M4 12.5h5l1.5 2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='17' r='2.6'/%3E%3Ccircle cx='18.5' cy='17' r='2.6'/%3E%3Cpath d='M8 17h7.5l-2.5-8H9.5M13 9h3.5l2 5.5M4 12.5h5l1.5 2'/%3E%3C/svg%3E") center / contain no-repeat; }
.shippingModeTabs button[data-mode=pickup]::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5 5 4.5h14l1.5 5'/%3E%3Cpath d='M4.5 9.5V20h15V9.5'/%3E%3Cpath d='M3.5 9.5c0 1.5 1.2 2.5 2.7 2.5s2.6-1 2.6-2.5c0 1.5 1.3 2.5 2.7 2.5s2.6-1 2.6-2.5c0 1.5 1.3 2.5 2.7 2.5s2.7-1 2.7-2.5'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5 5 4.5h14l1.5 5'/%3E%3Cpath d='M4.5 9.5V20h15V9.5'/%3E%3Cpath d='M3.5 9.5c0 1.5 1.2 2.5 2.7 2.5s2.6-1 2.6-2.5c0 1.5 1.3 2.5 2.7 2.5s2.6-1 2.6-2.5c0 1.5 1.3 2.5 2.7 2.5s2.7-1 2.7-2.5'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E") center / contain no-repeat; }
.shippingModeTabs button[data-mode=later]::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7' width='10' height='8.5' rx='1'/%3E%3Cpath d='M12.5 10h3.2l2.3 2.6v2.9h-5.5'/%3E%3Ccircle cx='6' cy='17.5' r='1.7'/%3E%3Ccircle cx='15' cy='17.5' r='1.7'/%3E%3Ccircle cx='18' cy='6.5' r='4'/%3E%3Cpath d='M18 4.8v1.9l1.3 1'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7' width='10' height='8.5' rx='1'/%3E%3Cpath d='M12.5 10h3.2l2.3 2.6v2.9h-5.5'/%3E%3Ccircle cx='6' cy='17.5' r='1.7'/%3E%3Ccircle cx='15' cy='17.5' r='1.7'/%3E%3Ccircle cx='18' cy='6.5' r='4'/%3E%3Cpath d='M18 4.8v1.9l1.3 1'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 1200px) {
  .workspace .orderCreatePage .orderCreateExtrasRow { grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
}
@media (max-width: 800px) {
  .workspace .orderCreatePage .orderCreateExtrasRow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
/* The customer search's × and suggestions belong to the input, not to the whole (now card-high) box below it. */
.workspace .orderCreatePage .createCustomerCard .productSearchWrap > .clearSearchButton { top: 18px; }
.workspace .orderCreatePage .createCustomerCard .productSearchWrap > .customerSuggestDropdown { top: 44px; }
/* Tạo đơn hàng, chosen customer like Sapo: no dashed frame; name - phone × under the title over a full-width line; the
   address on the left; the stats in a dashed box with plain figures (debt red, spending blue, returns and failures red). */
.orderSectionShell .workspace .orderCreatePage .createCustomerCard > .detailCardBody:has(> .createCustomerCompact) { padding: 0 16px 16px; }
.workspace .orderCreatePage .createCustomerCompact { border: 0; border-radius: 0; padding: 0; column-gap: 24px; row-gap: 14px; }
.workspace .orderCreatePage .createCustomerCompact > .createCustomerName { grid-column: 1 / -1; margin: 0 -16px; padding: 0 16px 14px; border-bottom: 1px solid var(--sapo-divider); }
.workspace .orderCreatePage .createCustomerCompact .createCustomerName :is(a, strong) { font-size: 15.75px; font-weight: 500; }
.workspace .orderCreatePage .createCustomerCompact .createCustomerMain > p:first-child { margin-top: 0; }
.workspace .orderCreatePage .createCustomerCompact .supplierStatsBox { margin: 0; padding: 8px 12px; gap: 2px; border: 1px dashed #c4cdd5; border-radius: 3px; max-width: none; }
.workspace .orderCreatePage .createCustomerCompact .supplierStatsBox .summaryLine { min-height: 28px; }
.workspace .orderCreatePage .createCustomerCompact .supplierStatsBox .summaryLine strong { font-weight: 400; color: #ff4d4d; }
.workspace .orderCreatePage .createCustomerCompact .supplierStatsBox .summaryLine:nth-child(2) strong { color: #0088ff; }

/* Sapo status badges: one look per status name (status-pills.js), POS Chat's order chips (.socialOrderStatus) too. */
.pill { font-size: 13px; border-width: 1px; }
:is(.pill, .socialOrderStatus).purple { color: #5364fe; background: #eef2fd; border-color: #bac1ff; }
:is(.pill, .socialOrderStatus).orange { color: #e49c06; background: #fff7e7; border-color: #ffdf9b; }
:is(.pill, .socialOrderStatus).green { color: #0db473; background: #f3fcf9; border-color: #9fedcf; }
:is(.pill, .socialOrderStatus).red { color: #ee4747; background: #fff6f6; border-color: #ffb8b8; }
/* Chờ lấy hàng blue, Chưa nhập grey; a badge without a colour is grey too. */
:is(.pill, .socialOrderStatus).blue { color: #0088ff; background: #f2f9ff; border-color: #99cfff; }
.pill, :is(.pill, .socialOrderStatus).gray { color: #747c87; background: #f3f4f5; border-color: #cfd1d3; }
/* Đặt giá On Sale (Xử lý đơn hàng), the product page's On Sale orange (app.js PRICE_MODE_COLORS.sale). */
.pill.sale { color: #e8590c; background: #fff4e6; border-color: #ffc078; }

/* Chi tiết đơn hàng like Sapo: card icons, no line under the customer title, the stats box dashed with Sapo's colours,
   "Nhãn : giá trị" rows, timeline circles, In đơn hàng / Sao chép with icons. */
.workspace .orderDetailPage .customerInfoCard .detailCardHeader { border-bottom-color: transparent; }
.workspace :is(.invoiceInfoCard, .paymentInfoCard, .shippingInfoCard) .detailCardHeader h3 { display: inline-flex; align-items: center; gap: 10px; }
.workspace :is(.invoiceInfoCard, .paymentInfoCard, .shippingInfoCard) .detailCardHeader h3::before { content: ""; width: 20px; height: 20px; flex: none; background-color: #a3a8af; }
.workspace .orderDetailPage .detailCardBody > .orderCustomerStats { border: 1px dashed #a3a8af; border-radius: 5px; }
.workspace .orderDetailPage .orderCustomerStats .metaRow > span { font-size: 13px; }
.workspace .orderDetailPage .orderCustomerStats .metaRow:is(:nth-child(1), :nth-child(4), :nth-child(5)) strong { color: #ff4d4d; }
.workspace .orderDetailPage .orderSideColumn .detailCardBody > .metaRow > strong::before { content: ": "; }
.workspace .orderDetailPage .orderSideColumn .detailCardBody > .metaRow > :is(span, strong) { color: var(--text); }
.workspace .timelineStep span { width: 22px; height: 22px; font-size: 12px; background: #fff; color: rgba(0, 0, 0, 0.38); border: 1.5px solid rgba(0, 0, 0, 0.38); }
.workspace .timelineStep.active span { background: #0088ff; color: #fff; border-color: #0088ff; }
.workspace .timelineStep.cancelled > span { background: #ff4d4f; border-color: #ff4d4f; color: #fff; }
.workspace .timelineStep strong { font-weight: 400; color: var(--muted); }
.workspace .timelineStep.active strong { color: var(--text); }
.workspace .timelineStep small { font-size: 12px; color: var(--muted); }
.workspace :is(.printButton, .copyButton) { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.workspace :is(.printButton, .copyButton)::before { content: ""; width: 18px; height: 18px; flex: none; background-color: var(--muted); }
.workspace .printButton::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8V3.5h10V8'/%3E%3Crect x='3.5' y='8' width='17' height='8.5' rx='1.5'/%3E%3Cpath d='M7 14h10v6.5H7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8V3.5h10V8'/%3E%3Crect x='3.5' y='8' width='17' height='8.5' rx='1.5'/%3E%3Cpath d='M7 14h10v6.5H7z'/%3E%3C/svg%3E") center / contain no-repeat; }
.workspace .copyButton::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='8.5' width='12' height='12' rx='1.5'/%3E%3Cpath d='M15.5 8.5v-4a1 1 0 0 0-1-1h-10a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='8.5' width='12' height='12' rx='1.5'/%3E%3Cpath d='M15.5 8.5v-4a1 1 0 0 0-1-1h-10a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h4'/%3E%3C/svg%3E") center / contain no-repeat; }
.workspace .orderPrintActions > .printButton { border-radius: 3px 0 0 3px; }
.workspace .orderPrintActions > .printMenuButton { margin-left: -7px; border-radius: 0 3px 3px 0; color: var(--muted); }
.workspace .orderPrintActions > .copyButton { margin-left: 6px; }
.workspace .centerLink[aria-expanded]::after { content: ""; display: inline-block; margin-left: 8px; vertical-align: 2px; border: 4px solid transparent; border-top: 5px solid currentColor; border-bottom: 0; }
.workspace .centerLink[aria-expanded=true]::after { border-top: 0; border-bottom: 5px solid currentColor; }
/* Card icons as outlines (a mask keeps only the shape). */
.workspace .invoiceInfoCard .detailCardHeader h3::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 2.5h13v19l-2.2-1.4-2.1 1.4-2.2-1.4-2.2 1.4-2.1-1.4-2.2 1.4z'/%3E%3Cpath d='M8.5 7.5h7M8.5 11h7M8.5 14.5h4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 2.5h13v19l-2.2-1.4-2.1 1.4-2.2-1.4-2.2 1.4-2.1-1.4-2.2 1.4z'/%3E%3Cpath d='M8.5 7.5h7M8.5 11h7M8.5 14.5h4'/%3E%3C/svg%3E") center / contain no-repeat; }
.workspace .paymentInfoCard .detailCardHeader h3::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M5.5 9v0M18.5 15v0'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M5.5 9v0M18.5 15v0'/%3E%3C/svg%3E") center / contain no-repeat; }
.workspace .shippingInfoCard .detailCardHeader h3::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='11' height='9.5' rx='1'/%3E%3Cpath d='M13.5 9.5h4l3 3.2v2.8h-7'/%3E%3Ccircle cx='6.5' cy='17.5' r='1.8'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.8'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='11' height='9.5' rx='1'/%3E%3Cpath d='M13.5 9.5h4l3 3.2v2.8h-7'/%3E%3Ccircle cx='6.5' cy='17.5' r='1.8'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.8'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Lists: "Xuất file" / "Nhập file" with Sapo's arrows. */
.workspace :is(.fileExportButton, .fileImportButton) { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.workspace :is(.fileExportButton, .fileImportButton)::before { content: ""; width: 18px; height: 18px; flex: none; background-color: var(--muted); }
.workspace .fileExportButton::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v12M7 10.5l5 5 5-5M4.5 20.5h15'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v12M7 10.5l5 5 5-5M4.5 20.5h15'/%3E%3C/svg%3E") center / contain no-repeat; }
.workspace .fileImportButton::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5v-12M7 13.5l5-5 5 5M4.5 3.5h15'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5v-12M7 13.5l5-5 5 5M4.5 3.5h15'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Detail pages: In / Sao chép / Xuất file / Thao tác khác are Sapo's 36px bordered buttons with icons or a caret; the
   purchase/transfer steps use the same outlined circles as the order timeline. */
.workspace .documentDetail .toolbarActions button { min-height: 36px; padding: 0 16px; font-size: 14px; }
.workspace :is(.purchaseOrderDetailButtons, .stockTransferDetailActions) button { min-height: 36px; padding: 0 16px; }
.workspace .toolbarActions > .supplierActions > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border: 1px solid var(--sapo-border); border-radius: 3px; background: #fff; font-weight: 500; list-style: none; }
.workspace .toolbarActions > .supplierActions > summary::-webkit-details-marker { display: none; }
.workspace .toolbarActions > .supplierActions > summary::after { content: ""; border: 4px solid transparent; border-top: 5px solid var(--muted); border-bottom: 0; }
.workspace .toolbarActions > .supplierActions > summary:hover { background: #f2f9ff; }
.workspace .purchaseOrderStep:not(.done) .purchaseOrderStepLine span { background: #fff; color: rgba(0, 0, 0, 0.38); border: 1.5px solid rgba(0, 0, 0, 0.38); font-size: 12px; font-weight: 500; }
.workspace .purchaseOrderStep strong { font-size: 14px; font-weight: 400; color: var(--muted); }
.workspace .purchaseOrderStep.done strong { color: var(--text); }
.workspace .purchaseOrderStep small { font-size: 12px; color: var(--muted); }
/* List toolbars keep borderless links (.toolbarActions button), but on detail pages Sapo's In / Sao chép are bordered. */
.workspace .documentDetail .toolbarActions > button:not(.primaryAction):not(.dangerButton):not(.dangerOutlineButton) { border-color: var(--sapo-border); font-weight: 500; }
.workspace .documentDetail .toolbarActions > button:not(.primaryAction):not(.dangerButton):not(.dangerOutlineButton):disabled { border-color: #f3f4f5; }

/* Create pages with a product table (nhập hàng, đặt hàng nhập…): one short empty row, small box icon before the text (owner 19/10/2026). */
.workspace .createProductTable td.createEmptyProduct { height: 52px; padding: 8px 16px; color: var(--muted); text-align: center; white-space: normal; }
.workspace .createProductTable td.createEmptyProduct::before { content: ""; display: inline-block; width: 24px; height: 24px; margin-right: 8px; vertical-align: middle; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' fill='%23d9dde3'%3E%3Cpath d='M36 14 14 23l22 9 22-9z'/%3E%3Cpath d='M12 27v24l22 10V37z'/%3E%3Cpath d='M60 27v24L38 61V37z'/%3E%3Cpath d='M14 23 6 31l22 9 8-8zM58 23l8 8-22 9-8-8z' fill='%23e6e9ed'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Nhãn "V": the customer confirmed the web order (POS Chat row label and the order page's confirmation line). */
.socialConfirmBadge { display:inline-grid; place-items:center; flex:none; width:18px; height:18px; margin-right:4px; border-radius:50%;
  background:#16a34a; color:#fff; font-size:12px; font-weight:700; line-height:1; vertical-align:-3px; cursor:default; }
.orderConfirmLine summary .socialConfirmBadge { margin-right:6px; }
/* The order is in the chat, waiting for the customer's answer. */
.socialConfirmBadge.pending { background:#f97316; }

/* HSD đọc từ ghi chú dòng đơn nhập, chờ xác nhận (Khai báo HSD → Chờ xác nhận, chi tiết đơn nhập, Tạo đơn nhập). */
.lotWarn { margin-top:3px; color:#c2410c; font-size:12px; }
.lotInStock { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.lotSuggestionActions { white-space:nowrap; }
.lotSuggestionActions .linkButton + .linkButton, .purchaseOrderLotTable td .linkButton + .linkButton { margin-left:10px; }
.noteLotPreview { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:4px; font-size:12.5px; color:#475569; }
.noteLotPreview.confirmed { color:#15803d; }
.noteLotPreview .linkButton { font-size:12.5px; }
.noteLotEditor { margin-top:6px; padding:8px 10px; border:1px solid #dbe3ee; border-radius:6px; background:#f8fafc; max-width:420px; }
.noteLotEditor.confirmed { border-color:#86efac; background:#f0fdf4; }
.noteLotConfirm { display:inline-flex; align-items:center; gap:6px; font-weight:600; color:#334155; cursor:pointer; }
.noteLotEditor.confirmed .noteLotConfirm { color:#15803d; }
.noteLotChips { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; }
.noteLotChips .linkButton { min-height:0; font-size:12.5px; }
.noteLotSubmit { display:flex; justify-content:flex-start; }
.noteLotSubmit .primaryAction { min-height:32px; padding:0 16px; }

/* Tạo đơn nhập, Tạo đơn hàng and every other line table of this kind: the product name wraps so the table fits its
   frame and Thành tiền / the × (Xóa dòng) stay in sight (owner 11/10 and 13/10/2026: the long name pushed them out
   behind a horizontal scroll). */
.createProductTable td:has(.createLineName) { white-space: normal; min-width: 240px; }
.purchaseCreateLayout .createProductTable td:has(> .removeLineButton) { width: 40px; text-align: center; }
.purchaseCreateLayout .createProductTable .removeLineButton { font-size: 20px; color: #6b7280; }
.purchaseCreateLayout .createProductTable .removeLineButton:hover { color: #d92d20; }

/* The Sapo pager inside panels and dialogs (one pager everywhere, owner 11/10/2026). */
.historyModal .sapoPager, .stockBreakdownModal .sapoPager, .customerDetailFooter.sapoPager, .groupPreviewPager.sapoPager, .socialSapoPager.sapoPager,
.stockAdjustmentDetailFooter.sapoPager, .priceAdjustmentDetailFooter.sapoPager, .cancelReasonPagination.sapoPager, .ledgerPagination.sapoPager { margin: 0; padding: 12px 16px; }
.carrierListTotals { margin: 8px 16px 0; }

/* Sửa sản phẩm of a Sapo product (sapo-product-edit-ui.js), laid out as Sapo's own (12/10/2026). */
.sapoProductEdit .productEditLayout { grid-template-columns: minmax(0, 1fr) 360px; margin-bottom: 24px; }
.sapoProductEdit .productDetailTitle { display: grid; gap: 4px; }
.sapoProductEdit .productEditField small { font-size: 12px; line-height: 1.35; }
.sapoProductEdit .productEditField input:disabled { background: #f3f4f6; color: #6b7480; }
.sapoProductEdit .sapoProductEditWeight { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 8px; }
.sapoProductEdit .readonlyCheckbox input { cursor: pointer; }
@media (max-width: 900px) {
  .sapoProductEdit .productEditLayout, .sapoProductEdit .variantDetailGrid, .sapoProductEdit .productEditGrid { grid-template-columns: minmax(0, 1fr); }
}
.sapoProductEdit .sapoProductEditImage { display: inline-grid; justify-items: center; gap: 4px; margin: 0; }
.sapoProductEdit .sapoProductEditImage .productEditImage { width: 160px; height: 160px; }
.sapoProductEdit .sapoProductEditImage .productImageMissing { display: grid; place-items: center; font-size: 12px; color: #6b7480; border-style: dashed; }
.sapoProductEdit .sapoProductEditImage figcaption { display: grid; justify-items: center; gap: 2px; font-size: 12px; }
.sapoProductEdit .sapoProductEditImage figcaption .linkButton { min-height: 0; padding: 0; }
/* Sửa sản phẩm 12/10/2026: tick boxes + Thêm / Xoá phiên bản, Tồn kho per branch, the POS price policy card. */
.sapoProductEdit .variantListHeader { grid-template-columns: 28px minmax(0, 1fr) auto; }
.sapoProductEdit .variantListHeader input, .sapoProductEdit .variantRow input[type="checkbox"] { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.sapoProductEdit .variantListHeader .linkButton { min-height: 0; padding: 0; white-space: nowrap; }
.sapoProductEdit .variantListHeader strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sapoProductEdit .dangerLink { color: #e5383b; }
.sapoProductEdit .variantRow { cursor: pointer; }
.sapoProductEdit .variantRow[aria-disabled="true"] { cursor: default; }
.sapoProductEdit .variantRow strong { display: block; margin: 0 0 4px; }
.sapoProductEdit .variantRow span { margin-right: 14px; font-size: 13px; }
.sapoProductEdit .variantListFooter { display: flex; justify-content: center; padding: 10px 14px; }
.sapoProductEdit .variantListFooter .linkButton { min-height: 0; padding: 4px 0; font-weight: 500; }
.sapoProductEdit .productEditAddActions { justify-content: flex-end; margin-top: 12px; }
.sapoProductEdit .productEditStock { margin-top: 24px; }
.sapoProductEdit .productEditStock .productInventoryTable { min-width: 980px; width: 100%; }
.sapoProductEdit .productEditStock .productInventoryTable th, .sapoProductEdit .productEditStock .productInventoryTable td { height: 48px; font-size: 14px; }
.sapoProductEdit .productEditStock td input { box-sizing: border-box; width: 100%; min-width: 80px; height: 34px; min-height: 0; padding: 0 8px; text-align: center; }
.sapoProductEdit .productEditStock td.stockEditBin input { min-width: 140px; text-align: left; }
.sapoProductEdit .productEditStock > small { display: block; padding: 8px 16px 12px; font-size: 12px; }
.sapoProductEdit .smallModalBody .warning { color: #9a6700; margin: 6px 0 0; }

/* Marketing → Phân nhóm khách, Nhắc mua lại, Tệp quảng cáo (customer-marketing-ui.js): Sapo look, tight rows. */
.cmkMain .cmkHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cmkMain .cmkHead .notice { flex: 1; margin: 0; }
.cmkMain .cmkTile strong { font-size: 18px; }
.cmkMain .cmkHint { margin: 4px 0 8px; font-size: 13px; }
.ordersTable.cmkTable { min-width: 0; width: 100%; }
.cmkTable td { vertical-align: top; }
.cmkTable td .muted { font-size: 12.5px; }
.cmkTable .cmkProduct { min-width: 220px; max-width: 380px; white-space: normal; }
.cmkTable .cmkUse { min-width: 240px; max-width: 460px; white-space: normal; color: #747c87; }
.cmkTable .cmkEmail { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.cmkTable .cmkActions { min-width: 200px; }
.cmkTable .cmkActions button { min-height: 30px; padding: 0 10px; margin: 0 6px 0 0; }
.cmkTable .cmkActions .linkButton { padding: 0 4px; }
.cmkTable .cmkExclude { min-height: 30px; font-size: 13px; }
.cmkPill { margin-left: 6px; font-size: 11px; }
.cmkTabs { margin: 8px 0 0; }
.cmkTabCount { padding: 0 7px; border-radius: 10px; color: #5364fe; background: #eef2fd; font-size: 12px; line-height: 18px; }
.cmkCheck { display: inline-flex; align-items: center; gap: 6px; }
.cmkCheck input { margin: 0; }
.cmkCheck .cmkReset { min-height: 0; padding: 0 4px; }
.cmkDays { width: 84px; min-height: 30px; }
.cmkSendModal .cmkMessage { width: 100%; box-sizing: border-box; padding: 8px; font: inherit; }
.cmkSendModal .cmkSendProducts { display: grid; gap: 4px; margin-bottom: 10px; }
.cmkSendModal p { margin: 6px 0; }
.cmkTexts { padding: 16px; border: 1px solid var(--line); background: #fff; }
.cmkField { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.cmkField textarea { width: 100%; box-sizing: border-box; padding: 8px; font: inherit; }
.cmkFieldRow { display: flex; flex-wrap: wrap; gap: 16px; }
.cmkFieldRow input { width: 120px; }
.cmkSave { display: flex; align-items: center; gap: 12px; }
.cmkGuides { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; margin-top: 12px; }
.cmkGuide ol, .cmkGuide ul { display: grid; gap: 6px; margin: 0; padding: 0 16px 12px 32px; }
.cmkGuide > p { margin: 0; padding: 0 16px 12px; }
.cmkGuide .cmkFeedLinks { list-style: none; margin-left: -16px; display: grid; gap: 4px; }
.cmkFeedLink { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12.5px; }
.cmkFeedLink code { overflow: hidden; padding: 2px 6px; border-radius: 3px; background: #f4f6f8; text-overflow: ellipsis; white-space: nowrap; }
.cmkFeedLink .linkButton, .cmkGuide li .linkButton { min-height: 0; padding: 0 4px; }
@media (max-width: 760px) {
  .cmkMain .cmkHead { flex-direction: column; align-items: stretch; }
  .cmkFeedLink { grid-template-columns: 1fr; }
}

/* POS Chat → nhãn "Khách quen" (social-inbox.js loyalChip): the POS's own label beside the name, never squeezed. */
.socialLoyalTag { flex: none; cursor: default; }
.socialChatNameRow .socialLoyalTag { margin-left: 2px; }

/* Marketing → Khách mới (customer-marketing-ui.js renderNewCustomersPage). */
.cmkMain .cmkSteps { gap: 4px; }
.cmkMain .cmkSteps .muted { font-size: 12.5px; }
.cmkStepBlock { padding: 10px 0; border-bottom: 1px solid var(--line); }
.cmkStepBlock:last-of-type { border-bottom: 0; }
.cmkInline { display: inline-flex; align-items: center; gap: 6px; }
.cmkInline input { width: 72px; min-height: 30px; }
.cmkTable .cmkActions .cmkChatLink { margin-right: 8px; white-space: nowrap; }

/* Cấu hình → Quản lý nhân viên (staff-accounts-ui.js): the list, a staff member's login and POS Chat pages. */
.staffSettingsPage .configFilters { margin: 8px 0 12px; }
.staffSettingsPage .configFilters .primaryAction { margin-left: auto; height: 36px; min-height: 0; padding: 0 16px; }
/* Full names and emails like Sapo's list (no cut-off; columns sized by their content), tight rows; names, badges, phones
   and dates stay on one line. */
.settingsDataTable.staffTable { table-layout: auto; }
.settingsDataTable.staffTable th, .settingsDataTable.staffTable td { padding: 10px 12px; white-space: normal; overflow: visible; text-overflow: clip; max-width: none; }
.staffTable .orderLink { text-align: left; }
.staffTable .pill, .staffTable td:nth-child(-n+2), .staffTable td:nth-child(n+7) { white-space: nowrap; }
.settingsDataTable.staffRoleTable { table-layout: auto; }
.settingsDataTable.staffRoleTable th, .settingsDataTable.staffRoleTable td { padding: 10px 12px; white-space: normal; overflow: visible; text-overflow: clip; max-width: none; }
.settingsDataTable.staffRoleTable th, .settingsDataTable.staffRoleTable td:first-child, .settingsDataTable.staffRoleTable td:nth-child(n+3) { white-space: nowrap; }
.staffPages { display: grid; gap: 10px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; }
.staffPageGroup { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.staffPageGroup small { flex-basis: 100%; }
.staffHistory { display: grid; gap: 8px; }
.staffNameCell { display: inline-flex; align-items: center; gap: 8px; }
.staffNameCell .staffFace { width: 28px; height: 28px; }
.staffFaceEdit { display: flex; align-items: center; gap: 16px; }
.staffFace.big { width: 72px; height: 72px; }
.staffFace.big.initials { font-size: 24px; }
.staffFaceActions { display: grid; justify-items: start; gap: 6px; }
.staffFaceUpload { cursor: pointer; }
.staffFaceUpload.disabled { opacity: .5; pointer-events: none; }
.staffHistory p { display: grid; gap: 2px; margin: 0; font-size: 14px; }

/* Nhà cung cấp ↔ Zalo / WhatsApp (supplier-chats-ui.js, 14/10/2026): the supplier page's card and POS Chat's card. */
.socialChannelIcon.whatsapp { background:#25d366; font-size:8px; }
.supplierDetailPage .supplierChatsCard { margin: 16px 0; border-radius: 4px; }
.supplierChatsCard .supplierChatsHeader { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.supplierChatsCard .supplierChatsHeader h3 { font-size: 16px; font-weight: 500; margin: 0; }
.supplierChatsCard .supplierChatsBody { display: flex; flex-direction: column; gap: 8px; padding: 12px 20px 14px; font-size: 13px; }
.supplierChatsCard .supplierChatsBody p { margin: 0; }
.supplierChatList { display: flex; flex-direction: column; }
.supplierChatRow { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.supplierChatRow:last-child { border-bottom: 0; }
.supplierChatRow .supplierChatName { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.supplierChatRow .muted { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.supplierChatRow .linkButton { flex: none; padding: 0 4px; min-height: 0; }
.supplierChatRemove { flex: none; width: 24px; height: 24px; min-height: 0 !important; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.supplierChatRemove:hover { background: #f3f4f6; color: #e3404a; }
.supplierChatSuggest { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: #f7faff; border: 1px dashed #b9d4ff; border-radius: 4px; }
.supplierChatAdd { display: flex; flex-direction: column; gap: 6px; }
.supplierChatAddBar, .supplierChatAddLink { display: flex; gap: 8px; align-items: center; }
.supplierChatAddBar input { flex: 1; min-width: 0; min-height: 36px; }
.supplierChatAddLink input { flex: 1; min-width: 0; max-width: 320px; min-height: 34px; }
.socialSupplierCard .socialSupplierRow { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; }
.socialSupplierRow a { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.socialSupplierRow .socialMuted { flex: 1; font-size: 12px; white-space: nowrap; }
.socialSupplierRemove { flex: none; width: 20px; height: 20px; min-height: 0 !important; padding: 0; border: 0; background: transparent; color: #9aa4b0; font-size: 15px; line-height: 1; cursor: pointer; }
.socialSupplierRemove:hover { color: #e3404a; }
.socialSupplierPick { display: flex; flex-direction: column; gap: 4px; }
.socialSupplierPickBar { display: flex; gap: 6px; align-items: center; }
.socialSupplierPickBar input { flex: 1; min-width: 0; min-height: 30px; font-size: 13px; }
.socialSupplierOption { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; min-height: 0 !important; padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; background: #fff; text-align: left; font-size: 13px; cursor: pointer; }
.socialSupplierOption:hover { background: #f5f7fa; border-color: #b9d4ff; }
.socialSupplierOption .socialMuted { font-size: 12px; }
.skuLinkMenu .skuLinkSupplier { color: #0068ff; }
/* Gợi ý liên kết Zalo – nhà cung cấp (supplier-chats-ui.js bulkPage, /admin/suppliers/chat-links). */
.supplierChatLinksMain.orderListMain { background: #f5f6f8; }
.supplierChatLinksMain.orderListMain .ordersContent { padding: 24px 16px; }
.supplierChatLinksTitle { display: flex; align-items: center; gap: 12px; }
.supplierChatLinksTitle h1 { margin: 0; }
.supplierChatLinksIntro { margin: 4px 0 12px; font-size: 13px; }
.supplierChatLinksPanel { background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.supplierChatLinksBar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.supplierChatLinksBar .tabs { margin: 0; border: 0; }
.supplierChatLinksBar select { min-height: 32px; }
.supplierChatLinksPicked { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: #f0f7ff; border-bottom: 1px solid var(--line); font-size: 13px; }
.supplierChatLinksPicked button { min-height: 30px; }
.supplierChatLinksNotice { margin: 0; padding: 8px 16px; font-size: 13px; color: #0f7b3f; background: #effaf3; }
.supplierChatLinksPanel > .error { margin: 0; padding: 8px 16px; }
.supplierChatLinksPanel .ordersTable.supplierChatLinksTable { min-width: 0 !important; width: 100%; table-layout: auto; }
.supplierChatLinksTable td, .supplierChatLinksTable th { padding: 8px 12px; font-size: 13px; vertical-align: middle; }
.supplierChatLinksTable th:nth-child(4), .supplierChatLinksTable td:nth-child(4) { width: 110px; white-space: nowrap; }
.supplierChatLinksTable th:nth-child(6), .supplierChatLinksTable td:nth-child(6) { width: 140px; }
.supplierChatLinksTable td small { display: block; font-size: 12px; margin-top: 1px; }
.supplierChatLinksTable .checkCell { width: 32px; text-align: center; }
.supplierChatLinksTable tr.selectedRow td { background: #f5faff; }
.supplierChatLinksChat { display: flex; align-items: center; gap: 8px; min-width: 0; }
.supplierChatLinksChat a, .supplierChatLinksTable td > a { font-weight: 500; }
.supplierChatLinksActions { white-space: nowrap; text-align: right; }
.supplierChatLinksActions .linkButton { padding: 0 6px; min-height: 0; }
.linkButton.muted { color: var(--muted); }

/* Đơn nhập hàng → Hoàn trả (purchase-return-ui.js), Sapo's "Tạo hoàn trả cho đơn nhập" page. */
.purchaseReturnPage .purchaseReturnTitle { margin: 4px 0 12px; font-size: 22px; }
.purchaseReturnPage .purchaseReturnGrid { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.purchaseReturnPage .purchaseReturnGrid > div { display: grid; gap: 12px; }
.purchaseReturnPage .purchaseReturnCardHead { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
/* The list tables' min-width (1840px) would push Số lượng out of the card. */
.purchaseReturnPage .purchaseReturnTable { table-layout: fixed; width: 100%; min-width: 0; }
.purchaseReturnPage .purchaseReturnQty { width: 64px; text-align: center; }
.purchaseReturnPage .purchaseReturnTotals { display: grid; gap: 6px; justify-content: end; margin-top: 12px; }
.purchaseReturnPage .purchaseReturnTotals > div { display: grid; grid-template-columns: 180px 120px; text-align: right; }
.purchaseReturnPage .purchaseReturnMoney { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.purchaseReturnPage .purchaseReturnMoney .moneyInput { text-align: right; }
.purchaseReturnPage textarea, .purchaseReturnPage .stocktakeCard > input { width: 100%; box-sizing: border-box; }
.purchaseReturnPage .purchaseReturnFooter { display: flex; justify-content: flex-end; margin-top: 12px; }
@media (max-width: 900px) { .purchaseReturnPage .purchaseReturnGrid { grid-template-columns: 1fr; } .purchaseReturnPage .purchaseReturnMoney { grid-template-columns: 1fr; } }

/* Nhập hàng ▾ → Nhập hàng và in, Sapo's split button on a purchase order. */
.purchaseReceiveMenu { position: relative; margin-left: -6px; }
/* Above .workspace .toolbarActions > .supplierActions > summary (white Thao tác khác). */
.workspace .toolbarActions > .supplierActions.purchaseReceiveMenu > summary { list-style: none; cursor: pointer; padding: 0 10px; height: 36px; box-sizing: border-box; display: inline-flex; align-items: center;
  background: #0088ff; border: 1px solid #0088ff; border-left-color: rgba(255,255,255,.45); color: #fff; border-radius: 0 3px 3px 0; }
.purchaseReceiveMenu > summary::-webkit-details-marker { display: none; }
.workspace .toolbarActions > .supplierActions.purchaseReceiveMenu > summary::after, .workspace .toolbarActions > .supplierActions.purchaseReceiveMenu > summary::before { display: none; }
.purchaseReceiveMenu .supplierActionsMenu { right: 0; left: auto; min-width: 160px; }

/* Đơn nhập hàng → Thanh toán, Sapo's "Xác nhận thanh toán" box: two by two. */
.purchasePayGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.purchasePayGrid input, .purchasePayGrid select { width: 100%; box-sizing: border-box; }
.purchasePayGrid .moneyField { text-align: right; }
@media (max-width: 600px) { .purchasePayGrid { grid-template-columns: 1fr; } }
/* Kiểm hàng → Nhập file (stocktake-import-ui.js): Sapo's "Nhập file phiếu kiểm hàng" box. */
.stocktakeImportModal { width: min(560px, calc(100vw - 32px)); }
.stocktakeImportField { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 12px; }
.stocktakeImportField select { width: 100%; box-sizing: border-box; }
.stocktakeImportNote { margin: 4px 0; color: #e53935; }
.stocktakeImportRules { margin: 0 0 12px; padding-left: 18px; line-height: 1.7; }
.stocktakeImportRules a { color: var(--blue); }
.stocktakeImportDrop { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 4px; color: #747c87; cursor: pointer; text-align: center; }
.stocktakeImportDrop.chosen { color: inherit; border-style: solid; }
.stocktakeImportErrors { max-height: 240px; overflow: auto; margin-top: 8px; }
.stocktakeImportErrors .ordersTable { min-width: 0; width: 100%; table-layout: auto; }
/* Chuyển hàng → Nhập file: Chi nhánh chuyển / nhận side by side, Sapo's hint under each. */
.stocktakeImportBranches.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.stocktakeImportBranches.two .stocktakeImportField { grid-template-columns: 1fr; gap: 4px; }
.stocktakeImportField small { grid-column: 1 / -1; }
/* Chuyển kho → Nhận hàng ▾ (Đã nhận đủ hàng chuyển / Kiểm số lượng hàng chuyển): Sapo's blue button with its menu. */
.workspace .toolbarActions > .supplierActions.transferReceiveMenu > summary { background: #0088ff; border-color: #0088ff; color: #fff; }
.workspace .toolbarActions > .supplierActions.transferReceiveMenu > summary::after { border-top-color: #fff; }
.workspace .toolbarActions > .supplierActions.transferReceiveMenu > summary:hover { background: #0077e0; }
.transferReceiveMenu .supplierActionsMenu { width: auto; min-width: 220px; }
/* Kiểm số lượng hàng chuyển (stock-transfer-receive-ui.js). */
.transferReceivePage .transferReceiveSearch { width: 100%; box-sizing: border-box; margin: 8px 0; }
@media (max-width: 600px) { .stocktakeImportField { grid-template-columns: 1fr; gap: 4px; } .stocktakeImportBranches.two { grid-template-columns: 1fr; } }

/* Đơn hàng → Xử lý đơn hàng (order-handling-ui.js): Airtable "Thiếu hàng (Improved)" in the Sapo look — one row per
   product; the table scrolls inside its box with its head and Mã đơn kept in sight (31 columns), tight rows; an order's
   own cells span its products (light grey), the row's colour (Airtable's) as a bar on its first product cell. */
.ohTone-short { --oh-tone: #ee4747; }
.ohTone-incoming { --oh-tone: #f5a623; }
.ohTone-enough { --oh-tone: #0db473; }
.ohTone-thin { --oh-tone: #9aa1a9; }
.ohTone-swap { --oh-tone: #00a6c7; }
.ohTableWrap { max-height: calc(100vh - 260px); min-height: 240px; overflow: auto; }
.ohTableWrap.ohDim { opacity: 0.6; }
.ordersTable.ohTable { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }
.ohTable th { position: sticky; top: 0; z-index: 2; padding: 8px; white-space: nowrap; }
.ohTable th:first-child { left: 0; z-index: 3; }
/* Frozen columns, Mã đơn through Ảnh (owner 16/10/2026): sticky, their left offsets set after each redraw
   (order-handling-ui.js layout); the last one closes them with a line. Their backgrounds are opaque (white, the group's
   colour, the head's grey). An open SKU menu goes over the frozen cells under it. */
.ohTable :is(th, td).ohFrozen { position: sticky; z-index: 1; }
.ohTable th.ohFrozen { z-index: 3; }
.ohTable :is(th, td).ohFrozenLast { box-shadow: 1px 0 0 #c4cdd5; }
.ohTable td.ohToneCell.ohFrozenLast { box-shadow: inset 4px 0 0 var(--oh-tone, transparent), 1px 0 0 #c4cdd5; }
.ohTable td.ohFrozen:has(details[open]) { z-index: 4; }
.ohTable td { padding: 6px 8px; font-size: 13px; vertical-align: top; white-space: nowrap; background: #fff; }
.ohTable td.ohCode { position: sticky; left: 0; z-index: 1; padding-left: 12px; }
/* Một khách nhiều đơn (owner 17/10/2026; same-customer-orders.js, Xử lý đơn hàng and Danh sách đơn hàng): a violet bar
   on the row's first cell and "N đơn chờ" under the order number; the pointer on it lights every order of that
   customer. The Xử lý đơn hàng rules beat its section colours and frozen-column line. */
.ordersTable td.sameCustomerBar { box-shadow: inset 4px 0 0 #8b5cf6; }
.ohTable td.ohCode.sameCustomerBar.ohFrozenLast { box-shadow: inset 4px 0 0 #8b5cf6, 1px 0 0 #c4cdd5; }
.ordersTable .sameCustomerChip { display: block; width: max-content; min-height: 0; height: 20px; margin: 4px 0 0; padding: 0 7px; border: 0; border-radius: 10px;
  background: #f0eaff; color: #6237d8; font: inherit; font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap; cursor: pointer; }
.ordersTable .sameCustomerChip:hover { background: #e3d8ff; color: #6237d8; }
.ordersTable tr.sameCustomerLit > td,
.workspace .ohTable tr.ohSection.sameCustomerLit > td, .workspace .ohTable tr.ohSection.sameCustomerLit > td.ohOrderCell { background: #f3eeff; }
/* Thời gian: narrow, the larger unit over the smaller one (owner 16/10/2026), the second line under the first's text. */
.workspace .ohTable :is(td.ohTime, th.ohHead-time) { padding-right: 8px; padding-left: 8px; }
.ohTable td.ohTime .ohTimeLine { display: block; white-space: nowrap; }
.ohTable td.ohTime .ohTimeLine + .ohTimeLine { padding-left: 14px; }
/* Người nhận → the orderer's orders, SĐT → 📞 Gọi, Đặt trước → Bật / Tắt (owner 16/10/2026). */
.ohTable a.ohCustomerLink { white-space: normal; }
.ohTable .ohPhoneButton { min-height: 0; height: auto; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
/* Huỷ đơn 3 tháng → × beside the order number (owner 18/10/2026): grey, red under the pointer; Hoàn tác in the line above. */
.ohTable .ohDismiss { min-height: 0; width: 20px; height: 20px; margin: 0 0 0 6px; padding: 0; border: 0; border-radius: 4px; background: none; color: #9aa4ad;
  font: inherit; font-size: 17px; line-height: 20px; vertical-align: -1px; cursor: pointer; }
.ohTable .ohDismiss:hover { color: #d82c0d; background: #fde8e6; }
.ohTable .ohDismiss:disabled { opacity: .45; cursor: default; }
.ohMain .ohNoticeAction { min-height: 0; height: auto; margin-left: 10px; padding: 0; font-size: 13px; font-weight: 600; line-height: 20px; }
/* Gọn (owner 18/10/2026: "dòng thông báo Hoàn tác gọn trên dưới lại chút", "Dòng tên cột cũng gọn lại, có thể cho icon
   bánh xe ra ngoài cột Mã đơn"): the notice line thin, 8px from the frame and the table; the column names on one line
   (⚙ is in the frame's title line, order-handling-ui.js tools) with less room above and under them. */
.ohMain > .ordersContent > :is(.notice, .error) { margin: 0 0 8px; padding: 4px 12px; font-size: 13px; line-height: 20px; }
.workspace .orderListMain .ohSummary:has(+ :is(.notice, .error)) { margin-bottom: 8px; }
/* The order list's 52px cell height (.orderListMain .ordersTable th) does not hold for the column names here: 29px. */
.workspace .ohTable th { height: auto; padding-top: 6px; padding-bottom: 6px; }
.workspace .orderListMain .ohSummary .ohSummaryTools { display: flex; align-items: center; gap: 14px; }
.workspace .orderListMain .ohSummary .ohSummaryTools .columnSettingsGear { width: 24px; min-width: 24px; height: 24px; min-height: 24px; color: var(--muted); font-size: 18px; }
.workspace .orderListMain .ohSummary .ohSummaryTools .columnSettingsGear:hover { color: var(--text, #212b36); }
.ohTable .ohPhoneButton:hover, .ohTable .ohPhoneButton[aria-expanded="true"] { color: #0088ff; background: none; }
.ohTable td.ohPhone .posCall { display: flex; margin: 4px 0 0; }
.ohTable td.ohPhone .posCallNote { max-width: 180px; white-space: normal; }
.ohTable .ohPillButton { min-height: 24px; height: 24px; padding: 0 10px; font: inherit; font-size: 13px; cursor: pointer; }
.ohTable .ohWebToggles { display: flex; gap: 4px; margin-top: 4px; }
.ohTable .ohWebToggle { min-height: 24px; height: 24px; padding: 0 10px; font-size: 12.5px; font-weight: 500; }
.ohTable .ohWebToggle.current { color: var(--muted); background: #f4f6f8; }
/* Khách đặt hàng: the name, then the customer's chats (the order page's icons, app.js sketchChannelIcon). */
.ohTable td.ohCustomer { min-width: 140px; max-width: 240px; white-space: normal; }
.ohTable .ohChats { display: inline-flex; gap: 2px; margin-left: 6px; vertical-align: middle; }
.ohTable .ohChats .orderContactChip { margin: 0; }
/* The orderer's orders, in a bubble beside the name (owner 16/10/2026, was the Số đơn column). */
.ohTable .ohOrdersBubble { display: inline-block; min-width: 20px; height: 20px; box-sizing: border-box; margin-left: 6px; padding: 0 6px; border-radius: 10px;
  color: #fff; background: #2b6fd6; font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; vertical-align: 1px; }
.ohTable .ohOrdersBubble.green { background: #0db473; }
.ohTable .ohOrdersBubble.orange { background: #f08c00; }
.ohTable .ohChatIcon { font-size: 11px; }
.ohTable td.ohOrderCell { background: #fafbfc; }
.ohTable td.ohToneCell { padding-left: 12px; box-shadow: inset 4px 0 0 var(--oh-tone, transparent); }
.ohTable tr.ohRow:not(.ohSameOrder) td { border-top: 2px solid #dfe3e8; }
/* The column heads: a darker grey than the rows under them, over a line (owner 16/10/2026); .workspace beats the Sapo
   look's th grey. A group's heading (Đơn chưa giao · Chưa có trạng thái xử lý · 11 đơn, 13 dòng): small, under that
   line, a lighter grey. */
.workspace .ohTable th { border-bottom: 1px solid #c4cdd5; background-color: #e9edf1; }
/* Low, one text line high, the text a little bigger (owner 16/10/2026): the order list's cells are 52px high. */
.ohTable tr.ohGroupRow td { height: auto; padding: 4px 12px; background: #f7f8f9; color: var(--muted); font-size: 13px; font-weight: 600; line-height: 18px; vertical-align: middle; }
/* Each group in its own light colour, heading and rows alike (owner 16/10/2026: "toàn bộ section chứ không phải
   header"; order-handling-ui.js ohSection-*): the heading a shade deeper, an order's own cells (spanning its products)
   a touch deeper than its product cells. */
/* Very light (owner 16/10/2026: "màu hơi đậm, chuyển qua màu rất nhạt"). */
/* Chưa có trạng thái xử lý: no colour, white rows under a plain grey heading (owner 21/10/2026: "background section Chưa
   có trạng thái xử lý thành màu clear"). White, not transparent: the frozen cells must cover what scrolls under them. */
.ohTable tr.ohSection-p1 { --oh-section: #fff; --oh-section-head: #f4f6f8; }
.ohTable tr.ohSection-p2 { --oh-section: #fffdf3; --oh-section-head: #fdf6d9; }
.ohTable tr.ohSection-p3 { --oh-section: #f6fcf8; --oh-section-head: #e7f7ed; }
.ohTable tr.ohSection-p4 { --oh-section: #fffaf6; --oh-section-head: #fef0e5; }
.ohTable tr.ohSection-p5 { --oh-section: #faf8ff; --oh-section-head: #f0ecff; }
.ohTable tr.ohSection-p6 { --oh-section: #f5fcfc; --oh-section-head: #e3f7f5; }
.ohTable tr.ohSection-p7 { --oh-section: #fef8fb; --oh-section-head: #fbedf3; }
.ohTable tr.ohSection-shipping { --oh-section: #f5f8fc; --oh-section-head: #e6eef8; }
.ohTable tr.ohSection-inactive { --oh-section: #fafbfb; --oh-section-head: #eff1f3; }
.workspace .ohTable tr.ohSection > td { background: var(--oh-section); }
.workspace .ohTable tr.ohSection > td.ohOrderCell { background: color-mix(in srgb, var(--oh-section) 98.5%, #0f1824); }
.workspace .ohTable tr.ohGroupRow.ohSection > td { background: var(--oh-section-head); color: #3d4752; }
.ohMain .ohMore { margin: 8px 4px 0; font-size: 12.5px; }
/* The heading stays at the left while the table scrolls sideways: the cell must not clip (overflow: hidden makes it the
   label's scroll box, and the label scrolled away with the rows). */
.ohTable tr.ohGroupRow td { overflow: visible; }
/* The line under the cancelled lines drawn so far (Huỷ đơn 3 tháng, 50 at a time). */
.ohTable tr.ohMoreRow td { height: auto; padding: 8px 12px; overflow: visible; color: var(--muted); font-size: 13px; }
.ohTable .ohMoreLabel { display: inline-block; position: sticky; left: 12px; }
.ohTable .ohMoreLabel .linkButton { min-height: 0; padding: 0; font-size: 13px; }
/* Frozen too, under the column names (owner 16/10/2026: "freeze row … thêm vào section"): each heading sticks below the
   head (its height set by layout()) until the next one covers it; above the frozen cells, under the head. */
.ohTable tr.ohGroupRow > td { position: sticky; top: var(--oh-head-h, 0px); z-index: 2; }
.ohTable .ohGroupLabel { display: inline-block; position: sticky; left: 12px; }
.ohTable .ohName { min-width: 220px; max-width: 300px; white-space: normal; }
/* SL as "x2" after the name (owner 21/10/2026, was its own column): grey for one, blue for more. */
.ohTable .ohQtyBubble { display: inline-block; min-width: 22px; height: 18px; box-sizing: border-box; margin-left: 6px; padding: 0 6px; border-radius: 9px;
  background: #eef1f4; color: #4a5560; font-size: 12px; font-weight: 600; line-height: 18px; text-align: center; white-space: nowrap; vertical-align: 1px; }
.ohTable .ohQtyBubble.many { background: #0088ff; color: #fff; }
/* The name's last word and the bubble on one line: the bubble never wraps alone. */
.ohTable .ohNameTail { white-space: nowrap; }
/* Mã đơn: SON…, the web's #number small under it (owner 21/10/2026). */
.ohTable td.ohCode .ohWebNumber { display: block; margin-top: 1px; color: var(--muted); font-size: 12px; line-height: 16px; }
.ohTable :is(.ohNote, .ohSupplier) { min-width: 120px; max-width: 220px; white-space: normal; }
/* Ảnh 25% bigger than the 40px it had (owner 19/10/2026: "hình sản phẩm cho to thêm 25%"); the column and the row grow with it. */
.ohImage .productListThumb { width: 50px; height: 50px; object-fit: contain; }
.ohDot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #c4c8cc; vertical-align: middle; }
.ohDot.green { background: #0db473; }
.ohDot.yellow { background: #f5a623; }
.ohDot.red { background: #ee4747; }
.ohStock .ohShort { color: #ee4747; }
.ohStock .ohIncoming { display: block; margin-top: 2px; color: #b77c00; font-size: 12px; }
.ohStock .ohIncomingWhen { margin-top: 0; }
.ohThumb { display: inline-block; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'%3E%3Cpath d='M15 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h3' fill='%23fff' stroke='%230f1824' stroke-width='1.8' stroke-linejoin='round'/%3E%3Crect x='9' y='9' width='12' height='12' rx='2' fill='%23fff' stroke='%230f1824' stroke-width='1.8'/%3E%3C/svg%3E") 11 11, pointer; }
/* "Đã copy" by the pointer after a click on a picture (order-handling-ui.js flash). */
.ohFlash { position: fixed; z-index: 1001; padding: 4px 10px; border-radius: 4px; background: rgba(15, 24, 36, 0.88); color: #fff; font-size: 13px; line-height: 20px;
  white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-100%, 4px); transition: opacity 0.15s, transform 0.15s; }
.ohFlash.shown { opacity: 1; transform: translate(-100%, 0); }
.ohFlash.bad { background: rgba(229, 56, 59, 0.92); }
/* The SKU's menu (sku-link.js) opens below the code: the list's cells clip their content. */
.ohTable td.ohSku { overflow: visible; }
.ohTable .ohSku .skuLink { white-space: nowrap; }
.ohZoom { display: none; position: fixed; z-index: 1000; width: 300px; height: 300px; box-sizing: border-box; padding: 6px; border: 1px solid var(--sapo-border);
  border-radius: 4px; background: #fff; box-shadow: 0 6px 24px rgba(15, 24, 36, 0.18); object-fit: contain; pointer-events: none; }
.ohTable .ohStatusSelect { width: 170px; min-height: 30px; height: 30px; padding: 0 6px; font-size: 13px; }
.ohTable .ohStatusSelect.none { color: var(--muted); }
.ohTable .ohStatus.muted { max-width: 200px; white-space: normal; }
/* Đã xuất kho nhưng giao chưa xong: the shipment in place of Trạng thái xử lý (order-handling-ui.js shippingCell). */
.ohTable .ohShipping { max-width: 210px; white-space: normal; }
.ohTable .ohShipping .ohShipLine, .ohTable .ohShipping .ohShipCarrier { display: block; margin-top: 3px; font-size: 12px; line-height: 16px; }
.ohTable .ohShipping .ohShipLine { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* .orderLink is inline-block: an inline one is cut inside the code, not replaced by "…" whole. */
.ohTable .ohShipping .ohShipLine a { display: inline; }
.ohTable .ohShipping .ohShipCarrier { color: var(--muted); }
.ohTable .ohShipping .ohShipCarrier.green { color: #0b9a62; }
.ohTable .ohShipping .ohShipCarrier.red { color: #e03b3b; }
.ohTable .ohText { min-width: 150px; max-width: 240px; white-space: normal; }
.ohTable .ohTextButton { width: 100%; min-height: 24px; padding: 2px 4px; border: 1px dashed transparent; background: none; color: inherit; font: inherit; font-weight: 400; text-align: left; white-space: normal; }
.ohTable .ohTextButton:hover:not(:disabled) { border-color: var(--sapo-border); }
.ohTable .ohTextButton.ohEmpty { color: #9aa1a9; }
.ohTable .ohTextButton:disabled { cursor: default; color: inherit; }
.ohTable .ohTextInput { width: 100%; min-width: 180px; box-sizing: border-box; padding: 4px 6px; font: inherit; }
.ohTable :is(.ohWebOff, .ohSmsButton) { min-height: 28px; height: 28px; padding: 0 10px; font-size: 12.5px; font-weight: 500; }
.ohTable .ohWebOff { color: #ee4747; border-color: #ffb8b8; background: #fff; }
.ohTable .ohWebOff.confirm { color: #fff; border-color: #ee4747; background: #ee4747; }
.ohTable .ohWebOff:disabled { color: var(--muted); border-color: var(--sapo-border); }
.ohTable .ohSmsButton.sent { color: var(--muted); }
.ohTable .ohSent { display: block; font-size: 11.5px; }
/* Nt hàng về: Hẹn … with Huỷ, Đã nhắn …, Chưa nhắn được (red, why on hover). */
.ohTable .ohNotice .linkButton { min-height: 0; padding: 0; font-size: 12px; }
.ohTable .ohNotice .ohSent + .linkButton { margin-top: 2px; }
.ohTable .ohNoticeFailed { color: #e5484d; }
.ohTable .ohCheck input { margin: 0; }
.ohSmsModal { width: min(560px, calc(100vw - 32px)); }
.ohSmsModal .ohSmsMessage { width: 100%; box-sizing: border-box; padding: 8px; font: inherit; }
.ohSmsModal .ohSmsAccount { display: grid; gap: 4px; margin-bottom: 8px; }
.ohSmsModal .ohSmsWarn { color: #e49c06; }
@media (max-width: 760px) { .ohTableWrap { max-height: none; } }
/* The list's box reaches the bottom of the window, however few rows (owner 16/10/2026): the page is a column, the box
   takes what the frame above leaves and scrolls inside. */
@media (min-width: 761px) {
  .workspace:has(> .ohMain) { display: flex; flex-direction: column; }
  .workspace > .ohMain { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .ohMain > .ordersContent { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: 16px; }
  .ohMain > .ordersContent > * { flex: 0 0 auto; }
  .ohMain > .ordersContent > .ohTableWrap { flex: 1 1 0; min-height: 240px; max-height: none; }
}

/* Danh sách đơn hàng → ĐƠN HÀNG CẦN XỬ LÝ in its own frame, as Sapo's (owner 16/10/2026): a card apart from the list, its
   title over a line, the figures in columns; hidden by default (only the title line and "Hiện đơn hàng cần xử lý"). */
.workspace .orderListMain .orderSummary { margin: 0 0 16px; overflow: hidden; border: 1px solid var(--sapo-divider); border-radius: 4px; background: #fff; box-shadow: var(--sapo-shadow); }
.workspace .orderListMain .orderSummary .summaryHeader { padding: 12px 20px; border-bottom: 1px solid var(--sapo-divider); }
.workspace .orderListMain .orderSummary.collapsed .summaryHeader { border-bottom: 0; }
.workspace .orderListMain .orderSummary .summaryHeader strong { font-size: 14px; font-weight: 500; }
.workspace .orderListMain .orderSummary .summaryHeader .linkButton { min-height: 0; font-size: 14px; }
.workspace .orderListMain .orderSummary .summaryCard { min-height: 64px; padding: 10px 20px; border-right-color: var(--sapo-divider); }
.workspace .orderListMain .orderSummary .summaryCard span { font-size: 14px; }
.workspace .orderListMain .orderSummary .summaryCard strong { font-size: 15px; }
/* Xử lý đơn hàng → ĐƠN CHỜ XỬ LÝ (order-handling-ui.js renderSummary): the same frame, nine tiles that fit or scroll. */
.workspace .orderListMain .ohSummary .summaryHeader > div { display: flex; align-items: baseline; gap: 12px; }
.workspace .orderListMain .ohSummary .summaryHeader .muted { font-size: 13px; }
.workspace .orderListMain .ohSummaryCards { grid-template-columns: repeat(9, minmax(132px, 1fr)); }
/* Each label on one line, also with the menu open (1366px window): "Chưa có trạng thái 11" needs 141px of a 161px tile. */
.workspace .orderListMain .ohSummary .summaryCard { padding: 10px; column-gap: 4px; }
.workspace .orderListMain .ohSummary .summaryCard span { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
/* Quản lý kho → Hàng tồn lâu (stock-aging-ui.js): Fix / Auto / Boost as small text beside the price, the Bật khuyến mãi dialog. */
.ordersTable.stockLotsTable.stockAgingTable { min-width: 1240px; }
.stockAgingPrice { display: flex; justify-content: flex-end; align-items: baseline; gap: 6px; white-space: nowrap; }
.stockAgingModeTag { flex: none; width: 36px; text-align: left; font-size: 12px; line-height: 1.2; color: #6b7785; }
.stockAgingRegular { font-size: 12px; line-height: 1.2; color: #6b7785; }
/* Checkbox and picture columns: less right padding, and no "…" overflow mark of the table cells (owner 17/10/2026: "Bỏ ... kế bên hình sản phẩm"). */
.stockAgingTable:not(.stockAgingEnded) th:nth-child(-n+2), .stockAgingTable:not(.stockAgingEnded) td:nth-child(-n+2),
.stockAgingEnded th:first-child, .stockAgingEnded td:first-child { padding-right: 4px; text-overflow: clip; }
/* Đã tắt khuyến mãi: units sold during the sale. */
.stockAgingSold { font-weight: 600; }
.stockAgingSalePrice { color: #e5383b; font-weight: 600; }
.stockAgingDialog { width: min(560px, calc(100vw - 32px)); }
.stockAgingDialogRows { margin: 0 0 12px; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; max-height: 220px; overflow: auto; }
.stockAgingDialogRows li { display: flex; justify-content: space-between; gap: 12px; min-width: 0; font-size: 13px; }
.stockAgingDialogRows li span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stockAgingDialogRows li strong { flex: none; white-space: nowrap; font-weight: 500; }
.stockAgingEnds { display: grid; gap: 6px; margin-bottom: 8px; }
.stockAgingEnd { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.stockAgingEndField { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: 24px; }
.stockAgingEndField button { min-height: 0; height: 30px; padding: 0 10px; }
.stockAgingEdit { min-height: 0; padding: 0; font-size: 13px; }

/* On Sale on order pages (owner 17/10/2026): the regular price struck through under a line's sale price; in lists
   (product search, Quản lý kho) the sale price red with the regular price struck, smaller, under it (on-sale-prices.js);
   no "On Sale" word there. */
.onSalePrice { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; white-space: nowrap; }
.onSalePrice s { color: #98a2ad; font-size: 12px; font-weight: 400; }
.onSaleNow { color: #e5383b; font-weight: 600; }
/* POS Chat order form: the struck regular price under a line's price box (100px), at its right edge. */
.socialOrderRegular { width: 100px; margin-top: -2px; text-align: right; }
/* POS Chat → Chi tiết sản phẩm: the sale price red, the regular price struck under it. */
.socialProductViewSale { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.socialProductViewSale .socialProductViewPrice { color: #e5383b; }
.socialProductViewSale s { color: #98a2ad; font-size: 13px; }
/* The note hangs under the price input, so the input stays level with the other inputs of the row. */
.onSalePriceCell { position: relative; display: inline-block; }
.onSalePriceCell .onSaleNote { position: absolute; top: 100%; right: 0; margin-top: 2px; }
.onSaleNote { display: block; font-size: 12px; line-height: 1.2; color: #6b7785; white-space: nowrap; }
/* Sửa đơn hàng: the price the customer bought at, under a price that differs from it (a click puts it back). */
.soldPriceNote { padding: 0; border: 0; background: none; min-height: 0; color: #c2410c; font-weight: 600; cursor: pointer; }
/* The row's cells clip what overflows (.createProductTable td): the note is wider than the price box. */
.createProductTable td:has(> .onSalePriceCell > .soldPriceNote) { overflow: visible; }
/* Gộp đơn (order-merge.js): the order a line came from under its price; the dialog's list of the customer's orders. */
.onSalePriceCell .mergedFromNote { position: absolute; top: 100%; right: 0; margin-top: 2px; color: #667085; font-size: 12px; white-space: nowrap; }
.createProductTable td:has(> .onSalePriceCell > .mergedFromNote) { overflow: visible; }
.orderMergeModal { max-width: 620px; }
.orderMergeList { display: grid; gap: 8px; margin-top: 12px; max-height: 55vh; overflow: auto; }
.cloneFulfillmentBody .orderMergeItem { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid #eaecf0; border-radius: 8px; cursor: pointer; }
.orderMergeItem input { flex: none; margin-top: 3px; }
.orderMergeItem.blocked { background: #f9fafb; cursor: default; }
.orderMergeItem ul { margin: 4px 0 0; padding-left: 18px; color: #475467; font-size: 13px; line-height: 1.5; }
.orderMergeItem small { display: block; margin-top: 4px; }
.orderMergeInfo a { font-weight: 600; }
/* Báo cáo → Radar khách hàng (customer-radar-ui.js): two columns of finding cards (Mới hôm nay | Đang lặp lại), then the web,
   Gửi tìm hàng and notes sections. One column on narrow screens. */
.radarColumns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 8px 0 16px; align-items: start; }
.radarColumn { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.radarColumnHead { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--sapo-divider, #e8eaeb); }
.radarCard { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid #dfe3e8; border-radius: 6px; background: #fff; min-width: 0; }
.radarCard.dismissed { opacity: .55; }
.radarCard p { margin: 0; }
.radarCardHead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.radarCardHead .lotChip { margin: 0; }
.radarTitle { font-size: 15px; line-height: 1.35; }
.radarKind { display: inline-block; padding: 1px 8px; border-radius: 10px; background: #f1f3f5; color: #59636e; font-size: 12px; line-height: 20px; white-space: nowrap; }
.radarKind.hang_chua_ban { background: #f3f0ff; color: #5b3fc4; }
.radarKind.het_hang { background: #fff4e0; color: #9a5b00; }
.radarKind.gia { background: #e8f4ff; color: #0b5cad; }
.radarKind.giao_hang { background: #e6f6ef; color: #17734a; }
.radarKind.chat_luong, .radarKind.khieu_nai { background: #fdecec; color: #c62828; }
.radarProducts { display: flex; flex-wrap: wrap; }
.radarQuote { margin: 0; padding: 2px 0 2px 10px; border-left: 3px solid #dfe3e8; color: #4a5560; font-style: italic; }
.radarAction { color: #0b5cad; }
.radarChats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.radarActions { display: flex; gap: 6px; margin-top: 2px; }
.radarActions button { min-height: 28px; padding: 2px 10px; }
.radarActions button.ghost { background: #fff; }
.radarSection { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.radarNotes { margin: 0; padding-left: 18px; }
.radarToggle { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 900px) { .radarColumns { grid-template-columns: minmax(0, 1fr); } }
/* POS Chat → Báo cáo like Sapo Social's report-v2 (social-report-v2.js, social-report-charts.js): underlined tabs, a filter
   row, then a two-column grid of white cards (wider left column), one column on narrow screens. */
.srpPage { background:#f4f6f8; }
.srpTabs { display:flex; gap:4px; padding:0 16px; background:#fff; border-bottom:1px solid var(--line); overflow-x:auto; flex:none; }
.srpTabs button { border:0; border-bottom:2px solid transparent; background:none; padding:12px 14px 10px; font:inherit; font-size:14px; color:#46515e; cursor:pointer; white-space:nowrap; min-height:0; border-radius:0; }
.srpTabs button.active { color:#0088ff; border-bottom-color:#0088ff; font-weight:600; }
.srpHead { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:12px 20px 0; flex:none; }
.srpHead h2 { margin:0; font-size:18px; font-weight:600; }
.srpFilters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.srpPicker { position:relative; }
.srpPickerButton, .srpSelect { display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:4px 12px; border:1px solid #d3d5d7; border-radius:20px; background:#fff; font:inherit; font-size:14px; cursor:pointer; }
.srpCaret { color:#0088ff; font-size:12px; }
.srpPickerMenu { position:absolute; z-index:20; top:calc(100% + 4px); left:0; min-width:260px; max-height:320px; overflow:auto; padding:6px; background:#fff; border:1px solid #d3d5d7; border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.12); }
.srpPickerMenu label { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; cursor:pointer; }
.srpPickerMenu label:hover { background:#f2f7ff; }
.srpPickerMenu small { margin-left:auto; }
.srpDates { display:inline-flex; align-items:center; gap:6px; }
.srpBody { flex:1; min-height:0; overflow-y:auto; padding:12px 20px 20px; }
.srpGrid { display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(0, 1fr); gap:12px; align-items:stretch; }
.srpWide { grid-column:1 / -1; }
.srpCard { display:flex; flex-direction:column; gap:10px; min-width:0; padding:16px 20px; background:#fff; border-radius:6px; box-shadow:0 1px 3px rgba(168,168,168,.3); }
.srpCardHead { display:flex; align-items:center; gap:8px; }
.srpCardHead h3 { margin:0; font-size:16px; font-weight:600; }
.srpLink { margin-left:auto; border:0; background:none; color:#0088ff; font:inherit; font-size:14px; cursor:pointer; min-height:0; padding:0; }
.srpChart { width:100%; height:auto; display:block; }
.srpChart .srpGridLine { stroke:#e8eaeb; stroke-width:1; }
.srpChart .srpAxis { font-size:11px; fill:#6b7785; }
.srpChart .srpCross { stroke:#c7cdd4; stroke-dasharray:3 3; opacity:0; }
.srpChart .srpDot { opacity:0; }
.srpChart .srpHover:hover .srpCross, .srpChart .srpHover:hover .srpDot { opacity:1; }
.srpTiles { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; flex:1; }
.srpTile { display:flex; align-items:center; gap:12px; padding:18px 16px; border-radius:6px; min-width:0; }
.srpTile strong { display:block; font-size:22px; font-weight:600; line-height:1.2; overflow-wrap:anywhere; }
.srpTile small { color:#46515e; font-size:13px; }
.srpIcon { flex:none; display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; color:#fff; font-weight:700; font-size:16px; }
.srpTile.green { background:#ebf8f2; } .srpTile.green .srpIcon { background:#1baf7a; }
.srpTile.pink { background:#fcf0f8; } .srpTile.pink .srpIcon { background:#e87ba4; }
.srpTile.blue { background:#eaf5fb; } .srpTile.blue .srpIcon { background:#2a9bb5; }
.srpTile.red { background:#fdeeee; } .srpTile.red .srpIcon { background:#eb5757; }
.srpTable { width:100%; border-collapse:collapse; font-size:14px; }
.srpTable th { background:#f4f6f8; color:#46515e; font-weight:600; text-align:left; padding:10px 12px; }
.srpTable td { padding:10px 12px; border-top:1px solid #e8eaeb; }
.srpTable .num { text-align:right; }
.srpRank0 { color:#1baf7a; } .srpRank1 { color:#2a78d6; } .srpRank2 { color:#eb6834; }
.srpPerson { display:inline-flex; align-items:center; gap:10px; }
.srpPerson img, .srpInitial { width:32px; height:32px; border-radius:50%; object-fit:cover; flex:none; }
.srpInitial { display:inline-grid; place-items:center; background:#e6eef7; color:#2a78d6; font-weight:600; }
.srpProducts { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.srpProducts li { display:grid; grid-template-columns:44px minmax(0, 1fr) auto; align-items:center; gap:12px; padding:10px 0; border-top:1px solid #e8eaeb; }
.srpProducts li:first-child { border-top:0; }
.srpProducts img, .srpThumb { width:44px; height:44px; object-fit:contain; border-radius:6px; border:1px solid #e8eaeb; background:#fff; }
.srpProducts a, .srpProducts b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400; }
.srpProducts small { color:#6b7785; }
.srpProducts strong { font-size:16px; font-weight:600; white-space:nowrap; }
.srpDonuts { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.srpDonutBox { margin:0; display:flex; flex-direction:column; align-items:center; gap:8px; }
.srpDonut { width:140px; height:140px; border-radius:50%; -webkit-mask:radial-gradient(circle, transparent 46px, #000 47px); mask:radial-gradient(circle, transparent 46px, #000 47px); }
.srpDonut.empty { background:#e8eaeb; }
.srpDonutBox figcaption { font-size:14px; }
.srpLegend { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.srpLegend li { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:16px; background:#f4f6f8; font-size:13px; }
.srpLegend small { color:#6b7785; }
.srpSwatch { width:10px; height:10px; border-radius:50%; flex:none; }
.srpFoot { margin:4px 0 0; font-size:12px; }
.srpEmpty { padding:40px 20px; text-align:center; color:#46515e; }
.srpInterim { display:flex; flex-direction:column; gap:8px; }
.srpInterim .socialReports { background:none; }
.srpRadar .radarMain { background:none; }
/* Tương tác (social-report-interactions.js): Sapo's left list of screens, tiles that pick the chart's measure (coloured top
   edge, change against the period before), rings for the reply rates, a table with its Tổng row. */
.srpSplit { display:grid; grid-template-columns:180px minmax(0, 1fr); gap:12px; align-items:start; }
.srpSubnav { display:flex; flex-direction:column; padding:6px 0; background:#fff; border-radius:6px; box-shadow:0 1px 3px rgba(168,168,168,.3); position:sticky; top:0; }
.srpSubnav button { border:0; background:none; text-align:left; padding:9px 14px; font:inherit; font-size:14px; color:#212b35; cursor:pointer; min-height:0; border-radius:0; }
.srpSubnav button.active { color:#0088ff; background:#f2f7ff; }
.srpGridOne { grid-template-columns:minmax(0, 1fr); }
.srpMetrics { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.srpMetric { display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-rows:auto auto; align-items:center; gap:2px 8px; padding:12px 16px; text-align:left;
  background:#fff; border:1px solid #e8eaeb; border-top:3px solid #e8eaeb; border-radius:6px; font:inherit; color:inherit; cursor:pointer; min-height:0; min-width:0; }
.srpMetric.active { border-top-color:var(--metric, #0088ff); box-shadow:0 1px 4px rgba(0,0,0,.08); }
.srpMetric.static { cursor:default; border-top-width:1px; box-shadow:0 1px 3px rgba(168,168,168,.3); border-color:transparent; }
.srpMetricLabel { grid-column:1; color:#46515e; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.srpMetric strong { grid-column:1; font-size:18px; font-weight:600; }
.srpChange { grid-column:2; grid-row:1 / span 2; font-size:12px; color:#6b7785; white-space:nowrap; padding:2px 8px; border-radius:12px; background:#f4f6f8; }
.srpChange.good { color:#0b7a4b; background:#e6f6ee; }
.srpChange.bad { color:#b5470f; background:#fdf0e8; }
.srpMetricCard { display:flex; flex-direction:column; gap:10px; }
.srpRow3 { display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1.1fr); gap:12px; }
.srpRings { display:flex; flex-direction:column; gap:18px; padding:6px 0; }
.srpRing { display:flex; align-items:center; gap:14px; }
.srpRing small { display:block; color:#46515e; }
.srpRing strong { font-size:18px; font-weight:600; }
.srpRingDial { flex:none; display:grid; place-items:center; width:84px; height:84px; border-radius:50%; }
.srpRingDial span { display:grid; place-items:center; width:68px; height:68px; border-radius:50%; background:#fff; font-size:15px; font-weight:600; }
.srpDonutCol { display:flex; flex-direction:column; align-items:center; gap:10px; }
.srpDonutCol .srpLegend { justify-content:center; }
.srpScreenHead { display:flex; justify-content:flex-end; }
.srpExport { display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:4px 12px; border:1px solid #d3d5d7; border-radius:4px; background:#fff; font:inherit; font-size:14px; cursor:pointer; }
.srpTableWrap { overflow-x:auto; margin:-16px -20px; }
.srpTable th.numberCell, .srpTable td.numberCell { text-align:center; white-space:nowrap; }
.srpTable tr.srpTotal td { font-weight:600; background:#fafbfc; }
.srpChart .srpBar { opacity:.9; }
.srpChart .srpHover:hover .srpBar { opacity:1; }
/* Nhân viên (social-report-staff.js): four ranked people with their photo, people cards, the staff member picker. */
.srpMetrics4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.srpPersonTile { border-top:3px solid var(--metric, #e8eaeb); }
.srpPersonTile .srpPerson img, .srpPersonTile .srpPerson .srpInitial { width:24px; height:24px; font-size:12px; }
.srpPersonTile .srpPerson { gap:6px; }
.srpLegendCenter { justify-content:center; }
.srpScreenHead.start { justify-content:flex-start; }
.srpScreenHead { gap:10px; align-items:center; }
.srpPersonPick { display:inline-flex; align-items:center; gap:8px; margin-right:auto; font-size:14px; color:#46515e; }
.srpPeople { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
.srpPersonCard { align-items:center; text-align:center; gap:6px; }
.srpPersonPhoto { width:64px; height:64px; border-radius:50%; object-fit:cover; font-size:24px; }
.srpPersonCard b { font-size:16px; }
.srpPersonFigures { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; font-size:13px; color:#46515e; }
.srpPersonCard .srpLink { margin:0; }
.srpTable td .srpPerson img, .srpTable td .srpPerson .srpInitial { width:28px; height:28px; }
/* Doanh thu (social-report-revenue.js): product tiles with a picture, ranked product lists, the Sản phẩm nổi bật toggle. */
.srpSection { margin:4px 0 0; font-size:16px; font-weight:600; }
.srpProductLine { grid-column:1 / -1; display:flex; align-items:center; gap:10px; min-width:0; }
.srpProductLine img, .srpProductLine .srpThumb, .srpRankList img, .srpRankList .srpThumb { width:36px; height:36px; object-fit:contain; border-radius:4px; border:1px solid #e8eaeb; background:#fff; flex:none; }
.srpProductLine > span { display:flex; flex-direction:column; min-width:0; }
.srpProductLine b { font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.srpProductLine strong { font-size:18px; font-weight:600; }
.srpProductTile { grid-template-columns:minmax(0, 1fr); }
.srpToggle { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); border:1px solid #d3d5d7; border-radius:4px; overflow:hidden; }
.srpToggle button { border:0; border-left:1px solid #d3d5d7; background:#fff; padding:8px 6px; font:inherit; font-size:13px; cursor:pointer; min-height:0; border-radius:0; }
.srpToggle button:first-child { border-left:0; }
.srpToggle button.active { color:#0088ff; box-shadow:inset 0 0 0 1px #0088ff; }
.srpRankList { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.srpRankList li { display:grid; grid-template-columns:32px 36px minmax(0, 1fr) auto; align-items:center; gap:10px; padding:8px 0; border-top:1px solid #e8eaeb; }
.srpRankList li:first-child { border-top:0; }
.srpRankList > li > span { display:flex; flex-direction:column; min-width:0; font-size:13px; }
.srpRankName { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.srpRankList strong { font-weight:600; white-space:nowrap; }
.srpTopColumn h3 { margin:0; font-size:15px; font-weight:600; text-align:center; }
.srpPostCell { max-width:360px; white-space:normal; }
@media (max-width: 1100px) { .srpGrid { grid-template-columns:minmax(0, 1fr); } .srpRow3 { grid-template-columns:minmax(0, 1fr); } .srpMetrics4, .srpPeople { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .srpSplit { grid-template-columns:minmax(0, 1fr); } .srpSubnav { flex-direction:row; overflow-x:auto; position:static; } .srpSubnav button { white-space:nowrap; } .srpMetrics { grid-template-columns:minmax(0, 1fr); } }
@media (max-width: 560px) { .srpTiles, .srpDonuts { grid-template-columns:minmax(0, 1fr); } .srpBody { padding:10px; } }

/* Sản phẩm → Thị trường (market-deals-ui.js): one block per post of the Zalo group, its photos, one row per product. */
.marketDealsList { display: flex; flex-direction: column; gap: 14px; }
.marketDealsPost { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid #dfe3e8; border-radius: 6px; background: #fff; min-width: 0; }
.marketDealsPostHead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.marketDealsPostHead .linkButton { margin-left: auto; }
.marketDealsText { margin: 0; white-space: pre-line; color: #212b35; }
.marketDealsPhotos { display: flex; flex-wrap: wrap; gap: 6px; }
.marketDealsPhotos img { width: 72px; height: 72px; object-fit: cover; border-radius: 4px; border: 1px solid #e8eaeb; background: #f4f6f8; }
/* Fixed columns from the colgroup and text that wraps (the base td is nowrap + ellipsis): a long name pushed Tạo SP nháp / Bỏ qua
   out of the frame on the first real post (18/10/2026). */
.ordersTable.marketDealsTable { min-width: 1180px; table-layout: fixed; }
.marketDealsTable td { vertical-align: top; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
.marketDealsTable th:nth-child(-n+2), .marketDealsTable td:nth-child(-n+2) { padding-right: 4px; text-overflow: clip; }
.marketDealsTitle { display: block; font-weight: 600; }
.marketDealsName { font-weight: 500; }
.marketDealsSale { color: #e8590c; font-weight: 600; }
.marketDealsCut { color: #e5383b; font-weight: 600; }
.marketDealsPromo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.marketDealsUntil { display: inline-flex; align-items: center; gap: 4px; }
.marketDealsUntil input { height: 30px; padding: 0 6px; }
.marketDealsReason { font-size: 12px; line-height: 1.35; }
.marketDealsQty { width: 64px; text-align: center; }
.marketDealsPick { max-width: 100%; margin-top: 4px; }
.marketDealsButtons { display: flex; flex-wrap: wrap; gap: 6px; }
.marketDealsButtons button { min-height: 0; height: 30px; padding: 0 10px; }
.marketDealsDone { font-size: 12px; margin-top: 4px; }
.marketDealsUnsure td { background: #fffaf0; }
.marketDealsSettings { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #dfe3e8; border-radius: 6px; background: #fff; }
.marketDealsDialog { width: min(720px, calc(100vw - 32px)); }
.marketDealsDialog .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.marketDealsSupplier { display: flex; align-items: center; gap: 10px; }
.marketDealsResults { list-style: none; margin: 4px 0 0; padding: 0; max-height: 200px; overflow: auto; border: 1px solid #e8eaeb; border-radius: 4px; }
.marketDealsResults li { padding: 4px 8px; }
.marketDealsResults li + li { border-top: 1px solid #f0f1f2; }
.marketDealsPics { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.marketDealsPic { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid #dfe3e8; border-radius: 6px; cursor: pointer; font-size: 12px; color: #46515e; }
.marketDealsPic.picked { border-color: #0088ff; box-shadow: 0 0 0 1px #0088ff; }
.marketDealsPic input { position: absolute; top: 8px; left: 8px; }
.marketDealsPic img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; }
.marketDealsPicActions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.marketDealsAgentNote { flex: 1 1 260px; min-width: 200px; }
.marketDealsTwo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.marketDealsCat { font-size: 12px; margin-top: 4px; }
.marketDealsReady { font-size: 12px; margin-top: 4px; color: #0f7b3f; font-weight: 600; }
.marketDealsReview { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid #dfe3e8; border-radius: 6px; background: #fff; }
.marketDealsReviewHead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.marketDealsReviewHead button { margin-left: auto; }
.ordersTable.marketDealsReviewTable { min-width: 760px; table-layout: fixed; }
.marketDealsReviewTable td { vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
.marketDealsReviewLinks { display: flex; flex-wrap: wrap; gap: 16px; }
.marketDealsReviewList { margin: 0; padding-left: 18px; max-height: 240px; overflow: auto; font-size: 13px; }
.marketDealsCatInputs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.marketDealsCatInputs input { flex: 1 1 120px; min-width: 0; height: 30px; }
.marketDealsPicBox { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.marketDealsPicBox > .linkButton { align-self: flex-start; min-height: 0; font-size: 12px; }
.marketDealsMatch { align-self: flex-start; padding: 1px 6px; border-radius: 10px; background: #f1f3f5; color: #46515e; font-size: 11px; font-weight: 600; }
.marketDealsMatch.good { background: #e3f6ea; color: #0f7b3f; }
.marketDealsMatch.fair { background: #fff4e0; color: #a35c00; }
.marketDealsMatch.low { background: #fde8e8; color: #b42318; }

/* Sản phẩm → Sản phẩm bán chạy (best-sellers-ui.js): rank move, change against the previous period, days of stock. */
.ordersTable.bestSellersTable { min-width: 1080px; }
.bestSellersTable .rankMove, .bestSellersTable .bestChange { font-size: 12px; line-height: 16px; }
.rankMove.up, .bestChange.up { color: #0b8a3f; }
.rankMove.down, .bestChange.down { color: #c62828; }
.rankMove.new { color: #008cff; }
.lotTile .bestChange { font-size: 12px; }
.bestSellersTable .coverCell.short { color: #c62828; font-weight: 600; }
.bestSellersTable .coverCell.soon { color: #9a5b00; font-weight: 600; }

/* Sản phẩm → Đề xuất giá & bán hàng (price-signals-ui.js): level chip, suggested price, admin settings. */
.ordersTable.priceSignalsTable { min-width: 1180px; }
.priceSignalsProduct { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.priceSignalsProduct > div { min-width: 0; }
.priceSignalsName { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.priceSignalsLevel { display: inline-block; font-size: 11.5px; line-height: 18px; padding: 0 6px; border-radius: 9px; font-weight: 600; }
.priceSignalsLevel.sure { background: #fde8e8; color: #b42318; }
.priceSignalsLevel.watch { background: #fff4e0; color: #a35c00; }
.priceSignalsSuggest { font-weight: 600; margin-top: 2px; }
.priceSignalsSuggest.down { color: #c62828; }
.priceSignalsSuggest.up { color: #0b8a3f; }
.priceSignalsSettings { margin: 4px 0 8px; }
.priceSignalsSettingsForm { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 10px 12px; border: 1px solid #dfe3e8; border-radius: 6px; background: #fff; }
.priceSignalsSettingsGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; }
.priceSignalsSettingsGrid label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.priceSignalsInput { display: flex; align-items: center; gap: 6px; }
.priceSignalsInput input { width: 90px; text-align: right; }
.priceSignalsSwitch { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.priceSignalsSettingsActions { display: flex; justify-content: flex-end; }
.priceSignalsActions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.priceSignalsActions button { font-size: 12px; padding: 2px 8px; min-height: 0; }
/* Phase 2: Áp giá, the applied list, the wide settings fields. */
.priceSignalsApply { font-size: 12px; padding: 2px 8px; min-height: 0; margin-top: 4px; }
.priceSignalsApplied { margin: 8px 0 12px; }
.priceSignalsApplied h3 { font-size: 14px; margin: 0 0 4px; }
.priceSignalsApplied td, .priceSignalsApplied th { padding: 4px 8px; }
/* The orders list's 1840px minimum pushed Hoàn giá off the page (owner's screenshot 24/10/2026): fit the frame. */
.priceSignalsApplied table.ordersTable { min-width: 0; width: 100%; }
.priceSignalsApplied td:last-child, .priceSignalsApplied th:last-child { width: 150px; white-space: nowrap; }
.priceSignalsApplied button { font-size: 12px; padding: 2px 8px; min-height: 0; }
.priceSignalsWide { display: flex; flex-direction: column; gap: 2px; font-size: 13px; margin-top: 6px; }
.priceSignalsWide input { max-width: 520px; }
.priceSignalsSettingsActions { gap: 8px; }

/* Đơn web chọn chuyển khoản (app.js webTransferBadge / renderWebTransferNotice, 19/10/2026) */
.webTransferPill { margin-left: 8px; white-space: nowrap; }
.ordersTable .webTransferPill { margin-left: 6px; padding: 1px 8px; font-size: 12px; }
.webTransferNotice { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid #f59e0b; background: #fffbeb; border-radius: 4px; }
.webTransferNotice.ready { border-left-color: #16a34a; background: #f0fdf4; }
.webTransferNotice.cancelled { border-left-color: #dc2626; background: #fef2f2; }
.webTransferNoticeText { flex: 1; min-width: 0; }
.webTransferNoticeText p { margin: 0; line-height: 1.5; }
.webTransferNoticeText p + p { margin-top: 4px; }
.webTransferNotice .primaryAction { flex: none; }
/* Vận đơn: live POS waybills with no Sapo shipment, above the list. */
.shipmentWaybillsMissing { display: grid; gap: 6px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid #f3c7a5; border-radius: 4px; background: #fff8f2; }
.shipmentWaybillMissingRow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* POS Chat → POS Bản tin (social-pulse-ui.js, owner 22/10/2026): a thread pinned at the top of the list, its
   bulletins drawn like Sapo Social's "Sapo - cập nhật mới" cards (gradient head, red badge, numbered items). */
.socialAvatar.pulseAvatar { background: #fff; border: 2px solid #2f80ed; color: #2f80ed; }
.socialAvatar.pulseAvatar b { font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.socialAvatar.pulseAvatar.small { border-width: 1.5px; }
.socialAvatar.pulseAvatar.small b { font-size: 9px; }
.socialRow.pulseRow:not(.active) { background: #f7faff; }
.pulsePin { font-style: normal; }
.pulsePin::before { content: "📌"; font-size: 11px; filter: grayscale(1); opacity: .55; }
.pulseRefresh { margin-left: auto; min-height: 0; height: 32px; padding: 0 14px; border: 1px solid #d0d5dd; border-radius: 6px; background: #fff; color: #344054; font: inherit; font-size: 13px; cursor: pointer; }
.pulseRefresh:disabled { opacity: .6; cursor: default; }
.pulseFeed { flex: 1; min-height: 0; overflow-y: auto; background: #f3f5f9; padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.pulseCardHead h3 .pulsePin { margin-left: 8px; }
.pulseFeed .socialDay { align-self: center; }
.pulseLine { display: flex; gap: 10px; align-items: flex-start; }
.pulseCard { flex: 1; min-width: 0; max-width: 700px; background: #fff; border: 1px solid #e6e9ef; border-radius: 16px; box-shadow: 0 1px 3px rgba(16, 24, 40, .08); overflow: hidden; }
.pulseCardHead { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 12px; background: linear-gradient(100deg, #f1f6ff 0%, #eef1fb 55%, #f6efff 100%); }
.pulseCard.live .pulseCardHead { background: linear-gradient(100deg, #ecfdf3 0%, #f0f9ff 100%); }
.pulseCardHead h3 { margin: 0; font-size: 16px; font-weight: 600; color: #101828; }
.pulseBadges { display: flex; flex-wrap: wrap; gap: 6px; }
.pulseBadge { padding: 3px 10px; border-radius: 4px; color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.pulseBadge.red { background: #e5383b; }
.pulseBadge.amber { background: #f79009; }
.pulseBadge.green { background: #12b76a; }
.pulseBadge.blue { background: #2f80ed; }
.pulseBadge.violet { background: #7a5af8; }
.pulseItems { list-style: none; margin: 0; padding: 0 18px 4px; }
.pulseItem { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid #f0f2f5; }
.pulseItem:first-child { border-top: 0; }
.pulseNum { display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid #2f80ed; border-radius: 50%; color: #2f80ed; font-size: 13px; font-weight: 600; }
.pulseBody { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pulseBody > b { color: #101828; font-size: 14px; font-weight: 600; line-height: 26px; }
.pulseBody > small { margin-top: -4px; color: #667085; font-size: 12.5px; }
.pulseBody > .pulseFact { color: #1d2939; font-size: 13.5px; font-weight: 500; }
.pulseWaits { display: flex; flex-direction: column; gap: 1px; }
.pulseWait { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 0; padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pulseWait:hover { background: #f2f6ff; }
.pulseChannels { display: inline-flex; align-items: center; gap: 3px; }
.pulseWaitName { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.pulseWaitName strong { overflow: hidden; color: #1d2939; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.pulseWaitName small { flex: none; color: #98a2b3; font-size: 12px; }
.pulseWait em { color: #667085; font-size: 12px; font-style: normal; white-space: nowrap; }
.pulseWait.today em { color: #d92d20; font-weight: 600; }
.pulseStatuses { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.pulseStatuses li { display: grid; grid-template-columns: minmax(150px, 1fr) 64px minmax(0, auto); gap: 8px; align-items: baseline; }
.pulseStatuses li.first span, .pulseStatuses li.first strong { color: #b42318; }
.pulseStatuses strong { font-weight: 600; text-align: center; }
.pulseStatuses small { color: #667085; font-size: 12px; white-space: nowrap; }
.pulseStatuses a, a.pulseLink { color: #2f80ed; text-decoration: none; }
.pulseLink { align-self: flex-start; min-height: 0; padding: 0; border: 0; background: none; color: #2f80ed; font: inherit; font-size: 12.5px; cursor: pointer; }
.pulseSide .pulseRules { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 18px; color: #344054; font-size: 13px; line-height: 1.45; }

/* POS Chat gợi ý Kết thúc (chat-end-hint.js): a chip under the last line that stays in view while the log scrolls. */
.socialEndHint { position: sticky; bottom: 0; z-index: 2; align-self: center; display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 3px 4px 3px 10px; border: 1px solid #a6e9c8; border-radius: 16px; background: #fff; box-shadow: 0 2px 8px rgba(16, 24, 40, .08); color: #344054; font-size: 13px; }
.socialEndHint i { flex: none; width: 14px; height: 14px; background: #12b76a; }
.socialEndHint button { min-height: 0; padding: 3px 12px; border: 0; border-radius: 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
.socialEndHint .socialEndHintEnd { background: #12b76a; color: #fff; font-weight: 600; }
.socialEndHint .socialEndHintEnd:hover:not(:disabled) { background: #039855; }
.socialEndHint .socialEndHintLater { background: none; color: #667085; }
.socialEndHint .socialEndHintLater:hover:not(:disabled) { background: #f2f4f7; color: #344054; }
.socialEndHint button:disabled { opacity: .6; cursor: default; }
.socialEndHint.short { padding-right: 12px; border-color: #fedf89; }
.socialEndHint.short i { background: #f79009; -webkit-mask-image: var(--omni-i-warn); mask-image: var(--omni-i-warn); }
.socialEndHint.short a { color: #2f80ed; font-weight: 600; text-decoration: none; }

/* POS Chat: the count on the Chưa trả lời chip, red like the rail's badges. */
.omniChip .omniChipCount { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #f04438; color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.omniChip .omniChipCount.none { background: #98a2b3; }