.cats-connection-state {
  position: sticky;
  z-index: 120;
  top: 0;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px max(16px, calc((100vw - 1240px) / 2));
  color: #183b5d;
  background: #fff8e8;
  border-bottom: 1px solid #e7c474;
  font-size: 13.5px;
  line-height: 1.45;
}

/* Khu nhận diện từng ẩn bộ chọn ngôn ngữ để tránh lỗi hydrate.
   Portal r33.1 giữ nguyên cơ chế dịch React và hiển thị lại VI/EN/DE. */
.customer-site .site-header .language-select {
  display: block !important;
  flex: 0 0 auto;
  margin-left: 0 !important;
  visibility: visible !important;
}

.customer-site .site-header .language-select select {
  display: block !important;
  width: 58px !important;
  min-width: 58px !important;
  min-height: 44px !important;
  padding-inline: 8px !important;
  color: #173b5d !important;
  background-color: #f8fbff !important;
  border: 1px solid #bcd2e7 !important;
}

@media (min-width: 1051px) and (max-width: 1320px) {
  .customer-site .site-header .header-inner {
    gap: 10px !important;
    padding-inline: 12px !important;
  }

  .customer-site .site-header nav {
    gap: 0 !important;
  }

  .customer-site .site-header nav > button {
    padding-inline: 7px !important;
    font-size: 12px !important;
  }

  .customer-site .site-header .header-actions {
    gap: 5px !important;
  }

  .customer-site .site-header .language-select select {
    width: 52px !important;
    min-width: 52px !important;
  }
}

.cats-connection-state[hidden] {
  display: none !important;
}

.cats-connection-state > span {
  width: 10px;
  height: 10px;
  background: #d38a08;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #f7d99055;
}

.cats-connection-state[data-state="loading"] > span {
  background: #1670d5;
  animation: cats-state-pulse 0.9s infinite alternate;
}

.cats-connection-state[data-state="expired"] > span,
.cats-connection-state[data-state="forbidden"] > span,
.cats-connection-state[data-state="connection"] > span,
.cats-connection-state[data-state="offline"] > span {
  background: #c24b32;
}

.cats-connection-state button {
  min-height: 44px;
  padding: 0 14px;
  color: #1763c8;
  background: #fff;
  border: 1px solid #b8cee8;
  border-radius: 9px;
  font: inherit;
  font-weight: 800;
}

@keyframes cats-state-pulse {
  to {
    opacity: 0.45;
  }
}

.cats-api-blocked .workspace-empty,
.cats-api-blocked .portal-empty,
.cats-api-blocked .ticket-empty {
  display: none !important;
}

.cats-success-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.cats-success-actions button {
  min-height: 48px;
  padding: 9px 12px;
  color: #1d5eb9;
  background: #fff;
  border: 1px solid #bcd0e7;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.35;
}

.cats-success-actions button[data-cats-success="view"],
.cats-success-actions button[data-cats-success="support"] {
  color: #fff;
  background: #1768d5;
  border-color: #1768d5;
}

.cats-success-actions button[data-cats-success="support"] {
  grid-column: 1 / -1;
}

.success-modal:has(.cats-success-actions) {
  width: min(620px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

.cats-created-request-focus {
  border-radius: 12px;
  outline: 3px solid #31b9b3;
  outline-offset: 4px;
  animation: cats-request-focus 1s ease-in-out 2;
}

@keyframes cats-request-focus {
  50% {
    outline-color: #1768d5;
  }
}

.cats-support-context {
  grid-column: 1 / -1;
  margin-bottom: 12px;
  padding: 11px 13px;
  color: #155d55;
  background: #ecfaf7;
  border: 1px solid #9edbce;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.5;
}

.cats-data-state {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 150px;
  padding: 24px;
  color: #526b82;
  text-align: center;
  background: #f8fbfe;
  border: 1px solid #d8e5f0;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.55;
}

.cats-data-state > i {
  width: 18px;
  height: 18px;
  border: 2px solid #b9cce0;
  border-top-color: #1768d5;
  border-radius: 50%;
  animation: cats-data-spin 0.8s linear infinite;
}

.cats-data-state[data-state="error"] > i {
  width: 12px;
  height: 12px;
  border: 0;
  background: #c15338;
  animation: none;
}

.cats-data-state button {
  min-height: 44px;
  padding: 0 16px;
  color: #fff;
  background: #1768d5;
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-weight: 800;
}

@keyframes cats-data-spin {
  to {
    transform: rotate(360deg);
  }
}

.customer-table-wrap,
.statement-table-wrap,
.quotation-table-wrap,
.editable-bulk-table {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #76a6d5 #edf4fa;
  overscroll-behavior-inline: contain;
}

@media (max-width: 1050px) {
  .site-header nav.open {
    z-index: 110;
    max-height: calc(100dvh - 66px);
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-header nav.open button {
    min-height: 48px !important;
  }
}

@media (max-width: 760px) {
  .customer-site input,
  .customer-site select,
  .customer-site textarea {
    font-size: 16px !important;
  }

  .customer-site small,
  .customer-site .field > span,
  .customer-site .workspace-tabs button,
  .customer-site .success-modal > span,
  .customer-site .success-details span,
  .customer-site .terms {
    font-size: 13px !important;
  }

  .customer-site button,
  .customer-site a[role="button"],
  .cats-success-actions button {
    min-height: 44px;
  }

  .portal-page:has(.form-progress-card) {
    padding-bottom: 118px !important;
  }

  .form-progress-card {
    position: fixed !important;
    z-index: 90 !important;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 8px;
    width: auto !important;
    margin: 0 !important;
    padding: 9px !important;
    border-color: #b8cde3 !important;
    box-shadow: 0 16px 46px #09284f38 !important;
  }

  .form-progress-card .form-progress-head,
  .form-progress-card .form-progress-track {
    display: none !important;
  }

  .form-progress-actions {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    min-height: 48px;
    display: grid !important;
  }

  .form-progress-actions button,
  .form-progress-actions .form-submit-hint {
    min-height: 48px !important;
  }

  .form-progress-actions .form-submit-hint {
    grid-column: 1 / -1;
  }

  .success-modal:has(.cats-success-actions) {
    max-height: calc(100dvh - 16px);
    padding: 20px 15px;
  }

  .cats-success-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cats-success-actions button[data-cats-success="support"] {
    grid-column: auto;
  }

  .cats-connection-state {
    position: fixed;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 8px;
    top: auto;
    grid-template-columns: 10px minmax(0, 1fr);
    border: 1px solid #ddbc73;
    border-radius: 12px;
    box-shadow: 0 16px 42px #0b2b5330;
  }

  .cats-connection-state button {
    grid-column: 2;
    justify-self: start;
  }

  .customer-table,
  .statement-table,
  .quotation-table {
    min-width: 720px;
  }

  .workspace-tabs {
    scroll-padding-inline: 8px;
  }

  .workspace-tabs button + button,
  .detail-actions button + button,
  .document-actions button + button {
    margin-left: 4px;
  }
}


/* r34 — dữ liệu tài chính an toàn, khôi phục truy cập và danh sách lớn */
.financial-data-state {
  background: #fff;
  border: 1px solid #c9d8e8;
  border-left: 5px solid #d28a14;
  border-radius: 14px;
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 24px;
}
.financial-data-state.loading { border-left-color: #2774d8; }
.financial-data-state strong { color: #163a5e; font-size: 20px; }
.financial-data-state p { color: #536b82; font-size: 14px; line-height: 1.65; margin: 0; }
.financial-data-state > div { display: flex; flex-wrap: wrap; gap: 10px; }
.financial-data-state button,
.access-recovery-card button,
.orders-pagination button {
  border: 1px solid #1768c8;
  border-radius: 9px;
  min-height: 44px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 800;
}
.financial-data-state button:first-child,
.access-recovery-card button[type="submit"] {
  background: #1768c8;
  color: #fff;
}
.accounting-verified .warning { color: #a14f12; }
.verified-payment-list { display: grid; gap: 10px; padding: 18px; }
.verified-payment-list article {
  align-items: center;
  background: #f8fbfe;
  border: 1px solid #d9e5f0;
  border-radius: 10px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 13px 15px;
}
.verified-payment-list strong,
.verified-payment-list span { display: block; }
.verified-payment-list span,
.verified-payment-list small { color: #61758a; font-size: 13.5px; }
.verified-empty-history { color: #5c7187; font-size: 14px; margin: 0; padding: 22px; }
.refund-connection-notice {
  background: #fff8e8;
  border: 1px solid #e2bd69;
  border-left: 5px solid #c77f00;
  border-radius: 10px;
  color: #65430b !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  padding: 15px 16px;
}
.access-recovery-card {
  background: #fff;
  border: 1px solid #d5e2ee;
  border-radius: 15px;
  margin-top: 18px;
  padding: 24px;
}
.access-recovery-card h2 { color: #12395d; font-size: 24px; margin: 0 0 7px; }
.access-recovery-card > p { color: #5a7086; font-size: 14px; line-height: 1.6; margin: 0 0 18px; }
.access-recovery-card form { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.access-recovery-card label { color: #304d69; display: grid; font-size: 13.5px; font-weight: 700; gap: 7px; }
.access-recovery-card input {
  border: 1px solid #cbd9e7;
  border-radius: 9px;
  min-height: 46px;
  padding: 0 12px;
  font-size: 16px;
}
.access-recovery-card form > button,
.access-recovery-card form > p { grid-column: 1 / -1; }
.access-recovery-error { color: #9b361f; font-size: 13.5px; margin: 0; }
.access-recovery-success {
  align-items: center;
  background: #eef9f5;
  border: 1px solid #a9daca;
  border-radius: 11px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px;
}
.access-recovery-success code {
  background: #fff;
  border: 1px solid #b9d7cb;
  border-radius: 8px;
  color: #12644c;
  font-size: 16px;
  font-weight: 900;
  padding: 9px 12px;
}
.orders-panel .orders-toolbar {
  background: #fff;
  position: sticky;
  top: 78px;
  z-index: 8;
}
.orders-pagination { display: flex; justify-content: center; padding: 18px; }
.orders-pagination button { background: #fff; color: #1768c8; min-width: 180px; }

@media (max-width: 760px) {
  .financial-data-state,
  .access-recovery-card { padding: 18px 15px; }
  .financial-data-state > div { display: grid; }
  .financial-data-state button { width: 100%; }
  .access-recovery-card form { grid-template-columns: 1fr; }
  .verified-payment-list article { grid-template-columns: 1fr auto; }
  .verified-payment-list article small { grid-column: 1 / -1; }
  .orders-panel .orders-toolbar {
    top: 64px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .orders-toolbar label { min-width: 100%; }
}